@workerdeck/ui 2.9.0 → 2.10.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

@@ -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/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/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({

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()
       }

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

@@ -139,6 +139,13 @@ export function getChipData(node: Node): unknown {
   return safeJsonParse(raw)
 }
 
+export function getChipSigil(node: Node): string | undefined {
+  if (!isChipElement(node)) {
+    return undefined
+  }
+  return node.dataset.chipSigil
+}
+
 /**
  * Length of a chip's plain-text representation (`trigger + displayText`).
  *
@@ -148,7 +155,7 @@ export function getChipData(node: Node): unknown {
  * `textContent` for resilience against externally-mutated nodes.
  */
 export function chipNodeTextLength(node: HTMLElement): number {
-  const trigger = node.dataset.chipTrigger ?? ''
+  const trigger = node.dataset.chipSigil ?? node.dataset.chipTrigger ?? ''
   const display = node.dataset.chipDisplay ?? node.textContent ?? ''
   return trigger.length + display.length
 }
@@ -174,6 +181,7 @@ export function chipNodeToSegment(node: Node): ChipSegment | null {
     return null
   }
 
+  const sigil = getChipSigil(node)
   const data = getChipData(node)
   const autoResolved = getChipAutoResolved(node)
 
@@ -182,6 +190,7 @@ export function chipNodeToSegment(node: Node): ChipSegment | null {
     trigger,
     value,
     displayText,
+    ...(sigil !== undefined ? { sigil } : {}),
     ...(data !== undefined ? { data } : {}),
     ...(autoResolved ? { autoResolved: true } : {}),
   }

package/src/components/prompt-area/index.ts

@@ -7,4 +7,13 @@ export { PromptArea } from './prompt-area.tsx'
 export { usePromptAreaState } from './use-prompt-area-state.ts'
 export { commandTrigger, mentionTrigger, hashtagTrigger, launchTrigger } from './trigger-presets.ts'
 export { segmentsToPlainText, plainTextToSegments, isSegmentsEmpty, getChipsByTrigger } from './segment-helpers.ts'
-export type { PromptAreaHandle, PromptAreaProps, Segment, ChipSegment, TextSegment, TriggerConfig, TriggerSuggestion } from './types.ts'
+export type {
+  ChipOptions,
+  PromptAreaHandle,
+  PromptAreaProps,
+  Segment,
+  ChipSegment,
+  TextSegment,
+  TriggerConfig,
+  TriggerSuggestion,
+} from './types.ts'

package/src/components/prompt-area/prompt-area-engine.ts

@@ -6,9 +6,16 @@ import type { Segment, ChipSegment, TriggerConfig, TriggerPosition, ActiveTrigge
 
 // Serialization
 
+/**
+ * A chip's plain-text form: `{sigil ?? trigger}{displayText}` (e.g., "@Alice").
+ */
+export function chipPlainText(seg: ChipSegment): string {
+  return `${seg.sigil ?? seg.trigger}${seg.displayText}`
+}
+
 /**
  * Converts an array of segments to a plain text string.
- * Chips are represented as `{trigger}{displayText}` (e.g., "@Alice").
+ * Chips are represented by {@link chipPlainText}.
  */
 export function segmentsToPlainText(segments: Segment[]): string {
   return segments
@@ -16,7 +23,7 @@ export function segmentsToPlainText(segments: Segment[]): string {
       if (seg.type === 'text') {
         return seg.text
       }
-      return `${seg.trigger}${seg.displayText}`
+      return chipPlainText(seg)
     })
     .join('')
 }
@@ -45,7 +52,7 @@ export function truncateSegmentsToLength(segments: Segment[], maxLength: number)
   const result: Segment[] = []
   let length = 0
   for (const seg of segments) {
-    const segLength = seg.type === 'text' ? seg.text.length : seg.trigger.length + seg.displayText.length
+    const segLength = seg.type === 'text' ? seg.text.length : chipPlainText(seg).length
     if (length + segLength <= maxLength) {
       result.push(seg)
       length += segLength
@@ -195,7 +202,8 @@ export function detectActiveTrigger(text: string, cursorPos: number, triggers: T
 export function resolveChip(
   segments: Segment[],
   activeTrigger: ActiveTrigger,
-  chip: { value: string; displayText: string; data?: unknown; autoResolved?: boolean },
+  chip: { value: string; displayText: string; sigil?: string; data?: unknown; autoResolved?: boolean },
+  trailingText = ' ',
 ): { segments: Segment[]; cursorOffset: number } {
   const triggerStart = activeTrigger.startOffset
   const triggerEnd = triggerStart + 1 + activeTrigger.query.length // +1 for trigger char
@@ -205,7 +213,7 @@ export function resolveChip(
 
   for (const seg of segments) {
     if (seg.type === 'chip') {
-      const chipText = `${seg.trigger}${seg.displayText}`
+      const chipText = chipPlainText(seg)
       const chipStart = offset
       const chipEnd = offset + chipText.length
 
@@ -239,16 +247,17 @@ export function resolveChip(
           trigger: activeTrigger.config.char,
           value: chip.value,
           displayText: chip.displayText,
+          ...(chip.sigil !== undefined ? { sigil: chip.sigil } : {}),
           ...(chip.data !== undefined ? { data: chip.data } : {}),
           ...(chip.autoResolved ? { autoResolved: true } : {}),
         }
         newSegments.push(newChip)
 
-        // Add trailing space after chip, then any remaining text
+        // Add the trailing text (a space by default) after the chip, then any remaining text
         if (afterText) {
-          newSegments.push({ type: 'text', text: ' ' + afterText.replace(/^\s/, '') })
+          newSegments.push({ type: 'text', text: trailingText + afterText.replace(/^\s/, '') })
         } else {
-          newSegments.push({ type: 'text', text: ' ' })
+          newSegments.push({ type: 'text', text: trailingText })
         }
       }
 
@@ -266,14 +275,14 @@ export function resolveChip(
     if (seg.type === 'text') {
       runningOffset += seg.text.length
     } else {
-      runningOffset += seg.trigger.length + seg.displayText.length
+      runningOffset += chipPlainText(seg).length
       if (seg.value === chip.value && seg.displayText === chip.displayText && seg.trigger === activeTrigger.config.char) {
         lastChipEndOffset = runningOffset
       }
     }
   }
-  // +1 accounts for the trailing space after the chip
-  const cursorOffset = lastChipEndOffset === -1 ? runningOffset : lastChipEndOffset + 1
+  // The caret lands after the chip and its trailing text
+  const cursorOffset = lastChipEndOffset === -1 ? runningOffset : lastChipEndOffset + trailingText.length
 
   return { segments: merged, cursorOffset }
 }
@@ -302,7 +311,7 @@ export function resolveText(
 
   for (const seg of segments) {
     if (seg.type === 'chip') {
-      const chipEnd = offset + `${seg.trigger}${seg.displayText}`.length
+      const chipEnd = offset + chipPlainText(seg).length
       // A trigger range can never overlap a chip - chips are atomic - so a chip
       // is either wholly before or wholly after, and is kept either way.
       if (chipEnd <= triggerStart || offset >= triggerEnd) {
@@ -377,7 +386,7 @@ export function revertChipAtIndex(segments: Segment[], index: number): { segment
     return null
   }
 
-  const revertedText = `${seg.trigger}${seg.displayText}`
+  const revertedText = chipPlainText(seg)
   const result = [...segments.slice(0, index), { type: 'text' as const, text: revertedText }, ...segments.slice(index + 1)]
   return { segments: mergeAdjacentTextSegments(result), revertedText }
 }
@@ -491,7 +500,7 @@ export function replaceTextRange(segments: Segment[], start: number, end: number
 
   for (const seg of segments) {
     if (seg.type === 'chip') {
-      const chipText = `${seg.trigger}${seg.displayText}`
+      const chipText = chipPlainText(seg)
       const chipStart = offset
       const chipEnd = offset + chipText.length
 

package/src/components/prompt-area/types.ts

@@ -23,6 +23,12 @@ export type ChipSegment = {
   value: string
   /** The display text shown in the chip */
   displayText: string
+  /**
+   * The character the chip serialises and renders with, when it differs from
+   * `trigger`. The trigger is the menu the chip came from; the sigil is the
+   * token the host parses. Unset, the trigger character is the sigil.
+   */
+  sigil?: string
   /** Optional data payload attached to the chip */
   data?: unknown
   /**
@@ -74,6 +80,11 @@ export type TriggerSuggestion = {
   data?: unknown
 }
 
+export type ChipOptions = {
+  sigil?: string
+  trailingText?: string
+}
+
 /**
  * Configuration for a trigger character.
  */
@@ -113,6 +124,15 @@ export type TriggerConfig = {
    * `onChipAdd` does not fire either.
    */
   insertAsText?: (suggestion: TriggerSuggestion) => string | undefined
+  /**
+   * For 'dropdown' mode: per-suggestion overrides for the chip a selection
+   * resolves to. `sigil` replaces the trigger character in the chip's text and
+   * serialisation (a `/` menu inserting a `$name` token); `trailingText` is
+   * the editable text placed after the chip in place of the default single
+   * space (it is inserted verbatim, so include the leading space). Return
+   * undefined for the plain chip.
+   */
+  chipOptions?: (suggestion: TriggerSuggestion) => ChipOptions | undefined
   /**
    * For 'callback' and 'launch' modes: called when the trigger is activated.
    * Receives the full input text and cursor position. For 'launch' it fires on