@workerdeck/ui 0.7.0 → 0.11.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/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'