@ai-ecoverse/slicc-spectrum 1.91.0 → 1.93.0

package/dist/slicc-ui.js

@@ -9349,7 +9349,7 @@ function themeOf(node) {
   }
   return document.querySelector("slicc-app")?.shadowRoot?.querySelector("sp-theme") ?? document.body;
 }
-var dialogStyles = i`
+var dialogFrame = i`
   dialog {
     box-sizing: border-box;
     max-inline-size: calc(100vw - 2 * var(--swc-spacing-300));
@@ -9369,6 +9369,13 @@ var dialogStyles = i`
       color-mix(in srgb, var(--swc-overlay-color) calc(var(--swc-overlay-opacity-dark) * 100%), transparent)
     );
   }
+  @media (forced-colors: active) {
+    dialog {
+      outline: solid;
+    }
+  }
+`;
+var alertStyles = i`
   sp-alert-dialog {
     --mod-alert-dialog-min-width: min(
       var(--swc-alert-dialog-minimum-width),
@@ -9390,9 +9397,6 @@ var dialogStyles = i`
     }
   }
   @media (forced-colors: active) {
-    dialog {
-      outline: solid;
-    }
     sp-alert-dialog {
       border: none;
     }
@@ -9409,6 +9413,7 @@ var dialogStyles = i`
     margin-block-end: var(--swc-spacing-75);
   }
 `;
+var dialogStyles = [dialogFrame, alertStyles];
 var SliccConfirm = class extends i2 {
   static properties = { heading: {}, body: {}, action: {}, variant: {}, cancel: {} };
   trigger = null;
@@ -22649,6 +22654,34 @@ function markdown(text2) {
   return b`${parse(text2).map(render)}`;
 }
 
+// src/app/sign-in.ts
+var continuing = "Continue in the sign-in window that opened.";
+var closed = "Closed the sign-in window? Cancel, then Log in again.";
+var signInWait = { closedAfter: 2e4 };
+function signInText(waited) {
+  return waited ? closed : continuing;
+}
+var SignInWaits = class {
+  #since = /* @__PURE__ */ new Map();
+  #update;
+  constructor(update) {
+    this.#update = update;
+  }
+  waited(key2) {
+    const now = Date.now();
+    const since3 = this.#since.get(key2);
+    if (since3 === void 0) {
+      this.#since.set(key2, now);
+      setTimeout(this.#update, signInWait.closedAfter);
+      return false;
+    }
+    return now - since3 >= signInWait.closedAfter;
+  }
+  done(key2) {
+    this.#since.delete(key2);
+  }
+};
+
 // src/app/messages.ts
 var lickLabels = {
   webhook: ["Webhook", "informative"],
@@ -22843,8 +22876,6 @@ function actionLabel(action, handlers, messageId) {
   return count2 > 1 ? `Drop ${count2} failed turns` : actionLabels[action];
 }
 var signedIn = "Signed in. Retry to send it again.";
-var continuing = "Continue in the sign-in window that opened.";
-var closed = "Closed the sign-in window? Cancel, then Log in again.";
 function stopSigningIn(event2, handlers, account, id) {
   const main2 = event2.currentTarget.nextElementSibling;
   main2.focus();
@@ -22863,7 +22894,7 @@ function errorCard(item2, handlers) {
   const login = fix === "login" && item2.account && !handlers.readOnly ? handlers.login?.(item2.account, id) : void 0;
   const resolved = login?.state === "connected";
   const signing = login?.state === "signing-in" && login.window;
-  const text2 = resolved ? signedIn : signing ? login.waited ? closed : continuing : item2.text;
+  const text2 = resolved ? signedIn : signing ? signInText(login.waited) : item2.text;
   const title = resolved && login.provider ? `Signed in to ${login.provider} again.` : item2.title;
   const failure2 = login?.state === "idle" ? login.error : void 0;
   return b`<div class="error-card" role=${resolved ? A : "alert"} aria-atomic=${resolved ? A : "false"} data-id=${id || A} data-login=${login?.state ?? A}>
@@ -24701,7 +24732,7 @@ document.addEventListener(
   },
   true
 );
-var SliccChat = class _SliccChat extends ThemedElement {
+var SliccChat = class extends ThemedElement {
   static properties = {
     ...ThemedElement.properties,
     agent: {},
@@ -25125,19 +25156,14 @@ var SliccChat = class _SliccChat extends ThemedElement {
     if (!restored) return;
     this.renderRoot.querySelector("slicc-composer")?.restore(latest ? { text: latest.text, attachments: latest.attachments } : restored);
   }
-  static closedAfter = 2e4;
-  #logins = /* @__PURE__ */ new Map();
-  #signing = /* @__PURE__ */ new Map();
-  #waited(key2) {
-    const now = Date.now();
-    const since3 = this.#signing.get(key2);
-    if (since3 === void 0) {
-      this.#signing.set(key2, now);
-      setTimeout(() => this.requestUpdate(), _SliccChat.closedAfter);
-      return false;
-    }
-    return now - since3 >= _SliccChat.closedAfter;
+  static get closedAfter() {
+    return signInWait.closedAfter;
+  }
+  static set closedAfter(after) {
+    signInWait.closedAfter = after;
   }
+  #logins = /* @__PURE__ */ new Map();
+  #waits = new SignInWaits(() => this.requestUpdate());
   #loginState(accountId, messageId) {
     const settings = this.model.settings;
     const account = settings.accounts().find((candidate) => candidate.id === accountId);
@@ -25146,8 +25172,8 @@ var SliccChat = class _SliccChat extends ThemedElement {
     const window2 = account?.auth === "oauth";
     const key2 = `${messageId}:${accountId}`;
     if (account?.status === "signing-in" || local2?.pending)
-      return { state: "signing-in", cancel, window: window2, waited: window2 && this.#waited(key2) };
-    this.#signing.delete(key2);
+      return { state: "signing-in", cancel, window: window2, waited: window2 && this.#waits.waited(key2) };
+    this.#waits.done(key2);
     if (account?.status === "connected") return { state: "connected", provider: account.provider };
     return { state: "idle", error: local2?.error };
   }
@@ -25988,13 +26014,13 @@ var SliccFileView = class extends ThemedElement {
   async save() {
     const model = this.model;
     if (!model || this.draft === null) return;
-    const draft = this.draft;
+    const draft2 = this.draft;
     this.saving = true;
     try {
-      await model.files.write(this.path, draft);
-      this.text = draft;
+      await model.files.write(this.path, draft2);
+      this.text = draft2;
       this.missing = false;
-      if (this.draft === draft) this.draft = null;
+      if (this.draft === draft2) this.draft = null;
     } finally {
       this.saving = false;
     }
@@ -39792,7 +39818,8 @@ var fieldStyles = i`
     font-size: var(--swc-font-size-75);
     color: var(--swc-neutral-subdued-content-color-default);
   }
-  .field input:not([type='checkbox']) {
+  .field input:not([type='checkbox']),
+  .field select {
     box-sizing: border-box;
     inline-size: 100%;
     font: inherit;
@@ -39803,7 +39830,8 @@ var fieldStyles = i`
     background: var(--swc-background-layer-2-color);
     color: inherit;
   }
-  .field input[aria-invalid='true'] {
+  .field input[aria-invalid='true'],
+  .field select[aria-invalid='true'] {
     border-color: var(--swc-negative-border-color-default);
   }
   .field input[type='file'] {
@@ -39820,6 +39848,7 @@ var fieldStyles = i`
     color: inherit;
   }
   .field input:focus-visible,
+  .field select:focus-visible,
   input[type='checkbox']:focus-visible {
     outline: var(--swc-focus-indicator-thickness) solid var(--swc-focus-indicator-color);
     outline-offset: var(--swc-focus-ring-gap);
@@ -40419,7 +40448,7 @@ var SliccComposer = class extends ThemedElement {
     clearValues(this.renderRoot);
     const held = [
       this.attachments,
-      ...[...this.#drafts.values()].map((draft) => draft.attachments)
+      ...[...this.#drafts.values()].map((draft2) => draft2.attachments)
     ];
     if (held.flat().some((attachment2) => attachment2.url?.startsWith("blob:")))
       this.#abandon = setTimeout(() => {
@@ -40475,10 +40504,10 @@ var SliccComposer = class extends ThemedElement {
   #switch(id) {
     if (this.#agent)
       this.#drafts.set(this.#agent, { value: this.value, attachments: this.attachments });
-    const draft = this.#drafts.get(id);
+    const draft2 = this.#drafts.get(id);
     this.#agent = id;
-    this.value = draft?.value ?? "";
-    this.attachments = draft?.attachments ?? [];
+    this.value = draft2?.value ?? "";
+    this.attachments = draft2?.attachments ?? [];
     this.popup = null;
     this.#history = -1;
   }
@@ -40531,8 +40560,8 @@ var SliccComposer = class extends ThemedElement {
     this.failure = null;
     this.#history = -1;
     model.agent.send(this.#agent, text2).catch((error) => {
-      const draft = this.value.trim();
-      this.value = draft && draft !== text2 ? `${text2}
+      const draft2 = this.value.trim();
+      this.value = draft2 && draft2 !== text2 ? `${text2}
 ${this.value}` : text2;
       this.failure = error instanceof Error ? error.message : String(error);
     });
@@ -42870,6 +42899,7 @@ function recordKind(account) {
   return account.group === "mcp" ? "mcp" : "model";
 }
 function recordName(account) {
+  if (account.vaultName) return account.vaultName;
   if (account.group === "mcp") return `MCP_${upper(serverOf(account))}_TOKEN`;
   return envNames[account.id] ?? `${upper(account.id)}_API_KEY`;
 }
@@ -42884,6 +42914,48 @@ var accountStatus = {
   "needs-sign-in": ["neutral", "Needs sign-in"],
   "sign-in-expired": ["notice", "Sign-in expired"]
 };
+var authHints = {
+  "api-key": "API key",
+  oauth: "Sign in",
+  fields: "Endpoint and key",
+  local: "On this device"
+};
+var listOrder = {
+  connected: 0,
+  expired: 1,
+  "signing-in": 2,
+  disconnected: 3
+};
+var corsNotice = {
+  short: "Needs the SLICC extension or CLI",
+  long: "Needs the SLICC extension or CLI, because the browser blocks direct requests to it."
+};
+var removeBodies = {
+  oauth: "Its sign-in is deleted from the vault. Models from it stop working.",
+  local: "Models from it stop working."
+};
+function draft(option2) {
+  return {
+    id: option2.id,
+    provider: option2.name,
+    identity: "",
+    status: "disconnected",
+    group: "providers",
+    store: "vault",
+    auth: option2.auth === "fields" ? "api-key" : option2.auth,
+    fields: option2.fields,
+    keyUrl: option2.keyUrl,
+    needs: option2.needs,
+    vaultName: option2.vaultName
+  };
+}
+function matchProviders(options, query) {
+  const words = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+  return options.filter((option2) => {
+    const text2 = `${option2.name} ${option2.id} ${option2.description ?? ""}`.toLowerCase();
+    return words.every((word) => text2.includes(word));
+  });
+}
 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" };
@@ -42903,8 +42975,15 @@ var SliccSettings = class extends ThemedElement {
     entering: { state: true },
     failure: { state: true },
     problem: { state: true },
-    blocked: { state: true }
+    blocked: { state: true },
+    picking: { state: true },
+    adding: { state: true },
+    query: { state: true },
+    filled: { state: true }
   };
+  #waits = new SignInWaits(() => this.requestUpdate());
+  #landing = null;
+  #bases = /* @__PURE__ */ new Map();
   #scroll = new ViewScroll(this, "settings:scroll", { scroller: () => this, rows: "[data-id]" });
   constructor() {
     super();
@@ -42913,9 +42992,16 @@ var SliccSettings = class extends ThemedElement {
     this.failure = null;
     this.problem = null;
     this.blocked = false;
+    this.picking = false;
+    this.adding = null;
+    this.query = "";
+    this.filled = /* @__PURE__ */ new Set();
   }
   static styles = [
     fieldStyles,
+    dialogFrame,
+    searchCss,
+    r(link_default),
     i`
       :host {
         display: block;
@@ -43027,6 +43113,144 @@ var SliccSettings = class extends ThemedElement {
         line-height: var(--swc-line-height-200);
         --swc-icon-color: var(--swc-negative-content-color-default);
       }
+      .actions {
+        display: flex;
+        align-items: center;
+        gap: var(--swc-spacing-75);
+      }
+      .notes {
+        grid-column: 1 / -1;
+        display: grid;
+        gap: var(--swc-spacing-75);
+        margin-block-start: calc(-1 * var(--swc-spacing-200));
+      }
+      .notice {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--swc-spacing-75);
+        margin: 0;
+        color: var(--swc-neutral-subdued-content-color-default);
+        font-size: var(--swc-font-size-75);
+        line-height: var(--swc-line-height-200);
+        --swc-icon-color: var(--swc-notice-visual-color);
+      }
+      .notice swc-icon-alert-triangle {
+        flex: none;
+        margin-block-start: var(--swc-spacing-50);
+      }
+      .add {
+        margin-block-start: var(--swc-spacing-200);
+        margin-inline-start: calc(-1 * var(--swc-spacing-100));
+      }
+      dialog.picker {
+        inline-size: min(520px, calc(100vw - 2 * var(--swc-spacing-300)));
+      }
+      .picker .head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--swc-spacing-200);
+        padding: var(--swc-spacing-400) var(--swc-spacing-300) var(--swc-spacing-200) var(--swc-spacing-500);
+      }
+      .picker h2 {
+        margin: 0;
+        font-size: var(--swc-heading-size-s);
+        overflow-wrap: anywhere;
+      }
+      .picker .find {
+        display: flex;
+        padding: var(--swc-spacing-100) var(--swc-spacing-500) var(--swc-spacing-200);
+      }
+      .picker .results {
+        block-size: min(400px, calc(100dvh - 280px));
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        padding: var(--swc-spacing-75) var(--swc-spacing-400);
+        border-block: var(--swc-border-width-100) solid var(--swc-gray-200);
+      }
+      .options {
+        display: grid;
+        gap: var(--swc-spacing-50);
+      }
+      .option {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) max-content;
+        align-items: baseline;
+        gap: var(--swc-spacing-50) var(--swc-spacing-300);
+        padding: var(--swc-spacing-100) var(--swc-spacing-100);
+        border-radius: var(--swc-corner-radius-medium-default);
+        cursor: pointer;
+      }
+      .option:hover,
+      .option:focus {
+        background: var(--swc-gray-200);
+      }
+      .option:focus {
+        outline: none;
+      }
+      .option:focus-visible {
+        outline: var(--swc-focus-indicator-thickness) solid var(--swc-focus-indicator-color);
+        outline-offset: calc(-1 * var(--swc-focus-indicator-thickness));
+      }
+      .option[aria-disabled='true'] {
+        cursor: default;
+      }
+      .option[aria-disabled='true']:hover {
+        background: none;
+      }
+      .option .name {
+        font-weight: var(--swc-bold-font-weight);
+        overflow-wrap: anywhere;
+      }
+      .option[aria-disabled='true'] .name {
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
+      .option .tag {
+        justify-self: end;
+        color: var(--swc-neutral-subdued-content-color-default);
+        font-size: var(--swc-font-size-75);
+      }
+      .added {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--swc-spacing-50);
+      }
+      .option .description,
+      .option .notice {
+        grid-column: 1 / -1;
+      }
+      .option .description,
+      .lead,
+      .empty {
+        margin: 0;
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
+      .empty {
+        padding: var(--swc-spacing-200) var(--swc-spacing-100);
+        overflow-wrap: anywhere;
+      }
+      .picker .end {
+        justify-content: flex-end;
+        padding: var(--swc-spacing-300) var(--swc-spacing-500) var(--swc-spacing-400);
+      }
+      .step {
+        display: grid;
+        gap: var(--swc-spacing-200);
+        padding: var(--swc-spacing-100) var(--swc-spacing-500) var(--swc-spacing-500);
+      }
+      .step .key.stacked {
+        max-width: none;
+      }
+      .step sp-textfield {
+        inline-size: 100%;
+      }
+      .step .buttons {
+        margin-block-start: var(--swc-spacing-200);
+      }
+      .get-key {
+        justify-self: start;
+        font-size: var(--swc-font-size-75);
+      }
       @container (max-width: 480px) {
         .page {
           padding-inline: var(--swc-spacing-300);
@@ -43057,7 +43281,8 @@ var SliccSettings = class extends ThemedElement {
         .state {
           grid-area: state;
         }
-        .account swc-button {
+        .account swc-button,
+        .account .actions {
           grid-area: action;
         }
         .key sp-textfield {
@@ -43077,6 +43302,7 @@ var SliccSettings = class extends ThemedElement {
       ...super.subscribe(model),
       model.settings.on("settings", settle2),
       model.settings.on("accounts", settle2),
+      model.settings.on("providers", update),
       ...model.vault ? [model.vault.on("status", update)] : []
     ];
   }
@@ -43123,6 +43349,7 @@ var SliccSettings = class extends ThemedElement {
     try {
       await (fields ? settings?.connect(id, secret, fields) : secret === void 0 ? settings?.connect(id) : settings?.connect(id, secret));
       if (this.entering === id) this.entering = null;
+      if (this.adding?.id === id && this.#added(id)?.status === "connected") this.#finish(id);
     } catch (error) {
       if (!this.#cancelled.has(id)) this.failure = { id, message: error.message };
     } finally {
@@ -43158,13 +43385,88 @@ var SliccSettings = class extends ThemedElement {
       this.#busy(id, false);
       return;
     }
-    await this.connect(id, void 0, fields);
+    await this.#connectBases(account, void 0, fields, vault);
+  }
+  #baseOf(value) {
+    const trimmed = value?.trim() ?? "";
+    try {
+      return new URL(trimmed).protocol === "https:" ? trimmed : void 0;
+    } catch {
+      return void 0;
+    }
+  }
+  #oldBase(account, field) {
+    return this.#baseOf(field.value) ?? this.#bases.get(`${account.id} ${field.name}`);
+  }
+  #baseChanges(account, fields) {
+    return (account.fields ?? []).filter((field) => field.customBase).map((field) => ({
+      field: field.name,
+      url: this.#baseOf(fields?.[field.name]),
+      old: this.#oldBase(account, field)
+    })).filter((change) => change.url !== change.old);
+  }
+  #modelChange(name, changes2, from, to) {
+    const entries = (key2) => changes2.flatMap((change) => change[key2] ? [{ name, url: change[key2] }] : []);
+    const remove2 = entries(from);
+    const add = entries(to);
+    if (!remove2.length && !add.length) return null;
+    return {
+      ...remove2.length ? { remove: { model: remove2 } } : {},
+      ...add.length ? { add: { model: add } } : {}
+    };
+  }
+  async #connectBases(account, secret, fields, vault = null) {
+    const model = this.model;
+    const live = vault?.endpoints ? vault : null;
+    const { id } = account;
+    const name = recordName(account);
+    const changes2 = this.#baseChanges(account, fields);
+    const forward = live ? this.#modelChange(name, changes2, "old", "url") : null;
+    if (forward) {
+      this.#busy(id, true);
+      try {
+        await live?.endpoints?.(forward);
+      } catch (error) {
+        this.#busy(id, false);
+        const field = changes2.find((change) => change.url) ?? changes2[0];
+        if (this.model === model) this.#refuse(id, field.field, failureText(error));
+        return;
+      }
+      if (this.model !== model) {
+        this.#busy(id, false);
+        return;
+      }
+    }
+    await this.connect(id, secret, fields);
+    if (this.failure?.id === id) {
+      this.#placeFailure(account, fields);
+      const back = forward ? this.#modelChange(name, changes2, "url", "old") : null;
+      if (back) await live?.endpoints?.(back).catch(() => {
+      });
+      return;
+    }
+    for (const change of changes2) {
+      const key2 = `${id} ${change.field}`;
+      if (change.url) this.#bases.set(key2, change.url);
+      else this.#bases.delete(key2);
+    }
+  }
+  #placeFailure(account, fields) {
+    const message = this.failure.message;
+    const field = (account.fields ?? []).find(
+      (candidate) => candidate.customBase && !!fields?.[candidate.name] && [candidate.name, candidate.label, "https", "url", "port", "userinfo"].some(
+        (word) => new RegExp(`\\b${word.replace(/[^a-z0-9 ]/gi, "\\$&")}\\b`, "i").test(message)
+      )
+    );
+    if (!field) return;
+    this.failure = null;
+    this.#refuse(account.id, field.name, message);
   }
   #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}"]`
+        field === "value" ? ".key input[data-field=value]" : `.key [data-account-field="${field}"]`
       )?.focus()
     );
   }
@@ -43172,25 +43474,35 @@ var SliccSettings = class extends ThemedElement {
     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 input = form.querySelector(`[data-account-field="${field.name}"]`);
       const value = input.value.trim();
       if (value) values[field.name] = value;
-      else if (field.required) {
+      else if (field.required && field.options?.length !== 0) {
         this.#refuse(account.id, field.name, `${field.label} can\u2019t be empty`);
         return null;
       }
     }
     return values;
   }
+  #added(id) {
+    return this.model?.settings.accounts().find((account) => account.id === id);
+  }
+  #offered() {
+    return this.model?.settings.providers?.() ?? null;
+  }
   #start(account) {
     if (account.auth !== "api-key") {
       void this.connect(account.id);
       return;
     }
+    this.#enter(account);
+  }
+  #enter(account) {
     this.failure = null;
     this.problem = null;
+    this.filled = new Set(
+      (account.fields ?? []).filter((field) => field.options || field.value?.trim()).map((field) => field.name)
+    );
     this.entering = account.id;
     void this.updateComplete.then(() => this.focusOn(".key sp-textfield", ".key input"));
   }
@@ -43198,6 +43510,7 @@ var SliccSettings = class extends ThemedElement {
     event2.preventDefault();
     const form = event2.currentTarget;
     this.problem = null;
+    this.filled = new Set([...this.filled].filter((name) => name !== "value"));
     if (this.#vault(account)) {
       const value = take(form.querySelector("input[data-field=value]"));
       const fields2 = this.#fields(form, account);
@@ -43208,7 +43521,7 @@ var SliccSettings = class extends ThemedElement {
     const secret = field.value.trim();
     field.value = "";
     const fields = this.#fields(form, account);
-    if (secret && fields !== null) void this.connect(account.id, secret, fields);
+    if (secret && fields !== null) void this.#connectBases(account, secret, fields);
   }
   #submitOnEnter(event2) {
     const target2 = event2.target;
@@ -43219,7 +43532,7 @@ var SliccSettings = class extends ThemedElement {
   #send(event2) {
     event2.currentTarget.closest("form")?.requestSubmit();
   }
-  #enter(event2) {
+  #enterKey(event2) {
     if (event2.key === "Enter") this.#send(event2);
   }
   #cancel() {
@@ -43244,17 +43557,64 @@ var SliccSettings = class extends ThemedElement {
   }
   #extra(account) {
     return (account.fields ?? []).map(
-      (field) => b`<label class="field"><span>${field.label}</span><input
+      (field) => b`<label class="field">
+          <span>${field.label}</span>${this.#control(account, field)}
+        </label>
+        ${field.help ? b`<p class="hint" id=${`help-${field.name}`}>${field.help}</p>` : A}
+        ${this.#problem(account, field.name)}`
+    );
+  }
+  #describedBy(account, field) {
+    const problem = this.#described(account, field.name);
+    const ids = [problem === A ? "" : problem, field.help ? `help-${field.name}` : ""];
+    return ids.filter(Boolean).join(" ") || A;
+  }
+  #control(account, field) {
+    if (field.options) {
+      const chosen = field.value ?? field.options[0]?.value;
+      return b`<select
+          data-account-field=${field.name}
+          ?disabled=${!field.options.length}
+          aria-required=${field.required ? "true" : A}
+          aria-invalid=${this.#invalid(account, field.name)}
+          aria-describedby=${this.#describedBy(account, field)}
+        >
+          ${field.options.map((option2) => b`<option value=${option2.value} ?selected=${option2.value === chosen}>${option2.label}</option>`)}
+        </select>`;
+    }
+    return b`<input
           type="text"
           autocomplete="off"
           spellcheck="false"
           data-account-field=${field.name}
+          value=${field.value ?? A}
+          placeholder=${field.placeholder ?? A}
           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)}`
-    );
+          aria-describedby=${this.#describedBy(account, field)}
+        />`;
+  }
+  #getKey(account) {
+    if (!account.keyUrl) return A;
+    return b`<a class="swc-Link get-key" href=${account.keyUrl} target="_blank" rel="noopener noreferrer" data-action="get-key">Get a key</a>`;
+  }
+  #leave(account) {
+    const adding = this.adding?.id === account.id;
+    return b`<swc-button size="m" variant="secondary" data-action=${adding ? "back" : "cancel"} @click=${() => adding ? this.#back() : this.#cancel()}>${adding ? "Back" : "Cancel"}</swc-button>`;
+  }
+  #saveLabel(account) {
+    return this.adding?.id === account.id ? "Connect" : "Save";
+  }
+  #ready(account) {
+    if (!this.#offered()) return true;
+    const required = (account.fields ?? []).filter((field) => field.required);
+    return ["value", ...required.map((field) => field.name)].every((name) => this.filled.has(name));
+  }
+  #fill(event2) {
+    const input = event2.target;
+    const name = input.dataset.accountField ?? "value";
+    const rest = [...this.filled].filter((candidate) => candidate !== name);
+    this.filled = new Set(input.value.trim() ? [...rest, name] : rest);
   }
   #unlock(vault) {
     return b`<div class="locked" data-locked>
@@ -43274,7 +43634,7 @@ var SliccSettings = class extends ThemedElement {
     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)}>
+    return b`<form class="key stacked" data-id=${account.id} data-store="vault" @submit=${(event2) => this.#submit(event2, account)} @keydown=${(event2) => this.#submitOnEnter(event2)} @input=${(event2) => this.#fill(event2)}>
         <label class="field"><span>${account.provider} ${name}</span><input
           type="password"
           autocomplete="off"
@@ -43285,11 +43645,12 @@ var SliccSettings = class extends ThemedElement {
           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>`}
+        ${this.#getKey(account)}
+        ${this.#extra(account)}
         <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>
+          <swc-button size="m" variant="accent" data-action="save" ?pending=${busy} ?disabled=${locked || !busy && !this.#ready(account)} @click=${(event2) => this.#send(event2)}>${this.#saveLabel(account)}</swc-button>
+          ${this.#leave(account)}
         </div>
       </form>`;
   }
@@ -43298,23 +43659,24 @@ var SliccSettings = class extends ThemedElement {
     const vault = this.#vault(account);
     if (vault) return this.#kept(account, vault);
     const busy = this.pending.has(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)}>
+    const extra = account.fields?.length || account.keyUrl;
+    return b`<form class=${extra ? "key stacked" : "key"} data-id=${account.id} @submit=${(event2) => this.#submit(event2, account)} @keydown=${(event2) => this.#submitOnEnter(event2)} @input=${(event2) => this.#fill(event2)}>
         <sp-textfield
           size="m"
           type="password"
           autocomplete="off"
           label=${`${account.provider} ${secretNames[account.secret ?? "api-key"]}`}
           placeholder=${`Paste the ${secretNames[account.secret ?? "api-key"]}`}
-          @keydown=${(event2) => this.#enter(event2)}
+          @keydown=${(event2) => this.#enterKey(event2)}
         ></sp-textfield>
+        ${this.#getKey(account)}
         ${extra ? this.#extra(account) : A}
-        ${extra ? b`<div class="buttons">${this.#buttons(busy)}</div>` : this.#buttons(busy)}
+        ${extra ? b`<div class="buttons">${this.#buttons(account, busy)}</div>` : this.#buttons(account, 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>`;
+  #buttons(account, busy) {
+    return b`<swc-button size="m" variant="accent" data-action="save" ?pending=${busy} ?disabled=${!busy && !this.#ready(account)} @click=${(event2) => this.#send(event2)}>${this.#saveLabel(account)}</swc-button>
+        ${this.#leave(account)}`;
   }
   #inVault(account) {
     const vault = this.model?.vault;
@@ -43366,7 +43728,8 @@ var SliccSettings = class extends ThemedElement {
   get busyReason() {
     const accounts = this.model?.settings.accounts() ?? [];
     if (accounts.some((account) => this.#signingIn(account))) return "signing in";
-    return this.entering === null ? null : "a key is being entered";
+    if (this.entering !== null) return "a key is being entered";
+    return this.picking ? "a provider is being added" : null;
   }
   #signingIn(account) {
     return account.status === "signing-in" || account.auth !== "api-key" && account.status !== "connected" && this.pending.has(account.id);
@@ -43423,10 +43786,266 @@ var SliccSettings = class extends ThemedElement {
       <span class="provider">${account.provider}</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)}
+      ${this.#removable(account) ? b`<div class="actions">${this.#action(account)}${this.#removeButton(account)}</div>` : this.#action(account)}
     </div>
-    ${this.#key(account)}
-    ${failure2}`;
+    ${this.#offered() ? this.#rowNotes(account) : A}
+    ${this.adding?.id === account.id ? A : b`${this.#key(account)}${failure2}`}`;
+  }
+  #removable(account) {
+    return !!this.#offered() && !!this.model?.settings.remove && account.group !== "mcp";
+  }
+  #removeButton(account) {
+    const id = `remove-${account.id}`;
+    const label = `Remove ${account.provider}`;
+    return b`<swc-action-button
+        id=${id}
+        size="m"
+        quiet
+        data-action="remove-account"
+        accessible-label=${label}
+        ?disabled=${this.pending.has(account.id)}
+        @click=${() => this.#remove(account)}
+        ><swc-icon-delete slot="icon"></swc-icon-delete></swc-action-button
+      ><swc-tooltip for=${id} placement="top">${label}</swc-tooltip>`;
+  }
+  async #remove(account) {
+    const model = this.model;
+    const body4 = removeBodies[account.auth ?? ""] ?? "Its key is deleted from the vault. Models from it stop working.";
+    const title = `Remove ${account.provider}?`;
+    if (!await confirm({ title, body: body4, action: "Remove" })) return;
+    if (this.model !== model) return;
+    clearValues(this.renderRoot);
+    if (this.entering === account.id) this.entering = null;
+    const vault = model.vault;
+    const keyed = account.store === "vault" && account.auth === "api-key" && !!vault?.remove;
+    if (keyed && !await this.#forget(account, vault)) return;
+    if (this.model !== model) return;
+    this.#busy(account.id, true);
+    this.failure = null;
+    try {
+      await model.settings.remove?.(account.id);
+    } catch (error) {
+      if (this.model === model) this.failure = { id: account.id, message: failureText(error) };
+      return;
+    } finally {
+      this.#busy(account.id, false);
+    }
+    this.focusOn("[data-action=add-provider]");
+    for (const field of account.fields ?? []) this.#bases.delete(`${account.id} ${field.name}`);
+  }
+  #notice(needs, size4 = "long") {
+    if (needs !== "cors-free-transport") return A;
+    return b`<p class="notice" data-notice=${needs}><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${corsNotice[size4]}</span></p>`;
+  }
+  #signingNote(account) {
+    const key2 = `settings:${account.id}`;
+    if (account.auth !== "oauth" || !this.#signingIn(account)) {
+      this.#waits.done(key2);
+      return A;
+    }
+    return b`<p class="hint" role="status" data-signing>${signInText(this.#waits.waited(key2))}</p>`;
+  }
+  #rowNotes(account) {
+    const notice = this.#notice(account.needs);
+    const signing = this.adding?.id === account.id ? A : this.#signingNote(account);
+    if (notice === A && signing === A) return A;
+    return b`<div class="notes">${notice}${signing}</div>`;
+  }
+  #openPicker() {
+    this.query = "";
+    this.adding = null;
+    this.picking = true;
+  }
+  updated(changed) {
+    super.updated(changed);
+    const dialog = this.#dialog;
+    if (!changed.has("picking") || !dialog || dialog.open) return;
+    dialog.showModal();
+    const field = this.renderRoot.querySelector("sp-search");
+    void field.updateComplete.then(() => field.focus());
+  }
+  get #dialog() {
+    return this.renderRoot.querySelector("dialog.picker");
+  }
+  #closePicker() {
+    this.#dialog?.close();
+  }
+  #closed() {
+    const id = this.adding?.id;
+    if (id !== void 0 && this.entering === id) {
+      clearValues(this.renderRoot);
+      this.entering = null;
+      this.problem = null;
+    }
+    if (id !== void 0 && this.failure?.id === id) this.failure = null;
+    this.picking = false;
+    this.adding = null;
+    this.query = "";
+    const landing = this.#landing;
+    this.#landing = null;
+    void this.updateComplete.then(() => {
+      const root2 = this.renderRoot;
+      const row = landing ? root2.querySelector(`.account[data-id="${CSS.escape(landing)}"] swc-button`) : null;
+      (row ?? root2.querySelector("[data-action=add-provider]"))?.focus();
+    });
+  }
+  #finish(id) {
+    this.#landing = id;
+    this.#closePicker();
+  }
+  #choose(option2) {
+    if (this.#added(option2.id)) return;
+    this.adding = option2;
+    this.failure = null;
+    if (option2.auth === "api-key" || option2.auth === "fields") {
+      this.#enter(draft(option2));
+      return;
+    }
+    void this.updateComplete.then(
+      () => this.focusOn("[data-step] [data-action=sign-in]", "[data-step] [data-action=connect]")
+    );
+  }
+  #back() {
+    const id = this.adding.id;
+    clearValues(this.renderRoot);
+    if (this.entering === id) this.entering = null;
+    if (this.failure?.id === id) this.failure = null;
+    this.problem = null;
+    this.adding = null;
+    void this.updateComplete.then(
+      () => this.renderRoot.querySelector(`.option[data-provider="${CSS.escape(id)}"]`)?.focus()
+    );
+  }
+  #options() {
+    return [...this.renderRoot.querySelectorAll(".option")];
+  }
+  #pickerKey(event2) {
+    if (event2.key !== "Escape") return;
+    event2.preventDefault();
+    this.#closePicker();
+  }
+  #searchKey(event2) {
+    if (event2.key === "ArrowDown") {
+      event2.preventDefault();
+      this.#options()[0]?.focus();
+      return;
+    }
+    if (event2.key !== "Enter") return;
+    event2.preventDefault();
+    const first2 = matchProviders(this.#offered() ?? [], this.query).find(
+      (option2) => !this.#added(option2.id)
+    );
+    if (first2) this.#choose(first2);
+  }
+  #optionKey(event2, option2) {
+    const options = this.#options();
+    const at = options.indexOf(event2.currentTarget);
+    const moves = {
+      ArrowDown: Math.min(at + 1, options.length - 1),
+      ArrowUp: at - 1,
+      Home: 0,
+      End: options.length - 1
+    };
+    const typed3 = event2.key.length === 1 && !event2.ctrlKey && !event2.metaKey && !event2.altKey;
+    if (event2.key in moves) {
+      const to = moves[event2.key];
+      if (to < 0) this.focusOn("sp-search");
+      else options[to].focus();
+    } else if (event2.key === "Enter" || event2.key === " ") this.#choose(option2);
+    else if (typed3 || event2.key === "Backspace") {
+      this.query = typed3 ? this.query + event2.key : this.query.slice(0, -1);
+      this.focusOn("sp-search");
+    } else return;
+    event2.preventDefault();
+  }
+  #option(option2) {
+    const added = !!this.#added(option2.id);
+    return b`<div
+      class="option"
+      role="option"
+      tabindex="-1"
+      data-provider=${option2.id}
+      data-auth=${option2.auth}
+      aria-disabled=${added ? "true" : "false"}
+      @click=${() => this.#choose(option2)}
+      @keydown=${(event2) => this.#optionKey(event2, option2)}
+    >
+      <span class="name">${option2.name}</span>
+      <span class="tag">${added ? b`<span class="added" data-added><swc-icon-checkmark size="s" aria-hidden="true"></swc-icon-checkmark>Added</span>` : authHints[option2.auth]}</span>
+      ${option2.description ? b`<span class="description">${option2.description}</span>` : A}
+      ${this.#notice(option2.needs, "short")}
+    </div>`;
+  }
+  #pickStep(offered) {
+    const matches2 = matchProviders(offered, this.query);
+    return b`<div class="find">${search({
+      label: "Search providers",
+      value: this.query,
+      input: (value) => {
+        this.query = value;
+      },
+      keydown: (event2) => this.#searchKey(event2)
+    })}</div>
+      <div class="results">${matches2.length ? b`<div class="options" role="listbox" aria-label="Providers">${matches2.map((option2) => this.#option(option2))}</div>` : b`<p class="empty" role="status">No provider matches “${this.query.trim()}”.</p>`}</div>
+      <div class="buttons end">
+        <swc-button size="m" variant="secondary" data-action="close" @click=${() => this.#closePicker()}>Cancel</swc-button>
+      </div>`;
+  }
+  #signInStep(account) {
+    const signing = this.#signingIn(account);
+    const cancel = signing && !!this.model?.settings.cancel;
+    return b`<p class="hint">Sign in to ${account.provider} in a new window.</p>
+      ${signing ? this.#signingNote(account) : A}
+      <div class="buttons">
+        ${cancel ? b`<swc-button size="m" variant="secondary" data-action="cancel-sign-in" @click=${() => this.#stopSigningIn(account)}>Cancel</swc-button>` : A}
+        <swc-button size="m" variant="accent" data-action="sign-in" ?pending=${signing} @click=${() => this.connect(account.id)}>${signing ? "Signing in\u2026" : "Sign in"}</swc-button>
+        ${signing ? A : this.#leave(account)}
+      </div>`;
+  }
+  #localStep(account) {
+    return b`<p class="hint">SLICC connects to ${account.provider} on this device.</p>
+      <div class="buttons">
+        <swc-button size="m" variant="accent" data-action="connect" ?pending=${this.pending.has(account.id)} @click=${() => this.connect(account.id)}>Connect</swc-button>
+        ${this.#leave(account)}
+      </div>`;
+  }
+  #connectStep(option2) {
+    const account = this.#added(option2.id) ?? draft(option2);
+    const step = option2.auth === "oauth" ? this.#signInStep(account) : option2.auth === "local" ? this.#localStep(account) : this.#key(account);
+    return b`<div class="step" data-step=${option2.auth} data-provider=${option2.id}>
+      ${option2.description ? b`<p class="lead">${option2.description}</p>` : A}
+      ${this.#notice(option2.needs)}
+      ${step}
+      ${this.failure?.id === option2.id ? b`<div class="failure" role="alert"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${this.failure.message}</span></div>` : A}
+    </div>`;
+  }
+  #picker(offered) {
+    if (!this.picking) return A;
+    const adding = this.adding;
+    return b`<dialog class="picker" aria-labelledby="picker-title" data-picker=${adding ? "connect" : "pick"} @keydown=${(event2) => this.#pickerKey(event2)} @close=${() => this.#closed()}>
+      <div class="head">
+        <h2 id="picker-title">${adding ? `Add ${adding.name}` : "Add a provider"}</h2>
+        <swc-close-button size="m" data-action="close" accessible-label="Close" @click=${() => this.#closePicker()}></swc-close-button>
+      </div>
+      ${adding ? this.#connectStep(adding) : this.#pickStep(offered)}
+    </dialog>`;
+  }
+  #providerList(accounts) {
+    const offered = this.#offered();
+    if (!offered)
+      return b`<div class="accounts">${accounts.map((account) => this.#account(account))}</div>`;
+    const sorted = [...accounts].sort((a23, b13) => listOrder[a23.status] - listOrder[b13.status]);
+    return b`<div class="accounts" data-group="providers">${c(
+      sorted,
+      (account) => account.id,
+      (account) => this.#account(account)
+    )}</div>
+      <div class="add">
+        <swc-action-button size="m" quiet data-action="add-provider" @click=${() => this.#openPicker()}>
+          <swc-icon-add slot="icon"></swc-icon-add>Add a provider
+        </swc-action-button>
+      </div>
+      ${this.#picker(offered)}`;
   }
   render() {
     const settings = this.model?.settings;
@@ -43482,7 +44101,7 @@ var SliccSettings = class extends ThemedElement {
       </div>
       </div>
       <h2 data-section="accounts">Accounts</h2>
-      <div class="accounts">${providers.map((account) => this.#account(account))}</div>
+      ${this.#providerList(providers)}
       ${servers.length ? b`<h2>MCP servers</h2>
               <div class="accounts" data-group="mcp">${servers.map((account) => this.#account(account))}</div>` : A}
       ${this.model?.vault ? b`<slicc-secrets .model=${this.model}></slicc-secrets>` : A}