@clawpump/claw-agent 0.1.5 → 0.1.6

package/agent/apps/desktop/src/components/assistant-ui/tool-fallback.tsx

@@ -3,8 +3,8 @@
 import { type ToolCallMessagePartProps, useAuiState } from '@assistant-ui/react'
 import { useStore } from '@nanostores/react'
 import { createContext, type FC, type PropsWithChildren, type ReactNode, useContext, useMemo } from 'react'
-import { useShallow } from 'zustand/shallow'
 
+import { AnsiText } from '@/components/assistant-ui/ansi-text'
 import { useElapsedSeconds } from '@/components/chat/activity-timer'
 import { ActivityTimerText } from '@/components/chat/activity-timer-text'
 import { CompactMarkdown } from '@/components/chat/compact-markdown'
@@ -12,26 +12,26 @@ import { DiffLines } from '@/components/chat/diff-lines'
 import { DisclosureRow } from '@/components/chat/disclosure-row'
 import { PreviewAttachment } from '@/components/chat/preview-attachment'
 import { ZoomableImage } from '@/components/chat/zoomable-image'
-import { BrailleSpinner } from '@/components/ui/braille-spinner'
+import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
 import { CopyButton } from '@/components/ui/copy-button'
 import { FadeText } from '@/components/ui/fade-text'
+import { GlyphSpinner } from '@/components/ui/glyph-spinner'
+import { ToolIcon } from '@/components/ui/tool-icon'
+import { Tip } from '@/components/ui/tooltip'
+import { useI18n } from '@/i18n'
 import { PrettyLink, LinkifiedText as SharedLinkifiedText, urlSlugTitleLabel } from '@/lib/external-link'
 import { AlertCircle, CheckCircle2 } from '@/lib/icons'
 import { useEnterAnimation } from '@/lib/use-enter-animation'
 import { cn } from '@/lib/utils'
 import { $toolInlineDiffs } from '@/store/tool-diffs'
+import { $toolRowDismissed, dismissToolRow } from '@/store/tool-dismiss'
 import { $toolDisclosureOpen, $toolViewMode, setToolDisclosureOpen } from '@/store/tool-view'
 
