@noodleseed/one 0.89.1 → 0.90.0

package/dist/devtools-json.d.ts

@@ -0,0 +1,10 @@
+/** Syntax colours for structured output in preview, chat tool calls, and the MCP activity rail. */
+export declare const DEVTOOLS_JSON_STYLES: string;
+/**
+ * A dependency-free JSON renderer for the classic devtools client.
+ *
+ * Values are first serialized with native JSON formatting, then lexed into text-only spans. Tool data
+ * never reaches `innerHTML`, so strings such as `</script>` and `<img onerror=…>` remain inert output.
+ */
+export declare const DEVTOOLS_JSON_CLIENT_JS: string;
+//# sourceMappingURL=devtools-json.d.ts.map

package/dist/devtools-json.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools-json.d.ts","sourceRoot":"","sources":["../src/devtools-json.ts"],"names":[],"mappings":"AAAA,mGAAmG;AACnG,eAAO,MAAM,oBAAoB,QAQhC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,QAKxB,CAAC"}

package/dist/devtools-json.js

@@ -0,0 +1,23 @@
+/** Syntax colours for structured output in preview, chat tool calls, and the MCP activity rail. */
+export const DEVTOOLS_JSON_STYLES = String.raw `
+.json-key{color:#F97316}
+.json-string{color:#F5C0A8}
+.json-number{color:#F59E0B}
+.json-literal{color:#F43F5E}
+.json-punctuation{color:#7C7470}
+.json-fallback{color:#EDE8E6}
+.json-error{color:#FB7185}
+`;
+/**
+ * A dependency-free JSON renderer for the classic devtools client.
+ *
+ * Values are first serialized with native JSON formatting, then lexed into text-only spans. Tool data
+ * never reaches `innerHTML`, so strings such as `</script>` and `<img onerror=…>` remain inert output.
+ */
+export const DEVTOOLS_JSON_CLIENT_JS = [
+    'function jsonSource(value){ if(typeof value==="string"){ var trimmed=value.trim(); if((trimmed.charAt(0)==="{"&&trimmed.charAt(trimmed.length-1)==="}")||(trimmed.charAt(0)==="["&&trimmed.charAt(trimmed.length-1)==="]")){ try{return JSON.stringify(JSON.parse(value),null,2);}catch(e){} } return value; } try{ var encoded=JSON.stringify(value,null,2); return encoded===undefined?String(value):encoded; }catch(e){ return String(value); } }',
+    'function jsonClass(token,source,end){ if(token.charAt(0)==="\\""){ return /^\\s*:/.test(source.slice(end))?"json-key":"json-string"; } if(/^-?\\d/.test(token)) return "json-number"; if(/^(true|false|null)$/.test(token)) return "json-literal"; return "json-punctuation"; }',
+    'function appendJsonText(parent,text,cls){ if(!text) return; if(!cls){ parent.appendChild(document.createTextNode(text)); return; } var span=document.createElement("span"); span.className=cls; span.textContent=text; parent.appendChild(span); }',
+    'function renderJson(pre,value){ var source=jsonSource(value); var pattern=/"(?:\\\\.|[^"\\\\])*"|-?\\d+(?:\\.\\d+)?(?:[eE][+-]?\\d+)?|\\b(?:true|false|null)\\b|[{}\\[\\],:]/g; var fragment=document.createDocumentFragment(); var cursor=0; var match; while((match=pattern.exec(source))!==null){ appendJsonText(fragment,source.slice(cursor,match.index),""); appendJsonText(fragment,match[0],jsonClass(match[0],source,pattern.lastIndex)); cursor=pattern.lastIndex; } appendJsonText(fragment,source.slice(cursor),""); pre.replaceChildren(fragment); pre.setAttribute("aria-label","JSON output"); }',
+].join('\n');
+//# sourceMappingURL=devtools-json.js.map

package/dist/devtools-json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools-json.js","sourceRoot":"","sources":["../src/devtools-json.ts"],"names":[],"mappings":"AAAA,mGAAmG;AACnG,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQ7C,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,sbAAsb;IACtb,iRAAiR;IACjR,oPAAoP;IACpP,ilBAAilB;CACllB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC"}

package/dist/devtools-preview-control-styles.d.ts

