@workerdeck/ui 2.8.0 → 2.10.0

package/src/components/agent/StatusBar.tsx

@@ -200,7 +200,7 @@ export function StatusBar({
       ) : null}
       {controls ? <span className="self-center">{controls}</span> : null}
       <span className="flex-1" />
-      <span className="font-mono text-label text-fg-3">{formatCost(state.totalCostUsd)}</span>
+      <span className="font-mono text-label text-fg-3">{formatCost(state.costUsd ?? (state.totalCostUsd || undefined))}</span>
       {actions ? <span className="self-center">{actions}</span> : null}
     </div>
   )

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

@@ -17,7 +17,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>

package/src/components/agent/UsageDialog.tsx

@@ -1,31 +1,111 @@
-import type { ProfileEngine, UsageWindowRow } from '@workerdeck/protocol'
+import type { ByModel, ProfileEngine, ProfileSpend, UsageWindowRow } from '@workerdeck/protocol'
+import { PRICING_NOTE } 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
+  spend?: ProfileSpend
   updatedAt?: number
   open: boolean
   onOpenChange: (open: boolean) => void
   className?: string
 }
 
+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.gapUsd !== undefined ? (
+        <p className="text-label text-fg-4">
+          {engine === 'claude' ? 'Claude Code' : 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,
+  spend,
   updatedAt,
   open,
   onOpenChange,
   className,
 }: UsageDialogProps) {
   const now = useMinuteClock(open)
+  const cost = sessionCost({ costUsd, totalCostUsd, usageByModel })
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className={className}>
@@ -50,10 +130,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">{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/UsageMeters.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import type { UsageWindowRow } from '@workerdeck/protocol'
+import { usageIsStale, type UsageWindowRow } from '@workerdeck/protocol'
 import { RotateCcw } from 'lucide-react'
 import { cn } from '../../lib/utils.ts'
 import { formatAgoPrecise, formatCountdown, formatRateLimitWindowLong, rateLimitWindowSeconds } from '../../lib/format.ts'
@@ -33,6 +33,9 @@ export function UsageMeters({ windows, now, className }: { windows: UsageWindowR
 function UsageMeter({ window, now }: { window: UsageWindowRow; now: number }) {
   const { key: windowKey, info, updatedAt, inferredReset } = window
   const utilization = info.utilization ?? 0
+  // Drawn differently rather than hidden: this is still the best answer anyone has, it is just not a claim about
+  // right now, and a stale reading asserted as current is how a number from two days ago passes for the truth.
+  const stale = usageIsStale(window, now)
   const resetsAtMs = info.resetsAt !== undefined ? info.resetsAt * 1000 : undefined
   const duration = rateLimitWindowSeconds(windowKey)
   const remaining = resetsAtMs !== undefined ? (resetsAtMs - now) / 1000 : undefined
@@ -44,13 +47,18 @@ function UsageMeter({ window, now }: { window: UsageWindowRow; now: number }) {
     <div>
       <div className="flex items-baseline justify-between gap-3">
         <span className="truncate text-body-sm text-fg-1">{formatRateLimitWindowLong(windowKey)}</span>
-        <span className={cn('shrink-0 font-mono text-body-sm font-medium', info.status === 'rejected' ? 'text-danger' : 'text-fg-1')}>
+        <span
+          className={cn(
+            'shrink-0 font-mono text-body-sm font-medium',
+            info.status === 'rejected' ? 'text-danger' : stale ? 'text-fg-4' : 'text-fg-1',
+          )}
+        >
           {utilization.toFixed(0)}% used
         </span>
       </div>
       <div className="relative mt-2 h-2 rounded-full bg-border">
         <div
-          className={cn('h-full rounded-full', meterTintClass(utilization))}
+          className={cn('h-full rounded-full', meterTintClass(utilization), stale && 'opacity-40')}
           style={{ width: `${Math.min(100, Math.max(2, utilization))}%` }}
         />
         {pace !== undefined ? (
@@ -71,7 +79,12 @@ function UsageMeter({ window, now }: { window: UsageWindowRow; now: number }) {
         {info.isUsingOverage ? <span className="text-warning">overage</span> : null}
         {info.status === 'rejected' ? <span className="text-danger">limit reached</span> : null}
         {inferredReset ? <span>window reset · nothing reported since</span> : null}
-        {updatedAt && !inferredReset ? <span>{formatAgoPrecise(updatedAt, now)}</span> : null}
+        {updatedAt && !inferredReset ? (
+          <span className={cn(stale && 'text-warning')}>
+            {stale ? 'last reported ' : ''}
+            {formatAgoPrecise(updatedAt, now)}
+          </span>
+        ) : null}
       </div>
     </div>
   )

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

@@ -0,0 +1,154 @@
+import type { SkillInfo, SlashCommandInfo } from '@workerdeck/protocol'
+
+export type ClientCommand = {
+  name: string
+  description: string
+  argumentHint?: string
+  // Selecting the row populates the composer with `/name ` instead of resolving to a chip, so the
+  // argument is typed before anything is submitted.
+  requiresArgs?: boolean
+  // True when the command consumed the input. False hands the text back to the engine, which is how
+  // `/model` with no argument still reaches a CLI that implements it natively.
+  run: (args: string) => boolean
+}
+
+export type ComposerRow =
+  | { kind: 'command'; name: string; description?: string; argumentHint?: string; aliases?: string[] }
+  | { kind: 'client'; name: string; description?: string; argumentHint?: string; command: ClientCommand }
+  | { kind: 'skill'; name: string; label: string; description?: string; enabled: boolean; scope?: string; skill: SkillInfo }
+
+const KIND_ORDER: Record<ComposerRow['kind'], number> = { command: 0, client: 1, skill: 2 }
+
+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 {
+  return skillToken(skill) + skillTrailingText(skill)
+}
+
+export function mergeComposerRows(sources: {
+  commands?: readonly SlashCommandInfo[]
+  clientCommands?: readonly ClientCommand[]
+  skills?: readonly SkillInfo[]
+}): ComposerRow[] {
+  const rows: ComposerRow[] = []
+  const engineNames = new Set<string>()
+  for (const command of sources.commands ?? []) {
+    const name = cleanCommandName(command.name)
+    if (engineNames.has(name)) {
+      continue
+    }
+    engineNames.add(name)
+    for (const alias of command.aliases ?? []) {
+      engineNames.add(cleanCommandName(alias))
+    }
+    rows.push({ kind: 'command', name, description: command.description, argumentHint: command.argumentHint, aliases: command.aliases })
+  }
+  for (const command of sources.clientCommands ?? []) {
+    if (engineNames.has(command.name)) {
+      continue
+    }
+    rows.push({ kind: 'client', name: command.name, description: command.description, argumentHint: command.argumentHint, command })
+  }
+  for (const skill of sources.skills ?? []) {
+    rows.push({
+      kind: 'skill',
+      name: skill.name,
+      label: skill.displayName ?? skill.name,
+      description: skill.shortDescription ?? skill.description,
+      enabled: skill.enabled,
+      scope: skill.scope,
+      skill,
+    })
+  }
+  return rows
+}
+
+function haystacks(row: ComposerRow): string[] {
+  if (row.kind === 'skill') {
+    return [row.name, row.label, ...row.name.split(/[-:_]/)]
+  }
+  return [row.name, ...(row.kind === 'command' ? (row.aliases ?? []) : []), ...row.name.split(':')]
+}
+
+export function matchScore(query: string, candidates: readonly string[]): number {
+  const needle = query.toLowerCase()
+  const lowered = candidates.map((s) => s.toLowerCase())
+  if (lowered.some((h) => h.startsWith(needle))) {
+    return 2
+  }
+  return lowered.some((h) => h.includes(needle)) ? 1 : 0
+}
+
+export function rankComposerRows(query: string, rows: readonly ComposerRow[]): ComposerRow[] {
+  const scored: Array<{ score: number; index: number; row: ComposerRow }> = []
+  rows.forEach((row, index) => {
+    if (row.kind === 'skill' && !row.enabled) {
+      return
+    }
+    const score = matchScore(query, haystacks(row))
+    if (score > 0) {
+      scored.push({ score, index, row })
+    }
+  })
+  scored.sort((a, b) => b.score - a.score || KIND_ORDER[a.row.kind] - KIND_ORDER[b.row.kind] || a.index - b.index)
+  return scored.map(({ row }) => row)
+}
+
+export function matchClientCommand(text: string, commands: readonly ClientCommand[]): { command: ClientCommand; args: string } | undefined {
+  const match = /^\/([\w:-]+)[ \t]*([\s\S]*)$/.exec(text.trim())
+  if (!match) {
+    return undefined
+  }
+  const command = commands.find((c) => c.name === match[1])
+  return command ? { command, args: match[2]!.trim() } : undefined
+}
+
+// The serializable projection a native host (the VS Code QuickPick) renders. `insertText` is resolved here
+// so no second surface reimplements skillPrompt or the leading slash.
+export type ComposerCommandRow = {
+  kind: ComposerRow['kind']
+  name: string
+  label: string
+  description?: string
+  scope?: string
+  enabled: boolean
+  insertText: string
+}
+
+export function composerCommandRows(rows: readonly ComposerRow[]): ComposerCommandRow[] {
+  return rows.map((row) =>
+    row.kind === 'skill'
+      ? {
+          kind: row.kind,
+          name: row.name,
+          label: row.label,
+          description: row.description,
+          scope: row.scope,
+          enabled: row.enabled,
+          insertText: skillPrompt(row.skill),
+        }
+      : {
+          kind: row.kind,
+          name: row.name,
+          label: `/${row.name}`,
+          description: row.description,
+          enabled: true,
+          insertText: `/${row.name} `,
+        },
+  )
+}

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

@@ -1,40 +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({
@@ -119,11 +106,5 @@ export function usePathLinks({
 }
 
 export function resolveAgainstCwd(path: string, cwd: string | undefined): string {
-  if (path.startsWith('/')) {
-    return path
-  }
-  if (!cwd) {
-    return path
-  }
-  return `${cwd.replace(/\/$/, '')}/${path.replace(/^\.\//, '')}`
+  return parseFileLink(path, cwd)?.path ?? path
 }

package/src/components/prompt-area/clipboard-helpers.ts

@@ -6,8 +6,16 @@
  * clipboard I/O concerns alongside its DOM traversal and chip-accessor helpers.
  */
 import type { Segment, ChipSegment } from './types.ts'
-import { chipNodeToSegment, getChipDisplay, getChipTrigger, getSelectionRange, isChipElement, isHTMLElement } from './dom-helpers.ts'
-import { mergeAdjacentTextSegments } from './prompt-area-engine.ts'
+import {
+  chipNodeToSegment,
+  getChipDisplay,
+  getChipSigil,
+  getChipTrigger,
+  getSelectionRange,
+  isChipElement,
+  isHTMLElement,
+} from './dom-helpers.ts'
+import { chipPlainText, mergeAdjacentTextSegments } from './prompt-area-engine.ts'
 import { getTextLengthInRange } from './cursor-helpers.ts'
 
 function isRecord(value: unknown): value is Record<string, unknown> {
@@ -63,7 +71,7 @@ export function serializeFragmentToPlainText(fragment: DocumentFragment): string
       text += value
     },
     onChip: (node) => {
-      text += (getChipTrigger(node) ?? '') + (getChipDisplay(node) ?? '')
+      text += (getChipSigil(node) ?? getChipTrigger(node) ?? '') + (getChipDisplay(node) ?? '')
     },
     onBreak: () => {
       text += '\n'
@@ -129,6 +137,7 @@ export function parseSegmentsFromClipboard(json: string): Segment[] | null {
           trigger: item.trigger,
           value: item.value,
           displayText: item.displayText,
+          ...(typeof item.sigil === 'string' ? { sigil: item.sigil } : {}),
           ...(item.data !== undefined ? { data: item.data } : {}),
           ...(item.autoResolved ? { autoResolved: true } : {}),
         }
@@ -173,7 +182,7 @@ export function insertSegmentsAtCursor(currentSegments: Segment[], pastedSegment
 
   for (const seg of currentSegments) {
     if (seg.type === 'chip') {
-      const chipLen = seg.trigger.length + seg.displayText.length
+      const chipLen = chipPlainText(seg).length
       if (offset >= cursorOffset) {
         insertOnce()
       }