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

package/package.json

@@ -1,21 +1,22 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.6",
   "license": "Apache-2.0",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@cueloop/daemon": "0.1.0-alpha.4",
-    "@cueloop/extension-api": "0.1.0-alpha.4",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.4",
-    "@cueloop/schema": "0.1.0-alpha.4",
+    "@cueloop/daemon": "0.1.0-alpha.6",
+    "@cueloop/extension-api": "0.1.0-alpha.6",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.6",
+    "@cueloop/schema": "0.1.0-alpha.6",
     "@opentui/core": "^0.4.3",
     "@opentui/react": "^0.4.3",
+    "@opentui/ssh": "0.4.5",
     "@pierre/diffs": "^1.3.5",
     "react": "^19.2.0",
-    "@opentui/ssh": "0.4.5"
+    "shiki": "^4.4.2"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
@@ -36,5 +37,10 @@
     "type": "git",
     "url": "git+https://github.com/mmurakaru/cueloop.git",
     "directory": "packages/client"
-  }
-}
+  },
+  "homepage": "https://github.com/mmurakaru/cueloop#readme",
+  "bugs": {
+    "url": "https://github.com/mmurakaru/cueloop/issues"
+  },
+  "description": "The cueloop review UI: projection renderer, keyboard grammar, review rail"
+}

package/src/App.autoclose.test.tsx

