@ai-ecoverse/slicc-spectrum 1.46.1 → 1.47.1

package/dist/slicc-ui.js

@@ -10783,6 +10783,24 @@ var o55 = class extends a10 {
 };
 e25("swc-icon-copy", o55);
 
+// node_modules/@adobe/spectrum-wc-icons/dist/InfoCircle.js
+function e82() {
+  return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M10 18.75c-4.825 0-8.75-3.925-8.75-8.75S5.175 1.25 10 1.25s8.75 3.925 8.75 8.75-3.925 8.75-8.75 8.75m0-16c-3.998 0-7.25 3.252-7.25 7.25s3.252 7.25 7.25 7.25 7.25-3.252 7.25-7.25S13.998 2.75 10 2.75"/><path fill="var(--swc-icon-color, currentColor)" d="M10 5.26a.9.9 0 0 1 .627.229c.33.365.33.921 0 1.286a.87.87 0 0 1-.626.235.85.85 0 0 1-.633-.248.86.86 0 0 1-.242-.627.88.88 0 0 1 .228-.64A.86.86 0 0 1 10 5.26m0 9.803a.75.75 0 0 1-.75-.75V9.478a.75.75 0 0 1 1.5 0v4.835a.75.75 0 0 1-.75.75"/></svg>';
+}
+
+// node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-info-circle.js
+var o56 = class extends a10 {
+  static get styles() {
+    return [t40];
+  }
+  render() {
+    return b`
+      <span class="swc-Icon">${o16(e82())}</span>
+    `;
+  }
+};
+e25("swc-icon-info-circle", o56);
+
 // node_modules/@adobe/spectrum-wc/dist/link.css
 var link_default = '/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the "License");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n * Standalone link presentation for native `<a href>` elements.\n *\n * Default anchor appearance inside `.swc-Typography--prose` and\n * `.swc-Typography--links` ships with `typography.css` (generated). Import this\n * stylesheet when authors need explicit BEM modifiers on anchors.\n *\n */\n\n.swc-Link {\n  inline-size: -moz-fit-content;\n  inline-size: fit-content;\n  font-family: var(--swc-sans-font-family-stack);\n  font-size: var(--swc-font-size-100);\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1.30;\n  color: var(--swc-link-text-color-default, var(--swc-accent-color-900));\n  -webkit-text-decoration: underline;\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-underline-offset: 1px;\n  transition: color 130ms ease-in-out;\n\n  &:hover {\n    color: var(--swc-link-text-color-hover, var(--swc-accent-color-1000));\n  }\n\n  &:active {\n    color: var(--swc-link-text-color-down, var(--swc-accent-color-1000));\n  }\n\n  &:focus-visible {\n    color: var(--swc-link-text-color-focus, var(--swc-accent-color-1000));\n    border-radius: 4px;\n    outline: 2px solid var(--swc-link-focus-indicator-color, var(--swc-blue-800));\n    outline-offset: 2px;\n  }\n\n  &:lang(ja),\n  &:lang(zh),\n  &:lang(ko) {\n    line-height: 1.50;\n  }\n}\n\n.swc-Link--standalone {\n  font-weight: 500;\n}\n\n.swc-Link--secondary {\n  --swc-link-text-color-default: var(--swc-gray-800);\n  --swc-link-text-color-hover: var(--swc-gray-900);\n  --swc-link-text-color-down: var(--swc-gray-900);\n  --swc-link-text-color-focus: var(--swc-gray-900);\n}\n\n.swc-Link--staticWhite {\n  --swc-link-text-color-default: var(--swc-white);\n  --swc-link-text-color-hover: var(--swc-white);\n  --swc-link-text-color-down: var(--swc-white);\n  --swc-link-text-color-focus: var(--swc-white);\n  --swc-link-focus-indicator-color: var(--swc-white);\n}\n\n.swc-Link--staticBlack {\n  --swc-link-text-color-default: var(--swc-black);\n  --swc-link-text-color-hover: var(--swc-black);\n  --swc-link-text-color-down: var(--swc-black);\n  --swc-link-text-color-focus: var(--swc-black);\n  --swc-link-focus-indicator-color: var(--swc-black);\n}\n\n.swc-Link--quiet.swc-Link--standalone {\n  -webkit-text-decoration: none;\n  text-decoration: none;\n}\n\n.swc-Link--quiet.swc-Link--standalone:hover {\n  -webkit-text-decoration: underline;\n  text-decoration: underline;\n}\n';
 
@@ -10871,12 +10889,55 @@ function exitNodeValue(tailnet) {
   if (tailnet.autoExitNode) return "auto";
   return tailnet.exitNodes?.find((node) => node.name === tailnet.exitNode)?.id ?? "none";
 }
+var linkStates = {
+  connecting: ["info", "Connecting"],
+  connected: ["positive", "Connected"],
+  reconnecting: ["notice", "Reconnecting"]
+};
+function linksSummary(links) {
+  if (links.permission) return "permission";
+  if (!links.devices.length) return "none";
+  if (links.devices.some((device) => device.state === "reconnecting")) return "reconnecting";
+  if (links.devices.some((device) => device.state === "connecting")) return "connecting";
+  return "linked";
+}
+function linksLight(links) {
+  const summary = linksSummary(links);
+  if (summary === "permission") return ["notice", "Needs permission"];
+  if (summary === "none") return ["neutral", "None"];
+  if (summary === "linked") return ["positive", `${links.devices.length} linked`];
+  return linkStates[summary];
+}
+function exitValue(exit) {
+  if (!exit) return "none";
+  return exit.kind === "tailnet" ? `tailnet:${exit.node}` : `link:${exit.id}`;
+}
+function parseExit(value) {
+  if (value.startsWith("tailnet:")) return { kind: "tailnet", node: value.slice(8) };
+  if (value.startsWith("link:")) return { kind: "link", id: value.slice(5) };
+  return null;
+}
+function unlinkBody(device, isExit) {
+  const body4 = device.mode === "local" ? "It disconnects until this page reloads." : "It disconnects now. To link it again, run the join command on that computer.";
+  return isExit ? `${body4} Internet traffic goes directly again.` : body4;
+}
 var wholeWeb = /* @__PURE__ */ new Set([
   "proxy",
   "extension",
-  "tailnet"
+  "tailnet",
+  "link"
 ]);
+function routeOf(status2) {
+  return status2.exit?.kind === "link" ? "link" : status2.route;
+}
+function linkLine(status2, id) {
+  const device = status2.links?.devices.find((item2) => item2.id === id);
+  if (!device) return "Waiting for a linked device that isn\u2019t connected.";
+  if (device.state !== "connected") return `Waiting for the linked device ${device.name}.`;
+  return device.policy ? `Through the linked device ${device.name}, which reaches ${device.policy}.` : `Through the linked device ${device.name}.`;
+}
 function routeLine(status2) {
+  if (status2.exit?.kind === "link") return linkLine(status2, status2.exit.id);
   const node = status2.route === "tailnet" ? status2.tailnet?.exitNode : null;
   return node ? `Through the Tailscale exit node ${node}, which reaches every site.` : routes[status2.route ?? "none"];
 }
@@ -10912,7 +10973,8 @@ var SliccNetwork = class extends ModelElement {
     error: { state: true },
     busy: { state: true },
     tailnetError: { state: true },
-    tailnetCopied: { state: true }
+    tailnetCopied: { state: true },
+    linksError: { state: true }
   };
   constructor() {
     super();
@@ -10923,6 +10985,7 @@ var SliccNetwork = class extends ModelElement {
     this.busy = "";
     this.tailnetError = "";
     this.tailnetCopied = "";
+    this.linksError = "";
   }
   static styles = [
     r(link_default),
@@ -11023,6 +11086,62 @@ var SliccNetwork = class extends ModelElement {
       .node dd {
         margin: 0;
       }
+      .node.stacked {
+        grid-template-columns: minmax(0, 1fr);
+      }
+      .node.stacked dd + dt {
+        margin-block-start: var(--swc-spacing-100);
+      }
+      .info {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--swc-spacing-100);
+        padding: var(--swc-spacing-200);
+        border-radius: var(--swc-corner-radius-medium-default);
+        background: var(--swc-informative-subtle-background-color-default);
+        --swc-icon-color: var(--swc-informative-visual-color);
+      }
+      .info swc-icon-info-circle {
+        flex: none;
+        margin-block-start: var(--swc-spacing-50);
+      }
+      .banner {
+        display: grid;
+        gap: var(--swc-spacing-100);
+      }
+      li.device {
+        align-items: center;
+        gap: var(--swc-spacing-75) var(--swc-spacing-200);
+        padding: var(--swc-spacing-200) 0;
+      }
+      .device > :not(.who, swc-button) {
+        grid-column: 1 / -1;
+      }
+      .who {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--swc-spacing-75) var(--swc-spacing-200);
+        min-width: 0;
+      }
+      .who .name {
+        min-width: 0;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-weight: var(--swc-bold-font-weight);
+      }
+      .where {
+        display: grid;
+        min-width: 0;
+        font-size: var(--swc-font-size-75);
+        color: var(--swc-neutral-subdued-content-color-default);
+        overflow-wrap: anywhere;
+      }
+      .where code {
+        font-family: var(--swc-code-font-family-stack);
+      }
       .key {
         display: flex;
         flex-wrap: wrap;
@@ -11108,6 +11227,7 @@ var SliccNetwork = class extends ModelElement {
   subscribe(model) {
     this.error = "";
     this.tailnetError = "";
+    this.linksError = "";
     return model.network ? [model.network.on("network", () => this.requestUpdate())] : [];
   }
   focus() {
@@ -11131,26 +11251,29 @@ var SliccNetwork = class extends ModelElement {
     this.copied = done;
     this.uncopied = !done;
   }
-  async #tailnet(action, run2) {
+  async #act(action, run2, area) {
     if (this.busy) return;
     this.busy = action;
-    this.tailnetError = "";
+    this[area] = "";
     try {
       await run2();
     } catch (error) {
-      this.tailnetError = failure(error);
+      this[area] = failure(error);
     } finally {
       this.busy = "";
     }
   }
-  async #copyTailnet(what, value) {
+  #tailnet(action, run2) {
+    return this.#act(action, run2, "tailnetError");
+  }
+  async #copyValue(key2, value, area) {
     try {
       await globalThis.navigator.clipboard.writeText(value);
-      this.tailnetCopied = what;
-      this.tailnetError = "";
+      this.tailnetCopied = key2;
+      this[area] = "";
     } catch {
       this.tailnetCopied = "";
-      this.tailnetError = "Couldn\u2019t copy. Select the text and copy it.";
+      this[area] = "Couldn\u2019t copy. Select the text and copy it.";
     }
   }
   #waiting(action) {
@@ -11181,14 +11304,17 @@ var SliccNetwork = class extends ModelElement {
     });
     if (ok) await this.#tailnet("sign-out", () => port.logoutTailnet?.());
   }
