@cueloop/client 0.1.0-alpha.77 → 0.1.0-alpha.78

package/src/components/ConfirmCard.tsx

@@ -5,13 +5,21 @@
  * derives from the content rows through Card, so layout and render never drift.
  */
 
-import React from "react";
+import React, { useContext } from "react";
+import { useTerminalDimensions } from "@opentui/react";
 import type { VerdictKind } from "@cueloop/schema";
 import type { Theme } from "../theme";
+import type { QuickAction } from "../config";
+import { SlashSkillsContext } from "../skills";
+import { activeSlashToken, mergeSlashItems, slashFilter, slashItemsFrom } from "../slash-palette";
 import { useComponentTheme } from "./theme-context";
 import { Card } from "./primitives/Card";
-import { Button } from "./primitives/Button";
-import { Toolbar } from "./primitives/Toolbar";
+import { composeRowCount } from "./AnnotationCards";
+import { SlashComposer } from "./SlashComposer";
+import { DialogActions } from "./primitives/DialogActions";
+
+const SUBMIT_CARD_MAX_WIDTH = 48;
+const PALETTE_WINDOW = 5;
 
 export const VERDICTS: VerdictKind[] = ["comment", "approve", "request_changes"];
 
@@ -34,6 +42,7 @@ export interface ConfirmCardProps {
   onSelectVerdict: (verdict: VerdictKind) => void;
   onSubmit: () => void;
   onCancel: () => void;
+  quickActions: QuickAction[];
   theme?: Theme;
 }
 
