@cueloop/client 0.1.0-alpha.65 → 0.1.0-alpha.67

package/src/components/ShellHeader.stories.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ShellHeader } from "./ShellHeader";
+import { NERD } from "./primitives/icons";
+
+export const meta: StoryMeta = { title: "Layout/ShellHeader" };
+
+function Frame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ width: "100%", backgroundColor: DARK.panel }}>{children}</box>;
+}
+
+export const ReviewSurface: Story = {
+  render: () => (
+    <Frame>
+      <ShellHeader
+        leftIcons={[{ glyph: NERD.settings }]}
+        leftLabel="Read Cueloop Repository"
+        tabs={[{ label: "Changes", active: true }]}
+        rightIcons={[
+          { glyph: NERD.expand },
+          { glyph: NERD.diff, active: true },
+          { glyph: NERD.listTree },
+        ]}
+        onToggleSidebar={() => {}}
+        onToggleInspector={() => {}}
+      />
+    </Frame>
+  ),
+  expectedColors: [DARK.accent, DARK.textMuted],
+  size: { width: 120, height: 3 },
+};
+
+export const InspectorCollapsed: Story = {
+  render: () => (
+    <Frame>
+      <ShellHeader
+        leftIcons={[{ glyph: NERD.settings }]}
+        leftLabel="Read Cueloop Repository"
+        rightIcons={[{ glyph: NERD.search }, { glyph: NERD.expand }]}
+        onToggleSidebar={() => {}}
+        sidebarOpen={false}
+        onToggleInspector={() => {}}
+        inspectorOpen={false}
+      />
+    </Frame>
+  ),
+  expectedColors: [DARK.textMuted],
+  size: { width: 120, height: 3 },
+};

package/src/components/ShellHeader.tsx

@@ -0,0 +1,137 @@
+// The app shell's top bar: left panel toggle + icons + label, an optional title, right icons + panel toggle.
+
+import React from "react";
+import { DARK, type Theme } from "../theme";
+import { NERD } from "./primitives/icons";
+
+export interface ShellTab {
+  label: string;
+  active?: boolean;
+}
+
+// A header icon; active paints it in the brand accent to mark the current view or mode.
+export interface ShellIcon {
+  glyph: string;
+  active?: boolean;
+  onPress?: () => void;
+}
+
+export interface ShellHeaderProps {
+  leftIcons?: readonly ShellIcon[];
+  leftLabel?: string;
+  titleIcon?: string;
+  title?: string;
+  tabs?: readonly ShellTab[];
+  rightIcons?: readonly ShellIcon[];
+  sidebarOpen?: boolean;
+  onToggleSidebar?: () => void;
+  inspectorOpen?: boolean;
+  onToggleInspector?: () => void;
+  theme?: Theme;
+}
+
+function IconView({
+  icon,
+  tokens,
+  marginRight,
+}: {
+  icon: ShellIcon;
+  tokens: Theme;
+  marginRight: number;
+}): React.ReactNode {
+  const color = icon.active ? tokens.accent : tokens.textMuted;
+
+  // alignSelf center keeps the clickable box on the same row as sibling icons
+  return (
+    <box onMouseUp={icon.onPress} style={{ alignSelf: "center", marginRight }}>
+      <text fg={color}>{icon.glyph}</text>
+    </box>
+  );
+}
+
+export function ShellHeader({
+  leftIcons = [],
+  leftLabel,
+  titleIcon,
+  title,
+  tabs = [],
+  rightIcons = [],
+  sidebarOpen = true,
+  onToggleSidebar,
+  inspectorOpen = true,
+  onToggleInspector,
+  theme,
+}: ShellHeaderProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+
+  return (
+    <box
+      style={{
+        flexDirection: "row",
+        height: "100%",
+        alignItems: "center",
+        paddingLeft: 2,
+        paddingRight: 2,
+      }}
+    >
+      <box style={{ flexDirection: "row", alignItems: "center" }}>
+        {onToggleSidebar !== undefined ? (
+          <IconView
+            icon={{
+              glyph: sidebarOpen ? NERD.sidebarLeft : NERD.sidebarLeftOff,
+              onPress: onToggleSidebar,
+            }}
+            tokens={tokens}
+            marginRight={3}
+          />
+        ) : null}
+        {leftIcons.map((icon, index) => (
+          <IconView
+            key={`left-${index}-${icon.glyph}`}
+            icon={icon}
+            tokens={tokens}
+            marginRight={3}
+          />
+        ))}
+        {leftLabel !== undefined ? (
+          <text fg={tokens.textMuted}>
+            {leftLabel}
+            {"  "}
+          </text>
+        ) : null}
+        {titleIcon !== undefined ? <text fg={tokens.textDim}>{titleIcon} </text> : null}
+        {title !== undefined ? <text fg={tokens.text}>{title}</text> : null}
+      </box>
+      <box style={{ flexGrow: 1 }} />
+      <box style={{ flexDirection: "row", alignItems: "center" }}>
+        {tabs.map((tab, index) => (
+          <text
+            key={`tab-${index}-${tab.label}`}
+            fg={tab.active ? tokens.accent : tokens.textMuted}
+          >
+            {tab.label}
+            {"   "}
+          </text>
+        ))}
+        {rightIcons.map((icon, index) => (
+          <IconView
+            key={`right-${index}-${icon.glyph}`}
+            icon={icon}
+            tokens={tokens}
+            marginRight={3}
+          />
+        ))}
+        {onToggleInspector !== undefined ? (
+          <IconView
+            icon={{
+              glyph: inspectorOpen ? NERD.sidebarRight : NERD.sidebarRightOff,
+              onPress: onToggleInspector,
+            }}
+            tokens={tokens}
+            marginRight={0}
+          />
+        ) : null}
+      </box>
+    </box>
+  );
+}

