@ai-ecoverse/slicc-spectrum 1.37.0 → 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>`;
@@ -15145,12 +15344,14 @@ var SliccApp = class extends ThemedElement {
       const restored = this.dock.api.getPanel("updates");
       if (restored) this.dock.reveal("updates");
       else this.show("updates");
-      if (!port.ready() && restored?.params?.boot !== false) {
-        this.dock.api.getPanel("updates")?.api.updateParameters({ boot: true });
-        this.#save();
-      }
+      const panel = this.dock.api.getPanel("updates");
+      if (!port.ready() && restored?.params?.boot !== false)
+        panel?.api.updateParameters({ boot: true });
+      else if (!restored) panel?.api.updateParameters({ boot: void 0 });
+      this.#save();
     } else if (this.dock.api.getPanel("updates")?.params?.boot && port.ready() && !port.list().some((item2) => item2.state === "failed")) {
       this.dock.close("updates");
+      this.#save();
     }
   }
   #factories(model) {
@@ -15436,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>
@@ -16874,6 +17075,20 @@ var SliccChanges = class extends ModelElement {
         min-width: 0;
         user-select: all;
       }
+      p code {
+        display: inline-block;
+        max-inline-size: 100%;
+        font-size: var(--swc-font-size-50);
+        color: inherit;
+      }
+      .summary {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .bar swc-action-button {
+        flex: none;
+      }
       .repo {
         display: flex;
         gap: var(--swc-spacing-100);
@@ -17022,7 +17237,7 @@ var SliccChanges = class extends ModelElement {
   }
   #list(changes) {
     const grouped = groups(changes);
-    if (grouped.length < 2)
+    if (grouped.length === 1 && !grouped[0][0])
       return b`<ul aria-label="Pending changes" @keydown=${this.#keydown}>${changes.map((change) => this.#row(change))}</ul>`;
     return b`<ul aria-label="Pending changes" @keydown=${this.#keydown}>${grouped.map(
       ([repo, items]) => b`<li data-repo=${repo}>
@@ -17065,7 +17280,7 @@ var SliccChanges = class extends ModelElement {
     if (unavailable) return this.#unavailable(unavailable);
     const changes = port?.changes() ?? [];
     return b`<div class="bar">
-        <span>${changes.length} pending ${changes.length === 1 ? "change" : "changes"}</span>
+        <span class="summary">${changes.length} pending ${changes.length === 1 ? "change" : "changes"}</span>
         <span class="spacer"></span>
         ${changes.length ? b`<swc-action-button size="s" quiet @click=${() => this.#all("accept")}>Accept all</swc-action-button>
               <swc-action-button size="s" quiet @click=${() => this.#all("revert")}>Revert all</swc-action-button>` : A}
@@ -17090,9 +17305,26 @@ var SliccDiffPanel = class extends ThemedElement {
         flex: 1;
         min-height: 0;
       }
-      swc-action-group {
+      :host {
+        container-type: inline-size;
+      }
+      swc-action-group,
+      .bar swc-action-button {
         flex: none;
       }
+      .bar .path {
+        min-width: 0;
+      }
+      @container (width < 480px) {
+        .bar .label {
+          position: absolute;
+          inline-size: 1px;
+          block-size: 1px;
+          overflow: hidden;
+          clip-path: inset(50%);
+          white-space: nowrap;
+        }
+      }
       swc-action-button.selected {
         --swc-action-button-background-color-default: var(--swc-neutral-background-color-selected-default);
         --swc-action-button-background-color-hover: var(--swc-neutral-background-color-selected-hover);
@@ -17146,7 +17378,7 @@ var SliccDiffPanel = class extends ThemedElement {
     return b`<div class="bar">
         ${statusMark(change.status, false)}
         <span class="path" title=${this.path}>${this.path}</span>
-        <span>${statusLabels[change.status]}${by ? ` by ${by}` : ""}</span>
+        <span class="label">${statusLabels[change.status]}${by ? ` by ${by}` : ""}</span>
         <span class="spacer"></span>
         ${change.before === null && change.after === null ? A : b`<swc-action-group size="s" compact accessible-label="Diff layout">
           ${layouts.map(
@@ -17159,11 +17391,11 @@ var SliccDiffPanel = class extends ThemedElement {
               >`
     )}
         </swc-action-group>`}
-        <swc-action-button size="s" quiet @click=${() => port?.accept(this.path)}>
-          <swc-icon-checkmark slot="icon"></swc-icon-checkmark>Accept
+        <swc-action-button size="s" quiet data-action="accept" accessible-label="Accept" title="Accept" @click=${() => port?.accept(this.path)}>
+          <swc-icon-checkmark slot="icon"></swc-icon-checkmark><span class="label">Accept</span>
         </swc-action-button>
-        <swc-action-button size="s" quiet @click=${() => this.#revert(port, change)}>
-          <swc-icon-revert slot="icon"></swc-icon-revert>Revert
+        <swc-action-button size="s" quiet data-action="revert" accessible-label="Revert" title="Revert" @click=${() => this.#revert(port, change)}>
+          <swc-icon-revert slot="icon"></swc-icon-revert><span class="label">Revert</span>
         </swc-action-button>
       </div>
       ${errorLine(this.error)}