@ai-ecoverse/slicc-spectrum 1.62.2 → 1.63.0

package/dist/slicc-ui.js

@@ -13845,13 +13845,16 @@ function table(rows) {
 var done = (result, note = "") => result.code === 0 ? { stdout: `${result.message}${note}
 `, stderr: "", code: 0 } : { stdout: "", stderr: `panel: ${result.message}
 `, code: result.code };
+function closedWhen(ago2) {
+  return ago2 < 5e3 ? "just now" : `${Math.round(ago2 / 1e3)} s ago`;
+}
 function act(scope, parsed) {
   const { panels, reachable: reachable2, cone } = scope;
   if (parsed.verb === "reset") {
     const recent = scope.agent ? panels.recentClose() : null;
     if (recent)
       return refusedOutput(
-        `the user closed ${recent.id} ${Math.round(recent.ago / 1e3)} s ago; ask before resetting the layout`
+        `the user closed ${recent.id} ${closedWhen(recent.ago)}; ask before resetting the layout`
       );
     return done(panels.reset());
   }
@@ -13867,9 +13870,7 @@ function act(scope, parsed) {
   if (parsed.verb === "close") return done(panels.close(id));
   const ago2 = scope.agent && !panels.find(id)?.open ? panels.closedAgo(id) : null;
   if (ago2 !== null)
-    return refusedOutput(
-      `the user closed ${id} ${Math.round(ago2 / 1e3)} s ago; ask before opening it again`
-    );
+    return refusedOutput(`the user closed ${id} ${closedWhen(ago2)}; ask before opening it again`);
   if (parsed.verb === "move") return done(panels.move(id, place3));
   const options = { place: place3, section: parsed.section };
   if (parsed.verb === "open") return done(panels.open(id, options));
@@ -20497,6 +20498,16 @@ function body(call, color) {
   }
   return b`<pre class="input">${call.input}</pre>`;
 }
+var severityWords = {
+  error: "Error: ",
+  warn: "Warning: ",
+  info: "Note: "
+};
+function notes(list5) {
+  return b`<ul class="notes">${list5.map(
+    (note) => b`<li data-note data-severity=${note.severity}>${note.severity === "info" ? b`<swc-icon-info-circle size="s" aria-hidden="true"></swc-icon-info-circle>` : b`<swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle>`}<span><span class="sr">${severityWords[note.severity]}</span>${note.text}</span></li>`
+  )}</ul>`;
+}
 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}>
@@ -20514,6 +20525,7 @@ function tool(call, color = "light") {
     <div class="call">
       ${body(call, color)}
       ${call.output ? b`<pre class="output">${call.output}</pre>` : A}
+      ${call.notes?.length ? notes(call.notes) : A}
       ${call.image ? b`<img class="shot" src=${call.image} alt=${call.title} />` : A}
     </div>
   </details>`;
@@ -21168,6 +21180,33 @@ var messageCss = i`
     max-block-size: calc(var(--swc-spacing-1000) * 2.5);
     overflow: auto;
   }
+  .call > pre {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  .notes {
+    display: flex;
+    flex-direction: column;
+    gap: var(--swc-spacing-75);
+    margin: var(--swc-spacing-100) 0 0;
+    padding: 0;
+    list-style: none;
+    color: var(--swc-neutral-subdued-content-color-default);
+  }
+  .notes li {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--swc-spacing-75);
+    overflow-wrap: anywhere;
+  }
+  .notes swc-icon-alert-triangle,
+  .notes swc-icon-info-circle {
+    flex: none;
+    margin-block-start: var(--swc-spacing-50);
+  }
+  .notes [data-severity='error'] {
+    color: var(--swc-negative-content-color-default);
+  }
   .call > pre.input:has(+ pre.output) {
     margin-block-end: calc(-1 * var(--swc-spacing-100));
     border-block-end: 0;
@@ -21455,7 +21494,8 @@ var messageCss = i`
   .lick[data-severity='warn'] {
     --severity: var(--swc-notice-visual-color);
   }
-  .lick .sr {
+  .lick .sr,
+  .notes .sr {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -27746,11 +27786,13 @@ function attention(section) {
 var SliccMonitor = class extends ModelElement {
   static properties = {
     ...ModelElement.properties,
-    expanded: { state: true }
+    expanded: { state: true },
+    copied: { state: true }
   };
   constructor() {
     super();
     this.expanded = {};
+    this.copied = null;
   }
   static styles = [
     shared,
@@ -27850,6 +27892,36 @@ var SliccMonitor = class extends ModelElement {
         display: block;
         color: var(--swc-neutral-subdued-content-color-default);
       }
+      .alert > div {
+        min-width: 0;
+      }
+      .alert .command {
+        display: flex;
+        align-items: center;
+        gap: var(--swc-spacing-100);
+        margin-block-start: var(--swc-spacing-75);
+        padding-inline-start: var(--swc-spacing-100);
+        border-radius: var(--swc-corner-radius-medium-default);
+        background: var(--swc-background-layer-1-color);
+      }
+      .alert code {
+        flex: 1;
+        min-width: 0;
+        overflow-x: auto;
+        white-space: nowrap;
+        font-family: var(--swc-code-font-family-stack);
+        font-size: var(--swc-font-size-75);
+        color: var(--swc-code-color);
+      }
+      .alert .lead {
+        display: block;
+        margin-block-start: var(--swc-spacing-75);
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
+      .alert .uncopied {
+        display: block;
+        color: var(--swc-negative-content-color-default);
+      }
       .sections {
         display: grid;
         margin: 0;
@@ -27974,9 +28046,16 @@ var SliccMonitor = class extends ModelElement {
     const error = alert.severity === "error";
     return b`<li class="alert" data-severity=${alert.severity}>
       ${error ? b`<swc-icon-alert-diamond size="s" aria-hidden="true"></swc-icon-alert-diamond>` : b`<swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle>`}
-      <div><span class="sr">${error ? "Error: " : "Warning: "}</span><strong>${alert.title}</strong><span class="detail">${alert.detail}</span></div>
+      <div><span class="sr">${error ? "Error: " : "Warning: "}</span><strong>${alert.title}</strong><span class="detail">${alert.detail}</span>${alert.command ? this.#command(alert.id, alert.command, alert.commandLabel ?? "Run") : A}</div>
     </li>`;
   }
+  #command(id, text2, label) {
+    const copied = this.copied?.id === id && this.copied.text === text2 ? this.copied : null;
+    return b`<span class="lead">${label}:</span><div class="command" data-command><code>${text2}</code><swc-action-button size="s" quiet data-action="copy-command" accessible-label=${copied?.done ? "Copied" : "Copy command"} @click=${() => this.#copy(id, text2)}><swc-icon-copy slot="icon"></swc-icon-copy>${copied?.done ? "Copied" : "Copy"}</swc-action-button></div>${copied && !copied.done ? b`<span class="uncopied" role="alert" data-error="copy">Couldn’t copy. Select the command and copy it.</span>` : A}`;
+  }
+  async #copy(id, text2) {
+    this.copied = { id, text: text2, done: await copyText(text2) };
+  }
   #open(id) {
     this.dispatchEvent(
       new CustomEvent("show-surface", { detail: { id }, bubbles: true, composed: true })