@cueloop/client 0.1.0-alpha.4 → 0.1.0-alpha.40

package/src/components/PromptDialog.tsx

@@ -0,0 +1,78 @@
+/**
+ * A centered single-field text prompt on the shared Dialog overlay. The focused
+ * input owns typing/cursor natively; the reducer's `prompt` overlay drives ⏎
+ * save / esc cancel (like the composer). Used to rename an author and to ask a
+ * collaborator for their name.
+ */
+
+import React, { useEffect, useRef } from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { KeyBinding, TextareaRenderable } from "@opentui/core";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Dialog } from "./primitives/Dialog";
+
+// ⏎ submits (suppresses the textarea's default newline); the grammar owns save.
+const PROMPT_KEY_BINDINGS: KeyBinding[] = [{ name: "return", action: "submit" }];
+
+export interface PromptDialogProps {
+  isOpen: boolean;
+  title?: string;
+  label: string;
+  value: string;
+  placeholder?: string;
+  onInput: (text: string) => void;
+  theme?: Theme;
+}
+
+export function PromptDialog({
+  isOpen,
+  title,
+  label,
+  value,
+  placeholder,
+  onInput,
+  theme,
+}: PromptDialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth } = useTerminalDimensions();
+  const inputRef = useRef<TextareaRenderable | null>(null);
+  useEffect(() => {
+    // open with the caret after the seeded value, like a text field
+    if (inputRef.current) inputRef.current.cursorOffset = value.length;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  if (!isOpen) return null;
+  return (
+    <Dialog isOpen title={title} width={Math.min(54, terminalWidth - 6)} height={7} theme={theme}>
+      <box
+        style={{
+          flexDirection: "column",
+          flexGrow: 1,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+        }}
+      >
+        <text fg={tokens.textDim}>{label}</text>
+        <textarea
+          ref={inputRef}
+          focused
+          initialValue={value}
+          placeholder={placeholder}
+          keyBindings={PROMPT_KEY_BINDINGS}
+          onContentChange={() => onInput(inputRef.current?.plainText ?? "")}
+          style={{
+            height: 1,
+            backgroundColor: tokens.elevated,
+            focusedBackgroundColor: tokens.elevated,
+            textColor: tokens.text,
+            focusedTextColor: tokens.text,
+          }}
+        />
+        <box style={{ flexGrow: 1 }} />
+        <text fg={tokens.textDim}>enter save · esc cancel</text>
+      </box>
+    </Dialog>
+  );
+}

package/src/components/ReviewPanel.stories.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { DARK } from "../theme";
+import { REVIEW_MAX_WIDTH, REVIEW_MIN_WIDTH } from "../review-panel";
+import type { Story, StoryMeta } from "./story";
+import { ReviewPanel } from "./ReviewPanel";
+import { FIXTURE_ANNOTATIONS, fixturePlanSession } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "ReviewPanel" };
+
+const rail = {
+  session: fixturePlanSession(),
+  authorNames: {},
+  selectedId: FIXTURE_ANNOTATIONS[0]!.id,
+  resolvedIds: new Set(FIXTURE_ANNOTATIONS.map((annotation) => annotation.id)),
+  curationItems: [],
+  railTab: "review" as const,
+  pendingCount: 2,
+  cardEdit: null,
+  submitConfirm: null,
+  onTabChange: () => {},
+  onSelectCard: () => {},
+  onActivateCard: () => {},
+  onSelectCuration: () => {},
+  onUndoCuration: () => {},
+  onSubmitRequest: () => {},
+  onLaunchHarness: () => {},
+};
+
+const panelCallbacks = { onDividerGrab: () => {}, onToggle: () => {} };
+
+/** The plan area to the left of the divider, so the layout reads in context. */
+function PanelFrame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return (
+    <box
+      style={{
+        flexDirection: "row",
+        width: "100%",
+        height: "100%",
+        backgroundColor: DARK.background,
+      }}
+    >
+      <box style={{ flexGrow: 1, paddingLeft: 1 }}>
+        <text fg={DARK.textMuted}>The plan takes the width the panel hands back.</text>
+      </box>
+      {children}
+    </box>
+  );
+}
+
+export const ExpandedNarrow: Story = {
+  render: () => (
+    <PanelFrame>
+      <ReviewPanel mode="expanded" width={REVIEW_MIN_WIDTH} rail={rail} {...panelCallbacks} />
+    </PanelFrame>
+  ),
+  size: { width: 80, height: 24 },
+};
+
+export const ExpandedWide: Story = {
+  render: () => (
+    <PanelFrame>
+      <ReviewPanel mode="expanded" width={REVIEW_MAX_WIDTH} rail={rail} {...panelCallbacks} />
+    </PanelFrame>
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 90, height: 24 },
+};
+
+export const Compact: Story = {
+  render: () => (
+    <PanelFrame>
+      <ReviewPanel mode="compact" width={34} rail={rail} {...panelCallbacks} />
+    </PanelFrame>
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 60, height: 24 },
+};
+
+export const Hidden: Story = {
+  render: () => (
+    <PanelFrame>
+      <ReviewPanel mode="hidden" width={34} rail={rail} {...panelCallbacks} />
+    </PanelFrame>
+  ),
+  size: { width: 60, height: 24 },
+};

