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

package/src/App.export.test.tsx

@@ -1,18 +1,28 @@
-/**
- * Tier-2 wiring test for the notes-vault export: with [integrations.obsidian]
- * configured to export on resolve, submitting a review writes the note into
- * the vault and surfaces the path in the status line.
- */
+/** Tier-2 wiring for the notes-vault export: with [integrations.obsidian] set to export on resolve, submitting a review writes the note into the vault and surfaces the path in the status line. */
 
 import { afterEach, beforeEach, describe, expect, test } from "bun:test";
-import { existsSync, mkdirSync, mkdtempSync, readFileSync, readdirSync, rmSync, writeFileSync } from "node:fs";
+import {
+  existsSync,
+  mkdirSync,
+  mkdtempSync,
+  readFileSync,
+  readdirSync,
+  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 type { Thread } from "@cueloop/schema";
 import { App } from "./App";
+import {
+  isolateUserConfig,
+  waitForState,
+  waitForText,
+  pressKey,
+  renderReadyApp,
+} from "./test-support";
 
 const PLAN = `# Migration Plan
 
@@ -22,66 +32,73 @@ Move the store atomically.
 let home: string;
 let vault: string;
 let server: DaemonServer;
-let session: ReviewSession;
-let savedConfigEnv: string | undefined;
+let session: Thread;
+let restoreUserConfig: () => void;
 
 beforeEach(() => {
   home = mkdtempSync(join(tmpdir(), "cueloop-app-export-"));
   vault = join(home, "vault");
   mkdirSync(vault);
   const configPath = join(home, "config.toml");
-  writeFileSync(configPath, `[integrations.obsidian]\nvault = ${JSON.stringify(vault)}\nexportOn = "resolve"\n`);
-  savedConfigEnv = process.env.CUELOOP_CONFIG;
-  process.env.CUELOOP_CONFIG = configPath;
+
+  writeFileSync(
+    configPath,
+    `[integrations.obsidian]\nvault = ${JSON.stringify(vault)}\nexportOn = "message"\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: "plan", content: PLAN, meta: { title: "Migration Plan", planPath: "plan.md" } },
+    artifact: {
+      type: "plan",
+      content: PLAN,
+      meta: { title: "Migration Plan", planPath: "plan.md" },
+    },
   });
 });
 afterEach(() => {
-  if (savedConfigEnv === undefined) delete process.env.CUELOOP_CONFIG;
-  else process.env.CUELOOP_CONFIG = savedConfigEnv;
+  restoreUserConfig();
   server.stop();
   rmSync(home, { recursive: true, force: true });
 });
 
 describe("obsidian export on resolve", () => {
   test("submitting a review writes the plan into the vault and shows the path", async () => {
-    const setup = await testRender(<App home={home} sessionId={session.id} />, { width: 120, height: 32 });
-    for (let i = 0; i < 40 && !setup.captureCharFrame().includes("cueloop"); i++) {
-      await Bun.sleep(25);
-      await setup.renderOnce();
-    }
-    // open the submit overlay, keep the default verdict (approve), submit
-    setup.mockInput.pressKey("RETURN");
-    await Bun.sleep(15);
-    await setup.renderOnce();
-    expect(setup.captureCharFrame()).toContain("verdict");
-    setup.mockInput.pressKey("RETURN");
-    // wall-clock deadlines: the export is an async round-trip after resolve,
-    // and an iteration count times out on a loaded runner
+    // Arrange
+    const setup = await renderReadyApp(<App home={home} sessionId={session.id} />, {
+      width: 120,
+      height: 32,
+    });
+
+    await waitForText(setup, "cueloop");
+
+    // Act
+    await pressKey(setup, "RETURN", { meta: true }); // open the submit overlay, keep the default message (approve)
+
+    // Assert
+    await waitForText(setup, "[approve]");
+
+    // Act
+    await pressKey(setup, "RETURN", { meta: true }); // submit
+
+    // Assert
+    // the export is an async round-trip after resolve; the status line lands
+    // on a later render than the file write
     const dir = join(vault, "cueloop");
-    const fileDeadline = Date.now() + 30_000;
-    while (Date.now() < fileDeadline && !existsSync(dir)) {
-      await Bun.sleep(25);
-      await setup.renderOnce();
-    }
-    // the status line lands on a later render than the file write
-    const statusDeadline = Date.now() + 30_000;
-    while (Date.now() < statusDeadline && !setup.captureCharFrame().includes("exported to")) {
-      await Bun.sleep(25);
-      await setup.renderOnce();
-    }
+
+    await waitForState(setup, () => existsSync(dir));
+    await waitForText(setup, "exported to");
 
     const notes = readdirSync(dir);
+
     expect(notes.length).toBe(1);
     expect(notes[0]).toMatch(/^\d{4}-\d{2}-\d{2} - Migration Plan\.md$/);
     const written = readFileSync(join(dir, notes[0]!), "utf8");
+
     expect(written).toContain("source: cueloop");
     expect(written).toContain(`session: ${session.id}`);
-    expect(written).toContain("verdict: approve");
+    expect(written).toContain("message: approved");
     expect(written).toContain("Move the store atomically.");
     expect(setup.captureCharFrame()).toContain("exported to");
   });

package/src/App.focus.test.ts

@@ -0,0 +1,89 @@
+import { describe, expect, test } from "bun:test";
+import { nextFocusPane, reconciledFocus, threadsNavHandled, visiblePanes } from "./App";
+
+describe("threads keyboard nav", () => {
+  const base = () => {
+    let cursor = 1;
+    let opened = 0;
+
+    return {
+      setInboxCursor: (update: (cursor: number) => number) => (cursor = update(cursor)),
+      openSession: () => (opened += 1),
+      read: () => ({
+        get cursor() {
+          return cursor;
+        },
+        get opened() {
+          return opened;
+        },
+      }),
+    };
+  };
+
+  test("moves the cursor and opens only when the Threads pane is quiet and focused", () => {
+    const spy = base();
+    const call = (name: string) =>
+      threadsNavHandled({
+        focusedPane: "threads",
+        quiet: true,
+        key: { name },
+        count: 3,
+        setInboxCursor: spy.setInboxCursor,
+        openSession: spy.openSession,
+      });
+
+    expect(call("down")).toBe(true);
+    expect(spy.read().cursor).toBe(2);
+    expect(call("down")).toBe(true); // clamps at the last row
+    expect(spy.read().cursor).toBe(2);
+    expect(call("k")).toBe(true);
+    expect(spy.read().cursor).toBe(1);
+    expect(call("return")).toBe(true);
+    expect(spy.read().opened).toBe(1);
+  });
+
+  test("defers when another pane is focused, keys are owned elsewhere, or the inbox is empty", () => {
+    const spy = base();
+    const params = {
+      quiet: true,
+      key: { name: "down" },
+      count: 3,
+      setInboxCursor: spy.setInboxCursor,
+      openSession: spy.openSession,
+    };
+
+    expect(threadsNavHandled({ ...params, focusedPane: "changes" })).toBe(false);
+    expect(threadsNavHandled({ ...params, focusedPane: "threads", quiet: false })).toBe(false);
+    expect(threadsNavHandled({ ...params, focusedPane: "threads", count: 0 })).toBe(false);
+    expect(spy.read().cursor).toBe(1);
+  });
+});
+
+describe("pane focus cycle", () => {
+  test("visiblePanes lists only the open panes, in reading order", () => {
+    expect(visiblePanes(true, true, true, true)).toEqual([
+      "threads",
+      "thread",
+      "changes",
+      "project",
+    ]);
+    expect(visiblePanes(true, false, true, true)).toEqual(["threads", "changes", "project"]);
+    expect(visiblePanes(false, false, true, false)).toEqual(["changes"]);
+  });
+
+  test("nextFocusPane wraps forward and back over the visible panes", () => {
+    const panes = visiblePanes(true, false, true, true);
+
+    expect(nextFocusPane("threads", panes, false)).toBe("changes");
+    expect(nextFocusPane("project", panes, false)).toBe("threads");
+    expect(nextFocusPane("threads", panes, true)).toBe("project");
+    expect(nextFocusPane("changes", [], false)).toBe("changes");
+  });
+
+  test("reconciledFocus falls back only when the focused pane is not navigable", () => {
+    expect(reconciledFocus(["threads", "changes"], "threads")).toBeNull();
+    expect(reconciledFocus(["threads", "changes"], "thread")).toBe("threads");
+    expect(reconciledFocus(["changes", "project"], "thread")).toBe("changes");
+    expect(reconciledFocus([], "thread")).toBeNull();
+  });
+});

package/src/App.identity.test.tsx

@@ -0,0 +1,78 @@
+/** Reviewer identity surfaces: the Account settings tab and the author-name tooltip on a comment dot. */
+
+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 { isolateUserConfig, locateText, renderReadyApp, waitForText } from "./test-support";
+
+const PLAN = "# Migration Plan\n\nThe daemon persists sessions to disk atomically.\n";
+
+let home: string;
+let restoreUserConfig: () => void;
+let server: DaemonServer;
+let sessionId: string;
+
+beforeEach(() => {
+  home = mkdtempSync(join(tmpdir(), "cueloop-identity-"));
+  restoreUserConfig = isolateUserConfig(home);
+  server = new DaemonServer({ home, idleExitMs: 0 });
+  server.start();
+  const session = server.core.sessionCreate({
+    workspace: { repoRoot: "/repo", branch: "main" },
+    artifact: {
+      type: "plan",
+      content: PLAN,
+      meta: { title: "Migration Plan", planPath: "plan.md" },
+    },
+  });
+  sessionId = session.id;
+});
+afterEach(() => {
+  restoreUserConfig();
+  server.stop();
+  rmSync(home, { recursive: true, force: true });
+});
+
+async function renderApp() {
+  return renderReadyApp(<App home={home} sessionId={sessionId} />, { width: 120, height: 32 });
+}
+
+test("the Account settings tab shows the display name row and the GitHub sync action", async () => {
+  const setup = await renderApp();
+
+  await setup.mockMouse.click(1, 0);
+  await waitForText(setup, "settings");
+  const menu = setup.captureCharFrame().split("\n");
+  const settingsRow = menu.findIndex((line) => line.includes("settings"));
+
+  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"));
+
+  await setup.mockMouse.click(dialog[accountRow]!.indexOf("Account") + 1, accountRow);
+  await waitForText(setup, "Display name");
+  expect(setup.captureCharFrame()).toContain("Sync from GitHub");
+});
+
+test("hovering an own comment's dot surfaces the author tooltip", async () => {
+  server.core.sessionAnnotate(sessionId, {
+    id: "a_own",
+    kind: "comment",
+    anchor: { quote: "atomically", prefix: "sessions to disk ", suffix: "." },
+    body: "My note.",
+  });
+  const setup = await renderApp();
+
+  await waitForText(setup, "● My note.");
+  // the tooltip is not painted until the pointer is over the dot
+  expect(setup.captureCharFrame()).not.toContain("you");
+  const dot = locateText(setup, "● My note.");
+
+  await setup.mockMouse.moveTo(dot.column, dot.row);
+  await waitForText(setup, "you");
+});

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);
+});