@cueloop/client 0.1.0-alpha.66 → 0.1.0-alpha.68

package/src/components/DiscussionMarkerRail.stories.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import type { Annotation } from "@cueloop/schema";
+import { DARK } from "../theme";
+import type { Discussion } from "../discussions";
+import type { TextSpan } from "../thread-selection";
+import { RootOverlayProvider } from "./RootOverlay";
+import { DiscussionMarkerRail } from "./DiscussionMarkerRail";
+import type { Story, StoryMeta } from "./story";
+
+export const meta: StoryMeta = { title: "Chrome/DiscussionMarkerRail" };
+
+function comment(id: string, body: string): Annotation {
+  return {
+    id,
+    kind: "comment",
+    anchor: { quote: body, prefix: "", suffix: "" },
+    body,
+    createdAt: "2026-09-08T00:00:00.000Z",
+  };
+}
+
+function discussion(row: number, body: string): Discussion {
+  const span: TextSpan = { start: { blockIndex: row, char: 0 }, end: { blockIndex: row, char: 4 } };
+
+  return {
+    key: `${row}`,
+    rootId: `a${row}`,
+    blockIndex: row,
+    span,
+    annotations: [comment(`a${row}`, body)],
+  };
+}
+
+const discussions = [
+  discussion(2, "Map needs an eviction story."),
+  discussion(5, "why a Map here?"),
+  discussion(9, "name this constant"),
+];
+
+// The centered dot column: one dot per discussion, drawn on a surface's right edge.
+export const Dots: Story = {
+  render: () => (
+    <RootOverlayProvider>
+      <box
+        style={{ width: 24, height: 10, flexDirection: "row", backgroundColor: DARK.background }}
+      >
+        <box style={{ flexGrow: 1 }} />
+        <DiscussionMarkerRail discussions={discussions} spanQuote={() => "x"} onJump={() => {}} />
+      </box>
+    </RootOverlayProvider>
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 24, height: 10 },
+};

package/src/components/DiscussionMarkerRail.tsx

