@rohansguliani/mux-chat-ui 0.3.0 → 0.4.0

package/dist/index.js

@@ -1,1237 +0,0 @@
-import { className, createComponent, delegateEvents, effect, insert, memo, render, setAttribute, setStyleProperty, style, template, use } from "solid-js/web";
-import { For, Match, Show, Switch, batch, createComputed, createEffect, createMemo, createSignal, on, onCleanup, onMount, untrack } from "solid-js";
-import { createAppClient, createChatSession, createMemoryStore, createRuntimeTransport, isSessionStreaming, sessionPermissions, sessionQuestions, sessionTurns, textSubmission } from "@rohansguliani/mux-chat-core";
-import createDOMPurify from "dompurify";
-import { Marked } from "marked";
-//#endregion
-//#region src/styles.ts
-/** Mux's stylesheets in its cascade order, then the embed's layout on top. */
-var styles = [
-	"/* Synced from Mux frontend/src/ui/styles/theme.css @ 37d6096b450cb33dfe9d7112e9d4ff75975d20b2. Do not edit; run npm run sync-styles. */\n:host {\n  --font-family-sans: \"Inter\", \"Inter Fallback\";\n  --font-family-sans--font-feature-settings: \"ss03\" 1;\n  --font-family-mono: \"IBM Plex Mono\", \"IBM Plex Mono Fallback\";\n  --font-family-mono--font-feature-settings: \"ss01\" 1;\n\n  --font-size-small: 13px;\n  --font-size-base: 14px;\n  --font-size-large: 16px;\n  --font-size-x-large: 20px;\n  --font-weight-regular: 400;\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n  --font-weight-bold: 700;\n  --line-height-normal: 130%;\n  --line-height-large: 150%;\n  --line-height-x-large: 180%;\n  --line-height-2x-large: 200%;\n  --letter-spacing-normal: 0;\n  --letter-spacing-tight: -0.16px;\n  --letter-spacing-tightest: -0.32px;\n  --paragraph-spacing-base: 0;\n\n  --spacing: 0.25rem;\n\n  /* Label track for transcript activity rows (tool/thinking/context triggers).\n     Content-sized, so each label sits one 8px gap from its detail text.\n     Set a fixed length here to align column 2 across rows instead. */\n  --activity-label-width: max-content;\n\n  --breakpoint-sm: 40rem;\n  --breakpoint-md: 48rem;\n  --breakpoint-lg: 64rem;\n  --breakpoint-xl: 80rem;\n  --breakpoint-2xl: 96rem;\n\n  --container-3xs: 16rem;\n  --container-2xs: 18rem;\n  --container-xs: 20rem;\n  --container-sm: 24rem;\n  --container-md: 28rem;\n  --container-lg: 32rem;\n  --container-xl: 36rem;\n  --container-2xl: 42rem;\n  --container-3xl: 48rem;\n  --container-4xl: 56rem;\n  --container-5xl: 64rem;\n  --container-6xl: 72rem;\n  --container-7xl: 80rem;\n\n  --radius-xs: 0.125rem;\n  --radius-sm: 0.25rem;\n  --radius-md: 0.375rem;\n  --radius-lg: 0.5rem;\n  --radius-xl: 0.625rem;\n\n  --shadow-xs:\n    0 1px 2px -0.5px light-dark(hsl(0 0% 0% / 0.04), hsl(0 0% 0% / 0.06)),\n    0 0.5px 1.5px 0 light-dark(hsl(0 0% 0% / 0.025), hsl(0 0% 0% / 0.08)),\n    0 1px 3px 0 light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 0% / 0.1));\n  --shadow-sm:\n    0 1px 3px 0 light-dark(hsl(0 0% 0% / 0.06), hsl(0 0% 0% / 0.12)),\n    0 1px 2px -1px light-dark(hsl(0 0% 0% / 0.06), hsl(0 0% 0% / 0.12));\n  --shadow-md:\n    0 6px 12px -2px light-dark(hsl(0 0% 0% / 0.075), hsl(0 0% 0% / 0.1)),\n    0 4px 8px -2px light-dark(hsl(0 0% 0% / 0.075), hsl(0 0% 0% / 0.15)),\n    0 1px 2px light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 0% / 0.15));\n  --shadow-lg:\n    0 16px 48px -6px light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 0% / 0.15)),\n    0 6px 12px -2px light-dark(hsl(0 0% 0% / 0.025), hsl(0 0% 0% / 0.1)),\n    0 1px 2.5px light-dark(hsl(0 0% 0% / 0.025), hsl(0 0% 0% / 0.1));\n  --shadow-xl:\n    0 24px 64px -12px light-dark(hsl(0 0% 0% / 0.12), hsl(0 0% 0% / 0.4)),\n    0 8px 20px -6px light-dark(hsl(0 0% 0% / 0.06), hsl(0 0% 0% / 0.2));\n  --shadow-xxs-border: 0 0 0 0.5px var(--border-weak-base, rgba(0, 0, 0, 0.07));\n  --shadow-xs-border:\n    0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 0 1px 2px -1px rgba(19, 16, 16, 0.04),\n    0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);\n  --shadow-xs-border-base:\n    0 0 0 1px var(--border-weak-base, rgba(17, 0, 0, 0.12)), 0 1px 2px -1px rgba(19, 16, 16, 0.04),\n    0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);\n  --shadow-xs-border-select:\n    0 0 0 3px var(--border-weak-selected, rgba(1, 103, 255, 0.29)),\n    0 0 0 1px var(--border-selected, rgba(0, 74, 255, 0.99)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),\n    0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);\n  --shadow-xs-border-focus:\n    0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),\n    0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12), 0 0 0 2px var(--background-weak, #f1f0f0),\n    0 0 0 3px var(--border-selected, rgba(0, 74, 255, 0.99));\n  --shadow-xs-border-hover:\n    0 0 0 1px var(--border-weak-selected, rgba(0, 112, 255, 0.22)), 0 1px 2px -1px rgba(19, 16, 16, 0.04),\n    0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);\n  --shadow-xs-border-critical-base: 0 0 0 1px var(--border-critical-selected, #fc543a);\n  --shadow-xs-border-critical-focus:\n    0 0 0 3px var(--border-critical-weak, rgba(251, 34, 0, 0.18)), 0 0 0 1px var(--border-critical-selected, #fc543a),\n    0 1px 2px -1px rgba(19, 16, 16, 0.25), 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);\n  --shadow-lg-border-base:\n    0 0 0 1px var(--border-weak-base, rgba(0, 0, 0, 0.07)), 0 36px 80px 0 rgba(0, 0, 0, 0.03),\n    0 13.141px 29.201px 0 rgba(0, 0, 0, 0.04), 0 6.38px 14.177px 0 rgba(0, 0, 0, 0.05),\n    0 3.127px 6.95px 0 rgba(0, 0, 0, 0.06), 0 1.237px 2.748px 0 rgba(0, 0, 0, 0.09);\n\n  color-scheme: light;\n  --text-mix-blend-mode: multiply;\n\n  /* OC-2 fallback variables (light) */\n  --background-base: #f8f8f8;\n  --background-weak: #f3f3f3;\n  --background-strong: #fcfcfc;\n  --background-stronger: #fcfcfc;\n  --surface-base: rgba(0, 0, 0, 0.031);\n  --base: rgba(0, 0, 0, 0.034);\n  --surface-base-hover: rgba(0, 0, 0, 0.059);\n  --surface-base-active: rgba(0, 0, 0, 0.051);\n  --surface-base-interactive-active: rgba(3, 76, 255, 0.09);\n  --base2: rgba(0, 0, 0, 0.034);\n  --base3: rgba(0, 0, 0, 0.034);\n  --surface-inset-base: rgba(0, 0, 0, 0.034);\n  --surface-inset-base-hover: rgba(0, 0, 0, 0.055);\n  --surface-inset-strong: rgba(0, 0, 0, 0.09);\n  --surface-inset-strong-hover: rgba(0, 0, 0, 0.09);\n  --surface-raised-base: rgba(0, 0, 0, 0.031);\n  --surface-float-base: #161616;\n  --surface-float-base-hover: #1c1c1c;\n  --surface-raised-base-hover: rgba(0, 0, 0, 0.051);\n  --surface-raised-base-active: rgba(0, 0, 0, 0.09);\n  --surface-raised-strong: #fcfcfc;\n  --surface-raised-strong-hover: #ffffff;\n  --surface-raised-stronger: #ffffff;\n  --surface-raised-stronger-hover: #ffffff;\n  --surface-weak: rgba(0, 0, 0, 0.051);\n  --surface-weaker: rgba(0, 0, 0, 0.071);\n  --surface-strong: #ffffff;\n  --surface-stronger-non-alpha: var(--surface-raised-stronger-non-alpha);\n  --surface-raised-stronger-non-alpha: #ffffff;\n  --surface-panel: var(--surface-raised-stronger-non-alpha);\n  --surface-panel-base: var(--surface-raised-stronger-non-alpha);\n  --surface-brand-base: #dcde8d;\n  --surface-brand-hover: #d0d283;\n  --surface-interactive-base: #ecf3ff;\n  --surface-interactive-hover: #e0eaff;\n  --surface-interactive-weak: #f7faff;\n  --surface-interactive-weak-hover: #ecf3ff;\n  --surface-success-base: #dbfed7;\n  --surface-success-weak: #f0feee;\n  --surface-success-strong: #12c905;\n  --surface-warning-base: #fcf3cb;\n  --surface-warning-weak: #fdfaec;\n  --surface-warning-strong: #fbdd46;\n  --surface-critical-base: #fff2f0;\n  --surface-critical-weak: #fff8f6;\n  --surface-critical-strong: #fc533a;\n  --surface-info-base: #fdecfe;\n  --surface-info-weak: #fef7ff;\n  --surface-info-strong: #a753ae;\n  --surface-diff-unchanged-base: #ffffff00;\n  --surface-diff-skip-base: #f8f8f8;\n  --surface-diff-hidden-base: #eaf4ff;\n  --surface-diff-hidden-weak: #f6faff;\n  --surface-diff-hidden-weaker: #fbfdff;\n  --surface-diff-hidden-strong: #cae3ff;\n  --surface-diff-hidden-stronger: #2090f5;\n  --surface-diff-add-base: #e3fae1;\n  --surface-diff-add-weak: #f4fcf3;\n  --surface-diff-add-weaker: #fbfefb;\n  --surface-diff-add-strong: #c2eebf;\n  --surface-diff-add-stronger: #9ff29a;\n  --surface-diff-delete-base: #feefeb;\n  --surface-diff-delete-weak: #fff8f6;\n  --surface-diff-delete-weaker: #fffcfb;\n  --surface-diff-delete-strong: #fdc3b7;\n  --surface-diff-delete-stronger: #fc533a;\n  --input-base: #fcfcfc;\n  --input-hover: #f8f8f8;\n  --input-active: #fcfdff;\n  --input-selected: #e0eaff;\n  --input-focus: #fcfdff;\n  --input-disabled: #ededed;\n  --text-base: #6f6f6f;\n  --text-weak: #8f8f8f;\n  --text-weaker: #c7c7c7;\n  --text-strong: #171717;\n  --text-invert-base: #f8f8f8;\n  --text-invert-weak: #f3f3f3;\n  --text-invert-weaker: #ededed;\n  --text-invert-strong: #fcfcfc;\n  --text-interactive-base: #034cff;\n  --text-subtle: var(--text-weak);\n  --accent: var(--text-interactive-base);\n  --accent-base: var(--text-interactive-base);\n  --danger-base: #ed4831;\n  --danger-muted: rgba(237, 72, 49, 0.12);\n  --text-danger-base: var(--danger-base);\n  --text-text-danger-base: var(--danger-base);\n  --text-on-brand-base: rgba(0, 0, 0, 0.574);\n  --text-on-interactive-base: #fcfcfc;\n  --text-on-interactive-weak: rgba(0, 0, 0, 0.574);\n  --text-on-success-base: #2dba26;\n  --text-on-critical-base: #ed4831;\n  --text-on-critical-weak: #fe806a;\n  --text-on-critical-strong: #601a0f;\n  --text-on-warning-base: rgba(0, 0, 0, 0.574);\n  --text-on-info-base: rgba(0, 0, 0, 0.574);\n  --text-diff-add-base: #3a8437;\n  --text-diff-delete-base: #ed4831;\n  --text-diff-delete-strong: #601a0f;\n  --text-diff-add-strong: #1d3e1c;\n  --text-on-info-weak: rgba(0, 0, 0, 0.453);\n  --text-on-info-strong: rgba(0, 0, 0, 0.915);\n  --text-on-warning-weak: rgba(0, 0, 0, 0.453);\n  --text-on-warning-strong: rgba(0, 0, 0, 0.915);\n  --text-on-success-weak: #96ec8e;\n  --text-on-success-strong: #044202;\n  --text-on-brand-weak: rgba(0, 0, 0, 0.453);\n  --text-on-brand-weaker: rgba(0, 0, 0, 0.232);\n  --text-on-brand-strong: rgba(0, 0, 0, 0.915);\n  --button-primary-base: #171717;\n  --button-secondary-base: #fcfcfc;\n  --button-secondary-hover: #f8f8f8;\n  --button-ghost-hover: rgba(0, 0, 0, 0.031);\n  --button-ghost-hover2: rgba(0, 0, 0, 0.051);\n  --border-base: rgba(0, 0, 0, 0.162);\n  --border-hover: rgba(0, 0, 0, 0.236);\n  --border-active: rgba(0, 0, 0, 0.46);\n  --border-selected: rgba(3, 76, 255, 0.99);\n  --border-disabled: rgba(0, 0, 0, 0.236);\n  --border-focus: rgba(0, 0, 0, 0.46);\n  --border-weak-base: #e5e5e5;\n  --border-strong-base: rgba(0, 0, 0, 0.151);\n  --border-strong-hover: rgba(0, 0, 0, 0.232);\n  --border-strong-active: rgba(0, 0, 0, 0.151);\n  --border-strong-selected: rgba(3, 76, 255, 0.31);\n  --border-strong-disabled: rgba(0, 0, 0, 0.118);\n  --border-strong-focus: rgba(0, 0, 0, 0.151);\n  --border-weak-hover: rgba(0, 0, 0, 0.118);\n  --border-weak-active: rgba(0, 0, 0, 0.151);\n  --border-weak-selected: rgba(3, 76, 255, 0.24);\n  --border-weak-disabled: rgba(0, 0, 0, 0.118);\n  --border-weak-focus: rgba(0, 0, 0, 0.151);\n  --border-weaker-base: #f0f0f0;\n  --border-weaker-hover: rgba(0, 0, 0, 0.075);\n  --border-weaker-active: rgba(0, 0, 0, 0.118);\n  --border-weaker-selected: rgba(3, 76, 255, 0.16);\n  --border-weaker-disabled: rgba(0, 0, 0, 0.034);\n  --border-weaker-focus: rgba(0, 0, 0, 0.118);\n  --border-interactive-base: #a3c1fd;\n  --border-interactive-hover: #7ea9ff;\n  --border-interactive-active: #034cff;\n  --border-interactive-selected: #034cff;\n  --border-interactive-disabled: #c7c7c7;\n  --border-interactive-focus: #034cff;\n  --border-success-base: #96ec8e;\n  --border-success-hover: #7add71;\n  --border-success-selected: #12c905;\n  --border-warning-base: #e8d479;\n  --border-warning-hover: #d8c158;\n  --border-warning-selected: #fbdd46;\n  --border-critical-base: #fdc3b7;\n  --border-critical-hover: #ffa796;\n  --border-critical-selected: #fc533a;\n  --border-info-base: #f4bdf8;\n  --border-info-hover: #e6a8ea;\n  --border-info-selected: #a753ae;\n  --border-color: #ffffff;\n  --icon-base: #8f8f8f;\n  --icon-hover: #6f6f6f;\n  --icon-active: #171717;\n  --icon-selected: #171717;\n  --icon-disabled: #c7c7c7;\n  --icon-focus: #171717;\n  --icon-invert-base: #ffffff;\n  --icon-weak-base: #dbdbdb;\n  --icon-weak-hover: #c7c7c7;\n  --icon-weak-active: #8f8f8f;\n  --icon-weak-selected: #858585;\n  --icon-weak-disabled: #e2e2e2;\n  --icon-weak-focus: #8f8f8f;\n  --icon-strong-base: #171717;\n  --icon-strong-hover: #151313;\n  --icon-strong-active: #020202;\n  --icon-strong-selected: #020202;\n  --icon-strong-disabled: #c7c7c7;\n  --icon-strong-focus: #020202;\n  --icon-brand-base: #171717;\n  --icon-interactive-base: #034cff;\n  --icon-success-base: #7add71;\n  --icon-success-hover: #4cc944;\n  --icon-success-active: #078901;\n  --icon-warning-base: #ebb76e;\n  --icon-warning-hover: #da9e40;\n  --icon-warning-active: #95671b;\n  --icon-critical-base: #ed4831;\n  --icon-critical-hover: #ca2d17;\n  --icon-critical-active: #601a0f;\n  --icon-info-base: #e6a8ea;\n  --icon-info-hover: #d58cda;\n  --icon-info-active: #9b4da1;\n  --icon-on-brand-base: rgba(0, 0, 0, 0.574);\n  --icon-on-brand-hover: rgba(0, 0, 0, 0.915);\n  --icon-on-brand-selected: rgba(0, 0, 0, 0.915);\n  --icon-on-interactive-base: #fcfcfc;\n  --icon-agent-plan-base: #a753ae;\n  --icon-agent-docs-base: #fcb239;\n  --icon-agent-ask-base: #2090f5;\n  --icon-agent-build-base: #034cff;\n  --icon-on-success-base: rgba(18, 201, 5, 0.9);\n  --icon-on-success-hover: rgba(45, 186, 38, 0.9);\n  --icon-on-success-selected: rgba(7, 137, 1, 0.9);\n  --icon-on-warning-base: rgba(252, 178, 57, 0.9);\n  --icon-on-warning-hover: rgba(239, 167, 46, 0.9);\n  --icon-on-warning-selected: rgba(149, 103, 27, 0.9);\n  --icon-on-critical-base: rgba(252, 83, 58, 0.9);\n  --icon-on-critical-hover: rgba(237, 72, 49, 0.9);\n  --icon-on-critical-selected: rgba(202, 45, 23, 0.9);\n  --icon-on-info-base: #a753ae;\n  --icon-on-info-hover: rgba(155, 73, 162, 0.9);\n  --icon-on-info-selected: rgba(155, 77, 161, 0.9);\n  --icon-diff-add-base: #3a8437;\n  --icon-diff-add-hover: #1d3e1c;\n  --icon-diff-add-active: #1d3e1c;\n  --icon-diff-delete-base: #ed4831;\n  --icon-diff-delete-hover: #ca2d17;\n  --icon-diff-modified-base: #ff8c00;\n  --syntax-comment: var(--text-weak);\n  --syntax-regexp: var(--text-base);\n  --syntax-string: #006656;\n  --syntax-keyword: var(--text-weak);\n  --syntax-primitive: #fb4804;\n  --syntax-operator: var(--text-base);\n  --syntax-variable: var(--text-strong);\n  --syntax-property: #ed6dc8;\n  --syntax-type: #596600;\n  --syntax-constant: #007b80;\n  --syntax-punctuation: var(--text-base);\n  --syntax-object: var(--text-strong);\n  --syntax-success: #2dba26;\n  --syntax-warning: #efa72e;\n  --syntax-critical: #ed4831;\n  --syntax-info: #0092a8;\n  --syntax-diff-add: #3a8437;\n  --syntax-diff-delete: #ca2d17;\n  --syntax-diff-unknown: #ff0000;\n  --markdown-heading: #d68c27;\n  --markdown-text: #1a1a1a;\n  --markdown-link: #3b7dd8;\n  --markdown-link-text: #318795;\n  --markdown-code: #3d9a57;\n  --markdown-block-quote: #b0851f;\n  --markdown-emph: #b0851f;\n  --markdown-strong: #d68c27;\n  --markdown-horizontal-rule: #8a8a8a;\n  --markdown-list-item: #3b7dd8;\n  --markdown-list-enumeration: #318795;\n  --markdown-image: #3b7dd8;\n  --markdown-image-text: #318795;\n  --markdown-code-block: #1a1a1a;\n  --avatar-background-pink: #feeef8;\n  --avatar-background-mint: #e1fbf4;\n  --avatar-background-orange: #fff1e7;\n  --avatar-background-purple: #f9f1fe;\n  --avatar-background-cyan: #e7f9fb;\n  --avatar-background-lime: #eefadc;\n  --avatar-text-pink: #cd1d8d;\n  --avatar-text-mint: #147d6f;\n  --avatar-text-orange: #ed5f00;\n  --avatar-text-purple: #8445bc;\n  --avatar-text-cyan: #0894b3;\n  --avatar-text-lime: #5d770d;\n  --text-stronger: #171717;\n\n\n}\n\n@media (prefers-color-scheme: dark) {\n  :host(:not([data-theme=\"light\"])) {\n    color-scheme: dark;\n    --text-mix-blend-mode: plus-lighter;\n\n    /* OC-2 fallback variables (dark) */\n    --background-base: #101010;\n    --background-weak: #1e1e1e;\n    --background-strong: #121212;\n    --background-stronger: #151515;\n    --surface-base: rgba(255, 255, 255, 0.031);\n    --base: rgba(255, 255, 255, 0.034);\n    --surface-base-hover: rgba(255, 255, 255, 0.039);\n    --surface-base-active: rgba(255, 255, 255, 0.059);\n    --surface-base-interactive-active: rgba(3, 76, 255, 0.125);\n    --base2: rgba(255, 255, 255, 0.034);\n    --base3: rgba(255, 255, 255, 0.034);\n    --surface-inset-base: rgba(0, 0, 0, 0.5);\n    --surface-inset-base-hover: rgba(0, 0, 0, 0.5);\n    --surface-inset-strong: rgba(0, 0, 0, 0.8);\n    --surface-inset-strong-hover: rgba(0, 0, 0, 0.8);\n    --surface-raised-base: rgba(255, 255, 255, 0.059);\n    --surface-float-base: #161616;\n    --surface-float-base-hover: #1c1c1c;\n    --surface-raised-base-hover: rgba(255, 255, 255, 0.078);\n    --surface-raised-base-active: rgba(255, 255, 255, 0.102);\n    --surface-raised-strong: rgba(255, 255, 255, 0.078);\n    --surface-raised-strong-hover: rgba(255, 255, 255, 0.129);\n    --surface-raised-stronger: rgba(255, 255, 255, 0.129);\n    --surface-raised-stronger-hover: rgba(255, 255, 255, 0.169);\n    --surface-weak: rgba(255, 255, 255, 0.078);\n    --surface-weaker: rgba(255, 255, 255, 0.102);\n    --surface-strong: rgba(255, 255, 255, 0.169);\n    --surface-stronger-non-alpha: var(--surface-raised-stronger-non-alpha);\n    --surface-raised-stronger-non-alpha: #1c1c1c;\n    --surface-panel: var(--surface-raised-stronger-non-alpha);\n    --surface-panel-base: var(--surface-raised-stronger-non-alpha);\n    --surface-brand-base: #fab283;\n    --surface-brand-hover: #eda779;\n    --surface-interactive-base: #091f52;\n    --surface-interactive-hover: #091f52;\n    --surface-interactive-weak: #0b1730;\n    --surface-interactive-weak-hover: #ecf3ff;\n    --surface-success-base: #062d04;\n    --surface-success-weak: #0a1e08;\n    --surface-success-strong: #12c905;\n    --surface-warning-base: #fdf3cf;\n    --surface-warning-weak: #fdfaed;\n    --surface-warning-strong: #fcd53a;\n    --surface-critical-base: #1f0603;\n    --surface-critical-weak: #28110c;\n    --surface-critical-strong: #fc533a;\n    --surface-info-base: #feecfe;\n    --surface-info-weak: #fdf7fe;\n    --surface-info-strong: #edb2f1;\n    --surface-diff-unchanged-base: #161616;\n    --surface-diff-skip-base: #00000000;\n    --surface-diff-hidden-base: #0c1928;\n    --surface-diff-hidden-weak: #09131d;\n    --surface-diff-hidden-weaker: #082542;\n    --surface-diff-hidden-strong: #073966;\n    --surface-diff-hidden-stronger: #8ec2fc;\n    --surface-diff-add-base: #1a2919;\n    --surface-diff-add-weak: #1f351e;\n    --surface-diff-add-weaker: #1a2919;\n    --surface-diff-add-strong: #264024;\n    --surface-diff-add-stronger: #9bcd97;\n    --surface-diff-delete-base: #42120b;\n    --surface-diff-delete-weak: #580f06;\n    --surface-diff-delete-weaker: #42120b;\n    --surface-diff-delete-strong: #6a1206;\n    --surface-diff-delete-stronger: #faa494;\n    --input-base: #1c1c1c;\n    --input-hover: #1c1c1c;\n    --input-active: #091123;\n    --input-selected: #0b1730;\n    --input-focus: #091123;\n    --input-disabled: #282828;\n    --text-base: rgba(255, 255, 255, 0.618);\n    --text-weak: rgba(255, 255, 255, 0.422);\n    --text-weaker: rgba(255, 255, 255, 0.284);\n    --text-strong: rgba(255, 255, 255, 0.936);\n    --text-invert-base: #a0a0a0;\n    --text-invert-weak: #707070;\n    --text-invert-weaker: #505050;\n    --text-invert-strong: #ededed;\n    --text-interactive-base: #9dbefe;\n    --text-subtle: var(--text-weak);\n    --accent: var(--text-interactive-base);\n    --accent-base: var(--text-interactive-base);\n    --danger-base: #fc533a;\n    --danger-muted: rgba(252, 83, 58, 0.16);\n    --text-danger-base: var(--danger-base);\n    --text-text-danger-base: var(--danger-base);\n    --text-on-brand-base: rgba(255, 255, 255, 0.603);\n    --text-on-interactive-base: #ededed;\n    --text-on-interactive-weak: rgba(255, 255, 255, 0.603);\n    --text-on-success-base: #12c905;\n    --text-on-critical-base: #fc533a;\n    --text-on-critical-weak: #b72d1a;\n    --text-on-critical-strong: #ffe0da;\n    --text-on-warning-base: rgba(255, 255, 255, 0.603);\n    --text-on-info-base: rgba(255, 255, 255, 0.603);\n    --text-diff-add-base: #9bcd97;\n    --text-diff-delete-base: #fc533a;\n    --text-diff-delete-strong: #ffe0da;\n    --text-diff-add-strong: #4a7348;\n    --text-on-info-weak: rgba(255, 255, 255, 0.404);\n    --text-on-info-strong: rgba(255, 255, 255, 0.928);\n    --text-on-warning-weak: rgba(255, 255, 255, 0.404);\n    --text-on-warning-strong: rgba(255, 255, 255, 0.928);\n    --text-on-success-weak: #127d0d;\n    --text-on-success-strong: #bafdb3;\n    --text-on-brand-weak: rgba(255, 255, 255, 0.404);\n    --text-on-brand-weaker: rgba(255, 255, 255, 0.266);\n    --text-on-brand-strong: rgba(255, 255, 255, 0.928);\n    --button-primary-base: #ededed;\n    --button-secondary-base: #1c1c1c;\n    --button-secondary-hover: rgba(255, 255, 255, 0.039);\n    --button-ghost-hover: rgba(255, 255, 255, 0.031);\n    --button-ghost-hover2: rgba(255, 255, 255, 0.059);\n    --border-base: rgba(255, 255, 255, 0.195);\n    --border-hover: rgba(255, 255, 255, 0.284);\n    --border-active: rgba(255, 255, 255, 0.418);\n    --border-selected: #9dbefe;\n    --border-disabled: rgba(255, 255, 255, 0.284);\n    --border-focus: rgba(255, 255, 255, 0.418);\n    --border-weak-base: #282828;\n    --border-strong-base: rgba(255, 255, 255, 0.266);\n    --border-strong-hover: rgba(255, 255, 255, 0.266);\n    --border-strong-active: rgba(255, 255, 255, 0.266);\n    --border-strong-selected: rgba(3, 76, 255, 0.62);\n    --border-strong-disabled: rgba(255, 255, 255, 0.138);\n    --border-strong-focus: rgba(255, 255, 255, 0.266);\n    --border-weak-hover: rgba(255, 255, 255, 0.181);\n    --border-weak-active: rgba(255, 255, 255, 0.266);\n    --border-weak-selected: rgba(3, 76, 255, 0.62);\n    --border-weak-disabled: rgba(255, 255, 255, 0.138);\n    --border-weak-focus: rgba(255, 255, 255, 0.266);\n    --border-weaker-base: #202020;\n    --border-weaker-hover: rgba(255, 255, 255, 0.084);\n    --border-weaker-active: rgba(255, 255, 255, 0.138);\n    --border-weaker-selected: rgba(3, 76, 255, 0.32);\n    --border-weaker-disabled: rgba(255, 255, 255, 0.034);\n    --border-weaker-focus: rgba(255, 255, 255, 0.138);\n    --border-interactive-base: #a3c1fd;\n    --border-interactive-hover: #7ea9ff;\n    --border-interactive-active: #034cff;\n    --border-interactive-selected: #034cff;\n    --border-interactive-disabled: #505050;\n    --border-interactive-focus: #034cff;\n    --border-success-base: #96ec8e;\n    --border-success-hover: #7add71;\n    --border-success-selected: #12c905;\n    --border-warning-base: #e9d282;\n    --border-warning-hover: #dac063;\n    --border-warning-selected: #fcd53a;\n    --border-critical-base: #6a1206;\n    --border-critical-hover: #952414;\n    --border-critical-selected: #fc533a;\n    --border-info-base: #eac5ec;\n    --border-info-hover: #dab1dd;\n    --border-info-selected: #edb2f1;\n    --border-color: #ffffff;\n    --icon-base: #7e7e7e;\n    --icon-hover: #a0a0a0;\n    --icon-active: #ededed;\n    --icon-selected: #ededed;\n    --icon-disabled: #3e3e3e;\n    --icon-focus: #ededed;\n    --icon-invert-base: #161616;\n    --icon-weak-base: #343434;\n    --icon-weak-hover: #d9d9d9;\n    --icon-weak-active: #c8c8c8;\n    --icon-weak-selected: #707070;\n    --icon-weak-disabled: #ededed;\n    --icon-weak-focus: #707070;\n    --icon-strong-base: #ededed;\n    --icon-strong-hover: #f6f3f3;\n    --icon-strong-active: #fcfcfc;\n    --icon-strong-selected: #fdfcfc;\n    --icon-strong-disabled: #3e3e3e;\n    --icon-strong-focus: #fdfcfc;\n    --icon-brand-base: #ffffff;\n    --icon-interactive-base: #034cff;\n    --icon-success-base: #12c905;\n    --icon-success-hover: #35c02d;\n    --icon-success-active: #4de144;\n    --icon-warning-base: #fbb73c;\n    --icon-warning-hover: #885e08;\n    --icon-warning-active: #f1b13f;\n    --icon-critical-base: #fc533a;\n    --icon-critical-hover: #faa494;\n    --icon-critical-active: #ffe0da;\n    --icon-info-base: #68446b;\n    --icon-info-hover: #815484;\n    --icon-info-active: #dfa7e3;\n    --icon-on-brand-base: rgba(255, 255, 255, 0.603);\n    --icon-on-brand-hover: rgba(255, 255, 255, 0.928);\n    --icon-on-brand-selected: rgba(255, 255, 255, 0.928);\n    --icon-on-interactive-base: #ededed;\n    --icon-agent-plan-base: #edb2f1;\n    --icon-agent-docs-base: #fbb73c;\n    --icon-agent-ask-base: #2090f5;\n    --icon-agent-build-base: #9dbefe;\n    --icon-on-success-base: rgba(18, 201, 5, 0.9);\n    --icon-on-success-hover: rgba(53, 192, 45, 0.9);\n    --icon-on-success-selected: rgba(77, 225, 68, 0.9);\n    --icon-on-warning-base: rgba(251, 183, 60, 0.9);\n    --icon-on-warning-hover: rgba(245, 178, 56, 0.9);\n    --icon-on-warning-selected: rgba(241, 177, 63, 0.9);\n    --icon-on-critical-base: rgba(252, 83, 58, 0.9);\n    --icon-on-critical-hover: rgba(245, 79, 54, 0.9);\n    --icon-on-critical-selected: rgba(250, 164, 148, 0.9);\n    --icon-on-info-base: #edb2f1;\n    --icon-on-info-hover: rgba(231, 173, 235, 0.9);\n    --icon-on-info-selected: rgba(223, 167, 227, 0.9);\n    --icon-diff-add-base: #9bcd97;\n    --icon-diff-add-hover: #c3f9bf;\n    --icon-diff-add-active: #9bcd97;\n    --icon-diff-delete-base: #fc533a;\n    --icon-diff-delete-hover: #f54f36;\n    --icon-diff-modified-base: #ffba92;\n    --syntax-comment: var(--text-weak);\n    --syntax-regexp: var(--text-base);\n    --syntax-string: #00ceb9;\n    --syntax-keyword: var(--text-weak);\n    --syntax-primitive: #ffba92;\n    --syntax-operator: var(--text-weak);\n    --syntax-variable: var(--text-strong);\n    --syntax-property: #ff9ae2;\n    --syntax-type: #ecf58c;\n    --syntax-constant: #93e9f6;\n    --syntax-punctuation: var(--text-weak);\n    --syntax-object: var(--text-strong);\n    --syntax-success: #35c02d;\n    --syntax-warning: #f5b238;\n    --syntax-critical: #f54f36;\n    --syntax-info: #93e9f6;\n    --syntax-diff-add: #9bcd97;\n    --syntax-diff-delete: #faa494;\n    --syntax-diff-unknown: #ff0000;\n    --markdown-heading: #9d7cd8;\n    --markdown-text: #eeeeee;\n    --markdown-link: #fab283;\n    --markdown-link-text: #56b6c2;\n    --markdown-code: #7fd88f;\n    --markdown-block-quote: #e5c07b;\n    --markdown-emph: #e5c07b;\n    --markdown-strong: #f5a742;\n    --markdown-horizontal-rule: #808080;\n    --markdown-list-item: #fab283;\n    --markdown-list-enumeration: #56b6c2;\n    --markdown-image: #fab283;\n    --markdown-image-text: #56b6c2;\n    --markdown-code-block: #eeeeee;\n    --avatar-background-pink: #501b3f;\n    --avatar-background-mint: #033a34;\n    --avatar-background-orange: #5f2a06;\n    --avatar-background-purple: #432155;\n    --avatar-background-cyan: #0f3058;\n    --avatar-background-lime: #2b3711;\n    --avatar-text-pink: #e34ba9;\n    --avatar-text-mint: #95f3d9;\n    --avatar-text-orange: #ff802b;\n    --avatar-text-purple: #9d5bd2;\n    --avatar-text-cyan: #369eff;\n    --avatar-text-lime: #c4f042;\n    --text-stronger: rgba(255, 255, 255, 0.936);\n  }\n}\n:host([data-theme=\"dark\"]) {\n    color-scheme: dark;\n    --text-mix-blend-mode: plus-lighter;\n\n    /* OC-2 fallback variables (dark) */\n    --background-base: #101010;\n    --background-weak: #1e1e1e;\n    --background-strong: #121212;\n    --background-stronger: #151515;\n    --surface-base: rgba(255, 255, 255, 0.031);\n    --base: rgba(255, 255, 255, 0.034);\n    --surface-base-hover: rgba(255, 255, 255, 0.039);\n    --surface-base-active: rgba(255, 255, 255, 0.059);\n    --surface-base-interactive-active: rgba(3, 76, 255, 0.125);\n    --base2: rgba(255, 255, 255, 0.034);\n    --base3: rgba(255, 255, 255, 0.034);\n    --surface-inset-base: rgba(0, 0, 0, 0.5);\n    --surface-inset-base-hover: rgba(0, 0, 0, 0.5);\n    --surface-inset-strong: rgba(0, 0, 0, 0.8);\n    --surface-inset-strong-hover: rgba(0, 0, 0, 0.8);\n    --surface-raised-base: rgba(255, 255, 255, 0.059);\n    --surface-float-base: #161616;\n    --surface-float-base-hover: #1c1c1c;\n    --surface-raised-base-hover: rgba(255, 255, 255, 0.078);\n    --surface-raised-base-active: rgba(255, 255, 255, 0.102);\n    --surface-raised-strong: rgba(255, 255, 255, 0.078);\n    --surface-raised-strong-hover: rgba(255, 255, 255, 0.129);\n    --surface-raised-stronger: rgba(255, 255, 255, 0.129);\n    --surface-raised-stronger-hover: rgba(255, 255, 255, 0.169);\n    --surface-weak: rgba(255, 255, 255, 0.078);\n    --surface-weaker: rgba(255, 255, 255, 0.102);\n    --surface-strong: rgba(255, 255, 255, 0.169);\n    --surface-stronger-non-alpha: var(--surface-raised-stronger-non-alpha);\n    --surface-raised-stronger-non-alpha: #1c1c1c;\n    --surface-panel: var(--surface-raised-stronger-non-alpha);\n    --surface-panel-base: var(--surface-raised-stronger-non-alpha);\n    --surface-brand-base: #fab283;\n    --surface-brand-hover: #eda779;\n    --surface-interactive-base: #091f52;\n    --surface-interactive-hover: #091f52;\n    --surface-interactive-weak: #0b1730;\n    --surface-interactive-weak-hover: #ecf3ff;\n    --surface-success-base: #062d04;\n    --surface-success-weak: #0a1e08;\n    --surface-success-strong: #12c905;\n    --surface-warning-base: #fdf3cf;\n    --surface-warning-weak: #fdfaed;\n    --surface-warning-strong: #fcd53a;\n    --surface-critical-base: #1f0603;\n    --surface-critical-weak: #28110c;\n    --surface-critical-strong: #fc533a;\n    --surface-info-base: #feecfe;\n    --surface-info-weak: #fdf7fe;\n    --surface-info-strong: #edb2f1;\n    --surface-diff-unchanged-base: #161616;\n    --surface-diff-skip-base: #00000000;\n    --surface-diff-hidden-base: #0c1928;\n    --surface-diff-hidden-weak: #09131d;\n    --surface-diff-hidden-weaker: #082542;\n    --surface-diff-hidden-strong: #073966;\n    --surface-diff-hidden-stronger: #8ec2fc;\n    --surface-diff-add-base: #1a2919;\n    --surface-diff-add-weak: #1f351e;\n    --surface-diff-add-weaker: #1a2919;\n    --surface-diff-add-strong: #264024;\n    --surface-diff-add-stronger: #9bcd97;\n    --surface-diff-delete-base: #42120b;\n    --surface-diff-delete-weak: #580f06;\n    --surface-diff-delete-weaker: #42120b;\n    --surface-diff-delete-strong: #6a1206;\n    --surface-diff-delete-stronger: #faa494;\n    --input-base: #1c1c1c;\n    --input-hover: #1c1c1c;\n    --input-active: #091123;\n    --input-selected: #0b1730;\n    --input-focus: #091123;\n    --input-disabled: #282828;\n    --text-base: rgba(255, 255, 255, 0.618);\n    --text-weak: rgba(255, 255, 255, 0.422);\n    --text-weaker: rgba(255, 255, 255, 0.284);\n    --text-strong: rgba(255, 255, 255, 0.936);\n    --text-invert-base: #a0a0a0;\n    --text-invert-weak: #707070;\n    --text-invert-weaker: #505050;\n    --text-invert-strong: #ededed;\n    --text-interactive-base: #9dbefe;\n    --text-subtle: var(--text-weak);\n    --accent: var(--text-interactive-base);\n    --accent-base: var(--text-interactive-base);\n    --danger-base: #fc533a;\n    --danger-muted: rgba(252, 83, 58, 0.16);\n    --text-danger-base: var(--danger-base);\n    --text-text-danger-base: var(--danger-base);\n    --text-on-brand-base: rgba(255, 255, 255, 0.603);\n    --text-on-interactive-base: #ededed;\n    --text-on-interactive-weak: rgba(255, 255, 255, 0.603);\n    --text-on-success-base: #12c905;\n    --text-on-critical-base: #fc533a;\n    --text-on-critical-weak: #b72d1a;\n    --text-on-critical-strong: #ffe0da;\n    --text-on-warning-base: rgba(255, 255, 255, 0.603);\n    --text-on-info-base: rgba(255, 255, 255, 0.603);\n    --text-diff-add-base: #9bcd97;\n    --text-diff-delete-base: #fc533a;\n    --text-diff-delete-strong: #ffe0da;\n    --text-diff-add-strong: #4a7348;\n    --text-on-info-weak: rgba(255, 255, 255, 0.404);\n    --text-on-info-strong: rgba(255, 255, 255, 0.928);\n    --text-on-warning-weak: rgba(255, 255, 255, 0.404);\n    --text-on-warning-strong: rgba(255, 255, 255, 0.928);\n    --text-on-success-weak: #127d0d;\n    --text-on-success-strong: #bafdb3;\n    --text-on-brand-weak: rgba(255, 255, 255, 0.404);\n    --text-on-brand-weaker: rgba(255, 255, 255, 0.266);\n    --text-on-brand-strong: rgba(255, 255, 255, 0.928);\n    --button-primary-base: #ededed;\n    --button-secondary-base: #1c1c1c;\n    --button-secondary-hover: rgba(255, 255, 255, 0.039);\n    --button-ghost-hover: rgba(255, 255, 255, 0.031);\n    --button-ghost-hover2: rgba(255, 255, 255, 0.059);\n    --border-base: rgba(255, 255, 255, 0.195);\n    --border-hover: rgba(255, 255, 255, 0.284);\n    --border-active: rgba(255, 255, 255, 0.418);\n    --border-selected: #9dbefe;\n    --border-disabled: rgba(255, 255, 255, 0.284);\n    --border-focus: rgba(255, 255, 255, 0.418);\n    --border-weak-base: #282828;\n    --border-strong-base: rgba(255, 255, 255, 0.266);\n    --border-strong-hover: rgba(255, 255, 255, 0.266);\n    --border-strong-active: rgba(255, 255, 255, 0.266);\n    --border-strong-selected: rgba(3, 76, 255, 0.62);\n    --border-strong-disabled: rgba(255, 255, 255, 0.138);\n    --border-strong-focus: rgba(255, 255, 255, 0.266);\n    --border-weak-hover: rgba(255, 255, 255, 0.181);\n    --border-weak-active: rgba(255, 255, 255, 0.266);\n    --border-weak-selected: rgba(3, 76, 255, 0.62);\n    --border-weak-disabled: rgba(255, 255, 255, 0.138);\n    --border-weak-focus: rgba(255, 255, 255, 0.266);\n    --border-weaker-base: #202020;\n    --border-weaker-hover: rgba(255, 255, 255, 0.084);\n    --border-weaker-active: rgba(255, 255, 255, 0.138);\n    --border-weaker-selected: rgba(3, 76, 255, 0.32);\n    --border-weaker-disabled: rgba(255, 255, 255, 0.034);\n    --border-weaker-focus: rgba(255, 255, 255, 0.138);\n    --border-interactive-base: #a3c1fd;\n    --border-interactive-hover: #7ea9ff;\n    --border-interactive-active: #034cff;\n    --border-interactive-selected: #034cff;\n    --border-interactive-disabled: #505050;\n    --border-interactive-focus: #034cff;\n    --border-success-base: #96ec8e;\n    --border-success-hover: #7add71;\n    --border-success-selected: #12c905;\n    --border-warning-base: #e9d282;\n    --border-warning-hover: #dac063;\n    --border-warning-selected: #fcd53a;\n    --border-critical-base: #6a1206;\n    --border-critical-hover: #952414;\n    --border-critical-selected: #fc533a;\n    --border-info-base: #eac5ec;\n    --border-info-hover: #dab1dd;\n    --border-info-selected: #edb2f1;\n    --border-color: #ffffff;\n    --icon-base: #7e7e7e;\n    --icon-hover: #a0a0a0;\n    --icon-active: #ededed;\n    --icon-selected: #ededed;\n    --icon-disabled: #3e3e3e;\n    --icon-focus: #ededed;\n    --icon-invert-base: #161616;\n    --icon-weak-base: #343434;\n    --icon-weak-hover: #d9d9d9;\n    --icon-weak-active: #c8c8c8;\n    --icon-weak-selected: #707070;\n    --icon-weak-disabled: #ededed;\n    --icon-weak-focus: #707070;\n    --icon-strong-base: #ededed;\n    --icon-strong-hover: #f6f3f3;\n    --icon-strong-active: #fcfcfc;\n    --icon-strong-selected: #fdfcfc;\n    --icon-strong-disabled: #3e3e3e;\n    --icon-strong-focus: #fdfcfc;\n    --icon-brand-base: #ffffff;\n    --icon-interactive-base: #034cff;\n    --icon-success-base: #12c905;\n    --icon-success-hover: #35c02d;\n    --icon-success-active: #4de144;\n    --icon-warning-base: #fbb73c;\n    --icon-warning-hover: #885e08;\n    --icon-warning-active: #f1b13f;\n    --icon-critical-base: #fc533a;\n    --icon-critical-hover: #faa494;\n    --icon-critical-active: #ffe0da;\n    --icon-info-base: #68446b;\n    --icon-info-hover: #815484;\n    --icon-info-active: #dfa7e3;\n    --icon-on-brand-base: rgba(255, 255, 255, 0.603);\n    --icon-on-brand-hover: rgba(255, 255, 255, 0.928);\n    --icon-on-brand-selected: rgba(255, 255, 255, 0.928);\n    --icon-on-interactive-base: #ededed;\n    --icon-agent-plan-base: #edb2f1;\n    --icon-agent-docs-base: #fbb73c;\n    --icon-agent-ask-base: #2090f5;\n    --icon-agent-build-base: #9dbefe;\n    --icon-on-success-base: rgba(18, 201, 5, 0.9);\n    --icon-on-success-hover: rgba(53, 192, 45, 0.9);\n    --icon-on-success-selected: rgba(77, 225, 68, 0.9);\n    --icon-on-warning-base: rgba(251, 183, 60, 0.9);\n    --icon-on-warning-hover: rgba(245, 178, 56, 0.9);\n    --icon-on-warning-selected: rgba(241, 177, 63, 0.9);\n    --icon-on-critical-base: rgba(252, 83, 58, 0.9);\n    --icon-on-critical-hover: rgba(245, 79, 54, 0.9);\n    --icon-on-critical-selected: rgba(250, 164, 148, 0.9);\n    --icon-on-info-base: #edb2f1;\n    --icon-on-info-hover: rgba(231, 173, 235, 0.9);\n    --icon-on-info-selected: rgba(223, 167, 227, 0.9);\n    --icon-diff-add-base: #9bcd97;\n    --icon-diff-add-hover: #c3f9bf;\n    --icon-diff-add-active: #9bcd97;\n    --icon-diff-delete-base: #fc533a;\n    --icon-diff-delete-hover: #f54f36;\n    --icon-diff-modified-base: #ffba92;\n    --syntax-comment: var(--text-weak);\n    --syntax-regexp: var(--text-base);\n    --syntax-string: #00ceb9;\n    --syntax-keyword: var(--text-weak);\n    --syntax-primitive: #ffba92;\n    --syntax-operator: var(--text-weak);\n    --syntax-variable: var(--text-strong);\n    --syntax-property: #ff9ae2;\n    --syntax-type: #ecf58c;\n    --syntax-constant: #93e9f6;\n    --syntax-punctuation: var(--text-weak);\n    --syntax-object: var(--text-strong);\n    --syntax-success: #35c02d;\n    --syntax-warning: #f5b238;\n    --syntax-critical: #f54f36;\n    --syntax-info: #93e9f6;\n    --syntax-diff-add: #9bcd97;\n    --syntax-diff-delete: #faa494;\n    --syntax-diff-unknown: #ff0000;\n    --markdown-heading: #9d7cd8;\n    --markdown-text: #eeeeee;\n    --markdown-link: #fab283;\n    --markdown-link-text: #56b6c2;\n    --markdown-code: #7fd88f;\n    --markdown-block-quote: #e5c07b;\n    --markdown-emph: #e5c07b;\n    --markdown-strong: #f5a742;\n    --markdown-horizontal-rule: #808080;\n    --markdown-list-item: #fab283;\n    --markdown-list-enumeration: #56b6c2;\n    --markdown-image: #fab283;\n    --markdown-image-text: #56b6c2;\n    --markdown-code-block: #eeeeee;\n    --avatar-background-pink: #501b3f;\n    --avatar-background-mint: #033a34;\n    --avatar-background-orange: #5f2a06;\n    --avatar-background-purple: #432155;\n    --avatar-background-cyan: #0f3058;\n    --avatar-background-lime: #2b3711;\n    --avatar-text-pink: #e34ba9;\n    --avatar-text-mint: #95f3d9;\n    --avatar-text-orange: #ff802b;\n    --avatar-text-purple: #9d5bd2;\n    --avatar-text-cyan: #369eff;\n    --avatar-text-lime: #c4f042;\n    --text-stronger: rgba(255, 255, 255, 0.936);\n  }\n",
-	"/* Synced from Mux frontend/src/ui/styles/animations.css @ 37d6096b450cb33dfe9d7112e9d4ff75975d20b2. Do not edit; run npm run sync-styles. */\n:host {\n  --animate-pulse: pulse-opacity 2s ease-in-out infinite;\n  --animate-pulse-scale: pulse-scale 1.2s ease-in-out infinite;\n}\n\n@keyframes pulse-opacity {\n  0%,\n  100% {\n    opacity: 0.4;\n  }\n  50% {\n    opacity: 1;\n  }\n}\n\n@keyframes pulse-scale {\n  0%,\n  100% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(0.6666667);\n  }\n}\n\n@keyframes pulse-opacity-dim {\n  0%,\n  100% {\n    opacity: 0.15;\n  }\n  50% {\n    opacity: 0.35;\n  }\n}\n\n@keyframes fadeUp {\n  from {\n    opacity: 0;\n    transform: translateY(5px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.fade-up-text {\n  animation: fadeUp 0.4s ease-out forwards;\n  opacity: 0;\n\n  &:nth-child(1) {\n    animation-delay: 0.1s;\n  }\n  &:nth-child(2) {\n    animation-delay: 0.2s;\n  }\n  &:nth-child(3) {\n    animation-delay: 0.3s;\n  }\n  &:nth-child(4) {\n    animation-delay: 0.4s;\n  }\n  &:nth-child(5) {\n    animation-delay: 0.5s;\n  }\n  &:nth-child(6) {\n    animation-delay: 0.6s;\n  }\n  &:nth-child(7) {\n    animation-delay: 0.7s;\n  }\n  &:nth-child(8) {\n    animation-delay: 0.8s;\n  }\n  &:nth-child(9) {\n    animation-delay: 0.9s;\n  }\n  &:nth-child(10) {\n    animation-delay: 1s;\n  }\n  &:nth-child(11) {\n    animation-delay: 1.1s;\n  }\n  &:nth-child(12) {\n    animation-delay: 1.2s;\n  }\n  &:nth-child(13) {\n    animation-delay: 1.3s;\n  }\n  &:nth-child(14) {\n    animation-delay: 1.4s;\n  }\n  &:nth-child(15) {\n    animation-delay: 1.5s;\n  }\n  &:nth-child(16) {\n    animation-delay: 1.6s;\n  }\n  &:nth-child(17) {\n    animation-delay: 1.7s;\n  }\n  &:nth-child(18) {\n    animation-delay: 1.8s;\n  }\n  &:nth-child(19) {\n    animation-delay: 1.9s;\n  }\n  &:nth-child(20) {\n    animation-delay: 2s;\n  }\n  &:nth-child(21) {\n    animation-delay: 2.1s;\n  }\n  &:nth-child(22) {\n    animation-delay: 2.2s;\n  }\n  &:nth-child(23) {\n    animation-delay: 2.3s;\n  }\n  &:nth-child(24) {\n    animation-delay: 2.4s;\n  }\n  &:nth-child(25) {\n    animation-delay: 2.5s;\n  }\n  &:nth-child(26) {\n    animation-delay: 2.6s;\n  }\n  &:nth-child(27) {\n    animation-delay: 2.7s;\n  }\n  &:nth-child(28) {\n    animation-delay: 2.8s;\n  }\n  &:nth-child(29) {\n    animation-delay: 2.9s;\n  }\n  &:nth-child(30) {\n    animation-delay: 3s;\n  }\n}\n",
-	"/* Synced from Mux frontend/src/ui/components/icon-button.css @ 37d6096b450cb33dfe9d7112e9d4ff75975d20b2. Do not edit; run npm run sync-styles. */\n[data-component=\"icon-button\"] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-sm);\n  text-decoration: none;\n  user-select: none;\n  aspect-ratio: 1;\n  flex-shrink: 0;\n\n  &[data-variant=\"primary\"] {\n    background-color: var(--icon-strong-base);\n\n    [data-slot=\"icon-svg\"] {\n      /* color: var(--icon-weak-base); */\n      color: var(--icon-invert-base);\n\n      /* &:hover:not(:disabled) { */\n      /*   color: var(--icon-weak-hover); */\n      /* } */\n      /* &:active:not(:disabled) { */\n      /*   color: var(--icon-strong-active); */\n      /* } */\n    }\n\n    @media (hover: hover) {\n      &:hover:not(:disabled) {\n        background-color: var(--icon-strong-hover);\n      }\n    }\n    &:focus:not(:disabled) {\n      background-color: var(--icon-strong-focus);\n    }\n    &:active:not(:disabled) {\n      background-color: var(--icon-strong-active);\n    }\n    &:disabled {\n      background-color: var(--icon-strong-disabled);\n\n      [data-slot=\"icon-svg\"] {\n        color: var(--icon-invert-base);\n      }\n    }\n  }\n\n  &[data-variant=\"secondary\"] {\n    border: transparent;\n    background-color: var(--button-secondary-base);\n    color: var(--text-strong);\n    box-shadow: var(--shadow-xs-border-base);\n\n    @media (hover: hover) {\n      &:hover:not(:disabled) {\n        background-color: var(--button-secondary-hover);\n      }\n    }\n    &:focus:not(:disabled) {\n      background-color: var(--button-secondary-base);\n    }\n    &:focus-visible:not(:active) {\n      background-color: var(--button-secondary-base);\n      box-shadow: var(--shadow-xs-border-focus);\n    }\n    &:focus-visible:active {\n      box-shadow: none;\n    }\n    &:active:not(:disabled) {\n      background-color: var(--button-secondary-base);\n    }\n\n    [data-slot=\"icon-svg\"] {\n      color: var(--icon-strong-base);\n    }\n\n    &:disabled {\n      background-color: var(--icon-strong-disabled);\n      color: var(--icon-invert-base);\n      cursor: not-allowed;\n    }\n  }\n\n  &[data-variant=\"ghost\"] {\n    background-color: transparent;\n    /* color: var(--icon-base); */\n\n    [data-slot=\"icon-svg\"] {\n      color: var(--icon-base);\n    }\n\n    @media (hover: hover) {\n      &:hover:not(:disabled) {\n        background-color: var(--surface-base-hover);\n\n        /* [data-slot=\"icon-svg\"] { */\n        /*   color: var(--icon-hover); */\n        /* } */\n      }\n    }\n    &:focus-visible:not(:disabled) {\n      background-color: var(--surface-base-hover);\n    }\n    &:active:not(:disabled) {\n      background-color: var(--surface-base-active);\n      /* [data-slot=\"icon-svg\"] { */\n      /*   color: var(--icon-active); */\n      /* } */\n    }\n    &:selected:not(:disabled) {\n      background-color: var(--surface-base-active);\n      /* [data-slot=\"icon-svg\"] { */\n      /*   color: var(--icon-selected); */\n      /* } */\n    }\n    &:disabled {\n      color: var(--icon-invert-base);\n      cursor: not-allowed;\n    }\n  }\n\n  &[data-size=\"normal\"] {\n    width: 24px;\n    height: 24px;\n\n    font-size: var(--font-size-small);\n    line-height: var(--line-height-large);\n    gap: calc(var(--spacing) * 0.5);\n  }\n\n  &[data-size=\"small\"] {\n    width: 20px;\n    height: 20px;\n  }\n\n  &[data-size=\"large\"] {\n    height: 32px;\n    /* padding: 0 8px 0 6px; */\n    gap: 8px;\n\n    /* text-12-medium */\n    font-family: var(--font-family-sans);\n    font-size: var(--font-size-small);\n    font-style: normal;\n    font-weight: var(--font-weight-medium);\n    line-height: var(--line-height-large); /* 166.667% */\n    letter-spacing: var(--letter-spacing-normal);\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  [data-component=\"icon-button\"][data-icon=\"stop\"] [data-slot=\"icon-svg\"] rect {\n    transform-origin: center;\n    transform-box: fill-box;\n    animation: stop-pulse 1.8s ease-in-out infinite;\n  }\n}\n\n@keyframes stop-pulse {\n  0%,\n  100% {\n    transform: scale(0.95);\n  }\n  50% {\n    transform: scale(1.12);\n  }\n}\n\n[data-component=\"icon-button\"].titlebar-icon {\n  width: 32px;\n  height: 24px;\n  aspect-ratio: auto;\n}\n\n[data-component=\"icon-button\"].titlebar-icon[data-variant=\"ghost\"][aria-expanded=\"true\"] {\n  background-color: var(--surface-raised-base-active);\n}\n\n[data-component=\"icon-button\"].titlebar-icon[data-variant=\"ghost\"][aria-expanded=\"true\"] [data-slot=\"icon-svg\"] {\n  color: var(--icon-strong-base);\n}\n\n@media (hover: hover) {\n  [data-component=\"icon-button\"].titlebar-icon[data-variant=\"ghost\"][aria-expanded=\"true\"]:hover:not(:disabled) {\n    background-color: var(--surface-raised-base-active);\n  }\n}\n",
-	"/* Synced from Mux frontend/src/ui/components/spinner.css @ 37d6096b450cb33dfe9d7112e9d4ff75975d20b2. Do not edit; run npm run sync-styles. */\n[data-component=\"spinner\"] {\n  color: inherit;\n  flex-shrink: 0;\n  width: 18px;\n  aspect-ratio: 1;\n}\n",
-	"/* Synced from Mux frontend/src/ui/components/collapsible.css @ 37d6096b450cb33dfe9d7112e9d4ff75975d20b2. Do not edit; run npm run sync-styles. */\n[data-slot=\"collapsible-collapse\"] {\n  min-height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  [data-component=\"icon-button\"] {\n    width: 28px;\n    height: 28px;\n\n    [data-slot=\"icon-svg\"] {\n      transform: rotate(180deg);\n    }\n  }\n}\n\n[data-component=\"collapsible\"] {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  background-color: transparent;\n  border: none;\n  transition: background-color 0.15s ease;\n  border-radius: var(--radius-md);\n  overflow: visible;\n\n  &.tool-collapsible {\n    gap: 8px;\n  }\n\n  [data-slot=\"collapsible-trigger\"]:has(\n    > [data-layout=\"activity-row\"]\n  ) {\n    min-height: 28px;\n    height: auto;\n  }\n\n  [data-slot=\"collapsible-trigger\"] {\n    width: 100%;\n    display: flex;\n    height: 32px;\n    padding: 0;\n    align-items: center;\n    align-self: stretch;\n    cursor: default;\n    user-select: none;\n    color: var(--text-base);\n    /* Triggers render as <button>, which still defaults to centered text. */\n    text-align: start;\n\n    [data-slot=\"collapsible-arrow\"] {\n      opacity: 0;\n      transition: opacity 0.15s ease;\n      will-change: opacity;\n      transform: translateZ(0);\n    }\n\n    [data-slot=\"collapsible-arrow-icon\"] {\n      display: inline-flex;\n      color: var(--icon-weaker);\n      transform: translateZ(0) rotate(-90deg);\n      transition: transform 0.15s ease;\n      will-change: transform;\n    }\n\n    &:hover [data-slot=\"collapsible-arrow\"] {\n      opacity: 1;\n    }\n\n    /* text-12-medium */\n    font-family: var(--font-family-sans);\n    font-size: var(--font-size-small);\n    font-style: normal;\n    font-weight: var(--font-weight-medium);\n    line-height: var(--line-height-large); /* 166.667% */\n    letter-spacing: var(--letter-spacing-normal);\n\n    /* &:hover { */\n    /*   background-color: var(--surface-base); */\n    /* } */\n    &:focus-visible {\n      outline: none;\n      background-color: var(--surface-raised-base-hover);\n    }\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n\n    [data-slot=\"collapsible-arrow\"] {\n      flex-shrink: 0;\n      width: 24px;\n      height: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      &[data-size=\"compact\"] {\n        width: 16px;\n        height: 16px;\n      }\n    }\n  }\n\n  [data-slot=\"collapsible-trigger\"][aria-expanded=\"true\"] {\n    [data-slot=\"collapsible-arrow\"] {\n      opacity: 1;\n    }\n\n    [data-slot=\"collapsible-arrow-icon\"] {\n      transform: translateZ(0) rotate(0deg);\n    }\n  }\n\n  [data-slot=\"collapsible-content\"] {\n    overflow: hidden;\n\n    &[data-expanded] {\n      overflow: visible;\n    }\n  }\n\n  &[data-variant=\"ghost\"] {\n    background-color: transparent;\n    border: none;\n\n    > [data-slot=\"collapsible-trigger\"] {\n      background-color: transparent;\n      border: none;\n      padding: 0;\n\n      /* &:hover { */\n      /*   color: var(--text-strong); */\n      /* } */\n      &:focus-visible {\n        outline: none;\n        background-color: var(--surface-raised-base-hover);\n      }\n      &[data-disabled] {\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  &[data-variant=\"ghost\"][data-scope=\"filetree\"] {\n    > [data-slot=\"collapsible-trigger\"] {\n      height: 24px;\n    }\n  }\n}\n",
-	"/* Synced from Mux frontend/src/ui/components/basic-tool.css @ 37d6096b450cb33dfe9d7112e9d4ff75975d20b2. Do not edit; run npm run sync-styles. */\n/* [data-component=\"tool-trigger\"] {\n  content-visibility: auto;\n} */\n[data-component=\"tool-trigger\"][data-layout=\"activity-row\"] {\n  width: fit-content;\n  max-width: 100%;\n  min-width: 0;\n  display: grid;\n  grid-template-columns: var(--activity-label-width) minmax(0, auto) auto auto;\n  column-gap: 8px;\n  align-items: baseline;\n  justify-content: start;\n\n  [data-slot=\"basic-tool-tool-trigger-content\"],\n  [data-slot=\"basic-tool-tool-info\"],\n  [data-slot=\"basic-tool-tool-info-structured\"],\n  [data-slot=\"basic-tool-tool-info-main\"] {\n    display: contents;\n  }\n\n  [data-slot=\"basic-tool-tool-title\"] {\n    grid-column: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  [data-slot=\"basic-tool-tool-detail\"] {\n    grid-column: 2;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n  }\n\n  [data-slot=\"basic-tool-tool-action\"],\n  [data-component=\"tool-action\"] {\n    grid-column: 3;\n  }\n\n  > [data-slot=\"collapsible-arrow\"] {\n    grid-column: 3;\n    align-self: center;\n  }\n\n  &:has([data-slot=\"basic-tool-tool-action\"], [data-component=\"tool-action\"])\n    > [data-slot=\"collapsible-arrow\"] {\n    grid-column: 4;\n  }\n\n  [data-slot=\"basic-tool-tool-indicator\"] {\n    width: 16px;\n    height: 16px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n\n    [data-component=\"spinner\"] {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n  [data-slot=\"basic-tool-tool-spinner\"] {\n    width: 16px;\n    height: 16px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    color: var(--text-weak);\n\n    [data-component=\"spinner\"] {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n  [data-slot=\"icon-svg\"] {\n    flex-shrink: 0;\n  }\n\n  [data-slot=\"basic-tool-tool-info\"] {\n    display: contents;\n    font-size: var(--font-size-base);\n  }\n\n  [data-slot=\"basic-tool-tool-info-structured\"],\n  [data-slot=\"basic-tool-tool-info-main\"] {\n    display: contents;\n  }\n\n  [data-slot=\"basic-tool-tool-title\"] {\n    flex-shrink: 0;\n    font-family: var(--font-family-sans);\n    font-size: var(--font-size-base);\n    font-style: normal;\n    font-weight: var(--font-weight-medium);\n    line-height: var(--line-height-large);\n    letter-spacing: var(--letter-spacing-normal);\n    color: var(--text-strong);\n\n    &.capitalize {\n      text-transform: capitalize;\n    }\n\n    &.agent-title {\n      color: var(--text-strong);\n      font-weight: var(--font-weight-medium);\n    }\n  }\n\n  [data-slot=\"basic-tool-tool-detail\"] {\n    display: block;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    direction: ltr;\n    unicode-bidi: isolate;\n\n    > :not(:first-child) {\n      margin-left: 8px;\n    }\n  }\n\n  [data-slot=\"basic-tool-tool-subtitle\"] {\n    min-width: 0;\n    font-family: var(--font-family-sans);\n    font-variant-numeric: tabular-nums;\n    font-size: var(--font-size-base);\n    font-style: normal;\n    font-weight: var(--font-weight-regular);\n    line-height: var(--line-height-large);\n    letter-spacing: var(--letter-spacing-normal);\n    color: var(--text-base);\n\n    &.webfetch-url {\n      display: block;\n      max-width: 100%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      font-size: var(--font-size-small);\n    }\n\n    &.clickable {\n      cursor: pointer;\n      text-decoration: underline;\n      transition: color 0.15s ease;\n\n      &:hover {\n        color: var(--text-base);\n      }\n    }\n  }\n\n  [data-slot=\"basic-tool-tool-arg\"] {\n    flex-shrink: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-family: var(--font-family-sans);\n    font-variant-numeric: tabular-nums;\n    font-size: var(--font-size-base);\n    font-style: normal;\n    font-weight: var(--font-weight-regular);\n    line-height: var(--line-height-large);\n    letter-spacing: var(--letter-spacing-normal);\n    color: var(--text-base);\n  }\n\n  [data-slot=\"basic-tool-tool-action\"] {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n}\n\n/* Consecutive tool rows sit flush; a delegation card needs its own breathing room.\n   Cards stop short of the full prose width so two short lines are not boxed\n   inside a mostly empty frame. */\n[data-component=\"task-supervision\"] {\n  width: 100%;\n  max-width: 40rem;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding-block: 4px;\n}\n\n[data-component=\"task-tool-card\"] {\n  width: 100%;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  border-radius: 6px;\n  border: 1px solid var(--border-weak-base, rgba(255, 255, 255, 0.08));\n  background: color-mix(in srgb, var(--background-base) 92%, transparent);\n  transition:\n    border-color 0.15s ease,\n    background-color 0.15s ease,\n    color 0.15s ease;\n\n  [data-slot=\"task-tool-body\"] {\n    flex: 1 1 auto;\n    min-width: 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    border-radius: inherit;\n    color: inherit;\n    text-decoration: none;\n  }\n\n  a[data-slot=\"task-tool-body\"] {\n    cursor: pointer;\n  }\n\n  [data-slot=\"task-tool-info\"] {\n    flex: 1 1 auto;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n  }\n\n  [data-slot=\"task-tool-heading\"] {\n    min-width: 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-family: var(--font-family-sans);\n    font-size: var(--font-size-base);\n    line-height: var(--line-height-large);\n    letter-spacing: var(--letter-spacing-normal);\n  }\n\n  [data-slot=\"task-tool-description\"] {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--text-strong);\n    font-weight: var(--font-weight-regular);\n  }\n\n  [data-slot=\"task-tool-meta\"] {\n    min-width: 0;\n    display: flex;\n    align-items: baseline;\n    white-space: nowrap;\n    font-family: var(--font-family-sans);\n    font-size: var(--font-size-small);\n    line-height: var(--line-height-large);\n    color: var(--text-weak);\n\n    > * {\n      flex-shrink: 0;\n    }\n\n    > * + *::before {\n      content: \"·\";\n      margin-inline: 6px;\n      color: var(--text-weaker);\n    }\n\n    /* The model label is last and gives way on narrow layouts. */\n    > :last-child:not(:first-child) {\n      flex-shrink: 1;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  [data-slot=\"task-tool-state\"]:is([data-state=\"pending\"], [data-state=\"queued\"], [data-state=\"running\"]) {\n    color: var(--text-interactive-base);\n  }\n\n  [data-slot=\"task-tool-state\"][data-state=\"error\"] {\n    color: var(--text-danger-base);\n  }\n\n  [data-component=\"task-tool-spinner\"] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n\n    [data-component=\"spinner\"] {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n  [data-component=\"task-tool-action\"] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    color: var(--icon-weak);\n    opacity: 0;\n    transition:\n      opacity 0.15s ease,\n      color 0.15s ease;\n  }\n\n  [data-component=\"task-tool-title\"] {\n    flex-shrink: 0;\n    font-weight: var(--font-weight-medium);\n    text-transform: capitalize;\n  }\n\n  > [data-component=\"button\"] {\n    flex-shrink: 0;\n    margin-inline-end: 8px;\n  }\n\n  &:hover,\n  &:focus-within {\n    background: color-mix(in srgb, var(--background-stronger) 88%, transparent);\n\n    [data-component=\"task-tool-action\"] {\n      opacity: 1;\n    }\n  }\n\n  @media (hover: none) {\n    [data-component=\"task-tool-action\"] {\n      opacity: 1;\n    }\n  }\n}\n\n[data-component=\"task-supervision\"] > [data-slot=\"task-tool-failure\"] {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 3;\n  overflow: hidden;\n  padding-inline: 12px;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  font-size: var(--font-size-small);\n  line-height: var(--line-height-large);\n  color: var(--text-base);\n}\n\n[data-component=\"task-supervision\"] > [data-slot=\"task-tool-status-error\"] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding-inline: 12px;\n  font-size: var(--font-size-small);\n  line-height: var(--line-height-large);\n  color: var(--text-weak);\n}\n",
-	"/* Synced from Mux frontend/src/ui/components/text-shimmer.css @ 37d6096b450cb33dfe9d7112e9d4ff75975d20b2. Do not edit; run npm run sync-styles. */\n[data-component=\"text-shimmer\"] {\n  --text-shimmer-step: 45ms;\n  --text-shimmer-duration: 1200ms;\n  --text-shimmer-swap: 220ms;\n  --text-shimmer-index: 0;\n  --text-shimmer-angle: 90deg;\n  --text-shimmer-spread: 5.2ch;\n  --text-shimmer-size: 360%;\n  --text-shimmer-base-color: var(--text-weak);\n  --text-shimmer-peak-color: var(--text-strong);\n  --text-shimmer-sweep: linear-gradient(\n    var(--text-shimmer-angle),\n    transparent calc(50% - var(--text-shimmer-spread)),\n    var(--text-shimmer-peak-color) 50%,\n    transparent calc(50% + var(--text-shimmer-spread))\n  );\n  --text-shimmer-base: linear-gradient(var(--text-shimmer-base-color), var(--text-shimmer-base-color));\n\n  display: inline-flex;\n  align-items: baseline;\n  font: inherit;\n  letter-spacing: inherit;\n  line-height: inherit;\n}\n\n[data-component=\"text-shimmer\"] [data-slot=\"text-shimmer-char\"] {\n  display: inline-grid;\n  white-space: pre;\n  font: inherit;\n  letter-spacing: inherit;\n  line-height: inherit;\n}\n\n[data-component=\"text-shimmer\"] [data-slot=\"text-shimmer-char-base\"],\n[data-component=\"text-shimmer\"] [data-slot=\"text-shimmer-char-shimmer\"] {\n  grid-area: 1 / 1;\n  white-space: pre;\n  transition: opacity var(--text-shimmer-swap) ease-out;\n  font: inherit;\n  letter-spacing: inherit;\n  line-height: inherit;\n}\n\n[data-component=\"text-shimmer\"] [data-slot=\"text-shimmer-char-base\"] {\n  color: inherit;\n  opacity: 1;\n}\n\n[data-component=\"text-shimmer\"] [data-slot=\"text-shimmer-char-shimmer\"] {\n  color: var(--text-weaker);\n  opacity: 0;\n}\n\n[data-component=\"text-shimmer\"][data-active=\"true\"] [data-slot=\"text-shimmer-char-shimmer\"] {\n  opacity: 1;\n}\n\n[data-component=\"text-shimmer\"] [data-slot=\"text-shimmer-char-shimmer\"][data-run=\"true\"] {\n  animation-name: text-shimmer-sweep;\n  animation-duration: var(--text-shimmer-duration);\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  animation-fill-mode: both;\n  animation-delay: calc(var(--text-shimmer-step) * var(--text-shimmer-index) * -1);\n  will-change: background-position;\n}\n\n@keyframes text-shimmer-sweep {\n  0% {\n    background-position:\n      100% 0,\n      0 0;\n  }\n\n  100% {\n    background-position:\n      0% 0,\n      0 0;\n  }\n}\n\n@supports ((-webkit-background-clip: text) or (background-clip: text)) {\n  [data-component=\"text-shimmer\"] [data-slot=\"text-shimmer-char-shimmer\"] {\n    color: transparent;\n    -webkit-text-fill-color: transparent;\n    background-image: var(--text-shimmer-sweep), var(--text-shimmer-base);\n    background-size:\n      var(--text-shimmer-size) 100%,\n      100% 100%;\n    background-position:\n      100% 0,\n      0 0;\n    background-repeat: no-repeat;\n    -webkit-background-clip: text;\n    background-clip: text;\n  }\n\n  [data-component=\"text-shimmer\"][data-active=\"true\"] [data-slot=\"text-shimmer-char-base\"] {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-component=\"text-shimmer\"] [data-slot=\"text-shimmer-char-base\"],\n  [data-component=\"text-shimmer\"] [data-slot=\"text-shimmer-char-shimmer\"] {\n    transition-duration: 0ms;\n  }\n\n  [data-component=\"text-shimmer\"] [data-slot=\"text-shimmer-char-shimmer\"] {\n    animation: none !important;\n    color: inherit;\n    -webkit-text-fill-color: currentColor;\n    background-image: none;\n  }\n\n  [data-component=\"text-shimmer\"] [data-slot=\"text-shimmer-char-base\"] {\n    opacity: 1 !important;\n  }\n}\n",
-	"/* Synced from Mux frontend/src/ui/components/tool-status-title.css @ 37d6096b450cb33dfe9d7112e9d4ff75975d20b2. Do not edit; run npm run sync-styles. */\n[data-component=\"tool-status-title\"] {\n  display: inline-flex;\n  align-items: baseline;\n  white-space: nowrap;\n  text-align: start;\n\n  [data-slot=\"tool-status-suffix\"] {\n    display: inline-flex;\n    align-items: baseline;\n    white-space: nowrap;\n  }\n\n  [data-slot=\"tool-status-prefix\"] {\n    white-space: nowrap;\n    flex-shrink: 0;\n  }\n\n  [data-slot=\"tool-status-swap\"],\n  [data-slot=\"tool-status-tail\"] {\n    display: inline-grid;\n    overflow: hidden;\n    justify-items: start;\n    transition: width var(--tool-motion-spring-ms, 480ms) var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));\n  }\n\n  [data-slot=\"tool-status-active\"],\n  [data-slot=\"tool-status-done\"] {\n    grid-area: 1 / 1;\n    white-space: nowrap;\n    justify-self: start;\n    text-align: start;\n    transition-property: opacity, filter, transform;\n    transition-duration:\n      var(--tool-motion-fade-ms, 240ms), calc(var(--tool-motion-fade-ms, 240ms) * 0.8),\n      calc(var(--tool-motion-fade-ms, 240ms) * 0.8);\n    transition-timing-function: ease-out, ease-out, ease-out;\n  }\n\n  &[data-ready=\"false\"] {\n    [data-slot=\"tool-status-swap\"],\n    [data-slot=\"tool-status-tail\"] {\n      transition-duration: 0ms;\n    }\n\n    [data-slot=\"tool-status-active\"],\n    [data-slot=\"tool-status-done\"] {\n      transition-duration: 0ms;\n    }\n  }\n\n  [data-slot=\"tool-status-active\"] {\n    opacity: 0;\n    filter: blur(calc(var(--tool-motion-blur, 2px) * 0.45));\n    transform: translateY(0.03em);\n  }\n\n  [data-slot=\"tool-status-done\"] {\n    color: var(--text-strong);\n    opacity: 1;\n    filter: blur(0);\n    transform: translateY(0);\n  }\n\n  &[data-active=\"true\"] {\n    [data-slot=\"tool-status-active\"] {\n      opacity: 1;\n      filter: blur(0);\n      transform: translateY(0);\n    }\n\n    [data-slot=\"tool-status-done\"] {\n      opacity: 0;\n      filter: blur(calc(var(--tool-motion-blur, 2px) * 0.45));\n      transform: translateY(0.03em);\n    }\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-component=\"tool-status-title\"] [data-slot=\"tool-status-swap\"],\n  [data-component=\"tool-status-title\"] [data-slot=\"tool-status-tail\"] {\n    transition-duration: 0ms;\n  }\n\n  [data-component=\"tool-status-title\"] [data-slot=\"tool-status-active\"],\n  [data-component=\"tool-status-title\"] [data-slot=\"tool-status-done\"] {\n    transition-duration: 0ms;\n  }\n}\n",
-	"/* Synced from Mux frontend/src/ui/components/dock-surface.css @ 37d6096b450cb33dfe9d7112e9d4ff75975d20b2. Do not edit; run npm run sync-styles. */\n[data-dock-surface=\"shell\"] {\n  background-color: var(--surface-raised-stronger-non-alpha);\n  box-shadow: var(--shadow-xs-border);\n  position: relative;\n  z-index: 10;\n  border-radius: 12px;\n  overflow: clip;\n}\n\n[data-dock-surface=\"tray\"] {\n  background-color: var(--background-base);\n  border: 1px solid var(--border-weak-base);\n  position: relative;\n  z-index: 0;\n  border-radius: 12px;\n  overflow: clip;\n}\n\n[data-dock-surface=\"tray\"][data-dock-attach=\"top\"] {\n  margin-top: -0.875rem;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n",
-	"/* Synced from Mux frontend/src/ui/components/markdown.css @ 37d6096b450cb33dfe9d7112e9d4ff75975d20b2. Do not edit; run npm run sync-styles. */\n[data-component=\"markdown\"] {\n  /* Reset & Base Typography */\n  min-width: 0;\n  max-width: 100%;\n  overflow-wrap: break-word;\n  color: var(--text-strong);\n  font-family: var(--font-family-sans);\n  font-size: var(--markdown-font-size, var(--font-size-base));\n  line-height: 160%;\n  /* Contain outer margins, but let margins collapse across streaming wrappers. */\n  display: flow-root;\n\n  /* Spacing for flow */\n  > *:first-child,\n  > [data-markdown-block]:first-child > *:first-child {\n    margin-top: 0;\n  }\n  > *:last-child,\n  > [data-markdown-block]:last-child > *:last-child {\n    margin-bottom: 0;\n  }\n\n  /* Headings: Same size, distinguished by color and spacing */\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-size: var(--markdown-font-size, var(--font-size-base));\n    color: var(--text-strong);\n    font-weight: var(--font-weight-medium);\n    margin-top: 1.5rem;\n    margin-bottom: 0.5rem;\n    line-height: var(--line-height-large);\n  }\n\n  /* Emphasis & Strong: Neutral strong color */\n  strong,\n  b {\n    color: var(--text-strong);\n    font-weight: var(--font-weight-medium);\n  }\n\n  /* Paragraphs */\n  p {\n    margin-bottom: 0.75rem;\n  }\n\n  /* Links */\n  a {\n    color: var(--text-interactive-base);\n    text-decoration: none;\n    font-weight: inherit;\n  }\n\n  a:hover {\n    text-decoration: underline;\n    text-underline-offset: 2px;\n  }\n\n  /* Lists */\n  ul,\n  ol {\n    margin-top: 0.5rem;\n    margin-bottom: 0.75rem;\n    margin-left: 0;\n    padding-left: 1.5rem;\n    list-style-position: outside;\n  }\n\n  ul {\n    list-style-type: disc;\n  }\n\n  ol {\n    list-style-type: decimal;\n    padding-left: 2.25rem;\n  }\n\n  li {\n    margin-bottom: 0.5rem;\n  }\n\n  li > p:first-child {\n    display: inline;\n    margin: 0;\n  }\n\n  li > p + p {\n    display: block;\n    margin-top: 0.5rem;\n  }\n\n  li::marker {\n    color: var(--text-weak);\n  }\n\n  /* Nested lists spacing */\n  li > ul,\n  li > ol {\n    margin-top: 0.25rem;\n    margin-bottom: 0.25rem;\n    padding-left: 1rem; /* Minimal indent for nesting only */\n  }\n\n  li > ol {\n    padding-left: 1.75rem;\n  }\n\n  /* Blockquotes */\n  blockquote {\n    border-left: 2px solid var(--border-weak-base);\n    margin: 1rem 0;\n    padding-left: 0.5rem;\n    color: var(--text-weak);\n    font-style: normal;\n  }\n\n  /* Horizontal Rule - Invisible spacing only */\n  hr {\n    border: none;\n    height: 0;\n    margin: 2rem 0;\n  }\n\n  .shiki,\n  .markdown-code-pending {\n    font-size: var(--markdown-font-size, 13px);\n    line-height: 1.5;\n    padding: 8px 12px;\n    border-radius: 6px;\n    border: 0.5px solid var(--border-weak-base);\n    background: var(--surface-raised-base);\n  }\n\n  .markdown-code-pending code {\n    font-family: var(--font-family-mono);\n    font-feature-settings: var(--font-family-mono--font-feature-settings);\n  }\n\n  [data-component=\"markdown-code\"] {\n    position: relative;\n\n    [data-slot=\"markdown-copy-button\"] {\n      position: absolute;\n      right: 4px;\n      z-index: 10;\n\n      &[data-position=\"top\"] {\n        top: 4px;\n      }\n\n      &[data-position=\"bottom\"] {\n        bottom: 4px;\n      }\n    }\n  }\n\n  [data-slot=\"markdown-copy-button\"] {\n    opacity: 0;\n    transition: opacity 0.15s ease;\n\n    &::after {\n      content: attr(data-tooltip);\n      position: absolute;\n      left: 50%;\n      bottom: calc(100% + 4px);\n      transform: translateX(-50%);\n      z-index: 1000;\n\n      max-width: 320px;\n      border-radius: var(--radius-sm);\n      background: var(--surface-float-base);\n      color: var(--text-invert-strong);\n      padding: 2px 8px;\n      border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));\n      box-shadow: var(--shadow-md);\n\n      pointer-events: none;\n      white-space: nowrap;\n\n      font-family: var(--font-family-sans);\n      font-size: var(--font-size-small);\n      font-style: normal;\n      font-weight: var(--font-weight-medium);\n      line-height: var(--line-height-large);\n      letter-spacing: var(--letter-spacing-normal);\n\n      opacity: 0;\n      transition: opacity 0.15s ease;\n    }\n  }\n\n  [data-slot=\"markdown-copy-button\"]:hover::after,\n  [data-slot=\"markdown-copy-button\"]:focus-visible::after {\n    opacity: 1;\n  }\n\n  [data-slot=\"markdown-copy-button\"][data-variant=\"secondary\"] {\n    box-shadow: none;\n    border: 1px solid var(--border-weak-base);\n  }\n\n  [data-slot=\"markdown-copy-button\"][data-variant=\"secondary\"] [data-slot=\"icon-svg\"] {\n    color: var(--icon-base);\n  }\n\n  [data-component=\"markdown-code\"]:hover [data-slot=\"markdown-copy-button\"],\n  [data-component=\"file-viewer\"]:hover [data-slot=\"markdown-copy-button\"] {\n    opacity: 1;\n  }\n\n  [data-slot=\"markdown-copy-button\"] [data-slot=\"check-icon\"] {\n    display: none;\n  }\n\n  [data-slot=\"markdown-copy-button\"][data-copied=\"true\"] [data-slot=\"copy-icon\"] {\n    display: none;\n  }\n\n  [data-slot=\"markdown-copy-button\"][data-copied=\"true\"] [data-slot=\"check-icon\"] {\n    display: inline-flex;\n  }\n\n  pre {\n    margin-top: 0.75rem;\n    margin-bottom: 1.5rem;\n    overflow: auto;\n\n    &[data-wrap=\"true\"] {\n      white-space: pre-wrap;\n      overflow-wrap: anywhere;\n      overflow-x: hidden;\n    }\n\n    &[data-wrap=\"true\"] code,\n    &[data-wrap=\"true\"] .line {\n      white-space: inherit;\n    }\n\n    scrollbar-width: none;\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  :not(pre) > code {\n    font-family: var(--font-family-mono);\n    font-feature-settings: var(--font-family-mono--font-feature-settings);\n    color: var(--syntax-string);\n    font-weight: var(--font-weight-medium);\n    /* font-size: 13px; */\n\n    /* padding: 2px 2px; */\n    /* margin: 0 1.5px; */\n    /* border-radius: 2px; */\n    /* background: var(--surface-base); */\n    /* box-shadow: 0 0 0 0.5px var(--border-weak-base); */\n  }\n\n  /* Tables */\n  table {\n    width: 100%;\n    border-collapse: collapse;\n    margin: 1.5rem 0;\n    font-size: var(--markdown-font-size, var(--font-size-base));\n    display: block;\n    overflow-x: auto;\n  }\n\n  th,\n  td {\n    /* Minimal borders for structure, matching TUI \"lines\" roughly but keeping it web-clean */\n    border-bottom: 1px solid var(--border-weaker-base);\n    padding: 0.75rem 0.5rem;\n    text-align: left;\n    vertical-align: top;\n  }\n\n  th {\n    color: var(--text-strong);\n    font-weight: var(--font-weight-medium);\n    border-bottom: 1px solid var(--border-weak-base);\n  }\n\n  /* Images */\n  img {\n    max-width: 100%;\n    height: auto;\n    border-radius: 4px;\n    margin: 1.5rem 0;\n    display: block;\n  }\n\n  [data-component=\"mermaid\"] {\n    margin: 2rem 0;\n    overflow: auto;\n    border: 0.5px solid var(--border-weak-base);\n    border-radius: 6px;\n    background: var(--surface-raised-base);\n    padding: 16px;\n\n    svg {\n      display: block;\n      width: 100%;\n      min-width: 320px;\n      height: auto;\n      margin: 0 auto;\n    }\n  }\n\n  pre[data-mermaid-status=\"error\"]::after {\n    content: attr(data-mermaid-error);\n    display: block;\n    margin-top: 8px;\n    color: var(--text-weak);\n    font-family: var(--font-family-sans);\n    font-size: 12px;\n    white-space: normal;\n  }\n}\n\n[data-component=\"markdown\"] a.external-link:hover > code {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n",
-	"/* Synced from Mux frontend/src/pages/session/transcript/renderers/message-part.css @ 37d6096b450cb33dfe9d7112e9d4ff75975d20b2. Do not edit; run npm run sync-styles. */\n/* [data-component=\"assistant-message\"] {\n  content-visibility: auto;\n} */\n[data-component=\"assistant-message\"] {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 12px;\n\n  [data-slot=\"assistant-message-actions\"] {\n    min-height: 24px;\n    display: flex;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.15s ease;\n    will-change: opacity;\n  }\n\n  &:hover [data-slot=\"assistant-message-actions\"],\n  &:focus-within [data-slot=\"assistant-message-actions\"] {\n    opacity: 1;\n    pointer-events: auto;\n  }\n}\n\n[data-component=\"user-message\"] {\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-base);\n  font-style: normal;\n  font-weight: var(--font-weight-regular);\n  line-height: var(--line-height-large);\n  letter-spacing: var(--letter-spacing-normal);\n  color: var(--text-strong);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  align-self: stretch;\n  width: 100%;\n  max-width: 100%;\n  gap: 0;\n\n  [data-slot=\"user-message-attachments\"] {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    gap: 8px;\n    width: fit-content;\n    max-width: min(82%, 64ch);\n    margin-left: auto;\n  }\n\n  [data-slot=\"user-message-attachment\"] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    min-width: 0;\n    border-radius: 6px;\n    overflow: hidden;\n    background: var(--surface-weak);\n    border: 1px solid var(--border-weak-base);\n    cursor: default;\n    transition:\n      border-color 0.15s ease,\n      opacity 0.3s ease;\n\n    &:hover {\n      border-color: var(--border-strong-base);\n    }\n\n    &[data-clickable] {\n      cursor: pointer;\n    }\n\n    &[data-type=\"image\"] {\n      width: 48px;\n      height: 48px;\n    }\n\n    &[data-type=\"file\"] {\n      width: min(220px, 100%);\n      height: 48px;\n      padding: 0 10px;\n    }\n  }\n\n  [data-slot=\"user-message-attachment-image\"] {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  [data-slot=\"user-message-attachment-file\"] {\n    width: 100%;\n    min-width: 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    [data-component=\"file-icon\"] {\n      width: 20px;\n      height: 20px;\n      flex: none;\n    }\n  }\n\n  [data-slot=\"user-message-attachment-name\"] {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--text-base);\n    font-size: var(--font-size-small);\n    line-height: var(--line-height-large);\n  }\n\n  [data-slot=\"user-message-body\"] {\n    width: fit-content;\n    max-width: min(82%, 64ch);\n    margin-left: auto;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n  }\n\n  [data-slot=\"user-message-attachments\"] + [data-slot=\"user-message-body\"] {\n    margin-top: 8px;\n  }\n\n  [data-slot=\"user-message-text\"] {\n    display: inline-block;\n    white-space: pre-wrap;\n    word-break: break-word;\n    overflow: hidden;\n    background: color-mix(in srgb, var(--surface-weak) 65%, transparent);\n    border: 1px solid transparent;\n    padding: 8px 12px;\n    border-radius: 12px;\n\n    [data-highlight=\"file\"] {\n      color: var(--syntax-property);\n    }\n\n    [data-highlight=\"agent\"] {\n      color: var(--syntax-type);\n    }\n\n    max-width: 100%;\n  }\n\n  [data-slot=\"user-message-copy-wrapper\"] {\n    min-height: 24px;\n    margin-top: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 10px;\n    width: 100%;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.15s ease;\n    will-change: opacity;\n\n    [data-component=\"tooltip-trigger\"] {\n      display: inline-flex;\n      width: fit-content;\n    }\n  }\n\n  [data-slot=\"user-message-meta\"] {\n    user-select: none;\n    text-align: right;\n    flex: 0 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  [data-slot=\"user-message-meta-wrap\"] {\n    flex: 1 1 auto;\n    min-width: 0;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    overflow: hidden;\n    gap: 0;\n  }\n\n  [data-slot=\"user-message-meta-tail\"] {\n    user-select: none;\n    flex: 0 0 auto;\n    white-space: nowrap;\n    text-align: right;\n  }\n\n  &:hover [data-slot=\"user-message-copy-wrapper\"],\n  &:focus-within [data-slot=\"user-message-copy-wrapper\"] {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  .text-text-strong {\n    color: var(--text-strong);\n  }\n\n  .font-medium {\n    font-weight: var(--font-weight-medium);\n  }\n}\n\n[data-component=\"text-part\"] {\n  width: 100%;\n  margin-top: 24px;\n  container-type: inline-size;\n  container-name: text-part;\n\n  [data-slot=\"text-part-body\"] {\n    margin-top: 0;\n  }\n\n  [data-slot=\"text-part-copy-wrapper\"] {\n    display: none;\n    min-height: 24px;\n    margin-top: 4px;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 10px;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.15s ease;\n    will-change: opacity;\n\n    &[data-active] {\n      display: flex;\n    }\n\n    [data-component=\"tooltip-trigger\"] {\n      display: inline-flex;\n      width: fit-content;\n    }\n  }\n\n  [data-slot=\"text-part-meta\"] {\n    flex: 0 0 auto;\n    white-space: nowrap;\n    user-select: none;\n\n    > span {\n      flex: 0 0 auto;\n    }\n  }\n\n  [data-slot=\"text-part-copy-wrapper\"][data-interrupted] {\n    width: 100%;\n    justify-content: flex-end;\n    gap: 12px;\n  }\n\n  &:hover [data-slot=\"text-part-copy-wrapper\"],\n  &:focus-within [data-slot=\"text-part-copy-wrapper\"] {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  [data-component=\"markdown\"] {\n    margin-top: 0;\n  }\n}\n\n@container text-part (max-width: 44rem) {\n  [data-slot=\"text-part-copy-wrapper\"] {\n    gap: 8px;\n  }\n\n  [data-slot=\"text-part-meta\"] {\n    gap: 4px;\n    font-size: calc(var(--font-size-base) * 11 / 14);\n  }\n}\n\n@container text-part (max-width: 32rem) {\n  [data-slot=\"text-part-copy-wrapper\"] {\n    gap: 6px;\n  }\n\n  [data-slot=\"text-part-meta\"] {\n    gap: 3px;\n    font-size: calc(var(--font-size-base) * 10 / 14);\n  }\n}\n\n[data-component=\"compaction-part\"] {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n\n  [data-slot=\"compaction-part-divider\"] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 0;\n    width: 100%;\n  }\n\n  [data-slot=\"compaction-part-line\"] {\n    flex: 1 1 auto;\n    height: 1px;\n    background: var(--border-weak-base);\n  }\n\n  [data-slot=\"compaction-part-label\"] {\n    flex: 0 0 auto;\n    white-space: nowrap;\n    text-align: center;\n  }\n\n  [data-slot=\"compaction-part-toggle\"] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    min-height: 24px;\n    padding: 0 6px;\n    border-radius: var(--radius-md);\n    color: inherit;\n    cursor: pointer;\n    user-select: none;\n\n    &:hover,\n    &:focus-visible {\n      outline: none;\n      background-color: var(--surface-raised-base-hover);\n      color: var(--text-base);\n    }\n  }\n\n  [data-slot=\"compaction-part-summary\"] {\n    padding: 4px 0 8px;\n    color: var(--text-weak);\n  }\n}\n\n[data-component=\"reasoning-part\"] {\n  width: 100%;\n  color: var(--text-base);\n  line-height: var(--line-height-normal);\n\n  [data-component=\"markdown\"] {\n    margin-top: 24px;\n    font-style: normal;\n    color: var(--text-weak);\n\n    strong,\n    b {\n      color: var(--text-weak);\n    }\n\n    p:has(strong) {\n      margin-top: 24px;\n      margin-bottom: 0;\n\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-component=\"reasoning-part\"]\n    [data-component=\"markdown\"]\n    :not(pre)\n    > code {\n    opacity: 0.6;\n  }\n}\n\n[data-component=\"tool-output\"] {\n  white-space: pre;\n  padding: 0;\n  margin-bottom: 24px;\n  height: fit-content;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n\n  [data-component=\"markdown\"] {\n    width: 100%;\n    min-width: 0;\n\n    pre {\n      margin: 0;\n      padding: 0;\n      background-color: transparent !important;\n      border: none !important;\n    }\n  }\n\n  pre {\n    margin: 0;\n    padding: 0;\n    background: none;\n  }\n\n  &[data-scrollable] {\n    height: auto;\n    max-height: 240px;\n    overflow-y: auto;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n\n    [data-component=\"markdown\"] {\n      overflow: visible;\n    }\n  }\n}\n\n[data-component=\"bash-output\"] {\n  width: 100%;\n  border: 1px solid var(--border-weak-base);\n  border-radius: 6px;\n  background: transparent;\n  position: relative;\n  overflow: hidden;\n\n  [data-slot=\"bash-copy\"] {\n    position: absolute;\n    top: 4px;\n    right: 4px;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.15s ease;\n  }\n\n  &:hover [data-slot=\"bash-copy\"],\n  &:focus-within [data-slot=\"bash-copy\"] {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  [data-slot=\"bash-copy\"]\n    [data-component=\"icon-button\"][data-variant=\"secondary\"] {\n    box-shadow: none;\n    border: 1px solid var(--border-weak-base);\n  }\n\n  [data-slot=\"bash-copy\"]\n    [data-component=\"icon-button\"][data-variant=\"secondary\"]\n    [data-slot=\"icon-svg\"] {\n    color: var(--icon-base);\n  }\n\n  [data-slot=\"bash-scroll\"] {\n    width: 100%;\n    overflow-y: auto;\n    overflow-x: hidden;\n    max-height: 240px;\n\n    scrollbar-width: none;\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  [data-slot=\"bash-pre\"] {\n    margin: 0;\n    padding: 12px;\n  }\n\n  [data-slot=\"bash-pre\"] code {\n    font-family: var(--font-family-mono);\n    font-feature-settings: var(--font-family-mono--font-feature-settings);\n    font-size: var(--font-size-small);\n    line-height: var(--line-height-large);\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n  }\n}\n\n[data-component=\"tool-trigger\"][data-layout=\"activity-row\"]:has(\n  [data-component=\"edit-trigger\"],\n  [data-component=\"write-trigger\"]\n) > [data-slot=\"collapsible-arrow\"] {\n  grid-column: 4;\n}\n\n[data-component=\"tool-trigger\"][data-layout=\"activity-row\"]:hover\n  [data-slot=\"message-part-view-file\"],\n[data-component=\"tool-trigger\"][data-layout=\"activity-row\"]:focus-within\n  [data-slot=\"message-part-view-file\"] {\n  opacity: 1;\n}\n\n[data-component=\"edit-trigger\"],\n[data-component=\"write-trigger\"] {\n  display: contents;\n\n  [data-slot=\"message-part-title\"] {\n    grid-column: 1;\n    min-width: 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-family: var(--font-family-sans);\n    font-size: var(--font-size-base);\n    font-style: normal;\n    font-weight: var(--font-weight-medium);\n    line-height: var(--line-height-large);\n    letter-spacing: var(--letter-spacing-normal);\n    color: var(--text-base);\n  }\n\n  [data-slot=\"message-part-path\"] {\n    grid-column: 2;\n    display: flex;\n    min-width: 0;\n    overflow: hidden;\n    font-weight: var(--font-weight-regular);\n  }\n\n  [data-slot=\"message-part-actions\"] {\n    grid-column: 3;\n    display: flex;\n    gap: 4px;\n    align-items: center;\n    justify-content: flex-end;\n    flex-shrink: 0;\n  }\n\n  [data-slot=\"message-part-actions\"] [data-component=\"diff-changes\"] {\n    gap: 4px;\n\n    [data-slot=\"diff-changes-additions\"],\n    [data-slot=\"diff-changes-deletions\"] {\n      min-width: 2ch;\n      font-size: var(--font-size-small);\n    }\n  }\n\n  [data-slot=\"message-part-view-file\"] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 1px;\n    border-radius: 4px;\n    color: var(--text-base);\n    cursor: pointer;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n\n    &:hover,\n    &:focus-visible {\n      color: var(--text-strong);\n      background: var(--surface-base);\n      outline: none;\n    }\n  }\n\n  [data-slot=\"message-part-title-text\"] {\n    flex-shrink: 0;\n    text-transform: capitalize;\n    color: var(--text-strong);\n  }\n\n  [data-slot=\"message-part-path\"] {\n    display: flex;\n    min-width: 0;\n    overflow: hidden;\n    font-weight: var(--font-weight-regular);\n  }\n\n  [data-slot=\"message-part-directory\"] {\n    color: var(--text-weak);\n    flex: 0 1 auto;\n    min-width: 0;\n    direction: rtl;\n    text-align: left;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n\n  [data-slot=\"message-part-path-separator\"] {\n    color: var(--text-weak);\n    flex: 0 0 auto;\n  }\n\n  [data-slot=\"message-part-filename\"] {\n    color: var(--text-strong);\n    flex: 0 0 auto;\n    white-space: nowrap;\n  }\n}\n\n[data-component=\"edit-content\"],\n[data-component=\"write-content\"],\n[data-component=\"apply-patch-file-diff\"] {\n  border-radius: inherit;\n  max-height: calc(var(--session-viewport-height, 100dvh) * 0.6);\n  overflow-x: hidden;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  scrollbar-color: var(--border-weak-base) transparent;\n}\n\n[data-component=\"edit-content\"],\n[data-component=\"write-content\"] {\n  border-top: 1px solid var(--border-weaker-base);\n}\n\n/* Expanded output belongs to the transcript's vertical scroll in the mobile\n   layout, including landscape phones wider than 768px. clip, unlike hidden,\n   does not create another scrolling container. */\n:where(html[data-mobile-layout]) [data-mobile-surface=\"session\"] {\n  [data-component=\"edit-content\"],\n  [data-component=\"write-content\"],\n  [data-component=\"apply-patch-file-diff\"],\n  [data-component=\"tool-output\"][data-scrollable],\n  [data-slot=\"bash-scroll\"] {\n    max-height: none;\n    overflow-x: clip;\n    overflow-y: visible;\n  }\n}\n\n[data-component=\"tool-action\"] {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n[data-component=\"exa-tool-output\"] {\n  width: 100%;\n  padding-top: 8px;\n  display: flex;\n  flex-direction: column;\n}\n\n[data-slot=\"basic-tool-tool-subtitle\"].exa-tool-query {\n  display: block;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n[data-slot=\"exa-tool-links\"] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n[data-slot=\"exa-tool-link\"] {\n  display: block;\n  max-width: 100%;\n  color: var(--text-interactive-base);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  &:hover {\n    color: var(--text-interactive-base);\n  }\n\n  &:visited {\n    color: var(--text-interactive-base);\n  }\n}\n\n[data-slot=\"basic-tool-tool-title\"],\n[data-slot=\"context-tool-group-label\"] {\n  min-width: 0;\n}\n\n:is([data-component=\"context-tool-group-trigger\"], [data-component=\"work-tool-group-trigger\"])[data-layout=\"activity-row\"] {\n  width: fit-content;\n  max-width: 100%;\n  min-width: 0;\n  min-height: 24px;\n  display: grid;\n  grid-template-columns: var(--activity-label-width) minmax(0, auto) auto auto;\n  align-items: center;\n  column-gap: 8px;\n  cursor: default;\n\n  [data-slot=\"context-tool-group-title\"] {\n    display: contents;\n  }\n\n  [data-slot=\"context-tool-group-label\"] {\n    grid-column: 1;\n  }\n\n  [data-slot=\"context-tool-group-summary\"] {\n    grid-column: 2;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  [data-slot=\"context-tool-group-budget\"],\n  > [data-component=\"diff-changes\"] {\n    grid-column: 3;\n  }\n\n  > [data-component=\"diff-changes\"] {\n    margin-inline-start: 8px;\n    gap: 4px;\n    white-space: nowrap;\n    font-variant-numeric: tabular-nums;\n  }\n\n  > [data-slot=\"collapsible-arrow\"] {\n    grid-column: 4;\n  }\n\n  &:not(:has([data-slot=\"context-tool-group-budget\"], [data-component=\"diff-changes\"]))\n    > [data-slot=\"collapsible-arrow\"] {\n    grid-column: 3;\n  }\n\n  [data-slot=\"collapsible-arrow\"] {\n    color: var(--icon-weaker);\n    cursor: pointer;\n  }\n}\n\n[data-activity-group] > [data-slot=\"collapsible-content\"] > [data-component=\"context-tool-group-list\"] {\n  --activity-label-width: calc(var(--font-size-base) * 72 / 14);\n  padding: 4px 0 0 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n\n  > [data-slot=\"context-tool-group-item\"] {\n    min-width: 0;\n    padding: 0;\n  }\n\n  > [data-slot=\"context-tool-group-item\"] > [data-component=\"tool-trigger\"] {\n    min-height: 28px;\n    align-items: center;\n  }\n\n}\n\n[data-activity-group=\"single\"] > [data-slot=\"collapsible-content\"] > [data-component=\"context-tool-group-list\"] {\n  --activity-label-width: max-content;\n  padding: 0;\n  gap: 0;\n}\n\n[data-component=\"diagnostics\"] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 8px 12px;\n  background-color: var(--surface-critical-weak);\n  border-top: 1px solid var(--border-critical-base);\n\n  [data-slot=\"diagnostic\"] {\n    display: flex;\n    align-items: baseline;\n    gap: 6px;\n    font-family: var(--font-family-mono);\n    font-size: var(--font-size-small);\n    line-height: var(--line-height-large);\n  }\n}\n\n[data-component=\"user-message\"] [data-slot=\"user-message-text\"],\n[data-component=\"text-part\"],\n[data-component=\"reasoning-part\"],\n[data-component=\"tool-output\"],\n[data-component=\"bash-output\"],\n[data-component=\"edit-content\"],\n[data-component=\"write-content\"],\n[data-component=\"diagnostics\"],\n.error-card {\n  -webkit-user-select: text;\n  user-select: text;\n}\n\n[data-component=\"tool-part-wrapper\"] {\n  width: 100%;\n}\n\n[data-component=\"dock-prompt\"][data-kind=\"permission\"] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  min-height: 0;\n  max-height: 100dvh;\n\n  [data-slot=\"permission-header\"] {\n    padding: 0;\n  }\n\n  [data-slot=\"permission-row\"] {\n    display: grid;\n    grid-template-columns: 20px 1fr;\n    column-gap: 8px;\n    align-items: start;\n  }\n\n  [data-slot=\"permission-row\"][data-variant=\"header\"] {\n    align-items: center;\n  }\n\n  [data-slot=\"permission-icon\"] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  [data-slot=\"permission-icon\"] [data-component=\"icon\"] {\n    color: var(--icon-warning-base);\n  }\n\n  [data-slot=\"permission-header-title\"] {\n    font-family: var(--font-family-sans);\n    font-size: 14px;\n    font-weight: var(--font-weight-medium);\n    line-height: var(--line-height-large);\n    color: var(--text-strong);\n    min-width: 0;\n  }\n\n  [data-slot=\"permission-hint\"] {\n    font-family: var(--font-family-sans);\n    font-size: 14px;\n    font-weight: var(--font-weight-regular);\n    line-height: var(--line-height-large);\n    color: var(--text-weak);\n    padding: 0;\n  }\n\n  [data-slot=\"permission-patterns\"] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    margin-top: 8px;\n    margin-bottom: 16px;\n    padding: 1px 0 8px;\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n\n    code {\n      font-size: 14px;\n      line-height: var(--line-height-large);\n    }\n  }\n\n  [data-slot=\"permission-footer\"] {\n    display: flex;\n    flex-shrink: 0;\n    padding: 32px 8px 8px;\n    margin-top: -24px;\n  }\n\n  [data-slot=\"permission-footer-actions\"] {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    align-items: center;\n    width: 100%;\n    gap: 8px;\n\n    [data-component=\"button\"] {\n      padding-left: 12px;\n      padding-right: 12px;\n    }\n  }\n}\n\n[data-component=\"dock-prompt\"][data-kind=\"question\"] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  min-height: 0;\n  max-height: var(--question-prompt-max-height, 100dvh);\n\n  [data-slot=\"question-header\"] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    padding: 0 10px;\n  }\n\n  [data-slot=\"question-header-title\"] {\n    font-family: var(--font-family-sans);\n    font-size: 14px;\n    font-weight: var(--font-weight-medium);\n    line-height: var(--line-height-large);\n    color: var(--text-strong);\n    min-width: 0;\n  }\n\n  [data-slot=\"question-progress\"] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-shrink: 0;\n  }\n\n  [data-slot=\"question-progress-segment\"] {\n    width: 16px;\n    height: 16px;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    border-radius: 999px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    touch-action: manipulation;\n\n    &::after {\n      content: \"\";\n      width: 16px;\n      height: 2px;\n      border-radius: 999px;\n      background-color: var(--icon-weak-base);\n      transition: background-color 0.2s ease;\n    }\n\n    &[data-active=\"true\"]::after {\n      background-color: var(--icon-strong-base);\n    }\n\n    &[data-answered=\"true\"]::after {\n      background-color: var(--icon-interactive-base);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.6;\n    }\n  }\n\n  [data-slot=\"question-text\"] {\n    font-family: var(--font-family-sans);\n    font-size: 14px;\n    font-weight: var(--font-weight-medium);\n    line-height: var(--line-height-large);\n    color: var(--text-strong);\n    padding: 0 10px;\n  }\n\n  [data-slot=\"question-hint\"] {\n    font-family: var(--font-family-sans);\n    font-size: 13px;\n    font-weight: var(--font-weight-regular);\n    line-height: var(--line-height-large);\n    color: var(--text-weak);\n    padding: 0 10px;\n  }\n\n  [data-slot=\"question-options\"] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    margin-top: 12px;\n    padding: 1px 1px 8px;\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  [data-slot=\"question-option\"] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 8px 8px 8px 10px;\n    background-color: var(--surface-raised-stronger-non-alpha);\n    border: 1px solid var(--border-weak-base);\n    border-radius: 6px;\n    box-shadow: none;\n    text-align: left;\n    width: 100%;\n    cursor: pointer;\n    transition:\n      background-color 0.15s ease,\n      border-color 0.15s ease,\n      box-shadow 0.15s ease;\n\n    &:hover:not([data-picked=\"true\"]) {\n      background-color: var(--background-base);\n    }\n\n    &[data-picked=\"true\"] {\n      background-color: var(--surface-interactive-weak);\n      border-color: transparent;\n      box-shadow: var(--shadow-xs-border-hover);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.6;\n    }\n  }\n\n  [data-slot=\"question-option-check\"] {\n    display: inline-flex;\n    transform: translateY(2px);\n  }\n\n  [data-slot=\"question-option-box\"] {\n    width: 16px;\n    height: 16px;\n    padding: 2px;\n    border-radius: var(--radius-sm);\n    border: 1px solid var(--border-weak-base);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    background-color: transparent;\n    transition:\n      background-color 0.15s ease,\n      border-color 0.15s ease;\n\n    [data-component=\"icon\"] {\n      opacity: 0;\n      color: var(--icon-base);\n    }\n\n    &[data-type=\"radio\"] {\n      border-radius: 999px;\n    }\n\n    [data-slot=\"question-option-radio-dot\"] {\n      width: 6px;\n      height: 6px;\n      border-radius: 999px;\n      background-color: var(--background-stronger);\n      opacity: 0;\n    }\n\n    &[data-picked=\"true\"] {\n      border-color: var(--icon-interactive-base);\n\n      [data-component=\"icon\"] {\n        opacity: 1;\n        color: var(--icon-invert-base);\n      }\n\n      &[data-type=\"checkbox\"] {\n        background-color: var(--icon-interactive-base);\n      }\n\n      &[data-type=\"radio\"] {\n        background-color: var(--icon-interactive-base);\n        [data-slot=\"question-option-radio-dot\"] {\n          opacity: 1;\n        }\n      }\n    }\n  }\n\n  [data-slot=\"question-option-main\"] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n    flex: 1;\n  }\n\n  [data-slot=\"option-label\"] {\n    font-family: var(--font-family-sans);\n    font-size: 14px;\n    font-weight: var(--font-weight-medium);\n    line-height: var(--line-height-large);\n    color: var(--text-strong);\n  }\n\n  [data-slot=\"option-description\"] {\n    font-family: var(--font-family-sans);\n    font-size: 14px;\n    font-weight: var(--font-weight-regular);\n    line-height: var(--line-height-large);\n    color: var(--text-base);\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  [data-slot=\"question-option\"][data-custom=\"true\"] {\n    [data-slot=\"option-description\"] {\n      overflow: visible;\n      text-overflow: clip;\n      white-space: normal;\n      overflow-wrap: anywhere;\n    }\n  }\n\n  [data-slot=\"question-custom\"] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  [data-slot=\"question-custom-input\"] {\n    width: 100%;\n    padding: 0;\n    border: 0;\n    border-radius: 0;\n    background: transparent;\n    box-shadow: none;\n    outline: none;\n    font-family: var(--font-family-sans);\n    font-size: 14px;\n    font-weight: var(--font-weight-regular);\n    line-height: var(--line-height-large);\n    color: var(--text-base);\n    min-width: 0;\n    cursor: text;\n    resize: none;\n    overflow: hidden;\n    overflow-wrap: anywhere;\n\n    &::placeholder {\n      color: var(--text-weak);\n    }\n\n    &:focus-visible {\n      outline: 1px solid var(--border-interactive-base);\n      outline-offset: 2px;\n      border-radius: var(--radius-xs);\n    }\n\n    &:disabled {\n      opacity: 0.6;\n    }\n  }\n\n  [data-slot=\"question-footer\"] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-shrink: 0;\n    padding: 32px 8px 8px;\n    margin-top: -24px;\n  }\n\n  [data-slot=\"question-footer-actions\"] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n}\n\n[data-component=\"question-answers\"] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 8px 0;\n\n  [data-slot=\"question-answer-item\"] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    font-size: var(--font-size-small);\n\n    [data-slot=\"question-text\"] {\n      color: var(--text-weak);\n    }\n\n    [data-slot=\"answer-text\"] {\n      color: var(--text-strong);\n    }\n  }\n}\n\n[data-component=\"edit-tool\"],\n[data-component=\"write-tool\"],\n[data-component=\"apply-patch-tool\"] {\n  > [data-component=\"collapsible\"].tool-collapsible {\n    gap: 0px;\n  }\n\n  > [data-component=\"collapsible\"] > [data-slot=\"collapsible-content\"] {\n    border: none;\n    background: transparent;\n  }\n\n  > [data-component=\"collapsible\"] > [data-slot=\"collapsible-trigger\"] {\n    min-height: 28px;\n    height: auto;\n    padding-bottom: 0;\n  }\n\n  > [data-component=\"collapsible\"]\n    > [data-slot=\"collapsible-trigger\"][aria-expanded=\"true\"] {\n    z-index: 20;\n    background-color: var(--background-stronger);\n  }\n}\n\n[data-component=\"accordion\"][data-scope=\"apply-patch\"] {\n  [data-slot=\"accordion-trigger\"] {\n    background-color: var(--background-stronger) !important;\n  }\n\n  [data-slot=\"apply-patch-trigger-content\"] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    gap: 20px;\n  }\n\n  [data-slot=\"apply-patch-file-info\"] {\n    flex-grow: 1;\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    min-width: 0;\n  }\n\n  [data-slot=\"apply-patch-file-name-container\"] {\n    display: flex;\n    flex-grow: 1;\n    min-width: 0;\n  }\n\n  [data-slot=\"apply-patch-directory\"] {\n    color: var(--text-base);\n    min-width: 0;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n\n  [data-slot=\"apply-patch-filename\"] {\n    color: var(--text-strong);\n    flex-shrink: 0;\n  }\n\n  [data-slot=\"apply-patch-trigger-actions\"] {\n    flex-shrink: 0;\n    display: flex;\n    gap: 16px;\n    align-items: center;\n    justify-content: flex-end;\n  }\n\n  [data-slot=\"apply-patch-change\"] {\n    font-family: var(--font-family-sans);\n    font-size: var(--font-size-small);\n    font-weight: var(--font-weight-medium);\n  }\n\n  [data-slot=\"apply-patch-change\"][data-type=\"added\"] {\n    color: var(--icon-diff-add-base);\n  }\n\n  [data-slot=\"apply-patch-change\"][data-type=\"removed\"] {\n    color: var(--icon-diff-delete-base);\n  }\n\n  [data-slot=\"apply-patch-change\"][data-type=\"modified\"] {\n    color: var(--icon-diff-modified-base);\n  }\n}\n\n[data-component=\"tool-loaded-file\"] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 0 4px 28px;\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--line-height-large);\n  color: var(--text-weak);\n\n  [data-component=\"icon\"] {\n    flex-shrink: 0;\n    color: var(--icon-weak);\n  }\n}\n",
-	"/* Synced from Mux frontend/src/pages/session/transcript/renderers/session-turn.css @ 37d6096b450cb33dfe9d7112e9d4ff75975d20b2. Do not edit; run npm run sync-styles. */\n/* Scope the existing typography tokens to transcript rows, not the header,\n   composer, file tabs, or portalled menus. Shared renderers inherit this scale. */\n[data-component=\"message-timeline\"] [data-component=\"session-turn\"] {\n  --font-size-base: var(--chat-font-size, 14px);\n  --font-size-small: calc(var(--font-size-base) * 13 / 14);\n  --font-size-large: calc(var(--font-size-base) * 16 / 14);\n  --font-size-x-large: calc(var(--font-size-base) * 20 / 14);\n  --markdown-font-size: var(--font-size-base);\n  --file-font-size: var(--font-size-base);\n  font-size: var(--font-size-base);\n}\n\n[data-component=\"session-turn\"] {\n  --sticky-header-height: calc(var(--session-title-height, 0px) + 24px);\n  height: 100%;\n  min-height: 0;\n  min-width: 0;\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n\n  [data-slot=\"session-turn-message-container\"] {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    align-self: stretch;\n    min-width: 0;\n    gap: 18px;\n    overflow-anchor: none;\n  }\n\n  [data-slot=\"session-turn-message-content\"] {\n    margin-top: 0;\n    width: 100%;\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  [data-slot=\"session-turn-compaction\"] {\n    width: 100%;\n    min-width: 0;\n    align-self: stretch;\n  }\n\n  [data-slot=\"session-turn-thinking\"][data-layout=\"activity-row\"] {\n    display: grid;\n    grid-template-columns: var(--activity-label-width) minmax(0, 1fr) auto auto;\n    align-items: baseline;\n    column-gap: 8px;\n    width: 100%;\n    min-width: 0;\n    color: var(--text-weak);\n    font-family: var(--font-family-sans);\n    font-size: var(--font-size-base);\n    font-weight: var(--font-weight-medium);\n    line-height: var(--line-height-large);\n    min-height: 20px;\n\n    [data-slot=\"activity-row-label\"] {\n      grid-column: 1;\n      min-width: 0;\n    }\n\n    .session-turn-thinking-heading {\n      grid-column: 2;\n    }\n\n    [data-component=\"spinner\"] {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n  .session-turn-thinking-heading {\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    color: var(--text-weaker);\n    font-weight: var(--font-weight-regular);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  .error-card {\n    color: var(--text-on-critical-base);\n    max-height: 240px;\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n    word-break: break-word;\n    overflow-y: auto;\n  }\n\n  [data-slot=\"session-turn-assistant-content\"] {\n    width: 100%;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n    gap: 12px;\n\n    > :first-child > [data-component=\"markdown\"]:first-child {\n      margin-top: 0;\n    }\n  }\n}\n",
-	"/* The embed's own layout, plus the timeline and composer rules Mux keeps in\n   frontend/src/index.css or writes as Tailwind classes (composer-view.tsx).\n   Values mirror Mux's; everything else comes from the synced stylesheets. */\n\n:host {\n  display: block;\n  height: 100%;\n  min-height: 0;\n  /* Mux ships Inter and IBM Plex Mono; fall back to system faces when the host page lacks them. */\n  --font-family-sans: \"Inter\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --font-family-mono: \"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nbutton,\ninput,\nselect,\ntextarea {\n  font: inherit;\n  color: inherit;\n  margin: 0;\n}\n\nbutton {\n  background: none;\n  border: 0;\n  padding: 0;\n  cursor: pointer;\n}\n\nbutton:disabled {\n  cursor: default;\n}\n\n[data-component=\"icon\"] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n[data-component=\"mux-chat\"] {\n  height: 100%;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--background-stronger);\n  color: var(--text-base);\n  font-family: var(--font-family-sans);\n  font-feature-settings: var(--font-family-sans--font-feature-settings);\n  font-size: var(--font-size-base);\n  line-height: var(--line-height-large);\n  -webkit-font-smoothing: antialiased;\n}\n\n/* ---------------------------------------------------------------- header */\n\n[data-slot=\"mux-chat-header\"] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 44px;\n  padding: 8px 10px 8px 18px;\n  border-bottom: 1px solid var(--border-weaker-base);\n}\n\n[data-slot=\"mux-chat-heading\"] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n}\n\n[data-slot=\"mux-chat-title\"] {\n  color: var(--text-strong);\n  font-weight: var(--font-weight-medium);\n  line-height: 20px;\n}\n\n[data-slot=\"mux-chat-subtitle\"] {\n  color: var(--text-weak);\n  font-size: 12px;\n  line-height: 16px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n[data-slot=\"mux-chat-status\"] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  flex: none;\n  color: var(--text-weak);\n  font-size: 12px;\n  line-height: 16px;\n\n  &::before {\n    content: \"\";\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background: var(--icon-weak-base);\n  }\n\n  &[data-tone=\"ok\"]::before {\n    background: var(--icon-success-base);\n  }\n\n  &[data-tone=\"bad\"]::before {\n    background: var(--icon-critical-base);\n  }\n\n  &[data-tone=\"ok\"] [data-slot=\"mux-chat-status-text\"] {\n    display: none;\n  }\n}\n\n[data-action=\"new-chat\"] {\n  width: 28px;\n  height: 28px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* -------------------------------------------------------------- timeline */\n\n[data-component=\"message-timeline\"] {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overflow-anchor: auto;\n  display: flex;\n  flex-direction: column;\n  padding: 16px 0;\n  scrollbar-width: thin;\n}\n\n[data-component=\"message-timeline\"] [data-slot=\"session-turn-message-container\"] {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  padding-inline: 18px;\n}\n\n[data-component=\"message-timeline\"] [data-component=\"assistant-message\"] {\n  gap: 8px;\n}\n\n[data-component=\"message-timeline\"] [data-component=\"user-message\"] {\n  line-height: var(--line-height-large);\n}\n\n[data-component=\"message-timeline\"] [data-slot=\"user-message-text\"] {\n  padding: 6px 9px;\n  white-space: pre-wrap;\n}\n\n[data-component=\"message-timeline\"] [data-component=\"text-part\"] {\n  width: 100%;\n}\n\n[data-component=\"message-timeline\"] [data-component=\"text-part\"] [data-component=\"markdown\"] {\n  line-height: 1.5625;\n}\n\n[data-component=\"message-timeline\"] [data-component=\"markdown\"] p {\n  margin-bottom: 0.75rem;\n}\n\n[data-component=\"message-timeline\"] [data-component=\"markdown\"] :is(h1, h2, h3, h4, h5, h6) {\n  margin-top: 1.5rem;\n  margin-bottom: 0.5rem;\n}\n\n[data-component=\"message-timeline\"] [data-component=\"markdown\"] :is(ul, ol) {\n  margin-top: 0.375rem;\n  margin-bottom: 0.75rem;\n  padding-left: 1.25rem;\n}\n\n[data-component=\"message-timeline\"] [data-component=\"markdown\"] ol {\n  padding-left: 1.75rem;\n}\n\n[data-component=\"message-timeline\"] [data-component=\"markdown\"] li {\n  margin-bottom: 0.25rem;\n}\n\n[data-component=\"message-timeline\"] [data-component=\"markdown\"] :is(blockquote, pre) {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n\n[data-component=\"message-timeline\"] [data-component=\"markdown\"] hr {\n  margin-block: 1.5rem;\n}\n\n[data-component=\"message-timeline\"] [data-component=\"markdown\"] > :last-child {\n  margin-bottom: 0;\n}\n\n/* Tables scroll inside a narrow sidebar instead of overflowing it. */\n[data-component=\"message-timeline\"] [data-component=\"markdown\"] table {\n  display: block;\n  max-width: 100%;\n  overflow-x: auto;\n}\n\n[data-slot=\"mux-tool-output\"] {\n  padding: 8px 4px 4px;\n\n  pre {\n    margin: 0;\n    max-height: 320px;\n    overflow: auto;\n    padding: 8px 12px;\n    border: 1px solid var(--border-weak-base);\n    border-radius: var(--radius-lg);\n    background: var(--surface-raised-base);\n    color: var(--text-base);\n    font-family: var(--font-family-mono);\n    font-size: 12px;\n    line-height: 18px;\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n  }\n\n  pre[data-status=\"error\"] {\n    color: var(--text-critical-base, var(--icon-critical-base));\n  }\n}\n\n[data-slot=\"mux-chat-error\"],\n[data-slot=\"mux-chat-notice\"] {\n  color: var(--text-critical-base, var(--icon-critical-base));\n  font-size: var(--font-size-small);\n  line-height: var(--line-height-large);\n}\n\n[data-slot=\"mux-chat-notice\"] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0 8px;\n\n  > span {\n    flex: 1;\n    min-width: 0;\n  }\n\n  [data-action=\"retry\"] {\n    flex: none;\n    color: var(--text-strong);\n  }\n}\n\n/* ----------------------------------------------------------- empty state */\n\n[data-slot=\"mux-chat-empty\"] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-block: auto;\n  padding: 24px 18px;\n}\n\n[data-slot=\"mux-chat-empty-title\"] {\n  color: var(--text-strong);\n  font-size: var(--font-size-large);\n  font-weight: var(--font-weight-medium);\n  line-height: 24px;\n}\n\n[data-slot=\"mux-chat-empty-subtitle\"] {\n  color: var(--text-weak);\n}\n\n[data-slot=\"mux-chat-suggestions\"] {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 6px;\n  margin-top: 10px;\n}\n\n[data-slot=\"mux-chat-suggestion\"] {\n  max-width: 100%;\n  padding: 6px 12px;\n  border: 1px solid var(--border-weak-base);\n  border-radius: 9999px;\n  background: var(--surface-raised-base);\n  color: var(--text-base);\n  font-size: var(--font-size-small);\n  line-height: 20px;\n  text-align: start;\n  transition: background-color 0.15s ease, border-color 0.15s ease;\n\n  &:hover {\n    background: var(--surface-raised-base-hover);\n    border-color: var(--border-base);\n  }\n}\n\n/* --------------------------------------------------------- dock/composer */\n\n[data-slot=\"mux-chat-dock\"] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 0 8px;\n}\n\n[data-component=\"prompt-composer-surface\"] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: clip;\n  border: 1px solid var(--border-weak-base);\n  border-bottom-width: 0;\n  border-radius: 16px 16px 0 0;\n  --prompt-composer-fill: var(--surface-raised-stronger-non-alpha);\n  background: var(--prompt-composer-fill);\n\n  &:focus-within {\n    border-color: var(--border-base);\n  }\n\n  &[aria-busy=\"true\"] {\n    pointer-events: none;\n  }\n\n  > [data-dock-surface=\"shell\"] {\n    border-radius: 0;\n    box-shadow: none;\n    background: transparent;\n  }\n\n  > [data-component=\"prompt-controls\"] {\n    margin-top: 0;\n    border: 0;\n    border-radius: 0;\n    background: transparent;\n  }\n}\n\n[data-component=\"prompt-input-shell\"] {\n  flex: none;\n  min-height: 32px;\n}\n\n[data-component=\"prompt-input-scroll\"] {\n  position: relative;\n  max-height: 240px;\n  overflow-y: auto;\n  scrollbar-width: none;\n}\n\n[data-component=\"prompt-input\"] {\n  display: block;\n  width: 100%;\n  min-height: 30px;\n  resize: none;\n  border: 0;\n  outline: none;\n  background: transparent;\n  padding: 8px 16px var(--prompt-inset);\n  color: var(--text-strong);\n  font-size: 13px;\n  line-height: 20px;\n\n  &::placeholder {\n    color: var(--text-weaker);\n  }\n}\n\n[data-component=\"prompt-controls-inner\"] {\n  padding: 1px 10px;\n}\n\n[data-component=\"prompt-control-row\"] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n  min-height: 36px;\n}\n\n[data-component=\"prompt-control-left\"] {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex: 1;\n  min-width: 0;\n}\n\n[data-component=\"prompt-control-right\"] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex: none;\n  margin-left: auto;\n}\n\n[data-component=\"prompt-model-control\"] {\n  position: relative;\n  min-width: 0;\n  max-width: 14rem;\n  display: flex;\n  align-items: center;\n}\n\n[data-action=\"prompt-model\"] {\n  appearance: none;\n  field-sizing: content;\n  height: 28px;\n  min-width: 0;\n  max-width: 100%;\n  padding: 0 22px 0 8px;\n  border: 0;\n  border-radius: var(--radius-md);\n  background: transparent;\n  color: var(--text-base);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-medium);\n  text-overflow: ellipsis;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n\n  &:hover:not(:disabled) {\n    background: var(--surface-base-hover);\n  }\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: var(--shadow-xs-border-focus);\n  }\n\n  option,\n  optgroup {\n    background: var(--background-stronger);\n    color: var(--text-base);\n  }\n}\n\n[data-slot=\"prompt-model-chevron\"] {\n  position: absolute;\n  right: 6px;\n  display: inline-flex;\n  color: var(--icon-weak-base);\n  pointer-events: none;\n}\n\n[data-component=\"prompt-submit-control\"] {\n  display: flex;\n  width: 28px;\n  height: 28px;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n}\n\n[data-action=\"prompt-submit\"] {\n  width: 24px;\n  height: 24px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n}\n\n/* ---------------------------------------------------------- question dock */\n\n[data-component=\"mux-question\"],\n[data-component=\"mux-permission\"] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid var(--border-weak-base);\n  border-radius: 12px;\n  background: var(--surface-raised-stronger-non-alpha);\n}\n\n[data-component=\"mux-permission\"] {\n  gap: 8px;\n}\n\n[data-slot=\"mux-permission-patterns\"] {\n  max-height: 96px;\n  overflow: auto;\n  padding: 6px 8px;\n  border-radius: var(--radius-md);\n  background: var(--surface-inset-base);\n  color: var(--text-base);\n  font-family: var(--font-family-mono);\n  font-size: 12px;\n  line-height: 18px;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n\n[data-slot=\"mux-question-item\"] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n[data-slot=\"mux-question-header\"] {\n  color: var(--text-weak);\n  font-size: 12px;\n  font-weight: var(--font-weight-medium);\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n\n[data-slot=\"mux-question-text\"] {\n  color: var(--text-strong);\n  font-weight: var(--font-weight-medium);\n}\n\n[data-slot=\"mux-question-options\"] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n[data-slot=\"mux-question-option\"] {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 2px;\n  padding: 8px 10px;\n  border: 1px solid var(--border-weak-base);\n  border-radius: var(--radius-lg);\n  text-align: start;\n  transition: background-color 0.15s ease, border-color 0.15s ease;\n\n  &:hover {\n    background: var(--surface-base-hover);\n  }\n\n  &[aria-checked=\"true\"] {\n    border-color: var(--border-selected);\n    background: var(--surface-base-interactive-active);\n  }\n}\n\n[data-slot=\"mux-question-option-description\"] {\n  color: var(--text-weak);\n  font-size: var(--font-size-small);\n}\n\n[data-slot=\"mux-question-custom\"] {\n  height: 34px;\n  padding: 0 10px;\n  border: 1px solid var(--border-weak-base);\n  border-radius: var(--radius-lg);\n  background: transparent;\n  outline: none;\n\n  &:focus {\n    border-color: var(--border-base);\n  }\n}\n\n[data-slot=\"mux-question-actions\"] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 6px;\n}\n\n[data-slot=\"mux-button\"] {\n  height: 30px;\n  padding: 0 12px;\n  border-radius: var(--radius-md);\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-medium);\n\n  &[data-variant=\"ghost\"]:hover {\n    background: var(--surface-base-hover);\n  }\n\n  &[data-variant=\"primary\"] {\n    background: var(--icon-strong-base);\n    color: var(--icon-invert-base);\n  }\n\n  &[data-variant=\"primary\"]:disabled {\n    background: var(--icon-strong-disabled);\n  }\n}\n"
-].join("\n");
-//#endregion
-//#region src/model.ts
-/** Connected providers and their models, in runtime order. */
-function modelGroups(inventory) {
-	return inventory.all.filter((provider) => inventory.connected.includes(provider.id)).map((provider) => ({
-		id: provider.id,
-		label: provider.name || provider.id,
-		models: Object.values(provider.models).map((model) => ({
-			value: `${provider.id}/${model.id}`,
-			label: model.name || model.id
-		}))
-	})).filter((group) => group.models.length > 0);
-}
-/**
-* The model to use: the user's stored pick, else the app's preference, else a
-* connected provider's default, else the first available. `undefined` when
-* nothing is available.
-*/
-function chooseModel(groups, inventory, stored, preferred) {
-	const available = new Set(groups.flatMap((group) => group.models.map((model) => model.value)));
-	return [
-		stored,
-		preferred,
-		...inventory.connected.map((id) => inventory.default[id] ? `${id}/${inventory.default[id]}` : ""),
-		groups[0]?.models[0]?.value
-	].find((value) => !!value && available.has(value));
-}
-function parseModel(value) {
-	const slash = value?.indexOf("/") ?? -1;
-	return value && slash > 0 ? {
-		providerID: value.slice(0, slash),
-		modelID: value.slice(slash + 1)
-	} : void 0;
-}
-/** Parts a reader sees, in order: text, non-empty reasoning, and tool calls. */
-function visibleParts(parts) {
-	return parts.filter((part) => part.type === "text" && !part.synthetic && !part.ignored && part.text.trim() !== "" || part.type === "reasoning" && part.text.trim() !== "" || part.type === "tool");
-}
-var BUILTIN_TOOLS = {
-	websearch: "Searching the web",
-	webfetch: "Reading page",
-	question: "Question"
-};
-/** "add_to_watchlist" → "Add to watchlist". */
-var humanize = (name) => {
-	const words = name.replace(/[_-]+/g, " ").trim();
-	return words ? words[0].toUpperCase() + words.slice(1) : name;
-};
-function toolTitle(tool, labels = {}) {
-	return labels[tool] ?? BUILTIN_TOOLS[tool] ?? humanize(tool);
-}
-var INPUT_KEYS = [
-	"description",
-	"query",
-	"url",
-	"name",
-	"symbol",
-	"watchlist",
-	"path",
-	"pattern"
-];
-/** One line under the tool name: the tool's own title once it has one, else its most telling input. */
-function toolSubtitle(state) {
-	if ((state.status === "completed" || state.status === "running") && state.title) return state.title;
-	const input = state.input ?? {};
-	for (const key of INPUT_KEYS) {
-		const value = input[key];
-		if (typeof value === "string" && value) return value;
-	}
-	for (const value of Object.values(input)) {
-		if (typeof value === "string" && value) return value;
-		if (Array.isArray(value) && value.length && value.every((item) => typeof item === "string")) return value.join(", ");
-	}
-	return "";
-}
-var toolActive = (part) => part.state.status === "pending" || part.state.status === "running";
-function toolDetail(state) {
-	if (state.status === "error") return state.error;
-	if (state.status === "completed") return state.output;
-	if (state.status === "running") return state.output ?? "";
-	return "";
-}
-var seconds = (start, end) => `${Math.max(0, (end - start) / 1e3).toFixed(1)}s`;
-var sameIDs = (a, b) => a.length === b.length && a.every((id, index) => id === b[index]);
-//#endregion
-//#region src/controller.ts
-var idle = {
-	connected: false,
-	ready: false,
-	historyLoading: false,
-	historyError: "",
-	snapshotError: "",
-	error: "",
-	ended: false
-};
-var storage = {
-	get(key) {
-		try {
-			return localStorage.getItem(key) ?? void 0;
-		} catch {
-			return;
-		}
-	},
-	set(key, value) {
-		try {
-			if (value === void 0) localStorage.removeItem(key);
-			else localStorage.setItem(key, value);
-		} catch {}
-	}
-};
-function createChatController(options) {
-	let disposed = false;
-	const app = createAppClient({ url: options.url });
-	const { client } = app;
-	const store = createMemoryStore();
-	const [state, setState] = createSignal(store.state());
-	const [view, setView] = createSignal(idle);
-	const [sessionID, setSessionID] = createSignal();
-	const [notice, setNotice] = createSignal();
-	const [grantError, setGrantError] = createSignal();
-	const [tools, setTools] = createSignal(/* @__PURE__ */ new Map());
-	const [inventory, setInventory] = createSignal();
-	const [offline, setOffline] = createSignal(false);
-	const [delivering, setDelivering] = createSignal(false);
-	const describe = (error) => error instanceof Error ? error.message : String(error);
-	const report = (error) => setNotice(describe(error));
-	const connect = (workspaceID) => createChatSession({
-		store,
-		transport: createRuntimeTransport(client, { workspaceID })
-	});
-	let session;
-	let frame;
-	const publish = () => {
-		if (frame !== void 0 || disposed) return;
-		frame = requestAnimationFrame(() => {
-			frame = void 0;
-			batch(() => {
-				setState(store.state());
-				setView(session ? session.view() : idle);
-			});
-		});
-	};
-	const unsubscribe = store.subscribe(publish);
-	const timers = /* @__PURE__ */ new Map();
-	const schedule = (name, ms, run) => {
-		clearTimeout(timers.get(name));
-		timers.set(name, setTimeout(() => {
-			timers.delete(name);
-			if (!disposed) run();
-		}, ms));
-	};
-	onCleanup(() => {
-		disposed = true;
-		for (const timer of timers.values()) clearTimeout(timer);
-		if (frame !== void 0) cancelAnimationFrame(frame);
-		unsubscribe();
-		session?.dispose();
-	});
-	const fetchGrant = async () => {
-		const next = await app.refreshGrant();
-		if (!next?.token || !next.workspaceID) throw new Error("Chat is unavailable (invalid grant)");
-		setTools(new Map((next.tools ?? []).map((tool) => [tool.name, tool])));
-		setGrantError(void 0);
-		schedule("grant", Math.max(1e4, (next.expiresAt - Date.now()) * .8), () => void renew(0));
-	};
-	const renew = async (attempt) => {
-		try {
-			await fetchGrant();
-		} catch (error) {
-			setGrantError(describe(error));
-			schedule("grant", Math.min(6e4, 15e3 * 2 ** attempt), () => void renew(attempt + 1));
-		}
-	};
-	const sessionKey = () => `${options.storageKey}:session:${app.grant()?.workspaceID}`;
-	const modelKey = `${options.storageKey}:model`;
-	const open = async (resume) => {
-		const opened = await client.openSession({
-			workspaceID: app.grant().workspaceID,
-			sessionID: resume,
-			title: options.sessionTitle
-		});
-		if (disposed) return;
-		storage.set(sessionKey(), opened.session.id);
-		session?.dispose();
-		session = connect(opened.workspaceID);
-		session.subscribe(publish);
-		setSessionID(opened.session.id);
-		session.start(opened.session.id);
-		publish();
-	};
-	const loadModels = async () => {
-		try {
-			setInventory(await client.providers());
-			setOffline(false);
-		} catch (error) {
-			console.warn("[mux-chat]", error);
-			setOffline(true);
-			schedule("models", 15e3, () => void loadModels());
-		}
-	};
-	const boot = async () => {
-		try {
-			await fetchGrant();
-		} catch (error) {
-			setGrantError(describe(error));
-			schedule("boot", 15e3, () => void boot());
-			return;
-		}
-		try {
-			await open(storage.get(sessionKey()));
-			setNotice(void 0);
-			loadModels();
-		} catch (error) {
-			report(error);
-			schedule("boot", 15e3, () => void boot());
-		}
-	};
-	boot();
-	const turns = createMemo(() => {
-		const id = sessionID();
-		return id ? sessionTurns(state(), id) : [];
-	});
-	const turnsByID = createMemo(() => new Map(turns().map((turn) => [turn.message.id, turn])));
-	const messageIDs = createMemo(() => turns().map((turn) => turn.message.id), [], { equals: sameIDs });
-	const streaming = createMemo(() => {
-		const id = sessionID();
-		return !!id && isSessionStreaming(state(), id);
-	});
-	const questions = createMemo(() => {
-		const id = sessionID();
-		return id ? sessionQuestions(state(), id) : [];
-	});
-	const permissions = createMemo(() => {
-		const id = sessionID();
-		return id ? sessionPermissions(state(), id) : [];
-	});
-	const seen = /* @__PURE__ */ new Set();
-	let live = false;
-	createEffect(on(turns, (current) => {
-		for (const turn of current) for (const part of turn.parts) {
-			if (part.type !== "tool" || part.state.status !== "completed" || seen.has(part.id)) continue;
-			seen.add(part.id);
-			if (live) options.onToolResult?.({
-				tool: part.tool,
-				title: part.state.title,
-				input: part.state.input,
-				output: part.state.output,
-				sessionID: part.sessionID,
-				readOnly: tools().get(part.tool)?.readOnly ?? true
-			});
-		}
-		if (untrack(view).ready) live = true;
-	}));
-	const [modelValue, setModelValue] = createSignal(storage.get(modelKey) ?? "");
-	const selectModel = (value) => {
-		setModelValue(value);
-		storage.set(modelKey, value);
-	};
-	const groups = createMemo(() => {
-		const inv = inventory();
-		return inv ? modelGroups(inv) : [];
-	});
-	createEffect(on(groups, (current) => {
-		const inv = inventory();
-		if (!inv || !current.length) return;
-		const choice = chooseModel(current, inv, untrack(modelValue), options.preferredModel);
-		if (choice && choice !== untrack(modelValue)) selectModel(choice);
-	}));
-	const status = createMemo(() => {
-		if (offline()) return {
-			tone: "bad",
-			text: "Offline"
-		};
-		if (inventory() && !groups().length) return {
-			tone: "bad",
-			text: "No models available"
-		};
-		const current = view();
-		if (current.connected) return {
-			tone: "ok",
-			text: "Connected"
-		};
-		return current.ready ? {
-			tone: "bad",
-			text: "Reconnecting…"
-		} : {
-			tone: "busy",
-			text: "Connecting…"
-		};
-	});
-	const withSession = (action) => async () => {
-		const id = sessionID();
-		if (!id) return;
-		try {
-			await action(id);
-		} catch (error) {
-			report(error);
-		}
-	};
-	const deliver = async (target, submission) => {
-		setDelivering(true);
-		try {
-			return await target.send(submission);
-		} finally {
-			setDelivering(false);
-		}
-	};
-	return {
-		/** Changes once per rendered frame while the transcript updates. */
-		changes: state,
-		sessionID,
-		/** Labels from the app's tool definitions. */
-		toolLabels: createMemo(() => Object.fromEntries([...tools()].flatMap(([name, tool]) => tool.label ? [[name, tool.label]] : []))),
-		messageIDs,
-		turn: (id) => turnsByID().get(id),
-		questions,
-		permissions,
-		streaming,
-		ready: () => view().ready,
-		view,
-		status,
-		error: () => view().error || view().snapshotError || grantError() || notice() || "",
-		/** A message is shown but its delivery was not confirmed; `retry()` completes it. */
-		unconfirmed: () => !!view().pending && !delivering(),
-		modelGroups: groups,
-		modelValue,
-		selectModel,
-		async send(text) {
-			const target = session;
-			const id = sessionID();
-			const trimmed = text.trim();
-			if (!target || !id || !trimmed || !view().ready) return "failed";
-			setNotice(void 0);
-			const pending = target.view().pending;
-			if (pending && !await deliver(target, pending)) return "failed";
-			const submission = textSubmission({
-				sessionID: id,
-				text: trimmed,
-				agent: options.agent,
-				model: parseModel(modelValue())
-			});
-			if (await deliver(target, submission)) return "sent";
-			return target.view().pending === submission ? "unconfirmed" : "failed";
-		},
-		async retry() {
-			const target = session;
-			const pending = target?.view().pending;
-			if (target && pending && !delivering()) await deliver(target, pending);
-		},
-		abort: withSession((id) => client.abort(id)),
-		answer: (requestID, answers) => withSession(() => client.answerQuestion(requestID, answers))(),
-		reject: (requestID) => withSession(() => client.rejectQuestion(requestID))(),
-		replyPermission: (requestID, response) => withSession((id) => client.replyPermission(id, requestID, response))(),
-		/** Loads the next older page of history, if any. */
-		older: () => {
-			if (view().cursor && !view().historyLoading) session?.older();
-		},
-		async newChat() {
-			if (!app.grant()) return;
-			try {
-				session?.dispose();
-				session = void 0;
-				setSessionID(void 0);
-				setView(idle);
-				await open(void 0);
-			} catch (error) {
-				report(error);
-			}
-		}
-	};
-}
-//#endregion
-//#region src/markdown.ts
-var marked = new Marked({
-	gfm: true,
-	breaks: false
-});
-var purify;
-function sanitizer() {
-	if (!purify) {
-		purify = createDOMPurify(window);
-		purify.addHook("afterSanitizeAttributes", (node) => {
-			if (node.tagName === "A" && node.getAttribute("href")) {
-				node.setAttribute("target", "_blank");
-				node.setAttribute("rel", "noopener noreferrer");
-			}
-		});
-	}
-	return purify;
-}
-/** Model output as sanitized HTML. */
-function renderMarkdown(text) {
-	return sanitizer().sanitize(marked.parse(text, { async: false }));
-}
-//#endregion
-//#region src/view/primitives.tsx
-var _tmpl$$3 = /*#__PURE__*/ template(`<span data-component=text-shimmer style=--text-shimmer-swap:220ms><span data-slot=text-shimmer-char><span data-slot=text-shimmer-char-base aria-hidden=true></span><span data-slot=text-shimmer-char-shimmer aria-hidden=true>`);
-var _tmpl$2$2 = /*#__PURE__*/ template(`<span data-component=icon data-size=small><svg data-slot=icon-svg width=16 height=16 viewBox="0 0 16 16"stroke-width=1.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>`);
-var SWAP_MS = 220;
-/** Mux's text shimmer (ui/components/text-shimmer): an animated sweep while `active`. */
-function TextShimmer(props) {
-	const [run, setRun] = createSignal(props.active);
-	let timer;
-	createEffect(() => {
-		clearTimeout(timer);
-		if (props.active) setRun(true);
-		else timer = setTimeout(() => setRun(false), SWAP_MS);
-	});
-	onCleanup(() => clearTimeout(timer));
-	return (() => {
-		var _el$ = _tmpl$$3(), _el$3 = _el$.firstChild.firstChild, _el$4 = _el$3.nextSibling;
-		insert(_el$3, () => props.text);
-		insert(_el$4, () => props.text);
-		effect((_p$) => {
-			var _v$ = props.active ? "true" : "false", _v$2 = props.text, _v$3 = `${props.offset ?? 0}`, _v$4 = run() ? "true" : "false";
-			_v$ !== _p$.e && setAttribute(_el$, "data-active", _p$.e = _v$);
-			_v$2 !== _p$.t && setAttribute(_el$, "aria-label", _p$.t = _v$2);
-			_v$3 !== _p$.a && setStyleProperty(_el$, "--text-shimmer-index", _p$.a = _v$3);
-			_v$4 !== _p$.o && setAttribute(_el$4, "data-run", _p$.o = _v$4);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0,
-			o: void 0
-		});
-		return _el$;
-	})();
-}
-var svg = (path, filled = false) => () => (() => {
-	var _el$5 = _tmpl$2$2(), _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild;
-	setAttribute(_el$6, "fill", filled ? "currentColor" : "none");
-	setAttribute(_el$6, "stroke", filled ? "none" : "currentColor");
-	setAttribute(_el$7, "d", path);
-	return _el$5;
-})();
-var ChevronDown = svg("M4 6l4 4 4-4");
-var ArrowUp = svg("M8 13V3.5M3.5 8 8 3.5 12.5 8");
-var Stop = svg("M4.5 4.5h7v7h-7z", true);
-var Plus = svg("M8 3v10M3 8h10");
-//#endregion
-//#region src/view/parts.tsx
-var _tmpl$$2 = /*#__PURE__*/ template(`<div data-slot=collapsible-arrow data-size=compact><span data-slot=collapsible-arrow-icon>`);
-var _tmpl$2$1 = /*#__PURE__*/ template(`<div data-slot=collapsible-content data-expanded>`);
-var _tmpl$3$1 = /*#__PURE__*/ template(`<div data-component=collapsible data-variant=normal class=tool-collapsible><button type=button data-slot=collapsible-trigger><div data-component=tool-trigger data-layout=activity-row><div data-slot=basic-tool-tool-trigger-content><div data-slot=basic-tool-tool-info><div data-slot=basic-tool-tool-info-structured><div data-slot=basic-tool-tool-info-main><span data-slot=basic-tool-tool-title></span><span data-slot=basic-tool-tool-detail dir=ltr>`);
-var _tmpl$4$1 = /*#__PURE__*/ template(`<span data-slot=basic-tool-tool-subtitle>`);
-var _tmpl$5$1 = /*#__PURE__*/ template(`<div data-slot=mux-tool-output><pre>`);
-var _tmpl$6$1 = /*#__PURE__*/ template(`<div data-component=reasoning-part><div data-component=markdown>`);
-var _tmpl$7$1 = /*#__PURE__*/ template(`<div data-component=text-part><div data-component=markdown>`);
-/** One collapsible activity row (Mux BasicTool). */
-function ActivityRow(props) {
-	const [open, setOpen] = createSignal(false);
-	const expandable = () => props.children !== void 0;
-	return (() => {
-		var _el$ = _tmpl$3$1(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$8 = _el$3.firstChild.firstChild.firstChild.firstChild.firstChild, _el$9 = _el$8.nextSibling;
-		_el$2.$$click = () => setOpen(!open());
-		insert(_el$8, createComponent(TextShimmer, {
-			get text() {
-				return props.title;
-			},
-			get active() {
-				return props.active;
-			}
-		}));
-		insert(_el$9, createComponent(Show, {
-			get when() {
-				return props.subtitle;
-			},
-			children: (subtitle) => (() => {
-				var _el$11 = _tmpl$4$1();
-				insert(_el$11, subtitle);
-				return _el$11;
-			})()
-		}));
-		insert(_el$3, createComponent(Show, {
-			get when() {
-				return expandable();
-			},
-			get children() {
-				var _el$0 = _tmpl$$2(), _el$1 = _el$0.firstChild;
-				insert(_el$1, createComponent(ChevronDown, {}));
-				return _el$0;
-			}
-		}), null);
-		insert(_el$, createComponent(Show, {
-			get when() {
-				return memo(() => !!open())() && expandable();
-			},
-			get children() {
-				var _el$10 = _tmpl$2$1();
-				insert(_el$10, () => props.children);
-				return _el$10;
-			}
-		}), null);
-		effect((_p$) => {
-			var _v$ = props.name, _v$2 = props.status, _v$3 = open() ? "" : void 0, _v$4 = open() ? void 0 : "", _v$5 = open(), _v$6 = !expandable();
-			_v$ !== _p$.e && setAttribute(_el$, "data-tool", _p$.e = _v$);
-			_v$2 !== _p$.t && setAttribute(_el$, "data-status", _p$.t = _v$2);
-			_v$3 !== _p$.a && setAttribute(_el$, "data-expanded", _p$.a = _v$3);
-			_v$4 !== _p$.o && setAttribute(_el$, "data-closed", _p$.o = _v$4);
-			_v$5 !== _p$.i && setAttribute(_el$2, "aria-expanded", _p$.i = _v$5);
-			_v$6 !== _p$.n && (_el$2.disabled = _p$.n = _v$6);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0,
-			o: void 0,
-			i: void 0,
-			n: void 0
-		});
-		return _el$;
-	})();
-}
-function ToolRow(props) {
-	const detail = createMemo(() => toolDetail(props.part.state).slice(0, 2e4));
-	return createComponent(ActivityRow, {
-		get title() {
-			return toolTitle(props.part.tool, props.labels);
-		},
-		get subtitle() {
-			return toolSubtitle(props.part.state);
-		},
-		get active() {
-			return toolActive(props.part);
-		},
-		get name() {
-			return props.part.tool;
-		},
-		get status() {
-			return props.part.state.status;
-		},
-		get children() {
-			return memo(() => !!detail())() ? (() => {
-				var _el$12 = _tmpl$5$1(), _el$13 = _el$12.firstChild;
-				insert(_el$13, detail);
-				effect(() => setAttribute(_el$13, "data-status", props.part.state.status));
-				return _el$12;
-			})() : void 0;
-		}
-	});
-}
-function ReasoningRow(props) {
-	const active = () => props.live && props.part.time?.end === void 0;
-	const duration = () => props.part.time?.end ? seconds(props.part.time.start, props.part.time.end) : void 0;
-	return createComponent(ActivityRow, {
-		get title() {
-			return active() ? "Thinking" : "Thought";
-		},
-		get subtitle() {
-			return duration();
-		},
-		get active() {
-			return active();
-		},
-		name: "reasoning",
-		get children() {
-			var _el$14 = _tmpl$6$1(), _el$15 = _el$14.firstChild;
-			effect(() => _el$15.innerHTML = renderMarkdown(props.part.text));
-			return _el$14;
-		}
-	});
-}
-function TextPartView(props) {
-	return (() => {
-		var _el$16 = _tmpl$7$1(), _el$17 = _el$16.firstChild;
-		effect(() => _el$17.innerHTML = renderMarkdown(props.part.text));
-		return _el$16;
-	})();
-}
-function PartView(props) {
-	return createComponent(Switch, { get children() {
-		return [
-			createComponent(Match, {
-				get when() {
-					return memo(() => props.part.type === "text")() && props.part;
-				},
-				children: (part) => createComponent(TextPartView, { get part() {
-					return part();
-				} })
-			}),
-			createComponent(Match, {
-				get when() {
-					return memo(() => props.part.type === "reasoning")() && props.part;
-				},
-				children: (part) => createComponent(ReasoningRow, {
-					get part() {
-						return part();
-					},
-					get live() {
-						return props.live;
-					}
-				})
-			}),
-			createComponent(Match, {
-				get when() {
-					return memo(() => props.part.type === "tool")() && props.part;
-				},
-				children: (part) => createComponent(ToolRow, {
-					get part() {
-						return part();
-					},
-					get labels() {
-						return props.labels;
-					}
-				})
-			})
-		];
-	} });
-}
-delegateEvents(["click"]);
-//#endregion
-//#region src/view/Chat.tsx
-var _tmpl$$1 = /*#__PURE__*/ template(`<div data-component=assistant-message>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<div data-component=user-message><div data-slot=user-message-body><div data-slot=user-message-text>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=mux-chat-error role=alert>`);
-var _tmpl$4 = /*#__PURE__*/ template(`<div data-component=mux-question data-dock-surface=shell role=group aria-label="Question from the assistant"><div data-slot=mux-question-actions><button type=button data-slot=mux-button data-variant=ghost>Skip</button><button type=button data-slot=mux-button data-variant=primary>Answer`);
-var _tmpl$5 = /*#__PURE__*/ template(`<div data-slot=mux-question-header>`);
-var _tmpl$6 = /*#__PURE__*/ template(`<input data-slot=mux-question-custom placeholder="Or type your own answer">`);
-var _tmpl$7 = /*#__PURE__*/ template(`<div data-slot=mux-question-item><div data-slot=mux-question-text></div><div data-slot=mux-question-options>`);
-var _tmpl$8 = /*#__PURE__*/ template(`<span data-slot=mux-question-option-description>`);
-var _tmpl$9 = /*#__PURE__*/ template(`<button type=button data-slot=mux-question-option><span data-slot=mux-question-option-label>`);
-var _tmpl$0 = /*#__PURE__*/ template(`<div data-slot=mux-permission-patterns>`);
-var _tmpl$1 = /*#__PURE__*/ template(`<div data-component=mux-permission data-dock-surface=shell role=group aria-label="Permission request from the assistant"><div data-slot=mux-question-header>Permission</div><div data-slot=mux-question-text>The assistant wants to use <!>.</div><div data-slot=mux-question-actions><button type=button data-slot=mux-button data-variant=ghost data-reply=reject>Deny</button><button type=button data-slot=mux-button data-variant=ghost data-reply=always>Always allow</button><button type=button data-slot=mux-button data-variant=primary data-reply=once>Allow once`);
-var _tmpl$10 = /*#__PURE__*/ template(`<span data-slot=mux-chat-subtitle>`);
-var _tmpl$11 = /*#__PURE__*/ template(`<div data-slot=mux-chat-empty-subtitle>`);
-var _tmpl$12 = /*#__PURE__*/ template(`<div data-slot=mux-chat-suggestions>`);
-var _tmpl$13 = /*#__PURE__*/ template(`<div data-slot=mux-chat-empty><div data-slot=mux-chat-empty-title>`);
-var _tmpl$14 = /*#__PURE__*/ template(`<div data-component=assistant-message data-live>`);
-var _tmpl$15 = /*#__PURE__*/ template(`<button type=button data-slot=mux-button data-variant=ghost data-action=retry>Retry`);
-var _tmpl$16 = /*#__PURE__*/ template(`<div data-slot=mux-chat-notice role=status><span>`);
-var _tmpl$17 = /*#__PURE__*/ template(`<div data-component=mux-chat><header data-slot=mux-chat-header><div data-slot=mux-chat-heading><span data-slot=mux-chat-title></span></div><span data-slot=mux-chat-status><span data-slot=mux-chat-status-text></span></span><button type=button data-component=icon-button data-variant=ghost data-size=normal data-action=new-chat aria-label="New chat"title="New chat"></button></header><div data-component=message-timeline><div data-slot=session-turn-message-container></div></div><div data-slot=mux-chat-dock><div data-component=prompt-composer-surface><div data-dock-surface=shell data-component=prompt-input-shell style=--prompt-inset:2px><div data-component=prompt-input-scroll><textarea data-component=prompt-input rows=1></textarea></div></div><div data-dock-surface=tray data-dock-attach=top data-component=prompt-controls><div data-component=prompt-controls-inner><div data-component=prompt-control-row><div data-component=prompt-control-left><div data-component=prompt-model-control><select data-action=prompt-model aria-label=Model></select><span data-slot=prompt-model-chevron></span></div></div><div data-component=prompt-control-right><div data-component=prompt-submit-control><button type=button data-component=icon-button data-variant=primary data-size=normal data-icon-size=small data-action=prompt-submit>`);
-var _tmpl$18 = /*#__PURE__*/ template(`<button type=button data-slot=mux-chat-suggestion>`);
-var _tmpl$19 = /*#__PURE__*/ template(`<optgroup>`);
-var _tmpl$20 = /*#__PURE__*/ template(`<option>`);
-function TurnView(props) {
-	const message = () => props.turn()?.message;
-	const parts = createMemo(() => visibleParts(props.turn()?.parts ?? []));
-	const ids = createMemo(() => parts().map((part) => part.id), [], { equals: sameIDs });
-	const byID = createMemo(() => new Map(parts().map((part) => [part.id, part])));
-	const live = createMemo(() => {
-		const m = message();
-		return m?.role === "assistant" && m.time.completed === void 0 && props.streaming();
-	});
-	const error = () => {
-		const m = message();
-		const failure = m?.role === "assistant" ? m.error : void 0;
-		return failure && failure.name !== "MessageAbortedError" ? failure.data?.message ?? failure.name : void 0;
-	};
-	const userText = () => (props.turn()?.parts ?? []).flatMap((part) => part.type === "text" && !part.synthetic ? [part.text] : []).join("\n");
-	return createComponent(Show, {
-		get when() {
-			return message();
-		},
-		children: (m) => createComponent(Show, {
-			get when() {
-				return m().role === "assistant";
-			},
-			get fallback() {
-				return (() => {
-					var _el$2 = _tmpl$2(), _el$4 = _el$2.firstChild.firstChild;
-					insert(_el$4, userText);
-					effect(() => setAttribute(_el$2, "data-message-id", m().id));
-					return _el$2;
-				})();
-			},
-			get children() {
-				var _el$ = _tmpl$$1();
-				insert(_el$, createComponent(For, {
-					get each() {
-						return ids();
-					},
-					children: (id) => createComponent(Show, {
-						get when() {
-							return byID().get(id);
-						},
-						children: (part) => createComponent(PartView, {
-							get part() {
-								return part();
-							},
-							get live() {
-								return live();
-							},
-							get labels() {
-								return props.labels;
-							}
-						})
-					})
-				}), null);
-				insert(_el$, createComponent(Show, {
-					get when() {
-						return memo(() => !!live())() && !ids().length;
-					},
-					get children() {
-						return createComponent(ActivityRow, {
-							title: "Thinking",
-							active: true,
-							name: "thinking"
-						});
-					}
-				}), null);
-				insert(_el$, createComponent(Show, {
-					get when() {
-						return error();
-					},
-					children: (text) => (() => {
-						var _el$5 = _tmpl$3();
-						insert(_el$5, text);
-						return _el$5;
-					})()
-				}), null);
-				effect((_p$) => {
-					var _v$ = m().id, _v$2 = live() ? "" : void 0;
-					_v$ !== _p$.e && setAttribute(_el$, "data-message-id", _p$.e = _v$);
-					_v$2 !== _p$.t && setAttribute(_el$, "data-live", _p$.t = _v$2);
-					return _p$;
-				}, {
-					e: void 0,
-					t: void 0
-				});
-				return _el$;
-			}
-		})
-	});
-}
-function QuestionDock(props) {
-	const [answers, setAnswers] = createSignal(props.request.questions.map(() => []));
-	const set = (index, value) => setAnswers((previous) => previous.map((current, i) => i === index ? value : current));
-	const toggle = (index, label, multiple) => {
-		const current = answers()[index] ?? [];
-		set(index, multiple ? current.includes(label) ? current.filter((value) => value !== label) : [...current, label] : [label]);
-	};
-	return (() => {
-		var _el$6 = _tmpl$4(), _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
-		insert(_el$6, createComponent(For, {
-			get each() {
-				return props.request.questions;
-			},
-			children: (question, index) => (() => {
-				var _el$0 = _tmpl$7(), _el$10 = _el$0.firstChild, _el$11 = _el$10.nextSibling;
-				insert(_el$0, createComponent(Show, {
-					get when() {
-						return question.header;
-					},
-					get children() {
-						var _el$1 = _tmpl$5();
-						insert(_el$1, () => question.header);
-						return _el$1;
-					}
-				}), _el$10);
-				insert(_el$10, () => question.question);
-				insert(_el$11, createComponent(For, {
-					get each() {
-						return question.options;
-					},
-					children: (option) => (() => {
-						var _el$13 = _tmpl$9(), _el$14 = _el$13.firstChild;
-						_el$13.$$click = () => toggle(index(), option.label, !!question.multiple);
-						insert(_el$14, () => option.label);
-						insert(_el$13, createComponent(Show, {
-							get when() {
-								return option.description;
-							},
-							get children() {
-								var _el$15 = _tmpl$8();
-								insert(_el$15, () => option.description);
-								return _el$15;
-							}
-						}), null);
-						effect((_p$) => {
-							var _v$3 = question.multiple ? "checkbox" : "radio", _v$4 = answers()[index()]?.includes(option.label) ?? false;
-							_v$3 !== _p$.e && setAttribute(_el$13, "role", _p$.e = _v$3);
-							_v$4 !== _p$.t && setAttribute(_el$13, "aria-checked", _p$.t = _v$4);
-							return _p$;
-						}, {
-							e: void 0,
-							t: void 0
-						});
-						return _el$13;
-					})()
-				}));
-				insert(_el$0, createComponent(Show, {
-					get when() {
-						return question.custom !== false;
-					},
-					get children() {
-						var _el$12 = _tmpl$6();
-						_el$12.$$input = (event) => set(index(), event.currentTarget.value.trim() ? [event.currentTarget.value.trim()] : []);
-						return _el$12;
-					}
-				}), null);
-				effect(() => setAttribute(_el$11, "role", question.multiple ? "group" : "radiogroup"));
-				return _el$0;
-			})()
-		}), _el$7);
-		_el$8.$$click = () => props.onSkip();
-		_el$9.$$click = () => props.onAnswer(answers());
-		effect(() => _el$9.disabled = !answers().every((answer) => answer.length > 0));
-		return _el$6;
-	})();
-}
-function PermissionDock(props) {
-	const patterns = () => (props.request.patterns ?? []).filter(Boolean);
-	const [replied, setReplied] = createSignal(false);
-	const reply = (response) => {
-		if (replied()) return;
-		setReplied(true);
-		props.onReply(response);
-	};
-	return (() => {
-		var _el$16 = _tmpl$1(), _el$18 = _el$16.firstChild.nextSibling, _el$21 = _el$18.firstChild.nextSibling;
-		_el$21.nextSibling;
-		var _el$23 = _el$18.nextSibling, _el$24 = _el$23.firstChild, _el$25 = _el$24.nextSibling, _el$26 = _el$25.nextSibling;
-		insert(_el$18, () => props.request.permission ?? "a tool", _el$21);
-		insert(_el$16, createComponent(Show, {
-			get when() {
-				return patterns().length;
-			},
-			get children() {
-				var _el$22 = _tmpl$0();
-				insert(_el$22, () => patterns().join("\n"));
-				return _el$22;
-			}
-		}), _el$23);
-		_el$24.$$click = () => reply("reject");
-		_el$25.$$click = () => reply("always");
-		_el$26.$$click = () => reply("once");
-		effect((_p$) => {
-			var _v$5 = replied(), _v$6 = replied(), _v$7 = replied();
-			_v$5 !== _p$.e && (_el$24.disabled = _p$.e = _v$5);
-			_v$6 !== _p$.t && (_el$25.disabled = _p$.t = _v$6);
-			_v$7 !== _p$.a && (_el$26.disabled = _p$.a = _v$7);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0
-		});
-		return _el$16;
-	})();
-}
-function Chat(props) {
-	const options = props.options;
-	const chat = createChatController({
-		url: options.url,
-		agent: options.agent,
-		sessionTitle: options.sessionTitle,
-		storageKey: options.storageKey,
-		preferredModel: options.preferredModel,
-		onToolResult: options.onToolResult
-	});
-	let timeline;
-	let input;
-	const [draft, setDraft] = createSignal("");
-	const labels = createMemo(() => ({
-		...chat.toolLabels(),
-		...options.toolLabels
-	}));
-	const grow = () => {
-		input.style.height = "auto";
-		input.style.height = `${Math.min(input.scrollHeight, 240)}px`;
-	};
-	const clear = () => {
-		input.value = "";
-		setDraft("");
-		grow();
-	};
-	const restore = (text) => {
-		input.value = text;
-		setDraft(text);
-		grow();
-	};
-	/** Sends `text`; text that was not delivered (and is not shown as pending) goes back into an empty composer. */
-	const sendText = async (text) => {
-		const result = await chat.send(text);
-		if (result === "failed" && !draft()) restore(text);
-		return result === "sent";
-	};
-	const submit = async () => {
-		const text = draft();
-		if (!text.trim() || !chat.ready()) return;
-		clear();
-		await sendText(text);
-	};
-	let waiting = [];
-	let queue = Promise.resolve();
-	const sendFromHost = (text) => new Promise((resolve) => {
-		waiting.push({
-			text,
-			resolve
-		});
-		if (chat.ready()) flush();
-	});
-	const flush = () => {
-		const batch = waiting;
-		waiting = [];
-		for (const { text, resolve } of batch) queue = queue.then(() => sendText(text).then(resolve, () => resolve(false)));
-	};
-	createEffect(on(chat.ready, (ready) => {
-		if (ready) flush();
-	}));
-	onCleanup(() => {
-		for (const { resolve } of waiting) resolve(false);
-	});
-	const working = () => chat.streaming() && !draft().trim();
-	const lastTurn = () => {
-		const ids = chat.messageIDs();
-		return ids.length ? chat.turn(ids[ids.length - 1]) : void 0;
-	};
-	const awaitingReply = () => chat.streaming() && lastTurn()?.message.role === "user";
-	let pinned = true;
-	const nearBottom = () => !timeline || timeline.scrollHeight - timeline.scrollTop - timeline.clientHeight < 80;
-	createComputed(on(chat.changes, () => {
-		pinned = nearBottom();
-	}, { defer: true }));
-	createEffect(on(chat.changes, () => {
-		if (pinned) timeline.scrollTop = timeline.scrollHeight;
-		if (timeline.scrollHeight <= timeline.clientHeight + 120) chat.older();
-	}, { defer: true }));
-	props.api({
-		send: sendFromHost,
-		focus: () => input?.focus(),
-		newChat: () => chat.newChat()
-	});
-	return (() => {
-		var _el$27 = _tmpl$17(), _el$28 = _el$27.firstChild, _el$29 = _el$28.firstChild, _el$30 = _el$29.firstChild, _el$32 = _el$29.nextSibling, _el$33 = _el$32.firstChild, _el$34 = _el$32.nextSibling, _el$35 = _el$28.nextSibling, _el$40 = _el$35.firstChild, _el$42 = _el$35.nextSibling, _el$46 = _el$42.firstChild, _el$47 = _el$46.firstChild, _el$49 = _el$47.firstChild.firstChild, _el$53 = _el$47.nextSibling.firstChild.firstChild.firstChild, _el$55 = _el$53.firstChild.firstChild, _el$56 = _el$55.nextSibling, _el$59 = _el$53.nextSibling.firstChild.firstChild;
-		insert(_el$30, () => options.title);
-		insert(_el$29, createComponent(Show, {
-			get when() {
-				return options.subtitle;
-			},
-			get children() {
-				var _el$31 = _tmpl$10();
-				insert(_el$31, () => options.subtitle);
-				return _el$31;
-			}
-		}), null);
-		insert(_el$33, () => chat.status().text);
-		_el$34.$$click = () => {
-			chat.newChat();
-			input.focus();
-		};
-		insert(_el$34, createComponent(Plus, {}));
-		_el$35.addEventListener("scroll", () => {
-			if (timeline.scrollTop < 200) chat.older();
-		});
-		var _ref$ = timeline;
-		typeof _ref$ === "function" ? use(_ref$, _el$35) : timeline = _el$35;
-		insert(_el$35, createComponent(Show, {
-			get when() {
-				return memo(() => chat.messageIDs().length === 0)() && chat.ready();
-			},
-			get children() {
-				var _el$36 = _tmpl$13(), _el$37 = _el$36.firstChild;
-				insert(_el$37, () => options.title);
-				insert(_el$36, createComponent(Show, {
-					get when() {
-						return options.subtitle;
-					},
-					get children() {
-						var _el$38 = _tmpl$11();
-						insert(_el$38, () => options.subtitle);
-						return _el$38;
-					}
-				}), null);
-				insert(_el$36, createComponent(Show, {
-					get when() {
-						return options.suggestions.length;
-					},
-					get children() {
-						var _el$39 = _tmpl$12();
-						insert(_el$39, createComponent(For, {
-							get each() {
-								return options.suggestions;
-							},
-							children: (suggestion) => (() => {
-								var _el$60 = _tmpl$18();
-								_el$60.$$click = () => void sendText(suggestion.prompt);
-								insert(_el$60, () => suggestion.label);
-								return _el$60;
-							})()
-						}));
-						return _el$39;
-					}
-				}), null);
-				return _el$36;
-			}
-		}), _el$40);
-		insert(_el$40, createComponent(For, {
-			get each() {
-				return chat.messageIDs();
-			},
-			children: (id) => createComponent(TurnView, {
-				turn: () => chat.turn(id),
-				get streaming() {
-					return chat.streaming;
-				},
-				get labels() {
-					return labels();
-				}
-			})
-		}), null);
-		insert(_el$40, createComponent(Show, {
-			get when() {
-				return awaitingReply();
-			},
-			get children() {
-				var _el$41 = _tmpl$14();
-				insert(_el$41, createComponent(ActivityRow, {
-					title: "Thinking",
-					active: true,
-					name: "thinking"
-				}));
-				return _el$41;
-			}
-		}), null);
-		insert(_el$42, createComponent(Show, {
-			get when() {
-				return chat.permissions()[0];
-			},
-			keyed: true,
-			children: (request) => createComponent(PermissionDock, {
-				request,
-				onReply: (response) => void chat.replyPermission(request.id, response)
-			})
-		}), _el$46);
-		insert(_el$42, createComponent(Show, {
-			get when() {
-				return chat.questions()[0];
-			},
-			keyed: true,
-			children: (request) => createComponent(QuestionDock, {
-				request,
-				onAnswer: (answers) => void chat.answer(request.id, answers),
-				onSkip: () => void chat.reject(request.id)
-			})
-		}), _el$46);
-		insert(_el$42, createComponent(Show, {
-			get when() {
-				return chat.error() || chat.unconfirmed();
-			},
-			get children() {
-				var _el$43 = _tmpl$16(), _el$44 = _el$43.firstChild;
-				insert(_el$44, () => chat.error() || "Your last message may not have been delivered.");
-				insert(_el$43, createComponent(Show, {
-					get when() {
-						return chat.unconfirmed();
-					},
-					get children() {
-						var _el$45 = _tmpl$15();
-						_el$45.$$click = () => void chat.retry();
-						return _el$45;
-					}
-				}), null);
-				return _el$43;
-			}
-		}), _el$46);
-		_el$49.$$keydown = (event) => {
-			if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
-				event.preventDefault();
-				submit();
-			}
-		};
-		_el$49.$$input = (event) => {
-			setDraft(event.currentTarget.value);
-			grow();
-		};
-		var _ref$2 = input;
-		typeof _ref$2 === "function" ? use(_ref$2, _el$49) : input = _el$49;
-		_el$55.addEventListener("change", (event) => chat.selectModel(event.currentTarget.value));
-		insert(_el$55, createComponent(For, {
-			get each() {
-				return chat.modelGroups();
-			},
-			children: (group) => (() => {
-				var _el$61 = _tmpl$19();
-				insert(_el$61, createComponent(For, {
-					get each() {
-						return group.models;
-					},
-					children: (model) => (() => {
-						var _el$62 = _tmpl$20();
-						insert(_el$62, () => model.label);
-						effect(() => _el$62.selected = model.value === chat.modelValue());
-						effect(() => _el$62.value = model.value);
-						return _el$62;
-					})()
-				}));
-				effect(() => setAttribute(_el$61, "label", group.label));
-				return _el$61;
-			})()
-		}));
-		insert(_el$56, createComponent(ChevronDown, {}));
-		_el$59.$$click = () => working() ? void chat.abort() : void submit();
-		insert(_el$59, createComponent(Show, {
-			get when() {
-				return working();
-			},
-			get fallback() {
-				return createComponent(ArrowUp, {});
-			},
-			get children() {
-				return createComponent(Stop, {});
-			}
-		}));
-		effect((_p$) => {
-			var _v$8 = chat.sessionID() ?? "", _v$9 = chat.status().tone, _v$0 = chat.status().text, _v$1 = !chat.ready(), _v$10 = options.placeholder, _v$11 = options.placeholder, _v$12 = !chat.modelGroups().length, _v$13 = working() ? "" : void 0, _v$14 = working() ? "Stop" : "Send", _v$15 = working() ? false : !chat.ready() || !draft().trim();
-			_v$8 !== _p$.e && setAttribute(_el$27, "data-session-id", _p$.e = _v$8);
-			_v$9 !== _p$.t && setAttribute(_el$32, "data-tone", _p$.t = _v$9);
-			_v$0 !== _p$.a && setAttribute(_el$32, "title", _p$.a = _v$0);
-			_v$1 !== _p$.o && setAttribute(_el$46, "aria-busy", _p$.o = _v$1);
-			_v$10 !== _p$.i && setAttribute(_el$49, "placeholder", _p$.i = _v$10);
-			_v$11 !== _p$.n && setAttribute(_el$49, "aria-label", _p$.n = _v$11);
-			_v$12 !== _p$.s && (_el$55.disabled = _p$.s = _v$12);
-			_v$13 !== _p$.h && setAttribute(_el$59, "data-working", _p$.h = _v$13);
-			_v$14 !== _p$.r && setAttribute(_el$59, "aria-label", _p$.r = _v$14);
-			_v$15 !== _p$.d && (_el$59.disabled = _p$.d = _v$15);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0,
-			o: void 0,
-			i: void 0,
-			n: void 0,
-			s: void 0,
-			h: void 0,
-			r: void 0,
-			d: void 0
-		});
-		return _el$27;
-	})();
-}
-delegateEvents([
-	"click",
-	"input",
-	"keydown"
-]);
-//#endregion
-//#region src/mount.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
-/**
-* Renders the Mux chat into `host` (inside its shadow root, with Mux's
-* styles). Give `host` a height, e.g. a sidebar column.
-*/
-function mountMuxChat(host, options = {}) {
-	const root = host.shadowRoot ?? host.attachShadow({ mode: "open" });
-	root.replaceChildren();
-	const style = document.createElement("style");
-	style.textContent = styles;
-	const container = document.createElement("div");
-	container.style.height = "100%";
-	root.append(style, container);
-	if (options.theme === "light" || options.theme === "dark") host.setAttribute("data-theme", options.theme);
-	else host.removeAttribute("data-theme");
-	let api;
-	const dispose = render(() => createComponent(Chat, {
-		api: (value) => api = value,
-		get options() {
-			return {
-				url: options.url ?? "/api/mux",
-				title: options.title ?? "Assistant",
-				subtitle: options.subtitle,
-				placeholder: options.placeholder ?? "Ask anything…",
-				suggestions: options.suggestions ?? [],
-				toolLabels: options.toolLabels ?? {},
-				agent: options.agent ?? "assistant",
-				sessionTitle: options.sessionTitle ?? "Chat",
-				storageKey: options.storageKey ?? "mux-chat",
-				preferredModel: options.preferredModel,
-				onToolResult: options.onToolResult
-			};
-		}
-	}), container);
-	return {
-		send: (text) => api?.send(text) ?? Promise.resolve(false),
-		focus: () => api?.focus(),
-		newChat: () => api?.newChat() ?? Promise.resolve(),
-		dispose: () => {
-			dispose();
-			root.replaceChildren();
-		}
-	};
-}
-/** Solid wrapper around `mountMuxChat`. Options are read once, at mount. */
-function MuxChat(props) {
-	let host;
-	onMount(() => {
-		const handle = mountMuxChat(host, props);
-		props.ref?.(handle);
-		onCleanup(() => handle.dispose());
-	});
-	return (() => {
-		var _el$ = _tmpl$();
-		var _ref$ = host;
-		typeof _ref$ === "function" ? use(_ref$, _el$) : host = _el$;
-		effect((_p$) => {
-			var _v$ = props.id, _v$2 = props.class, _v$3 = props.style;
-			_v$ !== _p$.e && setAttribute(_el$, "id", _p$.e = _v$);
-			_v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
-			_p$.a = style(_el$, _v$3, _p$.a);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0
-		});
-		return _el$;
-	})();
-}
-//#endregion
-export { MuxChat, mountMuxChat };
-
-//# sourceMappingURL=index.js.map