@ai-ecoverse/slicc-spectrum 1.73.2 → 1.75.0

package/dist/slicc-ui.js

@@ -8837,6 +8837,10 @@ var shared = i`
     padding: 0 var(--swc-spacing-75);
   }
 `;
+function speech() {
+  const scope = globalThis;
+  return scope.SpeechRecognition ?? scope.webkitSpeechRecognition;
+}
 
 // node_modules/@adobe/spectrum-wc/dist/components/button/button.js
 var t42 = i`.swc-Button{--_swc-button-border-width: 2px;--_swc-button-min-block-size: var(--swc-button-min-block-size, var(--swc-component-height-100));gap:var(--swc-button-gap, 6px);max-inline-size:var(--swc-button-max-inline-size, inherit);min-block-size:var(--_swc-button-min-block-size);padding-block:calc(var(--swc-button-padding-vertical, 7px) - var(--_swc-button-border-width));padding-inline:calc(var(--swc-button-edge-to-text, var(--swc-base-padding-horizontal-medium)) - var(--_swc-button-border-width));font-family:var(--swc-sans-font-family-stack);font-size:var(--swc-button-font-size, var(--swc-font-size-100));font-weight:700;line-height:round(down,1.3em,1px);color:var(--swc-button-content-color-default, var(--swc-gray-25));background-color:var(--swc-button-background-color-default, var(--swc-gray-800));border-color:var(--swc-button-border-color-default, transparent);border-width:var(--_swc-button-border-width);border-radius:var(--swc-button-border-radius, calc(var(--_swc-button-min-block-size) / 2));transition-timing-function:cubic-bezier(.45,0,.4,1);transition-duration:.13s;transition-property:outline,border-color,color,background-color,transform}.swc-Button:hover{color:var(--swc-button-content-color-hover, var(--swc-gray-25));background-color:var(--swc-button-background-color-hover, var(--swc-gray-900));border-color:var(--swc-button-border-color-hover, transparent)}.swc-Button:focus-visible{color:var(--swc-button-content-color-focus, var(--swc-gray-25));background-color:var(--swc-button-background-color-focus, var(--swc-gray-900));border-color:var(--swc-button-border-color-focus, transparent)}.swc-Button:active{color:var(--swc-button-content-color-down, var(--swc-gray-25));background-color:var(--swc-button-background-color-down, var(--swc-gray-900));border-color:var(--swc-button-border-color-down, transparent);transform:var(--swc-button-down-state-transform, perspective(var(--_swc-button-min-block-size)) translate3d(0, 0, -2px));will-change:transform}.swc-Button-label{text-align:center}.swc-Button--hasIcon .swc-Button-label{text-align:start}slot[name=icon]::slotted(*),.swc-PendingSpinner{--_swc-button-icon-size: var(--swc-button-icon-size, var(--swc-workflow-icon-medium));--_swc-button-icon-block-size: var(--swc-button-icon-block-size, var(--_swc-button-icon-size));--_swc-pending-spinner-size: var(--_swc-button-icon-size);box-sizing:border-box;flex-shrink:0;align-self:flex-start;inline-size:var(--swc-button-icon-inline-size, var(--_swc-button-icon-size));block-size:var(--_swc-button-icon-block-size);margin-block:calc((var(--_swc-button-icon-block-size) - 1lh) / 2 * -1);margin-inline-start:calc(var(--swc-button-edge-to-visual, var(--swc-base-padding-horizontal-medium)) - var(--swc-button-edge-to-text, var(--swc-base-padding-horizontal-medium)))}slot[name=icon]::slotted(*){color:inherit;fill:currentcolor}:host([size=\"s\"]){--swc-button-min-block-size: var(--swc-component-height-75);--swc-button-font-size: var(--swc-font-size-75);--swc-button-gap: 4px;--swc-button-edge-to-text: var(--swc-base-padding-horizontal-small);--swc-button-edge-to-visual: var(--swc-base-padding-horizontal-small);--swc-button-edge-to-visual-only: 4px;--swc-button-padding-vertical: 4px;--swc-button-icon-size: var(--swc-workflow-icon-small)}:host([size=\"l\"]){--swc-button-min-block-size: var(--swc-component-height-200);--swc-button-font-size: var(--swc-font-size-200);--swc-button-gap: 6px;--swc-button-edge-to-text: var(--swc-base-padding-horizontal-large);--swc-button-edge-to-visual: var(--swc-base-padding-horizontal-large);--swc-button-edge-to-visual-only: 7px;--swc-button-padding-vertical: 10px;--swc-button-icon-size: var(--swc-workflow-icon-large)}:host([size=\"xl\"]){--swc-button-min-block-size: var(--swc-component-height-300);--swc-button-font-size: var(--swc-font-size-300);--swc-button-gap: 6px;--swc-button-edge-to-text: var(--swc-base-padding-horizontal-extra-large);--swc-button-edge-to-visual: var(--swc-base-padding-horizontal-extra-large);--swc-button-edge-to-visual-only: 9px;--swc-button-padding-vertical: 13px;--swc-button-icon-size: var(--swc-workflow-icon-extra-large)}:host([variant=\"accent\"]){--swc-button-content-color-default: rgb(255, 255, 255);--swc-button-content-color-hover: rgb(255, 255, 255);--swc-button-content-color-down: rgb(255, 255, 255);--swc-button-content-color-focus: rgb(255, 255, 255);--swc-button-background-color-default: var(--swc-accent-background-color-default);--swc-button-background-color-hover: var(--swc-accent-background-color-hover);--swc-button-background-color-down: var(--swc-accent-background-color-down);--swc-button-background-color-focus: var(--swc-accent-background-color-key-focus)}:host([variant=\"negative\"]){--swc-button-content-color-default: rgb(255, 255, 255);--swc-button-content-color-hover: rgb(255, 255, 255);--swc-button-content-color-down: rgb(255, 255, 255);--swc-button-content-color-focus: rgb(255, 255, 255);--swc-button-background-color-default: var(--swc-negative-background-color-default);--swc-button-background-color-hover: var(--swc-negative-background-color-hover);--swc-button-background-color-down: var(--swc-negative-background-color-down);--swc-button-background-color-focus: var(--swc-negative-background-color-key-focus)}:host([variant=\"secondary\"]){--swc-button-content-color-default: var(--swc-gray-800);--swc-button-content-color-hover: var(--swc-gray-900);--swc-button-content-color-down: var(--swc-gray-900);--swc-button-content-color-focus: var(--swc-gray-900);--swc-button-background-color-default: var(--swc-gray-100);--swc-button-background-color-hover: var(--swc-gray-200);--swc-button-background-color-down: var(--swc-gray-200);--swc-button-background-color-focus: var(--swc-gray-200)}:host([variant=\"primary\"][fill-style=\"outline\"]){--swc-button-background-color-default: transparent;--swc-button-background-color-hover: var(--swc-gray-100);--swc-button-background-color-down: var(--swc-gray-100);--swc-button-background-color-focus: var(--swc-gray-100);--swc-button-border-color-default: var(--swc-gray-800);--swc-button-border-color-hover: var(--swc-gray-900);--swc-button-border-color-down: var(--swc-gray-900);--swc-button-border-color-focus: var(--swc-gray-900);--swc-button-content-color-default: var(--swc-gray-800);--swc-button-content-color-hover: var(--swc-gray-900);--swc-button-content-color-down: var(--swc-gray-900);--swc-button-content-color-focus: var(--swc-gray-900);--swc-button-background-color-disabled: transparent;--swc-button-border-color-disabled: var(--swc-gray-300)}:host([variant=\"secondary\"][fill-style=\"outline\"]){--swc-button-background-color-default: transparent;--swc-button-background-color-hover: var(--swc-gray-100);--swc-button-background-color-down: var(--swc-gray-100);--swc-button-background-color-focus: var(--swc-gray-100);--swc-button-border-color-default: var(--swc-gray-300);--swc-button-border-color-hover: var(--swc-gray-400);--swc-button-border-color-down: var(--swc-gray-400);--swc-button-border-color-focus: var(--swc-gray-400);--swc-button-background-color-disabled: transparent;--swc-button-border-color-disabled: var(--swc-gray-300)}:host([static-color=\"white\"]){--swc-button-focus-indicator-color: var(--swc-white);--swc-button-background-color-default: rgba(255, 255, 255, .85);--swc-button-background-color-hover: rgba(255, 255, 255, .94);--swc-button-background-color-down: rgba(255, 255, 255, .94);--swc-button-background-color-focus: rgba(255, 255, 255, .94);--swc-button-content-color-default: rgb(0, 0, 0);--swc-button-content-color-hover: rgb(0, 0, 0);--swc-button-content-color-down: rgb(0, 0, 0);--swc-button-content-color-focus: rgb(0, 0, 0);--swc-button-background-color-disabled: var(--swc-transparent-white-100);--swc-button-border-color-disabled: transparent;--swc-button-content-color-disabled: var(--swc-transparent-white-400)}:host([static-color=\"white\"][variant=\"secondary\"]){--swc-button-background-color-default: rgba(255, 255, 255, .11);--swc-button-background-color-hover: rgba(255, 255, 255, .14);--swc-button-background-color-down: rgba(255, 255, 255, .14);--swc-button-background-color-focus: rgba(255, 255, 255, .14);--swc-button-content-color-default: rgba(255, 255, 255, .85);--swc-button-content-color-hover: rgba(255, 255, 255, .94);--swc-button-content-color-down: rgba(255, 255, 255, .94);--swc-button-content-color-focus: rgba(255, 255, 255, .94)}:host([static-color=\"white\"][fill-style=\"outline\"]){--swc-button-background-color-default: rgba(255, 255, 255, 0);--swc-button-background-color-hover: rgba(255, 255, 255, .11);--swc-button-background-color-down: rgba(255, 255, 255, .11);--swc-button-background-color-focus: rgba(255, 255, 255, .11);--swc-button-border-color-default: rgba(255, 255, 255, .85);--swc-button-border-color-hover: rgba(255, 255, 255, .94);--swc-button-border-color-down: rgba(255, 255, 255, .94);--swc-button-border-color-focus: rgba(255, 255, 255, .94);--swc-button-content-color-default: rgba(255, 255, 255, .85);--swc-button-content-color-hover: rgba(255, 255, 255, .94);--swc-button-content-color-down: rgba(255, 255, 255, .94);--swc-button-content-color-focus: rgba(255, 255, 255, .94);--swc-button-background-color-disabled: rgba(255, 255, 255, 0);--swc-button-border-color-disabled: var(--swc-transparent-white-300);--swc-button-content-color-disabled: var(--swc-transparent-white-400)}:host([static-color=\"white\"][variant=\"secondary\"][fill-style=\"outline\"]){--swc-button-background-color-default: rgba(255, 255, 255, 0);--swc-button-background-color-hover: rgba(255, 255, 255, .11);--swc-button-background-color-down: rgba(255, 255, 255, .11);--swc-button-background-color-focus: rgba(255, 255, 255, .11);--swc-button-border-color-default: rgba(255, 255, 255, .17);--swc-button-border-color-hover: rgba(255, 255, 255, .21);--swc-button-border-color-down: rgba(255, 255, 255, .21);--swc-button-border-color-focus: rgba(255, 255, 255, .21)}:host([static-color=\"black\"]){--swc-button-focus-indicator-color: var(--swc-black);--swc-button-background-color-default: rgba(0, 0, 0, .84);--swc-button-background-color-hover: rgba(0, 0, 0, .93);--swc-button-background-color-down: rgba(0, 0, 0, .93);--swc-button-background-color-focus: rgba(0, 0, 0, .93);--swc-button-content-color-default: rgb(255, 255, 255);--swc-button-content-color-hover: rgb(255, 255, 255);--swc-button-content-color-down: rgb(255, 255, 255);--swc-button-content-color-focus: rgb(255, 255, 255);--swc-button-background-color-disabled: var(--swc-transparent-black-100);--swc-button-border-color-disabled: transparent;--swc-button-content-color-disabled: var(--swc-transparent-black-400)}:host([static-color=\"black\"][variant=\"secondary\"]){--swc-button-background-color-default: rgba(0, 0, 0, .09);--swc-button-background-color-hover: rgba(0, 0, 0, .12);--swc-button-background-color-down: rgba(0, 0, 0, .12);--swc-button-background-color-focus: rgba(0, 0, 0, .12);--swc-button-content-color-default: rgba(0, 0, 0, .84);--swc-button-content-color-hover: rgba(0, 0, 0, .93);--swc-button-content-color-down: rgba(0, 0, 0, .93);--swc-button-content-color-focus: rgba(0, 0, 0, .93)}:host([static-color=\"black\"][fill-style=\"outline\"]){--swc-button-background-color-default: rgba(0, 0, 0, 0);--swc-button-background-color-hover: rgba(0, 0, 0, .09);--swc-button-background-color-down: rgba(0, 0, 0, .09);--swc-button-background-color-focus: rgba(0, 0, 0, .09);--swc-button-border-color-default: rgba(0, 0, 0, .84);--swc-button-border-color-hover: rgba(0, 0, 0, .93);--swc-button-border-color-down: rgba(0, 0, 0, .93);--swc-button-border-color-focus: rgba(0, 0, 0, .93);--swc-button-content-color-default: rgba(0, 0, 0, .84);--swc-button-content-color-hover: rgba(0, 0, 0, .93);--swc-button-content-color-down: rgba(0, 0, 0, .93);--swc-button-content-color-focus: rgba(0, 0, 0, .93);--swc-button-background-color-disabled: rgba(0, 0, 0, 0);--swc-button-border-color-disabled: var(--swc-transparent-black-300);--swc-button-content-color-disabled: var(--swc-transparent-black-400)}:host([static-color=\"black\"][variant=\"secondary\"][fill-style=\"outline\"]){--swc-button-background-color-default: rgba(0, 0, 0, 0);--swc-button-background-color-hover: rgba(0, 0, 0, .09);--swc-button-background-color-down: rgba(0, 0, 0, .09);--swc-button-background-color-focus: rgba(0, 0, 0, .09);--swc-button-border-color-default: rgba(0, 0, 0, .15);--swc-button-border-color-hover: rgba(0, 0, 0, .22);--swc-button-border-color-down: rgba(0, 0, 0, .22);--swc-button-border-color-focus: rgba(0, 0, 0, .22)}.swc-Button--iconOnly{--swc-button-border-radius: 50%;--swc-button-gap: 0;inline-size:var(--_swc-button-min-block-size);padding-inline:calc(var(--swc-button-edge-to-visual-only, 5px) - var(--_swc-button-border-width))}.swc-Button--iconOnly slot[name=icon]::slotted(*){--swc-button-edge-to-visual: 0;align-self:center}:host([pending]) .swc-Button{cursor:default}.swc-Button--pendingActive{--swc-button-down-state-transform: none;justify-content:center;inline-size:var(--swc-pending-inline-size);transition:none;--swc-button-background-color-default: var(--swc-button-background-color-disabled, var(--swc-gray-100));--swc-button-background-color-hover: var(--swc-button-background-color-disabled, var(--swc-gray-100));--swc-button-background-color-down: var(--swc-button-background-color-disabled, var(--swc-gray-100));--swc-button-background-color-focus: var(--swc-button-background-color-disabled, var(--swc-gray-100));--swc-button-border-color-default: var(--swc-button-border-color-disabled, transparent);--swc-button-border-color-hover: var(--swc-button-border-color-disabled, transparent);--swc-button-border-color-down: var(--swc-button-border-color-disabled, transparent);--swc-button-border-color-focus: var(--swc-button-border-color-disabled, transparent);--swc-button-content-color-default: var(--swc-button-content-color-disabled, var(--swc-gray-400));--swc-button-content-color-hover: var(--swc-button-content-color-disabled, var(--swc-gray-400));--swc-button-content-color-down: var(--swc-button-content-color-disabled, var(--swc-gray-400));--swc-button-content-color-focus: var(--swc-button-content-color-disabled, var(--swc-gray-400))}.swc-Button--pendingActive .swc-Button-label,.swc-Button--pendingActive slot[name=icon]::slotted(*){display:none}:host([truncate]) .swc-Button-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([justified]){flex-grow:1;justify-self:stretch;inline-size:100%}:host([justified]) .swc-Button{inline-size:100%}@media(prefers-reduced-motion:reduce){.swc-Button{transition-duration:0ms}}@media(forced-colors:active){.swc-Button--pendingActive{--swc-button-background-color-default: ButtonFace;--swc-button-background-color-hover: ButtonFace;--swc-button-background-color-down: ButtonFace;--swc-button-background-color-focus: ButtonFace;--swc-button-border-color-default: GrayText;--swc-button-border-color-hover: GrayText;--swc-button-border-color-down: GrayText;--swc-button-border-color-focus: GrayText;--swc-button-content-color-default: GrayText;--swc-button-content-color-hover: GrayText;--swc-button-content-color-down: GrayText;--swc-button-content-color-focus: GrayText}}`;
