@ai-ecoverse/slicc-spectrum 1.73.1 → 1.74.0

package/dist/slicc-ui.js

@@ -10646,7 +10646,7 @@ function watchTitles(model, update) {
   const seen = /* @__PURE__ */ new Map();
   const check3 = (id) => {
     const agent = model.agent.list().find((candidate) => candidate.id === id);
-    if (agent?.kind !== "cone") return;
+    if (!agent) return;
     const title = agentTitle(model, agent);
     if (seen.get(id) === title) return;
     seen.set(id, title);
@@ -11406,11 +11406,25 @@ async function createCone(model, trigger2) {
   if (created) port.select(created.id);
   return created;
 }
+var statusOrder = ["working", "thinking", "waiting", "error", "idle"];
+function scoopSummary(scoops) {
+  if (scoops.length === 0) return "";
+  const counts = statusOrder.map((status2) => [status2, scoops.filter((scoop) => scoop.status === status2).length]).filter(([, count]) => count > 0).map(([status2, count]) => `${count} ${statusLabel[status2].toLowerCase()}`);
+  return `${scoops.length} scoop${scoops.length === 1 ? "" : "s"}: ${counts.join(", ")}`;
+}
+function unreadCount(unread) {
+  return unread > 9 ? "9+" : String(unread);
+}
 function fillShown(fill2) {
   return fill2 >= 0.5;
 }
 var SliccAgents = class extends ModelElement {
   static properties = { ...ModelElement.properties, errors: { state: true } };
+  #expanded = null;
+  #pointer = false;
+  #modality = (event2) => {
+    this.#pointer = event2.type === "pointerdown";
+  };
   constructor() {
     super();
     this.errors = {};
@@ -11419,16 +11433,22 @@ var SliccAgents = class extends ModelElement {
     shared,
     i`
     :host {
-      display: block;
+      display: flex;
+      flex-direction: column;
       height: 100%;
-      overflow-y: auto;
+      overflow: hidden;
       background: var(--swc-background-layer-1-color);
       color: var(--swc-neutral-content-color-default);
       font-size: var(--swc-font-size-100);
     }
+    .list {
+      flex: 1;
+      min-block-size: 0;
+      overflow-y: auto;
+    }
     .actions {
       display: flex;
-      padding: var(--swc-spacing-75) var(--swc-spacing-100) 0;
+      padding: var(--swc-spacing-75) var(--swc-spacing-100);
     }
     ul {
       list-style: none;
@@ -11436,31 +11456,67 @@ var SliccAgents = class extends ModelElement {
       padding: var(--swc-spacing-75) 0;
     }
     li {
+      --row-background: var(--swc-background-layer-1-color);
+      --row-head: 1lh;
+      --row-description: calc(2 * 1.4 * var(--swc-font-size-75));
+      position: relative;
       display: grid;
-      grid-template-columns: minmax(0, 1fr) auto auto auto;
-      grid-template-areas: 'name unread fill drop' 'title unread fill drop' 'status unread fill drop' 'error error error error';
+      grid-template-columns: minmax(0, 1fr) auto;
+      grid-template-areas: 'head fill' 'description description' 'ribbon ribbon' 'error error';
+      grid-template-rows: var(--row-head) var(--row-description) var(--swc-spacing-100);
       align-items: center;
       column-gap: var(--swc-spacing-100);
       padding: var(--swc-spacing-75) var(--swc-spacing-200);
+      background: var(--row-background);
       cursor: pointer;
     }
     li.scoop {
-      grid-template-areas: 'name unread fill drop' 'status unread fill drop' 'error error error error';
       padding-inline-start: calc(var(--swc-spacing-200) + var(--swc-spacing-300));
     }
     li:hover {
-      background: var(--swc-gray-100);
+      --row-background: var(--swc-gray-100);
     }
     li[aria-selected='true'] {
-      background: var(--swc-gray-200);
-      box-shadow: inset var(--swc-spacing-50) 0 0 var(--swc-accent-visual-color);
+      --row-background: var(--swc-gray-200);
     }
     li:focus-visible {
       outline: var(--swc-focus-indicator-thickness) solid var(--swc-focus-indicator-color);
       outline-offset: calc(-1 * var(--swc-focus-indicator-thickness));
     }
+    .head {
+      grid-area: head;
+      display: flex;
+      align-items: center;
+      gap: var(--swc-spacing-75);
+      min-inline-size: 0;
+    }
+    .head > * {
+      flex: none;
+    }
+    .marker {
+      flex: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: var(--swc-spacing-200);
+      block-size: var(--swc-spacing-200);
+      border-radius: var(--swc-corner-radius-full);
+      font-size: var(--swc-font-size-25);
+      font-variant-numeric: tabular-nums;
+      line-height: 1;
+    }
+    .marker.unread {
+      box-sizing: border-box;
+      inline-size: auto;
+      min-inline-size: var(--swc-spacing-200);
+      padding-inline: var(--swc-spacing-50);
+      background: var(--swc-accent-background-color-default);
+      color: var(--swc-white);
+      font-weight: var(--swc-bold-font-weight);
+    }
     .name {
-      grid-area: name;
+      flex: 0 1 auto;
+      min-inline-size: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -11469,29 +11525,58 @@ var SliccAgents = class extends ModelElement {
       font-weight: var(--swc-bold-font-weight);
     }
     .title {
-      grid-area: title;
+      grid-area: description;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
       overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      overflow-wrap: anywhere;
+      line-height: 1.4;
       font-size: var(--swc-font-size-75);
       color: var(--swc-neutral-subdued-content-color-default);
     }
-    .unread {
-      --swc-badge-height: var(--swc-spacing-300);
-      --swc-badge-padding-block: var(--swc-spacing-50);
-      --swc-badge-padding-inline: var(--swc-spacing-75);
-      --swc-badge-corner-radius: var(--swc-spacing-100);
-      --swc-badge-line-height: 1;
-      grid-area: unread;
-      align-self: center;
+    .state {
+      color: var(--swc-neutral-content-color-default);
+    }
+    .ribbon {
+      grid-area: ribbon;
+      display: flex;
+      align-items: center;
+      gap: var(--swc-spacing-50);
+      overflow: hidden;
+    }
+    .status,
+    .segment {
+      background: var(--swc-neutral-visual-color);
+    }
+    .status[data-status='thinking'],
+    .status[data-status='working'],
+    .segment[data-status='thinking'],
+    .segment[data-status='working'] {
+      background: var(--swc-informative-visual-color);
+    }
+    .status[data-status='waiting'],
+    .segment[data-status='waiting'] {
+      background: var(--swc-notice-visual-color);
+    }
+    .status[data-status='error'],
+    .segment[data-status='error'] {
+      background: var(--swc-negative-visual-color);
+    }
+    .segment {
+      flex: none;
+      inline-size: var(--swc-spacing-200);
+      block-size: var(--swc-spacing-50);
+      border-radius: var(--swc-corner-radius-full);
     }
     .fill {
       grid-area: fill;
+      position: relative;
+      z-index: 1;
+      align-self: start;
       font-size: var(--swc-font-size-75);
       font-variant-numeric: tabular-nums;
       color: var(--swc-neutral-subdued-content-color-default);
-      min-width: 4ch;
-      text-align: end;
     }
     .fill[data-variant='notice'] {
       color: var(--swc-notice-color-1000);
@@ -11501,18 +11586,20 @@ var SliccAgents = class extends ModelElement {
       color: var(--swc-negative-color-1000);
       font-weight: var(--swc-bold-font-weight);
     }
-    swc-status-light {
-      grid-area: status;
-      justify-self: start;
-    }
-    .drop {
-      grid-area: drop;
-      margin-block: calc(-1 * var(--swc-spacing-100));
-      visibility: hidden;
+    .drop-cell {
+      position: absolute;
+      inset-block: 0;
+      inset-inline-end: 0;
+      display: flex;
+      align-items: center;
+      padding-inline: var(--swc-spacing-100);
+      background: var(--row-background);
+      opacity: 0;
     }
-    li:hover .drop,
-    li:focus-within .drop {
-      visibility: visible;
+    li:hover .drop-cell,
+    li:focus-visible .drop-cell,
+    .drop-cell[data-shown] {
+      opacity: 1;
     }
     .error {
       grid-area: error;
@@ -11529,23 +11616,46 @@ var SliccAgents = class extends ModelElement {
       white-space: nowrap;
     }
     @media (hover: none), (pointer: coarse) {
-      .drop {
-        visibility: visible;
+      .drop-cell {
+        opacity: 1;
       }
     }
   `
   ];
   subscribe(model) {
+    const focused2 = this.#focused(model);
+    this.#expanded = focused2?.kind === "scoop" ? focused2.parentId : null;
     return [
       model.agent.on("agents", () => this.requestUpdate()),
-      model.agent.on("active", () => this.requestUpdate()),
+      model.agent.on("active", () => {
+        const next = this.#focused(model);
+        if (next) this.#expanded = next.kind === "cone" ? next.id : next.parentId;
+        this.requestUpdate();
+      }),
       watchTitles(model, () => this.requestUpdate()),
-      ...model.follow ? [model.follow.on("follow", () => this.requestUpdate())] : []
+      ...model.follow ? [model.follow.on("follow", () => this.requestUpdate())] : [],
+      this.#watchPointer()
     ];
   }
+  #watchPointer() {
+    const types = ["pointerdown", "keydown"];
+    for (const type of types) globalThis.addEventListener(type, this.#modality, true);
+    return () => {
+      for (const type of types) globalThis.removeEventListener(type, this.#modality, true);
+    };
+  }
+  #focused(model) {
+    return model.agent.list().find((agent) => agent.id === model.agent.active());
+  }
   #select(id) {
     this.model?.agent.select(id);
   }
+  #pick(agent) {
+    const open = agent.kind === "cone" && this.#expanded !== agent.id;
+    this.#select(agent.id);
+    if (agent.kind === "cone") this.#expanded = open ? agent.id : null;
+    this.requestUpdate();
+  }
   focus() {
     this.focusOn('li[tabindex="0"]');
   }
@@ -11564,21 +11674,44 @@ var SliccAgents = class extends ModelElement {
     if (event2.key in moves) {
       event2.preventDefault();
       items[Math.max(0, Math.min(items.length - 1, moves[event2.key]))]?.focus();
-    } else if (event2.key === "Enter" || event2.key === " ") {
+      return;
+    }
+    const agent = this.model?.agent.list().find((item2) => item2.id === items[index]?.dataset.id);
+    if (!agent) return;
+    if (event2.key === "Enter" || event2.key === " ") {
       event2.preventDefault();
-      const id = items[index]?.dataset.id;
-      if (id) this.#select(id);
+      this.#pick(agent);
+    } else if (event2.key === "ArrowRight" && this.#scoops(agent).length > 0) {
+      event2.preventDefault();
+      if (this.#expanded === agent.id) items[index + 1].focus();
+      else this.#pick(agent);
+    } else if (event2.key === "ArrowLeft" && agent.kind === "scoop") {
+      event2.preventDefault();
+      items.find((item2) => item2.dataset.id === agent.parentId)?.focus();
+    } else if (event2.key === "ArrowLeft" && this.#expanded === agent.id) {
+      event2.preventDefault();
+      this.#pick(agent);
     } else if (event2.key === "Delete") {
-      const agent = this.model?.agent.list().find((item2) => item2.id === items[index]?.dataset.id);
-      if (agent && this.#droppable(agent)) {
+      if (this.#droppable(agent)) {
         event2.preventDefault();
         void this.#drop(agent, items[index]);
-      } else if (agent && this.#deletable(agent)) {
+      } else if (this.#deletable(agent)) {
         event2.preventDefault();
         void this.#deleteCone(agent, items[index]);
       }
     }
   }
+  #scoops(agent) {
+    if (agent.kind !== "cone") return [];
+    return this.model.agent.list().filter((other) => other.parentId === agent.id);
+  }
+  #focusin(event2) {
+    const cell = event2.target.closest(".drop-cell");
+    cell?.toggleAttribute("data-shown", !this.#pointer);
+  }
+  #focusout(event2) {
+    event2.target.closest(".drop-cell")?.removeAttribute("data-shown");
+  }
   #droppable(agent) {
     return agent.kind === "scoop" && Boolean(this.model?.agent.drop) && !watchOnly(this.model);
   }
