@cueloop/client 0.1.0-alpha.0 → 0.1.0-alpha.100

package/src/ui/components/syntax-highlight.ts

@@ -0,0 +1,133 @@
+/**
+ * Code highlighting tokens: the theme's named colors projected onto tree-sitter
+ * capture names. One group -> color map is the single source of truth, feeding
+ * both the native code renderable (via a cached SyntaxStyle per theme) and the
+ * diff sheet's per-row spans. Unknown languages simply render unstyled -
+ * highlighting is an enhancement, never a blocker.
+ */
+
+import {
+  SyntaxStyle,
+  infoStringToFiletype,
+  extensionToFiletype,
+  basenameToFiletype,
+} from "@opentui/core";
+import type { Theme } from "../../appearance/theme";
+
+/** Markdown fence info -> tree-sitter filetype, with the aliases we accept. */
+export function filetypeFor(language?: string): string | undefined {
+  const info = (language ?? "").toLowerCase();
+
+  if (!info) return undefined;
+  const aliases: SyntaxAliases = {
+    ts: "typescript",
+    js: "javascript",
+    py: "python",
+    rb: "ruby",
+    rs: "rust",
+    sh: "bash",
+    shell: "bash",
+    zsh: "bash",
+    yml: "yaml",
+  };
+
+  return infoStringToFiletype(aliases[info] ?? info) ?? aliases[info] ?? info;
+}
+
+/** A diff/code file path -> tree-sitter filetype, by basename then extension. */
+export function filetypeForPath(path: string): string | undefined {
+  const basename = path.split("/").pop() ?? path;
+  const byBasename = basenameToFiletype.get(basename);
+
+  if (byBasename) return byBasename;
+  const dotIndex = basename.lastIndexOf(".");
+
+  if (dotIndex <= 0) return undefined;
+
+  return extensionToFiletype.get(basename.slice(dotIndex + 1).toLowerCase());
+}
+
+interface SyntaxAliases {
+  [alias: string]: string;
+}
+
+interface SyntaxGroupStyle {
+  fg: string;
+  italic?: boolean;
+}
+
+interface SyntaxGroupStyles {
+  [group: string]: SyntaxGroupStyle;
+}
+
+/** The one group -> style map, keyed by tree-sitter capture name. */
+function syntaxGroupStyles(theme: Theme): SyntaxGroupStyles {
+  return {
+    default: { fg: theme.textMuted },
+    comment: { fg: theme.textDim, italic: true },
+    string: { fg: theme.green },
+    number: { fg: theme.blue },
+    constant: { fg: theme.blue },
+    boolean: { fg: theme.blue },
+    keyword: { fg: theme.accent },
+    operator: { fg: theme.textDim },
+    punctuation: { fg: theme.textDim },
+    function: { fg: theme.text },
+    method: { fg: theme.text },
+    type: { fg: theme.blue },
+    constructor: { fg: theme.blue },
+    variable: { fg: theme.textMuted },
+    property: { fg: theme.textMuted },
+    parameter: { fg: theme.textMuted },
+    tag: { fg: theme.accent },
+    attribute: { fg: theme.blue },
+  };
+}
+
+const syntaxStyleCache = new WeakMap<Theme, SyntaxStyle>();
+
+export function syntaxStyleFor(theme: Theme): SyntaxStyle {
+  const cached = syntaxStyleCache.get(theme);
+
+  if (cached) return cached;
+  const style = SyntaxStyle.fromStyles(syntaxGroupStyles(theme));
+
+  syntaxStyleCache.set(theme, style);
+
+  return style;
+}
+
+/** A one-group syntax style plus the styleId that paints a "/skill" reference in the accent color. */
+export interface ReferenceStyle {
+  style: SyntaxStyle;
+  styleId: number;
+}
+
+const referenceStyleCache = new WeakMap<Theme, ReferenceStyle>();
+
+export function referenceStyleFor(theme: Theme): ReferenceStyle {
+  const cached = referenceStyleCache.get(theme);
+
+  if (cached) return cached;
+  const entry: ReferenceStyle = {
+    style: SyntaxStyle.fromStyles({ reference: { fg: theme.accent } }),
+    styleId: 0,
+  };
+
+  entry.styleId = entry.style.getStyleId("reference") ?? 0;
+  referenceStyleCache.set(theme, entry);
+
+  return entry;
+}
+
+/** The foreground for a tree-sitter capture group; undefined when unstyled. */
+export function colorForSyntaxGroup(group: string, theme: Theme): string | undefined {
+  const styles = syntaxGroupStyles(theme);
+  const direct = styles[group];
+
+  if (direct) return direct.fg;
+  // capture names are dotted (e.g. "keyword.control"); match the broadest prefix
+  const base = group.split(".")[0]!;
+
+  return styles[base]?.fg;
+}

