@ai-ecoverse/slicc-spectrum 1.37.1 → 1.38.0

package/dist/slicc-ui.js

@@ -10623,6 +10623,27 @@ var automation = {
 function automationOf(browser) {
   return browser.declined ? "declined" : browser.via ?? "none";
 }
+var tailnetStates = {
+  off: ["neutral", "Off"],
+  loading: ["info", "Loading"],
+  "needs-login": ["notice", "Needs sign-in"],
+  starting: ["info", "Connecting"],
+  running: ["positive", "Connected"],
+  failed: ["negative", "Failed"]
+};
+var tailnetOnly = {
+  proxy: "Tailnet hosts only. Everything else goes through slicc-node.",
+  extension: "Tailnet hosts only. Everything else goes through the SLICC extension.",
+  page: "Tailnet hosts only. Everything else goes through this page\u2019s fetch.",
+  none: "Tailnet hosts only. Nothing else is reachable."
+};
+function tailnetAddress(addresses) {
+  return addresses.find((address) => address.startsWith("100.")) ?? addresses[0];
+}
+function exitNodeValue(tailnet) {
+  if (tailnet.autoExitNode) return "auto";
+  return tailnet.exitNodes?.find((node) => node.name === tailnet.exitNode)?.id ?? "none";
+}
 function networkLabel(status2) {
   return `Network: ${networkHealth[status2.health][1].toLowerCase()}`;
 }
@@ -10652,7 +10673,10 @@ var SliccNetwork = class extends ModelElement {
     checking: { state: true },
     copied: { state: true },
     uncopied: { state: true },
-    error: { state: true }
+    error: { state: true },
+    busy: { state: true },
+    tailnetError: { state: true },
+    tailnetCopied: { state: true }
   };
   constructor() {
     super();
@@ -10660,6 +10684,9 @@ var SliccNetwork = class extends ModelElement {
     this.copied = false;
     this.uncopied = false;
     this.error = "";
+    this.busy = "";
+    this.tailnetError = "";
+    this.tailnetCopied = "";
   }
   static styles = [
     r(link_default),
@@ -10733,6 +10760,51 @@ var SliccNetwork = class extends ModelElement {
         flex: none;
         margin-block-start: var(--swc-spacing-50);
       }
+      .warning {
+        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-notice-subtle-background-color-default);
+        --swc-icon-color: var(--swc-notice-visual-color);
+      }
+      .warning swc-icon-alert-triangle {
+        flex: none;
+        margin-block-start: var(--swc-spacing-50);
+      }
+      .node {
+        display: grid;
+        grid-template-columns: max-content minmax(0, 1fr);
+        align-items: center;
+        gap: var(--swc-spacing-100) var(--swc-spacing-200);
+        margin: 0;
+      }
+      .node dt {
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
+      .node dd {
+        margin: 0;
+      }
+      .key {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--swc-spacing-100);
+      }
+      .key sp-textfield {
+        flex: 1 1 200px;
+      }
+      .exit {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--swc-spacing-100) var(--swc-spacing-200);
+      }
+      .exit sp-picker {
+        width: 240px;
+        max-width: 100%;
+      }
       .command {
         display: flex;
         align-items: center;
@@ -10815,6 +10887,7 @@ var SliccNetwork = class extends ModelElement {
   ];
   subscribe(model) {
     this.error = "";
+    this.tailnetError = "";
     return model.network ? [model.network.on("network", () => this.requestUpdate())] : [];
   }
   focus() {
@@ -10843,6 +10916,131 @@ var SliccNetwork = class extends ModelElement {
       this.uncopied = true;
     }
   }
+  async #tailnet(action, run2) {
+    if (this.busy) return;
+    this.busy = action;
+    this.tailnetError = "";
+    try {
+      await run2();
+    } catch (error) {
+      this.tailnetError = failure(error);
+    } finally {
+      this.busy = "";
+    }
+  }
+  async #copyTailnet(what, value) {
+    try {
+      await globalThis.navigator.clipboard.writeText(value);
+      this.tailnetCopied = what;
+      this.tailnetError = "";
+    } catch {
+      this.tailnetCopied = "";
+      this.tailnetError = "Couldn\u2019t copy. Select the text and copy it.";
+    }
+  }
+  #waiting(action) {
+    return this.busy !== "" && this.busy !== action;
+  }
+  #submitKey(event2, port) {
+    event2.preventDefault();
+    if (this.busy) return;
+    const field = event2.currentTarget.querySelector(
+      "sp-textfield"
+    );
+    const key2 = field.value.trim();
+    field.value = "";
+    if (key2) void this.#tailnet("key", () => port.submitAuthKey?.(key2));
+  }
+  #sendKey(event2) {
+    event2.currentTarget.closest("form")?.requestSubmit();
+  }
+  #enterKey(event2) {
+    if (event2.key === "Enter") this.#sendKey(event2);
+  }
+  async #signOut(port) {
+    const ok = await confirm({
+      title: "Sign out of Tailscale?",
+      body: "This browser leaves your tailnet until you sign in again.",
+      action: "Sign out",
+      variant: "confirmation"
+    });
+    if (ok) await this.#tailnet("sign-out", () => port.logoutTailnet?.());
+  }
+  #copyRow(what, label, value) {
+    const copied = this.tailnetCopied === what;
+    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>
+      </dd>`;
+  }
+  #signIn(port, tailnet) {
+    return b`<p>Sign in to add this browser to your tailnet.</p>
+      ${tailnet.loginUrl ? b`<p><a class="swc-Link" href=${tailnet.loginUrl} target="_blank" rel="noopener noreferrer" data-action="tailnet-sign-in">Sign in to Tailscale</a></p>` : A}
+      ${port.submitAuthKey ? b`<p class="muted" id="tailnet-key">Or paste an auth key:</p>
+            <form class="key" data-form="auth-key" @submit=${(event2) => this.#submitKey(event2, port)}>
+              <sp-textfield size="m" type="password" autocomplete="off" label="Tailscale auth key" aria-labelledby="tailnet-key" placeholder="tskey-…" @keydown=${(event2) => this.#enterKey(event2)}></sp-textfield>
+              <swc-button size="m" variant="secondary" data-action="submit-auth-key" ?pending=${this.busy === "key"} ?disabled=${this.#waiting("key")} @click=${(event2) => this.#sendKey(event2)}>Connect</swc-button>
+            </form>` : A}`;
+  }
+  #running(port, status2, tailnet) {
+    const address = tailnet.node ? tailnetAddress(tailnet.node.addresses) : void 0;
+    const peers = tailnet.peers;
+    return b`${tailnet.node ? b`<p>This browser is on your tailnet${peers === void 0 ? "" : ` with ${peers} other ${peers === 1 ? "device" : "devices"}`}.</p>
+          <dl class="node">
+            ${this.#copyRow("name", "Name", tailnet.node.name)}
+            ${address ? this.#copyRow("address", "Address", address) : A}
+          </dl>` : A}
+      ${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>
+              <sp-menu-item value="auto">Automatic</sp-menu-item>
+              ${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}`;
+  }
+  #exit(event2, port) {
+    const value = event2.target.value;
+    void this.#tailnet("exit", () => port.setExitNode?.(value === "none" ? null : value));
+  }
+  #failed(port, tailnet) {
+    return b`<div class="error" data-error="tailnet"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${tailnet.detail ?? "Tailscale stopped."}</span></div>
+      ${port.check ? b`<div class="actions"><swc-button size="m" variant="secondary" data-action="tailnet-retry" ?pending=${this.busy === "retry"} ?disabled=${this.#waiting("retry")} @click=${() => this.#tailnet("retry", () => port.check?.())}>Retry</swc-button></div>` : A}`;
+  }
+  #tailnetBody(port, status2, tailnet) {
+    switch (tailnet.state) {
+      case "off":
+        return b`<p class="muted">Reach the devices on your tailnet, and send the rest through an exit node.</p>`;
+      case "needs-login":
+        return this.#signIn(port, tailnet);
+      case "running":
+        return this.#running(port, status2, tailnet);
+      case "failed":
+        return this.#failed(port, tailnet);
+      default:
+        return b`<p class="muted">${tailnet.detail ?? (tailnet.state === "loading" ? "Loading Tailscale\u2026" : "Joining your tailnet\u2026")}</p>`;
+    }
+  }
+  #tailnetSection(port, status2) {
+    const tailnet = status2.tailnet;
+    if (!tailnet) return A;
+    const [variant, label] = tailnetStates[tailnet.state];
+    return b`<section aria-labelledby="tailnet" data-tailnet=${tailnet.state}>
+      <div class="head">
+        <h2 id="tailnet">Tailscale</h2>
+        <swc-status-light variant=${variant}>${label}</swc-status-light>
+      </div>
+      ${port.setTailnet ? b`<sp-switch data-action="tailnet" .checked=${l(tailnet.state !== "off")} ?disabled=${!!this.busy} @change=${(event2) => this.#tailnet("switch", () => port.setTailnet?.(event2.target.checked))}>Use Tailscale</sp-switch>` : A}
+      ${this.#tailnetBody(port, status2, tailnet)}
+      ${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) {
     const [variant, label] = networkHealth[status2.health];
     return b`<section aria-labelledby="state">
@@ -10900,6 +11098,7 @@ var SliccNetwork = class extends ModelElement {
     const status2 = port.status();
     return b`<div class="page" tabindex="-1">
       ${this.#state(status2)}
+      ${this.#tailnetSection(port, status2)}
       ${this.#whole(status2)}
       ${this.#failures(status2)}
     </div>`;
@@ -15438,7 +15637,7 @@ var SliccApp = class extends ThemedElement {
     const label = networkLabel(status2);
     const content = this.screen === "phone" ? networkIcon[status2.health] : b`<swc-status-light size="s" variant=${variant}>Network${status2.health === "ok" ? A : b`<span class="state"> ${state2.toLowerCase()}</span>`}</swc-status-light>`;
     return b`<swc-action-button id="network" quiet size="s" data-network data-health=${status2.health} accessible-label=${label} @click=${() => this.show("network")}>${content}</swc-action-button>
-      <swc-tooltip for="network" placement="bottom">${status2.detail ?? label}</swc-tooltip>`;
+      <swc-tooltip for="network" placement="bottom">${status2.detail ?? label}${status2.tailnet?.state === "running" ? " Tailscale is connected." : ""}</swc-tooltip>`;
   }
   #headerButton(id, label, icon, click) {
     return b`<swc-action-button id=${id} size="s" quiet accessible-label=${label} @click=${click}>${icon}</swc-action-button>