@seed-ship/mcp-ui-solid 4.0.6 → 4.2.0

package/dist/components/ScratchpadPanel.js

@@ -1,13 +1,17 @@
-import { delegateEvents, getNextElement, template, getNextMarker, insert, createComponent, effect, setAttribute, runHydrationEvents, memo, className, setStyleProperty, mergeProps, setProperty } from "solid-js/web";
+import { delegateEvents, getNextElement, template, getNextMarker, insert, createComponent, effect, setAttribute, runHydrationEvents, memo, className, setStyleProperty, mergeProps, setProperty, classList, addEventListener } from "solid-js/web";
 import { createSignal, createEffect, onCleanup, Show, For, Switch, Match } from "solid-js";
 import { FormFieldRenderer } from "./FormFieldRenderer.js";
 import { VerifiedText } from "./VerifiedText.js";
 import { DataPreviewSection } from "./DataPreviewSection.js";
 import { MapRenderer } from "./MapRenderer.js";
 import { ChartJSRenderer } from "./ChartJSRenderer.js";
-var _tmpl$ = /* @__PURE__ */ 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__ */ 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"aria-label=Close><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__ */ 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__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700 space-y-2">`), _tmpl$5 = /* @__PURE__ */ 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">No results for these filters</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">Modify filters`), _tmpl$6 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700">`), _tmpl$7 = /* @__PURE__ */ template(`<p class="text-xs text-red-500 dark:text-red-500 mt-0.5">Code: <!$><!/>`), _tmpl$8 = /* @__PURE__ */ 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; Retry`), _tmpl$9 = /* @__PURE__ */ 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">Close`), _tmpl$0 = /* @__PURE__ */ 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__ */ 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>Search`), _tmpl$10 = /* @__PURE__ */ template(`<div style=overflow-y:auto><!$><!/><div class="divide-y divide-gray-100 dark:divide-gray-700"></div><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$11 = /* @__PURE__ */ 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__ */ 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>
+import { AgentStatusBadge, AgentCard } from "./AgentCard.js";
+import { SplitStepper } from "./SplitStepper.js";
+import { AgentHandoff } from "./AgentHandoff.js";
+import { BriefingDiff } from "./BriefingDiff.js";
+var _tmpl$ = /* @__PURE__ */ 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__ */ 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"aria-label=Close><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__ */ 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__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700 space-y-2">`), _tmpl$5 = /* @__PURE__ */ 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">No results for these filters</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">Modify filters`), _tmpl$6 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700">`), _tmpl$7 = /* @__PURE__ */ template(`<p class="text-xs text-red-500 dark:text-red-500 mt-0.5">Code: <!$><!/>`), _tmpl$8 = /* @__PURE__ */ 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; Retry`), _tmpl$9 = /* @__PURE__ */ 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">Close`), _tmpl$0 = /* @__PURE__ */ 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__ */ 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>Search`), _tmpl$10 = /* @__PURE__ */ template(`<div style=overflow-y:auto><!$><!/><div class="divide-y divide-gray-100 dark:divide-gray-700"></div><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$11 = /* @__PURE__ */ 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__ */ 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>
         @keyframes scratchpad-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
