@seed-ship/mcp-ui-solid 4.0.5 → 4.1.0

package/dist/components/SplitStepper.cjs

@@ -0,0 +1,121 @@
+"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=split-stepper><div class="grid gap-3"></div><!$><!/>`), _tmpl$2 = /* @__PURE__ */ web.template(`<div><div class="flex items-center gap-2 mb-2"><span class="font-medium text-sm text-gray-900 dark:text-white truncate"></span><span></span></div><div class=space-y-1>`), _tmpl$3 = /* @__PURE__ */ web.template(`<div class="flex items-center gap-2 text-xs"><span class="flex-shrink-0 w-4 text-center"></span><span>`), _tmpl$4 = /* @__PURE__ */ web.template(`<div class="w-3 h-3 border-2 border-blue-500 border-t-transparent rounded-full animate-spin">`), _tmpl$5 = /* @__PURE__ */ web.template(`<span>`), _tmpl$6 = /* @__PURE__ */ web.template(`<span class=text-gray-400>`), _tmpl$7 = /* @__PURE__ */ web.template(`<div><div class="flex items-center justify-center gap-2 text-sm"><!$><!/><!$><!/><!$><!/><span>`);
+const STEP_ICONS = {
+  done: "✅",
+  active: "🔄",
+  pending: "⏳",
+  skipped: "⏭️",
+  error: "❌"
+};
+const AGENT_STATUS_COLORS = {
+  done: "border-green-400 dark:border-green-600",
+  active: "border-blue-400 dark:border-blue-500",
+  pending: "border-gray-300 dark:border-gray-600",
+  error: "border-red-400 dark:border-red-600"
+};
+function SplitStepper(props) {
+  var _a;
+  const c = () => props.content;
+  if (typeof console !== "undefined") {
+    console.info("[MCP-UI:SplitStepper] mounted", {
+      agents: c().agents.map((a) => `${a.id}:${a.status}`),
+      synthesis: (_a = c().synthesis) == null ? void 0 : _a.status
+    });
+  }
+  return (() => {
+    var _el$ = web.getNextElement(_tmpl$), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, [_el$4, _co$] = web.getNextMarker(_el$3.nextSibling);
+    web.insert(_el$2, web.createComponent(solidJs.For, {
+      get each() {
+        return c().agents;
+      },
+      children: (agent) => (() => {
+        var _el$5 = web.getNextElement(_tmpl$2), _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$9 = _el$6.nextSibling;
+        web.insert(_el$7, () => agent.name);
+        web.insert(_el$9, web.createComponent(solidJs.For, {
+          get each() {
+            return agent.steps;
+          },
+          children: (step) => (() => {
+            var _el$0 = web.getNextElement(_tmpl$3), _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling;
+            web.insert(_el$1, () => STEP_ICONS[step.status] || STEP_ICONS.pending);
+            web.insert(_el$10, () => step.label);
+            web.effect((_$p) => web.classList(_el$10, {
+              "text-gray-900 dark:text-white font-medium": step.status === "active",
+              "text-gray-500 dark:text-gray-400": step.status !== "active",
+              "line-through opacity-50": step.status === "skipped"
+            }, _$p));
+            return _el$0;
+          })()
+        }));
+        web.effect((_p$) => {
+          var _v$ = `rounded-lg border-2 ${AGENT_STATUS_COLORS[agent.status] || AGENT_STATUS_COLORS.pending} p-3`, _v$2 = `w-2 h-2 rounded-full flex-shrink-0 ${agent.status === "done" ? "bg-green-500" : agent.status === "active" ? "bg-blue-500 animate-pulse" : agent.status === "error" ? "bg-red-500" : "bg-gray-400"}`;
+          _v$ !== _p$.e && web.className(_el$5, _p$.e = _v$);
+          _v$2 !== _p$.t && web.className(_el$8, _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$5;
+      })()
+    }));
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return c().synthesis;
+      },
+      children: (syn) => (() => {
+        var _el$11 = web.getNextElement(_tmpl$7), _el$12 = _el$11.firstChild, _el$17 = _el$12.firstChild, [_el$18, _co$2] = web.getNextMarker(_el$17.nextSibling), _el$19 = _el$18.nextSibling, [_el$20, _co$3] = web.getNextMarker(_el$19.nextSibling), _el$21 = _el$20.nextSibling, [_el$22, _co$4] = web.getNextMarker(_el$21.nextSibling), _el$16 = _el$22.nextSibling;
+        web.insert(_el$12, web.createComponent(solidJs.Show, {
+          get when() {
+            return syn().status === "active";
+          },
+          get children() {
+            return web.getNextElement(_tmpl$4);
+          }
+        }), _el$18, _co$2);
+        web.insert(_el$12, web.createComponent(solidJs.Show, {
+          get when() {
+            return syn().status === "done";
+          },
+          get children() {
+            var _el$14 = web.getNextElement(_tmpl$5);
+            web.insert(_el$14, () => STEP_ICONS.done);
+            return _el$14;
+          }
+        }), _el$20, _co$3);
+        web.insert(_el$12, web.createComponent(solidJs.Show, {
+          get when() {
+            return syn().status === "pending";
+          },
+          get children() {
+            var _el$15 = web.getNextElement(_tmpl$6);
+            web.insert(_el$15, () => STEP_ICONS.pending);
+            return _el$15;
+          }
+        }), _el$22, _co$4);
+        web.insert(_el$16, () => syn().label);
+        web.effect((_p$) => {
+          var _v$3 = `mt-3 p-3 rounded-lg border-2 text-center ${syn().status === "done" ? "border-green-400 dark:border-green-600 bg-green-50 dark:bg-green-900/10" : syn().status === "active" ? "border-blue-400 dark:border-blue-500 bg-blue-50 dark:bg-blue-900/10" : "border-dashed border-gray-300 dark:border-gray-600"}`, _v$4 = {
+            "font-medium text-blue-700 dark:text-blue-300": syn().status === "active",
+            "font-medium text-green-700 dark:text-green-300": syn().status === "done",
+            "text-gray-500 dark:text-gray-400": syn().status === "pending"
+          };
+          _v$3 !== _p$.e && web.className(_el$11, _p$.e = _v$3);
+          _p$.t = web.classList(_el$16, _v$4, _p$.t);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$11;
+      })()
+    }), _el$4, _co$);
+    web.effect((_$p) => web.setStyleProperty(_el$2, "grid-template-columns", `repeat(${Math.min(c().agents.length, 3)}, 1fr)`));
+    return _el$;
+  })();
+}
+exports.SplitStepper = SplitStepper;
+//# sourceMappingURL=SplitStepper.cjs.map

package/dist/components/SplitStepper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitStepper.cjs","sources":["../../src/components/SplitStepper.tsx"],"sourcesContent":["/**\n * SplitStepper — parallel agent steppers side by side\n * v4.1.0: AITL sprint — 2-3 columns, synthesis row at bottom\n *\n * @experimental\n */\n\nimport { For, Show } from 'solid-js'\nimport type { SplitStepperContent } from '../types/chat-bus'\n\nexport interface SplitStepperProps {\n  content: SplitStepperContent\n}\n\nconst STEP_ICONS: Record<string, string> = {\n  done: '\\u2705',\n  active: '\\uD83D\\uDD04',\n  pending: '\\u23F3',\n  skipped: '\\u23ED\\uFE0F',\n  error: '\\u274C',\n}\n\nconst AGENT_STATUS_COLORS: Record<string, string> = {\n  done: 'border-green-400 dark:border-green-600',\n  active: 'border-blue-400 dark:border-blue-500',\n  pending: 'border-gray-300 dark:border-gray-600',\n  error: 'border-red-400 dark:border-red-600',\n}\n\nexport function SplitStepper(props: SplitStepperProps) {\n  const c = () => props.content\n\n  if (typeof console !== 'undefined') {\n    console.info('[MCP-UI:SplitStepper] mounted', {\n      agents: c().agents.map(a => `${a.id}:${a.status}`),\n      synthesis: c().synthesis?.status,\n    })\n  }\n\n  return (\n    <div class=\"split-stepper\">\n      {/* Agent columns */}\n      <div class=\"grid gap-3\" style={{ \"grid-template-columns\": `repeat(${Math.min(c().agents.length, 3)}, 1fr)` }}>\n        <For each={c().agents}>\n          {(agent) => (\n            <div class={`rounded-lg border-2 ${AGENT_STATUS_COLORS[agent.status] || AGENT_STATUS_COLORS.pending} p-3`}>\n              {/* Agent header */}\n              <div class=\"flex items-center gap-2 mb-2\">\n                <span class=\"font-medium text-sm text-gray-900 dark:text-white truncate\">{agent.name}</span>\n                <span class={`w-2 h-2 rounded-full flex-shrink-0 ${\n                  agent.status === 'done' ? 'bg-green-500' :\n                  agent.status === 'active' ? 'bg-blue-500 animate-pulse' :\n                  agent.status === 'error' ? 'bg-red-500' :\n                  'bg-gray-400'\n                }`} />\n              </div>\n\n              {/* Steps */}\n              <div class=\"space-y-1\">\n                <For each={agent.steps}>\n                  {(step) => (\n                    <div class=\"flex items-center gap-2 text-xs\">\n                      <span class=\"flex-shrink-0 w-4 text-center\">{STEP_ICONS[step.status] || STEP_ICONS.pending}</span>\n                      <span classList={{\n                        'text-gray-900 dark:text-white font-medium': step.status === 'active',\n                        'text-gray-500 dark:text-gray-400': step.status !== 'active',\n                        'line-through opacity-50': step.status === 'skipped',\n                      }}>\n                        {step.label}\n                      </span>\n                    </div>\n                  )}\n                </For>\n              </div>\n            </div>\n          )}\n        </For>\n      </div>\n\n      {/* Synthesis row */}\n      <Show when={c().synthesis}>\n        {(syn) => (\n          <div class={`mt-3 p-3 rounded-lg border-2 text-center ${\n            syn().status === 'done' ? 'border-green-400 dark:border-green-600 bg-green-50 dark:bg-green-900/10' :\n            syn().status === 'active' ? 'border-blue-400 dark:border-blue-500 bg-blue-50 dark:bg-blue-900/10' :\n            'border-dashed border-gray-300 dark:border-gray-600'\n          }`}>\n            <div class=\"flex items-center justify-center gap-2 text-sm\">\n              <Show when={syn().status === 'active'}>\n                <div class=\"w-3 h-3 border-2 border-blue-500 border-t-transparent rounded-full animate-spin\" />\n              </Show>\n              <Show when={syn().status === 'done'}>\n                <span>{STEP_ICONS.done}</span>\n              </Show>\n              <Show when={syn().status === 'pending'}>\n                <span class=\"text-gray-400\">{STEP_ICONS.pending}</span>\n              </Show>\n              <span classList={{\n                'font-medium text-blue-700 dark:text-blue-300': syn().status === 'active',\n                'font-medium text-green-700 dark:text-green-300': syn().status === 'done',\n                'text-gray-500 dark:text-gray-400': syn().status === 'pending',\n              }}>\n                {syn().label}\n              </span>\n            </div>\n          </div>\n        )}\n      </Show>\n    </div>\n  )\n}\n"],"names":["STEP_ICONS","done","active","pending","skipped","error","AGENT_STATUS_COLORS","SplitStepper","props","c","content","console","info","agents","map","a","id","status","synthesis","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_co$","_$getNextMarker","_$insert","_$createComponent","For","each","children","agent","_el$5","_tmpl$2","_el$6","_el$7","_el$8","_el$9","name","steps","step","_el$0","_tmpl$3","_el$1","_el$10","label","_$effect","_$p","_$classList","_p$","_v$","_v$2","e","_$className","t","undefined","Show","when","syn","_el$11","_tmpl$7","_el$12","_el$17","_el$18","_co$2","_el$19","_el$20","_co$3","_el$21","_el$22","_co$4","_el$16","_tmpl$4","_el$14","_tmpl$5","_el$15","_tmpl$6","_v$3","_v$4","_$setStyleProperty","Math","min","length"],"mappings":";;;;;AAcA,MAAMA,aAAqC;AAAA,EACzCC,MAAM;AAAA,EACNC,QAAQ;AAAA,EACRC,SAAS;AAAA,EACTC,SAAS;AAAA,EACTC,OAAO;AACT;AAEA,MAAMC,sBAA8C;AAAA,EAClDL,MAAM;AAAA,EACNC,QAAQ;AAAA,EACRC,SAAS;AAAA,EACTE,OAAO;AACT;AAEO,SAASE,aAAaC,OAA0B;;AACrD,QAAMC,IAAIA,MAAMD,MAAME;AAEtB,MAAI,OAAOC,YAAY,aAAa;AAClCA,YAAQC,KAAK,iCAAiC;AAAA,MAC5CC,QAAQJ,EAAAA,EAAII,OAAOC,IAAIC,CAAAA,MAAK,GAAGA,EAAEC,EAAE,IAAID,EAAEE,MAAM,EAAE;AAAA,MACjDC,YAAWT,OAAAA,EAAIS,cAAJT,mBAAeQ;AAAAA,IAAAA,CAC3B;AAAA,EACH;AAEA,UAAA,MAAA;AAAA,QAAAE,OAAAC,IAAAA,eAAAC,MAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAG,aAAA,CAAAC,OAAAC,IAAA,IAAAC,IAAAA,cAAAJ,MAAAC,WAAA;AAAAI,eAAAP,OAAAQ,IAAAA,gBAIOC,aAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEvB,IAAII;AAAAA,MAAM;AAAA,MAAAoB,UACjBC,YAAK,MAAA;AAAA,YAAAC,QAAAf,IAAAA,eAAAgB,OAAA,GAAAC,QAAAF,MAAAZ,YAAAe,QAAAD,MAAAd,YAAAgB,QAAAD,MAAAb,aAAAe,QAAAH,MAAAZ;AAAAI,YAAAA,OAAAS,OAAA,MAIyEJ,MAAMO,IAAI;AAAAZ,mBAAAW,OAAAV,IAAAA,gBAWnFC,aAAG;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEE,MAAMQ;AAAAA,UAAK;AAAA,UAAAT,UAClBU,WAAI,MAAA;AAAA,gBAAAC,QAAAxB,mBAAAyB,OAAA,GAAAC,QAAAF,MAAArB,YAAAwB,SAAAD,MAAArB;AAAAI,gBAAAA,OAAAiB,OAAA,MAE2C9C,WAAW2C,KAAK1B,MAAM,KAAKjB,WAAWG,OAAO;AAAA0B,gBAAAA,OAAAkB,QAAA,MAMvFJ,KAAKK,KAAK;AAAAC,gBAAAA,OAAAC,CAAAA,QAAAC,IAAAA,UAAAJ,QALI;AAAA,cACf,6CAA6CJ,KAAK1B,WAAW;AAAA,cAC7D,oCAAoC0B,KAAK1B,WAAW;AAAA,cACpD,2BAA2B0B,KAAK1B,WAAW;AAAA,YAAA,GAC5CiC,GAAA,CAAA;AAAA,mBAAAN;AAAAA,UAAA,GAAA;AAAA,QAAA,CAIJ,CAAA;AAAAK,YAAAA,OAAAG,CAAAA,QAAA;AAAA,cAAAC,MA1BK,uBAAuB/C,oBAAoB4B,MAAMjB,MAAM,KAAKX,oBAAoBH,OAAO,QAAMmD,OAIxF,sCACXpB,MAAMjB,WAAW,SAAS,iBAC1BiB,MAAMjB,WAAW,WAAW,8BAC5BiB,MAAMjB,WAAW,UAAU,eAC3B,aAAa;AACboC,kBAAAD,IAAAG,KAAAC,IAAAA,UAAArB,OAAAiB,IAAAG,IAAAF,GAAA;AAAAC,mBAAAF,IAAAK,KAAAD,IAAAA,UAAAjB,OAAAa,IAAAK,IAAAH,IAAA;AAAA,iBAAAF;AAAAA,QAAA,GAAA;AAAA,UAAAG,GAAAG;AAAAA,UAAAD,GAAAC;AAAAA,QAAAA,CAAA;AAAA,eAAAvB;AAAAA,MAAA,GAAA;AAAA,IAAA,CAqBP,CAAA;AAAAN,eAAAV,MAAAW,IAAAA,gBAKJ6B,cAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEnD,IAAIS;AAAAA,MAAS;AAAA,MAAAe,UACrB4B,UAAG,MAAA;AAAA,YAAAC,SAAA1C,IAAAA,eAAA2C,OAAA,GAAAC,SAAAF,OAAAvC,YAAA0C,SAAAD,OAAAzC,YAAA,CAAA2C,QAAAC,KAAA,IAAAvC,IAAAA,cAAAqC,OAAAxC,WAAA,GAAA2C,SAAAF,OAAAzC,aAAA,CAAA4C,QAAAC,KAAA,IAAA1C,IAAAA,cAAAwC,OAAA3C,WAAA,GAAA8C,SAAAF,OAAA5C,aAAA,CAAA+C,QAAAC,KAAA,IAAA7C,kBAAA2C,OAAA9C,WAAA,GAAAiD,SAAAF,OAAA/C;AAAAI,mBAAAmC,QAAAlC,IAAAA,gBAOE6B,cAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEC,IAAAA,EAAM5C,WAAW;AAAA,UAAQ;AAAA,UAAA,IAAAgB,WAAA;AAAA,mBAAAb,IAAAA,eAAAuD,OAAA;AAAA,UAAA;AAAA,QAAA,CAAA,GAAAT,QAAAC,KAAA;AAAAtC,mBAAAmC,QAAAlC,IAAAA,gBAGpC6B,cAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEC,IAAAA,EAAM5C,WAAW;AAAA,UAAM;AAAA,UAAA,IAAAgB,WAAA;AAAA,gBAAA2C,SAAAxD,IAAAA,eAAAyD,OAAA;AAAAhD,gBAAAA,OAAA+C,QAAA,MAC1B5E,WAAWC,IAAI;AAAA,mBAAA2E;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAAP,QAAAC,KAAA;AAAAzC,mBAAAmC,QAAAlC,IAAAA,gBAEvB6B,cAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEC,IAAAA,EAAM5C,WAAW;AAAA,UAAS;AAAA,UAAA,IAAAgB,WAAA;AAAA,gBAAA6C,SAAA1D,IAAAA,eAAA2D,OAAA;AAAAlD,gBAAAA,OAAAiD,QAAA,MACP9E,WAAWG,OAAO;AAAA,mBAAA2E;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAAN,QAAAC,KAAA;AAAA5C,YAAAA,OAAA6C,QAAA,MAO9Cb,IAAAA,EAAMb,KAAK;AAAAC,YAAAA,OAAAG,CAAAA,QAAA;AAAA,cAAA4B,OApBN,4CACVnB,IAAAA,EAAM5C,WAAW,SAAS,4EAC1B4C,IAAAA,EAAM5C,WAAW,WAAW,wEAC5B,oDAAoD,IACpDgE,OAWmB;AAAA,YACf,gDAAgDpB,MAAM5C,WAAW;AAAA,YACjE,kDAAkD4C,MAAM5C,WAAW;AAAA,YACnE,oCAAoC4C,IAAAA,EAAM5C,WAAW;AAAA,UAAA;AACtD+D,mBAAA5B,IAAAG,KAAAC,IAAAA,UAAAM,QAAAV,IAAAG,IAAAyB,IAAA;AAAA5B,cAAAK,IAAAN,IAAAA,UAAAuB,QAAAO,MAAA7B,IAAAK,CAAA;AAAA,iBAAAL;AAAAA,QAAA,GAAA;AAAA,UAAAG,GAAAG;AAAAA,UAAAD,GAAAC;AAAAA,QAAAA,CAAA;AAAA,eAAAI;AAAAA,MAAA,GAAA;AAAA,IAAA,CAKN,GAAApC,OAAAC,IAAA;AAAAsB,QAAAA,OAAAC,CAAAA,QAAAgC,IAAAA,iBAAA5D,OAAA,yBAhEuD,UAAU6D,KAAKC,IAAI3E,EAAAA,EAAII,OAAOwE,QAAQ,CAAC,CAAC,QAAQ,CAAA;AAAA,WAAAlE;AAAAA,EAAA,GAAA;AAoEhH;;"}

package/dist/components/SplitStepper.d.ts

@@ -0,0 +1,12 @@
+/**
+ * SplitStepper — parallel agent steppers side by side
+ * v4.1.0: AITL sprint — 2-3 columns, synthesis row at bottom
+ *
+ * @experimental
+ */
+import type { SplitStepperContent } from '../types/chat-bus';
+export interface SplitStepperProps {
+    content: SplitStepperContent;
+}
+export declare function SplitStepper(props: SplitStepperProps): import("solid-js").JSX.Element;
+//# sourceMappingURL=SplitStepper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitStepper.d.ts","sourceRoot":"","sources":["../../src/components/SplitStepper.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAE5D,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,mBAAmB,CAAA;CAC7B;AAiBD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kCAiFpD"}

package/dist/components/SplitStepper.js

@@ -0,0 +1,121 @@
+import { getNextElement, template, getNextMarker, insert, createComponent, effect, classList, className, setStyleProperty } from "solid-js/web";
+import { For, Show } from "solid-js";
+var _tmpl$ = /* @__PURE__ */ template(`<div class=split-stepper><div class="grid gap-3"></div><!$><!/>`), _tmpl$2 = /* @__PURE__ */ template(`<div><div class="flex items-center gap-2 mb-2"><span class="font-medium text-sm text-gray-900 dark:text-white truncate"></span><span></span></div><div class=space-y-1>`), _tmpl$3 = /* @__PURE__ */ template(`<div class="flex items-center gap-2 text-xs"><span class="flex-shrink-0 w-4 text-center"></span><span>`), _tmpl$4 = /* @__PURE__ */ template(`<div class="w-3 h-3 border-2 border-blue-500 border-t-transparent rounded-full animate-spin">`), _tmpl$5 = /* @__PURE__ */ template(`<span>`), _tmpl$6 = /* @__PURE__ */ template(`<span class=text-gray-400>`), _tmpl$7 = /* @__PURE__ */ template(`<div><div class="flex items-center justify-center gap-2 text-sm"><!$><!/><!$><!/><!$><!/><span>`);
+const STEP_ICONS = {
+  done: "✅",
+  active: "🔄",
+  pending: "⏳",
+  skipped: "⏭️",
+  error: "❌"
+};
+const AGENT_STATUS_COLORS = {
+  done: "border-green-400 dark:border-green-600",
+  active: "border-blue-400 dark:border-blue-500",
+  pending: "border-gray-300 dark:border-gray-600",
+  error: "border-red-400 dark:border-red-600"
+};
+function SplitStepper(props) {
+  var _a;
+  const c = () => props.content;
+  if (typeof console !== "undefined") {
+    console.info("[MCP-UI:SplitStepper] mounted", {
+      agents: c().agents.map((a) => `${a.id}:${a.status}`),
+      synthesis: (_a = c().synthesis) == null ? void 0 : _a.status
+    });
+  }
+  return (() => {
+    var _el$ = getNextElement(_tmpl$), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, [_el$4, _co$] = getNextMarker(_el$3.nextSibling);
+    insert(_el$2, createComponent(For, {
+      get each() {
+        return c().agents;
+      },
+      children: (agent) => (() => {
+        var _el$5 = getNextElement(_tmpl$2), _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$9 = _el$6.nextSibling;
+        insert(_el$7, () => agent.name);
+        insert(_el$9, createComponent(For, {
+          get each() {
+            return agent.steps;
+          },
+          children: (step) => (() => {
+            var _el$0 = getNextElement(_tmpl$3), _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling;
+            insert(_el$1, () => STEP_ICONS[step.status] || STEP_ICONS.pending);
+            insert(_el$10, () => step.label);
+            effect((_$p) => classList(_el$10, {
+              "text-gray-900 dark:text-white font-medium": step.status === "active",
+              "text-gray-500 dark:text-gray-400": step.status !== "active",
+              "line-through opacity-50": step.status === "skipped"
+            }, _$p));
+            return _el$0;
+          })()
+        }));
+        effect((_p$) => {
+          var _v$ = `rounded-lg border-2 ${AGENT_STATUS_COLORS[agent.status] || AGENT_STATUS_COLORS.pending} p-3`, _v$2 = `w-2 h-2 rounded-full flex-shrink-0 ${agent.status === "done" ? "bg-green-500" : agent.status === "active" ? "bg-blue-500 animate-pulse" : agent.status === "error" ? "bg-red-500" : "bg-gray-400"}`;
+          _v$ !== _p$.e && className(_el$5, _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$8, _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$5;
+      })()
+    }));
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return c().synthesis;
+      },
+      children: (syn) => (() => {
+        var _el$11 = getNextElement(_tmpl$7), _el$12 = _el$11.firstChild, _el$17 = _el$12.firstChild, [_el$18, _co$2] = getNextMarker(_el$17.nextSibling), _el$19 = _el$18.nextSibling, [_el$20, _co$3] = getNextMarker(_el$19.nextSibling), _el$21 = _el$20.nextSibling, [_el$22, _co$4] = getNextMarker(_el$21.nextSibling), _el$16 = _el$22.nextSibling;
+        insert(_el$12, createComponent(Show, {
+          get when() {
+            return syn().status === "active";
+          },
+          get children() {
+            return getNextElement(_tmpl$4);
+          }
+        }), _el$18, _co$2);
+        insert(_el$12, createComponent(Show, {
+          get when() {
+            return syn().status === "done";
+          },
+          get children() {
+            var _el$14 = getNextElement(_tmpl$5);
+            insert(_el$14, () => STEP_ICONS.done);
+            return _el$14;
+          }
+        }), _el$20, _co$3);
+        insert(_el$12, createComponent(Show, {
+          get when() {
+            return syn().status === "pending";
+          },
+          get children() {
+            var _el$15 = getNextElement(_tmpl$6);
+            insert(_el$15, () => STEP_ICONS.pending);
+            return _el$15;
+          }
+        }), _el$22, _co$4);
+        insert(_el$16, () => syn().label);
+        effect((_p$) => {
+          var _v$3 = `mt-3 p-3 rounded-lg border-2 text-center ${syn().status === "done" ? "border-green-400 dark:border-green-600 bg-green-50 dark:bg-green-900/10" : syn().status === "active" ? "border-blue-400 dark:border-blue-500 bg-blue-50 dark:bg-blue-900/10" : "border-dashed border-gray-300 dark:border-gray-600"}`, _v$4 = {
+            "font-medium text-blue-700 dark:text-blue-300": syn().status === "active",
+            "font-medium text-green-700 dark:text-green-300": syn().status === "done",
+            "text-gray-500 dark:text-gray-400": syn().status === "pending"
+          };
+          _v$3 !== _p$.e && className(_el$11, _p$.e = _v$3);
+          _p$.t = classList(_el$16, _v$4, _p$.t);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$11;
+      })()
+    }), _el$4, _co$);
+    effect((_$p) => setStyleProperty(_el$2, "grid-template-columns", `repeat(${Math.min(c().agents.length, 3)}, 1fr)`));
+    return _el$;
+  })();
+}
+export {
+  SplitStepper
+};
+//# sourceMappingURL=SplitStepper.js.map

package/dist/components/SplitStepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitStepper.js","sources":["../../src/components/SplitStepper.tsx"],"sourcesContent":["/**\n * SplitStepper — parallel agent steppers side by side\n * v4.1.0: AITL sprint — 2-3 columns, synthesis row at bottom\n *\n * @experimental\n */\n\nimport { For, Show } from 'solid-js'\nimport type { SplitStepperContent } from '../types/chat-bus'\n\nexport interface SplitStepperProps {\n  content: SplitStepperContent\n}\n\nconst STEP_ICONS: Record<string, string> = {\n  done: '\\u2705',\n  active: '\\uD83D\\uDD04',\n  pending: '\\u23F3',\n  skipped: '\\u23ED\\uFE0F',\n  error: '\\u274C',\n}\n\nconst AGENT_STATUS_COLORS: Record<string, string> = {\n  done: 'border-green-400 dark:border-green-600',\n  active: 'border-blue-400 dark:border-blue-500',\n  pending: 'border-gray-300 dark:border-gray-600',\n  error: 'border-red-400 dark:border-red-600',\n}\n\nexport function SplitStepper(props: SplitStepperProps) {\n  const c = () => props.content\n\n  if (typeof console !== 'undefined') {\n    console.info('[MCP-UI:SplitStepper] mounted', {\n      agents: c().agents.map(a => `${a.id}:${a.status}`),\n      synthesis: c().synthesis?.status,\n    })\n  }\n\n  return (\n    <div class=\"split-stepper\">\n      {/* Agent columns */}\n      <div class=\"grid gap-3\" style={{ \"grid-template-columns\": `repeat(${Math.min(c().agents.length, 3)}, 1fr)` }}>\n        <For each={c().agents}>\n          {(agent) => (\n            <div class={`rounded-lg border-2 ${AGENT_STATUS_COLORS[agent.status] || AGENT_STATUS_COLORS.pending} p-3`}>\n              {/* Agent header */}\n              <div class=\"flex items-center gap-2 mb-2\">\n                <span class=\"font-medium text-sm text-gray-900 dark:text-white truncate\">{agent.name}</span>\n                <span class={`w-2 h-2 rounded-full flex-shrink-0 ${\n                  agent.status === 'done' ? 'bg-green-500' :\n                  agent.status === 'active' ? 'bg-blue-500 animate-pulse' :\n                  agent.status === 'error' ? 'bg-red-500' :\n                  'bg-gray-400'\n                }`} />\n              </div>\n\n              {/* Steps */}\n              <div class=\"space-y-1\">\n                <For each={agent.steps}>\n                  {(step) => (\n                    <div class=\"flex items-center gap-2 text-xs\">\n                      <span class=\"flex-shrink-0 w-4 text-center\">{STEP_ICONS[step.status] || STEP_ICONS.pending}</span>\n                      <span classList={{\n                        'text-gray-900 dark:text-white font-medium': step.status === 'active',\n                        'text-gray-500 dark:text-gray-400': step.status !== 'active',\n                        'line-through opacity-50': step.status === 'skipped',\n                      }}>\n                        {step.label}\n                      </span>\n                    </div>\n                  )}\n                </For>\n              </div>\n            </div>\n          )}\n        </For>\n      </div>\n\n      {/* Synthesis row */}\n      <Show when={c().synthesis}>\n        {(syn) => (\n          <div class={`mt-3 p-3 rounded-lg border-2 text-center ${\n            syn().status === 'done' ? 'border-green-400 dark:border-green-600 bg-green-50 dark:bg-green-900/10' :\n            syn().status === 'active' ? 'border-blue-400 dark:border-blue-500 bg-blue-50 dark:bg-blue-900/10' :\n            'border-dashed border-gray-300 dark:border-gray-600'\n          }`}>\n            <div class=\"flex items-center justify-center gap-2 text-sm\">\n              <Show when={syn().status === 'active'}>\n                <div class=\"w-3 h-3 border-2 border-blue-500 border-t-transparent rounded-full animate-spin\" />\n              </Show>\n              <Show when={syn().status === 'done'}>\n                <span>{STEP_ICONS.done}</span>\n              </Show>\n              <Show when={syn().status === 'pending'}>\n                <span class=\"text-gray-400\">{STEP_ICONS.pending}</span>\n              </Show>\n              <span classList={{\n                'font-medium text-blue-700 dark:text-blue-300': syn().status === 'active',\n                'font-medium text-green-700 dark:text-green-300': syn().status === 'done',\n                'text-gray-500 dark:text-gray-400': syn().status === 'pending',\n              }}>\n                {syn().label}\n              </span>\n            </div>\n          </div>\n        )}\n      </Show>\n    </div>\n  )\n}\n"],"names":["STEP_ICONS","done","active","pending","skipped","error","AGENT_STATUS_COLORS","SplitStepper","props","c","content","console","info","agents","map","a","id","status","synthesis","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_co$","_$getNextMarker","_$insert","_$createComponent","For","each","children","agent","_el$5","_tmpl$2","_el$6","_el$7","_el$8","_el$9","name","steps","step","_el$0","_tmpl$3","_el$1","_el$10","label","_$effect","_$p","_$classList","_p$","_v$","_v$2","e","_$className","t","undefined","Show","when","syn","_el$11","_tmpl$7","_el$12","_el$17","_el$18","_co$2","_el$19","_el$20","_co$3","_el$21","_el$22","_co$4","_el$16","_tmpl$4","_el$14","_tmpl$5","_el$15","_tmpl$6","_v$3","_v$4","_$setStyleProperty","Math","min","length"],"mappings":"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"}

package/dist/components/UIResourceRenderer.cjs

@@ -608,7 +608,7 @@ ${dataRows}`;
         },
         children: (column) => (() => {
           var _el$103 = web.getNextElement(_tmpl$22), _el$104 = _el$103.firstChild, _el$106 = _el$104.firstChild, [_el$107, _co$23] = web.getNextMarker(_el$106.nextSibling), _el$105 = _el$107.nextSibling;
-          _el$103.$$click = () => handleSort(column.key);
+          web.addEventListener(_el$103, "click", () => handleSort(column.key));
           web.insert(_el$104, () => column.label, _el$107, _co$23);
           web.insert(_el$105, () => sortIndicator(column.key));
           web.effect((_p$) => {
@@ -627,7 +627,6 @@ ${dataRows}`;
             t: void 0,
             a: void 0
           });
-          web.runHydrationEvents();
           return _el$103;
         })()
       }));