@ai-ecoverse/slicc-spectrum 1.39.0 → 1.40.0

package/README.md

@@ -133,7 +133,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. When the last app on the page is removed, the page's own inline values come back. |
 | `<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. Selecting one makes it the active agent. |
+| `<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-chat>` | One thread's conversation (its `agent`, or the active agent if unset), by day: user messages (with attachments, tagged as steered or follow-up by `delivered`, or delegated from another cone), assistant messages (Markdown with tables, task lists, quotes, code and images; thinking; tool calls, grouped into a collapsible cluster from three in a row, each with its input (a shell command after `$`), an optional `meta` such as a timeout, an edit's `diff` shown as a diff view, and an `image`, such as a screenshot, shown as a thumbnail under the closed card and in full when open; 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; 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), standalone tool results, system messages (compaction markers, error cards, notices) and licks, SLICC's events into a cone, on every channel; 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 shows the status, a model picker that names each model's provider and leaves out classifiers and models with `tools: false`, 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. |
 | `<slicc-composer>` | The message box. <kbd>Enter</kbd> sends, or steers a running reply: the message joins after the current tool round, without interrupting; <kbd>Ctrl</kbd>/<kbd>⌘</kbd>+<kbd>Enter</kbd> queues a follow-up that runs after the reply and can be withdrawn; <kbd>Shift</kbd>+<kbd>Enter</kbd> adds a line; <kbd>Tab</kbd> takes the suggested follow-up; <kbd>↑</kbd>/<kbd>↓</kbd> at the start or end walk this agent's history; <kbd>Esc</kbd> stops. `/` completes commands (`/clear`, `/compact`, `/model`, `/thinking`, `/scoop`, `/stop`, `/freeze` when the port can freeze, `/theme`) and their arguments, `@` mentions agents and files. Attach from the computer, from SLICC's files, a browser screenshot or a shared secret, or paste and drop files (25 MB each). Queued messages wait above it, to send now or drop. Model and thinking pickers, and dictation where the browser has speech recognition. Drafts are kept per agent. |
 | `<slicc-files>` | The file system as a `<slicc-file-tree>`, with pending changes as git status. 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, 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)`. A failed mount, insert or eject shows its message under the bar. |
@@ -195,7 +195,7 @@ Paths are the agent's: `/shared/…` and `/home/…`, nothing else. A refusal or
 
 | Port | Later backed by | |
 | :--- | :--- | :--- |
