@cueloop/client 0.1.0-alpha.64 → 0.1.0-alpha.65

package/src/app-screens.tsx

@@ -2,7 +2,7 @@ import React, { type Dispatch, type SetStateAction } from "react";
 import type { ReviewSession, VerdictKind } from "@cueloop/schema";
 import { returnPaneFor } from "@cueloop/schema";
 import type { Theme } from "./theme";
-import type { Mode } from "./intent-dispatch";
+import type { Mode, TreeAsk } from "./intent-dispatch";
 import type { Intent } from "./keymap";
 import type { ReviewController, ToastState } from "./session-controller";
 import { noteForFile } from "./walk";
@@ -195,6 +195,21 @@ export function CompletionScreen(props: {
   );
 }
 
+/** The words each tree prompt uses; enter with an empty summary moves back without one. */
+const TREE_PROMPTS: Record<TreeAsk, { title: string; label: string; placeholder: string }> = {
+  branch: { title: " Branch ", label: "Name for the new branch:", placeholder: "alt" },
+  label: {
+    title: " Checkpoint ",
+    label: "Name for this checkpoint:",
+    placeholder: "before the rewrite",
+  },
+  navigate: {
+    title: " Move back ",
+    label: "Summary of what you leave behind (optional):",
+    placeholder: "tried a shorter plan",
+  },
+};
+
 export function TrailingOverlays(props: {
   walking: boolean;
   walk: { index: number } | null;
@@ -264,6 +279,17 @@ export function TrailingOverlays(props: {
           theme={theme}
         />
       ) : null}
+      {mode.type === "treePrompt" ? (
+        <PromptDialog
+          isOpen
+          title={TREE_PROMPTS[mode.ask].title}
+          label={TREE_PROMPTS[mode.ask].label}
+          value={mode.text}
+          placeholder={TREE_PROMPTS[mode.ask].placeholder}
+          onInput={(text) => setMode({ ...mode, text })}
+          theme={theme}
+        />
+      ) : null}
       {toast ? <Toast title={toast.title} body={toast.body} theme={theme} /> : null}
     </>
   );

package/src/app-view-model.ts

@@ -1,14 +1,11 @@
 import type { Dispatch, MutableRefObject, SetStateAction } from "react";
 import type { ReviewSession, VerdictKind } from "@cueloop/schema";
-import { activeSpanState, reviewerAnnotations, type Mode } from "./intent-dispatch";
-import { displayText, type DisplayBlock } from "./view-plan";
+import { reviewerAnnotations, type Mode } from "./intent-dispatch";
 import type { DiffRow } from "./view-diff";
 import type { Intent, KeyState } from "./keymap";
-import type { Completion, ReviewController } from "./session-controller";
-import type { QuickAction } from "./config";
+import type { Completion } from "./session-controller";
 import type { WalkFile } from "./walk";
 import { viewedCount } from "./walk";
-import type { PlanComposeState, PlanPopoverState } from "./components/PlanSheet";
 import type { DiffComposeState } from "./components/DiffSheet";
 import type { ConfirmCardProps } from "./components/ConfirmCard";
 import type { RailCardEdit } from "./components/ReviewRail";
@@ -44,7 +41,8 @@ export function resolveOverlay(
   if (mode.type === "compose" || mode.type === "railEdit") return "compose";
   if (mode.type === "submit") return "submit";
   if (mode.type === "confirmDelete") return "confirm";
-  if (mode.type === "rename" || mode.type === "nameSelf") return "prompt";
+  if (mode.type === "rename" || mode.type === "nameSelf" || mode.type === "treePrompt")
+    return "prompt";
   if (mode.type === "spanActions") return "spanActions";
   if (completionPhase === "prompt") return "completion-prompt";
   if (completionPhase === "counting") return "completion-counting";
@@ -130,49 +128,12 @@ export function buildRenderFlags(params: {
   };
 }
 
-export function buildActiveSpan(
-  mode: Mode,
-  isDiff: boolean,
-): { displayIndex: number; start: number; end: number } | null {
-  const markedSpan = activeSpanState(mode);
-
-  if (markedSpan)
-    return { displayIndex: markedSpan.displayIndex, start: markedSpan.start, end: markedSpan.end };
-  if (mode.type === "compose" && !isDiff)
-    return { displayIndex: mode.displayIndex, start: mode.start, end: mode.end };
-
-  return null;
-}
-
 interface DraftHandlerDeps {
   liveInput: MutableRefObject<string>;
   setMode: Dispatch<SetStateAction<Mode>>;
   dispatch: (intent: Intent) => void;
 }
 
-export function buildComposeState(
-  deps: DraftHandlerDeps & { mode: Mode; isDiff: boolean; display: DisplayBlock[] },
-): PlanComposeState | null {
-  const { mode, isDiff, display, liveInput, setMode, dispatch } = deps;
-
-  if (mode.type !== "compose" || isDiff) return null;
-
-  return {
-    kind: mode.kind,
-    displayIndex: mode.displayIndex,
-    quote: displayText(display[mode.displayIndex]!).slice(mode.start, mode.end),
-    draft: {
-      text: mode.text,
-      onInput: (text: string) => {
-        liveInput.current = text;
-        setMode({ ...mode, text });
-      },
-      onSave: () => dispatch({ type: "saveCompose" }),
-      onCancel: () => dispatch({ type: "closeOverlay" }),
-    },
-  };
-}
-
 export function buildDiffComposeState(
   deps: DraftHandlerDeps & { mode: Mode; isDiff: boolean; rows: DiffRow[] },
 ): DiffComposeState | null {
@@ -196,59 +157,6 @@ export function buildDiffComposeState(
   };
 }
 
-export function buildPopoverState(deps: {
-  mode: Mode;
-  isDiff: boolean;
-  quickActions: QuickAction[];
-  isOwner: boolean;
-  observer: boolean;
-  resolved: boolean;
-  controller: ReviewController;
-  dispatch: (intent: Intent) => void;
-}): PlanPopoverState | null {
-  const { mode, isDiff, quickActions, isOwner, observer, resolved, controller, dispatch } = deps;
-  const markedSpan = activeSpanState(mode);
-
-  if (!markedSpan || isDiff) return null;
-  const spanMutationBlock = (): string | null =>
-    observer ? "observer - read-only" : resolved ? "review submitted - read-only" : null;
-
-  return {
-    displayIndex: markedSpan.displayIndex,
-    view: mode.type === "spanActions" ? ("actions" as const) : ("toolbar" as const),
-    actions: quickActions,
-    actionIndex: mode.type === "spanActions" ? mode.index : 0,
-    canCut: isOwner,
-    onComment: () => {
-      const blocked = spanMutationBlock();
-
-      if (blocked) return controller.setStatus(blocked);
-      dispatch({ type: "openCompose", kind: "comment", from: "span" });
-    },
-    onCut: () => {
-      const blocked = spanMutationBlock();
-
-      if (blocked) return controller.setStatus(blocked);
-      if (!isOwner) return;
-      dispatch({ type: "spanCut" });
-    },
-    onOpenActions: () => {
-      const blocked = spanMutationBlock();
-
-      if (blocked) return controller.setStatus(blocked);
-      dispatch({ type: "openSpanActions" });
-    },
-    onClose: () => dispatch({ type: "closeOverlay" }),
-    onPickAction: (index: number) => {
-      const blocked = spanMutationBlock();
-
-      if (blocked) return controller.setStatus(blocked);
-      dispatch({ type: "pickSpanAction", index });
-    },
-    onBack: () => dispatch({ type: "closeSpanActions" }),
-  };
-}
-
 export function buildSubmitConfirmState(
   deps: DraftHandlerDeps & {
     mode: Mode;

package/src/components/AnnotationCard.tsx

@@ -181,11 +181,11 @@ export function AnnotationCard({
   );
 
   if (draft) {
-    const verb = "comment on";
+    const primitive = "comment on";
 
     return (
       <Card
-        title={` ${verb} "${truncateToSingleLine(quote, 40)}" `}
+        title={` ${primitive} "${truncateToSingleLine(quote, 40)}" `}
         contentRows={editorRowCount + 1}
         borderColor={kindColor}
         backgroundColor="transparent"

package/src/components/KeybindsDialog.tsx

@@ -10,13 +10,52 @@ export interface KeybindsDialogProps {
   theme?: Theme;
 }
 
+/** Rows a section takes: its title, its entries, and the blank line after it. */
+function sectionRows(section: CheatsheetSection): number {
+  return 1 + section.entries.length + 1;
+}
+
+/**
+ * Split the sections over `count` columns, filling each column to the
+ * balanced share of rows before starting the next, so a long cheatsheet
+ * reads top to bottom, then left to right.
+ */
+function columnsOf(sections: CheatsheetSection[], count: number): CheatsheetSection[][] {
+  const total = sections.reduce((sum, section) => sum + sectionRows(section), 0);
+  const share = Math.ceil(total / count);
+  const columns: CheatsheetSection[][] = [[]];
+  let filled = 0;
+
+  for (const section of sections) {
+    const column = columns[columns.length - 1]!;
+
+    if (filled > 0 && filled + sectionRows(section) > share && columns.length < count) {
+      columns.push([section]);
+      filled = sectionRows(section);
+    } else {
+      column.push(section);
+      filled += sectionRows(section);
+    }
+  }
+
+  return columns;
+}
+
+const COLUMN_WIDTH = 48;
+
 export function KeybindsDialog({ sections, theme }: KeybindsDialogProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
-  const contentRows =
-    sections.reduce((sum, section) => sum + 1 + section.entries.length + 1, 0) + 1;
-  const width = Math.min(52, terminalWidth - 6);
-  const height = Math.min(terminalHeight - 4, contentRows + 3);
+  const totalRows = sections.reduce((sum, section) => sum + sectionRows(section), 0) + 1;
+  // a cheatsheet taller than the terminal folds into a second column
+  const columnCount =
+    totalRows + 3 > terminalHeight - 4 && terminalWidth >= COLUMN_WIDTH * 2 + 6 ? 2 : 1;
+  const columns = columnsOf(sections, columnCount);
+  const tallest = Math.max(
+    ...columns.map((column) => column.reduce((sum, section) => sum + sectionRows(section), 0)),
+  );
+  const width = Math.min(COLUMN_WIDTH * columnCount + 4, terminalWidth - 6);
+  const height = Math.min(terminalHeight - 4, tallest + 1 + 3);
 
   return (
     <Dialog
@@ -36,19 +75,24 @@ export function KeybindsDialog({ sections, theme }: KeybindsDialogProps): React.
           paddingTop: 1,
         }}
       >
-        {sections.map((section) => (
-          <box key={section.title} style={{ flexDirection: "column" }}>
-            <text fg={tokens.accent}>{section.title}</text>
-            {section.entries.map((entry, index) => (
-              <text key={index}>
-                <span fg={tokens.text}>{entry.keys.padEnd(12)}</span>
-                <span fg={tokens.textMuted}>{entry.label}</span>
-              </text>
-            ))}
-            <text> </text>
-          </box>
-        ))}
-        <box style={{ flexGrow: 1 }} />
+        <box style={{ flexDirection: "row", flexGrow: 1 }}>
+          {columns.map((column, columnIndex) => (
+            <box key={columnIndex} style={{ flexDirection: "column", width: COLUMN_WIDTH }}>
+              {column.map((section) => (
+                <box key={section.title} style={{ flexDirection: "column" }}>
+                  <text fg={tokens.accent}>{section.title}</text>
+                  {section.entries.map((entry, index) => (
+                    <text key={index}>
+                      <span fg={tokens.text}>{entry.keys.padEnd(12)}</span>
+                      <span fg={tokens.textMuted}>{entry.label}</span>
+                    </text>
+                  ))}
+                  <text> </text>
+                </box>
+              ))}
+            </box>
+          ))}
+        </box>
         <box style={{ flexDirection: "row" }}>
           <box style={{ flexGrow: 1 }} />
           <text fg={tokens.textDim}>[esc]</text>

package/src/components/ReviewPanel.stories.tsx

@@ -7,8 +7,22 @@ import { FIXTURE_ANNOTATIONS, fixturePlanSession } from "./story-fixtures";
 
 export const meta: StoryMeta = { title: "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)),

package/src/components/ReviewRail.stories.tsx

@@ -6,8 +6,22 @@ import { FIXTURE_ANNOTATIONS, fixtureDiffSession, fixturePlanSession } from "./s
 
 export const meta: StoryMeta = { title: "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: () => {},

package/src/components/ReviewRail.tsx

@@ -1,5 +1,5 @@
 /**
- * The right review rail: tab strip (Review/Agent), the scrollable annotation
+ * 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
@@ -18,11 +18,12 @@ 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";
+export type RailTab = "review" | "agent" | "tree";
 
 export interface RailCardEdit extends AnnotationDraft {
   id: string;
@@ -65,6 +66,8 @@ export interface ReviewRailProps {
   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;
   /**
@@ -95,6 +98,7 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
     onSubmitRequest,
     onLaunchHarness,
     onAgentTerminal,
+    tree,
     width = 34,
     onCollapse,
     theme,
@@ -188,16 +192,19 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
       <Tabs
         selectedKey={railTab}
         onSelectionChange={(key) => {
-          if (key === "review" || key === "agent") onTabChange(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 === "agent" ? (
+      {railTab === "tree" ? (
+        <TreePane {...tree} theme={theme} />
+      ) : railTab === "agent" ? (
         <box style={{ flexGrow: 1, flexDirection: "column" }}>
           <AgentLauncher
             session={session}
@@ -223,7 +230,7 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
         </box>
       )}
       {/* the confirm card keeps full width, above the footer row */}
-      {railTab !== "agent" && submitConfirm ? (
+      {railTab === "review" && submitConfirm ? (
         <ConfirmCard {...submitConfirm} theme={theme} />
       ) : null}
       {/* footer row: collapse chevron left-bound, the submit affordance inline
@@ -234,7 +241,7 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
             <text fg={tokens.textDim}>{">"}</text>
           </box>
         ) : null}
-        {railTab !== "agent" && !submitConfirm ? (
+        {railTab === "review" && !submitConfirm ? (
           session.status === "resolved" ? (
             <text fg={tokens.green}>resolved: {session.verdict!.kind.replace("_", " ")}</text>
           ) : (