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

package/src/components/ReviewPanel.stories.tsx

@@ -1,100 +0,0 @@
-import React from "react";
-import { DARK } from "../theme";
-import { REVIEW_MAX_WIDTH, REVIEW_MIN_WIDTH } from "../review-panel";
-import type { Story, StoryMeta } from "./story";
-import { ReviewPanel } from "./ReviewPanel";
-import { FIXTURE_ANNOTATIONS, fixturePlanSession } from "./story-fixtures";
-
-export const meta: StoryMeta = { title: "Surfaces/ReviewPanel" };
-
-/** An empty Tree tab: the stories here show the review tab. */
-const tree = {
-  rows: [],
-  canMove: true,
-  canFork: true,
-  onSelect: () => {},
-  onGo: () => {},
-  onBranch: () => {},
-  onLabel: () => {},
-  onFork: () => {},
-  onForkAndShare: () => {},
-};
-
-const rail = {
-  session: fixturePlanSession(),
-  tree,
-  authorNames: {},
-  selectedId: FIXTURE_ANNOTATIONS[0]!.id,
-  resolvedIds: new Set(FIXTURE_ANNOTATIONS.map((annotation) => annotation.id)),
-  curationItems: [],
-  railTab: "review" as const,
-  pendingCount: 2,
-  cardEdit: null,
-  submitConfirm: null,
-  onTabChange: () => {},
-  onSelectCard: () => {},
-  onActivateCard: () => {},
-  onSelectCuration: () => {},
-  onUndoCuration: () => {},
-  onSubmitRequest: () => {},
-  onLaunchHarness: () => {},
-};
-
-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={{ flexGrow: 1, paddingLeft: 1 }}>
-        <text fg={DARK.textMuted}>The plan takes the width the panel hands back.</text>
-      </box>
-      {children}
-    </box>
-  );
-}
-
-export const ExpandedNarrow: Story = {
-  render: () => (
-    <PanelFrame>
-      <ReviewPanel mode="expanded" width={REVIEW_MIN_WIDTH} rail={rail} {...panelCallbacks} />
-    </PanelFrame>
-  ),
-  size: { width: 80, height: 24 },
-};
-
-export const ExpandedWide: Story = {
-  render: () => (
-    <PanelFrame>
-      <ReviewPanel mode="expanded" width={REVIEW_MAX_WIDTH} rail={rail} {...panelCallbacks} />
-    </PanelFrame>
-  ),
-  expectedColors: [DARK.accent],
-  size: { width: 90, height: 24 },
-};
-
-export const Compact: Story = {
-  render: () => (
-    <PanelFrame>
-      <ReviewPanel mode="compact" width={34} rail={rail} {...panelCallbacks} />
-    </PanelFrame>
-  ),
-  expectedColors: [DARK.accent],
-  size: { width: 60, height: 24 },
-};
-
-export const Hidden: Story = {
-  render: () => (
-    <PanelFrame>
-      <ReviewPanel mode="hidden" width={34} rail={rail} {...panelCallbacks} />
-    </PanelFrame>
-  ),
-  size: { width: 60, height: 24 },
-};

package/src/components/ReviewPanel.tsx

