@ai-ecoverse/slicc-spectrum 1.12.0 → 1.13.0

package/dist/slicc-ui.js

@@ -7781,10 +7781,10 @@ function render(entry) {
       return entry.ordered ? b`<ol>${items}</ol>` : b`<ul>${items}</ul>`;
     }
     case "table": {
-      const [head2, ...body3] = entry.rows;
+      const [head2, ...body4] = entry.rows;
       return b`<div class="table"><table>
         <thead><tr>${head2.map((cell) => b`<th>${inline(cell)}</th>`)}</tr></thead>
-        <tbody>${body3.map((row) => b`<tr>${row.map((cell) => b`<td>${inline(cell)}</td>`)}</tr>`)}</tbody>
+        <tbody>${body4.map((row) => b`<tr>${row.map((cell) => b`<td>${inline(cell)}</td>`)}</tr>`)}</tbody>
       </table></div>`;
     }
     case "quote":
@@ -7843,21 +7843,28 @@ function size(bytes) {
   if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
   return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
 }
-function tool(call) {
+function body(call, color) {
+  if (call.diff) {
+    return b`<slicc-diff-view class="input" path=${call.paths[0] ?? call.title} color=${color} .oldText=${call.diff.before} .newText=${call.diff.after}></slicc-diff-view>`;
+  }
+  return b`<pre class="input">${call.name === "bash" ? `$ ${call.input}` : call.input}</pre>`;
+}
+function tool(call, color = "light") {
   const state = call.status === "running" ? b`<sp-progress-circle size="s" indeterminate label="Running"></sp-progress-circle>` : b`<span class="state">${toolStates[call.status]}</span>`;
   return b`<details class="tool" data-status=${call.status} data-tool=${call.name}>
     <summary>
       <span class="chevron" aria-hidden="true">▸</span>
       <span class="name">${call.name}</span>
       <span class="title">${call.title}</span>
+      ${call.meta ? b`<span class="tool-meta">${call.meta}</span>` : A}
       ${state}
     </summary>
-    <pre class="input">${call.name === "bash" ? `$ ${call.input}` : call.input}</pre>
+    ${body(call, color)}
     ${call.output ? b`<pre class="output">${call.output}</pre>` : A}
     ${call.image ? b`<img class="shot" src=${call.image} alt=${call.title} />` : A}
   </details>`;
 }
-function cluster(calls, open) {
+function cluster(calls, open, color) {
   const failed = calls.filter((call) => call.status === "error").length;
   const running = calls.some((call) => call.status === "running");
   return b`<details class="cluster" ?open=${open || running}>
@@ -7867,7 +7874,7 @@ function cluster(calls, open) {
       <span class="names">${[...new Set(calls.map((call) => call.name))].join(" \xB7 ")}</span>
       ${failed ? b`<span class="state failed">${failed} failed</span>` : A}
     </summary>
-    ${calls.map(tool)}
+    ${calls.map((call) => tool(call, color))}
   </details>`;
 }
 function media(items) {
@@ -7907,14 +7914,14 @@ function check(items) {
 }
 function question(item2, handlers) {
   const answer = (value) => handlers.answer(item2.id, value);
-  let body3;
+  let body4;
   if (item2.state === "answered") {
-    body3 = b`<div class="answer">✓ ${item2.answer}</div>`;
+    body4 = b`<div class="answer">✓ ${item2.answer}</div>`;
   } else if (item2.state === "inert") {
-    body3 = b`<div class="hint">Only the latest question can be answered here.</div>`;
+    body4 = b`<div class="hint">Only the latest question can be answered here.</div>`;
   } else if (item2.kind === "yes-no" || item2.kind === "choice") {
     const options = item2.kind === "yes-no" ? ["Yes", "No"] : item2.options;
-    body3 = b`<div class="options">${options.map(
+    body4 = b`<div class="options">${options.map(
       (option2) => b`<sp-button size="s" variant="secondary" treatment="outline" @click=${() => answer(option2)}>${option2}</sp-button>`
     )}</div>`;
   } else {
@@ -7923,14 +7930,14 @@ function question(item2, handlers) {
       const field = event.currentTarget.querySelector("input");
       if (field.value.trim()) answer(field.value.trim());
     };
-    body3 = b`<form class="options" @submit=${submit}>
+    body4 = b`<form class="options" @submit=${submit}>
       <input class="input" type=${item2.kind === "email" ? "email" : item2.kind === "number" ? "number" : item2.kind === "date" ? "date" : "text"} aria-label=${item2.question} />
       <sp-button size="s" variant="accent" @click=${(event) => event.currentTarget.closest("form")?.requestSubmit()}>Answer</sp-button>
     </form>`;
   }
   return b`<div class="question" data-state=${item2.state} data-kind=${item2.kind}>
     <div class="q">${item2.question}</div>
-    ${body3}
+    ${body4}
   </div>`;
 }
 var delegationVerbs = {
@@ -7946,7 +7953,7 @@ function part(entry, handlers, showThinking) {
     case "thinking":
       return showThinking ? b`<div class="thinking">${entry.text}</div>` : A;
     case "tool":
-      return tool(entry.tool);
+      return tool(entry.tool, handlers.color);
     case "media":
       return media(entry.items);
     case "card":
@@ -7985,7 +7992,7 @@ function parts(entries, handlers, showThinking, streaming) {
     while (end < entries.length && entries[end].type === "tool") end++;
     if (end - i10 >= 3) {
       const calls = entries.slice(i10, end).map((entry) => entry.tool);
-      out.push(cluster(calls, streaming && end === entries.length));
+      out.push(cluster(calls, streaming && end === entries.length, handlers.color));
       i10 = end;
     } else {
       out.push(part(entries[i10], handlers, showThinking));
@@ -8036,10 +8043,10 @@ function assistant(message, name, model, handlers, showThinking) {
     ${message.status === "streaming" ? b`<span class="caret" aria-hidden="true"></span>` : A}
   </article>`;
 }
-function toolMessage(message) {
+function toolMessage(message, color = "light") {
   return b`<article class="message tool-message" data-id=${message.id}>
     <div class="meta"><span class="who">Tool</span><span>${time(message.createdAt)}</span></div>
-    ${tool(message.tool)}
+    ${tool(message.tool, color)}
   </article>`;
 }
 function system(message, handlers) {
@@ -8332,6 +8339,17 @@ var messageCss = i`
   .state.failed {
     color: var(--spectrum-negative-visual-color);
   }
+  .tool-meta {
+    flex: none;
+    color: var(--spectrum-neutral-subdued-content-color-default);
+    font-size: var(--spectrum-font-size-50);
+  }
+  .tool > slicc-diff-view {
+    display: block;
+    margin: 0 8px 8px;
+    max-height: 240px;
+    overflow: auto;
+  }
   .tool pre,
   .lick pre {
     margin: 0 8px 8px;
@@ -8793,7 +8811,7 @@ var SliccChat = class extends ThemedElement {
       case "user":
         return user(message);
       case "tool":
-        return toolMessage(message);
+        return toolMessage(message, this.#handlers.color);
       case "system":
         return system(message, this.#handlers);
       default:
@@ -19048,7 +19066,7 @@ function omission(handlers) {
 
 // node_modules/hast-util-to-html/lib/omission/closing.js
 var closing = omission({
-  body,
+  body: body2,
   caption: headOrColgroupOrCaption,
   colgroup: headOrColgroupOrCaption,
   dd,
@@ -19076,7 +19094,7 @@ function html3(_6, index, parent) {
   const next = siblingAfter(parent, index);
   return !next || next.type !== "comment";
 }
-function body(_6, index, parent) {
+function body2(_6, index, parent) {
   const next = siblingAfter(parent, index);
   return !next || next.type !== "comment";
 }
@@ -19135,7 +19153,7 @@ function cells2(_6, index, parent) {
 
 // node_modules/hast-util-to-html/lib/omission/opening.js
 var opening = omission({
-  body: body2,
+  body: body3,
   colgroup,
   head,
   html: html4,
@@ -19156,7 +19174,7 @@ function head(node) {
   const child = node.children[0];
   return !child || child.type === "element";
 }
-function body2(node) {
+function body3(node) {
   const head2 = siblingAfter(node, -1, true);
   return !head2 || head2.type !== "comment" && !(head2.type === "text" && whitespace(head2.value.charAt(0))) && !(head2.type === "element" && (head2.tagName === "meta" || head2.tagName === "link" || head2.tagName === "script" || head2.tagName === "style" || head2.tagName === "template"));
 }
@@ -22244,12 +22262,12 @@ function transform(ast, options) {
 }
 var FirstPassVisitor = {
   AbsenceFunction({ node, parent, replaceWith }) {
-    const { body: body3, kind } = node;
+    const { body: body4, kind } = node;
     if (kind === "repeater") {
       const innerGroup = A4();
       innerGroup.body[0].body.push(
         // Insert own alts as `body`
-        K2({ negate: true, body: body3 }),
+        K2({ negate: true, body: body4 }),
         Q2("Any")
       );
       const outerGroup = A4();
@@ -22834,8 +22852,8 @@ function getKids(node) {
   if (!node) {
     throw new Error("Node expected");
   }
-  const { body: body3 } = node;
-  return Array.isArray(body3) ? body3 : body3 ? [body3] : null;
+  const { body: body4 } = node;
+  return Array.isArray(body4) ? body4 : body4 ? [body4] : null;
 }
 function getLeadingG(els) {
   const firstToConsider = els.find((el) => el.kind === "search_start" || isLoneGLookaround(el, { negate: false }) || !isAlwaysZeroLength(el));
@@ -23044,8 +23062,8 @@ var generator = {
   /**
   @param {AlternativeNode} node
   */
-  Alternative({ body: body3 }, _6, gen) {
-    return body3.map(gen).join("");
+  Alternative({ body: body4 }, _6, gen) {
+    return body4.map(gen).join("");
   },
   /**
   @param {AssertionNode} node
@@ -23078,7 +23096,7 @@ var generator = {
   @param {CapturingGroupNode} node
   */
   CapturingGroup(node, state, gen) {
-    const { body: body3, name, number: number2 } = node;
+    const { body: body4, name, number: number2 } = node;
     const data = { ignoreCase: state.currentFlags.ignoreCase };
     const origin = state.originMap.get(node);
     if (origin) {
@@ -23088,7 +23106,7 @@ var generator = {
       }
     }
     state.captureMap.set(number2, data);
-    return `(${name ? `?<${name}>` : ""}${body3.map(gen).join("|")})`;
+    return `(${name ? `?<${name}>` : ""}${body4.map(gen).join("|")})`;
   },
   /**
   @param {CharacterNode} node
@@ -23114,20 +23132,20 @@ var generator = {
   */
   CharacterClass(node, state, gen) {
     const { kind, negate, parent } = node;
-    let { body: body3 } = node;
+    let { body: body4 } = node;
     if (kind === "intersection" && !state.useFlagV) {
       throw new Error("Use of character class intersection requires min target ES2024");
     }
-    if (envFlags.bugFlagVLiteralHyphenIsRange && state.useFlagV && body3.some(isLiteralHyphen)) {
-      body3 = [m4(45), ...body3.filter((kid) => !isLiteralHyphen(kid))];
+    if (envFlags.bugFlagVLiteralHyphenIsRange && state.useFlagV && body4.some(isLiteralHyphen)) {
+      body4 = [m4(45), ...body4.filter((kid) => !isLiteralHyphen(kid))];
     }
-    const genClass = () => `[${negate ? "^" : ""}${body3.map(gen).join(kind === "intersection" ? "&&" : "")}]`;
+    const genClass = () => `[${negate ? "^" : ""}${body4.map(gen).join(kind === "intersection" ? "&&" : "")}]`;
     if (!state.inCharClass) {
       if (
         // Already established `kind !== 'intersection'` if `!state.useFlagV`; don't check again
         (!state.useFlagV || envFlags.bugNestedClassIgnoresNegation) && !negate
       ) {
-        const negatedChildClasses = body3.filter(
+        const negatedChildClasses = body4.filter(
           (kid) => kid.type === "CharacterClass" && kid.kind === "union" && kid.negate
         );
         if (negatedChildClasses.length) {
@@ -23135,9 +23153,9 @@ var generator = {
           const groupFirstAlt = group.body[0];
           group.parent = parent;
           groupFirstAlt.parent = group;
-          body3 = body3.filter((kid) => !negatedChildClasses.includes(kid));
-          node.body = body3;
-          if (body3.length) {
+          body4 = body4.filter((kid) => !negatedChildClasses.includes(kid));
+          node.body = body4;
+          if (body4.length) {
             node.parent = groupFirstAlt;
             groupFirstAlt.body.push(node);
           } else {
@@ -23157,14 +23175,14 @@ var generator = {
       state.inCharClass = false;
       return result;
     }
-    const firstEl = body3[0];
+    const firstEl = body4[0];
     if (
       // Already established that the parent is a char class via `inCharClass`; don't check again
       kind === "union" && !negate && firstEl && // Allows many nested classes to work with `target` ES2018 which doesn't support nesting
       ((!state.useFlagV || !state.verbose) && parent.kind === "union" && !(envFlags.bugFlagVLiteralHyphenIsRange && state.useFlagV) || !state.verbose && parent.kind === "intersection" && // JS doesn't allow intersection with union or ranges
-      body3.length === 1 && firstEl.type !== "CharacterClassRange")
+      body4.length === 1 && firstEl.type !== "CharacterClassRange")
     ) {
-      return body3.map(gen).join("");
+      return body4.map(gen).join("");
     }
     if (!state.useFlagV && parent.type === "CharacterClass") {
       throw new Error("Uses nested character class in a way that requires min target ES2024");
@@ -23236,13 +23254,13 @@ var generator = {
   /**
   @param {GroupNode} node
   */
-  Group({ atomic: atomic2, body: body3, flags, parent }, state, gen) {
+  Group({ atomic: atomic2, body: body4, flags, parent }, state, gen) {
     const currentFlags = state.currentFlags;
     if (flags) {
       state.currentFlags = getNewCurrentFlags(currentFlags, flags);
     }
-    const contents = body3.map(gen).join("|");
-    const result = !state.verbose && body3.length === 1 && // Single alt
+    const contents = body4.map(gen).join("|");
+    const result = !state.verbose && body4.length === 1 && // Single alt
     parent.type !== "Quantifier" && !atomic2 && (!state.useFlagMods || !flags) ? contents : `(?${getGroupPrefix(atomic2, flags, state.useFlagMods)}${contents})`;
     state.currentFlags = currentFlags;
     return result;
@@ -23250,9 +23268,9 @@ var generator = {
   /**
   @param {LookaroundAssertionNode} node
   */
-  LookaroundAssertion({ body: body3, kind, negate }, _6, gen) {
+  LookaroundAssertion({ body: body4, kind, negate }, _6, gen) {
     const prefix = `${kind === "lookahead" ? "" : "<"}${negate ? "!" : "="}`;
-    return `(?${prefix}${body3.map(gen).join("|")})`;
+    return `(?${prefix}${body4.map(gen).join("|")})`;
   },
   /**
   @param {QuantifierNode} node
@@ -44910,8 +44928,8 @@ var TabsContainer = class extends CompositeDisposable {
           }
         };
       },
-      open: (body3) => {
-        popup().openPopover(body3, anchor);
+      open: (body4) => {
+        popup().openPopover(body4, anchor);
       },
       close: () => popup().close(),
       focusTrigger: () => {