@cueloop/client 0.1.0-alpha.3 → 0.1.0-alpha.30

package/src/components/ReviewRail.stories.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ReviewRail } from "./ReviewRail";
+import { FIXTURE_ANNOTATIONS, fixturePlanSession } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "ReviewRail" };
+
+const callbacks = {
+  onTabChange: () => {},
+  onSelectCard: () => {},
+  onActivateCard: () => {},
+  onSubmitRequest: () => {},
+};
+
+/** The rail expects a height-constrained parent, like the app's main row. */
+function RailFrame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ flexDirection: "row", width: "100%", height: "100%" }}>{children}</box>;
+}
+
+export const AnnotationStack: Story = {
+  render: () => (
+    <RailFrame>
+      <ReviewRail
+      session={fixturePlanSession()}
+      authorNames={{}}
+      selectedId={FIXTURE_ANNOTATIONS[0]!.id}
+      resolvedIds={new Set(FIXTURE_ANNOTATIONS.map((annotation) => annotation.id))}
+      railTab="review"
+      pendingCount={2}
+      cardEdit={null}
+      submitConfirm={null}
+      {...callbacks}
+      />
+    </RailFrame>
+  ),
+  expectedColors: [DARK.panel, DARK.green],
+  size: { width: 40, height: 24 },
+};
+
+export const AgentTab: Story = {
+  render: () => (
+    <RailFrame>
+      <ReviewRail
+      session={fixturePlanSession()}
+      authorNames={{}}
+      resolvedIds={new Set()}
+      railTab="agent"
+      pendingCount={2}
+      cardEdit={null}
+      submitConfirm={null}
+      {...callbacks}
+      />
+    </RailFrame>
+  ),
+  size: { width: 40, height: 24 },
+};
+
+export const SubmitConfirmOpen: Story = {
+  render: () => (
+    <RailFrame>
+      <ReviewRail
+      session={fixturePlanSession()}
+      authorNames={{}}
+      resolvedIds={new Set()}
+      railTab="review"
+      pendingCount={2}
+      cardEdit={null}
+      submitConfirm={{
+        verdict: "request_changes",
+        summary: "",
+        annotationCount: 2,
+        blockingCount: 0,
+        onInput: () => {},
+        onSelectVerdict: () => {},
+        onSubmit: () => {},
+        onCancel: () => {},
+      }}
+      {...callbacks}
+      />
+    </RailFrame>
+  ),
+  expectedColors: [DARK.red],
+  size: { width: 40, height: 30 },
+};
+
+export const Resolved: Story = {
+  render: () => (
+    <RailFrame>
+      <ReviewRail
+      session={fixturePlanSession({
+        status: "resolved",
+        verdict: { kind: "approve", summary: "", feedback: "", resolvedAt: "2026-01-01T00:00:00Z" },
+      })}
+      authorNames={{}}
+      resolvedIds={new Set()}
+      railTab="review"
+      pendingCount={0}
+      cardEdit={null}
+      submitConfirm={null}
+      {...callbacks}
+      />
+    </RailFrame>
+  ),
+  expectedColors: [DARK.green],
+  size: { width: 40, height: 24 },
+};

package/src/components/ReviewRail.tsx

