@ai-ecoverse/slicc-spectrum 2.9.1 → 2.10.0

package/dist/slicc-ui.js

@@ -39964,7 +39964,7 @@ function watchTitles(model, update) {
     seen.set(id, title2);
     update();
   };
-  const stops = [
+  const stops2 = [
     model.agent.on("messages", check3),
     model.agent.on("message", ({ agentId }) => check3(agentId)),
     model.agent.on("agents", (agents) => {
@@ -39974,7 +39974,7 @@ function watchTitles(model, update) {
     })
   ];
   return () => {
-    for (const stop of stops) stop();
+    for (const stop of stops2) stop();
   };
 }
 
@@ -51980,8 +51980,11 @@ function extras(approval) {
   if (approval.kind === "capture") return [approval.detail, approval.requester];
   return [];
 }
+var stops = (approval) => approval.kind === "sudo" && approval.stoppable === true && approval.requester.kind === "agent" && !!approval.requester.agentId;
+var denies = (decision2) => decision2 === "deny" || decision2 === "stop";
 function answerable(approval, decision2) {
   if (decision2 === "deny") return true;
+  if (decision2 === "stop") return stops(approval);
   if (approval.kind === "secret") return false;
   return approval.kind !== "click" || approval.here;
 }
@@ -52152,9 +52155,23 @@ var SliccApprovals = class extends ModelElement {
       .judged p {
         margin: 0;
       }
-      [slot='button'][data-action='deny'] {
+      [slot='button'][data-action='deny'],
+      [slot='button'][data-action='stop'] {
         margin-inline-end: auto;
       }
+      [slot='button'][data-action='deny']:has(+ [data-action='stop']) {
+        margin-inline-end: 0;
+      }
+      sp-alert-dialog {
+        --mod-buttongroup-spacing: var(--swc-spacing-300);
+      }
+      .break {
+        flex-basis: 100%;
+        block-size: 0;
+      }
+      .break ~ [slot='button'] {
+        margin-block-start: calc(-1 * var(--swc-spacing-300));
+      }
       .prompt {
         margin-block-start: var(--swc-spacing-200);
         padding-inline-start: var(--swc-spacing-200);
@@ -52264,10 +52281,11 @@ var SliccApprovals = class extends ModelElement {
   async decide(approval, decision2) {
     const port = this.model?.approvals;
     const { id } = approval;
-    if (!port?.decide || this.busy || this.gone || this.#showing?.id !== id || this.#done.has(id) || this.#closed.has(id) || !answerable(approval, decision2) || decision2 !== "deny" && (!this.#arming.settled() || !this.#whole(approval)))
+    if (!port?.decide || this.busy || this.gone || this.#showing?.id !== id || this.#done.has(id) || this.#closed.has(id) || !answerable(approval, decision2) || !denies(decision2) && (!this.#arming.settled() || !this.#whole(approval)))
       return;
     const live = port.list().find(({ id: id2 }) => id2 === approval.id);
     if (decision2 === "always" && !(live && offersAlways(live))) return;
+    if (decision2 === "stop" && !(live && stops(live))) return;
     this.busy = decision2;
     this.failure = null;
     this.#pending.add(approval.id);
@@ -52407,7 +52425,7 @@ var SliccApprovals = class extends ModelElement {
       fill-style=${variant === "accent" ? A : "outline"}
       data-action=${decision2}
       ?pending=${this.busy === decision2}
-      ?disabled=${!!this.busy && this.busy !== decision2 || decision2 !== "deny" && !this.#whole(approval)}
+      ?disabled=${!!this.busy && this.busy !== decision2 || !denies(decision2) && !this.#whole(approval)}
       @click=${(event2) => this.#click(event2, approval, decision2)}
       >${label}</swc-button
     >`;
@@ -52469,6 +52487,7 @@ var SliccApprovals = class extends ModelElement {
       return b`<swc-button slot="button" variant="secondary" fill-style="outline" data-action="close" @click=${() => this.#dismiss(approval)}>Close</swc-button>`;
     const click = approval.kind === "click";
     return b`${this.#button(approval, "deny", click ? "Cancel" : "Deny", "secondary")}
+      ${stops(approval) ? b`${this.#button(approval, "stop", "Deny and stop", "secondary")}<span slot="button" class="break" aria-hidden="true"></span>` : A}
       ${always ? this.#button(approval, "always", inCwd(approval) ? "Always allow in this directory" : "Always allow", "secondary") : A}
       ${answerable(approval, "once") ? this.#button(approval, "once", click ? approval.action : "Allow once", "accent") : A}`;
   }
@@ -52732,6 +52751,38 @@ var verbs2 = {
 function describe(action) {
   return verbs2[action.kind](action);
 }
+function recentActions(all2, shown6) {
+  return all2.slice(-shown6).reverse();
+}
+function sameAction(a20, b10) {
+  return a20.status === "done" && b10.status === "done" && a20.kind === b10.kind && a20.agentId === b10.agentId && a20.target === b10.target && a20.value === b10.value && a20.length === b10.length;
+}
+function foldActions(actions2) {
+  const out = [];
+  for (const action of actions2) {
+    const prev = out.at(-1);
+    if (prev && sameAction(prev.action, action)) {
+      prev.count += 1;
+      continue;
+    }
+    out.push({ action, count: 1 });
+  }
+  return out;
+}
+function pickImage(frame, shot, watching) {
+  if (watching && frame) return frame;
+  if (frame && (!shot || frame.at >= shot.at)) return frame;
+  return shot ?? null;
+}
+function frameSize(box, dpr = 1, prior) {
+  if (!box?.width || !box.height) return null;
+  const width = Math.max(1, Math.round(box.width * dpr));
+  const height = Math.max(1, Math.round(box.height * dpr));
+  const slack = Math.max(2, Math.round(2 * dpr));
+  if (prior && Math.abs(prior.width - width) <= slack && Math.abs(prior.height - height) <= slack)
+    return { width: prior.width, height: prior.height, key: `${prior.width}x${prior.height}` };
+  return { width, height, key: `${width}x${height}` };
+}
 var icons = {
   open: b`<swc-icon-open-in size="s"></swc-icon-open-in>`,
   goto: b`<swc-icon-link size="s"></swc-icon-link>`,
@@ -52776,8 +52827,9 @@ var SliccBrowser = class extends ModelElement {
   #last = null;
   #shown = actionPage;
   #anchor = null;
+  #display = /* @__PURE__ */ new Map();
+  #loading = /* @__PURE__ */ new Map();
   #expanded = new ViewSet(this, "browser");
-  #recent = new ViewState(this, "browser:recent", () => false);
   #chosen = new ViewState(this, "browser:tab", () => void 0);
   #scroll = new ViewScroll(this, "browser:scroll", {
     scroller: () => this.renderRoot.querySelector(".cards")?.parentElement ?? null,
@@ -52956,24 +53008,31 @@ var SliccBrowser = class extends ModelElement {
       .focused {
         display: grid;
         grid-template-columns: minmax(0, 1fr);
-        gap: var(--swc-spacing-300);
-        padding: var(--swc-spacing-300);
+        gap: var(--swc-spacing-200);
+        height: 100%;
+        min-height: 0;
+        padding: var(--swc-spacing-200);
+        box-sizing: border-box;
       }
       .focused.wide {
         grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
-        align-items: start;
+        grid-template-rows: minmax(0, 1fr);
+        align-items: stretch;
       }
       .detail {
         display: flex;
         flex-direction: column;
-        gap: var(--swc-spacing-200);
+        gap: var(--swc-spacing-100);
         min-width: 0;
+        min-height: 0;
+        height: 100%;
       }
       .bar,
       .address {
         display: flex;
         align-items: center;
         gap: var(--swc-spacing-100);
+        flex: none;
         min-width: 0;
       }
       .bar sp-picker {
@@ -52981,13 +53040,14 @@ var SliccBrowser = class extends ModelElement {
         min-width: 0;
         max-width: 100%;
       }
-      .url {
+      .address .url {
         flex: 1;
         min-width: 0;
         font-family: var(--swc-code-font-family-stack);
         color: var(--swc-neutral-subdued-content-color-default);
       }
       .detail .driving {
+        flex: none;
         flex-wrap: nowrap;
         min-block-size: var(--swc-component-height-75);
       }
@@ -52997,6 +53057,18 @@ var SliccBrowser = class extends ModelElement {
       .detail .driving swc-button {
         flex: none;
       }
+      .detail figure {
+        flex: 0 1 auto;
+        width: 100%;
+        max-height: min(50vh, 100%);
+      }
+      .detail .feed {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 10rem;
+        min-height: 8rem;
+        min-width: 0;
+      }
       .swc-Link {
         font-size: inherit;
       }
@@ -53004,6 +53076,9 @@ var SliccBrowser = class extends ModelElement {
         display: flex;
         flex-direction: column;
         gap: var(--swc-spacing-50);
+        min-height: 0;
+        overflow: auto;
+        overscroll-behavior: contain;
       }
       .tabs button {
         display: grid;
@@ -53047,19 +53122,20 @@ var SliccBrowser = class extends ModelElement {
         flex-direction: column;
         gap: var(--swc-spacing-75);
         margin: 0;
+        min-height: 0;
       }
       .frame {
         display: grid;
         place-items: center;
+        box-sizing: border-box;
         aspect-ratio: 16 / 10;
+        width: 100%;
+        max-height: inherit;
         overflow: hidden;
         border: var(--swc-border-width-100) solid var(--swc-gray-200);
         border-radius: var(--swc-corner-radius-medium-default);
         background: var(--swc-card-background-well-color);
       }
-      .wide .frame {
-        max-height: 50vh;
-      }
       .frame img {
         width: 100%;
         height: 100%;
@@ -53068,6 +53144,7 @@ var SliccBrowser = class extends ModelElement {
         user-select: none;
       }
       figcaption {
+        flex: none;
         min-block-size: var(--swc-component-height-50);
         display: flex;
         align-items: center;
@@ -53160,10 +53237,15 @@ var SliccBrowser = class extends ModelElement {
         white-space: normal;
         user-select: text;
       }
+      .feed h3,
+      .feed .more {
+        flex: none;
+      }
       .actions {
         display: flex;
         flex-direction: column;
-        max-height: 20rem;
+        flex: 1;
+        min-height: 0;
         overflow: auto;
       }
       .actions li {
@@ -53187,11 +53269,10 @@ var SliccBrowser = class extends ModelElement {
         min-width: 0;
         overflow-wrap: anywhere;
       }
-      .last .what > :not(.full),
-      .last .url-toggle > span {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+      .count {
+        margin-inline-start: var(--swc-spacing-100);
+        color: var(--swc-neutral-subdued-content-color-default);
+        font-weight: var(--swc-bold-font-weight);
       }
       .actions .failure {
         color: var(--swc-negative-content-color-default);
@@ -53253,6 +53334,8 @@ var SliccBrowser = class extends ModelElement {
   subscribe(model) {
     this.#shots.clear();
     this.#frames.clear();
+    this.#display.clear();
+    this.#loading.clear();
     this.#pulse.clear();
     this.#shown = actionPage;
     const tabs = model.browser.list();
@@ -53367,10 +53450,26 @@ var SliccBrowser = class extends ModelElement {
     this.#running = false;
   }
   #image(id) {
-    const frame = this.#frames.get(id);
-    const shot = this.#shots.get(id);
-    if (frame && (!shot || frame.at >= shot.at)) return frame;
-    return shot ?? null;
+    return pickImage(this.#frames.get(id), this.#shots.get(id), this.#watching?.tabId === id);
+  }
+  #hold(id, src) {
+    const shown6 = this.#display.get(id);
+    if (shown6 === src) return src;
+    if (!shown6) {
+      this.#display.set(id, src);
+      return src;
+    }
+    if (this.#loading.get(id) === src) return shown6;
+    this.#loading.set(id, src);
+    const probe = document.createElement("img");
+    probe.onload = () => {
+      if (this.#loading.get(id) !== src) return;
+      this.#loading.delete(id);
+      this.#display.set(id, src);
+      this.requestUpdate();
+    };
+    probe.src = src;
+    return shown6;
   }
   #show(id) {
     this.#chosen.value = id;
@@ -53400,29 +53499,39 @@ var SliccBrowser = class extends ModelElement {
     if (visible3 && tab && !this.#ticker)
       this.#ticker = setInterval(() => this.requestUpdate(), 1e3);
     if (!(visible3 && tab)) this.#still();
-    const list6 = this.renderRoot.querySelector(".actions:not(.last)");
-    const last = list6?.lastElementChild?.getAttribute("data-action-id") ?? null;
-    if (list6 && this.#anchor !== null) list6.scrollTop = list6.scrollHeight - this.#anchor;
-    else if (list6 && last !== this.#last) list6.scrollTop = list6.scrollHeight;
+    const list6 = this.renderRoot.querySelector(".actions");
+    const head = list6?.firstElementChild?.getAttribute("data-action-id") ?? null;
+    if (list6 && this.#anchor !== null) list6.scrollTop = this.#anchor;
+    else if (list6 && head !== this.#last) list6.scrollTop = 0;
     this.#anchor = null;
-    this.#last = last;
+    this.#last = head;
   }
   #still() {
     if (this.#ticker) clearInterval(this.#ticker);
     this.#ticker = null;
   }
   #settle(id) {
-    const box = id ? this.renderRoot.querySelector(".frame")?.getBoundingClientRect() : void 0;
-    const size4 = box?.width ? { width: Math.round(box.width), height: Math.round(box.height) } : void 0;
-    const key = size4 ? `${size4.width}x${size4.height}` : "";
-    if (this.#watching?.tabId === id && this.#watching?.size === key) return;
+    if (!id) {
+      this.#watching?.stop();
+      this.#watching = null;
+      return;
+    }
+    const box = this.renderRoot.querySelector(".frame")?.getBoundingClientRect();
+    const area = box ? { width: box.width, height: box.height } : null;
+    const prior = this.#watching?.tabId === id ? this.#watching.pixels : null;
+    const sized = frameSize(area, globalThis.devicePixelRatio || 1, prior);
+    const key = sized?.key ?? (this.#watching?.tabId === id ? this.#watching.size : "");
+    const pixels = sized ? { width: sized.width, height: sized.height } : this.#watching?.tabId === id ? this.#watching.pixels : { width: 0, height: 0 };
+    if (this.#watching?.tabId === id && this.#watching.size === key) return;
     this.#watching?.stop();
-    this.#watching = null;
-    if (!id) return;
     this.#watching = {
       tabId: id,
       size: key,
-      stop: this.model.browser.watch?.(id, size4)
+      pixels,
+      stop: this.model.browser.watch?.(
+        id,
+        sized ? { width: sized.width, height: sized.height } : void 0
+      )
     };
   }
   #open() {
@@ -53524,24 +53633,26 @@ var SliccBrowser = class extends ModelElement {
   #view(tab) {
     const image2 = this.#image(tab.id);
     const now = Date.now();
-    const view = !image2 ? "none" : this.#watching?.tabId === tab.id && this.#frames.get(tab.id) === image2 && now - image2.at < fresh ? "live" : "shot";
+    const liveFrame = !!image2 && this.#watching?.tabId === tab.id && this.#frames.get(tab.id) === image2 && now - image2.at < fresh;
+    const view = !image2 ? "none" : liveFrame ? "live" : "shot";
+    const src = image2 ? this.#hold(tab.id, image2.src) : null;
     return b`<figure data-view=${view}>
       <div class="frame">
-        ${image2 ? b`<img src=${image2.src} alt=${`${tab.title}, as the agent sees it`} draggable="false" />` : b`<swc-progress-circle size="m" label="Loading preview"></swc-progress-circle>`}
+        ${src ? b`<img src=${src} alt=${`${tab.title}, as the agent sees it`} draggable="false" />` : b`<swc-progress-circle size="m" label="Loading preview"></swc-progress-circle>`}
       </div>
       <figcaption>
         ${view === "live" ? b`<swc-status-light size="s" variant="positive">Live</swc-status-light>` : b`<span>${image2 ? since2(image2.at, now) : "No preview yet"}</span>`}
-        <span>View only</span>
+        <span>Watching only</span>
       </figcaption>
     </figure>`;
   }
   #more(total) {
-    const list6 = this.renderRoot.querySelector(".actions:not(.last)");
-    this.#anchor = list6.scrollHeight - list6.scrollTop;
+    const list6 = this.renderRoot.querySelector(".actions");
+    this.#anchor = list6.scrollTop;
     this.#shown += actionPage;
     const done2 = this.#shown >= total;
     void this.updateComplete.then(() => {
-      if (done2) this.focusOn(".actions:not(.last)");
+      if (done2) this.focusOn(".actions");
     });
     this.requestUpdate();
   }
@@ -53554,12 +53665,12 @@ var SliccBrowser = class extends ModelElement {
     const open = this.#expanded.has(action.id);
     return b`<button class="url-toggle" data-action="action-url" aria-expanded=${open ? "true" : "false"} aria-controls=${`url-${action.id}`} @click=${() => this.#toggle(action.id)}><span>${describe(action)}</span><swc-icon-chevron-down class="chevron" size="s" aria-hidden="true"></swc-icon-chevron-down></button>${open ? b`<span class="full" id=${`url-${action.id}`}>${url}</span>` : A}`;
   }
-  #row(action) {
+  #row(action, count2 = 1) {
     const failed2 = action.status === "failed";
     const url = linked.has(action.kind) ? action.value : void 0;
-    return b`<li data-action-id=${action.id} data-kind=${action.kind} data-status=${action.status} title=${url ?? A}>
+    return b`<li data-action-id=${action.id} data-kind=${action.kind} data-status=${action.status} ?data-group=${count2 > 1} title=${url ?? A}>
       <span>${action.status === "running" ? b`<swc-progress-circle size="s" indeterminate label="Running"></swc-progress-circle>` : failed2 ? b`<swc-icon-alert-triangle size="s" aria-label="Failed"></swc-icon-alert-triangle>` : icons[action.kind]}</span>
-      <span class="what">${this.#what(action)}${failed2 && action.error ? b`<span class="failure">${action.error}</span>` : A}</span>
+      <span class="what">${this.#what(action)}${count2 > 1 ? b`<span class="count">×${count2}</span>` : A}${failed2 && action.error ? b`<span class="failure">${action.error}</span>` : A}</span>
       <span class="who">${agentName(this.model, action.agentId)} ${time(action.at)}</span>
     </li>`;
   }
@@ -53570,23 +53681,21 @@ var SliccBrowser = class extends ModelElement {
       (action) => action.tabId === tab.id || action.tabId === null && action.agentId !== null && action.agentId === tab.agentId
     );
     if (!all2.length)
-      return b`<h3>Recent actions</h3><p class="muted" data-actions="none">No actions yet.</p>`;
-    const actions2 = all2.slice(-this.#shown);
+      return b`<div class="feed"><h3>Recent actions</h3><p class="muted" data-actions="none">No actions yet.</p></div>`;
+    const actions2 = recentActions(all2, this.#shown);
+    const folded = foldActions(actions2);
     const more = all2.length > actions2.length ? b`<div class="more"><span>Showing the latest ${actions2.length} of ${all2.length}</span><swc-button size="s" variant="secondary" fill-style="outline" data-action="more-actions" @click=${() => this.#more(all2.length)}>Show more</swc-button></div>` : A;
-    if (this.#width >= narrowWidth)
-      return b`<h3>Recent actions</h3>${more}<ol class="actions" aria-label="Recent actions" tabindex="0">${actions2.map((action) => this.#row(action))}</ol>`;
-    const last = actions2.at(-1);
-    return b`<details ?open=${this.#recent.value} @toggle=${(event2) => this.#recent.value = event2.currentTarget.open}>
-        <summary><swc-icon-chevron-right class="chevron" size="s" aria-hidden="true"></swc-icon-chevron-right>Recent actions (${all2.length})</summary>
-        ${more}
-        <ol class="actions" aria-label="Earlier actions" tabindex="0">${actions2.slice(0, -1).map((action) => this.#row(action))}</ol>
-      </details>
-      <ol class="actions last" aria-label="Last action">${this.#row(last)}</ol>`;
+    return b`<div class="feed">
+      <h3>Recent actions</h3>
+      ${more}
+      <ol class="actions" aria-label="Recent actions" tabindex="0">${folded.map((item2) => this.#row(item2.action, item2.count))}</ol>
+    </div>`;
   }
   #detail(tabs, tab) {
     const narrow = this.#width < narrowWidth;
     const wide2 = this.#width >= wideWidth;
     const copy = this.#copied === "url" ? "Copied" : this.#copied === "failed" ? "Couldn\u2019t copy" : "Copy";
+    const watching = tab.controlled ? tab.agentId ? `Watching ${agentName(this.model, tab.agentId)}` : "In use" : "No agent is using this tab";
     return b`<div class=${`focused${wide2 ? " wide" : ""}${narrow ? " narrow" : ""}`}>
       ${wide2 ? this.#list(tabs, tab) : A}
       <section class="detail" aria-label=${tab.title}>
@@ -53605,7 +53714,7 @@ var SliccBrowser = class extends ModelElement {
           <swc-action-button size="s" quiet data-action="open-tab" accessible-label="Show in the browser" @click=${() => this.model?.browser.activate(tab.id)}><swc-icon-open-in slot="icon"></swc-icon-open-in>${narrow ? A : "Open"}</swc-action-button>
         </div>
         <div class="driving" data-driving=${tab.controlled ? tab.agentId ? "agent" : "user" : "none"}>
-          <swc-status-light size="m" variant=${tab.controlled ? "info" : "neutral"}>${tab.controlled ? this.#who(tab) : "No agent is using this tab"}</swc-status-light>
+          <swc-status-light size="m" variant=${tab.controlled ? "info" : "neutral"}>${watching}</swc-status-light>
           ${tab.controlled ? this.#stopButton(tab, '[data-action="all-tabs"]') : A}
         </div>
         ${this.#view(tab)}
@@ -53634,7 +53743,7 @@ var SliccBrowser = class extends ModelElement {
     const tabs = this.model?.browser.list() ?? [];
     if (!tabs.length && this.model?.network?.status().browser?.via === null) return this.#offline();
     const tab = tabs.find((candidate) => candidate.id === this.#focus);
-    return tab ? b`<div class="scroll">${this.#detail(tabs, tab)}</div>` : this.#overview(tabs);
+    return tab ? this.#detail(tabs, tab) : this.#overview(tabs);
   }
 };