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

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

@@ -40,8 +40,13 @@ export interface ReviewRailProps {
   onSelectCard: (id: string) => void;
   onActivateCard: (id: string) => void;
   onSubmitRequest: () => void;
-  /** Rail column width; the app derives it from the terminal dimensions. */
+  /** 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;
 }
 
@@ -64,6 +69,7 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
     onActivateCard,
     onSubmitRequest,
     width = 34,
+    onCollapse,
     theme,
   }: ReviewRailProps,
   handleRef,
@@ -141,6 +147,13 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
           )}
         </>
       )}
+      {/* 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",

package/src/components/primitives/Dialog.tsx

@@ -7,6 +7,7 @@
 import React from "react";
 import type { Theme } from "../../theme";
 import { useComponentTheme } from "../theme-context";
+import { FRAME_BORDER_STYLE } from "./frame";
 
 export interface DialogProps {
   isOpen: boolean;
@@ -38,7 +39,7 @@ export function Dialog({ isOpen, title, width, height, theme, children }: Dialog
           width,
           height,
           border: true,
-          borderStyle: "rounded",
+          borderStyle: FRAME_BORDER_STYLE,
           borderColor: tokens.accent,
           backgroundColor: tokens.panel,
           flexDirection: "column",

package/src/components/primitives/frame.test.ts

@@ -0,0 +1,12 @@
+/**
+ * Locks the single frame border rule: every bordered frame reads this token,
+ * so a regression to square corners (or any other style) fails here first,
+ * before the slower VRT snapshots catch it. Decision: rounded (issue #116).
+ */
+
+import { expect, test } from "bun:test";
+import { FRAME_BORDER_STYLE } from "./frame";
+
+test("frames use the rounded border style", () => {
+  expect(FRAME_BORDER_STYLE).toBe("rounded");
+});

package/src/components/primitives/frame.ts

@@ -0,0 +1,14 @@
+/**
+ * The one frame border rule for the design system. Every bordered frame -
+ * cards, dialogs, and the stories gallery chrome - reads its corner style
+ * from FRAME_BORDER_STYLE, so the rounded-corner decision lives in a single
+ * place and can never drift between frames. Buttons stay text-first and
+ * borderless: the frame they sit in carries the border, not the button.
+ *
+ * Decision: rounded on the frames, not on the buttons (issue #116).
+ */
+
+import type { BorderStyle } from "@opentui/core";
+
+/** Corner style shared by every bordered frame in the app. */
+export const FRAME_BORDER_STYLE: BorderStyle = "rounded";

package/src/components/stories-app.tsx

@@ -11,6 +11,7 @@ import { createRoot, useKeyboard } from "@opentui/react";
 import { DARK } from "../theme";
 import { ThemeProvider } from "./theme-context";
 import { loadStories, type LoadedStory } from "./story";
+import { FRAME_BORDER_STYLE } from "./primitives/frame";
 
 function StoriesApp({ stories, onExit }: { stories: LoadedStory[]; onExit: () => void }): React.ReactNode {
   const moduleTitles = useMemo(() => [...new Set(stories.map((story) => story.moduleTitle))], [stories]);
@@ -60,7 +61,7 @@ function StoriesApp({ stories, onExit }: { stories: LoadedStory[]; onExit: () =>
               flexGrow: 1,
               flexDirection: "column",
               border: true,
-              borderStyle: "rounded",
+              borderStyle: FRAME_BORDER_STYLE,
               borderColor: DARK.border,
             }}
             title={` ${current.storyName} (${moduleStories.indexOf(current) + 1}/${moduleStories.length}) `}

package/src/config.test.ts

@@ -2,7 +2,8 @@ import { describe, expect, test } from "bun:test";
 import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
-import { DEFAULT_KEYS, actionFor, loadConfig } from "./config";
+import { DEFAULT_KEYS, actionFor, loadConfig, persistReviewState, persistReviewWidth } from "./config";
+import { REVIEW_DEFAULT_WIDTH, REVIEW_MAX_WIDTH } from "./review-panel";
 import { DARK } from "./theme";
 
 describe("loadConfig", () => {
@@ -82,6 +83,55 @@ describe("loadConfig", () => {
       rmSync(dir, { recursive: true, force: true });
     }
   });
+
+  test("[ui] review panel defaults to an expanded rail at the default width", () => {
+    const config = loadConfig({ userConfigPath: "/nonexistent/config.toml" });
+    expect(config.ui.reviewState).toBe("expanded");
+    expect(config.ui.reviewWidth).toBe(REVIEW_DEFAULT_WIDTH);
+  });
+
+  test("[ui] parses review_width (clamped) and review_state", () => {
+    const dir = mkdtempSync(join(tmpdir(), "cueloop-cfg6-"));
+    const path = join(dir, "config.toml");
+    writeFileSync(path, `[ui]\nreview_width = 999\nreview_state = "compact"\n`);
+    try {
+      const config = loadConfig({ userConfigPath: path });
+      expect(config.ui.reviewWidth).toBe(REVIEW_MAX_WIDTH); // out-of-range width clamps
+      expect(config.ui.reviewState).toBe("compact");
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
+  test("[ui] ignores an unknown review_state and a non-numeric width", () => {
+    const dir = mkdtempSync(join(tmpdir(), "cueloop-cfg7-"));
+    const path = join(dir, "config.toml");
+    writeFileSync(path, `[ui]\nreview_width = "wide"\nreview_state = "sideways"\n`);
+    try {
+      const config = loadConfig({ userConfigPath: path });
+      expect(config.ui.reviewWidth).toBe(REVIEW_DEFAULT_WIDTH);
+      expect(config.ui.reviewState).toBe("expanded");
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
+  test("persistReviewWidth and persistReviewState round-trip through the config file", () => {
+    const dir = mkdtempSync(join(tmpdir(), "cueloop-cfg8-"));
+    const path = join(dir, "config.toml");
+    try {
+      persistReviewWidth(42, path);
+      persistReviewState("hidden", path);
+      const config = loadConfig({ userConfigPath: path });
+      expect(config.ui.reviewWidth).toBe(42);
+      expect(config.ui.reviewState).toBe("hidden");
+      // a second write replaces the key in place rather than appending a duplicate
+      persistReviewWidth(30, path);
+      expect(loadConfig({ userConfigPath: path }).ui.reviewWidth).toBe(30);
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
 });
 
 describe("integrations.obsidian config", () => {