@cueloop/client 0.1.0-alpha.68 → 0.1.0-alpha.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.68",
+  "version": "0.1.0-alpha.69",
   "description": "The cueloop review UI: projection renderer, keyboard grammar, review rail",
   "homepage": "https://github.com/mmurakaru/cueloop#readme",
   "bugs": {
@@ -20,16 +20,17 @@
   "type": "module",
   "exports": {
     ".": "./src/index.ts",
-    "./config": "./src/config.ts"
+    "./config": "./src/config.ts",
+    "./slash-palette": "./src/slash-palette.ts"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@cueloop/daemon": "0.1.0-alpha.68",
-    "@cueloop/extension-api": "0.1.0-alpha.68",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.68",
-    "@cueloop/schema": "0.1.0-alpha.68",
+    "@cueloop/daemon": "0.1.0-alpha.69",
+    "@cueloop/extension-api": "0.1.0-alpha.69",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.69",
+    "@cueloop/schema": "0.1.0-alpha.69",
     "@opentui/core": "^0.5.8",
     "@opentui/keymap": "0.5.8",
     "@opentui/react": "^0.5.8",

package/src/App.appearance.test.tsx

@@ -5,11 +5,10 @@ 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, settle, waitForText } from "./test-support";
+import { isolateUserConfig, settle, waitForText, renderReadyApp } from "./test-support";
 
 const PLAN = "# Sync Plan\n\n## Steps\n\n- flush the queue\n";
 
@@ -37,10 +36,13 @@ afterEach(() => {
 describe("appearance", () => {
   test("renders the review on a light terminal", async () => {
     // Arrange + Act
-    const setup = await testRender(<App home={home} sessionId={session.id} appearance="light" />, {
-      width: 120,
-      height: 32,
-    });
+    const setup = await renderReadyApp(
+      <App home={home} sessionId={session.id} appearance="light" />,
+      {
+        width: 120,
+        height: 32,
+      },
+    );
 
     // Assert
     await waitForText(setup, "cueloop");

package/src/App.diff.test.tsx

@@ -5,7 +5,6 @@ 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";
@@ -16,6 +15,7 @@ import {
   isolateUserConfig,
   press,
   pressKey,
+  renderReadyApp,
   typeText,
   waitForState,
   waitForText,
@@ -54,7 +54,7 @@ afterEach(() => {
 });
 
 async function renderApp(sessionId = session.id) {
-  const setup = await testRender(<App home={home} sessionId={sessionId} />, {
+  const setup = await renderReadyApp(<App home={home} sessionId={sessionId} />, {
     width: 120,
     height: 30,
   });
@@ -199,7 +199,7 @@ describe("diff review", () => {
         ],
       },
     });
-    const setup = await testRender(<App home={home} sessionId={withFiles.id} />, {
+    const setup = await renderReadyApp(<App home={home} sessionId={withFiles.id} />, {
       width: 120,
       height: 30,
     });

package/src/App.export.test.tsx

@@ -13,11 +13,17 @@ import {
 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, press, waitForState, waitForText, pressKey } from "./test-support";
+import {
+  isolateUserConfig,
+  press,
+  waitForState,
+  waitForText,
+  pressKey,
+  renderReadyApp,
+} from "./test-support";
 
 const PLAN = `# Migration Plan
 
@@ -61,7 +67,7 @@ afterEach(() => {
 describe("obsidian export on resolve", () => {
   test("submitting a review writes the plan into the vault and shows the path", async () => {
     // Arrange
-    const setup = await testRender(<App home={home} sessionId={session.id} />, {
+    const setup = await renderReadyApp(<App home={home} sessionId={session.id} />, {
       width: 120,
       height: 32,
     });

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

@@ -5,17 +5,18 @@ import { mkdtempSync, readFileSync, 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 { DEFAULT_QUICK_ACTIONS, quickActionBody } from "./config";
+import { DEFAULT_QUICK_ACTIONS } from "./config";
+import { slashItemsFrom } from "./slash-palette";
 import {
   clickText,
   dragText,
   isolateUserConfig,
   press,
   pressKey,
+  renderReadyApp,
   typeText as type,
   waitForState,
   waitForText,
@@ -60,7 +61,7 @@ afterEach(() => {
 });
 
 async function renderApp() {
-  const setup = await testRender(<App home={home} sessionId={session.id} />, {
+  const setup = await renderReadyApp(<App home={home} sessionId={session.id} />, {
     width: 120,
     height: 32,
   });
@@ -110,7 +111,7 @@ describe("share button", () => {
 
   test("a read-only viewer (a plan shared over ssh) never sees the Share button", async () => {
     // Arrange / Act
-    const viewer = await testRender(<App home={home} sessionId={session.id} readOnly />, {
+    const viewer = await renderReadyApp(<App home={home} sessionId={session.id} readOnly />, {
       width: 120,
       height: 32,
     });
@@ -149,7 +150,7 @@ describe("edit affordance", () => {
 
   test("a read-only viewer (a plan shared over ssh) never sees the Edit button", async () => {
     // Arrange / Act
-    const viewer = await testRender(<App home={home} sessionId={session.id} readOnly />, {
+    const viewer = await renderReadyApp(<App home={home} sessionId={session.id} readOnly />, {
       width: 120,
       height: 32,
     });
@@ -338,7 +339,7 @@ describe("edit-exit reconciliation", () => {
 });
 
 describe("the quick-action palette", () => {
-  test("/ lists the quick actions and a pick seeds the comment with the preset body", async () => {
+  test("/ lists the quick actions and a pick inserts the reference, not the body", async () => {
     // Arrange
     const setup = await renderApp();
 
@@ -351,11 +352,12 @@ describe("the quick-action palette", () => {
     await press(setup, "enter");
     await pressKey(setup, "RETURN", { meta: true });
 
-    // Assert - a comment annotation was created with the second default's body
+    // Assert - the comment holds the /name reference, not the expanded body
     await waitForState(setup, () => server.core.sessionGet(session.id).annotations.length === 1);
     const stored = server.core.sessionGet(session.id);
+    const secondName = slashItemsFrom(DEFAULT_QUICK_ACTIONS)[1]!.name;
 
     expect(stored.annotations[0]!.kind).toBe("comment");
-    expect(stored.annotations[0]!.body).toBe(quickActionBody(DEFAULT_QUICK_ACTIONS[1]!));
+    expect(stored.annotations[0]!.body.trim()).toBe(`/${secondName}`);
   });
 });

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

@@ -0,0 +1,92 @@
+/** 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 { ReviewSession } from "@cueloop/schema";
+import { App } from "./App";
+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: ReviewSession;
+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("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

@@ -1,11 +1,10 @@
-/** 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. */
+/** 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 } from "node:fs";
+import { mkdtempSync, 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";
@@ -17,6 +16,7 @@ import {
 import {
   isolateUserConfig,
   press,
+  renderReadyApp,
   settle,
   typeText,
   waitForState,
@@ -60,7 +60,9 @@ let restoreUserConfig: () => void;
 
 beforeEach(() => {
   home = mkdtempSync(join(tmpdir(), "cueloop-prototype-"));
-  restoreUserConfig = isolateUserConfig(home);
+  // 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({
@@ -84,7 +86,7 @@ afterEach(() => {
 });
 
 async function renderApp() {
-  const setup = await testRender(<App home={home} sessionId={session.id} />, {
+  const setup = await renderReadyApp(<App home={home} sessionId={session.id} />, {
     width: 120,
     height: 32,
   });
@@ -94,16 +96,6 @@ async function renderApp() {
   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 saves to the daemon", async () => {
     // Arrange - wait until the fake browser produced its first screenshot, so
@@ -112,21 +104,20 @@ describe("prototype review", () => {
 
     await waitForState(setup, () => rendered);
     await settle(setup);
-    // selecting an element must not re-screenshot the page (the popover-click
-    // lag regression): the highlight is the popover, not a fresh Chromium capture
+    // 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
+    // Act - a click opens the compose card directly on the element
     await setup.mockMouse.click(6, 6);
-    await waitForText(setup, "comment");
+    await waitForText(setup, "●");
     expect(screenshotCount).toBe(screenshotsAfterLoad);
-    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");
+    // 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);
@@ -144,16 +135,14 @@ describe("prototype review", () => {
     await waitForState(setup, () => rendered);
     await settle(setup);
     await setup.mockMouse.click(6, 6);
-    await waitForText(setup, "comment");
-    await clickText(setup, "comment");
-    await waitForText(setup, "write a note");
+    await waitForText(setup, "●");
     await settle(setup);
 
     // Act
     await press(setup, "escape");
 
     // Assert - the composer closes and nothing was saved
-    await waitForTextGone(setup, "write a note");
+    await waitForTextGone(setup, "●");
     expect(server.core.sessionGet(session.id).annotations).toHaveLength(0);
   });
 
@@ -167,13 +156,13 @@ describe("prototype review", () => {
     // 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 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, "comment");
+    await waitForTextGone(setup, "●");
     await waitForState(setup, () => screenshotCount > screenshotsBeforeScroll);
 
     // Act - scroll back up

package/src/App.readonly.test.tsx

@@ -5,7 +5,6 @@ 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 { App } from "./App";
@@ -15,6 +14,7 @@ import {
   frameRow,
   isolateUserConfig,
   pressKey,
+  renderReadyApp,
   typeText,
   waitForText,
 } from "./test-support";
@@ -57,7 +57,7 @@ afterEach(() => {
 });
 
 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,
   });
@@ -144,7 +144,7 @@ describe("a resolved review is read-only for its owner too", () => {
       body: "settled",
     });
     server.core.sessionResolve(session.id, "approve", "");
-    const setup = await testRender(<App home={home} sessionId={session.id} />, {
+    const setup = await renderReadyApp(<App home={home} sessionId={session.id} />, {
       width: 120,
       height: 32,
     });

package/src/App.rendering.test.tsx

@@ -5,11 +5,10 @@ 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";
+import { isolateUserConfig, waitForText, renderReadyApp } from "./test-support";
 
 const PLAN = `# Render Plan
 
@@ -51,7 +50,7 @@ afterEach(() => {
 });
 
 async function frame(): Promise<string> {
-  const setup = await testRender(<App home={home} sessionId={session.id} />, {
+  const setup = await renderReadyApp(<App home={home} sessionId={session.id} />, {
     width: 120,
     height: 36,
   });
@@ -116,7 +115,7 @@ describe("block spacing", () => {
       workspace: { repoRoot: "/repo", branch: "main" },
       artifact: { type: "plan", content: listPlan, meta: {} },
     });
-    const setup = await testRender(<App home={home} sessionId={s2.id} />, {
+    const setup = await renderReadyApp(<App home={home} sessionId={s2.id} />, {
       width: 120,
       height: 30,
     });

package/src/App.test.tsx

@@ -5,7 +5,6 @@ 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";
@@ -17,6 +16,7 @@ import {
   locateText,
   press,
   pressKey,
+  renderReadyApp,
   typeText as type,
   waitForState,
   waitForText,
@@ -60,15 +60,10 @@ afterEach(() => {
 });
 
 async function renderApp(sessionId?: string) {
-  const setup = await testRender(<App home={home} sessionId={sessionId ?? session.id} />, {
+  return renderReadyApp(<App home={home} sessionId={sessionId ?? session.id} />, {
     width: 120,
     height: 32,
   });
-
-  // the async daemon connect + first fetch land within the frame wait
-  await waitForText(setup, "cueloop");
-
-  return setup;
 }
 
 describe("plan rendering", () => {
@@ -247,14 +242,15 @@ describe("submit", () => {
 describe("no-thread shell", () => {
   test("opening with nothing selected lands in the shell with a Welcome tab and the Threads sidebar", async () => {
     // Arrange
-    const setup = await testRender(<App home={home} />, { width: 120, height: 32 });
+    const setup = await renderReadyApp(<App home={home} />, { width: 120, height: 32 });
 
-    await waitForText(setup, "cueloop");
+    // the Welcome playground measures its width before it paints, so wait for its copy, not the header
+    await waitForText(setup, "Getting started");
 
     // Assert - the same shell header, the disposable Welcome tab, and the pending thread
     const frame = setup.captureCharFrame();
 
-    expect(frame).toContain("Welcome to cueloop");
+    expect(frame).toContain("Getting started");
     expect(frame).toContain("Migration Plan");
     expect(frame).not.toContain("· resume"); // the bespoke inbox header is retired
 
@@ -272,9 +268,9 @@ describe("no-thread shell", () => {
       workspace: { repoRoot: "/repo", branch: "main" },
       artifact: { type: "plan", content: "# Other Plan\n", meta: { title: "Other Plan" } },
     });
-    const setup = await testRender(<App home={home} />, { width: 120, height: 32 });
+    const setup = await renderReadyApp(<App home={home} />, { width: 120, height: 32 });
 
-    await waitForText(setup, "Welcome to cueloop");
+    await waitForText(setup, "Getting started");
     await waitForText(setup, "Other Plan"); // the sidebar opens by default here
 
     // Act - open the thread under the cursor
@@ -291,7 +287,7 @@ describe("no-thread shell", () => {
 
   test("the row kebab menu pins a thread into a Pinned section", async () => {
     // Arrange
-    const setup = await testRender(<App home={home} />, { width: 120, height: 32 });
+    const setup = await renderReadyApp(<App home={home} />, { width: 120, height: 32 });
 
     await waitForText(setup, "Migration Plan");
 
@@ -311,23 +307,23 @@ describe("no-thread shell", () => {
 
   test("a bare launch shows the Welcome surface with the right region collapsed", async () => {
     // Arrange
-    const setup = await testRender(<App home={home} />, { width: 120, height: 32 });
+    const setup = await renderReadyApp(<App home={home} />, { width: 120, height: 32 });
 
-    await waitForText(setup, "Welcome to cueloop");
+    await waitForText(setup, "Getting started");
 
     // Assert - Welcome fills the thread pane (not a Changes tab); the right region stays collapsed
     const frame = setup.captureCharFrame();
 
-    expect(frame).toContain("Welcome to cueloop");
+    expect(frame).toContain("Getting started");
     expect(frame).not.toContain("Changes"); // the Changes editor is closed on a bare launch
     expect(frame).toContain("Migration Plan"); // the sidebar lists the pending thread
   });
 
   test("the menu opens from the shell gear and escape is not a trap", async () => {
     // Arrange
-    const setup = await testRender(<App home={home} />, { width: 120, height: 32 });
+    const setup = await renderReadyApp(<App home={home} />, { width: 120, height: 32 });
 
-    await waitForText(setup, "Welcome to cueloop");
+    await waitForText(setup, "Getting started");
 
     // Act - open the settings dialog from the top-left gear (the Threads panel header, row 0)
     await setup.mockMouse.click(1, 0);