package/src/components/ReviewPanel.tsx

@@ -0,0 +1,101 @@
+/**
+ * The review surface's outer shell: the grabbable divider plus the rail in one
+ * of three modes - expanded (the full ReviewRail, resizable), compact (a narrow
+ * count + dots strip that hands width back to the plan), or hidden (nothing at
+ * all, no leftover tab). The keybinding cycles all three; the clickable chevron
+ * toggles expanded and compact only. App owns the width/mode state and the drag
+ * on the container; this file only reads them. The geometry (width clamp, the
+ * divider glyph column, the cycle) lives in review-panel.ts so this stays
+ * declarative.
+ */
+
+import React from "react";
+import type { Annotation } from "@cueloop/schema";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { ReviewRail, type ReviewRailHandle, type ReviewRailProps } from "./ReviewRail";
+import { REVIEW_COMPACT_WIDTH, type ReviewPanelMode } from "../review-panel";
+
+export interface ReviewPanelProps {
+  mode: ReviewPanelMode;
+  /** Expanded-rail width in columns (already clamped by the app). */
+  width: number;
+  /** Arm a divider drag; the app tracks the drag itself on the container. */
+  onDividerGrab: () => void;
+  /** Chevron click: expanded <-> compact (never hidden). */
+  onToggle: () => void;
+  /** The expanded ReviewRail's props; width and onCollapse are supplied here. */
+  rail: Omit<ReviewRailProps, "width" | "onCollapse" | "theme">;
+  railRef?: React.Ref<ReviewRailHandle>;
+  theme?: Theme;
+}
+
+/** An invisible, full-height grab column: the plan's right border is the seam. */
+function ReviewDivider({ onGrab }: { onGrab: () => void }): React.ReactNode {
+  // childless: it stretches to the row height like the plan and rail beside it,
+  // so the three columns share one bottom edge. Invisible, but full-height grab.
+  return <box style={{ width: 1 }} onMouseDown={onGrab} />;
+}
+
+/** The compact strip: the card count, one kind-colored dot per card, and the
+ *  `<` expand chevron, bottom-padded to sit at the same row as the expanded `>`. */
+function CompactRail({
+  annotations,
+  onExpand,
+  theme,
+}: {
+  annotations: Annotation[];
+  onExpand: () => void;
+  theme?: Theme;
+}): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  return (
+    <box
+      style={{
+        width: REVIEW_COMPACT_WIDTH,
+        backgroundColor: tokens.panel,
+        flexDirection: "column",
+        paddingTop: 1,
+        paddingBottom: 1,
+      }}
+    >
+      <box style={{ alignItems: "center" }}>
+        <text fg={tokens.accent}>{String(annotations.length)}</text>
+      </box>
+      <box style={{ height: 1 }} />
+      <box style={{ flexDirection: "column", alignItems: "center" }}>
+        {annotations.map((annotation) => (
+          <text key={annotation.id} fg={tokens.accent}>
+            ●
+          </text>
+        ))}
+      </box>
+      <box style={{ flexGrow: 1 }} />
+      <box style={{ paddingLeft: 1 }} onMouseUp={onExpand}>
+        <text fg={tokens.textDim}>{"<"}</text>
+      </box>
+    </box>
+  );
+}
+
+export function ReviewPanel({
+  mode,
+  width,
+  onDividerGrab,
+  onToggle,
+  rail,
+  railRef,
+  theme,
+}: ReviewPanelProps): React.ReactNode {
+  if (mode === "hidden") return null;
+  return (
+    <>
+      <ReviewDivider onGrab={onDividerGrab} />
+      {mode === "expanded" ? (
+        <ReviewRail ref={railRef} {...rail} width={width} onCollapse={onToggle} theme={theme} />
+      ) : (
+        <CompactRail annotations={rail.session.annotations} onExpand={onToggle} theme={theme} />
+      )}
+    </>
+  );
+}

