npm - @noodleseed/one - Versions diffs - 0.8.0 → 0.10.0 - Mend

@noodleseed/one 0.8.0 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (165) hide show

package/dist/devtools-harness.js ADDED Viewed

@@ -0,0 +1,387 @@
+/**
+ * The `noodle devtools` browser harness: the three-pane shell HTML/CSS, the client script, the
+ * `window.openai` shim injected into widget iframes, and small HTML helpers. Kept separate from the
+ * preview server (`devtools-preview.ts`) so each file owns one concern.
+ *
+ * The client script is plain (no template literals / no `${...}`) so it splices safely into the shell
+ * and so the shim's classic script runs before the widget's deferred bridge module.
+ */
+/**
+ * Serialize a value for safe inlining inside a `<script>` block. Tool output/metadata can contain
+ * `</script>` (and can come from an untrusted upstream API), which would otherwise close the inline script
+ * early and inject markup. `<`/`>`/`&` and the JS line/paragraph separators are neutralized.
+ */
+function jsonForScript(value) {
+    return JSON.stringify(value)
+        .replaceAll('<', '\\u003c')
+        .replaceAll('>', '\\u003e')
+        .replaceAll('&', '\\u0026')
+        .replaceAll('\u2028', '\\u2028')
+        .replaceAll('\u2029', '\\u2029');
+}
+/** Build the classic (non-module) `window.openai` shim injected ahead of the deferred widget bridge. */
+export function openAiShimScript(init) {
+    const data = {
+        toolInput: init.toolInput ?? {},
+        toolOutput: init.toolOutput ?? null,
+        toolResponseMetadata: init.toolResponseMetadata ?? null,
+        theme: init.theme ?? 'light',
+    };
+    return ('<script>' +
+        'window.openai = Object.assign(' +
+        jsonForScript(data) +
+        ', {' +
+        ' widgetState: null, displayMode: "inline", locale: "en",' +
+        ' callTool: function (name, args) {' +
+        '  return fetch("/rpc", { method: "POST", headers: { "content-type": "application/json" },' +
+        '   body: JSON.stringify({ jsonrpc: "2.0", id: Date.now(), method: "tools/call",' +
+        '    params: { name: name, arguments: args || {} } }) })' +
+        '   .then(function (r) { return r.json(); })' +
+        '   .then(function (j) { if (j && j.error) { throw new Error((j.error && j.error.message) || "tool error"); } return j.result; });' +
+        ' },' +
+        ' setWidgetState: function (s) { window.openai.widgetState = s; return Promise.resolve(); },' +
+        // Notify the harness so a widget calling requestDisplayMode("fullscreen") is actually presented fullscreen.
+        ' requestDisplayMode: function (p) { var m = (p && p.mode) || "inline"; window.openai.displayMode = m; try { window.parent.postMessage({ type: "noodle:display-mode", mode: m }, "*"); } catch (e) {} return Promise.resolve({ mode: m }); },' +
+        ' openExternal: function (p) { try { window.open((p && p.href) || "#", "_blank", "noopener"); } catch (e) {} },' +
+        ' sendFollowUpMessage: function () { return Promise.resolve(); }' +
+        '});' +
+        '</script>');
+}
+/**
+ * Paint the widget document canvas with the devtools stage colour ({@link STAGE_BG}) so it blends into the
+ * preview instead of showing a white default canvas. Iframes do not render reliably transparent across
+ * browser color-scheme handling, so an explicit opaque colour is used rather than `transparent`.
+ */
+const STAGE_BG = '#0c0a09';
+const PREVIEW_RESET_STYLE = `<style>html,body{background:${STAGE_BG}!important;margin:0;padding:0}</style>`;
+/** Insert the reset + shim into the widget document so they run before the (deferred) bridge module script. */
+export function wrapWidgetHtml(html, shimScript) {
+    const inject = PREVIEW_RESET_STYLE + shimScript;
+    const lower = html.toLowerCase();
+    const headIdx = lower.indexOf('<head>');
+    if (headIdx !== -1) {
+        const at = headIdx + '<head>'.length;
+        return html.slice(0, at) + inject + html.slice(at);
+    }
+    const bodyIdx = lower.indexOf('<body');
+    if (bodyIdx !== -1) {
+        const close = html.indexOf('>', bodyIdx);
+        if (close !== -1)
+            return html.slice(0, close + 1) + inject + html.slice(close + 1);
+    }
+    return inject + html;
+}
+function escapeHtml(value) {
+    return value.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+}
+/** Official Noodle Seed brand mark (from apps/website/public/favicon.svg), sized via CSS. */
+const NOODLE_MARK = '<svg class="brand__mark" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' +
+    '<rect width="16" height="16" rx="8" fill="white"/>' +
+    '<path d="M8.58023 12.8485C6.27833 12.8463 4.41315 11.0141 4.42117 8.75681L4.43588 4.61714L8.66254 4.62118C10.9644 4.62339 12.8296 6.45561 12.8216 8.71287C12.8135 10.9975 10.9128 12.8507 8.58023 12.8485Z" fill="black"/>' +
+    '<path d="M8.82627 4.76869C11.1282 4.7709 12.9933 6.60312 12.9853 8.86038L12.9706 13L8.74395 12.996C6.44206 12.9938 4.57687 11.1616 4.5849 8.90432C4.59302 6.6197 6.49364 4.76646 8.82627 4.76869Z" fill="black"/>' +
+    '<ellipse cx="3.69536" cy="3.68106" rx="0.695363" ry="0.681056" fill="black"/></svg>';
+/** The three-pane harness shell. */
+export function harnessHtml(options) {
+    const client = HARNESS_CLIENT_JS.replace('__INITIAL_THEME__', options.theme === 'dark' ? 'dark' : 'light')
+        .replace('__INITIAL_DEVICE__', options.device === 'mobile' ? 'mobile' : 'desktop')
+        // replaceAll: the placeholder appears more than once in the client — a single replace would leave a
+        // literal `__CHAT_HAS_KEY__` that throws a ReferenceError and aborts the script (breaking the key gate).
+        .replaceAll('__CHAT_HAS_KEY__', options.hasServerKey ? 'true' : 'false');
+    return ('<!doctype html><html lang="en"><head><meta charset="utf-8">' +
+        '<meta name="viewport" content="width=device-width, initial-scale=1">' +
+        '<title>Noodle Seed Devtools</title><style>' +
+        HARNESS_CSS +
+        '</style></head><body>' +
+        '<header class="bar"><span class="brand">' +
+        NOODLE_MARK +
+        '<span class="brand__name">Noodle Seed</span><span class="brand__label">Devtools</span></span>' +
+        '<div class="modes" role="tablist">' +
+        '<button id="mode-preview" class="mode is-active" type="button" role="tab">Preview</button>' +
+        '<button id="mode-chat" class="mode" type="button" role="tab">Chat</button>' +
+        '</div>' +
+        `<span class="muted brand__url">${escapeHtml(options.mcpUrl)}</span></header>` +
+        '<div class="cols">' +
+        '<aside id="tools" class="pane pane--tools"><h2>Tools</h2><ul id="tool-list"></ul></aside>' +
+        '<main id="stage" class="pane pane--stage">' +
+        '<div id="preview-view">' +
+        '<div id="controls" class="controls">' +
+        '<span class="ctl"><span class="ctl__lbl">Theme</span><select id="theme"><option value="light">Light</option><option value="dark">Dark</option></select></span>' +
+        '<span class="ctl"><span class="ctl__lbl">Device</span><select id="device"><option value="desktop">Desktop</option><option value="mobile">Mobile</option></select></span>' +
+        '<span class="ctl ctl--width"><span class="ctl__lbl">Width</span><input id="width" type="range" min="320" max="1200" value="820"><span id="width-val" class="ctl__val">820px</span></span>' +
+        '<span class="ctl__spacer"></span>' +
+        '<button id="fullscreen" class="ctl-btn" type="button" title="Toggle fullscreen preview">' +
+        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m13-5h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3m13 5h3a2 2 0 0 0 2-2v-3"/></svg>Fullscreen</button>' +
+        '<button id="reload" class="ctl-btn" type="button" title="Reload widget">' +
+        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 4v5h-5"/></svg>Reload</button>' +
+        '</div>' +
+        '<div id="empty" class="empty-state">' +
+        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">' +
+        '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/><path d="M7.5 4v5"/></svg>' +
+        '<p>Nothing selected</p>' +
+        '<span>Pick a tool on the left — preview a widget, or run a tool to see its JSON response here.</span>' +
+        '</div>' +
+        '<iframe id="frame" class="hidden" title="widget preview"></iframe>' +
+        '<div id="result" class="hidden"><div class="result__label">response</div><pre id="result-pre"></pre></div>' +
+        '</div>' +
+        '<div id="chat-view" class="hidden">' +
+        // Key-entry gate — shown when the server has no key; the key is sent to the loopback /chat only.
+        '<div id="chat-gate" class="chat-gate"><div class="chat-gate__card">' +
+        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">' +
+        '<circle cx="7.5" cy="15.5" r="4.5"/><path d="M10.7 12.3 19 4"/><path d="m16 6 2 2"/><path d="m14 8 2 2"/></svg>' +
+        '<h3>Connect a model</h3>' +
+        '<p>Enter an OpenAI API key to start the chat playground. It is kept only on this local devtools server to call OpenAI — never stored in the browser.</p>' +
+        '<form id="chat-key-form"><input id="chat-key-input" type="password" placeholder="sk-…" autocomplete="off" spellcheck="false">' +
+        '<button class="btn btn--run" type="submit">Start chatting</button></form>' +
+        '<span id="chat-gate-hint" class="chat-gate__hint">Prefer a file? Set <code>OPENAI_API_KEY</code> in your shell or a <code>.env.local</code>.</span>' +
+        '</div></div>' +
+        '<div id="chat-body" class="hidden">' +
+        '<div id="chat-keybar"><button id="chat-reset" type="button">Change key</button></div>' +
+        '<div id="chat-log"><div id="chat-empty" class="empty-state">' +
+        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">' +
+        '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>' +
+        '<p>Chat playground</p>' +
+        '<span>Ask the agent to use this server&#39;s tools. Tool calls and any widgets render inline.</span>' +
+        '</div></div>' +
+        '<form id="chat-form" class="chat-form">' +
+        '<textarea id="chat-input" rows="1" placeholder="Ask the agent to run a tool…"></textarea>' +
+        '<button id="chat-send" class="btn btn--run" type="submit">Send</button>' +
+        '</form>' +
+        '</div>' +
+        '</div>' +
+        '</main>' +
+        '<aside id="log" class="pane pane--log"><h2>MCP calls</h2><ol id="log-list"></ol></aside>' +
+        '</div>' +
+        '<script>' +
+        client +
+        '</script></body></html>');
+}
+const HARNESS_CSS =
+// Warm-on-stone brand palette ported from apps/website (stone-950 base + warm CTA ramp).
+':root{color-scheme:dark;' +
+    '--nd-bg:#0c0a09;--nd-panel:#1c1917;--nd-raised:#292524;' +
+    '--nd-border:rgba(250,250,249,.09);--nd-border-strong:rgba(250,250,249,.16);' +
+    '--nd-text:#fafaf9;--nd-muted:#a8a29e;--nd-faint:#78716c;' +
+    '--nd-accent:#f97316;--nd-amber:#f59e0b;--nd-rose:#f43f5e;--nd-ok:#4ade80;' +
+    '--nd-r:10px;--nd-r-sm:7px;' +
+    '--nd-font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;' +
+    '--nd-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace}' +
+    '*{box-sizing:border-box}' +
+    // Full-height flex column (header + cols) instead of a magic `100vh - 49px`, so a taller header (mode
+    // toggle) never pushes the grid past the viewport and makes the body scroll.
+    'body{margin:0;height:100vh;display:flex;flex-direction:column;overflow:hidden;font-family:var(--nd-font);background:var(--nd-bg);color:var(--nd-text);-webkit-font-smoothing:antialiased}' +
+    '.bar{flex:none;display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--nd-border)}' +
+    '.brand{display:flex;align-items:center;gap:9px}' +
+    '.brand__mark{width:22px;height:22px;display:block;flex:none}' +
+    '.brand__name{font-weight:650;font-size:14px;color:var(--nd-text);letter-spacing:-.01em}' +
+    '.brand__label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--nd-accent);background:color-mix(in oklab,var(--nd-accent) 14%,transparent);padding:2px 7px;border-radius:999px}' +
+    '.brand__url{margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:38%}' +
+    '.muted{color:var(--nd-muted);font-size:12px}' +
+    // Segmented Preview|Chat toggle in the header.
+    '.modes{display:flex;gap:2px;background:var(--nd-panel);border:1px solid var(--nd-border-strong);border-radius:999px;padding:3px}' +
+    '.mode{background:transparent;color:var(--nd-muted);border:0;border-radius:999px;padding:5px 16px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}' +
+    '.mode.is-active{background:var(--nd-accent);color:#1c0a00}' +
+    '.cols{flex:1;min-height:0;display:grid;grid-template-columns:288px 1fr 372px;grid-template-rows:minmax(0,1fr)}' +
+    '.pane{padding:14px;overflow:auto}.pane--tools{border-right:1px solid var(--nd-border)}' +
+    '.pane--log{border-left:1px solid var(--nd-border)}' +
+    'h2{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--nd-faint);margin:0 0 12px;font-weight:600}' +
+    '#tool-list{list-style:none;margin:0;padding:0}' +
+    '.tool{border:1px solid var(--nd-border);border-radius:var(--nd-r);margin-bottom:8px;overflow:hidden;background:var(--nd-panel)}' +
+    '.tool__head{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;font-size:13.5px}' +
+    '.tool__head:hover{background:var(--nd-raised)}.tool.open .tool__head{background:var(--nd-raised)}' +
+    '.tool__name{font-weight:600;font-family:var(--nd-mono);font-size:13px}' +
+    '.tag{font-size:10px;font-weight:600;color:var(--nd-accent);background:color-mix(in oklab,var(--nd-accent) 16%,transparent);padding:1px 7px;border-radius:999px}' +
+    '.chev{color:var(--nd-faint);font-size:11px}.tool__head .chev{margin-left:auto}' +
+    '.tool__detail{display:none;padding:2px 12px 12px}.tool.open .tool__detail{display:block}' +
+    '.tool__desc{color:var(--nd-muted);font-size:12.5px;margin:6px 0 12px;line-height:1.5}' +
+    '.field{margin-bottom:10px}.field label{display:block;font-size:12px;color:var(--nd-text);margin-bottom:4px}' +
+    '.field__hint{font-size:11px;color:var(--nd-muted);margin-top:4px;line-height:1.4}' +
+    '.field input[type=text],.field input[type=number],.field select{width:100%;background:var(--nd-bg);color:var(--nd-text);border:1px solid var(--nd-border-strong);border-radius:var(--nd-r-sm);padding:7px 9px;font-size:13px;font-family:var(--nd-mono)}' +
+    '.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--nd-accent);outline-offset:1px}' +
+    '.tool__actions{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}' +
+    '.btn{background:var(--nd-raised);color:var(--nd-text);border:1px solid var(--nd-border-strong);border-radius:var(--nd-r-sm);padding:7px 14px;font-size:13px;font-weight:500;cursor:pointer;transition:filter .15s ease}' +
+    '.btn:hover{filter:brightness(1.15)}' +
+    '.btn--run{background:var(--nd-accent);border-color:transparent;color:#1c0a00;font-weight:600;box-shadow:0 6px 18px color-mix(in oklab,var(--nd-accent) 35%,transparent)}' +
+    '.btn:disabled{opacity:.55;cursor:default;box-shadow:none;filter:none}' +
+    // Polished preview toolbar: one rounded bar, micro-labels, custom-caret selects, icon buttons.
+    '.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;padding:7px 9px;background:var(--nd-panel);border:1px solid var(--nd-border);border-radius:12px}' +
+    '.ctl{display:flex;align-items:center;gap:8px}' +
+    '.ctl__lbl{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--nd-faint);font-weight:600}' +
+    '.ctl select{appearance:none;-webkit-appearance:none;background-color:var(--nd-bg);color:var(--nd-text);border:1px solid var(--nd-border-strong);' +
+    'border-radius:8px;padding:6px 26px 6px 10px;font-size:12.5px;font-family:inherit;cursor:pointer;background-repeat:no-repeat;background-position:right 8px center;background-size:11px;' +
+    'background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20stroke%3D%22%23a8a29e%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%204.5%206%207.5%209%204.5%22%2F%3E%3C%2Fsvg%3E")}' +
+    '.ctl select:hover{border-color:var(--nd-faint)}.ctl select:focus-visible{outline:2px solid var(--nd-accent);outline-offset:1px}' +
+    '.ctl--width{gap:10px}.ctl input[type=range]{accent-color:var(--nd-accent);width:118px;height:4px;cursor:pointer}' +
+    '.ctl__val{font-family:var(--nd-mono);font-size:11.5px;color:var(--nd-muted);min-width:46px}' +
+    '.ctl__spacer{margin-left:auto}' +
+    '.ctl-btn{display:inline-flex;align-items:center;gap:6px;background:var(--nd-bg);color:var(--nd-text);border:1px solid var(--nd-border-strong);' +
+    'border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:500;cursor:pointer;font-family:inherit;transition:filter .15s ease,border-color .15s ease}' +
+    '.ctl-btn:hover{border-color:var(--nd-faint);filter:brightness(1.12)}.ctl-btn svg{width:14px;height:14px}' +
+    // min-height:0 + overflow:hidden so the stage stays bounded and its inner scroller (chat log / result) scrolls
+    // instead of the whole grid growing as tool cards accumulate.
+    '.pane--stage{display:flex;flex-direction:column;padding:0;min-height:0;overflow:hidden}.pane--stage>div{padding:14px}' +
+    '#preview-view{flex:1;min-height:0;flex-direction:column}' +
+    '.hidden{display:none}' +
+    '#frame{width:820px;max-width:100%;height:300px;border:0;background:var(--nd-bg);display:block;margin:0 auto;flex:none}' +
+    // Fullscreen: the widget iframe fills the viewport; a floating exit control + Esc leave it.
+    '.nd-frame-full{display:block!important;position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;margin:0!important;z-index:60!important;background:var(--nd-bg)!important}' +
+    '#fs-exit{position:fixed;top:16px;right:16px;z-index:61;display:inline-flex;align-items:center;gap:6px;background:var(--nd-panel);color:var(--nd-text);' +
+    'border:1px solid var(--nd-border-strong);border-radius:8px;padding:8px 13px;font-size:12.5px;font-weight:500;cursor:pointer;font-family:var(--nd-font);box-shadow:0 10px 30px rgba(0,0,0,.45)}' +
+    '#fs-exit:hover{filter:brightness(1.12)}' +
+    '.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--nd-muted);text-align:center;padding:24px}' +
+    '.empty-state svg{width:48px;height:48px;color:var(--nd-accent);opacity:.55}' +
+    '.empty-state p{margin:0;font-size:15px;font-weight:600;color:var(--nd-text)}' +
+    '.empty-state span{font-size:12.5px;max-width:300px;line-height:1.5}' +
+    '#result{flex:1;min-height:0;overflow:auto}' +
+    '.result__label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--nd-faint);margin:0 0 6px}' +
+    '#result pre{margin:0;background:var(--nd-panel);border:1px solid var(--nd-border);border-radius:var(--nd-r);padding:12px;' +
+    'font-family:var(--nd-mono);font-size:12.5px;white-space:pre-wrap;word-break:break-word;color:var(--nd-text)}' +
+    '#log-list{list-style:none;margin:0;padding:0;font-size:12px}' +
+    '.log{border-bottom:1px solid var(--nd-border)}' +
+    '.log__head{display:flex;gap:8px;align-items:baseline;padding:7px 4px;cursor:pointer}' +
+    '.log__head:hover{background:var(--nd-panel)}' +
+    '.log .m{font-weight:600;font-family:var(--nd-mono);font-size:11.5px}.log .ok{color:var(--nd-ok)}.log .error{color:var(--nd-rose)}' +
+    '.log__sum{color:var(--nd-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}' +
+    '.log .d{margin-left:auto;color:var(--nd-faint)}' +
+    '.log__detail{display:none;padding:4px 6px 10px}.log.open .log__detail{display:block}' +
+    '.log__label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--nd-faint);margin:6px 0 3px}' +
+    '.log__detail pre{margin:0;background:var(--nd-bg);border:1px solid var(--nd-border);border-radius:var(--nd-r-sm);padding:8px;' +
+    'font-family:var(--nd-mono);font-size:11.5px;white-space:pre-wrap;word-break:break-word;max-height:280px;overflow:auto;color:var(--nd-text)}' +
+    // Chat playground.
+    '#chat-view{flex:1;min-height:0;flex-direction:column}' +
+    '#chat-body{flex:1;min-height:0;flex-direction:column;gap:12px}' +
+    '.chat-gate{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:24px}' +
+    '.chat-gate__card{max-width:390px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}' +
+    '.chat-gate__card svg{width:38px;height:38px;color:var(--nd-accent);opacity:.75}' +
+    '.chat-gate__card h3{margin:0;font-size:16px;font-weight:650;letter-spacing:-.01em}' +
+    '.chat-gate__card p{margin:0;font-size:12.5px;color:var(--nd-muted);line-height:1.55}' +
+    '#chat-key-form{display:flex;gap:8px;width:100%;margin-top:6px}' +
+    '#chat-key-input{flex:1;background:var(--nd-bg);color:var(--nd-text);border:1px solid var(--nd-border-strong);' +
+    'border-radius:var(--nd-r-sm);padding:9px 11px;font-size:13px;font-family:var(--nd-mono)}' +
+    '#chat-key-input:focus-visible{outline:2px solid var(--nd-accent);outline-offset:1px}' +
+    '.chat-gate__hint{font-size:11.5px;color:var(--nd-faint);line-height:1.5}' +
+    '.chat-gate__hint code{font-family:var(--nd-mono);color:var(--nd-muted)}' +
+    '.chat-gate__hint.err{color:var(--nd-rose)}' +
+    '#chat-keybar{display:none;justify-content:flex-end;flex:none}#chat-keybar.on{display:flex}' +
+    '#chat-reset{background:transparent;border:0;color:var(--nd-muted);font-size:11.5px;cursor:pointer;text-decoration:underline;font-family:inherit;padding:0}' +
+    '#chat-reset:hover{color:var(--nd-text)}' +
+    '#chat-log{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px}' +
+    // Critical: children must not flex-shrink, else they compress to fit (no scroll, squished/cut-off cards)
+    // instead of overflowing the log. flex:none = keep natural height; the log scrolls.
+    '#chat-log>*{flex:0 0 auto}' +
+    // User message: a rounded bubble. Assistant: plain text + inline widget, no bubble.
+    '.msg{max-width:84%;line-height:1.55;white-space:pre-wrap;word-break:break-word}' +
+    '.msg--user{align-self:flex-end;background:var(--nd-accent);color:#1c0a00;font-weight:500;padding:10px 15px;border-radius:18px;font-size:13.5px}' +
+    '.msg--assistant{align-self:stretch;max-width:100%;color:var(--nd-text);font-size:14px;padding:2px 1px}' +
+    '.msg--error{align-self:flex-start;background:color-mix(in oklab,var(--nd-rose) 14%,transparent);border:1px solid color-mix(in oklab,var(--nd-rose) 40%,transparent);color:var(--nd-text);padding:10px 14px;border-radius:14px;font-size:13.5px}' +
+    '.msg--pending{align-self:flex-start;color:var(--nd-muted);font-style:italic;font-size:13.5px;padding:2px 1px}' +
+    // Tool call: a minimal, collapsed-by-default card, separate from the widget.
+    '.toolcall{align-self:stretch;border:1px solid var(--nd-border);border-radius:12px;background:color-mix(in oklab,var(--nd-panel) 55%,transparent);overflow:hidden}' +
+    '.toolcall__head{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;font-size:12.5px}' +
+    '.toolcall__head:hover{background:color-mix(in oklab,var(--nd-panel) 80%,transparent)}' +
+    '.toolcall__ico{color:var(--nd-faint);display:flex;align-items:center}.toolcall__ico svg{width:14px;height:14px}' +
+    '.toolcall__name{font-family:var(--nd-mono);font-weight:600;font-size:12.5px;color:var(--nd-text)}' +
+    '.toolcall__name.error{color:var(--nd-rose)}' +
+    '.toolcall__chev{margin-left:auto;color:var(--nd-faint);font-size:11px}' +
+    '.toolcall__detail{display:none;padding:0 12px 12px}.toolcall.open .toolcall__detail{display:block}' +
+    '.toolcall__detail .log__label{margin:10px 0 4px}.toolcall__detail .log__label:first-child{margin-top:2px}' +
+    // No inner scroll: the JSON renders full-height and the chat log is the single scroll surface.
+    '.toolcall__detail pre{margin:0;background:var(--nd-bg);border:1px solid var(--nd-border);border-radius:8px;padding:8px;' +
+    'font-family:var(--nd-mono);font-size:11.5px;white-space:pre-wrap;word-break:break-word;overflow-x:auto;color:var(--nd-text)}' +
+    // Widget: inline in the conversation, no wrapping container. A shimmer skeleton covers it while it mounts.
+    '.chat-widget{align-self:stretch;margin:2px 0;position:relative;min-height:160px}' +
+    '.chat-widget iframe{width:100%;border:0;background:var(--nd-bg);display:block;min-height:120px}' +
+    '.chat-skeleton{position:absolute;inset:0;border-radius:12px;background:var(--nd-panel);border:1px solid var(--nd-border);overflow:hidden}' +
+    '.chat-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);animation:nd-shimmer 1.4s ease-in-out infinite;' +
+    'background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--nd-raised) 70%,transparent),transparent)}' +
+    '@keyframes nd-shimmer{100%{transform:translateX(100%)}}' +
+    '@media (prefers-reduced-motion: reduce){.chat-skeleton::after{animation:none}}' +
+    '.chat-form{display:flex;gap:8px;align-items:flex-end;border-top:1px solid var(--nd-border);padding-top:12px;flex:none}' +
+    '#chat-input{flex:1;resize:none;max-height:160px;background:var(--nd-bg);color:var(--nd-text);border:1px solid var(--nd-border-strong);' +
+    'border-radius:var(--nd-r-sm);padding:9px 11px;font-size:13.5px;font-family:var(--nd-font);line-height:1.5}' +
+    '#chat-input:focus-visible{outline:2px solid var(--nd-accent);outline-offset:1px}' +
+    '#chat-send:disabled{opacity:.55;cursor:default;box-shadow:none;filter:none}';
+// Plain ES5-ish client (no template literals / no ${...}) — spliced into the harness verbatim.
+const HARNESS_CLIENT_JS = [
+    'var frame=document.getElementById("frame");',
+    'var empty=document.getElementById("empty");',
+    'var themeSel=document.getElementById("theme");',
+    'var deviceSel=document.getElementById("device");',
+    'var widthInput=document.getElementById("width");',
+    'var widthVal=document.getElementById("width-val");',
+    'var current=null; var currentArgs={};',
+    'var resultBox=document.getElementById("result"); var resultPre=document.getElementById("result-pre"); var controlsBar=document.getElementById("controls");',
+    'themeSel.value="__INITIAL_THEME__"; deviceSel.value="__INITIAL_DEVICE__";',
+    'function rpc(method,params){ return fetch("/rpc",{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify({jsonrpc:"2.0",id:Date.now(),method:method,params:params||{}})}).then(function(r){return r.json();}); }',
+    'function applyTheme(){ try{ var w=frame.contentWindow; if(w&&w.openai){ w.openai.theme=themeSel.value; w.dispatchEvent(new Event("openai:set_globals")); } }catch(e){} }',
+    'function fitFrame(){ if(frame.classList.contains("nd-frame-full")) return; try{ var d=frame.contentDocument; if(d&&d.documentElement){ frame.style.height=Math.max(120, d.documentElement.scrollHeight)+"px"; } }catch(e){} }',
+    'function clearBg(){ try{ var d=frame.contentDocument; if(d){ if(d.documentElement) d.documentElement.style.setProperty("background","#0c0a09","important"); if(d.body) d.body.style.setProperty("background","#0c0a09","important"); } }catch(e){} }',
+    'function applyDevice(){ widthInput.value = deviceSel.value==="mobile"?390:820; syncWidth(); }',
+    'function syncWidth(){ frame.style.width=widthInput.value+"px"; widthVal.textContent=widthInput.value+"px"; }',
+    'function setState(s){ empty.style.display=s==="empty"?"flex":"none"; frame.style.display=s==="widget"?"block":"none"; resultBox.style.display=s==="result"?"block":"none"; controlsBar.style.display=s==="widget"?"flex":"none"; }',
+    'function loadWidget(name,args){ current=name; currentArgs=args||{}; setState("widget"); var q="/widget?name="+encodeURIComponent(name); if(Object.keys(currentArgs).length) q+="&args="+encodeURIComponent(JSON.stringify(currentArgs)); frame.src=q; }',
+    'function showResult(v){ current=null; resultPre.textContent=(typeof v==="string")?v:JSON.stringify(v,null,2); setState("result"); }',
+    'frame.addEventListener("load", function(){ applyTheme(); clearBg(); fitFrame(); try{ var b=frame.contentDocument&&frame.contentDocument.body; if(b&&window.ResizeObserver){ new ResizeObserver(function(){ clearBg(); fitFrame(); }).observe(b); } }catch(e){} setTimeout(function(){ clearBg(); fitFrame(); },150); setTimeout(function(){ clearBg(); fitFrame(); },600); });',
+    'themeSel.addEventListener("change", applyTheme);',
+    'deviceSel.addEventListener("change", applyDevice);',
+    'widthInput.addEventListener("input", syncWidth);',
+    'document.getElementById("reload").addEventListener("click", function(){ if(current) loadWidget(current, currentArgs); });',
+    // Fullscreen: works for the preview frame (toolbar button) and any chat widget (its requestDisplayMode).
+    'var fsFrame=null; var fsExitBtn=null;',
+    'function ndFit(f){ if(f===frame) fitFrame(); else fitChatFrame(f); }',
+    'function notifyDisplayMode(f,mode){ try{ var w=f.contentWindow; if(w&&w.openai){ w.openai.displayMode=mode; w.dispatchEvent(new Event("openai:set_globals")); } }catch(e){} }',
+    'function enterFullscreen(f){ if(!f) return; if(fsFrame) exitFullscreen(); fsFrame=f; f.classList.add("nd-frame-full"); if(!fsExitBtn){ fsExitBtn=document.createElement("button"); fsExitBtn.id="fs-exit"; fsExitBtn.type="button"; fsExitBtn.innerHTML="\\u2715 Exit fullscreen"; fsExitBtn.addEventListener("click", exitFullscreen); document.body.appendChild(fsExitBtn); } notifyDisplayMode(f,"fullscreen"); }',
+    'function exitFullscreen(){ if(fsFrame){ var f=fsFrame; f.classList.remove("nd-frame-full"); notifyDisplayMode(f,"inline"); fsFrame=null; setTimeout(function(){ ndFit(f); },0); } if(fsExitBtn){ fsExitBtn.remove(); fsExitBtn=null; } }',
+    'document.addEventListener("keydown", function(e){ if(e.key==="Escape"&&fsFrame) exitFullscreen(); });',
+    'document.getElementById("fullscreen").addEventListener("click", function(){ if(fsFrame) exitFullscreen(); else if(current) enterFullscreen(frame); });',
+    'function findFrameBySource(src){ if(frame&&frame.contentWindow===src) return frame; var list=document.querySelectorAll("#chat-log iframe"); for(var i=0;i<list.length;i++){ if(list[i].contentWindow===src) return list[i]; } return null; }',
+    'window.addEventListener("message", function(ev){ var d=ev.data; if(!d||d.type!=="noodle:display-mode") return; var f=findFrameBySource(ev.source); if(!f) return; if(d.mode==="fullscreen") enterFullscreen(f); else if(fsFrame===f) exitFullscreen(); });',
+    // Tool cards (expandable: description + schema fields + a single Run; widget tools render in the preview).
+    'function makeControl(p){ if(Array.isArray(p.enum)){ var s=document.createElement("select"); p.enum.forEach(function(v){ var o=document.createElement("option"); o.value=String(v); o.textContent=String(v); s.appendChild(o); }); return s; } if(p.type==="boolean"){ var c=document.createElement("input"); c.type="checkbox"; return c; } var i=document.createElement("input"); i.type=(p.type==="number"||p.type==="integer")?"number":"text"; if(p.default!==undefined&&p.type!=="object"&&p.type!=="array") i.value=String(p.default); return i; }',
+    'function collect(props,controls){ var args={}; Object.keys(controls).forEach(function(k){ var p=props[k]||{}; var el=controls[k]; if(el.type==="checkbox"){ args[k]=el.checked; return; } var v=el.value; if(v==="") return; if(p.type==="number"||p.type==="integer"){ args[k]=Number(v); return; } if(p.type==="object"||p.type==="array"){ try{ args[k]=JSON.parse(v); }catch(e){ args[k]=v; } return; } args[k]=v; }); return args; }',
+    'function buildDetail(detail,t,hasWidget){ if(t.description){ var d=document.createElement("p"); d.className="tool__desc"; d.textContent=t.description; detail.appendChild(d); } var schema=t.inputSchema||{}; var props=schema.properties||{}; var req=schema.required||[]; var controls={}; Object.keys(props).forEach(function(k){ var p=props[k]||{}; var f=document.createElement("div"); f.className="field"; var lab=document.createElement("label"); lab.textContent=k+(req.indexOf(k)>=0?" *":"")+(p.type?"  ("+p.type+")":""); var ctrl=makeControl(p); f.appendChild(lab); f.appendChild(ctrl); if(p.description){ var h=document.createElement("div"); h.className="field__hint"; h.textContent=p.description; f.appendChild(h); } controls[k]=ctrl; detail.appendChild(f); }); var actions=document.createElement("div"); actions.className="tool__actions"; var run=document.createElement("button"); run.className="btn btn--run"; run.textContent="Run"; run.addEventListener("click", function(){ if(hasWidget){ loadWidget(t.name, collect(props,controls)); return; } var args=collect(props,controls); run.disabled=true; var o=run.textContent; run.textContent="Running…"; rpc("tools/call",{name:t.name,arguments:args}).then(function(j){ showResult(j&&j.result!==undefined?j.result:(j&&j.error!==undefined?j.error:j)); }).catch(function(){}).then(function(){ run.disabled=false; run.textContent=o; }); }); actions.appendChild(run); detail.appendChild(actions); }',
+    'function renderTools(tools){ var ul=document.getElementById("tool-list"); ul.innerHTML=""; tools.forEach(function(t){ var li=document.createElement("li"); li.className="tool"; var head=document.createElement("div"); head.className="tool__head"; var nm=document.createElement("span"); nm.className="tool__name"; nm.textContent=t.name; head.appendChild(nm); var hasWidget=t._meta&&t._meta.ui&&t._meta.ui.resourceUri; if(hasWidget){ var b=document.createElement("span"); b.className="tag"; b.textContent="widget"; head.appendChild(b); } var chev=document.createElement("span"); chev.className="chev"; chev.textContent="▸"; head.appendChild(chev); var detail=document.createElement("div"); detail.className="tool__detail"; head.addEventListener("click", function(){ var open=li.classList.toggle("open"); chev.textContent=open?"▾":"▸"; if(open&&!detail.dataset.built){ buildDetail(detail,t,hasWidget); detail.dataset.built="1"; } }); li.appendChild(head); li.appendChild(detail); ul.appendChild(li); }); }',
+    'function refreshTools(){ return rpc("tools/list",{}).then(function(j){ renderTools((j.result&&j.result.tools)||[]); }); }',
+    'refreshTools();',
+    // MCP call log (expandable: input + output JSON).
+    'function section(label,value){ var w=document.createElement("div"); var h=document.createElement("div"); h.className="log__label"; h.textContent=label; var pre=document.createElement("pre"); pre.textContent=(typeof value==="string")?value:JSON.stringify(value,null,2); w.appendChild(h); w.appendChild(pre); return w; }',
+    'function addLog(e){ var ol=document.getElementById("log-list"); var li=document.createElement("li"); li.className="log"; var head=document.createElement("div"); head.className="log__head"; var has=(e.request!==undefined||e.response!==undefined); var chev=document.createElement("span"); chev.className="chev"; chev.textContent=has?"▸":""; var m=document.createElement("span"); m.className="m "+e.status; m.textContent=e.method; var n=document.createElement("span"); n.className="log__sum"; n.textContent=(e.name?e.name+" ":"")+e.summary; var d=document.createElement("span"); d.className="d"; d.textContent=e.durationMs+"ms"; head.appendChild(chev); head.appendChild(m); head.appendChild(n); head.appendChild(d); var detail=document.createElement("div"); detail.className="log__detail"; if(has){ head.addEventListener("click", function(){ var open=li.classList.toggle("open"); chev.textContent=open?"▾":"▸"; if(open&&!detail.dataset.built){ if(e.request!==undefined) detail.appendChild(section("input",e.request)); if(e.response!==undefined) detail.appendChild(section("output",e.response)); detail.dataset.built="1"; } }); } li.appendChild(head); li.appendChild(detail); ol.insertBefore(li, ol.firstChild); }',
+    'try{ var es=new EventSource("/rpc/log"); es.onmessage=function(ev){ try{ addLog(JSON.parse(ev.data)); }catch(e){} }; }catch(e){}',
+    'try{ var rs=new EventSource("/reload"); rs.onmessage=function(){ refreshTools(); if(current) loadWidget(current, currentArgs); }; }catch(e){}',
+    // Preview | Chat mode toggle.
+    'var previewView=document.getElementById("preview-view"); var chatView=document.getElementById("chat-view");',
+    'var modePreview=document.getElementById("mode-preview"); var modeChat=document.getElementById("mode-chat");',
+    'function setMode(m){ var p=m!=="chat"; modePreview.classList.toggle("is-active",p); modeChat.classList.toggle("is-active",!p); previewView.style.display=p?"flex":"none"; chatView.style.display=p?"none":"flex"; if(!p) enterChat(); }',
+    'modePreview.addEventListener("click", function(){ setMode("preview"); });',
+    'modeChat.addEventListener("click", function(){ setMode("chat"); });',
+    // Chat playground: an agent turn posts the running message history to /chat and renders tool calls inline.
+    'var chatMessages=[]; var chatBusy=false;',
+    'var chatLog=document.getElementById("chat-log"); var chatForm=document.getElementById("chat-form"); var chatInput=document.getElementById("chat-input"); var chatSend=document.getElementById("chat-send"); var chatEmpty=document.getElementById("chat-empty");',
+    // Key gate: the key lives ONLY in the loopback server (POST /chat/key), never in the browser — same-origin
+    // widget iframes could otherwise read it from localStorage/globals and exfiltrate it. The gate state comes
+    // from GET /chat/status (a boolean + source), and the key is never sent back to the page.
+    'var chatGate=document.getElementById("chat-gate"); var chatBody=document.getElementById("chat-body"); var chatKeyForm=document.getElementById("chat-key-form"); var chatKeyInput=document.getElementById("chat-key-input"); var chatGateHint=document.getElementById("chat-gate-hint"); var chatKeybar=document.getElementById("chat-keybar"); var chatReset=document.getElementById("chat-reset");',
+    'var chatHasKey=__CHAT_HAS_KEY__; var chatKeySource=__CHAT_HAS_KEY__?"env":"none";',
+    'function refreshChatReady(cb){ fetch("/chat/status").then(function(r){return r.json();}).then(function(j){ chatHasKey=!!(j&&j.hasKey); chatKeySource=(j&&j.source)||"none"; if(cb) cb(); }).catch(function(){ if(cb) cb(); }); }',
+    'function renderGate(){ if(chatHasKey){ chatGate.style.display="none"; chatBody.style.display="flex"; chatKeybar.className=(chatKeySource==="session")?"on":""; chatInput.focus(); } else { chatBody.style.display="none"; chatGate.style.display="flex"; chatKeyInput.focus(); } }',
+    'function enterChat(){ renderGate(); refreshChatReady(renderGate); }',
+    'function showKeyError(msg){ chatGateHint.textContent=msg; chatGateHint.className="chat-gate__hint err"; chatBody.style.display="none"; chatGate.style.display="flex"; chatKeyInput.focus(); }',
+    'chatKeyForm.addEventListener("submit", function(e){ e.preventDefault(); var v=chatKeyInput.value.trim(); if(!v) return; fetch("/chat/key",{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify({key:v})}).then(function(r){return r.json();}).then(function(j){ chatKeyInput.value=""; if(j&&j.ok){ chatHasKey=!!j.hasKey; chatKeySource=j.source||"session"; chatGateHint.className="chat-gate__hint"; chatGateHint.innerHTML="Prefer a file? Set <code>OPENAI_API_KEY</code> in your shell or a <code>.env.local</code>."; renderGate(); } else { showKeyError("Could not set the key. Try again."); } }).catch(function(){ showKeyError("Could not reach the devtools server."); }); });',
+    'chatReset.addEventListener("click", function(){ fetch("/chat/key",{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify({key:""})}).then(function(r){return r.json();}).then(function(j){ chatHasKey=!!(j&&j.hasKey); chatKeySource=(j&&j.source)||"none"; renderGate(); }).catch(function(){ enterChat(); }); });',
+    'function scrollChat(){ chatLog.scrollTop=chatLog.scrollHeight; }',
+    'function clearChatEmpty(){ if(chatEmpty){ chatEmpty.remove(); chatEmpty=null; } }',
+    'function chatBubble(cls,text){ clearChatEmpty(); var d=document.createElement("div"); d.className="msg "+cls; d.textContent=text; chatLog.appendChild(d); scrollChat(); return d; }',
+    'function fitChatFrame(f){ if(f.classList.contains("nd-frame-full")) return; try{ var d=f.contentDocument; if(d&&d.documentElement){ var h=Math.max(d.documentElement.scrollHeight, d.body?d.body.scrollHeight:0); f.style.height=Math.max(120,h)+"px"; } }catch(e){} }',
+    // The widget mounts async, so fit on load, keep fitting via ResizeObserver, and retry a couple of times.
+    'function wireChatFrame(f, onReady){ f.addEventListener("load", function(){ try{ var d=f.contentDocument; if(d){ if(d.documentElement) d.documentElement.style.setProperty("background","#0c0a09","important"); if(d.body) d.body.style.setProperty("background","#0c0a09","important"); } }catch(e){} fitChatFrame(f); try{ var b=f.contentDocument&&f.contentDocument.body; if(b&&window.ResizeObserver){ new ResizeObserver(function(){ fitChatFrame(f); scrollChat(); }).observe(b); } }catch(e){} setTimeout(function(){ fitChatFrame(f); },150); setTimeout(function(){ fitChatFrame(f); if(onReady) onReady(); scrollChat(); },500); }); }',
+    'var TOOL_ICO=\'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.3"/><circle cx="18" cy="6" r="2.3"/><circle cx="6" cy="18" r="2.3"/><circle cx="18" cy="18" r="2.3"/><path d="M8.3 6h7.4M6 8.3v7.4M18 8.3v7.4M8.3 18h7.4"/></svg>\';',
+    // Tool call: a minimal card, collapsed by default; its I/O is separate from the widget below it.
+    'function renderToolCall(tc){ clearChatEmpty(); var card=document.createElement("div"); card.className="toolcall"; var head=document.createElement("div"); head.className="toolcall__head"; var ico=document.createElement("span"); ico.className="toolcall__ico"; ico.innerHTML=TOOL_ICO; var nm=document.createElement("span"); nm.className="toolcall__name"+(tc.isError?" error":""); nm.textContent=tc.name; head.appendChild(ico); head.appendChild(nm); if(tc.resourceUri){ var tag=document.createElement("span"); tag.className="tag"; tag.textContent="widget"; head.appendChild(tag); } var chev=document.createElement("span"); chev.className="toolcall__chev"; chev.textContent="▸"; head.appendChild(chev); var detail=document.createElement("div"); detail.className="toolcall__detail"; detail.appendChild(section("input",tc.arguments)); detail.appendChild(section("output",tc.result)); head.addEventListener("click", function(){ var open=card.classList.toggle("open"); chev.textContent=open?"▾":"▸"; if(open) setTimeout(function(){ try{ card.scrollIntoView({block:"nearest"}); }catch(e){} },0); }); card.appendChild(head); card.appendChild(detail); chatLog.appendChild(card); scrollChat(); }',
+    // Widget: rendered inline in the conversation, unboxed.
+    'function renderWidget(tc){ if(!tc.resourceUri) return; clearChatEmpty(); var wrap=document.createElement("div"); wrap.className="chat-widget"; var sk=document.createElement("div"); sk.className="chat-skeleton"; wrap.appendChild(sk); var f=document.createElement("iframe"); f.title="widget"; wireChatFrame(f, function(){ if(sk&&sk.parentNode) sk.remove(); }); var q="/widget?name="+encodeURIComponent(tc.name); if(tc.arguments&&Object.keys(tc.arguments).length) q+="&args="+encodeURIComponent(JSON.stringify(tc.arguments)); f.src=q; wrap.appendChild(f); chatLog.appendChild(wrap); scrollChat(); }',
+    'function sendChat(){ var text=chatInput.value.trim(); if(!text||chatBusy) return; chatBubble("msg--user",text); chatInput.value=""; chatInput.style.height="auto"; chatBusy=true; chatSend.disabled=true; var pending=chatBubble("msg--pending","Thinking…"); var outgoing=chatMessages.concat([{role:"user",content:text}]); fetch("/chat",{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify({messages:outgoing})}).then(function(r){return r.json();}).then(function(j){ pending.remove(); if(j&&j.error){ if(j.error.code==="no_api_key"){ showKeyError("Add an OpenAI key to start chatting."); return; } chatBubble("msg--error","Chat failed: "+(j.error.message||"unknown error")); return; } chatMessages=(j&&j.messages)||outgoing; (j&&j.toolCalls||[]).forEach(function(tc){ renderToolCall(tc); renderWidget(tc); }); if(j&&j.text) chatBubble("msg--assistant",j.text); }).catch(function(e){ pending.remove(); chatBubble("msg--error","Chat failed: "+(e&&e.message||e)); }).then(function(){ chatBusy=false; chatSend.disabled=false; scrollChat(); }); }',
+    'chatForm.addEventListener("submit", function(e){ e.preventDefault(); sendChat(); });',
+    'chatInput.addEventListener("keydown", function(e){ if(e.key==="Enter"&&!e.shiftKey){ e.preventDefault(); sendChat(); } });',
+    'chatInput.addEventListener("input", function(){ chatInput.style.height="auto"; chatInput.style.height=Math.min(160, chatInput.scrollHeight)+"px"; });',
+    'setState("empty"); syncWidth(); setMode("preview");',
+].join('\n');
+//# sourceMappingURL=devtools-harness.js.map

