@cueloop/client 0.1.0-alpha.7 → 0.1.0-alpha.71

package/src/components/PanelColumn.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { PanelColumn, FileTab } from "./PanelColumn";
+
+export const meta: StoryMeta = { title: "Surfaces/PanelColumn" };
+
+export const WithFileTab: Story = {
+  render: () => (
+    <box style={{ width: "100%", height: "100%", flexDirection: "row" }}>
+      <PanelColumn
+        width={40}
+        border="left"
+        header={<FileTab label="Welcome" active onClose={() => {}} theme={DARK} />}
+        theme={DARK}
+      >
+        <box style={{ paddingLeft: 1, paddingTop: 1 }}>
+          <text fg={DARK.textDim}>panel body</text>
+        </box>
+      </PanelColumn>
+    </box>
+  ),
+  expectedColors: [DARK.accent, DARK.border],
+  size: { width: 50, height: 8 },
+};

package/src/components/PanelColumn.tsx

@@ -0,0 +1,95 @@
+// A workbench panel: one full-height grid column with a file-tab header cell on
+// top and a body below. The header row carries the tabs on the left and optional
+// controls on the right, underlined by a thin rule in the same divider gray so the
+// header bottoms join the side rules into one grid. The side border runs from the top.
+
+import React, { useState } from "react";
+import type { Theme } from "../theme";
+import { NERD, HEADER_UNDERLINE_CHARS } from "./primitives/icons";
+
+export interface FileTabProps {
+  label: string;
+  active?: boolean;
+  /** When set, a close control reveals on hover (a disposable tab). */
+  onClose?: () => void;
+  theme?: Theme;
+}
+
+/** A file tab: the label in the accent when active, with a hover-revealed close. */
+export function FileTab({ label, active, onClose, theme }: FileTabProps): React.ReactNode {
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <box
+      style={{ flexDirection: "row", paddingRight: 1 }}
+      onMouseOver={() => setHovered(true)}
+      onMouseOut={() => setHovered(false)}
+    >
+      <text fg={active ? theme?.accent : theme?.textDim}>{label}</text>
+      {onClose ? (
+        <box onMouseUp={onClose} style={{ paddingLeft: 1 }}>
+          <text fg={theme?.textDim}>{hovered ? NERD.close : " "}</text>
+        </box>
+      ) : null}
+    </box>
+  );
+}
+
+export interface PanelColumnProps {
+  /** Fixed column width; omit for the flex-growing center panel. */
+  width?: number;
+  /** Draw the divider on this side (the sidebar borders right, the rest border left). */
+  border?: "left" | "right";
+  /** Tabs and controls for the header cell. */
+  header: React.ReactNode;
+  /** Right-aligned header controls (toggles, search). */
+  headerRight?: React.ReactNode;
+  children: React.ReactNode;
+  theme?: Theme;
+}
+
+export function PanelColumn({
+  width,
+  border,
+  header,
+  headerRight,
+  children,
+  theme,
+}: PanelColumnProps): React.ReactNode {
+  return (
+    <box
+      style={{
+        width,
+        // grow panes split evenly and clip wide content (a long diff line) rather than stretching
+        flexGrow: width === undefined ? 1 : undefined,
+        flexBasis: width === undefined ? 0 : undefined,
+        minWidth: 0,
+        flexDirection: "column",
+        borderStyle: "single",
+        border: border ? [border] : [],
+        borderColor: theme?.border,
+      }}
+    >
+      <box
+        customBorderChars={HEADER_UNDERLINE_CHARS}
+        style={{
+          flexDirection: "row",
+          height: 2,
+          paddingLeft: 1,
+          // right controls need the same breathing room as the left, or the rightmost icon renders
+          // squeezed against the terminal's last column
+          paddingRight: 1,
+          backgroundColor: theme?.panel,
+          borderStyle: "single",
+          border: ["bottom"],
+          borderColor: theme?.border,
+        }}
+      >
+        {header}
+        <box style={{ flexGrow: 1 }} />
+        {headerRight}
+      </box>
+      <box style={{ flexGrow: 1, flexDirection: "column" }}>{children}</box>
+    </box>
+  );
+}

package/src/components/ProjectTreeView.stories.tsx

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

package/src/components/ProjectTreeView.test.tsx

@@ -0,0 +1,32 @@
+import { expect, test } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { ProjectTreeView } from "./ProjectTreeView";
+import { clickText, waitForText } from "../test-support";
+import { DARK } from "../theme";
+
+test("renders the loaded files as a tree and opens a file on click", async () => {
+  const opened: string[] = [];
+  const setup = await testRender(
+    <ProjectTreeView
+      loadFiles={() => Promise.resolve(["src/App.tsx", "README.md"])}
+      onSelectFile={(path) => opened.push(path)}
+      theme={DARK}
+    />,
+    { width: 40, height: 16 },
+  );
+
+  await waitForText(setup, "README.md");
+  await clickText(setup, "README.md");
+
+  expect(opened).toContain("README.md");
+});
+
+test("shows an empty hint when there are no files", async () => {
+  const setup = await testRender(
+    <ProjectTreeView loadFiles={() => Promise.resolve([])} onSelectFile={() => {}} theme={DARK} />,
+    { width: 40, height: 8 },
+  );
+
+  await waitForText(setup, "empty");
+});

package/src/components/ProjectTreeView.tsx

@@ -0,0 +1,83 @@
+// 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 type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Tree } from "./primitives/Tree";
+import { buildPathTree } from "./file-tree";
+
+export interface ProjectTreeViewProps {
+  loadFiles: () => Promise<string[]>;
+  onSelectFile: (path: string) => void;
+  theme?: Theme;
+}
+
+export function ProjectTreeView({
+  loadFiles,
+  onSelectFile,
+  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 nodes = useMemo(() => (paths ? buildPathTree(paths) : []), [paths]);
+  const loadRef = useRef(loadFiles);
+  useEffect(() => {
+    loadRef.current = loadFiles;
+  });
+
+  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, paddingLeft: 1, paddingTop: 1 }}>
+        <text fg={tokens.textDim}>loading...</text>
+      </box>
+    );
+  }
+  if (paths.length === 0) {
+    return (
+      <box style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 1 }}>
+        <text fg={tokens.textDim}>empty</text>
+      </box>
+    );
+  }
+
+  return (
+    <ScrollArea>
+      <Tree
+        nodes={nodes}
+        expandedIds={expandedIds}
+        onSelect={onSelectFile}
+        onToggle={(id) =>
+          setExpandedIds((current) => {
+            const next = new Set(current);
+
+            if (next.has(id)) next.delete(id);
+            else next.add(id);
+
+            return next;
+          })
+        }
+        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.tsx

@@ -0,0 +1,87 @@
+/**
+ * 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";
+
+// ⏎ 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;
+  theme?: Theme;
+}
+
+export function PromptDialog({
+  isOpen,
+  title,
+  label,
+  value,
+  placeholder,
+  onInput,
+  theme,
+}: PromptDialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth } = useTerminalDimensions();
+  const inputRef = useRef<TextareaRenderable | null>(null);
+
+  useEffect(() => {
+    // open with the caret after the seeded value, like a text field
+    if (inputRef.current) 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}
+      theme={theme}
+    >
+      <box
+        style={{
+          flexDirection: "column",
+          flexGrow: 1,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+        }}
+      >
+        <text fg={tokens.textDim}>{label}</text>
+        <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 }} />
+        <text fg={tokens.textDim}>enter save · esc cancel</text>
+      </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 },
+};