@ai-ecoverse/slicc-spectrum 1.52.0 → 1.53.0

package/README.md

@@ -119,7 +119,7 @@ Things found while building this against wterm 0.5.4, recorded here, not pushed
 
 ### Layouts and rails
 
-The layout follows the width of `<slicc-app>`, which it reflects as its `screen` attribute: `phone` (under 640 px) has one column, `tablet` (under 1200 px) two, `desktop` three, like SLICC v6. Each screen class starts with few panels open and saves its own layout (`slicc-ui.layout.v2.<screen>`). Every surface has a home side, left, center or right. Closed panels wait as icons in the left and right rails (on a phone, in one bar at the bottom); one click puts a panel back on its side, next to its neighbours. Each thread, a cone's or a scoop's conversation, opens in its own chat panel (`chat:<agent id>`), as a tab in the same group as the other chats. Selecting a thread opens or reveals its tab, activating a chat tab selects its thread, and a thread's chat closes when the thread goes away (frozen or deleted).
+The layout follows the width of `<slicc-app>`, which it reflects as its `screen` attribute: `phone` (under 640 px) has one column, `tablet` (under 1200 px) two, `desktop` three, like SLICC v6. Each screen class starts with few panels open and saves its own layout (`slicc-ui.layout.v2.<screen>`). Every surface has a home side, left, center or right. Every panel has an icon in the left or right rail (on a phone, in one bar at the bottom, with the rest in its More menu). The icon stays when its panel is open; while the panel is visible it shows selected (`.selected`, `data-visible`, labelled "{Title}, shown"). One click puts a closed panel back on its side, next to its neighbours, or brings an open one to the front. Each thread, a cone's or a scoop's conversation, opens in its own chat panel (`chat:<agent id>`), as a tab in the same group as the other chats. Selecting a thread opens or reveals its tab, activating a chat tab selects its thread, and a thread's chat closes when the thread goes away (frozen or deleted).
 
 `surfaces` on `<slicc-app>` (default: every surface, exported as `surfaces`) is what the app offers: the panels it can open, the View menu, the rails and `Alt+1…9`. A saved layout with a panel it doesn't offer is dropped for the default. An embedder can pass a subset with its own `open` per screen class. The agent picker and the tray show only when `chat` is offered, the update status only with `updates`, the network indicator only with `network` and a `network` port, and the settings button only with `settings`. Elements with `slot="status"` show in the header as compact single-line items, before the update status, and are cut with an ellipsis when long; a `hidden` one takes no space. There are no strips under the header. On a phone the status items are hidden.
 
