@workerdeck/ui 0.21.0 → 0.22.0

package/build/workspace.d.mts

@@ -1,4 +1,4 @@
-import { r as SessionPanelProps } from "./SessionPanel-BjNAnWMF.mjs";
+import { r as SessionPanelProps } from "./SessionPanel-13l25ubU.mjs";
 import * as _$react from "react";
 import { CSSProperties } from "react";
 import { OpenFile, UseHostFileSearchResult, UseHostFileTreeResult } from "@workerdeck/react";

package/build/workspace.mjs

@@ -1,4 +1,4 @@
-import { Rt as Input, Ut as cn, Vt as Button, _t as Tip, ft as Splitter, mt as Spinner, t as SessionPanel, yt as TooltipProvider } from "./SessionPanel-DNuPKg5c.mjs";
+import { Ht as Button, Wt as cn, _t as Tip, ft as Splitter, mt as Spinner, t as SessionPanel, yt as TooltipProvider, zt as Input } from "./SessionPanel-DgwjH4Ve.mjs";
 import { d as formatBytes } from "./status-BE-zg88x.mjs";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workerdeck/ui",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "type": "module",
   "description": "Styled agent-control component library for WorkerDeck: session panel, transcript with streaming, tool-call cards, permission prompts, session list, composer. Tailwind v4 + Base UI + cva. Pairs with the headless @workerdeck/react layer.",
   "license": "MIT",
@@ -26,7 +26,8 @@
       "types": "./build/format.d.mts",
       "default": "./build/format.mjs"
     },
-    "./theme.css": "./src/styles/theme.css"
+    "./theme.css": "./src/styles/theme.css",
+    "./scoped.css": "./build/scoped.css"
   },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
@@ -38,9 +39,9 @@
     "streamdown": "^2.5.0",
     "tailwind-merge": "^3.6.0",
     "use-stick-to-bottom": "^1.1.6",
