@seed-ship/mcp-ui-solid 6.23.0 → 6.25.1

package/dist/components/ScratchpadPanel.cjs

@@ -13,34 +13,34 @@ const AgentHandoff = require("./AgentHandoff.cjs");
 const BriefingDiff = require("./BriefingDiff.cjs");
 const MCPUIStringsContext = require("../context/MCPUIStringsContext.cjs");
 const formatString = require("../utils/format-string.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<svg fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M19 9l-7 7-7-7">`), _tmpl$2 = /* @__PURE__ */ web.template(`<button class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"><svg class="w-4 h-4"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M6 18L18 6M6 6l12 12">`), _tmpl$3 = /* @__PURE__ */ web.template(`<div class="px-4 py-2 border-b border-gray-100 dark:border-gray-700 flex flex-wrap items-center gap-1.5">`), _tmpl$4 = /* @__PURE__ */ web.template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700 space-y-2">`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class="flex flex-col items-center gap-2 py-4 text-center"><span class=text-2xl>&#128269;</span><p class="text-sm text-gray-500 dark:text-gray-400"></p><button type=button class="px-3 py-1.5 text-xs font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors">`), _tmpl$6 = /* @__PURE__ */ web.template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700">`), _tmpl$7 = /* @__PURE__ */ web.template(`<p class="text-xs text-red-500 dark:text-red-500 mt-0.5">`), _tmpl$8 = /* @__PURE__ */ web.template(`<button type=button class="px-3 py-1.5 text-sm font-medium rounded-lg bg-red-600 text-white hover:bg-red-700 transition-colors flex items-center gap-1">&#128260; <!$><!/>`), _tmpl$9 = /* @__PURE__ */ web.template(`<button type=button class="px-3 py-1.5 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">`), _tmpl$0 = /* @__PURE__ */ web.template(`<div class="px-4 py-3 border-t border-red-100 dark:border-red-900/30 bg-red-50 dark:bg-red-900/10"><div class="flex items-start gap-2 text-sm text-red-700 dark:text-red-400"><span class="flex-shrink-0 mt-0.5">⚠️</span><div class=flex-1><p class=font-medium></p><!$><!/></div></div><div class="flex gap-2 mt-2"><!$><!/><!$><!/>`), _tmpl$1 = /* @__PURE__ */ web.template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700"><button type=button class="w-full px-4 py-2.5 text-sm font-semibold rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors flex items-center justify-center gap-2"><svg class="w-4 h-4"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg><!$><!/>`), _tmpl$10 = /* @__PURE__ */ web.template(`<div style=overflow-y:auto><!$><!/><div class="divide-y divide-gray-100 dark:divide-gray-700"></div><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$11 = /* @__PURE__ */ web.template(`<div class="absolute bottom-1 right-1 px-2 py-1 text-[9px] font-mono bg-black/80 text-green-400 rounded z-50 pointer-events-none"><!$><!/> | ev:<!$><!/> | sec:<!$><!/> | <!$><!/> | last:<!$><!/>`), _tmpl$12 = /* @__PURE__ */ web.template(`<div style="animation:scratchpad-slide-down 0.2s ease-out"><div><div class="flex items-center gap-2"><span class=text-base>&#128221;</span><h3 class="text-sm font-semibold text-gray-900 dark:text-white"></h3><!$><!/><!$><!/></div><div class="flex items-center gap-2"><span></span><!$><!/></div></div><!$><!/><style>
+var _tmpl$ = /* @__PURE__ */ web.template(`<svg fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M19 9l-7 7-7-7">`), _tmpl$2 = /* @__PURE__ */ web.template(`<button class="p-1 text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] hover:text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] dark:hover:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] rounded-full hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] transition-colors"><svg class="w-4 h-4"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M6 18L18 6M6 6l12 12">`), _tmpl$3 = /* @__PURE__ */ web.template(`<div class="px-4 py-2 border-b border-[color:var(--mcp-ui-border,var(--color-gray-100,#f3f4f6))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] flex flex-wrap items-center gap-1.5">`), _tmpl$4 = /* @__PURE__ */ web.template(`<div class="px-4 py-3 border-t border-[color:var(--mcp-ui-border,var(--color-gray-100,#f3f4f6))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] space-y-2">`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class="flex flex-col items-center gap-2 py-4 text-center"><span class=text-2xl>&#128269;</span><p class="text-sm text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"></p><button type=button class="px-3 py-1.5 text-xs font-medium text-[color:var(--mcp-ui-accent,var(--color-blue-600))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))] hover:bg-[color:var(--mcp-ui-accent-soft,var(--color-blue-50))] dark:hover:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_20%,transparent))] rounded-lg transition-colors">`), _tmpl$6 = /* @__PURE__ */ web.template(`<div class="px-4 py-3 border-t border-[color:var(--mcp-ui-border,var(--color-gray-100,#f3f4f6))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))]">`), _tmpl$7 = /* @__PURE__ */ web.template(`<p class="text-xs text-[color:var(--mcp-ui-danger,var(--color-red-500))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-500))] mt-0.5">`), _tmpl$8 = /* @__PURE__ */ web.template(`<button type=button class="px-3 py-1.5 text-sm font-medium rounded-lg bg-[color:var(--mcp-ui-danger,var(--color-red-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-danger-hover,var(--color-red-700))] transition-colors flex items-center gap-1">&#128260; <!$><!/>`), _tmpl$9 = /* @__PURE__ */ web.template(`<button type=button class="px-3 py-1.5 text-sm font-medium rounded-lg border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] transition-colors">`), _tmpl$0 = /* @__PURE__ */ web.template(`<div class="px-4 py-3 border-t border-[color:var(--mcp-ui-danger-border,var(--color-red-100))] dark:border-[color:var(--mcp-ui-danger-border,color-mix(in_oklab,var(--color-red-900)_30%,transparent))] bg-[color:var(--mcp-ui-danger-soft,var(--color-red-50))] dark:bg-[color:var(--mcp-ui-danger-soft,color-mix(in_oklab,var(--color-red-900)_10%,transparent))]"><div class="flex items-start gap-2 text-sm text-[color:var(--mcp-ui-danger,var(--color-red-700))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-400))]"><span class="flex-shrink-0 mt-0.5">⚠️</span><div class=flex-1><p class=font-medium></p><!$><!/></div></div><div class="flex gap-2 mt-2"><!$><!/><!$><!/>`), _tmpl$1 = /* @__PURE__ */ web.template(`<div class="px-4 py-3 border-t border-[color:var(--mcp-ui-border,var(--color-gray-100,#f3f4f6))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))]"><button type=button class="w-full px-4 py-2.5 text-sm font-semibold rounded-lg text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))] transition-colors flex items-center justify-center gap-2"><svg class="w-4 h-4"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg><!$><!/>`), _tmpl$10 = /* @__PURE__ */ web.template(`<div style=overflow-y:auto><!$><!/><div class="divide-y divide-[color:var(--mcp-ui-border,var(--color-gray-100,#f3f4f6))] dark:divide-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))]"></div><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$11 = /* @__PURE__ */ web.template(`<div class="absolute bottom-1 right-1 px-2 py-1 text-[9px] font-mono bg-[color:var(--mcp-ui-overlay,color-mix(in_oklab,var(--color-black,#000)_80%,transparent))] text-[color:var(--mcp-ui-success,var(--color-green-400))] rounded z-50 pointer-events-none"><!$><!/> | ev:<!$><!/> | sec:<!$><!/> | <!$><!/> | last:<!$><!/>`), _tmpl$12 = /* @__PURE__ */ web.template(`<div style="animation:scratchpad-slide-down 0.2s ease-out;scrollbar-color:var(--mcp-ui-scrollbar-thumb,auto) var(--mcp-ui-scrollbar-track,transparent)"><div><div class="flex items-center gap-2"><span class=text-base>&#128221;</span><h3 class="text-sm font-semibold text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))]"></h3><!$><!/><!$><!/></div><div class="flex items-center gap-2"><span></span><!$><!/></div></div><!$><!/><style>
         @keyframes scratchpad-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
-      </style><!$><!/>`), _tmpl$13 = /* @__PURE__ */ web.template(`<svg class="w-3 h-3 text-gray-300 dark:text-gray-600 flex-shrink-0"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 5l7 7-7 7">`), _tmpl$14 = /* @__PURE__ */ web.template(`<span class="ml-1 font-normal opacity-75">— <!$><!/>`), _tmpl$15 = /* @__PURE__ */ web.template(`<span><!$><!/> <!$><!/><!$><!/>`), _tmpl$16 = /* @__PURE__ */ web.template(`<div><span class="flex-shrink-0 mt-0.5"></span><p>`), _tmpl$17 = /* @__PURE__ */ web.template(`<div class="flex items-center gap-2 mb-2"><span class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide"></span><span class="px-1.5 py-0.5 text-xs font-bold bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded">`), _tmpl$18 = /* @__PURE__ */ web.template(`<p class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$19 = /* @__PURE__ */ web.template(`<div class="mt-2 overflow-x-auto"><table class="min-w-full text-xs"><thead><tr></tr></thead><tbody>`), _tmpl$20 = /* @__PURE__ */ web.template(`<th class="px-2 py-1 text-left font-medium text-gray-500 dark:text-gray-400">`), _tmpl$21 = /* @__PURE__ */ web.template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$22 = /* @__PURE__ */ web.template(`<td class="px-2 py-1 text-gray-700 dark:text-gray-300">`), _tmpl$23 = /* @__PURE__ */ web.template(`<pre class="text-xs text-gray-500 overflow-auto">`), _tmpl$24 = /* @__PURE__ */ web.template(`<div class="px-4 py-3 animate-[slideDown_0.2s_ease-out]"><h4 class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2"></h4><!$><!/>`), _tmpl$25 = /* @__PURE__ */ web.template(`<div class=space-y-1>`), _tmpl$26 = /* @__PURE__ */ web.template(`<div class="flex gap-2 text-xs"><span class="text-gray-500 dark:text-gray-400 font-mono min-w-[120px]"><!$><!/>:</span><span class="text-gray-900 dark:text-white">`), _tmpl$27 = /* @__PURE__ */ web.template(`<p class="text-xs text-gray-400 italic">`), _tmpl$28 = /* @__PURE__ */ web.template(`<div class="flex flex-wrap gap-1.5"><!$><!/><!$><!/>`), _tmpl$29 = /* @__PURE__ */ web.template(`<button type=button class="ml-0.5 hover:text-blue-900 dark:hover:text-blue-100">&times;`), _tmpl$30 = /* @__PURE__ */ web.template(`<span class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full"><button type=button class=hover:underline><span class="text-blue-500 dark:text-blue-400"><!$><!/>:</span> <!$><!/></button><!$><!/>`), _tmpl$31 = /* @__PURE__ */ web.template(`<div class="max-h-48 overflow-y-auto">`), _tmpl$32 = /* @__PURE__ */ web.template(`<button type=button class="mt-1 w-full px-2 py-1 text-xs text-gray-500 hover:text-gray-700 text-center">`), _tmpl$33 = /* @__PURE__ */ web.template(`<div class="absolute z-50 mt-1 left-0 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg p-2 min-w-[200px]">`), _tmpl$34 = /* @__PURE__ */ web.template(`<div class=relative><!$><!/><!$><!/>`), _tmpl$35 = /* @__PURE__ */ web.template(`<button type=button class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium border border-dashed border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 rounded-full hover:border-blue-400 hover:text-blue-500 transition-colors">+ <!$><!/>`), _tmpl$36 = /* @__PURE__ */ web.template(`<form class="flex gap-1"><input type=text autofocus class="flex-1 px-2 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none"><button type=submit class="px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700"></button><button type=button class="px-2 py-1 text-xs text-gray-500 hover:text-gray-700">`), _tmpl$37 = /* @__PURE__ */ web.template(`<span class=ml-1>✓`), _tmpl$38 = /* @__PURE__ */ web.template(`<button type=button><!$><!/><!$><!/>`), _tmpl$39 = /* @__PURE__ */ web.template(`<p class="text-xs text-gray-500 dark:text-gray-400">`), _tmpl$40 = /* @__PURE__ */ web.template(`<div class="flex items-center gap-3 p-2 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md text-sm"><span class="text-blue-700 dark:text-blue-300"></span><button type=button class="text-blue-600 dark:text-blue-400 underline hover:text-blue-800 dark:hover:text-blue-200">`), _tmpl$41 = /* @__PURE__ */ web.template(`<form class="flex flex-col gap-3"><!$><!/><!$><!/><!$><!/><div class="flex justify-end"><button type=submit class="px-4 py-2 text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors">`), _tmpl$42 = /* @__PURE__ */ web.template(`<div class="flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg text-sm"><span class="flex-1 text-blue-800 dark:text-blue-200 font-medium"></span><span class="text-blue-600 dark:text-blue-300"><!$><!/>s...</span><button type=button class="text-blue-600 dark:text-blue-400 underline text-xs"></button><button type=button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">&times;`), _tmpl$43 = /* @__PURE__ */ web.template(`<div class=pl-2>routing: <!$><!/> via <!$><!/> (<!$><!/>ms)`), _tmpl$44 = /* @__PURE__ */ web.template(`<div class="pl-2 text-amber-500">missing: <!$><!/>`), _tmpl$45 = /* @__PURE__ */ web.template(`<div class="pt-1 border-t border-gray-200 dark:border-gray-600"><div class="font-medium text-gray-800 dark:text-gray-200">Server _debug:</div><!$><!/><!$><!/><!$><!/>`), _tmpl$46 = /* @__PURE__ */ web.template(`<pre class="mt-1 p-2 bg-gray-50 dark:bg-gray-900 rounded max-h-48 overflow-auto text-[10px]">`), _tmpl$47 = /* @__PURE__ */ web.template(`<div class="px-3 pb-3 space-y-2 text-gray-600 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 pt-2"><div>Fields: <!$><!/> total, <!$><!/> prefilled</div><!$><!/><div class="pt-1 border-t border-gray-200 dark:border-gray-600">autoSubmit: <!$><!/><!$><!/><div> reason: <!$><!/></div></div><!$><!/><div class="pt-1 border-t border-gray-200 dark:border-gray-600"><button type=button class="text-blue-500 hover:text-blue-700 underline"></button><!$><!/>`), _tmpl$48 = /* @__PURE__ */ web.template(`<div class="mt-2 border border-gray-200 dark:border-gray-700 rounded-md text-xs font-mono"><button type=button class="w-full px-3 py-1.5 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 flex items-center gap-1"><span></span>Debug trace (<!$><!/>/<!$><!/> prefilled)</button><!$><!/>`), _tmpl$49 = /* @__PURE__ */ web.template(`<div> prefill: <!$><!/>`), _tmpl$50 = /* @__PURE__ */ web.template(`<div class=text-amber-500> prefill: (none)`), _tmpl$51 = /* @__PURE__ */ web.template(`<div> source: <!$><!/>`), _tmpl$52 = /* @__PURE__ */ web.template(`<div> displayHint: "<!$><!/>"`), _tmpl$53 = /* @__PURE__ */ web.template(`<div> muted: true`), _tmpl$54 = /* @__PURE__ */ web.template(`<div> prefillMode: <!$><!/>`), _tmpl$55 = /* @__PURE__ */ web.template(`<div> valueFormat: /<!$><!/>/`), _tmpl$56 = /* @__PURE__ */ web.template(`<div class="pl-2 border-l-2 border-gray-200 dark:border-gray-600 space-y-0.5"><div class="text-gray-800 dark:text-gray-200 font-medium"><!$><!/>:</div><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$57 = /* @__PURE__ */ web.template(`<div>→ submitted: <!$><!/>`), _tmpl$58 = /* @__PURE__ */ web.template(`<div class=pl-2><!$><!/>: <!$><!/> "<!$><!/>" → "<!$><!/>" (<!$><!/>ms)`), _tmpl$59 = /* @__PURE__ */ web.template(`<div class="flex justify-end"><button type=button class="px-3 py-1.5 text-sm font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors flex items-center gap-1"><!$><!/> <svg class="w-3.5 h-3.5"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 5l7 7-7 7">`), _tmpl$60 = /* @__PURE__ */ web.template(`<div class=space-y-3><!$><!/><!$><!/>`), _tmpl$61 = /* @__PURE__ */ web.template(`<span class="text-xs font-normal text-gray-500 dark:text-gray-400">— <!$><!/>`), _tmpl$62 = /* @__PURE__ */ web.template(`<div class="mt-2 ml-6">`), _tmpl$63 = /* @__PURE__ */ web.template(`<div><div><span></span><!$><!/><!$><!/></div><!$><!/>`), _tmpl$64 = /* @__PURE__ */ web.template(`<p class="text-sm font-medium text-gray-800 dark:text-gray-200 mb-2">`), _tmpl$65 = /* @__PURE__ */ web.template(`<span class=text-amber-600>`), _tmpl$66 = /* @__PURE__ */ web.template(`<div class="mb-2 flex items-center gap-2 text-xs"><span></span><!$><!/>`), _tmpl$67 = /* @__PURE__ */ web.template(`<div><!$><!/><!$><!/><!$><!/><div class="flex flex-wrap gap-2">`), _tmpl$68 = /* @__PURE__ */ web.template(`<span class="font-medium text-gray-800 dark:text-gray-200">`), _tmpl$69 = /* @__PURE__ */ web.template(`<span class=ml-1>&mdash; <!$><!/>`), _tmpl$70 = /* @__PURE__ */ web.template(`<div class="mb-2 p-2 rounded bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-xs text-gray-600 dark:text-gray-400"><!$><!/><!$><!/>`), _tmpl$71 = /* @__PURE__ */ web.template(`<span class=mr-1>`), _tmpl$72 = /* @__PURE__ */ web.template(`<div class=space-y-2><div class=space-y-1.5></div><!$><!/>`), _tmpl$73 = /* @__PURE__ */ web.template(`<div class="flex items-center gap-2 text-sm"><span></span><span class="text-gray-900 dark:text-white">`), _tmpl$74 = /* @__PURE__ */ web.template(`<div class="flex items-start gap-1.5 text-xs text-amber-600 dark:text-amber-400"><span class=flex-shrink-0>⚠️</span><span>`), _tmpl$75 = /* @__PURE__ */ web.template(`<span class=italic>&mdash; <!$><!/>`), _tmpl$76 = /* @__PURE__ */ web.template(`<div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400"><span><!$><!/> <!$><!/></span><!$><!/>`), _tmpl$77 = /* @__PURE__ */ web.template(`<div class="flex flex-wrap gap-2">`), _tmpl$78 = /* @__PURE__ */ web.template(`<div class="flex gap-1"><input type=text class="flex-1 px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none"><button type=button class="px-3 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700">`), _tmpl$79 = /* @__PURE__ */ web.template(`<div class=space-y-3><p class="text-sm text-gray-700 dark:text-gray-300"></p><!$><!/><!$><!/>`), _tmpl$80 = /* @__PURE__ */ web.template(`<span>`), _tmpl$81 = /* @__PURE__ */ web.template(`<p class="text-xs text-gray-500 dark:text-gray-400 italic">"<!$><!/>"`), _tmpl$82 = /* @__PURE__ */ web.template(`<div class="mt-2 px-3 py-2 bg-blue-50 dark:bg-blue-900/10 rounded-lg text-sm text-blue-700 dark:text-blue-300"><span class=font-medium></span> <!$><!/>`), _tmpl$83 = /* @__PURE__ */ web.template(`<button type=button class="text-xs text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1">&#9998; <!$><!/>`), _tmpl$84 = /* @__PURE__ */ web.template(`<div class=space-y-2><!$><!/><div class=space-y-1></div><!$><!/><!$><!/>`), _tmpl$85 = /* @__PURE__ */ web.template(`<div class="flex gap-2 text-sm"><span class="text-gray-500 dark:text-gray-400 font-medium min-w-[80px]"><!$><!/>:</span><span class="text-gray-900 dark:text-white">`), _tmpl$86 = /* @__PURE__ */ web.template(`<div class="flex items-center gap-1 flex-wrap">`), _tmpl$87 = /* @__PURE__ */ web.template(`<div class=space-y-2>`), _tmpl$88 = /* @__PURE__ */ web.template(`<span class="ml-1 text-xs text-gray-500 dark:text-gray-400">— <!$><!/>`), _tmpl$89 = /* @__PURE__ */ web.template(`<span class="ml-1 text-xs text-gray-400">(<!$><!/>ms)`), _tmpl$90 = /* @__PURE__ */ web.template(`<div><span class=flex-shrink-0></span><div><span></span><!$><!/><!$><!/>`), _tmpl$91 = /* @__PURE__ */ web.template(`<span class="text-[10px] opacity-75">`), _tmpl$92 = /* @__PURE__ */ web.template(`<div><span></span><span></span><!$><!/>`), _tmpl$93 = /* @__PURE__ */ web.template(`<button type=button>&#128260; <!$><!/>`), _tmpl$94 = /* @__PURE__ */ web.template(`<button type=button class="px-2 py-1 text-xs opacity-70 hover:opacity-100">&#9654; <!$><!/>`), _tmpl$95 = /* @__PURE__ */ web.template(`<pre class="mt-2 text-xs opacity-70 overflow-x-auto">`), _tmpl$96 = /* @__PURE__ */ web.template(`<div><div class="flex items-start gap-2"><span class=flex-shrink-0></span><div class=flex-1><p></p><div class="flex gap-2 mt-2"><!$><!/><!$><!/></div><!$><!/>`), _tmpl$97 = /* @__PURE__ */ web.template(`<span class="text-xs font-bold text-blue-600 dark:text-blue-400">`), _tmpl$98 = /* @__PURE__ */ web.template(`<p class="text-[10px] text-gray-400">`), _tmpl$99 = /* @__PURE__ */ web.template(`<div class="rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2"><div class="flex items-center justify-between mb-1.5"><span class="text-sm font-medium text-gray-900 dark:text-white"><!$><!/> <!$><!/></span><!$><!/></div><div class="flex flex-wrap gap-1.5 mb-1"></div><!$><!/>`), _tmpl$100 = /* @__PURE__ */ web.template(`<span><!$><!/> <!$><!/>`), _tmpl$101 = /* @__PURE__ */ web.template(`<div class=overflow-x-auto><table class="min-w-full text-xs"><thead><tr><th class="px-2 py-1 text-left text-gray-500 dark:text-gray-400"></th><th class="px-2 py-1 text-left font-medium text-blue-600 dark:text-blue-400"></th><th class="px-2 py-1 text-left font-medium text-purple-600 dark:text-purple-400"></th></tr></thead><tbody>`), _tmpl$102 = /* @__PURE__ */ web.template(`<tr><td class="px-2 py-1 font-mono text-gray-500 dark:text-gray-400"></td><td class="px-2 py-1 text-gray-900 dark:text-white"></td><td class="px-2 py-1 text-gray-900 dark:text-white">`);
+      </style><!$><!/>`), _tmpl$13 = /* @__PURE__ */ web.template(`<svg class="w-3 h-3 text-[color:var(--mcp-ui-fg-muted,var(--color-gray-300,#d1d5db))] dark:text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] flex-shrink-0"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 5l7 7-7 7">`), _tmpl$14 = /* @__PURE__ */ web.template(`<span class="ml-1 font-normal opacity-75">— <!$><!/>`), _tmpl$15 = /* @__PURE__ */ web.template(`<span><!$><!/> <!$><!/><!$><!/>`), _tmpl$16 = /* @__PURE__ */ web.template(`<div><span class="flex-shrink-0 mt-0.5"></span><p>`), _tmpl$17 = /* @__PURE__ */ web.template(`<div class="flex items-center gap-2 mb-2"><span class="text-xs font-medium text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] uppercase tracking-wide"></span><span class="px-1.5 py-0.5 text-xs font-bold bg-[color:var(--mcp-ui-accent-soft,var(--color-blue-100))] dark:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_30%,transparent))] text-[color:var(--mcp-ui-accent,var(--color-blue-700))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-300))] rounded">`), _tmpl$18 = /* @__PURE__ */ web.template(`<p class="text-sm text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))]">`), _tmpl$19 = /* @__PURE__ */ web.template(`<div class="mt-2 overflow-x-auto"><table class="min-w-full text-xs"><thead><tr></tr></thead><tbody>`), _tmpl$20 = /* @__PURE__ */ web.template(`<th class="px-2 py-1 text-left font-medium text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]">`), _tmpl$21 = /* @__PURE__ */ web.template(`<tr class="border-t border-[color:var(--mcp-ui-border,var(--color-gray-100,#f3f4f6))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))]">`), _tmpl$22 = /* @__PURE__ */ web.template(`<td class="px-2 py-1 text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))]">`), _tmpl$23 = /* @__PURE__ */ web.template(`<pre class="text-xs text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] overflow-auto">`), _tmpl$24 = /* @__PURE__ */ web.template(`<div class="px-4 py-3 animate-[slideDown_0.2s_ease-out]"><h4 class="text-xs font-medium text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] uppercase tracking-wide mb-2"></h4><!$><!/>`), _tmpl$25 = /* @__PURE__ */ web.template(`<div class=space-y-1>`), _tmpl$26 = /* @__PURE__ */ web.template(`<div class="flex gap-2 text-xs"><span class="text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] font-mono min-w-[120px]"><!$><!/>:</span><span class="text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))]">`), _tmpl$27 = /* @__PURE__ */ web.template(`<p class="text-xs text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] italic">`), _tmpl$28 = /* @__PURE__ */ web.template(`<div class="flex flex-wrap gap-1.5"><!$><!/><!$><!/>`), _tmpl$29 = /* @__PURE__ */ web.template(`<button type=button class="ml-0.5 hover:text-[color:var(--mcp-ui-accent,var(--color-blue-900))] dark:hover:text-[color:var(--mcp-ui-accent,var(--color-blue-100))]">&times;`), _tmpl$30 = /* @__PURE__ */ web.template(`<span class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium bg-[color:var(--mcp-ui-accent-soft,var(--color-blue-100))] dark:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_30%,transparent))] text-[color:var(--mcp-ui-accent,var(--color-blue-700))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-300))] rounded-full"><button type=button class=hover:underline><span class="text-[color:var(--mcp-ui-accent,var(--color-blue-500))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))]"><!$><!/>:</span> <!$><!/></button><!$><!/>`), _tmpl$31 = /* @__PURE__ */ web.template(`<div class="max-h-48 overflow-y-auto">`), _tmpl$32 = /* @__PURE__ */ web.template(`<button type=button class="mt-1 w-full px-2 py-1 text-xs text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] hover:text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] text-center">`), _tmpl$33 = /* @__PURE__ */ web.template(`<div class="absolute z-50 mt-1 left-0 bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] rounded-lg shadow-[var(--mcp-ui-shadow,var(--shadow-lg))] p-2 min-w-[200px]">`), _tmpl$34 = /* @__PURE__ */ web.template(`<div class=relative><!$><!/><!$><!/>`), _tmpl$35 = /* @__PURE__ */ web.template(`<button type=button class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium border border-dashed border-[color:var(--mcp-ui-border,var(--color-gray-300,#d1d5db))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] rounded-full hover:border-[color:var(--mcp-ui-accent-border,var(--color-blue-400))] hover:text-[color:var(--mcp-ui-accent,var(--color-blue-500))] transition-colors">+ <!$><!/>`), _tmpl$36 = /* @__PURE__ */ web.template(`<form class="flex gap-1"><input type=text autofocus class="flex-1 px-2 py-1 text-sm border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] rounded bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-700,#374151))] text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))] focus:border-[color:var(--mcp-ui-focus,var(--color-blue-400))] outline-none"><button type=submit class="px-2 py-1 text-xs bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] rounded hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))]"></button><button type=button class="px-2 py-1 text-xs text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] hover:text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))]">`), _tmpl$37 = /* @__PURE__ */ web.template(`<span class=ml-1>✓`), _tmpl$38 = /* @__PURE__ */ web.template(`<button type=button><!$><!/><!$><!/>`), _tmpl$39 = /* @__PURE__ */ web.template(`<p class="text-xs text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]">`), _tmpl$40 = /* @__PURE__ */ web.template(`<div class="flex items-center gap-3 p-2 bg-[color:var(--mcp-ui-accent-soft,var(--color-blue-50))] dark:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_20%,transparent))] border border-[color:var(--mcp-ui-accent-border,var(--color-blue-200))] dark:border-[color:var(--mcp-ui-accent-border,var(--color-blue-800))] rounded-md text-sm"><span class="text-[color:var(--mcp-ui-accent,var(--color-blue-700))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-300))]"></span><button type=button class="text-[color:var(--mcp-ui-accent,var(--color-blue-600))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))] underline hover:text-[color:var(--mcp-ui-accent,var(--color-blue-800))] dark:hover:text-[color:var(--mcp-ui-accent,var(--color-blue-200))]">`), _tmpl$41 = /* @__PURE__ */ web.template(`<form class="flex flex-col gap-3"><!$><!/><!$><!/><!$><!/><div class="flex justify-end"><button type=submit class="px-4 py-2 text-sm font-medium rounded-lg text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))] transition-colors">`), _tmpl$42 = /* @__PURE__ */ web.template(`<div class="flex items-center gap-3 p-3 bg-[color:var(--mcp-ui-accent-soft,var(--color-blue-50))] dark:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_20%,transparent))] border border-[color:var(--mcp-ui-accent-border,var(--color-blue-200))] dark:border-[color:var(--mcp-ui-accent-border,var(--color-blue-800))] rounded-lg text-sm"><span class="flex-1 text-[color:var(--mcp-ui-accent,var(--color-blue-800))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-200))] font-medium"></span><span class="text-[color:var(--mcp-ui-accent,var(--color-blue-600))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-300))]"><!$><!/>s...</span><button type=button class="text-[color:var(--mcp-ui-accent,var(--color-blue-600))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))] underline text-xs"></button><button type=button class="text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] hover:text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] dark:hover:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))]">&times;`), _tmpl$43 = /* @__PURE__ */ web.template(`<div class=pl-2>routing: <!$><!/> via <!$><!/> (<!$><!/>ms)`), _tmpl$44 = /* @__PURE__ */ web.template(`<div class="pl-2 text-[color:var(--mcp-ui-warning,var(--color-amber-500))]">missing: <!$><!/>`), _tmpl$45 = /* @__PURE__ */ web.template(`<div class="pt-1 border-t border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))]"><div class="font-medium text-[color:var(--mcp-ui-fg,var(--color-gray-800,#1f2937))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-200,#e5e7eb))]">Server _debug:</div><!$><!/><!$><!/><!$><!/>`), _tmpl$46 = /* @__PURE__ */ web.template(`<pre class="mt-1 p-2 bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-50,#f9fafb))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-900,#111827))] rounded max-h-48 overflow-auto text-[10px]">`), _tmpl$47 = /* @__PURE__ */ web.template(`<div class="px-3 pb-3 space-y-2 text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] border-t border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] pt-2"><div>Fields: <!$><!/> total, <!$><!/> prefilled</div><!$><!/><div class="pt-1 border-t border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))]">autoSubmit: <!$><!/><!$><!/><div> reason: <!$><!/></div></div><!$><!/><div class="pt-1 border-t border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))]"><button type=button class="text-[color:var(--mcp-ui-accent,var(--color-blue-500))] hover:text-[color:var(--mcp-ui-accent,var(--color-blue-700))] underline"></button><!$><!/>`), _tmpl$48 = /* @__PURE__ */ web.template(`<div class="mt-2 border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] rounded-md text-xs font-mono"><button type=button class="w-full px-3 py-1.5 text-left text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-50,#f9fafb))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-800,#1f2937))] flex items-center gap-1"><span></span>Debug trace (<!$><!/>/<!$><!/> prefilled)</button><!$><!/>`), _tmpl$49 = /* @__PURE__ */ web.template(`<div> prefill: <!$><!/>`), _tmpl$50 = /* @__PURE__ */ web.template(`<div class=text-[color:var(--mcp-ui-warning,var(--color-amber-500))]> prefill: (none)`), _tmpl$51 = /* @__PURE__ */ web.template(`<div> source: <!$><!/>`), _tmpl$52 = /* @__PURE__ */ web.template(`<div> displayHint: "<!$><!/>"`), _tmpl$53 = /* @__PURE__ */ web.template(`<div> muted: true`), _tmpl$54 = /* @__PURE__ */ web.template(`<div> prefillMode: <!$><!/>`), _tmpl$55 = /* @__PURE__ */ web.template(`<div> valueFormat: /<!$><!/>/`), _tmpl$56 = /* @__PURE__ */ web.template(`<div class="pl-2 border-l-2 border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] space-y-0.5"><div class="text-[color:var(--mcp-ui-fg,var(--color-gray-800,#1f2937))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-200,#e5e7eb))] font-medium"><!$><!/>:</div><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$57 = /* @__PURE__ */ web.template(`<div>→ submitted: <!$><!/>`), _tmpl$58 = /* @__PURE__ */ web.template(`<div class=pl-2><!$><!/>: <!$><!/> "<!$><!/>" → "<!$><!/>" (<!$><!/>ms)`), _tmpl$59 = /* @__PURE__ */ web.template(`<div class="flex justify-end"><button type=button class="px-3 py-1.5 text-sm font-medium text-[color:var(--mcp-ui-accent,var(--color-blue-600))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))] hover:bg-[color:var(--mcp-ui-accent-soft,var(--color-blue-50))] dark:hover:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_20%,transparent))] rounded-lg transition-colors flex items-center gap-1"><!$><!/> <svg class="w-3.5 h-3.5"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 5l7 7-7 7">`), _tmpl$60 = /* @__PURE__ */ web.template(`<div class=space-y-3><!$><!/><!$><!/>`), _tmpl$61 = /* @__PURE__ */ web.template(`<span class="text-xs font-normal text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]">— <!$><!/>`), _tmpl$62 = /* @__PURE__ */ web.template(`<div class="mt-2 ml-6">`), _tmpl$63 = /* @__PURE__ */ web.template(`<div><div><span></span><!$><!/><!$><!/></div><!$><!/>`), _tmpl$64 = /* @__PURE__ */ web.template(`<p class="text-sm font-medium text-[color:var(--mcp-ui-fg,var(--color-gray-800,#1f2937))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-200,#e5e7eb))] mb-2">`), _tmpl$65 = /* @__PURE__ */ web.template(`<span class=text-[color:var(--mcp-ui-warning,var(--color-amber-600))]>`), _tmpl$66 = /* @__PURE__ */ web.template(`<div class="mb-2 flex items-center gap-2 text-xs"><span></span><!$><!/>`), _tmpl$67 = /* @__PURE__ */ web.template(`<div><!$><!/><!$><!/><!$><!/><div class="flex flex-wrap gap-2">`), _tmpl$68 = /* @__PURE__ */ web.template(`<span class="font-medium text-[color:var(--mcp-ui-fg,var(--color-gray-800,#1f2937))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-200,#e5e7eb))]">`), _tmpl$69 = /* @__PURE__ */ web.template(`<span class=ml-1>&mdash; <!$><!/>`), _tmpl$70 = /* @__PURE__ */ web.template(`<div class="mb-2 p-2 rounded bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-50,#f9fafb))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] text-xs text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"><!$><!/><!$><!/>`), _tmpl$71 = /* @__PURE__ */ web.template(`<span class=mr-1>`), _tmpl$72 = /* @__PURE__ */ web.template(`<div class=space-y-2><div class=space-y-1.5></div><!$><!/>`), _tmpl$73 = /* @__PURE__ */ web.template(`<div class="flex items-center gap-2 text-sm"><span></span><span class="text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))]">`), _tmpl$74 = /* @__PURE__ */ web.template(`<div class="flex items-start gap-1.5 text-xs text-[color:var(--mcp-ui-warning,var(--color-amber-600))] dark:text-[color:var(--mcp-ui-warning,var(--color-amber-400))]"><span class=flex-shrink-0>⚠️</span><span>`), _tmpl$75 = /* @__PURE__ */ web.template(`<span class=italic>&mdash; <!$><!/>`), _tmpl$76 = /* @__PURE__ */ web.template(`<div class="flex items-center gap-2 text-xs text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"><span><!$><!/> <!$><!/></span><!$><!/>`), _tmpl$77 = /* @__PURE__ */ web.template(`<div class="flex flex-wrap gap-2">`), _tmpl$78 = /* @__PURE__ */ web.template(`<div class="flex gap-1"><input type=text class="flex-1 px-3 py-2 text-sm border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] rounded-lg bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-700,#374151))] text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))] focus:border-[color:var(--mcp-ui-focus,var(--color-blue-400))] outline-none"><button type=button class="px-3 py-2 text-sm bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] rounded-lg hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))]">`), _tmpl$79 = /* @__PURE__ */ web.template(`<div class=space-y-3><p class="text-sm text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))]"></p><!$><!/><!$><!/>`), _tmpl$80 = /* @__PURE__ */ web.template(`<span>`), _tmpl$81 = /* @__PURE__ */ web.template(`<p class="text-xs text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] italic">"<!$><!/>"`), _tmpl$82 = /* @__PURE__ */ web.template(`<div class="mt-2 px-3 py-2 bg-[color:var(--mcp-ui-accent-soft,var(--color-blue-50))] dark:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_10%,transparent))] rounded-lg text-sm text-[color:var(--mcp-ui-accent,var(--color-blue-700))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-300))]"><span class=font-medium></span> <!$><!/>`), _tmpl$83 = /* @__PURE__ */ web.template(`<button type=button class="text-xs text-[color:var(--mcp-ui-accent,var(--color-blue-600))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))] hover:underline flex items-center gap-1">&#9998; <!$><!/>`), _tmpl$84 = /* @__PURE__ */ web.template(`<div class=space-y-2><!$><!/><div class=space-y-1></div><!$><!/><!$><!/>`), _tmpl$85 = /* @__PURE__ */ web.template(`<div class="flex gap-2 text-sm"><span class="text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] font-medium min-w-[80px]"><!$><!/>:</span><span class="text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))]">`), _tmpl$86 = /* @__PURE__ */ web.template(`<div class="flex items-center gap-1 flex-wrap">`), _tmpl$87 = /* @__PURE__ */ web.template(`<div class=space-y-2>`), _tmpl$88 = /* @__PURE__ */ web.template(`<span class="ml-1 text-xs text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]">— <!$><!/>`), _tmpl$89 = /* @__PURE__ */ web.template(`<span class="ml-1 text-xs text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]">(<!$><!/>ms)`), _tmpl$90 = /* @__PURE__ */ web.template(`<div><span class=flex-shrink-0></span><div><span></span><!$><!/><!$><!/>`), _tmpl$91 = /* @__PURE__ */ web.template(`<span class="text-[10px] opacity-75">`), _tmpl$92 = /* @__PURE__ */ web.template(`<div><span></span><span></span><!$><!/>`), _tmpl$93 = /* @__PURE__ */ web.template(`<button type=button>&#128260; <!$><!/>`), _tmpl$94 = /* @__PURE__ */ web.template(`<button type=button class="px-2 py-1 text-xs opacity-70 hover:opacity-100">&#9654; <!$><!/>`), _tmpl$95 = /* @__PURE__ */ web.template(`<pre class="mt-2 text-xs opacity-70 overflow-x-auto">`), _tmpl$96 = /* @__PURE__ */ web.template(`<div><div class="flex items-start gap-2"><span class=flex-shrink-0></span><div class=flex-1><p></p><div class="flex gap-2 mt-2"><!$><!/><!$><!/></div><!$><!/>`), _tmpl$97 = /* @__PURE__ */ web.template(`<span class="text-xs font-bold text-[color:var(--mcp-ui-accent,var(--color-blue-600))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))]">`), _tmpl$98 = /* @__PURE__ */ web.template(`<p class="text-[10px] text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]">`), _tmpl$99 = /* @__PURE__ */ web.template(`<div class="rounded-lg border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] px-3 py-2"><div class="flex items-center justify-between mb-1.5"><span class="text-sm font-medium text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))]"><!$><!/> <!$><!/></span><!$><!/></div><div class="flex flex-wrap gap-1.5 mb-1"></div><!$><!/>`), _tmpl$100 = /* @__PURE__ */ web.template(`<span><!$><!/> <!$><!/>`), _tmpl$101 = /* @__PURE__ */ web.template(`<div class=overflow-x-auto><table class="min-w-full text-xs"><thead><tr><th class="px-2 py-1 text-left text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"></th><th class="px-2 py-1 text-left font-medium text-[color:var(--mcp-ui-accent,var(--color-blue-600))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))]"></th><th class="px-2 py-1 text-left font-medium text-[color:var(--mcp-ui-secondary,var(--color-purple-600))] dark:text-[color:var(--mcp-ui-secondary,var(--color-purple-400))]"></th></tr></thead><tbody>`), _tmpl$102 = /* @__PURE__ */ web.template(`<tr><td class="px-2 py-1 font-mono text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"></td><td class="px-2 py-1 text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))]"></td><td class="px-2 py-1 text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))]">`);
 const STATUS_BADGES = {
   loading: {
     labelKey: "statusLoading",
-    class: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
+    class: "bg-[color:var(--mcp-ui-warning-soft,var(--color-yellow-100))] text-[color:var(--mcp-ui-warning,var(--color-yellow-700))] dark:bg-[color:var(--mcp-ui-warning-soft,color-mix(in_oklab,var(--color-yellow-900)_30%,transparent))] dark:text-[color:var(--mcp-ui-warning,var(--color-yellow-400))]"
   },
   ready: {
     labelKey: "statusActionAvailable",
-    class: "bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-400"
+    class: "bg-[color:var(--mcp-ui-info-soft,var(--color-cyan-100))] text-[color:var(--mcp-ui-info,var(--color-cyan-700))] dark:bg-[color:var(--mcp-ui-info-soft,color-mix(in_oklab,var(--color-cyan-900)_30%,transparent))] dark:text-[color:var(--mcp-ui-info,var(--color-cyan-400))]"
   },
   waiting_human: {
     labelKey: "statusYourTurn",
-    class: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 animate-pulse"
+    class: "bg-[color:var(--mcp-ui-accent-soft,var(--color-blue-100))] text-[color:var(--mcp-ui-accent,var(--color-blue-700))] dark:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_30%,transparent))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))] animate-pulse"
   },
   processing: {
     labelKey: "statusProcessing",
-    class: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400"
+    class: "bg-[color:var(--mcp-ui-secondary-soft,var(--color-purple-100))] text-[color:var(--mcp-ui-secondary,var(--color-purple-700))] dark:bg-[color:var(--mcp-ui-secondary-soft,color-mix(in_oklab,var(--color-purple-900)_30%,transparent))] dark:text-[color:var(--mcp-ui-secondary,var(--color-purple-400))]"
   },
   complete: {
     labelKey: "statusComplete",
-    class: "bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400"
+    class: "bg-[color:var(--mcp-ui-success-soft,var(--color-green-100))] text-[color:var(--mcp-ui-success,var(--color-green-600))] dark:bg-[color:var(--mcp-ui-success-soft,color-mix(in_oklab,var(--color-green-900)_30%,transparent))] dark:text-[color:var(--mcp-ui-success,var(--color-green-400))]"
   },
   // The error badge reuses the existing `scratchpadError` key ('Error').
   error: {
     labelKey: "scratchpadError",
-    class: "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400"
+    class: "bg-[color:var(--mcp-ui-danger-soft,var(--color-red-100))] text-[color:var(--mcp-ui-danger,var(--color-red-600))] dark:bg-[color:var(--mcp-ui-danger-soft,color-mix(in_oklab,var(--color-red-900)_30%,transparent))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-400))]"
   }
 };
 const ScratchpadPanel = (props) => {
@@ -179,7 +179,7 @@ const ScratchpadPanel = (props) => {
       },
       get children() {
         var _el$6 = web.getNextElement(_tmpl$);
-        web.effect(() => web.setAttribute(_el$6, "class", `w-3.5 h-3.5 text-gray-400 transition-transform ${collapsed() ? "-rotate-90" : ""}`));
+        web.effect(() => web.setAttribute(_el$6, "class", `w-3.5 h-3.5 text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] transition-transform ${collapsed() ? "-rotate-90" : ""}`));
         return _el$6;
       }
     }), _el$0, _co$2);
@@ -240,7 +240,7 @@ const ScratchpadPanel = (props) => {
                     return _el$79;
                   }
                 }), _el$88, _co$22);
