@cueloop/client 0.1.0-alpha.8 → 0.1.0-alpha.81

package/src/components/GridTabContent.tsx

@@ -0,0 +1,182 @@
+/**
+ * The body an editor tab paints: the whole working-tree/artifact diff for the
+ * Changes tab, or a single file's diff (or read-only contents) for a file tab.
+ * Shared by the thread workbench and the bare-launch shell so both render a
+ * changed file the same way, with comments routed back through one surface.
+ */
+
+import React, { useMemo } from "react";
+import { type Anchor } from "@cueloop/schema";
+import { dimmedTheme, type Theme } from "../theme";
+import { changesMarks, type DiffRow } from "../view-diff";
+import {
+  DiffContentView,
+  type DiffFoldControls,
+  type DiffContentViewProps,
+} from "./DiffContentView";
+import { AnnotatableFileView } from "./AnnotatableFileView";
+import type { EditorTab } from "./editor-grid";
+
+/** The inline-commenting props the diff sheet shares with the thread view, wired once by the app. */
+export type DiffSurfaceProps = Pick<
+  DiffContentViewProps,
+  | "session"
+  | "quickActions"
+  | "observer"
+  | "commentsEnabled"
+  | "resolved"
+  | "suspended"
+  | "onComposingChange"
+  | "onObserverBlocked"
+  | "onCursorChange"
+  | "focusedAnnotationId"
+  | "onFocusAnnotation"
+  | "onAnnotate"
+  | "onReply"
+  | "onUpdateAnnotation"
+  | "resolveAuthorLabel"
+  | "onNavCommand"
+  | "onExit"
+>;
+
+/** The Changes tab body: the whole diff in one scroll container, or a bare hint when nothing changed. */
+export function ChangesTabBody(props: {
+  rows: DiffRow[];
+  surface: DiffSurfaceProps;
+  rejectedRows: Set<number>;
+  fold?: DiffFoldControls;
+  fileStats?: ReadonlyMap<string, { additions: number; deletions: number }>;
+  split?: boolean;
+  dimmed: boolean;
+  /** Rows the sibling Thread pane spends on its footer, so this empty hint centers level with it. */
+  emptyBottomPadding?: number;
+  theme: Theme;
+}): React.ReactNode {
+  const session = props.surface.session;
+  const marks = useMemo(
+    () => changesMarks(session, props.rows, props.surface.focusedAnnotationId),
+    [session, props.rows, props.surface.focusedAnnotationId],
+  );
+
+  if (props.rows.length === 0) {
+    return (
+      <box
+        style={{
+          flexGrow: 1,
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          paddingBottom: props.emptyBottomPadding,
+        }}
+      >
+        <text fg={props.theme.textDim}>No changes</text>
+      </box>
+    );
+  }
+
+  return (
+    <DiffContentView
+      rows={props.rows}
+      marks={marks}
+      {...props.surface}
+      rejectedRows={props.rejectedRows}
+      fold={props.fold}
+      fileStats={props.fileStats}
+      split={props.split}
+      theme={props.dimmed ? dimmedTheme(props.theme) : undefined}
+    />
+  );
+}
+
+/** An editor tab's body: the whole diff for the Changes tab, a file's diff or contents for a file tab. */
+export function GridTabContent(props: {
+  tab: EditorTab;
+  rows: DiffRow[];
+  surface: DiffSurfaceProps;
+  rejectedRows: Set<number>;
+  fold?: DiffFoldControls;
+  fileStats?: ReadonlyMap<string, { additions: number; deletions: number }>;
+  split?: boolean;
+  dimmed: boolean;
+  readFile: (path: string) => Promise<string | null>;
+  /** Persist a comment on a project file; the file view built the anchor against its own lines. */
+  onAddFileComment: (path: string, anchor: Anchor, body: string) => void;
+  /** Rows the sibling Thread pane spends on its footer, so the empty hint centers level with it. */
+  emptyBottomPadding?: number;
+  theme: Theme;
+}): React.ReactNode {
+  const { tab } = props;
+  if (tab.kind === "file" && tab.fileView === "contents" && tab.path !== undefined) {
+    const filePath = tab.path;
+
+    return (
+      <AnnotatableFileView
+        path={filePath}
+        loadContents={props.readFile}
+        session={props.surface.session}
+        quickActions={props.surface.quickActions}
+        observer={props.surface.observer}
+        resolved={props.surface.resolved}
+        suspended={props.surface.suspended}
+        focusedAnnotationId={props.surface.focusedAnnotationId}
+        onFocusAnnotation={props.surface.onFocusAnnotation}
+        onComposingChange={props.surface.onComposingChange}
+        onCursorChange={props.surface.onCursorChange}
+        onObserverBlocked={props.surface.onObserverBlocked}
+        onAddComment={(anchor, body) => props.onAddFileComment(filePath, anchor, body)}
+        onReply={props.surface.onReply}
+        onUpdateAnnotation={props.surface.onUpdateAnnotation}
+        resolveAuthorLabel={props.surface.resolveAuthorLabel}
+        onExit={props.surface.onExit}
+        theme={props.theme}
+      />
+    );
+  }
+  if (tab.kind !== "file") {
+    return (
+      <ChangesTabBody
+        rows={props.rows}
+        surface={props.surface}
+        rejectedRows={props.rejectedRows}
+        fold={props.fold}
+        fileStats={props.fileStats}
+        split={props.split}
+        dimmed={props.dimmed}
+        emptyBottomPadding={props.emptyBottomPadding}
+        theme={props.theme}
+      />
+    );
+  }
+  // a single-file tab shows that file's rows alone, so its row indices are its own: comments and
+  // the caret report back in whole-diff indices, and the fold controls (a band to fold) do not apply
+  const fileRowIndices = props.rows.flatMap((row, index) => (row.file === tab.path ? [index] : []));
+  const rows = fileRowIndices.map((index) => props.rows[index]!);
+  const wholeIndex = (rowIndex: number): number => fileRowIndices[rowIndex] ?? rowIndex;
+  const rejectedRows = new Set(
+    fileRowIndices.flatMap((index, rowIndex) => (props.rejectedRows.has(index) ? [rowIndex] : [])),
+  );
+
+  return (
+    <ChangesTabBody
+      rows={rows}
+      surface={{
+        ...props.surface,
+        onCursorChange: (rowIndex) => props.surface.onCursorChange?.(wholeIndex(rowIndex)),
+        onAnnotate: (span, body) =>
+          props.surface.onAnnotate(
+            {
+              start: { blockIndex: wholeIndex(span.start.blockIndex), char: span.start.char },
+              end: { blockIndex: wholeIndex(span.end.blockIndex), char: span.end.char },
+            },
+            body,
+          ),
+      }}
+      rejectedRows={rejectedRows}
+      fileStats={props.fileStats}
+      split={props.split}
+      dimmed={props.dimmed}
+      emptyBottomPadding={props.emptyBottomPadding}
+      theme={props.theme}
+    />
+  );
+}

