@ai-ecoverse/slicc-spectrum 2.4.1 → 2.5.0

package/dist/slicc-ui.js

@@ -35131,10 +35131,44 @@ var SliccVaultButton = class extends i2 {
     }
   }
 };
+function valueConfig(doc, theme3) {
+  const lang = doc.documentElement.lang;
+  return {
+    theme: theme3,
+    dir: doc.documentElement.dir === "rtl" ? "rtl" : "ltr",
+    ...lang ? { lang } : {}
+  };
+}
+function enters(vault) {
+  return !!(vault?.enter && vault.valueFrame);
+}
+function ours(detail, request2, open) {
+  if (request2 !== open) return false;
+  return !("request" in detail) || detail.request === void 0 || detail.request === request2;
+}
+function drop(vault, request2) {
+  void vault?.cancel?.(request2).catch(() => {
+  });
+}
+function goneText(state2) {
+  return state2 === "expired" ? "The vault\u2019s field timed out. Try again." : "The vault\u2019s field closed. Try again.";
+}
+function valueField(vault, request2, config, on2) {
+  return b`<div class="value-field" data-value-frame><slicc-vault-value .vault=${vault} .request=${request2} .config=${config} @vault-value=${(event2) => on2(event2.detail, request2)}></slicc-vault-value></div>`;
+}
 var frameHeight = 480;
 var frameInset = 4;
 var between = (value, most) => typeof value === "number" && Number.isFinite(value) ? Math.min(Math.max(value, 0), most) : 0;
