@cueloop/client 0.1.0-alpha.6 → 0.1.0-alpha.61

package/src/components/primitives/Button.tsx

@@ -0,0 +1,52 @@
+/**
+ * Word-button: a pressable label. `onPress` unifies mouse and (future)
+ * keyboard activation; `isDisabled` swallows presses without changing the
+ * rendered label, so read-only affordances keep their place in the layout.
+ */
+
+import React from "react";
+import type { MouseEvent } from "@opentui/core";
+import type { Theme } from "../../theme";
+import { useComponentTheme } from "../theme-context";
+
+export interface ButtonProps {
+  /** Unified activation: mouse release today, keyboard activation tomorrow. */
+  onPress: () => void;
+  isDisabled?: boolean;
+  /** solid = accent-filled call to action; plain = quiet word-button. */
+  variant?: "solid" | "plain" | "accent-text";
+  marginRight?: number;
+  theme?: Theme;
+  children: string;
+}
+
+export function Button({
+  onPress,
+  isDisabled = false,
+  variant = "plain",
+  marginRight,
+  theme,
+  children,
+}: ButtonProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const backgroundColor = variant === "solid" ? tokens.accent : undefined;
+  const foreground =
+    variant === "solid"
+      ? tokens.accentInk
+      : variant === "accent-text"
+        ? tokens.accent
+        : tokens.textDim;
+
+  return (
+    <box
+      style={{ backgroundColor, marginRight }}
+      onMouseUp={(event: MouseEvent) => {
+        // Consume the press so it never bubbles to an ancestor's onMouseUp (e.g. a card).
+        event.stopPropagation();
+        if (!isDisabled) onPress();
+      }}
+    >
+      <text fg={foreground}>{children}</text>
+    </box>
+  );
+}

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { DARK } from "../../theme";
+import type { Story, StoryMeta } from "../story";
+import { Card } from "./Card";
+
+export const meta: StoryMeta = { title: "primitives/Card" };
+
+export const Titled: Story = {
+  render: () => (
+    <Card title=" a titled card " contentRows={2}>
+      <text>first content row</text>
+      <text>second content row</text>
+    </Card>
+  ),
+  expectedColors: [DARK.border, DARK.elevated],
+};
+
+export const AccentBorder: Story = {
+  render: () => (
+    <Card title=" accented " contentRows={1} borderColor={DARK.accent}>
+      <text>content</text>
+    </Card>
+  ),
+  expectedColors: [DARK.accent],
+};

package/src/components/primitives/Card.tsx

@@ -0,0 +1,60 @@
+/**
+ * Bordered rounded box with an optional title. The card owns the
+ * height-derivation rule: its height is always the declared content row
+ * count plus the two border rows, so layout math and the mounted box can
+ * never drift apart - border-collapse bugs die here.
+ */
+
+import React from "react";
+import type { Theme } from "../../theme";
+import { useComponentTheme } from "../theme-context";
+import { FRAME_BORDER_STYLE } from "./frame";
+
+export interface CardProps {
+  title?: string;
+  /** Number of content rows inside the border; the box adds the two border rows. */
+  contentRows: number;
+  borderColor?: string;
+  backgroundColor?: string;
+  marginLeft?: number;
+  marginRight?: number;
+  theme?: Theme;
+  children: React.ReactNode;
+}
+
+/** The one height rule: content rows plus the top and bottom border rows. */
+export function cardHeight(contentRows: number): number {
+  return contentRows + 2;
+}
+
+export function Card({
+  title,
+  contentRows,
+  borderColor,
+  backgroundColor,
+  marginLeft,
+  marginRight,
+  theme,
+  children,
+}: CardProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <box
+      style={{
+        height: cardHeight(contentRows),
+        marginLeft,
+        marginRight,
+        border: true,
+        borderStyle: FRAME_BORDER_STYLE,
+        borderColor: borderColor ?? tokens.border,
+        backgroundColor: backgroundColor ?? tokens.elevated,
+        flexDirection: "column",
+        paddingLeft: 1,
+      }}
+      title={title}
+    >
+      {children}
+    </box>
+  );
+}

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,66 @@
+/**
+ * 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,23 @@
+/**
+ * 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,102 @@
+/**
+ * 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,138 @@
+/**
+ * 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;
+}