@workerdeck/ui 1.1.0 → 1.3.0

package/src/components/agent/held-sends.tsx

@@ -0,0 +1,73 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Clock } from 'lucide-react'
+
+export type HeldSend = { text: string; attachmentIds: string[] }
+
+export type HeldSends = {
+  held: HeldSend[]
+  submit: (text: string, attachmentIds: string[]) => void
+  flush: () => void
+}
+
+// Catch-up mode is the engine's behaviour, not ours: a message sent mid-turn is folded into the
+// running turn. Holding it here is the only way to turn that off, and it is a client preference,
+// so nothing about it travels on the wire.
+export function useHeldSends(options: { hold: boolean; busy: boolean; send: (text: string, attachmentIds: string[]) => void }): HeldSends {
+  const [held, setHeld] = useState<HeldSend[]>([])
+  // The queue is a ref and the state is its shadow: flushing sends, and a state updater that
+  // sends would fire twice under StrictMode.
+  const queue = useRef<HeldSend[]>([])
+  const sendRef = useRef(options.send)
+  sendRef.current = options.send
+
+  const flush = useCallback(() => {
+    const queued = queue.current
+    if (queued.length === 0) {
+      return
+    }
+    queue.current = []
+    setHeld([])
+    for (const item of queued) {
+      sendRef.current(item.text, item.attachmentIds)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!options.busy) {
+      flush()
+    }
+  }, [options.busy, flush])
+
+  const submit = useCallback(
+    (text: string, attachmentIds: string[]) => {
+      if (!options.hold || !options.busy) {
+        sendRef.current(text, attachmentIds)
+        return
+      }
+      queue.current = [...queue.current, { text, attachmentIds }]
+      setHeld(queue.current)
+    },
+    [options.hold, options.busy],
+  )
+
+  return { held, submit, flush }
+}
+
+export function HeldSendsBar({ held, onSendNow }: { held: HeldSend[]; onSendNow: () => void }) {
+  if (held.length === 0) {
+    return null
+  }
+  return (
+    <div className="px-3 pt-2">
+      <div className="mx-auto flex w-full max-w-[var(--wd-transcript-max-width)] items-center gap-2 rounded-md border border-border bg-surface px-3 py-1.5 text-label text-fg-3">
+        <Clock className="size-3.5 shrink-0" />
+        <span className="min-w-0 flex-1 truncate">
+          {held.length === 1 ? '1 message' : `${held.length} messages`} waiting for this turn to end — {held[held.length - 1]!.text}
+        </span>
+        <button type="button" onClick={onSendNow} className="shrink-0 underline-offset-2 hover:underline">
+          Send now
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/agent/tool-titles.tsx

@@ -0,0 +1,12 @@
+import { createContext, useContext, type ReactNode } from 'react'
+import { toolTitle } from '@workerdeck/protocol'
+
+const TitlesContext = createContext<Record<string, string> | undefined>(undefined)
+
+export function ToolTitleProvider({ value, children }: { value: Record<string, string> | undefined; children: ReactNode }) {
+  return <TitlesContext.Provider value={value}>{children}</TitlesContext.Provider>
+}
+
+export function useToolTitle(name: string): string | undefined {
+  return toolTitle(name, useContext(TitlesContext))
+}

package/src/components/agent/use-subagent-frame.ts

@@ -3,21 +3,19 @@ import { subagentLabel, type SessionInfo } from '@workerdeck/protocol'
 import type { TranscriptItem } from '@workerdeck/react'
 import { subagentItems, type ToolCallItem } from '../terminal/blocks.ts'
 
-/**
- * The sub-agent frame machine: which agent frame is on screen, how it is entered (a host
- * `openSubagent` request or a Task row in the transcript), how it is left (Escape, the strip's
- * Back, or the host withdrawing), and what the transcript reveals on the way out. The frame
- * round-trips through the host's URL — the anti-loop rules live in GOTCHAS ("The sub-agent
- * frame round-trips through the URL"); here they mean: entry keys on the nonce alone, and the
- * report is deduped through a ref, so an echo of our own report is inert on arrival.
- */
+// The sub-agent frame machine: which agent frame is on screen, how it is entered (a host
+// `openSubagent` request or a Task row in the transcript), how it is left (Escape, the strip's
+// Back, or the host withdrawing), and what the transcript reveals on the way out. The frame
+// round-trips through the host's URL — the anti-loop rules live in GOTCHAS ("The sub-agent
+// frame round-trips through the URL"); here they mean: entry keys on the nonce alone, and the
+// report is deduped through a ref, so an echo of our own report is inert on arrival.
 export function useSubagentFrame(options: {
   sessionId: string | undefined
   items: TranscriptItem[]
   session: SessionInfo | undefined
-  /** Host request to reveal a transcript row; entering a frame must not eat a pending one. */
+  // Host request to reveal a transcript row; entering a frame must not eat a pending one.
   reveal?: { toolUseId: string; nonce: number }
-  /** Host request to enter a frame; `toolUseId: undefined` withdraws it (Back/Forward). */
+  // Host request to enter a frame; `toolUseId: undefined` withdraws it (Back/Forward).
   openSubagent?: { toolUseId: string; nonce: number }
   onSubagentChange?: (toolUseId: string | undefined) => void
 }) {

package/src/components/agent/use-transcript-jumps.ts

@@ -7,19 +7,17 @@ import { gapBefore, type TranscriptRow } from './transcript-rows.ts'
 const AIM_PASSES = 4
 const AIM_SETTLE_MS = 50
 
-/** How long a send's re-pin outlasts the click — long enough to eat a trackpad's momentum tail. */
+// How long a send's re-pin outlasts the click — long enough to eat a trackpad's momentum tail.
 export const REPIN_HOLD_MS = 750
 
 type RepinTarget = Pick<ReturnType<typeof useStickToBottomContext>, 'scrollToBottom' | 'state'>
 
-/**
- * The send re-pin: a held, escape-proof pin, not one `scrollToBottom('instant')` — a trackpad's
- * trailing momentum tick reads as escape intent and aborts the one-shot before its first frame
- * (GOTCHAS "The send re-pin is a held pin"). Every line is load-bearing: clear the stale escape
- * flag, hold through the momentum tail, seed the `ignoreEscapes` record the library only
- * installs one rAF too late, and press the first scroll synchronously. Deliberate detach
- * (`stopScroll`, drag-selection) still wins immediately.
- */
+// The send re-pin: a held, escape-proof pin, not one `scrollToBottom('instant')` — a trackpad's
+// trailing momentum tick reads as escape intent and aborts the one-shot before its first frame
+// (GOTCHAS "The send re-pin is a held pin"). Every line is load-bearing: clear the stale escape
+// flag, hold through the momentum tail, seed the `ignoreEscapes` record the library only
+// installs one rAF too late, and press the first scroll synchronously. Deliberate detach
+// (`stopScroll`, drag-selection) still wins immediately.
 export function repinToBottom(stick: RepinTarget): void {
   const { state } = stick
   state.escapedFromLock = false

package/src/components/terminal/TerminalTranscript.tsx

@@ -3,7 +3,18 @@ import type { TranscriptItem, TranscriptState } from '@workerdeck/react'
 import { cn } from '../../lib/utils.ts'
 import type { TerminalAffordances } from './affordances.tsx'
 import { OpenSubagentAction, WithActions } from './affordances.tsx'
-import { AssistantRow, FileRow, NoticeRow, ToolRunRow, ThinkingRow, ToolRow, TurnResultRow, UserRow, WorkingRow } from './items.tsx'
+import {
+  AssistantRow,
+  CompactionRow,
+  FileRow,
+  NoticeRow,
+  ToolRunRow,
+  ThinkingRow,
+  ToolRow,
+  TurnResultRow,
+  UserRow,
+  WorkingRow,
+} from './items.tsx'
 import { blockNeedsBlank, taskChildItems, terminalBlocks, type TaskBlock } from './blocks.ts'
 import { usePulse } from '../agent/pulse.tsx'
 import { Pressable, useRevealOnOpen } from './press.tsx'
@@ -41,6 +52,9 @@ export function TerminalItemView({ item, fileUrl }: { item: TranscriptItem; file
     case 'notice': {
       return <NoticeRow item={item} />
     }
+    case 'compaction': {
+      return <CompactionRow />
+    }
     case 'file_delivered': {
       return <FileRow item={item} href={fileUrl?.(item.path)} />
     }

package/src/components/terminal/height.ts

@@ -1,6 +1,6 @@
 import type { FilePatch, PatchHunk } from '@workerdeck/protocol'
 import type { TranscriptItem } from '@workerdeck/react'
-import { formatBytes, formatCost, formatDuration, toolInputPreview } from '../../lib/format.ts'
+import { COMPACTION_TEXT, formatBytes, formatCost, formatDuration, toolInputPreview } from '../../lib/format.ts'
 import { taskChildItems, type TerminalBlock, type ToolCallItem } from './blocks.ts'
 import { IMAGE_BOX_LINES } from './image-box.ts'
 import { collapsedResult } from './result-preview.ts'
@@ -622,6 +622,9 @@ export function itemHeight(item: TranscriptItem, m: CellMetrics): ComputedHeight
     case 'notice': {
       return rowH(item.text, m, { extraPx })
     }
+    case 'compaction': {
+      return rowH(COMPACTION_TEXT, m, { extraPx })
+    }
     case 'file_delivered': {
       const text = `${item.path} · ${formatBytes(item.bytes)}` + (item.description ? ` · ${item.description}` : '')
       return rowH(text, m, { extraPx })

package/src/components/terminal/items.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import type { TranscriptItem } from '@workerdeck/react'
-import { formatBytes, formatCost, formatDuration, toolInputPreview } from '../../lib/format.ts'
+import { COMPACTION_TEXT, formatBytes, formatCost, formatDuration, toolInputPreview } from '../../lib/format.ts'
 import { isMutatingTool } from '../../lib/tool-icon.ts'
 import { usePulse } from '../agent/pulse.tsx'
 import { BookmarkAction, CopyAction, WithActions } from './affordances.tsx'
@@ -10,6 +10,7 @@ import { Pressable, useRevealOnOpen } from './press.tsx'
 import { IMAGE_BOX_LINES, IMAGE_UNAVAILABLE, imagePlaceholder } from './image-box.ts'
 import { collapsedResult } from './result-preview.ts'
 import { useToolResultFetcher } from '../agent/tool-result-fetch.tsx'
+import { useToolTitle } from '../agent/tool-titles.tsx'
 import { useToolResultImageSrc } from '../agent/tool-result-image.tsx'
 import { runFailed, runSummary } from './tool-run.ts'
 import { todoLine, todoPreview, type TodoPreview, type TodoStatus } from './todos.ts'
@@ -112,6 +113,7 @@ export function ToolRow({ item }: { item: ToolCallItem }) {
   const command = (item.input as { command?: unknown } | null)?.command
   const copyable = typeof command === 'string' ? command : text
   const todos = todoPreview(item.name, item.input)
+  const title = useToolTitle(item.name)
 
   return (
     <div ref={reveal} className={open ? 'term-open' : undefined}>
@@ -124,11 +126,12 @@ export function ToolRow({ item }: { item: ToolCallItem }) {
         }
       >
         <Pressable onPress={() => setOpen((v) => !v)} expanded={open}>
-          <Row glyph={busy ? pulse : '●'} glyphTone={tone} tone="fg">
+          <Row glyph={busy ? pulse : '●'} glyphTone={tone} tone="fg" title={title ? item.name : undefined}>
             <Ink bold tone="bright">
-              {item.name}
+              {title ?? item.name}
             </Ink>
             <Ink tone="dim">({todos ? todos.summary : toolInputPreview(item.input)})</Ink>
+            {title && open ? <Ink tone="faint"> · {item.name}</Ink> : null}
             {item.backend && item.backend !== 'server' ? <Ink tone="faint"> · {item.backend}</Ink> : null}
           </Row>
         </Pressable>
@@ -278,6 +281,14 @@ export function TurnResultRow({ item }: { item: Extract<TranscriptItem, { kind:
   )
 }
 
+export function CompactionRow() {
+  return (
+    <Row glyph="≡" glyphTone="yellow" tone="faint">
+      {COMPACTION_TEXT}
+    </Row>
+  )
+}
+
 export function NoticeRow({ item }: { item: Extract<TranscriptItem, { kind: 'notice' }> }) {
   const error = item.level === 'error'
   return (

package/src/index.ts

@@ -74,6 +74,8 @@ export { Response, type ResponseProps } from './components/agent/Response.tsx'
 export { Reasoning, type ReasoningProps } from './components/agent/Reasoning.tsx'
 export { Loader } from './components/agent/Loader.tsx'
 export { ToolCallCard, type ToolCallCardProps, type ToolCallItem } from './components/agent/ToolCallCard.tsx'
+export { ToolTitleProvider, useToolTitle } from './components/agent/tool-titles.tsx'
+export { HeldSendsBar, useHeldSends, type HeldSend, type HeldSends } from './components/agent/held-sends.tsx'
 export { FileCard, type FileCardProps, type FileDeliveredItem } from './components/agent/FileCard.tsx'
 export { PermissionPrompt, type PermissionPromptProps } from './components/agent/PermissionPrompt.tsx'
 export {

package/src/lib/context-note.ts

@@ -0,0 +1,24 @@
+import type { ProfileEngine } from '@workerdeck/protocol'
+
+export interface ContextNote {
+  summary: string
+  hint: string
+  detail: string[]
+  caveat: string
+}
+
+const CODEX_CONTEXT_NOTE: ContextNote = {
+  summary:
+    'Codex budgets 272K input by default and reports 95% of it, so a 1M-class model reads ~258k. That is codex’s price tier, not the model’s ceiling — and it is the number auto-compaction fires on, so the meter is honest.',
+  hint: 'Raising it is yours to set: model_context_window in ~/.codex/config.toml — and watch for auto-compaction failing afterwards.',
+  detail: [
+    'To raise it, set model_context_window in ~/.codex/config.toml, up to 872000 (reported as 828400). Codex clamps to its own max_context_window, itself below OpenAI’s stated 922,000 max input.',
+    'Above 272K input, a request bills at 2x input / 1.5x output for the whole request. WorkerDeck never writes this setting — it is a cost decision on your account.',
+  ],
+  caveat:
+    'Raise it and watch for auto-compaction failing: openai/codex #16068 reports it stops firing after the first overflow. Unverified here on 0.149.0.',
+}
+
+export function contextNote(engine: ProfileEngine | undefined): ContextNote | undefined {
+  return (engine ?? 'claude') === 'codex' ? CODEX_CONTEXT_NOTE : undefined
+}

package/src/lib/css.ts

@@ -1,8 +1,6 @@
-/**
- * Pass a colour through only if this engine can actually parse it. Category colours arrive
- * from the CLI as untrusted strings, and an unparseable one must fall back to the token
- * colour rather than reaching the DOM.
- */
+// Pass a colour through only if this engine can actually parse it. Category colours arrive
+// from the CLI as untrusted strings, and an unparseable one must fall back to the token
+// colour rather than reaching the DOM.
 export function cssColor(color: string): string | undefined {
   return typeof CSS !== 'undefined' && CSS.supports('color', color) ? color : undefined
 }

package/src/lib/format.ts

@@ -1,3 +1,6 @@
+// Here rather than beside the row: height.ts must measure the string items.tsx draws, and cannot import a .tsx.
+export const COMPACTION_TEXT = 'context compacted · earlier turns summarised to fit the window'
+
 export function formatCost(usd: number | undefined): string {
   if (usd === undefined || Number.isNaN(usd)) {
     return '—'

package/src/lib/status.ts

@@ -133,11 +133,9 @@ export function meterColorClass(pct: number | undefined): string {
   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.
- */
+// 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'
 }