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

package/src/workbench/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 "../../testing/test-support";
+import { DARK } from "../../appearance/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/workbench/components/FileContentsView.tsx

@@ -0,0 +1,100 @@
+// 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 "../../ui/components/ScrollArea";
+import React, { useEffect, useRef, useState } from "react";
+import type { CodeRenderable } from "@opentui/core";
+import type { Theme } from "../../appearance/theme";
+import { useComponentTheme } from "../../appearance/components/theme-context";
+import { filetypeForPath, syntaxStyleFor } from "../../ui/components/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/workbench/components/GridTabContent.actions.test.tsx

@@ -0,0 +1,151 @@
+/** File tabs keep path actions while only the aggregate Changes tab can fold a file. */
+
+import { expect, test } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { changesTab, fileTab } from "./editor-grid";
+import { GridTabContent, type DiffSurfaceProps } from "./GridTabContent";
+import { FIXTURE_PATCH, fixtureDiffSession } from "../../stories/story-fixtures";
+import { NERD } from "../../ui/components/primitives/icons";
+import { TooltipProvider } from "../../ui/components/Tooltip";
+import { locateText, waitForText } from "../../testing/test-support";
+import { DARK } from "../../appearance/theme";
+import { diffRows } from "../../diff/view-diff";
+
+const noop = (): void => {};
+const rows = diffRows(
+  FIXTURE_PATCH.replaceAll("src/store.ts", "src/store.txt").replace("-1,4 +1,4", "-1,3 +1,3"),
+);
+const surface: DiffSurfaceProps = {
+  session: fixtureDiffSession(),
+  quickActions: [],
+  observer: false,
+  onAnnotate: noop,
+  onReply: noop,
+  onUpdateAnnotation: noop,
+  onExit: noop,
+};
+
+test("a single-file diff keeps copy and expand without a collapse action", async () => {
+  const copied: string[] = [];
+  const setup = await testRender(
+    <TooltipProvider theme={DARK}>
+      <GridTabContent
+        tab={fileTab("store.txt", "src/store.txt", "diff")}
+        rows={rows}
+        surface={surface}
+        rejectedRows={new Set()}
+        fold={{
+          isCollapsed: () => false,
+          isExpanded: () => false,
+          canExpand: () => true,
+          onToggleCollapse: noop,
+          onToggleExpand: noop,
+          onCopyPath: (file) => {
+            copied.push(file);
+
+            return true;
+          },
+        }}
+        dimmed={false}
+        readFile={async () => null}
+        onAddFileComment={noop}
+        theme={DARK}
+      />
+    </TooltipProvider>,
+    { width: 80, height: 12 },
+  );
+
+  await waitForText(setup, "src/store.txt");
+  const frame = setup.captureCharFrame();
+
+  expect(frame).toContain(NERD.copy);
+  expect(frame).not.toContain("v src/store.txt");
+  expect(frame).toContain("expand");
+  const copy = locateText(setup, NERD.copy);
+
+  await setup.mockMouse.moveTo(copy.column, copy.row);
+  await waitForText(setup, "Copy path");
+  await setup.mockMouse.click(copy.column, copy.row);
+  expect(copied).toEqual(["src/store.txt"]);
+  await waitForText(setup, "copied");
+  await setup.waitForVisualIdle();
+  setup.renderer.destroy();
+});
+
+test("the full Changes tab retains fold and expand controls", async () => {
+  const setup = await testRender(
+    <GridTabContent
+      tab={changesTab()}
+      rows={rows}
+      surface={surface}
+      rejectedRows={new Set()}
+      fold={{
+        isCollapsed: () => false,
+        isExpanded: () => false,
+        canExpand: () => true,
+        onToggleCollapse: noop,
+        onToggleExpand: noop,
+        onCopyPath: () => true,
+      }}
+      dimmed={false}
+      readFile={async () => null}
+      onAddFileComment={noop}
+      theme={DARK}
+    />,
+    { width: 80, height: 12 },
+  );
+
+  await waitForText(setup, "src/store.txt");
+  const frame = setup.captureCharFrame();
+
+  expect(frame).toContain("src/store.txt");
+  expect(frame).not.toContain("v src/store.txt");
+  expect(frame).toContain(NERD.copy);
+  expect(frame).toContain("expand");
+  await setup.waitForVisualIdle();
+  setup.renderer.destroy();
+});
+
+test("the file title tooltip follows its collapse action", async () => {
+  function TestChanges(): React.ReactNode {
+    const [collapsed, setCollapsed] = React.useState(false);
+
+    return (
+      <TooltipProvider theme={DARK}>
+        <GridTabContent
+          tab={changesTab()}
+          rows={rows}
+          surface={surface}
+          rejectedRows={new Set()}
+          fold={{
+            isCollapsed: () => collapsed,
+            isExpanded: () => false,
+            canExpand: () => true,
+            onToggleCollapse: () => setCollapsed((current) => !current),
+            onToggleExpand: noop,
+            onCopyPath: () => true,
+          }}
+          dimmed={false}
+          readFile={async () => null}
+          onAddFileComment={noop}
+          theme={DARK}
+        />
+      </TooltipProvider>
+    );
+  }
+
+  const setup = await testRender(<TestChanges />, { width: 80, height: 12 });
+
+  await waitForText(setup, "src/store.txt");
+  const title = locateText(setup, "src/store.txt");
+
+  await setup.mockMouse.moveTo(title.column, title.row);
+  await waitForText(setup, "collapse");
+  await setup.mockMouse.click(title.column, title.row);
+  await waitForText(setup, "uncollapse");
+  await setup.mockMouse.click(title.column, title.row);
+  await waitForText(setup, "collapse");
+  expect(setup.captureCharFrame()).not.toContain("uncollapse");
+  setup.renderer.destroy();
+});

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

