@cueloop/client 0.1.0-alpha.2 → 0.1.0-alpha.21

package/src/review-panel.test.ts

@@ -0,0 +1,111 @@
+import { describe, expect, test } from "bun:test";
+import {
+  REVIEW_DEFAULT_WIDTH,
+  REVIEW_MAX_WIDTH,
+  REVIEW_MIN_WIDTH,
+  REVIEW_PLAN_MIN_WIDTH,
+  REVIEW_RESIZE_STEP,
+  clampWidth,
+  cycleReviewPanelMode,
+  maxWidthForTerminal,
+  resolveReviewWidth,
+  reviewRowsToDivider,
+  toggleReviewPanelMode,
+  widthFromMouseColumn,
+} from "./review-panel";
+
+describe("clampWidth", () => {
+  test("keeps a width inside the bounds untouched", () => {
+    expect(clampWidth(REVIEW_DEFAULT_WIDTH)).toBe(REVIEW_DEFAULT_WIDTH);
+  });
+
+  test("clamps below the minimum and above the maximum", () => {
+    expect(clampWidth(REVIEW_MIN_WIDTH - 10)).toBe(REVIEW_MIN_WIDTH);
+    expect(clampWidth(REVIEW_MAX_WIDTH + 10)).toBe(REVIEW_MAX_WIDTH);
+  });
+
+  test("rounds a fractional column to a whole one", () => {
+    expect(clampWidth(30.7)).toBe(31);
+  });
+
+  test("honors explicit bounds", () => {
+    expect(clampWidth(100, 10, 20)).toBe(20);
+    expect(clampWidth(5, 10, 20)).toBe(10);
+  });
+});
+
+describe("cycleReviewPanelMode", () => {
+  test("cycles expanded -> compact -> hidden -> expanded", () => {
+    expect(cycleReviewPanelMode("expanded")).toBe("compact");
+    expect(cycleReviewPanelMode("compact")).toBe("hidden");
+    expect(cycleReviewPanelMode("hidden")).toBe("expanded");
+  });
+});
+
+describe("toggleReviewPanelMode", () => {
+  test("the chevron toggles only between expanded and compact, never hidden", () => {
+    expect(toggleReviewPanelMode("expanded")).toBe("compact");
+    expect(toggleReviewPanelMode("compact")).toBe("expanded");
+    // a hidden panel has no chevron; a stray toggle still opens it
+    expect(toggleReviewPanelMode("hidden")).toBe("expanded");
+  });
+});
+
+describe("widthFromMouseColumn", () => {
+  test("measures the rail from the mouse column to the right edge", () => {
+    // divider dragged to column 80 of a 120-wide terminal -> a 40-col rail
+    expect(widthFromMouseColumn(80, 120)).toBe(40);
+  });
+
+  test("clamps the dragged width to the bounds", () => {
+    expect(widthFromMouseColumn(0, 120)).toBe(REVIEW_MAX_WIDTH);
+    expect(widthFromMouseColumn(119, 120)).toBe(REVIEW_MIN_WIDTH);
+  });
+
+  test("cannot drag the rail wide enough to starve the plan on a narrow terminal", () => {
+    // dragging to the far left edge of a 60-col terminal still leaves the plan its minimum
+    expect(widthFromMouseColumn(0, 60)).toBe(60 - REVIEW_PLAN_MIN_WIDTH - 1);
+  });
+
+  test("the resize step widens and narrows within the clamp", () => {
+    expect(clampWidth(REVIEW_DEFAULT_WIDTH + REVIEW_RESIZE_STEP)).toBe(REVIEW_DEFAULT_WIDTH + REVIEW_RESIZE_STEP);
+    expect(clampWidth(REVIEW_MIN_WIDTH - REVIEW_RESIZE_STEP)).toBe(REVIEW_MIN_WIDTH);
+  });
+});
+
+describe("maxWidthForTerminal", () => {
+  test("allows the full rail on a wide terminal", () => {
+    expect(maxWidthForTerminal(120)).toBe(REVIEW_MAX_WIDTH);
+  });
+
+  test("reserves the plan its minimum on a narrow terminal", () => {
+    // 60-col terminal: 30 for the plan and 1 for the divider leaves 29 for the rail
+    expect(maxWidthForTerminal(60)).toBe(60 - REVIEW_PLAN_MIN_WIDTH - 1);
+  });
+
+  test("never drops below the rail minimum, however narrow the terminal", () => {
+    expect(maxWidthForTerminal(40)).toBe(REVIEW_MIN_WIDTH);
+  });
+});
+
+describe("resolveReviewWidth", () => {
+  test("leaves a width that already fits untouched", () => {
+    expect(resolveReviewWidth(REVIEW_DEFAULT_WIDTH, 120)).toBe(REVIEW_DEFAULT_WIDTH);
+  });
+
+  test("shrinks a wide persisted width so the plan keeps its room", () => {
+    // a saved 50-col rail on a 60-col terminal would leave the plan 9 cols; clamp it back
+    expect(resolveReviewWidth(REVIEW_MAX_WIDTH, 60)).toBe(60 - REVIEW_PLAN_MIN_WIDTH - 1);
+  });
+});
+
+describe("reviewRowsToDivider", () => {
+  test("builds one vertical glyph per row", () => {
+    expect(reviewRowsToDivider(3)).toBe("│\n│\n│");
+  });
+
+  test("never collapses to an empty column", () => {
+    expect(reviewRowsToDivider(0)).toBe("│");
+    expect(reviewRowsToDivider(-4)).toBe("│");
+  });
+});

