@ai-ecoverse/slicc-spectrum 1.65.0 → 1.65.1

package/dist/slicc-ui.js

@@ -9548,100 +9548,499 @@ function prompt(options) {
   return element2.result;
 }
 
-// node_modules/@adobe/spectrum-wc-icons/dist/AlertDiamond.js
-function e74() {
-  return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M10 18.795a2.24 2.24 0 0 1-1.591-.66l-6.545-6.544a2.254 2.254 0 0 1 0-3.182l6.545-6.545c.849-.85 2.333-.85 3.182 0l6.545 6.545a2.254 2.254 0 0 1 0 3.182l-6.545 6.545c-.425.425-.99.659-1.591.659m0-16.09c-.2 0-.389.078-.53.22L2.925 9.47a.75.75 0 0 0 0 1.06l6.545 6.545a.77.77 0 0 0 1.06 0l6.545-6.545a.75.75 0 0 0 0-1.06L10.53 2.925a.75.75 0 0 0-.53-.22"/><path fill="var(--swc-icon-color, currentColor)" d="M10 14.998a.9.9 0 0 1-.627-.228.956.956 0 0 1 0-1.285.87.87 0 0 1 .626-.234c.237-.01.466.08.633.247a.86.86 0 0 1 .242.627.88.88 0 0 1-.228.639.86.86 0 0 1-.647.234M10 11.625a.75.75 0 0 1-.75-.75v-5a.75.75 0 0 1 1.5 0v5a.75.75 0 0 1-.75.75"/></svg>';
+// node_modules/@adobe/spectrum-wc/dist/components/progress-circle/progress-circle.js
+var t45 = i`@keyframes swc-fills-rotate{0%{transform:rotate(var(--swc-progress-circle-rotate-start, -90deg))}to{transform:rotate(var(--swc-progress-circle-rotate-end, 270deg))}}@keyframes swc-dashoffset-animation{0%,to{stroke-dashoffset:75px}30%{stroke-dashoffset:var(--swc-progress-circle-dashoffset-30, 20px)}}:host{display:inline-block;align-self:center;justify-self:center;place-self:center}*{box-sizing:border-box}.swc-ProgressCircle{--_swc-progress-circle-size: var(--swc-progress-circle-size, var(--swc-progress-circle-size-medium));--_swc-progress-circle-track-border-color: var(--swc-progress-circle-track-border-color, var(--swc-gray-300));--_swc-progress-circle-fill-border-color: var(--swc-progress-circle-fill-border-color, var(--swc-accent-color-900));--_swc-progress-circle-thickness: var(--swc-progress-circle-thickness, var(--swc-progress-circle-thickness-medium));display:inline-block;position:relative;inline-size:var(--_swc-progress-circle-size);block-size:var(--_swc-progress-circle-size);direction:ltr;transform:translateZ(0)}.swc-ProgressCircle-fill,.swc-ProgressCircle-track{inline-size:var(--_swc-progress-circle-size);block-size:var(--_swc-progress-circle-size)}.swc-ProgressCircle-track{stroke:var(--_swc-progress-circle-track-border-color);stroke-width:var(--_swc-progress-circle-thickness)}.swc-ProgressCircle-fill{stroke:var(--_swc-progress-circle-fill-border-color);stroke-width:var(--_swc-progress-circle-thickness);transform:rotate(-90deg);transform-origin:center}.swc-ProgressCircle--indeterminate .swc-ProgressCircle-fill{transform-origin:center;animation:swc-fills-rotate 1s cubic-bezier(.6,.1,.3,.9) infinite,swc-dashoffset-animation 1s cubic-bezier(.25,.1,.25,1.3) infinite;will-change:transform}:host([size=\"s\"]){--swc-progress-circle-size: var(--swc-progress-circle-size-small);--swc-progress-circle-thickness: var(--swc-progress-circle-thickness-small)}:host([size=\"l\"]){--swc-progress-circle-size: var(--swc-progress-circle-size-large);--swc-progress-circle-thickness: var(--swc-progress-circle-thickness-large)}.swc-ProgressCircle:where(.swc-ProgressCircle--staticWhite){--swc-progress-circle-track-border-color: var(--swc-transparent-white-300);--swc-progress-circle-fill-border-color: var(--swc-transparent-white-900)}.swc-ProgressCircle:where(.swc-ProgressCircle--staticBlack){--swc-progress-circle-track-border-color: var(--swc-transparent-black-300);--swc-progress-circle-fill-border-color: var(--swc-transparent-black-900)}@media(prefers-reduced-motion:reduce){.swc-ProgressCircle--indeterminate .swc-ProgressCircle-fill{--swc-progress-circle-dashoffset-30: 0;--swc-progress-circle-rotate-start: 0deg;--swc-progress-circle-rotate-end: 360deg;animation-duration:15s;animation-timing-function:linear,linear}}@media(forced-colors:active){.swc-ProgressCircle{--swc-progress-circle-fill-border-color: Highlight;@media(prefers-color-scheme:dark){--swc-progress-circle-track-border-color: var(--swc-transparent-white-300)}@media(prefers-color-scheme:light){--swc-progress-circle-track-border-color: var(--swc-transparent-black-300)}}}`;
+
+// node_modules/@adobe/spectrum-wc-core/dist/components/progress-circle/ProgressCircle.types.js
+var e74 = [
+  "s",
+  "m",
+  "l"
+];
+var t46 = ["white", "black"];
+
+// node_modules/@adobe/spectrum-wc-core/dist/components/progress-circle/ProgressCircle.base.js
+var u16;
+var d13 = class e75 extends i12(i9, { validSizes: e74 }) {
+  constructor(...e119) {
+    super(...e119), this.label = "", this.progress = null, this.languageResolver = new i10(this);
+  }
+  static hasMeaningfulLightDomChildren(e119) {
+    for (let n36 of e119.childNodes) {
+      var t88;
+      if (n36.nodeType === Node.ELEMENT_NODE || n36.nodeType === Node.TEXT_NODE && (t88 = n36.textContent) != null && t88.trim()) return true;
+    }
+    return false;
+  }
+  hasAccessibleName() {
+    return !!(this.label || this.getAttribute("aria-label") || this.getAttribute("aria-labelledby"));
+  }
+  static clampProgress(e119) {
+    return Number.isFinite(e119) ? Math.min(100, Math.max(0, e119)) : 0;
+  }
+  formatProgress() {
+    var e119;
+    return new Intl.NumberFormat(this.languageResolver.language, {
+      style: "percent",
+      unitDisplay: "narrow"
+    }).format(((e119 = this.progress) == null ? 0 : e119) / 100);
+  }
+  warnDeprecatedLightDomChildren() {
+    r9(this, e75.hasMeaningfulLightDomChildren(this), `<${this.localName}> no longer has a default slot. Light DOM children are not rendered and are not used for an accessible name. Use the "label" attribute or property, or "aria-label" / "aria-labelledby" on the host instead.`, "https://spectrum-web-components.adobe.com/?path=/docs/components-progress-circle--docs", { level: "deprecation" });
+  }
+  willUpdate(t88) {
+    if (t88.has("progress") && this.progress !== null) {
+      let t89 = e75.clampProgress(this.progress);
+      t89 !== this.progress && (this.progress = t89);
+    }
+    super.willUpdate(t88);
+  }
+  firstUpdated(e119) {
+    super.firstUpdated(e119), this.setAttribute("role", "progressbar");
+  }
+  updated(t88) {
+    if (super.updated(t88), t88.has("progress") && (this.progress !== null && this.progress >= 0 ? (this.setAttribute("aria-valuemin", "0"), this.setAttribute("aria-valuemax", "100"), this.setAttribute("aria-valuenow", String(this.progress)), this.setAttribute("aria-valuetext", this.formatProgress())) : (this.removeAttribute("aria-valuemin"), this.removeAttribute("aria-valuemax"), this.removeAttribute("aria-valuenow"), this.removeAttribute("aria-valuetext"))), this.progress !== null && t88.has(e27) && this.setAttribute("aria-valuetext", this.formatProgress()), t88.has("label") && (this.label.length ? this.setAttribute("aria-label", this.label) : t88.get("label") === this.getAttribute("aria-label") && this.removeAttribute("aria-label")), t88.has("label") && !this.hasAccessibleName() && (this.setAttribute("aria-label", e75.DEFAULT_LABEL), r9(this, true, `<${this.localName}> requires an accessible name. A default label of "${e75.DEFAULT_LABEL}" has been applied, but a more specific label should be provided via:`, "https://spectrum-web-components.adobe.com/?path=/docs/components-progress-circle--docs", {
+      type: "accessibility",
+      issues: [
+        'value supplied to the "label" attribute, which will be displayed visually as part of the element, or',
+        'value supplied to the "aria-label" attribute, which will only be provided to screen readers, or',
+        'an element ID reference supplied to the "aria-labelledby" attribute, which will be provided by screen readers and will need to be managed manually by the parent application.'
+      ]
+    })), t88.has("staticColor") && this.staticColor !== void 0) {
+      let e119 = this.constructor;
+      n10(this, {
+        prop: "static-color",
+        value: this.staticColor,
+        valid: e119.STATIC_COLORS,
+        url: "https://spectrum-web-components.adobe.com/?path=/docs/components-progress-circle--docs"
+      });
+    }
+    t14() && this.warnDeprecatedLightDomChildren();
+  }
+};
+u16 = d13, u16.DEFAULT_LABEL = "Loading", e24([n({
+  type: String,
+  reflect: true,
+  attribute: "static-color"
+})], d13.prototype, "staticColor", void 0), e24([n({ type: String })], d13.prototype, "label", void 0), e24([n({
+  type: Number,
+  reflect: true
+})], d13.prototype, "progress", void 0);
+
+// node_modules/@adobe/spectrum-wc/dist/components/progress-circle/ProgressCircle.js
+var l14;
+var u17 = class extends d13 {
+  static get styles() {
+    return [t45];
+  }
+  computeDashOffset() {
+    if (this.progress !== null) return this.progress === 0 ? 98 : 100 - this.progress;
+  }
+  render() {
+    let e119 = this.size === "s" ? 2 : this.size === "l" ? 6 : 4, t88 = `calc(50% - ${e119 / 2}px)`;
+    return b`
+      <div
+        class=${e3({
+      "swc-ProgressCircle": true,
+      "swc-ProgressCircle--indeterminate": this.progress === null,
+      [`swc-ProgressCircle--static${e14(this.staticColor)}`]: this.staticColor !== void 0
+    })}
+      >
+        <svg aria-hidden="true" fill="none" width="100%" height="100%">
+          <circle
+            cx="50%"
+            cy="50%"
+            r=${`calc(50% - ${e119}px)`}
+            stroke-width=${e119}
+          />
+          <circle
+            cx="50%"
+            cy="50%"
+            class="swc-ProgressCircle-track"
+            r=${t88}
+          />
+          <circle
+            cx="50%"
+            cy="50%"
+            r=${t88}
+            class="swc-ProgressCircle-fill"
+            pathLength="100"
+            stroke-dasharray="100 200"
+            stroke-dashoffset=${o2(this.computeDashOffset())}
+            stroke-linecap="round"
+          />
+        </svg>
+      </div>
+    `;
+  }
+};
+l14 = u17, l14.STATIC_COLORS = t46, e12([n({
+  reflect: true,
+  attribute: "static-color"
+})], u17.prototype, "staticColor", void 0);
+
+// node_modules/@adobe/spectrum-wc/dist/components/progress-circle/swc-progress-circle.js
+e25("swc-progress-circle", u17);
+
+// node_modules/@adobe/spectrum-wc-icons/dist/AlertTriangle.js
+function e76() {
+  return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M10 15.123a.9.9 0 0 1-.627-.228.956.956 0 0 1 0-1.285.87.87 0 0 1 .626-.234c.237-.01.466.08.633.247a.86.86 0 0 1 .242.627.88.88 0 0 1-.228.639.86.86 0 0 1-.647.234M10 11.75a.75.75 0 0 1-.75-.75V7a.75.75 0 0 1 1.5 0v4a.75.75 0 0 1-.75.75"/><path fill="var(--swc-icon-color, currentColor)" d="M16.733 18H3.267c-.8 0-1.523-.41-1.933-1.098s-.427-1.518-.046-2.222L8.02 2.232a2.248 2.248 0 0 1 3.958 0l6.733 12.448c.381.704.364 1.535-.046 2.222S17.534 18 16.733 18M10 2.553a.73.73 0 0 0-.66.392L2.607 15.393a.74.74 0 0 0 .016.74.74.74 0 0 0 .644.367h13.466a.74.74 0 0 0 .644-.366.74.74 0 0 0 .016-.741L10.66 2.945a.73.73 0 0 0-.66-.392"/></svg>';
 }
 
-// node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-alert-diamond.js
+// node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-alert-triangle.js
 var o47 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e74())}</span>
