@cueloop/client 0.1.0-alpha.9 → 0.1.0-alpha.90

package/src/App.prototype-markdown.test.tsx

@@ -0,0 +1,128 @@
+/** The default prototype is a Markdown design doc: with no experimental flag it renders through the thread/markdown path (not the kitty pixel view), its headings and fenced sections show as text, and a quote-anchored comment lands on a line - the same as a plan. A real in-process daemon; char-frame assertions over the real App. */
+
+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 { isolateUserConfig, renderReadyApp, settle, waitForText } from "./test-support";
+
+const DOC = `# PromoCard
+
+A promotional card for a growth surface.
+
+## API
+
+\`\`\`ts
+interface PromoCardProps {
+  title: string
+  onDismiss?: () => void
+}
+\`\`\`
+
+## Composition
+
+\`\`\`
+PromoCard
+└─ TextGroup   reuse: Text
+\`\`\`
+`;
+
+let home: string;
+let server: DaemonServer;
+let session: Thread;
+let restoreUserConfig: () => void;
+
+beforeEach(() => {
+  home = mkdtempSync(join(tmpdir(), "cueloop-prototype-md-"));
+  restoreUserConfig = isolateUserConfig(home);
+  server = new DaemonServer({ home, idleExitMs: 0 });
+  server.start();
+  session = server.core.sessionCreate({
+    workspace: { repoRoot: "/repo", branch: "promo-card" },
+    artifact: { type: "prototype", content: DOC, meta: { title: "PromoCard", agent: "pi" } },
+  });
+});
+afterEach(() => {
+  restoreUserConfig();
+  server.stop();
+  rmSync(home, { recursive: true, force: true });
+});
+
+describe("markdown prototype review", () => {
+  test("syntax-highlights TypeScript fences without changing their text", async () => {
+    const setup = await renderReadyApp(<App home={home} sessionId={session.id} />, {
+      width: 120,
+      height: 40,
+    });
+
+    await waitForText(setup, "PromoCardProps");
+    let keywordHighlighted = false;
+
+    for (let attempt = 0; attempt < 60 && !keywordHighlighted; attempt++) {
+      await setup.renderOnce();
+      await new Promise((resolve) => setTimeout(resolve, 20));
+      const accentText = setup
+        .captureSpans()
+        .lines.flatMap((line) =>
+          line.spans
+            .filter((span) => {
+              const [red, green, blue] = span.fg.toInts();
+
+              return (
+                `#${[red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join("")}` ===
+                DARK.accent
+              );
+            })
+            .map((span) => span.text),
+        )
+        .join("");
+
+      keywordHighlighted = accentText.includes("interface");
+    }
+
+    expect(keywordHighlighted).toBe(true);
+    expect(setup.captureCharFrame()).toContain("interface PromoCardProps {");
+  }, 25000);
+
+  test("renders as a markdown design doc, not the pixel view", async () => {
+    const setup = await renderReadyApp(<App home={home} sessionId={session.id} />, {
+      width: 120,
+      height: 40,
+    });
+
+    await waitForText(setup, "PromoCard");
+    await settle(setup);
+    const frame = setup.captureCharFrame();
+
+    // the markdown path renders the doc's headings and interface as text
+    expect(frame).toContain("API");
+    expect(frame).toContain("PromoCardProps");
+    expect(frame).toContain("Composition");
+    // and never falls into the pixel view's status line
+    expect(frame).not.toContain("rendering prototype");
+    expect(frame).not.toContain("graphics terminal");
+  });
+
+  test("a quote-anchored comment stores against the doc, like a plan", async () => {
+    server.core.sessionAnnotate(session.id, {
+      id: "own_1",
+      kind: "comment",
+      anchor: { quote: "onDismiss?: () => void", prefix: "", suffix: "" },
+      body: "make dismiss required for a modal surface?",
+    });
+
+    const setup = await renderReadyApp(<App home={home} sessionId={session.id} />, {
+      width: 120,
+      height: 40,
+    });
+
+    await waitForText(setup, "make dismiss required");
+    expect(server.core.sessionGet(session.id).annotations).toHaveLength(1);
+    expect(server.core.sessionGet(session.id).annotations[0]!.anchor.selector).toBeUndefined();
+  });
+});

package/src/App.prototype.test.tsx

