@workerdeck/ui 0.21.0 → 0.23.0

package/src/components/agent/Scrubber.tsx

@@ -0,0 +1,248 @@
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import type { PermissionRequest } from '@workerdeck/protocol'
+import type { TranscriptItem } from '@workerdeck/react'
+import { toolInputPreview } from '../../lib/format.ts'
+import { cn } from '../../lib/utils.ts'
+import {
+  approvalCluster,
+  buildMarks,
+  clusterMarks,
+  doneLine,
+  excerpt,
+  KIND_NAME,
+  nearestMember,
+  type Cluster,
+  type Mark,
+} from './scrubber-marks.ts'
+
+/**
+ * The cards variant's overview rail — the terminal scrubber's proportional
+ * sibling.
+ *
+ * Positions are **index space**, not pixel space: mark y is
+ * `itemIndex / items.length` of the rail, because proportional text and
+ * variable row heights leave the cards transcript with no honest pixel claim
+ * (the terminal rail's positions ride the height calculator, which has none
+ * here). Less precise, but it still answers the reader's questions — where did
+ * I type, where did it fail, where is the approval waiting.
+ *
+ * And because the positions are approximate, the rail is an **annotation, not
+ * a scrollbar**: no drag-to-scrub, no viewport band (meaningless without pixel
+ * positions), and the native scrollbar stays. The container never takes the
+ * pointer — only the marks do, when interactive — so the scrollbar keeps
+ * working straight through the paint. Hover peeks (from `items`, never the DOM
+ * — the row a mark describes is usually unmounted) and a click jumps to the
+ * mark's item through `onJumpToItem`.
+ */
+
+export interface ScrubberProps {
+  items: readonly TranscriptItem[]
+  pendingApprovals: readonly PermissionRequest[]
+  /** The catch-up boundary's item index, when the recap is spliced in. */
+  recapItemIndex?: number
+  /** Bookmarked item indices. Paint only — no store, no set affordance. */
+  bookmarks?: readonly number[]
+  /** The sub-agent takeover's parent id, when this rail belongs to a frame —
+   * what "top level" means to the mark walk (see `buildMarks`). */
+  frameParentId?: string
+  /** Whether the rail answers the pointer (hover peek, click to jump). False
+   * renders passive paint. */
+  interactive?: boolean
+  /** Jump to an item index. The caller owns the row mapping — item indices are
+   * not row indices (`rowIndexForItem`). */
+  onJumpToItem?: (itemIndex: number) => void
+  className?: string
+}
+
+function peekContent(
+  cluster: Cluster,
+  /** The member the pointer resolved to — see {@link nearestMember}. */
+  first: Mark | undefined,
+  items: readonly TranscriptItem[],
+  pendingApprovals: readonly PermissionRequest[],
+): ReactNode {
+  const more = cluster.marks.length > 1 ? ` · ${cluster.marks.length} marks` : ''
+  let body: ReactNode = null
+  if (cluster.kind === 'approval') {
+    const request = pendingApprovals[0]
+    body = request ? (
+      <>
+        <div>{request.title ?? 'Permission required'}</div>
+        <div className='wd-scrub-ex' data-tone='muted'>
+          {`${request.displayName ?? request.toolName}(${toolInputPreview(request.input)})`}
+        </div>
+      </>
+    ) : null
+  } else if (first && first.kind !== 'recap') {
+    const item = items[first.itemIndex]
+    if (first.kind === 'turn' || first.kind === 'turnFailed') {
+      // The merged mark's peek carries both halves: the message the turn ended
+      // on, and the done-line (with its reasons, when it failed).
+      const turn = first.turnIndex === undefined ? undefined : items[first.turnIndex]
+      body = (
+        <>
+          {item?.kind === 'assistant_text' ? <div className='wd-scrub-ex'>{item.text}</div> : null}
+          {turn?.kind === 'turn_result' ? (
+            <>
+              <div data-tone={turn.isError ? 'danger' : 'muted'}>{doneLine(turn)}</div>
+              {turn.errors?.map((message, index) => (
+                <div key={index} data-tone='danger'>
+                  {message}
+                </div>
+              ))}
+            </>
+          ) : null}
+        </>
+      )
+    } else if (item) {
+      const failure =
+        first.kind === 'toolFailed' && item.kind === 'tool_call'
+          ? item.result?.text.split('\n').find((line) => line.trim() !== '')
+          : undefined
+      body = (
+        <>
+          <div
+            className='wd-scrub-ex'
+            data-tone={
+              first.kind === 'error' || first.kind === 'toolFailed' ? 'danger' : undefined
+            }>
+            {first.kind === 'user' ? <span data-tone='muted'>{'❯ '}</span> : null}
+            {excerpt(item)}
+          </div>
+          {/* Which tool failed is rarely the question — the first non-blank
+              line of what it said back is the thing worth peeking at. */}
+          {failure ? (
+            <div className='wd-scrub-ex' data-tone='danger'>
+              {failure}
+            </div>
+          ) : null}
+        </>
+      )
+    }
+  }
+  return (
+    <>
+      <div data-tone='muted'>
+        {KIND_NAME[first?.kind ?? cluster.kind]}
+        {more}
+      </div>
+      {body}
+    </>
+  )
+}
+
+export function Scrubber({
+  items,
+  pendingApprovals,
+  recapItemIndex,
+  bookmarks,
+  frameParentId,
+  interactive = false,
+  onJumpToItem,
+  className,
+}: ScrubberProps) {
+  const railRef = useRef<HTMLDivElement | null>(null)
+  const peekRef = useRef<HTMLDivElement | null>(null)
+  const [railH, setRailH] = useState(0)
+  const [peek, setPeek] = useState<{ cluster: Cluster; mark: Mark | undefined; y: number } | null>(
+    null,
+  )
+
+  useEffect(() => {
+    const element = railRef.current
+    if (!element) return
+    const observer = new ResizeObserver(() => setRailH(element.clientHeight))
+    observer.observe(element)
+    setRailH(element.clientHeight)
+    return () => observer.disconnect()
+  }, [])
+
+  // A peek is a snapshot of the cluster it was opened on; if the transcript
+  // changes underneath (a fixture/session swap, a burst of new items), drop it
+  // rather than describe items that no longer exist.
+  useEffect(() => {
+    setPeek(null)
+  }, [items])
+
+  // The peek can be taller than the space beside its mark — clamp it into the
+  // rail after it has a measured height.
+  useLayoutEffect(() => {
+    const element = peekRef.current
+    if (!element || !peek) return
+    const height = element.offsetHeight
+    const railHeight = railRef.current?.clientHeight ?? 0
+    element.style.top = `${Math.max(4, Math.min(railHeight - height - 4, peek.y - height / 2))}px`
+  }, [peek])
+
+  const clusters = useMemo(() => {
+    if (railH <= 0) return []
+    const built = clusterMarks(
+      buildMarks(items, { frameParentId, bookmarks, recapItemIndex }),
+      railH,
+      items.length,
+    )
+    if (pendingApprovals.length > 0) built.push(approvalCluster(railH))
+    return built
+  }, [items, frameParentId, bookmarks, recapItemIndex, pendingApprovals, railH])
+
+  /** A pointer's y in rail space. */
+  const railY = (clientY: number): number =>
+    clientY - (railRef.current?.getBoundingClientRect().top ?? 0)
+
+  const activate = (cluster: Cluster, clientY: number) => {
+    if (cluster.kind === 'approval' && cluster.marks.length === 0) {
+      // The approval prompt renders below the transcript — the closest an
+      // item jump can take the reader is the tail.
+      if (items.length > 0) onJumpToItem?.(items.length - 1)
+      return
+    }
+    const mark = nearestMember(cluster, railY(clientY))
+    if (mark) onJumpToItem?.(mark.itemIndex)
+  }
+
+  const showPeek = (cluster: Cluster, clientY: number) => {
+    const y = railY(clientY)
+    const mark = nearestMember(cluster, y)
+    setPeek((previous) =>
+      previous && previous.cluster === cluster && previous.mark === mark
+        ? previous
+        : { cluster, mark, y: Math.min(Math.max(y, cluster.y), cluster.y + cluster.h) },
+    )
+  }
+
+  // Paint either way: the rail duplicates information the transcript itself
+  // carries, and interactive it is a pointer affordance rather than the
+  // scroll surface — the native scrollbar stays the accessible one.
+  return (
+    <div
+      ref={railRef}
+      className={cn('wd-scrubber', className)}
+      data-interactive={interactive || undefined}
+      aria-hidden>
+      {clusters.map((cluster, index) => (
+        <div
+          key={index}
+          className='wd-scrub-mark'
+          data-lane={cluster.lane}
+          data-kind={cluster.kind}
+          style={{ top: cluster.y, height: cluster.h }}
+          {...(interactive
+            ? {
+                onClick: (event) => activate(cluster, event.clientY),
+                onPointerEnter: (event) => showPeek(cluster, event.clientY),
+                // A chain-merged bar can span the rail; sliding along it
+                // retargets the peek to the member under the pointer.
+                onPointerMove: (event) => showPeek(cluster, event.clientY),
+                onPointerLeave: () => setPeek(null),
+              }
+            : null)}
+        />
+      ))}
+      {peek ? (
+        <div ref={peekRef} className='wd-scrub-peek' style={{ top: peek.y }}>
+          {peekContent(peek.cluster, peek.mark, items, pendingApprovals)}
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/components/agent/SessionList.tsx

@@ -11,9 +11,10 @@ export interface SessionListItemProps {
   active?: boolean
   onSelect?: (id: string) => void
   onDelete?: (id: string) => void
+  className?: string
 }
 
-export function SessionListItem({ session, active, onSelect, onDelete }: SessionListItemProps) {
+export function SessionListItem({ session, active, onSelect, onDelete, className }: SessionListItemProps) {
   const meta = STATUS_META[session.status]
   return (
     <div
@@ -22,6 +23,7 @@ export function SessionListItem({ session, active, onSelect, onDelete }: Session
       className={cn(
         'group flex w-full items-center gap-2 rounded-md border border-transparent px-2.5 py-2 text-left transition-colors',
         active ? 'border-border bg-surface' : 'hover:bg-surface-hover',
+        className,
       )}>
       <button
         type='button'

package/src/components/agent/SessionPanel.tsx

@@ -98,7 +98,7 @@ function PromptSurface({
 }) {
   if (!terminal) {
     return (
-      <div className='mx-auto flex w-full max-w-[var(--wd-content-max-w,48rem)] flex-col gap-2'>
+      <div className='mx-auto flex w-full max-w-[var(--wd-transcript-max-width)] flex-col gap-2'>
         {children}
       </div>
     )
@@ -297,10 +297,10 @@ export interface SessionPanelProps {
    */
   onSubagentChange?: (toolUseId: string | undefined) => void
   /**
-   * 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`.
+   * Hold the prompt of the turn you are reading at the top of the transcript.
+   * Works in both variants: the terminal clips to one line (as the CLI does),
+   * cards shows a frosted bar. The **real row** is pinned rather than a copy
+   * drawn above it, so it lines up with the rows beneath by construction.
    */
   stickyPrompt?: boolean
   /**
@@ -410,6 +410,68 @@ export interface SessionPanelProps {
    * the client cannot see.
    */
   cacheTranscript?: boolean
+  /**
+   * Replaces the default empty state when the transcript has no messages. Pass
+   * your product's own onboarding content instead of WorkerDeck's generic
+   * "`>_` Tell the agent what to do." placeholder.
+   */
+  emptyState?: ReactNode
+  /**
+   * Called when a link in the transcript is clicked. The embedder decides what
+   * happens: navigate in-app, open a browser tab, show a confirmation, or
+   * suppress.
+   *
+   * Return `true` (or a truthy value) to indicate the click was handled — the
+   * default action (`window.open(href, '_blank')`) is suppressed. Return
+   * `false` / `undefined` / nothing to let the browser open the link normally.
+   *
+   * Absent means "browser default" — links open in a new tab as Streamdown's
+   * `target="_blank"` intends. VS Code's webview overrides this through its own
+   * native handler (the "allow once / add to allowlist" dialog) and does not
+   * need this prop.
+   *
+   * **Typical embedder patterns:**
+   * - Relative URLs → in-app navigation, no confirmation
+   * - External URLs → confirmation dialog, or open unconditionally
+   * - Suppress all links → `() => true`
+   */
+  onLinkClick?: (href: string) => boolean | void
+  /**
+   * Client-side tool handlers. Each key is a tool name the model can call; the
+   * handler receives the model's input and returns a result. The tool's
+   * **schema** must be registered server-side (via `tools` on
+   * `ProviderRunnerOptions`), but the handler runs here — right where the data
+   * the tool needs lives.
+   *
+   * Shorthand for `toolHost.clientTools`; when both are set, this wins for
+   * overlapping names.
+   *
+   * ```tsx
+   * <SessionPanel
+   *   clientTools={{
+   *     app_navigate: async (input) => {
+   *       router.push((input as { path: string }).path)
+   *       return { value: 'navigated' }
+   *     },
+   *   }}
+   * />
+   * ```
+   */
+  clientTools?: Record<string, import('@workerdeck/react').ClientToolHandler>
+  /**
+   * Base font size in **whole pixels**. Drives the overall scale of everything
+   * the panel draws — prompt, output, markdown, status bar — in both variants.
+   *
+   * Under the terminal theme it sets `--term-font-size` and derives
+   * `--term-line` at the CLI's own 13 : 18 ratio (unless {@link terminalMetrics}
+   * overrides those individually). Under cards it sets the panel root's
+   * `font-size`, which scales every `rem`/`em`-based token the type scale uses.
+   *
+   * Absent means "platform default": 13 px for the terminal theme, the
+   * inherited body size for cards. That is the right choice for a host that has
+   * no preference — the panel reads at the size the rest of the app does.
+   */
+  fontSize?: number
   className?: string
 }
 
@@ -483,6 +545,9 @@ export type SessionVitals = {
    * as its "seen" watermark while the panel is actually on screen, and compares
    * against later to know what is new. */
   itemCount: number
+  /** Session-cumulative cost in USD. The internal status bar renders this via
+   * `formatCost`; an external host needs it to reproduce that reading. */
+  totalCostUsd: number
 }
 
 /**
@@ -520,9 +585,23 @@ export function SessionPanel({
   unseen,
   readOnly = false,
   toolHost,
+  clientTools,
   cacheTranscript,
+  emptyState,
+  onLinkClick,
+  fontSize,
   className,
 }: SessionPanelProps) {
+  // ── Font size resolution ──────────────────────────────────────────────
+  // `fontSize` is the panel-wide knob; `terminalMetrics` is the terminal-
+  // specific override that predates it. The two compose: `fontSize` provides
+  // the default the terminal derives from (13 : 18 ratio), and individual
+  // terminalMetrics fields can still override each axis.
+  const effectiveTermFontSize = terminalMetrics?.fontSize ?? fontSize
+  const effectiveTermLineHeight =
+    terminalMetrics?.lineHeight ??
+    (fontSize !== undefined ? Math.round(fontSize * (18 / 13)) : undefined)
+
   const external = panelSurface === 'external'
   const statusExternal = statusSurface === 'external'
   // Both non-internal surfaces take the pickers out of the composer, which is
@@ -704,7 +783,14 @@ 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, toolHost === false ? { enabled: false } : toolHost)
+  useToolCallHost(
+    handle,
+    toolHost === false
+      ? { enabled: false }
+      : clientTools
+        ? { ...toolHost, clientTools: { ...toolHost?.clientTools, ...clientTools } }
+        : toolHost,
+  )
   const terminal = transcriptVariant === 'terminal'
 
   // What the strip reads. The frame's items and its spawning call both come from
@@ -786,6 +872,7 @@ export function SessionPanel({
       contextUsage: state.contextUsage,
       rateLimits,
       itemCount: state.items.length,
+      totalCostUsd: state.totalCostUsd,
     })
   }, [
     state.status,
@@ -800,6 +887,7 @@ export function SessionPanel({
     state.contextUsage,
     rateLimits,
     state.items.length,
+    state.totalCostUsd,
   ])
 
   // The commands back in. One stable object reading through refs, so an
@@ -1000,6 +1088,31 @@ export function SessionPanel({
     />
   )
 
+  // ── Link click handler ────────────────────────────────────────────────
+  // When onLinkClick is provided, intercept <a> clicks on the panel root so
+  // the embedder controls navigation. Capture phase so it fires before any
+  // default handling. Only installed when the prop is present — a host that
+  // does not provide it (VS Code, the dashboard) gets the browser / webview
+  // default, which is the right thing in both cases.
+  const panelRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (!onLinkClick) return
+    const el = panelRef.current
+    if (!el) return
+    const handler = (e: MouseEvent) => {
+      const anchor = (e.target as HTMLElement)?.closest?.('a[href]') as HTMLAnchorElement | null
+      if (!anchor) return
+      const href = anchor.getAttribute('href')
+      if (!href) return
+      if (onLinkClick(href)) {
+        e.preventDefault()
+        e.stopPropagation()
+      }
+    }
+    el.addEventListener('click', handler, true)
+    return () => el.removeEventListener('click', handler, true)
+  }, [onLinkClick])
+
   // Dead-space clicks land in the composer. Anything the user actually aimed at
   // — a control, a link, the end of a drag-selection — keeps its own meaning;
   // this only claims what was left over.
@@ -1024,13 +1137,15 @@ export function SessionPanel({
       <ToolResultFetchProvider value={loadFullResult}>
       <ToolResultImageProvider value={resultImages}>
       <div
+        ref={panelRef}
         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)}>
+        className={cn('flex h-full min-h-0 flex-col overflow-hidden bg-bg', className)}
+        style={fontSize !== undefined ? { '--wd-font-size': `${Math.round(fontSize)}px` } as React.CSSProperties : undefined}>
         {headerTakesActions ? header({ actions: menu }) : header}
         {statusPlacement === 'top' ? statusBar : null}
         {protocolMismatch !== undefined ? (
@@ -1055,8 +1170,8 @@ export function SessionPanel({
             label={subagentFallbackLabel}
             onBack={leaveSubagent}
             terminal={terminal}
-            fontSize={terminalMetrics?.fontSize}
-            lineHeight={terminalMetrics?.lineHeight}
+            fontSize={effectiveTermFontSize}
+            lineHeight={effectiveTermLineHeight}
           />
         ) : null}
         <Transcript
@@ -1072,8 +1187,8 @@ export function SessionPanel({
           hostImage={hostImage}
           variant={transcriptVariant}
           density={transcriptDensity}
-          fontSize={terminalMetrics?.fontSize}
-          lineHeight={terminalMetrics?.lineHeight}
+          fontSize={effectiveTermFontSize}
+          lineHeight={effectiveTermLineHeight}
           affordances={affordances}
           stickyPrompt={stickyPrompt}
           scrubber={scrubber}
@@ -1089,6 +1204,7 @@ export function SessionPanel({
           reveal={returnReveal ?? reveal}
           frame={subagentId === undefined ? undefined : { parentToolUseId: subagentId }}
           onOpenSubagent={setSubagentId}
+          emptyState={emptyState}
           jumpToRecapRef={jumpToRecap}
           repinRef={repinTranscript}
         />
@@ -1101,7 +1217,7 @@ export function SessionPanel({
           <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'>
+              className='mx-auto flex w-full max-w-[var(--wd-transcript-max-width)] items-center gap-2 text-label text-fg-3'>
               <span
                 aria-hidden
                 className={cn('select-none', terminal ? 'text-fg-3' : 'text-accent')}>
@@ -1134,7 +1250,7 @@ export function SessionPanel({
             session is actually driven. */}
         {!readOnly && capabilities.interactiveApprovals && state.pendingApprovals.length > 0 ? (
           <div className={cn(terminal ? 'pb-2' : 'px-3 pb-2')}>
-            <PromptSurface terminal={terminal} metrics={terminalMetrics} affordances={affordances}>
+            <PromptSurface terminal={terminal} metrics={{ fontSize: effectiveTermFontSize, lineHeight: effectiveTermLineHeight }} affordances={affordances}>
               {state.pendingApprovals.map((request) => {
                 const isQuestion =
                   request.toolName === 'AskUserQuestion' &&
@@ -1202,8 +1318,8 @@ export function SessionPanel({
           }
           layout={controlsExternal ? 'inline' : 'stacked'}
           toolbar={controlsExternal ? undefined : sessionControls}
-          fontSize={terminalMetrics?.fontSize}
-          lineHeight={terminalMetrics?.lineHeight}
+          fontSize={effectiveTermFontSize}
+          lineHeight={effectiveTermLineHeight}
           affordances={affordances}
         />
         )}
@@ -1370,7 +1486,7 @@ function Notice({
       <div
         role='alert'
         className={cn(
-          'mx-auto flex w-full max-w-[var(--wd-content-max-w,48rem)] items-start gap-2 rounded-md border px-3 py-2 text-body-sm',
+          'mx-auto flex w-full max-w-[var(--wd-transcript-max-width)] items-start gap-2 rounded-md border px-3 py-2 text-body-sm',
           level === 'error'
             ? 'border-danger/40 bg-danger-bg text-danger'
             : 'border-warning/40 bg-warning-bg text-warning',

package/src/components/agent/SessionSteps.tsx

@@ -41,10 +41,16 @@ export type Step = {
   /** What one of these is called, for the disclosure's count. */
   noun: string
   /**
-   * An **agent** has an identity and work of its own, so it is pressable and
-   * wears the sub-agent colour. A **task** is something the model described with
-   * no agent behind it (`isAgentRecord`), so it is inert: there is no frame to
-   * open, and a row that offered one would show an empty screen.
+   * Both kinds press. The kind decides **where the press goes**, which is the
+   * whole of the distinction.
+   *
+   * An **agent** has an identity and work of its own, so it wears the sub-agent
+   * colour and opens that agent's own frame. A **task** is something the model
+   * described with no agent behind it (`isAgentRecord`), so there is no frame:
+   * framing its id selects no items and draws an empty screen. What it has
+   * instead is a *place* — the spawning call's row in the transcript — so it is
+   * muted, never selected, and travels there. See `StepRow` for why an inert
+   * row was the worse answer.
    *
    * Two values and not a boolean because the checklist source this shape was
    * drawn for (see above) produces the second kind natively — a to-do is a task

package/src/components/agent/SessionWorkspace.tsx

@@ -53,6 +53,10 @@ export interface SessionWorkspaceProps {
   /** Which end of the panel the status bar sits at — see `SessionPanel`. */
   statusPlacement?: SessionPanelProps['statusPlacement']
   controlsSurface?: SessionPanelProps['controlsSurface']
+  /** Base font size in whole pixels — see `SessionPanel.fontSize`. */
+  fontSize?: SessionPanelProps['fontSize']
+  /** Link click handler — see `SessionPanel.onLinkClick`. */
+  onLinkClick?: SessionPanelProps['onLinkClick']
   unseen?: SessionPanelProps['unseen']
   /** Viewer mode — no composer, no approval prompts. Forwarded verbatim to
    * {@link SessionPanel}; the file tree and editor are unaffected, since reading
@@ -117,6 +121,8 @@ export function SessionWorkspace({
   onSubagentChange,
   statusPlacement,
   controlsSurface,
+  fontSize,
+  onLinkClick,
   unseen,
   readOnly,
   onVitals,
@@ -323,6 +329,8 @@ export function SessionWorkspace({
           reveal={reveal}
           onSubagentChange={onSubagentChange}
           controlsSurface={controlsSurface}
+          fontSize={fontSize}
+          onLinkClick={onLinkClick}
           statusPlacement={statusPlacement}
           unseen={unseen}
           readOnly={readOnly}

package/src/components/agent/SkillsDialog.tsx

@@ -12,6 +12,7 @@ export interface SkillsDialogProps {
   /** Insert a skill's opening message into the composer, if the host offers
    * that. Omit and the dialog is read-only. */
   onUse?: (skill: SkillInfo) => void
+  className?: string
 }
 
 /** Where the skill came from. The engine's set is open, so an unrecognised
@@ -36,7 +37,7 @@ const SCOPE_LABEL: Record<string, string> = {
  * Fed from the session's `skills` event rather than a REST route, because that
  * is the channel the engine refreshes on its own when a skill changes on disk.
  */
-export function SkillsDialog({ skills, open, onOpenChange, onUse }: SkillsDialogProps) {
+export function SkillsDialog({ skills, open, onOpenChange, onUse, className }: SkillsDialogProps) {
   const [selected, setSelected] = useState<string | undefined>()
   const skill = skills?.find((s) => s.name === selected)
 
@@ -47,7 +48,7 @@ export function SkillsDialog({ skills, open, onOpenChange, onUse }: SkillsDialog
         if (!next) setSelected(undefined)
         onOpenChange(next)
       }}>
-      <DialogContent>
+      <DialogContent className={className}>
         <DialogHeader
           title={skill ? (skill.displayName ?? skill.name) : 'Skills'}
           description={

package/src/components/agent/StatusBar.tsx

@@ -211,7 +211,7 @@ export function StatusBar({
         // One explicit height, shared with the docked composer above it (see
         // `Composer.tsx`) — the two strips along the foot of the panel read as
         // 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',
+        'flex h-[var(--wd-status-bar-height)] 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 — except under the terminal theme at the
         // foot, where the composer directly above already closes itself with a
@@ -262,10 +262,10 @@ export function StatusBar({
           </span>
         </Slot>
       ) : null}
-      {controls}
+      {controls ? <span className='self-center'>{controls}</span> : null}
       <span className='flex-1' />
       <span className='font-mono text-label text-fg-3'>{formatCost(state.totalCostUsd)}</span>
-      {actions}
+      {actions ? <span className='self-center'>{actions}</span> : null}
     </div>
   )
 }