@seed-ship/mcp-ui-solid 2.8.3 → 2.10.0

package/dist/components/ScratchpadPanel.js

@@ -1,11 +1,9 @@
-import { delegateEvents, getNextElement, template, getNextMarker, insert, createComponent, effect, setAttribute, runHydrationEvents, memo, className, setStyleProperty } from "solid-js/web";
+import { delegateEvents, getNextElement, template, getNextMarker, insert, createComponent, effect, setAttribute, runHydrationEvents, memo, className, setStyleProperty, setProperty } from "solid-js/web";
 import { createSignal, createEffect, onCleanup, Show, For, Switch, Match } from "solid-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 scratchpad"><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-3 border-t border-gray-100 dark:border-gray-700 space-y-2">`), _tmpl$4 = /* @__PURE__ */ template(`<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$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><!$><!/>`), _tmpl$6 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700">`), _tmpl$7 = /* @__PURE__ */ template(`<div style=overflow-y:auto><div class="divide-y divide-gray-100 dark:divide-gray-700"></div><!$><!/><!$><!/>`), _tmpl$8 = /* @__PURE__ */ template(`<div class="w-full bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-lg overflow-visible"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); }
-        }
-      `), _tmpl$9 = /* @__PURE__ */ template(`<div><span class="flex-shrink-0 mt-0.5"></span><p>`), _tmpl$0 = /* @__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$1 = /* @__PURE__ */ template(`<p class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$10 = /* @__PURE__ */ template(`<div class="mt-2 overflow-x-auto"><table class="min-w-full text-xs"><thead><tr></tr></thead><tbody>`), _tmpl$11 = /* @__PURE__ */ template(`<th class="px-2 py-1 text-left font-medium text-gray-500 dark:text-gray-400">`), _tmpl$12 = /* @__PURE__ */ template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$13 = /* @__PURE__ */ template(`<td class="px-2 py-1 text-gray-700 dark:text-gray-300">`), _tmpl$14 = /* @__PURE__ */ template(`<pre class="text-xs text-gray-500 dark:text-gray-400 overflow-auto">`), _tmpl$15 = /* @__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$16 = /* @__PURE__ */ template(`<div class=space-y-1>`), _tmpl$17 = /* @__PURE__ */ template(`<div class="flex gap-2 text-sm"><span class="text-gray-500 dark:text-gray-400 font-mono text-xs min-w-[120px]"><!$><!/>:</span><span class="text-gray-900 dark:text-white text-xs">`), _tmpl$18 = /* @__PURE__ */ template(`<p class="text-xs text-gray-400 italic">No filters applied`), _tmpl$19 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1.5"><!$><!/><!$><!/>`), _tmpl$20 = /* @__PURE__ */ template(`<button type=button class="ml-0.5 hover:text-blue-900 dark:hover:text-blue-100 transition-colors">&times;`), _tmpl$21 = /* @__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"><span class="text-blue-500 dark:text-blue-400"><!$><!/>:</span><!$><!/><!$><!/>`), _tmpl$22 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-2">`), _tmpl$23 = /* @__PURE__ */ template(`<span class=mr-1>`), _tmpl$24 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/>`), _tmpl$25 = /* @__PURE__ */ template(`<div class="flex items-center gap-1">`), _tmpl$26 = /* @__PURE__ */ template(`<div>`), _tmpl$27 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/>`);
+import { FormFieldRenderer } from "./FormFieldRenderer.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(`<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$8 = /* @__PURE__ */ template(`<div style=overflow-y:auto><!$><!/><div class="divide-y divide-gray-100 dark:divide-gray-700"></div><!$><!/><!$><!/><!$><!/>`), _tmpl$9 = /* @__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); } }
+      `), _tmpl$0 = /* @__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$1 = /* @__PURE__ */ template(`<span class="ml-1 font-normal opacity-75">— <!$><!/>`), _tmpl$10 = /* @__PURE__ */ template(`<span><!$><!/> <!$><!/><!$><!/>`), _tmpl$11 = /* @__PURE__ */ template(`<div><span class="flex-shrink-0 mt-0.5"></span><p>`), _tmpl$12 = /* @__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$13 = /* @__PURE__ */ template(`<p class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$14 = /* @__PURE__ */ template(`<div class="mt-2 overflow-x-auto"><table class="min-w-full text-xs"><thead><tr></tr></thead><tbody>`), _tmpl$15 = /* @__PURE__ */ template(`<th class="px-2 py-1 text-left font-medium text-gray-500 dark:text-gray-400">`), _tmpl$16 = /* @__PURE__ */ template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$17 = /* @__PURE__ */ template(`<td class="px-2 py-1 text-gray-700 dark:text-gray-300">`), _tmpl$18 = /* @__PURE__ */ template(`<pre class="text-xs text-gray-500 overflow-auto">`), _tmpl$19 = /* @__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$20 = /* @__PURE__ */ template(`<div class=space-y-1>`), _tmpl$21 = /* @__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$22 = /* @__PURE__ */ template(`<p class="text-xs text-gray-400 italic">No filters`), _tmpl$23 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1.5"><!$><!/><!$><!/>`), _tmpl$24 = /* @__PURE__ */ template(`<button type=button class="ml-0.5 hover:text-blue-900 dark:hover:text-blue-100">&times;`), _tmpl$25 = /* @__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$26 = /* @__PURE__ */ template(`<div class="max-h-48 overflow-y-auto">`), _tmpl$27 = /* @__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$28 = /* @__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$29 = /* @__PURE__ */ template(`<div class=relative><!$><!/><!$><!/>`), _tmpl$30 = /* @__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$31 = /* @__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$32 = /* @__PURE__ */ template(`<span class=ml-1>✓`), _tmpl$33 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/>`), _tmpl$34 = /* @__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$35 = /* @__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$36 = /* @__PURE__ */ template(`<div class=space-y-3><!$><!/><!$><!/>`), _tmpl$37 = /* @__PURE__ */ template(`<span class="text-xs font-normal text-gray-500 dark:text-gray-400">— <!$><!/>`), _tmpl$38 = /* @__PURE__ */ template(`<div class="mt-2 ml-6">`), _tmpl$39 = /* @__PURE__ */ template(`<div><div><span></span><!$><!/><!$><!/></div><!$><!/>`), _tmpl$40 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-2">`), _tmpl$41 = /* @__PURE__ */ template(`<span class=mr-1>`), _tmpl$42 = /* @__PURE__ */ template(`<div class=space-y-2><div class=space-y-1.5></div><!$><!/>`), _tmpl$43 = /* @__PURE__ */ template(`<div class="flex items-center gap-2 text-sm"><span></span><span class="text-gray-900 dark:text-white">`), _tmpl$44 = /* @__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$45 = /* @__PURE__ */ template(`<input type=text class="w-full 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">`), _tmpl$46 = /* @__PURE__ */ template(`<div class=space-y-3><p class="text-sm text-gray-700 dark:text-gray-300"></p><div class="flex gap-2"><button type=button class="px-3 py-1.5 text-sm font-medium rounded-lg bg-green-600 text-white hover:bg-green-700 transition-colors flex items-center gap-1">&#128077; <!$><!/></button><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 flex items-center gap-1">&#128078; <!$><!/></button></div><!$><!/>`), _tmpl$47 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400 italic">"<!$><!/>"`), _tmpl$48 = /* @__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$49 = /* @__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$50 = /* @__PURE__ */ template(`<div class=space-y-2><!$><!/><div class=space-y-1></div><!$><!/><!$><!/>`), _tmpl$51 = /* @__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">`);
 const STATUS_BADGES = {
   loading: {
     label: "Loading...",
@@ -30,9 +28,13 @@ const STATUS_BADGES = {
 };
 const ScratchpadPanel = (props) => {
   const [collapsed, setCollapsed] = createSignal(false);
+  const [localPreview, setLocalPreview] = createSignal(void 0);
+  let previewTimer = null;
   const badge = () => STATUS_BADGES[props.state.status] || STATUS_BADGES.loading;
   const isClosable = () => props.closable !== false;
   const isCollapsible = () => props.collapsible !== false;
+  const preview = () => localPreview() || props.state.preview;
+  const hasFilters = () => Object.keys(props.state.filters || {}).length > 0;
   createEffect(() => {
     if (props.state.status === "complete" && props.autoCloseDelay) {
       const timer = setTimeout(() => {
@@ -42,13 +44,36 @@ const ScratchpadPanel = (props) => {
       onCleanup(() => clearTimeout(timer));
     }
   });
-  const handleHeaderClick = () => {
-    if (isCollapsible()) setCollapsed(!collapsed());
-  };
+  createEffect(() => {
+    const endpoint = props.state.previewEndpoint;
+    if (!endpoint) return;
+    const filters = props.state.filters;
+    if (!filters || Object.keys(filters).length === 0) return;
+    if (previewTimer) clearTimeout(previewTimer);
+    previewTimer = setTimeout(async () => {
+      try {
+        const res = await fetch(endpoint, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          credentials: "include",
+          body: JSON.stringify({
+            filters
+          })
+        });
+        if (res.ok) setLocalPreview(await res.json());
+      } catch {
+      }
+    }, props.state.previewDebounce || 500);
+  });
+  onCleanup(() => {
+    if (previewTimer) clearTimeout(previewTimer);
+  });
   return (() => {
-    var _el$ = getNextElement(_tmpl$8), _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$27 = _el$2.nextSibling, [_el$28, _co$6] = getNextMarker(_el$27.nextSibling);
-    _el$28.nextSibling;
-    _el$2.$$click = handleHeaderClick;
+    var _el$ = getNextElement(_tmpl$9), _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$32 = _el$2.nextSibling, [_el$33, _co$7] = getNextMarker(_el$32.nextSibling);
+    _el$33.nextSibling;
+    _el$2.$$click = () => isCollapsible() && setCollapsed(!collapsed());
     insert(_el$5, () => props.state.title);
     insert(_el$3, createComponent(Show, {
       get when() {
@@ -81,8 +106,49 @@ const ScratchpadPanel = (props) => {
         return !collapsed();
       },
       get children() {
-        var _el$12 = getNextElement(_tmpl$7), _el$13 = _el$12.firstChild, _el$22 = _el$13.nextSibling, [_el$23, _co$4] = getNextMarker(_el$22.nextSibling), _el$24 = _el$23.nextSibling, [_el$25, _co$5] = getNextMarker(_el$24.nextSibling);
-        insert(_el$13, createComponent(For, {
+        var _el$12 = getNextElement(_tmpl$8), _el$23 = _el$12.firstChild, [_el$24, _co$3] = getNextMarker(_el$23.nextSibling), _el$14 = _el$24.nextSibling, _el$25 = _el$14.nextSibling, [_el$26, _co$4] = getNextMarker(_el$25.nextSibling), _el$27 = _el$26.nextSibling, [_el$28, _co$5] = getNextMarker(_el$27.nextSibling), _el$29 = _el$28.nextSibling, [_el$30, _co$6] = getNextMarker(_el$29.nextSibling);
+        insert(_el$12, 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, {
+              get each() {
+                return props.state.turnHistory;
+              },
+              children: (turn, i) => [createComponent(Show, {
+                get when() {
+                  return i() > 0;
+                },
+                get children() {
+                  return getNextElement(_tmpl$0);
+                }
+              }), (() => {
+                var _el$35 = getNextElement(_tmpl$10), _el$41 = _el$35.firstChild, [_el$42, _co$9] = getNextMarker(_el$41.nextSibling), _el$36 = _el$42.nextSibling, _el$43 = _el$36.nextSibling, [_el$44, _co$0] = getNextMarker(_el$43.nextSibling), _el$45 = _el$44.nextSibling, [_el$46, _co$1] = getNextMarker(_el$45.nextSibling);
+                insert(_el$35, (() => {
+                  var _c$ = memo(() => turn.status === "done");
+                  return () => _c$() ? "✅" : turn.status === "active" ? "●" : "○";
+                })(), _el$42, _co$9);
+                insert(_el$35, () => turn.label, _el$44, _co$0);
+                insert(_el$35, createComponent(Show, {
+                  get when() {
+                    return turn.summary;
+                  },
+                  get children() {
+                    var _el$37 = getNextElement(_tmpl$1), _el$38 = _el$37.firstChild, _el$39 = _el$38.nextSibling, [_el$40, _co$8] = getNextMarker(_el$39.nextSibling);
+                    insert(_el$37, () => turn.summary, _el$40, _co$8);
+                    return _el$37;
+                  }
+                }), _el$46, _co$1);
+                effect(() => className(_el$35, `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$35;
+              })()]
+            }));
+            return _el$13;
+          }
+        }), _el$24, _co$3);
+        insert(_el$14, createComponent(For, {
           get each() {
             return props.state.sections;
           },
@@ -107,117 +173,126 @@ const ScratchpadPanel = (props) => {
             return props.state.agentMessages.length > 0;
           },
           get children() {
-            var _el$14 = getNextElement(_tmpl$3);
-            insert(_el$14, createComponent(For, {
+            var _el$15 = getNextElement(_tmpl$4);
+            insert(_el$15, createComponent(For, {
               get each() {
                 return props.state.agentMessages;
               },
               children: (msg) => (() => {
-                var _el$29 = getNextElement(_tmpl$9), _el$30 = _el$29.firstChild, _el$31 = _el$30.nextSibling;
-                insert(_el$30, (() => {
-                  var _c$ = memo(() => msg.type === "warning");
-                  return () => _c$() ? "⚠️" : msg.type === "question" ? "❓" : "ℹ️";
+                var _el$47 = getNextElement(_tmpl$11), _el$48 = _el$47.firstChild, _el$49 = _el$48.nextSibling;
+                insert(_el$48, (() => {
+                  var _c$2 = memo(() => msg.type === "warning");
+                  return () => _c$2() ? "⚠️" : msg.type === "question" ? "❓" : "ℹ️";
                 })());
-                insert(_el$31, () => msg.text);
-                effect(() => className(_el$29, `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$29;
+                insert(_el$49, () => msg.text);
+                effect(() => className(_el$47, `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$47;
               })()
             }));
-            return _el$14;
+            return _el$15;
           }
-        }), _el$23, _co$4);
+        }), _el$26, _co$4);
         insert(_el$12, createComponent(Show, {
           get when() {
-            return props.state.preview;
+            return preview();
           },
           get children() {
-            var _el$15 = getNextElement(_tmpl$6);
-            insert(_el$15, createComponent(Show, {
+            var _el$16 = getNextElement(_tmpl$6);
+            insert(_el$16, createComponent(Show, {
               get when() {
-                return props.state.preview.count === 0;
+                return preview().count === 0;
               },
               get fallback() {
                 return [(() => {
-                  var _el$32 = getNextElement(_tmpl$0), _el$33 = _el$32.firstChild, _el$34 = _el$33.nextSibling;
-                  insert(_el$34, () => props.state.preview.count.toLocaleString());
-                  return _el$32;
+                  var _el$50 = getNextElement(_tmpl$12), _el$51 = _el$50.firstChild, _el$52 = _el$51.nextSibling;
+                  insert(_el$52, () => preview().count.toLocaleString());
+                  return _el$50;
                 })(), (() => {
-                  var _el$35 = getNextElement(_tmpl$1);
-                  insert(_el$35, () => props.state.preview.summary);
-                  return _el$35;
+                  var _el$53 = getNextElement(_tmpl$13);
+                  insert(_el$53, () => preview().summary);
+                  return _el$53;
                 })(), createComponent(Show, {
                   get when() {
-                    return memo(() => !!props.state.preview.rows)() && props.state.preview.rows.length > 0;
+                    return memo(() => !!preview().rows)() && preview().rows.length > 0;
                   },
                   get children() {
-                    var _el$36 = getNextElement(_tmpl$10), _el$37 = _el$36.firstChild, _el$38 = _el$37.firstChild, _el$39 = _el$38.firstChild, _el$40 = _el$38.nextSibling;
-                    insert(_el$39, createComponent(For, {
+                    var _el$54 = getNextElement(_tmpl$14), _el$55 = _el$54.firstChild, _el$56 = _el$55.firstChild, _el$57 = _el$56.firstChild, _el$58 = _el$56.nextSibling;
+                    insert(_el$57, createComponent(For, {
                       get each() {
-                        return Object.keys(props.state.preview.rows[0]);
+                        return Object.keys(preview().rows[0]);
                       },
-                      children: (key) => (() => {
-                        var _el$41 = getNextElement(_tmpl$11);
-                        insert(_el$41, key);
-                        return _el$41;
+                      children: (k) => (() => {
+                        var _el$59 = getNextElement(_tmpl$15);
+                        insert(_el$59, k);
+                        return _el$59;
                       })()
                     }));
-                    insert(_el$40, createComponent(For, {
+                    insert(_el$58, createComponent(For, {
                       get each() {
-                        return props.state.preview.rows.slice(0, 5);
+                        return preview().rows.slice(0, 5);
                       },
                       children: (row) => (() => {
-                        var _el$42 = getNextElement(_tmpl$12);
-                        insert(_el$42, createComponent(For, {
+                        var _el$60 = getNextElement(_tmpl$16);
+                        insert(_el$60, createComponent(For, {
                           get each() {
                             return Object.values(row);
                           },
-                          children: (val) => (() => {
-                            var _el$43 = getNextElement(_tmpl$13);
-                            insert(_el$43, () => String(val));
-                            return _el$43;
+                          children: (v) => (() => {
+                            var _el$61 = getNextElement(_tmpl$17);
+                            insert(_el$61, () => String(v));
+                            return _el$61;
                           })()
                         }));
-                        return _el$42;
+                        return _el$60;
                       })()
                     }));
-                    return _el$36;
+                    return _el$54;
                   }
                 })];
               },
               get children() {
-                var _el$16 = getNextElement(_tmpl$5), _el$17 = _el$16.firstChild, _el$18 = _el$17.nextSibling, _el$20 = _el$18.nextSibling, [_el$21, _co$3] = getNextMarker(_el$20.nextSibling);
-                insert(_el$16, createComponent(Show, {
-                  get when() {
-                    return props.onFilterChange;
-                  },
-                  get children() {
-                    var _el$19 = getNextElement(_tmpl$4);
-                    _el$19.$$click = () => {
-                      var _a;
-                      return (_a = props.onAction) == null ? void 0 : _a.call(props, "refine_filters");
-                    };
-                    runHydrationEvents();
-                    return _el$19;
-                  }
-                }), _el$21, _co$3);
-                return _el$16;
+                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 _a;
+                  return (_a = props.onAction) == null ? void 0 : _a.call(props, "refine_filters");
+                };
+                runHydrationEvents();
+                return _el$17;
               }
             }));
-            return _el$15;
+            return _el$16;
           }
-        }), _el$25, _co$5);
-        effect((_$p) => setStyleProperty(_el$12, "max-height", props.maxHeight || "400px"));
+        }), _el$28, _co$5);
+        insert(_el$12, createComponent(Show, {
+          get when() {
+            return memo(() => props.state.status === "waiting_human")() && hasFilters();
+          },
+          get children() {
+            var _el$21 = getNextElement(_tmpl$7), _el$22 = _el$21.firstChild;
+            _el$22.$$click = () => {
+              var _a;
+              return (_a = props.onAction) == null ? void 0 : _a.call(props, "search", {
+                filters: props.state.filters
+              });
+            };
+            runHydrationEvents();
+            return _el$21;
+          }
+        }), _el$30, _co$6);
+        effect((_$p) => setStyleProperty(_el$12, "max-height", props.maxHeight || "500px"));
         return _el$12;
       }
-    }), _el$28, _co$6);
+    }), _el$33, _co$7);
     effect((_p$) => {
-      var _v$ = `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$2 = `px-2 py-0.5 text-xs font-medium rounded-full ${badge().class}`;
-      _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$0, _p$.t = _v$2);
+      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"}`, _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);
       return _p$;
     }, {
       e: void 0,
-      t: void 0
+      t: void 0,
+      a: void 0
     });
     runHydrationEvents();
     return _el$;
@@ -225,9 +300,9 @@ const ScratchpadPanel = (props) => {
 };
 const SectionRenderer = (props) => {
   return (() => {
-    var _el$44 = getNextElement(_tmpl$15), _el$45 = _el$44.firstChild, _el$48 = _el$45.nextSibling, [_el$49, _co$7] = getNextMarker(_el$48.nextSibling);
-    insert(_el$45, () => props.section.title);
-    insert(_el$44, createComponent(Switch, {
+    var _el$62 = getNextElement(_tmpl$19), _el$63 = _el$62.firstChild, _el$66 = _el$63.nextSibling, [_el$67, _co$10] = getNextMarker(_el$66.nextSibling);
+    insert(_el$63, () => props.section.title);
+    insert(_el$62, createComponent(Switch, {
       get children() {
         return [createComponent(Match, {
           get when() {
@@ -245,7 +320,10 @@ const SectionRenderer = (props) => {
             return props.section.type === "filter";
           },
           get children() {
-            return createComponent(FilterSection, {
+            return createComponent(InteractiveFilterSection, {
+              get content() {
+                return props.section.content;
+              },
               get filters() {
                 return props.filters;
               },
@@ -259,9 +337,9 @@ const SectionRenderer = (props) => {
             return props.section.type === "message";
           },
           get children() {
-            var _el$46 = getNextElement(_tmpl$1);
-            insert(_el$46, () => String(props.section.content));
-            return _el$46;
+            var _el$64 = getNextElement(_tmpl$13);
+            insert(_el$64, () => String(props.section.content));
+            return _el$64;
           }
         }), createComponent(Match, {
           get when() {
@@ -282,52 +360,122 @@ const SectionRenderer = (props) => {
             return props.section.type === "steps";
           },
           get children() {
-            return createComponent(StepsSection, {
+            return createComponent(EnrichedStepsSection, {
+              get content() {
+                return props.section.content;
+              },
+              get onAction() {
+                return props.onAction;
+              },
+              get onFilterChange() {
+                return props.onFilterChange;
+              }
+            });
+          }
+        }), createComponent(Match, {
+          get when() {
+            return props.section.type === "form";
+          },
+          get children() {
+            return createComponent(EmbeddedFormSection, {
+              get content() {
+                return props.section.content;
+              },
+              get sectionId() {
+                return props.section.id;
+              },
+              get onAction() {
+                return props.onAction;
+              }
+            });
+          }
+        }), createComponent(Match, {
+          get when() {
+            return props.section.type === "understanding";
+          },
+          get children() {
+            return createComponent(UnderstandingSection, {
               get content() {
                 return props.section.content;
               }
             });
           }
+        }), createComponent(Match, {
+          get when() {
+            return props.section.type === "feedback";
+          },
+          get children() {
+            return createComponent(FeedbackSection, {
+              get content() {
+                return props.section.content;
+              },
+              get onAction() {
+                return props.onAction;
+              }
+            });
+          }
+        }), createComponent(Match, {
+          get when() {
+            return props.section.type === "prompt";
+          },
+          get children() {
+            return createComponent(PromptSection, {
+              get content() {
+                return props.section.content;
+              },
+              get onAction() {
+                return props.onAction;
+              }
+            });
+          }
         }), createComponent(Match, {
           when: true,
           get children() {
-            var _el$47 = getNextElement(_tmpl$14);
-            insert(_el$47, () => JSON.stringify(props.section.content, null, 2));
-            return _el$47;
+            var _el$65 = getNextElement(_tmpl$18);
+            insert(_el$65, () => JSON.stringify(props.section.content, null, 2));
+            return _el$65;
           }
         })];
       }
-    }), _el$49, _co$7);
-    return _el$44;
+    }), _el$67, _co$10);
+    return _el$62;
   })();
 };
 const DataSection = (props) => {
-  const entries = () => {
-    if (typeof props.content !== "object" || !props.content) return [];
-    return Object.entries(props.content);
-  };
+  const entries = () => typeof props.content === "object" && props.content ? Object.entries(props.content) : [];
   return (() => {
-    var _el$50 = getNextElement(_tmpl$16);
-    insert(_el$50, createComponent(For, {
+    var _el$68 = getNextElement(_tmpl$20);
+    insert(_el$68, createComponent(For, {
       get each() {
         return entries();
       },
-      children: ([key, value]) => (() => {
-        var _el$51 = getNextElement(_tmpl$17), _el$52 = _el$51.firstChild, _el$54 = _el$52.firstChild, [_el$55, _co$8] = getNextMarker(_el$54.nextSibling);
-        _el$55.nextSibling;
-        var _el$56 = _el$52.nextSibling;
-        insert(_el$52, key, _el$55, _co$8);
-        insert(_el$56, (() => {
-          var _c$2 = memo(() => !!Array.isArray(value));
-          return () => _c$2() ? value.join(", ") : String(value);
+      children: ([k, v]) => (() => {
+        var _el$69 = getNextElement(_tmpl$21), _el$70 = _el$69.firstChild, _el$72 = _el$70.firstChild, [_el$73, _co$11] = getNextMarker(_el$72.nextSibling);
+        _el$73.nextSibling;
+        var _el$74 = _el$70.nextSibling;
+        insert(_el$70, k, _el$73, _co$11);
+        insert(_el$74, (() => {
+          var _c$3 = memo(() => !!Array.isArray(v));
+          return () => _c$3() ? v.join(", ") : String(v);
         })());
-        return _el$51;
+        return _el$69;
       })()
     }));
-    return _el$50;
+    return _el$68;
   })();
 };
-const FilterSection = (props) => {
+const InteractiveFilterSection = (props) => {
+  const [editingKey, setEditingKey] = createSignal(null);
+  const [editValue, setEditValue] = createSignal("");
+  const filterDefs = () => {
+    if (typeof props.content === "object" && props.content) return props.content;
+    return {};
+  };
+  const allKeys = () => {
+    const fromContent = Object.keys(filterDefs());
+    const fromFilters = Object.keys(props.filters || {});
+    return [.../* @__PURE__ */ new Set([...fromContent, ...fromFilters])];
+  };
   const removeFilter = (key) => {
     var _a;
     const next = {
@@ -336,119 +484,523 @@ const FilterSection = (props) => {
     delete next[key];
     (_a = props.onFilterChange) == null ? void 0 : _a.call(props, next);
   };
-  const entries = () => Object.entries(props.filters);
+  const setFilter = (key, value) => {
+    var _a;
+    (_a = props.onFilterChange) == null ? void 0 : _a.call(props, {
+      ...props.filters,
+      [key]: value
+    });
+    setEditingKey(null);
+    setEditValue("");
+  };
+  const getDef = (key) => filterDefs()[key] || {};
   return (() => {
-    var _el$57 = getNextElement(_tmpl$19), _el$59 = _el$57.firstChild, [_el$60, _co$9] = getNextMarker(_el$59.nextSibling), _el$61 = _el$60.nextSibling, [_el$62, _co$0] = getNextMarker(_el$61.nextSibling);
-    insert(_el$57, createComponent(For, {
+    var _el$75 = getNextElement(_tmpl$23), _el$77 = _el$75.firstChild, [_el$78, _co$12] = getNextMarker(_el$77.nextSibling), _el$79 = _el$78.nextSibling, [_el$80, _co$13] = getNextMarker(_el$79.nextSibling);
+    insert(_el$75, createComponent(For, {
       get each() {
-        return entries();
+        return allKeys();
       },
-      children: ([key, value]) => (() => {
-        var _el$63 = getNextElement(_tmpl$21), _el$64 = _el$63.firstChild, _el$66 = _el$64.firstChild, [_el$67, _co$1] = getNextMarker(_el$66.nextSibling);
-        _el$67.nextSibling;
-        var _el$69 = _el$64.nextSibling, [_el$70, _co$10] = getNextMarker(_el$69.nextSibling), _el$71 = _el$70.nextSibling, [_el$72, _co$11] = getNextMarker(_el$71.nextSibling);
-        insert(_el$64, key, _el$67, _co$1);
-        insert(_el$63, (() => {
-          var _c$3 = memo(() => !!Array.isArray(value));
-          return () => _c$3() ? value.join(", ") : String(value);
-        })(), _el$70, _co$10);
-        insert(_el$63, createComponent(Show, {
+      children: (key) => {
+        const def = () => getDef(key);
+        const value = () => props.filters[key];
+        const hasValue = () => value() !== void 0 && value() !== "";
+        return (() => {
+          var _el$81 = getNextElement(_tmpl$29), _el$97 = _el$81.firstChild, [_el$98, _co$17] = getNextMarker(_el$97.nextSibling), _el$99 = _el$98.nextSibling, [_el$100, _co$18] = getNextMarker(_el$99.nextSibling);
+          insert(_el$81, createComponent(Show, {
+            get when() {
+              return hasValue();
+            },
+            get fallback() {
+              return (() => {
+                var _el$101 = getNextElement(_tmpl$30), _el$102 = _el$101.firstChild, _el$103 = _el$102.nextSibling, [_el$104, _co$19] = getNextMarker(_el$103.nextSibling);
+                _el$101.$$click = () => {
+                  setEditingKey(key);
+                  setEditValue("");
+                };
+                insert(_el$101, () => {
+                  var _a;
+                  return ((_a = def()) == null ? void 0 : _a.label) || key;
+                }, _el$104, _co$19);
+                runHydrationEvents();
+                return _el$101;
+              })();
+            },
+            get children() {
+              var _el$82 = getNextElement(_tmpl$25), _el$83 = _el$82.firstChild, _el$84 = _el$83.firstChild, _el$86 = _el$84.firstChild, [_el$87, _co$14] = getNextMarker(_el$86.nextSibling);
+              _el$87.nextSibling;
+              var _el$88 = _el$84.nextSibling, _el$89 = _el$88.nextSibling, [_el$90, _co$15] = getNextMarker(_el$89.nextSibling), _el$92 = _el$83.nextSibling, [_el$93, _co$16] = getNextMarker(_el$92.nextSibling);
+              _el$83.$$click = () => {
+                setEditingKey(key);
+                setEditValue(String(value() || ""));
+              };
+              insert(_el$84, () => {
+                var _a;
+                return ((_a = def()) == null ? void 0 : _a.label) || key;
+              }, _el$87, _co$14);
+              insert(_el$83, (() => {
+                var _c$4 = memo(() => !!Array.isArray(value()));
+                return () => _c$4() ? value().join(", ") : String(value());
+              })(), _el$90, _co$15);
+              insert(_el$82, createComponent(Show, {
+                get when() {
+                  return props.onFilterChange;
+                },
+                get children() {
+                  var _el$91 = getNextElement(_tmpl$24);
+                  _el$91.$$click = () => removeFilter(key);
+                  setAttribute(_el$91, "aria-label", `Remove ${key}`);
+                  runHydrationEvents();
+                  return _el$91;
+                }
+              }), _el$93, _co$16);
+              runHydrationEvents();
+              return _el$82;
+            }
+          }), _el$98, _co$17);
+          insert(_el$81, createComponent(Show, {
+            get when() {
+              return editingKey() === key;
+            },
+            get children() {
+              var _el$94 = getNextElement(_tmpl$28);
+              insert(_el$94, createComponent(Show, {
+                get when() {
+                  var _a;
+                  return (_a = def()) == null ? void 0 : _a.options;
+                },
+                get fallback() {
+                  return (() => {
+                    var _el$105 = getNextElement(_tmpl$31), _el$106 = _el$105.firstChild, _el$107 = _el$106.nextSibling, _el$108 = _el$107.nextSibling;
+                    _el$105.addEventListener("submit", (e) => {
+                      e.preventDefault();
+                      setFilter(key, editValue());
+                    });
+                    _el$106.$$input = (e) => setEditValue(e.currentTarget.value);
+                    _el$108.$$click = () => setEditingKey(null);
+                    effect(() => {
+                      var _a;
+                      return setAttribute(_el$106, "placeholder", ((_a = def()) == null ? void 0 : _a.placeholder) || key);
+                    });
+                    effect(() => setProperty(_el$106, "value", editValue()));
+                    runHydrationEvents();
+                    return _el$105;
+                  })();
+                },
+                get children() {
+                  return [(() => {
+                    var _el$95 = getNextElement(_tmpl$26);
+                    insert(_el$95, createComponent(For, {
+                      get each() {
+                        return def().options;
+                      },
+                      children: (opt) => (() => {
+                        var _el$109 = getNextElement(_tmpl$33), _el$111 = _el$109.firstChild, [_el$112, _co$20] = getNextMarker(_el$111.nextSibling), _el$113 = _el$112.nextSibling, [_el$114, _co$21] = getNextMarker(_el$113.nextSibling);
+                        _el$109.$$click = () => setFilter(key, opt.value);
+                        insert(_el$109, () => opt.label, _el$112, _co$20);
+                        insert(_el$109, createComponent(Show, {
+                          get when() {
+                            return String(value()) === opt.value;
+                          },
+                          get children() {
+                            return getNextElement(_tmpl$32);
+                          }
+                        }), _el$114, _co$21);
+                        effect(() => className(_el$109, `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$109;
+                      })()
+                    }));
+                    return _el$95;
+                  })(), (() => {
+                    var _el$96 = getNextElement(_tmpl$27);
+                    _el$96.$$click = () => setEditingKey(null);
+                    runHydrationEvents();
+                    return _el$96;
+                  })()];
+                }
+              }));
+              return _el$94;
+            }
+          }), _el$100, _co$18);
+          return _el$81;
+        })();
+      }
+    }), _el$78, _co$12);
+    insert(_el$75, createComponent(Show, {
+      get when() {
+        return allKeys().length === 0;
+      },
+      get children() {
+        return getNextElement(_tmpl$22);
+      }
+    }), _el$80, _co$13);
+    return _el$75;
+  })();
+};
+const EmbeddedFormSection = (props) => {
+  const [formData, setFormData] = createSignal({});
+  const [dynamicOptions, setDynamicOptions] = createSignal({});
+  const config = () => {
+    const c = props.content;
+    return {
+      fields: (c == null ? void 0 : c.fields) || [],
+      submitLabel: (c == null ? void 0 : c.submitLabel) || "Submit"
+    };
+  };
+  const updateField = (name, value) => setFormData((prev) => ({
+    ...prev,
+    [name]: value
+  }));
+  createEffect(() => {
+    const data = formData();
+    for (const field of config().fields) {
+      const dep = field.depends_on || field.dependsOn;
+      if (!dep) continue;
+      const parentValue = data[dep.field];
+      if (!parentValue) continue;
+      const url = (dep.options_endpoint || dep.apiUrl || "").replace("{value}", encodeURIComponent(parentValue));
+      if (!url) continue;
+      const params = new URLSearchParams(dep.extraParams || dep.extra_params || {});
+      fetch(`${url}${url.includes("?") ? "&" : "?"}${params}`).then((r) => r.json()).then((items) => {
+        const arr = Array.isArray(items) ? items : items.results || items.features || [];
+        const lf = dep.label_field || dep.labelField || "label";
+        const vf = dep.value_field || dep.valueField || "value";
+        setDynamicOptions((prev) => ({
+          ...prev,
+          [field.name]: arr.map((i) => ({
+            label: i[lf] || String(i),
+            value: String(i[vf] || i[lf] || i)
+          }))
+        }));
+      }).catch(() => {
+      });
+    }
+  });
+  const getField = (field) => {
+    const dynOpts = dynamicOptions()[field.name];
+    return dynOpts ? {
+      ...field,
+      options: dynOpts
+    } : field;
+  };
+  const handleSubmit = (e) => {
+    var _a;
+    e.preventDefault();
+    (_a = props.onAction) == null ? void 0 : _a.call(props, "submit_form", {
+      sectionId: props.sectionId,
+      values: formData()
+    });
+  };
+  return (() => {
+    var _el$115 = getNextElement(_tmpl$34), _el$118 = _el$115.firstChild, [_el$119, _co$22] = getNextMarker(_el$118.nextSibling), _el$116 = _el$119.nextSibling, _el$117 = _el$116.firstChild;
+    _el$115.addEventListener("submit", handleSubmit);
+    insert(_el$115, createComponent(For, {
+      get each() {
+        return config().fields;
+      },
+      children: (field) => createComponent(FormFieldRenderer, {
+        get field() {
+          return getField(field);
+        },
+        get value() {
+          return formData()[field.name];
+        },
+        onChange: (val) => updateField(field.name, val),
+        formData
+      })
+    }), _el$119, _co$22);
+    insert(_el$117, () => config().submitLabel);
+    return _el$115;
+  })();
+};
+const EnrichedStepsSection = (props) => {
+  const stepsData = () => {
+    const c = props.content;
+    return {
+      steps: (c == null ? void 0 : c.steps) || [],
+      currentStep: (c == null ? void 0 : c.currentStep) ?? 0
+    };
+  };
+  return (() => {
+    var _el$120 = getNextElement(_tmpl$36), _el$123 = _el$120.firstChild, [_el$124, _co$23] = getNextMarker(_el$123.nextSibling), _el$125 = _el$124.nextSibling, [_el$126, _co$24] = getNextMarker(_el$125.nextSibling);
+    insert(_el$120, createComponent(For, {
+      get each() {
+        return stepsData().steps;
+      },
+      children: (step) => (() => {
+        var _el$127 = getNextElement(_tmpl$39), _el$128 = _el$127.firstChild, _el$129 = _el$128.firstChild, _el$134 = _el$129.nextSibling, [_el$135, _co$26] = getNextMarker(_el$134.nextSibling), _el$136 = _el$135.nextSibling, [_el$137, _co$27] = getNextMarker(_el$136.nextSibling), _el$139 = _el$128.nextSibling, [_el$140, _co$28] = getNextMarker(_el$139.nextSibling);
+        insert(_el$129, (() => {
+          var _c$5 = memo(() => step.status === "done");
+          return () => _c$5() ? "✅" : step.status === "active" ? "●" : "○";
+        })());
+        insert(_el$128, () => step.label, _el$135, _co$26);
+        insert(_el$128, createComponent(Show, {
           get when() {
-            return props.onFilterChange;
+            return memo(() => !!step.description)() && step.status === "active";
           },
           get children() {
-            var _el$68 = getNextElement(_tmpl$20);
-            _el$68.$$click = () => removeFilter(key);
-            setAttribute(_el$68, "aria-label", `Remove filter ${key}`);
-            runHydrationEvents();
-            return _el$68;
+            var _el$130 = getNextElement(_tmpl$37), _el$131 = _el$130.firstChild, _el$132 = _el$131.nextSibling, [_el$133, _co$25] = getNextMarker(_el$132.nextSibling);
+            insert(_el$130, () => step.description, _el$133, _co$25);
+            return _el$130;
+          }
+        }), _el$137, _co$27);
+        insert(_el$127, createComponent(Show, {
+          get when() {
+            return memo(() => step.status === "active")() && step.content;
+          },
+          get children() {
+            var _el$138 = getNextElement(_tmpl$38);
+            insert(_el$138, createComponent(SectionRenderer, {
+              get section() {
+                return step.content;
+              },
+              filters: {},
+              get onFilterChange() {
+                return props.onFilterChange;
+              },
+              get onAction() {
+                return props.onAction;
+              }
+            }));
+            return _el$138;
           }
-        }), _el$72, _co$11);
-        return _el$63;
+        }), _el$140, _co$28);
+        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" : "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$127, _p$.e = _v$4);
+          _v$5 !== _p$.t && className(_el$128, _p$.t = _v$5);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$127;
       })()
-    }), _el$60, _co$9);
-    insert(_el$57, createComponent(Show, {
+    }), _el$124, _co$23);
+    insert(_el$120, createComponent(Show, {
       get when() {
-        return entries().length === 0;
+        return stepsData().steps.some((s) => s.status === "active");
       },
       get children() {
-        return getNextElement(_tmpl$18);
+        var _el$121 = getNextElement(_tmpl$35), _el$122 = _el$121.firstChild;
+        _el$122.$$click = () => {
+          var _a;
+          return (_a = props.onAction) == null ? void 0 : _a.call(props, "next_step", {
+            step: stepsData().currentStep
+          });
+        };
+        runHydrationEvents();
+        return _el$121;
       }
-    }), _el$62, _co$0);
-    return _el$57;
+    }), _el$126, _co$24);
+    return _el$120;
   })();
 };
 const ActionSection = (props) => {
-  const actions = () => {
-    if (Array.isArray(props.content)) return props.content;
-    return [];
-  };
+  const actions = () => Array.isArray(props.content) ? props.content : [];
   return (() => {
-    var _el$73 = getNextElement(_tmpl$22);
-    insert(_el$73, createComponent(For, {
+    var _el$141 = getNextElement(_tmpl$40);
+    insert(_el$141, createComponent(For, {
       get each() {
         return actions();
       },
       children: (item) => (() => {
-        var _el$74 = getNextElement(_tmpl$24), _el$76 = _el$74.firstChild, [_el$77, _co$12] = getNextMarker(_el$76.nextSibling), _el$78 = _el$77.nextSibling, [_el$79, _co$13] = getNextMarker(_el$78.nextSibling);
-        _el$74.$$click = () => {
+        var _el$142 = getNextElement(_tmpl$33), _el$144 = _el$142.firstChild, [_el$145, _co$29] = getNextMarker(_el$144.nextSibling), _el$146 = _el$145.nextSibling, [_el$147, _co$30] = getNextMarker(_el$146.nextSibling);
+        _el$142.$$click = () => {
           var _a;
           return (_a = props.onAction) == null ? void 0 : _a.call(props, item.value || item.action || item.label, item);
         };
-        insert(_el$74, createComponent(Show, {
+        insert(_el$142, createComponent(Show, {
           get when() {
             return item.icon;
           },
           get children() {
-            var _el$75 = getNextElement(_tmpl$23);
-            insert(_el$75, () => item.icon);
-            return _el$75;
+            var _el$143 = getNextElement(_tmpl$41);
+            insert(_el$143, () => item.icon);
+            return _el$143;
           }
-        }), _el$77, _co$12);
-        insert(_el$74, () => item.label, _el$79, _co$13);
-        effect(() => className(_el$74, `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"}`));
+        }), _el$145, _co$29);
+        insert(_el$142, () => item.label, _el$147, _co$30);
+        effect(() => className(_el$142, `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$74;
+        return _el$142;
+      })()
+    }));
+    return _el$141;
+  })();
+};
+const UnderstandingSection = (props) => {
+  const data = () => {
+    const c = props.content;
+    return {
+      detections: (c == null ? void 0 : c.detections) || [],
+      warnings: (c == null ? void 0 : c.warnings) || []
+    };
+  };
+  const confidenceClass = (conf) => {
+    switch (conf) {
+      case "high":
+        return "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400";
+      case "medium":
+        return "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400";
+      case "low":
+        return "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400";
+      default:
+        return "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400";
+    }
+  };
+  return (() => {
+    var _el$148 = getNextElement(_tmpl$42), _el$149 = _el$148.firstChild, _el$151 = _el$149.nextSibling, [_el$152, _co$31] = getNextMarker(_el$151.nextSibling);
+    insert(_el$149, createComponent(For, {
+      get each() {
+        return data().detections;
+      },
+      children: (det) => (() => {
+        var _el$153 = getNextElement(_tmpl$43), _el$154 = _el$153.firstChild, _el$155 = _el$154.nextSibling;
+        insert(_el$154, () => det.label);
+        insert(_el$155, () => det.value);
+        effect(() => className(_el$154, `px-1.5 py-0.5 text-xs font-medium rounded ${confidenceClass(det.confidence)}`));
+        return _el$153;
       })()
     }));
-    return _el$73;
+    insert(_el$148, createComponent(Show, {
+      get when() {
+        return data().warnings.length > 0;
+      },
+      get children() {
+        var _el$150 = getNextElement(_tmpl$20);
+        insert(_el$150, createComponent(For, {
+          get each() {
+            return data().warnings;
+          },
+          children: (w) => (() => {
+            var _el$156 = getNextElement(_tmpl$44), _el$157 = _el$156.firstChild, _el$158 = _el$157.nextSibling;
+            insert(_el$158, w);
+            return _el$156;
+          })()
+        }));
+        return _el$150;
+      }
+    }), _el$152, _co$31);
+    return _el$148;
   })();
 };
-const StepsSection = (props) => {
-  const steps = () => {
-    if (Array.isArray(props.content)) return props.content;
-    return [];
+const FeedbackSection = (props) => {
+  const [comment, setComment] = createSignal("");
+  const data = () => {
+    const c = props.content;
+    return {
+      question: (c == null ? void 0 : c.question) || "",
+      approve: (c == null ? void 0 : c.approve) || {
+        label: "Yes",
+        value: "approve"
+      },
+      reject: (c == null ? void 0 : c.reject) || {
+        label: "No",
+        value: "reject"
+      },
+      allowComment: (c == null ? void 0 : c.allowComment) ?? false,
+      commentPlaceholder: (c == null ? void 0 : c.commentPlaceholder) || "Add a comment..."
+    };
+  };
+  const handleFeedback = (approved) => {
+    var _a;
+    const d = data();
+    (_a = props.onAction) == null ? void 0 : _a.call(props, "feedback", {
+      approved,
+      value: approved ? d.approve.value : d.reject.value,
+      comment: comment()
+    });
   };
   return (() => {
-    var _el$80 = getNextElement(_tmpl$25);
-    insert(_el$80, createComponent(For, {
+    var _el$159 = getNextElement(_tmpl$46), _el$160 = _el$159.firstChild, _el$161 = _el$160.nextSibling, _el$162 = _el$161.firstChild, _el$163 = _el$162.firstChild, _el$164 = _el$163.nextSibling, [_el$165, _co$32] = getNextMarker(_el$164.nextSibling), _el$166 = _el$162.nextSibling, _el$167 = _el$166.firstChild, _el$168 = _el$167.nextSibling, [_el$169, _co$33] = getNextMarker(_el$168.nextSibling), _el$171 = _el$161.nextSibling, [_el$172, _co$34] = getNextMarker(_el$171.nextSibling);
+    insert(_el$160, () => data().question);
+    _el$162.$$click = () => handleFeedback(true);
+    insert(_el$162, () => data().approve.label, _el$165, _co$32);
+    _el$166.$$click = () => handleFeedback(false);
+    insert(_el$166, () => data().reject.label, _el$169, _co$33);
+    insert(_el$159, createComponent(Show, {
+      get when() {
+        return data().allowComment;
+      },
+      get children() {
+        var _el$170 = getNextElement(_tmpl$45);
+        _el$170.$$input = (e) => setComment(e.currentTarget.value);
+        effect(() => setAttribute(_el$170, "placeholder", data().commentPlaceholder));
+        effect(() => setProperty(_el$170, "value", comment()));
+        runHydrationEvents();
+        return _el$170;
+      }
+    }), _el$172, _co$34);
+    runHydrationEvents();
+    return _el$159;
+  })();
+};
+const PromptSection = (props) => {
+  const data = () => {
+    const c = props.content;
+    return {
+      originalQuery: (c == null ? void 0 : c.originalQuery) || "",
+      interpretation: (c == null ? void 0 : c.interpretation) || "",
+      extracted: (c == null ? void 0 : c.extracted) || {},
+      plan: (c == null ? void 0 : c.plan) || "",
+      editable: (c == null ? void 0 : c.editable) ?? false
+    };
+  };
+  return (() => {
+    var _el$173 = getNextElement(_tmpl$50), _el$186 = _el$173.firstChild, [_el$187, _co$37] = getNextMarker(_el$186.nextSibling), _el$179 = _el$187.nextSibling, _el$188 = _el$179.nextSibling, [_el$189, _co$38] = getNextMarker(_el$188.nextSibling), _el$190 = _el$189.nextSibling, [_el$191, _co$39] = getNextMarker(_el$190.nextSibling);
+    insert(_el$173, createComponent(Show, {
+      get when() {
+        return data().originalQuery;
+      },
+      get children() {
+        var _el$174 = getNextElement(_tmpl$47), _el$175 = _el$174.firstChild, _el$177 = _el$175.nextSibling, [_el$178, _co$35] = getNextMarker(_el$177.nextSibling);
+        _el$178.nextSibling;
+        insert(_el$174, () => data().originalQuery, _el$178, _co$35);
+        return _el$174;
+      }
+    }), _el$187, _co$37);
+    insert(_el$179, createComponent(For, {
       get each() {
-        return steps();
+        return Object.entries(data().extracted);
       },
-      children: (step, i) => [createComponent(Show, {
-        get when() {
-          return i() > 0;
-        },
-        get children() {
-          var _el$81 = getNextElement(_tmpl$26);
-          effect(() => className(_el$81, `w-6 h-px ${step.status === "pending" ? "bg-gray-300 dark:bg-gray-600" : "bg-blue-400"}`));
-          return _el$81;
-        }
-      }), (() => {
-        var _el$82 = getNextElement(_tmpl$27), _el$83 = _el$82.firstChild, [_el$84, _co$14] = getNextMarker(_el$83.nextSibling), _el$85 = _el$84.nextSibling, [_el$86, _co$15] = getNextMarker(_el$85.nextSibling);
-        insert(_el$82, (() => {
-          var _c$4 = memo(() => step.status === "done");
-          return () => _c$4() ? "✓" : step.status === "active" ? "●" : "○";
-        })(), _el$84, _co$14);
-        insert(_el$82, () => step.label, _el$86, _co$15);
-        effect(() => className(_el$82, `flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium ${step.status === "done" ? "text-green-600 dark:text-green-400" : step.status === "active" ? "text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20" : "text-gray-400"}`));
-        return _el$82;
-      })()]
+      children: ([key, value]) => (() => {
+        var _el$192 = getNextElement(_tmpl$51), _el$193 = _el$192.firstChild, _el$195 = _el$193.firstChild, [_el$196, _co$40] = getNextMarker(_el$195.nextSibling);
+        _el$196.nextSibling;
+        var _el$197 = _el$193.nextSibling;
+        insert(_el$193, key, _el$196, _co$40);
+        insert(_el$197, () => String(value));
+        return _el$192;
+      })()
     }));
-    return _el$80;
+    insert(_el$173, createComponent(Show, {
+      get when() {
+        return data().plan;
+      },
+      get children() {
+        var _el$180 = getNextElement(_tmpl$48), _el$181 = _el$180.firstChild, _el$182 = _el$181.nextSibling, _el$183 = _el$182.nextSibling, [_el$184, _co$36] = getNextMarker(_el$183.nextSibling);
+        insert(_el$180, () => data().plan, _el$184, _co$36);
+        return _el$180;
+      }
+    }), _el$189, _co$38);
+    insert(_el$173, createComponent(Show, {
+      get when() {
+        return data().editable;
+      },
+      get children() {
+        var _el$185 = getNextElement(_tmpl$49);
+        _el$185.$$click = () => {
+          var _a;
+          return (_a = props.onAction) == null ? void 0 : _a.call(props, "edit_prompt", data());
+        };
+        runHydrationEvents();
+        return _el$185;
+      }
+    }), _el$191, _co$39);
+    return _el$173;
   })();
 };
-delegateEvents(["click"]);
+delegateEvents(["click", "input"]);
 export {
   ScratchpadPanel
 };