@ai-ecoverse/slicc-spectrum 1.35.0 → 1.37.0

package/dist/slicc-ui.js

@@ -8636,6 +8636,9 @@ var ModelElement = class extends i2 {
     this.#off = [];
   }
 };
+function changesOf(model) {
+  return model.changes ?? model.files;
+}
 function resolveColor(scheme, prefersDark) {
   if (scheme === "system") return prefersDark ? "dark" : "light";
   return scheme;
@@ -9240,6 +9243,11 @@ var dialogStyles = i`
     --mod-alert-dialog-description-to-buttons: var(--swc-spacing-500);
     --system-alert-dialog-divider-background-color: transparent;
   }
+  @media (max-width: 512px) {
+    sp-alert-dialog {
+      --mod-alert-dialog-min-width: calc(100vw - 2 * var(--swc-spacing-300));
+    }
+  }
   p {
     margin: 0;
   }
@@ -9253,7 +9261,7 @@ var dialogStyles = i`
   }
 `;
 var SliccConfirm = class extends i2 {
-  static properties = { heading: {}, body: {}, action: {}, variant: {} };
+  static properties = { heading: {}, body: {}, action: {}, variant: {}, cancel: {} };
   trigger = null;
   #result = Promise.withResolvers();
   constructor() {
@@ -9262,6 +9270,7 @@ var SliccConfirm = class extends i2 {
     this.body = "";
     this.action = "";
     this.variant = "destructive";
+    this.cancel = "Cancel";
   }
   static styles = dialogStyles;
   get result() {
@@ -9290,7 +9299,7 @@ var SliccConfirm = class extends i2 {
       <sp-alert-dialog variant=${this.variant}>
         <h2 id="title" slot="heading">${this.heading}</h2>
         <p id="body">${this.body}</p>
-        <swc-button slot="button" variant="secondary" fill-style="outline" data-cancel @click=${() => this.#dialog.close()}>Cancel</swc-button>
+        <swc-button slot="button" variant="secondary" fill-style="outline" data-cancel @click=${() => this.#dialog.close()}>${this.cancel}</swc-button>
         <swc-button
           slot="button"
           variant=${this.variant === "destructive" ? "negative" : "accent"}
@@ -9309,6 +9318,7 @@ function confirm(options) {
   element2.body = options.body;
   element2.action = options.action;
   element2.variant = options.variant ?? "destructive";
+  element2.cancel = options.cancel ?? "Cancel";
   element2.trigger = trigger2;
   themeOf(trigger2).append(element2);
   return element2.result;
@@ -9992,6 +10002,9 @@ function agentName(model, id) {
   if (!id) return "you";
   return model?.agent.list().find((agent) => agent.id === id)?.name ?? id;
 }
+function author(model, change) {
+  return change.agentId === null && change.repo ? null : agentName(model, change.agentId);
+}
 function request(target, type, path) {
   target.dispatchEvent(new CustomEvent(type, { detail: { path }, bubbles: true, composed: true }));
 }
@@ -10074,6 +10087,25 @@ function statusMark(status2, announce = true) {
 function failure(error) {
   return error instanceof Error ? error.message : String(error);
 }
+var errorCss = i`
+  .error {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--swc-spacing-75);
+    flex: none;
+    color: var(--swc-negative-content-color-default);
+    background: var(--swc-background-layer-1-color);
+    white-space: normal;
+  }
+  .error:not(:empty) {
+    padding: var(--swc-spacing-75) var(--swc-spacing-100) var(--swc-spacing-75) var(--swc-spacing-200);
+    border-bottom: var(--swc-border-width-100) solid var(--swc-gray-200);
+  }
+  .error swc-icon-alert-diamond {
+    flex: none;
+    color: var(--swc-negative-content-color-default);
+  }
+`;
 var SliccFiles = class extends ModelElement {
   static properties = {
     ...ModelElement.properties,
@@ -10101,6 +10133,7 @@ var SliccFiles = class extends ModelElement {
   static styles = [
     shared,
     panelCss,
+    errorCss,
     i`
       :host {
         container-type: inline-size;
@@ -10117,23 +10150,6 @@ var SliccFiles = class extends ModelElement {
       .mount {
         flex: none;
       }
-      .error {
-        display: flex;
-        align-items: flex-start;
-        gap: var(--swc-spacing-75);
-        flex: none;
-        color: var(--swc-negative-content-color-default);
-        background: var(--swc-background-layer-1-color);
-        white-space: normal;
-      }
-      .error:not(:empty) {
-        padding: var(--swc-spacing-75) var(--swc-spacing-100) var(--swc-spacing-75) var(--swc-spacing-200);
-        border-bottom: var(--swc-border-width-100) solid var(--swc-gray-200);
-      }
-      .error swc-icon-alert-diamond {
-        flex: none;
-        color: var(--swc-negative-content-color-default);
-      }
       .mounts {
         flex: none;
         display: flex;
@@ -10190,7 +10206,7 @@ var SliccFiles = class extends ModelElement {
     this.#mounts(model.files);
     return [
       model.files.on("files", (entries) => this.#load(entries)),
-      model.files.on("changes", () => this.#sync()),
+      changesOf(model).on("changes", () => this.#sync()),
       model.files.on("mounts", () => this.#mounts(model.files))
     ];
   }
@@ -10212,7 +10228,7 @@ var SliccFiles = class extends ModelElement {
   }
   #sync() {
     const tree = this.#tree();
-    const changes = this.model?.files.changes() ?? [];
+    const changes = this.model ? changesOf(this.model).changes() : [];
     if (!tree) return;
     if (tree.paths.length === 0) tree.expanded = ancestors(changes.map((change) => change.path));
     tree.paths = treePaths(this.#entries);
@@ -10457,7 +10473,7 @@ var SliccFileView = class extends ThemedElement {
       model.files.on("file", (path) => {
         if (path === this.path) void this.#read(model);
       }),
-      model.files.on("changes", () => this.requestUpdate())
+      changesOf(model).on("changes", () => this.requestUpdate())
     ];
   }
   async #read(model) {
@@ -10470,12 +10486,14 @@ var SliccFileView = class extends ThemedElement {
     }
   }
   render() {
-    const change = this.model?.files.changes().find((candidate) => candidate.path === this.path);
+    const port = this.model ? changesOf(this.model) : null;
+    const change = port && !port.unavailable?.() ? port.changes().find((candidate) => candidate.path === this.path) : void 0;
+    const by = change && author(this.model, change);
     return b`<div class="bar">
         <span class="path" title=${this.path}>${this.path}</span>
         <span class="spacer"></span>
         ${change ? b`${statusMark(change.status, false)}
-              <span>${statusLabels[change.status]} by ${agentName(this.model, change.agentId)}</span>
+              <span>${by ? `${statusLabels[change.status]} by ${by}` : statusLabels[change.status]}</span>
               <swc-action-button size="s" quiet @click=${() => request(this, "open-diff", this.path)}>
                 <swc-icon-compare slot="icon"></swc-icon-compare>Diff
               </swc-action-button>` : A}
@@ -10599,8 +10617,12 @@ var routes = {
 var automation = {
   extension: "Browser automation: through the SLICC extension.",
   proxy: "Browser automation: through slicc-node.",
-  none: "Browser automation: not available. Install the extension or run slicc-node."
+  none: "Browser automation: not available. Install the extension or run slicc-node.",
+  declined: "Browser automation: off for this session. You declined it; reload to be asked again."
 };
+function automationOf(browser) {
+  return browser.declined ? "declined" : browser.via ?? "none";
+}
 function networkLabel(status2) {
   return `Network: ${networkHealth[status2.health][1].toLowerCase()}`;
 }
@@ -10660,9 +10682,8 @@ var SliccNetwork = class extends ModelElement {
         margin: 0 auto;
         box-sizing: border-box;
       }
-      .page:focus-visible {
-        outline: var(--swc-focus-indicator-thickness) solid var(--swc-focus-indicator-color);
-        outline-offset: calc(-1 * var(--swc-focus-indicator-thickness));
+      .page:focus {
+        outline: none;
       }
       section {
         display: grid;
@@ -10831,7 +10852,7 @@ var SliccNetwork = class extends ModelElement {
       </div>
       <p data-route=${status2.route ?? "none"}>${routes[status2.route ?? "none"]}</p>
       ${status2.detail ? b`<p class="detail">${status2.detail}</p>` : A}
-      ${status2.browser ? b`<p data-browser=${status2.browser.via ?? "none"}>${automation[status2.browser.via ?? "none"]}${status2.browser.detail ? b` <span class="detail">${status2.browser.detail}</span>` : A}</p>` : A}
+      ${status2.browser ? b`<p data-browser=${automationOf(status2.browser)} class=${status2.browser.declined ? "muted" : ""}>${automation[automationOf(status2.browser)]}${status2.browser.detail ? b` <span class="detail">${status2.browser.detail}</span>` : A}</p>` : A}
       ${this.model?.network?.check ? b`<div class="actions"><swc-button size="m" variant="secondary" data-action="check" ?pending=${this.checking} @click=${() => this.check()}>Check again</swc-button></div>` : A}
       ${this.error ? b`<div class="error" role="alert"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${this.error}</span></div>` : A}
     </section>`;
@@ -14476,6 +14497,7 @@ e25("swc-progress-bar", o56);
 var states = {
   current: ["neutral", "Up to date"],
   queued: ["neutral", "Waiting"],
+  starting: ["info", "Starting"],
   checking: ["info", "Checking"],
   downloading: ["info", "Downloading"],
   linking: ["info", "Linking"],
@@ -14506,7 +14528,7 @@ function updatesStatus(items) {
   if (items.some((item2) => item2.state === "ready" || item2.state === "available")) {
     return "update ready";
   }
-  return null;
+  return items.some((item2) => item2.state === "starting") ? "starting" : null;
 }
 var UpdateVisibility = class {
   #boot;
@@ -14557,9 +14579,8 @@ var SliccUpdates = class extends ModelElement {
         padding: var(--swc-spacing-400);
         margin: 0 auto;
       }
-      .page:focus-visible {
-        outline: var(--swc-focus-indicator-thickness) solid var(--swc-focus-indicator-color);
-        outline-offset: calc(-1 * var(--swc-focus-indicator-thickness));
+      .page:focus {
+        outline: none;
       }
       .hint {
         margin: 0 0 var(--swc-spacing-300);
@@ -14711,7 +14732,7 @@ var SliccUpdates = class extends ModelElement {
         accessible-label=${`${item2.label}: ${progress.phase === "download" ? "downloading" : "linking"}`}
       ></swc-progress-bar>`;
     }
-    if (!running.has(item2.state)) return A;
+    if (!running.has(item2.state) && item2.state !== "starting") return A;
     return b`<swc-progress-bar
       size="s"
       indeterminate
@@ -14750,7 +14771,7 @@ var SliccUpdates = class extends ModelElement {
       </div>
       <div class="meta">
         <span class="version">${item2.from ?? "Not installed"}${item2.to && item2.to !== item2.from ? b` → ${item2.to}` : A}</span>
-        ${this.#checked(item2.checkedAt)}
+        ${item2.state === "starting" ? A : this.#checked(item2.checkedAt)}
       </div>
       ${this.#progress(item2)}
       ${error ? b`<div class="error" role="alert">
@@ -14796,6 +14817,7 @@ function railCapacity(width, count) {
 function updatesVariant(status2) {
   if (status2.endsWith("failed")) return "negative";
   if (status2.startsWith("updating")) return "info";
+  if (status2 === "starting") return "neutral";
   return "notice";
 }
 var overscrollLocks = /* @__PURE__ */ new WeakMap();
@@ -14981,7 +15003,7 @@ var SliccApp = class extends ThemedElement {
       margin-inline-end: var(--swc-spacing-200);
     }
     :host([screen='phone']) header sp-picker {
-      min-width: 0;
+      min-width: calc(var(--swc-spacing-400) * 4);
       width: 0;
       flex: 1;
     }
@@ -15033,7 +15055,7 @@ var SliccApp = class extends ThemedElement {
         }
         update();
       }),
-      model.files.on("changes", update),
+      changesOf(model).on("changes", update),
       model.terminals.on("terminals", () => {
         this.#prune();
         update();
@@ -15120,10 +15142,12 @@ var SliccApp = class extends ThemedElement {
     if (!port || !this.#offers("updates")) return;
     const change = this.#updatesVisibility?.change(port, layout);
     if (change === "open") {
-      if (this.dock.has("updates")) this.dock.reveal("updates");
-      else {
-        this.show("updates");
-        if (!port.ready()) this.dock.api.getPanel("updates")?.api.updateParameters({ boot: true });
+      const restored = this.dock.api.getPanel("updates");
+      if (restored) this.dock.reveal("updates");
+      else this.show("updates");
+      if (!port.ready() && restored?.params?.boot !== false) {
+        this.dock.api.getPanel("updates")?.api.updateParameters({ boot: true });
+        this.#save();
       }
     } else if (this.dock.api.getPanel("updates")?.params?.boot && port.ready() && !port.list().some((item2) => item2.state === "failed")) {
       this.dock.close("updates");
@@ -15281,7 +15305,8 @@ var SliccApp = class extends ThemedElement {
     return changes ? b`<span class="badged">${button}<swc-badge size="s" variant="neutral" aria-hidden="true">${changes}</swc-badge></span>${tooltip}` : b`${button}${tooltip}`;
   }
   #changes() {
-    return this.model?.files.changes().length ?? 0;
+    const port = this.model ? changesOf(this.model) : null;
+    return port && !port.unavailable?.() ? port.changes().length : 0;
   }
   #more(items) {
     if (!items.length) return A;
@@ -15399,8 +15424,9 @@ var SliccApp = class extends ThemedElement {
     if (!updates) return A;
     const text2 = updates[0].toUpperCase() + updates.slice(1);
     return b`<swc-action-button id="updates" quiet size="s" data-updates accessible-label=${`Install / Update: ${updates}`} @click=${() => this.show("updates")}>
-        <swc-status-light size="s" variant=${updatesVariant(updates)}>${text2}</swc-status-light>
-      </swc-action-button>`;
+        <swc-status-light size="s" variant=${updatesVariant(updates)}>${this.screen === "phone" ? A : text2}</swc-status-light>
+      </swc-action-button>
+      <swc-tooltip for="updates" placement="bottom">${text2}</swc-tooltip>`;
   }
   #networkIndicator() {
     const port = this.model?.network;
@@ -16746,15 +16772,65 @@ var layouts = [
 function folder(path) {
   return path.slice(0, path.lastIndexOf("/")) || "/";
 }
-var confirmRevert = (path) => confirm({
-  title: `Revert ${basename(path)}?`,
-  body: `This discards the agent\u2019s edits to ${path}. You can\u2019t undo this.`,
-  action: "Revert"
-});
+function where(change) {
+  const at = folder(change.path);
+  if (!change.repo) return at;
+  if (at === change.repo) return "";
+  return at.startsWith(`${change.repo}/`) ? at.slice(change.repo.length + 1) : at;
+}
+function lost(changes) {
+  const kind = changes.every((change) => change.repo) ? "uncommitted" : "pending";
+  return `${changes.length === 1 ? "Its" : "Their"} ${kind} changes are discarded and can\u2019t be undone.`;
+}
+var confirmRevert = (change) => confirm({ title: `Revert ${basename(change.path)}?`, body: lost([change]), action: "Revert" });
+async function revertPaths(port, paths) {
+  const errors = [];
+  for (const path of paths) {
+    try {
+      await port.revert(path);
+    } catch (error) {
+      errors.push(failure(error));
+    }
+  }
+  if (errors.length > 1) return `Couldn\u2019t revert ${errors.length} files. ${errors[0]}`;
+  return errors[0] ?? "";
+}
+function groups(changes) {
+  const byRepo = /* @__PURE__ */ new Map();
+  for (const change of changes) {
+    const key2 = change.repo ?? "";
+    byRepo.set(key2, [...byRepo.get(key2) ?? [], change]);
+  }
+  return [...byRepo];
+}
+function commands(text2) {
+  const parts2 = text2.split("`").map((part2, index) => index % 2 ? { code: part2 } : part2);
+  if (parts2.length % 2 === 0) return { parts: [text2], codes: [] };
+  const codes = parts2.flatMap(
+    (part2) => typeof part2 === "string" || !part2.code ? [] : [part2.code]
+  );
+  return { parts: parts2, codes: [...new Set(codes)] };
+}
+function errorLine(error) {
+  return b`<div class="error" role="status" aria-live="polite">${error ? b`<swc-icon-alert-diamond size="s" aria-hidden="true"></swc-icon-alert-diamond><span>${error}</span>` : A}</div>`;
+}
 var SliccChanges = class extends ModelElement {
+  static properties = {
+    ...ModelElement.properties,
+    error: { state: true },
+    copied: { state: true },
+    uncopied: { state: true }
+  };
+  constructor() {
+    super();
+    this.error = "";
+    this.copied = "";
+    this.uncopied = false;
+  }
   static styles = [
     shared,
     panelCss,
+    errorCss,
     i`
       ul {
         list-style: none;
@@ -16764,7 +16840,54 @@ var SliccChanges = class extends ModelElement {
         flex: 1;
         min-height: 0;
       }
-      li {
+      ul ul {
+        padding: 0;
+        overflow: visible;
+      }
+      .unavailable {
+        display: grid;
+        gap: var(--swc-spacing-200);
+        align-content: start;
+        padding: var(--swc-spacing-300);
+        overflow-y: auto;
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
+      .unavailable p {
+        margin: 0;
+      }
+      .command {
+        display: flex;
+        align-items: center;
+        gap: var(--swc-spacing-100);
+        padding: var(--swc-spacing-75) var(--swc-spacing-75) var(--swc-spacing-75) var(--swc-spacing-200);
+        border-radius: var(--swc-corner-radius-medium-default);
+        background: var(--swc-background-layer-1-color);
+      }
+      code {
+        overflow-wrap: anywhere;
+        font-family: var(--swc-code-font-family-stack);
+        font-size: var(--swc-font-size-75);
+        color: var(--swc-code-color);
+      }
+      .command code {
+        flex: 1;
+        min-width: 0;
+        user-select: all;
+      }
+      .repo {
+        display: flex;
+        gap: var(--swc-spacing-100);
+        padding: var(--swc-spacing-100) var(--swc-spacing-200) var(--swc-spacing-50);
+        font-size: var(--swc-font-size-75);
+        font-weight: var(--swc-bold-font-weight);
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
+      .repo span:first-child {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      li[data-path] {
         display: grid;
         grid-template-columns: auto minmax(0, auto) minmax(0, 1fr) auto;
         align-items: center;
@@ -16773,11 +16896,11 @@ var SliccChanges = class extends ModelElement {
         padding: 0 var(--swc-spacing-75) 0 var(--swc-spacing-200);
         cursor: pointer;
       }
-      li:hover,
-      li:focus-within {
+      li[data-path]:hover,
+      li[data-path]:focus-within {
         background: var(--swc-gray-100);
       }
-      li:focus-visible {
+      li[data-path]:focus-visible {
         outline: var(--swc-focus-indicator-thickness) solid var(--swc-focus-indicator-color);
         outline-offset: calc(-1 * var(--swc-focus-indicator-thickness));
       }
@@ -16797,12 +16920,12 @@ var SliccChanges = class extends ModelElement {
         display: flex;
         visibility: hidden;
       }
-      li:hover .actions,
-      li:focus-within .actions {
+      li[data-path]:hover .actions,
+      li[data-path]:focus-within .actions {
         visibility: visible;
       }
       @media (hover: none), (pointer: coarse) {
-        li {
+        li[data-path] {
           min-height: var(--swc-component-height-200);
         }
         .actions {
@@ -16812,33 +16935,41 @@ var SliccChanges = class extends ModelElement {
     `
   ];
   subscribe(model) {
-    return [model.files.on("changes", () => this.requestUpdate())];
+    return [changesOf(model).on("changes", () => this.requestUpdate())];
   }
   focus() {
-    this.focusOn("li");
+    this.focusOn("li[data-path]");
+  }
+  #port() {
+    return changesOf(this.model);
   }
   #accept(event2, path) {
     event2.stopPropagation();
-    this.model?.files.accept(path);
+    this.#port().accept(path);
   }
-  async #revert(event2, path) {
+  async #revert(event2, change) {
     event2.stopPropagation();
-    if (await confirmRevert(path)) await this.model?.files.revert(path);
+    this.error = "";
+    if (await confirmRevert(change)) this.error = await revertPaths(this.#port(), [change.path]);
   }
   async #all(action) {
-    const files = this.model?.files;
-    const changes = files?.changes() ?? [];
+    const port = this.#port();
+    const changes = port.changes();
+    this.error = "";
+    if (action === "accept") {
+      for (const change of changes) port.accept(change.path);
+      return;
+    }
     const count = changes.length;
     const title = `Revert ${count} ${count === 1 ? "change" : "changes"}?`;
-    const body4 = "This discards the agents\u2019 edits and puts every file back. You can\u2019t undo this.";
-    if (action === "revert" && !await confirm({ title, body: body4, action: "Revert all" })) return;
-    for (const change of changes) {
-      if (action === "accept") files?.accept(change.path);
-      else void files?.revert(change.path);
-    }
+    if (await confirm({ title, body: lost(changes), action: "Revert all" }))
+      this.error = await revertPaths(
+        port,
+        changes.map((change) => change.path)
+      );
   }
   #keydown(event2) {
-    const items = [...this.renderRoot.querySelectorAll("li")];
+    const items = [...this.renderRoot.querySelectorAll("li[data-path]")];
     const index = items.indexOf(this.renderRoot.activeElement);
     if (index < 0) return;
     const moves = {
@@ -16856,15 +16987,17 @@ var SliccChanges = class extends ModelElement {
     }
   }
   #row(change) {
+    const by = author(this.model, change);
+    const at = where(change);
     return b`<li
       tabindex="0"
       data-path=${change.path}
-      title=${`${change.path}, ${change.status} by ${agentName(this.model, change.agentId)}`}
+      title=${`${change.path}, ${change.status}${by ? ` by ${by}` : ""}`}
       @click=${() => request(this, "open-diff", change.path)}
     >
       ${statusMark(change.status)}
       <span class="name">${basename(change.path)}</span>
-      <span class="where"><bdi>${folder(change.path)} · ${agentName(this.model, change.agentId)}</bdi></span>
+      <span class="where"><bdi>${[at, by].filter(Boolean).join(" \xB7 ")}</bdi></span>
       <span class="actions">
         <swc-action-button
           size="xs"
@@ -16880,33 +17013,78 @@ var SliccChanges = class extends ModelElement {
           quiet
           accessible-label=${`Revert ${basename(change.path)}`}
           title="Revert"
-          @click=${(event2) => this.#revert(event2, change.path)}
+          @click=${(event2) => this.#revert(event2, change)}
         >
           <swc-icon-revert slot="icon"></swc-icon-revert>
         </swc-action-button>
       </span>
     </li>`;
   }
+  #list(changes) {
+    const grouped = groups(changes);
+    if (grouped.length < 2)
+      return b`<ul aria-label="Pending changes" @keydown=${this.#keydown}>${changes.map((change) => this.#row(change))}</ul>`;
+    return b`<ul aria-label="Pending changes" @keydown=${this.#keydown}>${grouped.map(
+      ([repo, items]) => b`<li data-repo=${repo}>
+        <div class="repo" title=${repo}>
+          <span>${repo || "Outside a repository"}</span>
+          <span>${items.length}</span>
+        </div>
+        <ul aria-label=${repo || "Outside a repository"}>${items.map((change) => this.#row(change))}</ul>
+      </li>`
+    )}</ul>`;
+  }
+  async copy(code2) {
+    try {
+      await globalThis.navigator.clipboard.writeText(code2);
+      this.copied = code2;
+      this.uncopied = false;
+    } catch {
+      this.copied = "";
+      this.uncopied = true;
+    }
+  }
+  #unavailable(text2) {
+    const { parts: parts2, codes } = commands(text2);
+    return b`<div class="unavailable">
+      <p data-unavailable>${parts2.map((part2) => typeof part2 === "string" ? part2 : b`<code>${part2.code}</code>`)}</p>
+      ${codes.map(
+      (code2) => b`<div class="command" data-command=${code2}>
+          <code>${code2}</code>
+          <swc-action-button size="s" quiet data-action="copy-command" accessible-label=${this.copied === code2 ? "Copied" : `Copy ${code2}`} @click=${() => this.copy(code2)}>
+            <swc-icon-copy slot="icon"></swc-icon-copy>${this.copied === code2 ? "Copied" : "Copy"}
+          </swc-action-button>
+        </div>`
+    )}
+      ${this.uncopied ? b`<div class="error" role="alert" data-error="copy"><swc-icon-alert-diamond size="s" aria-hidden="true"></swc-icon-alert-diamond><span>Couldn’t copy. Select the command and copy it.</span></div>` : A}
+    </div>`;
+  }
   render() {
-    const changes = this.model?.files.changes() ?? [];
+    const port = this.model ? changesOf(this.model) : null;
+    const unavailable = port?.unavailable?.() ?? null;
+    if (unavailable) return this.#unavailable(unavailable);
+    const changes = port?.changes() ?? [];
     return b`<div class="bar">
         <span>${changes.length} pending ${changes.length === 1 ? "change" : "changes"}</span>
         <span class="spacer"></span>
         ${changes.length ? b`<swc-action-button size="s" quiet @click=${() => this.#all("accept")}>Accept all</swc-action-button>
               <swc-action-button size="s" quiet @click=${() => this.#all("revert")}>Revert all</swc-action-button>` : A}
       </div>
-      ${changes.length ? b`<ul aria-label="Pending changes" @keydown=${this.#keydown}>${changes.map((change) => this.#row(change))}</ul>` : b`<div class="note">No pending changes. Edits by agents show up here for review.</div>`}`;
+      ${errorLine(this.error)}
+      ${changes.length ? this.#list(changes) : b`<div class="note">No pending changes. Edits by agents show up here for review.</div>`}`;
   }
 };
 var SliccDiffPanel = class extends ThemedElement {
-  static properties = { ...ThemedElement.properties, path: {} };
+  static properties = { ...ThemedElement.properties, path: {}, error: { state: true } };
   constructor() {
     super();
     this.path = "";
+    this.error = "";
   }
   static styles = [
     shared,
     panelCss,
+    errorCss,
     i`
       slicc-diff-view {
         flex: 1;
@@ -16928,17 +17106,34 @@ var SliccDiffPanel = class extends ThemedElement {
     `
   ];
   subscribe(model) {
-    return [...super.subscribe(model), model.files.on("changes", () => this.requestUpdate())];
+    return [...super.subscribe(model), changesOf(model).on("changes", () => this.requestUpdate())];
+  }
+  async #revert(port, change) {
+    this.error = "";
+    if (await confirmRevert(change)) this.error = await revertPaths(port, [this.path]);
   }
-  async #revert() {
-    if (await confirmRevert(this.path)) await this.model?.files.revert(this.path);
+  #body(change, style) {
+    if (change.before === null && change.after === null) {
+      return b`<div class="note" data-diff="none">
+        No diff for this file: it’s binary or over 1 MB.
+        ${change.status === "deleted" ? A : b`<swc-action-button size="s" quiet @click=${() => request(this, "open-file", this.path)}>Open the file</swc-action-button>`}
+      </div>`;
+    }
+    return b`<slicc-diff-view
+      path=${this.path}
+      color=${this.color}
+      diff-style=${style}
+      .oldText=${change.before}
+      .newText=${change.after}
+    ></slicc-diff-view>`;
   }
   #style(style) {
     this.model?.settings.update({ diffStyle: style });
   }
   render() {
     const model = this.model;
-    const change = model?.files.changes().find((candidate) => candidate.path === this.path);
+    const port = model ? changesOf(model) : null;
+    const change = port?.changes().find((candidate) => candidate.path === this.path);
     const style = model?.settings.get().diffStyle ?? "unified";
     if (!change) {
       return b`<div class="bar"><span class="path" title=${this.path}>${this.path}</span></div>
@@ -16947,12 +17142,13 @@ var SliccDiffPanel = class extends ThemedElement {
           <swc-action-button size="s" quiet @click=${() => request(this, "open-file", this.path)}>Open the file</swc-action-button>
         </div>`;
     }
+    const by = author(model, change);
     return b`<div class="bar">
         ${statusMark(change.status, false)}
         <span class="path" title=${this.path}>${this.path}</span>
-        <span>${statusLabels[change.status]} by ${agentName(model, change.agentId)}</span>
+        <span>${statusLabels[change.status]}${by ? ` by ${by}` : ""}</span>
         <span class="spacer"></span>
-        <swc-action-group size="s" compact accessible-label="Diff layout">
+        ${change.before === null && change.after === null ? A : b`<swc-action-group size="s" compact accessible-label="Diff layout">
           ${layouts.map(
       ([value, label]) => b`<swc-action-button
                 class=${value === style ? "selected" : ""}
@@ -16962,21 +17158,16 @@ var SliccDiffPanel = class extends ThemedElement {
                 >${label}</swc-action-button
               >`
     )}
-        </swc-action-group>
-        <swc-action-button size="s" quiet @click=${() => model?.files.accept(this.path)}>
+        </swc-action-group>`}
+        <swc-action-button size="s" quiet @click=${() => port?.accept(this.path)}>
           <swc-icon-checkmark slot="icon"></swc-icon-checkmark>Accept
         </swc-action-button>
-        <swc-action-button size="s" quiet @click=${() => this.#revert()}>
+        <swc-action-button size="s" quiet @click=${() => this.#revert(port, change)}>
           <swc-icon-revert slot="icon"></swc-icon-revert>Revert
         </swc-action-button>
       </div>
-      <slicc-diff-view
-        path=${this.path}
-        color=${this.color}
-        diff-style=${style}
-        .oldText=${change.before}
-        .newText=${change.after}
-      ></slicc-diff-view>`;
+      ${errorLine(this.error)}
+      ${this.#body(change, style)}`;
   }
 };
 
@@ -19637,12 +19828,15 @@ function tool(call, color = "light") {
   const kind = toolKind(call.name);
   return b`<details class="tool" data-status=${call.status} data-tool=${call.name} data-kind=${kind.id}>
     <summary>
-      <swc-icon-chevron-right class="chevron" size="s" aria-hidden="true"></swc-icon-chevron-right>
-      <span class="kind">${kind.icon}</span>
-      <span class="title">${call.title}</span>
-      <span class="name">${call.name}</span>
-      ${call.meta ? b`<span class="tool-meta">${call.meta}</span>` : A}
-      ${state(call.status)}
+      <span class="head">
+        <swc-icon-chevron-right class="chevron" size="s" aria-hidden="true"></swc-icon-chevron-right>
+        <span class="kind">${kind.icon}</span>
+        <span class="title">${call.title}</span>
+        <span class="name">${call.name}</span>
+        ${call.meta ? b`<span class="tool-meta">${call.meta}</span>` : A}
+        ${state(call.status)}
+      </span>
+      ${call.image ? b`<span class="thumb"><img src=${call.image} alt="" /></span>` : A}
     </summary>
     <div class="call">
       ${body(call, color)}
@@ -20194,6 +20388,18 @@ var messageCss = i`
   :is(details.tool, details.cluster) > summary {
     padding-inline: var(--swc-spacing-100);
   }
+  details.tool > summary {
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: center;
+    gap: 0;
+  }
+  details.tool > summary > .head {
+    display: flex;
+    align-items: center;
+    gap: var(--swc-spacing-100);
+    min-inline-size: 0;
+  }
   :is(details.tool, details.cluster) > summary:hover {
     background: var(--swc-gray-100);
   }
@@ -20311,6 +20517,19 @@ var messageCss = i`
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
+  .thumb {
+    padding-inline-start: calc(var(--swc-spacing-100) + var(--swc-spacing-300));
+    padding-block: var(--swc-spacing-75);
+  }
+  .thumb img {
+    display: block;
+    max-inline-size: min(100%, calc(var(--swc-spacing-1000) * 2));
+    max-block-size: calc(var(--swc-spacing-1000) * 1.25);
+    border-radius: var(--swc-corner-radius-75);
+  }
+  details[open] > summary .thumb {
+    display: none;
+  }
   .shot {
     display: block;
     max-inline-size: min(100%, calc(var(--swc-spacing-1000) * 5));
@@ -21785,9 +22004,9 @@ e25("swc-icon-clock", o70);
 // src/app/composer.ts
 var limit = 25 * 1024 * 1024;
 function available(model) {
-  return commands.filter((command2) => command2.available?.(model) ?? true);
+  return commands2.filter((command2) => command2.available?.(model) ?? true);
 }
-var commands = [
+var commands2 = [
   {
     name: "clear",
     detail: "Start a new chat",
@@ -21976,14 +22195,27 @@ var SliccComposer = class extends ModelElement {
         min-height: var(--swc-component-height-75);
       }
       .hint {
+        display: flex;
         flex: 1;
+        flex-wrap: wrap;
+        align-items: center;
         min-width: 0;
-        white-space: nowrap;
+        max-block-size: var(--swc-component-height-75);
         overflow: hidden;
-        text-overflow: ellipsis;
         font-size: var(--swc-font-size-75);
         color: var(--swc-neutral-subdued-content-color-default);
       }
+      .hint > span {
+        display: flex;
+        align-items: center;
+        block-size: var(--swc-component-height-75);
+        gap: var(--swc-spacing-50);
+        white-space: nowrap;
+      }
+      .hint > span + span::before {
+        content: '·';
+        padding-inline-start: var(--swc-spacing-75);
+      }
       .below swc-action-button {
         margin-inline-start: auto;
       }
@@ -22264,7 +22496,7 @@ var SliccComposer = class extends ModelElement {
     }
     if (kind === "argument") {
       const name = this.value.match(/^\/(\w+)/)?.[1];
-      return filter(commands.find((command2) => command2.name === name)?.args?.(model) ?? [], query);
+      return filter(commands2.find((command2) => command2.name === name)?.args?.(model) ?? [], query);
     }
     const files = this.#paths.map((path) => ({
       value: path,
@@ -22284,7 +22516,7 @@ var SliccComposer = class extends ModelElement {
     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];
-    const takes = commands.some((command2) => command2.name === name && command2.args);
+    const takes = commands2.some((command2) => command2.name === name && command2.args);
     this.popup = found && (found.kind !== "argument" || takes) ? { ...found, items: this.#choices(found.kind, found.query), index: 0 } : null;
   }
   openPopup(kind) {
@@ -22566,8 +22798,12 @@ var SliccComposer = class extends ModelElement {
       </div>
       <div class="below">
         <div class="hint">
-          <kbd>Enter</kbd> ${busy ? "steer" : "send"} · <kbd>Ctrl+Enter</kbd> queue · <kbd>Shift+Enter</kbd> new line · <kbd>/</kbd> commands ·
-          <kbd>@</kbd> mention · <kbd>↑</kbd> history${busy ? b` · <kbd>Esc</kbd> stop` : A}
+          <span><kbd>Enter</kbd> ${busy ? "steer" : "send"}</span>
+          ${busy ? b`<span><kbd>Ctrl+Enter</kbd> queue</span><span><kbd>Esc</kbd> stop</span>` : A}
+          <span><kbd>/</kbd> commands</span>
+          <span><kbd>@</kbd> mention</span>
+          <span><kbd>Shift+Enter</kbd> new line</span>
+          <span><kbd>↑</kbd> history</span>
         </div>
         ${speech ? b`<swc-action-button
                 size="s"
@@ -22680,10 +22916,10 @@ var tagLabels = {
   project: "Project"
 };
 function sections(memories) {
-  const groups = /* @__PURE__ */ new Map();
+  const groups2 = /* @__PURE__ */ new Map();
   for (const memory of memories)
-    groups.set(memory.section, [...groups.get(memory.section) ?? [], memory]);
-  return [...groups];
+    groups2.set(memory.section, [...groups2.get(memory.section) ?? [], memory]);
+  return [...groups2];
 }
 var SliccMemory = class extends ModelElement {
   static properties = {
@@ -23933,13 +24169,9 @@ var SliccTray = class extends ModelElement {
         align-items: center;
         gap: var(--swc-spacing-50);
       }
-      .chip .short,
       :host([compact]) .chip .detail {
         display: none;
       }
-      :host([compact]) .chip .short {
-        display: inline;
-      }
       .muted {
         color: var(--swc-neutral-subdued-content-color-default);
       }
@@ -24016,7 +24248,7 @@ var SliccTray = class extends ModelElement {
       >
         <span>
           <swc-status-light size="s" variant=${connectionVariant[status2.connection]}>
-            <span class="detail">${light}</span><span class="short">${connection}</span>
+            <span class="detail">${light}</span>
           </swc-status-light>
           <span class="detail muted followers"><swc-icon-user-group size="s"></swc-icon-user-group>${status2.followers.length}</span>
         </span>
@@ -31566,12 +31798,12 @@ function charactersToExpressionCached(subset) {
   return cached;
 }
 function charactersToExpression(subset) {
-  const groups = [];
+  const groups2 = [];
   let index = -1;
   while (++index < subset.length) {
-    groups.push(subset[index].replace(regexEscapeRegex, "\\$&"));
+    groups2.push(subset[index].replace(regexEscapeRegex, "\\$&"));
   }
-  return new RegExp("(?:" + groups.join("|") + ")", "g");
+  return new RegExp("(?:" + groups2.join("|") + ")", "g");
 }
 
 // node_modules/stringify-entities/lib/util/to-hexadecimal.js
@@ -32851,31 +33083,31 @@ function parseColor(sequence) {
   }
 }
 function parseSequence(sequence) {
-  const commands2 = [];
+  const commands3 = [];
   while (sequence.length > 0) {
     const code2 = sequence.shift();
     if (!code2) continue;
     const codeInt = Number.parseInt(code2);
     if (Number.isNaN(codeInt)) continue;
-    if (codeInt === 0) commands2.push({ type: "resetAll" });
+    if (codeInt === 0) commands3.push({ type: "resetAll" });
     else if (codeInt <= 9) {
-      if (decorations[codeInt]) commands2.push({
+      if (decorations[codeInt]) commands3.push({
         type: "setDecoration",
         value: decorations[codeInt]
       });
     } else if (codeInt <= 29) {
       const decoration = decorations[codeInt - 20];
       if (decoration) {
-        commands2.push({
+        commands3.push({
           type: "resetDecoration",
           value: decoration
         });
-        if (decoration === "dim") commands2.push({
+        if (decoration === "dim") commands3.push({
           type: "resetDecoration",
           value: "bold"
         });
       }
-    } else if (codeInt <= 37) commands2.push({
+    } else if (codeInt <= 37) commands3.push({
       type: "setForegroundColor",
       value: {
         type: "named",
@@ -32884,12 +33116,12 @@ function parseSequence(sequence) {
     });
     else if (codeInt === 38) {
       const color = parseColor(sequence);
-      if (color) commands2.push({
+      if (color) commands3.push({
         type: "setForegroundColor",
         value: color
       });
-    } else if (codeInt === 39) commands2.push({ type: "resetForegroundColor" });
-    else if (codeInt <= 47) commands2.push({
+    } else if (codeInt === 39) commands3.push({ type: "resetForegroundColor" });
+    else if (codeInt <= 47) commands3.push({
       type: "setBackgroundColor",
       value: {
         type: "named",
@@ -32898,27 +33130,27 @@ function parseSequence(sequence) {
     });
     else if (codeInt === 48) {
       const color = parseColor(sequence);
-      if (color) commands2.push({
+      if (color) commands3.push({
         type: "setBackgroundColor",
         value: color
       });
-    } else if (codeInt === 49) commands2.push({ type: "resetBackgroundColor" });
-    else if (codeInt === 53) commands2.push({
+    } else if (codeInt === 49) commands3.push({ type: "resetBackgroundColor" });
+    else if (codeInt === 53) commands3.push({
       type: "setDecoration",
       value: "overline"
     });
-    else if (codeInt === 55) commands2.push({
+    else if (codeInt === 55) commands3.push({
       type: "resetDecoration",
       value: "overline"
     });
-    else if (codeInt >= 90 && codeInt <= 97) commands2.push({
+    else if (codeInt >= 90 && codeInt <= 97) commands3.push({
       type: "setForegroundColor",
       value: {
         type: "named",
         name: namedColors[codeInt - 90 + 8]
       }
     });
-    else if (codeInt >= 100 && codeInt <= 107) commands2.push({
+    else if (codeInt >= 100 && codeInt <= 107) commands3.push({
       type: "setBackgroundColor",
       value: {
         type: "named",
@@ -32926,7 +33158,7 @@ function parseSequence(sequence) {
       }
     });
   }
-  return commands2;
+  return commands3;
 }
 function createAnsiSequenceParser() {
   let foreground = null;
@@ -32945,15 +33177,15 @@ function createAnsiSequenceParser() {
         decorations: new Set(decorations2)
       });
       if (findResult.sequence) {
-        const commands2 = parseSequence(findResult.sequence);
-        for (const styleToken of commands2) if (styleToken.type === "resetAll") {
+        const commands3 = parseSequence(findResult.sequence);
+        for (const styleToken of commands3) if (styleToken.type === "resetAll") {
           foreground = null;
           background = null;
           decorations2.clear();
         } else if (styleToken.type === "resetForegroundColor") foreground = null;
         else if (styleToken.type === "resetBackgroundColor") background = null;
         else if (styleToken.type === "resetDecoration") decorations2.delete(styleToken.value);
-        for (const styleToken of commands2) if (styleToken.type === "setForegroundColor") foreground = styleToken.value;
+        for (const styleToken of commands3) if (styleToken.type === "setForegroundColor") foreground = styleToken.value;
         else if (styleToken.type === "setBackgroundColor") background = styleToken.value;
         else if (styleToken.type === "setDecoration") decorations2.add(styleToken.value);
       }
@@ -51638,8 +51870,8 @@ var BaseGrid = class extends Resizable {
       this._onDidRemove.fire(group);
     }
     if (!(options === null || options === void 0 ? void 0 : options.skipActive) && this._activeGroup === group) {
-      const groups = Array.from(this._groups.values());
-      this.doSetGroupActive(groups.length > 0 ? groups[0].value : void 0);
+      const groups2 = Array.from(this._groups.values());
+      this.doSetGroupActive(groups2.length > 0 ? groups2[0].value : void 0);
     }
     return view;
   }
@@ -61967,7 +62199,7 @@ var StrictEventsSequencing = class extends CompositeDisposable {
   }
   init() {
     const panels = /* @__PURE__ */ new Set();
-    const groups = /* @__PURE__ */ new Set();
+    const groups2 = /* @__PURE__ */ new Set();
     this.addDisposables(this.accessor.onDidAddPanel((panel) => {
       if (panels.has(panel.api.id)) throw new Error(`dockview: Invalid event sequence. [onDidAddPanel] called for panel ${panel.api.id} but panel already exists`);
       else panels.add(panel.api.id);
@@ -61975,10 +62207,10 @@ var StrictEventsSequencing = class extends CompositeDisposable {
       if (panels.has(panel.api.id)) panels.delete(panel.api.id);
       else throw new Error(`dockview: Invalid event sequence. [onDidRemovePanel] called for panel ${panel.api.id} but panel does not exists`);
     }), this.accessor.onDidAddGroup((group) => {
-      if (groups.has(group.api.id)) throw new Error(`dockview: Invalid event sequence. [onDidAddGroup] called for group ${group.api.id} but group already exists`);
-      else groups.add(group.api.id);
+      if (groups2.has(group.api.id)) throw new Error(`dockview: Invalid event sequence. [onDidAddGroup] called for group ${group.api.id} but group already exists`);
+      else groups2.add(group.api.id);
     }), this.accessor.onDidRemoveGroup((group) => {
-      if (groups.has(group.api.id)) groups.delete(group.api.id);
+      if (groups2.has(group.api.id)) groups2.delete(group.api.id);
       else throw new Error(`dockview: Invalid event sequence. [onDidRemoveGroup] called for group ${group.api.id} but group does not exists`);
     }));
   }
@@ -64772,9 +65004,9 @@ var DockviewComponent = class extends BaseGrid {
     this.mutation("clear", () => this._doClear());
   }
   _doClear() {
-    const groups = Array.from(this._groups.values()).map((_9) => _9.value);
+    const groups2 = Array.from(this._groups.values()).map((_9) => _9.value);
     const hasActiveGroup = !!this.activeGroup;
-    for (const group of groups) {
+    for (const group of groups2) {
       var _this$_edgeGroupServi9;
       if ((_this$_edgeGroupServi9 = this._edgeGroupService) === null || _this$_edgeGroupServi9 === void 0 ? void 0 : _this$_edgeGroupServi9.includes(group)) {
         const panels = [...group.panels];
@@ -65027,8 +65259,8 @@ var DockviewComponent = class extends BaseGrid {
   */
   activateFallbackGroupIfRemoved(removed, skipActive) {
     if (!skipActive && this._activeGroup === removed) {
-      const groups = Array.from(this._groups.values());
-      this.doSetGroupAndPanelActive(groups.length > 0 ? groups[0].value : void 0);
+      const groups2 = Array.from(this._groups.values());
+      this.doSetGroupAndPanelActive(groups2.length > 0 ? groups2[0].value : void 0);
     }
   }
   doRemoveGroup(group, options) {
@@ -65972,10 +66204,10 @@ var SliccDock = class extends HTMLElement {
     this.#contents.get(id)?.focus();
   }
   cycleGroup(delta) {
-    const groups = this.api.groups.filter((group) => group.activePanel);
-    if (groups.length === 0) return null;
-    const current = groups.indexOf(this.api.activeGroup);
-    const next = groups[(current + delta + groups.length) % groups.length];
+    const groups2 = this.api.groups.filter((group) => group.activePanel);
+    if (groups2.length === 0) return null;
+    const current = groups2.indexOf(this.api.activeGroup);
+    const next = groups2[(current + delta + groups2.length) % groups2.length];
     const id = next.activePanel?.id;
     this.focusPanel(id);
     return id;