feat(web,mobile): /side starts the side chat with the message's attachments

apps/mobile/src/features/threads/useStartSideChat.ts

@@ -2,27 +2,42 @@ import { scopeThreadRef } from "@t3tools/client-runtime/environment";
 import { deriveThreadTitleSeed } from "@t3tools/client-runtime/operations";
 import {
   isAtomCommandInterrupted,
+  settlePromise,
   squashAtomCommandFailure,
   type AtomCommandResult,
 } from "@t3tools/client-runtime/state/runtime";
+import { restoreAttachmentOnlyBootstrapPrompt } from "@t3tools/shared/composerContextReferences";
 import {
   MessageId,
   ThreadId,
   type ModelSelection,
+  type OrchestrationMessageContext,
   type RuntimeMode,
   type ScopedThreadRef,
 } from "@t3tools/contracts";
 
 import * as Dialog from "../../components/ui/Dialog";
+import { prepareTurnAttachments } from "../../lib/attachmentUpload";
+import {
+  serializeComposerMessageForServer,
+  uploadedComposerContext,
+} from "../../lib/composerContext";
+import type { DraftComposerAttachment } from "../../lib/composerImages";
 import { uuidv4 } from "../../lib/uuid";
 import { appAtomRegistry } from "../../state/atom-registry";
 import { environmentThreadShells, threadEnvironment } from "../../state/threads";
 import { useAtomCommand } from "../../state/use-atom-command";
 import { waitForThreadShell } from "./threadForkNavigation";
 import { useOpenLinkedThread } from "./useOpenLinkedThread";
 
+export interface SideChatMessage {
+  readonly text: string;
+  readonly attachments: ReadonlyArray<DraftComposerAttachment>;
+  readonly context: OrchestrationMessageContext | undefined;
+}
+
 /**
- * Forks `source` at its latest stable point into a side chat, sends `prompt` there, and opens
+ * Forks `source` at its latest stable point into a side chat, sends `message` there, and opens
  * it like any linked thread. Resolves false when the side chat did not start. `settings` are
  * what the parent's composer would send, which its thread gets only on its next send.
  */
