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

package/src/components/ChangesColumn.stories.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import type { DiffFileContents } from "@cueloop/schema";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./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 },
+};

package/src/components/ChangesColumn.tsx

@@ -0,0 +1,199 @@
+// The right-hand Changes column: the diff's changed files as a directory tree.
+// A click on a file scrolls the diff to that file. Renders nothing when collapsed
+// so the diff reclaims the width. Mirrors the left Threads column on the far side.
+// Co-located here: the state hook that opens it by context and the header toggle.
+
+import { ScrollArea } from "./ScrollArea";
+import React, { useMemo, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import type { DiffFileContents, Thread } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import type { DiffRow } from "../view-diff";
+import { Tree } from "./primitives/Tree";
+import { allFolderIds, flattenTree } from "./primitives/tree-model";
+import { IconButton } from "./primitives/IconButton";
+import { NERD } from "./primitives/icons";
+import { buildFileTree } from "./file-tree";
+
+export interface DiffColumnsState {
+  changesOpen: boolean;
+  toggleChanges: () => void;
+  /** The path under the diff cursor, highlighted in the Changes tree. */
+  currentFilePath?: string;
+  scrollToFile: (path: string) => void;
+}
+
+/**
+ * Owns the right Changes column for a diff: context opens it when you enter a
+ * diff thread, and a file click scrolls the sheet to that file's first row.
+ * Resets on session change via the guarded render-time pattern, no effect.
+ */
+export function useDiffColumns(params: {
+  session: Thread | null;
+  rows: DiffRow[];
+  cursor: number;
+  setCursor: (index: number) => void;
+}): DiffColumnsState {
+  const { session, rows, cursor, setCursor } = params;
+  const contextDefault = session?.artifact.type === "diff";
+  const [changesOpen, setChangesOpen] = useState(contextDefault);
+  const [seenSessionId, setSeenSessionId] = useState(session?.id);
+
+  // entering another thread lets context decide again; within a thread the manual toggle stays
+  if (session?.id !== seenSessionId) {
+    setSeenSessionId(session?.id);
+    setChangesOpen(contextDefault);
+  }
+
+  return {
+    changesOpen,
+    toggleChanges: () => setChangesOpen((open) => !open),
+    currentFilePath: rows[cursor]?.file,
+    scrollToFile: (path: string) => {
+      const fileRowIndex = rows.findIndex((row) => row.kind === "file" && row.file === path);
+
+      if (fileRowIndex >= 0) setCursor(fileRowIndex);
+    },
+  };
+}
+
+/** The header toggle for the Changes column; shown only for a diff, where files exist to browse. */
+export function DiffChangesToggle({
+  isDiff,
+  open,
+  onToggle,
+  theme,
+}: {
+  isDiff: boolean;
+  open: boolean;
+  onToggle: () => void;
+  theme?: Theme;
+}): React.ReactNode {
+  if (!isDiff) return null;
+
+  return (
+    <IconButton
+      glyph={open ? NERD.sidebarRight : NERD.sidebarRightOff}
+      onPress={onToggle}
+      marginLeft={2}
+      theme={theme}
+    />
+  );
+}
+
+export interface ChangesColumnProps {
+  open: boolean;
+  files?: readonly DiffFileContents[];
+  /** The path whose diff the sheet is scrolled to, highlighted in the tree. */
+  selectedPath?: string;
+  onSelectFile: (path: string) => void;
+  /** Comments per file path, shown as a dot-and-count badge on each entry. */
+  commentCounts?: ReadonlyMap<string, number>;
+  focused?: boolean;
+  width?: number;
+  theme?: Theme;
+}
+
+/**
+ * The changed-files tree on its own, with no surrounding column frame: the body
+ * a workbench Project pane renders. A file click scrolls the diff to that file.
+ */
+export function ChangesFileTree({
+  files = [],
+  selectedPath,
+  onSelectFile,
+  commentCounts,
+  focused = false,
+  theme,
+}: Omit<ChangesColumnProps, "open" | "width">): React.ReactNode {
+  const nodes = useMemo(() => buildFileTree(files, commentCounts), [files, commentCounts]);
+  // every folder opens by default so each changed file is reachable; the user
+  // only ever names the folders they fold shut, so a new file set stays open
+  const [collapsedIds, setCollapsedIds] = useState<ReadonlySet<string>>(new Set());
+  const [cursor, setCursor] = useState(0);
+  const expandedIds = useMemo(() => {
+    const expanded = allFolderIds(nodes);
+
+    for (const id of collapsedIds) expanded.delete(id);
+
+    return expanded;
+  }, [nodes, collapsedIds]);
+  const rows = useMemo(
+    () => flattenTree(nodes, { expandedIds, flattenEmptyDirectories: true }),
+    [nodes, expandedIds],
+  );
+  const cursorIndex = Math.min(cursor, Math.max(0, rows.length - 1));
+
+  const toggle = (id: string): void =>
+    setCollapsedIds((current) => {
+      const next = new Set(current);
+
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+
+      return next;
+    });
+
+  useKeyboard((key) => {
+    if (!focused || rows.length === 0) return;
+    if (key.name === "j" || key.name === "down")
+      return setCursor(Math.min(cursorIndex + 1, rows.length - 1));
+    if (key.name === "k" || key.name === "up") return setCursor(Math.max(cursorIndex - 1, 0));
+    const row = rows[cursorIndex];
+    if (!row) return;
+    if (key.name === "tab" || key.name === "return" || key.name === "enter")
+      return row.isFolder ? toggle(row.id) : onSelectFile(row.id);
+    if (key.name === "l" && row.isFolder && collapsedIds.has(row.id)) return toggle(row.id);
+    if (key.name === "h" && row.isFolder && !collapsedIds.has(row.id)) return toggle(row.id);
+  });
+
+  return (
+    <ScrollArea>
+      <Tree
+        nodes={nodes}
+        expandedIds={expandedIds}
+        selectedId={focused ? rows[cursorIndex]?.id : selectedPath}
+        flattenEmptyDirectories
+        showStatus
+        onSelect={(id) => {
+          const index = rows.findIndex((row) => row.id === id);
+
+          if (index >= 0) setCursor(index);
+          onSelectFile(id);
+        }}
+        onToggle={toggle}
+        theme={theme}
+      />
+    </ScrollArea>
+  );
+}
+
+export function ChangesColumn({
+  open,
+  files = [],
+  selectedPath,
+  onSelectFile,
+  width = 32,
+  theme,
+}: ChangesColumnProps): React.ReactNode {
+  if (!open) return null;
+
+  return (
+    <box
+      style={{
+        width,
+        flexDirection: "column",
+        borderStyle: "single",
+        border: ["left"],
+        borderColor: theme?.border,
+      }}
+    >
+      <ChangesFileTree
+        files={files}
+        selectedPath={selectedPath}
+        onSelectFile={onSelectFile}
+        theme={theme}
+      />
+    </box>
+  );
+}

package/src/components/ChangesFileTree.test.tsx

@@ -0,0 +1,61 @@
+/** The changed-files tree navigates by keyboard when focused: j/k move the cursor, tab folds a folder
+ * or opens a file. */
+
+import { test, expect } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import type { DiffFileContents } from "@cueloop/schema";
+import { ChangesFileTree } from "./ChangesColumn";
+import { settle, waitForText } from "../test-support";
+import { DARK } from "../theme";
+
+const file = (path: string): DiffFileContents => ({
+  path,
+  oldContents: "",
+  newContents: "x",
+  status: "modified",
+});
+
+const files = [file("src/a.ts"), file("src/b.ts")];
+
+test("j moves onto a file and tab opens it", async () => {
+  const opened: string[] = [];
+  const setup = await testRender(
+    <ChangesFileTree
+      files={files}
+      onSelectFile={(path) => opened.push(path)}
+      focused
+      theme={DARK}
+    />,
+    { width: 40, height: 12 },
+  );
+  await settle(setup);
+  await waitForText(setup, "a.ts");
+
+  // folders open by default; cursor starts on the "src" folder, j steps onto a.ts
+  setup.mockInput.pressKey("j");
+  await settle(setup);
+  setup.mockInput.pressKey("TAB");
+  await settle(setup);
+
+  expect(opened).toEqual(["src/a.ts"]);
+
+  setup.renderer.destroy();
+});
+
+test("without focus the keyboard opens nothing", async () => {
+  const opened: string[] = [];
+  const setup = await testRender(
+    <ChangesFileTree files={files} onSelectFile={(path) => opened.push(path)} theme={DARK} />,
+    { width: 40, height: 12 },
+  );
+  await settle(setup);
+  await waitForText(setup, "a.ts");
+
+  setup.mockInput.pressKey("j");
+  setup.mockInput.pressKey("TAB");
+  await settle(setup);
+  expect(opened).toEqual([]);
+
+  setup.renderer.destroy();
+});

package/src/components/CodeBlock.stories.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { CodeBlock } from "./CodeBlock";
+
+export const meta: StoryMeta = { title: "Primitives/CodeBlock" };
+
+const SNIPPET = `export function gate(full: number) {
+  // threshold
+  return full < 0.6 ? "blocked" : "clear";
+}`;
+
+export const Typescript: Story = {
+  render: () => <CodeBlock language="ts" content={SNIPPET} />,
+  expectedColors: [DARK.elevated],
+};
+
+export const CursorAnnotatedEdited: Story = {
+  render: () => (
+    <CodeBlock
+      language="ts"
+      content={SNIPPET}
+      isCursor
+      isAnnotated
+      changeTag="edited"
+      marginTop={1}
+    />
+  ),
+  expectedColors: [DARK.accent],
+};
+
+export const UnknownLanguage: Story = {
+  render: () => (
+    <CodeBlock language="brainfog" content={"plain verbatim lines\n  with indentation"} />
+  ),
+};
+
+/** A cut code block: struck-through gray content, no [cut] tag. */
+export const Cut: Story = {
+  render: () => <CodeBlock language="ts" content={SNIPPET} cut />,
+  expectedColors: [DARK.elevated],
+};

package/src/components/CodeBlock.tsx

@@ -0,0 +1,84 @@
+/**
+ * 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 type { Theme } from "../theme";
+import { useComponentTheme } from "./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;
+  /** Markdown fence info string ("tsx", "python", ...). */
+  language?: string;
+  content: string;
+  isCursor?: boolean;
+  /** Vertical rhythm above the block. */
+  marginTop?: number;
+  isAnnotated?: boolean;
+  /** Working-copy change tag rendered after the language label. */
+  changeTag?: "new" | "edited";
+  /** A cut (removed) block: struck-through gray content, no tag. */
+  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 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)}
+            selectable={false}
+            style={{ wrapMode: "none", fg: tokens.textMuted, bg: tokens.elevated }}
+          />
+        )}
+      </box>
+    </box>
+  );
+}

