canopy-ui 0.12.2 → 0.13.0

package/src/chat/sessionReducer.ts

@@ -1,4 +1,5 @@
-import type { Draft, Message, SessionState, WsEvent } from "./protocol";
+import type { Draft, Message, MessageAuthor, SessionState, WsEvent } from "./protocol";
+import { isUnconfirmed, sameAuthor } from "./identity";
 
 // Pure reducer for SessionState — extracted from useSessionSocket so it
 // can be unit-tested without WebSocket plumbing. Side-effect events
@@ -39,10 +40,10 @@ const UNBLOCKING_FRAMES = new Set([
  */
 export const REDUCER_EVENTS: ReadonlySet<string> = new Set([
   "session.state", "session.activity", "session.stop", "session.menu",
-  "session.turn_status", "session.error", "session.title_updated",
+  "session.turn_status", "session.error", "session.title_updated", "session.queued",
   "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",
+  "draft.updated", "draft.typing", "draft.committed", "draft.discarded",
   "presence.joined", "presence.left",
 ]);
 
@@ -151,11 +152,31 @@ export function sessionReducer(prev: SessionState, frame: WsEvent): SessionState
       // Deliberately narrow: same role, same text, and only against the tail, so
       // a genuine repeat of a short message ("yes") sent much later still lands
       // as its own row.
+      //
+      // And only against a row that can still be THIS line (final review I5):
+      // two people answering "yes" are two lines, so the fallback never lets a
+      // different author's frame adopt a row. A row is a candidate while it is
+      // unconfirmed (an optimistic or receipted send still waiting for the line
+      // the agent read) or when it already names the same person — the ledger
+      // path's authored row meeting its transcript echo. An unauthored optimistic
+      // row is the viewer's own, so it is compared as the viewer.
       const RECENT_USER_ROWS = 6;
-      const sameText = (m: Message) =>
-        m.role === "user" &&
-        m.plaintext.trim() !== "" &&
-        m.plaintext.trim() === frame.data.plaintext.trim();
+      const incomingAuthor = frame.data.author ?? null;
+      const me: MessageAuthor | null =
+        prev.current_user_id != null
+          ? { name: "", user_id: prev.current_user_id }
+          : prev.current_contact_id != null
+            ? { name: "", contact_id: prev.current_contact_id }
+            : null;
+      const sameText = (m: Message) => {
+        if (
+          m.role !== "user" ||
+          m.plaintext.trim() === "" ||
+          m.plaintext.trim() !== frame.data.plaintext.trim()
+        ) return false;
+        if (isUnconfirmed(m)) return sameAuthor(m.author ?? me, incomingAuthor);
+        return m.author != null && incomingAuthor != null && sameAuthor(m.author, incomingAuthor);
+      };
       const recentUsers = prev.messages.filter((m) => m.role === "user").slice(-RECENT_USER_ROWS);
       const existing =
         prev.messages.find(
@@ -174,6 +195,12 @@ 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,
+                  // A transcript-sourced session's durable row carries no user
+                  // beyond the runner's own login, so this frame is the only
+                  // chance to say who actually typed it — keep it if we already
+                  // had it (an optimistic send knows its own author) and the
+                  // frame is silent, but let the frame win otherwise.
+                  author: frame.data.author ?? m.author ?? null,
                   // The agent read it, so a pending or unconfirmed row is sent.
                   ...(m.role === "user" ? { status: "complete" as const, error_detail: null } : {}),
                 }
@@ -186,13 +213,19 @@ export function sessionReducer(prev: SessionState, frame: WsEvent): SessionState
         id: frame.data.message_id,
         turn_index: frame.data.turn_index,
         role: "user",
-        content: { text: frame.data.plaintext },
+        // `client_id` (when the caller has one — an HTTP send) lets
+        // `QueuedRows.hideClientIds` recognise the server's queued-turn
+        // projection as THIS row rather than a duplicate.
+        content: frame.data.client_id
+          ? { text: frame.data.plaintext, client_id: frame.data.client_id }
+          : { text: frame.data.plaintext },
         plaintext: frame.data.plaintext,
         status: "complete",
         error_detail: null,
         started_at: null,
         completed_at: null,
         created_at: nowIso,
+        author: frame.data.author ?? null,
       };
       return { ...prev, messages: [...prev.messages, user] };
     }
@@ -326,9 +359,13 @@ export function sessionReducer(prev: SessionState, frame: WsEvent): SessionState
       // If we're the current editor, keep our local body — the server
       // echo is stale relative to keystrokes that happened since the
       // debounced send. Only accept metadata (version, last_editor, etc).