+      <span class="swc-Icon">${o16(e76())}</span>
     `;
   }
 };
-e25("swc-icon-alert-diamond", o47);
+e25("swc-icon-alert-triangle", o47);
 
-// node_modules/@adobe/spectrum-wc-icons/dist/FolderAdd.js
-function e75() {
-  return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M8.373 15.498H3.25a.75.75 0 0 1-.75-.75v-8.25h14.25a.75.75 0 0 1 .75.75V9.07a.75.75 0 0 0 1.5 0V7.248c0-1.24-1.01-2.25-2.25-2.25h-5.964a.75.75 0 0 1-.566-.258L8.515 2.773a2.25 2.25 0 0 0-1.7-.775H3.25C2.01 1.998 1 3.008 1 4.248v10.5c0 1.24 1.01 2.25 2.25 2.25h5.123a.75.75 0 0 0 0-1.5m-5.123-12h3.565a.75.75 0 0 1 .567.258l1.076 1.242H2.5v-.75a.75.75 0 0 1 .75-.75"/><path fill="var(--swc-icon-color, currentColor)" d="M15 10.498a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9m2.5 5.125h-1.875v1.875a.625.625 0 1 1-1.25 0v-1.875H12.5a.625.625 0 1 1 0-1.25h1.875v-1.875a.625.625 0 1 1 1.25 0v1.875H17.5a.625.625 0 1 1 0 1.25"/></svg>';
+// node_modules/@adobe/spectrum-wc-icons/dist/UserFollowing.js
+function e77() {
+  return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M15 10.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9m2.4 3.35L15.09 17a.623.623 0 0 1-.968.048l-1.439-1.599a.625.625 0 0 1 .93-.836l.924 1.028 1.855-2.53a.625.625 0 1 1 1.007.74M2.274 18.752a.75.75 0 0 1-.733-.91c.596-2.73 3.313-5.025 6.608-5.58a.75.75 0 0 1 .249 1.48c-2.706.455-4.923 2.273-5.391 4.42a.75.75 0 0 1-.733.59m7.726-7.9c-2.485 0-4.507-2.153-4.507-4.8s2.022-4.8 4.507-4.8 4.507 2.153 4.507 4.8-2.022 4.8-4.507 4.8m0-8.1c-1.658 0-3.007 1.48-3.007 3.3s1.349 3.3 3.007 3.3 3.007-1.48 3.007-3.3-1.349-3.3-3.007-3.3"/></svg>';
 }
 
-// node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-folder-add.js
+// node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-user-following.js
 var o48 = class extends a10 {
   static get styles() {
     return [t40];
   }
   render() {
     return b`