-                web.effect(() => web.className(_el$77, `text-xs font-medium px-2 py-0.5 rounded-full ${turn.status === "done" ? "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400" : turn.status === "active" ? "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400" : turn.status === "skipped" ? "bg-gray-100 dark:bg-gray-700 text-gray-400 line-through" : "bg-gray-100 dark:bg-gray-700 text-gray-400"}`));
+                web.effect(() => web.className(_el$77, `text-xs font-medium px-2 py-0.5 rounded-full ${turn.status === "done" ? "bg-[color:var(--mcp-ui-success-soft,var(--color-green-100))] dark:bg-[color:var(--mcp-ui-success-soft,color-mix(in_oklab,var(--color-green-900)_30%,transparent))] text-[color:var(--mcp-ui-success,var(--color-green-700))] dark:text-[color:var(--mcp-ui-success,var(--color-green-400))]" : turn.status === "active" ? "bg-[color:var(--mcp-ui-accent-soft,var(--color-blue-100))] dark:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_30%,transparent))] text-[color:var(--mcp-ui-accent,var(--color-blue-700))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))]" : turn.status === "skipped" ? "bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-100,#f3f4f6))] dark:bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-700,#374151))] text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] line-through" : "bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-100,#f3f4f6))] dark:bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-700,#374151))] text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"}`));
                 return _el$77;
               })()]
             }));
