@clawpump/claw-agent 0.1.4 → 0.1.6

package/agent/apps/desktop/scripts/diag-scroll-reset.mjs

@@ -0,0 +1,229 @@
+// Reproduce + diagnose the "scroll wheel resets position while reading" bug.
+//
+// The complaint (Windows, mouse wheel): scrolling UP through a chat to re-read
+// older content randomly yanks the view to a different position, so you have to
+// fight the scrollbar. Mac users on trackpads don't see it.
+//
+// Hypothesis: the thread scroller has the browser default `overflow-anchor:
+// auto`, and the thread renders items in natural document flow (padding
+// spacers, NOT transforms). When an item above the viewport is measured by
+// @tanstack/react-virtual (its real height differs a lot from the 220px
+// estimate) — or when Shiki/images/fonts reflow it — TWO mechanisms both
+// adjust scrollTop for the same delta: TanStack's measurement compensation AND
+// the browser's native scroll anchoring. The double-correction lurches the
+// view. A mouse wheel's coarse, discrete notches mount/measure several
+// under-estimated turns per tick, so the over-correction is large and visible;
+// a trackpad's ~1-3px/frame keeps it sub-perceptual.
+//
+// This script drives synthetic mouse-wheel-UP scrolling on a long thread and
+// measures how much a tracked on-screen turn jumps, first with
+// `overflow-anchor: auto` (reproduce) then `overflow-anchor: none` (the fix).
+// If the fix run shows dramatically fewer/smaller jumps, the hypothesis holds.
+//
+// Prereq: a running desktop app with remote debugging on 9222, on a thread
+// with enough history to scroll (the longer / more code+tool blocks, the
+// better the repro). Then:  node apps/desktop/scripts/diag-scroll-reset.mjs
+
+const NOTCHES = 14 // wheel-up ticks per sweep
+const NOTCH_PX = 120 // Windows wheel notch ≈ 120px
+const NOTCH_GAP_MS = 130 // let each smooth-scroll animation settle
+const REVERSE_JUMP_PX = 6 // tracked turn moving UP while scrolling up = wrong way
+const LURCH_PX = 60 // single-frame on-screen jump that reads as a "reset"
+
+const list = await (await fetch('http://127.0.0.1:9222/json/list')).json()
+const tgt = list.find(t => t.type === 'page' && t.url.startsWith('http'))
+if (!tgt) {
+  console.error('No page target on :9222. Is the desktop app running with --remote-debugging-port=9222?')
+  process.exit(1)
+}
+const ws = new WebSocket(tgt.webSocketDebuggerUrl)
+let id = 0
+const pending = new Map()
+ws.addEventListener('message', ev => {
+  const m = JSON.parse(ev.data)
+  if (m.id != null && pending.has(m.id)) {
+    pending.get(m.id)(m)
+    pending.delete(m.id)
+  }
+})
+await new Promise(r => ws.addEventListener('open', r))
+const send = (m, p = {}) =>
+  new Promise(r => {
+    const i = ++id
+    pending.set(i, r)
+    ws.send(JSON.stringify({ id: i, method: m, params: p }))
+  })
+const evalP = async expr => {
+  const r = await send('Runtime.evaluate', { expression: expr, returnByValue: true })
+  if (r.result?.exceptionDetails) throw new Error(r.result.exceptionDetails.text)
+  return r.result.result.value
+}
+const sleep = ms => new Promise(r => setTimeout(r, ms))
+
+// Install per-sweep instrumentation. `mode` is the overflow-anchor value to
+// force inline so we A/B the exact same thread regardless of any CSS fix.
+// Starts from ~45% down the thread so there's room to scroll up into
+// not-yet-measured turns, tags the turn nearest viewport-center as the anchor,
+// then records (per rAF) scrollTop + that turn's on-screen top, plus every
+// scrollTop *setter* write (TanStack compensation) and ResizeObserver hit.
+async function arm(mode) {
+  await evalP(`(() => {
+    const v = document.querySelector('[data-slot="aui_thread-viewport"]')
+    if (!v) throw new Error('thread viewport not found')
+
+    // Force the overflow-anchor behavior under test (inline beats CSS).
+    v.style.overflowAnchor = ${JSON.stringify(mode)}
+
+    // Park ~45% down so a wheel-up sweep climbs into estimated-but-unmeasured
+    // turns above the fold (where the measurement correction fires).
+    v.scrollTop = Math.round(v.scrollHeight * 0.45)
+
+    // Tag the turn closest to viewport center; we track its on-screen top.
+    const vr = v.getBoundingClientRect()
+    const center = vr.top + v.clientHeight / 2
+    let best = null, bestD = Infinity
+    for (const el of v.querySelectorAll('[data-index]')) {
+      const r = el.getBoundingClientRect()
+      const d = Math.abs((r.top + r.height / 2) - center)
+      if (d < bestD) { bestD = d; best = el }
+    }
+    document.querySelectorAll('[data-se-anchor]').forEach(e => e.removeAttribute('data-se-anchor'))
+    if (best) best.setAttribute('data-se-anchor', '1')
+    const anchorIndex = best ? best.getAttribute('data-index') : null
+
+    const samples = []
+    const writes = []
+    const ros = []
+    const t0 = performance.now()
+
+    // Intercept scrollTop writes → these are JS (TanStack) corrections.
+    // Native browser scroll anchoring does NOT go through this setter, so a
+    // scrollTop change with no write in the same frame is a native adjust.
+    const desc = Object.getOwnPropertyDescriptor(Element.prototype, 'scrollTop')
+    Object.defineProperty(v, 'scrollTop', {
+      configurable: true,
+      get() { return desc.get.call(this) },
+      set(val) {
+        writes.push({ t: performance.now() - t0, val, sh: this.scrollHeight })
+        desc.set.call(this, val)
+      }
+    })
+    window.__restoreScrollTop = () => Object.defineProperty(v, 'scrollTop', desc)
+
+    const ro = new ResizeObserver(entries => {
+      for (const e of entries) {
+        ros.push({ t: performance.now() - t0, slot: e.target.getAttribute?.('data-slot') || e.target.tagName, h: Math.round(e.contentRect.height) })
+      }
+    })
+    ro.observe(v)
+    if (v.firstElementChild) ro.observe(v.firstElementChild)
+
+    let running = true
+    const tick = () => {
+      if (!running) return
+      const a = v.querySelector('[data-se-anchor]')
+      const ar = a ? a.getBoundingClientRect() : null
+      samples.push({
+        t: performance.now() - t0,
+        st: Math.round(v.scrollTop * 100) / 100,
+        sh: v.scrollHeight,
+        ch: v.clientHeight,
+        atop: ar ? Math.round(ar.top * 100) / 100 : null,
+        aconn: !!a
+      })
+      requestAnimationFrame(tick)
+    }
+    requestAnimationFrame(tick)
+
+    window.__se = { samples, writes, ros, anchorIndex, dpr: window.devicePixelRatio, stop() { running = false; ro.disconnect(); window.__restoreScrollTop?.() } }
+    return true
+  })()`)
+}
+
+async function wheelUpSweep() {
+  const { x, y } = await evalP(`(() => {
+    const v = document.querySelector('[data-slot="aui_thread-viewport"]')
+    const r = v.getBoundingClientRect()
+    return { x: Math.round(r.left + r.width / 2), y: Math.round(r.top + r.height / 2) }
+  })()`)
+
+  for (let i = 0; i < NOTCHES; i++) {
+    await send('Input.dispatchMouseEvent', { type: 'mouseWheel', x, y, deltaX: 0, deltaY: -NOTCH_PX })
+    await sleep(NOTCH_GAP_MS)
+  }
+  await sleep(400)
+}
+
+async function collect() {
+  const data = JSON.parse(await evalP(`(() => { window.__se.stop(); return JSON.stringify(window.__se) })()`))
+  return data
+}
+
+function analyze(label, data) {
+  const { samples, writes, ros, anchorIndex, dpr } = data
+  let reverseJumps = 0
+  let reverseSum = 0
+  let lurches = 0
+  let maxJump = 0
+  let nativeMoves = 0
+  let prev = null
+  for (const s of samples) {
+    if (prev && prev.aconn && s.aconn && prev.atop != null && s.atop != null) {
+      const dTop = s.atop - prev.atop // wheel-up should move content DOWN → dTop >= 0
+      const dSt = s.st - prev.st
+      // Native (browser-anchoring) move: scrollTop changed with no setter write in this frame window.
+      const wroteThisFrame = writes.some(w => w.t > prev.t && w.t <= s.t)
+      if (Math.abs(dSt) > 0.5 && !wroteThisFrame) nativeMoves++
+      if (dTop < -REVERSE_JUMP_PX) {
+        reverseJumps++
+        reverseSum += -dTop
+      }
+      if (Math.abs(dTop) > LURCH_PX) lurches++
+      if (Math.abs(dTop) > maxJump) maxJump = Math.abs(dTop)
+    }
+    prev = s
+  }
+  console.log(`\n── ${label} ──`)
+  console.log(`  devicePixelRatio:     ${dpr}${Number.isInteger(dpr) ? '' : '  (fractional — Windows scaling, worsens rounding jitter)'}`)
+  console.log(`  tracked turn index:   ${anchorIndex}`)
+  console.log(`  rAF frames:           ${samples.length}`)
+  console.log(`  scrollTop writes:     ${writes.length}   (TanStack measurement corrections)`)
+  console.log(`  ResizeObserver hits:  ${ros.length}`)
+  console.log(`  native scroll moves:  ${nativeMoves}   (scrollTop moved with NO JS write = browser anchoring)`)
+  console.log(`  reverse jumps:        ${reverseJumps}   (tracked turn yanked UP while scrolling up; total ${reverseSum.toFixed(0)}px)`)
+  console.log(`  big lurches (>${LURCH_PX}px):   ${lurches}`)
+  console.log(`  max single-frame jump: ${maxJump.toFixed(0)}px`)
+  return { reverseJumps, reverseSum, lurches, maxJump, nativeMoves }
+}
+
+console.log(`Wheel-up repro: ${NOTCHES} notches × ${NOTCH_PX}px, anchored mid-thread.\n`)
+
+await arm('auto')
+await sleep(150)
+await wheelUpSweep()
+const a = analyze('overflow-anchor: auto  (current / repro)', await collect())
+
+await sleep(300)
+
+await arm('none')
+await sleep(150)
+await wheelUpSweep()
+const b = analyze('overflow-anchor: none  (proposed fix)', await collect())
+
+// Clean up our tag.
+await evalP(`document.querySelectorAll('[data-se-anchor]').forEach(e => e.removeAttribute('data-se-anchor'))`)
+
+console.log('\n══ verdict ══')
+const drop = (x, y) => (x === 0 ? (y === 0 ? '0' : 'n/a') : `${Math.round((1 - y / x) * 100)}% fewer`)
+console.log(`  reverse jumps:  auto=${a.reverseJumps}  none=${b.reverseJumps}  (${drop(a.reverseJumps, b.reverseJumps)})`)
+console.log(`  big lurches:    auto=${a.lurches}  none=${b.lurches}  (${drop(a.lurches, b.lurches)})`)
+console.log(`  max jump:       auto=${a.maxJump.toFixed(0)}px  none=${b.maxJump.toFixed(0)}px`)
+console.log(`  native moves:   auto=${a.nativeMoves}  none=${b.nativeMoves}  (browser anchoring should ~vanish at none)`)
+if (a.reverseJumps + a.lurches > 0 && b.reverseJumps + b.lurches < a.reverseJumps + a.lurches) {
+  console.log('\n  → Jumps drop sharply with overflow-anchor:none → root cause confirmed.')
+} else if (a.reverseJumps + a.lurches === 0) {
+  console.log('\n  → No jumps captured this run. Use a longer thread (many code/tool blocks),')
+  console.log('    raise NOTCHES, and ensure you start scrolled up from the bottom.')
+}
+
+ws.close()

