@ai-ecoverse/slicc-spectrum 1.103.2 → 1.103.3

package/dist/slicc-ui.js

@@ -24000,7 +24000,7 @@ var SliccComposer = class extends ThemedElement {
         padding: var(--swc-spacing-50) var(--swc-spacing-50) var(--swc-spacing-50) var(--swc-spacing-200);
         border-radius: var(--swc-corner-radius-medium-default);
         background: var(--swc-neutral-subtle-background-color-default);
-        border: var(--swc-border-width-100) dashed var(--swc-gray-300);
+        border: var(--swc-border-width-100) dashed var(--swc-neutral-visual-color);
         color: var(--swc-neutral-content-color-default);
       }
       .hold {
@@ -25533,6 +25533,7 @@ var SliccChat = class _SliccChat extends ThemedElement {
     globalThis.addEventListener("keydown", this.#escape, true);
   };
   #leaving;
+  #probed = null;
   #leave = (event2) => {
     const to = event2.relatedTarget;
     if (to instanceof Node && this.contains(to)) return;
@@ -26038,6 +26039,7 @@ var SliccChat = class _SliccChat extends ThemedElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.#probed = null;
     globalThis.addEventListener("pointerup", this.#release, true);
     globalThis.addEventListener("pointercancel", this.#release, true);
     if (this.hasUpdated) this.#observe();
@@ -26298,6 +26300,9 @@ var SliccChat = class _SliccChat extends ThemedElement {
     this.model.agent.clear(agent.id);
     this.renderRoot.querySelector("slicc-composer")?.focus();
   }
+  #agentless() {
+    return this.model?.agent.starting?.() ? b`<swc-status-light size="s" variant="neutral" data-starting>Starting…</swc-status-light>` : b`<span>No agent</span>`;
+  }
   #meta(agent, empty5) {
     const model = this.model;
     const fill2 = Math.round(agent.contextFill * 100);
@@ -26343,10 +26348,15 @@ var SliccChat = class _SliccChat extends ThemedElement {
     this.#all = false;
     this.#details.clear();
   }
+  #probe() {
+    if (this.#handlers.surface || this.#probed === this.color) return;
+    this.#probed = this.color;
+    this.#handlers.surface = readSurface(this.renderRoot);
+  }
   render() {
     this.#handlers.color = this.color;
     this.#handlers.model = this.model ?? null;
-    this.#handlers.surface ??= readSurface(this.renderRoot);
+    this.#probe();
     const agent = this.#agent();
     this.#switched(agent);
     const watch2 = watchOnly(this.model);
@@ -26361,7 +26371,7 @@ var SliccChat = class _SliccChat extends ThemedElement {
     if (!this.behind) this.#mark = count2;
     return b`
       <header ?data-compact=${this.compact}>
-        ${agent ? this.#meta(agent, !messages.length) : b`<span>No agent</span>`}
+        ${agent ? this.#meta(agent, !messages.length) : this.#agentless()}
       </header>
       <slicc-notices .model=${this.model}></slicc-notices>
       ${this.#asks(asks)}
@@ -28510,6 +28520,11 @@ var SliccAgents = class extends ModelElement {
       min-block-size: 0;
       overflow-y: auto;
     }
+    .note {
+      margin: 0;
+      padding: var(--swc-spacing-400);
+      color: var(--swc-neutral-subdued-content-color-default);
+    }
     .actions {
       display: flex;
       padding: var(--swc-spacing-75) var(--swc-spacing-100);
@@ -28736,6 +28751,7 @@ var SliccAgents = class extends ModelElement {
     this.#reveal(model);
     return [
       model.agent.on("agents", () => this.requestUpdate()),
+      ...model.agent.starting ? [model.agent.on("starting", () => this.requestUpdate())] : [],
       model.agent.on("active", () => {
         this.#reveal(model);
         this.requestUpdate();
@@ -28985,6 +29001,8 @@ var SliccAgents = class extends ModelElement {
   }
   render() {
     const list6 = this.model?.agent.list() ?? [];
+    if (!list6.length && this.model?.agent.starting?.())
+      return b`<div class="list"><p class="note" data-empty="starting">The agent shows up here once it starts.</p></div>`;
     const active = this.model?.agent.active() ?? "";
     const errors = Object.values(this.errors);
     const rows2 = ordered(list6).filter(
@@ -39916,6 +39934,7 @@ var SliccChanges = class extends ModelElement {
   subscribe(model) {
     return [
       changesOf(model).on("changes", () => this.requestUpdate()),
+      model.agent.on("agents", () => this.requestUpdate()),
       ...onWatch(model, () => this.requestUpdate())
     ];
   }
@@ -40111,6 +40130,7 @@ var SliccDiffPanel = class extends ThemedElement {
     return [
       ...super.subscribe(model),
       changesOf(model).on("changes", () => this.requestUpdate()),
+      model.agent.on("agents", () => this.requestUpdate()),
       ...onWatch(model, () => this.requestUpdate())
     ];
   }
@@ -41126,11 +41146,24 @@ function endpointsLine(entry, named2 = (provider) => provider) {
     );
   return b`${parts3.map((part2, index2) => b`${index2 ? ". " : ""}${part2}`)}`;
 }
+var sessionProtocols = {
+  http1: "HTTP/1.1",
+  smtp: "SMTP",
+  pg: "Postgres"
+};
+var sessionTrust = {
+  roots: "trusted by public roots",
+  anchored: "trusted by its pinned anchor"
+};
+var sessionProtocol = (protocol) => Object.hasOwn(sessionProtocols, protocol) ? sessionProtocols[protocol] : protocol;
+var sessionTrusted = (verifiedBy) => verifiedBy && Object.hasOwn(sessionTrust, verifiedBy) ? `${sessionTrust[verifiedBy]}, ` : "";
 function auditLine(entry, devices, named2) {
   switch (entry.type) {
     case "inject":
     case "forward":
       return b`Sent to ${entry.domain}: <code>${entry.method} ${entry.path}</code>, through ${exitLabel(entry.exit, devices)}`;
+    case "session":
+      return b`Sent over ${sessionProtocol(entry.protocol)} to ${entry.domain}:${entry.port}, ${sessionTrusted(entry.verifiedBy)}through ${exitLabel(entry.exit, devices)}`;
     case "mcp":
       return b`Sent to the MCP server ${entry.server} at ${entry.domain}: <code>${entry.method} ${entry.path}</code>, through ${exitLabel(entry.exit, devices)}`;
     case "materialize":