@checkstack/ai-frontend 0.1.0

package/src/lib/line-diff.ts

@@ -0,0 +1,206 @@
+/**
+ * Pure, DOM-free line diff for the chat confirm/applied cards, modelled on the
+ * GitHub split (side-by-side) diff. Produces aligned rows carrying:
+ *  - old/new LINE NUMBERS (gutters),
+ *  - the per-side text split into SEGMENTS, where the exact changed tokens of an
+ *    edited line are flagged `emphasis: true` (GitHub's intra-line word highlight,
+ *    the thing that makes a one-character change actually readable).
+ *
+ * Lightweight on purpose: an LCS over lines, and a second LCS over word-tokens
+ * for the changed pairs - no Monaco/editor stack pulled into the chat.
+ * Unit-testable under `bun test` (no DOM).
+ */
+
+/** A run of text on one side of a line; `emphasis` marks the changed tokens. */
+export interface DiffSegment {
+  text: string;
+  emphasis: boolean;
+}
+
+/** One rendered row of a side-by-side diff. `null` means "no line on this side". */
+export interface DiffLine {
+  /** 1-based old-file line number, or null when this row has no left line. */
+  leftNo: number | null;
+  /** 1-based new-file line number, or null when this row has no right line. */
+  rightNo: number | null;
+  left: DiffSegment[] | null;
+  right: DiffSegment[] | null;
+  /**
+   * - `equal`: unchanged line (both sides identical)
+   * - `changed`: a removed line paired with an added line (an edit)
+   * - `removed`: a line only on the left (deleted)
+   * - `added`: a line only on the right (inserted)
+   */
+  kind: "equal" | "changed" | "removed" | "added";
+}
+
+type Op = { type: "equal" | "del" | "ins"; text: string };
+
+/** LCS suffix-DP over two token arrays: `dp[i][j]` = LCS length of a[i:], b[j:]. */
+function lcsLengths(a: string[], b: string[]): number[][] {
+  const m = a.length;
+  const n = b.length;
+  const dp: number[][] = Array.from({ length: m + 1 }, () =>
+    Array.from({ length: n + 1 }, () => 0),
+  );
+  for (let i = m - 1; i >= 0; i -= 1) {
+    for (let j = n - 1; j >= 0; j -= 1) {
+      dp[i][j] =
+        a[i] === b[j]
+          ? dp[i + 1][j + 1] + 1
+          : Math.max(dp[i + 1][j], dp[i][j + 1]);
+    }
+  }
+  return dp;
+}
+
+/** Walk the LCS table into an ordered equal/del/ins op list over two sequences. */
+function sequenceOps(a: string[], b: string[]): Op[] {
+  const dp = lcsLengths(a, b);
+  const ops: Op[] = [];
+  let i = 0;
+  let j = 0;
+  while (i < a.length && j < b.length) {
+    if (a[i] === b[j]) {
+      ops.push({ type: "equal", text: a[i] });
+      i += 1;
+      j += 1;
+    } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+      ops.push({ type: "del", text: a[i] });
+      i += 1;
+    } else {
+      ops.push({ type: "ins", text: b[j] });
+      j += 1;
+    }
+  }
+  while (i < a.length) {
+    ops.push({ type: "del", text: a[i] });
+    i += 1;
+  }
+  while (j < b.length) {
+    ops.push({ type: "ins", text: b[j] });
+    j += 1;
+  }
+  return ops;
+}
+
+/** Split a line into word / whitespace / punctuation tokens for the word diff. */
+function tokenize(line: string): string[] {
+  return line.match(/\w+|\s+|[^\s\w]+/g) ?? [];
+}
+
+/** Append text to a side, merging into the previous run when emphasis matches. */
+function pushSegment(target: DiffSegment[], text: string, emphasis: boolean): void {
+  const last = target.at(-1);
+  if (last && last.emphasis === emphasis) {
+    last.text += text;
+  } else {
+    target.push({ text, emphasis });
+  }
+}
+
+/**
+ * Word-level diff of one edited line: returns the left (before) and right (after)
+ * segment runs, with the tokens unique to each side flagged `emphasis: true`.
+ */
+function wordSegments(
+  before: string,
+  after: string,
+): { left: DiffSegment[]; right: DiffSegment[] } {
+  const ops = sequenceOps(tokenize(before), tokenize(after));
+  const left: DiffSegment[] = [];
+  const right: DiffSegment[] = [];
+  for (const op of ops) {
+    if (op.type === "equal") {
+      pushSegment(left, op.text, false);
+      pushSegment(right, op.text, false);
+    } else if (op.type === "del") {
+      pushSegment(left, op.text, true);
+    } else {
+      pushSegment(right, op.text, true);
+    }
+  }
+  return { left, right };
+}
+
+/** A whole line with no intra-line emphasis (equal/added/removed rows). */
+function plain(text: string): DiffSegment[] {
+  return [{ text, emphasis: false }];
+}
+
+/**
+ * Compute the side-by-side rows for a before -> after text change. A run of
+ * deletions immediately followed by insertions is zipped index-by-index into
+ * `changed` rows (old line left, new line right, with word-level emphasis);
+ * leftover deletions/insertions become `removed`/`added` rows. Old/new line
+ * numbers are tracked across the walk for the gutters.
+ */
+export function computeLineDiff({
+  before,
+  after,
+}: {
+  before: string;
+  after: string;
+}): DiffLine[] {
+  const ops = sequenceOps(before.split("\n"), after.split("\n"));
+  const rows: DiffLine[] = [];
+  let leftNo = 0;
+  let rightNo = 0;
+  let dels: string[] = [];
+  let inss: string[] = [];
+
+  const flush = (): void => {
+    const pairs = Math.max(dels.length, inss.length);
+    for (let k = 0; k < pairs; k += 1) {
+      const l = k < dels.length ? dels[k] : null;
+      const r = k < inss.length ? inss[k] : null;
+      if (l === null) {
+        rightNo += 1;
+        rows.push({
+          leftNo: null,
+          rightNo,
+          left: null,
+          right: plain(r ?? ""),
+          kind: "added",
+        });
+      } else if (r === null) {
+        leftNo += 1;
+        rows.push({
+          leftNo,
+          rightNo: null,
+          left: plain(l),
+          right: null,
+          kind: "removed",
+        });
+      } else {
+        leftNo += 1;
+        rightNo += 1;
+        const { left, right } = wordSegments(l, r);
+        rows.push({ leftNo, rightNo, left, right, kind: "changed" });
+      }
+    }
+    dels = [];
+    inss = [];
+  };
+
+  for (const op of ops) {
+    if (op.type === "equal") {
+      flush();
+      leftNo += 1;
+      rightNo += 1;
+      rows.push({
+        leftNo,
+        rightNo,
+        left: plain(op.text),
+        right: plain(op.text),
+        kind: "equal",
+      });
+    } else if (op.type === "del") {
+      dels.push(op.text);
+    } else {
+      inss.push(op.text);
+    }
+  }
+  flush();
+  return rows;
+}