@@ -151,8 +151,8 @@ Text is Adobe Clean Spectrum VF, falling back to Adobe Clean, and code is Spectr
 | `<slicc-monitor>` | The live monitor: vitals with sparklines (active agents, spend, budget, fullest context), alerts, and the topology (cones and scoops, terminals, tabs, pending changes, sprinkles, tray followers). |
 | `<slicc-freezer>` | Every conversation in the session, from `frozen()`: cones, scoops and agent runs, each with a kind badge, live ones first with a Live light, then the newest first. A live row offers **Open**, which selects that agent; a stopped one offers **Thaw** and **Remove**, which deletes its working folders after a confirmation. A thawed scoop or agent run keeps its row, which says what it was thawed as. **Delete cone**, in the agents list (or <kbd>Delete</kbd> on a cone's row) and the header's cone picker, stops a cone after a confirmation; `/freeze` does it at once. Either way its conversation stays here, and a row without a `kind` counts as a cone. |
 | `<slicc-sprinkle>` | A SLICC sprinkle (`.shtml`), as a panel or, with `inline`, as a dip in the chat that grows to fit. A dip has a tab-like handle: drag it into the dock (or onto a rail, or use its open-as-panel button) and it lives on as a sprinkle panel, with a note in the chat where it was; which dips are out is saved in `slicc-ui.dips`. It runs in a sandboxed frame (`allow-scripts` only) with SLICC's sprinkle theme (the `--s2-*` tokens and `.sprinkle-*` classes), the app's fonts, and Lucide icons (`<i data-lucide>`, `LucideIcons.render()`). It talks back through `slicc.lick({ action, data })`, which reaches the owning cone as a `sprinkle` lick, and, when the port has `call`, reads files and keeps state (see [Sprinkle bridge](#sprinkle-bridge)). Panel sprinkles sit at the top of the right rail with their Lucide icon. |
-| `<slicc-network>` | Network: the route and its health in plain words with the bios `detail`, a line on browser automation (`data-browser`: through the SLICC extension, through slicc-node, through a linked device's browser, that slicc-node has no browser attached when `route` is `proxy` and `via` is `null`, or not available with how to get it) when the status has `browser`, **Check again** (`data-action="check"`) when the port has `check`, an **Internet traffic** picker (`data-action="exit"`, in `[data-exit-picker]` with the exit's kind) when the port has `setExit`, the route line saying where traffic goes, and under the picker a warning that traffic waits while the chosen device isn't connected (`data-exit="device"`, `data-held`, with **Send directly**, `data-action="exit-direct"`, which calls `setExit(null)`) or, when `route` isn't `tailnet`, the Tailscale exit node in use (`data-exit="node"`), a **Tailscale** section (`data-tailnet` with the state) when the status has `tailnet`, a **Linked devices** section (`data-links`: `linked`, `connecting`, `reconnecting`, `offline`, `none` or `permission`; each device row has a **Prompting** or **Watching** badge, `data-controlling`, while it controls the agent, and **Allow remote control**, `sp-switch[data-action="remote-control"]`, behind a confirm when turned on, or `data-control="fixed"` for a device on this computer; with `access`, an **Allow** group of **View**, **Control** and **Terminal** switches, `data-action="access-view"`, `access-control` and `access-terminal`, each confirmed when turned on, Terminal's saying it gives a root shell, and Control disabled while View is off; a device that asks to follow shows **Asks to follow** and **Allow**, `data-action="allow-follow"`; a **Terminal open** badge, `data-terminals`, counts its terminals; with `followUrl`, the join details add **Open on another device** with a QR code and the link, `data-join="follow"` and `data-copy="follow-url"`) when the status has `links`, **Get the whole web** with the Chrome extension link (`data-action="install-extension"`, when `extensionUrl` is set) and `npx @ai-ecoverse/slicc-node` with a copy button (`data-action="copy-command"`), folded away when the route already reaches the whole web (`proxy`, `extension` or `tailnet`, whose line names `tailnet.exitNode`) or a linked device is the exit (`exit.kind` `link`: the route line names the device and its `policy`, or says it's waiting for it, and `data-route` is `link`, whatever `route` says), and recent failures with host, error and time. 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 only when the model has a `network` port. |
-| `<slicc-tray>` | The tray indicator in the header: connection, the float's name, followers and budget; its panel adds role, runtime, spend, the follower list, the join link, and disconnect or reconnect. |
+| `<slicc-network>` | Network: the route and its health in plain words with the bios `detail`, a line on browser automation (`data-browser`: through the SLICC extension, through slicc-node, through a linked device's browser, that slicc-node has no browser attached when `route` is `proxy` and `via` is `null`, or not available with how to get it) when the status has `browser`, **Check again** (`data-action="check"`) when the port has `check`, an **Internet traffic** picker (`data-action="exit"`, in `[data-exit-picker]` with the exit's kind) when the port has `setExit`, the route line saying where traffic goes, and under the picker a warning that traffic waits while the chosen device isn't connected (`data-exit="device"`, `data-held`, with **Send directly**, `data-action="exit-direct"`, which calls `setExit(null)`) or, when `route` isn't `tailnet`, the Tailscale exit node in use (`data-exit="node"`), a **Tailscale** section (`data-tailnet` with the state) when the status has `tailnet`, a **Linked devices** section (`data-links`: `linked`, `connecting`, `reconnecting`, `offline`, `none` or `permission`; each device row has a **Prompting** or **Watching** badge, `data-controlling`, while it controls the agent, and **Allow remote control**, `sp-switch[data-action="remote-control"]`, behind a confirm when turned on, or `data-control="fixed"` for a device on this computer; with `access`, an **Allow** group of **View**, **Control** and **Terminal** switches, `data-action="access-view"`, `access-control` and `access-terminal`, each confirmed when turned on, Terminal's saying it gives a root shell, and Control disabled while View is off; a device that asks to follow shows **Asks to follow** and **Allow**, `data-action="allow-follow"`; a **Terminal open** badge, `data-terminals`, counts its terminals; with `followUrl`, the join details add **Open on another device** with a QR code and the link, `data-join="follow"` and `data-copy="follow-url"`) when the status has `links`, **Get the whole web** with the Chrome extension link (`data-action="install-extension"`, when `extensionUrl` is set) and `npx @ai-ecoverse/slicc-node` with a copy button (`data-action="copy-command"`), folded away when the route already reaches the whole web (`proxy`, `extension` or `tailnet`, whose line names `tailnet.exitNode`) or a linked device is the exit (`exit.kind` `link`: the route line names the device and its `policy`, or says it's waiting for it, and `data-route` is `link`, whatever `route` says), and recent failures with host, error and time. When the model has a `tray` port, a **Sync** section (`data-sync` with the connection) follows the connection: the tray's state, the float's name, role and runtime, the join link with **Copy** (`data-action="copy-tray-join"`), the followers (`li[data-follower]`), and **Disconnect** (`data-action="tray-disconnect"`, confirmed) or **Reconnect** (`data-action="tray-reconnect"`). 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 only when the model has a `network` port. |
+| `<slicc-tray>` | The tray items in the header, each opening a panel when that panel is in `panels`: the connection (`#chip`, a status light with the float's name and followers, `data-surface="network"`) opens Network at its **Sync** section, and the budget (`#usage`, `data-surface="monitor"`) opens the Monitor. Without the panel an item is a plain status with its label. |
 | `<slicc-confirm>` | The confirmation dialog `confirm()` opens. Not for direct use. |
 | `<slicc-prompt>` | The name dialog `prompt()` opens. Not for direct use. |
 | `<slicc-file-tree>` | Generic. [`@pierre/trees`](https://www.npmjs.com/package/@pierre/trees) through its `web-components` entry: `paths` (folders end in `/`), `gitStatus`, `expanded`, `reveal(path, focus)`. Fires `file-open` on click and on <kbd>Enter</kbd>. |
@@ -221,7 +221,7 @@ The dummy supports `createDummyModel({ updates: 'boot' | 'starting' | 'current'
 
 `createDummyModel({ approvals: 'agent' | 'user' | 'many' | 'follower' | 'fail' | 'soon' | 'elsewhere' | 'withdrawn' })` (`?approvals=` on `/ui/`) adds waiting sudo requests: one from an agent, one from a terminal user, three in a row (the last as `www-data`), one without `decide`, one whose `decide` fails, one that expires in 24 seconds, or two whose first is answered in another tab or withdrawn after a few seconds. Decisions are recorded in `model.approvals.decisions`, and `model.approvals.end(id, reason)` ends a request.
 
-On phones the update status and the tray show only their status light and the network indicator a cloud icon, with the text in their labels and tooltips; the agent picker keeps room for the cone's name, cut with an ellipsis when long, and the bottom rail scrolls when needed. The update status comes first so progress and failures remain reachable on narrow screens.
+On phones the update status and the tray connection show only their status light (the tray's budget is hidden) and the network indicator a cloud icon, with the text in their labels and tooltips; the agent picker keeps room for the cone's name, cut with an ellipsis when long, and the bottom rail scrolls when needed. The update status comes first so progress and failures remain reachable on narrow screens.
 
 ### Kernel model
 

package/dist/slicc-ui.js

@@ -11895,6 +11895,122 @@ async function copyText(text2) {
   }
 }
 
+// src/app/tray.ts
+var connectionVariant = {
+  live: "positive",
+  connecting: "info",
+  reconnecting: "info",
+  stalled: "notice",
+  offline: "neutral",
+  error: "negative"
+};
+var connectionLabel = {
+  live: "Live",
+  connecting: "Connecting",
+  reconnecting: "Reconnecting",
+  stalled: "Stalled",
+  offline: "Offline",
+  error: "Error"
+};
+function budgetVariant(percent2) {
+  const variant = meterVariant(percent2);
+  return variant === "informative" ? "neutral" : variant;
+}
+function budgetLine(status2) {
+  return `Spent $${status2.spent.toFixed(2)} \xB7 $${status2.rate.toFixed(2)}/h. ${status2.budget.percent}% of the ${status2.budget.window} budget, ${status2.budget.resets}.`;
+}
+var SliccTray = class extends ModelElement {
+  static properties = {
+    ...ModelElement.properties,
+    panels: { attribute: false }
+  };
+  constructor() {
+    super();
+    this.panels = ["network", "monitor"];
+  }
+  static styles = [
+    shared,
+    i`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--swc-spacing-75);
+      }
+      .chip > span {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--swc-spacing-75);
+      }
+      span.chip,
+      span.usage {
+        display: inline-flex;
+        align-items: center;
+        padding-inline: var(--swc-spacing-100);
+      }
+      swc-status-light {
+        align-self: center;
+      }
+      .chip .followers {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--swc-spacing-50);
+      }
+      :host([compact]) .chip .detail,
+      :host([compact]) .usage {
+        display: none;
+      }
+      .muted {
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
+    `
+  ];
+  subscribe(model) {
+    return [model.tray.on("status", () => this.requestUpdate())];
+  }
+  #open(id, section) {
+    this.dispatchEvent(
+      new CustomEvent("show-surface", {
+        detail: section ? { id, section } : { id },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  #item(id, surface2, label, content, open) {
+    return this.panels.includes(surface2) ? b`<swc-action-button id=${id} class=${id} size="s" quiet data-surface=${surface2} accessible-label=${label} @click=${open}>${content}</swc-action-button>` : b`<span id=${id} class=${id} tabindex="0" role="img" aria-label=${label}>${content}</span>`;
+  }
+  render() {
+    const model = this.model;
+    if (!model) return b``;
+    const status2 = model.tray.status();
+    const connection = connectionLabel[status2.connection];
+    const followers = `${status2.followers.length} ${status2.followers.length === 1 ? "follower" : "followers"}`;
+    const light = status2.connection === "live" ? status2.name : `${status2.name}, ${connection}`;
+    const budget = `Budget ${status2.budget.percent}%`;
+    return b`${this.#item(
+      "chip",
+      "network",
+      `Tray ${status2.name}: ${connection}, ${followers}`,
+      b`<span>
+          <swc-status-light size="s" variant=${connectionVariant[status2.connection]}>
+            <span class="detail">${light}</span>
+          </swc-status-light>
+          <span class="detail muted followers"><swc-icon-user-group size="s"></swc-icon-user-group>${status2.followers.length}</span>
+        </span>`,
+      () => this.#open("network", "sync")
+    )}
+      <swc-tooltip for="chip" placement="bottom">${`${connection}, ${followers}`}</swc-tooltip>
+      ${this.#item(
+      "usage",
+      "monitor",
+      `${budget}. ${budgetLine(status2)}`,
+      b`<swc-status-light size="s" variant=${budgetVariant(status2.budget.percent)}>${budget}</swc-status-light>`,
+      () => this.#open("monitor")
+    )}
+      <swc-tooltip for="usage" placement="bottom">${budgetLine(status2)}</swc-tooltip>`;
+  }
+};
+
 // src/app/network.ts
 var networkHealth = {
   ok: ["positive", "Full access"],
@@ -12139,7 +12255,8 @@ var SliccNetwork = class extends ModelElement {
     busy: { state: true },
     tailnetError: { state: true },
     tailnetCopied: { state: true },
-    linksError: { state: true }
+    linksError: { state: true },
+    syncError: { state: true }
   };
   constructor() {
     super();
@@ -12151,6 +12268,7 @@ var SliccNetwork = class extends ModelElement {
     this.tailnetError = "";
     this.tailnetCopied = "";
     this.linksError = "";
+    this.syncError = "";
   }
   static styles = [
     r(link_default),
@@ -12181,6 +12299,7 @@ var SliccNetwork = class extends ModelElement {
         display: grid;
         gap: var(--swc-spacing-200);
         align-content: start;
+        scroll-margin-top: var(--swc-spacing-300);
       }
       h2 {
         margin: 0;
@@ -12424,7 +12543,21 @@ var SliccNetwork = class extends ModelElement {
     this.error = "";
     this.tailnetError = "";
     this.linksError = "";
-    return model.network ? [model.network.on("network", () => this.requestUpdate())] : [];
+    this.syncError = "";
+    const update = () => this.requestUpdate();
+    return [
+      model.tray.on("status", update),
+      ...model.network ? [model.network.on("network", update)] : []
+    ];
+  }
+  reveal(section) {
+    void this.updateComplete.then(() => {
+      const target = this.renderRoot.querySelector(
+        `section[aria-labelledby="${section}"]`
+      );
+      target?.querySelector("swc-button, swc-action-button")?.focus({ focusVisible: false });
+      target?.scrollIntoView({ block: "start" });
+    });
   }
   focus() {
     this.focusWith(
@@ -12787,6 +12920,35 @@ var SliccNetwork = class extends ModelElement {
       ${this.error ? b`<div class="error" role="alert"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${this.error}</span></div>` : A}
     </section>`;
   }
