@ai-ecoverse/slicc-spectrum 1.5.0 → 1.6.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.<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.
+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).
 
 `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, the tray and the agent part of the status bar show only when `chat` is offered, the change count only with `changes`, and the settings button only with `settings`. Elements with `slot="status"` go into the status bar, after the built-in items.
 
@@ -134,7 +134,7 @@ Text is Adobe Clean and code Spectrum's Source Code Pro. Source Code Pro (OFL) i
 | `<slicc-app>` | The shell: header with the agent picker, the View menu and the theme switch, rails, a `<slicc-dock>`, and a status bar. Saves the dock layout per screen class to `storage` (default `localStorage`) under `layoutKey`. |
 | `<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-chat>` | The active agent's conversation, by day: user messages (with attachments, steered, 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; 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), standalone tool results, system messages (compaction markers, error cards, notices) and licks, SLICC's events into a cone, on every channel. Permission requests are allowed or denied in place. |
+| `<slicc-chat>` | One thread's conversation (its `agent`, or the active agent if unset), by day: user messages (with attachments, steered, 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; 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), standalone tool results, system messages (compaction markers, error cards, notices) and licks, SLICC's events into a cone, on every channel. Permission requests are allowed or denied in place. |
 | `<slicc-composer>` | The message box. <kbd>Enter</kbd> sends, or queues behind a running reply; <kbd>Ctrl</kbd>/<kbd>⌘</kbd>+<kbd>Enter</kbd> steers (interrupts); <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`, `/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. |
 | `<slicc-file-view>` | One file (`path`), highlighted, with its pending change and a link to the diff. |
@@ -146,7 +146,7 @@ Text is Adobe Clean and code Spectrum's Source Code Pro. Source Code Pro (OFL) i
 | `<slicc-memory>` | What agents remember, globally or per cone, grouped by section: search, filter by tag, expand, edit, add and forget. |
 | `<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>` | Frozen cones, archived with their scoops: thaw to bring one back, delete, or freeze the active cone (also `/freeze`). |
-| `<slicc-sprinkle>` | A SLICC sprinkle (`.shtml`), as a panel or, with `inline`, as a dip in the chat that grows to fit. 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()`). Its only way back is `slicc.lick({ action, data })`, which reaches the owning cone as a `sprinkle` lick. 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. 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()`). Its only way back is `slicc.lick({ action, data })`, which reaches the owning cone as a `sprinkle` lick. Panel sprinkles sit at the top of the right rail with their Lucide icon. |
 | `<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-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>. |
 | `<slicc-code-view>` | Generic. A highlighted file through [`@pierre/diffs`](https://www.npmjs.com/package/@pierre/diffs): `path`, `contents`, `color`. |

package/dist/slicc-ui.js

@@ -5332,6 +5332,56 @@ var IconSaveFloppy = class extends IconBase {
 // node_modules/@spectrum-web-components/icons-workflow/icons/sp-icon-save-floppy.js
 defineElement("sp-icon-save-floppy", IconSaveFloppy);
 
+// node_modules/@spectrum-web-components/icons-workflow/src/icons-s2/OpenIn.js
+var OpenInIcon = ({ width: e14 = 24, height: t14 = 24, hidden: l10 = false, title: r13 = "Open In" } = {}) => tag2`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="${e14}"
+    height="${t14}"
+    viewBox="0 0 20 20"
+    aria-hidden=${l10 ? "true" : "false"}
+    role="img"
+    fill="currentColor"
+    aria-label="${r13}"
+  >
+    <path
+      d="m18,15.75V4.25c0-1.24072-1.00928-2.25-2.25-2.25H4.25c-1.24072,0-2.25,1.00928-2.25,2.25v3.71777c0,.41406.33594.75.75.75s.75-.33594.75-.75v-3.71777c0-.41357.33643-.75.75-.75h11.5c.41357,0,.75.33643.75.75v11.5c0,.41357-.33643.75-.75.75h-3.81104c-.41406,0-.75.33594-.75.75s.33594.75.75.75h3.81104c1.24072,0,2.25-1.00928,2.25-2.25Z"
+      fill="currentColor"
+    />
+    <path
+      d="m11,9.75v4.24268c0,.41406-.33594.75-.75.75s-.75-.33594-.75-.75v-2.43213l-6.46973,6.46973c-.14648.14648-.33838.21973-.53027.21973s-.38379-.07324-.53027-.21973c-.29297-.29297-.29297-.76758,0-1.06055l6.46973-6.46973h-2.43213c-.41406,0-.75-.33594-.75-.75s.33594-.75.75-.75h4.24268c.41406,0,.75.33594.75.75Z"
+      fill="currentColor"
+    />
+  </svg>`;
+
+// node_modules/@spectrum-web-components/icons-workflow/src/icons/OpenIn.js
+var OpenInIcon2 = ({ width: a11 = 24, height: e14 = 24, hidden: t14 = false, title: l10 = "Open In" } = {}) => tag2`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="${a11}"
+    height="${e14}"
+    viewBox="0 0 36 36"
+    aria-hidden=${t14 ? "true" : "false"}
+    role="img"
+    fill="currentColor"
+    aria-label="${l10}"
+  >
+    <path
+      d="M33 2H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V6h24v24H19a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Z"
+    />
+    <path
+      d="M18.636 27.764a.784.784 0 0 0 .56.236.803.803 0 0 0 .804-.754v-10.75a.497.497 0 0 0-.496-.496H8.754a.803.803 0 0 0-.754.804.785.785 0 0 0 .235.56l3.786 3.786-9.042 9.042a1 1 0 0 0 0 1.415l1.414 1.414a1 1 0 0 0 1.414 0l9.043-9.042Z"
+    />
+  </svg>`;
+
+// node_modules/@spectrum-web-components/icons-workflow/src/elements/IconOpenIn.js
+var IconOpenIn = class extends IconBase {
+  render() {
+    return setCustomTemplateLiteralTag2(b), this.spectrumVersion === 2 ? OpenInIcon({ hidden: !this.label, title: this.label }) : OpenInIcon2({ hidden: !this.label, title: this.label });
+  }
+};
+
+// node_modules/@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js
+defineElement("sp-icon-open-in", IconOpenIn);
+
 // node_modules/@spectrum-web-components/icons-workflow/src/icons-s2/GlobeGrid.js
 var GlobeGridIcon = ({ width: e14 = 24, height: t14 = 24, hidden: r13 = false, title: l10 = "Globe Grid" } = {}) => tag2`<svg
     xmlns="http://www.w3.org/2000/svg"
@@ -6068,6 +6118,45 @@ var u8 = n7(b);
 var c9 = n7(w);
 var $2 = n7(T);
 
+// src/app/dips.ts
+var dipType = "application/x-slicc-sprinkle";
+var Dips = class extends Emitter {
+  key = "slicc-ui.dips";
+  #out = /* @__PURE__ */ new Set();
+  #storage = null;
+  load(storage) {
+    this.#storage = storage;
+    try {
+      const saved = JSON.parse(storage?.getItem(this.key) ?? "[]");
+      this.#out = new Set(Array.isArray(saved) ? saved.filter((id) => typeof id === "string") : []);
+    } catch {
+      this.#out = /* @__PURE__ */ new Set();
+    }
+    this.emit("change", this.list());
+  }
+  list() {
+    return [...this.#out];
+  }
+  has(id) {
+    return this.#out.has(id);
+  }
+  detach(id) {
+    if (this.#out.has(id)) return;
+    this.#out.add(id);
+    this.#storage?.setItem(this.key, JSON.stringify(this.list()));
+    this.emit("change", this.list());
+  }
+};
+function dipsOf(node) {
+  let current = node;
+  while (current) {
+    const found = current.dips;
+    if (found instanceof Dips) return found;
+    current = current.parentNode ?? current.host ?? null;
+  }
+  return null;
+}
+
 // src/app/fonts.ts
 var adobeClean = [
   ["Regular", 400],
@@ -6571,11 +6660,39 @@ function openSurface(dock, item2, screen) {
     ...fresh && item2.width && screen !== "phone" ? { initialWidth: item2.width } : {}
   });
 }
+function chatId(agentId) {
+  return `chat:${agentId}`;
+}
+function chatAgent(id) {
+  return id?.startsWith("chat:") ? id.slice(5) : null;
+}
+function chats(dock) {
+  return dock.api.panels.map((panel) => panel.id).filter((id) => chatAgent(id) !== null);
+}
+function openChat(dock, agent, screen, focus = true) {
+  const id = chatId(agent.id);
+  if (!dock.has(id)) {
+    const sibling = chats(dock)[0];
+    const place = sibling ? { position: { referencePanel: sibling, direction: "within" } } : placement(dock, "center", screen);
+    dock.open({
+      id,
+      component: "chat",
+      title: agent.name,
+      params: { agent: agent.id },
+      inactive: !focus,
+      ...place
+    });
+  }
+  if (focus) dock.focusPanel(id);
+  else dock.reveal(id);
+  return id;
+}
 function openDocument(dock, kind, path, screen) {
   const id = `${kind}:${path}`;
   if (!dock.has(id)) {
     const sibling = dock.api.panels.find((panel) => /^(file|diff):/.test(panel.id));
-    const place = sibling ? { position: { referencePanel: sibling.id, direction: "within" } } : dock.has("chat") && screen !== "phone" ? { position: { referencePanel: "chat", direction: "right" } } : placement(dock, "center", screen);
+    const chat = chats(dock)[0];
+    const place = sibling ? { position: { referencePanel: sibling.id, direction: "within" } } : chat && screen !== "phone" ? { position: { referencePanel: chat, direction: "right" } } : placement(dock, "center", screen);
     dock.open({
       id,
       component: kind,
@@ -6587,18 +6704,23 @@ function openDocument(dock, kind, path, screen) {
   dock.focusPanel(id);
   return id;
 }
-function defaultLayout(dock, screen, items = surfaces) {
+function defaultLayout(dock, screen, agent, items = surfaces) {
   dock.clear();
   const order = ["center", "left", "right"];
   for (const side of order) {
     for (const item2 of items) {
-      if (item2.side === side && item2.open.includes(screen)) openSurface(dock, item2, screen);
+      if (item2.side !== side || !item2.open.includes(screen)) continue;
+      if (item2.id !== "chat") openSurface(dock, item2, screen);
+      else if (agent) openChat(dock, agent, screen, false);
     }
   }
-  dock.api.getPanel("chat")?.api.setActive();
+  const chat = chats(dock)[0];
+  if (chat) dock.api.getPanel(chat)?.api.setActive();
 }
 function closed(dock, items = surfaces) {
-  return items.filter((item2) => !dock.has(item2.id));
+  return items.filter(
+    (item2) => item2.id === "chat" ? chats(dock).length === 0 : !dock.has(item2.id)
+  );
 }
 function sprinkleSurface(sprinkle) {
   return {
@@ -6610,7 +6732,17 @@ function sprinkleSurface(sprinkle) {
     open: []
   };
 }
-function openSprinkle(dock, sprinkle, screen) {
+var directions = {
+  left: "left",
+  right: "right",
+  top: "above",
+  bottom: "below",
+  center: "within"
+};
+function dropPlacement(panel, position) {
+  return panel ? { position: { referencePanel: panel, direction: directions[position] ?? "within" } } : null;
+}
+function openSprinkle(dock, sprinkle, screen, place = null) {
   const id = `sprinkle:${sprinkle.id}`;
   if (!dock.has(id)) {
     dock.open({
@@ -6618,7 +6750,7 @@ function openSprinkle(dock, sprinkle, screen) {
       component: "sprinkle",
       title: sprinkle.title,
       params: { sprinkle: sprinkle.id },
-      ...placement(dock, "right", screen)
+      ...place ?? placement(dock, "right", screen)
     });
   }
   dock.focusPanel(id);
@@ -6639,7 +6771,8 @@ var SliccApp = class extends ThemedElement {
     surfaces: { attribute: false }
   };
   storage = globalThis.localStorage ?? null;
-  layoutKey = "slicc-ui.layout";
+  layoutKey = "slicc-ui.layout.v2";
+  dips = new Dips();
   #fontBase = defaultFontBase;
   #resize = null;
   #started = null;
@@ -6682,6 +6815,11 @@ var SliccApp = class extends ThemedElement {
       box-sizing: border-box;
       background: var(--spectrum-background-layer-1-color);
     }
+    .rail.drop {
+      background: var(--spectrum-accent-background-color-default);
+      outline: 2px solid var(--spectrum-focus-indicator-color);
+      outline-offset: -2px;
+    }
     .rail.left {
       grid-column: 1;
       border-right: 1px solid var(--spectrum-gray-200);
@@ -6790,10 +6928,20 @@ var SliccApp = class extends ThemedElement {
     const update = () => this.requestUpdate();
     return [
       ...super.subscribe(model),
-      model.agent.on("agents", update),
-      model.agent.on("active", update),
+      model.agent.on("agents", () => {
+        this.#prune();
+        update();
+      }),
+      model.agent.on("active", () => {
+        const agent = this.#active();
+        if (this.#started && agent && this.#offers("chat")) {
+          openChat(this.dock, agent, this.screen, false);
+        }
+        update();
+      }),
       model.files.on("changes", update),
-      model.sprinkles.on("sprinkles", update)
+      model.sprinkles.on("sprinkles", update),
+      this.dips.on("change", update)
     ];
   }
   connectedCallback() {
@@ -6842,12 +6990,16 @@ var SliccApp = class extends ThemedElement {
           (params) => create(document2.tag, model, params)
         ])
       ),
+      ...this.#offers("chat") ? { chat: (params) => create("slicc-chat", model, params) } : {},
       sprinkle: (params) => create("slicc-sprinkle", model, params)
     };
+    dock.accepts = [dipType];
+    this.dips.load(this.storage);
     const saved = this.#saved();
     const restored = this.#offered(saved, dock.factories) && dock.restore(saved);
-    if (!restored) defaultLayout(dock, this.screen, this.surfaces);
+    if (!restored) defaultLayout(dock, this.screen, this.#active(), this.surfaces);
     this.#started = this.screen;
+    this.#prune();
     this.#saving = true;
     this.#save();
   }
@@ -6870,11 +7022,32 @@ var SliccApp = class extends ThemedElement {
     if (this.#saving) this.storage?.setItem(this.storageKey, JSON.stringify(this.dock.toJSON()));
     this.requestUpdate();
   }
+  #active() {
+    const model = this.model;
+    return model?.agent.list().find((agent) => agent.id === model.agent.active()) ?? null;
+  }
+  #prune() {
+    const dock = this.renderRoot.querySelector("slicc-dock");
+    if (!dock || !this.#started) return;
+    const known = new Set(this.model?.agent.list().map((agent) => agent.id));
+    for (const id of chats(dock)) {
+      if (!known.has(chatAgent(id))) dock.close(id);
+    }
+  }
+  #activated(event) {
+    const agent = chatAgent(event.detail.id);
+    if (agent && agent !== this.model?.agent.active()) this.model?.agent.select(agent);
+  }
   resetLayout() {
-    defaultLayout(this.dock, this.screen, this.surfaces);
+    defaultLayout(this.dock, this.screen, this.#active(), this.surfaces);
     this.#save();
   }
   show(id) {
+    const agent = this.#active();
+    if (id === "chat" && agent && this.#offers("chat")) {
+      openChat(this.dock, agent, this.screen);
+      return;
+    }
     const sprinkle = this.model?.sprinkles.list().find((candidate) => `sprinkle:${candidate.id}` === id);
     if (sprinkle) {
       openSprinkle(this.dock, sprinkle, this.screen);
@@ -6885,14 +7058,42 @@ var SliccApp = class extends ThemedElement {
     openSurface(this.dock, item2, this.screen);
     this.dock.focusPanel(id);
   }
+  #sprinkle(id) {
+    return this.model?.sprinkles.list().find((candidate) => candidate.id === id);
+  }
+  #detach(id, place, open) {
+    const sprinkle = this.#sprinkle(id);
+    if (!sprinkle) return;
+    this.dips.detach(id);
+    if (open) openSprinkle(this.dock, sprinkle, this.screen, place);
+  }
+  #dropped(event) {
+    const { type, data, panel, position } = event.detail;
+    if (type === dipType) this.#detach(data, dropPlacement(panel, position), true);
+  }
+  #railOver(event) {
+    if (!event.dataTransfer?.types.includes(dipType)) return;
+    event.preventDefault();
+    event.currentTarget.classList.add("drop");
+  }
+  #railLeave(event) {
+    event.currentTarget.classList.remove("drop");
+  }
+  #railDrop(event) {
+    event.currentTarget.classList.remove("drop");
+    const id = event.dataTransfer?.getData(dipType);
+    if (!id) return;
+    event.preventDefault();
+    this.#detach(id, null, false);
+  }
   #rail(items, side) {
-    return b`<nav class=${`rail ${side}`} aria-label=${`Closed panels, ${side}`}>${items.map(
+    return b`<nav class=${`rail ${side}`} aria-label=${`Closed panels, ${side}`} @dragover=${this.#railOver} @dragleave=${this.#railLeave} @drop=${this.#railDrop}>${items.map(
       (item2) => u8`<sp-action-button quiet size="m" label=${`Open ${item2.title}`} title=${item2.title} data-surface=${item2.id} @click=${() => this.show(item2.id)}>${railIcon(item2.icon)}</sp-action-button>`
     )}</nav>`;
   }
   #rails() {
     const dock = this.renderRoot.querySelector("slicc-dock");
-    const sprinkles = (this.model?.sprinkles.list() ?? []).filter((sprinkle) => !sprinkle.inline).map(sprinkleSurface).filter((item2) => !dock?.has(item2.id));
+    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.surfaces)] : [];
     const phone = this.screen === "phone";
     return {
@@ -7002,6 +7203,9 @@ var SliccApp = class extends ThemedElement {
         <main>
           ${rails.left}
           <slicc-dock empty-text="All panels are closed. Open one from a rail or View." @layout-change=${this.#save}
+            @active-panel-change=${this.#activated}
+            @external-drop=${this.#dropped}
+            @detach-sprinkle=${(event) => this.#detach(event.detail.id, null, true)}
             @open-file=${(event) => this.#request("file", event)}
             @open-diff=${(event) => this.#request("diff", event)}
             @show-surface=${(event) => this.show(event.detail.id)}
@@ -8410,6 +8614,11 @@ var messageCss = i`
 
 // src/app/chat.ts
 var SliccChat = class extends ThemedElement {
+  static properties = { ...ThemedElement.properties, agent: {} };
+  constructor() {
+    super();
+    this.agent = "";
+  }
   static styles = [
     shared,
     messageCss,
@@ -8462,8 +8671,8 @@ var SliccChat = class extends ThemedElement {
   #handlers = {
     color: "light",
     model: null,
-    answer: (questionId, answer) => this.model?.agent.answer(this.model.agent.active(), questionId, answer),
-    resolve: (messageId, state) => this.model?.agent.resolveLick(this.model.agent.active(), messageId, state),
+    answer: (questionId, answer) => this.model?.agent.answer(this.#id(), questionId, answer),
+    resolve: (messageId, state) => this.model?.agent.resolveLick(this.#id(), messageId, state),
     action: (action) => this.#action(action),
     open: (path) => this.dispatchEvent(
       new CustomEvent("open-file", { detail: { path }, bubbles: true, composed: true })
@@ -8472,13 +8681,15 @@ var SliccChat = class extends ThemedElement {
   subscribe(model) {
     return [
       ...super.subscribe(model),
-      model.agent.on("active", () => this.#refresh(true)),
+      model.agent.on("active", () => {
+        if (!this.agent) this.#refresh(true);
+      }),
       model.agent.on("agents", () => this.requestUpdate()),
       model.agent.on("messages", (agentId) => {
-        if (agentId === model.agent.active()) this.#refresh(true);
+        if (agentId === this.#id()) this.#refresh(true);
       }),
       model.agent.on("message", ({ agentId }) => {
-        if (agentId === model.agent.active()) this.#refresh(false);
+        if (agentId === this.#id()) this.#refresh(false);
       })
     ];
   }
@@ -8497,14 +8708,17 @@ var SliccChat = class extends ThemedElement {
   focus() {
     this.focusOn("slicc-composer");
   }
+  #id() {
+    return this.agent || (this.model?.agent.active() ?? "");
+  }
   #agent() {
-    const model = this.model;
-    return model?.agent.list().find((agent) => agent.id === model.agent.active());
+    const id = this.#id();
+    return this.model?.agent.list().find((agent) => agent.id === id);
   }
   #action(action) {
     const model = this.model;
     if (!model) return;
-    const id = model.agent.active();
+    const id = this.#id();
     if (action === "retry") {
       const last = model.agent.messages(id).filter((message) => message.role === "user").at(-1);
       if (last) void model.agent.send(id, { text: last.text, attachments: last.attachments });
@@ -8568,7 +8782,7 @@ var SliccChat = class extends ThemedElement {
           ${agent && messages.length > 0 ? this.#items(messages, agent) : b`<div class="empty">No messages yet. Ask ${agent?.name ?? "the agent"} something.</div>`}
         </div>
       </div>
-      ${this.model ? b`<slicc-composer .model=${this.model}></slicc-composer>` : A}
+      ${this.model ? b`<slicc-composer .model=${this.model} .agent=${this.agent}></slicc-composer>` : A}
     `;
   }
 };
@@ -8660,7 +8874,8 @@ var SliccComposer = class extends ModelElement {
     value: { state: true },
     attachments: { state: true },
     popup: { state: true },
-    dictating: { state: true }
+    dictating: { state: true },
+    agent: {}
   };
   #drafts = /* @__PURE__ */ new Map();
   #history = -1;
@@ -8674,6 +8889,7 @@ var SliccComposer = class extends ModelElement {
     this.attachments = [];
     this.popup = null;
     this.dictating = false;
+    this.agent = "";
   }
   static styles = [
     shared,
@@ -8872,14 +9088,22 @@ var SliccComposer = class extends ModelElement {
       }
     `
   ];
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (changed.has("agent") && this.agent && this.model && this.agent !== this.#agent) {
+      this.#switch(this.agent);
+    }
+  }
   subscribe(model) {
-    this.#switch(model.agent.active());
+    this.#switch(this.agent || model.agent.active());
     void model.files.list().then((entries) => {
       this.#paths = entries.filter((entry) => entry.kind === "file").map((entry) => entry.path);
     });
     const update = () => this.requestUpdate();
     return [
-      model.agent.on("active", (id) => this.#switch(id)),
+      model.agent.on("active", (id) => {
+        if (!this.agent) this.#switch(id);
+      }),
       model.agent.on("agents", update),
       model.agent.on("messages", update),
       model.agent.on("message", update),
@@ -10131,6 +10355,7 @@ async function frameFonts(files, base) {
     (font) => Boolean(font.data)
   );
 }
+var grip = w`<svg class="grip" viewBox="0 0 8 14" width="8" height="14" aria-hidden="true">${[2, 7, 12].flatMap((y5) => [2, 6].map((x5) => w`<circle cx=${x5} cy=${y5} r="1.25"></circle>`))}</svg>`;
 var SliccSprinkle = class extends ThemedElement {
   static properties = {
     ...ThemedElement.properties,
@@ -10160,6 +10385,43 @@ var SliccSprinkle = class extends ThemedElement {
       height: 100%;
       border: 0;
     }
+    .handle {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      width: max-content;
+      max-width: 100%;
+      box-sizing: border-box;
+      height: 28px;
+      padding: 0 4px 0 6px;
+      border: 1px solid var(--spectrum-gray-200);
+      border-bottom: 0;
+      border-radius: 6px 6px 0 0;
+      background: var(--spectrum-background-layer-1-color);
+      color: var(--spectrum-neutral-subdued-content-color-default);
+      font-size: var(--spectrum-font-size-75);
+      cursor: grab;
+      user-select: none;
+    }
+    .handle:active {
+      cursor: grabbing;
+    }
+    .handle .grip {
+      fill: currentColor;
+    }
+    .handle .name {
+      color: var(--spectrum-neutral-content-color-default);
+    }
+    .moved {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border: 1px dashed var(--spectrum-gray-300);
+      border-radius: 8px;
+      color: var(--spectrum-neutral-subdued-content-color-default);
+      font-size: var(--spectrum-font-size-75);
+    }
     .note {
       padding: 24px;
       color: var(--spectrum-neutral-subdued-content-color-default);
@@ -10185,22 +10447,50 @@ var SliccSprinkle = class extends ThemedElement {
       this.height = data.height;
     }
   };
+  #dips = new Dips();
   subscribe(model) {
+    this.#dips = dipsOf(this) ?? this.#dips;
     globalThis.addEventListener("message", this.#message);
     return [
       ...super.subscribe(model),
       () => globalThis.removeEventListener("message", this.#message),
-      model.sprinkles.on("sprinkles", () => this.requestUpdate())
+      model.sprinkles.on("sprinkles", () => this.requestUpdate()),
+      this.#dips.on("change", () => this.requestUpdate())
     ];
   }
+  #drag = (event) => {
+    const data = this.#data;
+    event.dataTransfer?.setData(dipType, this.sprinkle);
+    event.dataTransfer?.setData("text/plain", data?.title ?? this.sprinkle);
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+  };
+  #send(type, id) {
+    this.dispatchEvent(new CustomEvent(type, { detail: { id }, bubbles: true, composed: true }));
+  }
   get #data() {
     return this.model?.sprinkles.list().find((candidate) => candidate.id === this.sprinkle);
   }
   render() {
     const data = this.#data;
     if (!data) return b`<div class="note">This sprinkle is gone.</div>`;
+    if (this.inline && this.#dips.has(data.id)) {
+      return b`<div class="moved">
+        <sp-icon-open-in size="s"></sp-icon-open-in>
+        <span>${data.title} is open as a panel.</span>
+        <sp-action-button size="s" quiet @click=${() => this.#send("show-surface", `sprinkle:${data.id}`)}>Show</sp-action-button>
+      </div>`;
+    }
     const style = `color-scheme:${this.color};${this.inline ? `height:${this.height}px;` : ""}`;
-    return b`<iframe title=${data.title} sandbox="allow-scripts" style=${style} .srcdoc=${frameDocument(data.html, this.color, data.name)}></iframe>`;
+    const frame = b`<iframe title=${data.title} sandbox="allow-scripts" style=${style} .srcdoc=${frameDocument(data.html, this.color, data.name)}></iframe>`;
+    if (!this.inline) return frame;
+    return b`<div class="handle" draggable="true" title="Drag into the dock or a rail to open as a panel" @dragstart=${this.#drag}>
+        ${grip}
+        <span class="name">${data.title}</span>
+        <sp-action-button size="xs" quiet label=${`Open ${data.title} as a panel`} title="Open as a panel" @click=${() => this.#send("detach-sprinkle", data.id)}>
+          <sp-icon-open-in slot="icon"></sp-icon-open-in>
+        </sp-action-button>
+      </div>
+      ${frame}`;
   }
 };
 
@@ -52320,6 +52610,7 @@ var theme = {
 };
 var SliccDock = class extends HTMLElement {
   factories = {};
+  accepts = [];
   #api = null;
   #contents = /* @__PURE__ */ new Map();
   get api() {
@@ -52367,12 +52658,30 @@ var SliccDock = class extends HTMLElement {
     api.onDidActivePanelChange(
       ({ panel }) => this.#dispatch("active-panel-change", { id: panel?.id ?? null })
     );
+    api.onUnhandledDragOver((event) => {
+      if (this.#accepted(event.nativeEvent)) event.accept();
+    });
+    api.onDidDrop((event) => {
+      const type = this.#accepted(event.nativeEvent);
+      if (!type) return;
+      const transfer = event.nativeEvent.dataTransfer;
+      this.#dispatch("external-drop", {
+        type,
+        data: transfer.getData(type),
+        panel: event.group?.activePanel?.id ?? null,
+        position: event.position
+      });
+    });
     api.onDidRemovePanel((panel) => {
       this.#contents.delete(panel.id);
       this.#dispatch("panel-close", { id: panel.id });
     });
     this.#api = api;
   }
+  #accepted(native) {
+    const types = native instanceof DragEvent ? [...native.dataTransfer?.types ?? []] : [];
+    return this.accepts.find((type) => types.includes(type));
+  }
   #create(id, name) {
     const element2 = document.createElement("div");
     element2.className = "panel";
@@ -52404,6 +52713,10 @@ var SliccDock = class extends HTMLElement {
     }
     return this.api.addPanel(options);
   }
+  reveal(id) {
+    const panel = this.api.getPanel(id);
+    panel?.group.model.openPanel(panel, { skipSetGroupActive: true });
+  }
   close(id) {
     this.api.getPanel(id)?.api.close();
   }