@ai-ecoverse/slicc-spectrum 1.86.1 → 1.86.2

package/README.md

@@ -219,6 +219,7 @@ The sans stack (`--swc-sans-font-family-stack`, also used by the 1.12 components
 
 The shell: header with the agent picker, status items, the update status, the network indicator, the tray, the View menu and the theme switch, rails, and a `<slicc-dock>`.
 Saves the dock layout per screen class to `storage` (default `localStorage`) under `layoutKey`.
+The dock builds new panel content whenever it lays panels out again (a switch between phone, tablet and desktop, or a layout reset), so what the user opens in a panel (sections, cones, rows, folders, disclosures) lives outside the element, per model and panel (`view-state.ts`, in memory only): a rebuilt panel shows it again, and a click on the outgoing panel while the new one mounts reaches the new one too.
 While connected it sets `overscroll-behavior` to `none !important` on the page's `html` and `body`, so only scroll areas inside panels rubber-band.
 It sets the page's `color-scheme` to its resolved theme, and when the page has a `theme-color` meta per `prefers-color-scheme`, gives every one of them the content of the meta for that theme, so the page and the installed app's title bar follow the app's setting instead of the OS.
 When the last app on the page is removed, the page's own inline values and `theme-color` contents come back.
@@ -240,7 +241,7 @@ A tree (`role="tree"`) of cones, with their scoops listed under them.
 A cone with scoops starts with a quiet disclosure chevron (`data-action="toggle-cone"`, `swc-icon-chevron-right`, turned down when open and mirrored right to left); it's `aria-hidden` and out of the Tab order, since the row's `aria-expanded` carries the state.
 The chevron only expands and collapses; a click on the row, <kbd>Enter</kbd> or <kbd>Space</kbd> selects the agent and makes it the active one, which also expands its cone.
 <kbd>→</kbd> expands a cone and then moves to its first scoop, <kbd>←</kbd> moves from a scoop to its cone and then collapses it, and neither changes the active agent.
-Several cones can be open at once, and the active agent's cone is open again whenever the panel mounts, so on a phone a cone you tapped still shows its scoops when you come back to Agents.
+Several cones can be open at once, and they stay open for every view of the panel on the same model, so a layout switch keeps them; when the active agent has changed since the panel last showed it, its cone opens again as the panel mounts, so on a phone a cone you tapped still shows its scoops when you come back to Agents, and a cone you closed stays closed.
 When the active scoop's cone is collapsed, the cone row takes the Tab stop.
 A row's first line starts with one circle: its unread count when there are unread messages (`99+` from a hundred up, at `--swc-font-size-50`, white on the accent fill, or on the negative fill when the cone is in error), otherwise a dot coloured by status.
 Then comes the name; the context fill, when it's high, sits in the top right corner.
@@ -272,6 +273,7 @@ A command's icon is the favicon of the site it names when an open browser tab al
 A running run pulses (still, with a dashed ring, under `prefers-reduced-motion`), a done or cancelled one is grey and a failed one red, each with a corner glyph.
 The card (`.tool[data-tool][data-status][data-kind]`, a `details.run` under a pill and a `div[role=region]` named by its `title` and status under a strip) has no header of its own, no chevron, title, tool name or status: its input (a shell command after `$`), an edit's `diff` shown as a diff view, its output wrapped rather than cut off, an `image`, such as a screenshot, an optional `meta` such as a timeout, a standalone tool message's time ("Ran at 16:12", `.ran`, by the two-minute rule), and its `notes` (`{ severity, text }`, such as "Exited with code 5" or "Full output in /tmp/…") as lines under the output, `li[data-note][data-severity]`: `error` with an alert icon in the negative colour, `warn` with an alert icon and `info` with an info icon, both subdued; media galleries with images, video and audio; action cards for tools, pull requests and status; plans and checklists; inline diffs; question prompts (as decision cards, below); delegations; link previews; errors with a fix-it action, as a grey card (`.error-card[role=alert]`, `data-id` on system errors) inset by a wide margin on each side, a narrower one under 480 px: a red alert icon, the title in bold, the detail subdued and the action on the right, or under the detail below 360 px, announced as "Error: " and the title; a content-filter stop offers **Drop the last turn**, which rewinds that turn and puts its prompt back into the composer; when the turns right before it failed too, the button reads **Drop N failed turns** and rewinds to before the first of them, putting the latest prompt back), system messages (error cards; compactions and notices, rewinds and model changes included, as full-width dividers with a line on each side, like the day: a compaction shows only its title, its `text` kept for screen readers, one that lost messages (`state: 'fallback'`, by default "Compaction failed, transcript truncated", or `discarded`, "Context discarded") an alert icon in the negative colour, and a notice its title and text on one line, `role="note"`; a divider that wraps keeps a short line on each side) and licks, SLICC's events into a cone, on every channel, on the right (`.lick-turn`): a byline with the title and the time by the two-minute rule, then a dashed box (`.lick[data-id][data-channel]`) with the text and the count (×3); emoji pills on its bottom edge (`.reactions .reaction`, `aria-hidden`, each named by its `title`) give the channel (⏰ Schedule, 🪝 Webhook, ✨ Sprinkle, …) and the outcome (👍 Allowed, 👎 Denied, also said in the box's hidden text).
 A lick with a body is a `details.lick` whose head (`summary.lick-head`, with a quiet chevron that turns when open) toggles it with a click, <kbd>Enter</kbd> or <kbd>Space</kbd>; clicking the body doesn't close it.
