@seed-ship/mcp-ui-solid 2.12.0 → 2.14.0

package/dist/components/ScratchpadPanel.js

@@ -3,7 +3,7 @@ import { createSignal, createEffect, onCleanup, Show, For, Switch, Match } from
 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(`<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 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$12 = /* @__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$13 = /* @__PURE__ */ template(`<span class="ml-1 font-normal opacity-75">— <!$><!/>`), _tmpl$14 = /* @__PURE__ */ template(`<span><!$><!/> <!$><!/><!$><!/>`), _tmpl$15 = /* @__PURE__ */ template(`<div><span class="flex-shrink-0 mt-0.5"></span><p>`), _tmpl$16 = /* @__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$17 = /* @__PURE__ */ template(`<p class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$18 = /* @__PURE__ */ template(`<div class="mt-2 overflow-x-auto"><table class="min-w-full text-xs"><thead><tr></tr></thead><tbody>`), _tmpl$19 = /* @__PURE__ */ template(`<th class="px-2 py-1 text-left font-medium text-gray-500 dark:text-gray-400">`), _tmpl$20 = /* @__PURE__ */ template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$21 = /* @__PURE__ */ template(`<td class="px-2 py-1 text-gray-700 dark:text-gray-300">`), _tmpl$22 = /* @__PURE__ */ template(`<pre class="text-xs text-gray-500 overflow-auto">`), _tmpl$23 = /* @__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$24 = /* @__PURE__ */ template(`<div class=space-y-1>`), _tmpl$25 = /* @__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$26 = /* @__PURE__ */ template(`<p class="text-xs text-gray-400 italic">No filters`), _tmpl$27 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1.5"><!$><!/><!$><!/>`), _tmpl$28 = /* @__PURE__ */ template(`<button type=button class="ml-0.5 hover:text-blue-900 dark:hover:text-blue-100">&times;`), _tmpl$29 = /* @__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$30 = /* @__PURE__ */ template(`<div class="max-h-48 overflow-y-auto">`), _tmpl$31 = /* @__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$32 = /* @__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$33 = /* @__PURE__ */ template(`<div class=relative><!$><!/><!$><!/>`), _tmpl$34 = /* @__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$35 = /* @__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$36 = /* @__PURE__ */ template(`<span class=ml-1>✓`), _tmpl$37 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/>`), _tmpl$38 = /* @__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$39 = /* @__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$40 = /* @__PURE__ */ template(`<div class=space-y-3><!$><!/><!$><!/>`), _tmpl$41 = /* @__PURE__ */ template(`<span class="text-xs font-normal text-gray-500 dark:text-gray-400">— <!$><!/>`), _tmpl$42 = /* @__PURE__ */ template(`<div class="mt-2 ml-6">`), _tmpl$43 = /* @__PURE__ */ template(`<div><div><span></span><!$><!/><!$><!/></div><!$><!/>`), _tmpl$44 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-2">`), _tmpl$45 = /* @__PURE__ */ template(`<span class=mr-1>`), _tmpl$46 = /* @__PURE__ */ template(`<div class=space-y-2><div class=space-y-1.5></div><!$><!/>`), _tmpl$47 = /* @__PURE__ */ template(`<div class="flex items-center gap-2 text-sm"><span></span><span class="text-gray-900 dark:text-white">`), _tmpl$48 = /* @__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$49 = /* @__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$50 = /* @__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$51 = /* @__PURE__ */ template(`<span>`), _tmpl$52 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400 italic">"<!$><!/>"`), _tmpl$53 = /* @__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$54 = /* @__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$55 = /* @__PURE__ */ template(`<div class=space-y-2><!$><!/><div class=space-y-1></div><!$><!/><!$><!/>`), _tmpl$56 = /* @__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$12 = /* @__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$13 = /* @__PURE__ */ template(`<span class="ml-1 font-normal opacity-75">— <!$><!/>`), _tmpl$14 = /* @__PURE__ */ template(`<span><!$><!/> <!$><!/><!$><!/>`), _tmpl$15 = /* @__PURE__ */ template(`<div><span class="flex-shrink-0 mt-0.5"></span><p>`), _tmpl$16 = /* @__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$17 = /* @__PURE__ */ template(`<p class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$18 = /* @__PURE__ */ template(`<div class="mt-2 overflow-x-auto"><table class="min-w-full text-xs"><thead><tr></tr></thead><tbody>`), _tmpl$19 = /* @__PURE__ */ template(`<th class="px-2 py-1 text-left font-medium text-gray-500 dark:text-gray-400">`), _tmpl$20 = /* @__PURE__ */ template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$21 = /* @__PURE__ */ template(`<td class="px-2 py-1 text-gray-700 dark:text-gray-300">`), _tmpl$22 = /* @__PURE__ */ template(`<pre class="text-xs text-gray-500 overflow-auto">`), _tmpl$23 = /* @__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$24 = /* @__PURE__ */ template(`<div class=space-y-1>`), _tmpl$25 = /* @__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$26 = /* @__PURE__ */ template(`<p class="text-xs text-gray-400 italic">No filters`), _tmpl$27 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1.5"><!$><!/><!$><!/>`), _tmpl$28 = /* @__PURE__ */ template(`<button type=button class="ml-0.5 hover:text-blue-900 dark:hover:text-blue-100">&times;`), _tmpl$29 = /* @__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$30 = /* @__PURE__ */ template(`<div class="max-h-48 overflow-y-auto">`), _tmpl$31 = /* @__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$32 = /* @__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$33 = /* @__PURE__ */ template(`<div class=relative><!$><!/><!$><!/>`), _tmpl$34 = /* @__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$35 = /* @__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$36 = /* @__PURE__ */ template(`<span class=ml-1>✓`), _tmpl$37 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/>`), _tmpl$38 = /* @__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$39 = /* @__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$40 = /* @__PURE__ */ template(`<div class=space-y-3><!$><!/><!$><!/>`), _tmpl$41 = /* @__PURE__ */ template(`<span class="text-xs font-normal text-gray-500 dark:text-gray-400">— <!$><!/>`), _tmpl$42 = /* @__PURE__ */ template(`<div class="mt-2 ml-6">`), _tmpl$43 = /* @__PURE__ */ template(`<div><div><span></span><!$><!/><!$><!/></div><!$><!/>`), _tmpl$44 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-2">`), _tmpl$45 = /* @__PURE__ */ template(`<span class=mr-1>`), _tmpl$46 = /* @__PURE__ */ template(`<div class=space-y-2><div class=space-y-1.5></div><!$><!/>`), _tmpl$47 = /* @__PURE__ */ template(`<div class="flex items-center gap-2 text-sm"><span></span><span class="text-gray-900 dark:text-white">`), _tmpl$48 = /* @__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$49 = /* @__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$50 = /* @__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$51 = /* @__PURE__ */ template(`<span>`), _tmpl$52 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400 italic">"<!$><!/>"`), _tmpl$53 = /* @__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$54 = /* @__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$55 = /* @__PURE__ */ template(`<div class=space-y-2><!$><!/><div class=space-y-1></div><!$><!/><!$><!/>`), _tmpl$56 = /* @__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$57 = /* @__PURE__ */ template(`<div class="flex items-center gap-1 flex-wrap">`), _tmpl$58 = /* @__PURE__ */ template(`<div class=space-y-2>`), _tmpl$59 = /* @__PURE__ */ template(`<span class="ml-1 text-xs text-gray-500 dark:text-gray-400">— <!$><!/>`), _tmpl$60 = /* @__PURE__ */ template(`<span class="ml-1 text-xs text-gray-400">(<!$><!/>ms)`), _tmpl$61 = /* @__PURE__ */ template(`<div><span class=flex-shrink-0></span><div><span></span><!$><!/><!$><!/>`), _tmpl$62 = /* @__PURE__ */ template(`<span class="text-[10px] opacity-75">`), _tmpl$63 = /* @__PURE__ */ template(`<div><span></span><span></span><!$><!/>`), _tmpl$64 = /* @__PURE__ */ template(`<button type=button>&#128260; <!$><!/>`), _tmpl$65 = /* @__PURE__ */ template(`<button type=button class="px-2 py-1 text-xs opacity-70 hover:opacity-100">&#9654; Details`), _tmpl$66 = /* @__PURE__ */ template(`<pre class="mt-2 text-xs opacity-70 overflow-x-auto">`), _tmpl$67 = /* @__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$68 = /* @__PURE__ */ template(`<span class="text-xs font-bold text-blue-600 dark:text-blue-400"><!$><!/> results`), _tmpl$69 = /* @__PURE__ */ template(`<p class="text-[10px] text-gray-400">`), _tmpl$70 = /* @__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$71 = /* @__PURE__ */ template(`<span><!$><!/> <!$><!/>`), _tmpl$72 = /* @__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$73 = /* @__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...",