@@ -11616,69 +11749,89 @@ var SliccAgents = class extends ModelElement {
     await this.updateComplete;
     this.focus();
   }
-  #dropButton(agent) {
+  #dropButton(agent, selected) {
     if (!this.#droppable(agent)) return A;
     const id = `drop-${agent.id}`;
     const label = `Drop scoop ${agent.name}`;
-    return b`<swc-action-button
-        id=${id}
-        class="drop"
-        size="l"
-        quiet
-        tabindex="-1"
-        data-action="drop"
-        accessible-label=${label}
-        @click=${(event2) => {
+    return b`<span class="drop-cell"
+        ><swc-action-button
+          id=${id}
+          class="drop"
+          size="l"
+          quiet
+          tabindex=${selected ? "0" : "-1"}
+          data-action="drop"
+          accessible-label=${label}
+          @click=${(event2) => {
       event2.stopPropagation();
       void this.#drop(agent, event2.currentTarget);
     }}
-        ><swc-icon-close slot="icon"></swc-icon-close></swc-action-button
-      ><swc-tooltip for=${id} placement="start">${label}</swc-tooltip>`;
+          ><swc-icon-close slot="icon"></swc-icon-close></swc-action-button
+        ><swc-tooltip for=${id} placement="start">${label}</swc-tooltip></span
+      >`;
   }