package/agent/apps/desktop/scripts/patch-electron-builder-mac-binary.cjs

@@ -0,0 +1,64 @@
+const fs = require('node:fs')
+const path = require('node:path')
+
+if (process.platform !== 'darwin') {
+  process.exit(0)
+}
+
+const desktopRoot = path.resolve(__dirname, '..')
+const repoRoot = path.resolve(desktopRoot, '..', '..')
+const electronMacPath = path.join(repoRoot, 'node_modules', 'app-builder-lib', 'out', 'electron', 'electronMac.js')
+
+const marker = 'hermes-macos-electron-binary-fallback'
+const needle = `    await Promise.all([
+        doRename(path.join(contentsPath, "MacOS"), electronBranding.productName, appPlist.CFBundleExecutable),
+        (0, builder_util_1.unlinkIfExists)(path.join(appOutDir, "LICENSE")),
+        (0, builder_util_1.unlinkIfExists)(path.join(appOutDir, "LICENSES.chromium.html")),
+    ]);`
+const replacement = `    // ${marker}: electron-builder 26.8.x can sometimes copy
+    // Electron.app without its main MacOS/Electron binary before this rename.
+    // Restore it from the installed Electron runtime so local desktop installs
+    // do not fail with ENOENT during macOS arm64 packaging.
+    const macosDir = path.join(contentsPath, "MacOS");
+    const bundledElectronBinary = path.join(macosDir, electronBranding.productName);
+    if (!fs.existsSync(bundledElectronBinary)) {
+        const candidates = [
+            path.join(packager.info.framework.distMacOsAppName, "Contents", "MacOS", electronBranding.productName),
+            // npm may nest the workspace-only electron devDep under
+            // apps/desktop/node_modules (process.cwd() during pack), or hoist
+            // it to the repo root. Try the workspace-local install first, then
+            // the root hoist, so the fallback works under either layout.
+            path.join(process.cwd(), "node_modules", "electron", "dist", "Electron.app", "Contents", "MacOS", electronBranding.productName),
+            path.join(process.cwd(), "..", "..", "node_modules", "electron", "dist", "Electron.app", "Contents", "MacOS", electronBranding.productName),
+        ];
+        const sourceBinary = candidates.find(candidate => fs.existsSync(candidate));
+        if (sourceBinary == null) {
+            throw new Error("Electron binary missing from packaged app and Electron runtime: " + bundledElectronBinary);
+        }
+        await (0, promises_1.copyFile)(sourceBinary, bundledElectronBinary);
+        await (0, promises_1.chmod)(bundledElectronBinary, 0o755);
+    }
+    await Promise.all([
+        doRename(macosDir, electronBranding.productName, appPlist.CFBundleExecutable),
+        (0, builder_util_1.unlinkIfExists)(path.join(appOutDir, "LICENSE")),
+        (0, builder_util_1.unlinkIfExists)(path.join(appOutDir, "LICENSES.chromium.html")),
+    ]);`
+
+if (!fs.existsSync(electronMacPath)) {
+  console.warn(`[patch-electron-builder] skipped: ${electronMacPath} not found`)
+  process.exit(0)
+}
+
+const source = fs.readFileSync(electronMacPath, 'utf8')
+if (source.includes(marker)) {
+  console.log('[patch-electron-builder] macOS Electron binary fallback already applied')
+  process.exit(0)
+}
+
+if (!source.includes(needle)) {
+  console.warn('[patch-electron-builder] skipped: expected electronMac.js shape not found')
+  process.exit(0)
+}
+
+fs.writeFileSync(electronMacPath, source.replace(needle, replacement))
+console.log('[patch-electron-builder] applied macOS Electron binary fallback')

