@workerdeck/ui 0.13.0 → 0.16.0

package/src/components/agent/SessionPanel.tsx

@@ -8,16 +8,25 @@ 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,
   type TranscriptState,
+  type UseToolCallHostOptions,
 } from '@workerdeck/react'
 import {
   ChartPie,
@@ -46,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'
@@ -53,10 +67,64 @@ import {
   TranscriptDensityProvider,
   TranscriptVariantProvider,
   type TranscriptDensity,
+  type TranscriptFont,
   type TranscriptVariant,
 } 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
@@ -117,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'`
@@ -131,18 +242,36 @@ export interface SessionPanelProps {
    * dock is allowed to be roomy.
    */
   transcriptDensity?: TranscriptDensity
+  /**
+   * The panel's typeface — `'sans'` (default, the host's UI font) or `'mono'`,
+   * which repoints the sans token at the mono stack **for this subtree only**.
+   *
+   * The third reader preference beside variant and density, and the same kind of
+   * thing: how a transcript should read is a property of the person reading it.
+   * Scoped to the panel because that is the whole claim — a monospace agent view
+   * next to an ordinary app, not a monospace app.
+   */
+  transcriptFont?: TranscriptFont
   /**
    * Where the session's own controls — model and permission mode — live.
    * `'internal'` (default) draws them in the composer's toolbar row.
-   * `'external'` draws neither, and the composer collapses to a single line
-   * with its attach/send buttons beside the field: the embedder renders the
-   * pickers in its own chrome (VS Code's status bar, where a click opens a
-   * QuickPick) and drives them through {@link onControls}.
+   * `'status'` draws them in the panel's OWN status bar, beside the readings
+   * they act on; the composer collapses to a single line either way. That is
+   * VS Code's arrangement without VS Code — a host whose panel carries a status
+   * bar of its own (`statusPlacement: 'bottom'`) gets the same streamlined
+   * shape without having to host the pickers itself.
+   * `'external'` draws neither: the embedder renders the pickers in its own
+   * chrome (VS Code's window status bar, where a click opens a QuickPick) and
+   * drives them through {@link onControls}.
+   *
+   * `'status'` needs a status bar to put them in — with
+   * `statusSurface: 'external'` there is none, and the two together would hide
+   * the controls entirely, so that combination falls back to the composer.
    *
    * The options themselves ride {@link SessionVitals} — an embedder must not
    * attach a second time to learn what the models are.
    */
-  controlsSurface?: 'internal' | 'external'
+  controlsSurface?: 'internal' | 'external' | 'status'
   /**
    * Handed the session's setters once the panel is live, and `undefined` on
    * unmount. The counterpart to `controlsSurface: 'external'`: vitals carry the
@@ -188,6 +317,30 @@ export interface SessionPanelProps {
    * enforcement lives on the gateway.
    */
   readOnly?: boolean
+  /**
+   * Options for the browser tool host this panel runs on its own attach — or
+   * `false` to run none at all.
+   *
+   * The panel hosts server-bridged tool calls itself, because the bridge asks
+   * the *first attached client* and the panel owns the session's one attach: an
+   * embedder subscribing to the same handle separately would find this host
+   * already answering, and refusing, anything outside its allow-list. So the
+   * options come through here.
+   *
+   * Merged over the defaults, which host `eval_script` alone. Widening `tools`
+   * is a real grant — this tab will execute what the gateway asks it to for
+   * every name in the list — so it names them explicitly rather than accepting
+   * 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
 }
 
@@ -283,16 +436,27 @@ export function SessionPanel({
   onVitals,
   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'
   const statusExternal = statusSurface === 'external'
-  const controlsExternal = controlsSurface === 'external'
+  // Both non-internal surfaces take the pickers out of the composer, which is
+  // what collapses it to a single line.
+  const controlsInStatus = controlsSurface === 'status' && !statusExternal
+  const controlsExternal = controlsSurface === 'external' || controlsInStatus
   // Rejected commands (the CLI refusing a permission-mode switch, say) render INSIDE
   // the panel rather than through `toast`. The panel does not mount a `Toaster`, and
   // an embedder that doesn't either would drop the only signal that a command failed
@@ -303,6 +467,7 @@ export function SessionPanel({
   const {
     state,
     connection,
+    replaying,
     protocolMismatch,
     models,
     effectiveModel,
@@ -314,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])
@@ -356,9 +521,40 @@ export function SessionPanel({
   // SAME handle the panel attached with — the bridge asks the first attached
   // client. Free for Claude sessions: the guest loads lazily on the first call,
   // which for them never comes.
-  useToolCallHost(handle)
+  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)
@@ -382,7 +578,7 @@ export function SessionPanel({
       permissionModes,
       cwd: state.cwd,
       contextUsage: state.contextUsage,
-      rateLimits: state.rateLimits,
+      rateLimits,
       itemCount: state.items.length,
     })
   }, [
@@ -396,7 +592,7 @@ export function SessionPanel({
     permissionModes,
     state.cwd,
     state.contextUsage,
-    state.rateLimits,
+    rateLimits,
     state.items.length,
   ])
 
@@ -427,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.
@@ -436,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.
@@ -469,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)
   }
 
@@ -535,11 +742,47 @@ export function SessionPanel({
   // Built once and placed at one end or the other — the bar has a `⋯` menu and
   // three open handlers, and two copies of that in the tree would be two things
   // to keep in step.
+  // Built once, placed by `controlsSurface`: the composer's toolbar row, or the
+  // status bar beside the readings they act on, or nowhere at all when the host
+  // draws them in its own chrome.
+  const sessionControls = (
+    <>
+      {/* Codex reports no `capabilities` event, so its models arrive from the
+          profile catalog instead — without that fallback its picker would be
+          permanently empty and the session unswitchable. */}
+      {models.length ? (
+        <ModelSelect
+          models={models}
+          model={effectiveModel}
+          onModelChange={setModel}
+          disabled={ended}
+          // The bar is one line of label-sized text; a 24px trigger would set
+          // its height instead of fitting in it.
+          className={controlsInStatus ? 'h-5' : undefined}
+        />
+      ) : null}
+      {state.permissionMode ? (
+        <PermissionModeSelect
+          mode={state.permissionMode}
+          onModeChange={setPermissionMode}
+          // Only what this engine implements — the rest would come back as a
+          // protocol_error.
+          modes={capabilities.permissionModes}
+          canBypass={state.session?.canBypassPermissions}
+          disabled={ended}
+          className={controlsInStatus ? 'h-5' : undefined}
+        />
+      ) : null}
+    </>
+  )
+
   const statusBar = statusExternal ? null : (
     <StatusBar
       state={state}
+      rateLimits={rateLimits}
       connection={connection}
       placement={statusPlacement}
+      controls={controlsInStatus && !readOnly ? sessionControls : undefined}
       onOpenStatus={external && !onOpenPanel ? undefined : () => openPanel('info')}
       onOpenContext={external && !onOpenPanel ? undefined : () => openPanel('context')}
       onOpenUsage={external && !onOpenPanel ? undefined : () => openPanel('usage')}
@@ -559,13 +802,17 @@ 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
         data-slot='session-panel'
+        // The typeface is a cascade fact, not a React one — one attribute here,
+        // and the `[data-agent-font]` rule in theme.css does the rest. Nothing
+        // outside this subtree can pick it up.
+        data-agent-font={transcriptFont}
         onClick={handleClick}
         className={cn('flex h-full min-h-0 flex-col overflow-hidden bg-bg', className)}>
         {headerTakesActions ? header({ actions: menu }) : header}
@@ -589,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'>
@@ -638,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}
@@ -656,9 +929,9 @@ export function SessionPanel({
                     onApprove={approve}
                     onDeny={deny}
                   />
-                ),
-              )}
-            </div>
+                )
+              })}
+            </PromptSurface>
           </div>
         ) : null}
         {readOnly ? null : (
@@ -677,34 +950,10 @@ export function SessionPanel({
               : undefined
           }
           layout={controlsExternal ? 'inline' : 'stacked'}
-          toolbar={
-            controlsExternal ? undefined : (
-            <>
-              {/* Codex reports no `capabilities` event, so its models arrive from
-                  the profile catalog instead — without that fallback its picker
-                  would be permanently empty and the session unswitchable. */}
-              {models.length ? (
-                <ModelSelect
-                  models={models}
-                  model={effectiveModel}
-                  onModelChange={setModel}
-                  disabled={ended}
-                />
-              ) : null}
-              {state.permissionMode ? (
-                <PermissionModeSelect
-                  mode={state.permissionMode}
-                  onModeChange={setPermissionMode}
-                  // Only what this engine implements — the rest would come back as
-                  // a protocol_error.
-                  modes={capabilities.permissionModes}
-                  canBypass={state.session?.canBypassPermissions}
-                  disabled={ended}
-                />
-              ) : null}
-            </>
-            )
-          }
+          toolbar={controlsExternal ? undefined : sessionControls}
+          fontSize={terminalMetrics?.fontSize}
+          lineHeight={terminalMetrics?.lineHeight}
+          affordances={affordances}
         />
         )}
         {/* Below the composer, along the foot of the panel — the editor
@@ -732,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
@@ -34,8 +35,15 @@ 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']
   unseen?: SessionPanelProps['unseen']
   /** Viewer mode — no composer, no approval prompts. Forwarded verbatim to
    * {@link SessionPanel}; the file tree and editor are unaffected, since reading
@@ -91,7 +99,12 @@ export function SessionWorkspace({
   header,
   transcriptVariant,
   transcriptDensity,
+  transcriptFont,
+  scrubber,
+  scrubberMarks,
+  stickyPrompt,
   statusPlacement,
+  controlsSurface,
   unseen,
   readOnly,
   onVitals,
@@ -114,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.
@@ -168,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
@@ -225,6 +255,7 @@ export function SessionWorkspace({
           onValueChange={setRailWidth}
           min={RAIL_MIN}
           max={RAIL_MAX}
+          defaultValue={defaultRailWidth}
           aria-label='Resize the file tree'
         />
       ) : null}
@@ -272,6 +303,11 @@ export function SessionWorkspace({
           header={hoisted}
           transcriptVariant={transcriptVariant}
           transcriptDensity={transcriptDensity}
+          transcriptFont={transcriptFont}
+          scrubber={scrubber}
+          scrubberMarks={scrubberMarks}
+          stickyPrompt={stickyPrompt}
+          controlsSurface={controlsSurface}
           statusPlacement={statusPlacement}
           unseen={unseen}
           readOnly={readOnly}