@smartspace/chat-ui 1.14.4-dev.65f646d → 1.14.4-dev.b35149c

package/dist/index.js

@@ -1,11 +1,11 @@
 import MuiButton from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
-import { Loader2, Cpu, ChevronDown, Check, Globe, Zap, SlidersHorizontal, X, Paperclip, Mic, Square, Send, Minimize2, AlertTriangle, FileImage, FileVideo, FileAudio, FileArchive, FileCode, FileSpreadsheet, Presentation, FileText, ChevronUp, ExternalLink, Download, ShieldAlert, Copy } from 'lucide-react';
-import * as React8 from 'react';
-import { createContext, forwardRef, useImperativeHandle, useRef, useState, useEffect, useMemo, useCallback, useContext, useSyncExternalStore } from 'react';
+import IconButton2 from '@mui/material/IconButton';
+import { Loader2, ChevronDown, Check, Cpu, SlidersHorizontal, X, Globe, Zap, Square, Mic, Paperclip, Send, Minimize2, AlertTriangle, FileImage, FileVideo, FileAudio, FileArchive, FileCode, FileSpreadsheet, Presentation, FileText, ChevronUp, ExternalLink, Download, ShieldAlert, Copy } from 'lucide-react';
+import * as React9 from 'react';
+import React9__default, { createContext, forwardRef, useImperativeHandle, useRef, useState, useEffect, useMemo, useCallback, useContext, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useQuery, queryOptions, useQueryClient, useMutation, skipToken } from '@tanstack/react-query';
+import { useQuery, queryOptions, useQueryClient, useMutation } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import { ChatZod } from '@smartspace/api-client';
 import { z } from 'zod';
@@ -17,14 +17,13 @@ import { codeBlockSchema, commonmark } from '@milkdown/preset-commonmark';
 import { Slice, NodeType } from '@milkdown/prose/model';
 import { MilkdownProvider, useEditor, Milkdown } from '@milkdown/react';
 import { PluginKey, Plugin } from '@milkdown/prose/state';
-import { Decoration, DecorationSet } from '@milkdown/prose/view';
+import { DecorationSet, Decoration } from '@milkdown/prose/view';
 import 'crypto';
 import '@milkdown/prose';
 import '@milkdown/prose/inputrules';
 import { withJsonFormsControlProps, withJsonFormsLayoutProps, JsonForms, ResolvedJsonFormsDispatch } from '@jsonforms/react';
 import { rankWith, uiTypeIs, createAjv } from '@jsonforms/core';
 import { vanillaRenderers, vanillaCells } from '@jsonforms/vanilla-renderers';
-import { FormControl, InputLabel, Select, MenuItem, useTheme, Box, Skeleton as Skeleton$1 } from '@mui/material';
 import 'ace-builds/src-noconflict/ace';
 import 'ace-builds/src-noconflict/ext-language_tools';
 import 'ace-builds/src-noconflict/mode-json';
@@ -57,6 +56,7 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import utc from 'dayjs/plugin/utc';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
+import { useTheme, Box, Skeleton as Skeleton$1 } from '@mui/material';
 
 var __defProp = Object.defineProperty;
 var __export = (target, all5) => {
@@ -600,9 +600,14 @@ var useThread = ({
 };
 var useThreadIsRunning = (workspaceId, threadId) => {
   const queryClient = useQueryClient();
+  const service = useChatService();
   const { data: detailThread } = useQuery({
-    queryKey: threadsKeys.detail(workspaceId ?? "", threadId ?? ""),
-    queryFn: skipToken
+    ...threadDetailOptions({
+      service,
+      workspaceId: workspaceId ?? "",
+      threadId: threadId ?? ""
+    }),
+    enabled: false
   });
   const listThread = workspaceId && threadId ? getThreadPlaceholderFromListCache(queryClient, workspaceId, threadId) : void 0;
   const { data: optimistic } = useQuery({
@@ -837,6 +842,37 @@ function useMessages(threadId) {
   });
 }
 
+// src/domains/speech/queryKeys.ts
+var speechKeys = {
+  all: ["speech"],
+  config: () => [...speechKeys.all, "config"]
+};
+
+// src/domains/speech/queries.ts
+var unavailable = { enabled: false, defaultLocale: "en-US" };
+var isNotFound = (error) => error?.type === "NotFound" || error?.response?.status === 404;
+function useSpeechConfig() {
+  const service = useChatService();
+  const supported = !!service.getSpeechConfig && !!service.getSpeechToken;
+  return useQuery({
+    ...queryOptions({
+      queryKey: speechKeys.config(),
+      queryFn: async () => {
+        try {
+          return await service.getSpeechConfig?.() ?? unavailable;
+        } catch (error) {
+          if (isNotFound(error)) return unavailable;
+          throw error;
+        }
+      },
+      staleTime: Infinity,
+      retry: (failureCount) => failureCount < 2,
+      retryDelay: 1e3
+    }),
+    enabled: supported
+  });
+}
+
 // ../../node_modules/.pnpm/@milkdown+exception@7.20.0/node_modules/@milkdown/exception/lib/index.js
 var ErrorCode = /* @__PURE__ */ (function(ErrorCode2) {
   ErrorCode2["docTypeError"] = "docTypeError";
@@ -970,6 +1006,75 @@ var autolink = $prose(() => {
     }
   });
 });
+var dictationGhostKey = new PluginKey("dictationGhost");
+function buildDecorations2(state, text6) {
+  const doc = state.doc;
+  const from = state.selection.head;
+  const before = from > 0 ? doc.textBetween(from - 1, from, " ") : "";
+  const display = before !== "" && !/\s/.test(before) ? ` ${text6}` : text6;
+  const widget = Decoration.widget(
+    from,
+    () => {
+      const span = document.createElement("span");
+      span.className = "md-editor__dictation-ghost";
+      span.setAttribute("aria-hidden", "true");
+      span.appendChild(document.createTextNode(display));
+      const dots = document.createElement("span");
+      dots.className = "md-editor__dictation-dots";
+      for (let i = 0; i < 3; i += 1)
+        dots.appendChild(document.createElement("span"));
+      span.appendChild(dots);
+      return span;
+    },
+    {
+      // Render after the caret so typing still lands where the user expects.
+      side: 1,
+      // Keyed by content so ProseMirror reuses the node between renders instead
+      // of tearing it down on every interim result.
+      key: `dictation-ghost:${display}`
+    }
+  );
+  const decorations = [widget];
+  const $head = state.selection.$head;
+  if ($head.depth > 0) {
+    decorations.push(
+      Decoration.node($head.before(), $head.after(), {
+        class: "md-editor__has-dictation-ghost"
+      })
+    );
+  }
+  return DecorationSet.create(doc, decorations);
+}
+var dictationGhost = $prose(() => {
+  return new Plugin({
+    key: dictationGhostKey,
+    state: {
+      init: () => "",
+      apply(tr, previous2) {
+        const meta = tr.getMeta(dictationGhostKey);
+        if (meta) return meta.text;
+        if (tr.docChanged || tr.selectionSet) return "";
+        return previous2;
+      }
+    },
+    props: {
+      decorations(state) {
+        const text6 = dictationGhostKey.getState(state) ?? "";
+        if (!text6) return DecorationSet.empty;
+        return buildDecorations2(state, text6);
+      }
+    }
+  });
+});
+function setDictationGhost(view, text6) {
+  const current = dictationGhostKey.getState(view.state) ?? "";
+  if (current === text6) return;
+  const tr = view.state.tr.setMeta(dictationGhostKey, {
+    text: text6
+  });
+  tr.setMeta("addToHistory", false);
+  view.dispatch(tr);
+}
 
 // src/shared/markdown/extensions/fileTag.ts
 var fileTag = $node("fileTag", () => ({
@@ -1879,7 +1984,7 @@ function EditorInner({
           } catch {
           }
         });
-      }).use(commonmark).use(history).use(clipboard).use(listener).use(autolink).use(fileTag).use(ssImageNode).use(ssImageView).use(htmlPreviewView).use(enableMentions ? mention : fileTag);
+      }).use(commonmark).use(history).use(clipboard).use(listener).use(autolink).use(dictationGhost).use(fileTag).use(ssImageNode).use(ssImageView).use(htmlPreviewView).use(enableMentions ? mention : fileTag);
     },
     [isEditable]
   );
@@ -2089,6 +2194,25 @@ function EditorInner({
           return value ?? "";
         }
       },
+      insertText: (text6) => {
+        const view = viewRef.current;
+        if (!view || !isEditable || !text6) return;
+        try {
+          const { from } = view.state.selection;
+          const before = from > 0 ? view.state.doc.textBetween(from - 1, from, " ") : "";
+          const needsSpace = before !== "" && !/\s/.test(before);
+          insertTextAtSelection(view, (needsSpace ? " " : "") + text6);
+        } catch {
+        }
+      },
+      setDictationGhost: (text6) => {
+        const view = viewRef.current;
+        if (!view || !isEditable) return;
+        try {
+          setDictationGhost(view, text6);
+        } catch {
+        }
+      },
       clear: () => {
         const view = viewRef.current;
         if (!view) return;
@@ -2432,6 +2556,326 @@ var MarkdownEditor = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(MilkdownProvider, { children: /* @__PURE__ */ jsx(EditorInner, { ...props, editorHandleRef: ref }) });
 });
 MarkdownEditor.displayName = "MarkdownEditor";