-  #deleteButton(agent) {
+  #deleteButton(agent, selected) {
     if (!this.#deletable(agent)) return A;
     const id = `delete-${agent.id}`;
     const label = `Delete cone ${coneLabel(this.model, agent)}`;
-    return b`<swc-action-button
-        id=${id}
-        class="drop"
-        size="l"
-        quiet
-        tabindex="-1"
-        data-action="delete-cone"
-        accessible-label=${label}
-        @click=${(event2) => {
+    return b`<span class="drop-cell"
+        ><swc-action-button
+          id=${id}
+          class="drop"
+          size="l"
+          quiet
+          tabindex=${selected ? "0" : "-1"}
+          data-action="delete-cone"
+          accessible-label=${label}
+          @click=${(event2) => {
       event2.stopPropagation();
       void this.#deleteCone(agent, event2.currentTarget);
     }}
-        ><swc-icon-delete slot="icon"></swc-icon-delete></swc-action-button
-      ><swc-tooltip for=${id} placement="start">${label}</swc-tooltip>`;
+          ><swc-icon-delete slot="icon"></swc-icon-delete></swc-action-button
+        ><swc-tooltip for=${id} placement="start">${label}</swc-tooltip></span
+      >`;
+  }
+  #ribbon(scoops) {
+    if (scoops.length === 0) return A;
+    return b`<span class="ribbon" aria-hidden="true">${scoops.map(
+      (scoop) => b`<span class="segment" data-status=${scoop.status}></span>`
+    )}</span>`;
   }
   #row(agent, active) {
     const selected = agent.id === active;
     const error = this.errors[agent.id];
     const model = this.model;
