canopy-ui 0.3.0 → 0.4.0

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 } };

package/src/chat/sessionReducer.test.ts

@@ -0,0 +1,284 @@
+import { describe, expect, it } from "vitest"
+
+import type { Draft, Message, SessionState, WsEvent } from "./protocol"
+import { sessionReducer } from "./sessionReducer"
+
+const baseDraft: Draft = {
+  id: "d1",
+  slot: "next",
+  status: "open",
+  body: "",
+  version: 0,
+  last_editor: 0,
+  last_edit_at: "",
+}
+
+function makeState(overrides: Partial<SessionState> = {}): SessionState {
+  return {
+    messages: [],
+    active_draft: null,
+    participants: [],
+    presence_user_ids: [],
+    current_user_id: 0,
+    ...overrides,
+  }
+}
+
+function makeMessage(overrides: Partial<Message> = {}): Message {
+  return {
+    id: "1",
+    turn_index: 1,
+    role: "assistant",
+    content: {},
+    plaintext: "",
+    status: "pending",
+    error_detail: null,
+    started_at: null,
+    completed_at: null,
+    created_at: new Date().toISOString(),
+    ...overrides,
+  }
+}
+
+describe("sessionReducer — chat stream", () => {
+  it("session.state replaces the whole state", () => {
+    const prev = makeState({ messages: [makeMessage()] })
+    const replacement = makeState({ current_user_id: 42 })
+    const next = sessionReducer(prev, {
+      event: "session.state",
+      data: replacement,
+    } as WsEvent)
+    expect(next).toBe(replacement)
+  })
+
+  it("chat.stream_start flips a matching message to streaming", () => {
+    const m = makeMessage({ id: "7", status: "pending" })
+    const prev = makeState({ messages: [m] })
+    const next = sessionReducer(prev, {
+      event: "chat.stream_start",
+      data: { message_id: "7", turn_index: 3 },
+    } as WsEvent)
+    expect(next.messages).toHaveLength(1)
+    expect(next.messages[0].status).toBe("streaming")
+  })
+
+  it("chat.stream_start for an unknown id CREATES the assistant message (upsert)", () => {
+    const m = makeMessage({ id: "7", role: "user", status: "complete" })
+    const prev = makeState({ messages: [m] })
+    const next = sessionReducer(prev, {
+      event: "chat.stream_start",
+      data: { message_id: "99", turn_index: 5 },
+    } as WsEvent)
+    expect(next.messages).toHaveLength(2)
+    expect(next.messages[1]).toMatchObject({
+      id: "99",
+      role: "assistant",
+      status: "streaming",
+      plaintext: "",
+      turn_index: 5,
+    })
+  })
+
+  it("chat.delta appends text to plaintext", () => {
+    const m = makeMessage({ id: "7", plaintext: "Hello" })
+    const prev = makeState({ messages: [m] })
+    const next = sessionReducer(prev, {
+      event: "chat.delta",
+      data: { message_id: "7", text: " world" },
+    } as WsEvent)
+    expect(next.messages[0].plaintext).toBe("Hello world")
+  })
+
+  it("chat.stream_complete replaces plaintext and marks complete", () => {
+    const m = makeMessage({ id: "7", plaintext: "stale partial", status: "streaming" })
+    const prev = makeState({ messages: [m] })
+    const next = sessionReducer(prev, {
+      event: "chat.stream_complete",
+      data: { message_id: "7", plaintext: "final answer" },
+    } as WsEvent)
+    expect(next.messages[0].plaintext).toBe("final answer")
+    expect(next.messages[0].status).toBe("complete")
+  })
+
+  it("chat.stream_error sets error_detail and status=error", () => {
+    const m = makeMessage({ id: "7", status: "streaming" })
+    const prev = makeState({ messages: [m] })
+    const next = sessionReducer(prev, {
+      event: "chat.stream_error",
+      data: { message_id: "7", detail: "cancelled" },
+    } as WsEvent)
+    expect(next.messages[0].status).toBe("error")
+    expect(next.messages[0].error_detail).toBe("cancelled")
+  })
+
+  it("chat.stream_cancelled stamps a partial-length detail", () => {
+    const m = makeMessage({ id: "7", status: "streaming" })
+    const prev = makeState({ messages: [m] })
+    const next = sessionReducer(prev, {
+      event: "chat.stream_cancelled",
+      data: { message_id: "7", partial_len: 142 },
+    } as WsEvent)
+    expect(next.messages[0].status).toBe("error")
+    expect(next.messages[0].error_detail).toMatch(/142/)
+  })
+
+  it("chat.tool_use is a no-op", () => {
+    const prev = makeState({ messages: [makeMessage()] })
+    const next = sessionReducer(prev, {
+      event: "chat.tool_use",
+      data: { parent_message_id: null, tool_message_id: "t1", block: {} },
+    } as WsEvent)
+    expect(next).toBe(prev)
+  })
+})
+
+describe("sessionReducer — drafts", () => {
+  it("draft.updated keeps local body when echo's last_editor matches current_user_id", () => {
+    // Echo-suppression: server echo arrives stale relative to the user's
+    // own keystrokes; reducer must keep the local body and only accept
+    // metadata. This is the most subtle branch in the file.
+    const prev = makeState({
+      current_user_id: 5,
+      active_draft: { ...baseDraft, body: "local typing", version: 3 },
+    })
+    const next = sessionReducer(prev, {
+      event: "draft.updated",
+      data: {
+        ...baseDraft,
+        body: "stale server echo",
+        last_editor: 5,
+        version: 3,
+      } as Draft,
+    } as WsEvent)
+    expect(next.active_draft?.body).toBe("local typing")
+    expect(next.active_draft?.version).toBe(3)
+  })
+
+  it("draft.updated accepts the body when another user is editing", () => {
+    const prev = makeState({
+      current_user_id: 5,
+      active_draft: { ...baseDraft, body: "old", last_editor: 7 },
+    })
+    const next = sessionReducer(prev, {
+      event: "draft.updated",
+      data: {
+        ...baseDraft,
+        body: "their text",
+        last_editor: 7,
+        version: 2,
+      } as Draft,
+    } as WsEvent)
+    expect(next.active_draft?.body).toBe("their text")
+  })
+
+  it("draft.committed inserts the optimistic user message and clears the draft body", () => {
+    // canopy adaptation: NO assistant placeholder here (draft.committed has
+    // no assistant id) — only the user message is inserted; the assistant is
+    // upserted later on chat.stream_start.
+    const prev = makeState({
+      active_draft: { ...baseDraft, body: "the prompt" },
+      messages: [makeMessage({ id: "1", turn_index: 1 })],
+    })
+    const next = sessionReducer(prev, {
+      event: "draft.committed",
+      data: { user_message_id: "100", draft_id: "d1" },
+    } as WsEvent)
+    expect(next.messages).toHaveLength(2)
+    expect(next.messages[1]).toMatchObject({
+      id: "100",
+      role: "user",
+      plaintext: "the prompt",
+      turn_index: 2,
+    })
+    // active_draft.body cleared so Enter doesn't re-send the same turn.
+    expect(next.active_draft?.body).toBe("")
+  })
+
+  it("draft.committed then chat.stream_start makes the assistant reply visible", () => {
+    // The load-bearing sequence: commit inserts the user msg, stream_start
+    // upserts the assistant row, delta/complete fill it in.
+    let s = makeState({ active_draft: { ...baseDraft, body: "hi" } })
+    s = sessionReducer(s, {
+      event: "draft.committed",
+      data: { user_message_id: "u1", draft_id: "d1" },
+    } as WsEvent)
+    s = sessionReducer(s, {
+      event: "chat.stream_start",
+      data: { message_id: "a1", turn_index: 2 },
+    } as WsEvent)
+    s = sessionReducer(s, {
+      event: "chat.stream_complete",
+      data: { message_id: "a1", plaintext: "hello there" },
+    } as WsEvent)
+    expect(s.messages.map((m) => m.role)).toEqual(["user", "assistant"])
+    expect(s.messages[1].plaintext).toBe("hello there")
+    expect(s.messages[1].status).toBe("complete")
+  })
+
+  it("draft.discarded clears matching draft body", () => {
+    const prev = makeState({
+      active_draft: { ...baseDraft, id: "d1", body: "draft text" },
+    })
+    const next = sessionReducer(prev, {
+      event: "draft.discarded",
+      data: { draft_id: "d1" },
+    } as WsEvent)
+    expect(next.active_draft?.body).toBe("")
+  })
+})
+
+describe("sessionReducer — presence", () => {
+  it("presence.joined adds a user_id idempotently", () => {
+    const prev = makeState({ presence_user_ids: [1, 2] })
+    const next = sessionReducer(prev, {
+      event: "presence.joined",
+      data: { user_id: 3 },
+    } as WsEvent)
+    expect(next.presence_user_ids.sort()).toEqual([1, 2, 3])
+
+    // Second join is a no-op (Set semantics).
+    const after = sessionReducer(next, {
+      event: "presence.joined",
+      data: { user_id: 3 },
+    } as WsEvent)
+    expect(after.presence_user_ids.filter((id) => id === 3)).toHaveLength(1)
+  })
+
+  it("presence.left filters out the user_id", () => {
+    const prev = makeState({ presence_user_ids: [1, 2, 3] })
+    const next = sessionReducer(prev, {
+      event: "presence.left",
+      data: { user_id: 2 },
+    } as WsEvent)
+    expect(next.presence_user_ids).toEqual([1, 3])
+  })
+})
+
+describe("sessionReducer — session.error draft_version_mismatch", () => {
+  it("rolls active_draft back to the server's reported version + body", () => {
+    const prev = makeState({
+      active_draft: { ...baseDraft, version: 9, body: "stale local" },
+    })
+    const next = sessionReducer(prev, {
+      event: "session.error",
+      data: {
+        message: "version mismatch",
+        code: "draft_version_mismatch",
+        detail: { current_version: 11, current_body: "server body" },
+      },
+    } as WsEvent)
+    expect(next.active_draft?.version).toBe(11)
+    expect(next.active_draft?.body).toBe("server body")
+  })
+
+  it("non-version-mismatch errors are no-ops to state (side-effect handled by hook)", () => {
+    const prev = makeState({
+      active_draft: { ...baseDraft, body: "x" },
+    })
+    const next = sessionReducer(prev, {
+      event: "session.error",
+      data: { message: "something else", code: "other" },
+    } as WsEvent)
+    expect(next).toBe(prev)
+  })
+})