@@ -288,7 +288,7 @@ const ScratchpadPanel = (props) => {
                   return () => _c$2() ? "⚠️" : msg.type === "question" ? "❓" : "ℹ️";
                 })());
                 web.insert(_el$91, () => msg.text);
-                web.effect(() => web.className(_el$89, `flex items-start gap-2 text-sm rounded-lg px-3 py-2 ${msg.type === "warning" ? "bg-amber-50 dark:bg-amber-900/10 text-amber-700 dark:text-amber-400" : msg.type === "question" ? "bg-blue-50 dark:bg-blue-900/10 text-blue-700 dark:text-blue-400 border border-blue-200 dark:border-blue-800" : "bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-400"}`));
+                web.effect(() => web.className(_el$89, `flex items-start gap-2 text-sm rounded-lg px-3 py-2 ${msg.type === "warning" ? "bg-[color:var(--mcp-ui-warning-soft,var(--color-amber-50))] dark:bg-[color:var(--mcp-ui-warning-soft,color-mix(in_oklab,var(--color-amber-900)_10%,transparent))] text-[color:var(--mcp-ui-warning,var(--color-amber-700))] dark:text-[color:var(--mcp-ui-warning,var(--color-amber-400))]" : msg.type === "question" ? "bg-[color:var(--mcp-ui-accent-soft,var(--color-blue-50))] dark:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_10%,transparent))] text-[color:var(--mcp-ui-accent,var(--color-blue-700))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))] border border-[color:var(--mcp-ui-accent-border,var(--color-blue-200))] dark:border-[color:var(--mcp-ui-accent-border,var(--color-blue-800))]" : "bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-50,#f9fafb))] dark:bg-[color:var(--mcp-ui-surface-muted,color-mix(in_oklab,var(--color-gray-700,#374151)_50%,transparent))] text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"}`));
                 return _el$89;
               })()
             }));