-    const title = agent.kind === "cone" ? agentTitle(model, agent) : null;
+    const title = agentTitle(model, agent);
+    const scoops = this.#scoops(agent);
+    const open = this.#expanded === agent.id;
     const unread = selected ? 0 : agent.unread;
     const label = `${coneLabel(model, agent)}: ${statusLabel[agent.status]}, ${percent(agent.contextFill)} context${unread ? `, ${unread} unread` : ""}${error ? `. ${error}` : ""}`;
+    const summary = scoopSummary(scoops);
     return b`<li
-      role="option"
+      role="treeitem"
+      id=${`row-${agent.id}`}
       class=${agent.kind}
       data-id=${agent.id}
+      aria-level=${agent.kind === "cone" ? "1" : "2"}
       aria-selected=${selected ? "true" : "false"}
+      aria-expanded=${scoops.length ? String(open) : A}
+      aria-controls=${open && scoops.length ? scoops.map((scoop) => `row-${scoop.id}`).join(" ") : A}
       aria-label=${label}
+      aria-description=${summary || A}
       tabindex=${selected ? "0" : "-1"}
       aria-keyshortcuts=${this.#droppable(agent) || this.#deletable(agent) ? "Delete" : A}
-      title=${label}
-      @click=${() => this.#select(agent.id)}
+      title=${summary ? `${label}. ${summary}` : label}
+      @click=${() => this.#pick(agent)}
     >
-      <span class="name">${agent.name}</span>
-      ${title === null ? A : b`<span class="title">${title || untitled}</span>`}
-      ${unread ? b`<swc-badge class="unread" size="s" variant="accent">${unread}</swc-badge>` : A}
+      <div class="head">
+        ${unread ? b`<span class="marker unread" aria-hidden="true">${unreadCount(unread)}</span>` : b`<span class="marker status" data-status=${agent.status} aria-hidden="true"></span>`}
+        <span class="name">${agent.name}</span>
+      </div>
       ${fillShown(agent.contextFill) ? b`<span class="fill" data-variant=${meterVariant2(agent.contextFill)}>${percent(agent.contextFill)}</span>` : A}
-      ${statusLight(agent.status)}
-      ${this.#dropButton(agent)}
-      ${this.#deleteButton(agent)}
+      <span class="title"><span class="state">${statusLabel[agent.status]}</span> · ${title || untitled}</span>
+      ${this.#ribbon(scoops)}
+      ${this.#dropButton(agent, selected)}
+      ${this.#deleteButton(agent, selected)}
       ${error ? b`<span class="error">${error}</span>` : A}
     </li>`;
   }
