canopy-ui 0.12.1 → 0.13.0

package/package.json

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

package/src/chat/ChatPanel.multiplayer.test.tsx

@@ -0,0 +1,202 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { ChatPanel } from "./ChatPanel";
+import type { SessionState } from "./protocol";
+
+afterEach(cleanup);
+
+function state(over: Partial<SessionState> = {}): SessionState {
+  return {
+    messages: [], active_draft: null, participants: [
+      { user_id: 1, email: "a@x", display_name: "Alice A", role: "owner", joined_at: null, last_seen_at: null },
+      { user_id: 2, email: "b@x", display_name: "Bo B", role: "editor", joined_at: null, last_seen_at: null },
+    ], presence_user_ids: [1, 2], current_user_id: 1, ...over,
+  } as SessionState;
+}
+
+const noop = () => undefined;
+const props = {
+  connected: true,
+  currentUserId: 1,
+  onSend: noop,
+  onStop: noop,
+  onUpdateDraft: noop,
+  onDiscard: noop,
+} as const;
+
+// Plain DOM assertions on purpose — this repo does not register
+// @testing-library/jest-dom, so toHaveTextContent and friends are not
+// available here.
+describe("multiplayer composer", () => {
+  it("shows a teammate's live text and never locks my box", () => {
+    render(<ChatPanel {...props} state={state({ peer_drafts: [{ author: { id: 2, name: "Bo B" }, body: "thinking out loud", at: null }] })} />);
+    const row = screen.getByTestId("typing-row");
+    expect(row.textContent).toContain("Bo B");
+    expect(row.textContent).toContain("thinking out loud");
+    expect((screen.getByTestId("composer") as HTMLTextAreaElement).disabled).toBe(false);
+    expect(screen.queryByTestId("coedit-banner")).toBeNull();
+  });
+
+  it("send stays available while the agent is replying", () => {
+    const streaming = { id: "a1", turn_index: 2, role: "assistant" as const, content: {}, plaintext: "working", status: "streaming" as const, error_detail: null, started_at: null, completed_at: null, created_at: "" };
+    render(<ChatPanel {...props} state={state({ messages: [streaming] })} />);
+    expect(screen.getByRole("button", { name: /stop/i })).not.toBeNull();
+    expect(screen.getByTestId("send")).not.toBeNull();
+  });
+
+  it("renders a teammate's queued send with their name", () => {
+    render(<ChatPanel {...props} state={state({ queued: [{ turn_id: "t", client_id: "c", author: { name: "Bo B", user_id: 2 }, text: "next up", sent_at: "", state: "queued" }] })} />);
+    const row = screen.getByTestId("queued-row");
+    expect(row.textContent).toContain("Bo B");
+    expect(row.textContent).toContain("queued");
+  });
+
+  it("shows exactly one row for the sender's own HTTP/contact send", () => {
+    // `noteLocalSend`'s optimistic row and the server's queued-turn
+    // projection describe the SAME send once both carry the same client_id —
+    // an HTTP send (a contact's, or the widget's first message) has no
+    // `author.user_id` to compare against `currentUserId`, so client_id
+    // matching (`hideClientIds`) is the only thing that can tell them apart
+    // from two different people.
+    const mine = {
+      id: "local:1", turn_index: 1, role: "user" as const,
+      content: { text: "please help", client_id: "abc" }, plaintext: "please help",
+      status: "complete" as const, error_detail: null, started_at: null,
+      completed_at: null, created_at: "",
+    };
+    render(<ChatPanel {...props} state={state({
+      messages: [mine],
+      queued: [{ turn_id: "t", client_id: "abc", author: null, text: "please help", sent_at: "", state: "queued" }],
+    })} />);
+    expect(screen.queryByTestId("queued-row")).toBeNull();
+    expect(screen.getAllByText("please help")).toHaveLength(1);
+  });
+
+  it("labels someone else's message with their name, not mine", () => {
+    const mine = { id: "m1", turn_index: 1, role: "user" as const, content: {}, plaintext: "me", status: "complete" as const, error_detail: null, started_at: null, completed_at: null, created_at: "", author: { name: "Alice A", user_id: 1 } };
+    const theirs = { ...mine, id: "m2", turn_index: 2, plaintext: "them", author: { name: "Bo B", user_id: 2 } };
+    render(<ChatPanel {...props} state={state({ messages: [mine, theirs] })} />);
+    expect(screen.getAllByTestId("message-author").map((n) => n.textContent)).toEqual(["Bo B"]);
+  });
+});
+
+describe("a contact's failed send restores what they typed", () => {
+  // A contact's socket is read-only, so their send goes over HTTP
+  // (`useSessionSocket.sendChatOverHttp`) and `current_user_id` is null on
+  // their connect snapshot (consumers.py: "None for a contact, who has no
+  // user id"). Their composer's `active_draft` is the hook's own LOCAL
+  // stand-in (`id: "local"`) rather than a server-assigned draft.
+  function localDraft(body: string) {
+    return {
+      id: "local", slot: "next" as const, status: "open" as const, body,
+      version: 0, last_editor: 0, last_edit_at: new Date().toISOString(),
+    };
+  }
+
+  it("shows the text again once the HTTP send fails", () => {
+    const contactProps = { ...props, currentUserId: null };
+    const composer = () => screen.getByTestId("composer") as HTMLTextAreaElement;
+
+    const { rerender } = render(
+      <ChatPanel {...contactProps} state={state({
+        active_draft: localDraft("please help"), current_user_id: null,
+      })} />,
+    );
+    expect(composer().value).toBe("please help");
+
+    fireEvent.click(screen.getByTestId("send"));
+    expect(composer().value).toBe("");
+
+    // The send went out — `sendChatOverHttp` clears the hook's local draft to
+    // null the instant it fires, well before the HTTP round trip resolves.
+    rerender(
+      <ChatPanel {...contactProps} state={state({
+        active_draft: null, current_user_id: null,
+      })} />,
+    );
+    expect(composer().value).toBe("");
+
+    // The HTTP send failed — the hook's catch handler re-seeds the SAME local
+    // draft with the original text ("Put the words back, so a failed send
+    // never costs what was typed.").
+    rerender(
+      <ChatPanel {...contactProps} state={state({
+        active_draft: localDraft("please help"), current_user_id: null,
+      })} />,
+    );
+    expect(composer().value).toBe("please help");
+  });
+});
+
+describe("a contact viewer (final review C2 / I6)", () => {
+  // A widget visitor has no user id: `current_user_id` is null and the
+  // snapshot names them by `current_contact_id` instead.
+  const contactState = (over: Partial<SessionState> = {}) =>
+    state({ current_user_id: null, current_contact_id: 7, ...over });
+  const contactProps = { ...props, currentUserId: null };
+  const authored = (over: Record<string, unknown>) => ({
+    id: "m1", turn_index: 1, role: "user" as const, content: {}, plaintext: "hello",
+    status: "complete" as const, error_detail: null, started_at: null, completed_at: null,
+    created_at: "", ...over,
+  });
+
+  it("renders the contact's own authored line as theirs: right-aligned, no label", () => {
+    render(<ChatPanel {...contactProps} state={contactState({
+      messages: [authored({ author: { name: "Beth", contact_id: 7 } })],
+    })} />);
+    expect(screen.queryByTestId("message-author")).toBeNull();
+    const bubble = screen.getByText("hello").closest("div.rounded-2xl") as HTMLElement;
+    expect(bubble.className).toContain("ml-auto");
+  });
+
+  it("still labels a member's line for the contact", () => {
+    render(<ChatPanel {...contactProps} state={contactState({
+      messages: [authored({ author: { name: "Alice A", user_id: 1 } })],
+    })} />);
+    expect(screen.getAllByTestId("message-author").map((n) => n.textContent)).toEqual(["Alice A"]);
+  });
+
+  it("calls the contact's own queued send 'You'", () => {
+    render(<ChatPanel {...contactProps} state={contactState({
+      queued: [{ turn_id: "t", client_id: "c", author: { name: "Beth", contact_id: 7 }, text: "later", sent_at: "", state: "queued" }],
+    })} />);
+    const row = screen.getByTestId("queued-row");
+    expect(row.textContent).toContain("You");
+    expect(row.textContent).not.toContain("Beth");
+  });
+
+  it("does not double an own send whose client never sent a client_id", () => {
+    // An older host (ace-web's sendOverHttp) sends no client_id, so the queued
+    // entry cannot be matched by id. Its optimistic row is still on screen.
+    const pending = authored({ id: "local:x", plaintext: "please help", status: "complete",
+                               content: { text: "please help", client_id: "x" } });
+    render(<ChatPanel {...contactProps} state={contactState({
+      messages: [pending],
+      queued: [{ turn_id: "t", client_id: "", author: { name: "Beth", contact_id: 7 }, text: "please help ", sent_at: "", state: "queued" }],
+    })} />);
+    expect(screen.queryByTestId("queued-row")).toBeNull();
+  });
+
+  it("a peer's identical text is not hidden by my own optimistic row", () => {
+    const pending = authored({ id: "local:x", plaintext: "yes", status: "pending",
+                               content: { text: "yes", client_id: "x" } });
+    render(<ChatPanel {...contactProps} state={contactState({
+      messages: [pending],
+      queued: [{ turn_id: "t", client_id: "", author: { name: "Alice A", user_id: 1 }, text: "yes", sent_at: "", state: "queued" }],
+    })} />);
+    expect(screen.getByTestId("queued-row").textContent).toContain("Alice A");
+  });
+});
+
+describe("a peer's bubble (final review m4)", () => {
+  it("does not wear the agent's treatment", () => {
+    const theirs = { id: "m2", turn_index: 2, role: "user" as const, content: {}, plaintext: "them", status: "complete" as const, error_detail: null, started_at: null, completed_at: null, created_at: "", author: { name: "Bo B", user_id: 2 } };
+    const agent = { ...theirs, id: "a1", turn_index: 3, role: "assistant" as const, plaintext: "agent", author: null };
+    render(<ChatPanel {...props} state={state({ messages: [theirs, agent] })} />);
+    const peer = screen.getByText("them").closest("div.rounded-2xl") as HTMLElement;
+    const bot = screen.getByText("agent").closest("div.rounded-2xl") as HTMLElement;
+    expect(peer.className).not.toBe(bot.className);
+    expect(peer.className).toContain("border");
+  });
+});

