@cueloop/client 0.1.0-alpha.66 → 0.1.0-alpha.68

package/src/components/ReviewRail.tsx

@@ -1,327 +0,0 @@
-/**
- * The right review rail: tab strip (Review/Tree/Agent), the scrollable annotation
- * stack, and the pinned submit affordance. The confirm card sits OUTSIDE the
- * scrollbox so the stack scrolls while the card stays at the rail bottom.
- * Card reveal goes through the scrollbox's own scrollChildIntoView - no
- * hardcoded card-height arithmetic.
- */
-
-import React, { forwardRef, useImperativeHandle, useRef } from "react";
-import { createTextAttributes, type ScrollBoxRenderable } from "@opentui/core";
-import { isAddressed, isAgentNote, type Annotation, type ReviewSession } from "@cueloop/schema";
-import type { CurationItem } from "../session-controller";
-import type { Theme } from "../theme";
-import { useComponentTheme } from "./theme-context";
-import { Tabs, Tab, TabList } from "./primitives/Tabs";
-import { Button } from "./primitives/Button";
-import { Toolbar } from "./primitives/Toolbar";
-import { AnnotationCard, type AnnotationDraft } from "./AnnotationCard";
-import { ConfirmCard, type ConfirmCardProps } from "./ConfirmCard";
-import { AgentLauncher, type AgentTerminalHandle } from "./agent-launcher";
-import { TreePane, type TreePaneProps } from "./TreePane";
-import { Card } from "./primitives/Card";
-import { truncateToSingleLine } from "./truncate-text";
-import { resolveDisplayName } from "../attribution";
-
-export type RailTab = "review" | "agent" | "tree";
-
-export interface RailCardEdit extends AnnotationDraft {
-  id: string;
-}
-
-export interface ReviewRailHandle {
-  /** Scroll the card for an annotation into view (selection symmetry). */
-  revealCard(annotationId: string): void;
-}
-
-export interface ReviewRailProps {
-  session: ReviewSession;
-  /** Planner-local author renames (config [authors]); override the registry name. */
-  authorNames: Record<string, string>;
-  selectedId?: string;
-  /** Ids whose anchor resolved; null = orphan display off (diff view). */
-  resolvedIds: Set<string> | null;
-  /** Removed pieces (diff rejections / plan cuts) interleaved into the card stack. */
-  curationItems: CurationItem[];
-  /** The selected curation item, highlighted and the undo target. */
-  selectedCurationId?: string;
-  /**
-   * Sort position per annotation id (diff row index / plan display index), so
-   * annotation and removal cards interleave in one position-ordered stack.
-   */
-  annotationPositions?: Map<string, number>;
-  railTab: RailTab;
-  pendingCount: number;
-  cardEdit: RailCardEdit | null;
-  submitConfirm: Omit<ConfirmCardProps, "theme"> | null;
-  onTabChange: (tab: RailTab) => void;
-  onSelectCard: (id: string) => void;
-  onActivateCard: (id: string) => void;
-  /** Select a curation item (reveals its diff row); pressing undo restores it. */
-  onSelectCuration: (id: string) => void;
-  /** Restore a curation item (the selected card's undo button, same as the u key). */
-  onUndoCuration: (id: string) => void;
-  onSubmitRequest: () => void;
-  /** Launch a bring-your-own harness in the rail (Agent tab); seedText is the plan-context briefing. */
-  onLaunchHarness: (command: string, seedText?: string) => void;
-  /** In-tab agent terminal handle (embedded path); null when detached. Lets the app route keys to it. */
-  onAgentTerminal?: (handle: AgentTerminalHandle | null) => void;
-  /** The Tree tab: the session's history rows and the primitives that move it. */
-  tree: Omit<TreePaneProps, "theme">;
-  /** Rail column width; the app derives it from the persisted review layout. */
-  width?: number;
-  /**
-   * When set, renders the muted `>` chevron pinned at the rail's bottom-left,
-   * one column from the divider. Clicking it collapses the panel to compact.
-   */
-  onCollapse?: () => void;
-  theme?: Theme;
-}
-
-export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function ReviewRail(
-  {
-    session,
-    authorNames,
-    selectedId,
-    resolvedIds,
-    curationItems,
-    selectedCurationId,
-    annotationPositions,
-    railTab,
-    cardEdit,
-    submitConfirm,
-    onTabChange,
-    onSelectCard,
-    onActivateCard,
-    onSelectCuration,
-    onUndoCuration,
-    onSubmitRequest,
-    onLaunchHarness,
-    onAgentTerminal,
-    tree,
-    width = 34,
-    onCollapse,
-    theme,
-  }: ReviewRailProps,
-  handleRef,
-): React.ReactNode {
-  const tokens = useComponentTheme(theme);
-  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
-  // addressed annotations leave the card list; a dim count keeps them honest
-  const openAnnotations = session.annotations.filter((annotation) => !isAddressed(annotation));
-  const addressedCount = session.annotations.length - openAnnotations.length;
-
-  useImperativeHandle(handleRef, () => ({
-    revealCard: (annotationId: string): void => {
-      try {
-        scrollRef.current?.scrollChildIntoView(`annotation-card-${annotationId}`);
-      } catch {
-        // reveal is best-effort; selection state is already correct
-      }
-    },
-  }));
-
-  const renderAnnotationCard = (annotation: Annotation): React.ReactNode => (
-    <AnnotationCard
-      key={annotation.id}
-      id={`annotation-card-${annotation.id}`}
-      kind={annotation.kind}
-      quote={annotation.anchor.quote}
-      theme={theme}
-      saved={{
-        body: annotation.body,
-        isSelected: annotation.id === selectedId,
-        isOrphan: resolvedIds !== null && !resolvedIds.has(annotation.id),
-        // border-title author: a collaborator's name, "agent" for agent notes, else "me"
-        author: annotation.author
-          ? resolveDisplayName(annotation.author, session.participants, authorNames)
-          : isAgentNote(annotation)
-            ? "agent"
-            : "me",
-        tone: tokens.blue,
-        editing:
-          cardEdit && cardEdit.id === annotation.id
-            ? {
-                text: cardEdit.text,
-                onInput: cardEdit.onInput,
-                onSave: cardEdit.onSave,
-                onCancel: cardEdit.onCancel,
-              }
-            : null,
-        onPress: () =>
-          annotation.id === selectedId
-            ? onActivateCard(annotation.id)
-            : onSelectCard(annotation.id),
-      }}
-    />
-  );
-
-  // one position-ordered stack: annotation and removal cards interleaved by their
-  // source line (diff row / plan block), original order breaking ties
-  const railEntries: { sort: number; order: number; node: React.ReactNode }[] = [
-    ...openAnnotations.map((annotation, order) => ({
-      sort: annotationPositions?.get(annotation.id) ?? Number.MAX_SAFE_INTEGER,
-      order,
-      node: renderAnnotationCard(annotation),
-    })),
-    ...curationItems.map((item, index) => ({
-      sort: item.revealIndex,
-      order: openAnnotations.length + index,
-      node: (
-        <RemovalCard
-          key={item.id}
-          item={item}
-          isSelected={item.id === selectedCurationId}
-          onSelect={onSelectCuration}
-          onUndo={onUndoCuration}
-          theme={theme}
-        />
-      ),
-    })),
-  ].sort((left, right) => left.sort - right.sort || left.order - right.order);
-
-  return (
-    <box
-      style={{
-        width,
-        backgroundColor: tokens.panel,
-        flexDirection: "column",
-        paddingBottom: 1,
-      }}
-    >
-      <Tabs
-        selectedKey={railTab}
-        onSelectionChange={(key) => {
-          if (key === "review" || key === "agent" || key === "tree") onTabChange(key);
-        }}
-        theme={theme}
-      >
-        <TabList>
-          <Tab id="review">Review</Tab>
-          <Tab id="tree">Tree</Tab>
-          <Tab id="agent">Agent</Tab>
-        </TabList>
-      </Tabs>
-      {railTab === "tree" ? (
-        <TreePane {...tree} theme={theme} />
-      ) : railTab === "agent" ? (
-        <box style={{ flexGrow: 1, flexDirection: "column" }}>
-          <AgentLauncher
-            session={session}
-            onLaunchHarness={onLaunchHarness}
-            onAgentTerminal={onAgentTerminal}
-            theme={theme}
-          />
-        </box>
-      ) : openAnnotations.length === 0 && curationItems.length === 0 ? (
-        <box style={{ flexGrow: 1, alignItems: "center", justifyContent: "center" }}>
-          <text fg={tokens.textDim}>
-            {session.annotations.length === 0 ? "no annotations yet" : "all annotations addressed"}
-          </text>
-        </box>
-      ) : (
-        <box style={{ flexGrow: 1, flexDirection: "column" }}>
-          {addressedCount > 0 ? (
-            <text fg={tokens.textDim}>✓ {addressedCount} addressed by revision</text>
-          ) : null}
-          <scrollbox ref={scrollRef} style={{ flexGrow: 1 }} focused={false}>
-            {railEntries.map((entry) => entry.node)}
-          </scrollbox>
-        </box>
-      )}
-      {/* the confirm card keeps full width, above the footer row */}
-      {railTab === "review" && submitConfirm ? (
-        <ConfirmCard {...submitConfirm} theme={theme} />
-      ) : null}
-      {/* footer row: collapse chevron left-bound, the submit affordance inline
-          beside it, both on the rail's last row (the plan's bottom-border height) */}
-      <box style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
-        {onCollapse ? (
-          <box onMouseUp={onCollapse}>
-            <text fg={tokens.textDim}>{">"}</text>
-          </box>
-        ) : null}
-        {railTab === "review" && !submitConfirm ? (
-          session.status === "resolved" ? (
-            <text fg={tokens.green}>resolved: {session.verdict!.kind.replace("_", " ")}</text>
-          ) : (
-            <Button variant="accent-text" onPress={onSubmitRequest} theme={theme}>
-              Submit review
-            </Button>
-          )
-        ) : null}
-      </box>
-    </box>
-  );
-});
-
-/** A removal preview reads as removed content: struck through and dimmed. */
-const REMOVAL_ATTRIBUTES = createTextAttributes({ strikethrough: true, dim: true });
-
-/** Preview lines a removal card shows before it collapses to a "+N more" row. */
-const REMOVAL_PREVIEW_LINES = 4;
-
-/** Rough content width inside a removal card's border + padding, for truncation. */
-const REMOVAL_PREVIEW_WIDTH = 24;
-
-/**
- * A removed piece as a full display card - the same border/padding/selection
- * chrome as a saved annotation card - previewing the removed content struck
- * through. Unified across diff (a curated-out hunk/change) and plan (a cut
- * block). Clicking selects (App reveals its source line); the undo key restores.
- */
-function RemovalCard({
-  item,
-  isSelected,
-  onSelect,
-  onUndo,
-  theme,
-}: {
-  item: CurationItem;
-  isSelected: boolean;
-  onSelect: (id: string) => void;
-  onUndo: (id: string) => void;
-  theme?: Theme;
-}): React.ReactNode {
-  const tokens = useComponentTheme(theme);
-  const previewLines = item.preview.slice(0, REMOVAL_PREVIEW_LINES);
-  const overflow = item.preview.length - previewLines.length;
-  // body = the struck-through preview (at least one row) + an overflow row, plus
-  // the undo button's own row when selected (mirrors the draft card's Save/Cancel)
-  const contentRows =
-    Math.max(1, previewLines.length) + (overflow > 0 ? 1 : 0) + (isSelected ? 1 : 0);
-  // border = "what + who": a diff reject or a plan cut, always the reviewer's own
-  const title = ` ${item.source === "diff" ? "REJECT" : "CUT"} · me `;
-
-  return (
-    <box id={`removal-card-${item.id}`} onMouseUp={() => onSelect(item.id)}>
-      <Card
-        title={title}
-        contentRows={contentRows}
-        borderColor={tokens.red}
-        backgroundColor="transparent"
-        theme={theme}
-      >
-        {previewLines.length === 0 ? (
-          <text fg={tokens.textDim}> </text>
-        ) : (
-          previewLines.map((line, lineIndex) => (
-            <text key={lineIndex} fg={tokens.textDim}>
-              <span attributes={REMOVAL_ATTRIBUTES}>
-                {truncateToSingleLine(line, REMOVAL_PREVIEW_WIDTH)}
-              </span>
-            </text>
-          ))
-        )}
-        {overflow > 0 ? <text fg={tokens.textDim}>{`  …+${overflow} more`}</text> : null}
-        {isSelected ? (
-          <Toolbar>
-            <Button variant="solid" onPress={() => onUndo(item.id)} theme={theme}>
-              {" undo "}
-            </Button>
-          </Toolbar>
-        ) : null}
-      </Card>
-    </box>
-  );
-}