@@ -0,0 +1,3 @@
+/** Compact, direct preview controls for theme, device presets, width, reload, and fullscreen. */
+export declare const DEVTOOLS_PREVIEW_CONTROL_STYLES = "\n.controls{\n  display:flex;\n  align-items:center;\n  gap:9px;\n  flex-wrap:wrap;\n  margin-bottom:16px;\n  padding:7px;\n  border:0;\n  border-radius:15px;\n  background:rgba(255,255,255,.035);\n}\n.ctl{display:flex;align-items:center;gap:7px}\n.ctl__lbl{\n  color:var(--nd-faint);\n  font-size:9px;\n  font-weight:650;\n  letter-spacing:.09em;\n  text-transform:uppercase;\n}\n.theme-switch,.device-switch{\n  display:inline-flex;\n  align-items:center;\n  border:0;\n  border-radius:999px;\n  background:rgba(0,0,0,.34);\n}\n.theme-switch{\n  gap:6px;\n  min-height:31px;\n  padding:4px 7px;\n  color:var(--nd-faint);\n  cursor:pointer;\n}\n.theme-switch:hover{color:var(--nd-text)}\n.theme-switch__icon{display:grid;width:14px;height:14px;place-items:center}\n.theme-switch__icon svg{width:13px;height:13px}\n.theme-switch__track{\n  position:relative;\n  width:27px;\n  height:15px;\n  border-radius:999px;\n  background:rgba(255,255,255,.11);\n  transition:background .18s ease;\n}\n.theme-switch__thumb{\n  position:absolute;\n  top:3px;\n  left:3px;\n  width:9px;\n  height:9px;\n  border-radius:50%;\n  background:#f4f4f5;\n  box-shadow:0 1px 5px rgba(0,0,0,.45);\n  transition:transform .2s cubic-bezier(.2,.8,.2,1),background .18s ease;\n}\n.theme-switch[aria-pressed=true] .theme-switch__track{background:rgba(249,115,22,.32)}\n.theme-switch[aria-pressed=true] .theme-switch__thumb{\n  background:#fdba74;\n  transform:translateX(12px);\n}\n.device-switch{gap:2px;padding:3px}\n.device-switch button{\n  display:grid;\n  width:29px;\n  height:25px;\n  place-items:center;\n  padding:0;\n  border:0;\n  border-radius:999px;\n  background:transparent;\n  color:var(--nd-faint);\n  cursor:pointer;\n  transition:background .18s ease,color .18s ease,transform .18s ease;\n}\n.device-switch button:hover{color:var(--nd-text);transform:translateY(-1px)}\n.device-switch button.is-active{\n  background:rgba(255,255,255,.11);\n  color:#fff;\n}\n.device-switch svg{width:14px;height:14px}\n.ctl--width{\n  gap:10px;\n  padding:3px 4px 3px 9px;\n  border-radius:999px;\n  background:rgba(0,0,0,.28);\n  transition:background .18s ease,box-shadow .18s ease;\n}\n.ctl--width:hover{background:rgba(0,0,0,.42)}\n.ctl--width:focus-within{\n  background:rgba(255,255,255,.055);\n  box-shadow:0 8px 24px rgba(0,0,0,.18),0 0 20px rgba(249,115,22,.07);\n}\n.ctl--width input[type=range]{\n  --width-progress:56.82%;\n  appearance:none;\n  -webkit-appearance:none;\n  width:clamp(132px,12vw,184px);\n  height:24px;\n  margin:0;\n  padding:0;\n  border:0;\n  background:transparent;\n  cursor:ew-resize;\n}\n.ctl--width input[type=range]:focus-visible{background:transparent;box-shadow:none}\n.ctl--width input[type=range]::-webkit-slider-runnable-track{\n  height:5px;\n  border-radius:999px;\n  background:\n    linear-gradient(90deg,var(--nd-accent),var(--nd-rose)) 0/var(--width-progress) 100% no-repeat,\n    rgba(255,255,255,.11);\n  box-shadow:inset 0 1px 2px rgba(0,0,0,.55);\n}\n.ctl--width input[type=range]::-webkit-slider-thumb{\n  appearance:none;\n  -webkit-appearance:none;\n  width:15px;\n  height:15px;\n  margin-top:-5px;\n  border:0;\n  border-radius:50%;\n  background:#fafafa;\n  box-shadow:\n    0 2px 8px rgba(0,0,0,.62),\n    0 0 0 4px rgba(249,115,22,.13),\n    0 0 14px rgba(244,63,94,.13);\n  transition:transform .17s cubic-bezier(.2,.8,.2,1),box-shadow .17s ease;\n}\n.ctl--width input[type=range]::-moz-range-track{\n  height:5px;\n  border:0;\n  border-radius:999px;\n  background:rgba(255,255,255,.11);\n  box-shadow:inset 0 1px 2px rgba(0,0,0,.55);\n}\n.ctl--width input[type=range]::-moz-range-progress{\n  height:5px;\n  border-radius:999px;\n  background:linear-gradient(90deg,var(--nd-accent),var(--nd-rose));\n}\n.ctl--width input[type=range]::-moz-range-thumb{\n  width:15px;\n  height:15px;\n  border:0;\n  border-radius:50%;\n  background:#fafafa;\n  box-shadow:\n    0 2px 8px rgba(0,0,0,.62),\n    0 0 0 4px rgba(249,115,22,.13),\n    0 0 14px rgba(244,63,94,.13);\n  transition:transform .17s cubic-bezier(.2,.8,.2,1),box-shadow .17s ease;\n}\n.ctl--width:hover input[type=range]::-webkit-slider-thumb,\n.ctl--width:focus-within input[type=range]::-webkit-slider-thumb{\n  transform:scale(1.1);\n  box-shadow:\n    0 3px 10px rgba(0,0,0,.7),\n    0 0 0 5px rgba(249,115,22,.17),\n    0 0 18px rgba(244,63,94,.2);\n}\n.ctl--width:hover input[type=range]::-moz-range-thumb,\n.ctl--width:focus-within input[type=range]::-moz-range-thumb{\n  transform:scale(1.1);\n  box-shadow:\n    0 3px 10px rgba(0,0,0,.7),\n    0 0 0 5px rgba(249,115,22,.17),\n    0 0 18px rgba(244,63,94,.2);\n}\n.ctl--width:active input[type=range]::-webkit-slider-thumb{transform:scale(.94)}\n.ctl--width:active input[type=range]::-moz-range-thumb{transform:scale(.94)}\n.ctl__val{\n  min-width:57px;\n  padding:5px 8px;\n  border-radius:999px;\n  background:rgba(255,255,255,.06);\n  color:#e4e4e7;\n  font-family:var(--nd-mono);\n  font-size:10.5px;\n  font-variant-numeric:tabular-nums;\n  line-height:1;\n  text-align:center;\n}\n@media (prefers-reduced-motion:reduce){\n  .ctl--width input[type=range]::-webkit-slider-thumb,\n  .ctl--width input[type=range]::-moz-range-thumb{transform:none!important}\n}\n.ctl__spacer{margin-left:auto}\n.ctl-btn{\n  display:inline-flex;\n  align-items:center;\n  gap:6px;\n  min-height:31px;\n  padding:6px 10px;\n  border:0;\n  border-radius:9px;\n  background:rgba(0,0,0,.34);\n  color:var(--nd-muted);\n  font-size:11px;\n  font-weight:550;\n  cursor:pointer;\n}\n.ctl-btn:hover{background:var(--nd-raised);color:var(--nd-text)}\n.ctl-btn svg{width:13px;height:13px}\n";
+//# sourceMappingURL=devtools-preview-control-styles.d.ts.map

