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

package/src/components/SettingsDialog.tsx

@@ -0,0 +1,147 @@
+/**
+ * The settings overlay, promoted from the design prototype: a centered
+ * Dialog with a left category nav and a right body of typed rows, all driven
+ * by one settings record. The component is controlled - the caller owns the
+ * open flag, the active category/row/zone, and value changes - so the app's
+ * keyboard grammar (and the stories catalog) can drive it without a second
+ * key handler inside. The modal sizes itself from the terminal dimensions.
+ */
+
+import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Dialog } from "./primitives/Dialog";
+import { CycleRow, TextRow, ToggleRow, type SettingsRowDescriptor } from "./SettingsRows";
+
+export interface SettingsCategory {
+  id: string;
+  name: string;
+  description: string;
+  rows: SettingsRowDescriptor[];
+  /** A bespoke body (e.g. the quick-actions editor) rendered instead of typed rows. */
+  customBody?: React.ReactNode;
+}
+
+export type SettingsValues = Record<string, string | boolean>;
+
+export interface SettingsDialogProps {
+  isOpen: boolean;
+  categories: SettingsCategory[];
+  values: SettingsValues;
+  activeCategoryId: string;
+  activeRowIndex: number;
+  activeZone: "nav" | "body";
+  onCategorySelect: (categoryId: string) => void;
+  onRowActivate: (row: SettingsRowDescriptor) => void;
+  theme?: Theme;
+}
+
+export function SettingsDialog({
+  isOpen,
+  categories,
+  values,
+  activeCategoryId,
+  activeRowIndex,
+  activeZone,
+  onCategorySelect,
+  onRowActivate,
+  theme,
+}: SettingsDialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
+
+  if (!isOpen) return null;
+  const category =
+    categories.find((candidate) => candidate.id === activeCategoryId) ?? categories[0];
+
+  if (!category) return null;
+
+  return (
+    <Dialog
+      isOpen
+      title=" Settings "
+      width={Math.min(76, terminalWidth - 6)}
+      height={Math.min(22, terminalHeight - 4)}
+      background={tokens.elevated}
+      theme={theme}
+    >
+      <box style={{ flexDirection: "row", flexGrow: 1 }}>
+        <box style={{ flexDirection: "column", width: 18, paddingLeft: 1, paddingRight: 1 }}>
+          <text fg={tokens.textDim}>SETTINGS</text>
+          {categories.map((candidate) => {
+            const isActive = candidate.id === category.id;
+
+            return (
+              <box
+                key={candidate.id}
+                style={{
+                  backgroundColor: isActive && activeZone === "nav" ? tokens.border : undefined,
+                }}
+                onMouseUp={() => onCategorySelect(candidate.id)}
+              >
+                <text
+                  fg={isActive ? tokens.accent : tokens.textMuted}
+                >{`${isActive ? "› " : "  "}${candidate.name}`}</text>
+              </box>
+            );
+          })}
+        </box>
+        <box style={{ width: 1, backgroundColor: tokens.border }} />
+        <box style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 2, paddingRight: 1 }}>
+          <text fg={tokens.text}>{category.name}</text>
+          <text fg={tokens.textDim}>{category.description}</text>
+          <box style={{ height: 1 }} />
+          {category.customBody}
+          {category.rows.map((row, rowIndex) => {
+            const isActive = activeZone === "body" && rowIndex === activeRowIndex;
+            const value = values[row.key];
+
+            if (row.kind === "toggle") {
+              return (
+                <ToggleRow
+                  key={row.key}
+                  label={row.label}
+                  value={value === true}
+                  isActive={isActive}
+                  onPress={() => onRowActivate(row)}
+                  theme={theme}
+                />
+              );
+            }
+            if (row.kind === "cycle") {
+              return (
+                <CycleRow
+                  key={row.key}
+                  label={row.label}
+                  value={String(value ?? "")}
+                  isActive={isActive}
+                  onPress={() => onRowActivate(row)}
+                  theme={theme}
+                />
+              );
+            }
+
+            return (
+              <TextRow
+                key={row.key}
+                label={row.label}
+                value={String(value ?? "")}
+                isActive={isActive}
+                onPress={() => onRowActivate(row)}
+                theme={theme}
+              />
+            );
+          })}
+        </box>
+      </box>
+      <box style={{ flexDirection: "row", height: 1, paddingLeft: 1 }}>
+        <text fg={tokens.textDim}>
+          {activeZone === "nav"
+            ? "j/k category · l/enter into settings · esc close"
+            : "j/k row · l/space change · h back · esc close"}
+        </text>
+      </box>
+    </Dialog>
+  );
+}

