@cueloop/client 0.1.0-alpha.7 → 0.1.0-alpha.71

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

@@ -0,0 +1,363 @@
+/** The plan review surface v2: native selection feeds the annotation quote, the inline compose box keeps its anchor painted, the rail edits what the document selects, and edit-exit reconciliation orphans annotations whose passage was removed. Char-frame + styled-span assertions over the real App and a real in-process daemon. */
+
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { mkdtempSync, readFileSync, 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 { DEFAULT_QUICK_ACTIONS } from "./config";
+import { slashItemsFrom } from "./slash-palette";
+import {
+  clickText,
+  dragText,
+  isolateUserConfig,
+  press,
+  pressKey,
+  renderReadyApp,
+  typeText as type,
+  waitForState,
+  waitForText,
+  waitForTextGone,
+} from "./test-support";
+
+const PLAN = `# Migration Plan
+
+## Context
+
+The daemon persists sessions to disk atomically.
+
+## Steps
+
+- move the store
+- add recovery
+`;
+
+let home: string;
+let server: DaemonServer;
+let session: Thread;
+let restoreUserConfig: () => void;
+
+beforeEach(() => {
+  home = mkdtempSync(join(tmpdir(), "cueloop-plan-review-"));
+  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", agent: "agent/worker-3" },
+    },
+  });
+});
+afterEach(() => {
+  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;
+}
+
+type Setup = Awaited<ReturnType<typeof renderApp>>;
+
+/**
+ * Background colors (hex) of every styled span containing the needle - the
+ * document highlight and the rail's quote excerpt can both match.
+ */
+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;
+}
+
+describe("share button", () => {
+  test("the owner's plan header shows the Share button next to Edit", async () => {
+    // Arrange / Act
+    const setup = await renderApp();
+
+    // Assert
+    // both word-buttons ride the header's thread segment, so share sits next to edit
+    const headerLine = setup
+      .captureCharFrame()
+      .split("\n")
+      .find((line) => line.includes("edit"));
+
+    expect(headerLine).toContain("share");
+  });
+
+  test("a read-only viewer (a plan shared over ssh) never sees the Share button", async () => {
+    // Arrange / Act
+    const viewer = await renderReadyApp(<App home={home} sessionId={session.id} readOnly />, {
+      width: 120,
+      height: 32,
+    });
+
+    await waitForText(viewer, "cueloop");
+
+    // Assert
+    expect(viewer.captureCharFrame()).not.toContain(" share ");
+  });
+
+  test("a resolved plan hides Edit and Share (no re-sharing a finished review)", async () => {
+    // Arrange - resolve the session before opening it
+    server.core.sessionResolve(session.id, "approve", "");
+
+    // Act
+    const setup = await renderApp();
+
+    await waitForText(setup, "Migration Plan");
+
+    // Assert - the owner toolbar is gone once the review is resolved
+    const frame = setup.captureCharFrame();
+
+    expect(frame).not.toContain(" edit ");
+    expect(frame).not.toContain(" share ");
+  });
+});
+
+describe("edit affordance", () => {
+  test("the owner sees the Edit button", async () => {
+    // Arrange / Act
+    const owner = await renderApp();
+
+    // Assert
+    expect(owner.captureCharFrame()).toContain(" edit ");
+  });
+
+  test("a read-only viewer (a plan shared over ssh) never sees the Edit button", async () => {
+    // Arrange / Act
+    const viewer = await renderReadyApp(<App home={home} sessionId={session.id} readOnly />, {
+      width: 120,
+      height: 32,
+    });
+
+    await waitForText(viewer, "cueloop");
+
+    // Assert
+    expect(viewer.captureCharFrame()).not.toContain(" edit ");
+  });
+});
+
+describe("marks feed the comment anchor", () => {
+  test("a drag marks a character-precise span and typing anchors the comment to it", async () => {
+    // Arrange
+    const setup = await renderApp();
+
+    // Act
+    await dragText(setup, "The daemon", "daemon persists", "daemon".length);
+    await type(setup, "Which daemon?");
+    await pressKey(setup, "RETURN", { meta: true });
+
+    // Assert
+    await waitForState(setup, () => server.core.sessionGet(session.id).annotations.length === 1);
+    expect(server.core.sessionGet(session.id).annotations[0]!.anchor.quote).toBe("The daemon");
+  });
+
+  test("a drag that ends mid-sentence keeps exactly the dragged words", async () => {
+    // Arrange
+    const setup = await renderApp();
+
+    // Act: release one past the last character of "sessions"
+    await dragText(setup, "persists", "sessions", "sessions".length);
+    await type(setup, "sessions plural?");
+    await pressKey(setup, "RETURN", { meta: true });
+
+    // Assert
+    await waitForState(setup, () => server.core.sessionGet(session.id).annotations.length === 1);
+    expect(server.core.sessionGet(session.id).annotations[0]!.anchor.quote).toBe(
+      "persists sessions",
+    );
+  });
+});
+
+/** The thread view's mark backdrop in the dark palette. */
+const THREAD_MARK = "#463852";
+
+describe("the mark stays painted while composing", () => {
+  test("the mark paints while composing, escape un-paints, save keeps it as the comment's mark", async () => {
+    // Arrange
+    const setup = await renderApp();
+
+    // Act
+    await dragText(setup, "The daemon", "daemon persists", "daemon".length);
+    await type(setup, "x");
+
+    // Assert: composing, the marked words carry the mark backdrop
+    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
+    await press(setup, "escape");
+    await waitForTextGone(setup, "● x");
+    expect(backgroundsOf(setup, "The daemon")).toContain(THREAD_MARK);
+    await press(setup, "escape");
+
+    // Assert
+    await waitForState(setup, () => !backgroundsOf(setup, "The daemon").includes(THREAD_MARK));
+
+    // Act: mark again, save
+    await dragText(setup, "The daemon", "daemon persists", "daemon".length);
+    await type(setup, "Which daemon?");
+    await pressKey(setup, "RETURN", { meta: true });
+
+    // Assert: the saved comment keeps the passage marked
+    await waitForState(setup, () => server.core.sessionGet(session.id).annotations.length === 1);
+    await waitForState(setup, () => backgroundsOf(setup, "The daemon").includes(THREAD_MARK));
+  }, 60_000);
+});
+
+describe("compose newline convention", () => {
+  test("enter breaks the line; cmd+enter saves the multiline body verbatim", async () => {
+    // Arrange
+    const setup = await renderApp();
+
+    await clickText(setup, "daemon");
+
+    // Act
+    await type(setup, "first line");
+    await press(setup, "enter");
+    await type(setup, "second line");
+
+    // Assert: still composing, the newline did not save
+    expect(server.core.sessionGet(session.id).annotations.length).toBe(0);
+
+    // Act
+    await pressKey(setup, "RETURN", { meta: true });
+
+    // Assert
+    await waitForState(setup, () => server.core.sessionGet(session.id).annotations.length === 1);
+    expect(server.core.sessionGet(session.id).annotations[0]!.body).toBe("first line\nsecond line");
+  });
+
+  test("escape cancels the composer without saving", async () => {
+    // Arrange
+    const setup = await renderApp();
+
+    await clickText(setup, "daemon");
+    await type(setup, "never saved");
+    await waitForText(setup, "● never saved");
+
+    // Act
+    await press(setup, "escape");
+
+    // Assert
+    await waitForTextGone(setup, "● never saved");
+    expect(server.core.sessionGet(session.id).annotations.length).toBe(0);
+  });
+});
+
+describe("sheet header", () => {
+  test("mirrors the thread name and carries the Edit and Share word-buttons", async () => {
+    // Arrange
+    const setup = await renderApp();
+
+    // Assert - the minimal header shows the thread title (mirror) plus the owner
+    // actions; the revision and submitter metadata are no longer in the header
+    const frame = setup.captureCharFrame();
+
+    expect(frame).toContain("Migration Plan");
+    expect(frame).not.toContain("submitted by");
+    expect(frame).not.toContain("rev 1");
+    expect(frame).toContain(" edit ");
+    expect(frame).toContain(" share ");
+  });
+});
+
+describe("quick-actions settings editor", () => {
+  test("expanding an action edits its system prompt inline and persists it", async () => {
+    // Arrange
+    const setup = await renderApp();
+
+    // 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, "Actions");
+    await clickText(setup, "Zoom out, research in depth");
+    await type(setup, "CUSTOM");
+    await setup.renderOnce();
+
+    // Assert - the keystrokes reached the focused input (not swallowed by nav) and persisted
+    expect(setup.captureCharFrame()).toContain("CUSTOM");
+    await waitForState(setup, () =>
+      readFileSync(join(home, "no-config.toml"), "utf8").includes("CUSTOM"),
+    );
+  });
+});
+
+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;
+    }
+  });
+});
+
+describe("the quick-action palette", () => {
+  test("/ lists the quick actions and a pick inserts the reference, not the body", async () => {
+    // Arrange
+    const setup = await renderApp();
+
+    await dragText(setup, "The daemon", "daemon persists", "daemon".length);
+
+    // Act - a leading slash opens the palette; step to the second default and pick it
+    await type(setup, "/");
+    await waitForText(setup, "zoom-out-research-in-depth");
+    await pressKey(setup, "ARROW_DOWN");
+    await press(setup, "enter");
+    await pressKey(setup, "RETURN", { meta: true });
+
+    // 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.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 { Thread } 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: 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("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);
+  });
+});