@tangle-network/sandbox-ui 0.6.1 → 0.9.0

package/dist/{chunk-KH5UDAJ2.js → chunk-QDH5GEGY.js}

@@ -1,9 +1,9 @@
 import {
   ArtifactPane
-} from "./chunk-W4LM3QYZ.js";
+} from "./chunk-HB5Y37YU.js";
 import {
   Markdown
-} from "./chunk-3HW53XTH.js";
+} from "./chunk-T7HMZEVO.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -92,9 +92,9 @@ function getFileColor(name) {
     case "xlsx":
       return "text-emerald-400";
     case "md":
-      return "text-[var(--text-secondary)]";
+      return "text-foreground";
     default:
-      return "text-[var(--text-muted)]";
+      return "text-muted-foreground";
   }
 }
 function TreeNode({ node, depth, selectedPath, onSelect, defaultExpanded }) {
@@ -108,25 +108,27 @@ function TreeNode({ node, depth, selectedPath, onSelect, defaultExpanded }) {
     onSelect?.(node.path, node);
   };
   const Icon = isDir ? expanded ? FolderOpen : Folder : getFileIcon(node.name);
-  const iconColor = isDir ? "text-[var(--brand-cool)]" : getFileColor(node.name);
+  const iconColor = isDir ? "text-primary" : getFileColor(node.name);
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
-        onClick: handleClick,
+        type: "button",
         className: cn(
-          "flex items-center gap-1.5 w-full text-left px-2 py-1 rounded-[var(--radius-sm)] text-sm transition-colors",
-          "hover:bg-[var(--bg-hover)]",
-          isSelected && "bg-[var(--brand-cool)]/10 text-[var(--text-primary)]",
-          !isSelected && "text-[var(--text-secondary)]"
+          "flex items-center gap-1.5 w-full text-left px-2 py-[2px] cursor-pointer text-[13px] transition-colors",
+          "appearance-none bg-transparent border-none",
+          "hover:bg-accent",
+          isSelected ? "bg-primary/15 text-foreground" : "text-foreground"
         ),
         style: { paddingLeft: `${depth * 16 + 8}px` },
+        onClick: handleClick,
+        "aria-expanded": isDir ? expanded : void 0,
         children: [
           isDir && /* @__PURE__ */ jsx(
             ChevronRight,
             {
               className: cn(
-                "h-3 w-3 shrink-0 text-[var(--text-muted)] transition-transform",
+                "h-3 w-3 shrink-0 text-muted-foreground transition-transform",
                 expanded && "rotate-90"
               )
             }
@@ -134,7 +136,7 @@ function TreeNode({ node, depth, selectedPath, onSelect, defaultExpanded }) {
           !isDir && /* @__PURE__ */ jsx("span", { className: "w-3" }),
           /* @__PURE__ */ jsx(Icon, { className: cn("h-4 w-4 shrink-0", iconColor) }),
           /* @__PURE__ */ jsx("span", { className: "truncate", children: node.name }),
-          node.size !== void 0 && !isDir && /* @__PURE__ */ jsx("span", { className: "text-[var(--text-muted)] text-xs ml-auto tabular-nums", children: formatSize(node.size) })
+          node.size !== void 0 && !isDir && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs ml-auto tabular-nums", children: formatSize(node.size) })
         ]
       }
     ),
@@ -171,7 +173,7 @@ function FileTree({
   if (!visibleRoot) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", { className: cn("text-sm font-[var(--font-sans)]", className), children: visibleRoot.children ? visibleRoot.children.sort((a, b) => {
+  return /* @__PURE__ */ jsx("div", { className: cn("text-sm font-sans", className), children: visibleRoot.children ? visibleRoot.children.sort((a, b) => {
     if (a.type !== b.type) return a.type === "directory" ? -1 : 1;
     return a.name.localeCompare(b.name);
   }).map((child) => /* @__PURE__ */ jsx(
@@ -209,11 +211,12 @@ function getPreviewType(filename, mimeType) {
   if (mimeType?.startsWith("image/") || ["png", "jpg", "jpeg", "gif", "svg", "webp"].includes(ext)) return "image";
   if (["csv"].includes(ext)) return "csv";
   if (["xlsx", "xls"].includes(ext)) return "spreadsheet";
-  if (["py", "ts", "js", "tsx", "jsx", "sh", "bash"].includes(ext)) return "code";
+  if (["py", "ts", "js", "tsx", "jsx", "sh", "bash"].includes(ext) || ["profile", "bashrc", "bash_logout", "env", "gitignore"].includes(ext)) return "code";
   if (["json"].includes(ext)) return "json";
   if (["yaml", "yml"].includes(ext)) return "yaml";
   if (["md", "markdown"].includes(ext)) return "markdown";
   if (["txt", "log", "text"].includes(ext)) return "text";
+  if (mimeType?.startsWith("text/plain")) return "text";
   return "unknown";
 }
 function getPreviewLabel(previewType) {
@@ -243,15 +246,15 @@ function getPreviewLabel(previewType) {
 function CodePreview({ content, filename }) {
   const lines = content.split("\n");
   const language = filename.split(".").pop()?.toUpperCase() || "TXT";
-  return /* @__PURE__ */ jsxs2("div", { className: "relative bg-[var(--bg-input)] rounded-[var(--radius-md)] border border-[var(--border-subtle)] overflow-hidden", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3 border-b border-[var(--border-subtle)] px-4 py-2.5", children: [
+  return /* @__PURE__ */ jsxs2("div", { className: "relative bg-background rounded-[var(--radius-md)] border border-border overflow-hidden", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3 border-b border-border px-4 py-2.5", children: [
       /* @__PURE__ */ jsxs2("div", { className: "flex gap-1.5", children: [
         /* @__PURE__ */ jsx2("div", { className: "w-3 h-3 rounded-full bg-[#FF5F57]" }),
         /* @__PURE__ */ jsx2("div", { className: "w-3 h-3 rounded-full bg-[#FEBC2E]" }),
         /* @__PURE__ */ jsx2("div", { className: "w-3 h-3 rounded-full bg-[#8E59FF]" })
       ] }),
-      /* @__PURE__ */ jsx2("div", { className: "ml-2 min-w-0 flex-1 truncate text-xs font-[var(--font-mono)] text-[var(--text-muted)]", children: filename }),
-      /* @__PURE__ */ jsxs2("div", { className: "inline-flex items-center gap-2 rounded-[var(--radius-full)] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-[var(--text-muted)]", children: [
+      /* @__PURE__ */ jsx2("div", { className: "ml-2 min-w-0 flex-1 truncate text-xs font-mono text-muted-foreground", children: filename }),
+      /* @__PURE__ */ jsxs2("div", { className: "inline-flex items-center gap-2 rounded-[var(--radius-full)] border border-border bg-card px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: [
         /* @__PURE__ */ jsx2("span", { children: language }),
         /* @__PURE__ */ jsx2("span", { className: "h-1 w-1 rounded-full bg-[var(--border-hover)]" }),
         /* @__PURE__ */ jsxs2("span", { children: [
@@ -260,9 +263,9 @@ function CodePreview({ content, filename }) {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx2("div", { className: "overflow-auto max-h-[70vh]", children: /* @__PURE__ */ jsx2("table", { className: "w-full", children: /* @__PURE__ */ jsx2("tbody", { children: lines.map((line, i) => /* @__PURE__ */ jsxs2("tr", { className: "hover:bg-[var(--bg-hover)]", children: [
-      /* @__PURE__ */ jsx2("td", { className: "text-right pr-4 pl-4 py-0 select-none text-[var(--text-muted)] text-xs font-[var(--font-mono)] w-10 align-top leading-[1.55]", children: i + 1 }),
-      /* @__PURE__ */ jsx2("td", { className: "pr-4 py-0 font-[var(--font-mono)] text-[13px] text-[var(--text-secondary)] leading-[1.55] whitespace-pre", children: line || " " })
+    /* @__PURE__ */ jsx2("div", { className: "overflow-auto max-h-[70vh]", children: /* @__PURE__ */ jsx2("table", { className: "w-full", children: /* @__PURE__ */ jsx2("tbody", { children: lines.map((line, i) => /* @__PURE__ */ jsxs2("tr", { className: "hover:bg-accent", children: [
+      /* @__PURE__ */ jsx2("td", { className: "text-right pr-4 pl-4 py-0 select-none text-muted-foreground text-xs font-mono w-10 align-top leading-[1.55]", children: i + 1 }),
+      /* @__PURE__ */ jsx2("td", { className: "pr-4 py-0 font-mono text-[13px] text-foreground leading-[1.55] whitespace-pre", children: line || " " })
     ] }, i)) }) }) })
   ] });
 }
@@ -299,19 +302,19 @@ function CsvPreview({ content }) {
   const rows = lines.slice(1).map(
     (line) => parseCsvRow(line).map((cell) => cell.replace(/^"|"$/g, ""))
   );
-  return /* @__PURE__ */ jsx2("div", { className: "overflow-auto max-h-[70vh] rounded-[var(--radius-md)] border border-[var(--border-subtle)]", children: /* @__PURE__ */ jsxs2("table", { className: "w-full text-sm", children: [
-    /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { className: "bg-[var(--bg-elevated)] sticky top-0", children: headers.map((h, i) => /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx2("div", { className: "overflow-auto max-h-[70vh] rounded-[var(--radius-md)] border border-border", children: /* @__PURE__ */ jsxs2("table", { className: "w-full text-sm", children: [
+    /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { className: "bg-muted/50 sticky top-0", children: headers.map((h, i) => /* @__PURE__ */ jsx2(
       "th",
       {
-        className: "px-3 py-2 text-left text-xs font-semibold text-[var(--text-secondary)] border-b border-[var(--border-subtle)] whitespace-nowrap",
+        className: "px-3 py-2 text-left text-xs font-semibold text-foreground border-b border-border whitespace-nowrap",
         children: h
       },
       i
     )) }) }),
-    /* @__PURE__ */ jsx2("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx2("tr", { className: "border-b border-[var(--border-subtle)] hover:bg-[var(--bg-hover)]", children: row.map((cell, j) => /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx2("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx2("tr", { className: "border-b border-border hover:bg-accent", children: row.map((cell, j) => /* @__PURE__ */ jsx2(
       "td",
       {
-        className: "px-3 py-1.5 text-[var(--text-secondary)] font-[var(--font-mono)] text-xs whitespace-nowrap",
+        className: "px-3 py-1.5 text-foreground font-mono text-xs whitespace-nowrap",
         children: cell
       },
       j
@@ -319,10 +322,10 @@ function CsvPreview({ content }) {
   ] }) });
 }
 function ImagePreview({ src, filename }) {
-  return /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-center p-4 bg-[var(--bg-input)] rounded-[var(--radius-md)] border border-[var(--border-subtle)]", children: /* @__PURE__ */ jsx2("img", { src, alt: filename, className: "max-w-full max-h-[70vh] object-contain rounded" }) });
+  return /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-center p-4 bg-background rounded-[var(--radius-md)] border border-border", children: /* @__PURE__ */ jsx2("img", { src, alt: filename, className: "max-w-full max-h-[70vh] object-contain rounded" }) });
 }
 function PdfPreview({ blobUrl, filename }) {
-  return /* @__PURE__ */ jsx2("div", { className: "rounded-[var(--radius-md)] border border-[var(--border-subtle)] overflow-hidden bg-[var(--bg-input)]", children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx2("div", { className: "rounded-[var(--radius-md)] border border-border overflow-hidden bg-background", children: /* @__PURE__ */ jsx2(
     "iframe",
     {
       src: blobUrl,
@@ -332,25 +335,25 @@ function PdfPreview({ blobUrl, filename }) {
   ) });
 }
 function TextPreview({ content }) {
-  return /* @__PURE__ */ jsx2("pre", { className: "bg-[var(--bg-input)] rounded-[var(--radius-md)] border border-[var(--border-subtle)] p-4 overflow-auto max-h-[70vh] text-sm text-[var(--text-secondary)] font-[var(--font-mono)] leading-[1.55]", children: content });
+  return /* @__PURE__ */ jsx2("pre", { className: "bg-background rounded-[var(--radius-md)] border border-border p-4 overflow-auto max-h-[70vh] text-sm text-foreground font-mono leading-[1.55]", children: content });
 }
 function UnsupportedPreview({
   filename,
   title,
   description
 }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center rounded-[var(--radius-md)] border border-dashed border-[var(--border-subtle)] bg-[var(--bg-input)] px-6 py-16 text-center text-[var(--text-muted)]", children: [
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center rounded-[var(--radius-md)] border border-dashed border-border bg-background px-6 py-16 text-center text-muted-foreground", children: [
     /* @__PURE__ */ jsx2(FileText2, { className: "mb-3 h-12 w-12 opacity-30" }),
-    /* @__PURE__ */ jsx2("p", { className: "text-sm text-[var(--text-secondary)]", children: title }),
+    /* @__PURE__ */ jsx2("p", { className: "text-sm text-foreground", children: title }),
     /* @__PURE__ */ jsx2("p", { className: "mt-1 max-w-md text-xs", children: description }),
     /* @__PURE__ */ jsx2("p", { className: "mt-4 text-[11px] uppercase tracking-[0.12em]", children: filename })
   ] });
 }
 function MarkdownPreview({ content }) {
-  return /* @__PURE__ */ jsx2("div", { className: "rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-input)] p-5", children: /* @__PURE__ */ jsx2(Markdown, { className: "prose-sm max-w-none", children: content }) });
+  return /* @__PURE__ */ jsx2("div", { className: "rounded-[var(--radius-md)] border border-border bg-background p-5", children: /* @__PURE__ */ jsx2(Markdown, { className: "prose-sm max-w-none", children: content }) });
 }
 function EmptyPreview({ filename }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center py-16 text-[var(--text-muted)]", children: [
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center py-16 text-muted-foreground", children: [
     /* @__PURE__ */ jsx2(FileText2, { className: "h-12 w-12 mb-3 opacity-30" }),
     /* @__PURE__ */ jsxs2("p", { className: "text-sm", children: [
       "Cannot preview ",
@@ -373,10 +376,10 @@ function FilePreview({
   const previewLabel = getPreviewLabel(previewType);
   const hasRenderableSource = Boolean(content) || Boolean(blobUrl) || previewType === "unknown" || previewType === "spreadsheet";
   return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col h-full", className), children: [
-    !hideHeader && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-[var(--border-subtle)] shrink-0", children: [
+    !hideHeader && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border shrink-0", children: [
       /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx2("div", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: filename }),
-        /* @__PURE__ */ jsx2("div", { className: "mt-0.5 text-[11px] uppercase tracking-[0.12em] text-[var(--text-muted)]", children: previewLabel })
+        /* @__PURE__ */ jsx2("div", { className: "truncate text-sm font-medium text-foreground", children: filename }),
+        /* @__PURE__ */ jsx2("div", { className: "mt-0.5 text-[11px] uppercase tracking-[0.12em] text-muted-foreground", children: previewLabel })
       ] }),
       onDownload && /* @__PURE__ */ jsx2(
         "button",
@@ -384,7 +387,7 @@ function FilePreview({
           type: "button",
           onClick: onDownload,
           "aria-label": `Download ${filename}`,
-          className: "p-1.5 rounded-[var(--radius-sm)] hover:bg-[var(--bg-hover)] text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors",
+          className: "p-1.5 rounded-[var(--radius-sm)] hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
           children: /* @__PURE__ */ jsx2(Download, { className: "h-4 w-4" })
         }
       ),
@@ -394,7 +397,7 @@ function FilePreview({
           type: "button",
           onClick: onClose,
           "aria-label": `Close ${filename}`,
-          className: "p-1.5 rounded-[var(--radius-sm)] hover:bg-[var(--bg-hover)] text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors",
+          className: "p-1.5 rounded-[var(--radius-sm)] hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
           children: /* @__PURE__ */ jsx2(X, { className: "h-4 w-4" })
         }
       )
@@ -402,10 +405,10 @@ function FilePreview({
     /* @__PURE__ */ jsxs2("div", { className: "flex-1 overflow-auto p-3", children: [
       previewType === "pdf" && blobUrl && /* @__PURE__ */ jsx2(PdfPreview, { blobUrl, filename }),
       previewType === "image" && blobUrl && /* @__PURE__ */ jsx2(ImagePreview, { src: blobUrl, filename }),
-      previewType === "csv" && content && /* @__PURE__ */ jsx2(CsvPreview, { content }),
-      (previewType === "code" || previewType === "json" || previewType === "yaml") && content && /* @__PURE__ */ jsx2(CodePreview, { content, filename }),
-      previewType === "text" && content && /* @__PURE__ */ jsx2(TextPreview, { content }),
-      previewType === "markdown" && content && /* @__PURE__ */ jsx2(MarkdownPreview, { content }),
+      previewType === "csv" && typeof content === "string" && /* @__PURE__ */ jsx2(CsvPreview, { content }),
+      (previewType === "code" || previewType === "json" || previewType === "yaml") && typeof content === "string" && /* @__PURE__ */ jsx2(CodePreview, { content, filename }),
+      previewType === "text" && typeof content === "string" && /* @__PURE__ */ jsx2(TextPreview, { content }),
+      previewType === "markdown" && typeof content === "string" && /* @__PURE__ */ jsx2(MarkdownPreview, { content }),
       previewType === "spreadsheet" && /* @__PURE__ */ jsx2(
         UnsupportedPreview,
         {
@@ -414,8 +417,9 @@ function FilePreview({
           description: "Download the workbook or convert it to CSV when you need an inline preview."
         }
       ),
-      previewType === "unknown" && /* @__PURE__ */ jsx2(EmptyPreview, { filename }),
-      !hasRenderableSource && /* @__PURE__ */ jsx2(
+      previewType === "unknown" && typeof content !== "string" && /* @__PURE__ */ jsx2(EmptyPreview, { filename }),
+      previewType === "unknown" && typeof content === "string" && /* @__PURE__ */ jsx2(TextPreview, { content }),
+      !hasRenderableSource && typeof content !== "string" && /* @__PURE__ */ jsx2(
         UnsupportedPreview,
         {
           filename,
@@ -438,15 +442,15 @@ function getTabIcon(name) {
 }
 function FileTabs({ tabs, activeId, onSelect, onClose, className }) {
   if (tabs.length === 0) return null;
-  return /* @__PURE__ */ jsx3("div", { className: cn("flex items-center border-b border-[var(--border-subtle)] bg-[var(--bg-dark)] overflow-x-auto", className), children: tabs.map((tab) => {
+  return /* @__PURE__ */ jsx3("div", { className: cn("flex items-center border-b border-border bg-background overflow-x-auto", className), children: tabs.map((tab) => {
     const isActive = tab.id === activeId;
     const Icon = getTabIcon(tab.name);
     return /* @__PURE__ */ jsxs3(
       "div",
       {
         className: cn(
-          "group flex items-center border-r border-[var(--border-subtle)] shrink-0",
-          isActive ? "bg-[var(--bg-card)] text-[var(--text-primary)] border-b-2 border-b-[var(--brand-cool)]" : "text-[var(--text-muted)] hover:bg-[var(--bg-elevated)]"
+          "group flex items-center border-r border-border shrink-0",
+          isActive ? "bg-card text-foreground border-b-2 border-b-primary" : "text-muted-foreground hover:bg-muted/50"
         ),
         children: [
           /* @__PURE__ */ jsxs3(
@@ -454,11 +458,11 @@ function FileTabs({ tabs, activeId, onSelect, onClose, className }) {
             {
               type: "button",
               onClick: () => onSelect(tab.id),
-              className: "flex min-w-0 items-center gap-1.5 px-3 py-1.5 text-xs transition-colors hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand-cool)]/60",
+              className: "flex min-w-0 items-center gap-1.5 px-3 py-1.5 text-xs transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/60",
               children: [
                 /* @__PURE__ */ jsx3(Icon, { className: "h-3 w-3 shrink-0" }),
                 /* @__PURE__ */ jsx3("span", { className: "max-w-[120px] truncate", children: tab.name }),
-                tab.dirty && /* @__PURE__ */ jsx3("span", { className: "h-1.5 w-1.5 rounded-full bg-[var(--brand-cool)]" })
+                tab.dirty && /* @__PURE__ */ jsx3("span", { className: "h-1.5 w-1.5 rounded-full bg-primary" })
               ]
             }
           ),
@@ -468,7 +472,7 @@ function FileTabs({ tabs, activeId, onSelect, onClose, className }) {
               type: "button",
               "aria-label": `Close ${tab.name}`,
               onClick: () => onClose(tab.id),
-              className: "mr-1 rounded p-0.5 opacity-0 transition-opacity hover:bg-[var(--bg-hover)] focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60 group-hover:opacity-100",
+              className: "mr-1 rounded p-0.5 opacity-0 transition-opacity hover:bg-accent focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 group-hover:opacity-100",
               children: /* @__PURE__ */ jsx3(X2, { className: "h-2.5 w-2.5" })
             }
           )
@@ -484,7 +488,7 @@ import { lazy, Suspense } from "react";
 import { Download as Download2, X as X3 } from "lucide-react";
 import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var LazyDocumentEditorPane = lazy(async () => {
-  const module = await import("./document-editor-pane-DWWUTTTZ.js");
+  const module = await import("./document-editor-pane-TLPVRBBU.js");
   return { default: module.DocumentEditorPane };
 });
 function FileArtifactPane({
@@ -525,7 +529,7 @@ function FileArtifactPane({
         type: "button",
         "aria-label": `Download ${filename}`,
         onClick: onDownload,
-        className: "rounded-[var(--radius-sm)] p-1.5 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+        className: "rounded-[var(--radius-sm)] p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
         children: /* @__PURE__ */ jsx4(Download2, { className: "h-4 w-4" })
       }
     ),
@@ -535,7 +539,7 @@ function FileArtifactPane({
         type: "button",
         "aria-label": `Close ${filename}`,
         onClick: onClose,
-        className: "rounded-[var(--radius-sm)] p-1.5 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+        className: "rounded-[var(--radius-sm)] p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
         children: /* @__PURE__ */ jsx4(X3, { className: "h-4 w-4" })
       }
     )
@@ -556,7 +560,7 @@ function FileArtifactPane({
             className,
             tabs: paneTabs,
             headerActions,
-            children: /* @__PURE__ */ jsx4("div", { className: "flex min-h-[12rem] items-center justify-center rounded-[var(--radius-lg)] border border-dashed border-[var(--border-subtle)] bg-[var(--bg-section)] text-sm text-[var(--text-muted)]", children: "Loading editor\u2026" })
+            children: /* @__PURE__ */ jsx4("div", { className: "flex min-h-[12rem] items-center justify-center rounded-[var(--radius-lg)] border border-dashed border-border bg-muted text-sm text-muted-foreground", children: "Loading editor\u2026" })
           }
         ),
         children: /* @__PURE__ */ jsx4(

package/dist/{chunk-33W2TLUL.js → chunk-QID2OOMG.js}

@@ -1,10 +1,10 @@
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-MJUDMVRU.js";
+} from "./chunk-MT5FJ3ZT.js";
 import {
   Markdown
-} from "./chunk-3HW53XTH.js";
+} from "./chunk-T7HMZEVO.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -54,7 +54,7 @@ function parseToolEvent(event) {
     const toolName = data.name || data.tool || "unknown";
     const input = data.input;
     return {
-      id: data.id || data.toolUseId || crypto.randomUUID(),
+      id: data.id || data.toolUseId || createId(),
       type: mapToolName(toolName),
       label: formatToolLabel(toolName, input),
       status: "running",
@@ -73,6 +73,15 @@ function parseToolEvent(event) {
   }
   return null;
 }
+function createId() {
+  if (typeof globalThis.crypto !== "undefined" && typeof globalThis.crypto.randomUUID === "function") {
+    try {
+      return globalThis.crypto.randomUUID();
+    } catch {
+    }
+  }
+  return `tool_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`;
+}
 function mapToolName(name) {
   const lower = name.toLowerCase();
   if (lower.includes("bash") || lower.includes("terminal") || lower.includes("exec")) return "bash";

package/dist/{chunk-FJSVPBKY.js → chunk-S7OXQTST.js}

@@ -8,12 +8,18 @@ function useAuth({
   const [user, setUser] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(true);
   const [error, setError] = React.useState(null);
+  const retryTimerRef = React.useRef(null);
+  const abortRef = React.useRef(null);
   const fetchSession = React.useCallback(async () => {
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
     setIsLoading(true);
     setError(null);
     try {
       const res = await fetch(`${apiBaseUrl}/auth/session`, {
-        credentials: "include"
+        credentials: "include",
+        signal: controller.signal
       });
       if (!res.ok) {
         throw new Error("Not authenticated");
@@ -25,17 +31,25 @@ function useAuth({
         setUser(null);
       }
     } catch (err) {
+      if (err.name === "AbortError") return;
       setError(err instanceof Error ? err : new Error("Unknown error"));
       setUser(null);
       if (shouldRetryOnError) {
-        setTimeout(fetchSession, 5e3);
+        if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
+        retryTimerRef.current = setTimeout(fetchSession, 5e3);
       }
     } finally {
-      setIsLoading(false);
+      if (!controller.signal.aborted) {
+        setIsLoading(false);
+      }
     }
   }, [apiBaseUrl, shouldRetryOnError]);
   React.useEffect(() => {
     fetchSession();
+    return () => {
+      abortRef.current?.abort();
+      if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
+    };
   }, [fetchSession]);
   React.useEffect(() => {
     if (!revalidateOnFocus) return;

package/dist/chunk-T7HMZEVO.js

@@ -0,0 +1,216 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/markdown/code-block.tsx
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { Check, Copy } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getSyntaxTheme() {
+  const el = typeof document !== "undefined" ? document.documentElement : null;
+  const v = (name, fallback) => el ? getComputedStyle(el).getPropertyValue(name).trim() || fallback : fallback;
+  const comment = v("--syntax-comment", "#6B7094");
+  const keyword = v("--syntax-keyword", "#A78FFF");
+  const string = v("--syntax-string", "#10b981");
+  const fn = v("--syntax-function", "#6D9FFF");
+  const number = v("--syntax-number", "#FFB347");
+  const meta = v("--syntax-meta", "#8263FF");
+  const error = v("--syntax-error", "#FF4D6D");
+  const variable = v("--syntax-variable", "#C4C0D8");
+  const fg = v("--syntax-foreground", "#E8E6F6");
+  return {
+    "hljs-comment": { color: comment, fontStyle: "italic" },
+    "hljs-quote": { color: comment, fontStyle: "italic" },
+    "hljs-doctag": { color: comment },
+    "hljs-keyword": { color: keyword },
+    "hljs-selector-tag": { color: keyword },
+    "hljs-literal": { color: keyword },
+    "hljs-type": { color: keyword },
+    "hljs-class": { color: keyword },
+    "hljs-string": { color: string },
+    "hljs-template-tag": { color: string },
+    "hljs-template-variable": { color: string },
+    "hljs-addition": { color: string },
+    "hljs-regexp": { color: string },
+    "hljs-title": { color: fn },
+    "hljs-section": { color: fn },
+    "hljs-built_in": { color: fn },
+    "hljs-name": { color: fn },
+    "hljs-function": { color: fn },
+    "hljs-selector-id": { color: fn },
+    "hljs-selector-class": { color: fn },
+    "hljs-attribute": { color: fn },
+    "hljs-number": { color: number },
+    "hljs-symbol": { color: number },
+    "hljs-bullet": { color: number },
+    "hljs-link": { color: number, textDecoration: "underline" },
+    "hljs-meta": { color: meta },
+    "hljs-selector-pseudo": { color: meta },
+    "hljs-deletion": { color: error },
+    "hljs-params": { color: variable },
+    "hljs-variable": { color: variable },
+    "hljs-tag": { color: variable },
+    "hljs-attr": { color: variable },
+    "hljs-subst": { color: variable },
+    "hljs-strong": { fontWeight: "bold" },
+    "hljs-emphasis": { fontStyle: "italic" },
+    "hljs": { color: fg, background: "transparent" }
+  };
+}
+var LIGHT_THEMES = /* @__PURE__ */ new Set(["vault", "dawn"]);
+function detectLightTheme() {
+  return typeof document !== "undefined" && LIGHT_THEMES.has(document.documentElement.getAttribute("data-sandbox-theme") ?? "");
+}
+function useIsLightTheme() {
+  const [isLight, setIsLight] = useState(detectLightTheme);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    setIsLight(detectLightTheme());
+    const observer = new MutationObserver(() => setIsLight(detectLightTheme()));
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-sandbox-theme"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return isLight;
+}
+var CodeBlock = memo(
+  ({ code, language, showLineNumbers = false, light: lightProp, className, children, ...props }) => {
+    const isLight = useIsLightTheme();
+    const light = lightProp ?? isLight;
+    const theme = getSyntaxTheme();
+    const bg = "bg-card border-border";
+    const headerBg = light ? "bg-muted/50 border-border" : "bg-background border-border";
+    const langColor = "text-muted-foreground";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("group relative overflow-hidden rounded-lg border font-mono", bg, className),
+        ...props,
+        children: [
+          language && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between border-b px-3 py-1", headerBg), children: [
+            /* @__PURE__ */ jsx("span", { className: cn("text-[calc(var(--font-size-xs)-1px)] font-mono font-medium uppercase tracking-widest", langColor), children: language }),
+            children
+          ] }),
+          !language && children && /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 z-10 flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100", children }),
+          /* @__PURE__ */ jsx(
+            SyntaxHighlighter,
+            {
+              language: language ?? "text",
+              style: theme,
+              showLineNumbers,
+              lineNumberStyle: {
+                color: light ? "#8B92B8" : "#4A4D6A",
+                minWidth: "2.5em",
+                paddingRight: "1em"
+              },
+              customStyle: {
+                margin: 0,
+                padding: "var(--code-padding-y, 0.625rem) var(--code-padding-x, 0.75rem)",
+                background: "transparent",
+                fontSize: "var(--code-font-size, 0.8125rem)",
+                lineHeight: "var(--code-line-height, 1.5)",
+                overflowX: "auto"
+              },
+              codeTagProps: { style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } },
+              wrapLines: false,
+              children: code
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CodeBlock.displayName = "CodeBlock";
+var CopyButton = memo(({ text }) => {
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.warn("Clipboard write failed:", err);
+    }
+  }, [text]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: handleCopy,
+      className: "flex items-center justify-center w-6 h-6 rounded-md bg-muted border border-border hover:border-primary/20 transition-colors",
+      title: "Copy to clipboard",
+      children: copied ? /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-emerald-500" }) : /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5 text-muted-foreground" })
+    }
+  );
+});
+CopyButton.displayName = "CopyButton";
+
+// src/markdown/markdown.tsx
+import { memo as memo2 } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeSanitize from "rehype-sanitize";
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var Markdown = memo2(({ children, className }) => {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cn("prose prose-sm dark:prose-invert max-w-none", className),
+      children: /* @__PURE__ */ jsx2(
+        ReactMarkdown,
+        {
+          remarkPlugins: [remarkGfm],
+          rehypePlugins: [rehypeSanitize],
+          components: {
+            pre({ children: preChildren }) {
+              return /* @__PURE__ */ jsx2(Fragment, { children: preChildren });
+            },
+            code({ className: codeClass, children: codeChildren, ...rest }) {
+              const match = /language-(\w+)/.exec(codeClass || "");
+              const language = match?.[1];
+              const code = String(codeChildren).replace(/\n$/, "");
+              if (!language && !code.includes("\n")) {
+                return /* @__PURE__ */ jsx2(
+                  "code",
+                  {
+                    className: cn(
+                      "px-1.5 py-0.5 rounded border border-border bg-card text-[var(--code-keyword)] text-[0.85em] font-mono",
+                      codeClass
+                    ),
+                    ...rest,
+                    children: codeChildren
+                  }
+                );
+              }
+              return /* @__PURE__ */ jsx2(CodeBlock, { code, language, children: /* @__PURE__ */ jsx2(CopyButton, { text: code }) });
+            }
+          },
+          children
+        }
+      )
+    }
+  );
+});
+Markdown.displayName = "Markdown";
+
+export {
+  CodeBlock,
+  CopyButton,
+  Markdown
+};