@@ -0,0 +1,118 @@
+/** Post-submit completion overlay: prompt, opt-in persistence, countdown, dismissal. */
+
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { existsSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { DaemonServer } from "@cueloop/daemon";
+import type { ReviewSession } from "@cueloop/schema";
+import { App } from "./App";
+
+const PLAN = "# Plan\n\nShip the thing.\n";
+
+let home: string;
+let server: DaemonServer;
+let session: ReviewSession;
+let configPath: string;
+
+beforeEach(() => {
+  home = mkdtempSync(join(tmpdir(), "cueloop-close-"));
+  configPath = join(home, "config.toml");
+  process.env.CUELOOP_CONFIG = configPath;
+  server = new DaemonServer({ home, idleExitMs: 0 });
+  server.start();
+  session = server.core.sessionCreate({
+    workspace: { repoRoot: "/repo", branch: "main" },
+    artifact: { type: "plan", content: PLAN, meta: { title: "Plan" } },
+  });
+});
+afterEach(() => {
+  delete process.env.CUELOOP_CONFIG;
+  server.stop();
+  rmSync(home, { recursive: true, force: true });
+});
+
+async function renderApp(onExit?: (code: number) => void) {
+  const setup = await testRender(<App home={home} sessionId={session.id} onExit={onExit} />, {
+    width: 120,
+    height: 30,
+  });
+  for (let i = 0; i < 40 && !setup.captureCharFrame().includes("cueloop"); i++) {
+    await Bun.sleep(25);
+    await setup.renderOnce();
+  }
+  return setup;
+}
+
+type Setup = Awaited<ReturnType<typeof renderApp>>;
+async function press(setup: Setup, k: string): Promise<void> {
+  if (k === "enter") setup.mockInput.pressKey("RETURN");
+  else if (k === "escape") setup.mockInput.pressKey("ESCAPE");
+  else await setup.mockInput.typeText(k);
+  await Bun.sleep(15);
+  await setup.renderOnce();
+}
+
+async function submitApprove(setup: Setup): Promise<void> {
+  await press(setup, "enter"); // open submit (approve default: no pending items)
+  await press(setup, "enter"); // confirm
+  const deadline = Date.now() + 10_000;
+  while (Date.now() < deadline && !setup.captureCharFrame().includes("review approved")) {
+    await Bun.sleep(25);
+    await setup.renderOnce();
+  }
+}
+
+describe("completion overlay", () => {
+  test("submit with auto-close off shows the prompt; ⏎ exits", async () => {
+    let exited = -1;
+    const setup = await renderApp((code) => (exited = code));
+    await submitApprove(setup);
+    const frame = setup.captureCharFrame();
+    expect(frame).toContain("✓ review approved");
+    expect(frame).toContain("a always close after submit");
+    await press(setup, "enter");
+    expect(exited).toBe(0);
+  });
+
+  test("a opts in: persists the config and starts the countdown", async () => {
+    const setup = await renderApp();
+    await submitApprove(setup);
+    await press(setup, "a");
+    expect(setup.captureCharFrame()).toContain("closing in 3s");
+    expect(existsSync(configPath)).toBe(true);
+    expect(readFileSync(configPath, "utf8")).toContain("auto_close = 3");
+  });
+
+  test("esc dismisses to the resolved read-only view", async () => {
+    const setup = await renderApp();
+    await submitApprove(setup);
+    await press(setup, "escape");
+    // a bare ESC sits in the input parser's escape-sequence disambiguation
+    // window before it is delivered - poll for the dismissal
+    const deadline = Date.now() + 5_000;
+    while (Date.now() < deadline && !setup.captureCharFrame().includes("resolved: approve")) {
+      await Bun.sleep(50);
+      await setup.renderOnce();
+    }
+    const frame = setup.captureCharFrame();
+    expect(frame).toContain("resolved: approve");
+    expect(frame).not.toContain("always close after submit");
+  });
+
+  test("configured auto_close counts down and exits without interaction", async () => {
+    writeFileSync(configPath, "[ui]\nauto_close = 1\n");
+    let exited = -1;
+    const setup = await renderApp((code) => (exited = code));
+    await submitApprove(setup);
+    expect(setup.captureCharFrame()).toContain("closing in 1s");
+    const deadline = Date.now() + 10_000;
+    while (Date.now() < deadline && exited === -1) {
+      await Bun.sleep(100);
+      await setup.renderOnce();
+    }
+    expect(exited).toBe(0);
+  }, 20_000);
+});

package/src/App.rendering.test.tsx

@@ -0,0 +1,108 @@
+/** Plan rendering (#67): code blocks verbatim + contained, spacing never collapses. */
+
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { mkdtempSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { DaemonServer } from "@cueloop/daemon";
+import type { ReviewSession } from "@cueloop/schema";
+import { App } from "./App";
+
+const PLAN = `# Render Plan
+
+## Sensor
+
+- wire the duck over MQTT
+
+\`\`\`tsx
+export function Gate({ full }: { full: number }) {
+  const blocked = full < 0.6;
+  return <text>{blocked ? "blocked" : "clear"}</text>;
+}
+\`\`\`
+
+## Gate
+
+Deploys block below the threshold.
+`;
+
+let home: string;
+let server: DaemonServer;
+let session: ReviewSession;
+
+beforeEach(() => {
+  home = mkdtempSync(join(tmpdir(), "cueloop-render-"));
+  server = new DaemonServer({ home, idleExitMs: 0 });
+  server.start();
+  session = server.core.sessionCreate({
+    workspace: { repoRoot: "/repo", branch: "main" },
+    artifact: { type: "plan", content: PLAN, meta: { title: "Render Plan" } },
+  });
+});
+afterEach(() => {
+  server.stop();
+  rmSync(home, { recursive: true, force: true });
+});
+
+async function frame(): Promise<string> {
+  const setup = await testRender(<App home={home} sessionId={session.id} />, { width: 120, height: 36 });
+  const deadline = Date.now() + 10_000;
+  while (Date.now() < deadline && !setup.captureCharFrame().includes("Render Plan")) {
+    await Bun.sleep(25);
+    await setup.renderOnce();
+  }
+  // give the async highlighter a beat, then take the final frame
+  await Bun.sleep(150);
+  await setup.renderOnce();
+  return setup.captureCharFrame();
+}
+
+describe("code blocks", () => {
+  test("lines render verbatim: indentation preserved, no word-wrap", async () => {
+    const f = await frame();
+    expect(f).toContain("  const blocked = full < 0.6;");
+    expect(f).toContain('  return <text>{blocked ? "blocked" : "clear"}</text>;');
+  });
+
+  test("the block carries its language tag", async () => {
+    const f = await frame();
+    expect(f).toContain("tsx");
+  });
+});
+
+describe("block spacing", () => {
+  test("a code block never glues to the list item above it", async () => {
+    const lines = (await frame()).split("\n").map((l) => l.trimEnd());
+    const li = lines.findIndex((l) => l.includes("wire the duck over MQTT"));
+    const codeHeader = lines.findIndex((l) => l.trim().startsWith("tsx"));
+    expect(li).toBeGreaterThan(-1);
+    expect(codeHeader).toBeGreaterThan(li);
+    expect(lines.slice(li + 1, codeHeader).some((l) => l === "")).toBe(true);
+  });
+
+  test("a heading never sits directly on the previous block", async () => {
+    const lines = (await frame()).split("\n").map((l) => l.trimEnd());
+    const gate = lines.findIndex((l) => l.trim() === "Gate");
+    expect(gate).toBeGreaterThan(0);
+    expect(lines[gate - 1]).toBe("");
+  });
+
+  test("consecutive list items stay tight", async () => {
+    const listPlan = "# T\n\n- one\n- two\n";
+    const s2 = server.core.sessionCreate({
+      workspace: { repoRoot: "/repo", branch: "main" },
+      artifact: { type: "plan", content: listPlan, meta: {} },
+    });
+    const setup = await testRender(<App home={home} sessionId={s2.id} />, { width: 120, height: 30 });
+    const deadline = Date.now() + 10_000;
+    while (Date.now() < deadline && !setup.captureCharFrame().includes("one")) {
+      await Bun.sleep(25);
+      await setup.renderOnce();
+    }
+    const lines = setup.captureCharFrame().split("\n").map((l) => l.trimEnd());
+    const one = lines.findIndex((l) => l.includes("- one"));
+    expect(lines[one + 1]).toContain("- two");
+  });
+});

package/src/App.test.tsx

@@ -186,7 +186,8 @@ describe("submit", () => {
     expect(stored.status).toBe("resolved");
     expect(stored.verdict!.kind).toBe("request_changes");
     expect(stored.verdict!.feedback).toContain("Needs a phase list.");
-    expect(setup.captureCharFrame()).toContain("resolved: request changes");
+    // submit hands the reviewer back to the agent via the completion overlay
+    expect(setup.captureCharFrame()).toContain("✎ feedback sent");
   });
 
   test("approve via ←/→ verdict cycling", async () => {

package/src/config.ts

@@ -8,6 +8,8 @@ import { existsSync, readFileSync } from "node:fs";
 import { homedir } from "node:os";
 import { join } from "node:path";
 import { OBSIDIAN_DEFAULTS, type ObsidianConfig } from "@cueloop/integration-obsidian";
+import { writeFileSync, mkdirSync } from "node:fs";
+import { dirname } from "node:path";
 import { DARK, type Theme } from "./theme";
 
 export interface KeymapConfig {
@@ -18,9 +20,13 @@ export interface IntegrationsConfig {
   obsidian: ObsidianConfig;
 }
 
+/** Post-submit behavior: "off" prompts, 0 closes instantly, N counts down. */
+export type AutoClose = "off" | number;
+
 export interface CueloopConfig {
   keys: Record<string, string[]>;
   theme: Theme;
+  ui: { autoClose: AutoClose };
   integrations: IntegrationsConfig;
 }
 
@@ -51,6 +57,7 @@ function layer(base: CueloopConfig, raw: Record<string, unknown>): CueloopConfig
   const out: CueloopConfig = {
     keys: { ...base.keys },
     theme: { ...base.theme },
+    ui: { ...base.ui },
     integrations: { obsidian: { ...base.integrations.obsidian } },
   };
   const keys = raw["keys"] as KeymapConfig | undefined;
@@ -59,6 +66,11 @@ function layer(base: CueloopConfig, raw: Record<string, unknown>): CueloopConfig
       out.keys[action] = Array.isArray(combo) ? combo : [combo];
     }
   }
+  const ui = raw["ui"] as { auto_close?: unknown } | undefined;
+  if (ui && ui.auto_close !== undefined) {
+    if (ui.auto_close === "off") out.ui.autoClose = "off";
+    else if (typeof ui.auto_close === "number" && ui.auto_close >= 0) out.ui.autoClose = ui.auto_close;
+  }
   const theme = raw["theme"] as Partial<Record<keyof Theme, string>> | undefined;
   if (theme) {
     for (const [token, value] of Object.entries(theme)) {
@@ -86,6 +98,7 @@ export function loadConfig(opts: { repoRoot?: string; userConfigPath?: string }
   let config: CueloopConfig = {
     keys: { ...DEFAULT_KEYS },
     theme: { ...DARK },
+    ui: { autoClose: "off" },
     integrations: { obsidian: { ...OBSIDIAN_DEFAULTS } },
   };
   const userPath =
@@ -111,3 +124,27 @@ export function actionFor(keys: Record<string, string[]>, name: string, shift: b
   }
   return undefined;
 }
+
+/**
+ * Persist the auto-close choice into the user config file. Line-level TOML
+ * surgery on the one key we own: replace an existing `auto_close`, or append
+ * an `[ui]` section - a full TOML writer is not worth its weight here.
+ */
+export function persistAutoClose(value: AutoClose, userConfigPath?: string): void {
+  const path =
+    userConfigPath ??
+    process.env.CUELOOP_CONFIG ??
+    join(process.env.XDG_CONFIG_HOME ?? join(homedir(), ".config"), "cueloop", "config.toml");
+  const rendered = value === "off" ? '"off"' : String(value);
+  let text = "";
+  if (existsSync(path)) text = readFileSync(path, "utf8");
+  if (/^\s*auto_close\s*=/m.test(text)) {
+    text = text.replace(/^(\s*)auto_close\s*=.*$/m, `$1auto_close = ${rendered}`);
+  } else if (/^\[ui\]/m.test(text)) {
+    text = text.replace(/^\[ui\]\s*$/m, `[ui]\nauto_close = ${rendered}`);
+  } else {
+    text = text.trimEnd() + (text.trim() ? "\n\n" : "") + `[ui]\nauto_close = ${rendered}\n`;
+  }
+  mkdirSync(dirname(path), { recursive: true });
+  writeFileSync(path, text);
+}

package/src/herdr.test.ts

@@ -0,0 +1,68 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { focusHerdrPane, returnPaneFor } from "./herdr";
+
+let dir: string;
+const savedEnv: Record<string, string | undefined> = {};
+
+beforeEach(() => {
+  dir = mkdtempSync(join(tmpdir(), "cueloop-herdr-"));
+  for (const k of ["HERDR_ENV", "HERDR_PANE_ID", "HERDR_BIN_PATH", "CUELOOP_RETURN_PANE"]) {
+    savedEnv[k] = process.env[k];
+    delete process.env[k];
+  }
+});
+afterEach(() => {
+  for (const [k, v] of Object.entries(savedEnv)) {
+    if (v === undefined) delete process.env[k];
+    else process.env[k] = v;
+  }
+  rmSync(dir, { recursive: true, force: true });
+});
+
+describe("returnPaneFor", () => {
+  test("outside herdr there is never a return target", () => {
+    expect(returnPaneFor("w1:p1")).toBeUndefined();
+  });
+
+  test("env override wins, session meta is the fallback", () => {
+    process.env.HERDR_ENV = "1";
+    process.env.HERDR_PANE_ID = "w1:p9";
+    expect(returnPaneFor("w1:p1")).toBe("w1:p1");
+    process.env.CUELOOP_RETURN_PANE = "w1:p2";
+    expect(returnPaneFor("w1:p1")).toBe("w1:p2");
+  });
+
+  test("returning to our own pane is a no-op", () => {
+    process.env.HERDR_ENV = "1";
+    process.env.HERDR_PANE_ID = "w1:p1";
+    expect(returnPaneFor("w1:p1")).toBeUndefined();
+  });
+});
+
+describe("focusHerdrPane", () => {
+  test("resolves the pane's tab and focuses it", () => {
+    const log = join(dir, "calls.log");
+    const stub = join(dir, "herdr");
+    writeFileSync(
+      stub,
+      `#!/bin/sh
+echo "$@" >> "${log}"
+if [ "$1" = "pane" ]; then echo '{"result":{"pane":{"tab_id":"w1:t3"}}}'; fi
+`,
+    );
+    Bun.spawnSync(["chmod", "+x", stub]);
+    process.env.HERDR_BIN_PATH = stub;
+    expect(focusHerdrPane("w1:p1")).toBe(true);
+    const calls = readFileSync(log, "utf8").trim().split("\n");
+    expect(calls[0]).toBe("pane get w1:p1");
+    expect(calls[1]).toBe("tab focus w1:t3");
+  });
+
+  test("a missing binary never throws", () => {
+    process.env.HERDR_BIN_PATH = join(dir, "nope");
+    expect(focusHerdrPane("w1:p1")).toBe(false);
+  });
+});

package/src/herdr.ts

@@ -0,0 +1,34 @@
+/**
+ * First-class herdr return (#23): a review opened beside an agent should hand
+ * focus back to the agent's pane when it closes, not leave the reviewer on a
+ * dead tab. Detection is the ambient env contract; the return target comes
+ * from CUELOOP_RETURN_PANE (set by whoever opened this pane) or the session's
+ * recorded herdrPane (set by the adapter hook). Everything here is
+ * best-effort: focus failures never block closing the review.
+ */
+
+export function insideHerdr(): boolean {
+  return process.env.HERDR_ENV === "1";
+}
+
+export function returnPaneFor(sessionHerdrPane?: string): string | undefined {
+  if (!insideHerdr()) return undefined;
+  const pane = process.env.CUELOOP_RETURN_PANE ?? sessionHerdrPane;
+  // returning to our own pane would be a no-op at best
+  return pane && pane !== process.env.HERDR_PANE_ID ? pane : undefined;
+}
+
+/** Focus the tab holding the target pane. Synchronous: runs just before exit. */
+export function focusHerdrPane(paneId: string): boolean {
+  const bin = process.env.HERDR_BIN_PATH ?? "herdr";
+  try {
+    const got = Bun.spawnSync([bin, "pane", "get", paneId], { stdout: "pipe", stderr: "ignore" });
+    if (got.exitCode !== 0) return false;
+    const parsed = JSON.parse(got.stdout.toString()) as { result?: { pane?: { tab_id?: string } } };
+    const tab = parsed.result?.pane?.tab_id;
+    if (!tab) return false;
+    return Bun.spawnSync([bin, "tab", "focus", tab], { stdout: "ignore", stderr: "ignore" }).exitCode === 0;
+  } catch {
+    return false;
+  }
+}

package/src/syntax.test.ts

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,88 @@
+/**
+ * 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;
+  }
+}