@cueloop/client 0.1.0-alpha.31 → 0.1.0-alpha.33

package/src/components/DiffSheet.tsx

@@ -14,12 +14,22 @@ import type { DiffRow } from "../view-diff";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
 import { truncateToSingleLine } from "./truncate-text";
+import { AnnotationCard, type AnnotationDraft } from "./AnnotationCard";
+import { FRAME_BORDER_STYLE } from "./primitives/frame";
+
+export interface DiffComposeState {
+  kind: "comment" | "suggestion";
+  rowIndex: number;
+  quote: string;
+  draft: AnnotationDraft;
+}
 
 export interface DiffSheetProps {
   rows: DiffRow[];
   cursor: number;
   annotations: Annotation[];
   focusedAnnotationId?: string;
+  compose?: DiffComposeState | null;
   theme?: Theme;
 }
 
@@ -32,8 +42,8 @@ function rowLine(row: DiffRow): string {
   return row.text.replace(/\n$/, "");
 }
 
-/** Chunks split after an annotated row so its card can sit directly below. */
-function segmentRows(rows: DiffRow[], annotatedByRow: Map<number, Annotation>): DiffSegment[] {
+/** Chunks split after an annotated or composed row so a card can sit below. */
+function segmentRows(rows: DiffRow[], annotatedByRow: Map<number, Annotation>, composeRowIndex?: number): DiffSegment[] {
   const segments: DiffSegment[] = [];
   let chunk: DiffRow[] = [];
   let chunkStart = 0;
@@ -55,6 +65,9 @@ function segmentRows(rows: DiffRow[], annotatedByRow: Map<number, Annotation>):
     if (annotation) {
       closeChunk(annotation);
       chunkStart = rowIndex + 1;
+    } else if (rowIndex === composeRowIndex) {
+      closeChunk(null);
+      chunkStart = rowIndex + 1;
     }
   }
   closeChunk(null);
@@ -100,10 +113,10 @@ function DiffChunk({
     // the renderable's config parser requires the gutter key to be present
     const colors = new Map<number, { gutter: string | undefined; content: string }>();
     if (segment.annotation) {
-      colors.set(segment.rows.length - 1, { gutter: undefined, content: tokens.markCommentBg });
+      colors.set(segment.rows.length - 1, { gutter: undefined, content: tokens.markCommentBackground });
     }
     if (cursorInChunk >= 0 && cursorInChunk < segment.rows.length) {
-      colors.set(cursorInChunk, { gutter: tokens.cursorBg, content: tokens.cursorBg });
+      colors.set(cursorInChunk, { gutter: tokens.cursorBackground, content: tokens.cursorBackground });
     }
     return colors;
   }, [segment, cursorInChunk, tokens]);
@@ -124,7 +137,7 @@ function DiffChunk({
       <line-number
         ref={gutterRef}
         fg={tokens.textDim}
-        bg={tokens.bg}
+        bg={tokens.background}
         minWidth={4}
         paddingRight={1}
         lineNumbers={lineNumbers}
@@ -133,14 +146,14 @@ function DiffChunk({
         <text style={{ wrapMode: "none" }} selectable={false}>
           {segment.rows.map((row, lineIndex) => {
             const sign = row.kind === "add" ? "+" : row.kind === "del" ? "-" : " ";
-            const foreground = row.kind === "add" ? tokens.insFg : row.kind === "del" ? tokens.delFg : tokens.textMuted;
+            const foreground = row.kind === "add" ? tokens.insertedForeground : row.kind === "del" ? tokens.deletedForeground : tokens.textMuted;
             const isCursorRow = lineIndex === cursorInChunk;
             const isAnnotatedRow = segment.annotation !== null && lineIndex === segment.rows.length - 1;
             return (
               <span
                 key={lineIndex}
                 fg={foreground}
-                bg={isCursorRow ? tokens.cursorBg : isAnnotatedRow ? tokens.markCommentBg : undefined}
+                bg={isCursorRow ? tokens.cursorBackground : isAnnotatedRow ? tokens.markCommentBackground : undefined}
               >
                 {(lineIndex > 0 ? "\n" : "") + sign + rowLine(row)}
               </span>
@@ -160,7 +173,7 @@ function DiffChunk({
   );
 }
 
-export function DiffSheet({ rows, cursor, annotations, focusedAnnotationId, theme }: DiffSheetProps): React.ReactNode {
+export function DiffSheet({ rows, cursor, annotations, focusedAnnotationId, compose, theme }: DiffSheetProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const scrollRef = useRef<ScrollBoxRenderable | null>(null);
 
@@ -175,7 +188,10 @@ export function DiffSheet({ rows, cursor, annotations, focusedAnnotationId, them
     return byRow;
   }, [rows, annotations]);
 
-  const segments = useMemo(() => segmentRows(rows, annotatedByRow), [rows, annotatedByRow]);
+  const segments = useMemo(
+    () => segmentRows(rows, annotatedByRow, compose?.rowIndex),
+    [rows, annotatedByRow, compose?.rowIndex],
+  );
 
   // content y offset per row index, for cursor-following scroll
   const rowOffsets = useMemo(() => {
@@ -208,33 +224,43 @@ export function DiffSheet({ rows, cursor, annotations, focusedAnnotationId, them
   }, [cursor, rowOffsets]);
 
   return (
-    <box style={{ flexGrow: 1, flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
+    <box
+      style={{
+        flexGrow: 1,
+        flexDirection: "column",
+        border: true,
+        borderStyle: FRAME_BORDER_STYLE,
+        borderColor: tokens.text,
+        paddingLeft: 1,
+        paddingTop: 0,
+      }}
+    >
       <scrollbox ref={scrollRef} style={{ flexGrow: 1 }} focused={false}>
         {segments.map((segment, segmentIndex) => {
           if (segment.kind === "header") {
             const isCursor = segment.rowIndex === cursor;
             if (segment.row.kind === "file") {
               return (
-                <text key={segmentIndex} fg={tokens.text} bg={isCursor ? tokens.cursorBg : tokens.panel}>
+                <text key={segmentIndex} fg={tokens.text} bg={isCursor ? tokens.cursorBackground : tokens.panel}>
                   {isCursor ? "▎" : " "}■ {rowLine(segment.row)}
                 </text>
               );
             }
             return (
-              <text key={segmentIndex} fg={tokens.blue} bg={isCursor ? tokens.cursorBg : undefined}>
+              <text key={segmentIndex} fg={tokens.blue} bg={isCursor ? tokens.cursorBackground : undefined}>
                 {isCursor ? "▎" : " "}
                 {rowLine(segment.row)}
               </text>
             );
           }
+          const lastRowIndex = segment.firstRowIndex + segment.rows.length - 1;
           return (
-            <DiffChunk
-              key={segmentIndex}
-              segment={segment}
-              cursor={cursor}
-              focusedAnnotationId={focusedAnnotationId}
-              theme={theme}
-            />
+            <React.Fragment key={segmentIndex}>
+              <DiffChunk segment={segment} cursor={cursor} focusedAnnotationId={focusedAnnotationId} theme={theme} />
+              {compose && compose.rowIndex === lastRowIndex ? (
+                <AnnotationCard kind={compose.kind} quote={compose.quote} draft={compose.draft} theme={theme} />
+              ) : null}
+            </React.Fragment>
           );
         })}
       </scrollbox>

package/src/components/InboxList.stories.tsx

@@ -8,7 +8,7 @@ export const meta: StoryMeta = { title: "InboxList" };
 
 export const TwoPending: Story = {
   render: () => <InboxList inbox={[fixturePlanSession(), fixtureDiffSession()]} cursor={0} />,
-  expectedColors: [DARK.accent, DARK.cursorBg],
+  expectedColors: [DARK.accent, DARK.cursorBackground],
   size: { width: 80, height: 12 },
 };
 

package/src/components/InboxList.tsx

@@ -23,7 +23,7 @@ export interface InboxListProps {
 export function InboxList({ inbox, cursor, onRequestDelete, theme }: InboxListProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   return (
-    <box style={{ flexDirection: "column", width: "100%", height: "100%", backgroundColor: tokens.bg, padding: 1 }}>
+    <box style={{ flexDirection: "column", width: "100%", height: "100%", backgroundColor: tokens.background, padding: 1 }}>
       <text fg={tokens.accent}>cueloop · inbox ({inbox.length} pending)</text>
       <text> </text>
       {inbox.length === 0 ? (
@@ -33,7 +33,7 @@ export function InboxList({ inbox, cursor, onRequestDelete, theme }: InboxListPr
           const selected = index === cursor;
           const title = session.artifact.meta.title ?? session.id;
           return (
-            <box key={session.id} style={{ flexDirection: "row", backgroundColor: selected ? tokens.cursorBg : undefined }}>
+            <box key={session.id} style={{ flexDirection: "row", backgroundColor: selected ? tokens.cursorBackground : undefined }}>
               <text fg={selected ? tokens.text : tokens.textMuted}>
                 {selected ? "▸ " : "  "}
                 {title} · {session.workspace.branch} · {session.artifact.type}
@@ -49,7 +49,7 @@ export function InboxList({ inbox, cursor, onRequestDelete, theme }: InboxListPr
         })
       )}
       <box style={{ flexGrow: 1 }} />
-      <StatusBar theme={theme}>j/k move · ⏎ open · d delete · q quit</StatusBar>
+      <StatusBar theme={theme}>j/k move · enter open · d delete · q quit</StatusBar>
     </box>
   );
 }

package/src/components/KeybindsDialog.stories.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { KeybindsDialog } from "./KeybindsDialog";
+
+export const meta: StoryMeta = { title: "KeybindsDialog" };
+
+const SECTIONS = [
+  {
+    title: "Review",
+    entries: [
+      { keys: "j / k", label: "move" },
+      { keys: "v", label: "span" },
+      { keys: "c", label: "comment" },
+      { keys: "enter", label: "submit" },
+    ],
+  },
+  {
+    title: "Submit",
+    entries: [
+      { keys: "← / →", label: "verdict" },
+      { keys: "esc", label: "cancel" },
+    ],
+  },
+];
+
+export const Cheatsheet: Story = {
+  render: () => <KeybindsDialog sections={SECTIONS} />,
+  expectedColors: [DARK.accent],
+  size: { width: 70, height: 24 },
+};

package/src/components/KeybindsDialog.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Dialog } from "./primitives/Dialog";
+import type { CheatsheetSection } from "../key-bindings";
+
+export interface KeybindsDialogProps {
+  sections: CheatsheetSection[];
+  theme?: Theme;
+}
+
+export function KeybindsDialog({ sections, theme }: KeybindsDialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
+  const contentRows = sections.reduce((sum, section) => sum + 1 + section.entries.length + 1, 0) + 1;
+  const width = Math.min(52, terminalWidth - 6);
+  const height = Math.min(terminalHeight - 4, contentRows + 3);
+  return (
+    <Dialog isOpen title=" keybinds " width={width} height={height} background={tokens.elevated} theme={theme}>
+      <box style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 1, paddingRight: 1, paddingTop: 1 }}>
+        {sections.map((section) => (
+          <box key={section.title} style={{ flexDirection: "column" }}>
+            <text fg={tokens.accent}>{section.title}</text>
+            {section.entries.map((entry, index) => (
+              <text key={index}>
+                <span fg={tokens.text}>{entry.keys.padEnd(12)}</span>
+                <span fg={tokens.textMuted}>{entry.label}</span>
+              </text>
+            ))}
+            <text> </text>
+          </box>
+        ))}
+        <box style={{ flexGrow: 1 }} />
+        <box style={{ flexDirection: "row" }}>
+          <box style={{ flexGrow: 1 }} />
+          <text fg={tokens.textDim}>[esc]</text>
+        </box>
+      </box>
+    </Dialog>
+  );
+}

package/src/components/MenuBar.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { MenuBar } from "./MenuBar";
+
+export const meta: StoryMeta = { title: "MenuBar" };
+
+const callbacks = { onToggle: () => {}, onSettings: () => {}, onKeybinds: () => {} };
+
+function BottomFrame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "column", width: "100%", height: "100%", justifyContent: "flex-end" }}>{children}</box>
+  );
+}
+
+export const Closed: Story = {
+  render: () => (
+    <BottomFrame>
+      <MenuBar open={false} version="0.1.0-alpha.32" {...callbacks} />
+    </BottomFrame>
+  ),
+  size: { width: 60, height: 8 },
+};
+
+export const Open: Story = {
+  render: () => (
+    <BottomFrame>
+      <MenuBar open version="0.1.0-alpha.32" {...callbacks} />
+    </BottomFrame>
+  ),
+  expectedColors: [DARK.text],
+  size: { width: 60, height: 8 },
+};

package/src/components/MenuBar.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { FRAME_BORDER_STYLE } from "./primitives/frame";
+
+export interface MenuBarProps {
+  open: boolean;
+  version: string;
+  /** The transient status line, shown between the menu and the version. */
+  status?: string;
+  onToggle: () => void;
+  onSettings: () => void;
+  onKeybinds: () => void;
+  theme?: Theme;
+}
+
+const DROPUP_OPTION_ROWS = 2;
+
+export function MenuBar({ open, version, status, onToggle, onSettings, onKeybinds, theme }: MenuBarProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { height: terminalHeight } = useTerminalDimensions();
+  const dropupHeight = DROPUP_OPTION_ROWS + 2;
+  return (
+    <>
+      {open ? (
+        <box
+          style={{
+            position: "absolute",
+            left: 1,
+            top: Math.max(0, terminalHeight - 1 - dropupHeight),
+            width: 16,
+            height: dropupHeight,
+            border: true,
+            borderStyle: FRAME_BORDER_STYLE,
+            borderColor: tokens.text,
+            flexDirection: "column",
+          }}
+        >
+          <box onMouseUp={onSettings}>
+            <text fg={tokens.text}> Settings</text>
+          </box>
+          <box onMouseUp={onKeybinds}>
+            <text fg={tokens.text}> Keybinds</text>
+          </box>
+        </box>
+      ) : null}
+      <box style={{ flexDirection: "row", height: 1, backgroundColor: tokens.panel, paddingLeft: 1, paddingRight: 1 }}>
+        <box onMouseUp={onToggle}>
+          <text fg={tokens.textDim}>menu</text>
+        </box>
+        {status ? <text fg={tokens.accent}>{`  ${status}`}</text> : null}
+        <box style={{ flexGrow: 1 }} />
+        <text fg={tokens.textDim}>v{version}</text>
+      </box>
+    </>
+  );
+}

package/src/components/PlanSheet.stories.tsx

@@ -6,7 +6,7 @@ import { fixtureDisplay, fixtureMarks, fixturePlanSession } from "./story-fixtur
 
 export const meta: StoryMeta = { title: "PlanSheet" };
 
-const callbacks = { onLineActivate: () => {}, onEditRequest: () => {}, onShareRequest: () => {}, canEdit: true };
+const callbacks = { onLineActivate: () => {} };
 
 export const AnnotatedPlan: Story = {
   render: () => (
@@ -21,7 +21,7 @@ export const AnnotatedPlan: Story = {
       {...callbacks}
     />
   ),
-  expectedColors: [DARK.markCommentBg, DARK.markSuggestionBg, DARK.cursorBg],
+  expectedColors: [DARK.markCommentBackground, DARK.markSuggestionBackground, DARK.cursorBackground],
   size: { width: 90, height: 28 },
 };
 

package/src/components/PlanSheet.tsx

@@ -17,7 +17,6 @@ import {
   displayText,
   overlayMarks,
   renderedOffsetFor,
-  revisionDelta,
   workRangeForRendered,
   type DisplayBlock,
   type Mark,
@@ -28,8 +27,7 @@ import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
 import { CodeBlock } from "./CodeBlock";
 import { AnnotationCard, type AnnotationDraft } from "./AnnotationCard";
-import { Button } from "./primitives/Button";
-import { Toolbar } from "./primitives/Toolbar";
+import { FRAME_BORDER_STYLE } from "./primitives/frame";
 
 export interface PlanSelection {
   displayIndex: number;
@@ -63,10 +61,6 @@ export interface PlanSheetProps {
   compose: PlanComposeState | null;
   editOrphanCount: number;
   onLineActivate: (displayIndex: number) => void;
-  onEditRequest: () => void;
-  onShareRequest: () => void;
-  /** Owner-only: show the Edit and Share affordances. A share viewer never sees either. */
-  canEdit: boolean;
   theme?: Theme;
 }
 
@@ -99,9 +93,6 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
     compose,
     editOrphanCount,
     onLineActivate,
-    onEditRequest,
-    onShareRequest,
-    canEdit,
     theme,
   }: PlanSheetProps,
   handleRef,
@@ -193,7 +184,7 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
             <span fg={tokens.textDim}>{marker(block)}</span>
           </text>
           <text
-            bg={isCursor ? tokens.cursorBg : undefined}
+            bg={isCursor ? tokens.cursorBackground : undefined}
             selectable
             selectionBg={tokens.accent}
             selectionFg={tokens.accentInk}
@@ -220,69 +211,29 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
 
   return (
     <box style={{ flexGrow: 1, flexDirection: "column" }}>
-      <SheetHeader
-        session={session}
-        onEditRequest={onEditRequest}
-        onShareRequest={onShareRequest}
-        canEdit={canEdit}
-        theme={theme}
-      />
-      {editOrphanCount > 0 ? (
-        <box style={{ height: 1, backgroundColor: tokens.markCommentBg, paddingLeft: 2 }}>
-          <text fg={tokens.red}>
-            {editOrphanCount} annotation{editOrphanCount === 1 ? "" : "s"} no longer match - the passage was removed.
-          </text>
-        </box>
-      ) : null}
-      <scrollbox ref={scrollRef} style={{ flexGrow: 1, paddingLeft: 2, paddingTop: 1 }} focused={false}>
-        {children}
-      </scrollbox>
-    </box>
-  );
-});
-
-/** Sheet chrome: submitted-by + revision delta left, the Edit and Share word-buttons right. */
-function SheetHeader({
-  session,
-  onEditRequest,
-  onShareRequest,
-  canEdit,
-  theme,
-}: {
-  session: ReviewSession;
-  onEditRequest: () => void;
-  onShareRequest: () => void;
-  canEdit: boolean;
-  theme?: Theme;
-}): React.ReactNode {
-  const tokens = useComponentTheme(theme);
-  const revisionCount = session.revisions.length;
-  const previous = revisionCount > 1 ? session.revisions[revisionCount - 2] : undefined;
-  const delta = previous ? revisionDelta(previous.content, session.artifact.content) : null;
-  return (
-    <box style={{ height: 1, flexDirection: "row", paddingLeft: 2, paddingRight: 1 }}>
-      <text fg={tokens.textDim}>
-        submitted by <span fg={tokens.textMuted}>{session.artifact.meta.agent ?? "unknown"}</span> · revision {revisionCount}
-        {delta ? (
-          <span fg={tokens.green}>
-            {" "}· v{revisionCount - 1}→v{revisionCount} +{delta.added} -{delta.removed}
-          </span>
+      <box
+        style={{
+          flexGrow: 1,
+          flexDirection: "column",
+          border: true,
+          borderStyle: FRAME_BORDER_STYLE,
+          borderColor: tokens.text,
+        }}
+      >
+        {editOrphanCount > 0 ? (
+          <box style={{ height: 1, backgroundColor: tokens.markCommentBackground, paddingLeft: 1 }}>
+            <text fg={tokens.red}>
+              {editOrphanCount} annotation{editOrphanCount === 1 ? "" : "s"} no longer match - the passage was removed.
+            </text>
+          </box>
         ) : null}
-      </text>
-      <box style={{ flexGrow: 1 }} />
-      {canEdit && session.status !== "resolved" ? (
-        <Toolbar>
-          <Button onPress={onEditRequest} theme={theme}>
-            {" Edit "}
-          </Button>
-          <Button onPress={onShareRequest} theme={theme}>
-            {" Share "}
-          </Button>
-        </Toolbar>
-      ) : null}
+        <scrollbox ref={scrollRef} style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 0 }} focused={false}>
+          {children}
+        </scrollbox>
+      </box>
     </box>
   );
-}
+});
 
 /** Vertical rhythm: gaps live ABOVE blocks so boundaries never collapse. */
 function topGap(previous: DisplayBlock | undefined, current: DisplayBlock): number {
@@ -312,13 +263,13 @@ function runStyle(run: StyleRun, block: DisplayBlock, tokens: Theme): { fg?: str
   const struck = block.type === "del";
   switch (run.role) {
     case "ins":
-      return { fg: tokens.insFg };
+      return { fg: tokens.insertedForeground };
     case "del":
-      return { fg: tokens.delFg };
+      return { fg: tokens.deletedForeground };
     case "mark-comment":
-      return { fg: tokens.text, bg: tokens.markCommentBg };
+      return { fg: tokens.text, bg: tokens.markCommentBackground };
     case "mark-suggestion":
-      return { fg: tokens.text, bg: tokens.markSuggestionBg };
+      return { fg: tokens.text, bg: tokens.markSuggestionBackground };
     case "mark-focus":
       return { fg: tokens.accentInk, bg: tokens.accent };
     case "kspan":

package/src/components/PromptDialog.stories.tsx

@@ -16,7 +16,7 @@ export const RenameAuthor: Story = {
       onInput={() => {}}
     />
   ),
-  expectedColors: [DARK.backdrop, DARK.elevated, DARK.accent],
+  expectedColors: [DARK.elevated, DARK.accent],
   size: { width: 64, height: 16 },
 };
 
@@ -31,6 +31,6 @@ export const NameYourself: Story = {
       onInput={() => {}}
     />
   ),
-  expectedColors: [DARK.backdrop, DARK.elevated],
+  expectedColors: [DARK.elevated],
   size: { width: 64, height: 16 },
 };

package/src/components/PromptDialog.tsx

@@ -55,7 +55,7 @@ export function PromptDialog({ isOpen, title, label, value, placeholder, onInput
           }}
         />
         <box style={{ flexGrow: 1 }} />
-        <text fg={tokens.textDim}>⏎ save · esc cancel</text>
+        <text fg={tokens.textDim}>enter save · esc cancel</text>
       </box>
     </Dialog>
   );

package/src/components/ReviewPanel.stories.tsx

@@ -27,7 +27,7 @@ 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={{ 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>
@@ -39,38 +39,26 @@ function PanelFrame({ children }: { children: React.ReactNode }): React.ReactNod
 export const ExpandedNarrow: Story = {
   render: () => (
     <PanelFrame>
-      <ReviewPanel mode="expanded" width={REVIEW_MIN_WIDTH} height={24} dragging={false} rail={rail} {...panelCallbacks} />
+      <ReviewPanel mode="expanded" width={REVIEW_MIN_WIDTH} rail={rail} {...panelCallbacks} />
     </PanelFrame>
   ),
-  expectedColors: [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} />
+      <ReviewPanel mode="expanded" width={REVIEW_MAX_WIDTH} rail={rail} {...panelCallbacks} />
     </PanelFrame>
   ),
   expectedColors: [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} />
+      <ReviewPanel mode="compact" width={34} rail={rail} {...panelCallbacks} />
     </PanelFrame>
   ),
   expectedColors: [DARK.accent, DARK.green],
@@ -80,7 +68,7 @@ export const Compact: Story = {
 export const Hidden: Story = {
   render: () => (
     <PanelFrame>
-      <ReviewPanel mode="hidden" width={34} height={24} dragging={false} rail={rail} {...panelCallbacks} />
+      <ReviewPanel mode="hidden" width={34} rail={rail} {...panelCallbacks} />
     </PanelFrame>
   ),
   size: { width: 60, height: 24 },