@@ -9777,10 +9781,18 @@ function following(model) {
   return state2 && !followPage(state2) ? state2 : null;
 }
 function watchOnly(model) {
+  const text2 = model?.agent?.readOnly?.();
+  if (text2) return text2;
   const state2 = following(model);
   if (!state2 || state2.access.control) return "";
   return `Watch only. To send prompts from this device, allow Control for it on ${state2.owner}.`;
 }
+function onWatch(model, listener) {
+  return [
+    ...model.agent.readOnly ? [model.agent.on("readOnly", listener)] : [],
+    ...model.follow ? [model.follow.on("follow", listener)] : []
+  ];
+}
 function terminalsAllowed(model) {
   const state2 = model?.follow?.state();
   return !state2 || !!state2.access.terminal;
@@ -10646,7 +10658,7 @@ function watchTitles(model, update) {
   const seen = /* @__PURE__ */ new Map();
   const check3 = (id) => {
     const agent = model.agent.list().find((candidate) => candidate.id === id);
-    if (agent?.kind !== "cone") return;
+    if (!agent) return;
     const title = agentTitle(model, agent);
     if (seen.get(id) === title) return;
     seen.set(id, title);
@@ -10745,7 +10757,7 @@ var SliccFreezer = class extends ModelElement {
       model.agent.on("frozen", update),
       model.agent.on("active", update),
       model.agent.on("agents", update),
-      ...model.follow ? [model.follow.on("follow", update)] : []
+      ...onWatch(model, update)
     ];
   }
   focus() {
@@ -11406,11 +11418,25 @@ async function createCone(model, trigger2) {
   if (created) port.select(created.id);
   return created;
 }
+var statusOrder = ["working", "thinking", "waiting", "error", "idle"];
+function scoopSummary(scoops) {
+  if (scoops.length === 0) return "";
+  const counts = statusOrder.map((status2) => [status2, scoops.filter((scoop) => scoop.status === status2).length]).filter(([, count]) => count > 0).map(([status2, count]) => `${count} ${statusLabel[status2].toLowerCase()}`);
+  return `${scoops.length} scoop${scoops.length === 1 ? "" : "s"}: ${counts.join(", ")}`;
+}
+function unreadCount(unread) {
+  return unread > 9 ? "9+" : String(unread);
+}
 function fillShown(fill2) {
   return fill2 >= 0.5;
 }
 var SliccAgents = class extends ModelElement {
   static properties = { ...ModelElement.properties, errors: { state: true } };
+  #expanded = null;
+  #pointer = false;
+  #modality = (event2) => {
+    this.#pointer = event2.type === "pointerdown";
+  };
   constructor() {
     super();
     this.errors = {};
@@ -11419,16 +11445,22 @@ var SliccAgents = class extends ModelElement {
     shared,
     i`
     :host {
-      display: block;
+      display: flex;
+      flex-direction: column;
       height: 100%;
-      overflow-y: auto;
+      overflow: hidden;
       background: var(--swc-background-layer-1-color);
       color: var(--swc-neutral-content-color-default);
       font-size: var(--swc-font-size-100);
     }
+    .list {
+      flex: 1;
+      min-block-size: 0;
+      overflow-y: auto;
+    }
     .actions {
       display: flex;
-      padding: var(--swc-spacing-75) var(--swc-spacing-100) 0;
+      padding: var(--swc-spacing-75) var(--swc-spacing-100);
     }
     ul {
       list-style: none;
@@ -11436,31 +11468,67 @@ var SliccAgents = class extends ModelElement {
       padding: var(--swc-spacing-75) 0;
     }
     li {
+      --row-background: var(--swc-background-layer-1-color);
+      --row-head: 1lh;
+      --row-description: calc(2 * 1.4 * var(--swc-font-size-75));
+      position: relative;
       display: grid;
-      grid-template-columns: minmax(0, 1fr) auto auto auto;
-      grid-template-areas: 'name unread fill drop' 'title unread fill drop' 'status unread fill drop' 'error error error error';
+      grid-template-columns: minmax(0, 1fr) auto;
+      grid-template-areas: 'head fill' 'description description' 'ribbon ribbon' 'error error';
+      grid-template-rows: var(--row-head) var(--row-description) var(--swc-spacing-100);
       align-items: center;
       column-gap: var(--swc-spacing-100);
       padding: var(--swc-spacing-75) var(--swc-spacing-200);
+      background: var(--row-background);
       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 {
-      background: var(--swc-gray-100);
+      --row-background: var(--swc-gray-100);
     }
     li[aria-selected='true'] {
-      background: var(--swc-gray-200);
-      box-shadow: inset var(--swc-spacing-50) 0 0 var(--swc-accent-visual-color);
+      --row-background: var(--swc-gray-200);
     }
     li:focus-visible {
       outline: var(--swc-focus-indicator-thickness) solid var(--swc-focus-indicator-color);
       outline-offset: calc(-1 * var(--swc-focus-indicator-thickness));
     }
+    .head {
+      grid-area: head;
+      display: flex;
+      align-items: center;
+      gap: var(--swc-spacing-75);
+      min-inline-size: 0;
+    }
+    .head > * {
+      flex: none;
+    }
+    .marker {
+      flex: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: var(--swc-spacing-200);
+      block-size: var(--swc-spacing-200);
+      border-radius: var(--swc-corner-radius-full);
+      font-size: var(--swc-font-size-25);
+      font-variant-numeric: tabular-nums;
+      line-height: 1;
+    }
+    .marker.unread {
+      box-sizing: border-box;
+      inline-size: auto;
+      min-inline-size: var(--swc-spacing-200);
+      padding-inline: var(--swc-spacing-50);
+      background: var(--swc-accent-background-color-default);
+      color: var(--swc-white);
+      font-weight: var(--swc-bold-font-weight);
+    }
     .name {
-      grid-area: name;
+      flex: 0 1 auto;
+      min-inline-size: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -11469,29 +11537,58 @@ var SliccAgents = class extends ModelElement {
       font-weight: var(--swc-bold-font-weight);
     }
     .title {
-      grid-area: title;
+      grid-area: description;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
       overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      overflow-wrap: anywhere;
+      line-height: 1.4;
       font-size: var(--swc-font-size-75);
       color: var(--swc-neutral-subdued-content-color-default);
     }
-    .unread {
-      --swc-badge-height: var(--swc-spacing-300);
-      --swc-badge-padding-block: var(--swc-spacing-50);
-      --swc-badge-padding-inline: var(--swc-spacing-75);
-      --swc-badge-corner-radius: var(--swc-spacing-100);
-      --swc-badge-line-height: 1;
-      grid-area: unread;
-      align-self: center;
+    .state {
+      color: var(--swc-neutral-content-color-default);
+    }
+    .ribbon {
+      grid-area: ribbon;
+      display: flex;
+      align-items: center;
+      gap: var(--swc-spacing-50);
+      overflow: hidden;
+    }
+    .status,
+    .segment {
+      background: var(--swc-neutral-visual-color);
+    }
+    .status[data-status='thinking'],
+    .status[data-status='working'],
+    .segment[data-status='thinking'],
+    .segment[data-status='working'] {
+      background: var(--swc-informative-visual-color);
+    }
+    .status[data-status='waiting'],
+    .segment[data-status='waiting'] {
+      background: var(--swc-notice-visual-color);
+    }
+    .status[data-status='error'],
+    .segment[data-status='error'] {
+      background: var(--swc-negative-visual-color);
+    }
+    .segment {
+      flex: none;
+      inline-size: var(--swc-spacing-200);
+      block-size: var(--swc-spacing-50);
+      border-radius: var(--swc-corner-radius-full);
     }
     .fill {
       grid-area: fill;
+      position: relative;
+      z-index: 1;
+      align-self: start;
       font-size: var(--swc-font-size-75);
       font-variant-numeric: tabular-nums;
       color: var(--swc-neutral-subdued-content-color-default);
-      min-width: 4ch;
-      text-align: end;
     }
     .fill[data-variant='notice'] {
       color: var(--swc-notice-color-1000);
@@ -11501,18 +11598,20 @@ var SliccAgents = class extends ModelElement {
       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;
+    .drop-cell {
+      position: absolute;
+      inset-block: 0;
+      inset-inline-end: 0;
+      display: flex;
+      align-items: center;
+      padding-inline: var(--swc-spacing-100);
+      background: var(--row-background);
+      opacity: 0;
     }
-    li:hover .drop,
-    li:focus-within .drop {
-      visibility: visible;
+    li:hover .drop-cell,
+    li:focus-visible .drop-cell,
+    .drop-cell[data-shown] {
+      opacity: 1;
     }
     .error {
       grid-area: error;
@@ -11529,23 +11628,46 @@ var SliccAgents = class extends ModelElement {
       white-space: nowrap;
     }
     @media (hover: none), (pointer: coarse) {
-      .drop {
-        visibility: visible;
+      .drop-cell {
+        opacity: 1;
       }
     }
   `
   ];
   subscribe(model) {
+    const focused2 = this.#focused(model);
+    this.#expanded = focused2?.kind === "scoop" ? focused2.parentId : null;
     return [
       model.agent.on("agents", () => this.requestUpdate()),
-      model.agent.on("active", () => this.requestUpdate()),
+      model.agent.on("active", () => {
+        const next = this.#focused(model);
+        if (next) this.#expanded = next.kind === "cone" ? next.id : next.parentId;
+        this.requestUpdate();
+      }),
       watchTitles(model, () => this.requestUpdate()),
-      ...model.follow ? [model.follow.on("follow", () => this.requestUpdate())] : []
+      ...onWatch(model, () => this.requestUpdate()),
+      this.#watchPointer()
     ];
   }
+  #watchPointer() {
+    const types = ["pointerdown", "keydown"];
+    for (const type of types) globalThis.addEventListener(type, this.#modality, true);
+    return () => {
+      for (const type of types) globalThis.removeEventListener(type, this.#modality, true);
+    };
+  }
+  #focused(model) {
+    return model.agent.list().find((agent) => agent.id === model.agent.active());
+  }
   #select(id) {
     this.model?.agent.select(id);
   }
+  #pick(agent) {
+    const open = agent.kind === "cone" && this.#expanded !== agent.id;
+    this.#select(agent.id);
+    if (agent.kind === "cone") this.#expanded = open ? agent.id : null;
+    this.requestUpdate();
+  }
   focus() {
     this.focusOn('li[tabindex="0"]');
   }
@@ -11564,21 +11686,44 @@ var SliccAgents = class extends ModelElement {
     if (event2.key in moves) {
       event2.preventDefault();
       items[Math.max(0, Math.min(items.length - 1, moves[event2.key]))]?.focus();
-    } else if (event2.key === "Enter" || event2.key === " ") {
+      return;
+    }
+    const agent = this.model?.agent.list().find((item2) => item2.id === items[index]?.dataset.id);
+    if (!agent) return;
+    if (event2.key === "Enter" || event2.key === " ") {
+      event2.preventDefault();
+      this.#pick(agent);
+    } else if (event2.key === "ArrowRight" && this.#scoops(agent).length > 0) {
+      event2.preventDefault();
+      if (this.#expanded === agent.id) items[index + 1].focus();
+      else this.#pick(agent);
+    } else if (event2.key === "ArrowLeft" && agent.kind === "scoop") {
       event2.preventDefault();
-      const id = items[index]?.dataset.id;
-      if (id) this.#select(id);
+      items.find((item2) => item2.dataset.id === agent.parentId)?.focus();
+    } else if (event2.key === "ArrowLeft" && this.#expanded === agent.id) {
+      event2.preventDefault();
+      this.#pick(agent);
     } else if (event2.key === "Delete") {
-      const agent = this.model?.agent.list().find((item2) => item2.id === items[index]?.dataset.id);
-      if (agent && this.#droppable(agent)) {
+      if (this.#droppable(agent)) {
         event2.preventDefault();
         void this.#drop(agent, items[index]);
-      } else if (agent && this.#deletable(agent)) {
+      } else if (this.#deletable(agent)) {
         event2.preventDefault();
         void this.#deleteCone(agent, items[index]);
       }
     }
   }
+  #scoops(agent) {
+    if (agent.kind !== "cone") return [];
+    return this.model.agent.list().filter((other) => other.parentId === agent.id);
+  }
+  #focusin(event2) {
+    const cell = event2.target.closest(".drop-cell");
+    cell?.toggleAttribute("data-shown", !this.#pointer);
+  }
+  #focusout(event2) {
+    event2.target.closest(".drop-cell")?.removeAttribute("data-shown");
+  }
   #droppable(agent) {
     return agent.kind === "scoop" && Boolean(this.model?.agent.drop) && !watchOnly(this.model);
   }
@@ -11616,69 +11761,89 @@ var SliccAgents = class extends ModelElement {
     await this.updateComplete;
     this.focus();
   }
-  #dropButton(agent) {
+  #dropButton(agent, selected) {
     if (!this.#droppable(agent)) return A;
     const id = `drop-${agent.id}`;
     const label = `Drop scoop ${agent.name}`;
-    return b`<swc-action-button
-        id=${id}
-        class="drop"
-        size="l"
-        quiet
-        tabindex="-1"
-        data-action="drop"
-        accessible-label=${label}
-        @click=${(event2) => {
+    return b`<span class="drop-cell"
+        ><swc-action-button
+          id=${id}
+          class="drop"
+          size="l"
+          quiet
+          tabindex=${selected ? "0" : "-1"}
+          data-action="drop"
+          accessible-label=${label}
+          @click=${(event2) => {
       event2.stopPropagation();
       void this.#drop(agent, event2.currentTarget);
     }}
-        ><swc-icon-close slot="icon"></swc-icon-close></swc-action-button
-      ><swc-tooltip for=${id} placement="start">${label}</swc-tooltip>`;
+          ><swc-icon-close slot="icon"></swc-icon-close></swc-action-button
+        ><swc-tooltip for=${id} placement="start">${label}</swc-tooltip></span
+      >`;
   }
-  #deleteButton(agent) {
+  #deleteButton(agent, selected) {
     if (!this.#deletable(agent)) return A;
     const id = `delete-${agent.id}`;
     const label = `Delete cone ${coneLabel(this.model, agent)}`;
-    return b`<swc-action-button
-        id=${id}
-        class="drop"
-        size="l"
-        quiet
-        tabindex="-1"
-        data-action="delete-cone"
-        accessible-label=${label}
-        @click=${(event2) => {
+    return b`<span class="drop-cell"
+        ><swc-action-button
+          id=${id}
+          class="drop"
+          size="l"
+          quiet
+          tabindex=${selected ? "0" : "-1"}
+          data-action="delete-cone"
+          accessible-label=${label}
+          @click=${(event2) => {
       event2.stopPropagation();
       void this.#deleteCone(agent, event2.currentTarget);
     }}
-        ><swc-icon-delete slot="icon"></swc-icon-delete></swc-action-button
-      ><swc-tooltip for=${id} placement="start">${label}</swc-tooltip>`;
+          ><swc-icon-delete slot="icon"></swc-icon-delete></swc-action-button
+        ><swc-tooltip for=${id} placement="start">${label}</swc-tooltip></span
+      >`;
+  }
+  #ribbon(scoops) {
+    if (scoops.length === 0) return A;
+    return b`<span class="ribbon" aria-hidden="true">${scoops.map(
+      (scoop) => b`<span class="segment" data-status=${scoop.status}></span>`
+    )}</span>`;
   }
   #row(agent, active) {
     const selected = agent.id === active;
     const error = this.errors[agent.id];
     const model = this.model;
