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

package/dist/components/ScratchpadPanel.js

@@ -9,37 +9,41 @@ import { AgentStatusBadge, AgentCard } from "./AgentCard.js";
 import { SplitStepper } from "./SplitStepper.js";
 import { AgentHandoff } from "./AgentHandoff.js";
 import { BriefingDiff } from "./BriefingDiff.js";
-var _tmpl$ = /* @__PURE__ */ template(`<svg fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M19 9l-7 7-7-7">`), _tmpl$2 = /* @__PURE__ */ template(`<button class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"aria-label=Close><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="M6 18L18 6M6 6l12 12">`), _tmpl$3 = /* @__PURE__ */ template(`<div class="px-4 py-2 border-b border-gray-100 dark:border-gray-700 flex flex-wrap items-center gap-1.5">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700 space-y-2">`), _tmpl$5 = /* @__PURE__ */ template(`<div class="flex flex-col items-center gap-2 py-4 text-center"><span class=text-2xl>&#128269;</span><p class="text-sm text-gray-500 dark:text-gray-400">No results for these filters</p><button type=button class="px-3 py-1.5 text-xs font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors">Modify filters`), _tmpl$6 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700">`), _tmpl$7 = /* @__PURE__ */ template(`<p class="text-xs text-red-500 dark:text-red-500 mt-0.5">Code: <!$><!/>`), _tmpl$8 = /* @__PURE__ */ template(`<button type=button class="px-3 py-1.5 text-sm font-medium rounded-lg bg-red-600 text-white hover:bg-red-700 transition-colors flex items-center gap-1">&#128260; Retry`), _tmpl$9 = /* @__PURE__ */ template(`<button type=button class="px-3 py-1.5 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">Close`), _tmpl$0 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-red-100 dark:border-red-900/30 bg-red-50 dark:bg-red-900/10"><div class="flex items-start gap-2 text-sm text-red-700 dark:text-red-400"><span class="flex-shrink-0 mt-0.5">⚠️</span><div class=flex-1><p class=font-medium></p><!$><!/></div></div><div class="flex gap-2 mt-2"><!$><!/><!$><!/>`), _tmpl$1 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700"><button type=button class="w-full px-4 py-2.5 text-sm font-semibold rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors flex items-center justify-center gap-2"><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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>Search`), _tmpl$10 = /* @__PURE__ */ template(`<div style=overflow-y:auto><!$><!/><div class="divide-y divide-gray-100 dark:divide-gray-700"></div><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$11 = /* @__PURE__ */ template(`<div class="absolute bottom-1 right-1 px-2 py-1 text-[9px] font-mono bg-black/80 text-green-400 rounded z-50 pointer-events-none"><!$><!/> | ev:<!$><!/> | sec:<!$><!/> | <!$><!/> | last:<!$><!/>`), _tmpl$12 = /* @__PURE__ */ template(`<div style="animation:scratchpad-slide-down 0.2s ease-out"><div><div class="flex items-center gap-2"><span class=text-base>&#128221;</span><h3 class="text-sm font-semibold text-gray-900 dark:text-white"></h3><!$><!/><!$><!/></div><div class="flex items-center gap-2"><span></span><!$><!/></div></div><!$><!/><style>
+import { useMCPUIStrings } from "../context/MCPUIStringsContext.js";
+import { formatMCPUIString } from "../utils/format-string.js";
+var _tmpl$ = /* @__PURE__ */ template(`<svg fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M19 9l-7 7-7-7">`), _tmpl$2 = /* @__PURE__ */ template(`<button class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"><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="M6 18L18 6M6 6l12 12">`), _tmpl$3 = /* @__PURE__ */ template(`<div class="px-4 py-2 border-b border-gray-100 dark:border-gray-700 flex flex-wrap items-center gap-1.5">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700 space-y-2">`), _tmpl$5 = /* @__PURE__ */ template(`<div class="flex flex-col items-center gap-2 py-4 text-center"><span class=text-2xl>&#128269;</span><p class="text-sm text-gray-500 dark:text-gray-400"></p><button type=button class="px-3 py-1.5 text-xs font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors">`), _tmpl$6 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700">`), _tmpl$7 = /* @__PURE__ */ template(`<p class="text-xs text-red-500 dark:text-red-500 mt-0.5">`), _tmpl$8 = /* @__PURE__ */ template(`<button type=button class="px-3 py-1.5 text-sm font-medium rounded-lg bg-red-600 text-white hover:bg-red-700 transition-colors flex items-center gap-1">&#128260; <!$><!/>`), _tmpl$9 = /* @__PURE__ */ template(`<button type=button class="px-3 py-1.5 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">`), _tmpl$0 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-red-100 dark:border-red-900/30 bg-red-50 dark:bg-red-900/10"><div class="flex items-start gap-2 text-sm text-red-700 dark:text-red-400"><span class="flex-shrink-0 mt-0.5">⚠️</span><div class=flex-1><p class=font-medium></p><!$><!/></div></div><div class="flex gap-2 mt-2"><!$><!/><!$><!/>`), _tmpl$1 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700"><button type=button class="w-full px-4 py-2.5 text-sm font-semibold rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors flex items-center justify-center gap-2"><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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg><!$><!/>`), _tmpl$10 = /* @__PURE__ */ template(`<div style=overflow-y:auto><!$><!/><div class="divide-y divide-gray-100 dark:divide-gray-700"></div><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$11 = /* @__PURE__ */ template(`<div class="absolute bottom-1 right-1 px-2 py-1 text-[9px] font-mono bg-black/80 text-green-400 rounded z-50 pointer-events-none"><!$><!/> | ev:<!$><!/> | sec:<!$><!/> | <!$><!/> | last:<!$><!/>`), _tmpl$12 = /* @__PURE__ */ template(`<div style="animation:scratchpad-slide-down 0.2s ease-out"><div><div class="flex items-center gap-2"><span class=text-base>&#128221;</span><h3 class="text-sm font-semibold text-gray-900 dark:text-white"></h3><!$><!/><!$><!/></div><div class="flex items-center gap-2"><span></span><!$><!/></div></div><!$><!/><style>
         @keyframes scratchpad-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
-      </style><!$><!/>`), _tmpl$13 = /* @__PURE__ */ template(`<svg class="w-3 h-3 text-gray-300 dark:text-gray-600 flex-shrink-0"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 5l7 7-7 7">`), _tmpl$14 = /* @__PURE__ */ template(`<span class="ml-1 font-normal opacity-75">— <!$><!/>`), _tmpl$15 = /* @__PURE__ */ template(`<span><!$><!/> <!$><!/><!$><!/>`), _tmpl$16 = /* @__PURE__ */ template(`<div><span class="flex-shrink-0 mt-0.5"></span><p>`), _tmpl$17 = /* @__PURE__ */ template(`<div class="flex items-center gap-2 mb-2"><span class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Preview</span><span class="px-1.5 py-0.5 text-xs font-bold bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded">`), _tmpl$18 = /* @__PURE__ */ template(`<p class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$19 = /* @__PURE__ */ template(`<div class="mt-2 overflow-x-auto"><table class="min-w-full text-xs"><thead><tr></tr></thead><tbody>`), _tmpl$20 = /* @__PURE__ */ template(`<th class="px-2 py-1 text-left font-medium text-gray-500 dark:text-gray-400">`), _tmpl$21 = /* @__PURE__ */ template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$22 = /* @__PURE__ */ template(`<td class="px-2 py-1 text-gray-700 dark:text-gray-300">`), _tmpl$23 = /* @__PURE__ */ template(`<pre class="text-xs text-gray-500 overflow-auto">`), _tmpl$24 = /* @__PURE__ */ template(`<div class="px-4 py-3 animate-[slideDown_0.2s_ease-out]"><h4 class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2"></h4><!$><!/>`), _tmpl$25 = /* @__PURE__ */ template(`<div class=space-y-1>`), _tmpl$26 = /* @__PURE__ */ template(`<div class="flex gap-2 text-xs"><span class="text-gray-500 dark:text-gray-400 font-mono min-w-[120px]"><!$><!/>:</span><span class="text-gray-900 dark:text-white">`), _tmpl$27 = /* @__PURE__ */ template(`<p class="text-xs text-gray-400 italic">No filters`), _tmpl$28 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1.5"><!$><!/><!$><!/>`), _tmpl$29 = /* @__PURE__ */ template(`<button type=button class="ml-0.5 hover:text-blue-900 dark:hover:text-blue-100">&times;`), _tmpl$30 = /* @__PURE__ */ template(`<span class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full"><button type=button class=hover:underline><span class="text-blue-500 dark:text-blue-400"><!$><!/>:</span> <!$><!/></button><!$><!/>`), _tmpl$31 = /* @__PURE__ */ template(`<div class="max-h-48 overflow-y-auto">`), _tmpl$32 = /* @__PURE__ */ template(`<button type=button class="mt-1 w-full px-2 py-1 text-xs text-gray-500 hover:text-gray-700 text-center">Cancel`), _tmpl$33 = /* @__PURE__ */ template(`<div class="absolute z-50 mt-1 left-0 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg p-2 min-w-[200px]">`), _tmpl$34 = /* @__PURE__ */ template(`<div class=relative><!$><!/><!$><!/>`), _tmpl$35 = /* @__PURE__ */ template(`<button type=button class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium border border-dashed border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 rounded-full hover:border-blue-400 hover:text-blue-500 transition-colors">+ <!$><!/>`), _tmpl$36 = /* @__PURE__ */ template(`<form class="flex gap-1"><input type=text autofocus class="flex-1 px-2 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none"><button type=submit class="px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700">OK</button><button type=button class="px-2 py-1 text-xs text-gray-500 hover:text-gray-700">Cancel`), _tmpl$37 = /* @__PURE__ */ template(`<span class=ml-1>✓`), _tmpl$38 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/>`), _tmpl$39 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400"><!$><!/> champ<!$><!/> pré-rempli<!$><!/> sur <!$><!/>`), _tmpl$40 = /* @__PURE__ */ template(`<div class="flex items-center gap-3 p-2 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md text-sm"><span class="text-blue-700 dark:text-blue-300"><!$><!/> in <!$><!/>s...</span><button type=button class="text-blue-600 dark:text-blue-400 underline hover:text-blue-800 dark:hover:text-blue-200">Cancel`), _tmpl$41 = /* @__PURE__ */ template(`<form class="flex flex-col gap-3"><!$><!/><!$><!/><!$><!/><div class="flex justify-end"><button type=submit class="px-4 py-2 text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors">`), _tmpl$42 = /* @__PURE__ */ template(`<div class="flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg text-sm"><span class="flex-1 text-blue-800 dark:text-blue-200 font-medium"></span><span class="text-blue-600 dark:text-blue-300"><!$><!/>s...</span><button type=button class="text-blue-600 dark:text-blue-400 underline text-xs">Modifier</button><button type=button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">&times;`), _tmpl$43 = /* @__PURE__ */ template(`<div class=pl-2>routing: <!$><!/> via <!$><!/> (<!$><!/>ms)`), _tmpl$44 = /* @__PURE__ */ template(`<div class="pl-2 text-amber-500">missing: <!$><!/>`), _tmpl$45 = /* @__PURE__ */ template(`<div class="pt-1 border-t border-gray-200 dark:border-gray-600"><div class="font-medium text-gray-800 dark:text-gray-200">Server _debug:</div><!$><!/><!$><!/><!$><!/>`), _tmpl$46 = /* @__PURE__ */ template(`<pre class="mt-1 p-2 bg-gray-50 dark:bg-gray-900 rounded max-h-48 overflow-auto text-[10px]">`), _tmpl$47 = /* @__PURE__ */ template(`<div class="px-3 pb-3 space-y-2 text-gray-600 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 pt-2"><div>Fields: <!$><!/> total, <!$><!/> prefilled</div><!$><!/><div class="pt-1 border-t border-gray-200 dark:border-gray-600">autoSubmit: <!$><!/><!$><!/><div> reason: <!$><!/></div></div><!$><!/><div class="pt-1 border-t border-gray-200 dark:border-gray-600"><button type=button class="text-blue-500 hover:text-blue-700 underline"><!$><!/> raw SSE payload</button><!$><!/>`), _tmpl$48 = /* @__PURE__ */ template(`<div class="mt-2 border border-gray-200 dark:border-gray-700 rounded-md text-xs font-mono"><button type=button class="w-full px-3 py-1.5 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 flex items-center gap-1"><span></span>Debug trace (<!$><!/>/<!$><!/> prefilled)</button><!$><!/>`), _tmpl$49 = /* @__PURE__ */ template(`<div> prefill: <!$><!/>`), _tmpl$50 = /* @__PURE__ */ template(`<div class=text-amber-500> prefill: (none)`), _tmpl$51 = /* @__PURE__ */ template(`<div> source: <!$><!/>`), _tmpl$52 = /* @__PURE__ */ template(`<div> displayHint: "<!$><!/>"`), _tmpl$53 = /* @__PURE__ */ template(`<div> muted: true`), _tmpl$54 = /* @__PURE__ */ template(`<div> prefillMode: <!$><!/>`), _tmpl$55 = /* @__PURE__ */ template(`<div> valueFormat: /<!$><!/>/`), _tmpl$56 = /* @__PURE__ */ template(`<div class="pl-2 border-l-2 border-gray-200 dark:border-gray-600 space-y-0.5"><div class="text-gray-800 dark:text-gray-200 font-medium"><!$><!/>:</div><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$57 = /* @__PURE__ */ template(`<div>→ submitted: <!$><!/>`), _tmpl$58 = /* @__PURE__ */ template(`<div class=pl-2><!$><!/>: <!$><!/> "<!$><!/>" → "<!$><!/>" (<!$><!/>ms)`), _tmpl$59 = /* @__PURE__ */ template(`<div class="flex justify-end"><button type=button class="px-3 py-1.5 text-sm font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors flex items-center gap-1">Next <svg class="w-3.5 h-3.5"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 5l7 7-7 7">`), _tmpl$60 = /* @__PURE__ */ template(`<div class=space-y-3><!$><!/><!$><!/>`), _tmpl$61 = /* @__PURE__ */ template(`<span class="text-xs font-normal text-gray-500 dark:text-gray-400">— <!$><!/>`), _tmpl$62 = /* @__PURE__ */ template(`<div class="mt-2 ml-6">`), _tmpl$63 = /* @__PURE__ */ template(`<div><div><span></span><!$><!/><!$><!/></div><!$><!/>`), _tmpl$64 = /* @__PURE__ */ template(`<p class="text-sm font-medium text-gray-800 dark:text-gray-200 mb-2">`), _tmpl$65 = /* @__PURE__ */ template(`<span class=text-amber-600>(<!$><!/> unverified)`), _tmpl$66 = /* @__PURE__ */ template(`<div class="mb-2 flex items-center gap-2 text-xs"><span><!$><!/>% verified</span><!$><!/>`), _tmpl$67 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/><!$><!/><div class="flex flex-wrap gap-2">`), _tmpl$68 = /* @__PURE__ */ template(`<span class="font-medium text-gray-800 dark:text-gray-200">`), _tmpl$69 = /* @__PURE__ */ template(`<span class=ml-1>&mdash; <!$><!/>`), _tmpl$70 = /* @__PURE__ */ template(`<div class="mb-2 p-2 rounded bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-xs text-gray-600 dark:text-gray-400"><!$><!/><!$><!/>`), _tmpl$71 = /* @__PURE__ */ template(`<span class=mr-1>`), _tmpl$72 = /* @__PURE__ */ template(`<div class=space-y-2><div class=space-y-1.5></div><!$><!/>`), _tmpl$73 = /* @__PURE__ */ template(`<div class="flex items-center gap-2 text-sm"><span></span><span class="text-gray-900 dark:text-white">`), _tmpl$74 = /* @__PURE__ */ template(`<div class="flex items-start gap-1.5 text-xs text-amber-600 dark:text-amber-400"><span class=flex-shrink-0>⚠️</span><span>`), _tmpl$75 = /* @__PURE__ */ template(`<span class=italic>&mdash; <!$><!/>`), _tmpl$76 = /* @__PURE__ */ template(`<div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400"><span><!$><!/> <!$><!/></span><!$><!/>`), _tmpl$77 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-2">`), _tmpl$78 = /* @__PURE__ */ template(`<div class="flex gap-1"><input type=text class="flex-1 px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none"><button type=button class="px-3 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700">Send`), _tmpl$79 = /* @__PURE__ */ template(`<div class=space-y-3><p class="text-sm text-gray-700 dark:text-gray-300"></p><!$><!/><!$><!/>`), _tmpl$80 = /* @__PURE__ */ template(`<span>`), _tmpl$81 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400 italic">"<!$><!/>"`), _tmpl$82 = /* @__PURE__ */ template(`<div class="mt-2 px-3 py-2 bg-blue-50 dark:bg-blue-900/10 rounded-lg text-sm text-blue-700 dark:text-blue-300"><span class=font-medium>Plan:</span> <!$><!/>`), _tmpl$83 = /* @__PURE__ */ template(`<button type=button class="text-xs text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1">&#9998; Modify`), _tmpl$84 = /* @__PURE__ */ template(`<div class=space-y-2><!$><!/><div class=space-y-1></div><!$><!/><!$><!/>`), _tmpl$85 = /* @__PURE__ */ template(`<div class="flex gap-2 text-sm"><span class="text-gray-500 dark:text-gray-400 font-medium min-w-[80px]"><!$><!/>:</span><span class="text-gray-900 dark:text-white">`), _tmpl$86 = /* @__PURE__ */ template(`<div class="flex items-center gap-1 flex-wrap">`), _tmpl$87 = /* @__PURE__ */ template(`<div class=space-y-2>`), _tmpl$88 = /* @__PURE__ */ template(`<span class="ml-1 text-xs text-gray-500 dark:text-gray-400">— <!$><!/>`), _tmpl$89 = /* @__PURE__ */ template(`<span class="ml-1 text-xs text-gray-400">(<!$><!/>ms)`), _tmpl$90 = /* @__PURE__ */ template(`<div><span class=flex-shrink-0></span><div><span></span><!$><!/><!$><!/>`), _tmpl$91 = /* @__PURE__ */ template(`<span class="text-[10px] opacity-75">`), _tmpl$92 = /* @__PURE__ */ template(`<div><span></span><span></span><!$><!/>`), _tmpl$93 = /* @__PURE__ */ template(`<button type=button>&#128260; <!$><!/>`), _tmpl$94 = /* @__PURE__ */ template(`<button type=button class="px-2 py-1 text-xs opacity-70 hover:opacity-100">&#9654; Details`), _tmpl$95 = /* @__PURE__ */ template(`<pre class="mt-2 text-xs opacity-70 overflow-x-auto">`), _tmpl$96 = /* @__PURE__ */ template(`<div><div class="flex items-start gap-2"><span class=flex-shrink-0></span><div class=flex-1><p></p><div class="flex gap-2 mt-2"><!$><!/><!$><!/></div><!$><!/>`), _tmpl$97 = /* @__PURE__ */ template(`<span class="text-xs font-bold text-blue-600 dark:text-blue-400"><!$><!/> results`), _tmpl$98 = /* @__PURE__ */ template(`<p class="text-[10px] text-gray-400">`), _tmpl$99 = /* @__PURE__ */ template(`<div class="rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2"><div class="flex items-center justify-between mb-1.5"><span class="text-sm font-medium text-gray-900 dark:text-white"><!$><!/> <!$><!/></span><!$><!/></div><div class="flex flex-wrap gap-1.5 mb-1"></div><!$><!/>`), _tmpl$100 = /* @__PURE__ */ template(`<span><!$><!/> <!$><!/>`), _tmpl$101 = /* @__PURE__ */ template(`<div class=overflow-x-auto><table class="min-w-full text-xs"><thead><tr><th class="px-2 py-1 text-left text-gray-500 dark:text-gray-400"></th><th class="px-2 py-1 text-left font-medium text-blue-600 dark:text-blue-400"></th><th class="px-2 py-1 text-left font-medium text-purple-600 dark:text-purple-400"></th></tr></thead><tbody>`), _tmpl$102 = /* @__PURE__ */ template(`<tr><td class="px-2 py-1 font-mono text-gray-500 dark:text-gray-400"></td><td class="px-2 py-1 text-gray-900 dark:text-white"></td><td class="px-2 py-1 text-gray-900 dark:text-white">`);
+      </style><!$><!/>`), _tmpl$13 = /* @__PURE__ */ template(`<svg class="w-3 h-3 text-gray-300 dark:text-gray-600 flex-shrink-0"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 5l7 7-7 7">`), _tmpl$14 = /* @__PURE__ */ template(`<span class="ml-1 font-normal opacity-75">— <!$><!/>`), _tmpl$15 = /* @__PURE__ */ template(`<span><!$><!/> <!$><!/><!$><!/>`), _tmpl$16 = /* @__PURE__ */ template(`<div><span class="flex-shrink-0 mt-0.5"></span><p>`), _tmpl$17 = /* @__PURE__ */ template(`<div class="flex items-center gap-2 mb-2"><span class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide"></span><span class="px-1.5 py-0.5 text-xs font-bold bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded">`), _tmpl$18 = /* @__PURE__ */ template(`<p class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$19 = /* @__PURE__ */ template(`<div class="mt-2 overflow-x-auto"><table class="min-w-full text-xs"><thead><tr></tr></thead><tbody>`), _tmpl$20 = /* @__PURE__ */ template(`<th class="px-2 py-1 text-left font-medium text-gray-500 dark:text-gray-400">`), _tmpl$21 = /* @__PURE__ */ template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$22 = /* @__PURE__ */ template(`<td class="px-2 py-1 text-gray-700 dark:text-gray-300">`), _tmpl$23 = /* @__PURE__ */ template(`<pre class="text-xs text-gray-500 overflow-auto">`), _tmpl$24 = /* @__PURE__ */ template(`<div class="px-4 py-3 animate-[slideDown_0.2s_ease-out]"><h4 class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2"></h4><!$><!/>`), _tmpl$25 = /* @__PURE__ */ template(`<div class=space-y-1>`), _tmpl$26 = /* @__PURE__ */ template(`<div class="flex gap-2 text-xs"><span class="text-gray-500 dark:text-gray-400 font-mono min-w-[120px]"><!$><!/>:</span><span class="text-gray-900 dark:text-white">`), _tmpl$27 = /* @__PURE__ */ template(`<p class="text-xs text-gray-400 italic">`), _tmpl$28 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1.5"><!$><!/><!$><!/>`), _tmpl$29 = /* @__PURE__ */ template(`<button type=button class="ml-0.5 hover:text-blue-900 dark:hover:text-blue-100">&times;`), _tmpl$30 = /* @__PURE__ */ template(`<span class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full"><button type=button class=hover:underline><span class="text-blue-500 dark:text-blue-400"><!$><!/>:</span> <!$><!/></button><!$><!/>`), _tmpl$31 = /* @__PURE__ */ template(`<div class="max-h-48 overflow-y-auto">`), _tmpl$32 = /* @__PURE__ */ template(`<button type=button class="mt-1 w-full px-2 py-1 text-xs text-gray-500 hover:text-gray-700 text-center">`), _tmpl$33 = /* @__PURE__ */ template(`<div class="absolute z-50 mt-1 left-0 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg p-2 min-w-[200px]">`), _tmpl$34 = /* @__PURE__ */ template(`<div class=relative><!$><!/><!$><!/>`), _tmpl$35 = /* @__PURE__ */ template(`<button type=button class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium border border-dashed border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 rounded-full hover:border-blue-400 hover:text-blue-500 transition-colors">+ <!$><!/>`), _tmpl$36 = /* @__PURE__ */ template(`<form class="flex gap-1"><input type=text autofocus class="flex-1 px-2 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none"><button type=submit class="px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700"></button><button type=button class="px-2 py-1 text-xs text-gray-500 hover:text-gray-700">`), _tmpl$37 = /* @__PURE__ */ template(`<span class=ml-1>✓`), _tmpl$38 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/>`), _tmpl$39 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400">`), _tmpl$40 = /* @__PURE__ */ template(`<div class="flex items-center gap-3 p-2 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md text-sm"><span class="text-blue-700 dark:text-blue-300"></span><button type=button class="text-blue-600 dark:text-blue-400 underline hover:text-blue-800 dark:hover:text-blue-200">`), _tmpl$41 = /* @__PURE__ */ template(`<form class="flex flex-col gap-3"><!$><!/><!$><!/><!$><!/><div class="flex justify-end"><button type=submit class="px-4 py-2 text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors">`), _tmpl$42 = /* @__PURE__ */ template(`<div class="flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg text-sm"><span class="flex-1 text-blue-800 dark:text-blue-200 font-medium"></span><span class="text-blue-600 dark:text-blue-300"><!$><!/>s...</span><button type=button class="text-blue-600 dark:text-blue-400 underline text-xs"></button><button type=button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">&times;`), _tmpl$43 = /* @__PURE__ */ template(`<div class=pl-2>routing: <!$><!/> via <!$><!/> (<!$><!/>ms)`), _tmpl$44 = /* @__PURE__ */ template(`<div class="pl-2 text-amber-500">missing: <!$><!/>`), _tmpl$45 = /* @__PURE__ */ template(`<div class="pt-1 border-t border-gray-200 dark:border-gray-600"><div class="font-medium text-gray-800 dark:text-gray-200">Server _debug:</div><!$><!/><!$><!/><!$><!/>`), _tmpl$46 = /* @__PURE__ */ template(`<pre class="mt-1 p-2 bg-gray-50 dark:bg-gray-900 rounded max-h-48 overflow-auto text-[10px]">`), _tmpl$47 = /* @__PURE__ */ template(`<div class="px-3 pb-3 space-y-2 text-gray-600 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 pt-2"><div>Fields: <!$><!/> total, <!$><!/> prefilled</div><!$><!/><div class="pt-1 border-t border-gray-200 dark:border-gray-600">autoSubmit: <!$><!/><!$><!/><div> reason: <!$><!/></div></div><!$><!/><div class="pt-1 border-t border-gray-200 dark:border-gray-600"><button type=button class="text-blue-500 hover:text-blue-700 underline"></button><!$><!/>`), _tmpl$48 = /* @__PURE__ */ template(`<div class="mt-2 border border-gray-200 dark:border-gray-700 rounded-md text-xs font-mono"><button type=button class="w-full px-3 py-1.5 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 flex items-center gap-1"><span></span>Debug trace (<!$><!/>/<!$><!/> prefilled)</button><!$><!/>`), _tmpl$49 = /* @__PURE__ */ template(`<div> prefill: <!$><!/>`), _tmpl$50 = /* @__PURE__ */ template(`<div class=text-amber-500> prefill: (none)`), _tmpl$51 = /* @__PURE__ */ template(`<div> source: <!$><!/>`), _tmpl$52 = /* @__PURE__ */ template(`<div> displayHint: "<!$><!/>"`), _tmpl$53 = /* @__PURE__ */ template(`<div> muted: true`), _tmpl$54 = /* @__PURE__ */ template(`<div> prefillMode: <!$><!/>`), _tmpl$55 = /* @__PURE__ */ template(`<div> valueFormat: /<!$><!/>/`), _tmpl$56 = /* @__PURE__ */ template(`<div class="pl-2 border-l-2 border-gray-200 dark:border-gray-600 space-y-0.5"><div class="text-gray-800 dark:text-gray-200 font-medium"><!$><!/>:</div><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$57 = /* @__PURE__ */ template(`<div>→ submitted: <!$><!/>`), _tmpl$58 = /* @__PURE__ */ template(`<div class=pl-2><!$><!/>: <!$><!/> "<!$><!/>" → "<!$><!/>" (<!$><!/>ms)`), _tmpl$59 = /* @__PURE__ */ template(`<div class="flex justify-end"><button type=button class="px-3 py-1.5 text-sm font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors flex items-center gap-1"><!$><!/> <svg class="w-3.5 h-3.5"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 5l7 7-7 7">`), _tmpl$60 = /* @__PURE__ */ template(`<div class=space-y-3><!$><!/><!$><!/>`), _tmpl$61 = /* @__PURE__ */ template(`<span class="text-xs font-normal text-gray-500 dark:text-gray-400">— <!$><!/>`), _tmpl$62 = /* @__PURE__ */ template(`<div class="mt-2 ml-6">`), _tmpl$63 = /* @__PURE__ */ template(`<div><div><span></span><!$><!/><!$><!/></div><!$><!/>`), _tmpl$64 = /* @__PURE__ */ template(`<p class="text-sm font-medium text-gray-800 dark:text-gray-200 mb-2">`), _tmpl$65 = /* @__PURE__ */ template(`<span class=text-amber-600>`), _tmpl$66 = /* @__PURE__ */ template(`<div class="mb-2 flex items-center gap-2 text-xs"><span></span><!$><!/>`), _tmpl$67 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/><!$><!/><div class="flex flex-wrap gap-2">`), _tmpl$68 = /* @__PURE__ */ template(`<span class="font-medium text-gray-800 dark:text-gray-200">`), _tmpl$69 = /* @__PURE__ */ template(`<span class=ml-1>&mdash; <!$><!/>`), _tmpl$70 = /* @__PURE__ */ template(`<div class="mb-2 p-2 rounded bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-xs text-gray-600 dark:text-gray-400"><!$><!/><!$><!/>`), _tmpl$71 = /* @__PURE__ */ template(`<span class=mr-1>`), _tmpl$72 = /* @__PURE__ */ template(`<div class=space-y-2><div class=space-y-1.5></div><!$><!/>`), _tmpl$73 = /* @__PURE__ */ template(`<div class="flex items-center gap-2 text-sm"><span></span><span class="text-gray-900 dark:text-white">`), _tmpl$74 = /* @__PURE__ */ template(`<div class="flex items-start gap-1.5 text-xs text-amber-600 dark:text-amber-400"><span class=flex-shrink-0>⚠️</span><span>`), _tmpl$75 = /* @__PURE__ */ template(`<span class=italic>&mdash; <!$><!/>`), _tmpl$76 = /* @__PURE__ */ template(`<div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400"><span><!$><!/> <!$><!/></span><!$><!/>`), _tmpl$77 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-2">`), _tmpl$78 = /* @__PURE__ */ template(`<div class="flex gap-1"><input type=text class="flex-1 px-3 py-2 text-sm border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none"><button type=button class="px-3 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700">`), _tmpl$79 = /* @__PURE__ */ template(`<div class=space-y-3><p class="text-sm text-gray-700 dark:text-gray-300"></p><!$><!/><!$><!/>`), _tmpl$80 = /* @__PURE__ */ template(`<span>`), _tmpl$81 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400 italic">"<!$><!/>"`), _tmpl$82 = /* @__PURE__ */ template(`<div class="mt-2 px-3 py-2 bg-blue-50 dark:bg-blue-900/10 rounded-lg text-sm text-blue-700 dark:text-blue-300"><span class=font-medium></span> <!$><!/>`), _tmpl$83 = /* @__PURE__ */ template(`<button type=button class="text-xs text-blue-600 dark:text-blue-400 hover:underline flex items-center gap-1">&#9998; <!$><!/>`), _tmpl$84 = /* @__PURE__ */ template(`<div class=space-y-2><!$><!/><div class=space-y-1></div><!$><!/><!$><!/>`), _tmpl$85 = /* @__PURE__ */ template(`<div class="flex gap-2 text-sm"><span class="text-gray-500 dark:text-gray-400 font-medium min-w-[80px]"><!$><!/>:</span><span class="text-gray-900 dark:text-white">`), _tmpl$86 = /* @__PURE__ */ template(`<div class="flex items-center gap-1 flex-wrap">`), _tmpl$87 = /* @__PURE__ */ template(`<div class=space-y-2>`), _tmpl$88 = /* @__PURE__ */ template(`<span class="ml-1 text-xs text-gray-500 dark:text-gray-400">— <!$><!/>`), _tmpl$89 = /* @__PURE__ */ template(`<span class="ml-1 text-xs text-gray-400">(<!$><!/>ms)`), _tmpl$90 = /* @__PURE__ */ template(`<div><span class=flex-shrink-0></span><div><span></span><!$><!/><!$><!/>`), _tmpl$91 = /* @__PURE__ */ template(`<span class="text-[10px] opacity-75">`), _tmpl$92 = /* @__PURE__ */ template(`<div><span></span><span></span><!$><!/>`), _tmpl$93 = /* @__PURE__ */ template(`<button type=button>&#128260; <!$><!/>`), _tmpl$94 = /* @__PURE__ */ template(`<button type=button class="px-2 py-1 text-xs opacity-70 hover:opacity-100">&#9654; <!$><!/>`), _tmpl$95 = /* @__PURE__ */ template(`<pre class="mt-2 text-xs opacity-70 overflow-x-auto">`), _tmpl$96 = /* @__PURE__ */ template(`<div><div class="flex items-start gap-2"><span class=flex-shrink-0></span><div class=flex-1><p></p><div class="flex gap-2 mt-2"><!$><!/><!$><!/></div><!$><!/>`), _tmpl$97 = /* @__PURE__ */ template(`<span class="text-xs font-bold text-blue-600 dark:text-blue-400">`), _tmpl$98 = /* @__PURE__ */ template(`<p class="text-[10px] text-gray-400">`), _tmpl$99 = /* @__PURE__ */ template(`<div class="rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2"><div class="flex items-center justify-between mb-1.5"><span class="text-sm font-medium text-gray-900 dark:text-white"><!$><!/> <!$><!/></span><!$><!/></div><div class="flex flex-wrap gap-1.5 mb-1"></div><!$><!/>`), _tmpl$100 = /* @__PURE__ */ template(`<span><!$><!/> <!$><!/>`), _tmpl$101 = /* @__PURE__ */ template(`<div class=overflow-x-auto><table class="min-w-full text-xs"><thead><tr><th class="px-2 py-1 text-left text-gray-500 dark:text-gray-400"></th><th class="px-2 py-1 text-left font-medium text-blue-600 dark:text-blue-400"></th><th class="px-2 py-1 text-left font-medium text-purple-600 dark:text-purple-400"></th></tr></thead><tbody>`), _tmpl$102 = /* @__PURE__ */ template(`<tr><td class="px-2 py-1 font-mono text-gray-500 dark:text-gray-400"></td><td class="px-2 py-1 text-gray-900 dark:text-white"></td><td class="px-2 py-1 text-gray-900 dark:text-white">`);
 const STATUS_BADGES = {
   loading: {
-    label: "Loading...",
+    labelKey: "statusLoading",
     class: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
   },
   ready: {
-    label: "Action available",
+    labelKey: "statusActionAvailable",
     class: "bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-400"
   },
   waiting_human: {
-    label: "Your turn",
+    labelKey: "statusYourTurn",
     class: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 animate-pulse"
   },
   processing: {
-    label: "Processing...",
+    labelKey: "statusProcessing",
     class: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400"
   },
   complete: {
-    label: "Complete",
+    labelKey: "statusComplete",
     class: "bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400"
   },
+  // The error badge reuses the existing `scratchpadError` key ('Error').
   error: {
-    label: "Error",
+    labelKey: "scratchpadError",
     class: "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400"
   }
 };
 const ScratchpadPanel = (props) => {
   var _a;
+  const strings = useMCPUIStrings();
   const [collapsed, setCollapsed] = createSignal(false);
   const [localPreview, setLocalPreview] = createSignal(void 0);
   const [loadingAction, setLoadingAction] = createSignal(null);
@@ -150,7 +154,7 @@ const ScratchpadPanel = (props) => {
     if (previewTimer) clearTimeout(previewTimer);
   });
   return (() => {
-    var _el$ = getNextElement(_tmpl$12), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$7 = _el$5.nextSibling, [_el$8, _co$] = getNextMarker(_el$7.nextSibling), _el$9 = _el$8.nextSibling, [_el$0, _co$2] = getNextMarker(_el$9.nextSibling), _el$1 = _el$3.nextSibling, _el$10 = _el$1.firstChild, _el$12 = _el$10.nextSibling, [_el$13, _co$3] = getNextMarker(_el$12.nextSibling), _el$69 = _el$2.nextSibling, [_el$70, _co$16] = getNextMarker(_el$69.nextSibling), _el$53 = _el$70.nextSibling, _el$71 = _el$53.nextSibling, [_el$72, _co$17] = getNextMarker(_el$71.nextSibling);
+    var _el$ = getNextElement(_tmpl$12), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$7 = _el$5.nextSibling, [_el$8, _co$] = getNextMarker(_el$7.nextSibling), _el$9 = _el$8.nextSibling, [_el$0, _co$2] = getNextMarker(_el$9.nextSibling), _el$1 = _el$3.nextSibling, _el$10 = _el$1.firstChild, _el$12 = _el$10.nextSibling, [_el$13, _co$3] = getNextMarker(_el$12.nextSibling), _el$72 = _el$2.nextSibling, [_el$73, _co$17] = getNextMarker(_el$72.nextSibling), _el$56 = _el$73.nextSibling, _el$74 = _el$56.nextSibling, [_el$75, _co$18] = getNextMarker(_el$74.nextSibling);
     _el$2.$$click = () => isCollapsible() && setCollapsed(!collapsed());
     insert(_el$5, () => props.state.title);
     insert(_el$3, () => {
@@ -177,7 +181,7 @@ const ScratchpadPanel = (props) => {
         return _el$6;
       }
     }), _el$0, _co$2);
-    insert(_el$10, () => badge().label);
+    insert(_el$10, () => strings[badge().labelKey]);
     insert(_el$1, createComponent(Show, {
       get when() {
         return memo(() => !!isClosable())() && props.onClose;
@@ -189,6 +193,7 @@ const ScratchpadPanel = (props) => {
           e.stopPropagation();
           (_a2 = props.onClose) == null ? void 0 : _a2.call(props);
         };
+        effect(() => setAttribute(_el$11, "aria-label", strings.scratchpadClose));
         runHydrationEvents();
         return _el$11;
       }
@@ -198,7 +203,7 @@ const ScratchpadPanel = (props) => {
         return !collapsed();
       },
       get children() {
-        var _el$14 = getNextElement(_tmpl$10), _el$43 = _el$14.firstChild, [_el$44, _co$8] = getNextMarker(_el$43.nextSibling), _el$16 = _el$44.nextSibling, _el$45 = _el$16.nextSibling, [_el$46, _co$9] = getNextMarker(_el$45.nextSibling), _el$47 = _el$46.nextSibling, [_el$48, _co$0] = getNextMarker(_el$47.nextSibling), _el$49 = _el$48.nextSibling, [_el$50, _co$1] = getNextMarker(_el$49.nextSibling), _el$51 = _el$50.nextSibling, [_el$52, _co$10] = getNextMarker(_el$51.nextSibling);
+        var _el$14 = getNextElement(_tmpl$10), _el$46 = _el$14.firstChild, [_el$47, _co$9] = getNextMarker(_el$46.nextSibling), _el$16 = _el$47.nextSibling, _el$48 = _el$16.nextSibling, [_el$49, _co$0] = getNextMarker(_el$48.nextSibling), _el$50 = _el$49.nextSibling, [_el$51, _co$1] = getNextMarker(_el$50.nextSibling), _el$52 = _el$51.nextSibling, [_el$53, _co$10] = getNextMarker(_el$52.nextSibling), _el$54 = _el$53.nextSibling, [_el$55, _co$11] = getNextMarker(_el$54.nextSibling);
         insert(_el$14, createComponent(Show, {
           get when() {
             return memo(() => !!props.state.turnHistory)() && props.state.turnHistory.length > 0;
@@ -217,29 +222,29 @@ const ScratchpadPanel = (props) => {
                   return getNextElement(_tmpl$13);
                 }
               }), (() => {
-                var _el$74 = getNextElement(_tmpl$15), _el$80 = _el$74.firstChild, [_el$81, _co$19] = getNextMarker(_el$80.nextSibling), _el$75 = _el$81.nextSibling, _el$82 = _el$75.nextSibling, [_el$83, _co$20] = getNextMarker(_el$82.nextSibling), _el$84 = _el$83.nextSibling, [_el$85, _co$21] = getNextMarker(_el$84.nextSibling);
-                insert(_el$74, (() => {
+                var _el$77 = getNextElement(_tmpl$15), _el$83 = _el$77.firstChild, [_el$84, _co$20] = getNextMarker(_el$83.nextSibling), _el$78 = _el$84.nextSibling, _el$85 = _el$78.nextSibling, [_el$86, _co$21] = getNextMarker(_el$85.nextSibling), _el$87 = _el$86.nextSibling, [_el$88, _co$22] = getNextMarker(_el$87.nextSibling);
+                insert(_el$77, (() => {
                   var _c$ = memo(() => turn.status === "done");
                   return () => _c$() ? "✅" : turn.status === "active" ? "●" : "○";
-                })(), _el$81, _co$19);
-                insert(_el$74, () => turn.label, _el$83, _co$20);
-                insert(_el$74, createComponent(Show, {
+                })(), _el$84, _co$20);
+                insert(_el$77, () => turn.label, _el$86, _co$21);
+                insert(_el$77, createComponent(Show, {
                   get when() {
                     return turn.summary;
                   },
                   get children() {
-                    var _el$76 = getNextElement(_tmpl$14), _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling, [_el$79, _co$18] = getNextMarker(_el$78.nextSibling);
-                    insert(_el$76, () => turn.summary, _el$79, _co$18);
-                    return _el$76;
+                    var _el$79 = getNextElement(_tmpl$14), _el$80 = _el$79.firstChild, _el$81 = _el$80.nextSibling, [_el$82, _co$19] = getNextMarker(_el$81.nextSibling);
+                    insert(_el$79, () => turn.summary, _el$82, _co$19);
+                    return _el$79;
                   }
-                }), _el$85, _co$21);
-                effect(() => className(_el$74, `text-xs font-medium px-2 py-0.5 rounded-full ${turn.status === "done" ? "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400" : turn.status === "active" ? "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400" : turn.status === "skipped" ? "bg-gray-100 dark:bg-gray-700 text-gray-400 line-through" : "bg-gray-100 dark:bg-gray-700 text-gray-400"}`));
-                return _el$74;
+                }), _el$88, _co$22);
+                effect(() => className(_el$77, `text-xs font-medium px-2 py-0.5 rounded-full ${turn.status === "done" ? "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400" : turn.status === "active" ? "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400" : turn.status === "skipped" ? "bg-gray-100 dark:bg-gray-700 text-gray-400 line-through" : "bg-gray-100 dark:bg-gray-700 text-gray-400"}`));
+                return _el$77;
               })()]
             }));
             return _el$15;
           }
-        }), _el$44, _co$8);
+        }), _el$47, _co$9);
         insert(_el$16, createComponent(For, {
           get each() {
             return props.state.sections;
@@ -275,19 +280,19 @@ const ScratchpadPanel = (props) => {
                 return props.state.agentMessages;
               },
               children: (msg) => (() => {
-                var _el$86 = getNextElement(_tmpl$16), _el$87 = _el$86.firstChild, _el$88 = _el$87.nextSibling;
-                insert(_el$87, (() => {
+                var _el$89 = getNextElement(_tmpl$16), _el$90 = _el$89.firstChild, _el$91 = _el$90.nextSibling;
+                insert(_el$90, (() => {
                   var _c$2 = memo(() => msg.type === "warning");
                   return () => _c$2() ? "⚠️" : msg.type === "question" ? "❓" : "ℹ️";
                 })());
-                insert(_el$88, () => msg.text);
-                effect(() => className(_el$86, `flex items-start gap-2 text-sm rounded-lg px-3 py-2 ${msg.type === "warning" ? "bg-amber-50 dark:bg-amber-900/10 text-amber-700 dark:text-amber-400" : msg.type === "question" ? "bg-blue-50 dark:bg-blue-900/10 text-blue-700 dark:text-blue-400 border border-blue-200 dark:border-blue-800" : "bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-400"}`));
-                return _el$86;
+                insert(_el$91, () => msg.text);
+                effect(() => className(_el$89, `flex items-start gap-2 text-sm rounded-lg px-3 py-2 ${msg.type === "warning" ? "bg-amber-50 dark:bg-amber-900/10 text-amber-700 dark:text-amber-400" : msg.type === "question" ? "bg-blue-50 dark:bg-blue-900/10 text-blue-700 dark:text-blue-400 border border-blue-200 dark:border-blue-800" : "bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-400"}`));
+                return _el$89;
               })()
             }));
             return _el$17;
           }
-        }), _el$46, _co$9);
+        }), _el$49, _co$0);
         insert(_el$14, createComponent(Show, {
           get when() {
             return preview();
@@ -300,97 +305,103 @@ const ScratchpadPanel = (props) => {
               },
               get fallback() {
                 return [(() => {
-                  var _el$89 = getNextElement(_tmpl$17), _el$90 = _el$89.firstChild, _el$91 = _el$90.nextSibling;
-                  insert(_el$91, () => preview().count.toLocaleString());
-                  return _el$89;
-                })(), (() => {
-                  var _el$92 = getNextElement(_tmpl$18);
-                  insert(_el$92, () => preview().summary);
+                  var _el$92 = getNextElement(_tmpl$17), _el$93 = _el$92.firstChild, _el$94 = _el$93.nextSibling;
+                  insert(_el$93, () => strings.scratchpadPreview);
+                  insert(_el$94, () => preview().count.toLocaleString(strings.locale));
                   return _el$92;
+                })(), (() => {
+                  var _el$95 = getNextElement(_tmpl$18);
+                  insert(_el$95, () => preview().summary);
+                  return _el$95;
                 })(), createComponent(Show, {
                   get when() {
                     return memo(() => !!preview().rows)() && preview().rows.length > 0;
                   },
                   get children() {
-                    var _el$93 = getNextElement(_tmpl$19), _el$94 = _el$93.firstChild, _el$95 = _el$94.firstChild, _el$96 = _el$95.firstChild, _el$97 = _el$95.nextSibling;
-                    insert(_el$96, createComponent(For, {
+                    var _el$96 = getNextElement(_tmpl$19), _el$97 = _el$96.firstChild, _el$98 = _el$97.firstChild, _el$99 = _el$98.firstChild, _el$100 = _el$98.nextSibling;
+                    insert(_el$99, createComponent(For, {
                       get each() {
                         return Object.keys(preview().rows[0]);
                       },
                       children: (k) => (() => {
-                        var _el$98 = getNextElement(_tmpl$20);
-                        insert(_el$98, k);
-                        return _el$98;
+                        var _el$101 = getNextElement(_tmpl$20);
+                        insert(_el$101, k);
+                        return _el$101;
                       })()
                     }));
-                    insert(_el$97, createComponent(For, {
+                    insert(_el$100, createComponent(For, {
                       get each() {
                         return preview().rows.slice(0, 5);
                       },
                       children: (row) => (() => {
-                        var _el$99 = getNextElement(_tmpl$21);
-                        insert(_el$99, createComponent(For, {
+                        var _el$102 = getNextElement(_tmpl$21);
+                        insert(_el$102, createComponent(For, {
                           get each() {
                             return Object.values(row);
                           },
                           children: (v) => (() => {
-                            var _el$100 = getNextElement(_tmpl$22);
-                            insert(_el$100, () => String(v));
-                            return _el$100;
+                            var _el$103 = getNextElement(_tmpl$22);
+                            insert(_el$103, () => String(v));
+                            return _el$103;
                           })()
                         }));
-                        return _el$99;
+                        return _el$102;
                       })()
                     }));
-                    return _el$93;
+                    return _el$96;
                   }
                 })];
               },
               get children() {
                 var _el$19 = getNextElement(_tmpl$5), _el$20 = _el$19.firstChild, _el$21 = _el$20.nextSibling, _el$22 = _el$21.nextSibling;
+                insert(_el$21, () => strings.scratchpadNoResults);
                 _el$22.$$click = () => {
                   var _a2;
                   return (_a2 = props.onAction) == null ? void 0 : _a2.call(props, "refine_filters");
                 };
+                insert(_el$22, () => strings.scratchpadModifyFilters);
                 runHydrationEvents();
                 return _el$19;
               }
             }));
             return _el$18;
           }
-        }), _el$48, _co$0);
+        }), _el$51, _co$1);
         insert(_el$14, createComponent(Show, {
           get when() {
             return memo(() => props.state.status === "error")() && props.state.error;
           },
           get children() {
-            var _el$23 = getNextElement(_tmpl$0), _el$24 = _el$23.firstChild, _el$25 = _el$24.firstChild, _el$26 = _el$25.nextSibling, _el$27 = _el$26.firstChild, _el$32 = _el$27.nextSibling, [_el$33, _co$5] = getNextMarker(_el$32.nextSibling), _el$34 = _el$24.nextSibling, _el$37 = _el$34.firstChild, [_el$38, _co$6] = getNextMarker(_el$37.nextSibling), _el$39 = _el$38.nextSibling, [_el$40, _co$7] = getNextMarker(_el$39.nextSibling);
+            var _el$23 = getNextElement(_tmpl$0), _el$24 = _el$23.firstChild, _el$25 = _el$24.firstChild, _el$26 = _el$25.nextSibling, _el$27 = _el$26.firstChild, _el$29 = _el$27.nextSibling, [_el$30, _co$4] = getNextMarker(_el$29.nextSibling), _el$31 = _el$24.nextSibling, _el$37 = _el$31.firstChild, [_el$38, _co$6] = getNextMarker(_el$37.nextSibling), _el$39 = _el$38.nextSibling, [_el$40, _co$7] = getNextMarker(_el$39.nextSibling);
             insert(_el$27, () => props.state.error.message);
             insert(_el$26, createComponent(Show, {
               get when() {
                 return props.state.error.code;
               },
               get children() {
-                var _el$28 = getNextElement(_tmpl$7), _el$29 = _el$28.firstChild, _el$30 = _el$29.nextSibling, [_el$31, _co$4] = getNextMarker(_el$30.nextSibling);
-                insert(_el$28, () => props.state.error.code, _el$31, _co$4);
+                var _el$28 = getNextElement(_tmpl$7);
+                insert(_el$28, () => formatMCPUIString(strings.scratchpadErrorCode, {
+                  code: props.state.error.code
+                }));
                 return _el$28;
               }
-            }), _el$33, _co$5);
-            insert(_el$34, createComponent(Show, {
+            }), _el$30, _co$4);
+            insert(_el$31, createComponent(Show, {
               get when() {
                 return props.state.error.retryable !== false;
               },
               get children() {
-                var _el$35 = getNextElement(_tmpl$8);
-                _el$35.$$click = () => {
+                var _el$32 = getNextElement(_tmpl$8), _el$33 = _el$32.firstChild, _el$34 = _el$33.nextSibling, [_el$35, _co$5] = getNextMarker(_el$34.nextSibling);
+                _el$32.$$click = () => {
                   var _a2;
                   return (_a2 = props.onRetry) == null ? void 0 : _a2.call(props);
                 };
+                insert(_el$32, () => strings.retry, _el$35, _co$5);
                 runHydrationEvents();
-                return _el$35;
+                return _el$32;
               }
             }), _el$38, _co$6);
-            insert(_el$34, createComponent(Show, {
+            insert(_el$31, createComponent(Show, {
               get when() {
                 return props.onClose;
               },
@@ -400,47 +411,49 @@ const ScratchpadPanel = (props) => {
                   var _a2;
                   return (_a2 = props.onClose) == null ? void 0 : _a2.call(props);
                 };
+                insert(_el$36, () => strings.scratchpadClose);
                 runHydrationEvents();
                 return _el$36;
               }
             }), _el$40, _co$7);
             return _el$23;
           }
-        }), _el$50, _co$1);
+        }), _el$53, _co$10);
         insert(_el$14, createComponent(Show, {
           get when() {
             return memo(() => props.state.status === "waiting_human")() && hasFilters();
           },
           get children() {
-            var _el$41 = getNextElement(_tmpl$1), _el$42 = _el$41.firstChild;
+            var _el$41 = getNextElement(_tmpl$1), _el$42 = _el$41.firstChild, _el$43 = _el$42.firstChild, _el$44 = _el$43.nextSibling, [_el$45, _co$8] = getNextMarker(_el$44.nextSibling);
             _el$42.$$click = () => handleAction("search", {
               filters: props.state.filters
             });
+            insert(_el$42, () => strings.scratchpadSearch, _el$45, _co$8);
             runHydrationEvents();
             return _el$41;
           }
-        }), _el$52, _co$10);
+        }), _el$55, _co$11);
         effect((_$p) => setStyleProperty(_el$14, "max-height", props.maxHeight || "500px"));
         return _el$14;
       }
