@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/tool-call-visualization/renderers/search/SearchOverlay.js

@@ -1,6 +1,7 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Chip, SegmentedControl } from "@ai-matrx/design-system/controls";
-import React, { useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import {
   Search,
   Globe,
@@ -26,50 +27,78 @@ const Favicon = ({ url, className }) => {
   const [failed, setFailed] = useState(false);
   const src = getFaviconUrl(url, 64);
   if (failed || !src)
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "span",
       {
         className: cn(
           "flex items-center justify-center bg-muted text-muted-foreground",
           className
-        )
-      },
-      /* @__PURE__ */ React.createElement(Globe, { className: "h-1/2 w-1/2" })
+        ),
+        children: /* @__PURE__ */ jsx(Globe, { className: "h-1/2 w-1/2" })
+      }
     );
-  return /* @__PURE__ */ React.createElement("img", { src, alt: "", className: cn("object-contain", className), onError: () => setFailed(true) });
+  return /* @__PURE__ */ jsx("img", { src, alt: "", className: cn("object-contain", className), onError: () => setFailed(true) });
 };
 const BreadcrumbPath = ({ url }) => {
   const { origin, segments } = useMemo(() => getBreadcrumbParts(url), [url]);
-  return /* @__PURE__ */ React.createElement("span", { className: "flex min-w-0 items-center gap-1 truncate text-xs leading-tight" }, /* @__PURE__ */ React.createElement("span", { className: "truncate text-success/90" }, origin), segments.map((seg, i) => /* @__PURE__ */ React.createElement("span", { key: i, className: "flex items-center gap-1 truncate text-muted-foreground" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/50" }, "\u203A"), /* @__PURE__ */ React.createElement("span", { className: "truncate" }, seg))));
+  return /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1 truncate text-xs leading-tight", children: [
+    /* @__PURE__ */ jsx("span", { className: "truncate text-success/90", children: origin }),
+    segments.map((seg, i) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 truncate text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50", children: "\u203A" }),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: seg })
+    ] }, i))
+  ] });
 };