package/src/components/SurfaceScrollbar.stories.tsx

@@ -0,0 +1,34 @@
+import React, { useRef } from "react";
+import type { ScrollBoxRenderable } from "@opentui/core";
+import { DARK } from "../theme";
+import { SurfaceScrollbar } from "./SurfaceScrollbar";
+import type { Story, StoryMeta } from "./story";
+
+export const meta: StoryMeta = { title: "Chrome/SurfaceScrollbar" };
+
+function TallSurface(): React.ReactNode {
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+
+  return (
+    <box style={{ width: 24, height: 8, flexDirection: "row", backgroundColor: DARK.background }}>
+      <scrollbox
+        ref={scrollRef}
+        style={{ flexGrow: 1 }}
+        focused={false}
+        verticalScrollbarOptions={{ visible: false }}
+      >
+        {Array.from({ length: 24 }, (_unused, index) => (
+          <text key={index} fg={DARK.textMuted}>{`row ${index + 1}`}</text>
+        ))}
+      </scrollbox>
+      <SurfaceScrollbar scrollbox={scrollRef} />
+    </box>
+  );
+}
+
+// The mirrored bar: content three times the viewport puts a thumb a third as tall at the top.
+export const ThumbAtTop: Story = {
+  render: () => <TallSurface />,
+  expectedColors: [DARK.textDim],
+  size: { width: 24, height: 8 },
+};

package/src/components/SurfaceScrollbar.test.tsx