+  async #disconnect(tray, name, trigger2) {
+    const ok = await confirm({
+      title: `Disconnect from ${name}?`,
+      body: "This SLICC stops syncing with the tray until you reconnect.",
+      action: "Disconnect",
+      variant: "confirmation",
+      trigger: trigger2
+    });
+    if (ok) tray.disconnect();
+  }
+  #sync(tray) {
+    const status2 = tray.status();
+    return b`<section aria-labelledby="sync" data-sync=${status2.connection}>
+      <div class="head">
+        <h2 id="sync">Sync</h2>
+        <swc-status-light variant=${connectionVariant[status2.connection]}>${connectionLabel[status2.connection]}</swc-status-light>
+      </div>
+      <dl class="node">
+        <dt>Name</dt><dd>${status2.name}</dd>
+        <dt>Role</dt><dd>${status2.role}</dd>
+        <dt>Runs in</dt><dd>${status2.kind}</dd>
+        ${status2.joinUrl ? this.#copyRow("tray-join", "Join link", status2.joinUrl, "syncError", "join link") : A}
+      </dl>
+      <h3 id="sync-followers">Followers</h3>
+      ${status2.followers.length ? b`<ul aria-labelledby="sync-followers" data-followers>${status2.followers.map((follower) => b`<li data-follower=${follower.id}>${follower.name} <span class="muted">${follower.device}</span></li>`)}</ul>` : b`<p class="muted" data-followers>No one else is connected.</p>`}
+      <div class="actions">${status2.connection === "offline" ? b`<swc-button size="m" variant="secondary" data-action="tray-reconnect" @click=${() => tray.reconnect()}>Reconnect</swc-button>` : b`<swc-button size="m" variant="secondary" data-action="tray-disconnect" @click=${(event2) => this.#disconnect(tray, status2.name, event2.currentTarget)}>Disconnect</swc-button>`}</div>
+      ${this.syncError ? b`<div class="error" role="alert" data-error="sync"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${this.syncError}</span></div>` : A}
+    </section>`;
+  }
   #ways(status2) {
     return reach({
       intro: "Install the SLICC Chrome extension, or run slicc-node on this computer. Either one reaches every site.",
@@ -12827,6 +12989,7 @@ var SliccNetwork = class extends ModelElement {
     const status2 = networkStatus(port);
     return b`<div class="page" tabindex="-1">
       ${this.#state(port, status2)}
+      ${this.#sync(this.model.tray)}
       ${this.#tailnetSection(port, status2)}
       ${this.#linksSection(port, status2)}
       ${this.#whole(status2)}
@@ -13087,14 +13250,9 @@ function defaultLayout(dock, screen, agent, items = surfaces, terminals = []) {
   const chat = chats(dock)[0];
   if (chat) dock.api.getPanel(chat)?.api.setActive();
 }
-function closed(dock, items = surfaces) {
-  const grouped = {
-    chat: () => chats(dock),
-    terminal: () => terminalPanels(dock)
-  };
-  return items.filter(
-    (item2) => item2.id in grouped ? grouped[item2.id]().length === 0 : !dock.has(item2.id)
-  );
+function shown(dock, id) {
+  const ids = id === "chat" ? chats(dock) : id === "terminal" ? terminalPanels(dock) : [id];
+  return ids.some((panel) => dock.api.getPanel(panel)?.api.isVisible === true);
 }
 function sprinkleSurface(sprinkle) {
   return {
@@ -21150,8 +21308,8 @@ var SliccUpdates = class extends ModelElement {
   #checked(at) {
     if (at === null) return b`<span>Not checked yet</span>`;
     const date = new Date(at);
-    const shown = date.toLocaleString("en-GB", { dateStyle: "medium", timeStyle: "short" });
-    return b`<span>Checked <time datetime=${date.toISOString()}>${shown}</time></span>`;
+    const shown2 = date.toLocaleString("en-GB", { dateStyle: "medium", timeStyle: "short" });
+    return b`<span>Checked <time datetime=${date.toISOString()}>${shown2}</time></span>`;
   }
   #item(item2) {
     const [variant, state2] = states[item2.state];
@@ -21208,14 +21366,14 @@ var SliccUpdates = class extends ModelElement {
   #package(item2, all2, act) {
     const light = packageStates[item2.state];
     const busy = this.busy.get(item2.id);
-    const shown = busy ? [busy] : act ? item2.actions : [];
+    const shown2 = busy ? [busy] : act ? item2.actions : [];
     const error = this.problems.get(item2.id) ?? item2.error;
     return b`<li data-id=${item2.id} data-state=${item2.state}>
       <div class="name">
         <h3 title=${item2.package}>${item2.label}</h3>
         ${light ? b`<swc-status-light size="s" variant=${light[0]}>${light[1]}</swc-status-light>` : A}
       </div>
-      <div class="buttons">${shown.map(
+      <div class="buttons">${shown2.map(
       (action) => b`<swc-button
             size="s"
             variant="secondary"
@@ -21286,7 +21444,7 @@ var allAgents = "slicc:all-agents";
 var newCone = "slicc:new-cone";
 var deleteActiveCone = "slicc:delete-cone";
 var railPitch = 52;
-var phoneRail = ["agents", "files", "changes", "terminal", "browser"];
+var phoneRail = ["chat", "agents", "files", "changes", "terminal", "browser"];
 function railCapacity(width, count) {
   if (!width) return count;
   const slots = Math.max(1, Math.floor((width - 16 + 4) / railPitch));
@@ -21461,6 +21619,16 @@ var SliccApp = class extends ThemedElement {
     .rail:empty {
       display: none;
     }
+    .rail 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);
+      --swc-action-button-background-color-down: var(--swc-neutral-background-color-selected-down);
+      --swc-action-button-background-color-focus: var(--swc-neutral-background-color-selected-key-focus);
+      --swc-action-button-content-color-default: var(--swc-gray-25);
+      --swc-action-button-content-color-hover: var(--swc-gray-25);
+      --swc-action-button-content-color-down: var(--swc-gray-25);
+      --swc-action-button-content-color-focus: var(--swc-gray-25);
+    }
     .badged {
       position: relative;
       display: inline-flex;
@@ -21779,6 +21947,7 @@ var SliccApp = class extends ThemedElement {
   }
   #activated(event2) {
     const { id } = event2.detail;
+    this.requestUpdate();
     this.terminalPanels.activated(id);
     const agent = chatAgent(id);
     if (agent && agent !== this.model?.agent.active()) this.model?.agent.select(agent);
@@ -21788,7 +21957,11 @@ var SliccApp = class extends ThemedElement {
     defaultLayout(this.dock, this.screen, this.#active(), this.#available(), terminals);
     this.#save();
   }
-  show(id) {
+  #showSurface(event2) {
+    const { id, section } = event2.detail;
+    this.show(id, section);
+  }
+  show(id, section) {
     const agent = this.#active();
     if (id === "chat" && agent && this.#offers("chat")) {
       openChat(this.dock, agent, this.screen);
@@ -21808,6 +21981,8 @@ var SliccApp = class extends ThemedElement {
     openSurface(this.dock, item2, this.screen);
     if (id === "updates") this.dock.api.getPanel(id)?.api.updateParameters({ boot: false });
     this.dock.focusPanel(id);
+    if (section)
+      this.dock.content(id)?.reveal?.(section);
   }
   #sprinkle(id) {
     return this.model?.sprinkles.list().find((candidate) => candidate.id === id);
@@ -21840,8 +22015,9 @@ var SliccApp = class extends ThemedElement {
   #railButton(item2, side) {
     const changes = item2.id === "changes" ? this.#changes() : 0;
     const driven = item2.id === "browser" && !!this.model?.browser.list().some((tab) => tab.controlled);
-    const label = changes ? `Open ${item2.title}, ${changeCount(changes)}` : driven ? `Open ${item2.title}, a tab is in use` : `Open ${item2.title}`;
-    const button = u16`<swc-action-button id=${`rail-${item2.id}`} quiet size="m" accessible-label=${label} data-surface=${item2.id} @click=${() => this.show(item2.id)}>${railIcon(item2.icon)}</swc-action-button>`;
+    const visible2 = shown(this.dock, item2.id);
+    const label = `${visible2 ? `${item2.title}, shown` : `Open ${item2.title}`}${changes ? `, ${changeCount(changes)}` : driven ? ", a tab is in use" : ""}`;
+    const button = u16`<swc-action-button id=${`rail-${item2.id}`} class=${visible2 ? "selected" : ""} quiet size="m" accessible-label=${label} data-surface=${item2.id} ?data-visible=${visible2} @click=${() => this.show(item2.id)}>${railIcon(item2.icon)}</swc-action-button>`;
     const tooltip = b`<swc-tooltip for=${`rail-${item2.id}`} placement=${{ left: "end", right: "start", bottom: "top" }[side]}>${item2.title}</swc-tooltip>`;
     return changes ? b`<span class="badged">${button}<swc-badge size="s" variant="neutral" aria-hidden="true">${changes}</swc-badge></span>${tooltip}` : driven ? b`<span class="badged">${button}<span class="dot" data-driven aria-hidden="true"></span></span>${tooltip}` : b`${button}${tooltip}`;
   }
@@ -21862,20 +22038,20 @@ var SliccApp = class extends ThemedElement {
   #rail(items, side) {
     const primary = side === "bottom" ? items.filter((item2) => phoneRail.includes(item2.id)) : items;
     const fit = primary.length < items.length ? Math.min(primary.length, railCapacity(this.#width, Infinity)) : railCapacity(this.#width, items.length);
-    const shown = side === "bottom" ? primary.slice(0, fit) : items;
-    return b`<nav class=${`rail ${side}`} aria-label=${`Closed panels, ${side}`} @dragover=${this.#railOver} @dragleave=${this.#railLeave} @drop=${this.#railDrop}>${shown.map(
+    const shown2 = side === "bottom" ? primary.slice(0, fit) : items;
+    return b`<nav class=${`rail ${side}`} aria-label=${`Panels, ${side}`} @dragover=${this.#railOver} @dragleave=${this.#railLeave} @drop=${this.#railDrop}>${shown2.map(
       (item2) => this.#railButton(item2, side)
-    )}${this.#more(items.filter((item2) => !shown.includes(item2)))}</nav>`;
+    )}${this.#more(items.filter((item2) => !shown2.includes(item2)))}</nav>`;
   }
   #rails() {
     const dock = this.renderRoot.querySelector("slicc-dock");
-    const sprinkles = (this.model?.sprinkles.list() ?? []).filter((sprinkle) => !sprinkle.inline || this.dips.has(sprinkle.id)).map(sprinkleSurface).filter((item2) => !dock?.has(item2.id));
-    const shut = dock && this.#started ? [...sprinkles, ...closed(dock, this.#available())] : [];
+    const sprinkles = (this.model?.sprinkles.list() ?? []).filter((sprinkle) => !sprinkle.inline || this.dips.has(sprinkle.id)).map(sprinkleSurface);
+    const all2 = dock && this.#started ? [...sprinkles, ...this.#available()] : [];
     const phone = this.screen === "phone";
     return {
-      left: this.#rail(phone ? [] : shut.filter((item2) => item2.side !== "right"), "left"),
-      right: this.#rail(phone ? [] : shut.filter((item2) => item2.side === "right"), "right"),
-      bottom: phone ? this.#rail(shut, "bottom") : A
+      left: this.#rail(phone ? [] : all2.filter((item2) => item2.side !== "right"), "left"),
+      right: this.#rail(phone ? [] : all2.filter((item2) => item2.side === "right"), "right"),
+      bottom: phone ? this.#rail(all2, "bottom") : A
     };
   }
   newTerminal() {
@@ -22047,7 +22223,7 @@ var SliccApp = class extends ThemedElement {
           ${this.#updatesIndicator()}
           ${this.#remoteIndicator()}
           ${this.#networkIndicator()}
-          ${this.#offers("chat") ? b`<slicc-tray .model=${this.model} ?compact=${this.screen === "phone"}></slicc-tray>` : A}
+          ${this.#offers("chat") ? b`<slicc-tray .model=${this.model} .panels=${["network", "monitor"].filter((id) => this.#offers(id))} ?compact=${this.screen === "phone"} @show-surface=${this.#showSurface}></slicc-tray>` : A}
           <sp-action-menu size="s" quiet label="View" @change=${this.#view}>
             <swc-icon-view-grid slot="icon"></swc-icon-view-grid>
             <span slot="label" class="view-label">View</span>
@@ -22081,7 +22257,7 @@ var SliccApp = class extends ThemedElement {
             @open-file=${(event2) => this.#request("file", event2)}
             @open-diff=${(event2) => this.#request("diff", event2)}
             @new-terminal=${() => this.newTerminal()}
-            @show-surface=${(event2) => this.show(event2.detail.id)}
+            @show-surface=${this.#showSurface}
           ></slicc-dock>
           ${rails.right}
         </main>
@@ -26463,8 +26639,8 @@ var SliccMemory = class extends ModelElement {
     const scopes = this.#scopes;
     const scope = this.scope;
     const option2 = (item2) => b`<sp-menu-item value=${item2.id}>${item2.label}</sp-menu-item>`;
-    const shown = visible(all2, scope, this.tag, this.query);
-    return b`<div class="bar"><span>${shown.length} of ${all2.filter((memory) => memory.scope === scope).length} memories</span><span class="spacer"></span>
+    const shown2 = visible(all2, scope, this.tag, this.query);
+    return b`<div class="bar"><span>${shown2.length} of ${all2.filter((memory) => memory.scope === scope).length} memories</span><span class="spacer"></span>
         <swc-action-button size="s" quiet @click=${() => this.editing = "new"}><swc-icon-add slot="icon"></swc-icon-add>Remember</swc-action-button>
       </div>
       <div class="tools">
@@ -26486,7 +26662,7 @@ var SliccMemory = class extends ModelElement {
       </div>
       <div class="list">
         ${this.editing === "new" ? b`<div class="row">${this.#form({ scope })}</div>` : A}
-        ${shown.length ? sections(shown).map(
+        ${shown2.length ? sections(shown2).map(
       ([section, items]) => b`<h3>${section}</h3>${items.map((memory) => this.#row(memory))}`
     ) : b`<div class="note">${all2.length ? "No memories match." : "No memories yet."}</div>`}
       </div>`;
@@ -27659,164 +27835,6 @@ ${data.html}`;
   }
 };
 
-// src/app/tray.ts
-var connectionVariant = {
-  live: "positive",
-  connecting: "info",
-  reconnecting: "info",
-  stalled: "notice",
-  offline: "neutral",
-  error: "negative"
-};
-var connectionLabel = {
-  live: "Live",
-  connecting: "Connecting",
-  reconnecting: "Reconnecting",
-  stalled: "Stalled",
-  offline: "Offline",
-  error: "Error"
-};
-var SliccTray = class extends ModelElement {
-  static properties = {
-    ...ModelElement.properties,
-    copied: { state: true }
-  };
-  constructor() {
-    super();
-    this.copied = false;
-  }
-  static styles = [
-    shared,
-    i`
-      :host {
-        display: inline-block;
-      }
-      .chip > span {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--swc-spacing-75);
-      }
-      .chip swc-status-light {
-        align-self: center;
-      }
-      .chip .followers {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--swc-spacing-50);
-      }
-      :host([compact]) .chip .detail {
-        display: none;
-      }
-      .muted {
-        color: var(--swc-neutral-subdued-content-color-default);
-      }
-      .panel {
-        display: grid;
-        gap: var(--swc-spacing-200);
-        width: calc(var(--swc-spacing-400) * 12);
-        max-width: 100%;
-        padding: var(--swc-spacing-300);
-        box-sizing: border-box;
-        font-size: var(--swc-font-size-100);
-        color: var(--swc-neutral-content-color-default);
-      }
-      dl {
-        display: grid;
-        grid-template-columns: auto 1fr;
-        gap: var(--swc-spacing-75) var(--swc-spacing-200);
-        margin: 0;
-      }
-      dt {
-        color: var(--swc-neutral-subdued-content-color-default);
-      }
-      dd {
-        margin: 0;
-      }
-      h3 {
-        margin: 0 0 var(--swc-spacing-75);
-        font-size: inherit;
-        font-weight: var(--swc-bold-font-weight);
-      }
-      ul {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-      }
-      swc-meter {
-        width: 100%;
-      }
-      .actions {
-        display: flex;
-        flex-wrap: wrap;
-        gap: var(--swc-spacing-100);
-      }
-    `
-  ];
-  subscribe(model) {
-    return [model.tray.on("status", () => this.requestUpdate())];
-  }
-  async #disconnect(name, trigger2) {
-    const body4 = "This SLICC stops syncing with the tray until you reconnect.";
-    const title = `Disconnect from ${name}?`;
-    if (await confirm({ title, body: body4, action: "Disconnect", variant: "confirmation", trigger: trigger2 }))
-      this.model?.tray.disconnect();
-  }
-  async copy() {
-    const url = this.model?.tray.status().joinUrl ?? "";
-    await globalThis.navigator?.clipboard?.writeText(url).catch(() => {
-    });
-    this.copied = true;
-  }
-  render() {
-    const model = this.model;
-    if (!model) return b``;
-    const status2 = model.tray.status();
-    const connection = connectionLabel[status2.connection];
-    const followers = `${status2.followers.length} ${status2.followers.length === 1 ? "follower" : "followers"}`;
-    const light = status2.connection === "live" ? status2.name : `${status2.name}, ${connection}`;
-    return b`<swc-action-button
-        id="chip"
-        class="chip"
-        size="s"
-        quiet
-        accessible-label=${`Tray ${status2.name}: ${connection}, ${followers}`}
-      >
-        <span>
-          <swc-status-light size="s" variant=${connectionVariant[status2.connection]}>
-            <span class="detail">${light}</span>
-          </swc-status-light>
-          <span class="detail muted followers"><swc-icon-user-group size="s"></swc-icon-user-group>${status2.followers.length}</span>
-        </span>
-      </swc-action-button>
-      <swc-tooltip for="chip" placement="bottom">${`${connection}, ${followers}`}</swc-tooltip>
-      <swc-popover for="chip" placement="bottom-end" accessible-label="Tray" @swc-open=${() => {
-      this.copied = false;
-    }}>
-        <div class="panel">
-          <dl>
-            <dt>Name</dt><dd>${status2.name}</dd>
-            <dt>Connection</dt><dd>${connection}</dd>
-            <dt>Role</dt><dd>${status2.role}</dd>
-            <dt>Runs in</dt><dd>${status2.kind}</dd>
-            <dt>Spent</dt><dd>$${status2.spent.toFixed(2)} · $${status2.rate.toFixed(2)}/h</dd>
-          </dl>
-          <swc-meter size="s" value=${status2.budget.percent} variant=${meterVariant(status2.budget.percent)}>
-            <span slot="label">Budget (${status2.budget.window})</span>
-            <span slot="description">${status2.budget.resets}</span>
-          </swc-meter>
-          <div>
-            <h3>Followers</h3>
-            ${status2.followers.length ? b`<ul>${status2.followers.map((follower) => b`<li>${follower.name} <span class="muted">${follower.device}</span></li>`)}</ul>` : b`<div class="muted">No one else is connected.</div>`}
-          </div>
-          <div class="actions">
-            <swc-action-button size="s" @click=${() => this.copy()}>${this.copied ? "Copied" : "Copy join link"}</swc-action-button>
-            ${status2.connection === "offline" ? b`<swc-action-button size="s" @click=${() => model.tray.reconnect()}>Reconnect</swc-action-button>` : b`<swc-action-button size="s" @click=${(event2) => this.#disconnect(status2.name, event2.currentTarget)}>Disconnect</swc-action-button>`}
-          </div>
-        </div>
-      </swc-popover>`;
-  }
-};
-
 // node_modules/@pierre/diffs/dist/constants.js
 var DIFFS_TAG_NAME = "diffs-container";
 var DIFFS_DEVELOPMENT_BUILD = (() => {