-      </style><!$><!/>`), _tmpl$13 = /* @__PURE__ */ 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__ */ template(`<span class="ml-1 font-normal opacity-75">— <!$><!/>`), _tmpl$15 = /* @__PURE__ */ template(`<span><!$><!/> <!$><!/><!$><!/>`), _tmpl$16 = /* @__PURE__ */ template(`<div><span class="flex-shrink-0 mt-0.5"></span><p>`), _tmpl$17 = /* @__PURE__ */ 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">Preview</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__ */ template(`<p class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$19 = /* @__PURE__ */ template(`<div class="mt-2 overflow-x-auto"><table class="min-w-full text-xs"><thead><tr></tr></thead><tbody>`), _tmpl$20 = /* @__PURE__ */ template(`<th class="px-2 py-1 text-left font-medium text-gray-500 dark:text-gray-400">`), _tmpl$21 = /* @__PURE__ */ template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$22 = /* @__PURE__ */ template(`<td class="px-2 py-1 text-gray-700 dark:text-gray-300">`), _tmpl$23 = /* @__PURE__ */ template(`<pre class="text-xs text-gray-500 overflow-auto">`), _tmpl$24 = /* @__PURE__ */ template(`<div class="px-4 py-3"><h4 class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2"></h4><!$><!/>`), _tmpl$25 = /* @__PURE__ */ template(`<div class=space-y-1>`), _tmpl$26 = /* @__PURE__ */ 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__ */ template(`<p class="text-xs text-gray-400 italic">No filters`), _tmpl$28 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1.5"><!$><!/><!$><!/>`), _tmpl$29 = /* @__PURE__ */ template(`<button type=button class="ml-0.5 hover:text-blue-900 dark:hover:text-blue-100">&times;`), _tmpl$30 = /* @__PURE__ */ 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__ */ template(`<div class="max-h-48 overflow-y-auto">`), _tmpl$32 = /* @__PURE__ */ template(`<button type=button class="mt-1 w-full px-2 py-1 text-xs text-gray-500 hover:text-gray-700 text-center">Cancel`), _tmpl$33 = /* @__PURE__ */ 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__ */ template(`<div class=relative><!$><!/><!$><!/>`), _tmpl$35 = /* @__PURE__ */ 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__ */ 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">OK</button><button type=button class="px-2 py-1 text-xs text-gray-500 hover:text-gray-700">Cancel`), _tmpl$37 = /* @__PURE__ */ template(`<span class=ml-1>✓`), _tmpl$38 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/>`), _tmpl$39 = /* @__PURE__ */ 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$40 = /* @__PURE__ */ 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">Next <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$41 = /* @__PURE__ */ template(`<div class=space-y-3><!$><!/><!$><!/>`), _tmpl$42 = /* @__PURE__ */ template(`<span class="text-xs font-normal text-gray-500 dark:text-gray-400">— <!$><!/>`), _tmpl$43 = /* @__PURE__ */ template(`<div class="mt-2 ml-6">`), _tmpl$44 = /* @__PURE__ */ template(`<div><div><span></span><!$><!/><!$><!/></div><!$><!/>`), _tmpl$45 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-2">`), _tmpl$46 = /* @__PURE__ */ template(`<span class=mr-1>`), _tmpl$47 = /* @__PURE__ */ template(`<div class=space-y-2><div class=space-y-1.5></div><!$><!/>`), _tmpl$48 = /* @__PURE__ */ template(`<div class="flex items-center gap-2 text-sm"><span></span><span class="text-gray-900 dark:text-white">`), _tmpl$49 = /* @__PURE__ */ 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$50 = /* @__PURE__ */ 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">Send`), _tmpl$51 = /* @__PURE__ */ template(`<div class=space-y-3><p class="text-sm text-gray-700 dark:text-gray-300"></p><div class="flex flex-wrap gap-2"></div><!$><!/>`), _tmpl$52 = /* @__PURE__ */ template(`<span>`), _tmpl$53 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400 italic">"<!$><!/>"`), _tmpl$54 = /* @__PURE__ */ 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>Plan:</span> <!$><!/>`), _tmpl$55 = /* @__PURE__ */ template(`<button type=button class="text-xs text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1">&#9998; Modify`), _tmpl$56 = /* @__PURE__ */ template(`<div class=space-y-2><!$><!/><div class=space-y-1></div><!$><!/><!$><!/>`), _tmpl$57 = /* @__PURE__ */ 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$58 = /* @__PURE__ */ template(`<div class="flex items-center gap-1 flex-wrap">`), _tmpl$59 = /* @__PURE__ */ template(`<div class=space-y-2>`), _tmpl$60 = /* @__PURE__ */ template(`<span class="ml-1 text-xs text-gray-500 dark:text-gray-400">— <!$><!/>`), _tmpl$61 = /* @__PURE__ */ template(`<span class="ml-1 text-xs text-gray-400">(<!$><!/>ms)`), _tmpl$62 = /* @__PURE__ */ template(`<div><span class=flex-shrink-0></span><div><span></span><!$><!/><!$><!/>`), _tmpl$63 = /* @__PURE__ */ template(`<span class="text-[10px] opacity-75">`), _tmpl$64 = /* @__PURE__ */ template(`<div><span></span><span></span><!$><!/>`), _tmpl$65 = /* @__PURE__ */ template(`<button type=button>&#128260; <!$><!/>`), _tmpl$66 = /* @__PURE__ */ template(`<button type=button class="px-2 py-1 text-xs opacity-70 hover:opacity-100">&#9654; Details`), _tmpl$67 = /* @__PURE__ */ template(`<pre class="mt-2 text-xs opacity-70 overflow-x-auto">`), _tmpl$68 = /* @__PURE__ */ 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$69 = /* @__PURE__ */ template(`<span class="text-xs font-bold text-blue-600 dark:text-blue-400"><!$><!/> results`), _tmpl$70 = /* @__PURE__ */ template(`<p class="text-[10px] text-gray-400">`), _tmpl$71 = /* @__PURE__ */ 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$72 = /* @__PURE__ */ template(`<span><!$><!/> <!$><!/>`), _tmpl$73 = /* @__PURE__ */ 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$74 = /* @__PURE__ */ 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__ */ 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__ */ template(`<span class="ml-1 font-normal opacity-75">— <!$><!/>`), _tmpl$15 = /* @__PURE__ */ template(`<span><!$><!/> <!$><!/><!$><!/>`), _tmpl$16 = /* @__PURE__ */ template(`<div><span class="flex-shrink-0 mt-0.5"></span><p>`), _tmpl$17 = /* @__PURE__ */ 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">Preview</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__ */ template(`<p class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$19 = /* @__PURE__ */ template(`<div class="mt-2 overflow-x-auto"><table class="min-w-full text-xs"><thead><tr></tr></thead><tbody>`), _tmpl$20 = /* @__PURE__ */ template(`<th class="px-2 py-1 text-left font-medium text-gray-500 dark:text-gray-400">`), _tmpl$21 = /* @__PURE__ */ template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$22 = /* @__PURE__ */ template(`<td class="px-2 py-1 text-gray-700 dark:text-gray-300">`), _tmpl$23 = /* @__PURE__ */ template(`<pre class="text-xs text-gray-500 overflow-auto">`), _tmpl$24 = /* @__PURE__ */ 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__ */ template(`<div class=space-y-1>`), _tmpl$26 = /* @__PURE__ */ 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__ */ template(`<p class="text-xs text-gray-400 italic">No filters`), _tmpl$28 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1.5"><!$><!/><!$><!/>`), _tmpl$29 = /* @__PURE__ */ template(`<button type=button class="ml-0.5 hover:text-blue-900 dark:hover:text-blue-100">&times;`), _tmpl$30 = /* @__PURE__ */ 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__ */ template(`<div class="max-h-48 overflow-y-auto">`), _tmpl$32 = /* @__PURE__ */ template(`<button type=button class="mt-1 w-full px-2 py-1 text-xs text-gray-500 hover:text-gray-700 text-center">Cancel`), _tmpl$33 = /* @__PURE__ */ 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__ */ template(`<div class=relative><!$><!/><!$><!/>`), _tmpl$35 = /* @__PURE__ */ 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__ */ 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">OK</button><button type=button class="px-2 py-1 text-xs text-gray-500 hover:text-gray-700">Cancel`), _tmpl$37 = /* @__PURE__ */ template(`<span class=ml-1>✓`), _tmpl$38 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/>`), _tmpl$39 = /* @__PURE__ */ 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$40 = /* @__PURE__ */ 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">Next <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$41 = /* @__PURE__ */ template(`<div class=space-y-3><!$><!/><!$><!/>`), _tmpl$42 = /* @__PURE__ */ template(`<span class="text-xs font-normal text-gray-500 dark:text-gray-400">— <!$><!/>`), _tmpl$43 = /* @__PURE__ */ template(`<div class="mt-2 ml-6">`), _tmpl$44 = /* @__PURE__ */ template(`<div><div><span></span><!$><!/><!$><!/></div><!$><!/>`), _tmpl$45 = /* @__PURE__ */ template(`<p class="text-sm font-medium text-gray-800 dark:text-gray-200 mb-2">`), _tmpl$46 = /* @__PURE__ */ template(`<span class=text-amber-600>(<!$><!/> unverified)`), _tmpl$47 = /* @__PURE__ */ template(`<div class="mb-2 flex items-center gap-2 text-xs"><span><!$><!/>% verified</span><!$><!/>`), _tmpl$48 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/><!$><!/><div class="flex flex-wrap gap-2">`), _tmpl$49 = /* @__PURE__ */ template(`<span class="font-medium text-gray-800 dark:text-gray-200">`), _tmpl$50 = /* @__PURE__ */ template(`<span class=ml-1>&mdash; <!$><!/>`), _tmpl$51 = /* @__PURE__ */ 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$52 = /* @__PURE__ */ template(`<span class=mr-1>`), _tmpl$53 = /* @__PURE__ */ template(`<div class=space-y-2><div class=space-y-1.5></div><!$><!/>`), _tmpl$54 = /* @__PURE__ */ template(`<div class="flex items-center gap-2 text-sm"><span></span><span class="text-gray-900 dark:text-white">`), _tmpl$55 = /* @__PURE__ */ 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$56 = /* @__PURE__ */ template(`<span class=italic>&mdash; <!$><!/>`), _tmpl$57 = /* @__PURE__ */ template(`<div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400"><span><!$><!/> <!$><!/></span><!$><!/>`), _tmpl$58 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-2">`), _tmpl$59 = /* @__PURE__ */ 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">Send`), _tmpl$60 = /* @__PURE__ */ template(`<div class=space-y-3><p class="text-sm text-gray-700 dark:text-gray-300"></p><!$><!/><!$><!/>`), _tmpl$61 = /* @__PURE__ */ template(`<span>`), _tmpl$62 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400 italic">"<!$><!/>"`), _tmpl$63 = /* @__PURE__ */ 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>Plan:</span> <!$><!/>`), _tmpl$64 = /* @__PURE__ */ template(`<button type=button class="text-xs text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1">&#9998; Modify`), _tmpl$65 = /* @__PURE__ */ template(`<div class=space-y-2><!$><!/><div class=space-y-1></div><!$><!/><!$><!/>`), _tmpl$66 = /* @__PURE__ */ 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$67 = /* @__PURE__ */ template(`<div class="flex items-center gap-1 flex-wrap">`), _tmpl$68 = /* @__PURE__ */ template(`<div class=space-y-2>`), _tmpl$69 = /* @__PURE__ */ template(`<span class="ml-1 text-xs text-gray-500 dark:text-gray-400">— <!$><!/>`), _tmpl$70 = /* @__PURE__ */ template(`<span class="ml-1 text-xs text-gray-400">(<!$><!/>ms)`), _tmpl$71 = /* @__PURE__ */ template(`<div><span class=flex-shrink-0></span><div><span></span><!$><!/><!$><!/>`), _tmpl$72 = /* @__PURE__ */ template(`<span class="text-[10px] opacity-75">`), _tmpl$73 = /* @__PURE__ */ template(`<div><span></span><span></span><!$><!/>`), _tmpl$74 = /* @__PURE__ */ template(`<button type=button>&#128260; <!$><!/>`), _tmpl$75 = /* @__PURE__ */ template(`<button type=button class="px-2 py-1 text-xs opacity-70 hover:opacity-100">&#9654; Details`), _tmpl$76 = /* @__PURE__ */ template(`<pre class="mt-2 text-xs opacity-70 overflow-x-auto">`), _tmpl$77 = /* @__PURE__ */ 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$78 = /* @__PURE__ */ template(`<span class="text-xs font-bold text-blue-600 dark:text-blue-400"><!$><!/> results`), _tmpl$79 = /* @__PURE__ */ template(`<p class="text-[10px] text-gray-400">`), _tmpl$80 = /* @__PURE__ */ 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$81 = /* @__PURE__ */ template(`<span><!$><!/> <!$><!/>`), _tmpl$82 = /* @__PURE__ */ 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$83 = /* @__PURE__ */ 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">`);
 const STATUS_BADGES = {
   loading: {
     label: "Loading...",
@@ -146,9 +150,23 @@ const ScratchpadPanel = (props) => {
     if (previewTimer) clearTimeout(previewTimer);
   });
   return (() => {
-    var _el$ = getNextElement(_tmpl$12), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$7 = _el$5.nextSibling, [_el$8, _co$] = getNextMarker(_el$7.nextSibling), _el$9 = _el$3.nextSibling, _el$0 = _el$9.firstChild, _el$10 = _el$0.nextSibling, [_el$11, _co$2] = getNextMarker(_el$10.nextSibling), _el$67 = _el$2.nextSibling, [_el$68, _co$15] = getNextMarker(_el$67.nextSibling), _el$51 = _el$68.nextSibling, _el$69 = _el$51.nextSibling, [_el$70, _co$16] = getNextMarker(_el$69.nextSibling);
+    var _el$ = getNextElement(_tmpl$12), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$7 = _el$5.nextSibling, [_el$8, _co$] = getNextMarker(_el$7.nextSibling), _el$9 = _el$8.nextSibling, [_el$0, _co$2] = getNextMarker(_el$9.nextSibling), _el$1 = _el$3.nextSibling, _el$10 = _el$1.firstChild, _el$12 = _el$10.nextSibling, [_el$13, _co$3] = getNextMarker(_el$12.nextSibling), _el$69 = _el$2.nextSibling, [_el$70, _co$16] = getNextMarker(_el$69.nextSibling), _el$53 = _el$70.nextSibling, _el$71 = _el$53.nextSibling, [_el$72, _co$17] = getNextMarker(_el$71.nextSibling);
     _el$2.$$click = () => isCollapsible() && setCollapsed(!collapsed());
     insert(_el$5, () => props.state.title);
+    insert(_el$3, () => {
+      const agentSection = props.state.sections.find((s) => s.type === "agent_card");
+      if (!agentSection) return null;
+      const ac = parseContent(agentSection.content);
+      if (!(ac == null ? void 0 : ac.name)) return null;
+      return createComponent(AgentStatusBadge, {
+        get agentName() {
+          return ac.name;
+        },
+        get status() {
+          return ac.status || "idle";
+        }
+      });
+    }, _el$8, _co$);
     insert(_el$3, createComponent(Show, {
       get when() {
         return isCollapsible();
@@ -158,36 +176,36 @@ const ScratchpadPanel = (props) => {
         effect(() => setAttribute(_el$6, "class", `w-3.5 h-3.5 text-gray-400 transition-transform ${collapsed() ? "-rotate-90" : ""}`));
         return _el$6;
       }
-    }), _el$8, _co$);
-    insert(_el$0, () => badge().label);
-    insert(_el$9, createComponent(Show, {
+    }), _el$0, _co$2);
+    insert(_el$10, () => badge().label);
+    insert(_el$1, createComponent(Show, {
       get when() {
         return memo(() => !!isClosable())() && props.onClose;
       },
       get children() {
-        var _el$1 = getNextElement(_tmpl$2);
-        _el$1.$$click = (e) => {
+        var _el$11 = getNextElement(_tmpl$2);
+        _el$11.$$click = (e) => {
           var _a2;
           e.stopPropagation();
           (_a2 = props.onClose) == null ? void 0 : _a2.call(props);
         };
         runHydrationEvents();
-        return _el$1;
+        return _el$11;
       }
-    }), _el$11, _co$2);
+    }), _el$13, _co$3);
     insert(_el$, createComponent(Show, {
       get when() {
         return !collapsed();
       },
       get children() {
-        var _el$12 = getNextElement(_tmpl$10), _el$41 = _el$12.firstChild, [_el$42, _co$7] = getNextMarker(_el$41.nextSibling), _el$14 = _el$42.nextSibling, _el$43 = _el$14.nextSibling, [_el$44, _co$8] = getNextMarker(_el$43.nextSibling), _el$45 = _el$44.nextSibling, [_el$46, _co$9] = getNextMarker(_el$45.nextSibling), _el$47 = _el$46.nextSibling, [_el$48, _co$0] = getNextMarker(_el$47.nextSibling), _el$49 = _el$48.nextSibling, [_el$50, _co$1] = getNextMarker(_el$49.nextSibling);
-        insert(_el$12, createComponent(Show, {
+        var _el$14 = getNextElement(_tmpl$10), _el$43 = _el$14.firstChild, [_el$44, _co$8] = getNextMarker(_el$43.nextSibling), _el$16 = _el$44.nextSibling, _el$45 = _el$16.nextSibling, [_el$46, _co$9] = getNextMarker(_el$45.nextSibling), _el$47 = _el$46.nextSibling, [_el$48, _co$0] = getNextMarker(_el$47.nextSibling), _el$49 = _el$48.nextSibling, [_el$50, _co$1] = getNextMarker(_el$49.nextSibling), _el$51 = _el$50.nextSibling, [_el$52, _co$10] = getNextMarker(_el$51.nextSibling);
+        insert(_el$14, createComponent(Show, {
           get when() {
             return memo(() => !!props.state.turnHistory)() && props.state.turnHistory.length > 0;
           },
           get children() {
-            var _el$13 = getNextElement(_tmpl$3);
-            insert(_el$13, createComponent(For, {
+            var _el$15 = getNextElement(_tmpl$3);
+            insert(_el$15, createComponent(For, {
               get each() {
                 return props.state.turnHistory;
               },
@@ -199,30 +217,30 @@ const ScratchpadPanel = (props) => {
                   return getNextElement(_tmpl$13);
                 }
               }), (() => {
-                var _el$72 = getNextElement(_tmpl$15), _el$78 = _el$72.firstChild, [_el$79, _co$18] = getNextMarker(_el$78.nextSibling), _el$73 = _el$79.nextSibling, _el$80 = _el$73.nextSibling, [_el$81, _co$19] = getNextMarker(_el$80.nextSibling), _el$82 = _el$81.nextSibling, [_el$83, _co$20] = getNextMarker(_el$82.nextSibling);
-                insert(_el$72, (() => {
+                var _el$74 = getNextElement(_tmpl$15), _el$80 = _el$74.firstChild, [_el$81, _co$19] = getNextMarker(_el$80.nextSibling), _el$75 = _el$81.nextSibling, _el$82 = _el$75.nextSibling, [_el$83, _co$20] = getNextMarker(_el$82.nextSibling), _el$84 = _el$83.nextSibling, [_el$85, _co$21] = getNextMarker(_el$84.nextSibling);
+                insert(_el$74, (() => {
                   var _c$ = memo(() => turn.status === "done");
                   return () => _c$() ? "✅" : turn.status === "active" ? "●" : "○";
-                })(), _el$79, _co$18);
-                insert(_el$72, () => turn.label, _el$81, _co$19);
-                insert(_el$72, createComponent(Show, {
+                })(), _el$81, _co$19);
+                insert(_el$74, () => turn.label, _el$83, _co$20);
+                insert(_el$74, createComponent(Show, {
                   get when() {
                     return turn.summary;
                   },
                   get children() {
-                    var _el$74 = getNextElement(_tmpl$14), _el$75 = _el$74.firstChild, _el$76 = _el$75.nextSibling, [_el$77, _co$17] = getNextMarker(_el$76.nextSibling);
-                    insert(_el$74, () => turn.summary, _el$77, _co$17);
-                    return _el$74;
+                    var _el$76 = getNextElement(_tmpl$14), _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling, [_el$79, _co$18] = getNextMarker(_el$78.nextSibling);
+                    insert(_el$76, () => turn.summary, _el$79, _co$18);
+                    return _el$76;
                   }
-                }), _el$83, _co$20);
-                effect(() => className(_el$72, `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"}`));
-                return _el$72;
+                }), _el$85, _co$21);
+                effect(() => className(_el$74, `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"}`));
+                return _el$74;
               })()]
             }));
-            return _el$13;
+            return _el$15;
           }
-        }), _el$42, _co$7);
-        insert(_el$14, createComponent(For, {
+        }), _el$44, _co$8);
+        insert(_el$16, createComponent(For, {
           get each() {
             return props.state.sections;
           },
@@ -243,188 +261,188 @@ const ScratchpadPanel = (props) => {
             }
           })
         }));