@@ -0,0 +1,180 @@
+/**
+ * The right review rail: tab strip (Review/Agent), the scrollable annotation
+ * stack, and the pinned submit affordance. The confirm card sits OUTSIDE the
+ * scrollbox so the stack scrolls while the card stays at the rail bottom.
+ * Card reveal goes through the scrollbox's own scrollChildIntoView - no
+ * hardcoded card-height arithmetic.
+ */
+
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import type { ScrollBoxRenderable } from "@opentui/core";
+import { isAddressed, type Annotation, type ReviewSession } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Tabs, Tab, TabList } from "./primitives/Tabs";
+import { Button } from "./primitives/Button";
+import { AnnotationCard, type AnnotationDraft } from "./AnnotationCard";
+import { ConfirmCard, type ConfirmCardProps } from "./ConfirmCard";
+import { resolveDisplayName } from "../attribution";
+
+export type RailTab = "review" | "agent";
+
+export interface RailCardEdit extends AnnotationDraft {
+  id: string;
+}
+
+export interface ReviewRailHandle {
+  /** Scroll the card for an annotation into view (selection symmetry). */
+  revealCard(annotationId: string): void;
+}
+
+export interface ReviewRailProps {
+  session: ReviewSession;
+  /** Planner-local author renames (config [authors]); override the registry name. */
+  authorNames: Record<string, string>;
+  selectedId?: string;
+  /** Ids whose anchor resolved; null = orphan display off (diff view). */
+  resolvedIds: Set<string> | null;
+  railTab: RailTab;
+  pendingCount: number;
+  cardEdit: RailCardEdit | null;
+  submitConfirm: Omit<ConfirmCardProps, "theme"> | null;
+  onTabChange: (tab: RailTab) => void;
+  onSelectCard: (id: string) => void;
+  onActivateCard: (id: string) => void;
+  onSubmitRequest: () => void;
+  /** Rail column width; the app derives it from the persisted review layout. */
+  width?: number;
+  /**
+   * When set, renders the muted `»` chevron pinned at the rail's bottom-left,
+   * one column from the divider. Clicking it collapses the panel to compact.
+   */
+  onCollapse?: () => void;
+  theme?: Theme;
+}
+
+/** Forward-compatible: open annotation kinds may carry a blocking flag. */
+export function annotationBlocking(annotation: Annotation): boolean {
+  return (annotation as Annotation & { blocking?: boolean }).blocking === true;
+}
+
+export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function ReviewRail(
+  {
+    session,
+    authorNames,
+    selectedId,
+    resolvedIds,
+    railTab,
+    pendingCount,
+    cardEdit,
+    submitConfirm,
+    onTabChange,
+    onSelectCard,
+    onActivateCard,
+    onSubmitRequest,
+    width = 34,
+    onCollapse,
+    theme,
+  }: ReviewRailProps,
+  handleRef,
+): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+  // addressed annotations leave the card list; a dim count keeps them honest
+  const openAnnotations = session.annotations.filter((annotation) => !isAddressed(annotation));
+  const addressedCount = session.annotations.length - openAnnotations.length;
+
+  useImperativeHandle(handleRef, () => ({
+    revealCard: (annotationId: string): void => {
+      try {
+        scrollRef.current?.scrollChildIntoView(`annotation-card-${annotationId}`);
+      } catch {
+        // reveal is best-effort; selection state is already correct
+      }
+    },
+  }));
+
+  return (
+    <box style={{ width, backgroundColor: tokens.panel, flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+      <Tabs selectedKey={railTab} onSelectionChange={(key) => onTabChange(key as RailTab)} theme={theme}>
+        <TabList>
+          <Tab id="review">{`Review (${pendingCount})`}</Tab>
+          <Tab id="agent">Agent</Tab>
+        </TabList>
+      </Tabs>
+      <text> </text>
+      {railTab === "agent" ? (
+        <AgentTab session={session} theme={theme} />
+      ) : (
+        <>
+          {session.workingCopy !== undefined ? <text fg={tokens.textDim}>± plan edits → one diff</text> : null}
+          {addressedCount > 0 ? <text fg={tokens.textDim}>✓ {addressedCount} addressed by revision</text> : null}
+          {openAnnotations.length === 0 ? (
+            <text fg={tokens.textDim}>{session.annotations.length === 0 ? "no annotations yet" : "all annotations addressed"}</text>
+          ) : (
+            <scrollbox ref={scrollRef} style={{ flexGrow: 1 }} focused={false}>
+              {openAnnotations.map((annotation) => (
+                <AnnotationCard
+                  key={annotation.id}
+                  id={`annotation-card-${annotation.id}`}
+                  kind={annotation.kind}
+                  quote={annotation.anchor.quote}
+                  theme={theme}
+                  saved={{
+                    body: annotation.body,
+                    isSelected: annotation.id === selectedId,
+                    isOrphan: resolvedIds !== null && !resolvedIds.has(annotation.id),
+                    isBlocking: annotationBlocking(annotation),
+                    authorLabel: annotation.author ? resolveDisplayName(annotation.author, session.participants, authorNames) : undefined,
+                    editing:
+                      cardEdit && cardEdit.id === annotation.id
+                        ? {
+                            text: cardEdit.text,
+                            onInput: cardEdit.onInput,
+                            onSave: cardEdit.onSave,
+                            onCancel: cardEdit.onCancel,
+                          }
+                        : null,
+                    onPress: () =>
+                      annotation.id === selectedId ? onActivateCard(annotation.id) : onSelectCard(annotation.id),
+                  }}
+                />
+              ))}
+            </scrollbox>
+          )}
+          <box style={{ flexGrow: 1 }} />
+          {/* the confirm card sits OUTSIDE the scrollbox: the annotation stack
+              above scrolls while the card stays pinned to the rail bottom */}
+          {session.status === "resolved" ? (
+            <text fg={tokens.green}>resolved: {session.verdict!.kind.replace("_", " ")}</text>
+          ) : submitConfirm ? (
+            <ConfirmCard {...submitConfirm} theme={theme} />
+          ) : (
+            <Button variant="accent-text" onPress={onSubmitRequest} theme={theme}>
+              {`Submit review (${pendingCount}) ⏎`}
+            </Button>
+          )}
+        </>
+      )}
+      {/* the collapse chevron: muted, left-bound, one column from the divider.
+          » points right - it hands the width back toward the plan */}
+      {onCollapse ? (
+        <box style={{ flexDirection: "row" }} onMouseUp={onCollapse}>
+          <text fg={tokens.textDim}>»</text>
+        </box>
+      ) : null}
+    </box>
+  );
+});
+
+/** Agent tab: who submitted, where the session stands, which revision. */
+function AgentTab({ session, theme }: { session: ReviewSession; theme?: Theme }): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  return (
+    <box style={{ flexDirection: "column", flexGrow: 1 }}>
+      <text fg={tokens.textMuted}>{session.artifact.meta.agent ?? "unknown"}</text>
+      <text fg={tokens.textDim}>status: {session.status}</text>
+      <text fg={tokens.textDim}>revision {session.revisions.length}</text>
+    </box>
+  );
+}