-| `agent` | `@ai-ecoverse/slicc-agent` | Cones and scoops, the active agent, conversations, `send` (with attachments, as a send, a steer or a queued follow-up) and `stop`, the queue, suggestions, answers to questions, permission decisions, compaction, clearing (`clear(agentId)` starts a new conversation: on a cone, a port with `freeze` first puts the old one in the Freezer as its own row, which thaws into a cone of its own; a scoop's is just reset), the model per agent and new scoops. The optional `rewind(agentId, messageId)` drops the user turn before that message and everything after it, and resolves with the turn's prompt (text and attachments) for the composer, or `null`. The optional `drop(agentId)` removes a scoop: it stops and its working folder is deleted, while its conversation and reports are kept, and `createCone(name)` resolves with a new cone; the dummy rejects a cone name that is taken. `freeze(agentId)` is optional too: without it, **Delete cone** and `/freeze` don't show. `frozen()` lists the Freezer's rows; a `FrozenCone` may carry `kind` (`cone`, `scoop` or `agent`), `live` for a conversation that's still running, and `thawedAs`, the id of the cone a scoop or agent run was thawed into. `thaw(id)` brings a cone back, or forks a scoop or agent run into a new cone, and `discard(id)` removes a row. Names don't have to be unique. Assistant messages stream: the same message is re-emitted as its parts grow and its tool calls go from `running` to `done`. |
+| `agent` | `@ai-ecoverse/slicc-agent` | Cones and scoops, the active agent, conversations, `send` (with attachments, as a send, a steer or a queued follow-up) and `stop`, the queue, suggestions, answers to questions, permission decisions, compaction, clearing (`clear(agentId)` starts a new conversation: on a cone, a port with `freeze` first puts the old one in the Freezer as its own row, which thaws into a cone of its own; a scoop's is just reset), the model per agent and new scoops. The optional `rewind(agentId, messageId)` drops the user turn before that message and everything after it, and resolves with the turn's prompt (text and attachments) for the composer, or `null`. The optional `drop(agentId)` removes a scoop: it stops and its working folder is deleted, while its conversation and reports are kept, and `createCone(name)` resolves with a new cone; the dummy rejects a cone name that is taken. `freeze(agentId)` is optional too: without it, **Delete cone** and `/freeze` don't show. `frozen()` lists the Freezer's rows; a `FrozenCone` may carry `kind` (`cone`, `scoop` or `agent`), `live` for a conversation that's still running, and `thawedAs`, the id of the cone a scoop or agent run was thawed into. `thaw(id)` brings a cone back, or forks a scoop or agent run into a new cone, and `discard(id)` removes a row. Names don't have to be unique, and an optional `Agent.title` names a cone's conversation; without it, the first user message does. Assistant messages stream: the same message is re-emitted as its parts grow and its tool calls go from `running` to `done`. |
 | `files` | slicc-kernel's OPFS | `list`, `read`, `write`, `remove`, and pending changes with their before and after text (`accept`, `revert`). The optional `mountFolder()` asks for a local folder and resolves with its mount point (for example `/mnt/photos`), or `null` when the user cancels; the panel calls it synchronously in the click, so the port can call `showDirectoryPicker()`. The optional `mounts()` lists the mount points, and `eject(path)` unmounts one (the folder stays on disk). `mountFolder(path)` inserts the picked folder at a mount point that waits for one; the optional `needsFolder()` lists those mount points. The port emits `mounts` and then `files` after every mount and eject, including those made from the shell, and `mounts` whenever `needsFolder()` changes. |
 | `terminals` | slicc-kernel's terminal API | Terminal sessions; `backend(id)` returns a `TerminalBackend` for `<slicc-terminal>`. |
 | `browser` | `@ai-ecoverse/slicc-cdp` | Tabs, the active tab, `open`, `navigate`, `close`, `screenshot`. |

package/dist/slicc-ui.js

@@ -10019,6 +10019,46 @@ var SliccFileView = class extends ThemedElement {
   }
 };
 
+// src/app/names.ts
+var untitled = "No messages yet";
+function short(text2, max2 = 60) {
+  return text2.length > max2 ? `${text2.slice(0, max2 - 1).trimEnd()}\u2026` : text2;
+}
+function agentTitle(model, agent) {
+  if (agent.title !== void 0) return agent.title.trim();
+  const first2 = model.agent.messages(agent.id).find((message) => message.role === "user");
+  return first2?.role === "user" ? first2.text.trim().split("\n")[0].trim() : "";
+}
+function twinned(name, id, rows) {
+  return rows.some((row) => row.id !== id && row.name === name);
+}
+function withTitle(name, title) {
+  return `${name} (${short(title) || untitled.toLowerCase()})`;
+}
+function coneLabel(model, agent) {
+  const cones = model.agent.list().filter((other) => other.kind === "cone");
+  if (agent.kind !== "cone" || !twinned(agent.name, agent.id, cones)) return agent.name;
+  return withTitle(agent.name, agentTitle(model, agent));
+}
+function watchTitles(model, update) {
+  const seen = /* @__PURE__ */ new Map();
+  const check2 = (id) => {
+    const agent = model.agent.list().find((candidate) => candidate.id === id);
+    if (agent?.kind !== "cone") return;
+    const title = agentTitle(model, agent);
+    if (seen.get(id) === title) return;
+    seen.set(id, title);
+    update();
+  };
+  const stops = [
+    model.agent.on("messages", check2),
+    model.agent.on("message", ({ agentId }) => check2(agentId))
+  ];
+  return () => {
+    for (const stop of stops) stop();
+  };
+}
+
 // src/app/freezer.ts
 function ago(at, now = Date.now()) {
   const days = Math.floor((now - at) / 864e5);
@@ -10029,7 +10069,7 @@ function ago(at, now = Date.now()) {
 }
 async function deleteCone(model, agent, trigger2) {
   const ok = await confirm({
-    title: `Delete cone ${agent.name}?`,
+    title: `Delete cone ${coneLabel(model, agent)}?`,
     body: "It stops, with its scoops. Its conversation stays in the Freezer, where you can thaw it.",
     action: "Delete cone",
     variant: "confirmation",
@@ -10109,7 +10149,7 @@ var SliccFreezer = class extends ModelElement {
   }
   async #remove(cone, trigger2) {
     const ok = await confirm({
-      title: `Remove ${cone.name} from the Freezer?`,
+      title: `Remove ${this.#named(cone)} from the Freezer?`,
       body: "Its working folders are deleted. The conversation stays in the session database. You can\u2019t undo this.",
       action: "Remove",
       variant: "destructive",
@@ -10117,6 +10157,10 @@ var SliccFreezer = class extends ModelElement {
     });
     if (ok) this.model?.agent.discard(cone.id);
   }
+  #named(cone) {
+    const rows = this.model?.agent.frozen() ?? [];
+    return twinned(cone.name, cone.id, rows) ? withTitle(cone.name, cone.title) : cone.name;
+  }
   #thawedAs(id) {
     const model = this.model;
     return model.agent.list().find((agent) => agent.id === id)?.name ?? model.agent.frozen().find((row) => row.id === id)?.name ?? id;
@@ -10124,10 +10168,10 @@ var SliccFreezer = class extends ModelElement {
   #actions(cone) {
     const model = this.model;
     if (cone.live) {
-      return b`<swc-action-button size="s" quiet data-action="open" accessible-label=${`Open ${cone.name}`} @click=${() => model.agent.select(cone.id)}>Open</swc-action-button>`;
+      return b`<swc-action-button size="s" quiet data-action="open" accessible-label=${`Open ${this.#named(cone)}`} @click=${() => model.agent.select(cone.id)}>Open</swc-action-button>`;
     }
-    return b`<swc-action-button size="s" quiet data-action="thaw" accessible-label=${`Thaw ${cone.name}`} @click=${() => model.agent.thaw(cone.id)}>Thaw</swc-action-button>
-      <swc-action-button size="s" quiet data-action="remove" accessible-label=${`Remove ${cone.name}`} @click=${(event2) => this.#remove(cone, event2.currentTarget)}>Remove</swc-action-button>`;
+    return b`<swc-action-button size="s" quiet data-action="thaw" accessible-label=${`Thaw ${this.#named(cone)}`} @click=${() => model.agent.thaw(cone.id)}>Thaw</swc-action-button>
+      <swc-action-button size="s" quiet data-action="remove" accessible-label=${`Remove ${this.#named(cone)}`} @click=${(event2) => this.#remove(cone, event2.currentTarget)}>Remove</swc-action-button>`;
   }
   #card(cone) {
     const model = this.model;
@@ -10186,7 +10230,7 @@ var SliccAgents = class extends ModelElement {
     li {
       display: grid;
       grid-template-columns: minmax(0, 1fr) auto auto auto;
-      grid-template-areas: 'name unread fill drop' 'status unread fill drop' 'error error error error';
+      grid-template-areas: 'name unread fill drop' 'title unread fill drop' 'status unread fill drop' 'error error error error';
       align-items: center;
       column-gap: var(--swc-spacing-100);
       padding: var(--swc-spacing-75) var(--swc-spacing-200);
@@ -10215,6 +10259,14 @@ var SliccAgents = class extends ModelElement {
     .cone .name {
       font-weight: var(--swc-bold-font-weight);
     }
+    .title {
+      grid-area: title;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      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);
@@ -10268,7 +10320,8 @@ var SliccAgents = class extends ModelElement {
   subscribe(model) {
     return [
       model.agent.on("agents", () => this.requestUpdate()),
-      model.agent.on("active", () => this.requestUpdate())
+      model.agent.on("active", () => this.requestUpdate()),
+      watchTitles(model, () => this.requestUpdate())
     ];
   }
   #select(id) {
@@ -10366,7 +10419,7 @@ var SliccAgents = class extends ModelElement {
   #deleteButton(agent) {
     if (!this.#deletable(agent)) return A;
     const id = `delete-${agent.id}`;
-    const label = `Delete cone ${agent.name}`;
+    const label = `Delete cone ${coneLabel(this.model, agent)}`;
     return b`<swc-action-button
         id=${id}
         class="drop"
@@ -10385,7 +10438,9 @@ var SliccAgents = class extends ModelElement {
   #row(agent, active) {
     const selected = agent.id === active;
     const error = this.errors[agent.id];
-    const label = `${agent.name}: ${statusLabel[agent.status]}, ${percent(agent.contextFill)} context${agent.unread ? `, ${agent.unread} unread` : ""}${error ? `. ${error}` : ""}`;
+    const model = this.model;
+    const title = agent.kind === "cone" ? agentTitle(model, agent) : null;
+    const label = `${coneLabel(model, agent)}: ${statusLabel[agent.status]}, ${percent(agent.contextFill)} context${agent.unread ? `, ${agent.unread} unread` : ""}${error ? `. ${error}` : ""}`;
     return b`<li
       role="option"
       class=${agent.kind}
@@ -10398,6 +10453,7 @@ var SliccAgents = class extends ModelElement {
       @click=${() => this.#select(agent.id)}
     >
       <span class="name">${agent.name}</span>
+      ${title === null ? A : b`<span class="title">${title || untitled}</span>`}
       ${agent.unread ? b`<swc-badge class="unread" size="s" variant="accent">${agent.unread}</swc-badge>` : A}
       <span class="fill">${percent(agent.contextFill)}</span>
       ${statusLight(agent.status)}
@@ -15320,6 +15376,13 @@ var SliccApp = class extends ThemedElement {
     sp-picker {
       min-width: calc(var(--swc-spacing-400) * 8);
     }
+    header sp-menu-item [slot='description'] {
+      display: block;
+      max-inline-size: calc(var(--swc-spacing-1000) * 4);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
     slicc-dock {
       height: 100%;
     }
@@ -15344,6 +15407,7 @@ var SliccApp = class extends ThemedElement {
         update();
       }),
       changesOf(model).on("changes", update),
+      watchTitles(model, update),
       model.terminals.on("terminals", () => {
         this.#prune();
         update();
@@ -15759,7 +15823,7 @@ var SliccApp = class extends ThemedElement {
           ${this.#offers("chat") ? i17(
       cones.map((agent) => agent.id).join(" "),
       b`<sp-picker size="s" label="Agent" value=${this.#cone()} @change=${this.#pick}>
-            ${cones.map((agent) => b`<sp-menu-item value=${agent.id}>${agent.name}</sp-menu-item>`)}
+            ${cones.map((agent) => b`<sp-menu-item value=${agent.id}>${agent.name}<span slot="description">${agentTitle(this.model, agent) || untitled}</span></sp-menu-item>`)}
             ${this.model?.agent.createCone ? b`<sp-menu-divider></sp-menu-divider><sp-menu-item value=${newCone} data-action="new-cone"><swc-icon-add slot="icon"></swc-icon-add>New cone</sp-menu-item>` : A}
             ${this.#deletable() ? b`${this.model?.agent.createCone ? A : b`<sp-menu-divider></sp-menu-divider>`}<sp-menu-item value=${deleteActiveCone} data-action="delete-cone"><swc-icon-delete slot="icon"></swc-icon-delete>Delete cone</sp-menu-item>` : A}
             ${this.#offers("agents") ? b`<sp-menu-divider></sp-menu-divider><sp-menu-item value=${allAgents}>Show all agents</sp-menu-item>` : A}