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

package/src/components/ProjectTreeView.test.tsx

@@ -0,0 +1,75 @@
+/** The Project 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 { ProjectTreeView } from "./ProjectTreeView";
+import { locateText, settle, waitForText } from "../test-support";
+import { DARK } from "../theme";
+
+test("tab expands a folder, then j moves down and tab opens the file", async () => {
+  const opened: string[] = [];
+  const setup = await testRender(
+    <ProjectTreeView
+      loadFiles={async () => ["src/a.ts", "README.md"]}
+      onSelectFile={(path) => opened.push(path)}
+      focused
+      theme={DARK}
+    />,
+    { width: 40, height: 12 },
+  );
+  await settle(setup);
+  await waitForText(setup, "src");
+
+  // cursor starts on the "src" folder; tab expands it
+  setup.mockInput.pressKey("TAB");
+  await waitForText(setup, "a.ts");
+
+  // j moves onto the file, tab opens it
+  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 does nothing", async () => {
+  const opened: string[] = [];
+  const setup = await testRender(
+    <ProjectTreeView
+      loadFiles={async () => ["src/a.ts"]}
+      onSelectFile={(path) => opened.push(path)}
+      theme={DARK}
+    />,
+    { width: 40, height: 12 },
+  );
+  await settle(setup);
+  await waitForText(setup, "src");
+
+  setup.mockInput.pressKey("TAB");
+  await settle(setup);
+  expect(setup.captureCharFrame()).not.toContain("a.ts");
+  expect(opened).toEqual([]);
+
+  setup.renderer.destroy();
+});
+
+test("the empty project hint stays centered in the panel", async () => {
+  const setup = await testRender(
+    <ProjectTreeView loadFiles={async () => []} onSelectFile={() => {}} theme={DARK} />,
+    { width: 40, height: 12 },
+  );
+
+  await waitForText(setup, "empty");
+  const position = locateText(setup, "empty");
+
+  expect(position.column).toBeGreaterThanOrEqual(17);
+  expect(position.column).toBeLessThanOrEqual(18);
+  expect(position.row).toBeGreaterThanOrEqual(5);
+  expect(position.row).toBeLessThanOrEqual(6);
+  setup.renderer.destroy();
+});

package/src/components/ProjectTreeView.tsx

@@ -0,0 +1,125 @@
+// The Project pane in tree mode: the workspace's tracked files as a collapsible directory tree.
+// Folders start collapsed and expand on click; a file click opens it as a tab. The caller keys this
+// on the session id so switching sessions remounts it and never shows the previous repository's paths.
+
+import { ScrollArea } from "./ScrollArea";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Tree } from "./primitives/Tree";
+import { flattenTree } from "./primitives/tree-model";
+import { buildPathTree } from "./file-tree";
+
+export interface ProjectTreeViewProps {
+  loadFiles: () => Promise<string[]>;
+  onSelectFile: (path: string) => void;
+  /** The pane owns the keyboard: j/k and arrows move the cursor, tab/enter open or fold. */
+  focused?: boolean;
+  theme?: Theme;
+}
+
+export function ProjectTreeView({
+  loadFiles,
+  onSelectFile,
+  focused = false,
+  theme,
+}: ProjectTreeViewProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const [paths, setPaths] = useState<readonly string[] | null>(null);
+  const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(new Set());
+  const [cursor, setCursor] = useState(0);
+  const nodes = useMemo(() => (paths ? buildPathTree(paths) : []), [paths]);
+  const rows = useMemo(() => flattenTree(nodes, { expandedIds }), [nodes, expandedIds]);
+  const cursorIndex = Math.min(cursor, Math.max(0, rows.length - 1));
+  const loadRef = useRef(loadFiles);
+  useEffect(() => {
+    loadRef.current = loadFiles;
+  });
+
+  const toggle = (id: string): void =>
+    setExpandedIds((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 && !expandedIds.has(row.id)) return toggle(row.id);
+    if (key.name === "h" && row.isFolder && expandedIds.has(row.id)) return toggle(row.id);
+  });
+
+  useEffect(() => {
+    let alive = true;
+    void loadRef.current().then(
+      (files) => {
+        if (alive) setPaths(files);
+      },
+      () => {
+        if (alive) setPaths([]);
+      },
+    );
+
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  if (paths === null) {
+    return (
+      <box
+        style={{
+          flexGrow: 1,
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <text fg={tokens.textDim}>loading...</text>
+      </box>
+    );
+  }
+  if (paths.length === 0) {
+    return (
+      <box
+        style={{
+          flexGrow: 1,
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <text fg={tokens.textDim}>empty</text>
+      </box>
+    );
+  }
+
+  return (
+    <ScrollArea>
+      <Tree
+        nodes={nodes}
+        expandedIds={expandedIds}
+        selectedId={focused ? rows[cursorIndex]?.id : undefined}
+        onSelect={(id) => {
+          const index = rows.findIndex((row) => row.id === id);
+
+          if (index >= 0) setCursor(index);
+          onSelectFile(id);
+        }}
+        onToggle={toggle}
+        theme={theme}
+      />
+    </ScrollArea>
+  );
+}

package/src/components/PromptDialog.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { PromptDialog } from "./PromptDialog";
+
+export const meta: StoryMeta = { title: "Overlays/PromptDialog" };
+
+export const RenameAuthor: Story = {
+  render: () => (
+    <PromptDialog
+      isOpen
+      title=" Rename author "
+      label="Display name for this collaborator:"
+      value="Robin"
+      placeholder="their name"
+      onInput={() => {}}
+    />
+  ),
+  expectedColors: [DARK.elevated, DARK.accent],
+  size: { width: 64, height: 16 },
+};
+
+export const NameYourself: Story = {
+  render: () => (
+    <PromptDialog
+      isOpen
+      title=" Welcome "
+      label="Your name (optional) - it attributes the notes you leave:"
+      value=""
+      placeholder="your name"
+      onInput={() => {}}
+    />
+  ),
+  expectedColors: [DARK.elevated],
+  size: { width: 64, height: 16 },
+};

package/src/components/PromptDialog.test.tsx

@@ -0,0 +1,61 @@
+/** The prompt dialog's footer actions are mouse-clickable: clicking "save" commits and "cancel"
+ * dismisses, the same as pressing enter or esc. */
+
+import { test, expect } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { PromptDialog } from "./PromptDialog";
+import { locateText, settle, typeText } from "../test-support";
+import { DARK } from "../theme";
+
+test("the input is focused on open, so typing lands in the dialog", async () => {
+  const inputs: string[] = [];
+  const setup = await testRender(
+    <PromptDialog
+      isOpen
+      title=" rename thread "
+      label="new title for this thread:"
+      value="hi"
+      onInput={(text) => inputs.push(text)}
+      theme={DARK}
+    />,
+    { width: 60, height: 12 },
+  );
+  await settle(setup);
+
+  await typeText(setup, "!");
+  expect(inputs.at(-1)).toBe("hi!");
+
+  setup.renderer.destroy();
+});
+
+test("clicking save fires onSave and clicking cancel fires onCancel", async () => {
+  let saved = 0;
+  let cancelled = 0;
+  const setup = await testRender(
+    <PromptDialog
+      isOpen
+      title=" rename thread "
+      label="new title for this thread:"
+      value="a title"
+      onInput={() => {}}
+      onSave={() => (saved += 1)}
+      onCancel={() => (cancelled += 1)}
+      theme={DARK}
+    />,
+    { width: 60, height: 12 },
+  );
+  await settle(setup);
+
+  const save = locateText(setup, "save");
+  await setup.mockMouse.click(save.column, save.row);
+  expect(saved).toBe(1);
+  expect(cancelled).toBe(0);
+
+  const cancel = locateText(setup, "cancel");
+  await setup.mockMouse.click(cancel.column, cancel.row);
+  expect(cancelled).toBe(1);
+  expect(saved).toBe(1);
+
+  setup.renderer.destroy();
+});

package/src/components/PromptDialog.tsx

@@ -0,0 +1,99 @@
+/**
+ * A centered single-field text prompt on the shared Dialog overlay. The focused
+ * input owns typing/cursor natively; the reducer's `prompt` overlay drives ⏎
+ * save / esc cancel (like the composer). Used to rename an author and to ask a
+ * collaborator for their name.
+ */
+
+import React, { useEffect, useRef } from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { KeyBinding, TextareaRenderable } from "@opentui/core";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Dialog } from "./primitives/Dialog";
+import { DialogActions } from "./primitives/DialogActions";
+
+// ⏎ submits (suppresses the textarea's default newline); the grammar owns save.
+const PROMPT_KEY_BINDINGS: KeyBinding[] = [{ name: "return", action: "submit" }];
+
+export interface PromptDialogProps {
+  isOpen: boolean;
+  title?: string;
+  label?: string;
+  value: string;
+  placeholder?: string;
+  onInput: (text: string) => void;
+  onSave?: () => void;
+  onCancel?: () => void;
+  theme?: Theme;
+}
+
+export function PromptDialog({
+  isOpen,
+  title,
+  label,
+  value,
+  placeholder,
+  onInput,
+  onSave,
+  onCancel,
+  theme,
+}: PromptDialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth } = useTerminalDimensions();
+  const inputRef = useRef<TextareaRenderable | null>(null);
+
+  useEffect(() => {
+    if (!inputRef.current) return;
+    inputRef.current.focus();
+    inputRef.current.cursorOffset = value.length;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  if (!isOpen) return null;
+
+  return (
+    <Dialog
+      isOpen
+      title={title}
+      width={Math.min(54, terminalWidth - 6)}
+      height={7}
+      background={tokens.elevated}
+      onDismiss={onCancel}
+      theme={theme}
+    >
+      <box
+        style={{
+          flexDirection: "column",
+          flexGrow: 1,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+        }}
+      >
+        {label ? <text fg={tokens.textDim}>{label}</text> : null}
+        <textarea
+          ref={inputRef}
+          focused
+          initialValue={value}
+          placeholder={placeholder}
+          keyBindings={PROMPT_KEY_BINDINGS}
+          onContentChange={() => onInput(inputRef.current?.plainText ?? "")}
+          style={{
+            height: 1,
+            backgroundColor: tokens.elevated,
+            focusedBackgroundColor: tokens.elevated,
+            textColor: tokens.text,
+            focusedTextColor: tokens.text,
+          }}
+        />
+        <box style={{ flexGrow: 1 }} />
+        <DialogActions
+          confirmLabel="save"
+          onConfirm={() => onSave?.()}
+          onCancel={() => onCancel?.()}
+          theme={theme}
+        />
+      </box>
+    </Dialog>
+  );
+}

package/src/components/PrototypeContentView.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { PrototypeContentView } from "./PrototypeContentView";
+
+export const meta: StoryMeta = { title: "Surfaces/PrototypeContentView" };
+
+// The story renderer reports no kitty graphics, so the view shows its fallback.
+export const Unsupported: Story = {
+  render: () => (
+    <PrototypeContentView
+      prototypePath="/tmp/example.html"
+      canComment={true}
+      onCommentElement={() => {}}
+    />
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 80, height: 24 },
+};