package/dist/devtools-harness.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"devtools-harness.js","sourceRoot":"","sources":["../src/devtools-harness.ts"],"names":[],"mappings":"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"}

package/dist/devtools-preview.d.ts ADDED Viewed

@@ -0,0 +1,42 @@
+import { harnessHtml, openAiShimScript, type PreviewDevice, type PreviewTheme, wrapWidgetHtml } from './devtools-harness.js';
+/**
+ * `noodle devtools` preview server. It boots alongside a `dev` MCP endpoint and:
+ *   - serves the three-pane harness shell (HTML/CSS/JS in `devtools-harness.ts`),
+ *   - proxies + logs every JSON-RPC call through `/rpc`, capturing request/response for the inspector,
+ *   - serves each widget's `ui://` HTML with a same-origin `window.openai` shim injected,
+ *   - broadcasts a browser reload over `/reload` when devtools recompiles.
+ * The MCP server already inlines the ext-apps bridge; the shim lets a widget's `callServerTool` become a
+ * `fetch('/rpc')` the harness proxies and records, without reimplementing the ext-apps host protocol.
+ */
+export type { PreviewDevice, PreviewTheme };
+export { harnessHtml, openAiShimScript, wrapWidgetHtml };
+export interface PreviewOptions {
+    readonly mcpUrl: string;
+    readonly theme: PreviewTheme;
+    readonly device: PreviewDevice;
+    readonly port?: number;
+    readonly protocolVersion?: string;
+    /** OpenAI model for the chat playground; falls back to `OPENAI_MODEL` then {@link DEFAULT_CHAT_MODEL}. */
+    readonly openaiModel?: string;
+}
+export interface RpcLogEntry {
+    readonly time: number;
+    readonly method: string;
+    readonly name?: string;
+    readonly status: 'ok' | 'error';
+    readonly durationMs: number;
+    readonly summary: string;
+    /** Request params (input) captured for the inspector; size-capped. */
+    readonly request?: unknown;
+    /** Response result or error (output) captured for the inspector; size-capped. */
+    readonly response?: unknown;
+}
+export interface PreviewHandle {
+    readonly url: string;
+    readonly log: readonly RpcLogEntry[];
+    /** Tell connected browsers to reload (refresh the tool list + re-fetch the open widget). */
+    signalReload(): void;
+    close(): Promise<void>;
+}
+export declare function startPreview(options: PreviewOptions): Promise<PreviewHandle>;
+//# sourceMappingURL=devtools-preview.d.ts.map

package/dist/devtools-preview.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"devtools-preview.d.ts","sourceRoot":"","sources":["../src/devtools-preview.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,cAAc,EACf,MAAM,uBAAuB,CAAC;AAE/B;;;;;;;;GAQG;AAEH,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAC;AAEzD,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC;IAC/B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;IAClC,0GAA0G;IAC1G,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC/B;AAOD,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,IAAI,GAAG,OAAO,CAAC;IAChC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,sEAAsE;IACtE,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,iFAAiF;IACjF,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,GAAG,EAAE,SAAS,WAAW,EAAE,CAAC;IACrC,4FAA4F;IAC5F,YAAY,IAAI,IAAI,CAAC;IACrB,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CACxB;AA8ED,wBAAsB,YAAY,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,aAAa,CAAC,CA0UlF"}