@@ -0,0 +1,181 @@
+/**
+ * The right-edge discussion navigator: a vertically-centered column of dots, one
+ * per discussion, that highlights on hover, shows a floating preview, and jumps
+ * on click. The plan thread view and each diff editor group render one on their
+ * right edge, so comment navigation reads the same on prose and on code. The
+ * preview draws at the app root (OpenTUI has no z-index) so no pane border slices it.
+ */
+
+import React, { useEffect, useRef, useState, type RefObject } from "react";
+import type { BoxRenderable, ScrollBoxRenderable } from "@opentui/core";
+import type { Theme } from "../theme";
+import type { TextSpan } from "../thread-selection";
+import type { Discussion } from "../discussions";
+import { useFrameMeasure } from "../use-frame-measure";
+import { useComponentTheme } from "./theme-context";
+import { useRootOverlay } from "./RootOverlay";
+import { SurfaceScrollbar } from "./SurfaceScrollbar";
+
+interface HoveredMarker {
+  key: string;
+  screenY: number;
+  anchorX: number;
+}
+
+function ScrollMarkers({
+  discussions,
+  hovered,
+  tokens,
+  onHover,
+  onJump,
+}: {
+  discussions: Discussion[];
+  hovered: string | null;
+  tokens: Theme;
+  onHover: (marker: HoveredMarker | null) => void;
+  onJump: (key: string) => void;
+}): React.ReactNode {
+  const railRef = useRef<BoxRenderable | null>(null);
+  const height = useFrameMeasure(
+    () => railRef.current?.height ?? 0,
+    (left, right) => left === right,
+    0,
+  );
+
+  const firstRow = Math.max(0, Math.floor((height - discussions.length) / 2));
+  const rowFor = (index: number): number => firstRow + index;
+  const indexAt = (row: number): number | null => {
+    const index = row - firstRow;
+
+    return index >= 0 && index < discussions.length ? index : null;
+  };
+  const hoveredIndex = discussions.findIndex((discussion) => discussion.key === hovered);
+  const colorFor = (index: number): string => {
+    if (index === hoveredIndex) return tokens.text;
+    if (hoveredIndex >= 0 && discussions.length >= 5 && Math.abs(index - hoveredIndex) === 1) {
+      return tokens.textMuted;
+    }
+
+    return tokens.textDim;
+  };
+
+  return (
+    <box
+      ref={railRef}
+      style={{ width: 3, flexShrink: 0, flexDirection: "column" }}
+      onMouseMove={(event) => {
+        const railY = railRef.current?.y ?? 0;
+        const index = indexAt(event.y - railY);
+
+        onHover(
+          index === null
+            ? null
+            : {
+                key: discussions[index]!.key,
+                // screen coordinates so the preview can render at the app root, above every pane rule
+                screenY: railY + rowFor(index),
+                anchorX: railRef.current?.x ?? 0,
+              },
+        );
+      }}
+      onMouseOut={() => onHover(null)}
+      onMouseDown={(event) => {
+        const index = indexAt(event.y - (railRef.current?.y ?? 0));
+
+        if (index !== null) onJump(discussions[index]!.key);
+      }}
+    >
+      {discussions.map((discussion, index) => (
+        <text
+          key={discussion.key}
+          selectable={false}
+          style={{ position: "absolute", top: rowFor(index), left: 0 }}
+          fg={colorFor(index)}
+        >
+          {(index === hoveredIndex ? "●" : "○").padStart(2)}
+        </text>
+      ))}
+    </box>
+  );
+}
+
+export interface DiscussionMarkerRailProps {
+  discussions: Discussion[];
+  /** The text a discussion's span covers, for the hover preview. */
+  spanQuote: (span: TextSpan) => string;
+  onJump: (key: string) => void;
+  /** The surface's scrollbox; when given, its scrollbar draws past the dots as the panel's rightmost column. */
+  scrollbox?: RefObject<ScrollBoxRenderable | null>;
+  theme?: Theme;
+}
+
+export function DiscussionMarkerRail({
+  discussions,
+  spanQuote,
+  onJump,
+  scrollbox,
+  theme,
+}: DiscussionMarkerRailProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const [hovered, setHovered] = useState<HoveredMarker | null>(null);
+  const { setOverlay, clearOverlay } = useRootOverlay();
+
+  const preview = (): React.ReactNode => {
+    if (hovered === null) return null;
+    const discussion = discussions.find((candidate) => candidate.key === hovered.key);
+
+    if (!discussion) return null;
+    const quote = spanQuote(discussion.span);
+    const lastComment = discussion.annotations.at(-1)!;
+
+    return (
+      <box
+        style={{
+          position: "absolute",
+          top: Math.max(0, hovered.screenY - 1),
+          left: Math.max(0, hovered.anchorX - 48),
+          width: 48,
+          flexDirection: "column",
+          border: true,
+          borderStyle: "single",
+          borderColor: tokens.border,
+          backgroundColor: tokens.elevated,
+          paddingLeft: 1,
+          paddingRight: 1,
+        }}
+      >
+        <text fg={tokens.textDim}>{`"${quote.slice(0, 42)}"`}</text>
+        <text fg={tokens.text}>
+          {`${lastComment.author === undefined ? "●" : "○"} ${lastComment.body}`.slice(0, 44)}
+        </text>
+        <text fg={tokens.textDim}>
+          {`${discussion.annotations.length} comment${
+            discussion.annotations.length === 1 ? "" : "s"
+          } · click to jump`}
+        </text>
+      </box>
+    );
+  };
+
+  // render the preview at the app root (above every pane rule); OpenTUI has no z-index, so an
+  // absolute box inside this pane would be sliced by the next pane's border
+  useEffect(() => {
+    setOverlay(preview());
+
+    return () => clearOverlay();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hovered, discussions, tokens]);
+
+  return (
+    <>
+      <ScrollMarkers
+        discussions={discussions}
+        hovered={hovered?.key ?? null}
+        tokens={tokens}
+        onHover={setHovered}
+        onJump={onJump}
+      />
+      {scrollbox ? <SurfaceScrollbar scrollbox={scrollbox} theme={theme} /> : null}
+    </>
+  );
+}

package/src/components/EditorGrid.stories.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { EditorGrid } from "./EditorGrid";
+import { changesTab, fileTab, makeGroup, splitGroup, type EditorTab } from "./editor-grid";
+
+export const meta: StoryMeta = { title: "Surfaces/EditorGrid" };
+
+const noop = (): void => {};
+
+function renderTab(tab: EditorTab): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.textMuted}>{tab.kind === "changes" ? "the whole diff" : tab.path}</text>
+    </box>
+  );
+}
+
+const oneGroup = makeGroup([changesTab(), fileTab("App.tsx", "src/App.tsx", "diff")]);
+const sourceGroup = makeGroup([fileTab("plugin.json", ".claude-plugin/plugin.json", "contents")]);
+const splitTree = splitGroup(sourceGroup, sourceGroup.id, "right").tree;
+
+export const OneGroup: Story = {
+  render: () => (
+    <EditorGrid
+      tree={oneGroup}
+      focusedGroupId={oneGroup.id}
+      onFocusGroup={noop}
+      onActivateTab={noop}
+      onCloseTab={noop}
+      onSplit={noop}
+      onZoom={noop}
+      zoomed={false}
+      renderTab={renderTab}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.textMuted, DARK.border],
+  size: { width: 80, height: 16 },
+};
+
+export const SplitGroups: Story = {
+  render: () => (
+    <EditorGrid
+      tree={splitTree}
+      focusedGroupId={null}
+      onFocusGroup={noop}
+      onActivateTab={noop}
+      onCloseTab={noop}
+      onSplit={noop}
+      onZoom={noop}
+      zoomed={false}
+      renderTab={renderTab}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.textMuted, DARK.border],
+  size: { width: 100, height: 16 },
+};

