@cueloop/client 0.1.0-alpha.5 → 0.1.0-alpha.50

package/src/App.prototype.test.tsx

@@ -0,0 +1,155 @@
+/** Prototype review end to end: a click on the rendered page selects a DOM element, the marker actions bar opens, a typed comment saves through the controller, and the annotation shows in the rail. The headless browser is replaced with a fake so no Chrome or kitty output is needed. Char-frame assertions over the real App and a real 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 { testRender } from "@opentui/react/test-utils";
+import { DaemonServer } from "@cueloop/daemon";
+import type { ReviewSession } from "@cueloop/schema";
+import { App } from "./App";
+import {
+  setPrototypeRendererFactory,
+  type PrototypeElement,
+  type PrototypeRenderer,
+} from "./prototype-browser";
+import {
+  isolateUserConfig,
+  press,
+  settle,
+  typeText,
+  waitForState,
+  waitForText,
+  waitForTextGone,
+} from "./test-support";
+
+const HTML = "<main><div class='card'><h2>Pro</h2><p>$24/mo</p></div></main>";
+
+const FAKE_ELEMENT: PrototypeElement = {
+  selector: "main > div.card",
+  quote: "Pro $24/mo",
+  // mid-page, so the popover anchors well away from the click point below
+  box: { x: 440, y: 320, width: 320, height: 220 },
+};
+
+let rendered = false;
+let scrollDeltas: number[] = [];
+const fakeRenderer: PrototypeRenderer = {
+  viewport: { width: 1280, height: 800 },
+  screenshot: async () => {
+    rendered = true;
+    return new Uint8Array([0x89, 0x50, 0x4e, 0x47]);
+  },
+  elementAt: async () => FAKE_ELEMENT,
+  highlight: async () => undefined,
+  scrollBy: async (deltaY) => {
+    scrollDeltas.push(deltaY);
+    return true;
+  },
+  close: async () => undefined,
+};
+
+let home: string;
+let server: DaemonServer;
+let session: ReviewSession;
+let restoreUserConfig: () => void;
+
+beforeEach(() => {
+  home = mkdtempSync(join(tmpdir(), "cueloop-prototype-"));
+  restoreUserConfig = isolateUserConfig(home);
+  server = new DaemonServer({ home, idleExitMs: 0 });
+  server.start();
+  session = server.core.sessionCreate({
+    workspace: { repoRoot: "/repo", branch: "main" },
+    artifact: {
+      type: "prototype",
+      content: HTML,
+      meta: { title: "Pricing cards", prototypePath: "/repo/cards.html" },
+    },
+  });
+  rendered = false;
+  scrollDeltas = [];
+  setPrototypeRendererFactory(async () => fakeRenderer);
+});
+afterEach(() => {
+  setPrototypeRendererFactory(null);
+  restoreUserConfig();
+  server.stop();
+  rmSync(home, { recursive: true, force: true });
+});
+
+async function renderApp() {
+  const setup = await testRender(<App home={home} sessionId={session.id} />, {
+    width: 120,
+    height: 32,
+  });
+  await waitForText(setup, "cueloop");
+  return setup;
+}
+
+type Setup = Awaited<ReturnType<typeof renderApp>>;
+
+async function clickText(setup: Setup, needle: string): Promise<void> {
+  const lines = setup.captureCharFrame().split("\n");
+  const row = lines.findIndex((line) => line.includes(needle));
+  await setup.mockMouse.click(lines[row]!.indexOf(needle) + 1, row);
+  await setup.renderOnce();
+}
+
+describe("prototype review", () => {
+  test("click an element, comment on it, and it lands in the rail", async () => {
+    // Arrange - wait until the fake browser produced its first screenshot, so
+    // the sheet is interactive before the click
+    const setup = await renderApp();
+    await waitForState(setup, () => rendered);
+    await settle(setup);
+
+    // Act
+    await setup.mockMouse.click(6, 6);
+    await waitForText(setup, "comment");
+    await clickText(setup, "comment");
+    await waitForText(setup, "write a note");
+    // the keymap-suppression flag must propagate before typing so keys reach the
+    // textarea, not the global keymap
+    await settle(setup);
+    await typeText(setup, "tighten the padding");
+    await press(setup, "enter");
+
+    // Assert - the annotation is stored against the element's selector
+    await waitForState(setup, () => server.core.sessionGet(session.id).annotations.length === 1);
+    const stored = server.core.sessionGet(session.id).annotations[0]!;
+    expect(stored.kind).toBe("comment");
+    expect(stored.body).toBe("tighten the padding");
+    expect(stored.anchor.selector).toBe("main > div.card");
+
+    // and it renders in the rail
+    await settle(setup);
+    const frame = setup.captureCharFrame();
+    expect(frame).toContain("tighten the padding");
+    expect(frame).toContain("COMMENT");
+  });
+
+  test("wheel over the preview scrolls the page down, then up, and clears a selection", async () => {
+    // Arrange
+    const setup = await renderApp();
+    await waitForState(setup, () => rendered);
+    await settle(setup);
+
+    // open a selection, then scroll: the scroll drops it (it would drift once
+    // the page moves under it)
+    await setup.mockMouse.click(6, 6);
+    await waitForText(setup, "comment");
+    await setup.mockMouse.scroll(6, 6, "down");
+    await waitForState(setup, () => scrollDeltas.length === 1);
+    await waitForTextGone(setup, "comment");
+
+    // Act - scroll back up
+    await setup.mockMouse.scroll(6, 6, "up");
+    await waitForState(setup, () => scrollDeltas.length === 2);
+
+    // Assert - down was a positive delta, up was negative
+    expect(scrollDeltas[0]!).toBeGreaterThan(0);
+    expect(scrollDeltas[1]!).toBeLessThan(0);
+  });
+});

package/src/App.readonly.test.tsx

@@ -1,8 +1,4 @@
-/**
- * Observer mode (tier 2): the App with readOnly renders and navigates like the
- * controller's, but every mutating verb answers "observer - read-only" and
- * leaves daemon state untouched.
- */
+/** Observer mode (tier 2): the App with readOnly renders and navigates like the controller's, but every mutating verb answers "observer - read-only" and leaves daemon state untouched. */
 
 import { afterEach, beforeEach, describe, expect, test } from "bun:test";
 import { mkdtempSync, rmSync } from "node:fs";
