@ai-ecoverse/slicc-spectrum 1.54.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 = {
@@ -20884,8 +20885,20 @@ var packageActions = {
   install: "Install",
   update: "Update",
   remove: "Remove",
-  retry: "Retry"
+  retry: "Retry",
+  unpin: "Unpin"
 };
+function packageLight(item2) {
+  if (item2.pin && item2.state === "installed")
+    return ["positive", item2.pin.base === null ? "Added" : "Pinned"];
+  if (item2.pin?.base && item2.state === "removing") return ["info", "Unpinning"];
+  return packageStates[item2.state];
+}
+function pinVersion(item2, pin) {
+  const version2 = item2.version ?? pin.range;
+  if (pin.base === null) return [pin.range === version2 ? version2 : `${pin.range} \u2192 ${version2}`];
+  return [version2, pin.base === version2 ? "the version seven ships" : `seven ships ${pin.base}`];
+}
 var packageRunning = /* @__PURE__ */ new Set(["installing", "updating", "removing"]);
 var list3 = (names) => new Intl.ListFormat("en", { type: "conjunction" }).format(names);
 function requiresText(item2, all2) {
@@ -21335,6 +21348,14 @@ var SliccUpdates = class extends ModelElement {
     </article>`;
   }
   #packageMeta(item2, all2) {
+    if (item2.pin) {
+      const [version3, ...rest] = pinVersion(item2, item2.pin);
+      return b`<p class="meta" data-pin=${item2.pin.base === null ? "added" : "pinned"}>
+        <span class="version">${version3}</span>
+        ${rest.map((part2) => b`<span>${part2}</span>`)}
+        <span>in ${item2.pin.project}</span>
+      </p>`;
+    }
     const version2 = item2.version === null ? item2.offered : item2.offered && item2.offered !== item2.version ? `${item2.version} \u2192 ${item2.offered}` : item2.version;
     const download = item2.size !== void 0 && (item2.version === null || item2.offered !== item2.version);
     const requires = requiresText(item2, all2);
@@ -21360,11 +21381,11 @@ var SliccUpdates = class extends ModelElement {
     return b`<swc-progress-bar
       size="s"
       indeterminate
-      accessible-label=${`${item2.label}: ${packageStates[item2.state]?.[1].toLowerCase()}`}
+      accessible-label=${`${item2.label}: ${packageLight(item2)?.[1].toLowerCase()}`}
     ></swc-progress-bar>`;
   }
   #package(item2, all2, act) {
-    const light = packageStates[item2.state];
+    const light = packageLight(item2);
     const busy = this.busy.get(item2.id);
     const shown2 = busy ? [busy] : act ? item2.actions : [];
     const error = this.problems.get(item2.id) ?? item2.error;
@@ -21400,21 +21421,32 @@ var SliccUpdates = class extends ModelElement {
       ${item2.log ? b`<details><summary>Install log</summary><pre><span class="package">${item2.package}</span>\n${item2.log}</pre></details>` : A}
     </li>`;
   }
+  #list(items, all2, port) {
+    return b`<ul>${c(
+      items,
+      (item2) => item2.id,
+      (item2) => this.#package(item2, all2, Boolean(port.actPackage))
+    )}</ul>`;
+  }
   #packages(port) {
     if (!port?.packages) return A;
     const all2 = port.packages();
+    const offered = all2.filter((item2) => item2.origin !== "user");
+    const yours = all2.filter((item2) => item2.origin === "user");
     return b`<section data-section="packages" aria-labelledby="packages">
       <swc-divider size="m"></swc-divider>
       <h2 id="packages">Optional packages</h2>
       <p class="hint">
-        ${all2.length ? "Tools for the agent and the terminal. Install the ones you need; you can remove them later." : "No optional packages are offered right now."}
+        ${offered.length ? "Tools for the agent and the terminal. Install the ones you need; you can remove them later." : "No optional packages are offered right now."}
       </p>
-      ${all2.length ? b`<ul>${c(
-      all2,
-      (item2) => item2.id,
-      (item2) => this.#package(item2, all2, Boolean(port.actPackage))
-    )}</ul>` : A}
-    </section>`;
+      ${offered.length ? this.#list(offered, all2, port) : A}
+    </section>
+    ${yours.length ? b`<section data-section="user-packages" aria-labelledby="user-packages">
+            <swc-divider size="m"></swc-divider>
+            <h2 id="user-packages">Your packages</h2>
+            <p class="hint">Packages you added or pinned with pnpm in /opt/agent or /opt/grammars. Seven’s updates keep them until you unpin or remove them.</p>
+            ${this.#list(yours, all2, port)}
+          </section>` : A}`;
   }
   render() {
     const port = this.model?.updates;
@@ -21619,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);
@@ -21832,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;
@@ -21967,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;
@@ -21985,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);
@@ -22017,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}`;
   }
@@ -22039,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 {