@ai-ecoverse/slicc-spectrum 1.110.0 → 1.111.1

package/dist/slicc-ui.js

@@ -8605,6 +8605,9 @@ function chatModels(options2) {
 function statusLight(status2) {
   return b`<swc-status-light size="s" variant=${statusVariant[status2]}>${statusLabel[status2]}</swc-status-light>`;
 }
+function statusDot(status2) {
+  return b`<span class="dot" data-agent-status=${status2} data-variant=${statusVariant[status2]} role="img" aria-label=${statusLabel[status2]} title=${statusLabel[status2]}></span>`;
+}
 var shared = i`
   .dot {
     display: inline-block;
@@ -17944,14 +17947,14 @@ var resolver = {
 };
 var string = initializeFactory("string");
 var text = initializeFactory("text");
-function initializeFactory(field2) {
+function initializeFactory(field3) {
   return {
-    resolveAll: createResolver(field2 === "text" ? resolveAllLineSuffixes : void 0),
+    resolveAll: createResolver(field3 === "text" ? resolveAllLineSuffixes : void 0),
     tokenize: initializeText
   };
   function initializeText(effects) {
     const self2 = this;
-    const constructs2 = this.parser.constructs[field2];
+    const constructs2 = this.parser.constructs[field3];
     const text4 = effects.attempt(constructs2, start2, notText);
     return start2;
     function start2(code3) {
@@ -25063,7 +25066,7 @@ var File = class {
     const sessionAnnotationsCurrent = editSessionAnnotations?.current;
     let acceptedFile;
     let failed2 = false;
-    let failure2;
+    let failure3;
     if (editor == null) throw new Error("File.__completeEditSession: editor is required for completion");
     const completedFile = { ...editSessionFile };
     const event2 = {
@@ -25082,7 +25085,7 @@ var File = class {
       }
     } catch (error) {
       failed2 = true;
-      failure2 = error;
+      failure3 = error;
     }
     const settledFile = installResult && acceptedFile != null ? acceptedFile : inputFile;
     const settledAnnotations = installResult && acceptedFile != null ? sessionAnnotationsCurrent ?? inputAnnotations : inputAnnotations;
@@ -25095,7 +25098,7 @@ var File = class {
     this.fileRenderer.endEditSession(settledFile);
     if (areFileTargetsEqual(this.getRenderedFile(), settledFile)) this.adoptRenderData(settledFile);
     if (installResult && this.fileContainer != null) this.rerender();
-    if (failed2) throw failure2;
+    if (failed2) throw failure3;
   }
   applyDocumentChange(textDocument, newLineAnnotations) {
     const editSessionFile = this.editSession?.file;
@@ -31513,7 +31516,7 @@ var FileDiff = class {
     let acceptedOldFile = null;
     let acceptedNewFile = null;
     let failed2 = false;
-    let failure2;
+    let failure3;
     if (editor == null) throw new Error("FileDiff.__completeEditSession: editor is required for completion");
     const completedDiff = cloneFileDiffMetadata(editSessionDiff);
     const newFile = {
@@ -31544,7 +31547,7 @@ var FileDiff = class {
       }
     } catch (error) {
       failed2 = true;
-      failure2 = error;
+      failure3 = error;
     }
     if (installResult && acceptedDiff != null) {
       if (this.additionFile != null) {
@@ -31559,7 +31562,7 @@ var FileDiff = class {
       lineAnnotations: installResult && acceptedDiff != null ? sessionAnnotationsCurrent ?? inputAnnotations : inputAnnotations
     };
     if (installResult && this.fileContainer != null) this.rerender();
-    if (failed2) throw failure2;
+    if (failed2) throw failure3;
   }
   /**
   * Run the session-end recompute: restore recompute-shaped hunks (a
@@ -33411,14 +33414,14 @@ function errorCard(item2, handlers) {
   const signing = login?.state === "signing-in" && login.window;
   const text4 = resolved ? signedIn : signing ? signInText(login.waited) : item2.text;
   const title2 = resolved && login.provider ? `Signed in to ${login.provider} again.` : item2.title;
-  const failure2 = login?.state === "idle" ? login.error : void 0;
+  const failure3 = 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}>
     ${resolved ? b`<swc-icon-info-circle class="icon" size="s" aria-hidden="true"></swc-icon-info-circle>` : b`<swc-icon-alert-diamond class="icon" size="s" aria-hidden="true"></swc-icon-alert-diamond>`}
     ${resolved ? A : b`<span class="sr">Error: </span>`}<span class="lead">${title2}</span>
     ${text4 ? b`<span class="detail" role=${login ? "status" : A}>${text4}</span>` : A}
     ${fix ? b`<div class="fix" aria-live="off">${fixButton(fix, item2, handlers, login)}</div>` : A}
     ${signing ? signInDetails(item2.account, login.signIn, login.copied, (code3) => handlers.copySignIn?.(item2.account, id, code3), "s") : A}
-    ${failure2 ? b`<div class="help" data-error="login"><sp-help-text size="s" variant="negative" icon>${failure2}</sp-help-text><swc-action-button size="s" quiet data-action="settings" @click=${() => handlers.action("settings", item2.id, item2.account)}>Open settings</swc-action-button></div>` : A}
+    ${failure3 ? b`<div class="help" data-error="login"><sp-help-text size="s" variant="negative" icon>${failure3}</sp-help-text><swc-action-button size="s" quiet data-action="settings" @click=${() => handlers.action("settings", item2.id, item2.account)}>Open settings</swc-action-button></div>` : A}
   </div>`;
 }
 function time(at) {
@@ -33620,8 +33623,8 @@ function question(item2, handlers) {
   } else {
     const submit = (event2) => {
       event2.preventDefault();
-      const field2 = event2.currentTarget.querySelector("input");
-      if (field2.value.trim()) answer(field2.value.trim());
+      const field3 = event2.currentTarget.querySelector("input");
+      if (field3.value.trim()) answer(field3.value.trim());
     };
     body2 = b`<form class="options" @submit=${submit}>
       <input class="input" type=${item2.kind === "email" ? "email" : item2.kind === "number" ? "number" : item2.kind === "date" ? "date" : "text"} aria-label=${item2.question} ?disabled=${handlers.readOnly} />
@@ -34891,8 +34894,8 @@ function failureText(error) {
   const text4 = isVaultFailure(error) ? codeTexts[error.code] : void 0;
   return text4 ?? (error instanceof Error ? error.message : "The vault did not answer");
 }
-function fieldOf(error, field2) {
-  return isVaultFailure(error) && error.code === "EINVAL" ? field2 : null;
+function fieldOf(error, field3) {
+  return isVaultFailure(error) && error.code === "EINVAL" ? field3 : null;
 }
 function away(vault) {
   const state2 = vault.availability?.() ?? (vault.status() ? "ready" : "waiting");
@@ -35814,12 +35817,12 @@ var SliccComposer = class extends ThemedElement {
       this.renderRoot.querySelector('.item[aria-selected="true"]')?.scrollIntoView({ block: "nearest" });
   }
   #wire() {
-    const field2 = this.#field;
-    void field2.updateComplete.then(() => {
+    const field3 = this.#field;
+    void field3.updateComplete.then(() => {
       const popover = this.renderRoot.querySelector("swc-popover");
       if (popover) {
         popover.triggerElement = null;
-        popover.triggerElement = field2.shadowRoot.querySelector(
+        popover.triggerElement = field3.shadowRoot.querySelector(
           ".swc-PromptField-upload"
         );
       }
@@ -36030,16 +36033,16 @@ ${this.value}` : text4;
       text4 === null || text4 === void 0 ? { ...base, kind: "file", size: 0, error: "Could not read the file" } : { ...base, kind: "text", size: text4.length, text: text4 }
     ];
   }
