@ai-ecoverse/slicc-spectrum 1.34.0 → 1.36.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}
@@ -10596,6 +10614,15 @@ var routes = {
   page: "Through this page\u2019s own fetch. Sites that block cross-origin requests are out of reach.",
   none: "No route to the network."
 };
+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.",
+  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()}`;
 }
@@ -10826,6 +10853,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=${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>`;
@@ -14975,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;
     }
@@ -15027,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();
@@ -15114,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");
@@ -15275,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;
@@ -15393,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;
@@ -16740,15 +16772,50 @@ 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 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 } };
+  constructor() {
+    super();
+    this.error = "";
+  }
   static styles = [
     shared,
     panelCss,
+    errorCss,
     i`
       ul {
         list-style: none;
@@ -16758,7 +16825,24 @@ var SliccChanges = class extends ModelElement {
         flex: 1;
         min-height: 0;
       }
-      li {
+      ul ul {
+        padding: 0;
+        overflow: visible;
+      }
+      .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;
@@ -16767,11 +16851,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));
       }
@@ -16791,12 +16875,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 {
@@ -16806,33 +16890,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 = {
@@ -16850,15 +16942,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"
@@ -16874,33 +16968,53 @@ 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>`;
+  }
   render() {
-    const changes = this.model?.files.changes() ?? [];
+    const port = this.model ? changesOf(this.model) : null;
+    const unavailable = port?.unavailable?.() ?? null;
+    if (unavailable) return b`<div class="note" data-unavailable>${unavailable}</div>`;
+    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;
@@ -16922,17 +17036,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() {
-    if (await confirmRevert(this.path)) await this.model?.files.revert(this.path);
+  async #revert(port, change) {
+    this.error = "";
+    if (await confirmRevert(change)) this.error = await revertPaths(port, [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>
@@ -16941,12 +17072,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" : ""}
@@ -16956,21 +17088,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)}`;
   }
 };
 
@@ -20898,7 +21025,8 @@ var SliccChat = class extends ThemedElement {
         <sp-menu-item value="high">Think hard</sp-menu-item>
       </sp-picker>
       ${meter}
-      <swc-action-button size="s" quiet data-action="new-chat" ?disabled=${empty2} @click=${() => this.#newChat(agent)}><swc-icon-new slot="icon"></swc-icon-new>New chat</swc-action-button>`;
+      <swc-action-button id="new-chat" size="s" quiet data-action="new-chat" ?disabled=${empty2} @click=${() => this.#newChat(agent)}><swc-icon-new slot="icon"></swc-icon-new>New chat</swc-action-button>
+      <swc-tooltip for="new-chat" placement="bottom">${agent.kind === "cone" && model.agent.freeze ? "Freeze this chat and start a new one" : "Start a new chat"}</swc-tooltip>`;
   }
   render() {
     this.#handlers.color = this.color;
@@ -21783,7 +21911,7 @@ function available(model) {
 var commands = [
   {
     name: "clear",
-    detail: "Start the conversation over",
+    detail: "Start a new chat",
     run: (model, id) => model.agent.clear(id)
   },
   {
@@ -22673,10 +22801,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 = {
@@ -23926,13 +24054,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);
       }
@@ -24009,7 +24133,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>
@@ -31559,12 +31683,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
@@ -51631,8 +51755,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;
   }
@@ -61960,7 +62084,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);
@@ -61968,10 +62092,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`);
     }));
   }
@@ -64765,9 +64889,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];
@@ -65020,8 +65144,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) {
@@ -65965,10 +66089,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;