@@ -66,7 +75,7 @@ function VerdictSelector({
   const tokens = useComponentTheme(theme);
 
   return (
-    <box style={{ flexDirection: "row", height: 1 }}>
+    <box style={{ flexDirection: "row", height: 1, width: "100%", justifyContent: "center" }}>
       {VERDICTS.map((candidate) => (
         <box
           key={candidate}
@@ -92,14 +101,33 @@ export function ConfirmCard({
   onSelectVerdict,
   onSubmit,
   onCancel,
+  quickActions,
   theme,
 }: ConfirmCardProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
+  const skills = useContext(SlashSkillsContext);
+  const { width: terminalWidth } = useTerminalDimensions();
+  const cardWidth = Math.max(24, Math.min(terminalWidth - 6, SUBMIT_CARD_MAX_WIDTH));
+
+  const composerRows = composeRowCount(summary, cardWidth - 4);
+  const token = activeSlashToken(summary, summary.length);
+  const paletteItems =
+    token !== null
+      ? slashFilter(mergeSlashItems(slashItemsFrom(quickActions), skills), token.slice(1))
+      : [];
+  const paletteRows =
+    paletteItems.length > 0
+      ? Math.min(PALETTE_WINDOW, paletteItems.length) +
+        (paletteItems.length > PALETTE_WINDOW ? 1 : 0)
+      : 0;
+  const contentRows =
+    CONFIRM_CONTENT_ROWS - 1 + composerRows + paletteRows + (viewedSummary !== undefined ? 2 : 0);
 
   return (
     <Card
-      contentRows={CONFIRM_CONTENT_ROWS + (viewedSummary !== undefined ? 2 : 0)}
-      borderColor={tokens.text}
+      contentRows={contentRows}
+      width={cardWidth}
+      borderColor={tokens.accent}
       backgroundColor={tokens.elevated}
       theme={theme}
     >
@@ -107,21 +135,20 @@ export function ConfirmCard({
       {viewedSummary !== undefined ? <box style={{ height: 1 }} /> : null}
       <VerdictSelector verdict={verdict} onSelectVerdict={onSelectVerdict} theme={theme} />
       <box style={{ height: 1 }} />
-      <input
-        focused
-        value={summary}
-        onInput={onInput}
+      <SlashComposer
+        seed={summary}
+        glyph=""
+        quickActions={quickActions}
+        tokens={tokens}
         placeholder="summary for the agent (optional)"
+        onSubmit={(text) => {
+          onInput(text);
+          onSubmit();
+        }}
+        onInput={onInput}
       />
       <box style={{ height: 1 }} />
-      <Toolbar>
-        <Button variant="solid" marginRight={2} onPress={onSubmit} theme={theme}>
-          {" send message "}
-        </Button>
-        <Button onPress={onCancel} theme={theme}>
-          {" Cancel "}
-        </Button>
-      </Toolbar>
+      <DialogActions confirmLabel="send" onConfirm={onSubmit} onCancel={onCancel} theme={theme} />
     </Card>
   );
 }

package/src/components/ConfirmDialog.tsx

@@ -10,8 +10,7 @@ import { useTerminalDimensions } from "@opentui/react";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
 import { Dialog } from "./primitives/Dialog";
-import { Button } from "./primitives/Button";
-import { Toolbar } from "./primitives/Toolbar";
+import { DialogActions } from "./primitives/DialogActions";
 
 export interface ConfirmDialogProps {
   isOpen: boolean;
@@ -28,8 +27,8 @@ export function ConfirmDialog({
   isOpen,
   title,
   message,
-  confirmLabel = "Delete",
-  cancelLabel = "Cancel",
+  confirmLabel = "delete",
+  cancelLabel = "cancel",
   onConfirm,
   onCancel,
   theme,
@@ -45,6 +44,7 @@ export function ConfirmDialog({
       title={title}
       width={Math.min(54, terminalWidth - 6)}
       height={7}
+      background={tokens.elevated}
       onDismiss={onCancel}
       theme={theme}
     >
@@ -59,14 +59,13 @@ export function ConfirmDialog({
       >
         <text fg={tokens.text}>{message}</text>
         <box style={{ flexGrow: 1 }} />
-        <Toolbar>
-          <Button variant="solid" onPress={onConfirm} theme={theme}>
-            {` ${confirmLabel} `}
-          </Button>
-          <Button onPress={onCancel} theme={theme}>
-            {` ${cancelLabel} esc `}
-          </Button>
-        </Toolbar>
+        <DialogActions
+          confirmLabel={confirmLabel}
+          cancelLabel={cancelLabel}
+          onConfirm={onConfirm}
+          onCancel={onCancel}
+          theme={theme}
+        />
       </box>
     </Dialog>
   );

package/src/components/DiffContentView.tsx

@@ -18,7 +18,7 @@ import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
 import { IconButton } from "./primitives/IconButton";
 import { NERD } from "./primitives/icons";
-import { intralineRunsByRow, type IntralineRun } from "../diff-intraline";
+import { createIntralineResolver, type IntralineRun } from "../diff-intraline";
 import { highlightDiffRows, type SyntaxSpan } from "../diff-syntax";
 import { splitDiffRows, type SplitLine, type SplitRow } from "../split-diff";
 import { UNDERLINE, type AnnotationPalette } from "../annotation-palette";
@@ -535,7 +535,7 @@ export function DiffContentView({
   const { palette } = surface;
   const numberWidth = useMemo(() => lineNumberWidth(rows), [rows]);
   const unifiedGutterColumns = numberWidth * 2 + UNIFIED_GUTTER_CHROME;
-  const intralineByRow = useMemo(() => intralineRunsByRow(rows), [rows]);
+  const intralineResolver = useMemo(() => createIntralineResolver(rows), [rows]);
   const syntaxByRow = useSyntaxHighlights(rows);
   const splitRows = useMemo(() => (split ? splitDiffRows(rows) : []), [split, rows]);
   const localStats = useMemo(() => fileChangeCounts(rows), [rows]);
@@ -595,13 +595,13 @@ export function DiffContentView({
     const fgByColumn = foregroundColumns(
       text,
       rowBaseColor(row, tokens),
-      intralineByRow.get(rowIndex),
+      intralineResolver.runsForRow(rowIndex),
       syntaxByRow.get(rowIndex),
       tokens,
     );
     const emphasisBgByColumn = emphasisBackgroundColumns(
       text,
-      intralineByRow.get(rowIndex),
+      intralineResolver.runsForRow(rowIndex),
       rowEmphasisBackground(row, tokens),
     );
     const rowBg = rowBackground(row, tokens);

package/src/components/FileContentsView.tsx

@@ -1,5 +1,5 @@
 // A Changes/Project file tab in contents mode: a workspace file rendered read-only with line
-// numbers, for surfaces with no review session to anchor notes to (the bare-launch welcome shell).
+// numbers, for surfaces with no thread to anchor notes to (the bare-launch welcome shell).
 // Loads on mount and whenever the path changes; a null read renders a centered "File deleted".
 // Syntax highlighting comes from the native code renderable (tree-sitter), the language
 // auto-detected from the path; unknown languages simply render unstyled.

package/src/components/ManageAccessDialog.tsx

@@ -11,6 +11,8 @@ import type { KeyBinding, TextareaRenderable } from "@opentui/core";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
 import { Dialog } from "./primitives/Dialog";
+import { Button } from "./primitives/Button";
+import { Toolbar } from "./primitives/Toolbar";
 
 // enter adds the handle rather than inserting a newline into the one-line field
 const ADD_KEY_BINDINGS: KeyBinding[] = [{ name: "return", action: "submit" }];
@@ -103,17 +105,17 @@ export function ManageAccessDialog({
             }}
           />
         </box>
-        <box style={{ flexDirection: "row" }}>
-          <box onMouseUp={addDraft} style={{ marginRight: 3 }}>
-            <text fg={tokens.accent}>add</text>
-          </box>
-          <box onMouseUp={onCreateLink} style={{ marginRight: 3 }}>
-            <text fg={tokens.accent}>create link</text>
-          </box>
-          <box onMouseUp={onClose}>
-            <text fg={tokens.textDim}>close</text>
-          </box>
-        </box>
+        <Toolbar>
+          <Button marginRight={2} onPress={addDraft} theme={theme}>
+            {" add "}
+          </Button>
+          <Button variant="solid" marginRight={2} onPress={onCreateLink} theme={theme}>
+            {" create link "}
+          </Button>
+          <Button onPress={onClose} theme={theme}>
+            {" close "}
+          </Button>
+        </Toolbar>
       </box>
     </Dialog>
   );

package/src/components/PromptDialog.test.tsx

@@ -47,12 +47,12 @@ test("clicking save fires onSave and clicking cancel fires onCancel", async () =
   );
   await settle(setup);
 
-  const save = locateText(setup, "enter save");
+  const save = locateText(setup, "save");
   await setup.mockMouse.click(save.column, save.row);
   expect(saved).toBe(1);
   expect(cancelled).toBe(0);
 
-  const cancel = locateText(setup, "esc cancel");
+  const cancel = locateText(setup, "cancel");
   await setup.mockMouse.click(cancel.column, cancel.row);
   expect(cancelled).toBe(1);
   expect(saved).toBe(1);

package/src/components/PromptDialog.tsx

@@ -11,6 +11,7 @@ import type { KeyBinding, TextareaRenderable } from "@opentui/core";
 import type { Theme } from "../theme";
 import { useComponentTheme } from "./theme-context";
 import { Dialog } from "./primitives/Dialog";
+import { DialogActions } from "./primitives/DialogActions";
 
 // ⏎ submits (suppresses the textarea's default newline); the grammar owns save.
 const PROMPT_KEY_BINDINGS: KeyBinding[] = [{ name: "return", action: "submit" }];
@@ -18,7 +19,7 @@ const PROMPT_KEY_BINDINGS: KeyBinding[] = [{ name: "return", action: "submit" }]
 export interface PromptDialogProps {
   isOpen: boolean;
   title?: string;
-  label: string;
+  label?: string;
   value: string;
   placeholder?: string;
   onInput: (text: string) => void;
@@ -69,7 +70,7 @@ export function PromptDialog({
           paddingTop: 1,
         }}
       >
-        <text fg={tokens.textDim}>{label}</text>
+        {label ? <text fg={tokens.textDim}>{label}</text> : null}
         <textarea
           ref={inputRef}
           focused
@@ -86,14 +87,12 @@ export function PromptDialog({
           }}
         />
         <box style={{ flexGrow: 1 }} />
-        <box style={{ flexDirection: "row" }}>
-          <box onMouseUp={onSave} style={{ marginRight: 3 }}>
-            <text fg={tokens.textDim}>enter save</text>
-          </box>
-          <box onMouseUp={onCancel}>
-            <text fg={tokens.textDim}>esc cancel</text>
-          </box>
-        </box>
+        <DialogActions
+          confirmLabel="save"
+          onConfirm={() => onSave?.()}
+          onCancel={() => onCancel?.()}
+          theme={theme}
+        />
       </box>
     </Dialog>
   );

package/src/components/ShareChoiceDialog.tsx

@@ -74,8 +74,6 @@ export function ShareChoiceDialog({
             </text>
           </box>
         ))}
-        <box style={{ flexGrow: 1 }} />
-        <text fg={tokens.textDim}>↑↓ choose · enter select · esc cancel</text>
       </box>
     </Dialog>
   );

package/src/components/SlashComposer.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { DARK } from "../theme";
+import { DEFAULT_QUICK_ACTIONS } from "../config";
+import type { Story, StoryMeta } from "./story";
+import { SlashComposer } from "./SlashComposer";
+
+export const meta: StoryMeta = { title: "Chrome/SlashComposer" };
+
+export const Empty: Story = {
+  render: () => (
+    <box style={{ width: 60, height: 8, paddingLeft: 1, backgroundColor: DARK.panel }}>
+      <SlashComposer
+        seed=""
+        glyph="●"
+        quickActions={DEFAULT_QUICK_ACTIONS}
+        tokens={DARK}
+        onSubmit={() => {}}
+      />
+    </box>
+  ),
+  size: { width: 60, height: 8 },
+};
+
+export const WithDraft: Story = {
+  render: () => (
+    <box style={{ width: 60, height: 8, paddingLeft: 1, backgroundColor: DARK.panel }}>
+      <SlashComposer
+        seed="looks good, ship it"
+        glyph="●"
+        quickActions={DEFAULT_QUICK_ACTIONS}
+        tokens={DARK}
+        onSubmit={() => {}}
+      />
+    </box>
+  ),
+  size: { width: 60, height: 8 },
+};

package/src/components/SlashComposer.tsx

@@ -0,0 +1,87 @@
+/** A composer with the "/" actions-and-skills palette, sharing the inline-comment edit experience. */
+
+import React, { useContext, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import type { Theme } from "../theme";
+import type { QuickAction } from "../config";
+import { SlashSkillsContext } from "../skills";
+import {
+  activeSlashToken,
+  insertSlashItem,
+  mergeSlashItems,
+  slashFilter,
+  slashItemsFrom,
+} from "../slash-palette";
+import { Composer, ComposerPalette } from "./AnnotationCards";
+
+export interface SlashComposerProps {
+  seed: string;
+  glyph: string;
+  quickActions: QuickAction[];
+  tokens: Theme;
+  onSubmit: (text: string) => void;
+  onInput?: (text: string) => void;
+  placeholder?: string;
+}
+
+export function SlashComposer({
+  seed,
+  glyph,
+  quickActions,
+  tokens,
+  onSubmit,
+  onInput,
+  placeholder,
+}: SlashComposerProps): React.ReactNode {
+  const skills = useContext(SlashSkillsContext);
+  const [mountSeed, setMountSeed] = useState(seed);
+  const [text, setText] = useState(seed);
+  const [caret, setCaret] = useState(seed.length);
+  const [slashIndex, setSlashIndex] = useState(0);
+
+  const paletteItems = mergeSlashItems(slashItemsFrom(quickActions), skills);
+  const token = activeSlashToken(text, caret);
+  const items = token !== null ? slashFilter(paletteItems, token.slice(1)) : [];
+  const slashActive = token !== null && items.length > 0;
+
+  useKeyboard((key) => {
+    if (!slashActive) return;
+    const selected = Math.min(slashIndex, items.length - 1);
+
+    if (key.name === "up") return setSlashIndex(Math.max(0, selected - 1));
+    if (key.name === "down") return setSlashIndex(Math.min(items.length - 1, selected + 1));
+    if (key.name === "tab" || (key.name === "return" && !key.meta && !key.ctrl && !key.super)) {
+      const inserted = insertSlashItem(text, caret, items[selected]!.name);
+
+      setMountSeed(inserted.text);
+      setText(inserted.text);
+      setCaret(inserted.caret);
+      onInput?.(inserted.text);
+    }
+  });
+
+  return (
+    <box style={{ flexDirection: "column" }}>
+      <Composer
+        key={mountSeed}
+        seed={mountSeed}
+        glyph={glyph}
+        tokens={tokens}
+        placeholder={placeholder}
+        onReady={() => {}}
+        onSave={onSubmit}
+        onInput={(next, nextCaret) => {
+          setText(next);
+          setCaret(nextCaret);
+          onInput?.(next);
+        }}
+      />
+      <ComposerPalette
+        slashActive={slashActive}
+        slashItems={items}
+        slashIndex={slashIndex}
+        tokens={tokens}
+      />
+    </box>
+  );
+}

package/src/components/ThreadTree.tsx

@@ -42,6 +42,9 @@ export interface ThreadTreeProps {
 
 const MENU_WIDTH = 12;
 
+/** Columns per nesting level in the sidebar cascade: section → project → thread. */
+const SIDEBAR_INDENT = 2;
+
 function ActionsMenu({
   pinned,
   onPin,
@@ -85,6 +88,7 @@ interface ThreadRowProps {
   title: string;
   selected: boolean;
   pinned: boolean;
+  depth: number;
   titleWidth: number;
   menuOpen: boolean;
   onToggleMenu: () => void;
@@ -97,7 +101,8 @@ interface ThreadRowProps {
 }
 
 function ThreadRow(props: ThreadRowProps): React.ReactNode {
-  const { title, selected, pinned, titleWidth, menuOpen, onToggleMenu, tokens, theme } = props;
+  const { title, selected, pinned, depth, titleWidth, menuOpen, onToggleMenu, tokens, theme } =
+    props;
   const [hovered, setHovered] = useState(false);
   const rowRef = useRef<BoxRenderable | null>(null);
   const { setOverlay, clearOverlay } = useRootOverlay();
@@ -157,8 +162,8 @@ function ThreadRow(props: ThreadRowProps): React.ReactNode {
           backgroundColor: selected ? tokens.elevated : hovered ? tokens.panel : undefined,
         }}
       >
-        <text wrapMode="none">
-          <span fg={tokens.textDim}>{pinned ? ` ${NERD.star} ` : "   "}</span>
+        <box style={{ width: depth * SIDEBAR_INDENT, flexShrink: 0 }} />
+        <text wrapMode="none" style={{ flexShrink: 1 }}>
           <span fg={selected ? tokens.accent : tokens.textMuted}>{clippedTitle}</span>
         </text>
         <box style={{ flexGrow: 1 }} />
@@ -212,8 +217,7 @@ export function ThreadTree({
 
           if (row.kind === "project") {
             return (
-              <text key={row.id}>
-                <span fg={tokens.blue}>{` ${NERD.folderOpen} `}</span>
+              <text key={row.id} wrapMode="none" style={{ marginLeft: SIDEBAR_INDENT }}>
                 <span fg={tokens.textMuted}>{row.label}</span>
               </text>
             );
@@ -230,7 +234,8 @@ export function ThreadTree({
                 focused || activeId === undefined ? row.selectionIndex === cursor : activeId === id
               }
               pinned={pinnedIds?.has(id) ?? false}
-              titleWidth={titleWidth}
+              depth={row.depth}
+              titleWidth={Math.max(8, titleWidth - (row.depth - 1) * SIDEBAR_INDENT)}
               menuOpen={menuControl.openMenuId === `thread:${id}`}
               onToggleMenu={() => menuControl.toggleMenu(`thread:${id}`)}
               onSelect={onSelect ? () => onSelect(id) : undefined}

package/src/components/ThreadView.selection.test.tsx

@@ -7,7 +7,7 @@
  * all asserted on the frame, not on internal state.
  */
 
-import { afterEach, beforeEach, describe, expect, mock, test, type Mock } from "bun:test";
+import { afterEach, beforeEach, describe, expect, mock, spyOn, test, type Mock } from "bun:test";
 import React from "react";
 import { testRender } from "@opentui/react/test-utils";
 import { TextAttributes } from "@opentui/core";
@@ -17,6 +17,7 @@ import { settle, typeText } from "../test-support";
 import { buildDisplay, marksByDisplay } from "../view-plan";
 import { makeAnchor, parseBlocks, type Annotation } from "@cueloop/schema";
 import type { TextSpan } from "../thread-selection";
+import * as markRuns from "../mark-runs";
 import { fixturePlanSession } from "./story-fixtures";
 import { ThreadView } from "./ThreadView";
 
@@ -810,3 +811,89 @@ describe("discussion identity", () => {
     expect(annotate).not.toHaveBeenCalled();
   });
 });
+
+describe("a new comment sorts into place while typing", () => {
+  const blocks = parseBlocks(PLAN);
+  const anchorOn = (word: string): Annotation["anchor"] =>
+    makeAnchor(blocks, 1, PARAGRAPH.indexOf(word), PARAGRAPH.indexOf(word) + word.length);
+  const early: Annotation = {
+    id: "early",
+    kind: "comment",
+    anchor: anchorOn("persists"),
+    body: "alpha-note",
+    createdAt: "2026-09-01T10:00:00Z",
+  };
+  const late: Annotation = {
+    id: "late",
+    kind: "comment",
+    anchor: anchorOn("atomically"),
+    body: "omega-note",
+    createdAt: "2026-09-01T10:01:00Z",
+  };
+
+  test("a draft anchored between two comments renders between them, not appended to the stack", async () => {
+    // Arrange - two comments on the same line, one earlier and one later than the draft's word
+    setup.renderer.destroy();
+    await mount([early, late]);
+
+    // Act - mark a word between them and start typing a new comment
+    const sessions = locate("sessions");
+
+    await setup.mockMouse.doubleClick(sessions.column + 2, sessions.row);
+    await settle(setup);
+    await typeText(setup, "midway-note");
+    await settle(setup);
+
+    // Assert - the draft sits where it will land on save (by span start), not at the end
+    const rows = setup.captureCharFrame().split("\n");
+    const rowOf = (needle: string): number => rows.findIndex((row) => row.includes(needle));
+
+    expect(rowOf("alpha-note")).toBeGreaterThanOrEqual(0);
+    expect(rowOf("midway-note")).toBeGreaterThan(rowOf("alpha-note"));
+    expect(rowOf("omega-note")).toBeGreaterThan(rowOf("midway-note"));
+  });
+});
+
+describe("virtualization guard", () => {
+  // The performance guard: the thread view must word-wrap only the blocks in the viewport, not the
+  // whole document. Deterministic (a call count, not a wall-clock), so it fails on any machine if a
+  // future change un-virtualizes the view - the regression the nav-latency benchmark would show.
+  test("a large plan word-wraps only the on-screen blocks, not every block", async () => {
+    // Arrange - a plan far taller than the viewport
+    const paragraphs = Array.from({ length: 800 }, (_, index) => `Paragraph ${index} with words.`);
+    const bigPlan = `# Big Plan\n\n${paragraphs.join("\n\n")}\n`;
+    const display = buildDisplay(bigPlan, undefined);
+    const bigSession = fixturePlanSession({
+      artifact: { type: "plan", content: bigPlan, meta: { title: "Big", planPath: "big.md" } },
+      annotations: [],
+    });
+    const spy = spyOn(markRuns, "wrapLines");
+
+    try {
+      // Act
+      const bigSetup = await testRender(
+        <ThreadView
+          session={bigSession}
+          display={display}
+          marks={new Map()}
+          quickActions={DEFAULT_QUICK_ACTIONS}
+          observer={false}
+          onAnnotate={() => {}}
+          onReply={() => {}}
+          onUpdateAnnotation={() => {}}
+          onExit={() => {}}
+        />,
+        { width: 64, height: 24 },
+      );
+
+      await settle(bigSetup);
+
+      // Assert - across the mount's renders the view never wraps a block for each of the 800; a
+      // viewport-worth per render stays far under one full pass over the document
+      expect(spy.mock.calls.length).toBeLessThan(display.length);
+      bigSetup.renderer.destroy();
+    } finally {
+      spy.mockRestore();
+    }
+  });
+});

package/src/components/ThreadView.slash.test.tsx

@@ -90,7 +90,6 @@ describe("the command leader", () => {
 
     // the command fired and no composer opened (a bare "x" would have started a draft)
     expect(commands).toEqual(["x"]);
-    expect(setup.captureCharFrame()).not.toContain("enter save");
 
     setup.renderer.destroy();
   });