@tangle-network/sandbox-ui 0.106.0 → 0.108.0

package/dist/chat.d.ts

@@ -57,292 +57,6 @@ declare const DEFAULT_REASONING_LEVEL_OPTIONS: ReadonlyArray<ReasoningLevelOptio
 declare const HARNESS_REASONING_OPTIONS: Partial<Record<HarnessType, ReadonlyArray<ReasoningLevelOption>>>;
 declare function ReasoningLevelPicker({ value, onChange, disabled, className, triggerClassName, options, available, side, avoidCollisions, }: ReasoningLevelPickerProps): React.JSX.Element;
 
-/**
- * Limits applied when staging files onto a composer.
- *
- * @deprecated Composer-only helper of the legacy AgentComposer. agent-app
- * (≥0.46) splits this job: accept filtering lives in `filterAcceptedFiles`
- * from `@tangle-network/agent-app/web-react`, and size/count limits belong to
- * the staging queue (`useComposerAttachments`). AgentComposer is frozen and
- * will be removed at sandbox-ui's next breaking release.
- */
-interface ComposerFileValidationConfig {
-    /** Reject any single file larger than this. */
-    maxSizeBytes?: number;
-    /** Reject files once the staged count would exceed this. */
-    maxCount?: number;
-    /** Files already staged, counted against `maxCount` before this batch. */
-    currentCount?: number;
-    /**
-     * Comma-separated accept list, same grammar as the native `<input accept>`
-     * attribute: file extensions (`.png`), exact MIME types (`image/png`), and
-     * MIME wildcards (`image/*`).
-     */
-    accept?: string;
-}
-/** A file that failed validation, paired with a human-readable reason.
- *
- * @deprecated Composer-only helper of the legacy AgentComposer. Import
- * `ComposerFileRejection` from `@tangle-network/agent-app/web-react`
- * (agent-app ≥0.46) — the same shape, reported by `ChatComposer`'s
- * `onRejectFiles`. AgentComposer is frozen and will be removed at sandbox-ui's
- * next breaking release. */
-interface ComposerFileRejection {
-    file: File;
-    reason: string;
-}
-/**
- * Checks a single file against a comma-separated `accept` list using the same
- * grammar as the native `<input accept>` attribute. An undefined or empty
- * `accept` accepts everything.
- *
- * @deprecated Composer-only helper of the legacy AgentComposer. Use
- * `isAcceptedFileType` from `@tangle-network/agent-app/web-react`
- * (agent-app ≥0.46) — the same `accept` grammar. AgentComposer is frozen and
- * will be removed at sandbox-ui's next breaking release.
- */
-declare function isAcceptedType(file: File, accept?: string): boolean;
-/**
- * Splits a batch of files into what's safe to stage and what's rejected,
- * checking accept type, then size, then the running count against
- * `currentCount` + `maxCount`. Each rejection carries a reason naming the
- * file and the limit it broke. Pure data in, pure data out — no throwing,
- * no console noise, so callers decide how to surface rejections.
- *
- * @deprecated Composer-only helper of the legacy AgentComposer. Use
- * `filterAcceptedFiles` from `@tangle-network/agent-app/web-react`
- * (agent-app ≥0.46) for accept filtering; size and count limits belong to the
- * staging queue (`useComposerAttachments`). AgentComposer is frozen and will
- * be removed at sandbox-ui's next breaking release.
- */
-declare function validateComposerFiles(files: File[] | FileList, config: ComposerFileValidationConfig): {
-    accepted: File[];
-    rejected: ComposerFileRejection[];
-};
-
-/** A selectable item in the `@`-mention popover. Generic — file semantics live
- * in the consuming app, not here.
- *
- * @deprecated Part of the legacy AgentComposer API. Import `MentionItem` from
- * `@tangle-network/agent-app/web-react` (agent-app ≥0.46) — the same contract,
- * now owned by the package that defines it. AgentComposer is frozen and will
- * be removed at sandbox-ui's next breaking release. */
-interface MentionItem {
-    id: string;
-    label: string;
-    detail?: string;
-    kind?: string;
-}
-/**
- * Opt-in `@`-mention support. Present ⇒ the composer swaps its textarea for a
- * TipTap rich input that renders mentions as atomic pills; absent ⇒ exactly
- * today's plain-textarea behavior. Data-agnostic: the app supplies items.
- *
- * @deprecated Part of the legacy AgentComposer API. `ComposerMentionProp` in
- * `@tangle-network/agent-app/web-react` (agent-app ≥0.46) is the same contract
- * on `ChatComposer`'s `mention` prop. AgentComposer is frozen and will be
- * removed at sandbox-ui's next breaking release.
- */
-interface AgentComposerMention {
-    /** The character that opens the popover. Default "@". */
-    trigger?: string;
-    /** Async provider called with the query typed after the trigger. */
-    fetchItems: (query: string) => Promise<MentionItem[]>;
-    /** Fired with the mentions currently in the document whenever they change. */
-    onMentionsChange?: (mentions: MentionItem[]) => void;
-    /** Custom row renderer for a popover item. */
-    renderItem?: (item: MentionItem) => React.ReactNode;
-    /** Shown when a fetch resolves to zero items. Default "No matches". */
-    emptyText?: string;
-    /**
-     * Extra classes merged onto the suggestion popover's root element
-     * (`role="listbox"`), applied last so they win over the component's own —
-     * the supported way to retheme the popover instead of targeting it by its
-     * ARIA attributes.
-     */
-    popoverClassName?: string;
-}
-/** A staged attachment shown as a chip above the input.
- *
- * @deprecated Part of the legacy AgentComposer API. Import `ComposerFile` from
- * `@tangle-network/agent-app/web-react` (agent-app ≥0.46) — the same shape,
- * consumed by `ChatComposer`'s `pendingFiles`. AgentComposer is frozen and
- * will be removed at sandbox-ui's next breaking release. */
-interface ComposerFile {
-    id: string;
-    name: string;
-    size?: number;
-    kind: "file" | "folder";
-    /** File count for a folder chip. */
-    fileCount?: number;
-    status: "pending" | "uploading" | "ready" | "error";
-    /**
-     * Object URL for an image thumbnail. The app owns creation and revocation
-     * (e.g. `URL.createObjectURL` on stage, `URL.revokeObjectURL` on remove) —
-     * the composer only ever reads it.
-     */
-    previewUrl?: string;
-    /** Shown on the chip when `status === "error"`. */
-    errorMessage?: string;
-}
-/** Context the agent will see alongside the next message.
- *
- * @deprecated Part of the legacy AgentComposer API. Import
- * `ComposerContextItem` from `@tangle-network/agent-app/web-react`
- * (agent-app ≥0.46) — the same shape, consumed by `ChatComposer`'s
- * `contextItems`. AgentComposer is frozen and will be removed at sandbox-ui's
- * next breaking release. */
-interface ComposerContextItem {
-    id: string;
-    label: string;
-    icon?: React.ReactNode;
-    /** Omit to render a non-removable chip. */
-    onRemove?: () => void;
-}
-/**
- * Props of the legacy {@link AgentComposer}.
- *
- * @deprecated Part of the legacy AgentComposer API. `ChatComposerProps` in
- * `@tangle-network/agent-app/web-react` (agent-app ≥0.46) covers every prop
- * here — see {@link AgentComposer} for the four renames. AgentComposer is
- * frozen and will be removed at sandbox-ui's next breaking release.
- */
-interface AgentComposerProps {
-    /** Composer text (controlled). */
-    value: string;
-    onChange: (value: string) => void;
-    /** Fired on Enter (without Shift) or the send button. */
-    onSubmit: () => void;
-    placeholder?: string;
-    /** Disables typing and sending — e.g. while restoring. */
-    disabled?: boolean;
-    /**
-     * A turn is in flight. Spins the send button; paired with `onCancel` it
-     * becomes a Stop button instead, so the user can interrupt the stream.
-     */
-    busy?: boolean;
-    /** Stop the in-flight turn. With `busy`, replaces send with a Stop button. */
-    onCancel?: () => void;
-    /**
-     * The composer's control strip (profile · harness · model · effort pickers,
-     * token meters, …), rendered in the bottom row. Required — the legacy
-     * built-in strip was removed with the legacy pickers: pass
-     * `AgentSessionControls` from `@tangle-network/agent-app/web-react` (or your
-     * own composition), or `null` for a bare composer.
-     */
-    controls: React.ReactNode;
-    /** Extra content left of the send button (token meter, cost, status). */
-    trailing?: React.ReactNode;
-    /** Context the agent will see alongside the next message. */
-    contextItems?: ReadonlyArray<ComposerContextItem>;
-    /**
-     * Attachments are opt-in: pass `onAttach` to show the attach button, accept
-     * drag-and-drop onto the composer, and render `attachments` as chips.
-     */
-    onAttach?: (files: FileList) => void;
-    /** Show a folder-attach button; falls back to `onAttach` if unset. */
-    onAttachFolder?: (files: FileList) => void;
-    attachments?: ReadonlyArray<ComposerFile>;
-    onRemoveFile?: (id: string) => void;
-    /** When set, chips with `status === "error"` render a retry button. */
-    onRetryFile?: (id: string) => void;
-    /**
-     * File types the composer takes, in the native `<input accept>` grammar.
-     * Enforced on every ingress path — the picker dialog, drag-and-drop, and
-     * clipboard paste — so a type the picker won't offer can't arrive by another
-     * route. Non-matching files go to `onRejectFiles` and never reach
-     * `onAttach`. Folder attach is exempt (directory selection has no native
-     * accept semantics); size/count limits are the app's job in `onAttach`.
-     */
-    accept?: string;
-    /**
-     * Called with the files `accept` filtered out of a drop/paste/pick, each
-     * with a human-readable reason. Without it rejection is silent — the same
-     * feedback the native picker gives for a type it won't offer.
-     */
-    onRejectFiles?: (rejections: ComposerFileRejection[]) => void;
-    dropTitle?: string;
-    dropDescription?: string;
-    /**
-     * `canSend` ignores `busy` so Enter/onSubmit keep firing while a turn is
-     * streaming. For composers that queue the next turn instead of blocking on
-     * the current one — the Stop-button rendering rule (`busy && onCancel`) is
-     * unaffected, so the button still flips to Stop while this is set. Default
-     * false.
-     */
-    canSubmitWhileBusy?: boolean;
-    /**
-     * Allow submitting with empty text when at least one attachment is staged
-     * (an image-only message). Counts attachments of ANY status — a gate on
-     * `ready` would make Enter silently dead while an upload is in flight,
-     * with no way for the app to explain why. The app's onSubmit owns the send
-     * policy (block, queue, or toast on pending/errored files) and what the
-     * message body becomes. Default false.
-     */
-    canSubmitAttachmentsOnly?: boolean;
-    /**
-     * Opt-in `@`-mentions. When set, the textarea is replaced by a rich input
-     * that renders mentions as atomic pills and serializes them to `@<id>` in
-     * `value`. Omit for exactly today's plain-textarea behavior.
-     */
-    mention?: AgentComposerMention;
-    /** Cmd/Ctrl+L focuses the input and shows a hint. Default false. */
-    focusShortcut?: boolean;
-    /** Minimum textarea rows before it grows. Default 2. */
-    minRows?: number;
-    /** Max pixel height before the textarea scrolls. Default 200. */
-    maxHeight?: number;
-    className?: string;
-    sendLabel?: string;
-    autoFocus?: boolean;
-}
-/**
- * @deprecated Use `ChatComposer` from `@tangle-network/agent-app/web-react` —
- * since agent-app 0.46 it is a strict superset of this component. Everything
- * that once lived only here now lives there: `mention` (the same
- * `ComposerMentionProp` contract), `contextItems`, the full attachment
- * lifecycle (`pendingFiles` with `previewUrl` thumbnails, `onRejectFiles`,
- * `onRetryFile`, clipboard paste with `pasted-image-<n>.<ext>` naming),
- * `autoFocus`, `canSubmitAttachmentsOnly`, `canSubmitWhileBusy`, `trailing`,
- * `maxHeight`, and `minRows`. Migration is four prop renames — `onChange` →
- * `onValueChange`, `onSubmit()` → `onSend(message)`, `busy` → `isStreaming`,
- * `attachments` → `pendingFiles`; every other prop carries across unchanged.
- * Add `sendVariant="icon"` and `focusShortcut={false}` where a surface wants
- * this component's exact chrome. AgentComposer is frozen and will be removed
- * at sandbox-ui's next breaking release.
- *
- * The input itself: one rounded surface holding an auto-growing
- * textarea and a bottom row that runs left → right — attach buttons, the
- * control strip (supplied via the required `controls` prop), trailing slot,
- * and the send button on the far right. The strip is explicit: the canonical
- * pickers are `ModelPicker` / `EffortPicker` / `AgentSessionControls` from
- * `@tangle-network/agent-app/web-react` — this component only owns the slot.
- *
- * Opt-in extras cover what apps otherwise hand-roll:
- * file/folder attachments with drag-and-drop + chips + clipboard paste
- * (`onAttach` also gates pasting files onto the textarea, auto-naming
- * generic clipboard image blobs `pasted-image-<n>.<ext>`), a streaming Stop
- * button (`busy` + `onCancel`), and a Cmd/Ctrl+L focus shortcut.
- */
-declare function AgentComposer({ value, onChange, onSubmit, placeholder, disabled, busy, onCancel, controls, trailing, contextItems, onAttach, onAttachFolder, attachments, onRemoveFile, onRetryFile, accept, onRejectFiles, dropTitle, dropDescription, canSubmitWhileBusy, canSubmitAttachmentsOnly, mention, focusShortcut, minRows, maxHeight, className, sendLabel, autoFocus, }: AgentComposerProps): React.JSX.Element;
-
-/**
- * Visual contract for a rendered mention pill. The TipTap editor extension in
- * `mention-editor.tsx` styles its inline atom node with this, and any other
- * surface that renders a resolved mention (e.g. a sent-message transcript)
- * should use the same constant so the two stay one visual contract instead of
- * silently drifting apart. Kept in its own module (no TipTap import) so
- * importing it never pulls the lazily-loaded editor chunk into a consumer's
- * bundle.
- *
- * @deprecated Mention-pill contract of the legacy AgentComposer mention
- * feature. Import `MENTION_PILL_CLASS` from
- * `@tangle-network/agent-app/web-react` (agent-app ≥0.46) — `ChatComposer`
- * owns the mention stack now. AgentComposer is frozen and will be removed at
- * sandbox-ui's next breaking release.
- */
-declare const MENTION_PILL_CLASS: string;
-
 /**
  * An agent profile: a named bundle of toolset + persona layered over the same
  * model and session. `builtin` profiles are the product's shipped modes (e.g.
@@ -513,4 +227,4 @@ declare function createFetchTransport(opts: {
     fetchImpl?: typeof fetch;
 }): ArtifactAgentDockTransport;
 
-export { AgentComposer, type AgentComposerMention, type AgentComposerProps, type AgentProfileCapability, type AgentProfileDraft, type AgentProfileOption, AgentProfilePicker, type AgentProfilePickerProps, ArtifactAgentDock, type ArtifactAgentDockProps, type ArtifactAgentDockTransport, type ArtifactDockMessage, type ArtifactDockStreamEvent, type ArtifactKind, type ArtifactScope, type ComposerContextItem, type ComposerFile, type ComposerFileRejection, type ComposerFileValidationConfig, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, MENTION_PILL_CLASS, type MentionItem, type ReasoningLevel, type ReasoningLevelOption, ReasoningLevelPicker, type ReasoningLevelPickerProps, createFetchTransport, isAcceptedType, validateComposerFiles };
+export { type AgentProfileCapability, type AgentProfileDraft, type AgentProfileOption, AgentProfilePicker, type AgentProfilePickerProps, ArtifactAgentDock, type ArtifactAgentDockProps, type ArtifactAgentDockTransport, type ArtifactDockMessage, type ArtifactDockStreamEvent, type ArtifactKind, type ArtifactScope, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, type ReasoningLevel, type ReasoningLevelOption, ReasoningLevelPicker, type ReasoningLevelPickerProps, createFetchTransport };

package/dist/chat.js

@@ -1,5 +1,4 @@
 import {
-  AgentComposer,
   AgentProfilePicker,
   AgentTimeline,
   ArtifactAgentDock,
@@ -12,19 +11,12 @@ import {
   ThinkingIndicator,
   UserMessage,
   createFetchTransport,
-  isAcceptedType,
   modelProvider,
-  snapHarnessToModel,
-  validateComposerFiles
-} from "./chunk-XIXYQNXD.js";
-import "./chunk-TK46XFLM.js";
-import {
-  MENTION_PILL_CLASS
-} from "./chunk-WGOOQAW3.js";
+  snapHarnessToModel
+} from "./chunk-EKYA6AFY.js";
 import "./chunk-EI44GEQ5.js";
 import "./chunk-CZ7CSFO4.js";
 export {
-  AgentComposer,
   AgentProfilePicker,
   AgentTimeline,
   ArtifactAgentDock,
@@ -32,14 +24,11 @@ export {
   ChatMessage,
   DEFAULT_REASONING_LEVEL_OPTIONS,
   HARNESS_REASONING_OPTIONS,
-  MENTION_PILL_CLASS,
   MessageList,
   ReasoningLevelPicker,
   ThinkingIndicator,
   UserMessage,
   createFetchTransport,
-  isAcceptedType,
   modelProvider,
-  snapHarnessToModel,
-  validateComposerFiles
+  snapHarnessToModel
 };

package/dist/{chunk-3GX5BSD4.js → chunk-72UF2H5H.js}

@@ -104,6 +104,33 @@ async function fetchJson(url, token, init) {
   if (!res.ok) throw await responseError(res, "Request failed");
   return res.json();
 }
+function readDegradation(raw) {
+  if (!raw || typeof raw !== "object") return null;
+  const record = raw;
+  if (typeof record.message !== "string") return null;
+  return {
+    kind: "hub-connections",
+    reason: typeof record.reason === "string" ? record.reason : "unknown",
+    message: record.message,
+    requestShape: typeof record.requestShape === "string" ? record.requestShape : "unknown"
+  };
+}
+function bumpHubFrameEpoch(epochs, sessionId) {
+  epochs.set(sessionId, (epochs.get(sessionId) ?? 0) + 1);
+}
+function withDegradation(prev, sessionId, value) {
+  const current = prev.get(sessionId) ?? null;
+  if (value === null) {
+    if (current === null) return prev;
+    const next = new Map(prev);
+    next.delete(sessionId);
+    return next;
+  }
+  if (current && current.reason === value.reason && current.message === value.message && current.requestShape === value.requestShape) {
+    return prev;
+  }
+  return new Map(prev).set(sessionId, value);
+}
 function useSessionStream({
   apiUrl,
   token,
@@ -119,11 +146,16 @@ function useSessionStream({
   const [isStreaming, setIsStreaming] = useState(false);
   const [error, setError] = useState(null);
   const [connected, setConnected] = useState(false);
+  const [degradationBySession, setDegradationBySession] = useState(() => /* @__PURE__ */ new Map());
+  const degradation = degradationBySession.get(sessionId) ?? null;
   const abortRef = useRef(null);
   const reconnectTimerRef = useRef(null);
   const activeAssistantMessageIdsRef = useRef(/* @__PURE__ */ new Set());
   const completedExecutionIdsRef = useRef(/* @__PURE__ */ new Set());
   const lastEventIdRef = useRef("");
