> = ({
children,
@@ -34,8 +36,8 @@ const StatusRow: FC<{ children: ReactNode; label: string } & React.ComponentProp
// Fixed label while auto-compaction runs — decoupled from backend status text.
const COMPACTION_LABEL = 'Summarizing thread'
-const CompactionHint: FC = () => (
-
{COMPACTION_LABEL}
+const HintText: FC<{ children: ReactNode }> = ({ children }) => (
+
{children}
)
/** These indicators render inside whichever transcript mounted them, so every
@@ -45,6 +47,7 @@ function useThreadSessionStatus() {
const sessionId = useStore(useSessionView().$runtimeId)
const turnStartedAt = useStore($turnStartedAt)
const compacting = useStore(useMemo(() => sessionCompacting(sessionId), [sessionId]))
+ const drafting = useStore(useMemo(() => sessionDraftingTool(sessionId), [sessionId]))
// A pending clarify / approval / sudo / secret means the turn is paused on the
// user, not working — so don't resurrect the "thinking" timer while they
// decide (matches the pet's awaitingInput pose taking priority over busy).
@@ -53,10 +56,42 @@ function useThreadSessionStatus() {
return {
awaitingInput,
compacting,
+ drafting,
turnTimerKey: sessionId && turnStartedAt ? `turn:${sessionId}:${turnStartedAt}` : undefined
}
}
+// Long enough that a tool whose arguments arrive in a few frames never gets to
+// strobe a label, short enough that a real wait is named almost immediately.
+const DRAFTING_REVEAL_MS = 200
+
+/**
+ * What to call the wait, if it deserves a name. Compaction outranks a draft —
+ * it's rarer, slower, and explains a transcript that looks like it reset.
+ */
+function useStatusHint(compacting: boolean, drafting: DraftingTool | null): string {
+ const [revealed, setRevealed] = useState(false)
+ const name = drafting?.name ?? ''
+
+ useEffect(() => {
+ setRevealed(false)
+
+ if (!name) {
+ return
+ }
+
+ const id = window.setTimeout(() => setRevealed(true), DRAFTING_REVEAL_MS)
+
+ return () => window.clearTimeout(id)
+ }, [name])
+
+ if (compacting) {
+ return COMPACTION_LABEL
+ }
+
+ return revealed && name ? toolPresentVerb(name) : ''
+}
+
export const CenteredThreadSpinner: FC = () => {
const { t } = useI18n()
@@ -80,17 +115,18 @@ export const CenteredThreadSpinner: FC = () => {
export const ResponseLoadingIndicator: FC = () => {
const { t } = useI18n()
- const { compacting, turnTimerKey } = useThreadSessionStatus()
+ const { compacting, drafting, turnTimerKey } = useThreadSessionStatus()
const elapsed = useElapsedSeconds(true, turnTimerKey)
+ const hint = useStatusHint(compacting, drafting)
return (
- {compacting && }
+ {hint && {hint}}
)
@@ -159,7 +195,8 @@ export const StreamStallIndicator: FC = () => {
// what lets the timer read "quiet for 12s" rather than the age of this
// component, which is the whole turn so far.
const [quietSince, setQuietSince] = useState
(undefined)
- const { awaitingInput, compacting, turnTimerKey } = useThreadSessionStatus()
+ const { awaitingInput, compacting, drafting, turnTimerKey } = useThreadSessionStatus()
+ const hint = useStatusHint(compacting, drafting)
useEffect(() => {
setQuietSince(undefined)
@@ -169,24 +206,28 @@ export const StreamStallIndicator: FC = () => {
return () => window.clearTimeout(id)
}, [activity])
- const active = (quietSince !== undefined || compacting) && !awaitingInput
+ // A named wait doesn't have to earn the stall threshold first — we already
+ // know what the turn is doing, so say it as soon as the label is ready rather
+ // than leaving the transcript silent for STREAM_STALL_S.
+ const active = (quietSince !== undefined || Boolean(hint)) && !awaitingInput
// Compaction owns the whole turn, so it keeps counting from the turn's start;
- // a plain stall counts from the last thing the stream produced.
- const elapsed = useElapsedSeconds(active, compacting ? turnTimerKey : undefined, compacting ? undefined : quietSince)
+ // anything else counts from the moment the stream went quiet — the stall's own
+ // mark, or the draft's, whichever named the wait first.
+ const elapsed = useElapsedSeconds(
+ active,
+ compacting ? turnTimerKey : undefined,
+ compacting ? undefined : (quietSince ?? drafting?.since)
+ )
if (!active) {
return null
}
return (
-
+
- {compacting && }
+ {hint && {hint}}
)
diff --git a/apps/desktop/src/components/assistant-ui/tool/fallback.test.ts b/apps/desktop/src/components/assistant-ui/tool/fallback.test.ts
index 75bacb338a5..abe38c26f7d 100644
--- a/apps/desktop/src/components/assistant-ui/tool/fallback.test.ts
+++ b/apps/desktop/src/components/assistant-ui/tool/fallback.test.ts
@@ -1,42 +1,56 @@
import { describe, expect, it } from 'vitest'
-import { isUnboundableTool, shouldBoundToolGroup, technicalTrace } from './fallback'
+import { isCardTool, splitRunItems, technicalTrace } from './fallback'
-describe('shouldBoundToolGroup', () => {
- it('bounds long runs of ordinary tool calls', () => {
- expect(shouldBoundToolGroup(3, false)).toBe(true)
- })
-
- it('leaves short runs unbounded', () => {
- expect(shouldBoundToolGroup(2, false)).toBe(false)
- })
-
- it('never bounds a run holding an unboundable tool', () => {
- expect(shouldBoundToolGroup(3, true)).toBe(false)
- })
-})
-
-describe('isUnboundableTool', () => {
- it('exempts clarify forms and generated images from the window', () => {
- expect(isUnboundableTool('clarify')).toBe(true)
- expect(isUnboundableTool('image_generate')).toBe(true)
- })
-
- // Everything ToolEntry renders carries `data-tool-row`, so the
- // `:has([data-tool-row][data-tool-open])` rule in styles.css lifts the cap
- // on its own. A diff row mounts open and frees the group immediately; a
- // collapsed row has no body in the DOM to clip. Exempting these in JS
- // instead vetoed grouping for the whole run — and since reads and edits are
- // most of a coding session, runs of 19 calls never collapsed at all.
- it('bounds the rows the CSS break-out already covers', () => {
- for (const toolName of ['read_file', 'execute_code', 'edit_file', 'patch', 'write_file']) {
- expect(isUnboundableTool(toolName)).toBe(false)
+describe('isCardTool', () => {
+ it('keeps what the user has to look at out of a summary', () => {
+ // A diff is the deliverable, a clarify is a question waiting on an answer,
+ // an image is the thing that was asked for. None of them survives being
+ // folded into "used 3 tools".
+ for (const toolName of ['clarify', 'image_generate', 'edit_file', 'patch', 'write_file']) {
+ expect(isCardTool(toolName)).toBe(true)
}
})
- it('still bounds console output and other ordinary rows', () => {
- expect(isUnboundableTool('terminal')).toBe(false)
- expect(isUnboundableTool('web_search')).toBe(false)
+ it('treats reads, searches and commands as ephemeral activity', () => {
+ for (const toolName of ['read_file', 'search_files', 'terminal', 'execute_code', 'web_search']) {
+ expect(isCardTool(toolName)).toBe(false)
+ }
+ })
+})
+
+describe('splitRunItems', () => {
+ it('collapses a stretch of activity into one run', () => {
+ expect(splitRunItems(['read_file', 'search_files', 'terminal'])).toEqual([{ end: 2, kind: 'run', start: 0 }])
+ })
+
+ it('keeps a card at the point in the turn where it happened', () => {
+ // Read, edit, read has to stay in that order — a summary, the diff, then a
+ // second summary — rather than sorting the diffs to one end.
+ expect(splitRunItems(['read_file', 'patch', 'read_file', 'terminal'])).toEqual([
+ { end: 0, kind: 'run', start: 0 },
+ { index: 1, kind: 'card' },
+ { end: 3, kind: 'run', start: 2 }
+ ])
+ })
+
+ it('does not let adjacent cards merge into a run', () => {
+ expect(splitRunItems(['patch', 'write_file'])).toEqual([
+ { index: 0, kind: 'card' },
+ { index: 1, kind: 'card' }
+ ])
+ })
+
+ it('passes a part that is not a tool call through as its own card', () => {
+ expect(splitRunItems(['read_file', '', 'read_file'])).toEqual([
+ { end: 0, kind: 'run', start: 0 },
+ { index: 1, kind: 'card' },
+ { end: 2, kind: 'run', start: 2 }
+ ])
+ })
+
+ it('has nothing to split when the range is empty', () => {
+ expect(splitRunItems([])).toEqual([])
})
})
diff --git a/apps/desktop/src/components/assistant-ui/tool/fallback.tsx b/apps/desktop/src/components/assistant-ui/tool/fallback.tsx
index 799a87df3ee..70d6d050331 100644
--- a/apps/desktop/src/components/assistant-ui/tool/fallback.tsx
+++ b/apps/desktop/src/components/assistant-ui/tool/fallback.tsx
@@ -5,10 +5,12 @@ import { useStore } from '@nanostores/react'
import {
Children,
createContext,
+ type CSSProperties,
type FC,
+ Fragment,
+ isValidElement,
type PropsWithChildren,
type ReactNode,
- useCallback,
useContext,
useEffect,
useMemo,
@@ -23,6 +25,7 @@ import { ActivityTimerText } from '@/components/chat/activity-timer-text'
import { CompactMarkdown } from '@/components/chat/compact-markdown'
import { FileDiffPanel } from '@/components/chat/diff-lines'
import { DisclosureRow } from '@/components/chat/disclosure-row'
+import { SCAFFOLD_LABEL_CLASS, ScaffoldRow } from '@/components/chat/scaffold-row'
import { ZoomableImage } from '@/components/chat/zoomable-image'
import { Button } from '@/components/ui/button'
import { Codicon } from '@/components/ui/codicon'
@@ -41,11 +44,12 @@ import { normalize } from '@/lib/text'
import { useEnterAnimation } from '@/lib/use-enter-animation'
import { cn } from '@/lib/utils'
import { recordPreviewArtifact } from '@/store/preview-status'
+import { sessionApprovalRequest } from '@/store/prompts'
import { $toolInlineDiff } from '@/store/tool-diffs'
import { $toolRowDismissed, dismissToolRow } from '@/store/tool-dismiss'
import { $toolDisclosureOpen, $toolViewMode, setToolDisclosureOpen } from '@/store/tool-view'
-import { PendingToolApproval } from './approval'
+import { APPROVAL_TOOLS, PendingToolApproval } from './approval'
import {
buildToolView,
clampForDisplay,
@@ -701,109 +705,83 @@ function TerminalTranscript({ command, exitCode }: TerminalTranscriptProps) {
)
}
-// A back-to-back run of this many tool calls collapses into the bounded,
-// auto-scrolling window; fewer than this stays a plain inline stack.
-const TOOL_GROUP_SCROLL_THRESHOLD = 3
+// Tools that draw their own surface and must never be folded into a run's
+// summary. Two kinds, for the same reason — the thing on screen IS the point:
+//
+// - File edits are the deliverable, not scaffolding. The diff is what the
+// user reviews, so it stays visible at its place in the turn, live and
+// settled, the way a PR shows its changes.
+// - `clarify` and `image_generate` bypass ToolEntry to render their own
+// markup: a question the user has to answer, an image they asked for.
+//
+// Everything else is ephemeral activity — reads, searches, commands — which is
+// what a run summarizes and what the live ticker cycles through.
+const CARD_TOOLS = new Set(['clarify', 'image_generate'])
-// Tools whose body must never be hidden — not behind the window's max-height +
-// fade mask, and not behind a settled run's summary chevron. A run holding any
-// of them stays a plain, fully-visible stack no matter how long it is.
-//
-// This list is deliberately tiny, because the two things it opts out of are
-// already safe for anything ToolEntry renders. For the window: a row carries
-// `data-tool-row`, and the `:has([data-tool-row][data-tool-open])` rule in
-// styles.css lifts the cap whenever one is open, so a code/diff row mounting
-// open (see `defaultOpen`) frees itself the moment it appears, and a collapsed
-// row is a one-line status with no body in the DOM to clip. For the chevron: a
-// run still holding a pending call always renders its rows, so an approval bar
-// can't end up behind one.
-//
-// Only components that bypass ToolEntry need this opt-out: `clarify` and
-// `image_generate` render their own markup, never emit `data-tool-row`, and so
-// neither the CSS escape hatch nor the pending-row rule can reach them.
-//
-// File edits are pointedly NOT here. A settled run collapses its diffs behind
-// the summary, which carries their +N/−M — one click to read, and the run stays
-// compact. Adding them back veto'd the window for nearly every coding session
-// last time (7f2971039, reverted in 058aa34d8); it would do the same here.
-const UNBOUNDABLE_TOOLS = new Set(['clarify', 'image_generate'])
-
-export function isUnboundableTool(toolName: string): boolean {
- return UNBOUNDABLE_TOOLS.has(toolName)
+export function isCardTool(toolName: string): boolean {
+ return CARD_TOOLS.has(toolName) || isFileEditTool(toolName)
}
-export function shouldBoundToolGroup(childCount: number, hasUnboundable: boolean) {
- return childCount >= TOOL_GROUP_SCROLL_THRESHOLD && !hasUnboundable
-}
+export type RunItem = { end: number; kind: 'run'; start: number } | { index: number; kind: 'card' }
-// Pin-to-bottom + top-fade for the bounded tool window. Pins the newest row on
-// growth (a call lands or a row expands) unless the user scrolled up, and fades
-// the top edge once anything sits above it. Mirrors ThinkingDisclosure's live
-// preview. `enabled` is false for short runs, leaving the plain flat stack.
-function useToolWindow(enabled: boolean) {
- const scrollRef = useRef(null)
- const contentRef = useRef(null)
- const stickRef = useRef(true)
- const [faded, setFaded] = useState(false)
+/**
+ * Split a range of parts into cards and the runs of activity between them.
+ *
+ * Order is preserved rather than sorted into "all the runs, then all the
+ * cards": a turn that reads, edits, then reads again shows a summary, the
+ * diff, then a second summary, in the sequence it happened. Indices are
+ * relative to the range. An empty name is a part that isn't a tool call at
+ * all, which passes through as its own card.
+ */
+export function splitRunItems(toolNames: readonly string[]): RunItem[] {
+ const items: RunItem[] = []
+ let run: null | Extract = null
- const syncFade = useCallback(() => setFaded((scrollRef.current?.scrollTop ?? 0) > 4), [])
+ toolNames.forEach((name, index) => {
+ if (!name || isCardTool(name)) {
+ run = null
+ items.push({ index, kind: 'card' })
- const onScroll = useCallback(() => {
- const el = scrollRef.current
-
- if (!el) {
return
}
- stickRef.current = el.scrollHeight - el.scrollTop - el.clientHeight <= 8
- syncFade()
- }, [syncFade])
-
- useEffect(() => {
- const el = scrollRef.current
- const content = contentRef.current
-
- if (!enabled || !el || !content) {
- return
+ if (run) {
+ run.end = index
+ } else {
+ run = { end: index, kind: 'run', start: index }
+ items.push(run)
}
+ })
- // Track the content's HEIGHT and only pin when it grows. The observer also
- // fires for width changes — a sidebar sash drag resizes every tool window
- // once per frame — and pinning there is (a) pointless, the list didn't
- // grow, and (b) expensive: `pin` writes scrollTop then `syncFade` reads it
- // back, a write->read forced reflow per tool group per frame. Measured on
- // a real session while dragging the sash: 927ms of `pin` script plus
- // 2.7s of style recalc across one 60-frame drag. Reading the height off
- // the RO entry keeps the check reflow-free.
- let lastHeight = -1
+ return items
+}
- const pin = (entries: readonly ResizeObserverEntry[]) => {
- const height = entries[entries.length - 1]?.borderBoxSize?.[0]?.blockSize ?? -1
- const grew = height < 0 || height > lastHeight
- lastHeight = height
+/**
+ * The live run, as one line.
+ *
+ * A run in progress shows only what it is doing right now; each new action
+ * slides the one before it up and out of a single-line window, so a turn that
+ * touches thirty files reads as one line ticking over in place instead of a
+ * list growing down the page. When the run settles the ticker goes away and
+ * the summary above it is all that's left.
+ *
+ * Rows are clipped to a uniform line box so the reel's offset stays exact
+ * whatever a row happens to contain.
+ */
+function ToolRunTicker({ children }: { children: ReactNode }) {
+ const rows = Children.toArray(children)
- if (!grew) {
- return
- }
-
- if (stickRef.current) {
- el.scrollTop = el.scrollHeight
- }
-
- syncFade()
- }
-
- // No sync pin() here: the observer's guaranteed initial delivery runs it
- // inside RO timing (layout already clean, still before paint). A sync call
- // at effect time reads scrollHeight while the commit's layout is dirty —
- // one forced reflow per tool group, which cascades on a session switch.
- const observer = new ResizeObserver(pin)
- observer.observe(content)
-
- return () => observer.disconnect()
- }, [enabled, syncFade])
-
- return { contentRef, faded, onScroll, scrollRef }
+ return (
+
+
+ {rows.map((row, index) => (
+
+ {row}
+
+ ))}
+
+
-
-
-
- {live ? {summary.text} : summary.text}
-
-
-
-
+
+
+ {live ? {summary.text} : summary.text}
+
+
+
)
}
interface ToolRunState {
+ count: number
key: string
live: boolean
+ /** A call still awaiting a result that could be the one blocking on approval. */
+ pendingApprovalTool: boolean
summary: RunSummary
}
@@ -868,8 +847,10 @@ function useToolRun(startIndex: number, endIndex: number): ToolRunState {
cache.current = {
signature,
value: {
+ count: tools.length,
key: tools[0]?.toolCallId ?? '',
live,
+ pendingApprovalTool: tools.some(tool => tool.result === undefined && APPROVAL_TOOLS.has(tool.toolName)),
summary: summarizeToolRun(tools, live)
}
}
@@ -880,7 +861,7 @@ function useToolRun(startIndex: number, endIndex: number): ToolRunState {
}
/**
- * A run of consecutive tool calls, headed by the line that summarizes it.
+ * One run of consecutive activity calls, headed by the line that summarizes it.
*
* The run is identified by its FIRST tool call, never by its position: a live
* stream and the same turn rehydrated from history agree on which calls belong
@@ -889,69 +870,94 @@ function useToolRun(startIndex: number, endIndex: number): ToolRunState {
* index is what made an earlier attempt at this reshuffle the moment a turn
* settled. `lib/tool-run-continuity.test.ts` locks that agreement down.
*
- * A settled run collapses to its header; a live one keeps its rows on screen
- * (and past `TOOL_GROUP_SCROLL_THRESHOLD` inside a fixed-height auto-scrolling
- * window, so a long run can't shove the reply off screen). `ToolEmbedContext`
- * is false so every row still owns its own chrome (timer / copy / approval).
+ * Live, the run is a summary plus the one-line ticker. Settled, the summary is
+ * the whole of it until the user opens it. `ToolEmbedContext` is false so each
+ * row still owns its own chrome (timer / copy / approval) when shown.
+ */
+const ToolRun: FC> = ({
+ children,
+ endIndex,
+ startIndex
+}) => {
+ const messageRunning = useAuiState(selectMessageRunning)
+ const { count, key, live, pendingApprovalTool, summary } = useToolRun(startIndex, endIndex)
+ const sessionId = useStore(useSessionView().$runtimeId)
+ const approval = useStore(useMemo(() => sessionApprovalRequest(sessionId), [sessionId]))
+ const disclosureId = `tool-run:${key}`
+ const persistedOpen = useStore($toolDisclosureOpen(disclosureId))
+ const enterRef = useEnterAnimation(messageRunning, `tool-run:${key}`)
+
+ // A lone call is already its own one-line summary; heading it with a second
+ // line would say the same thing twice.
+ if (count < 2) {
+ return <>{children}
+ }
+
+ // An approval is a question the user has to answer, and the ticker only ever
+ // shows one line — the row carrying the approval bar could tick straight
+ // past it. Show the whole run until it's answered.
+ const blocked = Boolean(approval) && pendingApprovalTool
+ const expanded = live ? blocked : (persistedOpen ?? false)
+
+ return (
+
+
setToolDisclosureOpen(disclosureId, !expanded)}
+ open={expanded}
+ summary={summary}
+ />
+ {live && !blocked && {children}}
+ {expanded && {children}
}
+
- {grouped && (
-
setToolDisclosureOpen(disclosureId, !open)}
- open={open}
- summary={summary}
- />
- )}
- {open && (
-
- )}
-