@ai-ecoverse/slicc-spectrum 1.45.0 → 1.46.1

package/dist/slicc-ui.js

@@ -8667,7 +8667,10 @@ var ModelElement = class extends i2 {
     return [];
   }
   focusOn(...selectors) {
-    const focus = () => selectors.map((selector) => this.renderRoot.querySelector(selector)).find(Boolean)?.focus();
+    this.focusWith({}, ...selectors);
+  }
+  focusWith(options, ...selectors) {
+    const focus = () => selectors.map((selector) => this.renderRoot.querySelector(selector)).find(Boolean)?.focus(options);
     if (this.hasUpdated) focus();
     else void this.updateComplete.then(focus);
   }
@@ -11737,6 +11740,44 @@ function installProperties(document2, text2 = swc_default) {
   return style;
 }
 
+// src/app/tabs.ts
+var following = "SLICC runs in another tab. This tab shows it and sends your actions there.";
+var connecting = "Connecting to the tab running SLICC\u2026";
+var alone = "SLICC is open in another tab.";
+function tabsBanner(state2) {
+  if (!state2 || state2.role === "alone") return null;
+  if (state2.skew === "newer")
+    return {
+      kind: "skew",
+      skew: "newer",
+      text: "Another tab runs a newer SLICC. Reload this tab.",
+      reload: true
+    };
+  if (state2.skew === "older")
+    return {
+      kind: "skew",
+      skew: "older",
+      text: "Another tab runs an older SLICC. Reload the other SLICC tab.",
+      reload: false
+    };
+  if (state2.stalled)
+    return {
+      kind: "stalled",
+      skew: null,
+      text: "Chrome paused the tab running SLICC. Switch to it to continue.",
+      reload: false
+    };
+  return null;
+}
+function tabsLight(state2) {
+  if (!state2 || state2.role === "owner" || state2.role === "alone") return null;
+  const banner = tabsBanner(state2);
+  if (banner) return { variant: "notice", text: "Another tab", tooltip: banner.text };
+  if (state2.role === "connecting")
+    return { variant: "info", text: "Connecting", tooltip: connecting };
+  return { variant: "neutral", text: "Another tab", tooltip: following };
+}
+
 // src/app/terminals.ts
 function deepActive(root2) {
   const active = root2.activeElement;
@@ -19917,6 +19958,33 @@ var SliccApp = class extends ThemedElement {
       flex-direction: column;
       height: 100%;
     }
+    .shell[data-alone] header > :not(.brand),
+    .shell[data-alone] main,
+    .shell[data-alone] .rail.bottom {
+      display: none;
+    }
+    .alone {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+      padding: var(--swc-spacing-400);
+      text-align: center;
+      font-size: var(--swc-font-size-300);
+      color: var(--swc-neutral-subdued-content-color-default);
+    }
+    .alone p {
+      margin: 0;
+    }
+    header .tabs {
+      display: inline-flex;
+      align-self: center;
+      padding-inline: var(--swc-spacing-75);
+      border-radius: var(--swc-corner-radius-small-default);
+    }
+    header .tabs:focus-visible {
+      outline: var(--swc-focus-indicator-thickness) solid var(--swc-focus-indicator-color);
+    }
     main {
       display: grid;
       grid-template-columns: auto minmax(0, 1fr) auto;
@@ -20097,7 +20165,8 @@ var SliccApp = class extends ThemedElement {
       model.browser.on("tabs", update),
       this.dips.on("change", update),
       ...model.updates ? [model.updates.on("items", update)] : [],
-      ...model.network ? [model.network.on("network", update)] : []
+      ...model.network ? [model.network.on("network", update)] : [],
+      ...model.tabs ? [model.tabs.on("tabs", update)] : []
     ];
   }
   connectedCallback() {
@@ -20481,6 +20550,15 @@ var SliccApp = class extends ThemedElement {
       </swc-action-button>
       <swc-tooltip for="updates" placement="bottom">${text2}</swc-tooltip>`;
   }
+  #tabsIndicator() {
+    const state2 = this.model?.tabs?.state();
+    const light = tabsLight(state2);
+    if (!state2 || !light) return A;
+    return b`<span id="tabs" class="tabs" tabindex="0" role="img" data-tabs data-role=${state2.role} ?data-stalled=${state2.stalled} data-skew=${state2.skew ?? A} aria-label=${`${light.text}. ${light.tooltip}`}>
+        <swc-status-light size="s" variant=${light.variant}>${this.screen === "phone" ? A : light.text}</swc-status-light>
+      </span>
+      <swc-tooltip for="tabs" placement="bottom">${light.tooltip}</swc-tooltip>`;
+  }
   #networkIndicator() {
     const port = this.model?.network;
     if (!port || !this.#offers("network")) return A;
@@ -20499,8 +20577,9 @@ var SliccApp = class extends ThemedElement {
     const color = this.color;
     const cones = (this.model?.agent.list() ?? []).filter((agent) => agent.kind === "cone");
     const rails = this.#rails();
+    const lonely = this.model?.tabs?.state().role === "alone";
     return b`<div class=${`swc-theme swc-theme--sizeM swc-theme--${color}`}><sp-theme system="spectrum-two" color=${color} scale="medium">
-      <div class="shell">
+      <div class="shell" ?data-alone=${lonely}>
         <header>
           <span class="brand">slicc</span>
           ${this.#offers("chat") ? i17(
@@ -20514,6 +20593,7 @@ var SliccApp = class extends ThemedElement {
     ) : A}
           <span class="spacer"></span>
           <div class="status" role="status"><slot name="status"></slot></div>
+          ${this.#tabsIndicator()}
           ${this.#updatesIndicator()}
           ${this.#networkIndicator()}
           ${this.#offers("chat") ? b`<slicc-tray .model=${this.model} ?compact=${this.screen === "phone"}></slicc-tray>` : A}
@@ -20539,6 +20619,7 @@ var SliccApp = class extends ThemedElement {
     ) : A}
           ${this.#headerButton("theme", color === "dark" ? "Switch to light theme" : "Switch to dark theme", b`<swc-icon-contrast slot="icon"></swc-icon-contrast>`, () => this.toggleColor())}
         </header>
+        ${lonely ? b`<div class="alone" role="status" data-tabs="alone"><p>${alone}</p></div>` : A}
         <main>
           ${rails.left}
           <slicc-dock empty-text="All panels are closed. Open one from a rail or View." @layout-change=${this.#save}
@@ -21077,7 +21158,7 @@ var SliccBrowser = class extends ModelElement {
         width: 100%;
         height: 100%;
         object-fit: cover;
-        object-position: top;
+        object-position: left top;
       }
       .meta {
         display: flex;
@@ -21388,7 +21469,6 @@ var SliccBrowser = class extends ModelElement {
   focus() {
     void this.updateComplete.then(
       () => this.focusOn(
-        '[data-action="stop-agent"]',
         '[data-action="all-tabs"]',
         '.window[aria-current="true"]',
         ".window",
@@ -21645,9 +21725,11 @@ var SliccBrowser = class extends ModelElement {
       ${wide ? this.#list(tabs, tab) : A}
       <section class="detail" aria-label=${tab.title}>
         <div class="bar">
-          <swc-action-button size="s" quiet data-action="all-tabs" @click=${() => {
+          <swc-action-button size="s" quiet data-action="all-tabs" @click=${(event2) => {
       this.#show(null);
-      void this.updateComplete.then(() => this.focusOn(".window"));
+      void this.updateComplete.then(
+        () => this.focusWith({ focusVisible: event2.detail === 0 }, ".window")
+      );
     }}><swc-icon-chevron-left slot="icon"></swc-icon-chevron-left>All tabs (${tabs.length})</swc-action-button>
           ${wide ? A : this.#picker(tabs, tab)}
         </div>
@@ -22496,6 +22578,7 @@ var SliccChat = class extends ThemedElement {
         if (!this.agent) this.#refresh(true);
       }),
       model.agent.on("agents", () => this.requestUpdate()),
+      ...model.tabs ? [model.tabs.on("tabs", () => this.requestUpdate())] : [],
       model.agent.on("messages", (agentId) => {
         if (agentId === this.#id()) this.#refresh(this.#sent(agentId));
       }),
@@ -22687,7 +22770,7 @@ var SliccChat = class extends ThemedElement {
       this.#items(messages, agent),
       ([key2]) => key2,
       ([, item2]) => item2
-    )}</swc-conversation-thread>` : b`<div class="empty">No messages yet. Ask ${agent?.name ?? "the agent"} something.</div>`}
+    )}</swc-conversation-thread>` : this.model?.tabs?.state().role === "connecting" ? b`<div class="empty" data-connecting>${connecting}</div>` : b`<div class="empty">No messages yet. Ask ${agent?.name ?? "the agent"} something.</div>`}
         </div>
       </div>
       ${this.model && !agent?.frozen ? b`<slicc-composer .model=${this.model} .agent=${this.agent}></slicc-composer>` : A}
@@ -24988,8 +25071,10 @@ var SliccNotices = class extends ModelElement {
       this.pending = /* @__PURE__ */ new Map();
       this.failures = /* @__PURE__ */ new Map();
     }
-    if (!port) return [];
+    const tabs = model.tabs ? [model.tabs.on("tabs", () => this.requestUpdate())] : [];
+    if (!port) return tabs;
     return [
+      ...tabs,
       port.on("notices", (notices) => {
         const ids = new Set(notices.map((notice) => notice.id));
         this.dismissed = new Set([...this.dismissed].filter((id) => ids.has(id)));
@@ -25039,11 +25124,24 @@ var SliccNotices = class extends ModelElement {
       <swc-close-button size="m" data-dismiss accessible-label=${`Dismiss: ${notice.title}`} @click=${() => this.dismiss(notice.id)}></swc-close-button>
     </div>`;
   }
+  #tabs() {
+    const tabs = this.model?.tabs;
+    const banner = tabsBanner(tabs?.state());
+    if (!tabs || !banner) return A;
+    return b`<div class="notice" role="status" data-tabs-notice=${banner.kind} data-skew=${banner.skew ?? A} data-tone="warning">
+      <swc-icon-alert-triangle></swc-icon-alert-triangle>
+      <div class="text">
+        <p>${banner.text}</p>
+        ${banner.reload ? b`<div class="actions"><swc-button size="s" variant="secondary" fill-style="outline" data-action="reload" @click=${() => tabs.reload()}>Reload</swc-button></div>` : A}
+      </div>
+    </div>`;
+  }
   render() {
     const port = this.model?.notices;
     const notices = (port?.list() ?? []).filter((notice) => !this.dismissed.has(notice.id));
-    if (!notices.length) return A;
-    return b`<div class="notices">${c(
+    const tabs = this.#tabs();
+    if (!notices.length && tabs === A) return A;
+    return b`<div class="notices">${tabs}${c(
       notices,
       (notice) => notice.id,
       (notice) => this.#notice(notice)