@seed-ship/mcp-ui-solid 3.0.1 → 3.0.3

package/dist/components/ScratchpadPanel.js

@@ -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);
@@ -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 {
@@ -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 (() => {