package/src/components/EditorGrid.tabs.test.tsx

@@ -0,0 +1,105 @@
+/**
+ * Regression: file tabs keep the width of their name and the strip scrolls horizontally
+ * behind the header controls when the row overflows, revealing the active tab - instead of
+ * squeezing every tab and truncating its label.
+ */
+
+import { describe, expect, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import React from "react";
+import { EditorGrid, visibleTabWindow } from "./EditorGrid";
+import { changesTab, fileTab, makeGroup, type EditorTab } from "./editor-grid";
+import { NERD } from "./primitives/icons";
+import { allowEventLoopUpdates } from "../test-support";
+
+describe("visibleTabWindow", () => {
+  const tabs: EditorTab[] = ["aaaa", "bbbb", "cccc", "dddd", "eeee"].map((name) =>
+    fileTab(name, name, "diff"),
+  );
+
+  test("an unmeasured strip shows every tab", () => {
+    // Arrange / Act / Assert - width 0 means the header clips until it is measured
+    expect(visibleTabWindow(tabs, 0, 0, 0)).toEqual({ first: 0, end: tabs.length });
+  });
+
+  test("only the run that fits renders, and the active tab pulls the window to it", () => {
+    // Arrange - each tab is 9 cells (4 label + 5 chrome); a 30-cell strip fits about three
+    // Act - the last tab is active
+    const window = visibleTabWindow(tabs, 0, tabs.length - 1, 30);
+
+    // Assert - the window ends on the active tab and dropped earlier tabs
+    expect(window.end).toBe(tabs.length);
+    expect(window.first).toBeGreaterThan(0);
+  });
+
+  test("a tab wider than the strip still shows on its own", () => {
+    // Arrange
+    const wide = [fileTab("a-very-long-file-name.tsx", "x", "diff")];
+
+    // Act / Assert
+    expect(visibleTabWindow(wide, 0, 0, 10)).toEqual({ first: 0, end: 1 });
+  });
+});
+
+const NAMES = [
+  "AppShell.tsx",
+  "DiffSheet.tsx",
+  "IconButton.tsx",
+  "EditorGrid.zoom.test.tsx",
+  "ThreadView.tsx",
+];
+
+async function headerRow(activeIndex: number): Promise<string> {
+  const group = makeGroup([
+    changesTab(),
+    ...NAMES.map((name) => fileTab(name, `src/${name}`, "diff")),
+  ]);
+  const tree = { ...group, activeTabId: group.tabs[activeIndex]!.id };
+  const setup = await testRender(
+    <EditorGrid
+      tree={tree}
+      focusedGroupId={tree.id}
+      onFocusGroup={() => {}}
+      onActivateTab={() => {}}
+      onCloseTab={() => {}}
+      onSplit={() => {}}
+      onZoom={() => {}}
+      zoomed={false}
+      renderTab={() => <text>body</text>}
+    />,
+    { width: 70, height: 4 },
+  );
+
+  allowEventLoopUpdates();
+  await setup.waitForVisualIdle();
+  // the strip reveals the active tab on the frame after layout
+  await setup.waitForVisualIdle();
+  const row = setup.captureCharFrame().split("\n")[0]!;
+
+  setup.renderer.destroy();
+
+  return row;
+}
+
+describe("editor tab strip", () => {
+  test("tabs keep their full names and the controls stay pinned when the row overflows", async () => {
+    // Act
+    const row = await headerRow(0);
+
+    // Assert - no squeezed labels: every visible tab reads in full up to the clip edge
+    expect(row).toContain("Changes ");
+    expect(row).toContain("AppShell.tsx ");
+    expect(row).toContain("DiffSheet.tsx ");
+    // and the header controls sit at the right edge, past the clipped strip
+    expect(row.trimEnd().endsWith(`search  ${NERD.zoom}`)).toBe(true);
+  });
+
+  test("the strip scrolls to reveal the active tab", async () => {
+    // Act
+    const row = await headerRow(NAMES.length);
+
+    // Assert - the last tab is on screen, the first has scrolled out behind the left edge
+    expect(row).toContain("ThreadView.tsx ");
+    expect(row).not.toContain("Changes ");
+  });
+});