@ai-ecoverse/slicc-spectrum 1.68.3 → 1.69.1

package/dist/slicc-ui.js

@@ -9444,6 +9444,7 @@ var SliccPrompt = class extends i2 {
   trigger = null;
   submit = null;
   #result = Promise.withResolvers();
+  #submitted = null;
   constructor() {
     super();
     this.heading = "";
@@ -9495,14 +9496,14 @@ var SliccPrompt = class extends i2 {
       this.#field.focus();
       return;
     }
-    this.#result.resolve(value);
+    this.#submitted = value;
     this.#dialog.close();
   }
   #cancel(event2) {
     if (this.pending) event2.preventDefault();
   }
   #closed() {
-    this.#result.resolve(null);
+    this.#result.resolve(this.#submitted);
     this.remove();
     if (this.trigger?.isConnected) this.trigger.focus();
   }
@@ -10736,11 +10737,514 @@ var SliccFreezer = class extends ModelElement {
   }
 };
 
+// node_modules/@adobe/spectrum-wc-icons/dist/ChevronRight.js
+function e80() {
+  return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M7.75 16.465a.748.748 0 0 1-.54-1.27l4.999-5.197-4.986-5.184a.75.75 0 0 1 .02-1.06.75.75 0 0 1 1.06.021L13.79 9.48c.28.29.28.749 0 1.039l-5.5 5.716a.75.75 0 0 1-.54.23"/></svg>';
+}
+
+// node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-chevron-right.js
+var o51 = class extends a10 {
+  static get styles() {
+    return [t40];
+  }
+  render() {
+    return b`
+      <span class="swc-Icon">${o16(e80())}</span>
+    `;
+  }
+};
+e25("swc-icon-chevron-right", o51);
+
+// node_modules/@adobe/spectrum-wc-icons/dist/Copy.js
+function e81() {
+  return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M11.75 18h-7.5C3.01 18 2 16.99 2 15.75v-7.5C2 7.01 3.01 6 4.25 6a.75.75 0 0 1 0 1.5.75.75 0 0 0-.75.75v7.5c0 .413.337.75.75.75h7.5c.413 0 .75-.337.75-.75a.75.75 0 0 1 1.5 0c0 1.24-1.01 2.25-2.25 2.25m-5-13A.75.75 0 0 1 6 4.25C6 3.01 7.01 2 8.25 2a.75.75 0 0 1 0 1.5.75.75 0 0 0-.75.75.75.75 0 0 1-.75.75M13 3.5h-2A.75.75 0 0 1 11 2h2a.75.75 0 0 1 0 1.5"/><path fill="var(--swc-icon-color, currentColor)" d="M13 14h-2a.75.75 0 0 1 0-1.5h2a.75.75 0 0 1 0 1.5m2.75 0a.75.75 0 0 1 0-1.5c.413 0 .75-.337.75-.75a.75.75 0 0 1 1.5 0c0 1.24-1.01 2.25-2.25 2.25m1.5-9a.75.75 0 0 1-.75-.75.75.75 0 0 0-.75-.75.75.75 0 0 1 0-1.5C16.99 2 18 3.01 18 4.25a.75.75 0 0 1-.75.75m0 4.75A.75.75 0 0 1 16.5 9V7A.75.75 0 0 1 18 7v2a.75.75 0 0 1-.75.75m-10.5 0A.75.75 0 0 1 6 9V7a.75.75 0 0 1 1.5 0v2a.75.75 0 0 1-.75.75M8.25 14C7.01 14 6 12.99 6 11.75a.75.75 0 0 1 1.5 0c0 .413.337.75.75.75a.75.75 0 0 1 0 1.5"/></svg>';
+}
+
+// node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-copy.js
+var o52 = class extends a10 {
+  static get styles() {
+    return [t40];
+  }
+  render() {
+    return b`
+      <span class="swc-Icon">${o16(e81())}</span>
+    `;
+  }
+};
+e25("swc-icon-copy", o52);
+
+// src/app/reach.ts
+var command = "curl -fsSL https://get.sliccy.ai/slicc | sh";
+var startCommand = "slicc";
+var nodeCommand = "npx sliccy@next";
+var reachStyles = i`
+  .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 {
+    flex: 1;
+    min-width: 0;
+    overflow-wrap: break-word;
+    word-break: normal;
+    font-family: var(--swc-code-font-family-stack);
+    font-size: var(--swc-font-size-75);
+    color: var(--swc-code-color);
+    user-select: all;
+  }
+  .commands {
+    display: grid;
+    gap: var(--swc-spacing-100);
+  }
+  .commands p {
+    margin: 0;
+    font-size: var(--swc-font-size-75);
+    color: var(--swc-neutral-subdued-content-color-default);
+  }
+`;
+function block(text2, copied, copy, first2 = false) {
+  const done2 = copied === text2;
+  return b`<div class="command" data-command=${text2}>
+      <code>${breakable(text2)}</code>
+      <swc-action-button size="s" quiet data-action=${first2 ? "copy-command" : A} accessible-label=${done2 ? "Copied" : `Copy ${text2}`} @click=${() => copy(text2)}>
+        <swc-icon-copy slot="icon"></swc-icon-copy>${done2 ? "Copied" : "Copy"}
+      </swc-action-button>
+    </div>`;
+}
+function breakable(text2) {
+  return text2.split("/").map(
+    (part2, index, parts2) => b`${part2}${index < parts2.length - 1 ? b`/<wbr />` : A}`
+  );
+}
+function reach({ intro, extensionUrl, copied, uncopied, copy }) {
+  return b`<p>${intro}</p>
+    ${extensionUrl ? b`<p><a class="swc-Link" href=${extensionUrl} target="_blank" rel="noopener noreferrer" data-action="install-extension">Install the Chrome extension</a></p>` : A}
+    <p>To run slicc, enter this in a terminal:</p>
+    <div class="commands">
+      ${block(command, copied, copy, true)}
+      ${block(startCommand, copied, copy)}
+    </div>
+    <div class="commands" data-commands="node">
+      <p>With Node:</p>
+      ${block(nodeCommand, copied, copy)}
+    </div>
+    ${uncopied ? b`<div class="error" role="alert" data-error="copy"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>Couldn’t copy. Select the command and copy it.</span></div>` : A}`;
+}
+async function copyText(text2) {
+  try {
+    await globalThis.navigator.clipboard.writeText(text2);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// src/app/monitor.ts
+function sparkline(points, width = 120, height = 28) {
+  if (points.length < 2) return "";
+  const max2 = Math.max(...points);
+  const min2 = Math.min(...points);
+  const span = max2 - min2 || 1;
+  return points.map(
+    (value, i26) => `${(i26 / (points.length - 1) * width).toFixed(1)},${(height - (value - min2) / span * (height - 2) - 1).toFixed(1)}`
+  ).join(" ");
+}
+function meterVariant2(ratio) {
+  if (ratio >= 0.9) return "negative";
+  if (ratio >= 0.6) return "notice";
+  return "informative";
+}
+var surfaces = {
+  agents: "agents",
+  terminals: "terminal",
+  tabs: "browser",
+  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 indent(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)
+    return { variant: "negative", text: `${errors} ${errors === 1 ? "error" : "errors"}` };
+  const warnings = section.rows.filter((row) => row.status === "warn").length;
+  if (warnings)
+    return {
+      variant: "notice",
+      text: `${warnings} ${warnings === 1 ? "needs" : "need"} attention`
+    };
+  return null;
+}
+var SliccMonitor = class extends ModelElement {
+  static properties = {
+    ...ModelElement.properties,
+    expanded: { state: true },
+    copied: { state: true }
+  };
+  constructor() {
+    super();
+    this.expanded = {};
+    this.copied = null;
+  }
+  static styles = [
+    shared,
+    panelCss,
+    i`
+      .bar {
+        padding-block: var(--swc-spacing-50);
+      }
+      .heading {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: baseline;
+        column-gap: var(--swc-spacing-100);
+        white-space: normal;
+      }
+      .bar swc-action-button {
+        flex: none;
+      }
+      .body {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+        padding: var(--swc-spacing-100);
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        align-content: start;
+        gap: var(--swc-spacing-200);
+      }
+      .vitals {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--swc-card-default-width-extra-small)), 1fr));
+        gap: var(--swc-spacing-100);
+      }
+      .vital {
+        display: grid;
+        align-content: start;
+        gap: var(--swc-spacing-50);
+        border-radius: var(--swc-corner-radius-medium-default);
+        padding: var(--swc-spacing-200);
+        background: var(--swc-background-layer-1-color);
+      }
+      .label {
+        color: var(--swc-neutral-subdued-content-color-default);
+        font-size: var(--swc-font-size-75);
+      }
+      .value {
+        font-size: var(--swc-font-size-300);
+        font-weight: var(--swc-bold-font-weight);
+        font-variant-numeric: tabular-nums;
+      }
+      .unit,
+      .delta {
+        color: var(--swc-neutral-subdued-content-color-default);
+        margin-inline-start: var(--swc-spacing-75);
+      }
+      svg {
+        display: block;
+        width: 100%;
+        height: var(--swc-component-height-100);
+      }
+      polyline {
+        fill: none;
+        stroke: var(--swc-accent-visual-color);
+        stroke-width: 1.5;
+      }
+      swc-meter {
+        width: 100%;
+      }
+      .alerts {
+        display: grid;
+        gap: var(--swc-spacing-75);
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      .alert {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr);
+        gap: var(--swc-spacing-100);
+        align-items: start;
+        border-radius: var(--swc-corner-radius-medium-default);
+        padding: var(--swc-spacing-100) var(--swc-spacing-200);
+        background: var(--swc-notice-subtle-background-color-default);
+      }
+      .alert[data-severity='error'] {
+        background: var(--swc-negative-subtle-background-color-default);
+      }
+      .alert swc-icon-alert-triangle {
+        color: var(--swc-icon-color-notice);
+      }
+      .alert swc-icon-alert-diamond {
+        color: var(--swc-icon-color-negative);
+      }
+      .alert .detail {
+        display: block;
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
+      .alert > div {
+        min-width: 0;
+      }
+      .alert .command {
+        display: flex;
+        align-items: center;
+        gap: var(--swc-spacing-100);
+        margin-block-start: var(--swc-spacing-75);
+        padding-inline-start: var(--swc-spacing-100);
+        border-radius: var(--swc-corner-radius-medium-default);
+        background: var(--swc-background-layer-1-color);
+      }
+      .alert code {
+        flex: 1;
+        min-width: 0;
+        overflow-x: auto;
+        white-space: nowrap;
+        font-family: var(--swc-code-font-family-stack);
+        font-size: var(--swc-font-size-75);
+        color: var(--swc-code-color);
+      }
+      .alert .lead {
+        display: block;
+        margin-block-start: var(--swc-spacing-75);
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
+      .alert .uncopied {
+        display: block;
+        color: var(--swc-negative-content-color-default);
+      }
+      .sections {
+        display: grid;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      .section {
+        display: grid;
+      }
+      .line {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--swc-spacing-100);
+        min-height: var(--swc-component-height-100);
+        padding: var(--swc-spacing-50) 0;
+      }
+      .toggle {
+        all: unset;
+        box-sizing: border-box;
+        flex: 1 1 auto;
+        min-width: 0;
+        display: flex;
+        align-items: center;
+        gap: var(--swc-spacing-75);
+        cursor: pointer;
+        border-radius: var(--swc-corner-radius-small-default);
+      }
+      .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 1 auto;
+        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: break-word;
+      }
+      .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: break-word;
+      }
+    `
+  ];
+  subscribe(model) {
+    return [model.monitor.on("snapshot", () => this.requestUpdate())];
+  }
+  focus() {
+    this.focusOn(".bar swc-action-button");
+  }
+  #vital(vital) {
+    if (vital.ratio !== void 0) {
+      return b`<div class="vital" data-id=${vital.id}>
+        <swc-meter
+          size="s"
+          variant=${meterVariant2(vital.ratio)}
+          value=${Math.round(vital.ratio * 100)}
+          value-label=${vital.value}
+          ><span slot="label">${vital.label}</span>${vital.unit ? b`<span slot="description">${vital.unit}</span>` : A}</swc-meter
+        >
+      </div>`;
+    }
+    const line = vital.series ? sparkline(vital.series) : "";
+    return b`<div class="vital" data-id=${vital.id}>
+      <div class="label">${vital.label}</div>
+      <div><span class="value">${vital.value}</span>${vital.unit ? b`<span class="unit">${vital.unit}</span>` : A}${vital.delta ? b`<span class="delta">${vital.delta}</span>` : A}</div>
+      ${line ? b`<svg viewBox="0 0 120 28" preserveAspectRatio="none" aria-hidden="true">${w`<polyline points=${line}></polyline>`}</svg>` : A}
+    </div>`;
+  }
+  #alert(alert) {
+    const error = alert.severity === "error";
+    return b`<li class="alert" data-severity=${alert.severity}>
+      ${error ? b`<swc-icon-alert-diamond size="s" aria-hidden="true"></swc-icon-alert-diamond>` : b`<swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle>`}
+      <div><span class="sr">${error ? "Error: " : "Warning: "}</span><strong>${alert.title}</strong><span class="detail">${alert.detail}</span>${alert.command ? this.#command(alert.id, alert.command, alert.commandLabel ?? "Run") : A}</div>
+    </li>`;
+  }
+  #command(id, text2, label) {
+    const copied = this.copied?.id === id && this.copied.text === text2 ? this.copied : null;
+    return b`<span class="lead">${label}:</span><div class="command" data-command><code>${text2}</code><swc-action-button size="s" quiet data-action="copy-command" accessible-label=${copied?.done ? "Copied" : "Copy command"} @click=${() => this.#copy(id, text2)}><swc-icon-copy slot="icon"></swc-icon-copy>${copied?.done ? "Copied" : "Copy"}</swc-action-button></div>${copied && !copied.done ? b`<span class="uncopied" role="alert" data-error="copy">Couldn’t copy. Select the command and copy it.</span>` : A}`;
+  }
+  async #copy(id, text2) {
+    this.copied = { id, text: text2, done: await copyText(text2) };
+  }
+  #open(id) {
+    this.dispatchEvent(
+      new CustomEvent("show-surface", { detail: { id }, bubbles: true, composed: true })
+    );
+  }
+  #row(row) {
+    const depth = indent(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.split(/(?<=\/)/).map((part2, i26) => i26 ? b`<wbr>${part2}` : part2)}</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 = surfaces[section.id];
+    const rows = section.rows.length > 0;
+    const open = rows && (this.expanded[section.id] ?? flag !== null);
+    const list5 = `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 ? list5 : 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=${list5} aria-label=${section.label}>${c(
+      section.rows,
+      (row, i26) => row.id ?? i26,
+      (row) => this.#row(row)
+    )}</ul>` : A}
+    </li>`;
+  }
+  render() {
+    const snapshot2 = this.model?.monitor.snapshot();
+    return b`<div class="bar">
+        <span class="heading"><strong>Live monitor</strong><span>${snapshot2 ? `Updated ${new Date(snapshot2.updatedAt).toISOString().slice(11, 19)} UTC` : "No data"}</span></span>
+        <swc-action-button size="s" quiet @click=${() => this.model?.monitor.resync()}><swc-icon-refresh slot="icon"></swc-icon-refresh>Re-sync</swc-action-button>
+      </div>
+      <div class="body">
+        ${snapshot2 ? b`<div class="vitals">${snapshot2.vitals.map((vital) => this.#vital(vital))}</div>
+              ${snapshot2.alerts.length ? b`<ul class="alerts" aria-label="Alerts">${snapshot2.alerts.map((alert) => this.#alert(alert))}</ul>` : A}
+              <ul class="sections" aria-label="Activity">${snapshot2.sections.map((section) => this.#section(section))}</ul>` : A}
+      </div>`;
+  }
+};
+
 // src/app/agents.ts
 function ordered(agents) {
   const cones = agents.filter((agent) => agent.kind === "cone");
   return cones.flatMap((cone) => [cone, ...agents.filter((agent) => agent.parentId === cone.id)]);
 }
+function creatable(model) {
+  return Boolean(model?.agent.createCone) && !watchOnly(model);
+}
+async function createCone(model, trigger2) {
+  const port = model.agent;
+  const create3 = port.createCone?.bind(port);
+  if (!create3) return void 0;
+  let created;
+  await prompt({
+    title: "New cone",
+    label: "Name",
+    action: "Create",
+    trigger: trigger2,
+    submit: async (name) => {
+      if (watchOnly(model)) return;
+      created = await create3(name);
+    }
+  });
+  if (created) port.select(created.id);
+  return created;
+}
+function fillShown(fill2) {
+  return fill2 >= 0.5;
+}
 var SliccAgents = class extends ModelElement {
   static properties = { ...ModelElement.properties, errors: { state: true } };
   constructor() {
@@ -10758,6 +11262,10 @@ var SliccAgents = class extends ModelElement {
       color: var(--swc-neutral-content-color-default);
       font-size: var(--swc-font-size-100);
     }
+    .actions {
+      display: flex;
+      padding: var(--swc-spacing-75) var(--swc-spacing-100) 0;
+    }
     ul {
       list-style: none;
       margin: 0;
@@ -10773,6 +11281,7 @@ var SliccAgents = class extends ModelElement {
       cursor: pointer;
     }
     li.scoop {
+      grid-template-areas: 'name unread fill drop' 'status unread fill drop' 'error error error error';
       padding-inline-start: calc(var(--swc-spacing-200) + var(--swc-spacing-300));
     }
     li:hover {
@@ -10820,12 +11329,21 @@ var SliccAgents = class extends ModelElement {
       min-width: 4ch;
       text-align: end;
     }
+    .fill[data-variant='notice'] {
+      color: var(--swc-notice-color-1000);
+      font-weight: var(--swc-bold-font-weight);
+    }
+    .fill[data-variant='negative'] {
+      color: var(--swc-negative-color-1000);
+      font-weight: var(--swc-bold-font-weight);
+    }
     swc-status-light {
       grid-area: status;
       justify-self: start;
     }
     .drop {
       grid-area: drop;
+      margin-block: calc(-1 * var(--swc-spacing-100));
       visibility: hidden;
     }
     li:hover .drop,
@@ -10929,8 +11447,8 @@ var SliccAgents = class extends ModelElement {
       return;
     }
     const current = port.active();
-    const stale = current === agent.id || !port.list().some((candidate) => candidate.id === current);
-    if (stale && agent.parentId) port.select(agent.parentId);
+    const stale2 = current === agent.id || !port.list().some((candidate) => candidate.id === current);
+    if (stale2 && agent.parentId) port.select(agent.parentId);
     await this.updateComplete;
     this.focus();
   }
@@ -10977,7 +11495,8 @@ var SliccAgents = class extends ModelElement {
     const error = this.errors[agent.id];
     const model = this.model;
     const title = agent.kind === "cone" ? agentTitle(model, agent) : null;
-    const label = `${coneLabel(model, agent)}: ${statusLabel[agent.status]}, ${percent(agent.contextFill)} context${agent.unread ? `, ${agent.unread} unread` : ""}${error ? `. ${error}` : ""}`;
+    const unread = selected ? 0 : agent.unread;
+    const label = `${coneLabel(model, agent)}: ${statusLabel[agent.status]}, ${percent(agent.contextFill)} context${unread ? `, ${unread} unread` : ""}${error ? `. ${error}` : ""}`;
     return b`<li
       role="option"
       class=${agent.kind}
@@ -10991,19 +11510,32 @@ var SliccAgents = class extends ModelElement {
     >
       <span class="name">${agent.name}</span>
       ${title === null ? A : b`<span class="title">${title || untitled}</span>`}
-      ${agent.unread ? b`<swc-badge class="unread" size="s" variant="accent">${agent.unread}</swc-badge>` : A}
-      <span class="fill">${percent(agent.contextFill)}</span>
+      ${unread ? b`<swc-badge class="unread" size="s" variant="accent">${unread}</swc-badge>` : A}
+      ${fillShown(agent.contextFill) ? b`<span class="fill" data-variant=${meterVariant2(agent.contextFill)}>${percent(agent.contextFill)}</span>` : A}
       ${statusLight(agent.status)}
       ${this.#dropButton(agent)}
       ${this.#deleteButton(agent)}
       ${error ? b`<span class="error">${error}</span>` : A}
     </li>`;
   }
+  async #newCone(trigger2) {
+    if (!await createCone(this.model, trigger2)) return;
+    await this.updateComplete;
+    this.focus();
+  }
+  #actions() {
+    if (!creatable(this.model)) return A;
+    return b`<div class="actions">
+      <swc-action-button size="s" quiet data-action="new-cone" @click=${(event2) => void this.#newCone(event2.currentTarget)}>
+        <swc-icon-add slot="icon"></swc-icon-add>New cone
+      </swc-action-button>
+    </div>`;
+  }
   render() {
     const agents = ordered(this.model?.agent.list() ?? []);
     const active = this.model?.agent.active() ?? "";
     const errors = Object.values(this.errors);
-    return b`<ul role="listbox" aria-label="Cones and scoops" @keydown=${this.#keydown}>
+    return b`${this.#actions()}<ul role="listbox" aria-label="Cones and scoops" @keydown=${this.#keydown}>
         ${agents.map((agent) => this.#row(agent, active))}
       </ul>
       <div class="sr" role="status">${errors.at(-1) ?? ""}</div>`;
@@ -11025,7 +11557,7 @@ var i17 = e2(class extends i3 {
 
 // node_modules/lit-html/static.js
 var a12 = /* @__PURE__ */ Symbol.for("");
-var o51 = (t90) => {
+var o53 = (t90) => {
   if (t90?.r === a12) return t90?._$litStatic$;
 };
 var s9 = (t90) => ({ _$litStatic$: t90, r: a12 });
@@ -11036,7 +11568,7 @@ var n28 = (t90) => (r40, ...e120) => {
   const n37 = [], u27 = [];
   let c28, $6 = 0, f11 = false;
   for (; $6 < a23; ) {
-    for (c28 = r40[$6]; $6 < a23 && void 0 !== (i26 = e120[$6], s19 = o51(i26)); ) c28 += s19 + r40[++$6], f11 = true;
+    for (c28 = r40[$6]; $6 < a23 && void 0 !== (i26 = e120[$6], s19 = o53(i26)); ) c28 += s19 + r40[++$6], f11 = true;
     $6 !== a23 && u27.push(i26), n37.push(c28), $6++;
   }
   if ($6 === a23 && n37.push(r40[a23]), f11) {
@@ -11169,151 +11701,189 @@ async function grammar(kind, name, version2, remote = grammarCdn, importer = (ur
   throw failure2;
 }
 
+// src/app/models.ts
+var asked = /* @__PURE__ */ new WeakMap();
+var switched = /* @__PURE__ */ new WeakMap();
+var settling = /* @__PURE__ */ new WeakSet();
+function stale(model, id, offered) {
+  if (offered.some((option2) => option2.id === id)) return false;
+  const provider = id.split("/")[0];
+  return !model.settings.accounts().some((account) => account.id === provider && account.status === "connected");
+}
+function fallbackModel(options) {
+  const offered = chatModels(options);
+  return offered.find((option2) => option2.default) ?? offered[0];
+}
+function controls(model) {
+  const state3 = model.follow?.state();
+  return !state3 || !!state3.access.control && state3.link === "connected";
+}
+function settleModels(model) {
+  if (settling.has(model) || !controls(model)) return;
+  settling.add(model);
+  try {
+    settle(model);
+  } finally {
+    settling.delete(model);
+  }
+}
+function settle(model) {
+  const offered = chatModels(model.settings.models());
+  const pick = fallbackModel(offered);
+  if (!pick) return;
+  const requests = asked.get(model) ?? /* @__PURE__ */ new Map();
+  asked.set(model, requests);
+  const ask = (key2, from, apply2) => {
+    if (!stale(model, from, offered)) {
+      requests.delete(key2);
+      return;
+    }
+    if (requests.get(key2) === pick.id) return;
+    requests.set(key2, pick.id);
+    apply2();
+  };
+  for (const agent of model.agent.list())
+    if (!agent.frozen)
+      ask(`agent:${agent.id}`, agent.model, () => model.agent.setModel(agent.id, pick.id));
+  ask("settings", model.settings.get().model, () => {
+    switched.set(model, { to: pick });
+    model.settings.update({ model: pick.id });
+  });
+}
+function modelSwitch(model) {
+  return switched.get(model);
+}
+function forgetSwitch(model) {
+  switched.delete(model);
+}
+
 // node_modules/@adobe/spectrum-wc-icons/dist/Cloud.js
-function e80() {
+function e82() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M15.407 17H3.717a3.456 3.456 0 0 1-3.45-3.452 3.45 3.45 0 0 1 2.323-3.25 4 4 0 0 1-.065-.702c0-2.18 1.81-3.953 4.034-3.953q.42 0 .831.087c.637-1.958 2.476-3.346 4.589-3.346a4.85 4.85 0 0 1 4.844 4.844q0 .659-.187 1.298a4.32 4.32 0 0 1 3.103 4.142A4.337 4.337 0 0 1 15.407 17M6.559 7.143c-1.397 0-2.534 1.1-2.534 2.453q.001.5.206.965a.75.75 0 0 1-.637 1.051 1.95 1.95 0 0 0-1.828 1.936c0 1.076.876 1.952 1.952 1.952h11.689a2.835 2.835 0 0 0 2.832-2.832 2.826 2.826 0 0 0-2.682-2.814.75.75 0 0 1-.625-1.095c.26-.5.39-1.015.39-1.531 0-1.844-1.5-3.344-3.344-3.344-1.662 0-3.08 1.252-3.297 2.912a.75.75 0 0 1-1.054.585 2.6 2.6 0 0 0-1.068-.238"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-cloud.js
-var o52 = class extends a10 {
+var o54 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e80())}</span>
+      <span class="swc-Icon">${o16(e82())}</span>
     `;
   }
 };
-e25("swc-icon-cloud", o52);
+e25("swc-icon-cloud", o54);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/CloudStateError.js
-function e81() {
+function e83() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M15.5 9.021a4.5 4.5 0 1 0 0 9c2.485 0 4.48-2.015 4.48-4.5s-1.995-4.5-4.48-4.5m.95 6.895c0 .472-.425.855-.95.855s-.95-.383-.95-.855v-.289c0-.472.425-.856.95-.856s.95.384.95.856zm-.075-2.495c0 .414-.392.75-.875.75s-.875-.336-.875-.75v-2.65c0-.414.392-.75.875-.75s.875.336.875.75z"/><path fill="var(--swc-icon-color, currentColor)" d="M9.25 16.998H3.718a3.455 3.455 0 0 1-3.452-3.451 3.45 3.45 0 0 1 2.324-3.25 4 4 0 0 1-.065-.703c0-2.18 1.81-3.952 4.034-3.952q.42 0 .83.087c.638-1.958 2.477-3.347 4.59-3.347a4.826 4.826 0 0 1 4.818 4.35.75.75 0 1 1-1.492.15 3.33 3.33 0 0 0-3.326-3c-1.664 0-3.08 1.252-3.297 2.912a.752.752 0 0 1-1.054.586 2.6 2.6 0 0 0-1.07-.238c-1.396 0-2.533 1.1-2.533 2.452q.001.5.206.965a.75.75 0 0 1-.637 1.051 1.95 1.95 0 0 0-1.828 1.937c0 1.076.876 1.951 1.952 1.951H9.25a.75.75 0 0 1 0 1.5"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-cloud-state-error.js
-var o53 = class extends a10 {
+var o55 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e81())}</span>
+      <span class="swc-Icon">${o16(e83())}</span>
     `;
   }
 };
-e25("swc-icon-cloud-state-error", o53);
+e25("swc-icon-cloud-state-error", o55);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/CloudStateOnline.js
-function e82() {
+function e84() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M9.25 17.002H3.718A3.455 3.455 0 0 1 .266 13.55 3.45 3.45 0 0 1 2.59 10.3a4 4 0 0 1-.065-.703c0-2.18 1.81-3.952 4.034-3.952q.42 0 .83.087c.638-1.959 2.477-3.347 4.59-3.347a4.85 4.85 0 0 1 4.843 4.844q0 .464-.093.92a.745.745 0 0 1-.885.583.75.75 0 0 1-.584-.884q.061-.307.062-.619c0-1.844-1.5-3.344-3.343-3.344-1.664 0-3.08 1.252-3.297 2.912a.752.752 0 0 1-1.054.586 2.6 2.6 0 0 0-1.07-.238c-1.396 0-2.533 1.1-2.533 2.452q.001.5.206.965a.75.75 0 0 1-.637 1.051 1.95 1.95 0 0 0-1.828 1.937c0 1.076.876 1.951 1.952 1.951H9.25a.75.75 0 0 1 0 1.5"/><path fill="var(--swc-icon-color, currentColor)" d="M18.503 13.434a.75.75 0 0 1-.53-.22 4.88 4.88 0 0 0-3.472-1.442h-.006a4.87 4.87 0 0 0-3.462 1.433.75.75 0 1 1-1.06-1.06 6.35 6.35 0 0 1 4.522-1.873h.007c1.712.002 3.32.67 4.531 1.881a.75.75 0 0 1-.53 1.28"/><path fill="var(--swc-icon-color, currentColor)" d="M16.384 15.544a.75.75 0 0 1-.53-.22 1.916 1.916 0 0 0-2.706-.004.75.75 0 1 1-1.06-1.06 3.4 3.4 0 0 1 2.41-.998h.003a3.4 3.4 0 0 1 2.413 1.002.75.75 0 0 1-.53 1.28"/><path fill="var(--swc-icon-color, currentColor)" d="M15.136 17.64a.897.897 0 0 1-1.27.001.9.9 0 1 1 1.27-.001" data-name="Path 1027855"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-cloud-state-online.js
-var o54 = class extends a10 {
+var o56 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e82())}</span>
+      <span class="swc-Icon">${o16(e84())}</span>
     `;
   }
 };
-e25("swc-icon-cloud-state-online", o54);
+e25("swc-icon-cloud-state-online", o56);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/CloudStateSlowConnection.js
-function e83() {
+function e85() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M8.946 16.998H3.718a3.455 3.455 0 0 1-3.452-3.451 3.45 3.45 0 0 1 2.324-3.25 4 4 0 0 1-.065-.703c0-2.18 1.81-3.952 4.034-3.952q.42 0 .83.087c.638-1.958 2.477-3.347 4.59-3.347a4.826 4.826 0 0 1 4.818 4.35.75.75 0 1 1-1.492.15 3.33 3.33 0 0 0-3.326-3c-1.664 0-3.08 1.252-3.297 2.912a.752.752 0 0 1-1.054.586 2.6 2.6 0 0 0-1.07-.238c-1.396 0-2.533 1.1-2.533 2.452q.001.5.206.965a.75.75 0 0 1-.637 1.051 1.95 1.95 0 0 0-1.828 1.937c0 1.076.876 1.951 1.952 1.951h5.228a.75.75 0 0 1 0 1.5M19 16.271v-7a.75.75 0 0 0-1.5 0v7a.75.75 0 0 0 1.5 0m-3 0v-5a.75.75 0 0 0-1.5 0v5a.75.75 0 0 0 1.5 0"/><path fill="var(--swc-icon-color, currentColor)" d="M13 16.271v-3a.75.75 0 0 0-1.5 0v3a.75.75 0 0 0 1.5 0"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-cloud-state-slow-connection.js
-var o55 = class extends a10 {
+var o57 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
       <span class="swc-Icon">
-        ${o16(e83())}
+        ${o16(e85())}
       </span>
     `;
   }
 };
-e25("swc-icon-cloud-state-slow-connection", o55);
-
-// node_modules/@adobe/spectrum-wc-icons/dist/Copy.js
-function e84() {
-  return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M11.75 18h-7.5C3.01 18 2 16.99 2 15.75v-7.5C2 7.01 3.01 6 4.25 6a.75.75 0 0 1 0 1.5.75.75 0 0 0-.75.75v7.5c0 .413.337.75.75.75h7.5c.413 0 .75-.337.75-.75a.75.75 0 0 1 1.5 0c0 1.24-1.01 2.25-2.25 2.25m-5-13A.75.75 0 0 1 6 4.25C6 3.01 7.01 2 8.25 2a.75.75 0 0 1 0 1.5.75.75 0 0 0-.75.75.75.75 0 0 1-.75.75M13 3.5h-2A.75.75 0 0 1 11 2h2a.75.75 0 0 1 0 1.5"/><path fill="var(--swc-icon-color, currentColor)" d="M13 14h-2a.75.75 0 0 1 0-1.5h2a.75.75 0 0 1 0 1.5m2.75 0a.75.75 0 0 1 0-1.5c.413 0 .75-.337.75-.75a.75.75 0 0 1 1.5 0c0 1.24-1.01 2.25-2.25 2.25m1.5-9a.75.75 0 0 1-.75-.75.75.75 0 0 0-.75-.75.75.75 0 0 1 0-1.5C16.99 2 18 3.01 18 4.25a.75.75 0 0 1-.75.75m0 4.75A.75.75 0 0 1 16.5 9V7A.75.75 0 0 1 18 7v2a.75.75 0 0 1-.75.75m-10.5 0A.75.75 0 0 1 6 9V7a.75.75 0 0 1 1.5 0v2a.75.75 0 0 1-.75.75M8.25 14C7.01 14 6 12.99 6 11.75a.75.75 0 0 1 1.5 0c0 .413.337.75.75.75a.75.75 0 0 1 0 1.5"/></svg>';
-}
-
-// node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-copy.js
-var o56 = class extends a10 {
-  static get styles() {
-    return [t40];
-  }
-  render() {
-    return b`
-      <span class="swc-Icon">${o16(e84())}</span>
-    `;
-  }
-};
-e25("swc-icon-copy", o56);
+e25("swc-icon-cloud-state-slow-connection", o57);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/InfoCircle.js
-function e85() {
+function e86() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M10 18.75c-4.825 0-8.75-3.925-8.75-8.75S5.175 1.25 10 1.25s8.75 3.925 8.75 8.75-3.925 8.75-8.75 8.75m0-16c-3.998 0-7.25 3.252-7.25 7.25s3.252 7.25 7.25 7.25 7.25-3.252 7.25-7.25S13.998 2.75 10 2.75"/><path fill="var(--swc-icon-color, currentColor)" d="M10 5.26a.9.9 0 0 1 .627.229c.33.365.33.921 0 1.286a.87.87 0 0 1-.626.235.85.85 0 0 1-.633-.248.86.86 0 0 1-.242-.627.88.88 0 0 1 .228-.64A.86.86 0 0 1 10 5.26m0 9.803a.75.75 0 0 1-.75-.75V9.478a.75.75 0 0 1 1.5 0v4.835a.75.75 0 0 1-.75.75"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-info-circle.js
-var o57 = class extends a10 {
+var o58 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e85())}</span>
+      <span class="swc-Icon">${o16(e86())}</span>
     `;
   }
 };
-e25("swc-icon-info-circle", o57);
+e25("swc-icon-info-circle", o58);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/Visibility.js
-function e86() {
+function e87() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M10.034 16.662C5.143 16.662.75 12.273.75 10.2c0-1.685 2.598-4.55 5.347-5.898A8.95 8.95 0 0 1 9.99 3.35c5.158 0 9.26 4.919 9.26 6.85 0 2.072-4.36 6.46-9.216 6.46M10 4.85a7.44 7.44 0 0 0-3.24.797C4.155 6.923 2.25 9.397 2.25 10.2c0 1.144 3.68 4.96 7.784 4.96 4.069 0 7.716-3.816 7.716-4.96 0-1.05-3.481-5.35-7.75-5.35m-3.569.124h.01z"/><path fill="var(--swc-icon-color, currentColor)" d="M9.83 7.644c.222-.637-.474-1.26-1.1-1.01a3.5 3.5 0 0 0-1.283.88 3.565 3.565 0 0 0 4.697 5.315 3.54 3.54 0 0 0 1.317-1.833c.209-.684-.458-1.25-1.119-.976A1.904 1.904 0 0 1 9.85 8.943a1.88 1.88 0 0 1-.02-1.3"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-visibility.js
-var o58 = class extends a10 {
+var o59 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e86())}</span>
+      <span class="swc-Icon">${o16(e87())}</span>
     `;
   }
 };
-e25("swc-icon-visibility", o58);
+e25("swc-icon-visibility", o59);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/VisibilityOff.js
-function e87() {
+function e88() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M9.966 16.683C5.11 16.683.75 12.294.75 10.222c0-.92.864-2.36 2.201-3.668A.75.75 0 1 1 4 7.626c-1.31 1.281-1.75 2.32-1.75 2.596 0 1.144 3.647 4.96 7.716 4.96a7.3 7.3 0 0 0 1.863-.251.756.756 0 0 1 .917.534c.106.4-.134.81-.534.917-.756.2-1.512.3-2.246.3m6.638-2.839a.75.75 0 0 1-.506-1.304c1.14-1.042 1.652-1.982 1.652-2.317 0-.802-1.904-3.277-4.51-4.552a7.4 7.4 0 0 0-3.25-.798 7 7 0 0 0-1.905.28.75.75 0 1 1-.416-1.441A8.4 8.4 0 0 1 10 3.371a8.95 8.95 0 0 1 3.907.954c2.742 1.343 5.343 4.21 5.343 5.896 0 .919-.8 2.199-2.14 3.424a.75.75 0 0 1-.506.197"/><path fill="var(--swc-icon-color, currentColor)" d="m18.78 17.741-5.778-5.778c.204-.296.358-.615.46-.946.208-.684-.46-1.25-1.12-.976-.495.206-.946.14-1.18.081L9.788 8.75a1.9 1.9 0 0 1 .04-1.085c.223-.637-.473-1.26-1.1-1.01a3.5 3.5 0 0 0-.677.358L2.28 1.241a.75.75 0 1 0-1.06 1.06l16.5 16.5a.747.747 0 0 0 1.06 0 .75.75 0 0 0 0-1.06M8.205 12.998a3.53 3.53 0 0 0 2.319.484L6.542 9.501a3.56 3.56 0 0 0 1.663 3.497"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-visibility-off.js
-var o59 = class extends a10 {
+var o60 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e87())}</span>
+      <span class="swc-Icon">${o16(e88())}</span>
     `;
   }
 };
-e25("swc-icon-visibility-off", o59);
+e25("swc-icon-visibility-off", o60);
 
 // node_modules/@adobe/spectrum-wc/dist/link.css
 var link_default = '/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the "License");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n * Standalone link presentation for native `<a href>` elements.\n *\n * Default anchor appearance inside `.swc-Typography--prose` and\n * `.swc-Typography--links` ships with `typography.css` (generated). Import this\n * stylesheet when authors need explicit BEM modifiers on anchors.\n *\n */\n\n.swc-Link {\n  inline-size: -moz-fit-content;\n  inline-size: fit-content;\n  font-family: var(--swc-sans-font-family-stack);\n  font-size: var(--swc-font-size-100);\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1.30;\n  color: var(--swc-link-text-color-default, var(--swc-accent-color-900));\n  -webkit-text-decoration: underline;\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-underline-offset: 1px;\n  transition: color 130ms ease-in-out;\n\n  &:hover {\n    color: var(--swc-link-text-color-hover, var(--swc-accent-color-1000));\n  }\n\n  &:active {\n    color: var(--swc-link-text-color-down, var(--swc-accent-color-1000));\n  }\n\n  &:focus-visible {\n    color: var(--swc-link-text-color-focus, var(--swc-accent-color-1000));\n    border-radius: 4px;\n    outline: 2px solid var(--swc-link-focus-indicator-color, var(--swc-blue-800));\n    outline-offset: 2px;\n  }\n\n  &:lang(ja),\n  &:lang(zh),\n  &:lang(ko) {\n    line-height: 1.50;\n  }\n}\n\n.swc-Link--standalone {\n  font-weight: 500;\n}\n\n.swc-Link--secondary {\n  --swc-link-text-color-default: var(--swc-gray-800);\n  --swc-link-text-color-hover: var(--swc-gray-900);\n  --swc-link-text-color-down: var(--swc-gray-900);\n  --swc-link-text-color-focus: var(--swc-gray-900);\n}\n\n.swc-Link--staticWhite {\n  --swc-link-text-color-default: var(--swc-white);\n  --swc-link-text-color-hover: var(--swc-white);\n  --swc-link-text-color-down: var(--swc-white);\n  --swc-link-text-color-focus: var(--swc-white);\n  --swc-link-focus-indicator-color: var(--swc-white);\n}\n\n.swc-Link--staticBlack {\n  --swc-link-text-color-default: var(--swc-black);\n  --swc-link-text-color-hover: var(--swc-black);\n  --swc-link-text-color-down: var(--swc-black);\n  --swc-link-text-color-focus: var(--swc-black);\n  --swc-link-focus-indicator-color: var(--swc-black);\n}\n\n.swc-Link--quiet.swc-Link--standalone {\n  -webkit-text-decoration: none;\n  text-decoration: none;\n}\n\n.swc-Link--quiet.swc-Link--standalone:hover {\n  -webkit-text-decoration: underline;\n  text-decoration: underline;\n}\n';
@@ -11986,76 +12556,6 @@ function qrCode(text2, label) {
   return b`<svg class="qr" viewBox="0 0 ${size4} ${size4}" role="img" aria-label=${label} shape-rendering="crispEdges" data-qr><rect width=${size4} height=${size4} fill="#fff"></rect><path d=${path} fill="#000"></path></svg>`;
 }
 
-// src/app/reach.ts
-var command = "curl -fsSL https://get.sliccy.ai/slicc | sh";
-var startCommand = "slicc";
-var nodeCommand = "npx sliccy@next";
-var reachStyles = i`
-  .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 {
-    flex: 1;
-    min-width: 0;
-    overflow-wrap: break-word;
-    word-break: normal;
-    font-family: var(--swc-code-font-family-stack);
-    font-size: var(--swc-font-size-75);
-    color: var(--swc-code-color);
-    user-select: all;
-  }
-  .commands {
-    display: grid;
-    gap: var(--swc-spacing-100);
-  }
-  .commands p {
-    margin: 0;
-    font-size: var(--swc-font-size-75);
-    color: var(--swc-neutral-subdued-content-color-default);
-  }
-`;
-function block(text2, copied, copy, first2 = false) {
-  const done2 = copied === text2;
-  return b`<div class="command" data-command=${text2}>
-      <code>${breakable(text2)}</code>
-      <swc-action-button size="s" quiet data-action=${first2 ? "copy-command" : A} accessible-label=${done2 ? "Copied" : `Copy ${text2}`} @click=${() => copy(text2)}>
-        <swc-icon-copy slot="icon"></swc-icon-copy>${done2 ? "Copied" : "Copy"}
-      </swc-action-button>
-    </div>`;
-}
-function breakable(text2) {
-  return text2.split("/").map(
-    (part2, index, parts2) => b`${part2}${index < parts2.length - 1 ? b`/<wbr />` : A}`
-  );
-}
-function reach({ intro, extensionUrl, copied, uncopied, copy }) {
-  return b`<p>${intro}</p>
-    ${extensionUrl ? b`<p><a class="swc-Link" href=${extensionUrl} target="_blank" rel="noopener noreferrer" data-action="install-extension">Install the Chrome extension</a></p>` : A}
-    <p>To run slicc, enter this in a terminal:</p>
-    <div class="commands">
-      ${block(command, copied, copy, true)}
-      ${block(startCommand, copied, copy)}
-    </div>
-    <div class="commands" data-commands="node">
-      <p>With Node:</p>
-      ${block(nodeCommand, copied, copy)}
-    </div>
-    ${uncopied ? b`<div class="error" role="alert" data-error="copy"><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>Couldn’t copy. Select the command and copy it.</span></div>` : A}`;
-}
-async function copyText(text2) {
-  try {
-    await globalThis.navigator.clipboard.writeText(text2);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
 // src/app/tray.ts
 var connectionVariant = {
   live: "positive",
@@ -13296,7 +13796,7 @@ var SliccNetwork = class extends ModelElement {
 };
 
 // src/app/panels.ts
-var surfaces = [
+var surfaces2 = [
   {
     id: "agents",
     title: "Agents",
@@ -13410,7 +13910,7 @@ function screenClass(width) {
   if (width < 1200) return "tablet";
   return "desktop";
 }
-function surface(id, items = surfaces) {
+function surface(id, items = surfaces2) {
   return items.find((candidate) => candidate.id === id);
 }
 function create(tag3, model, params = {}) {
@@ -13557,7 +14057,7 @@ function openTerminal(dock, info, screen) {
   }
   return id;
 }
-function defaultLayout(dock, screen, agent, items = surfaces, terminals = []) {
+function defaultLayout(dock, screen, agent, items = surfaces2, terminals = []) {
   dock.clear();
   const order = ["center", "left", "right"];
   for (const side of order) {
@@ -14488,11 +14988,11 @@ var TerminalPanels = class {
   }
   #ask(info, trigger2) {
     const body4 = "The shell and anything running in it stop. You can\u2019t undo this.";
-    const asked = this.#asking.then(
+    const asked2 = this.#asking.then(
       () => confirm({ title: `Close ${info.title}?`, body: body4, action: "Close", trigger: trigger2 })
     );
-    this.#asking = asked;
-    return asked;
+    this.#asking = asked2;
+    return asked2;
   }
   activated(id) {
     if (terminalOf(id) !== null) this.#recent = id;
@@ -17206,7 +17706,7 @@ ${swc_default}`));
 var t47 = i`:host{display:block}*{box-sizing:border-box}.swc-Divider{--_swc-divider-thickness: var(--swc-divider-thickness, 2px);inline-size:100%;block-size:var(--_swc-divider-thickness);background-color:var(--swc-divider-background-color, var(--swc-gray-200));border-radius:var(--_swc-divider-thickness)}:host([size=\"s\"]){--swc-divider-thickness: 1px}:host([size=\"l\"]){--swc-divider-thickness: 4px;--swc-divider-background-color: var(--swc-gray-800)}.swc-Divider:not(.swc-Divider--vertical){min-inline-size:min(100%,200px)}:host([vertical]){align-self:stretch}.swc-Divider--vertical{inline-size:var(--_swc-divider-thickness);block-size:100%;min-block-size:min(100%,200px)}.swc-Divider--staticWhite{--swc-divider-background-color: rgba(255, 255, 255, .14)}.swc-Divider--staticWhite:where(.swc-Divider--sizeL){--swc-divider-background-color: rgba(255, 255, 255, .85)}.swc-Divider--staticBlack{--swc-divider-background-color: rgba(0, 0, 0, .12)}.swc-Divider--staticBlack:where(.swc-Divider--sizeL){--swc-divider-background-color: rgba(0, 0, 0, .84)}@media(forced-colors:active){.swc-Divider{--swc-divider-background-color: CanvasText}}`;
 
 // node_modules/@adobe/spectrum-wc-core/dist/components/divider/Divider.types.js
-var e88 = [
+var e89 = [
   "s",
   "m",
   "l"
@@ -17215,7 +17715,7 @@ var t48 = ["white", "black"];
 
 // node_modules/@adobe/spectrum-wc-core/dist/components/divider/Divider.base.js
 var s10;
-var c18 = class extends i12(i9, { validSizes: e88 }) {
+var c18 = class extends i12(i9, { validSizes: e89 }) {
   constructor(...e120) {
     super(...e120), this.vertical = false;
   }
@@ -17274,7 +17774,7 @@ e25("swc-divider", a13);
 var t49 = i`:host([indeterminate]) .swc-LinearProgress-fill{inline-size:100%;min-inline-size:0;transform-origin:left;transition:none;animation:indeterminate-loop-ltr 1s cubic-bezier(.45,0,.4,1) infinite;will-change:transform;&:dir(rtl){animation-name:indeterminate-loop-rtl}}@keyframes indeterminate-loop-ltr{0%{transform:translate(-70%) scaleX(.7)}to{transform:translate(100%) scaleX(.7)}}@keyframes indeterminate-loop-rtl{0%{transform:translate(100%) scaleX(.7)}to{transform:translate(-70%) scaleX(.7)}}@media(prefers-reduced-motion:reduce){:host([indeterminate]) .swc-LinearProgress-fill{animation-duration:15s;animation-timing-function:linear}}`;
 
 // node_modules/@adobe/spectrum-wc-core/dist/components/progress-bar/ProgressBar.base.js
-var o60 = class extends m3(i12(i9, {
+var o61 = class extends m3(i12(i9, {
   validSizes: s6,
   defaultSize: "m"
 })) {
@@ -17285,10 +17785,10 @@ var o60 = class extends m3(i12(i9, {
 e24([n({
   type: Boolean,
   reflect: true
-})], o60.prototype, "indeterminate", void 0);
+})], o61.prototype, "indeterminate", void 0);
 
 // node_modules/@adobe/spectrum-wc/dist/components/progress-bar/ProgressBar.js
-var o61 = class extends o60 {
+var o62 = class extends o61 {
   static get styles() {
     return [t26, t49];
   }
@@ -17337,7 +17837,7 @@ var o61 = class extends o60 {
 };
 
 // node_modules/@adobe/spectrum-wc/dist/components/progress-bar/swc-progress-bar.js
-e25("swc-progress-bar", o61);
+e25("swc-progress-bar", o62);
 
 // node_modules/@adobe/spectrum-wc/dist/patterns/ai-toolkit/conversation-turn/conversation-turn.js
 var t50 = i`:host{display:block;inline-size:100%}:host(:focus-visible){outline:none}*,*:before,*:after{box-sizing:border-box}.swc-ConversationTurn{display:flex;inline-size:100%;min-inline-size:0}.swc-ConversationTurn>slot{display:flex;flex-direction:column;gap:8px;inline-size:100%;min-inline-size:0}:host([type=\"user\"]) .swc-ConversationTurn{justify-content:flex-end}:host([type=\"user\"]) .swc-ConversationTurn>slot{align-items:flex-end}:host([type=\"system\"]) .swc-ConversationTurn{justify-content:flex-start}:host([type=\"system\"]) .swc-ConversationTurn>slot{align-items:stretch}:host([type=\"system\"]) ::slotted(*){flex:1 1 100%;min-inline-size:0;max-inline-size:100%}:host(:focus-visible) ::slotted(*){outline:2px solid var(--swc-blue-800);outline-offset:2px}`;
@@ -17380,7 +17880,7 @@ e12([n({
 e25("swc-conversation-turn", a14);
 
 // node_modules/@adobe/spectrum-wc/dist/components/ui-icons/ui-icons.types.js
-var e89 = [
+var e90 = [
   50,
   75,
   100,
@@ -17400,7 +17900,7 @@ function n29(e120) {
 }
 function r26(t90, r40) {
   if (!t90) return;
-  let i26 = n29(r40), a23 = e89.filter((e120) => t90[e120] !== void 0);
+  let i26 = n29(r40), a23 = e90.filter((e120) => t90[e120] !== void 0);
   if (a23.length !== 0) return t90[a23.reduce((e120, t91) => Math.abs(t91 - i26) < Math.abs(e120 - i26) ? t91 : e120)];
 }
 
@@ -18024,7 +18524,7 @@ e12([n({
 e25("swc-ui-icon", l16);
 
 // node_modules/@adobe/spectrum-wc/dist/utils/id.js
-function e90(e120) {
+function e91(e120) {
   return `${e120}-${Array.from(crypto.getRandomValues(new Uint8Array(4)), (e121) => `0${(e121 & 255).toString(16)}`.slice(-2)).join("")}`;
 }
 
@@ -18034,7 +18534,7 @@ var t65 = i`:host{display:block}*,*:before,*:after{box-sizing:border-box}.swc-Me
 // node_modules/@adobe/spectrum-wc/dist/patterns/ai-toolkit/message-sources/MessageSources.js
 var c19 = class extends i9 {
   constructor(...e120) {
-    super(...e120), this.panelId = e90("swc-sources-panel"), this.toggleId = e90("swc-message-sources-toggle"), this.sourceLinks = [], this.open = false, this.label = "Sources", this.accessibleLabel = "";
+    super(...e120), this.panelId = e91("swc-sources-panel"), this.toggleId = e91("swc-message-sources-toggle"), this.sourceLinks = [], this.open = false, this.label = "Sources", this.accessibleLabel = "";
   }
   static get styles() {
     return [t65];
@@ -18169,7 +18669,7 @@ var a15 = () => b`
     <circle cx="4" cy="4" r="4" fill="currentColor" />
   </svg>
 `;
-var o62 = () => b`
+var o63 = () => b`
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
     <circle cx="4" cy="4" r="3.5" fill="none" stroke="currentColor" />
   </svg>
@@ -18229,7 +18729,7 @@ var h6 = class extends i9 {
     return this._readLabel();
   }
   constructor() {
-    super(), this._toggleId = e90("swc-response-status-step-toggle"), this._detailId = e90("swc-response-status-step-detail"), this.status = "active", this.open = false, this._hasDescription = false, this._labelText = "", this._overflows = false, this._lastActiveLabel = "", new t2(this, {
+    super(), this._toggleId = e91("swc-response-status-step-toggle"), this._detailId = e91("swc-response-status-step-detail"), this.status = "active", this.open = false, this._hasDescription = false, this._labelText = "", this._overflows = false, this._lastActiveLabel = "", new t2(this, {
       config: {
         attributes: true,
         attributeFilter: ["slot"],
@@ -18312,7 +18812,7 @@ var h6 = class extends i9 {
           class="swc-ResponseStatusStep-icon swc-ResponseStatusStep-icon--active"
           aria-hidden="true"
         >
-          ${o62()}
+          ${o63()}
         </swc-icon>
       `);
   }
@@ -18386,7 +18886,7 @@ e12([n({
 e25("swc-response-status-step", h6);
 
 // node_modules/@adobe/spectrum-wc/dist/patterns/ai-toolkit/pixel-loader/data.js
-function e91(e120, t90) {
+function e92(e120, t90) {
   let n37 = Array.from(new Set(e120.map(([, e121]) => e121))).sort((e121, t91) => t91 - e121), r40 = Array(e120.length).fill(0), i26 = 0;
   return n37.forEach((n38) => {
     let a23 = e120.reduce((e121, t91, r41) => (t91[1] === n38 && e121.push(r41), e121), []);
@@ -18396,7 +18896,7 @@ function e91(e120, t90) {
   }), r40;
 }
 function t68(t90, n37 = {}) {
-  let { staggerInterval: r40 = 2, rowOffset: i26 = 0 } = n37, a23 = e91(t90, r40);
+  let { staggerInterval: r40 = 2, rowOffset: i26 = 0 } = n37, a23 = e92(t90, r40);
   return t90.map(([e120, t91], n38) => ({
     col: e120,
     row: t91 + i26,
@@ -18539,7 +19039,7 @@ var a16 = t68([
   [5, 0],
   [6, 0]
 ], { staggerInterval: 1 });
-var o63 = t68([
+var o64 = t68([
   [6, 6],
   [5, 5],
   [1, 4],
@@ -19094,7 +19594,7 @@ var N = {
   brush: r30,
   eye: i19,
   hourglass: a16,
-  mag: o63,
+  mag: o64,
   crop: s12,
   flower: c21,
   image: l17,
@@ -19185,13 +19685,13 @@ var F = {
 };
 
 // node_modules/@adobe/spectrum-wc/dist/patterns/ai-toolkit/pixel-loader/animation.js
-var e92 = 30;
-var t69 = (t90) => t90 * e92 / 1e3;
+var e93 = 30;
+var t69 = (t90) => t90 * e93 / 1e3;
 var n32 = 13;
 var r31 = 12;
 var i20 = t69(1400);
 var a17 = t69(150);
-var o64 = t69(150);
+var o65 = t69(150);
 var s13 = 0.1;
 var c22 = t69(230);
 var l18 = 0.3;
@@ -19218,7 +19718,7 @@ function v8(e120) {
   return t90 + n32 + i20 + r31;
 }
 function y4(t90) {
-  return v8(t90) / e92 * 1e3;
+  return v8(t90) / e93 * 1e3;
 }
 function b8(e120, t90) {
   return Math.min(1, Math.max(0, e120 / t90));
@@ -19263,7 +19763,7 @@ function S2(e120, t90) {
   }), x3(o91);
 }
 function C3(e120, t90) {
-  let i26 = e120.stagger + n32 - o64, u27 = i26 - a17, d22 = _4(e120), f11 = d22 + c22;
+  let i26 = e120.stagger + n32 - o65, u27 = i26 - a17, d22 = _4(e120), f11 = d22 + c22;
   return x3([
     {
       offset: 0,
@@ -19335,7 +19835,7 @@ function k2(e120) {
   return t90 + E2 + D3 + t90 + E2;
 }
 function A4(t90) {
-  return k2(t90) / e92 * 1e3;
+  return k2(t90) / e93 * 1e3;
 }
 function j2(e120, t90, n37) {
   let r40 = O2(t90), i26 = r40.indexOf(e120.row), a23 = (r40.length - 1) * T4 + E2, o91 = i26 * T4, s19 = a23 + D3 + i26 * T4;
@@ -19374,9 +19874,9 @@ function j2(e120, t90, n37) {
 var M2 = "0 0px";
 
 // node_modules/@adobe/spectrum-wc/dist/patterns/ai-toolkit/pixel-loader/geometry.js
-var e93 = /* @__PURE__ */ new WeakMap();
+var e94 = /* @__PURE__ */ new WeakMap();
 function t70(t90) {
-  let n37 = e93.get(t90);
+  let n37 = e94.get(t90);
   if (n37) return n37;
   let r40 = new Set(t90.map((e120) => `${e120.col},${e120.row}`)), i26 = (e120, t91) => r40.has(`${e120},${t91}`), a23 = t90.map(({ col: e120, row: t91 }) => {
     let n38 = i26(e120 - 1, t91), r41 = i26(e120 + 1, t91), a24 = i26(e120, t91 - 1), o91 = i26(e120, t91 + 1), s19 = i26(e120 - 1, t91 - 1), c28 = i26(e120 + 1, t91 - 1), l24 = i26(e120 + 1, t91 + 1), u27 = i26(e120 - 1, t91 + 1);
@@ -19387,7 +19887,7 @@ function t70(t90) {
       bottomLeft: !n38 && !o91 && !u27
     };
   });
-  return e93.set(t90, a23), a23;
+  return e94.set(t90, a23), a23;
 }
 function n33(e120, t90) {
   return `${e120.topLeft ? t90 : "0"} ${e120.topRight ? t90 : "0"} ${e120.bottomRight ? t90 : "0"} ${e120.bottomLeft ? t90 : "0"}`;
@@ -19399,7 +19899,7 @@ var t71 = i`:host{display:inline-block}*,*:before,*:after{box-sizing:border-box}
 // node_modules/@adobe/spectrum-wc/dist/patterns/ai-toolkit/pixel-loader/PixelLoader.js
 var w4;
 var T5 = "https://spectrum-web-components.adobe.com/?path=/docs/patterns-ai-toolkit-pixel-loader--docs";
-var E3 = class e94 extends i9 {
+var E3 = class e95 extends i9 {
   constructor(...e120) {
     super(...e120), this.icon = "aiLogo", this.paused = false, this.label = "Loading", this._presetIndex = 0, this._animations = [], this._containerCache = null, this._cellElsCache = null, this._ticker = null, this._reducedMotionQuery = null, this._displayedIcon = "aiLogo", this._finishToken = 0, this._handleReducedMotionChange = () => {
       this._syncTicker(), this._playCells();
@@ -19502,8 +20002,8 @@ var E3 = class e94 extends i9 {
       }
     }), this._cancelAnimations();
     let i26 = {
-      duration: e94.FINISH_MS,
-      easing: e94.EASE_FINISH,
+      duration: e95.FINISH_MS,
+      easing: e95.EASE_FINISH,
       fill: "forwards"
     }, a23 = n37.map((e120) => e120.animate([{
       translate: M2,
@@ -19553,7 +20053,7 @@ var E3 = class e94 extends i9 {
         style=${o3({
       "grid-column": String(t90.col + 1),
       "grid-row": String(t90.row + 1),
-      "border-radius": n33(n37, e94.CORNER_RADIUS)
+      "border-radius": n33(n37, e95.CORNER_RADIUS)
     })}
       ></div>
     `;
@@ -19594,12 +20094,12 @@ var y5 = [
   "complete",
   "stopped"
 ];
-var b9 = class e95 extends i9 {
+var b9 = class e96 extends i9 {
   static get styles() {
     return [t72];
   }
   constructor() {
-    super(), this.panelId = e90("swc-response-status-panel"), this._hasSteps = false, this._hasActiveStep = false, this._activeStepLabel = "", this._activeStepEl = null, this._labelSlotText = "", this._displayedLabel = "", this._rollFromLabel = "", this._rollToLabel = "", this._rollActive = false, this._rollEngaged = false, this.status = "active", this.open = false, this.accessibleLabel = "", this.loader = "mega", this._labelRollTimer = null, this._labelRollRaf = null, new t2(this, {
+    super(), this.panelId = e91("swc-response-status-panel"), this._hasSteps = false, this._hasActiveStep = false, this._activeStepLabel = "", this._activeStepEl = null, this._labelSlotText = "", this._displayedLabel = "", this._rollFromLabel = "", this._rollToLabel = "", this._rollActive = false, this._rollEngaged = false, this.status = "active", this.open = false, this.accessibleLabel = "", this.loader = "mega", this._labelRollTimer = null, this._labelRollRaf = null, new t2(this, {
       config: {
         attributes: true,
         attributeFilter: ["status"],
@@ -19717,10 +20217,10 @@ var b9 = class e95 extends i9 {
     if (this._labelSlotText) return this._labelSlotText;
     let t90 = this._resolvedStatus;
     if (t90 === "active") {
-      if (this._showsGenericProcessingLabel) return e95.ACTIVE_STEP_OPEN_LABEL;
+      if (this._showsGenericProcessingLabel) return e96.ACTIVE_STEP_OPEN_LABEL;
       if (this._activeStepLabel) return this._activeStepLabel;
     }
-    return e95.DEFAULT_LABELS[t90];
+    return e96.DEFAULT_LABELS[t90];
   }
   _clearLabelRollTimers() {
     this._labelRollTimer !== null && (window.clearTimeout(this._labelRollTimer), this._labelRollTimer = null), this._labelRollRaf !== null && (window.cancelAnimationFrame(this._labelRollRaf), this._labelRollRaf = null);
@@ -19749,7 +20249,7 @@ var b9 = class e95 extends i9 {
       this._labelRollRaf = window.requestAnimationFrame(() => {
         this._labelRollRaf = null, this._rollEngaged = true, this._labelRollTimer = window.setTimeout(() => {
           this._labelRollTimer = null, this._displayedLabel = this._rollToLabel, this._rollActive = false, this._rollEngaged = false, this._applyLabelRoll();
-        }, e95.LABEL_ROLL_DURATION_MS);
+        }, e96.LABEL_ROLL_DURATION_MS);
       });
     });
   }
@@ -19757,7 +20257,7 @@ var b9 = class e95 extends i9 {
     return this._rollActive ? this._rollToLabel : this._displayedLabel || this._getHeaderLabel();
   }
   _renderLabel() {
-    let t90 = e95.STATUS_LABEL_CLASS;
+    let t90 = e96.STATUS_LABEL_CLASS;
     return this._rollActive ? b`
       <span class="swc-ResponseStatus-headerTrailViewport">
         <span class=${this._rollEngaged ? "swc-ResponseStatus-headerTrailCrossfade swc-ResponseStatus-headerTrailCrossfade--engaged" : "swc-ResponseStatus-headerTrailCrossfade"}>
@@ -19873,7 +20373,7 @@ var b9 = class e95 extends i9 {
     `;
   }
   _renderPanel(t90) {
-    let n37 = t90 && this.open, r40 = this.accessibleLabel || e95.DEFAULT_ACCESSIBLE_LABEL;
+    let n37 = t90 && this.open, r40 = this.accessibleLabel || e96.DEFAULT_ACCESSIBLE_LABEL;
     return b`
       <div
         id=${this.panelId}
@@ -19938,7 +20438,7 @@ var t73 = i`:host{display:block}*,*:before,*:after{box-sizing:border-box}.swc-Su
 // node_modules/@adobe/spectrum-wc/dist/patterns/ai-toolkit/suggestion/SuggestionGroup.js
 var s14 = class extends i9 {
   constructor(...e120) {
-    super(...e120), this.accessibleLabel = "", this._headingId = e90("swc-suggestion-group-heading");
+    super(...e120), this.accessibleLabel = "", this._headingId = e91("swc-suggestion-group-heading");
   }
   static get styles() {
     return [t73];
@@ -20101,29 +20601,11 @@ e12([n({
 e25("swc-user-message", a18);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/Cancel.js
-function e96() {
+function e97() {
   return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M16.201 16.166A8.72 8.72 0 0 0 18.75 10c0-4.825-3.925-8.75-8.75-8.75a8.72 8.72 0 0 0-6.166 2.549l-.021.014c-.011.007-.008.015-.014.021A8.72 8.72 0 0 0 1.25 10c0 4.825 3.925 8.75 8.75 8.75a8.72 8.72 0 0 0 6.166-2.549c.006-.006.015-.008.021-.014s.008-.015.014-.021M17.25 10c0 1.73-.61 3.317-1.625 4.565L5.435 4.375A7.2 7.2 0 0 1 10 2.75c3.998 0 7.25 3.252 7.25 7.25m-14.5 0c0-1.73.61-3.317 1.625-4.565l10.19 10.19A7.2 7.2 0 0 1 10 17.25c-3.998 0-7.25-3.252-7.25-7.25"/></svg>';
 }
 
 // node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-cancel.js
-var o65 = class extends a10 {
-  static get styles() {
-    return [t40];
-  }
-  render() {
-    return b`
-      <span class="swc-Icon">${o16(e96())}</span>
-    `;
-  }
-};
-e25("swc-icon-cancel", o65);
-
-// node_modules/@adobe/spectrum-wc-icons/dist/ChevronRight.js
-function e97() {
-  return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M7.75 16.465a.748.748 0 0 1-.54-1.27l4.999-5.197-4.986-5.184a.75.75 0 0 1 .02-1.06.75.75 0 0 1 1.06.021L13.79 9.48c.28.29.28.749 0 1.039l-5.5 5.716a.75.75 0 0 1-.54.23"/></svg>';
-}
-
-// node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-chevron-right.js
 var o66 = class extends a10 {
   static get styles() {
     return [t40];
@@ -20134,7 +20616,7 @@ var o66 = class extends a10 {
     `;
   }
 };
-e25("swc-icon-chevron-right", o66);
+e25("swc-icon-cancel", o66);
 
 // node_modules/@adobe/spectrum-wc-icons/dist/File.js
 function e98() {
@@ -20305,11 +20787,11 @@ function run(lines, start, test) {
   return end;
 }
 var itemPattern = /^(\s*)([-*]|\d+\.)\s+(.*)$/;
-function indent(line) {
+function indent2(line) {
   return line.match(/^\s*/)?.[0].length ?? 0;
 }
 function list2(lines) {
-  const base = indent(lines[0]);
+  const base = indent2(lines[0]);
   const ordered2 = /^\s*\d+\./.test(lines[0]);
   const items = [];
   let i26 = 0;
@@ -20321,7 +20803,7 @@ function list2(lines) {
       i26++;
       continue;
     }
-    const end = run(lines, i26 + 1, (line) => indent(line) > base);
+    const end = run(lines, i26 + 1, (line) => indent2(line) > base);
     let child = i26 + 1;
     let text2 = match[3];
     while (child < end && !itemPattern.test(lines[child])) text2 += ` ${lines[child++].trim()}`;
@@ -20361,7 +20843,7 @@ function block2(lines, i26) {
     const end2 = run(
       lines,
       i26,
-      (l24) => itemPattern.test(l24) || l24.trim() !== "" && indent(l24) > indent(line)
+      (l24) => itemPattern.test(l24) || l24.trim() !== "" && indent2(l24) > indent2(line)
     );
     return [list2(lines.slice(i26, end2)), end2];
   }
@@ -20787,20 +21269,20 @@ function attachment(item2) {
     <span slot="subtitle" class="size">${detail}</span>
   </swc-user-message>`;
 }
-var deliveries = { steer: "Steered", "follow-up": "Follow-up" };
+function when(at, title = "") {
+  return b`<time class="when" datetime=${new Date(at).toISOString()} title=${title || A}>${time(at)}</time>`;
+}
 function user(message) {
   const delivered = message.delivered ?? (message.mode === "steer" ? "steer" : void 0);
-  const tag3 = delivered === "steer" || delivered === "follow-up" ? deliveries[delivered] : null;
   const agent = message.origin === "agent";
   const name = message.from ?? "an agent";
-  const who2 = agent ? name : message.from ? `From ${message.from}` : "You";
+  const who2 = agent ? name : message.from ? `From ${message.from}` : "";
   const label = agent ? `Request from ${name}` : message.from ? `Message from ${message.from}` : "Your message";
   return b`<swc-conversation-turn type="user" class="message user" accessible-label=${label} data-id=${message.id} data-mode=${message.mode ?? "send"} data-delivered=${delivered ?? "run"} data-origin=${message.origin ?? "user"}>
     <div class="bubble">
       <div class="meta">
-        <span class="who">${who2}</span><span>${time(message.createdAt)}</span>
+        ${who2 ? b`<span class="who">${who2}</span>` : A}${when(message.createdAt)}
         ${agent ? b`<swc-badge class="origin" size="s" variant="indigo">Agent</swc-badge>` : A}
-        ${tag3 ? b`<swc-badge class="tag" size="s" variant=${delivered === "steer" ? "notice" : "informative"} subtle>${tag3}</swc-badge>` : A}
       </div>
       ${message.text ? b`<swc-user-message class="body"><span class="text">${message.text}</span></swc-user-message>` : A}
       ${message.attachments?.length ? b`<div class="attachments">${message.attachments.map(attachment)}</div>` : A}
@@ -20839,8 +21321,8 @@ function assistant(message, name, model, handlers, showThinking, suggestion = nu
   return b`<swc-conversation-turn type="system" class="message assistant" accessible-label=${`Reply from ${name}`} data-id=${message.id} data-status=${message.status}>
     <div class="reply">
       <div class="meta">
-        <span class="who">${name}</span><span>${time(message.createdAt)}</span>
-        ${model ? b`<span title=${usage}>${model}</span>` : A}
+        ${when(message.createdAt, model ? "" : usage)}
+        ${model ? b`<span class="model" title=${usage}>${model}</span>` : A}
         ${message.status === "error" ? b`<swc-badge class="tag" size="s" variant="negative" subtle><swc-icon-alert-diamond slot="icon" size="s" aria-hidden="true"></swc-icon-alert-diamond>Failed</swc-badge>` : A}
       </div>
       <swc-system-message>
@@ -22321,7 +22803,7 @@ var SliccApp = class extends ThemedElement {
   constructor() {
     super();
     this.screen = screenClass(globalThis.innerWidth ?? 1280);
-    this.surfaces = surfaces;
+    this.surfaces = surfaces2;
   }
   static styles = [
     theme,
@@ -22550,9 +23032,14 @@ var SliccApp = class extends ThemedElement {
   }
   subscribe(model) {
     const update = () => this.requestUpdate();
+    const settle2 = () => settleModels(model);
+    queueMicrotask(settle2);
     return [
       ...super.subscribe(model),
+      model.settings.on("settings", settle2),
+      model.settings.on("accounts", settle2),
       model.agent.on("agents", () => {
+        settle2();
         this.#prune();
         update();
       }),
@@ -22577,6 +23064,7 @@ var SliccApp = class extends ThemedElement {
       ...model.tabs ? [model.tabs.on("tabs", update)] : [],
       ...model.follow ? [
         model.follow.on("follow", () => {
+          settle2();
           this.#followed(model);
           update();
         })
@@ -22972,7 +23460,7 @@ var SliccApp = class extends ThemedElement {
     return Boolean(cone && !cone.frozen && this.model?.agent.freeze && !watchOnly(this.model));
   }
   #creatable() {
-    return Boolean(this.model?.agent.createCone) && !watchOnly(this.model);
+    return creatable(this.model);
   }
   #cone() {
     const agent = this.#active();
@@ -23005,22 +23493,7 @@ var SliccApp = class extends ThemedElement {
     this.renderRoot.querySelector("header sp-picker")?.focus();
   }
   async #newCone(trigger2) {
-    const port = this.model?.agent;
-    const create3 = port?.createCone?.bind(port);
-    if (!port || !create3) return;
-    let created;
-    await prompt({
-      title: "New cone",
-      label: "Name",
-      action: "Create",
-      trigger: trigger2,
-      submit: async (name) => {
-        if (watchOnly(this.model)) return;
-        created = await create3(name);
-      }
-    });
-    if (!created) return;
-    port.select(created.id);
+    if (!await createCone(this.model, trigger2)) return;
     await this.updateComplete;
     this.renderRoot.querySelector("header sp-picker")?.focus();
   }
@@ -23343,12 +23816,12 @@ function scan2(words, cwds, whole) {
   }
   return null;
 }
-function secretRules(approval) {
-  if (approval.command.length > 4096) return `${approval.command.slice(0, 40)}\u2026`;
-  const start = absolute("/", approval.cwd ?? "/");
+function reach2(command3, cwd) {
+  if (command3.length > 4096) return `${command3.slice(0, 40)}\u2026`;
+  const start = absolute("/", cwd ?? "/");
   if (protects(start, false)) return start;
   const cwds = /* @__PURE__ */ new Set([start]);
-  const text2 = unglob(ansi(approval.command.replace(/\\\n/g, "")));
+  const text2 = unglob(ansi(command3.replace(/\\\n/g, "")));
   const plain = text2.split(separators).map((segment2) => commas(segment2.split(/[\s<>=]+/).map((word) => word.replace(/['"\\]/g, ""))));
   const aware = shield(text2).split(separators).map((segment2) => commas(quoted(unshield(segment2))));
   const segments = JSON.stringify(aware) === JSON.stringify(plain) ? plain : [...plain, ...aware];
@@ -23363,6 +23836,14 @@ function secretRules(approval) {
   if (home2) return home2;
   return segments.flat().some((word) => word.includes("$")) || text2.includes("`") ? text2.match(expansion)[0] : null;
 }
+function secretRules(command3, cwd) {
+  const hit = reach2(command3, cwd);
+  return hit && certain(hit) ? { certain: hit, maybe: null } : { certain: null, maybe: hit };
+}
+function origin() {
+  const active = focused();
+  return active?.closest("slicc-terminal") ?? active;
+}
 function waiting(model, now) {
   return [...model?.approvals?.list() ?? []].filter((approval) => approval.expiresAt > now).sort((a23, b13) => a23.createdAt - b13.createdAt);
 }
@@ -23503,7 +23984,8 @@ var SliccApprovals = class extends ModelElement {
   async decide(approval, decision) {
     const port = this.model?.approvals;
     if (!port?.decide || this.busy || decision !== "deny" && !this.#armed) return;
-    if (decision === "always" && secretRules(approval)) return;
+    const verdict = secretRules(approval.command, approval.cwd);
+    if (decision === "always" && (verdict.certain ?? verdict.maybe)) return;
     this.busy = decision;
     this.failure = null;
     this.#pending.add(approval.id);
@@ -23547,7 +24029,7 @@ var SliccApprovals = class extends ModelElement {
     const dialog = this.renderRoot.querySelector("dialog");
     const key2 = dialog ? `${dialog.dataset.approval}:${dialog.dataset.gone ?? ""}` : "";
     if (key2 === this.#shown) return;
-    if (dialog && !this.#shown) this.#trigger = focused();
+    if (dialog && !this.#shown) this.#trigger = origin();
     this.#shown = key2;
     if (!dialog) {
       if (this.#trigger?.isConnected) this.#trigger.focus();
@@ -23608,7 +24090,8 @@ var SliccApprovals = class extends ModelElement {
     const [approval, ...rest] = held ? [held, ...list5.filter(({ id }) => id !== held.id)] : list5;
     if (!approval) return A;
     const failure2 = this.failure?.id === approval.id ? this.failure.message : "";
-    const rules = secretRules(approval);
+    const verdict = secretRules(approval.command, approval.cwd);
+    const rules = verdict.certain ?? verdict.maybe;
     const always = approval.always && !rules;
     return this.#dialog(
       approval,
@@ -23617,7 +24100,7 @@ var SliccApprovals = class extends ModelElement {
           <h2 id="title" slot="heading">Allow sudo?</h2>
           ${this.#request(approval)}
           ${approval.cwd ? b`<p class="cwd">In ${approval.cwd}</p>` : A}
-          ${rules ? b`<div class="rules" data-secret-rules=${rules}><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><p>${certain(rules) ? b`<strong>This changes secret rules.</strong> It names <code>${rules}</code>, where SLICC keeps which secrets programs may use and where they may be sent.` : b`<strong>This may change secret rules.</strong> SLICC can't tell where <code>${rules}</code> leads, and it could reach the files where SLICC keeps which secrets programs may use and where they may be sent.`} Allow it only if you asked for this change.</p></div>` : A}
+          ${rules ? b`<div class="rules" data-secret-rules=${rules}><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><p>${verdict.certain ? b`<strong>This changes secret rules.</strong> It names <code>${rules}</code>, where SLICC keeps which secrets programs may use and where they may be sent.` : b`<strong>This may change secret rules.</strong> SLICC can't tell where <code>${rules}</code> leads, and it could reach the files where SLICC keeps which secrets programs may use and where they may be sent.`} Allow it only if you asked for this change.</p></div>` : A}
           ${always ? b`<p class="hint">Always allow lets ${approval.requester.name} run exactly this command with sudo without asking again.</p>` : A}
           ${failure2 ? b`<p class="problem" role="alert" data-error><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${failure2}</span></p>` : A}
           <p class="timer" data-timer>Denied automatically in ${countdown(approval.expiresAt - this.now)}.</p>
@@ -23951,8 +24434,8 @@ function since2(at, now = Date.now()) {
 function called(value = "") {
   const url = value.split(" ").at(-1);
   try {
-    const { origin, pathname } = new URL(url);
-    return `Called ${origin}${pathname}`;
+    const { origin: origin2, pathname } = new URL(url);
+    return `Called ${origin2}${pathname}`;
   } catch {
     return `Called ${url}`.trim();
   }
@@ -24000,7 +24483,9 @@ var icons = {
 };
 var refresh = 1e4;
 var fresh = 3e3;
+var actionPage = 50;
 var narrowWidth = 480;
+var linked = /* @__PURE__ */ new Set(["open", "goto", "request"]);
 var wideWidth = 720;
 var offline = b`<svg viewBox="0 0 96 72" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6" y="8" width="84" height="56" rx="6"/><path d="M6 22h84"/><circle cx="16" cy="15" r="1.5"/><circle cx="24" cy="15" r="1.5"/><path d="M38 34l20 20M58 34L38 54"/></svg>`;
 var SliccBrowser = class extends ModelElement {
@@ -24020,7 +24505,10 @@ var SliccBrowser = class extends ModelElement {
   #width = 0;
   #copied = null;
   #command = null;
-  #count = 0;
+  #last = null;
+  #shown = actionPage;
+  #anchor = null;
+  #expanded = /* @__PURE__ */ new Set();
   constructor() {
     super();
     this.address = "";
@@ -24224,8 +24712,15 @@ var SliccBrowser = class extends ModelElement {
         font-family: var(--swc-code-font-family-stack);
         color: var(--swc-neutral-subdued-content-color-default);
       }
-      .narrow .driving swc-button {
-        flex: 1 0 100%;
+      .detail .driving {
+        flex-wrap: nowrap;
+        min-block-size: var(--swc-component-height-75);
+      }
+      .detail .driving swc-status-light {
+        min-width: 0;
+      }
+      .detail .driving swc-button {
+        flex: none;
       }
       .swc-Link {
         font-size: inherit;
@@ -24298,6 +24793,7 @@ var SliccBrowser = class extends ModelElement {
         user-select: none;
       }
       figcaption {
+        min-block-size: var(--swc-component-height-50);
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -24311,8 +24807,84 @@ var SliccBrowser = class extends ModelElement {
         color: var(--swc-heading-color);
       }
       summary {
+        display: flex;
+        align-items: center;
+        gap: var(--swc-spacing-100);
+        min-block-size: var(--swc-component-height-75);
+        padding-inline: var(--swc-spacing-75);
+        margin-inline: calc(-1 * var(--swc-spacing-75));
+        border-radius: var(--swc-corner-radius-medium-default);
+        list-style: none;
+        cursor: pointer;
+      }
+      summary::-webkit-details-marker {
+        display: none;
+      }
+      summary:hover {
+        background: var(--swc-gray-100);
+      }
+      summary:focus-visible,
+      .url-toggle:focus-visible,
+      .actions:focus-visible {
+        outline: var(--swc-focus-indicator-thickness) solid var(--swc-focus-indicator-color);
+        outline-offset: var(--swc-focus-ring-gap);
+      }
+      .chevron {
+        flex: none;
+        color: var(--swc-neutral-subdued-content-color-default);
+        transition: transform var(--swc-animation-duration-100);
+      }
+      details[open] > summary .chevron {
+        transform: rotate(90deg);
+      }
+      .url-toggle[aria-expanded='true'] .chevron {
+        transform: rotate(180deg);
+      }
+      :host(:dir(rtl)) details:not([open]) > summary .chevron {
+        transform: scaleX(-1);
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .chevron {
+          transition: none;
+        }
+      }
+      .more {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--swc-spacing-200);
+        padding-block-end: var(--swc-spacing-75);
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
+      .url-toggle {
+        display: inline-flex;
+        align-self: flex-start;
+        align-items: center;
+        gap: var(--swc-spacing-50);
+        max-width: 100%;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        border-radius: var(--swc-corner-radius-small-default);
+        background: none;
+        color: inherit;
+        font: inherit;
+        text-align: start;
         cursor: pointer;
       }
+      .url-toggle > span {
+        min-width: 0;
+      }
+      .url-toggle:hover > span {
+        text-decoration: underline;
+      }
+      .full {
+        font-family: var(--swc-code-font-family-stack);
+        color: var(--swc-neutral-subdued-content-color-default);
+        overflow-wrap: anywhere;
+        white-space: normal;
+        user-select: text;
+      }
       .actions {
         display: flex;
         flex-direction: column;
@@ -24340,7 +24912,8 @@ var SliccBrowser = class extends ModelElement {
         min-width: 0;
         overflow-wrap: anywhere;
       }
-      .last .what {
+      .last .what > :not(.full),
+      .last .url-toggle > span {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -24406,6 +24979,8 @@ var SliccBrowser = class extends ModelElement {
     this.#shots.clear();
     this.#frames.clear();
     this.#pulse.clear();
+    this.#expanded.clear();
+    this.#shown = actionPage;
     const tabs = model.browser.list();
     this.#driven = new Set(tabs.filter((tab) => tab.controlled).map((tab) => tab.id));
     this.#focus = this.#latest(model, tabs);
@@ -24505,7 +25080,7 @@ var SliccBrowser = class extends ModelElement {
       try {
         const src = await model.browser.screenshot(id);
         const now = model.browser.list().find((candidate) => candidate.id === id);
-        if (this.model === model && now && this.#key(now) === key2) {
+        if (this.model === model && now && this.#key(now) === key2 && this.#watching?.tabId !== id) {
           this.#shots.set(id, { key: key2, src, at: Date.now() });
           this.requestUpdate();
         }
@@ -24523,6 +25098,7 @@ var SliccBrowser = class extends ModelElement {
   #show(id) {
     this.#focus = id;
     this.#copied = null;
+    this.#shown = actionPage;
     if (id) this.#pulse.delete(id);
     this.requestUpdate();
   }
@@ -24537,9 +25113,11 @@ var SliccBrowser = class extends ModelElement {
       this.#ticker = setInterval(() => this.requestUpdate(), 1e3);
     if (!(visible2 && tab)) this.#still();
     const list5 = this.renderRoot.querySelector(".actions:not(.last)");
-    const count = list5?.childElementCount ?? 0;
-    if (list5 && count !== this.#count) list5.scrollTop = list5.scrollHeight;
-    this.#count = count;
+    const last = list5?.lastElementChild?.getAttribute("data-action-id") ?? null;
+    if (list5 && this.#anchor !== null) list5.scrollTop = list5.scrollHeight - this.#anchor;
+    else if (list5 && last !== this.#last) list5.scrollTop = list5.scrollHeight;
+    this.#anchor = null;
+    this.#last = last;
   }
   #still() {
     if (this.#ticker) clearInterval(this.#ticker);
@@ -24587,10 +25165,10 @@ var SliccBrowser = class extends ModelElement {
   #who(tab) {
     return tab.agentId ? `${agentName(this.model, tab.agentId)} is using this tab` : "In use";
   }
-  #stopButton(tab, refocus, justified = false) {
+  #stopButton(tab, refocus) {
     if (!tab.agentId || watchOnly(this.model)) return A;
     const agentId = tab.agentId;
-    return b`<swc-button size="s" variant="secondary" ?justified=${justified} data-action="stop-agent" @click=${() => this.#stop(agentId, refocus)}>Stop ${agentName(this.model, agentId)}</swc-button>`;
+    return b`<swc-button size="s" variant="secondary" data-action="stop-agent" @click=${() => this.#stop(agentId, refocus)}>Stop ${agentName(this.model, agentId)}</swc-button>`;
   }
   #card(tab, active) {
     const model = this.model;
@@ -24669,28 +25247,52 @@ var SliccBrowser = class extends ModelElement {
       </figcaption>
     </figure>`;
   }
+  #more(total) {
+    const list5 = this.renderRoot.querySelector(".actions:not(.last)");
+    this.#anchor = list5.scrollHeight - list5.scrollTop;
+    this.#shown += actionPage;
+    const done2 = this.#shown >= total;
+    void this.updateComplete.then(() => {
+      if (done2) this.focusOn(".actions:not(.last)");
+    });
+    this.requestUpdate();
+  }
+  #toggle(id) {
+    if (!this.#expanded.delete(id)) this.#expanded.add(id);
+    this.requestUpdate();
+  }
+  #what(action) {
+    const url = linked.has(action.kind) ? action.value : void 0;
+    if (!url) return b`<span>${describe(action)}</span>`;
+    const open = this.#expanded.has(action.id);
+    return b`<button class="url-toggle" data-action="action-url" aria-expanded=${open ? "true" : "false"} aria-controls=${`url-${action.id}`} @click=${() => this.#toggle(action.id)}><span>${describe(action)}</span><swc-icon-chevron-down class="chevron" size="s" aria-hidden="true"></swc-icon-chevron-down></button>${open ? b`<span class="full" id=${`url-${action.id}`}>${url}</span>` : A}`;
+  }
   #row(action) {
     const failed2 = action.status === "failed";
-    return b`<li data-action-id=${action.id} data-kind=${action.kind} data-status=${action.status} title=${action.kind === "request" ? action.value ?? "" : A}>
+    const url = linked.has(action.kind) ? action.value : void 0;
+    return b`<li data-action-id=${action.id} data-kind=${action.kind} data-status=${action.status} title=${url ?? A}>
       <span>${action.status === "running" ? b`<swc-progress-circle size="s" indeterminate label="Running"></swc-progress-circle>` : failed2 ? b`<swc-icon-alert-triangle size="s" aria-label="Failed"></swc-icon-alert-triangle>` : icons[action.kind]}</span>
-      <span class="what"><span>${describe(action)}</span>${failed2 && action.error ? b`<span class="failure">${action.error}</span>` : A}</span>
+      <span class="what">${this.#what(action)}${failed2 && action.error ? b`<span class="failure">${action.error}</span>` : A}</span>
       <span class="who">${agentName(this.model, action.agentId)} ${time(action.at)}</span>
     </li>`;
   }
   #actions(tab) {
     const port = this.model.browser;
     if (!port.actions) return A;
-    const actions2 = port.actions().filter(
+    const all2 = port.actions().filter(
       (action) => action.tabId === tab.id || action.tabId === null && action.agentId !== null && action.agentId === tab.agentId
-    ).slice(-50);
-    if (!actions2.length)
+    );
+    if (!all2.length)
       return b`<h3>Recent actions</h3><p class="muted" data-actions="none">No actions yet.</p>`;
+    const actions2 = all2.slice(-this.#shown);
+    const more = all2.length > actions2.length ? b`<div class="more"><span>Showing the latest ${actions2.length} of ${all2.length}</span><swc-button size="s" variant="secondary" fill-style="outline" data-action="more-actions" @click=${() => this.#more(all2.length)}>Show more</swc-button></div>` : A;
     if (this.#width >= narrowWidth)
-      return b`<h3>Recent actions</h3><ol class="actions" aria-label="Recent actions">${actions2.map((action) => this.#row(action))}</ol>`;
+      return b`<h3>Recent actions</h3>${more}<ol class="actions" aria-label="Recent actions" tabindex="0">${actions2.map((action) => this.#row(action))}</ol>`;
     const last = actions2.at(-1);
     return b`<details>
-        <summary>Recent actions (${actions2.length})</summary>
-        <ol class="actions" aria-label="Earlier actions">${actions2.slice(0, -1).map((action) => this.#row(action))}</ol>
+        <summary><swc-icon-chevron-right class="chevron" size="s" aria-hidden="true"></swc-icon-chevron-right>Recent actions (${all2.length})</summary>
+        ${more}
+        <ol class="actions" aria-label="Earlier actions" tabindex="0">${actions2.slice(0, -1).map((action) => this.#row(action))}</ol>
       </details>
       <ol class="actions last" aria-label="Last action">${this.#row(last)}</ol>`;
   }
@@ -24717,7 +25319,7 @@ var SliccBrowser = class extends ModelElement {
         </div>
         <div class="driving" data-driving=${tab.controlled ? tab.agentId ? "agent" : "user" : "none"}>
           <swc-status-light size="m" variant=${tab.controlled ? "info" : "neutral"}>${tab.controlled ? this.#who(tab) : "No agent is using this tab"}</swc-status-light>
-          ${tab.controlled ? this.#stopButton(tab, '[data-action="all-tabs"]', narrow) : A}
+          ${tab.controlled ? this.#stopButton(tab, '[data-action="all-tabs"]') : A}
         </div>
         ${this.#view(tab)}
         ${this.#actions(tab)}
@@ -25602,6 +26204,7 @@ var navigation = /* @__PURE__ */ new Set([
   "PageUp",
   "PageDown"
 ]);
+var compactWidth = 560;
 var failed = (message) => message.role === "assistant" ? message.status === "error" : message.role === "system" && message.kind === "error";
 function carriesFiles(event2) {
   const types = [...event2.dataTransfer?.types ?? []];
@@ -25636,11 +26239,17 @@ document.addEventListener(
   true
 );
 var SliccChat = class extends ThemedElement {
-  static properties = { ...ThemedElement.properties, agent: {}, dropping: { state: true } };
+  static properties = {
+    ...ThemedElement.properties,
+    agent: {},
+    dropping: { state: true },
+    compact: { state: true }
+  };
   constructor() {
     super();
     this.agent = "";
     this.dropping = false;
+    this.compact = false;
     this.addEventListener("dragenter", this.#over);
     this.addEventListener("dragover", this.#over);
     this.addEventListener("dragleave", this.#leave);
@@ -25694,7 +26303,7 @@ var SliccChat = class extends ThemedElement {
       }
       header {
         display: flex;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
         align-items: center;
         gap: var(--swc-spacing-50) var(--swc-spacing-100);
         padding: var(--swc-spacing-75) var(--swc-spacing-200);
@@ -25706,15 +26315,23 @@ var SliccChat = class extends ThemedElement {
       }
       header sp-picker {
         --mod-picker-spacing-label-to-picker-quiet: calc(-1 * var(--swc-border-width-100));
+        flex: none;
         min-width: 0;
         width: auto;
       }
+      header sp-picker[label='Model'] {
+        flex: 0 1 auto;
+      }
+      header swc-status-light,
+      header swc-action-button {
+        flex: none;
+      }
       header swc-status-light {
         align-self: center;
       }
       header swc-meter {
         flex: 0 1 calc(var(--swc-spacing-400) * 6);
-        min-width: calc(var(--swc-spacing-400) * 4);
+        min-width: calc(var(--swc-spacing-400) * 4.5);
         margin-inline-start: auto;
       }
       header .frozen,
@@ -25803,14 +26420,27 @@ var SliccChat = class extends ThemedElement {
     }
   };
   subscribe(model) {
+    const settle2 = () => {
+      settleModels(model);
+      this.requestUpdate();
+    };
+    queueMicrotask(() => settleModels(model));
+    const width = new ResizeObserver(([entry]) => {
+      const size4 = entry.contentRect.width;
+      this.compact = size4 > 0 && size4 < compactWidth;
+    });
+    width.observe(this);
     return [
       ...super.subscribe(model),
+      () => width.disconnect(),
+      model.settings.on("settings", settle2),
+      model.settings.on("accounts", settle2),
       model.agent.on("active", () => {
         if (!this.agent) this.#refresh(true);
       }),
-      model.agent.on("agents", () => this.requestUpdate()),
+      model.agent.on("agents", settle2),
       ...model.tabs ? [model.tabs.on("tabs", () => this.requestUpdate())] : [],
-      ...model.follow ? [model.follow.on("follow", () => this.requestUpdate())] : [],
+      ...model.follow ? [model.follow.on("follow", settle2)] : [],
       model.agent.on("messages", (agentId) => {
         if (agentId === this.#id()) this.#refresh(this.#sent(agentId));
       }),
@@ -25912,11 +26542,11 @@ var SliccChat = class extends ThemedElement {
       new CustomEvent("show-surface", { detail: { id: "settings" }, bubbles: true, composed: true })
     );
   }
-  #message(message, agent, suggestion) {
+  #message(message, agent, suggestion, changed) {
     const model = this.model;
     switch (message.role) {
       case "assistant": {
-        const label = model.settings.models().find((option2) => option2.id === (message.model ?? ""))?.label ?? message.model ?? "";
+        const label = changed ? model.settings.models().find((option2) => option2.id === message.model)?.label ?? message.model : "";
         return assistant(
           message,
           agent.name,
@@ -25939,6 +26569,7 @@ var SliccChat = class extends ThemedElement {
   #items(messages, agent) {
     const out = [];
     let previous = "";
+    let shown4;
     const model = this.model;
     const last = messages.at(-1);
     const suggestion = last?.role === "assistant" && !agent.frozen && !watchOnly(model) && !model.agent.busy(agent.id) ? model.agent.suggestion(agent.id) : null;
@@ -25953,7 +26584,13 @@ var SliccChat = class extends ThemedElement {
         ]);
         previous = label;
       }
-      out.push([message.id, this.#message(message, agent, message === last ? suggestion : null)]);
+      const next = message.role === "assistant" ? message.model : void 0;
+      const changed = !!next && next !== shown4;
+      if (changed) shown4 = next;
+      out.push([
+        message.id,
+        this.#message(message, agent, message === last ? suggestion : null, changed)
+      ]);
     }
     return out;
   }
@@ -25977,10 +26614,11 @@ var SliccChat = class extends ThemedElement {
         <span class="model" data-model>${label ?? agent.model}</span>
         ${meter}`;
     }
+    const offered = chatModels(model.settings.models());
     return b`${statusLight(agent.status)}
-      <sp-picker size="s" quiet label="Model" value=${agent.model} @change=${(event2) => model.agent.setModel(agent.id, event2.target.value)}>
-        ${chatModels(model.settings.models()).map((option2) => b`<sp-menu-item value=${option2.id}>${option2.label}<span slot="description">${option2.provider}</span></sp-menu-item>`)}
-      </sp-picker>
+      ${offered.length ? b`<sp-picker size="s" quiet label="Model" value=${agent.model} @change=${(event2) => model.agent.setModel(agent.id, event2.target.value)}>
+        ${offered.map((option2) => b`<sp-menu-item value=${option2.id}>${option2.label}<span slot="description">${option2.provider}</span></sp-menu-item>`)}
+      </sp-picker>` : b`<swc-action-button size="s" quiet data-action="set-up-model" @click=${() => this.#action("settings")}>Set up a model</swc-action-button>`}
       <sp-picker size="s" quiet label="Thinking" value=${model.settings.get().thinking} @change=${(event2) => model.settings.update({ thinking: event2.target.value })}>
         <sp-menu-item value="off">No thinking</sp-menu-item>
         <sp-menu-item value="low">Think a little</sp-menu-item>
@@ -25988,7 +26626,7 @@ var SliccChat = class extends ThemedElement {
         <sp-menu-item value="high">Think hard</sp-menu-item>
       </sp-picker>
       ${meter}
-      <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 conversation</swc-action-button>
+      <swc-action-button id="new-chat" size="s" quiet data-action="new-chat" accessible-label=${this.compact ? "New conversation" : A} ?disabled=${empty2} @click=${() => this.#newChat(agent)}><swc-icon-new slot="icon"></swc-icon-new>${this.compact ? A : "New conversation"}</swc-action-button>
       <swc-tooltip for="new-chat" placement="bottom">${agent.kind === "cone" && model.agent.freeze ? "Start a new conversation. This one stays in the Freezer." : "Start a new conversation"}</swc-tooltip>`;
   }
   render() {
@@ -26000,7 +26638,7 @@ var SliccChat = class extends ThemedElement {
     const messages = agent ? this.model?.agent.messages(agent.id) ?? [] : [];
     this.#tail = messages.at(-1)?.id ?? "";
     return b`
-      <header>
+      <header ?data-compact=${this.compact}>
         ${agent ? this.#meta(agent, !messages.length) : b`<span>No agent</span>`}
       </header>
       <slicc-notices .model=${this.model}></slicc-notices>
@@ -26038,7 +26676,7 @@ var D4 = (e120) => {
 var O3 = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("field-sizing", "content");
 var k3 = class extends i9 {
   constructor() {
-    super(), this.labelId = e90("swc-prompt-field-label"), this.disabled = false, this.generating = false, this.collapsed = false, this.variant = "balanced", this.size = "m", this.loader = "aiLogo", this.animateLoader = false, this.label = "Prompt", this.accessibleLabel = "", this.sendLabel = "Send", this.stopLabel = "Stop generating", this.uploadLabel = "Add attachment", this.attachmentScrollPrevLabel = "Show previous attachments", this.attachmentScrollNextLabel = "Show more attachments", this.attachmentStripLabel = "Uploaded assets strip", this.placeholder = "Ready to get started? Ask a question, share an idea, or add a task.", this.value = "", this._attachmentScrollOverflow = false, this._attachmentCanScrollPrev = false, this._attachmentCanScrollNext = false, this._attachmentScrollFallbackGeneration = 0, this._attachmentScrollObserver = new s8(this, {
+    super(), this.labelId = e91("swc-prompt-field-label"), this.disabled = false, this.generating = false, this.collapsed = false, this.variant = "balanced", this.size = "m", this.loader = "aiLogo", this.animateLoader = false, this.label = "Prompt", this.accessibleLabel = "", this.sendLabel = "Send", this.stopLabel = "Stop generating", this.uploadLabel = "Add attachment", this.attachmentScrollPrevLabel = "Show previous attachments", this.attachmentScrollNextLabel = "Show more attachments", this.attachmentStripLabel = "Uploaded assets strip", this.placeholder = "Ready to get started? Ask a question, share an idea, or add a task.", this.value = "", this._attachmentScrollOverflow = false, this._attachmentCanScrollPrev = false, this._attachmentCanScrollNext = false, this._attachmentScrollFallbackGeneration = 0, this._attachmentScrollObserver = new s8(this, {
       target: null,
       callback: () => {
         this._updateAttachmentScrollState();
@@ -27363,6 +28001,11 @@ var SliccComposer = class extends ThemedElement {
         flex: none;
         color: var(--swc-neutral-subdued-content-color-default);
       }
+      .queued .next {
+        flex: none;
+        font-size: var(--swc-font-size-75);
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
       .queued .text {
         flex: 1;
         min-width: 0;
@@ -28086,17 +28729,17 @@ var SliccComposer = class extends ThemedElement {
     const model = this.model;
     return b`<ul class="queue" aria-label="Queued messages">
       ${queued.map(
-      (message) => b`<li class="queued" data-id=${message.id}>
+      (message) => b`<li class="queued" data-id=${message.id} data-mode=${message.mode ?? "queue"}>
           <swc-icon-clock size="s" aria-hidden="true"></swc-icon-clock>
-          <span class="text"><span class="sr">Queued: </span>${message.text}</span>
-          <swc-action-button size="s" quiet data-action="send-now" @click=${() => {
+          <span class="text"><span class="sr">${message.mode === "steer" ? "Steering: " : "Queued: "}</span>${message.text}</span>
+          ${message.mode === "steer" ? b`<span class="next">Sends at the next step</span>` : b`<swc-action-button size="s" quiet data-action="send-now" @click=${() => {
         model.agent.unqueue(this.#agent, message.id);
         void model.agent.send(this.#agent, {
           text: message.text,
           attachments: message.attachments,
           mode: "steer"
         });
-      }}>Send now</swc-action-button>
+      }}>Send now</swc-action-button>`}
           <swc-close-button size="s" data-action="unqueue" accessible-label="Remove from queue" @click=${() => model.agent.unqueue(this.#agent, message.id)}></swc-close-button>
         </li>`
     )}
@@ -28494,379 +29137,6 @@ var SliccMemory = class extends ModelElement {
   }
 };
 
-// src/app/monitor.ts
-function sparkline(points, width = 120, height = 28) {
-  if (points.length < 2) return "";
-  const max2 = Math.max(...points);
-  const min2 = Math.min(...points);
-  const span = max2 - min2 || 1;
-  return points.map(
-    (value, i26) => `${(i26 / (points.length - 1) * width).toFixed(1)},${(height - (value - min2) / span * (height - 2) - 1).toFixed(1)}`
-  ).join(" ");
-}
-function meterVariant2(ratio) {
-  if (ratio >= 0.9) return "negative";
-  if (ratio >= 0.6) return "notice";
-  return "informative";
-}
-var surfaces2 = {
-  agents: "agents",
-  terminals: "terminal",
-  tabs: "browser",
-  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)
-    return { variant: "negative", text: `${errors} ${errors === 1 ? "error" : "errors"}` };
-  const warnings = section.rows.filter((row) => row.status === "warn").length;
-  if (warnings)
-    return {
-      variant: "notice",
-      text: `${warnings} ${warnings === 1 ? "needs" : "need"} attention`
-    };
-  return null;
-}
-var SliccMonitor = class extends ModelElement {
-  static properties = {
-    ...ModelElement.properties,
-    expanded: { state: true },
-    copied: { state: true }
-  };
-  constructor() {
-    super();
-    this.expanded = {};
-    this.copied = null;
-  }
-  static styles = [
-    shared,
-    panelCss,
-    i`
-      .bar {
-        padding-block: var(--swc-spacing-50);
-      }
-      .heading {
-        flex: 1;
-        min-width: 0;
-        display: flex;
-        flex-wrap: wrap;
-        align-items: baseline;
-        column-gap: var(--swc-spacing-100);
-        white-space: normal;
-      }
-      .bar swc-action-button {
-        flex: none;
-      }
-      .body {
-        flex: 1;
-        min-height: 0;
-        overflow-y: auto;
-        padding: var(--swc-spacing-100);
-        display: grid;
-        grid-template-columns: minmax(0, 1fr);
-        align-content: start;
-        gap: var(--swc-spacing-200);
-      }
-      .vitals {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--swc-card-default-width-extra-small)), 1fr));
-        gap: var(--swc-spacing-100);
-      }
-      .vital {
-        display: grid;
-        align-content: start;
-        gap: var(--swc-spacing-50);
-        border-radius: var(--swc-corner-radius-medium-default);
-        padding: var(--swc-spacing-200);
-        background: var(--swc-background-layer-1-color);
-      }
-      .label {
-        color: var(--swc-neutral-subdued-content-color-default);
-        font-size: var(--swc-font-size-75);
-      }
-      .value {
-        font-size: var(--swc-font-size-300);
-        font-weight: var(--swc-bold-font-weight);
-        font-variant-numeric: tabular-nums;
-      }
-      .unit,
-      .delta {
-        color: var(--swc-neutral-subdued-content-color-default);
-        margin-inline-start: var(--swc-spacing-75);
-      }
-      svg {
-        display: block;
-        width: 100%;
-        height: var(--swc-component-height-100);
-      }
-      polyline {
-        fill: none;
-        stroke: var(--swc-accent-visual-color);
-        stroke-width: 1.5;
-      }
-      swc-meter {
-        width: 100%;
-      }
-      .alerts {
-        display: grid;
-        gap: var(--swc-spacing-75);
-        margin: 0;
-        padding: 0;
-        list-style: none;
-      }
-      .alert {
-        display: grid;
-        grid-template-columns: auto minmax(0, 1fr);
-        gap: var(--swc-spacing-100);
-        align-items: start;
-        border-radius: var(--swc-corner-radius-medium-default);
-        padding: var(--swc-spacing-100) var(--swc-spacing-200);
-        background: var(--swc-notice-subtle-background-color-default);
-      }
-      .alert[data-severity='error'] {
-        background: var(--swc-negative-subtle-background-color-default);
-      }
-      .alert swc-icon-alert-triangle {
-        color: var(--swc-icon-color-notice);
-      }
-      .alert swc-icon-alert-diamond {
-        color: var(--swc-icon-color-negative);
-      }
-      .alert .detail {
-        display: block;
-        color: var(--swc-neutral-subdued-content-color-default);
-      }
-      .alert > div {
-        min-width: 0;
-      }
-      .alert .command {
-        display: flex;
-        align-items: center;
-        gap: var(--swc-spacing-100);
-        margin-block-start: var(--swc-spacing-75);
-        padding-inline-start: var(--swc-spacing-100);
-        border-radius: var(--swc-corner-radius-medium-default);
-        background: var(--swc-background-layer-1-color);
-      }
-      .alert code {
-        flex: 1;
-        min-width: 0;
-        overflow-x: auto;
-        white-space: nowrap;
-        font-family: var(--swc-code-font-family-stack);
-        font-size: var(--swc-font-size-75);
-        color: var(--swc-code-color);
-      }
-      .alert .lead {
-        display: block;
-        margin-block-start: var(--swc-spacing-75);
-        color: var(--swc-neutral-subdued-content-color-default);
-      }
-      .alert .uncopied {
-        display: block;
-        color: var(--swc-negative-content-color-default);
-      }
-      .sections {
-        display: grid;
-        margin: 0;
-        padding: 0;
-        list-style: none;
-      }
-      .section {
-        display: grid;
-      }
-      .line {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: var(--swc-spacing-100);
-        min-height: var(--swc-component-height-100);
-        padding: var(--swc-spacing-50) 0;
-      }
-      .toggle {
-        all: unset;
-        box-sizing: border-box;
-        flex: 1 1 auto;
-        min-width: 0;
-        display: flex;
-        align-items: center;
-        gap: var(--swc-spacing-75);
-        cursor: pointer;
-        border-radius: var(--swc-corner-radius-small-default);
-      }
-      .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 1 auto;
-        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: break-word;
-      }
-      .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: break-word;
-      }
-    `
-  ];
-  subscribe(model) {
-    return [model.monitor.on("snapshot", () => this.requestUpdate())];
-  }
-  focus() {
-    this.focusOn(".bar swc-action-button");
-  }
-  #vital(vital) {
-    if (vital.ratio !== void 0) {
-      return b`<div class="vital" data-id=${vital.id}>
-        <swc-meter
-          size="s"
-          variant=${meterVariant2(vital.ratio)}
-          value=${Math.round(vital.ratio * 100)}
-          value-label=${vital.value}
-          ><span slot="label">${vital.label}</span>${vital.unit ? b`<span slot="description">${vital.unit}</span>` : A}</swc-meter
-        >
-      </div>`;
-    }
-    const line = vital.series ? sparkline(vital.series) : "";
-    return b`<div class="vital" data-id=${vital.id}>
-      <div class="label">${vital.label}</div>
-      <div><span class="value">${vital.value}</span>${vital.unit ? b`<span class="unit">${vital.unit}</span>` : A}${vital.delta ? b`<span class="delta">${vital.delta}</span>` : A}</div>
-      ${line ? b`<svg viewBox="0 0 120 28" preserveAspectRatio="none" aria-hidden="true">${w`<polyline points=${line}></polyline>`}</svg>` : A}
-    </div>`;
-  }
-  #alert(alert) {
-    const error = alert.severity === "error";
-    return b`<li class="alert" data-severity=${alert.severity}>
-      ${error ? b`<swc-icon-alert-diamond size="s" aria-hidden="true"></swc-icon-alert-diamond>` : b`<swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle>`}
-      <div><span class="sr">${error ? "Error: " : "Warning: "}</span><strong>${alert.title}</strong><span class="detail">${alert.detail}</span>${alert.command ? this.#command(alert.id, alert.command, alert.commandLabel ?? "Run") : A}</div>
-    </li>`;
-  }
-  #command(id, text2, label) {
-    const copied = this.copied?.id === id && this.copied.text === text2 ? this.copied : null;
-    return b`<span class="lead">${label}:</span><div class="command" data-command><code>${text2}</code><swc-action-button size="s" quiet data-action="copy-command" accessible-label=${copied?.done ? "Copied" : "Copy command"} @click=${() => this.#copy(id, text2)}><swc-icon-copy slot="icon"></swc-icon-copy>${copied?.done ? "Copied" : "Copy"}</swc-action-button></div>${copied && !copied.done ? b`<span class="uncopied" role="alert" data-error="copy">Couldn’t copy. Select the command and copy it.</span>` : A}`;
-  }
-  async #copy(id, text2) {
-    this.copied = { id, text: text2, done: await copyText(text2) };
-  }
-  #open(id) {
-    this.dispatchEvent(
-      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.split(/(?<=\/)/).map((part2, i26) => i26 ? b`<wbr>${part2}` : part2)}</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];
-    const rows = section.rows.length > 0;
-    const open = rows && (this.expanded[section.id] ?? flag !== null);
-    const list5 = `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 ? list5 : 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=${list5} aria-label=${section.label}>${c(
-      section.rows,
-      (row, i26) => row.id ?? i26,
-      (row) => this.#row(row)
-    )}</ul>` : A}
-    </li>`;
-  }
-  render() {
-    const snapshot2 = this.model?.monitor.snapshot();
-    return b`<div class="bar">
-        <span class="heading"><strong>Live monitor</strong><span>${snapshot2 ? `Updated ${new Date(snapshot2.updatedAt).toISOString().slice(11, 19)} UTC` : "No data"}</span></span>
-        <swc-action-button size="s" quiet @click=${() => this.model?.monitor.resync()}><swc-icon-refresh slot="icon"></swc-icon-refresh>Re-sync</swc-action-button>
-      </div>
-      <div class="body">
-        ${snapshot2 ? b`<div class="vitals">${snapshot2.vitals.map((vital) => this.#vital(vital))}</div>
-              ${snapshot2.alerts.length ? b`<ul class="alerts" aria-label="Alerts">${snapshot2.alerts.map((alert) => this.#alert(alert))}</ul>` : A}
-              <ul class="sections" aria-label="Activity">${snapshot2.sections.map((section) => this.#section(section))}</ul>` : A}
-      </div>`;
-  }
-};
-
 // src/app/notices.ts
 var SliccNotices = class extends ModelElement {
   static properties = {
@@ -29131,8 +29401,8 @@ function revealed(name, entries, now = Date.now(), more = false) {
   const start = startOfDay(now);
   const today = reveals.filter((entry) => entry.at >= start).length;
   const partial = more && (entries[entries.length - 1]?.at ?? 0) >= start;
-  const when = today ? `${partial ? "at least " : ""}${today} ${today === 1 ? "time" : "times"} today` : since(last.at, now);
-  return b`Revealed to programs ${when}, last by ${who(last)} with <code>${last.argv}</code>`;
+  const when2 = today ? `${partial ? "at least " : ""}${today} ${today === 1 ? "time" : "times"} today` : since(last.at, now);
+  return b`Revealed to programs ${when2}, last by ${who(last)} with <code>${last.argv}</code>`;
 }
 function changes(entry, devices) {
   if (entry.changes)
@@ -29193,8 +29463,8 @@ var importKinds = {
 };
 function exported(at) {
   if (at === void 0) return A;
-  const when = at === null ? "Never exported" : `Last exported ${new Intl.DateTimeFormat(void 0, { dateStyle: "medium" }).format(at)}`;
-  return b`<span class="muted" data-exported>${when}</span>`;
+  const when2 = at === null ? "Never exported" : `Last exported ${new Intl.DateTimeFormat(void 0, { dateStyle: "medium" }).format(at)}`;
+  return b`<span class="muted" data-exported>${when2}</span>`;
 }
 function prompt2(text2) {
   return text2.length > 200 ? `${text2.slice(0, 199)}\u2026` : text2;
@@ -30313,6 +30583,9 @@ var SliccSettings = class extends ThemedElement {
         color: var(--swc-neutral-subdued-content-color-default);
         font-size: var(--swc-font-size-75);
       }
+      .switched {
+        grid-column: 2;
+      }
       .failure,
       .problem {
         display: flex;
@@ -30331,6 +30604,9 @@ var SliccSettings = class extends ThemedElement {
           grid-template-columns: minmax(0, 1fr);
           gap: var(--swc-spacing-75);
         }
+        .switched {
+          grid-column: 1;
+        }
         .accounts {
           grid-template-columns: minmax(0, 1fr) max-content;
           row-gap: var(--swc-spacing-400);
@@ -30361,10 +30637,15 @@ var SliccSettings = class extends ThemedElement {
   ];
   subscribe(model) {
     const update = () => this.requestUpdate();
+    const settle2 = () => {
+      settleModels(model);
+      update();
+    };
+    queueMicrotask(() => settleModels(model));
     return [
       ...super.subscribe(model),
-      model.settings.on("settings", update),
-      model.settings.on("accounts", update),
+      model.settings.on("settings", settle2),
+      model.settings.on("accounts", settle2),
       ...model.vault ? [model.vault.on("status", update)] : []
     ];
   }
@@ -30374,6 +30655,15 @@ var SliccSettings = class extends ThemedElement {
   #update(patch) {
     this.model?.settings.update(patch);
   }
+  #pickModel(event2) {
+    forgetSwitch(this.model);
+    this.#update({ model: this.#value(event2) });
+  }
+  #switched(current) {
+    const note = modelSwitch(this.model);
+    if (note?.to.id !== current) return A;
+    return b`<p class="hint switched" role="status" data-switched>Switched to ${note.to.label} because the previous model's provider isn't set up.</p>`;
+  }
   #value(event2) {
     return event2.target.value;
   }
@@ -30721,9 +31011,10 @@ var SliccSettings = class extends ThemedElement {
       <div class="rows">
       <div class="row">
         <span class="label" id="model">Model for new cones</span>
-        <sp-picker size="m" label="Model" aria-labelledby="model" value=${value.model} @change=${(e120) => this.#update({ model: this.#value(e120) })}>
+        <sp-picker size="m" label="Model" aria-labelledby="model" value=${value.model} @change=${(e120) => this.#pickModel(e120)}>
           ${chatModels(settings.models()).map((option2) => b`<sp-menu-item value=${option2.id}>${option2.label}<span slot="description">${option2.provider}</span></sp-menu-item>`)}
         </sp-picker>
+        ${this.#switched(value.model)}
       </div>
       <div class="row">
         <span class="label" id="thinking">Thinking</span>
@@ -31140,12 +31431,12 @@ var SliccSprinkle = class extends ThemedElement {
     const held = { port, id, ready: false, value: null };
     this.#held = held;
     this.#frame = { key: "", doc: "" };
-    const settle = (value) => {
+    const settle2 = (value) => {
       held.value = value ?? null;
       held.ready = true;
       if (this.#held === held) this.requestUpdate();
     };
-    ask.call(port, id, "getState", []).then(settle, () => settle(null));
+    ask.call(port, id, "getState", []).then(settle2, () => settle2(null));
   }
   willUpdate(changed) {
     super.willUpdate(changed);
@@ -43113,8 +43404,8 @@ var SecondPassVisitor = {
       openRefs,
       reffedNodesByReferencer
     }) {
-      const origin = groupOriginByCopy.get(node);
-      if (origin && openRefs.has(node.number)) {
+      const origin2 = groupOriginByCopy.get(node);
+      if (origin2 && openRefs.has(node.number)) {
         const recursion2 = setParent(createRecursion(node.number), parent);
         reffedNodesByReferencer.set(recursion2, openRefs.get(node.number));
         replaceWith(recursion2);
@@ -43131,7 +43422,7 @@ var SecondPassVisitor = {
         if (
           // This group is from subroutine expansion, and there's a multiplex value from either the
           // origin node or a prior subroutine expansion group with the same origin
-          origin === multiplex.node || origin && origin === multiplex.origin || // This group is not from subroutine expansion, and it comes after a subroutine expansion
+          origin2 === multiplex.node || origin2 && origin2 === multiplex.origin || // This group is not from subroutine expansion, and it comes after a subroutine expansion
           // group that refers to this group
           node === multiplex.origin
         ) {
@@ -43139,14 +43430,14 @@ var SecondPassVisitor = {
           break;
         }
       }
-      multiplexCapturesToLeftByRef.get(node.number).push({ node, origin });
+      multiplexCapturesToLeftByRef.get(node.number).push({ node, origin: origin2 });
       if (node.name) {
-        multiplexCapturesToLeftByRef.get(node.name).push({ node, origin });
+        multiplexCapturesToLeftByRef.get(node.name).push({ node, origin: origin2 });
       }
       if (node.name) {
         const groupsWithSameName = getOrInsert(groupsByName, node.name, /* @__PURE__ */ new Map());
         let hasDuplicateNameToRemove = false;
-        if (origin) {
+        if (origin2) {
           hasDuplicateNameToRemove = true;
         } else {
           for (const groupInfo of groupsWithSameName.values()) {
@@ -43618,11 +43909,11 @@ var generator = {
   CapturingGroup(node, state3, gen) {
     const { body: body4, name, number: number2 } = node;
     const data = { ignoreCase: state3.currentFlags.ignoreCase };
-    const origin = state3.originMap.get(node);
-    if (origin) {
+    const origin2 = state3.originMap.get(node);
+    if (origin2) {
       data.hidden = true;
-      if (number2 > origin.number) {
-        data.transferTo = origin.number;
+      if (number2 > origin2.number) {
+        data.transferTo = origin2.number;
       }
     }
     state3.captureMap.set(number2, data);
@@ -70542,13 +70833,13 @@ var DockviewComponent = class extends BaseGrid {
   /** ISmartGuidesHost: the main grid's splitter (sash) rectangles, in the
   *  floating container's coordinate space, for the optional splitter target. */
   getGridSplitterRects() {
-    const origin = this.getFloatingContainer().getBoundingClientRect();
+    const origin2 = this.getFloatingContainer().getBoundingClientRect();
     const result = [];
     this.gridview.element.querySelectorAll(".dv-sash").forEach((sash) => {
       const r40 = sash.getBoundingClientRect();
       result.push({
-        left: r40.left - origin.left,
-        top: r40.top - origin.top,
+        left: r40.left - origin2.left,
+        top: r40.top - origin2.top,
         width: r40.width,
         height: r40.height
       });
@@ -72775,10 +73066,10 @@ var DockviewComponent = class extends BaseGrid {
   * therefore report as one, tagged with the kind of the last to finish.
   */
   openMutation(kind) {
-    const origin = this._origin;
+    const origin2 = this._origin;
     if (this._mutationDepth === 0) this._onWillMutateLayout.fire({
       kind,
-      origin
+      origin: origin2
     });
     this._mutationDepth++;
     return () => {
@@ -72788,7 +73079,7 @@ var DockviewComponent = class extends BaseGrid {
         this.flushLocationChanges();
         this._onDidMutateLayout.fire({
           kind,
-          origin
+          origin: origin2
         });
       }
     };
@@ -72852,10 +73143,10 @@ var DockviewComponent = class extends BaseGrid {
   * call made while a mutation is already in flight) keeps whatever the
   * enclosing operation established, so the trigger always wins.
   */
-  withOrigin(origin, func) {
+  withOrigin(origin2, func) {
     if (this._originDepth > 0 || this._mutationDepth > 0) return func();
     const previous = this._origin;
-    this._origin = origin;
+    this._origin = origin2;
     this._originDepth++;
     try {
       return func();
@@ -83018,8 +83309,9 @@ export {
   panelCommand,
   prompt,
   resolveColor,
+  secretRules,
   setGrammarBase,
-  surfaces
+  surfaces2 as surfaces
 };
 /*! Bundled license information: