@ai-ecoverse/slicc-spectrum 1.69.0 → 1.69.1

package/dist/slicc-kernel-model.js

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

package/dist/slicc-ui.js

@@ -11447,8 +11447,8 @@ var SliccAgents = class extends ModelElement {
       return;
     }
     const current = port.active();
-    const stale = current === agent.id || !port.list().some((candidate) => candidate.id === current);
-    if (stale && agent.parentId) port.select(agent.parentId);
+    const stale2 = current === agent.id || !port.list().some((candidate) => candidate.id === current);
+    if (stale2 && agent.parentId) port.select(agent.parentId);
     await this.updateComplete;
     this.focus();
   }
@@ -11701,6 +11701,62 @@ async function grammar(kind, name, version2, remote = grammarCdn, importer = (ur
   throw failure2;
 }
 
+// src/app/models.ts
+var asked = /* @__PURE__ */ new WeakMap();
+var switched = /* @__PURE__ */ new WeakMap();
+var settling = /* @__PURE__ */ new WeakSet();
+function stale(model, id, offered) {
+  if (offered.some((option2) => option2.id === id)) return false;
+  const provider = id.split("/")[0];
+  return !model.settings.accounts().some((account) => account.id === provider && account.status === "connected");
+}
+function fallbackModel(options) {
+  const offered = chatModels(options);
+  return offered.find((option2) => option2.default) ?? offered[0];
+}
+function controls(model) {
+  const state3 = model.follow?.state();
+  return !state3 || !!state3.access.control && state3.link === "connected";
+}
+function settleModels(model) {
+  if (settling.has(model) || !controls(model)) return;
+  settling.add(model);
+  try {
+    settle(model);
+  } finally {
+    settling.delete(model);
+  }
+}
+function settle(model) {
+  const offered = chatModels(model.settings.models());
+  const pick = fallbackModel(offered);
+  if (!pick) return;
+  const requests = asked.get(model) ?? /* @__PURE__ */ new Map();
+  asked.set(model, requests);
+  const ask = (key2, from, apply2) => {
+    if (!stale(model, from, offered)) {
+      requests.delete(key2);
+      return;
+    }
+    if (requests.get(key2) === pick.id) return;
+    requests.set(key2, pick.id);
+    apply2();
+  };
+  for (const agent of model.agent.list())
+    if (!agent.frozen)
+      ask(`agent:${agent.id}`, agent.model, () => model.agent.setModel(agent.id, pick.id));
+  ask("settings", model.settings.get().model, () => {
+    switched.set(model, { to: pick });
+    model.settings.update({ model: pick.id });
+  });
+}
+function modelSwitch(model) {
+  return switched.get(model);
+}
+function forgetSwitch(model) {
+  switched.delete(model);
+}
+
 // node_modules/@adobe/spectrum-wc-icons/dist/Cloud.js
 function e82() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M15.407 17H3.717a3.456 3.456 0 0 1-3.45-3.452 3.45 3.45 0 0 1 2.323-3.25 4 4 0 0 1-.065-.702c0-2.18 1.81-3.953 4.034-3.953q.42 0 .831.087c.637-1.958 2.476-3.346 4.589-3.346a4.85 4.85 0 0 1 4.844 4.844q0 .659-.187 1.298a4.32 4.32 0 0 1 3.103 4.142A4.337 4.337 0 0 1 15.407 17M6.559 7.143c-1.397 0-2.534 1.1-2.534 2.453q.001.5.206.965a.75.75 0 0 1-.637 1.051 1.95 1.95 0 0 0-1.828 1.936c0 1.076.876 1.952 1.952 1.952h11.689a2.835 2.835 0 0 0 2.832-2.832 2.826 2.826 0 0 0-2.682-2.814.75.75 0 0 1-.625-1.095c.26-.5.39-1.015.39-1.531 0-1.844-1.5-3.344-3.344-3.344-1.662 0-3.08 1.252-3.297 2.912a.75.75 0 0 1-1.054.585 2.6 2.6 0 0 0-1.068-.238"/></svg>';
@@ -14932,11 +14988,11 @@ var TerminalPanels = class {
   }
   #ask(info, trigger2) {
     const body4 = "The shell and anything running in it stop. You can\u2019t undo this.";
-    const asked = this.#asking.then(
+    const asked2 = this.#asking.then(
       () => confirm({ title: `Close ${info.title}?`, body: body4, action: "Close", trigger: trigger2 })
     );