package/dist/devtools-preview-control-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools-preview-control-styles.d.ts","sourceRoot":"","sources":["../src/devtools-preview-control-styles.ts"],"names":[],"mappings":"AAAA,iGAAiG;AACjG,eAAO,MAAM,+BAA+B,y/KA4M3C,CAAC"}

package/dist/devtools-preview-control-styles.js

@@ -0,0 +1,207 @@
+/** Compact, direct preview controls for theme, device presets, width, reload, and fullscreen. */
+export const DEVTOOLS_PREVIEW_CONTROL_STYLES = `
+.controls{
+  display:flex;
+  align-items:center;
+  gap:9px;
+  flex-wrap:wrap;
+  margin-bottom:16px;
+  padding:7px;
+  border:0;
+  border-radius:15px;
+  background:rgba(255,255,255,.035);
+}
+.ctl{display:flex;align-items:center;gap:7px}
+.ctl__lbl{
+  color:var(--nd-faint);
+  font-size:9px;
+  font-weight:650;
+  letter-spacing:.09em;
+  text-transform:uppercase;
+}
+.theme-switch,.device-switch{
+  display:inline-flex;
+  align-items:center;
+  border:0;
+  border-radius:999px;
+  background:rgba(0,0,0,.34);
+}
+.theme-switch{
+  gap:6px;
+  min-height:31px;
+  padding:4px 7px;
+  color:var(--nd-faint);
+  cursor:pointer;
+}
+.theme-switch:hover{color:var(--nd-text)}
+.theme-switch__icon{display:grid;width:14px;height:14px;place-items:center}
+.theme-switch__icon svg{width:13px;height:13px}
+.theme-switch__track{
+  position:relative;
+  width:27px;
+  height:15px;
+  border-radius:999px;
+  background:rgba(255,255,255,.11);
+  transition:background .18s ease;
+}
+.theme-switch__thumb{
+  position:absolute;
+  top:3px;
+  left:3px;
+  width:9px;
+  height:9px;
+  border-radius:50%;
+  background:#f4f4f5;
+  box-shadow:0 1px 5px rgba(0,0,0,.45);
+  transition:transform .2s cubic-bezier(.2,.8,.2,1),background .18s ease;
+}
+.theme-switch[aria-pressed=true] .theme-switch__track{background:rgba(249,115,22,.32)}
+.theme-switch[aria-pressed=true] .theme-switch__thumb{
+  background:#fdba74;
+  transform:translateX(12px);
+}
+.device-switch{gap:2px;padding:3px}
+.device-switch button{
+  display:grid;
+  width:29px;
+  height:25px;
+  place-items:center;
+  padding:0;
+  border:0;
+  border-radius:999px;
+  background:transparent;
+  color:var(--nd-faint);
+  cursor:pointer;
+  transition:background .18s ease,color .18s ease,transform .18s ease;
+}
+.device-switch button:hover{color:var(--nd-text);transform:translateY(-1px)}
+.device-switch button.is-active{
+  background:rgba(255,255,255,.11);
+  color:#fff;
+}
+.device-switch svg{width:14px;height:14px}
+.ctl--width{
+  gap:10px;
+  padding:3px 4px 3px 9px;
+  border-radius:999px;
+  background:rgba(0,0,0,.28);
+  transition:background .18s ease,box-shadow .18s ease;
+}
+.ctl--width:hover{background:rgba(0,0,0,.42)}
+.ctl--width:focus-within{
+  background:rgba(255,255,255,.055);
+  box-shadow:0 8px 24px rgba(0,0,0,.18),0 0 20px rgba(249,115,22,.07);
+}
+.ctl--width input[type=range]{
+  --width-progress:56.82%;
+  appearance:none;
+  -webkit-appearance:none;
+  width:clamp(132px,12vw,184px);
+  height:24px;
+  margin:0;
+  padding:0;
+  border:0;
+  background:transparent;
+  cursor:ew-resize;
+}
+.ctl--width input[type=range]:focus-visible{background:transparent;box-shadow:none}
+.ctl--width input[type=range]::-webkit-slider-runnable-track{
+  height:5px;
+  border-radius:999px;
+  background:
+    linear-gradient(90deg,var(--nd-accent),var(--nd-rose)) 0/var(--width-progress) 100% no-repeat,
+    rgba(255,255,255,.11);
+  box-shadow:inset 0 1px 2px rgba(0,0,0,.55);
+}
+.ctl--width input[type=range]::-webkit-slider-thumb{
+  appearance:none;
+  -webkit-appearance:none;
+  width:15px;
+  height:15px;
+  margin-top:-5px;
+  border:0;
+  border-radius:50%;
+  background:#fafafa;
+  box-shadow:
+    0 2px 8px rgba(0,0,0,.62),
+    0 0 0 4px rgba(249,115,22,.13),
+    0 0 14px rgba(244,63,94,.13);
+  transition:transform .17s cubic-bezier(.2,.8,.2,1),box-shadow .17s ease;
+}
+.ctl--width input[type=range]::-moz-range-track{
+  height:5px;
+  border:0;
+  border-radius:999px;
+  background:rgba(255,255,255,.11);
+  box-shadow:inset 0 1px 2px rgba(0,0,0,.55);
+}
+.ctl--width input[type=range]::-moz-range-progress{
+  height:5px;
+  border-radius:999px;
+  background:linear-gradient(90deg,var(--nd-accent),var(--nd-rose));
+}
+.ctl--width input[type=range]::-moz-range-thumb{
+  width:15px;
+  height:15px;
+  border:0;
+  border-radius:50%;
+  background:#fafafa;
+  box-shadow:
+    0 2px 8px rgba(0,0,0,.62),
+    0 0 0 4px rgba(249,115,22,.13),
+    0 0 14px rgba(244,63,94,.13);
+  transition:transform .17s cubic-bezier(.2,.8,.2,1),box-shadow .17s ease;
+}
+.ctl--width:hover input[type=range]::-webkit-slider-thumb,
+.ctl--width:focus-within input[type=range]::-webkit-slider-thumb{
+  transform:scale(1.1);
+  box-shadow:
+    0 3px 10px rgba(0,0,0,.7),
+    0 0 0 5px rgba(249,115,22,.17),
+    0 0 18px rgba(244,63,94,.2);
+}
+.ctl--width:hover input[type=range]::-moz-range-thumb,
+.ctl--width:focus-within input[type=range]::-moz-range-thumb{
+  transform:scale(1.1);
+  box-shadow:
+    0 3px 10px rgba(0,0,0,.7),
+    0 0 0 5px rgba(249,115,22,.17),
+    0 0 18px rgba(244,63,94,.2);
+}
+.ctl--width:active input[type=range]::-webkit-slider-thumb{transform:scale(.94)}
+.ctl--width:active input[type=range]::-moz-range-thumb{transform:scale(.94)}
+.ctl__val{
+  min-width:57px;
+  padding:5px 8px;
+  border-radius:999px;
+  background:rgba(255,255,255,.06);
+  color:#e4e4e7;
+  font-family:var(--nd-mono);
+  font-size:10.5px;
+  font-variant-numeric:tabular-nums;
+  line-height:1;
+  text-align:center;
+}
+@media (prefers-reduced-motion:reduce){
+  .ctl--width input[type=range]::-webkit-slider-thumb,
+  .ctl--width input[type=range]::-moz-range-thumb{transform:none!important}
+}
+.ctl__spacer{margin-left:auto}
+.ctl-btn{
+  display:inline-flex;
+  align-items:center;
+  gap:6px;
+  min-height:31px;
+  padding:6px 10px;
+  border:0;
+  border-radius:9px;
+  background:rgba(0,0,0,.34);
+  color:var(--nd-muted);
+  font-size:11px;
+  font-weight:550;
+  cursor:pointer;
+}
+.ctl-btn:hover{background:var(--nd-raised);color:var(--nd-text)}
+.ctl-btn svg{width:13px;height:13px}
+`;
+//# sourceMappingURL=devtools-preview-control-styles.js.map

