fix(ui): retain first-chat uploads through task creation (#16896)

## Thinking Path

> - Paperclip is the open source app people use to manage AI agents for
work.
> - Agent Chat lets a person attach files before the first message.
> - The first upload creates the saved chat task while the upload is
still pending.
> - Initial history loading used that new task ID to reset the open
composer.
> - Resetting the composer discarded its pending upload even when the
server saved the file.
> - This pull request uses the conversation's stable draft key for its
history readiness.
> - The benefit is a first message that retains its selected files and
their saved references.

## Linked Issues or Issue Description

**What happened?**

The first file upload in a new Agent Chat saved on the server but
disappeared from the composer. The initial history change in #16878 can
unmount the active composer when an empty chat receives its task ID. The
pending upload belongs to that unmounted composer, so the new composer
has no selected file.

**Expected behavior**

The same conversation keeps its active composer and pending file while
the task is created. Sending the message binds the saved attachment
once. Initial history loading for an existing conversation and ordinary
task still waits before mounting its composer.

**Steps to reproduce**

1. Open Agent Chat for an agent with no saved conversation.
2. Attach a text file before sending a message.
3. Let chat creation finish while the upload is pending.
4. Observe that the file chip disappears, although the attachment POST
returns 201.

**Paperclip version or commit**

Reproduced by a deterministic real-composer regression on master
2e5bf12411. The existing browser case also
failed twice in #16893 before this prerequisite fix.

**Deployment mode**

Built from source. Browser acceptance uses a disposable local-trusted
server, embedded PostgreSQL, Chromium, and a simulated agent.

Related: #16878 added the initial history gate. #15769 covers durable
writes during disconnects; this change fixes an in-flight upload lost
during first-chat creation. Duplicate searches found no existing fix for
this transition.

## What Changed

- Use the stable conversation draft key for readiness and timeout state
when available. Ordinary tasks keep their task ID as the readiness key.
- Add desktop and mobile regressions with a deferred real-composer
upload. Check the same editor, file receipt, and one send after chat
creation. Keep coverage for deferred initial history on saved
conversations.
- Update the Agent Chat feature map with the first-upload journey and
its verification scope.

## Verification

- Red: both new desktop and mobile tests found that the editor became
null during the draft-to-saved-chat transition, losing the pending file.
- Green: `node node_modules/vitest/vitest.mjs run
ui/src/components/TaskChatThread.test.tsx
ui/src/components/task-chat/TaskChatComposer.test.tsx --maxWorkers=2`
passed all 335 tests.
- The existing Chromium first-upload journey passed after the fix. It
checks the visible chip, saved attachment, no premature agent run, and
the attachment count after send and reload. Command: `pnpm exec
playwright test --config tests/e2e/playwright.config.ts
tests/e2e/agent-chat-projects.spec.ts --grep 'first upload creates the
chat' --workers=1`.
- The browser run built the shipped UI. Token gates, palette and
character checks, map validation, and diff checks passed.
- Earlier local browser attempts did not reach the assertion:
dependencies installed without lifecycle scripts lacked the packaged
PostgreSQL library symlinks, then an anchored title filter matched no
test. Ran the native package's setup, corrected the filter, and
preserved both setup logs. The deterministic component regression
supplies the local failing-before proof.
- An initial direct UI typecheck lacked generated Storybook catalogs.
The standard `pnpm --filter @paperclipai/ui typecheck` generated them
and passed.
- Independent source review found no actionable issue. The readiness key
matches the parent thread key, and conversation changes retain their
existing remount boundary.
- Review found one documentation overstatement: the browser test checks
the attachment count after reload, while the component test checks the
submitted Markdown reference and receipt ID. Corrected the map and this
description to separate those assertions. No production code or browser
assertions changed.
- Current commit c6a2734311 has 55
successful checks and 2 skipped checks. Greptile is 5/5 with the finding
resolved. The separate Paperclip review is neutral/incomplete: it
inspected the changed code but its reads of the parent IssueDetail
source stalled. It reported no actionable defect. The independent source
review described above did inspect the parent identity boundary.
- Full current-commit CI is the repository-wide gate. No deployment or
live model was used.

## Risks

- A conversation draft key must stay stable while its task is created.
Agent Chat already uses that key for its composer draft and thread
identity.
- A different conversation key resets readiness. Existing conversation
and ordinary task history still use their initial loading gate.
- No visual values, API contracts, upload retries, or attachment
authorization changed.

## Model Used

OpenAI Codex, GPT-6 family. The exact serving model ID and context
window are not exposed by this session. Used tool calls, code execution,
and test-first regression verification.

## Checklist

- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have searched GitHub for duplicate or related PRs and linked
them above
- [x] I have either (a) linked existing issues with `Fixes: #` / `Closes
#` / `Refs #` OR (b) described the issue in-PR following the relevant
issue template
- [x] I have not referenced internal/instance-local Paperclip issues or
links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip`
URLs)
- [x] My branch name describes the change (e.g. `docs/...`, `fix/...`)
and contains no internal Paperclip ticket id or instance-derived details
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] All Paperclip CI gates are green
- [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups
- [x] I will address all Greptile and reviewer comments before
requesting merge

---------

Co-authored-by: Paperclip <noreply@paperclip.ing>

maps/feature-map/agent-chat.md

@@ -39,6 +39,17 @@ Preconditions: follow the [baseline](./README.md#before-driving-a-journey). Enab
 
 Automated: [chat landing](../../ui/src/pages/AgentChats.test.tsx) checks recent-chat routing; [conversation service](../../server/src/__tests__/agent-conversations.test.ts) covers persisted conversation behavior.
 
+Automated: [thread and composer](../../ui/src/components/TaskChatThread.test.tsx)
+keeps an in-flight attachment through first-chat creation on desktop and mobile,
+while initial history for an existing conversation stays deferred. The
+[first-upload browser journey](../../tests/e2e/agent-chat-projects.spec.ts)
+checks the visible file chip, server attachment, no premature agent run, and
+attachment count after send and reload. That journey uses a simulated agent.
+
+Manual: In a conversation with no messages, attach a file before the first
+send. Confirm the same file stays in the composer after the chat is created.
+Send it once, reload, and confirm the file and message remain.
+
 Manual: Start a conversation, send a recognizable request, and inspect its reply.
 Navigate away and reopen the same history. Use `/new` for a fresh session within
 the same standing conversation. Test an unavailable historical agent and an

ui/src/components/TaskChatThread.test.tsx

@@ -343,6 +343,46 @@ it.each([true, false])("defers hidden content until history is ready and keeps i
   expect(container.querySelector('.task-chat-history-pending')).toBeNull();
 });
 
+it("defers initial history for a saved conversation with its own draft key", () => {
+  render(<TaskChatThread comments={[]} onAdd={async () => {}} issueId="saved-chat"
+    conversationMode draftKey="agent-chat:company:saved-agent" initialHistoryPending />);
+  expect(container.querySelector('[data-testid="mock-editor"]')).toBeNull();
+  expect(container.querySelector('[data-testid="task-chat-composer-dock"]')?.hasAttribute("inert")).toBe(true);
+});
+
+it.each([true, false])("keeps an upload attached when a conversation draft becomes a saved task (mobile=%s)", async (mobile) => {
+  sidebarState.isMobile = mobile;
+  const onAdd = vi.fn().mockResolvedValue(undefined);
+  let resolveUpload!: (receipt: { id: string; contentPath: string; originalFilename: string }) => void;
+  const onAttachImage = vi.fn().mockReturnValue(new Promise(resolve => { resolveUpload = resolve; }));
+  const props = { comments: [], onAdd, onAttachImage, conversationMode: true, draftKey: "agent-chat:company:agent" };
+  render(<TaskChatThread {...props} issueId="" />);
+  const composer = container.querySelector('[data-testid="mock-editor"]');
+  const input = container.querySelector<HTMLInputElement>('input[type="file"]')!;
+  const file = new File(["notes"], "chat-notes.txt", { type: "text/plain" });
+  Object.defineProperty(input, "files", { configurable: true, value: [file] });
+  await act(async () => { input.dispatchEvent(new Event("change", { bubbles: true })); });
+  expect(onAttachImage).toHaveBeenCalledExactlyOnceWith(file);
+  expect(container.querySelector('[data-testid="task-chat-composer-attachments"]')?.textContent).toContain("chat-notes.txt");
+
+  render(<TaskChatThread {...props} issueId="persisted-chat" initialHistoryPending />);
+  expect(container.querySelector('[data-testid="mock-editor"]')).toBe(composer);
+  expect(container.querySelector('[data-testid="task-chat-composer-attachments"]')?.textContent).toContain("chat-notes.txt");
+  expect(onAdd).not.toHaveBeenCalled();
+  const id = "9af8228f-0be7-45ae-a104-6fbe0af6f1d3";
+  await act(async () => { resolveUpload({ id, contentPath: `/api/attachments/${id}/content`, originalFilename: file.name }); });
+  render(<TaskChatThread {...props} issueId="persisted-chat" initialHistoryPending={false} />);
+  await act(async () => { await new Promise(resolve => requestAnimationFrame(resolve)); });
+  const chip = container.querySelector('[data-testid="task-chat-composer-attachments"] [data-slot="attachment"]');
+  expect(chip?.getAttribute("data-state")).toBe("done");
+  const send = container.querySelector<HTMLButtonElement>('[data-testid="task-chat-composer-send"]')!;
+  expect(send.disabled).toBe(false);
+  await act(async () => { send.click(); });
+  expect(onAdd).toHaveBeenCalledTimes(1);
+  expect(onAdd.mock.calls[0]?.[0]).toBe(`[chat-notes.txt](/api/attachments/${id}/content)`);
+  expect(onAdd.mock.calls[0]?.[3]).toEqual([id]);
+});
+
 it("prepares comment-link history and its composer before reveal", async () => {
   const props = {
     issueId: "linked-issue",

ui/src/components/TaskChatThread.tsx

@@ -2924,12 +2924,13 @@ export function TaskChatThread(props: TaskChatThreadProps) {
           (logTranscriptByRun.get(run.id)?.length ?? 0) === 0
         : Boolean(logErrorsByRun?.has(run.id)),
     );
-  const [revealedIssue, setRevealedIssue] = useState<string | null | undefined>(
-    () => (historyPending ? undefined : issueId),
+  const historyKey = conversationMode && draftKey ? draftKey : issueId;
+  const [revealedHistoryKey, setRevealedHistoryKey] = useState<string | null | undefined>(
+    () => (historyPending ? undefined : historyKey),
   );
-  const historyRevealed = revealedIssue === issueId;
-  const [expiredHistoryWait, setExpiredHistoryWait] = useState<{ issueId: typeof issueId } | null>(null);
-  const historyWaitExpired = expiredHistoryWait !== null && expiredHistoryWait.issueId === issueId;
+  const historyRevealed = revealedHistoryKey === historyKey;
+  const [expiredHistoryWait, setExpiredHistoryWait] = useState<{ historyKey: typeof historyKey } | null>(null);
+  const historyWaitExpired = expiredHistoryWait !== null && expiredHistoryWait.historyKey === historyKey;
   const prepareInitialContent = Boolean(scrollNavigation.hash) || !historyPending || historyRevealed || historyWaitExpired;
   // Supporting requests can stall without rejecting. Bound the first reveal
   // independently of their pending states so saved conversation and the
@@ -2937,19 +2938,19 @@ export function TaskChatThread(props: TaskChatThreadProps) {
   useEffect(() => {
     if (historyRevealed) return;
     const timer = window.setTimeout(() => {
-      setExpiredHistoryWait({ issueId });
-      setRevealedIssue(issueId);
+      setExpiredHistoryWait({ historyKey });
+      setRevealedHistoryKey(historyKey);
     }, INITIAL_HISTORY_REVEAL_TIMEOUT_MS);
     return () => window.clearTimeout(timer);
-  }, [historyRevealed, issueId]);
+  }, [historyRevealed, historyKey]);
   // Mount and measure the real thread while concealed, then reveal in one
   // commit. A frame also lets ancestor navigation scroll restoration finish.
   // Readiness is latched per issue: refetches never hide existing conversation.
   useEffect(() => {
     if (historyRevealed || historyPending) return;
-    const frame = requestAnimationFrame(() => setRevealedIssue(issueId));
+    const frame = requestAnimationFrame(() => setRevealedHistoryKey(historyKey));
     return () => cancelAnimationFrame(frame);
-  }, [historyPending, historyRevealed, issueId]);
+  }, [historyPending, historyRevealed, historyKey]);
   useEffect(() => {
     if (!historyRevealed || !issueId) return;
     scheduleIssueDetailPaintMeasure(ISSUE_DETAIL_CONTENT_PAINT_MARK, ISSUE_DETAIL_CONTENT_MEASURE);