@cueloop/client 0.1.0-alpha.8 → 0.1.0-alpha.80

package/src/components/OverlayScrollbar.tsx

@@ -0,0 +1,129 @@
+/**
+ * A one-cell vertical scrollbar that mirrors a scrollbox's scroll state, so the bar can sit
+ * where the layout wants it (the panel's rightmost column, past the discussion dots) instead
+ * of inside the scrollbox's own viewport row. It is an overlay: the thumb appears while the
+ * surface is scrolling and hides once scrolling has been idle, so a resting surface shows none.
+ */
+
+import React, { useEffect, useRef, useState, type RefObject } from "react";
+import type { BoxRenderable, ScrollBoxRenderable } from "@opentui/core";
+import type { Theme } from "../theme";
+import { useFrameMeasure } from "../use-frame-measure";
+import { useComponentTheme } from "./theme-context";
+
+const HIDE_DELAY_MS = 1500;
+
+interface ScrollState {
+  top: number;
+  height: number;
+  viewport: number;
+}
+
+export interface ThumbGeometry {
+  row: number;
+  height: number;
+}
+
+export function thumbGeometry(state: ScrollState, track: number): ThumbGeometry | null {
+  if (track <= 0 || state.height <= state.viewport || state.viewport <= 0) return null;
+  const height = Math.max(1, Math.round((state.viewport / state.height) * track));
+  const maxTop = state.height - state.viewport;
+  const row = Math.round((state.top / maxTop) * (track - height));
+
+  return { row: Math.min(track - height, Math.max(0, row)), height };
+}
+
+export interface OverlayScrollbarProps {
+  scrollbox: RefObject<ScrollBoxRenderable | null>;
+  theme?: Theme;
+}
+
+export function OverlayScrollbar({ scrollbox, theme }: OverlayScrollbarProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const trackRef = useRef<BoxRenderable | null>(null);
+  const [visible, setVisible] = useState(false);
+  const draggingRef = useRef(false);
+  const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const prevTopRef = useRef<number | null>(null);
+
+  const state = useFrameMeasure<ScrollState>(
+    () => ({
+      top: scrollbox.current?.scrollTop ?? 0,
+      height: scrollbox.current?.scrollHeight ?? 0,
+      viewport: scrollbox.current?.viewport.height ?? 0,
+    }),
+    (left, right) =>
+      left.top === right.top && left.height === right.height && left.viewport === right.viewport,
+    { top: 0, height: 0, viewport: 0 },
+  );
+  const track = useFrameMeasure(
+    () => trackRef.current?.height ?? 0,
+    (left, right) => left === right,
+    0,
+  );
+
+  const reveal = (): void => {
+    setVisible(true);
+    if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+    hideTimerRef.current = setTimeout(() => {
+      if (!draggingRef.current) setVisible(false);
+    }, HIDE_DELAY_MS);
+  };
+
+  // reveal on real scroll movement, never on first mount, then hide once idle
+  useEffect(() => {
+    if (prevTopRef.current !== null && state.top !== prevTopRef.current) reveal();
+    prevTopRef.current = state.top;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.top]);
+
+  useEffect(
+    () => () => {
+      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+    },
+    [],
+  );
+
+  const geometry = thumbGeometry(state, track);
+  const thumb = visible ? geometry : null;
+
+  const scrollToTrackRow = (screenY: number): void => {
+    const box = scrollbox.current;
+
+    if (!box || !geometry) return;
+    const row = screenY - (trackRef.current?.y ?? 0) - Math.floor(geometry.height / 2);
+    const ratio = Math.min(1, Math.max(0, row / Math.max(1, track - geometry.height)));
+
+    box.scrollTo(Math.round(ratio * (state.height - state.viewport)));
+    reveal();
+  };
+
+  return (
+    <box
+      ref={trackRef}
+      style={{ width: 1, flexShrink: 0, flexDirection: "column" }}
+      onMouseDown={(event) => {
+        draggingRef.current = true;
+        scrollToTrackRow(event.y);
+      }}
+      onMouseDrag={(event) => scrollToTrackRow(event.y)}
+      onMouseUp={() => {
+        draggingRef.current = false;
+        reveal();
+      }}
+    >
+      {thumb ? (
+        <box
+          style={{
+            position: "absolute",
+            top: thumb.row,
+            left: 0,
+            width: 1,
+            height: thumb.height,
+            backgroundColor: tokens.textDim,
+          }}
+        />
+      ) : null}
+    </box>
+  );
+}

