@ai-ecoverse/slicc-spectrum 1.73.2 → 1.74.0

package/README.md

@@ -136,7 +136,7 @@ Text is Adobe Clean Spectrum VF, falling back to Adobe Clean, and code is Spectr
 | :--- | :--- |
 | `<slicc-app>` | 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`. 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. With a `follow` port, the header shows a `<slicc-follow>` chip, and while the follower connects, waits to be allowed, is unlinked or fails, a `<slicc-follow page>` (`.alone[data-follow]` with the page kind) takes the place of the panels; without Terminal access, the terminal surface and New terminal aren't offered, and open terminals close when it's taken away. |
 | `<slicc-dock>` | Generic. [dockview-core](https://dockview.dev/) 8 with a theme mapped to Spectrum tokens, in its own shadow root. Panels come from `factories` (`name → (params) => HTMLElement`). `open`, `close`, `has`, `content`, `focusPanel`, `cycleGroup`, `cycleTab`, `toJSON`, `restore`, `clear`, and the full `api`. Tabs have a context menu (close, close others, float, maximize). Events: `layout-change`, `active-panel-change`, `panel-close`. |
-| `<slicc-agents>` | Cones with their scoops, status, context fill and unread count. A cone's row has a second line with its conversation title, as does its item in the header's cone picker: `Agent.title`, or else the first line of the first user message, or "No messages yet". When cones share a name, their accessible names and the Delete cone, Freezer and confirmation labels add the title, as in "Delete cone sliccy (Hello from Bedrock)". Selecting one makes it the active agent. |
+| `<slicc-agents>` | A tree (`role="tree"`) of cones, with their scoops hidden under them. A row's first line starts with one circle: its unread count when there are unread messages (`9+` from ten up, white on the accent fill), otherwise a dot coloured by status. Then comes the name; the context fill, when it's high, sits in the top right corner. Every row has up to two lines starting with its status in words (`.state`, such as "Working"), then its conversation title, so the status stays visible when the unread count takes the circle; the accessible name says the status and the exact unread count too. A cone's row also has a ribbon along its bottom with one fixed-width segment per scoop, coloured by status; it's `aria-hidden`, and the cone's `aria-description` sums it up, as in "2 scoops: 1 working, 1 idle". On hover, on keyboard focus of the row, or when <kbd>Tab</kbd> from the selected row reaches its drop or delete button, a strip the full height of the row's right edge holds that button over the text; the context fill stays on top of it, and it hides again once a pointer that clicked it leaves. A click, <kbd>Enter</kbd> or <kbd>Space</kbd> on a cone expands or collapses it, as do <kbd>→</kbd> and <kbd>←</kbd> (<kbd>→</kbd> on an expanded cone moves to its first scoop, <kbd>←</kbd> on a scoop to its cone); only the focused cone is expanded, and its scoops list below it. A cone with scoops carries `aria-expanded`, and `aria-controls` names its scoop rows while they show. Expanding and collapsing have no motion. **New cone** sits at the bottom. The conversation title is also shown in the header's cone picker: `Agent.title`, or else the first line of the first user message, or "No messages yet". When cones share a name, their accessible names and the Delete cone, Freezer and confirmation labels add the title, as in "Delete cone sliccy (Hello from Bedrock)". Selecting one makes it the active agent. |
 | `<slicc-chat>` | One thread's conversation (its `agent`, or the active agent if unset), by day. A message's time shows only when it is at least two minutes newer than the last time shown, and the first one after each day separator always shows; a hidden time stays for screen readers (`time.sr` with `datetime`, or `.sr` on licks and cards), and a meta row left empty isn't rendered. User messages (with attachments and a quiet timestamp, `time.when`, by that rule; the reader's own carry no name or delivery tag, while `data-mode` and `data-delivered` still say how they went; a message from another cone, a follower or a guest says who sent it, and an agent's request carries its name and an Agent badge; a message from another agent, an agent's request or a message `from` a cone (`origin` `agent`, or `from` set without `origin` `follower` or `guest`), is `[data-remote]`: a subtle indigo bubble and a 🤖 pill on its bottom edge, `aria-hidden` since the byline names the sender; people, the reader included, never get it), assistant messages (with the time by that rule, and the model only on the first reply and whenever it changes from the previous one, `.meta .model` with the usage as its tooltip; without a model the usage is the time's tooltip, and with neither it is the reply's own (`.reply[title]`); the turn always carries the usage as its `aria-description`; the cone's name isn't repeated; Markdown with tables, task lists, quotes, code and images; thinking; tool runs, one icon per run (`<slicc-tool-runs>`): three or more runs in a row form a cluster, a strip of icon buttons (`data-action="open-run"`, `data-target` the call's id, named by its `title` and status, `aria-expanded`) that each open one run's card below it, and on the right the model's label for the run, a button (`data-action="open-cluster"`, `aria-expanded`, named "Show all runs" while it has no text) that opens every card; the strip's tooltip and the group's accessible name sum it up, such as "3 commands, 1 read. Done"; prose breaks a run, hidden thinking and source links don't, and a standalone tool message or a done reply with only tool calls continues the run before it on the same day, its `data-id` moving onto its first card (`.tool[data-id]`); a single run is a strip of one, its icon and its `title` as the label, which opens with <kbd>Enter</kbd> or <kbd>Space</kbd> like the strip's buttons. A strip and its cards share one width, the column less a wide margin on each side, so they read as centred, and their edges line up. Icons fill from the start of a space kept for five, so a run that grows doesn't move its strip or its label; past five, the strip shows the newest five and scrolls back to the older ones, with <kbd>Tab</kbd> or a swipe, and returns to the newest when a run is added or the strip comes back into view. The label sits at the end and is cut with an ellipsis before it reaches that space. Under 480 px of column width the label takes a row of its own under the icons, which then show as many whole icons as fit. A cluster's label comes from the agent port's optional `toolLabel(agentId, callIds)`, asked once for each agent port, agent and set of runs; while a growing run waits for its new label, it keeps its last one, and without `toolLabel` the label is empty. A command's icon is the favicon of the site it names when an open browser tab already has a `data:` favicon for it (nothing is fetched; otherwise the globe), else the file browser's icon for the file it names, else the code icon; other tools show their kind's icon. 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; 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, with their time by the two-minute rule; a lick's `severity` (`warn` or `error`) turns its channel badge into a notice or negative one with an alert icon. Permission requests are allowed or denied in place. The header is one row: the status, a model picker that names each model's provider and leaves out classifiers and models with `tools: false` (with no model on offer, **Set up a model**, `data-action="set-up-model"`, opens Settings), the thinking picker, the context meter and **New conversation**, which calls `clear` and puts focus back in the composer; on a cone, when the port can freeze, its tooltip says the old conversation stays in the Freezer. It never wraps: when it's short of room, the model picker's label is cut with an ellipsis, and under 560px wide (`header[data-compact]`) New conversation is icon-only, with `accessible-label` and its tooltip. The pickers re-read `models()` on `settings`, `accounts` and `agents`. When a live agent's model, or `Settings.model`, is no longer offered and its provider (the id before `/`) isn't a connected account, it moves to the offered chat model with `default: true`, else the first one; frozen agents are left alone, and so is everything on a follower unless it has Control and is connected. The chat re-runs this on `follow` too, and `<slicc-app>` does it as well, when it binds, on those events and on `follow`, so a new cone that starts on a provider that isn't set up moves at once. The transcript pads its end, and its `scroll-padding-block-end`, by the composer's measured height, so at the bottom the last message sits above the composer and a focused element scrolls clear of it. While a reply streams, its status icon follows what it is doing: a pencil for an edit, a page for a read, a magnifier for a search, an eye for the browser and an hourglass for any other tool; thinking and text keep the AI logo. Between the header and the transcript, a `<slicc-notices>` shows the model's notices. On a follower without Control, a note (`p[data-follow="watch"]`) takes the composer's place, the header shows the model's name instead of the pickers and New conversation, and there's no suggested follow-up. |
 | `<slicc-notices>` | The model's `notices` as in-line alerts with their actions and a close button, after a banner from the `tabs` port when another tab is paused or runs a different SLICC, and a warning for each waiting approval when the `approvals` port has no `decide` (`[data-approval-notice]`); renders nothing without any. |
 | `<slicc-approvals>` | The model's waiting `approvals` as a modal alert dialog, one at a time, oldest first; `<slicc-app>` mounts it. Renders nothing without `approvals.decide`. A request that `secretRules()` flags shows a warning (`[data-secret-rules]`, the path or token) and no **Always allow (**Always allow in this directory**, with the cwd in its hint, when the approval has `alwaysScope: 'cwd'` and a `cwd`)**. Focus starts on Deny and goes back, after Deny, Always allow, Allow once, <kbd>Esc</kbd> or Close, to what had it when the dialog opened; inside a terminal, to that `<slicc-terminal>` through its own `focus()`, even when it remounted meanwhile. |
@@ -156,7 +156,7 @@ Text is Adobe Clean Spectrum VF, falling back to Adobe Clean, and code is Spectr
 | `<slicc-memory>` | What agents remember, grouped by section: search, filter by scope and tag, expand, edit, add and forget. 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"`). 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. |
 | `<slicc-monitor>` | The live monitor: vitals (`.vital[data-id]`), each a meter when it has a `ratio` (budget, fullest context) and otherwise a value, its unit and delta on one line and a sparkline from its `series` (spend, active agents, processes, process memory). 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. 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>` | 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-sprinkle>` | A SLICC sprinkle (`.shtml`), as a panel or, with `inline`, as a dip in the chat that grows to fit, even when it loads out of view (the frame measures itself on load, after icons and fonts arrive, and on every resize). 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 on this computer (`proxy`, or a linked device on this computer), through a linked device's browser, that slicc on this computer has no browser to control when it carries the traffic 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 the commands to run slicc, each in a `.command[data-command]` block with a copy button: `curl -fsSL https://get.sliccy.ai/slicc | sh` (its button is `data-action="copy-command"`), `slicc`, and, with Node, `npx sliccy@next`; folded away when the route already reaches the whole web (`proxy`, `extension`, `link` or `tailnet`, whose line names `tailnet.exitNode`) or a linked device is the exit (`exit.kind` `link`: the route line says "Through slicc on this computer" for a `local` device, or names a remote 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, masked (`…/join/••••••`) until **Show** (`data-action="reveal-tray-join"`, which turns into **Hide**), 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"`). When the status has `leaders`, a **Leaders** section (`section[data-leaders]` with the count) follows Sync, since it's the other direction of the same tray link: Sync is this SLICC's own tray and who follows it, Leaders the SLICCs it follows. Each leader is an `li[data-leader]` (the id) with `data-state`: its name, its hub as a quiet second line and a status light with the state in words (Connecting, Reconnecting, Connected, Disconnected, Failed, Unlinked); `failed` adds its `error` as plain text (`[data-leader-error]`, "Couldn’t reach its hub." without one) and **Retry** (`data-action="retry-leader"`), and `unlinked` says "{name} stopped sharing with this SLICC." (`[data-unlinked]`) without actions. **Disconnect** (`data-action="disconnect-leader"`) runs at once, without a confirm, since it's reversible: the row stays as Disconnected (a neutral light), with **Reconnect** (`data-action="reconnect-leader"`) and **Forget** and no Disconnect or Retry. **Forget** (`data-action="forget-leader"`) asks "Forget {name}?" ("To follow it again, you’ll need a new invite from it.") with a negative confirm, and the row goes. Each shows only when the port has its method; while one runs, the row's buttons are disabled, and a failure shows in the row (`data-error="leader"`). 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. |

