@cueloop/client 0.1.0-alpha.59 → 0.1.0-alpha.60

package/src/components/PrototypeSheet.tsx

@@ -69,14 +69,17 @@ function cellHeightOverWidth(renderer: {
   terminalHeight: number;
 }): number {
   const resolution = renderer.resolution;
+
   if (!resolution || renderer.terminalWidth < 1 || renderer.terminalHeight < 1) {
     return FALLBACK_CELL_HEIGHT_OVER_WIDTH;
   }
+
   return resolution.height / renderer.terminalHeight / (resolution.width / renderer.terminalWidth);
 }
 
 function regionOf(box: BoxRenderable | null): CellRegion | null {
   if (!box || box.width < 1 || box.height < 1) return null;
+
   return { column: box.x, row: box.y, columns: box.width, rows: box.height };
 }
 
@@ -97,9 +100,11 @@ function captureConfig(
   renderer: CaptureRenderer,
 ): { viewport: PrototypeViewport; deviceScaleFactor: number } {
   const resolution = renderer.resolution;
+
   if (resolution && renderer.terminalWidth >= 1 && renderer.terminalHeight >= 1) {
     const cellWidth = resolution.width / renderer.terminalWidth;
     const cellHeight = resolution.height / renderer.terminalHeight;
+
     return {
       viewport: {
         width: Math.max(1, Math.round(region.columns * cellWidth)),
@@ -108,6 +113,7 @@ function captureConfig(
       deviceScaleFactor: 1,
     };
   }
+
   return {
     viewport: {
       width: CAPTURE_WIDTH,
@@ -139,6 +145,7 @@ function PrototypeSheetImpl({
   const paintRef = useRef<() => void>(() => undefined);
   const launchRef = useRef<() => void>(() => undefined);
   const hiddenRef = useRef(hidden);
+
   useEffect(() => {
     hiddenRef.current = hidden;
   });
@@ -182,10 +189,12 @@ function PrototypeSheetImpl({
           deleteKittyImage(write, PROTOTYPE_IMAGE_ID);
           transmittedRef.current = null;
         }
+
         return;
       }
       const region = regionOf(regionRef.current);
       const png = pngRef.current;
+
       if (!region || !png) return;
       if (transmittedRef.current !== png) {
         transmitKittyImage(write, png, region, PROTOTYPE_IMAGE_ID, medium);
@@ -194,12 +203,15 @@ function PrototypeSheetImpl({
         placeKittyImage(write, region, PROTOTYPE_IMAGE_ID);
       }
     };
+
     paintRef.current = paint;
     const onFrame = (): void => {
       launchRef.current();
       paint();
     };
+
     renderer.on("frame", onFrame);
+
     return () => {
       renderer.off("frame", onFrame);
       if (write) deleteKittyImage(write, PROTOTYPE_IMAGE_ID);
@@ -211,6 +223,7 @@ function PrototypeSheetImpl({
   }, [composing, onComposingChange]);
 
   const unmountedRef = useRef(false);
+
   useEffect(() => {
     return () => {
       unmountedRef.current = true;
@@ -221,13 +234,16 @@ function PrototypeSheetImpl({
   const launch = (): void => {
     const region = regionOf(regionRef.current);
     const caps = renderer?.capabilities;
+
     if (launchedRef.current || !region) return;
     if (caps && caps.kitty_graphics === false) {
       setStatus("unsupported");
+
       return;
     }
     launchedRef.current = true;
     const capture = captureConfig(region, renderer!);
+
     viewportRef.current = capture.viewport;
     void (async () => {
       try {
@@ -236,10 +252,12 @@ function PrototypeSheetImpl({
           viewport: capture.viewport,
           deviceScaleFactor: capture.deviceScaleFactor,
         });
+
         // the sheet may have unmounted while Chromium was launching; close the
         // late arrival instead of leaking the process
         if (unmountedRef.current) {
           void browser.close();
+
           return;
         }
         browserRef.current = browser;
@@ -251,12 +269,14 @@ function PrototypeSheetImpl({
       }
     })();
   };
+
   useEffect(() => {
     launchRef.current = launch;
   });
 
   const refresh = async (): Promise<void> => {
     const browser = browserRef.current;
+
     if (browser) setPng(await browser.screenshot());
   };
 
@@ -278,6 +298,7 @@ function PrototypeSheetImpl({
   const onRegionMouseDown = (event: { x: number; y: number }): void => {
     const browser = browserRef.current;
     const region = regionOf(regionRef.current);
+
     if (status !== "ready" || !browser || !region) return;
     const geometry = {
       x: region.column,
@@ -286,12 +307,15 @@ function PrototypeSheetImpl({
       height: region.rows,
     };
     const cssPoint = imageCellToCss(event, geometry, viewportRef.current);
+
     if (!cssPoint) return;
     void (async () => {
       const element = await browser.elementAt(cssPoint.x, cssPoint.y);
+
       if (!element) return;
       const cell = cssBoxToCell(element.box, geometry, viewportRef.current);
       const topRaw = cell.row - geometry.y;
+
       setSelected(element);
       setOverlayCell({
         left: Math.max(0, cell.column - geometry.x),
@@ -308,8 +332,10 @@ function PrototypeSheetImpl({
 
   const onRegionScroll = (event: { scroll?: { direction: string } }): void => {
     const browser = browserRef.current;
+
     if (status !== "ready" || !browser) return;
     const delta = event.scroll?.direction === "up" ? -SCROLL_STEP : SCROLL_STEP;
+
     // a selection would drift once the page scrolls under it, so drop it
     clearSelection();
     void browser
@@ -419,5 +445,6 @@ function statusLine(status: SheetStatus, errorMessage: string): string {
   if (status === "loading") return "rendering prototype…";
   if (status === "unsupported")
     return "prototype preview needs a graphics terminal (kitty or ghostty)";
+
   return `prototype preview failed: ${errorMessage}`;
 }

package/src/components/ReviewPanel.tsx

@@ -49,6 +49,7 @@ function CompactRail({
   theme?: Theme;
 }): React.ReactNode {
   const tokens = useComponentTheme(theme);
+
   return (
     <box
       style={{
@@ -88,6 +89,7 @@ export function ReviewPanel({
   theme,
 }: ReviewPanelProps): React.ReactNode {
   if (mode === "hidden") return null;
+
   return (
     <>
       <ReviewDivider onGrab={onDividerGrab} />

package/src/components/ReviewRail.tsx

@@ -283,6 +283,7 @@ function RemovalCard({
     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

package/src/components/SettingsDialog.tsx

@@ -50,10 +50,13 @@ export function SettingsDialog({
 }: SettingsDialogProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
+
   if (!isOpen) return null;
   const category =
     categories.find((candidate) => candidate.id === activeCategoryId) ?? categories[0];
+
   if (!category) return null;
+
   return (
     <Dialog
       isOpen
@@ -68,6 +71,7 @@ export function SettingsDialog({
           <text fg={tokens.textDim}>SETTINGS</text>
           {categories.map((candidate) => {
             const isActive = candidate.id === category.id;
+
             return (
               <box
                 key={candidate.id}
@@ -92,6 +96,7 @@ export function SettingsDialog({
           {category.rows.map((row, rowIndex) => {
             const isActive = activeZone === "body" && rowIndex === activeRowIndex;
             const value = values[row.key];
+
             if (row.kind === "toggle") {
               return (
                 <ToggleRow
@@ -116,6 +121,7 @@ export function SettingsDialog({
                 />
               );
             }
+
             return (
               <TextRow
                 key={row.key}

package/src/components/SettingsRows.tsx

@@ -27,6 +27,7 @@ interface RowShellProps {
 
 function RowShell({ label, isActive, onPress, theme, children }: RowShellProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
+
   return (
     <box
       style={{
@@ -60,6 +61,7 @@ export function ToggleRow({
   theme,
 }: ToggleRowProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
+
   return (
     <RowShell label={label} isActive={isActive} onPress={onPress} theme={theme}>
       <text fg={value ? tokens.green : tokens.accent}>{value ? "on" : "off"}</text>
@@ -83,6 +85,7 @@ export function CycleRow({
   theme,
 }: CycleRowProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
+
   return (
     <RowShell label={label} isActive={isActive} onPress={onPress} theme={theme}>
       <text fg={tokens.accent}>{value}</text>
@@ -100,6 +103,7 @@ export interface TextRowProps {
 
 export function TextRow({ label, value, isActive, onPress, theme }: TextRowProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
+
   return (
     <RowShell label={label} isActive={isActive} onPress={onPress} theme={theme}>
       <text fg={tokens.accent}>{value}</text>

package/src/components/Toast.tsx

@@ -14,6 +14,7 @@ export function Toast({ title, body, theme }: ToastProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const { width: terminalWidth } = useTerminalDimensions();
   const width = Math.min(terminalWidth - 6, Math.max(28, body.length + 4));
+
   return (
     <Dialog
       isOpen

package/src/components/agent-launcher.test.tsx

@@ -43,6 +43,7 @@ describe("AgentLauncher", () => {
     // Assert - all three launcher names present, in launch order
     const names = HARNESS_LAUNCHERS.map((harness) => harness.name);
     const positions = names.map((name) => frame.indexOf(name));
+
     expect(positions.every((position) => position >= 0)).toBe(true);
     expect(positions).toEqual(positions.toSorted((left, right) => left - right));
   });

package/src/components/agent-launcher.tsx

@@ -81,6 +81,7 @@ export function AgentLauncher({
 
   const launch = (harness: HarnessLauncher): void => {
     const seed = seedContext ? planHandoffBriefing(session.id) : undefined;
+
     if (embeddedTerminalAvailable()) setRunning({ harness, seed });
     else onLaunchHarness(harness.command, seed);
   };
@@ -94,6 +95,7 @@ export function AgentLauncher({
   useEffect(() => {
     if (!running) return onAgentTerminal?.(null);
     onAgentTerminal?.({ write: (data) => paneRef.current?.write(data), detach });
+
     return () => onAgentTerminal?.(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [running]);

package/src/components/diff-sheet-layout.test.ts

@@ -63,6 +63,7 @@ describe("segmentRows", () => {
     // Assert
     expect(segments.map((segment) => segment.kind)).toEqual(["header", "header", "chunk"]);
     const chunk = segments[2];
+
     expect(chunk?.kind).toBe("chunk");
     if (chunk?.kind === "chunk") expect(chunk.annotation?.id).toBe("a1");
   });

package/src/components/diff-sheet-layout.ts

@@ -35,14 +35,17 @@ export function annotatedRowsByIndex(
   annotations: Annotation[],
 ): Map<number, Annotation> {
   const byRow = new Map<number, Annotation>();
+
   for (const annotation of annotations) {
     const rowIndex = rows.findIndex(
       (row) =>
         row.text === annotation.anchor.quote &&
         (row.kind === "ctx" || row.kind === "add" || row.kind === "del"),
     );
+
     if (rowIndex !== -1) byRow.set(rowIndex, annotation);
   }
+
   return byRow;
 }
 
@@ -66,6 +69,7 @@ export function segmentRows(
 
   for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
     const row = rows[rowIndex]!;
+
     if (row.kind === "file" || row.kind === "hunk") {
       closeChunk(null);
       segments.push({ kind: "header", rowIndex, row });
@@ -76,6 +80,7 @@ export function segmentRows(
     chunk.push(row);
 
     const annotation = annotatedByRow.get(rowIndex);
+
     if (annotation) {
       closeChunk(annotation);
       chunkStart = rowIndex + 1;
@@ -85,6 +90,7 @@ export function segmentRows(
     }
   }
   closeChunk(null);
+
   return segments;
 }
 
@@ -93,6 +99,7 @@ export function segmentRows(
 export function rowContentOffsets(segments: DiffSegment[]): number[] {
   const offsets: number[] = [];
   let contentY = 0;
+
   for (const segment of segments) {
     if (segment.kind === "header") {
       offsets[segment.rowIndex] = contentY;
@@ -104,6 +111,7 @@ export function rowContentOffsets(segments: DiffSegment[]): number[] {
       contentY += segment.rows.length + (segment.annotation ? 1 : 0);
     }
   }
+
   return offsets;
 }
 
@@ -125,27 +133,33 @@ export function coloredRowSpans(
   const isModifiedLine = intralineRuns !== undefined;
 
   const spans: ColoredSpan[] = [];
+
   for (let column = 0; column < text.length; column++) {
     const color = changed[column]
       ? baseColor
       : (syntaxColorByColumn[column] ?? (isModifiedLine ? tokens.textDim : baseColor));
     const previous = spans[spans.length - 1];
+
     if (previous && previous.foreground === color) previous.text += text[column];
     else spans.push({ text: text[column]!, foreground: color });
   }
+
   return spans;
 }
 
 /** Which columns are the intra-line change on a modified line. */
 function changedColumns(length: number, intralineRuns: IntralineRun[] | undefined): boolean[] {
   const changed = Array.from({ length }, () => false);
+
   if (!intralineRuns) return changed;
   let offset = 0;
+
   for (const run of intralineRuns) {
     if (run.changed)
       for (let index = 0; index < run.text.length; index++) changed[offset + index] = true;
     offset += run.text.length;
   }
+
   return changed;
 }
 
@@ -156,12 +170,15 @@ function syntaxColorColumns(
   tokens: Theme,
 ): Array<string | undefined> {
   const colors: Array<string | undefined> = Array.from({ length }, () => undefined);
+
   for (const span of syntaxSpans ?? []) {
     const color = colorForSyntaxGroup(span.group, tokens);
+
     if (!color) continue;
     for (let column = span.start; column < span.end && column < length; column++) {
       colors[column] = color;
     }
   }
+
   return colors;
 }

package/src/components/plan-sheet-run-style.ts

@@ -29,6 +29,7 @@ function headingForeground(block: DisplayBlock, tokens: Theme): string | undefin
   if (block.kind === "h1") return tokens.text;
   if (block.kind === "h2") return tokens.textMuted;
   if (block.kind === "h3") return tokens.textDim;
+
   return undefined;
 }
 
@@ -39,6 +40,7 @@ function blockBaseStyle(block: DisplayBlock, tokens: Theme): BlockBaseStyle {
   // block-level base: headings bold, quotes muted italic; inline roles compose on top
   const baseFg = headingFg ?? (isQuote ? tokens.textMuted : tokens.text);
   const baseAttributes = (isHeading ? HEADING_ATTRIBUTES : 0) | (isQuote ? QUOTE_ATTRIBUTES : 0);
+
   return { baseFg, baseAttributes };
 }
 
@@ -49,6 +51,7 @@ function inlineRoleStyle(
 ): { fg?: string; bg?: string; attributes?: number } {
   const { baseFg, baseAttributes } = base;
   const withBase = (roleAttributes: number): number => baseAttributes | roleAttributes;
+
   switch (run.role) {
     case "ins":
       return { fg: tokens.insertedForeground, attributes: baseAttributes || undefined };
@@ -82,5 +85,6 @@ export function runStyle(
 ): { 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 };
+
   return inlineRoleStyle(run, blockBaseStyle(block, tokens), tokens);
 }

package/src/components/primitives/Button.tsx

@@ -36,6 +36,7 @@ export function Button({
       : variant === "accent-text"
         ? tokens.accent
         : tokens.textDim;
+
   return (
     <box
       style={{ backgroundColor, marginRight }}

package/src/components/primitives/Card.tsx

@@ -38,6 +38,7 @@ export function Card({
   children,
 }: CardProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
+
   return (
     <box
       style={{

package/src/components/primitives/Dialog.tsx

@@ -31,7 +31,9 @@ export function Dialog({
   children,
 }: DialogProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
+
   if (!isOpen) return null;
+
   return (
     <box
       style={{

package/src/components/primitives/StatusBar.tsx

@@ -14,6 +14,7 @@ export interface StatusBarProps {
 
 export function StatusBar({ theme, children }: StatusBarProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
+
   return (
     <box style={{ height: 1, backgroundColor: tokens.panel, paddingLeft: 1 }}>
       <text fg={tokens.textDim}>{children}</text>

package/src/components/primitives/Tabs.tsx

@@ -59,14 +59,17 @@ export interface TabListProps {
 
 export function TabList({ children }: TabListProps): React.ReactNode {
   const tabs = useContext(TabsContext);
+
   if (!tabs) throw new Error("TabList must render inside Tabs");
   const tokens = useComponentTheme(tabs.theme);
   const items: { id: string; label: string }[] = [];
+
   React.Children.forEach(children, (child) => {
     if (React.isValidElement<TabProps>(child) && typeof child.props.id === "string") {
       items.push({ id: child.props.id, label: child.props.children });
     }
   });
+
   return (
     <box
       style={{
@@ -81,6 +84,7 @@ export function TabList({ children }: TabListProps): React.ReactNode {
     >
       {items.map((item) => {
         const selected = item.id === tabs.selectedKey;
+
         return (
           <box
             key={item.id}

package/src/components/quick-actions-editor.tsx

@@ -40,6 +40,7 @@ export function QuickActionsEditor({
   theme,
 }: QuickActionsEditorProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
+
   return (
     <box style={{ flexDirection: "column", flexGrow: 1 }}>
       <box style={{ flexDirection: "row" }}>
@@ -89,6 +90,7 @@ function ActionRow({
 }): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const inputRef = useRef<TextareaRenderable | null>(null);
+
   return (
     <box style={{ flexDirection: "column" }}>
       <box

package/src/components/stories-app.tsx

@@ -111,6 +111,7 @@ function StoriesApp({
 if (import.meta.main) {
   const stories = await loadStories();
   const renderer = await createCliRenderer();
+
   createRoot(renderer).render(
     <StoriesApp
       stories={stories}

package/src/components/stories.test.tsx

@@ -17,6 +17,7 @@ const stories = await loadStories();
 function hexOf(color: RGBA | null | undefined): string | undefined {
   if (!color) return undefined;
   const [red, green, blue] = color.toInts();
+
   return "#" + [red, green, blue].map((part) => part!.toString(16).padStart(2, "0")).join("");
 }
 
@@ -36,6 +37,7 @@ describe("stories catalog", () => {
 
       // Act
       const setup = await testRender(story.render(), size);
+
       allowEventLoopUpdates();
       await setup.waitForVisualIdle();
       const frame = setup.captureCharFrame();
@@ -44,10 +46,12 @@ describe("stories catalog", () => {
       expect(frame).toMatchSnapshot(`${moduleTitle}/${storyName}`);
       if (story.expectedColors?.length) {
         const seenColors = new Set<string>();
+
         for (const line of setup.captureSpans().lines) {
           for (const span of line.spans) {
             const foregroundHex = hexOf(span.fg);
             const backgroundHex = hexOf(span.bg);
+
             if (foregroundHex) seenColors.add(foregroundHex);
             if (backgroundHex) seenColors.add(backgroundHex);
           }

package/src/components/story.ts

@@ -41,15 +41,18 @@ export async function loadStories(): Promise<LoadedStory[]> {
   const glob = new Bun.Glob("**/*.stories.tsx");
   const files = [...glob.scanSync({ cwd: import.meta.dir })].sort();
   const loaded: LoadedStory[] = [];
+
   for (const file of files) {
     const moduleExports = (await import(`${import.meta.dir}/${file}`)) as Record<string, unknown>;
     const meta = moduleExports["meta"] as StoryMeta | undefined;
     const moduleTitle = meta?.title ?? file.replace(/\.stories\.tsx$/, "");
+
     for (const [exportName, exported] of Object.entries(moduleExports)) {
       if (exportName === "meta" || !isStory(exported)) continue;
       loaded.push({ moduleTitle, storyName: exportName, story: exported });
     }
   }
+
   return loaded;
 }
 
@@ -58,12 +61,15 @@ export function componentFilesMissingStories(): string[] {
   const componentGlob = new Bun.Glob("**/*.tsx");
   const files = [...componentGlob.scanSync({ cwd: import.meta.dir })];
   const missing: string[] = [];
+
   for (const file of files) {
     if (file.endsWith(".stories.tsx") || file.endsWith(".test.tsx")) continue;
     if (file.endsWith(".prototype.tsx")) continue;
     if (file === "stories-app.tsx") continue;
     const storiesSibling = file.replace(/\.tsx$/, ".stories.tsx");
+
     if (!files.includes(storiesSibling)) missing.push(file);
   }
+
   return missing;
 }

package/src/components/syntax-highlight.ts

@@ -17,6 +17,7 @@ import type { Theme } from "../theme";
 /** Markdown fence info -> tree-sitter filetype, with the aliases we accept. */
 export function filetypeFor(language?: string): string | undefined {
   const info = (language ?? "").toLowerCase();
+
   if (!info) return undefined;
   const aliases: Record<string, string> = {
     ts: "typescript",
@@ -29,6 +30,7 @@ export function filetypeFor(language?: string): string | undefined {
     zsh: "bash",
     yml: "yaml",
   };
+
   return infoStringToFiletype(aliases[info] ?? info) ?? aliases[info] ?? info;
 }
 
@@ -36,9 +38,12 @@ export function filetypeFor(language?: string): string | undefined {
 export function filetypeForPath(path: string): string | undefined {
   const basename = path.split("/").pop() ?? path;
   const byBasename = basenameToFiletype.get(basename);
+
   if (byBasename) return byBasename;
   const dotIndex = basename.lastIndexOf(".");
+
   if (dotIndex <= 0) return undefined;
+
   return extensionToFiletype.get(basename.slice(dotIndex + 1).toLowerCase());
 }
 
@@ -75,9 +80,12 @@ const syntaxStyleCache = new WeakMap<Theme, SyntaxStyle>();
 
 export function syntaxStyleFor(theme: Theme): SyntaxStyle {
   const cached = syntaxStyleCache.get(theme);
+
   if (cached) return cached;
   const style = SyntaxStyle.fromStyles(syntaxGroupStyles(theme));
+
   syntaxStyleCache.set(theme, style);
+
   return style;
 }
 
@@ -85,8 +93,10 @@ export function syntaxStyleFor(theme: Theme): SyntaxStyle {
 export function colorForSyntaxGroup(group: string, theme: Theme): string | undefined {
   const styles = syntaxGroupStyles(theme);
   const direct = styles[group];
+
   if (direct) return direct.fg;
   // capture names are dotted (e.g. "keyword.control"); match the broadest prefix
   const base = group.split(".")[0]!;
+
   return styles[base]?.fg;
 }