package/src/components/PaneGrid.stories.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { PaneGrid } from "./PaneGrid";
+
+export const meta: StoryMeta = { title: "Layout/PaneGrid" };
+
+function Sidebar(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.textDim}>Projects</text>
+      <text fg={DARK.text}> cueloop</text>
+      <box style={{ backgroundColor: DARK.elevated }}>
+        <text fg={DARK.accent}> Read Cueloop Repository</text>
+      </box>
+      <text> </text>
+      <text fg={DARK.textDim}>Threads</text>
+      <text fg={DARK.textMuted}> Welcome to cueloop</text>
+    </box>
+  );
+}
+
+function Main(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.text}>read the repo</text>
+      <text> </text>
+      <text fg={DARK.textMuted}>Repository context loaded. main is clean.</text>
+      <text> </text>
+      <text fg={DARK.text}>Core architecture</text>
+      <text fg={DARK.textMuted}> - packages/schema is the dependency root</text>
+      <text fg={DARK.textMuted}> - packages/daemon owns session state</text>
+    </box>
+  );
+}
+
+function Inspector(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <text fg={DARK.text}>cueloop/main</text>
+      <text fg={DARK.textDim}> No changes</text>
+    </box>
+  );
+}
+
+function Header(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", paddingLeft: 1 }}>
+      <text fg={DARK.textMuted}>Read Cueloop Repository</text>
+      <box style={{ flexGrow: 1 }} />
+      <text fg={DARK.textDim}>markdown.test.ts</text>
+    </box>
+  );
+}
+
+function Footer(): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", paddingLeft: 1 }}>
+      <text fg={DARK.textDim}>cueloop / main</text>
+      <box style={{ flexGrow: 1 }} />
+      <text fg={DARK.textDim}>Fable 5</text>
+    </box>
+  );
+}
+
+export const ThreePane: Story = {
+  render: () => (
+    <PaneGrid
+      sidebar={<Sidebar />}
+      main={<Main />}
+      mainHeader={<Header />}
+      inspector={<Inspector />}
+      footer={<Footer />}
+    />
+  ),
+  expectedColors: [DARK.border, DARK.accent],
+  size: { width: 120, height: 28 },
+};
+
+export const SidebarAndMain: Story = {
+  render: () => <PaneGrid sidebar={<Sidebar />} main={<Main />} />,
+  expectedColors: [DARK.border],
+  size: { width: 90, height: 20 },
+};

package/src/components/PaneGrid.tsx

@@ -0,0 +1,128 @@
+// A generic pane grid: a row of columns, each stacking a header cell over its body, with the
+// vertical rules run full height and every header cell's bottom rule joined into one horizontal
+// line. Rules only - no enclosing frames. This is the layout primitive for dev surfaces (the
+// storybook runner); the product's four-pane workbench is AppShell.
+
+import React from "react";
+import { DARK, type Theme } from "../theme";
+import type { BorderSides } from "@opentui/core";
+
+export interface PaneGridProps {
+  headerHeight?: number;
+  sidebar?: React.ReactNode;
+  sidebarHeader?: React.ReactNode;
+  sidebarWidth?: number;
+  main: React.ReactNode;
+  mainHeader?: React.ReactNode;
+  inspector?: React.ReactNode;
+  inspectorHeader?: React.ReactNode;
+  inspectorWidth?: number;
+  footer?: React.ReactNode;
+  theme?: Theme;
+}
+
+interface PaneColumnProps {
+  width?: number;
+  grow?: boolean;
+  side?: BorderSides;
+  header: React.ReactNode;
+  body: React.ReactNode;
+  headerHeight: number;
+  theme: Theme;
+}
+
+function PaneColumn({
+  width,
+  grow,
+  side,
+  header,
+  body,
+  headerHeight,
+  theme,
+}: PaneColumnProps): React.ReactNode {
+  return (
+    <box
+      style={{
+        flexDirection: "column",
+        ...(grow ? { flexGrow: 1 } : { width }),
+        borderStyle: "single",
+        border: side ? [side] : [],
+        borderColor: theme.border,
+      }}
+    >
+      <box
+        style={{
+          height: headerHeight,
+          borderStyle: "single",
+          border: ["bottom"],
+          borderColor: theme.border,
+        }}
+      >
+        {header}
+      </box>
+      <box style={{ flexGrow: 1 }}>{body}</box>
+    </box>
+  );
+}
+
+export function PaneGrid({
+  headerHeight = 3,
+  sidebar,
+  sidebarHeader,
+  sidebarWidth = 28,
+  main,
+  mainHeader,
+  inspector,
+  inspectorHeader,
+  inspectorWidth = 40,
+  footer,
+  theme,
+}: PaneGridProps): React.ReactNode {
+  const tokens = theme ?? DARK;
+
+  return (
+    <box
+      style={{
+        flexDirection: "column",
+        width: "100%",
+        height: "100%",
+        backgroundColor: tokens.background,
+      }}
+    >
+      <box style={{ flexDirection: "row", flexGrow: 1 }}>
+        {sidebar !== undefined ? (
+          <PaneColumn
+            width={sidebarWidth}
+            side="right"
+            header={sidebarHeader}
+            body={sidebar}
+            headerHeight={headerHeight}
+            theme={tokens}
+          />
+        ) : null}
+        <PaneColumn
+          grow
+          header={mainHeader}
+          body={main}
+          headerHeight={headerHeight}
+          theme={tokens}
+        />
+        {inspector !== undefined ? (
+          <PaneColumn
+            width={inspectorWidth}
+            side="left"
+            header={inspectorHeader}
+            body={inspector}
+            headerHeight={headerHeight}
+            theme={tokens}
+          />
+        ) : null}
+      </box>
+      {footer !== undefined ? (
+        <box style={{ borderStyle: "single", border: ["top"], borderColor: tokens.border }}>
+          {footer}
+        </box>
+      ) : null}
+    </box>
+  );
+}

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,98 @@
+// 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;
+  onFocus?: () => void;
+  children: React.ReactNode;
+  theme?: Theme;
+}
+
+export function PanelColumn({
+  width,
+  border,
+  header,
+  headerRight,
+  onFocus,
+  children,
+  theme,
+}: PanelColumnProps): React.ReactNode {
+  return (
+    <box
+      onMouseDown={onFocus}
+      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,59 @@
+/** 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 { 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();
+});

package/src/components/ProjectTreeView.tsx

@@ -0,0 +1,111 @@
+// 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, 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}
+        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 },
+};