package/dist/slicc-ui.js

@@ -10646,7 +10646,7 @@ function watchTitles(model, update) {
   const seen = /* @__PURE__ */ new Map();
   const check3 = (id) => {
     const agent = model.agent.list().find((candidate) => candidate.id === id);
-    if (agent?.kind !== "cone") return;
+    if (!agent) return;
     const title = agentTitle(model, agent);
     if (seen.get(id) === title) return;
     seen.set(id, title);
@@ -11406,11 +11406,25 @@ async function createCone(model, trigger2) {
   if (created) port.select(created.id);
   return created;
 }
+var statusOrder = ["working", "thinking", "waiting", "error", "idle"];
+function scoopSummary(scoops) {
+  if (scoops.length === 0) return "";
+  const counts = statusOrder.map((status2) => [status2, scoops.filter((scoop) => scoop.status === status2).length]).filter(([, count]) => count > 0).map(([status2, count]) => `${count} ${statusLabel[status2].toLowerCase()}`);
+  return `${scoops.length} scoop${scoops.length === 1 ? "" : "s"}: ${counts.join(", ")}`;
+}
+function unreadCount(unread) {
+  return unread > 9 ? "9+" : String(unread);
+}
 function fillShown(fill2) {
   return fill2 >= 0.5;
 }
 var SliccAgents = class extends ModelElement {
   static properties = { ...ModelElement.properties, errors: { state: true } };
+  #expanded = null;
+  #pointer = false;
+  #modality = (event2) => {
+    this.#pointer = event2.type === "pointerdown";
+  };
   constructor() {
     super();
     this.errors = {};
@@ -11419,16 +11433,22 @@ var SliccAgents = class extends ModelElement {
     shared,
     i`
     :host {
-      display: block;
+      display: flex;
+      flex-direction: column;
       height: 100%;
-      overflow-y: auto;
+      overflow: hidden;
       background: var(--swc-background-layer-1-color);
       color: var(--swc-neutral-content-color-default);
       font-size: var(--swc-font-size-100);
     }
+    .list {
+      flex: 1;
+      min-block-size: 0;
+      overflow-y: auto;
+    }
     .actions {
       display: flex;
-      padding: var(--swc-spacing-75) var(--swc-spacing-100) 0;
+      padding: var(--swc-spacing-75) var(--swc-spacing-100);
     }
     ul {
       list-style: none;
@@ -11436,31 +11456,67 @@ var SliccAgents = class extends ModelElement {
       padding: var(--swc-spacing-75) 0;
     }
     li {
+      --row-background: var(--swc-background-layer-1-color);
+      --row-head: 1lh;
+      --row-description: calc(2 * 1.4 * var(--swc-font-size-75));
+      position: relative;
       display: grid;
-      grid-template-columns: minmax(0, 1fr) auto auto auto;
-      grid-template-areas: 'name unread fill drop' 'title unread fill drop' 'status unread fill drop' 'error error error error';
+      grid-template-columns: minmax(0, 1fr) auto;
+      grid-template-areas: 'head fill' 'description description' 'ribbon ribbon' 'error error';
+      grid-template-rows: var(--row-head) var(--row-description) var(--swc-spacing-100);
       align-items: center;
       column-gap: var(--swc-spacing-100);
       padding: var(--swc-spacing-75) var(--swc-spacing-200);
+      background: var(--row-background);
       cursor: pointer;
     }
     li.scoop {
-      grid-template-areas: 'name unread fill drop' 'status unread fill drop' 'error error error error';
       padding-inline-start: calc(var(--swc-spacing-200) + var(--swc-spacing-300));
     }
     li:hover {
-      background: var(--swc-gray-100);
+      --row-background: var(--swc-gray-100);
     }
     li[aria-selected='true'] {
-      background: var(--swc-gray-200);
-      box-shadow: inset var(--swc-spacing-50) 0 0 var(--swc-accent-visual-color);
+      --row-background: var(--swc-gray-200);
     }
     li:focus-visible {
       outline: var(--swc-focus-indicator-thickness) solid var(--swc-focus-indicator-color);
       outline-offset: calc(-1 * var(--swc-focus-indicator-thickness));
     }
+    .head {
+      grid-area: head;
+      display: flex;
+      align-items: center;
+      gap: var(--swc-spacing-75);
+      min-inline-size: 0;
+    }
+    .head > * {
+      flex: none;
+    }
+    .marker {
+      flex: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: var(--swc-spacing-200);
+      block-size: var(--swc-spacing-200);
+      border-radius: var(--swc-corner-radius-full);
+      font-size: var(--swc-font-size-25);
+      font-variant-numeric: tabular-nums;
+      line-height: 1;
+    }
+    .marker.unread {
+      box-sizing: border-box;
+      inline-size: auto;
+      min-inline-size: var(--swc-spacing-200);
+      padding-inline: var(--swc-spacing-50);
+      background: var(--swc-accent-background-color-default);
+      color: var(--swc-white);
+      font-weight: var(--swc-bold-font-weight);
+    }
     .name {
-      grid-area: name;
+      flex: 0 1 auto;
+      min-inline-size: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -11469,29 +11525,58 @@ var SliccAgents = class extends ModelElement {
       font-weight: var(--swc-bold-font-weight);
     }
     .title {
-      grid-area: title;
+      grid-area: description;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
       overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      overflow-wrap: anywhere;
+      line-height: 1.4;
       font-size: var(--swc-font-size-75);
       color: var(--swc-neutral-subdued-content-color-default);
     }
-    .unread {
-      --swc-badge-height: var(--swc-spacing-300);
-      --swc-badge-padding-block: var(--swc-spacing-50);
-      --swc-badge-padding-inline: var(--swc-spacing-75);
-      --swc-badge-corner-radius: var(--swc-spacing-100);
-      --swc-badge-line-height: 1;
-      grid-area: unread;
-      align-self: center;
+    .state {
+      color: var(--swc-neutral-content-color-default);
+    }
+    .ribbon {
+      grid-area: ribbon;
+      display: flex;
+      align-items: center;
+      gap: var(--swc-spacing-50);
+      overflow: hidden;
+    }
+    .status,
+    .segment {
+      background: var(--swc-neutral-visual-color);
+    }
+    .status[data-status='thinking'],
+    .status[data-status='working'],
+    .segment[data-status='thinking'],
+    .segment[data-status='working'] {
+      background: var(--swc-informative-visual-color);
+    }
+    .status[data-status='waiting'],
+    .segment[data-status='waiting'] {
+      background: var(--swc-notice-visual-color);
+    }
+    .status[data-status='error'],
+    .segment[data-status='error'] {
+      background: var(--swc-negative-visual-color);
+    }
+    .segment {
+      flex: none;
+      inline-size: var(--swc-spacing-200);
+      block-size: var(--swc-spacing-50);
+      border-radius: var(--swc-corner-radius-full);
     }
     .fill {
       grid-area: fill;
+      position: relative;
+      z-index: 1;
+      align-self: start;
       font-size: var(--swc-font-size-75);
       font-variant-numeric: tabular-nums;
       color: var(--swc-neutral-subdued-content-color-default);
-      min-width: 4ch;
-      text-align: end;
     }
     .fill[data-variant='notice'] {
       color: var(--swc-notice-color-1000);
@@ -11501,18 +11586,20 @@ var SliccAgents = class extends ModelElement {
       color: var(--swc-negative-color-1000);
       font-weight: var(--swc-bold-font-weight);
     }
-    swc-status-light {
-      grid-area: status;
-      justify-self: start;
-    }
-    .drop {
-      grid-area: drop;
-      margin-block: calc(-1 * var(--swc-spacing-100));
-      visibility: hidden;
+    .drop-cell {
+      position: absolute;
+      inset-block: 0;
+      inset-inline-end: 0;
+      display: flex;
+      align-items: center;
+      padding-inline: var(--swc-spacing-100);
+      background: var(--row-background);
+      opacity: 0;
     }
-    li:hover .drop,
-    li:focus-within .drop {
-      visibility: visible;
+    li:hover .drop-cell,
+    li:focus-visible .drop-cell,
+    .drop-cell[data-shown] {
+      opacity: 1;
     }
     .error {
       grid-area: error;
@@ -11529,23 +11616,46 @@ var SliccAgents = class extends ModelElement {
       white-space: nowrap;
     }
     @media (hover: none), (pointer: coarse) {
-      .drop {
-        visibility: visible;
+      .drop-cell {
+        opacity: 1;
       }
     }
   `
   ];
   subscribe(model) {
+    const focused2 = this.#focused(model);
+    this.#expanded = focused2?.kind === "scoop" ? focused2.parentId : null;
     return [
       model.agent.on("agents", () => this.requestUpdate()),
-      model.agent.on("active", () => this.requestUpdate()),
+      model.agent.on("active", () => {
+        const next = this.#focused(model);
+        if (next) this.#expanded = next.kind === "cone" ? next.id : next.parentId;
+        this.requestUpdate();
+      }),
       watchTitles(model, () => this.requestUpdate()),
-      ...model.follow ? [model.follow.on("follow", () => this.requestUpdate())] : []
+      ...model.follow ? [model.follow.on("follow", () => this.requestUpdate())] : [],
+      this.#watchPointer()
     ];
   }
+  #watchPointer() {
+    const types = ["pointerdown", "keydown"];
+    for (const type of types) globalThis.addEventListener(type, this.#modality, true);
+    return () => {
+      for (const type of types) globalThis.removeEventListener(type, this.#modality, true);
+    };
+  }
+  #focused(model) {
+    return model.agent.list().find((agent) => agent.id === model.agent.active());
+  }
   #select(id) {
     this.model?.agent.select(id);
   }
+  #pick(agent) {
+    const open = agent.kind === "cone" && this.#expanded !== agent.id;
+    this.#select(agent.id);
+    if (agent.kind === "cone") this.#expanded = open ? agent.id : null;
+    this.requestUpdate();
+  }
   focus() {
     this.focusOn('li[tabindex="0"]');
   }
@@ -11564,21 +11674,44 @@ var SliccAgents = class extends ModelElement {
     if (event2.key in moves) {
       event2.preventDefault();
       items[Math.max(0, Math.min(items.length - 1, moves[event2.key]))]?.focus();
-    } else if (event2.key === "Enter" || event2.key === " ") {
+      return;
+    }
+    const agent = this.model?.agent.list().find((item2) => item2.id === items[index]?.dataset.id);
+    if (!agent) return;
+    if (event2.key === "Enter" || event2.key === " ") {
+      event2.preventDefault();
+      this.#pick(agent);
+    } else if (event2.key === "ArrowRight" && this.#scoops(agent).length > 0) {
       event2.preventDefault();
-      const id = items[index]?.dataset.id;
-      if (id) this.#select(id);
+      if (this.#expanded === agent.id) items[index + 1].focus();
+      else this.#pick(agent);
+    } else if (event2.key === "ArrowLeft" && agent.kind === "scoop") {
+      event2.preventDefault();
+      items.find((item2) => item2.dataset.id === agent.parentId)?.focus();
+    } else if (event2.key === "ArrowLeft" && this.#expanded === agent.id) {
+      event2.preventDefault();
+      this.#pick(agent);
     } else if (event2.key === "Delete") {
-      const agent = this.model?.agent.list().find((item2) => item2.id === items[index]?.dataset.id);
-      if (agent && this.#droppable(agent)) {
+      if (this.#droppable(agent)) {
         event2.preventDefault();
         void this.#drop(agent, items[index]);
-      } else if (agent && this.#deletable(agent)) {
+      } else if (this.#deletable(agent)) {
         event2.preventDefault();
         void this.#deleteCone(agent, items[index]);
       }
     }
   }
+  #scoops(agent) {
+    if (agent.kind !== "cone") return [];
+    return this.model.agent.list().filter((other) => other.parentId === agent.id);
+  }
+  #focusin(event2) {
+    const cell = event2.target.closest(".drop-cell");
+    cell?.toggleAttribute("data-shown", !this.#pointer);
+  }
+  #focusout(event2) {
+    event2.target.closest(".drop-cell")?.removeAttribute("data-shown");
+  }
   #droppable(agent) {
     return agent.kind === "scoop" && Boolean(this.model?.agent.drop) && !watchOnly(this.model);
   }
