@cueloop/client 0.1.0-alpha.78 → 0.1.0-alpha.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.78",
+  "version": "0.1.0-alpha.79",
   "description": "The cueloop review UI: projection renderer, keyboard grammar, review rail",
   "homepage": "https://github.com/mmurakaru/cueloop#readme",
   "bugs": {
@@ -27,24 +27,25 @@
     "access": "public"
   },
   "dependencies": {
-    "@cueloop/daemon": "0.1.0-alpha.78",
-    "@cueloop/extension-api": "0.1.0-alpha.78",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.78",
-    "@cueloop/schema": "0.1.0-alpha.78",
-    "@opentui/core": "^0.5.8",
-    "@opentui/keymap": "0.5.8",
-    "@opentui/react": "^0.5.8",
-    "@opentui/ssh": "0.5.8",
-    "@pierre/diffs": "^1.3.6",
+    "@cueloop/daemon": "0.1.0-alpha.79",
+    "@cueloop/extension-api": "0.1.0-alpha.79",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.79",
+    "@cueloop/schema": "0.1.0-alpha.79",
+    "@opentui/core": "^0.5.11",
+    "@opentui/keymap": "0.5.11",
+    "@opentui/react": "^0.5.11",
+    "@opentui/ssh": "0.5.11",
+    "@pierre/diffs": "^1.4.1",
     "@tanstack/virtual-core": "^3.17.9",
     "diff": "^9",
-    "puppeteer-core": "^25.8.0",
+    "puppeteer-core": "^25.9.0",
     "react": "^19.2.0",
-    "valibot": "^1.4.2"
+    "valibot": "^1.4.2",
+    "zustand": "^5.0.15"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
-    "@types/ssh2": "^1.15.5",
+    "@types/ssh2": "^1.15.6",
     "ssh2": "^1.17.0"
   },
   "engines": {

package/src/App.diff.test.tsx

@@ -13,6 +13,8 @@ import {
   clickText,
   dragText,
   isolateUserConfig,
+  navCommand,
+  press,
   pressKey,
   renderReadyApp,
   typeText,
@@ -92,8 +94,11 @@ describe("diff review", () => {
     await waitForText(setup, "● Map needs an eviction story.");
     expect(server.core.sessionGet(session.id).annotations[0]!.anchor.quote).toBe("new Map()");
 
-    // Act - submit with the session chord (cmd+enter, no composer open), confirm request_changes
+    // Act - submit with the session chord (cmd+enter, no composer open), cycle to request changes
     await pressKey(setup, "RETURN", { meta: true });
+    await waitForText(setup, "[Approve]");
+    await press(setup, "right");
+    await waitForText(setup, "[Changes]");
     await pressKey(setup, "RETURN", { meta: true });
 
     // Assert
@@ -138,7 +143,7 @@ describe("diff review", () => {
     const setup = await renderApp();
 
     // Act
-    await pressKey(setup, "c", { meta: true });
+    await navCommand(setup, "c");
 
     // Assert - the body is gone but the band (with its counts) remains
     await waitForState(setup, () => !setup.captureCharFrame().includes("new Map()"));
@@ -159,7 +164,7 @@ describe("diff review", () => {
     const setup = await renderApp();
 
     // Act
-    await pressKey(setup, "x", { meta: true });
+    await navCommand(setup, "x");
 
     // Assert
     await waitForText(setup, "hunk curation needs full file contents");
@@ -187,7 +192,7 @@ describe("diff review", () => {
 
     // Act - place the caret on the added line and reject its change
     await clickText(setup, "new Map()");
-    await pressKey(setup, "x", { meta: true });
+    await navCommand(setup, "x");
 
     // Assert - the single change is gone, so the curated working copy is empty
     await waitForText(setup, "change rejected");

package/src/App.focus.test.ts

@@ -1,11 +1,5 @@
 import { describe, expect, test } from "bun:test";
-import {
-  appLeaderHandled,
-  nextFocusPane,
-  reconciledFocus,
-  threadsNavHandled,
-  visiblePanes,
-} from "./App";
+import { nextFocusPane, reconciledFocus, threadsNavHandled, visiblePanes } from "./App";
 
 describe("threads keyboard nav", () => {
   const base = () => {
@@ -92,56 +86,4 @@ describe("pane focus cycle", () => {
     expect(reconciledFocus(["changes", "project"], "thread")).toBe("changes");
     expect(reconciledFocus([], "thread")).toBeNull();
   });
-
-  test("appLeaderHandled captures the leader for the sidebar panes, then the next key", () => {
-    const leaderCombos = ["ctrl+g"];
-    const pending = { current: false };
-    const ran: string[] = [];
-    const call = (
-      focusedPane: "threads" | "project" | "thread" | "changes",
-      key: { name: string; ctrl?: boolean },
-    ) =>
-      appLeaderHandled({
-        focusedPane,
-        key,
-        leaderCombos,
-        pending,
-        runLeaderCommand: (pressed) => ran.push(pressed.name),
-      });
-
-    expect(call("threads", { name: "g", ctrl: true })).toBe(true);
-    expect(pending.current).toBe(true);
-    expect(call("threads", { name: "tab" })).toBe(true);
-    expect(pending.current).toBe(false);
-    expect(ran).toEqual(["tab"]);
-  });
-
-  test("appLeaderHandled defers on the content panes and swallows escape without a command", () => {
-    const leaderCombos = ["ctrl+g"];
-    let ran = false;
-    const runLeaderCommand = () => (ran = true);
-
-    expect(
-      appLeaderHandled({
-        focusedPane: "thread",
-        key: { name: "ctrl+g" },
-        leaderCombos,
-        pending: { current: false },
-        runLeaderCommand,
-      }),
-    ).toBe(false);
-
-    const pending = { current: true };
-    expect(
-      appLeaderHandled({
-        focusedPane: "project",
-        key: { name: "escape" },
-        leaderCombos,
-        pending,
-        runLeaderCommand,
-      }),
-    ).toBe(true);
-    expect(pending.current).toBe(false);
-    expect(ran).toBe(false);
-  });
 });

package/src/App.identity.test.tsx

@@ -45,11 +45,11 @@ test("the Account settings tab shows the display name row and the GitHub sync ac
   const setup = await renderApp();
 
   await setup.mockMouse.click(1, 0);
-  await waitForText(setup, "Settings");
+  await waitForText(setup, "settings");
   const menu = setup.captureCharFrame().split("\n");
-  const settingsRow = menu.findIndex((line) => line.includes("Settings"));
+  const settingsRow = menu.findIndex((line) => line.includes("settings"));
 
-  await setup.mockMouse.click(menu[settingsRow]!.indexOf("Settings") + 1, settingsRow);
+  await setup.mockMouse.click(menu[settingsRow]!.indexOf("settings") + 1, settingsRow);
   await waitForText(setup, "Account");
   const dialog = setup.captureCharFrame().split("\n");
   const accountRow = dialog.findIndex((line) => line.includes("Account"));

package/src/App.plan-render.test.tsx

@@ -0,0 +1,209 @@
+/**
+ * The read-only plan render: h1/h2 sit over
+ * a rule, links show their label in the link color with the URL concealed,
+ * inline code grays with its backticks gone, GFM tables render as an aligned grid
+ * and leading YAML frontmatter as a bordered key/value table. Because rendered
+ * text now differs from the source, a comment dragged over a concealed-markup
+ * passage must still anchor to the source and repaint on the visible label.
+ * Char-frame + styled-span assertions over the real App and an in-process daemon.
+ */
+
+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 { DaemonServer } from "@cueloop/daemon";
+import type { Thread } from "@cueloop/schema";
+import { App } from "./App";
+import { DARK } from "./theme";
+import {
+  dragText,
+  isolateUserConfig,
+  pressKey,
+  renderReadyApp,
+  settle,
+  typeText as type,
+  waitForState,
+  waitForText,
+} from "./test-support";
+
+const PLAN = `---
+title: Migration Plan
+owner: platform team
+---
+
+# Migration Plan
+
+## Rollout
+
+Ship it behind a \`flag\` and read [OpenTUI](https://opentui) first.
+
+| Name | Size |
+| :--- | ---: |
+| daemon | 12 |
+| client | 7 |
+`;
+
+let home: string;
+let server: DaemonServer;
+let session: Thread;
+let restoreUserConfig: () => void;
+
+beforeEach(() => {
+  home = mkdtempSync(join(tmpdir(), "cueloop-plan-render-"));
+  restoreUserConfig = isolateUserConfig(home);
+  server = new DaemonServer({ home, idleExitMs: 0 });
+  server.start();
+  session = server.core.sessionCreate({
+    workspace: { repoRoot: "/repo", branch: "main" },
+    artifact: {
+      type: "plan",
+      content: PLAN,
+      meta: { title: "Migration Plan", planPath: "plan.md" },
+    },
+  });
+});
+afterEach(() => {
+  restoreUserConfig();
+  server.stop();
+  rmSync(home, { recursive: true, force: true });
+});
+
+type Setup = Awaited<ReturnType<typeof renderPlan>>;
+
+async function renderPlan() {
+  const setup = await renderReadyApp(<App home={home} sessionId={session.id} />, {
+    width: 90,
+    height: 40,
+  });
+
+  await waitForText(setup, "cueloop");
+  await settle(setup);
+
+  return setup;
+}
+
+/** Hex foregrounds of every styled span containing the needle. */
+function foregroundsOf(setup: Setup, needle: string): string[] {
+  const foregrounds: string[] = [];
+
+  for (const line of setup.captureSpans().lines) {
+    for (const span of line.spans) {
+      if (span.fg === undefined || !span.text.includes(needle)) continue;
+      const [red, green, blue] = span.fg.toInts();
+
+      foregrounds.push(
+        "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join(""),
+      );
+    }
+  }
+
+  return foregrounds;
+}
+
+/** Hex backgrounds of every styled span containing the needle. */
+function backgroundsOf(setup: Setup, needle: string): string[] {
+  const backgrounds: string[] = [];
+
+  for (const line of setup.captureSpans().lines) {
+    for (const span of line.spans) {
+      if (!span.text.includes(needle)) continue;
+      const [red, green, blue] = span.bg.toInts();
+
+      backgrounds.push(
+        "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join(""),
+      );
+    }
+  }
+
+  return backgrounds;
+}
+
+const THREAD_MARK = "#463852";
+
+describe("read-only markdown render", () => {
+  test("h1 and h2 sit over a rule", async () => {
+    const setup = await renderPlan();
+    const rows = setup.captureCharFrame().split("\n");
+    // "Migration Plan" also rides the header bar; a heading is any body row directly over a rule
+    const ruleBelow = (heading: string): boolean =>
+      rows.some((row, index) => row.includes(heading) && (rows[index + 1] ?? "").includes("──"));
+
+    expect(ruleBelow("Migration Plan")).toBe(true);
+    expect(ruleBelow("Rollout")).toBe(true);
+  });
+
+  test("a link shows its label in the link color with the URL concealed", async () => {
+    const setup = await renderPlan();
+    const frame = setup.captureCharFrame();
+
+    expect(frame).toContain("OpenTUI");
+    expect(frame).not.toContain("https://opentui");
+    expect(frame).not.toContain("[OpenTUI]");
+    expect(foregroundsOf(setup, "OpenTUI")).toContain(DARK.blue);
+  });
+
+  test("inline code grays with its backticks concealed", async () => {
+    const setup = await renderPlan();
+    const frame = setup.captureCharFrame();
+
+    expect(frame).toContain("flag");
+    expect(frame).not.toContain("`flag`");
+    expect(foregroundsOf(setup, "flag")).toContain(DARK.textDim);
+  });
+
+  test("a table renders as an aligned grid without pipes", async () => {
+    const setup = await renderPlan();
+    const rows = setup.captureCharFrame().split("\n");
+    const header = rows.find((row) => row.includes("Name") && row.includes("Size"))!;
+
+    expect(header).not.toContain("|");
+    // the numeric column is right-aligned, so 12 and 7 line up on their last digit
+    const daemon = rows.find((row) => row.includes("daemon"))!;
+    const client = rows.find((row) => row.includes("client"))!;
+
+    expect(daemon.indexOf("12") + 1).toBe(client.indexOf("7"));
+  });
+
+  test("frontmatter renders as a bordered key/value grid", async () => {
+    const setup = await renderPlan();
+    const frame = setup.captureCharFrame();
+
+    expect(frame).toContain("┌");
+    expect(frame).toContain("└");
+    expect(frame).toContain("title");
+    expect(frame).toContain("platform team");
+  });
+});
+
+describe("annotating a grid block", () => {
+  test("a comment dragged over a table cell anchors on the grid and marks it", async () => {
+    const setup = await renderPlan();
+
+    // the table renders as a grid, yet it still takes a comment like any other block
+    await dragText(setup, "daemon", "daemon", "daemon".length);
+    await type(setup, "which daemon?");
+    await pressKey(setup, "RETURN", { meta: true });
+
+    await waitForState(setup, () => server.core.sessionGet(session.id).annotations.length === 1);
+    // the grid carries the mark backdrop, so an annotation resolving into it stays visible
+    await waitForState(setup, () => backgroundsOf(setup, "daemon").includes(THREAD_MARK));
+  }, 60_000);
+});
+
+describe("anchoring over concealed markup", () => {
+  test("a comment dragged over a rendered link label anchors to the source and repaints", async () => {
+    const setup = await renderPlan();
+
+    // drag the visible label "OpenTUI" (its brackets and URL are concealed)
+    await dragText(setup, "OpenTUI", "OpenTUI", "OpenTUI".length);
+    await type(setup, "which build?");
+    await pressKey(setup, "RETURN", { meta: true });
+
+    await waitForState(setup, () => server.core.sessionGet(session.id).annotations.length === 1);
+    expect(server.core.sessionGet(session.id).annotations[0]!.anchor.quote).toBe("OpenTUI");
+    // the saved comment keeps the visible label marked
+    await waitForState(setup, () => backgroundsOf(setup, "OpenTUI").includes(THREAD_MARK));
+  }, 60_000);
+});

package/src/App.plan-review.test.tsx

@@ -14,6 +14,7 @@ import {
   clickText,
   dragText,
   isolateUserConfig,
+  navCommand,
   press,
   pressKey,
   renderReadyApp,
@@ -210,11 +211,15 @@ describe("the mark stays painted while composing", () => {
     await waitForText(setup, "● x");
     expect(backgroundsOf(setup, "The daemon")).toContain(THREAD_MARK);
 
-    // Act: escape discards the draft; the mark stays for re-typing, a second escape drops it
+    // Act: escape discards the draft and the mark stays for re-typing; the next escape
+    // enters nav mode with the mark still held; only an escape in nav drops it
     await press(setup, "escape");
     await waitForTextGone(setup, "● x");
     expect(backgroundsOf(setup, "The daemon")).toContain(THREAD_MARK);
     await press(setup, "escape");
+    await waitForText(setup, "type to leave");
+    expect(backgroundsOf(setup, "The daemon")).toContain(THREAD_MARK);
+    await press(setup, "escape");
 
     // Assert
     await waitForState(setup, () => !backgroundsOf(setup, "The daemon").includes(THREAD_MARK));
@@ -244,6 +249,22 @@ describe("the mark stays painted while composing", () => {
     await waitForTextGone(setup, "● x");
     expect(backgroundsOf(setup, "The daemon")).toContain(THREAD_MARK);
   }, 60_000);
+
+  test("esc from type mode keeps the mark, so c in nav comments on the marked text", async () => {
+    // Arrange
+    const setup = await renderApp();
+
+    // Act: mark, enter nav with esc, open the composer with c, save
+    await dragText(setup, "The daemon", "daemon persists", "daemon".length);
+    await navCommand(setup, "c");
+    await type(setup, "Which daemon?");
+    await waitForText(setup, "● Which daemon?");
+    await pressKey(setup, "RETURN", { meta: true });
+
+    // Assert: the comment anchors to the mark, not to the word under the caret
+    await waitForState(setup, () => server.core.sessionGet(session.id).annotations.length === 1);
+    expect(server.core.sessionGet(session.id).annotations[0]!.anchor.quote).toBe("The daemon");
+  }, 60_000);
 });
 
 describe("compose newline convention", () => {
@@ -311,7 +332,7 @@ describe("quick-actions settings editor", () => {
     // Act - open Settings from the top-left gear, enter Actions, expand the first action, type
     await setup.mockMouse.click(1, 0);
     await waitForText(setup, "Keybinds");
-    await clickText(setup, "Settings");
+    await clickText(setup, "settings");
     await clickText(setup, "Actions");
     await clickText(setup, "Zoom out, research in depth");
     await type(setup, "CUSTOM");
@@ -327,30 +348,58 @@ describe("quick-actions settings editor", () => {
 
 describe("edit-exit reconciliation", () => {
   test("an edit that removes an anchored passage orphans the annotation and shows the banner", async () => {
-    const script = join(home, "fake-editor.sh");
-
-    await Bun.write(script, `#!/bin/sh\nsed -i '' '/^The daemon persists/d' "$1"\n`);
-    Bun.spawnSync(["chmod", "+x", script]);
-    process.env.CUELOOP_EDITOR = script;
-    try {
-      // Arrange
-      const setup = await renderApp();
-
-      await clickText(setup, "daemon");
-      await type(setup, "Anchor me to the doomed passage.");
-      await pressKey(setup, "RETURN", { meta: true });
-      await waitForState(setup, () => server.core.sessionGet(session.id).annotations.length === 1);
-
-      // Act
-      await pressKey(setup, "e", { ctrl: true });
-
-      // Assert - the thread view banner reports the orphaned annotation
-      await waitForText(setup, "1 annotation no longer match - the passage was removed.");
-      // the annotation is NOT deleted: the feedback serializer handles orphans
-      expect(server.core.sessionGet(session.id).annotations.length).toBe(1);
-    } finally {
-      delete process.env.CUELOOP_EDITOR;
-    }
+    // Arrange - anchor a comment to a passage
+    const setup = await renderApp();
+
+    await clickText(setup, "daemon");
+    await type(setup, "Anchor me to the doomed passage.");
+    await pressKey(setup, "RETURN", { meta: true });
+    await waitForState(setup, () => server.core.sessionGet(session.id).annotations.length === 1);
+
+    // Act - open the inline editor, replace the whole body (dropping the passage), and leave
+    await pressKey(setup, "e", { ctrl: true });
+    await waitForText(setup, "save & close");
+    await pressKey(setup, "a", { meta: true });
+    await type(setup, "A fresh body with no anchored passage.");
+    await clickText(setup, "normal");
+
+    // Assert - the thread view banner reports the orphaned annotation
+    await waitForText(setup, "1 annotation no longer match - the passage was removed.");
+    // the annotation is NOT deleted: the feedback serializer handles orphans
+    expect(server.core.sessionGet(session.id).annotations.length).toBe(1);
+  });
+});
+
+describe("thread switch preserves an open edit", () => {
+  test("clicking another thread while editing saves the body into the leaving thread", async () => {
+    // Arrange - a second thread sits in the sidebar to switch to
+    server.core.sessionCreate({
+      workspace: { repoRoot: "/repo", branch: "main" },
+      artifact: {
+        type: "plan",
+        content: "# Second Thread\n\nAnother body.\n",
+        meta: { title: "Second Thread", planPath: "plan.md", agent: "agent/worker-3" },
+      },
+    });
+    const setup = await renderApp();
+
+    // open the Threads sidebar so the other thread is on screen to click
+    await setup.mockMouse.click(4, 0);
+    await waitForText(setup, "Second Thread");
+
+    // Act - open the inline editor, rewrite the body, then click away before an explicit save
+    await pressKey(setup, "e", { ctrl: true });
+    await waitForText(setup, "save & close");
+    await pressKey(setup, "a", { meta: true });
+    await type(setup, "Body kept across a thread switch.");
+    await clickText(setup, "Second Thread");
+
+    // Assert - the leaving thread's working copy holds the edit rather than dropping it
+    await waitForState(setup, () =>
+      (server.core.sessionGet(session.id).workingCopy ?? "").includes(
+        "kept across a thread switch",
+      ),
+    );
   });
 });
 

package/src/App.readonly.test.tsx

@@ -13,6 +13,7 @@ import {
   dragText,
   frameRow,
   isolateUserConfig,
+  navCommand,
   pressKey,
   renderReadyApp,
   typeText,
@@ -97,7 +98,7 @@ describe("observer rendering", () => {
 describe("observer primitives are blocked", () => {
   const attempts: Array<[string, (setup: Setup) => Promise<void>]> = [
     ["comment (typing)", (setup) => typeText(setup, "c")],
-    ["cut (option+x)", (setup) => pressKey(setup, "x", { meta: true })],
+    ["cut (option+x)", (setup) => navCommand(setup, "x")],
     ["edit (ctrl+e)", (setup) => pressKey(setup, "e", { ctrl: true })],
     ["submit (cmd+enter)", (setup) => pressKey(setup, "RETURN", { meta: true })],
   ];
@@ -159,10 +160,10 @@ describe("a resolved review is read-only for its owner too", () => {
     expect(setup.captureCharFrame()).not.toContain("● c");
 
     // Act + Assert: the focused card cannot be deleted or edited
-    await pressKey(setup, "n", { meta: true });
+    await navCommand(setup, "n");
     await pressKey(setup, "BACKSPACE", { meta: true });
-    await pressKey(setup, "e", { meta: true });
-    await pressKey(setup, "x", { meta: true });
+    await pressKey(setup, "e", { ctrl: true });
+    await navCommand(setup, "x");
     expect(snapshot()).toEqual(before);
     expect(server.core.sessionGet(session.id).annotations).toHaveLength(1);
   });
@@ -199,7 +200,7 @@ describe("observer navigation still works", () => {
     const setup = await renderObserver();
 
     // Act - the observer navigates to the annotation without mutating anything
-    await pressKey(setup, "n", { meta: true });
+    await navCommand(setup, "n");
     await setup.renderOnce();
 
     // Assert - the observer reads the controller's comment inline in the thread