@cueloop/client 0.1.0-alpha.11 → 0.1.0-alpha.110

package/src/ui/components/CodeBlock.tsx

@@ -0,0 +1,82 @@
+/**
+ * Fenced code block: verbatim lines in a contained elevated box, highlighted
+ * by the native code renderable (tree-sitter). Unstyled text draws first, so
+ * the content never flashes empty while highlights resolve; unknown languages
+ * stay unstyled.
+ */
+
+import React from "react";
+import { createTextAttributes } from "@opentui/core";
+import { useRenderer } from "@opentui/react";
+import type { Theme } from "../../appearance/theme";
+import { useComponentTheme } from "../../appearance/components/theme-context";
+import { filetypeFor, syntaxStyleFor } from "./syntax-highlight";
+
+/** A cut code block reads as removed: struck through and grayed, never red. */
+const CUT_ATTRIBUTES = createTextAttributes({ strikethrough: true, dim: true });
+
+export interface CodeBlockProps {
+  id?: string;
+  language?: string;
+  content: string;
+  isCursor?: boolean;
+  marginTop?: number;
+  isAnnotated?: boolean;
+  changeTag?: "new" | "edited";
+  cut?: boolean;
+  theme?: Theme;
+}
+
+export function CodeBlock({
+  id,
+  language,
+  content,
+  isCursor = false,
+  marginTop = 0,
+  isAnnotated = false,
+  changeTag,
+  cut = false,
+  theme,
+}: CodeBlockProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const renderer = useRenderer();
+  const tagColor = changeTag === "new" ? tokens.green : tokens.accent;
+
+  return (
+    <box id={id} style={{ flexDirection: "column", marginTop }}>
+      <text>
+        <span fg={isCursor ? tokens.accent : tokens.textDim}>{isCursor ? "▎ " : "  "}</span>
+        <span fg={tokens.textDim}>{language ?? "code"}</span>
+        {isAnnotated ? <span fg={tokens.accent}> ◆</span> : null}
+        {changeTag ? <span fg={tagColor}> [{changeTag}]</span> : null}
+      </text>
+      <box
+        style={{
+          flexDirection: "column",
+          backgroundColor: tokens.elevated,
+          paddingLeft: 2,
+          paddingRight: 2,
+          paddingTop: 1,
+          paddingBottom: 1,
+          marginLeft: 2,
+        }}
+      >
+        {cut ? (
+          <text style={{ wrapMode: "none" }} selectable={false}>
+            <span fg={tokens.textDim} attributes={CUT_ATTRIBUTES}>
+              {content}
+            </span>
+          </text>
+        ) : (
+          <code
+            content={content}
+            filetype={filetypeFor(language)}
+            syntaxStyle={syntaxStyleFor(tokens, renderer.nativeScene)}
+            selectable={false}
+            style={{ wrapMode: "none", fg: tokens.textMuted, bg: tokens.elevated }}
+          />
+        )}
+      </box>
+    </box>
+  );
+}

package/src/ui/components/ConfirmCard.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import { DEFAULT_QUICK_ACTIONS } from "../../settings/config";
+import type { Story, StoryMeta } from "../../stories/story";
+import { ConfirmCard } from "./ConfirmCard";
+
+export const meta: StoryMeta = { title: "Cards/ConfirmCard" };
+
+const callbacks = {
+  onInput: () => {},
+  onSelectMessage: () => {},
+  onSubmit: () => {},
+  onCancel: () => {},
+  quickActions: DEFAULT_QUICK_ACTIONS,
+};
+
+export const ApproveDefault: Story = {
+  render: () => <ConfirmCard message="approved" summary="" {...callbacks} />,
+  expectedColors: [DARK.green, DARK.accent],
+  size: { width: 40, height: 14 },
+};
+
+export const RequestChanges: Story = {
+  render: () => (
+    <ConfirmCard message="changes_requested" summary="Tighten the steps." {...callbacks} />
+  ),
+  expectedColors: [DARK.red],
+  size: { width: 40, height: 14 },
+};
+
+export const WithViewedSummary: Story = {
+  render: () => (
+    <ConfirmCard message="approved" summary="" viewedSummary="2/3 files viewed" {...callbacks} />
+  ),
+  expectedColors: [DARK.green, DARK.textDim],
+  size: { width: 40, height: 14 },
+};

package/src/ui/components/ConfirmCard.tsx

