@workerdeck/ui 0.15.0 → 0.16.0

package/src/components/agent/SessionPanel.tsx

@@ -8,12 +8,20 @@ import {
   type ReactNode,
 } from 'react'
 import type { WorkerDeckClient } from '@workerdeck/client'
-import { PROTOCOL_VERSION, type ModelOption, type PermissionMode } from '@workerdeck/protocol'
 import {
-  rateLimitWindows,
+  PROTOCOL_VERSION,
+  mergeUsage,
+  orderUsageWindows,
+  usageInfos,
+  type ModelOption,
+  type PermissionMode,
+  type RateLimitInfo,
+} from '@workerdeck/protocol'
+import {
   useAttachments,
   useClaudeSession,
   useHostFileSearch,
+  useProfileUsage,
   useToolCallHost,
   type ConnectionState,
   type ProducedFileRef,
@@ -47,6 +55,11 @@ import {
 } from './PermissionModeSelect.tsx'
 import { PermissionPrompt } from './PermissionPrompt.tsx'
 import { QuestionPrompt, parseUserQuestions } from './QuestionPrompt.tsx'
+import { TerminalPermissionPrompt } from '../terminal/PermissionPrompt.tsx'
+import { TerminalQuestionPrompt } from '../terminal/QuestionPrompt.tsx'
+import { TerminalSurface } from '../terminal/surface.tsx'
+import type { TerminalAffordances } from '../terminal/affordances.tsx'
+
 import { SessionInfoDialog } from './SessionInfoDialog.tsx'
 import { StatusBar } from './StatusBar.tsx'
 import { Transcript } from './Transcript.tsx'
@@ -59,6 +72,59 @@ import {
 } from './transcript-variant.tsx'
 import { UsageDialog } from './UsageDialog.tsx'
 
+/**
+ * The box the pending prompts sit in.
+ *
+ * Under the terminal theme they are rows of the same run as the transcript, so
+ * they need that theme's cell — and its `--term-bleed`, so an approval's diff
+ * bands reach the same edges the transcript's do. Every other variant keeps the
+ * centred content column the panel uses everywhere else.
+ */
+function PromptSurface({
+  terminal,
+  metrics,
+  affordances,
+  children,
+}: {
+  terminal: boolean
+  metrics?: TerminalMetrics
+  affordances?: TerminalAffordances | boolean
+  children: ReactNode
+}) {
+  if (!terminal) {
+    return (
+      <div className='mx-auto flex w-full max-w-[var(--wd-content-max-w,48rem)] flex-col gap-2'>
+        {children}
+      </div>
+    )
+  }
+  return (
+    <TerminalSurface
+      fontSize={metrics?.fontSize}
+      lineHeight={metrics?.lineHeight}
+      affordances={affordances}
+      bleed='1ch'
+      className='term-transcript'>
+      {children}
+    </TerminalSurface>
+  )
+}
+
+/**
+ * The character cell the terminal theme draws on, in **whole pixels**.
+ *
+ * One object rather than two props because the panel mounts three separate
+ * `TerminalSurface`s — the transcript, the pending prompts, the composer — and
+ * they must agree: a prompt drawn at a different line height from the rows above
+ * it is three surfaces on three grids, which is the failure this theme is built
+ * to make impossible. Passing one value through one prop is what keeps them from
+ * drifting.
+ *
+ * Absent means the CLI's own 13/18. A host that follows an editor font size
+ * (VS Code) hands that down instead.
+ */
+export type TerminalMetrics = { fontSize?: number; lineHeight?: number }
+
 export interface SessionPanelProps {
   client: WorkerDeckClient
   sessionId: string | undefined
@@ -119,12 +185,55 @@ export interface SessionPanelProps {
    * internal ref, so an inline closure is fine). */
   onVitals?: (vitals: SessionVitals) => void
   /**
-   * How the transcript draws a turn — `'cards'` (default) or `'lines'`, the
-   * space-efficient terminal treatment: no boxes, no bubbles, one full-width
-   * hover-highlit row per event behind a gutter glyph. An embedder in a dock
-   * (the VS Code panel) wants `'lines'`; a full-width dashboard usually doesn't.
+   * How the transcript draws a turn — `'cards'` (default, the chat convention)
+   * or `'terminal'`, the CLI's own form: every row on a character cell, no boxes
+   * anywhere, diffs as full-width bands. An embedder in a dock (the VS Code
+   * panel) wants `'terminal'`; a full-width dashboard may prefer cards.
    */
   transcriptVariant?: TranscriptVariant
+  /**
+   * Terminal theme only: the pointer affordances a real terminal cannot offer —
+   * the hover fill, the hover-revealed copy. `false` for none. None of them
+   * costs layout, so turning them off changes no glyph's position. See
+   * {@link TerminalAffordances}.
+   */
+  affordances?: TerminalAffordances | boolean
+  /**
+   * Terminal theme only: the character cell, in whole pixels. See
+   * {@link TerminalMetrics} — it reaches all three of the panel's terminal
+   * surfaces, which is why it is one prop and not two per surface.
+   */
+  terminalMetrics?: TerminalMetrics
+  /**
+   * Terminal theme only: replace the scrollbar with the **overview ruler** — a
+   * `2ch` rail of coloured marks in three lanes (what you typed, the answer and
+   * its turn end, errors and a waiting approval), which you can hover to peek,
+   * click to jump, and drag to scrub.
+   *
+   * Its premise is the terminal theme's own: one line height and one cell make
+   * every row's height derivable, so a mark's position is *computed* rather than
+   * guessed from rows that have not mounted. That is why it is not offered under
+   * `cards` — there the flag is inert.
+   *
+   * `false` keeps the native scrollbar. So does `affordances={false}`, which
+   * leaves the marks painted but inert rather than removing a reader's only way
+   * to scroll.
+   */
+  scrubber?: boolean
+  /**
+   * Bookmarked **item indices**, painted full-width on the rail. Paint only —
+   * the panel neither stores bookmarks nor offers a way to set one, because who
+   * owns that store is the embedder's question (a private pin belongs with the
+   * client's watermarks; a shared one is session metadata on the gateway).
+   */
+  scrubberMarks?: readonly number[]
+  /**
+   * Terminal theme only: hold the prompt of the turn you are reading at the top
+   * of the transcript, as the Claude Code CLI does. The **real row** is pinned
+   * rather than a copy drawn above it, so it lines up with the rows beneath by
+   * construction — see `TranscriptRows`.
+   */
+  stickyPrompt?: boolean
   /**
    * How much air the transcript gives each row — `'comfortable'` (default: a
    * blank line between messages, as the Claude Code CLI leaves) or `'compact'`
@@ -224,6 +333,14 @@ export interface SessionPanelProps {
    * a wildcard.
    */
   toolHost?: UseToolCallHostOptions | false
+  /**
+   * Keep this session's transcript warm across remounts (default true), so
+   * switching back to a recently viewed session paints instantly and replays
+   * only what it missed — `UseClaudeSessionOptions.cacheTranscript`. Set
+   * `false` for an embedder whose principal varies on one gateway URL by means
+   * the client cannot see.
+   */
+  cacheTranscript?: boolean
   className?: string
 }
 
@@ -320,12 +437,18 @@ export function SessionPanel({
   transcriptVariant = 'cards',
   transcriptDensity = 'comfortable',
   transcriptFont = 'sans',
+  affordances,
+  terminalMetrics,
+  scrubber = false,
+  scrubberMarks,
+  stickyPrompt = false,
   controlsSurface = 'internal',
   onControls,
   focusComposerOnClick = false,
   unseen,
   readOnly = false,
   toolHost,
+  cacheTranscript,
   className,
 }: SessionPanelProps) {
   const external = panelSurface === 'external'
@@ -344,6 +467,7 @@ export function SessionPanel({
   const {
     state,
     connection,
+    replaying,
     protocolMismatch,
     models,
     effectiveModel,
@@ -355,7 +479,7 @@ export function SessionPanel({
     setModel,
     setPermissionMode,
     reconnectNow,
-  } = useClaudeSession(client, sessionId, { onProtocolError: setProtocolError })
+  } = useClaudeSession(client, sessionId, { onProtocolError: setProtocolError, cacheTranscript })
   // Callers are told to remount on a session switch, but a changed prop must not leave
   // the previous session's failure on screen.
   useEffect(() => setProtocolError(undefined), [sessionId])
@@ -398,8 +522,39 @@ export function SessionPanel({
   // client. Free for Claude sessions: the guest loads lazily on the first call,
   // which for them never comes.
   useToolCallHost(handle, toolHost === false ? { enabled: false } : toolHost)
+  const terminal = transcriptVariant === 'terminal'
   const capabilities = state.capabilities
 
+  // Plan usage as the *gateway* knows it, merged over this session's own
+  // reading — one derivation, feeding the bar, the terminal status line, the
+  // Usage panel and the vitals an external chrome renders from, because four
+  // surfaces disagreeing about the same percentage is worse than any of them
+  // being stale. A session's own `rate_limit` readings land only at a turn's
+  // edges, so an idle session's numbers age silently and a sibling session's
+  // spend never shows up here at all; `mergeUsage` is where that rule is
+  // written down. Skipped entirely for an engine that reports no windows.
+  const { usage: profileUsage } = useProfileUsage(client, state.session?.profile, {
+    enabled: capabilities.rateLimits,
+  })
+  const usage = useMemo(
+    () =>
+      mergeUsage(
+        { rateLimits: state.rateLimits, updatedAt: state.rateLimitsUpdatedAt },
+        profileUsage,
+      ),
+    [state.rateLimits, state.rateLimitsUpdatedAt, profileUsage],
+  )
+  // Undefined rather than an empty map when nothing has been reported: absent is
+  // *unknown*, and a surface that can't tell the two apart draws 0%.
+  const rateLimits: Record<string, RateLimitInfo> | undefined = useMemo(
+    () => (Object.keys(usage).length > 0 ? usageInfos(usage) : undefined),
+    [usage],
+  )
+  const usageUpdatedAt = useMemo(() => {
+    const stamps = Object.values(usage).map((w) => w.updatedAt)
+    return stamps.length > 0 ? Math.max(...stamps) : undefined
+  }, [usage])
+
   // Vitals out to the embedder, keyed on the readings themselves so an inline
   // closure prop doesn't retrigger it every render.
   const onVitalsRef = useRef(onVitals)
@@ -423,7 +578,7 @@ export function SessionPanel({
       permissionModes,
       cwd: state.cwd,
       contextUsage: state.contextUsage,
-      rateLimits: state.rateLimits,
+      rateLimits,
       itemCount: state.items.length,
     })
   }, [
@@ -437,7 +592,7 @@ export function SessionPanel({
     permissionModes,
     state.cwd,
     state.contextUsage,
-    state.rateLimits,
+    rateLimits,
     state.items.length,
   ])
 
@@ -468,7 +623,9 @@ export function SessionPanel({
   // inert for the moment before it does, and stays inert on a gateway that
   // serves no host files.
   const hostFiles = useHostFileSearch(client, state.cwd)
-  const windows = useMemo(() => rateLimitWindows(state), [state])
+  // Protocol's ordering, over the merged readings — each row keeping its own
+  // date, since they no longer share one clock.
+  const windows = useMemo(() => orderUsageWindows(usage), [usage])
   // Reads a picture the engine left on the host (codex's `image_gen` reports a
   // path, never bytes). Stable and memoized per path: transcript rows re-render
   // on every delta, and a fresh function would re-fetch each time.
@@ -477,6 +634,8 @@ export function SessionPanel({
   // The catch-up strip's way of scrolling the (virtualized, usually unmounted)
   // recap row into view — the transcript fills it in. See TranscriptProps.
   const jumpToRecap = useRef<(() => void) | null>(null)
+  // Filled by the transcript; pressed on send. See `handleSend`.
+  const repinTranscript = useRef<(() => void) | null>(null)
 
   // "/model" is handled panel-side (see handleSend) — surface it in the autocomplete
   // even though the CLI's command list doesn't include it.
@@ -510,6 +669,13 @@ export function SessionPanel({
     // Typing into a session is the clearest possible statement that you have
     // read it — nothing left to catch up on.
     setCaughtUp(true)
+    // ...and sending is the statement that you want to watch what happens next,
+    // so following resumes here too. Scrolling up escapes the bottom lock, and
+    // without this the reply streams in off screen: the transcript stays parked
+    // where you were reading and sending looks like it did nothing. Ordered
+    // before `send` only for readability — the re-pin is instant and the first
+    // row is a round trip away either way.
+    repinTranscript.current?.()
     send(text, attachmentIds)
   }
 
@@ -613,6 +779,7 @@ export function SessionPanel({
   const statusBar = statusExternal ? null : (
     <StatusBar
       state={state}
+      rateLimits={rateLimits}
       connection={connection}
       placement={statusPlacement}
       controls={controlsInStatus && !readOnly ? sessionControls : undefined}
@@ -635,9 +802,9 @@ export function SessionPanel({
   }
 
   return (
-    // The variant is a panel-wide fact, not a transcript-only one: the approval
-    // and question prompts live outside the scroller but are line items in the
-    // same run, and they read `useLines()` like every other row.
+    // The variant is a panel-wide fact, not a transcript-only one: the composer
+    // and the pending prompts live outside the scroller but belong to the same
+    // run, and they read it from this context rather than a prop chain.
     <TranscriptVariantProvider value={transcriptVariant}>
       <TranscriptDensityProvider value={transcriptDensity}>
       <div
@@ -669,27 +836,34 @@ export function SessionPanel({
           hostImage={hostImage}
           variant={transcriptVariant}
           density={transcriptDensity}
+          fontSize={terminalMetrics?.fontSize}
+          lineHeight={terminalMetrics?.lineHeight}
+          affordances={affordances}
+          stickyPrompt={stickyPrompt}
+          scrubber={scrubber}
+          scrubberMarks={scrubberMarks}
+          replaying={replaying}
           catchUp={
             catchUp && newCount > 0
               ? { from: catchUp.itemCount, since: catchUp.since }
               : undefined
           }
           jumpToRecapRef={jumpToRecap}
+          repinRef={repinTranscript}
         />
         {/* The way back into what you missed. Above the composer because that is
             where the eye already is on returning, and because the transcript
-            itself opens pinned to the newest row. */}
-        {catchUp && newCount > 0 ? (
+            itself opens pinned to the newest row. Held with the transcript
+            while the replay lands — its count is `state.items.length`, which
+            during the replay is a number visibly climbing toward its answer. */}
+        {catchUp && newCount > 0 && !replaying ? (
           <div className='px-3 pb-1'>
             <div
               data-slot='catch-up'
               className='mx-auto flex w-full max-w-[var(--wd-content-max-w,48rem)] items-center gap-2 text-label text-fg-3'>
               <span
                 aria-hidden
-                className={cn(
-                  'select-none',
-                  transcriptVariant === 'lines' ? 'text-fg-3' : 'text-accent',
-                )}>
+                className={cn('select-none', terminal ? 'text-fg-3' : 'text-accent')}>
                 ※
               </span>
               <span className='min-w-0 flex-1 truncate'>
@@ -718,11 +892,30 @@ export function SessionPanel({
             `awaiting approval`, and the place that can act on it is wherever the
             session is actually driven. */}
         {!readOnly && capabilities.interactiveApprovals && state.pendingApprovals.length > 0 ? (
-          <div className='px-3 pb-2'>
-            <div className='mx-auto flex w-full max-w-[var(--wd-content-max-w,48rem)] flex-col gap-2'>
-              {state.pendingApprovals.map((request) =>
-                request.toolName === 'AskUserQuestion' &&
-                parseUserQuestions(request.input).length > 0 ? (
+          <div className={cn(terminal ? 'pb-2' : 'px-3 pb-2')}>
+            <PromptSurface terminal={terminal} metrics={terminalMetrics} affordances={affordances}>
+              {state.pendingApprovals.map((request) => {
+                const isQuestion =
+                  request.toolName === 'AskUserQuestion' &&
+                  parseUserQuestions(request.input).length > 0
+                if (terminal) {
+                  return isQuestion ? (
+                    <TerminalQuestionPrompt
+                      key={request.id}
+                      request={request}
+                      onAnswer={approve}
+                      onDismiss={(id) => deny(id, 'Question dismissed by user')}
+                    />
+                  ) : (
+                    <TerminalPermissionPrompt
+                      key={request.id}
+                      request={request}
+                      onApprove={approve}
+                      onDeny={deny}
+                    />
+                  )
+                }
+                return isQuestion ? (
                   <QuestionPrompt
                     key={request.id}
                     request={request}
@@ -736,9 +929,9 @@ export function SessionPanel({
                     onApprove={approve}
                     onDeny={deny}
                   />
-                ),
-              )}
-            </div>
+                )
+              })}
+            </PromptSurface>
           </div>
         ) : null}
         {readOnly ? null : (
@@ -758,6 +951,9 @@ export function SessionPanel({
           }
           layout={controlsExternal ? 'inline' : 'stacked'}
           toolbar={controlsExternal ? undefined : sessionControls}
+          fontSize={terminalMetrics?.fontSize}
+          lineHeight={terminalMetrics?.lineHeight}
+          affordances={affordances}
         />
         )}
         {/* Below the composer, along the foot of the panel — the editor
@@ -785,7 +981,7 @@ export function SessionPanel({
             subscriptionType={state.subscriptionType}
             engine={state.engine ?? 'claude'}
             totalCostUsd={state.totalCostUsd}
-            updatedAt={state.rateLimitsUpdatedAt}
+            updatedAt={usageUpdatedAt}
             open={panel === 'usage'}
             onOpenChange={(next) => setPanel(next ? 'usage' : undefined)}
           />

package/src/components/agent/SessionWorkspace.tsx

@@ -17,6 +17,7 @@ import { EditorTabs } from './EditorTabs.tsx'
 import { FileTree } from './FileTree.tsx'
 import { FileViewer } from './FileViewer.tsx'
 import { SessionPanel, type SessionPanelProps } from './SessionPanel.tsx'
+import { resolveAgainstCwd, usePathLinks } from './use-path-links.ts'
 
 export interface SessionWorkspaceProps {
   client: WorkerDeckClient
@@ -35,6 +36,11 @@ export interface SessionWorkspaceProps {
   transcriptVariant?: SessionPanelProps['transcriptVariant']
   transcriptDensity?: SessionPanelProps['transcriptDensity']
   transcriptFont?: SessionPanelProps['transcriptFont']
+  /** The overview ruler in place of the scrollbar — see `SessionPanel`. */
+  scrubber?: SessionPanelProps['scrubber']
+  scrubberMarks?: SessionPanelProps['scrubberMarks']
+  /** The last prompt pinned above the transcript — see `SessionPanel`. */
+  stickyPrompt?: SessionPanelProps['stickyPrompt']
   /** Which end of the panel the status bar sits at — see `SessionPanel`. */
   statusPlacement?: SessionPanelProps['statusPlacement']
   controlsSurface?: SessionPanelProps['controlsSurface']
@@ -94,6 +100,9 @@ export function SessionWorkspace({
   transcriptVariant,
   transcriptDensity,
   transcriptFont,
+  scrubber,
+  scrubberMarks,
+  stickyPrompt,
   statusPlacement,
   controlsSurface,
   unseen,
@@ -118,6 +127,7 @@ export function SessionWorkspace({
   // editor asks before it offers to save anything.
   const { canWrite } = useHostFileRoots(client)
 
+
   // Nothing here can save on the user's behalf when the tab is going away, so
   // the browser's own guard is the last line. Registered only while there is
   // something to lose — an unconditional handler makes every navigation prompt.
@@ -172,6 +182,22 @@ export function SessionWorkspace({
 
   const column = useRef<HTMLDivElement>(null)
   const columnHeight = useElementHeight(column)
+  // Cmd/Ctrl+click a file the agent named and it opens in the editor above —
+  // the workspace is the only surface that *has* an editor, which is why this
+  // lives here and not in the panel. Gated on the tree being available: without
+  // a host filesystem there is nothing to open, and a link that cannot resolve
+  // is worse than plain text. Monaco is excluded because Cmd+click already
+  // means go-to-definition in there, and every identifier would match.
+  const openPath = useCallback(
+    ({ path }: { path: string }) => files.open(resolveAgainstCwd(path, cwd)),
+    [files.open, cwd],
+  )
+  usePathLinks({
+    container: column,
+    onOpen: openPath,
+    enabled: tree.available,
+    ignore: '.monaco-editor',
+  })
   const editorMax = Math.max(EDITOR_MIN, columnHeight - AGENT_MIN)
 
   // The embedder's header is app chrome and belongs above everything — but only
@@ -278,6 +304,9 @@ export function SessionWorkspace({
           transcriptVariant={transcriptVariant}
           transcriptDensity={transcriptDensity}
           transcriptFont={transcriptFont}
+          scrubber={scrubber}
+          scrubberMarks={scrubberMarks}
+          stickyPrompt={stickyPrompt}
           controlsSurface={controlsSurface}
           statusPlacement={statusPlacement}
           unseen={unseen}

package/src/components/agent/StatusBar.tsx

@@ -9,9 +9,19 @@ import { Tip } from '../ui/Tooltip.tsx'
 import { cn } from '../../lib/utils.ts'
 import { formatCost, formatCountdown, formatTokens } from '../../lib/format.ts'
 import { STATUS_META } from './status.ts'
+import { useTranscriptVariant } from './transcript-variant.tsx'
 
 export interface StatusBarProps {
   state: TranscriptState
+  /**
+   * Plan windows to draw, when they should not be the session's own. The panel
+   * hands over the gateway's per-profile state merged over this transcript's
+   * reading (`mergeUsage`): a session's own `rate_limit` readings arrive only at
+   * a turn's edges, so one idle since yesterday would otherwise render
+   * yesterday's number as current. Absent = `state.rateLimits`, which is what a
+   * bar composed by hand outside the panel gets.
+   */
+  rateLimits?: Record<string, RateLimitInfo>
   /** @deprecated Pass {@link StatusBarProps.connection}; kept so an embedder
    * still handing over a boolean keeps working. */
   connected?: boolean
@@ -167,6 +177,7 @@ function Slot({ onClick, hint, children }: { onClick?: () => void; hint: string;
 
 export function StatusBar({
   state,
+  rateLimits,
   connected,
   connection,
   onOpenStatus,
@@ -179,9 +190,11 @@ export function StatusBar({
 }: StatusBarProps) {
   const meta = STATUS_META[state.status]
   const now = useNow()
-  const session = state.rateLimits?.five_hour
-  const weekly = state.rateLimits?.seven_day
+  const windows = rateLimits ?? state.rateLimits
+  const session = windows?.five_hour
+  const weekly = windows?.seven_day
   const link: ConnectionState = connection ?? (connected === false ? 'reconnecting' : 'live')
+  const terminal = useTranscriptVariant() === 'terminal'
   return (
     <div
       data-slot='status-bar'
@@ -198,8 +211,11 @@ export function StatusBar({
         // one piece of chrome, and a pixel of drift between them shows.
         'flex h-[38px] items-baseline gap-2 border-border bg-surface p-1.5',
         // The rule goes between the bar and the content, so which edge it sits
-        // on follows the placement.
-        placement === 'bottom' ? 'border-t' : 'border-b',
+        // on follows the placement — except under the terminal theme at the
+        // foot, where the composer directly above already closes itself with a
+        // rule of its own. Two adjacent 1px rules is a 2px rule with a seam in
+        // it, and it is off the line grid besides.
+        placement === 'bottom' ? (terminal ? undefined : 'border-t') : 'border-b',
         className,
       )}>
       {/* One slot, two meanings: connection trouble wins it, because a session