@ai-ecoverse/slicc-spectrum 1.74.0 → 1.76.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;
@@ -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() {
@@ -11633,7 +11645,7 @@ var SliccAgents = class extends ModelElement {
         this.requestUpdate();
       }),
       watchTitles(model, () => this.requestUpdate()),
-      ...model.follow ? [model.follow.on("follow", () => this.requestUpdate())] : [],
+      ...onWatch(model, () => this.requestUpdate()),
       this.#watchPointer()
     ];
   }
@@ -12035,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";
 }
@@ -30999,7 +31012,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>`;
 }
@@ -31097,6 +31110,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";
@@ -31145,37 +31161,57 @@ 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 lick(message, handlers, stamp = true) {
-  const [label, variant] = lickLabels[message.channel];
+  const [label] = lickLabels[message.channel];
   const decide = message.channel === "sudo-request" && message.state === "pending";
   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>`;
+    ${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 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;
   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>${actions2}</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">${decide ? b`<div class="pending">${details}${actions2}</div>` : details}${reaction}</div>`
+  );
 }
 var messageCss = i`
   swc-conversation-thread > .message,
@@ -31245,10 +31281,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;
@@ -31395,9 +31435,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 {
@@ -31928,15 +31968,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);
@@ -31955,8 +32005,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;
   }
@@ -31967,7 +32016,7 @@ var messageCss = i`
   }
   .pending {
     border: var(--swc-border-width-100) solid var(--swc-notice-visual-color);
-    border-radius: var(--swc-corner-radius-100);
+    border-radius: var(--swc-corner-radius-700);
   }
   .pending > details.lick {
     border: 0;
@@ -32946,6 +32995,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();
@@ -34916,7 +34971,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),
@@ -35585,7 +35640,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]");
@@ -35600,7 +35658,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();
@@ -35612,7 +35671,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)
@@ -35648,7 +35707,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
@@ -35667,7 +35726,7 @@ var SliccChanges = class extends ModelElement {
         >
           <swc-icon-revert slot="icon"></swc-icon-revert>
         </swc-action-button>
-      </span>
+      </span>`}
     </li>`;
   }
   #list(changes2) {
@@ -35719,8 +35778,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>`}`;
@@ -35775,11 +35834,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) {
@@ -35828,12 +35892,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)}`;
@@ -36348,7 +36412,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));
       }),
@@ -37925,6 +37989,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();
@@ -38086,27 +38154,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;
@@ -38212,6 +38259,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() {
@@ -38219,6 +38268,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,
@@ -38564,10 +38615,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) {
@@ -38607,7 +38669,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(", ")}.`;
   }
@@ -38641,17 +38704,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 = () => {
@@ -38797,7 +38866,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>
@@ -38835,6 +38905,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) => {
@@ -38842,17 +38916,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>`;
   }
 };
 
@@ -39407,7 +39471,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() {
@@ -39434,7 +39498,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;
@@ -41154,6 +41220,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">
@@ -41590,7 +41657,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) => {
@@ -80140,7 +80207,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();
@@ -80153,13 +80220,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", () => {