package/src/ui/components/truncate-text.ts

@@ -0,0 +1,7 @@
+/** Truncate text to one line of at most maxLength characters, ellipsis-terminated. */
+
+export function truncateToSingleLine(value: string, maxLength: number): string {
+  const oneLine = value.replace(/\n/g, " ");
+
+  return oneLine.length > maxLength ? oneLine.slice(0, maxLength - 1) + "…" : oneLine;
+}

package/src/ui/components/truncate-title.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from "bun:test";
+import { truncateTitle } from "./truncate-title";
+
+describe("truncateTitle", () => {
+  test("a title that fits is returned unchanged", () => {
+    expect(truncateTitle("short", 20)).toBe("short");
+  });
+
+  test("a long title is clipped to the width with a trailing ellipsis", () => {
+    const clipped = truncateTitle("Review the accent change in the theme", 20);
+
+    expect(clipped).toHaveLength(20);
+    expect(clipped.endsWith("…")).toBe(true);
+    expect(clipped).toBe("Review the accent c…");
+  });
+
+  test("newlines collapse to spaces so the row never wraps", () => {
+    expect(truncateTitle("line one\nline two", 40)).toBe("line one line two");
+  });
+
+  test("a zero width yields an empty string", () => {
+    expect(truncateTitle("anything", 0)).toBe("");
+  });
+
+  test("clips by code point, never splitting an astral character into a replacement glyph", () => {
+    const clipped = truncateTitle("🚀🚀🚀🚀🚀", 3);
+
+    expect(clipped).toBe("🚀🚀…");
+    expect(clipped).not.toContain("�");
+  });
+});

package/src/ui/components/truncate-title.ts

@@ -0,0 +1,15 @@
+/**
+ * Fits a thread title on one line: unchanged when it fits, otherwise clipped to
+ * an ellipsis. Slices by code point, not UTF-16 unit, so an emoji or other
+ * astral character is never split into a replacement glyph.
+ */
+export function truncateTitle(title: string, maxWidth: number): string {
+  const oneLine = title.replace(/\n/g, " ");
+
+  if (maxWidth <= 0) return "";
+  const characters = [...oneLine];
+
+  if (characters.length <= maxWidth) return oneLine;
+
+  return `${characters.slice(0, Math.max(0, maxWidth - 1)).join("")}…`;
+}

package/src/ui/use-frame-measure.ts

