@ai-ecoverse/slicc-spectrum 1.48.0 → 1.49.1

package/dist/slicc-ui.js

@@ -10906,20 +10906,43 @@ function exitNodeValue(tailnet) {
 var linkStates = {
   connecting: ["info", "Connecting"],
   connected: ["positive", "Connected"],
-  reconnecting: ["notice", "Reconnecting"]
-};
+  reconnecting: ["notice", "Reconnecting"],
+  offline: ["neutral", "Offline"]
+};
+var controlBadges = {
+  prompt: "Prompting",
+  watch: "Watching"
+};
+function remoteLight(status2) {
+  const active = (status2?.links?.devices ?? []).filter((device) => device.controlling);
+  if (!active.length) return null;
+  const prompting = active.filter((device) => device.controlling === "prompt");
+  const watching = active.filter((device) => device.controlling === "watch");
+  const say = (devices, verb) => {
+    if (!devices.length) return [];
+    if (devices.length === 1) return [`${devices[0].name} is ${verb} the agent.`];
+    return [`${devices.length} linked devices are ${verb} the agent.`];
+  };
+  const tooltip = [...say(prompting, "sending prompts to"), ...say(watching, "watching")].join(" ");
+  if (prompting.length) return { mode: "prompt", text: "Remote control", tooltip };
+  return { mode: "watch", text: "Watched remotely", tooltip };
+}
 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";