@@ -11,7 +11,7 @@ const STATUS_BADGES = {
   },
   ready: {
     label: "Ready",
-    class: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
+    class: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
   },
   waiting_human: {
     label: "Your turn",
@@ -33,20 +33,35 @@ const STATUS_BADGES = {
 const ScratchpadPanel = (props) => {
   const [collapsed, setCollapsed] = createSignal(false);
   const [localPreview, setLocalPreview] = createSignal(void 0);
+  const [loadingAction, setLoadingAction] = createSignal(null);
   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;
+  const CLOSE_ALIASES = /* @__PURE__ */ new Set(["done", "close", "dismiss", "validate", "cancel", "sufficient"]);
+  const handleAction = (action, data) => {
+    var _a;
+    if (props.asyncAction && !CLOSE_ALIASES.has(action)) {
+      setLoadingAction(action);
+    }
+    (_a = props.onAction) == null ? void 0 : _a.call(props, action, data);
+    if (CLOSE_ALIASES.has(action) && props.onClose) {
+      props.onClose();
+    }
+  };
   createEffect(() => {
-    if (props.state.status === "complete" && props.autoCloseDelay) {
+    if (props.state.status === "complete" && props.autoCloseDelay && !props.pinned) {
       const timer = setTimeout(() => {
         var _a;
         return (_a = props.onClose) == null ? void 0 : _a.call(props);
       }, props.autoCloseDelay);
       onCleanup(() => clearTimeout(timer));
     }
+    if (props.state.status !== "processing" && loadingAction()) {
+      setLoadingAction(null);
+    }
   });
   createEffect(() => {
     const endpoint = props.state.previewEndpoint;
@@ -165,9 +180,7 @@ const ScratchpadPanel = (props) => {
             get onFilterChange() {
               return props.onFilterChange;
             },
-            get onAction() {
-              return props.onAction;
-            },
+            onAction: handleAction,
             get onSectionEdit() {
               return props.onSectionEdit;
             },
@@ -325,12 +338,9 @@ const ScratchpadPanel = (props) => {
           },
           get children() {
             var _el$39 = getNextElement(_tmpl$1), _el$40 = _el$39.firstChild;
-            _el$40.$$click = () => {
-              var _a;
-              return (_a = props.onAction) == null ? void 0 : _a.call(props, "search", {
-                filters: props.state.filters
-              });
-            };
+            _el$40.$$click = () => handleAction("search", {
+              filters: props.state.filters
+            });
             runHydrationEvents();
             return _el$39;
           }
@@ -487,6 +497,53 @@ const SectionRenderer = (props) => {
               }
             });
           }
+        }), createComponent(Match, {
+          get when() {
+            return props.section.type === "stepper";
+          },
+          get children() {
+            return createComponent(StepperProgressSection, {
+              get content() {
+                return props.section.content;
+              }
+            });
+          }
+        }), createComponent(Match, {
+          get when() {
+            return props.section.type === "error";
+          },
+          get children() {
+            return createComponent(ErrorSectionRenderer, {
+              get content() {
+                return props.section.content;
+              },
+              get onAction() {
+                return props.onAction;
+              }
+            });
+          }
+        }), createComponent(Match, {
+          get when() {
+            return props.section.type === "source_card";
+          },
+          get children() {
+            return createComponent(SourceCardSection, {
+              get content() {
+                return props.section.content;
+              }
+            });
+          }
+        }), createComponent(Match, {
+          get when() {
+            return props.section.type === "diff";
+          },
+          get children() {
+            return createComponent(DiffSection, {
+              get content() {
+                return props.section.content;
+              }
+            });
+          }
         }), createComponent(Match, {
           when: true,
           get children() {
@@ -1107,6 +1164,281 @@ const PromptSection = (props) => {
     return _el$193;
   })();
 };
+const StepperProgressSection = (props) => {
+  const data = () => {
+    const c = props.content;
+    return {
+      steps: (c == null ? void 0 : c.steps) || [],
+      orientation: (c == null ? void 0 : c.orientation) || "horizontal"
+    };
+  };
+  const statusIcon = (status) => {
+    switch (status) {
+      case "done":
+        return "✅";
+      case "active":
+        return "🔄";
+      case "error":
+        return "❌";
+      default:
+        return "⏳";
+    }
+  };
+  const isHorizontal = () => data().orientation === "horizontal";
+  return createComponent(Show, {
+    get when() {
+      return isHorizontal();
+    },
+    get fallback() {
+      return (() => {
+        var _el$219 = getNextElement(_tmpl$58);
+        insert(_el$219, createComponent(For, {
+          get each() {
+            return data().steps;
+          },
+          children: (step) => (() => {
+            var _el$220 = getNextElement(_tmpl$61), _el$221 = _el$220.firstChild, _el$222 = _el$221.nextSibling, _el$223 = _el$222.firstChild, _el$233 = _el$223.nextSibling, [_el$234, _co$48] = getNextMarker(_el$233.nextSibling), _el$235 = _el$234.nextSibling, [_el$236, _co$49] = getNextMarker(_el$235.nextSibling);
+            insert(_el$221, () => statusIcon(step.status));
+            insert(_el$223, () => step.label);
+            insert(_el$222, createComponent(Show, {
+              get when() {
+                return step.summary;
+              },
+              get children() {
+                var _el$224 = getNextElement(_tmpl$59), _el$225 = _el$224.firstChild, _el$226 = _el$225.nextSibling, [_el$227, _co$46] = getNextMarker(_el$226.nextSibling);
+                insert(_el$224, () => step.summary, _el$227, _co$46);
+                return _el$224;
+              }
+            }), _el$234, _co$48);
+            insert(_el$222, createComponent(Show, {
+              get when() {
+                return step.duration_ms;
+              },
+              get children() {
+                var _el$228 = getNextElement(_tmpl$60), _el$229 = _el$228.firstChild, _el$231 = _el$229.nextSibling, [_el$232, _co$47] = getNextMarker(_el$231.nextSibling);
+                _el$232.nextSibling;
+                insert(_el$228, () => step.duration_ms, _el$232, _co$47);
+                return _el$228;
+              }
+            }), _el$236, _co$49);
+            effect(() => className(_el$220, `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$220;
+          })()
+        }));
+        return _el$219;
+      })();
+    },
+    get children() {
+      var _el$218 = getNextElement(_tmpl$57);
+      insert(_el$218, createComponent(For, {
+        get each() {
+          return data().steps;
+        },
+        children: (step, i) => [createComponent(Show, {
+          get when() {
+            return i() > 0;
+          },
+          get children() {
+            return getNextElement(_tmpl$12);
+          }
+        }), (() => {
+          var _el$238 = getNextElement(_tmpl$63), _el$239 = _el$238.firstChild, _el$240 = _el$239.nextSibling, _el$242 = _el$240.nextSibling, [_el$243, _co$50] = getNextMarker(_el$242.nextSibling);
+          insert(_el$239, () => statusIcon(step.status));
+          insert(_el$240, () => step.label);
+          insert(_el$238, createComponent(Show, {
+            get when() {
+              return step.summary;
+            },
+            get children() {
+              var _el$241 = getNextElement(_tmpl$62);
+              insert(_el$241, () => step.summary);
+              return _el$241;
+            }
+          }), _el$243, _co$50);
+          effect(() => className(_el$238, `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" : step.status === "error" ? "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400" : "text-gray-400"}`));
+          return _el$238;
+        })()]
+      }));
+      return _el$218;
+    }
+  });
+};
+const ErrorSectionRenderer = (props) => {
+  const [showDetails, setShowDetails] = createSignal(false);
+  const data = () => {
+    const c = props.content;
+    return {
+      message: (c == null ? void 0 : c.message) || "Error",
+      severity: (c == null ? void 0 : c.severity) || "error",
+      retryAction: c == null ? void 0 : c.retryAction,
+      retryLabel: (c == null ? void 0 : c.retryLabel) || "Retry",
+      details: c == null ? void 0 : c.details,
+      timestamp: c == null ? void 0 : c.timestamp
+    };
+  };
+  const isWarning = () => data().severity === "warning";
+  return (() => {
+    var _el$244 = getNextElement(_tmpl$67), _el$245 = _el$244.firstChild, _el$246 = _el$245.firstChild, _el$247 = _el$246.nextSibling, _el$248 = _el$247.firstChild, _el$249 = _el$248.nextSibling, _el$255 = _el$249.firstChild, [_el$256, _co$52] = getNextMarker(_el$255.nextSibling), _el$257 = _el$256.nextSibling, [_el$258, _co$53] = getNextMarker(_el$257.nextSibling), _el$260 = _el$249.nextSibling, [_el$261, _co$54] = getNextMarker(_el$260.nextSibling);
+    insert(_el$246, () => isWarning() ? "⚠️" : "❌");
+    insert(_el$248, () => data().message);
+    insert(_el$249, createComponent(Show, {
+      get when() {
+        return data().retryAction;
+      },
+      get children() {
+        var _el$250 = getNextElement(_tmpl$64), _el$251 = _el$250.firstChild, _el$252 = _el$251.nextSibling, [_el$253, _co$51] = getNextMarker(_el$252.nextSibling);
+        _el$250.$$click = () => {
+          var _a;
+          return (_a = props.onAction) == null ? void 0 : _a.call(props, data().retryAction);
+        };
+        insert(_el$250, () => data().retryLabel, _el$253, _co$51);
+        effect(() => className(_el$250, `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$250;
+      }
+    }), _el$256, _co$52);
+    insert(_el$249, createComponent(Show, {
+      get when() {
+        return data().details;
+      },
+      get children() {
+        var _el$254 = getNextElement(_tmpl$65);
+        _el$254.$$click = () => setShowDetails(!showDetails());
+        runHydrationEvents();
+        return _el$254;
+      }
+    }), _el$258, _co$53);
+    insert(_el$247, createComponent(Show, {
+      get when() {
+        return memo(() => !!showDetails())() && data().details;
+      },
+      get children() {
+        var _el$259 = getNextElement(_tmpl$66);
+        insert(_el$259, () => data().details);
+        return _el$259;
+      }
+    }), _el$261, _co$54);
+    effect(() => className(_el$244, `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$244;
+  })();
+};
+const SourceCardSection = (props) => {
+  const data = () => {
+    const c = props.content;
+    return {
+      name: (c == null ? void 0 : c.name) || "Source",
+      status: (c == null ? void 0 : c.status) || "available",
+      capabilities: (c == null ? void 0 : c.capabilities) || [],
+      latency_ms: c == null ? void 0 : c.latency_ms,
+      freshness: c == null ? void 0 : c.freshness,
+      row_count: c == null ? void 0 : c.row_count
+    };
+  };
+  const statusIcon = () => ({
+    queried: "✅",
+    available: "📦",
+    error: "❌"
+  })[data().status] || "📦";
+  return (() => {
+    var _el$262 = getNextElement(_tmpl$70), _el$263 = _el$262.firstChild, _el$264 = _el$263.firstChild, _el$266 = _el$264.firstChild, [_el$267, _co$55] = getNextMarker(_el$266.nextSibling), _el$265 = _el$267.nextSibling, _el$268 = _el$265.nextSibling, [_el$269, _co$56] = getNextMarker(_el$268.nextSibling), _el$274 = _el$264.nextSibling, [_el$275, _co$58] = getNextMarker(_el$274.nextSibling), _el$276 = _el$263.nextSibling, _el$278 = _el$276.nextSibling, [_el$279, _co$59] = getNextMarker(_el$278.nextSibling);
+    insert(_el$264, statusIcon, _el$267, _co$55);
+    insert(_el$264, () => data().name, _el$269, _co$56);
+    insert(_el$263, createComponent(Show, {
+      get when() {
+        return data().row_count !== void 0;
+      },
+      get children() {
+        var _el$270 = getNextElement(_tmpl$68), _el$272 = _el$270.firstChild, [_el$273, _co$57] = getNextMarker(_el$272.nextSibling);
+        _el$273.nextSibling;
+        insert(_el$270, () => {
+          var _a;
+          return (_a = data().row_count) == null ? void 0 : _a.toLocaleString();
+        }, _el$273, _co$57);
+        return _el$270;
+      }
+    }), _el$275, _co$58);
+    insert(_el$276, createComponent(For, {
+      get each() {
+        return data().capabilities;
+      },
+      children: (cap) => (() => {
+        var _el$280 = getNextElement(_tmpl$71), _el$282 = _el$280.firstChild, [_el$283, _co$60] = getNextMarker(_el$282.nextSibling), _el$281 = _el$283.nextSibling, _el$284 = _el$281.nextSibling, [_el$285, _co$61] = getNextMarker(_el$284.nextSibling);
+        insert(_el$280, () => cap.supported ? "✅" : "❌", _el$283, _co$60);
+        insert(_el$280, () => cap.label, _el$285, _co$61);
+        effect(() => className(_el$280, `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$280;
+      })()
+    }));
+    insert(_el$262, createComponent(Show, {
+      get when() {
+        return data().freshness || data().latency_ms;
+      },
+      get children() {
+        var _el$277 = getNextElement(_tmpl$69);
+        insert(_el$277, () => [data().freshness, data().latency_ms ? `${data().latency_ms}ms` : ""].filter(Boolean).join(" · "));
+        return _el$277;
+      }
+    }), _el$279, _co$59);
+    return _el$262;
+  })();
+};
+const DiffSection = (props) => {
+  const data = () => {
+    const c = props.content;
+    return {
+      left: (c == null ? void 0 : c.left) || {
+        label: "A",
+        rows: []
+      },
+      right: (c == null ? void 0 : c.right) || {
+        label: "B",
+        rows: []
+      },
+      highlight: (c == null ? void 0 : c.highlight_columns) || []
+    };
+  };
+  const allKeys = () => {
+    const l = data().left.rows[0] || {};
+    const r = data().right.rows[0] || {};
+    return [.../* @__PURE__ */ new Set([...Object.keys(l), ...Object.keys(r)])];
+  };
+  return (() => {
+    var _el$286 = getNextElement(_tmpl$72), _el$287 = _el$286.firstChild, _el$288 = _el$287.firstChild, _el$289 = _el$288.firstChild, _el$290 = _el$289.firstChild, _el$291 = _el$290.nextSibling, _el$292 = _el$291.nextSibling, _el$293 = _el$288.nextSibling;
+    insert(_el$291, () => data().left.label);
+    insert(_el$292, () => data().right.label);
+    insert(_el$293, createComponent(For, {
+      get each() {
+        return allKeys();
+      },
+      children: (key) => {
+        const lVal = () => {
+          var _a;
+          return (_a = data().left.rows[0]) == null ? void 0 : _a[key];
+        };
+        const rVal = () => {
+          var _a;
+          return (_a = data().right.rows[0]) == null ? void 0 : _a[key];
+        };
+        const isDiff = () => String(lVal()) !== String(rVal()) && data().highlight.includes(key);
+        return (() => {
+          var _el$294 = getNextElement(_tmpl$73), _el$295 = _el$294.firstChild, _el$296 = _el$295.nextSibling, _el$297 = _el$296.nextSibling;
+          insert(_el$295, key);
+          insert(_el$296, (() => {
+            var _c$6 = memo(() => lVal() !== void 0);
+            return () => _c$6() ? String(lVal()) : "—";
+          })());
+          insert(_el$297, (() => {
+            var _c$7 = memo(() => rVal() !== void 0);
+            return () => _c$7() ? String(rVal()) : "—";
+          })());
+          effect(() => className(_el$294, `border-t border-gray-100 dark:border-gray-700 ${isDiff() ? "bg-yellow-50 dark:bg-yellow-900/10" : ""}`));
+          return _el$294;
+        })();
+      }
+    }));
+    return _el$286;
+  })();
+};
 delegateEvents(["click", "input"]);
 export {
   ScratchpadPanel