@@ -11696,12 +11849,15 @@ var SliccAgents = class extends ModelElement {
     </div>`;
   }
   render() {
-    const agents = ordered(this.model?.agent.list() ?? []);
+    const list5 = this.model?.agent.list() ?? [];
     const active = this.model?.agent.active() ?? "";
     const errors = Object.values(this.errors);
-    return b`${this.#actions()}<ul role="listbox" aria-label="Cones and scoops" @keydown=${this.#keydown}>
-        ${agents.map((agent) => this.#row(agent, active))}
-      </ul>
+    const rows = ordered(list5).filter(
+      (agent) => agent.kind === "cone" || agent.parentId === this.#expanded
+    );
+    return b`<div class="list"><ul role="tree" aria-label="Cones and scoops" @keydown=${this.#keydown} @focusin=${this.#focusin} @focusout=${this.#focusout}>
+        ${rows.map((agent) => this.#row(agent, active))}
+      </ul></div>${this.#actions()}
       <div class="sr" role="status">${errors.at(-1) ?? ""}</div>`;
   }
 };
@@ -30847,6 +31003,20 @@ function user(message, stamp = true) {
     </div>
   </swc-conversation-turn>`;
 }
+var toolLoaders = {
+  edit: "pencil",
+  read: "page",
+  search: "mag",
+  browser: "eye"
+};
+function statusLoader(message) {
+  if (message.parts.at(-1)?.type !== "tool") return "aiLogo";
+  const running2 = message.parts.findLast(
+    (part2) => part2.type === "tool" && part2.tool.status === "running"
+  );
+  if (running2?.type !== "tool") return "aiLogo";
+  return toolLoaders[toolKind(running2.tool.name).id] ?? "hourglass";
+}
 var people = /* @__PURE__ */ new Set(["follower", "guest"]);
 function byline(message, who2, stamp) {
   if (!who2 && !stamp) return A;
@@ -30861,7 +31031,7 @@ function status(message) {
   }
   if (message.status !== "streaming") return A;
   const calls = message.parts.flatMap((entry) => entry.type === "tool" ? [entry.tool] : []);
-  return b`<swc-response-status slot="status" status="active">
+  return b`<swc-response-status slot="status" status="active" loader=${statusLoader(message)}>
     ${calls.map((call) => b`<swc-response-status-step status=${stepStates[call.status]}><span slot="label">${call.name} ${call.title}</span></swc-response-status-step>`)}
   </swc-response-status>`;
 }
@@ -36087,7 +36257,8 @@ var SliccChat = class extends ThemedElement {
         min-height: 0;
         overflow-y: auto;
         container-type: inline-size;
-        padding: var(--swc-spacing-400) var(--swc-spacing-300) var(--swc-spacing-500);
+        padding: var(--swc-spacing-400) var(--swc-spacing-300) calc(var(--composer-height, 0px) + var(--swc-spacing-500));
+        scroll-padding-block-end: calc(var(--composer-height, 0px) + var(--swc-spacing-200));
         font-size: var(--swc-font-size-200);
       }
       @container (min-width: 600px) {
@@ -36200,6 +36371,11 @@ var SliccChat = class extends ThemedElement {
     return last?.role === "user" && last.id !== this.#tail && (last.origin ?? "user") === "user";
   }
   #resize = new ResizeObserver(() => this.#pin());
+  #fitted = null;
+  #fit = new ResizeObserver(([entry]) => {
+    this.style.setProperty("--composer-height", `${entry.target.offsetHeight}px`);
+    this.#pin();
+  });
   #log() {
     return this.renderRoot.querySelector(".log");
   }
