@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/tool-call-visualization/renderers/scrape/ScrapeInline.js

@@ -1,6 +1,7 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { formatCount } from "@ai-matrx/kit/format";
-import React, { useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import {
   Globe,
   Loader2,
@@ -26,10 +27,10 @@ const Favicon = ({
   const [failed, setFailed] = useState(false);
   const src = url ? getFaviconUrl(url) : "";
   if (failed || !src)
-    return /* @__PURE__ */ React.createElement(Globe, { className: cn("text-muted-foreground", className) });
+    return /* @__PURE__ */ jsx(Globe, { className: cn("text-muted-foreground", className) });
   return (
     // eslint-disable-next-line @next/next/no-img-element -- favicon service, not owned media
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ jsx(
       "img",
       {
         src,
@@ -40,56 +41,71 @@ const Favicon = ({
     )
   );
 };
-const ReadingWave = () => /* @__PURE__ */ React.createElement(
+const ReadingWave = () => /* @__PURE__ */ jsx(
   "div",
   {
     "aria-hidden": true,
-    className: "pointer-events-none absolute inset-0 overflow-hidden rounded-lg"
-  },
-  /* @__PURE__ */ React.createElement(
-    "div",
+    className: "pointer-events-none absolute inset-0 overflow-hidden rounded-lg",
+    children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-y-0 -inset-x-1/4 w-1/2 bg-gradient-to-r from-transparent via-primary/15 to-transparent",
+        style: { animation: "readingWave 1.6s ease-in-out infinite" }
+      }
+    )
+  }
+);
+const PulsingDots = () => /* @__PURE__ */ jsxs("span", { className: "flex gap-0.5", children: [
+  /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "h-1 w-1 rounded-full bg-primary",
+      style: { animation: "pulseWave 1.4s infinite ease-in-out" }
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "h-1 w-1 rounded-full bg-primary",
+      style: { animation: "pulseWave 1.4s infinite ease-in-out 0.2s" }
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "span",
     {
-      className: "absolute inset-y-0 -inset-x-1/4 w-1/2 bg-gradient-to-r from-transparent via-primary/15 to-transparent",
-      style: { animation: "readingWave 1.6s ease-in-out infinite" }
+      className: "h-1 w-1 rounded-full bg-primary",
+      style: { animation: "pulseWave 1.4s infinite ease-in-out 0.4s" }
     }
   )
-);
-const PulsingDots = () => /* @__PURE__ */ React.createElement("span", { className: "flex gap-0.5" }, /* @__PURE__ */ React.createElement(
-  "span",
-  {
-    className: "h-1 w-1 rounded-full bg-primary",
-    style: { animation: "pulseWave 1.4s infinite ease-in-out" }
-  }
-), /* @__PURE__ */ React.createElement(
-  "span",
-  {
-    className: "h-1 w-1 rounded-full bg-primary",
-    style: { animation: "pulseWave 1.4s infinite ease-in-out 0.2s" }
-  }
-), /* @__PURE__ */ React.createElement(
-  "span",
-  {
-    className: "h-1 w-1 rounded-full bg-primary",
-    style: { animation: "pulseWave 1.4s infinite ease-in-out 0.4s" }
-  }
-));
-const ContentSkeleton = () => /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React.createElement("div", { className: "h-2.5 w-3/4 rounded bg-muted", style: { animation: "pulse 1.6s ease-in-out infinite" } }), /* @__PURE__ */ React.createElement("div", { className: "h-2.5 w-full rounded bg-muted", style: { animation: "pulse 1.6s ease-in-out infinite 0.15s" } }), /* @__PURE__ */ React.createElement("div", { className: "h-2.5 w-5/6 rounded bg-muted", style: { animation: "pulse 1.6s ease-in-out infinite 0.3s" } }));
-const PageCardHeader = ({ url, domain, reading }) => /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(Favicon, { url, className: "h-4 w-4 flex-shrink-0" }), /* @__PURE__ */ React.createElement(
-  "a",
-  {
-    href: url || void 0,
-    target: "_blank",
-    rel: "noopener noreferrer",
-    onClick: (e) => e.stopPropagation(),
-    className: "min-w-0 flex-1 truncate text-xs font-medium text-primary/90 hover:underline",
-    title: url
-  },
-  domain || url
-), reading ? /* @__PURE__ */ React.createElement("span", { className: "flex flex-shrink-0 items-center gap-1.5" }, /* @__PURE__ */ React.createElement("span", { className: "text-xs font-medium text-primary" }, "Reading"), /* @__PURE__ */ React.createElement(PulsingDots, null)) : /* @__PURE__ */ React.createElement(BookOpenCheck, { className: "h-3.5 w-3.5 flex-shrink-0 text-primary" }));
+] });
+const ContentSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+  /* @__PURE__ */ jsx("div", { className: "h-2.5 w-3/4 rounded bg-muted", style: { animation: "pulse 1.6s ease-in-out infinite" } }),
+  /* @__PURE__ */ jsx("div", { className: "h-2.5 w-full rounded bg-muted", style: { animation: "pulse 1.6s ease-in-out infinite 0.15s" } }),
+  /* @__PURE__ */ jsx("div", { className: "h-2.5 w-5/6 rounded bg-muted", style: { animation: "pulse 1.6s ease-in-out infinite 0.3s" } })
+] });
+const PageCardHeader = ({ url, domain, reading }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+  /* @__PURE__ */ jsx(Favicon, { url, className: "h-4 w-4 flex-shrink-0" }),
+  /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: url || void 0,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onClick: (e) => e.stopPropagation(),
+      className: "min-w-0 flex-1 truncate text-xs font-medium text-primary/90 hover:underline",
+      title: url,
+      children: domain || url
+    }
+  ),
+  reading ? /* @__PURE__ */ jsxs("span", { className: "flex flex-shrink-0 items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-primary", children: "Reading" }),
+    /* @__PURE__ */ jsx(PulsingDots, {})
+  ] }) : /* @__PURE__ */ jsx(BookOpenCheck, { className: "h-3.5 w-3.5 flex-shrink-0 text-primary" })
+] });
 const ReadingCard = ({
   url,
   index
-}) => /* @__PURE__ */ React.createElement(
+}) => /* @__PURE__ */ jsxs(
   "div",
   {
     className: "relative animate-in fade-in slide-in-from-bottom-1 rounded-lg border border-primary/20 bg-primary/5 p-3 shadow-sm",
@@ -97,14 +113,19 @@ const ReadingCard = ({
       animationDelay: `${Math.min(index, 8) * 70}ms`,
       animationDuration: "260ms",
       animationFillMode: "backwards"
-    }
-  },
-  /* @__PURE__ */ React.createElement(ReadingWave, null),
-  /* @__PURE__ */ React.createElement("div", { className: "relative space-y-2.5" }, /* @__PURE__ */ React.createElement(PageCardHeader, { url, domain: getDomain(url), reading: true }), /* @__PURE__ */ React.createElement(ContentSkeleton, null))
+    },
+    children: [
+      /* @__PURE__ */ jsx(ReadingWave, {}),
+      /* @__PURE__ */ jsxs("div", { className: "relative space-y-2.5", children: [
+        /* @__PURE__ */ jsx(PageCardHeader, { url, domain: getDomain(url), reading: true }),
+        /* @__PURE__ */ jsx(ContentSkeleton, {})
+      ] })
+    ]
+  }
 );
 const ReadPageCard = ({ page, index, onOpen }) => {
   const snippet = page.preview.slice(0, 320);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: "animate-in fade-in slide-in-from-bottom-1 overflow-hidden rounded-lg border border-border bg-card",
@@ -112,35 +133,53 @@ const ReadPageCard = ({ page, index, onOpen }) => {
         animationDelay: `${Math.min(index, 8) * 70}ms`,
         animationDuration: "280ms",
         animationFillMode: "backwards"
-      }
-    },
-    page.image && /* @__PURE__ */ React.createElement("div", { className: "relative h-32 w-full overflow-hidden border-b border-border bg-muted" }, /* @__PURE__ */ React.createElement(
-      InlineMediaRef,
-      {
-        ref: { url: page.image },
-        size: "fill",
-        fit: "cover",
-        alt: page.title || page.domain,
-        fallback: "skeleton",
-        errorFallback: null,
-        rounded: "none",
-        className: "h-full w-full"
-      }
-    )),
-    /* @__PURE__ */ React.createElement("div", { className: "space-y-2 p-3" }, /* @__PURE__ */ React.createElement(PageCardHeader, { url: page.url, domain: page.domain, reading: false }), page.title && /* @__PURE__ */ React.createElement(
-      "a",
-      {
-        href: page.url || void 0,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        onClick: (e) => e.stopPropagation(),
-        className: "block text-sm font-semibold leading-snug text-foreground hover:text-primary"
       },
-      page.title
-    ), page.aiReview && /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-1.5 rounded-md border border-primary/15 bg-primary/5 px-2 py-1.5" }, /* @__PURE__ */ React.createElement(AGENT_ICON, { className: "mt-0.5 h-3 w-3 flex-shrink-0 text-primary" }), /* @__PURE__ */ React.createElement("span", { className: "text-xs leading-relaxed text-foreground/85" }, page.aiReview)), snippet && /* @__PURE__ */ React.createElement("p", { className: "line-clamp-3 whitespace-pre-wrap text-xs leading-relaxed text-muted-foreground" }, snippet), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3 pt-0.5 text-xs text-muted-foreground" }, /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-1" }, /* @__PURE__ */ React.createElement(FileText, { className: "h-3 w-3" }), formatCount(page.charCount), " chars"), onOpen && /* @__PURE__ */ React.createElement(Button, { variant: "quiet", tone: "primary", iconEnd: /* @__PURE__ */ React.createElement(ArrowRight, null), onClick: (e) => {
-      e.stopPropagation();
-      onOpen();
-    }, className: "ml-auto" }, "View page")))
+      children: [
+        page.image && /* @__PURE__ */ jsx("div", { className: "relative h-32 w-full overflow-hidden border-b border-border bg-muted", children: /* @__PURE__ */ jsx(
+          InlineMediaRef,
+          {
+            ref: { url: page.image },
+            size: "fill",
+            fit: "cover",
+            alt: page.title || page.domain,
+            fallback: "skeleton",
+            errorFallback: null,
+            rounded: "none",
+            className: "h-full w-full"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2 p-3", children: [
+          /* @__PURE__ */ jsx(PageCardHeader, { url: page.url, domain: page.domain, reading: false }),
+          page.title && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: page.url || void 0,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              onClick: (e) => e.stopPropagation(),
+              className: "block text-sm font-semibold leading-snug text-foreground hover:text-primary",
+              children: page.title
+            }
+          ),
+          page.aiReview && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5 rounded-md border border-primary/15 bg-primary/5 px-2 py-1.5", children: [
+            /* @__PURE__ */ jsx(AGENT_ICON, { className: "mt-0.5 h-3 w-3 flex-shrink-0 text-primary" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs leading-relaxed text-foreground/85", children: page.aiReview })
+          ] }),
+          snippet && /* @__PURE__ */ jsx("p", { className: "line-clamp-3 whitespace-pre-wrap text-xs leading-relaxed text-muted-foreground", children: snippet }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pt-0.5 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(FileText, { className: "h-3 w-3" }),
+              formatCount(page.charCount),
+              " chars"
+            ] }),
+            onOpen && /* @__PURE__ */ jsx(Button, { variant: "quiet", tone: "primary", iconEnd: /* @__PURE__ */ jsx(ArrowRight, {}), onClick: (e) => {
+              e.stopPropagation();
+              onOpen();
+            }, className: "ml-auto", children: "View page" })
+          ] })
+        ] })
+      ]
+    }
   );
 };
 const ScrapeInline = ({
@@ -172,42 +211,73 @@ const ScrapeInline = ({
   const showReading = requestId ? isLatestActivity : !complete;
   if (complete && !ok) {
     const first = parsed.requestedUrls[0];
-    return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 py-2 text-sm text-destructive" }, /* @__PURE__ */ React.createElement(Globe, { className: "h-4 w-4 flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", null, "Couldn't read", " ", first ? getDomain(first) : "the requested page", "."), /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, null));
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-2 text-sm text-destructive", children: [
+      /* @__PURE__ */ jsx(Globe, { className: "h-4 w-4 flex-shrink-0" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Couldn't read",
+        " ",
+        first ? getDomain(first) : "the requested page",
+        "."
+      ] }),
+      /* @__PURE__ */ jsx(ErrorAlchemyMenu, {})
+    ] });
   }
   if (showReading) {
     const readUrls = new Set(parsed.pages.map((p) => p.url));
     const pendingUrls = browsingUrls.filter((u) => !readUrls.has(u));
     const headerCount = browsingUrls.length || parsed.pages.length || 1;
-    return /* @__PURE__ */ React.createElement("div", { className: "space-y-2.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 text-sm text-muted-foreground" }, /* @__PURE__ */ React.createElement(Loader2, { className: "h-4 w-4 animate-spin text-primary" }), /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, "Reading ", headerCount, " ", headerCount === 1 ? "page" : "pages", "\u2026")), /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, parsed.pages.map((page, i) => /* @__PURE__ */ React.createElement(
-      ReadPageCard,
-      {
-        key: `read-${page.url}-${i}`,
-        page,
-        index: i,
-        onOpen: onOpenOverlay ? () => onOpenOverlay(`tool-group-${toolGroupId}`) : void 0
-      }
-    )), pendingUrls.length > 0 ? pendingUrls.map((url, i) => /* @__PURE__ */ React.createElement(
-      ReadingCard,
-      {
-        key: `reading-${url}-${i}`,
-        url,
-        index: parsed.pages.length + i
-      }
-    )) : parsed.pages.length === 0 && // No URLs known yet — a single tasteful "working" card.
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2.5 rounded-lg border border-border bg-muted/20 px-3 py-3" }, /* @__PURE__ */ React.createElement(ScanText, { className: "h-4 w-4 flex-shrink-0 text-primary" }), /* @__PURE__ */ React.createElement("span", { className: "text-xs font-medium text-muted-foreground" }, "Fetching page content\u2026"), /* @__PURE__ */ React.createElement("span", { className: "ml-auto" }, /* @__PURE__ */ React.createElement(PulsingDots, null)))));
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-primary" }),
+        /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+          "Reading ",
+          headerCount,
+          " ",
+          headerCount === 1 ? "page" : "pages",
+          "\u2026"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        parsed.pages.map((page, i) => /* @__PURE__ */ jsx(
+          ReadPageCard,
+          {
+            page,
+            index: i,
+            onOpen: onOpenOverlay ? () => onOpenOverlay(`tool-group-${toolGroupId}`) : void 0
+          },
+          `read-${page.url}-${i}`
+        )),
+        pendingUrls.length > 0 ? pendingUrls.map((url, i) => /* @__PURE__ */ jsx(
+          ReadingCard,
+          {
+            url,
+            index: parsed.pages.length + i
+          },
+          `reading-${url}-${i}`
+        )) : parsed.pages.length === 0 && // No URLs known yet — a single tasteful "working" card.
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 rounded-lg border border-border bg-muted/20 px-3 py-3", children: [
+          /* @__PURE__ */ jsx(ScanText, { className: "h-4 w-4 flex-shrink-0 text-primary" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Fetching page content\u2026" }),
+          /* @__PURE__ */ jsx("span", { className: "ml-auto", children: /* @__PURE__ */ jsx(PulsingDots, {}) })
+        ] })
+      ] })
+    ] });
   }
   if (parsed.pages.length === 0) {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 py-2 text-sm text-muted-foreground" }, /* @__PURE__ */ React.createElement(FileText, { className: "h-4 w-4 flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", null, "No page content captured."));
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-2 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4 flex-shrink-0" }),
+      /* @__PURE__ */ jsx("span", { children: "No page content captured." })
+    ] });
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-2.5" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, parsed.pages.map((page, i) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { className: "space-y-2.5", children: /* @__PURE__ */ jsx("div", { className: "space-y-2", children: parsed.pages.map((page, i) => /* @__PURE__ */ jsx(
     ReadPageCard,
     {
-      key: `${page.url}-${i}`,
       page,
       index: i,
       onOpen: onOpenOverlay ? () => onOpenOverlay(`tool-group-${toolGroupId}`) : void 0
-    }
-  ))));
+    },
+    `${page.url}-${i}`
+  )) }) });
 };
 export {
   ScrapeInline

package/dist/tool-call-visualization/renderers/scrape/ScrapeOverlay.js

@@ -1,6 +1,7 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { formatCount } from "@ai-matrx/kit/format";
-import React, { useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import {
   Globe,
   ExternalLink,
@@ -20,10 +21,10 @@ const Favicon = ({
   const [failed, setFailed] = useState(false);
   const src = url ? getFaviconUrl(url) : "";
   if (failed || !src)
-    return /* @__PURE__ */ React.createElement(Globe, { className: cn("text-muted-foreground", className) });
+    return /* @__PURE__ */ jsx(Globe, { className: cn("text-muted-foreground", className) });
   return (
     // eslint-disable-next-line @next/next/no-img-element -- favicon service, not owned media
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ jsx(
       "img",
       {
         src,
@@ -40,59 +41,112 @@ const ScrapeOverlay = ({ entry }) => {
   const [active, setActive] = useState(0);
   const current = pages[active];
   if (pages.length === 0) {
-    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(FileText, { className: "mx-auto mb-3 h-12 w-12 opacity-40" }), /* @__PURE__ */ React.createElement("p", { className: "text-sm" }, "No page content captured")));
+    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(FileText, { className: "mx-auto mb-3 h-12 w-12 opacity-40" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No page content captured" })
+    ] }) });
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "h-full w-full overflow-hidden bg-background" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 border-b border-border bg-muted/40 px-4 py-2.5" }, /* @__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" }, "(", pages.length, ")")), parsed.totalChars > 0 && /* @__PURE__ */ React.createElement("span", { className: "ml-auto text-xs tabular-nums text-muted-foreground" }, formatCount(parsed.totalChars), " chars total")), /* @__PURE__ */ React.createElement("div", { className: "flex h-[calc(100%-3rem)] flex-col 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-72 md:border-b-0 md:border-r" }, pages.map((p, i) => /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      key: `${p.url}-${i}`,
-      type: "button",
-      onClick: () => setActive(i),
-      className: cn(
-        "flex w-full items-center gap-2 px-3 py-2.5 text-left transition-colors",
-        i === active ? "bg-primary/10" : "hover:bg-muted/40"
-      )
-    },
-    /* @__PURE__ */ React.createElement(Favicon, { url: p.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"
-        )
-      },
-      p.title || p.domain
-    ), /* @__PURE__ */ React.createElement("div", { className: "truncate text-xs text-muted-foreground" }, p.domain, " \xB7 ", formatCount(p.charCount), " chars"))
-  ))), /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1 overflow-y-auto p-4" }, current ? /* @__PURE__ */ React.createElement(React.Fragment, null, current.image && /* @__PURE__ */ React.createElement("div", { className: "relative mb-4 h-48 w-full overflow-hidden rounded-md border border-border bg-muted" }, /* @__PURE__ */ React.createElement(
-    InlineMediaRef,
-    {
-      ref: { url: current.image },
-      size: "fill",
-      fit: "cover",
-      alt: current.title || current.domain,
-      fallback: "skeleton",
-      errorFallback: null,
-      rounded: "none",
-      className: "h-full w-full"
-    }
-  )), /* @__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 || current.domain), /* @__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.aiReview && /* @__PURE__ */ React.createElement("div", { className: "mb-4 flex items-start gap-2 rounded-md border border-primary/15 bg-primary/5 p-3" }, /* @__PURE__ */ React.createElement(AGENT_ICON, { className: "mt-0.5 h-4 w-4 flex-shrink-0 text-primary" }), /* @__PURE__ */ React.createElement("div", { className: "text-sm leading-relaxed text-foreground/90" }, current.aiReview)), current.content ? /* @__PURE__ */ React.createElement("div", { className: "text-sm" }, /* @__PURE__ */ React.createElement(BasicMarkdownContent, { imagePolicy: "other", content: current.content })) : /* @__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: "h-full w-full overflow-hidden bg-background", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border bg-muted/40 px-4 py-2.5", 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: [
+          "(",
+          pages.length,
+          ")"
+        ] })
+      ] }),
+      parsed.totalChars > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-auto text-xs tabular-nums text-muted-foreground", children: [
+        formatCount(parsed.totalChars),
+        " chars total"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex h-[calc(100%-3rem)] flex-col 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-72 md:border-b-0 md:border-r", children: pages.map((p, i) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setActive(i),
+          className: cn(
+            "flex w-full items-center gap-2 px-3 py-2.5 text-left transition-colors",
+            i === active ? "bg-primary/10" : "hover:bg-muted/40"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Favicon, { url: p.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: p.title || p.domain
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "truncate text-xs text-muted-foreground", children: [
+                p.domain,
+                " \xB7 ",
+                formatCount(p.charCount),
+                " chars"
+              ] })
+            ] })
+          ]
+        },
+        `${p.url}-${i}`
+      )) }),
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 overflow-y-auto p-4", children: current ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        current.image && /* @__PURE__ */ jsx("div", { className: "relative mb-4 h-48 w-full overflow-hidden rounded-md border border-border bg-muted", children: /* @__PURE__ */ jsx(
+          InlineMediaRef,
+          {
+            ref: { url: current.image },
+            size: "fill",
+            fit: "cover",
+            alt: current.title || current.domain,
+            fallback: "skeleton",
+            errorFallback: null,
+            rounded: "none",
+            className: "h-full w-full"
+          }
+        ) }),
+        /* @__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 || current.domain }),
+            /* @__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.aiReview && /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-start gap-2 rounded-md border border-primary/15 bg-primary/5 p-3", children: [
+          /* @__PURE__ */ jsx(AGENT_ICON, { className: "mt-0.5 h-4 w-4 flex-shrink-0 text-primary" }),
+          /* @__PURE__ */ jsx("div", { className: "text-sm leading-relaxed text-foreground/90", children: current.aiReview })
+        ] }),
+        current.content ? /* @__PURE__ */ jsx("div", { className: "text-sm", children: /* @__PURE__ */ jsx(BasicMarkdownContent, { imagePolicy: "other", content: current.content }) }) : /* @__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"
+      ] }) })
+    ] })
+  ] });
 };
 export {
   ScrapeOverlay