@ai-ecoverse/slicc-spectrum 1.86.7 → 1.87.0

package/dist/slicc-kernel-model.js

@@ -6,7 +6,7 @@ import {
   DummySettings,
   clock,
   dummySettingsKey
-} from "./chunk-X4C3AZJT.js";
+} from "./chunk-VRFAMBWK.js";
 import {
   Emitter
 } from "./chunk-T5NHW4KC.js";

package/dist/slicc-ui.js

@@ -31531,15 +31531,32 @@ function actionLabel(action, handlers, messageId) {
   const count = action === "drop-turn" ? handlers.dropping(messageId) : 1;
   return count > 1 ? `Drop ${count} failed turns` : actionLabels[action];
 }
+var signedIn = "Signed in. Retry to send it again.";
+function stopSigningIn(event2, handlers, account, id) {
+  const main2 = event2.currentTarget.nextElementSibling;
+  main2.focus();
+  handlers.cancelLogin?.(account, id);
+}
+function fixButton(fix, item2, handlers, login) {
+  const id = item2.id ?? "";
+  const signing = login?.state === "signing-in";
+  const shown4 = login?.state === "connected" ? "retry" : fix;
+  const cancel = signing && login.cancel;
+  return b`${cancel ? b`<swc-button size="s" variant="secondary" fill-style="outline" data-action="cancel-login" @click=${(event2) => stopSigningIn(event2, handlers, item2.account, id)}>Cancel</swc-button>` : A}<swc-button size="s" variant="secondary" fill-style="outline" data-action=${shown4} ?pending=${signing} ?disabled=${handlers.readOnly} @click=${() => handlers.action(shown4, item2.id, item2.account)}>${signing ? "Signing in\u2026" : actionLabel(shown4, handlers, id)}</swc-button>`;
+}
 function errorCard(item2, handlers) {
   const id = item2.id ?? "";
   const fix = handlers.seat === void 0 ? item2.action : void 0;
-  const action = fix ? b`<swc-button size="s" variant="secondary" fill-style="outline" data-action=${fix} ?disabled=${handlers.readOnly} @click=${() => handlers.action(fix, item2.id)}>${actionLabel(fix, handlers, id)}</swc-button>` : A;
-  return b`<div class="error-card" role="alert" data-id=${id || A}>
-    <swc-icon-alert-diamond class="icon" size="s" aria-hidden="true"></swc-icon-alert-diamond>
-    <span class="sr">Error: </span><span class="lead">${item2.title}</span>
-    ${item2.text ? b`<span class="detail">${item2.text}</span>` : A}
-    ${action}
+  const login = fix === "login" && item2.account && !handlers.readOnly ? handlers.login?.(item2.account, id) : void 0;
+  const resolved = login?.state === "connected";
+  const text2 = resolved ? signedIn : item2.text;
+  const failure2 = login?.state === "idle" ? login.error : void 0;
+  return b`<div class="error-card" role=${resolved ? A : "alert"} aria-atomic=${resolved ? A : "false"} data-id=${id || A} data-login=${login?.state ?? A}>
+    ${resolved ? b`<swc-icon-info-circle class="icon" size="s" aria-hidden="true"></swc-icon-info-circle>` : b`<swc-icon-alert-diamond class="icon" size="s" aria-hidden="true"></swc-icon-alert-diamond>`}
+    ${resolved ? A : b`<span class="sr">Error: </span>`}<span class="lead">${item2.title}</span>
+    ${text2 ? b`<span class="detail" role=${login ? "status" : A}>${text2}</span>` : A}
+    ${fix ? b`<div class="fix" aria-live="off">${fixButton(fix, item2, handlers, login)}</div>` : A}
+    ${failure2 ? b`<div class="help" data-error="login"><sp-help-text size="s" variant="negative" icon>${failure2}</sp-help-text><swc-action-button size="s" quiet data-action="settings" @click=${() => handlers.action("settings", item2.id, item2.account)}>Open settings</swc-action-button></div>` : A}
   </div>`;
 }
 function time(at) {
@@ -31755,7 +31772,7 @@ function part(entry, handlers) {
       return b`<div class="link-text">${entry.title}</div>`;
     default:
       return errorCard(
-        { title: entry.message, text: entry.detail, action: entry.action },
+        { title: entry.message, text: entry.detail, action: entry.action, account: entry.account },
         handlers
       );
   }
@@ -31905,7 +31922,9 @@ function assistant(message, name, model, handlers, showThinking, suggestion = nu
     message.parts,
     {
       ...handlers,
-      action: (action) => handlers.action(action, message.id),
+      action: (action, _id, account) => handlers.action(action, message.id, account),
+      login: (account) => handlers.login?.(account, message.id),
+      cancelLogin: (account) => handlers.cancelLogin?.(account, message.id),
       dropping: () => handlers.dropping(message.id)
     },
     showThinking,
@@ -31983,7 +32002,8 @@ function system(message, handlers) {
         id: message.id,
         title: message.title ?? "Error",
         text: message.text,
-        action: message.action
+        action: message.action,
+        account: message.account
       },
       handlers
     )
@@ -32794,6 +32814,9 @@ var messageCss = i`
     grid-row: span 2;
     color: var(--swc-negative-visual-color);
   }
