@ai-ecoverse/slicc-spectrum 1.56.2 → 1.58.0

package/dist/slicc-ui.js

@@ -9668,6 +9668,7 @@ var SliccFiles = class extends ModelElement {
     ...ModelElement.properties,
     count: { state: true },
     mounted: { state: true },
+    sources: { state: true },
     mounting: { state: true },
     ejecting: { state: true },
     waiting: { state: true },
@@ -9681,6 +9682,7 @@ var SliccFiles = class extends ModelElement {
     super();
     this.count = 0;
     this.mounted = [];
+    this.sources = /* @__PURE__ */ new Map();
     this.mounting = false;
     this.ejecting = /* @__PURE__ */ new Set();
     this.waiting = [];
@@ -9733,6 +9735,20 @@ var SliccFiles = class extends ModelElement {
         gap: var(--swc-spacing-100);
         min-height: var(--swc-component-height-75);
       }
+      .mounts .source {
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
+      .mounts .path[data-source] {
+        display: flex;
+        flex-wrap: wrap;
+      }
+      .mounts .path[data-source] > span {
+        min-width: 0;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: pre;
+      }
       .mounts .path {
         flex: 1;
         min-width: 0;
@@ -9780,7 +9796,11 @@ var SliccFiles = class extends ModelElement {
     void this.updateComplete.then(() => this.#sync());
   }
   #mounts(files) {
-    this.mounted = files.mounts?.() ?? [];
+    const info = files.mountInfo?.();
+    this.mounted = info ? info.map((item2) => item2.target) : files.mounts?.() ?? [];
+    this.sources = new Map(
+      (info ?? []).flatMap((item2) => item2.source ? [[item2.target, item2.source]] : [])
+    );
     this.waiting = files.needsFolder?.() ?? [];
   }
   #sync() {
@@ -9887,6 +9907,11 @@ var SliccFiles = class extends ModelElement {
       </ul>
     </section>`;
   }
+  #mounted(path) {
+    const source = this.sources.get(path);
+    if (!source) return b`<span class="path" title=${path}>${path}</span>`;
+    return b`<span class="path" title=${`${path} \xB7 ${source}`} data-source=${source}><span class="target">${path}</span><span class="source"> · ${source}</span></span>`;
+  }
   #strip(files) {
     if (this.mounted.length === 0) return A;
     const eject = files?.eject?.bind(files);
@@ -9895,7 +9920,7 @@ var SliccFiles = class extends ModelElement {
       <ul aria-labelledby="mounted">
         ${this.mounted.map(
       (path) => b`<li>
-            <span class="path" title=${path}>${path}</span>
+            ${this.#mounted(path)}
             ${eject ? b`<swc-action-button
                     size="s"
                     quiet
@@ -11952,8 +11977,20 @@ function budgetVariant(percent2) {
   const variant = meterVariant(percent2);
   return variant === "informative" ? "neutral" : variant;
 }
-function budgetLine(status2) {
-  return `Spent $${status2.spent.toFixed(2)} \xB7 $${status2.rate.toFixed(2)}/h. ${status2.budget.percent}% of the ${status2.budget.window} budget, ${status2.budget.resets}.`;
+function spendLine(status2) {
+  const parts2 = [
+    status2.spent ? `Spent $${status2.spent.toFixed(2)}` : "",
+    status2.rate ? `$${status2.rate.toFixed(2)}/h` : ""
+  ];
+  const line = parts2.filter(Boolean).join(" \xB7 ");
+  return line ? `${line}. ` : "";
+}
+function budgetLine(status2, budget) {
+  return `${spendLine(status2)}${budget.percent}% of the ${budget.window} budget, ${budget.resets}.`;
+}
+function shownBudget(status2) {
+  const budget = status2.budget;
+  return budget && (budget.percent > 0 || status2.spent || status2.rate) ? budget : null;
 }
 var SliccTray = class extends ModelElement {
   static properties = {
@@ -12022,7 +12059,7 @@ var SliccTray = class extends ModelElement {
     const connection = connectionLabel[status2.connection];
     const followers = `${status2.followers.length} ${status2.followers.length === 1 ? "follower" : "followers"}`;
     const light = status2.connection === "live" ? status2.name : `${status2.name}, ${connection}`;
-    const budget = `Budget ${status2.budget.percent}%`;
+    const budget = shownBudget(status2);
     return b`${this.#item(
       "chip",
       "network",
@@ -12036,14 +12073,18 @@ var SliccTray = class extends ModelElement {
       () => this.#open("network", "sync")
     )}
       <swc-tooltip for="chip" placement="bottom">${`${connection}, ${followers}`}</swc-tooltip>
-      ${this.#item(
+      ${budget ? this.#usage(status2, budget) : A}`;
+  }
+  #usage(status2, budget) {
+    const label = `Budget ${budget.percent}%`;
+    return b`${this.#item(
       "usage",
       "monitor",
-      `${budget}. ${budgetLine(status2)}`,
-      b`<swc-status-light size="s" variant=${budgetVariant(status2.budget.percent)}>${budget}</swc-status-light>`,
+      `${label}. ${budgetLine(status2, budget)}`,
+      b`<swc-status-light size="s" variant=${budgetVariant(budget.percent)}>${label}</swc-status-light>`,
       () => this.#open("monitor")
     )}
-      <swc-tooltip for="usage" placement="bottom">${budgetLine(status2)}</swc-tooltip>`;
+      <swc-tooltip for="usage" placement="bottom">${budgetLine(status2, budget)}</swc-tooltip>`;
   }
 };
 
@@ -12064,7 +12105,7 @@ var automation = {
   extension: "Browser automation: through the SLICC extension.",
   proxy: "Browser automation: through slicc-node.",
   link: "Browser automation: through a linked device.",
-  none: "Browser automation: not available. Install the extension or run slicc-node."
+  none: "Browser automation: not available. Install the extension, or run slicc-node or npx sliccy@next."
 };
 function automationOf(browser) {
   return browser.via ?? "none";
@@ -12507,7 +12548,43 @@ var SliccNetwork = class extends ModelElement {
         color: var(--swc-neutral-subdued-content-color-default);
         overflow-wrap: anywhere;
       }
+      .folders ul {
+        display: flex;
+        flex-direction: column;
+        gap: var(--swc-spacing-75);
+        margin: var(--swc-spacing-75) 0 0;
+        padding: 0;
+        list-style: none;
+      }
+      .folders li {
+        display: flex;
+        align-items: center;
+        gap: var(--swc-spacing-100);
+        min-width: 0;
+      }
+      .folders swc-icon-folder {
+        flex: none;
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
+      .folder {
+        flex: 1;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--swc-spacing-50) var(--swc-spacing-100);
+        min-width: 0;
+        overflow-wrap: anywhere;
+      }
+      .folder > code {
+        flex: none;
+        max-width: 100%;
+      }
+      .folder .muted {
+        flex-basis: 100%;
+        font-size: var(--swc-font-size-75);
+      }
       .where code,
+      .folder code,
       [data-browsers] code {
         font-family: var(--swc-code-font-family-stack);
       }
@@ -12892,10 +12969,35 @@ var SliccNetwork = class extends ModelElement {
       <span class="where">${device.host ? b`<code>${device.host}</code>` : A}<span>${device.address ? b`<code>${device.address}</code> · ` : A}${device.mode === "local" ? "This computer" : "Remote"}${device.kind === "seven" ? " \xB7 Follower" : ""}</span></span>
       ${device.policy ? b`<span class="muted" data-policy>Reaches ${device.policy}.</span>` : A}
       ${device.browsers?.length ? b`<span class="muted" data-browsers>${device.browsers.length === 1 ? "Browser" : "Browsers"}: ${device.browsers.map((item2, index) => b`${index ? ", " : ""}${item2.name} (<code>${item2.runtime}</code>)`)}</span>` : A}
+      ${device.folders?.length ? this.#folders(port, device, device.folders) : A}
       ${device.asking ? this.#ask(port, device) : this.#access(port, device)}
       ${device.offers.includes("ssh") ? b`<div class="command" data-copy="ssh"><code>ssh ${device.host}</code>${this.#copyButton(`ssh:${device.id}`, "ssh", "ssh command", `ssh ${device.host}`, "linksError")}</div>` : A}
     </li>`;
   }
+  #folders(port, device, folders) {
+    const heading = `folders-${device.id}`;
+    return b`<div class="folders" data-folders>
+      <span class="muted" id=${heading}>Folders</span>
+      <ul aria-labelledby=${heading}>${folders.map((folder2) => this.#folder(port, device, folder2))}</ul>
+    </div>`;
+  }
+  #folder(port, device, folder2) {
+    const action = `folder:${folder2.source}`;
+    const busy = this.busy === action;
+    const button = folder2.mounted ? port.ejectFolder ? b`<swc-button size="s" variant="secondary" fill-style="outline" data-action="eject-folder" data-id=${folder2.source} accessible-label=${`Eject ${folder2.mounted}`} ?pending=${busy} ?disabled=${this.#waiting(action)} @click=${() => this.#act(action, () => port.ejectFolder?.(folder2.source), "linksError")}>Eject</swc-button>` : A : port.mountFolder ? b`<swc-button size="s" variant="secondary" fill-style="outline" data-action="mount-folder" data-id=${folder2.source} accessible-label=${`Mount ${folder2.source}`} ?pending=${busy} ?disabled=${this.#waiting(action) || device.state !== "connected"} @click=${() => this.#act(action, () => this.#mountFolder(port, folder2.source), "linksError")}>Mount</swc-button>` : A;
+    return b`<li data-folder=${folder2.source} data-mounted=${folder2.mounted ? "yes" : "no"}>
+      <swc-icon-folder size="s" aria-hidden="true"></swc-icon-folder>
+      <span class="folder">
+        <code title=${folder2.source}>${folder2.name}</code>
+        ${folder2.readonly ? b`<swc-badge size="s" variant="neutral" subtle data-readonly>Read-only</swc-badge>` : A}
+        ${folder2.mounted ? b`<span class="muted" data-mounted-at>Mounted at <code>${folder2.mounted}</code></span>` : A}
+      </span>
+      ${button}
+    </li>`;
+  }
+  async #mountFolder(port, source) {
+    await port.mountFolder?.(source);
+  }
   #join(port, links) {
     const ready = links.joinCommand || links.joinUrl;
     const follow = links.followUrl;
@@ -26795,8 +26897,24 @@ var surfaces2 = {
   agents: "agents",
   terminals: "terminal",
   tabs: "browser",
-  changes: "changes"
+  changes: "changes",
+  processes: "terminal"
 };
+var rowLights = {
+  active: "info",
+  idle: "neutral",
+  warn: "notice",
+  error: "negative"
+};
+var rowSpoken = {
+  active: "Active",
+  idle: "Idle",
+  warn: "Needs attention",
+  error: "Error"
+};
+function indent2(depth) {
+  return Math.min(Math.max(Math.floor(depth ?? 0), 0), 6);
+}
 function attention(section) {
   const errors = section.rows.filter((row) => row.status === "error").length;
   if (errors)
@@ -26810,6 +26928,14 @@ function attention(section) {
   return null;
 }
 var SliccMonitor = class extends ModelElement {
+  static properties = {
+    ...ModelElement.properties,
+    expanded: { state: true }
+  };
+  constructor() {
+    super();
+    this.expanded = {};
+  }
   static styles = [
     shared,
     panelCss,
@@ -26900,6 +27026,9 @@ var SliccMonitor = class extends ModelElement {
         list-style: none;
       }
       .section {
+        display: grid;
+      }
+      .line {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
@@ -26907,14 +27036,82 @@ var SliccMonitor = class extends ModelElement {
         min-height: var(--swc-component-height-100);
         padding: var(--swc-spacing-50) 0;
       }
-      .section .name {
+      .toggle {
+        all: unset;
+        box-sizing: border-box;
         flex: 1;
         min-width: 0;
+        display: flex;
+        align-items: center;
+        gap: var(--swc-spacing-75);
+        cursor: pointer;
+        border-radius: var(--swc-corner-radius-small-default);
       }
-      .section .num {
+      .toggle:focus-visible {
+        outline: var(--swc-focus-indicator-thickness) solid var(--swc-focus-indicator-color);
+        outline-offset: var(--swc-focus-ring-gap);
+      }
+      .chevron {
+        flex: none;
+        width: var(--swc-component-height-50);
+        display: inline-flex;
+        justify-content: center;
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
+      .toggle[aria-expanded='true'] swc-icon-chevron-right {
+        transform: rotate(90deg);
+      }
+      :host(:dir(rtl)) .toggle[aria-expanded='false'] swc-icon-chevron-right {
+        transform: scaleX(-1);
+      }
+      .line .name {
+        flex: 1;
+        min-width: 0;
+      }
+      .line .num {
         font-weight: var(--swc-bold-font-weight);
         font-variant-numeric: tabular-nums;
       }
+      .rows {
+        display: grid;
+        gap: var(--swc-spacing-50);
+        margin: 0 0 var(--swc-spacing-100);
+        padding: 0;
+        padding-inline-start: calc(var(--swc-component-height-50) + var(--swc-spacing-75));
+        list-style: none;
+      }
+      .row {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto;
+        align-items: center;
+        column-gap: var(--swc-spacing-100);
+        padding-inline-start: calc(var(--depth, 0) * var(--swc-spacing-300));
+      }
+      .row swc-status-light {
+        min-width: 0;
+        overflow-wrap: anywhere;
+      }
+      .row .badges {
+        grid-column: 2;
+        grid-row: 1 / span 2;
+        align-self: start;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: end;
+        gap: var(--swc-spacing-50);
+      }
+      .row swc-status-light {
+        grid-column: 1;
+        grid-row: 1;
+      }
+      .row .meta {
+        grid-column: 1;
+        grid-row: 2;
+        padding-inline-start: var(--swc-spacing-300);
+        color: var(--swc-neutral-subdued-content-color-default);
+        font-size: var(--swc-font-size-75);
+        overflow-wrap: anywhere;
+      }
     `
   ];
   subscribe(model) {
@@ -26954,16 +27151,36 @@ var SliccMonitor = class extends ModelElement {
       new CustomEvent("show-surface", { detail: { id }, bubbles: true, composed: true })
     );
   }
+  #row(row) {
+    const depth = indent2(row.depth);
+    return b`<li class="row" data-id=${row.id ?? A} data-status=${row.status} data-depth=${depth || A} style=${depth ? `--depth: ${depth}` : A}>
+      <swc-status-light size="s" variant=${rowLights[row.status]}><span class="sr">${rowSpoken[row.status]}: </span>${row.name}</swc-status-light>
+      <span class="badges">${(row.badges ?? []).map((badge) => b`<swc-badge size="s" variant="neutral" subtle>${badge}</swc-badge>`)}</span>
+      ${row.meta ? b`<span class="meta">${row.meta}</span>` : A}
+    </li>`;
+  }
   #section(section) {
     const flag = attention(section);
     const surface2 = surfaces2[section.id];
-    return b`<li class="section" data-id=${section.id}>
-      <span class="name">${section.label}</span>
-      ${flag ? b`<swc-badge size="s" variant=${flag.variant} subtle>${flag.text}</swc-badge>` : A}
-      <span class="num">${section.rows.length}</span>
-      ${surface2 ? b`<swc-action-button size="s" quiet accessible-label=${`Open ${section.label}`} @click=${() => this.#open(surface2)}
-              >Open</swc-action-button
-            >` : A}
+    const rows = section.rows.length > 0;
+    const open = rows && (this.expanded[section.id] ?? flag !== null);
+    const list4 = `rows-${section.id}`;
+    return b`<li class="section" data-id=${section.id} data-open=${open ? "" : A}>
+      <div class="line">
+        ${rows ? b`<button class="toggle" aria-expanded=${open ? "true" : "false"} aria-controls=${open ? list4 : A} @click=${() => {
+      this.expanded = { ...this.expanded, [section.id]: !open };
+    }}><span class="chevron"><swc-icon-chevron-right size="s" aria-hidden="true"></swc-icon-chevron-right></span><span class="name">${section.label}</span></button>` : b`<span class="chevron"></span><span class="name">${section.label}</span>`}
+        ${flag ? b`<swc-badge size="s" variant=${flag.variant} subtle>${flag.text}</swc-badge>` : A}
+        <span class="num">${section.rows.length}</span>
+        ${surface2 ? b`<swc-action-button size="s" quiet accessible-label=${`Open ${section.label}`} @click=${() => this.#open(surface2)}
+                >Open</swc-action-button
+              >` : A}
+      </div>
+      ${open ? b`<ul class="rows" id=${list4} aria-label=${section.label}>${c(
+      section.rows,
+      (row, i25) => row.id ?? i25,
+      (row) => this.#row(row)
+    )}</ul>` : A}
     </li>`;
   }
   render() {