@checkstack/ai-frontend 0.1.0

package/src/lib/chat-state.test.ts

@@ -0,0 +1,213 @@
+import { describe, expect, test } from "bun:test";
+import {
+  appendUserMessage,
+  startAssistantMessage,
+  applyStreamEvent,
+  finishAssistantMessage,
+  type AssistantPart,
+  type ChatMessage,
+} from "./chat-state";
+
+/** Narrow the assistant message's parts to a given kind for terse assertions. */
+function partsOf(msgs: ChatMessage[]): AssistantPart[] {
+  return msgs[0].parts;
+}
+
+describe("chat-state reducer (DOM-free)", () => {
+  test("appendUserMessage adds a non-streaming user message", () => {
+    const msgs = appendUserMessage({ messages: [], id: "u1", text: "hi" });
+    expect(msgs).toHaveLength(1);
+    expect(msgs[0]).toMatchObject({ role: "user", text: "hi", streaming: false });
+  });
+
+  test("text deltas accumulate into a single trailing text part", () => {
+    let msgs = startAssistantMessage({ messages: [], id: "a1" });
+    msgs = applyStreamEvent({ messages: msgs, event: { type: "text-delta", delta: "Hel" } });
+    msgs = applyStreamEvent({ messages: msgs, event: { type: "text-delta", delta: "lo" } });
+    expect(partsOf(msgs)).toEqual([{ kind: "text", text: "Hello" }]);
+    expect(msgs[0].streaming).toBe(true);
+  });
+
+  test("tool-call events are de-duplicated by call id", () => {
+    let msgs = startAssistantMessage({ messages: [], id: "a1" });
+    const event = {
+      type: "tool-call",
+      toolCallId: "c1",
+      toolName: "incident.list",
+    } as const;
+    msgs = applyStreamEvent({ messages: msgs, event });
+    msgs = applyStreamEvent({ messages: msgs, event });
+    expect(partsOf(msgs)).toEqual([
+      { kind: "tool", toolCallId: "c1", toolName: "incident.list", status: "running" },
+    ]);
+  });
+
+  test("a tool result marks its tool part done", () => {
+    let msgs = startAssistantMessage({ messages: [], id: "a1" });
+    msgs = applyStreamEvent({
+      messages: msgs,
+      event: { type: "tool-call", toolCallId: "c1", toolName: "listCapabilities" },
+    });
+    msgs = applyStreamEvent({
+      messages: msgs,
+      event: { type: "tool-result", toolCallId: "c1" },
+    });
+    expect(partsOf(msgs)).toEqual([
+      { kind: "tool", toolCallId: "c1", toolName: "listCapabilities", status: "done" },
+    ]);
+  });
+
+  test("a tool error marks its tool part errored with the message", () => {
+    let msgs = startAssistantMessage({ messages: [], id: "a1" });
+    msgs = applyStreamEvent({
+      messages: msgs,
+      event: { type: "tool-call", toolCallId: "c1", toolName: "listCapabilities" },
+    });
+    msgs = applyStreamEvent({
+      messages: msgs,
+      event: { type: "tool-error", toolCallId: "c1", message: "boom" },
+    });
+    expect(partsOf(msgs)).toEqual([
+      {
+        kind: "tool",
+        toolCallId: "c1",
+        toolName: "listCapabilities",
+        status: "error",
+        errorText: "boom",
+      },
+    ]);
+  });
+
+  test("a tool error with no prior tool-call still surfaces an errored part", () => {
+    let msgs = startAssistantMessage({ messages: [], id: "a1" });
+    msgs = applyStreamEvent({
+      messages: msgs,
+      event: {
+        type: "tool-error",
+        toolCallId: "c1",
+        toolName: "listCapabilities",
+        message: "bad input",
+      },
+    });
+    expect(partsOf(msgs)).toEqual([
+      {
+        kind: "tool",
+        toolCallId: "c1",
+        toolName: "listCapabilities",
+        status: "error",
+        errorText: "bad input",
+      },
+    ]);
+  });
+
+  test("text and tool calls interleave in chronological order", () => {
+    let msgs = startAssistantMessage({ messages: [], id: "a1" });
+    msgs = applyStreamEvent({ messages: msgs, event: { type: "text-delta", delta: "Checking. " } });
+    msgs = applyStreamEvent({
+      messages: msgs,
+      event: { type: "tool-call", toolCallId: "c1", toolName: "listCapabilities" },
+    });
+    msgs = applyStreamEvent({
+      messages: msgs,
+      event: { type: "tool-result", toolCallId: "c1" },
+    });
+    msgs = applyStreamEvent({ messages: msgs, event: { type: "text-delta", delta: "Done." } });
+    expect(partsOf(msgs).map((p) => p.kind)).toEqual(["text", "tool", "text"]);
+    const [first, , third] = partsOf(msgs);
+    expect(first).toEqual({ kind: "text", text: "Checking. " });
+    expect(third).toEqual({ kind: "text", text: "Done." });
+  });
+
+  test("a confirm card replaces its proposing tool part in place", () => {
+    let msgs = startAssistantMessage({ messages: [], id: "a1" });
+    msgs = applyStreamEvent({
+      messages: msgs,
+      event: { type: "tool-call", toolCallId: "c9", toolName: "automation.propose" },
+    });
+    msgs = applyStreamEvent({
+      messages: msgs,
+      event: {
+        type: "confirm-card",
+        toolCallId: "c9",
+        card: {
+          toolName: "automation.propose",
+          effect: "mutate",
+          summary: "s",
+          token: "propose:1.2",
+          payload: {},
+          expiresAt: "2026-06-01T00:10:00Z",
+        },
+      },
+    });
+    expect(partsOf(msgs)).toHaveLength(1);
+    const part = partsOf(msgs)[0];
+    expect(part.kind).toBe("confirm");
+    if (part.kind === "confirm") {
+      expect(part.card.token).toBe("propose:1.2");
+    }
+  });
+
+  test("an auto-applied result replaces its tool part with an applied card", () => {
+    let msgs = startAssistantMessage({ messages: [], id: "a1" });
+    msgs = applyStreamEvent({
+      messages: msgs,
+      event: { type: "tool-call", toolCallId: "c5", toolName: "healthcheck.update" },
+    });
+    msgs = applyStreamEvent({
+      messages: msgs,
+      event: {
+        type: "applied-card",
+        toolCallId: "c5",
+        card: {
+          toolName: "healthcheck.update",
+          summary: "Updated X",
+          result: { id: "hc1" },
+          diff: [{ path: "intervalSeconds", before: 60, after: 30 }],
+        },
+      },
+    });
+    expect(partsOf(msgs)).toHaveLength(1);
+    const part = partsOf(msgs)[0];
+    expect(part.kind).toBe("applied");
+    if (part.kind === "applied") {
+      expect(part.card.diff).toHaveLength(1);
+    }
+  });
+
+  test("done marks the assistant message non-streaming", () => {
+    let msgs = startAssistantMessage({ messages: [], id: "a1" });
+    msgs = applyStreamEvent({ messages: msgs, event: { type: "done" } });
+    expect(msgs[0].streaming).toBe(false);
+  });
+
+  test("an error event appends an error text part and stops streaming", () => {
+    let msgs = startAssistantMessage({ messages: [], id: "a1" });
+    msgs = applyStreamEvent({ messages: msgs, event: { type: "error", message: "boom" } });
+    const part = partsOf(msgs)[0];
+    expect(part).toEqual({ kind: "text", text: "Error: boom" });
+    expect(msgs[0].streaming).toBe(false);
+  });
+
+  test("events never mutate a trailing user message", () => {
+    const base: ChatMessage[] = appendUserMessage({ messages: [], id: "u1", text: "hi" });
+    const after = applyStreamEvent({ messages: base, event: { type: "text-delta", delta: "x" } });
+    expect(after).toBe(base);
+  });
+
+  test("a no-op event returns the same array reference", () => {
+    const msgs = startAssistantMessage({ messages: [], id: "a1" });
+    // tool-result for an unknown call id changes nothing.
+    const after = applyStreamEvent({
+      messages: msgs,
+      event: { type: "tool-result", toolCallId: "missing" },
+    });
+    expect(after).toBe(msgs);
+  });
+
+  test("finishAssistantMessage is idempotent on a finished message", () => {
+    let msgs = startAssistantMessage({ messages: [], id: "a1" });
+    msgs = finishAssistantMessage({ messages: msgs });
+    const again = finishAssistantMessage({ messages: msgs });
+    expect(again).toBe(msgs);
+  });
+});

