@cueloop/client 0.1.0-alpha.6 → 0.1.0-alpha.61

package/src/theme.ts

@@ -1,12 +1,12 @@
 /**
- * Semantic theme tokens (#22). Values carry over from the design-system
+ * Semantic theme tokens. Values carry over from the design-system
  * prototypes (tokens.css). One built-in dark theme for now; the theme
  * registry (palette-derived themes, terminal theme, user overrides) layers
  * on top of these slots without touching consumers.
  */
 
 export interface Theme {
-  bg: string;
+  background: string;
   panel: string;
   elevated: string;
   border: string;
@@ -18,16 +18,37 @@ export interface Theme {
   green: string;
   red: string;
   blue: string;
-  cursorBg: string;
-  markCommentBg: string;
-  markSuggestionBg: string;
-  insFg: string;
-  delFg: string;
+  cursorBackground: string;
+  markCommentBackground: string;
+  insertedForeground: string;
+  deletedForeground: string;
+  /** Layer behind centered dialogs; transparent keeps the session visible. */
+  backdrop: string;
+}
+
+/**
+ * The dimmed variant behind the walk wizard: every reading color drops to
+ * the dim token so the file list stays legible context, not competition.
+ * Layout tokens (backgrounds, cursor) keep their values.
+ */
+export function dimmedTheme(theme: Theme): Theme {
+  return {
+    ...theme,
+    text: theme.textDim,
+    textMuted: theme.textDim,
+    accent: theme.textDim,
+    green: theme.textDim,
+    red: theme.textDim,
+    blue: theme.textDim,
+    insertedForeground: theme.textDim,
+    deletedForeground: theme.textDim,
+  };
 }
 
 export const DARK: Theme = {
-  bg: "#1f1f29",
-  panel: "#1a1a23",
+  /* Unpainted so the terminal background shows through; override in [theme]. */
+  background: "transparent",
+  panel: "transparent",
   elevated: "#23232f",
   border: "#3a3a4a",
   text: "#e4e6ec",
@@ -36,11 +57,37 @@ export const DARK: Theme = {
   accent: "#f5a3a3",
   accentInk: "#2a1416",
   green: "#62d96b",
-  red: "#ff6b6b",
-  blue: "#84a6e8",
-  cursorBg: "#33262a",
-  markCommentBg: "#3d2a2e",
-  markSuggestionBg: "#20351f",
-  insFg: "#62d96b",
-  delFg: "#ff6b6b",
-}
+  red: "#f08080",
+  blue: "#a9c8f5",
+  cursorBackground: "#33262a",
+  markCommentBackground: "#3d2a2e",
+  insertedForeground: "#62d96b",
+  deletedForeground: "#ff6b6b",
+  backdrop: "transparent",
+};
+
+/**
+ * The branded transparent theme for a LIGHT terminal: same unpainted
+ * background, but every reading color darkens so text is legible on a white
+ * terminal instead of light-on-light. Chosen when the terminal reports a light
+ * background; the dark variant above is the default and the fallback.
+ */
+export const LIGHT: Theme = {
+  background: "transparent",
+  panel: "transparent",
+  elevated: "#ececf2",
+  border: "#c7c7d2",
+  text: "#1c1d24",
+  textMuted: "#4b5162",
+  textDim: "#868c9c",
+  accent: "#b5495b",
+  accentInk: "#ffffff",
+  green: "#2f8a3e",
+  red: "#c0392b",
+  blue: "#2f6fb0",
+  cursorBackground: "#e6e2ea",
+  markCommentBackground: "#f2e2e8",
+  insertedForeground: "#2f8a3e",
+  deletedForeground: "#c0392b",
+  backdrop: "transparent",
+};

package/src/use-settings-dialog.tsx

@@ -0,0 +1,275 @@
+import React, { useState, type Dispatch, type SetStateAction } from "react";
+import {
+  DEFAULT_QUICK_ACTIONS,
+  persistActions,
+  persistAutoClose,
+  persistTheme,
+  type AutoClose,
+  type QuickAction,
+} from "./config";
+import {
+  composeTheme,
+  THEME_LABELS,
+  THEME_NAMES,
+  type Appearance,
+  type ThemeName,
+} from "./theme-presets";
+import type { Theme } from "./theme";
+import type { ReviewPanelMode } from "./review-panel";
+import type { SettingsCategory } from "./components/SettingsDialog";
+import { QuickActionsEditor } from "./components/quick-actions-editor";
+import type { ReviewController } from "./session-controller";
+
+export interface SettingsNav {
+  categoryId: string;
+  rowIndex: number;
+  zone: "nav" | "body";
+}
+
+export interface SettingsDialogModel {
+  settingsNav: SettingsNav;
+  actionsExpandedIndex: number | null;
+  setActionsExpandedIndex: Dispatch<SetStateAction<number | null>>;
+  settingsCategories: SettingsCategory[];
+  settingsValues: Record<string, string>;
+  cycleSetting: (rowKey: string) => void;
+  handleSettingsKey: (name: string) => void;
+  onCategorySelect: (categoryId: string) => void;
+}
+
+const DOWN_KEYS = new Set(["j", "down"]);
+const UP_KEYS = new Set(["k", "up"]);
+const ENTER_BODY_KEYS = new Set(["l", "tab", "return"]);
+const ACTIVATE_KEYS = new Set(["return", "space", "l"]);
+
+function moveNavZone(
+  name: string,
+  categoryIndex: number,
+  categories: SettingsCategory[],
+): SettingsNav | null {
+  if (DOWN_KEYS.has(name))
+    return {
+      categoryId: categories[Math.min(categories.length - 1, categoryIndex + 1)]!.id,
+      rowIndex: 0,
+      zone: "nav",
+    };
+  if (UP_KEYS.has(name))
+    return { categoryId: categories[Math.max(0, categoryIndex - 1)]!.id, rowIndex: 0, zone: "nav" };
+  if (ENTER_BODY_KEYS.has(name))
+    return { categoryId: categories[categoryIndex]!.id, rowIndex: 0, zone: "body" };
+
+  return null;
+}
+
+function moveBodyRow(name: string, nav: SettingsNav, rowCount: number): SettingsNav | null {
+  if (DOWN_KEYS.has(name)) return { ...nav, rowIndex: Math.min(rowCount - 1, nav.rowIndex + 1) };
+  if (UP_KEYS.has(name)) return { ...nav, rowIndex: Math.max(0, nav.rowIndex - 1) };
+  if (name === "h" || name === "tab") return { ...nav, zone: "nav" };
+
+  return null;
+}
+
+export function useSettingsDialog(params: {
+  theme: Theme;
+  appearance: Appearance;
+  autoClose: AutoClose;
+  setAutoClose: Dispatch<SetStateAction<AutoClose>>;
+  reviewMode: ReviewPanelMode;
+  setReviewMode: Dispatch<SetStateAction<ReviewPanelMode>>;
+  themeName: ThemeName;
+  setThemeName: Dispatch<SetStateAction<ThemeName>>;
+  themeOverrides: Partial<Theme>;
+  setTheme: Dispatch<SetStateAction<Theme>>;
+  quickActions: QuickAction[];
+  setQuickActions: Dispatch<SetStateAction<QuickAction[]>>;
+  controller: ReviewController;
+  setMenuDialog: Dispatch<SetStateAction<"keybinds" | "settings" | null>>;
+}): SettingsDialogModel {
+  const {
+    theme,
+    appearance,
+    autoClose,
+    setAutoClose,
+    reviewMode,
+    setReviewMode,
+    themeName,
+    setThemeName,
+    themeOverrides,
+    setTheme,
+    quickActions,
+    setQuickActions,
+    controller,
+    setMenuDialog,
+  } = params;
+
+  const [settingsNav, setSettingsNav] = useState<SettingsNav>({
+    categoryId: "general",
+    rowIndex: 0,
+    zone: "body",
+  });
+  const [actionsExpandedIndex, setActionsExpandedIndex] = useState<number | null>(null);
+
+  const commitActions = (next: QuickAction[]): void => {
+    setQuickActions(next);
+    persistActions(next);
+  };
+  const editActionMetadata = (index: number, metadata: string): void =>
+    commitActions(
+      quickActions.map((action, actionIndex) =>
+        actionIndex === index
+          ? { ...action, metadata: metadata.trim() ? metadata : undefined }
+          : action,
+      ),
+    );
+  const resetActions = (): void => {
+    setActionsExpandedIndex(null);
+    commitActions(DEFAULT_QUICK_ACTIONS.map((action) => ({ ...action })));
+  };
+  const addAction = (): void => {
+    setSettingsNav((state) => ({ ...state, zone: "body", rowIndex: quickActions.length }));
+    commitActions([...quickActions, { prompt: "New action" }]);
+  };
+
+  const settingsCategories: SettingsCategory[] = [
+    {
+      id: "general",
+      name: "General",
+      description: "submission behaviour",
+      rows: [
+        {
+          key: "autoClose",
+          label: "Auto-close on submit",
+          kind: "cycle",
+          options: ["off", "3s", "10s"],
+        },
+      ],
+    },
+    {
+      id: "display",
+      name: "Display",
+      description: "the review panel",
+      rows: [
+        {
+          key: "reviewPanel",
+          label: "Review panel",
+          kind: "cycle",
+          options: ["expanded", "compact", "hidden"],
+        },
+      ],
+    },
+    {
+      id: "appearance",
+      name: "Appearance",
+      description: "the color theme",
+      rows: [
+        {
+          key: "theme",
+          label: "Theme",
+          kind: "cycle",
+          options: THEME_NAMES.map((name) => THEME_LABELS[name]),
+        },
+      ],
+    },
+    {
+      id: "actions",
+      name: "Actions",
+      description: "quick-action comments",
+      rows: [],
+      customBody: (
+        <QuickActionsEditor
+          actions={quickActions}
+          selectedIndex={settingsNav.categoryId === "actions" ? settingsNav.rowIndex : -1}
+          expandedIndex={actionsExpandedIndex}
+          onToggleExpand={(index) => {
+            setSettingsNav((state) => ({ ...state, zone: "body", rowIndex: index }));
+            setActionsExpandedIndex((current) => (current === index ? null : index));
+          }}
+          onEditMetadata={editActionMetadata}
+          onReset={resetActions}
+          onAdd={addAction}
+          theme={theme}
+        />
+      ),
+    },
+  ];
+  const settingsValues = {
+    autoClose: autoClose === "off" ? "off" : `${autoClose}s`,
+    reviewPanel: reviewMode,
+    theme: THEME_LABELS[themeName],
+  };
+  const cycleSetting = (rowKey: string): void => {
+    if (rowKey === "autoClose") {
+      const next: AutoClose = autoClose === "off" ? 3 : autoClose === 3 ? 10 : "off";
+
+      setAutoClose(next);
+      persistAutoClose(next);
+    } else if (rowKey === "reviewPanel") {
+      const order: ReviewPanelMode[] = ["expanded", "compact", "hidden"];
+      const next = order[(order.indexOf(reviewMode) + 1) % order.length]!;
+
+      setReviewMode(next);
+      controller.saveReviewPanel({ mode: next });
+    } else if (rowKey === "theme") {
+      const next = THEME_NAMES[(THEME_NAMES.indexOf(themeName) + 1) % THEME_NAMES.length]!;
+
+      setThemeName(next);
+      setTheme(composeTheme(next, themeOverrides, appearance));
+      persistTheme(next);
+    }
+  };
+
+  const onCategorySelect = (categoryId: string): void => {
+    setActionsExpandedIndex(null);
+    setSettingsNav({ categoryId, rowIndex: 0, zone: "body" });
+  };
+
+  const handleSettingsKey = (name: string): void => {
+    // an open system-prompt input owns typing; only esc (close it) escapes here
+    if (actionsExpandedIndex !== null) {
+      if (name === "escape") setActionsExpandedIndex(null);
+
+      return;
+    }
+    if (name === "escape") return void setMenuDialog(null);
+    const categoryIndex = settingsCategories.findIndex(
+      (category) => category.id === settingsNav.categoryId,
+    );
+    const category = settingsCategories[categoryIndex]!;
+
+    if (settingsNav.zone === "nav") {
+      const next = moveNavZone(name, categoryIndex, settingsCategories);
+
+      if (next) setSettingsNav(next);
+
+      return;
+    }
+    // the Actions category is a list of quick actions plus a trailing "add" row
+    if (category.id === "actions") {
+      const moved = moveBodyRow(name, settingsNav, quickActions.length + 1);
+
+      if (moved) return void setSettingsNav(moved);
+      if (ACTIVATE_KEYS.has(name)) {
+        if (settingsNav.rowIndex === quickActions.length) addAction();
+        else setActionsExpandedIndex(settingsNav.rowIndex);
+      }
+
+      return;
+    }
+    const moved = moveBodyRow(name, settingsNav, category.rows.length);
+
+    if (moved) return void setSettingsNav(moved);
+    if (name === "return" || name === "space")
+      cycleSetting(category.rows[settingsNav.rowIndex]!.key);
+  };
+
+  return {
+    settingsNav,
+    actionsExpandedIndex,
+    setActionsExpandedIndex,
+    settingsCategories,
+    settingsValues,
+    cycleSetting,
+    handleSettingsKey,
+    onCategorySelect,
+  };
+}

package/src/version.ts

@@ -0,0 +1,5 @@
+/** The published client version, read from the package manifest. */
+
+import manifest from "../package.json" with { type: "json" };
+
+export const CLIENT_VERSION: string = manifest.version;

package/src/view-diff.test.ts

@@ -21,23 +21,32 @@ index 111..222 100644
 
 describe("diffRows", () => {
   test("flattens files, hunks, and signed lines with line numbers", () => {
+    // Act
     const rows = diffRows(PATCH);
-    expect(rows[0]).toMatchObject({ t: "file", file: "src/store.ts" });
-    expect(rows[1]!.t).toBe("hunk");
-    const del = rows.find((r) => r.t === "del")!;
+
+    // Assert
+    expect(rows[0]).toMatchObject({ kind: "file", file: "src/store.ts" });
+    expect(rows[1]!.kind).toBe("hunk");
+    const del = rows.find((row) => row.kind === "del")!;
+
     expect(del.text).toContain("private items = [];");
     expect(del.oldLine).toBe(3);
-    const adds = rows.filter((r) => r.t === "add");
+    const adds = rows.filter((row) => row.kind === "add");
+
     expect(adds[0]!.text).toContain("new Map()");
     expect(adds[0]!.newLine).toBe(3);
     expect(adds[1]!.newLine).toBe(4);
     // two hunks
-    expect(rows.filter((r) => r.t === "hunk").length).toBe(2);
+    expect(rows.filter((row) => row.kind === "hunk").length).toBe(2);
   });
 
   test("context lines carry both line numbers", () => {
+    // Act
     const rows = diffRows(PATCH);
-    const ctx = rows.find((r) => r.t === "ctx")!;
+
+    // Assert
+    const ctx = rows.find((row) => row.kind === "ctx")!;
+
     expect(ctx.oldLine).toBe(1);
     expect(ctx.newLine).toBe(1);
   });
@@ -45,9 +54,14 @@ describe("diffRows", () => {
 
 describe("diffRowAnchor", () => {
   test("quote is the line, neighbors are the context selectors", () => {
+    // Arrange
     const rows = diffRows(PATCH);
-    const idx = rows.findIndex((r) => r.text.includes("new Map()"));
-    const anchor = diffRowAnchor(rows, idx);
+    const rowIndex = rows.findIndex((row) => row.text.includes("new Map()"));
+
+    // Act
+    const anchor = diffRowAnchor(rows, rowIndex);
+
+    // Assert
     expect(anchor.quote).toContain("new Map()");
     expect(anchor.prefix.length).toBeGreaterThan(0);
     expect(anchor.suffix.length).toBeGreaterThan(0);

package/src/view-diff.ts

@@ -1,5 +1,5 @@
 /**
- * Diff artifact projection (#18 slice 3): flatten @pierre/diffs' parsed
+ * Diff artifact projection: flatten @pierre/diffs' parsed
  * patch model into render rows. Line-anchored annotations use the same
  * quote-primary anchors as plans: quote = the line content, prefix/suffix =
  * the neighbor lines - so the whole anchor/feedback pipeline is shared.
@@ -7,10 +7,10 @@
 
 import { parsePatchFiles, type FileDiffMetadata } from "@pierre/diffs";
 
-export type DiffRowType = "file" | "hunk" | "ctx" | "add" | "del";
+export type DiffRowKind = "file" | "hunk" | "ctx" | "add" | "del";
 
 export interface DiffRow {
-  t: DiffRowType;
+  kind: DiffRowKind;
   text: string;
   file: string;
   oldLine?: number;
@@ -20,37 +20,39 @@ export interface DiffRow {
 export function diffRows(patchText: string): DiffRow[] {
   const rows: DiffRow[] = [];
   const patches = parsePatchFiles(patchText);
+
   for (const patch of patches) {
     for (const file of patch.files) {
-      rows.push({ t: "file", text: fileLabel(file), file: file.name });
+      rows.push({ kind: "file", text: fileLabel(file), file: file.name });
       for (const hunk of file.hunks) {
-        rows.push({ t: "hunk", text: hunk.hunkSpecs ?? "@@", file: file.name });
+        rows.push({ kind: "hunk", text: hunk.hunkSpecs ?? "@@", file: file.name });
         let oldLine = hunk.deletionStart;
         let newLine = hunk.additionStart;
-        for (const seg of hunk.hunkContent) {
-          if (seg.type === "context") {
-            for (let i = 0; i < seg.lines; i++) {
+
+        for (const segment of hunk.hunkContent) {
+          if (segment.type === "context") {
+            for (let lineOffset = 0; lineOffset < segment.lines; lineOffset++) {
               rows.push({
-                t: "ctx",
-                text: file.additionLines[seg.additionLineIndex + i] ?? "",
+                kind: "ctx",
+                text: file.additionLines[segment.additionLineIndex + lineOffset] ?? "",
                 file: file.name,
                 oldLine: oldLine++,
                 newLine: newLine++,
               });
             }
           } else {
-            for (let i = 0; i < seg.deletions; i++) {
+            for (let lineOffset = 0; lineOffset < segment.deletions; lineOffset++) {
               rows.push({
-                t: "del",
-                text: file.deletionLines[seg.deletionLineIndex + i] ?? "",
+                kind: "del",
+                text: file.deletionLines[segment.deletionLineIndex + lineOffset] ?? "",
                 file: file.name,
                 oldLine: oldLine++,
               });
             }
-            for (let i = 0; i < seg.additions; i++) {
+            for (let lineOffset = 0; lineOffset < segment.additions; lineOffset++) {
               rows.push({
-                t: "add",
-                text: file.additionLines[seg.additionLineIndex + i] ?? "",
+                kind: "add",
+                text: file.additionLines[segment.additionLineIndex + lineOffset] ?? "",
                 file: file.name,
                 newLine: newLine++,
               });
@@ -60,27 +62,41 @@ export function diffRows(patchText: string): DiffRow[] {
       }
     }
   }
+
   return rows;
 }
 
 function fileLabel(file: FileDiffMetadata): string {
-  return file.prevName && file.prevName !== file.name ? `${file.prevName} → ${file.name}` : file.name;
+  return file.prevName && file.prevName !== file.name
+    ? `${file.prevName} → ${file.name}`
+    : file.name;
 }
 
 /** Quote-primary anchor for a diff row: neighbors as context selectors. */
-export function diffRowAnchor(rows: DiffRow[], idx: number): { quote: string; prefix: string; suffix: string } {
-  const row = rows[idx]!;
-  const prev = rows[idx - 1];
-  const next = rows[idx + 1];
+export function diffRowAnchor(
+  rows: DiffRow[],
+  rowIndex: number,
+): { quote: string; prefix: string; suffix: string } {
+  const row = rows[rowIndex]!;
+  const prev = rows[rowIndex - 1];
+  const next = rows[rowIndex + 1];
+
   return {
     quote: row.text,
-    prefix: prev && (prev.t === "ctx" || prev.t === "add" || prev.t === "del") ? prev.text.slice(-24) : "",
-    suffix: next && (next.t === "ctx" || next.t === "add" || next.t === "del") ? next.text.slice(0, 24) : "",
+    prefix:
+      prev && (prev.kind === "ctx" || prev.kind === "add" || prev.kind === "del")
+        ? prev.text.slice(-24)
+        : "",
+    suffix:
+      next && (next.kind === "ctx" || next.kind === "add" || next.kind === "del")
+        ? next.text.slice(0, 24)
+        : "",
   };
 }
 
 /** Location label for the rail and feedback: file:newLine (or old for del). */
 export function diffRowLocation(row: DiffRow): string {
   const line = row.newLine ?? row.oldLine;
+
   return line !== undefined ? `${row.file}:${line}` : row.file;
 }

package/src/view-plan.regression.test.ts

@@ -0,0 +1,60 @@
+import { describe, expect, test } from "bun:test";
+import {
+  blockRuns,
+  buildDisplay,
+  displayText,
+  renderedOffsetFor,
+  workRangeForRendered,
+} from "./view-plan";
+
+// M0 (#232): lock the renderer's current StyleRun output and offset round-trips
+// before the inline-tokenizer milestones (M1-M5) change blockRuns. The snapshots
+// capture today's runs, so a later milestone's diff is explicit and reviewable.
+// The round-trip assertions are the durable invariant: a visible word's rendered
+// selection must always recover that word's *source* (block.text) offsets, even
+// once inline markers are concealed - this is what keeps quote anchors exact.
+
+const DOC = `# Heading with **bold**
+
+A paragraph with **strong**, *em*, \`code\`, ~~strike~~ and a [label](https://example.com).
+
+- a list item with *emphasis*
+`;
+
+const blocks = buildDisplay(DOC);
+
+describe("view-plan regression harness (M0)", () => {
+  test("blockRuns output is stable across the representative blocks", () => {
+    // Arrange / Act
+    const runsByBlock = blocks.map((block) => ({
+      type: block.type,
+      text: displayText(block),
+      runs: blockRuns(block, true),
+    }));
+
+    // Assert
+    expect(runsByBlock).toMatchSnapshot();
+  });
+
+  // A visible word's source offsets survive the rendered round-trip. Holds at M0
+  // (1:1 today) and must keep holding once M2 conceals markers and the rendered
+  // offset shifts - the recovered work range stays the word's block.text span.
+  const paragraph = blocks.find((block) => displayText(block).includes("strong"))!;
+  const paragraphRuns = blockRuns(paragraph, true);
+  const paragraphText = displayText(paragraph);
+
+  for (const word of ["paragraph", "strong", "strike", "label"]) {
+    test(`rendered selection of "${word}" recovers its block.text offsets`, () => {
+      // Arrange
+      const start = paragraphText.indexOf(word);
+      const rendered = renderedOffsetFor(paragraphRuns, start);
+
+      // Assert
+      expect(rendered).not.toBeNull();
+      expect(workRangeForRendered(paragraphRuns, rendered!, rendered! + word.length)).toEqual({
+        start,
+        end: start + word.length,
+      });
+    });
+  }
+});