@@ -457,7 +457,7 @@ const ScratchpadPanel = (props) => {
       }
     }), _el$75, _co$18);
     web.effect((_p$) => {
-      var _v$ = `w-full bg-white dark:bg-gray-800 rounded-xl border shadow-lg overflow-visible ${props.state.status === "waiting_human" ? "border-blue-300 dark:border-blue-600" : "border-gray-200 dark:border-gray-700"} ${props.pinned ? "sticky top-0 z-40" : ""}`, _v$2 = `flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-700 ${isCollapsible() ? "cursor-pointer select-none hover:bg-gray-50 dark:hover:bg-gray-750" : ""}`, _v$3 = `px-2 py-0.5 text-xs font-medium rounded-full ${badge().class}`;
+      var _v$ = `mcp-ui-root w-full bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] rounded-xl border shadow-[var(--mcp-ui-shadow,var(--shadow-lg))] overflow-visible ${props.state.status === "waiting_human" ? "border-[color:var(--mcp-ui-accent-border,var(--color-blue-300))] dark:border-[color:var(--mcp-ui-accent-border,var(--color-blue-600))]" : "border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))]"} ${props.pinned ? "sticky top-0 z-40" : ""}`, _v$2 = `flex items-center justify-between px-4 py-3 border-b border-[color:var(--mcp-ui-border,var(--color-gray-100,#f3f4f6))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] ${isCollapsible() ? "cursor-pointer select-none hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-50,#f9fafb))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-750))]" : ""}`, _v$3 = `px-2 py-0.5 text-xs font-medium rounded-full ${badge().class}`;
       _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
       _v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
       _v$3 !== _p$.a && web.className(_el$10, _p$.a = _v$3);
@@ -962,7 +962,7 @@ const InteractiveFilterSection = (props) => {
                             return web.getNextElement(_tmpl$37);
                           }
                         }), _el$156, _co$34);