package/src/lib/mode-toggle.logic.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, test } from "bun:test";
+import {
+  PERMISSION_MODE_OPTIONS,
+  buildModeUpdate,
+  deriveModeToggleValue,
+} from "./mode-toggle.logic";
+
+describe("deriveModeToggleValue", () => {
+  test("uses the conversation's mode when valid", () => {
+    expect(deriveModeToggleValue({ conversationMode: "auto" })).toBe("auto");
+    expect(deriveModeToggleValue({ conversationMode: "approve" })).toBe(
+      "approve",
+    );
+  });
+
+  test("falls back to the safe default (approve) for null/undefined/invalid", () => {
+    expect(deriveModeToggleValue({ conversationMode: null })).toBe("approve");
+    expect(deriveModeToggleValue({ conversationMode: undefined })).toBe(
+      "approve",
+    );
+    expect(deriveModeToggleValue({ conversationMode: "bogus" })).toBe("approve");
+  });
+});
+
+describe("buildModeUpdate", () => {
+  test("returns the owner-scoped update payload on a real change", () => {
+    expect(
+      buildModeUpdate({
+        conversationId: "c1",
+        currentMode: "approve",
+        nextMode: "auto",
+      }),
+    ).toEqual({ id: "c1", permissionMode: "auto" });
+  });
+
+  test("returns undefined when there is no conversation to update", () => {
+    expect(
+      buildModeUpdate({
+        conversationId: undefined,
+        currentMode: "approve",
+        nextMode: "auto",
+      }),
+    ).toBeUndefined();
+  });
+
+  test("returns undefined for a no-op (mode unchanged)", () => {
+    expect(
+      buildModeUpdate({
+        conversationId: "c1",
+        currentMode: "auto",
+        nextMode: "auto",
+      }),
+    ).toBeUndefined();
+  });
+});
+
+describe("PERMISSION_MODE_OPTIONS", () => {
+  test("offers exactly approve + auto, in that order", () => {
+    expect(PERMISSION_MODE_OPTIONS.map((o) => o.value)).toEqual([
+      "approve",
+      "auto",
+    ]);
+  });
+});

