@ai-ecoverse/slicc-spectrum 1.4.0 → 1.5.0

package/dist/slicc-ui.js

@@ -1,3 +1,9 @@
+import {
+  SlottableRequestEvent,
+  conditionAttributeWithId,
+  isWebKit,
+  randomID
+} from "./chunk-Y4Z7K443.js";
 import {
   IS_MOBILE,
   IS_TOUCH_DEVICE,
@@ -15,16 +21,7 @@ import {
 import {
   SizedMixin,
   n as n2
-} from "./chunk-SBRFYELH.js";
-import {
-  defineElement
-} from "./chunk-6A6NIESE.js";
-import {
-  SlottableRequestEvent,
-  conditionAttributeWithId,
-  isWebKit,
-  randomID
-} from "./chunk-Y4Z7K443.js";
+} from "./chunk-4JUIYZ4Q.js";
 import "./chunk-364Y2XOJ.js";
 import {
   r
@@ -38,6 +35,9 @@ import {
   o,
   o2
 } from "./chunk-2BBOXTOJ.js";
+import {
+  defineElement
+} from "./chunk-6A6NIESE.js";
 import {
   A,
   D,
@@ -2048,7 +2048,7 @@ var MenuItem = class extends LikeAnchor(ObserveSlotText(ObserveSlotPresence(Focu
         <sp-icon-chevron100
           class="spectrum-UIIcon-ChevronRight100 chevron icon"
         ></sp-icon-chevron100>
-      ` : (this.dependencyManager.add("sp-overlay"), this.dependencyManager.add("sp-popover"), import("./chunk-FFZJVWZQ.js"), import("./chunk-7PY7B3ZW.js"), b`
+      ` : (this.dependencyManager.add("sp-overlay"), this.dependencyManager.add("sp-popover"), import("./chunk-JCRICTXR.js"), import("./chunk-7PY7B3ZW.js"), b`
       <sp-overlay
         receives-focus="false"
         .triggerElement=${this}
@@ -3113,7 +3113,7 @@ var PickerBase = class extends SizedMixin(ExpandableElement, { noDefaultSize: tr
     `;
   }
   renderLoader() {
-    return import("./chunk-JUNZW2NI.js"), b`
+    return import("./chunk-N27WNL5Q.js"), b`
       <sp-progress-circle
         size="s"
         indeterminate
@@ -3174,7 +3174,7 @@ var PickerBase = class extends SizedMixin(ExpandableElement, { noDefaultSize: tr
   renderOverlay(e14) {
     var s9;
     const t14 = this.renderContainer(e14);
-    return this.dependencyManager.add("sp-overlay"), import("./chunk-FFZJVWZQ.js"), b`
+    return this.dependencyManager.add("sp-overlay"), import("./chunk-JCRICTXR.js"), b`
       <sp-overlay
         @slottable-request=${this.handleSlottableRequest}
         @beforetoggle=${this.handleBeforetoggle}
@@ -3255,7 +3255,7 @@ var PickerBase = class extends SizedMixin(ExpandableElement, { noDefaultSize: tr
     const t14 = b`
       ${this.dismissHelper} ${e14} ${this.dismissHelper}
     `;
-    return this.isMobile.matches && !this.forcePopover ? (this.dependencyManager.add("sp-tray"), import("./chunk-6JNYNXUQ.js"), b`
+    return this.isMobile.matches && !this.forcePopover ? (this.dependencyManager.add("sp-tray"), import("./chunk-LR5GBIK7.js"), b`
         <sp-tray
           id="popover"
           role="presentation"
@@ -3488,7 +3488,7 @@ var Picker = class extends SizedMixin(ExpandableElement, { noDefaultSize: true }
     `;
   }
   renderLoader() {
-    return import("./chunk-JUNZW2NI.js"), b`
+    return import("./chunk-N27WNL5Q.js"), b`
       <sp-progress-circle
         size="s"
         indeterminate
@@ -3549,7 +3549,7 @@ var Picker = class extends SizedMixin(ExpandableElement, { noDefaultSize: true }
   renderOverlay(e14) {
     var s9;
     const t14 = this.renderContainer(e14);
-    return this.dependencyManager.add("sp-overlay"), import("./chunk-FFZJVWZQ.js"), b`
+    return this.dependencyManager.add("sp-overlay"), import("./chunk-JCRICTXR.js"), b`
       <sp-overlay
         @slottable-request=${this.handleSlottableRequest}
         @beforetoggle=${this.handleBeforetoggle}
@@ -3630,7 +3630,7 @@ var Picker = class extends SizedMixin(ExpandableElement, { noDefaultSize: true }
     const t14 = b`
       ${this.dismissHelper} ${e14} ${this.dismissHelper}
     `;
-    return this.isMobile.matches && !this.forcePopover ? (this.dependencyManager.add("sp-tray"), import("./chunk-6JNYNXUQ.js"), b`
+    return this.isMobile.matches && !this.forcePopover ? (this.dependencyManager.add("sp-tray"), import("./chunk-LR5GBIK7.js"), b`
         <sp-tray
           id="popover"
           role="presentation"
@@ -3915,7 +3915,7 @@ var ActionMenu = class extends ObserveSlotPresence(ObserveSlotText(SizedMixin(Ex
     `;
   }
   renderLoader() {
-    return import("./chunk-JUNZW2NI.js"), b`
+    return import("./chunk-N27WNL5Q.js"), b`
       <sp-progress-circle
         size="s"
         indeterminate
@@ -3948,7 +3948,7 @@ var ActionMenu = class extends ObserveSlotPresence(ObserveSlotText(SizedMixin(Ex
   renderOverlay(e14) {
     var s9;
     const t14 = this.renderContainer(e14);
-    return this.dependencyManager.add("sp-overlay"), import("./chunk-FFZJVWZQ.js"), b`
+    return this.dependencyManager.add("sp-overlay"), import("./chunk-JCRICTXR.js"), b`
       <sp-overlay
         @slottable-request=${this.handleSlottableRequest}
         @beforetoggle=${this.handleBeforetoggle}
@@ -4027,7 +4027,7 @@ var ActionMenu = class extends ObserveSlotPresence(ObserveSlotText(SizedMixin(Ex
     const t14 = b`
       ${this.dismissHelper} ${e14} ${this.dismissHelper}
     `;
-    return this.isMobile.matches && !this.forcePopover ? (this.dependencyManager.add("sp-tray"), import("./chunk-6JNYNXUQ.js"), b`
+    return this.isMobile.matches && !this.forcePopover ? (this.dependencyManager.add("sp-tray"), import("./chunk-LR5GBIK7.js"), b`
         <sp-tray
           id="popover"
           role="presentation"
@@ -4305,7 +4305,7 @@ var TruncatedValueTooltipController = class {
     return this.refreshTruncationState();
   }
   async ensureTooltipDeps() {
-    this._tooltipDepsLoaded || (await Promise.all([import("./chunk-FFZJVWZQ.js"), import("./chunk-6GSDEWD5.js")]), this._tooltipDepsLoaded = true, Promise.resolve().then(() => {
+    this._tooltipDepsLoaded || (await Promise.all([import("./chunk-JCRICTXR.js"), import("./chunk-MJOCPOXZ.js")]), this._tooltipDepsLoaded = true, Promise.resolve().then(() => {
       this.host.requestUpdate(truncatedValueTooltipUpdatedSymbol, false);
     }));
   }
@@ -4995,6 +4995,49 @@ var IconContrast = class extends IconBase {
 // node_modules/@spectrum-web-components/icons-workflow/icons/sp-icon-contrast.js
 defineElement("sp-icon-contrast", IconContrast);
 
+// node_modules/@spectrum-web-components/icons-workflow/src/icons-s2/Edit.js
+var EditIcon = ({ width: t14 = 24, height: l10 = 24, hidden: e14 = false, title: r13 = "Edit" } = {}) => tag2`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="${t14}"
+    height="${l10}"
+    viewBox="0 0 20 20"
+    aria-hidden=${e14 ? "true" : "false"}
+    role="img"
+    fill="currentColor"
+    aria-label="${r13}"
+  >
+    <path
+      d="m17.78076,1.75684c-1.27197-1.04102-3.22705-.89844-4.4502.32324L3.07764,12.33398c-.32031.31934-.55859.7168-.68896,1.15039l-1.38428,4.58398c-.08008.26465-.00781.55176.1875.74707.14258.14258.33447.21973.53027.21973.07227,0,.14551-.01074.2168-.03223l4.58252-1.38379c.43359-.12988.83154-.36816,1.15088-.68848,0,0,10.16846-10.16797,10.35547-10.35547.64795-.64746.99316-1.54492.94775-2.45996-.0459-.91504-.48145-1.77539-1.19482-2.3584ZM2.84473,17.16309l.97998-3.24609c.02716-.09033.06714-.17578.11377-.25732l2.40869,2.40918c-.08154.04639-.16718.08643-.25781.11377l-3.24463.98047Zm14.12158-11.64746c-.15472.15552-7.09985,7.1001-9.52545,9.52588l-2.47461-2.4751L14.39111,3.14062c.38623-.38672.896-.58594,1.38965-.58594.38086,0,.75244.11914,1.05029.3623.3916.32129.62109.77246.646,1.27246.0249.49316-.16113.97656-.51074,1.32617Z"
+      fill="currentColor"
+    />
+  </svg>`;
+
+// node_modules/@spectrum-web-components/icons-workflow/src/icons/Edit.js
+var EditIcon2 = ({ width: t14 = 24, height: e14 = 24, hidden: a11 = false, title: l10 = "Edit" } = {}) => tag2`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="${e14}"
+    viewBox="0 0 36 36"
+    width="${t14}"
+    aria-hidden=${a11 ? "true" : "false"}
+    role="img"
+    fill="currentColor"
+    aria-label="${l10}"
+  >
+    <path
+      d="M33.567 8.2 27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945ZM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73Z"
+    />
+  </svg>`;
+
+// node_modules/@spectrum-web-components/icons-workflow/src/elements/IconEdit.js
+var IconEdit = class extends IconBase {
+  render() {
+    return setCustomTemplateLiteralTag2(b), this.spectrumVersion === 2 ? EditIcon({ hidden: !this.label, title: this.label }) : EditIcon2({ hidden: !this.label, title: this.label });
+  }
+};
+
+// node_modules/@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js
+defineElement("sp-icon-edit", IconEdit);
+
 // node_modules/@spectrum-web-components/icons-workflow/src/icons-s2/Filter.js
 var FilterIcon = ({ width: l10 = 24, height: t14 = 24, hidden: e14 = false, title: r13 = "Filter" } = {}) => tag2`<svg
     xmlns="http://www.w3.org/2000/svg"
@@ -5245,6 +5288,50 @@ var IconLightbulb = class extends IconBase {
 // node_modules/@spectrum-web-components/icons-workflow/icons/sp-icon-lightbulb.js
 defineElement("sp-icon-lightbulb", IconLightbulb);
 
+// node_modules/@spectrum-web-components/icons-workflow/src/icons-s2/SaveFloppy.js
+var SaveFloppyIcon = ({ width: e14 = 24, height: t14 = 24, hidden: l10 = false, title: r13 = "Save Floppy" } = {}) => tag2`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="${e14}"
+    height="${t14}"
+    viewBox="0 0 20 20"
+    aria-hidden=${l10 ? "true" : "false"}
+    role="img"
+    fill="currentColor"
+    aria-label="${r13}"
+  >
+    <path
+      d="M17.41406,4.10352l-1.51758-1.51758c-.37793-.37793-.87988-.58594-1.41406-.58594H4.25c-1.24072,0-2.25,1.00977-2.25,2.25v11.5c0,1.24023,1.00928,2.25,2.25,2.25h11.5c1.24072,0,2.25-1.00977,2.25-2.25V5.51758c0-.52637-.21338-1.04199-.58594-1.41406ZM7.75,3.5h4.5v3h-4.5v-3ZM13.25,16.5h-6.5v-4.5h6.5v4.5ZM16.5,15.75c0,.41309-.33643.75-.75.75h-1v-4.5c0-.82715-.67285-1.5-1.5-1.5h-6.5c-.82715,0-1.5.67285-1.5,1.5v4.5h-1c-.41357,0-.75-.33691-.75-.75V4.25c0-.41309.33643-.75.75-.75h2v3c0,.82715.67285,1.5,1.5,1.5h4.5c.82715,0,1.5-.67285,1.5-1.5v-3h.73242c.1333,0,.25879.05176.35352.14648l1.51758,1.51758c.09326.09277.14648.22168.14648.35352v10.23242Z"
+      fill="currentColor"
+    />
+  </svg>`;
+
+// node_modules/@spectrum-web-components/icons-workflow/src/icons/SaveFloppy.js
+var SaveFloppyIcon2 = ({ width: e14 = 24, height: t14 = 24, hidden: a11 = false, title: l10 = "Save Floppy" } = {}) => tag2`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="${t14}"
+    viewBox="0 0 36 36"
+    width="${e14}"
+    aria-hidden=${a11 ? "true" : "false"}
+    role="img"
+    fill="currentColor"
+    aria-label="${l10}"
+  >
+    <path d="M20 4h4v6h-4z" />
+    <path
+      d="M31.708 8.293s-4.015-4-4.146-4.114A.969.969 0 0 0 27 4h-1v8H14V4H5a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1V9a1 1 0 0 0-.292-.707ZM26 30H10V16h16Z"
+    />
+  </svg>`;
+
+// node_modules/@spectrum-web-components/icons-workflow/src/elements/IconSaveFloppy.js
+var IconSaveFloppy = class extends IconBase {
+  render() {
+    return setCustomTemplateLiteralTag2(b), this.spectrumVersion === 2 ? SaveFloppyIcon({ hidden: !this.label, title: this.label }) : SaveFloppyIcon2({ hidden: !this.label, title: this.label });
+  }
+};
+
+// node_modules/@spectrum-web-components/icons-workflow/icons/sp-icon-save-floppy.js
+defineElement("sp-icon-save-floppy", IconSaveFloppy);
+
 // node_modules/@spectrum-web-components/icons-workflow/src/icons-s2/GlobeGrid.js
 var GlobeGridIcon = ({ width: e14 = 24, height: t14 = 24, hidden: r13 = false, title: l10 = "Globe Grid" } = {}) => tag2`<svg
     xmlns="http://www.w3.org/2000/svg"
@@ -6204,13 +6291,17 @@ var SliccFileView = class extends ThemedElement {
     ...ThemedElement.properties,
     path: {},
     text: { state: true },
-    missing: { state: true }
+    missing: { state: true },
+    draft: { state: true },
+    saving: { state: true }
   };
   constructor() {
     super();
     this.path = "";
     this.text = null;
     this.missing = false;
+    this.draft = null;
+    this.saving = false;
   }
   static styles = [
     shared,
@@ -6220,8 +6311,81 @@ var SliccFileView = class extends ThemedElement {
         flex: 1;
         min-height: 0;
       }
+      textarea {
+        flex: 1;
+        min-height: 0;
+        margin: 0;
+        padding: 8px 12px;
+        border: 0;
+        resize: none;
+        outline: none;
+        background: var(--spectrum-background-layer-2-color);
+        color: var(--spectrum-neutral-content-color-default);
+        font-family: var(--spectrum-code-font-family-stack, ui-monospace, monospace);
+        font-size: 13px;
+        line-height: 20px;
+        tab-size: 2;
+      }
     `
   ];
+  edit() {
+    this.draft = this.text ?? "";
+    this.focusOn("textarea");
+  }
+  cancel() {
+    this.draft = null;
+  }
+  async save() {
+    const model = this.model;
+    if (!model || this.draft === null) return;
+    const draft = this.draft;
+    this.saving = true;
+    try {
+      await model.files.write(this.path, draft);
+      this.text = draft;
+      this.missing = false;
+      if (this.draft === draft) this.draft = null;
+    } finally {
+      this.saving = false;
+    }
+  }
+  #keydown(event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      this.cancel();
+    } else if (event.key === "s" && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      void this.save();
+    }
+  }
+  #actions() {
+    if (this.draft === null) {
+      return b`<sp-action-button size="s" quiet ?disabled=${this.text === null} @click=${() => this.edit()}>
+        <sp-icon-edit slot="icon"></sp-icon-edit>Edit
+      </sp-action-button>`;
+    }
+    return b`<sp-action-button size="s" quiet @click=${() => this.cancel()}>Cancel</sp-action-button>
+      <sp-action-button size="s" ?disabled=${this.saving} @click=${() => this.save()}>
+        <sp-icon-save-floppy slot="icon"></sp-icon-save-floppy>Save
+      </sp-action-button>`;
+  }
+  #body(change) {
+    if (this.draft !== null) {
+      return b`<textarea
+        aria-label=${`Edit ${this.path}`}
+        spellcheck="false"
+        .value=${this.draft}
+        @input=${(event) => {
+        this.draft = event.target.value;
+      }}
+        @keydown=${this.#keydown}
+      ></textarea>`;
+    }
+    if (this.missing) {
+      return b`<div class="note">This file doesn’t exist${change ? " any more" : ""}.</div>`;
+    }
+    return b`<slicc-code-view path=${this.path} color=${this.color} .contents=${this.text}></slicc-code-view>`;
+  }
   subscribe(model) {
     void this.#read(model);
     return [
@@ -6251,8 +6415,9 @@ var SliccFileView = class extends ThemedElement {
               <sp-action-button size="s" quiet @click=${() => request(this, "open-diff", this.path)}>
                 <sp-icon-compare slot="icon"></sp-icon-compare>Diff
               </sp-action-button>` : A}
+        ${this.#actions()}
       </div>
-      ${this.missing ? b`<div class="note">This file doesn’t exist${change ? " any more" : ""}.</div>` : b`<slicc-code-view path=${this.path} color=${this.color} .contents=${this.text}></slicc-code-view>`}`;
+      ${this.#body(change)}`;
   }
 };
 
@@ -6354,8 +6519,8 @@ function screenClass(width) {
   if (width < 1200) return "tablet";
   return "desktop";
 }
-function surface(id) {
-  return surfaces.find((candidate) => candidate.id === id);
+function surface(id, items = surfaces) {
+  return items.find((candidate) => candidate.id === id);
 }
 function create(tag3, model, params = {}) {
   const element2 = document.createElement(tag3);
@@ -6422,18 +6587,18 @@ function openDocument(dock, kind, path, screen) {
   dock.focusPanel(id);
   return id;
 }
-function defaultLayout(dock, screen) {
+function defaultLayout(dock, screen, items = surfaces) {
   dock.clear();
   const order = ["center", "left", "right"];
   for (const side of order) {
-    for (const item2 of surfaces) {
+    for (const item2 of items) {
       if (item2.side === side && item2.open.includes(screen)) openSurface(dock, item2, screen);
     }
   }
   dock.api.getPanel("chat")?.api.setActive();
 }
-function closed(dock) {
-  return surfaces.filter((item2) => !dock.has(item2.id));
+function closed(dock, items = surfaces) {
+  return items.filter((item2) => !dock.has(item2.id));
 }
 function sprinkleSurface(sprinkle) {
   return {
@@ -6468,7 +6633,11 @@ function railIcon(icon) {
   return b`<slicc-lucide slot="icon" name=${icon}></slicc-lucide>`;
 }
 var SliccApp = class extends ThemedElement {
-  static properties = { ...ThemedElement.properties, screen: { reflect: true } };
+  static properties = {
+    ...ThemedElement.properties,
+    screen: { reflect: true },
+    surfaces: { attribute: false }
+  };
   storage = globalThis.localStorage ?? null;
   layoutKey = "slicc-ui.layout";
   #fontBase = defaultFontBase;
@@ -6478,6 +6647,7 @@ var SliccApp = class extends ThemedElement {
   constructor() {
     super();
     this.screen = screenClass(globalThis.innerWidth ?? 1280);
+    this.surfaces = surfaces;
   }
   static styles = [
     shared,
@@ -6665,7 +6835,7 @@ var SliccApp = class extends ThemedElement {
     const dock = this.dock;
     this.#saving = false;
     dock.factories = {
-      ...Object.fromEntries(surfaces.map((item2) => [item2.id, () => create(item2.tag, model)])),
+      ...Object.fromEntries(this.surfaces.map((item2) => [item2.id, () => create(item2.tag, model)])),
       ...Object.fromEntries(
         Object.entries(documents).map(([kind, document2]) => [
           kind,
@@ -6674,12 +6844,18 @@ var SliccApp = class extends ThemedElement {
       ),
       sprinkle: (params) => create("slicc-sprinkle", model, params)
     };
-    const restored = dock.restore(this.#saved());
-    if (!restored) defaultLayout(dock, this.screen);
+    const saved = this.#saved();
+    const restored = this.#offered(saved, dock.factories) && dock.restore(saved);
+    if (!restored) defaultLayout(dock, this.screen, this.surfaces);
     this.#started = this.screen;
     this.#saving = true;
     this.#save();
   }
+  #offered(layout, factories) {
+    return Object.values(layout?.panels ?? {}).every(
+      (panel) => (panel.contentComponent ?? "") in factories
+    );
+  }
   get storageKey() {
     return `${this.layoutKey}.${this.screen}`;
   }
@@ -6695,7 +6871,7 @@ var SliccApp = class extends ThemedElement {
     this.requestUpdate();
   }
   resetLayout() {
-    defaultLayout(this.dock, this.screen);
+    defaultLayout(this.dock, this.screen, this.surfaces);
     this.#save();
   }
   show(id) {
@@ -6704,7 +6880,7 @@ var SliccApp = class extends ThemedElement {
       openSprinkle(this.dock, sprinkle, this.screen);
       return;
     }
-    const item2 = surface(id);
+    const item2 = surface(id, this.surfaces);
     if (!item2) return;
     openSurface(this.dock, item2, this.screen);
     this.dock.focusPanel(id);
@@ -6717,7 +6893,7 @@ var SliccApp = class extends ThemedElement {
   #rails() {
     const dock = this.renderRoot.querySelector("slicc-dock");
     const sprinkles = (this.model?.sprinkles.list() ?? []).filter((sprinkle) => !sprinkle.inline).map(sprinkleSurface).filter((item2) => !dock?.has(item2.id));
-    const shut = dock && this.#started ? [...sprinkles, ...closed(dock)] : [];
+    const shut = dock && this.#started ? [...sprinkles, ...closed(dock, this.surfaces)] : [];
     const phone = this.screen === "phone";
     return {
       left: this.#rail(phone ? [] : shut.filter((item2) => item2.side !== "right"), "left"),
@@ -6738,7 +6914,7 @@ var SliccApp = class extends ThemedElement {
   #keydown = (event) => {
     if (!event.altKey || event.ctrlKey || event.metaKey) return;
     const digit = event.code.match(/^Digit([1-9])$/)?.[1] ?? event.key.match(/^[1-9]$/)?.[0];
-    const surface2 = digit ? surfaces[Number(digit) - 1] : void 0;
+    const surface2 = digit ? this.surfaces[Number(digit) - 1] : void 0;
     if (surface2) {
       event.preventDefault();
       this.show(surface2.id);
@@ -6760,21 +6936,33 @@ var SliccApp = class extends ThemedElement {
       ${surface2.title}<kbd slot="value">Alt+${index + 1}</kbd>
     </sp-menu-item>`;
   }
-  #status() {
+  #offers(id) {
+    return this.surfaces.some((item2) => item2.id === id);
+  }
+  #agentStatus() {
+    if (!this.#offers("chat")) return A;
     const model = this.model;
     const agent = model?.agent.list().find((candidate) => candidate.id === model.agent.active());
     const label = model?.settings.models().find((option2) => option2.id === agent?.model)?.label;
-    const changes = model?.files.changes().length ?? 0;
-    return b`<footer role="status" aria-label="Status">
-      ${agent ? b`<span class="item">${dot(agent.status)}${agent.name} · ${agent.status}</span>
+    return agent ? b`<span class="item">${dot(agent.status)}${agent.name} · ${agent.status}</span>
             <span>${label ?? agent.model}</span>
             <span class="item" title="Context fill"
               >Context <span class="bar"><span style=${`width: ${percent(agent.contextFill)}`}></span></span>
               ${percent(agent.contextFill)}</span
-            >` : b`<span>No agent</span>`}
-      <button class="link" @click=${() => this.show("changes")}>${changes} ${changes === 1 ? "change" : "changes"}</button>
+            >` : b`<span>No agent</span>`;
+  }
+  #changes() {
+    if (!this.#offers("changes")) return A;
+    const changes = this.model?.files.changes().length ?? 0;
+    return b`<button class="link" @click=${() => this.show("changes")}>${changes} ${changes === 1 ? "change" : "changes"}</button>`;
+  }
+  #status() {
+    return b`<footer role="status" aria-label="Status">
+      ${this.#agentStatus()}
+      ${this.#changes()}
+      <slot name="status"></slot>
       <span class="spacer"></span>
-      <span class="hints"><kbd>F6</kbd> next group · <kbd>Alt+1–${Math.min(9, surfaces.length)}</kbd> panels · <kbd>Alt+Shift+T</kbd> theme</span>
+      <span class="hints"><kbd>F6</kbd> next group · <kbd>Alt+1–${Math.min(9, this.surfaces.length)}</kbd> panels · <kbd>Alt+Shift+T</kbd> theme</span>
     </footer>`;
   }
   render() {
@@ -6785,23 +6973,23 @@ var SliccApp = class extends ThemedElement {
       <div class="shell">
         <header>
           <span class="brand">slicc</span>
-          <sp-picker size="s" label="Agent" value=${this.model?.agent.active() ?? ""} @change=${this.#pick}>
+          ${this.#offers("chat") ? b`<sp-picker size="s" label="Agent" value=${this.model?.agent.active() ?? ""} @change=${this.#pick}>
             ${agents.map(
       (agent) => b`<sp-menu-item value=${agent.id}>${agent.kind === "scoop" ? `\u21B3 ${agent.name}` : agent.name}</sp-menu-item>`
     )}
-          </sp-picker>
+          </sp-picker>` : A}
           <span class="spacer"></span>
-          <slicc-tray .model=${this.model}></slicc-tray>
+          ${this.#offers("chat") ? b`<slicc-tray .model=${this.model}></slicc-tray>` : A}
           <sp-action-menu size="s" quiet label="View" @change=${this.#view}>
             <sp-icon-view-grid slot="icon"></sp-icon-view-grid>
             <span slot="label">View</span>
-            ${surfaces.map((surface2, index) => this.#menuItem(surface2, index))}
+            ${this.surfaces.map((surface2, index) => this.#menuItem(surface2, index))}
             <sp-menu-divider></sp-menu-divider>
             <sp-menu-item value="reset">Reset layout</sp-menu-item>
           </sp-action-menu>
-          <sp-action-button size="s" quiet label="Settings" title="Settings" @click=${() => this.show("settings")}>
+          ${this.#offers("settings") ? b`<sp-action-button size="s" quiet label="Settings" title="Settings" @click=${() => this.show("settings")}>
             <sp-icon-settings slot="icon"></sp-icon-settings>
-          </sp-action-button>
+          </sp-action-button>` : A}
           <sp-action-button
             size="s"
             quiet
@@ -10997,7 +11185,7 @@ var bundledLanguagesInfo = [
   {
     "id": "html",
     "name": "HTML",
-    "import": (() => import("./chunk-YPQKCWWG.js"))
+    "import": (() => import("./chunk-FXM4K5WL.js"))
   },
   {
     "id": "html-derivative",
@@ -61493,8 +61681,16 @@ var SliccFileTree = class extends HTMLElement {
     return this.#paths;
   }
   set paths(value) {
+    const expanded = this.#paths.length > 0 ? this.#expandedNow() : this.#expanded;
     this.#paths = value;
-    this.#tree?.resetPaths(value, { initialExpandedPaths: this.#expanded });
+    this.#tree?.resetPaths(value, { initialExpandedPaths: expanded });
+  }
+  #expandedNow() {
+    const tree = this.#tree;
+    return this.#paths.filter((path) => {
+      const item2 = path.endsWith("/") ? tree?.getItem(path) : null;
+      return !!item2 && "isExpanded" in item2 && item2.isExpanded();
+    }).map((path) => path.slice(0, -1));
   }
   get gitStatus() {
     return this.#status;