@@ -0,0 +1,111 @@
+/**
+ * The mirrored scrollbar: thumb geometry follows the scroll state, and on a surface it
+ * draws as the panel's rightmost column, past the discussion dots - not inside the
+ * scrollbox's own viewport row.
+ */
+
+import { describe, expect, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import React from "react";
+import { DiffSheet } from "./DiffSheet";
+import { diffRows, marksByRows } from "../view-diff";
+import { allowEventLoopUpdates } from "../test-support";
+import { fixtureDiffSession } from "./story-fixtures";
+import { DARK } from "../theme";
+import { thumbGeometry } from "./SurfaceScrollbar";
+
+const noop = (): void => {};
+
+function hex(color: { toInts(): [number, number, number, number] }): string {
+  const [red, green, blue] = color.toInts();
+
+  return "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join("");
+}
+
+describe("thumbGeometry", () => {
+  test("nothing to scroll draws no thumb", () => {
+    // Arrange / Act / Assert - content fits the viewport
+    expect(thumbGeometry({ top: 0, height: 10, viewport: 14 }, 14)).toBeNull();
+  });
+
+  test("the thumb's height is the viewport's share of the content, at least one row", () => {
+    // Act
+    const tall = thumbGeometry({ top: 0, height: 44, viewport: 14 }, 14);
+    const tiny = thumbGeometry({ top: 0, height: 10_000, viewport: 14 }, 14);
+
+    // Assert
+    expect(tall).toEqual({ row: 0, height: 4 });
+    expect(tiny?.height).toBe(1);
+  });
+
+  test("the thumb reaches the track's end at the maximum scroll offset", () => {
+    // Act - scrolled to the bottom
+    const thumb = thumbGeometry({ top: 30, height: 44, viewport: 14 }, 14);
+
+    // Assert - its last row is the track's last row
+    expect(thumb).toEqual({ row: 10, height: 4 });
+  });
+});
+
+describe("the diff sheet's scrollbar", () => {
+  const body = Array.from({ length: 40 }, (_unused, index) => `+line ${index} of the change;`).join(
+    "\n",
+  );
+  const patch = `diff --git a/x.ts b/x.ts\n--- a/x.ts\n+++ b/x.ts\n@@ -0,0 +1,40 @@\n${body}\n`;
+
+  test("draws as the rightmost column, past the discussion dot", async () => {
+    // Arrange - a diff taller than the viewport, with one discussion so the dot rail has a dot
+    const rows = diffRows(patch);
+    const session = fixtureDiffSession({
+      annotations: [
+        {
+          id: "a1",
+          kind: "comment",
+          body: "hm",
+          anchor: { quote: "line 7 of the change;", prefix: "", suffix: "" },
+          createdAt: "2026-01-01T00:00:00Z",
+        },
+      ],
+    });
+    const width = 60;
+    const setup = await testRender(
+      <DiffSheet
+        rows={rows}
+        session={session}
+        marks={marksByRows(session.annotations, rows)}
+        quickActions={[]}
+        observer={false}
+        onAnnotate={noop}
+        onReply={noop}
+        onUpdateAnnotation={noop}
+        onExit={noop}
+      />,
+      { width, height: 14 },
+    );
+
+    allowEventLoopUpdates();
+    await setup.waitForVisualIdle();
+    const frame = setup.captureCharFrame().split("\n");
+    const thumbRows = setup.captureSpans().lines.filter((line) => {
+      let column = 0;
+
+      for (const span of line.spans) {
+        column += span.text.length;
+        if (column >= width) return span.bg !== undefined && hex(span.bg) === DARK.textDim;
+      }
+
+      return false;
+    }).length;
+
+    // Assert - the thumb occupies the last column at the top (scroll offset 0), and the dot sits
+    // to its left in the rail, so the order reads content, dots, scrollbar
+    expect(thumbRows).toBe(4);
+    const dotLine = frame.find((line) => line.includes("○"));
+
+    expect(dotLine).toBeDefined();
+    expect(dotLine!.indexOf("○")).toBeLessThan(width - 1);
+    // let the async highlight settle before the renderer goes away
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    setup.renderer.destroy();
+  });
+});

package/src/components/SurfaceScrollbar.tsx

@@ -0,0 +1,93 @@
+/**
+ * A one-cell vertical scrollbar that mirrors a scrollbox's scroll state, so the bar can sit
+ * where the layout wants it (the panel's rightmost column, past the discussion dots) instead
+ * of inside the scrollbox's own viewport row. Reads the scroll position each frame, draws the
+ * thumb, and a click or drag on the track scrolls the box.
+ */
+
+import React, { useRef, type RefObject } from "react";
+import type { BoxRenderable, ScrollBoxRenderable } from "@opentui/core";
+import type { Theme } from "../theme";
+import { useFrameMeasure } from "../use-frame-measure";
+import { useComponentTheme } from "./theme-context";
+
+interface ScrollState {
+  top: number;
+  height: number;
+  viewport: number;
+}
+
+/** The thumb's row and height for a viewport of `track` rows over the scroll state. */
+export interface ThumbGeometry {
+  row: number;
+  height: number;
+}
+
+/** Where the thumb sits: proportional to the scroll offset, never shorter than one row, or null when nothing scrolls. */
+export function thumbGeometry(state: ScrollState, track: number): ThumbGeometry | null {
+  if (track <= 0 || state.height <= state.viewport || state.viewport <= 0) return null;
+  const height = Math.max(1, Math.round((state.viewport / state.height) * track));
+  const maxTop = state.height - state.viewport;
+  const row = Math.round((state.top / maxTop) * (track - height));
+
+  return { row: Math.min(track - height, Math.max(0, row)), height };
+}
+
+export interface SurfaceScrollbarProps {
+  scrollbox: RefObject<ScrollBoxRenderable | null>;
+  theme?: Theme;
+}
+
+export function SurfaceScrollbar({ scrollbox, theme }: SurfaceScrollbarProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const trackRef = useRef<BoxRenderable | null>(null);
+  const state = useFrameMeasure<ScrollState>(
+    () => ({
+      top: scrollbox.current?.scrollTop ?? 0,
+      height: scrollbox.current?.scrollHeight ?? 0,
+      viewport: scrollbox.current?.viewport.height ?? 0,
+    }),
+    (left, right) =>
+      left.top === right.top && left.height === right.height && left.viewport === right.viewport,
+    { top: 0, height: 0, viewport: 0 },
+  );
+  const track = useFrameMeasure(
+    () => trackRef.current?.height ?? 0,
+    (left, right) => left === right,
+    0,
+  );
+  const thumb = thumbGeometry(state, track);
+
+  // a row on the track maps to the scroll offset that puts the thumb's top there
+  const scrollToTrackRow = (screenY: number): void => {
+    const box = scrollbox.current;
+
+    if (!box || !thumb) return;
+    const row = screenY - (trackRef.current?.y ?? 0) - Math.floor(thumb.height / 2);
+    const ratio = Math.min(1, Math.max(0, row / Math.max(1, track - thumb.height)));
+
+    box.scrollTo(Math.round(ratio * (state.height - state.viewport)));
+  };
+
+  return (
+    <box
+      ref={trackRef}
+      style={{ width: 1, flexShrink: 0, flexDirection: "column" }}
+      onMouseDown={(event) => scrollToTrackRow(event.y)}
+      onMouseDrag={(event) => scrollToTrackRow(event.y)}
+    >
+      {thumb ? (
+        <box
+          style={{
+            position: "absolute",
+            top: thumb.row,
+            left: 0,
+            width: 1,
+            height: thumb.height,
+            backgroundColor: tokens.textDim,
+          }}
+        />
+      ) : null}
+    </box>
+  );
+}

package/src/components/ThreadFooter.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ThreadFooter } from "./ThreadFooter";
+
+export const meta: StoryMeta = { title: "Chrome/ThreadFooter" };
+
+function Frame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ width: "100%", backgroundColor: DARK.panel }}>{children}</box>;
+}
+
+export const Default: Story = {
+  render: () => (
+    <Frame>
+      <ThreadFooter repo="cueloop" branch="main" onSubmit={() => {}} />
+    </Frame>
+  ),
+  expectedColors: [DARK.accent, DARK.textMuted],
+  size: { width: 80, height: 2 },
+};
+
+export const ReadOnly: Story = {
+  render: () => (
+    <Frame>
+      <ThreadFooter repo="cueloop" branch="design/tui" canSubmit={false} onSubmit={() => {}} />
+    </Frame>
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 80, height: 2 },
+};