+  const hubFrameEpochRef = useRef(/* @__PURE__ */ new Map());
+  const seedGenerationRef = useRef(/* @__PURE__ */ new Map());
+  const executionScopedStreamRef = useRef(false);
   const insertionCounterRef = useRef(0);
   const echoCounterRef = useRef(0);
   const pendingEchoesRef = useRef(/* @__PURE__ */ new Map());
@@ -169,6 +201,29 @@ function useSessionStream({
       setError(msg);
     }
   }, [apiUrl, token, sessionId]);
+  const seedDegradation = useCallback(async () => {
+    if (!token || !sessionId || !apiUrl) return;
+    const epochAtRequest = hubFrameEpochRef.current.get(sessionId) ?? 0;
+    const generation = (seedGenerationRef.current.get(sessionId) ?? 0) + 1;
+    seedGenerationRef.current.set(sessionId, generation);
+    let seeded;
+    try {
+      const url = `${apiUrl}/session/sessions/${encodeURIComponent(sessionId)}`;
+      const status = await fetchJson(url, token);
+      const field = status.hubConnectionsDegraded;
+      if (field === void 0 || field === null) {
+        seeded = null;
+      } else {
+        seeded = readDegradation(field);
+        if (!seeded) return;
+      }
+    } catch {
+      return;
+    }
+    if ((hubFrameEpochRef.current.get(sessionId) ?? 0) !== epochAtRequest) return;
+    if (seedGenerationRef.current.get(sessionId) !== generation) return;
+    setDegradationBySession((prev) => withDegradation(prev, sessionId, seeded));
+  }, [apiUrl, token, sessionId]);
   const connectSSE = useCallback(async () => {
     if (!token || !sessionId || !apiUrl || !enabled) return;
     if (reconnectTimerRef.current) {
@@ -181,6 +236,7 @@ function useSessionStream({
     try {
       const eventQuery = new URLSearchParams({ sessionId });
       const activeExecutionIds = [...activeAssistantMessageIdsRef.current];
+      executionScopedStreamRef.current = activeExecutionIds.length > 0;
       if (activeExecutionIds.length === 1) {
         eventQuery.set("executionId", activeExecutionIds[0]);
       } else if (activeExecutionIds.length > 1) {
@@ -198,6 +254,7 @@ function useSessionStream({
       if (!res.ok) throw await responseError(res, "Live response connection failed");
       setConnected(true);
       setError(null);
+      void seedDegradation();
       const reader = res.body?.getReader();
       if (!reader) throw new Error("No response body");
       const decoder = new TextDecoder();
@@ -387,7 +444,22 @@ function useSessionStream({
       const executionId = props.executionId ?? props.executionID ?? "";
       const stillStreaming = retireExecution(executionId);
       setIsStreaming(stillStreaming);
-      if (!stillStreaming) refetch();
+      if (!stillStreaming) {
+        refetch();
+        if (executionScopedStreamRef.current) void seedDegradation();
+      }
+    } else if (type === "hub.connections.degraded") {
+      const framedSessionId = typeof props.sessionId === "string" ? props.sessionId : null;
+      if (!framedSessionId) return;
+      const value = readDegradation(props);
+      if (!value) return;
+      bumpHubFrameEpoch(hubFrameEpochRef.current, framedSessionId);
+      setDegradationBySession((prev) => withDegradation(prev, framedSessionId, value));
+    } else if (type === "hub.connections.restored") {
+      const framedSessionId = typeof props.sessionId === "string" ? props.sessionId : null;
+      if (!framedSessionId) return;
+      bumpHubFrameEpoch(hubFrameEpochRef.current, framedSessionId);
+      setDegradationBySession((prev) => withDegradation(prev, framedSessionId, null));
     } else if (type === "session.error") {
       const executionId = props.executionId ?? props.executionID ?? "";
       const stillStreaming = retireExecution(executionId);
@@ -395,7 +467,7 @@ function useSessionStream({
       setError(formatError(readErrorDetails(props), "Agent response failed"));
       if (!stillStreaming) refetch();
     }
-  }, [refetch]);
+  }, [refetch, seedDegradation]);
   handleSSEEventRef.current = handleSSEEvent;
   const send = useCallback(async (text, options) => {
     if (!token || !sessionId || !apiUrl || !enabled) {
@@ -505,7 +577,17 @@ function useSessionStream({
       setConnected(false);
     };
   }, [enabled, token, sessionId, refetch, connectSSE]);
-  return { messages, partMap, isStreaming, send, abort, refetch, error, connected };
+  return {
+    messages,
+    partMap,
+    isStreaming,
+    send,
+    abort,
+    refetch,
+    error,
+    connected,
+    degradation
+  };
 }
 
 // src/hooks/use-sidecar-auth.ts

package/dist/{chunk-OI7HEWLZ.js → chunk-D5VXCWUG.js}

@@ -619,12 +619,24 @@ function DirectoryPane({
 import { Binary, ShieldCheck, TerminalSquare } from "lucide-react";
 
 // src/workspace/status-banner.tsx
-import { Loader2, AlertCircle, CheckCircle, Wifi } from "lucide-react";
+import { Loader2, AlertCircle, AlertTriangle, CheckCircle, Wifi } from "lucide-react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var BANNER_STYLES = {
   provisioning: { bg: "bg-primary/5", border: "border-primary/20", text: "text-primary", icon: Loader2 },
   connecting: { bg: "bg-[var(--code-number)]/5", border: "border-[var(--code-number)]/20", text: "text-[var(--code-number)]", icon: Wifi },
   error: { bg: "bg-[var(--code-error)]/5", border: "border-[var(--code-error)]/20", text: "text-[var(--code-error)]", icon: AlertCircle },
+  // Degraded, not broken: the thing still works, with less than was asked for.
+  // `error` would overstate it and `info` would understate it, and a notice
+  // styled as neither gets read as neither. Uses the brand's theme-reactive
+  // `--surface-warning-*` triple rather than a `warning` color utility —
+  // `warning` is not registered in this package's `@theme`, so `bg-warning`
+  // and friends emit no rule at all.
+  warning: {
+    bg: "bg-[var(--surface-warning-bg)]",
+    border: "border-[var(--surface-warning-border)]",
+    text: "text-[var(--surface-warning-text)]",
+    icon: AlertTriangle
+  },
   success: { bg: "bg-[var(--code-success)]/5", border: "border-[var(--code-success)]/20", text: "text-[var(--code-success)]", icon: CheckCircle },
   info: { bg: "bg-surface-container-high", border: "border-[var(--md3-outline-variant)]", text: "text-muted-foreground", icon: AlertCircle }
 };
@@ -632,6 +644,7 @@ function StatusBanner({ type, message, detail, onDismiss, className }) {
   const style = BANNER_STYLES[type];
   const Icon = style.icon;
   const isAnimated = type === "provisioning" || type === "connecting";
+  const role = type === "error" ? "alert" : "status";
   return /* @__PURE__ */ jsxs3(
     "div",
     {
@@ -642,15 +655,17 @@ function StatusBanner({ type, message, detail, onDismiss, className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx4(
-          Icon,
-          {
-            className: cn("h-4 w-4 shrink-0", style.text, isAnimated && "animate-spin"),
-            ...isAnimated ? { "data-motion": "essential" } : {}
-          }
-        ),
-        /* @__PURE__ */ jsx4("span", { className: "font-medium text-foreground", children: message }),
-        detail && /* @__PURE__ */ jsx4("span", { className: "font-mono text-xs text-muted-foreground tabular-nums", children: detail }),
+        /* @__PURE__ */ jsxs3("div", { role, className: "flex min-w-0 items-center gap-2.5", children: [
+          /* @__PURE__ */ jsx4(
+            Icon,
+            {
+              className: cn("h-4 w-4 shrink-0", style.text, isAnimated && "animate-spin"),
+              ...isAnimated ? { "data-motion": "essential" } : {}
+            }
+          ),
+          /* @__PURE__ */ jsx4("span", { className: "font-medium text-foreground", children: message }),
+          detail && /* @__PURE__ */ jsx4("span", { className: "font-mono text-xs text-muted-foreground tabular-nums", children: detail })
+        ] }),
         onDismiss && /* @__PURE__ */ jsx4(
           "button",
           {