@cueloop/client 0.1.0-alpha.5 → 0.1.0-alpha.51

package/src/components/primitives/Dialog.stories.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../story";
+import { Dialog } from "./Dialog";
+
+export const meta: StoryMeta = { title: "primitives/Dialog" };
+
+export const Open: Story = {
+  render: () => (
+    <Dialog isOpen title=" a modal " width={40} height={8}>
+      <text>dialog body content</text>
+    </Dialog>
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 60, height: 16 },
+};
+
+export const Closed: Story = {
+  render: () => (
+    <Dialog isOpen={false} title=" hidden " width={40} height={8}>
+      <text>never rendered</text>
+    </Dialog>
+  ),
+};

package/src/components/primitives/Dialog.tsx

@@ -0,0 +1,64 @@
+/**
+ * Centered modal: a full-screen layer (backdrop token, transparent by
+ * default) centers a bordered, unpainted panel over the session - the frame
+ * delineates the dialog, the content behind stays visible.
+ * `isOpen` keeps the mount decision with the caller-visible prop vocabulary.
+ */
+
+import React from "react";
+import type { Theme } from "../../theme";
+import { useComponentTheme } from "../theme-context";
+import { FRAME_BORDER_STYLE } from "./frame";
+
+export interface DialogProps {
+  isOpen: boolean;
+  title?: string;
+  width: number;
+  height: number;
+  /** Solid panel fill for content-heavy dialogs; default transparent. */
+  background?: string;
+  theme?: Theme;
+  children: React.ReactNode;
+}
+
+export function Dialog({
+  isOpen,
+  title,
+  width,
+  height,
+  background,
+  theme,
+  children,
+}: DialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  if (!isOpen) return null;
+  return (
+    <box
+      style={{
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: "100%",
+        height: "100%",
+        backgroundColor: tokens.backdrop,
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <box
+        style={{
+          width,
+          height,
+          border: true,
+          borderStyle: FRAME_BORDER_STYLE,
+          borderColor: tokens.accent,
+          backgroundColor: background,
+          flexDirection: "column",
+        }}
+        title={title}
+      >
+        {children}
+      </box>
+    </box>
+  );
+}

package/src/components/primitives/StatusBar.stories.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../story";
+import { StatusBar } from "./StatusBar";
+
+export const meta: StoryMeta = { title: "primitives/StatusBar" };
+
+export const HintLine: Story = {
+  render: () => <StatusBar>j/k move · v span · c comment · q quit</StatusBar>,
+  expectedColors: [DARK.textDim],
+};

package/src/components/primitives/StatusBar.tsx

@@ -0,0 +1,22 @@
+/**
+ * One-row panel bar for the status/hint line. Content renders as dim text;
+ * callers pass richer spans as children when a segment needs another tone.
+ */
+
+import React from "react";
+import type { Theme } from "../../theme";
+import { useComponentTheme } from "../theme-context";
+
+export interface StatusBarProps {
+  theme?: Theme;
+  children: React.ReactNode;
+}
+
+export function StatusBar({ theme, children }: StatusBarProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  return (
+    <box style={{ height: 1, backgroundColor: tokens.panel, paddingLeft: 1 }}>
+      <text fg={tokens.textDim}>{children}</text>
+    </box>
+  );
+}

package/src/components/primitives/Tabs.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../story";
+import { Tab, TabList, Tabs } from "./Tabs";
+
+export const meta: StoryMeta = { title: "primitives/Tabs" };
+
+export const TwoTabs: Story = {
+  render: () => (
+    <Tabs selectedKey="review" onSelectionChange={() => {}}>
+      <TabList>
+        <Tab id="review">Review (2)</Tab>
+        <Tab id="agent">Agent</Tab>
+      </TabList>
+    </Tabs>
+  ),
+  expectedColors: [DARK.accent, DARK.textDim],
+};
+
+export const SecondSelected: Story = {
+  render: () => (
+    <Tabs selectedKey="agent" onSelectionChange={() => {}}>
+      <TabList>
+        <Tab id="review">Review (0)</Tab>
+        <Tab id="agent">Agent</Tab>
+      </TabList>
+    </Tabs>
+  ),
+};

package/src/components/primitives/Tabs.tsx

@@ -0,0 +1,98 @@
+/**
+ * Tabs / TabList / Tab: a transparent, full-width rounded strip of clickable
+ * text tabs. The composition follows the ARIA tabs pattern: Tabs owns the
+ * controlled selection (`selectedKey` + `onSelectionChange`), TabList renders
+ * the strip, Tab declares one item. Selection stays controlled from outside so
+ * the keyboard grammar remains the key owner; each tab click sets the key.
+ */
+
+import React, { createContext, useContext } from "react";
+import type { Theme } from "../../theme";
+import { useComponentTheme } from "../theme-context";
+import { FRAME_BORDER_STYLE } from "./frame";
+
+interface TabsContextValue {
+  selectedKey: string;
+  onSelectionChange: (key: string) => void;
+  /** Text color of the selected tab; defaults to the accent token. */
+  selectedColor?: string;
+  theme?: Theme;
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+export interface TabsProps {
+  selectedKey: string;
+  onSelectionChange: (key: string) => void;
+  selectedColor?: string;
+  theme?: Theme;
+  children: React.ReactNode;
+}
+
+export function Tabs({
+  selectedKey,
+  onSelectionChange,
+  selectedColor,
+  theme,
+  children,
+}: TabsProps): React.ReactNode {
+  return (
+    <TabsContext.Provider value={{ selectedKey, onSelectionChange, selectedColor, theme }}>
+      {children}
+    </TabsContext.Provider>
+  );
+}
+
+export interface TabProps {
+  id: string;
+  children: string;
+}
+
+/** Declarative item: TabList collects Tab children into the native strip. */
+export function Tab(_props: TabProps): React.ReactNode {
+  return null;
+}
+
+export interface TabListProps {
+  children: React.ReactNode;
+}
+
+export function TabList({ children }: TabListProps): React.ReactNode {
+  const tabs = useContext(TabsContext);
+  if (!tabs) throw new Error("TabList must render inside Tabs");
+  const tokens = useComponentTheme(tabs.theme);
+  const items: { id: string; label: string }[] = [];
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement<TabProps>(child) && typeof child.props.id === "string") {
+      items.push({ id: child.props.id, label: child.props.children });
+    }
+  });
+  return (
+    <box
+      style={{
+        width: "100%",
+        height: 3,
+        border: true,
+        borderStyle: FRAME_BORDER_STYLE,
+        borderColor: tokens.text,
+        flexDirection: "row",
+        paddingLeft: 1,
+      }}
+    >
+      {items.map((item) => {
+        const selected = item.id === tabs.selectedKey;
+        return (
+          <box
+            key={item.id}
+            style={{ marginRight: 2 }}
+            onMouseUp={() => tabs.onSelectionChange(item.id)}
+          >
+            <text fg={selected ? (tabs.selectedColor ?? tokens.accent) : tokens.textDim}>
+              {item.label}
+            </text>
+          </box>
+        );
+      })}
+    </box>
+  );
+}

