@workerdeck/ui 0.12.0 → 0.15.0

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'
@@ -98,6 +100,17 @@ export interface SessionPanelProps {
    * take the menu, or it has nowhere left to go.
    */
   statusSurface?: 'internal' | 'external'
+  /**
+   * Which end of the panel the status bar sits at. Default `top`.
+   *
+   * `bottom` is the editor convention — VS Code's status bar runs along the
+   * foot of the window — and suits a host where the panel *is* the editor area
+   * and the chrome above it already belongs to the app. Placement only; the bar
+   * is the same bar, with the same `⋯` menu in its trailing slot, so this
+   * composes with {@link statusSurface} rather than competing with it (external
+   * still means "there isn't one").
+   */
+  statusPlacement?: 'top' | 'bottom'
   /** Where `panelSurface: 'external'` routes opens. Absent = the affordances
    * (status-bar clicks, `/mcp`) become inert rather than half-working. */
   onOpenPanel?: (panel: SessionSurfacePanel) => void
@@ -120,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
@@ -161,6 +192,38 @@ export interface SessionPanelProps {
    * the number to remember through `SessionVitals.itemCount`.
    */
   unseen?: { itemCount: number; since?: number }
+  /**
+   * A viewer, not a seat at the session: transcript, status bar and panels as
+   * usual, but no composer and no approval prompts.
+   *
+   * For a surface that is *about* a run rather than in it — the dashboard's job
+   * detail, where the session belongs to the queue and typing into it would be a
+   * second operator arriving mid-run. Deliberately not "disabled controls": a
+   * greyed-out composer says the session is busy, an absent one says this screen
+   * does not drive it. The attach is still live and read paths are untouched,
+   * so the transcript streams and the file tree browses.
+   *
+   * It does **not** claim to be an authorization boundary. Anything holding this
+   * client can still send; what it removes is the affordance, and the honest
+   * 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
 }
 
@@ -251,19 +314,26 @@ export function SessionPanel({
   header,
   panelSurface = 'internal',
   statusSurface = 'internal',
+  statusPlacement = 'top',
   onOpenPanel,
   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
@@ -327,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
@@ -503,11 +573,61 @@ export function SessionPanel({
   const menu = external ? null : actionsMenu
   const headerTakesActions = typeof header === 'function'
 
+  // 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')}
+      actions={headerTakesActions ? undefined : menu}
+    />
+  )
+
   // 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.
   const handleClick = (event: ReactMouseEvent<HTMLDivElement>) => {
-    if (!focusComposerOnClick) return
+    if (!focusComposerOnClick || readOnly) return
     const target = event.target as HTMLElement | null
     if (target?.closest(INTERACTIVE)) return
     if (window.getSelection()?.isCollapsed === false) return
@@ -522,19 +642,14 @@ 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}
-        {statusExternal ? null : (
-          <StatusBar
-            state={state}
-            connection={connection}
-            onOpenStatus={external && !onOpenPanel ? undefined : () => openPanel('info')}
-            onOpenContext={external && !onOpenPanel ? undefined : () => openPanel('context')}
-            onOpenUsage={external && !onOpenPanel ? undefined : () => openPanel('usage')}
-            actions={headerTakesActions ? undefined : menu}
-          />
-        )}
+        {statusPlacement === 'top' ? statusBar : null}
         {protocolMismatch !== undefined ? (
           <Notice level='warning'>
             Server speaks protocol v{protocolMismatch}, this build renders v{PROTOCOL_VERSION}. Some
@@ -569,7 +684,12 @@ export function SessionPanel({
             <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='select-none text-accent'>
+              <span
+                aria-hidden
+                className={cn(
+                  'select-none',
+                  transcriptVariant === 'lines' ? 'text-fg-3' : 'text-accent',
+                )}>
                 ※
               </span>
               <span className='min-w-0 flex-1 truncate'>
@@ -594,7 +714,10 @@ export function SessionPanel({
         {/* An engine with no approval channel never raises these, but a stale
             pending request from a replayed log would still render — the record is
             the authority on whether an approval UI means anything here. */}
-        {capabilities.interactiveApprovals && state.pendingApprovals.length > 0 ? (
+        {/* A read-only surface has no answer to give: the status bar still says
+            `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) =>
@@ -618,6 +741,7 @@ export function SessionPanel({
             </div>
           </div>
         ) : null}
+        {readOnly ? null : (
         <Composer
           ref={composerRef}
           onSend={handleSend}
@@ -633,35 +757,12 @@ 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
+            convention. Last in the flex column, so it is the bottom edge. */}
+        {statusPlacement === 'bottom' ? statusBar : null}
 
         {/* The internal dialog surface. The external one renders none of these —
             the embedder hosts equivalent surfaces and is handed the intents. */}

package/src/components/agent/SessionWorkspace.tsx

@@ -34,7 +34,15 @@ 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
+   * a run's files is the point of a read-only view. */
+  readOnly?: SessionPanelProps['readOnly']
   onVitals?: SessionPanelProps['onVitals']
   /** Rail width in pixels on first render. */
   defaultRailWidth?: number
@@ -85,7 +93,11 @@ export function SessionWorkspace({
   header,
   transcriptVariant,
   transcriptDensity,
+  transcriptFont,
+  statusPlacement,
+  controlsSurface,
   unseen,
+  readOnly,
   onVitals,
   defaultRailWidth = 260,
   defaultRailCollapsed,
@@ -217,6 +229,7 @@ export function SessionWorkspace({
           onValueChange={setRailWidth}
           min={RAIL_MIN}
           max={RAIL_MAX}
+          defaultValue={defaultRailWidth}
           aria-label='Resize the file tree'
         />
       ) : null}
@@ -264,7 +277,11 @@ export function SessionWorkspace({
           header={hoisted}
           transcriptVariant={transcriptVariant}
           transcriptDensity={transcriptDensity}
+          transcriptFont={transcriptFont}
+          controlsSurface={controlsSurface}
+          statusPlacement={statusPlacement}
           unseen={unseen}
+          readOnly={readOnly}
           onVitals={onVitals}
           className='min-h-0 flex-1'
         />

package/src/components/agent/StatusBar.tsx

@@ -28,8 +28,18 @@ export interface StatusBarProps {
   onOpenStatus?: () => void
   onOpenContext?: () => void
   onOpenUsage?: () => void
-  /** Trailing slot — the session-actions menu, in the panel's top-right. */
+  /**
+   * 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.
+   * Placement is the panel's decision; this only styles it. */
+  placement?: 'top' | 'bottom'
   className?: string
 }
 
@@ -110,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>
@@ -135,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>
   )
@@ -148,7 +172,9 @@ export function StatusBar({
   onOpenStatus,
   onOpenContext,
   onOpenUsage,
+  controls,
   actions,
+  placement = 'top',
   className,
 }: StatusBarProps) {
   const meta = STATUS_META[state.status]
@@ -160,7 +186,20 @@ export function StatusBar({
     <div
       data-slot='status-bar'
       className={cn(
-        'flex items-center gap-2 border-b 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',
         className,
       )}>
       {/* One slot, two meanings: connection trouble wins it, because a session
@@ -169,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>
@@ -193,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.tsx

@@ -171,7 +171,7 @@ function RecapRow({ line, since }: { line: string; since?: number }) {
   if (lines) {
     return (
       <div data-slot='recap' className='flex items-baseline gap-2 py-0.5'>
-        <LineGlyph className='text-accent'>※</LineGlyph>
+        <LineGlyph className='text-fg-3'>※</LineGlyph>
         <span className='min-w-0 flex-1 text-label leading-5 text-fg-3'>
           <span className='text-fg-2'>recap:</span> {text}
         </span>
@@ -260,9 +260,8 @@ function SentAttachments({
   attachments: MessageAttachment[]
   attachmentUrl?: (attachmentId: string) => string
 }) {
-  const lines = useLines()
   return (
-    <div className={cn('mb-1 flex flex-wrap gap-1.5', lines ? 'justify-start' : 'justify-end')}>
+    <div className='mb-1 flex flex-wrap justify-start gap-1.5'>
       {attachments.map((attachment) => {
         const href = attachmentUrl?.(attachment.id)
         return attachment.mediaType.startsWith('image/') && href ? (

package/src/components/agent/line-prompt.tsx

@@ -128,7 +128,7 @@ export function LineOptionList({
                 'flex w-full items-baseline gap-2 text-left outline-none',
                 isFocused ? 'bg-surface-hover' : 'hover:bg-surface-hover/60',
               )}>
-              <LineGlyph className={isFocused ? 'text-accent' : undefined}>
+              <LineGlyph className={isFocused ? 'text-fg-1' : undefined}>
                 {isFocused ? '❯' : ' '}
               </LineGlyph>
               <span className='shrink-0 font-mono text-label leading-5 text-fg-4'>{index + 1}</span>
@@ -184,7 +184,7 @@ export function LineInput({
 }) {
   return (
     <div className='flex items-baseline gap-2'>
-      <LineGlyph className='text-accent'>›</LineGlyph>
+      <LineGlyph className='text-fg-3'>›</LineGlyph>
       <input
         autoFocus
         value={value}

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/Menu.tsx

@@ -14,7 +14,7 @@ export const MenuContent: FunctionComponent<
       align={align}
       side={side}
       sideOffset={sideOffset}
-      className='isolate z-60 outline-none'>
+      className='isolate z-80 outline-none'>
       <MenuPrimitive.Popup
         data-slot='menu-content'
         className={cn(

package/src/components/ui/Select.tsx

@@ -45,7 +45,7 @@ export const SelectContent: FunctionComponent<
       alignItemWithTrigger={alignItemWithTrigger}
       side={side}
       sideOffset={sideOffset}
-      className='isolate z-60 outline-none'>
+      className='isolate z-80 outline-none'>
       <SelectPrimitive.Popup
         data-slot='select-content'
         className={cn(