@workerdeck/ui 0.9.0 → 0.12.0

package/src/lib/format.ts

@@ -51,6 +51,54 @@ export function formatRelativeTime(epochMs: number | undefined, now = Date.now()
   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'
+  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'
+  const capitalize = (s: string) => s.replace(/\b\w/g, (c) => c.toUpperCase())
+  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
+  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 < 3600) {
+    const minutes = Math.floor(seconds / 60)
+    return `${minutes} min${minutes === 1 ? '' : 's'} ago`
+  }
+  const hours = Math.floor(seconds / 3600)
+  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 ''
@@ -65,3 +113,69 @@ export function toolInputPreview(input: unknown, max = 80): string {
   const text = JSON.stringify(input) ?? ''
   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' },
+  glm: { name: 'GLM' },
+  qwen: { name: 'Qwen' },
+  kimi: { name: 'Kimi' },
+  llama: { name: 'Llama' },
+  mistral: { name: 'Mistral' },
+  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
+  const withoutVariant = id.split('[')[0] ?? id
+  const parts = withoutVariant.toLowerCase().split('-').filter(Boolean)
+  if (parts[0] === 'claude') parts.shift()
+  const familyToken = parts.shift()
+  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)}`)
+
+  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)}`)
+  }
+  const versioned = version.length > 0 ? `${name}${family?.joiner ?? ' '}${version.join('.')}` : name
+  return [versioned, ...words].join(' ')
+}

package/src/lib/status.ts

@@ -0,0 +1,124 @@
+import type { ContextUsage, 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
+  severity: StatusSeverity
+}
+
+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'
+}
+
+const STATUS_META: Record<SessionStatus, StatusPresentation> = {
+  starting: { icon: 'loading~spin', label: 'Starting', severity: 'none' },
+  running: { icon: 'loading~spin', label: 'Running', severity: 'none' },
+  awaiting_approval: { icon: 'warning', label: 'Needs approval', severity: 'warning' },
+  idle: { icon: 'check', label: 'Idle', severity: 'none' },
+  parked: { icon: 'debug-pause', label: 'Parked', severity: 'none' },
+  failed: { icon: 'error', label: 'Failed', severity: 'error' },
+  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.connection === 'offline') {
+    return { icon: 'debug-disconnect', label: 'Offline', severity: 'error' }
+  }
+  if (vitals.connection === 'reconnecting') {
+    return { icon: 'sync~spin', label: 'Reconnecting…', severity: 'warning' }
+  }
+  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'
+  return 'none'
+}
+
+/** The rate-limit window that gets the one visible slot: whichever is fullest,
+ * since the binding constraint is the one worth glancing at. */
+export function tightestWindow(
+  rateLimits: Record<string, RateLimitInfo> | undefined,
+): { key: string; info: RateLimitInfo } | undefined {
+  const entries = Object.entries(rateLimits ?? {})
+  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
+        ? Number.NEGATIVE_INFINITY
+        : best.info.status === 'rejected'
+          ? Number.POSITIVE_INFINITY
+          : (best.info.utilization ?? -1)
+    if (rank > bestRank) best = { key, info }
+  }
+  return best
+}
+
+/** A rate-limit window's key, named for a human. */
+export function windowLabel(key: string): string {
+  if (key === 'five_hour') return 'Session'
+  if (key === 'seven_day') return 'Weekly'
+  return key.replaceAll('_', ' ')
+}
+
+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
+  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),
+  )
+}
+
+/** 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'
+  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. */
+export function contextSeverity(usage: ContextUsage | undefined): StatusSeverity {
+  return meterSeverity(usage?.percentage)
+}

package/src/lib/tool-icon.ts

@@ -0,0 +1,96 @@
+import {
+  ArrowDownCircle,
+  CheckSquare,
+  FileDiff,
+  FileText,
+  FolderSearch,
+  Globe,
+  Image,
+  type LucideIcon,
+  MessageCircleQuestion,
+  PencilLine,
+  Puzzle,
+  Search,
+  Sparkles,
+  SquarePen,
+  Terminal,
+  UsersRound,
+  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':
+      return Terminal
+    case 'Read':
+      return FileText
+    case 'Write':
+      return SquarePen
+    case 'Edit':
+    case 'MultiEdit':
+    case 'NotebookEdit':
+      return PencilLine
+    case 'Glob':
+      return FolderSearch
+    case 'Grep':
+      return Search
+    case 'WebFetch':
+      return ArrowDownCircle
+    case 'WebSearch':
+      return Globe
+    case 'Task':
+    case 'Agent':
+      return UsersRound
+    case 'TodoWrite':
+      return CheckSquare
+    case 'Skill':
+      return Sparkles
+    case 'AskUserQuestion':
+      return MessageCircleQuestion
+    // The codex engine's own tool names (see its runner's item mapping).
+    case 'CodexCommand':
+      return Terminal
+    case 'CodexFileChange':
+      return FileDiff
+    case 'CodexWebSearch':
+      return Globe
+    case 'CodexImageGeneration':
+    case 'CodexImageView':
+      return Image
+    default:
+      return toolName.startsWith('mcp__') ? Puzzle : Wrench
+  }
+}
+
+/**
+ * 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':
+    case 'Edit':
+    case 'MultiEdit':
+    case 'NotebookEdit':
+    case 'Update':
+    case 'CodexFileChange':
+      return true
+    default:
+      return false
+  }
+}

package/src/workspace.ts

@@ -0,0 +1,28 @@
+/**
+ * The workspace layer — the VS Code-shaped layout around `SessionPanel`, and
+ * the Monaco editor at the middle of it.
+ *
+ * This is a **separate entry point** (`@workerdeck/ui/workspace`) for one
+ * reason: Monaco. It is only reachable from here, so an embedder who imports
+ * the root entry never pulls it into their module graph.
+ *
+ * That matters more than tree-shaking alone would suggest. Rollup does drop
+ * `CodeEditor` from a `SessionPanel`-only bundle — but Vite resolves Monaco's
+ * `new Worker(new URL(…, import.meta.url))` calls during *transform*, before
+ * tree-shaking runs, and emits ~9MB of language-service workers as assets that
+ * are never retracted. Keeping the import unreachable from the root entry is
+ * what actually prevents that; `sideEffects: false` does not.
+ *
+ * Consequently `monaco-editor` is an **optional peer dependency**: importing
+ * this entry means installing it, and importing only the root entry means not
+ * having to. See the README for the Vite configuration Monaco needs.
+ */
+
+export {
+  SessionWorkspace,
+  type SessionWorkspaceProps,
+} from './components/agent/SessionWorkspace.tsx'
+export { FileTree, type FileTreeProps } from './components/agent/FileTree.tsx'
+export { EditorTabs, type EditorTabsProps } from './components/agent/EditorTabs.tsx'
+export { FileViewer, type FileViewerProps } from './components/agent/FileViewer.tsx'
+export { CodeEditor, type CodeEditorProps } from './components/agent/CodeEditor.tsx'