package/src/components/primitives/Toolbar.stories.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import type { Story, StoryMeta } from "../story";
+import { Button } from "./Button";
+import { Toolbar } from "./Toolbar";
+
+export const meta: StoryMeta = { title: "primitives/Toolbar" };
+
+export const ActionRow: Story = {
+  render: () => (
+    <Toolbar>
+      <Button variant="solid" marginRight={2} onPress={() => {}}>
+        {" Submit "}
+      </Button>
+      <Button onPress={() => {}}>{" Cancel "}</Button>
+    </Toolbar>
+  ),
+};

package/src/components/primitives/Toolbar.tsx

@@ -0,0 +1,14 @@
+/**
+ * Horizontal action row: children flow left to right on one row. The classic
+ * home of Button groups (Save/Cancel, Submit/Cancel).
+ */
+
+import React from "react";
+
+export interface ToolbarProps {
+  children: React.ReactNode;
+}
+
+export function Toolbar({ children }: ToolbarProps): React.ReactNode {
+  return <box style={{ flexDirection: "row", height: 1 }}>{children}</box>;
+}

package/src/components/primitives/frame.test.ts

@@ -0,0 +1,12 @@
+/**
+ * Locks the single frame border rule: every bordered frame reads this token,
+ * so a regression to square corners (or any other style) fails here first,
+ * before the slower VRT snapshots catch it. Decision: rounded (issue #116).
+ */
+
+import { expect, test } from "bun:test";
+import { FRAME_BORDER_STYLE } from "./frame";
+
+test("frames use the rounded border style", () => {
+  expect(FRAME_BORDER_STYLE).toBe("rounded");
+});