+var TOKEN_EXPIRY_MARGIN_MS = 15e3;
+var noLevelMonitor = () => void 0;
+var SILENCE_HINT_MS = 6e3;
+var SILENCE_LEVEL = 3;
+function monitorInputLevel(stream, onSilent, onSound) {
+  let context;
+  let source;
+  let analyser;
+  try {
+    context = new AudioContext();
+    source = context.createMediaStreamSource(stream);
+    analyser = context.createAnalyser();
+    analyser.fftSize = 512;
+    source.connect(analyser);
+  } catch {
+    return () => void 0;
+  }
+  if (context.state === "suspended")
+    void context.resume().catch(() => void 0);
+  const samples = new Uint8Array(analyser.fftSize);
+  let lastSound = Date.now();
+  let silent = false;
+  let stopped = false;
+  const poll = window.setInterval(() => {
+    if (context.state !== "running") return;
+    analyser.getByteTimeDomainData(samples);
+    let peak = 0;
+    for (const sample of samples) peak = Math.max(peak, Math.abs(sample - 128));
+    if (peak > SILENCE_LEVEL) {
+      lastSound = Date.now();
+      if (silent) {
+        silent = false;
+        onSound();
+      }
+    } else if (!silent && Date.now() - lastSound > SILENCE_HINT_MS) {
+      silent = true;
+      onSilent();
+    }
+  }, 250);
+  return () => {
+    if (stopped) return;
+    stopped = true;
+    window.clearInterval(poll);
+    try {
+      source.disconnect();
+      void context.close().catch(() => void 0);
+    } catch {
+    }
+  };
+}
+var STALE_TOKEN_FLOOR_MS = 6e4;
+function kickOff(fn) {
+  let promise;
+  try {
+    promise = Promise.resolve(fn());
+  } catch (e) {
+    promise = Promise.reject(e);
+  }
+  promise.catch(() => void 0);
+  return promise;
+}
+var isSupported = () => typeof window !== "undefined" && window.isSecureContext && !!navigator.mediaDevices?.getUserMedia;
+function classifyTokenFailure(error) {
+  const code3 = error?.code;
+  if (code3 === "SP500") return "unavailable";
+  if (error?.type === "NotFound") {
+    return "unavailable";
+  }
+  return "unavailable-temporarily";
+}
+function useDictation({
+  region,
+  locale,
+  getToken,
+  onPhrase,
+  onInterim,
+  maxDurationMs = 18e4,
+  idleTimeoutMs = 2e4
+}) {
+  const [state, setState] = useState("idle");
+  const [error, setError] = useState(null);
+  const [deviceLabel, setDeviceLabel] = useState("");
+  const [silent, setSilent] = useState(false);
+  const sessionRef = useRef(null);
+  const generationRef = useRef(0);
+  const onPhraseRef = useRef(onPhrase);
+  const onInterimRef = useRef(onInterim);
+  useEffect(() => {
+    onPhraseRef.current = onPhrase;
+    onInterimRef.current = onInterim;
+  });
+  const clearInterim = useCallback(() => onInterimRef.current?.(""), []);
+  const supported = isSupported();
+  const available = supported && !!region && !!getToken;
+  useEffect(() => {
+    if (!available) return;
+    const nav = navigator;
+    if (nav.connection?.saveData) return;
+    const warm = () => void kickOff(() => import('microsoft-cognitiveservices-speech-sdk'));
+    if (typeof window.requestIdleCallback === "function") {
+      const id2 = window.requestIdleCallback(warm, { timeout: 2e3 });
+      return () => window.cancelIdleCallback(id2);
+    }
+    const id = window.setTimeout(warm, 1500);
+    return () => window.clearTimeout(id);
+  }, [available]);
+  const stop = useCallback(() => {
+    generationRef.current += 1;
+    const session = sessionRef.current;
+    sessionRef.current = null;
+    clearInterim();
+    setState("idle");
+    setSilent(false);
+    setDeviceLabel("");
+    if (!session) return;
+    window.clearTimeout(session.timers.idle);
+    window.clearTimeout(session.timers.max);
+    session.stopLevelMonitor();
+    session.stream.getTracks().forEach((t) => t.stop());
+    session.recognizer.stopContinuousRecognitionAsync(
+      () => session.recognizer.close(),
+      () => session.recognizer.close()
+    );
+  }, [clearInterim]);
+  const start = useCallback(async () => {
+    if (!available || sessionRef.current) return;
+    const generation = ++generationRef.current;
+    const superseded = () => generationRef.current !== generation;
+    setError(null);
+    setSilent(false);
+    setState("starting");
+    const streamPromise = kickOff(
+      () => navigator.mediaDevices.getUserMedia({
+        audio: {
+          echoCancellation: true,
+          noiseSuppression: true,
+          autoGainControl: true
+        }
+      })
+    );
+    const tokenPromise = kickOff(getToken);
+    const sdkPromise = kickOff(
+      () => import('microsoft-cognitiveservices-speech-sdk')
+    );
+    let stream;
+    try {
+      stream = await streamPromise;
+    } catch (e) {
+      if (superseded()) return;
+      const name = e?.name;
+      setError(
+        name === "NotAllowedError" || name === "SecurityError" ? "permission-denied" : name === "NotFoundError" || name === "OverconstrainedError" ? "no-microphone" : "unknown"
+      );
+      setState("idle");
+      return;
+    }
+    if (superseded()) {
+      stream.getTracks().forEach((t) => t.stop());
+      return;
+    }
+    let token;
+    try {
+      token = await tokenPromise;
+      if (Date.parse(token.expiresOn) - Date.now() < STALE_TOKEN_FLOOR_MS) {
+        token = await getToken();
+      }
+    } catch (e) {
+      stream.getTracks().forEach((t) => t.stop());
+      if (superseded()) return;
+      setError(classifyTokenFailure(e));
+      setState("idle");
+      return;
+    }
+    if (superseded()) {
+      stream.getTracks().forEach((t) => t.stop());
+      return;
+    }
+    let recognizer = null;
+    let published = null;
+    try {
+      const sdk = await sdkPromise;
+      if (superseded()) {
+        stream.getTracks().forEach((t) => t.stop());
+        return;
+      }
+      const speechConfig = sdk.SpeechConfig.fromAuthorizationToken(
+        token.token,
+        region
+      );
+      speechConfig.speechRecognitionLanguage = locale;
+      speechConfig.setProfanity(sdk.ProfanityOption.Raw);
+      speechConfig.setProperty(
+        sdk.PropertyId.Speech_SegmentationSilenceTimeoutMs,
+        "700"
+      );
+      recognizer = new sdk.SpeechRecognizer(
+        speechConfig,
+        sdk.AudioConfig.fromStreamInput(stream)
+      );
+      const untilExpiry = Date.parse(token.expiresOn) - Date.now() - TOKEN_EXPIRY_MARGIN_MS;
+      const sessionCapMs = Number.isFinite(untilExpiry) && untilExpiry > 0 ? Math.min(maxDurationMs, untilExpiry) : maxDurationMs;
+      const session = {
+        recognizer,
+        stream,
+        timers: {},
+        stopLevelMonitor: noLevelMonitor
+      };
+      const armIdle = () => {
+        window.clearTimeout(session.timers.idle);
+        session.timers.idle = window.setTimeout(stop, idleTimeoutMs);
+      };
+      const isLive = () => sessionRef.current === session;
+      sessionRef.current = session;
+      published = session;
+      const goLive = () => {
+        if (!isLive()) return;
+        session.timers.max ??= window.setTimeout(stop, sessionCapMs);
+        if (session.stopLevelMonitor === noLevelMonitor) {
+          try {
+            setDeviceLabel(stream.getAudioTracks()[0]?.label ?? "");
+            session.stopLevelMonitor = monitorInputLevel(
+              stream,
+              () => {
+                if (isLive()) setSilent(true);
+              },
+              () => {
+                if (isLive()) setSilent(false);
+              }
+            );
+          } catch {
+            session.stopLevelMonitor = noLevelMonitor;
+          }
+        }
+        armIdle();
+        setState("listening");
+      };
+      recognizer.sessionStarted = () => goLive();
+      recognizer.recognizing = (_sender, event) => {
+        if (!isLive()) return;
+        onInterimRef.current?.(event.result.text ?? "");
+        armIdle();
+      };
+      recognizer.recognized = (_sender, event) => {
+        if (!isLive()) return;
+        const text6 = event.result.text?.trim();
+        clearInterim();
+        if (event.result.reason === sdk.ResultReason.RecognizedSpeech && text6) {
+          onPhraseRef.current(text6);
+        }
+        armIdle();
+      };
+      recognizer.canceled = (_sender, event) => {
+        if (!isLive()) return;
+        if (event.reason === sdk.CancellationReason.Error) {
+          console.warn("[dictation] cancelled, errorCode:", event.errorCode);
+          setError(
+            event.errorCode === sdk.CancellationErrorCode.ConnectionFailure ? "network" : event.errorCode === sdk.CancellationErrorCode.AuthenticationFailure ? "unavailable-temporarily" : "unknown"
+          );
+        }
+        stop();
+      };
+      recognizer.sessionStopped = () => {
+        if (isLive()) stop();
+      };
+      try {
+        const connection = sdk.Connection.fromRecognizer(recognizer);
+        connection.connected = () => goLive();
+        connection.openConnection();
+      } catch {
+      }
+      await new Promise(
+        (resolve, reject) => session.recognizer.startContinuousRecognitionAsync(resolve, reject)
+      );
+      goLive();
+    } catch (e) {
+      stream.getTracks().forEach((t) => t.stop());
+      try {
+        recognizer?.close();
+      } catch {
+      }
+      if (published) {
+        window.clearTimeout(published.timers.idle);
+        window.clearTimeout(published.timers.max);
+        published.stopLevelMonitor();
+        if (sessionRef.current === published) sessionRef.current = null;
+      }
+      if (superseded()) return;
+      console.warn("[dictation] failed to start:", e);
+      setError((prev) => prev ?? "unavailable-temporarily");
+      setState("idle");
+    }
+  }, [
+    available,
+    clearInterim,
+    getToken,
+    idleTimeoutMs,
+    locale,
+    maxDurationMs,
+    region,
+    stop
+  ]);
+  useEffect(() => stop, [stop]);
+  const toggle = useCallback(() => {
+    if (state === "idle") void start();
+    else stop();
+  }, [start, state, stop]);
+  return {
+    supported,
+    available,
+    state,
+    error,
+    /** Name of the microphone in use, once a session is live. May be ''. */
+    deviceLabel,
+    /** Listening, but the microphone has produced no sound for a while. */
+    silent,
+    start,
+    stop,
+    toggle
+  };
+}
 function useFlowRunVariables(flowRunId) {
   const service = useChatService();
   return useQuery({
@@ -2443,6 +2887,31 @@ function useFlowRunVariables(flowRunId) {
     enabled: !!flowRunId
   });
 }
+
+// src/chat-variables/renders/fieldStyles.ts
+var scaleFor = (surface) => surface === "form" ? "comfortable" : "dense";
+var fieldLabelClass = (scale) => `block truncate font-medium text-muted-foreground ${scale === "dense" ? "mb-1 text-xs" : "mb-1.5 text-sm"}`;
+var CONTROL_BASE = "rounded-md border bg-background text-foreground transition-colors placeholder:text-muted-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60";
+var borderClass = (hasError) => hasError ? "border-destructive" : "border-input";
+var fieldControlClass = (scale, hasError) => `w-full ${CONTROL_BASE} ${borderClass(hasError)} ${scale === "dense" ? "px-2.5 py-1.5 text-xs" : "px-3 py-2 text-sm"}`;
+var fieldTriggerClass = (scale, hasError) => `w-full ${CONTROL_BASE} ${borderClass(
+  hasError
+)} flex items-center justify-between gap-2 text-left ${scale === "dense" ? "h-8 px-2.5 text-xs" : "h-10 px-3 text-sm"}`;
+var fieldNumberClass = (scale, hasError) => `${CONTROL_BASE} ${borderClass(hasError)} tabular-nums ${scale === "dense" ? "h-8 w-20 px-2 text-xs" : "h-10 w-24 px-2.5 text-sm"}`;
+var fieldHintClass = "mt-1 text-xs text-muted-foreground";
+var fieldErrorClass = "mt-1 text-xs text-destructive";
+var fieldRowClass = "flex items-center justify-between gap-3";
+var fieldRowLabelClass = (scale) => `min-w-0 flex-1 truncate font-medium text-muted-foreground ${scale === "dense" ? "text-xs" : "text-sm"}`;
+var pillClass = (opts) => `flex h-8 shrink-0 items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${opts.active ? "border-primary/30 bg-primary/10 text-primary" : "border-border/70 bg-transparent text-muted-foreground hover:bg-secondary"} ${opts.hasError ? "border-destructive text-destructive" : ""} ${opts.disabled ? "cursor-not-allowed opacity-60" : ""}`;
+var pillLabelClass = "max-w-[9rem] truncate";
+var pillValueClass = "max-w-[9rem] truncate text-foreground";
+var switchTrackClass = (on, disabled) => `peer inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background ${on ? "bg-primary" : "bg-input"} ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`;
+var switchThumbClass = (on) => `pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform ${on ? "translate-x-5" : "translate-x-0"}`;
+var POPOVER_WIDTH_PX = 288;
+var POPOVER_MAX_HEIGHT_PX = 288;
+var popoverClass = "flex flex-col overflow-hidden rounded-xl border border-border bg-popover shadow-lg";
+var popoverRowClass = "flex w-full items-center gap-2.5 px-3 py-2 text-left transition-colors hover:bg-secondary/60";
+var popoverHeadingClass = "text-[10px] font-semibold uppercase tracking-wide text-muted-foreground";
 function iconFor(label) {
   const name = (label ?? "").toLowerCase();
   if (/search|web|browse|internet/.test(name)) return Globe;
@@ -2458,7 +2927,8 @@ var BooleanRenderer = ({
   errors,
   uischema,
   visible,
-  enabled
+  enabled,
+  config
 }) => {
   const onToggle = useCallback(() => {
     handleChange(path2, !data);
@@ -2469,13 +2939,17 @@ var BooleanRenderer = ({
   const hasError = !!errors && errors.length > 0;
   const isChecked = Boolean(data);
   const Icon = iconFor(label);
+  const surface = (config ?? {}).surface ?? "form";
+  const scale = scaleFor(surface);
   const tooltip = [label, description, hasError ? errors : null].filter(Boolean).join(" \u2014 ");
-  return /* @__PURE__ */ jsxs(
+  const toggle = /* @__PURE__ */ jsx(
     "button",
     {
       id: `toggle-${path2}`,
       type: "button",
-      "aria-pressed": isChecked,
+      role: surface === "bar" ? void 0 : "switch",
+      "aria-pressed": surface === "bar" ? isChecked : void 0,
+      "aria-checked": surface === "bar" ? void 0 : isChecked,
       "aria-label": label,
       title: tooltip || void 0,
       onClick: onToggle,
@@ -2485,16 +2959,28 @@ var BooleanRenderer = ({
           e.currentTarget.blur();
         }
       },
-      className: `boolean-switch flex h-8 shrink-0 items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${isChecked ? "border-primary/30 bg-primary/10 text-primary" : "border-transparent bg-transparent text-muted-foreground hover:bg-secondary"} ${hasError ? "border-destructive text-destructive" : ""} ${isDisabled ? "cursor-not-allowed opacity-60" : ""}`,
-      children: [
+      className: surface === "bar" ? `boolean-switch ${pillClass({
+        active: isChecked,
+        hasError,
+        disabled: isDisabled
+      })}` : switchTrackClass(isChecked, isDisabled),
+      children: surface === "bar" ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
         label && // Desktop-first: the app and the package each ship a full Tailwind
-        // build, so a base `hidden` can out-order `sm:inline`. `max-sm:hidden`
-        // is the form that survives both cascades.
-        /* @__PURE__ */ jsx("span", { className: "inline max-w-[9rem] truncate max-sm:hidden", children: label })
-      ]
+        // build, so a base `hidden` can out-order `sm:inline`.
+        // `max-sm:hidden` is the form that survives both cascades.
+        /* @__PURE__ */ jsx("span", { className: `inline ${pillLabelClass} max-sm:hidden`, children: label })
+      ] }) : /* @__PURE__ */ jsx("span", { className: switchThumbClass(isChecked) })
     }
   );
+  if (surface === "bar") return toggle;
+  return /* @__PURE__ */ jsxs("div", { className: "ss-jsonforms-field ss-jsonforms-boolean", children: [
+    /* @__PURE__ */ jsxs("div", { className: fieldRowClass, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: `toggle-${path2}`, className: fieldRowLabelClass(scale), children: label }),
+      toggle
+    ] }),
+    hasError && /* @__PURE__ */ jsx("div", { className: fieldErrorClass, children: errors })
+  ] });
 };
 var booleanRendererTester = rankWith(40, (uischema, schema) => {
   if (uischema.type !== "Control") return false;
@@ -2504,6 +2990,104 @@ var booleanRendererTester = rankWith(40, (uischema, schema) => {
   return fieldSchema?.type === "boolean";
 });
 var BooleanRendererControl = withJsonFormsControlProps(BooleanRenderer);
+var GAP_PX = 8;
+var MIN_TRIGGER_WIDTH_PX = 224;
+var MIN_PANEL_HEIGHT_PX = 180;
+var NestedPopoverContext = React9__default.createContext(null);
+function useAnchoredPopover({
+  trigger,
+  popover,
+  width,
+  maxHeight,
+  role,
+  label
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const parentRegistry = useContext(NestedPopoverContext);
+  const descendants = useRef(/* @__PURE__ */ new Set());
+  const close = useCallback(() => setIsOpen(false), []);
+  const toggle = useCallback(() => setIsOpen((open) => !open), []);
+  const registry = useMemo(
+    () => ({
+      register: (el) => {
+        descendants.current.add(el);
+        parentRegistry?.register(el);
+      },
+      unregister: (el) => {
+        descendants.current.delete(el);
+        parentRegistry?.unregister(el);
+      }
+    }),
+    [parentRegistry]
+  );
+  useEffect(() => {
+    if (!isOpen || !parentRegistry) return;
+    const el = popover.current;
+    if (!el) return;
+    parentRegistry.register(el);
+    return () => parentRegistry.unregister(el);
+  }, [isOpen, parentRegistry, popover]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (trigger.current?.contains(target)) return;
+      if (popover.current?.contains(target)) return;
+      for (const el of descendants.current) {
+        if (el.contains(target)) return;
+      }
+      close();
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") close();
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    window.addEventListener("resize", close);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("resize", close);
+    };
+  }, [isOpen, close, trigger, popover]);
+  const renderPopover = (children2) => {
+    if (!isOpen) return null;
+    const anchor = trigger.current?.getBoundingClientRect();
+    if (!anchor) return null;
+    const panelWidth = width === "trigger" ? Math.max(anchor.width, MIN_TRIGGER_WIDTH_PX) : width;
+    const spaceAbove = anchor.top - GAP_PX * 2;
+    const spaceBelow = window.innerHeight - anchor.bottom - GAP_PX * 2;
+    const openAbove = spaceAbove >= MIN_PANEL_HEIGHT_PX || spaceAbove >= spaceBelow;
+    const panelMaxHeight = Math.max(
+      0,
+      Math.min(maxHeight, openAbove ? spaceAbove : spaceBelow)
+    );
+    return createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: popover,
+          role,
+          "aria-label": label,
+          className: `fixed z-50 ${popoverClass}`,
+          style: {
+            width: panelWidth,
+            maxWidth: `calc(100vw - ${GAP_PX * 4}px)`,
+            left: Math.max(
+              GAP_PX,
+              Math.min(anchor.left, window.innerWidth - panelWidth - GAP_PX)
+            ),
+            ...openAbove ? { bottom: window.innerHeight - anchor.top + GAP_PX } : { top: anchor.bottom + GAP_PX },
+            maxHeight: panelMaxHeight
+          },
+          children: /* @__PURE__ */ jsx(NestedPopoverContext.Provider, { value: registry, children: children2 })
+        }
+      ),
+      document.body
+    );
+  };
+  return { isOpen, close, toggle, renderPopover };
+}
 function hasConst(x) {
   return !!x && typeof x === "object" && "const" in x;
 }