package/src/components/CompletionOverlay.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { CompletionOverlay } from "./CompletionOverlay";
+
+export const meta: StoryMeta = { title: "Overlays/CompletionOverlay" };
+
+const noop = () => {};
+
+export const ApprovedPrompt: Story = {
+  render: () => (
+    <CompletionOverlay
+      message="approved"
+      completion={{ phase: "prompt" }}
+      status=""
+      onClose={noop}
+      onBackToPlan={noop}
+      onAlways={noop}
+    />
+  ),
+  expectedColors: [DARK.green],
+};
+
+export const FeedbackCounting: Story = {
+  render: () => (
+    <CompletionOverlay
+      message="changes_requested"
+      completion={{ phase: "counting", remaining: 3 }}
+      status="exported to vault/cueloop/plan.md"
+      returnsTo="agent/worker-3"
+      onClose={noop}
+      onBackToPlan={noop}
+      onAlways={noop}
+    />
+  ),
+  expectedColors: [DARK.accent],
+};

package/src/components/CompletionOverlay.tsx

@@ -0,0 +1,77 @@
+/**
+ * Post-submit hand-back overlay: the agent is unblocked, the reviewer either
+ * closes now, opts into auto-close, or dismisses back to the resolved view.
+ * The latest status line (e.g. the vault-export path) stays visible here.
+ */
+
+import React from "react";
+import type { MessageOutcome } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Toolbar } from "./primitives/Toolbar";
+import { Button } from "./primitives/Button";
+
+export interface CompletionOverlayProps {
+  message: MessageOutcome;
+  completion: { phase: "prompt" } | { phase: "counting"; remaining: number };
+  /** Latest status line (e.g. the vault-export path) stays visible here. */
+  status: string;
+  /** Where focus goes on close (the agent's pane), when known. */
+  returnsTo?: string;
+  onClose: () => void;
+  onBackToPlan: () => void;
+  onAlways: () => void;
+  theme?: Theme;
+}
+
+export function CompletionOverlay({
+  message,
+  completion,
+  status,
+  returnsTo,
+  onClose,
+  onBackToPlan,
+  onAlways,
+  theme,
+}: CompletionOverlayProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const approved = message === "approved";
+
+  return (
+    <box
+      style={{
+        width: "100%",
+        height: "100%",
+        backgroundColor: tokens.background,
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <text fg={approved ? tokens.green : tokens.accent}>
+        {approved ? "review approved" : "feedback sent"}
+      </text>
+      <text> </text>
+      <text fg={tokens.text}>
+        The agent has your {approved ? "approval" : "feedback"} and is unblocked.
+      </text>
+      {returnsTo ? <text fg={tokens.textDim}>returning to {returnsTo} on close</text> : null}
+      {status ? <text fg={tokens.textDim}>{status}</text> : null}
+      {completion.phase === "counting" ? (
+        <text fg={tokens.textDim}>closing in {completion.remaining}s</text>
+      ) : null}
+      <text> </text>
+      <Toolbar>
+        <Button variant="solid" marginRight={2} onPress={onClose} theme={theme}>
+          {" close "}
+        </Button>
+        <Button marginRight={2} onPress={onBackToPlan} theme={theme}>
+          {" back to plan "}
+        </Button>
+        <Button onPress={onAlways} theme={theme}>
+          {" always "}
+        </Button>
+      </Toolbar>
+    </box>
+  );
+}

package/src/components/ConfirmCard.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { DARK } from "../theme";
+import { DEFAULT_QUICK_ACTIONS } from "../config";
+import type { Story, StoryMeta } from "./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 },
+};