@@ -0,0 +1,151 @@
+/**
+ * The Submit button expanded into a bordered confirm card at the rail bottom:
+ * the message selector (arrow keys or click), the optional summary, and plain
+ * word-buttons - key hints live in the status line only. The bordered height
+ * derives from the content rows through Card, so layout and render never drift.
+ */
+
+import React, { useContext } from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import { MESSAGE_OUTCOMES, type MessageOutcome } from "@cueloop/schema";
+import type { Theme } from "../../appearance/theme";
+import type { QuickAction } from "../../settings/config";
+import { SlashSkillsContext } from "../../keyboard/skills";
+import {
+  activeSlashToken,
+  mergeSlashItems,
+  slashFilter,
+  slashItemsFrom,
+} from "../../keyboard/slash-palette";
+import { useComponentTheme } from "../../appearance/components/theme-context";
+import { Card } from "./primitives/Card";
+import { composeRowCount } from "../../annotations/components/AnnotationCards";
+import { SlashComposer } from "../../keyboard/components/SlashComposer";
+import { DialogActions } from "./primitives/DialogActions";
+
+const SUBMIT_CARD_MAX_WIDTH = 52;
+const PALETTE_WINDOW = 5;
+
+/** Selector words in the confirm card - one word per message. */
+export const MESSAGE_OUTCOME_LABEL: Record<MessageOutcome, string> = {
+  comment: "comment",
+  approved: "approve",
+  changes_requested: "changes",
+};
+
+export interface ConfirmCardProps {
+  message: MessageOutcome;
+  summary: string;
+  viewedSummary?: string;
+  onInput: (summary: string) => void;
+  onSelectMessage: (message: MessageOutcome) => void;
+  onSubmit: () => void;
+  onCancel: () => void;
+  quickActions: QuickAction[];
+  theme?: Theme;
+}
+
+/** 1-row message selector, spacer, summary input, spacer, buttons. */
+const CONFIRM_CONTENT_ROWS = 5;
+
+export function outcomeColor(message: MessageOutcome, tokens: Theme): string {
+  return message === "approved"
+    ? tokens.green
+    : message === "changes_requested"
+      ? tokens.red
+      : tokens.blue;
+}
+
+/**
+ * The message selector: one row of pressable words in reading order.
+ * Selection stays controlled by the grammar (←/→ cycle the message); a click
+ * selects directly. Every message keeps its brackets so active color never changes the row's
+ * width or moves a neighboring choice.
+ */
+function MessageSelector({
+  message,
+  onSelectMessage,
+  theme,
+}: {
+  message: MessageOutcome;
+  onSelectMessage: (message: MessageOutcome) => void;
+  theme?: Theme;
+}): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <box style={{ flexDirection: "row", height: 1, width: "100%", justifyContent: "center" }}>
+      {MESSAGE_OUTCOMES.map((candidate) => (
+        <box
+          key={candidate}
+          style={{ paddingRight: 1 }}
+          onMouseUp={() => onSelectMessage(candidate)}
+        >
+          <text fg={candidate === message ? outcomeColor(candidate, tokens) : tokens.textDim}>
+            {`[${MESSAGE_OUTCOME_LABEL[candidate]}]`}
+          </text>
+        </box>
+      ))}
+    </box>
+  );
+}
+
+export function ConfirmCard({
+  message,
+  summary,
+  viewedSummary,
+  onInput,
+  onSelectMessage,
+  onSubmit,
+  onCancel,
+  quickActions,
+  theme,
+}: ConfirmCardProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const skills = useContext(SlashSkillsContext);
+  const { width: terminalWidth } = useTerminalDimensions();
+  const cardWidth = Math.max(24, Math.min(terminalWidth - 2, SUBMIT_CARD_MAX_WIDTH));
+
+  const composerRows = composeRowCount(summary, cardWidth - 4);
+  const token = activeSlashToken(summary, summary.length);
+  const paletteItems =
+    token !== null
+      ? slashFilter(mergeSlashItems(slashItemsFrom(quickActions), skills), token.slice(1))
+      : [];
+  const paletteRows =
+    paletteItems.length > 0
+      ? Math.min(PALETTE_WINDOW, paletteItems.length) +
+        (paletteItems.length > PALETTE_WINDOW ? 1 : 0)
+      : 0;
+  const contentRows =
+    CONFIRM_CONTENT_ROWS - 1 + composerRows + paletteRows + (viewedSummary !== undefined ? 2 : 0);
+
+  return (
+    <Card
+      contentRows={contentRows}
+      width={cardWidth}
+      borderColor={tokens.accent}
+      backgroundColor={tokens.elevated}
+      theme={theme}
+    >
+      {viewedSummary !== undefined ? <text fg={tokens.textDim}>{viewedSummary}</text> : null}
+      {viewedSummary !== undefined ? <box style={{ height: 1 }} /> : null}
+      <MessageSelector message={message} onSelectMessage={onSelectMessage} theme={theme} />
+      <box style={{ height: 1 }} />
+      <SlashComposer
+        seed={summary}
+        glyph=""
+        quickActions={quickActions}
+        tokens={tokens}
+        placeholder="summary for the agent (optional)"
+        onSubmit={(text) => {
+          onInput(text);
+          onSubmit();
+        }}
+        onInput={onInput}
+      />
+      <box style={{ height: 1 }} />
+      <DialogActions confirmLabel="send" onConfirm={onSubmit} onCancel={onCancel} theme={theme} />
+    </Card>
+  );
+}

