@ai-ecoverse/slicc-spectrum 1.75.0 → 1.77.0

package/dist/slicc-ui.js

@@ -11941,6 +11941,11 @@ var Dips = class extends Emitter {
     this.#storage?.setItem(this.key, JSON.stringify(this.list()));
     this.emit("change", this.list());
   }
+  attach(id) {
+    if (!this.#out.delete(id)) return;
+    this.#storage?.setItem(this.key, JSON.stringify(this.list()));
+    this.emit("change", this.list());
+  }
 };
 function dipsOf(node) {
   let current = node;
@@ -14400,7 +14405,7 @@ function chatAgent(id) {
 function chats(dock) {
   return dock.api.panels.map((panel) => panel.id).filter((id) => chatAgent(id) !== null);
 }
-function openChat(dock, agent, screen, focus = true, reveal = true) {
+function openChat(dock, agent, screen, focus = true, reveal2 = true) {
   const id = chatId(agent.id);
   if (!dock.has(id)) {
     const sibling = chats(dock)[0];
@@ -14415,7 +14420,7 @@ function openChat(dock, agent, screen, focus = true, reveal = true) {
     });
   }
   if (focus) dock.focusPanel(id);
-  else if (reveal) dock.reveal(id);
+  else if (reveal2) dock.reveal(id);
   return id;
 }
 function openDocument(dock, kind, path, screen, focus = true) {
@@ -30885,11 +30890,14 @@ function question(item2, handlers) {
       <swc-button size="s" variant="accent" data-action="answer" ?disabled=${handlers.readOnly} @click=${(event2) => event2.currentTarget.closest("form")?.requestSubmit()}>Answer</swc-button>
     </form>`;
   }
-  return b`<div class="question" data-state=${item2.state} data-kind=${item2.kind}>
+  return b`<div class="question decision" data-state=${item2.state} data-kind=${item2.kind}>
     <div class="q">${item2.question}</div>
     ${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" ? "" : A} accessible-label=${`Question: ${item2.question}`} style=${pileStyle(pile)} @click=${reveal} @keydown=${reveal}>${question(item2, handlers)}</swc-conversation-turn>`;
+}
 var delegationVerbs = {
   feed: "fed",
   scoop: "started",
@@ -30947,7 +30955,7 @@ function part(entry, handlers) {
   }
 }
 function silent(entry, showThinking) {
-  return entry.type === "thinking" && !showThinking || entry.type === "link" && !!host2(entry.url);
+  return entry.type === "question" || entry.type === "thinking" && !showThinking || entry.type === "link" && !!host2(entry.url);
 }
 function parts(entries, handlers, showThinking, extra = []) {
   const out = [];
@@ -31012,7 +31020,7 @@ function user(message, stamp = true) {
       ${byline(message, who2, stamp)}${stamp ? A : unseen(message.createdAt)}
       ${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}
-      ${remote ? b`<span class="reaction" aria-hidden="true">🤖</span>` : A}
+      ${remote ? b`<span class="reactions"><span class="reaction" aria-hidden="true">🤖</span></span>` : A}
     </div>
   </swc-conversation-turn>`;
 }
@@ -31110,6 +31118,9 @@ var compactionTitles = {
 function event(label, content) {
   return b`<swc-conversation-turn type="system" class="event" accessible-label=${label}>${content}</swc-conversation-turn>`;
 }
+function outside(label, byline2, content) {
+  return b`<swc-conversation-turn type="user" class="event lick-turn" accessible-label=${label}><div class="bubble">${byline2}${content}</div></swc-conversation-turn>`;
+}
 function system(message, handlers) {
   if (message.kind === "compaction") {
     const failed2 = message.state === "fallback" || message.state === "discarded";
@@ -31158,37 +31169,106 @@ var severities = {
     icon: b`<swc-icon-alert-triangle slot="icon" size="s" aria-hidden="true"></swc-icon-alert-triangle>`
   }
 };
-function severityBadge(message, label) {
-  if (!message.severity) return null;
-  const { prefix, variant, icon } = severities[message.severity];
-  return b`<span class="sr">${prefix}</span><swc-badge class="severity" size="s" variant=${variant} subtle>${icon}${label}</swc-badge>`;
+var lickIcons = {
+  webhook: "\u{1FA9D}",
+  cron: "\u23F0",
+  sprinkle: "\u2728",
+  fswatch: "\u{1F440}",
+  "session-reload": "\u{1F504}",
+  navigate: "\u{1F9ED}",
+  discovery: "\u{1F50E}",
+  upgrade: "\u2B06\uFE0F",
+  workflow: "\u{1F4CB}",
+  bash: "\u{1F4BB}",
+  jshd: "\u{1F4DC}",
+  preview: "\u{1F441}\uFE0F",
+  cherry: "\u{1F352}",
+  "scoop-notify": "\u2705",
+  "scoop-idle": "\u{1F4A4}",
+  "scoop-wait": "\u23F3",
+  "sudo-request": "\u{1F510}"
+};
+function pendingApproval(message) {
+  return message.role === "lick" && message.channel === "sudo-request" && message.state === "pending";
+}
+function waiting(message, now = Date.now()) {
+  const at = message.role === "lick" ? message.expiresAt : void 0;
+  return pendingApproval(message) && !(at !== void 0 && at <= now);
+}
+function clock(ms) {
+  const seconds = Math.ceil(ms / 1e3);
+  return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`;
 }
-function lick(message, handlers, stamp = true) {
-  const [label, variant] = lickLabels[message.channel];
-  const decide = message.channel === "sudo-request" && message.state === "pending";
+var still = () => globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+function reveal(event2) {
+  if (event2.target.closest("swc-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");
+  if (!log) return;
+  const origin2 = log.getBoundingClientRect().top;
+  const pile = turn.getBoundingClientRect().top - origin2;
+  turn.style.position = "static";
+  const flow = turn.getBoundingClientRect();
+  turn.style.position = "";
+  const natural = flow.top - origin2;
+  const bottom = Math.max(16, log.clientHeight - flow.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}`;
+}
+function spokenLeft(left, at) {
+  if (left <= 0) return "Timed out";
+  return left <= 6e4 ? "Less than a minute left" : `Expires at ${time(at)}`;
+}
+function decision(message, handlers, pile) {
+  const at = message.expiresAt;
+  const left = at === void 0 ? null : at - Date.now();
+  const expired = left !== null && left <= 0;
+  const timer = left === null ? A : b`<span class="timer" data-timer aria-hidden="true">${expired ? "Timed out" : clock(left)}</span><span class="sr">${spokenLeft(left, at)}</span>`;
+  const actions2 = expired ? A : 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=${expired ? A : ""} data-expired=${expired ? "" : A} style=${pileStyle(pile)} @click=${reveal} @keydown=${reveal}>
+    <div class="decision" data-kind="approval">
+      <div class="decision-head"><span class="who">${message.title}</span>${timer}</div>
+      <p class="decision-text">${message.text}</p>
+      ${message.body ? b`<pre class="command">${message.body}</pre>` : A}
+      ${actions2}
+    </div>
+  </swc-conversation-turn>`;
+}
+function lick(message, handlers, stamp = true, pile = flatPile) {
+  if (pendingApproval(message)) return decision(message, handlers, pile);
+  const [label] = lickLabels[message.channel];
   const outcome = message.state === "confirmed" ? "Allowed" : message.state === "dismissed" ? "Denied" : "";
-  const head2 = b`${severityBadge(message, label) ?? b`<swc-badge class="channel" size="s" variant=${variant} subtle>${label}</swc-badge>`}
-    <strong>${message.title}</strong>
+  const head2 = b`${message.severity ? b`<span class="sr">${severities[message.severity].prefix}</span>` : A}
+    ${outcome ? b`<span class="sr">${outcome}. </span>` : A}
     <span class="text">${message.text}</span>
-    ${message.count && message.count > 1 ? b`<span class="times" title="Coalesced events">×${message.count}</span>` : A}
-    ${outcome ? b`<swc-badge class="tag" size="s" variant=${message.state === "confirmed" ? "positive" : "neutral"} subtle>${outcome}</swc-badge>` : A}
-    <span class=${stamp ? "when" : "sr"}>${time(message.createdAt)}</span>`;
-  const actions2 = decide ? b`<div class="decide">
-        <swc-button size="s" variant="accent" data-action="allow" ?disabled=${handlers.readOnly} @click=${() => handlers.resolve(message.id, "confirmed")}>Allow</swc-button>
-        <swc-button size="s" variant="secondary" fill-style="outline" data-action="deny" ?disabled=${handlers.readOnly} @click=${() => handlers.resolve(message.id, "dismissed")}>Deny</swc-button>
-      </div>` : A;
+    ${message.count && message.count > 1 ? b`<span class="times" title="Coalesced events">×${message.count}</span>` : A}`;
+  const outcomeIcon = message.state === "confirmed" ? "\u{1F44D}" : message.state === "dismissed" ? "\u{1F44E}" : "";
+  const reaction = b`<span class="reactions"><span class="reaction" title=${label} aria-hidden="true">${lickIcons[message.channel]}</span>${outcomeIcon ? b`<span class="reaction" title=${outcome} aria-hidden="true">${outcomeIcon}</span>` : A}</span>`;
   const name = `${message.severity ? severities[message.severity].prefix : ""}${label} event`;
+  const byline2 = b`<div class="meta">${message.severity ? b`<span class="severity-icon">${severities[message.severity].icon}</span>` : A}<span class="who">${message.title}</span>${stamp ? when(message.createdAt) : unseen(message.createdAt)}</div>`;
   if (!message.body) {
-    return event(
+    return outside(
       name,
-      b`<div class="lick" data-id=${message.id} data-channel=${message.channel} data-severity=${message.severity ?? A}><div class="lick-head">${head2}</div>${actions2}</div>`
+      byline2,
+      b`<div class="lick-frame"><div class="lick" data-id=${message.id} data-channel=${message.channel} data-severity=${message.severity ?? A}><div class="lick-head">${head2}</div></div>${reaction}</div>`
     );
   }
   const details = b`<details class="lick" data-id=${message.id} data-channel=${message.channel} data-severity=${message.severity ?? A}>
-    <summary class="lick-head"><span class="chevron" aria-hidden="true">▸</span>${head2}</summary>
+    <summary class="lick-head">${head2}<swc-icon-chevron-right class="chevron" size="s" aria-hidden="true"></swc-icon-chevron-right></summary>
     <pre class="output">${message.body}</pre>
   </details>`;
-  return event(name, decide ? b`<div class="pending">${details}${actions2}</div>` : details);
+  return outside(name, byline2, b`<div class="lick-frame">${details}${reaction}</div>`);
 }
 var messageCss = i`
   swc-conversation-thread > .message,
@@ -31258,10 +31338,14 @@ var messageCss = i`
     position: relative;
     margin-block-end: var(--swc-spacing-300);
   }
-  .reaction {
+  .reactions {
     position: absolute;
     inset-block-end: calc(var(--swc-spacing-300) * -1);
     inset-inline-end: var(--swc-spacing-200);
+    display: inline-flex;
+    gap: var(--swc-spacing-50);
+  }
+  .reaction {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -31408,9 +31492,9 @@ var messageCss = i`
   }
   .lick {
     border: var(--swc-border-width-100) solid var(--swc-gray-200);
-    border-radius: var(--swc-corner-radius-100);
+    border-radius: var(--swc-corner-radius-700);
     background: var(--swc-background-layer-1-color);
-    font-size: var(--swc-font-size-100);
+    font-size: var(--swc-font-size-200);
   }
   summary,
   .lick-head {
@@ -31941,15 +32025,25 @@ var messageCss = i`
     color: var(--swc-neutral-subdued-content-color-default);
     text-align: center;
   }
+  .lick-frame {
+    position: relative;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    margin-block-end: var(--swc-spacing-300);
+  }
   .lick {
     border-style: dashed;
   }
-  .channel,
-  .lick .severity {
-    flex: none;
+  .severity-icon {
+    display: inline-flex;
+    align-self: center;
+    color: var(--severity);
   }
-  .lick strong {
-    white-space: nowrap;
+  .lick-turn:has(.lick[data-severity='error']) {
+    --severity: var(--swc-negative-visual-color);
+  }
+  .lick-turn:has(.lick[data-severity='warn']) {
+    --severity: var(--swc-notice-visual-color);
   }
   .lick[data-severity] {
     border-inline-start: var(--swc-border-width-400) solid var(--severity);
@@ -31968,8 +32062,7 @@ var messageCss = i`
     clip-path: inset(50%);
     white-space: nowrap;
   }
-  .lick .times,
-  .lick .when {
+  .lick .times {
     color: var(--swc-neutral-subdued-content-color-default);
     white-space: nowrap;
   }
@@ -31978,15 +32071,97 @@ var messageCss = i`
     gap: var(--swc-spacing-85);
     padding: 0 var(--swc-spacing-100) var(--swc-spacing-100);
   }
-  .pending {
-    border: var(--swc-border-width-100) solid var(--swc-notice-visual-color);
+  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;
+    inset-inline-start: 50%;
+    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;
+  }
+  .decision-turn[data-pending]:focus-visible .decision {
+    outline: var(--swc-focus-indicator-thickness) solid var(--swc-focus-indicator-color);
+    outline-offset: var(--swc-focus-ring-gap);
+  }
+  .decision {
+    display: flex;
+    flex-direction: column;
+    gap: var(--swc-spacing-100);
+    margin-inline: var(--swc-spacing-700);
+    padding: var(--swc-spacing-200) var(--swc-spacing-300);
+    border: var(--swc-border-width-100) solid var(--swc-gray-200);
     border-radius: var(--swc-corner-radius-100);
+    background: var(--swc-background-layer-1-color);
+    font-size: var(--swc-font-size-200);
   }
-  .pending > details.lick {
-    border: 0;
+  .decision-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--swc-spacing-100);
+    font-size: var(--swc-font-size-100);
   }
-  .pending > details.lick[data-severity] {
-    border-inline-start: var(--swc-border-width-400) solid var(--severity);
+  .decision-head .who {
+    font-weight: var(--swc-bold-font-weight);
+  }
+  .timer {
+    color: var(--swc-neutral-subdued-content-color-default);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+  .decision-text {
+    margin: 0;
+  }
+  .command {
+    margin: 0;
+    padding: var(--swc-spacing-75) var(--swc-spacing-100);
+    border-radius: var(--swc-corner-radius-100);
+    background: var(--swc-background-layer-2-color);
+    font-size: var(--swc-font-size-75);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  .decision .decide,
+  .question.decision .options {
+    justify-content: flex-end;
+    padding: 0;
+  }
+  .question.decision .options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--swc-spacing-85);
+  }
+  @container (inline-size < 480px) {
+    .decision {
+      margin-inline: var(--swc-spacing-300);
+    }
   }
 `;
 
@@ -33255,6 +33430,11 @@ var SliccApp = class extends ThemedElement {
       return cone ? { ...sprinkle, title: `${cone.name} / ${sprinkle.title}` } : sprinkle;
     }).sort((a23, b13) => order.indexOf(a23.agentId) - order.indexOf(b13.agentId));
   }
+  #panelClosed = (event2) => {
+    const id = event2.detail.id;
+    this.panels.closed(id);
+    if (id.startsWith("sprinkle:")) this.dips.attach(id.slice("sprinkle:".length));
+  };
   #detach(id, place3, open) {
     const sprinkle = this.#sprinkle(id);
     if (!sprinkle) return;
@@ -33510,7 +33690,7 @@ var SliccApp = class extends ThemedElement {
         <main>
           ${rails.left}
           <slicc-dock empty-text="All panels are closed. Open one from a rail or View." @layout-change=${this.#save}
-            @panel-close=${(event2) => this.panels.closed(event2.detail.id)}
+            @panel-close=${this.#panelClosed}
             @active-panel-change=${this.#activated}
             @external-drop=${this.#dropped}
             @detach-sprinkle=${(event2) => this.#detach(event2.detail.id, null, true)}
@@ -33751,7 +33931,7 @@ var inCwd = (approval) => approval.alwaysScope === "cwd" && !!approval.cwd;
 function alwaysHint(approval) {
   return inCwd(approval) ? `Always allow lets ${approval.requester.name} run exactly this command with sudo, in ${approval.cwd}, without asking again.` : `Always allow lets ${approval.requester.name} run exactly this command with sudo without asking again.`;
 }
-function waiting(model, now) {
+function waiting2(model, now) {
   return [...model?.approvals?.list() ?? []].filter((approval) => approval.expiresAt > now).sort((a23, b13) => a23.createdAt - b13.createdAt);
 }
 function gone(reason) {
@@ -33888,16 +34068,16 @@ var SliccApprovals = class extends ModelElement {
       this.#timer = null;
     }
   }
-  async decide(approval, decision) {
+  async decide(approval, decision2) {
     const port = this.model?.approvals;
-    if (!port?.decide || this.busy || decision !== "deny" && !this.#armed) return;
+    if (!port?.decide || this.busy || decision2 !== "deny" && !this.#armed) return;
     const verdict = secretRules(approval.command, approval.cwd);
-    if (decision === "always" && (verdict.certain ?? verdict.maybe)) return;
-    this.busy = decision;
+    if (decision2 === "always" && (verdict.certain ?? verdict.maybe)) return;
+    this.busy = decision2;
     this.failure = null;
     this.#pending.add(approval.id);
     try {
-      await port.decide(approval.id, decision);
+      await port.decide(approval.id, decision2);
       this.#done.add(approval.id);
     } catch (error) {
       this.failure = {
@@ -33910,7 +34090,7 @@ var SliccApprovals = class extends ModelElement {
     }
   }
   #current() {
-    return this.model?.approvals?.decide ? waiting(this.model, this.now) : [];
+    return this.model?.approvals?.decide ? waiting2(this.model, this.now) : [];
   }
   willUpdate(changed) {
     super.willUpdate(changed);
@@ -33956,15 +34136,15 @@ var SliccApprovals = class extends ModelElement {
     if (this.gone) this.close();
     else void this.decide(approval, "deny");
   }
-  #button(approval, decision, label, variant) {
+  #button(approval, decision2, label, variant) {
     return b`<swc-button
       slot="button"
       variant=${variant}
       fill-style=${variant === "accent" ? A : "outline"}
-      data-action=${decision}
-      ?pending=${this.busy === decision}
-      ?disabled=${!!this.busy && this.busy !== decision}
-      @click=${() => this.decide(approval, decision)}
+      data-action=${decision2}
+      ?pending=${this.busy === decision2}
+      ?disabled=${!!this.busy && this.busy !== decision2}
+      @click=${() => this.decide(approval, decision2)}
       >${label}</swc-button
     >`;
   }
@@ -36140,6 +36320,19 @@ var navigation = /* @__PURE__ */ new Set([
 ]);
 var upward = /* @__PURE__ */ new Set(["ArrowUp", "PageUp", "Home"]);
 var compactWidth = 560;
+function pendingKeys(messages) {
+  return messages.flatMap((message) => {
+    if (waiting(message)) return [message.id];
+    if (message.role !== "assistant") return [];
+    return message.parts.flatMap(
+      (part2) => part2.type === "question" && part2.question.state === "open" ? [`${message.id}:${part2.question.id}`] : []
+    );
+  });
+}
+function pendingPiles(messages) {
+  const keys = pendingKeys(messages);
+  return new Map(keys.map((key2, stack) => [key2, { stack }]));
+}
 var failed = (message) => message.role === "assistant" ? message.status === "error" : message.role === "system" && message.kind === "error";
 function carriesFiles(event2) {
   const types = [...event2.dataTransfer?.types ?? []];
@@ -36288,6 +36481,7 @@ var SliccChat = class extends ThemedElement {
         padding: var(--swc-spacing-400) var(--swc-spacing-300) calc(var(--composer-height, 0px) + var(--swc-spacing-500));
         scroll-padding-block-end: calc(var(--composer-height, 0px) + var(--swc-spacing-200));
         font-size: var(--swc-font-size-200);
+        scroll-padding-block-start: var(--pile, 0px);
       }
       @container (min-width: 600px) {
         .column {
@@ -36393,7 +36587,21 @@ var SliccChat = class extends ThemedElement {
   #from = 0;
   #start = 0;
   #settle;
+  #tick;
   #tail = "";
+  #held = "";
+  #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);
+  };
+  #refocus() {
+    if (!this.#held || this.renderRoot.querySelector(":focus")) return;
+    this.#held = "";
+    const next = this.renderRoot.querySelector(".decision-turn[data-pending]");
+    if (next) next.focus();
+    else this.renderRoot.querySelector("slicc-composer")?.focus();
+  }
   #sent(agentId) {
     const last = this.model?.agent.messages(agentId).at(-1);
     return last?.role === "user" && last.id !== this.#tail && (last.origin ?? "user") === "user";
@@ -36422,6 +36630,7 @@ var SliccChat = class extends ThemedElement {
     else if (reader && log.scrollTop < this.#last) this.#stuck = false;
     this.#last = log.scrollTop;
     this.#height = log.scrollHeight;
+    this.#pile();
   };
   #intent = {
     passive: true,
@@ -36469,9 +36678,6 @@ var SliccChat = class extends ThemedElement {
     if (composer) this.#fit.observe(composer);
     else this.style.setProperty("--composer-height", "0px");
   }
-  updated() {
-    this.#attach();
-  }
   connectedCallback() {
     super.connectedCallback();
     globalThis.addEventListener("pointerup", this.#release, true);
@@ -36486,6 +36692,59 @@ var SliccChat = class extends ThemedElement {
     this.#fit.disconnect();
     this.#fitted = null;
     clearTimeout(this.#settle);
+    clearInterval(this.#tick);
+    this.#tick = void 0;
+  }
+  updated() {
+    this.#attach();
+    const timed = this.#timed();
+    if (timed && this.#tick === void 0)
+      this.#tick = setInterval(() => this.requestUpdate(), 1e3);
+    if (!timed && this.#tick !== void 0) {
+      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 flow = turns.map((turn) => turn.getBoundingClientRect().top);
+    for (const turn of turns) turn.style.position = "";
+    const pinned = turns.flatMap(
+      (turn, index) => drawn[index] - flow[index] > 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`);
+  }
+  #timed() {
+    const model = this.model;
+    if (!model) return false;
+    return model.agent.messages(this.#id()).some(
+      (message) => waiting(message) && "expiresAt" in message && message.expiresAt !== void 0
+    );
   }
   firstUpdated() {
     this.#observe();
@@ -36538,7 +36797,7 @@ var SliccChat = class extends ThemedElement {
       new CustomEvent("show-surface", { detail: { id: "settings" }, bubbles: true, composed: true })
     );
   }
-  #message(message, agent, suggestion, changed, extra, owners, stamp) {
+  #message(message, agent, suggestion, changed, extra, owners, stamp, pile) {
     const model = this.model;
     const handlers = { ...this.#handlers, owners };
     switch (message.role) {
@@ -36562,7 +36821,7 @@ var SliccChat = class extends ThemedElement {
       case "system":
         return system(message, this.#handlers);
       default:
-        return lick(message, this.#handlers, stamp);
+        return lick(message, this.#handlers, stamp, pile);
     }
   }
   #items(messages, agent) {
@@ -36577,6 +36836,7 @@ var SliccChat = class extends ThemedElement {
     const owners = /* @__PURE__ */ new Map();
     const into = /* @__PURE__ */ new Map();
     const stamped = stamps(messages);
+    const piles = pendingPiles(messages);
     let anchor = null;
     for (const message of messages) {
       const calls = toolOnly(message, showThinking);
@@ -36617,12 +36877,24 @@ var SliccChat = class extends ThemedElement {
           changed,
           extra.get(message.id) ?? [],
           owners,
-          stamped.has(message.id)
+          stamped.has(message.id),
+          piles.get(message.id) ?? flatPile
         )
       ]);
+      out.push(...this.#questions(message, piles));
     }
     return out;
   }
+  #questions(message, piles) {
+    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)]
+      ];
+    });
+  }
   #newChat(agent) {
     this.model.agent.clear(agent.id);
     this.renderRoot.querySelector("slicc-composer")?.focus();
@@ -36684,6 +36956,7 @@ var SliccChat = class extends ThemedElement {
         @touchmove=${this.#intent}
         @keydown=${this.#intent}
         @pointerdown=${this.#hold}
+        @focusin=${this.#focused}
       >
         <div class="column" @keydown=${this.#keys}>
           ${agent && messages.length > 0 ? b`<swc-conversation-thread>${c(
@@ -37897,14 +38170,14 @@ function release(attachments) {
 }
 function retire(agent, id, attachments) {
   const urls = new Set(attachments.flatMap((attachment2) => attachment2.url ?? []));
-  const waiting2 = () => agent.queue(id).some((message) => message.attachments?.some((attachment2) => urls.has(attachment2.url ?? "")));
+  const waiting3 = () => agent.queue(id).some((message) => message.attachments?.some((attachment2) => urls.has(attachment2.url ?? "")));
   const later = () => void setTimeout(() => release(attachments), linger);
-  if (!waiting2()) {
+  if (!waiting3()) {
     later();
     return;
   }
   const off = agent.on("messages", () => {
-    if (waiting2()) return;
+    if (waiting3()) return;
     off();
     later();
   });
@@ -38724,7 +38997,7 @@ var SliccComposer = class extends ThemedElement {
     if (popup2.kind === "secret") {
       const vault = this.model?.vault;
       const valued = !!vault?.put && !blocked(vault);
-      const waiting2 = vault?.put ? blocked(vault) : null;
+      const waiting3 = vault?.put ? blocked(vault) : null;
       if (!valued) clearValues(this.renderRoot);
       const submit = (event2) => {
         event2.preventDefault();
@@ -38743,7 +39016,7 @@ var SliccComposer = class extends ThemedElement {
       const described = (name) => this.secretField === name ? "secret-error" : A;
       return b`<form class="popup secret" data-vault=${valued ? "on" : "off"} @submit=${submit} @keydown=${close} @input=${() => this.secretField = null}>
         <strong>Share a secret</strong>
-        <span class="lead">${valued ? "The value goes to the vault; the agent only sees its name. Leave the value empty to share a secret the vault already has." : waiting2 === "Unlock the vault first" ? "The vault is locked. You can share the name now and add the value once it is unlocked." : waiting2 ? "Waiting for the vault. You can share the name now and add the value in Settings \u203A Secrets later." : "Add the value in Settings \u203A Secrets. The agent only sees the name."}</span>
+        <span class="lead">${valued ? "The value goes to the vault; the agent only sees its name. Leave the value empty to share a secret the vault already has." : waiting3 === "Unlock the vault first" ? "The vault is locked. You can share the name now and add the value once it is unlocked." : waiting3 ? "Waiting for the vault. You can share the name now and add the value in Settings \u203A Secrets later." : "Add the value in Settings \u203A Secrets. The agent only sees the name."}</span>
         <label class="field"><span>Name</span><input name="name" placeholder="API_TOKEN" autocomplete="off" spellcheck="false" aria-invalid=${bad("name")} aria-describedby=${described("name")} /></label>
         ${valued ? b`<label class="field"><span>Value</span><input name="value" type="password" autocomplete="off" spellcheck="false" aria-invalid=${bad("value")} aria-describedby=${described("value")} /></label>` : A}
         ${this.secretError ? b`<span class="secret-error" role="alert" id="secret-error" data-error><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${this.secretError}</span></span>` : A}
@@ -39466,7 +39739,7 @@ var SliccNotices = class extends ModelElement {
       (notice) => notice.dismissible === false || !this.dismissed.has(notice.id)
     );
     const tabs = this.#tabs();
-    const approvals = this.model?.approvals?.decide ? [] : waiting(this.model, Date.now());
+    const approvals = this.model?.approvals?.decide ? [] : waiting2(this.model, Date.now());
     if (!notices.length && !approvals.length && tabs === A) return A;
     return b`<div class="notices">${tabs}${approvals.map((approval) => this.#approval(approval))}${c(
       notices,
@@ -40417,7 +40690,7 @@ var SliccSecrets = class extends ThemedElement {
   }
   #secret(vault, secret, entries, devices, more, locked) {
     const kind = kinds[secret.kind];
-    const reveal = revealed(secret.name, entries, Date.now(), more);
+    const reveal2 = revealed(secret.name, entries, Date.now(), more);
     const exec = execLine(secret.exec, secret.execArgv);
     const gone3 = secret.state === "removed";
     const form = this.#offline ? null : this.form;
@@ -40431,7 +40704,7 @@ var SliccSecrets = class extends ThemedElement {
       <dl>
         ${this.#reach(secret, gone3)}
         ${secret.exits ? b`<dt>${gone3 ? "Left through" : "Leaves through"}</dt><dd data-exits>${secret.exits.length ? list4(secret.exits.map((exit) => exitLabel(exit, devices))) : "No exit"}</dd>` : A}
-        ${exec || reveal ? b`<dt>Programs</dt><dd data-exec>${exec}${exec && reveal ? b`<br />` : A}${reveal}</dd>` : A}
+        ${exec || reveal2 ? b`<dt>Programs</dt><dd data-exec>${exec}${exec && reveal2 ? b`<br />` : A}${reveal2}</dd>` : A}
         ${secret.kind === "model" && secret.provider ? b`<dt>Provider</dt><dd data-provider>${this.#providerName(secret.provider)}</dd>` : A}
         ${secret.kind === "mcp" && secret.server ? b`<dt>Server</dt><dd data-server>${secret.server}</dd>` : A}
         <dt>From</dt>
@@ -40540,7 +40813,7 @@ var SliccSecrets = class extends ThemedElement {
     this.#offline = away(vault);
     if (this.#offline && this.form) clearValues(this.renderRoot);
     const now = Date.now();
-    const waiting2 = (status2?.waiting ?? []).filter((request2) => request2.expiresAt > now);
+    const waiting3 = (status2?.waiting ?? []).filter((request2) => request2.expiresAt > now);
     return b`<section aria-labelledby="secrets" data-vault=${status2 ? status2.locked ? "locked" : "unlocked" : "loading"}>
       <div class="head">
         <h2 id="secrets">Secrets</h2>
@@ -40550,7 +40823,7 @@ var SliccSecrets = class extends ThemedElement {
       ${this.#availability()}
       ${this.#feedback()}
       ${this.failure ? this.#error(this.failure, "vault") : A}
-      ${waiting2.length ? b`<h3>Waiting for you</h3>${waiting2.map((request2) => this.#request(vault, request2))}` : A}
+      ${waiting3.length ? b`<h3>Waiting for you</h3>${waiting3.map((request2) => this.#request(vault, request2))}` : A}
       ${this.#backup(vault, status2)}
       ${this.#tools(vault, locked)}
       ${!current ? this.#offline ? A : b`<p class="muted" data-loading>Loading secrets…</p>` : current.secrets.length ? this.#secrets(vault, current, entries, devices, locked) : b`<p data-empty>No secrets yet. Add one here, or enter the value when an agent or program asks for one.</p>`}
@@ -41438,6 +41711,9 @@ var SliccSprinkle = class extends ThemedElement {
       height: auto;
       background: none;
     }
+    :host([inline]) .handle {
+      margin-inline-start: 20px;
+    }
     iframe {
       display: block;
       width: 100%;
@@ -80171,7 +80447,7 @@ function createDismissableLayer(options) {
   const capture = (_options$capture = options.capture) !== null && _options$capture !== void 0 ? _options$capture : false;
   const escape2 = (_options$escape = options.escape) !== null && _options$escape !== void 0 ? _options$escape : true;
   const keys = (_options$keys = options.keys) !== null && _options$keys !== void 0 ? _options$keys : [];
-  const outside = (_options$outsidePoint = options.outsidePointerDown) !== null && _options$outsidePoint !== void 0 ? _options$outsidePoint : true;
+  const outside2 = (_options$outsidePoint = options.outsidePointerDown) !== null && _options$outsidePoint !== void 0 ? _options$outsidePoint : true;
   const grace = (_options$pointerDownG = options.pointerDownGraceMs) !== null && _options$pointerDownG !== void 0 ? _options$pointerDownG : 0;
   const now = (_options$now = options.now) !== null && _options$now !== void 0 ? _options$now : Date.now;
   const openedAt = now();
@@ -80184,13 +80460,13 @@ function createDismissableLayer(options) {
   if (escape2 || keys.length > 0) disposables.addDisposables(addDisposableListener(win, "keydown", (event2) => {
     if (escape2 && event2.key === "Escape" || keys.includes(event2.key)) options.onDismiss();
   }, capture));
-  if (outside || options.onInsidePointerDown) disposables.addDisposables(addDisposableListener(win, "pointerdown", (event2) => {
+  if (outside2 || options.onInsidePointerDown) disposables.addDisposables(addDisposableListener(win, "pointerdown", (event2) => {
     if (isInside(event2)) {
       var _options$onInsidePoin;
       (_options$onInsidePoin = options.onInsidePointerDown) === null || _options$onInsidePoin === void 0 || _options$onInsidePoin.call(options, event2);
       return;
     }
-    if (!outside || now() - openedAt < grace) return;
+    if (!outside2 || now() - openedAt < grace) return;
     options.onDismiss();
   }, capture));
   if (options.resize) disposables.addDisposables(addDisposableListener(win, "resize", () => {