package/src/components/SettingsDialog.stories.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { SettingsDialog, type SettingsCategory } from "./SettingsDialog";
+
+export const meta: StoryMeta = { title: "SettingsDialog" };
+
+const CATEGORIES: SettingsCategory[] = [
+  {
+    id: "general",
+    name: "General",
+    description: "identity and submission",
+    rows: [
+      { key: "displayName", label: "Display name", kind: "text" },
+      { key: "autoClose", label: "Auto-close on submit", kind: "cycle", options: ["off", "3s", "on"] },
+    ],
+  },
+  {
+    id: "display",
+    name: "Display",
+    description: "plan width and chrome",
+    rows: [
+      { key: "planWidth", label: "Plan width", kind: "cycle", options: ["default", "wide", "full"] },
+      { key: "showLineNumbers", label: "Line numbers", kind: "toggle" },
+    ],
+  },
+];
+
+const VALUES = { displayName: "amber-heron", autoClose: "3s", planWidth: "default", showLineNumbers: true };
+
+export const NavZone: Story = {
+  render: () => (
+    <SettingsDialog
+      isOpen
+      categories={CATEGORIES}
+      values={VALUES}
+      activeCategoryId="general"
+      activeRowIndex={0}
+      activeZone="nav"
+      onCategorySelect={() => {}}
+      onRowActivate={() => {}}
+    />
+  ),
+  expectedColors: [DARK.accent, DARK.backdrop],
+  size: { width: 100, height: 30 },
+};
+
+export const BodyZone: Story = {
+  render: () => (
+    <SettingsDialog
+      isOpen
+      categories={CATEGORIES}
+      values={VALUES}
+      activeCategoryId="display"
+      activeRowIndex={1}
+      activeZone="body"
+      onCategorySelect={() => {}}
+      onRowActivate={() => {}}
+    />
+  ),
+  expectedColors: [DARK.green],
+  size: { width: 100, height: 30 },
+};

package/src/components/SettingsDialog.tsx

@@ -0,0 +1,132 @@
+/**
+ * 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[];
+}
+
+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)}
+      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.elevated : 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.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, backgroundColor: tokens.elevated, paddingLeft: 1 }}>
+        <text fg={tokens.textDim}>
+          {activeZone === "nav"
+            ? "j/k category · l/⏎ 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.elevated],
+};

package/src/components/SettingsRows.tsx

@@ -0,0 +1,92 @@
+/**
+ * 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.elevated : 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/WalkWizard.stories.tsx

@@ -0,0 +1,89 @@
+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.insFg, DARK.delFg],
+};
+
+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],
+};