-const FilterPill = ({ active, onClick, label, title }) => /* @__PURE__ */ React.createElement(Chip, { asChild: true, pressed: active, label, title }, /* @__PURE__ */ React.createElement("button", { type: "button", onClick }));
+const FilterPill = ({ active, onClick, label, title }) => /* @__PURE__ */ jsx(Chip, { asChild: true, pressed: active, label, title, children: /* @__PURE__ */ jsx("button", { type: "button", onClick }) });
 const ResultRow = ({ source, rank }) => {
   const date = formatDate(source.date);
   const siteName = getSiteName(source.url) || source.domain;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     PartPeekPopover,
     {
       className: "w-[380px]",
-      header: /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-1.5 normal-case" }, /* @__PURE__ */ React.createElement(Favicon, { url: source.url, className: "h-4 w-4 rounded" }), /* @__PURE__ */ React.createElement("span", { className: "truncate font-medium text-foreground" }, siteName)),
-      body: /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React.createElement("div", { className: "font-medium leading-snug text-foreground" }, source.title), source.snippet ? /* @__PURE__ */ React.createElement("div", { className: "max-h-56 overflow-y-auto whitespace-pre-wrap text-muted-foreground" }, source.snippet) : /* @__PURE__ */ React.createElement("div", { className: "text-muted-foreground" }, source.domain))
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "group/result flex gap-3" }, rank !== void 0 && /* @__PURE__ */ React.createElement("span", { className: "w-6 flex-shrink-0 pt-0.5 text-right text-xs tabular-nums text-muted-foreground/70" }, rank), /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React.createElement(
-      Favicon,
-      {
-        url: source.url,
-        className: "h-9 w-9 flex-shrink-0 rounded-full border border-border bg-card p-1.5"
-      }
-    ), /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "truncate text-sm font-medium leading-tight text-foreground" }, siteName), /* @__PURE__ */ React.createElement(BreadcrumbPath, { url: source.url }))), /* @__PURE__ */ React.createElement(
-      "a",
-      {
-        href: source.url || void 0,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: "group/link mt-1.5 flex items-start gap-1.5"
-      },
-      /* @__PURE__ */ React.createElement("span", { className: "text-lg font-medium leading-snug text-primary underline-offset-2 group-hover/link:underline" }, source.title),
-      /* @__PURE__ */ React.createElement(ExternalLink, { className: "mt-1.5 h-3.5 w-3.5 flex-shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/result:opacity-100" })
-    ), source.snippet && /* @__PURE__ */ React.createElement("p", { className: "mt-1 line-clamp-2 text-sm leading-relaxed text-muted-foreground" }, source.snippet), date && /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 text-xs text-muted-foreground opacity-80" }, date)))
+      header: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 normal-case", children: [
+        /* @__PURE__ */ jsx(Favicon, { url: source.url, className: "h-4 w-4 rounded" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-foreground", children: siteName })
+      ] }),
+      body: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "font-medium leading-snug text-foreground", children: source.title }),
+        source.snippet ? /* @__PURE__ */ jsx("div", { className: "max-h-56 overflow-y-auto whitespace-pre-wrap text-muted-foreground", children: source.snippet }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: source.domain })
+      ] }),
+      children: /* @__PURE__ */ jsxs("div", { className: "group/result flex gap-3", children: [
+        rank !== void 0 && /* @__PURE__ */ jsx("span", { className: "w-6 flex-shrink-0 pt-0.5 text-right text-xs tabular-nums text-muted-foreground/70", children: rank }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              Favicon,
+              {
+                url: source.url,
+                className: "h-9 w-9 flex-shrink-0 rounded-full border border-border bg-card p-1.5"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium leading-tight text-foreground", children: siteName }),
+              /* @__PURE__ */ jsx(BreadcrumbPath, { url: source.url })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: source.url || void 0,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "group/link mt-1.5 flex items-start gap-1.5",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "text-lg font-medium leading-snug text-primary underline-offset-2 group-hover/link:underline", children: source.title }),
+                /* @__PURE__ */ jsx(ExternalLink, { className: "mt-1.5 h-3.5 w-3.5 flex-shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/result:opacity-100" })
+              ]
+            }
+          ),
+          source.snippet && /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-2 text-sm leading-relaxed text-muted-foreground", children: source.snippet }),
+          date && /* @__PURE__ */ jsx("div", { className: "mt-1.5 text-xs text-muted-foreground opacity-80", children: date })
+        ] })
+      ] })
+    }
   );
 };
 function groupToSources(group) {
@@ -84,39 +113,74 @@ function groupToSources(group) {
 const ReadingPane = ({ reads }) => {
   const [active, setActive] = useState(0);
   const current = reads[active];
-  return /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden rounded-md border border-border" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 border-b border-border bg-muted/40 px-3 py-2" }, /* @__PURE__ */ React.createElement(BookOpenText, { className: "h-4 w-4 text-primary" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm font-medium text-foreground" }, "Pages read ", /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "(", reads.length, ")"))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:h-[420px] md:flex-row" }, /* @__PURE__ */ React.createElement("div", { className: "flex-shrink-0 divide-y divide-border/60 overflow-y-auto border-b border-border md:w-64 md:border-b-0 md:border-r" }, reads.map((r, i) => /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      key: `${r.url}-${i}`,
-      type: "button",
-      onClick: () => setActive(i),
-      className: cn(
-        "flex w-full items-center gap-2 px-3 py-2 text-left transition-colors",
-        i === active ? "bg-primary/10" : "hover:bg-muted/40"
-      )
-    },
-    /* @__PURE__ */ React.createElement(Favicon, { url: r.url, className: "h-4 w-4 flex-shrink-0" }),
-    /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: cn(
-          "truncate text-xs font-medium",
-          i === active ? "text-primary" : "text-foreground"
-        )
-      },
-      r.title ?? getDomain(r.url)
-    ), /* @__PURE__ */ React.createElement("div", { className: "truncate text-xs text-success" }, getDomain(r.url)))
-  ))), /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1 overflow-y-auto p-4" }, current ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "mb-3 flex items-start gap-2 border-b border-border pb-3" }, /* @__PURE__ */ React.createElement(Favicon, { url: current.url, className: "mt-0.5 h-5 w-5 flex-shrink-0" }), /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-semibold text-foreground" }, current.title ?? getDomain(current.url)), /* @__PURE__ */ React.createElement(
-    "a",
-    {
-      href: current.url || void 0,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      className: "inline-flex items-center gap-1 text-xs text-primary hover:underline"
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "truncate" }, current.url),
-    /* @__PURE__ */ React.createElement(ExternalLink, { className: "h-3 w-3 flex-shrink-0" })
-  ))), current.text ? /* @__PURE__ */ React.createElement("div", { className: "text-sm" }, /* @__PURE__ */ React.createElement(BasicMarkdownContent, { imagePolicy: "other", content: current.text })) : /* @__PURE__ */ React.createElement("p", { className: "text-sm text-muted-foreground" }, "No page content captured.")) : /* @__PURE__ */ React.createElement("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground" }, /* @__PURE__ */ React.createElement(FileText, { className: "mr-2 h-4 w-4" }), " Select a page"))));
+  return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-md border border-border", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border bg-muted/40 px-3 py-2", children: [
+      /* @__PURE__ */ jsx(BookOpenText, { className: "h-4 w-4 text-primary" }),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-foreground", children: [
+        "Pages read ",
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          "(",
+          reads.length,
+          ")"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:h-[420px] md:flex-row", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 divide-y divide-border/60 overflow-y-auto border-b border-border md:w-64 md:border-b-0 md:border-r", children: reads.map((r, i) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setActive(i),
+          className: cn(
+            "flex w-full items-center gap-2 px-3 py-2 text-left transition-colors",
+            i === active ? "bg-primary/10" : "hover:bg-muted/40"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Favicon, { url: r.url, className: "h-4 w-4 flex-shrink-0" }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "truncate text-xs font-medium",
+                    i === active ? "text-primary" : "text-foreground"
+                  ),
+                  children: r.title ?? getDomain(r.url)
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-success", children: getDomain(r.url) })
+            ] })
+          ]
+        },
+        `${r.url}-${i}`
+      )) }),
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 overflow-y-auto p-4", children: current ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-start gap-2 border-b border-border pb-3", children: [
+          /* @__PURE__ */ jsx(Favicon, { url: current.url, className: "mt-0.5 h-5 w-5 flex-shrink-0" }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: current.title ?? getDomain(current.url) }),
+            /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: current.url || void 0,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "inline-flex items-center gap-1 text-xs text-primary hover:underline",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: current.url }),
+                  /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3 flex-shrink-0" })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        current.text ? /* @__PURE__ */ jsx("div", { className: "text-sm", children: /* @__PURE__ */ jsx(BasicMarkdownContent, { imagePolicy: "other", content: current.text }) }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No page content captured." })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(FileText, { className: "mr-2 h-4 w-4" }),
+        " Select a page"
+      ] }) })
+    ] })
+  ] });
 };
 const SearchOverlay = ({ entry }) => {
   const parsed = useMemo(() => parseSearch(resultAsString(entry)), [entry]);
@@ -149,50 +213,121 @@ const SearchOverlay = ({ entry }) => {
   const drilling = filter.trim().length > 0 || sortKey !== "relevance" || activeQuery !== null;
   const showGroupedBlocks = multiQuery && !drilling;
   if (sources.length === 0 && reads.length === 0 && !report) {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex h-64 items-center justify-center text-muted-foreground" }, /* @__PURE__ */ React.createElement("div", { className: "text-center" }, /* @__PURE__ */ React.createElement(Search, { className: "mx-auto mb-3 h-12 w-12 opacity-40" }), /* @__PURE__ */ React.createElement("p", { className: "text-sm" }, "No search results available")));
+    return /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx(Search, { className: "mx-auto mb-3 h-12 w-12 opacity-40" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No search results available" })
+    ] }) });
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "h-full w-full overflow-y-auto bg-background" }, /* @__PURE__ */ React.createElement("div", { className: "mx-auto max-w-3xl space-y-5 p-4" }, report && /* @__PURE__ */ React.createElement("div", { className: "rounded-lg border border-primary/15 bg-primary/5 p-4" }, /* @__PURE__ */ React.createElement("div", { className: "mb-2 flex items-center gap-1.5" }, /* @__PURE__ */ React.createElement(Lightbulb, { className: "h-4 w-4 text-primary" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm font-semibold text-foreground" }, "AI Matrx answer")), /* @__PURE__ */ React.createElement("div", { className: "text-sm leading-relaxed text-foreground/90" }, /* @__PURE__ */ React.createElement(BasicMarkdownContent, { imagePolicy: "ai", content: report }))), /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground" }, "About ", /* @__PURE__ */ React.createElement("span", { className: "font-medium text-foreground tabular-nums" }, sources.length), " ", sources.length === 1 ? "result" : "results", queries.length > 1 && /* @__PURE__ */ React.createElement(React.Fragment, null, " ", "across", " ", /* @__PURE__ */ React.createElement("span", { className: "font-medium text-foreground tabular-nums" }, queries.length), " ", "queries"), reads.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, " ", "\xB7", " ", /* @__PURE__ */ React.createElement("span", { className: "font-medium text-foreground tabular-nums" }, reads.length), " read")), reads.length > 0 && /* @__PURE__ */ React.createElement(ReadingPane, { reads }), /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, multiQuery && /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-1.5" }, /* @__PURE__ */ React.createElement(
-    FilterPill,
-    {
-      active: activeQuery === null,
-      onClick: () => setActiveQuery(null),
-      label: `All queries (${sources.length})`
-    }
-  ), groups.map((g) => /* @__PURE__ */ React.createElement(
-    FilterPill,
-    {
-      key: g.query,
-      active: activeQuery === g.query,
-      onClick: () => setActiveQuery((q) => q === g.query ? null : g.query),
-      title: g.query,
-      label: `${g.query} (${g.count})`
-    }
-  ))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "relative min-w-0 flex-1" }, /* @__PURE__ */ React.createElement(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      type: "text",
-      value: filter,
-      onChange: (e) => setFilter(e.target.value),
-      placeholder: `Filter ${base.length} results\u2026`,
-      className: "h-9 w-full max-w-md rounded-md border border-border bg-background pl-9 pr-3 text-base text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring sm:text-sm"
-    }
-  )), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ React.createElement(ArrowUpDown, { className: "h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ React.createElement(
-    SegmentedControl,
-    {
-      "aria-label": "Sort sources",
-      value: sortKey,
-      onValueChange: setSortKey,
-      data: [
-        { value: "relevance", label: "Relevance" },
-        { value: "domain", label: "Domain" },
-        { value: "date", label: "Date" }
-      ]
-    }
-  )))), showGroupedBlocks ? /* @__PURE__ */ React.createElement("div", { className: "space-y-6" }, groups.map((g) => {
-    const blockSources = groupToSources(g);
-    if (blockSources.length === 0) return null;
-    return /* @__PURE__ */ React.createElement("div", { key: g.query, className: "space-y-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 border-b border-border pb-1.5" }, /* @__PURE__ */ React.createElement(Search, { className: "h-3.5 w-3.5 flex-shrink-0 text-primary" }), /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-foreground", title: g.query }, g.query), /* @__PURE__ */ React.createElement("span", { className: "flex-shrink-0 text-xs tabular-nums text-muted-foreground" }, blockSources.length, " ", blockSources.length === 1 ? "result" : "results")), /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, blockSources.map((s, i) => /* @__PURE__ */ React.createElement(ResultRow, { key: `${s.url}-${i}`, source: s }))));
-  })) : /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement("span", { className: "text-sm font-medium text-foreground" }, activeQuery ? "Results for query" : "All results"), /* @__PURE__ */ React.createElement("span", { className: "text-xs tabular-nums text-muted-foreground" }, visible.length, " ", visible.length === 1 ? "result" : "results")), visible.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "rounded-md border border-border px-3 py-6 text-center text-xs text-muted-foreground" }, "No results match the filter") : /* @__PURE__ */ React.createElement("div", { className: "space-y-4 pt-1" }, visible.map((s, i) => /* @__PURE__ */ React.createElement(ResultRow, { key: `${s.url}-${i}`, rank: i + 1, source: s }))))));
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-y-auto bg-background", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl space-y-5 p-4", children: [
+    report && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-primary/15 bg-primary/5 p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(Lightbulb, { className: "h-4 w-4 text-primary" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: "AI Matrx answer" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "text-sm leading-relaxed text-foreground/90", children: /* @__PURE__ */ jsx(BasicMarkdownContent, { imagePolicy: "ai", content: report }) })
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+      "About ",
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground tabular-nums", children: sources.length }),
+      " ",
+      sources.length === 1 ? "result" : "results",
+      queries.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        "across",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground tabular-nums", children: queries.length }),
+        " ",
+        "queries"
+      ] }),
+      reads.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        "\xB7",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground tabular-nums", children: reads.length }),
+        " read"
+      ] })
+    ] }),
+    reads.length > 0 && /* @__PURE__ */ jsx(ReadingPane, { reads }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      multiQuery && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          FilterPill,
+          {
+            active: activeQuery === null,
+            onClick: () => setActiveQuery(null),
+            label: `All queries (${sources.length})`
+          }
+        ),
+        groups.map((g) => /* @__PURE__ */ jsx(
+          FilterPill,
+          {
+            active: activeQuery === g.query,
+            onClick: () => setActiveQuery((q) => q === g.query ? null : g.query),
+            title: g.query,
+            label: `${g.query} (${g.count})`
+          },
+          g.query
+        ))
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value: filter,
+              onChange: (e) => setFilter(e.target.value),
+              placeholder: `Filter ${base.length} results\u2026`,
+              className: "h-9 w-full max-w-md rounded-md border border-border bg-background pl-9 pr-3 text-base text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring sm:text-sm"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              "aria-label": "Sort sources",
+              value: sortKey,
+              onValueChange: setSortKey,
+              data: [
+                { value: "relevance", label: "Relevance" },
+                { value: "domain", label: "Domain" },
+                { value: "date", label: "Date" }
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    showGroupedBlocks ? /* @__PURE__ */ jsx("div", { className: "space-y-6", children: groups.map((g) => {
+      const blockSources = groupToSources(g);
+      if (blockSources.length === 0) return null;
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border pb-1.5", children: [
+          /* @__PURE__ */ jsx(Search, { className: "h-3.5 w-3.5 flex-shrink-0 text-primary" }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-foreground", title: g.query, children: g.query }),
+          /* @__PURE__ */ jsxs("span", { className: "flex-shrink-0 text-xs tabular-nums text-muted-foreground", children: [
+            blockSources.length,
+            " ",
+            blockSources.length === 1 ? "result" : "results"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-4", children: blockSources.map((s, i) => /* @__PURE__ */ jsx(ResultRow, { source: s }, `${s.url}-${i}`)) })
+      ] }, g.query);
+    }) }) : /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: activeQuery ? "Results for query" : "All results" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-xs tabular-nums text-muted-foreground", children: [
+          visible.length,
+          " ",
+          visible.length === 1 ? "result" : "results"
+        ] })
+      ] }),
+      visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-md border border-border px-3 py-6 text-center text-xs text-muted-foreground", children: "No results match the filter" }) : /* @__PURE__ */ jsx("div", { className: "space-y-4 pt-1", children: visible.map((s, i) => /* @__PURE__ */ jsx(ResultRow, { rank: i + 1, source: s }, `${s.url}-${i}`)) })
+    ] })
+  ] }) });
 };
 export {
   SearchOverlay

package/dist/tool-call-visualization/renderers/shell/ShellInline.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { AlertTriangle, SquareTerminal } from "lucide-react";
 import { cn } from "@ai-matrx/design-system";
@@ -30,47 +31,60 @@ function asProcessResult(result) {
 const Chip = ({
   children,
   tone
-}) => /* @__PURE__ */ React.createElement(
+}) => /* @__PURE__ */ jsx(
   "span",
   {
     className: cn(
       "text-xs tabular-nums",
       tone === "bad" ? "font-medium text-red-600 dark:text-red-400" : "text-muted-foreground"
-    )
-  },
-  children
+    ),
+    children
+  }
 );
