@ai-ecoverse/slicc-spectrum 1.55.0 → 1.56.0

package/dist/slicc-ui.js

@@ -13261,7 +13261,8 @@ function sprinkleSurface(sprinkle) {
     tag: "slicc-sprinkle",
     icon: sprinkle.icon,
     side: "right",
-    open: []
+    open: [],
+    cone: sprinkle.agentId
   };
 }
 var directions = {
@@ -21650,6 +21651,11 @@ var SliccApp = class extends ThemedElement {
     .rail:empty {
       display: none;
     }
+    .rail .cones {
+      flex: none;
+      inline-size: var(--swc-component-height-75);
+      border-block-start: var(--swc-border-width-100) solid var(--swc-gray-300);
+    }
     .rail swc-action-button.selected {
       --swc-action-button-background-color-default: var(--swc-neutral-background-color-selected-default);
       --swc-action-button-background-color-hover: var(--swc-neutral-background-color-selected-hover);
@@ -21863,6 +21869,13 @@ var SliccApp = class extends ThemedElement {
     if (layout) this.#start(this.model);
     else if (changed.has("model")) this.#rebind(this.model);
     this.#updates(layout);
+    this.#retitle();
+  }
+  #retitle() {
+    for (const sprinkle of this.#sprinkles()) {
+      const panel = this.dock.api.getPanel(`sprinkle:${sprinkle.id}`);
+      if (panel && panel.title !== sprinkle.title) panel.api.setTitle(sprinkle.title);
+    }
   }
   #updates(layout) {
     const port = this.model?.updates;
@@ -21998,7 +22011,7 @@ var SliccApp = class extends ThemedElement {
       openChat(this.dock, agent, this.screen);
       return;
     }
-    const sprinkle = this.model?.sprinkles.list().find((candidate) => `sprinkle:${candidate.id}` === id);
+    const sprinkle = this.#sprinkles().find((candidate) => `sprinkle:${candidate.id}` === id);
     if (sprinkle) {
       openSprinkle(this.dock, sprinkle, this.screen);
       return;
@@ -22016,7 +22029,19 @@ var SliccApp = class extends ThemedElement {
       this.dock.content(id)?.reveal?.(section);
   }
   #sprinkle(id) {
-    return this.model?.sprinkles.list().find((candidate) => candidate.id === id);
+    return this.#sprinkles().find((candidate) => candidate.id === id);
+  }
+  #sprinkles() {
+    const model = this.model;
+    if (!model) return [];
+    const selected = this.#cone();
+    const cones = model.agent.list().filter((agent) => agent.kind === "cone");
+    const list4 = model.sprinkles.list();
+    const order = [selected, ...cones.map((cone) => cone.id), ...list4.map((item2) => item2.agentId)];
+    return list4.map((sprinkle) => {
+      const cone = cones.find((agent) => agent.id === sprinkle.agentId && agent.id !== selected);
+      return cone ? { ...sprinkle, title: `${cone.name} / ${sprinkle.title}` } : sprinkle;
+    }).sort((a22, b13) => order.indexOf(a22.agentId) - order.indexOf(b13.agentId));
   }
   #detach(id, place2, open) {
     const sprinkle = this.#sprinkle(id);
@@ -22048,7 +22073,7 @@ var SliccApp = class extends ThemedElement {
     const driven = item2.id === "browser" && !!this.model?.browser.list().some((tab) => tab.controlled);
     const visible2 = shown(this.dock, item2.id);
     const label = `${visible2 ? `${item2.title}, shown` : `Open ${item2.title}`}${changes ? `, ${changeCount(changes)}` : driven ? ", a tab is in use" : ""}`;
-    const button = u16`<swc-action-button id=${`rail-${item2.id}`} class=${visible2 ? "selected" : ""} quiet size="m" accessible-label=${label} data-surface=${item2.id} ?data-visible=${visible2} @click=${() => this.show(item2.id)}>${railIcon(item2.icon)}</swc-action-button>`;
+    const button = u16`<swc-action-button id=${`rail-${item2.id}`} class=${visible2 ? "selected" : ""} quiet size="m" accessible-label=${label} data-surface=${item2.id} data-cone=${o2(item2.cone)} ?data-visible=${visible2} @click=${() => this.show(item2.id)}>${railIcon(item2.icon)}</swc-action-button>`;
     const tooltip = b`<swc-tooltip for=${`rail-${item2.id}`} placement=${{ left: "end", right: "start", bottom: "top" }[side]}>${item2.title}</swc-tooltip>`;
     return changes ? b`<span class="badged">${button}<swc-badge size="s" variant="neutral" aria-hidden="true">${changes}</swc-badge></span>${tooltip}` : driven ? b`<span class="badged">${button}<span class="dot" data-driven aria-hidden="true"></span></span>${tooltip}` : b`${button}${tooltip}`;
   }
@@ -22070,13 +22095,14 @@ var SliccApp = class extends ThemedElement {
     const primary = side === "bottom" ? items.filter((item2) => phoneRail.includes(item2.id)) : items;
     const fit = primary.length < items.length ? Math.min(primary.length, railCapacity(this.#width, Infinity)) : railCapacity(this.#width, items.length);
     const shown2 = side === "bottom" ? primary.slice(0, fit) : items;
+    const grouped = new Set(shown2.map((item2) => item2.cone).filter(Boolean)).size > 1;
     return b`<nav class=${`rail ${side}`} aria-label=${`Panels, ${side}`} @dragover=${this.#railOver} @dragleave=${this.#railLeave} @drop=${this.#railDrop}>${shown2.map(
-      (item2) => this.#railButton(item2, side)
+      (item2, index) => b`${grouped && index && shown2[index - 1].cone !== item2.cone ? b`<span class="cones" aria-hidden="true"></span>` : A}${this.#railButton(item2, side)}`
     )}${this.#more(items.filter((item2) => !shown2.includes(item2)))}</nav>`;
   }
   #rails() {
     const dock = this.renderRoot.querySelector("slicc-dock");
-    const sprinkles = (this.model?.sprinkles.list() ?? []).filter((sprinkle) => !sprinkle.inline || this.dips.has(sprinkle.id)).map(sprinkleSurface);
+    const sprinkles = this.#sprinkles().filter((sprinkle) => !sprinkle.inline || this.dips.has(sprinkle.id)).map(sprinkleSurface);
     const all2 = dock && this.#started ? [...sprinkles, ...this.#available()] : [];
     const phone = this.screen === "phone";
     return {