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

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/PrototypeSheet.tsx

@@ -10,6 +10,7 @@
 
 import React, { useEffect, useRef, useState } from "react";
 import type { BoxRenderable } from "@opentui/core";
+import * as v from "valibot";
 import { useKeyboard, useRenderer } from "@opentui/react";
 import type { Theme } from "../theme";
 import { quickActionBody, type QuickAction } from "../config";
@@ -95,10 +96,7 @@ type CaptureRenderer = {
  * raster and fewer bytes). Without a resolution report, fall back to a fixed
  * width at 2x and derive the height from the cell aspect.
  */
-function captureConfig(
-  region: CellRegion,
-  renderer: CaptureRenderer,
-): { viewport: PrototypeViewport; deviceScaleFactor: number } {
+function captureConfig(region: CellRegion, renderer: CaptureRenderer) {
   const resolution = renderer.resolution;
 
   if (resolution && renderer.terminalWidth >= 1 && renderer.terminalHeight >= 1) {
@@ -174,11 +172,9 @@ function PrototypeSheetImpl({
   // harness), but the launch trigger still runs.
   useEffect(() => {
     if (!renderer) return;
-    // writeOut is the renderer's raw output channel, ordered against its frame
-    // bytes; it is private, so reach it through one narrow cast
-    const rawWrite = (renderer as unknown as { writeOut?: (data: string) => void }).writeOut;
-    const write =
-      typeof rawWrite === "function" ? (chunk: string) => rawWrite.call(renderer, chunk) : null;
+    const rendererOutput = v.safeParse(v.object({ writeOut: v.function() }), renderer);
+    const rawWrite = rendererOutput.success ? rendererOutput.output.writeOut : null;
+    const write = rawWrite ? (chunk: string) => rawWrite.call(renderer, chunk) : null;
     const medium = resolveTransmitMedium();
     const paint = (): void => {
       if (!write) return;

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,
@@ -187,15 +191,20 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
     >
       <Tabs
         selectedKey={railTab}
-        onSelectionChange={(key) => onTabChange(key as 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 === "agent" ? (
+      {railTab === "tree" ? (
+        <TreePane {...tree} theme={theme} />
+      ) : railTab === "agent" ? (
         <box style={{ flexGrow: 1, flexDirection: "column" }}>
           <AgentLauncher
             session={session}
@@ -221,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
@@ -232,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>
           ) : (