-const DurableVfsWarning = () => /* @__PURE__ */ React.createElement(
+const DurableVfsWarning = () => /* @__PURE__ */ jsxs(
   "div",
   {
     role: "alert",
     "data-testid": "shell-durable-vfs-warning",
-    className: "flex items-start gap-2 border-t border-red-500/30 bg-red-50 px-4 py-2 text-xs text-red-700 dark:bg-red-950/40 dark:text-red-300"
-  },
-  /* @__PURE__ */ React.createElement(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0" }),
-  /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", { className: "font-semibold" }, "Ran in the durable file store \u2014 ", DURABLE_VFS_BADGE_TEXT, "."), " ", "This emulator has no git, no loops and no shell redirection, so results can differ from the container. Re-attach a running sandbox from the chat input's sandbox control and run the command again."),
-  /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, null)
+    className: "flex items-start gap-2 border-t border-red-500/30 bg-red-50 px-4 py-2 text-xs text-red-700 dark:bg-red-950/40 dark:text-red-300",
+    children: [
+      /* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsxs("span", { className: "font-semibold", children: [
+          "Ran in the durable file store \u2014 ",
+          DURABLE_VFS_BADGE_TEXT,
+          "."
+        ] }),
+        " ",
+        "This emulator has no git, no loops and no shell redirection, so results can differ from the container. Re-attach a running sandbox from the chat input's sandbox control and run the command again."
+      ] }),
+      /* @__PURE__ */ jsx(ErrorAlchemyMenu, {})
+    ]
+  }
 );
 const OutputBlock = ({ text, stream }) => {
   const [showAll, setShowAll] = React.useState(false);
   const lines = text.replace(/\n+$/, "").split("\n");
   const hidden = Math.max(0, lines.length - TAIL_LINES);
   const shown = showAll || hidden === 0 ? lines : lines.slice(-TAIL_LINES);
-  return /* @__PURE__ */ React.createElement("div", { className: "border-t border-border/30" }, hidden > 0 && /* @__PURE__ */ React.createElement(Tile, { variant: "quiet", title: showAll ? `Show last ${TAIL_LINES} lines` : `Show all ${lines.length} lines`, onClick: (ev) => {
-    ev.stopPropagation();
-    setShowAll((v) => !v);
-  } }), /* @__PURE__ */ React.createElement(
-    "pre",
-    {
-      className: cn(
-        // `overflow-x-auto` on the block itself: a long line scrolls HERE
-        // and never widens the transcript (the 390px rule).
-        "max-h-80 overflow-auto whitespace-pre px-4 py-2 font-mono text-xs leading-relaxed",
-        stream === "stderr" ? "text-amber-700 dark:text-amber-400" : "text-foreground"
-      )
-    },
-    shown.join("\n")
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: "border-t border-border/30", children: [
+    hidden > 0 && /* @__PURE__ */ jsx(Tile, { variant: "quiet", title: showAll ? `Show last ${TAIL_LINES} lines` : `Show all ${lines.length} lines`, onClick: (ev) => {
+      ev.stopPropagation();
+      setShowAll((v) => !v);
+    } }),
+    /* @__PURE__ */ jsx(
+      "pre",
+      {
+        className: cn(
+          // `overflow-x-auto` on the block itself: a long line scrolls HERE
+          // and never widens the transcript (the 390px rule).
+          "max-h-80 overflow-auto whitespace-pre px-4 py-2 font-mono text-xs leading-relaxed",
+          stream === "stderr" ? "text-amber-700 dark:text-amber-400" : "text-foreground"
+        ),
+        children: shown.join("\n")
+      }
+    )
+  ] });
 };
 const ShellResultCard = ({ command, result, ...shell }) => {
   const failed = result.exitCode !== null && result.exitCode !== 0;
@@ -80,17 +94,22 @@ const ShellResultCard = ({ command, result, ...shell }) => {
     result.cwd,
     result.truncated ? "output truncated" : null
   ].filter(Boolean).join(" \xB7 ");
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ToolResultCard,
     {
       icon: SquareTerminal,
       iconClassName: SHELL_ICON_TINT,
       title: command || "Command",
       sub: sub || null,
-      headerAction: result.exitCode !== null ? /* @__PURE__ */ React.createElement(Chip, { tone: failed ? "bad" : void 0 }, failed ? `exit ${result.exitCode}` : "exit 0") : void 0,
-      ...shell
-    },
-    /* @__PURE__ */ React.createElement("div", null, result.backend === "durable_vfs" && /* @__PURE__ */ React.createElement(DurableVfsWarning, null), result.stdout.trim() !== "" && /* @__PURE__ */ React.createElement(OutputBlock, { text: result.stdout, stream: "stdout" }), result.stderr.trim() !== "" && /* @__PURE__ */ React.createElement(OutputBlock, { text: result.stderr, stream: "stderr" }), result.stdout.trim() === "" && result.stderr.trim() === "" && /* @__PURE__ */ React.createElement("p", { className: "border-t border-border/30 px-4 py-2 text-xs text-muted-foreground" }, "No output."))
+      headerAction: result.exitCode !== null ? /* @__PURE__ */ jsx(Chip, { tone: failed ? "bad" : void 0, children: failed ? `exit ${result.exitCode}` : "exit 0" }) : void 0,
+      ...shell,
+      children: /* @__PURE__ */ jsxs("div", { children: [
+        result.backend === "durable_vfs" && /* @__PURE__ */ jsx(DurableVfsWarning, {}),
+        result.stdout.trim() !== "" && /* @__PURE__ */ jsx(OutputBlock, { text: result.stdout, stream: "stdout" }),
+        result.stderr.trim() !== "" && /* @__PURE__ */ jsx(OutputBlock, { text: result.stderr, stream: "stderr" }),
+        result.stdout.trim() === "" && result.stderr.trim() === "" && /* @__PURE__ */ jsx("p", { className: "border-t border-border/30 px-4 py-2 text-xs text-muted-foreground", children: "No output." })
+      ] })
+    }
   );
 };
 const ShellInline = (props) => {
@@ -103,7 +122,7 @@ const ShellInline = (props) => {
     onToggleExpanded
   } = props;
   if (entry.status === "error") {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       ToolErrorCard,
       {
         entry,
@@ -114,9 +133,9 @@ const ShellInline = (props) => {
   }
   if (!isTerminal(entry)) return null;
   const result = asProcessResult(resultAsObject(entry));
-  if (!result) return /* @__PURE__ */ React.createElement(GenericRenderer, { ...props });
+  if (!result) return /* @__PURE__ */ jsx(GenericRenderer, { ...props });
   const command = getArg(entry, "command") || getArg(entry, "code") || getArg(entry, "script") || "";
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ShellResultCard,
     {
       command,