-  async shareSecret(name, field2 = null) {
+  async shareSecret(name, field3 = null) {
     const clean = name.trim().toUpperCase().replace(/[^A-Z0-9_]/g, "_");
     if (this.sharing) return;
     if (!clean) {
-      if (field2) this.#refuse("Enter a name", "name", true);
+      if (field3) this.#refuse("Enter a name", "name", true);
       return;
     }
-    const value = field2 ? take(field2) : "";
+    const value = field3 ? take(field3) : "";
     const vault = this.model?.vault;
-    if (field2 && vault?.put && !await this.#store(vault, clean, value)) return;
+    if (field3 && vault?.put && !await this.#store(vault, clean, value)) return;
     this.#refuse(null);
     this.attachments = [
       ...this.attachments,
@@ -36053,12 +36056,12 @@ ${this.value}` : text4;
     ];
     this.popup = null;
   }
-  #refuse(text4, field2 = null, focus = false) {
+  #refuse(text4, field3 = null, focus = false) {
     this.secretError = text4;
-    this.secretField = text4 ? field2 : null;
-    if (focus && text4 && field2)
+    this.secretField = text4 ? field3 : null;
+    if (focus && text4 && field3)
       void this.updateComplete.then(
-        () => this.renderRoot.querySelector(`form.secret input[name=${field2}]`)?.focus()
+        () => this.renderRoot.querySelector(`form.secret input[name=${field3}]`)?.focus()
       );
   }
   async #store(vault, clean, value) {
@@ -37241,9 +37244,16 @@ var SliccChat = class _SliccChat extends ThemedElement {
       header swc-action-button {
         flex: none;
       }
-      header swc-status-light {
+      header swc-status-light,
+      header .dot {
         align-self: center;
       }
+      @media (forced-colors: active) {
+        header .dot[data-agent-status] {
+          forced-color-adjust: none;
+          background: CanvasText;
+        }
+      }
       header swc-meter {
         flex: 0 1 calc(var(--swc-spacing-400) * 6);
         min-width: calc(var(--swc-spacing-400) * 4.5);
@@ -37968,12 +37978,12 @@ var SliccChat = class _SliccChat extends ThemedElement {
     }
     if (watchOnly(model)) {
       const label = model.settings.models().find((option) => option.id === agent.model)?.label;
-      return b`${statusLight(agent.status)}
+      return b`${statusDot(agent.status)}
         <span class="model" data-model>${label ?? agent.model}</span>
         ${meter}`;
     }
     const offered = chatModels(model.settings.models());
-    return b`${statusLight(agent.status)}
+    return b`${statusDot(agent.status)}
       ${offered.length ? b`<sp-picker size="s" quiet label="Model" value=${agent.model} @change=${(event2) => model.agent.setModel(agent.id, event2.target.value)} @sp-opened=${this.#modelFilter.opened} @sp-closed=${this.#modelFilter.closed} @keydown=${this.#modelFilter.keys}>
         ${this.#modelFilter.items(offered)}
       </sp-picker>` : b`<swc-action-button size="s" quiet data-action="set-up-model" @click=${() => this.#action("settings")}>Set up a model</swc-action-button>`}
@@ -40512,9 +40522,6 @@ var SliccAgents = class extends ModelElement {
       font-size: var(--swc-font-size-75);
       color: var(--swc-neutral-subdued-content-color-default);
     }
-    .state {
-      color: var(--swc-neutral-content-color-default);
-    }
     .ribbon {
       grid-area: ribbon;
       display: flex;
@@ -40840,11 +40847,12 @@ var SliccAgents = class extends ModelElement {
     >
       ${this.#disclosure(agent, scoops, open)}
       <div class="head">
-        ${unread ? b`<span class="marker unread" data-status=${agent.status} aria-hidden="true">${unreadCount(unread)}</span>` : b`<span class="marker status" data-status=${agent.status} aria-hidden="true"></span>`}
+        <span class="marker status" data-status=${agent.status} aria-hidden="true"></span>
+        ${unread ? b`<span class="marker unread" data-status=${agent.status} aria-hidden="true">${unreadCount(unread)}</span>` : A}
         <span class="name">${agent.name}</span>
       </div>
       ${fillShown(agent.contextFill) ? b`<span class="fill" data-variant=${meterVariant2(agent.contextFill)}>${percent(agent.contextFill)}</span>` : A}
-      <span class="title"><span class="state">${statusLabel[agent.status]}</span> · ${title2 || untitled}</span>
+      <span class="title">${title2 || untitled}</span>
       ${this.#ribbon(scoops)}
       ${this.#dropButton(agent, selected)}
       ${this.#deleteButton(agent, selected)}
@@ -41104,9 +41112,9 @@ var defaultGates = {
   messages: ["user", "agent", "cone", "scoop:*", "off"],
   tools: ["user", "agent", "scoop:*"]
 };
-function gateChoice(field2, cone, gate) {
+function gateChoice(field3, cone, gate) {
   if (gate === "scoop:*")
-    return cone.scoops.flatMap((name) => gateChoice(field2, cone, `scoop:${name}`));
+    return cone.scoops.flatMap((name) => gateChoice(field3, cone, `scoop:${name}`));
   if (gate.startsWith("scoop:")) {
     const name = gate.slice(6);
     return cone.scoops.includes(name) ? [{ value: gate, label: `${name} decides`, description: `The scoop ${name} decides.` }] : [];
@@ -41126,14 +41134,14 @@ function gateChoice(field2, cone, gate) {
     off: {
       value: "off",
       label: "No review",
-      description: field2 === "messages" ? "Messages go straight in as follow-ups." : "Tool calls run without review."
+      description: field3 === "messages" ? "Messages go straight in as follow-ups." : "Tool calls run without review."
     }
   };
   return choices[gate] ? [choices[gate]] : [];
 }
-function gateOptions(field2, cone, allowed = defaultGates[field2]) {
-  const options2 = allowed.flatMap((gate) => gateChoice(field2, cone, gate)).filter((option, index2, all2) => all2.findIndex(({ value }) => value === option.value) === index2);
-  return options2.length ? options2 : gateChoice(field2, cone, "user");
+function gateOptions(field3, cone, allowed = defaultGates[field3]) {
+  const options2 = allowed.flatMap((gate) => gateChoice(field3, cone, gate)).filter((option, index2, all2) => all2.findIndex(({ value }) => value === option.value) === index2);
+  return options2.length ? options2 : gateChoice(field3, cone, "user");
 }
 function defaultGate(options2) {
   return options2.some(({ value }) => value === "user") ? "user" : options2[0].value;
@@ -41278,11 +41286,11 @@ var SliccGuestInvite = class extends i2 {
   get #current() {
     return this.cones.find((cone) => cone.id === this.cone) ?? this.cones[0];
   }
-  #options(field2, cone) {
-    return gateOptions(field2, cone, this.port?.gates?.()[field2]);
+  #options(field3, cone) {
+    return gateOptions(field3, cone, this.port?.gates?.()[field3]);
   }
-  #keep(gate, field2, cone) {
-    const options2 = this.#options(field2, cone);
+  #keep(gate, field3, cone) {
+    const options2 = this.#options(field3, cone);
     return options2.some((option) => option.value === gate) ? gate : defaultGate(options2);
   }
   #settle() {
@@ -41354,18 +41362,18 @@ var SliccGuestInvite = class extends i2 {
     this.remove();
     if (this.trigger?.isConnected) this.trigger.focus();
   }
-  #gate(field2, title2, value) {
-    const options2 = this.#options(field2, this.#current);
+  #gate(field3, title2, value) {
+    const options2 = this.#options(field3, this.#current);
     const chosen = options2.find((option) => option.value === value);
-    const id = `guest-${field2}`;
+    const id = `guest-${field3}`;
     return b`<div class="field">
       <sp-field-label for=${id} size="m">${title2}</sp-field-label>
-      <sp-picker id=${id} size="m" label=${title2} data-action=${`guest-${field2}`} .value=${l(value)} ?disabled=${this.pending} @change=${(event2) => {
-      this[field2] = this.#pick(event2);
+      <sp-picker id=${id} size="m" label=${title2} data-action=${`guest-${field3}`} .value=${l(value)} ?disabled=${this.pending} @change=${(event2) => {
+      this[field3] = this.#pick(event2);
     }}>
         ${options2.map((option) => b`<sp-menu-item value=${option.value}>${option.label}<span slot="description">${option.description}</span></sp-menu-item>`)}
       </sp-picker>
-      <sp-help-text size="m" data-help=${field2}>${chosen.description}</sp-help-text>
+      <sp-help-text size="m" data-help=${field3}>${chosen.description}</sp-help-text>
     </div>`;
   }
   #form() {
@@ -42951,11 +42959,11 @@ var SliccNetwork = class extends ModelElement {
   }
   async #submitPair(event2, port) {
     event2.preventDefault();
-    const field2 = this.renderRoot.querySelector("#pair-url");
-    const url = field2.value.trim();
+    const field3 = this.renderRoot.querySelector("#pair-url");
+    const url = field3.value.trim();
     if (!url || this.pairBusy || !port.pairComputer) return;
     if (await this.#pairAct("pair", () => port.pairComputer?.(url))) {
-      field2.value = "";
+      field3.value = "";
       this.pairFilled = false;
     }
   }
@@ -43024,11 +43032,11 @@ var SliccNetwork = class extends ModelElement {
   #submitKey(event2, port) {
     event2.preventDefault();
     if (this.busy) return;
-    const field2 = event2.currentTarget.querySelector(
+    const field3 = event2.currentTarget.querySelector(
       "sp-textfield"
     );
-    const key = field2.value.trim();
-    field2.value = "";
+    const key = field3.value.trim();
+    field3.value = "";
     if (key) void this.#tailnet("key", () => port.submitAuthKey?.(key));
   }
   #sendKey(event2) {
@@ -50437,7 +50445,7 @@ var SliccApprovals = class extends ModelElement {
     const list6 = this.#current();
     const [approval, ...rest] = held2 ? [held2, ...list6.filter(({ id }) => id !== held2.id)] : list6;
     if (!approval) return A;
-    const failure2 = this.failure?.id === approval.id ? this.failure.message : "";
+    const failure3 = this.failure?.id === approval.id ? this.failure.message : "";
     const verdict = rulesOf(approval);
     const rules = verdict.certain ?? verdict.maybe;
     const always = approval.kind !== "tray" && approval.always && !deniedSudo(approval) && !rules;
@@ -50453,10 +50461,10 @@ var SliccApprovals = class extends ModelElement {
           ${this.#verdict(approval)}
           ${rules ? b`<div class="rules" data-secret-rules=${rules}><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><p>${verdict.certain ? b`<strong>This changes secret rules.</strong> It names <code>${commandText(rules, false)}</code>, where SLICC keeps which secrets programs may use and where they may be sent.` : b`<strong>This may change secret rules.</strong> SLICC can't tell where <code>${commandText(rules, false)}</code> leads, and it could reach the files where SLICC keeps which secrets programs may use and where they may be sent.`} Allow it only if you asked for this change.</p></div>` : A}
           ${hint2 ? b`<p class="hint">${hint2}</p>` : A}
-          ${!failure2 && gate ? b`<p class="hint" data-allow-hint>${gate}</p>` : A}
-          ${failure2 ? b`<p class="problem" role="alert" data-error><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${failure2}</span></p>` : b`<p class="timer" data-timer>Denied automatically in ${countdown(approval.expiresAt - this.now)}.</p>`}
+          ${!failure3 && gate ? b`<p class="hint" data-allow-hint>${gate}</p>` : A}
+          ${failure3 ? b`<p class="problem" role="alert" data-error><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${failure3}</span></p>` : b`<p class="timer" data-timer>Denied automatically in ${countdown(approval.expiresAt - this.now)}.</p>`}
           ${rest.length ? b`<p class="more" data-more>${rest.length === 1 ? "1 more request is waiting." : `${rest.length} more requests are waiting.`}</p>` : A}
-          ${this.#actions(approval, !!failure2, always)}
+          ${this.#actions(approval, !!failure3, always)}
         </sp-alert-dialog>`
     );
   }
@@ -52683,15 +52691,15 @@ var SliccMemory = class extends ModelElement {
   }
   #save(memory) {
     const form = this.renderRoot.querySelector(".editor");
-    const field2 = (name) => form.querySelector(`[name=${name}]`).value.trim();
-    if (!field2("title")) return;
-    const tag3 = field2("tag");
+    const field3 = (name) => form.querySelector(`[name=${name}]`).value.trim();
+    if (!field3("title")) return;
+    const tag3 = field3("tag");
     const saved = this.model?.memory.save({
       ...memory.id ? { id: memory.id } : {},
       scope: memory.scope,
-      section: field2("section") || "Notes",
-      title: field2("title"),
-      body: field2("body"),
+      section: field3("section") || "Notes",
+      title: field3("title"),
+      body: field3("body"),
       tag: tag3 !== "none" ? tag3 : null
     });
     this.editing = null;
@@ -52968,13 +52976,13 @@ var SliccNotices = class extends ModelElement {
   }
   #notice(notice) {
     const pending = this.pending.get(notice.id);
-    const failure2 = this.failures.get(notice.id);
+    const failure3 = this.failures.get(notice.id);
     return b`<div class="notice" role="status" data-notice=${notice.id} data-tone=${notice.tone}>
       ${notice.tone === "warning" ? b`<swc-icon-alert-triangle></swc-icon-alert-triangle>` : b`<swc-icon-info-circle></swc-icon-info-circle>`}
       <div class="text">
         <span class="title">${notice.title}</span>
         <p>${notice.body}</p>
-        ${failure2 ? b`<p class="problem" data-error><swc-icon-alert-triangle></swc-icon-alert-triangle><span>${failure2}</span></p>` : A}
+        ${failure3 ? b`<p class="problem" data-error><swc-icon-alert-triangle></swc-icon-alert-triangle><span>${failure3}</span></p>` : A}
         ${notice.actions.length ? b`<div class="actions">${notice.actions.map(
       (action) => b`<swc-button size="s" variant="secondary" fill-style="outline" data-action=${action.id} ?pending=${pending === action.id} ?disabled=${!!pending && pending !== action.id} @click=${() => void this.act(notice.id, action.id)}>${action.label}</swc-button>`
     )}</div>` : A}
@@ -53674,19 +53682,19 @@ var SliccSecrets = class extends ThemedElement {
     if (form?.kind === "import") this.importKind = "bundle";
     if (form) void this.updateComplete.then(() => this.#focus());
   }
-  #refuse(text4, field2 = null, focus = false) {
+  #refuse(text4, field3 = null, focus = false) {
     this.problem = text4;
-    this.invalid = text4 ? field2 : null;
-    if (focus && text4 && field2) void this.updateComplete.then(() => this.#field(field2)?.focus());
+    this.invalid = text4 ? field3 : null;
+    if (focus && text4 && field3) void this.updateComplete.then(() => this.#field(field3)?.focus());
   }
   #typed() {
     this.invalid = null;
   }
-  #bad(field2) {
-    return this.invalid === field2 ? "true" : A;
+  #bad(field3) {
+    return this.invalid === field3 ? "true" : A;
   }
-  #described(field2) {
-    return this.invalid === field2 ? "error-form" : A;
+  #described(field3) {
+    return this.invalid === field3 ? "error-form" : A;
   }
   #focus() {
     this.renderRoot.querySelector("[data-form] input, [data-form] sp-picker")?.focus();
@@ -53924,8 +53932,8 @@ var SliccSecrets = class extends ThemedElement {
     event2.preventDefault();
     if (!locked && !this.busy) void run();
   }
-  #value(label, field2 = "value") {
-    return b`<label class="field"><span>${label}</span><input type="password" autocomplete="off" spellcheck="false" data-field=${field2} aria-invalid=${this.#bad(field2)} aria-describedby=${this.#described(field2)} /></label>`;
+  #value(label, field3 = "value") {
+    return b`<label class="field"><span>${label}</span><input type="password" autocomplete="off" spellcheck="false" data-field=${field3} aria-invalid=${this.#bad(field3)} aria-describedby=${this.#described(field3)} /></label>`;
   }
   #actions(locked, label, action, run) {
     return b`<div class="buttons">
@@ -54979,13 +54987,13 @@ var SliccSettings = class extends ThemedElement {
       });
   }
   #settingsOf(account, fields) {
-    const settable = (account.fields ?? []).filter((field2) => field2.vaultSetting);
+    const settable = (account.fields ?? []).filter((field3) => field3.vaultSetting);
     if (account.group === "mcp" || !settable.length) return void 0;
     return Object.fromEntries(
-      settable.flatMap((field2) => {
-        const value = fields?.[field2.name];
-        if (!value || field2.customBase && this.#baseOf(value)) return [];
-        return [[field2.vaultSetting, value]];
+      settable.flatMap((field3) => {
+        const value = fields?.[field3.name];
+        if (!value || field3.customBase && this.#baseOf(value)) return [];
+        return [[field3.vaultSetting, value]];
       })
     );
   }
@@ -54998,17 +55006,17 @@ var SliccSettings = class extends ThemedElement {
   #keyOptional(account) {
     const vault = this.#vault(account);
     const fields = account.fields ?? [];
-    if (!vault || !fields.some((field2) => field2.vaultSetting || field2.customBase)) return false;
-    if (fields.some((field2) => field2.vaultSetting) && !vault.settings) return false;
+    if (!vault || !fields.some((field3) => field3.vaultSetting || field3.customBase)) return false;
+    if (fields.some((field3) => field3.vaultSetting) && !vault.settings) return false;
     return !!this.#record(account);
   }
   #refused(account, message, keyed2) {
-    const field2 = (account.fields ?? []).find(
+    const field3 = (account.fields ?? []).find(
       (candidate) => [candidate.vaultSetting, candidate.name, candidate.label].some(
         (word2) => word2 && words(message, word2)
       )
     );
-    if (field2) this.#refuse(account.id, field2.name, message);
+    if (field3) this.#refuse(account.id, field3.name, message);
     else if (keyed2) this.#refuse(account.id, "value", message);
     else this.failure = { id: account.id, message };
   }
@@ -55020,14 +55028,14 @@ var SliccSettings = class extends ThemedElement {
       return void 0;
     }
   }
-  #oldBase(account, field2) {
-    return this.#baseOf(field2.value) ?? this.#bases.get(`${account.id} ${field2.name}`);
+  #oldBase(account, field3) {
+    return this.#baseOf(field3.value) ?? this.#bases.get(`${account.id} ${field3.name}`);
   }
   #baseChanges(account, fields) {
-    return (account.fields ?? []).filter((field2) => field2.customBase).map((field2) => ({
-      field: field2.name,
-      url: this.#baseOf(fields?.[field2.name]),
-      old: this.#oldBase(account, field2)
+    return (account.fields ?? []).filter((field3) => field3.customBase).map((field3) => ({
+      field: field3.name,
+      url: this.#baseOf(fields?.[field3.name]),
+      old: this.#oldBase(account, field3)
     })).filter((change) => change.url !== change.old);
   }
   #modelChange(name, changes2, from, to) {
@@ -55053,8 +55061,8 @@ var SliccSettings = class extends ThemedElement {
         await live?.endpoints?.(forward);
       } catch (error) {
         this.#busy(id, false);
-        const field2 = changes2.find((change) => change.url) ?? changes2[0];
-        if (this.model === model) this.#refuse(id, field2.field, failureText(error));
+        const field3 = changes2.find((change) => change.url) ?? changes2[0];
+        if (this.model === model) this.#refuse(id, field3.field, failureText(error));
         return;
       }
       if (this.model !== model) {
@@ -55078,35 +55086,35 @@ var SliccSettings = class extends ThemedElement {
   }
   #placeFailure(account, fields) {
     const message = this.failure.message;
-    const field2 = (account.fields ?? []).find(
+    const field3 = (account.fields ?? []).find(
       (candidate) => candidate.customBase && !!fields?.[candidate.name] && [candidate.name, candidate.label, "https", "url", "port", "userinfo"].some(
         (word2) => words(message, word2)
       )
     );
-    if (!field2) return;
+    if (!field3) return;
     this.failure = null;
-    this.#refuse(account.id, field2.name, message);
+    this.#refuse(account.id, field3.name, message);
   }
-  #refuse(id, field2, message) {
-    this.problem = { id, field: field2, message };
+  #refuse(id, field3, message) {
+    this.problem = { id, field: field3, message };
     void this.updateComplete.then(
       () => this.renderRoot.querySelector(
-        field2 === "value" ? ".key input[data-field=value]" : `.key [data-account-field="${field2}"]`
+        field3 === "value" ? ".key input[data-field=value]" : `.key [data-account-field="${field3}"]`
       )?.focus()
     );
   }
   #fields(form, account) {
     if (!account.fields?.length) return void 0;
     const values = {};
-    for (const field2 of account.fields) {
-      const input = form.querySelector(`[data-account-field="${field2.name}"]`);
+    for (const field3 of account.fields) {
+      const input = form.querySelector(`[data-account-field="${field3.name}"]`);
       const value = input.value.trim();
-      if (value) values[field2.name] = value;
-      else if (field2.required && field2.options?.length !== 0) {
+      if (value) values[field3.name] = value;
+      else if (field3.required && field3.options?.length !== 0) {
         this.#refuse(
           account.id,
-          field2.name,
-          field2.options ? `Select a ${field2.label.toLowerCase()}.` : `${field2.label} can\u2019t be empty`
+          field3.name,
+          field3.options ? `Select a ${field3.label.toLowerCase()}.` : `${field3.label} can\u2019t be empty`
         );
         return null;
       }
@@ -55149,7 +55157,7 @@ var SliccSettings = class extends ThemedElement {
     this.failure = null;
     this.problem = null;
     this.filled = new Set(
-      (account.fields ?? []).filter((field2) => field2.options || field2.value?.trim()).map((field2) => field2.name)
+      (account.fields ?? []).filter((field3) => field3.options || field3.value?.trim()).map((field3) => field3.name)
     );
     this.entering = account.id;
     void this.updateComplete.then(() => this.focusOn(".key sp-textfield", ".key input"));
@@ -55171,9 +55179,9 @@ var SliccSettings = class extends ThemedElement {
       if (fields2 !== null && !this.pending.has(account.id)) void this.keep(account, value, fields2);
       return;
     }
-    const field2 = form.querySelector("sp-textfield");
-    const secret = field2.value.trim();
-    field2.value = "";
+    const field3 = form.querySelector("sp-textfield");
+    const secret = field3.value.trim();
+    field3.value = "";
     const fields = this.#fields(form, account);
     if (secret && fields !== null) void this.#connectBases(account, secret, fields);
   }
@@ -55256,67 +55264,67 @@ var SliccSettings = class extends ThemedElement {
     this.failure = null;
     this.problem = null;
   }
-  #problem(account, field2, icon = true) {
+  #problem(account, field3, icon = true) {
     const problem = this.problem;
-    if (problem?.id !== account.id || problem.field !== field2) return A;
+    if (problem?.id !== account.id || problem.field !== field3) return A;
     return b`<div class="problem" id="key-problem" role="alert">
       ${icon ? b`<swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle>` : A}
       <span>${problem.message}</span>
     </div>`;
   }
-  #described(account, field2) {
-    return this.problem?.id === account.id && this.problem.field === field2 ? "key-problem" : A;
+  #described(account, field3) {
+    return this.problem?.id === account.id && this.problem.field === field3 ? "key-problem" : A;
   }
-  #invalid(account, field2) {
-    return this.#described(account, field2) === A ? A : "true";
+  #invalid(account, field3) {
+    return this.#described(account, field3) === A ? A : "true";
   }
   #extra(account) {
     return (account.fields ?? []).map(
-      (field2) => field2.options ? b`<div class="field">
-              <sp-field-label for=${`field-${field2.name}`} size="m">${field2.label}</sp-field-label>${this.#control(account, field2)}
-              ${field2.options.length ? A : b`<p class="hint" data-empty=${field2.name}>${nothingToChoose}</p>`}
-              ${field2.help ? b`<p class="hint" id=${`help-${field2.name}`}>${field2.help}</p>` : A}
-              ${this.#problem(account, field2.name, false)}
+      (field3) => field3.options ? b`<div class="field">
+              <sp-field-label for=${`field-${field3.name}`} size="m">${field3.label}</sp-field-label>${this.#control(account, field3)}
+              ${field3.options.length ? A : b`<p class="hint" data-empty=${field3.name}>${nothingToChoose}</p>`}
+              ${field3.help ? b`<p class="hint" id=${`help-${field3.name}`}>${field3.help}</p>` : A}
+              ${this.#problem(account, field3.name, false)}
             </div>` : b`<label class="field">
-              <span>${field2.label}</span>${this.#control(account, field2)}
+              <span>${field3.label}</span>${this.#control(account, field3)}
             </label>
-            ${field2.help ? b`<p class="hint" id=${`help-${field2.name}`}>${field2.help}</p>` : A}
-            ${this.#problem(account, field2.name)}`
+            ${field3.help ? b`<p class="hint" id=${`help-${field3.name}`}>${field3.help}</p>` : A}
+            ${this.#problem(account, field3.name)}`
     );
   }
-  #describedBy(account, field2) {
-    const problem = this.#described(account, field2.name);
-    const ids = [problem === A ? "" : problem, field2.help ? `help-${field2.name}` : ""];
+  #describedBy(account, field3) {
+    const problem = this.#described(account, field3.name);
+    const ids = [problem === A ? "" : problem, field3.help ? `help-${field3.name}` : ""];
     return ids.filter(Boolean).join(" ") || A;
   }
-  #control(account, field2) {
-    if (field2.options) {
-      const empty4 = !field2.options.length;
-      const described2 = this.problem?.id === account.id && this.problem.field === field2.name;
+  #control(account, field3) {
+    if (field3.options) {
+      const empty4 = !field3.options.length;
+      const described2 = this.problem?.id === account.id && this.problem.field === field3.name;
       return b`<sp-picker
           size="m"
-          data-account-field=${field2.name}
-          label=${empty4 ? "None available" : field2.label}
-          id=${`field-${field2.name}`}
-          value=${start(field2.options, field2.value)}
+          data-account-field=${field3.name}
+          label=${empty4 ? "None available" : field3.label}
+          id=${`field-${field3.name}`}
+          value=${start(field3.options, field3.value)}
           ?disabled=${empty4}
           ?invalid=${described2}
-          aria-required=${field2.required ? "true" : A}
+          aria-required=${field3.required ? "true" : A}
         >
-          ${field2.options.map((option) => b`<sp-menu-item value=${option.value}>${option.label}</sp-menu-item>`)}
-          ${described2 || empty4 || field2.help ? b`<span slot="description" class="sr">${described2 ? this.problem?.message : empty4 ? nothingToChoose : field2.help}</span>` : A}
+          ${field3.options.map((option) => b`<sp-menu-item value=${option.value}>${option.label}</sp-menu-item>`)}
+          ${described2 || empty4 || field3.help ? b`<span slot="description" class="sr">${described2 ? this.problem?.message : empty4 ? nothingToChoose : field3.help}</span>` : A}
         </sp-picker>`;
     }
     return b`<input
           type="text"
           autocomplete="off"
           spellcheck="false"
-          data-account-field=${field2.name}
-          value=${field2.value ?? A}
-          placeholder=${field2.placeholder ?? A}
-          aria-required=${field2.required ? "true" : A}
-          aria-invalid=${this.#invalid(account, field2.name)}
-          aria-describedby=${this.#describedBy(account, field2)}
+          data-account-field=${field3.name}
+          value=${field3.value ?? A}
+          placeholder=${field3.placeholder ?? A}
+          aria-required=${field3.required ? "true" : A}
+          aria-invalid=${this.#invalid(account, field3.name)}
+          aria-describedby=${this.#describedBy(account, field3)}
         />`;
   }
   #getKey(account) {
@@ -55334,9 +55342,9 @@ var SliccSettings = class extends ThemedElement {
   #ready(account) {
     if (account.blocked) return false;
     if (!this.#offered()) return true;
-    const required = (account.fields ?? []).filter((field2) => field2.required && !field2.options);
+    const required = (account.fields ?? []).filter((field3) => field3.required && !field3.options);
     const key = this.#keyOptional(account) ? [] : ["value"];
-    return [...key, ...required.map((field2) => field2.name)].every((name) => this.filled.has(name));
+    return [...key, ...required.map((field3) => field3.name)].every((name) => this.filled.has(name));
   }
   #fill(event2) {
     const input = event2.target;
@@ -55530,7 +55538,7 @@ var SliccSettings = class extends ThemedElement {
     const status2 = this.#status(account);
     const [variant, generic] = accountStatus[status2];
     const label = status2 === "rejected" ? rejectedNames[account.secret ?? "api-key"] : generic;
-    const failure2 = this.failure?.id === account.id ? b`<div class="failure" role="alert">
+    const failure3 = this.failure?.id === account.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;
@@ -55542,7 +55550,7 @@ var SliccSettings = class extends ThemedElement {
     </div>
     ${this.#rowNotes(account)}
     ${this.#movedNote(account)}
-    ${this.adding?.id === account.id ? A : b`${this.#key(account)}${this.#otherKey(account)}${failure2}`}`;
+    ${this.adding?.id === account.id ? A : b`${this.#key(account)}${this.#otherKey(account)}${failure3}`}`;
   }
   #refusedNote(account) {
     if (account.state !== "refused") return A;
@@ -55624,7 +55632,7 @@ var SliccSettings = class extends ThemedElement {
       this.#busy(account.id, false);
     }
     this.focusOn("[data-action=add-provider]");
-    for (const field2 of account.fields ?? []) this.#bases.delete(`${account.id} ${field2.name}`);
+    for (const field3 of account.fields ?? []) this.#bases.delete(`${account.id} ${field3.name}`);
   }
   #heldRecords(account, vault) {
     const server = serverOf(account);
@@ -55735,7 +55743,7 @@ var SliccSettings = class extends ThemedElement {
     event2.preventDefault();
     if (this.serverBusy) return;
     const form = event2.currentTarget;
-    const text4 = (field2) => form.querySelector(`[data-server-field=${field2}]`)?.value.trim();
+    const text4 = (field3) => form.querySelector(`[data-server-field=${field3}]`)?.value.trim();
     const name = text4("name");
     const url = text4("url");
     const problem = this.#checkServer(name, url);
@@ -55764,21 +55772,21 @@ var SliccSettings = class extends ThemedElement {
     this.serverProblem = problem;
     if (problem.field !== "form") this.focusOn(`[data-server-field=${problem.field}]`);
   }
-  #serverNote(field2) {
-    if (this.serverProblem?.field !== field2) return A;
-    return b`<div class="problem" id=${`server-${field2}-problem`} role="alert" data-problem=${field2}>
+  #serverNote(field3) {
+    if (this.serverProblem?.field !== field3) return A;
+    return b`<div class="problem" id=${`server-${field3}-problem`} role="alert" data-problem=${field3}>
       <swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle>
       <span>${this.serverProblem.message}</span>
     </div>`;
   }
-  #serverInput(field2, type, help2) {
-    const invalid = this.serverProblem?.field === field2;
-    const problem = invalid ? `server-${field2}-problem ` : "";
+  #serverInput(field3, type, help2) {
+    const invalid = this.serverProblem?.field === field3;
+    const problem = invalid ? `server-${field3}-problem ` : "";
     return b`<input
       type=${type}
       autocomplete="off"
       spellcheck="false"
-      data-server-field=${field2}
+      data-server-field=${field3}
       aria-required="true"
       aria-invalid=${invalid ? "true" : A}
       aria-describedby=${`${problem}${help2}`}
@@ -55875,8 +55883,8 @@ var SliccSettings = class extends ThemedElement {
     const dialog = this.#dialog;
     if (!changed2.has("picking") || !dialog || dialog.open) return;
     dialog.showModal();
-    const field2 = this.renderRoot.querySelector("sp-search");
-    void field2.updateComplete.then(() => field2.focus());
+    const field3 = this.renderRoot.querySelector("sp-search");
+    void field3.updateComplete.then(() => field3.focus());
   }
   get #dialog() {
     return this.renderRoot.querySelector("dialog.picker");
@@ -56233,13 +56241,197 @@ var bridge = `(() => {
       face.load().then(size, () => {});
     }
   };
+  const runs = new Map();
   addEventListener('message', (event) => {
     if (event.source !== parent) return;
     const message = event.data || {};
     if (message.type === 'slicc-icons') swap(message.icons);
     if (message.type === 'slicc-fonts') fonts(message.fonts);
     if (message.type === 'slicc-theme') document.documentElement.classList.toggle('theme-light', message.color === 'light');
+    const run = runs.get(message.id);
+    if (run && message.type === 'slicc-cgi-head') run.head(message);
+    if (run && message.type === 'slicc-cgi-chunk') run.chunk(message);
   });
+  const native = window.fetch;
+  const tag = Math.random().toString(36).slice(2);
+  let count = 0;
+  const empty = new Set([101, 103, 204, 205, 304]);
+  const moved = new Set([301, 302, 303, 307, 308]);
+  const decode = (text) => Uint8Array.from(atob(text || ''), (char) => char.charCodeAt(0));
+  const encode = (bytes) => {
+    let text = '';
+    for (let at = 0; at < bytes.length; at += 32768) text += String.fromCharCode(...bytes.subarray(at, at + 32768));
+    return btoa(text);
+  };
+  const scope = (input) => {
+    try {
+      const href = input instanceof Request ? input.url : new URL(input, document.baseURI).href;
+      const base = new URL('cgi-bin/', document.baseURI);
+      return href.startsWith(base.href) ? base : null;
+    } catch {
+      return null;
+    }
+  };
+  const send = (input, init, hops) => {
+    const base = scope(input);
+    if (!base) return native.call(window, input, init);
+    let request;
+    try {
+      request = new Request(input, init);
+    } catch (error) {
+      return Promise.reject(error);
+    }
+    const payload = request.body ? request.arrayBuffer() : Promise.resolve(null);
+    return payload.then((bytes) => exchange(request, base, bytes, hops));
+  };
+  const redirect = (request, payload, status, location, hops) => {
+    if (request.redirect === 'error') throw new TypeError('fetch: the response redirects and redirect is error');
+    if (hops >= 20) throw new TypeError('fetch: more than 20 redirects');
+    const get = (status === 303 && request.method !== 'GET' && request.method !== 'HEAD') || ((status === 301 || status === 302) && request.method === 'POST');
+    const headers = new Headers(request.headers);
+    if (get) for (const name of ['content-encoding', 'content-language', 'content-location', 'content-type']) headers.delete(name);
+    const init = { method: get ? 'GET' : request.method, headers, body: get ? null : payload, signal: request.signal, redirect: request.redirect };
+    return send(new URL(location, request.url).href, init, hops + 1).then((response) => Object.defineProperty(response, 'redirected', { value: true }));
+  };
+  const exchange = (request, base, payload, hops) => new Promise((resolve, reject) => {
+    const { signal } = request;
+    if (signal.aborted) return reject(signal.reason);
+    const id = tag + ':' + ++count;
+    const url = new URL(request.url);
+    const headers = new Headers(request.headers);
+    if (!headers.has('accept')) headers.set('accept', '*/*');
+    const language = navigator.languages.join(',') || navigator.language;
+    if (language && !headers.has('accept-language')) headers.set('accept-language', language);
+    let stream = null;
+    const finish = () => {
+      runs.delete(id);
+      signal.removeEventListener('abort', abort);
+    };
+    const close = () => {
+      finish();
+      post({ type: 'slicc-cgi-close', id });
+    };
+    const abort = () => {
+      close();
+      reject(signal.reason);
+      if (stream) stream.error(signal.reason);
+    };
+    signal.addEventListener('abort', abort);
+    runs.set(id, {
+      head(message) {
+        if (typeof message.error === 'string') {
+          finish();
+          return reject(new TypeError(message.error));
+        }
+        const head = message.head;
+        let response;
+        let follow = false;
+        try {
+          const fields = new Headers(head.headers);
+          follow = moved.has(head.status) && fields.has('location') && request.redirect !== 'manual';
+          const drop = follow || request.method === 'HEAD' || empty.has(head.status);
+          const body = drop ? null : new ReadableStream({
+            start(controller) {
+              const first = decode(head.body);
+              if (first.length) controller.enqueue(first);
+              if (head.done) controller.close();
+              else stream = controller;
+            },
+            cancel() {
+              if (runs.has(id)) close();
+            },
+          });
+          response = new Response(body, { status: head.status, statusText: head.statusText, headers: fields });
+        } catch (error) {
+          close();
+          return reject(new TypeError(error.message));
+        }
+        if (head.done) finish();
+        url.hash = '';
+        Object.defineProperty(response, 'url', { value: url.href });
+        if (!follow) return resolve(response);
+        try {
+          resolve(redirect(request, payload, head.status, response.headers.get('location'), hops));
+        } catch (error) {
+          reject(error);
+        }
+      },
+      chunk(message) {
+        if (typeof message.error === 'string') {
+          finish();
+          if (stream) stream.error(new TypeError(message.error));
+          return;
+        }
+        const bytes = decode(message.body);
+        if (stream && bytes.length) stream.enqueue(bytes);
+        if (!message.done) return;
+        finish();
+        if (stream) stream.close();
+      },
+    });
+    post({
+      type: 'slicc-cgi',
+      id,
+      request: {
+        method: request.method,
+        path: url.pathname.slice(base.pathname.length),
+        query: url.search.slice(1),
+        headers: [...headers],
+        body: payload && payload.byteLength ? encode(new Uint8Array(payload)) : null,
+      },
+    });
+  });
+  window.fetch = function fetch(input, init) {
+    return send(input, init, 0);
+  };
+  const formOf = (form, submitter) => {
+    const own = (name) => !!submitter && submitter.hasAttribute('form' + name);
+    return {
+      action: (own('action') ? submitter.getAttribute('formaction') : form.getAttribute('action')) || '',
+      method: own('method') ? submitter.formMethod : form.method,
+      enctype: own('enctype') ? submitter.formEnctype : form.enctype,
+    };
+  };
+  const submitted = (form, submitter) => {
+    const { action, method, enctype } = formOf(form, submitter);
+    if (!action || !scope(action)) return;
+    const url = new URL(action, document.baseURI);
+    const data = new FormData(form, submitter || null);
+    const entries = [...data].map(([name, value]) => [name, typeof value === 'string' ? value : value.name]);
+    const init = { method: method === 'post' ? 'POST' : 'GET', redirect: 'manual', headers: {} };
+    if (init.method === 'GET') url.search = new URLSearchParams(entries).toString();
+    else if (enctype === 'multipart/form-data') init.body = data;
+    else if (enctype === 'text/plain') {
+      init.body = entries.map(([name, value]) => name + '=' + value + '\\r\\n').join('');
+      init.headers['content-type'] = 'text/plain';
+    } else {
+      init.body = new URLSearchParams(entries).toString();
+      init.headers['content-type'] = 'application/x-www-form-urlencoded';
+    }
+    const tell = (detail) => form.dispatchEvent(new CustomEvent('slicc-cgi', { bubbles: true, cancelable: true, detail }));
+    send(url.href, init, 0).then(
+      (response) => {
+        if (tell({ response }) && response.headers.has('location')) post({ type: 'slicc-reload' });
+      },
+      (error) => tell({ error }),
+    );
+  };
+  const copies = new WeakSet();
+  addEventListener('submit', (event) => {
+    if (copies.has(event)) return;
+    const form = event.composedPath()[0];
+    if (!(form instanceof HTMLFormElement) || formOf(form, event.submitter).method === 'dialog') return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    const copy = new SubmitEvent('submit', { bubbles: true, cancelable: true, submitter: event.submitter });
+    copies.add(copy);
+    if (form.dispatchEvent(copy)) submitted(form, event.submitter);
+  }, true);
+  const submit = HTMLFormElement.prototype.submit;
+  HTMLFormElement.prototype.submit = function () {
+    if (formOf(this, null).method === 'dialog') return submit.call(this);
+    submitted(this, null);
+  };
   const size = () => {
     const style = getComputedStyle(document.body);
     post({ type: 'slicc-size', height: Math.ceil(document.body.offsetHeight + parseFloat(style.marginTop) + parseFloat(style.marginBottom)) });
@@ -56332,12 +56524,47 @@ async function frameFonts(files, base) {
     (font) => Boolean(font.data)
   );
 }
+var cgiMethods = /* @__PURE__ */ new Set([
+  "cgi",
+  "cgiRead",
+  "cgiClose"
+]);
 var sprinkleMethods = /* @__PURE__ */ new Set([
   "readFile",
   "exists",
   "getState",
-  "setState"
+  "setState",
+  ...cgiMethods
 ]);
+var field2 = (value) => typeof value === "string" ? value : "";
+function cgiRequest(value) {
+  const given = value ?? {};
+  const headers = (Array.isArray(given.headers) ? given.headers : []).filter(
+    (pair) => Array.isArray(pair) && typeof pair[0] === "string" && typeof pair[1] === "string"
+  ).map(([name, text4]) => [name, text4]);
+  return {
+    method: field2(given.method) || "GET",
+    path: field2(given.path),
+    query: field2(given.query),
+    headers,
+    body: field2(given.body) || null
+  };
+}
+function cgiRefusal(status2, text4) {
+  return {
+    status: status2,
+    statusText: status2 === 403 ? "Forbidden" : "Not Found",
+    headers: [["Content-Type", "text/plain; charset=utf-8"]],
+    body: btoa(`${text4}
+`),
+    done: true,
+    stream: null
+  };
+}
+var cgiGuest = "A guest seat has no cgi-bin/.";
+var cgiReadOnly = "This sprinkle is read-only here, so its cgi-bin/ only answers GET and HEAD.";
+var cgiMissing = "This sprinkle has no cgi-bin/ here.";
+var failure2 = (error) => error instanceof Error ? error.message : String(error);
 var grip = w`<svg class="grip" viewBox="0 0 8 14" width="8" height="14" aria-hidden="true">${[2, 7, 12].flatMap((y8) => [2, 6].map((x5) => w`<circle cx=${x5} cy=${y8} r="1.25"></circle>`))}</svg>`;
 var plainId = (id) => id.replace(/^cone:/, "");
 var SliccSprinkle = class extends ThemedElement {
@@ -56477,8 +56704,75 @@ var SliccSprinkle = class extends ThemedElement {
       this.height = data.height;
     } else if (data.type === "slicc-call") {
       await this.#call(source, data);
+    } else if (data.type === "slicc-cgi") {
+      await this.#cgi(source, data);
+    } else if (data.type === "slicc-cgi-close") {
+      this.#close(data.id);
+    } else if (data.type === "slicc-reload") {
+      this.#reload();
     }
   };
+  #runs = /* @__PURE__ */ new Map();
+  #refusal(method) {
+    if (this.model?.seat) return cgiRefusal(403, cgiGuest);
+    const reading = ["GET", "HEAD"].includes(method.toUpperCase());
+    if (!reading && this.#readOnly()) return cgiRefusal(403, cgiReadOnly);
+    return void 0;
+  }
+  async #cgi(source, data) {
+    if (typeof data.id !== "string") return;
+    const id = data.id;
+    const post2 = (message) => source.postMessage({ ...message, id }, "*");
+    const request2 = cgiRequest(data.request);
+    const port = this.model?.sprinkles;
+    const call = port?.call?.bind(port);
+    const refused3 = this.#refusal(request2.method);
+    if (refused3 || !call)
+      return post2({ type: "slicc-cgi-head", head: refused3 ?? cgiRefusal(404, cgiMissing) });
+    const run = { call, sprinkle: this.sprinkle, stream: null, closed: false };
+    this.#runs.set(id, run);
+    let headed = false;
+    try {
+      const head = await call(run.sprinkle, "cgi", [request2]);
+      let done2 = head.done || !head.stream;
+      run.stream = done2 ? null : head.stream;
+      if (run.closed) return this.#shut(run);
+      headed = true;
+      const { status: status2, statusText, headers, body: body2 } = head;
+      post2({ type: "slicc-cgi-head", head: { status: status2, statusText, headers, body: body2, done: done2 } });
+      while (!done2) {
+        const chunk = await call(run.sprinkle, "cgiRead", [run.stream]);
+        if (run.closed) return;
+        done2 = chunk.done;
+        post2({ type: "slicc-cgi-chunk", body: chunk.body, done: done2 });
+      }
+    } catch (error) {
+      if (!run.closed)
+        post2({ type: headed ? "slicc-cgi-chunk" : "slicc-cgi-head", error: failure2(error) });
+    } finally {
+      if (this.#runs.get(id) === run) this.#runs.delete(id);
+    }
+  }
+  #close(id) {
+    const run = typeof id === "string" ? this.#runs.get(id) : void 0;
+    if (!run) return;
+    this.#runs.delete(id);
+    this.#shut(run);
+  }
+  #shut(run) {
+    run.closed = true;
+    if (run.stream) run.call(run.sprinkle, "cgiClose", [run.stream]).catch(() => void 0);
+  }
+  #closeAll() {
+    for (const run of this.#runs.values()) this.#shut(run);
+    this.#runs.clear();
+  }
+  #reload() {
+    this.#closeAll();
+    this.#frame = { key: "", doc: "" };
+    this.#mounts++;
+    this.requestUpdate();
+  }
   #readOnly() {
     return this.readonly || !!this.model?.seat || this.#frozen() || !!watchOnly(this.model);
   }
@@ -56500,6 +56794,7 @@ var SliccSprinkle = class extends ThemedElement {
   async #call(source, data) {
     const port = this.model?.sprinkles;
     if (!port?.call || typeof data.method !== "string" || !sprinkleMethods.has(data.method)) return;
+    if (cgiMethods.has(data.method)) return;
     const method = data.method;
     if (method === "setState" && this.#readOnly()) {
       source.postMessage({ type: "slicc-result", id: data.id, error: "read-only" }, "*");
@@ -56556,6 +56851,7 @@ var SliccSprinkle = class extends ThemedElement {
     return [
       ...super.subscribe(model),
       () => globalThis.removeEventListener("message", this.#message),
+      () => this.#closeAll(),
       model.sprinkles.on("sprinkles", () => this.requestUpdate()),
       this.#dips.on("change", () => this.requestUpdate()),
       ...onWatch(model, () => this.requestUpdate())
@@ -56609,7 +56905,7 @@ ${data.html}`;
     const style2 = `color-scheme:${this.color};${this.inline ? `height:${this.height}px;` : ""}`;
     const frame = b`${i23(
       this.#mounts,
-      b`<iframe title=${data.title} sandbox="allow-scripts" ?inert=${watch2} style=${style2} .srcdoc=${this.#document(data, state2)}></iframe>`
+      b`<iframe title=${data.title} sandbox="allow-scripts allow-forms" ?inert=${watch2} style=${style2} .srcdoc=${this.#document(data, state2)}></iframe>`
     )}`;
     if (!this.inline)
       return watch2 ? b`<div class="panel"><div class="bar">${caption2}</div>${frame}</div>` : frame;
@@ -56892,10 +57188,10 @@ var SliccValueRequest = class extends ThemedElement {
     const bad = nameProblem(name);
     const value = bad ? "" : take(this.#field("value"));
     const text4 = bad ?? valueProblem(value);
-    const field2 = bad ? "name" : "value";
-    this.problem = text4 ? { id: request2.id, text: text4, field: field2 } : null;
+    const field3 = bad ? "name" : "value";
+    this.problem = text4 ? { id: request2.id, text: text4, field: field3 } : null;
     if (text4) {
-      void this.updateComplete.then(() => this.#field(field2)?.focus());
+      void this.updateComplete.then(() => this.#field(field3)?.focus());
       return;
     }
     this.busy = true;
@@ -56905,8 +57201,8 @@ var SliccValueRequest = class extends ThemedElement {
       this.#done.add(request2.id);
     } catch (error) {
       if (this.#mine(vault)) {
-        const field3 = fieldOf(error, "value");
-        this.problem = { id: request2.id, text: failureText(error), ...field3 ? { field: field3 } : {} };
+        const field4 = fieldOf(error, "value");
+        this.problem = { id: request2.id, text: failureText(error), ...field4 ? { field: field4 } : {} };
       }
     } finally {
       if (this.model?.vault === vault) this.busy = false;
@@ -56915,8 +57211,8 @@ var SliccValueRequest = class extends ThemedElement {
   #typed() {
     if (this.problem?.field) this.problem = { id: this.problem.id, text: this.problem.text };
   }
-  #aria(field2, problem) {
-    const bad = problem?.field === field2;
+  #aria(field3, problem) {
+    const bad = problem?.field === field3;
     return { invalid: bad ? "true" : A, described: bad ? "error-request" : A };
   }
   async cancelRequest(request2) {
@@ -56987,7 +57283,7 @@ var SliccValueRequest = class extends ThemedElement {
     const shown4 = this.problem?.id === request2.id ? this.problem : null;
     const problem = shown4?.text ?? "";
     const name = this.#aria("name", shown4);
-    const field2 = this.#aria("value", shown4);
+    const field3 = this.#aria("value", shown4);
     return i23(
       request2.id,
       b`<dialog role="alertdialog" aria-labelledby="title" aria-describedby="asked" data-request=${request2.id} @cancel=${(event2) => {
@@ -57003,7 +57299,7 @@ var SliccValueRequest = class extends ThemedElement {
         const input = event2.currentTarget;
         input.value = input.value.toUpperCase();
       }} /></label>`}
-                  <label class="field"><span>Value</span><input type="password" autocomplete="off" spellcheck="false" data-field="value" aria-invalid=${field2.invalid} aria-describedby=${field2.described} /></label>
+                  <label class="field"><span>Value</span><input type="password" autocomplete="off" spellcheck="false" data-field="value" aria-invalid=${field3.invalid} aria-describedby=${field3.described} /></label>
                 </div>` : A}
           ${locked ? this.#unlock(vault) : A}
           ${problem ? b`<p class="problem" role="alert" id="error-request" data-error><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${problem}</span></p>` : A}
@@ -71102,10 +71398,10 @@ var ShellManager = class {
     this._shellElement.remove();
   }
 };
-function logFailedPopout(failure2) {
-  if (failure2.error) console.error("dockview: failed to create popout.", failure2.error);
-  else if (failure2.reason === "blocked") console.error("dockview: failed to create popout. perhaps you need to allow pop-ups for this website");
-  else console.error(`dockview: failed to create popout (${failure2.reason}).`);
+function logFailedPopout(failure3) {
+  if (failure3.error) console.error("dockview: failed to create popout.", failure3.error);
+  else if (failure3.reason === "blocked") console.error("dockview: failed to create popout. perhaps you need to allow pop-ups for this website");
+  else console.error(`dockview: failed to create popout (${failure3.reason}).`);
 }
 function buildTabGroupColorPalette(options2) {
   var _options$tabGroupColo;
@@ -71936,10 +72232,10 @@ var DockviewComponent = class extends BaseGrid {
         return false;
       }
       if (_window.isDisposed) {
-        const failure2 = _window.failure;
-        if (failure2 && !this.isDisposed) {
-          logFailedPopout(failure2);
-          this._onDidOpenPopoutWindowFail.fire(failure2);
+        const failure3 = _window.failure;
+        if (failure3 && !this.isDisposed) {
+          logFailedPopout(failure3);
+          this._onDidOpenPopoutWindowFail.fire(failure3);
         }
         return false;
       }
@@ -72132,10 +72428,10 @@ var DockviewComponent = class extends BaseGrid {
   * render nothing and later crash clear()/remove().
   */
   handleBlockedPopout(params) {
-    const { group, referenceGroup, options: options2, popoutWindowDisposable, failure: failure2 } = params;
-    logFailedPopout(failure2);
+    const { group, referenceGroup, options: options2, popoutWindowDisposable, failure: failure3 } = params;
+    logFailedPopout(failure3);
     popoutWindowDisposable.dispose();
-    this._onDidOpenPopoutWindowFail.fire(failure2);
+    this._onDidOpenPopoutWindowFail.fire(failure3);
     if (options2 === null || options2 === void 0 ? void 0 : options2.overridePopoutGridview) {
       const blockedGridview = options2.overridePopoutGridview;
       const members = this.groups.filter((candidate) => blockedGridview.element.contains(candidate.element));