package/src/components/SettingsRows.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { CycleRow, TextRow, ToggleRow } from "./SettingsRows";
+
+export const meta: StoryMeta = { title: "SettingsRows" };
+
+export const AllKinds: Story = {
+  render: () => (
+    <box style={{ flexDirection: "column", width: 50 }}>
+      <ToggleRow label="Line numbers" value={true} isActive={false} onPress={() => {}} />
+      <ToggleRow label="Hide whitespace" value={false} isActive={true} onPress={() => {}} />
+      <CycleRow label="Palette" value="dark" isActive={false} onPress={() => {}} />
+      <TextRow label="Vault path" value="~/vaults/notes" isActive={false} onPress={() => {}} />
+    </box>
+  ),
+  expectedColors: [DARK.green, DARK.accent, DARK.border],
+};

package/src/components/SettingsRows.tsx

@@ -0,0 +1,112 @@
+/**
+ * Typed settings rows for the settings dialog: toggle (on/off), cycle
+ * (enumerated options), and text (freeform value). Every row is one line -
+ * label column left, value right - and presses go through `onPress` so mouse
+ * and keyboard activation share one path.
+ */
+
+import React from "react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+
+export interface SettingsRowDescriptor {
+  key: string;
+  label: string;
+  kind: "toggle" | "cycle" | "text";
+  options?: string[];
+  hint?: string;
+}
+
+interface RowShellProps {
+  label: string;
+  isActive: boolean;
+  onPress: () => void;
+  theme?: Theme;
+  children: React.ReactNode;
+}
+
+function RowShell({ label, isActive, onPress, theme, children }: RowShellProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <box
+      style={{
+        flexDirection: "row",
+        height: 1,
+        backgroundColor: isActive ? tokens.border : undefined,
+      }}
+      onMouseUp={onPress}
+    >
+      <box style={{ width: 26, paddingLeft: 1 }}>
+        <text fg={isActive ? tokens.text : tokens.textMuted}>{label}</text>
+      </box>
+      {children}
+    </box>
+  );
+}
+
+export interface ToggleRowProps {
+  label: string;
+  value: boolean;
+  isActive: boolean;
+  onPress: () => void;
+  theme?: Theme;
+}
+
+export function ToggleRow({
+  label,
+  value,
+  isActive,
+  onPress,
+  theme,
+}: ToggleRowProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <RowShell label={label} isActive={isActive} onPress={onPress} theme={theme}>
+      <text fg={value ? tokens.green : tokens.accent}>{value ? "on" : "off"}</text>
+    </RowShell>
+  );
+}
+
+export interface CycleRowProps {
+  label: string;
+  value: string;
+  isActive: boolean;
+  onPress: () => void;
+  theme?: Theme;
+}
+
+export function CycleRow({
+  label,
+  value,
+  isActive,
+  onPress,
+  theme,
+}: CycleRowProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <RowShell label={label} isActive={isActive} onPress={onPress} theme={theme}>
+      <text fg={tokens.accent}>{value}</text>
+    </RowShell>
+  );
+}
+
+export interface TextRowProps {
+  label: string;
+  value: string;
+  isActive: boolean;
+  onPress: () => void;
+  theme?: Theme;
+}
+
+export function TextRow({ label, value, isActive, onPress, theme }: TextRowProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+
+  return (
+    <RowShell label={label} isActive={isActive} onPress={onPress} theme={theme}>
+      <text fg={tokens.accent}>{value}</text>
+    </RowShell>
+  );
+}

package/src/components/Toast.stories.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { Toast } from "./Toast";
+
+export const meta: StoryMeta = { title: "Toast" };
+
+export const ShareLink: Story = {
+  render: () => <Toast title="share link copied" body="ssh review-4f2a@cueloop.dev" />,
+  expectedColors: [DARK.accent],
+  size: { width: 60, height: 12 },
+};

package/src/components/Toast.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Dialog } from "./primitives/Dialog";
+
+export interface ToastProps {
+  title?: string;
+  body: string;
+  theme?: Theme;
+}
+
+export function Toast({ title, body, theme }: ToastProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth } = useTerminalDimensions();
+  const width = Math.min(terminalWidth - 6, Math.max(28, body.length + 4));
+
+  return (
+    <Dialog
+      isOpen
+      title={title ? ` ${title} ` : undefined}
+      width={width}
+      height={6}
+      background={tokens.elevated}
+      theme={theme}
+    >
+      <box
+        style={{
+          flexDirection: "column",
+          flexGrow: 1,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+        }}
+      >
+        <text fg={tokens.text}>{body}</text>
+        <box style={{ flexGrow: 1 }} />
+        <box style={{ flexDirection: "row" }}>
+          <box style={{ flexGrow: 1 }} />
+          <text fg={tokens.textDim}>[esc]</text>
+        </box>
+      </box>
+    </Dialog>
+  );
+}

package/src/components/WalkWizard.stories.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { WalkFile } from "../walk";
+import type { Story, StoryMeta } from "./story";
+import { WalkWizard } from "./WalkWizard";
+
+export const meta: StoryMeta = { title: "WalkWizard" };
+
+const FILES: WalkFile[] = [
+  {
+    path: "packages/daemon/src/store.ts",
+    added: 12,
+    removed: 3,
+    preview: [
+      { sign: "+", text: "const viewed = new Set<string>();" },
+      { sign: "+", text: "record.viewedPaths = [...viewed];" },
+      { sign: "-", text: "// viewed tracking lives in the client only" },
+    ],
+  },
+  {
+    path: "packages/client/src/walk.ts",
+    added: 48,
+    removed: 0,
+    preview: [{ sign: "+", text: "export function firstUnviewedIndex(files, viewed) {" }],
+  },
+  {
+    path: "packages/schema/src/types.ts",
+    added: 3,
+    removed: 0,
+    preview: [{ sign: "+", text: "viewedPaths?: string[];" }],
+  },
+];
+
+const noop = (): void => {};
+
+export const FirstFile: Story = {
+  render: () => (
+    <WalkWizard
+      files={FILES}
+      index={0}
+      viewedPaths={new Set()}
+      terminalWidth={80}
+      onSubmitRequest={noop}
+      onBack={noop}
+    />
+  ),
+  // the main card wears the accent border; stats carry the +/- colors
+  expectedColors: [
+    DARK.accent,
+    DARK.green,
+    DARK.red,
+    DARK.insertedForeground,
+    DARK.deletedForeground,
+  ],
+};
+
+export const WithAgentNote: Story = {
+  render: () => (
+    <WalkWizard
+      files={FILES}
+      index={1}
+      viewedPaths={new Set(["packages/daemon/src/store.ts"])}
+      note="New module: pure helpers that pick the next unviewed file. No IO, unit tested."
+      terminalWidth={80}
+      onSubmitRequest={noop}
+      onBack={noop}
+    />
+  ),
+  // the agent-note block wears the plain gray border token, not the accent
+  expectedColors: [DARK.accent, DARK.border, DARK.textMuted],
+};
+
+export const EndCard: Story = {
+  render: () => (
+    <WalkWizard
+      files={FILES}
+      index={3}
+      viewedPaths={new Set(FILES.map((file) => file.path))}
+      terminalWidth={80}
+      onSubmitRequest={noop}
+      onBack={noop}
+    />
+  ),
+  // the end card wears the green border and the solid submit button
+  expectedColors: [DARK.green, DARK.accent, DARK.accentInk],
+};
+
+export const EndCardPartialPass: Story = {
+  render: () => (
+    <WalkWizard
+      files={FILES}
+      index={3}
+      viewedPaths={new Set(["packages/daemon/src/store.ts"])}
+      terminalWidth={80}
+      onSubmitRequest={noop}
+      onBack={noop}
+    />
+  ),
+  expectedColors: [DARK.green],
+};

package/src/components/WalkWizard.tsx