package/src/components/ReviewRail.stories.tsx

@@ -0,0 +1,220 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { ReviewRail } from "./ReviewRail";
+import { FIXTURE_ANNOTATIONS, fixtureDiffSession, fixturePlanSession } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "ReviewRail" };
+
+const callbacks = {
+  curationItems: [],
+  onTabChange: () => {},
+  onSelectCard: () => {},
+  onActivateCard: () => {},
+  onSelectCuration: () => {},
+  onUndoCuration: () => {},
+  onSubmitRequest: () => {},
+  onLaunchHarness: () => {},
+};
+
+/** 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.accent],
+  size: { width: 40, height: 24 },
+};
+
+export const MixedOwnershipStack: Story = {
+  render: () => (
+    <RailFrame>
+      <ReviewRail
+        session={fixturePlanSession({
+          participants: [{ id: "SHA256:collab1", provider: "ssh", name: "Priya" }],
+          annotations: [
+            {
+              id: "own_note",
+              kind: "comment",
+              anchor: { quote: "persists sessions", prefix: "The daemon ", suffix: " to disk" },
+              body: "Which daemon owns this?",
+              createdAt: "2026-01-01T00:00:00Z",
+            },
+            {
+              id: "collab_note",
+              kind: "comment",
+              anchor: { quote: "move the store", prefix: "", suffix: "" },
+              body: "move it behind one interface",
+              author: "SHA256:collab1",
+              createdAt: "2026-01-01T00:00:01Z",
+            },
+          ],
+        })}
+        authorNames={{}}
+        selectedId="own_note"
+        resolvedIds={new Set(["own_note", "collab_note"])}
+        railTab="review"
+        pendingCount={2}
+        cardEdit={null}
+        submitConfirm={null}
+        {...callbacks}
+      />
+    </RailFrame>
+  ),
+  // every annotation border is accent now
+  expectedColors: [DARK.accent],
+  size: { width: 40, height: 24 },
+};
+
+export const Removals: Story = {
+  render: () => (
+    <RailFrame>
+      <ReviewRail
+        session={fixtureDiffSession()}
+        authorNames={{}}
+        resolvedIds={null}
+        railTab="review"
+        pendingCount={0}
+        cardEdit={null}
+        submitConfirm={null}
+        {...callbacks}
+        curationItems={[
+          {
+            id: "diff:src/store.ts#0#1",
+            source: "diff",
+            preview: ["-   private items = [];", "+   private items = new Map();"],
+            revealIndex: 3,
+          },
+          {
+            id: "diff:src/store.ts#1#hunk",
+            source: "diff",
+            preview: ["-   return null;", "+   return fallback();", "+   log(fallback);"],
+            revealIndex: 9,
+          },
+        ]}
+        selectedCurationId="diff:src/store.ts#0#1"
+      />
+    </RailFrame>
+  ),
+  expectedColors: [DARK.red],
+  size: { width: 40, height: 24 },
+};
+
+/** A plan cut and an annotation interleave in one line-ordered stack. */
+export const InterleavedStack: 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}
+        curationItems={[
+          {
+            id: "plan:6-6",
+            source: "plan",
+            preview: ["- add recovery"],
+            revealIndex: 1,
+          },
+        ]}
+        annotationPositions={new Map([[FIXTURE_ANNOTATIONS[0]!.id, 5]])}
+      />
+    </RailFrame>
+  ),
+  expectedColors: [DARK.accent],
+  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 },
+};