package/src/lib/mode-toggle.logic.ts

@@ -0,0 +1,57 @@
+import {
+  AiPermissionModeSchema,
+  DEFAULT_PERMISSION_MODE,
+  type AiPermissionMode,
+} from "@checkstack/ai-common";
+
+/**
+ * Pure, DOM-free helpers for the Approve/Auto permission-mode toggle in the chat
+ * header (Phase 4). The toggle state derives from the loaded conversation's
+ * `permissionMode`; persistence goes through `updateConversation`. These helpers
+ * encode that derivation + payload shaping so they are unit-testable under
+ * `bun test` without rendering the component.
+ */
+
+/** The two selectable permission modes, in display order, with labels. */
+export const PERMISSION_MODE_OPTIONS: ReadonlyArray<{
+  value: AiPermissionMode;
+  label: string;
+}> = [
+  { value: "approve", label: "Approve" },
+  { value: "auto", label: "Auto" },
+];
+
+/**
+ * Derive the toggle's current value from a loaded conversation's
+ * `permissionMode`. Falls back to the safe default (`approve`) when no
+ * conversation is loaded or the stored value is missing/unrecognized (defensive
+ * against a legacy/corrupt row), so the toggle never renders an invalid state.
+ */
+export function deriveModeToggleValue({
+  conversationMode,
+}: {
+  conversationMode: string | null | undefined;
+}): AiPermissionMode {
+  const parsed = AiPermissionModeSchema.safeParse(conversationMode);
+  return parsed.success ? parsed.data : DEFAULT_PERMISSION_MODE;
+}
+
+/**
+ * Shape the `updateConversation` payload for a mode change. Returns `undefined`
+ * when there is no conversation to update OR the requested mode already matches
+ * the current one (avoid a no-op write). Otherwise returns the owner-scoped
+ * update input the mutation consumes.
+ */
+export function buildModeUpdate({
+  conversationId,
+  currentMode,
+  nextMode,
+}: {
+  conversationId: string | undefined;
+  currentMode: AiPermissionMode;
+  nextMode: AiPermissionMode;
+}): { id: string; permissionMode: AiPermissionMode } | undefined {
+  if (!conversationId) return undefined;
+  if (currentMode === nextMode) return undefined;
+  return { id: conversationId, permissionMode: nextMode };
+}