package/src/chat/ChatPanel.tsx

@@ -1,19 +1,24 @@
-import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { useMemo, type ReactNode } from "react";
 
 import type { SessionState } from "./protocol";
 import type { RenderMarkdown } from "./MessageItem";
 import { ConnectionStatus } from "./ConnectionStatus";
 import { MessageList } from "./MessageList";
 import { PresenceChips } from "./PresenceChips";
+import { isMine } from "./identity";
+import { QueuedRows } from "./QueuedRows";
+import { TypingRows } from "./TypingRows";
 import { SendBox, type PendingAttachment } from "./SendBox";
-import { isDraftIdle, msUntilDraftIdle, type DraftStorage } from "./drafts";
+import { type DraftStorage } from "./drafts";
 import { agentHasFloor as computeAgentHasFloor, pendingLabel as computePendingLabel, turnNotice } from "./turnStatus";
 import { useStickyBottom } from "./useStickyBottom";
 
 export interface ChatPanelProps {
   state: SessionState;
   connected: boolean;
-  currentUserId: number;
+  /** The viewer's user id — null for a contact (a widget visitor), who is
+   *  identified by `state.current_contact_id` instead. */
+  currentUserId: number | null;
   onSend: () => void;
   onStop: (messageId: string | null) => void;
   /** A send is outstanding but no reply has begun — the turn is queued,
@@ -24,7 +29,11 @@ export interface ChatPanelProps {
   onAttach?: (files: File[]) => void;
   onRemoveAttachment?: (id: string) => void;
   onUpdateDraft: (body: string) => void;
-  onTakeOver: () => void;
+  /** @deprecated ignored since 0.13 — everyone has their own draft now, so
+   *  there is no lock left to take over. Kept optional so a host still
+   *  wiring `useSessionSocket().takeOverDraft` through (e.g. ace-web) keeps
+   *  compiling across the upgrade. */
+  onTakeOver?: () => void;
   onDiscard: () => void;
   renderMarkdown?: RenderMarkdown;
   /** Optional banner rendered above the composer. */
@@ -59,7 +68,6 @@ export function ChatPanel({
   onAttach,
   onRemoveAttachment,
   onUpdateDraft,
-  onTakeOver,
   onDiscard,
   renderMarkdown,
   banner,
@@ -74,36 +82,13 @@ export function ChatPanel({
   // it wired without an unused-var error; a future toolbar can surface it.
   void onDiscard;
 
-  // Force a re-render when the draft lock transitions from live to idle so
-  // PresenceChips' amber-highlight updates at T+2s without waiting for some
-  // unrelated event to arrive.
-  const [, forceIdleTick] = useState(0);
-  useEffect(() => {
-    const draft = state.active_draft;
-    if (!draft) return;
-    const remaining = msUntilDraftIdle(draft);
-    if (remaining === 0) return;
-    const t = window.setTimeout(() => forceIdleTick((n) => n + 1), remaining + 10);
-    return () => window.clearTimeout(t);
-  }, [state.active_draft?.last_edit_at, state.active_draft]);
-
-  const holderId = state.active_draft?.last_editor ?? null;
-  const holderIsPresent =
-    holderId != null && state.presence_user_ids.includes(holderId);
-  // The holder's NAME, for the composer. SendBox has ids and no roster, so
-  // without this the one place a person actually looks — the box their
-  // teammate's words are appearing in — could only say "Another teammate",
-  // while the name sat in a chip at the far corner of the screen.
-  const holderName =
-    holderId != null && holderId !== currentUserId
-      ? (state.participants.find((p) => p.user_id === holderId)?.display_name ?? null)
-      : null;
-
   // A turn is "in flight" from the moment the assistant row appears
   // (status=pending/streaming) until chat.stream_complete flips it to
-  // complete. Treat pending AND streaming as in-flight so the send button
-  // stays locked out and the stop button is reachable during the "waiting
-  // for first token" window.
+  // complete. Treat pending AND streaming as in-flight so the Stop button
+  // stays reachable during the "waiting for first token" window and SendBox
+  // knows to show its "sent after the current reply" placeholder — Send
+  // itself is never locked out by this any more (0.13): a send made while the
+  // agent is replying is QUEUED, not blocked, and <QueuedRows> shows it landed.
   const inFlightMessage = useMemo(
     () =>
       state.messages.find(
@@ -154,9 +139,47 @@ export function ChatPanel({
   const messages = state.messages;
   const lastMessageLen =
     messages.length > 0 ? messages[messages.length - 1].plaintext.length : 0;
-  const scrollDep = `${messages.length}:${lastMessageLen}:${showPendingReply}`;
+  const queuedCount = state.queued?.length ?? 0;
+  const scrollDep = `${messages.length}:${lastMessageLen}:${showPendingReply}:${queuedCount}`;
   const { containerRef, onScroll } = useStickyBottom(scrollDep);
 
+  // Your own optimistic sends already render in the transcript (as a
+  // "pending" user row keyed by client_id) the instant you press send, so a
+  // queued row for the SAME send would show it twice — once as your bubble,
+  // once as a dashed "queued" placeholder. hideClientIds is every client_id
+  // already on screen in `messages`.
+  const hideClientIds = useMemo(
+    () =>
+      new Set(
+        state.messages
+          .map((m) => m.content?.client_id)
+          .filter((c): c is string => typeof c === "string"),
+      ),
+    [state.messages],
+  );
+
+  // Who is looking, for "is this line mine": a member by user id, a contact
+  // (the widget) by the snapshot's contact id.
+  const currentContactId = state.current_contact_id ?? null;
+
+  // The text of your own sends still waiting to be confirmed — for a client
+  // that sends no client_id (an older host's HTTP send), the only way to tell
+  // its queued entry from a second copy of the same line.
+  const ownPendingTexts = useMemo(
+    () =>
+      new Set(
+        state.messages
+          .filter(
+            (m) =>
+              m.role === "user" &&
+              (m.status === "pending" || m.id.startsWith("local:")) &&
+              (!m.author || isMine(m.author, currentUserId, currentContactId)),
+          )
+          .map((m) => m.plaintext.trim()),
+      ),
+    [state.messages, currentUserId, currentContactId],
+  );
+
   return (
     <div className="flex h-full flex-col">
       <div className="flex items-center gap-3 border-b border-border bg-background px-3 py-1.5 text-xs">
@@ -165,8 +188,6 @@ export function ChatPanel({
           <PresenceChips
             participants={state.participants}
             presenceUserIds={state.presence_user_ids}
-            draftHolderId={holderId}
-            draftHolderIdle={isDraftIdle(state.active_draft)}
             currentUserId={currentUserId}
           />
         </div>
@@ -179,28 +200,37 @@ export function ChatPanel({
           header, i.e. unreachable. Pinning keeps "Load earlier"/"Load full"
           always visible. */}
       {historySlot}
-      <div ref={containerRef} onScroll={onScroll} className="flex-1 overflow-y-auto">
+      {/* overflow-x-hidden: `overflow-y: auto` alone computes overflow-x to
+          auto, so anything wider than the column made the transcript scroll
+          sideways into empty space. Wide content scrolls inside its own box. */}
+      <div ref={containerRef} onScroll={onScroll} className="flex-1 overflow-x-hidden overflow-y-auto">
         <MessageList
           messages={state.messages}
           emptyState={emptyState}
           renderMarkdown={renderMarkdown}
           pendingReply={showPendingReply}
           pendingLabel={pendingLabel}
+          currentUserId={currentUserId}
+          currentContactId={currentContactId}
+        />
+        <QueuedRows
+          queued={state.queued ?? []}
+          hideClientIds={hideClientIds}
+          currentUserId={currentUserId}
+          currentContactId={currentContactId}
+          ownPendingTexts={ownPendingTexts}
         />
       </div>
+      <TypingRows peers={state.peer_drafts ?? []} />
       <SendBox
         draft={state.active_draft}
         connected={connected}
-        currentUserId={currentUserId}
-        holderIsPresent={holderIsPresent}
-        holderName={holderName}
         isStreaming={inFlightMessage != null || awaitingReply}
         streamingMessageId={inFlightMessage?.id ?? null}
         onUpdate={onUpdateDraft}
         onSend={onSend}
         onStop={onStop}
         stopState={state.stopState}
-        onTakeOver={onTakeOver}
         banner={
           notice ? (
             <p

package/src/chat/MessageItem.tsx

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
 import { AlertTriangle, ChevronRight, OctagonX } from "lucide-react";
 
-import type { Message } from "./protocol";
+import type { Message, MessageAuthor } from "./protocol";
+import { isMine } from "./identity";
 import { ToolCallPair } from "./ToolCallPair";
 
 /** How to render assistant/system markdown. Injected by the app so the kit
@@ -19,6 +20,23 @@ interface Props {
    *  duplicate the rendering logic per row. */
   forceToolOpen?: boolean;
   renderMarkdown?: RenderMarkdown;
+  /** Who is looking, so a `user` row can tell "me" from "someone else" —
+   *  every row persisted before authorship shipped has `author == null` and
+   *  must keep rendering exactly as it always has (right-aligned, no label).
+   *  Null for a contact viewer, who is named by `currentContactId`. */
+  currentUserId?: number | null;
+  /** The viewer when it is a contact (a widget visitor); null for a member. */
+  currentContactId?: number | null;
+}
+
+/** Someone else's line, or null when it's mine (or nobody recorded). A row
+ *  with no `author` predates authorship tracking and is never "someone
+ *  else's" — it renders exactly as it always did. */
+function otherAuthorOf(
+  message: Message, currentUserId?: number | null, currentContactId?: number | null,
+): MessageAuthor | null {
+  if (message.role !== "user" || !message.author) return null;
+  return isMine(message.author, currentUserId, currentContactId) ? null : message.author;
 }
 
 /** Count visible lines for the "▸ System context (N lines)" header. */
@@ -68,6 +86,8 @@ export function MessageItem({
   message,
   forceToolOpen,
   renderMarkdown = plainText,
+  currentUserId,
+  currentContactId,
 }: Props) {
   const text = message.plaintext;
   const isStreaming = message.status === "streaming";
@@ -109,9 +129,14 @@ export function MessageItem({
     );
   }
 
+  const otherAuthor = otherAuthorOf(message, currentUserId, currentContactId);
+  // A teammate's line sits on the agent's side of the column, so it needs its
+  // own treatment — in the agent's `bg-muted` it read as the agent talking.
   const bubbleClass =
     message.role === "user"
-      ? "ml-auto bg-primary text-primary-foreground"
+      ? otherAuthor
+        ? "mr-auto border border-border bg-card text-foreground"
+        : "ml-auto bg-primary text-primary-foreground"
       : "mr-auto bg-muted text-foreground";
   // Hold the "Thinking…" treatment through the gap between
   // chat.stream_start (status flips to "streaming") and the first
@@ -119,10 +144,20 @@ export function MessageItem({
   const showThinking =
     (isPending || isStreaming) && message.role === "assistant" && !text;
   return (
+    // `overflow-wrap:anywhere` so one unbreakable token — a long path, a URL,
+    // inline code — wraps inside the bubble. Without it the token overflowed
+    // `max-w-[80%]` and made the whole transcript scroll sideways into empty
+    // space on a phone (2026-09-24). Tables and code blocks keep their own
+    // horizontal scroll; this only affects running text.
     <div
-      className={`my-2 max-w-[80%] rounded-2xl px-4 py-2 ${bubbleClass}`}
+      className={`my-2 min-w-0 max-w-[80%] rounded-2xl px-4 py-2 [overflow-wrap:anywhere] ${bubbleClass}`}
       aria-live={isStreaming || isPending ? "polite" : undefined}
     >
+      {otherAuthor && (
+        <div data-testid="message-author" className="mb-0.5 text-[11px] font-medium text-muted-foreground">
+          {otherAuthor.name}
+        </div>
+      )}
       {showThinking ? (
         <ThinkingIndicator />
       ) : message.role === "assistant" ? (

package/src/chat/MessageList.tsx

@@ -28,6 +28,11 @@ interface Props {
   /** Wording for that bubble — the caller knows whether the turn is still
    *  queued for a runner or the agent is actually working. */
   pendingLabel?: string;
+  /** Threaded to MessageItem so a `user` row can tell "me" from "someone
+   *  else" for the authored-bubble treatment. */
+  currentUserId?: number | null;
+  /** The viewer when it is a contact; see MessageItem. */
+  currentContactId?: number | null;
 }
 
 // Show the bulk expand/collapse toolbar once a session has more than this
@@ -42,6 +47,8 @@ export function MessageList({
   renderMarkdown,
   pendingReply = false,
   pendingLabel,
+  currentUserId,
+  currentContactId,
 }: Props) {
   const paired = useMemo(() => pairToolMessages(messages), [messages]);
   // Collapse back-to-back tool calls into one row. An agent mid-task emits long
@@ -156,6 +163,8 @@ export function MessageList({
               message={row.message}
               forceToolOpen={forceToolOpen}
               renderMarkdown={renderMarkdown}
+              currentUserId={currentUserId}
+              currentContactId={currentContactId}
             />
           );
         })}

package/src/chat/PresenceChips.tsx

@@ -3,8 +3,6 @@ import type { Participant } from "./protocol";
 interface Props {
   participants: Participant[];
   presenceUserIds: number[];
-  draftHolderId: number | null;
-  draftHolderIdle: boolean;
   /** Who is looking. Required so the row can exclude YOU.
    *
    *  Without it this rendered your own chip and the empty state said "nobody
@@ -13,7 +11,7 @@ interface Props {
    *  you saw one chip, which is indistinguishable from being watched by a
    *  stranger. ChatPanel had `currentUserId` the whole time and never passed
    *  it. Caught by the first two-browser e2e this surface ever had. */
-  currentUserId: number;
+  currentUserId: number | null;
 }
 
 /** A stable colour per person, so two people are told apart at a glance.
@@ -40,8 +38,6 @@ const MAX_FACES = 4;
 export function PresenceChips({
   participants,
   presenceUserIds,
-  draftHolderId,
-  draftHolderIdle,
   currentUserId,
 }: Props) {
   const present = participants.filter(
@@ -59,50 +55,28 @@ export function PresenceChips({
     );
   }
 
-  const editor = present.find(
-    (p) => p.user_id === draftHolderId && !draftHolderIdle,
-  );
   const faces = present.slice(0, MAX_FACES);
   const overflow = present.length - faces.length;
 
   return (
     <div className="flex items-center gap-2" data-testid="presence-chips">
-      {/* The one thing worth WORDS rather than a ring: somebody is typing into
-          the box you share, and the old UI said so only in a `title` tooltip —
-          invisible on touch, invisible to a screen reader, and invisible to
-          anyone not hovering the exact 28px circle. */}
-      {editor && (
-        <span
-          className="hidden items-center gap-1 text-xs text-muted-foreground sm:flex"
-          data-testid="presence-editing-label"
-        >
-          <span className="relative flex h-1.5 w-1.5" aria-hidden="true">
-            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-60" />
-            <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-primary" />
-          </span>
-          {firstName(editor.display_name)} is typing…
-        </span>
-      )}
       <ul
         className="flex items-center -space-x-1.5"
-        aria-label={describe(present, editor)}
+        aria-label={describe(present)}
         data-testid="presence-list"
       >
         {faces.map((p) => {
-          const isEditor = p.user_id === editor?.user_id;
           return (
             <li
               key={p.user_id}
               data-testid="presence-chip"
               data-user-id={p.user_id}
-              data-editing={isEditor ? "true" : "false"}
-              title={p.display_name + (isEditor ? " — editing…" : "")}
+              title={p.display_name}
               className={[
                 "flex h-7 w-7 items-center justify-center rounded-full",
                 "text-[11px] font-semibold ring-2 ring-background",
                 "transition-transform hover:z-10 hover:scale-110",
                 colorFor(p.user_id),
-                isEditor ? "z-10 !ring-primary" : "",
               ].join(" ")}
             >
               {initials(p.display_name)}
@@ -125,14 +99,10 @@ export function PresenceChips({
 
 /** The accessible name for the row — the same fact the faces carry, in words.
  *  A row of coloured circles is meaningless without this. */
-function describe(present: Participant[], editor?: Participant): string {
+function describe(present: Participant[]): string {
   const names = present.map((p) => p.display_name).join(", ");
   const who = present.length === 1 ? "1 other person here" : `${present.length} other people here`;
-  return editor ? `${who}: ${names}. ${editor.display_name} is editing.` : `${who}: ${names}`;
-}
-
-function firstName(name: string): string {
-  return name.trim().split(/\s+/)[0] || name;
+  return `${who}: ${names}`;
 }
 
 function initials(name: string): string {

package/src/chat/QueuedRows.tsx

@@ -0,0 +1,42 @@
+import type { QueuedMessage } from "./protocol";
+import { isMine } from "./identity";
+
+/** Sends that have not reached the agent yet, in send order, for everyone.
+ *  Your own are skipped when your optimistic echo already shows them — by
+ *  client_id (`hideClientIds`), or, for a client that never sent one (an older
+ *  host's HTTP send), by the text of your own still-unconfirmed row
+ *  (`ownPendingTexts`) — so a line never appears twice. */
+export function QueuedRows({
+  queued, hideClientIds, currentUserId, currentContactId, ownPendingTexts,
+}: {
+  queued: QueuedMessage[];
+  hideClientIds: Set<string>;
+  currentUserId: number | null;
+  currentContactId?: number | null;
+  /** Trimmed text of the viewer's own optimistic rows not yet confirmed. */
+  ownPendingTexts?: Set<string>;
+}) {
+  const rows = queued.filter((q) => {
+    if (q.client_id && hideClientIds.has(q.client_id)) return false;
+    const mine = isMine(q.author, currentUserId, currentContactId);
+    return !(mine && ownPendingTexts?.has(q.text.trim()));
+  });
+  if (rows.length === 0) return null;
+  return (
+    <div className="px-3">
+      {rows.map((q) => {
+        const mine = isMine(q.author, currentUserId, currentContactId);
+        return (
+          <div key={q.turn_id} data-testid="queued-row"
+               className={`my-2 max-w-[80%] rounded-2xl border border-dashed border-border px-4 py-2 text-sm ${mine ? "ml-auto" : "mr-auto"}`}>
+            <div className="mb-0.5 flex gap-2 text-[11px] text-muted-foreground">
+              <span className="font-medium text-foreground">{mine ? "You" : q.author?.name ?? "Someone"}</span>
+              <span>{q.state === "queued" ? "queued" : "sending to agent…"}</span>
+            </div>
+            <div className="whitespace-pre-wrap text-foreground-secondary [overflow-wrap:anywhere]">{q.text}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}