package/src/review-panel.test.ts

@@ -1,113 +0,0 @@
-import { describe, expect, test } from "bun:test";
-import {
-  REVIEW_DEFAULT_WIDTH,
-  REVIEW_MAX_WIDTH,
-  REVIEW_MIN_WIDTH,
-  REVIEW_PLAN_MIN_WIDTH,
-  REVIEW_RESIZE_STEP,
-  clampWidth,
-  cycleReviewPanelMode,
-  maxWidthForTerminal,
-  resolveReviewWidth,
-  reviewRowsToDivider,
-  toggleReviewPanelMode,
-  widthFromMouseColumn,
-} from "./review-panel";
-
-describe("clampWidth", () => {
-  test("keeps a width inside the bounds untouched", () => {
-    expect(clampWidth(REVIEW_DEFAULT_WIDTH)).toBe(REVIEW_DEFAULT_WIDTH);
-  });
-
-  test("clamps below the minimum and above the maximum", () => {
-    expect(clampWidth(REVIEW_MIN_WIDTH - 10)).toBe(REVIEW_MIN_WIDTH);
-    expect(clampWidth(REVIEW_MAX_WIDTH + 10)).toBe(REVIEW_MAX_WIDTH);
-  });
-
-  test("rounds a fractional column to a whole one", () => {
-    expect(clampWidth(30.7)).toBe(31);
-  });
-
-  test("honors explicit bounds", () => {
-    expect(clampWidth(100, 10, 20)).toBe(20);
-    expect(clampWidth(5, 10, 20)).toBe(10);
-  });
-});
-
-describe("cycleReviewPanelMode", () => {
-  test("cycles expanded -> compact -> hidden -> expanded", () => {
-    expect(cycleReviewPanelMode("expanded")).toBe("compact");
-    expect(cycleReviewPanelMode("compact")).toBe("hidden");
-    expect(cycleReviewPanelMode("hidden")).toBe("expanded");
-  });
-});
-
-describe("toggleReviewPanelMode", () => {
-  test("the chevron toggles only between expanded and compact, never hidden", () => {
-    expect(toggleReviewPanelMode("expanded")).toBe("compact");
-    expect(toggleReviewPanelMode("compact")).toBe("expanded");
-    // a hidden panel has no chevron; a stray toggle still opens it
-    expect(toggleReviewPanelMode("hidden")).toBe("expanded");
-  });
-});
-
-describe("widthFromMouseColumn", () => {
-  test("measures the rail from the mouse column to the right edge", () => {
-    // divider dragged to column 80 of a 120-wide terminal -> a 40-col rail
-    expect(widthFromMouseColumn(80, 120)).toBe(40);
-  });
-
-  test("clamps the dragged width to the bounds", () => {
-    expect(widthFromMouseColumn(0, 120)).toBe(REVIEW_MAX_WIDTH);
-    expect(widthFromMouseColumn(119, 120)).toBe(REVIEW_MIN_WIDTH);
-  });
-
-  test("cannot drag the rail wide enough to starve the plan on a narrow terminal", () => {
-    // dragging to the far left edge of a 60-col terminal still leaves the plan its minimum
-    expect(widthFromMouseColumn(0, 60)).toBe(60 - REVIEW_PLAN_MIN_WIDTH - 1);
-  });
-
-  test("the resize step widens and narrows within the clamp", () => {
-    expect(clampWidth(REVIEW_DEFAULT_WIDTH + REVIEW_RESIZE_STEP)).toBe(
-      REVIEW_DEFAULT_WIDTH + REVIEW_RESIZE_STEP,
-    );
-    expect(clampWidth(REVIEW_MIN_WIDTH - REVIEW_RESIZE_STEP)).toBe(REVIEW_MIN_WIDTH);
-  });
-});
-
-describe("maxWidthForTerminal", () => {
-  test("allows the full rail on a wide terminal", () => {
-    expect(maxWidthForTerminal(120)).toBe(REVIEW_MAX_WIDTH);
-  });
-
-  test("reserves the plan its minimum on a narrow terminal", () => {
-    // 60-col terminal: 30 for the plan and 1 for the divider leaves 29 for the rail
-    expect(maxWidthForTerminal(60)).toBe(60 - REVIEW_PLAN_MIN_WIDTH - 1);
-  });
-
-  test("never drops below the rail minimum, however narrow the terminal", () => {
-    expect(maxWidthForTerminal(40)).toBe(REVIEW_MIN_WIDTH);
-  });
-});
-
-describe("resolveReviewWidth", () => {
-  test("leaves a width that already fits untouched", () => {
-    expect(resolveReviewWidth(REVIEW_DEFAULT_WIDTH, 120)).toBe(REVIEW_DEFAULT_WIDTH);
-  });
-
-  test("shrinks a wide persisted width so the plan keeps its room", () => {
-    // a saved 50-col rail on a 60-col terminal would leave the plan 9 cols; clamp it back
-    expect(resolveReviewWidth(REVIEW_MAX_WIDTH, 60)).toBe(60 - REVIEW_PLAN_MIN_WIDTH - 1);
-  });
-});
-
-describe("reviewRowsToDivider", () => {
-  test("builds one vertical glyph per row", () => {
-    expect(reviewRowsToDivider(3)).toBe("│\n│\n│");
-  });
-
-  test("never collapses to an empty column", () => {
-    expect(reviewRowsToDivider(0)).toBe("│");
-    expect(reviewRowsToDivider(-4)).toBe("│");
-  });
-});