-        insert(_el$12, createComponent(Show, {
+        insert(_el$14, createComponent(Show, {
           get when() {
             return props.state.agentMessages.length > 0;
           },
           get children() {
-            var _el$15 = getNextElement(_tmpl$4);
-            insert(_el$15, createComponent(For, {
+            var _el$17 = getNextElement(_tmpl$4);
+            insert(_el$17, createComponent(For, {
               get each() {
                 return props.state.agentMessages;
               },
               children: (msg) => (() => {
-                var _el$84 = getNextElement(_tmpl$16), _el$85 = _el$84.firstChild, _el$86 = _el$85.nextSibling;
-                insert(_el$85, (() => {
+                var _el$86 = getNextElement(_tmpl$16), _el$87 = _el$86.firstChild, _el$88 = _el$87.nextSibling;
+                insert(_el$87, (() => {
                   var _c$2 = memo(() => msg.type === "warning");
                   return () => _c$2() ? "⚠️" : msg.type === "question" ? "❓" : "ℹ️";
                 })());
-                insert(_el$86, () => msg.text);
-                effect(() => className(_el$84, `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"}`));
-                return _el$84;
+                insert(_el$88, () => msg.text);
+                effect(() => className(_el$86, `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"}`));
+                return _el$86;
               })()
             }));
-            return _el$15;
+            return _el$17;
           }
-        }), _el$44, _co$8);
-        insert(_el$12, createComponent(Show, {
+        }), _el$46, _co$9);
+        insert(_el$14, createComponent(Show, {
           get when() {
             return preview();
           },
           get children() {
-            var _el$16 = getNextElement(_tmpl$6);
-            insert(_el$16, createComponent(Show, {
+            var _el$18 = getNextElement(_tmpl$6);
+            insert(_el$18, createComponent(Show, {
               get when() {
                 return preview().count === 0;
               },
               get fallback() {
                 return [(() => {
-                  var _el$87 = getNextElement(_tmpl$17), _el$88 = _el$87.firstChild, _el$89 = _el$88.nextSibling;
-                  insert(_el$89, () => preview().count.toLocaleString());
-                  return _el$87;
+                  var _el$89 = getNextElement(_tmpl$17), _el$90 = _el$89.firstChild, _el$91 = _el$90.nextSibling;
+                  insert(_el$91, () => preview().count.toLocaleString());
+                  return _el$89;
                 })(), (() => {
-                  var _el$90 = getNextElement(_tmpl$18);
-                  insert(_el$90, () => preview().summary);
-                  return _el$90;
+                  var _el$92 = getNextElement(_tmpl$18);
+                  insert(_el$92, () => preview().summary);
+                  return _el$92;
                 })(), createComponent(Show, {
                   get when() {
                     return memo(() => !!preview().rows)() && preview().rows.length > 0;
                   },
                   get children() {
-                    var _el$91 = getNextElement(_tmpl$19), _el$92 = _el$91.firstChild, _el$93 = _el$92.firstChild, _el$94 = _el$93.firstChild, _el$95 = _el$93.nextSibling;
-                    insert(_el$94, createComponent(For, {
+                    var _el$93 = getNextElement(_tmpl$19), _el$94 = _el$93.firstChild, _el$95 = _el$94.firstChild, _el$96 = _el$95.firstChild, _el$97 = _el$95.nextSibling;
+                    insert(_el$96, createComponent(For, {
                       get each() {
                         return Object.keys(preview().rows[0]);
                       },
                       children: (k) => (() => {
-                        var _el$96 = getNextElement(_tmpl$20);
-                        insert(_el$96, k);
-                        return _el$96;
+                        var _el$98 = getNextElement(_tmpl$20);
+                        insert(_el$98, k);
+                        return _el$98;
                       })()
                     }));
-                    insert(_el$95, createComponent(For, {
+                    insert(_el$97, createComponent(For, {
                       get each() {
                         return preview().rows.slice(0, 5);
                       },
                       children: (row) => (() => {
-                        var _el$97 = getNextElement(_tmpl$21);
-                        insert(_el$97, createComponent(For, {
+                        var _el$99 = getNextElement(_tmpl$21);
+                        insert(_el$99, createComponent(For, {
                           get each() {
                             return Object.values(row);
                           },
                           children: (v) => (() => {
-                            var _el$98 = getNextElement(_tmpl$22);
-                            insert(_el$98, () => String(v));
-                            return _el$98;
+                            var _el$100 = getNextElement(_tmpl$22);
+                            insert(_el$100, () => String(v));
+                            return _el$100;
                           })()
                         }));
-                        return _el$97;
+                        return _el$99;
                       })()
                     }));
-                    return _el$91;
+                    return _el$93;
                   }
                 })];
               },
               get children() {
-                var _el$17 = getNextElement(_tmpl$5), _el$18 = _el$17.firstChild, _el$19 = _el$18.nextSibling, _el$20 = _el$19.nextSibling;
-                _el$20.$$click = () => {
+                var _el$19 = getNextElement(_tmpl$5), _el$20 = _el$19.firstChild, _el$21 = _el$20.nextSibling, _el$22 = _el$21.nextSibling;
+                _el$22.$$click = () => {
                   var _a2;
                   return (_a2 = props.onAction) == null ? void 0 : _a2.call(props, "refine_filters");
                 };
                 runHydrationEvents();
-                return _el$17;
+                return _el$19;
               }
             }));
-            return _el$16;
+            return _el$18;
           }
-        }), _el$46, _co$9);
-        insert(_el$12, createComponent(Show, {
+        }), _el$48, _co$0);
+        insert(_el$14, createComponent(Show, {
           get when() {
             return memo(() => props.state.status === "error")() && props.state.error;
           },
           get children() {
-            var _el$21 = getNextElement(_tmpl$0), _el$22 = _el$21.firstChild, _el$23 = _el$22.firstChild, _el$24 = _el$23.nextSibling, _el$25 = _el$24.firstChild, _el$30 = _el$25.nextSibling, [_el$31, _co$4] = getNextMarker(_el$30.nextSibling), _el$32 = _el$22.nextSibling, _el$35 = _el$32.firstChild, [_el$36, _co$5] = getNextMarker(_el$35.nextSibling), _el$37 = _el$36.nextSibling, [_el$38, _co$6] = getNextMarker(_el$37.nextSibling);
-            insert(_el$25, () => props.state.error.message);
-            insert(_el$24, createComponent(Show, {
+            var _el$23 = getNextElement(_tmpl$0), _el$24 = _el$23.firstChild, _el$25 = _el$24.firstChild, _el$26 = _el$25.nextSibling, _el$27 = _el$26.firstChild, _el$32 = _el$27.nextSibling, [_el$33, _co$5] = getNextMarker(_el$32.nextSibling), _el$34 = _el$24.nextSibling, _el$37 = _el$34.firstChild, [_el$38, _co$6] = getNextMarker(_el$37.nextSibling), _el$39 = _el$38.nextSibling, [_el$40, _co$7] = getNextMarker(_el$39.nextSibling);
+            insert(_el$27, () => props.state.error.message);
+            insert(_el$26, createComponent(Show, {
               get when() {
                 return props.state.error.code;
               },
               get children() {
-                var _el$26 = getNextElement(_tmpl$7), _el$27 = _el$26.firstChild, _el$28 = _el$27.nextSibling, [_el$29, _co$3] = getNextMarker(_el$28.nextSibling);
-                insert(_el$26, () => props.state.error.code, _el$29, _co$3);
-                return _el$26;
+                var _el$28 = getNextElement(_tmpl$7), _el$29 = _el$28.firstChild, _el$30 = _el$29.nextSibling, [_el$31, _co$4] = getNextMarker(_el$30.nextSibling);
+                insert(_el$28, () => props.state.error.code, _el$31, _co$4);
+                return _el$28;
               }
-            }), _el$31, _co$4);
-            insert(_el$32, createComponent(Show, {
+            }), _el$33, _co$5);
+            insert(_el$34, createComponent(Show, {
               get when() {
                 return props.state.error.retryable !== false;
               },
               get children() {
-                var _el$33 = getNextElement(_tmpl$8);
-                _el$33.$$click = () => {
+                var _el$35 = getNextElement(_tmpl$8);
+                _el$35.$$click = () => {
                   var _a2;
                   return (_a2 = props.onRetry) == null ? void 0 : _a2.call(props);
                 };
                 runHydrationEvents();
-                return _el$33;
+                return _el$35;
               }
-            }), _el$36, _co$5);
-            insert(_el$32, createComponent(Show, {
+            }), _el$38, _co$6);
+            insert(_el$34, createComponent(Show, {
               get when() {
                 return props.onClose;
               },
               get children() {
-                var _el$34 = getNextElement(_tmpl$9);
-                _el$34.$$click = () => {
+                var _el$36 = getNextElement(_tmpl$9);
+                _el$36.$$click = () => {
                   var _a2;
                   return (_a2 = props.onClose) == null ? void 0 : _a2.call(props);
                 };
                 runHydrationEvents();
-                return _el$34;
+                return _el$36;
               }
-            }), _el$38, _co$6);
-            return _el$21;
+            }), _el$40, _co$7);
+            return _el$23;
           }
-        }), _el$48, _co$0);
-        insert(_el$12, createComponent(Show, {
+        }), _el$50, _co$1);
+        insert(_el$14, createComponent(Show, {
           get when() {
             return memo(() => props.state.status === "waiting_human")() && hasFilters();
           },
           get children() {
-            var _el$39 = getNextElement(_tmpl$1), _el$40 = _el$39.firstChild;
-            _el$40.$$click = () => handleAction("search", {
+            var _el$41 = getNextElement(_tmpl$1), _el$42 = _el$41.firstChild;
+            _el$42.$$click = () => handleAction("search", {
               filters: props.state.filters
             });
             runHydrationEvents();
-            return _el$39;
+            return _el$41;
           }
-        }), _el$50, _co$1);
-        effect((_$p) => setStyleProperty(_el$12, "max-height", props.maxHeight || "500px"));
-        return _el$12;
+        }), _el$52, _co$10);
+        effect((_$p) => setStyleProperty(_el$14, "max-height", props.maxHeight || "500px"));
+        return _el$14;
       }
-    }), _el$68, _co$15);
+    }), _el$70, _co$16);
     insert(_el$, createComponent(Show, {
       get when() {
         return props.debugOverlay;
       },
       get children() {
-        var _el$52 = getNextElement(_tmpl$11), _el$57 = _el$52.firstChild, [_el$58, _co$10] = getNextMarker(_el$57.nextSibling), _el$53 = _el$58.nextSibling, _el$59 = _el$53.nextSibling, [_el$60, _co$11] = getNextMarker(_el$59.nextSibling), _el$54 = _el$60.nextSibling, _el$61 = _el$54.nextSibling, [_el$62, _co$12] = getNextMarker(_el$61.nextSibling), _el$55 = _el$62.nextSibling, _el$63 = _el$55.nextSibling, [_el$64, _co$13] = getNextMarker(_el$63.nextSibling), _el$56 = _el$64.nextSibling, _el$65 = _el$56.nextSibling, [_el$66, _co$14] = getNextMarker(_el$65.nextSibling);
-        insert(_el$52, () => props.state.id, _el$58, _co$10);
-        insert(_el$52, eventCount, _el$60, _co$11);
-        insert(_el$52, () => {
+        var _el$54 = getNextElement(_tmpl$11), _el$59 = _el$54.firstChild, [_el$60, _co$11] = getNextMarker(_el$59.nextSibling), _el$55 = _el$60.nextSibling, _el$61 = _el$55.nextSibling, [_el$62, _co$12] = getNextMarker(_el$61.nextSibling), _el$56 = _el$62.nextSibling, _el$63 = _el$56.nextSibling, [_el$64, _co$13] = getNextMarker(_el$63.nextSibling), _el$57 = _el$64.nextSibling, _el$65 = _el$57.nextSibling, [_el$66, _co$14] = getNextMarker(_el$65.nextSibling), _el$58 = _el$66.nextSibling, _el$67 = _el$58.nextSibling, [_el$68, _co$15] = getNextMarker(_el$67.nextSibling);
+        insert(_el$54, () => props.state.id, _el$60, _co$11);
+        insert(_el$54, eventCount, _el$62, _co$12);
+        insert(_el$54, () => {
           var _a2;
           return ((_a2 = props.state.sections) == null ? void 0 : _a2.length) || 0;
-        }, _el$62, _co$12);
-        insert(_el$52, () => props.state.status, _el$64, _co$13);
-        insert(_el$52, lastEvent, _el$66, _co$14);
-        return _el$52;
+        }, _el$64, _co$13);
+        insert(_el$54, () => props.state.status, _el$66, _co$14);
+        insert(_el$54, lastEvent, _el$68, _co$15);
+        return _el$54;
       }
-    }), _el$70, _co$16);
+    }), _el$72, _co$17);
     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}`;
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
       _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-      _v$3 !== _p$.a && className(_el$0, _p$.a = _v$3);
+      _v$3 !== _p$.a && className(_el$10, _p$.a = _v$3);
       return _p$;
     }, {
       e: void 0,
@@ -447,9 +465,9 @@ function parseContent(content) {
 }
 const SectionRenderer = (props) => {
   return (() => {
-    var _el$99 = getNextElement(_tmpl$24), _el$100 = _el$99.firstChild, _el$103 = _el$100.nextSibling, [_el$104, _co$21] = getNextMarker(_el$103.nextSibling);
-    insert(_el$100, () => props.section.title);
-    insert(_el$99, createComponent(Switch, {
+    var _el$101 = getNextElement(_tmpl$24), _el$102 = _el$101.firstChild, _el$105 = _el$102.nextSibling, [_el$106, _co$22] = getNextMarker(_el$105.nextSibling);
+    insert(_el$102, () => props.section.title);
+    insert(_el$101, createComponent(Switch, {
       get children() {
         return [createComponent(Match, {
           get when() {
@@ -484,9 +502,9 @@ const SectionRenderer = (props) => {
             return props.section.type === "message";
           },
           get children() {
-            var _el$101 = getNextElement(_tmpl$18);
-            insert(_el$101, () => String(props.section.content));
-            return _el$101;
+            var _el$103 = getNextElement(_tmpl$18);
+            insert(_el$103, () => String(props.section.content));
+            return _el$103;
           }
         }), createComponent(Match, {
           get when() {
@@ -697,40 +715,84 @@ const SectionRenderer = (props) => {
               });
             })();
           }
+        }), createComponent(Match, {
+          get when() {
+            return props.section.type === "agent_card";
+          },
+          get children() {
+            return createComponent(AgentCard, {
+              get content() {
+                return parseContent(props.section.content);
+              }
+            });
+          }
+        }), createComponent(Match, {
+          get when() {
+            return props.section.type === "split_stepper";
+          },
+          get children() {
+            return createComponent(SplitStepper, {
+              get content() {
+                return parseContent(props.section.content);
+              }
+            });
+          }
+        }), createComponent(Match, {
+          get when() {
+            return props.section.type === "agent_handoff";
+          },
+          get children() {
+            return createComponent(AgentHandoff, {
+              get content() {
+                return parseContent(props.section.content);
+              }
+            });
+          }
+        }), createComponent(Match, {
+          get when() {
+            return props.section.type === "briefing_diff";
+          },
+          get children() {
+            return createComponent(BriefingDiff, {
+              get content() {
+                return parseContent(props.section.content);
+              }
+            });
+          }
         }), createComponent(Match, {
           when: true,
           get children() {
-            var _el$102 = getNextElement(_tmpl$23);
-            insert(_el$102, () => JSON.stringify(props.section.content, null, 2));
-            return _el$102;
+            var _el$104 = getNextElement(_tmpl$23);
+            insert(_el$104, () => JSON.stringify(props.section.content, null, 2));
+            return _el$104;
           }
         })];
       }
-    }), _el$104, _co$21);
-    return _el$99;
+    }), _el$106, _co$22);
+    return _el$101;
   })();
 };
 const DataSection = (props) => {
   const entries = () => typeof props.content === "object" && props.content ? Object.entries(props.content) : [];
   return (() => {
-    var _el$105 = getNextElement(_tmpl$25);
-    insert(_el$105, createComponent(For, {
+    var _el$107 = getNextElement(_tmpl$25);
+    insert(_el$107, createComponent(For, {
       get each() {
         return entries();
       },
       children: ([k, v]) => (() => {
-        var _el$106 = getNextElement(_tmpl$26), _el$107 = _el$106.firstChild, _el$109 = _el$107.firstChild, [_el$110, _co$22] = getNextMarker(_el$109.nextSibling);
-        _el$110.nextSibling;
-        var _el$111 = _el$107.nextSibling;
-        insert(_el$107, k, _el$110, _co$22);
-        insert(_el$111, (() => {
+        var _el$108 = getNextElement(_tmpl$26), _el$109 = _el$108.firstChild, _el$111 = _el$109.firstChild, [_el$112, _co$23] = getNextMarker(_el$111.nextSibling);
+        _el$112.nextSibling;
+        var _el$113 = _el$109.nextSibling;
+        insert(_el$109, k, _el$112, _co$23);
+        insert(_el$113, (() => {
           var _c$3 = memo(() => !!Array.isArray(v));
           return () => _c$3() ? v.join(", ") : String(v);
         })());
-        return _el$106;
+        return _el$108;
       })()
     }));
-    return _el$105;
+    return _el$107;
   })();
 };
 const InteractiveFilterSection = (props) => {
@@ -764,8 +826,8 @@ const InteractiveFilterSection = (props) => {
   };
   const getDef = (key) => filterDefs()[key] || {};
   return (() => {
-    var _el$112 = getNextElement(_tmpl$28), _el$114 = _el$112.firstChild, [_el$115, _co$23] = getNextMarker(_el$114.nextSibling), _el$116 = _el$115.nextSibling, [_el$117, _co$24] = getNextMarker(_el$116.nextSibling);
-    insert(_el$112, createComponent(For, {
+    var _el$114 = getNextElement(_tmpl$28), _el$116 = _el$114.firstChild, [_el$117, _co$24] = getNextMarker(_el$116.nextSibling), _el$118 = _el$117.nextSibling, [_el$119, _co$25] = getNextMarker(_el$118.nextSibling);
+    insert(_el$114, createComponent(For, {
       get each() {
         return allKeys();
       },
@@ -774,136 +836,136 @@ const InteractiveFilterSection = (props) => {
         const value = () => props.filters[key];
         const hasValue = () => value() !== void 0 && value() !== "";
         return (() => {
-          var _el$118 = getNextElement(_tmpl$34), _el$134 = _el$118.firstChild, [_el$135, _co$28] = getNextMarker(_el$134.nextSibling), _el$136 = _el$135.nextSibling, [_el$137, _co$29] = getNextMarker(_el$136.nextSibling);
-          insert(_el$118, createComponent(Show, {
+          var _el$120 = getNextElement(_tmpl$34), _el$136 = _el$120.firstChild, [_el$137, _co$29] = getNextMarker(_el$136.nextSibling), _el$138 = _el$137.nextSibling, [_el$139, _co$30] = getNextMarker(_el$138.nextSibling);
+          insert(_el$120, createComponent(Show, {
             get when() {
               return hasValue();
             },
             get fallback() {
               return (() => {
-                var _el$138 = getNextElement(_tmpl$35), _el$139 = _el$138.firstChild, _el$140 = _el$139.nextSibling, [_el$141, _co$30] = getNextMarker(_el$140.nextSibling);
-                _el$138.$$click = () => {
+                var _el$140 = getNextElement(_tmpl$35), _el$141 = _el$140.firstChild, _el$142 = _el$141.nextSibling, [_el$143, _co$31] = getNextMarker(_el$142.nextSibling);
+                _el$140.$$click = () => {
                   setEditingKey(key);
                   setEditValue("");
                 };
-                insert(_el$138, () => {
+                insert(_el$140, () => {
                   var _a;
                   return ((_a = def()) == null ? void 0 : _a.label) || key;
-                }, _el$141, _co$30);
+                }, _el$143, _co$31);
                 runHydrationEvents();
-                return _el$138;
+                return _el$140;
               })();
             },
             get children() {
-              var _el$119 = getNextElement(_tmpl$30), _el$120 = _el$119.firstChild, _el$121 = _el$120.firstChild, _el$123 = _el$121.firstChild, [_el$124, _co$25] = getNextMarker(_el$123.nextSibling);
-              _el$124.nextSibling;
-              var _el$125 = _el$121.nextSibling, _el$126 = _el$125.nextSibling, [_el$127, _co$26] = getNextMarker(_el$126.nextSibling), _el$129 = _el$120.nextSibling, [_el$130, _co$27] = getNextMarker(_el$129.nextSibling);
-              _el$120.$$click = () => {
+              var _el$121 = getNextElement(_tmpl$30), _el$122 = _el$121.firstChild, _el$123 = _el$122.firstChild, _el$125 = _el$123.firstChild, [_el$126, _co$26] = getNextMarker(_el$125.nextSibling);
+              _el$126.nextSibling;
+              var _el$127 = _el$123.nextSibling, _el$128 = _el$127.nextSibling, [_el$129, _co$27] = getNextMarker(_el$128.nextSibling), _el$131 = _el$122.nextSibling, [_el$132, _co$28] = getNextMarker(_el$131.nextSibling);
+              _el$122.$$click = () => {
                 setEditingKey(key);
                 setEditValue(String(value() || ""));
               };
-              insert(_el$121, () => {
+              insert(_el$123, () => {
                 var _a;
                 return ((_a = def()) == null ? void 0 : _a.label) || key;
-              }, _el$124, _co$25);
-              insert(_el$120, (() => {
+              }, _el$126, _co$26);
+              insert(_el$122, (() => {
                 var _c$4 = memo(() => !!Array.isArray(value()));
                 return () => _c$4() ? value().join(", ") : String(value());
-              })(), _el$127, _co$26);
-              insert(_el$119, createComponent(Show, {
+              })(), _el$129, _co$27);
+              insert(_el$121, createComponent(Show, {
                 get when() {
                   return props.onFilterChange;
                 },
                 get children() {
-                  var _el$128 = getNextElement(_tmpl$29);
-                  _el$128.$$click = () => removeFilter(key);
-                  setAttribute(_el$128, "aria-label", `Remove ${key}`);
+                  var _el$130 = getNextElement(_tmpl$29);
+                  _el$130.$$click = () => removeFilter(key);
+                  setAttribute(_el$130, "aria-label", `Remove ${key}`);
                   runHydrationEvents();
-                  return _el$128;
+                  return _el$130;
                 }
-              }), _el$130, _co$27);
+              }), _el$132, _co$28);
               runHydrationEvents();
-              return _el$119;
+              return _el$121;
             }
-          }), _el$135, _co$28);
-          insert(_el$118, createComponent(Show, {
+          }), _el$137, _co$29);
+          insert(_el$120, createComponent(Show, {
             get when() {
               return editingKey() === key;
             },
             get children() {
-              var _el$131 = getNextElement(_tmpl$33);
-              insert(_el$131, createComponent(Show, {
+              var _el$133 = getNextElement(_tmpl$33);
+              insert(_el$133, createComponent(Show, {
                 get when() {
                   var _a;
                   return (_a = def()) == null ? void 0 : _a.options;
                 },
                 get fallback() {
                   return (() => {
-                    var _el$142 = getNextElement(_tmpl$36), _el$143 = _el$142.firstChild, _el$144 = _el$143.nextSibling, _el$145 = _el$144.nextSibling;
-                    _el$142.addEventListener("submit", (e) => {
+                    var _el$144 = getNextElement(_tmpl$36), _el$145 = _el$144.firstChild, _el$146 = _el$145.nextSibling, _el$147 = _el$146.nextSibling;
+                    _el$144.addEventListener("submit", (e) => {
                       e.preventDefault();
                       setFilter(key, editValue());
                     });
-                    _el$143.$$input = (e) => setEditValue(e.currentTarget.value);
-                    _el$145.$$click = () => setEditingKey(null);
+                    _el$145.$$input = (e) => setEditValue(e.currentTarget.value);
+                    _el$147.$$click = () => setEditingKey(null);
                     effect(() => {
                       var _a;
-                      return setAttribute(_el$143, "placeholder", ((_a = def()) == null ? void 0 : _a.placeholder) || key);
+                      return setAttribute(_el$145, "placeholder", ((_a = def()) == null ? void 0 : _a.placeholder) || key);
                     });
-                    effect(() => setProperty(_el$143, "value", editValue()));
+                    effect(() => setProperty(_el$145, "value", editValue()));
                     runHydrationEvents();
-                    return _el$142;
+                    return _el$144;
                   })();
                 },
                 get children() {
                   return [(() => {
-                    var _el$132 = getNextElement(_tmpl$31);
-                    insert(_el$132, createComponent(For, {
+                    var _el$134 = getNextElement(_tmpl$31);
+                    insert(_el$134, createComponent(For, {
                       get each() {
                         return def().options;
                       },
                       children: (opt) => (() => {
-                        var _el$146 = getNextElement(_tmpl$38), _el$148 = _el$146.firstChild, [_el$149, _co$31] = getNextMarker(_el$148.nextSibling), _el$150 = _el$149.nextSibling, [_el$151, _co$32] = getNextMarker(_el$150.nextSibling);
-                        _el$146.$$click = () => setFilter(key, opt.value);
-                        insert(_el$146, () => opt.label, _el$149, _co$31);
-                        insert(_el$146, createComponent(Show, {
+                        var _el$148 = getNextElement(_tmpl$38), _el$150 = _el$148.firstChild, [_el$151, _co$32] = getNextMarker(_el$150.nextSibling), _el$152 = _el$151.nextSibling, [_el$153, _co$33] = getNextMarker(_el$152.nextSibling);
+                        _el$148.$$click = () => setFilter(key, opt.value);
+                        insert(_el$148, () => opt.label, _el$151, _co$32);
+                        insert(_el$148, createComponent(Show, {
                           get when() {
                             return String(value()) === opt.value;
                           },
                           get children() {
                             return getNextElement(_tmpl$37);
                           }
-                        }), _el$151, _co$32);
-                        effect(() => className(_el$146, `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"}`));
+                        }), _el$153, _co$33);
+                        effect(() => className(_el$148, `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"}`));
                         runHydrationEvents();
-                        return _el$146;
+                        return _el$148;
                       })()
                     }));
-                    return _el$132;
+                    return _el$134;
                   })(), (() => {
-                    var _el$133 = getNextElement(_tmpl$32);
-                    _el$133.$$click = () => setEditingKey(null);
+                    var _el$135 = getNextElement(_tmpl$32);
+                    _el$135.$$click = () => setEditingKey(null);
                     runHydrationEvents();
-                    return _el$133;
+                    return _el$135;
                   })()];
                 }
               }));
