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

package/src/components/AnnotationCard.tsx

@@ -88,9 +88,11 @@ export function composeRowCount(
 ): number {
   const usableWidth = contentWidth > 0 ? contentWidth : Number.MAX_SAFE_INTEGER;
   let visualRowCount = 0;
+
   for (const line of text.split("\n")) {
     visualRowCount += Math.max(1, Math.ceil(line.length / usableWidth));
   }
+
   return Math.min(cap, Math.max(1, visualRowCount));
 }
 
@@ -110,13 +112,16 @@ function DraftEditor({
   const editorRef = useRef<TextareaRenderable | null>(null);
   // re-edit opens with the caret after the existing body, like a text field
   const initialTextLength = useRef(draft.text.length);
+
   useEffect(() => {
     const editor = editorRef.current;
+
     if (!editor) return;
     editor.cursorOffset = initialTextLength.current;
     // the box is laid out now, so its width is known: size to the wrapped body
     onRowsChange(composeRowCount(editor.plainText, editor.width));
   }, [onRowsChange]);
+
   return (
     <>
       <textarea
@@ -128,6 +133,7 @@ function DraftEditor({
         {...(draft.onSubmit ? { onSubmit: draft.onSubmit } : {})}
         onContentChange={() => {
           const editor = editorRef.current;
+
           if (!editor) return;
           draft.onInput(editor.plainText);
           onRowsChange(composeRowCount(editor.plainText, editor.width));
@@ -173,8 +179,10 @@ export function AnnotationCard({
     // until the mounted textarea reports its measured width below.
     composeRowCount(activeDraft?.text ?? "", 0),
   );
+
   if (draft) {
     const verb = "comment on";
+
     return (
       <Card
         title={` ${verb} "${truncateToSingleLine(quote, 40)}" `}
@@ -200,6 +208,7 @@ export function AnnotationCard({
   const borderInset = 4;
   // a bordered box must declare a height or it collapses: quote + body, or the editor
   const contentRows = card.editing ? editorRowCount + 2 : 2;
+
   return (
     <box
       id={id}

package/src/components/Breadcrumb.tsx

@@ -30,6 +30,7 @@ export function Breadcrumb({ items, theme }: BreadcrumbProps): React.ReactNode {
         : tone === "text"
           ? tokens.text
           : tokens.textDim;
+
   return (
     <box style={{ height: 1, backgroundColor: tokens.panel, paddingLeft: 1, flexDirection: "row" }}>
       <text fg={tokens.text}>

package/src/components/CodeBlock.tsx

@@ -43,6 +43,7 @@ export function CodeBlock({
 }: CodeBlockProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const tagColor = changeTag === "new" ? tokens.green : tokens.accent;
+
   return (
     <box id={id} style={{ flexDirection: "column", marginTop }}>
       <text>

package/src/components/CompletionOverlay.tsx

@@ -28,6 +28,7 @@ export function CompletionOverlay({
 }: CompletionOverlayProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const approved = verdict === "approve";
+
   return (
     <box
       style={{

package/src/components/ConfirmCard.tsx

@@ -64,6 +64,7 @@ function VerdictSelector({
   theme?: Theme;
 }): React.ReactNode {
   const tokens = useComponentTheme(theme);
+
   return (
     <box style={{ flexDirection: "row", height: 1 }}>
       {VERDICTS.map((candidate) => (
@@ -94,6 +95,7 @@ export function ConfirmCard({
   theme,
 }: ConfirmCardProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
+
   return (
     <Card
       title=" submit review "

package/src/components/ConfirmDialog.tsx

@@ -36,7 +36,9 @@ export function ConfirmDialog({
 }: ConfirmDialogProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const { width: terminalWidth } = useTerminalDimensions();
+
   if (!isOpen) return null;
+
   return (
     <Dialog isOpen title={title} width={Math.min(54, terminalWidth - 6)} height={7} theme={theme}>
       <box

package/src/components/DiffSheet.scroll.test.tsx

@@ -16,13 +16,16 @@ function findById(node: Renderable, id: string): Renderable | undefined {
   if (node.id === id) return node;
   for (const child of node.getChildren()) {
     const found = findById(child, id);
+
     if (found) return found;
   }
+
   return undefined;
 }
 
 function hex(color: { toInts(): [number, number, number, number] }): string {
   const [red, green, blue] = color.toInts();
+
   return "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join("");
 }
 
@@ -32,6 +35,7 @@ function tallPatch(count: number): string {
     { length: count },
     (_, index) => `+line ${String(index).padStart(2, "0")}`,
   );
+
   return [
     "diff --git a/f.ts b/f.ts",
     "--- a/f.ts",
@@ -51,9 +55,11 @@ function ScrollHarness({
   annotations: Annotation[];
 }): React.ReactNode {
   const [cursor, setCursor] = useState(0);
+
   useKeyboard((key) => {
     if (key.name === "j") setCursor((current) => Math.min(rows.length - 1, current + 1));
   });
+
   return <DiffSheet rows={rows} cursor={cursor} annotations={annotations} />;
 }
 
@@ -74,21 +80,25 @@ test("scrolling down past wrapped annotation cards keeps the cursor pinned and t
     width: 60,
     height: 12,
   });
+
   await setup.waitForVisualIdle();
   const scrollbox = findById(setup.renderer.root, "diff-scroll") as ScrollBoxRenderable;
 
   // the cursor row is the one painted with the cursor background
   const cursorScreenRow = (): number => {
     const lines = setup.captureSpans().lines;
+
     for (let index = 0; index < lines.length; index++) {
       if (lines[index]!.spans.some((span) => hex(span.bg) === DARK.cursorBackground)) return index;
     }
+
     return -1;
   };
 
   // Act - walk the cursor down through the whole diff, sampling the scroll each step
   const scrollTops: number[] = [];
   const screenRows: number[] = [];
+
   for (let step = 0; step < rows.length; step++) {
     scrollTops.push(scrollbox.scrollTop);
     screenRows.push(cursorScreenRow());
@@ -111,10 +121,12 @@ test("scrolling down past wrapped annotation cards keeps the cursor pinned and t
   const steadyRows = screenRows.filter(
     (_, step) => scrollTops[step]! > 0 && scrollTops[step]! < maxScroll,
   );
+
   expect(steadyRows.length).toBeGreaterThan(0);
   expect(new Set(steadyRows).size).toBe(1);
   const pinnedRow = steadyRows[0]!;
   const viewportBottom = scrollbox.height;
+
   // the cursor sits a couple of rows inside the bottom edge, per the follow rule
   expect(viewportBottom - pinnedRow).toBeGreaterThanOrEqual(2);
   expect(viewportBottom - pinnedRow).toBeLessThanOrEqual(3);

package/src/components/DiffSheet.syntax.test.tsx

@@ -19,6 +19,7 @@ const PATCH = `diff --git a/src/x.ts b/src/x.ts
 
 function hex(color: RGBA): string {
   const [red, green, blue] = color.toInts();
+
   return "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join("");
 }
 
@@ -35,6 +36,7 @@ test("renders tree-sitter colors, with the changed word in the diff color on top
   // Act
   // syntax highlighting resolves off the render path; pump until a keyword paints
   let keywordAccent = false;
+
   for (let attempt = 0; attempt < 60 && !keywordAccent; attempt++) {
     await setup.renderOnce();
     await new Promise((resolve) => setTimeout(resolve, 20));
@@ -49,6 +51,7 @@ test("renders tree-sitter colors, with the changed word in the diff color on top
   expect(keywordAccent).toBe(true);
   // the intra-line changed number keeps the diff color over its syntax color
   const changedColors = new Set<string>();
+
   for (const line of setup.captureSpans().lines) {
     for (const span of line.spans) {
       if (span.text.includes("250")) changedColors.add(hex(span.fg));

package/src/components/DiffSheet.tsx

@@ -78,6 +78,7 @@ function rowStyle(
     : isAnnotatedRow
       ? tokens.markCommentBackground
       : undefined;
+
   return { sign, baseColor, background };
 }
 
@@ -104,27 +105,33 @@ function DiffChunk({
 
   const lineNumbers = useMemo(() => {
     const numbers = new Map<number, number>();
+
     segment.rows.forEach((row, lineIndex) => {
       const gutterNumber = row.kind === "del" ? row.oldLine : row.newLine;
+
       if (gutterNumber !== undefined) numbers.set(lineIndex, gutterNumber);
     });
+
     return numbers;
   }, [segment]);
 
   const lineSigns = useMemo(() => {
     const signs = new Map<number, LineSign>();
+
     if (cursorInChunk >= 0 && cursorInChunk < segment.rows.length) {
       signs.set(cursorInChunk, { before: "▎", beforeColor: tokens.accent });
     }
     if (segment.annotation) {
       signs.set(segment.rows.length - 1, { after: "◆", afterColor: tokens.accent });
     }
+
     return signs;
   }, [segment, cursorInChunk, tokens]);
 
   const lineColors = useMemo(() => {
     // the renderable's config parser requires the gutter key to be present
     const colors = new Map<number, { gutter: string | undefined; content: string }>();
+
     if (segment.annotation) {
       colors.set(segment.rows.length - 1, {
         gutter: undefined,
@@ -137,12 +144,14 @@ function DiffChunk({
         content: tokens.cursorBackground,
       });
     }
+
     return colors;
   }, [segment, cursorInChunk, tokens]);
 
   // the gutter renderable has no prop setters for these maps, so they land via an effect
   useEffect(() => {
     const gutter = gutterRef.current;
+
     if (!gutter) return;
     gutter.setLineNumbers(lineNumbers);
     gutter.setLineSigns(lineSigns);
@@ -197,6 +206,7 @@ function DiffChunk({
               baseColor,
               tokens,
             );
+
             return (
               <React.Fragment key={lineIndex}>
                 <span fg={baseColor} bg={background}>
@@ -236,15 +246,19 @@ function useSyntaxHighlights(rows: DiffRow[]): Map<number, SyntaxSpan[]> {
     rows,
     byRow: EMPTY_SYNTAX,
   });
+
   useEffect(() => {
     let active = true;
+
     void highlightDiffRows(rows).then((byRow) => {
       if (active) setHighlighted({ rows, byRow });
     });
+
     return () => {
       active = false;
     };
   }, [rows]);
+
   return highlighted.rows === rows ? highlighted.byRow : EMPTY_SYNTAX;
 }
 
@@ -276,8 +290,10 @@ export function DiffSheet({
   useEffect(() => {
     const scrollbox = scrollRef.current;
     const cursorOffset = rowOffsets[cursor];
+
     if (!scrollbox || cursorOffset === undefined) return;
     const viewportHeight = Math.max(1, scrollbox.height);
+
     if (cursorOffset < scrollbox.scrollTop + 2) {
       scrollbox.scrollTo({ x: 0, y: Math.max(0, cursorOffset - 2) });
     } else if (cursorOffset > scrollbox.scrollTop + viewportHeight - 3) {
@@ -301,6 +317,7 @@ export function DiffSheet({
         {segments.map((segment, segmentIndex) => {
           if (segment.kind === "header") {
             const isCursor = segment.rowIndex === cursor;
+
             if (segment.row.kind === "file") {
               return (
                 <text
@@ -313,6 +330,7 @@ export function DiffSheet({
                 </text>
               );
             }
+
             return (
               <text
                 key={segmentIndex}
@@ -327,6 +345,7 @@ export function DiffSheet({
           }
 
           const lastRowIndex = segment.firstRowIndex + segment.rows.length - 1;
+
           return (
             <React.Fragment key={segmentIndex}>
               <DiffChunk

package/src/components/InboxList.tsx

@@ -27,6 +27,7 @@ export function InboxList({
   theme,
 }: InboxListProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
+
   return (
     <box style={{ flexGrow: 1, flexDirection: "column", paddingLeft: 1, paddingTop: 1 }}>
       {inbox.length === 0 ? (
@@ -35,6 +36,7 @@ export function InboxList({
         inbox.map((session, index) => {
           const selected = index === cursor;
           const title = session.artifact.meta.title ?? session.id;
+
           return (
             <box
               key={session.id}

package/src/components/KeybindsDialog.tsx

@@ -17,6 +17,7 @@ export function KeybindsDialog({ sections, theme }: KeybindsDialogProps): React.
     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);
+
   return (
     <Dialog
       isOpen

package/src/components/MarkerPopover.tsx

@@ -56,6 +56,7 @@ export function MarkerPopover({
     paddingRight: 1,
   };
   const open = view === "actions";
+
   return (
     <box
       style={{ flexDirection: "column", alignItems: "flex-start" }}

package/src/components/MenuBar.tsx

@@ -29,6 +29,7 @@ export function MenuBar({
   const tokens = useComponentTheme(theme);
   const { height: terminalHeight } = useTerminalDimensions();
   const dropupHeight = DROPUP_OPTION_ROWS + 2;
+
   return (
     <>
       {open ? (

package/src/components/PlanSheet.tsx

@@ -100,10 +100,12 @@ function positionOfRenderedOffset(
 ): { x: number; y: number } {
   const info = renderable.lineInfo;
   let lineIndex = 0;
+
   for (let index = 0; index < info.lineStartCols.length; index++) {
     if (info.lineStartCols[index]! <= renderedOffset) lineIndex = index;
     else break;
   }
+
   return {
     x: renderable.x + renderedOffset - (info.lineStartCols[lineIndex] ?? 0),
     y: renderable.y + lineIndex,
@@ -135,37 +137,47 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
       if (!renderer?.hasSelection) return null;
       const readBlock = (displayIndex: number): PlanSelection | null => {
         const blockRef = blockRefs.current.get(displayIndex);
+
         if (!blockRef) return null;
         const selection = blockRef.renderable.getSelection();
+
         if (!selection || selection.end <= selection.start) return null;
         const range = workRangeForRendered(blockRef.runs, selection.start, selection.end);
+
         return range ? { displayIndex, ...range } : null;
       };
+
       // the block the mouse released on wins, so a fresh drag re-anchors the span
       // (one marker at a time) instead of sticking to the topmost prior selection
       if (preferredIndex !== undefined) {
         const preferred = readBlock(preferredIndex);
+
         if (preferred) return preferred;
       }
       for (const displayIndex of [...blockRefs.current.keys()].sort(
         (left, right) => left - right,
       )) {
         const found = readBlock(displayIndex);
+
         if (found) return found;
       }
+
       return null;
     },
     driveSpanSelection: (span: SpanState): void => {
       if (!renderer) return;
       const blockRef = blockRefs.current.get(span.displayIndex);
+
       if (!blockRef) return;
       // a span over an emphasized word starts/ends on concealed markers with
       // no rendered cell; snap to the visible characters inside them
       const renderedStart = renderedOffsetAtOrAfter(blockRef.runs, span.start);
       const renderedEnd = renderedOffsetAtOrBefore(blockRef.runs, span.end - 1);
+
       if (renderedStart === null || renderedEnd === null || renderedEnd < renderedStart) return;
       const startPosition = positionOfRenderedOffset(blockRef.renderable, renderedStart);
       const endPosition = positionOfRenderedOffset(blockRef.renderable, renderedEnd);
+
       renderer.startSelection(blockRef.renderable, startPosition.x, startPosition.y);
       renderer.updateSelection(blockRef.renderable, endPosition.x + 1, endPosition.y);
     },
@@ -192,16 +204,20 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
   // a terminal resize rewraps every block; re-run the anchor math against the
   // new geometry instead of leaving the card at its pre-resize cell
   const [resizeEpoch, setResizeEpoch] = useState(0);
+
   useEffect(() => {
     if (!renderer) return;
     const onResize = (): void => setResizeEpoch((epoch) => epoch + 1);
+
     renderer.on("resize", onResize);
+
     return () => void renderer.off("resize", onResize);
   }, [renderer]);
   useEffect(() => {
     if (!popover) return;
     const blockRef = blockRefs.current.get(popover.displayIndex);
     const scrollbox = scrollRef.current;
+
     if (!blockRef || !scrollbox) return;
     const renderedStart =
       activeSpan && activeSpan.displayIndex === popover.displayIndex
@@ -213,9 +229,11 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
     const anchorTop = startPosition.y - content.y;
     // clamp so the toolbar card never runs past the content's right edge
     const maxLeft = Math.max(0, content.width - POPOVER_TOOLBAR_COLUMNS);
+
     setPopoverLeft(Math.min(anchorLeft, maxLeft));
     // only the toolbar (3 rows) + gap must fit above; the dropdown flows down
     const lineViewportRow = startPosition.y - scrollbox.y;
+
     setPopoverTop(anchorTop + (lineViewportRow < POPOVER_ROWS_ABOVE ? 1 : -POPOVER_ROWS_ABOVE));
   }, [popover, activeSpan, display, cursor, resizeEpoch]);
 
@@ -227,6 +245,7 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
     if (renderable) blockRefs.current.set(displayIndex, { renderable, runs });
     else blockRefs.current.delete(displayIndex);
   };
+
   // stale refs must not survive a shrinking display list
   useEffect(() => {
     for (const displayIndex of blockRefs.current.keys()) {
@@ -235,10 +254,12 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
   }, [display]);
 
   const children: React.ReactNode[] = [];
+
   for (let displayIndex = 0; displayIndex < display.length; displayIndex++) {
     const block = display[displayIndex]!;
     const isCursor = displayIndex === cursor;
     const gap = topGap(display[displayIndex - 1], block);
+
     if (block.kind === "code") {
       children.push(
         <CodeBlock
@@ -256,6 +277,7 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
       );
     } else {
       const blockMarks = [...(marks.get(displayIndex) ?? [])];
+
       if (activeSpan && activeSpan.displayIndex === displayIndex) {
         blockMarks.push({ start: activeSpan.start, end: activeSpan.end, role: "kspan" });
       }
@@ -265,6 +287,7 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
       const mappedRuns: StyleRun[] = showsChangeTag(block)
         ? [...runs, { text: ` [${tagLabel(block)}]`, role: "plain", start: null }]
         : runs;
+
       children.push(
         <box
           key={displayIndex}
@@ -288,6 +311,7 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
           >
             {runs.map((run, runIndex) => {
               const url = run.role === "link" ? safeLinkHref(run.href) : undefined;
+
               return (
                 <span
                   key={runIndex}
@@ -372,6 +396,7 @@ function topGap(previous: DisplayBlock | undefined, current: DisplayBlock): numb
   const tightPair =
     (current.kind === "li" && previous.kind === "li") ||
     (current.kind === "oli" && previous.kind === "oli");
+
   return tightPair ? 0 : 1;
 }
 
@@ -379,6 +404,7 @@ function marker(block: DisplayBlock): string {
   if (block.kind === "li") return "- ";
   if (block.kind === "oli") return `${block.orderedItemNumber ?? 1}. `;
   if (block.kind === "quote") return "▏ ";
+
   return "";
 }
 

package/src/components/PromptDialog.tsx

@@ -37,12 +37,14 @@ export function PromptDialog({
   const tokens = useComponentTheme(theme);
   const { width: terminalWidth } = useTerminalDimensions();
   const inputRef = useRef<TextareaRenderable | null>(null);
+
   useEffect(() => {
     // open with the caret after the seeded value, like a text field
     if (inputRef.current) inputRef.current.cursorOffset = value.length;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   if (!isOpen) return null;
+
   return (
     <Dialog isOpen title={title} width={Math.min(54, terminalWidth - 6)} height={7} theme={theme}>
       <box