@ai-ecoverse/slicc-spectrum 1.96.1 → 1.97.0

package/dist/slicc-ui.js

@@ -9766,11 +9766,11 @@ e25("swc-icon-user-following", o49);
 
 // src/app/follow.ts
 var lights = {
-  connecting: ["info", (owner) => `Connecting to ${owner}`],
-  connected: ["positive", (owner) => `Following ${owner}`],
-  reconnecting: ["notice", (owner) => `Reconnecting to ${owner}`],
-  unlinked: ["negative", (owner) => `Unlinked from ${owner}`],
-  failed: ["negative", (owner) => `Can\u2019t reach ${owner}`]
+  connecting: ["info", (owner2) => `Connecting to ${owner2}`],
+  connected: ["positive", (owner2) => `Following ${owner2}`],
+  reconnecting: ["notice", (owner2) => `Reconnecting to ${owner2}`],
+  unlinked: ["negative", (owner2) => `Unlinked from ${owner2}`],
+  failed: ["negative", (owner2) => `Can\u2019t reach ${owner2}`]
 };
 function refusedNow(state2) {
   return !!state2?.refused && state2.link === "connected";
@@ -9782,31 +9782,31 @@ function followLight(state2) {
 }
 function followPage(state2) {
   if (!state2) return null;
-  const { owner } = state2;
+  const { owner: owner2 } = state2;
   if (state2.link === "connecting")
     return {
       kind: "connecting",
-      title: `Connecting to ${owner}\u2026`,
-      body: `This device follows ${owner}. Its agent shows here once it\u2019s connected.`
+      title: `Connecting to ${owner2}\u2026`,
+      body: `This device follows ${owner2}. Its agent shows here once it\u2019s connected.`
     };
   if (state2.link === "unlinked")
     return {
       kind: "unlinked",
-      title: `${owner} unlinked this device`,
-      body: `To follow it again, open a new link from ${owner}.`
+      title: `${owner2} unlinked this device`,
+      body: `To follow it again, open a new link from ${owner2}.`
     };
   if (state2.link === "failed")
     return {
       kind: "failed",
-      title: `Can\u2019t follow ${owner}`,
-      body: state2.error ?? `The link to ${owner} failed.`
+      title: `Can\u2019t follow ${owner2}`,
+      body: state2.error ?? `The link to ${owner2} failed.`
     };
   if (state2.access.view) return null;
   const where2 = state2.name ? `next to ${state2.name}` : "for this device";
   return {
     kind: "waiting",
-    title: `Waiting for ${owner} to allow this device`,
-    body: `On ${owner}, choose Allow ${where2} in Network \u203A Linked devices.`
+    title: `Waiting for ${owner2} to allow this device`,
+    body: `On ${owner2}, choose Allow ${where2} in Network \u203A Linked devices.`
   };
 }
 function list(items, last) {
@@ -31430,9 +31430,9 @@ function tabsLight(state2) {
 var stores = /* @__PURE__ */ new WeakMap();
 var loose = {};
 function slotOf(model, key2, initial) {
-  const owner = model ?? loose;
-  const slots = stores.get(owner) ?? /* @__PURE__ */ new Map();
-  stores.set(owner, slots);
+  const owner2 = model ?? loose;
+  const slots = stores.get(owner2) ?? /* @__PURE__ */ new Map();
+  stores.set(owner2, slots);
   const found = slots.get(key2);
   if (found) return found;
   const slot = { value: initial(), listeners: /* @__PURE__ */ new Set() };
@@ -31881,6 +31881,7 @@ var SliccChat = class extends ThemedElement {
       model.agent.on("agents", settle2),
       ...model.tabs ? [model.tabs.on("tabs", () => this.requestUpdate())] : [],
       ...onWatch(model, settle2),
+      ...model.agent.starting ? [model.agent.on("starting", () => this.requestUpdate())] : [],
       model.agent.on("messages", (agentId) => {
         if (agentId === this.#id()) this.#refresh(this.#sent(agentId));
       }),
@@ -32335,7 +32336,7 @@ var SliccChat = class extends ThemedElement {
       this.#items(messages, agent),
       ([key2]) => key2,
       ([, item2]) => item2
-    )}</swc-conversation-thread>` : this.model?.tabs?.state().role === "connecting" ? b`<div class="empty" data-connecting>${connecting}</div>` : b`<div class="empty" data-empty>${empty3(watch, seat, agent?.name ?? "the agent")}</div>`}
+    )}</swc-conversation-thread>` : this.model?.tabs?.state().role === "connecting" ? b`<div class="empty" data-connecting>${connecting}</div>` : this.model?.agent.starting?.() ? A : b`<div class="empty" data-empty>${empty3(watch, seat, agent?.name ?? "the agent")}</div>`}
         </div>
       </div>
       ${this.dropping ? b`<swc-dropzone dragged size="l" aria-label="Attach files" dragged-message="Drop to attach"><p>Drop to attach</p></swc-dropzone>` : A}
@@ -38130,18 +38131,22 @@ function openTerminal(dock, info, screen) {
   }
   return id;
 }
-function defaultLayout(dock, screen, agent, items = surfaces2, terminals = []) {
+function openChatSlot(dock, item2, screen, agent, agentless) {
+  if (agent) openChat(dock, agent, screen, false);
+  else if (agentless) openSurface(dock, item2, screen, false);
+}
+function defaultLayout(dock, screen, agent, items = surfaces2, terminals = [], agentless = false) {
   dock.clear();
   const order = ["center", "left", "right"];
   for (const side of order) {
     for (const item2 of items) {
       if (item2.side !== side || !item2.open.includes(screen)) continue;
       if (item2.id === "terminal") for (const info of terminals) openTerminal(dock, info, screen);
-      else if (item2.id !== "chat") openSurface(dock, item2, screen);
-      else if (agent) openChat(dock, agent, screen, false);
+      else if (item2.id === "chat") openChatSlot(dock, item2, screen, agent, agentless);
+      else openSurface(dock, item2, screen);
     }
   }
-  const chat = chats(dock)[0];
+  const chat = chats(dock)[0] ?? (dock.has("chat") ? "chat" : null);
   if (chat) dock.api.getPanel(chat)?.api.setActive();
 }
 function shown(dock, id) {
@@ -42949,10 +42954,19 @@ var SliccApp = class extends ThemedElement {
     const saved = this.#saved();
     const restored = this.#offered(saved, dock.factories) && dock.restore(saved);
     if (!restored) {
-      defaultLayout(dock, this.screen, this.#active(), this.#available(), model.terminals.list());
+      defaultLayout(
+        dock,
+        this.screen,
+        this.#active(),
+        this.#available(),
+        model.terminals.list(),
+        !!model.agent.starting?.()
+      );
     }
     this.#started = this.screen;
     this.#prune();
+    if (!(this.#active() || chats(dock).length || dock.has("chat")) && model.agent.starting?.())
+      this.#open("chat", false);
     this.#saving = true;
     this.#save();
   }
@@ -42982,14 +42996,29 @@ var SliccApp = class extends ThemedElement {
   #prune() {
     const dock = this.renderRoot.querySelector("slicc-dock");
     if (!dock || !this.#started) return;
-    const known = new Set(this.model?.agent.list().map((agent) => agent.id));
+    const known = new Set(this.model?.agent.list().map((agent2) => agent2.id));
+    const agent = this.#active();
+    const held = !!agent && !!dock.content("chat")?.shadowRoot?.activeElement;
     this.panels.quietly(() => {
       for (const id of chats(dock)) {
         if (!known.has(chatAgent(id))) dock.close(id);
       }
+      if (agent && dock.has("chat")) {
+        if (this.#offers("chat") && !dock.has(chatId(agent.id)))
+          dock.open({
+            id: chatId(agent.id),
+            component: "chat",
+            title: agent.name,
+            params: { agent: agent.id },
+            inactive: true,
+            position: { referencePanel: "chat", direction: "within" }
+          });
+        dock.close("chat");
+      }
       if (this.model && this.#offers("terminal"))
         this.terminalPanels.sync(dock, this.model.terminals, this.screen);
     });
+    if (agent && held && this.#offers("chat")) openChat(dock, agent, this.screen, true);
   }
   #activated(event2) {
     const { id } = event2.detail;
@@ -43001,7 +43030,14 @@ var SliccApp = class extends ThemedElement {
   resetLayout() {
     const terminals = this.model?.terminals.list();
     this.panels.quietly(
-      () => defaultLayout(this.dock, this.screen, this.#active(), this.#available(), terminals)
+      () => defaultLayout(
+        this.dock,
+        this.screen,
+        this.#active(),
+        this.#available(),
+        terminals,
+        !!this.model?.agent.starting?.()
+      )
     );
     this.#save();
   }
@@ -46912,6 +46948,51 @@ var SliccVaultButton = class extends i2 {
 
 // src/app/composer.ts
 var limit = 25 * 1024 * 1024;
+var pages = /* @__PURE__ */ new WeakMap();
+function owner(node2) {
+  let at = node2;
+  while (at) {
+    if (at instanceof Element && at.localName === "slicc-app") return at;
+    at = at.parentNode ?? (at instanceof ShadowRoot ? at.host : null);
+  }
+  return node2.ownerDocument;
+}
+var PageQueue = class {
+  #host;
+  #owner = null;
+  constructor(host4) {
+    this.#host = host4;
+    host4.addController(this);
+  }
+  #page() {
+    this.#owner ??= this.#host.isConnected ? owner(this.#host) : null;
+    const page = this.#owner ?? this.#host.ownerDocument;
+    const found = pages.get(page) ?? { rows: [], draft: null, hosts: /* @__PURE__ */ new Set() };
+    pages.set(page, found);
+    return found;
+  }
+  get value() {
+    return this.#page().rows;
+  }
+  set value(rows2) {
+    const page = this.#page();
+    page.rows = rows2;
+    for (const host4 of [...page.hosts]) host4.requestUpdate();
+  }
+  get draft() {
+    return this.#page().draft;
+  }
+  set draft(draft2) {
+    this.#page().draft = draft2;
+  }
+  hostConnected() {
+    this.#owner = owner(this.#host);
+    this.#page().hosts.add(this.#host);
+  }
+  hostDisconnected() {
+    this.#page().hosts.delete(this.#host);
+  }
+};
 function available(model) {
   return commands2.filter((command3) => command3.available?.(model) ?? true);
 }
@@ -47052,6 +47133,7 @@ var SliccComposer = class extends ThemedElement {
     agent: {}
   };
   #drafts = /* @__PURE__ */ new Map();
+  #waiting = new PageQueue(this);
   #history = -1;
   #paths = [];
   #agent = "";
@@ -47140,6 +47222,7 @@ var SliccComposer = class extends ThemedElement {
         margin: 0 0 var(--swc-spacing-100);
         padding: 0;
         display: grid;
+        grid-template-columns: minmax(0, 1fr);
         gap: var(--swc-spacing-75);
       }
       .queued {
@@ -47184,7 +47267,8 @@ var SliccComposer = class extends ThemedElement {
       .hold .held {
         color: var(--swc-neutral-subdued-content-color-default);
       }
-      .queued swc-icon-clock {
+      .queued swc-icon-clock,
+      .queued > swc-icon-file {
         flex: none;
         color: var(--swc-neutral-subdued-content-color-default);
       }
@@ -47193,6 +47277,11 @@ var SliccComposer = class extends ThemedElement {
         font-size: var(--swc-font-size-75);
         color: var(--swc-neutral-subdued-content-color-default);
       }
+      .queued [data-files] {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--swc-spacing-50);
+      }
       .queued .text {
         flex: 1;
         min-width: 0;
@@ -47348,6 +47437,9 @@ var SliccComposer = class extends ThemedElement {
     if (changed.has("agent") && this.agent && this.model && this.agent !== this.#agent) {
       this.#switch(this.agent);
     }
+    const edited = changed.has("value") || changed.has("attachments");
+    if (edited && this.hasUpdated && !this.#agent && this.#starting())
+      this.#waiting.draft = { value: this.value, attachments: this.attachments };
   }
   connectedCallback() {
     super.connectedCallback();
@@ -47364,8 +47456,9 @@ var SliccComposer = class extends ThemedElement {
     globalThis.removeEventListener("keyup", this.#release);
     globalThis.removeEventListener("blur", this.#release);
     clearValues(this.renderRoot);
+    const kept3 = this.#waiting.draft?.attachments;
     const held = [
-      this.attachments,
+      this.attachments === kept3 ? [] : this.attachments,
       ...[...this.#drafts.values()].map((draft2) => draft2.attachments)
     ];
     if (held.flat().some((attachment2) => attachment2.url?.startsWith("blob:")))
@@ -47398,6 +47491,7 @@ var SliccComposer = class extends ThemedElement {
         this.#paths = entries.filter((entry) => entry.kind === "file").map((entry) => entry.path);
       });
     const update = () => this.requestUpdate();
+    queueMicrotask(() => this.#arrived());
     return [
       ...super.subscribe(model),
       model.agent.on("active", (id) => {
@@ -47407,7 +47501,18 @@ var SliccComposer = class extends ThemedElement {
         if (hold?.reason !== "locked") this.blocked = false;
         update();
       }),
-      model.agent.on("agents", update),
+      model.agent.on("agents", () => {
+        this.#arrived();
+        update();
+      }),
+      ...model.agent.starting ? [
+        model.agent.on("starting", () => {
+          if (this.#starting() && this.popup?.kind !== "file" && this.popup?.kind !== "secret")
+            this.popup = null;
+          this.#arrived();
+          update();
+        })
+      ] : [],
       model.agent.on("messages", update),
       model.agent.on("message", update),
       model.settings.on("settings", update),
@@ -47415,6 +47520,27 @@ var SliccComposer = class extends ThemedElement {
       ...model.vault ? [model.vault.on("availability", update), model.vault.on("status", update)] : []
     ];
   }
+  #starting() {
+    return this.model?.agent.starting?.() ?? null;
+  }
+  #arrived() {
+    const model = this.model;
+    const waiting3 = this.#waiting.value;
+    const agents = model?.agent.list() ?? [];
+    if (!(model && waiting3.length && agents.length) || this.#starting()) return;
+    const active = model.agent.active();
+    const id = agents.some((agent) => agent.id === active) ? active : agents[0].id;
+    this.#waiting.value = [];
+    const [first2, ...rest] = waiting3;
+    this.#deliver(model, id, first2, "queue");
+    for (const { text: text5, attachments } of rest)
+      this.#post(model, id, { text: text5, attachments, mode: "queue" });
+  }
+  #unwait(id) {
+    const waiting3 = this.#waiting.value;
+    release(waiting3.find((message) => message.id === id)?.attachments ?? []);
+    this.#waiting.value = waiting3.filter((message) => message.id !== id);
+  }
   #held() {
     const state2 = this.model?.follow?.state();
     return state2?.link === "reconnecting" ? state2.owner : null;
@@ -47422,7 +47548,9 @@ var SliccComposer = class extends ThemedElement {
   #switch(id) {
     if (this.#agent)
       this.#drafts.set(this.#agent, { value: this.value, attachments: this.attachments });
-    const draft2 = this.#drafts.get(id);
+    const shared2 = this.#agent || !this.isConnected ? null : this.#waiting.draft;
+    if (shared2 && id && !this.#drafts.has(id)) this.#waiting.draft = null;
+    const draft2 = this.#drafts.get(id) ?? shared2 ?? void 0;
     this.#agent = id;
     this.value = draft2?.value ?? "";
     this.attachments = draft2?.attachments ?? [];
@@ -47462,16 +47590,26 @@ var SliccComposer = class extends ThemedElement {
     this.attachments = [];
     this.popup = null;
     this.#history = -1;
+    if (this.#starting()) {
+      this.#waiting.value = [...this.#waiting.value, { id: this.#id(), text: text5, attachments }];
+      return;
+    }
     if (known) {
       release(attachments);
       known.run(model, this.#agent, (command3[2] ?? "").trim());
       return;
     }
-    const busy = this.#busy();
+    this.#deliver(model, this.#agent, { text: text5, attachments }, mode2);
+  }
+  #deliver(model, id, message, mode2) {
+    const busy = model.agent.busy(id);
     const resolved = mode2 === "queue" ? busy ? "queue" : "send" : busy || mode2 === "steer" ? "steer" : "send";
-    const id = this.#agent;
+    this.#post(model, id, { text: message.text, attachments: message.attachments, mode: resolved });
+  }
+  #post(model, id, message) {
+    const attachments = message.attachments ?? [];
     const done2 = () => retire(model.agent, id, attachments);
-    model.agent.send(id, { text: text5, attachments, mode: resolved }).then(done2, done2);
+    model.agent.send(id, { ...message, attachments }).then(done2, done2);
   }
   #propose(model, text5) {
     this.value = "";
@@ -47651,6 +47789,10 @@ ${this.value}` : text5;
   #refresh() {
     const area = this.#textarea;
     if (!area || this.model?.seat) return;
+    if (this.#starting()) {
+      this.popup = null;
+      return;
+    }
     if (this.popup?.kind === "file" || this.popup?.kind === "secret") return;
     const found = trigger(this.value, area.selectionStart ?? this.value.length);
     const name = this.value.match(/^\/(\w+)/)?.[1];
@@ -47990,7 +48132,23 @@ ${this.value}` : text5;
     )}
     </ul>`;
   }
-  #waiting() {
+  #starters() {
+    const waiting3 = this.#waiting.value;
+    if (waiting3.length === 0) return A;
+    return b`<ul class="queue" aria-label="Waiting for the agent">
+      ${waiting3.map(
+      (message) => b`<li class="queued" data-id=${message.id} data-mode="starting">
+          <swc-icon-clock size="s" aria-hidden="true"></swc-icon-clock>
+          ${message.text ? A : b`<swc-icon-file size="xs" aria-hidden="true"></swc-icon-file>`}
+          <span class="text"><span class="sr">Queued: </span>${message.text || message.attachments.map((attachment2) => attachment2.name).join(", ")}</span>
+          ${message.text && message.attachments.length ? b`<span class="next" data-files><swc-icon-file size="xs" aria-hidden="true"></swc-icon-file><span class="sr">, </span>${message.attachments.length === 1 ? "1 file" : `${message.attachments.length} files`}</span>` : A}
+          <span class="next">Sent when the agent starts</span>
+          <swc-close-button size="s" data-action="unqueue" accessible-label="Remove from queue" @click=${() => this.#unwait(message.id)}></swc-close-button>
+        </li>`
+    )}
+    </ul>`;
+  }
+  #review() {
     const queued = this.model?.agent.queue(this.#agent) ?? [];
     if (queued.length === 0) return A;
     return b`<ul class="queue" aria-label="Waiting for review">
@@ -48008,7 +48166,7 @@ ${this.value}` : text5;
     const cone = agent?.name ?? "the agent";
     return b`<div class="column">
         <span id="keys" class="sr" aria-hidden="true">${this.#instructions(false)}</span>
-        ${this.#waiting()}
+        ${this.#review()}
         ${this.failure ? b`<p class="send-error" role="alert" data-send-error><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${this.failure}</span></p>` : A}
         <swc-prompt-field
           label="Message"
@@ -48035,9 +48193,11 @@ ${this.value}` : text5;
     const pushToTalk = this.model?.settings.get().pushToTalk ?? false;
     const talk = !!speech();
     const held = this.#held();
+    const starting = this.#starting();
     return b`<div class="column">
         <span id="keys" class="sr" aria-hidden="true">${this.#instructions(busy)}</span>
         ${this.#hold()}
+        ${this.#starters()}
         ${this.#queue()}
         ${this.#popup()}
         <swc-prompt-field
@@ -48049,7 +48209,7 @@ ${this.value}` : text5;
           max-rows="10"
           ?generating=${busy && !canSend}
           ?disabled=${!!held}
-          placeholder=${held ? `Reconnecting to ${held}\u2026` : suggestion ? `${suggestion}  (Tab)` : `Message ${agent?.name ?? ""}`}
+          placeholder=${held ? `Reconnecting to ${held}\u2026` : starting ? starting : suggestion ? `${suggestion}  (Tab)` : `Message ${agent?.name ?? ""}`}
           .value=${l(this.value)}
           @keydown=${this.#keys}
           @swc-prompt-field-input=${this.#input}
@@ -48828,9 +48988,9 @@ function auditLine(entry, devices, named2) {
       return b`<code>${entry.file}</code> ${entry.accepted ? "changed" : "changed and was refused"}${changes(entry, devices).map(([kind, line]) => b`<span class="change" data-change=${kind}>${line}</span>`)}${entry.warning ? b`<span class="warning" data-warning>${entry.warning}</span>` : A}${entry.accepted ? b`<span class="hint" data-hint>If you didn’t mean this, change the file back with sudo.</span>` : A}`;
   }
 }
-function merged(...pages) {
+function merged(...pages2) {
   const bySeq = /* @__PURE__ */ new Map();
-  for (const page of pages) for (const entry of page) bySeq.set(entry.seq, entry);
+  for (const page of pages2) for (const entry of page) bySeq.set(entry.seq, entry);
   return [...bySeq.values()].sort((a23, b13) => b13.seq - a23.seq);
 }
 function replaceable(secret) {
@@ -51639,10 +51799,10 @@ var SliccSprinkle = class extends ThemedElement {
   }
   #seen = /* @__PURE__ */ new Set();
   #frozen() {
-    const owner = this.#data?.agentId;
+    const owner2 = this.#data?.agentId;
     const port = this.model?.agent;
-    if (!port || !owner) return false;
-    const id = plainId(owner);
+    if (!port || !owner2) return false;
+    const id = plainId(owner2);
     const agents = port.list();
     const live = agents.find((agent) => plainId(agent.id) === id);
     if (live) {
@@ -67019,17 +67179,17 @@ var ResizeManager = class ResizeManager2 {
   }
   observe(element3) {
     const { managersByElement } = ResizeManager2;
-    const owner = managersByElement.get(element3);
-    if (owner === this) return;
-    else if (owner != null && owner !== this) throw new Error("ResizeManager.observe: element is already owned by another ResizeManager");
+    const owner2 = managersByElement.get(element3);
+    if (owner2 === this) return;
+    else if (owner2 != null && owner2 !== this) throw new Error("ResizeManager.observe: element is already owned by another ResizeManager");
     managersByElement.set(element3, this);
     ResizeManager2.getResizeObserver().observe(element3);
   }
   unobserve(element3) {
     const { managersByElement, resizeObserver } = ResizeManager2;
-    const owner = managersByElement.get(element3);
-    if (owner == null) return;
-    else if (owner !== this) throw new Error("ResizeManager.unobserve: element is owned by another ResizeManager");
+    const owner2 = managersByElement.get(element3);
+    if (owner2 == null) return;
+    else if (owner2 !== this) throw new Error("ResizeManager.unobserve: element is owned by another ResizeManager");
     managersByElement.delete(element3);
     resizeObserver?.unobserve(element3);
     if (resizeObserver != null && managersByElement.size === 0) {