-    const title = agent.kind === "cone" ? agentTitle(model, agent) : null;
+    const title = agentTitle(model, agent);
+    const scoops = this.#scoops(agent);
+    const open = this.#expanded === agent.id;
     const unread = selected ? 0 : agent.unread;
     const label = `${coneLabel(model, agent)}: ${statusLabel[agent.status]}, ${percent(agent.contextFill)} context${unread ? `, ${unread} unread` : ""}${error ? `. ${error}` : ""}`;
+    const summary = scoopSummary(scoops);
     return b`<li
-      role="option"
+      role="treeitem"
+      id=${`row-${agent.id}`}
       class=${agent.kind}
       data-id=${agent.id}
+      aria-level=${agent.kind === "cone" ? "1" : "2"}
       aria-selected=${selected ? "true" : "false"}
+      aria-expanded=${scoops.length ? String(open) : A}
+      aria-controls=${open && scoops.length ? scoops.map((scoop) => `row-${scoop.id}`).join(" ") : A}
       aria-label=${label}
+      aria-description=${summary || A}
       tabindex=${selected ? "0" : "-1"}
       aria-keyshortcuts=${this.#droppable(agent) || this.#deletable(agent) ? "Delete" : A}
-      title=${label}
-      @click=${() => this.#select(agent.id)}
+      title=${summary ? `${label}. ${summary}` : label}
+      @click=${() => this.#pick(agent)}
     >
-      <span class="name">${agent.name}</span>
-      ${title === null ? A : b`<span class="title">${title || untitled}</span>`}
-      ${unread ? b`<swc-badge class="unread" size="s" variant="accent">${unread}</swc-badge>` : A}
+      <div class="head">
+        ${unread ? b`<span class="marker unread" aria-hidden="true">${unreadCount(unread)}</span>` : b`<span class="marker status" data-status=${agent.status} aria-hidden="true"></span>`}
+        <span class="name">${agent.name}</span>
+      </div>
       ${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)}
+      <span class="title"><span class="state">${statusLabel[agent.status]}</span> · ${title || untitled}</span>
+      ${this.#ribbon(scoops)}
+      ${this.#dropButton(agent, selected)}
+      ${this.#deleteButton(agent, selected)}
       ${error ? b`<span class="error">${error}</span>` : A}
     </li>`;
   }
