@workerdeck/ui 0.23.0 → 1.0.0

package/src/lib/format.ts

@@ -1,96 +1,131 @@
 export function formatCost(usd: number | undefined): string {
-  if (usd === undefined || Number.isNaN(usd)) return '—'
-  if (usd === 0) return '$0.00'
-  if (usd < 0.01) return '<$0.01'
+  if (usd === undefined || Number.isNaN(usd)) {
+    return '—'
+  }
+  if (usd === 0) {
+    return '$0.00'
+  }
+  if (usd < 0.01) {
+    return '<$0.01'
+  }
   return `$${usd.toFixed(2)}`
 }
 
 export function formatDuration(ms: number): string {
-  if (ms < 1000) return `${Math.round(ms)}ms`
+  if (ms < 1000) {
+    return `${Math.round(ms)}ms`
+  }
   const s = ms / 1000
-  if (s < 60) return `${s.toFixed(1)}s`
+  if (s < 60) {
+    return `${s.toFixed(1)}s`
+  }
   const m = Math.floor(s / 60)
   return `${m}m ${Math.round(s % 60)}s`
 }
 
-/** Compact token count, Claude Code-style: 850 → "850", 359_000 → "359.0k", 1_200_000 → "1.2M". */
 export function formatTokens(tokens: number): string {
-  if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(1)}M`
-  if (tokens >= 1000) return `${(tokens / 1000).toFixed(1)}k`
+  if (tokens >= 1_000_000) {
+    return `${(tokens / 1_000_000).toFixed(1)}M`
+  }
+  if (tokens >= 1000) {
+    return `${(tokens / 1000).toFixed(1)}k`
+  }
   return String(Math.round(tokens))
 }
 
 export function formatBytes(bytes: number): string {
-  if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-  if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  if (bytes >= 1024 * 1024) {
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  }
+  if (bytes >= 1024) {
+    return `${(bytes / 1024).toFixed(1)} KB`
+  }
   return `${bytes} B`
 }
 
-/** Countdown to an epoch-ms deadline: "2h 18m", "12m", "<1m"; "now" once passed. */
 export function formatCountdown(untilEpochMs: number, now = Date.now()): string {
   const remaining = untilEpochMs - now
-  if (remaining <= 0) return 'now'
+  if (remaining <= 0) {
+    return 'now'
+  }
   const minutes = Math.ceil(remaining / 60_000)
-  if (minutes < 1) return '<1m'
-  if (minutes < 60) return `${minutes}m`
+  if (minutes < 1) {
+    return '<1m'
+  }
+  if (minutes < 60) {
+    return `${minutes}m`
+  }
   const days = Math.floor(minutes / (60 * 24))
-  if (days >= 1) return `${days}d ${Math.floor((minutes % (60 * 24)) / 60)}h`
+  if (days >= 1) {
+    return `${days}d ${Math.floor((minutes % (60 * 24)) / 60)}h`
+  }
   return `${Math.floor(minutes / 60)}h ${minutes % 60}m`
 }
 
 export function formatRelativeTime(epochMs: number | undefined, now = Date.now()): string {
-  if (!epochMs) return '—'
+  if (!epochMs) {
+    return '—'
+  }
   const diff = Math.max(0, now - epochMs)
   const s = Math.floor(diff / 1000)
-  if (s < 60) return 'just now'
+  if (s < 60) {
+    return 'just now'
+  }
   const m = Math.floor(s / 60)
-  if (m < 60) return `${m}m ago`
+  if (m < 60) {
+    return `${m}m ago`
+  }
   const h = Math.floor(m / 60)
-  if (h < 24) return `${h}h ago`
+  if (h < 24) {
+    return `${h}h ago`
+  }
   const d = Math.floor(h / 24)
   return `${d}d ago`
 }
 
-/**
- * Human label for a rate-limit window key, compact: 'five_hour' → "5h",
- * 'seven_day_opus' → "7d opus". The per-model suffix is an open set — the CLI
- * adds buckets as plans gain them — so it is rewritten rather than enumerated.
- */
 export function formatRateLimitWindow(key: string): string {
-  if (key === 'five_hour') return '5h'
-  if (key === 'seven_day') return '7d'
+  if (key === 'five_hour') {
+    return '5h'
+  }
+  if (key === 'seven_day') {
+    return '7d'
+  }
   const spaced = key.replaceAll('_', ' ')
   return key.startsWith('seven_day_') ? `7d ${spaced.slice('seven day '.length)}` : spaced
 }
 
-/** The same key spelled out, where there is room: 'five_hour' → "5-hour
- * session", 'seven_day_fable' → "Weekly · Fable". */
 export function formatRateLimitWindowLong(key: string): string {
-  if (key === 'five_hour') return '5-hour session'
-  if (key === 'seven_day') return 'Weekly'
-  if (key === 'seven_day_oauth_apps') return 'Weekly · apps'
+  if (key === 'five_hour') {
+    return '5-hour session'
+  }
+  if (key === 'seven_day') {
+    return 'Weekly'
+  }
+  if (key === 'seven_day_oauth_apps') {
+    return 'Weekly · apps'
+  }
   const capitalize = (s: string) => s.replace(/\b\w/g, (c) => c.toUpperCase())
-  if (!key.startsWith('seven_day_')) return capitalize(key.replaceAll('_', ' '))
+  if (!key.startsWith('seven_day_')) {
+    return capitalize(key.replaceAll('_', ' '))
+  }
   return `Weekly · ${capitalize(key.slice('seven_day_'.length).replaceAll('_', ' '))}`
 }
 
-/**
- * How long a rate-limit window is, in seconds — the denominator behind the pace
- * marker. Derived from the key rather than reported: the CLI sends a reset time
- * and a percentage, never a duration. `undefined` for a window whose key doesn't
- * say, and the marker is then simply not drawn rather than guessed.
- */
 export function rateLimitWindowSeconds(key: string): number | undefined {
-  if (key === 'five_hour') return 5 * 3600
-  if (key.startsWith('seven_day')) return 7 * 86_400
+  if (key === 'five_hour') {
+    return 5 * 3600
+  }
+  if (key.startsWith('seven_day')) {
+    return 7 * 86_400
+  }
   return undefined
 }
 
-/** "8 secs ago" / "3 mins ago" — a freshness line finer-grained than
- * {@link formatRelativeTime}, because a poll that just landed should say so. */
 export function formatAgoPrecise(epochMs: number, now = Date.now()): string {
   const seconds = Math.max(0, Math.floor((now - epochMs) / 1000))
-  if (seconds < 60) return `${seconds} sec${seconds === 1 ? '' : 's'} ago`
+  if (seconds < 60) {
+    return `${seconds} sec${seconds === 1 ? '' : 's'} ago`
+  }
   if (seconds < 3600) {
     const minutes = Math.floor(seconds / 60)
     return `${minutes} min${minutes === 1 ? '' : 's'} ago`
@@ -99,13 +134,13 @@ export function formatAgoPrecise(epochMs: number, now = Date.now()): string {
   return `${hours} hour${hours === 1 ? '' : 's'} ago`
 }
 
-/** Compact one-line preview of a tool input for card headers. */
 export function toolInputPreview(input: unknown, max = 80): string {
-  if (input === null || input === undefined) return ''
+  if (input === null || input === undefined) {
+    return ''
+  }
   if (typeof input === 'object') {
     const o = input as Record<string, unknown>
-    const primary =
-      o.command ?? o.file_path ?? o.path ?? o.url ?? o.pattern ?? o.query ?? o.description
+    const primary = o.command ?? o.file_path ?? o.path ?? o.url ?? o.pattern ?? o.query ?? o.description
     if (typeof primary === 'string') {
       return primary.length > max ? primary.slice(0, max - 1) + '…' : primary
     }
@@ -114,9 +149,6 @@ export function toolInputPreview(input: unknown, max = 80): string {
   return text.length > max ? text.slice(0, max - 1) + '…' : text
 }
 
-/** Families whose name isn't just a capitalised first letter, and how the
- * vendor writes the version after it. GPT is `GPT-5.6`; everyone else spaces
- * it. Anything unlisted is title-cased and spaced. */
 const MODEL_FAMILIES: Record<string, { name: string; joiner?: string }> = {
   gpt: { name: 'GPT', joiner: '-' },
   deepseek: { name: 'DeepSeek' },
@@ -128,53 +160,36 @@ const MODEL_FAMILIES: Record<string, { name: string; joiner?: string }> = {
   grok: { name: 'Grok' },
 }
 
-/**
- * The name a person says, from a wire model id:
- *
- * - `claude-opus-5[1m]` → "Opus 5"
- * - `claude-haiku-4-5-20251001` → "Haiku 4.5"
- * - `gpt-5.6-luna` → "GPT-5.6 Luna"
- * - `gemini-2.5-pro` → "Gemini 2.5 Pro"
- * - `o3-mini` → "o3 Mini"
- *
- * Three kinds of token after the family, because vendors mix them freely: a
- * **version** (`5`, `4-5`, `5.6` — joined with dots, since Anthropic splits what
- * OpenAI writes as one token), a **code name or tier** (`luna`, `codex`, `pro`,
- * `mini` — kept and capitalised, since it is often the only thing telling two
- * models apart), and a **snapshot date** (`20251001` — dropped; it is a build,
- * not a version).
- *
- * Anything genuinely unreadable falls back to the id: a wrong name is worse than
- * a raw one, which is at least true.
- *
- * The server has a narrower version of this (`friendlyModelName` in core's
- * `normalize.ts`) that derives Claude catalog names at authoring time. This one
- * is the *render-time* fallback for an id with no catalog row behind it — the
- * sidebar has only `SessionInfo.model` — so it has to cope with every vendor the
- * provider engine can reach, not just the CLI's own.
- */
 export function friendlyModel(id: string | undefined): string | undefined {
-  if (!id) return undefined
+  if (!id) {
+    return undefined
+  }
   const withoutVariant = id.split('[')[0] ?? id
   const parts = withoutVariant.toLowerCase().split('-').filter(Boolean)
-  if (parts[0] === 'claude') parts.shift()
+  if (parts[0] === 'claude') {
+    parts.shift()
+  }
   const familyToken = parts.shift()
-  if (!familyToken) return id
+  if (!familyToken) {
+    return id
+  }
   const family = MODEL_FAMILIES[familyToken]
   const name =
     family?.name ??
-    // OpenAI's reasoning series is lower-case by its own convention ('o3-mini'),
-    // and "O3" reads as a different product.
-    (/^o\d+$/.test(familyToken)
-      ? familyToken
-      : `${familyToken.charAt(0).toUpperCase()}${familyToken.slice(1)}`)
+    // OpenAI's reasoning series is lower-case by its own convention ('o3-mini'); "O3" reads as a different product.
+    (/^o\d+$/.test(familyToken) ? familyToken : `${familyToken.charAt(0).toUpperCase()}${familyToken.slice(1)}`)
 
   const version: string[] = []
   const words: string[] = []
   for (const part of parts) {
-    if (/^\d{8}$/.test(part)) continue
-    if (/^\d+(\.\d+)?$/.test(part)) version.push(part)
-    else words.push(`${part.charAt(0).toUpperCase()}${part.slice(1)}`)
+    if (/^\d{8}$/.test(part)) {
+      continue
+    }
+    if (/^\d+(\.\d+)?$/.test(part)) {
+      version.push(part)
+    } else {
+      words.push(`${part.charAt(0).toUpperCase()}${part.slice(1)}`)
+    }
   }
   const versioned = version.length > 0 ? `${name}${family?.joiner ?? ' '}${version.join('.')}` : name
   return [versioned, ...words].join(' ')

package/src/lib/plan-request.ts

@@ -0,0 +1,16 @@
+type PlanRequestLike = { toolName?: unknown; input?: unknown }
+
+export function planFromRequest(request: PlanRequestLike | null | undefined): string | undefined {
+  if (request?.toolName !== 'ExitPlanMode') {
+    return undefined
+  }
+  const input = request.input
+  if (input === null || typeof input !== 'object') {
+    return undefined
+  }
+  const plan = (input as { plan?: unknown }).plan
+  if (typeof plan !== 'string' || plan.trim().length === 0) {
+    return undefined
+  }
+  return plan
+}

package/src/lib/status.ts

@@ -1,21 +1,7 @@
 import type { ModelOption, RateLimitInfo, SessionStatus } from '@workerdeck/protocol'
 
-/**
- * How a session's live readings become a status line — the pure half, so every
- * host spells "Needs approval", "80% is a warning" and "which window is the
- * binding one" the same way.
- *
- * Structurally typed against `SessionVitals` rather than importing it: this file
- * ships from the React-free `@workerdeck/ui/format` entry, and a host drawing
- * the readings outside React (the VS Code extension host in the window status
- * bar) must not pull a component graph in to do it. A real `SessionVitals`
- * satisfies every shape here.
- */
 export type StatusSeverity = 'none' | 'warning' | 'error'
 
-/** What a status slot shows, before any host's icon vocabulary gets involved.
- * `icon` is a VS Code codicon name — the one host-shaped thing left, because the
- * alternative is a second mapping table in the only consumer. */
 export type StatusPresentation = {
   icon: string
   label: string
@@ -24,8 +10,6 @@ export type StatusPresentation = {
 
 export type StatusReadings = {
   status: SessionStatus
-  /** `@workerdeck/react`'s `ConnectionState`, structurally — the link state wins
-   * the slot, so it has to be part of the reading. */
   connection?: 'live' | 'reconnecting' | 'offline'
 }
 
@@ -39,13 +23,10 @@ const STATUS_META: Record<SessionStatus, StatusPresentation> = {
   closed: { icon: 'circle-slash', label: 'Closed', severity: 'none' },
 }
 
-/**
- * The status slot, connection first. A session status held over a dead socket is
- * the last thing we heard, not the current state — so a lost link takes the slot
- * rather than letting "Running" imply a turn is still streaming.
- */
 export function statusPresentation(vitals: StatusReadings | undefined): StatusPresentation {
-  if (!vitals) return { icon: 'hubot', label: 'Connecting…', severity: 'none' }
+  if (!vitals) {
+    return { icon: 'hubot', label: 'Connecting…', severity: 'none' }
+  }
   if (vitals.connection === 'offline') {
     return { icon: 'debug-disconnect', label: 'Offline', severity: 'error' }
   }
@@ -55,46 +36,28 @@ export function statusPresentation(vitals: StatusReadings | undefined): StatusPr
   return STATUS_META[vitals.status] ?? { icon: 'hubot', label: vitals.status, severity: 'none' }
 }
 
-/** 0–100 → the colour a meter wears. One pair of thresholds for every surface. */
 export function meterSeverity(pct: number | undefined): StatusSeverity {
-  if (pct === undefined) return 'none'
-  if (pct >= 95) return 'error'
-  if (pct >= 80) return 'warning'
+  if (pct === undefined) {
+    return 'none'
+  }
+  if (pct >= 95) {
+    return 'error'
+  }
+  if (pct >= 80) {
+    return 'warning'
+  }
   return 'none'
 }
 
-/**
- * The three *lanes* a plan-usage reading can occupy, and the whole reason this
- * is a rule rather than a per-client `if`.
- *
- * The CLI reports one window per limit (`five_hour`, `seven_day`, and a
- * `seven_day_<model>` bucket per model-scoped limit — `seven_day_opus`,
- * `seven_day_sonnet`, and whatever `model_scoped` names next). A surface with
- * one slot shows the fullest of them, which is why `tightestWindow` exists —
- * but that answers "what is closest to blocking me", not "how much of *this
- * session's* budget have I spent", and those are different questions a reader
- * asks at different times. A weekly window at 71% will win the single slot over
- * a five-hour window at 60% every time, so the reading you actually watch while
- * working is the one you can never see.
- *
- * Hence three lanes, each independently showable:
- *
- * - `'session'` — the five-hour window. The one that resets while you work.
- * - `'weekly'` — the plain seven-day window, the account-wide ceiling.
- * - `'model'` — the fullest of the *model-scoped* weekly buckets. Deliberately
- *   not a named model: which models have their own bucket is the plan's
- *   business and changes without notice, so a client that hardcoded
- *   `seven_day_opus` would show nothing the month it becomes something else.
- *   The label comes from the key, so this lane names whatever it found.
- */
 export type UsageLane = 'session' | 'weekly' | 'model'
 
-/** The window a lane points at, or `undefined` when this account has none. */
 export function usageWindow(
   rateLimits: Record<string, RateLimitInfo> | undefined,
   lane: UsageLane,
 ): { key: string; info: RateLimitInfo } | undefined {
-  if (!rateLimits) return undefined
+  if (!rateLimits) {
+    return undefined
+  }
   if (lane === 'session') {
     const info = rateLimits.five_hour
     return info ? { key: 'five_hour', info } : undefined
@@ -103,27 +66,19 @@ export function usageWindow(
     const info = rateLimits.seven_day
     return info ? { key: 'seven_day', info } : undefined
   }
-  // Model-scoped: same "fullest wins" rule as the single slot, over the subset.
   const scoped = Object.fromEntries(
-    Object.entries(rateLimits).filter(
-      ([key]) => key.startsWith('seven_day_') && key !== 'seven_day_oauth_apps',
-    ),
+    Object.entries(rateLimits).filter(([key]) => key.startsWith('seven_day_') && key !== 'seven_day_oauth_apps'),
   )
   return tightestWindow(scoped)
 }
 
-/** The rate-limit window that gets the one visible slot: whichever is fullest,
- * since the binding constraint is the one worth glancing at. Still the right
- * rule for a surface with exactly one slot; {@link usageWindow} is for one with
- * three. */
-export function tightestWindow(
-  rateLimits: Record<string, RateLimitInfo> | undefined,
-): { key: string; info: RateLimitInfo } | undefined {
+export function tightestWindow(rateLimits: Record<string, RateLimitInfo> | undefined): { key: string; info: RateLimitInfo } | undefined {
   const entries = Object.entries(rateLimits ?? {})
-  if (entries.length === 0) return undefined
+  if (entries.length === 0) {
+    return undefined
+  }
   let best: { key: string; info: RateLimitInfo } | undefined
   for (const [key, info] of entries) {
-    // A rejected window outranks any utilization: it is the one actually blocking.
     const rank = info.status === 'rejected' ? Number.POSITIVE_INFINITY : (info.utilization ?? -1)
     const bestRank =
       best === undefined
@@ -131,18 +86,20 @@ export function tightestWindow(
         : best.info.status === 'rejected'
           ? Number.POSITIVE_INFINITY
           : (best.info.utilization ?? -1)
-    if (rank > bestRank) best = { key, info }
+    if (rank > bestRank) {
+      best = { key, info }
+    }
   }
   return best
 }
 
-/** A rate-limit window's key, named for a human. A model-scoped bucket is named
- * for its model alone (`seven_day_fable` → "Fable"): the lane it sits in
- * already says weekly, and "Seven day fable" in a status bar is three words to
- * say one. */
 export function windowLabel(key: string): string {
-  if (key === 'five_hour') return 'Session'
-  if (key === 'seven_day') return 'Weekly'
+  if (key === 'five_hour') {
+    return 'Session'
+  }
+  if (key === 'seven_day') {
+    return 'Weekly'
+  }
   const scoped = key.startsWith('seven_day_') ? key.slice('seven_day_'.length) : key
   const words = scoped.replaceAll('_', ' ')
   return words.charAt(0).toUpperCase() + words.slice(1)
@@ -150,44 +107,37 @@ export function windowLabel(key: string): string {
 
 export type ModelReadings = { model?: string; models: readonly ModelOption[] }
 
-/**
- * The catalog row a session is actually running, or `undefined` for a model the
- * list doesn't name. Matched leniently: a session reports the *resolved* id
- * (`claude-sonnet-5`) where the row may be keyed on the alias (`sonnet`), and
- * either can carry a `[1m]` context-window suffix.
- */
 export function currentModel(vitals: ModelReadings | undefined): ModelOption | undefined {
   const id = vitals?.model
-  if (!id) return undefined
+  if (!id) {
+    return undefined
+  }
   const bare = (value: string) => value.replace(/\[.*\]$/, '')
   const wanted = bare(id)
-  return vitals.models.find(
-    (m) => bare(m.value) === wanted || (m.resolvedModel && bare(m.resolvedModel) === wanted),
-  )
+  return vitals.models.find((m) => bare(m.value) === wanted || (m.resolvedModel && bare(m.resolvedModel) === wanted))
 }
 
-/** A session's model, named the way the picker names it. Falls back to the raw
- * id, and to "Default" while the session is on the CLI's own pick. */
 export function modelLabel(vitals: ModelReadings | undefined): string {
-  if (!vitals?.model) return 'Default'
+  if (!vitals?.model) {
+    return 'Default'
+  }
   return currentModel(vitals)?.displayName ?? vitals.model
 }
 
-/** Context percentage as its meter severity — the reading and the colour come
- * from one place so a panel and a status bar never disagree.
- *
- * Takes only the number it reads, so the compact `ContextReading` that rides
- * the sessions list and the full `ContextUsage` on the event stream are coloured
- * by one rule rather than two. */
 export function contextSeverity(usage: { percentage: number } | undefined): StatusSeverity {
   return meterSeverity(usage?.percentage)
 }
 
-/** {@link meterSeverity} as a text colour class. Here rather than beside each
- * meter because the status bar, the context dialog and a sessions-list row all
- * paint the same reading, and a fourth copy of the thresholds is a fourth
- * chance for one surface to call 81% orange and another call it grey. */
 export function meterColorClass(pct: number | undefined): string {
   const severity = meterSeverity(pct)
   return severity === 'error' ? 'text-danger' : severity === 'warning' ? 'text-warning' : 'text-fg-3'
 }
+
+/**
+ * The fill colour for a meter bar. Deliberately a different ramp from
+ * {@link meterColorClass}: a bar reads as alarming later than a number does, so the tint
+ * turns at 70/90 where the text severity turns at 80/95.
+ */
+export function meterTintClass(pct: number): string {
+  return pct >= 90 ? 'bg-danger' : pct >= 70 ? 'bg-warning' : 'bg-accent'
+}

package/src/lib/tool-icon.ts

@@ -18,83 +18,73 @@ import {
   Wrench,
 } from 'lucide-react'
 
-/**
- * An icon per tool, so a transcript can be skimmed by shape rather than read.
- *
- * The same mapping the iOS app makes, in lucide's vocabulary rather than SF
- * Symbols — the two clients should be recognisably showing the same thing. An
- * unknown tool falls back to a wrench, and an MCP tool (`mcp__server__name`) to
- * the puzzle piece the MCP screens use, because "which server is this from" is
- * the useful thing to see at a glance.
- */
 export function toolIcon(toolName: string): LucideIcon {
   switch (toolName) {
     case 'Bash':
     case 'BashOutput':
-    case 'KillShell':
+    case 'KillShell': {
       return Terminal
-    case 'Read':
+    }
+    case 'Read': {
       return FileText
-    case 'Write':
+    }
+    case 'Write': {
       return SquarePen
+    }
     case 'Edit':
     case 'MultiEdit':
-    case 'NotebookEdit':
+    case 'NotebookEdit': {
       return PencilLine
-    case 'Glob':
+    }
+    case 'Glob': {
       return FolderSearch
-    case 'Grep':
+    }
+    case 'Grep': {
       return Search
-    case 'WebFetch':
+    }
+    case 'WebFetch': {
       return ArrowDownCircle
-    case 'WebSearch':
+    }
+    case 'WebSearch': {
       return Globe
+    }
     case 'Task':
-    case 'Agent':
+    case 'Agent': {
       return UsersRound
-    case 'TodoWrite':
+    }
+    case 'TodoWrite': {
       return CheckSquare
-    case 'Skill':
+    }
+    case 'Skill': {
       return Sparkles
-    case 'AskUserQuestion':
+    }
+    case 'AskUserQuestion': {
       return MessageCircleQuestion
-    // The codex engine's own tool names (see its runner's item mapping).
-    case 'CodexCommand':
+    }
+    case 'CodexCommand': {
       return Terminal
-    case 'CodexFileChange':
+    }
+    case 'CodexFileChange': {
       return FileDiff
-    case 'CodexWebSearch':
+    }
+    case 'CodexWebSearch': {
       return Globe
+    }
     case 'CodexImageGeneration':
-    case 'CodexImageView':
+    case 'CodexImageView': {
       return Image
-    default:
+    }
+    default: {
       return toolName.startsWith('mcp__') ? Puzzle : Wrench
+    }
   }
 }
 
-/**
- * Is this tool a shell command?
- *
- * Its own question because a run of them is *one* thing the reader skims past:
- * the terminal theme collapses consecutive shell calls into a single "Ran N
- * shell commands" line, the way the CLI does. Names from both first-party
- * engines. `BashOutput`/`KillShell` are excluded on purpose — they manage a
- * background shell rather than run something, and folding them into the count
- * would inflate it.
- */
+// `BashOutput`/`KillShell` are excluded on purpose: they manage a background shell rather than run one.
 export function isShellTool(toolName: string): boolean {
   return toolName === 'Bash' || toolName === 'CodexCommand'
 }
 
-/**
- * Does this tool *change* the workspace?
- *
- * Worth its own colour in a transcript: skimming a run, "what did it edit" is a
- * different question from "what did it look at", and a write is the one you
- * might need to undo. Names from both first-party engines; an MCP tool is
- * unknowable from its name, so it reads as neutral rather than guessed.
- */
 export function isMutatingTool(toolName: string): boolean {
   switch (toolName) {
     case 'Write':
@@ -102,9 +92,11 @@ export function isMutatingTool(toolName: string): boolean {
     case 'MultiEdit':
     case 'NotebookEdit':
     case 'Update':
-    case 'CodexFileChange':
+    case 'CodexFileChange': {
       return true
-    default:
+    }
+    default: {
       return false
+    }
   }
 }

package/src/lib/utils.ts

@@ -1,9 +1,7 @@
 import { clsx, type ClassValue } from 'clsx'
 import { extendTailwindMerge } from 'tailwind-merge'
 
-// Register the custom text-* font-size utilities as a font-size class group, or
-// tailwind-merge collapses a size class and a color class (e.g. `text-label
-// text-muted-foreground`) into one bucket and silently drops the size.
+// Register the custom text-* utilities as a font-size group, or tailwind-merge buckets a size class with a colour class and drops the size.
 const twMerge = extendTailwindMerge({
   extend: {
     classGroups: {