package/src/components/HandleChipsInput.stories.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { HandleChipsInput } from "./HandleChipsInput";
+
+export const meta: StoryMeta = { title: "Inputs/HandleChips" };
+
+export const WithHandles: Story = {
+  render: () => (
+    <box style={{ padding: 1, backgroundColor: DARK.elevated }}>
+      <HandleChipsInput logins={["octocat", "hubot"]} onChange={() => {}} theme={DARK} />
+    </box>
+  ),
+  size: { width: 48, height: 6 },
+};
+
+export const Empty: Story = {
+  render: () => (
+    <box style={{ padding: 1, backgroundColor: DARK.elevated }}>
+      <HandleChipsInput logins={[]} onChange={() => {}} theme={DARK} />
+    </box>
+  ),
+  size: { width: 48, height: 6 },
+};

package/src/components/HandleChipsInput.test.tsx

@@ -0,0 +1,35 @@
+/** Backspace on the empty field pulls the last chip back in to edit, rather than deleting it. */
+
+import React, { useState } from "react";
+import { describe, expect, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import { DARK } from "../theme";
+import { press, settle } from "../test-support";
+import { HandleChipsInput } from "./HandleChipsInput";
+
+/** A controlled host so onChange edits flow back into the rendered list, like the wizard. */
+function Harness({ initial }: { initial: string[] }): React.ReactNode {
+  const [logins, setLogins] = useState(initial);
+
+  return <HandleChipsInput logins={logins} onChange={setLogins} theme={DARK} />;
+}
+
+describe("HandleChipsInput", () => {
+  test("backspace on the empty field restores the last chip as editable text", async () => {
+    // Arrange - one committed chip and an empty input showing its placeholder
+    const setup = await testRender(<Harness initial={["octocat"]} />, { width: 48, height: 6 });
+
+    await settle(setup);
+    expect(setup.captureCharFrame()).toContain("handle");
+
+    // Act - backspace with the input empty
+    await press(setup, "backspace");
+
+    // Assert - the handle is back in the field (placeholder gone), not deleted
+    const frame = setup.captureCharFrame();
+
+    expect(frame).toContain("octocat");
+    expect(frame).not.toContain("handle");
+    setup.renderer.destroy();
+  });
+});

package/src/components/HandleChipsInput.tsx

@@ -0,0 +1,145 @@
+/**
+ * A tag-style input for GitHub logins: each added handle is an inline chip with
+ * a hover × to remove, and a trailing one-line field where enter adds the next
+ * and backspace on an empty field drops the last. Controlled - the caller owns
+ * the list and receives every change.
+ */
+
+import React, { useEffect, useRef, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import type { KeyBinding, TextareaRenderable } from "@opentui/core";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { NERD } from "./primitives/icons";
+
+// enter adds the handle rather than inserting a newline into the one-line field
+const ADD_KEY_BINDINGS: KeyBinding[] = [{ name: "return", action: "submit" }];
+
+function HandleChip({
+  login,
+  onRemove,
+  tokens,
+}: {
+  login: string;
+  onRemove: () => void;
+  tokens: Theme;
+}): React.ReactNode {
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <box
+      onMouseOver={() => setHovered(true)}
+      onMouseOut={() => setHovered(false)}
+      style={{
+        flexDirection: "row",
+        flexShrink: 0,
+        marginRight: 2,
+        paddingLeft: 1,
+        backgroundColor: tokens.border,
+      }}
+    >
+      <text fg={tokens.text} style={{ wrapMode: "none" }}>{`@${login}`}</text>
+      <box
+        onMouseUp={(event) => {
+          event.stopPropagation();
+          onRemove();
+        }}
+        style={{ paddingLeft: 1, paddingRight: 1 }}
+      >
+        <text fg={tokens.textDim}>{hovered ? NERD.close : " "}</text>
+      </box>
+    </box>
+  );
+}
+
+export interface HandleChipsInputProps {
+  logins: string[];
+  onChange: (logins: string[]) => void;
+  /** Whether this field owns the cursor and backspace; false shows the chips without a blinking caret. */
+  focused?: boolean;
+  /** Fired on backspace when the field is empty and no chips remain, so the caller can collapse the section. */
+  onEmptyBackspace?: () => void;
+  theme?: Theme;
+}
+
+export function HandleChipsInput({
+  logins,
+  onChange,
+  focused = true,
+  onEmptyBackspace,
+  theme,
+}: HandleChipsInputProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const inputRef = useRef<TextareaRenderable | null>(null);
+  // the text the current field generation mounts with; a remount reseeds it
+  const [seed, setSeed] = useState("");
+  const [inputGeneration, setInputGeneration] = useState(0);
+
+  useEffect(() => {
+    const input = inputRef.current;
+
+    if (!input || !focused) return;
+    input.focus();
+    input.cursorOffset = seed.length; // land the caret at the end of the seeded text
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inputGeneration, focused]);
+
+  const reseed = (text: string): void => {
+    setSeed(text);
+    setInputGeneration((generation) => generation + 1);
+  };
+
+  const addDraft = (): void => {
+    const handle = (inputRef.current?.plainText ?? "").trim().replace(/^@/, "").toLowerCase();
+
+    if (handle && !logins.includes(handle)) onChange([...logins, handle]);
+    reseed("");
+  };
+
+  useKeyboard((key) => {
+    if (!focused) return;
+    if (key.name !== "backspace" || (inputRef.current?.plainText ?? "").length > 0) return;
+    // backspace on an empty field pulls the last chip back in to edit; with none left, collapse
+    if (logins.length > 0) {
+      const last = logins[logins.length - 1]!;
+
+      onChange(logins.slice(0, -1));
+      reseed(last);
+    } else {
+      onEmptyBackspace?.();
+    }
+  });
+
+  return (
+    <box style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center" }}>
+      {logins.map((login) => (
+        <HandleChip
+          key={login}
+          login={login}
+          onRemove={() => onChange(logins.filter((entry) => entry !== login))}
+          tokens={tokens}
+        />
+      ))}
+      <box style={{ flexDirection: "row", flexShrink: 0 }}>
+        <text fg={tokens.textDim}>{"@"}</text>
+        <textarea
+          key={inputGeneration}
+          ref={inputRef}
+          focused
+          initialValue={seed}
+          placeholder="handle"
+          keyBindings={ADD_KEY_BINDINGS}
+          onSubmit={addDraft}
+          style={{
+            height: 1,
+            width: 16,
+            backgroundColor: tokens.elevated,
+            focusedBackgroundColor: tokens.elevated,
+            textColor: tokens.text,
+            focusedTextColor: tokens.text,
+          }}
+        />
+      </box>
+    </box>
+  );
+}

package/src/components/KeybindsDialog.stories.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { KeybindsDialog } from "./KeybindsDialog";
+
+export const meta: StoryMeta = { title: "Overlays/KeybindsDialog" };
+
+const SECTIONS = [
+  {
+    title: "Review",
+    entries: [
+      { keys: "j / k", label: "move" },
+      { keys: "v", label: "span" },
+      { keys: "c", label: "comment" },
+      { keys: "enter", label: "submit" },
+    ],
+  },
+  {
+    title: "Submit",
+    entries: [
+      { keys: "← / →", label: "message" },
+      { keys: "esc", label: "cancel" },
+    ],
+  },
+];
+
+export const Cheatsheet: Story = {
+  render: () => <KeybindsDialog sections={SECTIONS} />,
+  expectedColors: [DARK.accent],
+  size: { width: 70, height: 24 },
+};

package/src/components/KeybindsDialog.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Dialog } from "./primitives/Dialog";
+import type { CheatsheetSection } from "../key-bindings";
+
+export interface KeybindsDialogProps {
+  sections: CheatsheetSection[];
+  theme?: Theme;
+}
+
+/** Rows a section takes: its title, its entries, and the blank line after it. */
+function sectionRows(section: CheatsheetSection): number {
+  return 1 + section.entries.length + 1;
+}
+
+/**
+ * Split the sections over `count` columns, filling each column to the
+ * balanced share of rows before starting the next, so a long cheatsheet
+ * reads top to bottom, then left to right.
+ */
+function columnsOf(sections: CheatsheetSection[], count: number): CheatsheetSection[][] {
+  const total = sections.reduce((sum, section) => sum + sectionRows(section), 0);
+  const share = Math.ceil(total / count);
+  const columns: CheatsheetSection[][] = [[]];
+  let filled = 0;
+
+  for (const section of sections) {
+    const column = columns[columns.length - 1]!;
+
+    if (filled > 0 && filled + sectionRows(section) > share && columns.length < count) {
+      columns.push([section]);
+      filled = sectionRows(section);
+    } else {
+      column.push(section);
+      filled += sectionRows(section);
+    }
+  }
+
+  return columns;
+}
+
+const COLUMN_WIDTH = 48;
+
+export function KeybindsDialog({ sections, theme }: KeybindsDialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
+  const totalRows = sections.reduce((sum, section) => sum + sectionRows(section), 0) + 1;
+  // a cheatsheet taller than the terminal folds into a second column
+  const columnCount =
+    totalRows + 3 > terminalHeight - 4 && terminalWidth >= COLUMN_WIDTH * 2 + 6 ? 2 : 1;
+  const columns = columnsOf(sections, columnCount);
+  const tallest = Math.max(
+    ...columns.map((column) => column.reduce((sum, section) => sum + sectionRows(section), 0)),
+  );
+  const width = Math.min(COLUMN_WIDTH * columnCount + 4, terminalWidth - 6);
+  const height = Math.min(terminalHeight - 4, tallest + 1 + 3);
+
+  return (
+    <Dialog
+      isOpen
+      title=" keybinds "
+      width={width}
+      height={height}
+      background={tokens.elevated}
+      theme={theme}
+    >
+      <box
+        style={{
+          flexDirection: "column",
+          flexGrow: 1,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+        }}
+      >
+        <box style={{ flexDirection: "row", flexGrow: 1 }}>
+          {columns.map((column, columnIndex) => (
+            <box key={columnIndex} style={{ flexDirection: "column", width: COLUMN_WIDTH }}>
+              {column.map((section) => (
+                <box key={section.title} style={{ flexDirection: "column" }}>
+                  <text fg={tokens.accent}>{section.title}</text>
+                  {section.entries.map((entry, index) => (
+                    <text key={index}>
+                      <span fg={tokens.text}>{entry.keys.padEnd(12)}</span>
+                      <span fg={tokens.textMuted}>{entry.label}</span>
+                    </text>
+                  ))}
+                  <text> </text>
+                </box>
+              ))}
+            </box>
+          ))}
+        </box>
+        <box style={{ flexDirection: "row" }}>
+          <box style={{ flexGrow: 1 }} />
+          <text fg={tokens.textDim}>[esc]</text>
+        </box>
+      </box>
+    </Dialog>
+  );
+}