package/src/review-panel.ts

@@ -1,83 +0,0 @@
-/**
- * Pure geometry and state for the resizable review panel. The panel shows the
- * review rail in one of three modes and the expanded rail resizes within a
- * clamp; App owns the React state and the mouse wiring, this module owns the
- * arithmetic so the layout math stays unit-tested and out of the JSX. Bounds
- * and the compact width carry over verbatim from the approved prototype.
- */
-
-/** Expanded (full rail), compact (count + dots strip), or hidden (nothing). */
-export type ReviewPanelMode = "expanded" | "compact" | "hidden";
-
-/** Expanded-rail width bounds, in terminal columns. */
-export const REVIEW_MIN_WIDTH = 24;
-export const REVIEW_MAX_WIDTH = 50;
-export const REVIEW_DEFAULT_WIDTH = 34;
-/**
- * Columns the plan/diff column keeps for itself: the expanded rail yields past
- * this so a narrow terminal (or a wide persisted width) can never crowd the
- * plan out to nothing - the whole reason the panel is resizable. On terminals
- * wide enough for the full 50-col rail this bound never binds.
- */
-export const REVIEW_PLAN_MIN_WIDTH = 30;
-/** The compact strip is a fixed narrow column: count on top, one dot per card. */
-export const REVIEW_COMPACT_WIDTH = 6;
-/** Keyboard resize step, in columns, for the widen/narrow keys. */
-export const REVIEW_RESIZE_STEP = 2;
-
-/** Round a desired width to a whole column and clamp it to the bounds. */
-export function clampWidth(
-  desiredWidth: number,
-  min = REVIEW_MIN_WIDTH,
-  max = REVIEW_MAX_WIDTH,
-): number {
-  return Math.max(min, Math.min(max, Math.round(desiredWidth)));
-}
-
-/**
- * The widest the expanded rail may be on a given terminal, reserving the plan
- * its minimum and one column for the divider. Never drops below REVIEW_MIN_WIDTH
- * (an extremely narrow terminal is the auto-collapse case, handled elsewhere).
- */
-export function maxWidthForTerminal(terminalWidth: number): number {
-  return Math.max(
-    REVIEW_MIN_WIDTH,
-    Math.min(REVIEW_MAX_WIDTH, terminalWidth - REVIEW_PLAN_MIN_WIDTH - 1),
-  );
-}
-
-/** Clamp a desired rail width to the bounds AND the terminal, so the plan keeps its room. */
-export function resolveReviewWidth(desiredWidth: number, terminalWidth: number): number {
-  return clampWidth(desiredWidth, REVIEW_MIN_WIDTH, maxWidthForTerminal(terminalWidth));
-}
-
-/** The keybinding cycle: expanded -> compact -> hidden -> expanded. */
-export function cycleReviewPanelMode(mode: ReviewPanelMode): ReviewPanelMode {
-  return mode === "expanded" ? "compact" : mode === "compact" ? "hidden" : "expanded";
-}
-
-/**
- * The clickable chevron toggles only between expanded and compact - hidden is
- * reachable by keybinding alone, so it never leaves a leftover tab behind. A
- * toggle from hidden still opens the panel rather than doing nothing.
- */
-export function toggleReviewPanelMode(mode: ReviewPanelMode): ReviewPanelMode {
-  return mode === "expanded" ? "compact" : "expanded";
-}
-
-/**
- * Rail width from an absolute mouse column while dragging the divider: the rail
- * spans from the mouse column to the terminal's right edge, then clamps.
- */
-export function widthFromMouseColumn(mouseColumn: number, terminalWidth: number): number {
-  return resolveReviewWidth(terminalWidth - mouseColumn, terminalWidth);
-}
-
-/**
- * The divider is a single-column stack of vertical glyphs (a text block, not a
- * bordered box - a one-column box with a border renders a full box). One glyph
- * per row, at least one so the column never collapses.
- */
-export function reviewRowsToDivider(rows: number): string {
-  return Array.from({ length: Math.max(1, rows) }, () => "│").join("\n");
-}