package/src/components/primitives/frame.ts

@@ -0,0 +1,14 @@
+/**
+ * The one frame border rule for the design system. Every bordered frame -
+ * cards, dialogs, and the stories gallery chrome - reads its corner style
+ * from FRAME_BORDER_STYLE, so the rounded-corner decision lives in a single
+ * place and can never drift between frames. Buttons stay text-first and
+ * borderless: the frame they sit in carries the border, not the button.
+ *
+ * Decision: rounded on the frames, not on the buttons (issue #116).
+ */
+
+import type { BorderStyle } from "@opentui/core";
+
+/** Corner style shared by every bordered frame in the app. */
+export const FRAME_BORDER_STYLE: BorderStyle = "rounded";

package/src/components/quick-actions-editor.stories.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { DARK } from "../theme";
+import { DEFAULT_QUICK_ACTIONS } from "../config";
+import type { Story, StoryMeta } from "./story";
+import { QuickActionsEditor } from "./quick-actions-editor";
+
+export const meta: StoryMeta = { title: "QuickActionsEditor" };
+
+/** The editor renders inside the settings body column. */
+function BodyFrame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return (
+    <box style={{ width: 54, height: 22, paddingLeft: 2, backgroundColor: DARK.elevated }}>
+      {children}
+    </box>
+  );
+}
+
+const noop = () => {};
+
+export const Collapsed: Story = {
+  render: () => (
+    <BodyFrame>
+      <QuickActionsEditor
+        actions={DEFAULT_QUICK_ACTIONS}
+        selectedIndex={0}
+        expandedIndex={null}
+        onToggleExpand={noop}
+        onEditMetadata={noop}
+        onReset={noop}
+        onAdd={noop}
+        theme={DARK}
+      />
+    </BodyFrame>
+  ),
+  size: { width: 54, height: 22 },
+};
+
+export const RowExpanded: Story = {
+  render: () => (
+    <BodyFrame>
+      <QuickActionsEditor
+        actions={DEFAULT_QUICK_ACTIONS}
+        selectedIndex={1}
+        expandedIndex={1}
+        onToggleExpand={noop}
+        onEditMetadata={noop}
+        onReset={noop}
+        onAdd={noop}
+        theme={DARK}
+      />
+    </BodyFrame>
+  ),
+  size: { width: 54, height: 22 },
+};

package/src/components/quick-actions-editor.tsx

