@seed-ship/mcp-ui-solid 6.19.1 → 6.20.0

package/dist/components/AgentCard.js

@@ -1,5 +1,6 @@
 import { getNextElement, getNextMarker, insert, createComponent, memo, effect, className, setAttribute, template } from "solid-js/web";
 import { Show, For } from "solid-js";
+import { useMCPUIStrings } from "../context/MCPUIStringsContext.js";
 var _tmpl$ = /* @__PURE__ */ template(`<span class="text-xs text-gray-400 dark:text-gray-500">`), _tmpl$2 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1 mt-1.5">`), _tmpl$3 = /* @__PURE__ */ template(`<div class="mt-1.5 flex items-center gap-1.5 text-xs text-blue-600 dark:text-blue-400"><div class="w-3 h-3 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div><!$><!/>`), _tmpl$4 = /* @__PURE__ */ template(`<div class="flex items-start gap-3 p-3 rounded-lg bg-gradient-to-r from-gray-50 to-transparent dark:from-gray-800/50"><div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-xl"></div><div class="flex-1 min-w-0"><div class="flex items-center gap-2"><span class="font-medium text-sm text-gray-900 dark:text-white truncate"></span><span></span><span class="text-xs text-gray-500 dark:text-gray-400"></span></div><!$><!/><!$><!/><!$><!/>`), _tmpl$5 = /* @__PURE__ */ template(`<span class="px-1.5 py-0.5 text-[10px] rounded bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300">`), _tmpl$6 = /* @__PURE__ */ template(`<span class="inline-flex items-center gap-1.5 text-xs"><span></span><span class="text-gray-600 dark:text-gray-300"></span><span class="text-gray-400 dark:text-gray-500">`);
 const AVATAR_MAP = {
   scales: "⚖️",
@@ -13,32 +14,33 @@ const AVATAR_MAP = {
 };
 const STATUS_CONFIG = {
   idle: {
-    label: "Idle",
+    labelKey: "agentStatusIdle",
     color: "bg-gray-400",
     pulse: false
   },
   running: {
-    label: "Running",
+    labelKey: "agentStatusRunning",
     color: "bg-blue-500",
     pulse: true
   },
   waiting: {
-    label: "Waiting",
+    labelKey: "agentStatusWaiting",
     color: "bg-amber-500",
     pulse: true
   },
   done: {
-    label: "Done",
+    labelKey: "agentStatusDone",
     color: "bg-green-500",
     pulse: false
   },
   error: {
-    label: "Error",
+    labelKey: "agentStatusError",
     color: "bg-red-500",
     pulse: false
   }
 };
 function AgentCard(props) {
+  const strings = useMCPUIStrings();
   const c = () => props.content;
   const status = () => STATUS_CONFIG[c().status] || STATUS_CONFIG.idle;
   const avatar = () => AVATAR_MAP[c().avatar || ""] || c().avatar || "🤖";
@@ -53,7 +55,7 @@ function AgentCard(props) {
     var _el$ = getNextElement(_tmpl$4), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$6.nextSibling, _el$12 = _el$4.nextSibling, [_el$13, _co$2] = getNextMarker(_el$12.nextSibling), _el$14 = _el$13.nextSibling, [_el$15, _co$3] = getNextMarker(_el$14.nextSibling), _el$16 = _el$15.nextSibling, [_el$17, _co$4] = getNextMarker(_el$16.nextSibling);
     insert(_el$2, avatar);
     insert(_el$5, () => c().name);
-    insert(_el$7, () => status().label);
+    insert(_el$7, () => strings[status().labelKey]);
     insert(_el$3, createComponent(Show, {
       get when() {
         return c().model;
@@ -94,7 +96,7 @@ function AgentCard(props) {
       }
     }), _el$17, _co$4);
     effect((_p$) => {
-      var _v$ = `inline-block w-2 h-2 rounded-full ${status().color} ${status().pulse ? "animate-pulse" : ""}`, _v$2 = status().label;
+      var _v$ = `inline-block w-2 h-2 rounded-full ${status().color} ${status().pulse ? "animate-pulse" : ""}`, _v$2 = strings[status().labelKey];
       _v$ !== _p$.e && className(_el$6, _p$.e = _v$);
       _v$2 !== _p$.t && setAttribute(_el$6, "title", _p$.t = _v$2);
       return _p$;
@@ -106,11 +108,12 @@ function AgentCard(props) {
   })();
 }
 function AgentStatusBadge(props) {
+  const strings = useMCPUIStrings();
   const status = () => STATUS_CONFIG[props.status] || STATUS_CONFIG.idle;
   return (() => {
     var _el$19 = getNextElement(_tmpl$6), _el$20 = _el$19.firstChild, _el$21 = _el$20.nextSibling, _el$22 = _el$21.nextSibling;
     insert(_el$21, () => props.agentName);
-    insert(_el$22, () => status().label);
+    insert(_el$22, () => strings[status().labelKey]);
     effect(() => className(_el$20, `w-2 h-2 rounded-full ${status().color} ${status().pulse ? "animate-pulse" : ""}`));
     return _el$19;
   })();

package/dist/components/AgentCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"AgentCard.js","sources":["../../src/components/AgentCard.tsx"],"sourcesContent":["/**\n * AgentCard — Agent identity + status display\n * v4.1.0: AITL sprint — shows avatar, name, status, capabilities, current step\n *\n * @experimental\n */\n\nimport { Show, For } from 'solid-js'\nimport type { AgentCardContent } from '../types/chat-bus'\n\nexport interface AgentCardProps {\n  content: AgentCardContent\n}\n\nconst AVATAR_MAP: Record<string, string> = {\n  scales: '\\u2696\\uFE0F',\n  chart: '\\uD83D\\uDCC8',\n  search: '\\uD83D\\uDD0D',\n  document: '\\uD83D\\uDCC4',\n  brain: '\\uD83E\\uDDE0',\n  shield: '\\uD83D\\uDEE1\\uFE0F',\n  globe: '\\uD83C\\uDF10',\n  robot: '\\uD83E\\uDD16',\n}\n\nconst STATUS_CONFIG: Record<string, { label: string; color: string; pulse: boolean }> = {\n  idle: { label: 'Idle', color: 'bg-gray-400', pulse: false },\n  running: { label: 'Running', color: 'bg-blue-500', pulse: true },\n  waiting: { label: 'Waiting', color: 'bg-amber-500', pulse: true },\n  done: { label: 'Done', color: 'bg-green-500', pulse: false },\n  error: { label: 'Error', color: 'bg-red-500', pulse: false },\n}\n\nexport function AgentCard(props: AgentCardProps) {\n  const c = () => props.content\n  const status = () => STATUS_CONFIG[c().status] || STATUS_CONFIG.idle\n  const avatar = () => AVATAR_MAP[c().avatar || ''] || c().avatar || '\\uD83E\\uDD16'\n\n  if (typeof console !== 'undefined') {\n    console.info('[MCP-UI:AgentCard] mounted', {\n      agentId: c().agentId, status: c().status, capabilities: c().capabilities,\n    })\n  }\n\n  return (\n    <div class=\"flex items-start gap-3 p-3 rounded-lg bg-gradient-to-r from-gray-50 to-transparent dark:from-gray-800/50\">\n      {/* Avatar */}\n      <div class=\"flex-shrink-0 w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-xl\">\n        {avatar()}\n      </div>\n\n      {/* Info */}\n      <div class=\"flex-1 min-w-0\">\n        <div class=\"flex items-center gap-2\">\n          <span class=\"font-medium text-sm text-gray-900 dark:text-white truncate\">{c().name}</span>\n          {/* Status dot */}\n          <span class={`inline-block w-2 h-2 rounded-full ${status().color} ${status().pulse ? 'animate-pulse' : ''}`} title={status().label} />\n          <span class=\"text-xs text-gray-500 dark:text-gray-400\">{status().label}</span>\n        </div>\n\n        {/* Model */}\n        <Show when={c().model}>\n          <span class=\"text-xs text-gray-400 dark:text-gray-500\">{c().model}</span>\n        </Show>\n\n        {/* Capabilities */}\n        <Show when={c().capabilities && c().capabilities!.length > 0}>\n          <div class=\"flex flex-wrap gap-1 mt-1.5\">\n            <For each={c().capabilities}>\n              {(cap) => (\n                <span class=\"px-1.5 py-0.5 text-[10px] rounded bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300\">\n                  {cap}\n                </span>\n              )}\n            </For>\n          </div>\n        </Show>\n\n        {/* Current step */}\n        <Show when={c().currentStep && c().status === 'running'}>\n          <div class=\"mt-1.5 flex items-center gap-1.5 text-xs text-blue-600 dark:text-blue-400\">\n            <div class=\"w-3 h-3 border-2 border-blue-500 border-t-transparent rounded-full animate-spin\" />\n            {c().currentStep!.label}\n          </div>\n        </Show>\n      </div>\n    </div>\n  )\n}\n\n/**\n * AgentStatusBadge — compact pulse badge for scratchpad header\n */\nexport interface AgentStatusBadgeProps {\n  agentName: string\n  status: 'idle' | 'running' | 'waiting' | 'done' | 'error'\n}\n\nexport function AgentStatusBadge(props: AgentStatusBadgeProps) {\n  const status = () => STATUS_CONFIG[props.status] || STATUS_CONFIG.idle\n\n  return (\n    <span class=\"inline-flex items-center gap-1.5 text-xs\">\n      <span class={`w-2 h-2 rounded-full ${status().color} ${status().pulse ? 'animate-pulse' : ''}`} />\n      <span class=\"text-gray-600 dark:text-gray-300\">{props.agentName}</span>\n      <span class=\"text-gray-400 dark:text-gray-500\">{status().label}</span>\n    </span>\n  )\n}\n"],"names":["AVATAR_MAP","scales","chart","search","document","brain","shield","globe","robot","STATUS_CONFIG","idle","label","color","pulse","running","waiting","done","error","AgentCard","props","c","content","status","avatar","console","info","agentId","capabilities","_el$","_$getNextElement","_tmpl$4","_el$2","firstChild","_el$3","nextSibling","_el$4","_el$5","_el$6","_el$7","_el$12","_el$13","_co$2","_$getNextMarker","_el$14","_el$15","_co$3","_el$16","_el$17","_co$4","_$insert","name","_$createComponent","Show","when","model","children","_el$8","_tmpl$","_$memo","length","_el$9","_tmpl$2","For","each","cap","_el$18","_tmpl$5","currentStep","_el$0","_tmpl$3","_el$1","_el$10","_el$11","_co$","_$effect","_p$","_v$","_v$2","e","_$className","t","_$setAttribute","undefined","AgentStatusBadge","_el$19","_tmpl$6","_el$20","_el$21","_el$22","agentName"],"mappings":";;;AAcA,MAAMA,aAAqC;AAAA,EACzCC,QAAQ;AAAA,EACRC,OAAO;AAAA,EACPC,QAAQ;AAAA,EACRC,UAAU;AAAA,EACVC,OAAO;AAAA,EACPC,QAAQ;AAAA,EACRC,OAAO;AAAA,EACPC,OAAO;AACT;AAEA,MAAMC,gBAAkF;AAAA,EACtFC,MAAM;AAAA,IAAEC,OAAO;AAAA,IAAQC,OAAO;AAAA,IAAeC,OAAO;AAAA,EAAA;AAAA,EACpDC,SAAS;AAAA,IAAEH,OAAO;AAAA,IAAWC,OAAO;AAAA,IAAeC,OAAO;AAAA,EAAA;AAAA,EAC1DE,SAAS;AAAA,IAAEJ,OAAO;AAAA,IAAWC,OAAO;AAAA,IAAgBC,OAAO;AAAA,EAAA;AAAA,EAC3DG,MAAM;AAAA,IAAEL,OAAO;AAAA,IAAQC,OAAO;AAAA,IAAgBC,OAAO;AAAA,EAAA;AAAA,EACrDI,OAAO;AAAA,IAAEN,OAAO;AAAA,IAASC,OAAO;AAAA,IAAcC,OAAO;AAAA,EAAA;AACvD;AAEO,SAASK,UAAUC,OAAuB;AAC/C,QAAMC,IAAIA,MAAMD,MAAME;AACtB,QAAMC,SAASA,MAAMb,cAAcW,IAAIE,MAAM,KAAKb,cAAcC;AAChE,QAAMa,SAASA,MAAMvB,WAAWoB,EAAAA,EAAIG,UAAU,EAAE,KAAKH,IAAIG,UAAU;AAEnE,MAAI,OAAOC,YAAY,aAAa;AAClCA,YAAQC,KAAK,8BAA8B;AAAA,MACzCC,SAASN,IAAIM;AAAAA,MAASJ,QAAQF,IAAIE;AAAAA,MAAQK,cAAcP,IAAIO;AAAAA,IAAAA,CAC7D;AAAA,EACH;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,eAAAC,OAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAG,aAAAC,QAAAF,MAAAD,YAAAI,QAAAD,MAAAH,YAAAK,QAAAD,MAAAF,aAAAI,QAAAD,MAAAH,aAAAK,SAAAJ,MAAAD,aAAA,CAAAM,QAAAC,KAAA,IAAAC,cAAAH,OAAAL,WAAA,GAAAS,SAAAH,OAAAN,aAAA,CAAAU,QAAAC,KAAA,IAAAH,cAAAC,OAAAT,WAAA,GAAAY,SAAAF,OAAAV,aAAA,CAAAa,QAAAC,KAAA,IAAAN,cAAAI,OAAAZ,WAAA;AAAAe,WAAAlB,OAIOR,MAAM;AAAA0B,WAAAb,OAAA,MAMqEhB,EAAAA,EAAI8B,IAAI;AAAAD,WAAAX,OAAA,MAG1BhB,OAAAA,EAASX,KAAK;AAAAsC,WAAAhB,OAAAkB,gBAIvEC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEjC,IAAIkC;AAAAA,MAAK;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,QAAA3B,eAAA4B,MAAA;AAAAR,eAAAO,OAAA,MACqCpC,EAAAA,EAAIkC,KAAK;AAAA,eAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAhB,QAAAC,KAAA;AAAAQ,WAAAhB,OAAAkB,gBAIlEC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEK,KAAA,MAAA,CAAA,CAAAtC,IAAIO,YAAY,EAAA,KAAIP,EAAAA,EAAIO,aAAcgC,SAAS;AAAA,MAAC;AAAA,MAAA,IAAAJ,WAAA;AAAA,YAAAK,QAAA/B,eAAAgC,OAAA;AAAAZ,eAAAW,OAAAT,gBAEvDW,KAAG;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAE3C,IAAIO;AAAAA,UAAY;AAAA,UAAA4B,UACvBS,UAAG,MAAA;AAAA,gBAAAC,SAAApC,eAAAqC,OAAA;AAAAjB,mBAAAgB,QAEAD,GAAG;AAAA,mBAAAC;AAAAA,UAAA,GAAA;AAAA,QAAA,CAEP,CAAA;AAAA,eAAAL;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAhB,QAAAC,KAAA;AAAAI,WAAAhB,OAAAkB,gBAMNC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEK,KAAA,MAAA,CAAA,CAAAtC,EAAAA,EAAI+C,WAAW,OAAI/C,IAAIE,WAAW;AAAA,MAAS;AAAA,MAAA,IAAAiC,WAAA;AAAA,YAAAa,QAAAvC,eAAAwC,OAAA,GAAAC,QAAAF,MAAApC,YAAAuC,SAAAD,MAAApC,aAAA,CAAAsC,QAAAC,IAAA,IAAA/B,cAAA6B,OAAArC,WAAA;AAAAe,eAAAmB,OAAA,MAGlDhD,EAAAA,EAAI+C,YAAaxD,OAAK6D,QAAAC,IAAA;AAAA,eAAAL;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAArB,QAAAC,KAAA;AAAA0B,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MA1BZ,qCAAqCtD,OAAAA,EAASV,KAAK,IAAIU,OAAAA,EAAST,QAAQ,kBAAkB,EAAE,IAAEgE,OAASvD,SAASX;AAAKiE,cAAAD,IAAAG,KAAAC,UAAA1C,OAAAsC,IAAAG,IAAAF,GAAA;AAAAC,eAAAF,IAAAK,KAAAC,aAAA5C,OAAA,SAAAsC,IAAAK,IAAAH,IAAA;AAAA,aAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAG,GAAAI;AAAAA,MAAAF,GAAAE;AAAAA,IAAAA,CAAA;AAAA,WAAAtD;AAAAA,EAAA,GAAA;AAgC5I;AAUO,SAASuD,iBAAiBhE,OAA8B;AAC7D,QAAMG,SAASA,MAAMb,cAAcU,MAAMG,MAAM,KAAKb,cAAcC;AAElE,UAAA,MAAA;AAAA,QAAA0E,SAAAvD,eAAAwD,OAAA,GAAAC,SAAAF,OAAApD,YAAAuD,SAAAD,OAAApD,aAAAsD,SAAAD,OAAArD;AAAAe,WAAAsC,QAAA,MAGoDpE,MAAMsE,SAAS;AAAAxC,WAAAuC,QAAA,MACflE,OAAAA,EAASX,KAAK;AAAA+D,WAAA,MAAAK,UAAAO,QAFjD,wBAAwBhE,SAASV,KAAK,IAAIU,OAAAA,EAAST,QAAQ,kBAAkB,EAAE,EAAE,CAAA;AAAA,WAAAuE;AAAAA,EAAA,GAAA;AAKpG;"}
+{"version":3,"file":"AgentCard.js","sources":["../../src/components/AgentCard.tsx"],"sourcesContent":["/**\n * AgentCard — Agent identity + status display\n * v4.1.0: AITL sprint — shows avatar, name, status, capabilities, current step\n *\n * @experimental\n */\n\nimport { Show, For } from 'solid-js'\nimport type { AgentCardContent } from '../types/chat-bus'\nimport { useMCPUIStrings } from '../context/MCPUIStringsContext'\n\nexport interface AgentCardProps {\n  content: AgentCardContent\n}\n\nconst AVATAR_MAP: Record<string, string> = {\n  scales: '\\u2696\\uFE0F',\n  chart: '\\uD83D\\uDCC8',\n  search: '\\uD83D\\uDD0D',\n  document: '\\uD83D\\uDCC4',\n  brain: '\\uD83E\\uDDE0',\n  shield: '\\uD83D\\uDEE1\\uFE0F',\n  globe: '\\uD83C\\uDF10',\n  robot: '\\uD83E\\uDD16',\n}\n\n/**\n * Status styling. The record stays module-level, but it carries a\n * `labelKey` rather than English: the label is resolved from\n * `useMCPUIStrings()` at render time so a host provider can localize it.\n */\ntype AgentStatusLabelKey =\n  | 'agentStatusIdle'\n  | 'agentStatusRunning'\n  | 'agentStatusWaiting'\n  | 'agentStatusDone'\n  | 'agentStatusError'\n\nconst STATUS_CONFIG: Record<\n  string,\n  { labelKey: AgentStatusLabelKey; color: string; pulse: boolean }\n> = {\n  idle: { labelKey: 'agentStatusIdle', color: 'bg-gray-400', pulse: false },\n  running: { labelKey: 'agentStatusRunning', color: 'bg-blue-500', pulse: true },\n  waiting: { labelKey: 'agentStatusWaiting', color: 'bg-amber-500', pulse: true },\n  done: { labelKey: 'agentStatusDone', color: 'bg-green-500', pulse: false },\n  error: { labelKey: 'agentStatusError', color: 'bg-red-500', pulse: false },\n}\n\nexport function AgentCard(props: AgentCardProps) {\n  const strings = useMCPUIStrings()\n  const c = () => props.content\n  const status = () => STATUS_CONFIG[c().status] || STATUS_CONFIG.idle\n  const avatar = () => AVATAR_MAP[c().avatar || ''] || c().avatar || '\\uD83E\\uDD16'\n\n  if (typeof console !== 'undefined') {\n    console.info('[MCP-UI:AgentCard] mounted', {\n      agentId: c().agentId, status: c().status, capabilities: c().capabilities,\n    })\n  }\n\n  return (\n    <div class=\"flex items-start gap-3 p-3 rounded-lg bg-gradient-to-r from-gray-50 to-transparent dark:from-gray-800/50\">\n      {/* Avatar */}\n      <div class=\"flex-shrink-0 w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-xl\">\n        {avatar()}\n      </div>\n\n      {/* Info */}\n      <div class=\"flex-1 min-w-0\">\n        <div class=\"flex items-center gap-2\">\n          <span class=\"font-medium text-sm text-gray-900 dark:text-white truncate\">{c().name}</span>\n          {/* Status dot */}\n          <span class={`inline-block w-2 h-2 rounded-full ${status().color} ${status().pulse ? 'animate-pulse' : ''}`} title={strings[status().labelKey]} />\n          <span class=\"text-xs text-gray-500 dark:text-gray-400\">{strings[status().labelKey]}</span>\n        </div>\n\n        {/* Model */}\n        <Show when={c().model}>\n          <span class=\"text-xs text-gray-400 dark:text-gray-500\">{c().model}</span>\n        </Show>\n\n        {/* Capabilities */}\n        <Show when={c().capabilities && c().capabilities!.length > 0}>\n          <div class=\"flex flex-wrap gap-1 mt-1.5\">\n            <For each={c().capabilities}>\n              {(cap) => (\n                <span class=\"px-1.5 py-0.5 text-[10px] rounded bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300\">\n                  {cap}\n                </span>\n              )}\n            </For>\n          </div>\n        </Show>\n\n        {/* Current step */}\n        <Show when={c().currentStep && c().status === 'running'}>\n          <div class=\"mt-1.5 flex items-center gap-1.5 text-xs text-blue-600 dark:text-blue-400\">\n            <div class=\"w-3 h-3 border-2 border-blue-500 border-t-transparent rounded-full animate-spin\" />\n            {c().currentStep!.label}\n          </div>\n        </Show>\n      </div>\n    </div>\n  )\n}\n\n/**\n * AgentStatusBadge — compact pulse badge for scratchpad header\n */\nexport interface AgentStatusBadgeProps {\n  agentName: string\n  status: 'idle' | 'running' | 'waiting' | 'done' | 'error'\n}\n\nexport function AgentStatusBadge(props: AgentStatusBadgeProps) {\n  const strings = useMCPUIStrings()\n  const status = () => STATUS_CONFIG[props.status] || STATUS_CONFIG.idle\n\n  return (\n    <span class=\"inline-flex items-center gap-1.5 text-xs\">\n      <span class={`w-2 h-2 rounded-full ${status().color} ${status().pulse ? 'animate-pulse' : ''}`} />\n      <span class=\"text-gray-600 dark:text-gray-300\">{props.agentName}</span>\n      <span class=\"text-gray-400 dark:text-gray-500\">{strings[status().labelKey]}</span>\n    </span>\n  )\n}\n"],"names":["AVATAR_MAP","scales","chart","search","document","brain","shield","globe","robot","STATUS_CONFIG","idle","labelKey","color","pulse","running","waiting","done","error","AgentCard","props","strings","useMCPUIStrings","c","content","status","avatar","console","info","agentId","capabilities","_el$","_$getNextElement","_tmpl$4","_el$2","firstChild","_el$3","nextSibling","_el$4","_el$5","_el$6","_el$7","_el$12","_el$13","_co$2","_$getNextMarker","_el$14","_el$15","_co$3","_el$16","_el$17","_co$4","_$insert","name","_$createComponent","Show","when","model","children","_el$8","_tmpl$","_$memo","length","_el$9","_tmpl$2","For","each","cap","_el$18","_tmpl$5","currentStep","_el$0","_tmpl$3","_el$1","_el$10","_el$11","_co$","label","_$effect","_p$","_v$","_v$2","e","_$className","t","_$setAttribute","undefined","AgentStatusBadge","_el$19","_tmpl$6","_el$20","_el$21","_el$22","agentName"],"mappings":"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"}

package/dist/components/AgentHandoff.cjs

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
 const solidJs = require("solid-js");
+const MCPUIStringsContext = require("../context/MCPUIStringsContext.cjs");
+const formatString = require("../utils/format-string.cjs");
 var _tmpl$ = /* @__PURE__ */ web.template(`<span class="text-[10px] text-gray-500 dark:text-gray-400 text-center">`), _tmpl$2 = /* @__PURE__ */ web.template(`<div class="flex items-center gap-3 p-3 rounded-lg bg-gradient-to-r from-blue-50 via-transparent to-purple-50 dark:from-blue-900/10 dark:via-transparent dark:to-purple-900/10 border border-gray-200 dark:border-gray-700"><div class="flex items-center gap-1.5 flex-shrink-0"><span class=text-lg></span><span class="text-sm font-medium text-gray-700 dark:text-gray-300"></span></div><div class="flex-1 flex flex-col items-center gap-0.5"><div class="flex items-center gap-1 text-gray-400 dark:text-gray-500"><div class="h-px flex-1 bg-gray-300 dark:bg-gray-600 min-w-[20px]"></div><span class=text-xs>&rarr;</span><div class="h-px flex-1 bg-gray-300 dark:bg-gray-600 min-w-[20px]"></div></div><!$><!/></div><div class="flex items-center gap-1.5 flex-shrink-0"><span class=text-lg></span><span class="text-sm font-medium text-gray-700 dark:text-gray-300">`);
 const AVATAR_MAP = {
   scales: "⚖️",
@@ -18,6 +20,7 @@ function getAvatar(key) {
   return AVATAR_MAP[key] || key;
 }
 function AgentHandoff(props) {
+  const strings = MCPUIStringsContext.useMCPUIStrings();
   const c = () => props.content;
   if (typeof console !== "undefined") {
     console.info("[MCP-UI:Handoff] agent transfer", {
@@ -36,7 +39,9 @@ function AgentHandoff(props) {
       },
       get children() {
         var _el$7 = web.getNextElement(_tmpl$);
-        web.insert(_el$7, () => c().summary || `${c().itemCount} items`);
+        web.insert(_el$7, () => c().summary || formatString.formatMCPUIString(strings.handoffItems, {
+          count: c().itemCount ?? 0
+        }));
         return _el$7;
       }
     }), _el$9, _co$);

package/dist/components/AgentHandoff.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AgentHandoff.cjs","sources":["../../src/components/AgentHandoff.tsx"],"sourcesContent":["/**\n * AgentHandoff — visualizes agent-to-agent transfer\n * v4.1.0: AITL sprint — \"Extracteur -> Analyste : 47 entites transmises\"\n *\n * @experimental\n */\n\nimport { Show } from 'solid-js'\nimport type { AgentHandoffContent } from '../types/chat-bus'\n\nexport interface AgentHandoffProps {\n  content: AgentHandoffContent\n}\n\nconst AVATAR_MAP: Record<string, string> = {\n  scales: '\\u2696\\uFE0F', chart: '\\uD83D\\uDCC8', search: '\\uD83D\\uDD0D',\n  document: '\\uD83D\\uDCC4', brain: '\\uD83E\\uDDE0', shield: '\\uD83D\\uDEE1\\uFE0F',\n  globe: '\\uD83C\\uDF10', robot: '\\uD83E\\uDD16',\n}\n\nfunction getAvatar(key?: string): string {\n  if (!key) return '\\uD83E\\uDD16'\n  return AVATAR_MAP[key] || key\n}\n\nexport function AgentHandoff(props: AgentHandoffProps) {\n  const c = () => props.content\n\n  if (typeof console !== 'undefined') {\n    console.info('[MCP-UI:Handoff] agent transfer', {\n      from: c().from.id, to: c().to.id, dataKeys: c().dataKeys,\n    })\n  }\n\n  return (\n    <div class=\"flex items-center gap-3 p-3 rounded-lg bg-gradient-to-r from-blue-50 via-transparent to-purple-50 dark:from-blue-900/10 dark:via-transparent dark:to-purple-900/10 border border-gray-200 dark:border-gray-700\">\n      {/* From agent */}\n      <div class=\"flex items-center gap-1.5 flex-shrink-0\">\n        <span class=\"text-lg\">{getAvatar(c().from.avatar)}</span>\n        <span class=\"text-sm font-medium text-gray-700 dark:text-gray-300\">{c().from.name}</span>\n      </div>\n\n      {/* Arrow + data */}\n      <div class=\"flex-1 flex flex-col items-center gap-0.5\">\n        <div class=\"flex items-center gap-1 text-gray-400 dark:text-gray-500\">\n          <div class=\"h-px flex-1 bg-gray-300 dark:bg-gray-600 min-w-[20px]\" />\n          <span class=\"text-xs\">&rarr;</span>\n          <div class=\"h-px flex-1 bg-gray-300 dark:bg-gray-600 min-w-[20px]\" />\n        </div>\n        <Show when={c().summary || c().itemCount}>\n          <span class=\"text-[10px] text-gray-500 dark:text-gray-400 text-center\">\n            {c().summary || `${c().itemCount} items`}\n          </span>\n        </Show>\n      </div>\n\n      {/* To agent */}\n      <div class=\"flex items-center gap-1.5 flex-shrink-0\">\n        <span class=\"text-lg\">{getAvatar(c().to.avatar)}</span>\n        <span class=\"text-sm font-medium text-gray-700 dark:text-gray-300\">{c().to.name}</span>\n      </div>\n    </div>\n  )\n}\n"],"names":["AVATAR_MAP","scales","chart","search","document","brain","shield","globe","robot","getAvatar","key","AgentHandoff","props","c","content","console","info","from","id","to","dataKeys","_el$","_$getNextElement","_tmpl$2","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_el$8","_el$9","_co$","_$getNextMarker","_el$0","_el$1","_el$10","_$insert","avatar","name","_$createComponent","Show","when","summary","itemCount","children","_el$7","_tmpl$"],"mappings":";;;;;AAcA,MAAMA,aAAqC;AAAA,EACzCC,QAAQ;AAAA,EAAgBC,OAAO;AAAA,EAAgBC,QAAQ;AAAA,EACvDC,UAAU;AAAA,EAAgBC,OAAO;AAAA,EAAgBC,QAAQ;AAAA,EACzDC,OAAO;AAAA,EAAgBC,OAAO;AAChC;AAEA,SAASC,UAAUC,KAAsB;AACvC,MAAI,CAACA,IAAK,QAAO;AACjB,SAAOV,WAAWU,GAAG,KAAKA;AAC5B;AAEO,SAASC,aAAaC,OAA0B;AACrD,QAAMC,IAAIA,MAAMD,MAAME;AAEtB,MAAI,OAAOC,YAAY,aAAa;AAClCA,YAAQC,KAAK,mCAAmC;AAAA,MAC9CC,MAAMJ,IAAII,KAAKC;AAAAA,MAAIC,IAAIN,IAAIM,GAAGD;AAAAA,MAAIE,UAAUP,IAAIO;AAAAA,IAAAA,CACjD;AAAA,EACH;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,IAAAA,eAAAC,OAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE,aAAAC,QAAAL,MAAAI,aAAAE,QAAAD,MAAAJ,YAAAM,QAAAD,MAAAF,aAAA,CAAAI,OAAAC,IAAA,IAAAC,IAAAA,cAAAH,MAAAH,WAAA,GAAAO,QAAAN,MAAAD,aAAAQ,QAAAD,MAAAV,YAAAY,SAAAD,MAAAR;AAAAU,QAAAA,OAAAZ,OAAA,MAI6BjB,UAAUI,IAAII,KAAKsB,MAAM,CAAC;AAAAD,QAAAA,OAAAX,OAAA,MACmBd,EAAAA,EAAII,KAAKuB,IAAI;AAAAF,eAAAT,OAAAY,IAAAA,gBAUhFC,cAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE9B,EAAAA,EAAI+B,WAAW/B,EAAAA,EAAIgC;AAAAA,MAAS;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,QAAAzB,IAAAA,eAAA0B,MAAA;AAAAV,mBAAAS,OAAA,MAEnClC,IAAI+B,WAAW,GAAG/B,EAAAA,EAAIgC,SAAS,QAAQ;AAAA,eAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAf,OAAAC,IAAA;AAAAK,QAAAA,OAAAF,OAAA,MAOrB3B,UAAUI,IAAIM,GAAGoB,MAAM,CAAC;AAAAD,QAAAA,OAAAD,QAAA,MACqBxB,EAAAA,EAAIM,GAAGqB,IAAI;AAAA,WAAAnB;AAAAA,EAAA,GAAA;AAIvF;;"}
+{"version":3,"file":"AgentHandoff.cjs","sources":["../../src/components/AgentHandoff.tsx"],"sourcesContent":["/**\n * AgentHandoff — visualizes agent-to-agent transfer\n * v4.1.0: AITL sprint — \"Extracteur -> Analyste : 47 entites transmises\"\n *\n * @experimental\n */\n\nimport { Show } from 'solid-js'\nimport type { AgentHandoffContent } from '../types/chat-bus'\nimport { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'\n\nexport interface AgentHandoffProps {\n  content: AgentHandoffContent\n}\n\nconst AVATAR_MAP: Record<string, string> = {\n  scales: '\\u2696\\uFE0F', chart: '\\uD83D\\uDCC8', search: '\\uD83D\\uDD0D',\n  document: '\\uD83D\\uDCC4', brain: '\\uD83E\\uDDE0', shield: '\\uD83D\\uDEE1\\uFE0F',\n  globe: '\\uD83C\\uDF10', robot: '\\uD83E\\uDD16',\n}\n\nfunction getAvatar(key?: string): string {\n  if (!key) return '\\uD83E\\uDD16'\n  return AVATAR_MAP[key] || key\n}\n\nexport function AgentHandoff(props: AgentHandoffProps) {\n  const strings = useMCPUIStrings()\n  const c = () => props.content\n\n  if (typeof console !== 'undefined') {\n    console.info('[MCP-UI:Handoff] agent transfer', {\n      from: c().from.id, to: c().to.id, dataKeys: c().dataKeys,\n    })\n  }\n\n  return (\n    <div class=\"flex items-center gap-3 p-3 rounded-lg bg-gradient-to-r from-blue-50 via-transparent to-purple-50 dark:from-blue-900/10 dark:via-transparent dark:to-purple-900/10 border border-gray-200 dark:border-gray-700\">\n      {/* From agent */}\n      <div class=\"flex items-center gap-1.5 flex-shrink-0\">\n        <span class=\"text-lg\">{getAvatar(c().from.avatar)}</span>\n        <span class=\"text-sm font-medium text-gray-700 dark:text-gray-300\">{c().from.name}</span>\n      </div>\n\n      {/* Arrow + data */}\n      <div class=\"flex-1 flex flex-col items-center gap-0.5\">\n        <div class=\"flex items-center gap-1 text-gray-400 dark:text-gray-500\">\n          <div class=\"h-px flex-1 bg-gray-300 dark:bg-gray-600 min-w-[20px]\" />\n          <span class=\"text-xs\">&rarr;</span>\n          <div class=\"h-px flex-1 bg-gray-300 dark:bg-gray-600 min-w-[20px]\" />\n        </div>\n        <Show when={c().summary || c().itemCount}>\n          <span class=\"text-[10px] text-gray-500 dark:text-gray-400 text-center\">\n            {c().summary ||\n              formatMCPUIString(strings.handoffItems, { count: c().itemCount ?? 0 })}\n          </span>\n        </Show>\n      </div>\n\n      {/* To agent */}\n      <div class=\"flex items-center gap-1.5 flex-shrink-0\">\n        <span class=\"text-lg\">{getAvatar(c().to.avatar)}</span>\n        <span class=\"text-sm font-medium text-gray-700 dark:text-gray-300\">{c().to.name}</span>\n      </div>\n    </div>\n  )\n}\n"],"names":["AVATAR_MAP","scales","chart","search","document","brain","shield","globe","robot","getAvatar","key","AgentHandoff","props","strings","useMCPUIStrings","c","content","console","info","from","id","to","dataKeys","_el$","_$getNextElement","_tmpl$2","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_el$8","_el$9","_co$","_$getNextMarker","_el$0","_el$1","_el$10","_$insert","avatar","name","_$createComponent","Show","when","summary","itemCount","children","_el$7","_tmpl$","formatMCPUIString","handoffItems","count"],"mappings":";;;;;;;AAeA,MAAMA,aAAqC;AAAA,EACzCC,QAAQ;AAAA,EAAgBC,OAAO;AAAA,EAAgBC,QAAQ;AAAA,EACvDC,UAAU;AAAA,EAAgBC,OAAO;AAAA,EAAgBC,QAAQ;AAAA,EACzDC,OAAO;AAAA,EAAgBC,OAAO;AAChC;AAEA,SAASC,UAAUC,KAAsB;AACvC,MAAI,CAACA,IAAK,QAAO;AACjB,SAAOV,WAAWU,GAAG,KAAKA;AAC5B;AAEO,SAASC,aAAaC,OAA0B;AACrD,QAAMC,UAAUC,oBAAAA,gBAAAA;AAChB,QAAMC,IAAIA,MAAMH,MAAMI;AAEtB,MAAI,OAAOC,YAAY,aAAa;AAClCA,YAAQC,KAAK,mCAAmC;AAAA,MAC9CC,MAAMJ,IAAII,KAAKC;AAAAA,MAAIC,IAAIN,IAAIM,GAAGD;AAAAA,MAAIE,UAAUP,IAAIO;AAAAA,IAAAA,CACjD;AAAA,EACH;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,IAAAA,eAAAC,OAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE,aAAAC,QAAAL,MAAAI,aAAAE,QAAAD,MAAAJ,YAAAM,QAAAD,MAAAF,aAAA,CAAAI,OAAAC,IAAA,IAAAC,IAAAA,cAAAH,MAAAH,WAAA,GAAAO,QAAAN,MAAAD,aAAAQ,QAAAD,MAAAV,YAAAY,SAAAD,MAAAR;AAAAU,QAAAA,OAAAZ,OAAA,MAI6BnB,UAAUM,IAAII,KAAKsB,MAAM,CAAC;AAAAD,QAAAA,OAAAX,OAAA,MACmBd,EAAAA,EAAII,KAAKuB,IAAI;AAAAF,eAAAT,OAAAY,IAAAA,gBAUhFC,cAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE9B,EAAAA,EAAI+B,WAAW/B,EAAAA,EAAIgC;AAAAA,MAAS;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,QAAAzB,IAAAA,eAAA0B,MAAA;AAAAV,YAAAA,OAAAS,OAAA,MAEnClC,EAAAA,EAAI+B,WACHK,aAAAA,kBAAkBtC,QAAQuC,cAAc;AAAA,UAAEC,OAAOtC,EAAAA,EAAIgC,aAAa;AAAA,QAAA,CAAG,CAAC;AAAA,eAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAf,OAAAC,IAAA;AAAAK,QAAAA,OAAAF,OAAA,MAOrD7B,UAAUM,IAAIM,GAAGoB,MAAM,CAAC;AAAAD,QAAAA,OAAAD,QAAA,MACqBxB,EAAAA,EAAIM,GAAGqB,IAAI;AAAA,WAAAnB;AAAAA,EAAA,GAAA;AAIvF;;"}

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

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

package/dist/components/AgentHandoff.js

@@ -1,5 +1,7 @@
 import { getNextElement, getNextMarker, insert, createComponent, template } from "solid-js/web";
 import { Show } from "solid-js";
+import { useMCPUIStrings } from "../context/MCPUIStringsContext.js";
+import { formatMCPUIString } from "../utils/format-string.js";
 var _tmpl$ = /* @__PURE__ */ template(`<span class="text-[10px] text-gray-500 dark:text-gray-400 text-center">`), _tmpl$2 = /* @__PURE__ */ template(`<div class="flex items-center gap-3 p-3 rounded-lg bg-gradient-to-r from-blue-50 via-transparent to-purple-50 dark:from-blue-900/10 dark:via-transparent dark:to-purple-900/10 border border-gray-200 dark:border-gray-700"><div class="flex items-center gap-1.5 flex-shrink-0"><span class=text-lg></span><span class="text-sm font-medium text-gray-700 dark:text-gray-300"></span></div><div class="flex-1 flex flex-col items-center gap-0.5"><div class="flex items-center gap-1 text-gray-400 dark:text-gray-500"><div class="h-px flex-1 bg-gray-300 dark:bg-gray-600 min-w-[20px]"></div><span class=text-xs>&rarr;</span><div class="h-px flex-1 bg-gray-300 dark:bg-gray-600 min-w-[20px]"></div></div><!$><!/></div><div class="flex items-center gap-1.5 flex-shrink-0"><span class=text-lg></span><span class="text-sm font-medium text-gray-700 dark:text-gray-300">`);
 const AVATAR_MAP = {
   scales: "⚖️",
@@ -16,6 +18,7 @@ function getAvatar(key) {
   return AVATAR_MAP[key] || key;
 }
 function AgentHandoff(props) {
+  const strings = useMCPUIStrings();
   const c = () => props.content;
   if (typeof console !== "undefined") {
     console.info("[MCP-UI:Handoff] agent transfer", {
@@ -34,7 +37,9 @@ function AgentHandoff(props) {
       },
       get children() {
         var _el$7 = getNextElement(_tmpl$);
-        insert(_el$7, () => c().summary || `${c().itemCount} items`);
+        insert(_el$7, () => c().summary || formatMCPUIString(strings.handoffItems, {
+          count: c().itemCount ?? 0
+        }));
         return _el$7;
       }
     }), _el$9, _co$);

package/dist/components/AgentHandoff.js.map

@@ -1 +1 @@
-{"version":3,"file":"AgentHandoff.js","sources":["../../src/components/AgentHandoff.tsx"],"sourcesContent":["/**\n * AgentHandoff — visualizes agent-to-agent transfer\n * v4.1.0: AITL sprint — \"Extracteur -> Analyste : 47 entites transmises\"\n *\n * @experimental\n */\n\nimport { Show } from 'solid-js'\nimport type { AgentHandoffContent } from '../types/chat-bus'\n\nexport interface AgentHandoffProps {\n  content: AgentHandoffContent\n}\n\nconst AVATAR_MAP: Record<string, string> = {\n  scales: '\\u2696\\uFE0F', chart: '\\uD83D\\uDCC8', search: '\\uD83D\\uDD0D',\n  document: '\\uD83D\\uDCC4', brain: '\\uD83E\\uDDE0', shield: '\\uD83D\\uDEE1\\uFE0F',\n  globe: '\\uD83C\\uDF10', robot: '\\uD83E\\uDD16',\n}\n\nfunction getAvatar(key?: string): string {\n  if (!key) return '\\uD83E\\uDD16'\n  return AVATAR_MAP[key] || key\n}\n\nexport function AgentHandoff(props: AgentHandoffProps) {\n  const c = () => props.content\n\n  if (typeof console !== 'undefined') {\n    console.info('[MCP-UI:Handoff] agent transfer', {\n      from: c().from.id, to: c().to.id, dataKeys: c().dataKeys,\n    })\n  }\n\n  return (\n    <div class=\"flex items-center gap-3 p-3 rounded-lg bg-gradient-to-r from-blue-50 via-transparent to-purple-50 dark:from-blue-900/10 dark:via-transparent dark:to-purple-900/10 border border-gray-200 dark:border-gray-700\">\n      {/* From agent */}\n      <div class=\"flex items-center gap-1.5 flex-shrink-0\">\n        <span class=\"text-lg\">{getAvatar(c().from.avatar)}</span>\n        <span class=\"text-sm font-medium text-gray-700 dark:text-gray-300\">{c().from.name}</span>\n      </div>\n\n      {/* Arrow + data */}\n      <div class=\"flex-1 flex flex-col items-center gap-0.5\">\n        <div class=\"flex items-center gap-1 text-gray-400 dark:text-gray-500\">\n          <div class=\"h-px flex-1 bg-gray-300 dark:bg-gray-600 min-w-[20px]\" />\n          <span class=\"text-xs\">&rarr;</span>\n          <div class=\"h-px flex-1 bg-gray-300 dark:bg-gray-600 min-w-[20px]\" />\n        </div>\n        <Show when={c().summary || c().itemCount}>\n          <span class=\"text-[10px] text-gray-500 dark:text-gray-400 text-center\">\n            {c().summary || `${c().itemCount} items`}\n          </span>\n        </Show>\n      </div>\n\n      {/* To agent */}\n      <div class=\"flex items-center gap-1.5 flex-shrink-0\">\n        <span class=\"text-lg\">{getAvatar(c().to.avatar)}</span>\n        <span class=\"text-sm font-medium text-gray-700 dark:text-gray-300\">{c().to.name}</span>\n      </div>\n    </div>\n  )\n}\n"],"names":["AVATAR_MAP","scales","chart","search","document","brain","shield","globe","robot","getAvatar","key","AgentHandoff","props","c","content","console","info","from","id","to","dataKeys","_el$","_$getNextElement","_tmpl$2","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_el$8","_el$9","_co$","_$getNextMarker","_el$0","_el$1","_el$10","_$insert","avatar","name","_$createComponent","Show","when","summary","itemCount","children","_el$7","_tmpl$"],"mappings":";;;AAcA,MAAMA,aAAqC;AAAA,EACzCC,QAAQ;AAAA,EAAgBC,OAAO;AAAA,EAAgBC,QAAQ;AAAA,EACvDC,UAAU;AAAA,EAAgBC,OAAO;AAAA,EAAgBC,QAAQ;AAAA,EACzDC,OAAO;AAAA,EAAgBC,OAAO;AAChC;AAEA,SAASC,UAAUC,KAAsB;AACvC,MAAI,CAACA,IAAK,QAAO;AACjB,SAAOV,WAAWU,GAAG,KAAKA;AAC5B;AAEO,SAASC,aAAaC,OAA0B;AACrD,QAAMC,IAAIA,MAAMD,MAAME;AAEtB,MAAI,OAAOC,YAAY,aAAa;AAClCA,YAAQC,KAAK,mCAAmC;AAAA,MAC9CC,MAAMJ,IAAII,KAAKC;AAAAA,MAAIC,IAAIN,IAAIM,GAAGD;AAAAA,MAAIE,UAAUP,IAAIO;AAAAA,IAAAA,CACjD;AAAA,EACH;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,eAAAC,OAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE,aAAAC,QAAAL,MAAAI,aAAAE,QAAAD,MAAAJ,YAAAM,QAAAD,MAAAF,aAAA,CAAAI,OAAAC,IAAA,IAAAC,cAAAH,MAAAH,WAAA,GAAAO,QAAAN,MAAAD,aAAAQ,QAAAD,MAAAV,YAAAY,SAAAD,MAAAR;AAAAU,WAAAZ,OAAA,MAI6BjB,UAAUI,IAAII,KAAKsB,MAAM,CAAC;AAAAD,WAAAX,OAAA,MACmBd,EAAAA,EAAII,KAAKuB,IAAI;AAAAF,WAAAT,OAAAY,gBAUhFC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE9B,EAAAA,EAAI+B,WAAW/B,EAAAA,EAAIgC;AAAAA,MAAS;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,QAAAzB,eAAA0B,MAAA;AAAAV,eAAAS,OAAA,MAEnClC,IAAI+B,WAAW,GAAG/B,EAAAA,EAAIgC,SAAS,QAAQ;AAAA,eAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAf,OAAAC,IAAA;AAAAK,WAAAF,OAAA,MAOrB3B,UAAUI,IAAIM,GAAGoB,MAAM,CAAC;AAAAD,WAAAD,QAAA,MACqBxB,EAAAA,EAAIM,GAAGqB,IAAI;AAAA,WAAAnB;AAAAA,EAAA,GAAA;AAIvF;"}
+{"version":3,"file":"AgentHandoff.js","sources":["../../src/components/AgentHandoff.tsx"],"sourcesContent":["/**\n * AgentHandoff — visualizes agent-to-agent transfer\n * v4.1.0: AITL sprint — \"Extracteur -> Analyste : 47 entites transmises\"\n *\n * @experimental\n */\n\nimport { Show } from 'solid-js'\nimport type { AgentHandoffContent } from '../types/chat-bus'\nimport { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'\n\nexport interface AgentHandoffProps {\n  content: AgentHandoffContent\n}\n\nconst AVATAR_MAP: Record<string, string> = {\n  scales: '\\u2696\\uFE0F', chart: '\\uD83D\\uDCC8', search: '\\uD83D\\uDD0D',\n  document: '\\uD83D\\uDCC4', brain: '\\uD83E\\uDDE0', shield: '\\uD83D\\uDEE1\\uFE0F',\n  globe: '\\uD83C\\uDF10', robot: '\\uD83E\\uDD16',\n}\n\nfunction getAvatar(key?: string): string {\n  if (!key) return '\\uD83E\\uDD16'\n  return AVATAR_MAP[key] || key\n}\n\nexport function AgentHandoff(props: AgentHandoffProps) {\n  const strings = useMCPUIStrings()\n  const c = () => props.content\n\n  if (typeof console !== 'undefined') {\n    console.info('[MCP-UI:Handoff] agent transfer', {\n      from: c().from.id, to: c().to.id, dataKeys: c().dataKeys,\n    })\n  }\n\n  return (\n    <div class=\"flex items-center gap-3 p-3 rounded-lg bg-gradient-to-r from-blue-50 via-transparent to-purple-50 dark:from-blue-900/10 dark:via-transparent dark:to-purple-900/10 border border-gray-200 dark:border-gray-700\">\n      {/* From agent */}\n      <div class=\"flex items-center gap-1.5 flex-shrink-0\">\n        <span class=\"text-lg\">{getAvatar(c().from.avatar)}</span>\n        <span class=\"text-sm font-medium text-gray-700 dark:text-gray-300\">{c().from.name}</span>\n      </div>\n\n      {/* Arrow + data */}\n      <div class=\"flex-1 flex flex-col items-center gap-0.5\">\n        <div class=\"flex items-center gap-1 text-gray-400 dark:text-gray-500\">\n          <div class=\"h-px flex-1 bg-gray-300 dark:bg-gray-600 min-w-[20px]\" />\n          <span class=\"text-xs\">&rarr;</span>\n          <div class=\"h-px flex-1 bg-gray-300 dark:bg-gray-600 min-w-[20px]\" />\n        </div>\n        <Show when={c().summary || c().itemCount}>\n          <span class=\"text-[10px] text-gray-500 dark:text-gray-400 text-center\">\n            {c().summary ||\n              formatMCPUIString(strings.handoffItems, { count: c().itemCount ?? 0 })}\n          </span>\n        </Show>\n      </div>\n\n      {/* To agent */}\n      <div class=\"flex items-center gap-1.5 flex-shrink-0\">\n        <span class=\"text-lg\">{getAvatar(c().to.avatar)}</span>\n        <span class=\"text-sm font-medium text-gray-700 dark:text-gray-300\">{c().to.name}</span>\n      </div>\n    </div>\n  )\n}\n"],"names":["AVATAR_MAP","scales","chart","search","document","brain","shield","globe","robot","getAvatar","key","AgentHandoff","props","strings","useMCPUIStrings","c","content","console","info","from","id","to","dataKeys","_el$","_$getNextElement","_tmpl$2","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_el$8","_el$9","_co$","_$getNextMarker","_el$0","_el$1","_el$10","_$insert","avatar","name","_$createComponent","Show","when","summary","itemCount","children","_el$7","_tmpl$","formatMCPUIString","handoffItems","count"],"mappings":";;;;;AAeA,MAAMA,aAAqC;AAAA,EACzCC,QAAQ;AAAA,EAAgBC,OAAO;AAAA,EAAgBC,QAAQ;AAAA,EACvDC,UAAU;AAAA,EAAgBC,OAAO;AAAA,EAAgBC,QAAQ;AAAA,EACzDC,OAAO;AAAA,EAAgBC,OAAO;AAChC;AAEA,SAASC,UAAUC,KAAsB;AACvC,MAAI,CAACA,IAAK,QAAO;AACjB,SAAOV,WAAWU,GAAG,KAAKA;AAC5B;AAEO,SAASC,aAAaC,OAA0B;AACrD,QAAMC,UAAUC,gBAAAA;AAChB,QAAMC,IAAIA,MAAMH,MAAMI;AAEtB,MAAI,OAAOC,YAAY,aAAa;AAClCA,YAAQC,KAAK,mCAAmC;AAAA,MAC9CC,MAAMJ,IAAII,KAAKC;AAAAA,MAAIC,IAAIN,IAAIM,GAAGD;AAAAA,MAAIE,UAAUP,IAAIO;AAAAA,IAAAA,CACjD;AAAA,EACH;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,eAAAC,OAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE,aAAAC,QAAAL,MAAAI,aAAAE,QAAAD,MAAAJ,YAAAM,QAAAD,MAAAF,aAAA,CAAAI,OAAAC,IAAA,IAAAC,cAAAH,MAAAH,WAAA,GAAAO,QAAAN,MAAAD,aAAAQ,QAAAD,MAAAV,YAAAY,SAAAD,MAAAR;AAAAU,WAAAZ,OAAA,MAI6BnB,UAAUM,IAAII,KAAKsB,MAAM,CAAC;AAAAD,WAAAX,OAAA,MACmBd,EAAAA,EAAII,KAAKuB,IAAI;AAAAF,WAAAT,OAAAY,gBAUhFC,MAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE9B,EAAAA,EAAI+B,WAAW/B,EAAAA,EAAIgC;AAAAA,MAAS;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAC,QAAAzB,eAAA0B,MAAA;AAAAV,eAAAS,OAAA,MAEnClC,EAAAA,EAAI+B,WACHK,kBAAkBtC,QAAQuC,cAAc;AAAA,UAAEC,OAAOtC,EAAAA,EAAIgC,aAAa;AAAA,QAAA,CAAG,CAAC;AAAA,eAAAE;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAf,OAAAC,IAAA;AAAAK,WAAAF,OAAA,MAOrD7B,UAAUM,IAAIM,GAAGoB,MAAM,CAAC;AAAAD,WAAAD,QAAA,MACqBxB,EAAAA,EAAIM,GAAGqB,IAAI;AAAA,WAAAnB;AAAAA,EAAA,GAAA;AAIvF;"}

package/dist/components/ArtifactRenderer.cjs

@@ -2,8 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
 const safeUrl = require("../utils/safe-url.cjs");
-var _tmpl$ = /* @__PURE__ */ web.template(`<div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"><div class="flex items-center gap-3"><div class="w-10 h-10 flex items-center justify-center bg-white dark:bg-gray-700 rounded-md shadow-sm text-xl"></div><div><h4 class="text-sm font-medium text-gray-900 dark:text-white truncate max-w-[200px]"></h4><p class="text-xs text-gray-500 dark:text-gray-400"><!$><!/> • <!$><!/></p></div></div><a class="px-3 py-1.5 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/40 rounded-md transition-colors flex items-center gap-1"><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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>Download`);
+const MCPUIStringsContext = require("../context/MCPUIStringsContext.cjs");
+const formatString = require("../utils/format-string.cjs");
+var _tmpl$ = /* @__PURE__ */ web.template(`<div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"><div class="flex items-center gap-3"><div class="w-10 h-10 flex items-center justify-center bg-white dark:bg-gray-700 rounded-md shadow-sm text-xl"></div><div><h4 class="text-sm font-medium text-gray-900 dark:text-white truncate max-w-[200px]"></h4><p class="text-xs text-gray-500 dark:text-gray-400"><!$><!/> • <!$><!/></p></div></div><a class="px-3 py-1.5 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/40 rounded-md transition-colors flex items-center gap-1"><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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg><!$><!/>`);
 const ArtifactRenderer = (props) => {
+  const strings = MCPUIStringsContext.useMCPUIStrings();
   const getIcon = () => {
     var _a, _b, _c;
     if ((_a = props.params.mimeType) == null ? void 0 : _a.includes("csv")) return "📊";
@@ -13,16 +16,32 @@ const ArtifactRenderer = (props) => {
   };
   const formatSize = (bytes) => {
     if (!bytes) return "";
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    const oneDecimal = (n) => new Intl.NumberFormat(strings.locale, {
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1,
+      useGrouping: false
+    }).format(n);
+    if (bytes < 1024) {
+      return formatString.formatMCPUIString(strings.sizeBytes, {
+        size: new Intl.NumberFormat(strings.locale, {
+          maximumFractionDigits: 0
+        }).format(bytes)
+      });
+    }
+    if (bytes < 1024 * 1024) return formatString.formatMCPUIString(strings.sizeKilobytes, {
+      size: oneDecimal(bytes / 1024)
+    });
+    return formatString.formatMCPUIString(strings.sizeMegabytes, {
+      size: oneDecimal(bytes / (1024 * 1024))
+    });
   };
   return (() => {
-    var _el$ = web.getNextElement(_tmpl$), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$8 = _el$6.firstChild, [_el$9, _co$] = web.getNextMarker(_el$8.nextSibling), _el$7 = _el$9.nextSibling, _el$0 = _el$7.nextSibling, [_el$1, _co$2] = web.getNextMarker(_el$0.nextSibling), _el$10 = _el$2.nextSibling;
+    var _el$ = web.getNextElement(_tmpl$), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$8 = _el$6.firstChild, [_el$9, _co$] = web.getNextMarker(_el$8.nextSibling), _el$7 = _el$9.nextSibling, _el$0 = _el$7.nextSibling, [_el$1, _co$2] = web.getNextMarker(_el$0.nextSibling), _el$10 = _el$2.nextSibling, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, [_el$13, _co$3] = web.getNextMarker(_el$12.nextSibling);
     web.insert(_el$3, getIcon);
     web.insert(_el$5, () => props.params.filename);
     web.insert(_el$6, () => formatSize(props.params.size), _el$9, _co$);
-    web.insert(_el$6, () => props.params.description || "Generated artifact", _el$1, _co$2);
+    web.insert(_el$6, () => props.params.description || strings.artifactDescription, _el$1, _co$2);
+    web.insert(_el$10, () => strings.download, _el$13, _co$3);
     web.effect((_p$) => {
       var _v$ = safeUrl.safeUrl(props.params.url), _v$2 = props.params.filename;
       _v$ !== _p$.e && web.setAttribute(_el$10, "href", _p$.e = _v$);

package/dist/components/ArtifactRenderer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ArtifactRenderer.cjs","sources":["../../src/components/ArtifactRenderer.tsx"],"sourcesContent":["import { Component } from 'solid-js'\nimport { safeUrl } from '../utils/safe-url'\n\nexport interface ArtifactComponentParams {\n    url: string\n    filename: string\n    mimeType: string\n    size?: number\n    description?: string\n}\n\nexport const ArtifactRenderer: Component<{ params: ArtifactComponentParams }> = (props) => {\n    const getIcon = () => {\n        if (props.params.mimeType?.includes('csv')) return '📊'\n        if (props.params.mimeType?.includes('json')) return '{}'\n        if (props.params.mimeType?.includes('pdf')) return '📄'\n        return '📁'\n    }\n\n    const formatSize = (bytes?: number) => {\n        if (!bytes) return ''\n        if (bytes < 1024) return `${bytes} B`\n        if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`\n        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n    }\n\n    return (\n        <div class=\"flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors\">\n            <div class=\"flex items-center gap-3\">\n                <div class=\"w-10 h-10 flex items-center justify-center bg-white dark:bg-gray-700 rounded-md shadow-sm text-xl\">\n                    {getIcon()}\n                </div>\n                <div>\n                    <h4 class=\"text-sm font-medium text-gray-900 dark:text-white truncate max-w-[200px]\">\n                        {props.params.filename}\n                    </h4>\n                    <p class=\"text-xs text-gray-500 dark:text-gray-400\">\n                        {formatSize(props.params.size)} • {props.params.description || 'Generated artifact'}\n                    </p>\n                </div>\n            </div>\n\n            <a\n                href={safeUrl(props.params.url)}\n                download={props.params.filename}\n                class=\"px-3 py-1.5 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/40 rounded-md transition-colors flex items-center gap-1\"\n            >\n                <svg class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" />\n                </svg>\n                Download\n            </a>\n        </div>\n    )\n}\n"],"names":["ArtifactRenderer","props","getIcon","params","mimeType","includes","formatSize","bytes","toFixed","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_el$8","_el$9","_co$","_$getNextMarker","_el$7","_el$0","_el$1","_co$2","_el$10","_$insert","filename","size","description","_$effect","_p$","_v$","safeUrl","url","_v$2","e","_$setAttribute","t","undefined"],"mappings":";;;;;AAWO,MAAMA,mBAAoEC,CAAAA,UAAU;AACvF,QAAMC,UAAUA,MAAM;;AAClB,SAAID,WAAME,OAAOC,aAAbH,mBAAuBI,SAAS,OAAQ,QAAO;AACnD,SAAIJ,WAAME,OAAOC,aAAbH,mBAAuBI,SAAS,QAAS,QAAO;AACpD,SAAIJ,WAAME,OAAOC,aAAbH,mBAAuBI,SAAS,OAAQ,QAAO;AACnD,WAAO;AAAA,EACX;AAEA,QAAMC,aAAaA,CAACC,UAAmB;AACnC,QAAI,CAACA,MAAO,QAAO;AACnB,QAAIA,QAAQ,KAAM,QAAO,GAAGA,KAAK;AACjC,QAAIA,QAAQ,OAAO,KAAM,QAAO,IAAIA,QAAQ,MAAMC,QAAQ,CAAC,CAAC;AAC5D,WAAO,IAAID,SAAS,OAAO,OAAOC,QAAQ,CAAC,CAAC;AAAA,EAChD;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,mBAAAC,MAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE,aAAAC,QAAAF,MAAAF,YAAAK,QAAAD,MAAAD,aAAAG,QAAAD,MAAAL,YAAA,CAAAO,OAAAC,IAAA,IAAAC,IAAAA,cAAAH,MAAAH,WAAA,GAAAO,QAAAH,MAAAJ,aAAAQ,QAAAD,MAAAP,aAAA,CAAAS,OAAAC,KAAA,IAAAJ,IAAAA,cAAAE,MAAAR,WAAA,GAAAW,SAAAf,MAAAI;AAAAY,QAAAA,OAAAd,OAIiBZ,OAAO;AAAA0B,QAAAA,OAAAX,OAAA,MAIHhB,MAAME,OAAO0B,QAAQ;AAAAD,eAAAV,OAAA,MAGrBZ,WAAWL,MAAME,OAAO2B,IAAI,GAACV,OAAAC,IAAA;AAAAO,eAAAV,OAAA,MAAKjB,MAAME,OAAO4B,eAAe,sBAAoBN,OAAAC,KAAA;AAAAM,QAAAA,OAAAC,CAAAA,QAAA;AAAA,UAAAC,MAMrFC,gBAAQlC,MAAME,OAAOiC,GAAG,GAACC,OACrBpC,MAAME,OAAO0B;AAAQK,cAAAD,IAAAK,KAAAC,IAAAA,aAAAZ,QAAA,QAAAM,IAAAK,IAAAJ,GAAA;AAAAG,eAAAJ,IAAAO,KAAAD,IAAAA,aAAAZ,QAAA,YAAAM,IAAAO,IAAAH,IAAA;AAAA,aAAAJ;AAAAA,IAAA,GAAA;AAAA,MAAAK,GAAAG;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAAhC;AAAAA,EAAA,GAAA;AAU/C;;"}
+{"version":3,"file":"ArtifactRenderer.cjs","sources":["../../src/components/ArtifactRenderer.tsx"],"sourcesContent":["import { Component } from 'solid-js'\nimport { safeUrl } from '../utils/safe-url'\nimport { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'\n\nexport interface ArtifactComponentParams {\n    url: string\n    filename: string\n    mimeType: string\n    size?: number\n    description?: string\n}\n\nexport const ArtifactRenderer: Component<{ params: ArtifactComponentParams }> = (props) => {\n    const strings = useMCPUIStrings()\n    const getIcon = () => {\n        if (props.params.mimeType?.includes('csv')) return '📊'\n        if (props.params.mimeType?.includes('json')) return '{}'\n        if (props.params.mimeType?.includes('pdf')) return '📄'\n        return '📁'\n    }\n\n    const formatSize = (bytes?: number) => {\n        if (!bytes) return ''\n        const oneDecimal = (n: number) =>\n            new Intl.NumberFormat(strings.locale, {\n                minimumFractionDigits: 1,\n                maximumFractionDigits: 1,\n                useGrouping: false,\n            }).format(n)\n        if (bytes < 1024) {\n            return formatMCPUIString(strings.sizeBytes, {\n                size: new Intl.NumberFormat(strings.locale, { maximumFractionDigits: 0 }).format(bytes),\n            })\n        }\n        if (bytes < 1024 * 1024) return formatMCPUIString(strings.sizeKilobytes, { size: oneDecimal(bytes / 1024) })\n        return formatMCPUIString(strings.sizeMegabytes, { size: oneDecimal(bytes / (1024 * 1024)) })\n    }\n\n    return (\n        <div class=\"flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors\">\n            <div class=\"flex items-center gap-3\">\n                <div class=\"w-10 h-10 flex items-center justify-center bg-white dark:bg-gray-700 rounded-md shadow-sm text-xl\">\n                    {getIcon()}\n                </div>\n                <div>\n                    <h4 class=\"text-sm font-medium text-gray-900 dark:text-white truncate max-w-[200px]\">\n                        {props.params.filename}\n                    </h4>\n                    <p class=\"text-xs text-gray-500 dark:text-gray-400\">\n                        {formatSize(props.params.size)} • {props.params.description || strings.artifactDescription}\n                    </p>\n                </div>\n            </div>\n\n            <a\n                href={safeUrl(props.params.url)}\n                download={props.params.filename}\n                class=\"px-3 py-1.5 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/40 rounded-md transition-colors flex items-center gap-1\"\n            >\n                <svg class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" />\n                </svg>\n                {strings.download}\n            </a>\n        </div>\n    )\n}\n"],"names":["ArtifactRenderer","props","strings","useMCPUIStrings","getIcon","params","mimeType","includes","formatSize","bytes","oneDecimal","n","Intl","NumberFormat","locale","minimumFractionDigits","maximumFractionDigits","useGrouping","format","formatMCPUIString","sizeBytes","size","sizeKilobytes","sizeMegabytes","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_el$8","_el$9","_co$","_$getNextMarker","_el$7","_el$0","_el$1","_co$2","_el$10","_el$11","_el$12","_el$13","_co$3","_$insert","filename","description","artifactDescription","download","_$effect","_p$","_v$","safeUrl","url","_v$2","e","_$setAttribute","t","undefined"],"mappings":";;;;;;;AAYO,MAAMA,mBAAoEC,CAAAA,UAAU;AACvF,QAAMC,UAAUC,oBAAAA,gBAAAA;AAChB,QAAMC,UAAUA,MAAM;;AAClB,SAAIH,WAAMI,OAAOC,aAAbL,mBAAuBM,SAAS,OAAQ,QAAO;AACnD,SAAIN,WAAMI,OAAOC,aAAbL,mBAAuBM,SAAS,QAAS,QAAO;AACpD,SAAIN,WAAMI,OAAOC,aAAbL,mBAAuBM,SAAS,OAAQ,QAAO;AACnD,WAAO;AAAA,EACX;AAEA,QAAMC,aAAaA,CAACC,UAAmB;AACnC,QAAI,CAACA,MAAO,QAAO;AACnB,UAAMC,aAAaA,CAACC,MAChB,IAAIC,KAAKC,aAAaX,QAAQY,QAAQ;AAAA,MAClCC,uBAAuB;AAAA,MACvBC,uBAAuB;AAAA,MACvBC,aAAa;AAAA,IAAA,CAChB,EAAEC,OAAOP,CAAC;AACf,QAAIF,QAAQ,MAAM;AACd,aAAOU,aAAAA,kBAAkBjB,QAAQkB,WAAW;AAAA,QACxCC,MAAM,IAAIT,KAAKC,aAAaX,QAAQY,QAAQ;AAAA,UAAEE,uBAAuB;AAAA,QAAA,CAAG,EAAEE,OAAOT,KAAK;AAAA,MAAA,CACzF;AAAA,IACL;AACA,QAAIA,QAAQ,OAAO,KAAM,QAAOU,aAAAA,kBAAkBjB,QAAQoB,eAAe;AAAA,MAAED,MAAMX,WAAWD,QAAQ,IAAI;AAAA,IAAA,CAAG;AAC3G,WAAOU,aAAAA,kBAAkBjB,QAAQqB,eAAe;AAAA,MAAEF,MAAMX,WAAWD,SAAS,OAAO,KAAK;AAAA,IAAA,CAAG;AAAA,EAC/F;AAEA,UAAA,MAAA;AAAA,QAAAe,OAAAC,IAAAA,eAAAC,MAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE,aAAAC,QAAAF,MAAAF,YAAAK,QAAAD,MAAAD,aAAAG,QAAAD,MAAAL,YAAA,CAAAO,OAAAC,IAAA,IAAAC,IAAAA,cAAAH,MAAAH,WAAA,GAAAO,QAAAH,MAAAJ,aAAAQ,QAAAD,MAAAP,aAAA,CAAAS,OAAAC,KAAA,IAAAJ,IAAAA,cAAAE,MAAAR,WAAA,GAAAW,SAAAf,MAAAI,aAAAY,SAAAD,OAAAd,YAAAgB,SAAAD,OAAAZ,aAAA,CAAAc,QAAAC,KAAA,IAAAT,IAAAA,cAAAO,OAAAb,WAAA;AAAAgB,QAAAA,OAAAlB,OAIiBzB,OAAO;AAAA2C,QAAAA,OAAAf,OAAA,MAIH/B,MAAMI,OAAO2C,QAAQ;AAAAD,eAAAd,OAAA,MAGrBzB,WAAWP,MAAMI,OAAOgB,IAAI,GAACc,OAAAC,IAAA;AAAAW,eAAAd,OAAA,MAAKhC,MAAMI,OAAO4C,eAAe/C,QAAQgD,qBAAmBV,OAAAC,KAAA;AAAAM,QAAAA,OAAAL,QAAA,MAajGxC,QAAQiD,UAAQN,QAAAC,KAAA;AAAAM,QAAAA,OAAAC,CAAAA,QAAA;AAAA,UAAAC,MAPXC,gBAAQtD,MAAMI,OAAOmD,GAAG,GAACC,OACrBxD,MAAMI,OAAO2C;AAAQM,cAAAD,IAAAK,KAAAC,IAAAA,aAAAjB,QAAA,QAAAW,IAAAK,IAAAJ,GAAA;AAAAG,eAAAJ,IAAAO,KAAAD,IAAAA,aAAAjB,QAAA,YAAAW,IAAAO,IAAAH,IAAA;AAAA,aAAAJ;AAAAA,IAAA,GAAA;AAAA,MAAAK,GAAAG;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAArC;AAAAA,EAAA,GAAA;AAU/C;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ArtifactRenderer.d.ts","sourceRoot":"","sources":["../../src/components/ArtifactRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAGpC,MAAM,WAAW,uBAAuB;IACpC,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,gBAAgB,EAAE,SAAS,CAAC;IAAE,MAAM,EAAE,uBAAuB,CAAA;CAAE,CA2C3E,CAAA"}
+{"version":3,"file":"ArtifactRenderer.d.ts","sourceRoot":"","sources":["../../src/components/ArtifactRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAIpC,MAAM,WAAW,uBAAuB;IACpC,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,gBAAgB,EAAE,SAAS,CAAC;IAAE,MAAM,EAAE,uBAAuB,CAAA;CAAE,CAsD3E,CAAA"}

package/dist/components/ArtifactRenderer.js

@@ -1,7 +1,10 @@
 import { getNextElement, getNextMarker, insert, effect, setAttribute, template } from "solid-js/web";
 import { safeUrl } from "../utils/safe-url.js";
-var _tmpl$ = /* @__PURE__ */ template(`<div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"><div class="flex items-center gap-3"><div class="w-10 h-10 flex items-center justify-center bg-white dark:bg-gray-700 rounded-md shadow-sm text-xl"></div><div><h4 class="text-sm font-medium text-gray-900 dark:text-white truncate max-w-[200px]"></h4><p class="text-xs text-gray-500 dark:text-gray-400"><!$><!/> • <!$><!/></p></div></div><a class="px-3 py-1.5 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/40 rounded-md transition-colors flex items-center gap-1"><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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>Download`);
+import { useMCPUIStrings } from "../context/MCPUIStringsContext.js";
+import { formatMCPUIString } from "../utils/format-string.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"><div class="flex items-center gap-3"><div class="w-10 h-10 flex items-center justify-center bg-white dark:bg-gray-700 rounded-md shadow-sm text-xl"></div><div><h4 class="text-sm font-medium text-gray-900 dark:text-white truncate max-w-[200px]"></h4><p class="text-xs text-gray-500 dark:text-gray-400"><!$><!/> • <!$><!/></p></div></div><a class="px-3 py-1.5 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/40 rounded-md transition-colors flex items-center gap-1"><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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg><!$><!/>`);
 const ArtifactRenderer = (props) => {
+  const strings = useMCPUIStrings();
   const getIcon = () => {
     var _a, _b, _c;
     if ((_a = props.params.mimeType) == null ? void 0 : _a.includes("csv")) return "📊";
@@ -11,16 +14,32 @@ const ArtifactRenderer = (props) => {
   };
   const formatSize = (bytes) => {
     if (!bytes) return "";
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    const oneDecimal = (n) => new Intl.NumberFormat(strings.locale, {
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1,
+      useGrouping: false
+    }).format(n);
+    if (bytes < 1024) {
+      return formatMCPUIString(strings.sizeBytes, {
+        size: new Intl.NumberFormat(strings.locale, {
+          maximumFractionDigits: 0
+        }).format(bytes)
+      });
+    }
+    if (bytes < 1024 * 1024) return formatMCPUIString(strings.sizeKilobytes, {
+      size: oneDecimal(bytes / 1024)
+    });
+    return formatMCPUIString(strings.sizeMegabytes, {
+      size: oneDecimal(bytes / (1024 * 1024))
+    });
   };
   return (() => {
-    var _el$ = getNextElement(_tmpl$), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$8 = _el$6.firstChild, [_el$9, _co$] = getNextMarker(_el$8.nextSibling), _el$7 = _el$9.nextSibling, _el$0 = _el$7.nextSibling, [_el$1, _co$2] = getNextMarker(_el$0.nextSibling), _el$10 = _el$2.nextSibling;
+    var _el$ = getNextElement(_tmpl$), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$8 = _el$6.firstChild, [_el$9, _co$] = getNextMarker(_el$8.nextSibling), _el$7 = _el$9.nextSibling, _el$0 = _el$7.nextSibling, [_el$1, _co$2] = getNextMarker(_el$0.nextSibling), _el$10 = _el$2.nextSibling, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, [_el$13, _co$3] = getNextMarker(_el$12.nextSibling);
     insert(_el$3, getIcon);
     insert(_el$5, () => props.params.filename);
     insert(_el$6, () => formatSize(props.params.size), _el$9, _co$);
-    insert(_el$6, () => props.params.description || "Generated artifact", _el$1, _co$2);
+    insert(_el$6, () => props.params.description || strings.artifactDescription, _el$1, _co$2);
+    insert(_el$10, () => strings.download, _el$13, _co$3);
     effect((_p$) => {
       var _v$ = safeUrl(props.params.url), _v$2 = props.params.filename;
       _v$ !== _p$.e && setAttribute(_el$10, "href", _p$.e = _v$);

package/dist/components/ArtifactRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArtifactRenderer.js","sources":["../../src/components/ArtifactRenderer.tsx"],"sourcesContent":["import { Component } from 'solid-js'\nimport { safeUrl } from '../utils/safe-url'\n\nexport interface ArtifactComponentParams {\n    url: string\n    filename: string\n    mimeType: string\n    size?: number\n    description?: string\n}\n\nexport const ArtifactRenderer: Component<{ params: ArtifactComponentParams }> = (props) => {\n    const getIcon = () => {\n        if (props.params.mimeType?.includes('csv')) return '📊'\n        if (props.params.mimeType?.includes('json')) return '{}'\n        if (props.params.mimeType?.includes('pdf')) return '📄'\n        return '📁'\n    }\n\n    const formatSize = (bytes?: number) => {\n        if (!bytes) return ''\n        if (bytes < 1024) return `${bytes} B`\n        if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`\n        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n    }\n\n    return (\n        <div class=\"flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors\">\n            <div class=\"flex items-center gap-3\">\n                <div class=\"w-10 h-10 flex items-center justify-center bg-white dark:bg-gray-700 rounded-md shadow-sm text-xl\">\n                    {getIcon()}\n                </div>\n                <div>\n                    <h4 class=\"text-sm font-medium text-gray-900 dark:text-white truncate max-w-[200px]\">\n                        {props.params.filename}\n                    </h4>\n                    <p class=\"text-xs text-gray-500 dark:text-gray-400\">\n                        {formatSize(props.params.size)} • {props.params.description || 'Generated artifact'}\n                    </p>\n                </div>\n            </div>\n\n            <a\n                href={safeUrl(props.params.url)}\n                download={props.params.filename}\n                class=\"px-3 py-1.5 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/40 rounded-md transition-colors flex items-center gap-1\"\n            >\n                <svg class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" />\n                </svg>\n                Download\n            </a>\n        </div>\n    )\n}\n"],"names":["ArtifactRenderer","props","getIcon","params","mimeType","includes","formatSize","bytes","toFixed","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_el$8","_el$9","_co$","_$getNextMarker","_el$7","_el$0","_el$1","_co$2","_el$10","_$insert","filename","size","description","_$effect","_p$","_v$","safeUrl","url","_v$2","e","_$setAttribute","t","undefined"],"mappings":";;;AAWO,MAAMA,mBAAoEC,CAAAA,UAAU;AACvF,QAAMC,UAAUA,MAAM;;AAClB,SAAID,WAAME,OAAOC,aAAbH,mBAAuBI,SAAS,OAAQ,QAAO;AACnD,SAAIJ,WAAME,OAAOC,aAAbH,mBAAuBI,SAAS,QAAS,QAAO;AACpD,SAAIJ,WAAME,OAAOC,aAAbH,mBAAuBI,SAAS,OAAQ,QAAO;AACnD,WAAO;AAAA,EACX;AAEA,QAAMC,aAAaA,CAACC,UAAmB;AACnC,QAAI,CAACA,MAAO,QAAO;AACnB,QAAIA,QAAQ,KAAM,QAAO,GAAGA,KAAK;AACjC,QAAIA,QAAQ,OAAO,KAAM,QAAO,IAAIA,QAAQ,MAAMC,QAAQ,CAAC,CAAC;AAC5D,WAAO,IAAID,SAAS,OAAO,OAAOC,QAAQ,CAAC,CAAC;AAAA,EAChD;AAEA,UAAA,MAAA;AAAA,QAAAC,OAAAC,eAAAC,MAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE,aAAAC,QAAAF,MAAAF,YAAAK,QAAAD,MAAAD,aAAAG,QAAAD,MAAAL,YAAA,CAAAO,OAAAC,IAAA,IAAAC,cAAAH,MAAAH,WAAA,GAAAO,QAAAH,MAAAJ,aAAAQ,QAAAD,MAAAP,aAAA,CAAAS,OAAAC,KAAA,IAAAJ,cAAAE,MAAAR,WAAA,GAAAW,SAAAf,MAAAI;AAAAY,WAAAd,OAIiBZ,OAAO;AAAA0B,WAAAX,OAAA,MAIHhB,MAAME,OAAO0B,QAAQ;AAAAD,WAAAV,OAAA,MAGrBZ,WAAWL,MAAME,OAAO2B,IAAI,GAACV,OAAAC,IAAA;AAAAO,WAAAV,OAAA,MAAKjB,MAAME,OAAO4B,eAAe,sBAAoBN,OAAAC,KAAA;AAAAM,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MAMrFC,QAAQlC,MAAME,OAAOiC,GAAG,GAACC,OACrBpC,MAAME,OAAO0B;AAAQK,cAAAD,IAAAK,KAAAC,aAAAZ,QAAA,QAAAM,IAAAK,IAAAJ,GAAA;AAAAG,eAAAJ,IAAAO,KAAAD,aAAAZ,QAAA,YAAAM,IAAAO,IAAAH,IAAA;AAAA,aAAAJ;AAAAA,IAAA,GAAA;AAAA,MAAAK,GAAAG;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAAhC;AAAAA,EAAA,GAAA;AAU/C;"}
+{"version":3,"file":"ArtifactRenderer.js","sources":["../../src/components/ArtifactRenderer.tsx"],"sourcesContent":["import { Component } from 'solid-js'\nimport { safeUrl } from '../utils/safe-url'\nimport { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'\n\nexport interface ArtifactComponentParams {\n    url: string\n    filename: string\n    mimeType: string\n    size?: number\n    description?: string\n}\n\nexport const ArtifactRenderer: Component<{ params: ArtifactComponentParams }> = (props) => {\n    const strings = useMCPUIStrings()\n    const getIcon = () => {\n        if (props.params.mimeType?.includes('csv')) return '📊'\n        if (props.params.mimeType?.includes('json')) return '{}'\n        if (props.params.mimeType?.includes('pdf')) return '📄'\n        return '📁'\n    }\n\n    const formatSize = (bytes?: number) => {\n        if (!bytes) return ''\n        const oneDecimal = (n: number) =>\n            new Intl.NumberFormat(strings.locale, {\n                minimumFractionDigits: 1,\n                maximumFractionDigits: 1,\n                useGrouping: false,\n            }).format(n)\n        if (bytes < 1024) {\n            return formatMCPUIString(strings.sizeBytes, {\n                size: new Intl.NumberFormat(strings.locale, { maximumFractionDigits: 0 }).format(bytes),\n            })\n        }\n        if (bytes < 1024 * 1024) return formatMCPUIString(strings.sizeKilobytes, { size: oneDecimal(bytes / 1024) })\n        return formatMCPUIString(strings.sizeMegabytes, { size: oneDecimal(bytes / (1024 * 1024)) })\n    }\n\n    return (\n        <div class=\"flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors\">\n            <div class=\"flex items-center gap-3\">\n                <div class=\"w-10 h-10 flex items-center justify-center bg-white dark:bg-gray-700 rounded-md shadow-sm text-xl\">\n                    {getIcon()}\n                </div>\n                <div>\n                    <h4 class=\"text-sm font-medium text-gray-900 dark:text-white truncate max-w-[200px]\">\n                        {props.params.filename}\n                    </h4>\n                    <p class=\"text-xs text-gray-500 dark:text-gray-400\">\n                        {formatSize(props.params.size)} • {props.params.description || strings.artifactDescription}\n                    </p>\n                </div>\n            </div>\n\n            <a\n                href={safeUrl(props.params.url)}\n                download={props.params.filename}\n                class=\"px-3 py-1.5 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/40 rounded-md transition-colors flex items-center gap-1\"\n            >\n                <svg class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" />\n                </svg>\n                {strings.download}\n            </a>\n        </div>\n    )\n}\n"],"names":["ArtifactRenderer","props","strings","useMCPUIStrings","getIcon","params","mimeType","includes","formatSize","bytes","oneDecimal","n","Intl","NumberFormat","locale","minimumFractionDigits","maximumFractionDigits","useGrouping","format","formatMCPUIString","sizeBytes","size","sizeKilobytes","sizeMegabytes","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_el$8","_el$9","_co$","_$getNextMarker","_el$7","_el$0","_el$1","_co$2","_el$10","_el$11","_el$12","_el$13","_co$3","_$insert","filename","description","artifactDescription","download","_$effect","_p$","_v$","safeUrl","url","_v$2","e","_$setAttribute","t","undefined"],"mappings":";;;;;AAYO,MAAMA,mBAAoEC,CAAAA,UAAU;AACvF,QAAMC,UAAUC,gBAAAA;AAChB,QAAMC,UAAUA,MAAM;;AAClB,SAAIH,WAAMI,OAAOC,aAAbL,mBAAuBM,SAAS,OAAQ,QAAO;AACnD,SAAIN,WAAMI,OAAOC,aAAbL,mBAAuBM,SAAS,QAAS,QAAO;AACpD,SAAIN,WAAMI,OAAOC,aAAbL,mBAAuBM,SAAS,OAAQ,QAAO;AACnD,WAAO;AAAA,EACX;AAEA,QAAMC,aAAaA,CAACC,UAAmB;AACnC,QAAI,CAACA,MAAO,QAAO;AACnB,UAAMC,aAAaA,CAACC,MAChB,IAAIC,KAAKC,aAAaX,QAAQY,QAAQ;AAAA,MAClCC,uBAAuB;AAAA,MACvBC,uBAAuB;AAAA,MACvBC,aAAa;AAAA,IAAA,CAChB,EAAEC,OAAOP,CAAC;AACf,QAAIF,QAAQ,MAAM;AACd,aAAOU,kBAAkBjB,QAAQkB,WAAW;AAAA,QACxCC,MAAM,IAAIT,KAAKC,aAAaX,QAAQY,QAAQ;AAAA,UAAEE,uBAAuB;AAAA,QAAA,CAAG,EAAEE,OAAOT,KAAK;AAAA,MAAA,CACzF;AAAA,IACL;AACA,QAAIA,QAAQ,OAAO,KAAM,QAAOU,kBAAkBjB,QAAQoB,eAAe;AAAA,MAAED,MAAMX,WAAWD,QAAQ,IAAI;AAAA,IAAA,CAAG;AAC3G,WAAOU,kBAAkBjB,QAAQqB,eAAe;AAAA,MAAEF,MAAMX,WAAWD,SAAS,OAAO,KAAK;AAAA,IAAA,CAAG;AAAA,EAC/F;AAEA,UAAA,MAAA;AAAA,QAAAe,OAAAC,eAAAC,MAAA,GAAAC,QAAAH,KAAAI,YAAAC,QAAAF,MAAAC,YAAAE,QAAAD,MAAAE,aAAAC,QAAAF,MAAAF,YAAAK,QAAAD,MAAAD,aAAAG,QAAAD,MAAAL,YAAA,CAAAO,OAAAC,IAAA,IAAAC,cAAAH,MAAAH,WAAA,GAAAO,QAAAH,MAAAJ,aAAAQ,QAAAD,MAAAP,aAAA,CAAAS,OAAAC,KAAA,IAAAJ,cAAAE,MAAAR,WAAA,GAAAW,SAAAf,MAAAI,aAAAY,SAAAD,OAAAd,YAAAgB,SAAAD,OAAAZ,aAAA,CAAAc,QAAAC,KAAA,IAAAT,cAAAO,OAAAb,WAAA;AAAAgB,WAAAlB,OAIiBzB,OAAO;AAAA2C,WAAAf,OAAA,MAIH/B,MAAMI,OAAO2C,QAAQ;AAAAD,WAAAd,OAAA,MAGrBzB,WAAWP,MAAMI,OAAOgB,IAAI,GAACc,OAAAC,IAAA;AAAAW,WAAAd,OAAA,MAAKhC,MAAMI,OAAO4C,eAAe/C,QAAQgD,qBAAmBV,OAAAC,KAAA;AAAAM,WAAAL,QAAA,MAajGxC,QAAQiD,UAAQN,QAAAC,KAAA;AAAAM,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MAPXC,QAAQtD,MAAMI,OAAOmD,GAAG,GAACC,OACrBxD,MAAMI,OAAO2C;AAAQM,cAAAD,IAAAK,KAAAC,aAAAjB,QAAA,QAAAW,IAAAK,IAAAJ,GAAA;AAAAG,eAAAJ,IAAAO,KAAAD,aAAAjB,QAAA,YAAAW,IAAAO,IAAAH,IAAA;AAAA,aAAAJ;AAAAA,IAAA,GAAA;AAAA,MAAAK,GAAAG;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAArC;AAAAA,EAAA,GAAA;AAU/C;"}

package/dist/components/AutocompleteDropdown.cjs

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
 const solidJs = require("solid-js");
-var _tmpl$ = /* @__PURE__ */ web.template(`<strong class=mcp-autocomplete-highlight>`), _tmpl$2 = /* @__PURE__ */ web.template(`<span class=mcp-autocomplete-option-icon>`), _tmpl$3 = /* @__PURE__ */ web.template(`<span class=mcp-autocomplete-option-description>`), _tmpl$4 = /* @__PURE__ */ web.template(`<div class=mcp-autocomplete-option-content><!$><!/><div class=mcp-autocomplete-option-text><span class=mcp-autocomplete-option-label></span><!$><!/>`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class=mcp-autocomplete-loading style="padding:12px 16px;color:#6b7280;font-size:0.875rem;display:flex;align-items:center;gap:8px"><span style="display:inline-block;width:14px;height:14px;border:2px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:mcp-spin 0.6s linear infinite"></span><!$><!/>`), _tmpl$6 = /* @__PURE__ */ web.template(`<div class=mcp-autocomplete-empty style="padding:12px 16px;color:#9ca3af;font-size:0.875rem;text-align:center">`), _tmpl$7 = /* @__PURE__ */ web.template(`<ul class=mcp-autocomplete-options style="margin:0;padding:4px 0;list-style:none">`), _tmpl$8 = /* @__PURE__ */ web.template(`<div class=mcp-autocomplete-footer style="padding:6px 12px;border-top:1px solid #e5e7eb;background-color:#f9fafb;font-size:0.75rem;color:#6b7280"><kbd style="background-color:#e5e7eb;padding:1px 4px;border-radius:2px;font-family:inherit;font-size:0.7rem">↑</kbd> <kbd style="background-color:#e5e7eb;padding:1px 4px;border-radius:2px;font-family:inherit;font-size:0.7rem">↓</kbd> to navigate, <kbd style="background-color:#e5e7eb;padding:1px 4px;border-radius:2px;font-family:inherit;font-size:0.7rem">Enter</kbd> to select, <kbd style="background-color:#e5e7eb;padding:1px 4px;border-radius:2px;font-family:inherit;font-size:0.7rem">Esc</kbd> to dismiss`), _tmpl$9 = /* @__PURE__ */ web.template(`<div role=listbox aria-label=Suggestions><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$0 = /* @__PURE__ */ web.template(`<li role=option style="padding:8px 16px;font-size:0.875rem;transition:background-color 150ms ease">`);
+const MCPUIStringsContext = require("../context/MCPUIStringsContext.cjs");
+var _tmpl$ = /* @__PURE__ */ web.template(`<strong class=mcp-autocomplete-highlight>`), _tmpl$2 = /* @__PURE__ */ web.template(`<span class=mcp-autocomplete-option-icon>`), _tmpl$3 = /* @__PURE__ */ web.template(`<span class=mcp-autocomplete-option-description>`), _tmpl$4 = /* @__PURE__ */ web.template(`<div class=mcp-autocomplete-option-content><!$><!/><div class=mcp-autocomplete-option-text><span class=mcp-autocomplete-option-label></span><!$><!/>`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class=mcp-autocomplete-loading style="padding:12px 16px;color:#6b7280;font-size:0.875rem;display:flex;align-items:center;gap:8px"><span style="display:inline-block;width:14px;height:14px;border:2px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:mcp-spin 0.6s linear infinite"></span><!$><!/>`), _tmpl$6 = /* @__PURE__ */ web.template(`<div class=mcp-autocomplete-empty style="padding:12px 16px;color:#9ca3af;font-size:0.875rem;text-align:center">`), _tmpl$7 = /* @__PURE__ */ web.template(`<ul class=mcp-autocomplete-options style="margin:0;padding:4px 0;list-style:none">`), _tmpl$8 = /* @__PURE__ */ web.template(`<div class=mcp-autocomplete-footer style="padding:6px 12px;border-top:1px solid #e5e7eb;background-color:#f9fafb;font-size:0.75rem;color:#6b7280"><kbd style="background-color:#e5e7eb;padding:1px 4px;border-radius:2px;font-family:inherit;font-size:0.7rem">↑</kbd> <kbd style="background-color:#e5e7eb;padding:1px 4px;border-radius:2px;font-family:inherit;font-size:0.7rem">↓</kbd><!$><!/><kbd style="background-color:#e5e7eb;padding:1px 4px;border-radius:2px;font-family:inherit;font-size:0.7rem">Enter</kbd><!$><!/><kbd style="background-color:#e5e7eb;padding:1px 4px;border-radius:2px;font-family:inherit;font-size:0.7rem">Esc</kbd><!$><!/>`), _tmpl$9 = /* @__PURE__ */ web.template(`<div role=listbox><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$0 = /* @__PURE__ */ web.template(`<li role=option style="padding:8px 16px;font-size:0.875rem;transition:background-color 150ms ease">`);
 function highlightText(text, match) {
   if (!match || !text) {
     return text;
@@ -51,6 +52,7 @@ const DefaultOptionRenderer = (props) => {
   })();
 };
 const AutocompleteDropdown = (props) => {
+  const strings = MCPUIStringsContext.useMCPUIStrings();
   const positionStyles = solidJs.createMemo(() => {
     if (props.position === "top") {
       return {
@@ -81,27 +83,27 @@ const AutocompleteDropdown = (props) => {
       return props.isOpen;
     },
     get children() {
-      var _el$1 = web.getNextElement(_tmpl$9), _el$24 = _el$1.firstChild, [_el$25, _co$4] = web.getNextMarker(_el$24.nextSibling), _el$26 = _el$25.nextSibling, [_el$27, _co$5] = web.getNextMarker(_el$26.nextSibling), _el$28 = _el$27.nextSibling, [_el$29, _co$6] = web.getNextMarker(_el$28.nextSibling), _el$30 = _el$29.nextSibling, [_el$31, _co$7] = web.getNextMarker(_el$30.nextSibling);
+      var _el$1 = web.getNextElement(_tmpl$9), _el$28 = _el$1.firstChild, [_el$29, _co$7] = web.getNextMarker(_el$28.nextSibling), _el$30 = _el$29.nextSibling, [_el$31, _co$8] = web.getNextMarker(_el$30.nextSibling), _el$32 = _el$31.nextSibling, [_el$33, _co$9] = web.getNextMarker(_el$32.nextSibling), _el$34 = _el$33.nextSibling, [_el$35, _co$0] = web.getNextMarker(_el$34.nextSibling);
       web.insert(_el$1, web.createComponent(solidJs.Show, {
         get when() {
           return props.isLoading;
         },
         get children() {
           var _el$10 = web.getNextElement(_tmpl$5), _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, [_el$13, _co$3] = web.getNextMarker(_el$12.nextSibling);
-          web.insert(_el$10, () => props.loadingMessage || "Loading...", _el$13, _co$3);
+          web.insert(_el$10, () => props.loadingMessage || strings.autocompleteLoading, _el$13, _co$3);
           return _el$10;
         }
-      }), _el$25, _co$4);
+      }), _el$29, _co$7);
       web.insert(_el$1, web.createComponent(solidJs.Show, {
         get when() {
           return web.memo(() => !!!props.isLoading)() && props.options.length === 0;
         },
         get children() {
           var _el$14 = web.getNextElement(_tmpl$6);
-          web.insert(_el$14, () => props.emptyMessage || "No suggestions found");
+          web.insert(_el$14, () => props.emptyMessage || strings.autocompleteEmpty);
           return _el$14;
         }
-      }), _el$27, _co$5);
+      }), _el$31, _co$8);
       web.insert(_el$1, web.createComponent(solidJs.Show, {
         get when() {
           return web.memo(() => !!!props.isLoading)() && props.options.length > 0;
@@ -116,19 +118,19 @@ const AutocompleteDropdown = (props) => {
               const isSelected = () => index() === props.selectedIndex;
               const isDisabled = () => option.disabled;
               return (() => {
-                var _el$32 = web.getNextElement(_tmpl$0);
-                _el$32.addEventListener("mouseenter", () => {
+                var _el$36 = web.getNextElement(_tmpl$0);
+                _el$36.addEventListener("mouseenter", () => {
                   var _a;
                   if (!isDisabled()) {
                     (_a = props.onHover) == null ? void 0 : _a.call(props, index());
                   }
                 });
-                _el$32.$$click = () => {
+                _el$36.$$click = () => {
                   if (!isDisabled()) {
                     props.onSelect(option);
                   }
                 };
-                web.insert(_el$32, web.createComponent(solidJs.Show, {
+                web.insert(_el$36, web.createComponent(solidJs.Show, {
                   get when() {
                     return props.renderOption;
                   },
@@ -148,13 +150,13 @@ const AutocompleteDropdown = (props) => {
                   }
                 }));
                 web.effect((_p$) => {
-                  var _v$3 = isSelected(), _v$4 = isDisabled(), _v$5 = `mcp-autocomplete-option ${isSelected() ? "mcp-autocomplete-option-selected" : ""} ${isDisabled() ? "mcp-autocomplete-option-disabled" : ""}`, _v$6 = isDisabled() ? "not-allowed" : "pointer", _v$7 = isSelected() ? "#eff6ff" : "transparent", _v$8 = isDisabled() ? "#9ca3af" : "#374151";
-                  _v$3 !== _p$.e && web.setAttribute(_el$32, "aria-selected", _p$.e = _v$3);
-                  _v$4 !== _p$.t && web.setAttribute(_el$32, "aria-disabled", _p$.t = _v$4);
-                  _v$5 !== _p$.a && web.className(_el$32, _p$.a = _v$5);
-                  _v$6 !== _p$.o && web.setStyleProperty(_el$32, "cursor", _p$.o = _v$6);
-                  _v$7 !== _p$.i && web.setStyleProperty(_el$32, "background-color", _p$.i = _v$7);
-                  _v$8 !== _p$.n && web.setStyleProperty(_el$32, "color", _p$.n = _v$8);
+                  var _v$4 = isSelected(), _v$5 = isDisabled(), _v$6 = `mcp-autocomplete-option ${isSelected() ? "mcp-autocomplete-option-selected" : ""} ${isDisabled() ? "mcp-autocomplete-option-disabled" : ""}`, _v$7 = isDisabled() ? "not-allowed" : "pointer", _v$8 = isSelected() ? "#eff6ff" : "transparent", _v$9 = isDisabled() ? "#9ca3af" : "#374151";
+                  _v$4 !== _p$.e && web.setAttribute(_el$36, "aria-selected", _p$.e = _v$4);
+                  _v$5 !== _p$.t && web.setAttribute(_el$36, "aria-disabled", _p$.t = _v$5);
+                  _v$6 !== _p$.a && web.className(_el$36, _p$.a = _v$6);
+                  _v$7 !== _p$.o && web.setStyleProperty(_el$36, "cursor", _p$.o = _v$7);
+                  _v$8 !== _p$.i && web.setStyleProperty(_el$36, "background-color", _p$.i = _v$8);
+                  _v$9 !== _p$.n && web.setStyleProperty(_el$36, "color", _p$.n = _v$9);
                   return _p$;
                 }, {
                   e: void 0,
@@ -165,31 +167,35 @@ const AutocompleteDropdown = (props) => {
                   n: void 0
                 });
                 web.runHydrationEvents();
-                return _el$32;
+                return _el$36;
               })();
             }
           }));
           return _el$15;
         }
-      }), _el$29, _co$6);
+      }), _el$33, _co$9);
       web.insert(_el$1, web.createComponent(solidJs.Show, {
         get when() {
           return web.memo(() => !!!props.isLoading)() && props.options.length > 0;
         },
         get children() {
-          var _el$16 = web.getNextElement(_tmpl$8), _el$17 = _el$16.firstChild, _el$18 = _el$17.nextSibling, _el$19 = _el$18.nextSibling, _el$20 = _el$19.nextSibling, _el$21 = _el$20.nextSibling, _el$22 = _el$21.nextSibling;
-          _el$22.nextSibling;
+          var _el$16 = web.getNextElement(_tmpl$8), _el$17 = _el$16.firstChild, _el$18 = _el$17.nextSibling, _el$19 = _el$18.nextSibling, _el$22 = _el$19.nextSibling, [_el$23, _co$4] = web.getNextMarker(_el$22.nextSibling), _el$20 = _el$23.nextSibling, _el$24 = _el$20.nextSibling, [_el$25, _co$5] = web.getNextMarker(_el$24.nextSibling), _el$21 = _el$25.nextSibling, _el$26 = _el$21.nextSibling, [_el$27, _co$6] = web.getNextMarker(_el$26.nextSibling);
+          web.insert(_el$16, () => strings.autocompleteHintNavigate, _el$23, _co$4);
+          web.insert(_el$16, () => strings.autocompleteHintSelect, _el$25, _co$5);
+          web.insert(_el$16, () => strings.autocompleteHintDismiss, _el$27, _co$6);
           return _el$16;
         }
-      }), _el$31, _co$7);
+      }), _el$35, _co$0);
       web.effect((_p$) => {
-        var _v$ = `mcp-autocomplete-dropdown ${props.class || ""}`, _v$2 = containerStyles();
+        var _v$ = `mcp-autocomplete-dropdown ${props.class || ""}`, _v$2 = containerStyles(), _v$3 = strings.autocompleteSuggestions;
         _v$ !== _p$.e && web.className(_el$1, _p$.e = _v$);
         _p$.t = web.style(_el$1, _v$2, _p$.t);
+        _v$3 !== _p$.a && web.setAttribute(_el$1, "aria-label", _p$.a = _v$3);
         return _p$;
       }, {
         e: void 0,
-        t: void 0
+        t: void 0,
+        a: void 0
       });
       return _el$1;
     }