canopy-ui 0.14.1 → 0.15.0

package/package.json

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

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

@@ -31,18 +31,58 @@ const props = {
 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");
+    const box = screen.getByTestId("peer-composer");
+    expect(box.textContent).toContain("Bo B is typing");
+    expect(box.textContent).toContain("thinking out loud");
     expect((screen.getByTestId("composer") as HTMLTextAreaElement).disabled).toBe(false);
     expect(screen.queryByTestId("coedit-banner")).toBeNull();
   });
 
   it("shows 'is typing…' with no words when a teammate withholds them", () => {
     render(<ChatPanel {...props} state={state({ peer_drafts: [{ author: { id: 2, name: "Bo B" }, body: "", at: null, typing: true }] })} />);
-    const row = screen.getByTestId("typing-row");
-    expect(row.textContent).toContain("Bo B");
-    expect(row.textContent).toContain("is typing…");
+    const box = screen.getByTestId("peer-composer");
+    expect(box.textContent).toContain("Bo B is typing");
+    expect(screen.getByTestId("peer-typing-indicator")).toBeTruthy();
+  });
+
+  it("draws the teammate's box inside my composer, directly above my textarea", () => {
+    render(<ChatPanel {...props} state={state({ peer_drafts: [{ author: { id: 2, name: "Bo B" }, body: "hi", at: null }] })} />);
+    const box = screen.getByTestId("peer-composer");
+    const composer = screen.getByTestId("composer");
+    expect(box.compareDocumentPosition(composer) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    // Same container as the textarea, so it gets the composer's width.
+    expect(box.closest("ul")?.parentElement).toBe(composer.parentElement);
+  });
+
+  it("marks the typing person's presence chip, and only theirs", () => {
+    render(<ChatPanel {...props} state={state({ peer_drafts: [{ author: { id: 2, name: "Bo B" }, body: "hi", at: null }] })} />);
+    const chip = screen.getByTestId("presence-chip");
+    expect(chip.getAttribute("data-typing")).toBe("true");
+    expect(chip.getAttribute("title")).toBe("Bo B is typing");
+    expect(screen.getByTestId("presence-list").getAttribute("aria-label")).toContain("Bo B (typing)");
+  });
+
+  it("the chip goes quiet once the teammate stops", () => {
+    render(<ChatPanel {...props} state={state({ peer_drafts: [] })} />);
+    expect(screen.getByTestId("presence-chip").getAttribute("data-typing")).toBeNull();
+    expect(screen.queryByTestId("presence-typing-badge")).toBeNull();
+  });
+
+  it("gives a teammate one colour: chip, box edge and message label agree", () => {
+    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 },
+    };
+    render(<ChatPanel {...props} state={state({
+      messages: [theirs],
+      peer_drafts: [{ author: { id: 2, name: "Bo B" }, body: "hi", at: null }],
+    })} />);
+    const hue = (cls: string) => cls.match(/(sky|emerald|violet|amber|rose|teal)-/)?.[1];
+    const chipHue = hue(screen.getByTestId("presence-chip").className);
+    expect(chipHue).toBeTruthy();
+    expect(hue(screen.getByTestId("peer-composer").className)).toBe(chipHue);
+    expect(hue(screen.getByTestId("message-author").className)).toBe(chipHue);
   });
 
   it("send stays available while the agent is replying", () => {

package/src/chat/ChatPanel.tsx

@@ -1,13 +1,13 @@
 import { useMemo, type ReactNode } from "react";
 
-import type { SessionState, TypingVisibility } from "./protocol";
+import type { PeerDraft, SessionState, TypingVisibility } 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 { PeerComposers } from "./PeerComposers";
 import { SendBox, type PendingAttachment } from "./SendBox";
 import { type DraftStorage } from "./drafts";
 import { agentHasFloor as computeAgentHasFloor, pendingLabel as computePendingLabel, turnNotice } from "./turnStatus";
@@ -62,6 +62,8 @@ export interface ChatPanelProps {
  * NO data fetching, NO WebSocket, NO CLI-auth. The container (e.g. canopy's
  * ChatPage) wires `useSessionSocket` returns into these props.
  */
+const EMPTY_PEERS: PeerDraft[] = [];
+
 export function ChatPanel({
   state,
   connected,
@@ -189,6 +191,11 @@ export function ChatPanel({
     [state.messages, currentUserId, currentContactId],
   );
 
+  // Everyone else's live drafts. The same list draws their boxes above the
+  // composer and marks their chips in the header, so the two never disagree.
+  const peerDrafts = state.peer_drafts ?? EMPTY_PEERS;
+  const typingUserIds = useMemo(() => peerDrafts.map((p) => p.author.id), [peerDrafts]);
+
   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">
@@ -198,6 +205,7 @@ export function ChatPanel({
             participants={state.participants}
             presenceUserIds={state.presence_user_ids}
             currentUserId={currentUserId}
+            typingUserIds={typingUserIds}
           />
         </div>
       </div>
@@ -230,7 +238,6 @@ export function ChatPanel({
           ownPendingTexts={ownPendingTexts}
         />
       </div>
-      <TypingRows peers={state.peer_drafts ?? []} />
       <SendBox
         draft={state.active_draft}
         connected={connected}
@@ -240,6 +247,7 @@ export function ChatPanel({
         onSend={onSend}
         onStop={onStop}
         stopState={state.stopState}
+        peers={<PeerComposers peers={peerDrafts} />}
         banner={
           notice ? (
             <p

package/src/chat/MessageItem.tsx

@@ -3,6 +3,7 @@ import { AlertTriangle, ChevronRight, OctagonX } from "lucide-react";
 
 import type { Message, MessageAuthor } from "./protocol";
 import { isMine } from "./identity";
+import { authorColor } from "./personColor";
 import { ToolCallPair } from "./ToolCallPair";
 
 /** How to render assistant/system markdown. Injected by the app so the kit
@@ -154,7 +155,12 @@ export function MessageItem({
       aria-live={isStreaming || isPending ? "polite" : undefined}
     >
       {otherAuthor && (
-        <div data-testid="message-author" className="mb-0.5 text-[11px] font-medium text-muted-foreground">
+        // In their colour — the same one as their presence chip and their live
+        // draft box — so a teammate's lines are attributable at a glance.
+        <div
+          data-testid="message-author"
+          className={`mb-0.5 text-[11px] font-semibold ${authorColor(otherAuthor).text}`}
+        >
           {otherAuthor.name}
         </div>
       )}

package/src/chat/PeerComposers.test.tsx

@@ -0,0 +1,64 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { PeerComposers } from "./PeerComposers";
+import { TypingRows } from "./TypingRows";
+import { personColor } from "./personColor";
+import type { PeerDraft } from "./protocol";
+
+afterEach(cleanup);
+
+const bo: PeerDraft = { author: { id: 2, name: "Bo Banda" }, body: "hello there", at: null };
+
+describe("PeerComposers", () => {
+  it("renders nothing when nobody is typing", () => {
+    const { container } = render(<PeerComposers peers={[]} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("draws a box with the person's avatar, name and live words", () => {
+    render(<PeerComposers peers={[bo]} />);
+    const box = screen.getByTestId("peer-composer");
+    // The name is always shown — colour is never the only cue.
+    expect(box.textContent).toContain("Bo Banda is typing");
+    expect(box.textContent).toContain("BB");
+    expect(screen.getByTestId("peer-composer-text").textContent).toContain("hello there");
+    expect(box.className).toContain(personColor(2).edge);
+  });
+
+  it("ends the live words with a caret that only blinks when motion is allowed", () => {
+    render(<PeerComposers peers={[bo]} />);
+    const caret = screen.getByTestId("peer-caret");
+    expect(caret.getAttribute("aria-hidden")).toBe("true");
+    expect(caret.className).toContain("motion-safe:animate-pulse");
+    expect(caret.className).not.toMatch(/(^|\s)animate-/);
+  });
+
+  it("wraps the words instead of truncating them to one line", () => {
+    render(<PeerComposers peers={[bo]} />);
+    const text = screen.getByTestId("peer-composer-text");
+    expect(text.className).toContain("whitespace-pre-wrap");
+    expect(text.className).not.toContain("truncate");
+  });
+
+  it("shows a typing indicator, not words, when the body is withheld", () => {
+    render(<PeerComposers peers={[{ ...bo, body: "", typing: true }]} />);
+    expect(screen.getByTestId("peer-composer").textContent).toContain("Bo Banda is typing");
+    expect(screen.getByTestId("peer-typing-indicator")).toBeTruthy();
+    expect(screen.queryByTestId("peer-composer-text")).toBeNull();
+  });
+
+  it("stacks several people newest-edit-last and stays a polite live region", () => {
+    const robin: PeerDraft = { author: { id: 3, name: "Robin Sharma" }, body: "and me", at: null };
+    render(<PeerComposers peers={[bo, robin]} />);
+    const boxes = screen.getAllByTestId("peer-composer");
+    expect(boxes.map((b) => b.getAttribute("data-user-id"))).toEqual(["2", "3"]);
+    expect(screen.getByTestId("peer-composers").getAttribute("aria-live")).toBe("polite");
+  });
+
+  it("keeps the deprecated TypingRows export rendering the same boxes", () => {
+    render(<TypingRows peers={[bo]} />);
+    expect(screen.getByTestId("peer-composer").textContent).toContain("hello there");
+  });
+});

package/src/chat/PeerComposers.tsx

@@ -0,0 +1,106 @@
+import { useLayoutEffect, useRef, useState } from "react";
+
+import type { PeerDraft } from "./protocol";
+import { initials, personColor } from "./personColor";
+
+/** Everyone else's box, live — the multiplayer half of the composer.
+ *
+ *  Each person typing gets a read-only copy of a composer, stacked directly
+ *  above your own and drawn with the same width and corners, so what you see is
+ *  "another person writing", not a status line. It used to be one row of grey
+ *  italic `text-xs`, truncated to a single line — in a live test it was easy to
+ *  miss entirely and read like the app reporting on itself.
+ *
+ *  Newest edit last (the order `peer_drafts` arrives in). A person in `typing`
+ *  mode shares the fact, not the words: their box shows a typing indicator
+ *  instead of text. Motion (the caret blink, the dots) is `motion-safe` only;
+ *  under reduced motion the caret and dots are still drawn, just still. */
+export function PeerComposers({ peers }: { peers: PeerDraft[] }) {
+  if (peers.length === 0) return null;
+  return (
+    <ul className="mb-2 space-y-1.5" aria-live="polite" data-testid="peer-composers">
+      {peers.map((p) => (
+        <PeerComposer key={p.author.id} peer={p} />
+      ))}
+    </ul>
+  );
+}
+
+/** How tall a live draft may grow before it caps: ~3 lines of `text-sm`. */
+const MAX_BODY = "max-h-[3.75rem]";
+
+function PeerComposer({ peer }: { peer: PeerDraft }) {
+  const color = personColor(peer.author.id);
+  const withheld = peer.body === "";
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const textRef = useRef<HTMLParagraphElement>(null);
+  const [overflowing, setOverflowing] = useState(false);
+
+  // The box is anchored to the BOTTOM of the text: the newest words are the
+  // ones being written, so a long draft shows its tail and fades out at the
+  // top, rather than freezing on its first three lines while the person keeps
+  // typing below them.
+  useLayoutEffect(() => {
+    const box = bodyRef.current;
+    const text = textRef.current;
+    if (!box || !text) return setOverflowing(false);
+    setOverflowing(text.scrollHeight > box.clientHeight + 1);
+  }, [peer.body]);
+
+  return (
+    <li
+      data-testid="peer-composer"
+      data-user-id={peer.author.id}
+      className={`rounded-md border border-l-4 border-input ${color.edge} bg-card px-2 py-1.5 shadow-sm`}
+    >
+      <div className="flex min-w-0 items-center gap-1.5 text-xs">
+        <span
+          aria-hidden="true"
+          className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[9px] font-semibold ${color.avatar}`}
+        >
+          {initials(peer.author.name)}
+        </span>
+        <span className={`truncate font-semibold ${color.text}`}>{peer.author.name}</span>
+        {/* A real space, so the text (and a screen reader) says "Robin Sharma
+            is typing" — flex `gap` is only visual. */}
+        {" "}
+        <span className="shrink-0 text-muted-foreground">is typing</span>
+      </div>
+      {withheld ? (
+        <div className="mt-1 flex h-5 items-center pl-6" data-testid="peer-typing-indicator">
+          <TypingDots />
+        </div>
+      ) : (
+        <div
+          ref={bodyRef}
+          className={`mt-1 flex ${MAX_BODY} flex-col justify-end overflow-hidden ${
+            overflowing ? "[mask-image:linear-gradient(to_bottom,transparent,black_1.25rem)]" : ""
+          }`}
+        >
+          <p
+            ref={textRef}
+            data-testid="peer-composer-text"
+            className="whitespace-pre-wrap text-sm text-foreground [overflow-wrap:anywhere]"
+          >
+            {peer.body}
+            <span
+              aria-hidden="true"
+              data-testid="peer-caret"
+              className={`ml-px inline-block h-[1.1em] w-0.5 translate-y-[0.2em] rounded-sm bg-current ${color.text} motion-safe:animate-pulse`}
+            />
+          </p>
+        </div>
+      )}
+    </li>
+  );
+}
+
+function TypingDots() {
+  return (
+    <span className="inline-flex gap-1 text-muted-foreground" aria-hidden="true">
+      <span className="h-1.5 w-1.5 rounded-full bg-current motion-safe:animate-bounce motion-safe:[animation-delay:-0.3s]" />
+      <span className="h-1.5 w-1.5 rounded-full bg-current motion-safe:animate-bounce motion-safe:[animation-delay:-0.15s]" />
+      <span className="h-1.5 w-1.5 rounded-full bg-current motion-safe:animate-bounce" />
+    </span>
+  );
+}

package/src/chat/PresenceChips.tsx

@@ -1,4 +1,7 @@
+import { PenLine } from "lucide-react";
+
 import type { Participant } from "./protocol";
+import { initials, personColor } from "./personColor";
 
 interface Props {
   participants: Participant[];
@@ -12,25 +15,13 @@ interface Props {
    *  stranger. ChatPanel had `currentUserId` the whole time and never passed
    *  it. Caught by the first two-browser e2e this surface ever had. */
   currentUserId: number | null;
+  /** Who is typing right now (their live draft is up). Their chip gets a
+   *  solid ring in their colour, a pulse, and a pen badge, so it reads from
+   *  the header even while you are looking at the transcript. Optional — an
+   *  older caller simply gets no typing signal on the chips. */
+  typingUserIds?: number[];
 }
 
-/** A stable colour per person, so two people are told apart at a glance.
- *
- *  Every chip used to be `bg-muted`, which meant identity rested entirely on
- *  two initials — and initials collide constantly on a small team (two J.K.s
- *  render identically). Hue is derived from the user id so a given person is
- *  the same colour in every session, for everyone, with no state to keep. */
-const PALETTE = [
-  "bg-sky-500/20 text-sky-700 dark:text-sky-200 ring-sky-500/40",
-  "bg-emerald-500/20 text-emerald-700 dark:text-emerald-200 ring-emerald-500/40",
-  "bg-violet-500/20 text-violet-700 dark:text-violet-200 ring-violet-500/40",
-  "bg-amber-500/20 text-amber-700 dark:text-amber-200 ring-amber-500/40",
-  "bg-rose-500/20 text-rose-700 dark:text-rose-200 ring-rose-500/40",
-  "bg-teal-500/20 text-teal-700 dark:text-teal-200 ring-teal-500/40",
-];
-
-const colorFor = (userId: number) => PALETTE[Math.abs(userId) % PALETTE.length];
-
 /** How many faces before collapsing into "+N". Beyond a handful the row stops
  *  being a glance and starts being a list, and it shares a thin header bar. */
 const MAX_FACES = 4;
@@ -39,6 +30,7 @@ export function PresenceChips({
   participants,
   presenceUserIds,
   currentUserId,
+  typingUserIds = [],
 }: Props) {
   const present = participants.filter(
     (p) => presenceUserIds.includes(p.user_id) && p.user_id !== currentUserId,
@@ -62,24 +54,47 @@ export function PresenceChips({
     <div className="flex items-center gap-2" data-testid="presence-chips">
       <ul
         className="flex items-center -space-x-1.5"
-        aria-label={describe(present)}
+        aria-label={describe(present, typingUserIds)}
         data-testid="presence-list"
       >
         {faces.map((p) => {
+          const color = personColor(p.user_id);
+          const typing = typingUserIds.includes(p.user_id);
           return (
             <li
               key={p.user_id}
               data-testid="presence-chip"
               data-user-id={p.user_id}
-              title={p.display_name}
+              data-typing={typing ? "true" : undefined}
+              title={typing ? `${p.display_name} is typing` : p.display_name}
               className={[
-                "flex h-7 w-7 items-center justify-center rounded-full",
-                "text-[11px] font-semibold ring-2 ring-background",
+                "relative flex h-7 w-7 items-center justify-center rounded-full",
+                "text-[11px] font-semibold ring-2",
                 "transition-transform hover:z-10 hover:scale-110",
-                colorFor(p.user_id),
+                color.avatar,
+                // Typing: a solid ring in their colour, lifted above its
+                // neighbours so the overlap never hides it.
+                typing ? `z-10 ${color.ring}` : "ring-background",
               ].join(" ")}
             >
               {initials(p.display_name)}
+              {typing && (
+                <>
+                  {/* The pulse is decoration; reduced motion drops it and
+                      the solid ring + badge still say "typing". */}
+                  <span
+                    aria-hidden="true"
+                    className={`pointer-events-none absolute inset-0 rounded-full ring-2 ${color.ring} opacity-60 motion-safe:animate-ping`}
+                  />
+                  <span
+                    aria-hidden="true"
+                    data-testid="presence-typing-badge"
+                    className="absolute -bottom-1 -right-1 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-background text-foreground ring-1 ring-border"
+                  >
+                    <PenLine className="h-2.5 w-2.5" />
+                  </span>
+                </>
+              )}
             </li>
           );
         })}
@@ -99,18 +114,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[]): string {
-  const names = present.map((p) => p.display_name).join(", ");
+function describe(present: Participant[], typingUserIds: number[]): string {
+  const names = present
+    .map((p) => (typingUserIds.includes(p.user_id) ? `${p.display_name} (typing)` : p.display_name))
+    .join(", ");
   const who = present.length === 1 ? "1 other person here" : `${present.length} other people here`;
   return `${who}: ${names}`;
 }
-
-function initials(name: string): string {
-  return name
-    .split(" ")
-    .map((w) => w[0])
-    .filter(Boolean)
-    .join("")
-    .slice(0, 2)
-    .toUpperCase();
-}

package/src/chat/QueuedRows.tsx

@@ -1,5 +1,6 @@
 import type { QueuedMessage } from "./protocol";
 import { isMine } from "./identity";
+import { authorColor } from "./personColor";
 
 /** 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
@@ -30,7 +31,13 @@ export function QueuedRows({
           <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
+                className={`font-medium ${
+                  !mine && q.author ? authorColor(q.author).text : "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>

package/src/chat/SendBox.test.tsx

@@ -99,7 +99,7 @@ describe("SendBox — local-first composer", () => {
   it("never adopts another editor's body — this box is only ever your own draft now", () => {
     // Everyone gets their own draft (`SessionState.active_draft` is the
     // CALLER's own); a teammate's live text arrives via `peer_drafts` /
-    // <TypingRows> instead, never through this component's `draft` prop. So a
+    // <PeerComposers> instead, never through this component's `draft` prop. So a
     // `last_editor` that isn't you must NOT overwrite what you're typing.
     const { textarea, rerender } = setup();
     fireEvent.change(textarea(), { target: { value: "my own words" } });

package/src/chat/SendBox.tsx

@@ -47,6 +47,10 @@ interface Props {
   /** Optional app-supplied banner rendered above the composer (e.g. an
    *  imported-session note). The kit itself has no CLI-auth banners. */
   banner?: ReactNode;
+  /** Everyone else's live drafts (`PeerComposers`), drawn inside this box
+   *  directly above your own textarea so the two read as the same kind of
+   *  thing — people writing — at the same width. */
+  peers?: ReactNode;
   /** When set, sending is disabled and this reason is shown as a hint. */
   disabledReason?: string;
   /** Files staged for the next send. Omit to hide attaching entirely — the kit
@@ -83,6 +87,7 @@ export function SendBox({
   onStop,
   stopState,
   banner,
+  peers,
   disabledReason,
   attachments,
   onAttach,
@@ -247,6 +252,7 @@ export function SendBox({
     >
       {banner}
       <div className={`p-2 ${dragging ? "bg-primary/5 ring-1 ring-inset ring-primary/40" : ""}`}>
+        {peers}
         {staged.length > 0 && (
           <ul className="mb-1.5 flex flex-wrap gap-1.5" data-testid="attachment-chips">
             {staged.map((a) => (

package/src/chat/TypingRows.tsx

@@ -1,25 +1,15 @@
 import type { PeerDraft } from "./protocol";
+import { PeerComposers } from "./PeerComposers";
 
-/** Everyone else's box, live — the multiplayer half of the composer. One row
- *  per person, newest edit last, right above your own box. */
+/** @deprecated Use `PeerComposers` inside `SendBox` (its `peers` slot), which
+ *  is what `ChatPanel` does. Kept so a consumer that mounts it on its own above
+ *  a composer keeps working: it is the same peer boxes, padded the way the old
+ *  row strip was. */
 export function TypingRows({ peers }: { peers: PeerDraft[] }) {
   if (peers.length === 0) return null;
   return (
-    <ul className="space-y-1 border-t border-border bg-background px-3 py-2" aria-live="polite">
-      {peers.map((p) =>
-        p.body === "" ? (
-          <li key={p.author.id} data-testid="typing-row" className="flex min-w-0 gap-2 text-xs">
-            <span className="shrink-0 font-medium text-foreground">{p.author.name}</span>
-            <span className="shrink-0 text-muted-foreground">is typing…</span>
-          </li>
-        ) : (
-          <li key={p.author.id} data-testid="typing-row" className="flex min-w-0 gap-2 text-xs">
-            <span className="shrink-0 font-medium text-foreground">{p.author.name}</span>
-            <span className="shrink-0 text-muted-foreground">is typing:</span>
-            <span className="min-w-0 truncate italic text-foreground-secondary">{p.body}</span>
-          </li>
-        ),
-      )}
-    </ul>
+    <div className="border-t border-border bg-background px-2 pt-2">
+      <PeerComposers peers={peers} />
+    </div>
   );
 }

package/src/chat/index.ts

@@ -82,6 +82,8 @@ export { ToolCallPair } from "./ToolCallPair";
 export { SendBox, type PendingAttachment } from "./SendBox";
 export { PresenceChips } from "./PresenceChips";
 export { TypingRows } from "./TypingRows";
+export { PeerComposers } from "./PeerComposers";
+export { personColor, authorColor, initials, type PersonColor } from "./personColor";
 export { QueuedRows } from "./QueuedRows";
 export { isMine } from "./identity";
 export { ConnectionStatus } from "./ConnectionStatus";

package/src/chat/personColor.ts

@@ -0,0 +1,87 @@
+/** One colour per person, used everywhere that person appears — their presence
+ *  chip, the name on their lines, and the box their live draft is drawn in —
+ *  so "the violet one" is the same somebody across the whole chat.
+ *
+ *  Every chip used to be `bg-muted`, which meant identity rested entirely on
+ *  two initials — and initials collide constantly on a small team (two J.K.s
+ *  render identically). Hue is derived from the id so a given person is the
+ *  same colour in every session, for everyone, with no state to keep.
+ *
+ *  Colour is never the ONLY cue: every surface that uses one also shows the
+ *  person's name (or carries it as the accessible name). Each class is written
+ *  out in full because Tailwind finds classes by scanning source text — a
+ *  class assembled from parts is never generated. */
+export interface PersonColor {
+  /** Initials avatar / presence chip: tinted fill + readable text. */
+  avatar: string;
+  /** The person's name set in their colour (message labels, box headers). */
+  text: string;
+  /** The accent edge of their live-draft box. */
+  edge: string;
+  /** A solid ring, for "this person is typing right now". */
+  ring: string;
+}
+
+const PALETTE: PersonColor[] = [
+  {
+    avatar: "bg-sky-500/20 text-sky-700 dark:text-sky-200",
+    text: "text-sky-700 dark:text-sky-300",
+    edge: "border-l-sky-500",
+    ring: "ring-sky-500",
+  },
+  {
+    avatar: "bg-emerald-500/20 text-emerald-700 dark:text-emerald-200",
+    text: "text-emerald-700 dark:text-emerald-300",
+    edge: "border-l-emerald-500",
+    ring: "ring-emerald-500",
+  },
+  {
+    avatar: "bg-violet-500/20 text-violet-700 dark:text-violet-200",
+    text: "text-violet-700 dark:text-violet-300",
+    edge: "border-l-violet-500",
+    ring: "ring-violet-500",
+  },
+  {
+    avatar: "bg-amber-500/20 text-amber-700 dark:text-amber-200",
+    text: "text-amber-700 dark:text-amber-300",
+    edge: "border-l-amber-500",
+    ring: "ring-amber-500",
+  },
+  {
+    avatar: "bg-rose-500/20 text-rose-700 dark:text-rose-200",
+    text: "text-rose-700 dark:text-rose-300",
+    edge: "border-l-rose-500",
+    ring: "ring-rose-500",
+  },
+  {
+    avatar: "bg-teal-500/20 text-teal-700 dark:text-teal-200",
+    text: "text-teal-700 dark:text-teal-300",
+    edge: "border-l-teal-500",
+    ring: "ring-teal-500",
+  },
+];
+
+/** The colour for a canopy user id. Same id, same colour, everywhere. */
+export function personColor(userId: number): PersonColor {
+  return PALETTE[Math.abs(userId) % PALETTE.length];
+}
+
+/** The colour for a message author — a canopy user or a contact. A contact
+ *  (widget visitor) has no user id; its contact id is a different number
+ *  space, so it is offset to avoid always landing on the colour of the user
+ *  with the same id. The name beside it is what actually identifies them. */
+export function authorColor(author: { user_id?: number; contact_id?: number }): PersonColor {
+  if (author.user_id != null) return personColor(author.user_id);
+  return personColor((author.contact_id ?? 0) + 3);
+}
+
+/** "Robin Sharma" → "RS". */
+export function initials(name: string): string {
+  return name
+    .split(" ")
+    .map((w) => w[0])
+    .filter(Boolean)
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+}

package/src/chat/protocol.ts

@@ -216,6 +216,11 @@ export interface TurnStatus {
   /** When a settled turn finished — lets the kit drop a failure the
    *  conversation has since moved past. Absent on an older server. */
   finished_at?: string | null;
+  /** What the conversation's host requires of the runner (e.g. `zdr`). Only
+   *  set while queued, and only when the requirement is what blocks the turn
+   *  (some runner would take it without one) — so render it as the reason.
+   *  Absent on an older server. */
+  requires?: string[];
   /** Nothing more will happen without someone asking for it. */
   settled: boolean;
   /** Nothing is moving and only a person can change that. The one question a

package/src/chat/turnStatus.test.ts

@@ -186,3 +186,15 @@ describe("turnNotice", () => {
     expect(n?.tone).toBe("warn");
   });
 });
+
+describe("turnNotice, when the conversation requires a runner flag", () => {
+  it("names the missing requirement when unrouted", () => {
+    const n = turnNotice(status({ state: "unrouted", stuck: true, runners: [], claimed_by: null, agent_slug: "ace", requires: ["zdr"] }));
+    expect(n?.text).toContain("ZDR runner");
+  });
+
+  it("names it when its runners are offline", () => {
+    const n = turnNotice(status({ state: "waiting_runner", stuck: true, runners: ["cloud-1"], claimed_by: null, requires: ["zdr"] }));
+    expect(n?.text).toContain("ZDR");
+  });
+});

package/src/chat/turnStatus.ts

@@ -114,14 +114,16 @@ export function turnNotice(
     ? { name: status.cloud_runner, id: status.cloud_runner_id }
     : null;
   const runners = status.runners.join(", ");
+  const need = status.requires?.length ? status.requires.map((r) => r.toUpperCase()).join(", ") : "";
   switch (status.state) {
     case "waiting_runner":
       return {
         tone: "warn",
         // Names the box, because the fix is physical: go and open it.
-        text: runners
+        text: (runners
           ? `Queued — ${runners} is offline, so nothing is working on this yet. It runs when the runner is back.`
-          : "Queued — its runner is offline, so nothing is working on this yet.",
+          : "Queued — its runner is offline, so nothing is working on this yet.")
+          + (need ? ` It needs a ${need} runner.` : ""),
         offer,
       };
     case "unrouted":
@@ -129,7 +131,9 @@ export function turnNotice(
         tone: "error",
         // The one state waiting cannot fix, and it has to READ differently
         // from the one waiting can.
-        text: status.agent_slug
+        text: need
+          ? `Queued — this conversation needs a ${need} runner, and none of ${status.agent_slug ?? "its agent"}'s runners is declared ${need}.`
+          : status.agent_slug
           ? `Queued, but no runner is set up to run ${status.agent_slug} — nothing will pick this up until its routing is fixed.`
           : "Queued, but no runner is set up to run this — nothing will pick it up until its routing is fixed.",
         offer,

package/src/chat/TypingRows.test.tsx

@@ -1,33 +0,0 @@
-// @vitest-environment jsdom
-import { cleanup, render, screen } from "@testing-library/react";
-import { afterEach, describe, expect, it } from "vitest";
-
-import { TypingRows } from "./TypingRows";
-import type { PeerDraft } from "./protocol";
-
-afterEach(cleanup);
-
-describe("TypingRows", () => {
-  it("renders nothing when nobody is typing", () => {
-    const { container } = render(<TypingRows peers={[]} />);
-    expect(container.firstChild).toBeNull();
-  });
-
-  it("shows a peer's live words when a body is present", () => {
-    const peers: PeerDraft[] = [{ author: { id: 2, name: "Bo B" }, body: "hello there", at: null }];
-    render(<TypingRows peers={peers} />);
-    const row = screen.getByTestId("typing-row");
-    expect(row.textContent).toContain("Bo B");
-    expect(row.textContent).toContain("hello there");
-    expect(row.textContent).toContain("is typing:");
-  });
-
-  it("renders 'is typing…' with no words when the body is withheld", () => {
-    const peers: PeerDraft[] = [{ author: { id: 2, name: "Bo B" }, body: "", at: null, typing: true }];
-    render(<TypingRows peers={peers} />);
-    const row = screen.getByTestId("typing-row");
-    expect(row.textContent).toContain("Bo B");
-    expect(row.textContent).toContain("is typing…");
-    expect(row.textContent).not.toContain("is typing:");
-  });
-});