canopy-ui 0.18.0 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canopy-ui",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "license": "BSD-3-Clause",
   "type": "module",
   "repository": {

package/src/chat/ChatPanel.tsx

@@ -1,4 +1,4 @@
-import { useMemo, type ReactNode } from "react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
 
 import type { PeerDraft, SessionState, TypingVisibility } from "./protocol";
 import type { RenderMarkdown } from "./MessageItem";
@@ -145,7 +145,14 @@ export function ChatPanel({
   // with no banner of their own, which is exactly the embedded widget.
   const latestMessageAt =
     state.messages.length > 0 ? state.messages[state.messages.length - 1].created_at : null;
-  const notice = banner ? null : turnNotice(status, { latestMessageAt });
+  // A clock only while a turn is working: the quiet notice is about time passing
+  // with NOTHING arriving, so no frame would ever re-render it.
+  const now = useNow(status?.state === "working" ? 30_000 : null);
+  // A reply streaming in right now is something coming back, however old its row.
+  const notice = banner ? null : turnNotice(status, {
+    latestMessageAt: inFlightMessage ? new Date(now).toISOString() : latestMessageAt,
+    now,
+  });
 
   // Sticky-bottom scroll: dep changes on (a) new message arrival and (b)
   // streaming text growth on the last message. length-only (cheap) instead
@@ -284,3 +291,16 @@ export function ChatPanel({
     </AppHostContext.Provider>
   );
 }
+
+
+/** `Date.now()`, re-read every `everyMs` — or frozen when `everyMs` is null. */
+function useNow(everyMs: number | null): number {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (everyMs == null) return;
+    setNow(Date.now());
+    const id = setInterval(() => setNow(Date.now()), everyMs);
+    return () => clearInterval(id);
+  }, [everyMs]);
+  return now;
+}

package/src/chat/MessageItem.test.tsx

@@ -0,0 +1,34 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+
+import type { Message } from "./protocol";
+import { MessageItem } from "./MessageItem";
+
+function userRow(content: Record<string, unknown>): Message {
+  return {
+    id: "1", turn_index: 1, role: "user", content,
+    plaintext: "This session is being continued from a previous conversation…",
+    status: "complete", error_detail: null, started_at: null, completed_at: null,
+    created_at: "2026-10-17T12:35:14Z",
+  };
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("MessageItem — a compaction summary", () => {
+  it("renders collapsed as context, not as a line the person typed", () => {
+    render(<MessageItem message={userRow({ record: { compact_summary: true } })} />);
+    const row = screen.getByTestId("compaction-summary-row");
+    expect(row.tagName).toBe("DETAILS");
+    expect(row.hasAttribute("open")).toBe(false);
+    expect(row.textContent).toContain("Context compacted");
+  });
+
+  it("leaves an ordinary typed line as a bubble", () => {
+    render(<MessageItem message={userRow({ record: {} })} />);
+    expect(screen.queryByTestId("compaction-summary-row")).toBeNull();
+  });
+});

package/src/chat/MessageItem.tsx

@@ -42,6 +42,14 @@ function otherAuthorOf(
   return isMine(message.author, currentUserId, currentContactId) ? null : message.author;
 }
 
+/** A `user` row Claude Code wrote, not a person: the summary it leaves when it
+ *  compacts the conversation. The runner keeps the transcript record's own
+ *  flags on the row as `content.record` (`canopy_transcript.record_flags`). */
+function isCompactionSummary(message: Message): boolean {
+  const record = message.content?.record as Record<string, unknown> | undefined;
+  return message.role === "user" && Boolean(record?.compact_summary);
+}
+
 /** Count visible lines for the "▸ System context (N lines)" header. */
 function countLines(text: string): number {
   if (!text) return 0;
@@ -137,6 +145,20 @@ export function MessageItem({
       />
     );
   }
+  // Same treatment for a compaction summary: it sits on the human's side of the
+  // transcript, but nobody typed it — as a user bubble it read as the person
+  // pasting a wall of text.
+  if (isCompactionSummary(message)) {
+    return (
+      <SystemSeedRow
+        message={message}
+        forceOpen={forceToolOpen}
+        renderMarkdown={renderMarkdown}
+        label="Context compacted"
+        testId="compaction-summary-row"
+      />
+    );
+  }
 
   const otherAuthor = otherAuthorOf(message, currentUserId, currentContactId);
   // A teammate's line sits on the agent's side of the column, so it needs its
@@ -210,10 +232,14 @@ function SystemSeedRow({
   message,
   forceOpen,
   renderMarkdown,
+  label = "System context",
+  testId = "system-seed-row",
 }: {
   message: Message;
   forceOpen: boolean | undefined;
   renderMarkdown: RenderMarkdown;
+  label?: string;
+  testId?: string;
 }) {
   const text = message.plaintext;
   const lineCount = countLines(text);
@@ -221,13 +247,13 @@ function SystemSeedRow({
   return (
     <details
       className="group my-2 mr-auto max-w-[80%] rounded-2xl border border-border bg-muted/40 px-3 py-1.5 text-sm"
-      data-testid="system-seed-row"
+      data-testid={testId}
       {...(openProp !== undefined ? { open: openProp } : {})}
     >
       <summary className="flex cursor-pointer items-center gap-1.5 text-muted-foreground hover:text-foreground select-none list-none [&::-webkit-details-marker]:hidden">
         <ChevronRight className="h-3.5 w-3.5 transition-transform group-open:rotate-90" />
         <span className="text-xs font-medium uppercase tracking-wide">
-          System context
+          {label}
         </span>
         {lineCount > 0 && (
           <span className="text-xs text-muted-foreground/70">

package/src/chat/agui.ts

@@ -122,6 +122,9 @@ export function fromAgui(frame: AguiFrame): WsEvent[] {
             // canopy's only chance to say (spec 2026-09-26). Absent when the
             // server sent none (an agent/scheduled/email turn's own send).
             author: m.author as MessageAuthor | undefined,
+            // The transcript record's provenance — the `content.record` a
+            // history row carries — so a compaction summary is known live.
+            ...(m.record ? { record: m.record as Record<string, unknown> } : {}),
           },
         },
       ];

package/src/chat/protocol.ts

@@ -244,6 +244,11 @@ export interface TurnStatus {
    *  (some runner would take it without one) — so render it as the reason.
    *  Absent on an older server. */
   requires?: string[];
+  /** For `working`: when its runner took it, and when anything last came back
+   *  from it (reply text, a tool call — or the claim itself). ISO. Absent on an
+   *  older server. */
+  claimed_at?: string | null;
+  last_progress_at?: string | null;
   /** 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
@@ -356,7 +361,7 @@ export type WsEvent =
   // this row to the server's queued-turn projection, and a contact's or
   // widget's own send rendered twice: once as their bubble, once as a "queued"
   // placeholder for the same send.
-  | { event: "chat.user_message"; data: { message_id: string; turn_index: number; plaintext: string; author?: MessageAuthor | null; client_id?: string } }
+  | { event: "chat.user_message"; data: { message_id: string; turn_index: number; plaintext: string; author?: MessageAuthor | null; client_id?: string; record?: Record<string, unknown> } }
   | { event: "chat.delta"; data: { message_id: string; text: string } }
   // `turn_index` is the row's transcript ordinal — the same key the persisted
   // Message carries, so a live tool row sorts into exactly the position it will

package/src/chat/sessionReducer.test.ts

@@ -551,6 +551,15 @@ describe("sessionReducer — a web send arriving twice", () => {
     expect(next.messages).toHaveLength(10)
   })
 
+  it("keeps the record's provenance, so a compaction summary is known live", () => {
+    const next = sessionReducer(makeState(), {
+      event: "chat.user_message",
+      data: { message_id: "9", turn_index: 9, plaintext: "This session is being continued…",
+              record: { compact_summary: true } },
+    } as WsEvent)
+    expect(next.messages[0].content.record).toEqual({ compact_summary: true })
+  })
+
   it("an empty-text frame never collapses onto another empty row", () => {
     const seeded = makeState({
       messages: [makeMessage({ id: "1", turn_index: 1, role: "user", plaintext: "" })],

package/src/chat/sessionReducer.ts

@@ -201,6 +201,9 @@ export function sessionReducer(prev: SessionState, frame: WsEvent): SessionState
                   // 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,
+                  ...(frame.data.record
+                    ? { content: { ...m.content, record: frame.data.record } }
+                    : {}),
                   // The agent read it, so a pending or unconfirmed row is sent.
                   ...(m.role === "user" ? { status: "complete" as const, error_detail: null } : {}),
                 }
@@ -216,9 +219,11 @@ export function sessionReducer(prev: SessionState, frame: WsEvent): SessionState
         // `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 },
+        content: {
+          text: frame.data.plaintext,
+          ...(frame.data.client_id ? { client_id: frame.data.client_id } : {}),
+          ...(frame.data.record ? { record: frame.data.record } : {}),
+        },
         plaintext: frame.data.plaintext,
         status: "complete",
         error_detail: null,

package/src/chat/turnStatus.test.ts

@@ -227,3 +227,45 @@ describe("turnNotice, when the conversation requires a runner flag", () => {
     expect(n?.text).toContain("ZDR");
   });
 });
+
+describe("turnNotice, when a working turn goes quiet", () => {
+  // 2026-10-17: a box whose token was revoked took four turns and could report
+  // nothing back; each read "Thinking on cloud-ec2-2…" until its lease ran out.
+  const claimed = "2026-10-17T15:45:00Z";
+  const at = (min: number) => Date.parse(claimed) + min * 60_000;
+  const working = (over: Partial<TurnStatus> = {}) =>
+    status({ state: "working", claimed_by: "cloud-ec2-2", runners: ["cloud-ec2-2"],
+             claimed_at: claimed, last_progress_at: claimed, ...over });
+
+  it("says nothing while it is still fresh", () => {
+    expect(turnNotice(working(), { now: at(4) })).toBeNull();
+  });
+
+  it("names the box and how long ago it took the turn when nothing came back", () => {
+    expect(turnNotice(working(), { now: at(6) })).toEqual({
+      tone: "warn",
+      text: "cloud-ec2-2 took this 6m ago and nothing has come back from it since.",
+      offer: null,
+    });
+  });
+
+  it("counts from the last thing that came back once something has", () => {
+    const st = working({ last_progress_at: "2026-10-17T15:50:00Z" });
+    expect(turnNotice(st, { now: at(9) })).toBeNull();
+    expect(turnNotice(st, { now: at(12) })?.text).toBe("Nothing new from cloud-ec2-2 for 7m.");
+  });
+
+  it("a message that streamed onto the screen counts as something coming back", () => {
+    expect(turnNotice(working(), { now: at(8), latestMessageAt: "2026-10-17T15:50:00Z" })).toBeNull();
+  });
+
+  it("never speaks over a dialog the agent is waiting on, or for an older server", () => {
+    expect(turnNotice(working({ menu_pending: true }), { now: at(30) })).toBeNull();
+    expect(turnNotice(working({ claimed_at: undefined }), { now: at(30) })).toBeNull();
+  });
+
+  it("reads hours as hours", () => {
+    expect(turnNotice(working(), { now: at(65) })?.text).toBe(
+      "cloud-ec2-2 took this 1h 5m ago and nothing has come back from it since.");
+  });
+});

package/src/chat/turnStatus.ts

@@ -116,11 +116,55 @@ function formatWhen(iso: string): string {
     : d.toLocaleString(undefined, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
 }
 
+/** How long a working turn may say nothing before the kit says so. Long enough
+ *  that a model thinking through a hard step is not called out; short enough
+ *  that a box which took the turn and went silent is not "Thinking…" for the
+ *  rest of its lease. */
+export const QUIET_AFTER_MS = 5 * 60 * 1000;
+
+/** "6m" / "1h 5m" — a wait, not a timestamp. */
+function waited(ms: number): string {
+  const mins = Math.max(1, Math.round(ms / 60000));
+  if (mins < 60) return `${mins}m`;
+  const h = Math.floor(mins / 60);
+  return mins % 60 ? `${h}h ${mins % 60}m` : `${h}h`;
+}
+
+/**
+ * A working turn nothing has come back from in a while — in facts, not a verdict:
+ * who took it, and for how long it has been quiet. On 2026-10-17 a box whose
+ * token had been revoked claimed four turns and could report nothing; each one
+ * read "Thinking on cloud-ec2-2…" until its lease ran out.
+ *
+ * "Back" is the newer of the server's `last_progress_at` (a ledger event) and the
+ * newest message on screen, so a transcript row that streamed in counts too.
+ */
+function quietNotice(status: TurnStatus, latestMessageAt: string | null | undefined,
+                     now: number): TurnNotice | null {
+  if (status.state !== "working" || status.menu_pending || !status.claimed_at) return null;
+  const claimed = Date.parse(status.claimed_at);
+  if (Number.isNaN(claimed)) return null;
+  let back = status.last_progress_at ? Date.parse(status.last_progress_at) : claimed;
+  const seen = latestMessageAt ? Date.parse(latestMessageAt) : NaN;
+  if (!Number.isNaN(seen) && seen > back) back = seen;
+  if (now - back < QUIET_AFTER_MS) return null;
+  const who = status.claimed_by ?? "its runner";
+  return {
+    tone: "warn",
+    text: back <= claimed
+      ? `${who} took this ${waited(now - claimed)} ago and nothing has come back from it since.`
+      : `Nothing new from ${who} for ${waited(now - back)}.`,
+    offer: null,
+  };
+}
+
 export function turnNotice(
   status?: TurnStatus | null,
-  { latestMessageAt }: { latestMessageAt?: string | null } = {},
+  { latestMessageAt, now = Date.now() }: { latestMessageAt?: string | null; now?: number } = {},
 ): TurnNotice | null {
   if (!status) return null;
+  const quiet = quietNotice(status, latestMessageAt, now);
+  if (quiet) return quiet;
   if (status.settled && status.finished_at && latestMessageAt
       && Date.parse(latestMessageAt) > Date.parse(status.finished_at)) {
     return null;