@cueloop/client 0.1.0-alpha.32 → 0.1.0-alpha.34

package/src/components/ReviewRail.stories.tsx

@@ -2,14 +2,17 @@ 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";
+import { FIXTURE_ANNOTATIONS, fixtureDiffSession, fixturePlanSession } from "./story-fixtures";
 
 export const meta: StoryMeta = { title: "ReviewRail" };
 
 const callbacks = {
+  curationItems: [],
   onTabChange: () => {},
   onSelectCard: () => {},
   onActivateCard: () => {},
+  onSelectCuration: () => {},
+  onUndoCuration: () => {},
   onSubmitRequest: () => {},
 };
 
@@ -22,19 +25,123 @@ 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}
+        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.green],
+  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 },
 };
 
@@ -42,14 +149,14 @@ export const AgentTab: Story = {
   render: () => (
     <RailFrame>
       <ReviewRail
-      session={fixturePlanSession()}
-      authorNames={{}}
-      resolvedIds={new Set()}
-      railTab="agent"
-      pendingCount={2}
-      cardEdit={null}
-      submitConfirm={null}
-      {...callbacks}
+        session={fixturePlanSession()}
+        authorNames={{}}
+        resolvedIds={new Set()}
+        railTab="agent"
+        pendingCount={2}
+        cardEdit={null}
+        submitConfirm={null}
+        {...callbacks}
       />
     </RailFrame>
   ),
@@ -60,23 +167,23 @@ 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}
+        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>
   ),
@@ -88,17 +195,22 @@ 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}
+        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>
   ),

package/src/components/ReviewRail.tsx

@@ -7,14 +7,18 @@
  */
 
 import React, { forwardRef, useImperativeHandle, useRef } from "react";
-import type { ScrollBoxRenderable } from "@opentui/core";
-import { isAddressed, type Annotation, type ReviewSession } from "@cueloop/schema";
+import { createTextAttributes, type ScrollBoxRenderable } from "@opentui/core";
+import { isAddressed, isAgentNote, type Annotation, type ReviewSession } from "@cueloop/schema";
+import type { CurationItem } from "../session-controller";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
 import { Tabs, Tab, TabList } from "./primitives/Tabs";
 import { Button } from "./primitives/Button";
+import { Toolbar } from "./primitives/Toolbar";
 import { AnnotationCard, type AnnotationDraft } from "./AnnotationCard";
 import { ConfirmCard, type ConfirmCardProps } from "./ConfirmCard";
+import { Card } from "./primitives/Card";
+import { truncateToSingleLine } from "./truncate-text";
 import { resolveDisplayName } from "../attribution";
 
 export type RailTab = "review" | "agent";
@@ -35,6 +39,15 @@ export interface ReviewRailProps {
   selectedId?: string;
   /** Ids whose anchor resolved; null = orphan display off (diff view). */
   resolvedIds: Set<string> | null;
+  /** Removed pieces (diff rejections / plan cuts) interleaved into the card stack. */
+  curationItems: CurationItem[];
+  /** The selected curation item, highlighted and the undo target. */
+  selectedCurationId?: string;
+  /**
+   * Sort position per annotation id (diff row index / plan display index), so
+   * annotation and removal cards interleave in one position-ordered stack.
+   */
+  annotationPositions?: Map<string, number>;
   railTab: RailTab;
   pendingCount: number;
   cardEdit: RailCardEdit | null;
@@ -42,11 +55,15 @@ export interface ReviewRailProps {
   onTabChange: (tab: RailTab) => void;
   onSelectCard: (id: string) => void;
   onActivateCard: (id: string) => void;
+  /** Select a curation item (reveals its diff row); pressing undo restores it. */
+  onSelectCuration: (id: string) => void;
+  /** Restore a curation item (the selected card's undo button, same as the u key). */
+  onUndoCuration: (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,
+   * 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;
@@ -64,13 +81,17 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
     authorNames,
     selectedId,
     resolvedIds,
+    curationItems,
+    selectedCurationId,
+    annotationPositions,
     railTab,
-    pendingCount,
     cardEdit,
     submitConfirm,
     onTabChange,
     onSelectCard,
     onActivateCard,
+    onSelectCuration,
+    onUndoCuration,
     onSubmitRequest,
     width = 34,
     onCollapse,
@@ -94,79 +115,202 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
     },
   }));
 