package/dist/devtools-preview-control-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools-preview-control-styles.js","sourceRoot":"","sources":["../src/devtools-preview-control-styles.ts"],"names":[],"mappings":"AAAA,iGAAiG;AACjG,MAAM,CAAC,MAAM,+BAA+B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4M9C,CAAC"}

package/dist/devtools-preview.d.ts

@@ -1,4 +1,4 @@
-import { harnessHtml, openAiShimScript, type PreviewDevice, type PreviewTheme, wrapWidgetHtml } from './devtools-harness.js';
+import { calculateRangeProgress, 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`),
@@ -9,15 +9,19 @@ import { harnessHtml, openAiShimScript, type PreviewDevice, type PreviewTheme, w
  * `fetch('/rpc')` the harness proxies and records, without reimplementing the ext-apps host protocol.
  */
 export type { PreviewDevice, PreviewTheme };
-export { harnessHtml, openAiShimScript, wrapWidgetHtml };
+export { calculateRangeProgress, 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}. */
+    /** OpenAI model for the chat playground; falls back to `OPENAI_MODEL` then {@link DEFAULT_CHAT_MODELS}. */
     readonly openaiModel?: string;
+    /** Anthropic model for the chat playground; falls back to `ANTHROPIC_MODEL`. */
+    readonly anthropicModel?: string;
+    /** Gemini model for the chat playground; falls back to `GEMINI_MODEL`. */
+    readonly geminiModel?: string;
 }
 export interface RpcLogEntry {
     readonly time: number;

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

@@ -1 +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,CA2UlF"}
+{"version":3,"file":"devtools-preview.d.ts","sourceRoot":"","sources":["../src/devtools-preview.ts"],"names":[],"mappings":"AAQA,OAAO,EACL,sBAAsB,EACtB,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,sBAAsB,EAAE,WAAW,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAC;AAEjF,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,2GAA2G;IAC3G,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,gFAAgF;IAChF,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IACjC,0EAA0E;IAC1E,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;AAuHD,wBAAsB,YAAY,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,aAAa,CAAC,CAuclF"}

package/dist/devtools-preview.js

@@ -1,12 +1,41 @@
 import { createServer } from 'node:http';
-import { DEFAULT_CHAT_MODEL, runChatTurn, } from './devtools-chat.js';
-import { harnessHtml, openAiShimScript, wrapWidgetHtml, } from './devtools-harness.js';
+import { DEFAULT_CHAT_MODELS, runProviderChatTurn, } from './devtools-chat.js';
+import { calculateRangeProgress, harnessHtml, openAiShimScript, wrapWidgetHtml, } from './devtools-harness.js';
 // Re-exported so `devtools-preview` stays the single import surface for the command and tests.
-export { harnessHtml, openAiShimScript, wrapWidgetHtml };
+export { calculateRangeProgress, harnessHtml, openAiShimScript, wrapWidgetHtml };
 const CHAT_SYSTEM_PROMPT = 'You are an assistant embedded in the Noodle Seed devtools playground. You can call the MCP tools ' +
     'exposed by the local server the developer is previewing. Call a tool whenever it can answer the ' +
     'request or render a widget, then explain the result briefly. Keep answers concise.';
 const DEFAULT_PROTOCOL_VERSION = '2025-11-25';
+const CHAT_PROVIDERS = ['openai', 'anthropic', 'gemini'];
+const CHAT_PROVIDER_CONFIG = {
+    openai: {
+        envName: 'OPENAI_API_KEY',
+        modelEnvName: 'OPENAI_MODEL',
+        baseUrlEnvName: 'OPENAI_BASE_URL',
+    },
+    anthropic: {
+        envName: 'ANTHROPIC_API_KEY',
+        modelEnvName: 'ANTHROPIC_MODEL',
+        baseUrlEnvName: 'ANTHROPIC_BASE_URL',
+    },
+    gemini: {
+        envName: 'GEMINI_API_KEY',
+        modelEnvName: 'GEMINI_MODEL',
+        baseUrlEnvName: 'GEMINI_BASE_URL',
+    },
+};
+function isChatProvider(value) {
+    return typeof value === 'string' && CHAT_PROVIDERS.includes(value);
+}
+/** Infer the provider from the API-key formats developers already recognize, without adding a picker. */
+function detectChatProvider(key) {
+    if (key.startsWith('sk-ant-'))
+        return 'anthropic';
+    if (key.startsWith('AIza'))
+        return 'gemini';
+    return 'openai';
+}
 /** Parse the `/widget?args=` query param (a JSON object) into tool-call arguments; `{}` on absent/invalid. */
 function parseArgsParam(raw) {
     if (!raw)
@@ -21,6 +50,18 @@ function parseArgsParam(raw) {
         return {};
     }
 }
+/** Parse a JSON request body only when its top-level value is an object. */
+function parseJsonObject(raw) {
+    try {
+        const parsed = JSON.parse(raw.toString('utf8'));
+        return parsed !== null && typeof parsed === 'object' && !Array.isArray(parsed)
+            ? parsed
+            : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
 /** Cap a value for the inspector log so a huge tool result does not flood the SSE stream. */
 function capForLog(value, max = 20000) {
     if (value === undefined)
@@ -84,21 +125,64 @@ export async function startPreview(options) {
     const log = [];
     const subscribers = new Set();
     const reloadSubscribers = new Set();
-    // The OpenAI key lives ONLY in this server process (session) or the env — never in the browser. The
+    // Provider keys live ONLY in this server process (session) or the env, never in the browser. The
     // /widget iframes are same-origin and unsandboxed, so anything the page holds (localStorage or a JS var)
     // is readable by widget scripts and could be exfiltrated. The browser sets it via POST /chat/key and then
     // drops it; the gate state comes from GET /chat/status. The key is never logged or sent back to the page.
-    let sessionApiKey;
-    function resolveApiKey() {
-        return sessionApiKey ?? process.env.OPENAI_API_KEY;
+    const sessionApiKeys = {};
+    const sessionModels = {};
+    let activeChatProvider;
+    function resolveApiKey(provider) {
+        return sessionApiKeys[provider] ?? process.env[CHAT_PROVIDER_CONFIG[provider].envName];
     }
-    function apiKeySource() {
-        if (sessionApiKey)
+    function apiKeySource(provider) {
+        if (sessionApiKeys[provider])
             return 'session';
-        if (process.env.OPENAI_API_KEY)
+        if (process.env[CHAT_PROVIDER_CONFIG[provider].envName])
             return 'env';
         return 'none';
     }
+    function configuredModel(provider) {
+        const optionModel = provider === 'openai'
+            ? options.openaiModel
+            : provider === 'anthropic'
+                ? options.anthropicModel
+                : options.geminiModel;
+        return (sessionModels[provider] ??
+            optionModel ??
+            process.env[CHAT_PROVIDER_CONFIG[provider].modelEnvName] ??
+            DEFAULT_CHAT_MODELS[provider]);
+    }
+    function providerStatus(provider) {
+        return {
+            hasKey: Boolean(resolveApiKey(provider)),
+            source: apiKeySource(provider),
+            envName: CHAT_PROVIDER_CONFIG[provider].envName,
+            model: configuredModel(provider),
+        };
+    }
+    function configuredChatProviders() {
+        return CHAT_PROVIDERS.filter((provider) => providerStatus(provider).hasKey);
+    }
+    function resolveActiveChatProvider() {
+        if (activeChatProvider && providerStatus(activeChatProvider).hasKey) {
+            return activeChatProvider;
+        }
+        const configured = configuredChatProviders();
+        if (configured.length === 1)
+            return configured[0];
+        if (configured.length === 0)
+            return 'openai';
+        return undefined;
+    }
+    function ambiguousProviderError() {
+        if (resolveActiveChatProvider() !== undefined)
+            return undefined;
+        return {
+            code: 'ambiguous_provider',
+            message: 'Multiple provider keys are configured. Paste one API key to choose this chat session.',
+        };
+    }
     function record(entry) {
         log.push(entry);
         if (log.length > 500)
@@ -198,16 +282,18 @@ export async function startPreview(options) {
         });
     }
     /** Run one chat-playground turn against the local tools; the API key is read fresh and never logged. */
-    async function handleChat(incoming, apiKey) {
+    async function handleChat(provider, incoming, apiKey, model) {
         const messages = incoming[0]?.role === 'system'
             ? incoming
             : [{ role: 'system', content: CHAT_SYSTEM_PROMPT }, ...incoming];
-        return runChatTurn({
+        const baseUrl = process.env[CHAT_PROVIDER_CONFIG[provider].baseUrlEnvName];
+        return runProviderChatTurn({
+            provider,
             messages,
             tools: await chatToolDefs(),
             apiKey,
-            model: options.openaiModel ?? process.env.OPENAI_MODEL ?? DEFAULT_CHAT_MODEL,
-            ...(process.env.OPENAI_BASE_URL ? { baseUrl: process.env.OPENAI_BASE_URL } : {}),
+            model: model?.trim() || configuredModel(provider),
+            ...(baseUrl ? { baseUrl } : {}),
             callTool: async (name, args) => {
                 const call = await forward({
                     method: 'tools/call',
@@ -225,7 +311,7 @@ export async function startPreview(options) {
         const url = new URL(req.url ?? '/', 'http://localhost');
         if (req.method === 'GET' && url.pathname === '/') {
             res.writeHead(200, { 'content-type': 'text/html; charset=utf-8' });
-            res.end(harnessHtml({ ...options, hasServerKey: Boolean(resolveApiKey()) }));
+            res.end(harnessHtml(options));
             return;
         }
         if (req.method === 'GET' && url.pathname === '/widget') {
@@ -266,9 +352,16 @@ export async function startPreview(options) {
             return;
         }
         if (req.method === 'GET' && url.pathname === '/chat/status') {
-            // Report only whether a key is available (and its source) — never the value.
+            // Report only whether each key is available, plus non-secret configuration. Never return a key.
+            const activeProvider = resolveActiveChatProvider();
+            const error = ambiguousProviderError();
             res.writeHead(200, { 'content-type': 'application/json' });
-            res.end(JSON.stringify({ hasKey: Boolean(resolveApiKey()), source: apiKeySource() }));
+            res.end(JSON.stringify({
+                activeProvider: activeProvider ?? null,
+                requiresKey: Boolean(error),
+                error,
+                providers: Object.fromEntries(CHAT_PROVIDERS.map((provider) => [provider, providerStatus(provider)])),
+            }));
             return;
         }
         if (req.method === 'POST' && url.pathname === '/chat/key') {
@@ -276,48 +369,101 @@ export async function startPreview(options) {
             const chunks = [];
             req.on('data', (c) => chunks.push(c));
             req.on('end', () => {
-                let key = '';
-                try {
-                    key = String(JSON.parse(Buffer.concat(chunks).toString('utf8')).key ?? '');
-                }
-                catch {
+                const body = parseJsonObject(Buffer.concat(chunks));
+                if (!body) {
                     res.writeHead(400, { 'content-type': 'application/json' });
                     res.end(JSON.stringify({ error: { code: 'invalid_json', message: 'invalid JSON' } }));
                     return;
                 }
-                const trimmed = key.trim();
-                sessionApiKey = trimmed === '' ? undefined : trimmed;
+                const submittedKey = typeof body.key === 'string' ? body.key.trim() : '';
+                const provider = submittedKey === ''
+                    ? (body.provider ?? resolveActiveChatProvider())
+                    : detectChatProvider(submittedKey);
+                const ambiguity = ambiguousProviderError();
+                if (submittedKey === '' && ambiguity) {
+                    res.writeHead(409, { 'content-type': 'application/json' });
+                    res.end(JSON.stringify({ error: ambiguity }));
+                    return;
+                }
+                if (!isChatProvider(provider)) {
+                    res.writeHead(400, { 'content-type': 'application/json' });
+                    res.end(JSON.stringify({ error: { code: 'invalid_provider', message: 'invalid provider' } }));
+                    return;
+                }
+                if (body.key !== undefined) {
+                    if (submittedKey === '')
+                        delete sessionApiKeys[provider];
+                    else
+                        sessionApiKeys[provider] = submittedKey;
+                }
+                const model = typeof body.model === 'string' ? body.model.trim() : '';
+                if (model)
+                    sessionModels[provider] = model;
+                if (resolveApiKey(provider))
+                    activeChatProvider = provider;
+                else if (activeChatProvider === provider)
+                    activeChatProvider = undefined;
                 res.writeHead(200, { 'content-type': 'application/json' });
-                res.end(JSON.stringify({ ok: true, hasKey: Boolean(resolveApiKey()), source: apiKeySource() }));
+                res.end(JSON.stringify({ ok: true, provider, ...providerStatus(provider) }));
             });
             return;
         }
         if (req.method === 'POST' && url.pathname === '/chat') {
-            // The key lives server-side (session key set via /chat/key, or the env). The browser never sends it.
-            const apiKey = resolveApiKey();
-            if (!apiKey) {
-                res.writeHead(200, { 'content-type': 'application/json' });
-                res.end(JSON.stringify({
-                    error: {
-                        code: 'no_api_key',
-                        message: 'No OpenAI key set. Add one in the Chat tab or set OPENAI_API_KEY.',
-                    },
-                }));
-                return;
-            }
             const chunks = [];
             req.on('data', (c) => chunks.push(c));
             req.on('end', () => {
-                let body;
-                try {
-                    body = JSON.parse(Buffer.concat(chunks).toString('utf8'));
-                }
-                catch {
+                const body = parseJsonObject(Buffer.concat(chunks));
+                if (!body) {
                     res.writeHead(400, { 'content-type': 'application/json' });
                     res.end(JSON.stringify({ error: { code: 'invalid_json', message: 'invalid JSON' } }));
                     return;
                 }
-                handleChat(Array.isArray(body.messages) ? body.messages : [], apiKey)
+                const requestedProvider = body.provider;
+                if (requestedProvider !== undefined && !isChatProvider(requestedProvider)) {
+                    res.writeHead(400, { 'content-type': 'application/json' });
+                    res.end(JSON.stringify({ error: { code: 'invalid_provider', message: 'invalid provider' } }));
+                    return;
+                }
+                const ambiguity = ambiguousProviderError();
+                if (ambiguity) {
+                    res.writeHead(409, { 'content-type': 'application/json' });
+                    res.end(JSON.stringify({ error: ambiguity }));
+                    return;
+                }
+                const provider = resolveActiveChatProvider();
+                if (!provider) {
+                    res.writeHead(409, { 'content-type': 'application/json' });
+                    res.end(JSON.stringify({
+                        error: {
+                            code: 'ambiguous_provider',
+                            message: 'Paste one API key to choose this chat session.',
+                        },
+                    }));
+                    return;
+                }
+                if (requestedProvider !== undefined && requestedProvider !== provider) {
+                    res.writeHead(409, { 'content-type': 'application/json' });
+                    res.end(JSON.stringify({
+                        error: {
+                            code: 'provider_mismatch',
+                            message: 'The chat provider does not match the connected API key.',
+                        },
+                    }));
+                    return;
+                }
+                // The key and inferred provider live server-side. The browser can only use the bound provider.
+                const apiKey = resolveApiKey(provider);
+                if (!apiKey) {
+                    res.writeHead(200, { 'content-type': 'application/json' });
+                    res.end(JSON.stringify({
+                        error: {
+                            code: 'no_api_key',
+                            message: `No key set for this provider. Add one in Chat or set ${CHAT_PROVIDER_CONFIG[provider].envName}.`,
+                        },
+                    }));
+                    return;
+                }
+                handleChat(provider, Array.isArray(body.messages) ? body.messages : [], apiKey, typeof body.model === 'string' ? body.model : undefined)
                     .then((result) => {
                     res.writeHead(200, { 'content-type': 'application/json' });
                     res.end(JSON.stringify(result));