@cueloop/client 0.1.0-alpha.9 → 0.1.0-alpha.91

package/src/components/FileContentsView.test.tsx

@@ -0,0 +1,29 @@
+import { expect, test } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { FileContentsView } from "./FileContentsView";
+import { waitForText } from "../test-support";
+import { DARK } from "../theme";
+
+test("renders the loaded file contents", async () => {
+  const setup = await testRender(
+    <FileContentsView
+      path="src/add.ts"
+      loadContents={() => Promise.resolve("const answer = 42;\n")}
+      theme={DARK}
+    />,
+    { width: 60, height: 10 },
+  );
+
+  await waitForText(setup, "const answer = 42;");
+});
+
+test("shows a centered File deleted message when the file cannot be read", async () => {
+  const setup = await testRender(
+    <FileContentsView path="missing.ts" loadContents={() => Promise.resolve(null)} theme={DARK} />,
+    { width: 60, height: 10 },
+  );
+
+  await waitForText(setup, "File deleted");
+  expect(setup.captureCharFrame()).toContain("File deleted");
+});

package/src/components/FileContentsView.tsx

@@ -0,0 +1,98 @@
+// A Changes/Project file tab in contents mode: a workspace file rendered read-only with line
+// numbers, for surfaces with no thread to anchor notes to (the bare-launch welcome shell).
+// Loads on mount and whenever the path changes; a null read renders a centered "File deleted".
+// Syntax highlighting comes from the native code renderable (tree-sitter), the language
+// auto-detected from the path; unknown languages simply render unstyled.
+
+import { ScrollArea } from "./ScrollArea";
+import React, { useEffect, useRef, useState } from "react";
+import type { CodeRenderable } from "@opentui/core";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { filetypeForPath, syntaxStyleFor } from "./syntax-highlight";
+
+export interface FileContentsViewProps {
+  path: string;
+  loadContents: (path: string) => Promise<string | null>;
+  theme?: Theme;
+}
+
+/** A finished read for a specific path; `lines` is null when the file could not be read. */
+interface FileLoad {
+  path: string;
+  lines: string[] | null;
+}
+
+export function FileContentsView({
+  path,
+  loadContents,
+  theme,
+}: FileContentsViewProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const [loaded, setLoaded] = useState<FileLoad | null>(null);
+  // The gutter mirrors the code renderable's line info, so it needs the mounted
+  // instance; a state-backed ref rebinds the target once the code renderable exists.
+  const [codeTarget, setCodeTarget] = useState<CodeRenderable | null>(null);
+  const loadRef = useRef(loadContents);
+  useEffect(() => {
+    loadRef.current = loadContents;
+  });
+
+  useEffect(() => {
+    let alive = true;
+    void loadRef.current(path).then(
+      (contents) => {
+        if (alive) setLoaded({ path, lines: contents === null ? null : contents.split("\n") });
+      },
+      () => {
+        if (alive) setLoaded({ path, lines: null });
+      },
+    );
+
+    return () => {
+      alive = false;
+    };
+  }, [path]);
+
+  if (loaded === null || loaded.path !== path) {
+    return (
+      <box style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 1 }}>
+        <text fg={tokens.textDim}>loading...</text>
+      </box>
+    );
+  }
+  if (loaded.lines === null) {
+    // a file that no longer reads in the Changes/Project view is one the working tree deleted;
+    // the bottom pad lifts the text one row so it lines up with the footer-shortened thread empty state
+    return (
+      <box
+        style={{ flexGrow: 1, alignItems: "center", justifyContent: "center", paddingBottom: 2 }}
+      >
+        <text fg={tokens.textDim}>File deleted</text>
+      </box>
+    );
+  }
+  const content = loaded.lines.join("\n");
+
+  return (
+    <ScrollArea>
+      <line-number
+        target={codeTarget ?? undefined}
+        showLineNumbers
+        fg={tokens.textDim}
+        minWidth={5}
+        paddingRight={1}
+        style={{ paddingTop: 1, paddingLeft: 1 }}
+      >
+        <code
+          ref={setCodeTarget}
+          content={content}
+          filetype={filetypeForPath(path)}
+          syntaxStyle={syntaxStyleFor(tokens)}
+          selectable={false}
+          style={{ wrapMode: "none", fg: tokens.text }}
+        />
+      </line-number>
+    </ScrollArea>
+  );
+}

package/src/components/GridTabContent.stories.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { DARK } from "../theme";
+import { DEFAULT_QUICK_ACTIONS } from "../config";
+import type { Story, StoryMeta } from "./story";
+import { GridTabContent, type DiffSurfaceProps } from "./GridTabContent";
+import { fixtureDiffRows, fixtureDiffSession } from "./story-fixtures";
+import { changesTab, fileTab } from "./editor-grid";
+
+export const meta: StoryMeta = { title: "Surfaces/GridTabContent" };
+
+const noop = (): void => {};
+
+function surface(): DiffSurfaceProps {
+  return {
+    session: fixtureDiffSession({ annotations: [] }),
+    quickActions: DEFAULT_QUICK_ACTIONS,
+    observer: false,
+    onAnnotate: noop,
+    onReply: noop,
+    onUpdateAnnotation: noop,
+    onExit: noop,
+  };
+}
+
+/** The whole-diff Changes tab: every changed file in one scroll container. */
+export const ChangesTab: Story = {
+  render: () => (
+    <GridTabContent
+      tab={changesTab()}
+      rows={fixtureDiffRows()}
+      surface={surface()}
+      rejectedRows={new Set()}
+      dimmed={false}
+      readFile={async () => null}
+      onAddFileComment={noop}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.text],
+  size: { width: 80, height: 18 },
+};
+
+/** A single-file diff tab: that file's rows alone, indexed on their own. */
+export const FileDiffTab: Story = {
+  render: () => (
+    <GridTabContent
+      tab={fileTab("store.ts", "src/store.ts", "diff")}
+      rows={fixtureDiffRows()}
+      surface={surface()}
+      rejectedRows={new Set()}
+      dimmed={false}
+      readFile={async () => null}
+      onAddFileComment={noop}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.text],
+  size: { width: 80, height: 18 },
+};

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 },
+};