+      // This frame now only ever carries MY OWN draft (everyone else's live
+      // typing arrives as `draft.typing` instead), so `author_id` — the
+      // draft's actual owner — is the reliable field to compare; fall back to
+      // `last_editor` for a server that doesn't send it yet.
       if (
         prev.active_draft &&
-        incoming.last_editor === prev.current_user_id
+        (incoming.author_id ?? incoming.last_editor) === prev.current_user_id
       ) {
         return {
           ...prev,
@@ -343,17 +380,17 @@ export function sessionReducer(prev: SessionState, frame: WsEvent): SessionState
       return { ...prev, active_draft: incoming };
     }
 
-    case "draft.lock_changed":
-      if (prev.active_draft && prev.active_draft.id === frame.data.draft_id) {
-        return {
-          ...prev,
-          active_draft: {
-            ...prev.active_draft,
-            last_editor: frame.data.holder_user_id ?? prev.active_draft.last_editor,
-          },
-        };
-      }
-      return prev;
+    case "draft.typing": {
+      // Someone else's box, live. Keyed by author; an empty body means they
+      // sent, discarded or cleared it.
+      const rest = (prev.peer_drafts ?? []).filter((d) => d.author.id !== frame.data.author.id);
+      return { ...prev, peer_drafts: frame.data.body ? [...rest, frame.data] : rest };
+    }
+
+    case "session.queued":
+      // Wholesale, like session.turn_status: a client that just connected has
+      // no correct prior to merge a delta into.
+      return { ...prev, queued: frame.data.queued };
 
     case "draft.committed": {
       // The sender already shows its line (a pending row stamped with this
@@ -439,6 +476,10 @@ export function sessionReducer(prev: SessionState, frame: WsEvent): SessionState
         presence_user_ids: prev.presence_user_ids.filter(
           (id) => id !== frame.data.user_id,
         ),
+        // A closed tab is the retirement path for its typing row too — without
+        // this a peer who left mid-keystroke leaves a stale "is typing" behind
+        // with nothing left to clear it.
+        peer_drafts: (prev.peer_drafts ?? []).filter((d) => d.author.id !== frame.data.user_id),
       };
 
     case "session.error": {

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

@@ -44,7 +44,7 @@ describe('sending over HTTP', () => {
     act(() => hook.result.current.updateDraft('hello ace'))
     expect(hook.result.current.state.active_draft?.body).toBe('hello ace')
     await act(async () => hook.result.current.sendChat())
-    expect(sendOverHttp).toHaveBeenCalledWith('hello ace')
+    expect(sendOverHttp).toHaveBeenCalledWith('hello ace', expect.any(String))
     expect(FakeSocket.sent.filter((f) => f.includes('chat.send') || f.includes('draft.update'))).toEqual([])
   })
 
@@ -57,6 +57,23 @@ describe('sending over HTTP', () => {
     expect(hook.result.current.state.active_draft).toBeNull()
   })
 
+  it('stamps the SAME client_id on the optimistic row and the HTTP body', async () => {
+    // The server's queued-turn projection carries back whatever client_id the
+    // POST sent (apps/canopy_sessions/services.py::queued_messages parses it
+    // off the turn's idempotency_key). Without a matching id on this row's
+    // `content`, `QueuedRows.hideClientIds` cannot recognise the two as one
+    // send, and a contact's (or the widget's) own send rendered twice — once
+    // as their bubble, once as an unowned "queued" placeholder, since neither
+    // path gives a contact an `author.user_id` to compare against.
+    const { hook, sendOverHttp } = contact()
+    act(() => hook.result.current.updateDraft('please help'))
+    await act(async () => hook.result.current.sendChat())
+    const sentClientId = sendOverHttp.mock.calls[0][1] as string
+    expect(typeof sentClientId).toBe('string')
+    expect(sentClientId.length).toBeGreaterThan(0)
+    expect(hook.result.current.state.messages.at(-1)?.content?.client_id).toBe(sentClientId)
+  })
+
   it('a failed send puts the words back and says why', async () => {
     const { hook } = contact(vi.fn().mockRejectedValue(new Error('canopy said 429')))
     act(() => hook.result.current.updateDraft('keep me'))
@@ -69,6 +86,38 @@ describe('sending over HTTP', () => {
     expect(hook.result.current.awaitingReply).toBe(false)
   })
 
+  it('does not clobber newer typing with a stale failed send', async () => {
+    // 2026-09-26 review: contact sends "hello" (draft clears to null), starts
+    // typing "world" while the POST is still in flight, "hello"'s request
+    // fails — the restore must not overwrite "world" with "hello". The old
+    // `updateLocalDraft(body)` closed over "hello" at send time and always
+    // won; the fix (`restoreFailedLocalDraft`) only restores when nothing
+    // newer has been typed since (the draft is still null/empty).
+    let rejectSend!: (err: Error) => void
+    const pending: Promise<unknown> = new Promise((_resolve, reject) => {
+      rejectSend = reject
+    })
+    const sendOverHttp = vi.fn().mockReturnValue(pending)
+    const { hook } = contact(sendOverHttp)
+
+    act(() => hook.result.current.updateDraft('hello'))
+    act(() => {
+      hook.result.current.sendChat()
+    })
+    expect(hook.result.current.state.active_draft).toBeNull()
+
+    // Typed BEFORE the request resolves — this must win.
+    act(() => hook.result.current.updateDraft('world'))
+    expect(hook.result.current.state.active_draft?.body).toBe('world')
+
+    await act(async () => {
+      rejectSend(new Error('network blip'))
+      await pending.catch(() => undefined)
+    })
+
+    expect(hook.result.current.state.active_draft?.body).toBe('world')
+  })
+
   it('an empty draft sends nothing', async () => {
     const { hook, sendOverHttp } = contact()
     act(() => hook.result.current.updateDraft('   '))

package/src/chat/useSessionSocket.ts

@@ -23,17 +23,37 @@ 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)}`;
+/**
+ * A client-generated nonce for a send's `client_id` — exported so a host
+ * driving its own HTTP send (the widget's opening message, before a socket
+ * exists to send over; `ChatPage`'s `/share` command) can mint the SAME id
+ * for both the REST body and the matching `noteLocalSend` call, which is what
+ * lets `QueuedRows.hideClientIds` recognise the two as one send rather than
+ * rendering it twice.
+ */
+export function newClientId(): string {
+  // An idempotency nonce, not a secret — but it rides a request, so it comes
+  // from the platform CSPRNG, never Math.random (CodeQL js/insecure-randomness).
+  // randomUUID needs a secure context; getRandomValues does not.
+  const c = (globalThis as {
+    crypto?: { randomUUID?: () => string; getRandomValues?: (a: Uint8Array) => Uint8Array };
+  }).crypto;
+  if (c?.randomUUID) return c.randomUUID();
+  if (c?.getRandomValues) {
+    const bytes = c.getRandomValues(new Uint8Array(16));
+    return `c${Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("")}`;
+  }
+  return `c${Date.now().toString(36)}${(clientIdCounter++).toString(36)}`;
 }
 
+let clientIdCounter = 0;
+
 const INITIAL_STATE: SessionState = {
   messages: [],
   active_draft: null,
   participants: [],
   presence_user_ids: [],
-  current_user_id: 0,
+  current_user_id: null,
 };
 
 export interface UseSessionSocketOptions {
@@ -84,8 +104,15 @@ export interface UseSessionSocketOptions {
    * Everything else is unchanged — the same `state`, the same pending row, the
    * same "waiting for a reply" — so one chat UI serves a user and a contact
    * without a second send path in every host. Omit for a user (the default).
+   *
+   * Must pass `clientId` through as the send's `client_id` (both `/api/canopy-
+   * sessions/{id}/send` and `/api/contact/sessions/{id}/send` accept it) — it
+   * is the SAME id `sendChatOverHttp` stamps on the optimistic row, and without
+   * it the server's queued-turn projection has no way to recognise that row as
+   * the one it already showed, so the sender's own send rendered a second time
+   * as an unowned "queued" placeholder.
    */
-  sendOverHttp?: (text: string) => Promise<unknown>;
+  sendOverHttp?: (text: string, clientId: 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
@@ -128,6 +155,10 @@ export interface UseSessionSocketResult {
   sendChat: () => void;
   stopChat: (messageId: string | null) => void;
   updateDraft: (body: string) => void;
+  /** @deprecated ignored since 0.13 — everyone has their own draft now, so
+   *  there is no lock left to take over. Kept as a no-op so a host still
+   *  passing it through (e.g. ace-web's `onTakeOver={socket.takeOverDraft}`)
+   *  keeps compiling across the upgrade. */
   takeOverDraft: () => void;
   discardDraft: () => void;
   prependMessages: (older: Message[]) => void;
@@ -144,8 +175,15 @@ export interface UseSessionSocketResult {
    *  by `sendChat` alone, and the user's own line is not a server row until
    *  the agent's transcript ships it back. So you typed, pressed send, and got
    *  an empty panel — for as long as the reply took, and forever if its runner
-   *  was offline. */
-  noteLocalSend: (text: string) => void;
+   *  was offline.
+   *
+   *  Pass the SAME `clientId` the matching REST body sent (`sendChatOverHttp`
+   *  does this internally; a host driving its own HTTP send — the widget's
+   *  first message, `ChatPage`'s `/share` command — must generate one and pass
+   *  it to both), so the optimistic row's `content.client_id` matches the
+   *  server's queued-turn projection and `QueuedRows.hideClientIds` can tell
+   *  they're the same send rather than rendering it twice. */
+  noteLocalSend: (text: string, clientId?: string) => void;
   lastError: string | null;
 }
 
@@ -477,9 +515,10 @@ export function useSessionSocket({
     [send],
   );
 
-  const takeOverDraft = useCallback(() => {
-    send({ action: "draft.take_over", data: {} });
-  }, [send]);
+  // @deprecated no-op since 0.13 — the server accepts and ignores
+  // `draft.take_over` too (see WsAction), so this is kept only so a host
+  // wired to the old prop doesn't need an upgrade-day edit.
+  const takeOverDraft = useCallback(() => undefined, []);
 
   const discardDraft = useCallback(() => {
     send({ action: "draft.discard", data: {} });
@@ -521,7 +560,29 @@ export function useSessionSocket({
     });
   }, []);
 
-  const noteLocalSend = useCallback((text: string) => {
+  // A failed send's restore, NOT the same as `updateLocalDraft`: this is a
+  // stale write racing whatever the person typed while the request was in
+  // flight, so it must never overwrite it. A functional update reads the
+  // CURRENT draft rather than one closed over at send time — sendChatOverHttp
+  // cleared the draft to null before the request even went out, so "the local
+  // draft is still null or empty" means nothing newer has been typed since,
+  // and only then is it safe to put the failed body back. If the person has
+  // already started something else, that stays exactly as they left it; the
+  // failed send is simply lost rather than clobbering live typing (2026-09-26
+  // review: "contact sends hello, starts typing world, hello's failure
+  // overwrote world").
+  const restoreFailedLocalDraft = useCallback((body: string) => {
+    setLocalDraft((prev) =>
+      prev == null || prev.body === ""
+        ? {
+            id: "local", slot: "next", status: "open", body, version: 0,
+            last_editor: 0, last_edit_at: new Date().toISOString(),
+          }
+        : prev,
+    );
+  }, []);
+
+  const noteLocalSend = useCallback((text: string, clientId?: string) => {
     setAwaitingReply(true);
     const body = text.trim();
     if (!body) return;
@@ -539,6 +600,7 @@ export function useSessionSocket({
           message_id: `local:${Date.now()}`,
           turn_index: prev.messages.reduce((acc, m) => Math.max(acc, m.turn_index), 0) + 1,
           plaintext: body,
+          client_id: clientId,
         },
       }),
     );
@@ -547,15 +609,24 @@ export function useSessionSocket({
   const sendChatOverHttp = useCallback(() => {
     const body = (localDraft?.body ?? "").trim();
     if (!body || !sendOverHttp) return;
-    noteLocalSend(body);
+    // ONE id for both halves of this send — the optimistic row and the REST
+    // body — so the server's queued-turn projection and this row compare
+    // equal (`QueuedRows.hideClientIds`) instead of rendering the same send
+    // twice, once as the sender's own bubble and once as an unowned "queued"
+    // placeholder (a contact's `author.user_id` is never set, so without a
+    // shared id that placeholder didn't even read as "mine").
+    const clientId = newClientId();
+    noteLocalSend(body, clientId);
     setLocalDraft(null);
-    sendOverHttp(body).catch((err: unknown) => {
+    sendOverHttp(body, clientId).catch((err: unknown) => {
       setAwaitingReply(false);
       setLastError(err instanceof Error ? err.message : "the message could not be sent");
-      // Put the words back, so a failed send never costs what was typed.
-      updateLocalDraft(body);
+      // Put the words back, so a failed send never costs what was typed —
+      // but only if nothing NEWER has been typed since (see
+      // `restoreFailedLocalDraft`).
+      restoreFailedLocalDraft(body);
     });
-  }, [localDraft, sendOverHttp, noteLocalSend, updateLocalDraft]);
+  }, [localDraft, sendOverHttp, noteLocalSend, restoreFailedLocalDraft]);
 
   const exposedState = useMemo(
     () => (sendOverHttp ? { ...state, active_draft: localDraft } : state),