-                        web.effect(() => web.className(_el$151, `w-full text-left px-2 py-1.5 text-sm rounded hover:bg-blue-50 dark:hover:bg-blue-900/20 ${String(value()) === opt.value ? "text-blue-600 dark:text-blue-400 bg-blue-50/50 dark:bg-blue-900/10" : "text-gray-900 dark:text-white"}`));
+                        web.effect(() => web.className(_el$151, `w-full text-left px-2 py-1.5 text-sm rounded hover:bg-[color:var(--mcp-ui-accent-soft,var(--color-blue-50))] dark:hover:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_20%,transparent))] ${String(value()) === opt.value ? "text-[color:var(--mcp-ui-accent,var(--color-blue-600))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))] bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-50)_50%,transparent))] dark:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_10%,transparent))]" : "text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))]"}`));
                         web.runHydrationEvents();
                         return _el$151;
                       })()
@@ -1366,7 +1366,7 @@ const FormDebugTrace = (props) => {
                   const hasValue = v !== void 0 && v !== "" && !(Array.isArray(v) && v.length === 0);
                   return (() => {
                     var _el$286 = web.getNextElement(_tmpl$57), _el$287 = _el$286.firstChild, _el$289 = _el$287.nextSibling, [_el$290, _co$71] = web.getNextMarker(_el$289.nextSibling);
-                    web.className(_el$286, hasValue ? "text-green-600 dark:text-green-400" : "text-gray-400");
+                    web.className(_el$286, hasValue ? "text-[color:var(--mcp-ui-success,var(--color-green-600))] dark:text-[color:var(--mcp-ui-success,var(--color-green-400))]" : "text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]");
                     web.insert(_el$286, () => hasValue ? `${JSON.stringify(v)} ✓` : "(empty)", _el$290, _co$71);
                     return _el$286;
                   })();
@@ -1516,7 +1516,7 @@ const EnrichedStepsSection = (props) => {
           }
         }), _el$332, _co$83);
         web.effect((_p$) => {
-          var _v$4 = `rounded-lg ${step.status === "active" ? "bg-blue-50/50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800 p-3 animate-pulse" : "px-1"}`, _v$5 = `flex items-center gap-2 text-sm font-medium ${step.status === "done" ? "text-green-600 dark:text-green-400" : step.status === "active" ? "text-blue-600 dark:text-blue-400" : "text-gray-400"}`;
+          var _v$4 = `rounded-lg ${step.status === "active" ? "bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-50)_50%,transparent))] dark:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_10%,transparent))] border border-[color:var(--mcp-ui-accent-border,var(--color-blue-200))] dark:border-[color:var(--mcp-ui-accent-border,var(--color-blue-800))] p-3 animate-pulse" : "px-1"}`, _v$5 = `flex items-center gap-2 text-sm font-medium ${step.status === "done" ? "text-[color:var(--mcp-ui-success,var(--color-green-600))] dark:text-[color:var(--mcp-ui-success,var(--color-green-400))]" : step.status === "active" ? "text-[color:var(--mcp-ui-accent,var(--color-blue-600))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))]" : "text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"}`;
           _v$4 !== _p$.e && web.className(_el$319, _p$.e = _v$4);
           _v$5 !== _p$.t && web.className(_el$320, _p$.t = _v$5);
           return _p$;
@@ -1637,9 +1637,9 @@ const ActionSection = (props) => {
           }
         }), _el$339, _co$84);
         web.effect((_$p) => web.classList(_el$336, {
-          "text-green-600 dark:text-green-400": data().validation.confidence >= 0.8,
-          "text-amber-600 dark:text-amber-400": data().validation.confidence >= 0.5 && data().validation.confidence < 0.8,
-          "text-red-600 dark:text-red-400": data().validation.confidence < 0.5
+          "text-[color:var(--mcp-ui-success,var(--color-green-600))] dark:text-[color:var(--mcp-ui-success,var(--color-green-400))]": data().validation.confidence >= 0.8,
+          "text-[color:var(--mcp-ui-warning,var(--color-amber-600))] dark:text-[color:var(--mcp-ui-warning,var(--color-amber-400))]": data().validation.confidence >= 0.5 && data().validation.confidence < 0.8,
+          "text-[color:var(--mcp-ui-danger,var(--color-red-600))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-400))]": data().validation.confidence < 0.5
         }, _$p));
         return _el$335;
       }
