@ai-ecoverse/slicc-spectrum 1.65.1 → 1.66.0

package/dist/slicc-ui.js

@@ -24,7 +24,7 @@ import {
 } from "./chunk-EN3XGF2M.js";
 import {
   define
-} from "./chunk-XI74SELH.js";
+} from "./chunk-ZGJM5WUN.js";
 import {
   isVaultFailure,
   nameProblem,
@@ -13843,13 +13843,13 @@ function resolve(panels, raw2, reachable2, cone) {
   return found?.id ?? null;
 }
 function state(info) {
-  const shown3 = info.active ? "active" : info.visible ? "shown" : info.open ? "open" : "closed";
-  return info.busy ? `${shown3} \xB7 busy: ${info.busy}` : shown3;
+  const shown4 = info.active ? "active" : info.visible ? "shown" : info.open ? "open" : "closed";
+  return info.busy ? `${shown4} \xB7 busy: ${info.busy}` : shown4;
 }
 function table(rows) {
   const lines = [["ID", "TITLE", "STATE"], ...rows.map((row) => [row.id, row.title, state(row)])];
   const widths = [0, 1].map((column) => Math.max(...lines.map((line) => line[column].length)));
-  return lines.map(([id, title, shown3]) => `${id.padEnd(widths[0])}  ${title.padEnd(widths[1])}  ${shown3}`).join("\n");
+  return lines.map(([id, title, shown4]) => `${id.padEnd(widths[0])}  ${title.padEnd(widths[1])}  ${shown4}`).join("\n");
 }
 var done = (result, note = "") => result.code === 0 ? { stdout: `${result.message}${note}
 `, stderr: "", code: 0 } : { stdout: "", stderr: `panel: ${result.message}
@@ -14105,6 +14105,17 @@ function settled(element2) {
     requestAnimationFrame(frame);
   });
 }
+function shown2() {
+  if (!document.hidden) return Promise.resolve();
+  return new Promise((resolve2) => {
+    const seen = () => {
+      if (document.hidden) return;
+      document.removeEventListener("visibilitychange", seen);
+      resolve2();
+    };
+    document.addEventListener("visibilitychange", seen);
+  });
+}
 var ended = { write() {
 }, resize() {
 }, close() {
@@ -14132,6 +14143,9 @@ var KeptSession = class {
     }) : this.#start(size4);
     return session.then((live) => this.#handle(live, sink));
   }
+  replay(write) {
+    for (const chunk of this.#log) write(chunk);
+  }
   dispose() {
     this.#sink = null;
     this.#log = [];
@@ -14310,9 +14324,12 @@ var SliccTerminalPanel = class extends ThemedElement {
     const backend = keep(model.terminals, info.id);
     terminal.backend = {
       open: async (sink) => {
-        await this.#placed(info.id, terminal);
+        const hidden = await this.#placed(info.id, terminal);
         terminal.fit();
-        return backend.open(sink, { cols: terminal.cols, rows: terminal.rows });
+        const cols = terminal.cols;
+        const session = await backend.open(sink, { cols, rows: terminal.rows });
+        if (hidden) void this.#relayout(terminal, backend, cols);
+        return session;
       }
     };
     terminal.addEventListener("exit", () => model.terminals.close(info.id));
@@ -14333,7 +14350,25 @@ var SliccTerminalPanel = class extends ThemedElement {
   #placed(id, screen) {
     const host4 = this.getRootNode().host;
     const panel = host4?.localName === "slicc-dock" ? host4.api.getPanel(terminalPanel(id)) : void 0;
-    if (!panel) return Promise.resolve();
+    if (!panel) return Promise.resolve(false);
+    if (!document.hidden) return this.#seen(panel, screen).then(() => false);
+    if (laid(screen.getBoundingClientRect())) return Promise.resolve(true);
+    return new Promise((resolve2) => {
+      const done2 = (hidden) => {
+        watch.dispose();
+        document.removeEventListener("visibilitychange", visible2);
+        resolve2(hidden);
+      };
+      const watch = panel.api.onDidDimensionsChange((size4) => {
+        if (laid(size4)) done2(true);
+      });
+      const visible2 = () => {
+        if (!document.hidden) done2(false);
+      };
+      document.addEventListener("visibilitychange", visible2);
+    }).then((hidden) => hidden || this.#seen(panel, screen).then(() => false));
+  }
+  #seen(panel, screen) {
     const sized = laid(panel.api) ? Promise.resolve() : new Promise((resolve2) => {
       const watch = panel.api.onDidDimensionsChange((size4) => {
         if (!laid(size4)) return;
@@ -14343,6 +14378,14 @@ var SliccTerminalPanel = class extends ThemedElement {
     });
     return sized.then(() => settled(screen));
   }
+  async #relayout(screen, backend, cols) {
+    await shown2();
+    await settled(screen);
+    screen.fit();
+    if (screen.cols === cols) return;
+    screen.redraw("\x1Bc");
+    backend.replay((data) => screen.redraw(data));
+  }
   #request() {
     this.dispatchEvent(new CustomEvent("new-terminal", { bubbles: true, composed: true }));
   }
@@ -22010,8 +22053,8 @@ var SliccUpdates = class extends ModelElement {
   #checked(at) {
     if (at === null) return b`<span>Not checked yet</span>`;
     const date = new Date(at);
-    const shown3 = date.toLocaleString("en-GB", { dateStyle: "medium", timeStyle: "short" });
-    return b`<span>Checked <time datetime=${date.toISOString()}>${shown3}</time></span>`;
+    const shown4 = date.toLocaleString("en-GB", { dateStyle: "medium", timeStyle: "short" });
+    return b`<span>Checked <time datetime=${date.toISOString()}>${shown4}</time></span>`;
   }
   #item(item2) {
     const [variant, state3] = states[item2.state];
@@ -22076,14 +22119,14 @@ var SliccUpdates = class extends ModelElement {
   #package(item2, all2, act2) {
     const light = packageLight(item2);
     const busy = this.busy.get(item2.id);
-    const shown3 = busy ? [busy] : act2 ? item2.actions : [];
+    const shown4 = busy ? [busy] : act2 ? item2.actions : [];
     const error = this.problems.get(item2.id) ?? item2.error;
     return b`<li data-id=${item2.id} data-state=${item2.state}>
       <div class="name">
         <h3 title=${item2.package}>${item2.label}</h3>
         ${light ? b`<swc-status-light size="s" variant=${light[0]}>${light[1]}</swc-status-light>` : A}
       </div>
-      <div class="buttons">${shown3.map(
+      <div class="buttons">${shown4.map(
       (action) => b`<swc-button
             size="s"
             variant="secondary"
@@ -22839,11 +22882,11 @@ var SliccApp = class extends ThemedElement {
   #rail(items, side) {
     const primary = side === "bottom" ? items.filter((item2) => phoneRail.includes(item2.id)) : items;
     const fit = primary.length < items.length ? Math.min(primary.length, railCapacity(this.#width, Infinity)) : railCapacity(this.#width, items.length);
-    const shown3 = side === "bottom" ? primary.slice(0, fit) : items;
-    const grouped = new Set(shown3.map((item2) => item2.cone).filter(Boolean)).size > 1;
-    return b`<nav class=${`rail ${side}`} aria-label=${`Panels, ${side}`} @dragover=${this.#railOver} @dragleave=${this.#railLeave} @drop=${this.#railDrop}>${shown3.map(
-      (item2, index) => b`${grouped && index && shown3[index - 1].cone !== item2.cone ? b`<span class="cones" aria-hidden="true"></span>` : A}${this.#railButton(item2, side)}`
-    )}${this.#more(items.filter((item2) => !shown3.includes(item2)))}</nav>`;
+    const shown4 = side === "bottom" ? primary.slice(0, fit) : items;
+    const grouped = new Set(shown4.map((item2) => item2.cone).filter(Boolean)).size > 1;
+    return b`<nav class=${`rail ${side}`} aria-label=${`Panels, ${side}`} @dragover=${this.#railOver} @dragleave=${this.#railLeave} @drop=${this.#railDrop}>${shown4.map(
+      (item2, index) => b`${grouped && index && shown4[index - 1].cone !== item2.cone ? b`<span class="cones" aria-hidden="true"></span>` : A}${this.#railButton(item2, side)}`
+    )}${this.#more(items.filter((item2) => !shown4.includes(item2)))}</nav>`;
   }
   #rails() {
     const dock = this.renderRoot.querySelector("slicc-dock");
@@ -26688,7 +26731,7 @@ var fieldStyles = i`
     outline-offset: var(--swc-focus-ring-gap);
   }
 `;
-function shown2(element2, style = getComputedStyle(element2)) {
+function shown3(element2, style = getComputedStyle(element2)) {
   return !element2.hidden && !element2.inert && style.display !== "none";
 }
 function disabled(element2) {
@@ -26718,10 +26761,10 @@ function tabbables(root2, stop, out = []) {
       continue;
     }
     const style = getComputedStyle(child);
-    if (!shown2(child, style)) continue;
+    if (!shown3(child, style)) continue;
     if (child.localName === "details" && !child.open) {
       const summary = child.querySelector(":scope > summary");
-      if (summary && shown2(summary) && getComputedStyle(summary).visibility !== "hidden" && !(summary.hasAttribute("tabindex") && summary.tabIndex < 0))
+      if (summary && shown3(summary) && getComputedStyle(summary).visibility !== "hidden" && !(summary.hasAttribute("tabindex") && summary.tabIndex < 0))
         out.push(summary);
       continue;
     }
@@ -28106,8 +28149,8 @@ var SliccMemory = class extends ModelElement {
     const scopes = this.#scopes;
     const scope = this.scope;
     const option2 = (item2) => b`<sp-menu-item value=${item2.id}>${item2.label}</sp-menu-item>`;
-    const shown3 = visible(all2, scope, this.tag, this.query);
-    return b`<div class="bar"><span>${shown3.length} of ${all2.filter((memory) => memory.scope === scope).length} memories</span><span class="spacer"></span>
+    const shown4 = visible(all2, scope, this.tag, this.query);
+    return b`<div class="bar"><span>${shown4.length} of ${all2.filter((memory) => memory.scope === scope).length} memories</span><span class="spacer"></span>
         <swc-action-button size="s" quiet @click=${() => this.editing = "new"}><swc-icon-add slot="icon"></swc-icon-add>Remember</swc-action-button>
       </div>
       <div class="tools">
@@ -28129,7 +28172,7 @@ var SliccMemory = class extends ModelElement {
       </div>
       <div class="list">
         ${this.editing === "new" ? b`<div class="row">${this.#form({ scope })}</div>` : A}
-        ${shown3.length ? sections(shown3).map(
+        ${shown4.length ? sections(shown4).map(
       ([section, items]) => b`<h3>${section}</h3>${items.map((memory) => this.#row(memory))}`
     ) : b`<div class="note">${all2.length ? "No memories match." : "No memories yet."}</div>`}
       </div>`;
@@ -28729,6 +28772,20 @@ function asking2(request2) {
   if (request2.kind === "unseal") return b`${by} asks to remove the ${request2.provider} sign-in`;
   return request2.name ? b`${by} asks for <code>${request2.name}</code>` : b`${by} asks for a value`;
 }
+var accountLights = {
+  connected: ["positive", "Active"],
+  expired: ["notice", "Expired"],
+  "signing-in": ["info", "Signing in"],
+  disconnected: ["neutral", "Not connected"]
+};
+function putOptions(secret) {
+  if (secret.kind === "model") return { kind: "model", provider: secret.provider };
+  if (secret.kind === "mcp") return { kind: "mcp", server: secret.server };
+  return void 0;
+}
+function agentUse(secret) {
+  return secret.kind === "model" || secret.kind === "mcp" && secret.rules.length === 0;
+}
 function byName(a22, b13) {
   return a22.name < b13.name ? -1 : a22.name > b13.name ? 1 : 0;
 }
@@ -29220,7 +29277,8 @@ var SliccSecrets = class extends ThemedElement {
         model.vault.on("availability", update),
         model.vault.on("list", () => this.#listed(model.vault))
       ] : [],
-      ...model.network ? [model.network.on("network", update)] : []
+      ...model.network ? [model.network.on("network", update)] : [],
+      model.settings.on("accounts", update)
     ];
   }
   #button(config, action) {
@@ -29306,7 +29364,7 @@ var SliccSecrets = class extends ThemedElement {
     }
     this.busy = true;
     try {
-      await vault.put?.(name, value);
+      await vault.put?.(name, value, void 0, form.kind === "replace" ? form.options : void 0);
       if (!this.#mine(vault, form)) return;
       this.form = null;
       this.said = { kind: "saved", name };
@@ -29474,8 +29532,8 @@ var SliccSecrets = class extends ThemedElement {
       const before = entries[entries.length - 1]?.seq;
       const page = await vault.audit(before);
       if (this.model?.vault !== vault || !this.isConnected) return;
-      const shown3 = merged(vault.list()?.audit ?? [], this.older);
-      if (shown3[shown3.length - 1]?.seq !== before) return;
+      const shown4 = merged(vault.list()?.audit ?? [], this.older);
+      if (shown4[shown4.length - 1]?.seq !== before) return;
       this.older = merged(this.older, page.audit);
       this.more = page.more;
     } catch (error) {
@@ -29586,8 +29644,21 @@ var SliccSecrets = class extends ThemedElement {
       </div>
     </div>`;
   }
+  #reach(secret, gone3) {
+    if (agentUse(secret)) {
+      const use = secret.kind === "model" ? `Model requests to ${this.#providerName(secret.provider ?? "")}, by the agent` : `Requests to the MCP server ${secret.server}, by the agent`;
+      return b`<dt>Used for</dt><dd data-used-for>${use}</dd>`;
+    }
+    const rules = secret.rules.length ? secret.rules.map((rule, index) => b`${index ? b`<br />` : A}${ruleLine(rule)}`) : "Nowhere yet: no rule names it";
+    return b`<dt>${gone3 ? "Was sent to" : "Sent to"}</dt><dd data-rules>${rules}</dd>`;
+  }
+  #account(secret) {
+    const id = secret.kind === "mcp" ? `mcp:${secret.server}` : secret.provider;
+    return this.model?.settings.accounts().find((account) => account.id === id);
+  }
   #state(secret) {
-    const [variant, label] = secret.state === "removed" ? ["neutral", "Removed"] : secret.expiresAt !== void 0 && secret.expiresAt <= Date.now() ? ["notice", "Expired"] : secret.state === "inert" ? ["neutral", "No rule yet"] : ["positive", "Active"];
+    const account = agentUse(secret) ? this.#account(secret) : void 0;
+    const [variant, label] = secret.state === "removed" ? ["neutral", "Removed"] : secret.expiresAt !== void 0 && secret.expiresAt <= Date.now() ? ["notice", "Expired"] : account ? accountLights[account.status] : secret.state === "inert" && !agentUse(secret) ? ["neutral", "No rule yet"] : ["positive", "Active"];
     return b`<swc-status-light size="s" variant=${variant}>${label}</swc-status-light>`;
   }
   #controls(vault, secret) {
@@ -29598,15 +29669,18 @@ var SliccSecrets = class extends ThemedElement {
     const replace = vault.put && replaceable(secret);
     if (!replace && !vault.remove) return A;
     return b`<div class="buttons">
-      ${replace ? b`<swc-button size="s" variant="secondary" data-action="replace" @click=${() => this.open({ kind: "replace", name })}>Replace value</swc-button>` : A}
+      ${replace ? b`<swc-button size="s" variant="secondary" data-action="replace" @click=${() => this.open({ kind: "replace", name, options: putOptions(secret) })}>Replace value</swc-button>` : A}
       ${vault.remove ? b`<swc-button size="s" variant="secondary" fill-style="outline" data-action="remove" ?pending=${this.acting.has(`remove:${name}`)} @click=${(event2) => this.removeSecret(vault, secret, event2.currentTarget)}>Remove</swc-button>` : A}
     </div>`;
   }
+  #providerName(id) {
+    return this.model?.settings.accounts().find((account) => account.id === id)?.provider ?? id;
+  }
   #secret(vault, secret, entries, devices, more, locked) {
     const kind = kinds[secret.kind];
     const reveal = revealed(secret.name, entries, Date.now(), more);
     const exec = execLine(secret.exec, secret.execArgv);
-    const gone2 = secret.state === "removed";
+    const gone3 = secret.state === "removed";
     const form = this.#offline ? null : this.form;
     return b`<li class="secret" data-secret=${secret.name} data-state=${secret.state}>
       <div class="name">
@@ -29616,17 +29690,18 @@ var SliccSecrets = class extends ThemedElement {
       </div>
       ${this.#controls(vault, secret)}
       <dl>
-        <dt>${gone2 ? "Was sent to" : "Sent to"}</dt>
-        <dd data-rules>${secret.rules.length ? secret.rules.map((rule, index) => b`${index ? b`<br />` : A}${ruleLine(rule)}`) : "Nowhere yet: no rule names it"}</dd>
-        ${secret.exits ? b`<dt>${gone2 ? "Left through" : "Leaves through"}</dt><dd data-exits>${secret.exits.length ? list4(secret.exits.map((exit) => exitLabel(exit, devices))) : "No exit"}</dd>` : A}
+        ${this.#reach(secret, gone3)}
+        ${secret.exits ? b`<dt>${gone3 ? "Left through" : "Leaves through"}</dt><dd data-exits>${secret.exits.length ? list4(secret.exits.map((exit) => exitLabel(exit, devices))) : "No exit"}</dd>` : A}
         ${exec || reveal ? b`<dt>Programs</dt><dd data-exec>${exec}${exec && reveal ? b`<br />` : A}${reveal}</dd>` : A}
+        ${secret.kind === "model" && secret.provider ? b`<dt>Provider</dt><dd data-provider>${this.#providerName(secret.provider)}</dd>` : A}
+        ${secret.kind === "mcp" && secret.server ? b`<dt>Server</dt><dd data-server>${secret.server}</dd>` : A}
         <dt>From</dt>
         <dd data-source>${sourceLine(secret, devices)}</dd>
         ${secret.usedAt ? b`<dt>Last used</dt><dd data-used>${since(secret.usedAt)}</dd>` : A}
         ${secret.expiresAt ? b`<dt>Expires</dt><dd data-expires>${until(secret.expiresAt)}</dd>` : A}
         ${secret.removedAt ? b`<dt>Removed</dt><dd>${since(secret.removedAt)}</dd>` : A}
       </dl>
-      ${form?.kind === "replace" && form.name === secret.name ? this.#valueForm(vault, form, locked) : A}
+      ${form?.kind === "replace" && form.name === secret.name && (form.options?.kind ?? "secret") === (putOptions(secret)?.kind ?? "secret") ? this.#valueForm(vault, form, locked) : A}
     </li>`;
   }
   #secrets(vault, list5, entries, devices, locked) {
@@ -29657,7 +29732,7 @@ var SliccSecrets = class extends ThemedElement {
     </li>`;
   }
   #audit(vault, list5, entries, devices) {
-    const shown3 = this.reveals ? entries.filter((entry) => entry.type === "materialize") : entries;
+    const shown4 = this.reveals ? entries.filter((entry) => entry.type === "materialize") : entries;
     const more = this.more ?? list5.auditMore;
     return b`<div class="audit-head">
         <h3 id="secrets-audit">Activity</h3>
@@ -29665,7 +29740,7 @@ var SliccSecrets = class extends ThemedElement {
       this.reveals = event2.target.checked;
     }}>Only reveals to programs</sp-switch>
       </div>
-      ${shown3.length ? b`<ol class="audit" aria-labelledby="secrets-audit">${shown3.map((entry) => this.#entry(entry, devices))}</ol>` : b`<p class="muted" data-audit-empty>${this.reveals ? more ? "No reveals in the activity loaded so far." : "No program has been given a secret." : "Nothing has used a secret yet."}</p>`}
+      ${shown4.length ? b`<ol class="audit" aria-labelledby="secrets-audit">${shown4.map((entry) => this.#entry(entry, devices))}</ol>` : b`<p class="muted" data-audit-empty>${this.reveals ? more ? "No reveals in the activity loaded so far." : "No program has been given a secret." : "Nothing has used a secret yet."}</p>`}
       ${more ? b`<div class="row"><swc-button size="s" variant="secondary" fill-style="outline" data-action="older" ?pending=${this.loading} @click=${() => this.showOlder(vault, entries)}>Show older</swc-button></div>` : A}`;
   }
   #feedback() {
@@ -29747,6 +29822,43 @@ var SliccSecrets = class extends ThemedElement {
   }
 };
 
+// src/app/records.ts
+var envNames = {
+  anthropic: "ANTHROPIC_API_KEY",
+  openai: "OPENAI_API_KEY",
+  azure: "AZURE_OPENAI_API_KEY",
+  "azure-openai": "AZURE_OPENAI_API_KEY",
+  "azure-openai-responses": "AZURE_OPENAI_API_KEY",
+  google: "GEMINI_API_KEY",
+  gemini: "GEMINI_API_KEY",
+  "google-vertex": "GOOGLE_CLOUD_API_KEY",
+  "amazon-bedrock": "AWS_BEARER_TOKEN_BEDROCK",
+  mistral: "MISTRAL_API_KEY",
+  groq: "GROQ_API_KEY",
+  cerebras: "CEREBRAS_API_KEY",
+  xai: "XAI_API_KEY",
+  openrouter: "OPENROUTER_API_KEY",
+  "vercel-ai-gateway": "AI_GATEWAY_API_KEY",
+  deepseek: "DEEPSEEK_API_KEY",
+  zai: "ZAI_API_KEY",
+  moonshotai: "MOONSHOT_API_KEY",
+  fireworks: "FIREWORKS_API_KEY",
+  together: "TOGETHER_API_KEY",
+  huggingface: "HF_TOKEN",
+  "github-copilot": "COPILOT_GITHUB_TOKEN"
+};
+var upper = (text2) => text2.toUpperCase().replace(/[^A-Z0-9]/g, "_");
+function serverOf(account) {
+  return account.id.replace(/^mcp:/, "");
+}
+function recordKind(account) {
+  return account.group === "mcp" ? "mcp" : "model";
+}
+function recordName(account) {
+  if (account.group === "mcp") return `MCP_${upper(serverOf(account))}_TOKEN`;
+  return envNames[account.id] ?? `${upper(account.id)}_API_KEY`;
+}
+
 // src/app/settings.ts
 var accountStatus = {
   connected: ["positive", "Connected"],
@@ -29760,20 +29872,34 @@ var accountStatus = {
 var popup = (account) => account.group === "mcp" && account.auth === "oauth";
 var secretNames = { "api-key": "API key", token: "token" };
 var rejectedNames = { "api-key": "API key rejected", token: "Token rejected" };
-var SliccSettings = class extends ModelElement {
+var keptNames = { "api-key": "Key kept in the vault", token: "Token kept in the vault" };
+var kept2 = (account) => account.auth === "api-key" ? keptNames[account.secret ?? "api-key"] : "Kept in the vault";
+async function gone2(vault, name, kind) {
+  try {
+    await vault.remove?.(name, kind);
+  } catch (error) {
+    if (!isVaultFailure(error) || error.code !== "ENOENT") throw error;
+  }
+}
+var SliccSettings = class extends ThemedElement {
   static properties = {
-    ...ModelElement.properties,
+    ...ThemedElement.properties,
     pending: { state: true },
     entering: { state: true },
-    failure: { state: true }
+    failure: { state: true },
+    problem: { state: true },
+    blocked: { state: true }
   };
   constructor() {
     super();
     this.pending = /* @__PURE__ */ new Set();
     this.entering = null;
     this.failure = null;
+    this.problem = null;
+    this.blocked = false;
   }
   static styles = [
+    fieldStyles,
     i`
       :host {
         display: block;
@@ -29855,7 +29981,25 @@ var SliccSettings = class extends ModelElement {
       .key sp-textfield {
         flex: 1 1 auto;
       }
-      .failure {
+      .key.stacked {
+        display: grid;
+        gap: var(--swc-spacing-200);
+        max-width: 420px;
+      }
+      .buttons,
+      .locked {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--swc-spacing-100);
+      }
+      .hint {
+        margin: 0;
+        color: var(--swc-neutral-subdued-content-color-default);
+        font-size: var(--swc-font-size-75);
+      }
+      .failure,
+      .problem {
         display: flex;
         align-items: flex-start;
         gap: var(--swc-spacing-100);
@@ -29902,7 +30046,12 @@ var SliccSettings = class extends ModelElement {
   ];
   subscribe(model) {
     const update = () => this.requestUpdate();
-    return [model.settings.on("settings", update), model.settings.on("accounts", update)];
+    return [
+      ...super.subscribe(model),
+      model.settings.on("settings", update),
+      model.settings.on("accounts", update),
+      ...model.vault ? [model.vault.on("status", update)] : []
+    ];
   }
   focus() {
     this.focusOn("sp-picker");
@@ -29917,37 +30066,110 @@ var SliccSettings = class extends ModelElement {
     return event2.target.checked;
   }
   #cancelled = /* @__PURE__ */ new Set();
-  async connect(id, secret) {
-    this.pending = /* @__PURE__ */ new Set([...this.pending, id]);
+  #busy(id, on) {
+    const rest = [...this.pending].filter((candidate) => candidate !== id);
+    this.pending = new Set(on ? [...rest, id] : rest);
+  }
+  async connect(id, secret, fields) {
+    this.#busy(id, true);
     this.failure = null;
     this.#cancelled.delete(id);
+    const settings = this.model?.settings;
     try {
-      await this.model?.settings.connect(id, secret);
+      await (fields ? settings?.connect(id, secret, fields) : secret === void 0 ? settings?.connect(id) : settings?.connect(id, secret));
       if (this.entering === id) this.entering = null;
     } catch (error) {
       if (!this.#cancelled.has(id)) this.failure = { id, message: error.message };
     } finally {
       this.#cancelled.delete(id);
-      this.pending = new Set([...this.pending].filter((candidate) => candidate !== id));
+      this.#busy(id, false);
     }
   }
+  #vault(account) {
+    const vault = this.model?.vault;
+    return account.auth === "api-key" && account.store === "vault" && vault?.put ? vault : null;
+  }
+  async keep(account, value, fields) {
+    const model = this.model;
+    const vault = this.#vault(account);
+    const { id } = account;
+    const problem = valueProblem(value);
+    if (problem) {
+      this.#refuse(id, "value", problem);
+      return;
+    }
+    if (vault.status()?.locked) return;
+    const options = account.group === "mcp" ? { kind: "mcp", server: serverOf(account) } : { kind: "model", provider: account.id };
+    this.#busy(id, true);
+    this.failure = null;
+    try {
+      await vault.put?.(recordName(account), value, void 0, options);
+    } catch (error) {
+      this.#busy(id, false);
+      if (this.model === model) this.#refuse(id, "value", failureText(error));
+      return;
+    }
+    if (this.model !== model || this.entering !== id) {
+      this.#busy(id, false);
+      return;
+    }
+    await this.connect(id, void 0, fields);
+  }
+  #refuse(id, field, message) {
+    this.problem = { id, field, message };
+    void this.updateComplete.then(
+      () => this.renderRoot.querySelector(
+        field === "value" ? ".key input[data-field=value]" : `.key input[data-account-field="${field}"]`
+      )?.focus()
+    );
+  }
+  #fields(form, account) {
+    if (!account.fields?.length) return void 0;
+    const values = {};
+    for (const field of account.fields) {
+      const input = form.querySelector(
+        `input[data-account-field="${field.name}"]`
+      );
+      const value = input.value.trim();
+      if (value) values[field.name] = value;
+      else if (field.required) {
+        this.#refuse(account.id, field.name, `${field.label} can\u2019t be empty`);
+        return null;
+      }
+    }
+    return values;
+  }
   #start(account) {
     if (account.auth !== "api-key") {
       void this.connect(account.id);
       return;
     }
     this.failure = null;
+    this.problem = null;
     this.entering = account.id;
-    void this.updateComplete.then(() => this.focusOn(".key sp-textfield"));
+    void this.updateComplete.then(() => this.focusOn(".key sp-textfield", ".key input"));
   }
-  #submit(event2, id) {
+  #submit(event2, account) {
     event2.preventDefault();
-    const field = event2.currentTarget.querySelector(
-      "sp-textfield"
-    );
+    const form = event2.currentTarget;
+    this.problem = null;
+    if (this.#vault(account)) {
+      const value = take(form.querySelector("input[data-field=value]"));
+      const fields2 = this.#fields(form, account);
+      if (fields2 !== null && !this.pending.has(account.id)) void this.keep(account, value, fields2);
+      return;
+    }
+    const field = form.querySelector("sp-textfield");
     const secret = field.value.trim();
     field.value = "";
-    if (secret) void this.connect(id, secret);
+    const fields = this.#fields(form, account);
+    if (secret && fields !== null) void this.connect(account.id, secret, fields);
+  }
+  #submitOnEnter(event2) {
+    const target = event2.target;
+    if (event2.key !== "Enter" || target.localName !== "input") return;
+    event2.preventDefault();
+    this.#send(event2);
   }
   #send(event2) {
     event2.currentTarget.closest("form")?.requestSubmit();
@@ -29956,13 +30178,83 @@ var SliccSettings = class extends ModelElement {
     if (event2.key === "Enter") this.#send(event2);
   }
   #cancel() {
+    clearValues(this.renderRoot);
     this.entering = null;
     this.failure = null;
+    this.problem = null;
+  }
+  #problem(account, field) {
+    const problem = this.problem;
+    if (problem?.id !== account.id || problem.field !== field) return A;
+    return b`<div class="problem" id="key-problem" role="alert">
+      <swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle>
+      <span>${problem.message}</span>
+    </div>`;
+  }
+  #described(account, field) {
+    return this.problem?.id === account.id && this.problem.field === field ? "key-problem" : A;
+  }
+  #invalid(account, field) {
+    return this.#described(account, field) === A ? A : "true";
+  }
+  #extra(account) {
+    return (account.fields ?? []).map(
+      (field) => b`<label class="field"><span>${field.label}</span><input
+          type="text"
+          autocomplete="off"
+          spellcheck="false"
+          data-account-field=${field.name}
+          aria-required=${field.required ? "true" : A}
+          aria-invalid=${this.#invalid(account, field.name)}
+          aria-describedby=${this.#described(account, field.name)}
+        /></label>
+        ${this.#problem(account, field.name)}`
+    );
+  }
+  #unlock(vault) {
+    return b`<div class="locked" data-locked>
+      <span>Unlock the vault first</span>
+      <slicc-vault-button
+        data-action="unlock"
+        .vault=${vault}
+        .config=${{ intent: { kind: "unlock" }, label: "Unlock", size: "m", variant: "accent", theme: this.color }}
+        @vault-popup=${(event2) => {
+      this.blocked = event2.detail.state === "blocked";
+    }}
+      ></slicc-vault-button>
+    </div>
+    ${this.blocked ? b`<div class="problem" role="alert" data-popup="blocked"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>The browser blocked the vault window. Allow pop-ups for this site, then try again.</span></div>` : A}`;
+  }
+  #kept(account, vault) {
+    const busy = this.pending.has(account.id);
+    const locked = !!vault.status()?.locked;
+    const name = secretNames[account.secret ?? "api-key"];
+    return b`<form class="key stacked" data-id=${account.id} data-store="vault" @submit=${(event2) => this.#submit(event2, account)} @keydown=${(event2) => this.#submitOnEnter(event2)}>
+        <label class="field"><span>${account.provider} ${name}</span><input
+          type="password"
+          autocomplete="off"
+          spellcheck="false"
+          data-field="value"
+          placeholder=${`Paste the ${name}`}
+          aria-invalid=${this.#invalid(account, "value")}
+          aria-describedby=${this.#described(account, "value")}
+        /></label>
+        ${this.#problem(account, "value")}
+        ${this.#extra(account)}
+        ${locked ? this.#unlock(vault) : b`<p class="hint">Saved in the vault</p>`}
+        <div class="buttons">
+          <swc-button size="m" variant="accent" data-action="save" ?pending=${busy} ?disabled=${locked} @click=${(event2) => this.#send(event2)}>Save</swc-button>
+          <swc-button size="m" variant="secondary" data-action="cancel" @click=${() => this.#cancel()}>Cancel</swc-button>
+        </div>
+      </form>`;
   }
   #key(account) {
     if (this.entering !== account.id) return A;
+    const vault = this.#vault(account);
+    if (vault) return this.#kept(account, vault);
     const busy = this.pending.has(account.id);
-    return b`<form class="key" data-id=${account.id} @submit=${(event2) => this.#submit(event2, account.id)}>
+    const extra = account.fields?.length;
+    return b`<form class=${extra ? "key stacked" : "key"} data-id=${account.id} @submit=${(event2) => this.#submit(event2, account)} @keydown=${(event2) => this.#submitOnEnter(event2)}>
         <sp-textfield
           size="m"
           type="password"
@@ -29971,15 +30263,61 @@ var SliccSettings = class extends ModelElement {
           placeholder=${`Paste the ${secretNames[account.secret ?? "api-key"]}`}
           @keydown=${(event2) => this.#enter(event2)}
         ></sp-textfield>
-        <swc-button size="m" variant="accent" data-action="save" ?pending=${busy} @click=${(event2) => this.#send(event2)}>Save</swc-button>
-        <swc-button size="m" variant="secondary" data-action="cancel" @click=${() => this.#cancel()}>Cancel</swc-button>
+        ${extra ? this.#extra(account) : A}
+        ${extra ? b`<div class="buttons">${this.#buttons(busy)}</div>` : this.#buttons(busy)}
       </form>`;
   }
+  #buttons(busy) {
+    return b`<swc-button size="m" variant="accent" data-action="save" ?pending=${busy} @click=${(event2) => this.#send(event2)}>Save</swc-button>
+        <swc-button size="m" variant="secondary" data-action="cancel" @click=${() => this.#cancel()}>Cancel</swc-button>`;
+  }
+  #inVault(account) {
+    const vault = this.model?.vault;
+    if (account.store !== "vault" || account.status !== "connected" || !vault) return false;
+    return account.auth !== "api-key" || !!vault.put;
+  }
+  #records(account, vault) {
+    if (account.auth === "api-key") return [[recordName(account), recordKind(account)]];
+    const server = serverOf(account);
+    const names = (vault.list()?.secrets ?? []).filter(
+      (secret) => secret.kind === "mcp" && secret.server === server && secret.state !== "removed"
+    ).map((secret) => secret.name);
+    const tokens = names.length ? names : [`${upper(server)}_ACCESS_TOKEN`];
+    return tokens.flatMap(
+      (name) => [
+        [name, "mcp"],
+        [`${name}_GRANT`, "grant"]
+      ]
+    );
+  }
   async #disconnect(account) {
-    const body4 = `Agents can\u2019t use ${account.provider} until you connect it again.`;
+    const model = this.model;
+    const vault = model?.vault;
+    const vaulted = account.store === "vault" && !!vault?.remove;
+    const key2 = vaulted && account.auth === "api-key";
+    const signIn = vaulted && account.auth !== "api-key" && account.group === "mcp";
+    const stored = key2 || signIn ? vault : void 0;
+    const body4 = `Agents can\u2019t use ${account.provider} until you connect it again.${key2 ? " You can restore its key from Removed in Secrets for 30 days." : ""}`;
     const title = `Disconnect ${account.provider}?`;
-    if (await confirm({ title, body: body4, action: "Disconnect", variant: "confirmation" }))
-      this.model?.settings.disconnect(account.id);
+    if (!await confirm({ title, body: body4, action: "Disconnect", variant: "confirmation" })) return;
+    clearValues(this.renderRoot);
+    if (this.model !== model) return;
+    if (stored && !await this.#forget(account, stored)) return;
+    if (this.model === model) model?.settings.disconnect(account.id);
+  }
+  async #forget(account, vault) {
+    this.#busy(account.id, true);
+    this.failure = null;
+    try {
+      for (const [name, kind] of this.#records(account, vault)) await gone2(vault, name, kind);
+      return true;
+    } catch (error) {
+      if (this.model?.vault === vault)
+        this.failure = { id: account.id, message: failureText(error) };
+      return false;
+    } finally {
+      this.#busy(account.id, false);
+    }
   }
   #stopSigningIn(account) {
     this.#cancelled.add(account.id);
@@ -30009,6 +30347,7 @@ var SliccSettings = class extends ModelElement {
         variant="secondary"
         data-action="disconnect"
         accessible-label=${`Disconnect ${account.provider}`}
+        ?pending=${this.pending.has(account.id)}
         @click=${() => this.#disconnect(account)}
       >Disconnect</swc-button>`;
     }
@@ -30042,7 +30381,7 @@ var SliccSettings = class extends ModelElement {
           </div>` : A;
     return b`<div class="account" data-id=${account.id}>
       <span class="provider">${account.provider}</span>
-      <span class="identity">${account.identity}</span>
+      <span class="identity">${account.identity}${this.#inVault(account) ? b`<span class="kept" data-store="vault">${account.identity ? " \xB7 " : ""}${kept2(account)}</span>` : A}</span>
       <swc-status-light class="state" variant=${variant}>${label}</swc-status-light>
       ${this.#action(account)}
     </div>
@@ -30843,10 +31182,10 @@ var SliccValueRequest = class extends ThemedElement {
     if (!vault || !request2) return A;
     const locked = !!vault.status()?.locked;
     const rest = queue.length - 1;
-    const shown3 = this.problem?.id === request2.id ? this.problem : null;
-    const problem = shown3?.text ?? "";
-    const name = this.#aria("name", shown3);
-    const field = this.#aria("value", shown3);
+    const shown4 = this.problem?.id === request2.id ? this.problem : null;
+    const problem = shown4?.text ?? "";
+    const name = this.#aria("name", shown4);
+    const field = this.#aria("value", shown4);
     return i17(
       request2.id,
       b`<dialog role="alertdialog" aria-labelledby="title" aria-describedby="asked" data-request=${request2.id} @cancel=${(event2) => {
@@ -41891,12 +42230,12 @@ function getIgnoreCaseMatchChars(char) {
   }
   const set = /* @__PURE__ */ new Set();
   const lower2 = char.toLowerCase();
-  const upper = lower2.toUpperCase();
+  const upper2 = lower2.toUpperCase();
   const title = LowerToTitleCaseMap.get(lower2);
   const altLower = LowerToAlternativeLowerCaseMap.get(lower2);
   const altUpper = LowerToAlternativeUpperCaseMap.get(lower2);
-  if ([...upper].length === 1) {
-    set.add(upper);
+  if ([...upper2].length === 1) {
+    set.add(upper2);
   }
   altUpper && set.add(altUpper);
   title && set.add(title);