@ai-ecoverse/slicc-spectrum 1.36.0 → 1.37.1

package/dist/slicc-ui.js

@@ -10682,9 +10682,8 @@ var SliccNetwork = class extends ModelElement {
         margin: 0 auto;
         box-sizing: border-box;
       }
-      .page:focus-visible {
-        outline: var(--swc-focus-indicator-thickness) solid var(--swc-focus-indicator-color);
-        outline-offset: calc(-1 * var(--swc-focus-indicator-thickness));
+      .page:focus {
+        outline: none;
       }
       section {
         display: grid;
@@ -14498,6 +14497,7 @@ e25("swc-progress-bar", o56);
 var states = {
   current: ["neutral", "Up to date"],
   queued: ["neutral", "Waiting"],
+  starting: ["info", "Starting"],
   checking: ["info", "Checking"],
   downloading: ["info", "Downloading"],
   linking: ["info", "Linking"],
@@ -14528,7 +14528,7 @@ function updatesStatus(items) {
   if (items.some((item2) => item2.state === "ready" || item2.state === "available")) {
     return "update ready";
   }
-  return null;
+  return items.some((item2) => item2.state === "starting") ? "starting" : null;
 }
 var UpdateVisibility = class {
   #boot;
@@ -14579,9 +14579,8 @@ var SliccUpdates = class extends ModelElement {
         padding: var(--swc-spacing-400);
         margin: 0 auto;
       }
-      .page:focus-visible {
-        outline: var(--swc-focus-indicator-thickness) solid var(--swc-focus-indicator-color);
-        outline-offset: calc(-1 * var(--swc-focus-indicator-thickness));
+      .page:focus {
+        outline: none;
       }
       .hint {
         margin: 0 0 var(--swc-spacing-300);
@@ -14733,7 +14732,7 @@ var SliccUpdates = class extends ModelElement {
         accessible-label=${`${item2.label}: ${progress.phase === "download" ? "downloading" : "linking"}`}
       ></swc-progress-bar>`;
     }
-    if (!running.has(item2.state)) return A;
+    if (!running.has(item2.state) && item2.state !== "starting") return A;
     return b`<swc-progress-bar
       size="s"
       indeterminate
@@ -14772,7 +14771,7 @@ var SliccUpdates = class extends ModelElement {
       </div>
       <div class="meta">
         <span class="version">${item2.from ?? "Not installed"}${item2.to && item2.to !== item2.from ? b` → ${item2.to}` : A}</span>
-        ${this.#checked(item2.checkedAt)}
+        ${item2.state === "starting" ? A : this.#checked(item2.checkedAt)}
       </div>
       ${this.#progress(item2)}
       ${error ? b`<div class="error" role="alert">
@@ -14818,6 +14817,7 @@ function railCapacity(width, count) {
 function updatesVariant(status2) {
   if (status2.endsWith("failed")) return "negative";
   if (status2.startsWith("updating")) return "info";
+  if (status2 === "starting") return "neutral";
   return "notice";
 }
 var overscrollLocks = /* @__PURE__ */ new WeakMap();
@@ -15145,12 +15145,14 @@ var SliccApp = class extends ThemedElement {
       const restored = this.dock.api.getPanel("updates");
       if (restored) this.dock.reveal("updates");
       else this.show("updates");
-      if (!port.ready() && restored?.params?.boot !== false) {
-        this.dock.api.getPanel("updates")?.api.updateParameters({ boot: true });
-        this.#save();
-      }
+      const panel = this.dock.api.getPanel("updates");
+      if (!port.ready() && restored?.params?.boot !== false)
+        panel?.api.updateParameters({ boot: true });
+      else if (!restored) panel?.api.updateParameters({ boot: void 0 });
+      this.#save();
     } else if (this.dock.api.getPanel("updates")?.params?.boot && port.ready() && !port.list().some((item2) => item2.state === "failed")) {
       this.dock.close("updates");
+      this.#save();
     }
   }
   #factories(model) {
@@ -16803,14 +16805,29 @@ function groups(changes) {
   }
   return [...byRepo];
 }
+function commands(text2) {
+  const parts2 = text2.split("`").map((part2, index) => index % 2 ? { code: part2 } : part2);
+  if (parts2.length % 2 === 0) return { parts: [text2], codes: [] };
+  const codes = parts2.flatMap(
+    (part2) => typeof part2 === "string" || !part2.code ? [] : [part2.code]
+  );
+  return { parts: parts2, codes: [...new Set(codes)] };
+}
 function errorLine(error) {
   return b`<div class="error" role="status" aria-live="polite">${error ? b`<swc-icon-alert-diamond size="s" aria-hidden="true"></swc-icon-alert-diamond><span>${error}</span>` : A}</div>`;
 }
 var SliccChanges = class extends ModelElement {
-  static properties = { ...ModelElement.properties, error: { state: true } };
+  static properties = {
+    ...ModelElement.properties,
+    error: { state: true },
+    copied: { state: true },
+    uncopied: { state: true }
+  };
   constructor() {
     super();
     this.error = "";
+    this.copied = "";
+    this.uncopied = false;
   }
   static styles = [
     shared,
@@ -16829,6 +16846,50 @@ var SliccChanges = class extends ModelElement {
         padding: 0;
         overflow: visible;
       }
+      .unavailable {
+        display: grid;
+        gap: var(--swc-spacing-200);
+        align-content: start;
+        padding: var(--swc-spacing-300);
+        overflow-y: auto;
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
+      .unavailable p {
+        margin: 0;
+      }
+      .command {
+        display: flex;
+        align-items: center;
+        gap: var(--swc-spacing-100);
+        padding: var(--swc-spacing-75) var(--swc-spacing-75) var(--swc-spacing-75) var(--swc-spacing-200);
+        border-radius: var(--swc-corner-radius-medium-default);
+        background: var(--swc-background-layer-1-color);
+      }
+      code {
+        overflow-wrap: anywhere;
+        font-family: var(--swc-code-font-family-stack);
+        font-size: var(--swc-font-size-75);
+        color: var(--swc-code-color);
+      }
+      .command code {
+        flex: 1;
+        min-width: 0;
+        user-select: all;
+      }
+      p code {
+        display: inline-block;
+        max-inline-size: 100%;
+        font-size: var(--swc-font-size-50);
+        color: inherit;
+      }
+      .summary {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .bar swc-action-button {
+        flex: none;
+      }
       .repo {
         display: flex;
         gap: var(--swc-spacing-100);
@@ -16977,7 +17038,7 @@ var SliccChanges = class extends ModelElement {
   }
   #list(changes) {
     const grouped = groups(changes);
-    if (grouped.length < 2)
+    if (grouped.length === 1 && !grouped[0][0])
       return b`<ul aria-label="Pending changes" @keydown=${this.#keydown}>${changes.map((change) => this.#row(change))}</ul>`;
     return b`<ul aria-label="Pending changes" @keydown=${this.#keydown}>${grouped.map(
       ([repo, items]) => b`<li data-repo=${repo}>
@@ -16989,13 +17050,38 @@ var SliccChanges = class extends ModelElement {
       </li>`
     )}</ul>`;
   }
+  async copy(code2) {
+    try {
+      await globalThis.navigator.clipboard.writeText(code2);
+      this.copied = code2;
+      this.uncopied = false;
+    } catch {
+      this.copied = "";
+      this.uncopied = true;
+    }
+  }
+  #unavailable(text2) {
+    const { parts: parts2, codes } = commands(text2);
+    return b`<div class="unavailable">
+      <p data-unavailable>${parts2.map((part2) => typeof part2 === "string" ? part2 : b`<code>${part2.code}</code>`)}</p>
+      ${codes.map(
+      (code2) => b`<div class="command" data-command=${code2}>
+          <code>${code2}</code>
+          <swc-action-button size="s" quiet data-action="copy-command" accessible-label=${this.copied === code2 ? "Copied" : `Copy ${code2}`} @click=${() => this.copy(code2)}>
+            <swc-icon-copy slot="icon"></swc-icon-copy>${this.copied === code2 ? "Copied" : "Copy"}
+          </swc-action-button>
+        </div>`
+    )}
+      ${this.uncopied ? b`<div class="error" role="alert" data-error="copy"><swc-icon-alert-diamond size="s" aria-hidden="true"></swc-icon-alert-diamond><span>Couldn’t copy. Select the command and copy it.</span></div>` : A}
+    </div>`;
+  }
   render() {
     const port = this.model ? changesOf(this.model) : null;
     const unavailable = port?.unavailable?.() ?? null;
-    if (unavailable) return b`<div class="note" data-unavailable>${unavailable}</div>`;
+    if (unavailable) return this.#unavailable(unavailable);
     const changes = port?.changes() ?? [];
     return b`<div class="bar">
-        <span>${changes.length} pending ${changes.length === 1 ? "change" : "changes"}</span>
+        <span class="summary">${changes.length} pending ${changes.length === 1 ? "change" : "changes"}</span>
         <span class="spacer"></span>
         ${changes.length ? b`<swc-action-button size="s" quiet @click=${() => this.#all("accept")}>Accept all</swc-action-button>
               <swc-action-button size="s" quiet @click=${() => this.#all("revert")}>Revert all</swc-action-button>` : A}
@@ -17020,9 +17106,26 @@ var SliccDiffPanel = class extends ThemedElement {
         flex: 1;
         min-height: 0;
       }
-      swc-action-group {
+      :host {
+        container-type: inline-size;
+      }
+      swc-action-group,
+      .bar swc-action-button {
         flex: none;
       }
+      .bar .path {
+        min-width: 0;
+      }
+      @container (width < 480px) {
+        .bar .label {
+          position: absolute;
+          inline-size: 1px;
+          block-size: 1px;
+          overflow: hidden;
+          clip-path: inset(50%);
+          white-space: nowrap;
+        }
+      }
       swc-action-button.selected {
         --swc-action-button-background-color-default: var(--swc-neutral-background-color-selected-default);
         --swc-action-button-background-color-hover: var(--swc-neutral-background-color-selected-hover);
@@ -17076,7 +17179,7 @@ var SliccDiffPanel = class extends ThemedElement {
     return b`<div class="bar">
         ${statusMark(change.status, false)}
         <span class="path" title=${this.path}>${this.path}</span>
-        <span>${statusLabels[change.status]}${by ? ` by ${by}` : ""}</span>
+        <span class="label">${statusLabels[change.status]}${by ? ` by ${by}` : ""}</span>
         <span class="spacer"></span>
         ${change.before === null && change.after === null ? A : b`<swc-action-group size="s" compact accessible-label="Diff layout">
           ${layouts.map(
@@ -17089,11 +17192,11 @@ var SliccDiffPanel = class extends ThemedElement {
               >`
     )}
         </swc-action-group>`}
-        <swc-action-button size="s" quiet @click=${() => port?.accept(this.path)}>
-          <swc-icon-checkmark slot="icon"></swc-icon-checkmark>Accept
+        <swc-action-button size="s" quiet data-action="accept" accessible-label="Accept" title="Accept" @click=${() => port?.accept(this.path)}>
+          <swc-icon-checkmark slot="icon"></swc-icon-checkmark><span class="label">Accept</span>
         </swc-action-button>
-        <swc-action-button size="s" quiet @click=${() => this.#revert(port, change)}>
-          <swc-icon-revert slot="icon"></swc-icon-revert>Revert
+        <swc-action-button size="s" quiet data-action="revert" accessible-label="Revert" title="Revert" @click=${() => this.#revert(port, change)}>
+          <swc-icon-revert slot="icon"></swc-icon-revert><span class="label">Revert</span>
         </swc-action-button>
       </div>
       ${errorLine(this.error)}
@@ -19758,12 +19861,15 @@ function tool(call, color = "light") {
   const kind = toolKind(call.name);
   return b`<details class="tool" data-status=${call.status} data-tool=${call.name} data-kind=${kind.id}>
     <summary>
-      <swc-icon-chevron-right class="chevron" size="s" aria-hidden="true"></swc-icon-chevron-right>
-      <span class="kind">${kind.icon}</span>
-      <span class="title">${call.title}</span>
-      <span class="name">${call.name}</span>
-      ${call.meta ? b`<span class="tool-meta">${call.meta}</span>` : A}
-      ${state(call.status)}
+      <span class="head">
+        <swc-icon-chevron-right class="chevron" size="s" aria-hidden="true"></swc-icon-chevron-right>
+        <span class="kind">${kind.icon}</span>
+        <span class="title">${call.title}</span>
+        <span class="name">${call.name}</span>
+        ${call.meta ? b`<span class="tool-meta">${call.meta}</span>` : A}
+        ${state(call.status)}
+      </span>
+      ${call.image ? b`<span class="thumb"><img src=${call.image} alt="" /></span>` : A}
     </summary>
     <div class="call">
       ${body(call, color)}
@@ -20315,6 +20421,18 @@ var messageCss = i`
   :is(details.tool, details.cluster) > summary {
     padding-inline: var(--swc-spacing-100);
   }
+  details.tool > summary {
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: center;
+    gap: 0;
+  }
+  details.tool > summary > .head {
+    display: flex;
+    align-items: center;
+    gap: var(--swc-spacing-100);
+    min-inline-size: 0;
+  }
   :is(details.tool, details.cluster) > summary:hover {
     background: var(--swc-gray-100);
   }
@@ -20432,6 +20550,19 @@ var messageCss = i`
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
+  .thumb {
+    padding-inline-start: calc(var(--swc-spacing-100) + var(--swc-spacing-300));
+    padding-block: var(--swc-spacing-75);
+  }
+  .thumb img {
+    display: block;
+    max-inline-size: min(100%, calc(var(--swc-spacing-1000) * 2));
+    max-block-size: calc(var(--swc-spacing-1000) * 1.25);
+    border-radius: var(--swc-corner-radius-75);
+  }
+  details[open] > summary .thumb {
+    display: none;
+  }
   .shot {
     display: block;
     max-inline-size: min(100%, calc(var(--swc-spacing-1000) * 5));
@@ -21906,9 +22037,9 @@ e25("swc-icon-clock", o70);
 // src/app/composer.ts
 var limit = 25 * 1024 * 1024;
 function available(model) {
-  return commands.filter((command2) => command2.available?.(model) ?? true);
+  return commands2.filter((command2) => command2.available?.(model) ?? true);
 }
-var commands = [
+var commands2 = [
   {
     name: "clear",
     detail: "Start a new chat",
@@ -22097,14 +22228,27 @@ var SliccComposer = class extends ModelElement {
         min-height: var(--swc-component-height-75);
       }
       .hint {
+        display: flex;
         flex: 1;
+        flex-wrap: wrap;
+        align-items: center;
         min-width: 0;
-        white-space: nowrap;
+        max-block-size: var(--swc-component-height-75);
         overflow: hidden;
-        text-overflow: ellipsis;
         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;
       }
@@ -22385,7 +22529,7 @@ var SliccComposer = class extends ModelElement {
     }
     if (kind === "argument") {
       const name = this.value.match(/^\/(\w+)/)?.[1];
-      return filter(commands.find((command2) => command2.name === name)?.args?.(model) ?? [], query);
+      return filter(commands2.find((command2) => command2.name === name)?.args?.(model) ?? [], query);
     }
     const files = this.#paths.map((path) => ({
       value: path,
@@ -22405,7 +22549,7 @@ var SliccComposer = class extends ModelElement {
     if (this.popup?.kind === "file" || this.popup?.kind === "secret") return;
     const found = trigger(this.value, area.selectionStart ?? this.value.length);
     const name = this.value.match(/^\/(\w+)/)?.[1];
-    const takes = commands.some((command2) => command2.name === name && command2.args);
+    const takes = commands2.some((command2) => command2.name === name && command2.args);
     this.popup = found && (found.kind !== "argument" || takes) ? { ...found, items: this.#choices(found.kind, found.query), index: 0 } : null;
   }
   openPopup(kind) {
@@ -22687,8 +22831,12 @@ var SliccComposer = class extends ModelElement {
       </div>
       <div class="below">
         <div class="hint">
-          <kbd>Enter</kbd> ${busy ? "steer" : "send"} · <kbd>Ctrl+Enter</kbd> queue · <kbd>Shift+Enter</kbd> new line · <kbd>/</kbd> commands ·
-          <kbd>@</kbd> mention · <kbd>↑</kbd> history${busy ? b` · <kbd>Esc</kbd> stop` : A}
+          <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
                 size="s"
@@ -32968,31 +33116,31 @@ function parseColor(sequence) {
   }
 }
 function parseSequence(sequence) {
-  const commands2 = [];
+  const commands3 = [];
   while (sequence.length > 0) {
     const code2 = sequence.shift();
     if (!code2) continue;
     const codeInt = Number.parseInt(code2);
     if (Number.isNaN(codeInt)) continue;
-    if (codeInt === 0) commands2.push({ type: "resetAll" });
+    if (codeInt === 0) commands3.push({ type: "resetAll" });
     else if (codeInt <= 9) {
-      if (decorations[codeInt]) commands2.push({
+      if (decorations[codeInt]) commands3.push({
         type: "setDecoration",
         value: decorations[codeInt]
       });
     } else if (codeInt <= 29) {
       const decoration = decorations[codeInt - 20];
       if (decoration) {
-        commands2.push({
+        commands3.push({
           type: "resetDecoration",
           value: decoration
         });
-        if (decoration === "dim") commands2.push({
+        if (decoration === "dim") commands3.push({
           type: "resetDecoration",
           value: "bold"
         });
       }
-    } else if (codeInt <= 37) commands2.push({
+    } else if (codeInt <= 37) commands3.push({
       type: "setForegroundColor",
       value: {
         type: "named",
@@ -33001,12 +33149,12 @@ function parseSequence(sequence) {
     });
     else if (codeInt === 38) {
       const color = parseColor(sequence);
-      if (color) commands2.push({
+      if (color) commands3.push({
         type: "setForegroundColor",
         value: color
       });
-    } else if (codeInt === 39) commands2.push({ type: "resetForegroundColor" });
-    else if (codeInt <= 47) commands2.push({
+    } else if (codeInt === 39) commands3.push({ type: "resetForegroundColor" });
+    else if (codeInt <= 47) commands3.push({
       type: "setBackgroundColor",
       value: {
         type: "named",
@@ -33015,27 +33163,27 @@ function parseSequence(sequence) {
     });
     else if (codeInt === 48) {
       const color = parseColor(sequence);
-      if (color) commands2.push({
+      if (color) commands3.push({
         type: "setBackgroundColor",
         value: color
       });
-    } else if (codeInt === 49) commands2.push({ type: "resetBackgroundColor" });
-    else if (codeInt === 53) commands2.push({
+    } else if (codeInt === 49) commands3.push({ type: "resetBackgroundColor" });
+    else if (codeInt === 53) commands3.push({
       type: "setDecoration",
       value: "overline"
     });
-    else if (codeInt === 55) commands2.push({
+    else if (codeInt === 55) commands3.push({
       type: "resetDecoration",
       value: "overline"
     });
-    else if (codeInt >= 90 && codeInt <= 97) commands2.push({
+    else if (codeInt >= 90 && codeInt <= 97) commands3.push({
       type: "setForegroundColor",
       value: {
         type: "named",
         name: namedColors[codeInt - 90 + 8]
       }
     });
-    else if (codeInt >= 100 && codeInt <= 107) commands2.push({
+    else if (codeInt >= 100 && codeInt <= 107) commands3.push({
       type: "setBackgroundColor",
       value: {
         type: "named",
@@ -33043,7 +33191,7 @@ function parseSequence(sequence) {
       }
     });
   }
-  return commands2;
+  return commands3;
 }
 function createAnsiSequenceParser() {
   let foreground = null;
@@ -33062,15 +33210,15 @@ function createAnsiSequenceParser() {
         decorations: new Set(decorations2)
       });
       if (findResult.sequence) {
-        const commands2 = parseSequence(findResult.sequence);
-        for (const styleToken of commands2) if (styleToken.type === "resetAll") {
+        const commands3 = parseSequence(findResult.sequence);
+        for (const styleToken of commands3) if (styleToken.type === "resetAll") {
           foreground = null;
           background = null;
           decorations2.clear();
         } else if (styleToken.type === "resetForegroundColor") foreground = null;
         else if (styleToken.type === "resetBackgroundColor") background = null;
         else if (styleToken.type === "resetDecoration") decorations2.delete(styleToken.value);
-        for (const styleToken of commands2) if (styleToken.type === "setForegroundColor") foreground = styleToken.value;
+        for (const styleToken of commands3) if (styleToken.type === "setForegroundColor") foreground = styleToken.value;
         else if (styleToken.type === "setBackgroundColor") background = styleToken.value;
         else if (styleToken.type === "setDecoration") decorations2.add(styleToken.value);
       }