-    this.#asking = asked;
-    return asked;
+    this.#asking = asked2;
+    return asked2;
   }
   activated(id) {
     if (terminalOf(id) !== null) this.#recent = id;
@@ -22976,9 +23032,14 @@ var SliccApp = class extends ThemedElement {
   }
   subscribe(model) {
     const update = () => this.requestUpdate();
+    const settle2 = () => settleModels(model);
+    queueMicrotask(settle2);
     return [
       ...super.subscribe(model),
+      model.settings.on("settings", settle2),
+      model.settings.on("accounts", settle2),
       model.agent.on("agents", () => {
+        settle2();
         this.#prune();
         update();
       }),
@@ -23003,6 +23064,7 @@ var SliccApp = class extends ThemedElement {
       ...model.tabs ? [model.tabs.on("tabs", update)] : [],
       ...model.follow ? [
         model.follow.on("follow", () => {
+          settle2();
           this.#followed(model);
           update();
         })
@@ -26142,6 +26204,7 @@ var navigation = /* @__PURE__ */ new Set([
   "PageUp",
   "PageDown"
 ]);
+var compactWidth = 560;
 var failed = (message) => message.role === "assistant" ? message.status === "error" : message.role === "system" && message.kind === "error";
 function carriesFiles(event2) {
   const types = [...event2.dataTransfer?.types ?? []];
@@ -26176,11 +26239,17 @@ document.addEventListener(
   true
 );
 var SliccChat = class extends ThemedElement {
-  static properties = { ...ThemedElement.properties, agent: {}, dropping: { state: true } };
+  static properties = {
+    ...ThemedElement.properties,
+    agent: {},
+    dropping: { state: true },
+    compact: { state: true }
+  };
   constructor() {
     super();
     this.agent = "";
     this.dropping = false;
+    this.compact = false;
     this.addEventListener("dragenter", this.#over);
     this.addEventListener("dragover", this.#over);
     this.addEventListener("dragleave", this.#leave);
@@ -26234,7 +26303,7 @@ var SliccChat = class extends ThemedElement {
       }
       header {
         display: flex;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
         align-items: center;
         gap: var(--swc-spacing-50) var(--swc-spacing-100);
         padding: var(--swc-spacing-75) var(--swc-spacing-200);
@@ -26246,15 +26315,23 @@ var SliccChat = class extends ThemedElement {
       }
       header sp-picker {
         --mod-picker-spacing-label-to-picker-quiet: calc(-1 * var(--swc-border-width-100));
+        flex: none;
         min-width: 0;
         width: auto;
       }
+      header sp-picker[label='Model'] {
+        flex: 0 1 auto;
+      }
+      header swc-status-light,
+      header swc-action-button {
+        flex: none;
+      }
       header swc-status-light {
         align-self: center;
       }
       header swc-meter {
         flex: 0 1 calc(var(--swc-spacing-400) * 6);
-        min-width: calc(var(--swc-spacing-400) * 4);
+        min-width: calc(var(--swc-spacing-400) * 4.5);
         margin-inline-start: auto;
       }
       header .frozen,
@@ -26343,14 +26420,27 @@ var SliccChat = class extends ThemedElement {
     }
   };
   subscribe(model) {
+    const settle2 = () => {
+      settleModels(model);
+      this.requestUpdate();
+    };
+    queueMicrotask(() => settleModels(model));
+    const width = new ResizeObserver(([entry]) => {
+      const size4 = entry.contentRect.width;
+      this.compact = size4 > 0 && size4 < compactWidth;
+    });
+    width.observe(this);
     return [
       ...super.subscribe(model),
+      () => width.disconnect(),
+      model.settings.on("settings", settle2),
+      model.settings.on("accounts", settle2),
       model.agent.on("active", () => {
         if (!this.agent) this.#refresh(true);
       }),
-      model.agent.on("agents", () => this.requestUpdate()),
+      model.agent.on("agents", settle2),
       ...model.tabs ? [model.tabs.on("tabs", () => this.requestUpdate())] : [],
-      ...model.follow ? [model.follow.on("follow", () => this.requestUpdate())] : [],
+      ...model.follow ? [model.follow.on("follow", settle2)] : [],
       model.agent.on("messages", (agentId) => {
         if (agentId === this.#id()) this.#refresh(this.#sent(agentId));
       }),
@@ -26524,10 +26614,11 @@ var SliccChat = class extends ThemedElement {
         <span class="model" data-model>${label ?? agent.model}</span>
         ${meter}`;
     }
+    const offered = chatModels(model.settings.models());
     return b`${statusLight(agent.status)}
-      <sp-picker size="s" quiet label="Model" value=${agent.model} @change=${(event2) => model.agent.setModel(agent.id, event2.target.value)}>
-        ${chatModels(model.settings.models()).map((option2) => b`<sp-menu-item value=${option2.id}>${option2.label}<span slot="description">${option2.provider}</span></sp-menu-item>`)}
-      </sp-picker>
+      ${offered.length ? b`<sp-picker size="s" quiet label="Model" value=${agent.model} @change=${(event2) => model.agent.setModel(agent.id, event2.target.value)}>
+        ${offered.map((option2) => b`<sp-menu-item value=${option2.id}>${option2.label}<span slot="description">${option2.provider}</span></sp-menu-item>`)}
+      </sp-picker>` : b`<swc-action-button size="s" quiet data-action="set-up-model" @click=${() => this.#action("settings")}>Set up a model</swc-action-button>`}
       <sp-picker size="s" quiet label="Thinking" value=${model.settings.get().thinking} @change=${(event2) => model.settings.update({ thinking: event2.target.value })}>
         <sp-menu-item value="off">No thinking</sp-menu-item>
         <sp-menu-item value="low">Think a little</sp-menu-item>
@@ -26535,7 +26626,7 @@ var SliccChat = class extends ThemedElement {
         <sp-menu-item value="high">Think hard</sp-menu-item>
       </sp-picker>
       ${meter}
-      <swc-action-button id="new-chat" size="s" quiet data-action="new-chat" ?disabled=${empty2} @click=${() => this.#newChat(agent)}><swc-icon-new slot="icon"></swc-icon-new>New conversation</swc-action-button>
+      <swc-action-button id="new-chat" size="s" quiet data-action="new-chat" accessible-label=${this.compact ? "New conversation" : A} ?disabled=${empty2} @click=${() => this.#newChat(agent)}><swc-icon-new slot="icon"></swc-icon-new>${this.compact ? A : "New conversation"}</swc-action-button>
       <swc-tooltip for="new-chat" placement="bottom">${agent.kind === "cone" && model.agent.freeze ? "Start a new conversation. This one stays in the Freezer." : "Start a new conversation"}</swc-tooltip>`;
   }
   render() {
@@ -26547,7 +26638,7 @@ var SliccChat = class extends ThemedElement {
     const messages = agent ? this.model?.agent.messages(agent.id) ?? [] : [];
     this.#tail = messages.at(-1)?.id ?? "";
     return b`
-      <header>
+      <header ?data-compact=${this.compact}>
         ${agent ? this.#meta(agent, !messages.length) : b`<span>No agent</span>`}
       </header>
       <slicc-notices .model=${this.model}></slicc-notices>
@@ -30492,6 +30583,9 @@ var SliccSettings = class extends ThemedElement {
         color: var(--swc-neutral-subdued-content-color-default);
         font-size: var(--swc-font-size-75);
       }
+      .switched {
+        grid-column: 2;
+      }
       .failure,
       .problem {
         display: flex;
@@ -30510,6 +30604,9 @@ var SliccSettings = class extends ThemedElement {
           grid-template-columns: minmax(0, 1fr);
           gap: var(--swc-spacing-75);
         }
+        .switched {
+          grid-column: 1;
+        }
         .accounts {
           grid-template-columns: minmax(0, 1fr) max-content;
           row-gap: var(--swc-spacing-400);
@@ -30540,10 +30637,15 @@ var SliccSettings = class extends ThemedElement {
   ];
   subscribe(model) {
     const update = () => this.requestUpdate();
+    const settle2 = () => {
+      settleModels(model);
+      update();
+    };
+    queueMicrotask(() => settleModels(model));
     return [
       ...super.subscribe(model),
-      model.settings.on("settings", update),
-      model.settings.on("accounts", update),
+      model.settings.on("settings", settle2),
+      model.settings.on("accounts", settle2),
       ...model.vault ? [model.vault.on("status", update)] : []
     ];
   }
@@ -30553,6 +30655,15 @@ var SliccSettings = class extends ThemedElement {
   #update(patch) {
     this.model?.settings.update(patch);
   }
+  #pickModel(event2) {
+    forgetSwitch(this.model);
+    this.#update({ model: this.#value(event2) });
+  }
+  #switched(current) {
+    const note = modelSwitch(this.model);
+    if (note?.to.id !== current) return A;
+    return b`<p class="hint switched" role="status" data-switched>Switched to ${note.to.label} because the previous model's provider isn't set up.</p>`;
+  }
   #value(event2) {
     return event2.target.value;
   }
@@ -30900,9 +31011,10 @@ var SliccSettings = class extends ThemedElement {
       <div class="rows">
       <div class="row">
         <span class="label" id="model">Model for new cones</span>
-        <sp-picker size="m" label="Model" aria-labelledby="model" value=${value.model} @change=${(e120) => this.#update({ model: this.#value(e120) })}>
+        <sp-picker size="m" label="Model" aria-labelledby="model" value=${value.model} @change=${(e120) => this.#pickModel(e120)}>
           ${chatModels(settings.models()).map((option2) => b`<sp-menu-item value=${option2.id}>${option2.label}<span slot="description">${option2.provider}</span></sp-menu-item>`)}
         </sp-picker>
+        ${this.#switched(value.model)}
       </div>
       <div class="row">
         <span class="label" id="thinking">Thinking</span>
@@ -31319,12 +31431,12 @@ var SliccSprinkle = class extends ThemedElement {
     const held = { port, id, ready: false, value: null };
     this.#held = held;
     this.#frame = { key: "", doc: "" };
-    const settle = (value) => {
+    const settle2 = (value) => {
       held.value = value ?? null;
       held.ready = true;
       if (this.#held === held) this.requestUpdate();
     };
-    ask.call(port, id, "getState", []).then(settle, () => settle(null));
+    ask.call(port, id, "getState", []).then(settle2, () => settle2(null));
   }
   willUpdate(changed) {
     super.willUpdate(changed);