-    "@workerdeck/protocol": "0.21.0",
-    "@workerdeck/client": "0.21.0",
-    "@workerdeck/react": "0.21.0"
+    "@workerdeck/react": "0.22.0",
+    "@workerdeck/protocol": "0.22.0",
+    "@workerdeck/client": "0.22.0"
   },
   "peerDependencies": {
     "monaco-editor": "^0.56.0",
@@ -56,12 +57,15 @@
     "@fontsource/inter": "^5.2.8",
     "@fontsource/jetbrains-mono": "^5.2.8",
     "@storybook/react-vite": "^9.1.20",
+    "@tailwindcss/postcss": "^4.3.3",
     "@tailwindcss/vite": "^4.3.1",
     "@types/node": "^22.10.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
     "@vitejs/plugin-react-swc": "^3.9.0",
     "monaco-editor": "^0.56.0",
+    "postcss": "^8.5.26",
+    "postcss-selector-parser": "^7.1.5",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "rimraf": "^6.1.3",
@@ -94,7 +98,7 @@
   },
   "scripts": {
     "clean": "rimraf build",
-    "build": "tsdown",
+    "build": "tsdown && node scripts/build-scoped-css.mjs",
     "typecheck": "tsgo -p tsconfig.json && tsgo -p tsconfig.test.json",
     "test": "vitest run",
     "dev": "vite",

package/src/components/agent/Composer.tsx

@@ -444,7 +444,7 @@ export function Composer({
   const errorRow = attachments?.error ? (
     <div
       className={cn(
-        'mx-auto mt-1 flex w-full max-w-[var(--wd-content-max-w,48rem)] items-center gap-2 text-label text-danger',
+        'mx-auto mt-1 flex w-full max-w-[var(--wd-transcript-max-width)] items-center gap-2 text-label text-danger',
       )}>
       <TriangleAlert className='size-3 shrink-0' />
       <span className='min-w-0 flex-1'>{attachments.error}</span>
@@ -530,11 +530,11 @@ export function Composer({
   }
 
   return (
-    <div data-slot='composer' className={cn('px-3 pb-3', className)}>
+    <div data-slot='composer' className={cn('px-[var(--wd-composer-padding)] pb-[var(--wd-composer-padding)]', className)}>
       <div
         {...dropHandlers}
         className={cn(
-          'mx-auto w-full max-w-[var(--wd-content-max-w,48rem)] overflow-hidden border border-border bg-bg',
+          'mx-auto w-full max-w-[var(--wd-transcript-max-width)] overflow-hidden border border-border bg-bg',
           'transition-colors rounded-lg shadow-(--shadow-xs)',
           'focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30',
           dragging && 'border-ring ring-2 ring-ring/30',
@@ -545,11 +545,11 @@ export function Composer({
           <AttachmentStrip attachments={attachments} />
         ) : null}
         {inline ? (
-          // One row until the message needs more: the field grows into the space
-          // rather than the frame reserving it, and the buttons stay bottom-
-          // aligned as it does. 4px of padding and gap all round against 24px
-          // buttons and a 24px line box (20px of text, 2px either side) — on a
-          // single line everything centres without anything being nudged.
+          // One row until the message needs more: the field grows and the
+          // buttons stay bottom-aligned as it does (`items-end`). On a single
+          // line, the 28px buttons and the 20px line-height text need matching
+          // vertical padding so their visual centres land on the same line:
+          // 4px above + 4px below the 20px text = 28px, the button height.
           <div className='flex items-end gap-1 p-1'>
             {attach}
             <PromptArea
@@ -564,7 +564,7 @@ export function Composer({
               minHeight={20}
               maxHeight={192}
               aria-label='Message the agent'
-              className='min-w-0 flex-1 py-0.5 text-body-sm text-text'
+              className='min-w-0 flex-1 py-1 text-body-sm text-text'
               onImagePaste={(file) => attachments?.add([file])}
             />
             {submitButton}
@@ -583,7 +583,7 @@ export function Composer({
               minHeight={28}
               maxHeight={192}
               aria-label='Message the agent'
-              className='px-3 pt-2.5 pb-1 text-body-sm text-text'
+              className='px-3 pt-2.5 pb-0 text-body-sm text-text'
               onImagePaste={(file) => attachments?.add([file])}
             />
             <div className='flex items-center justify-between gap-2 px-2 pb-2'>

package/src/components/agent/ContextDialog.tsx

@@ -7,6 +7,7 @@ export interface ContextDialogProps {
   usage?: ContextUsage
   open: boolean
   onOpenChange: (open: boolean) => void
+  className?: string
 }
 
 /** The CLI reports category colors as its own theme token names ('inactive',
@@ -23,10 +24,10 @@ const usageTint = (pct: number) => (pct >= 90 ? 'bg-danger' : pct >= 70 ? 'bg-wa
  * are different questions asked at different moments, so they are different
  * screens rather than one "details" list you scroll past two answers to reach.
  */
-export function ContextDialog({ usage, open, onOpenChange }: ContextDialogProps) {
+export function ContextDialog({ usage, open, onOpenChange, className }: ContextDialogProps) {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
+      <DialogContent className={className}>
         <DialogHeader title='Context' description={usage?.model} />
         <DialogBody>
           {!usage ? (

package/src/components/agent/Conversation.tsx

@@ -40,7 +40,7 @@ export function ConversationContent({
   return (
     <StickToBottom.Content
       data-slot='conversation-content'
-      className={cn('mx-auto flex w-full max-w-[var(--wd-content-max-w,48rem)] flex-col gap-4 px-4 py-4', className)}
+      className={cn('mx-auto flex w-full max-w-[var(--wd-transcript-max-width)] flex-col gap-4 px-4 py-4', className)}
       {...props}>
       {children}
     </StickToBottom.Content>

package/src/components/agent/McpDialog.tsx

@@ -24,6 +24,7 @@ export interface McpDialogProps {
    * that 501 are worse than buttons that aren't there.
    */
   canManageServers?: boolean
+  className?: string
 }
 
 /** The engine's status vocabulary is open — anything unrecognised renders
@@ -54,6 +55,7 @@ export function McpDialog({
   open,
   onOpenChange,
   canManageServers = true,
+  className,
 }: McpDialogProps) {
   const [servers, setServers] = useState<McpServerStatusInfo[] | undefined>()
   const [error, setError] = useState<string | undefined>()
@@ -103,7 +105,7 @@ export function McpDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
+      <DialogContent className={className}>
         <DialogHeader
           title={title}
           description={

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,12 @@ 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
   className?: string
 }
 
@@ -483,6 +489,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
 }
 
 /**
@@ -521,6 +530,7 @@ export function SessionPanel({
   readOnly = false,
   toolHost,
   cacheTranscript,
+  emptyState,
   className,
 }: SessionPanelProps) {
   const external = panelSurface === 'external'
@@ -786,6 +796,7 @@ export function SessionPanel({
       contextUsage: state.contextUsage,
       rateLimits,
       itemCount: state.items.length,
+      totalCostUsd: state.totalCostUsd,
     })
   }, [
     state.status,
@@ -800,6 +811,7 @@ export function SessionPanel({
     state.contextUsage,
     rateLimits,
     state.items.length,
+    state.totalCostUsd,
   ])
 
   // The commands back in. One stable object reading through refs, so an
@@ -1089,6 +1101,7 @@ export function SessionPanel({
           reveal={returnReveal ?? reveal}
           frame={subagentId === undefined ? undefined : { parentToolUseId: subagentId }}
           onOpenSubagent={setSubagentId}
+          emptyState={emptyState}
           jumpToRecapRef={jumpToRecap}
           repinRef={repinTranscript}
         />
@@ -1101,7 +1114,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')}>
@@ -1370,7 +1383,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/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