canopy-ui 0.11.0 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canopy-ui",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "type": "module",
   "repository": {
     "type": "git",

package/src/chat/MessageItem.tsx

@@ -136,6 +136,17 @@ export function MessageItem({
       {isError && message.role === "assistant" && (
         <ErrorFooter detail={message.error_detail} hasPartial={Boolean(text)} />
       )}
+      {/* Your own line, before canopy has confirmed it. Shown at once so a send
+          never looks like it vanished; flagged plainly if it did not go. */}
+      {message.role === "user" && isPending && (
+        <div className="mt-1 text-[11px] opacity-70" role="status">Sending…</div>
+      )}
+      {message.role === "user" && isError && (
+        <div className="mt-1 flex items-start gap-1 text-[11px] font-medium" role="alert">
+          <AlertTriangle className="mt-0.5 h-3 w-3 shrink-0" aria-hidden="true" />
+          <span>{message.error_detail || "Not sent."}</span>
+        </div>
+      )}
     </div>
   );
 }

package/src/chat/protocol.ts

@@ -251,7 +251,9 @@ export type WsEvent =
   | { event: "chat.stream_cancelled"; data: { message_id: string | null; partial_len: number } }
   | { event: "draft.updated"; data: Draft }
   | { event: "draft.lock_changed"; data: { draft_id: string; holder_user_id: number | null; expires_at: number | null } }
-  | { event: "draft.committed"; data: { draft_id: string; user_message_id: string } }
+  // `client_id` is the sender's receipt for a send that carried one (see
+  // useSessionSocket.sendChat); absent from older servers.
+  | { event: "draft.committed"; data: { draft_id: string; user_message_id: string; client_id?: string } }
   | { event: "draft.discarded"; data: { draft_id: string } }
   // `participant` carries WHO joined, so a client can add them to its
   // participant list. Without it a first-time joiner has an id and no name,

package/src/chat/sessionReducer.events.test.ts

@@ -0,0 +1,17 @@
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+import { REDUCER_EVENTS } from "./sessionReducer";
+
+/** The hook passes the reducer only the frames in REDUCER_EVENTS. A case the
+ *  list lacks is dead code that looks alive, which is how `draft.committed`,
+ *  `presence.*` and `session.turn_status` went unhandled from 2026-09-13 to
+ *  2026-09-23 without a single failing test. */
+describe("REDUCER_EVENTS", () => {
+  it("names exactly the frames the reducer's switch handles", () => {
+    const src = readFileSync(fileURLToPath(new URL("./sessionReducer.ts", import.meta.url)), "utf8");
+    const cases = new Set([...src.matchAll(/case "([a-z_.]+)":/g)].map((m) => m[1]));
+    expect([...cases].sort()).toEqual([...REDUCER_EVENTS].sort());
+  });
+});

package/src/chat/sessionReducer.ts

@@ -27,6 +27,25 @@ const UNBLOCKING_FRAMES = new Set([
   "chat.tool_result",
 ]);
 
+/**
+ * Every frame `sessionReducer` handles. The socket hook hands the reducer ONLY
+ * these, and gives anything else to `onUnknownEvent`, so a frame missing from
+ * here is a frame the reducer never sees. That happened: from #775
+ * (2026-09-13) the hook kept its own hand-written list, which lacked every
+ * `draft.*` and `presence.*` frame and `session.turn_status`. Your own line did
+ * not appear when you sent it (`draft.committed`), and the co-edited draft,
+ * the presence roster and the live turn status all went quiet, with no error.
+ * `sessionReducer.events.test.ts` fails if this and the switch below differ.
+ */
+export const REDUCER_EVENTS: ReadonlySet<string> = new Set([
+  "session.state", "session.activity", "session.stop", "session.menu",
+  "session.turn_status", "session.error", "session.title_updated",
+  "chat.stream_start", "chat.user_message", "chat.delta", "chat.stream_complete",
+  "chat.stream_error", "chat.stream_cancelled", "chat.tool_use", "chat.tool_result",
+  "draft.updated", "draft.lock_changed", "draft.committed", "draft.discarded",
+  "presence.joined", "presence.left",
+]);
+
 export function sessionReducer(prev: SessionState, frame: WsEvent): SessionState {
   if (frame.event === "chat.stream_start" || frame.event === "draft.committed") {
     // A new turn is starting, so the previous turn's stop outcome is history —
@@ -41,8 +60,10 @@ export function sessionReducer(prev: SessionState, frame: WsEvent): SessionState
     prev = { ...prev, activity: "working", menu: undefined };
   }
   switch (frame.event) {
-    case "session.state":
-      return frame.data;
+    case "session.state": {
+      const messages = keepUnechoedSends(prev.messages, frame.data.messages);
+      return messages === frame.data.messages ? frame.data : { ...frame.data, messages };
+    }
 
     case "chat.stream_start": {
       // Upsert: if the assistant message already exists (rare — a runner that
@@ -153,6 +174,8 @@ export function sessionReducer(prev: SessionState, frame: WsEvent): SessionState
                   // is the durable one, so the row sorts where a reload puts it.
                   turn_index: frame.data.turn_index,
                   plaintext: frame.data.plaintext,
+                  // The agent read it, so a pending or unconfirmed row is sent.
+                  ...(m.role === "user" ? { status: "complete" as const, error_detail: null } : {}),
                 }
               : m,
           ),
@@ -333,6 +356,15 @@ export function sessionReducer(prev: SessionState, frame: WsEvent): SessionState
       return prev;
 
     case "draft.committed": {
+      // The sender already shows its line (a pending row stamped with this
+      // client_id, see `withPendingSend`). Confirm it rather than add a second.
+      const cid = frame.data.client_id;
+      if (cid && prev.messages.some((m) => m.content?.client_id === cid)) {
+        return {
+          ...markSendDelivered(prev, cid, frame.data.user_message_id),
+          active_draft: prev.active_draft ? { ...prev.active_draft, body: "" } : prev.active_draft,
+        };
+      }
       // Insert the optimistic USER message from the draft body that's about
       // to be cleared. The assistant reply is NOT inserted here — canopy's
       // draft.committed carries no assistant id; `chat.stream_start` upserts
@@ -446,3 +478,89 @@ export function sessionReducer(prev: SessionState, frame: WsEvent): SessionState
       return prev;
   }
 }
+
+
+// ---------------------------------------------------------------------------
+// A send the SENDER is waiting to hear back about.
+//
+// Your line goes on screen the moment you press send, as "pending", stamped
+// with the send's client_id. It becomes "complete" on the server's receipt
+// (`draft.committed` carrying that id), or when an HTTP resend succeeds, or when
+// the transcript echoes it back. If none of those happen it becomes "error",
+// and the words stay on screen. Before this the composer cleared on send and
+// nothing showed the line until the agent read it, so a send lost on a dead
+// socket simply vanished (2026-09-23).
+// ---------------------------------------------------------------------------
+
+export function withPendingSend(
+  prev: SessionState,
+  { clientId, text }: { clientId: string; text: string },
+): SessionState {
+  const nowIso = new Date().toISOString();
+  const row: Message = {
+    id: `local:${clientId}`,
+    turn_index: prev.messages.reduce((acc, m) => Math.max(acc, m.turn_index), 0) + 1,
+    role: "user",
+    content: { text, client_id: clientId },
+    plaintext: text,
+    status: "pending",
+    error_detail: null,
+    started_at: null,
+    completed_at: null,
+    created_at: nowIso,
+  };
+  return { ...prev, messages: [...prev.messages, row] };
+}
+
+function updateSend(prev: SessionState, clientId: string, patch: Partial<Message>): SessionState {
+  let changed = false;
+  const messages = prev.messages.map((m) => {
+    if (m.content?.client_id !== clientId) return m;
+    changed = true;
+    return { ...m, ...patch };
+  });
+  return changed ? { ...prev, messages } : prev;
+}
+
+export function markSendDelivered(prev: SessionState, clientId: string, messageId?: string): SessionState {
+  return updateSend(prev, clientId, {
+    status: "complete",
+    error_detail: null,
+    completed_at: new Date().toISOString(),
+    ...(messageId ? { id: messageId } : {}),
+  });
+}
+
+export function markSendFailed(prev: SessionState, clientId: string, detail: string): SessionState {
+  // Only a row still waiting can fail: a late failure must not overturn a
+  // receipt or a transcript echo that already proved the send landed.
+  const row = prev.messages.find((m) => m.content?.client_id === clientId);
+  if (!row || row.status !== "pending") return prev;
+  return updateSend(prev, clientId, { status: "error", error_detail: detail });
+}
+
+/** Your own sends the snapshot does not hold yet, carried across it.
+ *
+ *  A snapshot REPLACES the message list, and in a transcript-sourced session
+ *  your line is not a server row until the agent has read it. That can be
+ *  minutes if a turn is still running, since a session runs one turn at a
+ *  time. So every reconnect in that window (a phone resuming, a flaky network)
+ *  took the line off screen, and it came back only when the agent read it. It
+ *  looked lost. A row is kept only while the snapshot lacks it: once the
+ *  transcript echo is in the snapshot (same words among its recent user rows),
+ *  the snapshot's copy wins.
+ */
+function keepUnechoedSends(previous: Message[], snapshot: Message[]): Message[] {
+  const mine = previous.filter(
+    (m) => m.role === "user" && typeof m.content?.client_id === "string" &&
+      !snapshot.some((s) => s.id === m.id),
+  );
+  if (mine.length === 0) return snapshot;
+  const recent = new Set(
+    snapshot.filter((m) => m.role === "user").slice(-12).map((m) => m.plaintext.trim()),
+  );
+  const carried = mine.filter((m) => !recent.has(m.plaintext.trim()));
+  if (carried.length === 0) return snapshot;
+  const top = snapshot.reduce((acc, m) => Math.max(acc, m.turn_index), 0);
+  return [...snapshot, ...carried.map((m, i) => ({ ...m, turn_index: top + 1 + i }))];
+}

package/src/chat/useSessionSocket.http.test.tsx

@@ -78,6 +78,7 @@ describe('sending over HTTP', () => {
 
   it('without it, a user sends over the socket exactly as before', async () => {
     const hook = renderHook(() => useSessionSocket({ sessionId: 's1', wsUrl: () => 'wss://h/x' }))
+    act(() => hook.result.current.updateDraft('hello'))
     await act(async () => hook.result.current.sendChat())
     expect(FakeSocket.sent.some((f) => f.includes('chat.send'))).toBe(true)
   })

package/src/chat/useSessionSocket.receipt.test.tsx

@@ -0,0 +1,161 @@
+// @vitest-environment jsdom
+import { act, renderHook } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useSessionSocket } from './useSessionSocket'
+
+/**
+ * A send must never vanish. A phone resuming from the background can hold a
+ * socket that reads OPEN but delivers nothing, and before this the composer
+ * cleared, no line appeared, and the prompt was simply gone (2026-09-23).
+ */
+
+class FakeSocket {
+  static OPEN = 1
+  static last: FakeSocket | null = null
+  sent: string[] = []
+  onopen: (() => void) | null = null
+  onmessage: ((e: { data: string }) => void) | null = null
+  onclose: (() => void) | null = null
+  onerror: (() => void) | null = null
+  readyState = 1
+  constructor(public url: string) {
+    FakeSocket.last = this
+  }
+  send(data: string) {
+    this.sent.push(data)
+  }
+  close() {}
+  receive(frame: unknown) {
+    this.onmessage?.({ data: JSON.stringify(frame) })
+  }
+}
+
+const DRAFT = { id: 'd1', slot: 'next', status: 'open', body: '', version: 1, last_editor: 0, last_edit_at: '' }
+const SNAPSHOT = {
+  event: 'session.state',
+  data: { messages: [], active_draft: DRAFT, participants: [], presence_user_ids: [], current_user_id: 1 },
+}
+
+beforeEach(() => {
+  vi.useFakeTimers()
+  vi.stubGlobal('WebSocket', FakeSocket)
+})
+afterEach(() => {
+  vi.useRealTimers()
+  vi.unstubAllGlobals()
+})
+
+// Stable, as a real caller's is: a new function every render re-keys `connect`
+// and opens a fresh socket, which would hide what the first one was sent.
+const wsUrl = () => 'wss://h/x'
+
+function user(resendOverHttp?: (text: string, clientId: string) => Promise<unknown>) {
+  const hook = renderHook(() =>
+    useSessionSocket({ sessionId: 's1', wsUrl, resendOverHttp }),
+  )
+  act(() => {
+    FakeSocket.last!.onopen?.()
+    FakeSocket.last!.receive(SNAPSHOT)
+  })
+  return hook
+}
+
+function sentSend() {
+  const frame = FakeSocket.last!.sent.map((f) => JSON.parse(f)).find((f) => f.action === 'chat.send')
+  return frame?.data as { client_id: string; text: string }
+}
+
+describe('a send carries its own text and waits for a receipt', () => {
+  it('shows the line at once as pending, and sends the text with a client_id', () => {
+    const hook = user()
+    act(() => hook.result.current.updateDraft('deploy it'))
+    act(() => hook.result.current.sendChat())
+    const row = hook.result.current.state.messages.at(-1)!
+    expect(row.plaintext).toBe('deploy it')
+    expect(row.status).toBe('pending')
+    expect(sentSend().text).toBe('deploy it')
+    expect(sentSend().client_id).toBeTruthy()
+  })
+
+  it('the receipt confirms the SAME row rather than adding a second', () => {
+    const hook = user()
+    act(() => hook.result.current.updateDraft('deploy it'))
+    act(() => hook.result.current.sendChat())
+    act(() => FakeSocket.last!.receive({
+      event: 'draft.committed',
+      data: { draft_id: 'd1', user_message_id: 'transient:abc', client_id: sentSend().client_id },
+    }))
+    const users = hook.result.current.state.messages.filter((m) => m.role === 'user')
+    expect(users).toHaveLength(1)
+    expect(users[0].status).toBe('complete')
+  })
+
+  it('no receipt: resent over HTTP under the SAME client_id, so it is one turn', async () => {
+    const resend = vi.fn().mockResolvedValue({})
+    const hook = user(resend)
+    act(() => hook.result.current.updateDraft('deploy it'))
+    act(() => hook.result.current.sendChat())
+    await act(async () => {
+      vi.advanceTimersByTime(5_000)
+      await Promise.resolve()
+    })
+    expect(resend).toHaveBeenCalledWith('deploy it', sentSend().client_id)
+    expect(hook.result.current.state.messages.at(-1)?.status).toBe('complete')
+  })
+
+  it('a socket that closes before the receipt resends at once', async () => {
+    const resend = vi.fn().mockResolvedValue({})
+    const hook = user(resend)
+    act(() => hook.result.current.updateDraft('deploy it'))
+    act(() => hook.result.current.sendChat())
+    await act(async () => {
+      FakeSocket.last!.onclose?.()
+      await Promise.resolve()
+    })
+    expect(resend).toHaveBeenCalledTimes(1)
+  })
+
+  it('if the resend fails too, the words stay on screen marked not sent', async () => {
+    const hook = user(vi.fn().mockRejectedValue(new Error('offline')))
+    act(() => hook.result.current.updateDraft('keep me'))
+    act(() => hook.result.current.sendChat())
+    await act(async () => {
+      vi.advanceTimersByTime(5_000)
+      await Promise.resolve()
+      await Promise.resolve()
+    })
+    const row = hook.result.current.state.messages.at(-1)!
+    expect(row.plaintext).toBe('keep me')
+    expect(row.status).toBe('error')
+    expect(row.error_detail).toMatch(/Not sent/)
+  })
+
+  it('a reconnect snapshot that does not hold the line yet keeps it on screen', () => {
+    const hook = user()
+    act(() => hook.result.current.updateDraft('queued behind a running turn'))
+    act(() => hook.result.current.sendChat())
+    act(() => FakeSocket.last!.receive({
+      event: 'draft.committed',
+      data: { draft_id: 'd1', user_message_id: 'transient:abc', client_id: sentSend().client_id },
+    }))
+    // Reconnect: the snapshot has no row for it yet (the agent has not read it).
+    act(() => FakeSocket.last!.receive(SNAPSHOT))
+    expect(hook.result.current.state.messages.map((m) => m.plaintext)).toEqual([
+      'queued behind a running turn',
+    ])
+    // And once the transcript has it, the snapshot's copy wins: one row.
+    act(() => FakeSocket.last!.receive({
+      ...SNAPSHOT,
+      data: {
+        ...SNAPSHOT.data,
+        messages: [{
+          id: 'm9', turn_index: 90001, role: 'user', content: {}, plaintext: 'queued behind a running turn',
+          status: 'complete', error_detail: null, started_at: null, completed_at: null, created_at: '',
+        }],
+      },
+    }))
+    expect(hook.result.current.state.messages).toHaveLength(1)
+    expect(hook.result.current.state.messages[0].id).toBe('m9')
+  })
+})

package/src/chat/useSessionSocket.ts

@@ -4,11 +4,29 @@ import { fromAgui, resetAguiState } from "./agui";
 import type { Draft, Message, SessionState, WsEvent } from "./protocol";
 import { shouldSyncDraftLive } from "./drafts";
 import { prependHistory } from "./history";
-import { sessionReducer } from "./sessionReducer";
+import {
+  REDUCER_EVENTS,
+  markSendDelivered,
+  markSendFailed,
+  sessionReducer,
+  withPendingSend,
+} from "./sessionReducer";
 
 const HEARTBEAT_INTERVAL_MS = 20_000;
 const RECONNECT_DELAYS_MS = [1_000, 2_000, 5_000, 10_000];
 const DRAFT_UPDATE_DEBOUNCE_MS = 150;
+/** How long a socket send may go without the server's receipt before the page
+ *  resends it over HTTP. Short on purpose: the receipt normally arrives within
+ *  a round trip, and a missing one means the socket is dead (a phone resuming
+ *  from the background can hold one that still reads OPEN). */
+const SEND_RECEIPT_TIMEOUT_MS = 4_000;
+const NOT_SENT =
+  "Not sent: the connection dropped before canopy got it. Your words are kept here, so copy them and send again.";
+
+function newClientId(): string {
+  const c = (globalThis as { crypto?: { randomUUID?: () => string } }).crypto;
+  return c?.randomUUID ? c.randomUUID() : `c${Date.now().toString(36)}${Math.random().toString(36).slice(2)}`;
+}
 
 const INITIAL_STATE: SessionState = {
   messages: [],
@@ -68,6 +86,14 @@ export interface UseSessionSocketOptions {
    * without a second send path in every host. Omit for a user (the default).
    */
   sendOverHttp?: (text: string) => Promise<unknown>;
+  /**
+   * The HTTP route for a USER's send, used only when a socket send gets no
+   * receipt (see `SEND_RECEIPT_TIMEOUT_MS`). Must pass `clientId` through as the
+   * send's `client_id`: the server derives the turn's idempotency key from it,
+   * so a socket frame that did arrive late and this resend make ONE turn.
+   * Without it a send on a dead socket is marked "not sent" instead.
+   */
+  resendOverHttp?: (text: string, clientId: string) => Promise<unknown>;
 }
 
 /**
@@ -123,20 +149,10 @@ export interface UseSessionSocketResult {
   lastError: string | null;
 }
 
-/**
- * Frames `sessionReducer` understands. Anything else is handed to
- * `onUnknownEvent` rather than dropped — the reducer ignores what it does not
- * recognise, which silently swallows an app-specific frame and leaves the
- * container wondering why its feature never fires.
- *
- * Keep in step with sessionReducer's own switch.
- */
-const KNOWN_EVENTS = new Set([
-  "chat.delta", "chat.stream_cancelled", "chat.stream_complete",
-  "chat.stream_error", "chat.stream_start", "chat.tool_result",
-  "chat.tool_use", "chat.user_message", "session.activity", "session.error",
-  "session.menu", "session.state", "session.stop", "session.title_updated",
-]);
+// Frames the reducer handles: its own list, so the two cannot drift (see
+// `REDUCER_EVENTS`). Anything else goes to `onUnknownEvent` rather than being
+// dropped.
+const KNOWN_EVENTS = REDUCER_EVENTS;
 
 export function useSessionSocket({
   sessionId,
@@ -145,6 +161,7 @@ export function useSessionSocket({
   onUnknownEvent,
   protocol = "canopy",
   sendOverHttp,
+  resendOverHttp,
 }: UseSessionSocketOptions): UseSessionSocketResult {
   // The local draft a read-only principal types into (see `sendOverHttp`).
   const [localDraft, setLocalDraft] = useState<Draft | null>(null);
@@ -176,6 +193,10 @@ export function useSessionSocket({
   // Control frames that must not be lost across a reconnect (currently
   // only chat.stop). The WS-world analogue of an abortable chat transport.
   const pendingFramesRef = useRef<{ action: string; data: unknown }[]>([]);
+  // Sends awaiting the server's receipt: client_id -> {text, timer}.
+  const unconfirmedRef = useRef(new Map<string, { text: string; timer: number | null }>());
+  const resendRef = useRef(resendOverHttp);
+  resendRef.current = resendOverHttp;
 
   useEffect(() => {
     stateRef.current = state;
@@ -193,7 +214,7 @@ export function useSessionSocket({
     const ws = socketRef.current;
     if (ws && ws.readyState === WebSocket.OPEN) {
       ws.send(JSON.stringify(frame));
-      return;
+      return true;
     }
     // Queue chat.stop so a stop clicked while the socket is reconnecting
     // is delivered on next OPEN instead of silently dropped. Draft updates
@@ -202,6 +223,29 @@ export function useSessionSocket({
     if (frame.action === "chat.stop") {
       pendingFramesRef.current.push(frame);
     }
+    return false;
+  }, []);
+
+  // A send that got no receipt: resend it over HTTP under the same client_id,
+  // or, with no HTTP route, say plainly that it did not go. Never silent.
+  const rescueSend = useCallback((clientId: string) => {
+    const entry = unconfirmedRef.current.get(clientId);
+    if (!entry) return; // the receipt got here first
+    if (entry.timer != null) window.clearTimeout(entry.timer);
+    unconfirmedRef.current.delete(clientId);
+    const resend = resendRef.current;
+    if (!resend) {
+      setAwaitingReply(false);
+      setState((prev) => markSendFailed(prev, clientId, NOT_SENT));
+      return;
+    }
+    resend(entry.text, clientId).then(
+      () => setState((prev) => markSendDelivered(prev, clientId)),
+      () => {
+        setAwaitingReply(false);
+        setState((prev) => markSendFailed(prev, clientId, NOT_SENT));
+      },
+    );
   }, []);
 
   const applyEvent = useCallback((frame: WsEvent) => {
@@ -216,6 +260,12 @@ export function useSessionSocket({
     ) {
       setAwaitingReply(false);
     }
+    // The server's receipt for one of OUR sends: stop waiting on it.
+    if (frame.event === "draft.committed" && frame.data.client_id) {
+      const entry = unconfirmedRef.current.get(frame.data.client_id);
+      if (entry?.timer != null) window.clearTimeout(entry.timer);
+      unconfirmedRef.current.delete(frame.data.client_id);
+    }
     // Side-effect events: handle BEFORE setState so React strict-mode's
     // double-invocation of the updater doesn't double-fire the effect.
     if (frame.event === "session.title_updated") {
@@ -311,6 +361,8 @@ export function useSessionSocket({
 
     ws.onclose = () => {
       setConnected(false);
+      // A send still waiting for its receipt will not get one on this socket.
+      for (const clientId of [...unconfirmedRef.current.keys()]) rescueSend(clientId);
       if (heartbeatTimerRef.current != null) {
         window.clearInterval(heartbeatTimerRef.current);
         heartbeatTimerRef.current = null;
@@ -326,7 +378,7 @@ export function useSessionSocket({
     ws.onerror = () => {
       // onclose will fire next; nothing to do here.
     };
-  }, [applyEvent, send, sessionId, wsUrl]);
+  }, [applyEvent, rescueSend, send, sessionId, wsUrl]);
 
   useEffect(() => {
     closedByUserRef.current = false;
@@ -345,29 +397,32 @@ export function useSessionSocket({
   }, [connect]);
 
   const sendChat = useCallback(() => {
-    // Flush the local body BEFORE committing. `chat.send` commits the SERVER's
-    // draft, so this is the moment the body has to exist there — and when
-    // live sync is off (single-player) it is the ONLY time it is sent.
-    //
-    // Unconditional on purpose: keying this off a pending debounce timer meant
-    // nothing was flushed when there was no timer, which is now the normal case.
+    // The text goes IN the send, with a client_id, rather than relying on an
+    // earlier draft.update having reached the server. That frame and this one
+    // could both vanish into a socket that reads OPEN but is dead (a phone
+    // resuming from the background), and the composer had already cleared, so
+    // the prompt was simply lost (2026-09-23). Now the line shows at once as
+    // pending, the server's receipt (draft.committed + client_id) confirms it,
+    // and without one it is resent over HTTP under the same id.
     if (draftDebounceRef.current != null) {
       window.clearTimeout(draftDebounceRef.current);
       draftDebounceRef.current = null;
     }
-    if (pendingDraftBodyRef.current != null && stateRef.current.active_draft) {
-      send({
-        action: "draft.update",
-        data: {
-          version: stateRef.current.active_draft.version,
-          body: pendingDraftBodyRef.current,
-        },
-      });
-    }
+    const body = (pendingDraftBodyRef.current ?? stateRef.current.active_draft?.body ?? "").trim();
     pendingDraftBodyRef.current = null;
+    if (!body) return;
+    const clientId = newClientId();
     setAwaitingReply(true);
-    send({ action: "chat.send", data: {} });
-  }, [send]);
+    setState((prev) => withPendingSend(prev, { clientId, text: body }));
+    unconfirmedRef.current.set(clientId, { text: body, timer: null });
+    const sent = send({ action: "chat.send", data: { client_id: clientId, text: body } });
+    if (!sent) {
+      rescueSend(clientId);
+      return;
+    }
+    const entry = unconfirmedRef.current.get(clientId);
+    if (entry) entry.timer = window.setTimeout(() => rescueSend(clientId), SEND_RECEIPT_TIMEOUT_MS);
+  }, [send, rescueSend]);
 
   const stopChat = useCallback(
     (messageId: string | null) => {

package/src/ui/dropdown-menu.test.tsx

@@ -0,0 +1,26 @@
+// @vitest-environment jsdom
+import { render } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu"
+
+/** The z-index belongs on the POSITIONER. Base UI's positioner is the placed
+ *  element and forms its own stacking context, so a z-index on the popup alone
+ *  let the chat's sticky `z-10` bar paint over the menu and swallow the taps
+ *  meant for its items (2026-09-23). jsdom cannot compute stacking, so this
+ *  pins the class that makes it right. */
+describe("DropdownMenuContent", () => {
+  it("raises the positioner itself, not only the popup inside it", () => {
+    render(
+      <DropdownMenu open>
+        <DropdownMenuTrigger>open</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Share to Slack…</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    )
+    const popup = document.querySelector('[data-slot="dropdown-menu-content"]')!
+    expect(popup).toBeTruthy()
+    expect(popup.parentElement!.className).toContain("z-50")
+  })
+})

package/src/ui/dropdown-menu.tsx

@@ -21,14 +21,26 @@ function DropdownMenuTrigger({
   )
 }
 
+// The z-index goes on the POSITIONER, not only the popup. Base UI's positioner
+// is the element that is actually placed, and it forms its own stacking
+// context, so a `z-50` on the popup inside it is ranked only against the
+// positioner's own children. The menu then painted UNDER any positioned
+// z-index on the page (the chat's sticky `z-10` tool-call bar) and those items
+// could not be tapped (2026-09-23, the chat session menu on a phone).
+const POSITIONER_Z = "z-50"
+
 function DropdownMenuContent({
   className,
   sideOffset = 4,
+  align,
   ...props
-}: React.ComponentProps<typeof Menu.Popup> & { sideOffset?: number; align?: string }) {
+}: React.ComponentProps<typeof Menu.Popup> & {
+  sideOffset?: number
+  align?: "start" | "center" | "end"
+}) {
   return (
     <Menu.Portal>
-      <Menu.Positioner sideOffset={sideOffset}>
+      <Menu.Positioner className={POSITIONER_Z} sideOffset={sideOffset} align={align}>
         <Menu.Popup
           data-slot="dropdown-menu-content"
           className={cn(
@@ -191,7 +203,7 @@ function DropdownMenuSubContent({
 }: React.ComponentProps<typeof Menu.Popup>) {
   return (
     <Menu.Portal>
-      <Menu.Positioner>
+      <Menu.Positioner className={POSITIONER_Z}>
         <Menu.Popup
           data-slot="dropdown-menu-sub-content"
           className={cn(

package/src/ui/tooltip.tsx

@@ -37,7 +37,7 @@ function Tooltip({ label, children, delay = 300, side = "top", sideOffset = 6 }:
     <TooltipPrimitive.Root>
       <TooltipPrimitive.Trigger delay={delay} render={children} />
       <TooltipPrimitive.Portal>
-        <TooltipPrimitive.Positioner side={side} sideOffset={sideOffset}>
+        <TooltipPrimitive.Positioner className="z-50" side={side} sideOffset={sideOffset}>
           <TooltipPrimitive.Popup
             className={cn(
               "z-50 max-w-xs rounded-md border border-border bg-popover px-2 py-1 text-xs text-popover-foreground shadow-md",