@ai-ecoverse/slicc-spectrum 1.61.0 → 1.62.1

package/dist/slicc-ui.js

@@ -21509,7 +21509,7 @@ var packageActions = {
 };
 function packageLight(item2) {
   if (item2.pin && item2.state === "installed")
-    return ["positive", item2.pin.base === null ? "Added" : "Pinned"];
+    return item2.pin.base === null ? ["positive", "Added"] : ["neutral", "Pinned"];
   if (item2.pin?.base && item2.state === "removing") return ["info", "Unpinning"];
   return packageStates[item2.state];
 }
@@ -26564,13 +26564,14 @@ function trigger(text2, caret) {
     return { kind: "mention", start: before.length - mention[2].length - 1, query: mention[2] };
   return null;
 }
-var SliccComposer = class extends ModelElement {
+var SliccComposer = class extends ThemedElement {
   static properties = {
-    ...ModelElement.properties,
+    ...ThemedElement.properties,
     value: { state: true },
     attachments: { state: true },
     popup: { state: true },
     dictating: { state: true },
+    blocked: { state: true },
     agent: {}
   };
   #drafts = /* @__PURE__ */ new Map();
@@ -26586,6 +26587,7 @@ var SliccComposer = class extends ModelElement {
     this.attachments = [];
     this.popup = null;
     this.dictating = false;
+    this.blocked = false;
     this.agent = "";
   }
   static styles = [
@@ -26624,6 +26626,38 @@ var SliccComposer = class extends ModelElement {
         border: var(--swc-border-width-100) dashed var(--swc-gray-300);
         color: var(--swc-neutral-content-color-default);
       }
+      .hold {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--swc-spacing-100);
+        margin: 0 0 var(--swc-spacing-100);
+        padding: var(--swc-spacing-75) var(--swc-spacing-100) var(--swc-spacing-75) var(--swc-spacing-200);
+        border-radius: var(--swc-corner-radius-medium-default);
+        background: var(--swc-informative-subtle-background-color-default);
+        color: var(--swc-neutral-content-color-default);
+      }
+      .hold[data-hold='locked'] {
+        background: var(--swc-notice-subtle-background-color-default);
+      }
+      .hold swc-icon-lock,
+      .hold swc-progress-circle {
+        flex: none;
+      }
+      .hold .text {
+        flex: 1;
+        min-inline-size: 12em;
+      }
+      .hold .blocked {
+        flex-basis: 100%;
+        display: flex;
+        align-items: center;
+        gap: var(--swc-spacing-75);
+        color: var(--swc-negative-content-color-default);
+      }
+      .hold .held {
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
       .queued swc-icon-clock {
         flex: none;
         color: var(--swc-neutral-subdued-content-color-default);
@@ -26818,9 +26852,14 @@ var SliccComposer = class extends ModelElement {
     });
     const update = () => this.requestUpdate();
     return [
+      ...super.subscribe(model),
       model.agent.on("active", (id) => {
         if (!this.agent) this.#switch(id);
       }),
+      model.agent.on("hold", (hold) => {
+        if (hold?.reason !== "locked") this.blocked = false;
+        update();
+      }),
       model.agent.on("agents", update),
       model.agent.on("messages", update),
       model.agent.on("message", update),
@@ -27206,6 +27245,26 @@ var SliccComposer = class extends ModelElement {
     ) : b`<div class="empty">Nothing matches.</div>`}
     </div>`;
   }
+  #hold() {
+    const hold = this.model?.agent.hold?.();
+    if (!hold) return A;
+    const locked = hold.reason === "locked";
+    const vault = this.model?.vault;
+    const held = hold.held === 1 ? "1 tool result held" : `${hold.held} tool results held`;
+    return b`<div class="hold" role="status" data-hold=${hold.reason}>
+      ${locked ? b`<swc-icon-lock size="s" aria-hidden="true"></swc-icon-lock>` : b`<swc-progress-circle size="s" label="Waiting" aria-hidden="true"></swc-progress-circle>`}
+      <span class="text">${locked ? "Unlock the vault to continue" : "Waiting for the vault"}${hold.held ? b`<span class="held"> · ${held}</span>` : A}</span>
+      ${locked && vault ? b`<slicc-vault-button
+              data-action="unlock-vault"
+              .vault=${vault}
+              .config=${{ intent: { kind: "unlock" }, label: "Unlock", size: "s", variant: "accent", theme: this.color }}
+              @vault-popup=${(event2) => {
+      this.blocked = event2.detail.state === "blocked";
+    }}
+            ></slicc-vault-button>` : A}
+      ${locked && this.blocked ? b`<span class="blocked" role="alert" data-popup="blocked"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle>The browser blocked the vault window. Allow pop-ups for this site, then try again.</span>` : A}
+    </div>`;
+  }
   #queue() {
     const queued = this.model?.agent.queue(this.#agent) ?? [];
     if (queued.length === 0) return A;
@@ -27236,6 +27295,7 @@ var SliccComposer = class extends ModelElement {
     const speech = "SpeechRecognition" in globalThis || "webkitSpeechRecognition" in globalThis;
     const held = this.#held();
     return b`<div class="column">
+        ${this.#hold()}
         ${this.#queue()}
         ${this.#popup()}
         <swc-prompt-field