package/src/lib/model-options.logic.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, test } from "bun:test";
+import { buildModelOptions } from "./model-options.logic";
+
+describe("buildModelOptions", () => {
+  test("returns [defaultModel] when there are no availableModels", () => {
+    expect(
+      buildModelOptions({ defaultModel: "gpt-4o", availableModels: [] }),
+    ).toEqual(["gpt-4o"]);
+    expect(
+      buildModelOptions({ defaultModel: "gpt-4o", availableModels: undefined }),
+    ).toEqual(["gpt-4o"]);
+  });
+
+  test("puts the default model first", () => {
+    expect(
+      buildModelOptions({
+        defaultModel: "gpt-4o",
+        availableModels: ["gpt-4o-mini", "o3"],
+      }),
+    ).toEqual(["gpt-4o", "gpt-4o-mini", "o3"]);
+  });
+
+  test("de-duplicates the default when it is also in availableModels", () => {
+    expect(
+      buildModelOptions({
+        defaultModel: "gpt-4o",
+        availableModels: ["gpt-4o", "gpt-4o-mini"],
+      }),
+    ).toEqual(["gpt-4o", "gpt-4o-mini"]);
+  });
+
+  test("de-duplicates repeated availableModels entries", () => {
+    expect(
+      buildModelOptions({
+        defaultModel: "a",
+        availableModels: ["b", "b", "c", "a"],
+      }),
+    ).toEqual(["a", "b", "c"]);
+  });
+
+  test("returns an empty list when there is no default and no models", () => {
+    expect(
+      buildModelOptions({ defaultModel: undefined, availableModels: [] }),
+    ).toEqual([]);
+  });
+
+  test("ignores an undefined default but keeps availableModels", () => {
+    expect(
+      buildModelOptions({
+        defaultModel: undefined,
+        availableModels: ["x", "y"],
+      }),
+    ).toEqual(["x", "y"]);
+  });
+});

package/src/lib/model-options.logic.ts

@@ -0,0 +1,31 @@
+/**
+ * Pure, DOM-free derivation of the chat model picker's options.
+ *
+ * The dropdown must always offer the connection's `defaultModel` (the prior UI
+ * omitted it, so a connection's own default could be unselectable) followed by
+ * its `availableModels`, de-duplicated and with the default first. With no
+ * `availableModels` the result is just `[defaultModel]` so the picker stays a
+ * tidy Select instead of falling back to a free-text field.
+ */
+export function buildModelOptions({
+  defaultModel,
+  availableModels,
+}: {
+  /** The connection's default model id (undefined before an integration loads). */
+  defaultModel: string | undefined;
+  /** The connection's allowlisted model ids (may be empty/undefined). */
+  availableModels: readonly string[] | undefined;
+}): string[] {
+  const ordered: string[] = [];
+  const seen = new Set<string>();
+  const add = (value: string | undefined) => {
+    if (!value || seen.has(value)) return;
+    seen.add(value);
+    ordered.push(value);
+  };
+
+  // Default first, then the allowlist, de-duplicated.
+  add(defaultModel);
+  for (const model of availableModels ?? []) add(model);
+  return ordered;
+}

package/src/lib/new-chat.logic.test.ts