@@ -44,9 +59,23 @@ export function useStartSideChat() {
 
   return async (
     source: ScopedThreadRef,
-    prompt: string,
+    message: SideChatMessage,
     settings: { readonly runtimeMode: RuntimeMode; readonly modelSelection: ModelSelection },
   ): Promise<boolean> => {
+    // Upload first, so an attachment that cannot go out never leaves an empty side chat.
+    const prepared = await settlePromise(() =>
+      prepareTurnAttachments({
+        environmentId: source.environmentId,
+        attachments: message.attachments,
+        supportsImageUploads: true,
+      }),
+    );
+    if (prepared._tag === "Failure") {
+      alertFailure(prepared, "Could not upload the attachments.");
+      return false;
+    }
+    if (prepared.value.status !== "ready") return false;
+    const attachments = prepared.value.attachments;
     const targetThreadId = ThreadId.make(uuidv4());
     const fork = await forkSideChat({
       environmentId: source.environmentId,
@@ -104,11 +133,14 @@ export function useStartSideChat() {
         message: {
           messageId: MessageId.make(uuidv4()),
           role: "user",
-          text: prompt,
-          attachments: [],
+          ...serializeComposerMessageForServer(
+            restoreAttachmentOnlyBootstrapPrompt(message.text, attachments.length > 0),
+            uploadedComposerContext(message.context, message.attachments, attachments),
+          ),
+          attachments,
         },
         modelSelection: settings.modelSelection,
-        titleSeed: deriveThreadTitleSeed({ text: prompt, attachments: [] }),
+        titleSeed: deriveThreadTitleSeed(message),
         runtimeMode: settings.runtimeMode,
         interactionMode: "default",
         createdAt: new Date().toISOString(),

apps/mobile/src/state/thread-task-permissions.test.ts

@@ -9,6 +9,7 @@ import {
   RuntimeRequestId,
   TurnItemId,
   type ModelSelection,
+  type OrchestrationMessageContext,
   type OrchestrationV2ThreadProjection,
   type RuntimeMode,
   type ServerConfig,
@@ -31,6 +32,7 @@ const state = vi.hoisted(() => ({
     text: "Keep my draft",
     attachments: [] as DraftComposerImageAttachment[],
     modelSelection: undefined as ModelSelection | undefined,
+    context: undefined as OrchestrationMessageContext | undefined,
     runtimeMode: undefined as RuntimeMode | undefined,
   },
   serverConfig: null as ServerConfig | null,
@@ -200,6 +202,7 @@ beforeEach(() => {
     text: "Keep my draft",
     attachments: [],
     modelSelection: undefined,
+    context: undefined,
     runtimeMode: undefined,
   };
   state.freshPending = false;
@@ -349,6 +352,22 @@ describe("mobile task permissions", () => {
       ...state.serverConfig,
       environment: { capabilities: { sideChats: true } },
     } as ServerConfig;
+    const screenshot = { id: "screenshot" } as DraftComposerImageAttachment;
+    const screenshotContext = {
+      version: 1,
+      records: [
+        {
+          version: 1,
+          kind: "image",
+          contextId: "ctx-screenshot",
+          label: "screenshot.png",
+          attachmentId: "screenshot",
+          name: "screenshot.png",
+          mimeType: "image/png",
+          sizeBytes: 10,
+        },
+      ],
+    } as unknown as OrchestrationMessageContext;
     // The thread gets the composer's mode and model only on its next send.
     const selection: ModelSelection = {
       instanceId: ProviderInstanceId.make("codex"),
@@ -358,6 +377,8 @@ describe("mobile task permissions", () => {
     state.draft = {
       ...state.draft,
       text: "/side why does this fail?",
+      attachments: [screenshot],
+      context: screenshotContext,
       modelSelection: selection,
       runtimeMode: "approval-required",
     };
@@ -367,12 +388,25 @@ describe("mobile task permissions", () => {
     expect(await composer.onSendMessage()).toBeNull();
     expect(startSideChat).toHaveBeenCalledExactlyOnceWith(
       { environmentId: "secondary", threadId: "thread" },
-      "why does this fail?",
+      { text: "why does this fail?", attachments: [screenshot], context: screenshotContext },
       { runtimeMode: "approval-required", modelSelection: selection },
     );
     expect(state.enqueue).not.toHaveBeenCalled();
     expect(state.clearDraft).toHaveBeenCalled();
 
+    // Context other than attachments stays out of side chats.
+    vi.clearAllMocks();
+    state.draft = {
+      ...state.draft,
+      context: {
+        version: 1,
+        records: [{ kind: "terminal" }],
+      } as unknown as OrchestrationMessageContext,
+    };
+    expect(await useThreadComposerState({ startSideChat }).onSendMessage()).toBeNull();
+    expect(startSideChat).not.toHaveBeenCalled();
+    expect(state.clearDraft).not.toHaveBeenCalled();
+
     // An attachment added while the side chat starts stays in the draft.
     vi.clearAllMocks();
     startSideChat.mockImplementationOnce(async () => {
@@ -382,7 +416,7 @@ describe("mobile task permissions", () => {
       };
       return true;
     });
-    state.draft = { ...state.draft, text: "/side again?", attachments: [] };
+    state.draft = { ...state.draft, text: "/side again?", attachments: [], context: undefined };
     expect(await useThreadComposerState({ startSideChat }).onSendMessage()).toBeNull();
     expect(startSideChat).toHaveBeenCalledOnce();
     expect(state.clearDraft).not.toHaveBeenCalled();

apps/mobile/src/state/use-thread-composer-state.ts

@@ -59,6 +59,7 @@ import {
   appendPendingThreadMessages,
   selectPendingAcknowledgedMessages,
 } from "../features/threads/pending-thread-feed";
+import type { SideChatMessage } from "../features/threads/useStartSideChat";
 import { threadAllowsProviderSwitch } from "./thread-provider-switching";
 import { appAtomRegistry } from "./atom-registry";
 import { pendingThreadCreationMessage } from "./pending-thread-creation";
@@ -178,10 +179,10 @@ export function useThreadDraftForThread(input: {
 }
 
 export function useThreadComposerState(input: {
-  /** Forks the thread into a side chat that gets `prompt`; resolves false when it did not start. */
+  /** Forks the thread into a side chat that gets `message`; resolves false when it did not start. */
   readonly startSideChat: (
     source: ScopedThreadRef,
-    prompt: string,
+    message: SideChatMessage,
     settings: { readonly runtimeMode: RuntimeMode; readonly modelSelection: ModelSelection },
   ) => Promise<boolean>;
 }) {
@@ -558,24 +559,34 @@ export function useThreadComposerState(input: {
     };
     // A redirect's text answers its approval, so `/side` there is that text, not the command.
     const sideChatCommand = beforeDispatch === undefined ? parseSideChatCommand(text) : null;
+    const contextBlockReason = composerContextSendBlockReason(draft.context);
     if (sideChatCommand) {
       if (sideChatUnavailableReason !== null) {
         Dialog.alert("Side chat not started", sideChatUnavailableReason);
-      } else if (attachments.length > 0 || (draft.context?.records.length ?? 0) > 0) {
+      } else if (
+        draft.context?.records.some((record) => record.kind !== "image" && record.kind !== "file")
+      ) {
         Dialog.alert(
-          "Side chats take text only",
-          "Remove the attachments and context, then send it again.",
+          "Side chats take text and attachments only",
+          "Remove the added context, then send it again.",
         );
-      } else if (sideChatCommand.prompt.length === 0) {
+      } else if (sideChatCommand.prompt.length === 0 && attachments.length === 0) {
         Dialog.alert("Ask a side question", "Type the question after /side, then send it.");
+      } else if (attachments.length > PROVIDER_SEND_TURN_MAX_ATTACHMENTS) {
+        Dialog.alert(
+          "Too many attachments",
+          `Remove attachments until there are at most ${PROVIDER_SEND_TURN_MAX_ATTACHMENTS}.`,
+        );
+      } else if (contextBlockReason) {
+        Dialog.alert("Too much context", contextBlockReason);
       } else if (modelUnavailable) {
         alertModelUnavailable();
       } else if (!startingSideChatRef.current) {
         startingSideChatRef.current = true;
         const started = await input
           .startSideChat(
             { environmentId: thread.environmentId, threadId: thread.id },
-            sideChatCommand.prompt,
+            { text: sideChatCommand.prompt, attachments, context: draft.context },
             {
               runtimeMode: draft.runtimeMode ?? thread.runtimeMode,
               modelSelection,
@@ -589,8 +600,11 @@ export function useThreadComposerState(input: {
         if (
           started &&
           current.text === draft.text &&
-          current.attachments.length === 0 &&
-          (current.context?.records.length ?? 0) === 0
+          current.attachments.length === attachments.length &&
+          current.attachments.every(
+            (attachment, index) => attachment.id === attachments[index]?.id,
+          ) &&
+          JSON.stringify(current.context) === JSON.stringify(draft.context)
         ) {
           clearComposerDraftContent(threadKey);
         }
@@ -619,7 +633,6 @@ export function useThreadComposerState(input: {
       return null;
     }
 
-    const contextBlockReason = composerContextSendBlockReason(draft.context);
     if (contextBlockReason) {
       Dialog.alert("Too much context", contextBlockReason);
       return null;

apps/web/src/components/ChatView.logic.test.ts

@@ -3,6 +3,7 @@ import {
   buildExpiredTerminalContextToastCopy,
   mergeDirectPreviewAnnotation,
   planComposerTurn,
+  sideChatFirstMessage,
   snapshotComposerSend,
   withMessageContext,
   deriveAvailableRevertTurnCounts,
@@ -12,6 +13,7 @@ import { ProviderDriverKind, type ServerProvider } from "@t3tools/contracts";
 import { deriveProviderInstanceEntries } from "../providerInstances";
 import { ensureInlineContextReferences } from "../lib/composerContextReferences";
 import { terminalContextReference } from "../lib/composerContextRecords";
+import { ATTACHMENT_ONLY_BOOTSTRAP_PROMPT } from "@t3tools/shared/composerContextReferences";
 import {
   CommandId,
   EnvironmentId,
@@ -1164,6 +1166,76 @@ describe("boundAttachmentIds", () => {
   });
 });
 
+describe("sideChatFirstMessage", () => {
+  const image = {
+    type: "image" as const,
+    id: "local-image",
+    name: "screenshot.png",
+    mimeType: "image/png",
+    sizeBytes: 4,
+    previewUrl: "blob:screenshot",
+    file: new File(["png!"], "screenshot.png", { type: "image/png" }),
+  };
+  const file = {
+    type: "file" as const,
+    id: "local-file",
+    name: "notes.txt",
+    mimeType: "text/plain",
+    sizeBytes: 5,
+    file: null,
+  };
+  const uploaded = [
+    {
+      type: "image" as const,
+      id: "upload-image",
+      name: image.name,
+      mimeType: "image/png",
+      sizeBytes: 4,
+    },
+    {
+      type: "file" as const,
+      id: "upload-file",
+      name: file.name,
+      mimeType: "text/plain",
+      sizeBytes: 5,
+    },
+  ];
+
+  it("sends the attachments with context bound to their upload ids", () => {
+    const message = sideChatFirstMessage({
+      prompt: " what is this? ",
+      attachments: [image, file],
+      turnAttachments: uploaded,
+    });
+    expect(message?.text).toBe("what is this?");
+    expect(message?.attachments).toEqual(uploaded);
+    expect(message?.titleSeed).toBe("what is this?");
+    expect(message?.context?.records).toMatchObject([
+      { kind: "image", attachmentId: "upload-image" },
+      { kind: "file", attachmentId: "upload-file" },
+    ]);
+  });
+
+  it("sends attachments without text as an attachment-only message", () => {
+    const message = sideChatFirstMessage({
+      prompt: "",
+      attachments: [image],
+      turnAttachments: uploaded.slice(0, 1),
+    });
+    expect(message?.text).toBe(ATTACHMENT_ONLY_BOOTSTRAP_PROMPT);
+    expect(message?.titleSeed).toBe("Attached image");
+  });
+
+  it("sends plain text alone, and nothing for a bare /side", () => {
+    expect(sideChatFirstMessage({ prompt: "why?", attachments: [], turnAttachments: [] })).toEqual({
+      text: "why?",
+      attachments: [],
+      titleSeed: "why?",
+    });
+    expect(sideChatFirstMessage({ prompt: " ", attachments: [], turnAttachments: [] })).toBeNull();
+  });
+});
+
 describe("deriveAvailableRevertTurnCounts", () => {
   const providerThreadId = ProviderThreadId.make("provider-thread");
   const otherProviderThreadId = ProviderThreadId.make("other-provider-thread");