@@ -0,0 +1,152 @@
+/**
+ * The guided walk's focused card wizard: one card per changed file
+ * floating over the dimmed diff, with a plain step count in the title - no
+ * progress bar. Below the main card a separate gray-bordered block carries
+ * the submitting agent's note for the file, when one exists. Past the last
+ * file the end card offers the submit action directly with honest counts.
+ * The keys live in the keymap's walk overlay; this component only renders.
+ */
+
+import React from "react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import type { WalkFile } from "../walk";
+import { viewedCount } from "../walk";
+import { Card } from "./primitives/Card";
+import { Button } from "./primitives/Button";
+import { Toolbar } from "./primitives/Toolbar";
+
+export interface WalkWizardProps {
+  files: WalkFile[];
+  /** The wizard step; index === files.length renders the end card. */
+  index: number;
+  viewedPaths: ReadonlySet<string>;
+  /** The agent's note for the current file; the gray block renders only when set. */
+  note?: string;
+  /** Terminal width bounds the card width. */
+  terminalWidth: number;
+  /** End-card submit: leaves the walk and opens the rail confirm. */
+  onSubmitRequest: () => void;
+  onBack: () => void;
+  theme?: Theme;
+}
+
+/** The card never crowds the terminal edge nor stretches past reading width. */
+function wizardWidth(terminalWidth: number): number {
+  return Math.min(72, Math.max(24, terminalWidth - 8));
+}
+
+/** Note rows from a crude wrap estimate, capped so the block stays a block. */
+function noteRows(note: string, innerWidth: number): number {
+  return Math.min(3, Math.max(1, Math.ceil(note.length / Math.max(1, innerWidth))));
+}
+
+export function WalkWizard({
+  files,
+  index,
+  viewedPaths,
+  note,
+  terminalWidth,
+  onSubmitRequest,
+  onBack,
+  theme,
+}: WalkWizardProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const width = wizardWidth(terminalWidth);
+  const viewed = viewedCount(files, viewedPaths);
+  const atEnd = index >= files.length;
+  const currentFile = files[index];
+
+  return (
+    <box
+      style={{
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: "100%",
+        height: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        flexDirection: "column",
+      }}
+    >
+      <box style={{ width, flexDirection: "column" }}>
+        {atEnd || !currentFile ? (
+          <Card
+            title=" walk complete "
+            contentRows={3}
+            borderColor={tokens.green}
+            backgroundColor={tokens.elevated}
+            theme={theme}
+          >
+            <text fg={tokens.text}>
+              {viewed === files.length
+                ? `every file viewed (${viewed}/${files.length})`
+                : `${viewed} of ${files.length} files viewed`}
+            </text>
+            <box style={{ height: 1 }} />
+            <Toolbar>
+              <Button variant="solid" marginRight={2} onPress={onSubmitRequest} theme={theme}>
+                {" Submit review "}
+              </Button>
+              <Button onPress={onBack} theme={theme}>
+                {" [ back "}
+              </Button>
+            </Toolbar>
+          </Card>
+        ) : (
+          <>
+            <Card
+              title={` file ${index + 1} of ${files.length} · ${viewed} viewed `}
+              contentRows={3 + Math.max(1, currentFile.preview.length)}
+              borderColor={tokens.accent}
+              backgroundColor={tokens.elevated}
+              theme={theme}
+            >
+              <text fg={tokens.text}>{currentFile.path}</text>
+              <text>
+                <span fg={tokens.green}>{`+${currentFile.added}`}</span>
+                <span fg={tokens.textDim}> </span>
+                <span fg={tokens.red}>{`-${currentFile.removed}`}</span>
+                <span fg={tokens.textDim}>
+                  {viewedPaths.has(currentFile.path) ? " · viewed" : ""}
+                </span>
+              </text>
+              <box style={{ height: 1 }} />
+              {currentFile.preview.length === 0 ? (
+                <text fg={tokens.textDim}>(no changed lines)</text>
+              ) : (
+                currentFile.preview.map((previewLine, previewIndex) => (
+                  <text
+                    key={previewIndex}
+                    style={{ wrapMode: "none" }}
+                    fg={
+                      previewLine.sign === "+"
+                        ? tokens.insertedForeground
+                        : tokens.deletedForeground
+                    }
+                  >
+                    {previewLine.sign + previewLine.text}
+                  </text>
+                ))
+              )}
+            </Card>
+            {note !== undefined ? (
+              <box style={{ marginTop: 1, flexDirection: "column" }}>
+                <Card
+                  title=" agent note "
+                  contentRows={noteRows(note, width - 4)}
+                  borderColor={tokens.border}
+                  backgroundColor={tokens.elevated}
+                  theme={theme}
+                >
+                  <text fg={tokens.textMuted}>{note}</text>
+                </Card>
+              </box>
+            ) : null}
+          </>
+        )}
+      </box>
+    </box>
+  );
+}