canopy-ui 0.2.0 → 0.4.0

package/src/chat/pairToolMessages.test.ts

@@ -0,0 +1,208 @@
+import { describe, expect, it } from "vitest";
+
+import type { Message } from "./protocol";
+import {
+  deriveToolStatus,
+  pairToolMessages,
+  toolDisplayName,
+  toolPreview,
+} from "./pairToolMessages";
+
+let seq = 0;
+function msg(
+  partial: Partial<Message> & { id: string; role: Message["role"] },
+): Message {
+  return {
+    turn_index: seq++,
+    content: {},
+    plaintext: "",
+    status: "complete",
+    error_detail: null,
+    started_at: null,
+    completed_at: null,
+    created_at: "2026-05-13T00:00:00Z",
+    ...partial,
+  };
+}
+
+describe("pairToolMessages", () => {
+  it("pairs consecutive tool_use + tool_result by id/tool_use_id", () => {
+    const rows = pairToolMessages([
+      msg({ id: "1", role: "user", plaintext: "hi" }),
+      msg({
+        id: "2",
+        role: "tool_use",
+        content: { id: "t1", name: "Bash", input: { command: "ls" } },
+      }),
+      msg({
+        id: "3",
+        role: "tool_result",
+        content: { tool_use_id: "t1" },
+        plaintext: "out",
+      }),
+      msg({ id: "4", role: "assistant", plaintext: "done" }),
+    ]);
+    expect(rows).toHaveLength(3);
+    expect(rows[0].kind).toBe("message");
+    expect(rows[1].kind).toBe("tool_pair");
+    if (rows[1].kind === "tool_pair") {
+      expect(rows[1].use.id).toBe("2");
+      expect(rows[1].result?.id).toBe("3");
+    }
+    expect(rows[2].kind).toBe("message");
+  });
+
+  it("pairs tool_use with a later non-adjacent tool_result", () => {
+    const rows = pairToolMessages([
+      msg({ id: "1", role: "tool_use", content: { id: "a", name: "X" } }),
+      msg({ id: "2", role: "tool_use", content: { id: "b", name: "Y" } }),
+      msg({ id: "3", role: "tool_result", content: { tool_use_id: "a" } }),
+      msg({ id: "4", role: "tool_result", content: { tool_use_id: "b" } }),
+    ]);
+    expect(rows).toHaveLength(2);
+    expect(rows[0].kind).toBe("tool_pair");
+    expect(rows[1].kind).toBe("tool_pair");
+    if (rows[0].kind === "tool_pair" && rows[1].kind === "tool_pair") {
+      expect(rows[0].use.id).toBe("1");
+      expect(rows[0].result?.id).toBe("3");
+      expect(rows[1].use.id).toBe("2");
+      expect(rows[1].result?.id).toBe("4");
+    }
+  });
+
+  it("leaves an in-flight tool_use with null result so UI can show pending", () => {
+    const rows = pairToolMessages([
+      msg({ id: "1", role: "tool_use", content: { id: "t1", name: "Bash" } }),
+    ]);
+    expect(rows).toHaveLength(1);
+    expect(rows[0].kind).toBe("tool_pair");
+    if (rows[0].kind === "tool_pair") {
+      expect(rows[0].result).toBeNull();
+    }
+  });
+
+  it("falls back to standalone when a tool_result has no matching use", () => {
+    const rows = pairToolMessages([
+      msg({ id: "1", role: "tool_result", content: { tool_use_id: "ghost" } }),
+    ]);
+    expect(rows).toHaveLength(1);
+    expect(rows[0].kind).toBe("message");
+  });
+
+  it("doesn't lose tool calls in long sessions", () => {
+    const msgs: Message[] = [];
+    for (let i = 0; i < 44; i++) {
+      msgs.push(
+        msg({
+          id: `${i * 2 + 1}`,
+          role: "tool_use",
+          content: { id: `t${i}`, name: "Bash" },
+        }),
+      );
+      if (i < 42) {
+        msgs.push(
+          msg({
+            id: `${i * 2 + 2}`,
+            role: "tool_result",
+            content: { tool_use_id: `t${i}` },
+          }),
+        );
+      }
+    }
+    const rows = pairToolMessages(msgs);
+    expect(rows).toHaveLength(44);
+    expect(rows.filter((r) => r.kind === "tool_pair")).toHaveLength(44);
+    // First 42 paired, last 2 pending.
+    const pending = rows.filter(
+      (r) => r.kind === "tool_pair" && r.result === null,
+    );
+    expect(pending).toHaveLength(2);
+  });
+});
+
+describe("deriveToolStatus", () => {
+  it("returns pending when result is missing", () => {
+    const use = msg({ id: "1", role: "tool_use" });
+    expect(deriveToolStatus(use, null).kind).toBe("pending");
+  });
+
+  it("returns error when result is in error status", () => {
+    const use = msg({ id: "1", role: "tool_use" });
+    const result = msg({ id: "2", role: "tool_result", status: "error" });
+    expect(deriveToolStatus(use, result).kind).toBe("error");
+  });
+
+  it("sniffs error-like result content", () => {
+    const use = msg({ id: "1", role: "tool_use" });
+    const result = msg({
+      id: "2",
+      role: "tool_result",
+      plaintext: "Error: file not found",
+    });
+    expect(deriveToolStatus(use, result).kind).toBe("error");
+  });
+
+  it("returns success on a clean result", () => {
+    const use = msg({ id: "1", role: "tool_use" });
+    const result = msg({ id: "2", role: "tool_result", plaintext: "ok" });
+    expect(deriveToolStatus(use, result).kind).toBe("success");
+  });
+});
+
+describe("toolPreview / toolDisplayName", () => {
+  it("shows the first line of a Bash command", () => {
+    const use = msg({
+      id: "1",
+      role: "tool_use",
+      content: {
+        name: "Bash",
+        input: { command: "ls -la /tmp\n# more after newline" },
+      },
+    });
+    expect(toolPreview(use, null)).toBe("ls -la /tmp");
+  });
+
+  it("shows file_path for Read/Write/Edit", () => {
+    for (const name of ["Read", "Write", "Edit"]) {
+      const use = msg({
+        id: "1",
+        role: "tool_use",
+        content: { name, input: { file_path: "/a/b.txt" } },
+      });
+      expect(toolPreview(use, null)).toBe("/a/b.txt");
+    }
+  });
+
+  it("shows the todo count for TodoWrite", () => {
+    const use = msg({
+      id: "1",
+      role: "tool_use",
+      content: {
+        name: "TodoWrite",
+        input: { todos: [{}, {}, {}] },
+      },
+    });
+    expect(toolPreview(use, null)).toBe("3 todos");
+  });
+
+  it("shows the skill name for Skill", () => {
+    const use = msg({
+      id: "1",
+      role: "tool_use",
+      content: { name: "Skill", input: { skill: "ace:run" } },
+    });
+    expect(toolPreview(use, null)).toBe("ace:run");
+  });
+
+  it("strips the mcp prefix for MCP tools", () => {
+    const use = msg({
+      id: "1",
+      role: "tool_use",
+      content: {
+        name: "mcp__plugin_ace_ace-gdrive__drive_create_file",
+        input: {},
+      },
+    });
+    expect(toolDisplayName(use)).toBe("drive_create_file");
+  });
+});