-var picked = ["event", "request", "state", "code", "message"];
+var picked = [
+  "event",
+  "request",
+  "state",
+  "code",
+  "message",
+  "name",
+  "placeholder",
+  "record"
+];
 function pick(event2) {
   const fields = event2;
   return Object.fromEntries(
@@ -35148,6 +35182,7 @@ var SliccVaultValue = class extends i2 {
     config: { attribute: false }
   };
   #frame = null;
+  #focusing = false;
   #off = null;
   #ready = false;
   #sent = "";
@@ -35182,7 +35217,8 @@ var SliccVaultValue = class extends i2 {
     this.#drop();
   }
   focus() {
-    this.#frame?.post({ type: "slicc-vault", v: 1, op: "focus" });
+    this.#focusing = !this.#ready;
+    if (this.#ready) this.#frame?.post({ type: "slicc-vault", v: 1, op: "focus" });
   }
   updated(changed2) {
     if (changed2.has("vault") || changed2.has("request")) this.#drop();
@@ -35223,6 +35259,7 @@ var SliccVaultValue = class extends i2 {
     if (event2.event === "ready") {
       this.#ready = true;
       this.#send();
+      if (this.#focusing) this.focus();
     } else if (event2.event === "size") {
       const inset = between(event2.inset, frameInset);
       element2.style.blockSize = `${between(event2.height, frameHeight)}px`;
@@ -35602,6 +35639,8 @@ var SliccComposer = class extends ThemedElement {
     sharing: { state: true },
     secretError: { state: true },
     secretField: { state: true },
+    secretName: { state: true },
+    entry: { state: true },
     failure: { state: true },
     reattach: { state: true },
     agent: {}
@@ -35635,6 +35674,8 @@ var SliccComposer = class extends ThemedElement {
     this.sharing = false;
     this.secretError = null;
     this.secretField = null;
+    this.secretName = "";
+    this.entry = null;
     this.failure = null;
     this.reattach = null;
     this.agent = "";
@@ -35921,6 +35962,9 @@ var SliccComposer = class extends ThemedElement {
         flex-wrap: wrap;
         gap: var(--swc-spacing-100);
       }
+      .secret .value-field {
+        min-inline-size: min(22rem, 70vw);
+      }
       .secret-error {
         display: flex;
         align-items: flex-start;
@@ -35939,7 +35983,11 @@ var SliccComposer = class extends ThemedElement {
   ];
   willUpdate(changed2) {
     super.willUpdate(changed2);
-    if (changed2.has("popup") && this.popup?.kind !== "secret") clearValues(this.renderRoot);
+    if (changed2.has("popup") && this.popup?.kind !== "secret") {
+      clearValues(this.renderRoot);
+      this.#leave();
+      this.secretName = "";
+    }
     if (changed2.has("agent") && this.agent && this.model && this.agent !== this.#agent) {
       this.#switch(this.agent);
     }
@@ -35969,6 +36017,7 @@ var SliccComposer = class extends ThemedElement {
     globalThis.removeEventListener("blur", this.#release);
     globalThis.removeEventListener("pointerdown", this.#outside, true);
     clearValues(this.renderRoot);
+    this.#leave();
     const kept3 = this.#waiting.draft?.attachments;
     const held2 = [
       this.attachments === kept3 ? [] : this.attachments,
@@ -36223,6 +36272,88 @@ ${this.value}` : text4;
     ];
     this.popup = null;
   }
+  #clean(name) {
+    return name.trim().toUpperCase().replace(/[^A-Z0-9_]/g, "_");
+  }
+  #exists(vault, name) {
+    return !!vault?.list()?.secrets.some(
+      (secret) => secret.name === name && secret.kind === "secret" && secret.state !== "removed"
+    );
+  }
+  #attach(name) {
+    this.#refuse(null);
+    this.attachments = [
+      ...this.attachments,
+      { id: this.#id(), name, kind: "secret", mimeType: "application/octet-stream", size: 0 }
+    ];
+    this.popup = null;
+  }
+  #leave() {
+    const entry = this.entry;
+    if (!entry) return;
+    this.entry = null;
+    drop(entry.vault, entry.request);
+  }
+  async enterSecret(name, replace2 = false) {
+    const vault = this.model?.vault;
+    const clean = this.#clean(name);
+    if (this.sharing) return;
+    const bad = clean ? nameProblem(clean) : "Enter a name";
+    if (bad) {
+      this.#refuse(bad, "name", true);
+      return;
+    }
+    if (!replace2 && this.#exists(vault, clean)) {
+      this.#attach(clean);
+      return;
+    }
+    const agent = this.#agent;
+    const mine2 = () => this.#agent === agent && this.model?.vault === vault;
+    this.sharing = true;
+    try {
+      if (replace2) {
+        const sure = await confirm({
+          title: `Replace ${clean}?`,
+          body: "A secret with this name exists. Sharing replaces its value, and its placeholder stays.",
+          action: "Replace",
+          variant: "confirmation"
+        });
+        if (!sure || !mine2()) return;
+      }
+      const { request: request2 } = await vault.enter({
+        name: clean,
+        ...replace2 ? { replace: true } : {}
+      });
+      if (!mine2() || this.popup?.kind !== "secret") {
+        drop(vault, request2);
+        return;
+      }
+      this.#refuse(null);
+      this.entry = { request: request2, name: clean, vault };
+      void this.updateComplete.then(
+        () => this.renderRoot.querySelector("slicc-vault-value")?.focus()
+      );
+    } catch (error) {
+      if (mine2()) this.#refuse(failureText(error), fieldOf(error, "name"), true);
+    } finally {
+      this.sharing = false;
+    }
+  }
+  #entered(detail, request2) {
+    const entry = this.entry;
+    if (!entry || !ours(detail, request2, entry.request)) return;
+    if (detail.event === "error") {
+      this.#refuse(detail.message);
+      return;
+    }
+    if (detail.event === "escape") {
+      this.closeSecret();
+      return;
+    }
+    this.entry = null;
+    if (detail.event === "done") this.#attach(entry.name);
+    else this.#refuse(goneText(detail.state));
+  }
   #refuse(text4, field3 = null, focus = false) {
     this.secretError = text4;
     this.secretField = text4 ? field3 : null;
@@ -36316,6 +36447,7 @@ ${this.value}` : text4;
   }
   closeSecret() {
     clearValues(this.renderRoot);
+    this.#leave();
     this.popup = null;
   }
   openPopup(kind) {
@@ -36547,9 +36679,11 @@ ${this.value}` : text4;
   #popup() {
     const popup2 = this.popup;
     if (!popup2) return A;
+    if (popup2.kind === "secret" && this.#framed())
+      return this.#entering(this.model?.vault);
     if (popup2.kind === "secret") {
       const vault = this.model?.vault;
-      const valued = !!vault?.put && !blocked(vault);
+      const valued = !!vault?.put && !vault.enter && !blocked(vault);
       const waiting3 = vault?.put ? blocked(vault) : null;
       if (!valued) clearValues(this.renderRoot);
       const submit = (event2) => {
@@ -36610,6 +36744,50 @@ ${this.value}` : text4;
     ) : b`<div class="empty">Nothing matches.</div>`}
     </div>`;
   }
+  #framed() {
+    const vault = this.model?.vault;
+    return enters(vault) && (!!this.entry || !away(vault));
+  }
+  #entering(vault) {
+    const entry = this.entry;
+    const close = (event2) => {
+      if (event2.key === "Escape") this.closeSecret();
+    };
+    const cancel = b`<swc-button size="s" variant="secondary" fill-style="outline" data-action="cancel-secret" ?disabled=${this.sharing} @click=${() => this.closeSecret()}>Cancel</swc-button>`;
+    const error = this.secretError ? b`<span class="secret-error" role="alert" id="secret-error" data-error><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${this.secretError}</span></span>` : A;
+    if (entry)
+      return b`<form class="popup secret" data-vault="on" data-entry @submit=${(event2) => event2.preventDefault()} @keydown=${close}>
+        <strong>Share a secret</strong>
+        <span class="lead">Type the value of <code>${entry.name}</code> in the vault’s own field. The agent only sees its name.</span>
+        ${valueField(vault, entry.request, valueConfig(this.ownerDocument, this.color), (detail, request2) => this.#entered(detail, request2))}
+        ${error}
+        <span class="buttons">
+          <swc-button size="s" variant="secondary" fill-style="outline" data-action="back-secret" @click=${() => this.#leave()}>Back</swc-button>
+          ${cancel}
+        </span>
+      </form>`;
+    const name = this.#clean(this.secretName);
+    const exists = !!name && this.#exists(vault, name);
+    const bad = this.secretField === "name" ? "true" : A;
+    const submit = (event2) => {
+      event2.preventDefault();
+      void this.enterSecret(this.secretName);
+    };
+    return b`<form class="popup secret" data-vault="on" @submit=${submit} @keydown=${close} @input=${(event2) => {
+      this.secretField = null;
+      this.secretName = event2.target.value;
+    }}>
+        <strong>Share a secret</strong>
+        <span class="lead">${exists ? b`<code>${name}</code> is in the vault. Share it as it is, or replace its value first.` : "You type the value in the vault\u2019s own field next; the agent only sees its name."}</span>
+        <label class="field"><span>Name</span><input name="name" placeholder="API_TOKEN" autocomplete="off" spellcheck="false" .value=${this.secretName} aria-invalid=${bad} aria-describedby=${this.secretField === "name" ? "secret-error" : A} /></label>
+        ${error}
+        <span class="buttons">
+          <swc-button size="s" variant="accent" data-action="share-secret" ?pending=${this.sharing} @click=${(event2) => event2.currentTarget.closest("form")?.requestSubmit()}>Share</swc-button>
+          ${exists ? b`<swc-button size="s" variant="secondary" fill-style="outline" data-action="replace-secret" ?disabled=${this.sharing} @click=${() => void this.enterSecret(this.secretName, true)}>Replace value</swc-button>` : A}
+          ${cancel}
+        </span>
+      </form>`;
+  }
   #hold() {
     const hold2 = this.model?.agent.hold?.();
     if (!hold2) return A;
@@ -50309,6 +50487,7 @@ var SliccSecrets = class extends ThemedElement {
     problem: { state: true },
     invalid: { state: true },
     said: { state: true },
+    entry: { state: true },
     acting: { state: true },
     importKind: { state: true },
     candidates: { state: true },
@@ -50339,6 +50518,7 @@ var SliccSecrets = class extends ThemedElement {
     this.candidates = null;
     this.picked = /* @__PURE__ */ new Set();
     this.again = false;
+    this.entry = null;
   }
   static styles = [
     fieldStyles,
@@ -50647,6 +50827,7 @@ var SliccSecrets = class extends ThemedElement {
     super.disconnectedCallback();
     clearTimeout(this.#tick);
     clearValues(this.renderRoot);
+    this.#leave();
     this.older = [];
     this.more = null;
   }
@@ -50660,6 +50841,7 @@ var SliccSecrets = class extends ThemedElement {
     this.loading = false;
     this.popup = null;
     this.failure = null;
+    this.#leave();
     this.form = null;
     this.busy = false;
     this.unpinning = null;
@@ -50722,6 +50904,7 @@ var SliccSecrets = class extends ThemedElement {
   open(form) {
     if (form && this.busy) return;
     clearValues(this.renderRoot);
+    this.#leave();
     this.form = form;
     this.problem = null;
     this.invalid = null;
@@ -50730,6 +50913,88 @@ var SliccSecrets = class extends ThemedElement {
     this.again = false;
     if (form?.kind === "import") this.importKind = "bundle";
     if (form) void this.updateComplete.then(() => this.#focus());
+    const vault = this.model?.vault;
+    if (form?.kind === "replace" && enters(vault))
+      void this.#begin(vault, form, form.name, true);
+  }
+  #leave() {
+    const entry = this.entry;
+    if (!entry) return;
+    this.entry = null;
+    drop(entry.vault, entry.request);
+  }
+  async #begin(vault, form, name, replace2) {
+    const options2 = form.kind === "replace" ? form.options : void 0;
+    this.busy = true;
+    try {
+      const { request: request2 } = await vault.enter({
+        name,
+        ...options2?.kind ? { kind: options2.kind } : {},
+        ...options2?.provider ? { provider: options2.provider } : {},
+        ...options2?.server ? { server: options2.server } : {},
+        ...replace2 ? { replace: true } : {}
+      });
+      if (!this.#mine(vault, form)) {
+        drop(vault, request2);
+        return;
+      }
+      this.#refuse(null);
+      this.entry = { request: request2, form, vault, name };
+      void this.updateComplete.then(
+        () => this.renderRoot.querySelector("[data-form] slicc-vault-value")?.focus()
+      );
+    } catch (error) {
+      if (this.#mine(vault, form)) this.#refuse(failureText(error), fieldOf(error, "name"), true);
+    } finally {
+      if (this.model?.vault === vault) this.busy = false;
+    }
+  }
+  async next(vault) {
+    const form = this.form;
+    if (this.busy) return;
+    const name = this.#field("name").value.trim();
+    const bad = nameProblem(name);
+    if (bad) {
+      this.#refuse(bad, "name", true);
+      return;
+    }
+    const exists = !!vault.list()?.secrets.some(
+      (secret) => secret.name === name && secret.kind === "secret" && secret.state !== "removed"
+    );
+    if (exists) {
+      this.busy = true;
+      const sure = await confirm({
+        title: `Replace ${name}?`,
+        body: "A secret with this name exists. Saving replaces its value, and its placeholder stays.",
+        action: "Replace",
+        variant: "confirmation"
+      });
+      if (this.model?.vault === vault) this.busy = false;
+      if (!sure || !this.#mine(vault, form)) return;
+    }
+    await this.#begin(vault, form, name, exists);
+  }
+  #entered(detail, request2) {
+    const entry = this.entry;
+    if (!entry || !ours(detail, request2, entry.request)) return;
+    if (detail.event === "error") {
+      this.#refuse(detail.message);
+      return;
+    }
+    if (detail.event === "escape") {
+      this.open(null);
+      return;
+    }
+    this.entry = null;
+    if (detail.event === "gone") {
+      this.#refuse(goneText(detail.state));
+      return;
+    }
+    this.form = null;
+    this.said = {
+      kind: "saved",
+      name: (detail.state === "sealed" ? detail.name : void 0) ?? entry.name
+    };
   }
   #refuse(text4, field3 = null, focus = false) {
     this.problem = text4;
@@ -50993,7 +51258,33 @@ var SliccSecrets = class extends ThemedElement {
   #locked(locked) {
     return locked ? b`<div class="locked"><p class="muted" data-locked>Unlock the vault first</p>${this.#button({ intent: { kind: "unlock" }, label: "Unlock", size: "s", variant: "accent" }, "unlock")}</div>` : A;
   }
+  #entryForm(vault, form) {
+    const add = form.kind === "add";
+    const entry = this.entry?.form === form ? this.entry : null;
+    const next = () => this.next(vault);
+    const keys = (event2) => {
+      if (event2.key === "Escape") {
+        event2.preventDefault();
+        this.open(null);
+      } else if (event2.key === "Enter" && event2.target.localName === "input") {
+        event2.preventDefault();
+        void next();
+      }
+    };
+    const name = form.kind === "replace" ? form.name : "";
+    return b`<div class="form" data-form=${form.kind} data-entry=${entry ? "" : A} @input=${() => this.#typed()} @keydown=${keys}>
+      <strong>${add ? "Add a secret" : b`Replace the value of <code>${name}</code>`}</strong>
+      ${add && !entry ? b`<label class="field"><span>Name</span><input type="text" autocomplete="off" spellcheck="false" autocapitalize="characters" data-field="name" placeholder="API_TOKEN" aria-invalid=${this.#bad("name")} aria-describedby=${this.#described("name")} @input=${(event2) => this.#upper(event2)} /></label>` : A}
+      ${entry ? b`<p class="muted">Type the value in the vault’s own field. It never passes through this page.</p>${valueField(vault, entry.request, valueConfig(this.ownerDocument, this.color), (detail, request2) => this.#entered(detail, request2))}` : add ? b`<p class="muted">You type the value in the vault’s own field next.</p>` : b`<p class="muted" data-opening>${this.busy ? "Opening the vault\u2019s field\u2026" : ""}</p>`}
+      ${this.problem ? this.#error(this.problem, "form") : A}
+      <div class="buttons">
+        ${add && !entry ? b`<swc-button size="m" variant="accent" data-action="enter-value" ?pending=${this.busy} @click=${next}>Next</swc-button>` : A}
+        <swc-button size="m" variant="secondary" fill-style="outline" data-action="cancel" @click=${() => this.open(null)}>Cancel</swc-button>
+      </div>
+    </div>`;
+  }
   #valueForm(vault, form, locked) {
+    if (enters(vault)) return this.#entryForm(vault, form);
     const save = () => this.save(vault);
     const add = form.kind === "add";
     return b`<div class="form" data-form=${form.kind} @input=${() => this.#typed()} @keydown=${(event2) => this.#enter(event2, save, locked)}>
@@ -51911,12 +52202,7 @@ var SliccApprovals = class extends ModelElement {
   #config() {
     const doc = this.ownerDocument;
     const dark = doc.defaultView?.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false;
-    const lang = doc.documentElement.lang;
-    return {
-      theme: resolveColor(this.model?.settings?.get().color ?? "system", dark),
-      dir: doc.documentElement.dir === "rtl" ? "rtl" : "ltr",
-      ...lang ? { lang } : {}
-    };
+    return valueConfig(doc, resolveColor(this.model?.settings?.get().color ?? "system", dark));
   }
   #frame(approval) {
     const vault = this.model?.vault;
@@ -54933,6 +55219,7 @@ var SliccSettings = class extends ThemedElement {
     ...ThemedElement.properties,
     pending: { state: true },
     entering: { state: true },
+    keyEntry: { state: true },
     failure: { state: true },
     problem: { state: true },
     blocked: { state: true },
@@ -54949,6 +55236,8 @@ var SliccSettings = class extends ThemedElement {
     refusals: { state: true },
     removing: { state: true }
   };
+  #auto = null;
+  #wants = null;
   #waits = new SignInWaits(() => this.requestUpdate());
   #copies = new SignInCopies(() => this.requestUpdate());
   #modelFilter = new ModelFilter(this);
@@ -54964,6 +55253,7 @@ var SliccSettings = class extends ThemedElement {
     super();
     this.pending = /* @__PURE__ */ new Set();
     this.entering = null;
+    this.keyEntry = null;
     this.failure = null;
     this.problem = null;
     this.blocked = false;
@@ -55077,6 +55367,17 @@ var SliccSettings = class extends ThemedElement {
       .field sp-picker {
         width: 100%;
       }
+      .entry-fields {
+        display: grid;
+        gap: var(--swc-spacing-200);
+      }
+      .entry-fields[hidden] {
+        display: none;
+      }
+      .entry-label {
+        font-size: var(--swc-font-size-75);
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
       .field sp-field-label {
         margin: 0;
         padding-block: 0;
@@ -55493,7 +55794,7 @@ var SliccSettings = class extends ThemedElement {
   #vault(account) {
     const vault = this.model?.vault;
     const keyed2 = account.auth === "api-key" || dual(account);
-    return keyed2 && account.store === "vault" && vault?.put ? vault : null;
+    return keyed2 && account.store === "vault" && vault && (vault.put || enters(vault)) ? vault : null;
   }
   async keep(account, value, fields) {
     const model = this.model;
@@ -55515,15 +55816,7 @@ var SliccSettings = class extends ThemedElement {
     try {
       if (keyed2) await vault.put?.(recordName(account), value, void 0, options2);
       else if (settings) await vault.settings?.(recordName(account), "model", settings);
-      if (url) {
-        const server = serverOf(account);
-        const old = registrations2()[server];
-        await vault.endpoints?.({
-          ...old && old !== url ? { remove: { mcp: [{ server, url: old }] } } : {},
-          add: { mcp: [{ server, url }] }
-        });
-        register(server, url);
-      }
+      if (url) await this.#endpoint(account, vault, url);
     } catch (error) {
       this.#busy(id, false);
       if (this.model === model) this.#refused(account, failureText(error), keyed2);
@@ -55539,6 +55832,114 @@ var SliccSettings = class extends ThemedElement {
       await vault.settings?.(recordName(account), "model", before ?? {}).catch(() => {
       });
   }
+  async #endpoint(account, vault, url) {
+    const server = serverOf(account);
+    const old = registrations2()[server];
+    await vault.endpoints?.({
+      ...old && old !== url ? { remove: { mcp: [{ server, url: old }] } } : {},
+      add: { mcp: [{ server, url }] }
+    });
+    register(server, url);
+  }
+  #held(account) {
+    const name = recordName(account);
+    const kind = recordKind(account);
+    return !!this.model?.vault?.list()?.secrets.some(
+      (secret) => secret.name === name && secret.kind === kind && secret.state !== "removed"
+    );
+  }
+  async #startKey(account, fields) {
+    const model = this.model;
+    const vault = this.#vault(account);
+    const { id } = account;
+    const name = recordName(account);
+    const settings = this.#settingsOf(account, fields);
+    const options2 = account.group === "mcp" ? { name, kind: "mcp", server: serverOf(account) } : { name, kind: "model", provider: account.id, ...settings ? { settings } : {} };
+    if (this.#held(account)) options2.replace = true;
+    this.#busy(id, true);
+    this.failure = null;
+    this.problem = null;
+    try {
+      const { request: request2 } = await vault.enter(options2);
+      if (this.model !== model || this.entering !== id) {
+        drop(vault, request2);
+        return;
+      }
+      this.keyEntry = { id, request: request2, fields, vault };
+      void this.updateComplete.then(
+        () => this.renderRoot.querySelector("[data-entry] slicc-vault-value")?.focus()
+      );
+    } catch (error) {
+      if (this.model === model) this.#refused(account, failureText(error), true);
+    } finally {
+      this.#busy(id, false);
+    }
+  }
+  async #nextKey(event2, account) {
+    event2.preventDefault();
+    if (account.blocked || this.pending.has(account.id)) return;
+    const form = event2.currentTarget.closest("form");
+    const fields = this.#fields(form, account);
+    if (fields === null) return;
+    const url = this.#mcpUrl(account);
+    const model = this.model;
+    if (url && !await this.#confirmUrl(url)) return;
+    if (this.model !== model || this.entering !== account.id) return;
+    if (away(this.#vault(account))) return;
+    await this.#startKey(account, fields);
+  }
+  async #keyed(account, detail, request2) {
+    const entry = this.keyEntry;
+    if (!entry || entry.id !== account.id || !ours(detail, request2, entry.request)) return;
+    const { id } = account;
+    if (detail.event === "error") {
+      this.#refuse(id, "value", detail.message);
+      return;
+    }
+    if (detail.event === "escape") {
+      this.#leaveKey(account);
+      return;
+    }
+    this.keyEntry = null;
+    if (detail.event === "gone") {
+      this.#refuse(id, "value", goneText(detail.state));
+      return;
+    }
+    const model = this.model;
+    const vault = this.#vault(account);
+    const url = this.#mcpUrl(account);
+    this.#busy(id, true);
+    if (url) {
+      try {
+        await this.#endpoint(account, vault, url);
+      } catch (error) {
+        this.#busy(id, false);
+        if (this.model === model) this.#refused(account, failureText(error), false);
+        return;
+      }
+    }
+    if (this.model !== model || this.entering !== id) {
+      this.#busy(id, false);
+      return;
+    }
+    await this.#connectBases(account, void 0, entry.fields, vault);
+  }
+  #leaveKey(account) {
+    this.#dropKey();
+    if (this.#auto === account.id) {
+      if (this.adding?.id === account.id) this.#back();
+      else this.#cancel();
+    }
+  }
+  #unmounted() {
+    if (this.keyEntry && !this.renderRoot.querySelector("form.key[data-entry]")) this.#dropKey();
+  }
+  #dropKey() {
+    const entry = this.keyEntry;
+    if (!entry) return;
+    this.keyEntry = null;
+    drop(entry.vault, entry.request);
+  }
   #settingsOf(account, fields) {
     const settable = (account.fields ?? []).filter((field3) => field3.vaultSetting);
     if (account.group === "mcp" || !settable.length) return void 0;
@@ -55919,7 +56320,40 @@ var SliccSettings = class extends ThemedElement {
     </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}`;
   }
+  #entryKept(account, vault) {
+    const { id } = account;
+    const busy = this.pending.has(id);
+    const name = secretNames[account.secret ?? "api-key"];
+    const entry = this.keyEntry?.id === id ? this.keyEntry : null;
+    const fields = account.fields ?? [];
+    const waiting3 = away(vault);
+    if (!entry && !waiting3 && !fields.length && !this.#mcpUrl(account) && this.#auto !== id && !busy)
+      this.#wants = account;
+    const required = fields.filter((field3) => field3.required && !field3.options);
+    const ready = !waiting3 && !account.blocked && required.every((field3) => !this.#offered() || this.filled.has(field3.name));
+    const optional = this.#keyOptional(account);
+    const hint2 = entry ? "Type it in the vault\u2019s own field. It never passes through this page." : waiting3 ? "Waiting for the vault" : busy ? "Opening the vault\u2019s field\u2026" : `You type the ${name} in the vault\u2019s own field next.${optional ? " Or save these settings and keep the key you have." : ""}`;
+    return b`<form class="key stacked" data-id=${id} data-store="vault" data-entry=${entry ? "" : A} @submit=${(event2) => void this.#nextKey(event2, account)} @keydown=${(event2) => this.#submitOnEnter(event2)} @input=${(event2) => this.#fill(event2)}>
+        <span class="entry-label">${account.provider} ${name}</span>
+        ${entry ? valueField(vault, entry.request, valueConfig(this.ownerDocument, this.color), (detail, request2) => void this.#keyed(account, detail, request2)) : A}
+        ${this.#problem(account, "value")}
+        <p class="hint">${hint2}</p>
+        ${this.#getKey(account)}
+        <div class="entry-fields" ?hidden=${!!entry}>${this.#extra(account)}</div>
+        <div class="buttons">
+          ${entry ? b`<swc-button size="m" variant="secondary" data-action="back-key" @click=${() => this.#leaveKey(account)}>Back</swc-button>` : b`<swc-button size="m" variant="accent" data-action="enter-key" ?pending=${busy} ?disabled=${!busy && !ready} @click=${(event2) => void this.#nextKey(event2, account)}>Next</swc-button>
+          ${optional ? b`<swc-button size="m" variant="secondary" data-action="save" ?disabled=${busy || !ready} @click=${(event2) => this.#keepSettings(event2, account)}>Save settings</swc-button>` : A}
+          ${this.#leave(account)}`}
+        </div>
+      </form>`;
+  }
+  #keepSettings(event2, account) {
+    const form = event2.currentTarget.closest("form");
+    const fields = this.#fields(form, account);
+    if (fields !== null && !this.pending.has(account.id)) void this.keep(account, "", fields);
+  }
   #kept(account, vault) {
+    if (enters(vault)) return this.#entryKept(account, vault);
     const busy = this.pending.has(account.id);
     const locked = !!vault.status()?.locked;
     const name = secretNames[account.secret ?? "api-key"];
@@ -56431,8 +56865,25 @@ var SliccSettings = class extends ThemedElement {
     this.adding = null;
     this.picking = true;
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#dropKey();
+  }
+  willUpdate(changed2) {
+    super.willUpdate(changed2);
+    const entry = this.keyEntry;
+    if (entry && (this.entering !== entry.id || entry.vault !== this.model?.vault)) this.#dropKey();
+    if (this.entering === null) this.#auto = null;
+  }
   updated(changed2) {
     super.updated(changed2);
+    if (this.keyEntry) void this.updateComplete.then(() => this.#unmounted());
+    const wants = this.#wants;
+    this.#wants = null;
+    if (wants && this.#auto !== wants.id) {
+      this.#auto = wants.id;
+      void this.#startKey(wants, void 0);
+    }
     const dialog = this.#dialog;
     if (!changed2.has("picking") || !dialog || dialog.open) return;
     dialog.showModal();
@@ -65145,12 +65596,12 @@ var TabReorderController = class extends CompositeDisposable {
   commitPointerReorder(event2) {
     const animState = this._animState;
     if ((animState === null || animState === void 0 ? void 0 : animState.currentInsertionIndex) == null) return;
-    const drop = this.resolveTabDrop(animState);
+    const drop2 = this.resolveTabDrop(animState);
     this._animState = null;
     this.clearWrapDropIndicator();
     this.uncollapseSourceTab(animState.sourceTabId);
-    if (!drop) return;
-    this.host.fireDrop(_objectSpread2({ event: event2 }, drop));
+    if (!drop2) return;
+    this.host.fireDrop(_objectSpread2({ event: event2 }, drop2));
   }
   /**
   * Shared body of the dragover entry point. Refreshes stale anim state
@@ -66194,19 +66645,19 @@ var Tabs = class extends CompositeDisposable {
         this._commitGroupMove(animState.sourceTabGroupId, animState.currentInsertionIndex);
         return;
       }
-      const drop = this._reorder.resolveTabDrop(animState);
+      const drop2 = this._reorder.resolveTabDrop(animState);
       this._reorder.uncollapseSourceTab(animState.sourceTabId);
-      if (!drop) {
+      if (!drop2) {
         this.resetTabTransforms();
         return;
       }
       const sourceIndex = animState.sourceIndex;
       const firstPositions = this.snapshotTabPositions();
       this.resetTabTransforms();
-      this._onDrop.fire(_objectSpread2({ event: event2 }, drop));
+      this._onDrop.fire(_objectSpread2({ event: event2 }, drop2));
       this.runFlipAnimation(firstPositions, animState.sourceTabId, sourceIndex === -1, {
-        from: Math.min(sourceIndex, drop.index),
-        to: Math.max(sourceIndex, drop.index)
+        from: Math.min(sourceIndex, drop2.index),
+        to: Math.max(sourceIndex, drop2.index)
       });
     }, true), Disposable.from(() => {
       var _this$_voidContainerL2;
@@ -85300,6 +85751,7 @@ function defineFileTree() {
 }
 
 // src/ui.ts
+var valueEntry = true;
 var elements = {
   "slicc-agents": SliccAgents,
   "slicc-chat": SliccChat,
@@ -85381,7 +85833,8 @@ export {
   panelCommand,
   prompt,
   resolveColor,
-  surfaces2 as surfaces
+  surfaces2 as surfaces,
+  valueEntry
 };
 /*! Bundled license information: