@cueloop/client 0.1.0-alpha.4 → 0.1.0-alpha.40

package/src/components/MenuBar.stories.tsx

@@ -0,0 +1,37 @@
+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,74 @@
+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

@@ -0,0 +1,113 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { buildDisplay } from "../view-plan";
+import { PlanSheet } from "./PlanSheet";
+import { FIXTURE_PLAN, fixtureDisplay, fixtureMarks, fixturePlanSession } from "./story-fixtures";
+
+export const meta: StoryMeta = { title: "PlanSheet" };
+
+const callbacks = { onLineActivate: () => {} };
+
+// a working copy with the context paragraph cut, so it renders as a del block
+const CUT_WORKING = FIXTURE_PLAN.replace("The daemon persists sessions to disk atomically.\n", "");
+
+export const AnnotatedPlan: Story = {
+  render: () => (
+    <PlanSheet
+      session={fixturePlanSession()}
+      display={fixtureDisplay()}
+      marks={fixtureMarks()}
+      cursor={2}
+      activeSpan={null}
+      compose={null}
+      popover={null}
+      editOrphanCount={0}
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.markCommentBackground, DARK.cursorBackground],
+  size: { width: 90, height: 28 },
+};
+
+export const SpanSelection: Story = {
+  render: () => (
+    <PlanSheet
+      session={fixturePlanSession({ annotations: [] })}
+      display={fixtureDisplay()}
+      marks={new Map()}
+      cursor={2}
+      activeSpan={{ displayIndex: 2, start: 0, end: 10 }}
+      compose={null}
+      popover={null}
+      editOrphanCount={0}
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.accent],
+  size: { width: 90, height: 28 },
+};
+
+export const InlineCompose: Story = {
+  render: () => (
+    <PlanSheet
+      session={fixturePlanSession({ annotations: [] })}
+      display={fixtureDisplay()}
+      marks={new Map()}
+      cursor={2}
+      activeSpan={{ displayIndex: 2, start: 0, end: 10 }}
+      compose={{
+        kind: "comment",
+        displayIndex: 2,
+        quote: "The daemon",
+        draft: { text: "Which daemon?", onInput: () => {}, onSave: () => {}, onCancel: () => {} },
+      }}
+      popover={null}
+      editOrphanCount={0}
+      {...callbacks}
+    />
+  ),
+  size: { width: 90, height: 30 },
+};
+
+/** Span mode shows the marker-actions toolbar inline below the marked block. */
+// The marker popover floats as an absolute overlay; the virtual terminal used
+// for story snapshots cannot composite it, so it is covered by the standalone
+// MarkerPopover stories and a functional App test rather than a PlanSheet snapshot.
+
+/** A cut block renders struck-through and grayed inline - no red, no [cut] tag. */
+export const WithCutBlock: Story = {
+  render: () => (
+    <PlanSheet
+      session={fixturePlanSession()}
+      display={buildDisplay(FIXTURE_PLAN, CUT_WORKING)}
+      marks={new Map()}
+      cursor={0}
+      activeSpan={null}
+      compose={null}
+      popover={null}
+      editOrphanCount={0}
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 90, height: 28 },
+};
+
+export const OrphanBanner: Story = {
+  render: () => (
+    <PlanSheet
+      session={fixturePlanSession()}
+      display={fixtureDisplay()}
+      marks={new Map()}
+      cursor={0}
+      activeSpan={null}
+      compose={null}
+      popover={null}
+      editOrphanCount={1}
+      {...callbacks}
+    />
+  ),
+  expectedColors: [DARK.red],
+  size: { width: 90, height: 28 },
+};

package/src/components/PlanSheet.tsx

@@ -0,0 +1,389 @@
+/**
+ * The plan document sheet: header chrome, the reconciliation banner, and the
+ * scrollable block flow. Each prose block renders as one natively wrapped
+ * text (wrapMode "word") beside a marker gutter, so wrapping is the
+ * renderer's job; the sheet keeps the rendered/work offset mapping per block
+ * and exposes an imperative selection surface - the keyboard span drives the
+ * native selection, and a mouse drag reads back as an exact work-text range,
+ * which keeps quote anchors char-precise.
+ */
+
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { useRenderer } from "@opentui/react";
+import { createTextAttributes, type ScrollBoxRenderable, type TextRenderable } from "@opentui/core";
+import type { ReviewSession } from "@cueloop/schema";
+import {
+  blockRuns,
+  displayText,
+  overlayMarks,
+  renderedOffsetFor,
+  workRangeForRendered,
+  type DisplayBlock,
+  type Mark,
+  type SpanState,
+  type StyleRun,
+} from "../view-plan";
+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;
+  end: number;
+}
+
+export interface PlanSheetHandle {
+  /** Work-text range of the current native (mouse) selection, if any. */
+  /** 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;
+  revealBlock(displayIndex: number): void;
+}
+
+export interface PlanComposeState {
+  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[];
+  marks: Map<number, Mark[]>;
+  cursor: number;
+  /** 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;
+}
+
+interface BlockRef {
+  renderable: TextRenderable;
+  runs: StyleRun[];
+}
+
+/** Screen position of a rendered-text offset inside a wrapped text. */
+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++) {
+    if (info.lineStartCols[index]! <= renderedOffset) lineIndex = index;
+    else break;
+  }
+  return {
+    x: renderable.x + renderedOffset - (info.lineStartCols[lineIndex] ?? 0),
+    y: renderable.y + lineIndex,
+  };
+}
+
+export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function PlanSheet(
+  {
+    display,
+    marks,
+    cursor,
+    activeSpan,
+    compose,
+    popover,
+    editOrphanCount,
+    onLineActivate,
+    theme,
+  }: PlanSheetProps,
+  handleRef,
+): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const renderer = useRenderer();
+  const blockRefs = useRef(new Map<number, BlockRef>());
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+
+  useImperativeHandle(handleRef, () => ({
+    readSelection: (preferredIndex?: number): PlanSelection | null => {
+      if (!renderer?.hasSelection) return null;
+      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) return null;
+        const range = workRangeForRendered(blockRef.runs, selection.start, selection.end);
+        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;
+    },
+    driveSpanSelection: (span: SpanState): void => {
+      if (!renderer) return;
+      const blockRef = blockRefs.current.get(span.displayIndex);
+      if (!blockRef) return;
+      const renderedStart = renderedOffsetFor(blockRef.runs, span.start);
+      const renderedEnd = renderedOffsetFor(blockRef.runs, span.end - 1);
+      if (renderedStart === null || renderedEnd === null) return;
+      const startPosition = positionOfRenderedOffset(blockRef.renderable, renderedStart);
+      const endPosition = positionOfRenderedOffset(blockRef.renderable, renderedEnd);
+      renderer.startSelection(blockRef.renderable, startPosition.x, startPosition.y);
+      renderer.updateSelection(blockRef.renderable, endPosition.x + 1, endPosition.y);
+    },
+    clearSelection: (): void => {
+      renderer?.clearSelection();
+    },
+    revealBlock: (displayIndex: number): void => {
+      try {
+        scrollRef.current?.scrollChildIntoView(`plan-block-${displayIndex}`);
+      } catch {
+        // reveal is best-effort; selection state is already correct
+      }
+    },
+  }));
+
+  // 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);
+  };
+  // stale refs must not survive a shrinking display list
+  useEffect(() => {
+    for (const displayIndex of blockRefs.current.keys()) {
+      if (displayIndex >= display.length) blockRefs.current.delete(displayIndex);
+    }
+  }, [display]);
+
+  const children: React.ReactNode[] = [];
+  for (let displayIndex = 0; displayIndex < display.length; displayIndex++) {
+    const block = display[displayIndex]!;
+    const isCursor = displayIndex === cursor;
+    const gap = topGap(display[displayIndex - 1], block);
+    if (block.kind === "code") {
+      children.push(
+        <CodeBlock
+          key={displayIndex}
+          id={`plan-block-${displayIndex}`}
+          language={(block.work ?? block.base)?.lang}
+          content={displayText(block)}
+          isCursor={isCursor}
+          marginTop={gap}
+          isAnnotated={(marks.get(displayIndex) ?? []).length > 0}
+          changeTag={showsChangeTag(block) ? tagLabel(block) : undefined}
+          cut={block.type === "del"}
+          theme={theme}
+        />,
+      );
+    } else {
+      const blockMarks = [...(marks.get(displayIndex) ?? [])];
+      if (activeSpan && activeSpan.displayIndex === displayIndex) {
+        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;
+      // 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}`}
+          // 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>
+          </text>
+          <text
+            bg={isCursor ? tokens.cursorBackground : undefined}
+            selectable
+            selectionBg={tokens.accent}
+            selectionFg={tokens.accentInk}
+            style={{ wrapMode: "word", flexGrow: 1, flexShrink: 1 }}
+            ref={(renderable: TextRenderable | null) =>
+              registerBlock(displayIndex, renderable, mappedRuns)
+            }
+            onMouseUp={() => onLineActivate(displayIndex)}
+          >
+            {runs.map((run, runIndex) => (
+              <span key={runIndex} {...runStyle(run, block, tokens)}>
+                {run.text}
+              </span>
+            ))}
+            {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}
+        />,
+      );
+    }
+  }
+
+  return (
+    <box style={{ flexGrow: 1, flexDirection: "column" }}>
+      <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}
+        <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");
+  return tightPair ? 0 : 1;
+}
+
+function marker(block: DisplayBlock): string {
+  if (block.kind === "li") return "- ";
+  if (block.kind === "oli") return `${block.orderedItemNumber ?? 1}. `;
+  if (block.kind === "quote") return "▏ ";
+  return "";
+}
+
+/** 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 === "add" ? tokens.green : tokens.accent;
+}
+
+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 };
+    case "del":
+      return { fg: tokens.deletedForeground };
+    case "mark-comment":
+      return { fg: tokens.text, bg: tokens.markCommentBackground };
+    case "mark-focus":
+      return { fg: tokens.accentInk, bg: tokens.accent };
+    case "kspan":
+      return { fg: tokens.accentInk, bg: tokens.accent };
+    default:
+      return { fg: headingFg ?? tokens.text };
+  }
+}

package/src/components/PromptDialog.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { PromptDialog } from "./PromptDialog";
+
+export const meta: StoryMeta = { title: "PromptDialog" };
+
+export const RenameAuthor: Story = {
+  render: () => (
+    <PromptDialog
+      isOpen
+      title=" Rename author "
+      label="Display name for this collaborator:"
+      value="Robin"
+      placeholder="their name"
+      onInput={() => {}}
+    />
+  ),
+  expectedColors: [DARK.elevated, DARK.accent],
+  size: { width: 64, height: 16 },
+};
+
+export const NameYourself: Story = {
+  render: () => (
+    <PromptDialog
+      isOpen
+      title=" Welcome "
+      label="Your name (optional) - it attributes the notes you leave:"
+      value=""
+      placeholder="your name"
+      onInput={() => {}}
+    />
+  ),
+  expectedColors: [DARK.elevated],
+  size: { width: 64, height: 16 },
+};