package/src/chat/pairToolMessages.ts

@@ -0,0 +1,162 @@
+import type { Message } from "./protocol";
+
+/**
+ * A renderable row in the chat: either a single message (user / assistant /
+ * standalone tool, etc.) or a paired tool_use + tool_result.
+ *
+ * Pairing rule: a ``tool_use`` row is paired with the FIRST subsequent
+ * ``tool_result`` whose ``content.tool_use_id`` matches the ``tool_use``'s
+ * ``content.id``. If no matching result exists yet (the turn is still
+ * streaming), the row is rendered as a tool-pair with ``result === null``
+ * — UI shows that as the "pending" state.
+ *
+ * Unpaired ``tool_result`` rows (no preceding ``tool_use`` with a matching
+ * id — shouldn't happen in practice, but defend) fall through as standalone
+ * messages so we never silently drop content.
+ */
+export type ChatRow =
+  | { kind: "message"; message: Message; key: string }
+  | { kind: "tool_pair"; use: Message; result: Message | null; key: string };
+
+function toolUseId(message: Message): string | null {
+  const content = message.content as Record<string, unknown> | undefined;
+  const id = content?.id;
+  return typeof id === "string" ? id : null;
+}
+
+function toolResultId(message: Message): string | null {
+  const content = message.content as Record<string, unknown> | undefined;
+  const id = content?.tool_use_id;
+  return typeof id === "string" ? id : null;
+}
+
+export function pairToolMessages(messages: Message[]): ChatRow[] {
+  const rows: ChatRow[] = [];
+  // Map of tool_use_id → index into rows[] for that pair. Lets a tool_result
+  // arriving later in the stream slot itself into the existing pair row.
+  const pendingByToolId = new Map<string, number>();
+
+  for (const m of messages) {
+    if (m.role === "tool_use") {
+      const id = toolUseId(m);
+      const row: ChatRow = {
+        kind: "tool_pair",
+        use: m,
+        result: null,
+        key: `pair-${m.id}`,
+      };
+      rows.push(row);
+      if (id !== null) {
+        pendingByToolId.set(id, rows.length - 1);
+      }
+      continue;
+    }
+    if (m.role === "tool_result") {
+      const id = toolResultId(m);
+      if (id !== null) {
+        const idx = pendingByToolId.get(id);
+        if (idx !== undefined) {
+          const row = rows[idx];
+          if (row.kind === "tool_pair") {
+            rows[idx] = { ...row, result: m };
+            pendingByToolId.delete(id);
+            continue;
+          }
+        }
+      }
+      // Fallthrough: no preceding tool_use match — show standalone so
+      // content isn't silently dropped.
+      rows.push({ kind: "message", message: m, key: `msg-${m.id}` });
+      continue;
+    }
+    rows.push({ kind: "message", message: m, key: `msg-${m.id}` });
+  }
+  return rows;
+}
+
+export interface ToolCallStatus {
+  kind: "success" | "error" | "pending";
+  label: string;
+}
+
+/** Derive a status badge for a paired tool row. */
+export function deriveToolStatus(
+  use: Message,
+  result: Message | null,
+): ToolCallStatus {
+  if (result === null) {
+    return { kind: "pending", label: "running…" };
+  }
+  if (result.status === "error" || use.status === "error") {
+    return { kind: "error", label: "error" };
+  }
+  // Some MCP servers signal failure in the result content rather than
+  // setting an HTTP-style status — sniff for the common "Error" / "error"
+  // prefixes so the badge reflects reality without server changes.
+  const head = (result.plaintext || "").trim().slice(0, 80).toLowerCase();
+  if (head.startsWith("error") || head.startsWith("traceback")) {
+    return { kind: "error", label: "error" };
+  }
+  return { kind: "success", label: "ok" };
+}
+
+/** One-line summary for the collapsed tool-call header. */
+export function toolPreview(use: Message, result: Message | null): string {
+  const name = String(
+    (use.content as { name?: unknown } | undefined)?.name ?? "tool",
+  );
+  // Bash → command text; everything else → first 80 chars of result body.
+  const input = (use.content as { input?: Record<string, unknown> } | undefined)
+    ?.input;
+  if (name === "Bash" && input && typeof input.command === "string") {
+    return input.command.trim().split("\n")[0]?.slice(0, 100) ?? "";
+  }
+  if (name === "Write" && input && typeof input.file_path === "string") {
+    return input.file_path;
+  }
+  if (name === "Read" && input && typeof input.file_path === "string") {
+    return input.file_path;
+  }
+  if (name === "Edit" && input && typeof input.file_path === "string") {
+    return input.file_path;
+  }
+  if (name === "TodoWrite") {
+    const todos = (input as { todos?: unknown[] } | undefined)?.todos;
+    if (Array.isArray(todos)) {
+      return `${todos.length} todo${todos.length === 1 ? "" : "s"}`;
+    }
+  }
+  // Skill / Agent dispatches — show what's being dispatched.
+  if (name === "Skill" && input && typeof input.skill === "string") {
+    return input.skill;
+  }
+  if (name === "Agent") {
+    const desc = (input as { description?: string } | undefined)?.description;
+    if (typeof desc === "string" && desc) return desc;
+    const sub = (input as { subagent_type?: string } | undefined)
+      ?.subagent_type;
+    if (typeof sub === "string" && sub) return sub;
+  }
+  // MCP tools: the post-`__` segment is the most informative part.
+  if (name.startsWith("mcp__")) {
+    const parts = name.split("__");
+    const tail = parts[parts.length - 1] ?? name;
+    return tail;
+  }
+  // Default: a peek at the result body so the user can scan the call
+  // outcome without expanding every row.
+  return (result?.plaintext || "").split("\n")[0]?.slice(0, 100) ?? "";
+}
+
+/** Short display label for the tool name in the collapsed header. */
+export function toolDisplayName(use: Message): string {
+  const name = String(
+    (use.content as { name?: unknown } | undefined)?.name ?? "tool",
+  );
+  if (name.startsWith("mcp__")) {
+    // mcp__plugin_ace_ace-gdrive__drive_create_file → "drive_create_file"
+    const parts = name.split("__");
+    return parts[parts.length - 1] ?? name;
+  }
+  return name;
+}