+  const renderAnnotationCard = (annotation: Annotation): React.ReactNode => (
+    <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),
+        // border-title author: a collaborator's name, "agent" for agent notes, else "me"
+        author: annotation.author
+          ? resolveDisplayName(annotation.author, session.participants, authorNames)
+          : isAgentNote(annotation)
+            ? "agent"
+            : "me",
+        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),
+      }}
+    />
+  );
+
+  // one position-ordered stack: annotation and removal cards interleaved by their
+  // source line (diff row / plan block), original order breaking ties
+  const railEntries: { sort: number; order: number; node: React.ReactNode }[] = [
+    ...openAnnotations.map((annotation, order) => ({
+      sort: annotationPositions?.get(annotation.id) ?? Number.MAX_SAFE_INTEGER,
+      order,
+      node: renderAnnotationCard(annotation),
+    })),
+    ...curationItems.map((item, index) => ({
+      sort: item.revealIndex,
+      order: openAnnotations.length + index,
+      node: (
+        <RemovalCard
+          key={item.id}
+          item={item}
+          isSelected={item.id === selectedCurationId}
+          onSelect={onSelectCuration}
+          onUndo={onUndoCuration}
+          theme={theme}
+        />
+      ),
+    })),
+  ].sort((left, right) => left.sort - right.sort || left.order - right.order);
+
   return (
-    <box style={{ width, backgroundColor: tokens.panel, flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
-      <Tabs selectedKey={railTab} onSelectionChange={(key) => onTabChange(key as RailTab)} theme={theme}>
+    <box
+      style={{
+        width,
+        backgroundColor: tokens.panel,
+        flexDirection: "column",
+        paddingLeft: 1,
+        paddingBottom: 1,
+      }}
+    >
+      <Tabs
+        selectedKey={railTab}
+        onSelectionChange={(key) => onTabChange(key as RailTab)}
+        theme={theme}
+      >
         <TabList>
-          <Tab id="review">{`Review (${pendingCount})`}</Tab>
+          <Tab id="review">Review</Tab>
           <Tab id="agent">Agent</Tab>
         </TabList>
       </Tabs>
-      <text> </text>
       {railTab === "agent" ? (
-        <AgentTab session={session} theme={theme} />
+        <box style={{ flexGrow: 1, flexDirection: "column", paddingLeft: 2 }}>
+          <text> </text>
+          <AgentTab session={session} theme={theme} />
+        </box>
+      ) : openAnnotations.length === 0 && curationItems.length === 0 ? (
+        <box style={{ flexGrow: 1, alignItems: "center", justifyContent: "center" }}>
+          <text fg={tokens.textDim}>
+            {session.annotations.length === 0 ? "no annotations yet" : "all annotations addressed"}
+          </text>
+        </box>
       ) : (
-        <>
-          {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" ? (
+        <box style={{ flexGrow: 1, flexDirection: "column" }}>
+          {addressedCount > 0 ? (
+            <text fg={tokens.textDim}>✓ {addressedCount} addressed by revision</text>
+          ) : null}
+          <scrollbox ref={scrollRef} style={{ flexGrow: 1 }} focused={false}>
+            {railEntries.map((entry) => entry.node)}
+          </scrollbox>
+        </box>
+      )}
+      {/* the confirm card keeps full width, above the footer row */}
+      {railTab !== "agent" && submitConfirm ? (
+        <ConfirmCard {...submitConfirm} theme={theme} />
+      ) : null}
+      {/* footer row: collapse chevron left-bound, the submit affordance inline
+          beside it, both on the rail's last row (the plan's bottom-border height) */}
+      <box style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
+        {onCollapse ? (
+          <box onMouseUp={onCollapse}>
+            <text fg={tokens.textDim}>{">"}</text>
+          </box>
+        ) : null}
+        {railTab !== "agent" && !submitConfirm ? (
+          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}) ⏎`}
+              Submit review
             </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}
+          )
+        ) : null}
+      </box>
     </box>
   );
 });
 
+/** A removal preview reads as removed content: struck through and dimmed. */
+const REMOVAL_ATTRIBUTES = createTextAttributes({ strikethrough: true, dim: true });
+
+/** Preview lines a removal card shows before it collapses to a "+N more" row. */
+const REMOVAL_PREVIEW_LINES = 4;
+
+/** Rough content width inside a removal card's border + padding, for truncation. */
+const REMOVAL_PREVIEW_WIDTH = 24;
+
+/**
+ * A removed piece as a full display card - the same border/padding/selection
+ * chrome as a saved annotation card - previewing the removed content struck
+ * through. Unified across diff (a curated-out hunk/change) and plan (a cut
+ * block). Clicking selects (App reveals its source line); the undo key restores.
+ */
+function RemovalCard({
+  item,
+  isSelected,
+  onSelect,
+  onUndo,
+  theme,
+}: {
+  item: CurationItem;
+  isSelected: boolean;
+  onSelect: (id: string) => void;
+  onUndo: (id: string) => void;
+  theme?: Theme;
+}): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const previewLines = item.preview.slice(0, REMOVAL_PREVIEW_LINES);
+  const overflow = item.preview.length - previewLines.length;
+  // body = the struck-through preview (at least one row) + an overflow row, plus
+  // the undo button's own row when selected (mirrors the draft card's Save/Cancel)
+  const contentRows =
+    Math.max(1, previewLines.length) + (overflow > 0 ? 1 : 0) + (isSelected ? 1 : 0);
+  // border = "what + who": a diff reject or a plan cut, always the reviewer's own
+  const title = ` ${item.source === "diff" ? "REJECT" : "CUT"} · me `;
+  return (
+    <box id={`removal-card-${item.id}`} onMouseUp={() => onSelect(item.id)}>
+      <Card
+        title={title}
+        contentRows={contentRows}
+        borderColor={isSelected ? tokens.red : tokens.border}
+        backgroundColor="transparent"
+        theme={theme}
+      >
+        {previewLines.length === 0 ? (
+          <text fg={tokens.textDim}> </text>
+        ) : (
+          previewLines.map((line, lineIndex) => (
+            <text key={lineIndex} fg={tokens.textDim}>
+              <span attributes={REMOVAL_ATTRIBUTES}>
+                {truncateToSingleLine(line, REMOVAL_PREVIEW_WIDTH)}
+              </span>
+            </text>
+          ))
+        )}
+        {overflow > 0 ? <text fg={tokens.textDim}>{`  …+${overflow} more`}</text> : null}
+        {isSelected ? (
+          <Toolbar>
+            <Button variant="solid" onPress={() => onUndo(item.id)} theme={theme}>
+              {" undo "}
+            </Button>
+          </Toolbar>
+        ) : null}
+      </Card>
+    </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);

package/src/components/SettingsDialog.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { DARK } from "../theme";
+import { THEME_PRESETS } from "../theme-presets";
 import type { Story, StoryMeta } from "./story";
 import { SettingsDialog, type SettingsCategory } from "./SettingsDialog";
 
@@ -12,7 +13,12 @@ const CATEGORIES: SettingsCategory[] = [
     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"] },
+      {
+        key: "autoClose",
+        label: "Auto-close on submit",
+        kind: "cycle",
+        options: ["off", "3s", "on"],
+      },
     ],
   },
   {
@@ -20,13 +26,37 @@ const CATEGORIES: SettingsCategory[] = [
     name: "Display",
     description: "plan width and chrome",
     rows: [
-      { key: "planWidth", label: "Plan width", kind: "cycle", options: ["default", "wide", "full"] },
+      {
+        key: "planWidth",
+        label: "Plan width",
+        kind: "cycle",
+        options: ["default", "wide", "full"],
+      },
       { key: "showLineNumbers", label: "Line numbers", kind: "toggle" },
     ],
   },
+  {
+    id: "appearance",
+    name: "Appearance",
+    description: "the color theme",
+    rows: [
+      {
+        key: "theme",
+        label: "Theme",
+        kind: "cycle",
+        options: ["cueloop", "Rosé Pine Moon", "Nord"],
+      },
+    ],
+  },
 ];
 
-const VALUES = { displayName: "amber-heron", autoClose: "3s", planWidth: "default", showLineNumbers: true };
+const VALUES = {
+  displayName: "amber-heron",
+  autoClose: "3s",
+  planWidth: "default",
+  showLineNumbers: true,
+  theme: "Rosé Pine Moon",
+};
 
 export const NavZone: Story = {
   render: () => (
@@ -61,3 +91,21 @@ export const BodyZone: Story = {
   expectedColors: [DARK.green],
   size: { width: 100, height: 30 },
 };
+
+export const AppearanceThemed: Story = {
+  render: () => (
+    <SettingsDialog
+      isOpen
+      categories={CATEGORIES}
+      values={VALUES}
+      activeCategoryId="appearance"
+      activeRowIndex={0}
+      activeZone="body"
+      onCategorySelect={() => {}}
+      onRowActivate={() => {}}
+      theme={THEME_PRESETS["rose-pine-moon"]}
+    />
+  ),
+  expectedColors: [THEME_PRESETS["rose-pine-moon"].accent],
+  size: { width: 100, height: 30 },
+};