@seed-ship/mcp-ui-solid 2.7.0 → 2.8.1

package/README.md

@@ -5,16 +5,15 @@ SolidJS components + chat toolkit for MCP-generated UI. Part of the [MCP UI ecos
 [![npm version](https://img.shields.io/npm/v/@seed-ship/mcp-ui-solid.svg)](https://www.npmjs.com/package/@seed-ship/mcp-ui-solid)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-## What's New in v2.6.0
-
-- **Multi-select fields** - `{ type: 'select', multiple: true }` with dropdown checkboxes + removable chips
-- **Autocomplete fields** - Debounced API fetch for large datasets (communes 35K+, SIRENE, addresses)
-- **ChatPrompt form refactor** - All 10 field types now available in ChatPrompt (was 4)
-- **ChatPrompt dismissLabel** - "Send as-is" button replaces X icon for better UX
-- **Chat Bus** (`@experimental`) - Bidirectional event/command bus for agent interactions (15 events, 10 commands)
-- **ChatPrompt** (`@experimental`) - Structured interactions above chat input (choice, confirm, form)
+## What's New in v2.8.0
+
+- **ScratchpadPanel** (`@experimental`) - HITL/AITL shared workspace: agent fills sections, human edits filters and validates. Sections: data, filter (chips), preview (live stats), message, action, steps
+- **Dependent fields** (`dependsOn`) - Child field fetches options from API when parent changes (e.g. department → commune)
+- **Live preview** - Form shows real-time stats as user fills fields (debounced POST to preview endpoint)
+- **Multi-select + Autocomplete** - Dropdown checkboxes with chips, API fetch for large datasets (35K+ communes)
+- **Chat Bus** (`@experimental`) - Bidirectional event/command bus for agent interactions (16 events, 10 commands)
+- **ChatPrompt** (`@experimental`) - Structured interactions above chat input (choice, confirm, form, dismissLabel)
 - **19 component renderers** - chart, table, metric, text, code, map, form, modal, image-gallery, video, iframe, image, link, action, action-group, grid, carousel, artifact, footer
-- **Tiered iframe sandbox** - Trusted domains get `allow-same-origin`; untrusted get restrictive sandbox
 
 ## Installation
 
@@ -283,6 +282,57 @@ Three subtypes for common agent interaction patterns:
 // → response.value = { commune: "34172" }
 ```
 
+## ScratchpadPanel — HITL/AITL Shared Workspace (`@experimental`)
+
+A shared workspace where agent and human collaborate in real-time. The agent fills sections (data, filters, preview), the human can edit filters and validate. Works for both HITL (human supervises agent) and AITL (agent supervises human/other agent).
+
+```tsx
+import { ScratchpadPanel } from '@seed-ship/mcp-ui-solid'
+import type { ScratchpadState } from '@seed-ship/mcp-ui-solid'
+
+function WorkspaceView() {
+  const [state, setState] = createSignal<ScratchpadState>(/* from SSE */)
+
+  // Listen for scratchpad SSE events
+  bus.events.on('onScratchpad', (event) => {
+    if (event.scratchpad.action === 'create') setState(event.scratchpad)
+    if (event.scratchpad.action === 'update') setState(prev => ({ ...prev, ...event.scratchpad }))
+  })
+
+  return (
+    <ScratchpadPanel
+      state={state()}
+      onFilterChange={(filters) => {
+        // Send updated filters to agent
+        fetch('/api/chat-stream/scratchpad-update', {
+          method: 'POST',
+          body: JSON.stringify({ id: state().id, filters })
+        })
+      }}
+      onAction={(action) => {
+        if (action === 'validate') bus.commands.exec('sendPrompt', 'Valider et synthetiser')
+      }}
+    />
+  )
+}
+```
+
+### Section Types
+
+| Type | Renders | Editable | Use case |
+|------|---------|:--------:|----------|
+| `data` | Key-value pairs | No | Dataset info, column list |
+| `filter` | Editable chips + remove | Yes | Active filters (dept, year) |
+| `preview` | Count badge + summary + mini-table | No | Live result count |
+| `message` | Agent bubble (info/question/warning) | No | Agent explanations |
+| `action` | Buttons (primary/danger/default) | No | Validate, refine, change |
+| `steps` | Stepper (done/active/pending) | No | Pipeline progress |
+| `form` | Embedded form | Yes | Configuration |
+
+### Status Badges
+
+`loading` → `ready` → `waiting_human` (pulsing) → `processing` → `complete`
+
 ## Component Renderers (19 types)
 
 | Type | Renderer | Features |
@@ -359,7 +409,7 @@ export default defineConfig({
 // Components
 import {
   UIResourceRenderer, StreamingUIRenderer, GenerativeUIErrorBoundary,
-  ExpandableWrapper, ComponentToolbar, ChatPrompt,
+  ExpandableWrapper, ComponentToolbar, ChatPrompt, ScratchpadPanel,
 } from '@seed-ship/mcp-ui-solid'
 
 // Chat Bus
@@ -380,6 +430,7 @@ import type {
   ChatBus, ChatEvents, ChatCommands,
   ChatPromptConfig, ChatPromptResponse,
   AgentContext, BriefingEvent,
+  ScratchpadState, ScratchpadSection, ScratchpadEvent,
   UIComponent, UILayout, ComponentType,
 } from '@seed-ship/mcp-ui-solid'
 ```

package/dist/components/ScratchpadPanel.cjs

@@ -0,0 +1,339 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const web = require("solid-js/web");
+const solidJs = require("solid-js");
+var _tmpl$ = /* @__PURE__ */ web.template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700 space-y-2">`), _tmpl$2 = /* @__PURE__ */ web.template(`<div class="mt-2 overflow-x-auto"><table class="min-w-full text-xs"><thead><tr></tr></thead><tbody>`), _tmpl$3 = /* @__PURE__ */ web.template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700"><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"></span></div><p class="text-sm text-gray-700 dark:text-gray-300"></p><!$><!/>`), _tmpl$4 = /* @__PURE__ */ web.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"><div class="flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-700"><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><span></span></div><div class="divide-y divide-gray-100 dark:divide-gray-700"></div><!$><!/><!$><!/>`), _tmpl$5 = /* @__PURE__ */ web.template(`<div><span class="flex-shrink-0 mt-0.5"></span><p>`), _tmpl$6 = /* @__PURE__ */ web.template(`<th class="px-2 py-1 text-left font-medium text-gray-500 dark:text-gray-400">`), _tmpl$7 = /* @__PURE__ */ web.template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$8 = /* @__PURE__ */ web.template(`<td class="px-2 py-1 text-gray-700 dark:text-gray-300">`), _tmpl$9 = /* @__PURE__ */ web.template(`<span class="text-[10px] text-blue-500 dark:text-blue-400">(editable)`), _tmpl$0 = /* @__PURE__ */ web.template(`<p class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$1 = /* @__PURE__ */ web.template(`<pre class="text-xs text-gray-500 dark:text-gray-400 overflow-auto">`), _tmpl$10 = /* @__PURE__ */ web.template(`<div class="px-4 py-3"><div class="flex items-center gap-2 mb-2"><h4 class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide"></h4><!$><!/></div><!$><!/>`), _tmpl$11 = /* @__PURE__ */ web.template(`<div class=space-y-1>`), _tmpl$12 = /* @__PURE__ */ web.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$13 = /* @__PURE__ */ web.template(`<div class="flex flex-wrap gap-1.5">`), _tmpl$14 = /* @__PURE__ */ web.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><!$><!/><button type=button class="ml-0.5 hover:text-blue-900 dark:hover:text-blue-100">&times;`), _tmpl$15 = /* @__PURE__ */ web.template(`<div class="flex flex-wrap gap-2">`), _tmpl$16 = /* @__PURE__ */ web.template(`<button type=button>`), _tmpl$17 = /* @__PURE__ */ web.template(`<div class="flex items-center gap-1">`), _tmpl$18 = /* @__PURE__ */ web.template(`<div>`), _tmpl$19 = /* @__PURE__ */ web.template(`<div><!$><!/><!$><!/>`);
+const STATUS_BADGES = {
+  loading: {
+    label: "Loading...",
+    class: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
+  },
+  ready: {
+    label: "Ready",
+    class: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
+  },
+  waiting_human: {
+    label: "Your turn",
+    class: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 animate-pulse"
+  },
+  processing: {
+    label: "Processing...",
+    class: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400"
+  },
+  complete: {
+    label: "Complete",
+    class: "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
+  }
+};
+const ScratchpadPanel = (props) => {
+  const badge = () => STATUS_BADGES[props.state.status] || STATUS_BADGES.loading;
+  return (() => {
+    var _el$ = web.getNextElement(_tmpl$4), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$3.nextSibling, _el$7 = _el$2.nextSibling, _el$19 = _el$7.nextSibling, [_el$20, _co$2] = web.getNextMarker(_el$19.nextSibling), _el$21 = _el$20.nextSibling, [_el$22, _co$3] = web.getNextMarker(_el$21.nextSibling);
+    web.insert(_el$5, () => props.state.title);
+    web.insert(_el$6, () => badge().label);
+    web.insert(_el$7, web.createComponent(solidJs.For, {
+      get each() {
+        return props.state.sections;
+      },
+      children: (section) => web.createComponent(SectionRenderer, {
+        section,
+        get filters() {
+          return props.state.filters;
+        },
+        get onFilterChange() {
+          return props.onFilterChange;
+        },
+        get onAction() {
+          return props.onAction;
+        },
+        get onSectionEdit() {
+          return props.onSectionEdit;
+        }
+      })
+    }));
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return props.state.agentMessages.length > 0;
+      },
+      get children() {
+        var _el$8 = web.getNextElement(_tmpl$);
+        web.insert(_el$8, web.createComponent(solidJs.For, {
+          get each() {
+            return props.state.agentMessages;
+          },
+          children: (msg) => (() => {
+            var _el$23 = web.getNextElement(_tmpl$5), _el$24 = _el$23.firstChild, _el$25 = _el$24.nextSibling;
+            web.insert(_el$24, (() => {
+              var _c$ = web.memo(() => msg.type === "warning");
+              return () => _c$() ? "⚠️" : msg.type === "question" ? "💬" : "ℹ️";
+            })());
+            web.insert(_el$25, () => msg.text);
+            web.effect(() => web.className(_el$23, `flex items-start gap-2 text-sm ${msg.type === "warning" ? "text-amber-600 dark:text-amber-400" : msg.type === "question" ? "text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-400"}`));
+            return _el$23;
+          })()
+        }));
+        return _el$8;
+      }
+    }), _el$20, _co$2);
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return props.state.preview;
+      },
+      get children() {
+        var _el$9 = web.getNextElement(_tmpl$3), _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling, _el$11 = _el$0.nextSibling, _el$17 = _el$11.nextSibling, [_el$18, _co$] = web.getNextMarker(_el$17.nextSibling);
+        web.insert(_el$10, () => props.state.preview.count.toLocaleString());
+        web.insert(_el$11, () => props.state.preview.summary);
+        web.insert(_el$9, web.createComponent(solidJs.Show, {
+          get when() {
+            return web.memo(() => !!props.state.preview.rows)() && props.state.preview.rows.length > 0;
+          },
+          get children() {
+            var _el$12 = web.getNextElement(_tmpl$2), _el$13 = _el$12.firstChild, _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$14.nextSibling;
+            web.insert(_el$15, web.createComponent(solidJs.For, {
+              get each() {
+                return Object.keys(props.state.preview.rows[0]);
+              },
+              children: (key) => (() => {
+                var _el$26 = web.getNextElement(_tmpl$6);
+                web.insert(_el$26, key);
+                return _el$26;
+              })()
+            }));
+            web.insert(_el$16, web.createComponent(solidJs.For, {
+              get each() {
+                return props.state.preview.rows.slice(0, 5);
+              },
+              children: (row) => (() => {
+                var _el$27 = web.getNextElement(_tmpl$7);
+                web.insert(_el$27, web.createComponent(solidJs.For, {
+                  get each() {
+                    return Object.values(row);
+                  },
+                  children: (val) => (() => {
+                    var _el$28 = web.getNextElement(_tmpl$8);
+                    web.insert(_el$28, () => String(val));
+                    return _el$28;
+                  })()
+                }));
+                return _el$27;
+              })()
+            }));
+            return _el$12;
+          }
+        }), _el$18, _co$);
+        return _el$9;
+      }
+    }), _el$22, _co$3);
+    web.effect(() => web.className(_el$6, `px-2 py-0.5 text-xs font-medium rounded-full ${badge().class}`));
+    return _el$;
+  })();
+};
+const SectionRenderer = (props) => {
+  return (() => {
+    var _el$29 = web.getNextElement(_tmpl$10), _el$30 = _el$29.firstChild, _el$31 = _el$30.firstChild, _el$33 = _el$31.nextSibling, [_el$34, _co$4] = web.getNextMarker(_el$33.nextSibling), _el$37 = _el$30.nextSibling, [_el$38, _co$5] = web.getNextMarker(_el$37.nextSibling);
+    web.insert(_el$31, () => props.section.title);
+    web.insert(_el$30, web.createComponent(solidJs.Show, {
+      get when() {
+        return props.section.editable;
+      },
+      get children() {
+        return web.getNextElement(_tmpl$9);
+      }
+    }), _el$34, _co$4);
+    web.insert(_el$29, web.createComponent(solidJs.Switch, {
+      get children() {
+        return [web.createComponent(solidJs.Match, {
+          get when() {
+            return props.section.type === "data";
+          },
+          get children() {
+            return web.createComponent(DataSection, {
+              get content() {
+                return props.section.content;
+              }
+            });
+          }
+        }), web.createComponent(solidJs.Match, {
+          get when() {
+            return props.section.type === "filter";
+          },
+          get children() {
+            return web.createComponent(FilterSection, {
+              get filters() {
+                return props.filters;
+              },
+              get onFilterChange() {
+                return props.onFilterChange;
+              }
+            });
+          }
+        }), web.createComponent(solidJs.Match, {
+          get when() {
+            return props.section.type === "message";
+          },
+          get children() {
+            var _el$35 = web.getNextElement(_tmpl$0);
+            web.insert(_el$35, () => String(props.section.content));
+            return _el$35;
+          }
+        }), web.createComponent(solidJs.Match, {
+          get when() {
+            return props.section.type === "action";
+          },
+          get children() {
+            return web.createComponent(ActionSection, {
+              get content() {
+                return props.section.content;
+              },
+              get onAction() {
+                return props.onAction;
+              }
+            });
+          }
+        }), web.createComponent(solidJs.Match, {
+          get when() {
+            return props.section.type === "steps";
+          },
+          get children() {
+            return web.createComponent(StepsSection, {
+              get content() {
+                return props.section.content;
+              }
+            });
+          }
+        }), web.createComponent(solidJs.Match, {
+          when: true,
+          get children() {
+            var _el$36 = web.getNextElement(_tmpl$1);
+            web.insert(_el$36, () => JSON.stringify(props.section.content, null, 2));
+            return _el$36;
+          }
+        })];
+      }
+    }), _el$38, _co$5);
+    return _el$29;
+  })();
+};
+const DataSection = (props) => {
+  const entries = () => {
+    if (typeof props.content !== "object" || !props.content) return [];
+    return Object.entries(props.content);
+  };
+  return (() => {
+    var _el$39 = web.getNextElement(_tmpl$11);
+    web.insert(_el$39, web.createComponent(solidJs.For, {
+      get each() {
+        return entries();
+      },
+      children: ([key, value]) => (() => {
+        var _el$40 = web.getNextElement(_tmpl$12), _el$41 = _el$40.firstChild, _el$43 = _el$41.firstChild, [_el$44, _co$6] = web.getNextMarker(_el$43.nextSibling);
+        _el$44.nextSibling;
+        var _el$45 = _el$41.nextSibling;
+        web.insert(_el$41, key, _el$44, _co$6);
+        web.insert(_el$45, (() => {
+          var _c$2 = web.memo(() => !!Array.isArray(value));
+          return () => _c$2() ? value.join(", ") : String(value);
+        })());
+        return _el$40;
+      })()
+    }));
+    return _el$39;
+  })();
+};
+const FilterSection = (props) => {
+  const removeFilter = (key) => {
+    var _a;
+    const next = {
+      ...props.filters
+    };
+    delete next[key];
+    (_a = props.onFilterChange) == null ? void 0 : _a.call(props, next);
+  };
+  const entries = () => Object.entries(props.filters);
+  return (() => {
+    var _el$46 = web.getNextElement(_tmpl$13);
+    web.insert(_el$46, web.createComponent(solidJs.For, {
+      get each() {
+        return entries();
+      },
+      children: ([key, value]) => (() => {
+        var _el$47 = web.getNextElement(_tmpl$14), _el$48 = _el$47.firstChild, _el$50 = _el$48.firstChild, [_el$51, _co$7] = web.getNextMarker(_el$50.nextSibling);
+        _el$51.nextSibling;
+        var _el$53 = _el$48.nextSibling, [_el$54, _co$8] = web.getNextMarker(_el$53.nextSibling), _el$52 = _el$54.nextSibling;
+        web.insert(_el$48, key, _el$51, _co$7);
+        web.insert(_el$47, (() => {
+          var _c$3 = web.memo(() => !!Array.isArray(value));
+          return () => _c$3() ? value.join(", ") : String(value);
+        })(), _el$54, _co$8);
+        _el$52.$$click = () => removeFilter(key);
+        web.setAttribute(_el$52, "aria-label", `Remove filter ${key}`);
+        web.runHydrationEvents();
+        return _el$47;
+      })()
+    }));
+    return _el$46;
+  })();
+};
+const ActionSection = (props) => {
+  const actions = () => {
+    if (Array.isArray(props.content)) return props.content;
+    return [];
+  };
+  return (() => {
+    var _el$55 = web.getNextElement(_tmpl$15);
+    web.insert(_el$55, web.createComponent(solidJs.For, {
+      get each() {
+        return actions();
+      },
+      children: (item) => (() => {
+        var _el$56 = web.getNextElement(_tmpl$16);
+        _el$56.$$click = () => {
+          var _a;
+          return (_a = props.onAction) == null ? void 0 : _a.call(props, item.action);
+        };
+        web.insert(_el$56, () => item.label);
+        web.effect(() => web.className(_el$56, `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"}`));
+        web.runHydrationEvents();
+        return _el$56;
+      })()
+    }));
+    return _el$55;
+  })();
+};
+const StepsSection = (props) => {
+  const steps = () => {
+    if (Array.isArray(props.content)) return props.content;
+    return [];
+  };
+  return (() => {
+    var _el$57 = web.getNextElement(_tmpl$17);
+    web.insert(_el$57, web.createComponent(solidJs.For, {
+      get each() {
+        return steps();
+      },
+      children: (step, i) => [web.createComponent(solidJs.Show, {
+        get when() {
+          return i() > 0;
+        },
+        get children() {
+          var _el$58 = web.getNextElement(_tmpl$18);
+          web.effect(() => web.className(_el$58, `w-6 h-px ${step.status === "pending" ? "bg-gray-300 dark:bg-gray-600" : "bg-blue-400"}`));
+          return _el$58;
+        }
+      }), (() => {
+        var _el$59 = web.getNextElement(_tmpl$19), _el$60 = _el$59.firstChild, [_el$61, _co$9] = web.getNextMarker(_el$60.nextSibling), _el$62 = _el$61.nextSibling, [_el$63, _co$0] = web.getNextMarker(_el$62.nextSibling);
+        web.insert(_el$59, (() => {
+          var _c$4 = web.memo(() => step.status === "done");
+          return () => _c$4() ? "✓" : step.status === "active" ? "●" : "○";
+        })(), _el$61, _co$9);
+        web.insert(_el$59, () => step.label, _el$63, _co$0);
+        web.effect(() => web.className(_el$59, `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$59;
+      })()]
+    }));
+    return _el$57;
+  })();
+};
+web.delegateEvents(["click"]);
+exports.ScratchpadPanel = ScratchpadPanel;
+//# sourceMappingURL=ScratchpadPanel.cjs.map

package/dist/components/ScratchpadPanel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScratchpadPanel.cjs","sources":["../../src/components/ScratchpadPanel.tsx"],"sourcesContent":["/**\n * ScratchpadPanel — HITL shared workspace between agent and human\n * v2.7.0: Renders scratchpad sections, editable filters, preview, agent messages\n *\n * @experimental — This component may change without major bump until v2.5.0 stabilization.\n */\n\nimport { Component, Show, For, Switch, Match, createSignal } from 'solid-js'\nimport type { ScratchpadState, ScratchpadSection } from '../types/chat-bus'\n\nexport interface ScratchpadPanelProps {\n  state: ScratchpadState\n  /** Called when human modifies filters */\n  onFilterChange?: (filters: Record<string, string | string[]>) => void\n  /** Called when human clicks an action button */\n  onAction?: (action: string, data?: unknown) => void\n  /** Called when human edits a section */\n  onSectionEdit?: (sectionId: string, content: unknown) => void\n}\n\nconst STATUS_BADGES: Record<ScratchpadState['status'], { label: string; class: string }> = {\n  loading: { label: 'Loading...', class: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' },\n  ready: { label: 'Ready', class: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' },\n  waiting_human: { label: 'Your turn', class: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 animate-pulse' },\n  processing: { label: 'Processing...', class: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400' },\n  complete: { label: 'Complete', class: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400' },\n}\n\n/**\n * @experimental\n */\nexport const ScratchpadPanel: Component<ScratchpadPanelProps> = (props) => {\n  const badge = () => STATUS_BADGES[props.state.status] || STATUS_BADGES.loading\n\n  return (\n    <div class=\"w-full bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-lg overflow-visible\">\n      {/* Header */}\n      <div class=\"flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-700\">\n        <div class=\"flex items-center gap-2\">\n          <span class=\"text-base\">&#128221;</span>\n          <h3 class=\"text-sm font-semibold text-gray-900 dark:text-white\">{props.state.title}</h3>\n        </div>\n        <span class={`px-2 py-0.5 text-xs font-medium rounded-full ${badge().class}`}>\n          {badge().label}\n        </span>\n      </div>\n\n      {/* Sections */}\n      <div class=\"divide-y divide-gray-100 dark:divide-gray-700\">\n        <For each={props.state.sections}>\n          {(section) => (\n            <SectionRenderer\n              section={section}\n              filters={props.state.filters}\n              onFilterChange={props.onFilterChange}\n              onAction={props.onAction}\n              onSectionEdit={props.onSectionEdit}\n            />\n          )}\n        </For>\n      </div>\n\n      {/* Agent messages */}\n      <Show when={props.state.agentMessages.length > 0}>\n        <div class=\"px-4 py-3 border-t border-gray-100 dark:border-gray-700 space-y-2\">\n          <For each={props.state.agentMessages}>\n            {(msg) => (\n              <div class={`flex items-start gap-2 text-sm ${\n                msg.type === 'warning' ? 'text-amber-600 dark:text-amber-400'\n                : msg.type === 'question' ? 'text-blue-600 dark:text-blue-400'\n                : 'text-gray-600 dark:text-gray-400'\n              }`}>\n                <span class=\"flex-shrink-0 mt-0.5\">\n                  {msg.type === 'warning' ? '⚠️' : msg.type === 'question' ? '💬' : 'ℹ️'}\n                </span>\n                <p>{msg.text}</p>\n              </div>\n            )}\n          </For>\n        </div>\n      </Show>\n\n      {/* Preview */}\n      <Show when={props.state.preview}>\n        <div class=\"px-4 py-3 border-t border-gray-100 dark:border-gray-700\">\n          <div class=\"flex items-center gap-2 mb-2\">\n            <span class=\"text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide\">Preview</span>\n            <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\">\n              {props.state.preview!.count.toLocaleString()}\n            </span>\n          </div>\n          <p class=\"text-sm text-gray-700 dark:text-gray-300\">{props.state.preview!.summary}</p>\n          <Show when={props.state.preview!.rows && props.state.preview!.rows!.length > 0}>\n            <div class=\"mt-2 overflow-x-auto\">\n              <table class=\"min-w-full text-xs\">\n                <thead>\n                  <tr>\n                    <For each={Object.keys(props.state.preview!.rows![0])}>\n                      {(key) => <th class=\"px-2 py-1 text-left font-medium text-gray-500 dark:text-gray-400\">{key}</th>}\n                    </For>\n                  </tr>\n                </thead>\n                <tbody>\n                  <For each={props.state.preview!.rows!.slice(0, 5)}>\n                    {(row) => (\n                      <tr class=\"border-t border-gray-100 dark:border-gray-700\">\n                        <For each={Object.values(row)}>\n                          {(val) => <td class=\"px-2 py-1 text-gray-700 dark:text-gray-300\">{String(val)}</td>}\n                        </For>\n                      </tr>\n                    )}\n                  </For>\n                </tbody>\n              </table>\n            </div>\n          </Show>\n        </div>\n      </Show>\n    </div>\n  )\n}\n\n// ─── Section Renderer ────────────────────────────────────────\n\nconst SectionRenderer: Component<{\n  section: ScratchpadSection\n  filters: Record<string, string | string[]>\n  onFilterChange?: (filters: Record<string, string | string[]>) => void\n  onAction?: (action: string, data?: unknown) => void\n  onSectionEdit?: (sectionId: string, content: unknown) => void\n}> = (props) => {\n  return (\n    <div class=\"px-4 py-3\">\n      <div class=\"flex items-center gap-2 mb-2\">\n        <h4 class=\"text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide\">{props.section.title}</h4>\n        <Show when={props.section.editable}>\n          <span class=\"text-[10px] text-blue-500 dark:text-blue-400\">(editable)</span>\n        </Show>\n      </div>\n\n      <Switch>\n        {/* Data section — key-value or compact table */}\n        <Match when={props.section.type === 'data'}>\n          <DataSection content={props.section.content} />\n        </Match>\n\n        {/* Filter section — editable chips */}\n        <Match when={props.section.type === 'filter'}>\n          <FilterSection\n            filters={props.filters}\n            onFilterChange={props.onFilterChange}\n          />\n        </Match>\n\n        {/* Message section */}\n        <Match when={props.section.type === 'message'}>\n          <p class=\"text-sm text-gray-700 dark:text-gray-300\">{String(props.section.content)}</p>\n        </Match>\n\n        {/* Action section — buttons */}\n        <Match when={props.section.type === 'action'}>\n          <ActionSection content={props.section.content} onAction={props.onAction} />\n        </Match>\n\n        {/* Steps section */}\n        <Match when={props.section.type === 'steps'}>\n          <StepsSection content={props.section.content} />\n        </Match>\n\n        {/* Fallback */}\n        <Match when={true}>\n          <pre class=\"text-xs text-gray-500 dark:text-gray-400 overflow-auto\">\n            {JSON.stringify(props.section.content, null, 2)}\n          </pre>\n        </Match>\n      </Switch>\n    </div>\n  )\n}\n\n// ─── Sub-components ──────────────────────────────────────────\n\nconst DataSection: Component<{ content: unknown }> = (props) => {\n  const entries = () => {\n    if (typeof props.content !== 'object' || !props.content) return []\n    return Object.entries(props.content as Record<string, unknown>)\n  }\n\n  return (\n    <div class=\"space-y-1\">\n      <For each={entries()}>\n        {([key, value]) => (\n          <div class=\"flex gap-2 text-sm\">\n            <span class=\"text-gray-500 dark:text-gray-400 font-mono text-xs min-w-[120px]\">{key}:</span>\n            <span class=\"text-gray-900 dark:text-white text-xs\">\n              {Array.isArray(value) ? value.join(', ') : String(value)}\n            </span>\n          </div>\n        )}\n      </For>\n    </div>\n  )\n}\n\nconst FilterSection: Component<{\n  filters: Record<string, string | string[]>\n  onFilterChange?: (filters: Record<string, string | string[]>) => void\n}> = (props) => {\n  const removeFilter = (key: string) => {\n    const next = { ...props.filters }\n    delete next[key]\n    props.onFilterChange?.(next)\n  }\n\n  const entries = () => Object.entries(props.filters)\n\n  return (\n    <div class=\"flex flex-wrap gap-1.5\">\n      <For each={entries()}>\n        {([key, value]) => (\n          <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\">\n            <span class=\"text-blue-500 dark:text-blue-400\">{key}:</span>\n            {Array.isArray(value) ? value.join(', ') : String(value)}\n            <button\n              type=\"button\"\n              onClick={() => removeFilter(key)}\n              class=\"ml-0.5 hover:text-blue-900 dark:hover:text-blue-100\"\n              aria-label={`Remove filter ${key}`}\n            >\n              &times;\n            </button>\n          </span>\n        )}\n      </For>\n    </div>\n  )\n}\n\nconst ActionSection: Component<{\n  content: unknown\n  onAction?: (action: string, data?: unknown) => void\n}> = (props) => {\n  const actions = () => {\n    if (Array.isArray(props.content)) return props.content as Array<{ label: string; action: string; variant?: string }>\n    return []\n  }\n\n  return (\n    <div class=\"flex flex-wrap gap-2\">\n      <For each={actions()}>\n        {(item) => (\n          <button\n            type=\"button\"\n            onClick={() => props.onAction?.(item.action)}\n            class={`px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${\n              item.variant === 'primary'\n                ? 'bg-blue-600 text-white hover:bg-blue-700'\n                : item.variant === 'danger'\n                ? 'bg-red-600 text-white hover:bg-red-700'\n                : 'border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'\n            }`}\n          >\n            {item.label}\n          </button>\n        )}\n      </For>\n    </div>\n  )\n}\n\nconst StepsSection: Component<{ content: unknown }> = (props) => {\n  const steps = () => {\n    if (Array.isArray(props.content)) return props.content as Array<{ label: string; status: 'done' | 'active' | 'pending' }>\n    return []\n  }\n\n  return (\n    <div class=\"flex items-center gap-1\">\n      <For each={steps()}>\n        {(step, i) => (\n          <>\n            <Show when={i() > 0}>\n              <div class={`w-6 h-px ${step.status === 'pending' ? 'bg-gray-300 dark:bg-gray-600' : 'bg-blue-400'}`} />\n            </Show>\n            <div class={`flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium ${\n              step.status === 'done' ? 'text-green-600 dark:text-green-400'\n              : step.status === 'active' ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20'\n              : 'text-gray-400'\n            }`}>\n              {step.status === 'done' ? '✓' : step.status === 'active' ? '●' : '○'}\n              {step.label}\n            </div>\n          </>\n        )}\n      </For>\n    </div>\n  )\n}\n"],"names":["STATUS_BADGES","loading","label","class","ready","waiting_human","processing","complete","ScratchpadPanel","props","badge","state","status","_el$","_$getNextElement","_tmpl$4","_el$2","firstChild","_el$3","_el$4","_el$5","nextSibling","_el$6","_el$7","_el$19","_el$20","_co$2","_$getNextMarker","_el$21","_el$22","_co$3","_$insert","title","_$createComponent","For","each","sections","children","section","SectionRenderer","filters","onFilterChange","onAction","onSectionEdit","Show","when","agentMessages","length","_el$8","_tmpl$","msg","_el$23","_tmpl$5","_el$24","_el$25","_c$","_$memo","type","text","_$effect","_$className","preview","_el$9","_tmpl$3","_el$0","_el$1","_el$10","_el$11","_el$17","_el$18","_co$","count","toLocaleString","summary","rows","_el$12","_tmpl$2","_el$13","_el$14","_el$15","_el$16","Object","keys","key","_el$26","_tmpl$6","slice","row","_el$27","_tmpl$7","values","val","_el$28","_tmpl$8","String","_el$29","_tmpl$10","_el$30","_el$31","_el$33","_el$34","_co$4","_el$37","_el$38","_co$5","editable","_tmpl$9","Switch","Match","DataSection","content","FilterSection","_el$35","_tmpl$0","ActionSection","StepsSection","_el$36","_tmpl$1","JSON","stringify","entries","_el$39","_tmpl$11","value","_el$40","_tmpl$12","_el$41","_el$43","_el$44","_co$6","_el$45","_c$2","Array","isArray","join","removeFilter","next","_el$46","_tmpl$13","_el$47","_tmpl$14","_el$48","_el$50","_el$51","_co$7","_el$53","_el$54","_co$8","_el$52","_c$3","$$click","_$setAttribute","_$runHydrationEvents","actions","_el$55","_tmpl$15","item","_el$56","_tmpl$16","action","variant","steps","_el$57","_tmpl$17","step","i","_el$58","_tmpl$18","_el$59","_tmpl$19","_el$60","_el$61","_co$9","_el$62","_el$63","_co$0","_c$4","_$delegateEvents"],"mappings":"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"}

package/dist/components/ScratchpadPanel.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ScratchpadPanel — HITL shared workspace between agent and human
+ * v2.7.0: Renders scratchpad sections, editable filters, preview, agent messages
+ *
+ * @experimental — This component may change without major bump until v2.5.0 stabilization.
+ */
+import { Component } from 'solid-js';
+import type { ScratchpadState } from '../types/chat-bus';
+export interface ScratchpadPanelProps {
+    state: ScratchpadState;
+    /** Called when human modifies filters */
+    onFilterChange?: (filters: Record<string, string | string[]>) => void;
+    /** Called when human clicks an action button */
+    onAction?: (action: string, data?: unknown) => void;
+    /** Called when human edits a section */
+    onSectionEdit?: (sectionId: string, content: unknown) => void;
+}
+/**
+ * @experimental
+ */
+export declare const ScratchpadPanel: Component<ScratchpadPanelProps>;
+//# sourceMappingURL=ScratchpadPanel.d.ts.map

package/dist/components/ScratchpadPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScratchpadPanel.d.ts","sourceRoot":"","sources":["../../src/components/ScratchpadPanel.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAA0C,MAAM,UAAU,CAAA;AAC5E,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,mBAAmB,CAAA;AAE3E,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,eAAe,CAAA;IACtB,yCAAyC;IACzC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,KAAK,IAAI,CAAA;IACrE,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IACnD,wCAAwC;IACxC,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC9D;AAUD;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,SAAS,CAAC,oBAAoB,CAyF3D,CAAA"}