-  #copyRow(what, label, value) {
-    const copied = this.tailnetCopied === what;
+  #copyButton(key2, what, label, value, area) {
+    const copied = this.tailnetCopied === key2;
+    return b`<swc-action-button size="s" quiet data-action=${`copy-${what}`} accessible-label=${copied ? "Copied" : `Copy ${label}`} @click=${() => this.#copyValue(key2, value, area)}>
+      <swc-icon-copy slot="icon"></swc-icon-copy>${copied ? "Copied" : "Copy"}
+    </swc-action-button>`;
+  }
+  #copyRow(what, label, value, area = "tailnetError", spoken = label.toLowerCase()) {
     return b`<dt>${label}</dt>
       <dd class="command" data-copy=${what}>
         <code>${value}</code>
-        <swc-action-button size="s" quiet data-action=${`copy-${what}`} accessible-label=${copied ? "Copied" : `Copy ${label.toLowerCase()}`} @click=${() => this.#copyTailnet(what, value)}>
-          <swc-icon-copy slot="icon"></swc-icon-copy>${copied ? "Copied" : "Copy"}
-        </swc-action-button>
+        ${this.#copyButton(what, what, spoken, value, area)}
       </dd>`;
   }
   #signIn(port, tailnet) {
@@ -11208,7 +11334,12 @@ var SliccNetwork = class extends ModelElement {
             ${this.#copyRow("name", "Name", tailnet.node.name)}
             ${address ? this.#copyRow("address", "Address", address) : A}
           </dl>` : A}
-      ${port.setExitNode && tailnet.exitNodes ? b`<div class="exit">
+      ${port.setExit ? A : this.#tailnetExit(port, status2, tailnet)}
+      ${tailnet.shieldsUp === false ? b`<div class="warning" data-shields="down"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>Shields down: peers on your tailnet can connect to this browser.</span></div>` : tailnet.shieldsUp ? b`<p class="muted" data-shields="up">Shields up: peers can’t connect to this browser.</p>` : A}
+      ${port.logoutTailnet ? b`<div class="actions"><swc-button size="m" variant="secondary" data-action="tailnet-sign-out" ?pending=${this.busy === "sign-out"} ?disabled=${this.#waiting("sign-out")} @click=${() => this.#signOut(port)}>Sign out</swc-button></div>` : A}`;
+  }
+  #tailnetExit(port, status2, tailnet) {
+    return b`${port.setExitNode && tailnet.exitNodes ? b`<div class="exit">
             <span id="exit-node">Exit node</span>
             <sp-picker size="m" label="Exit node" aria-labelledby="exit-node" data-action="exit-node" .value=${l(exitNodeValue(tailnet))} ?pending=${this.busy === "exit"} ?disabled=${this.#waiting("exit")} @change=${(event2) => this.#exit(event2, port)}>
               <sp-menu-item value="none">None</sp-menu-item>
@@ -11216,9 +11347,115 @@ var SliccNetwork = class extends ModelElement {
               ${tailnet.exitNodes.map((node) => b`<sp-menu-item value=${node.id} ?disabled=${!node.online}>${node.name}${node.online ? A : b`<span slot="description">Offline</span>`}</sp-menu-item>`)}
             </sp-picker>
           </div>` : A}
-      <p data-exit=${tailnet.exitNode ? "node" : "none"}>${tailnet.exitNode ? `Internet through the exit node ${tailnet.exitNode}.` : tailnetOnly[status2.route ?? "none"]}</p>
-      ${tailnet.shieldsUp === false ? b`<div class="warning" data-shields="down"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>Shields down: peers on your tailnet can connect to this browser.</span></div>` : tailnet.shieldsUp ? b`<p class="muted" data-shields="up">Shields up: peers can’t connect to this browser.</p>` : A}
-      ${port.logoutTailnet ? b`<div class="actions"><swc-button size="m" variant="secondary" data-action="tailnet-sign-out" ?pending=${this.busy === "sign-out"} ?disabled=${this.#waiting("sign-out")} @click=${() => this.#signOut(port)}>Sign out</swc-button></div>` : A}`;
+      <p data-exit=${tailnet.exitNode ? "node" : "none"}>${tailnet.exitNode ? `Internet through the exit node ${tailnet.exitNode}.` : tailnetOnly[status2.route ?? "none"]}</p>`;
+  }
+  #exitLine(status2) {
+    const exit = status2.exit;
+    if (!exit) return A;
+    if (exit.kind === "tailnet") {
+      const name = status2.tailnet?.exitNodes?.find((node) => node.id === exit.node)?.name;
+      return b`<p data-exit="node">${name ? `Internet through the Tailscale exit node ${name}.` : "Internet through an automatic Tailscale exit node."}</p>`;
+    }
+    const device = status2.links?.devices.find((item2) => item2.id === exit.id);
+    if (device?.state === "connected") {
+      return b`<p data-exit="device">Internet through the linked device ${device.name}.</p>`;
+    }
+    const who = device ? `${device.name} is ${device.state}` : "The linked device isn\u2019t connected";
+    return b`<div class="warning" data-exit="device" data-held><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${who}. Internet traffic waits until it’s connected.</span></div>`;
+  }
+  #exitPicker(port, status2) {
+    const tailnet = status2.tailnet;
+    const nodes = tailnet?.state === "running" ? tailnet.exitNodes ?? [] : [];
+    const devices = (status2.links?.devices ?? []).filter((device) => device.exit);
+    if (!port.setExit || !nodes.length && !devices.length && !status2.exit) return A;
+    const current = exitValue(status2.exit);
+    return b`<div class="exit" data-exit-picker=${status2.exit?.kind ?? "none"}>
+        <span id="exit">Internet traffic</span>
+        <sp-picker size="m" label="Internet traffic" aria-labelledby="exit" data-action="exit" .value=${l(current)} ?pending=${this.busy === "exit"} ?disabled=${this.#waiting("exit")} @change=${(event2) => this.#exitAll(event2, port)}>
+          <sp-menu-item value="none">Directly</sp-menu-item>
+          ${nodes.length ? b`<sp-menu-group data-group="tailnet"><span slot="header">Tailscale</span>
+                <sp-menu-item value="tailnet:auto">Automatic</sp-menu-item>
+                ${nodes.map((node) => b`<sp-menu-item value=${`tailnet:${node.id}`} ?disabled=${!node.online && current !== `tailnet:${node.id}`}>${node.name}${node.online ? A : b`<span slot="description">Offline</span>`}</sp-menu-item>`)}
+              </sp-menu-group>` : A}
+          ${devices.length ? b`<sp-menu-group data-group="links"><span slot="header">Linked devices</span>
+                ${devices.map((device) => b`<sp-menu-item value=${`link:${device.id}`} ?disabled=${device.state !== "connected" && current !== `link:${device.id}`}>${device.name}${device.state === "connected" ? A : b`<span slot="description">${linkStates[device.state][1]}</span>`}</sp-menu-item>`)}
+              </sp-menu-group>` : A}
+        </sp-picker>
+      </div>
+      ${this.#exitLine(status2)}`;
+  }
+  #exitAll(event2, port) {
+    const value = event2.target.value;
+    void this.#act("exit", () => port.setExit?.(parseExit(value)), "error");
+  }
+  async #unlink(port, status2, device) {
+    const isExit = status2.exit?.kind === "link" && status2.exit.id === device.id;
+    const ok = await confirm({
+      title: `Unlink ${device.name}?`,
+      body: unlinkBody(device, isExit),
+      action: "Unlink",
+      variant: "confirmation"
+    });
+    if (ok) await this.#act(`unlink:${device.id}`, () => port.unlink?.(device.id), "linksError");
+  }
+  async #rotate(port) {
+    const ok = await confirm({
+      title: "Make a new join URL?",
+      body: "Linked devices stay linked. Anyone with the old URL can\u2019t link anymore.",
+      action: "New URL",
+      variant: "confirmation"
+    });
+    if (ok) await this.#act("rotate", () => port.rotateJoinUrl?.(), "linksError");
+  }
+  #device(port, status2, device) {
+    const [variant, label] = linkStates[device.state];
+    const isExit = status2.exit?.kind === "link" && status2.exit.id === device.id;
+    const action = `unlink:${device.id}`;
+    return b`<li class="device" data-device=${device.id} data-state=${device.state} data-mode=${device.mode}>
+      <div class="who">
+        <span class="name" title=${device.name}>${device.name}</span>
+        <swc-status-light size="s" variant=${variant}>${label}</swc-status-light>
+        ${isExit ? b`<swc-badge size="s" variant="accent" subtle data-exit-badge>Exit</swc-badge>` : A}
+      </div>
+      ${port.unlink ? b`<swc-button size="s" variant="secondary" fill-style="outline" data-action="unlink" ?pending=${this.busy === action} ?disabled=${this.#waiting(action)} @click=${() => this.#unlink(port, status2, device)}>Unlink</swc-button>` : A}
+      <span class="where"><code>${device.host}</code><span><code>${device.address}</code> · ${device.mode === "local" ? "This computer" : "Remote"}</span></span>
+      ${device.policy ? b`<span class="muted" data-policy>Reaches ${device.policy}.</span>` : A}
+      ${device.offers.includes("ssh") ? b`<div class="command" data-copy="ssh"><code>ssh ${device.host}</code>${this.#copyButton(`ssh:${device.id}`, "ssh", "ssh command", `ssh ${device.host}`, "linksError")}</div>` : A}
+    </li>`;
+  }
+  #join(port, links) {
+    const ready = links.joinCommand || links.joinUrl;
+    return b`<p>Link a slicc CLI on another computer, or on this one, to reach its network, ssh into it, or send internet traffic through it.</p>
+      ${ready ? b`<p>Run this on that computer:</p>
+            <dl class="node stacked" data-join="ready">
+              ${links.joinCommand ? this.#copyRow("join-command", "Command", links.joinCommand, "linksError", "command") : A}
+              ${links.joinUrl ? this.#copyRow("join-url", "Join URL", links.joinUrl, "linksError", "join URL") : A}
+            </dl>
+            ${port.rotateJoinUrl && links.joinUrl ? b`<div class="actions"><swc-button size="s" variant="secondary" fill-style="outline" data-action="rotate-join-url" ?pending=${this.busy === "rotate"} ?disabled=${this.#waiting("rotate")} @click=${() => this.#rotate(port)}>New join URL</swc-button></div>` : A}` : b`<p class="muted" data-join="preparing">Preparing a join URL…</p>`}`;
+  }
+  #permission(port, links) {
+    if (links.permission === "prompt") {
+      return b`<div class="info" data-link-permission="prompt"><swc-icon-info-circle size="s" aria-hidden="true"></swc-icon-info-circle><span>A device is waiting to link. Chrome is asking whether this page may reach devices on your local network. Choose Allow.</span></div>`;
+    }
+    if (links.permission === "denied") {
+      return b`<div class="warning" data-link-permission="denied"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><div class="banner"><span>Chrome blocked local network access, so devices can’t link. Allow it in this site’s settings, then try again.</span>${port.retryLinks ? b`<div class="actions"><swc-button size="s" variant="secondary" fill-style="outline" data-action="retry-links" ?pending=${this.busy === "retry-links"} ?disabled=${this.#waiting("retry-links")} @click=${() => this.#act("retry-links", () => port.retryLinks?.(), "linksError")}>Try again</swc-button></div>` : A}</div></div>`;
+    }
+    return A;
+  }
+  #linksSection(port, status2) {
+    const links = status2.links;
+    if (!links) return A;
+    const [variant, label] = linksLight(links);
+    return b`<section aria-labelledby="links" data-links=${linksSummary(links)}>
+      <div class="head">
+        <h2 id="links">Linked devices</h2>
+        <swc-status-light variant=${variant}>${label}</swc-status-light>
+      </div>
+      ${this.#permission(port, links)}
+      ${links.devices.length ? b`<ul aria-labelledby="links">${links.devices.map((device) => this.#device(port, status2, device))}</ul>
+            <details><summary>Link another device</summary><div>${this.#join(port, links)}</div></details>` : this.#join(port, links)}
+      ${this.linksError ? b`<div class="error" role="alert" data-error="links"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${this.linksError}</span></div>` : A}
+    </section>`;
   }
   #exit(event2, port) {
     const value = event2.target.value;
@@ -11256,17 +11493,18 @@ var SliccNetwork = class extends ModelElement {
       ${this.tailnetError ? b`<div class="error" role="alert" data-error="tailnet-action"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${this.tailnetError}</span></div>` : A}
     </section>`;
   }
-  #state(status2) {
+  #state(port, status2) {
     const [variant, label] = networkHealth[status2.health];
     return b`<section aria-labelledby="state">
       <div class="head">
         <h2 id="state">Connection</h2>
         <swc-status-light variant=${variant} data-health=${status2.health}>${label}</swc-status-light>
       </div>
-      <p data-route=${status2.route ?? "none"}>${routeLine(status2)}</p>
+      <p data-route=${routeOf(status2) ?? "none"}>${routeLine(status2)}</p>
       ${status2.detail ? b`<p class="detail">${status2.detail}</p>` : A}
+      ${this.#exitPicker(port, status2)}
       ${status2.browser ? b`<p data-browser=${automationOf(status2.browser)}>${automation[automationOf(status2.browser)]}${status2.browser.detail ? b` <span class="detail">${status2.browser.detail}</span>` : A}</p>` : A}
-      ${this.model?.network?.check ? b`<div class="actions"><swc-button size="m" variant="secondary" data-action="check" ?pending=${this.checking} @click=${() => this.check()}>Check again</swc-button></div>` : A}
+      ${port.check ? b`<div class="actions"><swc-button size="m" variant="secondary" data-action="check" ?pending=${this.checking} @click=${() => this.check()}>Check again</swc-button></div>` : A}
       ${this.error ? b`<div class="error" role="alert"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${this.error}</span></div>` : A}
     </section>`;
   }
@@ -11280,7 +11518,7 @@ var SliccNetwork = class extends ModelElement {
     });
   }
   #whole(status2) {
-    if (wholeWeb.has(status2.route)) {
+    if (wholeWeb.has(routeOf(status2))) {
       return b`<details><summary>Other ways to reach the whole web</summary><div>${this.#ways(status2)}</div></details>`;
     }
     return b`<section aria-labelledby="whole">
@@ -11309,8 +11547,9 @@ var SliccNetwork = class extends ModelElement {
     }
     const status2 = port.status();
     return b`<div class="page" tabindex="-1">
-      ${this.#state(status2)}
+      ${this.#state(port, status2)}
       ${this.#tailnetSection(port, status2)}
+      ${this.#linksSection(port, status2)}
       ${this.#whole(status2)}
       ${this.#failures(status2)}
     </div>`;
@@ -14809,7 +15048,7 @@ ${swc_default}`));
 var t45 = i`:host{display:block}*{box-sizing:border-box}.swc-Divider{--_swc-divider-thickness: var(--swc-divider-thickness, 2px);inline-size:100%;block-size:var(--_swc-divider-thickness);background-color:var(--swc-divider-background-color, var(--swc-gray-200));border-radius:var(--_swc-divider-thickness)}:host([size=\"s\"]){--swc-divider-thickness: 1px}:host([size=\"l\"]){--swc-divider-thickness: 4px;--swc-divider-background-color: var(--swc-gray-800)}.swc-Divider:not(.swc-Divider--vertical){min-inline-size:min(100%,200px)}:host([vertical]){align-self:stretch}.swc-Divider--vertical{inline-size:var(--_swc-divider-thickness);block-size:100%;min-block-size:min(100%,200px)}.swc-Divider--staticWhite{--swc-divider-background-color: rgba(255, 255, 255, .14)}.swc-Divider--staticWhite:where(.swc-Divider--sizeL){--swc-divider-background-color: rgba(255, 255, 255, .85)}.swc-Divider--staticBlack{--swc-divider-background-color: rgba(0, 0, 0, .12)}.swc-Divider--staticBlack:where(.swc-Divider--sizeL){--swc-divider-background-color: rgba(0, 0, 0, .84)}@media(forced-colors:active){.swc-Divider{--swc-divider-background-color: CanvasText}}`;
 
 // node_modules/@adobe/spectrum-wc-core/dist/components/divider/Divider.types.js
-var e82 = [
+var e83 = [
   "s",
   "m",
   "l"
@@ -14818,7 +15057,7 @@ var t46 = ["white", "black"];
 
 // node_modules/@adobe/spectrum-wc-core/dist/components/divider/Divider.base.js
 var s10;
-var c18 = class extends i12(i9, { validSizes: e82 }) {
+var c18 = class extends i12(i9, { validSizes: e83 }) {
   constructor(...e116) {
     super(...e116), this.vertical = false;
   }
@@ -14877,7 +15116,7 @@ e25("swc-divider", a13);
 var t47 = i`:host([indeterminate]) .swc-LinearProgress-fill{inline-size:100%;min-inline-size:0;transform-origin:left;transition:none;animation:indeterminate-loop-ltr 1s cubic-bezier(.45,0,.4,1) infinite;will-change:transform;&:dir(rtl){animation-name:indeterminate-loop-rtl}}@keyframes indeterminate-loop-ltr{0%{transform:translate(-70%) scaleX(.7)}to{transform:translate(100%) scaleX(.7)}}@keyframes indeterminate-loop-rtl{0%{transform:translate(100%) scaleX(.7)}to{transform:translate(-70%) scaleX(.7)}}@media(prefers-reduced-motion:reduce){:host([indeterminate]) .swc-LinearProgress-fill{animation-duration:15s;animation-timing-function:linear}}`;
 
 // node_modules/@adobe/spectrum-wc-core/dist/components/progress-bar/ProgressBar.base.js
-var o56 = class extends m3(i12(i9, {
+var o57 = class extends m3(i12(i9, {
   validSizes: s6,
   defaultSize: "m"
 })) {
@@ -14888,10 +15127,10 @@ var o56 = class extends m3(i12(i9, {
 e24([n({
   type: Boolean,
   reflect: true
-})], o56.prototype, "indeterminate", void 0);
+})], o57.prototype, "indeterminate", void 0);
 
 // node_modules/@adobe/spectrum-wc/dist/components/progress-bar/ProgressBar.js
-var o57 = class extends o56 {
+var o58 = class extends o57 {
   static get styles() {
     return [t26, t47];
   }
@@ -14940,13 +15179,13 @@ var o57 = class extends o56 {
 };
 
 // node_modules/@adobe/spectrum-wc/dist/components/progress-bar/swc-progress-bar.js
-e25("swc-progress-bar", o57);
+e25("swc-progress-bar", o58);
 
 // node_modules/@adobe/spectrum-wc/dist/components/progress-circle/progress-circle.js
 var t48 = i`@keyframes swc-fills-rotate{0%{transform:rotate(var(--swc-progress-circle-rotate-start, -90deg))}to{transform:rotate(var(--swc-progress-circle-rotate-end, 270deg))}}@keyframes swc-dashoffset-animation{0%,to{stroke-dashoffset:75px}30%{stroke-dashoffset:var(--swc-progress-circle-dashoffset-30, 20px)}}:host{display:inline-block;align-self:center;justify-self:center;place-self:center}*{box-sizing:border-box}.swc-ProgressCircle{--_swc-progress-circle-size: var(--swc-progress-circle-size, var(--swc-progress-circle-size-medium));--_swc-progress-circle-track-border-color: var(--swc-progress-circle-track-border-color, var(--swc-gray-300));--_swc-progress-circle-fill-border-color: var(--swc-progress-circle-fill-border-color, var(--swc-accent-color-900));--_swc-progress-circle-thickness: var(--swc-progress-circle-thickness, var(--swc-progress-circle-thickness-medium));display:inline-block;position:relative;inline-size:var(--_swc-progress-circle-size);block-size:var(--_swc-progress-circle-size);direction:ltr;transform:translateZ(0)}.swc-ProgressCircle-fill,.swc-ProgressCircle-track{inline-size:var(--_swc-progress-circle-size);block-size:var(--_swc-progress-circle-size)}.swc-ProgressCircle-track{stroke:var(--_swc-progress-circle-track-border-color);stroke-width:var(--_swc-progress-circle-thickness)}.swc-ProgressCircle-fill{stroke:var(--_swc-progress-circle-fill-border-color);stroke-width:var(--_swc-progress-circle-thickness);transform:rotate(-90deg);transform-origin:center}.swc-ProgressCircle--indeterminate .swc-ProgressCircle-fill{transform-origin:center;animation:swc-fills-rotate 1s cubic-bezier(.6,.1,.3,.9) infinite,swc-dashoffset-animation 1s cubic-bezier(.25,.1,.25,1.3) infinite;will-change:transform}:host([size=\"s\"]){--swc-progress-circle-size: var(--swc-progress-circle-size-small);--swc-progress-circle-thickness: var(--swc-progress-circle-thickness-small)}:host([size=\"l\"]){--swc-progress-circle-size: var(--swc-progress-circle-size-large);--swc-progress-circle-thickness: var(--swc-progress-circle-thickness-large)}.swc-ProgressCircle:where(.swc-ProgressCircle--staticWhite){--swc-progress-circle-track-border-color: var(--swc-transparent-white-300);--swc-progress-circle-fill-border-color: var(--swc-transparent-white-900)}.swc-ProgressCircle:where(.swc-ProgressCircle--staticBlack){--swc-progress-circle-track-border-color: var(--swc-transparent-black-300);--swc-progress-circle-fill-border-color: var(--swc-transparent-black-900)}@media(prefers-reduced-motion:reduce){.swc-ProgressCircle--indeterminate .swc-ProgressCircle-fill{--swc-progress-circle-dashoffset-30: 0;--swc-progress-circle-rotate-start: 0deg;--swc-progress-circle-rotate-end: 360deg;animation-duration:15s;animation-timing-function:linear,linear}}@media(forced-colors:active){.swc-ProgressCircle{--swc-progress-circle-fill-border-color: Highlight;@media(prefers-color-scheme:dark){--swc-progress-circle-track-border-color: var(--swc-transparent-white-300)}@media(prefers-color-scheme:light){--swc-progress-circle-track-border-color: var(--swc-transparent-black-300)}}}`;
 
 // node_modules/@adobe/spectrum-wc-core/dist/components/progress-circle/ProgressCircle.types.js
-var e83 = [
+var e84 = [
   "s",
   "m",
   "l"
@@ -14955,7 +15194,7 @@ var t49 = ["white", "black"];
 
 // node_modules/@adobe/spectrum-wc-core/dist/components/progress-circle/ProgressCircle.base.js
 var u17;
-var d13 = class e84 extends i12(i9, { validSizes: e83 }) {
+var d13 = class e85 extends i12(i9, { validSizes: e84 }) {
   constructor(...e116) {
     super(...e116), this.label = "", this.progress = null, this.languageResolver = new i10(this);
   }
@@ -14980,11 +15219,11 @@ var d13 = class e84 extends i12(i9, { validSizes: e83 }) {
     }).format(((e116 = this.progress) == null ? 0 : e116) / 100);
   }
   warnDeprecatedLightDomChildren() {
-    r9(this, e84.hasMeaningfulLightDomChildren(this), `<${this.localName}> no longer has a default slot. Light DOM children are not rendered and are not used for an accessible name. Use the "label" attribute or property, or "aria-label" / "aria-labelledby" on the host instead.`, "https://spectrum-web-components.adobe.com/?path=/docs/components-progress-circle--docs", { level: "deprecation" });
+    r9(this, e85.hasMeaningfulLightDomChildren(this), `<${this.localName}> no longer has a default slot. Light DOM children are not rendered and are not used for an accessible name. Use the "label" attribute or property, or "aria-label" / "aria-labelledby" on the host instead.`, "https://spectrum-web-components.adobe.com/?path=/docs/components-progress-circle--docs", { level: "deprecation" });
   }
   willUpdate(t88) {
     if (t88.has("progress") && this.progress !== null) {
-      let t89 = e84.clampProgress(this.progress);
+      let t89 = e85.clampProgress(this.progress);
       t89 !== this.progress && (this.progress = t89);
     }
     super.willUpdate(t88);
@@ -14993,7 +15232,7 @@ var d13 = class e84 extends i12(i9, { validSizes: e83 }) {
     super.firstUpdated(e116), this.setAttribute("role", "progressbar");
   }
   updated(t88) {
-    if (super.updated(t88), t88.has("progress") && (this.progress !== null && this.progress >= 0 ? (this.setAttribute("aria-valuemin", "0"), this.setAttribute("aria-valuemax", "100"), this.setAttribute("aria-valuenow", String(this.progress)), this.setAttribute("aria-valuetext", this.formatProgress())) : (this.removeAttribute("aria-valuemin"), this.removeAttribute("aria-valuemax"), this.removeAttribute("aria-valuenow"), this.removeAttribute("aria-valuetext"))), this.progress !== null && t88.has(e27) && this.setAttribute("aria-valuetext", this.formatProgress()), t88.has("label") && (this.label.length ? this.setAttribute("aria-label", this.label) : t88.get("label") === this.getAttribute("aria-label") && this.removeAttribute("aria-label")), t88.has("label") && !this.hasAccessibleName() && (this.setAttribute("aria-label", e84.DEFAULT_LABEL), r9(this, true, `<${this.localName}> requires an accessible name. A default label of "${e84.DEFAULT_LABEL}" has been applied, but a more specific label should be provided via:`, "https://spectrum-web-components.adobe.com/?path=/docs/components-progress-circle--docs", {
+    if (super.updated(t88), t88.has("progress") && (this.progress !== null && this.progress >= 0 ? (this.setAttribute("aria-valuemin", "0"), this.setAttribute("aria-valuemax", "100"), this.setAttribute("aria-valuenow", String(this.progress)), this.setAttribute("aria-valuetext", this.formatProgress())) : (this.removeAttribute("aria-valuemin"), this.removeAttribute("aria-valuemax"), this.removeAttribute("aria-valuenow"), this.removeAttribute("aria-valuetext"))), this.progress !== null && t88.has(e27) && this.setAttribute("aria-valuetext", this.formatProgress()), t88.has("label") && (this.label.length ? this.setAttribute("aria-label", this.label) : t88.get("label") === this.getAttribute("aria-label") && this.removeAttribute("aria-label")), t88.has("label") && !this.hasAccessibleName() && (this.setAttribute("aria-label", e85.DEFAULT_LABEL), r9(this, true, `<${this.localName}> requires an accessible name. A default label of "${e85.DEFAULT_LABEL}" has been applied, but a more specific label should be provided via:`, "https://spectrum-web-components.adobe.com/?path=/docs/components-progress-circle--docs", {
       type: "accessibility",
       issues: [
         'value supplied to the "label" attribute, which will be displayed visually as part of the element, or',
@@ -15117,7 +15356,7 @@ e12([n({
 e25("swc-conversation-turn", a14);
 
 // node_modules/@adobe/spectrum-wc/dist/components/ui-icons/ui-icons.types.js
-var e85 = [
+var e86 = [
   50,
   75,
   100,
@@ -15137,7 +15376,7 @@ function n29(e116) {
 }
 function r26(t88, r39) {
   if (!t88) return;
-  let i25 = n29(r39), a22 = e85.filter((e116) => t88[e116] !== void 0);
+  let i25 = n29(r39), a22 = e86.filter((e116) => t88[e116] !== void 0);
   if (a22.length !== 0) return t88[a22.reduce((e116, t89) => Math.abs(t89 - i25) < Math.abs(e116 - i25) ? t89 : e116)];
 }
 
@@ -15761,7 +16000,7 @@ e12([n({
 e25("swc-ui-icon", l16);
 
 // node_modules/@adobe/spectrum-wc/dist/utils/id.js
-function e86(e116) {
+function e87(e116) {
   return `${e116}-${Array.from(crypto.getRandomValues(new Uint8Array(4)), (e117) => `0${(e117 & 255).toString(16)}`.slice(-2)).join("")}`;
 }
 
@@ -15771,7 +16010,7 @@ var t65 = i`:host{display:block}*,*:before,*:after{box-sizing:border-box}.swc-Me
 // node_modules/@adobe/spectrum-wc/dist/patterns/ai-toolkit/message-sources/MessageSources.js
 var c19 = class extends i9 {
   constructor(...e116) {
-    super(...e116), this.panelId = e86("swc-sources-panel"), this.toggleId = e86("swc-message-sources-toggle"), this.sourceLinks = [], this.open = false, this.label = "Sources", this.accessibleLabel = "";
+    super(...e116), this.panelId = e87("swc-sources-panel"), this.toggleId = e87("swc-message-sources-toggle"), this.sourceLinks = [], this.open = false, this.label = "Sources", this.accessibleLabel = "";
   }
   static get styles() {
     return [t65];
@@ -15906,7 +16145,7 @@ var a15 = () => b`
     <circle cx="4" cy="4" r="4" fill="currentColor" />
   </svg>
 `;
-var o58 = () => b`
+var o59 = () => b`
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
     <circle cx="4" cy="4" r="3.5" fill="none" stroke="currentColor" />
   </svg>
@@ -15966,7 +16205,7 @@ var h6 = class extends i9 {
     return this._readLabel();
   }
   constructor() {
-    super(), this._toggleId = e86("swc-response-status-step-toggle"), this._detailId = e86("swc-response-status-step-detail"), this.status = "active", this.open = false, this._hasDescription = false, this._labelText = "", this._overflows = false, this._lastActiveLabel = "", new t2(this, {
+    super(), this._toggleId = e87("swc-response-status-step-toggle"), this._detailId = e87("swc-response-status-step-detail"), this.status = "active", this.open = false, this._hasDescription = false, this._labelText = "", this._overflows = false, this._lastActiveLabel = "", new t2(this, {
       config: {
         attributes: true,
         attributeFilter: ["slot"],
@@ -16049,7 +16288,7 @@ var h6 = class extends i9 {
           class="swc-ResponseStatusStep-icon swc-ResponseStatusStep-icon--active"
           aria-hidden="true"
         >
-          ${o58()}
+          ${o59()}
         </swc-icon>
       `);
   }
@@ -16123,7 +16362,7 @@ e12([n({
 e25("swc-response-status-step", h6);
 
 // node_modules/@adobe/spectrum-wc/dist/patterns/ai-toolkit/pixel-loader/data.js
-function e87(e116, t88) {
+function e88(e116, t88) {
   let n36 = Array.from(new Set(e116.map(([, e117]) => e117))).sort((e117, t89) => t89 - e117), r39 = Array(e116.length).fill(0), i25 = 0;
   return n36.forEach((n37) => {
     let a22 = e116.reduce((e117, t89, r40) => (t89[1] === n37 && e117.push(r40), e117), []);
@@ -16133,7 +16372,7 @@ function e87(e116, t88) {
   }), r39;
 }
 function t68(t88, n36 = {}) {
-  let { staggerInterval: r39 = 2, rowOffset: i25 = 0 } = n36, a22 = e87(t88, r39);
+  let { staggerInterval: r39 = 2, rowOffset: i25 = 0 } = n36, a22 = e88(t88, r39);
   return t88.map(([e116, t89], n37) => ({
     col: e116,
     row: t89 + i25,
@@ -16276,7 +16515,7 @@ var a16 = t68([
   [5, 0],
   [6, 0]
 ], { staggerInterval: 1 });
-var o59 = t68([
+var o60 = t68([
   [6, 6],
   [5, 5],
   [1, 4],
@@ -16831,7 +17070,7 @@ var N = {
   brush: r30,
   eye: i19,
   hourglass: a16,
-  mag: o59,
+  mag: o60,
   crop: s12,
   flower: c21,
   image: l17,
@@ -16922,13 +17161,13 @@ var F = {
 };
 
 // node_modules/@adobe/spectrum-wc/dist/patterns/ai-toolkit/pixel-loader/animation.js
-var e88 = 30;
-var t69 = (t88) => t88 * e88 / 1e3;
+var e89 = 30;
+var t69 = (t88) => t88 * e89 / 1e3;
 var n32 = 13;
 var r31 = 12;
 var i20 = t69(1400);
 var a17 = t69(150);
-var o60 = t69(150);
+var o61 = t69(150);
 var s13 = 0.1;
 var c22 = t69(230);
 var l18 = 0.3;
@@ -16955,7 +17194,7 @@ function v8(e116) {
   return t88 + n32 + i20 + r31;
 }
 function y4(t88) {
-  return v8(t88) / e88 * 1e3;
+  return v8(t88) / e89 * 1e3;
 }
 function b8(e116, t88) {
   return Math.min(1, Math.max(0, e116 / t88));
@@ -17000,7 +17239,7 @@ function S2(e116, t88) {
   }), x3(o87);
 }
 function C3(e116, t88) {
-  let i25 = e116.stagger + n32 - o60, u27 = i25 - a17, d22 = _4(e116), f11 = d22 + c22;
+  let i25 = e116.stagger + n32 - o61, u27 = i25 - a17, d22 = _4(e116), f11 = d22 + c22;
   return x3([
     {
       offset: 0,
@@ -17072,7 +17311,7 @@ function k2(e116) {
   return t88 + E2 + D3 + t88 + E2;
 }
 function A4(t88) {
-  return k2(t88) / e88 * 1e3;
+  return k2(t88) / e89 * 1e3;
 }
 function j2(e116, t88, n36) {
   let r39 = O2(t88), i25 = r39.indexOf(e116.row), a22 = (r39.length - 1) * T4 + E2, o87 = i25 * T4, s19 = a22 + D3 + i25 * T4;
@@ -17111,9 +17350,9 @@ function j2(e116, t88, n36) {
 var M2 = "0 0px";
 
 // node_modules/@adobe/spectrum-wc/dist/patterns/ai-toolkit/pixel-loader/geometry.js
-var e89 = /* @__PURE__ */ new WeakMap();
+var e90 = /* @__PURE__ */ new WeakMap();
 function t70(t88) {
-  let n36 = e89.get(t88);
+  let n36 = e90.get(t88);
   if (n36) return n36;
   let r39 = new Set(t88.map((e116) => `${e116.col},${e116.row}`)), i25 = (e116, t89) => r39.has(`${e116},${t89}`), a22 = t88.map(({ col: e116, row: t89 }) => {
     let n37 = i25(e116 - 1, t89), r40 = i25(e116 + 1, t89), a23 = i25(e116, t89 - 1), o87 = i25(e116, t89 + 1), s19 = i25(e116 - 1, t89 - 1), c27 = i25(e116 + 1, t89 - 1), l24 = i25(e116 + 1, t89 + 1), u27 = i25(e116 - 1, t89 + 1);
@@ -17124,7 +17363,7 @@ function t70(t88) {
       bottomLeft: !n37 && !o87 && !u27
     };
   });
-  return e89.set(t88, a22), a22;
+  return e90.set(t88, a22), a22;
 }
 function n33(e116, t88) {
   return `${e116.topLeft ? t88 : "0"} ${e116.topRight ? t88 : "0"} ${e116.bottomRight ? t88 : "0"} ${e116.bottomLeft ? t88 : "0"}`;
@@ -17136,7 +17375,7 @@ var t71 = i`:host{display:inline-block}*,*:before,*:after{box-sizing:border-box}
 // node_modules/@adobe/spectrum-wc/dist/patterns/ai-toolkit/pixel-loader/PixelLoader.js
 var w4;
 var T5 = "https://spectrum-web-components.adobe.com/?path=/docs/patterns-ai-toolkit-pixel-loader--docs";
-var E3 = class e90 extends i9 {
+var E3 = class e91 extends i9 {
   constructor(...e116) {
     super(...e116), this.icon = "aiLogo", this.paused = false, this.label = "Loading", this._presetIndex = 0, this._animations = [], this._containerCache = null, this._cellElsCache = null, this._ticker = null, this._reducedMotionQuery = null, this._displayedIcon = "aiLogo", this._finishToken = 0, this._handleReducedMotionChange = () => {
       this._syncTicker(), this._playCells();
@@ -17239,8 +17478,8 @@ var E3 = class e90 extends i9 {
       }
     }), this._cancelAnimations();
     let i25 = {
-      duration: e90.FINISH_MS,
-      easing: e90.EASE_FINISH,
+      duration: e91.FINISH_MS,
+      easing: e91.EASE_FINISH,
       fill: "forwards"
     }, a22 = n36.map((e116) => e116.animate([{
       translate: M2,
@@ -17290,7 +17529,7 @@ var E3 = class e90 extends i9 {
         style=${o3({
       "grid-column": String(t88.col + 1),
       "grid-row": String(t88.row + 1),
-      "border-radius": n33(n36, e90.CORNER_RADIUS)
+      "border-radius": n33(n36, e91.CORNER_RADIUS)
     })}
       ></div>
     `;
@@ -17331,12 +17570,12 @@ var y5 = [
   "complete",
   "stopped"
 ];
-var b9 = class e91 extends i9 {
+var b9 = class e92 extends i9 {
   static get styles() {
     return [t72];
   }
   constructor() {
-    super(), this.panelId = e86("swc-response-status-panel"), this._hasSteps = false, this._hasActiveStep = false, this._activeStepLabel = "", this._activeStepEl = null, this._labelSlotText = "", this._displayedLabel = "", this._rollFromLabel = "", this._rollToLabel = "", this._rollActive = false, this._rollEngaged = false, this.status = "active", this.open = false, this.accessibleLabel = "", this.loader = "mega", this._labelRollTimer = null, this._labelRollRaf = null, new t2(this, {
+    super(), this.panelId = e87("swc-response-status-panel"), this._hasSteps = false, this._hasActiveStep = false, this._activeStepLabel = "", this._activeStepEl = null, this._labelSlotText = "", this._displayedLabel = "", this._rollFromLabel = "", this._rollToLabel = "", this._rollActive = false, this._rollEngaged = false, this.status = "active", this.open = false, this.accessibleLabel = "", this.loader = "mega", this._labelRollTimer = null, this._labelRollRaf = null, new t2(this, {
       config: {
         attributes: true,
         attributeFilter: ["status"],
@@ -17454,10 +17693,10 @@ var b9 = class e91 extends i9 {
     if (this._labelSlotText) return this._labelSlotText;
     let t88 = this._resolvedStatus;
     if (t88 === "active") {
-      if (this._showsGenericProcessingLabel) return e91.ACTIVE_STEP_OPEN_LABEL;
+      if (this._showsGenericProcessingLabel) return e92.ACTIVE_STEP_OPEN_LABEL;
       if (this._activeStepLabel) return this._activeStepLabel;
     }
-    return e91.DEFAULT_LABELS[t88];
+    return e92.DEFAULT_LABELS[t88];
   }
   _clearLabelRollTimers() {
     this._labelRollTimer !== null && (window.clearTimeout(this._labelRollTimer), this._labelRollTimer = null), this._labelRollRaf !== null && (window.cancelAnimationFrame(this._labelRollRaf), this._labelRollRaf = null);
@@ -17486,7 +17725,7 @@ var b9 = class e91 extends i9 {
       this._labelRollRaf = window.requestAnimationFrame(() => {
         this._labelRollRaf = null, this._rollEngaged = true, this._labelRollTimer = window.setTimeout(() => {
           this._labelRollTimer = null, this._displayedLabel = this._rollToLabel, this._rollActive = false, this._rollEngaged = false, this._applyLabelRoll();
-        }, e91.LABEL_ROLL_DURATION_MS);
+        }, e92.LABEL_ROLL_DURATION_MS);
       });
     });
   }
@@ -17494,7 +17733,7 @@ var b9 = class e91 extends i9 {
     return this._rollActive ? this._rollToLabel : this._displayedLabel || this._getHeaderLabel();
   }
   _renderLabel() {
-    let t88 = e91.STATUS_LABEL_CLASS;
+    let t88 = e92.STATUS_LABEL_CLASS;
     return this._rollActive ? b`
       <span class="swc-ResponseStatus-headerTrailViewport">
         <span class=${this._rollEngaged ? "swc-ResponseStatus-headerTrailCrossfade swc-ResponseStatus-headerTrailCrossfade--engaged" : "swc-ResponseStatus-headerTrailCrossfade"}>
@@ -17610,7 +17849,7 @@ var b9 = class e91 extends i9 {
     `;
   }
   _renderPanel(t88) {
-    let n36 = t88 && this.open, r39 = this.accessibleLabel || e91.DEFAULT_ACCESSIBLE_LABEL;
+    let n36 = t88 && this.open, r39 = this.accessibleLabel || e92.DEFAULT_ACCESSIBLE_LABEL;
     return b`
       <div
         id=${this.panelId}
@@ -17675,7 +17914,7 @@ var t73 = i`:host{display:block}*,*:before,*:after{box-sizing:border-box}.swc-Su
 // node_modules/@adobe/spectrum-wc/dist/patterns/ai-toolkit/suggestion/SuggestionGroup.js
 var s14 = class extends i9 {
   constructor(...e116) {
-    super(...e116), this.accessibleLabel = "", this._headingId = e86("swc-suggestion-group-heading");
+    super(...e116), this.accessibleLabel = "", this._headingId = e87("swc-suggestion-group-heading");
   }
   static get styles() {
     return [t73];
@@ -17838,148 +18077,148 @@ e12([n({
 e25("swc-user-message", a18);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/Cancel.js
-function e92() {
+function e93() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M16.201 16.166A8.72 8.72 0 0 0 18.75 10c0-4.825-3.925-8.75-8.75-8.75a8.72 8.72 0 0 0-6.166 2.549l-.021.014c-.011.007-.008.015-.014.021A8.72 8.72 0 0 0 1.25 10c0 4.825 3.925 8.75 8.75 8.75a8.72 8.72 0 0 0 6.166-2.549c.006-.006.015-.008.021-.014s.008-.015.014-.021M17.25 10c0 1.73-.61 3.317-1.625 4.565L5.435 4.375A7.2 7.2 0 0 1 10 2.75c3.998 0 7.25 3.252 7.25 7.25m-14.5 0c0-1.73.61-3.317 1.625-4.565l10.19 10.19A7.2 7.2 0 0 1 10 17.25c-3.998 0-7.25-3.252-7.25-7.25"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-cancel.js
-var o61 = class extends a10 {
+var o62 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e92())}</span>
+      <span class="swc-Icon">${o16(e93())}</span>
     `;
   }
 };
-e25("swc-icon-cancel", o61);
+e25("swc-icon-cancel", o62);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/ChevronRight.js
-function e93() {
+function e94() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M7.75 16.465a.748.748 0 0 1-.54-1.27l4.999-5.197-4.986-5.184a.75.75 0 0 1 .02-1.06.75.75 0 0 1 1.06.021L13.79 9.48c.28.29.28.749 0 1.039l-5.5 5.716a.75.75 0 0 1-.54.23"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-chevron-right.js
-var o62 = class extends a10 {
+var o63 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e93())}</span>
+      <span class="swc-Icon">${o16(e94())}</span>
     `;
   }
 };
-e25("swc-icon-chevron-right", o62);
+e25("swc-icon-chevron-right", o63);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/File.js
-function e94() {
+function e95() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M16.341 5.28 12.72 1.66A2.24 2.24 0 0 0 11.13 1H5.25C4.01 1 3 2.01 3 3.25v12.5C3 16.99 4.01 18 5.25 18h9.5c1.24 0 2.25-1.01 2.25-2.25V6.871c0-.592-.24-1.172-.659-1.59m-1.06 1.06c.045.046.073.105.105.16H12.25a.75.75 0 0 1-.75-.75V2.614c.055.032.113.06.159.106zM14.75 16.5h-9.5a.75.75 0 0 1-.75-.75V3.25a.75.75 0 0 1 .75-.75H10v3.25C10 6.99 11.01 8 12.25 8h3.25v7.75a.75.75 0 0 1-.75.75"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-file.js
-var o63 = class extends a10 {
+var o64 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e94())}</span>
+      <span class="swc-Icon">${o16(e95())}</span>
     `;
   }
 };
-e25("swc-icon-file", o63);
+e25("swc-icon-file", o64);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/FileText.js
-function e95() {
+function e96() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="m16.34 5.296-3.62-3.622a2.27 2.27 0 0 0-1.591-.66H5.25A2.255 2.255 0 0 0 3 3.265v12.484c0 1.24 1.01 2.25 2.25 2.25h9.5c1.24 0 2.25-1.01 2.25-2.25V6.887c0-.6-.234-1.166-.66-1.591m-1.06 1.06c.046.047.074.104.106.159H12.25a.75.75 0 0 1-.75-.75V2.628c.055.033.114.06.16.106zm-.53 10.142h-9.5a.75.75 0 0 1-.75-.75V3.265c0-.413.337-.75.75-.75H10v3.25c0 1.24 1.01 2.25 2.25 2.25h3.25v7.733c0 .413-.337.75-.75.75"/><path fill="var(--swc-icon-color, currentColor)" d="M13 11.498H7a.75.75 0 0 1 0-1.5h6a.75.75 0 0 1 0 1.5m0 3H7a.75.75 0 0 1 0-1.5h6a.75.75 0 0 1 0 1.5"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-file-text.js
-var o64 = class extends a10 {
+var o65 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e95())}</span>
+      <span class="swc-Icon">${o16(e96())}</span>
     `;
   }
 };
-e25("swc-icon-file-text", o64);
+e25("swc-icon-file-text", o65);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/Lock.js
-function e96() {
+function e97() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M11.25 11.5a1.251 1.251 0 0 0-2.5 0c0 .403.204.745.5.974v.776a.75.75 0 0 0 1.5 0v-.776c.296-.23.5-.571.5-.974"/><path fill="var(--swc-icon-color, currentColor)" d="M15 7.025V6.5c0-2.757-2.243-5-5-5s-5 2.243-5 5v.525c-1.122.127-2 1.07-2 2.225v6.5C3 16.99 4.01 18 5.25 18h9.5c1.24 0 2.25-1.01 2.25-2.25v-6.5a2.246 2.246 0 0 0-2-2.225M10 3c1.93 0 3.5 1.57 3.5 3.5V7h-7v-.5C6.5 4.57 8.07 3 10 3m5.5 12.75c0 .413-.337.75-.75.75h-9.5a.75.75 0 0 1-.75-.75v-6.5c0-.413.337-.75.75-.75h9.5c.413 0 .75.337.75.75z"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-lock.js
-var o65 = class extends a10 {
+var o66 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e96())}</span>
+      <span class="swc-Icon">${o16(e97())}</span>
     `;
   }
 };
-e25("swc-icon-lock", o65);
+e25("swc-icon-lock", o66);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/Search.js
-function e97() {
+function e98() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="m18.53 17.47-5.083-5.084A6.96 6.96 0 0 0 15 8c0-3.86-3.14-7-7-7S1 4.14 1 8s3.14 7 7 7c1.66 0 3.185-.584 4.386-1.553l5.084 5.083a.747.747 0 0 0 1.06 0 .75.75 0 0 0 0-1.06M8 13.5c-3.032 0-5.5-2.468-5.5-5.5S4.968 2.5 8 2.5s5.5 2.468 5.5 5.5-2.468 5.5-5.5 5.5"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-search.js
-var o66 = class extends a10 {
+var o67 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e97())}</span>
+      <span class="swc-Icon">${o16(e98())}</span>
     `;
   }
 };
-e25("swc-icon-search", o66);
+e25("swc-icon-search", o67);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/Tools.js
-function e98() {
+function e99() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="m8.747 5.33-1.82-3.505a1 1 0 0 0-.88-.54h-.008a1 1 0 0 0-.88.525l-1.89 3.5A2.3 2.3 0 0 0 3 6.38v10.37C3 17.99 4.01 19 5.25 19h1.5C7.99 19 9 17.99 9 16.75V6.366c0-.36-.088-.719-.253-1.037M7.5 7.5v7h-3v-7zM6.03 3.354 7.405 6H4.603zM6.75 17.5h-1.5a.75.75 0 0 1-.75-.75V16h3v.75c0 .413-.337.75-.75.75m8-16.5h-1.5C12.01 1 11 2.01 11 3.25v6.729l-.003.014.003.015v3.722l-.003.013.003.015v2.992c0 1.24 1.01 2.25 2.25 2.25h1.5c1.24 0 2.25-1.01 2.25-2.25V3.25C17 2.01 15.99 1 14.75 1m.75 15.75c0 .413-.337.75-.75.75h-1.5a.75.75 0 0 1-.75-.75v-2.251l1.244.005h.003a.75.75 0 0 0 .003-1.5l-1.25-.005v-2.25l1.244.005h.003a.75.75 0 0 0 .003-1.5l-1.25-.005V7.003l1.247.006h.003a.75.75 0 0 0 .003-1.5L12.5 5.503V3.25c0-.413.337-.75.75-.75h1.5c.413 0 .75.337.75.75z"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-tools.js
-var o67 = class extends a10 {
+var o68 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e98())}</span>
+      <span class="swc-Icon">${o16(e99())}</span>
     `;
   }
 };
-e25("swc-icon-tools", o67);
+e25("swc-icon-tools", o68);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/WebPage.js
-function e99() {
+function e100() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="4.125" cy="6" r=".75" fill="var(--swc-icon-color, currentColor)"/><path fill="var(--swc-icon-color, currentColor)" d="M16.75 3H3.25C2.01 3 1 4.01 1 5.25v9.5C1 15.99 2.01 17 3.25 17h13.5c1.24 0 2.25-1.01 2.25-2.25v-9.5C19 4.01 17.99 3 16.75 3M2.5 5.25c0-.413.337-.75.75-.75h13.5c.413 0 .75.337.75.75V7.5h-15zM16.75 15.5H3.25a.75.75 0 0 1-.75-.75V9h15v5.75c0 .413-.337.75-.75.75"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-web-page.js
-var o68 = class extends a10 {
+var o69 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e99())}</span>
+      <span class="swc-Icon">${o16(e100())}</span>
     `;
   }
 };
-e25("swc-icon-web-page", o68);
+e25("swc-icon-web-page", o69);
 
 // src/app/markdown.ts
 var inlinePattern = /(`[^`]+`|!\[[^\]]*\]\([^)\s]+\)|\*\*[^*]+\*\*|~~[^~]+~~|\*[^*\s][^*]*\*|\[[^\]]+\]\([^)\s]+\))/g;
@@ -20691,7 +20930,7 @@ e25("swc-close-button", c23);
 var t78 = i`:host{display:block}*{box-sizing:border-box}.swc-IllustratedMessage{--_swc-illustrated-message-illustration-to-content: var(--swc-illustrated-message-illustration-to-content, 12px);display:flex;flex-direction:column;gap:var(--_swc-illustrated-message-illustration-to-content);align-items:center;max-inline-size:var(--swc-illustrated-message-max-inline-size, 380px);margin-inline:auto}.swc-IllustratedMessage-illustration{--_swc-illustrated-message-illustration-size: var(--swc-illustrated-message-illustration-size, 96px);display:flex;flex-shrink:0;justify-content:center;inline-size:var(--swc-illustrated-message-illustration-inline-size, var(--_swc-illustrated-message-illustration-size));block-size:var(--swc-illustrated-message-illustration-block-size, var(--_swc-illustrated-message-illustration-size));color:var(--swc-illustrated-message-illustration-color, var(--swc-gray-800))}.swc-IllustratedMessage-illustration[hidden]{display:none}.swc-IllustratedMessage-content{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center}.swc-IllustratedMessage-description{font-size:var(--swc-illustrated-message-description-font-size, var(--swc-illustrated-message-medium-body-font-size));font-weight:400;line-height:var(--swc-illustrated-message-description-line-height, var(--swc-line-height-200));color:var(--swc-gray-800)}:host([size=\"s\"]){--swc-illustrated-message-illustration-size: 96px;--swc-illustrated-message-illustration-to-content: 12px;--swc-illustrated-message-heading-font-size: var(--swc-illustrated-message-small-title-font-size);--swc-illustrated-message-description-font-size: var(--swc-body-size-xs)}:host([size=\"l\"]){--swc-illustrated-message-illustration-size: 160px;--swc-illustrated-message-illustration-to-content: 8px;--swc-illustrated-message-heading-font-size: var(--swc-illustrated-message-large-title-font-size);--swc-illustrated-message-description-font-size: var(--swc-illustrated-message-large-body-font-size)}:host(:lang(ja)),:host(:lang(ko)),:host(:lang(zh)){--swc-illustrated-message-heading-font-size: var(--swc-illustrated-message-medium-cjk-title-font-size);--swc-illustrated-message-heading-line-height: 1.5;--swc-illustrated-message-description-line-height: 1.7}:host([size=\"s\"]:lang(ja)),:host([size=\"s\"]:lang(ko)),:host([size=\"s\"]:lang(zh)){--swc-illustrated-message-heading-font-size: var(--swc-illustrated-message-small-cjk-title-font-size)}:host([size=\"l\"]:lang(ja)),:host([size=\"l\"]:lang(ko)),:host([size=\"l\"]:lang(zh)){--swc-illustrated-message-heading-font-size: var(--swc-illustrated-message-large-cjk-title-font-size)}:host([orientation=\"horizontal\"]){--swc-illustrated-message-max-inline-size: 535px}:host([orientation=\"horizontal\"]) .swc-IllustratedMessage{flex-direction:row;align-items:center}:host([orientation=\"horizontal\"]) .swc-IllustratedMessage-content{align-items:flex-start;text-align:start}slot[name=heading]{font-size:var(--swc-illustrated-message-heading-font-size, var(--swc-illustrated-message-medium-title-font-size));font-style:var(--swc-default-font-style);font-weight:var(--swc-bold-font-weight);line-height:var(--swc-illustrated-message-heading-line-height, var(--swc-line-height-100));color:var(--swc-gray-900)}::slotted([slot=\"heading\"]:not([class])){margin:0!important;font:inherit!important;color:inherit!important}:host(:has([slot=\"actions\"])) slot[name=actions]{margin-block-start:16px}::slotted(svg){box-sizing:border-box;display:block;inline-size:100%;block-size:100%;fill:currentcolor;stroke:currentcolor}`;
 
 // node_modules/@adobe/spectrum-wc-core/dist/components/illustrated-message/IllustratedMessage.types.js
-var e100 = [
+var e101 = [
   "s",
   "m",
   "l"
@@ -20715,7 +20954,7 @@ var d17 = class extends i9 {
     e116.has("size") && n10(this, {
       prop: "size",
       value: this.size,
-      valid: e100,
+      valid: e101,
       url: "https://spectrum-web-components.adobe.com/?path=/docs/components-illustrated-message--docs"
     }), e116.has("orientation") && n10(this, {
       prop: "orientation",
@@ -20740,7 +20979,7 @@ var d17 = class extends i9 {
     r9(this, r39 > 1, `<${this.localName}> "heading" slot accepts a single heading element but received ${r39}.`, n36, { issues: [`heading slot: ${r39} elements`] });
   }
 };
-u22 = d17, u22.VALID_SIZES = e100, u22.VALID_ORIENTATIONS = t79, e24([n({
+u22 = d17, u22.VALID_SIZES = e101, u22.VALID_ORIENTATIONS = t79, e24([n({
   type: String,
   reflect: true
 })], d17.prototype, "size", void 0), e24([n({
@@ -20784,166 +21023,166 @@ var r33 = class extends d17 {
 e25("swc-illustrated-message", r33);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/Camera.js
-function e101() {
+function e102() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M16.75 17H3.25C2.01 17 1 15.99 1 14.75v-7.5C1 6.01 2.01 5 3.25 5h1.823c.286 0 .543-.16.67-.414l.172-.342A2.24 2.24 0 0 1 7.927 3h4.146c.858 0 1.629.477 2.012 1.244l.171.342a.75.75 0 0 0 .671.414h1.823C17.99 5 19 6.01 19 7.25v7.5c0 1.24-1.01 2.25-2.25 2.25M3.25 6.5a.75.75 0 0 0-.75.75v7.5c0 .413.336.75.75.75h13.5a.75.75 0 0 0 .75-.75v-7.5a.75.75 0 0 0-.75-.75h-1.823a2.24 2.24 0 0 1-2.012-1.244l-.171-.342a.75.75 0 0 0-.671-.414H7.927a.75.75 0 0 0-.67.414l-.172.342A2.24 2.24 0 0 1 5.073 6.5z"/><path fill="var(--swc-icon-color, currentColor)" d="M10 14.5c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4M10 8c-1.378 0-2.5 1.121-2.5 2.5S8.622 13 10 13s2.5-1.121 2.5-2.5S11.378 8 10 8"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-camera.js
-var o69 = class extends a10 {
+var o70 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e101())}</span>
+      <span class="swc-Icon">${o16(e102())}</span>
     `;
   }
 };
-e25("swc-icon-camera", o69);
+e25("swc-icon-camera", o70);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/ChevronDown.js
-function e102() {
+function e103() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M3.755 7.243a.75.75 0 0 1 1.06-.02l5.183 4.986 5.197-4.999a.749.749 0 1 1 1.04 1.08l-5.717 5.5a.747.747 0 0 1-1.04 0L3.776 8.303a.746.746 0 0 1-.02-1.06"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-chevron-down.js
-var o70 = class extends a10 {
+var o71 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e102())}</span>
+      <span class="swc-Icon">${o16(e103())}</span>
     `;
   }
 };
-e25("swc-icon-chevron-down", o70);
+e25("swc-icon-chevron-down", o71);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/ChevronLeft.js
-function e103() {
+function e104() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M12.237 16.455a.75.75 0 0 1-.54-.23L6.21 10.52a.747.747 0 0 1 0-1.039l5.5-5.716a.749.749 0 1 1 1.08 1.039l-4.999 5.197 4.986 5.184a.748.748 0 0 1-.54 1.27"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-chevron-left.js
-var o71 = class extends a10 {
+var o72 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e103())}</span>
+      <span class="swc-Icon">${o16(e104())}</span>
     `;
   }
 };
-e25("swc-icon-chevron-left", o71);
+e25("swc-icon-chevron-left", o72);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/CursorClick.js
-function e104() {
+function e105() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M10.476 18.967A1.48 1.48 0 0 1 9 17.48V9.378c0-.6.358-1.14.913-1.372a1.48 1.48 0 0 1 1.616.31l5.524 5.42a1.48 1.48 0 0 1 .335 1.624c-.23.562-.77.925-1.377.925h-2.28a.72.72 0 0 0-.56.265l-1.584 1.929c-.322.324-.717.487-1.111.487m.003-9.58.021 8.098 1.513-1.886a2.22 2.22 0 0 1 1.718-.813h2.28zm.021-4.69V1.75a.75.75 0 0 0-1.5 0v2.946a.75.75 0 0 0 1.5 0m7 4.053a.75.75 0 0 0-.75-.75h-2a.75.75 0 0 0 0 1.5h2a.75.75 0 0 0 .75-.75m-10.91 0A.75.75 0 0 0 5.84 8H2.75a.75.75 0 0 0 0 1.5h3.09a.75.75 0 0 0 .75-.75m6.598-2.378L15.23 4.33a.75.75 0 1 0-1.06-1.06l-2.042 2.042a.75.75 0 1 0 1.06 1.06M5.33 14.23l2.08-2.079a.75.75 0 1 0-1.061-1.06l-2.08 2.079a.75.75 0 1 0 1.061 1.06m2.155-7.745a.75.75 0 0 0 0-1.06L5.33 3.27a.75.75 0 1 0-1.06 1.06l2.155 2.155a.747.747 0 0 0 1.06 0"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-cursor-click.js
-var o72 = class extends a10 {
+var o73 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e104())}</span>
+      <span class="swc-Icon">${o16(e105())}</span>
     `;
   }
 };
-e25("swc-icon-cursor-click", o72);
+e25("swc-icon-cursor-click", o73);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/Keyboard.js
-function e105() {
+function e106() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M16.75 15H3.25C2.01 15 1 13.99 1 12.75v-6.5C1 5.01 2.01 4 3.25 4h13.5C17.99 4 19 5.01 19 6.25v6.5c0 1.24-1.01 2.25-2.25 2.25M3.25 5.5a.75.75 0 0 0-.75.75v6.5c0 .413.336.75.75.75h13.5a.75.75 0 0 0 .75-.75v-6.5a.75.75 0 0 0-.75-.75z"/><path fill="var(--swc-icon-color, currentColor)" d="M12.25 12h-4.5a.75.75 0 0 1 0-1.5h4.5a.75.75 0 0 1 0 1.5"/><circle cx="5" cy="8" r="1" fill="var(--swc-icon-color, currentColor)"/><circle cx="8.333" cy="8" r="1" fill="var(--swc-icon-color, currentColor)"/><circle cx="11.667" cy="8" r="1" fill="var(--swc-icon-color, currentColor)"/><circle cx="15" cy="8" r="1" fill="var(--swc-icon-color, currentColor)"/><circle cx="5" cy="11" r="1" fill="var(--swc-icon-color, currentColor)"/><circle cx="15" cy="11" r="1" fill="var(--swc-icon-color, currentColor)"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-keyboard.js
-var o73 = class extends a10 {
+var o74 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e105())}</span>
+      <span class="swc-Icon">${o16(e106())}</span>
     `;
   }
 };
-e25("swc-icon-keyboard", o73);
+e25("swc-icon-keyboard", o74);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/Link.js
-function e106() {
+function e107() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M5.313 18.748A4.05 4.05 0 0 1 2.44 17.56a4.07 4.07 0 0 1 0-5.747l3.906-3.906a4.07 4.07 0 0 1 6.313.71.75.75 0 1 1-1.27.799q-.151-.241-.359-.45a2.566 2.566 0 0 0-3.624.002l-3.905 3.905a2.57 2.57 0 0 0 0 3.626 2.57 2.57 0 0 0 3.626 0l1.952-1.952a.75.75 0 1 1 1.06 1.06l-1.95 1.953a4.06 4.06 0 0 1-2.875 1.188m8.341-6.655 3.906-3.905c1.584-1.585 1.584-4.164 0-5.748s-4.164-1.584-5.747 0L9.86 4.393a.75.75 0 1 0 1.06 1.06l1.953-1.952c1-.998 2.625-1 3.626 0a2.57 2.57 0 0 1 0 3.626l-3.905 3.905a2.566 2.566 0 0 1-3.984-.448.75.75 0 1 0-1.27.799q.24.381.567.71a4.05 4.05 0 0 0 2.874 1.188c1.04 0 2.081-.396 2.873-1.188"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-link.js
-var o74 = class extends a10 {
+var o75 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e106())}</span>
+      <span class="swc-Icon">${o16(e107())}</span>
     `;
   }
 };
-e25("swc-icon-link", o74);
+e25("swc-icon-link", o75);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/Text.js
-function e107() {
+function e108() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M14.59 2H5.41C4.17 2 3.16 3.01 3.16 4.25v1.11a.75.75 0 0 0 1.5 0V4.25c0-.413.337-.75.75-.75h3.84v13H7.68a.75.75 0 0 0 0 1.5h4.64a.75.75 0 0 0 0-1.5h-1.57v-13h3.84c.413 0 .75.337.75.75v1.11a.75.75 0 0 0 1.5 0V4.25c0-1.24-1.01-2.25-2.25-2.25"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-text.js
-var o75 = class extends a10 {
+var o76 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e107())}</span>
+      <span class="swc-Icon">${o16(e108())}</span>
     `;
   }
 };
-e25("swc-icon-text", o75);
+e25("swc-icon-text", o76);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/Undo.js
-function e108() {
+function e109() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M12.257 5H3.808l1.72-1.72a.75.75 0 1 0-1.06-1.06L1.47 5.217a.75.75 0 0 0 0 1.06L4.466 9.28a.746.746 0 0 0 1.06 0 .75.75 0 0 0 .001-1.06L3.811 6.5h8.446c2.482 0 4.5 2.019 4.5 4.5s-2.018 4.5-4.5 4.5H8.52a.75.75 0 0 0 0 1.5h3.737c3.309 0 6-2.691 6-6s-2.691-6-6-6"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-undo.js
-var o76 = class extends a10 {
+var o77 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e108())}</span>
+      <span class="swc-Icon">${o16(e109())}</span>
     `;
   }
 };
-e25("swc-icon-undo", o76);
+e25("swc-icon-undo", o77);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/Visibility.js
-function e109() {
+function e110() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M10.034 16.662C5.143 16.662.75 12.273.75 10.2c0-1.685 2.598-4.55 5.347-5.898A8.95 8.95 0 0 1 9.99 3.35c5.158 0 9.26 4.919 9.26 6.85 0 2.072-4.36 6.46-9.216 6.46M10 4.85a7.44 7.44 0 0 0-3.24.797C4.155 6.923 2.25 9.397 2.25 10.2c0 1.144 3.68 4.96 7.784 4.96 4.069 0 7.716-3.816 7.716-4.96 0-1.05-3.481-5.35-7.75-5.35m-3.569.124h.01z"/><path fill="var(--swc-icon-color, currentColor)" d="M9.83 7.644c.222-.637-.474-1.26-1.1-1.01a3.5 3.5 0 0 0-1.283.88 3.565 3.565 0 0 0 4.697 5.315 3.54 3.54 0 0 0 1.317-1.833c.209-.684-.458-1.25-1.119-.976A1.904 1.904 0 0 1 9.85 8.943a1.88 1.88 0 0 1-.02-1.3"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-visibility.js
-var o77 = class extends a10 {
+var o78 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e109())}</span>
+      <span class="swc-Icon">${o16(e110())}</span>
     `;
   }
 };
-e25("swc-icon-visibility", o77);
+e25("swc-icon-visibility", o78);
 
 // src/app/browser.ts
 function normalize(input) {
@@ -21776,7 +22015,7 @@ var SliccBrowser = class extends ModelElement {
 var t80 = i`:host{display:inline-flex}*{box-sizing:border-box}.swc-ActionGroup{--_swc-action-group-gap: var(--swc-action-group-gap, 8px);display:flex;flex-wrap:wrap;gap:var(--_swc-action-group-gap);inline-size:100%}::slotted(*){flex-shrink:0}:host([orientation=\"vertical\"]) .swc-ActionGroup{flex-direction:column;inline-size:-moz-max-content;inline-size:max-content;min-inline-size:100%}:host([size=\"xs\"]){--swc-action-group-gap: 4px}:host([size=\"s\"]){--swc-action-group-gap: 6px}:host([size=\"l\"]){--swc-action-group-gap: 12px}:host([size=\"xl\"]){--swc-action-group-gap: 16px}:host([justified]) ::slotted(*){flex:1 1 0%}:host([compact]:not([quiet])) .swc-ActionGroup{--swc-action-group-gap: 2px;flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){position:relative;z-index:0}:host([compact]:not([quiet])) ::slotted(:hover){z-index:1}:host([compact]:not([quiet])) ::slotted(:focus-within){z-index:2}:host([compact]:not([quiet]):not([orientation=\"vertical\"])) ::slotted(:first-child:not(:last-child)){--swc-action-button-border-start-end-radius: 0;--swc-action-button-border-end-end-radius: 0}:host([compact]:not([quiet]):not([orientation=\"vertical\"])) ::slotted(:last-child:not(:first-child)){--swc-action-button-border-start-start-radius: 0;--swc-action-button-border-end-start-radius: 0}:host([compact]:not([quiet]):not([orientation=\"vertical\"])) ::slotted(:not(:first-child):not(:last-child)){--swc-action-button-border-radius: 0}:host([compact]:not([quiet])[orientation=\"vertical\"]) ::slotted(:first-child:not(:last-child)){--swc-action-button-border-end-start-radius: 0;--swc-action-button-border-end-end-radius: 0}:host([compact]:not([quiet])[orientation=\"vertical\"]) ::slotted(:last-child:not(:first-child)){--swc-action-button-border-start-start-radius: 0;--swc-action-button-border-start-end-radius: 0}:host([compact]:not([quiet])[orientation=\"vertical\"]) ::slotted(:not(:first-child):not(:last-child)){--swc-action-button-border-radius: 0}`;
 
 // node_modules/@adobe/spectrum-wc-core/dist/components/action-group/ActionGroup.types.js
-var e110 = [
+var e111 = [
   "xs",
   "s",
   "m",
@@ -21789,7 +22028,7 @@ var n34 = ["white", "black"];
 // node_modules/@adobe/spectrum-wc-core/dist/components/action-group/ActionGroup.base.js
 var c24;
 var l19 = class extends i12(i9, {
-  validSizes: e110,
+  validSizes: e111,
   noDefaultSize: true
 }) {
   constructor(...e116) {
@@ -21833,7 +22072,7 @@ c24 = l19, c24.shadowRootOptions = {
 })], l19.prototype, "disabled", void 0), e24([o({ flatten: true })], l19.prototype, "managedChildren", void 0);
 
 // node_modules/@adobe/spectrum-wc/dist/components/action-group/ActionGroup.js
-var o78 = class extends l19 {
+var o79 = class extends l19 {
   constructor(...e116) {
     super(...e116), this.compact = false, this.quiet = false, this.justified = false, this.navigation = new r20(this, {
       direction: this.orientation,
@@ -21899,20 +22138,20 @@ var o78 = class extends l19 {
 e12([n({
   type: Boolean,
   reflect: true
-})], o78.prototype, "compact", void 0), e12([n({
+})], o79.prototype, "compact", void 0), e12([n({
   type: Boolean,
   reflect: true
-})], o78.prototype, "quiet", void 0), e12([n({
+})], o79.prototype, "quiet", void 0), e12([n({
   type: Boolean,
   reflect: true
-})], o78.prototype, "justified", void 0), e12([n({
+})], o79.prototype, "justified", void 0), e12([n({
   type: String,
   reflect: true,
   attribute: "static-color"
-})], o78.prototype, "staticColor", void 0);
+})], o79.prototype, "staticColor", void 0);
 
 // node_modules/@adobe/spectrum-wc/dist/components/action-group/swc-action-group.js
-e25("swc-action-group", o78);
+e25("swc-action-group", o79);
 
 // src/app/changes.ts
 var layouts = [
@@ -22413,22 +22652,22 @@ e12([o({
 e25("swc-conversation-thread", s15);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/New.js
-function e111() {
+function e112() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M18 4.25v11.5c0 1.24-1.01 2.25-2.25 2.25H4.25C3.01 18 2 16.99 2 15.75V4.25C2 3.01 3.01 2 4.25 2h11.5C16.99 2 18 3.01 18 4.25m-1.5 0a.75.75 0 0 0-.75-.75H4.25a.75.75 0 0 0-.75.75v11.5c0 .414.336.75.75.75h11.5a.75.75 0 0 0 .75-.75z"/><path fill="var(--swc-icon-color, currentColor)" d="M13.763 10a.763.763 0 0 1-.763.763h-2.237V13a.763.763 0 0 1-1.526 0v-2.237H7a.763.763 0 0 1 0-1.526h2.237V7a.763.763 0 0 1 1.526 0v2.237H13c.421 0 .763.342.763.763"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-new.js
-var o79 = class extends a10 {
+var o80 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e111())}</span>
+      <span class="swc-Icon">${o16(e112())}</span>
     `;
   }
 };
-e25("swc-icon-new", o79);
+e25("swc-icon-new", o80);
 
 // src/app/chat.ts
 var navigation = /* @__PURE__ */ new Set([
@@ -22793,7 +23032,7 @@ var D4 = (e116) => {
 var O3 = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("field-sizing", "content");
 var k3 = class extends i9 {
   constructor() {
-    super(), this.labelId = e86("swc-prompt-field-label"), this.disabled = false, this.generating = false, this.collapsed = false, this.variant = "balanced", this.size = "m", this.loader = "aiLogo", this.animateLoader = false, this.label = "Prompt", this.accessibleLabel = "", this.sendLabel = "Send", this.stopLabel = "Stop generating", this.uploadLabel = "Add attachment", this.attachmentScrollPrevLabel = "Show previous attachments", this.attachmentScrollNextLabel = "Show more attachments", this.attachmentStripLabel = "Uploaded assets strip", this.placeholder = "Ready to get started? Ask a question, share an idea, or add a task.", this.value = "", this._attachmentScrollOverflow = false, this._attachmentCanScrollPrev = false, this._attachmentCanScrollNext = false, this._attachmentScrollFallbackGeneration = 0, this._attachmentScrollObserver = new s8(this, {
+    super(), this.labelId = e87("swc-prompt-field-label"), this.disabled = false, this.generating = false, this.collapsed = false, this.variant = "balanced", this.size = "m", this.loader = "aiLogo", this.animateLoader = false, this.label = "Prompt", this.accessibleLabel = "", this.sendLabel = "Send", this.stopLabel = "Stop generating", this.uploadLabel = "Add attachment", this.attachmentScrollPrevLabel = "Show previous attachments", this.attachmentScrollNextLabel = "Show more attachments", this.attachmentStripLabel = "Uploaded assets strip", this.placeholder = "Ready to get started? Ask a question, share an idea, or add a task.", this.value = "", this._attachmentScrollOverflow = false, this._attachmentCanScrollPrev = false, this._attachmentCanScrollNext = false, this._attachmentScrollFallbackGeneration = 0, this._attachmentScrollObserver = new s8(this, {
       target: null,
       callback: () => {
         this._updateAttachmentScrollState();
@@ -23604,22 +23843,22 @@ e12([n({
 e25("swc-upload-attachment", d18);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/Clock.js
-function e112() {
+function e113() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M10 18.75c-4.825 0-8.75-3.925-8.75-8.75S5.175 1.25 10 1.25s8.75 3.925 8.75 8.75-3.925 8.75-8.75 8.75m0-16c-3.998 0-7.25 3.252-7.25 7.25s3.252 7.25 7.25 7.25 7.25-3.252 7.25-7.25S13.998 2.75 10 2.75"/><path fill="var(--swc-icon-color, currentColor)" d="M13.249 12.645a.74.74 0 0 1-.379-.104l-3.22-1.895A.75.75 0 0 1 9.28 10V5a.75.75 0 0 1 1.5 0v4.571l2.85 1.677a.75.75 0 0 1-.381 1.397"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-clock.js
-var o80 = class extends a10 {
+var o81 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e112())}</span>
+      <span class="swc-Icon">${o16(e113())}</span>
     `;
   }
 };
-e25("swc-icon-clock", o80);
+e25("swc-icon-clock", o81);
 
 // src/app/composer.ts
 var limit = 25 * 1024 * 1024;
@@ -24963,24 +25202,6 @@ var SliccMonitor = class extends ModelElement {
   }
 };
 
-// node_modules/@adobe/spectrum-wc-icons/dist/InfoCircle.js
-function e113() {
-  return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M10 18.75c-4.825 0-8.75-3.925-8.75-8.75S5.175 1.25 10 1.25s8.75 3.925 8.75 8.75-3.925 8.75-8.75 8.75m0-16c-3.998 0-7.25 3.252-7.25 7.25s3.252 7.25 7.25 7.25 7.25-3.252 7.25-7.25S13.998 2.75 10 2.75"/><path fill="var(--swc-icon-color, currentColor)" d="M10 5.26a.9.9 0 0 1 .627.229c.33.365.33.921 0 1.286a.87.87 0 0 1-.626.235.85.85 0 0 1-.633-.248.86.86 0 0 1-.242-.627.88.88 0 0 1 .228-.64A.86.86 0 0 1 10 5.26m0 9.803a.75.75 0 0 1-.75-.75V9.478a.75.75 0 0 1 1.5 0v4.835a.75.75 0 0 1-.75.75"/></svg>';
-}
-
-// node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-info-circle.js
-var o81 = class extends a10 {
-  static get styles() {
-    return [t40];
-  }
-  render() {
-    return b`
-      <span class="swc-Icon">${o16(e113())}</span>
-    `;
-  }
-};
-e25("swc-icon-info-circle", o81);
-
 // src/app/notices.ts
 var SliccNotices = class extends ModelElement {
   static properties = {