@@ -13,6 +9,8 @@ import { testRender } from "@opentui/react/test-utils";
 import { DaemonServer } from "@cueloop/daemon";
 import { makeAnchor, parseBlocks, type ReviewSession } from "@cueloop/schema";
 import { App } from "./App";
+import { DARK } from "./theme";
+import { isolateUserConfig, press, waitForState, waitForText } from "./test-support";
 
 const PLAN = `# Migration Plan
 
@@ -27,19 +25,26 @@ The daemon persists sessions to disk atomically.
 `;
 
 let home: string;
+let restoreUserConfig: () => void;
 let server: DaemonServer;
 let session: ReviewSession;
 
 beforeEach(() => {
   home = mkdtempSync(join(tmpdir(), "cueloop-observer-"));
+  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" } },
+    artifact: {
+      type: "plan",
+      content: PLAN,
+      meta: { title: "Migration Plan", planPath: "plan.md" },
+    },
   });
 });
 afterEach(() => {
+  restoreUserConfig();
   server.stop();
   rmSync(home, { recursive: true, force: true });
 });
@@ -49,43 +54,35 @@ async function renderObserver() {
     width: 120,
     height: 32,
   });
-  for (let i = 0; i < 40 && !setup.captureCharFrame().includes("cueloop"); i++) {
-    await Bun.sleep(25);
-    await setup.renderOnce();
-  }
-  await setup.renderOnce();
+  await waitForText(setup, "cueloop");
   return setup;
 }
 