package/src/ui/components/ConfirmDialog.stories.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { ConfirmDialog } from "./ConfirmDialog";
+
+export const meta: StoryMeta = { title: "Overlays/ConfirmDialog" };
+
+const callbacks = { onConfirm: () => {}, onCancel: () => {} };
+
+export const DeleteThread: Story = {
+  render: () => (
+    <ConfirmDialog
+      isOpen
+      title=" delete thread "
+      message={'Delete "Auth rollout"? This removes the thread.'}
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 64, height: 16 },
+};

package/src/ui/components/ConfirmDialog.tsx

@@ -0,0 +1,72 @@
+/**
+ * A centered yes/no confirmation on the shared Dialog overlay. Presentational:
+ * the key grammar (⏎ confirm, esc cancel) is driven by the reducer; the buttons
+ * carry the same intents for the mouse. Used for destructive actions like the
+ * inbox delete.
+ */
+
+import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { Theme } from "../../appearance/theme";
+import { useComponentTheme } from "../../appearance/components/theme-context";
+import { Dialog } from "./primitives/Dialog";
+import { DialogActions } from "./primitives/DialogActions";
+
+export interface ConfirmDialogProps {
+  isOpen: boolean;
+  title?: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  theme?: Theme;
+}
+
+export function ConfirmDialog({
+  isOpen,
+  title,
+  message,
+  confirmLabel = "delete",
+  cancelLabel = "cancel",
+  onConfirm,
+  onCancel,
+  theme,
+}: ConfirmDialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth } = useTerminalDimensions();
+
+  if (!isOpen) return null;
+
+  return (
+    <Dialog
+      isOpen
+      title={title}
+      width={Math.min(54, terminalWidth - 6)}
+      height={7}
+      background={tokens.elevated}
+      onDismiss={onCancel}
+      theme={theme}
+    >
+      <box
+        style={{
+          flexDirection: "column",
+          flexGrow: 1,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+        }}
+      >
+        <text fg={tokens.text}>{message}</text>
+        <box style={{ flexGrow: 1 }} />
+        <DialogActions
+          confirmLabel={confirmLabel}
+          cancelLabel={cancelLabel}
+          onConfirm={onConfirm}
+          onCancel={onCancel}
+          theme={theme}
+        />
+      </box>
+    </Dialog>
+  );
+}

package/src/ui/components/OverlayScrollbar.stories.tsx

@@ -0,0 +1,33 @@
+import React, { useRef } from "react";
+import type { ScrollBoxRenderable } from "@opentui/core";
+import { DARK } from "../../appearance/theme";
+import { OverlayScrollbar } from "./OverlayScrollbar";
+import type { Story, StoryMeta } from "../../stories/story";
+
+export const meta: StoryMeta = { title: "Chrome/OverlayScrollbar" };
+
+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>
+      <OverlayScrollbar scrollbox={scrollRef} />
+    </box>
+  );
+}
+
+// At rest the overlay bar is hidden; the thumb only appears while the surface is scrolling.
+export const AtRest: Story = {
+  render: () => <TallSurface />,
+  size: { width: 24, height: 8 },
+};

package/src/ui/components/OverlayScrollbar.test.tsx