@@ -11616,69 +11749,89 @@ var SliccAgents = class extends ModelElement {
     await this.updateComplete;
     this.focus();
   }
-  #dropButton(agent) {
+  #dropButton(agent, selected) {
     if (!this.#droppable(agent)) return A;
     const id = `drop-${agent.id}`;
     const label = `Drop scoop ${agent.name}`;
-    return b`<swc-action-button
-        id=${id}
-        class="drop"
-        size="l"
-        quiet
-        tabindex="-1"
-        data-action="drop"
-        accessible-label=${label}
-        @click=${(event2) => {
+    return b`<span class="drop-cell"
+        ><swc-action-button
+          id=${id}
+          class="drop"
+          size="l"
+          quiet
+          tabindex=${selected ? "0" : "-1"}
+          data-action="drop"
+          accessible-label=${label}
+          @click=${(event2) => {
       event2.stopPropagation();
       void this.#drop(agent, event2.currentTarget);
     }}
-        ><swc-icon-close slot="icon"></swc-icon-close></swc-action-button
-      ><swc-tooltip for=${id} placement="start">${label}</swc-tooltip>`;
+          ><swc-icon-close slot="icon"></swc-icon-close></swc-action-button
+        ><swc-tooltip for=${id} placement="start">${label}</swc-tooltip></span
+      >`;
   }