+Open licks and open tool runs hold for every view of the chat on the same model, so a layout switch keeps them.
 A lick's `severity` (`warn` or `error`) adds an alert icon to its byline, a coloured edge to its box and a spoken prefix.
 Pending permission requests (`sudo-request` licks with `state: 'pending'`) and open questions are decision cards in the centre column (`.decision-turn[data-pending]`, `data-id` the lick's or the question's), inset like a tool cluster (a wide margin on each side, a narrower one under 480 px), with their buttons on the right: **Deny**, then **Allow** (`data-action` `deny` and `allow`), or the question's options.
 A request with `expiresAt` counts down as m:ss; the count is hidden from screen readers, which hear its end time, then "Less than a minute left" and "Timed out", so the log's live region doesn't speak every second; a timed-out request (`data-expired`) loses its buttons.
@@ -341,6 +343,7 @@ A quiet line under it (`[data-seat-note]`) says who reviews ("The host reviews w
 #### `<slicc-files>`
 
 The file system as a `<slicc-file-tree>`, with pending changes as git status.
+It starts with the folders of the pending changes open; once the user opens or closes a folder, every view of Files on the same model shows the same folders open, a rebuilt one included.
 Opening a file opens it in a tab.
 With `files.mountFolder`, **Mount a folder…** (`data-action="mount-folder"`) mounts a local folder, then selects and expands it in the tree; with `files.mounts`, a **Mounted** strip lists the mount points (with `files.mountInfo`, each mount with a `source` reads `/mnt/proj · ref-node/proj`, `data-source` on its `.path`), each with **Eject** (`data-action="eject"`, `data-path` the mount point) when the port has `eject`.
 With `files.needsFolder`, a **Needs a folder** section lists the mount points waiting for a folder, each with **Insert folder…** (`data-action="insert-folder"`, `data-id` the mount point), which calls `mountFolder(path)`.
@@ -382,6 +385,7 @@ It opens on the most recently driven tab (`.focused`), or on the tab overview: c
 The focused tab has **All tabs** (`data-action="all-tabs"`), a tab picker (a list of tabs at 720 px and wider), the URL with **Copy** (`data-action="copy-url"`) and **Open** (`data-action="open-tab"`, activates the tab), who's using it (`.driving[data-driving=agent|user|none]`; a controlled tab without an agent reads **In use** and has no Stop) with a small **Stop <agent>** (`data-action="stop-agent"`) in the same row, which keeps its height with or without an agent, a view-only preview (`figure[data-view]`: `live` while watching with a frame under 3 s old, `shot` with "Updated N s ago", `none`) and the recent actions (`li[data-action-id][data-kind][data-status]`, failures with their error inline), the tab's own filtered first, then the latest 50, with **Show more** (`data-action="more-actions"`) adding 50 earlier ones each time up to all the port has ("Showing the latest N of M"); the list scrolls and takes focus.
 Actions with a URL (`open`, `goto`, `request`) expand (`data-action="action-url"`, `aria-expanded`) to show the full URL, or the request line, under the shortened one.
 Below 480 px they fold into **Recent actions (n)**, a chevron disclosure counting all of them, with the last one showing.
+The tab the user opened (or **All tabs**), expanded URLs and an open **Recent actions** hold for every view of the panel on the same model, so a layout switch keeps them; a closed tab lets go, and the panel opens on the most recently driven tab again.
 Labels, URLs and errors are text only.
 With no tabs and `browser.via` `null` in the network status, it says browser control isn't connected (`data-browser="none"`) with the extension link and the commands to install and run slicc (`curl -fsSL https://get.sliccy.ai/slicc | sh`, then `slicc`, or `npx sliccy@next` with Node).
 The Browser rail button carries a dot (`data-driven`) while a tab is in use.
@@ -419,6 +423,7 @@ Then **Rules SLICC refused** (`[data-refused]`), where the rules live (`[data-po
 The section's `data-vault` is `locked`, `unlocked` or `loading`.
 A popup the browser blocked shows how to allow it (`[data-popup=blocked]`).
 Widened-rule notices aren't shown.
+An open **Removed** list (`details[data-removed]`) stays open across a layout switch.
 
 #### `<slicc-vault-button>`
 
@@ -433,7 +438,7 @@ It closes, clearing the field, when the request leaves `waiting` or while the va
 
 #### `<slicc-updates>`
 
-Install / Update: component states, version changes, last checks, download and link counts, action buttons, failures with Retry, and collapsible install logs.
+Install / Update: component states, version changes, last checks, download and link counts, action buttons, failures with Retry, and collapsible install logs, which stay open across a layout switch.
 Opens at boot until the agent is ready without failures.
 Background updates stay in the header's update status; new failures reopen the panel, and after a reload into a boot that isn't ready yet such a panel closes once the agent is ready.
 Every automatic close is saved to the layout.
@@ -447,7 +452,7 @@ What agents remember, grouped by section: search, filter by scope and tag, expan
 The scope picker starts on **Everyone** (`*`), which lists every memory with its scope on it (`.scope[data-scope]`); `global` reads **Shared** whatever the port calls it, and the cones and roles follow.
 The count (“N of M memories”) counts the memories in the picked scope.
 With a search or tag filter that hides everything it says “No memories match.”, otherwise “No memories yet.”, “No shared memories yet.” or “No memories for {scope} yet.”
-Each memory is a row (`li.row[data-id]`) that opens in place: open rows (`data-open`) take the accent's subtle background and turn their chevron down, and show the body with **Edit** and **Forget** (`data-action="edit"`, `data-action="forget"`).
+Each memory is a row (`li.row[data-id]`) that opens in place, and stays open across a layout switch: open rows (`data-open`) take the accent's subtle background and turn their chevron down, and show the body with **Edit** and **Forget** (`data-action="edit"`, `data-action="forget"`).
 Under the summary, the tag is a subtle badge (`swc-badge[data-tag]`: User indigo, Feedback purple, Project seafoam), then the scope and, for free text outside an entry, “From MEMORY.md” (`.from`).
 Below 560 px of panel width, the search takes its own line over the two pickers.
 The search field is the shared one from `search.ts` (`sp-search[data-action=search]`), as in Files.
@@ -458,7 +463,7 @@ The live monitor: vitals (`.vital[data-id]`), each a meter when it has a `ratio`
 Each card keeps its place whatever it shows: the value line never wraps (a unit or delta that doesn't fit is left out whole rather than cut, and stays in the line's `title` and its text; a vital's optional `hint` replaces that tooltip, such as the exact reset time behind "resets in 4 days"), a card without a `series` keeps the sparkline's room, a meter keeps its description's line, and a card left alone on the last row spans it, so short and long values, 0% and 100%, and missing data move nothing below them.
 Then alerts (an alert's optional `command` shows after its detail, led by its `commandLabel` or "Run", as unwrapped code with **Copy**, `[data-command]` and `data-action="copy-command"`), and the sections (the agent's Tasks, Processes and Recent problems, then terminals, tabs, pending changes and tray followers; cones and sprinkles have their own panels; any other section an agent sends, such as an older agent's `agents` or `sprinkles`, renders the same way).
 Each section (`li.section[data-id]`) shows its count and an attention badge, and opens its surface with **Open** where one exists; the counts line up in one column whether or not a section has **Open**, and a section without rows keeps its name in line with the others (`agents`, `terminals` and `processes` → terminal, `tabs`, `changes`).
-A section with rows expands into them with its toggle (`.toggle`, `aria-expanded`; `data-open` on the section): collapsed by default, expanded while a row is `warn` or `error`, until the user toggles it.
+A section with rows expands into them with its toggle (`.toggle`, `aria-expanded`; `data-open` on the section): collapsed by default, expanded while a row is `warn` or `error`, until the user toggles it; that choice holds for every view of the monitor on the same model, so a layout switch keeps it.
 Each row (`li.row[data-status]`, `data-id` from the row's `id`) shows a status light (blue active, gray idle, orange warn, red error, with the status spoken), the name, the meta line and its badges, indented by `depth` (`data-depth`, up to 6).
 
 #### `<slicc-freezer>`
@@ -504,6 +509,7 @@ The URL is never stored or shown again: closing the dialog drops it.
 The header's **Network** indicator (`data-network`, `data-health`) opens it: a status light, green for `ok`, yellow for `limited` and red for `failing`, with the state in its text and label and `detail` as its tooltip, which adds "Tailscale is connected." while the tailnet runs; on a phone, a cloud icon for the state.
 While a linked device asks to follow, controls the agent, watches it or has a terminal open, an indicator (`data-remote`, `ask`, `prompt`, `terminal` or `watch`) sits before it, **{name} asks to follow**, **Controlled by**, **Terminal open from** or **Watched by** the device's name (or the number of devices; in that order of precedence), says who does what in its tooltip and opens the panel too.
 Offered when the model has a `network` port, a `guests` port, or both.
+**Link another device** and **Other ways to reach the whole web** stay open across a layout switch once opened.
 With `guests` and no `network`, it shows only the Guests section (no connection, Sync, Leaders, Tailscale, Linked devices, Get the whole web or failures), still titled Network with its rail icon, and the header's Network and remote indicators stay hidden; the tray's connection chip is then a plain status.
 
 #### `<slicc-tray>`
@@ -530,6 +536,7 @@ Not for direct use.
 
 Generic.
 [`@pierre/trees`](https://www.npmjs.com/package/@pierre/trees) through its `web-components` entry: `paths` (folders end in `/`), `gitStatus`, `expanded`, `query` (shows only the paths that match it; empty shows all), `reveal(path, focus)`.
+`expanded` also opens and closes the folders of a mounted tree, a `tree-expand` event (`detail.expanded`) reports the open folders when the user changes them, and the tree keeps them when it's moved, such as into a floating group.
 It has no search field of its own.
 Fires `file-open` on click and on <kbd>Enter</kbd>, and `tree-search` (`detail.key`) when a letter or digit is typed in it, for the panel's search field.
 

package/dist/slicc-ui.js

@@ -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();