+import { PendingToolApproval } from './tool-approval'
 import {
-  groupCopyText as buildGroupCopyText,
   buildToolView,
   cleanVisibleText,
-  groupFailedStepCount,
-  groupPreviewTargets,
-  groupStatus,
-  groupTitle,
-  groupTotalDurationLabel,
   inlineDiffFromResult,
   isPreviewableTarget,
   looksRedundant,
@@ -44,14 +44,10 @@ import {
   type ToolStatus
 } from './tool-fallback-model'
 
-// Tool names that ChainToolFallback intercepts and renders as something
-// other than a ToolEntry — they don't count toward "is this a group of
-// tool calls?" because they have no visible tool block.
-const SPECIAL_TOOL_NAMES = new Set(['todo', 'image_generate', 'clarify'])
-
-// `true` when the current ToolEntry is being rendered inside a group
-// wrapper. Lets ToolEntry suppress per-row chrome (timer / preview) that
-// the group already shows.
+// `true` when a ToolEntry is rendered inside an embedding wrapper that owns
+// the per-row chrome (timer / preview). The flat ToolGroupSlot sets this
+// false, so every row currently owns its own chrome; kept as a seam for any
+// future embedding surface.
 const ToolEmbedContext = createContext(false)
 
 // Shared header chrome for tool rows. Both the single-tool DisclosureRow
@@ -79,6 +75,13 @@ const TOOL_SECTION_SURFACE_CLASS =
 
 const TOOL_SECTION_PRE_CLASS = cn(TOOL_SECTION_SURFACE_CLASS, 'font-mono text-[0.7rem] leading-relaxed')
 
+interface ToolStatusCopy {
+  statusDone: string
+  statusError: string
+  statusRecovered: string
+  statusRunning: string
+}
+
 function rawTechnicalTrace(args: unknown, result: unknown): string {
   const parts = [args, result]
     .filter(value => value !== undefined && value !== null)
@@ -98,11 +101,11 @@ function rawTechnicalTrace(args: unknown, result: unknown): string {
   return parts.join('\n')
 }
 
-function statusGlyph(status: ToolStatus): ReactNode {
+function statusGlyph(status: ToolStatus, copy: ToolStatusCopy): ReactNode {
   if (status === 'running') {
     return (
-      <BrailleSpinner
-        ariaLabel="Running"
+      <GlyphSpinner
+        ariaLabel={copy.statusRunning}
         className="size-3.5 shrink-0 text-[0.95rem] text-(--ui-text-tertiary)"
         spinner="breathe"
       />
@@ -110,24 +113,31 @@ function statusGlyph(status: ToolStatus): ReactNode {
   }
 
   if (status === 'error') {
-    return <AlertCircle aria-label="Error" className="size-3.5 shrink-0 text-destructive" />
+    return <AlertCircle aria-label={copy.statusError} className="size-3.5 shrink-0 text-destructive" />
   }
 
   if (status === 'warning') {
-    return <AlertCircle aria-label="Recovered" className="size-3.5 shrink-0 text-amber-600 dark:text-amber-400" />
+    return (
+      <AlertCircle aria-label={copy.statusRecovered} className="size-3.5 shrink-0 text-amber-600 dark:text-amber-400" />
+    )
   }
 
-  return <CheckCircle2 aria-label="Done" className="size-3.5 shrink-0 text-emerald-600/85 dark:text-emerald-400/85" />
+  return (
+    <CheckCircle2
+      aria-label={copy.statusDone}
+      className="size-3.5 shrink-0 text-emerald-600/85 dark:text-emerald-400/85"
+    />
+  )
 }
 
 // Leading glyph for any tool-row header. Status (running/error/warning)
 // takes precedence; otherwise falls back to the tool's codicon. Returns
 // null when neither applies so callers can render unconditionally.
-function ToolGlyph({ icon, status }: { icon?: string; status?: ToolStatus }) {
+function ToolGlyph({ copy, icon, status }: { copy: ToolStatusCopy; icon?: string; status?: ToolStatus }) {
   const node = status ? (
-    statusGlyph(status)
+    statusGlyph(status, copy)
   ) : icon ? (
-    <Codicon className="text-(--ui-text-tertiary)" name={icon} size="0.875rem" />
+    <ToolIcon className="text-(--ui-text-tertiary)" name={icon} size="0.875rem" />
   ) : null
 
   return node ? <span className={TOOL_HEADER_GLYPH_WRAP_CLASS}>{node}</span> : null
@@ -185,13 +195,18 @@ function useDisclosureOpen(disclosureId: string, fallbackOpen = false): boolean
 }
 
 function ToolEntry({ part }: ToolEntryProps) {
+  const { t } = useI18n()
+  const copy = t.assistant.tool
+  const statusCopy = t.statusStack
   const messageId = useAuiState(s => s.message.id)
   const messageRunning = useAuiState(selectMessageRunning)
   const embedded = useContext(ToolEmbedContext)
   const toolViewMode = useStore($toolViewMode)
   const disclosureId = `tool-entry:${messageId}:${toolPartDisclosureId(part)}`
+  const dismissed = useStore($toolRowDismissed(disclosureId))
   const open = useDisclosureOpen(disclosureId)
   const isPending = messageRunning && part.result === undefined
+  const canDismiss = !isPending && !embedded
   // Only animate entries that mount while their message is actively
   // streaming — historical sessions mount with `messageRunning === false`,
   // so they paint statically without a settle cascade. The wrapping group
@@ -260,6 +275,7 @@ function ToolEntry({ part }: ToolEntryProps) {
   const hasExpandableContent = Boolean(
     (view.previewTarget && isPreviewableTarget(view.previewTarget)) ||
     view.imageUrl ||
+    view.inlineDiff ||
     showDetail ||
     hasSearchHits ||
     toolViewMode === 'technical'
@@ -267,12 +283,39 @@ function ToolEntry({ part }: ToolEntryProps) {
 
   const copyAction = useMemo(() => toolCopyPayload(part, view), [part, view])
 
+  // The header trailing slot only carries the live duration timer while the
+  // tool is running. The copy control used to live here too, but an
+  // `opacity-0` (yet still clickable) button straddling the caret/duration made
+  // the disclosure caret hard to hit. Copy now lives in the expanded body's
+  // top-right, where it can't fight the caret for the right edge.
   const trailing =
-    isPending && !embedded ? (
-      <ActivityTimerText className={TOOL_HEADER_DURATION_CLASS} seconds={elapsed} />
-    ) : !isPending && copyAction.text ? (
-      <CopyButton appearance="tool-row" label={copyAction.label} stopPropagation text={copyAction.text} />
-    ) : undefined
+    isPending && !embedded ? <ActivityTimerText className={TOOL_HEADER_DURATION_CLASS} seconds={elapsed} /> : undefined
+
+  // Once a turn has settled, a hover/focus-revealed dismiss lets the user clear
+  // a completed/failed row that would otherwise sit at the tail of the chat.
+  // It goes in the in-flow `action` slot (not `trailing`) so it can't overlap
+  // the disclosure caret's hit-target — see the comment above `trailing`.
+  const dismissAction = canDismiss ? (
+    <Tip label={statusCopy.dismiss}>
+      <Button
+        aria-label={statusCopy.dismiss}
+        className="size-5 rounded-md text-(--ui-text-tertiary) opacity-0 transition-opacity hover:text-(--ui-text-primary) hover:opacity-100 group-hover/disclosure-row:opacity-80 group-focus-within/disclosure-row:opacity-80"
+        onClick={event => {
+          event.stopPropagation()
+          dismissToolRow(disclosureId)
+        }}
+        size="icon-xs"
+        type="button"
+        variant="ghost"
+      >
+        <Codicon name="close" size="0.75rem" />
+      </Button>
+    </Tip>
+  ) : undefined
+
+  if (dismissed) {
+    return null
+  }
 
   return (
     <div
@@ -285,12 +328,13 @@ function ToolEntry({ part }: ToolEntryProps) {
     >
       <div className={cn(open && 'border-b border-(--ui-stroke-tertiary) px-2 py-1.5')}>
         <DisclosureRow
+          action={dismissAction}
           onToggle={hasExpandableContent ? () => setToolDisclosureOpen(disclosureId, !open) : undefined}
           open={open}
           trailing={trailing}
         >
           <span className="flex min-w-0 items-center gap-1.5">
-            <ToolGlyph icon={view.icon} status={leadingStatus(isPending, view.status)} />
+            <ToolGlyph copy={copy} icon={view.icon} status={leadingStatus(isPending, view.status)} />
             <FadeText
               className={cn(
                 TOOL_HEADER_TITLE_CLASS,
@@ -308,14 +352,26 @@ function ToolEntry({ part }: ToolEntryProps) {
           </span>
         </DisclosureRow>
       </div>
+      {isPending && <PendingToolApproval part={part} />}
       {open && (
-        <div className="grid w-full min-w-0 max-w-full gap-1.5 overflow-hidden p-1.5">
+        <div className="relative grid w-full min-w-0 max-w-full gap-1.5 overflow-hidden p-1.5">
+          {copyAction.text && (
+            <CopyButton
+              appearance="inline"
+              className="absolute right-1.5 top-1.5 z-10 h-5 gap-0 rounded-md border border-(--ui-stroke-tertiary) bg-background/80 px-1 opacity-60 backdrop-blur-sm transition-opacity hover:opacity-100 focus-visible:opacity-100"
+              iconClassName="size-3"
+              label={copyAction.label}
+              showLabel={false}
+              stopPropagation
+              text={copyAction.text}
+            />
+          )}
           {!embedded && view.previewTarget && isPreviewableTarget(view.previewTarget) && (
             <PreviewAttachment source="tool-result" target={view.previewTarget} />
           )}
           {view.imageUrl && (
             <div className="max-w-72 overflow-hidden rounded-[0.25rem] border border-(--ui-stroke-tertiary)">
-              <ZoomableImage alt="Tool output" className="h-auto w-full object-cover" src={view.imageUrl} />
+              <ZoomableImage alt={copy.outputAlt} className="h-auto w-full object-cover" src={view.imageUrl} />
             </div>
           )}
           {hasSearchHits && view.searchHits && (
@@ -344,11 +400,41 @@ function ToolEntry({ part }: ToolEntryProps) {
                   )}
                 </div>
               ) : null
+            ) : view.stdout || view.stderr ? (
+              // Stdout + stderr split: render both as labeled blocks. stderr
+              // is intentionally NOT painted destructive — many CLIs log
+              // informational output there.
+              <div className="max-w-full text-xs leading-relaxed text-(--ui-text-secondary)">
+                {view.detailLabel && <p className={TOOL_SECTION_LABEL_CLASS}>{view.detailLabel}</p>}
+                {view.stdout && (
+                  <div className="space-y-0.5">
+                    {view.stderr && <p className={TOOL_SECTION_LABEL_CLASS}>stdout</p>}
+                    <pre className={cn(TOOL_SECTION_PRE_CLASS, 'whitespace-pre-wrap wrap-anywhere')}>
+                      {view.rendersAnsi ? <AnsiText text={view.stdout} /> : view.stdout}
+                    </pre>
+                  </div>
+                )}
+                {view.stderr && (
+                  <div className={cn('space-y-0.5', view.stdout && 'mt-1.5')}>
+                    <p className={TOOL_SECTION_LABEL_CLASS}>stderr</p>
+                    <pre
+                      className={cn(
+                        TOOL_SECTION_PRE_CLASS,
+                        'whitespace-pre-wrap wrap-anywhere text-(--ui-text-tertiary)'
+                      )}
+                    >
+                      {view.rendersAnsi ? <AnsiText text={view.stderr} /> : view.stderr}
+                    </pre>
+                  </div>
+                )}
+              </div>
             ) : (
               <div className="max-w-full text-xs leading-relaxed text-(--ui-text-secondary)">
                 {view.detailLabel && <p className={TOOL_SECTION_LABEL_CLASS}>{view.detailLabel}</p>}
                 {renderDetailAsCode ? (
-                  <pre className={cn(TOOL_SECTION_PRE_CLASS, 'whitespace-pre-wrap wrap-anywhere')}>{view.detail}</pre>
+                  <pre className={cn(TOOL_SECTION_PRE_CLASS, 'whitespace-pre-wrap wrap-anywhere')}>
+                    {view.rendersAnsi ? <AnsiText text={view.detail} /> : view.detail}
+                  </pre>
                 ) : (
                   <CompactMarkdown className={cn(TOOL_SECTION_SURFACE_CLASS, 'wrap-anywhere')} text={view.detail} />
                 )}
@@ -356,7 +442,7 @@ function ToolEntry({ part }: ToolEntryProps) {
             ))}
           {showRawSearchDrilldown && (
             <details className="max-w-full">
-              <summary className={cn(TOOL_SECTION_LABEL_CLASS, 'cursor-pointer mb-0')}>Raw response</summary>
+              <summary className={cn(TOOL_SECTION_LABEL_CLASS, 'mb-0')}>{copy.rawResponse}</summary>
               <pre className={cn(TOOL_SECTION_PRE_CLASS, 'mt-1 whitespace-pre-wrap wrap-anywhere')}>
                 {view.rawResult}
               </pre>
@@ -369,136 +455,42 @@ function ToolEntry({ part }: ToolEntryProps) {
           )}
         </div>
       )}
-      {view.inlineDiff && <DiffLines text={view.inlineDiff} />}
+      {open && view.inlineDiff && <DiffLines text={view.inlineDiff} />}
     </div>
   )
 }
 
 /**
- * Always-present wrapper around the consecutive tool-call range that
- * `MessagePrimitive.Parts` already grouped for us. Renders a header +
- * collapsible body when there are 2+ visible tools; otherwise it's a
- * transparent passthrough that just owns the entry animation for the
- * single ToolEntry inside.
+ * Flat, Cursor-style tool list. assistant-ui hands us a *range* of
+ * consecutive tool-call parts, but how that range is sliced is unstable: a
+ * live stream interleaves narration/reasoning between calls (many tiny
+ * ranges), while the settled message reconstructs every tool_call back-to-back
+ * (one big range). Rendering a "Tool actions · N steps" group off that range
+ * therefore reshuffled the whole turn the instant it settled.
  *
- * Crucially, the wrapper element is the SAME `<div>` regardless of
- * group size — only the optional header element appears/disappears.
- * That preserves React identity for the inner `MessagePartByIndex`
- * children when the 1→2 transition happens, so existing tool blocks
- * never remount when a new tool joins them mid-stream.
- *
- * The previous design (per-tool ToolFallback computing its own group
- * lookup and conditionally returning either `<ToolEntry>` or
- * `<ToolGroup>`) flipped the React element type at the 1→2 transition
- * and tore down the existing tool entirely, which is what showed up as
- * "the previous tool's animation resets every time a new tool arrives."
+ * So we never group: each tool is a standalone row, and the wrapper just lays
+ * its children out on the tight `--tool-row-gap` rhythm. One range or ten,
+ * fragmented or consecutive, the result is pixel-identical — a tight, stable
+ * stack. The wrapper stays a single `<div>` of stable identity so children
+ * never remount as the range grows mid-stream. `ToolEmbedContext` is false so
+ * every row owns its own chrome (timer / preview / copy / inline approval).
  */
 export const ToolGroupSlot: FC<PropsWithChildren<{ endIndex: number; startIndex: number }>> = ({
   children,
-  endIndex,
   startIndex
 }) => {
   const messageId = useAuiState(s => s.message.id)
   const messageRunning = useAuiState(selectMessageRunning)
-
-  // Pull the visible tool parts in this range. `useShallow` makes this
-  // re-render only when the actual part references change (assistant-ui
-  // gives stable refs for unchanged parts), not on every text/reasoning
-  // delta elsewhere in the message.
-  const visibleParts = useAuiState(
-    useShallow((s: { message: { parts: readonly unknown[] } }) =>
-      s.message.parts.slice(startIndex, endIndex + 1).filter((p): p is ToolPart => {
-        if (!p || typeof p !== 'object') {
-          return false
-        }
-
-        const row = p as { toolName?: unknown; type?: unknown }
-
-        return row.type === 'tool-call' && typeof row.toolName === 'string' && !SPECIAL_TOOL_NAMES.has(row.toolName)
-      })
-    )
-  )
-
-  const isGroup = visibleParts.length > 1
-  const isRunning = messageRunning && visibleParts.some(p => p.result === undefined)
-  // Stable across the group's lifetime (start index doesn't shift when
-  // tools append to the end), so user-driven open/close persists across
-  // streaming.
-  const disclosureId = `tool-group:${messageId}:${startIndex}`
-  const open = useDisclosureOpen(disclosureId)
-  const enterRef = useEnterAnimation(messageRunning, disclosureId)
-
-  const status = groupStatus(visibleParts)
-  const displayStatus = !isRunning && status === 'running' ? 'success' : status
-  const failedStepCount = useMemo(() => groupFailedStepCount(visibleParts), [visibleParts])
-  const totalDurationLabel = useMemo(() => groupTotalDurationLabel(visibleParts), [visibleParts])
-
-  const statusSummary =
-    displayStatus === 'running' || failedStepCount === 0
-      ? ''
-      : displayStatus === 'warning'
-        ? failedStepCount === 1
-          ? 'Recovered after 1 failed step'
-          : `Recovered after ${failedStepCount} failed steps`
-        : failedStepCount === 1
-          ? '1 step failed'
-          : `${failedStepCount} steps failed`
-
-  const groupCopyText = useMemo(() => buildGroupCopyText(visibleParts), [visibleParts])
-  const previewTargets = useMemo(() => groupPreviewTargets(visibleParts), [visibleParts])
+  const enterRef = useEnterAnimation(messageRunning, `tool-group:${messageId}:${startIndex}`)
 
   return (
-    <ToolEmbedContext.Provider value={isGroup}>
-      <div className="min-w-0 max-w-full overflow-hidden" data-slot="tool-block" ref={enterRef}>
-        {isGroup && (
-          <DisclosureRow
-            key="header"
-            onToggle={() => setToolDisclosureOpen(disclosureId, !open)}
-            open={open}
-            trailing={
-              !isRunning && groupCopyText ? (
-                <CopyButton appearance="tool-row" label="Copy activity" stopPropagation text={groupCopyText} />
-              ) : undefined
-            }
-          >
-            <span className="flex min-w-0 items-center gap-1.5">
-              <ToolGlyph status={displayStatus === 'success' ? undefined : displayStatus} />
-              <FadeText
-                className={cn(
-                  TOOL_HEADER_TITLE_CLASS,
-                  displayStatus === 'error' && 'text-destructive',
-                  displayStatus === 'warning' && 'text-amber-700 dark:text-amber-300'
-                )}
-              >
-                {groupTitle(visibleParts)}
-              </FadeText>
-              {totalDurationLabel && <span className={TOOL_HEADER_DURATION_CLASS}>{totalDurationLabel}</span>}
-            </span>
-            {statusSummary && (
-              <FadeText
-                className={cn(
-                  TOOL_HEADER_SUBTITLE_CLASS,
-                  displayStatus === 'warning' ? 'text-amber-700/80 dark:text-amber-300/85' : 'text-destructive/85'
-                )}
-              >
-                {statusSummary}
-              </FadeText>
-            )}
-          </DisclosureRow>
-        )}
-        {isGroup && previewTargets.length > 0 && (
-          <div className="mt-2 grid w-full min-w-0 max-w-full gap-2 overflow-hidden pr-2 pl-3">
-            {previewTargets.map(target => (
-              <PreviewAttachment key={target} source="tool-result" target={target} />
-            ))}
-          </div>
-        )}
-        {/* Body is always rendered so children stay mounted across collapse/
-            expand and across the 1→2 group transition. `hidden` removes it
-            from a11y/visual flow without unmounting React subtree. */}
-        <div className={cn(isGroup && 'mt-0.5 w-full overflow-hidden pr-2 pl-3')} hidden={isGroup && !open} key="body">
-          {children}
-        </div>
+    <ToolEmbedContext.Provider value={false}>
+      <div
+        className="grid min-w-0 max-w-full gap-(--tool-row-gap) overflow-hidden"
+        data-slot="tool-block"
+        ref={enterRef}
+      >
+        {children}
       </div>
     </ToolEmbedContext.Provider>
   )

package/agent/apps/desktop/src/components/assistant-ui/tooltip-icon-button.tsx

@@ -3,6 +3,7 @@
 import { type ComponentPropsWithRef, forwardRef } from 'react'
 
 import { Button } from '@/components/ui/button'
+import { Tip } from '@/components/ui/tooltip'
 import { cn } from '@/lib/utils'
 
 export interface TooltipIconButtonProps extends ComponentPropsWithRef<typeof Button> {
@@ -11,19 +12,20 @@ export interface TooltipIconButtonProps extends ComponentPropsWithRef<typeof But
 }
 
 export const TooltipIconButton = forwardRef<HTMLButtonElement, TooltipIconButtonProps>(
-  ({ children, tooltip, side: _side = 'bottom', className, ...rest }, ref) => {
+  ({ children, tooltip, side = 'bottom', className, ...rest }, ref) => {
     return (
-      <Button
-        size="icon"
-        variant="ghost"
-        {...rest}
-        aria-label={tooltip}
-        className={cn('aui-button-icon size-6 p-1', className)}
-        ref={ref}
-        title={tooltip}
-      >
-        {children}
-      </Button>
+      <Tip label={tooltip} side={side}>
+        <Button
+          size="icon-xs"
+          variant="ghost"
+          {...rest}
+          aria-label={tooltip}
+          className={cn('aui-button-icon', className)}
+          ref={ref}
+        >
+          {children}
+        </Button>
+      </Tip>
     )
   }
 )

package/agent/apps/desktop/src/components/assistant-ui/user-message-edit.test.tsx

@@ -0,0 +1,141 @@
+import { ExportedMessageRepository } from '@assistant-ui/core/internal'
+// Clicking a user bubble must open the inline edit composer — through the
+// app's incremental external-store runtime (which reimplements capability
+// resolution, incl. `edit: onEdit !== undefined`) and the stock runtime.
+//
+// Note: this covers the React/runtime wiring only. The Electron-level failure
+// mode (titlebar -webkit-app-region:drag swallowing clicks on *stuck* sticky
+// bubbles) is not reproducible in jsdom — see USER_BUBBLE_BASE_CLASS's no-drag
+// carve-out in thread.tsx.
+import { AssistantRuntimeProvider, type ThreadMessage, useExternalStoreRuntime } from '@assistant-ui/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { useIncrementalExternalStoreRuntime } from '@/lib/incremental-external-store-runtime'
+
+import { Thread } from './thread'
+
+const createdAt = new Date('2026-05-01T00:00:00.000Z')
+
+class TestResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+vi.stubGlobal('ResizeObserver', TestResizeObserver)
+vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) =>
+  window.setTimeout(() => callback(performance.now()), 0)
+)
+vi.stubGlobal('cancelAnimationFrame', (id: number) => window.clearTimeout(id))
+
+Element.prototype.scrollTo = function scrollTo() {}
+
+function stubOffsetDimension(
+  prop: 'offsetHeight' | 'offsetWidth',
+  clientProp: 'clientHeight' | 'clientWidth',
+  fallback: number
+) {
+  const previous = Object.getOwnPropertyDescriptor(HTMLElement.prototype, prop)
+
+  Object.defineProperty(HTMLElement.prototype, prop, {
+    configurable: true,
+    get() {
+      return previous?.get?.call(this) || (this as HTMLElement)[clientProp] || fallback
+    }
+  })
+}
+
+stubOffsetDimension('offsetWidth', 'clientWidth', 800)
+stubOffsetDimension('offsetHeight', 'clientHeight', 600)
+
+function userMessage(): ThreadMessage {
+  return {
+    id: 'user-1',
+    role: 'user',
+    content: [{ type: 'text', text: 'edit me please' }],
+    attachments: [],
+    createdAt,
+    metadata: { custom: {} }
+  } as ThreadMessage
+}
+
+function assistantMessage(): ThreadMessage {
+  return {
+    id: 'assistant-1',
+    role: 'assistant',
+    content: [{ type: 'text', text: 'done' }],
+    status: { type: 'complete', reason: 'stop' },
+    createdAt,
+    metadata: {
+      unstable_state: null,
+      unstable_annotations: [],
+      unstable_data: [],
+      steps: [],
+      custom: {}
+    }
+  } as ThreadMessage
+}
+
+// Mirrors chat/index.tsx: incremental runtime + messageRepository + onEdit.
+function IncrementalHarness({ onEdit }: { onEdit: () => Promise<void> }) {
+  const repository = ExportedMessageRepository.fromArray([userMessage(), assistantMessage()])
+
+  const runtime = useIncrementalExternalStoreRuntime<ThreadMessage>({
+    messageRepository: repository,
+    isRunning: false,
+    setMessages: () => {},
+    onNew: async () => {},
+    onEdit,
+    onCancel: async () => {},
+    onReload: async () => {}
+  })
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <Thread />
+    </AssistantRuntimeProvider>
+  )
+}
+
+// Control: stock external store runtime.
+function StockHarness({ onEdit }: { onEdit: () => Promise<void> }) {
+  const runtime = useExternalStoreRuntime<ThreadMessage>({
+    messages: [userMessage(), assistantMessage()],
+    isRunning: false,
+    onNew: async () => {},
+    onEdit
+  })
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <Thread />
+    </AssistantRuntimeProvider>
+  )
+}
+
+describe('click-to-edit user message', () => {
+  it('opens the edit composer with the incremental runtime', async () => {
+    const { container } = render(<IncrementalHarness onEdit={async () => {}} />)
+
+    const bubble = await screen.findByRole('button', { name: 'Edit message' })
+
+    fireEvent.click(bubble)
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-slot="aui_edit-composer-root"]')).toBeTruthy()
+    })
+  })
+
+  it('opens the edit composer with the stock runtime', async () => {
+    const { container } = render(<StockHarness onEdit={async () => {}} />)
+
+    const bubble = await screen.findByRole('button', { name: 'Edit message' })
+
+    fireEvent.click(bubble)
+
+    await waitFor(() => {
+      expect(container.querySelector('[data-slot="aui_edit-composer-root"]')).toBeTruthy()
+    })
+  })
+})