@ai-ecoverse/slicc-spectrum 1.86.1 → 1.86.3

package/dist/slicc-terminal.js

@@ -1,7 +1,7 @@
 import {
   SliccTerminal,
   define
-} from "./chunk-ZGJM5WUN.js";
+} from "./chunk-SQG7U2FN.js";
 import {
   kernelBackend
 } from "./chunk-XYPGNJAO.js";

package/dist/slicc-ui.js

@@ -24,7 +24,7 @@ import {
 } from "./chunk-EN3XGF2M.js";
 import {
   define
-} from "./chunk-ZGJM5WUN.js";
+} from "./chunk-SQG7U2FN.js";
 import {
   isVaultFailure,
   nameProblem,
@@ -10052,6 +10052,87 @@ function search(options) {
   ></sp-search>`;
 }
 
+// src/app/view-state.ts
+var stores = /* @__PURE__ */ new WeakMap();
+var loose = {};
+function slotOf(model, key2, initial) {
+  const owner = model ?? loose;
+  const slots = stores.get(owner) ?? /* @__PURE__ */ new Map();
+  stores.set(owner, slots);
+  const found = slots.get(key2);
+  if (found) return found;
+  const slot = { value: initial(), listeners: /* @__PURE__ */ new Set() };
+  slots.set(key2, slot);
+  return slot;
+}
+var ViewState = class {
+  #host;
+  #key;
+  #initial;
+  #watched = null;
+  #connected = false;
+  #listener = () => this.#host.requestUpdate();
+  constructor(host4, key2, initial) {
+    this.#host = host4;
+    this.#key = key2;
+    this.#initial = initial;
+    host4.addController(this);
+  }
+  #slot() {
+    const model = this.#host.model;
+    return slotOf(model, this.#key, () => this.#initial(model));
+  }
+  get value() {
+    return this.#slot().value;
+  }
+  set value(value) {
+    const slot = this.#slot();
+    if (Object.is(slot.value, value)) return;
+    slot.value = value;
+    for (const listener of [...slot.listeners]) listener();
+  }
+  #watch() {
+    const slot = this.#slot();
+    if (slot === this.#watched) return;
+    this.#unwatch();
+    slot.listeners.add(this.#listener);
+    this.#watched = slot;
+  }
+  #unwatch() {
+    this.#watched?.listeners.delete(this.#listener);
+    this.#watched = null;
+  }
+  hostConnected() {
+    this.#connected = true;
+    this.#watch();
+  }
+  hostUpdate() {
+    if (this.#connected) this.#watch();
+  }
+  hostDisconnected() {
+    this.#connected = false;
+    this.#unwatch();
+  }
+};
+var ViewSet = class extends ViewState {
+  constructor(host4, key2, initial = () => []) {
+    super(host4, key2, (model) => new Set(initial(model)));
+  }
+  has(id) {
+    return this.value.has(id);
+  }
+  toggle(id, open = !this.has(id)) {
+    if (open === this.has(id)) return;
+    const next = new Set(this.value);
+    if (open) next.add(id);
+    else next.delete(id);
+    this.value = next;
+  }
+  details(id) {
+    return (event2) => this.toggle(id, event2.currentTarget.open);
+  }
+};
+
 // src/app/files.ts
 function relative(path) {
   return path.replace(/^\//, "");
@@ -10203,6 +10284,8 @@ var SliccFiles = class extends ModelElement {
   #entries = [];
   #pending = false;
   #reveal = null;
+  #folders = new ViewState(this, "files", () => null);
+  #applied = null;
   constructor() {
     super();
     this.count = 0;
@@ -10358,7 +10441,8 @@ var SliccFiles = class extends ModelElement {
     const tree = this.#tree();
     const changes2 = this.model ? changesOf(this.model).changes() : [];
     if (!tree) return;
-    if (tree.paths.length === 0) tree.expanded = ancestors(changes2.map((change) => change.path));
+    if (tree.paths.length === 0)
+      tree.expanded = this.#folders.value ?? ancestors(changes2.map((change) => change.path));
     tree.paths = treePaths(this.#entries);
     tree.gitStatus = treeStatus(changes2);
     this.#show();
@@ -10528,8 +10612,20 @@ var SliccFiles = class extends ModelElement {
         @tree-search=${this.#seed}
         @tree-matches=${this.#matches}
         @tree-search-close=${this.#closed}
+        @tree-expand=${this.#expand}
       ></slicc-file-tree>`;
   }
+  #expand(event2) {
+    this.#applied = event2.detail.expanded;
+    this.#folders.value = event2.detail.expanded;
+  }
+  updated() {
+    const folders = this.#folders.value;
+    const tree = this.#tree();
+    if (!folders || folders === this.#applied || !tree?.paths.length) return;
+    this.#applied = folders;
+    tree.expanded = folders;
+  }
 };
 var SliccFileView = class extends ThemedElement {
   static properties = {
@@ -10995,14 +11091,19 @@ function attention(section) {
 var SliccMonitor = class extends ModelElement {
   static properties = {
     ...ModelElement.properties,
-    expanded: { state: true },
     copied: { state: true }
   };
+  #sections = new ViewState(this, "monitor", () => ({}));
   constructor() {
     super();
-    this.expanded = {};
     this.copied = null;
   }
+  get expanded() {
+    return this.#sections.value;
+  }
+  set expanded(value) {
+    this.#sections.value = value;
+  }
   static styles = [
     shared,
     panelCss,
@@ -11460,7 +11561,8 @@ function fillShown(fill2) {
 }
 var SliccAgents = class extends ModelElement {
   static properties = { ...ModelElement.properties, errors: { state: true } };
-  #expanded = /* @__PURE__ */ new Set();
+  #expanded = new ViewSet(this, "agents");
+  #revealed = new ViewState(this, "agents:revealed", () => "");
   #pointer = false;
   #modality = (event2) => {
     this.#pointer = event2.type === "pointerdown";
@@ -11731,16 +11833,16 @@ var SliccAgents = class extends ModelElement {
   #reveal(model) {
     const focused2 = model.agent.list().find((agent) => agent.id === model.agent.active());
     const cone = focused2?.kind === "cone" ? focused2.id : focused2?.parentId;
-    if (cone) this.#expanded.add(cone);
+    if (!cone || focused2?.id === this.#revealed.value) return;
+    this.#revealed.value = focused2?.id;
+    this.#expanded.toggle(cone, true);
   }
   #select(agent) {
     this.model?.agent.select(agent.id);
     if (agent.kind === "cone") this.#toggle(agent, true);
   }
   #toggle(agent, open = !this.#expanded.has(agent.id)) {
-    if (open) this.#expanded.add(agent.id);
-    else this.#expanded.delete(agent.id);
-    this.requestUpdate();
+    this.#expanded.toggle(agent.id, open);
   }
   focus() {
     this.focusOn('li[tabindex="0"]');
@@ -13783,6 +13885,7 @@ var SliccNetwork = class extends ModelElement {
     guestError: { state: true },
     guestsOff: { state: true }
   };
+  #open = new ViewSet(this, "network");
   #leaderId = "";
   #guestId = "";
   constructor() {
@@ -14500,7 +14603,7 @@ var SliccNetwork = class extends ModelElement {
       </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)}
+            <details ?open=${this.#open.has("link")} @toggle=${this.#open.details("link")}><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>`;
   }
@@ -14699,7 +14802,7 @@ var SliccNetwork = class extends ModelElement {
   }
   #whole(status2) {
     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`<details ?open=${this.#open.has("whole")} @toggle=${this.#open.details("whole")}><summary>Other ways to reach the whole web</summary><div>${this.#ways(status2)}</div></details>`;
     }
     return b`<section aria-labelledby="whole">
       <h2 id="whole">Get the whole web</h2>
@@ -31832,7 +31935,7 @@ function lick(message, handlers, stamp = true, pile = flatPile) {
       b`<div class="lick-frame"><div class="lick" data-id=${message.id} data-channel=${message.channel} data-severity=${message.severity ?? A}><div class="lick-head">${head2}</div></div>${reaction}</div>`
     );
   }
-  const details = b`<details class="lick" data-id=${message.id} data-channel=${message.channel} data-severity=${message.severity ?? A}>
+  const details = b`<details class="lick" data-id=${message.id} data-channel=${message.channel} data-severity=${message.severity ?? A} ?open=${handlers.licks?.has(message.id) ?? false} @toggle=${handlers.licks?.details(message.id) ?? A}>
     <summary class="lick-head">${head2}<swc-icon-chevron-right class="chevron" size="s" aria-hidden="true"></swc-icon-chevron-right></summary>
     <pre class="output">${message.body}</pre>
   </details>`;
@@ -32865,6 +32968,7 @@ var SliccUpdates = class extends ModelElement {
     busy: { state: true },
     problems: { state: true }
   };
+  #logs = new ViewSet(this, "updates");
   constructor() {
     super();
     this.pending = /* @__PURE__ */ new Set();
@@ -33244,7 +33348,7 @@ var SliccUpdates = class extends ModelElement {
               <span>${error}</span>
             </div>` : A}
       ${this.#actions(item2)}
-      ${item2.log ? b`<details><summary>Install log</summary><pre>${item2.log}</pre></details>` : A}
+      ${item2.log ? b`<details ?open=${this.#logs.has(`item:${item2.id}`)} @toggle=${this.#logs.details(`item:${item2.id}`)}><summary>Install log</summary><pre>${item2.log}</pre></details>` : A}
     </article>`;
   }
   #packageMeta(item2, all2) {
@@ -33318,7 +33422,7 @@ var SliccUpdates = class extends ModelElement {
               <swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle>
               <span>${error}</span>
             </div>` : A}
-      ${item2.log ? b`<details><summary>Install log</summary><pre><span class="package">${item2.package}</span>\n${item2.log}</pre></details>` : A}
+      ${item2.log ? b`<details ?open=${this.#logs.has(`package:${item2.id}`)} @toggle=${this.#logs.details(`package:${item2.id}`)}><summary>Install log</summary><pre><span class="package">${item2.package}</span>\n${item2.log}</pre></details>` : A}
     </li>`;
   }
   #list(items, all2, port) {
@@ -35271,7 +35375,9 @@ var SliccBrowser = class extends ModelElement {
   #last = null;
   #shown = actionPage;
   #anchor = null;
-  #expanded = /* @__PURE__ */ new Set();
+  #expanded = new ViewSet(this, "browser");
+  #recent = new ViewState(this, "browser:recent", () => false);
+  #chosen = new ViewState(this, "browser:tab", () => void 0);
   constructor() {
     super();
     this.address = "";
@@ -35742,7 +35848,6 @@ var SliccBrowser = class extends ModelElement {
     this.#shots.clear();
     this.#frames.clear();
     this.#pulse.clear();
-    this.#expanded.clear();
     this.#shown = actionPage;
     const tabs = model.browser.list();
     this.#driven = new Set(tabs.filter((tab) => tab.controlled).map((tab) => tab.id));
@@ -35805,7 +35910,10 @@ var SliccBrowser = class extends ModelElement {
     this.#driven = driven;
     const ids = new Set(tabs.map((tab) => tab.id));
     for (const id of this.#frames.keys()) if (!ids.has(id)) this.#frames.delete(id);
-    if (this.#focus && !ids.has(this.#focus)) this.#show(null);
+    if (this.#focus && !ids.has(this.#focus)) {
+      this.#show(null);
+      this.#chosen.value = void 0;
+    }
     this.#stale();
     this.requestUpdate();
   }
@@ -35859,11 +35967,22 @@ var SliccBrowser = class extends ModelElement {
     return shot ?? null;
   }
   #show(id) {
+    this.#chosen.value = id;
+    this.#visit(id);
+    this.requestUpdate();
+  }
+  #visit(id) {
     this.#focus = id;
     this.#copied = null;
     this.#shown = actionPage;
     if (id) this.#pulse.delete(id);
-    this.requestUpdate();
+  }
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    const chosen = this.#chosen.value;
+    if (chosen === void 0 || chosen === this.#focus) return;
+    if (chosen === null || this.model?.browser.list().some((tab) => tab.id === chosen))
+      this.#visit(chosen);
   }
   #focused() {
     return this.model?.browser.list().find((tab) => tab.id === this.#focus);
@@ -36021,8 +36140,7 @@ var SliccBrowser = class extends ModelElement {
     this.requestUpdate();
   }
   #toggle(id) {
-    if (!this.#expanded.delete(id)) this.#expanded.add(id);
-    this.requestUpdate();
+    this.#expanded.toggle(id);
   }
   #what(action) {
     const url = linked.has(action.kind) ? action.value : void 0;
@@ -36052,7 +36170,7 @@ var SliccBrowser = class extends ModelElement {
     if (this.#width >= narrowWidth)
       return b`<h3>Recent actions</h3>${more}<ol class="actions" aria-label="Recent actions" tabindex="0">${actions2.map((action) => this.#row(action))}</ol>`;
     const last = actions2.at(-1);
-    return b`<details>
+    return b`<details ?open=${this.#recent.value} @toggle=${(event2) => this.#recent.value = event2.currentTarget.open}>
         <summary><swc-icon-chevron-right class="chevron" size="s" aria-hidden="true"></swc-icon-chevron-right>Recent actions (${all2.length})</summary>
         ${more}
         <ol class="actions" aria-label="Earlier actions" tabindex="0">${actions2.slice(0, -1).map((action) => this.#row(action))}</ol>
@@ -37192,7 +37310,9 @@ var SliccChat = class extends ThemedElement {
       }
     `
   ];
+  #licks = new ViewSet(this, "chat:licks");
   #handlers = {
+    licks: this.#licks,
     color: "light",
     model: null,
     readOnly: false,
@@ -40051,17 +40171,22 @@ var SliccMemory = class extends ModelElement {
     query: { state: true },
     tag: { state: true },
     scope: { state: true },
-    open: { state: true },
     editing: { state: true }
   };
+  #open = new ViewState(this, "memory", () => null);
   constructor() {
     super();
     this.query = "";
     this.tag = "all";
     this.scope = everyone;
-    this.open = null;
     this.editing = null;
   }
+  get open() {
+    return this.#open.value;
+  }
+  set open(value) {
+    this.#open.value = value;
+  }
   static styles = [
     shared,
     panelCss,
@@ -40708,6 +40833,7 @@ var SliccSecrets = class extends ThemedElement {
     picked: { state: true },
     again: { state: true }
   };
+  #removed = new ViewState(this, "settings:removed", () => false);
   #tick;
   #offline = false;
   constructor() {
@@ -41516,7 +41642,7 @@ var SliccSecrets = class extends ThemedElement {
     const live = sorted.filter((secret) => secret.state !== "removed");
     const removed = sorted.filter((secret) => secret.state === "removed");
     return b`${live.length ? b`<ul class="secrets" aria-labelledby="secrets">${live.map(row)}</ul>` : A}
-      ${removed.length ? b`<details class="removed" data-removed>
+      ${removed.length ? b`<details class="removed" data-removed ?open=${this.#removed.value} @toggle=${(event2) => this.#removed.value = event2.currentTarget.open}>
               <summary>Removed (${removed.length})</summary>
               <ul class="secrets">${removed.map(row)}</ul>
             </details>` : A}`;
@@ -42758,7 +42884,6 @@ ${data.html}`;
 };
 
 // src/app/tool-runs.ts
-var opened = /* @__PURE__ */ new Map();
 var caches = /* @__PURE__ */ new WeakMap();
 function cache(port) {
   const found = caches.get(port);
@@ -42775,6 +42900,7 @@ var SliccToolRuns = class extends i2 {
     model: { attribute: false },
     owners: { attribute: false }
   };
+  #opened = new ViewState(this, "chat:runs", () => /* @__PURE__ */ new Map());
   #icons = null;
   #count = 0;
   #resize = new ResizeObserver(() => this.#end());
@@ -42804,12 +42930,13 @@ var SliccToolRuns = class extends i2 {
     return this.calls.map((call) => call.id).join(" ");
   }
   get #open() {
-    return opened.get(this.#anchor) ?? "";
+    return this.#opened.value.get(this.#anchor) ?? "";
   }
   #set(value) {
-    if (value) opened.set(this.#anchor, value);
-    else opened.delete(this.#anchor);
-    this.requestUpdate();
+    const next = new Map(this.#opened.value);
+    if (value) next.set(this.#anchor, value);
+    else next.delete(this.#anchor);
+    this.#opened.value = next;
   }
   #toggled(call, event2) {
     const open = event2.currentTarget.open;
@@ -85330,11 +85457,13 @@ var SliccFileTree = class extends HTMLElement {
   #expanded = [];
   #mount = null;
   #query = "";
+  #chosen = [];
+  #applying = false;
   get paths() {
     return this.#paths;
   }
   set paths(value) {
-    const expanded = this.#paths.length > 0 ? this.#expandedNow() : this.#expanded;
+    const expanded = this.#paths.length > 0 ? this.#held() : this.#expanded;
     this.#paths = value;
     this.#tree?.resetPaths(value, { initialExpandedPaths: expanded });
     this.#research();
@@ -85352,10 +85481,15 @@ var SliccFileTree = class extends HTMLElement {
     return this.#query;
   }
   set query(value) {
+    const was = this.#query;
     this.#query = value;
     this.#tree?.setSearch(value || null);
+    if (was && !value) this.expanded = this.#chosen;
     this.#matched();
   }
+  #held() {
+    return this.#query ? this.#chosen : this.#expandedNow();
+  }
   get empty() {
     return this.hasAttribute("data-empty");
   }
@@ -85375,10 +85509,12 @@ var SliccFileTree = class extends HTMLElement {
   }
   #expandedNow() {
     const tree = this.#tree;
-    return this.#paths.filter((path) => {
-      const item2 = path.endsWith("/") ? tree?.getItem(path) : null;
-      return !!item2 && "isExpanded" in item2 && item2.isExpanded();
-    }).map((path) => path.slice(0, -1));
+    const open = (path) => {
+      const item2 = tree?.getItem(path);
+      return item2 && "isExpanded" in item2 ? item2.isExpanded() : null;
+    };
+    const shown4 = (path) => path.split("/").slice(0, -2).every((_9, i26, parts2) => open(`${parts2.slice(0, i26 + 1).join("/")}/`) !== false);
+    return this.#paths.filter((path) => path.endsWith("/") && open(path) === true && shown4(path)).map((path) => path.slice(0, -1));
   }
   get gitStatus() {
     return this.#status;
@@ -85392,6 +85528,36 @@ var SliccFileTree = class extends HTMLElement {
   }
   set expanded(value) {
     this.#expanded = value;
+    this.#apply();
+  }
+  #apply() {
+    const tree = this.#tree;
+    if (!tree || this.#paths.length === 0) return;
+    if (this.#query) {
+      this.#chosen = this.#expanded;
+      return;
+    }
+    const wanted = new Set(this.#expanded);
+    this.#applying = true;
+    for (const path of this.#paths) {
+      const item2 = path.endsWith("/") ? tree.getItem(path) : null;
+      if (!item2 || !("isExpanded" in item2)) continue;
+      const open = wanted.has(path.slice(0, -1));
+      if (item2.isExpanded() === open) continue;
+      if (open) item2.expand();
+      else item2.collapse();
+    }
+    this.#applying = false;
+    this.#chosen = this.#expandedNow();
+  }
+  #changed() {
+    if (this.#applying || !this.#tree || this.#query) return;
+    const expanded = this.#expandedNow();
+    if (expanded.join("\n") === this.#chosen.join("\n")) return;
+    this.#chosen = expanded;
+    this.dispatchEvent(
+      new CustomEvent("tree-expand", { detail: { expanded }, bubbles: true, composed: true })
+    );
   }
   get tree() {
     return this.#tree;
@@ -85418,9 +85584,12 @@ var SliccFileTree = class extends HTMLElement {
       onSearchChange: (value) => this.#searched(value)
     });
     this.#tree.render({ containerWrapper: this.#mount });
+    this.#chosen = this.#query ? this.#expanded : this.#expandedNow();
+    this.#tree.subscribe(() => this.#changed());
     this.#matched();
   }
   disconnectedCallback() {
+    if (this.#paths.length > 0) this.#expanded = this.#held();
     this.#tree?.cleanUp();
     this.#tree = null;
     this.#mount?.replaceChildren();