@ai-ecoverse/slicc-spectrum 1.101.1 → 1.101.2

package/dist/slicc-ui.js

@@ -31013,8 +31013,8 @@ function question(item2, handlers) {
     ${body4}
   </div>`;
 }
-function questionTurn(item2, handlers, pile) {
-  return b`<swc-conversation-turn type="system" class="message decision-turn" data-id=${item2.id} data-state=${item2.state} data-pending=${item2.state === "open" && handlers.seat === void 0 ? "" : A} accessible-label=${`Question: ${item2.question}`} style=${pileStyle(pile)} @click=${reveal} @keydown=${reveal}>${question(item2, handlers)}</swc-conversation-turn>`;
+function questionTurn(item2, handlers) {
+  return b`<swc-conversation-turn type="system" class="message decision-turn" tabindex="-1" data-id=${item2.id} data-state=${item2.state} data-pending=${item2.state === "open" && handlers.seat === void 0 ? "" : A} accessible-label=${`Question: ${item2.question}`} @click=${reveal} @keydown=${reveal}>${question(item2, handlers)}</swc-conversation-turn>`;
 }
 var delegationVerbs = {
   feed: "fed",
@@ -31348,46 +31348,49 @@ function clock(ms) {
 }
 var still = () => globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
 function reveal(event2) {
-  if (event2.target.closest("swc-button, input, textarea")) return;
+  if (event2.target.closest("swc-button, swc-action-button, input, textarea")) return;
   if (event2 instanceof KeyboardEvent && (event2.key !== "Enter" || event2.target !== event2.currentTarget))
     return;
   show(event2.currentTarget);
 }
 function show(turn) {
-  const log = turn.closest(".log");
+  const place4 = [
+    ...turn.getRootNode().querySelectorAll(".ask-place")
+  ].find((candidate) => candidate.dataset.place === turn.dataset.id);
+  const log = place4?.closest(".log");
   if (!log) return;
-  const origin2 = log.getBoundingClientRect().top;
-  const pile = turn.getBoundingClientRect().top - origin2;
-  turn.style.position = "static";
-  const flow4 = turn.getBoundingClientRect();
-  turn.style.position = "";
-  const natural = flow4.top - origin2;
-  const bottom = Math.max(16, log.clientHeight - flow4.height - 16);
-  if (Math.abs(pile - natural) > 1)
-    log.scrollTo({ top: log.scrollTop + natural - bottom, behavior: still() ? "auto" : "smooth" });
-}
-var flatPile = { stack: 0 };
-function pileStyle(pile) {
-  return `--stack: ${pile.stack}`;
+  const end = Number.parseFloat(getComputedStyle(log).scrollPaddingBlockEnd) || 0;
+  const at = place4.getBoundingClientRect().top - log.getBoundingClientRect().top;
+  log.scrollTo({
+    top: log.scrollTop + at - log.clientHeight + end,
+    behavior: still() ? "auto" : "smooth"
+  });
+}
+function askTimer(at, now = Date.now()) {
+  const left = at - now;
+  return b`<span class="timer" data-timer aria-hidden="true">${left <= 0 ? "Timed out" : clock(left)}</span><span class="sr">${spokenLeft(left, at)}</span>`;
 }
 function spokenLeft(left, at) {
   if (left <= 0) return "Timed out";
   return left <= 6e4 ? "Less than a minute left" : `Expires at ${deadline(at)}`;
 }
-function decision(message, handlers, pile) {
+function decision(message, handlers) {
   const at = message.expiresAt;
-  const left = at === void 0 ? null : at - Date.now();
-  const expired = left !== null && left <= 0;
+  const now = Date.now();
+  const expired = at !== void 0 && at <= now;
   const guest = handlers.seat !== void 0;
-  const timer = left === null || guest && !expired ? A : b`<span class="timer" data-timer aria-hidden="true">${expired ? "Timed out" : clock(left)}</span><span class="sr">${spokenLeft(left, at)}</span>`;
+  const timer = at === void 0 || guest && !expired ? A : askTimer(at, now);
   const settled3 = expired || guest;
   const actions2 = expired ? A : guest ? hostAnswers : b`<div class="decide">
         <swc-button size="s" variant="secondary" fill-style="outline" data-action="deny" ?disabled=${handlers.readOnly} @click=${() => handlers.resolve(message.id, "dismissed")}>Deny</swc-button>
         <swc-button size="s" variant="accent" data-action="allow" ?disabled=${handlers.readOnly} @click=${() => handlers.resolve(message.id, "confirmed")}>Allow</swc-button>
       </div>`;
-  return b`<swc-conversation-turn type="system" class="message decision-turn" accessible-label=${`Permission request from ${message.title}`} data-id=${message.id} data-pending=${settled3 ? A : ""} data-expired=${expired ? "" : A} style=${pileStyle(pile)} @click=${reveal} @keydown=${reveal}>
+  const detail = settled3 ? void 0 : handlers.detail;
+  const shown4 = !!detail?.has(message.id);
+  const more = detail ? b`<swc-action-button size="s" quiet class="detail" data-action="ask-detail" aria-expanded=${shown4 ? "true" : "false"} accessible-label=${shown4 ? "Hide details" : "Show details"} @click=${() => detail.toggle(message.id)}><swc-icon-chevron-right slot="icon" class="chevron"></swc-icon-chevron-right></swc-action-button>` : A;
+  return b`<swc-conversation-turn type="system" class="message decision-turn" tabindex="-1" accessible-label=${`Permission request from ${message.title}`} data-id=${message.id} data-pending=${settled3 ? A : ""} data-expired=${expired ? "" : A} data-detail=${shown4 ? "" : A} @click=${reveal} @keydown=${reveal}>
     <div class="decision" data-kind="approval">
-      <div class="decision-head"><span class="who">${message.title}</span>${timer}</div>
+      <div class="decision-head"><span class="who">${message.title}</span>${timer}${more}</div>
       <p class="decision-text">${message.text}</p>
       ${message.body ? b`<pre class="command">${message.body}</pre>` : A}
       ${actions2}
@@ -31420,8 +31423,8 @@ function lickContent(message, body4, handlers) {
   const shown4 = !body4 ? A : scoop ? b`<div class="text">${markdown(body4)}</div>` : b`<pre class="output">${body4}</pre>`;
   return b`<div class="report">${shown4}${report ? b`<swc-button size="s" variant="secondary" fill-style="outline" data-action="open-report" @click=${() => handlers.open(report)}>Open the report</swc-button>` : A}</div>`;
 }
-function lick(message, handlers, stamp = true, pile = flatPile) {
-  if (pendingApproval(message)) return decision(message, handlers, pile);
+function lick(message, handlers, stamp = true) {
+  if (pendingApproval(message)) return decision(message, handlers);
   const [line, failed2, icon, label] = scoopLine(message);
   const severity = message.severity ?? (failed2 ? "error" : void 0);
   const outcome = message.state === "confirmed" ? "Allowed" : message.state === "dismissed" ? "Denied" : "";
@@ -32227,15 +32230,6 @@ var messageCss = i`
   }
   swc-conversation-turn.decision-turn {
     container-type: inline-size;
-    transition:
-      top var(--swc-animation-duration-300) var(--swc-animation-ease-out),
-      transform var(--swc-animation-duration-300) var(--swc-animation-ease-out),
-      filter var(--swc-animation-duration-300) var(--swc-animation-ease-out);
-  }
-  @media (prefers-reduced-motion: reduce) {
-    swc-conversation-turn.decision-turn {
-      transition: none;
-    }
   }
   slicc-sprinkle[inline] {
     position: relative;
@@ -32243,19 +32237,8 @@ var messageCss = i`
     inline-size: calc(100cqw + var(--swc-spacing-300) * 2);
     transform: translateX(-50%);
   }
-  swc-conversation-turn.decision-turn[data-pending] {
-    position: sticky;
-    top: calc(var(--stack, 0) * (var(--swc-spacing-600) + var(--swc-spacing-75)));
-    z-index: calc(var(--stack, 0) + 1);
-  }
-  swc-conversation-turn.decision-turn[data-pinned] {
-    transform: scale(calc(1 - var(--depth, 0) * 0.03));
-    transform-origin: top center;
-    filter: blur(calc(var(--depth, 0) * 0.6px));
-  }
   .decision-turn[data-pending] .decision {
     border-color: var(--swc-gray-300);
-    box-shadow: var(--swc-drop-shadow-elevated);
   }
   .decision-turn[data-pending]:focus-visible {
     outline: none;
@@ -32285,6 +32268,12 @@ var messageCss = i`
   .decision-head .who {
     font-weight: var(--swc-bold-font-weight);
   }
+  .decision-head .detail {
+    display: none;
+  }
+  .decision-turn[data-detail] .detail .chevron {
+    transform: rotate(90deg);
+  }
   .timer {
     color: var(--swc-neutral-subdued-content-color-default);
     font-variant-numeric: tabular-nums;
@@ -34407,18 +34396,35 @@ var navigation = /* @__PURE__ */ new Set([
 ]);
 var upward = /* @__PURE__ */ new Set(["ArrowUp", "PageUp", "Home"]);
 var compactWidth = 560;
-function pendingKeys(messages) {
+function pendingAsks(messages) {
   return messages.flatMap((message) => {
-    if (waiting(message)) return [message.id];
+    if (waiting(message))
+      return [[message.id, { id: message.id, at: message.expiresAt }]];
     if (message.role !== "assistant") return [];
     return message.parts.flatMap(
-      (part2) => part2.type === "question" && part2.question.state === "open" ? [`${message.id}:${part2.question.id}`] : []
+      (part2) => part2.type === "question" && part2.question.state === "open" ? [[`${message.id}:${part2.question.id}`, { id: part2.question.id }]] : []
     );
   });
 }
-function pendingPiles(messages) {
-  const keys = pendingKeys(messages);
-  return new Map(keys.map((key2, stack) => [key2, { stack }]));
+function into(card2, dock2) {
+  const box = card2.getBoundingClientRect();
+  const view = dock2.getBoundingClientRect();
+  const start2 = view.top + (Number.parseFloat(getComputedStyle(dock2).scrollPaddingBlockStart) || 0);
+  if (box.top < start2) dock2.scrollTop -= start2 - box.top;
+  else if (box.bottom > view.bottom)
+    dock2.scrollTop += Math.min(box.bottom - view.bottom, box.top - start2);
+}
+var place = (id) => b`<div class="ask-place" data-place=${id} aria-hidden="true"></div>`;
+function dock(entries, messages, seat) {
+  const docked = new Map(seat ? [] : pendingAsks(messages));
+  const asks = [];
+  const items = entries.map(([key2, card2]) => {
+    const ask = docked.get(key2);
+    if (!ask) return [key2, card2];
+    asks.push({ key: key2, id: ask.id, at: ask.at, card: card2 });
+    return [key2, place(ask.id)];
+  });
+  return { items, asks };
 }
 var failed = (message) => message.role === "assistant" ? message.status === "error" : message.role === "system" && message.kind === "error";
 function empty3(watch, seat, name) {
@@ -34603,7 +34609,118 @@ var SliccChat = class _SliccChat extends ThemedElement {
         padding: var(--swc-spacing-400) var(--swc-spacing-300) calc(var(--composer-height, 0px) + var(--composer-fade) + 1lh);
         scroll-padding-block-end: calc(var(--composer-height, 0px) + var(--composer-fade) + var(--swc-spacing-200));
         font-size: var(--swc-font-size-200);
-        scroll-padding-block-start: var(--pile, 0px);
+      }
+      .ask-place {
+        block-size: 0;
+        margin-block-end: calc(-1 * var(--swc-spacing-400));
+      }
+      .asks {
+        flex: 0 1 auto;
+        min-block-size: 0;
+        max-block-size: 50%;
+        overflow-y: auto;
+        container-type: inline-size;
+        position: relative;
+        z-index: 1;
+        padding: var(--swc-spacing-200) var(--swc-spacing-300);
+        border-block-end: var(--swc-border-width-100) solid var(--swc-gray-200);
+        background: var(--swc-background-layer-2-color);
+        box-shadow: 0 var(--swc-drop-shadow-elevated-y) var(--swc-drop-shadow-elevated-blur) var(--swc-drop-shadow-color-100);
+        font-size: var(--swc-font-size-200);
+        scrollbar-width: thin;
+        scrollbar-color: transparent transparent;
+      }
+      .asks:hover,
+      .asks:focus-within {
+        scrollbar-color: var(--swc-gray-500) transparent;
+      }
+      .asks::after {
+        content: '';
+        position: sticky;
+        bottom: calc(-1 * var(--swc-spacing-200));
+        display: none;
+        block-size: var(--swc-spacing-500);
+        margin-block-start: calc(-1 * var(--swc-spacing-500));
+        background: linear-gradient(to bottom, transparent, var(--swc-background-layer-2-color));
+        pointer-events: none;
+      }
+      .asks[data-more]::after {
+        display: block;
+      }
+      .asks:has(.waiting) {
+        scroll-padding-block-start: calc(var(--swc-component-height-100) + var(--swc-spacing-100));
+      }
+      .asks + .stage {
+        min-block-size: calc(var(--composer-height, 0px) + var(--composer-fade, 0px) + var(--swc-spacing-1000));
+      }
+      .asks[data-open] + .stage {
+        min-block-size: calc(var(--composer-height, 0px) + var(--composer-fade, 0px));
+      }
+      .asks[data-open] .decision {
+        gap: var(--swc-spacing-75);
+        padding-block: var(--swc-spacing-100);
+      }
+      .asks[data-open] .decide {
+        padding: 0;
+      }
+      .asks[data-open] .question.decision .options {
+        margin-block-start: 0;
+      }
+      .asks[data-open] .decision-head {
+        align-items: center;
+      }
+      .asks[data-open] .decision-head .who {
+        margin-inline-end: auto;
+      }
+      .asks[data-open] .decision-head .detail {
+        display: inline-flex;
+      }
+      .asks[data-open] .decision-turn:not([data-detail]) .command {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .asks[data-open] .decision-turn:not([data-detail]) .decision-text {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .waiting {
+        position: sticky;
+        top: calc(-1 * var(--swc-spacing-200));
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        gap: var(--swc-spacing-100);
+        margin-block: calc(-1 * var(--swc-spacing-200)) var(--swc-spacing-100);
+        padding: var(--swc-spacing-200) var(--swc-spacing-700) 0;
+        background: var(--swc-background-layer-2-color);
+        font-size: var(--swc-font-size-100);
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
+      @container (inline-size < 480px) {
+        .waiting {
+          padding-inline: var(--swc-spacing-300);
+        }
+      }
+      .ask-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--swc-spacing-200);
+      }
+      .waiting .timer {
+        margin-inline: auto var(--swc-spacing-300);
+      }
+      .waiting swc-icon-chevron-down {
+        transition: transform var(--swc-animation-duration-100) var(--swc-animation-ease-out);
+      }
+      .asks[data-open] .waiting swc-icon-chevron-down {
+        transform: rotate(180deg);
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .waiting swc-icon-chevron-down {
+          transition: none;
+        }
       }
       @container (min-width: 600px) {
         .column {
@@ -34656,8 +34773,16 @@ var SliccChat = class _SliccChat extends ThemedElement {
     `
   ];
   #licks = new ViewSet(this, "chat:licks");
+  #details = /* @__PURE__ */ new Set();
   #handlers = {
     licks: this.#licks,
+    detail: {
+      has: (id) => this.#details.has(id),
+      toggle: (id) => {
+        if (!this.#details.delete(id)) this.#details.add(id);
+        this.requestUpdate();
+      }
+    },
     color: "light",
     model: null,
     readOnly: false,
@@ -34725,15 +34850,29 @@ var SliccChat = class _SliccChat extends ThemedElement {
   #tail = "";
   #held = "";
   #mark = 0;
+  #all = false;
+  #seen = "";
   #focused = (event2) => {
-    const turn = event2.target.closest(".decision-turn[data-pending]");
-    this.#held = turn?.dataset.id ?? "";
-    if (turn && Number(turn.style.getPropertyValue("--depth")) > 0) show(turn);
+    const target2 = event2.target;
+    this.#held = target2.closest(".decision-turn[data-pending]")?.dataset.id ?? "";
+    const card2 = target2.closest(".ask");
+    if (card2) into(card2, card2.closest(".asks"));
+  };
+  #more = () => {
+    const dock2 = this.renderRoot.querySelector(".asks");
+    if (!dock2) return;
+    const end = Number.parseFloat(getComputedStyle(dock2).paddingBlockEnd) || 0;
+    dock2.toggleAttribute(
+      "data-more",
+      dock2.scrollHeight - dock2.scrollTop - dock2.clientHeight > end + 1
+    );
   };
   #refocus() {
-    if (!this.#held || this.renderRoot.querySelector(":focus")) return;
+    if (!this.#held || this.renderRoot.activeElement) return;
     this.#held = "";
-    const next = this.renderRoot.querySelector(".decision-turn[data-pending]");
+    const next = [
+      ...this.renderRoot.querySelectorAll(".asks .decision-turn[data-pending]")
+    ].at(-1);
     if (next) next.focus();
     else this.renderRoot.querySelector("slicc-composer")?.focus();
   }
@@ -34744,6 +34883,7 @@ var SliccChat = class _SliccChat extends ThemedElement {
     return seat ? mine(last, seat) : (last.origin ?? "user") === "user";
   }
   #resize = new ResizeObserver(() => {
+    this.#more();
     const log = this.#log();
     if (!this.#stuck && log.scrollHeight <= log.clientHeight) this.#follow();
     else this.#pin();
@@ -34794,7 +34934,6 @@ var SliccChat = class _SliccChat extends ThemedElement {
       this.#stuck = false;
     this.#last = log.scrollTop;
     this.#height = log.scrollHeight;
-    this.#pile();
   };
   #intent = {
     passive: true,
@@ -34864,40 +35003,10 @@ var SliccChat = class _SliccChat extends ThemedElement {
       clearInterval(this.#tick);
       this.#tick = void 0;
     }
-    this.#pile();
     this.#refocus();
-  }
-  #pile() {
-    const turns = [
-      ...this.renderRoot.querySelectorAll(".decision-turn[data-pending]")
-    ];
-    const drawn = turns.map((turn) => turn.getBoundingClientRect().top);
-    for (const turn of turns) turn.style.position = "static";
-    const flow4 = turns.map((turn) => turn.getBoundingClientRect().top);
-    for (const turn of turns) turn.style.position = "";
-    const pinned = turns.flatMap(
-      (turn, index2) => drawn[index2] - flow4[index2] > 1 ? [{ turn, stack: Number.parseFloat(turn.style.getPropertyValue("--stack")) }] : []
-    );
-    for (const turn of turns) {
-      if (!pinned.some((entry) => entry.turn === turn)) {
-        turn.removeAttribute("data-pinned");
-        turn.style.removeProperty("--depth");
-      }
-    }
-    for (const { turn, stack } of pinned) {
-      turn.setAttribute("data-pinned", "");
-      turn.style.setProperty(
-        "--depth",
-        String(pinned.filter((other) => other.stack > stack).length)
-      );
-    }
-    const log = this.renderRoot.querySelector(".log");
-    const top = log?.getBoundingClientRect().top ?? 0;
-    const reach3 = Math.max(
-      0,
-      ...pinned.map(({ turn }) => turn.getBoundingClientRect().bottom - top)
-    );
-    log?.style.setProperty("--pile", `${reach3}px`);
+    const asks = [...this.renderRoot.querySelectorAll(".ask-list .decision-turn")];
+    for (const turn of asks) turn.tabIndex = 0;
+    this.#more();
   }
   #timed() {
     const model = this.model;
@@ -34907,6 +35016,7 @@ var SliccChat = class _SliccChat extends ThemedElement {
     );
   }
   firstUpdated() {
+    this.renderRoot.addEventListener("focusin", this.#focused);
     this.#observe();
   }
   focus() {
@@ -35013,7 +35123,7 @@ var SliccChat = class _SliccChat extends ThemedElement {
     }
     this.#settings(account);
   }
-  #message(message, agent, suggestion, changed2, extra, owners, stamp, pile) {
+  #message(message, agent, suggestion, changed2, extra, owners, stamp) {
     const model = this.model;
     const handlers = { ...this.#handlers, owners };
     switch (message.role) {
@@ -35037,7 +35147,7 @@ var SliccChat = class _SliccChat extends ThemedElement {
       case "system":
         return system(message, this.#handlers);
       default:
-        return lick(message, this.#handlers, stamp, pile);
+        return lick(message, this.#handlers, stamp);
     }
   }
   #items(messages, agent) {
@@ -35050,9 +35160,8 @@ var SliccChat = class _SliccChat extends ThemedElement {
     const showThinking = model.settings.get().showThinking;
     const extra = /* @__PURE__ */ new Map();
     const owners = /* @__PURE__ */ new Map();
-    const into = /* @__PURE__ */ new Map();
+    const into2 = /* @__PURE__ */ new Map();
     const stamped = stamps(messages);
-    const piles = pendingPiles(messages);
     let anchor = null;
     for (const message of messages) {
       const calls = toolOnly(message, showThinking);
@@ -35063,14 +35172,14 @@ var SliccChat = class _SliccChat extends ThemedElement {
           at: message.createdAt,
           stamp: stamped.has(message.id)
         });
-        into.set(message.id, anchor.id);
+        into2.set(message.id, anchor.id);
         continue;
       }
       anchor = toolTail(message, showThinking) ? message : null;
     }
-    const target2 = last && (into.get(last.id) ?? last.id);
+    const target2 = last && (into2.get(last.id) ?? last.id);
     for (const message of messages) {
-      if (into.has(message.id)) continue;
+      if (into2.has(message.id)) continue;
       const label = day(message.createdAt);
       if (label !== previous3) {
         out.push([
@@ -35093,23 +35202,41 @@ var SliccChat = class _SliccChat extends ThemedElement {
           changed2,
           extra.get(message.id) ?? [],
           owners,
-          stamped.has(message.id),
-          piles.get(message.id) ?? flatPile
+          stamped.has(message.id)
         )
       ]);
-      out.push(...this.#questions(message, piles));
+      out.push(...this.#questions(message));
     }
     return out;
   }
-  #questions(message, piles) {
+  #questions(message) {
     if (message.role !== "assistant") return [];
-    return message.parts.flatMap((part2) => {
-      if (part2.type !== "question") return [];
-      const key2 = `${message.id}:${part2.question.id}`;
-      return [
-        [key2, questionTurn(part2.question, this.#handlers, piles.get(key2) ?? flatPile)]
-      ];
-    });
+    return message.parts.flatMap(
+      (part2) => part2.type === "question" ? [[`${message.id}:${part2.question.id}`, questionTurn(part2.question, this.#handlers)]] : []
+    );
+  }
+  #asks(asks) {
+    if (!asks.length) return A;
+    const older = asks.slice(0, -1);
+    const focused2 = this.renderRoot.activeElement?.closest(
+      ".asks .decision-turn"
+    )?.dataset.id;
+    this.#all ||= older.some(({ id }) => id === focused2);
+    this.#all &&= older.length > 0;
+    const open = this.#all;
+    const timed = open ? [] : older.flatMap(({ at }) => at === void 0 ? [] : [at]);
+    const toggle = () => {
+      this.#all = !open;
+      this.requestUpdate();
+    };
+    return b`<section class="asks" aria-label="Waiting for you" ?data-open=${open} @scroll=${this.#more}><div class="column">
+      ${older.length ? b`<div class="waiting"><swc-action-button size="s" quiet data-action="show-waiting" aria-expanded=${open ? "true" : "false"} @click=${toggle}><swc-icon-chevron-down slot="icon"></swc-icon-chevron-down>${asks.length} waiting</swc-action-button>${timed.length ? askTimer(Math.min(...timed)) : A}</div>` : A}
+      <div class="ask-list" aria-live="polite">${c(
+      asks,
+      ({ key: key2 }) => key2,
+      ({ card: card2 }, index2) => b`<div class="ask" ?hidden=${!open && index2 < older.length}>${card2}</div>`
+    )}</div>
+    </div></section>`;
   }
   #newChat(agent) {
     this.model.agent.clear(agent.id);
@@ -35153,10 +35280,18 @@ var SliccChat = class _SliccChat extends ThemedElement {
     const spoken = fresh2 > 0 ? `Jump to latest, ${fresh2} new ${fresh2 === 1 ? "message" : "messages"}` : "Jump to latest";
     return b`<div class="jump"><swc-action-button size="s" data-action="jump-latest" accessible-label=${spoken} @click=${this.#jump}><swc-icon-chevron-down slot="icon"></swc-icon-chevron-down>${label}</swc-action-button><span class="sr" role="status" aria-live="polite" data-jump-status>${fresh2 > 0 ? `${fresh2} new ${fresh2 === 1 ? "message" : "messages"} below` : ""}</span></div>`;
   }
+  #switched(agent) {
+    const id = agent?.id ?? "";
+    if (id === this.#seen) return;
+    this.#seen = id;
+    this.#all = false;
+    this.#details.clear();
+  }
   render() {
     this.#handlers.color = this.color;
     this.#handlers.model = this.model ?? null;
     const agent = this.#agent();
+    this.#switched(agent);
     const watch = watchOnly(this.model);
     const seat = this.model?.seat;
     this.#handlers.readOnly = !!agent?.frozen || !!watch || !!seat;
@@ -35164,7 +35299,7 @@ var SliccChat = class _SliccChat extends ThemedElement {
     this.#handlers.seat = seat?.label;
     const messages = agent ? this.model?.agent.messages(agent.id) ?? [] : [];
     this.#tail = messages.at(-1)?.id ?? "";
-    const items = agent && messages.length > 0 ? this.#items(messages, agent) : [];
+    const { items, asks } = dock(agent ? this.#items(messages, agent) : [], messages, seat);
     const count2 = items.filter(([key2]) => !key2.startsWith("day:")).length;
     if (!this.behind) this.#mark = count2;
     return b`
@@ -35172,6 +35307,7 @@ var SliccChat = class _SliccChat extends ThemedElement {
         ${agent ? this.#meta(agent, !messages.length) : b`<span>No agent</span>`}
       </header>
       <slicc-notices .model=${this.model}></slicc-notices>
+      ${this.#asks(asks)}
       <div class="stage">
         <div
           class="log"
@@ -35185,7 +35321,6 @@ var SliccChat = class _SliccChat extends ThemedElement {
           @touchmove=${this.#intent}
           @keydown=${this.#intent}
           @pointerdown=${this.#hold}
-          @focusin=${this.#focused}
         >
           <div class="column" @keydown=${this.#keys}>
             ${items.length ? b`<swc-conversation-thread>${c(
@@ -40862,8 +40997,8 @@ function sideOf(id) {
   return surface(terminalOf(id) === null ? id : "terminal")?.side ?? "center";
 }
 var home = (panel) => sideOf(panel.id);
-function first(dock, side, sider, except) {
-  return dock.api.panels.find((panel) => panel.id !== except && sider(panel) === side)?.id;
+function first(dock2, side, sider, except) {
+  return dock2.api.panels.find((panel) => panel.id !== except && sider(panel) === side)?.id;
 }
 var neighbours = {
   left: [
@@ -40879,25 +41014,25 @@ var neighbours = {
     ["left", "right"]
   ]
 };
-function place(dock, side, screen, sider, except) {
+function place2(dock2, side, screen, sider, except) {
   const anchor = (id, direction) => id ? { position: { referencePanel: id, direction } } : null;
-  if (screen === "phone") return anchor(dock.api.panels[0]?.id, "within") ?? {};
-  const same = anchor(first(dock, side, sider, except), "within");
+  if (screen === "phone") return anchor(dock2.api.panels[0]?.id, "within") ?? {};
+  const same = anchor(first(dock2, side, sider, except), "within");
   if (same) return same;
   for (const [other, direction] of neighbours[side]) {
-    const found = anchor(first(dock, other, sider, except), direction);
+    const found = anchor(first(dock2, other, sider, except), direction);
     if (found) return found;
   }
   return {};
 }
-function placement(dock, side, screen) {
-  return place(dock, side, screen, home);
+function placement(dock2, side, screen) {
+  return place2(dock2, side, screen, home);
 }
 function views(node2) {
   return node2.type === "leaf" ? node2.data.views : node2.data.flatMap(views);
 }
-function destination(dock, id, side, screen) {
-  const { grid } = dock.api.toJSON();
+function destination(dock2, id, side, screen) {
+  const { grid } = dock2.api.toJSON();
   const root2 = grid.root;
   const columns = String(grid.orientation) === "HORIZONTAL" && root2.type === "branch" ? root2.data.map(views) : [views(root2)];
   const holds = (test) => columns.findIndex((ids) => ids.some((other) => other !== id && test(other)));
@@ -40908,18 +41043,18 @@ function destination(dock, id, side, screen) {
     const at = columns.findIndex((ids) => ids.includes(panel.id));
     return at < middle ? "left" : at > middle ? "right" : "center";
   };
-  return place(dock, side, screen, current, id);
+  return place2(dock2, side, screen, current, id);
 }
-function openSurface(dock, item2, screen, focus = true) {
-  if (dock.has(item2.id)) return;
-  const place3 = placement(dock, item2.side, screen);
-  const fresh2 = place3.position?.direction !== "within";
-  dock.open({
+function openSurface(dock2, item2, screen, focus = true) {
+  if (dock2.has(item2.id)) return;
+  const place4 = placement(dock2, item2.side, screen);
+  const fresh2 = place4.position?.direction !== "within";
+  dock2.open({
     id: item2.id,
     component: item2.id,
     title: item2.title,
     inactive: !focus,
-    ...place3,
+    ...place4,
     ...fresh2 && item2.width && screen !== "phone" ? { initialWidth: item2.width } : {}
   });
 }
@@ -40929,44 +41064,44 @@ function chatId(agentId) {
 function chatAgent(id) {
   return id?.startsWith("chat:") ? id.slice(5) : null;
 }
-function chats(dock) {
-  return dock.api.panels.map((panel) => panel.id).filter((id) => chatAgent(id) !== null);
+function chats(dock2) {
+  return dock2.api.panels.map((panel) => panel.id).filter((id) => chatAgent(id) !== null);
 }
-function openChat(dock, agent, screen, focus = true, reveal2 = true) {
+function openChat(dock2, agent, screen, focus = true, reveal2 = true) {
   const id = chatId(agent.id);
-  if (!dock.has(id)) {
-    const sibling = chats(dock)[0];
-    const place3 = sibling ? { position: { referencePanel: sibling, direction: "within" } } : placement(dock, "center", screen);
-    dock.open({
+  if (!dock2.has(id)) {
+    const sibling = chats(dock2)[0];
+    const place4 = sibling ? { position: { referencePanel: sibling, direction: "within" } } : placement(dock2, "center", screen);
+    dock2.open({
       id,
       component: "chat",
       title: agent.name,
       params: { agent: agent.id },
       inactive: !focus,
-      ...place3
+      ...place4
     });
   }
-  if (focus) dock.focusPanel(id);
-  else if (reveal2) dock.reveal(id);
+  if (focus) dock2.focusPanel(id);
+  else if (reveal2) dock2.reveal(id);
   return id;
 }
-function openDocument(dock, kind, path2, screen, focus = true) {
+function openDocument(dock2, kind, path2, screen, focus = true) {
   const id = `${kind}:${path2}`;
-  if (!dock.has(id)) {
-    const sibling = dock.api.panels.find((panel) => /^(file|diff):/.test(panel.id));
-    const chat = chats(dock)[0];
-    const place3 = sibling ? { position: { referencePanel: sibling.id, direction: "within" } } : chat && screen !== "phone" ? { position: { referencePanel: chat, direction: "right" } } : placement(dock, "center", screen);
-    dock.open({
+  if (!dock2.has(id)) {
+    const sibling = dock2.api.panels.find((panel) => /^(file|diff):/.test(panel.id));
+    const chat = chats(dock2)[0];
+    const place4 = sibling ? { position: { referencePanel: sibling.id, direction: "within" } } : chat && screen !== "phone" ? { position: { referencePanel: chat, direction: "right" } } : placement(dock2, "center", screen);
+    dock2.open({
       id,
       component: kind,
       title: documents[kind].title(path2),
       params: { path: path2 },
       inactive: !focus,
-      ...place3
+      ...place4
     });
   }
-  if (focus) dock.focusPanel(id);
-  else dock.reveal(id);
+  if (focus) dock2.focusPanel(id);
+  else dock2.reveal(id);
   return id;
 }
 function terminalPanel(terminal) {
@@ -40975,48 +41110,48 @@ function terminalPanel(terminal) {
 function terminalOf(id) {
   return id?.startsWith("terminal:") ? id.slice(9) : null;
 }
-function terminalPanels(dock) {
-  return dock.api.panels.map((panel) => panel.id).filter((id) => terminalOf(id) !== null);
+function terminalPanels(dock2) {
+  return dock2.api.panels.map((panel) => panel.id).filter((id) => terminalOf(id) !== null);
 }
 function terminalTitle(info) {
   return `${info.title} \xB7 ${basename(info.cwd) || "/"}`;
 }
-function openTerminal(dock, info, screen) {
+function openTerminal(dock2, info, screen) {
   const id = terminalPanel(info.id);
-  if (!dock.has(id)) {
-    const sibling = terminalPanels(dock).at(-1);
-    dock.open({
+  if (!dock2.has(id)) {
+    const sibling = terminalPanels(dock2).at(-1);
+    dock2.open({
       id,
       component: "terminal",
       title: terminalTitle(info),
       params: { terminal: info.id },
       inactive: true,
-      ...sibling ? { position: { referencePanel: sibling, direction: "within" } } : placement(dock, "right", screen)
+      ...sibling ? { position: { referencePanel: sibling, direction: "within" } } : placement(dock2, "right", screen)
     });
   }
   return id;
 }
-function openChatSlot(dock, item2, screen, agent, agentless) {
-  if (agent) openChat(dock, agent, screen, false);
-  else if (agentless) openSurface(dock, item2, screen, false);
+function openChatSlot(dock2, item2, screen, agent, agentless) {
+  if (agent) openChat(dock2, agent, screen, false);
+  else if (agentless) openSurface(dock2, item2, screen, false);
 }
-function defaultLayout(dock, screen, agent, items = surfaces2, terminals = [], agentless = false) {
-  dock.clear();
+function defaultLayout(dock2, screen, agent, items = surfaces2, terminals = [], agentless = false) {
+  dock2.clear();
   const order = ["center", "left", "right"];
   for (const side of order) {
     for (const item2 of items) {
       if (item2.side !== side || !item2.open.includes(screen)) continue;
-      if (item2.id === "terminal") for (const info of terminals) openTerminal(dock, info, screen);
-      else if (item2.id === "chat") openChatSlot(dock, item2, screen, agent, agentless);
-      else openSurface(dock, item2, screen);
+      if (item2.id === "terminal") for (const info of terminals) openTerminal(dock2, info, screen);
+      else if (item2.id === "chat") openChatSlot(dock2, item2, screen, agent, agentless);
+      else openSurface(dock2, item2, screen);
     }
   }
-  const chat = chats(dock)[0] ?? (dock.has("chat") ? "chat" : null);
-  if (chat) dock.api.getPanel(chat)?.api.setActive();
+  const chat = chats(dock2)[0] ?? (dock2.has("chat") ? "chat" : null);
+  if (chat) dock2.api.getPanel(chat)?.api.setActive();
 }
-function shown2(dock, id) {
-  const ids = id === "chat" ? chats(dock) : id === "terminal" ? terminalPanels(dock) : [id];
-  return ids.some((panel) => dock.api.getPanel(panel)?.api.isVisible === true);
+function shown2(dock2, id) {
+  const ids = id === "chat" ? chats(dock2) : id === "terminal" ? terminalPanels(dock2) : [id];
+  return ids.some((panel) => dock2.api.getPanel(panel)?.api.isVisible === true);
 }
 function sprinkleSurface(sprinkle) {
   return {
@@ -41039,20 +41174,20 @@ var directions = {
 function dropPlacement(panel, position2) {
   return panel ? { position: { referencePanel: panel, direction: directions[position2] ?? "within" } } : null;
 }
-function openSprinkle(dock, sprinkle, screen, place3 = null, focus = true) {
+function openSprinkle(dock2, sprinkle, screen, place4 = null, focus = true) {
   const id = `sprinkle:${sprinkle.id}`;
-  if (!dock.has(id)) {
-    dock.open({
+  if (!dock2.has(id)) {
+    dock2.open({
       id,
       component: "sprinkle",
       title: sprinkle.title,
       params: { sprinkle: sprinkle.id },
       inactive: !focus,
-      ...place3 ?? placement(dock, "right", screen)
+      ...place4 ?? placement(dock2, "right", screen)
     });
   }
-  if (focus) dock.focusPanel(id);
-  else dock.reveal(id);
+  if (focus) dock2.focusPanel(id);
+  else dock2.reveal(id);
   return id;
 }
 
@@ -41096,10 +41231,10 @@ var Panels = class {
     return ago2 < userCloseWindow ? ago2 : null;
   }
   recentClose() {
-    const dock = this.#host.dock();
+    const dock2 = this.#host.dock();
     for (const id of this.#closed.keys()) {
       const ago2 = this.closedAgo(id);
-      if (ago2 !== null && !dock.has(id)) return { id, ago: ago2 };
+      if (ago2 !== null && !dock2.has(id)) return { id, ago: ago2 };
     }
     return null;
   }
@@ -41156,14 +41291,14 @@ var Panels = class {
     return rows2.map((row) => this.#state(row));
   }
   #state(row) {
-    const dock = this.#host.dock();
-    const panel = dock.api.getPanel(row.id);
-    const content3 = dock.content(row.id);
+    const dock2 = this.#host.dock();
+    const panel = dock2.api.getPanel(row.id);
+    const content3 = dock2.content(row.id);
     return {
       ...row,
       open: panel !== void 0,
       visible: panel?.api.isVisible === true,
-      active: panel !== void 0 && dock.api.activePanel?.id === row.id,
+      active: panel !== void 0 && dock2.api.activePanel?.id === row.id,
       busy: content3?.busyReason ?? null
     };
   }
@@ -41186,14 +41321,14 @@ var Panels = class {
   focus(id, options2 = {}) {
     return this.#show(id, true, options2);
   }
-  #show(id, focus, { place: place3, section }) {
+  #show(id, focus, { place: place4, section }) {
     const info = this.find(id);
     if (!info) return unknown(id);
-    const bad = this.#reference(id, place3);
+    const bad = this.#reference(id, place4);
     if (bad) return bad;
     this.quietly(() => this.#host.open(id, focus, section));
-    if (place3) {
-      const moved2 = this.move(id, place3);
+    if (place4) {
+      const moved2 = this.move(id, place4);
       if (moved2.code !== 0) return moved2;
     }
     return ok3(`${focus ? "focused" : info.open ? "showed" : "opened"} ${id}`);
@@ -41210,30 +41345,30 @@ var Panels = class {
     this.quietly(() => this.#host.dock().close(id));
     return ok3(`closed ${id}`);
   }
-  move(id, place3) {
+  move(id, place4) {
     const info = this.find(id);
     if (!info) return unknown(id);
-    const bad = this.#reference(id, place3);
+    const bad = this.#reference(id, place4);
     if (bad) return bad;
-    const dock = this.#host.dock();
+    const dock2 = this.#host.dock();
     if (!info.open) this.quietly(() => this.#host.open(id, false));
-    if (!dock.has(id)) return unknown(id);
+    if (!dock2.has(id)) return unknown(id);
     if (this.#host.screen() === "phone")
       return ok3(`phones show one panel at a time, so ${id} stays where it is`);
     const busy = info.open ? info.busy : this.find(id)?.busy ?? null;
     if (busy) return refused(`${id} is busy: ${busy}`);
-    const target2 = typeof place3 === "string" ? destination(dock, id, place3, this.#host.screen()) : { position: { referencePanel: place3.ref, direction: place3.direction } };
-    const reference2 = target2.position && dock.api.getPanel(target2.position.referencePanel);
+    const target2 = typeof place4 === "string" ? destination(dock2, id, place4, this.#host.screen()) : { position: { referencePanel: place4.ref, direction: place4.direction } };
+    const reference2 = target2.position && dock2.api.getPanel(target2.position.referencePanel);
     if (!reference2 || !target2.position) return ok3(`${id} is the only panel, so it stays`);
     const position2 = positions[target2.position.direction];
-    const panel = dock.api.getPanel(id);
+    const panel = dock2.api.getPanel(id);
     this.quietly(() => panel?.api.moveTo({ group: reference2.group, position: position2 }));
     return ok3(`moved ${id}`);
   }
-  #reference(id, place3) {
-    if (typeof place3 !== "object") return null;
-    if (place3.ref === id) return { code: 2, message: `can't place ${id} beside itself` };
-    if (!this.#host.dock().has(place3.ref)) return { code: 1, message: `${place3.ref} isn't open` };
+  #reference(id, place4) {
+    if (typeof place4 !== "object") return null;
+    if (place4.ref === id) return { code: 2, message: `can't place ${id} beside itself` };
+    if (!this.#host.dock().has(place4.ref)) return { code: 1, message: `${place4.ref} isn't open` };
     return null;
   }
   reset() {
@@ -41288,16 +41423,16 @@ function scan(parsed, rest, positional) {
   parsed.place = side;
   return null;
 }
-function check2({ verb, id, json, section, place: place3 }) {
+function check2({ verb, id, json, section, place: place4 }) {
   const ids = verb === "list" || verb === "reset" ? 0 : 1;
   if ((id === void 0 ? 0 : 1) !== ids)
     return ids ? `${verb} needs an id` : `${verb} takes no id`;
   if (json && verb !== "list") return "--json is for list";
   if (section !== void 0 && verb !== "open" && verb !== "focus")
     return "--section is for open and focus";
-  if (place3 && verb !== "open" && verb !== "focus" && verb !== "move")
+  if (place4 && verb !== "open" && verb !== "focus" && verb !== "move")
     return `${verb} takes no place`;
-  if (verb === "move" && !place3) return "move needs a place";
+  if (verb === "move" && !place4) return "move needs a place";
   return null;
 }
 function parse3(args2) {
@@ -41360,18 +41495,18 @@ function act(scope, parsed) {
   const raw2 = parsed.id;
   const id = resolve(panels, raw2, reachable2, cone);
   if (!id) return done(unknown(raw2));
-  let place3 = parsed.place;
-  if (typeof place3 === "object") {
-    const ref = resolve(panels, place3.ref, reachable2, cone);
-    if (!ref) return done(unknown(place3.ref));
-    place3 = { ...place3, ref };
+  let place4 = parsed.place;
+  if (typeof place4 === "object") {
+    const ref = resolve(panels, place4.ref, reachable2, cone);
+    if (!ref) return done(unknown(place4.ref));
+    place4 = { ...place4, ref };
   }
   if (parsed.verb === "close") return done(panels.close(id));
   const ago2 = scope.agent && !panels.find(id)?.open ? panels.closedAgo(id) : null;
   if (ago2 !== null)
     return refusedOutput(`the user closed ${id} ${closedWhen(ago2)}; ask before opening it again`);
-  if (parsed.verb === "move") return done(panels.move(id, place3));
-  const options2 = { place: place3, section: parsed.section };
+  if (parsed.verb === "move") return done(panels.move(id, place4));
+  const options2 = { place: place4, section: parsed.section };
   if (parsed.verb === "open") return done(panels.open(id, options2));
   if (scope.agent && panels.typing())
     return done(
@@ -41837,18 +41972,18 @@ var TerminalPanels = class {
   #docks = /* @__PURE__ */ new WeakSet();
   #confirmed = /* @__PURE__ */ new Set();
   #asking = Promise.resolve();
-  attach(dock, port, screen) {
-    if (this.#docks.has(dock)) return;
-    this.#docks.add(dock);
+  attach(dock2, port, screen) {
+    if (this.#docks.has(dock2)) return;
+    this.#docks.add(dock2);
     let kind = "";
-    dock.api.onWillMutateLayout((event2) => {
+    dock2.api.onWillMutateLayout((event2) => {
       kind = event2.kind;
     });
-    dock.shadowRoot?.addEventListener(
+    dock2.shadowRoot?.addEventListener(
       "click",
       (event2) => {
         const close = event2.composedPath().find((node2) => node2.classList?.contains("slicc-tab-close"));
-        const panel = dock.api.panels.find(
+        const panel = dock2.api.panels.find(
           (candidate) => candidate.view.tab.element.contains(close ?? null)
         );
         const id = terminalOf(panel?.id ?? null);
@@ -41858,12 +41993,12 @@ var TerminalPanels = class {
         void this.#ask(info, close).then((yes) => {
           if (!yes) return;
           this.#confirmed.add(info.id);
-          dock.close(terminalPanel(info.id));
+          dock2.close(terminalPanel(info.id));
         });
       },
       true
     );
-    dock.api.onDidRemovePanel((panel) => {
+    dock2.api.onDidRemovePanel((panel) => {
       const id = terminalOf(panel.id);
       const terminals = port();
       if (kind !== "remove" || !id || !terminals) return;
@@ -41872,7 +42007,7 @@ var TerminalPanels = class {
       if (this.#confirmed.delete(id)) return terminals.close(id);
       void this.#ask(info, null).then((yes) => {
         if (yes) terminals.close(id);
-        else dock.focusPanel(openTerminal(dock, info, screen()));
+        else dock2.focusPanel(openTerminal(dock2, info, screen()));
       });
     });
   }
@@ -41887,37 +42022,37 @@ var TerminalPanels = class {
   activated(id) {
     if (terminalOf(id) !== null) this.#recent = id;
   }
-  sync(dock, port, screen) {
+  sync(dock2, port, screen) {
     const terminals = port.list();
     if (this.#port !== port) {
       this.#port = port;
       this.#known = new Set(terminals.map((terminal) => terminal.id));
     }
     const live = new Set(terminals.map((terminal) => terminal.id));
-    for (const panel of dock.api.panels.map((candidate) => candidate.id)) {
+    for (const panel of dock2.api.panels.map((candidate) => candidate.id)) {
       const terminal = terminalOf(panel);
       if ((panel === "terminal" || terminal !== null) && !live.has(terminal ?? ""))
-        dock.close(panel);
+        dock2.close(panel);
     }
     for (const info of terminals) {
       if (this.#known.has(info.id)) continue;
       this.#known.add(info.id);
-      openTerminal(dock, info, screen);
+      openTerminal(dock2, info, screen);
     }
   }
-  show(dock, port, screen) {
-    const panels = terminalPanels(dock);
+  show(dock2, port, screen) {
+    const panels = terminalPanels(dock2);
     const recent = panels.find((id) => id === this.#recent) ?? panels.at(-1);
     const terminals = port.list();
-    if (recent) dock.focusPanel(recent);
-    else if (terminals.length === 0) this.create(dock, port, screen);
+    if (recent) dock2.focusPanel(recent);
+    else if (terminals.length === 0) this.create(dock2, port, screen);
     else {
-      for (const info of terminals) openTerminal(dock, info, screen);
-      dock.focusPanel(terminalPanel(terminals.at(-1).id));
+      for (const info of terminals) openTerminal(dock2, info, screen);
+      dock2.focusPanel(terminalPanel(terminals.at(-1).id));
     }
   }
-  create(dock, port, screen) {
-    dock.focusPanel(openTerminal(dock, port.open(), screen));
+  create(dock2, port, screen) {
+    dock2.focusPanel(openTerminal(dock2, port.open(), screen));
   }
 };
 
@@ -44768,9 +44903,9 @@ function placed(item2) {
 }
 var elsewhere = (item2) => (item2.installs ?? []).filter((install) => install.manager !== "panel");
 function installText(install, version2) {
-  const place3 = install.user ? `for ${install.user}` : `in ${install.where}`;
+  const place4 = install.user ? `for ${install.user}` : `in ${install.where}`;
   const via = install.manager === "pnpm" ? ", via pnpm" : "";
-  return `${install.version === version2 ? "" : `${install.version} `}${place3}${via}`;
+  return `${install.version === version2 ? "" : `${install.version} `}${place4}${via}`;
 }
 function managedText(item2) {
   const others = elsewhere(item2);
@@ -46074,42 +46209,42 @@ var SliccApp = class extends ThemedElement {
     };
   }
   #rebind(model) {
-    const dock = this.dock;
-    dock.factories = this.#factories(model);
-    for (const panel of dock.api.panels) {
-      const element3 = dock.content(panel.id);
+    const dock2 = this.dock;
+    dock2.factories = this.#factories(model);
+    for (const panel of dock2.api.panels) {
+      const element3 = dock2.content(panel.id);
       if (element3 && "model" in element3) element3.model = model;
     }
-    if (!model.network && !model.guests && dock.has("network")) dock.close("network");
+    if (!model.network && !model.guests && dock2.has("network")) dock2.close("network");
     this.#prune();
     const agent = this.#active();
-    if (agent && this.#offers("chat")) openChat(dock, agent, this.screen, false, false);
+    if (agent && this.#offers("chat")) openChat(dock2, agent, this.screen, false, false);
   }
   #followed(model) {
     if (!this.#started) return;
-    const dock = this.dock;
-    dock.factories = this.#factories(model);
+    const dock2 = this.dock;
+    dock2.factories = this.#factories(model);
     if (!terminalsAllowed(model))
       this.panels.quietly(() => {
-        for (const id of terminalPanels(dock)) dock.close(id);
+        for (const id of terminalPanels(dock2)) dock2.close(id);
       });
   }
   #start(model) {
-    const dock = this.dock;
+    const dock2 = this.dock;
     this.#saving = false;
-    dock.factories = this.#factories(model);
-    dock.accepts = [dipType];
+    dock2.factories = this.#factories(model);
+    dock2.accepts = [dipType];
     this.terminalPanels.attach(
-      dock,
+      dock2,
       () => this.model?.terminals,
       () => this.screen
     );
     this.dips.load(this.storage);
     const saved = this.#saved();
-    const restored = this.#offered(saved, dock.factories) && dock.restore(saved);
+    const restored = this.#offered(saved, dock2.factories) && dock2.restore(saved);
     if (!restored) {
       defaultLayout(
-        dock,
+        dock2,
         this.screen,
         this.#active(),
         this.#available(),
@@ -46119,7 +46254,7 @@ var SliccApp = class extends ThemedElement {
     }
     this.#started = this.screen;
     this.#prune();
-    if (!(this.#active() || chats(dock).length || dock.has("chat")) && model.agent.starting?.())
+    if (!(this.#active() || chats(dock2).length || dock2.has("chat")) && model.agent.starting?.())
       this.#open("chat", false);
     this.#saving = true;
     this.#save();
@@ -46148,18 +46283,18 @@ var SliccApp = class extends ThemedElement {
     return model?.agent.list().find((agent) => agent.id === model.agent.active()) ?? null;
   }
   #prune() {
-    const dock = this.renderRoot.querySelector("slicc-dock");
-    if (!dock || !this.#started) return;
+    const dock2 = this.renderRoot.querySelector("slicc-dock");
+    if (!dock2 || !this.#started) return;
     const known = new Set(this.model?.agent.list().map((agent2) => agent2.id));
     const agent = this.#active();
-    const held = !!agent && !!dock.content("chat")?.shadowRoot?.activeElement;
+    const held = !!agent && !!dock2.content("chat")?.shadowRoot?.activeElement;
     this.panels.quietly(() => {
-      for (const id of chats(dock)) {
-        if (!known.has(chatAgent(id))) dock.close(id);
+      for (const id of chats(dock2)) {
+        if (!known.has(chatAgent(id))) dock2.close(id);
       }
-      if (agent && dock.has("chat")) {
-        if (this.#offers("chat") && !dock.has(chatId(agent.id)))
-          dock.open({
+      if (agent && dock2.has("chat")) {
+        if (this.#offers("chat") && !dock2.has(chatId(agent.id)))
+          dock2.open({
             id: chatId(agent.id),
             component: "chat",
             title: agent.name,
@@ -46167,12 +46302,12 @@ var SliccApp = class extends ThemedElement {
             inactive: true,
             position: { referencePanel: "chat", direction: "within" }
           });
-        dock.close("chat");
+        dock2.close("chat");
       }
       if (this.model && this.#offers("terminal"))
-        this.terminalPanels.sync(dock, this.model.terminals, this.screen);
+        this.terminalPanels.sync(dock2, this.model.terminals, this.screen);
     });
-    if (agent && held && this.#offers("chat")) openChat(dock, agent, this.screen, true);
+    if (agent && held && this.#offers("chat")) openChat(dock2, agent, this.screen, true);
   }
   #activated(event2) {
     const { id } = event2.detail;
@@ -46268,11 +46403,11 @@ var SliccApp = class extends ThemedElement {
     this.panels.closed(id);
     if (id.startsWith("sprinkle:")) this.dips.attach(id.slice("sprinkle:".length));
   };
-  #detach(id, place3, open) {
+  #detach(id, place4, open) {
     const sprinkle = this.#sprinkle(id);
     if (!sprinkle) return;
     this.dips.detach(id);
-    if (open) openSprinkle(this.dock, sprinkle, this.screen, place3);
+    if (open) openSprinkle(this.dock, sprinkle, this.screen, place4);
   }
   #dropped(event2) {
     const { type, data, panel, position: position2 } = event2.detail;
@@ -46326,9 +46461,9 @@ var SliccApp = class extends ThemedElement {
     )}${this.#more(items.filter((item2) => !shown4.includes(item2)))}</nav>`;
   }
   #rails() {
-    const dock = this.renderRoot.querySelector("slicc-dock");
+    const dock2 = this.renderRoot.querySelector("slicc-dock");
     const sprinkles = this.#sprinkles().filter((sprinkle) => !sprinkle.inline || this.dips.has(sprinkle.id)).map(sprinkleSurface);
-    const all3 = dock && this.#started ? [...sprinkles, ...this.#available()] : [];
+    const all3 = dock2 && this.#started ? [...sprinkles, ...this.#available()] : [];
     const phone = this.screen === "phone";
     return {
       left: this.#rail(phone ? [] : all3.filter((item2) => item2.side !== "right"), "left"),
@@ -46556,8 +46691,8 @@ function countdown(ms) {
 }
 function asking(approval) {
   const { kind, name, where: where2 } = approval.requester;
-  const place3 = where2 ? ` in ${where2}` : "";
-  return kind === "user" ? `You ran this with sudo${place3} (as ${name})` : `${name} wants to run this with sudo${place3}`;
+  const place4 = where2 ? ` in ${where2}` : "";
+  return kind === "user" ? `You ran this with sudo${place4} (as ${name})` : `${name} wants to run this with sudo${place4}`;
 }
 function sudo(approval) {
   const as = approval.target && approval.target !== "root" ? `-u ${approval.target} ` : "";
@@ -47275,7 +47410,7 @@ function host3(url) {
     return url;
   }
 }
-function place2(url) {
+function place3(url) {
   try {
     const { host: host4, pathname } = new URL(url);
     return host4 ? `${host4}${pathname === "/" ? "" : pathname}` : url;
@@ -47303,8 +47438,8 @@ function typed2(action) {
   return `Typed${count2}${action.target ? ` into ${action.target}` : ""}`;
 }
 var verbs2 = {
-  open: (action) => `Opened ${place2(action.value ?? "")}`.trim(),
-  goto: (action) => `Went to ${place2(action.value ?? "")}`.trim(),
+  open: (action) => `Opened ${place3(action.value ?? "")}`.trim(),
+  goto: (action) => `Went to ${place3(action.value ?? "")}`.trim(),
   back: () => "Went back",
   reload: () => "Reloaded",
   close: () => "Closed tab",
@@ -48190,7 +48325,7 @@ var SliccBrowser = class extends ModelElement {
           ${wide2 ? A : this.#picker(tabs, tab)}
         </div>
         <div class="address">
-          <span class="url" title=${tab.url}>${narrow ? place2(tab.url) : tab.url}</span>
+          <span class="url" title=${tab.url}>${narrow ? place3(tab.url) : tab.url}</span>
           <swc-action-button size="s" quiet data-action="copy-url" accessible-label=${copy === "Copy" ? "Copy URL" : copy} @click=${() => this.#copy(tab.url)}><swc-icon-copy slot="icon"></swc-icon-copy>${narrow ? A : copy}</swc-action-button>
           <swc-action-button size="s" quiet data-action="open-tab" accessible-label="Show in the browser" @click=${() => this.model?.browser.activate(tab.id)}><swc-icon-open-in slot="icon"></swc-icon-open-in>${narrow ? A : "Open"}</swc-action-button>
         </div>