+  if (links.devices.every((device) => device.state === "offline")) return "offline";
   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`];
+  if (summary === "linked") {
+    const online = links.devices.filter((device) => device.state !== "offline");
+    return ["positive", `${online.length} linked`];
+  }
   return linkStates[summary];
 }
 function exitValue(exit) {
@@ -11406,6 +11429,36 @@ var SliccNetwork = class extends ModelElement {
     const value = event2.target.value;
     void this.#act("exit", () => port.setExit?.(parseExit(value)), "error");
   }
+  #control(port, device) {
+    const control = device.control;
+    if (!control) return A;
+    if (control.fixed)
+      return b`<span class="muted" data-control="fixed">Remote control is always allowed from this computer.</span>`;
+    if (!port.setRemoteControl) {
+      return b`<span class="muted" data-control=${control.allowed ? "allowed" : "off"}>${control.allowed ? "Remote control allowed." : "Remote control not allowed."}</span>`;
+    }
+    return b`<sp-switch class="control" data-action="remote-control" .checked=${l(control.allowed)} ?disabled=${this.busy !== ""} @change=${(event2) => this.#setControl(port, device, event2.target)}>Allow remote control</sp-switch>`;
+  }
+  async #setControl(port, device, toggle) {
+    const allowed = toggle.checked;
+    if (allowed) {
+      const ok = await confirm({
+        title: `Allow remote control from ${device.name}?`,
+        body: "It can send prompts to the agent, watch its replies and stop it. Unlinking it, or a new certificate on it, turns this off again.",
+        action: "Allow",
+        variant: "confirmation"
+      });
+      if (!ok) {
+        toggle.checked = false;
+        return;
+      }
+    }
+    await this.#act(
+      `control:${device.id}`,
+      () => port.setRemoteControl?.(device.id, allowed),
+      "linksError"
+    );
+  }
   async #unlink(port, status2, device) {
     const isExit = status2.exit?.kind === "link" && status2.exit.id === device.id;
     const ok = await confirm({
@@ -11434,11 +11487,13 @@ var SliccNetwork = class extends ModelElement {
         <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}
+        ${device.controlling ? b`<swc-badge size="s" variant="informative" subtle data-controlling=${device.controlling}>${controlBadges[device.controlling]}</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.browsers?.length ? b`<span class="muted" data-browsers>${device.browsers.length === 1 ? "Browser" : "Browsers"}: ${device.browsers.map((item2, index) => b`${index ? ", " : ""}${item2.name} (<code>${item2.runtime}</code>)`)}</span>` : A}
+      ${this.#control(port, device)}
       ${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>`;
   }
@@ -19584,16 +19639,13 @@ function requiresText(item2, all2) {
     const found = all2.find((other) => other.id === id);
     return { label: found?.label ?? id, missing: found?.version === null };
   });
-  if (!needs.length) return null;
-  if (item2.version === null) {
-    const present = needs.filter((need) => !need.missing).map((need) => need.label);
-    const missing = needs.filter((need) => need.missing).map((need) => need.label);
-    return [
-      present.length ? `Needs ${list2(present)}` : "",
-      missing.length ? `Installs ${list2(missing)} too` : ""
-    ].filter(Boolean).join("; ");
-  }
-  return `Needs ${list2(needs.map((need) => need.missing ? `${need.label} (not installed)` : need.label))}`;
+  const present = needs.filter((need) => !need.missing).map((need) => need.label);
+  const missing = needs.filter((need) => need.missing).map((need) => need.label);
+  const parts2 = [
+    present.length ? `Uses ${list2(present)}` : "",
+    item2.version === null && missing.length ? `Installs ${list2(missing)} too` : ""
+  ].filter(Boolean);
+  return parts2.length ? parts2.join("; ") : null;
 }
 var snapshot = (items) => new Map(items.map(({ id, state: state2, error }) => [id, { state: state2, error }]));
 function settled(failures, before, after) {
@@ -19830,6 +19882,20 @@ var SliccUpdates = class extends ModelElement {
         line-height: var(--swc-line-height-200);
         overflow-wrap: anywhere;
       }
+      .warnings {
+        display: flex;
+        flex-direction: column;
+        gap: var(--swc-spacing-75);
+        font-size: var(--swc-font-size-75);
+        line-height: var(--swc-line-height-200);
+        overflow-wrap: anywhere;
+        --swc-icon-color: var(--swc-notice-visual-color);
+      }
+      .warnings span {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--swc-spacing-75);
+      }
       .commands {
         display: flex;
         flex-wrap: wrap;
@@ -20066,6 +20132,9 @@ var SliccUpdates = class extends ModelElement {
       <p class="description">${item2.description}</p>
       ${this.#packageMeta(item2, all2)}
       ${item2.notes?.length ? b`<p class="notes" data-notes>${item2.notes.map((note) => b`<span>${note}</span>`)}</p>` : A}
+      ${item2.warnings?.length ? b`<p class="warnings" data-warnings>${item2.warnings.map(
+      (warning) => b`<span><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle>${warning}</span>`
+    )}</p>` : A}
       ${item2.commands.length ? b`<p class="commands"><span class="hidden">Commands: </span>${item2.commands.map(
       (command2) => b`<code>${command2}</code>`
     )}</p>` : A}
@@ -20817,6 +20886,16 @@ var SliccApp = class extends ThemedElement {
       </span>
       <swc-tooltip for="tabs" placement="bottom">${light.tooltip}</swc-tooltip>`;
   }
+  #remoteIndicator() {
+    const port = this.model?.network;
+    if (!port || !this.#offers("network")) return A;
+    const light = remoteLight(port.status());
+    if (!light) return A;
+    return b`<swc-action-button id="remote" quiet size="s" data-remote=${light.mode} accessible-label=${`${light.text}. ${light.tooltip}`} @click=${() => this.show("network")}>
+        <swc-status-light size="s" variant="info">${this.screen === "phone" ? A : light.text}</swc-status-light>
+      </swc-action-button>
+      <swc-tooltip for="remote" placement="bottom">${light.tooltip}</swc-tooltip>`;
+  }
   #networkIndicator() {
     const port = this.model?.network;
     if (!port || !this.#offers("network")) return A;
@@ -20853,6 +20932,7 @@ var SliccApp = class extends ThemedElement {
           <div class="status" role="status"><slot name="status"></slot></div>
           ${this.#tabsIndicator()}
           ${this.#updatesIndicator()}
+          ${this.#remoteIndicator()}
           ${this.#networkIndicator()}
           ${this.#offers("chat") ? b`<slicc-tray .model=${this.model} ?compact=${this.screen === "phone"}></slicc-tray>` : A}
           <sp-action-menu size="s" quiet label="View" @change=${this.#view}>