package/src/review-panel.ts

@@ -0,0 +1,76 @@
+/**
+ * Pure geometry and state for the resizable review panel. The panel shows the
+ * review rail in one of three modes and the expanded rail resizes within a
+ * clamp; App owns the React state and the mouse wiring, this module owns the
+ * arithmetic so the layout math stays unit-tested and out of the JSX. Bounds
+ * and the compact width carry over verbatim from the approved prototype.
+ */
+
+/** Expanded (full rail), compact (count + dots strip), or hidden (nothing). */
+export type ReviewPanelMode = "expanded" | "compact" | "hidden";
+
+/** Expanded-rail width bounds, in terminal columns. */
+export const REVIEW_MIN_WIDTH = 24;
+export const REVIEW_MAX_WIDTH = 50;
+export const REVIEW_DEFAULT_WIDTH = 34;
+/**
+ * Columns the plan/diff column keeps for itself: the expanded rail yields past
+ * this so a narrow terminal (or a wide persisted width) can never crowd the
+ * plan out to nothing - the whole reason the panel is resizable. On terminals
+ * wide enough for the full 50-col rail this bound never binds.
+ */
+export const REVIEW_PLAN_MIN_WIDTH = 30;
+/** The compact strip is a fixed narrow column: count on top, one dot per card. */
+export const REVIEW_COMPACT_WIDTH = 6;
+/** Keyboard resize step, in columns, for the widen/narrow keys. */
+export const REVIEW_RESIZE_STEP = 2;
+
+/** Round a desired width to a whole column and clamp it to the bounds. */
+export function clampWidth(desiredWidth: number, min = REVIEW_MIN_WIDTH, max = REVIEW_MAX_WIDTH): number {
+  return Math.max(min, Math.min(max, Math.round(desiredWidth)));
+}
+
+/**
+ * The widest the expanded rail may be on a given terminal, reserving the plan
+ * its minimum and one column for the divider. Never drops below REVIEW_MIN_WIDTH
+ * (an extremely narrow terminal is the auto-collapse case, handled elsewhere).
+ */
+export function maxWidthForTerminal(terminalWidth: number): number {
+  return Math.max(REVIEW_MIN_WIDTH, Math.min(REVIEW_MAX_WIDTH, terminalWidth - REVIEW_PLAN_MIN_WIDTH - 1));
+}
+
+/** Clamp a desired rail width to the bounds AND the terminal, so the plan keeps its room. */
+export function resolveReviewWidth(desiredWidth: number, terminalWidth: number): number {
+  return clampWidth(desiredWidth, REVIEW_MIN_WIDTH, maxWidthForTerminal(terminalWidth));
+}
+
+/** The keybinding cycle: expanded -> compact -> hidden -> expanded. */
+export function cycleReviewPanelMode(mode: ReviewPanelMode): ReviewPanelMode {
+  return mode === "expanded" ? "compact" : mode === "compact" ? "hidden" : "expanded";
+}
+
+/**
+ * The clickable chevron toggles only between expanded and compact - hidden is
+ * reachable by keybinding alone, so it never leaves a leftover tab behind. A
+ * toggle from hidden still opens the panel rather than doing nothing.
+ */
+export function toggleReviewPanelMode(mode: ReviewPanelMode): ReviewPanelMode {
+  return mode === "expanded" ? "compact" : "expanded";
+}
+
+/**
+ * Rail width from an absolute mouse column while dragging the divider: the rail
+ * spans from the mouse column to the terminal's right edge, then clamps.
+ */
+export function widthFromMouseColumn(mouseColumn: number, terminalWidth: number): number {
+  return resolveReviewWidth(terminalWidth - mouseColumn, terminalWidth);
+}
+
+/**
+ * The divider is a single-column stack of vertical glyphs (a text block, not a
+ * bordered box - a one-column box with a border renders a full box). One glyph
+ * per row, at least one so the column never collapses.
+ */
+export function reviewRowsToDivider(rows: number): string {
+  return Array.from({ length: Math.max(1, rows) }, () => "│").join("\n");
+}

package/src/run.ts

@@ -10,17 +10,21 @@ export interface RunClientOptions {
   home?: string;
 }
 