@@ -0,0 +1,176 @@
+/** Prototype review end to end, in the opt-in EXPERIMENTAL pixel mode ([experimental] prototype_pixels): a click on the rendered page selects a DOM element and opens the compose card directly - the same inline composer plan and diff use - a typed comment saves through the controller on cmd+enter, and the annotation anchors to the element's selector. 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, writeFileSync } 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 {
+  setPrototypeRendererFactory,
+  type PrototypeElement,
+  type PrototypeRenderer,
+} from "./prototype-browser";
+import {
+  isolateUserConfig,
+  press,
+  renderReadyApp,
+  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 screenshotCount = 0;
+let scrollDeltas: number[] = [];
+const fakeRenderer: PrototypeRenderer = {
+  viewport: { width: 1280, height: 800 },
+  screenshot: async () => {
+    rendered = true;
+    screenshotCount += 1;
+
+    return new Uint8Array([0x89, 0x50, 0x4e, 0x47]);
+  },
+  elementAt: async () => FAKE_ELEMENT,
+  scrollBy: async (deltaY) => {
+    scrollDeltas.push(deltaY);
+
+    return true;
+  },
+  close: async () => undefined,
+};
+
+let home: string;
+let server: DaemonServer;
+let session: Thread;
+let restoreUserConfig: () => void;
+
+beforeEach(() => {
+  home = mkdtempSync(join(tmpdir(), "cueloop-prototype-"));
+  // the pixel mockup is opt-in; these tests exercise that experimental path
+  writeFileSync(join(home, "config.toml"), "[experimental]\nprototype_pixels = true\n");
+  restoreUserConfig = isolateUserConfig(home, "config.toml");
+  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;
+  screenshotCount = 0;
+  scrollDeltas = [];
+  setPrototypeRendererFactory(async () => fakeRenderer);
+});
+afterEach(() => {
+  setPrototypeRendererFactory(null);
+  restoreUserConfig();
+  server.stop();
+  rmSync(home, { recursive: true, force: true });
+});
+
+async function renderApp() {
+  const setup = await renderReadyApp(<App home={home} sessionId={session.id} />, {
+    width: 120,
+    height: 32,
+  });
+
+  await waitForText(setup, "cueloop");
+
+  return setup;
+}
+
+describe("prototype review", () => {
+  test("click an element, comment on it, and it saves to the daemon", 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);
+    // selecting an element must not re-screenshot the page (the compose-open
+    // lag regression): the click opens the composer, not a fresh Chromium capture
+    const screenshotsAfterLoad = screenshotCount;
+
+    // Act - a click opens the compose card directly on the element
+    await setup.mockMouse.click(6, 6);
+    await waitForText(setup, "●");
+    expect(screenshotCount).toBe(screenshotsAfterLoad);
+    // 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");
+    // cmd+enter sends, matching the plan and diff composer; plain enter is a newline
+    setup.mockInput.pressKey("RETURN", { meta: true });
+
+    // 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");
+  });
+
+  test("escape cancels the compose, matching the plan composer", async () => {
+    // Arrange
+    const setup = await renderApp();
+
+    await waitForState(setup, () => rendered);
+    await settle(setup);
+    await setup.mockMouse.click(6, 6);
+    await waitForText(setup, "●");
+    await settle(setup);
+
+    // Act
+    await press(setup, "escape");
+
+    // Assert - the composer closes and nothing was saved
+    await waitForTextGone(setup, "●");
+    expect(server.core.sessionGet(session.id).annotations).toHaveLength(0);
+  });
+
+  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, "●");
+    // scrolling moves the page, so it DOES re-screenshot (unlike a click)
+    const screenshotsBeforeScroll = screenshotCount;
+
+    await setup.mockMouse.scroll(6, 6, "down");
+    await waitForState(setup, () => scrollDeltas.length === 1);
+    await waitForTextGone(setup, "●");
+    await waitForState(setup, () => screenshotCount > screenshotsBeforeScroll);
+
+    // 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,18 +1,24 @@
-/**
- * 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 primitive answers "observer - read-only" and leaves daemon state untouched. */
 
 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 { makeAnchor, parseBlocks, type ReviewSession } from "@cueloop/schema";
+import { makeAnchor, parseBlocks, type Thread } from "@cueloop/schema";
 import { App } from "./App";
+import {
+  clickText,
+  dragText,
+  frameRow,
+  isolateUserConfig,
+  navCommand,
+  pressKey,
+  renderReadyApp,
+  typeText,
+  waitForText,
+} from "./test-support";
 
 const PLAN = `# Migration Plan
 
@@ -27,113 +33,164 @@ The daemon persists sessions to disk atomically.
 `;
 
 let home: string;
+let restoreUserConfig: () => void;
 let server: DaemonServer;