@@ -0,0 +1,142 @@
+/**
+ * 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 { ScrollBoxRenderable, type Renderable } from "@opentui/core";
+import React from "react";
+import { DiffContentView } from "../../diff/components/DiffContentView";
+import { diffRows, marksByRows } from "../../diff/view-diff";
+import { allowEventLoopUpdates } from "../../testing/test-support";
+import { fixtureDiffSession } from "../../stories/story-fixtures";
+import { DARK } from "../../appearance/theme";
+import { thumbGeometry } from "./OverlayScrollbar";
+
+const noop = (): void => {};
+
+function findById(node: Renderable, id: string): Renderable | undefined {
+  if (node.id === id) return node;
+
+  for (const child of node.getChildren()) {
+    const found = findById(child, id);
+
+    if (found) return found;
+  }
+
+  return undefined;
+}
+
+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(
+      <DiffContentView
+        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();
+    // the overlay bar hides at rest; a scroll reveals the thumb
+    const scroller = findById(setup.renderer.root, "diff-scroll");
+
+    if (!(scroller instanceof ScrollBoxRenderable))
+      throw new Error("diff-scroll is not a scrollbox");
+
+    const countThumbRows = (): number =>
+      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;
+
+    // the overlay bar reveals on a scroll and hides after an idle delay; alternate the offset to
+    // re-trigger the reveal until the thumb is captured, so a slow CI settle never races the hide
+    let thumbRows = 0;
+
+    for (let attempt = 0; attempt < 20 && thumbRows === 0; attempt++) {
+      scroller.scrollTo(attempt % 2 === 0 ? 4 : 5);
+      await setup.waitForVisualIdle();
+      thumbRows = countThumbRows();
+    }
+    const frame = setup.captureCharFrame().split("\n");
+
+    // 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/ui/components/OverlayScrollbar.tsx

@@ -0,0 +1,134 @@
+/**
+ * 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. It is an overlay: the thumb appears while the
+ * surface is scrolling and hides once scrolling has been idle, so a resting surface shows none.
+ */
+
+import React, { useEffect, useRef, useState, type RefObject } from "react";
+import type { BoxRenderable, ScrollBoxRenderable } from "@opentui/core";
+import type { Theme } from "../../appearance/theme";
+import { useFrameMeasure } from "../use-frame-measure";
+import { useComponentTheme } from "../../appearance/components/theme-context";
+
+const HIDE_DELAY_MS = 1500;
+
+interface ScrollState {
+  top: number;
+  height: number;
+  viewport: number;
+}
+
+export interface ThumbGeometry {
+  row: number;
+  height: number;
+}
+
+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 OverlayScrollbarProps {
+  scrollbox: RefObject<ScrollBoxRenderable | null>;
+  theme?: Theme;
+}
+
+export function OverlayScrollbar({ scrollbox, theme }: OverlayScrollbarProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const trackRef = useRef<BoxRenderable | null>(null);
+  const [visible, setVisible] = useState(false);
+  const draggingRef = useRef(false);
+  const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const prevTopRef = useRef<number | 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 reveal = (): void => {
+    setVisible(true);
+
+    if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+
+    hideTimerRef.current = setTimeout(() => {
+      if (!draggingRef.current) setVisible(false);
+    }, HIDE_DELAY_MS);
+  };
+
+  // reveal on real scroll movement, never on first mount, then hide once idle
+  useEffect(() => {
+    if (prevTopRef.current !== null && state.top !== prevTopRef.current) reveal();
+
+    prevTopRef.current = state.top;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.top]);
+
+  useEffect(
+    () => () => {
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+    },
+    [],
+  );
+
+  const geometry = thumbGeometry(state, track);
+  const thumb = visible ? geometry : null;
+
+  const scrollToTrackRow = (screenY: number): void => {
+    const box = scrollbox.current;
+
+    if (!box || !geometry) return;
+
+    const row = screenY - (trackRef.current?.y ?? 0) - Math.floor(geometry.height / 2);
+    const ratio = Math.min(1, Math.max(0, row / Math.max(1, track - geometry.height)));
+
+    box.scrollTo(Math.round(ratio * (state.height - state.viewport)));
+    reveal();
+  };
+
+  return (
+    <box
+      ref={trackRef}
+      style={{ width: 1, flexShrink: 0, flexDirection: "column" }}
+      onMouseDown={(event) => {
+        draggingRef.current = true;
+        scrollToTrackRow(event.y);
+      }}
+      onMouseDrag={(event) => scrollToTrackRow(event.y)}
+      onMouseUp={() => {
+        draggingRef.current = false;
+        reveal();
+      }}
+    >
+      {thumb ? (
+        <box
+          style={{
+            position: "absolute",
+            top: thumb.row,
+            left: 0,
+            width: 1,
+            height: thumb.height,
+            backgroundColor: tokens.textDim,
+          }}
+        />
+      ) : null}
+    </box>
+  );
+}