@@ -2542,185 +3126,109 @@ var DropdownRenderer = ({
   label,
   description,
   errors,
-  uischema
+  config,
+  uischema,
+  visible
 }) => {
+  const triggerRef = useRef(null);
+  const listRef = useRef(null);
+  const surface = (config ?? {}).surface ?? "form";
+  const scale = scaleFor(surface);
+  const { isOpen, close, toggle, renderPopover } = useAnchoredPopover({
+    trigger: triggerRef,
+    popover: listRef,
+    // A select's list lines up with its own control.
+    width: "trigger",
+    maxHeight: POPOVER_MAX_HEIGHT_PX,
+    role: "listbox",
+    label: label || "Options"
+  });
   const options = toOptions(schema);
-  const handleSelectionChange = useCallback(
-    (event) => {
-      handleChange(path2, event.target.value);
+  const select = useCallback(
+    (value) => {
+      handleChange(path2, value);
+      close();
     },
-    [handleChange, path2]
+    [handleChange, path2, close]
   );
-  const displayValue = data ?? "";
+  if (!visible) return null;
   const readOnly = uischema?.access === "Read";
   const isDisabled = !enabled || readOnly;
-  return /* @__PURE__ */ jsxs(
-    FormControl,
+  const hasError = !!errors;
+  const selected = options.find((option) => option.const === data);
+  const valueText = selected ? selected.title ?? String(selected.const) : data != null && data !== "" ? String(data) : "";
+  const triggerId = `${path2}-trigger`;
+  const isBar = surface === "bar";
+  const placeholder = `Select ${(label || "value").toLowerCase()}\u2026`;
+  const trigger = /* @__PURE__ */ jsxs(
+    "button",
     {
-      variant: "outlined",
-      size: "small",
-      fullWidth: true,
-      error: !!errors,
+      id: triggerId,
+      ref: triggerRef,
+      type: "button",
       disabled: isDisabled,
-      className: "compact-field",
-      sx: {
-        minWidth: "220px"
-      },
+      onClick: toggle,
+      "aria-haspopup": "listbox",
+      "aria-expanded": isOpen,
+      "aria-label": label,
+      title: [label, valueText, hasError ? errors : null].filter(Boolean).join(" \u2014 ") || void 0,
+      className: isBar ? `ss-jsonforms-select-trigger ${pillClass({
+        active: isOpen,
+        hasError,
+        disabled: isDisabled
+      })}` : `ss-jsonforms-select-trigger ${fieldTriggerClass(scale, hasError)}`,
       children: [
+        isBar && label && /* @__PURE__ */ jsx("span", { className: `inline ${pillLabelClass} max-sm:hidden`, children: label }),
         /* @__PURE__ */ jsx(
-          InputLabel,
+          "span",
           {
-            id: `${path2}-label`,
-            sx: {
-              color: "#6b7280",
-              fontSize: "0.875rem",
-              fontWeight: 500,
-              "&.Mui-focused": {
-                color: "#6366f1"
-              },
-              "&.Mui-error": {
-                color: "#ef4444"
-              }
-            },
-            children: label
+            className: isBar ? pillValueClass : `min-w-0 flex-1 truncate ${valueText ? "" : "text-muted-foreground"}`,
+            children: valueText || (isBar ? "\u2014" : placeholder)
           }
         ),
         /* @__PURE__ */ jsx(
-          Select,
-          {
-            labelId: `${path2}-label`,
-            value: displayValue,
-            onChange: handleSelectionChange,
-            label,
-            sx: {
-              "& .MuiOutlinedInput-root": {
-                backgroundColor: "#fafafa",
-                borderRadius: "8px",
-                transition: "all 0.2s ease-in-out",
-                height: "40px",
-                // Same height as model dropdown
-                "& fieldset": {
-                  borderColor: "#e5e7eb",
-                  borderWidth: "1px"
-                },
-                "&:hover": {
-                  backgroundColor: "#ffffff",
-                  "& fieldset": {
-                    borderColor: "#9ca3af"
-                  }
-                },
-                "&.Mui-focused": {
-                  backgroundColor: "#ffffff",
-                  "& fieldset": {
-                    borderColor: "#6366f1",
-                    borderWidth: "2px"
-                  }
-                },
-                "&.Mui-error": {
-                  "& fieldset": {
-                    borderColor: "#ef4444"
-                  }
-                }
-              },
-              "& .MuiSelect-select": {
-                backgroundColor: "#fafafa",
-                borderRadius: "8px",
-                transition: "all 0.2s ease-in-out",
-                height: "40px",
-                display: "flex",
-                alignItems: "center",
-                paddingRight: "32px !important",
-                "&:hover": {
-                  backgroundColor: "#ffffff"
-                },
-                "&.Mui-focused": {
-                  backgroundColor: "#ffffff"
-                }
-              },
-              "& .MuiOutlinedInput-notchedOutline": {
-                borderColor: "#e5e7eb",
-                borderWidth: "1px",
-                borderRadius: "8px"
-              },
-              "&:hover .MuiOutlinedInput-notchedOutline": {
-                borderColor: "#9ca3af"
-              },
-              "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                borderColor: "#6366f1",
-                borderWidth: "2px"
-              },
-              "&.Mui-error .MuiOutlinedInput-notchedOutline": {
-                borderColor: "#ef4444"
-              },
-              "& .MuiSelect-icon": {
-                color: "#9ca3af",
-                "&:hover": {
-                  color: "#6b7280"
-                }
-              }
-            },
-            MenuProps: {
-              PaperProps: {
-                sx: {
-                  borderRadius: "8px",
-                  boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
-                  border: "1px solid #e5e7eb",
-                  marginTop: "4px",
-                  maxHeight: "280px"
-                }
-              },
-              MenuListProps: {
-                sx: {
-                  padding: 0
-                }
-              }
-            },
-            children: options.map((option, index) => {
-              const raw2 = option.const;
-              const key = typeof raw2 === "string" || typeof raw2 === "number" ? String(raw2) : String(index);
-              const value = typeof raw2 === "string" || typeof raw2 === "number" ? raw2 : String(raw2 ?? index);
-              return /* @__PURE__ */ jsx(
-                MenuItem,
-                {
-                  value,
-                  sx: {
-                    padding: "12px 16px",
-                    fontSize: "0.875rem",
-                    borderBottom: "1px solid #f3f4f6",
-                    "&:last-child": {
-                      borderBottom: "none"
-                    },
-                    "&:hover": {
-                      backgroundColor: "#f8fafc"
-                    },
-                    "&.Mui-selected": {
-                      backgroundColor: "#eff6ff",
-                      "&:hover": {
-                        backgroundColor: "#dbeafe"
-                      }
-                    }
-                  },
-                  children: option.title ?? String(raw2)
-                },
-                key
-              );
-            })
-          }
-        ),
-        (description || errors) && /* @__PURE__ */ jsx(
-          "div",
+          ChevronDown,
           {
-            style: {
-              fontSize: "0.75rem",
-              marginTop: "4px",
-              color: errors ? "#ef4444" : "#6b7280"
-            },
-            children: errors || description
+            className: `shrink-0 opacity-50 ${isBar ? "h-3 w-3" : "h-4 w-4"}`
           }
         )
       ]
     }
   );
+  return /* @__PURE__ */ jsxs("div", { className: "ss-jsonforms-field ss-jsonforms-select compact-field", children: [
+    !isBar && label && /* @__PURE__ */ jsx("label", { htmlFor: triggerId, className: fieldLabelClass(scale), children: label }),
+    trigger,
+    !isBar && (errors || description) && /* @__PURE__ */ jsx("div", { className: errors ? fieldErrorClass : fieldHintClass, children: errors || description }),
+    renderPopover(
+      /* @__PURE__ */ jsxs("div", { className: "min-h-0 overflow-y-auto py-1", children: [
+        options.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-xs text-muted-foreground", children: "No options available" }),
+        options.map((option, index) => {
+          const active = option.const === data;
+          const text6 = option.title ?? String(option.const);
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": active,
+              onClick: () => select(option.const),
+              className: popoverRowClass,
+              children: [
+                /* @__PURE__ */ jsx(
+                  Check,
+                  {
+                    className: `h-3.5 w-3.5 shrink-0 ${active ? "text-primary" : "opacity-0"}`
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-foreground", children: text6 })
+              ]
+            },
+            typeof option.const === "string" || typeof option.const === "number" ? String(option.const) : `option-${index}`
+          );
+        })
+      ] })
+    )
+  ] });
 };
 var dropdownRendererTester = rankWith(
   90,
@@ -2738,8 +3246,8 @@ var dropdownRendererTester = rankWith(
       return false;
     }
     const hasDropdownOptions = !!(fieldSchema.oneOf || fieldSchema.anyOf || fieldSchema.enum && Array.isArray(fieldSchema.enum));
-    const isModelSelector = typeof fieldSchema === "object" && fieldSchema && fieldSchema["x-model-selector"] === true || fieldSchema.title === "ModelId" || fieldSchema.format === "uuid";
-    return hasDropdownOptions && !isModelSelector;
+    const isModelSelector2 = typeof fieldSchema === "object" && fieldSchema && fieldSchema["x-model-selector"] === true || fieldSchema.title === "ModelId" || fieldSchema.format === "uuid";
+    return hasDropdownOptions && !isModelSelector2;
   }
 );
 var DropdownRendererControl = withJsonFormsControlProps(DropdownRenderer);
@@ -2774,7 +3282,8 @@ var JsonEditorRenderer = ({
   uischema,
   visible,
   enabled,
-  required
+  required,
+  config
 }) => {
   const [jsonValue, setJsonValue] = useState("");
   const [displayedParseError, setDisplayedParseError] = useState(
@@ -2828,43 +3337,19 @@ var JsonEditorRenderer = ({
   }
   const readOnly = uischema?.access === "Read";
   const isDisabled = !enabled || readOnly;
+  const scale = scaleFor(
+    (config ?? {}).surface ?? "form"
+  );
   return /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1rem" }, children: [
-    label && /* @__PURE__ */ jsxs(
-      "label",
-      {
-        style: {
-          display: "block",
-          color: "#475569",
-          fontSize: "0.875rem",
-          fontWeight: 500,
-          marginBottom: "0.375rem"
-        },
-        children: [
-          label,
-          required && /* @__PURE__ */ jsx("span", { style: { color: "#ef4444", marginLeft: "0.25rem" }, children: "*" })
-        ]
-      }
-    ),
-    description && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          color: "#6b7280",
-          fontSize: "0.75rem",
-          marginBottom: "0.5rem"
-        },
-        children: description
-      }
-    ),
+    label && /* @__PURE__ */ jsxs("label", { className: fieldLabelClass(scale), children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-destructive", children: "*" })
+    ] }),
+    description && /* @__PURE__ */ jsx("div", { className: fieldHintClass, children: description }),
     /* @__PURE__ */ jsx(
       "div",
       {
-        style: {
-          border: errors || displayedParseError ? "1px solid #ef4444" : "1px solid #d1d5db",
-          borderRadius: "6px",
-          overflow: "hidden",
-          opacity: isDisabled ? 0.6 : 1
-        },
+        className: `overflow-hidden rounded-md border ${errors || displayedParseError ? "border-destructive" : "border-input"} ${isDisabled ? "opacity-60" : ""}`,
         children: /* @__PURE__ */ jsx(
           AceEditor,
           {
@@ -2897,28 +3382,8 @@ var JsonEditorRenderer = ({
         )
       }
     ),
-    displayedParseError && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          color: "#ef4444",
-          fontSize: "0.75rem",
-          marginTop: "0.25rem"
-        },
-        children: displayedParseError
-      }
-    ),
-    errors && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          color: "#ef4444",
-          fontSize: "0.75rem",
-          marginTop: "0.25rem"
-        },
-        children: errors
-      }
-    )
+    displayedParseError && /* @__PURE__ */ jsx("div", { className: fieldErrorClass, children: displayedParseError }),
+    errors && /* @__PURE__ */ jsx("div", { className: fieldErrorClass, children: errors })
   ] });
 };
 var jsonEditorTester = rankWith(
@@ -3009,14 +3474,31 @@ var ModelIdRenderer = ({
   description,
   errors,
   uischema,
-  visible
+  visible,
+  config
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
   const [searchValue, setSearchValue] = useState("");
   const [debouncedSearchValue, setDebouncedSearchValue] = useState("");
-  const containerRef = useRef(null);
+  const triggerRef = useRef(null);
   const menuRef = useRef(null);
   const searchRef = useRef(null);
+  const surface = (config ?? {}).surface ?? "bar";
+  const scale = scaleFor(surface);
+  const isBar = surface === "bar";
+  const {
+    isOpen,
+    close: closeMenu,
+    toggle,
+    renderPopover
+  } = useAnchoredPopover({
+    trigger: triggerRef,
+    popover: menuRef,
+    // Wide enough for a provider glyph, a model name and its id underneath.
+    width: POPOVER_WIDTH_PX,
+    maxHeight: POPOVER_MAX_HEIGHT_PX,
+    role: "listbox",
+    label: "Models"
+  });
   const debounceTimerRef = useRef(
     void 0
   );
@@ -3055,35 +3537,13 @@ var ModelIdRenderer = ({
       handleChange(path2, model.id);
       setSearchValue("");
       setDebouncedSearchValue("");
-      setIsOpen(false);
+      closeMenu();
     },
-    [handleChange, path2]
+    [handleChange, path2, closeMenu]
   );
-  const close = useCallback(() => {
-    setIsOpen(false);
-    setSearchValue("");
-  }, []);
   useEffect(() => {
-    if (!isOpen) return;
-    const onPointerDown = (event) => {
-      const target = event.target;
-      if (containerRef.current && !containerRef.current.contains(target) && !(menuRef.current && menuRef.current.contains(target))) {
-        close();
-      }
-    };
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") close();
-    };
-    const onResize = () => close();
-    document.addEventListener("mousedown", onPointerDown);
-    document.addEventListener("keydown", onKeyDown);
-    window.addEventListener("resize", onResize);
-    return () => {
-      document.removeEventListener("mousedown", onPointerDown);
-      document.removeEventListener("keydown", onKeyDown);
-      window.removeEventListener("resize", onResize);
-    };
-  }, [isOpen, close]);
+    if (!isOpen) setSearchValue("");
+  }, [isOpen]);
   useEffect(() => {
     if (isOpen) searchRef.current?.focus();
   }, [isOpen]);