package/src/components/ThreadFooter.test.tsx

@@ -0,0 +1,31 @@
+/** The thread footer keeps its repo/branch context on one line: a long branch truncates to fit rather
+ * than wrapping and pushing the send control onto a second row. */
+
+import { test, expect } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { ThreadFooter } from "./ThreadFooter";
+import { DARK } from "../theme";
+
+test("a long branch truncates on one line and keeps the send control in place", async () => {
+  const setup = await testRender(
+    <box style={{ width: 60, height: 3, backgroundColor: DARK.background }}>
+      <box style={{ flexGrow: 1 }} />
+      <ThreadFooter
+        repo="cueloop"
+        branch="design/tui-tree-and-edgy-really-long-name"
+        onSubmit={() => {}}
+        theme={DARK}
+      />
+    </box>,
+    { width: 60, height: 3 },
+  );
+  await setup.renderOnce();
+
+  const lines = setup.captureCharFrame().split("\n");
+  const footerRow = lines.find((line) => line.includes("cueloop"))!;
+  // the repo/branch context and the send control share the single footer row
+  expect(footerRow).toContain("send message");
+  // the branch is clipped, not wrapped: it never reaches its tail on a second row
+  expect(setup.captureCharFrame()).not.toContain("long-name");
+});

package/src/components/ThreadFooter.tsx