@@ -36254,8 +36430,20 @@ var SliccChat = class extends ThemedElement {
     const log = this.#log();
     this.#resize.observe(log);
     this.#resize.observe(log.firstElementChild);
+    this.#attach();
     this.#refresh(true);
   }
+  #attach() {
+    const composer = this.renderRoot.querySelector("slicc-composer");
+    if (composer === this.#fitted) return;
+    this.#fit.disconnect();
+    this.#fitted = composer;
+    if (composer) this.#fit.observe(composer);
+    else this.style.setProperty("--composer-height", "0px");
+  }
+  updated() {
+    this.#attach();
+  }
   connectedCallback() {
     super.connectedCallback();
     globalThis.addEventListener("pointerup", this.#release, true);
@@ -36267,6 +36455,8 @@ var SliccChat = class extends ThemedElement {
     globalThis.removeEventListener("pointerup", this.#release, true);
     globalThis.removeEventListener("pointercancel", this.#release, true);
     this.#resize.disconnect();
+    this.#fit.disconnect();
+    this.#fitted = null;
     clearTimeout(this.#settle);
   }
   firstUpdated() {
@@ -37720,6 +37910,7 @@ var SliccComposer = class extends ThemedElement {
     attachments: { state: true },
     popup: { state: true },
     dictating: { state: true },
+    erasing: { state: true },
     blocked: { state: true },
     sharing: { state: true },
     secretError: { state: true },
@@ -37733,6 +37924,7 @@ var SliccComposer = class extends ThemedElement {
   #next = 1;
   #abandon;
   #recognition = null;
+  #erase;
   #keys = { capture: true, handleEvent: (event2) => this.#keydown(event2) };
   constructor() {
     super();
@@ -37740,6 +37932,7 @@ var SliccComposer = class extends ThemedElement {
     this.attachments = [];
     this.popup = null;
     this.dictating = false;
+    this.erasing = false;
     this.blocked = false;
     this.sharing = false;
     this.secretError = null;
@@ -37751,11 +37944,49 @@ var SliccComposer = class extends ThemedElement {
     i`
       :host {
         display: block;
-        flex: none;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 2;
         padding: var(--swc-spacing-100) var(--swc-spacing-200) var(--swc-spacing-200);
-        background: var(--swc-background-layer-1-color);
         font-size: var(--swc-font-size-100);
-        position: relative;
+      }
+      :host::before {
+        content: '';
+        position: absolute;
+        top: -72px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: -1;
+        pointer-events: none;
+        background: color-mix(in srgb, var(--swc-background-layer-1-color) 72%, transparent);
+        backdrop-filter: blur(16px) saturate(1.4);
+        -webkit-backdrop-filter: blur(16px) saturate(1.4);
+        mask-image: linear-gradient(to bottom, transparent, black 72px);
+        -webkit-mask-image: linear-gradient(to bottom, transparent, black 72px);
+      }
+      @media (prefers-reduced-transparency: reduce) {
+        :host::before {
+          top: 0;
+          background: var(--swc-background-layer-1-color);
+          backdrop-filter: none;
+          -webkit-backdrop-filter: none;
+          mask-image: none;
+          -webkit-mask-image: none;
+        }
+      }
+      @media (forced-colors: active) {
+        :host::before {
+          top: 0;
+          background: Canvas;
+          backdrop-filter: none;
+          -webkit-backdrop-filter: none;
+          mask-image: none;
+          -webkit-mask-image: none;
+          border-block-start: var(--swc-border-width-100) solid CanvasText;
+        }
       }
       .column {
         max-width: 860px;
@@ -37863,28 +38094,6 @@ var SliccComposer = class extends ThemedElement {
         margin: var(--swc-spacing-75) auto 0;
         min-height: var(--swc-component-height-75);
       }
-      .hint {
-        display: flex;
-        flex: 1;
-        flex-wrap: wrap;
-        align-items: center;
-        min-width: 0;
-        max-block-size: var(--swc-component-height-75);
-        overflow: hidden;
-        font-size: var(--swc-font-size-75);
-        color: var(--swc-neutral-subdued-content-color-default);
-      }
-      .hint > span {
-        display: flex;
-        align-items: center;
-        block-size: var(--swc-component-height-75);
-        gap: var(--swc-spacing-50);
-        white-space: nowrap;
-      }
-      .hint > span + span::before {
-        content: '·';
-        padding-inline-start: var(--swc-spacing-75);
-      }
       .below swc-action-button {
         margin-inline-start: auto;
       }
@@ -37898,11 +38107,6 @@ var SliccComposer = class extends ThemedElement {
         --swc-action-button-content-color-down: var(--swc-gray-25);
         --swc-action-button-content-color-focus: var(--swc-gray-25);
       }
-      @media (pointer: coarse), (hover: none) {
-        .hint {
-          display: none;
-        }
-      }
       .popup {
         position: absolute;
         left: 0;
@@ -38037,6 +38241,8 @@ var SliccComposer = class extends ThemedElement {
       popover.triggerElement = field.shadowRoot.querySelector(
         ".swc-PromptField-upload"
       );
+      const area = this.#textarea;
+      area.ariaDescribedByElements = [this.renderRoot.querySelector("#keys")];
     });
   }
   subscribe(model) {
@@ -38361,6 +38567,7 @@ var SliccComposer = class extends ThemedElement {
   #keydown(event2) {
     const area = this.#textarea;
     if (event2.isComposing || !area || event2.composedPath()[0] !== area) return;
+    if (event2.key === "Backspace" || event2.key === "Delete") this.#flash();
     const sendOnEnter = this.model?.settings.get().sendOnEnter ?? true;
     let handled = this.#popupKey(event2) || this.#historyKey(event2, area);
     if (!handled && event2.key === "Tab" && !event2.shiftKey && !this.value) {
@@ -38381,6 +38588,29 @@ var SliccComposer = class extends ThemedElement {
     if (handled) event2.preventDefault();
     if (handled || event2.key === "Enter") event2.stopPropagation();
   }
+  #flash() {
+    if (!this.value) return;
+    this.erasing = true;
+    clearTimeout(this.#erase);
+    this.#erase = setTimeout(() => this.erasing = false, 700);
+  }
+  #loader(busy) {
+    if (busy) return "aiLogo";
+    if (this.dictating) return "microphone";
+    if (this.erasing) return "brush";
+    return this.value ? "pencil" : "aiLogo";
+  }
+  #instructions(busy) {
+    const enter = this.model?.settings.get().sendOnEnter ?? true;
+    const keys = enter ? [`Enter ${busy ? "steers" : "sends"}`, ...busy ? ["Ctrl+Enter queues"] : []] : [`Ctrl+Enter ${busy ? "queues" : "sends"}`];
+    if (busy) keys.push("Escape stops");
+    keys.push(
+      `${enter ? "Shift+Enter" : "Enter"} adds a new line`,
+      "/ lists commands",
+      "@ mentions"
+    );
+    return `${keys.join(", ")}.`;
+  }
   #input(event2) {
     this.value = event2.detail.value;
     this.#history = -1;
@@ -38570,16 +38800,17 @@ var SliccComposer = class extends ThemedElement {
     const speech = "SpeechRecognition" in globalThis || "webkitSpeechRecognition" in globalThis;
     const held = this.#held();
     return b`<div class="column">
+        <span id="keys" class="sr" aria-hidden="true">${this.#instructions(busy)}</span>
         ${this.#hold()}
         ${this.#queue()}
         ${this.#popup()}
         <swc-prompt-field
           label="Message"
+          loader=${this.#loader(busy)}
           upload-label="Add"
           stop-label="Stop"
           send-label=${busy ? "Steer" : "Send"}
           max-rows="10"
-          animate-loader
           ?generating=${busy && !canSend}
           ?disabled=${!!held}
           placeholder=${held ? `Reconnecting to ${held}\u2026` : suggestion ? `${suggestion}  (Tab)` : `Message ${agent?.name ?? ""}`}
@@ -38612,24 +38843,16 @@ var SliccComposer = class extends ThemedElement {
       input.value = "";
     }} />
       </div>
-      <div class="below">
-        <div class="hint">
-          <span><kbd>Enter</kbd> ${busy ? "steer" : "send"}</span>
-          ${busy ? b`<span><kbd>Ctrl+Enter</kbd> queue</span><span><kbd>Esc</kbd> stop</span>` : A}
-          <span><kbd>/</kbd> commands</span>
-          <span><kbd>@</kbd> mention</span>
-          <span><kbd>Shift+Enter</kbd> new line</span>
-          <span><kbd>↑</kbd> history</span>
-        </div>
-        ${speech ? b`<swc-action-button
+      ${speech ? b`<div class="below">
+              <swc-action-button
                 size="s"
                 quiet
                 class=${this.dictating ? "selected" : ""}
                 accessible-label=${this.dictating ? "Stop dictation" : "Dictate"}
                 data-action="dictate"
                 @click=${() => this.dictate()}
-              ><swc-icon-microphone slot="icon"></swc-icon-microphone></swc-action-button>` : A}
-      </div>`;
+              ><swc-icon-microphone slot="icon"></swc-icon-microphone></swc-action-button>
+            </div>` : A}`;
   }
 };
 
@@ -41043,12 +41266,13 @@ var bridge = `(() => {
       }
       node.replaceWith(svg);
     }
+    size();
   };
   const fonts = (list) => {
     for (const font of list) {
       const face = new FontFace(font.family, font.data, { weight: String(font.weight) });
       document.fonts.add(face);
-      face.load().catch(() => {});
+      face.load().then(size, () => {});
     }
   };
   addEventListener('message', (event) => {
@@ -41064,6 +41288,7 @@ var bridge = `(() => {
   };
   document.addEventListener('DOMContentLoaded', () => {
     window.LucideIcons.render();
+    size();
     new ResizeObserver(size).observe(document.body);
   });
   post({ type: 'slicc-ready' });