@workerdeck/ui 0.22.0 → 0.23.0

package/src/components/agent/SessionPanel.tsx

@@ -416,6 +416,62 @@ export interface SessionPanelProps {
    * "`>_` 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
 }
 
@@ -529,10 +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
@@ -714,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
@@ -1012,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.
@@ -1036,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 ? (
@@ -1067,8 +1170,8 @@ export function SessionPanel({
             label={subagentFallbackLabel}
             onBack={leaveSubagent}
             terminal={terminal}
-            fontSize={terminalMetrics?.fontSize}
-            lineHeight={terminalMetrics?.lineHeight}
+            fontSize={effectiveTermFontSize}
+            lineHeight={effectiveTermLineHeight}
           />
         ) : null}
         <Transcript
@@ -1084,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}
@@ -1147,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' &&
@@ -1215,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}
         />
         )}

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

@@ -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>
   )
 }

package/src/styles/theme.css

@@ -485,6 +485,59 @@
   }
 }
 
+/* ── Panel font size & Streamdown overrides ──────────────────────────────
+ *
+ * OUTSIDE `@layer base` so these beat Tailwind utility classes in the cascade
+ * (utilities live in a layer; unlayered rules always win over layered ones).
+ *
+ * `--wd-font-size` is set on the session panel root by the `fontSize` prop.
+ * When present it drives all text in the cards variant — body text, headings,
+ * code, tables — through one value. When absent the fallback `var(--text-body-sm)`
+ * resolves to the same `0.8125rem` the utility class used to set.
+ *
+ * Streamdown ships `rem`-based heading sizes (text-3xl … text-sm) that resolve
+ * against the document root and ignore the panel's local font-size. The `em`-based
+ * overrides below scale with `--wd-font-size`. The specificity confines this to
+ * cards-mode assistant output; the terminal theme renders headings as weight-only
+ * (no size change) through its own components and is unaffected.
+ *
+ * The heading scale mirrors Streamdown's hierarchy but at a tighter range — its
+ * 30 → 14 px span (h1 → h6) sits inside a 13px body, so the ratio is condensed:
+ * h1 at 1.5em, descending to h6 at 1em.
+ */
+[data-slot='message-content'] {
+  font-size: var(--wd-font-size, var(--text-body-sm));
+  line-height: 1.6;
+}
+[data-slot='message-content'] h1 { font-size: 1.5em; line-height: 1.35; margin-top: 1.5em; }
+[data-slot='message-content'] h2 { font-size: 1.3em; line-height: 1.35; margin-top: 1.5em; }
+[data-slot='message-content'] h3 { font-size: 1.15em; line-height: 1.4; margin-top: 1.25em; }
+[data-slot='message-content'] h4 { font-size: 1.05em; line-height: 1.4; margin-top: 1.25em; }
+[data-slot='message-content'] h5 { font-size: 1em; line-height: 1.4; margin-top: 1em; }
+[data-slot='message-content'] h6 { font-size: 1em; line-height: 1.4; margin-top: 1em; }
+[data-slot='message-content'] pre { font-size: 0.9em; }
+[data-slot='message-content'] code { font-size: 0.9em; }
+[data-slot='message-content'] pre code { font-size: inherit; }
+/* Table, cells, and headers: Streamdown puts `text-sm` (rem) on td/th directly,
+   so overriding the table alone is not enough — the cell class wins. */
+[data-slot='message-content'] table { font-size: 0.95em; }
+[data-slot='message-content'] td { font-size: inherit; }
+[data-slot='message-content'] th { font-size: inherit; }
+/* Code block body wrapper: Streamdown puts `text-sm` on the wrapper div around
+   the <pre>; override so it inherits the 0.9em from the pre rule above. */
+[data-slot='message-content'] [data-streamdown='code-block-body'] { font-size: 0.9em; }
+/* Inline code: Streamdown puts `text-sm` directly on the <code>. */
+[data-slot='message-content'] :not(pre) > code { font-size: 0.9em; }
+/* The composer's prompt area and its chips inherit the panel's font size so the
+   prompt and the output read at the same scale. The two-selector specificity
+   beats the utility class on the element. */
+[data-slot='session-panel'] .prompt-area-container {
+  font-size: var(--wd-font-size, var(--text-body-sm));
+}
+[data-slot='session-panel'] .prompt-area-chip {
+  font-size: var(--wd-font-size, 0.8125rem);
+}
+
 /* The inset frame's gradient "shine" edge (app shells). Do NOT add bg-* on top. */
 .frame-shine {
   border: 1px solid transparent;
@@ -672,7 +725,7 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  font-size: var(--text-body-sm);
+  font-size: var(--wd-font-size, var(--text-body-sm));
   color: var(--fg-2);
   background: color-mix(in srgb, var(--bg) 88%, transparent);
   backdrop-filter: blur(12px);