-    }), _el$70, _co$16);
+    }), _el$73, _co$17);
     insert(_el$, createComponent(Show, {
       get when() {
         return props.debugOverlay;
       },
       get children() {
-        var _el$54 = getNextElement(_tmpl$11), _el$59 = _el$54.firstChild, [_el$60, _co$11] = getNextMarker(_el$59.nextSibling), _el$55 = _el$60.nextSibling, _el$61 = _el$55.nextSibling, [_el$62, _co$12] = getNextMarker(_el$61.nextSibling), _el$56 = _el$62.nextSibling, _el$63 = _el$56.nextSibling, [_el$64, _co$13] = getNextMarker(_el$63.nextSibling), _el$57 = _el$64.nextSibling, _el$65 = _el$57.nextSibling, [_el$66, _co$14] = getNextMarker(_el$65.nextSibling), _el$58 = _el$66.nextSibling, _el$67 = _el$58.nextSibling, [_el$68, _co$15] = getNextMarker(_el$67.nextSibling);
-        insert(_el$54, () => props.state.id, _el$60, _co$11);
-        insert(_el$54, eventCount, _el$62, _co$12);
-        insert(_el$54, () => {
+        var _el$57 = getNextElement(_tmpl$11), _el$62 = _el$57.firstChild, [_el$63, _co$12] = getNextMarker(_el$62.nextSibling), _el$58 = _el$63.nextSibling, _el$64 = _el$58.nextSibling, [_el$65, _co$13] = getNextMarker(_el$64.nextSibling), _el$59 = _el$65.nextSibling, _el$66 = _el$59.nextSibling, [_el$67, _co$14] = getNextMarker(_el$66.nextSibling), _el$60 = _el$67.nextSibling, _el$68 = _el$60.nextSibling, [_el$69, _co$15] = getNextMarker(_el$68.nextSibling), _el$61 = _el$69.nextSibling, _el$70 = _el$61.nextSibling, [_el$71, _co$16] = getNextMarker(_el$70.nextSibling);
+        insert(_el$57, () => props.state.id, _el$63, _co$12);
+        insert(_el$57, eventCount, _el$65, _co$13);
+        insert(_el$57, () => {
           var _a2;
           return ((_a2 = props.state.sections) == null ? void 0 : _a2.length) || 0;
-        }, _el$64, _co$13);
-        insert(_el$54, () => props.state.status, _el$66, _co$14);
-        insert(_el$54, lastEvent, _el$68, _co$15);
-        return _el$54;
+        }, _el$67, _co$14);
+        insert(_el$57, () => props.state.status, _el$69, _co$15);
+        insert(_el$57, lastEvent, _el$71, _co$16);
+        return _el$57;
       }
-    }), _el$72, _co$17);
+    }), _el$75, _co$18);
     effect((_p$) => {
       var _v$ = `w-full bg-white dark:bg-gray-800 rounded-xl border shadow-lg overflow-visible ${props.state.status === "waiting_human" ? "border-blue-300 dark:border-blue-600" : "border-gray-200 dark:border-gray-700"} ${props.pinned ? "sticky top-0 z-40" : ""}`, _v$2 = `flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-700 ${isCollapsible() ? "cursor-pointer select-none hover:bg-gray-50 dark:hover:bg-gray-750" : ""}`, _v$3 = `px-2 py-0.5 text-xs font-medium rounded-full ${badge().class}`;
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
@@ -468,9 +481,9 @@ function parseContent(content) {
 }
 const SectionRenderer = (props) => {
   return (() => {
-    var _el$101 = getNextElement(_tmpl$24), _el$102 = _el$101.firstChild, _el$105 = _el$102.nextSibling, [_el$106, _co$22] = getNextMarker(_el$105.nextSibling);
-    insert(_el$102, () => props.section.title);
-    insert(_el$101, createComponent(Switch, {
+    var _el$104 = getNextElement(_tmpl$24), _el$105 = _el$104.firstChild, _el$108 = _el$105.nextSibling, [_el$109, _co$23] = getNextMarker(_el$108.nextSibling);
+    insert(_el$105, () => props.section.title);
+    insert(_el$104, createComponent(Switch, {
       get children() {
         return [createComponent(Match, {
           get when() {
@@ -505,9 +518,9 @@ const SectionRenderer = (props) => {
             return props.section.type === "message";
           },
           get children() {
-            var _el$103 = getNextElement(_tmpl$18);
-            insert(_el$103, () => String(props.section.content));
-            return _el$103;
+            var _el$106 = getNextElement(_tmpl$18);
+            insert(_el$106, () => String(props.section.content));
+            return _el$106;
           }
         }), createComponent(Match, {
           get when() {
@@ -768,40 +781,41 @@ const SectionRenderer = (props) => {
         }), createComponent(Match, {
           when: true,
           get children() {
-            var _el$104 = getNextElement(_tmpl$23);
-            insert(_el$104, () => JSON.stringify(props.section.content, null, 2));
-            return _el$104;
+            var _el$107 = getNextElement(_tmpl$23);
+            insert(_el$107, () => JSON.stringify(props.section.content, null, 2));
+            return _el$107;
           }
         })];
       }
-    }), _el$106, _co$22);
-    return _el$101;
+    }), _el$109, _co$23);
+    return _el$104;
   })();
 };
 const DataSection = (props) => {
   const entries = () => typeof props.content === "object" && props.content ? Object.entries(props.content) : [];
   return (() => {
-    var _el$107 = getNextElement(_tmpl$25);
-    insert(_el$107, createComponent(For, {
+    var _el$110 = getNextElement(_tmpl$25);
+    insert(_el$110, createComponent(For, {
       get each() {
         return entries();
       },
       children: ([k, v]) => (() => {
-        var _el$108 = getNextElement(_tmpl$26), _el$109 = _el$108.firstChild, _el$111 = _el$109.firstChild, [_el$112, _co$23] = getNextMarker(_el$111.nextSibling);
-        _el$112.nextSibling;
-        var _el$113 = _el$109.nextSibling;
-        insert(_el$109, k, _el$112, _co$23);
-        insert(_el$113, (() => {
+        var _el$111 = getNextElement(_tmpl$26), _el$112 = _el$111.firstChild, _el$114 = _el$112.firstChild, [_el$115, _co$24] = getNextMarker(_el$114.nextSibling);
+        _el$115.nextSibling;
+        var _el$116 = _el$112.nextSibling;
+        insert(_el$112, k, _el$115, _co$24);
+        insert(_el$116, (() => {
           var _c$3 = memo(() => !!Array.isArray(v));
           return () => _c$3() ? v.join(", ") : String(v);
         })());
-        return _el$108;
+        return _el$111;
       })()
     }));
-    return _el$107;
+    return _el$110;
   })();
 };
 const InteractiveFilterSection = (props) => {
+  const strings = useMCPUIStrings();
   const [editingKey, setEditingKey] = createSignal(null);
   const [editValue, setEditValue] = createSignal("");
   const filterDefs = () => {
@@ -832,8 +846,8 @@ const InteractiveFilterSection = (props) => {
   };
   const getDef = (key) => filterDefs()[key] || {};
   return (() => {
-    var _el$114 = getNextElement(_tmpl$28), _el$116 = _el$114.firstChild, [_el$117, _co$24] = getNextMarker(_el$116.nextSibling), _el$118 = _el$117.nextSibling, [_el$119, _co$25] = getNextMarker(_el$118.nextSibling);
-    insert(_el$114, createComponent(For, {
+    var _el$117 = getNextElement(_tmpl$28), _el$119 = _el$117.firstChild, [_el$120, _co$25] = getNextMarker(_el$119.nextSibling), _el$121 = _el$120.nextSibling, [_el$122, _co$26] = getNextMarker(_el$121.nextSibling);
+    insert(_el$117, createComponent(For, {
       get each() {
         return allKeys();
       },
@@ -842,145 +856,153 @@ const InteractiveFilterSection = (props) => {
         const value = () => props.filters[key];
         const hasValue = () => value() !== void 0 && value() !== "";
         return (() => {
-          var _el$120 = getNextElement(_tmpl$34), _el$136 = _el$120.firstChild, [_el$137, _co$29] = getNextMarker(_el$136.nextSibling), _el$138 = _el$137.nextSibling, [_el$139, _co$30] = getNextMarker(_el$138.nextSibling);
-          insert(_el$120, createComponent(Show, {
+          var _el$123 = getNextElement(_tmpl$34), _el$139 = _el$123.firstChild, [_el$140, _co$30] = getNextMarker(_el$139.nextSibling), _el$141 = _el$140.nextSibling, [_el$142, _co$31] = getNextMarker(_el$141.nextSibling);
+          insert(_el$123, createComponent(Show, {
             get when() {
               return hasValue();
             },
             get fallback() {
               return (() => {
-                var _el$140 = getNextElement(_tmpl$35), _el$141 = _el$140.firstChild, _el$142 = _el$141.nextSibling, [_el$143, _co$31] = getNextMarker(_el$142.nextSibling);
-                _el$140.$$click = () => {
+                var _el$143 = getNextElement(_tmpl$35), _el$144 = _el$143.firstChild, _el$145 = _el$144.nextSibling, [_el$146, _co$32] = getNextMarker(_el$145.nextSibling);
+                _el$143.$$click = () => {
                   setEditingKey(key);
                   setEditValue("");
                 };
-                insert(_el$140, () => {
+                insert(_el$143, () => {
                   var _a;
                   return ((_a = def()) == null ? void 0 : _a.label) || key;
-                }, _el$143, _co$31);
+                }, _el$146, _co$32);
                 runHydrationEvents();
-                return _el$140;
+                return _el$143;
               })();
             },
             get children() {
-              var _el$121 = getNextElement(_tmpl$30), _el$122 = _el$121.firstChild, _el$123 = _el$122.firstChild, _el$125 = _el$123.firstChild, [_el$126, _co$26] = getNextMarker(_el$125.nextSibling);
-              _el$126.nextSibling;
-              var _el$127 = _el$123.nextSibling, _el$128 = _el$127.nextSibling, [_el$129, _co$27] = getNextMarker(_el$128.nextSibling), _el$131 = _el$122.nextSibling, [_el$132, _co$28] = getNextMarker(_el$131.nextSibling);
-              _el$122.$$click = () => {
+              var _el$124 = getNextElement(_tmpl$30), _el$125 = _el$124.firstChild, _el$126 = _el$125.firstChild, _el$128 = _el$126.firstChild, [_el$129, _co$27] = getNextMarker(_el$128.nextSibling);
+              _el$129.nextSibling;
+              var _el$130 = _el$126.nextSibling, _el$131 = _el$130.nextSibling, [_el$132, _co$28] = getNextMarker(_el$131.nextSibling), _el$134 = _el$125.nextSibling, [_el$135, _co$29] = getNextMarker(_el$134.nextSibling);
+              _el$125.$$click = () => {
                 setEditingKey(key);
                 setEditValue(String(value() || ""));
               };
-              insert(_el$123, () => {
+              insert(_el$126, () => {
                 var _a;
                 return ((_a = def()) == null ? void 0 : _a.label) || key;
-              }, _el$126, _co$26);
-              insert(_el$122, (() => {
+              }, _el$129, _co$27);
+              insert(_el$125, (() => {
                 var _c$4 = memo(() => !!Array.isArray(value()));
                 return () => _c$4() ? value().join(", ") : String(value());
-              })(), _el$129, _co$27);
-              insert(_el$121, createComponent(Show, {
+              })(), _el$132, _co$28);
+              insert(_el$124, createComponent(Show, {
                 get when() {
                   return props.onFilterChange;
                 },
                 get children() {
-                  var _el$130 = getNextElement(_tmpl$29);
-                  _el$130.$$click = () => removeFilter(key);
-                  setAttribute(_el$130, "aria-label", `Remove ${key}`);
+                  var _el$133 = getNextElement(_tmpl$29);
+                  _el$133.$$click = () => removeFilter(key);
+                  effect(() => setAttribute(_el$133, "aria-label", formatMCPUIString(strings.removeItem, {
+                    name: key
+                  })));
                   runHydrationEvents();
-                  return _el$130;
+                  return _el$133;
                 }
-              }), _el$132, _co$28);
+              }), _el$135, _co$29);
               runHydrationEvents();
-              return _el$121;
+              return _el$124;
             }
-          }), _el$137, _co$29);
-          insert(_el$120, createComponent(Show, {
+          }), _el$140, _co$30);
+          insert(_el$123, createComponent(Show, {
             get when() {
               return editingKey() === key;
             },
             get children() {
-              var _el$133 = getNextElement(_tmpl$33);
-              insert(_el$133, createComponent(Show, {
+              var _el$136 = getNextElement(_tmpl$33);
+              insert(_el$136, createComponent(Show, {
                 get when() {
                   var _a;
                   return (_a = def()) == null ? void 0 : _a.options;
                 },
                 get fallback() {
                   return (() => {
-                    var _el$144 = getNextElement(_tmpl$36), _el$145 = _el$144.firstChild, _el$146 = _el$145.nextSibling, _el$147 = _el$146.nextSibling;
-                    _el$144.addEventListener("submit", (e) => {
+                    var _el$147 = getNextElement(_tmpl$36), _el$148 = _el$147.firstChild, _el$149 = _el$148.nextSibling, _el$150 = _el$149.nextSibling;
+                    _el$147.addEventListener("submit", (e) => {
                       e.preventDefault();
                       setFilter(key, editValue());
                     });
-                    _el$145.$$input = (e) => setEditValue(e.currentTarget.value);
-                    _el$147.$$click = () => setEditingKey(null);
+                    _el$148.$$input = (e) => setEditValue(e.currentTarget.value);
+                    insert(_el$149, () => strings.ok);
+                    _el$150.$$click = () => setEditingKey(null);
+                    insert(_el$150, () => strings.cancel);
                     effect(() => {
                       var _a;
-                      return setAttribute(_el$145, "placeholder", ((_a = def()) == null ? void 0 : _a.placeholder) || key);
+                      return setAttribute(_el$148, "placeholder", ((_a = def()) == null ? void 0 : _a.placeholder) || key);
                     });
-                    effect(() => setProperty(_el$145, "value", editValue()));
+                    effect(() => setProperty(_el$148, "value", editValue()));
                     runHydrationEvents();
-                    return _el$144;
+                    return _el$147;
                   })();
                 },
                 get children() {
                   return [(() => {
-                    var _el$134 = getNextElement(_tmpl$31);
-                    insert(_el$134, createComponent(For, {
+                    var _el$137 = getNextElement(_tmpl$31);
+                    insert(_el$137, createComponent(For, {
                       get each() {
                         return def().options;
                       },
                       children: (opt) => (() => {
-                        var _el$148 = getNextElement(_tmpl$38), _el$150 = _el$148.firstChild, [_el$151, _co$32] = getNextMarker(_el$150.nextSibling), _el$152 = _el$151.nextSibling, [_el$153, _co$33] = getNextMarker(_el$152.nextSibling);
-                        _el$148.$$click = () => setFilter(key, opt.value);
-                        insert(_el$148, () => opt.label, _el$151, _co$32);
-                        insert(_el$148, createComponent(Show, {
+                        var _el$151 = getNextElement(_tmpl$38), _el$153 = _el$151.firstChild, [_el$154, _co$33] = getNextMarker(_el$153.nextSibling), _el$155 = _el$154.nextSibling, [_el$156, _co$34] = getNextMarker(_el$155.nextSibling);
+                        _el$151.$$click = () => setFilter(key, opt.value);
+                        insert(_el$151, () => opt.label, _el$154, _co$33);
+                        insert(_el$151, createComponent(Show, {
                           get when() {
                             return String(value()) === opt.value;
                           },
                           get children() {
                             return getNextElement(_tmpl$37);
                           }
-                        }), _el$153, _co$33);
-                        effect(() => className(_el$148, `w-full text-left px-2 py-1.5 text-sm rounded hover:bg-blue-50 dark:hover:bg-blue-900/20 ${String(value()) === opt.value ? "text-blue-600 dark:text-blue-400 bg-blue-50/50 dark:bg-blue-900/10" : "text-gray-900 dark:text-white"}`));
+                        }), _el$156, _co$34);
+                        effect(() => className(_el$151, `w-full text-left px-2 py-1.5 text-sm rounded hover:bg-blue-50 dark:hover:bg-blue-900/20 ${String(value()) === opt.value ? "text-blue-600 dark:text-blue-400 bg-blue-50/50 dark:bg-blue-900/10" : "text-gray-900 dark:text-white"}`));
                         runHydrationEvents();
-                        return _el$148;
+                        return _el$151;
                       })()
                     }));
-                    return _el$134;
+                    return _el$137;
                   })(), (() => {
-                    var _el$135 = getNextElement(_tmpl$32);
-                    _el$135.$$click = () => setEditingKey(null);
+                    var _el$138 = getNextElement(_tmpl$32);
+                    _el$138.$$click = () => setEditingKey(null);
+                    insert(_el$138, () => strings.cancel);
                     runHydrationEvents();
-                    return _el$135;
+                    return _el$138;
                   })()];
                 }
               }));
-              return _el$133;
+              return _el$136;
             }
-          }), _el$139, _co$30);
-          return _el$120;
+          }), _el$142, _co$31);
+          return _el$123;
         })();
       }
-    }), _el$117, _co$24);
-    insert(_el$114, createComponent(Show, {
+    }), _el$120, _co$25);
+    insert(_el$117, createComponent(Show, {
       get when() {
         return allKeys().length === 0;
       },
       get children() {
-        return getNextElement(_tmpl$27);
+        var _el$118 = getNextElement(_tmpl$27);
+        insert(_el$118, () => strings.scratchpadNoFilters);
+        return _el$118;
       }
-    }), _el$119, _co$25);
-    return _el$114;
+    }), _el$122, _co$26);
+    return _el$117;
   })();
 };
 const EmbeddedFormSection = (props) => {
+  const strings = useMCPUIStrings();
   const [dynamicOptions, setDynamicOptions] = createSignal({});
   const config = () => {
     const c = props.content;
     return {
       fields: (c == null ? void 0 : c.fields) || [],
-      submitLabel: (c == null ? void 0 : c.submitLabel) || "Submit",
+      submitLabel: (c == null ? void 0 : c.submitLabel) || strings.submit,
       autoSubmitDelay: c == null ? void 0 : c.autoSubmitDelay
     };
   };
@@ -1119,41 +1141,42 @@ const EmbeddedFormSection = (props) => {
     },
     get fallback() {
       return (() => {
-        var _el$184 = getNextElement(_tmpl$42), _el$185 = _el$184.firstChild, _el$186 = _el$185.nextSibling, _el$188 = _el$186.firstChild, [_el$189, _co$43] = getNextMarker(_el$188.nextSibling);
-        _el$189.nextSibling;
-        var _el$190 = _el$186.nextSibling, _el$191 = _el$190.nextSibling;
-        insert(_el$185, () => config().fields.map((f) => f.displayHint || f.prefill).join(", "));
-        insert(_el$186, countdown, _el$189, _co$43);
-        _el$190.$$click = () => {
+        var _el$170 = getNextElement(_tmpl$42), _el$171 = _el$170.firstChild, _el$172 = _el$171.nextSibling, _el$174 = _el$172.firstChild, [_el$175, _co$38] = getNextMarker(_el$174.nextSibling);
+        _el$175.nextSibling;
+        var _el$176 = _el$172.nextSibling, _el$177 = _el$176.nextSibling;
+        insert(_el$171, () => config().fields.map((f) => f.displayHint || f.prefill).join(", "));
+        insert(_el$172, countdown, _el$175, _co$38);
+        _el$176.$$click = () => {
           setExpanded(true);
           cancelCountdown();
           setUserInteracted(true);
         };
-        _el$191.$$click = () => {
+        insert(_el$176, () => strings.scratchpadEdit);
+        _el$177.$$click = () => {
           cancelCountdown();
           setUserInteracted(true);
         };
         runHydrationEvents();
-        return _el$184;
+        return _el$170;
       })();
     },
     get children() {
-      var _el$154 = getNextElement(_tmpl$41), _el$178 = _el$154.firstChild, [_el$179, _co$40] = getNextMarker(_el$178.nextSibling), _el$180 = _el$179.nextSibling, [_el$181, _co$41] = getNextMarker(_el$180.nextSibling), _el$182 = _el$181.nextSibling, [_el$183, _co$42] = getNextMarker(_el$182.nextSibling), _el$176 = _el$183.nextSibling, _el$177 = _el$176.firstChild;
-      _el$154.addEventListener("submit", handleSubmit);
-      insert(_el$154, createComponent(Show, {
+      var _el$157 = getNextElement(_tmpl$41), _el$164 = _el$157.firstChild, [_el$165, _co$35] = getNextMarker(_el$164.nextSibling), _el$166 = _el$165.nextSibling, [_el$167, _co$36] = getNextMarker(_el$166.nextSibling), _el$168 = _el$167.nextSibling, [_el$169, _co$37] = getNextMarker(_el$168.nextSibling), _el$162 = _el$169.nextSibling, _el$163 = _el$162.firstChild;
+      _el$157.addEventListener("submit", handleSubmit);
+      insert(_el$157, createComponent(Show, {
         get when() {
           return prefillSummary().prefilled > 0;
         },
         get children() {
-          var _el$155 = getNextElement(_tmpl$39), _el$159 = _el$155.firstChild, [_el$160, _co$34] = getNextMarker(_el$159.nextSibling), _el$156 = _el$160.nextSibling, _el$161 = _el$156.nextSibling, [_el$162, _co$35] = getNextMarker(_el$161.nextSibling), _el$157 = _el$162.nextSibling, _el$163 = _el$157.nextSibling, [_el$164, _co$36] = getNextMarker(_el$163.nextSibling), _el$158 = _el$164.nextSibling, _el$165 = _el$158.nextSibling, [_el$166, _co$37] = getNextMarker(_el$165.nextSibling);
-          insert(_el$155, () => prefillSummary().prefilled, _el$160, _co$34);
-          insert(_el$155, () => prefillSummary().prefilled > 1 ? "s" : "", _el$162, _co$35);
-          insert(_el$155, () => prefillSummary().prefilled > 1 ? "s" : "", _el$164, _co$36);
-          insert(_el$155, () => prefillSummary().total, _el$166, _co$37);
-          return _el$155;
+          var _el$158 = getNextElement(_tmpl$39);
+          insert(_el$158, () => formatMCPUIString(prefillSummary().prefilled === 1 ? strings.formPrefilledOne : strings.formPrefilledMany, {
+            count: prefillSummary().prefilled,
+            total: prefillSummary().total
+          }));
+          return _el$158;
         }
-      }), _el$179, _co$40);
-      insert(_el$154, createComponent(For, {
+      }), _el$165, _co$35);
+      insert(_el$157, createComponent(For, {
         get each() {
           return config().fields;
         },
@@ -1167,28 +1190,29 @@ const EmbeddedFormSection = (props) => {
           onChange: (val) => updateField(field.name, val),
           formData
         })
-      }), _el$181, _co$41);
-      insert(_el$154, createComponent(Show, {
+      }), _el$167, _co$36);
+      insert(_el$157, createComponent(Show, {
         get when() {
           return countdown() != null;
         },
         get children() {
-          var _el$167 = getNextElement(_tmpl$40), _el$168 = _el$167.firstChild, _el$171 = _el$168.firstChild, [_el$172, _co$38] = getNextMarker(_el$171.nextSibling), _el$169 = _el$172.nextSibling, _el$173 = _el$169.nextSibling, [_el$174, _co$39] = getNextMarker(_el$173.nextSibling);
-          _el$174.nextSibling;
-          var _el$175 = _el$168.nextSibling;
-          insert(_el$168, () => config().submitLabel, _el$172, _co$38);
-          insert(_el$168, countdown, _el$174, _co$39);
-          _el$175.$$click = () => {
+          var _el$159 = getNextElement(_tmpl$40), _el$160 = _el$159.firstChild, _el$161 = _el$160.nextSibling;
+          insert(_el$160, () => formatMCPUIString(strings.formSubmitCountdown, {
+            label: config().submitLabel,
+            seconds: countdown()
+          }));
+          _el$161.$$click = () => {
             cancelCountdown();
             setUserInteracted(true);
           };
+          insert(_el$161, () => strings.cancel);
           runHydrationEvents();
-          return _el$167;
+          return _el$159;
         }
-      }), _el$183, _co$42);
-      insert(_el$177, () => config().submitLabel);
-      effect(() => setAttribute(_el$154, "id", `scratchpad-form-${props.sectionId}`));
-      return _el$154;
+      }), _el$169, _co$37);
+      insert(_el$163, () => config().submitLabel);
+      effect(() => setAttribute(_el$157, "id", `scratchpad-form-${props.sectionId}`));
+      return _el$157;
     }
   }), createComponent(Show, {
     get when() {
@@ -1219,6 +1243,7 @@ const EmbeddedFormSection = (props) => {
   })];
 };
 const FormDebugTrace = (props) => {
+  const strings = useMCPUIStrings();
   const [open, setOpen] = createSignal(false);
   const [showRaw, setShowRaw] = createSignal(false);
   const prefilledCount = () => props.fields.filter((f) => f.prefill != null).length;
@@ -1235,103 +1260,101 @@ const FormDebugTrace = (props) => {
     return (_a = props.rawContent) == null ? void 0 : _a._debug;
   };
   return (() => {
-    var _el$192 = getNextElement(_tmpl$48), _el$193 = _el$192.firstChild, _el$194 = _el$193.firstChild, _el$195 = _el$194.nextSibling, _el$198 = _el$195.nextSibling, [_el$199, _co$44] = getNextMarker(_el$198.nextSibling), _el$196 = _el$199.nextSibling, _el$200 = _el$196.nextSibling, [_el$201, _co$45] = getNextMarker(_el$200.nextSibling);
-    _el$201.nextSibling;
-    var _el$256 = _el$193.nextSibling, [_el$257, _co$62] = getNextMarker(_el$256.nextSibling);
-    _el$193.$$click = () => setOpen(!open());
-    insert(_el$194, () => open() ? "▾" : "▸");
-    insert(_el$193, prefilledCount, _el$199, _co$44);
-    insert(_el$193, () => props.fields.length, _el$201, _co$45);
-    insert(_el$192, createComponent(Show, {
+    var _el$178 = getNextElement(_tmpl$48), _el$179 = _el$178.firstChild, _el$180 = _el$179.firstChild, _el$181 = _el$180.nextSibling, _el$184 = _el$181.nextSibling, [_el$185, _co$39] = getNextMarker(_el$184.nextSibling), _el$182 = _el$185.nextSibling, _el$186 = _el$182.nextSibling, [_el$187, _co$40] = getNextMarker(_el$186.nextSibling);
+    _el$187.nextSibling;
+    var _el$239 = _el$179.nextSibling, [_el$240, _co$56] = getNextMarker(_el$239.nextSibling);
+    _el$179.$$click = () => setOpen(!open());
+    insert(_el$180, () => open() ? "▾" : "▸");
+    insert(_el$179, prefilledCount, _el$185, _co$39);
+    insert(_el$179, () => props.fields.length, _el$187, _co$40);
+    insert(_el$178, createComponent(Show, {
       get when() {
         return open();
       },
       get children() {
-        var _el$202 = getNextElement(_tmpl$47), _el$203 = _el$202.firstChild, _el$204 = _el$203.firstChild, _el$207 = _el$204.nextSibling, [_el$208, _co$46] = getNextMarker(_el$207.nextSibling), _el$205 = _el$208.nextSibling, _el$209 = _el$205.nextSibling, [_el$210, _co$47] = getNextMarker(_el$209.nextSibling);
-        _el$210.nextSibling;
-        var _el$252 = _el$203.nextSibling, [_el$253, _co$60] = getNextMarker(_el$252.nextSibling), _el$211 = _el$253.nextSibling, _el$212 = _el$211.firstChild, _el$217 = _el$212.nextSibling, [_el$218, _co$49] = getNextMarker(_el$217.nextSibling), _el$219 = _el$218.nextSibling, [_el$220, _co$50] = getNextMarker(_el$219.nextSibling), _el$213 = _el$220.nextSibling, _el$214 = _el$213.firstChild, _el$215 = _el$214.nextSibling, [_el$216, _co$48] = getNextMarker(_el$215.nextSibling), _el$254 = _el$211.nextSibling, [_el$255, _co$61] = getNextMarker(_el$254.nextSibling), _el$244 = _el$255.nextSibling, _el$245 = _el$244.firstChild, _el$247 = _el$245.firstChild, [_el$248, _co$58] = getNextMarker(_el$247.nextSibling);
-        _el$248.nextSibling;
-        var _el$250 = _el$245.nextSibling, [_el$251, _co$59] = getNextMarker(_el$250.nextSibling);
-        insert(_el$203, () => props.fields.length, _el$208, _co$46);
-        insert(_el$203, prefilledCount, _el$210, _co$47);
-        insert(_el$202, createComponent(For, {
+        var _el$188 = getNextElement(_tmpl$47), _el$189 = _el$188.firstChild, _el$190 = _el$189.firstChild, _el$193 = _el$190.nextSibling, [_el$194, _co$41] = getNextMarker(_el$193.nextSibling), _el$191 = _el$194.nextSibling, _el$195 = _el$191.nextSibling, [_el$196, _co$42] = getNextMarker(_el$195.nextSibling);
+        _el$196.nextSibling;
+        var _el$235 = _el$189.nextSibling, [_el$236, _co$54] = getNextMarker(_el$235.nextSibling), _el$197 = _el$236.nextSibling, _el$198 = _el$197.firstChild, _el$203 = _el$198.nextSibling, [_el$204, _co$44] = getNextMarker(_el$203.nextSibling), _el$205 = _el$204.nextSibling, [_el$206, _co$45] = getNextMarker(_el$205.nextSibling), _el$199 = _el$206.nextSibling, _el$200 = _el$199.firstChild, _el$201 = _el$200.nextSibling, [_el$202, _co$43] = getNextMarker(_el$201.nextSibling), _el$237 = _el$197.nextSibling, [_el$238, _co$55] = getNextMarker(_el$237.nextSibling), _el$230 = _el$238.nextSibling, _el$231 = _el$230.firstChild, _el$233 = _el$231.nextSibling, [_el$234, _co$53] = getNextMarker(_el$233.nextSibling);
+        insert(_el$189, () => props.fields.length, _el$194, _co$41);
+        insert(_el$189, prefilledCount, _el$196, _co$42);
+        insert(_el$188, createComponent(For, {
           get each() {
             return props.fields;
           },
           children: (field) => (() => {
-            var _el$258 = getNextElement(_tmpl$56), _el$259 = _el$258.firstChild, _el$261 = _el$259.firstChild, [_el$262, _co$63] = getNextMarker(_el$261.nextSibling);
-            _el$262.nextSibling;
-            var _el$287 = _el$259.nextSibling, [_el$288, _co$69] = getNextMarker(_el$287.nextSibling), _el$289 = _el$288.nextSibling, [_el$290, _co$70] = getNextMarker(_el$289.nextSibling), _el$291 = _el$290.nextSibling, [_el$292, _co$71] = getNextMarker(_el$291.nextSibling), _el$293 = _el$292.nextSibling, [_el$294, _co$72] = getNextMarker(_el$293.nextSibling), _el$295 = _el$294.nextSibling, [_el$296, _co$73] = getNextMarker(_el$295.nextSibling), _el$297 = _el$296.nextSibling, [_el$298, _co$74] = getNextMarker(_el$297.nextSibling), _el$299 = _el$298.nextSibling, [_el$300, _co$75] = getNextMarker(_el$299.nextSibling), _el$301 = _el$300.nextSibling, [_el$302, _co$76] = getNextMarker(_el$301.nextSibling);
-            insert(_el$259, () => field.name, _el$262, _co$63);
-            insert(_el$258, createComponent(Show, {
+            var _el$241 = getNextElement(_tmpl$56), _el$242 = _el$241.firstChild, _el$244 = _el$242.firstChild, [_el$245, _co$57] = getNextMarker(_el$244.nextSibling);
+            _el$245.nextSibling;
+            var _el$270 = _el$242.nextSibling, [_el$271, _co$63] = getNextMarker(_el$270.nextSibling), _el$272 = _el$271.nextSibling, [_el$273, _co$64] = getNextMarker(_el$272.nextSibling), _el$274 = _el$273.nextSibling, [_el$275, _co$65] = getNextMarker(_el$274.nextSibling), _el$276 = _el$275.nextSibling, [_el$277, _co$66] = getNextMarker(_el$276.nextSibling), _el$278 = _el$277.nextSibling, [_el$279, _co$67] = getNextMarker(_el$278.nextSibling), _el$280 = _el$279.nextSibling, [_el$281, _co$68] = getNextMarker(_el$280.nextSibling), _el$282 = _el$281.nextSibling, [_el$283, _co$69] = getNextMarker(_el$282.nextSibling), _el$284 = _el$283.nextSibling, [_el$285, _co$70] = getNextMarker(_el$284.nextSibling);
+            insert(_el$242, () => field.name, _el$245, _co$57);
+            insert(_el$241, createComponent(Show, {
               get when() {
                 return field.prefill != null;
               },
               get children() {
-                var _el$263 = getNextElement(_tmpl$49), _el$264 = _el$263.firstChild, _el$265 = _el$264.nextSibling, [_el$266, _co$64] = getNextMarker(_el$265.nextSibling);
-                insert(_el$263, () => JSON.stringify(field.prefill), _el$266, _co$64);
-                return _el$263;
+                var _el$246 = getNextElement(_tmpl$49), _el$247 = _el$246.firstChild, _el$248 = _el$247.nextSibling, [_el$249, _co$58] = getNextMarker(_el$248.nextSibling);
+                insert(_el$246, () => JSON.stringify(field.prefill), _el$249, _co$58);
+                return _el$246;
               }
-            }), _el$288, _co$69);
-            insert(_el$258, createComponent(Show, {
+            }), _el$271, _co$63);
+            insert(_el$241, createComponent(Show, {
               get when() {
                 return !field.prefill;
               },
               get children() {
                 return getNextElement(_tmpl$50);
               }
-            }), _el$290, _co$70);
-            insert(_el$258, createComponent(Show, {
+            }), _el$273, _co$64);
+            insert(_el$241, createComponent(Show, {
               get when() {
                 return field.source;
               },
               get children() {
-                var _el$268 = getNextElement(_tmpl$51), _el$269 = _el$268.firstChild, _el$270 = _el$269.nextSibling, [_el$271, _co$65] = getNextMarker(_el$270.nextSibling);
-                insert(_el$268, () => field.source, _el$271, _co$65);
-                return _el$268;
+                var _el$251 = getNextElement(_tmpl$51), _el$252 = _el$251.firstChild, _el$253 = _el$252.nextSibling, [_el$254, _co$59] = getNextMarker(_el$253.nextSibling);
+                insert(_el$251, () => field.source, _el$254, _co$59);
+                return _el$251;
               }
-            }), _el$292, _co$71);
-            insert(_el$258, createComponent(Show, {
+            }), _el$275, _co$65);
+            insert(_el$241, createComponent(Show, {
               get when() {
                 return field.displayHint;
               },
               get children() {
-                var _el$272 = getNextElement(_tmpl$52), _el$273 = _el$272.firstChild, _el$275 = _el$273.nextSibling, [_el$276, _co$66] = getNextMarker(_el$275.nextSibling);
-                _el$276.nextSibling;
-                insert(_el$272, () => field.displayHint, _el$276, _co$66);
-                return _el$272;
+                var _el$255 = getNextElement(_tmpl$52), _el$256 = _el$255.firstChild, _el$258 = _el$256.nextSibling, [_el$259, _co$60] = getNextMarker(_el$258.nextSibling);
+                _el$259.nextSibling;
+                insert(_el$255, () => field.displayHint, _el$259, _co$60);
+                return _el$255;
               }
-            }), _el$294, _co$72);
-            insert(_el$258, createComponent(Show, {
+            }), _el$277, _co$66);
+            insert(_el$241, createComponent(Show, {
               get when() {
                 return field.muted;
               },
               get children() {
                 return getNextElement(_tmpl$53);
               }
-            }), _el$296, _co$73);
-            insert(_el$258, createComponent(Show, {
+            }), _el$279, _co$67);
+            insert(_el$241, createComponent(Show, {
               get when() {
                 return field.prefillMode;
               },
               get children() {
-                var _el$278 = getNextElement(_tmpl$54), _el$279 = _el$278.firstChild, _el$280 = _el$279.nextSibling, [_el$281, _co$67] = getNextMarker(_el$280.nextSibling);
-                insert(_el$278, () => field.prefillMode, _el$281, _co$67);
-                return _el$278;
+                var _el$261 = getNextElement(_tmpl$54), _el$262 = _el$261.firstChild, _el$263 = _el$262.nextSibling, [_el$264, _co$61] = getNextMarker(_el$263.nextSibling);
+                insert(_el$261, () => field.prefillMode, _el$264, _co$61);
+                return _el$261;
               }
-            }), _el$298, _co$74);
-            insert(_el$258, createComponent(Show, {
+            }), _el$281, _co$68);
+            insert(_el$241, createComponent(Show, {
               get when() {
                 return field.valueFormat;
               },
               get children() {
-                var _el$282 = getNextElement(_tmpl$55), _el$283 = _el$282.firstChild, _el$285 = _el$283.nextSibling, [_el$286, _co$68] = getNextMarker(_el$285.nextSibling);
-                _el$286.nextSibling;
-                insert(_el$282, () => field.valueFormat, _el$286, _co$68);
-                return _el$282;
+                var _el$265 = getNextElement(_tmpl$55), _el$266 = _el$265.firstChild, _el$268 = _el$266.nextSibling, [_el$269, _co$62] = getNextMarker(_el$268.nextSibling);
+                _el$269.nextSibling;
+                insert(_el$265, () => field.valueFormat, _el$269, _co$62);
+                return _el$265;
               }
-            }), _el$300, _co$75);
-            insert(_el$258, createComponent(Show, {
+            }), _el$283, _co$69);
+            insert(_el$241, createComponent(Show, {
               get when() {
                 return props.submittedValues;
               },
@@ -1340,30 +1363,30 @@ const FormDebugTrace = (props) => {
                   const v = props.submittedValues[field.name];
                   const hasValue = v !== void 0 && v !== "" && !(Array.isArray(v) && v.length === 0);
                   return (() => {
-                    var _el$303 = getNextElement(_tmpl$57), _el$304 = _el$303.firstChild, _el$306 = _el$304.nextSibling, [_el$307, _co$77] = getNextMarker(_el$306.nextSibling);
-                    className(_el$303, hasValue ? "text-green-600 dark:text-green-400" : "text-gray-400");
-                    insert(_el$303, () => hasValue ? `${JSON.stringify(v)} ✓` : "(empty)", _el$307, _co$77);
-                    return _el$303;
+                    var _el$286 = getNextElement(_tmpl$57), _el$287 = _el$286.firstChild, _el$289 = _el$287.nextSibling, [_el$290, _co$71] = getNextMarker(_el$289.nextSibling);
+                    className(_el$286, hasValue ? "text-green-600 dark:text-green-400" : "text-gray-400");
+                    insert(_el$286, () => hasValue ? `${JSON.stringify(v)} ✓` : "(empty)", _el$290, _co$71);
+                    return _el$286;
                   })();
                 })();
               }
-            }), _el$302, _co$76);
-            return _el$258;
+            }), _el$285, _co$70);
+            return _el$241;
           })()
-        }), _el$253, _co$60);
-        insert(_el$211, () => props.autoSubmitDelay ? "true" : "false", _el$218, _co$49);
-        insert(_el$211, (() => {
+        }), _el$236, _co$54);
+        insert(_el$197, () => props.autoSubmitDelay ? "true" : "false", _el$204, _co$44);
+        insert(_el$197, (() => {
           var _c$5 = memo(() => !!props.autoSubmitDelay);
           return () => _c$5() ? ` (${props.autoSubmitDelay}ms)` : "";
-        })(), _el$220, _co$50);
-        insert(_el$213, autoSubmitReason, _el$216, _co$48);
-        insert(_el$202, createComponent(Show, {
+        })(), _el$206, _co$45);
+        insert(_el$199, autoSubmitReason, _el$202, _co$43);
+        insert(_el$188, createComponent(Show, {
           get when() {
             return serverDebug();
           },
           get children() {
-            var _el$221 = getNextElement(_tmpl$45), _el$222 = _el$221.firstChild, _el$238 = _el$222.nextSibling, [_el$239, _co$55] = getNextMarker(_el$238.nextSibling), _el$240 = _el$239.nextSibling, [_el$241, _co$56] = getNextMarker(_el$240.nextSibling), _el$242 = _el$241.nextSibling, [_el$243, _co$57] = getNextMarker(_el$242.nextSibling);
-            insert(_el$221, createComponent(Show, {
+            var _el$207 = getNextElement(_tmpl$45), _el$208 = _el$207.firstChild, _el$224 = _el$208.nextSibling, [_el$225, _co$50] = getNextMarker(_el$224.nextSibling), _el$226 = _el$225.nextSibling, [_el$227, _co$51] = getNextMarker(_el$226.nextSibling), _el$228 = _el$227.nextSibling, [_el$229, _co$52] = getNextMarker(_el$228.nextSibling);
+            insert(_el$207, createComponent(Show, {
               get when() {
                 var _a;
                 return (_a = serverDebug()) == null ? void 0 : _a.resolvers;
@@ -1374,67 +1397,71 @@ const FormDebugTrace = (props) => {
                     return serverDebug().resolvers;
                   },
                   children: (r) => (() => {
-                    var _el$308 = getNextElement(_tmpl$58), _el$316 = _el$308.firstChild, [_el$317, _co$78] = getNextMarker(_el$316.nextSibling), _el$309 = _el$317.nextSibling, _el$318 = _el$309.nextSibling, [_el$319, _co$79] = getNextMarker(_el$318.nextSibling), _el$310 = _el$319.nextSibling, _el$320 = _el$310.nextSibling, [_el$321, _co$80] = getNextMarker(_el$320.nextSibling), _el$311 = _el$321.nextSibling, _el$322 = _el$311.nextSibling, [_el$323, _co$81] = getNextMarker(_el$322.nextSibling), _el$314 = _el$323.nextSibling, _el$324 = _el$314.nextSibling, [_el$325, _co$82] = getNextMarker(_el$324.nextSibling);
-                    _el$325.nextSibling;
-                    insert(_el$308, () => r.field, _el$317, _co$78);
-                    insert(_el$308, () => r.resolver, _el$319, _co$79);
-                    insert(_el$308, () => r.input, _el$321, _co$80);
-                    insert(_el$308, () => r.output, _el$323, _co$81);
-                    insert(_el$308, () => r.ms, _el$325, _co$82);
-                    return _el$308;
+                    var _el$291 = getNextElement(_tmpl$58), _el$299 = _el$291.firstChild, [_el$300, _co$72] = getNextMarker(_el$299.nextSibling), _el$292 = _el$300.nextSibling, _el$301 = _el$292.nextSibling, [_el$302, _co$73] = getNextMarker(_el$301.nextSibling), _el$293 = _el$302.nextSibling, _el$303 = _el$293.nextSibling, [_el$304, _co$74] = getNextMarker(_el$303.nextSibling), _el$294 = _el$304.nextSibling, _el$305 = _el$294.nextSibling, [_el$306, _co$75] = getNextMarker(_el$305.nextSibling), _el$297 = _el$306.nextSibling, _el$307 = _el$297.nextSibling, [_el$308, _co$76] = getNextMarker(_el$307.nextSibling);
+                    _el$308.nextSibling;
+                    insert(_el$291, () => r.field, _el$300, _co$72);
+                    insert(_el$291, () => r.resolver, _el$302, _co$73);
+                    insert(_el$291, () => r.input, _el$304, _co$74);
+                    insert(_el$291, () => r.output, _el$306, _co$75);
+                    insert(_el$291, () => r.ms, _el$308, _co$76);
+                    return _el$291;
                   })()
                 });
               }
-            }), _el$239, _co$55);
-            insert(_el$221, createComponent(Show, {
+            }), _el$225, _co$50);
+            insert(_el$207, createComponent(Show, {
               get when() {
                 var _a;
                 return (_a = serverDebug()) == null ? void 0 : _a.routing;
               },
               get children() {
-                var _el$223 = getNextElement(_tmpl$43), _el$224 = _el$223.firstChild, _el$228 = _el$224.nextSibling, [_el$229, _co$51] = getNextMarker(_el$228.nextSibling), _el$225 = _el$229.nextSibling, _el$230 = _el$225.nextSibling, [_el$231, _co$52] = getNextMarker(_el$230.nextSibling), _el$226 = _el$231.nextSibling, _el$232 = _el$226.nextSibling, [_el$233, _co$53] = getNextMarker(_el$232.nextSibling);
-                _el$233.nextSibling;
-                insert(_el$223, () => serverDebug().routing.topic, _el$229, _co$51);
-                insert(_el$223, () => serverDebug().routing.method, _el$231, _co$52);
-                insert(_el$223, () => serverDebug().routing.ms, _el$233, _co$53);
-                return _el$223;
+                var _el$209 = getNextElement(_tmpl$43), _el$210 = _el$209.firstChild, _el$214 = _el$210.nextSibling, [_el$215, _co$46] = getNextMarker(_el$214.nextSibling), _el$211 = _el$215.nextSibling, _el$216 = _el$211.nextSibling, [_el$217, _co$47] = getNextMarker(_el$216.nextSibling), _el$212 = _el$217.nextSibling, _el$218 = _el$212.nextSibling, [_el$219, _co$48] = getNextMarker(_el$218.nextSibling);
+                _el$219.nextSibling;
+                insert(_el$209, () => serverDebug().routing.topic, _el$215, _co$46);
+                insert(_el$209, () => serverDebug().routing.method, _el$217, _co$47);
+                insert(_el$209, () => serverDebug().routing.ms, _el$219, _co$48);
+                return _el$209;
               }
-            }), _el$241, _co$56);
-            insert(_el$221, createComponent(Show, {
+            }), _el$227, _co$51);
+            insert(_el$207, createComponent(Show, {
               get when() {
                 var _a;
                 return (_a = serverDebug()) == null ? void 0 : _a.missingFields;
               },
               get children() {
-                var _el$234 = getNextElement(_tmpl$44), _el$235 = _el$234.firstChild, _el$236 = _el$235.nextSibling, [_el$237, _co$54] = getNextMarker(_el$236.nextSibling);
-                insert(_el$234, () => serverDebug().missingFields.join(", "), _el$237, _co$54);
-                return _el$234;
+                var _el$220 = getNextElement(_tmpl$44), _el$221 = _el$220.firstChild, _el$222 = _el$221.nextSibling, [_el$223, _co$49] = getNextMarker(_el$222.nextSibling);
+                insert(_el$220, () => serverDebug().missingFields.join(", "), _el$223, _co$49);
+                return _el$220;
               }
-            }), _el$243, _co$57);
-            return _el$221;
+            }), _el$229, _co$52);
+            return _el$207;
           }
-        }), _el$255, _co$61);
-        _el$245.$$click = () => setShowRaw(!showRaw());
-        insert(_el$245, () => showRaw() ? "Hide" : "Show", _el$248, _co$58);
-        insert(_el$244, createComponent(Show, {
+        }), _el$238, _co$55);
+        _el$231.$$click = () => setShowRaw(!showRaw());
+        insert(_el$231, (() => {
+          var _c$6 = memo(() => !!showRaw());
+          return () => _c$6() ? strings.scratchpadHideRaw : strings.scratchpadShowRaw;
+        })());
+        insert(_el$230, createComponent(Show, {
           get when() {
             return showRaw();
           },
           get children() {
-            var _el$249 = getNextElement(_tmpl$46);
-            insert(_el$249, () => JSON.stringify(props.rawContent, null, 2));
-            return _el$249;
+            var _el$232 = getNextElement(_tmpl$46);
+            insert(_el$232, () => JSON.stringify(props.rawContent, null, 2));
+            return _el$232;
           }
-        }), _el$251, _co$59);
+        }), _el$234, _co$53);
         runHydrationEvents();
-        return _el$202;
+        return _el$188;
       }
-    }), _el$257, _co$62);
+    }), _el$240, _co$56);
     runHydrationEvents();
-    return _el$192;
+    return _el$178;
   })();
 };
 const EnrichedStepsSection = (props) => {
+  const strings = useMCPUIStrings();
   const stepsData = () => {
     const c = props.content;
     return {
@@ -1443,35 +1470,35 @@ const EnrichedStepsSection = (props) => {
     };
   };
   return (() => {
-    var _el$326 = getNextElement(_tmpl$60), _el$329 = _el$326.firstChild, [_el$330, _co$83] = getNextMarker(_el$329.nextSibling), _el$331 = _el$330.nextSibling, [_el$332, _co$84] = getNextMarker(_el$331.nextSibling);
-    insert(_el$326, createComponent(For, {
+    var _el$309 = getNextElement(_tmpl$60), _el$315 = _el$309.firstChild, [_el$316, _co$78] = getNextMarker(_el$315.nextSibling), _el$317 = _el$316.nextSibling, [_el$318, _co$79] = getNextMarker(_el$317.nextSibling);
+    insert(_el$309, createComponent(For, {
       get each() {
         return stepsData().steps;
       },
       children: (step) => (() => {
-        var _el$333 = getNextElement(_tmpl$63), _el$334 = _el$333.firstChild, _el$335 = _el$334.firstChild, _el$340 = _el$335.nextSibling, [_el$341, _co$86] = getNextMarker(_el$340.nextSibling), _el$342 = _el$341.nextSibling, [_el$343, _co$87] = getNextMarker(_el$342.nextSibling), _el$345 = _el$334.nextSibling, [_el$346, _co$88] = getNextMarker(_el$345.nextSibling);
-        insert(_el$335, (() => {
-          var _c$6 = memo(() => step.status === "done");
-          return () => _c$6() ? "✅" : step.status === "active" ? "●" : "○";
+        var _el$319 = getNextElement(_tmpl$63), _el$320 = _el$319.firstChild, _el$321 = _el$320.firstChild, _el$326 = _el$321.nextSibling, [_el$327, _co$81] = getNextMarker(_el$326.nextSibling), _el$328 = _el$327.nextSibling, [_el$329, _co$82] = getNextMarker(_el$328.nextSibling), _el$331 = _el$320.nextSibling, [_el$332, _co$83] = getNextMarker(_el$331.nextSibling);
+        insert(_el$321, (() => {
+          var _c$7 = memo(() => step.status === "done");
+          return () => _c$7() ? "✅" : step.status === "active" ? "●" : "○";
         })());
-        insert(_el$334, () => step.label, _el$341, _co$86);
-        insert(_el$334, createComponent(Show, {
+        insert(_el$320, () => step.label, _el$327, _co$81);
+        insert(_el$320, createComponent(Show, {
           get when() {
             return memo(() => !!step.description)() && step.status === "active";
           },
           get children() {
-            var _el$336 = getNextElement(_tmpl$61), _el$337 = _el$336.firstChild, _el$338 = _el$337.nextSibling, [_el$339, _co$85] = getNextMarker(_el$338.nextSibling);
-            insert(_el$336, () => step.description, _el$339, _co$85);
-            return _el$336;
+            var _el$322 = getNextElement(_tmpl$61), _el$323 = _el$322.firstChild, _el$324 = _el$323.nextSibling, [_el$325, _co$80] = getNextMarker(_el$324.nextSibling);
+            insert(_el$322, () => step.description, _el$325, _co$80);
+            return _el$322;
           }
-        }), _el$343, _co$87);
-        insert(_el$333, createComponent(Show, {
+        }), _el$329, _co$82);
+        insert(_el$319, createComponent(Show, {
           get when() {
             return memo(() => step.status === "active")() && step.content;
           },
           get children() {
-            var _el$344 = getNextElement(_tmpl$62);
-            insert(_el$344, createComponent(SectionRenderer, {
+            var _el$330 = getNextElement(_tmpl$62);
+            insert(_el$330, createComponent(SectionRenderer, {
               get section() {
                 return step.content;
               },
@@ -1483,41 +1510,44 @@ const EnrichedStepsSection = (props) => {
                 return props.onAction;
               }
             }));
-            return _el$344;
+            return _el$330;
           }
-        }), _el$346, _co$88);
+        }), _el$332, _co$83);
         effect((_p$) => {
           var _v$4 = `rounded-lg ${step.status === "active" ? "bg-blue-50/50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800 p-3 animate-pulse" : "px-1"}`, _v$5 = `flex items-center gap-2 text-sm font-medium ${step.status === "done" ? "text-green-600 dark:text-green-400" : step.status === "active" ? "text-blue-600 dark:text-blue-400" : "text-gray-400"}`;
-          _v$4 !== _p$.e && className(_el$333, _p$.e = _v$4);
-          _v$5 !== _p$.t && className(_el$334, _p$.t = _v$5);
+          _v$4 !== _p$.e && className(_el$319, _p$.e = _v$4);
+          _v$5 !== _p$.t && className(_el$320, _p$.t = _v$5);
           return _p$;
         }, {
           e: void 0,
           t: void 0
         });
-        return _el$333;
+        return _el$319;
       })()
-    }), _el$330, _co$83);
-    insert(_el$326, createComponent(Show, {
+    }), _el$316, _co$78);
+    insert(_el$309, createComponent(Show, {
       get when() {
         return stepsData().steps.some((s) => s.status === "active");
       },
       get children() {
-        var _el$327 = getNextElement(_tmpl$59), _el$328 = _el$327.firstChild;
-        _el$328.$$click = () => {
+        var _el$310 = getNextElement(_tmpl$59), _el$311 = _el$310.firstChild, _el$313 = _el$311.firstChild, [_el$314, _co$77] = getNextMarker(_el$313.nextSibling);
+        _el$314.nextSibling;
+        _el$311.$$click = () => {
           var _a;
           return (_a = props.onAction) == null ? void 0 : _a.call(props, "next_step", {
             step: stepsData().currentStep
           });
         };
+        insert(_el$311, () => strings.scratchpadNextStep, _el$314, _co$77);
         runHydrationEvents();
-        return _el$327;
+        return _el$310;
       }
-    }), _el$332, _co$84);
-    return _el$326;
+    }), _el$318, _co$79);
+    return _el$309;
   })();
 };
 const ActionSection = (props) => {
+  const strings = useMCPUIStrings();
   const data = () => {
     const c = props.content;
     if (Array.isArray(c)) return {
@@ -1540,103 +1570,104 @@ const ActionSection = (props) => {
     };
   };
   return (() => {
-    var _el$347 = getNextElement(_tmpl$67), _el$362 = _el$347.firstChild, [_el$363, _co$92] = getNextMarker(_el$362.nextSibling), _el$364 = _el$363.nextSibling, [_el$365, _co$93] = getNextMarker(_el$364.nextSibling), _el$366 = _el$365.nextSibling, [_el$367, _co$94] = getNextMarker(_el$366.nextSibling), _el$361 = _el$367.nextSibling;
-    insert(_el$347, createComponent(Show, {
+    var _el$333 = getNextElement(_tmpl$67), _el$341 = _el$333.firstChild, [_el$342, _co$85] = getNextMarker(_el$341.nextSibling), _el$343 = _el$342.nextSibling, [_el$344, _co$86] = getNextMarker(_el$343.nextSibling), _el$345 = _el$344.nextSibling, [_el$346, _co$87] = getNextMarker(_el$345.nextSibling), _el$340 = _el$346.nextSibling;
+    insert(_el$333, createComponent(Show, {
       get when() {
         return data().title;
       },
       get children() {
-        var _el$348 = getNextElement(_tmpl$64);
-        insert(_el$348, () => data().title);
-        return _el$348;
+        var _el$334 = getNextElement(_tmpl$64);
+        insert(_el$334, () => data().title);
+        return _el$334;
       }
-    }), _el$363, _co$92);
-    insert(_el$347, createComponent(Show, {
+    }), _el$342, _co$85);
+    insert(_el$333, createComponent(Show, {
       get when() {
         return data().preview;
       },
       children: (preview) => (() => {
-        var _el$368 = getNextElement(_tmpl$70), _el$374 = _el$368.firstChild, [_el$375, _co$96] = getNextMarker(_el$374.nextSibling), _el$376 = _el$375.nextSibling, [_el$377, _co$97] = getNextMarker(_el$376.nextSibling);
-        insert(_el$368, createComponent(Show, {
+        var _el$347 = getNextElement(_tmpl$70), _el$353 = _el$347.firstChild, [_el$354, _co$89] = getNextMarker(_el$353.nextSibling), _el$355 = _el$354.nextSibling, [_el$356, _co$90] = getNextMarker(_el$355.nextSibling);
+        insert(_el$347, createComponent(Show, {
           get when() {
             return preview().count != null;
           },
           get children() {
             return [(() => {
-              var _el$369 = getNextElement(_tmpl$68);
-              insert(_el$369, () => preview().count);
-              return _el$369;
-            })(), " items"];
+              var _el$348 = getNextElement(_tmpl$68);
+              insert(_el$348, () => preview().count);
+              return _el$348;
+            })(), " ", memo(() => strings.scratchpadItems)];
           }
-        }), _el$375, _co$96);
-        insert(_el$368, createComponent(Show, {
+        }), _el$354, _co$89);
+        insert(_el$347, createComponent(Show, {
           get when() {
             return preview().summary;
           },
           get children() {
-            var _el$370 = getNextElement(_tmpl$69), _el$371 = _el$370.firstChild, _el$372 = _el$371.nextSibling, [_el$373, _co$95] = getNextMarker(_el$372.nextSibling);
-            insert(_el$370, () => preview().summary, _el$373, _co$95);
-            return _el$370;
+            var _el$349 = getNextElement(_tmpl$69), _el$350 = _el$349.firstChild, _el$351 = _el$350.nextSibling, [_el$352, _co$88] = getNextMarker(_el$351.nextSibling);
+            insert(_el$349, () => preview().summary, _el$352, _co$88);
+            return _el$349;
           }
-        }), _el$377, _co$97);
-        return _el$368;
+        }), _el$356, _co$90);
+        return _el$347;
       })()
-    }), _el$365, _co$93);
-    insert(_el$347, createComponent(Show, {
+    }), _el$344, _co$86);
+    insert(_el$333, createComponent(Show, {
       get when() {
         return memo(() => !!data().validation)() && data().validation.confidence != null;
       },
       get children() {
-        var _el$349 = getNextElement(_tmpl$66), _el$350 = _el$349.firstChild, _el$352 = _el$350.firstChild, [_el$353, _co$89] = getNextMarker(_el$352.nextSibling);
-        _el$353.nextSibling;
-        var _el$359 = _el$350.nextSibling, [_el$360, _co$91] = getNextMarker(_el$359.nextSibling);
-        insert(_el$350, () => Math.round(data().validation.confidence * 100), _el$353, _co$89);
-        insert(_el$349, createComponent(Show, {
+        var _el$335 = getNextElement(_tmpl$66), _el$336 = _el$335.firstChild, _el$338 = _el$336.nextSibling, [_el$339, _co$84] = getNextMarker(_el$338.nextSibling);
+        insert(_el$336, () => formatMCPUIString(strings.verifiedConfidence, {
+          pct: Math.round(data().validation.confidence * 100)
+        }));
+        insert(_el$335, createComponent(Show, {
           get when() {
             var _a;
             return ((_a = data().validation.hallucinated) == null ? void 0 : _a.length) > 0;
           },
           get children() {
-            var _el$354 = getNextElement(_tmpl$65), _el$355 = _el$354.firstChild, _el$357 = _el$355.nextSibling, [_el$358, _co$90] = getNextMarker(_el$357.nextSibling);
-            _el$358.nextSibling;
-            insert(_el$354, () => data().validation.hallucinated.length, _el$358, _co$90);
-            return _el$354;
+            var _el$337 = getNextElement(_tmpl$65);
+            insert(_el$337, () => formatMCPUIString(strings.verifiedUnverifiedCount, {
+              count: data().validation.hallucinated.length
+            }));
+            return _el$337;
           }
-        }), _el$360, _co$91);
-        effect((_$p) => classList(_el$350, {
+        }), _el$339, _co$84);
+        effect((_$p) => classList(_el$336, {
           "text-green-600 dark:text-green-400": data().validation.confidence >= 0.8,
           "text-amber-600 dark:text-amber-400": data().validation.confidence >= 0.5 && data().validation.confidence < 0.8,
           "text-red-600 dark:text-red-400": data().validation.confidence < 0.5
         }, _$p));
-        return _el$349;
+        return _el$335;
       }
-    }), _el$367, _co$94);
-    insert(_el$361, createComponent(For, {
+    }), _el$346, _co$87);
+    insert(_el$340, createComponent(For, {
       get each() {
         return data().actions;
       },
       children: (item) => (() => {
-        var _el$378 = getNextElement(_tmpl$38), _el$380 = _el$378.firstChild, [_el$381, _co$98] = getNextMarker(_el$380.nextSibling), _el$382 = _el$381.nextSibling, [_el$383, _co$99] = getNextMarker(_el$382.nextSibling);
-        addEventListener(_el$378, "click", () => {
+        var _el$357 = getNextElement(_tmpl$38), _el$359 = _el$357.firstChild, [_el$360, _co$91] = getNextMarker(_el$359.nextSibling), _el$361 = _el$360.nextSibling, [_el$362, _co$92] = getNextMarker(_el$361.nextSibling);
+        addEventListener(_el$357, "click", () => {
           var _a;
           return (_a = props.onAction) == null ? void 0 : _a.call(props, item.value || item.action || item.label, item);
         });
-        insert(_el$378, createComponent(Show, {
+        insert(_el$357, createComponent(Show, {
           get when() {
             return item.icon;
           },
           get children() {
-            var _el$379 = getNextElement(_tmpl$71);
-            insert(_el$379, () => item.icon);
-            return _el$379;
+            var _el$358 = getNextElement(_tmpl$71);
+            insert(_el$358, () => item.icon);
+            return _el$358;
           }
-        }), _el$381, _co$98);
-        insert(_el$378, () => item.label, _el$383, _co$99);
-        effect(() => className(_el$378, `px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${item.variant === "primary" ? "bg-blue-600 text-white hover:bg-blue-700" : item.variant === "danger" ? "bg-red-600 text-white hover:bg-red-700" : item.variant === "secondary" ? "border border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/20" : "border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`));
-        return _el$378;
+        }), _el$360, _co$91);
+        insert(_el$357, () => item.label, _el$362, _co$92);
+        effect(() => className(_el$357, `px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${item.variant === "primary" ? "bg-blue-600 text-white hover:bg-blue-700" : item.variant === "danger" ? "bg-red-600 text-white hover:bg-red-700" : item.variant === "secondary" ? "border border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/20" : "border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`));
+        return _el$357;
       })()
     }));
-    return _el$347;
+    return _el$333;
   })();
 };
 const UnderstandingSection = (props) => {
@@ -1660,63 +1691,65 @@ const UnderstandingSection = (props) => {
     }
   };
   return (() => {
-    var _el$384 = getNextElement(_tmpl$72), _el$385 = _el$384.firstChild, _el$387 = _el$385.nextSibling, [_el$388, _co$100] = getNextMarker(_el$387.nextSibling);
-    insert(_el$385, createComponent(For, {
+    var _el$363 = getNextElement(_tmpl$72), _el$364 = _el$363.firstChild, _el$366 = _el$364.nextSibling, [_el$367, _co$93] = getNextMarker(_el$366.nextSibling);
+    insert(_el$364, createComponent(For, {
       get each() {
         return data().detections;
       },
       children: (det) => (() => {
-        var _el$389 = getNextElement(_tmpl$73), _el$390 = _el$389.firstChild, _el$391 = _el$390.nextSibling;
-        insert(_el$390, () => det.label);
-        insert(_el$391, () => det.value);
-        effect(() => className(_el$390, `px-1.5 py-0.5 text-xs font-medium rounded ${confidenceClass(det.confidence)}`));
-        return _el$389;
+        var _el$368 = getNextElement(_tmpl$73), _el$369 = _el$368.firstChild, _el$370 = _el$369.nextSibling;
+        insert(_el$369, () => det.label);
+        insert(_el$370, () => det.value);
+        effect(() => className(_el$369, `px-1.5 py-0.5 text-xs font-medium rounded ${confidenceClass(det.confidence)}`));
+        return _el$368;
       })()
     }));
-    insert(_el$384, createComponent(Show, {
+    insert(_el$363, createComponent(Show, {
       get when() {
         return data().warnings.length > 0;
       },
       get children() {
-        var _el$386 = getNextElement(_tmpl$25);
-        insert(_el$386, createComponent(For, {
+        var _el$365 = getNextElement(_tmpl$25);
+        insert(_el$365, createComponent(For, {
           get each() {
             return data().warnings;
           },
           children: (w) => (() => {
-            var _el$392 = getNextElement(_tmpl$74), _el$393 = _el$392.firstChild, _el$394 = _el$393.nextSibling;
-            insert(_el$394, w);
-            return _el$392;
+            var _el$371 = getNextElement(_tmpl$74), _el$372 = _el$371.firstChild, _el$373 = _el$372.nextSibling;
+            insert(_el$373, w);
+            return _el$371;
           })()
         }));
-        return _el$386;
+        return _el$365;
       }
-    }), _el$388, _co$100);
-    return _el$384;
+    }), _el$367, _co$93);
+    return _el$363;
   })();
 };
 const FeedbackSection = (props) => {
+  const strings = useMCPUIStrings();
   const [comment, setComment] = createSignal("");
   const [showComment, setShowComment] = createSignal(false);
   const [submitted, setSubmitted] = createSignal(null);
+  const [submittedLabel, setSubmittedLabel] = createSignal("");
   const data = () => {
     var _a, _b, _c, _d;
     const c = props.content;
     const options = (c == null ? void 0 : c.options) || [{
       value: ((_a = c == null ? void 0 : c.approve) == null ? void 0 : _a.value) || "approve",
-      label: ((_b = c == null ? void 0 : c.approve) == null ? void 0 : _b.label) || "Yes",
+      label: ((_b = c == null ? void 0 : c.approve) == null ? void 0 : _b.label) || strings.yes,
       icon: "👍",
       variant: "primary"
     }, {
       value: ((_c = c == null ? void 0 : c.reject) == null ? void 0 : _c.value) || "reject",
-      label: ((_d = c == null ? void 0 : c.reject) == null ? void 0 : _d.label) || "No",
+      label: ((_d = c == null ? void 0 : c.reject) == null ? void 0 : _d.label) || strings.no,
       icon: "👎"
     }];
     return {
       question: (c == null ? void 0 : c.question) || "",
       options,
       allowFreeText: (c == null ? void 0 : c.allowFreeText) ?? (c == null ? void 0 : c.allowComment) ?? false,
-      placeholder: (c == null ? void 0 : c.placeholder) || (c == null ? void 0 : c.commentPlaceholder) || "Add a comment...",
+      placeholder: (c == null ? void 0 : c.placeholder) || (c == null ? void 0 : c.commentPlaceholder) || strings.scratchpadCommentPlaceholder,
       // v4.1.0: per-step feedback
       agentId: c == null ? void 0 : c.agentId,
       stepId: c == null ? void 0 : c.stepId
@@ -1729,6 +1762,7 @@ const FeedbackSection = (props) => {
       return;
     }
     setSubmitted(option.value);
+    setSubmittedLabel(option.label ?? "");
     const payload = {
       option: option.value,
       comment: comment(),
@@ -1747,83 +1781,84 @@ const FeedbackSection = (props) => {
     (_a = props.onAction) == null ? void 0 : _a.call(props, "feedback", payload);
   };
   return (() => {
-    var _el$395 = getNextElement(_tmpl$79), _el$396 = _el$395.firstChild, _el$414 = _el$396.nextSibling, [_el$415, _co$105] = getNextMarker(_el$414.nextSibling), _el$416 = _el$415.nextSibling, [_el$417, _co$106] = getNextMarker(_el$416.nextSibling);
-    insert(_el$396, () => data().question);
-    insert(_el$395, createComponent(Show, {
+    var _el$374 = getNextElement(_tmpl$79), _el$375 = _el$374.firstChild, _el$393 = _el$375.nextSibling, [_el$394, _co$98] = getNextMarker(_el$393.nextSibling), _el$395 = _el$394.nextSibling, [_el$396, _co$99] = getNextMarker(_el$395.nextSibling);
+    insert(_el$375, () => data().question);
+    insert(_el$374, createComponent(Show, {
       get when() {
         return submitted();
       },
       get children() {
-        var _el$397 = getNextElement(_tmpl$76), _el$398 = _el$397.firstChild, _el$400 = _el$398.firstChild, [_el$401, _co$101] = getNextMarker(_el$400.nextSibling), _el$399 = _el$401.nextSibling, _el$402 = _el$399.nextSibling, [_el$403, _co$102] = getNextMarker(_el$402.nextSibling), _el$408 = _el$398.nextSibling, [_el$409, _co$104] = getNextMarker(_el$408.nextSibling);
-        insert(_el$398, (() => {
-          var _c$7 = memo(() => submitted() === "approve");
-          return () => _c$7() ? "✅" : submitted() === "reject" ? "❌" : "💬";
-        })(), _el$401, _co$101);
-        insert(_el$398, submitted, _el$403, _co$102);
-        insert(_el$397, createComponent(Show, {
+        var _el$376 = getNextElement(_tmpl$76), _el$377 = _el$376.firstChild, _el$379 = _el$377.firstChild, [_el$380, _co$94] = getNextMarker(_el$379.nextSibling), _el$378 = _el$380.nextSibling, _el$381 = _el$378.nextSibling, [_el$382, _co$95] = getNextMarker(_el$381.nextSibling), _el$387 = _el$377.nextSibling, [_el$388, _co$97] = getNextMarker(_el$387.nextSibling);
+        insert(_el$377, (() => {
+          var _c$8 = memo(() => submitted() === "approve");
+          return () => _c$8() ? "✅" : submitted() === "reject" ? "❌" : "💬";
+        })(), _el$380, _co$94);
+        insert(_el$377, submittedLabel, _el$382, _co$95);
+        insert(_el$376, createComponent(Show, {
           get when() {
             return comment();
           },
           get children() {
-            var _el$404 = getNextElement(_tmpl$75), _el$405 = _el$404.firstChild, _el$406 = _el$405.nextSibling, [_el$407, _co$103] = getNextMarker(_el$406.nextSibling);
-            insert(_el$404, comment, _el$407, _co$103);
-            return _el$404;
+            var _el$383 = getNextElement(_tmpl$75), _el$384 = _el$383.firstChild, _el$385 = _el$384.nextSibling, [_el$386, _co$96] = getNextMarker(_el$385.nextSibling);
+            insert(_el$383, comment, _el$386, _co$96);
+            return _el$383;
           }
-        }), _el$409, _co$104);
+        }), _el$388, _co$97);
         effect((_p$) => {
           var _v$6 = !!(submitted() === "approve"), _v$7 = !!(submitted() === "reject"), _v$8 = !!(submitted() !== "approve" && submitted() !== "reject");
-          _v$6 !== _p$.e && _el$398.classList.toggle("text-green-600", _p$.e = _v$6);
-          _v$7 !== _p$.t && _el$398.classList.toggle("text-red-600", _p$.t = _v$7);
-          _v$8 !== _p$.a && _el$398.classList.toggle("text-blue-600", _p$.a = _v$8);
+          _v$6 !== _p$.e && _el$377.classList.toggle("text-green-600", _p$.e = _v$6);
+          _v$7 !== _p$.t && _el$377.classList.toggle("text-red-600", _p$.t = _v$7);
+          _v$8 !== _p$.a && _el$377.classList.toggle("text-blue-600", _p$.a = _v$8);
           return _p$;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         });
-        return _el$397;
+        return _el$376;
       }
-    }), _el$415, _co$105);
-    insert(_el$395, createComponent(Show, {
+    }), _el$394, _co$98);
+    insert(_el$374, createComponent(Show, {
       get when() {
         return !submitted();
       },
       get children() {
         return [(() => {
-          var _el$410 = getNextElement(_tmpl$77);
-          insert(_el$410, createComponent(For, {
+          var _el$389 = getNextElement(_tmpl$77);
+          insert(_el$389, createComponent(For, {
             get each() {
               return data().options;
             },
             children: (option) => (() => {
-              var _el$418 = getNextElement(_tmpl$38), _el$420 = _el$418.firstChild, [_el$421, _co$107] = getNextMarker(_el$420.nextSibling), _el$422 = _el$421.nextSibling, [_el$423, _co$108] = getNextMarker(_el$422.nextSibling);
-              addEventListener(_el$418, "click", () => handleOption(option));
-              insert(_el$418, createComponent(Show, {
+              var _el$397 = getNextElement(_tmpl$38), _el$399 = _el$397.firstChild, [_el$400, _co$100] = getNextMarker(_el$399.nextSibling), _el$401 = _el$400.nextSibling, [_el$402, _co$101] = getNextMarker(_el$401.nextSibling);
+              addEventListener(_el$397, "click", () => handleOption(option));
+              insert(_el$397, createComponent(Show, {
                 get when() {
                   return option.icon;
                 },
                 get children() {
-                  var _el$419 = getNextElement(_tmpl$80);
-                  insert(_el$419, () => option.icon);
-                  return _el$419;
+                  var _el$398 = getNextElement(_tmpl$80);
+                  insert(_el$398, () => option.icon);
+                  return _el$398;
                 }
-              }), _el$421, _co$107);
-              insert(_el$418, () => option.label, _el$423, _co$108);
-              effect(() => className(_el$418, `px-3 py-1.5 text-sm font-medium rounded-lg transition-colors flex items-center gap-1 ${option.variant === "primary" ? "bg-blue-600 text-white hover:bg-blue-700" : option.variant === "danger" ? "bg-red-600 text-white hover:bg-red-700" : "border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`));
-              return _el$418;
+              }), _el$400, _co$100);
+              insert(_el$397, () => option.label, _el$402, _co$101);
+              effect(() => className(_el$397, `px-3 py-1.5 text-sm font-medium rounded-lg transition-colors flex items-center gap-1 ${option.variant === "primary" ? "bg-blue-600 text-white hover:bg-blue-700" : option.variant === "danger" ? "bg-red-600 text-white hover:bg-red-700" : "border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`));
+              return _el$397;
             })()
           }));
-          return _el$410;
+          return _el$389;
         })(), createComponent(Show, {
           get when() {
             return data().allowFreeText || showComment();
           },
           get children() {
-            var _el$411 = getNextElement(_tmpl$78), _el$412 = _el$411.firstChild, _el$413 = _el$412.nextSibling;
-            _el$412.$$input = (e) => setComment(e.currentTarget.value);
-            addEventListener(_el$413, "click", () => {
+            var _el$390 = getNextElement(_tmpl$78), _el$391 = _el$390.firstChild, _el$392 = _el$391.nextSibling;
+            _el$391.$$input = (e) => setComment(e.currentTarget.value);
+            addEventListener(_el$392, "click", () => {
               var _a;
               setSubmitted("comment");
+              setSubmittedLabel("");
               (_a = props.onAction) == null ? void 0 : _a.call(props, "feedback", {
                 option: "comment",
                 comment: comment(),
@@ -1831,26 +1866,28 @@ const FeedbackSection = (props) => {
                 stepId: data().stepId
               });
             });
+            insert(_el$392, () => strings.scratchpadSend);
             effect((_p$) => {
               var _v$9 = data().placeholder, _v$0 = showComment();
-              _v$9 !== _p$.e && setAttribute(_el$412, "placeholder", _p$.e = _v$9);
-              _v$0 !== _p$.t && setProperty(_el$412, "autofocus", _p$.t = _v$0);
+              _v$9 !== _p$.e && setAttribute(_el$391, "placeholder", _p$.e = _v$9);
+              _v$0 !== _p$.t && setProperty(_el$391, "autofocus", _p$.t = _v$0);
               return _p$;
             }, {
               e: void 0,
               t: void 0
             });
-            effect(() => setProperty(_el$412, "value", comment()));
+            effect(() => setProperty(_el$391, "value", comment()));
             runHydrationEvents();
-            return _el$411;
+            return _el$390;
           }
         })];
       }
-    }), _el$417, _co$106);
-    return _el$395;
+    }), _el$396, _co$99);
+    return _el$374;
   })();
 };
 const PromptSection = (props) => {
+  const strings = useMCPUIStrings();
   const data = () => {
     const c = props.content;
     return {
@@ -1862,56 +1899,58 @@ const PromptSection = (props) => {
     };
   };
   return (() => {
-    var _el$424 = getNextElement(_tmpl$84), _el$437 = _el$424.firstChild, [_el$438, _co$111] = getNextMarker(_el$437.nextSibling), _el$430 = _el$438.nextSibling, _el$439 = _el$430.nextSibling, [_el$440, _co$112] = getNextMarker(_el$439.nextSibling), _el$441 = _el$440.nextSibling, [_el$442, _co$113] = getNextMarker(_el$441.nextSibling);
-    insert(_el$424, createComponent(Show, {
+    var _el$403 = getNextElement(_tmpl$84), _el$419 = _el$403.firstChild, [_el$420, _co$105] = getNextMarker(_el$419.nextSibling), _el$409 = _el$420.nextSibling, _el$421 = _el$409.nextSibling, [_el$422, _co$106] = getNextMarker(_el$421.nextSibling), _el$423 = _el$422.nextSibling, [_el$424, _co$107] = getNextMarker(_el$423.nextSibling);
+    insert(_el$403, createComponent(Show, {
       get when() {
         return data().originalQuery;
       },
       get children() {
-        var _el$425 = getNextElement(_tmpl$81), _el$426 = _el$425.firstChild, _el$428 = _el$426.nextSibling, [_el$429, _co$109] = getNextMarker(_el$428.nextSibling);
-        _el$429.nextSibling;
-        insert(_el$425, () => data().originalQuery, _el$429, _co$109);
-        return _el$425;
+        var _el$404 = getNextElement(_tmpl$81), _el$405 = _el$404.firstChild, _el$407 = _el$405.nextSibling, [_el$408, _co$102] = getNextMarker(_el$407.nextSibling);
+        _el$408.nextSibling;
+        insert(_el$404, () => data().originalQuery, _el$408, _co$102);
+        return _el$404;
       }
-    }), _el$438, _co$111);
-    insert(_el$430, createComponent(For, {
+    }), _el$420, _co$105);
+    insert(_el$409, createComponent(For, {
       get each() {
         return Object.entries(data().extracted);
       },
       children: ([key, value]) => (() => {
-        var _el$443 = getNextElement(_tmpl$85), _el$444 = _el$443.firstChild, _el$446 = _el$444.firstChild, [_el$447, _co$114] = getNextMarker(_el$446.nextSibling);
-        _el$447.nextSibling;
-        var _el$448 = _el$444.nextSibling;
-        insert(_el$444, key, _el$447, _co$114);
-        insert(_el$448, () => String(value));
-        return _el$443;
+        var _el$425 = getNextElement(_tmpl$85), _el$426 = _el$425.firstChild, _el$428 = _el$426.firstChild, [_el$429, _co$108] = getNextMarker(_el$428.nextSibling);
+        _el$429.nextSibling;
+        var _el$430 = _el$426.nextSibling;
+        insert(_el$426, key, _el$429, _co$108);
+        insert(_el$430, () => String(value));
+        return _el$425;
       })()
     }));
-    insert(_el$424, createComponent(Show, {
+    insert(_el$403, createComponent(Show, {
       get when() {
         return data().plan;
       },
       get children() {
-        var _el$431 = getNextElement(_tmpl$82), _el$432 = _el$431.firstChild, _el$433 = _el$432.nextSibling, _el$434 = _el$433.nextSibling, [_el$435, _co$110] = getNextMarker(_el$434.nextSibling);
-        insert(_el$431, () => data().plan, _el$435, _co$110);
-        return _el$431;
+        var _el$410 = getNextElement(_tmpl$82), _el$411 = _el$410.firstChild, _el$412 = _el$411.nextSibling, _el$413 = _el$412.nextSibling, [_el$414, _co$103] = getNextMarker(_el$413.nextSibling);
+        insert(_el$411, () => strings.scratchpadPlan);
+        insert(_el$410, () => data().plan, _el$414, _co$103);
+        return _el$410;
       }
-    }), _el$440, _co$112);
-    insert(_el$424, createComponent(Show, {
+    }), _el$422, _co$106);
+    insert(_el$403, createComponent(Show, {
       get when() {
         return data().editable;
       },
       get children() {
-        var _el$436 = getNextElement(_tmpl$83);
-        _el$436.$$click = () => {
+        var _el$415 = getNextElement(_tmpl$83), _el$416 = _el$415.firstChild, _el$417 = _el$416.nextSibling, [_el$418, _co$104] = getNextMarker(_el$417.nextSibling);
+        _el$415.$$click = () => {
           var _a;
           return (_a = props.onAction) == null ? void 0 : _a.call(props, "edit_prompt", data());
         };
+        insert(_el$415, () => strings.scratchpadModify, _el$418, _co$104);
         runHydrationEvents();
-        return _el$436;
+        return _el$415;
       }
-    }), _el$442, _co$113);
-    return _el$424;
+    }), _el$424, _co$107);
+    return _el$403;
   })();
 };
 const StepperProgressSection = (props) => {
@@ -1941,46 +1980,46 @@ const StepperProgressSection = (props) => {
     },
     get fallback() {
       return (() => {
-        var _el$450 = getNextElement(_tmpl$87);
-        insert(_el$450, createComponent(For, {
+        var _el$432 = getNextElement(_tmpl$87);
+        insert(_el$432, createComponent(For, {
           get each() {
             return data().steps;
           },
           children: (step) => (() => {
-            var _el$451 = getNextElement(_tmpl$90), _el$452 = _el$451.firstChild, _el$453 = _el$452.nextSibling, _el$454 = _el$453.firstChild, _el$464 = _el$454.nextSibling, [_el$465, _co$117] = getNextMarker(_el$464.nextSibling), _el$466 = _el$465.nextSibling, [_el$467, _co$118] = getNextMarker(_el$466.nextSibling);
-            insert(_el$452, () => statusIcon(step.status));
-            insert(_el$454, () => step.label);
-            insert(_el$453, createComponent(Show, {
+            var _el$433 = getNextElement(_tmpl$90), _el$434 = _el$433.firstChild, _el$435 = _el$434.nextSibling, _el$436 = _el$435.firstChild, _el$446 = _el$436.nextSibling, [_el$447, _co$111] = getNextMarker(_el$446.nextSibling), _el$448 = _el$447.nextSibling, [_el$449, _co$112] = getNextMarker(_el$448.nextSibling);
+            insert(_el$434, () => statusIcon(step.status));
+            insert(_el$436, () => step.label);
+            insert(_el$435, createComponent(Show, {
               get when() {
                 return step.summary;
               },
               get children() {
-                var _el$455 = getNextElement(_tmpl$88), _el$456 = _el$455.firstChild, _el$457 = _el$456.nextSibling, [_el$458, _co$115] = getNextMarker(_el$457.nextSibling);
-                insert(_el$455, () => step.summary, _el$458, _co$115);
-                return _el$455;
+                var _el$437 = getNextElement(_tmpl$88), _el$438 = _el$437.firstChild, _el$439 = _el$438.nextSibling, [_el$440, _co$109] = getNextMarker(_el$439.nextSibling);
+                insert(_el$437, () => step.summary, _el$440, _co$109);
+                return _el$437;
               }
-            }), _el$465, _co$117);
-            insert(_el$453, createComponent(Show, {
+            }), _el$447, _co$111);
+            insert(_el$435, createComponent(Show, {
               get when() {
                 return step.duration_ms;
               },
               get children() {
-                var _el$459 = getNextElement(_tmpl$89), _el$460 = _el$459.firstChild, _el$462 = _el$460.nextSibling, [_el$463, _co$116] = getNextMarker(_el$462.nextSibling);
-                _el$463.nextSibling;
-                insert(_el$459, () => step.duration_ms, _el$463, _co$116);
-                return _el$459;
+                var _el$441 = getNextElement(_tmpl$89), _el$442 = _el$441.firstChild, _el$444 = _el$442.nextSibling, [_el$445, _co$110] = getNextMarker(_el$444.nextSibling);
+                _el$445.nextSibling;
+                insert(_el$441, () => step.duration_ms, _el$445, _co$110);
+                return _el$441;
               }
-            }), _el$467, _co$118);
-            effect(() => className(_el$451, `flex items-start gap-2 text-sm ${step.status === "active" ? "font-medium" : ""} ${step.status === "pending" ? "text-gray-400" : "text-gray-700 dark:text-gray-300"}`));
-            return _el$451;
+            }), _el$449, _co$112);
+            effect(() => className(_el$433, `flex items-start gap-2 text-sm ${step.status === "active" ? "font-medium" : ""} ${step.status === "pending" ? "text-gray-400" : "text-gray-700 dark:text-gray-300"}`));
+            return _el$433;
           })()
         }));
-        return _el$450;
+        return _el$432;
       })();
     },
     get children() {
-      var _el$449 = getNextElement(_tmpl$86);
-      insert(_el$449, createComponent(For, {
+      var _el$431 = getNextElement(_tmpl$86);
+      insert(_el$431, createComponent(For, {
         get each() {
           return data().steps;
         },
@@ -1992,36 +2031,37 @@ const StepperProgressSection = (props) => {
             return getNextElement(_tmpl$13);
           }
         }), (() => {
-          var _el$469 = getNextElement(_tmpl$92), _el$470 = _el$469.firstChild, _el$471 = _el$470.nextSibling, _el$473 = _el$471.nextSibling, [_el$474, _co$119] = getNextMarker(_el$473.nextSibling);
-          insert(_el$470, () => statusIcon(step.status));
-          insert(_el$471, () => step.label);
-          insert(_el$469, createComponent(Show, {
+          var _el$451 = getNextElement(_tmpl$92), _el$452 = _el$451.firstChild, _el$453 = _el$452.nextSibling, _el$455 = _el$453.nextSibling, [_el$456, _co$113] = getNextMarker(_el$455.nextSibling);
+          insert(_el$452, () => statusIcon(step.status));
+          insert(_el$453, () => step.label);
+          insert(_el$451, createComponent(Show, {
             get when() {
               return step.summary;
             },
             get children() {
-              var _el$472 = getNextElement(_tmpl$91);
-              insert(_el$472, () => step.summary);
-              return _el$472;
+              var _el$454 = getNextElement(_tmpl$91);
+              insert(_el$454, () => step.summary);
+              return _el$454;
             }
-          }), _el$474, _co$119);
-          effect(() => className(_el$469, `flex items-center gap-1 px-2 py-1 rounded text-xs ${step.status === "done" ? "bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400" : step.status === "active" ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 font-medium animate-pulse" : step.status === "error" ? "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400" : "text-gray-400"}`));
-          return _el$469;
+          }), _el$456, _co$113);
+          effect(() => className(_el$451, `flex items-center gap-1 px-2 py-1 rounded text-xs ${step.status === "done" ? "bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400" : step.status === "active" ? "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 font-medium animate-pulse" : step.status === "error" ? "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400" : "text-gray-400"}`));
+          return _el$451;
         })()]
       }));
-      return _el$449;
+      return _el$431;
     }
   });
 };
 const ErrorSectionRenderer = (props) => {
+  const strings = useMCPUIStrings();
   const [showDetails, setShowDetails] = createSignal(false);
   const data = () => {
     const c = props.content;
     const d = {
-      message: (c == null ? void 0 : c.message) || "Error",
+      message: (c == null ? void 0 : c.message) || strings.scratchpadError,
       severity: (c == null ? void 0 : c.severity) || "error",
       retryAction: c == null ? void 0 : c.retryAction,
-      retryLabel: (c == null ? void 0 : c.retryLabel) || "Retry",
+      retryLabel: (c == null ? void 0 : c.retryLabel) || strings.retry,
       details: c == null ? void 0 : c.details,
       timestamp: c == null ? void 0 : c.timestamp
     };
@@ -2030,55 +2070,57 @@ const ErrorSectionRenderer = (props) => {
   };
   const isWarning = () => data().severity === "warning";
   return (() => {
-    var _el$475 = getNextElement(_tmpl$96), _el$476 = _el$475.firstChild, _el$477 = _el$476.firstChild, _el$478 = _el$477.nextSibling, _el$479 = _el$478.firstChild, _el$480 = _el$479.nextSibling, _el$486 = _el$480.firstChild, [_el$487, _co$121] = getNextMarker(_el$486.nextSibling), _el$488 = _el$487.nextSibling, [_el$489, _co$122] = getNextMarker(_el$488.nextSibling), _el$491 = _el$480.nextSibling, [_el$492, _co$123] = getNextMarker(_el$491.nextSibling);
-    insert(_el$477, () => isWarning() ? "⚠️" : "❌");
-    insert(_el$479, () => data().message);
-    insert(_el$480, createComponent(Show, {
+    var _el$457 = getNextElement(_tmpl$96), _el$458 = _el$457.firstChild, _el$459 = _el$458.firstChild, _el$460 = _el$459.nextSibling, _el$461 = _el$460.firstChild, _el$462 = _el$461.nextSibling, _el$471 = _el$462.firstChild, [_el$472, _co$116] = getNextMarker(_el$471.nextSibling), _el$473 = _el$472.nextSibling, [_el$474, _co$117] = getNextMarker(_el$473.nextSibling), _el$476 = _el$462.nextSibling, [_el$477, _co$118] = getNextMarker(_el$476.nextSibling);
+    insert(_el$459, () => isWarning() ? "⚠️" : "❌");
+    insert(_el$461, () => data().message);
+    insert(_el$462, createComponent(Show, {
       get when() {
         return data().retryAction;
       },
       get children() {
-        var _el$481 = getNextElement(_tmpl$93), _el$482 = _el$481.firstChild, _el$483 = _el$482.nextSibling, [_el$484, _co$120] = getNextMarker(_el$483.nextSibling);
-        _el$481.$$click = () => {
+        var _el$463 = getNextElement(_tmpl$93), _el$464 = _el$463.firstChild, _el$465 = _el$464.nextSibling, [_el$466, _co$114] = getNextMarker(_el$465.nextSibling);
+        _el$463.$$click = () => {
           var _a;
           return (_a = props.onAction) == null ? void 0 : _a.call(props, data().retryAction);
         };
-        insert(_el$481, () => data().retryLabel, _el$484, _co$120);
-        effect(() => className(_el$481, `px-2 py-1 text-xs font-medium rounded ${isWarning() ? "bg-amber-600 text-white hover:bg-amber-700" : "bg-red-600 text-white hover:bg-red-700"} transition-colors`));
+        insert(_el$463, () => data().retryLabel, _el$466, _co$114);
+        effect(() => className(_el$463, `px-2 py-1 text-xs font-medium rounded ${isWarning() ? "bg-amber-600 text-white hover:bg-amber-700" : "bg-red-600 text-white hover:bg-red-700"} transition-colors`));
         runHydrationEvents();
-        return _el$481;
+        return _el$463;
       }
-    }), _el$487, _co$121);
-    insert(_el$480, createComponent(Show, {
+    }), _el$472, _co$116);
+    insert(_el$462, createComponent(Show, {
       get when() {
         return data().details;
       },
       get children() {
-        var _el$485 = getNextElement(_tmpl$94);
-        _el$485.$$click = () => setShowDetails(!showDetails());
+        var _el$467 = getNextElement(_tmpl$94), _el$468 = _el$467.firstChild, _el$469 = _el$468.nextSibling, [_el$470, _co$115] = getNextMarker(_el$469.nextSibling);
+        _el$467.$$click = () => setShowDetails(!showDetails());
+        insert(_el$467, () => strings.scratchpadDetails, _el$470, _co$115);
         runHydrationEvents();
-        return _el$485;
+        return _el$467;
       }
-    }), _el$489, _co$122);
-    insert(_el$478, createComponent(Show, {
+    }), _el$474, _co$117);
+    insert(_el$460, createComponent(Show, {
       get when() {
         return memo(() => !!showDetails())() && data().details;
       },
       get children() {
-        var _el$490 = getNextElement(_tmpl$95);
-        insert(_el$490, () => data().details);
-        return _el$490;
+        var _el$475 = getNextElement(_tmpl$95);
+        insert(_el$475, () => data().details);
+        return _el$475;
       }
-    }), _el$492, _co$123);
-    effect(() => className(_el$475, `rounded-lg px-3 py-2 text-sm ${isWarning() ? "bg-amber-50 dark:bg-amber-900/10 text-amber-700 dark:text-amber-400 border border-amber-200 dark:border-amber-800" : "bg-red-50 dark:bg-red-900/10 text-red-700 dark:text-red-400 border border-red-200 dark:border-red-800"}`));
-    return _el$475;
+    }), _el$477, _co$118);
+    effect(() => className(_el$457, `rounded-lg px-3 py-2 text-sm ${isWarning() ? "bg-amber-50 dark:bg-amber-900/10 text-amber-700 dark:text-amber-400 border border-amber-200 dark:border-amber-800" : "bg-red-50 dark:bg-red-900/10 text-red-700 dark:text-red-400 border border-red-200 dark:border-red-800"}`));
+    return _el$457;
   })();
 };
 const SourceCardSection = (props) => {
+  const strings = useMCPUIStrings();
   const data = () => {
     const c = props.content;
     return {
-      name: (c == null ? void 0 : c.name) || "Source",
+      name: (c == null ? void 0 : c.name) || strings.scratchpadSource,
       status: (c == null ? void 0 : c.status) || "available",
       capabilities: (c == null ? void 0 : c.capabilities) || [],
       latency_ms: c == null ? void 0 : c.latency_ms,
@@ -2092,46 +2134,47 @@ const SourceCardSection = (props) => {
     error: "❌"
   })[data().status] || "📦";
   return (() => {
-    var _el$493 = getNextElement(_tmpl$99), _el$494 = _el$493.firstChild, _el$495 = _el$494.firstChild, _el$497 = _el$495.firstChild, [_el$498, _co$124] = getNextMarker(_el$497.nextSibling), _el$496 = _el$498.nextSibling, _el$499 = _el$496.nextSibling, [_el$500, _co$125] = getNextMarker(_el$499.nextSibling), _el$505 = _el$495.nextSibling, [_el$506, _co$127] = getNextMarker(_el$505.nextSibling), _el$507 = _el$494.nextSibling, _el$509 = _el$507.nextSibling, [_el$510, _co$128] = getNextMarker(_el$509.nextSibling);
-    insert(_el$495, statusIcon, _el$498, _co$124);
-    insert(_el$495, () => data().name, _el$500, _co$125);
-    insert(_el$494, createComponent(Show, {
+    var _el$478 = getNextElement(_tmpl$99), _el$479 = _el$478.firstChild, _el$480 = _el$479.firstChild, _el$482 = _el$480.firstChild, [_el$483, _co$119] = getNextMarker(_el$482.nextSibling), _el$481 = _el$483.nextSibling, _el$484 = _el$481.nextSibling, [_el$485, _co$120] = getNextMarker(_el$484.nextSibling), _el$487 = _el$480.nextSibling, [_el$488, _co$121] = getNextMarker(_el$487.nextSibling), _el$489 = _el$479.nextSibling, _el$491 = _el$489.nextSibling, [_el$492, _co$122] = getNextMarker(_el$491.nextSibling);
+    insert(_el$480, statusIcon, _el$483, _co$119);
+    insert(_el$480, () => data().name, _el$485, _co$120);
+    insert(_el$479, createComponent(Show, {
       get when() {
         return data().row_count !== void 0;
       },
       get children() {
-        var _el$501 = getNextElement(_tmpl$97), _el$503 = _el$501.firstChild, [_el$504, _co$126] = getNextMarker(_el$503.nextSibling);
-        _el$504.nextSibling;
-        insert(_el$501, () => {
+        var _el$486 = getNextElement(_tmpl$97);
+        insert(_el$486, () => {
           var _a;
-          return (_a = data().row_count) == null ? void 0 : _a.toLocaleString();
-        }, _el$504, _co$126);
-        return _el$501;
+          return formatMCPUIString(strings.scratchpadResultCount, {
+            count: ((_a = data().row_count) == null ? void 0 : _a.toLocaleString(strings.locale)) ?? ""
+          });
+        });
+        return _el$486;
       }
-    }), _el$506, _co$127);
-    insert(_el$507, createComponent(For, {
+    }), _el$488, _co$121);
+    insert(_el$489, createComponent(For, {
       get each() {
         return data().capabilities;
       },
       children: (cap) => (() => {
-        var _el$511 = getNextElement(_tmpl$100), _el$513 = _el$511.firstChild, [_el$514, _co$129] = getNextMarker(_el$513.nextSibling), _el$512 = _el$514.nextSibling, _el$515 = _el$512.nextSibling, [_el$516, _co$130] = getNextMarker(_el$515.nextSibling);
-        insert(_el$511, () => cap.supported ? "✅" : "❌", _el$514, _co$129);
-        insert(_el$511, () => cap.label, _el$516, _co$130);
-        effect(() => className(_el$511, `text-[10px] px-1.5 py-0.5 rounded ${cap.supported ? "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400" : "bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400"}`));
-        return _el$511;
+        var _el$493 = getNextElement(_tmpl$100), _el$495 = _el$493.firstChild, [_el$496, _co$123] = getNextMarker(_el$495.nextSibling), _el$494 = _el$496.nextSibling, _el$497 = _el$494.nextSibling, [_el$498, _co$124] = getNextMarker(_el$497.nextSibling);
+        insert(_el$493, () => cap.supported ? "✅" : "❌", _el$496, _co$123);
+        insert(_el$493, () => cap.label, _el$498, _co$124);
+        effect(() => className(_el$493, `text-[10px] px-1.5 py-0.5 rounded ${cap.supported ? "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400" : "bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400"}`));
+        return _el$493;
       })()
     }));
-    insert(_el$493, createComponent(Show, {
+    insert(_el$478, createComponent(Show, {
       get when() {
         return data().freshness || data().latency_ms;
       },
       get children() {
-        var _el$508 = getNextElement(_tmpl$98);
-        insert(_el$508, () => [data().freshness, data().latency_ms ? `${data().latency_ms}ms` : ""].filter(Boolean).join(" · "));
-        return _el$508;
+        var _el$490 = getNextElement(_tmpl$98);
+        insert(_el$490, () => [data().freshness, data().latency_ms ? `${data().latency_ms}ms` : ""].filter(Boolean).join(" · "));
+        return _el$490;
       }
-    }), _el$510, _co$128);
-    return _el$493;
+    }), _el$492, _co$122);
+    return _el$478;
   })();
 };
 const DiffSection = (props) => {
@@ -2155,10 +2198,10 @@ const DiffSection = (props) => {
     return [.../* @__PURE__ */ new Set([...Object.keys(l), ...Object.keys(r)])];
   };
   return (() => {
-    var _el$517 = getNextElement(_tmpl$101), _el$518 = _el$517.firstChild, _el$519 = _el$518.firstChild, _el$520 = _el$519.firstChild, _el$521 = _el$520.firstChild, _el$522 = _el$521.nextSibling, _el$523 = _el$522.nextSibling, _el$524 = _el$519.nextSibling;
-    insert(_el$522, () => data().left.label);
-    insert(_el$523, () => data().right.label);
-    insert(_el$524, createComponent(For, {
+    var _el$499 = getNextElement(_tmpl$101), _el$500 = _el$499.firstChild, _el$501 = _el$500.firstChild, _el$502 = _el$501.firstChild, _el$503 = _el$502.firstChild, _el$504 = _el$503.nextSibling, _el$505 = _el$504.nextSibling, _el$506 = _el$501.nextSibling;
+    insert(_el$504, () => data().left.label);
+    insert(_el$505, () => data().right.label);
+    insert(_el$506, createComponent(For, {
       get each() {
         return allKeys();
       },
@@ -2173,22 +2216,22 @@ const DiffSection = (props) => {
         };
         const isDiff = () => String(lVal()) !== String(rVal()) && data().highlight.includes(key);
         return (() => {
-          var _el$525 = getNextElement(_tmpl$102), _el$526 = _el$525.firstChild, _el$527 = _el$526.nextSibling, _el$528 = _el$527.nextSibling;
-          insert(_el$526, key);
-          insert(_el$527, (() => {
-            var _c$8 = memo(() => lVal() !== void 0);
-            return () => _c$8() ? String(lVal()) : "—";
+          var _el$507 = getNextElement(_tmpl$102), _el$508 = _el$507.firstChild, _el$509 = _el$508.nextSibling, _el$510 = _el$509.nextSibling;
+          insert(_el$508, key);
+          insert(_el$509, (() => {
+            var _c$9 = memo(() => lVal() !== void 0);
+            return () => _c$9() ? String(lVal()) : "—";
           })());
-          insert(_el$528, (() => {
-            var _c$9 = memo(() => rVal() !== void 0);
-            return () => _c$9() ? String(rVal()) : "—";
+          insert(_el$510, (() => {
+            var _c$0 = memo(() => rVal() !== void 0);
+            return () => _c$0() ? String(rVal()) : "—";
           })());
-          effect(() => className(_el$525, `border-t border-gray-100 dark:border-gray-700 ${isDiff() ? "bg-yellow-50 dark:bg-yellow-900/10" : ""}`));
-          return _el$525;
+          effect(() => className(_el$507, `border-t border-gray-100 dark:border-gray-700 ${isDiff() ? "bg-yellow-50 dark:bg-yellow-900/10" : ""}`));
+          return _el$507;
         })();
       }
     }));
-    return _el$517;
+    return _el$499;
   })();
 };
 delegateEvents(["click", "input"]);