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

package/src/components/PlanSheet.tsx

@@ -8,16 +8,15 @@
  * which keeps quote anchors char-precise.
  */
 
-import React, { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { useRenderer } from "@opentui/react";
-import type { ScrollBoxRenderable, TextRenderable } from "@opentui/core";
+import { createTextAttributes, type ScrollBoxRenderable, type TextRenderable } from "@opentui/core";
 import type { ReviewSession } from "@cueloop/schema";
 import {
   blockRuns,
   displayText,
   overlayMarks,
   renderedOffsetFor,
-  revisionDelta,
   workRangeForRendered,
   type DisplayBlock,
   type Mark,
@@ -28,8 +27,11 @@ 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 { MarkerPopover, type MarkerPopoverProps } from "./MarkerPopover";
+import { FRAME_BORDER_STYLE } from "./primitives/frame";
+
+/** A cut block reads as removed: struck through and grayed, never red. */
+const CUT_ATTRIBUTES = createTextAttributes({ strikethrough: true, dim: true });
 
 export interface PlanSelection {
   displayIndex: number;
@@ -39,7 +41,8 @@ export interface PlanSelection {
 
 export interface PlanSheetHandle {
   /** Work-text range of the current native (mouse) selection, if any. */
-  readSelection(): PlanSelection | null;
+  /** The current native selection; `preferredIndex` (the mouse-up block) re-anchors a fresh drag. */
+  readSelection(preferredIndex?: number): PlanSelection | null;
   /** Anchor/extend the renderer's native selection from keyboard span offsets. */
   driveSpanSelection(span: SpanState): void;
   clearSelection(): void;
@@ -47,12 +50,17 @@ export interface PlanSheetHandle {
 }
 
 export interface PlanComposeState {
-  kind: "comment" | "suggestion";
+  kind: "comment";
   displayIndex: number;
   quote: string;
   draft: AnnotationDraft;
 }
 
+/** The marker-actions popover, rendered inline at its block while span mode is live. */
+export interface PlanPopoverState extends MarkerPopoverProps {
+  displayIndex: number;
+}
+
 export interface PlanSheetProps {
   session: ReviewSession;
   display: DisplayBlock[];
@@ -61,12 +69,10 @@ export interface PlanSheetProps {
   /** Extra selection-style paint on one block (keyboard span or compose anchor). */
   activeSpan: { displayIndex: number; start: number; end: number } | null;
   compose: PlanComposeState | null;
+  /** The marker-actions popover for the span's block; null when not in span mode. */
+  popover: PlanPopoverState | 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;
 }
 
@@ -76,7 +82,10 @@ interface BlockRef {
 }
 
 /** Screen position of a rendered-text offset inside a wrapped text. */
-function positionOfRenderedOffset(renderable: TextRenderable, renderedOffset: number): { x: number; y: number } {
+function positionOfRenderedOffset(
+  renderable: TextRenderable,
+  renderedOffset: number,
+): { x: number; y: number } {
   const info = renderable.lineInfo;
   let lineIndex = 0;
   for (let index = 0; index < info.lineStartCols.length; index++) {
@@ -91,17 +100,14 @@ function positionOfRenderedOffset(renderable: TextRenderable, renderedOffset: nu
 
 export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function PlanSheet(
   {
-    session,
     display,
     marks,
     cursor,
     activeSpan,
     compose,
+    popover,
     editOrphanCount,
     onLineActivate,
-    onEditRequest,
-    onShareRequest,
-    canEdit,
     theme,
   }: PlanSheetProps,
   handleRef,
@@ -112,14 +118,27 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
   const scrollRef = useRef<ScrollBoxRenderable | null>(null);
 
   useImperativeHandle(handleRef, () => ({
-    readSelection: (): PlanSelection | null => {
+    readSelection: (preferredIndex?: number): PlanSelection | null => {
       if (!renderer?.hasSelection) return null;
-      const ordered = [...blockRefs.current.entries()].sort(([a], [b]) => a - b);
-      for (const [displayIndex, blockRef] of ordered) {
+      const readBlock = (displayIndex: number): PlanSelection | null => {
+        const blockRef = blockRefs.current.get(displayIndex);
+        if (!blockRef) return null;
         const selection = blockRef.renderable.getSelection();
-        if (!selection || selection.end <= selection.start) continue;
+        if (!selection || selection.end <= selection.start) return null;
         const range = workRangeForRendered(blockRef.runs, selection.start, selection.end);
-        if (range) return { displayIndex, ...range };
+        return range ? { displayIndex, ...range } : null;
+      };
+      // the block the mouse released on wins, so a fresh drag re-anchors the span
+      // (one marker at a time) instead of sticking to the topmost prior selection
+      if (preferredIndex !== undefined) {
+        const preferred = readBlock(preferredIndex);
+        if (preferred) return preferred;
+      }
+      for (const displayIndex of [...blockRefs.current.keys()].sort(
+        (left, right) => left - right,
+      )) {
+        const found = readBlock(displayIndex);
+        if (found) return found;
       }
       return null;
     },
@@ -147,7 +166,30 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
     },
   }));
 
-  const registerBlock = (displayIndex: number, renderable: TextRenderable | null, runs: StyleRun[]): void => {
+  // the popover floats above its block, anchored to the selection start; flip
+  // below when the block sits too near the viewport top to fit above it
+  const [popoverFlipBelow, setPopoverFlipBelow] = useState(false);
+  const [popoverLeft, setPopoverLeft] = useState(2);
+  useEffect(() => {
+    if (!popover) return;
+    const blockRef = blockRefs.current.get(popover.displayIndex);
+    const scrollbox = scrollRef.current;
+    if (!blockRef || !scrollbox) return;
+    // only the toolbar (3 rows) + gap must fit above; the dropdown flows down
+    setPopoverFlipBelow(blockRef.renderable.y - scrollbox.y < 4);
+    // left-anchor to the start of the selection: gutter width + its column
+    const startColumn =
+      activeSpan && activeSpan.displayIndex === popover.displayIndex
+        ? (renderedOffsetFor(blockRef.runs, activeSpan.start) ?? 0)
+        : 0;
+    setPopoverLeft(2 + startColumn);
+  }, [popover, activeSpan, display, cursor]);
+
+  const registerBlock = (
+    displayIndex: number,
+    renderable: TextRenderable | null,
+    runs: StyleRun[],
+  ): void => {
     if (renderable) blockRefs.current.set(displayIndex, { renderable, runs });
     else blockRefs.current.delete(displayIndex);
   };
@@ -173,7 +215,8 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
           isCursor={isCursor}
           marginTop={gap}
           isAnnotated={(marks.get(displayIndex) ?? []).length > 0}
-          changeTag={block.type !== "same" ? tagLabel(block) : undefined}
+          changeTag={showsChangeTag(block) ? tagLabel(block) : undefined}
+          cut={block.type === "del"}
           theme={theme}
         />,
       );
@@ -183,11 +226,23 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
         blockMarks.push({ start: activeSpan.start, end: activeSpan.end, role: "kspan" });
       }
       const runs = overlayMarks(blockRuns(block, true), blockMarks);
-      // the change tag participates in the rendered text but carries no offsets
-      const mappedRuns: StyleRun[] =
-        block.type !== "same" ? [...runs, { text: ` [${tagLabel(block)}]`, role: "plain", start: null }] : runs;
+      // the change tag participates in the rendered text but carries no offsets;
+      // a cut block shows no tag (its strikethrough already reads as removed)
+      const mappedRuns: StyleRun[] = showsChangeTag(block)
+        ? [...runs, { text: ` [${tagLabel(block)}]`, role: "plain", start: null }]
+        : runs;
       children.push(
-        <box key={displayIndex} id={`plan-block-${displayIndex}`} style={{ flexDirection: "row", marginTop: gap }}>
+        <box
+          key={displayIndex}
+          id={`plan-block-${displayIndex}`}
+          // raise the block holding the popover so its overlay paints over the
+          // later blocks it floats across (siblings paint in z-index order)
+          style={{
+            flexDirection: "row",
+            marginTop: gap,
+            zIndex: popover?.displayIndex === displayIndex ? 10 : undefined,
+          }}
+        >
           <text selectable={false}>
             <span fg={isCursor ? tokens.accent : tokens.textDim}>{isCursor ? "▎ " : "  "}</span>
             <span fg={tokens.textDim}>{marker(block)}</span>
@@ -198,7 +253,9 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
             selectionBg={tokens.accent}
             selectionFg={tokens.accentInk}
             style={{ wrapMode: "word", flexGrow: 1, flexShrink: 1 }}
-            ref={(renderable: TextRenderable | null) => registerBlock(displayIndex, renderable, mappedRuns)}
+            ref={(renderable: TextRenderable | null) =>
+              registerBlock(displayIndex, renderable, mappedRuns)
+            }
             onMouseUp={() => onLineActivate(displayIndex)}
           >
             {runs.map((run, runIndex) => (
@@ -206,89 +263,79 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
                 {run.text}
               </span>
             ))}
-            {block.type !== "same" ? <span fg={tagColor(block, tokens)}> [{tagLabel(block)}]</span> : null}
+            {showsChangeTag(block) ? (
+              <span fg={tagColor(block, tokens)}> [{tagLabel(block)}]</span>
+            ) : null}
           </text>
+          {popover && popover.displayIndex === displayIndex ? (
+            // float the card over the block, centered, with a one-row gap; flip
+            // below only when there is no room above (near the viewport top)
+            <box
+              style={{
+                position: "absolute",
+                left: popoverLeft,
+                // fixed offset: the toolbar sits one row above the selection and
+                // stays put; the dropdown flows down from it, over the selection
+                top: popoverFlipBelow ? 1 : -4,
+                flexDirection: "column",
+              }}
+            >
+              <MarkerPopover {...popover} theme={theme} />
+            </box>
+          ) : null}
         </box>,
       );
     }
     if (compose && compose.displayIndex === displayIndex) {
       children.push(
-        <AnnotationCard key={`compose-${displayIndex}`} kind={compose.kind} quote={compose.quote} draft={compose.draft} theme={theme} />,
+        <AnnotationCard
+          key={`compose-${displayIndex}`}
+          kind={compose.kind}
+          quote={compose.quote}
+          draft={compose.draft}
+          theme={theme}
+        />,
       );
     }
   }
 
   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 {
   if (!previous) return 0;
   const tightPair =
-    (current.kind === "li" && previous.kind === "li") || (current.kind === "oli" && previous.kind === "oli");
+    (current.kind === "li" && previous.kind === "li") ||
+    (current.kind === "oli" && previous.kind === "oli");
   return tightPair ? 0 : 1;
 }
 
@@ -299,17 +346,32 @@ function marker(block: DisplayBlock): string {
   return "";
 }
 
-function tagLabel(block: DisplayBlock): "cut" | "new" | "edited" {
-  return block.type === "del" ? "cut" : block.type === "add" ? "new" : "edited";
+/** An added or edited block earns a tag; a cut block relies on its strikethrough. */
+function showsChangeTag(block: DisplayBlock): boolean {
+  return block.type === "add" || block.type === "mod";
+}
+
+function tagLabel(block: DisplayBlock): "new" | "edited" {
+  return block.type === "add" ? "new" : "edited";
 }
 
 function tagColor(block: DisplayBlock, tokens: Theme): string {
-  return block.type === "del" ? tokens.red : block.type === "add" ? tokens.green : tokens.accent;
+  return block.type === "add" ? tokens.green : tokens.accent;
 }
 
-function runStyle(run: StyleRun, block: DisplayBlock, tokens: Theme): { fg?: string; bg?: string } {
-  const headingFg = block.kind === "h1" ? tokens.text : block.kind === "h2" || block.kind === "h3" ? tokens.accent : undefined;
-  const struck = block.type === "del";
+function runStyle(
+  run: StyleRun,
+  block: DisplayBlock,
+  tokens: Theme,
+): { fg?: string; bg?: string; attributes?: number } {
+  // a cut block reads as removed: every run struck through and grayed, never red
+  if (block.type === "del") return { fg: tokens.textDim, attributes: CUT_ATTRIBUTES };
+  const headingFg =
+    block.kind === "h1"
+      ? tokens.text
+      : block.kind === "h2" || block.kind === "h3"
+        ? tokens.accent
+        : undefined;
   switch (run.role) {
     case "ins":
       return { fg: tokens.insertedForeground };
@@ -317,13 +379,11 @@ function runStyle(run: StyleRun, block: DisplayBlock, tokens: Theme): { fg?: str
       return { fg: tokens.deletedForeground };
     case "mark-comment":
       return { fg: tokens.text, bg: tokens.markCommentBackground };
-    case "mark-suggestion":
-      return { fg: tokens.text, bg: tokens.markSuggestionBackground };
     case "mark-focus":
       return { fg: tokens.accentInk, bg: tokens.accent };
     case "kspan":
       return { fg: tokens.accentInk, bg: tokens.accent };
     default:
-      return { fg: struck ? tokens.red : (headingFg ?? tokens.text) };
+      return { fg: headingFg ?? tokens.text };
   }
 }

package/src/components/PromptDialog.tsx

@@ -25,7 +25,15 @@ export interface PromptDialogProps {
   theme?: Theme;
 }
 
-export function PromptDialog({ isOpen, title, label, value, placeholder, onInput, theme }: PromptDialogProps): React.ReactNode {
+export function PromptDialog({
+  isOpen,
+  title,
+  label,
+  value,
+  placeholder,
+  onInput,
+  theme,
+}: PromptDialogProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const { width: terminalWidth } = useTerminalDimensions();
   const inputRef = useRef<TextareaRenderable | null>(null);
@@ -37,7 +45,15 @@ export function PromptDialog({ isOpen, title, label, value, placeholder, onInput
   if (!isOpen) return null;
   return (
     <Dialog isOpen title={title} width={Math.min(54, terminalWidth - 6)} height={7} theme={theme}>
-      <box style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 1, paddingRight: 1, paddingTop: 1 }}>
+      <box
+        style={{
+          flexDirection: "column",
+          flexGrow: 1,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+        }}
+      >
         <text fg={tokens.textDim}>{label}</text>
         <textarea
           ref={inputRef}
@@ -55,7 +71,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

@@ -12,6 +12,7 @@ const rail = {
   authorNames: {},
   selectedId: FIXTURE_ANNOTATIONS[0]!.id,
   resolvedIds: new Set(FIXTURE_ANNOTATIONS.map((annotation) => annotation.id)),
+  curationItems: [],
   railTab: "review" as const,
   pendingCount: 2,
   cardEdit: null,
@@ -19,6 +20,8 @@ const rail = {
   onTabChange: () => {},
   onSelectCard: () => {},
   onActivateCard: () => {},
+  onSelectCuration: () => {},
+  onUndoCuration: () => {},
   onSubmitRequest: () => {},
 };
 
@@ -27,7 +30,14 @@ 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.background }}>
+    <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,48 +49,36 @@ 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} />
-    </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} />
+      <ReviewPanel mode="expanded" width={REVIEW_MAX_WIDTH} rail={rail} {...panelCallbacks} />
     </PanelFrame>
   ),
   expectedColors: [DARK.accent],
-  size: { width: 80, height: 24 },
+  size: { width: 90, 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],
+  expectedColors: [DARK.accent],
   size: { width: 60, height: 24 },
 };
 
 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 },

package/src/components/ReviewPanel.tsx

@@ -14,16 +14,12 @@ 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";
+import { REVIEW_COMPACT_WIDTH, 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). */
@@ -34,28 +30,15 @@ export interface ReviewPanelProps {
   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>
-  );
+/** An invisible, full-height grab column: the plan's right border is the seam. */
+function ReviewDivider({ onGrab }: { onGrab: () => void }): React.ReactNode {
+  // childless: it stretches to the row height like the plan and rail beside it,
+  // so the three columns share one bottom edge. Invisible, but full-height grab.
+  return <box style={{ width: 1 }} onMouseDown={onGrab} />;
 }
 
 /** The compact strip: the card count, one kind-colored dot per card, and the
- *  `«` chevron left-bound to match the expanded `»` gap. */
+ *  `<` expand chevron, bottom-padded to sit at the same row as the expanded `>`. */
 function CompactRail({
   annotations,
   onExpand,
@@ -66,11 +49,15 @@ function CompactRail({
   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 }}
+      style={{
+        width: REVIEW_COMPACT_WIDTH,
+        backgroundColor: tokens.panel,
+        flexDirection: "column",
+        paddingTop: 1,
+        paddingBottom: 1,
+      }}
     >
       <box style={{ alignItems: "center" }}>
         <text fg={tokens.accent}>{String(annotations.length)}</text>
@@ -78,14 +65,14 @@ function CompactRail({
       <box style={{ height: 1 }} />
       <box style={{ flexDirection: "column", alignItems: "center" }}>
         {annotations.map((annotation) => (
-          <text key={annotation.id} fg={dotColor(annotation)}>
+          <text key={annotation.id} fg={tokens.accent}>
             ●
           </text>
         ))}
       </box>
       <box style={{ flexGrow: 1 }} />
       <box style={{ paddingLeft: 1 }} onMouseUp={onExpand}>
-        <text fg={tokens.textDim}>«</text>
+        <text fg={tokens.textDim}>{"<"}</text>
       </box>
     </box>
   );
@@ -94,8 +81,6 @@ function CompactRail({
 export function ReviewPanel({
   mode,
   width,
-  height,
-  dragging,
   onDividerGrab,
   onToggle,
   rail,
@@ -105,7 +90,7 @@ export function ReviewPanel({
   if (mode === "hidden") return null;
   return (
     <>
-      <ReviewDivider dragging={dragging} rows={height} onGrab={onDividerGrab} theme={theme} />
+      <ReviewDivider onGrab={onDividerGrab} />
       {mode === "expanded" ? (
         <ReviewRail ref={railRef} {...rail} width={width} onCollapse={onToggle} theme={theme} />
       ) : (