@backmatter/studio 0.0.1

package/src/chat/chat-helpers.ts

@@ -0,0 +1,402 @@
+// packages/studio/src/chat/chat-helpers.ts
+//
+// Pure helpers used by chat components. Kept free of StyleX/React so they can
+// be unit tested with `bun test`.
+import { getToolName, isToolUIPart, type UIMessage } from "ai";
+import type { ChatChangeSummary, ChatThread, DocStatus } from "../api";
+import type { DocRef } from "../chrome/EditorFocusContext";
+
+export type WriteToolOutput =
+  | { ok: true; change: ChatChangeSummary }
+  | { ok: false; error: string; message: string };
+
+export function isWriteTool(name: string) {
+  return name === "writeDoc" || name === "createDoc" || name === "renameDoc";
+}
+
+export function isCommitTool(name: string) {
+  return name === "commit";
+}
+
+const TREE_STATUSES = new Set<DocStatus>(["clean", "modified", "added", "conflict", "deleted"]);
+
+/** Statuses a tool result wants applied to the local doc list immediately. */
+export type TreeStatusPatch = {
+  locale: string;
+  type: string;
+  slug: string;
+  status: DocStatus;
+  absent?: boolean;
+};
+
+export function treeStatusPatches(output: unknown): TreeStatusPatch[] {
+  if (!output || typeof output !== "object") return [];
+  const body = output as { ok?: boolean; tree?: unknown };
+  if (body.ok === false || !Array.isArray(body.tree)) return [];
+  const patches: TreeStatusPatch[] = [];
+  for (const row of body.tree) {
+    if (!row || typeof row !== "object") continue;
+    const item = row as Partial<TreeStatusPatch>;
+    if (
+      typeof item.locale !== "string" ||
+      !item.locale ||
+      typeof item.type !== "string" ||
+      !item.type ||
+      typeof item.slug !== "string" ||
+      !item.slug ||
+      typeof item.status !== "string" ||
+      !TREE_STATUSES.has(item.status as DocStatus)
+    ) {
+      continue;
+    }
+    patches.push({
+      locale: item.locale,
+      type: item.type,
+      slug: item.slug,
+      status: item.status as DocStatus,
+      ...(item.absent ? { absent: true } : {}),
+    });
+  }
+  return patches;
+}
+
+export function toolLabel(name: string, input: unknown, output: unknown, state: string): string {
+  const ref = (input as { docRef?: { type?: string; slug?: string } } | undefined)?.docRef;
+  const doc = ref?.type && ref.slug ? `${ref.type}/${ref.slug}` : "";
+  const q = (input as { query?: string } | undefined)?.query;
+  const running = state !== "output-available" && state !== "output-error";
+  switch (name) {
+    case "listDocs":
+      return running ? "Listing documents…" : "Listed documents";
+    case "readDoc":
+      return running ? `Reading ${doc}…` : `Read ${doc}`;
+    case "searchDocs":
+      return running ? `Searching “${q ?? ""}”…` : `Searched “${q ?? ""}”`;
+    case "writeDoc":
+      return running ? `Editing ${doc}…` : `Edited ${doc}`;
+    case "createDoc":
+      return running ? `Creating ${doc}…` : `Created ${doc}`;
+    case "renameDoc":
+      return running ? `Renaming ${doc}…` : `Renamed ${doc}`;
+    case "commit": {
+      if (running) return "Publishing…";
+      const published = output as { ok?: boolean; files?: unknown[] } | undefined;
+      if (published?.ok === false) return "Publish failed";
+      const count = Array.isArray(published?.files) ? published.files.length : 0;
+      return count === 1 ? "Published 1 file" : `Published ${count} files`;
+    }
+    default: {
+      const mcp = mcpToolLabel(name, input, output, state);
+      return mcp ?? name;
+    }
+  }
+}
+
+/** Latest sentence of a reasoning dump, clipped to one line. */
+export function thoughtSnippet(text: string, max = 72): string {
+  const cleaned = text.replace(/\s+/g, " ").trim();
+  if (!cleaned) return "Thinking";
+  const sentences = cleaned.split(/(?<=[.!?])\s+/);
+  const last = sentences[sentences.length - 1] ?? cleaned;
+  if (last.length <= max) return last;
+  return `${last.slice(0, max - 1).trimEnd()}…`;
+}
+
+export function formatElapsed(ms: number): string {
+  return `${(Math.max(0, ms) / 1000).toFixed(1)}s`;
+}
+
+export type LiveActivity = { kind: "thinking" | "thought" | "tool"; label: string };
+
+/**
+ * One-line status for a live turn. Prefers a running tool, then the latest
+ * thought, then "Thinking" — so the UI stays alive between tool rounds.
+ */
+export function liveActivity(
+  parts: UIMessage["parts"] | undefined,
+  status: "submitted" | "streaming" | "ready" | "error",
+): LiveActivity | null {
+  if (status !== "submitted" && status !== "streaming") return null;
+  const list = parts ?? [];
+
+  for (const p of list) {
+    if (!isToolUIPart(p)) continue;
+    if (p.state === "output-available" || p.state === "output-error") continue;
+    return {
+      kind: "tool",
+      label: toolLabel(getToolName(p), p.input, undefined, p.state),
+    };
+  }
+
+  const last = list[list.length - 1];
+  if (last?.type === "text" && last.text.trim() && last.state === "streaming") {
+    return null;
+  }
+
+  let reasoning = "";
+  for (const p of list) {
+    if (p.type === "reasoning" && p.text.trim()) reasoning = p.text;
+  }
+  if (reasoning) return { kind: "thought", label: thoughtSnippet(reasoning) };
+
+  return { kind: "thinking", label: "Thinking" };
+}
+
+export function mcpToolLabel(
+  name: string,
+  input: unknown,
+  output: unknown,
+  state: string,
+): string | null {
+  const running = state !== "output-available" && state !== "output-error";
+  if (name === "importMcp") {
+    const id =
+      input && typeof input === "object" && "id" in input && typeof input.id === "string"
+        ? input.id
+        : "connector";
+    const result =
+      output && typeof output === "object"
+        ? (output as { ok?: boolean; name?: string; tools?: string[] })
+        : null;
+    if (running) return `Importing ${id}…`;
+    if (result?.ok) {
+      const count = result.tools?.length ?? 0;
+      return `Imported ${result.name ?? id} · ${count} tools`;
+    }
+    return `Could not import ${id}`;
+  }
+  if (!name.startsWith("mcp_")) return null;
+  const rest = name.slice(4);
+  const idx = rest.indexOf("_");
+  const slug = idx === -1 ? rest : rest.slice(0, idx);
+  const tool = (idx === -1 ? rest : rest.slice(idx + 1)).replace(/_/g, " ");
+  return running ? `${slug}: ${tool}…` : `${slug}: ${tool}`;
+}
+
+/** Change ids referenced by successful write-tool outputs inside a message. */
+export function changeIdsInMessage(message: UIMessage): string[] {
+  const ids: string[] = [];
+  for (const part of message.parts) {
+    if (!isToolUIPart(part)) continue;
+    if (!isWriteTool(getToolName(part))) continue;
+    if (part.state !== "output-available") continue;
+    const out = part.output as WriteToolOutput | undefined;
+    if (out?.ok) ids.push(out.change.id);
+  }
+  return ids;
+}
+
+/** Find an active `@query` token ending at the caret. */
+export function mentionQueryAt(
+  text: string,
+  caret: number,
+): { start: number; query: string } | null {
+  const before = text.slice(0, caret);
+  const at = before.lastIndexOf("@");
+  if (at === -1) return null;
+  if (at > 0 && !/\s/.test(before[at - 1]!)) return null;
+  const query = before.slice(at + 1);
+  if (/\s/.test(query)) return null;
+  return { start: at, query };
+}
+
+export type MentionDocItem = DocRef & { status: DocStatus };
+
+export function filterDocs(
+  docs: MentionDocItem[],
+  query: string,
+  limit = 8,
+): MentionDocItem[] {
+  const q = query.trim().toLowerCase();
+  const scored = docs
+    .map((d) => {
+      const label = `${d.type}/${d.slug}`.toLowerCase();
+      let score = -1;
+      if (!q) score = 0;
+      else if (label.startsWith(q)) score = 3;
+      else if (d.slug.toLowerCase().startsWith(q)) score = 2;
+      else if (label.includes(q)) score = 1;
+      return { d, score };
+    })
+    .filter((x) => x.score >= 0)
+    .sort((a, b) => b.score - a.score || a.d.slug.localeCompare(b.d.slug));
+  return scored.slice(0, limit).map((x) => x.d);
+}
+
+export function groupThreadsByDay(
+  threads: ChatThread[],
+  now = new Date(),
+): Array<{ label: string; threads: ChatThread[] }> {
+  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+  const day = 86_400_000;
+  const groups = new Map<string, ChatThread[]>();
+  for (const t of threads) {
+    const ts = new Date(t.updatedAt).getTime();
+    let label: string;
+    if (ts >= startOfToday) label = "Today";
+    else if (ts >= startOfToday - day) label = "Yesterday";
+    else if (ts >= startOfToday - 7 * day) label = "Previous 7 days";
+    else if (ts >= startOfToday - 30 * day) label = "Previous 30 days";
+    else label = "Older";
+    const list = groups.get(label) ?? [];
+    list.push(t);
+    groups.set(label, list);
+  }
+  return [...groups.entries()].map(([label, list]) => ({ label, threads: list }));
+}
+
+export function chatSuggestions(input: {
+  hasFocus: boolean;
+  contentTypes: string[];
+}): string[] {
+  if (input.hasFocus) {
+    return ["Improve this page", "Fix tone and grammar", "Summarize this document"];
+  }
+  const type = input.contentTypes[0];
+  return [
+    type ? `Write a new ${type}` : "What can you help with?",
+    "What have I changed but not committed?",
+    "Find pages mentioning…",
+  ];
+}
+
+// ---------------------------------------------------------------------------
+// Inline document cards
+//
+// The model can write `[[docs]]` on its own line to place the card for its most
+// recent listDocs/searchDocs call at that point in the prose. The card is then
+// not repeated at the tool-call position.
+
+export const DOCS_PLACEHOLDER = "[[docs]]";
+const DOCS_PLACEHOLDER_RE = /^[ \t]*\[\[docs\]\][ \t]*$/gm;
+
+export type TextSegment = { kind: "text"; text: string } | { kind: "docs" };
+
+/** Split text on `[[docs]]` lines. Empty text segments are dropped. */
+export function splitDocsPlaceholders(text: string): TextSegment[] {
+  const out: TextSegment[] = [];
+  let last = 0;
+  for (const m of text.matchAll(DOCS_PLACEHOLDER_RE)) {
+    const before = text.slice(last, m.index);
+    if (before.trim()) out.push({ kind: "text", text: before });
+    out.push({ kind: "docs" });
+    last = m.index + m[0].length;
+  }
+  const rest = text.slice(last);
+  if (rest.trim()) out.push({ kind: "text", text: rest });
+  return out;
+}
+
+/**
+ * While streaming, hide a trailing partial placeholder ("[[do") so it doesn't
+ * flash as literal text before the full token arrives.
+ */
+export function trimPartialPlaceholder(text: string): string {
+  const nl = text.lastIndexOf("\n");
+  const tail = text.slice(nl + 1).trimStart();
+  if (tail.length > 0 && tail.length < DOCS_PLACEHOLDER.length && DOCS_PLACEHOLDER.startsWith(tail)) {
+    return text.slice(0, nl + 1);
+  }
+  return text;
+}
+
+/**
+ * Which doc-list tool calls (by index into `parts`) are rendered inline via a
+ * placeholder, and which placeholder maps to which tool part. A placeholder
+ * binds to the nearest preceding doc-list tool part; if none precedes it, the
+ * next one after it (the model sometimes narrates before calling the tool).
+ */
+export function bindDocsPlaceholders(
+  parts: UIMessage["parts"],
+  isDocListTool: (name: string) => boolean,
+): { placeholderTarget: Map<string, number>; inlined: Set<number> } {
+  const toolIdx: number[] = [];
+  parts.forEach((p, i) => {
+    if (isToolUIPart(p) && isDocListTool(getToolName(p))) toolIdx.push(i);
+  });
+  const placeholderTarget = new Map<string, number>();
+  const inlined = new Set<number>();
+  parts.forEach((p, i) => {
+    if (p.type !== "text") return;
+    const count = splitDocsPlaceholders(p.text).filter((s) => s.kind === "docs").length;
+    for (let n = 0; n < count; n++) {
+      const before = toolIdx.filter((t) => t < i);
+      const after = toolIdx.filter((t) => t > i);
+      const target = before[before.length - 1] ?? after[0];
+      if (target === undefined) continue;
+      placeholderTarget.set(`${i}:${n}`, target);
+      inlined.add(target);
+    }
+  });
+  return { placeholderTarget, inlined };
+}
+
+const LIST_ITEM_RE = /^\s*(?:[-*•]|\d+[.)])\s+(.*)$/;
+const HAS_LIST_ITEM_RE = /^\s*(?:[-*•]|\d+[.)])\s+/m;
+
+function normalise(s: string) {
+  return s.toLowerCase().replace(/[`"'“”‘’*_]/g, "").trim();
+}
+
+/**
+ * Fallback for models that ignore the instructions and echo the card as a
+ * bullet/numbered list anyway: a run of list items in which most items mention
+ * a card title, slug or path is replaced by a `[[docs]]` placeholder (or removed
+ * entirely if the text already has one), so the card takes its place inline.
+ *
+ * While streaming, an unfinished trailing item directly after an echoed run is
+ * held back too, so items don't flash in before being recognised.
+ */
+export function replaceEchoedDocList(
+  text: string,
+  names: string[],
+  streaming = false,
+): string {
+  const keys = names.map(normalise).filter((k) => k.length >= 3);
+  if (keys.length === 0 || !HAS_LIST_ITEM_RE.test(text)) return text;
+  const hasPlaceholder = splitDocsPlaceholders(text).some((s) => s.kind === "docs");
+  const lines = text.split("\n");
+  const out: string[] = [];
+  let replaced = false;
+  let changed = false;
+  let i = 0;
+  while (i < lines.length) {
+    const first = lines[i]!.match(LIST_ITEM_RE);
+    if (!first) {
+      out.push(lines[i]!);
+      i++;
+      continue;
+    }
+    // Collect a run of consecutive list items.
+    let j = i;
+    const items: string[] = [];
+    while (j < lines.length) {
+      const m = lines[j]!.match(LIST_ITEM_RE);
+      if (!m) break;
+      items.push(m[1]!);
+      j++;
+    }
+    const isLastRun = j === lines.length;
+    const complete = isLastRun && streaming ? items.slice(0, -1) : items;
+    const hits = complete.filter((it) => {
+      const n = normalise(it);
+      return keys.some((k) => n.includes(k));
+    }).length;
+    const echo = complete.length > 0 && hits >= Math.ceil(complete.length / 2);
+    if (echo) {
+      if (!replaced && !hasPlaceholder) out.push(DOCS_PLACEHOLDER);
+      replaced = true;
+      changed = true;
+    } else if (isLastRun && streaming && complete.length === 0) {
+      // Single unfinished item; can't judge yet. Hold it back if it already
+      // looks like the start of a document name, otherwise show it.
+      const n = normalise(items[0]!);
+      if (n.length >= 3 && keys.some((k) => n.includes(k) || k.startsWith(n))) changed = true;
+      else out.push(...lines.slice(i, j));
+    } else {
+      out.push(...lines.slice(i, j));
+    }
+    i = j;
+  }
+  return changed ? out.join("\n") : text;
+}

package/src/chat/chat-state.ts

@@ -0,0 +1,59 @@
+// packages/studio/src/chat/chat-state.ts
+//
+// Panel state machine for the global chat. Pure so it can be unit tested.
+
+export type PanelMode = "closed" | "open" | "minimized" | "fullscreen";
+export type PanelView = "chat" | "history";
+
+export type PanelState = {
+  mode: PanelMode;
+  view: PanelView;
+  /** Mode to return to when leaving fullscreen or un-minimizing. */
+  lastOpenMode: "open" | "fullscreen";
+};
+
+export const initialPanelState: PanelState = {
+  mode: "closed",
+  view: "chat",
+  lastOpenMode: "open",
+};
+
+export type PanelAction =
+  | { type: "toggle" }
+  | { type: "open" }
+  | { type: "close" }
+  | { type: "minimize" }
+  | { type: "toggleFullscreen" }
+  | { type: "showHistory" }
+  | { type: "showChat" };
+
+export function panelReducer(state: PanelState, action: PanelAction): PanelState {
+  switch (action.type) {
+    case "toggle":
+      return state.mode === "closed" || state.mode === "minimized"
+        ? { ...state, mode: state.lastOpenMode }
+        : { ...state, mode: "closed" };
+    case "open":
+      return { ...state, mode: state.lastOpenMode, view: "chat" };
+    case "close":
+      return { ...state, mode: "closed", view: "chat" };
+    case "minimize":
+      return state.mode === "closed" ? state : { ...state, mode: "minimized" };
+    case "toggleFullscreen": {
+      const next = state.mode === "fullscreen" ? "open" : "fullscreen";
+      return { ...state, mode: next, lastOpenMode: next };
+    }
+    case "showHistory":
+      return {
+        ...state,
+        view: "history",
+        mode: state.mode === "closed" || state.mode === "minimized" ? state.lastOpenMode : state.mode,
+      };
+    case "showChat":
+      return { ...state, view: "chat" };
+  }
+}
+
+export function isPanelVisible(mode: PanelMode): boolean {
+  return mode === "open" || mode === "fullscreen";
+}

package/src/chat/icons.tsx

@@ -0,0 +1,171 @@
+// packages/studio/src/chat/icons.tsx
+type Props = { size?: number };
+
+function base(size: number) {
+  return {
+    width: size,
+    height: size,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    "aria-hidden": true as const,
+    stroke: "currentColor",
+    strokeWidth: 1.25,
+    strokeLinecap: "round" as const,
+    strokeLinejoin: "round" as const,
+  };
+}
+
+export function SparkIcon({ size = 14 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <path d="M8 1.8 9.4 6l4.2 1.4-4.2 1.4L8 13l-1.4-4.2L2.4 7.4 6.6 6 8 1.8Z" />
+    </svg>
+  );
+}
+
+export function HistoryIcon({ size = 14 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <path d="M2.6 8a5.4 5.4 0 1 0 1.6-3.85" />
+      <path d="M2.4 2.6v2.9h2.9" />
+      <path d="M8 5v3.2l2.2 1.3" />
+    </svg>
+  );
+}
+
+export function CloseIcon({ size = 14 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <path d="M4 4l8 8M12 4l-8 8" />
+    </svg>
+  );
+}
+
+export function MinimizeIcon({ size = 14 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <path d="M3.5 11h9" />
+    </svg>
+  );
+}
+
+export function ExpandIcon({ size = 14 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <path d="M9.5 2.5h4v4M13.5 2.5 9 7M6.5 13.5h-4v-4M2.5 13.5 7 9" />
+    </svg>
+  );
+}
+
+export function CollapseIcon({ size = 14 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <path d="M13.5 6.5h-4v-4M9.5 6.5 14 2M2.5 9.5h4v4M6.5 9.5 2 14" />
+    </svg>
+  );
+}
+
+export function SendIcon({ size = 14 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <path d="M8 13V3M3.8 7.2 8 3l4.2 4.2" />
+    </svg>
+  );
+}
+
+export function StopIcon({ size = 14 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <rect x="4" y="4" width="8" height="8" rx="1.5" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+export function ChevronDownIcon({ size = 12 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <path d="M4 6.5 8 10.5l4-4" />
+    </svg>
+  );
+}
+
+export function PlusIcon({ size = 14 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <path d="M8 3v10M3 8h10" />
+    </svg>
+  );
+}
+
+export function AtIcon({ size = 14 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <circle cx="8" cy="8" r="2.4" />
+      <path d="M10.4 8v1.2a1.6 1.6 0 0 0 3.2 0V8A5.6 5.6 0 1 0 11 12.6" />
+    </svg>
+  );
+}
+
+export function CheckIcon({ size = 14 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <path d="M3 8.5 6.5 12 13 4.5" />
+    </svg>
+  );
+}
+
+export function UndoIcon({ size = 14 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <path d="M5.5 4 2.5 7l3 3" />
+      <path d="M2.8 7h6.4a3.3 3.3 0 0 1 0 6.6H6" />
+    </svg>
+  );
+}
+
+export function FileIcon({ size = 14 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <path d="M4.5 2.5h5.2L12 4.8V13a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5Z" />
+      <path d="M9.5 2.5V5H12" />
+    </svg>
+  );
+}
+
+export function SearchIcon({ size = 14 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <circle cx="7" cy="7" r="4.2" />
+      <path d="m10.2 10.2 3.3 3.3" />
+    </svg>
+  );
+}
+
+export function TrashIcon({ size = 14 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <path d="M3 4.5h10M6.5 4.5V3h3v1.5M4.5 4.5l.6 8.5h5.8l.6-8.5" />
+    </svg>
+  );
+}
+
+export function EyeIcon({ size = 14 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <path d="M1.8 8s2.3-4 6.2-4 6.2 4 6.2 4-2.3 4-6.2 4-6.2-4-6.2-4Z" />
+      <circle cx="8" cy="8" r="1.8" />
+    </svg>
+  );
+}
+
+/** Viewfinder corners, used for the include-open-document toggle. */
+export function FocusIcon({ size = 14 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <path d="M2.5 6V4.5a2 2 0 0 1 2-2H6" />
+      <path d="M10 2.5h1.5a2 2 0 0 1 2 2V6" />
+      <path d="M13.5 10v1.5a2 2 0 0 1-2 2H10" />
+      <path d="M6 13.5H4.5a2 2 0 0 1-2-2V10" />
+    </svg>
+  );
+}