package/agent/apps/desktop/scripts/run-electron-builder.cjs

@@ -0,0 +1,57 @@
+"use strict"
+
+// Resolve electronDist at runtime (#38673, #47917): electron-builder 26.8.x can
+// re-unpack a broken Electron.app; reusing the installed dist dodges that.
+// npm workspace hoisting is non-deterministic — require.resolve finds electron
+// wherever it landed. Dist present → -c.electronDist=<abs>/dist; absent → let
+// electron-builder fetch via @electron/get (electronVersion + ELECTRON_MIRROR).
+
+const fs = require("node:fs")
+const path = require("node:path")
+const { spawnSync } = require("node:child_process")
+
+function electronDistDir() {
+  try {
+    return path.join(path.dirname(require.resolve("electron/package.json")), "dist")
+  } catch {
+    return null
+  }
+}
+
+function distBinary(dist) {
+  if (process.platform === "darwin") {
+    return path.join(dist, "Electron.app", "Contents", "MacOS", "Electron")
+  }
+  if (process.platform === "win32") {
+    return path.join(dist, "electron.exe")
+  }
+  return path.join(dist, "electron")
+}
+
+function electronBuilderCli() {
+  const pkgJson = require.resolve("electron-builder/package.json")
+  const bin = require(pkgJson).bin
+  const rel = typeof bin === "string" ? bin : bin["electron-builder"]
+  return path.join(path.dirname(pkgJson), rel)
+}
+
+const dist = electronDistDir()
+const args = []
+if (dist && fs.existsSync(distBinary(dist))) {
+  args.push(`-c.electronDist=${dist}`)
+} else {
+  console.warn(
+    "[run-electron-builder] no local electron dist; electron-builder will fetch " +
+      "via @electron/get (electronVersion + ELECTRON_MIRROR)."
+  )
+}
+args.push(...process.argv.slice(2))
+
+const result = spawnSync(process.execPath, [electronBuilderCli(), ...args], {
+  stdio: "inherit",
+})
+if (result.error) {
+  console.error(`[run-electron-builder] spawn failed: ${result.error.message}`)
+  process.exit(1)
+}
+process.exit(result.status == null ? 1 : result.status)

