@workerdeck/ui 2.9.0 → 2.11.0

package/src/components/agent/Transcript.tsx

@@ -10,6 +10,7 @@ import { subagentItems, terminalBlocks, type ToolCallItem } from '../terminal/bl
 import { taskBrief, taskBusy } from '../terminal/tool-run.ts'
 import { type TranscriptRow } from './transcript-rows.ts'
 import { TranscriptRows } from './TranscriptRows.tsx'
+import { SkillNamesProvider } from './PromptTokenText.tsx'
 import { TerminalSurface } from '../terminal/surface.tsx'
 import { ROW_GAP, TranscriptVariantProvider, type TranscriptDensity, type TranscriptVariant } from './transcript-variant.tsx'
 
@@ -136,90 +137,93 @@ export function Transcript({
     }
     return [...fold(0, boundary), { key: 'recap' as const, line: recap }, ...fold(boundary, items.length)]
   }, [items, boundary, recap, terminal, brief])
+  const skillNames = useMemo(() => state.skills?.map((skill) => skill.name), [state.skills])
   return (
     <TranscriptVariantProvider value={variant}>
-      <Conversation className={cn(replaying && 'invisible', className)}>
-        <ConversationContent className={cn(terminal && 'gap-0 p-0')}>
-          <TerminalShell active={terminal} fontSize={fontSize} lineHeight={lineHeight} affordances={affordances}>
-            {frame ? (
-              frameTask === undefined && !replaying ? (
-                <div className={cn(terminal ? 'term-row text-fg-4' : 'p-4 text-body-sm text-fg-4')}>
-                  This sub-agent's work is not in this transcript.
-                </div>
-              ) : null
-            ) : items.length === 0 && state.status !== 'starting' ? (
-              emptyState !== undefined ? (
-                emptyState
-              ) : (
-                <SessionEmptyState
-                  cwd={state.cwd}
-                  hasCommands={!!state.commands?.length}
-                  hasSkills={!!state.skills?.some((s) => s.enabled)}
-                  canBrowseFiles={canBrowseFiles}
-                />
-              )
-            ) : null}
-            {frame && frameTask === undefined && !replaying ? null : (
-              <TranscriptRows
-                rows={rows}
-                boundary={boundary}
-                since={catchUp?.since}
-                terminal={terminal}
-                replaying={replaying}
-                stickyPrompt={!frame && stickyPrompt}
-                gap={gap}
-                fontSize={fontSize}
-                lineHeight={lineHeight}
-                items={items}
-                pendingApprovals={state.pendingApprovals}
-                scrubber={scrubber}
-                bookmarks={frame ? undefined : bookmarks}
-                affordances={affordances}
-                fileUrl={fileUrl}
-                attachmentUrl={attachmentUrl}
-                hostImage={hostImage}
-                jumpToRecapRef={jumpToRecapRef}
-                repinRef={repinRef}
-                reveal={frame ? undefined : reveal}
-                frameParentId={frame?.parentToolUseId}
-                onOpenSubagent={frame ? undefined : onOpenSubagent}
-              />
-            )}
-            {(frame ? frameTask !== undefined && taskBusy(frameTask, items) : showLoader(state)) ? (
-              terminal ? (
-                <>
-                  {state.items.length > 0 ? <div className="term-blank" aria-hidden /> : null}
-                  <WorkingRow
-                    label={state.status === 'starting' ? 'Starting…' : 'Working…'}
-                    startedAt={runStartedAt}
-                    tokens={state.contextUsage?.totalTokens}
+      <SkillNamesProvider names={skillNames}>
+        <Conversation className={cn(replaying && 'invisible', className)}>
+          <ConversationContent className={cn(terminal && 'gap-0 p-0')}>
+            <TerminalShell active={terminal} fontSize={fontSize} lineHeight={lineHeight} affordances={affordances}>
+              {frame ? (
+                frameTask === undefined && !replaying ? (
+                  <div className={cn(terminal ? 'term-row text-fg-4' : 'p-4 text-body-sm text-fg-4')}>
+                    This sub-agent's work is not in this transcript.
+                  </div>
+                ) : null
+              ) : items.length === 0 && state.status !== 'starting' ? (
+                emptyState !== undefined ? (
+                  emptyState
+                ) : (
+                  <SessionEmptyState
+                    cwd={state.cwd}
+                    hasCommands={!!state.commands?.length}
+                    hasSkills={!!state.skills?.some((s) => s.enabled)}
+                    canBrowseFiles={canBrowseFiles}
                   />
-                </>
-              ) : (
-                <Loader label={state.status === 'starting' ? 'Starting session…' : undefined} />
-              )
-            ) : null}
-          </TerminalShell>
-        </ConversationContent>
-        <ConversationScrollButton />
-        {replaying ? (
-          <div
-            data-slot="transcript-hold"
-            aria-hidden
-            className="wd-hold-appear visible pointer-events-none absolute inset-0 overflow-hidden"
-          >
-            <div className={cn('mx-auto w-full max-w-[var(--wd-transcript-max-width)]', !terminal && 'px-4 py-4')}>
-              {terminal ? (
-                <TerminalSurface fontSize={fontSize} lineHeight={lineHeight} affordances={false} bleed="1ch" className="term-transcript">
-                  <WorkingRow label="Loading…" />
-                </TerminalSurface>
-              ) : (
-                <Loader label="Loading session…" />
+                )
+              ) : null}
+              {frame && frameTask === undefined && !replaying ? null : (
+                <TranscriptRows
+                  rows={rows}
+                  boundary={boundary}
+                  since={catchUp?.since}
+                  terminal={terminal}
+                  replaying={replaying}
+                  stickyPrompt={!frame && stickyPrompt}
+                  gap={gap}
+                  fontSize={fontSize}
+                  lineHeight={lineHeight}
+                  items={items}
+                  pendingApprovals={state.pendingApprovals}
+                  scrubber={scrubber}
+                  bookmarks={frame ? undefined : bookmarks}
+                  affordances={affordances}
+                  fileUrl={fileUrl}
+                  attachmentUrl={attachmentUrl}
+                  hostImage={hostImage}
+                  jumpToRecapRef={jumpToRecapRef}
+                  repinRef={repinRef}
+                  reveal={frame ? undefined : reveal}
+                  frameParentId={frame?.parentToolUseId}
+                  onOpenSubagent={frame ? undefined : onOpenSubagent}
+                />
               )}
+              {(frame ? frameTask !== undefined && taskBusy(frameTask, items) : showLoader(state)) ? (
+                terminal ? (
+                  <>
+                    {state.items.length > 0 ? <div className="term-blank" aria-hidden /> : null}
+                    <WorkingRow
+                      label={state.status === 'starting' ? 'Starting…' : 'Working…'}
+                      startedAt={runStartedAt}
+                      tokens={state.contextUsage?.totalTokens}
+                    />
+                  </>
+                ) : (
+                  <Loader label={state.status === 'starting' ? 'Starting session…' : undefined} />
+                )
+              ) : null}
+            </TerminalShell>
+          </ConversationContent>
+          <ConversationScrollButton />
+          {replaying ? (
+            <div
+              data-slot="transcript-hold"
+              aria-hidden
+              className="wd-hold-appear visible pointer-events-none absolute inset-0 overflow-hidden"
+            >
+              <div className={cn('mx-auto w-full max-w-[var(--wd-transcript-max-width)]', !terminal && 'px-4 py-4')}>
+                {terminal ? (
+                  <TerminalSurface fontSize={fontSize} lineHeight={lineHeight} affordances={false} bleed="1ch" className="term-transcript">
+                    <WorkingRow label="Loading…" />
+                  </TerminalSurface>
+                ) : (
+                  <Loader label="Loading session…" />
+                )}
+              </div>
             </div>
-          </div>
-        ) : null}
-      </Conversation>
+          ) : null}
+        </Conversation>
+      </SkillNamesProvider>
     </TranscriptVariantProvider>
   )
 }

package/src/components/agent/TranscriptItemView.tsx

@@ -10,6 +10,7 @@ import { Response } from './Response.tsx'
 import { ToolCallCard } from './ToolCallCard.tsx'
 import { Row } from '../terminal/row.tsx'
 import { TerminalItemView } from '../terminal/TerminalTranscript.tsx'
+import { peerLabel } from '../terminal/items.tsx'
 
 function TurnResultRow({ item }: { item: Extract<TranscriptItem, { kind: 'turn_result' }> }) {
   return (
@@ -17,7 +18,7 @@ function TurnResultRow({ item }: { item: Extract<TranscriptItem, { kind: 'turn_r
       <div className="flex items-center gap-2">
         <div className="h-px flex-1 bg-border" />
         <span className={cn('font-mono text-label', item.isError ? 'text-danger' : 'text-fg-4')}>
-          {item.isError ? item.subtype : 'turn done'} · {formatDuration(item.durationMs)} · {formatCost(item.totalCostUsd)}
+          {item.isError ? item.subtype : 'turn done'} · {formatDuration(item.durationMs)} · {formatCost(item.costUsd ?? item.totalCostUsd)}
         </span>
         <div className="h-px flex-1 bg-border" />
       </div>
@@ -69,6 +70,7 @@ export function TranscriptItemView({
     case 'user': {
       return (
         <Message from="user">
+          {item.origin ? <div className="wd-peer-origin text-xs text-muted-foreground">{peerLabel(item.origin)}</div> : null}
           {item.attachments?.length ? <SentAttachments attachments={item.attachments} attachmentUrl={attachmentUrl} /> : null}
           {item.text ? (
             <MessageContent>

package/src/components/agent/TranscriptRows.tsx

@@ -6,14 +6,15 @@ import type { PermissionRequest } from '@workerdeck/protocol'
 import type { TranscriptItem } from '@workerdeck/react'
 import { cn } from '../../lib/utils.ts'
 import { resolveAffordances, type TerminalAffordances } from '../terminal/affordances.tsx'
-import { ToolRunRow } from '../terminal/items.tsx'
+import { RunRow } from '../terminal/items.tsx'
 import { parentOf } from '../terminal/blocks.ts'
 import { briefPx, estimateBlockPx } from '../terminal/height.ts'
+import { PeerNamesProvider } from '../terminal/peer-names.tsx'
 import { TerminalScrubber } from '../terminal/scrubber.tsx'
 import { Scrubber } from './Scrubber.tsx'
 import { gapBefore, positionInRow, rowIndexForItem, type TranscriptRow } from './transcript-rows.ts'
 import { useHeightEpoch } from './use-height-epoch.ts'
-import { useTranscriptJumps } from './use-transcript-jumps.ts'
+import { absorbScrollerResize, useTranscriptJumps } from './use-transcript-jumps.ts'
 import { BriefRow, TaskRow } from '../terminal/TerminalTranscript.tsx'
 import { RecapRow, TranscriptItemView } from './TranscriptItemView.tsx'
 
@@ -167,9 +168,10 @@ export function TranscriptRows({
       if (height === last) {
         return
       }
+      const difference = height - last
       last = height
       if (stick.state.isAtBottom) {
-        void stick.scrollToBottom('instant')
+        absorbScrollerResize(stick, difference)
       }
     })
     observer.observe(scrollElement)
@@ -318,64 +320,66 @@ export function TranscriptRows({
 
   return (
     <div ref={rowsRef} data-slot="transcript-rows" className="relative w-full" style={{ height: virtualizer.getTotalSize() }}>
-      {virtualizer.getVirtualItems().map((virtualRow) => {
-        const row = rows[virtualRow.index]
-        const gapClass = virtualRow.index > 0 && (!terminal || gapBefore(rows, virtualRow.index)) ? gap.className : undefined
-        const content =
-          'run' in row ? (
-            <div className={cn(read(boundary, row.index) && 'opacity-45')}>
-              <ToolRunRow items={row.run} />
-            </div>
-          ) : 'item' in row ? (
-            <div className={cn(read(boundary, row.index) && 'opacity-45', nestedClass(row.item, frameParentId))}>
-              <TranscriptItemView
-                item={row.item}
-                fileUrl={fileUrl}
-                attachmentUrl={attachmentUrl}
-                hostImage={hostImage}
+      <PeerNamesProvider items={items}>
+        {virtualizer.getVirtualItems().map((virtualRow) => {
+          const row = rows[virtualRow.index]
+          const gapClass = virtualRow.index > 0 && (!terminal || gapBefore(rows, virtualRow.index)) ? gap.className : undefined
+          const content =
+            'run' in row ? (
+              <div className={cn(read(boundary, row.index) && 'opacity-45')}>
+                <RunRow items={row.run} />
+              </div>
+            ) : 'item' in row ? (
+              <div className={cn(read(boundary, row.index) && 'opacity-45', nestedClass(row.item, frameParentId))}>
+                <TranscriptItemView
+                  item={row.item}
+                  fileUrl={fileUrl}
+                  attachmentUrl={attachmentUrl}
+                  hostImage={hostImage}
+                  terminal={terminal}
+                />
+              </div>
+            ) : 'text' in row && row.key === 'brief' ? (
+              <BriefRow text={row.text} terminal={terminal} />
+            ) : 'line' in row ? (
+              <RecapRow line={row.line} since={since} terminal={terminal} />
+            ) : (
+              <div className={cn(read(boundary, row.index) && 'opacity-45')}>
+                <TaskRow block={row} fileUrl={fileUrl} onOpenSubagent={onOpenSubagent} />
+              </div>
+            )
+          if (stickyPrompt && 'item' in row && row.item.kind === 'user' && parentOf(row.item) === undefined) {
+            const next = promptRows.find((index) => index > virtualRow.index)
+            const laneEnd = next === undefined ? virtualizer.getTotalSize() : (measurements[next]?.start ?? virtualRow.start)
+            return (
+              <StickyPromptLane
+                key={row.key}
+                top={virtualRow.start}
+                height={Math.max(laneEnd - virtualRow.start, 0)}
+                gapClass={gapClass}
+                gapPx={gap.px}
                 terminal={terminal}
+                scrollRoot={scrollElement}
+                index={virtualRow.index}
+                measureRef={virtualizer.measureElement}
+                head={terminal ? content : promptHeadText(row.item)}
+                content={content}
               />
-            </div>
-          ) : 'text' in row && row.key === 'brief' ? (
-            <BriefRow text={row.text} terminal={terminal} />
-          ) : 'line' in row ? (
-            <RecapRow line={row.line} since={since} terminal={terminal} />
-          ) : (
-            <div className={cn(read(boundary, row.index) && 'opacity-45')}>
-              <TaskRow block={row} fileUrl={fileUrl} onOpenSubagent={onOpenSubagent} />
-            </div>
-          )
-        if (stickyPrompt && 'item' in row && row.item.kind === 'user' && parentOf(row.item) === undefined) {
-          const next = promptRows.find((index) => index > virtualRow.index)
-          const laneEnd = next === undefined ? virtualizer.getTotalSize() : (measurements[next]?.start ?? virtualRow.start)
+            )
+          }
           return (
-            <StickyPromptLane
+            <div
               key={row.key}
-              top={virtualRow.start}
-              height={Math.max(laneEnd - virtualRow.start, 0)}
-              gapClass={gapClass}
-              gapPx={gap.px}
-              terminal={terminal}
-              scrollRoot={scrollElement}
-              index={virtualRow.index}
-              measureRef={virtualizer.measureElement}
-              head={terminal ? content : promptHeadText(row.item)}
-              content={content}
-            />
+              ref={virtualizer.measureElement}
+              data-index={virtualRow.index}
+              className={cn('absolute inset-x-0 top-0', gapClass)}
+              style={{ transform: `translateY(${virtualRow.start}px)` }}
+            >
+              {content}
+            </div>
           )
-        }
-        return (
-          <div
-            key={row.key}
-            ref={virtualizer.measureElement}
-            data-index={virtualRow.index}
-            className={cn('absolute inset-x-0 top-0', gapClass)}
-            style={{ transform: `translateY(${virtualRow.start}px)` }}
-          >
-            {content}
-          </div>
-        )
-      })}
+        })}
+      </PeerNamesProvider>
       {scrubber && scrollElement?.parentElement
         ? createPortal(
             terminal ? (

package/src/components/agent/UsageDialog.tsx

@@ -1,37 +1,130 @@
-import type { ProfileEngine, UsageWindowRow } from '@workerdeck/protocol'
+import type { ByModel, PricingTable, ProfileEngine, ProfileSpend, UsageWindowRow } from '@workerdeck/protocol'
+import { PRICING_NOTE, pricingAgeNote } from '@workerdeck/protocol'
 import { Badge } from '../ui/Badge.tsx'
 import { Dialog, DialogBody, DialogContent, DialogHeader } from '../ui/Dialog.tsx'
-import { formatAgoPrecise, formatCost } from '../../lib/format.ts'
+import { formatAgoPrecise, formatCost, formatTokens } from '../../lib/format.ts'
+import { type SessionCost, sessionCost } from '../../lib/session-cost.ts'
 import { UsageMeters, useMinuteClock } from './UsageMeters.tsx'
 
 export interface UsageDialogProps {
   rateLimits: UsageWindowRow[]
   subscriptionType?: string
   engine: ProfileEngine
-  totalCostUsd: number
+  totalCostUsd?: number
+  costUsd?: number
+  usageByModel?: ByModel
+  pricing?: PricingTable
+  spend?: ProfileSpend
   updatedAt?: number
   open: boolean
   onOpenChange: (open: boolean) => void
   className?: string
 }
 
+function engineLabel(engine: ProfileEngine): string {
+  return engine === 'claude' ? 'Claude Code' : engine
+}
+
+function Line({ label, value, tone }: { label: string; value: string; tone?: 'muted' }) {
+  return (
+    <div className="flex items-baseline justify-between gap-4">
+      <span className={tone === 'muted' ? 'text-label text-fg-4' : 'text-label text-fg-3'}>{label}</span>
+      <span className={`font-mono text-body-sm ${tone === 'muted' ? 'text-fg-4' : 'text-fg-1'}`}>{value}</span>
+    </div>
+  )
+}
+
+function CostEvidence({ cost, engine }: { cost: SessionCost; engine: ProfileEngine }) {
+  const { breakdown, rows } = cost
+  if (rows.length === 0) {
+    return <Line label="This session has cost" value={formatCost(cost.displayUsd)} />
+  }
+  return (
+    <div className="space-y-3">
+      <div className="flex items-baseline justify-between gap-4">
+        <span className="text-label text-fg-3">This session has cost</span>
+        <span className="font-mono text-body text-fg-1">{formatCost(cost.displayUsd)}</span>
+      </div>
+      <div className="space-y-1 border-t border-border pt-2">
+        <Line label="input" value={formatCost(breakdown.input)} tone="muted" />
+        <Line label="output" value={formatCost(breakdown.output)} tone="muted" />
+        <Line label="cache write" value={formatCost(breakdown.cacheWrite)} tone="muted" />
+        <Line label="cache read" value={formatCost(breakdown.cacheRead)} tone="muted" />
+      </div>
+      <div className="space-y-1 border-t border-border pt-2">
+        {rows.map((row) => (
+          <div key={row.model} className="flex items-baseline justify-between gap-4">
+            <span className="truncate text-label text-fg-4">{row.model}</span>
+            <span className="shrink-0 font-mono text-label text-fg-4">
+              {formatTokens(row.tokens)} · {row.costUsd === undefined ? 'no rate' : formatCost(row.costUsd)}
+            </span>
+          </div>
+        ))}
+      </div>
+      {cost.showUnpricedWarning ? (
+        <p className="text-label text-warning">
+          {Math.round(cost.unpricedShare * 100)}% of these tokens ran on a model with no bundled rate, so the total is an understatement
+          rather than an estimate.
+        </p>
+      ) : null}
+      {cost.unknownBasisModels.length > 0 ? (
+        <p className="text-label text-warning">
+          {engineLabel(engine)} matched no rate table of its own to {cost.unknownBasisModels.join(', ')}, so the figure it reports for those
+          tokens is a guess rather than a rate.
+        </p>
+      ) : null}
+      {cost.gapUsd !== undefined ? (
+        <p className="text-label text-fg-4">
+          {engineLabel(engine)} reports {formatCost(cost.reportedUsd)} for the same tokens.
+        </p>
+      ) : null}
+    </div>
+  )
+}
+
+function ProfileSpendSection({ spend }: { spend: ProfileSpend }) {
+  const { subscription } = spend
+  return (
+    <div className="mt-4 space-y-1 border-t border-border pt-3">
+      <Line label="This profile, last 7 days" value={formatCost(spend.weekUsd)} />
+      <Line label="Last 30 days" value={formatCost(spend.monthUsd)} tone="muted" />
+      {subscription ? (
+        <p className="pt-1 text-label text-fg-4">
+          {formatMultiple(subscription.ratio)} the {formatCost(subscription.weeklyShareUsd)} weekly share of your{' '}
+          {formatCost(subscription.monthlyUsd)} a month. A subscription is a flat fee, so this is leverage, not a bill.
+        </p>
+      ) : null}
+    </div>
+  )
+}
+
+function formatMultiple(ratio: number): string {
+  return ratio >= 10 ? `${Math.round(ratio)}x` : `${ratio.toFixed(1)}x`
+}
+
 export function UsageDialog({
   rateLimits,
   subscriptionType,
   engine,
   totalCostUsd,
+  costUsd,
+  usageByModel,
+  pricing,
+  spend,
   updatedAt,
   open,
   onOpenChange,
   className,
 }: UsageDialogProps) {
   const now = useMinuteClock(open)
+  const cost = sessionCost({ costUsd, totalCostUsd, usageByModel, pricing })
+  const ageNote = pricingAgeNote(now)
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className={className}>
         <DialogHeader
           title="Usage"
-          description={engine === 'claude' ? 'Claude Code' : engine}
+          description={engineLabel(engine)}
           actions={
             subscriptionType ? (
               <Badge variant="accent" className="mt-0.5 shrink-0 capitalize">
@@ -50,10 +143,11 @@ export function UsageDialog({
           ) : (
             <UsageMeters windows={rateLimits} now={now} />
           )}
-          <div className="mt-5 flex items-baseline justify-between gap-4 border-t border-border pt-3">
-            <span className="text-label text-fg-3">This session has cost</span>
-            <span className="font-mono text-body-sm text-fg-1">{formatCost(totalCostUsd)}</span>
+          <div className="mt-5 border-t border-border pt-3">
+            <CostEvidence cost={cost} engine={engine} />
           </div>
+          {spend ? <ProfileSpendSection spend={spend} /> : null}
+          <p className="mt-3 text-label text-fg-4">{ageNote ? `${PRICING_NOTE} ${ageNote}` : PRICING_NOTE}</p>
           {updatedAt ? <p className="mt-2 text-label text-fg-4">Updated {formatAgoPrecise(updatedAt, now)}</p> : null}
         </DialogBody>
       </DialogContent>

package/src/components/agent/composer-commands.ts

@@ -23,9 +23,21 @@ export function cleanCommandName(name: string): string {
   return name.replace(/\s*\(MCP\)$/i, '')
 }
 
+// Codex's own mention token, which its system prompt names and its runner maps to a skill input item.
+export function skillToken(skill: SkillInfo): string {
+  return `$${skill.name}`
+}
+
+// What follows the `$name` chip as editable text: the default prompt with the token taken out, or
+// nothing. Always space-terminated so typing continues from a clean boundary.
+export function skillTrailingText(skill: SkillInfo): string {
+  const token = skillToken(skill)
+  const rest = (skill.defaultPrompt ?? '').split(token).join(' ').replace(/\s+/g, ' ').trim()
+  return rest ? ` ${rest} ` : ' '
+}
+
 export function skillPrompt(skill: SkillInfo): string {
-  const base = skill.defaultPrompt?.trim() || `Use the ${skill.displayName ?? skill.name} skill:`
-  return /\s$/.test(base) ? base : base + ' '
+  return skillToken(skill) + skillTrailingText(skill)
 }
 
 export function mergeComposerRows(sources: {

package/src/components/agent/pulse.tsx

@@ -1,9 +1,57 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useSyncExternalStore } from 'react'
 
-export const PULSE_FRAMES = ['⋄', '◇', '◈', '◆'] as const
-export const PULSE_MS = 150
+export const PULSE_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'] as const
+export const PULSE_MS = 90
 
-export const PULSE_REST = PULSE_FRAMES[PULSE_FRAMES.length - 1]
+export const PULSE_REST = '⠿'
+
+const listeners = new Set<() => void>()
+let ticker: ReturnType<typeof setInterval> | undefined
+let current = PULSE_REST
+
+export function pulseFrameAt(now: number): string {
+  return PULSE_FRAMES[Math.floor(now / PULSE_MS) % PULSE_FRAMES.length]!
+}
+
+function tick(): void {
+  const next = pulseFrameAt(Date.now())
+  if (next === current) {
+    return
+  }
+  current = next
+  for (const listener of listeners) {
+    listener()
+  }
+}
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener)
+  if (ticker === undefined) {
+    current = pulseFrameAt(Date.now())
+    ticker = setInterval(tick, PULSE_MS)
+  }
+  return () => {
+    listeners.delete(listener)
+    if (listeners.size === 0 && ticker !== undefined) {
+      clearInterval(ticker)
+      ticker = undefined
+    }
+  }
+}
+
+function subscribeRest(): () => void {
+  return unsubscribeRest
+}
+
+function unsubscribeRest(): void {}
+
+function readFrame(): string {
+  return current
+}
+
+function readRest(): string {
+  return PULSE_REST
+}
 
 export function usePrefersReducedMotion(): boolean {
   const [reduced, setReduced] = useState(false)
@@ -23,16 +71,5 @@ export function usePrefersReducedMotion(): boolean {
 export function usePulse(animated: boolean): string {
   const reduced = usePrefersReducedMotion()
   const running = animated && !reduced
-  const [frame, setFrame] = useState(0)
-  useEffect(() => {
-    if (!running) {
-      return
-    }
-    const timer = setInterval(() => setFrame((f) => f + 1), PULSE_MS)
-    return () => clearInterval(timer)
-  }, [running])
-  if (!running) {
-    return PULSE_REST
-  }
-  return PULSE_FRAMES[frame % PULSE_FRAMES.length]!
+  return useSyncExternalStore(running ? subscribe : subscribeRest, running ? readFrame : readRest, readRest)
 }

package/src/components/agent/use-path-links.ts

@@ -1,41 +1,27 @@
 import { useEffect, type RefObject } from 'react'
 import { parseFileLink } from '../../lib/file-link.ts'
+import { matchPath, type PathHit } from '../../lib/path-match.ts'
 
-export type PathHit = { path: string; line?: number }
+export type { PathHit } from '../../lib/path-match.ts'
 
 const LINKISH = 'wd-path-link'
 
-const PATH_RE = /^(\/[^\s:'"`()[\]{}]+|[\w.@~-]+(?:\/[\w.@~-]+)+)(?::(\d+))?$/
-const FILE_RE = /^([\w.@-]+\.[A-Za-z0-9]{1,10})(?::(\d+))?$/
-
 const COVERAGE = 0.6
 
-export function matchPath(text: string, inCode: boolean): PathHit | undefined {
-  const trimmed = text.trim()
-  if (!trimmed || trimmed.endsWith('/')) {
-    return undefined
-  }
-  const hit = PATH_RE.exec(trimmed) ?? (inCode ? FILE_RE.exec(trimmed) : null)
-  if (!hit) {
-    return undefined
-  }
-  return { path: hit[1]!, line: hit[2] ? Number(hit[2]) : undefined }
-}
-
 function hitFor(element: HTMLElement | undefined): PathHit | undefined {
   if (!element) {
     return undefined
   }
   const inCode = element.closest('code') !== null
-  const text = element.textContent ?? ''
+  const text = element.textContent?.trim() ?? ''
   const hit = matchPath(text, inCode)
   if (!hit) {
     return undefined
   }
-  if (!inCode && hit.path.length < text.trim().length * COVERAGE) {
+  if (!inCode && hit.length < text.length * COVERAGE) {
     return undefined
   }
-  return hit
+  return { path: hit.path, line: hit.line }
 }
 
 export function usePathLinks({