@@ -0,0 +1,136 @@
+/**
+ * The Settings "Actions" body: the quick-action vocabulary editor. Each row is a
+ * clickable prompt; the selected-and-expanded row reveals a focused input for the
+ * per-action system prompt (the extra guidance appended when the action is used).
+ * A reset-to-defaults control and an add-action row bracket the list. Controlled:
+ * the app owns the actions, the selection, and which row is expanded.
+ */
+
+import React, { useRef } from "react";
+import type { KeyBinding, TextareaRenderable } from "@opentui/core";
+import type { QuickAction } from "../config";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+
+// ⏎ never inserts a newline: a system prompt is one line, esc closes the editor.
+const ACTION_INPUT_KEY_BINDINGS: KeyBinding[] = [{ name: "return", action: "submit" }];
+
+export interface QuickActionsEditorProps {
+  actions: QuickAction[];
+  /** The highlighted row; equals the settings body row index. */
+  selectedIndex: number;
+  /** The row whose system-prompt input is open and focused, or null. */
+  expandedIndex: number | null;
+  /** Select and toggle a row's system-prompt input open/closed. */
+  onToggleExpand: (index: number) => void;
+  onEditMetadata: (index: number, metadata: string) => void;
+  onReset: () => void;
+  onAdd: () => void;
+  theme?: Theme;
+}
+
+export function QuickActionsEditor({
+  actions,
+  selectedIndex,
+  expandedIndex,
+  onToggleExpand,
+  onEditMetadata,
+  onReset,
+  onAdd,
+  theme,
+}: QuickActionsEditorProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  return (
+    <box style={{ flexDirection: "column", flexGrow: 1 }}>
+      <box style={{ flexDirection: "row" }}>
+        <box style={{ flexGrow: 1 }}>
+          <text fg={tokens.textDim}>click a prompt to edit its system prompt</text>
+        </box>
+        <box onMouseUp={onReset}>
+          <text fg={tokens.textDim}>reset to defaults ▸</text>
+        </box>
+      </box>
+      <box style={{ height: 1 }} />
+      {actions.map((action, index) => (
+        <ActionRow
+          key={index}
+          action={action}
+          isSelected={index === selectedIndex}
+          isExpanded={index === expandedIndex}
+          onToggleExpand={() => onToggleExpand(index)}
+          onEditMetadata={(metadata) => onEditMetadata(index, metadata)}
+          theme={theme}
+        />
+      ))}
+      <box
+        style={{ backgroundColor: selectedIndex === actions.length ? tokens.border : undefined }}
+        onMouseUp={onAdd}
+      >
+        <text fg={tokens.textMuted}>+ Add action</text>
+      </box>
+    </box>
+  );
+}
+
+function ActionRow({
+  action,
+  isSelected,
+  isExpanded,
+  onToggleExpand,
+  onEditMetadata,
+  theme,
+}: {
+  action: QuickAction;
+  isSelected: boolean;
+  isExpanded: boolean;
+  onToggleExpand: () => void;
+  onEditMetadata: (metadata: string) => void;
+  theme?: Theme;
+}): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const inputRef = useRef<TextareaRenderable | null>(null);
+  return (
+    <box style={{ flexDirection: "column" }}>
+      <box
+        style={{ backgroundColor: isSelected ? tokens.border : undefined }}
+        onMouseUp={onToggleExpand}
+      >
+        <text fg={isSelected ? tokens.text : tokens.textMuted}>
+          {`${isExpanded ? "▾ " : "▸ "}${action.prompt}`}
+        </text>
+      </box>
+      {isExpanded ? (
+        <box style={{ flexDirection: "row", paddingLeft: 2 }}>
+          <box style={{ width: 2, flexShrink: 0 }}>
+            <text fg={tokens.textDim}>{">"}</text>
+          </box>
+          <textarea
+            ref={inputRef}
+            focused
+            initialValue={action.metadata ?? ""}
+            placeholder="extra system prompt appended to this comment (optional)"
+            keyBindings={ACTION_INPUT_KEY_BINDINGS}
+            onContentChange={() => onEditMetadata(inputRef.current?.plainText ?? "")}
+            style={{
+              height: 1,
+              flexGrow: 1,
+              backgroundColor: tokens.elevated,
+              focusedBackgroundColor: tokens.elevated,
+              textColor: tokens.text,
+              focusedTextColor: tokens.text,
+            }}
+          />
+        </box>
+      ) : action.metadata ? (
+        <box style={{ paddingLeft: 2 }}>
+          <text fg={tokens.textDim}>{truncateMetadata(action.metadata)}</text>
+        </box>
+      ) : null}
+    </box>
+  );
+}
+
+/** A one-line preview of the system prompt under a collapsed row. */
+function truncateMetadata(metadata: string): string {
+  return metadata.length > 44 ? `${metadata.slice(0, 43)}…` : metadata;
+}

package/src/components/stories-app.tsx