package/src/components/MarkdownGridBlock.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { DARK } from "../theme";
+import { buildDisplay, type DisplayBlock } from "../view-plan";
+import type { Story, StoryMeta } from "./story";
+import { MarkdownGridBlock } from "./MarkdownGridBlock";
+
+export const meta: StoryMeta = { title: "Surfaces/MarkdownGridBlock" };
+
+/** The first display block of a kind, for a story that renders one grid in isolation. */
+function firstBlock(markdown: string, kind: DisplayBlock["kind"]): DisplayBlock {
+  return buildDisplay(markdown).find((block) => block.kind === kind)!;
+}
+
+const TABLE = firstBlock(
+  "| Name | Size |\n| :--- | ---: |\n| daemon | 12 |\n| client | 7 |",
+  "table",
+);
+const FRONTMATTER = firstBlock(
+  "---\ntitle: Migration Plan\nowner: platform team\nstatus: in review\n---\n\n# Plan\n",
+  "frontmatter",
+);
+
+export const Table: Story = {
+  render: () => <MarkdownGridBlock block={TABLE} theme={DARK} contentWidth={60} />,
+  expectedColors: [DARK.text, DARK.textDim],
+  size: { width: 62, height: 6 },
+};
+
+export const Frontmatter: Story = {
+  render: () => <MarkdownGridBlock block={FRONTMATTER} theme={DARK} contentWidth={60} />,
+  expectedColors: [DARK.text, DARK.textDim],
+  size: { width: 62, height: 9 },
+};

