@seed-ship/mcp-ui-solid 3.0.0 → 3.0.2

package/dist/components/ScratchpadPanel.js

@@ -10,8 +10,8 @@ const STATUS_BADGES = {
     class: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
   },
   ready: {
-    label: "Ready",
-    class: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
+    label: "Action available",
+    class: "bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-400"
   },
   waiting_human: {
     label: "Your turn",
@@ -31,6 +31,7 @@ const STATUS_BADGES = {
   }
 };
 const ScratchpadPanel = (props) => {
+  var _a;
   const [collapsed, setCollapsed] = createSignal(false);
   const [localPreview, setLocalPreview] = createSignal(void 0);
   const [loadingAction, setLoadingAction] = createSignal(null);
@@ -48,9 +49,37 @@ const ScratchpadPanel = (props) => {
     setLastEvent(event);
     console.log(`[ScratchpadPanel:${props.state.id}] ${event}`, data || "");
   };
+  const VALID_TRANSITIONS = {
+    loading: ["processing", "waiting_human", "error"],
+    waiting_human: ["processing", "ready", "complete", "error"],
+    processing: ["ready", "complete", "error", "waiting_human"],
+    ready: ["processing", "complete", "error", "waiting_human"],
+    complete: [],
+    error: ["processing", "ready", "waiting_human"]
+  };
+  let prevStatus = props.state.status;
+  console.info(`%c[MCP-UI] Scratchpad created%c id=${props.state.id} sections=${((_a = props.state.sections) == null ? void 0 : _a.length) || 0} status=${props.state.status}${props.pinned ? " pinned=true" : ""}`, "color: #10b981; font-weight: bold", "color: inherit");
+  createEffect(() => {
+    var _a2, _b;
+    const newStatus = props.state.status;
+    if (newStatus !== prevStatus) {
+      console.info(`%c[MCP-UI] Scratchpad status%c ${props.state.id}: ${prevStatus} → ${newStatus}`, "color: #3b82f6; font-weight: bold", "color: inherit");
+      if (!((_a2 = VALID_TRANSITIONS[prevStatus]) == null ? void 0 : _a2.includes(newStatus))) {
+        console.warn(`[MCP-UI] Scratchpad ${props.state.id}: unusual transition ${prevStatus} → ${newStatus}. Expected: ${((_b = VALID_TRANSITIONS[prevStatus]) == null ? void 0 : _b.join(", ")) || "none (terminal)"}`);
+      }
+      prevStatus = newStatus;
+    }
+    if (props.autoCloseDelay && newStatus !== "complete") {
+      console.info(`[MCP-UI] Scratchpad ${props.state.id}: autoCloseDelay=${props.autoCloseDelay}ms but status='${newStatus}' — auto-close will NOT trigger.`);
+    }
+  });
   const CLOSE_ALIASES = /* @__PURE__ */ new Set(["done", "close", "dismiss", "validate", "cancel", "sufficient"]);
   const handleAction = (action, data) => {
-    var _a;
+    var _a2;
+    console.info(`%c[MCP-UI] Action dispatched%c value='${action}' asyncAction=${!!props.asyncAction}`, "color: #f59e0b; font-weight: bold", "color: inherit");
+    if (!props.asyncAction && /^(try_alt:|retry|fetch|load)/.test(action)) {
+      console.warn(`[MCP-UI] ScratchpadPanel: action '${action}' looks async but asyncAction prop is not set. The button will NOT show a loading state.`);
+    }
     debugLog("onAction", {
       action,
       asyncAction: props.asyncAction,
@@ -59,16 +88,16 @@ const ScratchpadPanel = (props) => {
     if (props.asyncAction && !CLOSE_ALIASES.has(action)) {
       setLoadingAction(action);
     }
-    (_a = props.onAction) == null ? void 0 : _a.call(props, action, data);
+    (_a2 = props.onAction) == null ? void 0 : _a2.call(props, action, data);
     if (CLOSE_ALIASES.has(action) && props.onClose) {
       props.onClose();
     }
   };
   createEffect(() => {
-    var _a;
+    var _a2;
     debugLog("state", {
       status: props.state.status,
-      sections: (_a = props.state.sections) == null ? void 0 : _a.length,
+      sections: (_a2 = props.state.sections) == null ? void 0 : _a2.length,
       filters: Object.keys(props.state.filters || {}),
       turn: props.state.turn
     });
@@ -76,8 +105,8 @@ const ScratchpadPanel = (props) => {
   createEffect(() => {
     if (props.state.status === "complete" && props.autoCloseDelay && !props.pinned) {
       const timer = setTimeout(() => {
-        var _a;
-        return (_a = props.onClose) == null ? void 0 : _a.call(props);
+        var _a2;
+        return (_a2 = props.onClose) == null ? void 0 : _a2.call(props);
       }, props.autoCloseDelay);
       onCleanup(() => clearTimeout(timer));
     }
@@ -134,9 +163,9 @@ const ScratchpadPanel = (props) => {
       get children() {
         var _el$1 = getNextElement(_tmpl$2);
         _el$1.$$click = (e) => {
-          var _a;
+          var _a2;
           e.stopPropagation();
-          (_a = props.onClose) == null ? void 0 : _a.call(props);
+          (_a2 = props.onClose) == null ? void 0 : _a2.call(props);
         };
         runHydrationEvents();
         return _el$1;
@@ -295,8 +324,8 @@ const ScratchpadPanel = (props) => {
               get children() {
                 var _el$17 = getNextElement(_tmpl$5), _el$18 = _el$17.firstChild, _el$19 = _el$18.nextSibling, _el$20 = _el$19.nextSibling;
                 _el$20.$$click = () => {
-                  var _a;
-                  return (_a = props.onAction) == null ? void 0 : _a.call(props, "refine_filters");
+                  var _a2;
+                  return (_a2 = props.onAction) == null ? void 0 : _a2.call(props, "refine_filters");
                 };
                 runHydrationEvents();
                 return _el$17;
@@ -329,8 +358,8 @@ const ScratchpadPanel = (props) => {
               get children() {
                 var _el$33 = getNextElement(_tmpl$8);
                 _el$33.$$click = () => {
-                  var _a;
-                  return (_a = props.onRetry) == null ? void 0 : _a.call(props);
+                  var _a2;
+                  return (_a2 = props.onRetry) == null ? void 0 : _a2.call(props);
                 };
                 runHydrationEvents();
                 return _el$33;
@@ -343,8 +372,8 @@ const ScratchpadPanel = (props) => {
               get children() {
                 var _el$34 = getNextElement(_tmpl$9);
                 _el$34.$$click = () => {
-                  var _a;
-                  return (_a = props.onClose) == null ? void 0 : _a.call(props);
+                  var _a2;
+                  return (_a2 = props.onClose) == null ? void 0 : _a2.call(props);
                 };
                 runHydrationEvents();
                 return _el$34;
@@ -379,8 +408,8 @@ const ScratchpadPanel = (props) => {
         insert(_el$52, () => props.state.id, _el$58, _co$10);
         insert(_el$52, eventCount, _el$60, _co$11);
         insert(_el$52, () => {
-          var _a;
-          return ((_a = props.state.sections) == null ? void 0 : _a.length) || 0;
+          var _a2;
+          return ((_a2 = props.state.sections) == null ? void 0 : _a2.length) || 0;
         }, _el$62, _co$12);
         insert(_el$52, () => props.state.status, _el$64, _co$13);
         insert(_el$52, lastEvent, _el$66, _co$14);
@@ -388,7 +417,7 @@ const ScratchpadPanel = (props) => {
       }
     }), _el$70, _co$16);
     effect((_p$) => {
-      var _v$ = `w-full bg-white dark:bg-gray-800 rounded-xl border shadow-lg overflow-visible ${props.state.status === "waiting_human" ? "border-blue-300 dark:border-blue-600" : "border-gray-200 dark:border-gray-700"}`, _v$2 = `flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-700 ${isCollapsible() ? "cursor-pointer select-none hover:bg-gray-50 dark:hover:bg-gray-750" : ""}`, _v$3 = `px-2 py-0.5 text-xs font-medium rounded-full ${badge().class}`;
+      var _v$ = `w-full bg-white dark:bg-gray-800 rounded-xl border shadow-lg overflow-visible ${props.state.status === "waiting_human" ? "border-blue-300 dark:border-blue-600" : "border-gray-200 dark:border-gray-700"} ${props.pinned ? "sticky top-0 z-40" : ""}`, _v$2 = `flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-700 ${isCollapsible() ? "cursor-pointer select-none hover:bg-gray-50 dark:hover:bg-gray-750" : ""}`, _v$3 = `px-2 py-0.5 text-xs font-medium rounded-full ${badge().class}`;
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
       _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
       _v$3 !== _p$.a && className(_el$0, _p$.a = _v$3);
@@ -844,6 +873,7 @@ const EmbeddedFormSection = (props) => {
       const field = config().fields.find((f) => f.name === key);
       return (field == null ? void 0 : field.fieldStatus) !== "unsupported";
     }).filter(([, v]) => v !== void 0 && v !== "" && !(Array.isArray(v) && v.length === 0)));
+    console.info(`%c[MCP-UI] Form submitted%c section=${props.sectionId} fields=${Object.keys(values).join(",")}`, "color: #8b5cf6; font-weight: bold", "color: inherit");
     if (props.onSubmit) {
       props.onSubmit(props.sectionId, values);
     } else {
@@ -928,7 +958,7 @@ const EnrichedStepsSection = (props) => {
           }
         }), _el$177, _co$39);
         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"}`;
+          var _v$4 = `rounded-lg ${step.status === "active" ? "bg-blue-50/50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800 p-3 animate-pulse" : "px-1"}`, _v$5 = `flex items-center gap-2 text-sm font-medium ${step.status === "done" ? "text-green-600 dark:text-green-400" : step.status === "active" ? "text-blue-600 dark:text-blue-400" : "text-gray-400"}`;
           _v$4 !== _p$.e && className(_el$164, _p$.e = _v$4);
           _v$5 !== _p$.t && className(_el$165, _p$.t = _v$5);
           return _p$;
@@ -1293,7 +1323,7 @@ const StepperProgressSection = (props) => {
               return _el$258;
             }
           }), _el$260, _co$56);
-          effect(() => className(_el$255, `flex items-center gap-1 px-2 py-1 rounded text-xs ${step.status === "done" ? "bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400" : step.status === "active" ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 font-medium" : step.status === "error" ? "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400" : "text-gray-400"}`));
+          effect(() => className(_el$255, `flex items-center gap-1 px-2 py-1 rounded text-xs ${step.status === "done" ? "bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400" : step.status === "active" ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 font-medium animate-pulse" : step.status === "error" ? "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400" : "text-gray-400"}`));
           return _el$255;
         })()]
       }));
@@ -1305,7 +1335,7 @@ const ErrorSectionRenderer = (props) => {
   const [showDetails, setShowDetails] = createSignal(false);
   const data = () => {
     const c = props.content;
-    return {
+    const d = {
       message: (c == null ? void 0 : c.message) || "Error",
       severity: (c == null ? void 0 : c.severity) || "error",
       retryAction: c == null ? void 0 : c.retryAction,
@@ -1313,6 +1343,8 @@ const ErrorSectionRenderer = (props) => {
       details: c == null ? void 0 : c.details,
       timestamp: c == null ? void 0 : c.timestamp
     };
+    console.info(`%c[MCP-UI] Error section rendered%c severity=${d.severity} retry=${!!d.retryAction}`, "color: #ef4444; font-weight: bold", "color: inherit");
+    return d;
   };
   const isWarning = () => data().severity === "warning";
   return (() => {