-  #deleteButton(agent) {
+  #deleteButton(agent, selected) {
     if (!this.#deletable(agent)) return A;
     const id = `delete-${agent.id}`;
     const label = `Delete cone ${coneLabel(this.model, agent)}`;
-    return b`<swc-action-button
-        id=${id}
-        class="drop"
-        size="l"
-        quiet
-        tabindex="-1"
-        data-action="delete-cone"
-        accessible-label=${label}
-        @click=${(event2) => {
+    return b`<span class="drop-cell"
+        ><swc-action-button
+          id=${id}
+          class="drop"
+          size="l"
+          quiet
+          tabindex=${selected ? "0" : "-1"}
+          data-action="delete-cone"
+          accessible-label=${label}
+          @click=${(event2) => {
       event2.stopPropagation();
       void this.#deleteCone(agent, event2.currentTarget);
     }}
-        ><swc-icon-delete slot="icon"></swc-icon-delete></swc-action-button
-      ><swc-tooltip for=${id} placement="start">${label}</swc-tooltip>`;
+          ><swc-icon-delete slot="icon"></swc-icon-delete></swc-action-button
+        ><swc-tooltip for=${id} placement="start">${label}</swc-tooltip></span
+      >`;
+  }
+  #ribbon(scoops) {
+    if (scoops.length === 0) return A;
+    return b`<span class="ribbon" aria-hidden="true">${scoops.map(
+      (scoop) => b`<span class="segment" data-status=${scoop.status}></span>`
+    )}</span>`;
   }
   #row(agent, active) {
     const selected = agent.id === active;
     const error = this.errors[agent.id];
     const model = this.model;