package/agent/apps/desktop/src/app/agents/index.tsx

@@ -3,8 +3,9 @@ import { type ReactNode, useEffect, useMemo, useState } from 'react'
 
 import { useElapsedSeconds } from '@/components/chat/activity-timer'
 import { ActivityTimerText } from '@/components/chat/activity-timer-text'
-import { BrailleSpinner } from '@/components/ui/braille-spinner'
 import { FadeText } from '@/components/ui/fade-text'
+import { GlyphSpinner } from '@/components/ui/glyph-spinner'
+import { type Translations, useI18n } from '@/i18n'
 import { AlertCircle, CheckCircle2, Sparkles } from '@/lib/icons'
 import { useEnterAnimation } from '@/lib/use-enter-animation'
 import { cn } from '@/lib/utils'
@@ -21,11 +22,11 @@ import { OverlayView } from '../overlays/overlay-view'
 
 // Mirrors statusGlyph() in tool-fallback.tsx so subagent rows speak the
 // same visual vocabulary as the chat tool blocks.
-function statusGlyph(status: SubagentStatus): ReactNode {
+function statusGlyph(status: SubagentStatus, a: Translations['agents']): ReactNode {
   if (status === 'running' || status === 'queued') {
     return (
-      <BrailleSpinner
-        ariaLabel="Running"
+      <GlyphSpinner
+        ariaLabel={a.running}
         className="size-3.5 shrink-0 text-[0.95rem] text-muted-foreground/80"
         spinner="breathe"
       />
@@ -33,10 +34,10 @@ function statusGlyph(status: SubagentStatus): ReactNode {
   }
 
   if (status === 'failed' || status === 'interrupted') {
-    return <AlertCircle aria-label="Failed" className="size-3.5 shrink-0 text-destructive" />
+    return <AlertCircle aria-label={a.failed} className="size-3.5 shrink-0 text-destructive" />
   }
 
-  return <CheckCircle2 aria-label="Done" className="size-3.5 shrink-0 text-emerald-600/85 dark:text-emerald-400/85" />
+  return <CheckCircle2 aria-label={a.done} className="size-3.5 shrink-0 text-emerald-600/85 dark:text-emerald-400/85" />
 }
 
 const STREAM_TONE: Record<SubagentStreamEntry['kind'], string> = {
@@ -75,6 +76,7 @@ interface AgentsViewProps {
 }
 
 export function AgentsView({ onClose }: AgentsViewProps) {
+  const { t } = useI18n()
   const activeSessionId = useStore($activeSessionId)
   const subagentsBySession = useStore($subagentsBySession)
 
@@ -87,61 +89,61 @@ export function AgentsView({ onClose }: AgentsViewProps) {
 
   return (
     <OverlayView
-      closeLabel="Close agents"
+      closeLabel={t.agents.close}
       contentClassName="px-5 pt-5 pb-4 sm:px-6"
       onClose={onClose}
       rootClassName="mx-auto max-w-3xl"
     >
       <header className="mb-3 shrink-0">
-        <h2 className="text-sm font-semibold text-foreground">Spawn tree</h2>
-        <p className="text-xs text-muted-foreground/80">Live subagent activity for the current turn.</p>
+        <h2 className="text-sm font-semibold text-foreground">{t.agents.title}</h2>
+        <p className="text-xs text-muted-foreground/80">{t.agents.subtitle}</p>
       </header>
       <SubagentTree tree={tree} />
     </OverlayView>
   )
 }
 
-const fmtDuration = (seconds?: number) => {
+const fmtDuration = (seconds: number | undefined, a: Translations['agents']) => {
   if (!seconds || seconds <= 0) {
     return ''
   }
 
   if (seconds < 60) {
-    return `${seconds.toFixed(1)}s`
+    return a.durationSeconds(seconds.toFixed(1))
   }
 
   const m = Math.floor(seconds / 60)
   const s = Math.round(seconds % 60)
 
-  return `${m}m ${s}s`
+  return a.durationMinutes(m, s)
 }
 
-const fmtTokens = (value?: number) => {
+const fmtTokens = (value: number | undefined, a: Translations['agents']) => {
   if (!value) {
     return ''
   }
 
-  return value >= 1000 ? `${(value / 1000).toFixed(1)}k tok` : `${value} tok`
+  return value >= 1000 ? a.tokensK((value / 1000).toFixed(1)) : a.tokens(value)
 }
 
-const fmtAge = (updatedAt: number, nowMs: number) => {
+const fmtAge = (updatedAt: number, nowMs: number, a: Translations['agents']) => {
   const s = Math.max(0, Math.round((nowMs - updatedAt) / 1000))
 
   if (s < 2) {
-    return 'now'
+    return a.ageNow
   }
 
   if (s < 60) {
-    return `${s}s ago`
+    return a.ageSeconds(s)
   }
 
   const m = Math.floor(s / 60)
 
   if (m < 60) {
-    return `${m}m ago`
+    return a.ageMinutes(m)
   }
 
-  return `${Math.floor(m / 60)}h ago`
+  return a.ageHours(Math.floor(m / 60))
 }
 
 const flatten = (nodes: readonly SubagentNode[]): SubagentNode[] =>
@@ -149,7 +151,7 @@ const flatten = (nodes: readonly SubagentNode[]): SubagentNode[] =>
 
 interface RootGroup {
   id: string
-  label: string
+  delegationIndex: number
   nodes: SubagentNode[]
   taskCount: number
 }
@@ -173,18 +175,19 @@ function groupDelegations(roots: readonly SubagentNode[]): RootGroup[] {
 
     if (node.taskCount > 1) {
       n += 1
-      groups.push({ id: `delegation-${n}`, label: `Delegation ${n}`, nodes: [node], taskCount: node.taskCount })
+      groups.push({ id: `delegation-${n}`, delegationIndex: n, nodes: [node], taskCount: node.taskCount })
 
       continue
     }
 
-    groups.push({ id: node.id, label: '', nodes: [node], taskCount: node.taskCount })
+    groups.push({ id: node.id, delegationIndex: 0, nodes: [node], taskCount: node.taskCount })
   }
 
   return groups
 }
 
 function SubagentTree({ tree }: { tree: SubagentNode[] }) {
+  const { t } = useI18n()
   const flat = useMemo(() => flatten(tree), [tree])
   const groups = useMemo(() => groupDelegations(tree), [tree])
   const [nowMs, setNowMs] = useState(() => Date.now())
@@ -210,21 +213,19 @@ function SubagentTree({ tree }: { tree: SubagentNode[] }) {
     return (
       <div className="grid place-items-center gap-3 py-12 text-center">
         <Sparkles className="size-6 text-muted-foreground/60" />
-        <p className="text-sm font-medium text-foreground/90">No live subagents</p>
-        <p className="max-w-md text-xs leading-relaxed text-muted-foreground/75">
-          When a turn delegates work, child agents stream their progress here.
-        </p>
+        <p className="text-sm font-medium text-foreground/90">{t.agents.emptyTitle}</p>
+        <p className="max-w-md text-xs leading-relaxed text-muted-foreground/75">{t.agents.emptyDesc}</p>
       </div>
     )
   }
 
   const summary = [
-    `${flat.length} ${flat.length === 1 ? 'agent' : 'agents'}`,
-    active > 0 ? `${active} active` : '',
-    failed > 0 ? `${failed} failed` : '',
-    tools > 0 ? `${tools} tools` : '',
-    files > 0 ? `${files} files` : '',
-    tokens > 0 ? fmtTokens(tokens) : '',
+    t.agents.agentsCount(flat.length),
+    active > 0 ? t.agents.activeCount(active) : '',
+    failed > 0 ? t.agents.failedCount(failed) : '',
+    tools > 0 ? t.agents.toolsCount(tools) : '',
+    files > 0 ? t.agents.filesCount(files) : '',
+    tokens > 0 ? fmtTokens(tokens, t.agents) : '',
     cost > 0 ? `$${cost.toFixed(2)}` : ''
   ].filter(Boolean)
 
@@ -243,6 +244,8 @@ function SubagentTree({ tree }: { tree: SubagentNode[] }) {
 }
 
 function DelegationGroup({ group, nowMs }: { group: RootGroup; nowMs: number }) {
+  const { t } = useI18n()
+
   if (group.nodes.length === 1 && group.taskCount <= 1) {
     return <SubagentRow node={group.nodes[0]!} nowMs={nowMs} />
   }
@@ -252,8 +255,9 @@ function DelegationGroup({ group, nowMs }: { group: RootGroup; nowMs: number })
   return (
     <section className="grid min-w-0 gap-3">
       <p className="text-[0.66rem] font-medium uppercase tracking-wider text-muted-foreground/70">
-        {group.label} <span className="text-muted-foreground/50">·</span> {group.nodes.length} workers
-        {activeWorkers > 0 ? <span className="text-primary/85"> · {activeWorkers} active</span> : null}
+        {group.delegationIndex > 0 ? t.agents.delegation(group.delegationIndex) : ''}{' '}
+        <span className="text-muted-foreground/50">·</span> {t.agents.workers(group.nodes.length)}
+        {activeWorkers > 0 ? <span className="text-primary/85"> · {t.agents.workersActive(activeWorkers)}</span> : null}
       </p>
       <div className="grid min-w-0 gap-4">
         {group.nodes.map(node => (
@@ -275,6 +279,7 @@ function StreamLine({
   parentRunning: boolean
   rowKey: string
 }) {
+  const { t } = useI18n()
   const enterRef = useEnterAnimation(parentRunning, `subagent-stream:${rowKey}`)
   const isMono = entry.kind === 'tool'
   const tone = entry.isError ? 'text-destructive' : STREAM_TONE[entry.kind]
@@ -285,8 +290,8 @@ function StreamLine({
       <span className={cn('min-w-0 flex-1 wrap-anywhere', tone, isMono && 'font-mono text-[0.69rem]')}>
         {entry.text}
         {active ? (
-          <BrailleSpinner
-            ariaLabel="Streaming"
+          <GlyphSpinner
+            ariaLabel={t.agents.streaming}
             className="ml-1 inline-block size-2.5 align-middle text-muted-foreground/70"
             spinner="breathe"
           />
@@ -297,6 +302,7 @@ function StreamLine({
 }
 
 function SubagentRow({ node, depth = 0, nowMs }: { node: SubagentNode; depth?: number; nowMs: number }) {
+  const { t } = useI18n()
   const running = node.status === 'running' || node.status === 'queued'
   const elapsed = useElapsedSeconds(running, `subagent:${node.id}`)
 
@@ -317,10 +323,10 @@ function SubagentRow({ node, depth = 0, nowMs }: { node: SubagentNode; depth?: n
 
   const subtitle = [
     node.model,
-    fmtDuration(durationSeconds),
-    node.toolCount ? `${node.toolCount} tools` : '',
-    fmtTokens((node.inputTokens ?? 0) + (node.outputTokens ?? 0)),
-    `updated ${fmtAge(node.updatedAt, nowMs)}`
+    fmtDuration(durationSeconds, t.agents),
+    node.toolCount ? t.agents.toolsCount(node.toolCount) : '',
+    fmtTokens((node.inputTokens ?? 0) + (node.outputTokens ?? 0), t.agents),
+    t.agents.updatedAgo(fmtAge(node.updatedAt, nowMs, t.agents))
   ].filter(Boolean)
 
   return (
@@ -331,7 +337,7 @@ function SubagentRow({ node, depth = 0, nowMs }: { node: SubagentNode; depth?: n
         onClick={() => setOpen(v => !v)}
         type="button"
       >
-        <span className="mt-0.5 flex h-[1.1rem] shrink-0 items-center">{statusGlyph(node.status)}</span>
+        <span className="mt-0.5 flex h-[1.1rem] shrink-0 items-center">{statusGlyph(node.status, t.agents)}</span>
         <span className="flex min-w-0 flex-1 flex-col gap-0.5">
           <span
             className={cn(
@@ -351,7 +357,7 @@ function SubagentRow({ node, depth = 0, nowMs }: { node: SubagentNode; depth?: n
       </button>
 
       {visibleRows.length > 0 ? (
-        <div className="grid min-w-0 gap-1 pl-6">
+        <div className="grid min-w-0 gap-1 pl-6" data-selectable-text="true">
           {visibleRows.map((entry, i) => (
             <StreamLine
               active={running && i === visibleRows.length - 1}
@@ -365,8 +371,10 @@ function SubagentRow({ node, depth = 0, nowMs }: { node: SubagentNode; depth?: n
       ) : null}
 
       {open && fileLines.length > 0 ? (
-        <div className="grid min-w-0 gap-0.5 pl-6">
-          <p className="text-[0.58rem] font-medium tracking-wider text-muted-foreground/60 uppercase">Files</p>
+        <div className="grid min-w-0 gap-0.5 pl-6" data-selectable-text="true">
+          <p className="text-[0.58rem] font-medium tracking-wider text-muted-foreground/60 uppercase">
+            {t.agents.files}
+          </p>
           {fileLines.slice(0, 8).map(line => (
             <p className="wrap-break-word font-mono text-[0.67rem] leading-relaxed text-muted-foreground/80" key={line}>
               {line}
@@ -374,7 +382,7 @@ function SubagentRow({ node, depth = 0, nowMs }: { node: SubagentNode; depth?: n
           ))}
           {fileLines.length > 8 ? (
             <p className="font-mono text-[0.67rem] leading-relaxed text-muted-foreground/65">
-              +{fileLines.length - 8} more files
+              {t.agents.moreFiles(fileLines.length - 8)}
             </p>
           ) : null}
         </div>