package/src/lib/chat-state.ts

@@ -0,0 +1,231 @@
+import type { ChatStreamEvent, ConfirmCard, AppliedCard } from "./stream-parser";
+
+/**
+ * One ordered piece of an assistant turn. The model interleaves prose and tool
+ * calls ("let me check the catalog" -> call `listCapabilities` -> "here's what I
+ * found" -> propose), so the turn is an ORDERED list of parts, not a single text
+ * blob plus a flat tool list. Rendering parts in order preserves the visual
+ * breaks between text segments and shows each tool call (and its result/error)
+ * at the point in the turn where it happened.
+ */
+export type AssistantPart =
+  | { kind: "text"; text: string }
+  | {
+      kind: "tool";
+      toolCallId: string;
+      toolName: string;
+      status: "running" | "done" | "error";
+      /** Set when `status` is "error": the tool's failure message. */
+      errorText?: string;
+    }
+  | { kind: "confirm"; toolCallId: string; card: ConfirmCard }
+  | { kind: "applied"; toolCallId: string; card: AppliedCard };
+
+/** A rendered chat message in the UI. */
+export interface ChatMessage {
+  id: string;
+  role: "user" | "assistant";
+  /** User message text (right-aligned bubble). Assistant content is in `parts`. */
+  text: string;
+  /** Ordered assistant content: interleaved text / tool / confirm-card parts. */
+  parts: AssistantPart[];
+  /** A streaming assistant message is still being appended to. */
+  streaming: boolean;
+}
+
+/** Append a user message. */
+export function appendUserMessage({
+  messages,
+  id,
+  text,
+}: {
+  messages: ChatMessage[];
+  id: string;
+  text: string;
+}): ChatMessage[] {
+  return [
+    ...messages,
+    { id, role: "user", text, parts: [], streaming: false },
+  ];
+}
+
+/** Start a new streaming assistant message. */
+export function startAssistantMessage({
+  messages,
+  id,
+}: {
+  messages: ChatMessage[];
+  id: string;
+}): ChatMessage[] {
+  return [
+    ...messages,
+    { id, role: "assistant", text: "", parts: [], streaming: true },
+  ];
+}
+
+/** Append a text delta, merging into the trailing text part when there is one. */
+function appendText(parts: AssistantPart[], delta: string): AssistantPart[] {
+  if (!delta) return parts;
+  const last = parts.at(-1);
+  if (last && last.kind === "text") {
+    return [...parts.slice(0, -1), { ...last, text: last.text + delta }];
+  }
+  return [...parts, { kind: "text", text: delta }];
+}
+
+/** Add a tool part, de-duplicating repeat chunks for the same call id. */
+function upsertTool(
+  parts: AssistantPart[],
+  toolCallId: string,
+  toolName: string,
+): AssistantPart[] {
+  // The SDK emits both `tool-input-start` and `tool-input-available` for one
+  // call; both map to a `tool-call` event, so de-dupe by id.
+  const exists = parts.some((p) => p.kind !== "text" && p.toolCallId === toolCallId);
+  if (exists) return parts;
+  return [...parts, { kind: "tool", toolCallId, toolName, status: "running" }];
+}
+
+/** Mark a tool part done (its result arrived without an error). */
+function markToolDone(
+  parts: AssistantPart[],
+  toolCallId: string,
+): AssistantPart[] {
+  let changed = false;
+  const next = parts.map((p) => {
+    if (p.kind === "tool" && p.toolCallId === toolCallId && p.status === "running") {
+      changed = true;
+      return { ...p, status: "done" as const };
+    }
+    return p;
+  });
+  return changed ? next : parts;
+}
+
+/** Mark a tool part errored, or add an errored tool part if none exists yet. */
+function markToolError(
+  parts: AssistantPart[],
+  toolCallId: string,
+  toolName: string | undefined,
+  message: string,
+): AssistantPart[] {
+  const idx = parts.findIndex(
+    (p) => p.kind === "tool" && p.toolCallId === toolCallId,
+  );
+  if (idx !== -1) {
+    const next = [...parts];
+    const existing = next[idx];
+    if (existing.kind === "tool") {
+      next[idx] = { ...existing, status: "error", errorText: message };
+    }
+    return next;
+  }
+  // A `tool-input-error` can arrive before any `tool-call` part exists.
+  return [
+    ...parts,
+    {
+      kind: "tool",
+      toolCallId,
+      toolName: toolName ?? "tool",
+      status: "error",
+      errorText: message,
+    },
+  ];
+}
+
+/**
+ * Replace a tool part with a card (confirm or applied) in place - the mutate
+ * tool's output IS the card - preserving position. Pushes a new card part if the
+ * matching tool part is missing (defensive against an out-of-order stream).
+ */
+function toCard(
+  parts: AssistantPart[],
+  toolCallId: string,
+  cardPart: AssistantPart,
+): AssistantPart[] {
+  const idx = parts.findIndex(
+    (p) => p.kind === "tool" && p.toolCallId === toolCallId,
+  );
+  if (idx !== -1) {
+    const next = [...parts];
+    next[idx] = cardPart;
+    return next;
+  }
+  return [...parts, cardPart];
+}
+
+/**
+ * Fold a single stream event into the LAST (streaming assistant) message. Pure
+ * and DOM-free so the streaming reducer is unit-testable. Returns the same array
+ * reference when the event produces no change (so React can bail on re-render).
+ */
+export function applyStreamEvent({
+  messages,
+  event,
+}: {
+  messages: ChatMessage[];
+  event: ChatStreamEvent;
+}): ChatMessage[] {
+  const last = messages.at(-1);
+  if (!last || last.role !== "assistant") return messages;
+
+  let parts = last.parts;
+  let streaming = last.streaming;
+  switch (event.type) {
+    case "text-delta": {
+      parts = appendText(parts, event.delta);
+      break;
+    }
+    case "tool-call": {
+      parts = upsertTool(parts, event.toolCallId, event.toolName);
+      break;
+    }
+    case "tool-result": {
+      parts = markToolDone(parts, event.toolCallId);
+      break;
+    }
+    case "tool-error": {
+      parts = markToolError(parts, event.toolCallId, event.toolName, event.message);
+      break;
+    }
+    case "confirm-card": {
+      parts = toCard(parts, event.toolCallId, {
+        kind: "confirm",
+        toolCallId: event.toolCallId,
+        card: event.card,
+      });
+      break;
+    }
+    case "applied-card": {
+      parts = toCard(parts, event.toolCallId, {
+        kind: "applied",
+        toolCallId: event.toolCallId,
+        card: event.card,
+      });
+      break;
+    }
+    case "error": {
+      const prefix = parts.length > 0 ? "\n\n" : "";
+      parts = appendText(parts, `${prefix}Error: ${event.message}`);
+      streaming = false;
+      break;
+    }
+    case "done": {
+      streaming = false;
+      break;
+    }
+  }
+  if (parts === last.parts && streaming === last.streaming) return messages;
+  return [...messages.slice(0, -1), { ...last, parts, streaming }];
+}
+
+/** Mark the last assistant message as finished (stream ended). */
+export function finishAssistantMessage({
+  messages,
+}: {
+  messages: ChatMessage[];
+}): ChatMessage[] {
+  const last = messages.at(-1);
+  if (!last || last.role !== "assistant" || !last.streaming) return messages;
+  return [...messages.slice(0, -1), { ...last, streaming: false }];
+}