-let session: ReviewSession;
+let session: Thread;
 
 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 });
 });
 
 async function renderObserver() {
-  const setup = await testRender(<App home={home} sessionId={session.id} readOnly />, {
+  const setup = await renderReadyApp(<App home={home} sessionId={session.id} readOnly />, {
     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. */
+/** Session state that any mutating primitive 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("the minimal header mirrors the thread name, with no observer badge", async () => {
+    // Arrange
     const setup = await renderObserver();
+
+    // Assert - the header shows the thread title only; read-only is enforced by
+    // the blocked primitives below, not a header badge
     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("Migration Plan");
+    expect(frame).not.toContain("· observer");
   });
 });
 
-describe("observer verbs are blocked", () => {
-  for (const [key, verb] of [
-    ["c", "comment"],
-    ["s", "suggest"],
-    ["x", "cut"],
-    ["e", "edit"],
-    ["enter", "submit"],
-  ] as const) {
-    test(`${verb} (${key}) answers observer - read-only and mutates nothing`, async () => {
+describe("observer primitives are blocked", () => {
+  const attempts: Array<[string, (setup: Setup) => Promise<void>]> = [
+    ["comment (typing)", (setup) => typeText(setup, "c")],
+    ["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 })],
+  ];
+
+  for (const [primitive, attempt] of attempts) {
+    test(`${primitive} answers observer - read-only and mutates nothing`, async () => {
       const setup = await renderObserver();
       const before = snapshot();
-      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");
-      // no overlay opened: compose/submit bars never appear
-      expect(frame).not.toContain("COMMENT ON");
-      expect(frame).not.toContain("SUGGEST REPLACEMENT");
-      expect(frame).not.toContain("verdict ←/→");
+
+      await clickText(setup, "daemon");
+      await attempt(setup);
+      const frame = await waitForText(setup, "observer - read-only");
+
+      // no draft card and no submit card ever appear
+      expect(frame).not.toContain("● c");
+      expect(frame).not.toContain("[approve]");
       expect(snapshot()).toEqual(before);
     });
   }
 
-  test("span mode c/s is blocked too", async () => {
+  test("typing over a marked span is blocked too", async () => {
+    // Arrange
     const setup = await renderObserver();
-    await press(setup, "j");
-    await press(setup, "j");
-    await press(setup, "v");
-    await press(setup, "c");
-    await setup.renderOnce();
-    const frame = setup.captureCharFrame();
-    expect(frame).toContain("observer - read-only");
-    expect(frame).not.toContain("COMMENT ON");
+
+    // Act
+    await dragText(setup, "The daemon", "daemon persists", "daemon".length);
+    await typeText(setup, "c");
+
+    // Assert
+    const frame = await waitForText(setup, "observer - read-only");
+
+    expect(frame).not.toContain("● c");
     expect(snapshot().annotations).toBe(0);
   });
 });
 
+describe("a resolved review is read-only for its owner too", () => {
+  test("typing, deleting a card, and editing answer review submitted - read-only", async () => {
+    // Arrange: a comment exists and the message is in
+    server.core.sessionAnnotate(session.id, {
+      id: "a_done",
+      kind: "comment",
+      anchor: makeAnchor(parseBlocks(PLAN), 2, 0, 10),
+      body: "settled",
+    });
+    server.core.sessionSendMessage(session.id, "approved", "");
+    const setup = await renderReadyApp(<App home={home} sessionId={session.id} />, {
+      width: 120,
+      height: 32,
+    });
+
+    await waitForText(setup, "settled");
+    const before = snapshot();
+
+    // Act + Assert: a draft never opens
+    await clickText(setup, "daemon");
+    await typeText(setup, "c");
+    await waitForText(setup, "review submitted - read-only");
+    expect(setup.captureCharFrame()).not.toContain("● c");
+
+    // Act + Assert: the focused card cannot be deleted or edited
+    await navCommand(setup, "n");
+    await pressKey(setup, "BACKSPACE", { 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);
+  });
+});
+
 describe("observer navigation still works", () => {
-  test("j/k moves the cursor between blocks", async () => {
+  test("↓ moves the caret between blocks", async () => {
+    // Arrange
     const setup = await renderObserver();
-    await press(setup, "j");
-    await press(setup, "j");
+
+    // Act
+    await pressKey(setup, "ARROW_DOWN");
+    await pressKey(setup, "ARROW_DOWN");
     await setup.renderOnce();
-    const lines = setup.captureCharFrame().split("\n");
-    const cursorLine = lines.find((l) => l.includes("▎"))!;
-    expect(cursorLine).toContain("persists sessions");
+
+    // Assert: the caret cell is painted on the paragraph's row
+    const caretRow = setup
+      .captureSpans()
+      .lines.findIndex((line) =>
+        line.spans.some((span) => span.bg.toInts().slice(0, 3).join() === "86,91,104"),
+      );
+
+    expect(caretRow).toBe(frameRow(setup, "persists sessions"));
   });
 
-  test("n focuses annotations made by the controller", async () => {
+  test("option+n focuses annotations made by the controller", async () => {
+    // Arrange
     server.core.sessionAnnotate(session.id, {
       id: "a_obs1",
       kind: "comment",
@@ -141,8 +198,13 @@ describe("observer navigation still works", () => {
       body: "From the controller.",
     });
     const setup = await renderObserver();
-    await press(setup, "n");
+
+    // Act - the observer navigates to the annotation without mutating anything
+    await navCommand(setup, "n");
     await setup.renderOnce();
-    expect(setup.captureCharFrame()).toContain("▸ COMMENT");
+
+    // Assert - the observer reads the controller's comment inline in the thread
+    await waitForText(setup, "From the controller.");
+    expect(snapshot().annotations).toBe(1);
   });
 });

package/src/App.regression.test.tsx

@@ -0,0 +1,94 @@
+/** Regressions from the focus/perf round: ctrl+q must quit from any keyboard state, and clicking a
+ * sidebar thread must give it the selected accent at once (the cursor follows the click). */
+
+import { afterEach, beforeEach, 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 { App } from "./App";
+import {
+  clickText,
+  isolateUserConfig,
+  pressKey,
+  renderReadyApp,
+  waitForText,
+} from "./test-support";
+
+const ACCENT_DARK: [number, number, number] = [203, 166, 247];
+
+let home: string;
+let restoreUserConfig: () => void;
+let server: DaemonServer;
+
+function plan(title: string): void {
+  server.core.sessionCreate({
+    workspace: { repoRoot: "/repo", branch: "main" },
+    artifact: { type: "plan", content: `# ${title}\n`, meta: { title, planPath: "plan.md" } },
+  });
+}
+
+beforeEach(() => {
+  home = mkdtempSync(join(tmpdir(), "cueloop-regression-"));
+  restoreUserConfig = isolateUserConfig(home);
+  server = new DaemonServer({ home, idleExitMs: 0 });
+  server.start();
+  plan("First review");
+  plan("Second review");
+});
+afterEach(() => {
+  restoreUserConfig();
+  server.stop();
+  rmSync(home, { recursive: true, force: true });
+});
+
+/** The text of the sidebar title span currently painted in the accent colour, or undefined. */
+function accentTitle(setup: Awaited<ReturnType<typeof renderReadyApp>>): string | undefined {
+  for (const line of setup.captureSpans().lines) {
+    for (const span of line.spans) {
+      const rgb = span.fg?.toInts();
+      if (
+        rgb &&
+        rgb[0] === ACCENT_DARK[0] &&
+        rgb[1] === ACCENT_DARK[1] &&
+        rgb[2] === ACCENT_DARK[2]
+      ) {
+        const text = span.text.trim();
+        if (text.includes("review")) return text;
+      }
+    }
+  }
+
+  return undefined;
+}
+
+test("ctrl+q quits even when a menu holds the keyboard", async () => {
+  let exitCode: number | undefined;
+  const setup = await renderReadyApp(<App home={home} onExit={(code) => (exitCode = code)} />, {
+    width: 120,
+    height: 32,
+  });
+  await waitForText(setup, "review");
+
+  // open the settings dialog from the top-left gear - it takes the keyboard
+  await setup.mockMouse.click(1, 0);
+  await waitForText(setup, "Keybinds");
+
+  await pressKey(setup, "q", { ctrl: true });
+
+  expect(exitCode).toBe(0);
+  setup.renderer.destroy();
+});
+
+test("clicking a sidebar thread gives it the selected accent at once", async () => {
+  const setup = await renderReadyApp(<App home={home} />, { width: 120, height: 32 });
+  await waitForText(setup, "Second review");
+
+  // click whichever thread is not already the selected (accent) one
+  const target = accentTitle(setup)?.includes("Second") ? "First review" : "Second review";
+  await clickText(setup, target);
+
+  expect(accentTitle(setup)).toContain(target.split(" ")[0]!);
+  setup.renderer.destroy();
+});