@@ -0,0 +1,84 @@
+import { describe, expect, test } from "bun:test";
+import {
+  isEmptyUntitledChat,
+  decideNewChatAction,
+} from "./new-chat.logic";
+
+describe("isEmptyUntitledChat", () => {
+  test("true for an untitled chat with no messages", () => {
+    expect(
+      isEmptyUntitledChat({
+        conversation: { id: "c1", title: null },
+        messages: [],
+      }),
+    ).toBe(true);
+  });
+
+  test("true when the title is blank/whitespace only", () => {
+    expect(
+      isEmptyUntitledChat({
+        conversation: { id: "c1", title: "   " },
+        messages: [],
+      }),
+    ).toBe(true);
+  });
+
+  test("false once the chat has a real title", () => {
+    expect(
+      isEmptyUntitledChat({
+        conversation: { id: "c1", title: "Open incidents" },
+        messages: [],
+      }),
+    ).toBe(false);
+  });
+
+  test("false once the chat has a non-blank message", () => {
+    expect(
+      isEmptyUntitledChat({
+        conversation: { id: "c1", title: null },
+        messages: [{ text: "hello" }],
+      }),
+    ).toBe(false);
+  });
+
+  test("blank-only messages do not count as content", () => {
+    expect(
+      isEmptyUntitledChat({
+        conversation: { id: "c1", title: null },
+        messages: [{ text: "   " }],
+      }),
+    ).toBe(true);
+  });
+
+  test("false when there is no open conversation", () => {
+    expect(
+      isEmptyUntitledChat({ conversation: undefined, messages: [] }),
+    ).toBe(false);
+  });
+});
+
+describe("decideNewChatAction", () => {
+  test("reuses the open empty untitled draft instead of creating a duplicate", () => {
+    expect(
+      decideNewChatAction({
+        current: { id: "c1", title: null },
+        messages: [],
+      }),
+    ).toEqual({ kind: "reuse", conversationId: "c1" });
+  });
+
+  test("creates a fresh conversation when the open one has content", () => {
+    expect(
+      decideNewChatAction({
+        current: { id: "c1", title: "Titled" },
+        messages: [],
+      }),
+    ).toEqual({ kind: "create" });
+  });
+
+  test("creates a fresh conversation when none is open", () => {
+    expect(
+      decideNewChatAction({ current: undefined, messages: [] }),
+    ).toEqual({ kind: "create" });
+  });
+});

package/src/lib/new-chat.logic.ts

@@ -0,0 +1,62 @@
+/**
+ * Pure, DOM-free helpers for the "New chat" sidebar action (Fix 1).
+ *
+ * Clicking "New chat" should NOT spawn a fresh empty conversation every time:
+ * if the conversation currently open is itself an empty, untitled draft, the
+ * click should just reuse it (and keep it highlighted) instead of creating
+ * another "Untitled chat" row. These helpers encode that decision so it is
+ * unit-testable under `bun test` without rendering the component.
+ */
+
+/** The minimal conversation shape the new-chat decision needs. */
+export interface NewChatConversation {
+  id: string;
+  title: string | null;
+}
+
+/** The minimal message shape the new-chat decision needs. */
+export interface NewChatMessage {
+  text: string;
+}
+
+/**
+ * True when a conversation is an empty, untitled draft: no (non-blank) title and
+ * no messages. Such a conversation is indistinguishable from a brand-new one, so
+ * "New chat" can reuse it rather than create a duplicate.
+ */
+export function isEmptyUntitledChat({
+  conversation,
+  messages,
+}: {
+  conversation: NewChatConversation | undefined;
+  messages: ReadonlyArray<NewChatMessage>;
+}): boolean {
+  if (!conversation) return false;
+  const hasTitle = (conversation.title ?? "").trim().length > 0;
+  const hasMessages = messages.some((m) => m.text.trim().length > 0);
+  return !hasTitle && !hasMessages;
+}
+
+/**
+ * Decide what "New chat" should do given the currently-open conversation and its
+ * messages:
+ *  - `{ kind: "reuse", conversationId }` when the open chat is already an empty
+ *    untitled draft (avoid spawning a duplicate),
+ *  - `{ kind: "create" }` otherwise (create a fresh conversation).
+ */
+export type NewChatAction =
+  | { kind: "reuse"; conversationId: string }
+  | { kind: "create" };
+
+export function decideNewChatAction({
+  current,
+  messages,
+}: {
+  current: NewChatConversation | undefined;
+  messages: ReadonlyArray<NewChatMessage>;
+}): NewChatAction {
+  if (current && isEmptyUntitledChat({ conversation: current, messages })) {
+    return { kind: "reuse", conversationId: current.id };
+  }
+  return { kind: "create" };
+}