-    const title = agent.kind === "cone" ? agentTitle(model, agent) : null;
+    const title = agentTitle(model, agent);
+    const scoops = this.#scoops(agent);
+    const open = this.#expanded === agent.id;
     const unread = selected ? 0 : agent.unread;
     const label = `${coneLabel(model, agent)}: ${statusLabel[agent.status]}, ${percent(agent.contextFill)} context${unread ? `, ${unread} unread` : ""}${error ? `. ${error}` : ""}`;
+    const summary = scoopSummary(scoops);
     return b`<li
-      role="option"
+      role="treeitem"
+      id=${`row-${agent.id}`}
       class=${agent.kind}
       data-id=${agent.id}
+      aria-level=${agent.kind === "cone" ? "1" : "2"}
       aria-selected=${selected ? "true" : "false"}
+      aria-expanded=${scoops.length ? String(open) : A}
+      aria-controls=${open && scoops.length ? scoops.map((scoop) => `row-${scoop.id}`).join(" ") : A}
       aria-label=${label}
+      aria-description=${summary || A}
       tabindex=${selected ? "0" : "-1"}
       aria-keyshortcuts=${this.#droppable(agent) || this.#deletable(agent) ? "Delete" : A}
-      title=${label}
-      @click=${() => this.#select(agent.id)}
+      title=${summary ? `${label}. ${summary}` : label}
+      @click=${() => this.#pick(agent)}
     >
-      <span class="name">${agent.name}</span>
-      ${title === null ? A : b`<span class="title">${title || untitled}</span>`}
-      ${unread ? b`<swc-badge class="unread" size="s" variant="accent">${unread}</swc-badge>` : A}
+      <div class="head">
+        ${unread ? b`<span class="marker unread" aria-hidden="true">${unreadCount(unread)}</span>` : b`<span class="marker status" data-status=${agent.status} aria-hidden="true"></span>`}
+        <span class="name">${agent.name}</span>
+      </div>
       ${fillShown(agent.contextFill) ? b`<span class="fill" data-variant=${meterVariant2(agent.contextFill)}>${percent(agent.contextFill)}</span>` : A}
-      ${statusLight(agent.status)}
-      ${this.#dropButton(agent)}
-      ${this.#deleteButton(agent)}
+      <span class="title"><span class="state">${statusLabel[agent.status]}</span> · ${title || untitled}</span>
+      ${this.#ribbon(scoops)}
+      ${this.#dropButton(agent, selected)}
+      ${this.#deleteButton(agent, selected)}
       ${error ? b`<span class="error">${error}</span>` : A}
     </li>`;
   }