@@ -3092,53 +3552,58 @@ var ModelIdRenderer = ({
   const isDisabled = !enabled || readOnly;
   const hasError = !!errors && errors.length > 0;
   const selectedName = selectedModel ? selectedModel.displayName || selectedModel.name || "" : "";
-  const triggerText = selectedName || label || "Select model";
+  const triggerText = selectedName || "Select model";
   const iconSrc = getModelIcon(selectedModel);
   const tooltip = [selectedName || label, description, hasError ? errors : null].filter(Boolean).join(" \u2014 ");
-  const anchorRect = isOpen ? containerRef.current?.getBoundingClientRect() : void 0;
-  return /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", ref: containerRef, children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => setIsOpen((v) => !v),
-        disabled: isDisabled,
-        "aria-expanded": isOpen,
-        "aria-haspopup": "listbox",
-        "aria-label": label || "Select model",
-        title: tooltip || void 0,
-        className: `flex h-8 shrink-0 items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${isOpen ? "border-primary/30 bg-primary/10 text-primary" : "border-border/70 bg-transparent text-muted-foreground hover:bg-secondary"} ${hasError ? "border-destructive text-destructive" : ""} ${isDisabled ? "cursor-not-allowed opacity-60" : ""}`,
-        children: [
-          iconSrc ? /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: iconSrc,
-              alt: "",
-              className: "h-3.5 w-3.5 shrink-0 object-contain"
-            }
-          ) : /* @__PURE__ */ jsx(Cpu, { className: "h-3.5 w-3.5 shrink-0" }),
-          /* @__PURE__ */ jsx("span", { className: "inline max-w-[9rem] truncate max-sm:hidden", children: triggerText }),
-          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0 opacity-60" })
-        ]
-      }
-    ),
-    isOpen && anchorRect && createPortal(
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: menuRef,
-          role: "listbox",
-          "aria-label": label || "Models",
-          className: "fixed z-50 w-72 max-w-[calc(100vw-2rem)] overflow-hidden rounded-xl border border-border bg-popover shadow-lg",
-          style: {
-            left: Math.max(
-              8,
-              Math.min(anchorRect.left, window.innerWidth - 288 - 8)
-            ),
-            bottom: window.innerHeight - anchorRect.top + 8
-          },
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "border-b border-border p-2", children: /* @__PURE__ */ jsx(
+  const triggerLabel = !label || label === "ModelId" ? "Model" : label;
+  const trigger = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: triggerRef,
+      id: `${path2}-trigger`,
+      type: "button",
+      onClick: toggle,
+      disabled: isDisabled,
+      "aria-expanded": isOpen,
+      "aria-haspopup": "listbox",
+      "aria-label": triggerLabel,
+      title: tooltip || void 0,
+      className: isBar ? pillClass({ active: isOpen, hasError, disabled: isDisabled }) : fieldTriggerClass(scale, hasError),
+      children: [
+        iconSrc ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: iconSrc,
+            alt: "",
+            className: "h-3.5 w-3.5 shrink-0 object-contain"
+          }
+        ) : /* @__PURE__ */ jsx(Cpu, { className: "h-3.5 w-3.5 shrink-0" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: isBar ? `inline ${pillValueClass} max-sm:hidden` : "min-w-0 flex-1 truncate",
+            children: triggerText
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            className: `shrink-0 opacity-60 ${isBar ? "h-3 w-3" : "h-4 w-4"}`
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: isBar ? "ss-jsonforms-field ss-jsonforms-model relative shrink-0" : "ss-jsonforms-field ss-jsonforms-model compact-field",
+      children: [
+        !isBar && /* @__PURE__ */ jsx("label", { htmlFor: `${path2}-trigger`, className: fieldLabelClass(scale), children: triggerLabel }),
+        trigger,
+        renderPopover(
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-border p-2", children: /* @__PURE__ */ jsx(
               "input",
               {
                 ref: searchRef,
@@ -3150,7 +3615,7 @@ var ModelIdRenderer = ({
                 className: "h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground outline-none placeholder:text-muted-foreground focus:border-primary/40"
               }
             ) }),
-            /* @__PURE__ */ jsxs("div", { className: "max-h-72 overflow-y-auto", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-h-0 overflow-y-auto", children: [
               isLoading && listModels.length === 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-primary" }) }),
               !isLoading && listModels.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-xs text-muted-foreground", children: searchValue ? "No models found" : "No models available" }),
               listModels.map((model) => {
@@ -3163,7 +3628,7 @@ var ModelIdRenderer = ({
                     role: "option",
                     "aria-selected": active,
                     onClick: () => handleSelect(model),
-                    className: "flex w-full items-center gap-2.5 px-3 py-2 text-left transition-colors hover:bg-secondary/60",
+                    className: popoverRowClass,
                     children: [
                       /* @__PURE__ */ jsx(
                         Check,
@@ -3189,12 +3654,11 @@ var ModelIdRenderer = ({
                 );
               })
             ] })
-          ]
-        }
-      ),
-      document.body
-    )
-  ] });
+          ] })
+        )
+      ]
+    }
+  );
 };
 var modelIdRendererTester = rankWith(
   100,
@@ -3229,6 +3693,7 @@ var NumberRenderer = ({
   uischema,
   visible,
   enabled,
+  config,
   required
 }) => {
   const isInteger = schema?.type === "integer";
@@ -3257,40 +3722,58 @@ var NumberRenderer = ({
   const max = fieldSchema?.maximum;
   const step = isInteger ? 1 : fieldSchema?.multipleOf ?? "any";
   const tooltip = [label, description, hasError ? errors : null].filter(Boolean).join(" \u2014 ");
-  return /* @__PURE__ */ jsxs(
-    "div",
+  const surface = (config ?? {}).surface ?? "form";
+  const scale = scaleFor(surface);
+  const input = /* @__PURE__ */ jsx(
+    "input",
     {
-      className: `ss-jsonforms-field ss-jsonforms-number flex h-8 shrink-0 items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium transition-colors focus-within:border-primary/40 ${hasError ? "border-destructive" : "border-border/70"} ${isDisabled ? "opacity-60" : ""}`,
-      title: tooltip || void 0,
-      children: [
-        label && /* @__PURE__ */ jsxs(
-          "label",
-          {
-            htmlFor: `number-${path2}`,
-            className: `whitespace-nowrap ${hasError ? "text-destructive" : "text-muted-foreground"}`,
-            children: [
-              label,
-              required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-destructive", children: "*" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            id: `number-${path2}`,
-            type: "number",
-            value: data ?? "",
-            onChange: handleInputChange,
-            disabled: isDisabled,
-            min,
-            max,
-            step,
-            className: "w-14 border-0 bg-transparent p-0 text-xs font-medium tabular-nums text-foreground outline-none disabled:cursor-not-allowed"
-          }
-        )
-      ]
+      id: `number-${path2}`,
+      type: "number",
+      value: data ?? "",
+      onChange: handleInputChange,
+      disabled: isDisabled,
+      min,
+      max,
+      step,
+      className: surface === "bar" ? "w-14 border-0 bg-transparent p-0 text-xs font-medium tabular-nums text-foreground outline-none disabled:cursor-not-allowed" : fieldNumberClass(scale, hasError)
     }
   );
+  if (surface === "bar") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `ss-jsonforms-field ss-jsonforms-number ${pillClass({
+          hasError,
+          disabled: isDisabled
+        })}`,
+        title: tooltip || void 0,
+        children: [
+          label && /* @__PURE__ */ jsxs(
+            "label",
+            {
+              htmlFor: `number-${path2}`,
+              className: `${pillLabelClass} whitespace-nowrap ${hasError ? "text-destructive" : "text-muted-foreground"}`,
+              children: [
+                label,
+                required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-destructive", children: "*" })
+              ]
+            }
+          ),
+          input
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "ss-jsonforms-field ss-jsonforms-number", children: [
+    /* @__PURE__ */ jsxs("div", { className: fieldRowClass, children: [
+      /* @__PURE__ */ jsxs("label", { htmlFor: `number-${path2}`, className: fieldRowLabelClass(scale), children: [
+        label,
+        required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-destructive", children: "*" })
+      ] }),
+      input
+    ] }),
+    hasError && /* @__PURE__ */ jsx("div", { className: fieldErrorClass, children: errors })
+  ] });
 };
 var numberRendererTester = rankWith(
   40,
@@ -3306,6 +3789,14 @@ var numberRendererTester = rankWith(
   }
 );
 var NumberRendererControl = withJsonFormsControlProps(NumberRenderer);
+var SCALE = {
+  comfortable: { lineHeight: 20, padding: 8 },
+  dense: { lineHeight: 16, padding: 6 }
+};
+var rowsToPx = (rows, scale) => rows * scale.lineHeight + scale.padding * 2 + 2;
+var MAX_VIEWPORT_SHARE = 0.5;
+var DEFAULT_MIN_ROWS = 3;
+var DEFAULT_MAX_ROWS = 9;
 var TextareaRenderer = ({
   data,
   handleChange,
@@ -3317,28 +3808,49 @@ var TextareaRenderer = ({
   uischema,
   visible,
   enabled,
-  required
+  required,
+  config
 }) => {
   const textareaRef = useRef(null);
+  const textareaOptions = schema["ui:textarea"] ?? {};
+  const formConfig = config ?? {};
+  const scaleName = scaleFor(formConfig.surface ?? "form");
+  const scale = SCALE[scaleName];
+  const minRows = textareaOptions.minRows ?? formConfig.minRows ?? DEFAULT_MIN_ROWS;
+  const maxRows = Math.max(
+    minRows,
+    textareaOptions.maxRows ?? formConfig.maxRows ?? DEFAULT_MAX_ROWS
+  );
+  const minHeight = rowsToPx(minRows, scale);
+  const maxHeight = rowsToPx(maxRows, scale);
+  const [viewportCap, setViewportCap] = useState(
+    () => typeof window === "undefined" ? Number.POSITIVE_INFINITY : Math.round(window.innerHeight * MAX_VIEWPORT_SHARE)
+  );
+  const ceiling = Math.max(minHeight, Math.min(maxHeight, viewportCap));
   const autoResize = useCallback(() => {
-    if (textareaRef.current) {
-      textareaRef.current.style.height = "auto";
-      textareaRef.current.style.height = `${Math.min(
-        Math.max(textareaRef.current.scrollHeight, 80),
-        // Minimum height of 80px
-        240
-        // Maximum height of 240px
-      )}px`;
-    }
-  }, []);
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(
+      Math.max(el.scrollHeight, minHeight),
+      ceiling
+    )}px`;
+  }, [minHeight, ceiling]);
   useEffect(() => {
     autoResize();
   }, [data, autoResize]);
+  useEffect(() => {
+    const onResize = () => {
+      setViewportCap(Math.round(window.innerHeight * MAX_VIEWPORT_SHARE));
+      autoResize();
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [autoResize]);
   const handleInputChange = useCallback(
     (event) => {
-      const newValue = event.target.value;
-      handleChange(path2, newValue);
-      setTimeout(autoResize, 0);
+      handleChange(path2, event.target.value);
+      autoResize();
     },
     [handleChange, path2, autoResize]
   );
@@ -3348,89 +3860,34 @@ var TextareaRenderer = ({
   const readOnly = uischema?.access === "Read";
   const isDisabled = !enabled || readOnly;
   const hasError = errors && errors.length > 0;
-  const textareaOptions = schema["ui:textarea"] ?? {};
   const placeholder = textareaOptions.placeholder || schema?.description || `Enter ${label?.toLowerCase() || "text"}...`;
-  const minRows = textareaOptions.minRows || 3;
   return /* @__PURE__ */ jsxs("div", { className: "ss-jsonforms-field ss-jsonforms-textarea", children: [
-    label && /* @__PURE__ */ jsxs(
-      "label",
-      {
-        style: {
-          display: "block",
-          color: hasError ? "#ef4444" : "#475569",
-          fontSize: "0.875rem",
-          fontWeight: 500,
-          marginBottom: "0.375rem"
-        },
-        children: [
-          label,
-          required && /* @__PURE__ */ jsx("span", { style: { color: "#ef4444", marginLeft: "0.25rem" }, children: "*" })
-        ]
-      }
-    ),
-    description && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          color: "#6b7280",
-          fontSize: "0.75rem",
-          marginBottom: "0.5rem"
-        },
-        children: description
-      }
-    ),
+    label && /* @__PURE__ */ jsxs("label", { htmlFor: path2, className: fieldLabelClass(scaleName), children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-destructive", children: "*" })
+    ] }),
+    description && /* @__PURE__ */ jsx("div", { className: fieldHintClass, children: description }),
     /* @__PURE__ */ jsx(
       "textarea",
       {
+        id: path2,
         ref: textareaRef,
         value: data || "",
         onChange: handleInputChange,
         placeholder,
         disabled: isDisabled,
         rows: minRows,
+        className: `resize-y ${fieldControlClass(scaleName, !!hasError)}`,
         style: {
-          width: "100%",
-          minHeight: "80px",
-          maxHeight: "240px",
-          resize: "vertical",
-          padding: "0.75rem",
-          border: hasError ? "2px solid #ef4444" : "1px solid #d1d5db",
-          borderRadius: "6px",
-          fontSize: "16px",
-          lineHeight: "1.5",
-          fontFamily: "inherit",
-          backgroundColor: isDisabled ? "#f9fafb" : "#ffffff",
-          color: isDisabled ? "#9ca3af" : "#111827",
-          outline: "none",
-          transition: "border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out",
-          boxShadow: hasError ? "0 0 0 1px #ef4444" : "none",
+          minHeight: `${minHeight}px`,
+          maxHeight: `${ceiling}px`,
+          // iOS zooms a focused control under 16px; the design's fields are
+          // 14px, so opt out of the adjustment rather than the design.
           WebkitTextSizeAdjust: "100%"
-        },
-        onFocus: (e) => {
-          if (!hasError) {
-            e.target.style.borderColor = "#6366f1";
-            e.target.style.boxShadow = "0 0 0 1px #6366f1";
-          }
-        },
-        onBlur: (e) => {
-          if (!hasError) {
-            e.target.style.borderColor = "#d1d5db";
-            e.target.style.boxShadow = "none";
-          }
         }
       }
     ),
-    hasError && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          color: "#ef4444",
-          fontSize: "0.75rem",
-          marginTop: "0.25rem"
-        },
-        children: errors
-      }
-    )
+    hasError && /* @__PURE__ */ jsx("div", { className: fieldErrorClass, children: errors })
   ] });
 };
 var textareaRendererTester = rankWith(
@@ -3482,10 +3939,25 @@ var renderers = [
 ];
 
 // src/chat-variables/VariablesForm.vm.ts
+var MAX_INLINE_VARIABLES = 3;
+var isModelSelector = (schema) => schema.title === "ModelId" || schema["x-model-selector"] === true;
+function rowLayout(controls) {
+  const innerRow = {
+    type: "HorizontalLayout",
+    elements: controls,
+    options: { gap: "12px", alignItems: "flex-start" }
+  };
+  const ui = {
+    type: "VerticalLayout",
+    elements: [innerRow]
+  };
+  return ui;
+}
 function buildSimpleSchemaAndUi(vars, threadVars, useDefaults) {
   const names = Object.keys(vars || {});
   const properties2 = {};
   const controls = [];
+  const inlineOnly = [];
   const initialData = {};
   const $defs = {};
   for (const name of names) {
@@ -3505,19 +3977,24 @@ function buildSimpleSchemaAndUi(vars, threadVars, useDefaults) {
       control.enabled = false;
     }
     controls.push(control);
+    if (isModelSelector(properties2[name])) inlineOnly.push(control);
   }
   const schema = { type: "object", properties: properties2 };
   if (Object.keys($defs).length > 0) schema.$defs = $defs;
-  const innerRow = {
-    type: "HorizontalLayout",
-    elements: controls,
-    options: { gap: "12px", alignItems: "flex-start" }
-  };
-  const ui = {
-    type: "VerticalLayout",
-    elements: [innerRow]
+  if (controls.length <= MAX_INLINE_VARIABLES) {
+    return {
+      schema,
+      inlineControls: controls,
+      overflowControls: [],
+      initialData
+    };
+  }
+  return {
+    schema,
+    inlineControls: inlineOnly,
+    overflowControls: controls.filter((c) => !inlineOnly.includes(c)),
+    initialData
   };
-  return { schema, uiSchema: ui, initialData };
 }
 function useChatVariablesFormVm({
   workspace,
@@ -3532,26 +4009,26 @@ function useChatVariablesFormVm({
   const { mutate: updateVariableMutation } = useUpdateFlowRunVariable();
   const querySettled = !isLoading && (threadVars !== void 0 || isError);
   const shouldUseDefaults = isError || threadVars && Object.keys(threadVars).length === 0;
-  const built = React8.useMemo(() => {
+  const built = React9.useMemo(() => {
     return buildSimpleSchemaAndUi(
       workspace.variables,
       threadVars,
       shouldUseDefaults ?? false
     );
   }, [workspace.variables, threadVars, shouldUseDefaults]);
-  const [data, setData] = React8.useState(null);
-  React8.useEffect(() => {
+  const [data, setData] = React9.useState(null);
+  React9.useEffect(() => {
     if (querySettled) {
       setData(built.initialData);
       setVariables(built.initialData);
     }
   }, [querySettled, built.initialData, setVariables]);
-  const ajv = React8.useMemo(() => createAjv({ useDefaults: false }), []);
-  const prevRef = React8.useRef(null);
-  React8.useEffect(() => {
+  const ajv = React9.useMemo(() => createAjv({ useDefaults: false }), []);
+  const prevRef = React9.useRef(null);
+  React9.useEffect(() => {
     prevRef.current = data;
   }, [data]);
-  const onChange = React8.useCallback(
+  const onChange = React9.useCallback(
     ({ data: next2 }) => {
       if (prevRef.current && !isDraftThreadId(threadId)) {
         const keys2 = Object.keys(workspace.variables || {});
@@ -3572,29 +4049,96 @@ function useChatVariablesFormVm({
     },
     [workspace.variables, setVariables, updateVariableMutation, threadId]
   );
-  const config = React8.useMemo(
+  const barConfig = React9.useMemo(
     () => ({
       restrict: true,
       trim: false,
       showUnfocusedDescription: true,
-      hideRequiredAsterisk: true
+      hideRequiredAsterisk: true,
+      surface: "bar",
+      minRows: 1,
+      maxRows: 6
     }),
     []
   );
+  const panelConfig = React9.useMemo(
+    () => ({ ...barConfig, surface: "panel" }),
+    [barConfig]
+  );
+  const inlineUiSchema = React9.useMemo(
+    () => built.inlineControls.length ? rowLayout(built.inlineControls) : null,
+    [built.inlineControls]
+  );
+  const overflowUiSchema = React9.useMemo(
+    () => built.overflowControls.length ? rowLayout(built.overflowControls) : null,
+    [built.overflowControls]
+  );
   return {
     schema: built.schema,
-    uiSchema: built.uiSchema,
+    inlineUiSchema,
+    overflowUiSchema,
+    overflowCount: built.overflowControls.length,
     data,
     renderers,
     cells,
     ajv,
     onChange,
-    config,
+    barConfig,
+    panelConfig,
     isLoading,
     isReady: querySettled,
     isHydrated: data !== null
   };
 }
+function VariablesOverflowPanel({ count, children: children2 }) {
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+  const { isOpen, close, toggle, renderPopover } = useAnchoredPopover({
+    trigger: triggerRef,
+    popover: panelRef,
+    width: POPOVER_WIDTH_PX,
+    maxHeight: POPOVER_MAX_HEIGHT_PX,
+    role: "dialog",
+    label: "Workspace variables"
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        onClick: toggle,
+        "aria-expanded": isOpen,
+        "aria-haspopup": "dialog",
+        "aria-label": `Variables (${count})`,
+        className: `flex h-8 shrink-0 items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${isOpen ? "border-primary/30 bg-primary/10 text-primary" : "border-border/70 bg-transparent text-muted-foreground hover:bg-secondary"}`,
+        children: [
+          /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-3.5 w-3.5 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { className: "inline max-sm:hidden", children: "Variables" }),
+          /* @__PURE__ */ jsx("span", { className: "rounded-full bg-secondary px-1.5 text-[10px] leading-4 tabular-nums", children: count })
+        ]
+      }
+    ),
+    renderPopover(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between border-b border-border px-3 py-2", children: [
+          /* @__PURE__ */ jsx("span", { className: popoverHeadingClass, children: "Variables" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: close,
+              "aria-label": "Close variables",
+              className: "inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
+              children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ss-variables-panel min-h-0 overflow-y-auto p-3", children: children2 })
+      ] })
+    )
+  ] });
+}
 var ChatVariablesForm = forwardRef(({ workspace, threadId, setVariables }, ref) => {
   const vm = useChatVariablesFormVm({ workspace, threadId, setVariables });
   useImperativeHandle(ref, () => ({
@@ -3610,20 +4154,85 @@ var ChatVariablesForm = forwardRef(({ workspace, threadId, setVariables }, ref)
   if (!vm.isHydrated) {
     return /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center w-full h-8", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-primary" }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: "w-full jsonforms-compact", children: /* @__PURE__ */ jsx(
-    JsonForms,
+  const formProps = {
+    schema: vm.schema,
+    data: vm.data,
+    renderers: vm.renderers,
+    cells: vm.cells,
+    ajv: vm.ajv,
+    onChange: vm.onChange
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 items-center gap-1", children: [
+    vm.inlineUiSchema && /* @__PURE__ */ jsx("div", { className: "min-w-0 jsonforms-compact", children: /* @__PURE__ */ jsx(
+      JsonForms,
+      {
+        ...formProps,
+        uischema: vm.inlineUiSchema,
+        config: vm.barConfig
+      }
+    ) }),
+    vm.overflowUiSchema && /* @__PURE__ */ jsx(VariablesOverflowPanel, { count: vm.overflowCount, children: /* @__PURE__ */ jsx("div", { className: "jsonforms-compact", children: /* @__PURE__ */ jsx(
+      JsonForms,
+      {
+        ...formProps,
+        uischema: vm.overflowUiSchema,
+        config: vm.panelConfig
+      }
+    ) }) })
+  ] });
+});
+var dictationErrorMessages = {
+  "permission-denied": "Microphone access is blocked \u2014 allow it in your browser settings and try again",
+  "no-microphone": "No microphone was found",
+  network: "Could not reach the speech service \u2014 try again",
+  "unavailable-temporarily": "Dictation is starting up \u2014 try again in a moment",
+  unavailable: "Dictation is not available on this workspace",
+  unknown: "Dictation stopped unexpectedly \u2014 try again"
+};
+function DictationButton({
+  state,
+  error,
+  disabled,
+  onToggle,
+  deviceLabel,
+  size = "sm"
+}) {
+  const listening = state === "listening";
+  const starting = state === "starting";
+  const label = listening ? "Stop dictation" : "Dictate a message";
+  const hint = listening && deviceLabel ? `${label} \u2014 ${deviceLabel}` : label;
+  const dims = size === "sm" ? "h-8 w-8" : "h-9 w-9";
+  const icon = size === "sm" ? "h-4 w-4" : "h-5 w-5";
+  return /* @__PURE__ */ jsxs(
+    IconButton2,
     {
-      schema: vm.schema,
-      uischema: vm.uiSchema,
-      data: vm.data,
-      renderers: vm.renderers,
-      cells: vm.cells,
-      ajv: vm.ajv,
-      onChange: vm.onChange,
-      config: vm.config
+      type: "button",
+      onClick: onToggle,
+      disabled,
+      "aria-pressed": listening,
+      "aria-label": label,
+      title: error ? dictationErrorMessages[error] : hint,
+      className: `relative ${dims} rounded-full transition-colors ${listening ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : "text-muted-foreground hover:bg-secondary"}`,
+      children: [
+        starting && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-0 animate-spin rounded-full border-2 border-transparent border-t-current opacity-70"
+          }
+        ),
+        listening && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-0 animate-ping rounded-full bg-destructive/30"
+          }
+        ),
+        listening ? /* @__PURE__ */ jsx(Square, { className: `relative ${icon} fill-current` }) : /* @__PURE__ */ jsx(Mic, { className: `relative ${icon}` })
+      ]
     }
-  ) });
-});
+  );
+}
 
 // src/domains/workspaces/queryKeys.ts
 var workspaceKeys = {
@@ -3856,6 +4465,40 @@ function MessageComposer(_props = {}) {
       cancelReset();
     }
   }, [isSending, cancelAccepted, cancelErrored, cancelReset]);
+  const attachEditor = useCallback(
+    (handle2) => {
+      if (handle2) editorRef.current = handle2;
+    },
+    // Both flags matter: the portal mounts on `isMobile && isFullscreen`, and
+    // nothing resets isFullscreen when the breakpoint flips, so crossing it
+    // while fullscreen would unmount the portal editor without re-attaching the
+    // inline one — leaving a destroyed handle and silently swallowing phrases.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isFullscreen, isMobile]
+  );
+  const { data: speechConfig, isFetching: speechConfigLoading } = useSpeechConfig();
+  const getSpeechToken = useMemo(
+    () => chatService.getSpeechToken?.bind(chatService),
+    [chatService]
+  );
+  const dictation = useDictation({
+    region: speechConfig?.enabled ? speechConfig.region : null,
+    locale: speechConfig?.defaultLocale ?? "en-US",
+    getToken: getSpeechToken,
+    // Final phrases become real text; provisional ones render as greyed ghost
+    // text at the caret and never enter the document.
+    onPhrase: (text6) => editorRef.current?.insertText(`${text6} `),
+    onInterim: (text6) => editorRef.current?.setDictationGhost(text6)
+  });
+  const { stop: stopDictation } = dictation;
+  const dictationUnavailableReason = speechConfigLoading ? "Checking whether dictation is available" : dictation.supported ? "Dictation is not enabled for this workspace" : "Dictation is not available in this browser";
+  const handleDictationToggle = () => {
+    if (dictation.state === "idle") editorRef.current?.focus();
+    dictation.toggle();
+  };
+  useEffect(() => {
+    if (disabled) stopDictation();
+  }, [disabled, stopDictation]);
   useEffect(() => {
     if (typeof window === "undefined") return;
     window.__ssDownloadFile = (id) => getFileBlobUrl(id);
@@ -3975,6 +4618,7 @@ function MessageComposer(_props = {}) {
     const latestText = editorRef.current?.getMarkdown() ?? newMessage;
     const sent = handleSendMessage(latestText, uploadedAttachments);
     if (!sent) return;
+    stopDictation();
     handleClearAttachments();
     setEditorKey((k) => k + 1);
   };
@@ -4081,7 +4725,7 @@ function MessageComposer(_props = {}) {
           /* @__PURE__ */ jsx("div", { className: "max-h-[400px] w-full overflow-y-auto", children: /* @__PURE__ */ jsx(
             MarkdownEditor,
             {
-              ref: editorRef,
+              ref: attachEditor,
               value: newMessage,
               onChange: (md) => setNewMessage(md),
               onKeyDown: handleComposerKeyDown,
@@ -4094,14 +4738,22 @@ function MessageComposer(_props = {}) {
               disabled,
               placeholder: "What would you like to do?",
               className: "md-editor--bare px-5 pb-3 pt-4 text-sm",
-              minHeight: 48
+              minHeight: 24
             },
             `composer-md-${editorKey}`
           ) }),
+          /* @__PURE__ */ jsx("div", { role: "status", className: "sr-only", children: dictation.state === "listening" ? dictation.silent ? `Listening, but not hearing anything from ${dictation.deviceLabel || "your microphone"}` : "Listening" : dictation.state === "starting" ? "Starting dictation" : "" }),
+          dictation.state === "listening" && dictation.silent && /* @__PURE__ */ jsxs("div", { className: "px-5 pb-1 text-xs text-muted-foreground", children: [
+            "Not hearing anything from",
+            " ",
+            dictation.deviceLabel || "your microphone",
+            "."
+          ] }),
+          dictation.error && /* @__PURE__ */ jsx("div", { role: "alert", className: "px-5 pb-1 text-xs text-destructive", children: dictationErrorMessages[dictation.error] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 pb-3", children: [
             /* @__PURE__ */ jsxs("div", { className: "ss-composer__actions flex min-w-0 flex-1 items-center gap-1", children: [
               supportsFiles && /* @__PURE__ */ jsx(
-                IconButton,
+                IconButton2,
                 {
                   type: "button",
                   onClick: handlePickFilesClick,
@@ -4122,19 +4774,39 @@ function MessageComposer(_props = {}) {
               )
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx(
-                IconButton,
+              dictation.available ? /* @__PURE__ */ jsx(
+                DictationButton,
                 {
-                  type: "button",
-                  disabled: true,
-                  "aria-label": "Dictate a message",
-                  title: "Dictation is not available yet",
-                  className: "h-8 w-8 cursor-not-allowed rounded-full text-muted-foreground",
-                  children: /* @__PURE__ */ jsx(Mic, { className: "h-4 w-4" })
+                  state: dictation.state,
+                  error: dictation.error,
+                  disabled,
+                  onToggle: handleDictationToggle,
+                  deviceLabel: dictation.deviceLabel
                 }
+              ) : (
+                // A disabled button receives no pointer events, so its own
+                // `title` never renders a tooltip. The wrapper is what the user
+                // actually hovers.
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    title: dictationUnavailableReason,
+                    className: "inline-flex cursor-not-allowed",
+                    children: /* @__PURE__ */ jsx(
+                      IconButton2,
+                      {
+                        type: "button",
+                        disabled: true,
+                        "aria-label": `Dictate a message. ${dictationUnavailableReason}`,
+                        className: "h-8 w-8 rounded-full text-muted-foreground",
+                        children: /* @__PURE__ */ jsx(Mic, { className: "h-4 w-4" })
+                      }
+                    )
+                  }
+                )
               ),
               canStop ? /* @__PURE__ */ jsx(
-                IconButton,
+                IconButton2,
                 {
                   onClick: handleStopRun,
                   className: "chat-send h-8 w-8 rounded-full",
@@ -4148,7 +4820,7 @@ function MessageComposer(_props = {}) {
                   )
                 }
               ) : /* @__PURE__ */ jsx(
-                IconButton,
+                IconButton2,
                 {
                   onClick: handleSendMessageAndClear,
                   className: `chat-send h-8 w-8 rounded-full ${sendDisabled ? "cursor-not-allowed" : ""}`,
@@ -4177,7 +4849,7 @@ function MessageComposer(_props = {}) {
                 },
                 children: /* @__PURE__ */ jsxs("div", { className: "relative h-full w-full bg-background border shadow-lg", children: [
                   /* @__PURE__ */ jsx(
-                    IconButton,
+                    IconButton2,
                     {
                       type: "button",
                       size: "small",
@@ -4195,7 +4867,7 @@ function MessageComposer(_props = {}) {
                     /* @__PURE__ */ jsx("div", { className: "flex-1 p-4", children: /* @__PURE__ */ jsx(
                       MarkdownEditor,
                       {
-                        ref: editorRef,
+                        ref: attachEditor,
                         value: newMessage,
                         onChange: (md) => setNewMessage(md),
                         onKeyDown: handleComposerKeyDown,
@@ -4210,10 +4882,18 @@ function MessageComposer(_props = {}) {
                       },
                       `composer-md-${editorKey}`
                     ) }),
+                    dictation.error && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        "aria-hidden": "true",
+                        className: "px-4 pb-1 text-xs text-destructive",
+                        children: dictationErrorMessages[dictation.error]
+                      }
+                    ),
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-t bg-background", children: [
                       /* @__PURE__ */ jsx("div", { className: "flex-1" }),
                       supportsFiles && /* @__PURE__ */ jsx(
-                        IconButton,
+                        IconButton2,
                         {
                           type: "button",
                           onClick: handlePickFilesClick,
@@ -4228,8 +4908,19 @@ function MessageComposer(_props = {}) {
                           )
                         }
                       ),
+                      dictation.available && /* @__PURE__ */ jsx(
+                        DictationButton,
+                        {
+                          size: "md",
+                          state: dictation.state,
+                          error: dictation.error,
+                          disabled,
+                          onToggle: handleDictationToggle,
+                          deviceLabel: dictation.deviceLabel
+                        }
+                      ),
                       canStop ? /* @__PURE__ */ jsx(
-                        IconButton,
+                        IconButton2,
                         {
                           onClick: handleStopRun,
                           className: "chat-send h-9 w-9 rounded-full",
@@ -4243,7 +4934,7 @@ function MessageComposer(_props = {}) {
                           )
                         }
                       ) : /* @__PURE__ */ jsx(
-                        IconButton,
+                        IconButton2,
                         {
                           onClick: handleSendMessageAndClear,
                           className: `chat-send h-9 w-9 rounded-full ${sendDisabled ? "cursor-not-allowed" : ""}`,
@@ -19173,7 +19864,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React8.forwardRef(
+var Button = React9.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -19724,6 +20415,7 @@ function ChatMessageSources({
     ] })
   ] });
 }
+var USER_FORM_CONFIG = { surface: "form", minRows: 6, maxRows: 20 };
 var REVEAL_ON_HOVER = "opacity-100 focus-visible:opacity-100 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover:opacity-100";
 var MessageBubble = (props) => {
   const {
@@ -19777,7 +20469,7 @@ var MessageBubble = (props) => {
         );
       })
     ] }),
-    showForm && /* @__PURE__ */ jsxs("div", { className: "mt-4 border-t border-border pt-4", children: [
+    showForm && /* @__PURE__ */ jsxs("div", { className: "ss-chat-message__user-form mt-4 border-t border-border pt-4", children: [
       /* @__PURE__ */ jsx(
         JsonForms,
         {
@@ -19786,6 +20478,7 @@ var MessageBubble = (props) => {
           renderers,
           cells,
           readonly: userInput !== void 0,
+          config: USER_FORM_CONFIG,
           onChange: ({ data, errors }) => {
             setResponseFormData(data);
             setResponseFormValid(!errors?.length);
@@ -19930,14 +20623,14 @@ var MessageItem = ({
   const { data: workspace } = useWorkspace(workspaceId);
   const chatbotName = getChatbotName(workspace?.name);
   const { addInputToMessageMutation } = useAddInputToMessage();
-  const onSubmitUserForm = (messageId) => (name, value) => {
+  const onSubmitUserForm = (messageId, channels = {}) => (name, value) => {
     if (!threadId || !messageId) return;
     addInputToMessageMutation.mutate({
       threadId,
       messageId,
       name,
       value,
-      channels: {}
+      channels
     });
   };
   const safeTime = (d) => {
@@ -20068,7 +20761,7 @@ var MessageItem = ({
                 userOutput: v.value && typeof v.value === "object" ? v.value : null,
                 chatbotName,
                 userInput: userInput?.value,
-                onSubmitUserForm: onSubmitUserForm(message.id ?? "")
+                onSubmitUserForm: onSubmitUserForm(message.id ?? "", v.channels)
               },
               `user-${message.id ?? "msg"}-${keyCounter++}`
             )
@@ -20264,6 +20957,7 @@ function MessageList({
     ] }) });
   }
   if (safeMessages.length === 0 && !hadMessagesBefore) {
+    const descriptionParagraphs = (activeWorkspace?.summary ?? "").split(/\n+/).map((paragraph2) => paragraph2.trim()).filter(Boolean);
     return (
       // A new thread opens the way the design does: the greeting and the
       // composer travel together as one narrower block centred in the canvas.
@@ -20276,6 +20970,14 @@ function MessageList({
           "data-ss-layer": "message-list",
           children: /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-6 w-full max-w-2xl px-4 text-center", children: [
             /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-foreground", children: "What\u2019s on the agenda today?" }),
+            descriptionParagraphs.length > 0 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "mx-auto mt-2 max-w-lg space-y-1.5 text-sm text-muted-foreground",
+                "data-ss-layer": "workspace-description",
+                children: descriptionParagraphs.map((paragraph2, index) => /* @__PURE__ */ jsx("p", { children: paragraph2 }, index))
+              }
+            ),
             activeWorkspace?.firstPrompt && /* @__PURE__ */ jsx("div", { className: "chat-prose mt-3 text-center", children: /* @__PURE__ */ jsx(MessageMarkdown, { value: activeWorkspace.firstPrompt }) })
           ] })
         }
@@ -20567,6 +21269,6 @@ function getUserPhotoUrl(userId) {
   return `${base2}/users/${userId}/photo`;
 }
 
-export { ChatProvider, ChatVariablesForm, DRAFT_THREAD_PREFIX, DateFromApi, MarkdownEditor, MessageComposer, MessageList, MessageListSkeleton, MessageMarkdown, MessageValueType, NEW_THREAD_ID, THREAD_LIST_PAGE_SIZE, applyDeltaToMessage, applyThreadToCache, createDraftThreadId, createThreadId, downloadFileBlobOptions, filesKeys, flowRunsKeys, getMessageErrorText, getModelIcon, getRetryStatusText, getThreadPlaceholderFromListCache, getUserPhotoUrl, invalidateWorkspaceThreadLists, isDraftThreadId, mapFileInfoDtoToModel, mapMentionUserDtoToModel, mapMessageDtoToModel, mapMessageErrorDtoToModel, mapMessageValueDtoToModel, mapMessagesDtoToModels, mapSignalRThreadSummaryToModel, mapThreadDtoToModel, mapThreadsResponseDtoToModel, mapWorkspaceDtoToModel, mapWorkspacesDtoToModels, markDraftThreadId, messagesKeys, messagesListOptions, messagesMutationsKeys, modelsKeys, parseDateTime, parseDateTimeHuman, parseRetryStatus, randomUUID, setThreadOptimisticRunning, setThreadRunningInLists, taggableUsersOptions, threadDetailOptions, threadsKeys, unmarkDraftThreadId, useAddInputToMessage, useChatContext, useChatIdentity, useChatService, useDownloadFileBlobQuery, useFileMutations, useFlowRunVariables, useIsDraftThreadId, useMessages, useModels, useSendMessage, useTaggableWorkspaceUsers, useThread, useThreadIsRunning, useUpdateFlowRunVariable, useWorkspace, utcDate, workspaceDetailOptions, workspaceKeys };
+export { ChatProvider, ChatVariablesForm, DRAFT_THREAD_PREFIX, DateFromApi, DictationButton, MarkdownEditor, MessageComposer, MessageList, MessageListSkeleton, MessageMarkdown, MessageValueType, NEW_THREAD_ID, THREAD_LIST_PAGE_SIZE, applyDeltaToMessage, applyThreadToCache, createDraftThreadId, createThreadId, downloadFileBlobOptions, filesKeys, flowRunsKeys, getMessageErrorText, getModelIcon, getRetryStatusText, getThreadPlaceholderFromListCache, getUserPhotoUrl, invalidateWorkspaceThreadLists, isDraftThreadId, mapFileInfoDtoToModel, mapMentionUserDtoToModel, mapMessageDtoToModel, mapMessageErrorDtoToModel, mapMessageValueDtoToModel, mapMessagesDtoToModels, mapSignalRThreadSummaryToModel, mapThreadDtoToModel, mapThreadsResponseDtoToModel, mapWorkspaceDtoToModel, mapWorkspacesDtoToModels, markDraftThreadId, messagesKeys, messagesListOptions, messagesMutationsKeys, modelsKeys, parseDateTime, parseDateTimeHuman, parseRetryStatus, randomUUID, setThreadOptimisticRunning, setThreadRunningInLists, speechKeys, taggableUsersOptions, threadDetailOptions, threadsKeys, unmarkDraftThreadId, useAddInputToMessage, useChatContext, useChatIdentity, useChatService, useDictation, useDownloadFileBlobQuery, useFileMutations, useFlowRunVariables, useIsDraftThreadId, useMessages, useModels, useSendMessage, useSpeechConfig, useTaggableWorkspaceUsers, useThread, useThreadIsRunning, useUpdateFlowRunVariable, useWorkspace, utcDate, workspaceDetailOptions, workspaceKeys };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map