@cueloop/client 0.1.0-alpha.20 → 0.1.0-alpha.22

package/src/clipboard.ts

@@ -0,0 +1,26 @@
+/**
+ * Best-effort system clipboard. Each platform has its own tool; we try them in
+ * order and report whether one worked, so the caller can fall back to printing
+ * the line (the over-SSH case, where no clipboard tool exists). Mirrors how
+ * herdr confirms a copy.
+ */
+
+/** The clipboard-write commands to try, most-preferred first, for this platform. */
+export function clipboardCommands(platform: NodeJS.Platform = process.platform): string[][] {
+  if (platform === "darwin") return [["pbcopy"]];
+  if (platform === "win32") return [["clip.exe"]];
+  return [["wl-copy"], ["xclip", "-selection", "clipboard"], ["xsel", "--clipboard", "--input"]];
+}
+
+/** Copy `text` to the clipboard; false when no tool is available or all fail. */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  for (const command of clipboardCommands()) {
+    try {
+      const proc = Bun.spawn(command, { stdin: Buffer.from(text), stdout: "ignore", stderr: "ignore" });
+      if ((await proc.exited) === 0) return true;
+    } catch {
+      // tool not installed - try the next one
+    }
+  }
+  return false;
+}

package/src/components/AnnotationCard.compose-rows.test.ts

@@ -0,0 +1,49 @@
+/**
+ * The composer's auto-grow row math as a pure function: hard newlines and soft
+ * wrapping both add rows, growth stops at the cap, and a non-positive width
+ * (before layout is known) degrades to a hard-newline count. The live textarea
+ * scrolls internally past the cap, so this only needs to get the growth curve
+ * and the ceiling right.
+ */
+
+import { describe, expect, test } from "bun:test";
+import { COMPOSE_MAX_ROWS, composeRowCount } from "./AnnotationCard";
+
+describe("composeRowCount", () => {
+  const width = 10;
+
+  test("empty and short text are one row", () => {
+    expect(composeRowCount("", width)).toBe(1);
+    expect(composeRowCount("hi", width)).toBe(1);
+    expect(composeRowCount("exactly-10", width)).toBe(1); // length 10 / width 10
+  });
+
+  test("hard newlines add rows", () => {
+    expect(composeRowCount("a\nb", width)).toBe(2);
+    expect(composeRowCount("a\nb\nc", width)).toBe(3);
+    // a blank trailing line still occupies a row
+    expect(composeRowCount("a\n", width)).toBe(2);
+  });
+
+  test("a soft-wrapped long line grows the box", () => {
+    expect(composeRowCount("a".repeat(11), width)).toBe(2); // ceil(11/10)
+    expect(composeRowCount("a".repeat(25), width)).toBe(3); // ceil(25/10)
+  });
+
+  test("wrapping and hard newlines combine", () => {
+    // 1 row for "short" plus ceil(21/10)=3 rows for the long line
+    expect(composeRowCount("short\n" + "b".repeat(21), width)).toBe(4);
+  });
+
+  test("growth is capped", () => {
+    expect(composeRowCount("a".repeat(100), width)).toBe(COMPOSE_MAX_ROWS);
+    expect(composeRowCount("l\ni\nn\ne\ns\nx", width)).toBe(COMPOSE_MAX_ROWS);
+    expect(composeRowCount("a\nb", width, 1)).toBe(1); // custom cap
+  });
+
+  test("a non-positive width counts hard newlines only, never divides by zero", () => {
+    expect(composeRowCount("a".repeat(100), 0)).toBe(1);
+    expect(composeRowCount("a\nb\nc", 0)).toBe(3);
+    expect(composeRowCount("a".repeat(100), -5)).toBe(1);
+  });
+});

package/src/components/AnnotationCard.tsx

@@ -4,11 +4,13 @@
  * its body in place. Compose, saved, and re-edit share this rendering path,
  * so the kind-color and quote treatment can never drift between them.
  *
- * Bodies are multiline: the composer is a textarea (wrap, undo/redo,
- * shift+⏎ for a new line) while plain ⏎ stays the save key.
+ * Bodies are multiline: the composer is a textarea (wrap, undo/redo). Plain ⏎
+ * stays the save key while ⌥/Alt+⏎ and shift+⏎ insert a new line (the Slack
+ * convention). The box auto-grows with the wrapped text up to a cap, then
+ * scrolls internally.
  */
 
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import type { KeyBinding, TextareaRenderable } from "@opentui/core";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
@@ -43,24 +45,63 @@ export interface AnnotationCardProps {
   theme?: Theme;
 }
 
