@cueloop/client 0.1.0-alpha.32 → 0.1.0-alpha.33

package/src/components/primitives/Button.stories.tsx

@@ -10,13 +10,13 @@ export const Variants: Story = {
   render: () => (
     <Toolbar>
       <Button variant="solid" marginRight={2} onPress={() => {}}>
-        {" Save ⏎ "}
+        {" Save "}
       </Button>
       <Button marginRight={2} onPress={() => {}}>
         {" Cancel esc "}
       </Button>
       <Button variant="accent-text" onPress={() => {}}>
-        {"Submit review (2) ⏎"}
+        {"Submit review"}
       </Button>
     </Toolbar>
   ),

package/src/components/primitives/Dialog.tsx

@@ -15,11 +15,13 @@ export interface DialogProps {
   title?: string;
   width: number;
   height: number;
+  /** Solid panel fill for content-heavy dialogs; default transparent. */
+  background?: string;
   theme?: Theme;
   children: React.ReactNode;
 }
 
-export function Dialog({ isOpen, title, width, height, theme, children }: DialogProps): React.ReactNode {
+export function Dialog({ isOpen, title, width, height, background, theme, children }: DialogProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   if (!isOpen) return null;
   return (
@@ -42,6 +44,7 @@ export function Dialog({ isOpen, title, width, height, theme, children }: Dialog
           border: true,
           borderStyle: FRAME_BORDER_STYLE,
           borderColor: tokens.accent,
+          backgroundColor: background,
           flexDirection: "column",
         }}
         title={title}

package/src/components/primitives/Tabs.tsx

@@ -1,16 +1,15 @@
 /**
- * Tabs / TabList / Tab over the native tab-select renderable. The composition
- * follows the ARIA tabs pattern: Tabs owns the controlled selection
- * (`selectedKey` + `onSelectionChange`), TabList renders the strip, Tab
- * declares one item. Selection stays controlled from outside so the keyboard
- * grammar (not the strip) remains the key owner; clicks map through the
- * native tab geometry.
+ * Tabs / TabList / Tab: a transparent, full-width rounded strip of clickable
+ * text tabs. The composition follows the ARIA tabs pattern: Tabs owns the
+ * controlled selection (`selectedKey` + `onSelectionChange`), TabList renders
+ * the strip, Tab declares one item. Selection stays controlled from outside so
+ * the keyboard grammar remains the key owner; each tab click sets the key.
  */
 
-import React, { createContext, useContext, useEffect, useRef } from "react";
-import type { MouseEvent, TabSelectRenderable } from "@opentui/core";
+import React, { createContext, useContext } from "react";
 import type { Theme } from "../../theme";
 import { useComponentTheme } from "../theme-context";
+import { FRAME_BORDER_STYLE } from "./frame";
 
 interface TabsContextValue {
   selectedKey: string;
@@ -62,36 +61,18 @@ export function TabList({ children }: TabListProps): React.ReactNode {
       items.push({ id: child.props.id, label: child.props.children });
     }
   });
-  const tabWidth = Math.max(...items.map((item) => item.label.length)) + 2;
-  const selectedIndex = Math.max(
-    0,
-    items.findIndex((item) => item.id === tabs.selectedKey),
-  );
-  const stripRef = useRef<TabSelectRenderable | null>(null);
-  // selection is controlled: mirror the selected key into the native strip
-  useEffect(() => {
-    stripRef.current?.setSelectedIndex(selectedIndex);
-  }, [selectedIndex, items.length]);
-  const onMouseUp = (event: MouseEvent): void => {
-    const strip = stripRef.current;
-    if (!strip) return;
-    const index = Math.floor((event.x - strip.x) / tabWidth);
-    const item = items[index];
-    if (item) tabs.onSelectionChange(item.id);
-  };
   return (
-    <tab-select
-      ref={stripRef}
-      options={items.map((item) => ({ name: item.label, description: "", value: item.id }))}
-      tabWidth={tabWidth}
-      showUnderline={false}
-      showDescription={false}
-      showScrollArrows={false}
-      textColor={tokens.textDim}
-      selectedTextColor={tabs.selectedColor ?? tokens.accent}
-      selectedBackgroundColor={tokens.elevated}
-      onMouseUp={onMouseUp}
-      style={{ height: 1, width: tabWidth * items.length }}
-    />
+    <box
+      style={{ width: "100%", height: 3, border: true, borderStyle: FRAME_BORDER_STYLE, borderColor: tokens.text, flexDirection: "row", paddingLeft: 1 }}
+    >
+      {items.map((item) => {
+        const selected = item.id === tabs.selectedKey;
+        return (
+          <box key={item.id} style={{ marginRight: 2 }} onMouseUp={() => tabs.onSelectionChange(item.id)}>
+            <text fg={selected ? (tabs.selectedColor ?? tokens.accent) : tokens.textDim}>{item.label}</text>
+          </box>
+        );
+      })}
+    </box>
   );
 }

package/src/key-bindings.test.ts

@@ -86,12 +86,12 @@ describe("mode layers own their keys", () => {
 describe("getActiveKeys-generated status hints", () => {
   test("normal mode hint matches the locked string", () => {
     expect(bindings().statusHint("normal")).toBe(
-      "j/k move · v span · drag selects · c comment · s suggest · x cut · e edit · n/p annotations · ⏎ submit · q quit",
+      "j/k move · v span · drag selects · c comment · s suggest · x cut · e edit · n/p annotations · enter submit · q quit",
     );
   });
 
   test("card-selected hint keeps the locked Cut label", () => {
-    expect(bindings().statusHint("card")).toBe("card · e edit · x Cut · n/p cards · esc deselect · ⏎ submit");
+    expect(bindings().statusHint("card")).toBe("card · e edit · x Cut · n/p cards · esc deselect · enter submit");
   });
 
   test("span hint", () => {
@@ -101,11 +101,11 @@ describe("getActiveKeys-generated status hints", () => {
   });
 
   test("compose hint", () => {
-    expect(bindings({ overlay: "compose" }).statusHint("compose")).toBe("typing · ⏎ save · esc cancel");
+    expect(bindings({ overlay: "compose" }).statusHint("compose")).toBe("typing · enter save · esc cancel");
   });
 
   test("submit hint", () => {
-    expect(bindings({ overlay: "submit" }).statusHint("submit")).toBe("verdict ←/→ · ⏎ submit · esc cancel");
+    expect(bindings({ overlay: "submit" }).statusHint("submit")).toBe("verdict ←/→ · enter submit · esc cancel");
   });
 
   test("walk hint", () => {

package/src/key-bindings.ts

@@ -26,6 +26,15 @@ export interface KeyLayerContext {
 /** Hint templates keyed by the same view states the status line shows. */
 export type HintMode = "normal" | "collaborator" | "card" | "span" | "compose" | "submit" | "walk" | "read-only";
 
+export interface CheatsheetEntry {
+  keys: string;
+  label: string;
+}
+export interface CheatsheetSection {
+  title: string;
+  entries: CheatsheetEntry[];
+}
+
 type HintEntry =
   | { text: string }
   | { commands: string[]; label: string; labelFirst?: boolean };
@@ -97,8 +106,8 @@ const HINT_TEMPLATES: Record<HintMode, HintEntry[]> = {
 
 /** Status-line glyphs for named keys. */
 const KEY_GLYPHS: Record<string, string> = {
-  return: "⏎",
-  enter: "⏎",
+  return: "enter",
+  enter: "enter",
   escape: "esc",
   left: "←",
   right: "→",
@@ -360,4 +369,34 @@ export class KeyBindings {
     }
     return fragments.join(" · ");
   }
+
+  /**
+   * The full keybinding cheatsheet, grouped by mode. Each section sets the
+   * layer context so getActiveKeys resolves that mode's real bindings, then
+   * restores it - a rebound key shows its live binding here too.
+   */
+  cheatsheet(): CheatsheetSection[] {
+    const saved = this.context;
+    const build = (context: KeyLayerContext, mode: HintMode, title: string): CheatsheetSection => {
+      this.context = context;
+      const entries: CheatsheetEntry[] = [];
+      for (const entry of HINT_TEMPLATES[mode]) {
+        if ("text" in entry || !entry.label) continue;
+        const keys = entry.commands
+          .map((command) => this.keyDisplayFor(command))
+          .filter((display): display is string => display !== null)
+          .join(" / ");
+        if (keys) entries.push({ keys, label: entry.label });
+      }
+      return { title, entries };
+    };
+    const sections = [
+      build({ overlay: "none", spanMode: false }, "normal", "Review"),
+      build({ overlay: "none", spanMode: true }, "span", "Selection"),
+      build({ overlay: "submit", spanMode: false }, "submit", "Submit"),
+      build({ overlay: "walk", spanMode: false }, "walk", "Walk"),
+    ];
+    this.context = saved;
+    return sections.filter((section) => section.entries.length > 0);
+  }
 }

package/src/serve.test.ts

@@ -85,8 +85,8 @@ describe("cueloop serve", () => {
     // Assert
     expect(bytes).toContain("cueloop");
     expect(bytes).toContain("Rollout Plan");
-    // observer chrome, not the controller's mutating hint bar
-    expect(bytes).toContain("observer - read-only");
+    // observer chrome: the header badge marks the read-only session
+    expect(bytes).toContain("observer");
   });
 
   test("two observers can watch at once", async () => {

package/src/session-controller.share.test.ts

@@ -80,6 +80,19 @@ describe("share", () => {
     // Assert
     expect(client.sessionSetShareId).toHaveBeenCalledWith("ses_1", "p_abc123xy");
   });
+
+  test("surfaces the ssh line as a toast, not an inline status", async () => {
+    // Arrange
+    const { controller } = await connectedController(sessionFixture());
+
+    // Act
+    controller.share();
+    await tick();
+
+    // Assert
+    expect(controller.getSnapshot().toast).toEqual({ body: "ssh p_abc123xy@cueloop.dev", title: "share link copied" });
+    expect(controller.getSnapshot().status).not.toContain("ssh p_abc123xy@cueloop.dev");
+  });
 });
 
 describe("pullShared", () => {

package/src/session-controller.ts

@@ -50,10 +50,16 @@ export const DEFAULT_AUTO_CLOSE = 5;
 /** How often an open shared plan re-pulls collaborator notes (ADR 0005 stage 2). */
 export const SHARE_POLL_MS = 4000;
 
+export interface ToastState {
+  title?: string;
+  body: string;
+}
+
 export interface ControllerSnapshot {
   session: ReviewSession | null;
   inbox: ReviewSession[] | null;
   status: string;
+  toast: ToastState | null;
   error: string | null;
   completion: Completion;
   /**
@@ -96,6 +102,8 @@ export interface ReviewController {
   /** Loaded config parts the controller acts on: auto-close and exporters. */
   applyConfig(config: CueloopConfig): void;
   setStatus(message: string): void;
+  showToast(body: string, title?: string): void;
+  dismissToast(): void;
   /** Derived projections, cached per session identity. */
   display(): DisplayBlock[];
   rows(): DiffRow[];
@@ -161,6 +169,7 @@ class Controller implements ReviewController {
     session: null,
     inbox: null,
     status: "",
+    toast: null,
     error: null,
     completion: { phase: "idle" },
     editOrphanCount: 0,
@@ -248,6 +257,14 @@ class Controller implements ReviewController {
     this.update({ status: message });
   }
 
+  showToast(body: string, title?: string): void {
+    this.update({ toast: { body, title } });
+  }
+
+  dismissToast(): void {
+    if (this.snapshot.toast) this.update({ toast: null });
+  }
+
   // ── derived projections ─────────────────────
   private ensureDerived(): void {
     const session = this.snapshot.session;
@@ -515,7 +532,8 @@ class Controller implements ReviewController {
         // Stamp the id back so a later pull knows which share to collect from.
         const shareId = shareIdFromLine(line);
         if (shareId && this.client) await this.client.sessionSetShareId(session.id, shareId);
-        this.setStatus(copied ? `✓ share link copied - ${line}` : line);
+        this.setStatus(copied ? "✓ share link copied" : "share link ready");
+        this.showToast(line, copied ? "share link copied" : "share link");
       })
       .catch((error: unknown) => this.setStatus(`share failed: ${error instanceof Error ? error.message : String(error)}`));
   }

package/src/test-support.ts

@@ -61,53 +61,117 @@ export async function typeText(setup: TestRendererSetup, text: string): Promise<
   await settle(setup);
 }
 
-const WAIT_DEADLINE_MS = 30_000;
+// Below the 60s per-test budget so a genuinely stuck wait throws its frame
+// error (useful) before bun's bare "timed out" fires. Generous because a
+// contended CI runner starves the render loop and daemon round-trips.
+const WAIT_DEADLINE_MS = 45_000;
+
+/** One macrotask turn: hands the event loop back so the in-process daemon can
+ *  read its socket and apply the write before the next poll. Tight render-pass
+ *  bursts starve that read on a contended CI runner - the round-trip then never
+ *  lands and the wait hangs the whole budget. */
+function yieldEventLoop(): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, 2));
+}
+
+/** Log a still-waiting line at most this often, so only genuinely slow (i.e.
+ *  flaking) waits are noisy; fast waits stay silent. */
+const PROGRESS_LOG_MS = 4000;
+
+/** The last render frame's tail, so a progress line shows what is on screen. */
+function frameTail(frame: string, rows = 6): string {
+  return frame.split("\n").slice(-rows).join("\n");
+}
 
 /**
- * waitForFrame gives up as soon as the renderer is idle, but external timers
- * (the parser's bare-ESC window, daemon IO, spawned editors) settle on the
- * event loop while nothing is scheduled. Between attempts, one real
- * event-loop turn plus a render pass lets those land; the deadline bounds
- * the whole wait.
+ * Poll gently: one render pass, one frame check, one macrotask yield. No
+ * multi-pass bursts, so the daemon (same event loop) always gets a turn to
+ * process IO between checks. The deadline bounds the whole wait. Slow waits log
+ * progress (poll count + frame-change count) so a CI stall shows whether the
+ * render froze or the content simply never arrived.
  */
 async function waitForFramePredicate(
   setup: TestRendererSetup,
   predicate: (frame: string) => boolean,
+  label: string,
 ): Promise<string> {
   allowEventLoopUpdates();
-  const deadline = Date.now() + WAIT_DEADLINE_MS;
+  const start = Date.now();
+  const deadline = start + WAIT_DEADLINE_MS;
+  let polls = 0;
+  let frameChanges = 0;
+  let lastFrame = "";
+  let lastLog = start;
   for (;;) {
-    try {
-      return await setup.waitForFrame(predicate, { maxPasses: 50 });
-    } catch (error) {
-      if (Date.now() > deadline) throw error;
-      await new Promise((resolve) => setTimeout(resolve, 1));
-      await setup.renderOnce();
+    await setup.renderOnce();
+    const frame = setup.captureCharFrame();
+    polls++;
+    if (frame !== lastFrame) {
+      frameChanges++;
+      lastFrame = frame;
     }
+    if (predicate(frame)) return frame;
+    const now = Date.now();
+    if (now > deadline) {
+      const frozen = frameChanges <= 1 ? " — render never advanced (frozen)" : "";
+      throw new Error(
+        `waitFor ${label} timed out after ${now - start}ms (${polls} polls, ${frameChanges} frame changes${frozen}).\nlast frame:\n${frame}`,
+      );
+    }
+    if (now - lastLog >= PROGRESS_LOG_MS) {
+      lastLog = now;
+      console.error(
+        `[waitFor] still waiting for ${label} — ${now - start}ms, ${polls} polls, ${frameChanges} frame changes\n${frameTail(frame)}`,
+      );
+    }
+    await yieldEventLoop();
   }
 }
 
 /** Wait until a state predicate holds (daemon round-trips included). */
-export async function waitForState(setup: TestRendererSetup, predicate: () => boolean): Promise<void> {
+export async function waitForState(
+  setup: TestRendererSetup,
+  predicate: () => boolean,
+  label = "state",
+): Promise<void> {
   allowEventLoopUpdates();
-  const deadline = Date.now() + WAIT_DEADLINE_MS;
+  const start = Date.now();
+  const deadline = start + WAIT_DEADLINE_MS;
+  let polls = 0;
+  let frameChanges = 0;
+  let lastFrame = "";
+  let lastLog = start;
   for (;;) {
-    try {
-      return await setup.waitFor(predicate, { maxPasses: 50 });
-    } catch (error) {
-      if (Date.now() > deadline) throw error;
-      await new Promise((resolve) => setTimeout(resolve, 1));
-      await setup.renderOnce();
+    if (predicate()) return;
+    await setup.renderOnce();
+    const frame = setup.captureCharFrame();
+    polls++;
+    if (frame !== lastFrame) {
+      frameChanges++;
+      lastFrame = frame;
+    }
+    if (predicate()) return;
+    const now = Date.now();
+    if (now > deadline) {
+      const frozen = frameChanges <= 1 ? " — render never advanced (frozen)" : "";
+      throw new Error(
+        `waitForState ${label} timed out after ${now - start}ms (${polls} polls, ${frameChanges} frame changes${frozen}).\nlast frame:\n${frame}`,
+      );
+    }
+    if (now - lastLog >= PROGRESS_LOG_MS) {
+      lastLog = now;
+      console.error(`[waitForState] still waiting for ${label} — ${now - start}ms, ${polls} polls, ${frameChanges} frame changes`);
     }
+    await yieldEventLoop();
   }
 }
 
 /** Wait until the frame contains the needle (daemon round-trips included). */
 export async function waitForText(setup: TestRendererSetup, needle: string): Promise<string> {
-  return waitForFramePredicate(setup, (frame) => frame.includes(needle));
+  return waitForFramePredicate(setup, (frame) => frame.includes(needle), `text ${JSON.stringify(needle)}`);
 }
 
 /** Wait until the frame no longer contains the needle. */
 export async function waitForTextGone(setup: TestRendererSetup, needle: string): Promise<string> {
-  return waitForFramePredicate(setup, (frame) => !frame.includes(needle));
+  return waitForFramePredicate(setup, (frame) => !frame.includes(needle), `text-gone ${JSON.stringify(needle)}`);
 }

package/src/version.ts

@@ -0,0 +1,5 @@
+/** The published client version, read from the package manifest. */
+
+import manifest from "../package.json" with { type: "json" };
+
+export const CLIENT_VERSION: string = manifest.version;

package/src/components/ComposeBar.stories.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import { DARK } from "../theme";
-import type { Story, StoryMeta } from "./story";
-import { ComposeBar } from "./ComposeBar";
-
-export const meta: StoryMeta = { title: "ComposeBar" };
-
-export const CommentOnLine: Story = {
-  render: () => (
-    <ComposeBar kind="comment" quote="  private items = new Map();" text="Map needs an eviction story." onInput={() => {}} />
-  ),
-  expectedColors: [DARK.accent, DARK.elevated],
-};
-
-export const SuggestionOnLine: Story = {
-  render: () => <ComposeBar kind="suggestion" quote="export class Store {" text="" onInput={() => {}} />,
-  expectedColors: [DARK.green],
-};

package/src/components/ComposeBar.tsx

@@ -1,54 +0,0 @@
-/**
- * Bottom compose bar - the diff view composes annotation bodies here. The
- * editor is the same multiline textarea contract as the inline composer:
- * ⏎ saves through the grammar, shift+⏎ adds a line.
- */
-
-import React, { useRef } from "react";
-import type { KeyBinding, TextareaRenderable } from "@opentui/core";
-import type { Theme } from "../theme";
-import { useComponentTheme } from "./theme-context";
-import { truncateToSingleLine } from "./truncate-text";
-
-export interface ComposeBarProps {
-  kind: "comment" | "suggestion";
-  quote: string;
-  text: string;
-  onInput: (text: string) => void;
-  theme?: Theme;
-}
-
-const COMPOSE_KEY_BINDINGS: KeyBinding[] = [
-  { name: "return", action: "submit" },
-  { name: "return", shift: true, action: "newline" },
-];
-
-export function ComposeBar({ kind, quote, text, onInput, theme }: ComposeBarProps): React.ReactNode {
-  const tokens = useComponentTheme(theme);
-  const editorRef = useRef<TextareaRenderable | null>(null);
-  const editorRows = Math.min(4, Math.max(1, text.split("\n").length));
-  return (
-    <box style={{ height: 1 + editorRows, backgroundColor: tokens.elevated, flexDirection: "column", paddingLeft: 1 }}>
-      <text fg={kind === "suggestion" ? tokens.green : tokens.accent}>
-        {kind === "suggestion" ? "SUGGEST REPLACEMENT FOR" : "COMMENT ON"} “{truncateToSingleLine(quote, 60)}” · ⏎ save · esc cancel
-      </text>
-      <textarea
-        ref={editorRef}
-        focused
-        initialValue=""
-        keyBindings={COMPOSE_KEY_BINDINGS}
-        onContentChange={() => {
-          const editor = editorRef.current;
-          if (editor) onInput(editor.plainText);
-        }}
-        style={{
-          height: editorRows,
-          backgroundColor: tokens.elevated,
-          focusedBackgroundColor: tokens.elevated,
-          textColor: tokens.text,
-          focusedTextColor: tokens.text,
-        }}
-      />
-    </box>
-  );
-}