@@ -11696,12 +11849,15 @@ var SliccAgents = class extends ModelElement {
     </div>`;
   }
   render() {
-    const agents = ordered(this.model?.agent.list() ?? []);
+    const list5 = this.model?.agent.list() ?? [];
     const active = this.model?.agent.active() ?? "";
     const errors = Object.values(this.errors);
-    return b`${this.#actions()}<ul role="listbox" aria-label="Cones and scoops" @keydown=${this.#keydown}>
-        ${agents.map((agent) => this.#row(agent, active))}
-      </ul>
+    const rows = ordered(list5).filter(
+      (agent) => agent.kind === "cone" || agent.parentId === this.#expanded
+    );
+    return b`<div class="list"><ul role="tree" aria-label="Cones and scoops" @keydown=${this.#keydown} @focusin=${this.#focusin} @focusout=${this.#focusout}>
+        ${rows.map((agent) => this.#row(agent, active))}
+      </ul></div>${this.#actions()}
       <div class="sr" role="status">${errors.at(-1) ?? ""}</div>`;
   }
 };
@@ -41110,12 +41266,13 @@ var bridge = `(() => {
       }
       node.replaceWith(svg);
     }
+    size();
   };
   const fonts = (list) => {
     for (const font of list) {
       const face = new FontFace(font.family, font.data, { weight: String(font.weight) });
       document.fonts.add(face);
-      face.load().catch(() => {});
+      face.load().then(size, () => {});
     }
   };
   addEventListener('message', (event) => {
@@ -41131,6 +41288,7 @@ var bridge = `(() => {
   };
   document.addEventListener('DOMContentLoaded', () => {
     window.LucideIcons.render();
+    size();
     new ResizeObserver(size).observe(document.body);
   });
   post({ type: 'slicc-ready' });