@workerdeck/ui 0.13.0 → 0.15.0

package/src/components/agent/SessionBrowser.tsx

@@ -3,10 +3,12 @@ import {
   BellRing,
   CircleAlert,
   CircleSlash,
+  Layers,
   Moon,
   PauseCircle,
   Pencil,
   Search,
+  SearchX,
   Trash2,
   X,
 } from 'lucide-react'
@@ -30,6 +32,7 @@ import type {
   WorkspaceScope,
 } from '@workerdeck/protocol'
 import { Button } from '../ui/Button.tsx'
+import { Empty } from '../ui/Empty.tsx'
 import { Input } from '../ui/Input.tsx'
 import { Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue } from '../ui/Select.tsx'
 import { Spinner } from '../ui/Spinner.tsx'
@@ -228,25 +231,23 @@ export function SessionBrowser({
       ) : null}
 
       {rows.length === 0 ? (
-        (emptyState ?? <Empty>No sessions yet.</Empty>)
+        (emptyState ?? <Empty icon={<Layers />} title='No sessions yet' />)
       ) : visible.length === 0 ? (
         // Two different dead ends, two different ways out. "Nothing matches" is
-        // a filter someone set; anything else is the state of the world.
-        <Empty>
-          {hasFacetFilter(config) ? (
-            <>
-              No sessions match.{' '}
-              <button
-                type='button'
-                className='underline underline-offset-2 hover:text-fg-1'
-                onClick={() => onConfigChange(clearFilters(config))}>
-                Clear filters
-              </button>
-            </>
-          ) : (
-            'No sessions here.'
-          )}
-        </Empty>
+        // a filter someone set; anything else is the state of the world — and
+        // only the first has a button, because an action that does nothing is
+        // worse than none.
+        hasFacetFilter(config) ? (
+          <Empty
+            icon={<SearchX />}
+            title='No matches'
+            description='No session matches the current search and filters.'
+            action='Clear filters'
+            onAction={() => onConfigChange(clearFilters(config))}
+          />
+        ) : (
+          <Empty icon={<Layers />} title='Nothing here' description='No session to show.' />
+        )
       ) : (
         <div className='flex flex-col gap-4'>
           {groups.map((group) => (
@@ -276,10 +277,6 @@ export function SessionBrowser({
   )
 }
 
-function Empty({ children }: { children: React.ReactNode }) {
-  return <div className='px-3 py-6 text-center text-body-sm text-fg-4'>{children}</div>
-}
-
 interface SessionRowItemProps {
   row: SessionRow
   active?: boolean
@@ -315,6 +312,14 @@ function SessionRowItem({
     <div
       data-slot='session-row'
       data-active={active || undefined}
+      // Selection lives on the whole row, not on the two text buttons inside
+      // it: the age, the unread badge and the state glyph sit outside them, and
+      // a row where a third of the surface silently does nothing is a row that
+      // feels broken. The buttons stay — they are what makes the row reachable
+      // by keyboard — but their activation now reaches this handler by
+      // bubbling, so there is one code path and no double-fire. Anything that
+      // is its own action (rename, close, the name editor) stops the event.
+      onClick={() => !editing && onSelect?.(row)}
       className={cn(
         'group flex cursor-pointer flex-col gap-0.5 text-left transition-colors',
         rowShapeClass(active === true),
@@ -337,7 +342,6 @@ function SessionRowItem({
         ) : (
           <button
             type='button'
-            onClick={() => onSelect?.(row)}
             className={cn(
               'min-w-0 flex-1 truncate text-left text-body-sm outline-none',
               active ? 'font-medium text-fg-1' : 'text-fg-2',
@@ -365,7 +369,7 @@ function SessionRowItem({
       <div className='flex items-center gap-1 text-label text-fg-4'>
         <button
           type='button'
-          onClick={() => !editing && onSelect?.(row)}
+          tabIndex={-1}
           className='min-w-0 flex-1 truncate text-left font-mono outline-none'>
           {details.join(' · ')}
         </button>
@@ -375,7 +379,10 @@ function SessionRowItem({
             size='icon-sm'
             aria-label='Rename session'
             className='size-5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100'
-            onClick={() => setEditing(true)}>
+            onClick={(e) => {
+              e.stopPropagation()
+              setEditing(true)
+            }}>
             <Pencil className='size-3 text-fg-3' />
           </Button>
         ) : null}
@@ -385,7 +392,10 @@ function SessionRowItem({
             size='icon-sm'
             aria-label='Close session'
             className='size-5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100'
-            onClick={() => onDelete(row)}>
+            onClick={(e) => {
+              e.stopPropagation()
+              onDelete(row)
+            }}>
             <Trash2 className='size-3 text-fg-3' />
           </Button>
         ) : null}

package/src/components/agent/SessionPanel.tsx

@@ -18,6 +18,7 @@ import {
   type ConnectionState,
   type ProducedFileRef,
   type TranscriptState,
+  type UseToolCallHostOptions,
 } from '@workerdeck/react'
 import {
   ChartPie,
@@ -53,6 +54,7 @@ import {
   TranscriptDensityProvider,
   TranscriptVariantProvider,
   type TranscriptDensity,
+  type TranscriptFont,
   type TranscriptVariant,
 } from './transcript-variant.tsx'
 import { UsageDialog } from './UsageDialog.tsx'
@@ -131,18 +133,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 +208,22 @@ 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
   className?: string
 }
 
@@ -283,16 +319,21 @@ export function SessionPanel({
   onVitals,
   transcriptVariant = 'cards',
   transcriptDensity = 'comfortable',
+  transcriptFont = 'sans',
   controlsSurface = 'internal',
   onControls,
   focusComposerOnClick = false,
   unseen,
   readOnly = false,
+  toolHost,
   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
@@ -356,7 +397,7 @@ 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 capabilities = state.capabilities
 
   // Vitals out to the embedder, keyed on the readings themselves so an inline
@@ -535,11 +576,46 @@ 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}
       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')}
@@ -566,6 +642,10 @@ export function SessionPanel({
       <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}
@@ -677,34 +757,7 @@ 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}
         />
         )}
         {/* Below the composer, along the foot of the panel — the editor

package/src/components/agent/SessionWorkspace.tsx

@@ -34,8 +34,10 @@ export interface SessionWorkspaceProps {
    */
   transcriptVariant?: SessionPanelProps['transcriptVariant']
   transcriptDensity?: SessionPanelProps['transcriptDensity']
+  transcriptFont?: SessionPanelProps['transcriptFont']
   /** 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 +93,9 @@ export function SessionWorkspace({
   header,
   transcriptVariant,
   transcriptDensity,
+  transcriptFont,
   statusPlacement,
+  controlsSurface,
   unseen,
   readOnly,
   onVitals,
@@ -225,6 +229,7 @@ export function SessionWorkspace({
           onValueChange={setRailWidth}
           min={RAIL_MIN}
           max={RAIL_MAX}
+          defaultValue={defaultRailWidth}
           aria-label='Resize the file tree'
         />
       ) : null}
@@ -272,6 +277,8 @@ export function SessionWorkspace({
           header={hoisted}
           transcriptVariant={transcriptVariant}
           transcriptDensity={transcriptDensity}
+          transcriptFont={transcriptFont}
+          controlsSurface={controlsSurface}
           statusPlacement={statusPlacement}
           unseen={unseen}
           readOnly={readOnly}

package/src/components/agent/StatusBar.tsx

@@ -28,6 +28,13 @@ export interface StatusBarProps {
   onOpenStatus?: () => void
   onOpenContext?: () => void
   onOpenUsage?: () => void
+  /**
+   * The session's own controls (model, permission mode), for
+   * `controlsSurface: 'status'`. They sit at the end of the readings cluster —
+   * status, context, usage, then what you can *change* — rather than out by the
+   * actions menu, because they belong with the session facts they act on.
+   */
+  controls?: ReactNode
   /** Trailing slot — the session-actions menu, at the bar's trailing edge. */
   actions?: ReactNode
   /** Which edge the bar sits on, so its separating rule goes on the other side.
@@ -113,16 +120,22 @@ function RateLimitMeter({ label, info, now }: { label: string; info: RateLimitIn
           {info.status === 'rejected' ? <div className='text-danger'>Limit reached</div> : null}
         </div>
       }>
+      {/* Inline, not `inline-flex`: a flex container contributes its FIRST
+          item's baseline, and the first item here is the ring — so a flex
+          version hands the row a 13px circle's baseline instead of the number's,
+          and every reading beside it sits on a different line. Inline text has
+          only one baseline to give. `align-middle` centres the ring on the
+          x-height, which is where it looked right anyway. */}
       <span
         className={cn(
-          'inline-flex cursor-default items-center gap-1 font-mono text-label',
+          'cursor-default font-mono text-label whitespace-nowrap',
           info.status === 'rejected' ? 'text-danger' : utilizationColor(pct ?? 0),
         )}>
-        <ProgressRing value={pct ?? 0} />
+        <ProgressRing value={pct ?? 0} className='mr-1 inline-block align-middle' />
         {label}
         {pct !== undefined ? ` ${pct.toFixed(0)}%` : ''}
         {resetsAtMs !== undefined ? (
-          <span className='text-fg-4'>· {formatCountdown(resetsAtMs, now)}</span>
+          <span className='text-fg-4'> · {formatCountdown(resetsAtMs, now)}</span>
         ) : null}
       </span>
     </Tip>
@@ -138,7 +151,15 @@ function Slot({ onClick, hint, children }: { onClick?: () => void; hint: string;
       type='button'
       onClick={onClick}
       aria-label={hint}
-      className='rounded-md px-1 py-0.5 transition-colors outline-none hover:bg-surface-hover focus-visible:bg-surface-hover'>
+      // `leading-4` matches the label metrics inside: a button's own line box is
+      // the page's 24px one, and the extra strut was padding the bar by 2.5px
+      // that nothing was using.
+      // No horizontal padding: the bar's own 6px is the inset, and a slot that
+      // added its own would start the first reading 10px in. The hover surface
+      // hugs the text instead, which is what a status line's items do anyway.
+      // `leading-4` matches the label metrics inside — a button's own line box
+      // is the page's 24px one, and the strut padded the bar with nothing.
+      className='rounded-md py-0.5 leading-4 transition-colors outline-none hover:bg-surface-hover focus-visible:bg-surface-hover'>
       {children}
     </button>
   )
@@ -151,6 +172,7 @@ export function StatusBar({
   onOpenStatus,
   onOpenContext,
   onOpenUsage,
+  controls,
   actions,
   placement = 'top',
   className,
@@ -164,7 +186,17 @@ export function StatusBar({
     <div
       data-slot='status-bar'
       className={cn(
-        'flex items-center gap-2 border-border bg-surface px-3 py-1.5',
+        // Baselines, not boxes. `items-center` centres each child's *box*, and
+        // this bar's children are boxes of different heights for reasons that
+        // have nothing to do with their text — a badge's pill padding, a ring
+        // beside a number, a select's border and chevron. Centring those lands
+        // their text on four slightly different lines. A flex item's baseline is
+        // its first line's baseline, so aligning on it puts every reading on one
+        // line by construction, whatever is drawn around it.
+        // 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',
         // The rule goes between the bar and the content, so which edge it sits
         // on follows the placement.
         placement === 'bottom' ? 'border-t' : 'border-b',
@@ -176,16 +208,22 @@ export function StatusBar({
           with which credentials — which is the question a status prompts. */}
       <Slot onClick={onOpenStatus} hint='Session info'>
         {link === 'live' ? (
-          <Badge variant={meta.variant} dot={!meta.busy}>
-            {meta.busy ? <Spinner className='size-3 text-current' /> : null}
+          // `items-baseline` so the badge answers the row with its label's
+          // baseline rather than its pill's box; the dot and the spinner keep
+          // their own centring.
+          <Badge variant={meta.variant} dot={!meta.busy} className='items-baseline'>
+            {meta.busy ? <Spinner className='size-3 self-center text-current' /> : null}
             {meta.label}
           </Badge>
         ) : (
-          <Badge variant={link === 'offline' ? 'danger' : 'warning'} dot={false}>
+          <Badge
+            variant={link === 'offline' ? 'danger' : 'warning'}
+            dot={false}
+            className='items-baseline'>
             {link === 'offline' ? (
-              <WifiOff className='size-3 text-current' />
+              <WifiOff className='size-3 self-center text-current' />
             ) : (
-              <RefreshCw className='size-3 animate-spin text-current' />
+              <RefreshCw className='size-3 animate-spin self-center text-current' />
             )}
             {link === 'offline' ? 'Offline' : 'Reconnecting…'}
           </Badge>
@@ -200,12 +238,13 @@ export function StatusBar({
       ) : null}
       {session || weekly ? (
         <Slot onClick={onOpenUsage} hint='Plan usage'>
-          <span className='inline-flex items-center gap-2'>
+          <span className='inline-flex items-baseline gap-2'>
             {session ? <RateLimitMeter label='Session' info={session} now={now} /> : null}
             {weekly ? <RateLimitMeter label='Weekly' info={weekly} now={now} /> : null}
           </span>
         </Slot>
       ) : null}
+      {controls}
       <span className='flex-1' />
       <span className='font-mono text-label text-fg-3'>{formatCost(state.totalCostUsd)}</span>
       {actions}

package/src/components/agent/transcript-variant.tsx

@@ -72,6 +72,20 @@ export function useTranscriptDensity(): TranscriptDensity {
   return useContext(DensityContext)
 }
 
+/**
+ * The typeface the panel runs in.
+ *
+ * `sans` is the host's UI font; `mono` repoints the sans token at the mono stack
+ * for the panel's subtree (see the `[data-agent-font='mono']` rule in
+ * `theme.css`), so the transcript reads as part of a terminal rather than as a
+ * web app beside one.
+ *
+ * No context and no hook, unlike variant and density: nothing branches on it in
+ * JS. It is one attribute on the panel root and the cascade does the rest, which
+ * is also what keeps it from leaking past the panel.
+ */
+export type TranscriptFont = 'sans' | 'mono'
+
 /**
  * The gap between two rows, per variant and density — the whole of the density
  * feature, since it is the only vertical spacing between rows that exists.

package/src/components/ui/Badge.tsx

@@ -33,7 +33,12 @@ export interface BadgeProps
 export function Badge({ className, variant = 'neutral', mono, dot, children, ...props }: BadgeProps) {
   return (
     <span data-slot='badge' className={cn(badgeVariants({ variant, mono, className }))} {...props}>
-      {dot ? <span aria-hidden className='size-1.5 rounded-full bg-current' /> : null}
+      {/* `self-center` so the dot stays put if a caller baseline-aligns the
+          badge — a no-op under the default `items-center`, and what lets the
+          badge's *text* be the baseline it contributes to a row (a status bar
+          aligning readings on one line needs that, and the dot's own box would
+          otherwise answer for it). */}
+      {dot ? <span aria-hidden className='size-1.5 shrink-0 self-center rounded-full bg-current' /> : null}
       {children}
     </span>
   )

package/src/components/ui/Empty.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react'
+import { Button } from './Button.tsx'
+
+/**
+ * A view with nothing in it: icon, title, description, and at most one action.
+ *
+ * Centered and given room, because an empty view is the first thing a new
+ * install shows and a flush-left sentence in the top corner reads like a bug
+ * report. It lives here rather than in one client because every panel that can
+ * be empty should be empty the same way — the extension's views and the
+ * dashboard's four sidebars are the same shape of thing.
+ *
+ * **At most one action, and never one the view header already offers.** Creating
+ * a session and adding a gateway are the `+` in the native title bar, exclusively
+ * — so those empty states point at it in words rather than growing a second
+ * button that does the same thing two inches lower. A button here is for the way
+ * out of a state the header has no answer to: clearing a filter, widening a
+ * scope.
+ */
+export function Empty({
+  icon,
+  title,
+  description,
+  action,
+  onAction,
+}: {
+  icon: ReactNode
+  title: string
+  description?: ReactNode
+  action?: string
+  onAction?: () => void
+}) {
+  return (
+    <div className='flex flex-col items-center gap-2 px-5 py-8 text-center'>
+      <div className='text-fg-4 opacity-60 [&_svg]:size-7'>{icon}</div>
+      <p className='text-body-sm font-medium text-fg-2'>{title}</p>
+      {description ? (
+        <p className='max-w-[26ch] text-balance text-label leading-relaxed text-fg-4'>
+          {description}
+        </p>
+      ) : null}
+      {action && onAction ? (
+        <Button variant='outline' size='sm' className='mt-1' onClick={onAction}>
+          {action}
+        </Button>
+      ) : null}
+    </div>
+  )
+}
+
+/** A key or icon named inline in an empty state's description — "use the + above". */
+export function EmptyKey({ children }: { children: ReactNode }) {
+  return (
+    <span className='rounded border border-border px-1 font-mono text-fg-3'>{children}</span>
+  )
+}

package/src/components/ui/Splitter.tsx

@@ -20,6 +20,12 @@ export interface SplitterProps {
   max: number
   /** Keyboard step. */
   step?: number
+  /**
+   * Size to snap back to on a double-click — the convention every pane divider
+   * that can be dragged is expected to honour. Omit and a double-click does
+   * nothing, which is the honest behaviour when there is no default to mean.
+   */
+  defaultValue?: number
   /** Set when dragging the splitter *away* from the origin should shrink the
    * controlled pane — i.e. the pane is on the right or the bottom. */
   inverted?: boolean
@@ -52,6 +58,7 @@ export function Splitter({
   min,
   max,
   step = 16,
+  defaultValue,
   inverted,
   'aria-label': label,
   className,
@@ -84,6 +91,12 @@ export function Splitter({
     }
   }
 
+  // The second click of a double-click has already started a drag, so the reset
+  // has to land after `endDrag` — which it does: dblclick fires after pointerup.
+  const onDoubleClick = () => {
+    if (defaultValue !== undefined) onValueChange(clamp(defaultValue))
+  }
+
   const onKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
     // The arrows that move *along* this splitter's axis of travel; the other
     // pair is left to the page, which is what a separator should do with them.
@@ -112,6 +125,7 @@ export function Splitter({
       onPointerMove={onPointerMove}
       onPointerUp={endDrag}
       onPointerCancel={endDrag}
+      onDoubleClick={onDoubleClick}
       onKeyDown={onKeyDown}
       className={cn(
         // A 1px line that reads as a border, with a larger invisible grab area

package/src/index.ts

@@ -42,6 +42,7 @@ export { CopyButton, type CopyButtonProps } from './components/ui/CopyButton.tsx
 export { Spinner } from './components/ui/Spinner.tsx'
 export { CodeBlock, type CodeBlockProps } from './components/ui/CodeBlock.tsx'
 export { Splitter, type SplitterProps } from './components/ui/Splitter.tsx'
+export { Empty, EmptyKey } from './components/ui/Empty.tsx'
 export { ProgressRing, type ProgressRingProps } from './components/ui/ProgressRing.tsx'
 // Prompt input (vendored just-marketing/prompt-area, themed to these tokens)
 export {
@@ -88,6 +89,7 @@ export {
   useTranscriptDensity,
   useTranscriptVariant,
   type TranscriptDensity,
+  type TranscriptFont,
   type TranscriptVariant,
 } from './components/agent/transcript-variant.tsx'
 export { Response, type ResponseProps } from './components/agent/Response.tsx'