@@ -0,0 +1,74 @@
+/**
+ * Read a layout-dependent value after every rendered frame (and resize),
+ * committing only on change. Layout lands after the commit, so a timer
+ * would race the visual-idle wait; measuring on the frame event converges
+ * deterministically within a frame or two.
+ */
+
+import { useEffect, useState } from "react";
+import { useRenderer } from "@opentui/react";
+
+type Renderer = NonNullable<ReturnType<typeof useRenderer>>;
+type Measure = () => void;
+
+interface FrameSubscriptions {
+  measures: Set<Measure>;
+  notify: Measure;
+}
+
+const subscribers = new WeakMap<Renderer, FrameSubscriptions>();
+
+export function subscribeToFrames(renderer: Renderer, measure: Measure): () => void {
+  let subscription = subscribers.get(renderer);
+
+  if (!subscription) {
+    const measures = new Set<Measure>();
+    const notify = (): void => {
+      for (const subscriber of measures) subscriber();
+    };
+
+    subscription = { measures, notify };
+    subscribers.set(renderer, subscription);
+    renderer.on("frame", notify);
+    renderer.on("resize", notify);
+  }
+
+  const { measures, notify } = subscription;
+
+  measures.add(measure);
+
+  return () => {
+    measures.delete(measure);
+    if (measures.size > 0) return;
+
+    renderer.off("frame", notify);
+    renderer.off("resize", notify);
+    subscribers.delete(renderer);
+  };
+}
+
+export function useFrameMeasure<T>(
+  read: () => T,
+  isEqual: (left: T, right: T) => boolean,
+  initial: T,
+  active = true,
+): T {
+  const renderer = useRenderer();
+  const [value, setValue] = useState(initial);
+
+  useEffect(() => {
+    // a measurement only needed while a popover is open subscribes no per-frame listener when closed
+    if (!active) return;
+    const measure = (): void => {
+      const next = read();
+
+      setValue((current) => (isEqual(current, next) ? current : next));
+    };
+
+    measure();
+    if (renderer) return subscribeToFrames(renderer, measure);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [renderer, active]);
+
+  return value;
+}

package/src/ui/use-terminal-virtualizer.ts

@@ -0,0 +1,259 @@
+/**
+ * Row virtualization for an OpenTUI scrollbox, driven by @tanstack/virtual-core.
+ * The core is DOM-free at heart: it only reaches the scroll container through the
+ * observe/scroll callbacks given here, so a terminal scrollbox stands in for the
+ * element - offsets and sizes are terminal rows, the "scroll event" is the
+ * renderer's frame event, and a mounted row's height is read off its renderable.
+ * Callers render `items` with a spacer of `items[0].start` rows above and
+ * `totalSize - last.end` below, and hand each row's box to `measureRef(index)`.
+ */
+
+import { useEffect, useLayoutEffect, useRef, useState, type RefObject } from "react";
+import type { BoxRenderable, ScrollBoxRenderable } from "@opentui/core";
+import { useRenderer } from "@opentui/react";
+import { Virtualizer, type VirtualItem } from "@tanstack/virtual-core";
+import { subscribeToFrames } from "./use-frame-measure";
+
+export interface TerminalVirtualizerOptions {
+  scrollbox: RefObject<ScrollBoxRenderable | null>;
+  count: number;
+  estimateSize: (index: number) => number;
+  overscan: number;
+}
+
+export interface TerminalVirtualizer {
+  items: VirtualItem[];
+  totalSize: number;
+  measureRef: (index: number) => (renderable: BoxRenderable | null) => void | (() => void);
+  scrollToIndex: (index: number, align?: "auto" | "start" | "center" | "end") => void;
+  startOfIndex: (index: number) => number | undefined;
+  scrollToOffset: (offset: number) => void;
+}
+
+/** Visible rows and one-row scrolling for a held mouse mark at a viewport edge. */
+export interface ScrollDragViewport {
+  top: number;
+  bottom: number;
+  scrollBy: (rows: -1 | 1) => boolean;
+}
+
+/** Adapt an OpenTUI scrollbox to the annotation surface's edge-scroll contract. */
+export function scrollBoxDragViewport(
+  scrollbox: ScrollBoxRenderable | null,
+): ScrollDragViewport | null {
+  if (!scrollbox) return null;
+
+  return {
+    top: scrollbox.viewport.screenY,
+    bottom: scrollbox.viewport.screenY + scrollbox.viewport.height - 1,
+    scrollBy: (rows) => {
+      const before = scrollbox.scrollTop;
+
+      scrollbox.scrollBy(rows);
+
+      return scrollbox.scrollTop !== before;
+    },
+  };
+}
+
+/**
+ * The scroll container as the core reads it: the offset and the extents it clamps a scroll
+ * target with. These are the `Element` members of the same names, so the view passes as one.
+ */
+interface ScrollContainerView {
+  readonly scrollTop: number;
+  readonly scrollHeight: number;
+  readonly clientHeight: number;
+  readonly scrollWidth: number;
+  readonly clientWidth: number;
+}
+
+/** A mounted row as the core measures it: its height under the `Element` member name. */
+interface RowView {
+  readonly clientHeight: number;
+}
+
+type CoreVirtualizer = Virtualizer<Element, Element>;
+
+function scrollContainerView(scrollbox: ScrollBoxRenderable): ScrollContainerView {
+  return {
+    get scrollTop() {
+      return scrollbox.scrollTop;
+    },
+    get scrollHeight() {
+      return scrollbox.scrollHeight;
+    },
+    get clientHeight() {
+      return scrollbox.viewport.height;
+    },
+    get scrollWidth() {
+      return scrollbox.scrollWidth;
+    },
+    get clientWidth() {
+      return scrollbox.viewport.width;
+    },
+  };
+}
+
+function rowView(renderable: BoxRenderable): RowView {
+  return {
+    get clientHeight() {
+      return renderable.height;
+    },
+  };
+}
+
+/**
+ * The core's element generics are DOM-typed, but every way it touches the container or a row
+ * (rect, offset, scroll, measurement, index lookup) is replaced here with a renderable-aware
+ * callback, so a view exposing just the members it reads stands in for the element.
+ */
+function asElement(view: ScrollContainerView | RowView): Element {
+  // SAFETY: the core never calls DOM methods on this value; its DOM defaults are all overridden.
+  return view as Element;
+}
+
+export function useTerminalVirtualizer(options: TerminalVirtualizerOptions): TerminalVirtualizer {
+  const renderer = useRenderer();
+  const [, setRevision] = useState(0);
+  // one stable view per mounted row box, so the core's element cache keeps its identity
+  const viewOfRenderable = useRef(new WeakMap<BoxRenderable, Element>());
+  const indexOfView = useRef(new WeakMap<Element, number>());
+  const container = useRef<{ scrollbox: ScrollBoxRenderable; view: Element } | null>(null);
+
+  const scrollContainer = (): Element | null => {
+    const scrollbox = options.scrollbox.current;
+
+    if (!scrollbox) return null;
+    if (container.current?.scrollbox !== scrollbox) {
+      container.current = { scrollbox, view: asElement(scrollContainerView(scrollbox)) };
+    }
+
+    return container.current.view;
+  };
+  const viewFor = (renderable: BoxRenderable): Element => {
+    const known = viewOfRenderable.current.get(renderable);
+
+    if (known) return known;
+    const view = asElement(rowView(renderable));
+
+    viewOfRenderable.current.set(renderable, view);
+
+    return view;
+  };
+
+  // the offset reporter the core registered, so a scroll the core asks for reports at once
+  const reportOffset = useRef<(() => void) | null>(null);
+
+  // a frame-event poll stands in for scroll and resize events: the renderer fires it after every
+  // render, and the callbacks only fire the core when the value actually changed
+  const onFrame = (read: () => void): (() => void) => {
+    read();
+
+    return renderer ? subscribeToFrames(renderer, read) : () => {};
+  };
+
+  const coreOptions = () => ({
+    count: options.count,
+    overscan: options.overscan,
+    estimateSize: options.estimateSize,
+    getScrollElement: scrollContainer,
+    observeElementRect: (
+      _instance: CoreVirtualizer,
+      callback: (rect: { width: number; height: number }) => void,
+    ) => {
+      let last = { width: -1, height: -1 };
+
+      return onFrame(() => {
+        const scrollbox = options.scrollbox.current;
+
+        if (!scrollbox) return;
+        const next = { width: scrollbox.viewport.width, height: scrollbox.viewport.height };
+
+        if (next.width === last.width && next.height === last.height) return;
+        last = next;
+        callback(next);
+      });
+    },
+    observeElementOffset: (
+      _instance: CoreVirtualizer,
+      callback: (offset: number, isScrolling: boolean) => void,
+    ) => {
+      let last = -1;
+      const report = (): void => {
+        const scrollbox = options.scrollbox.current;
+
+        if (!scrollbox || scrollbox.scrollTop === last) return;
+        last = scrollbox.scrollTop;
+        callback(last, false);
+      };
+      const stop = onFrame(report);
+
+      reportOffset.current = report;
+
+      return () => {
+        reportOffset.current = null;
+        stop();
+      };
+    },
+    // report the new offset in the same tick: the item window then follows the scroll at once,
+    // instead of one frame later with the target rows still unmounted
+    scrollToFn: (offset: number) => {
+      options.scrollbox.current?.scrollTo({ x: 0, y: Math.max(0, Math.round(offset)) });
+      reportOffset.current?.();
+    },
+    // a box measures 0 until Yoga has laid it out; keep the estimate rather than collapse the row
+    measureElement: (element: Element) =>
+      element.clientHeight > 0
+        ? element.clientHeight
+        : options.estimateSize(indexOfView.current.get(element) ?? -1),
+    onChange: () => setRevision((revision) => revision + 1),
+  });
+
+  const [virtualizer] = useState<CoreVirtualizer>(() => {
+    const instance = new Virtualizer<Element, Element>(coreOptions());
+
+    // the core looks an item's index up through a DOM attribute; ours is remembered per row view
+    instance.indexFromElement = (element) => indexOfView.current.get(element) ?? -1;
+
+    return instance;
+  });
+
+  virtualizer.setOptions(coreOptions());
+  useLayoutEffect(() => {
+    virtualizer._willUpdate();
+  });
+  useEffect(() => virtualizer._didMount(), [virtualizer]);
+  // no ResizeObserver here: a mounted row's height settles after layout and grows when a card
+  // opens under it, so every frame re-reads the mounted rows (the core only notifies on change)
+  useEffect(
+    () =>
+      onFrame(() => {
+        for (const element of virtualizer.elementsCache.values()) {
+          virtualizer.measureElement(element);
+        }
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [virtualizer, renderer],
+  );
+
+  return {
+    items: virtualizer.getVirtualItems(),
+    totalSize: virtualizer.getTotalSize(),
+    measureRef: (index) => (renderable) => {
+      if (!renderable) return;
+      const view = viewFor(renderable);
+
+      indexOfView.current.set(view, index);
+      virtualizer.measureElement(view);
+
+      // the row unmounted: forget its view so the frame re-measure stops reading it
+      return () => {
+        if (virtualizer.elementsCache.get(index) === view) virtualizer.elementsCache.delete(index);
+      };
+    },
+    scrollToIndex: (index, align = "auto") => virtualizer.scrollToIndex(index, { align }),
+    startOfIndex: (index) => virtualizer.getOffsetForIndex(index, "start")?.[0],
+    scrollToOffset: (offset) => virtualizer.scrollToOffset(offset, { align: "start" }),
+  };
+}

package/src/workbench/components/ChangesColumn.stories.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import type { DiffFileContents } from "@cueloop/schema";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { ChangesColumn } from "./ChangesColumn";
+
+export const meta: StoryMeta = { title: "Surfaces/ChangesColumn" };
+
+function Frame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ width: "100%", height: "100%", flexDirection: "row" }}>{children}</box>;
+}
+
+const files: DiffFileContents[] = [
+  { path: "packages/client/src/App.tsx", oldContents: "a", newContents: "b", status: "modified" },
+  {
+    path: "packages/client/src/components/ChangesColumn.tsx",
+    oldContents: "",
+    newContents: "c",
+    status: "added",
+  },
+  {
+    path: "packages/daemon/src/thread-review.ts",
+    oldContents: "d",
+    newContents: "",
+    status: "deleted",
+  },
+  { path: "README.md", oldContents: "e", newContents: "f", status: "modified" },
+];
+
+export const Changed: Story = {
+  render: () => (
+    <Frame>
+      <ChangesColumn
+        open
+        files={files}
+        selectedPath="packages/client/src/App.tsx"
+        onSelectFile={() => {}}
+        theme={DARK}
+      />
+    </Frame>
+  ),
+  expectedColors: [DARK.accent, DARK.border],
+  size: { width: 60, height: 12 },
+};