package/src/chat/protocol.ts

@@ -0,0 +1,99 @@
+/**
+ * protocol.ts — the canonical chat WebSocket protocol (WsAction / WsEvent) and
+ * the session/message/draft/participant shapes the socket carries.
+ *
+ * Ported from ace-web's `api/types.ws.ts`. The wire contract is IDENTICAL to
+ * ace's EXCEPT that **all message/draft ids are strings** (canopy sends string
+ * PKs) — see `apps/chat/serializers.py` + `apps/chat/consumers.py`.
+ *
+ * This module is dependency-free (types only) so a vitest run doesn't pull any
+ * DOM/runtime deps.
+ */
+
+// ---------------------------------------------------------------------------
+// Core enum aliases
+// ---------------------------------------------------------------------------
+
+export type MessageStatus = "pending" | "streaming" | "complete" | "error";
+export type MessageRole =
+  | "user"
+  | "assistant"
+  | "system"
+  | "tool_use"
+  | "tool_result";
+
+// ---------------------------------------------------------------------------
+// Session + message shapes (the `session.state` snapshot payload)
+// ---------------------------------------------------------------------------
+
+export interface Message {
+  /** String PK (canopy sends `str(msg.pk)`), or a synthetic stream id. */
+  id: string;
+  turn_index: number;
+  role: MessageRole;
+  content: Record<string, unknown>;
+  plaintext: string;
+  status: MessageStatus;
+  error_detail: string | null;
+  started_at: string | null;
+  completed_at: string | null;
+  created_at: string;
+}
+
+export interface Draft {
+  /** String PK (canopy sends `str(draft.pk)`). */
+  id: string;
+  slot: "next" | "queued";
+  status: "open" | "sent" | "discarded";
+  body: string;
+  version: number;
+  last_editor: number;
+  last_edit_at: string;
+}
+
+export interface Participant {
+  user_id: number;
+  email: string;
+  display_name: string;
+  role: "owner" | "editor" | "viewer";
+  joined_at: string | null;
+  last_seen_at: string | null;
+}
+
+export interface SessionState {
+  messages: Message[];
+  active_draft: Draft | null;
+  participants: Participant[];
+  presence_user_ids: number[];
+  current_user_id: number;
+}
+
+// ---------------------------------------------------------------------------
+// WebSocket protocol
+// ---------------------------------------------------------------------------
+
+export type WsAction =
+  | { action: "chat.send"; data: Record<string, never> }
+  | { action: "chat.stop"; data: { message_id: string } }
+  | { action: "draft.update"; data: { version: number; body: string } }
+  | { action: "draft.take_over"; data: Record<string, never> }
+  | { action: "draft.discard"; data: Record<string, never> }
+  | { action: "presence.heartbeat"; data: Record<string, never> };
+
+export type WsEvent =
+  | { event: "session.state"; data: SessionState }
+  | { event: "session.error"; data: { code: string; message: string; detail?: unknown } }
+  | { event: "session.title_updated"; data: { title: string } }
+  | { event: "chat.stream_start"; data: { message_id: string; turn_index: number } }
+  | { event: "chat.delta"; data: { message_id: string; text: string } }
+  | { event: "chat.tool_use"; data: { parent_message_id: string | null; tool_message_id: string; block: Record<string, unknown> } }
+  | { event: "chat.tool_result"; data: { parent_message_id: string | null; tool_message_id: string; block: Record<string, unknown> } }
+  | { event: "chat.stream_complete"; data: { message_id: string; plaintext: string } }
+  | { event: "chat.stream_error"; data: { message_id: string; detail: string } }
+  | { event: "chat.stream_cancelled"; data: { message_id: string | null; partial_len: number } }
+  | { event: "draft.updated"; data: Draft }
+  | { event: "draft.lock_changed"; data: { draft_id: string; holder_user_id: number | null; expires_at: number | null } }
+  | { event: "draft.committed"; data: { draft_id: string; user_message_id: string } }
+  | { event: "draft.discarded"; data: { draft_id: string } }
+  | { event: "presence.joined"; data: { user_id: number; email?: string; display_name?: string } }
+  | { event: "presence.left"; data: { user_id: number } };