-      <span class="swc-Icon">${o16(e75())}</span>
+      <span class="swc-Icon">${o16(e77())}</span>
     `;
   }
 };
-e25("swc-icon-folder-add", o48);
+e25("swc-icon-user-following", o48);
 
-// src/app/files.ts
-function relative(path) {
-  return path.replace(/^\//, "");
-}
-function basename(path) {
-  return path.slice(path.lastIndexOf("/") + 1);
+// src/app/follow.ts
+var lights = {
+  connecting: ["info", (owner) => `Connecting to ${owner}`],
+  connected: ["positive", (owner) => `Following ${owner}`],
+  reconnecting: ["notice", (owner) => `Reconnecting to ${owner}`],
+  unlinked: ["negative", (owner) => `Unlinked from ${owner}`],
+  failed: ["negative", (owner) => `Can\u2019t reach ${owner}`]
+};
+function followLight(state3) {
+  const [variant, text2] = lights[state3.link];
+  return { variant, text: text2(state3.owner) };
 }
-function treePaths(entries) {
-  return entries.map((entry) => relative(entry.path) + (entry.kind === "directory" ? "/" : ""));
+function followPage(state3) {
+  if (!state3) return null;
+  const { owner } = state3;
+  if (state3.link === "connecting")
+    return {
+      kind: "connecting",
+      title: `Connecting to ${owner}\u2026`,
+      body: `This device follows ${owner}. Its agent shows here once it\u2019s connected.`
+    };
+  if (state3.link === "unlinked")
+    return {
+      kind: "unlinked",
+      title: `${owner} unlinked this device`,
+      body: `To follow it again, open a new link from ${owner}.`
+    };
+  if (state3.link === "failed")
+    return {
+      kind: "failed",
+      title: `Can\u2019t follow ${owner}`,
+      body: state3.error ?? `The link to ${owner} failed.`
+    };
+  if (state3.access.view) return null;
+  const where2 = state3.name ? `next to ${state3.name}` : "for this device";
+  return {
+    kind: "waiting",
+    title: `Waiting for ${owner} to allow this device`,
+    body: `On ${owner}, choose Allow ${where2} in Network \u203A Linked devices.`
+  };
 }
-function treeStatus(changes2) {
-  return changes2.map((change) => ({ path: relative(change.path), status: change.status }));
+function list(items, last) {
+  if (items.length < 2) return items.join("");
+  return `${items.slice(0, -1).join(", ")} ${last} ${items.at(-1)}`;
 }
-function ancestors(paths) {
-  const out = /* @__PURE__ */ new Set();
-  for (const path of paths) {
-    const parts2 = relative(path).split("/").slice(0, -1);
-    for (let i25 = 1; i25 <= parts2.length; i25++) out.add(parts2.slice(0, i25).join("/"));
-  }
-  return [...out];
+function followCan(state3) {
+  const allowed = ["watch the agent"];
+  const missing = [];
+  (state3.access.control ? allowed : missing).push("send prompts");
+  (state3.access.terminal ? allowed : missing).push("open terminals");
+  const can = `This device can ${list(allowed, "and")}.`;
+  return missing.length ? `${can} To ${list(missing, "or")}, allow it on ${state3.owner}.` : can;
 }
-function agentName(model, id) {
-  if (!id) return "you";
-  return model?.agent.list().find((agent) => agent.id === id)?.name ?? id;
+function following(model) {
+  const state3 = model?.follow?.state();
+  return state3 && !followPage(state3) ? state3 : null;
 }
-function author(model, change) {
-  return change.agentId === null && change.repo ? null : agentName(model, change.agentId);
+function watchOnly(model) {
+  const state3 = following(model);
+  if (!state3 || state3.access.control) return "";
+  return `Watch only. To send prompts from this device, allow Control for it on ${state3.owner}.`;
 }
-function request(target, type, path) {
-  target.dispatchEvent(new CustomEvent(type, { detail: { path }, bubbles: true, composed: true }));
+function terminalsAllowed(model) {
+  const state3 = model?.follow?.state();
+  return !state3 || !!state3.access.terminal;
 }
-var panelCss = i`
-  :host {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    min-height: 0;
-    background: var(--swc-background-layer-2-color);
-    color: var(--swc-neutral-content-color-default);
-    font-family: var(--swc-sans-font-family-stack);
-    font-size: var(--swc-font-size-75);
-  }
-  .bar {
-    display: flex;
-    align-items: center;
-    gap: var(--swc-spacing-100);
-    flex: none;
-    min-height: var(--swc-component-height-100);
-    padding: 0 var(--swc-spacing-100) 0 var(--swc-spacing-200);
-    border-bottom: var(--swc-border-width-100) solid var(--swc-gray-200);
-    background: var(--swc-background-layer-1-color);
-    color: var(--swc-neutral-subdued-content-color-default);
-    white-space: nowrap;
-    overflow: hidden;
+var SliccFollow = class extends ModelElement {
+  static properties = {
+    ...ModelElement.properties,
+    page: { type: Boolean, reflect: true },
+    compact: { type: Boolean, reflect: true },
+    busy: { state: true },
+    error: { state: true }
+  };
+  constructor() {
+    super();
+    this.page = false;
+    this.compact = false;
+    this.busy = "";
+    this.error = "";
   }
-  .bar .path {
-    font-family: var(--swc-code-font-family-stack);
-    color: var(--swc-neutral-content-color-default);
+  static styles = [
+    shared,
+    i`
+      :host {
+        display: inline-block;
+      }
+      :host([page]) {
+        display: block;
+        max-width: 480px;
+      }
+      .chip swc-status-light {
+        align-self: center;
+      }
+      :host([compact]) .chip .text {
+        display: none;
+      }
+      .panel {
+        display: grid;
+        gap: var(--swc-spacing-200);
+        width: calc(var(--swc-spacing-400) * 11);
+        max-width: 100%;
+        padding: var(--swc-spacing-300);
+        box-sizing: border-box;
+        font-size: var(--swc-font-size-100);
+        color: var(--swc-neutral-content-color-default);
+      }
+      h2 {
+        margin: 0;
+        font-size: var(--swc-font-size-300);
+        font-weight: var(--swc-bold-font-weight);
+        line-height: var(--swc-heading-line-height);
+        color: var(--swc-heading-color);
+      }
+      .page h2 {
+        font-size: var(--swc-font-size-500);
+      }
+      .page > p {
+        font-size: var(--swc-font-size-200);
+      }
+      .panel h2 {
+        font-size: var(--swc-font-size-100);
+      }
+      p {
+        margin: 0;
+      }
+      .muted {
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
+      .page {
+        display: grid;
+        gap: var(--swc-spacing-300);
+        justify-items: center;
+        text-align: center;
+      }
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: var(--swc-spacing-200);
+      }
+      .panel .actions {
+        justify-content: flex-start;
+      }
+      .error {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--swc-spacing-75);
+        color: var(--swc-negative-content-color-default);
+        --swc-icon-color: var(--swc-negative-content-color-default);
+      }
+    `
+  ];
+  subscribe(model) {
+    const port = model.follow;
+    return port ? [port.on("follow", () => this.requestUpdate())] : [];
+  }
+  async leave() {
+    const port = this.model?.follow;
+    if (!port || this.busy) return;
+    const state3 = port.state();
+    if (state3.link !== "unlinked") {
+      const ok2 = await confirm({
+        title: `Stop following ${state3.owner}?`,
+        body: `This device forgets the link. To follow ${state3.owner} again, open a new link from it.`,
+        action: "Leave",
+        variant: "confirmation"
+      });
+      if (!ok2) return;
+    }
+    await this.#run("leave", () => port.leave());
+  }
+  async retry() {
+    const port = this.model?.follow;
+    if (!port?.retry || this.busy) return;
+    await this.#run("retry", () => port.retry?.());
+  }
+  async #run(busy, task) {
+    this.busy = busy;
+    this.error = "";
+    try {
+      await task();
+    } catch (error) {
+      this.error = error instanceof Error ? error.message : String(error);
+    } finally {
+      this.busy = "";
+    }
+  }
+  #error() {
+    return this.error ? b`<p class="error" role="alert" data-error><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${this.error}</span></p>` : A;
+  }
+  #leaveButton() {
+    return b`<swc-button size="m" variant="secondary" fill-style="outline" data-action="leave" ?pending=${this.busy === "leave"} ?disabled=${!!this.busy && this.busy !== "leave"} @click=${() => this.leave()}>Leave</swc-button>`;
+  }
+  #page(page) {
+    return b`<div class="page" data-follow-page=${page.kind}>
+      ${page.kind === "connecting" || page.kind === "waiting" ? b`<swc-progress-circle size="m" indeterminate label=${page.kind === "waiting" ? "Waiting" : "Connecting"} aria-hidden="true"></swc-progress-circle>` : A}
+      <h2 aria-live="polite">${page.title}</h2>
+      <p class="muted">${page.body}</p>
+      ${this.#error()}
+      <div class="actions">
+        ${page.kind === "failed" && this.model?.follow?.retry ? b`<swc-button size="m" variant="accent" data-action="retry" ?pending=${this.busy === "retry"} ?disabled=${!!this.busy && this.busy !== "retry"} @click=${() => this.retry()}>Try again</swc-button>` : A}
+        ${this.#leaveButton()}
+      </div>
+    </div>`;
+  }
+  render() {
+    const state3 = this.model?.follow?.state();
+    if (!state3) return A;
+    const page = followPage(state3);
+    if (this.page) return page ? this.#page(page) : A;
+    const light = followLight(state3);
+    return b`<swc-action-button id="chip" class="chip" size="s" quiet data-follow=${state3.link} accessible-label=${light.text}>
+        ${this.compact ? b`<swc-icon-user-following slot="icon" size="s" aria-hidden="true"></swc-icon-user-following>` : A}
+        <swc-status-light size="s" variant=${light.variant}><span class="text">${light.text}</span></swc-status-light>
+      </swc-action-button>
+      <swc-tooltip for="chip" placement="bottom">${light.text}</swc-tooltip>
+      <swc-popover for="chip" placement="bottom-end" accessible-label=${light.text}>
+        <div class="panel">
+          <h2>${light.text}</h2>
+          ${state3.link === "reconnecting" ? b`<p class="muted" data-reconnecting>The link to ${state3.owner} dropped. The conversation may be out of date until it’s back${state3.access.control ? ", and sending waits until then" : ""}.</p>` : A}
+          <p data-can>${followCan(state3)}</p>
+          ${this.#error()}
+          <div class="actions">${this.#leaveButton()}</div>
+        </div>
+      </swc-popover>`;
+  }
+};
+
+// node_modules/@adobe/spectrum-wc-icons/dist/AlertDiamond.js
+function e78() {
+  return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M10 18.795a2.24 2.24 0 0 1-1.591-.66l-6.545-6.544a2.254 2.254 0 0 1 0-3.182l6.545-6.545c.849-.85 2.333-.85 3.182 0l6.545 6.545a2.254 2.254 0 0 1 0 3.182l-6.545 6.545c-.425.425-.99.659-1.591.659m0-16.09c-.2 0-.389.078-.53.22L2.925 9.47a.75.75 0 0 0 0 1.06l6.545 6.545a.77.77 0 0 0 1.06 0l6.545-6.545a.75.75 0 0 0 0-1.06L10.53 2.925a.75.75 0 0 0-.53-.22"/><path fill="var(--swc-icon-color, currentColor)" d="M10 14.998a.9.9 0 0 1-.627-.228.956.956 0 0 1 0-1.285.87.87 0 0 1 .626-.234c.237-.01.466.08.633.247a.86.86 0 0 1 .242.627.88.88 0 0 1-.228.639.86.86 0 0 1-.647.234M10 11.625a.75.75 0 0 1-.75-.75v-5a.75.75 0 0 1 1.5 0v5a.75.75 0 0 1-.75.75"/></svg>';
+}
+
+// node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-alert-diamond.js
+var o49 = class extends a10 {
+  static get styles() {
+    return [t40];
+  }
+  render() {
+    return b`
+      <span class="swc-Icon">${o16(e78())}</span>
+    `;
+  }
+};
+e25("swc-icon-alert-diamond", o49);
+
+// node_modules/@adobe/spectrum-wc-icons/dist/FolderAdd.js
+function e79() {
+  return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M8.373 15.498H3.25a.75.75 0 0 1-.75-.75v-8.25h14.25a.75.75 0 0 1 .75.75V9.07a.75.75 0 0 0 1.5 0V7.248c0-1.24-1.01-2.25-2.25-2.25h-5.964a.75.75 0 0 1-.566-.258L8.515 2.773a2.25 2.25 0 0 0-1.7-.775H3.25C2.01 1.998 1 3.008 1 4.248v10.5c0 1.24 1.01 2.25 2.25 2.25h5.123a.75.75 0 0 0 0-1.5m-5.123-12h3.565a.75.75 0 0 1 .567.258l1.076 1.242H2.5v-.75a.75.75 0 0 1 .75-.75"/><path fill="var(--swc-icon-color, currentColor)" d="M15 10.498a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9m2.5 5.125h-1.875v1.875a.625.625 0 1 1-1.25 0v-1.875H12.5a.625.625 0 1 1 0-1.25h1.875v-1.875a.625.625 0 1 1 1.25 0v1.875H17.5a.625.625 0 1 1 0 1.25"/></svg>';
+}
+
+// node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-folder-add.js
+var o50 = class extends a10 {
+  static get styles() {
+    return [t40];
+  }
+  render() {
+    return b`
+      <span class="swc-Icon">${o16(e79())}</span>
+    `;
+  }
+};
+e25("swc-icon-folder-add", o50);
+
+// src/app/files.ts
+function relative(path) {
+  return path.replace(/^\//, "");
+}
+function basename(path) {
+  return path.slice(path.lastIndexOf("/") + 1);
+}
+function treePaths(entries) {
+  return entries.map((entry) => relative(entry.path) + (entry.kind === "directory" ? "/" : ""));
+}
+function treeStatus(changes2) {
+  return changes2.map((change) => ({ path: relative(change.path), status: change.status }));
+}
+function ancestors(paths) {
+  const out = /* @__PURE__ */ new Set();
+  for (const path of paths) {
+    const parts2 = relative(path).split("/").slice(0, -1);
+    for (let i25 = 1; i25 <= parts2.length; i25++) out.add(parts2.slice(0, i25).join("/"));
+  }
+  return [...out];
+}
+function agentName(model, id) {
+  if (!id) return "you";
+  return model?.agent.list().find((agent) => agent.id === id)?.name ?? id;
+}
+function author(model, change) {
+  return change.agentId === null && change.repo ? null : agentName(model, change.agentId);
+}
+function request(target, type, path) {
+  target.dispatchEvent(new CustomEvent(type, { detail: { path }, bubbles: true, composed: true }));
+}
+var panelCss = i`
+  :host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    background: var(--swc-background-layer-2-color);
+    color: var(--swc-neutral-content-color-default);
+    font-family: var(--swc-sans-font-family-stack);
+    font-size: var(--swc-font-size-75);
+  }
+  .bar {
+    display: flex;
+    align-items: center;
+    gap: var(--swc-spacing-100);
+    flex: none;
+    min-height: var(--swc-component-height-100);
+    padding: 0 var(--swc-spacing-100) 0 var(--swc-spacing-200);
+    border-bottom: var(--swc-border-width-100) solid var(--swc-gray-200);
+    background: var(--swc-background-layer-1-color);
+    color: var(--swc-neutral-subdued-content-color-default);
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .bar .path {
+    font-family: var(--swc-code-font-family-stack);
+    color: var(--swc-neutral-content-color-default);
     overflow: hidden;
     text-overflow: ellipsis;
   }
@@ -10209,8 +10608,9 @@ async function deleteCone(model, agent, trigger2) {
     variant: "confirmation",
     trigger: trigger2
   });
-  if (ok2) model.agent.freeze?.(agent.id);
-  return ok2;
+  const allowed = ok2 && !watchOnly(model);
+  if (allowed) model.agent.freeze?.(agent.id);
+  return allowed;
 }
 var frozenKinds = {
   cone: ["indigo", "Cone"],
@@ -10275,7 +10675,8 @@ var SliccFreezer = class extends ModelElement {
     return [
       model.agent.on("frozen", update),
       model.agent.on("active", update),
-      model.agent.on("agents", update)
+      model.agent.on("agents", update),
+      ...model.follow ? [model.follow.on("follow", update)] : []
     ];
   }
   focus() {
@@ -10289,7 +10690,7 @@ var SliccFreezer = class extends ModelElement {
       variant: "destructive",
       trigger: trigger2
     });
-    if (ok2) this.model?.agent.discard(cone.id);
+    if (ok2 && !watchOnly(this.model)) this.model?.agent.discard(cone.id);
   }
   #named(cone) {
     const rows = this.model?.agent.frozen() ?? [];
@@ -10304,6 +10705,7 @@ var SliccFreezer = class extends ModelElement {
     if (cone.live) {
       return b`<swc-action-button size="s" quiet data-action="open" accessible-label=${`Open ${this.#named(cone)}`} @click=${() => model.agent.select(cone.id)}>Open</swc-action-button>`;
     }
+    if (watchOnly(model)) return b``;
     return b`<swc-action-button size="s" quiet data-action="thaw" accessible-label=${`Thaw ${this.#named(cone)}`} @click=${() => model.agent.thaw(cone.id)}>Thaw</swc-action-button>
       <swc-action-button size="s" quiet data-action="remove" accessible-label=${`Remove ${this.#named(cone)}`} @click=${(event2) => this.#remove(cone, event2.currentTarget)}>Remove</swc-action-button>`;
   }
@@ -10455,7 +10857,8 @@ var SliccAgents = class extends ModelElement {
     return [
       model.agent.on("agents", () => this.requestUpdate()),
       model.agent.on("active", () => this.requestUpdate()),
-      watchTitles(model, () => this.requestUpdate())
+      watchTitles(model, () => this.requestUpdate()),
+      ...model.follow ? [model.follow.on("follow", () => this.requestUpdate())] : []
     ];
   }
   #select(id) {
@@ -10479,610 +10882,211 @@ 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 === " ") {
-      event2.preventDefault();
-      const id = items[index]?.dataset.id;
-      if (id) this.#select(id);
-    } else if (event2.key === "Delete") {
-      const agent = this.model?.agent.list().find((item2) => item2.id === items[index]?.dataset.id);
-      if (agent && this.#droppable(agent)) {
-        event2.preventDefault();
-        void this.#drop(agent, items[index]);
-      } else if (agent && this.#deletable(agent)) {
-        event2.preventDefault();
-        void this.#deleteCone(agent, items[index]);
-      }
-    }
-  }
-  #droppable(agent) {
-    return agent.kind === "scoop" && Boolean(this.model?.agent.drop);
-  }
-  #deletable(agent) {
-    return agent.kind === "cone" && !agent.frozen && Boolean(this.model?.agent.freeze);
-  }
-  async #deleteCone(agent, trigger2) {
-    if (!await deleteCone(this.model, agent, trigger2)) return;
-    await this.updateComplete;
-    this.focus();
-  }
-  async #drop(agent, trigger2) {
-    const port = this.model?.agent;
-    if (!port?.drop) return;
-    const ok2 = await confirm({
-      title: `Drop scoop ${agent.name}?`,
-      body: "It stops, and its working folder is deleted. Its conversation and reports are kept. You can\u2019t undo this.",
-      action: "Drop",
-      variant: "destructive",
-      trigger: trigger2
-    });
-    if (!ok2) return;
-    const { [agent.id]: _9, ...rest } = this.errors;
-    this.errors = rest;
-    try {
-      await port.drop(agent.id);
-    } catch (error) {
-      const message = error instanceof Error ? error.message : String(error);
-      this.errors = { ...this.errors, [agent.id]: `Couldn\u2019t drop ${agent.name}: ${message}` };
-      return;
-    }
-    const current = port.active();
-    const stale = current === agent.id || !port.list().some((candidate) => candidate.id === current);
-    if (stale && agent.parentId) port.select(agent.parentId);
-    await this.updateComplete;
-    this.focus();
-  }
-  #dropButton(agent) {
-    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) => {
-      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>`;
-  }
-  #deleteButton(agent) {
-    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) => {
-      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>`;
-  }
-  #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 label = `${coneLabel(model, agent)}: ${statusLabel[agent.status]}, ${percent(agent.contextFill)} context${agent.unread ? `, ${agent.unread} unread` : ""}${error ? `. ${error}` : ""}`;
-    return b`<li
-      role="option"
-      class=${agent.kind}
-      data-id=${agent.id}
-      aria-selected=${selected ? "true" : "false"}
-      aria-label=${label}
-      tabindex=${selected ? "0" : "-1"}
-      aria-keyshortcuts=${this.#droppable(agent) || this.#deletable(agent) ? "Delete" : A}
-      title=${label}
-      @click=${() => this.#select(agent.id)}
-    >
-      <span class="name">${agent.name}</span>
-      ${title === null ? A : b`<span class="title">${title || untitled}</span>`}
-      ${agent.unread ? b`<swc-badge class="unread" size="s" variant="accent">${agent.unread}</swc-badge>` : A}
-      <span class="fill">${percent(agent.contextFill)}</span>
-      ${statusLight(agent.status)}
-      ${this.#dropButton(agent)}
-      ${this.#deleteButton(agent)}
-      ${error ? b`<span class="error">${error}</span>` : A}
-    </li>`;
-  }
-  render() {
-    const agents = ordered(this.model?.agent.list() ?? []);
-    const active = this.model?.agent.active() ?? "";
-    const errors = Object.values(this.errors);
-    return b`<ul role="listbox" aria-label="Cones and scoops" @keydown=${this.#keydown}>
-        ${agents.map((agent) => this.#row(agent, active))}
-      </ul>
-      <div class="sr" role="status">${errors.at(-1) ?? ""}</div>`;
-  }
-};
-
-// node_modules/lit-html/directives/keyed.js
-var i17 = e2(class extends i3 {
-  constructor() {
-    super(...arguments), this.key = A;
-  }
-  render(r39, t88) {
-    return this.key = r39, t88;
-  }
-  update(r39, [t88, e119]) {
-    return t88 !== this.key && (p(r39), this.key = t88), e119;
-  }
-});
-
-// node_modules/lit-html/static.js
-var a12 = /* @__PURE__ */ Symbol.for("");
-var o49 = (t88) => {
-  if (t88?.r === a12) return t88?._$litStatic$;
-};
-var s9 = (t88) => ({ _$litStatic$: t88, r: a12 });
-var l14 = /* @__PURE__ */ new Map();
-var n28 = (t88) => (r39, ...e119) => {
-  const a22 = e119.length;
-  let s19, i25;
-  const n36 = [], u27 = [];
-  let c27, $6 = 0, f11 = false;
-  for (; $6 < a22; ) {
-    for (c27 = r39[$6]; $6 < a22 && void 0 !== (i25 = e119[$6], s19 = o49(i25)); ) c27 += s19 + r39[++$6], f11 = true;
-    $6 !== a22 && u27.push(i25), n36.push(c27), $6++;
-  }
-  if ($6 === a22 && n36.push(r39[a22]), f11) {
-    const t89 = n36.join("$$lit$$");
-    void 0 === (r39 = l14.get(t89)) && (n36.raw = n36, l14.set(t89, r39 = n36)), e119 = u27;
-  }
-  return t88(r39, ...e119);
-};
-var u16 = n28(b);
-var c17 = n28(w);
-var $2 = n28(T);
-
-// src/app/dips.ts
-var dipType = "application/x-slicc-sprinkle";
-var Dips = class extends Emitter {
-  key = "slicc-ui.dips";
-  #out = /* @__PURE__ */ new Set();
-  #storage = null;
-  load(storage) {
-    this.#storage = storage;
-    try {
-      const saved = JSON.parse(storage?.getItem(this.key) ?? "[]");
-      this.#out = new Set(Array.isArray(saved) ? saved.filter((id) => typeof id === "string") : []);
-    } catch {
-      this.#out = /* @__PURE__ */ new Set();
-    }
-    this.emit("change", this.list());
-  }
-  list() {
-    return [...this.#out];
-  }
-  has(id) {
-    return this.#out.has(id);
-  }
-  detach(id) {
-    if (this.#out.has(id)) return;
-    this.#out.add(id);
-    this.#storage?.setItem(this.key, JSON.stringify(this.list()));
-    this.emit("change", this.list());
-  }
-};
-function dipsOf(node) {
-  let current = node;
-  while (current) {
-    const found = current.dips;
-    if (found instanceof Dips) return found;
-    current = current.parentNode ?? current.host ?? null;
-  }
-  return null;
-}
-
-// node_modules/@adobe/spectrum-wc/dist/components/progress-circle/progress-circle.js
-var t45 = i`@keyframes swc-fills-rotate{0%{transform:rotate(var(--swc-progress-circle-rotate-start, -90deg))}to{transform:rotate(var(--swc-progress-circle-rotate-end, 270deg))}}@keyframes swc-dashoffset-animation{0%,to{stroke-dashoffset:75px}30%{stroke-dashoffset:var(--swc-progress-circle-dashoffset-30, 20px)}}:host{display:inline-block;align-self:center;justify-self:center;place-self:center}*{box-sizing:border-box}.swc-ProgressCircle{--_swc-progress-circle-size: var(--swc-progress-circle-size, var(--swc-progress-circle-size-medium));--_swc-progress-circle-track-border-color: var(--swc-progress-circle-track-border-color, var(--swc-gray-300));--_swc-progress-circle-fill-border-color: var(--swc-progress-circle-fill-border-color, var(--swc-accent-color-900));--_swc-progress-circle-thickness: var(--swc-progress-circle-thickness, var(--swc-progress-circle-thickness-medium));display:inline-block;position:relative;inline-size:var(--_swc-progress-circle-size);block-size:var(--_swc-progress-circle-size);direction:ltr;transform:translateZ(0)}.swc-ProgressCircle-fill,.swc-ProgressCircle-track{inline-size:var(--_swc-progress-circle-size);block-size:var(--_swc-progress-circle-size)}.swc-ProgressCircle-track{stroke:var(--_swc-progress-circle-track-border-color);stroke-width:var(--_swc-progress-circle-thickness)}.swc-ProgressCircle-fill{stroke:var(--_swc-progress-circle-fill-border-color);stroke-width:var(--_swc-progress-circle-thickness);transform:rotate(-90deg);transform-origin:center}.swc-ProgressCircle--indeterminate .swc-ProgressCircle-fill{transform-origin:center;animation:swc-fills-rotate 1s cubic-bezier(.6,.1,.3,.9) infinite,swc-dashoffset-animation 1s cubic-bezier(.25,.1,.25,1.3) infinite;will-change:transform}:host([size=\"s\"]){--swc-progress-circle-size: var(--swc-progress-circle-size-small);--swc-progress-circle-thickness: var(--swc-progress-circle-thickness-small)}:host([size=\"l\"]){--swc-progress-circle-size: var(--swc-progress-circle-size-large);--swc-progress-circle-thickness: var(--swc-progress-circle-thickness-large)}.swc-ProgressCircle:where(.swc-ProgressCircle--staticWhite){--swc-progress-circle-track-border-color: var(--swc-transparent-white-300);--swc-progress-circle-fill-border-color: var(--swc-transparent-white-900)}.swc-ProgressCircle:where(.swc-ProgressCircle--staticBlack){--swc-progress-circle-track-border-color: var(--swc-transparent-black-300);--swc-progress-circle-fill-border-color: var(--swc-transparent-black-900)}@media(prefers-reduced-motion:reduce){.swc-ProgressCircle--indeterminate .swc-ProgressCircle-fill{--swc-progress-circle-dashoffset-30: 0;--swc-progress-circle-rotate-start: 0deg;--swc-progress-circle-rotate-end: 360deg;animation-duration:15s;animation-timing-function:linear,linear}}@media(forced-colors:active){.swc-ProgressCircle{--swc-progress-circle-fill-border-color: Highlight;@media(prefers-color-scheme:dark){--swc-progress-circle-track-border-color: var(--swc-transparent-white-300)}@media(prefers-color-scheme:light){--swc-progress-circle-track-border-color: var(--swc-transparent-black-300)}}}`;
-
-// node_modules/@adobe/spectrum-wc-core/dist/components/progress-circle/ProgressCircle.types.js
-var e76 = [
-  "s",
-  "m",
-  "l"
-];
-var t46 = ["white", "black"];
-
-// node_modules/@adobe/spectrum-wc-core/dist/components/progress-circle/ProgressCircle.base.js
-var u17;
-var d13 = class e77 extends i12(i9, { validSizes: e76 }) {
-  constructor(...e119) {
-    super(...e119), this.label = "", this.progress = null, this.languageResolver = new i10(this);
-  }
-  static hasMeaningfulLightDomChildren(e119) {
-    for (let n36 of e119.childNodes) {
-      var t88;
-      if (n36.nodeType === Node.ELEMENT_NODE || n36.nodeType === Node.TEXT_NODE && (t88 = n36.textContent) != null && t88.trim()) return true;
-    }
-    return false;
-  }
-  hasAccessibleName() {
-    return !!(this.label || this.getAttribute("aria-label") || this.getAttribute("aria-labelledby"));
-  }
-  static clampProgress(e119) {
-    return Number.isFinite(e119) ? Math.min(100, Math.max(0, e119)) : 0;
-  }
-  formatProgress() {
-    var e119;
-    return new Intl.NumberFormat(this.languageResolver.language, {
-      style: "percent",
-      unitDisplay: "narrow"
-    }).format(((e119 = this.progress) == null ? 0 : e119) / 100);
-  }
-  warnDeprecatedLightDomChildren() {
-    r9(this, e77.hasMeaningfulLightDomChildren(this), `<${this.localName}> no longer has a default slot. Light DOM children are not rendered and are not used for an accessible name. Use the "label" attribute or property, or "aria-label" / "aria-labelledby" on the host instead.`, "https://spectrum-web-components.adobe.com/?path=/docs/components-progress-circle--docs", { level: "deprecation" });
-  }
-  willUpdate(t88) {
-    if (t88.has("progress") && this.progress !== null) {
-      let t89 = e77.clampProgress(this.progress);
-      t89 !== this.progress && (this.progress = t89);
-    }
-    super.willUpdate(t88);
-  }
-  firstUpdated(e119) {
-    super.firstUpdated(e119), this.setAttribute("role", "progressbar");
-  }
-  updated(t88) {
-    if (super.updated(t88), t88.has("progress") && (this.progress !== null && this.progress >= 0 ? (this.setAttribute("aria-valuemin", "0"), this.setAttribute("aria-valuemax", "100"), this.setAttribute("aria-valuenow", String(this.progress)), this.setAttribute("aria-valuetext", this.formatProgress())) : (this.removeAttribute("aria-valuemin"), this.removeAttribute("aria-valuemax"), this.removeAttribute("aria-valuenow"), this.removeAttribute("aria-valuetext"))), this.progress !== null && t88.has(e27) && this.setAttribute("aria-valuetext", this.formatProgress()), t88.has("label") && (this.label.length ? this.setAttribute("aria-label", this.label) : t88.get("label") === this.getAttribute("aria-label") && this.removeAttribute("aria-label")), t88.has("label") && !this.hasAccessibleName() && (this.setAttribute("aria-label", e77.DEFAULT_LABEL), r9(this, true, `<${this.localName}> requires an accessible name. A default label of "${e77.DEFAULT_LABEL}" has been applied, but a more specific label should be provided via:`, "https://spectrum-web-components.adobe.com/?path=/docs/components-progress-circle--docs", {
-      type: "accessibility",
-      issues: [
-        'value supplied to the "label" attribute, which will be displayed visually as part of the element, or',
-        'value supplied to the "aria-label" attribute, which will only be provided to screen readers, or',
-        'an element ID reference supplied to the "aria-labelledby" attribute, which will be provided by screen readers and will need to be managed manually by the parent application.'
-      ]
-    })), t88.has("staticColor") && this.staticColor !== void 0) {
-      let e119 = this.constructor;
-      n10(this, {
-        prop: "static-color",
-        value: this.staticColor,
-        valid: e119.STATIC_COLORS,
-        url: "https://spectrum-web-components.adobe.com/?path=/docs/components-progress-circle--docs"
-      });
-    }
-    t14() && this.warnDeprecatedLightDomChildren();
-  }
-};
-u17 = d13, u17.DEFAULT_LABEL = "Loading", e24([n({
-  type: String,
-  reflect: true,
-  attribute: "static-color"
-})], d13.prototype, "staticColor", void 0), e24([n({ type: String })], d13.prototype, "label", void 0), e24([n({
-  type: Number,
-  reflect: true
-})], d13.prototype, "progress", void 0);
-
-// node_modules/@adobe/spectrum-wc/dist/components/progress-circle/ProgressCircle.js
-var l15;
-var u18 = class extends d13 {
-  static get styles() {
-    return [t45];
-  }
-  computeDashOffset() {
-    if (this.progress !== null) return this.progress === 0 ? 98 : 100 - this.progress;
-  }
-  render() {
-    let e119 = this.size === "s" ? 2 : this.size === "l" ? 6 : 4, t88 = `calc(50% - ${e119 / 2}px)`;
-    return b`
-      <div
-        class=${e3({
-      "swc-ProgressCircle": true,
-      "swc-ProgressCircle--indeterminate": this.progress === null,
-      [`swc-ProgressCircle--static${e14(this.staticColor)}`]: this.staticColor !== void 0
-    })}
-      >
-        <svg aria-hidden="true" fill="none" width="100%" height="100%">
-          <circle
-            cx="50%"
-            cy="50%"
-            r=${`calc(50% - ${e119}px)`}
-            stroke-width=${e119}
-          />
-          <circle
-            cx="50%"
-            cy="50%"
-            class="swc-ProgressCircle-track"
-            r=${t88}
-          />
-          <circle
-            cx="50%"
-            cy="50%"
-            r=${t88}
-            class="swc-ProgressCircle-fill"
-            pathLength="100"
-            stroke-dasharray="100 200"
-            stroke-dashoffset=${o2(this.computeDashOffset())}
-            stroke-linecap="round"
-          />
-        </svg>
-      </div>
-    `;
-  }
-};
-l15 = u18, l15.STATIC_COLORS = t46, e12([n({
-  reflect: true,
-  attribute: "static-color"
-})], u18.prototype, "staticColor", void 0);
-
-// node_modules/@adobe/spectrum-wc/dist/components/progress-circle/swc-progress-circle.js
-e25("swc-progress-circle", u18);
-
-// node_modules/@adobe/spectrum-wc-icons/dist/AlertTriangle.js
-function e78() {
-  return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M10 15.123a.9.9 0 0 1-.627-.228.956.956 0 0 1 0-1.285.87.87 0 0 1 .626-.234c.237-.01.466.08.633.247a.86.86 0 0 1 .242.627.88.88 0 0 1-.228.639.86.86 0 0 1-.647.234M10 11.75a.75.75 0 0 1-.75-.75V7a.75.75 0 0 1 1.5 0v4a.75.75 0 0 1-.75.75"/><path fill="var(--swc-icon-color, currentColor)" d="M16.733 18H3.267c-.8 0-1.523-.41-1.933-1.098s-.427-1.518-.046-2.222L8.02 2.232a2.248 2.248 0 0 1 3.958 0l6.733 12.448c.381.704.364 1.535-.046 2.222S17.534 18 16.733 18M10 2.553a.73.73 0 0 0-.66.392L2.607 15.393a.74.74 0 0 0 .016.74.74.74 0 0 0 .644.367h13.466a.74.74 0 0 0 .644-.366.74.74 0 0 0 .016-.741L10.66 2.945a.73.73 0 0 0-.66-.392"/></svg>';
-}
-
-// node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-alert-triangle.js
-var o50 = class extends a10 {
-  static get styles() {
-    return [t40];
-  }
-  render() {
-    return b`
-      <span class="swc-Icon">${o16(e78())}</span>
-    `;
-  }
-};
-e25("swc-icon-alert-triangle", o50);
-
-// node_modules/@adobe/spectrum-wc-icons/dist/UserFollowing.js
-function e79() {
-  return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="var(--swc-icon-color, currentColor)" d="M15 10.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9m2.4 3.35L15.09 17a.623.623 0 0 1-.968.048l-1.439-1.599a.625.625 0 0 1 .93-.836l.924 1.028 1.855-2.53a.625.625 0 1 1 1.007.74M2.274 18.752a.75.75 0 0 1-.733-.91c.596-2.73 3.313-5.025 6.608-5.58a.75.75 0 0 1 .249 1.48c-2.706.455-4.923 2.273-5.391 4.42a.75.75 0 0 1-.733.59m7.726-7.9c-2.485 0-4.507-2.153-4.507-4.8s2.022-4.8 4.507-4.8 4.507 2.153 4.507 4.8-2.022 4.8-4.507 4.8m0-8.1c-1.658 0-3.007 1.48-3.007 3.3s1.349 3.3 3.007 3.3 3.007-1.48 3.007-3.3-1.349-3.3-3.007-3.3"/></svg>';
-}
-
-// node_modules/@adobe/spectrum-wc-icons/dist/swc-icon-user-following.js
-var o51 = class extends a10 {
-  static get styles() {
-    return [t40];
-  }
-  render() {
-    return b`
-      <span class="swc-Icon">${o16(e79())}</span>
-    `;
-  }
-};
-e25("swc-icon-user-following", o51);
-
-// src/app/follow.ts
-var lights = {
-  connecting: ["info", (owner) => `Connecting to ${owner}`],
-  connected: ["positive", (owner) => `Following ${owner}`],
-  reconnecting: ["notice", (owner) => `Reconnecting to ${owner}`],
-  unlinked: ["negative", (owner) => `Unlinked from ${owner}`],
-  failed: ["negative", (owner) => `Can\u2019t reach ${owner}`]
-};
-function followLight(state3) {
-  const [variant, text2] = lights[state3.link];
-  return { variant, text: text2(state3.owner) };
-}
-function followPage(state3) {
-  if (!state3) return null;
-  const { owner } = state3;
-  if (state3.link === "connecting")
-    return {
-      kind: "connecting",
-      title: `Connecting to ${owner}\u2026`,
-      body: `This device follows ${owner}. Its agent shows here once it\u2019s connected.`
-    };
-  if (state3.link === "unlinked")
-    return {
-      kind: "unlinked",
-      title: `${owner} unlinked this device`,
-      body: `To follow it again, open a new link from ${owner}.`
-    };
-  if (state3.link === "failed")
-    return {
-      kind: "failed",
-      title: `Can\u2019t follow ${owner}`,
-      body: state3.error ?? `The link to ${owner} failed.`
-    };
-  if (state3.access.view) return null;
-  const where2 = state3.name ? `next to ${state3.name}` : "for this device";
-  return {
-    kind: "waiting",
-    title: `Waiting for ${owner} to allow this device`,
-    body: `On ${owner}, choose Allow ${where2} in Network \u203A Linked devices.`
-  };
-}
-function list(items, last) {
-  if (items.length < 2) return items.join("");
-  return `${items.slice(0, -1).join(", ")} ${last} ${items.at(-1)}`;
-}
-function followCan(state3) {
-  const allowed = ["watch the agent"];
-  const missing = [];
-  (state3.access.control ? allowed : missing).push("send prompts");
-  (state3.access.terminal ? allowed : missing).push("open terminals");
-  const can = `This device can ${list(allowed, "and")}.`;
-  return missing.length ? `${can} To ${list(missing, "or")}, allow it on ${state3.owner}.` : can;
-}
-function following(model) {
-  const state3 = model?.follow?.state();
-  return state3 && !followPage(state3) ? state3 : null;
-}
-function watchOnly(model) {
-  const state3 = following(model);
-  if (!state3 || state3.access.control) return "";
-  return `${state3.owner} lets this device watch only. To send prompts, allow Control for it on ${state3.owner}.`;
-}
-function terminalsAllowed(model) {
-  const state3 = model?.follow?.state();
-  return !state3 || !!state3.access.terminal;
-}
-var SliccFollow = class extends ModelElement {
-  static properties = {
-    ...ModelElement.properties,
-    page: { type: Boolean, reflect: true },
-    compact: { type: Boolean, reflect: true },
-    busy: { state: true },
-    error: { state: true }
-  };
-  constructor() {
-    super();
-    this.page = false;
-    this.compact = false;
-    this.busy = "";
-    this.error = "";
-  }
-  static styles = [
-    shared,
-    i`
-      :host {
-        display: inline-block;
-      }
-      :host([page]) {
-        display: block;
-        max-width: 480px;
-      }
-      .chip swc-status-light {
-        align-self: center;
-      }
-      :host([compact]) .chip .text {
-        display: none;
-      }
-      .panel {
-        display: grid;
-        gap: var(--swc-spacing-200);
-        width: calc(var(--swc-spacing-400) * 11);
-        max-width: 100%;
-        padding: var(--swc-spacing-300);
-        box-sizing: border-box;
-        font-size: var(--swc-font-size-100);
-        color: var(--swc-neutral-content-color-default);
-      }
-      h2 {
-        margin: 0;
-        font-size: var(--swc-font-size-300);
-        font-weight: var(--swc-bold-font-weight);
-        line-height: var(--swc-heading-line-height);
-        color: var(--swc-heading-color);
-      }
-      .page h2 {
-        font-size: var(--swc-font-size-500);
-      }
-      .page > p {
-        font-size: var(--swc-font-size-200);
-      }
-      .panel h2 {
-        font-size: var(--swc-font-size-100);
-      }
-      p {
-        margin: 0;
-      }
-      .muted {
-        color: var(--swc-neutral-subdued-content-color-default);
-      }
-      .page {
-        display: grid;
-        gap: var(--swc-spacing-300);
-        justify-items: center;
-        text-align: center;
-      }
-      .actions {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        gap: var(--swc-spacing-200);
-      }
-      .panel .actions {
-        justify-content: flex-start;
-      }
-      .error {
-        display: flex;
-        align-items: flex-start;
-        gap: var(--swc-spacing-75);
-        color: var(--swc-negative-content-color-default);
-        --swc-icon-color: var(--swc-negative-content-color-default);
-      }
-    `
-  ];
-  subscribe(model) {
-    const port = model.follow;
-    return port ? [port.on("follow", () => this.requestUpdate())] : [];
-  }
-  async leave() {
-    const port = this.model?.follow;
-    if (!port || this.busy) return;
-    const state3 = port.state();
-    if (state3.link !== "unlinked") {
-      const ok2 = await confirm({
-        title: `Stop following ${state3.owner}?`,
-        body: `This device forgets the link. To follow ${state3.owner} again, open a new link from it.`,
-        action: "Leave",
-        variant: "confirmation"
-      });
-      if (!ok2) return;
+    } else if (event2.key === "Enter" || event2.key === " ") {
+      event2.preventDefault();
+      const id = items[index]?.dataset.id;
+      if (id) this.#select(id);
+    } else if (event2.key === "Delete") {
+      const agent = this.model?.agent.list().find((item2) => item2.id === items[index]?.dataset.id);
+      if (agent && this.#droppable(agent)) {
+        event2.preventDefault();
+        void this.#drop(agent, items[index]);
+      } else if (agent && this.#deletable(agent)) {
+        event2.preventDefault();
+        void this.#deleteCone(agent, items[index]);
+      }
     }
-    await this.#run("leave", () => port.leave());
   }
-  async retry() {
-    const port = this.model?.follow;
-    if (!port?.retry || this.busy) return;
-    await this.#run("retry", () => port.retry?.());
+  #droppable(agent) {
+    return agent.kind === "scoop" && Boolean(this.model?.agent.drop) && !watchOnly(this.model);
   }
-  async #run(busy, task) {
-    this.busy = busy;
-    this.error = "";
+  #deletable(agent) {
+    return agent.kind === "cone" && !agent.frozen && Boolean(this.model?.agent.freeze) && !watchOnly(this.model);
+  }
+  async #deleteCone(agent, trigger2) {
+    if (!await deleteCone(this.model, agent, trigger2)) return;
+    await this.updateComplete;
+    this.focus();
+  }
+  async #drop(agent, trigger2) {
+    const port = this.model?.agent;
+    if (!port?.drop) return;
+    const ok2 = await confirm({
+      title: `Drop scoop ${agent.name}?`,
+      body: "It stops, and its working folder is deleted. Its conversation and reports are kept. You can\u2019t undo this.",
+      action: "Drop",
+      variant: "destructive",
+      trigger: trigger2
+    });
+    if (!ok2 || watchOnly(this.model)) return;
+    const { [agent.id]: _9, ...rest } = this.errors;
+    this.errors = rest;
     try {
-      await task();
+      await port.drop(agent.id);
     } catch (error) {
-      this.error = error instanceof Error ? error.message : String(error);
-    } finally {
-      this.busy = "";
+      const message = error instanceof Error ? error.message : String(error);
+      this.errors = { ...this.errors, [agent.id]: `Couldn\u2019t drop ${agent.name}: ${message}` };
+      return;
     }
+    const current = port.active();
+    const stale = current === agent.id || !port.list().some((candidate) => candidate.id === current);
+    if (stale && agent.parentId) port.select(agent.parentId);
+    await this.updateComplete;
+    this.focus();
   }
