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

package/src/components/PlanSheet.tsx

@@ -8,9 +8,9 @@
  * 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,
@@ -27,8 +27,12 @@ import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
 import { CodeBlock } from "./CodeBlock";
 import { AnnotationCard, type AnnotationDraft } from "./AnnotationCard";
+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;
   start: number;
@@ -37,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;
@@ -45,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[];
@@ -59,6 +69,8 @@ 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;
   theme?: Theme;
@@ -70,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++) {
@@ -85,12 +100,12 @@ function positionOfRenderedOffset(renderable: TextRenderable, renderedOffset: nu
 
 export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function PlanSheet(
   {
-    session,
     display,
     marks,
     cursor,
     activeSpan,
     compose,
+    popover,
     editOrphanCount,
     onLineActivate,
     theme,
@@ -103,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;
     },
@@ -138,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);
   };
@@ -164,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}
         />,
       );
@@ -174,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>
@@ -189,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) => (
@@ -197,14 +263,38 @@ 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}
+        />,
       );
     }
   }
@@ -223,11 +313,16 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
         {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.
+              {editOrphanCount} annotation{editOrphanCount === 1 ? "" : "s"} no longer match - the
+              passage was removed.
             </text>
           </box>
         ) : null}
-        <scrollbox ref={scrollRef} style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 0 }} focused={false}>
+        <scrollbox
+          ref={scrollRef}
+          style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 0 }}
+          focused={false}
+        >
           {children}
         </scrollbox>
       </box>
@@ -239,7 +334,8 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
 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;
 }
 
@@ -250,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 };
@@ -268,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}

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>
@@ -51,7 +61,7 @@ export const ExpandedWide: Story = {
       <ReviewPanel mode="expanded" width={REVIEW_MAX_WIDTH} rail={rail} {...panelCallbacks} />
     </PanelFrame>
   ),
-  expectedColors: [DARK.green],
+  expectedColors: [DARK.accent],
   size: { width: 90, height: 24 },
 };
 
@@ -61,7 +71,7 @@ export const Compact: Story = {
       <ReviewPanel mode="compact" width={34} rail={rail} {...panelCallbacks} />
     </PanelFrame>
   ),
-  expectedColors: [DARK.accent, DARK.green],
+  expectedColors: [DARK.accent],
   size: { width: 60, height: 24 },
 };
 

package/src/components/ReviewPanel.tsx

@@ -49,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, paddingBottom: 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>
@@ -61,7 +65,7 @@ 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>
         ))}