@@ -11696,12 +11861,15 @@ var SliccAgents = class extends ModelElement {
     </div>`;
   }
   render() {
-    const agents = ordered(this.model?.agent.list() ?? []);
+    const list5 = this.model?.agent.list() ?? [];
     const active = this.model?.agent.active() ?? "";
     const errors = Object.values(this.errors);
-    return b`${this.#actions()}<ul role="listbox" aria-label="Cones and scoops" @keydown=${this.#keydown}>
-        ${agents.map((agent) => this.#row(agent, active))}
-      </ul>
+    const rows = ordered(list5).filter(
+      (agent) => agent.kind === "cone" || agent.parentId === this.#expanded
+    );
+    return b`<div class="list"><ul role="tree" aria-label="Cones and scoops" @keydown=${this.#keydown} @focusin=${this.#focusin} @focusout=${this.#focusout}>
+        ${rows.map((agent) => this.#row(agent, active))}
+      </ul></div>${this.#actions()}
       <div class="sr" role="status">${errors.at(-1) ?? ""}</div>`;
   }
 };
@@ -11879,6 +12047,7 @@ function fallbackModel(options) {
   return offered.find((option2) => option2.default) ?? offered[0];
 }
 function controls(model) {
+  if (model.agent.readOnly?.()) return false;
   const state2 = model.follow?.state();
   return !state2 || !!state2.access.control && state2.link === "connected";
 }
@@ -32790,6 +32959,12 @@ var SliccApp = class extends ThemedElement {
       ...model.updates ? [model.updates.on("items", update)] : [],
       ...model.network ? [model.network.on("network", update)] : [],
       ...model.tabs ? [model.tabs.on("tabs", update)] : [],
+      ...model.agent.readOnly ? [
+        model.agent.on("readOnly", () => {
+          settle2();
+          update();
+        })
+      ] : [],
       ...model.follow ? [
         model.follow.on("follow", () => {
           settle2();
@@ -34760,7 +34935,7 @@ var SliccBrowser = class extends ModelElement {
         this.requestUpdate();
       }),
       ...model.network ? [model.network.on("network", () => this.requestUpdate())] : [],
-      ...model.follow ? [model.follow.on("follow", () => this.requestUpdate())] : [],
+      ...onWatch(model, () => this.requestUpdate()),
       () => clearInterval(timer),
       () => resize.disconnect(),
       () => document.removeEventListener("visibilitychange", visibility),
@@ -35429,7 +35604,10 @@ var SliccChanges = class extends ModelElement {
     `
   ];
   subscribe(model) {
-    return [changesOf(model).on("changes", () => this.requestUpdate())];
+    return [
+      changesOf(model).on("changes", () => this.requestUpdate()),
+      ...onWatch(model, () => this.requestUpdate())
+    ];
   }
   focus() {
     this.focusOn("li[data-path]");
@@ -35444,7 +35622,8 @@ var SliccChanges = class extends ModelElement {
   async #revert(event2, change) {
     event2.stopPropagation();
     this.error = "";
-    if (await confirmRevert(change)) this.error = await revertPaths(this.#port(), [change.path]);
+    if (await confirmRevert(change) && !watchOnly(this.model))
+      this.error = await revertPaths(this.#port(), [change.path]);
   }
   async #all(action) {
     const port = this.#port();
@@ -35456,7 +35635,7 @@ var SliccChanges = class extends ModelElement {
     }
     const count = changes2.length;
     const title = `Revert ${count} ${count === 1 ? "change" : "changes"}?`;
-    if (await confirm({ title, body: lost(changes2), action: "Revert all" }))
+    if (await confirm({ title, body: lost(changes2), action: "Revert all" }) && !watchOnly(this.model))
       this.error = await revertPaths(
         port,
         changes2.map((change) => change.path)
@@ -35492,7 +35671,7 @@ var SliccChanges = class extends ModelElement {
       ${statusMark(change.status)}
       <span class="name">${basename(change.path)}</span>
       <span class="where"><bdi>${[at, by].filter(Boolean).join(" \xB7 ")}</bdi></span>
-      <span class="actions">
+      ${watchOnly(this.model) ? A : b`<span class="actions">
         <swc-action-button
           size="xs"
           quiet
@@ -35511,7 +35690,7 @@ var SliccChanges = class extends ModelElement {
         >
           <swc-icon-revert slot="icon"></swc-icon-revert>
         </swc-action-button>
-      </span>
+      </span>`}
     </li>`;
   }
   #list(changes2) {
@@ -35563,8 +35742,8 @@ var SliccChanges = class extends ModelElement {
     return b`<div class="bar">
         <span class="summary">${changes2.length} pending ${changes2.length === 1 ? "change" : "changes"}</span>
         <span class="spacer"></span>
-        ${changes2.length ? b`<swc-action-button size="s" quiet @click=${() => this.#all("accept")}>Accept all</swc-action-button>
-              <swc-action-button size="s" quiet @click=${() => this.#all("revert")}>Revert all</swc-action-button>` : A}
+        ${changes2.length && !watchOnly(this.model) ? b`<swc-action-button size="s" quiet data-action="accept-all" @click=${() => this.#all("accept")}>Accept all</swc-action-button>
+              <swc-action-button size="s" quiet data-action="revert-all" @click=${() => this.#all("revert")}>Revert all</swc-action-button>` : A}
       </div>
       ${errorLine(this.error)}
       ${changes2.length ? this.#list(changes2) : b`<div class="note">No pending changes. Edits by agents show up here for review.</div>`}`;
@@ -35619,11 +35798,16 @@ var SliccDiffPanel = class extends ThemedElement {
     `
   ];
   subscribe(model) {
-    return [...super.subscribe(model), changesOf(model).on("changes", () => this.requestUpdate())];
+    return [
+      ...super.subscribe(model),
+      changesOf(model).on("changes", () => this.requestUpdate()),
+      ...onWatch(model, () => this.requestUpdate())
+    ];
   }
   async #revert(port, change) {
     this.error = "";
-    if (await confirmRevert(change)) this.error = await revertPaths(port, [this.path]);
+    if (await confirmRevert(change) && !watchOnly(this.model))
+      this.error = await revertPaths(port, [this.path]);
   }
   #body(change, style) {
     if (change.before === null && change.after === null) {
@@ -35672,12 +35856,12 @@ var SliccDiffPanel = class extends ThemedElement {
               >`
     )}
         </swc-action-group>`}
-        <swc-action-button size="s" quiet data-action="accept" accessible-label="Accept" title="Accept" @click=${() => port?.accept(this.path)}>
+        ${watchOnly(model) ? A : b`<swc-action-button size="s" quiet data-action="accept" accessible-label="Accept" title="Accept" @click=${() => port?.accept(this.path)}>
           <swc-icon-checkmark slot="icon"></swc-icon-checkmark><span class="label">Accept</span>
         </swc-action-button>
         <swc-action-button size="s" quiet data-action="revert" accessible-label="Revert" title="Revert" @click=${() => this.#revert(port, change)}>
           <swc-icon-revert slot="icon"></swc-icon-revert><span class="label">Revert</span>
-        </swc-action-button>
+        </swc-action-button>`}
       </div>
       ${errorLine(this.error)}
       ${this.#body(change, style)}`;
@@ -36192,7 +36376,7 @@ var SliccChat = class extends ThemedElement {
       }),
       model.agent.on("agents", settle2),
       ...model.tabs ? [model.tabs.on("tabs", () => this.requestUpdate())] : [],
-      ...model.follow ? [model.follow.on("follow", settle2)] : [],
+      ...onWatch(model, settle2),
       model.agent.on("messages", (agentId) => {
         if (agentId === this.#id()) this.#refresh(this.#sent(agentId));
       }),
@@ -37769,6 +37953,10 @@ var SliccComposer = class extends ThemedElement {
   #abandon;
   #recognition = null;
   #erase;
+  #release = (event2) => {
+    const released = event2 instanceof KeyboardEvent && (event2.code === "KeyM" || event2.key === "Alt");
+    if (this.dictating && (released || event2.type === "blur")) this.dictate();
+  };
   #keys = { capture: true, handleEvent: (event2) => this.#keydown(event2) };
   constructor() {
     super();
@@ -37930,27 +38118,6 @@ var SliccComposer = class extends ThemedElement {
       .failed {
         color: var(--swc-negative-content-color-default);
       }
-      .below {
-        display: flex;
-        align-items: center;
-        gap: var(--swc-spacing-100);
-        max-width: 860px;
-        margin: var(--swc-spacing-75) auto 0;
-        min-height: var(--swc-component-height-75);
-      }
-      .below swc-action-button {
-        margin-inline-start: auto;
-      }
-      swc-action-button.selected {
-        --swc-action-button-background-color-default: var(--swc-neutral-background-color-selected-default);
-        --swc-action-button-background-color-hover: var(--swc-neutral-background-color-selected-hover);
-        --swc-action-button-background-color-down: var(--swc-neutral-background-color-selected-down);
-        --swc-action-button-background-color-focus: var(--swc-neutral-background-color-selected-key-focus);
-        --swc-action-button-content-color-default: var(--swc-gray-25);
-        --swc-action-button-content-color-hover: var(--swc-gray-25);
-        --swc-action-button-content-color-down: var(--swc-gray-25);
-        --swc-action-button-content-color-focus: var(--swc-gray-25);
-      }
       .popup {
         position: absolute;
         left: 0;
@@ -38056,6 +38223,8 @@ var SliccComposer = class extends ThemedElement {
   connectedCallback() {
     super.connectedCallback();
     clearTimeout(this.#abandon);
+    globalThis.addEventListener("keyup", this.#release);
+    globalThis.addEventListener("blur", this.#release);
     if (this.hasUpdated) this.#wire();
   }
   firstUpdated() {
@@ -38063,6 +38232,8 @@ var SliccComposer = class extends ThemedElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
+    globalThis.removeEventListener("keyup", this.#release);
+    globalThis.removeEventListener("blur", this.#release);
     clearValues(this.renderRoot);
     const held = [
       this.attachments,
@@ -38408,10 +38579,21 @@ var SliccComposer = class extends ThemedElement {
       return this.#recall(-1);
     return false;
   }
+  #talking() {
+    return !!this.model?.settings.get().pushToTalk && !!speech();
+  }
+  #shortcut(event2) {
+    if (event2.key === "Backspace" || event2.key === "Delete") this.#flash();
+    const chord = event2.altKey && !event2.ctrlKey && !event2.metaKey && !event2.shiftKey;
+    if (!chord || event2.code !== "KeyM" || !this.#talking()) return false;
+    event2.preventDefault();
+    if (!event2.repeat) this.dictate();
+    return true;
+  }
   #keydown(event2) {
     const area = this.#textarea;
     if (event2.isComposing || !area || event2.composedPath()[0] !== area) return;
-    if (event2.key === "Backspace" || event2.key === "Delete") this.#flash();
+    if (this.#shortcut(event2)) return;
     const sendOnEnter = this.model?.settings.get().sendOnEnter ?? true;
     let handled = this.#popupKey(event2) || this.#historyKey(event2, area);
     if (!handled && event2.key === "Tab" && !event2.shiftKey && !this.value) {
@@ -38451,7 +38633,8 @@ var SliccComposer = class extends ThemedElement {
     keys.push(
       `${enter ? "Shift+Enter" : "Enter"} adds a new line`,
       "/ lists commands",
-      "@ mentions"
+      "@ mentions",
+      ...this.#talking() ? ["hold Alt+M to dictate"] : []
     );
     return `${keys.join(", ")}.`;
   }
@@ -38485,17 +38668,23 @@ var SliccComposer = class extends ThemedElement {
       );
     }
   }
+  #toggleTalk = (event2) => {
+    event2.stopPropagation();
+    const settings = this.model?.settings;
+    settings?.update({ pushToTalk: !settings.get().pushToTalk });
+  };
   dictate() {
     if (this.#recognition) {
       this.#recognition.stop();
       return;
     }
-    const Speech = globalThis.SpeechRecognition ?? globalThis.webkitSpeechRecognition;
+    const Speech = speech();
     if (!Speech) return;
     const recognition = new Speech();
     recognition.interimResults = false;
+    recognition.continuous = true;
     recognition.onresult = (event2) => {
-      const text2 = [...event2.results].map((result) => result[0].transcript).join(" ");
+      const text2 = [...event2.results].slice(event2.resultIndex ?? 0).map((result) => result[0].transcript).join(" ");
       this.value = `${this.value}${this.value && !this.value.endsWith(" ") ? " " : ""}${text2}`;
     };
     recognition.onend = () => {
@@ -38641,7 +38830,8 @@ var SliccComposer = class extends ThemedElement {
     const agent = this.model?.agent.list().find((candidate) => candidate.id === this.#agent);
     const suggestion = this.model?.agent.suggestion(this.#agent);
     const canSend = !!this.value.trim() || this.attachments.some((attachment2) => !attachment2.error);
-    const speech = "SpeechRecognition" in globalThis || "webkitSpeechRecognition" in globalThis;
+    const pushToTalk = this.model?.settings.get().pushToTalk ?? false;
+    const talk = !!speech();
     const held = this.#held();
     return b`<div class="column">
         <span id="keys" class="sr" aria-hidden="true">${this.#instructions(busy)}</span>
@@ -38679,6 +38869,10 @@ var SliccComposer = class extends ThemedElement {
             <sp-menu-item value="screenshot">Take a screenshot of the browser tab</sp-menu-item>
             <sp-menu-item value="file">Attach a file from SLICC</sp-menu-item>
             <sp-menu-item value="secret">Share a secret</sp-menu-item>
+            ${talk ? b`<sp-menu-divider></sp-menu-divider>
+            <sp-menu-group selects="multiple" data-group="talk" @change=${this.#toggleTalk}>
+              <sp-menu-item value="push-to-talk" data-action="push-to-talk" ?selected=${pushToTalk}>Enable push to talk<span slot="description">Hold Alt+M to dictate</span></sp-menu-item>
+            </sp-menu-group>` : A}
           </sp-menu>
         </swc-popover>
         <input type="file" multiple @change=${(event2) => {
@@ -38686,17 +38880,7 @@ var SliccComposer = class extends ThemedElement {
       void this.addFiles([...input.files ?? []]);
       input.value = "";
     }} />
-      </div>
-      ${speech ? b`<div class="below">
-              <swc-action-button
-                size="s"
-                quiet
-                class=${this.dictating ? "selected" : ""}
-                accessible-label=${this.dictating ? "Stop dictation" : "Dictate"}
-                data-action="dictate"
-                @click=${() => this.dictate()}
-              ><swc-icon-microphone slot="icon"></swc-icon-microphone></swc-action-button>
-            </div>` : A}`;
+      </div>`;
   }
 };
 
@@ -39251,7 +39435,7 @@ var SliccNotices = class extends ModelElement {
       (action) => b`<swc-button size="s" variant="secondary" fill-style="outline" data-action=${action.id} ?pending=${pending === action.id} ?disabled=${!!pending && pending !== action.id} @click=${() => void this.act(notice.id, action.id)}>${action.label}</swc-button>`
     )}</div>` : A}
       </div>
-      <swc-close-button size="m" data-dismiss accessible-label=${`Dismiss: ${notice.title}`} @click=${() => this.dismiss(notice.id)}></swc-close-button>
+      ${notice.dismissible === false ? A : b`<swc-close-button size="m" data-dismiss accessible-label=${`Dismiss: ${notice.title}`} @click=${() => this.dismiss(notice.id)}></swc-close-button>`}
     </div>`;
   }
   #tabs() {
@@ -39278,7 +39462,9 @@ var SliccNotices = class extends ModelElement {
   }
   render() {
     const port = this.model?.notices;
-    const notices = (port?.list() ?? []).filter((notice) => !this.dismissed.has(notice.id));
+    const notices = (port?.list() ?? []).filter(
+      (notice) => notice.dismissible === false || !this.dismissed.has(notice.id)
+    );
     const tabs = this.#tabs();
     const approvals = this.model?.approvals?.decide ? [] : waiting(this.model, Date.now());
     if (!notices.length && !approvals.length && tabs === A) return A;
@@ -40998,6 +41184,7 @@ var SliccSettings = class extends ThemedElement {
         <div class="switches">
           <sp-switch ?checked=${value.sendOnEnter} data-setting="sendOnEnter" @change=${(e122) => this.#update({ sendOnEnter: this.#checked(e122) })}>Enter sends, Shift+Enter adds a line</sp-switch>
           <sp-switch ?checked=${value.showThinking} data-setting="showThinking" @change=${(e122) => this.#update({ showThinking: this.#checked(e122) })}>Show thinking</sp-switch>
+          ${speech() ? b`<sp-switch ?checked=${value.pushToTalk ?? false} data-setting="pushToTalk" @change=${(e122) => this.#update({ pushToTalk: this.#checked(e122) })}>Push to talk: hold Alt+M to dictate</sp-switch>` : A}
         </div>
       </div>
       <div class="row">
@@ -41110,12 +41297,13 @@ var bridge = `(() => {
       }
       node.replaceWith(svg);
     }
+    size();
   };
   const fonts = (list) => {
     for (const font of list) {
       const face = new FontFace(font.family, font.data, { weight: String(font.weight) });
       document.fonts.add(face);
-      face.load().catch(() => {});
+      face.load().then(size, () => {});
     }
   };
   addEventListener('message', (event) => {
@@ -41131,6 +41319,7 @@ var bridge = `(() => {
   };
   document.addEventListener('DOMContentLoaded', () => {
     window.LucideIcons.render();
+    size();
     new ResizeObserver(size).observe(document.body);
   });
   post({ type: 'slicc-ready' });
@@ -41432,7 +41621,7 @@ var SliccSprinkle = class extends ThemedElement {
       () => globalThis.removeEventListener("message", this.#message),
       model.sprinkles.on("sprinkles", () => this.requestUpdate()),
       this.#dips.on("change", () => this.requestUpdate()),
-      ...model.follow ? [model.follow.on("follow", () => this.requestUpdate())] : []
+      ...onWatch(model, () => this.requestUpdate())
     ];
   }
   #drag = (event2) => {