-type Setup = Awaited<ReturnType<typeof renderObserver>>;
-
-async function press(setup: Setup, k: string): Promise<void> {
-  if (k === "enter") setup.mockInput.pressKey("RETURN");
-  else await setup.mockInput.typeText(k);
-  await Bun.sleep(15);
-  await setup.renderOnce();
-}
-
 /** Session state that any mutating verb would change. */
 function snapshot() {
-  const s = server.core.sessionGet(session.id);
-  return { annotations: s.annotations.length, workingCopy: s.workingCopy, status: s.status };
+  const stored = server.core.sessionGet(session.id);
+  return {
+    annotations: stored.annotations.length,
+    workingCopy: stored.workingCopy,
+    status: stored.status,
+  };
 }
 
 describe("observer rendering", () => {
-  test("shows the observer badge and read-only hint bar", async () => {
+  test("shows the observer badge and the bottom menu", async () => {
+    // Arrange
     const setup = await renderObserver();
+
+    // Assert
     const frame = setup.captureCharFrame();
     expect(frame).toContain("· observer");
-    expect(frame).toContain("observer - read-only · j/k move");
-    expect(frame).not.toContain("⏎ submit");
+    expect(frame).toContain("menu");
   });
 });
 
 describe("observer verbs are blocked", () => {
   for (const [key, verb] of [
     ["c", "comment"],
-    ["s", "suggest"],
     ["x", "cut"],
     ["e", "edit"],
     ["enter", "submit"],
@@ -96,44 +93,51 @@ describe("observer verbs are blocked", () => {
       await press(setup, "j");
       await press(setup, "j");
       await press(setup, key);
-      await Bun.sleep(60);
-      await setup.renderOnce();
-      const frame = setup.captureCharFrame();
-      expect(frame).toContain("observer - read-only");
+      const frame = await waitForText(setup, "observer - read-only");
       // no overlay opened: compose/submit bars never appear
-      expect(frame).not.toContain("COMMENT ON");
-      expect(frame).not.toContain("SUGGEST REPLACEMENT");
+      expect(frame).not.toContain('comment on "');
       expect(frame).not.toContain("verdict ←/→");
       expect(snapshot()).toEqual(before);
     });
   }
 
-  test("span mode c/s is blocked too", async () => {
+  test("span mode c is blocked too", async () => {
+    // Arrange
     const setup = await renderObserver();
+
+    // Act
     await press(setup, "j");
     await press(setup, "j");
     await press(setup, "v");
     await press(setup, "c");
     await setup.renderOnce();
+
+    // Assert
     const frame = setup.captureCharFrame();
     expect(frame).toContain("observer - read-only");
-    expect(frame).not.toContain("COMMENT ON");
+    expect(frame).not.toContain('comment on "');
     expect(snapshot().annotations).toBe(0);
   });
 });
 
 describe("observer navigation still works", () => {
   test("j/k moves the cursor between blocks", async () => {
+    // Arrange
     const setup = await renderObserver();
+
+    // Act
     await press(setup, "j");
     await press(setup, "j");
     await setup.renderOnce();
+
+    // Assert
     const lines = setup.captureCharFrame().split("\n");
-    const cursorLine = lines.find((l) => l.includes("▎"))!;
+    const cursorLine = lines.find((line) => line.includes("▎"))!;
     expect(cursorLine).toContain("persists sessions");
   });
 
   test("n focuses annotations made by the controller", async () => {
+    // Arrange
     server.core.sessionAnnotate(session.id, {
       id: "a_obs1",
       kind: "comment",
@@ -141,8 +145,28 @@ describe("observer navigation still works", () => {
       body: "From the controller.",
     });
     const setup = await renderObserver();
+
+    // Act
     await press(setup, "n");
     await setup.renderOnce();
-    expect(setup.captureCharFrame()).toContain("▸ COMMENT");
+
+    // Assert - focus shows as the card's blue border (transparent fill); a
+    // comment card is the only blue-bordered box in the frame
+    await waitForText(setup, "COMMENT · me");
+    await waitForState(setup, () => hasBorderColor(setup, DARK.blue));
   });
 });
+
+/** Whether any border character (box-drawing) is painted in the given foreground hex. */
+function hasBorderColor(setup: Awaited<ReturnType<typeof renderObserver>>, hex: string): boolean {
+  for (const line of setup.captureSpans().lines) {
+    for (const span of line.spans) {
+      if (!/[╭╮╰╯│─┌┐└┘]/.test(span.text)) continue;
+      const [red, green, blue] = span.fg.toInts();
+      const rendered =
+        "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join("");
+      if (rendered === hex) return true;
+    }
+  }
+  return false;
+}

package/src/App.rendering.test.tsx

@@ -0,0 +1,132 @@
+/** Plan rendering: 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";
+import { isolateUserConfig, waitForText } from "./test-support";
+
+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 restoreUserConfig: () => void;
+let server: DaemonServer;
+let session: ReviewSession;
+
+beforeEach(() => {
+  home = mkdtempSync(join(tmpdir(), "cueloop-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: "Render Plan" } },
+  });
+});
+afterEach(() => {
+  restoreUserConfig();
+  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,
+  });
+  await waitForText(setup, "Render Plan");
+  // async highlights settle within the visual-idle wait
+  await setup.waitForVisualIdle();
+  return setup.captureCharFrame();
+}
+
+describe("code blocks", () => {
+  test("lines render verbatim: indentation preserved, no word-wrap", async () => {
+    // Arrange
+    const rendered = await frame();
+
+    // Assert
+    expect(rendered).toContain("  const blocked = full < 0.6;");
+    expect(rendered).toContain('  return <text>{blocked ? "blocked" : "clear"}</text>;');
+  });
+
+  test("the block carries its language tag", async () => {
+    // Arrange
+    const rendered = await frame();
+
+    // Assert
+    expect(rendered).toContain("tsx");
+  });
+});
+
+describe("block spacing", () => {
+  // the review panel's full-height divider paints a `│` on every row, so read
+  // the plan column (everything left of the divider) before asserting spacing
+  // the plan body is framed: content sits between the left border and the next │
+  const planColumn = (line: string): string => line.split("│")[1]?.trimEnd() ?? "";
+
+  test("a code block never glues to the list item above it", async () => {
+    // Arrange
+    const lines = (await frame()).split("\n").map(planColumn);
+    const listItemLineIndex = lines.findIndex((line) => line.includes("wire the duck over MQTT"));
+    const codeHeader = lines.findIndex((line) => line.trim().startsWith("tsx"));
+
+    // Assert
+    expect(listItemLineIndex).toBeGreaterThan(-1);
+    expect(codeHeader).toBeGreaterThan(listItemLineIndex);
+    expect(lines.slice(listItemLineIndex + 1, codeHeader).some((line) => line === "")).toBe(true);
+  });
+
+  test("a heading never sits directly on the previous block", async () => {
+    // Arrange
+    const lines = (await frame()).split("\n").map(planColumn);
+    const gate = lines.findIndex((line) => line.trim() === "Gate");
+
+    // Assert
+    expect(gate).toBeGreaterThan(0);
+    expect(lines[gate - 1]).toBe("");
+  });
+
+  test("consecutive list items stay tight", async () => {
+    // Arrange
+    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,
+    });
+    await waitForText(setup, "one");
+
+    // Assert
+    const lines = setup
+      .captureCharFrame()
+      .split("\n")
+      .map((line) => line.trimEnd());
+    const one = lines.findIndex((line) => line.includes("- one"));
+    expect(lines[one + 1]).toContain("- two");
+  });
+});

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

@@ -0,0 +1,136 @@
+/** The review panel end to end: the b key cycles expanded -> compact -> hidden -> expanded on the live App, and the collapse mode persists to the user config so it survives a restart. Rendering details are locked by the ReviewPanel stories; this suite proves the App wiring and the persistence. */
+
+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";
+import { loadConfig } from "./config";
+import { isolateUserConfig, press, settle, waitForText, waitForTextGone } from "./test-support";
+
+const PLAN = "# Plan\n\nShip the thing.\n";
+
+let home: string;
+let server: DaemonServer;
+let session: ReviewSession;
+let configPath: string;
+let restoreUserConfig: () => void;
+
+beforeEach(() => {
+  home = mkdtempSync(join(tmpdir(), "cueloop-panel-"));
+  configPath = join(home, "config.toml");
+  restoreUserConfig = isolateUserConfig(home, "config.toml");
+  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(() => {
+  restoreUserConfig();
+  server.stop();
+  rmSync(home, { recursive: true, force: true });
+});
+
+async function renderApp() {
+  const setup = await testRender(<App home={home} sessionId={session.id} />, {
+    width: 120,
+    height: 30,
+  });
+  await waitForText(setup, "Review");
+  return setup;
+}
+
+describe("review panel", () => {
+  test("b cycles expanded -> compact -> hidden -> expanded", async () => {
+    // Arrange
+    const setup = await renderApp();
+    // the plan frame widens as the rail shrinks: expanded < compact < hidden.
+    // its width is the column of its top-right corner (the first ╮ on the row).
+    const planWidth = () =>
+      setup
+        .captureCharFrame()
+        .split("\n")
+        .find((line) => line.includes("╮"))
+        ?.indexOf("╮") ?? 0;
+
+    // Assert: expanded shows the submit button and leaves room for the rail
+    expect(setup.captureCharFrame()).toContain("Submit review");
+    const expandedWidth = planWidth();
+
+    // Act
+    await press(setup, "b");
+
+    // Assert: compact drops the submit button and widens the plan (rail is a strip)
+    await waitForTextGone(setup, "Submit review");
+    const compactWidth = planWidth();
+    expect(compactWidth).toBeGreaterThan(expandedWidth);
+
+    // Act
+    await press(setup, "b");
+    await settle(setup);
+
+    // Assert: hidden spans the plan full width, no rail column
+    const hiddenWidth = planWidth();
+    expect(hiddenWidth).toBeGreaterThan(compactWidth);
+    expect(hiddenWidth).toBeGreaterThan(115);
+
+    // Act
+    await press(setup, "b");
+
+    // Assert
+    await waitForText(setup, "Submit review"); // back to expanded
+  });
+
+  test("the collapse mode persists to the user config", async () => {
+    // Arrange
+    const setup = await renderApp();
+
+    // Act
+    await press(setup, "b"); // -> compact
+
+    // Assert
+    expect(loadConfig({ userConfigPath: configPath }).ui.reviewState).toBe("compact");
+  });
+
+  test("] widens the rail and persists the new width", async () => {
+    // Arrange
+    const setup = await renderApp();
+    const startWidth = loadConfig({ userConfigPath: configPath }).ui.reviewWidth;
+
+    // Act
+    await press(setup, "]");
+
+    // Assert
+    const widened = loadConfig({ userConfigPath: configPath }).ui.reviewWidth;
+    expect(widened).toBeGreaterThan(startWidth);
+  });
+
+  test("submitting from a hidden panel force-opens the rail so the confirm card is reachable", async () => {
+    // Arrange
+    const setup = await renderApp();
+    await press(setup, "b"); // -> compact
+    await press(setup, "b"); // -> hidden
+
+    // Assert
+    await waitForTextGone(setup, "Submit review"); // rail is gone
+    expect(setup.captureCharFrame()).not.toContain("Submit review");
+
+    // Act
+    await press(setup, "enter"); // submit while hidden must not trap in an invisible modal
+
+    // Assert
+    await waitForText(setup, "submit review");
+    const frame = setup.captureCharFrame();
+    expect(frame).toContain("submit review"); // the confirm card is visible again
+    expect(frame).toContain("[Approve]");
+
+    // the reveal is live-only: the saved panel preference stays as the user left it
+    expect(loadConfig({ userConfigPath: configPath }).ui.reviewState).toBe("hidden");
+  });
+});