-  #error() {
-    return this.error ? b`<p class="error" role="alert" data-error><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${this.error}</span></p>` : A;
+  #dropButton(agent) {
+    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) => {
+      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>`;
   }
-  #leaveButton() {
-    return b`<swc-button size="m" variant="secondary" fill-style="outline" data-action="leave" ?pending=${this.busy === "leave"} ?disabled=${!!this.busy && this.busy !== "leave"} @click=${() => this.leave()}>Leave</swc-button>`;
+  #deleteButton(agent) {
+    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) => {
+      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>`;
   }
-  #page(page) {
-    return b`<div class="page" data-follow-page=${page.kind}>
-      ${page.kind === "connecting" || page.kind === "waiting" ? b`<swc-progress-circle size="m" indeterminate label=${page.kind === "waiting" ? "Waiting" : "Connecting"} aria-hidden="true"></swc-progress-circle>` : A}
-      <h2 aria-live="polite">${page.title}</h2>
-      <p class="muted">${page.body}</p>
-      ${this.#error()}
-      <div class="actions">
-        ${page.kind === "failed" && this.model?.follow?.retry ? b`<swc-button size="m" variant="accent" data-action="retry" ?pending=${this.busy === "retry"} ?disabled=${!!this.busy && this.busy !== "retry"} @click=${() => this.retry()}>Try again</swc-button>` : A}
-        ${this.#leaveButton()}
-      </div>
-    </div>`;
+  #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 label = `${coneLabel(model, agent)}: ${statusLabel[agent.status]}, ${percent(agent.contextFill)} context${agent.unread ? `, ${agent.unread} unread` : ""}${error ? `. ${error}` : ""}`;
+    return b`<li
+      role="option"
+      class=${agent.kind}
+      data-id=${agent.id}
+      aria-selected=${selected ? "true" : "false"}
+      aria-label=${label}
+      tabindex=${selected ? "0" : "-1"}
+      aria-keyshortcuts=${this.#droppable(agent) || this.#deletable(agent) ? "Delete" : A}
+      title=${label}
+      @click=${() => this.#select(agent.id)}
+    >
+      <span class="name">${agent.name}</span>
+      ${title === null ? A : b`<span class="title">${title || untitled}</span>`}
+      ${agent.unread ? b`<swc-badge class="unread" size="s" variant="accent">${agent.unread}</swc-badge>` : A}
+      <span class="fill">${percent(agent.contextFill)}</span>
+      ${statusLight(agent.status)}
+      ${this.#dropButton(agent)}
+      ${this.#deleteButton(agent)}
+      ${error ? b`<span class="error">${error}</span>` : A}
+    </li>`;
   }
   render() {
-    const state3 = this.model?.follow?.state();
-    if (!state3) return A;
-    const page = followPage(state3);
-    if (this.page) return page ? this.#page(page) : A;
-    const light = followLight(state3);
-    return b`<swc-action-button id="chip" class="chip" size="s" quiet data-follow=${state3.link} accessible-label=${light.text}>
-        ${this.compact ? b`<swc-icon-user-following slot="icon" size="s" aria-hidden="true"></swc-icon-user-following>` : A}
-        <swc-status-light size="s" variant=${light.variant}><span class="text">${light.text}</span></swc-status-light>
-      </swc-action-button>
-      <swc-tooltip for="chip" placement="bottom">${light.text}</swc-tooltip>
-      <swc-popover for="chip" placement="bottom-end" accessible-label=${light.text}>
-        <div class="panel">
-          <h2>${light.text}</h2>
-          ${state3.link === "reconnecting" ? b`<p class="muted" data-reconnecting>The link to ${state3.owner} dropped. The conversation may be out of date until it’s back${state3.access.control ? ", and sending waits until then" : ""}.</p>` : A}
-          <p data-can>${followCan(state3)}</p>
-          ${this.#error()}
-          <div class="actions">${this.#leaveButton()}</div>
-        </div>
-      </swc-popover>`;
+    const agents = ordered(this.model?.agent.list() ?? []);
+    const active = this.model?.agent.active() ?? "";
+    const errors = Object.values(this.errors);
+    return b`<ul role="listbox" aria-label="Cones and scoops" @keydown=${this.#keydown}>
+        ${agents.map((agent) => this.#row(agent, active))}
+      </ul>
+      <div class="sr" role="status">${errors.at(-1) ?? ""}</div>`;
+  }
+};
+
+// node_modules/lit-html/directives/keyed.js
+var i17 = e2(class extends i3 {
+  constructor() {
+    super(...arguments), this.key = A;
+  }
+  render(r39, t88) {
+    return this.key = r39, t88;
+  }
+  update(r39, [t88, e119]) {
+    return t88 !== this.key && (p(r39), this.key = t88), e119;
+  }
+});
+
+// node_modules/lit-html/static.js
+var a12 = /* @__PURE__ */ Symbol.for("");
+var o51 = (t88) => {
+  if (t88?.r === a12) return t88?._$litStatic$;
+};
+var s9 = (t88) => ({ _$litStatic$: t88, r: a12 });
+var l15 = /* @__PURE__ */ new Map();
+var n28 = (t88) => (r39, ...e119) => {
+  const a22 = e119.length;
+  let s19, i25;
+  const n36 = [], u27 = [];
+  let c27, $6 = 0, f11 = false;
+  for (; $6 < a22; ) {
+    for (c27 = r39[$6]; $6 < a22 && void 0 !== (i25 = e119[$6], s19 = o51(i25)); ) c27 += s19 + r39[++$6], f11 = true;
+    $6 !== a22 && u27.push(i25), n36.push(c27), $6++;
+  }
+  if ($6 === a22 && n36.push(r39[a22]), f11) {
+    const t89 = n36.join("$$lit$$");
+    void 0 === (r39 = l15.get(t89)) && (n36.raw = n36, l15.set(t89, r39 = n36)), e119 = u27;
+  }
+  return t88(r39, ...e119);
+};
+var u18 = n28(b);
+var c17 = n28(w);
+var $2 = n28(T);
+
+// src/app/dips.ts
+var dipType = "application/x-slicc-sprinkle";
+var Dips = class extends Emitter {
+  key = "slicc-ui.dips";
+  #out = /* @__PURE__ */ new Set();
+  #storage = null;
+  load(storage) {
+    this.#storage = storage;
+    try {
+      const saved = JSON.parse(storage?.getItem(this.key) ?? "[]");
+      this.#out = new Set(Array.isArray(saved) ? saved.filter((id) => typeof id === "string") : []);
+    } catch {
+      this.#out = /* @__PURE__ */ new Set();
+    }
+    this.emit("change", this.list());
+  }
+  list() {
+    return [...this.#out];
+  }
+  has(id) {
+    return this.#out.has(id);
+  }
+  detach(id) {
+    if (this.#out.has(id)) return;
+    this.#out.add(id);
+    this.#storage?.setItem(this.key, JSON.stringify(this.list()));
+    this.emit("change", this.list());
   }
 };
+function dipsOf(node) {
+  let current = node;
+  while (current) {
+    const found = current.dips;
+    if (found instanceof Dips) return found;
+    current = current.parentNode ?? current.host ?? null;
+  }
+  return null;
+}
 
 // src/app/fonts.ts
 var adobeClean = [
@@ -20665,7 +20669,7 @@ function part(entry, handlers, showThinking) {
     case "delegation":
       return delegation(entry, handlers);
     case "sprinkle":
-      return b`<slicc-sprinkle inline .model=${handlers.model} sprinkle=${entry.sprinkle}></slicc-sprinkle>`;
+      return b`<slicc-sprinkle inline ?readonly=${handlers.readOnly} .model=${handlers.model} sprinkle=${entry.sprinkle}></slicc-sprinkle>`;
     case "link":
       return host2(entry.url) ? A : b`<div class="link-text">${entry.title}</div>`;
     default:
@@ -22150,7 +22154,7 @@ var SliccUpdates = class extends ModelElement {
 // src/app/app.ts
 function railIcon(icon) {
   if (icon.startsWith("swc-icon-")) {
-    return u16`<${s9(icon)} slot="icon"></${s9(icon)}>`;
+    return u18`<${s9(icon)} slot="icon"></${s9(icon)}>`;
   }
   return b`<slicc-lucide slot="icon" name=${icon}></slicc-lucide>`;
 }
@@ -22814,7 +22818,7 @@ var SliccApp = class extends ThemedElement {
     const driven = item2.id === "browser" && !!this.model?.browser.list().some((tab) => tab.controlled);
     const visible2 = shown(this.dock, item2.id);
     const label = `${visible2 ? `${item2.title}, shown` : `Open ${item2.title}`}${changes2 ? `, ${changeCount(changes2)}` : driven ? ", a tab is in use" : ""}`;
-    const button = u16`<swc-action-button id=${`rail-${item2.id}`} class=${visible2 ? "selected" : ""} quiet size="m" accessible-label=${label} data-surface=${item2.id} data-cone=${o2(item2.cone)} ?data-visible=${visible2} @click=${() => this.show(item2.id)}>${railIcon(item2.icon)}</swc-action-button>`;
+    const button = u18`<swc-action-button id=${`rail-${item2.id}`} class=${visible2 ? "selected" : ""} quiet size="m" accessible-label=${label} data-surface=${item2.id} data-cone=${o2(item2.cone)} ?data-visible=${visible2} @click=${() => this.show(item2.id)}>${railIcon(item2.icon)}</swc-action-button>`;
     const tooltip = b`<swc-tooltip for=${`rail-${item2.id}`} placement=${{ left: "end", right: "start", bottom: "top" }[side]}>${item2.title}</swc-tooltip>`;
     return changes2 ? b`<span class="badged">${button}<swc-badge size="s" variant="neutral" aria-hidden="true">${changes2}</swc-badge></span>${tooltip}` : driven ? b`<span class="badged">${button}<span class="dot" data-driven aria-hidden="true"></span></span>${tooltip}` : b`${button}${tooltip}`;
   }
@@ -22826,9 +22830,9 @@ var SliccApp = class extends ThemedElement {
     if (!items.length) return A;
     const changes2 = items.some((item2) => item2.id === "changes") ? this.#changes() : 0;
     const label = changes2 ? `More panels, ${changeCount(changes2)}` : "More panels";
-    const menu = u16`<sp-action-menu quiet size="m" label=${label} placement="top-end" @change=${(event2) => this.show(event2.target.value)}>
+    const menu = u18`<sp-action-menu quiet size="m" label=${label} placement="top-end" @change=${(event2) => this.show(event2.target.value)}>
       <swc-icon-more slot="icon"></swc-icon-more>
-      ${items.map((item2) => u16`<sp-menu-item value=${item2.id}>${railIcon(item2.icon)}${item2.title}</sp-menu-item>`)}
+      ${items.map((item2) => u18`<sp-menu-item value=${item2.id}>${railIcon(item2.icon)}${item2.title}</sp-menu-item>`)}
     </sp-action-menu>`;
     return changes2 ? b`<span class="badged">${menu}<swc-badge size="s" variant="neutral" aria-hidden="true">${changes2}</swc-badge></span>` : menu;
   }
@@ -22889,7 +22893,10 @@ var SliccApp = class extends ThemedElement {
   }
   #deletable() {
     const cone = this.model?.agent.list().find((agent) => agent.id === this.#cone());
-    return Boolean(cone && !cone.frozen && this.model?.agent.freeze);
+    return Boolean(cone && !cone.frozen && this.model?.agent.freeze && !watchOnly(this.model));
+  }
+  #creatable() {
+    return Boolean(this.model?.agent.createCone) && !watchOnly(this.model);
   }
   #cone() {
     const agent = this.#active();
@@ -22932,6 +22939,7 @@ var SliccApp = class extends ThemedElement {
       action: "Create",
       trigger: trigger2,
       submit: async (name) => {
+        if (watchOnly(this.model)) return;
         created = await create3(name);
       }
     });
@@ -23010,8 +23018,8 @@ var SliccApp = class extends ThemedElement {
       cones.map((agent) => agent.id).join(" "),
       b`<sp-picker size="s" label="Agent" value=${this.#cone()} @change=${this.#pick}>
             ${cones.map((agent) => b`<sp-menu-item value=${agent.id}>${agent.name}<span slot="description">${agentTitle(this.model, agent) || untitled}</span></sp-menu-item>`)}
-            ${this.model?.agent.createCone ? b`<sp-menu-divider></sp-menu-divider><sp-menu-item value=${newCone} data-action="new-cone"><swc-icon-add slot="icon"></swc-icon-add>New cone</sp-menu-item>` : A}
-            ${this.#deletable() ? b`${this.model?.agent.createCone ? A : b`<sp-menu-divider></sp-menu-divider>`}<sp-menu-item value=${deleteActiveCone} data-action="delete-cone"><swc-icon-delete slot="icon"></swc-icon-delete>Delete cone</sp-menu-item>` : A}
+            ${this.#creatable() ? b`<sp-menu-divider></sp-menu-divider><sp-menu-item value=${newCone} data-action="new-cone"><swc-icon-add slot="icon"></swc-icon-add>New cone</sp-menu-item>` : A}
+            ${this.#deletable() ? b`${this.#creatable() ? A : b`<sp-menu-divider></sp-menu-divider>`}<sp-menu-item value=${deleteActiveCone} data-action="delete-cone"><swc-icon-delete slot="icon"></swc-icon-delete>Delete cone</sp-menu-item>` : A}
             ${this.#offers("agents") ? b`<sp-menu-divider></sp-menu-divider><sp-menu-item value=${allAgents}>Show all agents</sp-menu-item>` : A}
           </sp-picker>`
     ) : A}
@@ -24351,6 +24359,7 @@ var SliccBrowser = class extends ModelElement {
         this.requestUpdate();
       }),
       ...model.network ? [model.network.on("network", () => this.requestUpdate())] : [],
+      ...model.follow ? [model.follow.on("follow", () => this.requestUpdate())] : [],
       () => clearInterval(timer),
       () => resize.disconnect(),
       () => document.removeEventListener("visibilitychange", visibility),
@@ -24503,7 +24512,7 @@ var SliccBrowser = class extends ModelElement {
     return tab.agentId ? `${agentName(this.model, tab.agentId)} is using this tab` : "In use";
   }
   #stopButton(tab, refocus, justified = false) {
-    if (!tab.agentId) return A;
+    if (!tab.agentId || watchOnly(this.model)) return A;
     const agentId = tab.agentId;
     return b`<swc-button size="s" variant="secondary" ?justified=${justified} data-action="stop-agent" @click=${() => this.#stop(agentId, refocus)}>Stop ${agentName(this.model, agentId)}</swc-button>`;
   }
@@ -25637,7 +25646,7 @@ var SliccChat = class extends ThemedElement {
     if (agent.frozen) {
       return b`<swc-badge size="s" variant="informative" subtle>Frozen</swc-badge>
         <span class="frozen">Read only</span>
-        <swc-button size="s" variant="secondary" fill-style="outline" data-action="thaw" @click=${() => model.agent.thaw(agent.id)}>Thaw</swc-button>
+        ${watchOnly(model) ? A : b`<swc-button size="s" variant="secondary" fill-style="outline" data-action="thaw" @click=${() => model.agent.thaw(agent.id)}>Thaw</swc-button>`}
         ${meter}`;
     }
     if (watchOnly(model)) {
@@ -30306,17 +30315,20 @@ var sprinkleMethods = /* @__PURE__ */ new Set([
   "setState"
 ]);
 var grip = w`<svg class="grip" viewBox="0 0 8 14" width="8" height="14" aria-hidden="true">${[2, 7, 12].flatMap((y10) => [2, 6].map((x7) => w`<circle cx=${x7} cy=${y10} r="1.25"></circle>`))}</svg>`;
+var plainId = (id) => id.replace(/^cone:/, "");
 var SliccSprinkle = class extends ThemedElement {
   static properties = {
     ...ThemedElement.properties,
     sprinkle: {},
     inline: { type: Boolean, reflect: true },
+    readonly: { type: Boolean, reflect: true },
     height: { state: true }
   };
   constructor() {
     super();
     this.sprinkle = "";
     this.inline = false;
+    this.readonly = false;
     this.height = 160;
   }
   static styles = i`
@@ -30380,6 +30392,30 @@ var SliccSprinkle = class extends ThemedElement {
       color: var(--spectrum-neutral-subdued-content-color-default);
       font-size: var(--spectrum-font-size-75);
     }
+    .view-only {
+      color: var(--spectrum-neutral-subdued-content-color-default);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-inline-end: 4px;
+    }
+    .panel {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+    .panel iframe {
+      flex: 1;
+      min-height: 0;
+    }
+    .bar {
+      display: flex;
+      align-items: center;
+      height: 28px;
+      padding: 0 12px;
+      border-bottom: 1px solid var(--spectrum-gray-200);
+      font-size: var(--spectrum-font-size-75);
+    }
     .note {
       padding: 24px;
       color: var(--spectrum-neutral-subdued-content-color-default);
@@ -30391,6 +30427,7 @@ var SliccSprinkle = class extends ThemedElement {
     const source = event2.source;
     const data = event2.data ?? {};
     if (data.type === "slicc-lick") {
+      if (this.#readOnly()) return;
       this.model?.sprinkles.send(this.sprinkle, {
         action: data.action,
         data: data.data,
@@ -30408,10 +30445,32 @@ var SliccSprinkle = class extends ThemedElement {
       await this.#call(source, data);
     }
   };
+  #readOnly() {
+    return this.readonly || this.#frozen() || !!watchOnly(this.model);
+  }
+  #seen = /* @__PURE__ */ new Set();
+  #frozen() {
+    const owner = this.#data?.agentId;
+    const port = this.model?.agent;
+    if (!port || !owner) return false;
+    const id = plainId(owner);
+    const agents = port.list();
+    const live = agents.find((agent) => plainId(agent.id) === id);
+    if (live) {
+      this.#seen.add(id);
+      return !!live.frozen;
+    }
+    if (port.frozen().some((row) => !row.live && plainId(row.id) === id)) return true;
+    return agents.length > 0 && this.#seen.has(id);
+  }
   async #call(source, data) {
     const port = this.model?.sprinkles;
     if (!port?.call || typeof data.method !== "string" || !sprinkleMethods.has(data.method)) return;
     const method = data.method;
+    if (method === "setState" && this.#readOnly()) {
+      source.postMessage({ type: "slicc-result", id: data.id, error: "read-only" }, "*");
+      return;
+    }
     const args2 = Array.isArray(data.args) ? data.args : [];
     if (method === "setState") this.#held.value = args2[0] ?? null;
     try {
@@ -30464,7 +30523,8 @@ var SliccSprinkle = class extends ThemedElement {
       ...super.subscribe(model),
       () => globalThis.removeEventListener("message", this.#message),
       model.sprinkles.on("sprinkles", () => this.requestUpdate()),
-      this.#dips.on("change", () => this.requestUpdate())
+      this.#dips.on("change", () => this.requestUpdate()),
+      ...model.follow ? [model.follow.on("follow", () => this.requestUpdate())] : []
     ];
   }
   #drag = (event2) => {
@@ -30510,18 +30570,22 @@ ${data.html}`;
     const bridged = !!this.model?.sprinkles.call;
     if (bridged && !this.#held.ready) return b``;
     const state3 = bridged ? this.#held : void 0;
+    const watch = !!watchOnly(this.model);
+    const caption = watch ? b`<span class="view-only" data-view-only>View only on this device</span>` : A;
     const style = `color-scheme:${this.color};${this.inline ? `height:${this.height}px;` : ""}`;
     const frame = b`${i17(
       this.#mounts,
-      b`<iframe title=${data.title} sandbox="allow-scripts" style=${style} .srcdoc=${this.#document(data, state3)}></iframe>`
+      b`<iframe title=${data.title} sandbox="allow-scripts" ?inert=${watch} style=${style} .srcdoc=${this.#document(data, state3)}></iframe>`
     )}`;
-    if (!this.inline) return frame;
+    if (!this.inline)
+      return watch ? b`<div class="panel"><div class="bar">${caption}</div>${frame}</div>` : frame;
     return b`<div class="handle" draggable="true" title="Drag into the dock or a rail to open as a panel" @dragstart=${this.#drag}>
         ${grip}
         <span class="name">${data.title}</span>
         <sp-action-button size="xs" quiet label=${`Open ${data.title} as a panel`} title="Open as a panel" @click=${() => this.#send("detach-sprinkle", data.id)}>
           <swc-icon-open-in slot="icon"></swc-icon-open-in>
         </sp-action-button>
+        ${caption}
       </div>
       <div class="frame">${frame}</div>`;
   }