@@ -0,0 +1,59 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import { DEFAULT_QUICK_ACTIONS } from "../../settings/config";
+import type { Story, StoryMeta } from "../../stories/story";
+import { GridTabContent, type DiffSurfaceProps } from "./GridTabContent";
+import { fixtureDiffRows, fixtureDiffSession } from "../../stories/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.textMuted],
+  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.textMuted],
+  size: { width: 80, height: 18 },
+};

package/src/workbench/components/GridTabContent.tsx

@@ -0,0 +1,193 @@
+/**
+ * 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 "../../appearance/theme";
+import { changesMarks, type DiffRow } from "../../diff/view-diff";
+import {
+  DiffContentView,
+  type DiffFoldControls,
+  type DiffContentViewProps,
+} from "../../diff/components/DiffContentView";
+import { AnnotatableFileView } from "../../diff/components/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"
+  | "isAnnotationReadOnly"
+  | "annotationAction"
+  | "onInvoke"
+  | "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;
+  showFileCollapse?: boolean;
+  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}
+      showFileCollapse={props.showFileCollapse}
+      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}
+        isAnnotationReadOnly={props.surface.isAnnotationReadOnly}
+        annotationAction={props.surface.annotationAction}
+        onInvoke={props.surface.onInvoke}
+        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; a single-file tab omits only the collapse action
+  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}
+      fold={props.fold}
+      showFileCollapse={false}
+      split={props.split}
+      dimmed={props.dimmed}
+      emptyBottomPadding={props.emptyBottomPadding}
+      theme={props.theme}
+    />
+  );
+}

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { DARK } from "../../appearance/theme";
+import type { Story, StoryMeta } from "../../stories/story";
+import { ProjectTreeView } from "./ProjectTreeView";
+
+export const meta: StoryMeta = { title: "Surfaces/ProjectTreeView" };
+
+const SAMPLE = [
+  "packages/client/src/App.tsx",
+  "packages/client/src/components/AppShell.tsx",
+  "packages/daemon/src/api.ts",
+  "README.md",
+];
+
+export const Loaded: Story = {
+  render: () => (
+    <ProjectTreeView
+      loadFiles={() => Promise.resolve(SAMPLE)}
+      onSelectFile={() => {}}
+      theme={DARK}
+    />
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 40, height: 16 },
+};