-export async function runClient(opts: RunClientOptions): Promise<number> {
-  const renderer = await createCliRenderer();
+export async function runClient(options: RunClientOptions): Promise<number> {
+  // mouse movement reporting makes multiplexers forward drags to the app,
+  // so the renderer's native selection is the drag driver
+  const renderer = await createCliRenderer({ enableMouseMovement: true });
   return new Promise<number>((resolve) => {
     createRoot(renderer).render(
       React.createElement(App, {
-        home: opts.home,
-        sessionId: opts.sessionId,
+        home: options.home,
+        sessionId: options.sessionId,
         onExit: (code: number) => {
           renderer.destroy();
           resolve(code);
-          process.exit(code);
+          // one microtask between destroy and exit lets the renderer flush
+          // its terminal-restore sequences before the process dies
+          queueMicrotask(() => process.exit(code));
         },
       }),
     );

package/src/serve.test.ts

@@ -38,7 +38,7 @@ afterEach(async () => {
 });
 
 /** Connect, open a PTY shell, resolve with the bytes seen until `until` matches. */
-function sshCapture(port: number, until: (s: string) => boolean, timeoutMs = 8000): Promise<string> {
+function sshCapture(port: number, until: (frame: string) => boolean, timeoutMs = 8000): Promise<string> {
   return new Promise((resolve, reject) => {
     const conn = new Client();
     let out = "";
@@ -55,8 +55,8 @@ function sshCapture(port: number, until: (s: string) => boolean, timeoutMs = 800
       .on("ready", () => {
         conn.shell({ term: "xterm-256color", cols: 100, rows: 30 }, (err, stream) => {
           if (err) return finish(err);
-          stream.on("data", (d: Buffer) => {
-            out += d.toString("utf8");
+          stream.on("data", (chunk: Buffer) => {
+            out += chunk.toString("utf8");
             if (until(out)) finish();
           });
           stream.on("close", () => finish(new Error(`stream closed early; captured:\n${out}`)));
@@ -78,7 +78,7 @@ describe("cueloop serve", () => {
   });
 
   test("an anonymous ssh client gets the observer TUI for the session", async () => {
-    const bytes = await sshCapture(handle.port, (s) => s.includes("Rollout Plan") && s.includes("observer"));
+    const bytes = await sshCapture(handle.port, (frame) => frame.includes("Rollout Plan") && frame.includes("observer"));
     expect(bytes).toContain("cueloop");
     expect(bytes).toContain("Rollout Plan");
     // observer chrome, not the controller's mutating hint bar
@@ -87,8 +87,8 @@ describe("cueloop serve", () => {
 
   test("two observers can watch at once", async () => {
     const [a, b] = await Promise.all([
-      sshCapture(handle.port, (s) => s.includes("Rollout Plan")),
-      sshCapture(handle.port, (s) => s.includes("Rollout Plan")),
+      sshCapture(handle.port, (frame) => frame.includes("Rollout Plan")),
+      sshCapture(handle.port, (frame) => frame.includes("Rollout Plan")),
     ]);
     expect(a).toContain("Rollout Plan");
     expect(b).toContain("Rollout Plan");

package/src/serve.ts

@@ -1,5 +1,5 @@
 /**
- * SSH-served TUI (#22 share path): `cueloop serve` lets teammates join a
+ * SSH-served TUI: `cueloop serve` lets teammates join a
  * review session over plain ssh. Every SSH connection renders <App> in
  * observer mode (readOnly) against the same local daemon; the one writable
  * controller stays the local owner's own `cueloop` TUI.
@@ -44,8 +44,8 @@ export interface ServeHandle {
   close(): Promise<void>;
 }
 
-export async function serveClient(opts: ServeOptions = {}): Promise<ServeHandle> {
-  const home = opts.home ?? cueloopHome();
+export async function serveClient(options: ServeOptions = {}): Promise<ServeHandle> {
+  const home = options.home ?? cueloopHome();
   const sshDir = join(home, "ssh");
   mkdirSync(sshDir, { recursive: true, mode: 0o700 });
 
@@ -53,15 +53,15 @@ export async function serveClient(opts: ServeOptions = {}): Promise<ServeHandle>
     // password-less by design; see the trust model in the module comment
     auth: "open",
     hostKey: { path: join(sshDir, "host_key") },
-    startupBanner: opts.banner ?? true,
+    startupBanner: options.banner ?? true,
     idleTimeout: "2h",
-    onError: opts.onError,
+    onError: options.onError,
   }).serve((session) => {
     const root = createRoot(session.renderer);
     root.render(
       React.createElement(App, {
         home,
-        sessionId: opts.sessionId,
+        sessionId: options.sessionId,
         readOnly: true,
         // q disconnects only this observer, never the server
         onExit: () => session.end(),
@@ -70,6 +70,6 @@ export async function serveClient(opts: ServeOptions = {}): Promise<ServeHandle>
     session.onClose(() => root.unmount());
   });
 
-  const info = await server.listen(opts.port ?? 2222, opts.host ?? "127.0.0.1");
+  const info = await server.listen(options.port ?? 2222, options.host ?? "127.0.0.1");
   return { ...info, close: () => server.close() };
 }