@@ -1,103 +0,0 @@
-/**
- * The review surface's outer shell: the grabbable divider plus the rail in one
- * of three modes - expanded (the full ReviewRail, resizable), compact (a narrow
- * count + dots strip that hands width back to the plan), or hidden (nothing at
- * all, no leftover tab). The keybinding cycles all three; the clickable chevron
- * toggles expanded and compact only. App owns the width/mode state and the drag
- * on the container; this file only reads them. The geometry (width clamp, the
- * divider glyph column, the cycle) lives in review-panel.ts so this stays
- * declarative.
- */
-
-import React from "react";
-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, type ReviewPanelMode } from "../review-panel";
-
-export interface ReviewPanelProps {
-  mode: ReviewPanelMode;
-  /** Expanded-rail width in columns (already clamped by the app). */
-  width: number;
-  /** Arm a divider drag; the app tracks the drag itself on the container. */
-  onDividerGrab: () => void;
-  /** Chevron click: expanded <-> compact (never hidden). */
-  onToggle: () => void;
-  /** The expanded ReviewRail's props; width and onCollapse are supplied here. */
-  rail: Omit<ReviewRailProps, "width" | "onCollapse" | "theme">;
-  railRef?: React.Ref<ReviewRailHandle>;
-  theme?: Theme;
-}
-
-/** 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
- *  `<` expand chevron, bottom-padded to sit at the same row as the expanded `>`. */
-function CompactRail({
-  annotations,
-  onExpand,
-  theme,
-}: {
-  annotations: Annotation[];
-  onExpand: () => void;
-  theme?: Theme;
-}): React.ReactNode {
-  const tokens = useComponentTheme(theme);
-
-  return (
-    <box
-      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>
-      </box>
-      <box style={{ height: 1 }} />
-      <box style={{ flexDirection: "column", alignItems: "center" }}>
-        {annotations.map((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>
-      </box>
-    </box>
-  );
-}
-
-export function ReviewPanel({
-  mode,
-  width,
-  onDividerGrab,
-  onToggle,
-  rail,
-  railRef,
-  theme,
-}: ReviewPanelProps): React.ReactNode {
-  if (mode === "hidden") return null;
-
-  return (
-    <>
-      <ReviewDivider onGrab={onDividerGrab} />
-      {mode === "expanded" ? (
-        <ReviewRail ref={railRef} {...rail} width={width} onCollapse={onToggle} theme={theme} />
-      ) : (
-        <CompactRail annotations={rail.session.annotations} onExpand={onToggle} theme={theme} />
-      )}
-    </>
-  );
-}

package/src/components/ReviewRail.stories.tsx

@@ -1,232 +0,0 @@
-import React from "react";
-import { DARK } from "../theme";
-import type { Story, StoryMeta } from "./story";
-import { ReviewRail } from "./ReviewRail";
-import { FIXTURE_ANNOTATIONS, fixtureDiffSession, fixturePlanSession } from "./story-fixtures";
-
-export const meta: StoryMeta = { title: "Surfaces/ReviewRail" };
-
-/** An empty Tree tab: the stories here show the review tab. */
-const tree = {
-  rows: [],
-  canMove: true,
-  canFork: true,
-  onSelect: () => {},
-  onGo: () => {},
-  onBranch: () => {},
-  onLabel: () => {},
-  onFork: () => {},
-  onForkAndShare: () => {},
-};
-
-const callbacks = {
-  curationItems: [],
-  tree,
-  onTabChange: () => {},
-  onSelectCard: () => {},
-  onActivateCard: () => {},
-  onSelectCuration: () => {},
-  onUndoCuration: () => {},
-  onSubmitRequest: () => {},
-  onLaunchHarness: () => {},
-};
-
-/** The rail expects a height-constrained parent, like the app's main row. */
-function RailFrame({ children }: { children: React.ReactNode }): React.ReactNode {
-  return <box style={{ flexDirection: "row", width: "100%", height: "100%" }}>{children}</box>;
-}
-
-export const AnnotationStack: Story = {
-  render: () => (
-    <RailFrame>
-      <ReviewRail
-        session={fixturePlanSession()}
-        authorNames={{}}
-        selectedId={FIXTURE_ANNOTATIONS[0]!.id}
-        resolvedIds={new Set(FIXTURE_ANNOTATIONS.map((annotation) => annotation.id))}
-        railTab="review"
-        pendingCount={2}
-        cardEdit={null}
-        submitConfirm={null}
-        {...callbacks}
-      />
-    </RailFrame>
-  ),
-  expectedColors: [DARK.accent],
-  size: { width: 40, height: 24 },
-};
-
-export const MixedOwnershipStack: Story = {
-  render: () => (
-    <RailFrame>
-      <ReviewRail
-        session={fixturePlanSession({
-          participants: [{ id: "SHA256:collab1", provider: "ssh", name: "Priya" }],
-          annotations: [
-            {
-              id: "own_note",
-              kind: "comment",
-              anchor: { quote: "persists sessions", prefix: "The daemon ", suffix: " to disk" },
-              body: "Which daemon owns this?",
-              createdAt: "2026-01-01T00:00:00Z",
-            },
-            {
-              id: "collab_note",
-              kind: "comment",
-              anchor: { quote: "move the store", prefix: "", suffix: "" },
-              body: "move it behind one interface",
-              author: "SHA256:collab1",
-              createdAt: "2026-01-01T00:00:01Z",
-            },
-          ],
-        })}
-        authorNames={{}}
-        selectedId="own_note"
-        resolvedIds={new Set(["own_note", "collab_note"])}
-        railTab="review"
-        pendingCount={2}
-        cardEdit={null}
-        submitConfirm={null}
-        {...callbacks}
-      />
-    </RailFrame>
-  ),
-  // every annotation border is accent now
-  expectedColors: [DARK.accent],
-  size: { width: 40, height: 24 },
-};
-
-export const Removals: Story = {
-  render: () => (
-    <RailFrame>
-      <ReviewRail
-        session={fixtureDiffSession()}
-        authorNames={{}}
-        resolvedIds={null}
-        railTab="review"
-        pendingCount={0}
-        cardEdit={null}
-        submitConfirm={null}
-        {...callbacks}
-        curationItems={[
-          {
-            id: "diff:src/store.ts#0#1",
-            source: "diff",
-            preview: ["-   private items = [];", "+   private items = new Map();"],
-            revealIndex: 3,
-          },
-          {
-            id: "diff:src/store.ts#1#hunk",
-            source: "diff",
-            preview: ["-   return null;", "+   return fallback();", "+   log(fallback);"],
-            revealIndex: 9,
-          },
-        ]}
-        selectedCurationId="diff:src/store.ts#0#1"
-      />
-    </RailFrame>
-  ),
-  expectedColors: [DARK.red],
-  size: { width: 40, height: 24 },
-};
-
-/** A plan cut and an annotation interleave in one line-ordered stack. */
-export const InterleavedStack: Story = {
-  render: () => (
-    <RailFrame>
-      <ReviewRail
-        session={fixturePlanSession()}
-        authorNames={{}}
-        selectedId={FIXTURE_ANNOTATIONS[0]!.id}
-        resolvedIds={new Set(FIXTURE_ANNOTATIONS.map((annotation) => annotation.id))}
-        railTab="review"
-        pendingCount={2}
-        cardEdit={null}
-        submitConfirm={null}
-        {...callbacks}
-        curationItems={[
-          {
-            id: "plan:6-6",
-            source: "plan",
-            preview: ["- add recovery"],
-            revealIndex: 1,
-          },
-        ]}
-        annotationPositions={new Map([[FIXTURE_ANNOTATIONS[0]!.id, 5]])}
-      />
-    </RailFrame>
-  ),
-  expectedColors: [DARK.accent],
-  size: { width: 40, height: 24 },
-};
-
-export const AgentTab: Story = {
-  render: () => (
-    <RailFrame>
-      <ReviewRail
-        session={fixturePlanSession()}
-        authorNames={{}}
-        resolvedIds={new Set()}
-        railTab="agent"
-        pendingCount={2}
-        cardEdit={null}
-        submitConfirm={null}
-        {...callbacks}
-      />
-    </RailFrame>
-  ),
-  size: { width: 40, height: 24 },
-};
-
-export const SubmitConfirmOpen: Story = {
-  render: () => (
-    <RailFrame>
-      <ReviewRail
-        session={fixturePlanSession()}
-        authorNames={{}}
-        resolvedIds={new Set()}
-        railTab="review"
-        pendingCount={2}
-        cardEdit={null}
-        submitConfirm={{
-          verdict: "request_changes",
-          summary: "",
-          onInput: () => {},
-          onSelectVerdict: () => {},
-          onSubmit: () => {},
-          onCancel: () => {},
-        }}
-        {...callbacks}
-      />
-    </RailFrame>
-  ),
-  expectedColors: [DARK.red],
-  size: { width: 40, height: 30 },
-};
-
-export const Resolved: Story = {
-  render: () => (
-    <RailFrame>
-      <ReviewRail
-        session={fixturePlanSession({
-          status: "resolved",
-          verdict: {
-            kind: "approve",
-            summary: "",
-            feedback: "",
-            resolvedAt: "2026-01-01T00:00:00Z",
-          },
-        })}
-        authorNames={{}}
-        resolvedIds={new Set()}
-        railTab="review"
-        pendingCount={0}
-        cardEdit={null}
-        submitConfirm={null}
-        {...callbacks}
-      />
-    </RailFrame>
-  ),
-  expectedColors: [DARK.green],
-  size: { width: 40, height: 24 },
-};