@workerdeck/ui 2.9.0 → 2.10.0

package/src/components/prompt-area/use-prompt-area-keydown.ts

@@ -10,6 +10,7 @@ import {
   revertChipAtIndex,
   replaceTextRange,
   toggleMarkdownWrap,
+  chipPlainText,
 } from './prompt-area-engine.ts'
 import {
   getListContext,
@@ -138,7 +139,7 @@ export function usePromptAreaKeydown({
         if (s.type === 'text') {
           targetOffset += s.text.length
         } else {
-          targetOffset += s.trigger.length + s.displayText.length
+          targetOffset += chipPlainText(s).length
         }
       }
       targetOffset += result.revertedText.length

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

@@ -12,6 +12,7 @@ import {
   resolveChip,
   resolveText,
   truncateSegmentsToLength,
+  chipPlainText,
 } from './prompt-area-engine.ts'
 import {
   autoFormatListPrefix,
@@ -223,6 +224,9 @@ export function usePromptArea({
           chip.dataset.chipTrigger = seg.trigger
           chip.dataset.chipValue = seg.value
           chip.dataset.chipDisplay = seg.displayText
+          if (seg.sigil !== undefined) {
+            chip.dataset.chipSigil = seg.sigil
+          }
           if (seg.data !== undefined) {
             const json = safeJsonStringify(seg.data)
             if (json) {
@@ -236,7 +240,7 @@ export function usePromptArea({
           const chipStyle = triggerConfig?.chipStyle ?? 'pill'
           chip.dataset.chipStyle = chipStyle
           chip.className = cn('prompt-area-chip', chipStyle === 'inline' && 'prompt-area-chip--inline', triggerConfig?.chipClassName)
-          chip.textContent = `${seg.trigger}${seg.displayText}`
+          chip.textContent = chipPlainText(seg)
           chip.setAttribute('role', 'button')
           chip.setAttribute('tabindex', '-1')
           editor.appendChild(chip)
@@ -598,10 +602,12 @@ export function usePromptArea({
       }
 
       const displayText = activeTrigger.config.onSelect?.(suggestion) ?? suggestion.label
+      const options = activeTrigger.config.chipOptions?.(suggestion)
 
       const chipData = {
         value: suggestion.value,
         displayText: displayText || suggestion.label,
+        ...(options?.sigil !== undefined ? { sigil: options.sigil } : {}),
         data: suggestion.data,
       }
 
@@ -616,7 +622,7 @@ export function usePromptArea({
         }, 0)
         return
       }
-      const result = resolveChip(segments, activeTrigger, chipData)
+      const result = resolveChip(segments, activeTrigger, chipData, options?.trailingText)
 
       onChange(result.segments)
       renderSegmentsToDOM(result.segments)

package/src/components/terminal/StatusLine.tsx

@@ -75,10 +75,11 @@ export function TerminalStatusLine({
     )
   }
 
-  if (state.totalCostUsd > 0) {
+  const costUsd = state.costUsd ?? (state.totalCostUsd || undefined)
+  if (costUsd !== undefined && costUsd > 0) {
     parts.push(
       <Ink key="cost" tone="faint">
-        {formatCost(state.totalCostUsd)}
+        {formatCost(costUsd)}
       </Ink>,
     )
   }

package/src/components/terminal/items.tsx

@@ -3,6 +3,7 @@ import type { TranscriptItem } from '@workerdeck/react'
 import { compactionText, formatBytes, formatCost, formatDuration, toolInputPreview } from '../../lib/format.ts'
 import { isMutatingTool } from '../../lib/tool-icon.ts'
 import { usePulse } from '../agent/pulse.tsx'
+import { PromptTokenText } from '../agent/PromptTokenText.tsx'
 import { BookmarkAction, CopyAction, WithActions } from './affordances.tsx'
 import { TerminalDiff } from './diff.tsx'
 import { TerminalMarkdown } from './markdown.tsx'
@@ -46,7 +47,7 @@ export function UserRow({ item }: { item: Extract<TranscriptItem, { kind: 'user'
         {item.text
           ? item.text.split('\n').map((line, index) => (
               <Row key={index} glyph={index === 0 ? PROMPT_GLYPH : undefined} glyphTone="dim" tone="fg">
-                {line || ' '}
+                {line ? <PromptTokenText text={line} /> : ' '}
               </Row>
             ))
           : null}
@@ -270,7 +271,7 @@ export function TurnResultRow({ item }: { item: Extract<TranscriptItem, { kind:
   return (
     <div>
       <Row tone={item.isError ? 'red' : 'faint'}>
-        {item.isError ? item.subtype : 'done'} · {formatDuration(item.durationMs)} · {formatCost(item.totalCostUsd)}
+        {item.isError ? item.subtype : 'done'} · {formatDuration(item.durationMs)} · {formatCost(item.costUsd ?? item.totalCostUsd)}
       </Row>
       {item.errors?.map((message, index) => (
         <Row key={index} tone="red">

package/src/index.ts

@@ -63,6 +63,8 @@ export { Band, Blank, Ink, Row, type RowProps, type Tone } from './components/te
 export { CopyAction, WithActions, useAffordances, type TerminalAffordances } from './components/terminal/affordances.tsx'
 export { FileLinkProvider, useFileLinks, type FileLinkHandle, type FileLinkOpener } from './components/terminal/file-link.tsx'
 export { parseFileLink, type FileLink } from './lib/file-link.ts'
+export { matchPath, type PathHit, type PathMatch } from './lib/path-match.ts'
+export { usePathLinks, resolveAgainstCwd } from './components/agent/use-path-links.ts'
 export { Conversation, ConversationContent, ConversationScrollButton, type ConversationProps } from './components/agent/Conversation.tsx'
 export { Message, MessageContent, type MessageProps } from './components/agent/Message.tsx'
 export {
@@ -119,7 +121,7 @@ export { SkillsDialog, type SkillsDialogProps } from './components/agent/SkillsD
 export { HostFilesDialog, type HostFilesDialogProps } from './components/agent/HostFilesDialog.tsx'
 export { SessionList, SessionListItem, type SessionListItemProps, type SessionListProps } from './components/agent/SessionList.tsx'
 export { SessionBrowser, rowShapeClass, type SessionBrowserProps } from './components/agent/SessionBrowser.tsx'
-export { SessionItem, type SessionItemProps } from './components/agent/SessionItem.tsx'
+export { SessionItem, type SelectModifiers, type SessionItemProps } from './components/agent/SessionItem.tsx'
 export { SessionStatusIcon } from './components/agent/SessionStatusIcon.tsx'
 export { EngineIcon, engineMark, vendorMarkClass, vendorTextClass } from './components/agent/EngineIcon.tsx'
 export { type Step, StepRow, StepToggle, runningSteps, sessionSteps } from './components/agent/SessionSteps.tsx'

package/src/lib/path-match.ts

@@ -0,0 +1,51 @@
+// One path segment: no whitespace, no separator, none of the characters that bracket a path in
+// prose. `:` is out because it introduces `:line`.
+const SEG = '[^\\s:\'"`()\\[\\]{}<>|]+'
+
+// The first segment of a relative path additionally cannot start with `@`: in an `@file` mention
+// (`@_docs/BACKLOG.md`) the `@` is the mention's sigil, not part of the name.
+const HEAD = '[^\\s:\'"`()\\[\\]{}<>|@,]+'
+
+// The match must start at a token boundary, never consumed into the path: unanchored,
+// `@_docs/BACKLOG.md` matched the suffix `/BACKLOG.md` and opened at the filesystem root.
+const PATH_PATTERN = new RegExp(`(?:^|[\\s'"\`([{<@,])((?:\\.\\.?)?(?:/${SEG})+|${HEAD}(?:/${SEG})+)(?::(\\d+))?`)
+
+const FILE_PATTERN = /^([\w.@-]+\.[A-Za-z0-9]{1,10})(?::(\d+))?$/
+
+const TRAILING = /[.,;:!?)\]}'"`]+$/
+
+const FILENAME = /\.[A-Za-z0-9]{1,10}$/
+
+export type PathHit = { path: string; line?: number }
+
+export type PathMatch = PathHit & {
+  // How much of the inspected text the path accounted for, the "mostly a path" test the hover makes.
+  length: number
+}
+
+export function matchPath(text: string | null | undefined, inCode = false): PathMatch | undefined {
+  const source = text ?? ''
+  const match = PATH_PATTERN.exec(source)
+  if (!match) {
+    return inCode ? matchFilename(source) : undefined
+  }
+  const path = match[1]!.replace(TRAILING, '')
+  if (!path.includes('/') || path.endsWith('/')) {
+    return undefined
+  }
+  const rooted = path.startsWith('/') || path.startsWith('./') || path.startsWith('../')
+  if (!rooted && !FILENAME.test(path)) {
+    return undefined
+  }
+  const line = match[2] ? Number(match[2]) : undefined
+  return { path, line, length: path.length + (match[2] ? match[2].length + 1 : 0) }
+}
+
+function matchFilename(text: string): PathMatch | undefined {
+  const hit = FILE_PATTERN.exec(text.trim())
+  if (!hit) {
+    return undefined
+  }
+  const line = hit[2] ? Number(hit[2]) : undefined
+  return { path: hit[1]!, line, length: hit[0].length }
+}

package/src/lib/session-cost.ts

@@ -0,0 +1,65 @@
+import {
+  type ByModel,
+  type CostBreakdown,
+  type TokenUsage,
+  UNPRICED_WARN_SHARE,
+  canonicalModel,
+  costOf,
+  costOfByModel,
+  rateFor,
+  totalTokens,
+} from '@workerdeck/protocol'
+
+export type SessionCostRow = {
+  model: string
+  usage: TokenUsage
+  tokens: number
+  costUsd: number | undefined
+}
+
+export type SessionCost = {
+  displayUsd: number | undefined
+  computedUsd: number | undefined
+  reportedUsd: number | undefined
+  breakdown: CostBreakdown
+  rows: SessionCostRow[]
+  unpricedShare: number
+  showUnpricedWarning: boolean
+  // Both figures price the same tokens, one by the engine and one by us, so a gap is the thing worth reading.
+  gapUsd: number | undefined
+}
+
+export type SessionCostInput = {
+  costUsd?: number
+  totalCostUsd?: number
+  usageByModel?: ByModel
+}
+
+const GAP_SHARE = 0.02
+
+export function sessionCost(input: SessionCostInput): SessionCost {
+  const byModel = input.usageByModel ?? {}
+  const breakdown = costOfByModel(byModel)
+  const computedUsd = input.costUsd ?? (breakdown.unpriced || Object.keys(byModel).length === 0 ? undefined : breakdown.total)
+  const reportedUsd = input.totalCostUsd
+  const rows = Object.entries(byModel)
+    .map(([model, usage]) => ({
+      model: canonicalModel(model),
+      usage,
+      tokens: totalTokens(usage),
+      costUsd: rateFor(model) ? costOf(usage, model).total : undefined,
+    }))
+    .sort((a, b) => b.tokens - a.tokens)
+  const gap = computedUsd !== undefined && reportedUsd !== undefined ? reportedUsd - computedUsd : undefined
+  const worthShowing = gap !== undefined && Math.abs(gap) > Math.max(0.01, GAP_SHARE * Math.max(computedUsd ?? 0, reportedUsd ?? 0))
+  return {
+    displayUsd: computedUsd ?? reportedUsd,
+    computedUsd,
+    reportedUsd,
+    breakdown,
+    rows,
+    unpricedShare: breakdown.unpricedShare,
+    showUnpricedWarning: breakdown.unpricedShare > UNPRICED_WARN_SHARE,
+    gapUsd: worthShowing ? gap : undefined,
+  }
+}