-/** ⏎ saves (the grammar owns it); shift+⏎ makes the body multiline. */
+/**
+ * ⏎ submits (which keeps the textarea from inserting its default newline; the
+ * grammar owns the actual save). ⌥/Alt+⏎ and shift+⏎ insert a newline so the
+ * body can grow multiline without leaving the composer.
+ *
+ * Option/Alt reaches a binding as `meta`, not `option`: a binding key here is
+ * built from name+ctrl+shift+meta+super only, so the newline binding matches on
+ * `meta`. This also overrides the textarea default that maps meta+⏎ to submit.
+ */
 const COMPOSE_KEY_BINDINGS: KeyBinding[] = [
   { name: "return", action: "submit" },
+  { name: "return", meta: true, action: "newline" },
   { name: "return", shift: true, action: "newline" },
 ];
 
-function editorRows(text: string): number {
-  return Math.min(4, Math.max(1, text.split("\n").length));
+/** The composer never grows past this many rows; beyond it the textarea scrolls. */
+export const COMPOSE_MAX_ROWS = 4;
+
+/**
+ * Visible row count for the composer, so a soft-wrapped long line grows the box
+ * just like a hard newline does. Each logical line takes `ceil(length /
+ * contentWidth)` visual rows (at least one), summed over the hard-newline lines
+ * and capped. A non-positive width (before layout is known) counts hard
+ * newlines only. Beyond the cap the textarea scrolls internally and keeps the
+ * caret line in view.
+ */
+export function composeRowCount(text: string, contentWidth: number, cap: number = COMPOSE_MAX_ROWS): number {
+  const usableWidth = contentWidth > 0 ? contentWidth : Number.MAX_SAFE_INTEGER;
+  let visualRowCount = 0;
+  for (const line of text.split("\n")) {
+    visualRowCount += Math.max(1, Math.ceil(line.length / usableWidth));
+  }
+  return Math.min(cap, Math.max(1, visualRowCount));
 }
 
-function DraftEditor({ draft, theme }: { draft: AnnotationDraft; theme?: Theme }): React.ReactNode {
+function DraftEditor({
+  draft,
+  rows,
+  onRowsChange,
+  theme,
+}: {
+  draft: AnnotationDraft;
+  /** Current visible height in rows; owned by the parent so the card frame agrees. */
+  rows: number;
+  onRowsChange: (rows: number) => void;
+  theme?: Theme;
+}): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const editorRef = useRef<TextareaRenderable | null>(null);
   // re-edit opens with the caret after the existing body, like a text field
   const initialTextLength = useRef(draft.text.length);
   useEffect(() => {
     const editor = editorRef.current;
-    if (editor) editor.cursorOffset = initialTextLength.current;
+    if (!editor) return;
+    editor.cursorOffset = initialTextLength.current;
+    // the box is laid out now, so its width is known: size to the wrapped body
+    onRowsChange(composeRowCount(editor.plainText, editor.width));
   }, []);
   return (
     <>
@@ -72,10 +113,12 @@ function DraftEditor({ draft, theme }: { draft: AnnotationDraft; theme?: Theme }
         keyBindings={COMPOSE_KEY_BINDINGS}
         onContentChange={() => {
           const editor = editorRef.current;
-          if (editor) draft.onInput(editor.plainText);
+          if (!editor) return;
+          draft.onInput(editor.plainText);
+          onRowsChange(composeRowCount(editor.plainText, editor.width));
         }}
         style={{
-          height: editorRows(draft.text),
+          height: rows,
           backgroundColor: tokens.elevated,
           focusedBackgroundColor: tokens.elevated,
           textColor: tokens.text,
@@ -97,18 +140,28 @@ function DraftEditor({ draft, theme }: { draft: AnnotationDraft; theme?: Theme }
 export function AnnotationCard({ id, kind, quote, draft, saved, theme }: AnnotationCardProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const kindColor = kind === "suggestion" ? tokens.green : tokens.accent;
+  const activeDraft = draft ?? saved?.editing ?? null;
+  // The composer's visible height, grown from the wrapped text. It is shared
+  // with the card frame (contentRows) so the border never clips the textarea
+  // or the toolbar. Seeded from hard newlines, then corrected once the mounted
+  // textarea reports its measured width.
+  const [editorRowCount, setEditorRowCount] = useState(() =>
+    // Width 0 is the "layout not known yet" contract: count hard newlines only,
+    // until the mounted textarea reports its measured width below.
+    composeRowCount(activeDraft?.text ?? "", 0),
+  );
   if (draft) {
     const verb = kind === "suggestion" ? "suggest replacement for" : "comment on";
     return (
       <Card
         title={` ${verb} "${truncateToSingleLine(quote, 40)}" `}
-        contentRows={editorRows(draft.text) + 1}
+        contentRows={editorRowCount + 1}
         borderColor={kindColor}
         marginLeft={2}
         marginRight={2}
         theme={theme}
       >
-        <DraftEditor draft={draft} theme={theme} />
+        <DraftEditor draft={draft} rows={editorRowCount} onRowsChange={setEditorRowCount} theme={theme} />
       </Card>
     );
   }
@@ -127,7 +180,7 @@ export function AnnotationCard({ id, kind, quote, draft, saved, theme }: Annotat
       </text>
       <text fg={tokens.textDim}>  "{truncateToSingleLine(quote, 26)}"</text>
       {card.editing ? (
-        <DraftEditor draft={card.editing} theme={theme} />
+        <DraftEditor draft={card.editing} rows={editorRowCount} onRowsChange={setEditorRowCount} theme={theme} />
       ) : (
         <text fg={card.isOrphan ? tokens.textDim : tokens.textMuted}>  {truncateToSingleLine(card.body, 28)}</text>
       )}

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(),
+  selectedId: FIXTURE_ANNOTATIONS[0]!.id,
+  resolvedIds: new Set(FIXTURE_ANNOTATIONS.map((annotation) => annotation.id)),
+  railTab: "review" as const,
+  pendingCount: 2,
+  cardEdit: null,
+  submitConfirm: null,
+  onTabChange: () => {},
+  onSelectCard: () => {},
+  onActivateCard: () => {},
+  onSubmitRequest: () => {},
+};
+
+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.bg }}>
+      <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} height={24} dragging={false} rail={rail} {...panelCallbacks} />
+    </PanelFrame>
+  ),
+  expectedColors: [DARK.panel, DARK.border],
+  size: { width: 80, height: 24 },
+};
+
+export const ExpandedWide: Story = {
+  render: () => (
+    <PanelFrame>
+      <ReviewPanel mode="expanded" width={REVIEW_MAX_WIDTH} height={24} dragging={false} rail={rail} {...panelCallbacks} />
+    </PanelFrame>
+  ),
+  expectedColors: [DARK.panel, DARK.green],
+  size: { width: 90, height: 24 },
+};
+
+/** Dragging accents the divider glyph column. */
+export const DraggingDivider: Story = {
+  render: () => (
+    <PanelFrame>
+      <ReviewPanel mode="expanded" width={34} height={24} dragging={true} rail={rail} {...panelCallbacks} />
+    </PanelFrame>
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 80, height: 24 },
+};
+
+export const Compact: Story = {
+  render: () => (
+    <PanelFrame>
+      <ReviewPanel mode="compact" width={34} height={24} dragging={false} rail={rail} {...panelCallbacks} />
+    </PanelFrame>
+  ),
+  expectedColors: [DARK.accent, DARK.green],
+  size: { width: 60, height: 24 },
+};
+
+export const Hidden: Story = {
+  render: () => (
+    <PanelFrame>
+      <ReviewPanel mode="hidden" width={34} height={24} dragging={false} rail={rail} {...panelCallbacks} />
+    </PanelFrame>
+  ),
+  size: { width: 60, height: 24 },
+};

package/src/components/ReviewPanel.tsx

@@ -0,0 +1,116 @@
+/**
+ * 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, reviewRowsToDivider, type ReviewPanelMode } from "../review-panel";
+
+export interface ReviewPanelProps {
+  mode: ReviewPanelMode;
+  /** Expanded-rail width in columns (already clamped by the app). */
+  width: number;
+  /** Rows for the divider glyph column - the height of the plan/rail row. */
+  height: number;
+  /** Accent the divider while a drag is live. */
+  dragging: boolean;
+  /** 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;
+}
+
+/** A single-column stack of `│`, accent while dragging. Grabbing arms a drag. */
+function ReviewDivider({
+  dragging,
+  rows,
+  onGrab,
+  theme,
+}: {
+  dragging: boolean;
+  rows: number;
+  onGrab: () => void;
+  theme?: Theme;
+}): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  return (
+    <box style={{ width: 1 }} onMouseDown={onGrab}>
+      <text fg={dragging ? tokens.accent : tokens.border}>{reviewRowsToDivider(rows)}</text>
+    </box>
+  );
+}
+
+/** The compact strip: the card count, one kind-colored dot per card, and the
+ *  `«` chevron left-bound to match the expanded `»` gap. */
+function CompactRail({
+  annotations,
+  onExpand,
+  theme,
+}: {
+  annotations: Annotation[];
+  onExpand: () => void;
+  theme?: Theme;
+}): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const dotColor = (annotation: Annotation): string =>
+    annotation.kind === "suggestion" ? tokens.green : tokens.accent;
+  return (
+    <box
+      style={{ width: REVIEW_COMPACT_WIDTH, backgroundColor: tokens.panel, flexDirection: "column", paddingTop: 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={dotColor(annotation)}>
+            ●
+          </text>
+        ))}
+      </box>
+      <box style={{ flexGrow: 1 }} />
+      <box style={{ paddingLeft: 1 }} onMouseUp={onExpand}>
+        <text fg={tokens.textDim}>«</text>
+      </box>
+    </box>
+  );
+}
+
+export function ReviewPanel({
+  mode,
+  width,
+  height,
+  dragging,
+  onDividerGrab,
+  onToggle,
+  rail,
+  railRef,
+  theme,
+}: ReviewPanelProps): React.ReactNode {
+  if (mode === "hidden") return null;
+  return (
+    <>
+      <ReviewDivider dragging={dragging} rows={height} onGrab={onDividerGrab} theme={theme} />
+      {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.tsx

@@ -8,7 +8,7 @@
 
 import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import type { ScrollBoxRenderable } from "@opentui/core";
-import type { Annotation, ReviewSession } from "@cueloop/schema";
+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";
@@ -40,8 +40,15 @@ export interface ReviewRailProps {
   onSelectCard: (id: string) => void;
   onActivateCard: (id: string) => void;
   onSubmitRequest: () => void;
-  /** Rail column width; the app derives it from the terminal dimensions. */
+  /** Publish the plan as a share; omitted for non-owners (hides the button). */
+  onShareRequest?: () => 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;
 }
 
@@ -63,13 +70,18 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
     onSelectCard,
     onActivateCard,
     onSubmitRequest,
+    onShareRequest,
     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 => {
@@ -95,11 +107,12 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
       ) : (
         <>
           {session.workingCopy !== undefined ? <text fg={tokens.textDim}>± plan edits → one diff</text> : null}
-          {session.annotations.length === 0 ? (
-            <text fg={tokens.textDim}>no annotations yet</text>
+          {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}>
-              {session.annotations.map((annotation) => (
+              {openAnnotations.map((annotation) => (
                 <AnnotationCard
                   key={annotation.id}
                   id={`annotation-card-${annotation.id}`}
@@ -139,8 +152,20 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
               {`Submit review (${pendingCount}) ⏎`}
             </Button>
           )}
+          {onShareRequest && session.status !== "resolved" ? (
+            <Button variant="plain" onPress={onShareRequest} theme={theme}>
+              {"Share plan ⇧S"}
+            </Button>
+          ) : null}
         </>
       )}
+      {/* 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>
   );
 });

package/src/components/__snapshots__/stories.test.tsx.snap

@@ -1315,5 +1315,145 @@ exports[`stories catalog WalkWizard/WithAgentNote renders, snapshots, and carrie
                                                                                 
                                                                                 
                                                                                 
+"
+`;
+
+exports[`stories catalog ReviewPanel/Compact renders, snapshots, and carries its colors: ReviewPanel/Compact 1`] = `
+" The plan takes the width the panel hands back.      │      
+                                                     │  2   
+                                                     │      
+                                                     │  ●   
+                                                     │  ●   
+                                                     │      
+                                                     │      
+                                                     │      
+                                                     │      
+                                                     │      
+                                                     │      
+                                                     │      
+                                                     │      
+                                                     │      
+                                                     │      
+                                                     │      
+                                                     │      
+                                                     │      
+                                                     │      
+                                                     │      
+                                                     │      
+                                                     │      
+                                                     │      
+                                                     │ «    
+"
+`;
+
+exports[`stories catalog ReviewPanel/DraggingDivider renders, snapshots, and carries its colors: ReviewPanel/DraggingDivider 1`] = `
+" The plan takes the width the panel hands    │                                  
+ back.                                       │  Review (2)  Agent               
+                                             │                                  
+                                             │ ▸ COMMENT · pending              
+                                             │   "persists sessions"            
+                                             │   Which daemon owns this?        
+                                             │                                  
+                                             │   SUGGESTION · pending           
+                                             │   "move the store"               
+                                             │   move the store behind one i…   
+                                             │                                  
+                                             │                                  
+                                             │                                  
+                                             │                                  
+                                             │                                  
+                                             │                                  
+                                             │                                  
+                                             │                                  
+                                             │                                  
+                                             │                                  
+                                             │                                  
+                                             │                                  
+                                             │ Submit review (2) ⏎              
+                                             │ »                                
+"
+`;
+
+exports[`stories catalog ReviewPanel/ExpandedNarrow renders, snapshots, and carries its colors: ReviewPanel/ExpandedNarrow 1`] = `
+" The plan takes the width the panel hands back.        │                        
+                                                       │  Review (2)  Agent     
+                                                       │                        
+                                                       │ ▸ COMMENT · pending    
+                                                       │   "persists sessions"  
+                                                       │   Which daemon owns    
+                                                       │ this?                  
+                                                       │                        
+                                                       │   SUGGESTION · pending 
+                                                       │   "move the store"     
+                                                       │   move the store       
+                                                       │ behind one i…          
+                                                       │                        
+                                                       │                        
+                                                       │                        
+                                                       │                        
+                                                       │                        
+                                                       │                        
+                                                       │                        
+                                                       │                        
+                                                       │                        
+                                                       │                        
+                                                       │ Submit review (2) ⏎    
+                                                       │ »                      
+"
+`;
+
+exports[`stories catalog ReviewPanel/ExpandedWide renders, snapshots, and carries its colors: ReviewPanel/ExpandedWide 1`] = `
+" The plan takes the width the panel    │                                                  
+ hands back.                           │  Review (2)  Agent                               
+                                       │                                                  
+                                       │ ▸ COMMENT · pending                              
+                                       │   "persists sessions"                            
+                                       │   Which daemon owns this?                        
+                                       │                                                  
+                                       │   SUGGESTION · pending                           
+                                       │   "move the store"                               
+                                       │   move the store behind one i…                   
+                                       │                                                  
+                                       │                                                  
+                                       │                                                  
+                                       │                                                  
+                                       │                                                  
+                                       │                                                  
+                                       │                                                  
+                                       │                                                  
+                                       │                                                  
+                                       │                                                  
+                                       │                                                  
+                                       │                                                  
+                                       │ Submit review (2) ⏎                              
+                                       │ »                                                
+"
+`;
+
+exports[`stories catalog ReviewPanel/Hidden renders, snapshots, and carries its colors: ReviewPanel/Hidden 1`] = `
+" The plan takes the width the panel hands back.             
+                                                            
+                                                            
+                                                            
+                                                            
+                                                            
+                                                            
+                                                            
+                                                            
+                                                            
+                                                            
+                                                            
+                                                            
+                                                            
+                                                            
+                                                            
+                                                            
+                                                            
+                                                            
+                                                            
+                                                            
+                                                            
+                                                            
+                                                            
 "
 `;

package/src/components/primitives/Card.tsx

@@ -8,6 +8,7 @@
 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;
@@ -44,7 +45,7 @@ export function Card({
         marginLeft,
         marginRight,
         border: true,
-        borderStyle: "rounded",
+        borderStyle: FRAME_BORDER_STYLE,
         borderColor: borderColor ?? tokens.border,
         backgroundColor: backgroundColor ?? tokens.elevated,
         flexDirection: "column",