@ai-ecoverse/slicc-spectrum 2.9.1 → 2.9.2

package/dist/slicc-ui.js

@@ -52732,6 +52732,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 +52808,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 +52989,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 +53021,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 +53038,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 +53057,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 +53103,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 +53125,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 +53218,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 +53250,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 +53315,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 +53431,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 +53480,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 +53614,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 +53646,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 +53662,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 +53695,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 +53724,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);
   }
 };