package/src/lib/line-diff.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, test } from "bun:test";
+import { computeLineDiff, type DiffSegment } from "./line-diff";
+
+/** Join a side's segments back into its full line text. */
+function join(segments: DiffSegment[] | null): string | null {
+  return segments === null ? null : segments.map((s) => s.text).join("");
+}
+
+describe("computeLineDiff", () => {
+  test("identical text yields all-equal rows with sequential line numbers", () => {
+    const rows = computeLineDiff({ before: "a\nb", after: "a\nb" });
+    expect(rows.map((r) => r.kind)).toEqual(["equal", "equal"]);
+    expect(rows.map((r) => [r.leftNo, r.rightNo])).toEqual([
+      [1, 1],
+      [2, 2],
+    ]);
+    // No intra-line emphasis on unchanged lines.
+    expect(rows.every((r) => (r.left ?? []).every((s) => !s.emphasis))).toBe(
+      true,
+    );
+  });
+
+  test("a single-line edit is one changed row with word-level emphasis", () => {
+    const rows = computeLineDiff({
+      before: "load < 0.6",
+      after: "load < threshold",
+    });
+    expect(rows).toHaveLength(1);
+    const row = rows[0];
+    expect(row.kind).toBe("changed");
+    expect([row.leftNo, row.rightNo]).toEqual([1, 1]);
+    // Segments reconstruct each side's full line...
+    expect(join(row.left)).toBe("load < 0.6");
+    expect(join(row.right)).toBe("load < threshold");
+    // ...the shared prefix "load < " is NOT emphasised on either side...
+    expect(row.left?.[0]).toEqual({ text: "load < ", emphasis: false });
+    expect(row.right?.[0]).toEqual({ text: "load < ", emphasis: false });
+    // ...and the diverging tokens ARE emphasised on each side.
+    expect(row.left?.some((s) => s.emphasis)).toBe(true);
+    expect(row.right?.some((s) => s.emphasis)).toBe(true);
+  });
+
+  test("a pure insertion is an added row (no left line/number)", () => {
+    const rows = computeLineDiff({ before: "a", after: "a\nb" });
+    expect(rows.map((r) => r.kind)).toEqual(["equal", "added"]);
+    const added = rows[1];
+    expect(added.leftNo).toBeNull();
+    expect(added.left).toBeNull();
+    expect(added.rightNo).toBe(2);
+    expect(join(added.right)).toBe("b");
+  });
+
+  test("a pure deletion is a removed row (no right line/number)", () => {
+    const rows = computeLineDiff({ before: "a\nb", after: "a" });
+    expect(rows.map((r) => r.kind)).toEqual(["equal", "removed"]);
+    const removed = rows[1];
+    expect(removed.rightNo).toBeNull();
+    expect(removed.right).toBeNull();
+    expect(removed.leftNo).toBe(2);
+    expect(join(removed.left)).toBe("b");
+  });
+
+  test("an edited block zips dels and inss into changed rows, equals preserved", () => {
+    const rows = computeLineDiff({
+      before: "keep\nold1\nold2",
+      after: "keep\nnew1\nnew2",
+    });
+    expect(rows.map((r) => r.kind)).toEqual(["equal", "changed", "changed"]);
+    expect(rows.map((r) => [join(r.left), join(r.right)])).toEqual([
+      ["keep", "keep"],
+      ["old1", "new1"],
+      ["old2", "new2"],
+    ]);
+    expect(rows.map((r) => [r.leftNo, r.rightNo])).toEqual([
+      [1, 1],
+      [2, 2],
+      [3, 3],
+    ]);
+  });
+
+  test("more insertions than deletions leaves trailing added rows", () => {
+    const rows = computeLineDiff({ before: "old1", after: "new1\nnew2" });
+    expect(rows.map((r) => r.kind)).toEqual(["changed", "added"]);
+    expect(rows[1].leftNo).toBeNull();
+    expect(join(rows[1].right)).toBe("new2");
+  });
+});