@@ -0,0 +1,123 @@
+/**
+ * The interactive stories catalog (`bun run stories`): a left list of
+ * component modules (j/k), h/l cycling through the module's stories, and the
+ * selected story rendered live in the preview pane. The same story objects
+ * back the snapshot harness - what this TUI shows is what the tests assert.
+ */
+
+import React, { useMemo, useState } from "react";
+import { createCliRenderer } from "@opentui/core";
+import { createRoot, useKeyboard } from "@opentui/react";
+import { DARK } from "../theme";
+import { ThemeProvider } from "./theme-context";
+import { loadStories, type LoadedStory } from "./story";
+import { FRAME_BORDER_STYLE } from "./primitives/frame";
+
+function StoriesApp({
+  stories,
+  onExit,
+}: {
+  stories: LoadedStory[];
+  onExit: () => void;
+}): React.ReactNode {
+  const moduleTitles = useMemo(
+    () => [...new Set(stories.map((story) => story.moduleTitle))],
+    [stories],
+  );
+  const [moduleIndex, setModuleIndex] = useState(0);
+  const [storyIndex, setStoryIndex] = useState(0);
+  const moduleTitle = moduleTitles[moduleIndex]!;
+  const moduleStories = stories.filter((story) => story.moduleTitle === moduleTitle);
+  const current = moduleStories[Math.min(storyIndex, moduleStories.length - 1)]!;
+
+  useKeyboard((key) => {
+    if (key.name === "q") onExit();
+    else if (key.name === "j" || key.name === "down") {
+      setModuleIndex((index) => Math.min(moduleTitles.length - 1, index + 1));
+      setStoryIndex(0);
+    } else if (key.name === "k" || key.name === "up") {
+      setModuleIndex((index) => Math.max(0, index - 1));
+      setStoryIndex(0);
+    } else if (key.name === "l" || key.name === "right") {
+      setStoryIndex((index) => (index + 1) % moduleStories.length);
+    } else if (key.name === "h" || key.name === "left") {
+      setStoryIndex((index) => (index - 1 + moduleStories.length) % moduleStories.length);
+    }
+  });
+
+  return (
+    <ThemeProvider theme={DARK}>
+      <box
+        style={{
+          flexDirection: "column",
+          width: "100%",
+          height: "100%",
+          backgroundColor: DARK.background,
+        }}
+      >
+        <box style={{ height: 1, backgroundColor: DARK.panel, paddingLeft: 1 }}>
+          <text fg={DARK.text}>
+            <span fg={DARK.accent}>cueloop stories</span>
+            <span fg={DARK.textDim}>
+              {" "}
+              · {moduleTitle} / {current.storyName}
+            </span>
+          </text>
+        </box>
+        <box style={{ flexDirection: "row", flexGrow: 1 }}>
+          <box
+            style={{
+              width: 28,
+              backgroundColor: DARK.panel,
+              flexDirection: "column",
+              paddingLeft: 1,
+              paddingTop: 1,
+            }}
+          >
+            {moduleTitles.map((title, index) => (
+              <text key={title} fg={index === moduleIndex ? DARK.accent : DARK.textMuted}>
+                {index === moduleIndex ? "▸ " : "  "}
+                {title}
+              </text>
+            ))}
+          </box>
+          <box
+            style={{
+              flexGrow: 1,
+              flexDirection: "column",
+              border: true,
+              borderStyle: FRAME_BORDER_STYLE,
+              borderColor: DARK.border,
+            }}
+            title={` ${current.storyName} (${moduleStories.indexOf(current) + 1}/${moduleStories.length}) `}
+          >
+            {/* remount per story so component-local state never leaks across */}
+            <box
+              key={`${moduleTitle}/${current.storyName}`}
+              style={{ flexGrow: 1, flexDirection: "column" }}
+            >
+              {current.story.render()}
+            </box>
+          </box>
+        </box>
+        <box style={{ height: 1, backgroundColor: DARK.panel, paddingLeft: 1 }}>
+          <text fg={DARK.textDim}>j/k component · h/l story · q quit</text>
+        </box>
+      </box>
+    </ThemeProvider>
+  );
+}
+
+if (import.meta.main) {
+  const stories = await loadStories();
+  const renderer = await createCliRenderer();
+  createRoot(renderer).render(
+    <StoriesApp
+      stories={stories}
+      onExit={() => {
+        renderer.destroy();
+        queueMicrotask(() => process.exit(0));
+      }}
+    />,
+  );
+}