@@ -1665,7 +1665,7 @@ const ActionSection = (props) => {
           }
         }), _el$360, _co$91);
         web.insert(_el$357, () => item.label, _el$362, _co$92);
-        web.effect(() => web.className(_el$357, `px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${item.variant === "primary" ? "bg-blue-600 text-white hover:bg-blue-700" : item.variant === "danger" ? "bg-red-600 text-white hover:bg-red-700" : item.variant === "secondary" ? "border border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/20" : "border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`));
+        web.effect(() => web.className(_el$357, `px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${item.variant === "primary" ? "bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))]" : item.variant === "danger" ? "bg-[color:var(--mcp-ui-danger,var(--color-red-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-danger-hover,var(--color-red-700))]" : item.variant === "secondary" ? "border border-[color:var(--mcp-ui-accent-border,var(--color-blue-300))] dark:border-[color:var(--mcp-ui-accent-border,var(--color-blue-600))] text-[color:var(--mcp-ui-accent,var(--color-blue-700))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-300))] hover:bg-[color:var(--mcp-ui-accent-soft,var(--color-blue-50))] dark:hover:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_20%,transparent))]" : "border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))]"}`));
         return _el$357;
       })()
     }));
@@ -1683,13 +1683,13 @@ const UnderstandingSection = (props) => {
   const confidenceClass = (conf) => {
     switch (conf) {
       case "high":
-        return "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400";
+        return "bg-[color:var(--mcp-ui-success-soft,var(--color-green-100))] dark:bg-[color:var(--mcp-ui-success-soft,color-mix(in_oklab,var(--color-green-900)_30%,transparent))] text-[color:var(--mcp-ui-success,var(--color-green-700))] dark:text-[color:var(--mcp-ui-success,var(--color-green-400))]";
       case "medium":
-        return "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400";
+        return "bg-[color:var(--mcp-ui-warning-soft,var(--color-yellow-100))] dark:bg-[color:var(--mcp-ui-warning-soft,color-mix(in_oklab,var(--color-yellow-900)_30%,transparent))] text-[color:var(--mcp-ui-warning,var(--color-yellow-700))] dark:text-[color:var(--mcp-ui-warning,var(--color-yellow-400))]";
       case "low":
-        return "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400";
+        return "bg-[color:var(--mcp-ui-danger-soft,var(--color-red-100))] dark:bg-[color:var(--mcp-ui-danger-soft,color-mix(in_oklab,var(--color-red-900)_30%,transparent))] text-[color:var(--mcp-ui-danger,var(--color-red-700))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-400))]";
       default:
-        return "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400";
+        return "bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-100,#f3f4f6))] dark:bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-700,#374151))] text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]";
     }
   };
   return (() => {
@@ -1806,17 +1806,11 @@ const FeedbackSection = (props) => {
             return _el$383;
           }
         }), _el$388, _co$97);