@@ -0,0 +1,54 @@
+// The thread's bottom band: a header-like bar shown only under the always-visible
+// thread column. It carries the repo/branch context on the left and a written,
+// clickable "Send message" control on the right.
+
+import React from "react";
+import { DARK, type Theme } from "../theme";
+import { NERD } from "./primitives/icons";
+
+export interface ThreadFooterProps {
+  repo: string;
+  branch: string;
+  onSubmit?: () => void;
+  /** When false the send control dims and does not fire (e.g. an observer). */
+  canSubmit?: boolean;
+  theme?: Theme;
+}
+
+export function ThreadFooter({
+  repo,
+  branch,
+  onSubmit,
+  canSubmit = true,
+  theme,
+}: ThreadFooterProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+
+  return (
+    <box
+      style={{
+        flexDirection: "row",
+        height: 2,
+        alignItems: "center",
+        paddingLeft: 1,
+        paddingRight: 1,
+        backgroundColor: tokens.panel,
+        borderStyle: "single",
+        border: ["top"],
+        borderColor: tokens.border,
+      }}
+    >
+      <box style={{ flexShrink: 1, minWidth: 0, marginRight: 2 }}>
+        <text truncate>
+          <span fg={tokens.blue}>{`${NERD.folderClosed} `}</span>
+          <span fg={tokens.textMuted}>{repo}</span>
+          <span fg={tokens.textDim}>{` / ${branch}`}</span>
+        </text>
+      </box>
+      <box style={{ flexGrow: 1 }} />
+      <box onMouseUp={canSubmit ? onSubmit : undefined} style={{ flexShrink: 0 }}>
+        <text fg={canSubmit ? tokens.accent : tokens.textDim}>send message</text>
+      </box>
+    </box>
+  );
+}

package/src/components/ThreadView.slash.test.tsx

