@cueloop/client 0.1.0-alpha.11 → 0.1.0-alpha.12

package/src/session-controller.ts

@@ -7,6 +7,7 @@
  * App subscribes to snapshots and keeps only view state.
  */
 
+import { SystemClock, type Clock, type TimerHandle } from "@opentui/core";
 import { DaemonClient } from "@cueloop/daemon/client";
 import {
   cutBlock,
@@ -57,6 +58,8 @@ export interface ReviewControllerOptions {
   /** Observer mode: stored for the key reducer's read-only gate. */
   readOnly?: boolean;
   onExit?: (code: number) => void;
+  /** Timer source for the auto-close countdown; tests inject a ManualClock. */
+  clock?: Clock;
 }
 
 export interface ReviewController {
@@ -118,13 +121,15 @@ class Controller implements ReviewController {
   private autoClose: AutoClose = "off";
   private obsidian: ObsidianConfig | null = null;
   private exporters = new Map<string, Exporter>();
-  private countdown: ReturnType<typeof setTimeout> | undefined;
+  private readonly clock: Clock;
+  private countdown: TimerHandle | undefined;
   /** Projections keyed by session identity so renders reuse one computation. */
   private derivedFor: ReviewSession | null = null;
   private derived: { display: DisplayBlock[]; rows: DiffRow[] } = { display: [], rows: [] };
 
   constructor(private readonly opts: ReviewControllerOptions) {
     this.readOnly = opts.readOnly ?? false;
+    this.clock = opts.clock ?? new SystemClock();
   }
 
   subscribe = (listener: () => void): (() => void) => {
@@ -165,10 +170,15 @@ class Controller implements ReviewController {
 
   close(): void {
     this.closed = true;
-    clearTimeout(this.countdown);
+    this.clearCountdown();
     this.client?.close();
   }
 
+  private clearCountdown(): void {
+    if (this.countdown !== undefined) this.clock.clearTimeout(this.countdown);
+    this.countdown = undefined;
+  }
+
   applyConfig(cfg: CueloopConfig): void {
     this.autoClose = cfg.ui.autoClose;
     this.obsidian = cfg.integrations.obsidian;
@@ -209,12 +219,23 @@ class Controller implements ReviewController {
     return s ? (s.workingCopy ?? s.artifact.content) : "";
   }
 
+  // Refreshes race the connection teardown: an event can arrive while close()
+  // is rejecting in-flight requests, and a fire-and-forget refresh must never
+  // surface that as an unhandled rejection.
   private async refreshSession(id: string): Promise<void> {
-    if (this.client) this.update({ session: await this.client.sessionGet(id) });
+    try {
+      if (this.client) this.update({ session: await this.client.sessionGet(id) });
+    } catch (error) {
+      if (!this.closed) this.setStatus(error instanceof Error ? error.message : String(error));
+    }
   }
 
   private async refreshInbox(): Promise<void> {
-    if (this.client) this.update({ inbox: await this.client.sessionList({ status: "pending" }) });
+    try {
+      if (this.client) this.update({ inbox: await this.client.sessionList({ status: "pending" }) });
+    } catch (error) {
+      if (!this.closed) this.setStatus(error instanceof Error ? error.message : String(error));
+    }
   }
 
   /** Optimistic apply: the daemon response is the next session snapshot. */
@@ -370,18 +391,18 @@ class Controller implements ReviewController {
   private startCounting(remaining: number): void {
     if (remaining <= 0) return this.finishReview();
     this.update({ completion: { phase: "counting", remaining } });
-    this.countdown = setTimeout(() => this.startCounting(remaining - 1), 1000);
+    this.countdown = this.clock.setTimeout(() => this.startCounting(remaining - 1), 1000);
   }
 
   finishReview(): void {
-    clearTimeout(this.countdown);
+    this.clearCountdown();
     const pane = returnPaneFor(this.snap.session?.artifact.meta.herdrPane);
     if (pane) focusHerdrPane(pane);
     this.opts.onExit?.(0);
   }
 
   dismissCompletion(): void {
-    clearTimeout(this.countdown);
+    this.clearCountdown();
     this.update({ completion: { phase: "dismissed" } });
   }
 

package/src/test-support.ts

@@ -0,0 +1,87 @@
+/**
+ * Shared driving helpers for the virtual-terminal App suites: key presses
+ * settle through a macrotask yield (input parser + React scheduler), one
+ * render pass, and the renderer's visual-idle wait - no fixed-duration
+ * sleeps. Waits on daemon round-trips go through waitForFrame/waitFor with
+ * generous pass budgets.
+ */
+
+import type { TestRendererSetup } from "@opentui/core/testing";
+
+/** Pass budget for waits that include daemon or subprocess round-trips. */
+export const WAIT_PASSES = { maxPasses: 400 };
+
+/**
+ * One macrotask yield lets the input parser and the React scheduler run,
+ * then a render pass commits the result before the visual-idle wait.
+ */
+export async function settle(setup: TestRendererSetup): Promise<void> {
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  await setup.renderOnce();
+  await setup.waitForVisualIdle();
+}
+
+/** Drive one key press: letters type as text; named keys use KeyCodes ids. */
+export async function press(setup: TestRendererSetup, key: string): Promise<void> {
+  if (key === "enter") setup.mockInput.pressKey("RETURN");
+  else if (key === "escape") setup.mockInput.pressKey("ESCAPE");
+  else if (key === "backspace") setup.mockInput.pressKey("BACKSPACE");
+  else if (key === "left") setup.mockInput.pressKey("ARROW_LEFT");
+  else if (key === "right") setup.mockInput.pressKey("ARROW_RIGHT");
+  else return typeText(setup, key);
+  await settle(setup);
+}
+
+export async function typeText(setup: TestRendererSetup, text: string): Promise<void> {
+  await setup.mockInput.typeText(text);
+  await settle(setup);
+}
+
+const WAIT_DEADLINE_MS = 30_000;
+
+/**
+ * waitForFrame gives up as soon as the renderer is idle, but external timers
+ * (the parser's bare-ESC window, daemon IO, spawned editors) settle on the
+ * event loop while nothing is scheduled. Between attempts, one real
+ * event-loop turn plus a render pass lets those land; the deadline bounds
+ * the whole wait.
+ */
+async function waitForFramePredicate(
+  setup: TestRendererSetup,
+  predicate: (frame: string) => boolean,
+): Promise<string> {
+  const deadline = Date.now() + WAIT_DEADLINE_MS;
+  for (;;) {
+    try {
+      return await setup.waitForFrame(predicate, { maxPasses: 50 });
+    } catch (error) {
+      if (Date.now() > deadline) throw error;
+      await new Promise((resolve) => setTimeout(resolve, 1));
+      await setup.renderOnce();
+    }
+  }
+}
+
+/** Wait until a state predicate holds (daemon round-trips included). */
+export async function waitForState(setup: TestRendererSetup, predicate: () => boolean): Promise<void> {
+  const deadline = Date.now() + WAIT_DEADLINE_MS;
+  for (;;) {
+    try {
+      return await setup.waitFor(predicate, { maxPasses: 50 });
+    } catch (error) {
+      if (Date.now() > deadline) throw error;
+      await new Promise((resolve) => setTimeout(resolve, 1));
+      await setup.renderOnce();
+    }
+  }
+}
+
+/** Wait until the frame contains the needle (daemon round-trips included). */
+export async function waitForText(setup: TestRendererSetup, needle: string): Promise<string> {
+  return waitForFramePredicate(setup, (frame) => frame.includes(needle));
+}
+
+/** Wait until the frame no longer contains the needle. */
+export async function waitForTextGone(setup: TestRendererSetup, needle: string): Promise<string> {
+  return waitForFramePredicate(setup, (frame) => !frame.includes(needle));
+}

package/src/theme.ts

@@ -23,6 +23,8 @@ export interface Theme {
   markSuggestionBg: string;
   insFg: string;
   delFg: string;
+  /** Dimmed layer painted behind centered dialogs. */
+  backdrop: string;
 }
 
 export const DARK: Theme = {
@@ -43,4 +45,5 @@ export const DARK: Theme = {
   markSuggestionBg: "#20351f",
   insFg: "#62d96b",
   delFg: "#ff6b6b",
+  backdrop: "#14141b",
 }

package/src/view.test.ts

@@ -6,9 +6,10 @@ import {
   marksByDisplay,
   nextWorkBlock,
   overlayMarks,
+  renderedOffsetFor,
   spanKey,
   startSpan,
-  wrapRuns,
+  workRangeForRendered,
 } from "./view";
 import { cutBlock, parseBlocks, restoreBlock, restoreLine, type Annotation } from "@cueloop/schema";
 
@@ -107,22 +108,43 @@ describe("marksByDisplay", () => {
   });
 });
 
-describe("wrapRuns", () => {
-  test("wraps at word boundaries within width", () => {
-    const lines = wrapRuns([{ text: "alpha beta gamma delta", role: "plain", start: 0 }], 11);
-    const rendered = lines.map((l) => l.map((r) => r.text).join(""));
-    expect(rendered.every((l) => l.length <= 11)).toBe(true);
-    expect(rendered.join(" ").replace(/\s+/g, " ").trim()).toBe("alpha beta gamma delta");
+describe("rendered/work offset mapping", () => {
+  test("plain blocks map 1:1 in both directions", () => {
+    const d = buildDisplay("alpha beta gamma\n")[0]!;
+    const runs = blockRuns(d, true);
+    expect(renderedOffsetFor(runs, 6)).toBe(6);
+    expect(workRangeForRendered(runs, 6, 10)).toEqual({ start: 6, end: 10 });
+  });
+
+  test("inline del runs shift rendered offsets in word-diffed blocks", () => {
+    // rendered: "old new words linger" - "old " is a del run without offsets
+    const d = buildDisplay("old words linger\n", "new words linger\n")[0]!;
+    const runs = blockRuns(d, true);
+    const workText = displayText(d);
+    const wordsAt = workText.indexOf("words");
+    const rendered = renderedOffsetFor(runs, wordsAt)!;
+    const renderedText = runs.map((r) => r.text).join("");
+    expect(renderedText.slice(rendered, rendered + "words".length)).toBe("words");
+    // reading a rendered selection over "words" recovers the work range
+    expect(workRangeForRendered(runs, rendered, rendered + "words".length)).toEqual({
+      start: wordsAt,
+      end: wordsAt + "words".length,
+    });
   });
 
-  test("hard-splits words longer than the width", () => {
-    const lines = wrapRuns([{ text: "abcdefghij", role: "plain", start: 0 }], 4);
-    expect(lines.length).toBeGreaterThan(1);
+  test("a rendered selection spanning a del run keeps only positioned text", () => {
+    const d = buildDisplay("old words\n", "new words\n")[0]!;
+    const runs = blockRuns(d, true);
+    const renderedText = runs.map((r) => r.text).join("");
+    // select everything rendered: the work range is the whole work text
+    const range = workRangeForRendered(runs, 0, renderedText.length)!;
+    expect(displayText(d).slice(range.start, range.end)).toBe(displayText(d));
   });
 
-  test("newlines force line breaks (code blocks)", () => {
-    const lines = wrapRuns([{ text: "line1\nline2", role: "plain", start: 0 }], 80);
-    expect(lines.length).toBe(2);
+  test("offsets outside any positioned run map to null", () => {
+    const runs = blockRuns(buildDisplay("short\n")[0]!, true);
+    expect(renderedOffsetFor(runs, 99)).toBeNull();
+    expect(workRangeForRendered(runs, 90, 99)).toBeNull();
   });
 });
 

package/src/view.ts

@@ -1,8 +1,10 @@
 /**
  * The projection pipeline (#22): parse → display blocks (base vs working
- * copy reconciled) → styled runs → wrapped lines. Pure functions - the TUI
- * renders the output, tests assert on it directly. One planning layer:
- * rendering, navigation, and selection all derive from this module.
+ * copy reconciled) → styled runs. Pure functions - the TUI renders the runs
+ * (the native text primitive wraps them), tests assert on them directly.
+ * One planning layer: rendering, navigation, and selection all derive from
+ * this module; the rendered/work offset mappings keep the native selection
+ * addressable over word-diffed blocks.
  */
 
 import {
@@ -219,77 +221,52 @@ export function overlayMarks(runs: StyleRun[], marks: Mark[]): StyleRun[] {
 }
 
 /**
- * Wrap styled runs into lines of at most `width` display cells. Split pieces
- * keep exact `start` offsets into the block text, so wrapped lines stay
- * addressable for the native selection primitive.
+ * Rendered-text offset of a work-text offset within a block's runs. The
+ * rendered text is every run's text in order (inline del runs included);
+ * only positioned runs carry work offsets. Drives the renderer's native
+ * selection from keyboard span offsets - the quote-anchor path depends on
+ * this mapping staying exact.
  */
-export function wrapRuns(runs: StyleRun[], width: number): StyleRun[][] {
-  const lines: StyleRun[][] = [];
-  let line: StyleRun[] = [];
-  let used = 0;
-  const pushLine = () => {
-    lines.push(line);
-    line = [];
-    used = 0;
-  };
+export function renderedOffsetFor(runs: StyleRun[], workOffset: number): number | null {
+  let rendered = 0;
   for (const run of runs) {
-    // split run into word/space tokens; newlines force breaks
-    const tokens = run.text.split(/(\n|\s+)/).filter((t) => t !== "");
-    let consumed = 0;
-    const startAt = (offsetInRun: number): number | null => (run.start === null ? null : run.start + offsetInRun);
-    for (const tok of tokens) {
-      if (tok === "\n") {
-        consumed += 1;
-        pushLine();
-        continue;
-      }
-      if (used + tok.length > width && used > 0 && tok.trim() !== "") pushLine();
-      if (tok.trim() === "" && used === 0 && lines.length > 0) {
-        consumed += tok.length;
-        continue; // no leading spaces after wrap
-      }
-      let slice = tok;
-      while (slice.length > width) {
-        const piece = slice.slice(0, width - used);
-        line.push({ ...run, text: piece, start: startAt(consumed) });
-        consumed += piece.length;
-        slice = slice.slice(piece.length);
-        pushLine();
-      }
-      line.push({ ...run, text: slice, start: startAt(consumed) });
-      consumed += slice.length;
-      used += slice.length;
+    if (run.start !== null && workOffset >= run.start && workOffset < run.start + run.text.length) {
+      return rendered + (workOffset - run.start);
     }
+    rendered += run.text.length;
   }
-  if (line.length || !lines.length) lines.push(line);
-  return lines;
+  return null;
 }
 
 /**
- * Locate a block-text offset inside wrapped run lines: the wrapped line index
- * and the column within the line's rendered run text. Drives the renderer's
- * native selection from keyboard span offsets.
+ * Work-text range covered by a rendered-text selection [start, end). Del runs
+ * and other unpositioned text inside the selection contribute nothing; the
+ * result is the tightest work range whose text the selection touched.
  */
-export function locateOffset(lines: StyleRun[][], offset: number): { lineIndex: number; column: number } | null {
-  for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
-    let column = 0;
-    for (const run of lines[lineIndex]!) {
-      if (run.start !== null && offset >= run.start && offset < run.start + run.text.length) {
-        return { lineIndex, column: column + (offset - run.start) };
-      }
-      column += run.text.length;
+export function workRangeForRendered(
+  runs: StyleRun[],
+  renderedStart: number,
+  renderedEnd: number,
+): { start: number; end: number } | null {
+  let rendered = 0;
+  let range: { start: number; end: number } | null = null;
+  for (const run of runs) {
+    const runRenderedStart = rendered;
+    const runRenderedEnd = rendered + run.text.length;
+    rendered = runRenderedEnd;
+    if (run.start === null) continue;
+    const overlapStart = Math.max(renderedStart, runRenderedStart);
+    const overlapEnd = Math.min(renderedEnd, runRenderedEnd);
+    if (overlapEnd <= overlapStart) continue;
+    const workStart = run.start + (overlapStart - runRenderedStart);
+    const workEnd = run.start + (overlapEnd - runRenderedStart);
+    if (!range) range = { start: workStart, end: workEnd };
+    else {
+      range.start = Math.min(range.start, workStart);
+      range.end = Math.max(range.end, workEnd);
     }
   }
-  return null;
-}
-
-/**
- * Inline compose box height, shared by layout and render so the row math and
- * the mounted box never drift: top border (title), the single-row input, the
- * Save/Cancel button row, bottom border.
- */
-export function composeBoxHeight(): number {
-  return 4;
+  return range;
 }
 
 /** Line delta between two revision contents, for the sheet-header summary. */

package/src/syntax.test.ts

@@ -1,41 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import { filetypeFor, highlightCode } from "./syntax";
-
-const TS = `export function gate(full: number) {
-  // threshold
-  return full < 0.6 ? "blocked" : "clear";
-}`;
-
-describe("highlightCode", () => {
-  test("token text concatenates back to the exact source (verbatim rendering)", async () => {
-    const lines = await highlightCode(TS, "ts");
-    expect(lines).not.toBeNull();
-    const rebuilt = lines!.map((l) => l.map((t) => t.content).join("")).join("\n");
-    expect(rebuilt).toBe(TS);
-  });
-
-  test("keywords, strings, and comments get distinct colors", async () => {
-    const lines = await highlightCode(TS, "ts");
-    const colorOf = (needle: string) => {
-      for (const line of lines!) for (const t of line) if (t.content.includes(needle)) return t.color;
-      return undefined;
-    };
-    const kw = colorOf("export");
-    const str = colorOf("blocked");
-    const comment = colorOf("threshold");
-    expect(kw).toBeDefined();
-    expect(str).toBeDefined();
-    expect(comment).toBeDefined();
-    expect(new Set([kw, str, comment]).size).toBe(3);
-  });
-
-  test("unknown languages return null and render unstyled", async () => {
-    expect(await highlightCode("whatever", "brainfog")).toBeNull();
-    expect(await highlightCode("plain", undefined)).toBeNull();
-  });
-
-  test("fence aliases map to real grammars", async () => {
-    expect(await highlightCode("x = 1", "py")).not.toBeNull();
-    expect(await highlightCode('echo "hi"', "sh")).not.toBeNull();
-  });
-});

package/src/syntax.ts

@@ -1,88 +0,0 @@
-/**
- * Code-block syntax highlighting via Shiki (#67): TextMate-grammar tokens
- * colored by a theme built from cueloop's tokens. The highlighter loads
- * lazily on the first code block; unknown languages render unstyled.
- */
-
-import { DARK as T } from "./theme";
-
-export interface CodeToken {
-  content: string;
-  color?: string;
-}
-
-type Highlighter = {
-  codeToTokensBase(code: string, opts: { lang: string; theme: string }): { content: string; color?: string }[][];
-  getLoadedLanguages(): string[];
-};
-
-const LANGS = ["typescript", "tsx", "javascript", "jsx", "json", "bash", "python", "rust", "go", "yaml", "diff", "markdown", "toml", "sql", "html", "css"];
-
-/** Markdown fence info → Shiki language id. */
-export function filetypeFor(lang?: string): string {
-  const l = (lang ?? "").toLowerCase();
-  const map: Record<string, string> = {
-    ts: "typescript",
-    js: "javascript",
-    py: "python",
-    rb: "ruby",
-    rs: "rust",
-    sh: "bash",
-    shell: "bash",
-    zsh: "bash",
-    yml: "yaml",
-  };
-  return map[l] ?? l;
-}
-
-function cueloopTheme() {
-  const scope = (scopes: string, foreground: string, fontStyle?: string) => ({
-    scope: scopes.split(", "),
-    settings: fontStyle ? { foreground, fontStyle } : { foreground },
-  });
-  return {
-    name: "cueloop",
-    type: "dark" as const,
-    colors: { "editor.background": T.elevated, "editor.foreground": T.textMuted },
-    settings: [
-      { settings: { foreground: T.textMuted } },
-      scope("comment, punctuation.definition.comment", T.textDim, "italic"),
-      scope("string, string.quoted, punctuation.definition.string", T.green),
-      scope("constant.numeric, constant.language, constant.character", T.blue),
-      scope("keyword, storage, storage.type, storage.modifier, keyword.control", T.accent),
-      scope("entity.name.function, support.function, meta.function-call", T.text),
-      scope("entity.name.type, entity.name.class, support.type, support.class", T.blue),
-      scope("variable, variable.other, variable.parameter", T.textMuted),
-      scope("entity.name.tag", T.accent),
-      scope("entity.other.attribute-name", T.blue),
-      scope("punctuation, meta.brace", T.textDim),
-      scope("keyword.operator", T.textDim),
-    ],
-  };
-}
-
-let highlighterPromise: Promise<Highlighter | null> | null = null;
-
-function getHighlighter(): Promise<Highlighter | null> {
-  highlighterPromise ??= import("shiki")
-    .then((shiki) => shiki.createHighlighter({ themes: [cueloopTheme()], langs: LANGS }) as Promise<Highlighter>)
-    .catch(() => null); // highlighting is an enhancement, never a blocker
-  return highlighterPromise;
-}
-
-/**
- * Tokenize code into styled lines. Token text concatenates back to the exact
- * source line, so verbatim rendering (indentation, no wrap) is preserved.
- * Returns null when the language is unknown or the highlighter is unavailable.
- */
-export async function highlightCode(content: string, lang?: string): Promise<CodeToken[][] | null> {
-  const language = filetypeFor(lang);
-  if (!language) return null;
-  const highlighter = await getHighlighter();
-  if (!highlighter || !highlighter.getLoadedLanguages().includes(language)) return null;
-  try {
-    return highlighter.codeToTokensBase(content, { lang: language, theme: "cueloop" });
-  } catch {
-    return null;
-  }
-}