-        web.effect((_p$) => {
-          var _v$6 = !!(submitted() === "approve"), _v$7 = !!(submitted() === "reject"), _v$8 = !!(submitted() !== "approve" && submitted() !== "reject");
-          _v$6 !== _p$.e && _el$377.classList.toggle("text-green-600", _p$.e = _v$6);
-          _v$7 !== _p$.t && _el$377.classList.toggle("text-red-600", _p$.t = _v$7);
-          _v$8 !== _p$.a && _el$377.classList.toggle("text-blue-600", _p$.a = _v$8);
-          return _p$;
-        }, {
-          e: void 0,
-          t: void 0,
-          a: void 0
-        });
+        web.effect((_$p) => web.classList(_el$377, {
+          "text-[color:var(--mcp-ui-success,var(--color-green-600))]": submitted() === "approve",
+          "text-[color:var(--mcp-ui-danger,var(--color-red-600))]": submitted() === "reject",
+          "text-[color:var(--mcp-ui-accent,var(--color-blue-600))]": submitted() !== "approve" && submitted() !== "reject"
+        }, _$p));
         return _el$376;
       }
     }), _el$394, _co$98);
@@ -1845,7 +1839,7 @@ const FeedbackSection = (props) => {
                 }
               }), _el$400, _co$100);
               web.insert(_el$397, () => option.label, _el$402, _co$101);
-              web.effect(() => web.className(_el$397, `px-3 py-1.5 text-sm font-medium rounded-lg transition-colors flex items-center gap-1 ${option.variant === "primary" ? "bg-blue-600 text-white hover:bg-blue-700" : option.variant === "danger" ? "bg-red-600 text-white hover:bg-red-700" : "border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`));
+              web.effect(() => web.className(_el$397, `px-3 py-1.5 text-sm font-medium rounded-lg transition-colors flex items-center gap-1 ${option.variant === "primary" ? "bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))]" : option.variant === "danger" ? "bg-[color:var(--mcp-ui-danger,var(--color-red-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-danger-hover,var(--color-red-700))]" : "border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))]"}`));
               return _el$397;
             })()
           }));