@@ -0,0 +1,113 @@
+/** Inline skill completion in the composer (#25): the trailing "/word" token and its match. */
+
+import { describe, expect, test } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import type { QuickAction } from "../config";
+import { settle, typeText } from "../test-support";
+import { buildDisplay, marksByDisplay } from "../view-plan";
+import { fixturePlanSession } from "./story-fixtures";
+import { inlineSlashToken, resolveInlineSuggestion, ThreadView } from "./ThreadView";
+
+const SKILLS: QuickAction[] = [
+  { prompt: "typescript magician" },
+  { prompt: "implement" },
+  { prompt: "write discoverable code" },
+];
+
+const PLAN = "# Plan\n\nRefine the store before the rewrite lands.\n";
+
+async function mountComposer() {
+  const display = buildDisplay(PLAN, undefined);
+  const setup = await testRender(
+    <ThreadView
+      session={fixturePlanSession({
+        artifact: { type: "plan", content: PLAN, meta: { title: "Plan" } },
+      })}
+      display={display}
+      marks={marksByDisplay([], display)}
+      quickActions={SKILLS}
+      observer={false}
+      onAnnotate={() => {}}
+      onReply={() => {}}
+      onUpdateAnnotation={() => {}}
+      onExit={() => {}}
+    />,
+    { width: 72, height: 20 },
+  );
+
+  await settle(setup);
+  await settle(setup);
+
+  return setup;
+}
+
+describe("inlineSlashToken", () => {
+  test("finds the trailing slash token when text precedes it", () => {
+    expect(inlineSlashToken("please run /type")).toBe("/type");
+  });
+
+  test("ignores a draft that is itself a leading slash (that is the palette)", () => {
+    expect(inlineSlashToken("/type")).toBeNull();
+  });
+
+  test("is newline-safe: a token at the start of a later line still resolves", () => {
+    expect(inlineSlashToken("first line\n/impl")).toBe("/impl");
+  });
+
+  test("returns null when the trailing word is not a slash token", () => {
+    expect(inlineSlashToken("just some prose")).toBeNull();
+  });
+
+  test("a bare slash mid-sentence is a valid, empty-query token", () => {
+    expect(inlineSlashToken("run /")).toBe("/");
+  });
+});
+
+describe("resolveInlineSuggestion", () => {
+  test("offers the fuzzy closest skill for the trailing token", () => {
+    const inline = resolveInlineSuggestion(false, "run /type", SKILLS);
+
+    expect(inline?.token).toBe("/type");
+    expect(inline?.suggestion.name).toBe("typescript-magician");
+  });
+
+  test("prefers a prefix match over a subsequence match", () => {
+    const inline = resolveInlineSuggestion(false, "run /impl", SKILLS);
+
+    expect(inline?.suggestion.name).toBe("implement");
+  });
+
+  test("stays silent while the palette owns a leading slash", () => {
+    expect(resolveInlineSuggestion(true, "/type", SKILLS)).toBeNull();
+  });
+
+  test("returns null when nothing matches the token", () => {
+    expect(resolveInlineSuggestion(false, "run /zzzz", SKILLS)).toBeNull();
+  });
+});
+
+describe("inline completion in the composer", () => {
+  test("typing an inline slash shows the tab-hint, and tab completes to the full name", async () => {
+    // Arrange - open a composer and type text with a trailing slash token
+    const setup = await mountComposer();
+
+    await typeText(setup, "run /type");
+
+    // Assert - the hint offers the closest skill, marked with the tab glyph
+    const withHint = setup.captureCharFrame();
+
+    expect(withHint).toContain("⇥");
+    expect(withHint).toContain("/typescript-magician");
+
+    // Act - tab completes the token
+    setup.mockInput.pressKey("TAB");
+    await settle(setup);
+
+    // Assert - the hint is gone and the composer now carries the full skill name
+    const completed = setup.captureCharFrame();
+
+    expect(completed).not.toContain("⇥");
+    expect(completed).toContain("typescript-magician");
+  });
+});

package/src/components/ThreadView.stories.tsx

@@ -5,7 +5,7 @@ import type { Story, StoryMeta } from "./story";
 import { fixtureDisplay, fixtureMarks, fixturePlanSession } from "./story-fixtures";
 import { ThreadView } from "./ThreadView";
 
-export const meta: StoryMeta = { title: "ThreadView" };
+export const meta: StoryMeta = { title: "Surfaces/ThreadView" };
 
 export const InlineThreads: Story = {
   render: () => (