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

package/src/components/AnnotationCard.stories.tsx

@@ -11,7 +11,7 @@ export const CommentDraft: Story = {
   render: () => (
     <AnnotationCard kind="comment" quote="persists sessions" draft={{ text: "Which daemon?", ...draftCallbacks }} />
   ),
-  expectedColors: [DARK.accent, DARK.elevated],
+  expectedColors: [DARK.accent],
 };
 
 export const SuggestionDraft: Story = {

package/src/components/AnnotationCard.tsx

@@ -32,8 +32,10 @@ export interface AnnotationSaved {
   isSelected: boolean;
   isOrphan: boolean;
   isBlocking: boolean;
-  /** Resolved author display name; own notes carry none. Set = name-in-border. */
+  /** A collaborator's resolved display name; own notes carry none. Set = name-in-border, blue. */
   authorLabel?: string;
+  /** The viewer's own note when collaborators are also present (e.g. "me"). Set = tag-in-border, accent. */
+  selfLabel?: string;
   /** Non-null while the card body is being rewritten in place. */
   editing: AnnotationDraft | null;
   onPress: () => void;
@@ -122,15 +124,15 @@ function DraftEditor({
         }}
         style={{
           height: rows,
-          backgroundColor: tokens.elevated,
-          focusedBackgroundColor: tokens.elevated,
+          backgroundColor: "transparent",
+          focusedBackgroundColor: "transparent",
           textColor: tokens.text,
           focusedTextColor: tokens.text,
         }}
       />
       <Toolbar>
         <Button variant="solid" marginRight={2} onPress={draft.onSave} theme={theme}>
-          {" Save ⏎ "}
+          {" Save "}
         </Button>
         <Button onPress={draft.onCancel} theme={theme}>
           {" Cancel esc "}
@@ -160,6 +162,7 @@ export function AnnotationCard({ id, kind, quote, draft, saved, theme }: Annotat
         title={` ${verb} "${truncateToSingleLine(quote, 40)}" `}
         contentRows={editorRowCount + 1}
         borderColor={kindColor}
+        backgroundColor="transparent"
         marginLeft={2}
         marginRight={2}
         theme={theme}
@@ -169,24 +172,26 @@ export function AnnotationCard({ id, kind, quote, draft, saved, theme }: Annotat
     );
   }
   const card = saved!;
-  // A collaborator's note (author set) renders as a named, bordered card; own notes stay borderless.
-  const authored = card.authorLabel !== undefined && card.authorLabel !== "";
-  const indent = authored ? "" : "  ";
+  const collaboratorName = card.authorLabel !== undefined && card.authorLabel !== "" ? card.authorLabel : undefined;
+  const ownTag = card.selfLabel !== undefined && card.selfLabel !== "" ? card.selfLabel : undefined;
+  const borderLabel = collaboratorName ?? ownTag;
+  const borderColor = ownTag ? tokens.accent : tokens.blue;
+  const indent = borderLabel ? "" : "  ";
   const marker = card.isSelected ? "▸ " : indent;
   // Fixed content rows (a bordered box must declare a height or it collapses): header + quote + body, or the editor.
   const contentRows = card.editing ? editorRowCount + 3 : 3;
   // The border + its side padding eat this much content width, so text truncates shorter.
-  const borderInset = authored ? 4 : 0;
+  const borderInset = borderLabel ? 4 : 0;
   return (
     <box
       id={id}
-      title={authored ? ` ${card.authorLabel} ` : undefined}
+      title={borderLabel ? ` ${borderLabel} ` : undefined}
       style={{
         flexDirection: "column",
-        marginBottom: 1,
-        backgroundColor: card.isSelected ? tokens.elevated : undefined,
-        ...(authored
-          ? { height: cardHeight(contentRows), border: true, borderStyle: FRAME_BORDER_STYLE, borderColor: tokens.blue, paddingLeft: 1, paddingRight: 1 }
+        marginBottom: 0,
+        backgroundColor: card.isSelected && !card.editing ? tokens.elevated : undefined,
+        ...(borderLabel
+          ? { height: cardHeight(contentRows), border: true, borderStyle: FRAME_BORDER_STYLE, borderColor, paddingLeft: 1, paddingRight: 1 }
           : {}),
       }}
       onMouseUp={card.onPress}

package/src/components/ConfirmCard.tsx

@@ -94,6 +94,7 @@ export function ConfirmCard({
       title=" submit review "
       contentRows={CONFIRM_CONTENT_ROWS + (viewedSummary !== undefined ? 1 : 0)}
       borderColor={tokens.accent}
+      backgroundColor="transparent"
       marginRight={1}
       theme={theme}
     >

package/src/components/ConfirmDialog.tsx

@@ -44,7 +44,7 @@ export function ConfirmDialog({
         <box style={{ flexGrow: 1 }} />
         <Toolbar>
           <Button variant="solid" onPress={onConfirm} theme={theme}>
-            {` ${confirmLabel} ⏎ `}
+            {` ${confirmLabel} `}
           </Button>
           <Button onPress={onCancel} theme={theme}>
             {` ${cancelLabel} esc `}

package/src/components/DiffSheet.stories.tsx

@@ -18,6 +18,24 @@ export const CursorOnAddedLine: Story = {
   size: { width: 90, height: 16 },
 };
 
+export const ComposingOnLine: Story = {
+  render: () => (
+    <DiffSheet
+      rows={fixtureDiffRows()}
+      cursor={4}
+      annotations={[]}
+      compose={{
+        kind: "comment",
+        rowIndex: 4,
+        quote: "  private items = new Map();",
+        draft: { text: "Map needs an eviction story.", onInput: () => {}, onSave: () => {}, onCancel: () => {} },
+      }}
+    />
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 90, height: 16 },
+};
+
 export const AnnotatedLine: Story = {
   render: () => (
     <DiffSheet

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);
@@ -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,7 +224,17 @@ 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") {
@@ -227,14 +253,14 @@ export function DiffSheet({ rows, cursor, annotations, focusedAnnotationId, them
               </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.tsx

@@ -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: () => (

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,
@@ -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.markCommentBackground, 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 {

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

@@ -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 },