@@ -1870,9 +1864,9 @@ const FeedbackSection = (props) => {
             });
             web.insert(_el$392, () => strings.scratchpadSend);
             web.effect((_p$) => {
-              var _v$9 = data().placeholder, _v$0 = showComment();
-              _v$9 !== _p$.e && web.setAttribute(_el$391, "placeholder", _p$.e = _v$9);
-              _v$0 !== _p$.t && web.setProperty(_el$391, "autofocus", _p$.t = _v$0);
+              var _v$6 = data().placeholder, _v$7 = showComment();
+              _v$6 !== _p$.e && web.setAttribute(_el$391, "placeholder", _p$.e = _v$6);
+              _v$7 !== _p$.t && web.setProperty(_el$391, "autofocus", _p$.t = _v$7);
               return _p$;
             }, {
               e: void 0,
@@ -2012,7 +2006,7 @@ const StepperProgressSection = (props) => {
                 return _el$441;
               }
             }), _el$449, _co$112);
-            web.effect(() => web.className(_el$433, `flex items-start gap-2 text-sm ${step.status === "active" ? "font-medium" : ""} ${step.status === "pending" ? "text-gray-400" : "text-gray-700 dark:text-gray-300"}`));
+            web.effect(() => web.className(_el$433, `flex items-start gap-2 text-sm ${step.status === "active" ? "font-medium" : ""} ${step.status === "pending" ? "text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]" : "text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))]"}`));
             return _el$433;
           })()
         }));
@@ -2046,7 +2040,7 @@ const StepperProgressSection = (props) => {
               return _el$454;
             }
           }), _el$456, _co$113);
-          web.effect(() => web.className(_el$451, `flex items-center gap-1 px-2 py-1 rounded text-xs ${step.status === "done" ? "bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400" : step.status === "active" ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 font-medium animate-pulse" : step.status === "error" ? "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400" : "text-gray-400"}`));
+          web.effect(() => web.className(_el$451, `flex items-center gap-1 px-2 py-1 rounded text-xs ${step.status === "done" ? "bg-[color:var(--mcp-ui-success-soft,var(--color-green-50))] dark:bg-[color:var(--mcp-ui-success-soft,color-mix(in_oklab,var(--color-green-900)_20%,transparent))] text-[color:var(--mcp-ui-success,var(--color-green-700))] dark:text-[color:var(--mcp-ui-success,var(--color-green-400))]" : step.status === "active" ? "bg-[color:var(--mcp-ui-accent-soft,var(--color-blue-50))] dark:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_20%,transparent))] text-[color:var(--mcp-ui-accent,var(--color-blue-700))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))] font-medium animate-pulse" : step.status === "error" ? "bg-[color:var(--mcp-ui-danger-soft,var(--color-red-50))] dark:bg-[color:var(--mcp-ui-danger-soft,color-mix(in_oklab,var(--color-red-900)_20%,transparent))] text-[color:var(--mcp-ui-danger,var(--color-red-700))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-400))]" : "text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]"}`));
           return _el$451;
         })()]
       }));
@@ -2086,7 +2080,7 @@ const ErrorSectionRenderer = (props) => {
           return (_a = props.onAction) == null ? void 0 : _a.call(props, data().retryAction);
         };
         web.insert(_el$463, () => data().retryLabel, _el$466, _co$114);
-        web.effect(() => web.className(_el$463, `px-2 py-1 text-xs font-medium rounded ${isWarning() ? "bg-amber-600 text-white hover:bg-amber-700" : "bg-red-600 text-white hover:bg-red-700"} transition-colors`));
+        web.effect(() => web.className(_el$463, `px-2 py-1 text-xs font-medium rounded ${isWarning() ? "bg-[color:var(--mcp-ui-warning,var(--color-amber-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-warning-hover,var(--color-amber-700))]" : "bg-[color:var(--mcp-ui-danger,var(--color-red-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] hover:bg-[color:var(--mcp-ui-danger-hover,var(--color-red-700))]"} transition-colors`));
         web.runHydrationEvents();
         return _el$463;
       }
@@ -2113,7 +2107,7 @@ const ErrorSectionRenderer = (props) => {
         return _el$475;
       }
     }), _el$477, _co$118);
-    web.effect(() => web.className(_el$457, `rounded-lg px-3 py-2 text-sm ${isWarning() ? "bg-amber-50 dark:bg-amber-900/10 text-amber-700 dark:text-amber-400 border border-amber-200 dark:border-amber-800" : "bg-red-50 dark:bg-red-900/10 text-red-700 dark:text-red-400 border border-red-200 dark:border-red-800"}`));
+    web.effect(() => web.className(_el$457, `rounded-lg px-3 py-2 text-sm ${isWarning() ? "bg-[color:var(--mcp-ui-warning-soft,var(--color-amber-50))] dark:bg-[color:var(--mcp-ui-warning-soft,color-mix(in_oklab,var(--color-amber-900)_10%,transparent))] text-[color:var(--mcp-ui-warning,var(--color-amber-700))] dark:text-[color:var(--mcp-ui-warning,var(--color-amber-400))] border border-[color:var(--mcp-ui-warning-border,var(--color-amber-200))] dark:border-[color:var(--mcp-ui-warning-border,var(--color-amber-800))]" : "bg-[color:var(--mcp-ui-danger-soft,var(--color-red-50))] dark:bg-[color:var(--mcp-ui-danger-soft,color-mix(in_oklab,var(--color-red-900)_10%,transparent))] text-[color:var(--mcp-ui-danger,var(--color-red-700))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-400))] border border-[color:var(--mcp-ui-danger-border,var(--color-red-200))] dark:border-[color:var(--mcp-ui-danger-border,var(--color-red-800))]"}`));
     return _el$457;
   })();
 };
@@ -2162,7 +2156,7 @@ const SourceCardSection = (props) => {
         var _el$493 = web.getNextElement(_tmpl$100), _el$495 = _el$493.firstChild, [_el$496, _co$123] = web.getNextMarker(_el$495.nextSibling), _el$494 = _el$496.nextSibling, _el$497 = _el$494.nextSibling, [_el$498, _co$124] = web.getNextMarker(_el$497.nextSibling);
         web.insert(_el$493, () => cap.supported ? "✅" : "❌", _el$496, _co$123);
         web.insert(_el$493, () => cap.label, _el$498, _co$124);
-        web.effect(() => web.className(_el$493, `text-[10px] px-1.5 py-0.5 rounded ${cap.supported ? "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400" : "bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400"}`));
+        web.effect(() => web.className(_el$493, `text-[10px] px-1.5 py-0.5 rounded ${cap.supported ? "bg-[color:var(--mcp-ui-success-soft,var(--color-green-100))] dark:bg-[color:var(--mcp-ui-success-soft,color-mix(in_oklab,var(--color-green-900)_30%,transparent))] text-[color:var(--mcp-ui-success,var(--color-green-700))] dark:text-[color:var(--mcp-ui-success,var(--color-green-400))]" : "bg-[color:var(--mcp-ui-danger-soft,var(--color-red-100))] dark:bg-[color:var(--mcp-ui-danger-soft,color-mix(in_oklab,var(--color-red-900)_30%,transparent))] text-[color:var(--mcp-ui-danger,var(--color-red-600))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-400))]"}`));
         return _el$493;
       })()
     }));
@@ -2228,7 +2222,7 @@ const DiffSection = (props) => {
             var _c$0 = web.memo(() => rVal() !== void 0);
             return () => _c$0() ? String(rVal()) : "—";
           })());
-          web.effect(() => web.className(_el$507, `border-t border-gray-100 dark:border-gray-700 ${isDiff() ? "bg-yellow-50 dark:bg-yellow-900/10" : ""}`));
+          web.effect(() => web.className(_el$507, `border-t border-[color:var(--mcp-ui-border,var(--color-gray-100,#f3f4f6))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] ${isDiff() ? "bg-[color:var(--mcp-ui-warning-soft,var(--color-yellow-50))] dark:bg-[color:var(--mcp-ui-warning-soft,color-mix(in_oklab,var(--color-yellow-900)_10%,transparent))]" : ""}`));
           return _el$507;
         })();
       }