package/src/components/MarkdownGridBlock.tsx

@@ -0,0 +1,72 @@
+/**
+ * Render a table or frontmatter display block as its grid: a GFM table (bold
+ * header over a rule, aligned columns) or a leading-frontmatter key/value box.
+ * Layout is computed in markdown-grid; this only paints the positioned segments,
+ * dim for borders and bold for the header or key column. The grid annotates as
+ * one unit: every row registers the same block span for hit-testing, so a click
+ * or drag anchors a comment on it and a mark tints the whole grid.
+ */
+
+import React from "react";
+import type { MouseEvent as TerminalMouseEvent, TextRenderable } from "@opentui/core";
+import { displayText, type DisplayBlock } from "../view-plan";
+import type { Theme } from "../theme";
+import { BOLD } from "../annotation-palette";
+import {
+  layoutFrontmatterGrid,
+  layoutMarkdownTable,
+  parseFrontmatterRows,
+  parseMarkdownTable,
+  type GridLine,
+} from "../markdown-grid";
+
+function gridLines(block: DisplayBlock, contentWidth: number): GridLine[] {
+  if (block.kind === "table") return layoutMarkdownTable(parseMarkdownTable(displayText(block)));
+
+  return layoutFrontmatterGrid(parseFrontmatterRows(displayText(block)), contentWidth);
+}
+
+export function MarkdownGridBlock({
+  block,
+  theme,
+  contentWidth,
+  marked = false,
+  markBackdrop,
+  registerRow,
+  onRowMouseDown,
+}: {
+  block: DisplayBlock;
+  theme: Theme;
+  contentWidth: number;
+  /** True while a discussion or held selection marks this grid; tints it so the annotation reads. */
+  marked?: boolean;
+  markBackdrop?: string;
+  /** Registers a grid row's renderable with the annotation surface, all mapping to the one block span. */
+  registerRow?: (rowIndex: number) => (renderable: TextRenderable | null) => void;
+  onRowMouseDown?: (event: TerminalMouseEvent) => void;
+}): React.ReactNode {
+  const lines = gridLines(block, Math.max(12, contentWidth));
+
+  return (
+    <box style={{ flexDirection: "column", backgroundColor: marked ? markBackdrop : undefined }}>
+      {lines.map((line, lineIndex) => (
+        <box key={`grid-${lineIndex}`} style={{ flexDirection: "row" }}>
+          <text selectable={false}>
+            <span fg={theme.textDim}>{"  "}</span>
+          </text>
+          <text selectable={false} ref={registerRow?.(lineIndex)} onMouseDown={onRowMouseDown}>
+            {line.map((segment, segmentIndex) => (
+              <span
+                key={segmentIndex}
+                fg={segment.dim ? theme.textDim : theme.text}
+                attributes={segment.bold ? BOLD : 0}
+              >
+                {segment.text}
+              </span>
+            ))}
+          </text>
+        </box>
+      ))}
+    </box>
+  );
+}

package/src/components/MarkdownThreadEditor.stories.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { MarkdownThreadEditor } from "./MarkdownThreadEditor";
+
+export const meta: StoryMeta = { title: "Surfaces/MarkdownThreadEditor" };
+
+const SAMPLE =
+  "# Rollout Plan\n\nShip the store move behind a `flag`. See [docs](https://x.dev).\n\n- first step\n- second step\n";
+
+export const Editing: Story = {
+  render: () => <MarkdownThreadEditor initialText={SAMPLE} theme={DARK} onExitEditor={() => {}} />,
+  expectedColors: [DARK.blue, DARK.textMuted, DARK.textDim],
+  size: { width: 62, height: 14 },
+};