+  .error-card[data-login='connected'] .icon {
+    color: var(--swc-neutral-subdued-content-color-default);
+  }
   .error-card .lead {
     grid-column: 2;
     font-weight: var(--swc-bold-font-weight);
@@ -32803,18 +32826,33 @@ var messageCss = i`
     grid-column: 2;
     overflow-wrap: anywhere;
   }
-  .error-card swc-button {
+  .error-card .fix {
     grid-column: 3;
-    grid-row: span 2;
+    grid-row: 1 / span 2;
+    display: flex;
+    gap: var(--swc-spacing-100);
+  }
+  .error-card swc-button {
     white-space: nowrap;
   }
+  .error-card .help {
+    grid-column: 2 / -1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--swc-spacing-50) var(--swc-spacing-100);
+  }
   @container (inline-size < 480px) {
     .error-card {
       margin-inline: var(--swc-spacing-300);
     }
+    .error-card .fix {
+      flex-direction: column-reverse;
+      align-items: flex-end;
+    }
   }
   @container (inline-size < 360px) {
-    .error-card swc-button {
+    .error-card .fix {
       grid-column: 2;
       grid-row: auto;
       justify-self: start;
@@ -37478,7 +37516,9 @@ var SliccChat = class extends ThemedElement {
     readOnly: false,
     answer: (questionId, answer) => this.model?.agent.answer(this.#id(), questionId, answer),
     resolve: (messageId, state2) => this.model?.agent.resolveLick(this.#id(), messageId, state2),
-    action: (action, messageId) => this.#action(action, messageId),
+    action: (action, messageId, account) => this.#action(action, messageId, account),
+    login: (account, messageId) => this.#loginState(account, messageId),
+    cancelLogin: (account, messageId) => this.#cancelLogin(account, messageId),
     dropping: (messageId) => failedTurns(this.model.agent.messages(this.#id()), messageId).length,
     open: (path) => this.dispatchEvent(
       new CustomEvent("open-file", { detail: { path }, bubbles: true, composed: true })
@@ -37729,9 +37769,56 @@ var SliccChat = class extends ThemedElement {
     if (!restored) return;
     this.renderRoot.querySelector("slicc-composer")?.restore(latest ? { text: latest.text, attachments: latest.attachments } : restored);
   }
-  #action(action, messageId = "") {
+  #logins = /* @__PURE__ */ new Map();
+  #loginState(accountId, messageId) {
+    const settings = this.model.settings;
+    const account = settings.accounts().find((candidate) => candidate.id === accountId);
+    const local2 = this.#logins.get(`${messageId}:${accountId}`);
+    const cancel = !!settings.cancel;
+    if (account?.status === "signing-in" || local2?.pending) return { state: "signing-in", cancel };
+    if (account?.status === "connected") return { state: "connected" };
+    return { state: "idle", error: local2?.error };
+  }
+  #cancelLogin(accountId, messageId) {
+    const local2 = this.#logins.get(`${messageId}:${accountId}`);
+    if (local2) local2.cancelled = true;
+    this.model?.settings.cancel?.(accountId);
+  }
+  #settings(section) {
+    this.dispatchEvent(
+      new CustomEvent("show-surface", {
+        detail: section ? { id: "settings", section } : { id: "settings" },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  #login(model, messageId, accountId) {
+    const account = model.settings.accounts().find((candidate) => candidate.id === accountId);
+    if (!account || account.auth === "api-key" || account.secret || account.fields?.length) {
+      this.#settings(accountId ?? "accounts");
+      return;
+    }
+    const local2 = { pending: true };
+    this.#logins.set(`${messageId}:${account.id}`, local2);
+    const done2 = (error) => {
+      local2.pending = false;
+      local2.error = local2.cancelled ? void 0 : error;
+      this.requestUpdate();
+    };
+    model.settings.connect(account.id).then(
+      () => done2(),
+      (error) => done2(error.message)
+    );
+    this.requestUpdate();
+  }
+  #action(action, messageId = "", account) {
     const model = this.model;
     if (!model) return;
+    if (action === "login") {
+      this.#login(model, messageId, account);
+      return;
+    }
     const id = this.#id();
     if (action === "drop-turn") {
       void this.#rewind(id, messageId);
@@ -37742,9 +37829,7 @@ var SliccChat = class extends ThemedElement {
       if (last) void model.agent.send(id, { text: last.text, attachments: last.attachments });
       return;
     }
-    this.dispatchEvent(
-      new CustomEvent("show-surface", { detail: { id: "settings" }, bubbles: true, composed: true })
-    );
+    this.#settings(account);
   }
   #message(message, agent, suggestion, changed, extra, owners, stamp, pile) {
     const model = this.model;
@@ -42163,6 +42248,15 @@ var SliccSettings = class extends ThemedElement {
   focus() {
     this.focusOn("sp-picker");
   }
+  reveal(section) {
+    void this.updateComplete.then(() => {
+      const root2 = this.renderRoot;
+      const row = root2.querySelector(`.account[data-id="${CSS.escape(section)}"]`);
+      const target2 = row ?? root2.querySelector("h2[data-section=accounts]");
+      row?.querySelector("swc-button")?.focus();
+      target2?.scrollIntoView({ block: "start" });
+    });
+  }
   #update(patch) {
     this.model?.settings.update(patch);
   }
@@ -42552,7 +42646,7 @@ var SliccSettings = class extends ThemedElement {
         </sp-picker>
       </div>
       </div>
-      <h2>Accounts</h2>
+      <h2 data-section="accounts">Accounts</h2>
       <div class="accounts">${providers.map((account) => this.#account(account))}</div>
       ${servers.length ? b`<h2>MCP servers</h2>
               <div class="accounts" data-group="mcp">${servers.map((account) => this.#account(account))}</div>` : A}