@ai-ecoverse/slicc-spectrum 1.36.0 → 1.37.0

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();
@@ -16803,14 +16803,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 +16844,36 @@ 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;
+      }
       .repo {
         display: flex;
         gap: var(--swc-spacing-100);
@@ -16989,10 +17034,35 @@ 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>
@@ -19758,12 +19828,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 +20388,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 +20517,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 +22004,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 +22195,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 +22496,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 +22516,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 +22798,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 +33083,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 +33116,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 +33130,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 +33158,7 @@ function parseSequence(sequence) {
       }
     });
   }
-  return commands2;
+  return commands3;
 }
 function createAnsiSequenceParser() {
   let foreground = null;
@@ -33062,15 +33177,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);
       }