-              return _el$131;
+              return _el$133;
             }
-          }), _el$137, _co$29);
-          return _el$118;
+          }), _el$139, _co$30);
+          return _el$120;
         })();
       }
-    }), _el$115, _co$23);
-    insert(_el$112, createComponent(Show, {
+    }), _el$117, _co$24);
+    insert(_el$114, createComponent(Show, {
       get when() {
         return allKeys().length === 0;
       },
       get children() {
         return getNextElement(_tmpl$27);
       }
-    }), _el$117, _co$24);
-    return _el$112;
+    }), _el$119, _co$25);
+    return _el$114;
   })();
 };
 const EmbeddedFormSection = (props) => {
@@ -970,9 +1032,9 @@ const EmbeddedFormSection = (props) => {
     }
   };
   return (() => {
-    var _el$152 = getNextElement(_tmpl$39), _el$155 = _el$152.firstChild, [_el$156, _co$33] = getNextMarker(_el$155.nextSibling), _el$153 = _el$156.nextSibling, _el$154 = _el$153.firstChild;
-    _el$152.addEventListener("submit", handleSubmit);
-    insert(_el$152, createComponent(For, {
+    var _el$154 = getNextElement(_tmpl$39), _el$157 = _el$154.firstChild, [_el$158, _co$34] = getNextMarker(_el$157.nextSibling), _el$155 = _el$158.nextSibling, _el$156 = _el$155.firstChild;
+    _el$154.addEventListener("submit", handleSubmit);
+    insert(_el$154, createComponent(For, {
       get each() {
         return config().fields;
       },
@@ -986,9 +1048,9 @@ const EmbeddedFormSection = (props) => {
         onChange: (val) => updateField(field.name, val),
         formData
       })
-    }), _el$156, _co$33);
-    insert(_el$154, () => config().submitLabel);
-    return _el$152;
+    }), _el$158, _co$34);
+    insert(_el$156, () => config().submitLabel);
+    return _el$154;
   })();
 };
 const EnrichedStepsSection = (props) => {
@@ -1000,35 +1062,35 @@ const EnrichedStepsSection = (props) => {
     };
   };
   return (() => {
-    var _el$157 = getNextElement(_tmpl$41), _el$160 = _el$157.firstChild, [_el$161, _co$34] = getNextMarker(_el$160.nextSibling), _el$162 = _el$161.nextSibling, [_el$163, _co$35] = getNextMarker(_el$162.nextSibling);
-    insert(_el$157, createComponent(For, {
+    var _el$159 = getNextElement(_tmpl$41), _el$162 = _el$159.firstChild, [_el$163, _co$35] = getNextMarker(_el$162.nextSibling), _el$164 = _el$163.nextSibling, [_el$165, _co$36] = getNextMarker(_el$164.nextSibling);
+    insert(_el$159, createComponent(For, {
       get each() {
         return stepsData().steps;
       },
       children: (step) => (() => {
-        var _el$164 = getNextElement(_tmpl$44), _el$165 = _el$164.firstChild, _el$166 = _el$165.firstChild, _el$171 = _el$166.nextSibling, [_el$172, _co$37] = getNextMarker(_el$171.nextSibling), _el$173 = _el$172.nextSibling, [_el$174, _co$38] = getNextMarker(_el$173.nextSibling), _el$176 = _el$165.nextSibling, [_el$177, _co$39] = getNextMarker(_el$176.nextSibling);
-        insert(_el$166, (() => {
+        var _el$166 = getNextElement(_tmpl$44), _el$167 = _el$166.firstChild, _el$168 = _el$167.firstChild, _el$173 = _el$168.nextSibling, [_el$174, _co$38] = getNextMarker(_el$173.nextSibling), _el$175 = _el$174.nextSibling, [_el$176, _co$39] = getNextMarker(_el$175.nextSibling), _el$178 = _el$167.nextSibling, [_el$179, _co$40] = getNextMarker(_el$178.nextSibling);
+        insert(_el$168, (() => {
           var _c$5 = memo(() => step.status === "done");
           return () => _c$5() ? "✅" : step.status === "active" ? "●" : "○";
         })());
-        insert(_el$165, () => step.label, _el$172, _co$37);
-        insert(_el$165, createComponent(Show, {
+        insert(_el$167, () => step.label, _el$174, _co$38);
+        insert(_el$167, createComponent(Show, {
           get when() {
             return memo(() => !!step.description)() && step.status === "active";
           },
           get children() {
-            var _el$167 = getNextElement(_tmpl$42), _el$168 = _el$167.firstChild, _el$169 = _el$168.nextSibling, [_el$170, _co$36] = getNextMarker(_el$169.nextSibling);
-            insert(_el$167, () => step.description, _el$170, _co$36);
-            return _el$167;
+            var _el$169 = getNextElement(_tmpl$42), _el$170 = _el$169.firstChild, _el$171 = _el$170.nextSibling, [_el$172, _co$37] = getNextMarker(_el$171.nextSibling);
+            insert(_el$169, () => step.description, _el$172, _co$37);
+            return _el$169;
           }
-        }), _el$174, _co$38);
-        insert(_el$164, createComponent(Show, {
+        }), _el$176, _co$39);
+        insert(_el$166, createComponent(Show, {
           get when() {
             return memo(() => step.status === "active")() && step.content;
           },
           get children() {
-            var _el$175 = getNextElement(_tmpl$43);
-            insert(_el$175, createComponent(SectionRenderer, {
+            var _el$177 = getNextElement(_tmpl$43);
+            insert(_el$177, createComponent(SectionRenderer, {
               get section() {
                 return step.content;
               },
@@ -1040,79 +1102,160 @@ const EnrichedStepsSection = (props) => {
                 return props.onAction;
               }
             }));
-            return _el$175;
+            return _el$177;
           }
-        }), _el$177, _co$39);
+        }), _el$179, _co$40);
         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"}`;
-          _v$4 !== _p$.e && className(_el$164, _p$.e = _v$4);
-          _v$5 !== _p$.t && className(_el$165, _p$.t = _v$5);
+          _v$4 !== _p$.e && className(_el$166, _p$.e = _v$4);
+          _v$5 !== _p$.t && className(_el$167, _p$.t = _v$5);
           return _p$;
         }, {
           e: void 0,
           t: void 0
         });
-        return _el$164;
+        return _el$166;
       })()
-    }), _el$161, _co$34);
-    insert(_el$157, createComponent(Show, {
+    }), _el$163, _co$35);
+    insert(_el$159, createComponent(Show, {
       get when() {
         return stepsData().steps.some((s) => s.status === "active");
       },
       get children() {
-        var _el$158 = getNextElement(_tmpl$40), _el$159 = _el$158.firstChild;
-        _el$159.$$click = () => {
+        var _el$160 = getNextElement(_tmpl$40), _el$161 = _el$160.firstChild;
+        _el$161.$$click = () => {
           var _a;
           return (_a = props.onAction) == null ? void 0 : _a.call(props, "next_step", {
             step: stepsData().currentStep
           });
         };
         runHydrationEvents();
-        return _el$158;
+        return _el$160;
       }
-    }), _el$163, _co$35);
-    return _el$157;
+    }), _el$165, _co$36);
+    return _el$159;
   })();
 };
 const ActionSection = (props) => {
-  const actions = () => {
-    if (Array.isArray(props.content)) return props.content;
-    const obj = props.content;
-    if (obj && Array.isArray(obj.actions)) {
-      console.warn("[MCP-UI] ActionSection: content should be an array, got { actions: [...] }. Unwrapping automatically.");
-      return obj.actions;
-    }
-    return [];
+  const data = () => {
+    const c = props.content;
+    if (Array.isArray(c)) return {
+      actions: c,
+      title: void 0,
+      preview: void 0,
+      validation: void 0
+    };
+    if (c && Array.isArray(c.actions)) return {
+      actions: c.actions,
+      title: c.title,
+      preview: c.preview,
+      validation: c.validation
+    };
+    return {
+      actions: [],
+      title: void 0,
+      preview: void 0,
+      validation: void 0
+    };
   };
   return (() => {
-    var _el$178 = getNextElement(_tmpl$45);
-    insert(_el$178, createComponent(For, {
+    var _el$180 = getNextElement(_tmpl$48), _el$195 = _el$180.firstChild, [_el$196, _co$44] = getNextMarker(_el$195.nextSibling), _el$197 = _el$196.nextSibling, [_el$198, _co$45] = getNextMarker(_el$197.nextSibling), _el$199 = _el$198.nextSibling, [_el$200, _co$46] = getNextMarker(_el$199.nextSibling), _el$194 = _el$200.nextSibling;
+    insert(_el$180, createComponent(Show, {
+      get when() {
+        return data().title;
+      },
+      get children() {
+        var _el$181 = getNextElement(_tmpl$45);
+        insert(_el$181, () => data().title);
+        return _el$181;
+      }
+    }), _el$196, _co$44);
+    insert(_el$180, createComponent(Show, {
+      get when() {
+        return data().preview;
+      },
+      children: (preview) => (() => {
+        var _el$201 = getNextElement(_tmpl$51), _el$207 = _el$201.firstChild, [_el$208, _co$48] = getNextMarker(_el$207.nextSibling), _el$209 = _el$208.nextSibling, [_el$210, _co$49] = getNextMarker(_el$209.nextSibling);
+        insert(_el$201, createComponent(Show, {
+          get when() {
+            return preview().count != null;
+          },
+          get children() {
+            return [(() => {
+              var _el$202 = getNextElement(_tmpl$49);
+              insert(_el$202, () => preview().count);
+              return _el$202;
+            })(), " items"];
+          }
+        }), _el$208, _co$48);
+        insert(_el$201, createComponent(Show, {
+          get when() {
+            return preview().summary;
+          },
+          get children() {
+            var _el$203 = getNextElement(_tmpl$50), _el$204 = _el$203.firstChild, _el$205 = _el$204.nextSibling, [_el$206, _co$47] = getNextMarker(_el$205.nextSibling);
+            insert(_el$203, () => preview().summary, _el$206, _co$47);
+            return _el$203;
+          }
+        }), _el$210, _co$49);
+        return _el$201;
+      })()
+    }), _el$198, _co$45);
+    insert(_el$180, createComponent(Show, {
+      get when() {
+        return memo(() => !!data().validation)() && data().validation.confidence != null;
+      },
+      get children() {
+        var _el$182 = getNextElement(_tmpl$47), _el$183 = _el$182.firstChild, _el$185 = _el$183.firstChild, [_el$186, _co$41] = getNextMarker(_el$185.nextSibling);
+        _el$186.nextSibling;
+        var _el$192 = _el$183.nextSibling, [_el$193, _co$43] = getNextMarker(_el$192.nextSibling);
+        insert(_el$183, () => Math.round(data().validation.confidence * 100), _el$186, _co$41);
+        insert(_el$182, createComponent(Show, {
+          get when() {
+            var _a;
+            return ((_a = data().validation.hallucinated) == null ? void 0 : _a.length) > 0;
+          },
+          get children() {
+            var _el$187 = getNextElement(_tmpl$46), _el$188 = _el$187.firstChild, _el$190 = _el$188.nextSibling, [_el$191, _co$42] = getNextMarker(_el$190.nextSibling);
+            _el$191.nextSibling;
+            insert(_el$187, () => data().validation.hallucinated.length, _el$191, _co$42);
+            return _el$187;
+          }
+        }), _el$193, _co$43);
+        effect((_$p) => classList(_el$183, {
+          "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
+        }, _$p));
+        return _el$182;
+      }
+    }), _el$200, _co$46);
+    insert(_el$194, createComponent(For, {
       get each() {
-        return actions();
+        return data().actions;
       },
       children: (item) => (() => {
-        var _el$179 = getNextElement(_tmpl$38), _el$181 = _el$179.firstChild, [_el$182, _co$40] = getNextMarker(_el$181.nextSibling), _el$183 = _el$182.nextSibling, [_el$184, _co$41] = getNextMarker(_el$183.nextSibling);
-        _el$179.$$click = () => {
+        var _el$211 = getNextElement(_tmpl$38), _el$213 = _el$211.firstChild, [_el$214, _co$50] = getNextMarker(_el$213.nextSibling), _el$215 = _el$214.nextSibling, [_el$216, _co$51] = getNextMarker(_el$215.nextSibling);
+        addEventListener(_el$211, "click", () => {
           var _a;
           return (_a = props.onAction) == null ? void 0 : _a.call(props, item.value || item.action || item.label, item);
-        };
-        insert(_el$179, createComponent(Show, {
+        });
+        insert(_el$211, createComponent(Show, {
           get when() {
             return item.icon;
           },
           get children() {
-            var _el$180 = getNextElement(_tmpl$46);
-            insert(_el$180, () => item.icon);
-            return _el$180;
+            var _el$212 = getNextElement(_tmpl$52);
+            insert(_el$212, () => item.icon);
+            return _el$212;
           }
-        }), _el$182, _co$40);
-        insert(_el$179, () => item.label, _el$184, _co$41);
-        effect(() => className(_el$179, `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" : "border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`));
-        runHydrationEvents();
-        return _el$179;
+        }), _el$214, _co$50);
+        insert(_el$211, () => item.label, _el$216, _co$51);
+        effect(() => className(_el$211, `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"}`));
+        return _el$211;
       })()
     }));
-    return _el$178;
+    return _el$180;
   })();
 };
 const UnderstandingSection = (props) => {
@@ -1136,44 +1279,45 @@ const UnderstandingSection = (props) => {
     }
   };
   return (() => {
-    var _el$185 = getNextElement(_tmpl$47), _el$186 = _el$185.firstChild, _el$188 = _el$186.nextSibling, [_el$189, _co$42] = getNextMarker(_el$188.nextSibling);
-    insert(_el$186, createComponent(For, {
+    var _el$217 = getNextElement(_tmpl$53), _el$218 = _el$217.firstChild, _el$220 = _el$218.nextSibling, [_el$221, _co$52] = getNextMarker(_el$220.nextSibling);
+    insert(_el$218, createComponent(For, {
       get each() {
         return data().detections;
       },
       children: (det) => (() => {
-        var _el$190 = getNextElement(_tmpl$48), _el$191 = _el$190.firstChild, _el$192 = _el$191.nextSibling;
-        insert(_el$191, () => det.label);
-        insert(_el$192, () => det.value);
-        effect(() => className(_el$191, `px-1.5 py-0.5 text-xs font-medium rounded ${confidenceClass(det.confidence)}`));
-        return _el$190;
+        var _el$222 = getNextElement(_tmpl$54), _el$223 = _el$222.firstChild, _el$224 = _el$223.nextSibling;
+        insert(_el$223, () => det.label);
+        insert(_el$224, () => det.value);
+        effect(() => className(_el$223, `px-1.5 py-0.5 text-xs font-medium rounded ${confidenceClass(det.confidence)}`));
+        return _el$222;
       })()
     }));
-    insert(_el$185, createComponent(Show, {
+    insert(_el$217, createComponent(Show, {
       get when() {
         return data().warnings.length > 0;
       },
       get children() {
-        var _el$187 = getNextElement(_tmpl$25);
-        insert(_el$187, createComponent(For, {
+        var _el$219 = getNextElement(_tmpl$25);
+        insert(_el$219, createComponent(For, {
           get each() {
             return data().warnings;
           },
           children: (w) => (() => {
-            var _el$193 = getNextElement(_tmpl$49), _el$194 = _el$193.firstChild, _el$195 = _el$194.nextSibling;
-            insert(_el$195, w);
-            return _el$193;
+            var _el$225 = getNextElement(_tmpl$55), _el$226 = _el$225.firstChild, _el$227 = _el$226.nextSibling;
+            insert(_el$227, w);
+            return _el$225;
           })()
         }));
-        return _el$187;
+        return _el$219;
       }
-    }), _el$189, _co$42);
-    return _el$185;
+    }), _el$221, _co$52);
+    return _el$217;
   })();
 };
 const FeedbackSection = (props) => {
   const [comment, setComment] = createSignal("");
   const [showComment, setShowComment] = createSignal(false);
+  const [submitted, setSubmitted] = createSignal(null);
   const data = () => {
     var _a, _b, _c, _d;
     const c = props.content;
@@ -1191,7 +1335,10 @@ const FeedbackSection = (props) => {
       question: (c == null ? void 0 : c.question) || "",
       options,
       allowFreeText: (c == null ? void 0 : c.allowFreeText) ?? (c == null ? void 0 : c.allowComment) ?? false,
-      placeholder: (c == null ? void 0 : c.placeholder) || (c == null ? void 0 : c.commentPlaceholder) || "Add a comment..."
+      placeholder: (c == null ? void 0 : c.placeholder) || (c == null ? void 0 : c.commentPlaceholder) || "Add a comment...",
+      // v4.1.0: per-step feedback
+      agentId: c == null ? void 0 : c.agentId,
+      stepId: c == null ? void 0 : c.stepId
     };
   };
   const handleOption = (option) => {
@@ -1200,66 +1347,126 @@ const FeedbackSection = (props) => {
       setShowComment(true);
       return;
     }
-    (_a = props.onAction) == null ? void 0 : _a.call(props, "feedback", {
+    setSubmitted(option.value);
+    const payload = {
       option: option.value,
-      comment: comment()
+      comment: comment(),
+      ...data().agentId ? {
+        agentId: data().agentId
+      } : {},
+      ...data().stepId ? {
+        stepId: data().stepId
+      } : {}
+    };
+    console.info("[MCP-UI:HITL] user responded", {
+      agentId: data().agentId,
+      stepId: data().stepId,
+      action: option.value
     });
+    (_a = props.onAction) == null ? void 0 : _a.call(props, "feedback", payload);
   };
   return (() => {
-    var _el$196 = getNextElement(_tmpl$51), _el$197 = _el$196.firstChild, _el$198 = _el$197.nextSibling, _el$202 = _el$198.nextSibling, [_el$203, _co$43] = getNextMarker(_el$202.nextSibling);
-    insert(_el$197, () => data().question);
-    insert(_el$198, createComponent(For, {
-      get each() {
-        return data().options;
+    var _el$228 = getNextElement(_tmpl$60), _el$229 = _el$228.firstChild, _el$247 = _el$229.nextSibling, [_el$248, _co$57] = getNextMarker(_el$247.nextSibling), _el$249 = _el$248.nextSibling, [_el$250, _co$58] = getNextMarker(_el$249.nextSibling);
+    insert(_el$229, () => data().question);
+    insert(_el$228, createComponent(Show, {
+      get when() {
+        return submitted();
       },
-      children: (option) => (() => {
-        var _el$204 = getNextElement(_tmpl$38), _el$206 = _el$204.firstChild, [_el$207, _co$44] = getNextMarker(_el$206.nextSibling), _el$208 = _el$207.nextSibling, [_el$209, _co$45] = getNextMarker(_el$208.nextSibling);
-        _el$204.$$click = () => handleOption(option);
-        insert(_el$204, createComponent(Show, {
+      get children() {
+        var _el$230 = getNextElement(_tmpl$57), _el$231 = _el$230.firstChild, _el$233 = _el$231.firstChild, [_el$234, _co$53] = getNextMarker(_el$233.nextSibling), _el$232 = _el$234.nextSibling, _el$235 = _el$232.nextSibling, [_el$236, _co$54] = getNextMarker(_el$235.nextSibling), _el$241 = _el$231.nextSibling, [_el$242, _co$56] = getNextMarker(_el$241.nextSibling);
+        insert(_el$231, (() => {
+          var _c$6 = memo(() => submitted() === "approve");
+          return () => _c$6() ? "✅" : submitted() === "reject" ? "❌" : "💬";
+        })(), _el$234, _co$53);
+        insert(_el$231, submitted, _el$236, _co$54);
+        insert(_el$230, createComponent(Show, {
           get when() {
-            return option.icon;
+            return comment();
           },
           get children() {
-            var _el$205 = getNextElement(_tmpl$52);
-            insert(_el$205, () => option.icon);
-            return _el$205;
+            var _el$237 = getNextElement(_tmpl$56), _el$238 = _el$237.firstChild, _el$239 = _el$238.nextSibling, [_el$240, _co$55] = getNextMarker(_el$239.nextSibling);
+            insert(_el$237, comment, _el$240, _co$55);
+            return _el$237;
           }
-        }), _el$207, _co$44);
-        insert(_el$204, () => option.label, _el$209, _co$45);
-        effect(() => className(_el$204, `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"}`));
-        runHydrationEvents();
-        return _el$204;
-      })()
-    }));
-    insert(_el$196, createComponent(Show, {
-      get when() {
-        return data().allowFreeText || showComment();
-      },
-      get children() {
-        var _el$199 = getNextElement(_tmpl$50), _el$200 = _el$199.firstChild, _el$201 = _el$200.nextSibling;
-        _el$200.$$input = (e) => setComment(e.currentTarget.value);
-        _el$201.$$click = () => {
-          var _a;
-          return (_a = props.onAction) == null ? void 0 : _a.call(props, "feedback", {
-            option: "comment",
-            comment: comment()
-          });
-        };
+        }), _el$242, _co$56);
         effect((_p$) => {
-          var _v$6 = data().placeholder, _v$7 = showComment();
-          _v$6 !== _p$.e && setAttribute(_el$200, "placeholder", _p$.e = _v$6);
-          _v$7 !== _p$.t && setProperty(_el$200, "autofocus", _p$.t = _v$7);
+          var _v$6 = !!(submitted() === "approve"), _v$7 = !!(submitted() === "reject"), _v$8 = !!(submitted() !== "approve" && submitted() !== "reject");
+          _v$6 !== _p$.e && _el$231.classList.toggle("text-green-600", _p$.e = _v$6);
+          _v$7 !== _p$.t && _el$231.classList.toggle("text-red-600", _p$.t = _v$7);
+          _v$8 !== _p$.a && _el$231.classList.toggle("text-blue-600", _p$.a = _v$8);
           return _p$;
         }, {
           e: void 0,
-          t: void 0
+          t: void 0,
+          a: void 0
         });
-        effect(() => setProperty(_el$200, "value", comment()));
-        runHydrationEvents();
-        return _el$199;
+        return _el$230;
       }
-    }), _el$203, _co$43);
-    return _el$196;
+    }), _el$248, _co$57);
+    insert(_el$228, createComponent(Show, {
+      get when() {
+        return !submitted();
+      },
+      get children() {
+        return [(() => {
+          var _el$243 = getNextElement(_tmpl$58);
+          insert(_el$243, createComponent(For, {
+            get each() {
+              return data().options;
+            },
+            children: (option) => (() => {
+              var _el$251 = getNextElement(_tmpl$38), _el$253 = _el$251.firstChild, [_el$254, _co$59] = getNextMarker(_el$253.nextSibling), _el$255 = _el$254.nextSibling, [_el$256, _co$60] = getNextMarker(_el$255.nextSibling);
+              addEventListener(_el$251, "click", () => handleOption(option));
+              insert(_el$251, createComponent(Show, {
+                get when() {
+                  return option.icon;
+                },
+                get children() {
+                  var _el$252 = getNextElement(_tmpl$61);
+                  insert(_el$252, () => option.icon);
+                  return _el$252;
+                }
+              }), _el$254, _co$59);
+              insert(_el$251, () => option.label, _el$256, _co$60);
+              effect(() => className(_el$251, `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"}`));
+              return _el$251;
+            })()
+          }));
+          return _el$243;
+        })(), createComponent(Show, {
+          get when() {
+            return data().allowFreeText || showComment();
+          },
+          get children() {
+            var _el$244 = getNextElement(_tmpl$59), _el$245 = _el$244.firstChild, _el$246 = _el$245.nextSibling;
+            _el$245.$$input = (e) => setComment(e.currentTarget.value);
+            addEventListener(_el$246, "click", () => {
+              var _a;
+              setSubmitted("comment");
+              (_a = props.onAction) == null ? void 0 : _a.call(props, "feedback", {
+                option: "comment",
+                comment: comment(),
+                agentId: data().agentId,
+                stepId: data().stepId
+              });
+            });
+            effect((_p$) => {
+              var _v$9 = data().placeholder, _v$0 = showComment();
+              _v$9 !== _p$.e && setAttribute(_el$245, "placeholder", _p$.e = _v$9);
+              _v$0 !== _p$.t && setProperty(_el$245, "autofocus", _p$.t = _v$0);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
+            effect(() => setProperty(_el$245, "value", comment()));
+            runHydrationEvents();
+            return _el$244;
+          }
+        })];
+      }
+    }), _el$250, _co$58);
+    return _el$228;
   })();
 };
 const PromptSection = (props) => {
@@ -1274,56 +1481,56 @@ const PromptSection = (props) => {
     };
   };
   return (() => {
-    var _el$210 = getNextElement(_tmpl$56), _el$223 = _el$210.firstChild, [_el$224, _co$48] = getNextMarker(_el$223.nextSibling), _el$216 = _el$224.nextSibling, _el$225 = _el$216.nextSibling, [_el$226, _co$49] = getNextMarker(_el$225.nextSibling), _el$227 = _el$226.nextSibling, [_el$228, _co$50] = getNextMarker(_el$227.nextSibling);
-    insert(_el$210, createComponent(Show, {
+    var _el$257 = getNextElement(_tmpl$65), _el$270 = _el$257.firstChild, [_el$271, _co$63] = getNextMarker(_el$270.nextSibling), _el$263 = _el$271.nextSibling, _el$272 = _el$263.nextSibling, [_el$273, _co$64] = getNextMarker(_el$272.nextSibling), _el$274 = _el$273.nextSibling, [_el$275, _co$65] = getNextMarker(_el$274.nextSibling);
+    insert(_el$257, createComponent(Show, {
       get when() {
         return data().originalQuery;
       },
       get children() {
-        var _el$211 = getNextElement(_tmpl$53), _el$212 = _el$211.firstChild, _el$214 = _el$212.nextSibling, [_el$215, _co$46] = getNextMarker(_el$214.nextSibling);
-        _el$215.nextSibling;
-        insert(_el$211, () => data().originalQuery, _el$215, _co$46);
-        return _el$211;
+        var _el$258 = getNextElement(_tmpl$62), _el$259 = _el$258.firstChild, _el$261 = _el$259.nextSibling, [_el$262, _co$61] = getNextMarker(_el$261.nextSibling);
+        _el$262.nextSibling;
+        insert(_el$258, () => data().originalQuery, _el$262, _co$61);
+        return _el$258;
       }
-    }), _el$224, _co$48);
-    insert(_el$216, createComponent(For, {
+    }), _el$271, _co$63);
+    insert(_el$263, createComponent(For, {
       get each() {
         return Object.entries(data().extracted);
       },
       children: ([key, value]) => (() => {
-        var _el$229 = getNextElement(_tmpl$57), _el$230 = _el$229.firstChild, _el$232 = _el$230.firstChild, [_el$233, _co$51] = getNextMarker(_el$232.nextSibling);
-        _el$233.nextSibling;
-        var _el$234 = _el$230.nextSibling;
-        insert(_el$230, key, _el$233, _co$51);
-        insert(_el$234, () => String(value));
-        return _el$229;
+        var _el$276 = getNextElement(_tmpl$66), _el$277 = _el$276.firstChild, _el$279 = _el$277.firstChild, [_el$280, _co$66] = getNextMarker(_el$279.nextSibling);
+        _el$280.nextSibling;
+        var _el$281 = _el$277.nextSibling;
+        insert(_el$277, key, _el$280, _co$66);
+        insert(_el$281, () => String(value));
+        return _el$276;
       })()
     }));
-    insert(_el$210, createComponent(Show, {
+    insert(_el$257, createComponent(Show, {
       get when() {
         return data().plan;
       },
       get children() {
-        var _el$217 = getNextElement(_tmpl$54), _el$218 = _el$217.firstChild, _el$219 = _el$218.nextSibling, _el$220 = _el$219.nextSibling, [_el$221, _co$47] = getNextMarker(_el$220.nextSibling);
-        insert(_el$217, () => data().plan, _el$221, _co$47);
-        return _el$217;
+        var _el$264 = getNextElement(_tmpl$63), _el$265 = _el$264.firstChild, _el$266 = _el$265.nextSibling, _el$267 = _el$266.nextSibling, [_el$268, _co$62] = getNextMarker(_el$267.nextSibling);
+        insert(_el$264, () => data().plan, _el$268, _co$62);
+        return _el$264;
       }
-    }), _el$226, _co$49);
-    insert(_el$210, createComponent(Show, {
+    }), _el$273, _co$64);
+    insert(_el$257, createComponent(Show, {
       get when() {
         return data().editable;
       },
       get children() {
-        var _el$222 = getNextElement(_tmpl$55);
-        _el$222.$$click = () => {
+        var _el$269 = getNextElement(_tmpl$64);
+        _el$269.$$click = () => {
           var _a;
           return (_a = props.onAction) == null ? void 0 : _a.call(props, "edit_prompt", data());
         };
         runHydrationEvents();
-        return _el$222;
+        return _el$269;
       }
-    }), _el$228, _co$50);
-    return _el$210;
+    }), _el$275, _co$65);
+    return _el$257;
   })();
 };
 const StepperProgressSection = (props) => {
@@ -1353,46 +1560,46 @@ const StepperProgressSection = (props) => {
     },
     get fallback() {
       return (() => {
-        var _el$236 = getNextElement(_tmpl$59);
-        insert(_el$236, createComponent(For, {
+        var _el$283 = getNextElement(_tmpl$68);
+        insert(_el$283, createComponent(For, {
           get each() {
             return data().steps;
           },
           children: (step) => (() => {
-            var _el$237 = getNextElement(_tmpl$62), _el$238 = _el$237.firstChild, _el$239 = _el$238.nextSibling, _el$240 = _el$239.firstChild, _el$250 = _el$240.nextSibling, [_el$251, _co$54] = getNextMarker(_el$250.nextSibling), _el$252 = _el$251.nextSibling, [_el$253, _co$55] = getNextMarker(_el$252.nextSibling);
-            insert(_el$238, () => statusIcon(step.status));
-            insert(_el$240, () => step.label);
-            insert(_el$239, createComponent(Show, {
+            var _el$284 = getNextElement(_tmpl$71), _el$285 = _el$284.firstChild, _el$286 = _el$285.nextSibling, _el$287 = _el$286.firstChild, _el$297 = _el$287.nextSibling, [_el$298, _co$69] = getNextMarker(_el$297.nextSibling), _el$299 = _el$298.nextSibling, [_el$300, _co$70] = getNextMarker(_el$299.nextSibling);
+            insert(_el$285, () => statusIcon(step.status));
+            insert(_el$287, () => step.label);
+            insert(_el$286, createComponent(Show, {
               get when() {
                 return step.summary;
               },
               get children() {
-                var _el$241 = getNextElement(_tmpl$60), _el$242 = _el$241.firstChild, _el$243 = _el$242.nextSibling, [_el$244, _co$52] = getNextMarker(_el$243.nextSibling);
-                insert(_el$241, () => step.summary, _el$244, _co$52);
-                return _el$241;
+                var _el$288 = getNextElement(_tmpl$69), _el$289 = _el$288.firstChild, _el$290 = _el$289.nextSibling, [_el$291, _co$67] = getNextMarker(_el$290.nextSibling);
+                insert(_el$288, () => step.summary, _el$291, _co$67);
+                return _el$288;
               }
-            }), _el$251, _co$54);
-            insert(_el$239, createComponent(Show, {
+            }), _el$298, _co$69);
+            insert(_el$286, createComponent(Show, {
               get when() {
                 return step.duration_ms;
               },
               get children() {
-                var _el$245 = getNextElement(_tmpl$61), _el$246 = _el$245.firstChild, _el$248 = _el$246.nextSibling, [_el$249, _co$53] = getNextMarker(_el$248.nextSibling);
-                _el$249.nextSibling;
-                insert(_el$245, () => step.duration_ms, _el$249, _co$53);
-                return _el$245;
+                var _el$292 = getNextElement(_tmpl$70), _el$293 = _el$292.firstChild, _el$295 = _el$293.nextSibling, [_el$296, _co$68] = getNextMarker(_el$295.nextSibling);
+                _el$296.nextSibling;
+                insert(_el$292, () => step.duration_ms, _el$296, _co$68);
+                return _el$292;
               }
-            }), _el$253, _co$55);
-            effect(() => className(_el$237, `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"}`));
-            return _el$237;
+            }), _el$300, _co$70);
+            effect(() => className(_el$284, `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"}`));
+            return _el$284;
           })()
         }));
-        return _el$236;
+        return _el$283;
       })();
     },
     get children() {
-      var _el$235 = getNextElement(_tmpl$58);
-      insert(_el$235, createComponent(For, {
+      var _el$282 = getNextElement(_tmpl$67);
+      insert(_el$282, createComponent(For, {
         get each() {
           return data().steps;
         },
@@ -1404,24 +1611,24 @@ const StepperProgressSection = (props) => {
             return getNextElement(_tmpl$13);
           }
         }), (() => {
-          var _el$255 = getNextElement(_tmpl$64), _el$256 = _el$255.firstChild, _el$257 = _el$256.nextSibling, _el$259 = _el$257.nextSibling, [_el$260, _co$56] = getNextMarker(_el$259.nextSibling);
-          insert(_el$256, () => statusIcon(step.status));
-          insert(_el$257, () => step.label);
-          insert(_el$255, createComponent(Show, {
+          var _el$302 = getNextElement(_tmpl$73), _el$303 = _el$302.firstChild, _el$304 = _el$303.nextSibling, _el$306 = _el$304.nextSibling, [_el$307, _co$71] = getNextMarker(_el$306.nextSibling);
+          insert(_el$303, () => statusIcon(step.status));
+          insert(_el$304, () => step.label);
+          insert(_el$302, createComponent(Show, {
             get when() {
               return step.summary;
             },
             get children() {
-              var _el$258 = getNextElement(_tmpl$63);
-              insert(_el$258, () => step.summary);
-              return _el$258;
+              var _el$305 = getNextElement(_tmpl$72);
+              insert(_el$305, () => step.summary);
+              return _el$305;
             }
-          }), _el$260, _co$56);
-          effect(() => className(_el$255, `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"}`));
-          return _el$255;
+          }), _el$307, _co$71);
+          effect(() => className(_el$302, `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"}`));
+          return _el$302;
         })()]
       }));
-      return _el$235;
+      return _el$282;
     }
   });
 };
@@ -1442,48 +1649,48 @@ const ErrorSectionRenderer = (props) => {
   };
   const isWarning = () => data().severity === "warning";
   return (() => {
-    var _el$261 = getNextElement(_tmpl$68), _el$262 = _el$261.firstChild, _el$263 = _el$262.firstChild, _el$264 = _el$263.nextSibling, _el$265 = _el$264.firstChild, _el$266 = _el$265.nextSibling, _el$272 = _el$266.firstChild, [_el$273, _co$58] = getNextMarker(_el$272.nextSibling), _el$274 = _el$273.nextSibling, [_el$275, _co$59] = getNextMarker(_el$274.nextSibling), _el$277 = _el$266.nextSibling, [_el$278, _co$60] = getNextMarker(_el$277.nextSibling);
-    insert(_el$263, () => isWarning() ? "⚠️" : "❌");
-    insert(_el$265, () => data().message);
-    insert(_el$266, createComponent(Show, {
+    var _el$308 = getNextElement(_tmpl$77), _el$309 = _el$308.firstChild, _el$310 = _el$309.firstChild, _el$311 = _el$310.nextSibling, _el$312 = _el$311.firstChild, _el$313 = _el$312.nextSibling, _el$319 = _el$313.firstChild, [_el$320, _co$73] = getNextMarker(_el$319.nextSibling), _el$321 = _el$320.nextSibling, [_el$322, _co$74] = getNextMarker(_el$321.nextSibling), _el$324 = _el$313.nextSibling, [_el$325, _co$75] = getNextMarker(_el$324.nextSibling);
+    insert(_el$310, () => isWarning() ? "⚠️" : "❌");
+    insert(_el$312, () => data().message);
+    insert(_el$313, createComponent(Show, {
       get when() {
         return data().retryAction;
       },
       get children() {
-        var _el$267 = getNextElement(_tmpl$65), _el$268 = _el$267.firstChild, _el$269 = _el$268.nextSibling, [_el$270, _co$57] = getNextMarker(_el$269.nextSibling);
-        _el$267.$$click = () => {
+        var _el$314 = getNextElement(_tmpl$74), _el$315 = _el$314.firstChild, _el$316 = _el$315.nextSibling, [_el$317, _co$72] = getNextMarker(_el$316.nextSibling);
+        _el$314.$$click = () => {
           var _a;
           return (_a = props.onAction) == null ? void 0 : _a.call(props, data().retryAction);
         };
-        insert(_el$267, () => data().retryLabel, _el$270, _co$57);
-        effect(() => className(_el$267, `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`));
+        insert(_el$314, () => data().retryLabel, _el$317, _co$72);
+        effect(() => className(_el$314, `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`));
         runHydrationEvents();
-        return _el$267;
+        return _el$314;
       }
-    }), _el$273, _co$58);
-    insert(_el$266, createComponent(Show, {
+    }), _el$320, _co$73);
+    insert(_el$313, createComponent(Show, {
       get when() {
         return data().details;
       },
       get children() {
-        var _el$271 = getNextElement(_tmpl$66);
-        _el$271.$$click = () => setShowDetails(!showDetails());
+        var _el$318 = getNextElement(_tmpl$75);
+        _el$318.$$click = () => setShowDetails(!showDetails());
         runHydrationEvents();
-        return _el$271;
+        return _el$318;
       }
-    }), _el$275, _co$59);
-    insert(_el$264, createComponent(Show, {
+    }), _el$322, _co$74);
+    insert(_el$311, createComponent(Show, {
       get when() {
         return memo(() => !!showDetails())() && data().details;
       },
       get children() {
-        var _el$276 = getNextElement(_tmpl$67);
-        insert(_el$276, () => data().details);
-        return _el$276;
+        var _el$323 = getNextElement(_tmpl$76);
+        insert(_el$323, () => data().details);
+        return _el$323;
       }
-    }), _el$278, _co$60);
-    effect(() => className(_el$261, `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"}`));
-    return _el$261;
+    }), _el$325, _co$75);
+    effect(() => className(_el$308, `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"}`));
+    return _el$308;
   })();
 };
 const SourceCardSection = (props) => {
@@ -1504,46 +1711,46 @@ const SourceCardSection = (props) => {
     error: "❌"
   })[data().status] || "📦";
   return (() => {
-    var _el$279 = getNextElement(_tmpl$71), _el$280 = _el$279.firstChild, _el$281 = _el$280.firstChild, _el$283 = _el$281.firstChild, [_el$284, _co$61] = getNextMarker(_el$283.nextSibling), _el$282 = _el$284.nextSibling, _el$285 = _el$282.nextSibling, [_el$286, _co$62] = getNextMarker(_el$285.nextSibling), _el$291 = _el$281.nextSibling, [_el$292, _co$64] = getNextMarker(_el$291.nextSibling), _el$293 = _el$280.nextSibling, _el$295 = _el$293.nextSibling, [_el$296, _co$65] = getNextMarker(_el$295.nextSibling);
-    insert(_el$281, statusIcon, _el$284, _co$61);
-    insert(_el$281, () => data().name, _el$286, _co$62);
-    insert(_el$280, createComponent(Show, {
+    var _el$326 = getNextElement(_tmpl$80), _el$327 = _el$326.firstChild, _el$328 = _el$327.firstChild, _el$330 = _el$328.firstChild, [_el$331, _co$76] = getNextMarker(_el$330.nextSibling), _el$329 = _el$331.nextSibling, _el$332 = _el$329.nextSibling, [_el$333, _co$77] = getNextMarker(_el$332.nextSibling), _el$338 = _el$328.nextSibling, [_el$339, _co$79] = getNextMarker(_el$338.nextSibling), _el$340 = _el$327.nextSibling, _el$342 = _el$340.nextSibling, [_el$343, _co$80] = getNextMarker(_el$342.nextSibling);
+    insert(_el$328, statusIcon, _el$331, _co$76);
+    insert(_el$328, () => data().name, _el$333, _co$77);
+    insert(_el$327, createComponent(Show, {
       get when() {
         return data().row_count !== void 0;
       },
       get children() {
-        var _el$287 = getNextElement(_tmpl$69), _el$289 = _el$287.firstChild, [_el$290, _co$63] = getNextMarker(_el$289.nextSibling);
-        _el$290.nextSibling;
-        insert(_el$287, () => {
+        var _el$334 = getNextElement(_tmpl$78), _el$336 = _el$334.firstChild, [_el$337, _co$78] = getNextMarker(_el$336.nextSibling);
+        _el$337.nextSibling;
+        insert(_el$334, () => {
           var _a;
           return (_a = data().row_count) == null ? void 0 : _a.toLocaleString();
-        }, _el$290, _co$63);
-        return _el$287;
+        }, _el$337, _co$78);
+        return _el$334;
       }
-    }), _el$292, _co$64);
-    insert(_el$293, createComponent(For, {
+    }), _el$339, _co$79);
+    insert(_el$340, createComponent(For, {
       get each() {
         return data().capabilities;
       },
       children: (cap) => (() => {
-        var _el$297 = getNextElement(_tmpl$72), _el$299 = _el$297.firstChild, [_el$300, _co$66] = getNextMarker(_el$299.nextSibling), _el$298 = _el$300.nextSibling, _el$301 = _el$298.nextSibling, [_el$302, _co$67] = getNextMarker(_el$301.nextSibling);
-        insert(_el$297, () => cap.supported ? "✅" : "❌", _el$300, _co$66);
-        insert(_el$297, () => cap.label, _el$302, _co$67);
-        effect(() => className(_el$297, `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"}`));
-        return _el$297;
+        var _el$344 = getNextElement(_tmpl$81), _el$346 = _el$344.firstChild, [_el$347, _co$81] = getNextMarker(_el$346.nextSibling), _el$345 = _el$347.nextSibling, _el$348 = _el$345.nextSibling, [_el$349, _co$82] = getNextMarker(_el$348.nextSibling);
+        insert(_el$344, () => cap.supported ? "✅" : "❌", _el$347, _co$81);
+        insert(_el$344, () => cap.label, _el$349, _co$82);
+        effect(() => className(_el$344, `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"}`));
+        return _el$344;
       })()
     }));
-    insert(_el$279, createComponent(Show, {
+    insert(_el$326, createComponent(Show, {
       get when() {
         return data().freshness || data().latency_ms;
       },
       get children() {
-        var _el$294 = getNextElement(_tmpl$70);
-        insert(_el$294, () => [data().freshness, data().latency_ms ? `${data().latency_ms}ms` : ""].filter(Boolean).join(" · "));
-        return _el$294;
+        var _el$341 = getNextElement(_tmpl$79);
+        insert(_el$341, () => [data().freshness, data().latency_ms ? `${data().latency_ms}ms` : ""].filter(Boolean).join(" · "));
+        return _el$341;
       }
-    }), _el$296, _co$65);
-    return _el$279;
+    }), _el$343, _co$80);
+    return _el$326;
   })();
 };
 const DiffSection = (props) => {
@@ -1567,10 +1774,10 @@ const DiffSection = (props) => {
     return [.../* @__PURE__ */ new Set([...Object.keys(l), ...Object.keys(r)])];
   };
   return (() => {
-    var _el$303 = getNextElement(_tmpl$73), _el$304 = _el$303.firstChild, _el$305 = _el$304.firstChild, _el$306 = _el$305.firstChild, _el$307 = _el$306.firstChild, _el$308 = _el$307.nextSibling, _el$309 = _el$308.nextSibling, _el$310 = _el$305.nextSibling;
-    insert(_el$308, () => data().left.label);
-    insert(_el$309, () => data().right.label);
-    insert(_el$310, createComponent(For, {
+    var _el$350 = getNextElement(_tmpl$82), _el$351 = _el$350.firstChild, _el$352 = _el$351.firstChild, _el$353 = _el$352.firstChild, _el$354 = _el$353.firstChild, _el$355 = _el$354.nextSibling, _el$356 = _el$355.nextSibling, _el$357 = _el$352.nextSibling;
+    insert(_el$355, () => data().left.label);
+    insert(_el$356, () => data().right.label);
+    insert(_el$357, createComponent(For, {
       get each() {
         return allKeys();
       },
@@ -1585,22 +1792,22 @@ const DiffSection = (props) => {
         };
         const isDiff = () => String(lVal()) !== String(rVal()) && data().highlight.includes(key);
         return (() => {
-          var _el$311 = getNextElement(_tmpl$74), _el$312 = _el$311.firstChild, _el$313 = _el$312.nextSibling, _el$314 = _el$313.nextSibling;
-          insert(_el$312, key);
-          insert(_el$313, (() => {
-            var _c$6 = memo(() => lVal() !== void 0);
-            return () => _c$6() ? String(lVal()) : "—";
+          var _el$358 = getNextElement(_tmpl$83), _el$359 = _el$358.firstChild, _el$360 = _el$359.nextSibling, _el$361 = _el$360.nextSibling;
+          insert(_el$359, key);
+          insert(_el$360, (() => {
+            var _c$7 = memo(() => lVal() !== void 0);
+            return () => _c$7() ? String(lVal()) : "—";
           })());
-          insert(_el$314, (() => {
-            var _c$7 = memo(() => rVal() !== void 0);
-            return () => _c$7() ? String(rVal()) : "—";
+          insert(_el$361, (() => {
+            var _c$8 = memo(() => rVal() !== void 0);
+            return () => _c$8() ? String(rVal()) : "—";
           })());
-          effect(() => className(_el$311, `border-t border-gray-100 dark:border-gray-700 ${isDiff() ? "bg-yellow-50 dark:bg-yellow-900/10" : ""}`));
-          return _el$311;
+          effect(() => className(_el$358, `border-t border-gray-100 dark:border-gray-700 ${isDiff() ? "bg-yellow-50 dark:bg-yellow-900/10" : ""}`));
+          return _el$358;
         })();
       }
     }));
-    return _el$303;
+    return _el$350;
   })();
 };
 delegateEvents(["click", "input"]);