@ai-ecoverse/slicc-spectrum 1.53.1 → 1.55.0

package/dist/slicc-ui.js

@@ -20884,8 +20884,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 +21347,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 +21380,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 +21420,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;
@@ -26058,19 +26089,19 @@ var SliccComposer = class extends ModelElement {
     };
   }
   pick(choice) {
-    const popup = this.popup;
-    if (!popup) return;
-    if (popup.kind === "file") {
+    const popup2 = this.popup;
+    if (!popup2) return;
+    if (popup2.kind === "file") {
       this.popup = null;
       void this.attachPath(choice.value);
       return;
     }
     const area = this.#textarea;
     const caret = area.selectionStart ?? this.value.length;
-    const insert = popup.kind === "command" ? `/${choice.value} ` : popup.kind === "mention" ? `@${choice.value} ` : `${choice.value} `;
-    this.value = this.value.slice(0, popup.start) + insert + this.value.slice(caret);
+    const insert = popup2.kind === "command" ? `/${choice.value} ` : popup2.kind === "mention" ? `@${choice.value} ` : `${choice.value} `;
+    this.value = this.value.slice(0, popup2.start) + insert + this.value.slice(caret);
     this.popup = null;
-    const position = popup.start + insert.length;
+    const position = popup2.start + insert.length;
     void this.updateComplete.then(() => this.#field?.updateComplete).then(() => {
       area.focus();
       area.setSelectionRange(position, position);
@@ -26089,20 +26120,20 @@ var SliccComposer = class extends ModelElement {
     return true;
   }
   #popupKey(event2) {
-    const popup = this.popup;
-    if (!popup || popup.kind === "secret") return false;
+    const popup2 = this.popup;
+    if (!popup2 || popup2.kind === "secret") return false;
     if (event2.key === "Escape") {
       this.popup = null;
       return true;
     }
-    const count = popup.items.length;
+    const count = popup2.items.length;
     if ((event2.key === "ArrowDown" || event2.key === "ArrowUp") && count) {
       const step = event2.key === "ArrowDown" ? 1 : -1;
-      this.popup = { ...popup, index: (popup.index + step + count) % count };
+      this.popup = { ...popup2, index: (popup2.index + step + count) % count };
       return true;
     }
     if ((event2.key === "Enter" || event2.key === "Tab") && count && !event2.shiftKey) {
-      this.pick(popup.items[popup.index]);
+      this.pick(popup2.items[popup2.index]);
       return true;
     }
     return false;
@@ -26207,9 +26238,9 @@ var SliccComposer = class extends ModelElement {
     </swc-upload-attachment>`;
   }
   #popup() {
-    const popup = this.popup;
-    if (!popup) return A;
-    if (popup.kind === "secret") {
+    const popup2 = this.popup;
+    if (!popup2) return A;
+    if (popup2.kind === "secret") {
       const submit = (event2) => {
         event2.preventDefault();
         const form = event2.currentTarget;
@@ -26228,11 +26259,11 @@ var SliccComposer = class extends ModelElement {
       argument: "Options",
       mention: "Mention",
       file: "Attach a file from SLICC"
-    }[popup.kind];
+    }[popup2.kind];
     const option2 = (item2, index) => b`<div
       class="item"
       role="option"
-      aria-selected=${index === popup.index ? "true" : "false"}
+      aria-selected=${index === popup2.index ? "true" : "false"}
       data-value=${item2.value}
       @mousedown=${(event2) => {
       event2.preventDefault();
@@ -26242,13 +26273,13 @@ var SliccComposer = class extends ModelElement {
       <span class="label">${item2.label}</span><span class="detail">${item2.detail}</span>
     </div>`;
     const sections2 = [];
-    popup.items.forEach((item2, index) => {
+    popup2.items.forEach((item2, index) => {
       const last = sections2.at(-1);
       if (last && last.group === item2.group) last.entries.push([item2, index]);
       else sections2.push({ group: item2.group, entries: [[item2, index]] });
     });
-    return b`<div class="popup" role="listbox" aria-label=${title} data-kind=${popup.kind}>
-      ${popup.items.length ? sections2.map(
+    return b`<div class="popup" role="listbox" aria-label=${title} data-kind=${popup2.kind}>
+      ${popup2.items.length ? sections2.map(
       ({ group, entries }) => group ? b`<div class="section" role="group" aria-label=${group} data-group=${group}>
                     <div class="heading" aria-hidden="true">${group}</div>
                     ${entries.map(([item2, index]) => option2(item2, index))}
@@ -27066,8 +27097,11 @@ var accountStatus = {
   expired: ["notice", "Expired"],
   disconnected: ["neutral", "Not connected"],
   "signing-in": ["info", "Signing in\u2026"],
-  rejected: ["notice", "Rejected"]
+  rejected: ["notice", "Rejected"],
+  "needs-sign-in": ["neutral", "Needs sign-in"],
+  "sign-in-expired": ["notice", "Sign-in expired"]
 };
+var popup = (account) => account.group === "mcp" && account.auth === "oauth";
 var secretNames = { "api-key": "API key", token: "token" };
 var rejectedNames = { "api-key": "API key rejected", token: "Token rejected" };
 var SliccSettings = class extends ModelElement {
@@ -27317,14 +27351,14 @@ var SliccSettings = class extends ModelElement {
         @click=${() => this.#disconnect(account)}
       >Disconnect</swc-button>`;
     }
-    const label = account.status === "expired" ? "Reconnect" : "Connect";
+    const label = popup(account) ? "Sign in" : account.status === "expired" ? "Reconnect" : "Connect";
     const entering = this.entering === account.id;
     const busy = this.#signingIn(account) || !entering && this.pending.has(account.id);
     return b`<swc-button
       size="m"
       variant="secondary"
       data-action="connect"
-      accessible-label=${`${label} ${account.provider}`}
+      accessible-label=${popup(account) ? `Sign in to ${account.provider}` : `${label} ${account.provider}`}
       ?pending=${busy}
       ?disabled=${entering}
       @click=${() => this.#start(account)}
@@ -27333,6 +27367,8 @@ var SliccSettings = class extends ModelElement {
   #status(account) {
     if (this.#signingIn(account)) return "signing-in";
     if (account.status === "expired" && account.auth === "api-key") return "rejected";
+    if (popup(account) && account.status === "disconnected") return "needs-sign-in";
+    if (popup(account) && account.status === "expired") return "sign-in-expired";
     return account.status;
   }
   #account(account) {
@@ -61675,7 +61711,7 @@ var TabsContainer = class extends CompositeDisposable {
       groupById.set(tg.id, tg);
       if (overflowGroupSet.has(tg.id)) for (const pid of tg.panelIds) panelToGroup.set(pid, tg);
     }
-    const popup = () => this.accessor.getPopupServiceForGroup(this.group);
+    const popup2 = () => this.accessor.getPopupServiceForGroup(this.group);
     const buildGroupHeader = (tg) => {
       const groupHeader = document.createElement("div");
       groupHeader.className = "dv-tabs-overflow-group-header";
@@ -61694,7 +61730,7 @@ var TabsContainer = class extends CompositeDisposable {
         groupHeader.appendChild(badge);
       }
       groupHeader.addEventListener("click", () => {
-        popup().close();
+        popup2().close();
         if (tg.collapsed) tg.expand();
         const firstPanelId = tg.panelIds[0];
         if (firstPanelId) {
@@ -61746,7 +61782,7 @@ var TabsContainer = class extends CompositeDisposable {
           this.accessor.withOrigin("user", () => panel.api.setActive());
         };
         wrapper.addEventListener("click", (event2) => {
-          popup().close();
+          popup2().close();
           if (event2.defaultPrevented) return;
           doActivate();
         });
@@ -61755,15 +61791,15 @@ var TabsContainer = class extends CompositeDisposable {
           element: wrapper,
           panel,
           activate: () => {
-            popup().close();
+            popup2().close();
             doActivate();
           }
         };
       },
       open: (body4) => {
-        popup().openPopover(body4, anchor);
+        popup2().openPopover(body4, anchor);
       },
-      close: () => popup().close(),
+      close: () => popup2().close(),
       focusTrigger: () => {
         root2.tabIndex = -1;
         root2.focus();