@tangle-network/sandbox-ui 0.2.2 → 0.3.3

package/dist/chunk-67C53XVV.js

@@ -0,0 +1,1106 @@
+import {
+  EmptyState,
+  Input
+} from "./chunk-MUOL44AE.js";
+import {
+  ChatContainer
+} from "./chunk-4F2GJRGU.js";
+import {
+  OpenUIArtifactRenderer
+} from "./chunk-YDBXQQLC.js";
+import {
+  ArtifactPane,
+  FileArtifactPane,
+  FileTree,
+  filterFileTree
+} from "./chunk-JF6E2DS5.js";
+import {
+  Markdown
+} from "./chunk-LTFK464G.js";
+import {
+  Badge
+} from "./chunk-MXCSSOGH.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/workspace/workspace-layout.tsx
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  PanelBottomClose,
+  PanelBottomOpen,
+  PanelLeftClose,
+  PanelLeftOpen,
+  PanelRightClose,
+  PanelRightOpen,
+  X
+} from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DESKTOP_BREAKPOINT = "(min-width: 1024px)";
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function readStoredLayout(key) {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(key);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === "object" ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function useDesktopMediaQuery(query) {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === "undefined") return true;
+    return window.matchMedia(query).matches;
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const media = window.matchMedia(query);
+    const handleChange = (event) => {
+      setMatches(event.matches);
+    };
+    setMatches(media.matches);
+    media.addEventListener("change", handleChange);
+    return () => media.removeEventListener("change", handleChange);
+  }, [query]);
+  return matches;
+}
+function ResizeHandle({ label, onDragStart, onStep, className }) {
+  const handlePointerDown = (event) => {
+    event.preventDefault();
+    onDragStart(event.clientX);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      onStep(-24);
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      onStep(24);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      role: "separator",
+      "aria-orientation": "vertical",
+      onPointerDown: handlePointerDown,
+      onKeyDown: handleKeyDown,
+      className: cn(
+        "relative hidden w-3 shrink-0 cursor-col-resize lg:flex",
+        "items-stretch justify-center bg-transparent touch-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-[var(--border-subtle)] transition-colors" }),
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-1/2 w-[3px] -translate-x-1/2 rounded-full bg-transparent hover:bg-[var(--brand-cool)]/30 focus-visible:bg-[var(--brand-cool)]/40" })
+      ]
+    }
+  );
+}
+function MobileDrawer({ side, title, header, onClose, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex lg:hidden", "aria-modal": "true", role: "dialog", "aria-label": title, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Close ${title}`,
+        onClick: onClose,
+        className: "absolute inset-0 bg-black/55 backdrop-blur-[2px]"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        className: cn(
+          "relative flex h-full w-[min(88vw,24rem)] flex-col border-[var(--border-default)] bg-[var(--bg-dark)] shadow-[var(--shadow-dropdown)]",
+          side === "left" ? "border-r" : "ml-auto border-l"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-[var(--border-subtle)] px-4 py-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header ?? /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[var(--text-primary)]", children: title }) }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Close ${title}`,
+                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",
+                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children })
+        ]
+      }
+    )
+  ] });
+}
+function WorkspaceLayout({
+  left,
+  leftHeader,
+  center,
+  centerHeader,
+  centerFooter,
+  right,
+  rightHeader,
+  bottom,
+  defaultLeftOpen = true,
+  defaultRightOpen = false,
+  defaultBottomOpen = false,
+  defaultLeftWidth = 280,
+  defaultRightWidth = 480,
+  minLeftWidth = 220,
+  maxLeftWidth = 420,
+  minRightWidth = 320,
+  maxRightWidth = 720,
+  persistenceKey,
+  resizable = true,
+  theme = "operator",
+  density = "comfortable",
+  leftLabel = "Left workspace panel",
+  rightLabel = "Right workspace panel",
+  bottomLabel = "Bottom runtime panel",
+  className
+}) {
+  const desktop = useDesktopMediaQuery(DESKTOP_BREAKPOINT);
+  const dragStateRef = useRef(null);
+  const storedLayout = useMemo(
+    () => persistenceKey ? readStoredLayout(persistenceKey) : null,
+    [persistenceKey]
+  );
+  const [leftOpen, setLeftOpen] = useState(storedLayout?.leftOpen ?? defaultLeftOpen);
+  const [rightOpen, setRightOpen] = useState(storedLayout?.rightOpen ?? defaultRightOpen);
+  const [bottomOpen, setBottomOpen] = useState(storedLayout?.bottomOpen ?? defaultBottomOpen);
+  const [leftWidth, setLeftWidth] = useState(
+    clamp(storedLayout?.leftWidth ?? defaultLeftWidth, minLeftWidth, maxLeftWidth)
+  );
+  const [rightWidth, setRightWidth] = useState(
+    clamp(storedLayout?.rightWidth ?? defaultRightWidth, minRightWidth, maxRightWidth)
+  );
+  useEffect(() => {
+    if (!persistenceKey || typeof window === "undefined") return;
+    const payload = {
+      leftOpen,
+      rightOpen,
+      bottomOpen,
+      leftWidth,
+      rightWidth
+    };
+    window.localStorage.setItem(persistenceKey, JSON.stringify(payload));
+  }, [bottomOpen, leftOpen, leftWidth, persistenceKey, rightOpen, rightWidth]);
+  useEffect(() => {
+    if (!desktop) return;
+    const handlePointerMove = (event) => {
+      const dragState = dragStateRef.current;
+      if (!dragState) return;
+      if (dragState.side === "left") {
+        const delta = event.clientX - dragState.pointerStartX;
+        setLeftWidth(clamp(dragState.widthStart + delta, minLeftWidth, maxLeftWidth));
+      } else {
+        const delta = dragState.pointerStartX - event.clientX;
+        setRightWidth(clamp(dragState.widthStart + delta, minRightWidth, maxRightWidth));
+      }
+    };
+    const handlePointerUp = () => {
+      dragStateRef.current = null;
+    };
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointercancel", handlePointerUp);
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+      window.removeEventListener("pointercancel", handlePointerUp);
+    };
+  }, [desktop, maxLeftWidth, maxRightWidth, minLeftWidth, minRightWidth]);
+  const leftStyle = useMemo(() => ({ width: `${leftWidth}px` }), [leftWidth]);
+  const rightStyle = useMemo(() => ({ width: `${rightWidth}px` }), [rightWidth]);
+  const startResize = (side, pointerStartX) => {
+    dragStateRef.current = {
+      side,
+      pointerStartX,
+      widthStart: side === "left" ? leftWidth : rightWidth
+    };
+  };
+  const stepLeftWidth = (delta) => {
+    setLeftWidth((current) => clamp(current + delta, minLeftWidth, maxLeftWidth));
+  };
+  const stepRightWidth = (delta) => {
+    setRightWidth((current) => clamp(current + delta, minRightWidth, maxRightWidth));
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-sandbox-ui": "true",
+      "data-sandbox-theme": theme,
+      "data-density": density,
+      className: cn(
+        "flex h-screen flex-col overflow-hidden bg-[radial-gradient(circle_at_top,rgba(98,114,243,0.14),transparent_34%),linear-gradient(180deg,var(--bg-root),var(--bg-dark)_82%)] text-[var(--text-primary)] font-[var(--font-sans)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1", children: [
+          desktop && left && leftOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              "aside",
+              {
+                "aria-label": leftLabel,
+                style: leftStyle,
+                className: "hidden shrink-0 border-r border-[var(--border-subtle)] bg-[var(--bg-dark)] lg:flex lg:flex-col",
+                children: [
+                  leftHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[var(--border-subtle)] px-3 py-2", children: [
+                    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: leftHeader }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": "Collapse left panel",
+                        onClick: () => setLeftOpen(false),
+                        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",
+                        children: /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-4 w-4" })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto py-1", children: left })
+                ]
+              }
+            ),
+            resizable && /* @__PURE__ */ jsx(
+              ResizeHandle,
+              {
+                label: "Resize left panel",
+                onDragStart: (clientX) => startResize("left", clientX),
+                onStep: stepLeftWidth
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("main", { className: "flex min-w-0 flex-1 flex-col", children: [
+            (centerHeader || left || right || bottom) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-[var(--border-subtle)] bg-[var(--bg-dark)] px-3 py-2", children: [
+              left && !leftOpen && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Open left panel",
+                  onClick: () => setLeftOpen(true),
+                  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",
+                  children: /* @__PURE__ */ jsx(PanelLeftOpen, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: centerHeader }),
+              bottom && !bottomOpen && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Open bottom panel",
+                  onClick: () => setBottomOpen(true),
+                  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",
+                  children: /* @__PURE__ */ jsx(PanelBottomOpen, { className: "h-4 w-4" })
+                }
+              ),
+              right && !rightOpen && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Open right panel",
+                  onClick: () => setRightOpen(true),
+                  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",
+                  children: /* @__PURE__ */ jsx(PanelRightOpen, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: center }),
+            bottom && bottomOpen && /* @__PURE__ */ jsxs(
+              "section",
+              {
+                "aria-label": bottomLabel,
+                className: "border-t border-[var(--border-subtle)] bg-[var(--bg-card)]",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[var(--border-subtle)] px-3 py-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-[0.12em] text-[var(--text-muted)]", children: "Runtime" }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": "Collapse bottom panel",
+                        onClick: () => setBottomOpen(false),
+                        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",
+                        children: /* @__PURE__ */ jsx(PanelBottomClose, { className: "h-4 w-4" })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "max-h-56 overflow-auto", children: bottom })
+                ]
+              }
+            ),
+            centerFooter && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-[var(--border-subtle)] bg-[var(--bg-dark)]", children: centerFooter })
+          ] }),
+          desktop && right && rightOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+            resizable && /* @__PURE__ */ jsx(
+              ResizeHandle,
+              {
+                label: "Resize right panel",
+                onDragStart: (clientX) => startResize("right", clientX),
+                onStep: stepRightWidth
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "aside",
+              {
+                "aria-label": rightLabel,
+                style: rightStyle,
+                className: "hidden shrink-0 border-l border-[var(--border-subtle)] bg-[var(--bg-dark)] lg:flex lg:flex-col",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[var(--border-subtle)] px-3 py-2", children: [
+                    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: rightHeader ?? /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[var(--text-primary)]", children: "Artifacts" }) }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": "Collapse right panel",
+                        onClick: () => setRightOpen(false),
+                        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",
+                        children: /* @__PURE__ */ jsx(PanelRightClose, { className: "h-4 w-4" })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: right })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        !desktop && left && leftOpen && /* @__PURE__ */ jsx(
+          MobileDrawer,
+          {
+            side: "left",
+            title: leftLabel,
+            header: leftHeader,
+            onClose: () => setLeftOpen(false),
+            children: left
+          }
+        ),
+        !desktop && right && rightOpen && /* @__PURE__ */ jsx(
+          MobileDrawer,
+          {
+            side: "right",
+            title: rightLabel,
+            header: rightHeader,
+            onClose: () => setRightOpen(false),
+            children: right
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/workspace/directory-pane.tsx
+import { useMemo as useMemo2, useState as useState2 } from "react";
+import { RefreshCw, Search, Upload } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function countNodes(node) {
+  if (node.type === "file") {
+    return { files: 1, directories: 0 };
+  }
+  return (node.children ?? []).reduce(
+    (totals, child) => {
+      const counts = countNodes(child);
+      return {
+        files: totals.files + counts.files,
+        directories: totals.directories + counts.directories
+      };
+    },
+    { files: 0, directories: 1 }
+  );
+}
+function filterTree(node, query) {
+  if (!query) return node;
+  const normalized = query.trim().toLowerCase();
+  const matches = node.name.toLowerCase().includes(normalized) || node.path.toLowerCase().includes(normalized);
+  if (node.type === "file") {
+    return matches ? node : null;
+  }
+  const filteredChildren = (node.children ?? []).map((child) => filterTree(child, normalized)).filter((child) => child !== null);
+  if (matches || filteredChildren.length > 0) {
+    return {
+      ...node,
+      children: filteredChildren
+    };
+  }
+  return null;
+}
+function DirectoryPane({
+  root,
+  selectedPath,
+  onSelect,
+  onRefresh,
+  onUpload,
+  title = "Directory",
+  subtitle,
+  defaultExpanded = true,
+  searchPlaceholder = "Search files and folders\u2026",
+  visibility,
+  className
+}) {
+  const [query, setQuery] = useState2("");
+  const visibleRoot = useMemo2(() => filterFileTree(root, visibility), [root, visibility]);
+  const filteredRoot = useMemo2(
+    () => visibleRoot ? filterTree(visibleRoot, query) : null,
+    [query, visibleRoot]
+  );
+  const counts = useMemo2(() => visibleRoot ? countNodes(visibleRoot) : { files: 0, directories: 0 }, [visibleRoot]);
+  return /* @__PURE__ */ jsx2(
+    ArtifactPane,
+    {
+      eyebrow: "Workspace",
+      title,
+      subtitle: subtitle ?? root.path,
+      className,
+      toolbar: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx2("div", { className: "flex-1", children: /* @__PURE__ */ jsx2(
+          Input,
+          {
+            value: query,
+            onChange: (event) => setQuery(event.target.value),
+            placeholder: searchPlaceholder,
+            className: "h-9"
+          }
+        ) }),
+        onRefresh && /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Refresh directory",
+            onClick: onRefresh,
+            className: "rounded-[var(--radius-sm)] p-2 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",
+            children: /* @__PURE__ */ jsx2(RefreshCw, { className: "h-4 w-4" })
+          }
+        ),
+        onUpload && /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Upload files",
+            onClick: onUpload,
+            className: "rounded-[var(--radius-sm)] p-2 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",
+            children: /* @__PURE__ */ jsx2(Upload, { className: "h-4 w-4" })
+          }
+        )
+      ] }),
+      footer: /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between text-xs text-[var(--text-muted)]", children: [
+        /* @__PURE__ */ jsxs2("span", { children: [
+          counts.files,
+          " files"
+        ] }),
+        /* @__PURE__ */ jsxs2("span", { children: [
+          Math.max(counts.directories - 1, 0),
+          " folders"
+        ] })
+      ] }),
+      emptyState: /* @__PURE__ */ jsx2(
+        EmptyState,
+        {
+          icon: /* @__PURE__ */ jsx2(Search, { className: "h-8 w-8" }),
+          title: "No matching files",
+          description: "Try a different search or clear the current filter."
+        }
+      ),
+      children: filteredRoot ? /* @__PURE__ */ jsx2("div", { className: "p-3", children: /* @__PURE__ */ jsx2(
+        FileTree,
+        {
+          root: filteredRoot,
+          selectedPath,
+          onSelect,
+          defaultExpanded,
+          visibility
+        }
+      ) }) : null
+    }
+  );
+}
+
+// src/workspace/status-banner.tsx
+import { Loader2, AlertCircle, CheckCircle, Wifi } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var BANNER_STYLES = {
+  provisioning: { bg: "bg-[var(--brand-cool)]/5", border: "border-[var(--brand-cool)]/20", icon: Loader2 },
+  connecting: { bg: "bg-[var(--code-number)]/5", border: "border-[var(--code-number)]/20", icon: Wifi },
+  error: { bg: "bg-[var(--code-error)]/5", border: "border-[var(--code-error)]/20", icon: AlertCircle },
+  success: { bg: "bg-[var(--code-success)]/5", border: "border-[var(--code-success)]/20", icon: CheckCircle },
+  info: { bg: "bg-[var(--bg-elevated)]", border: "border-[var(--border-default)]", icon: AlertCircle }
+};
+function StatusBanner({ type, message, detail, onDismiss, className }) {
+  const style = BANNER_STYLES[type];
+  const Icon = style.icon;
+  const isAnimated = type === "provisioning" || type === "connecting";
+  return /* @__PURE__ */ jsxs3("div", { className: cn("flex items-center gap-3 px-4 py-2 border-b text-sm", style.bg, style.border, className), children: [
+    /* @__PURE__ */ jsx3(Icon, { className: cn("h-4 w-4 shrink-0", isAnimated && "animate-spin") }),
+    /* @__PURE__ */ jsx3("span", { className: "text-[var(--text-secondary)]", children: message }),
+    detail && /* @__PURE__ */ jsx3("span", { className: "text-[var(--text-muted)] text-xs", children: detail }),
+    onDismiss && /* @__PURE__ */ jsx3("button", { onClick: onDismiss, className: "ml-auto text-[var(--text-muted)] hover:text-[var(--text-secondary)] text-xs", children: "Dismiss" })
+  ] });
+}
+
+// src/workspace/status-bar.tsx
+import { Zap, FileText, X as X2 } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var STATUS_LABELS = {
+  connected: { label: "", color: "bg-[var(--code-success)]" },
+  connecting: { label: "Connecting...", color: "bg-[var(--code-number)]" },
+  disconnected: { label: "Disconnected", color: "bg-[var(--code-error)]" },
+  provisioning: { label: "Provisioning...", color: "bg-[var(--code-number)]" }
+};
+function StatusBar({
+  modelLabel,
+  onModelClick,
+  credits,
+  contextBadges = [],
+  onRemoveBadge,
+  status = "connected",
+  className
+}) {
+  const statusInfo = STATUS_LABELS[status];
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-3 px-4 py-1.5 border-t border-[var(--border-subtle)] bg-[var(--bg-dark)] text-xs",
+        className
+      ),
+      children: [
+        modelLabel && /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            onClick: onModelClick,
+            className: "inline-flex items-center gap-1.5 px-2 py-0.5 rounded-[var(--radius-full)] border border-[var(--border-subtle)] text-[var(--text-muted)] hover:border-[var(--border-accent)] hover:text-[var(--text-secondary)] transition-colors",
+            children: [
+              /* @__PURE__ */ jsx4("span", { className: cn("w-1.5 h-1.5 rounded-full", statusInfo.color) }),
+              modelLabel
+            ]
+          }
+        ),
+        statusInfo.label && /* @__PURE__ */ jsx4("span", { className: "text-[var(--text-muted)]", children: statusInfo.label }),
+        contextBadges.map((badge) => /* @__PURE__ */ jsxs4(
+          "span",
+          {
+            className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-[var(--radius-full)] border border-[var(--border-accent)] text-[var(--text-secondary)] bg-[var(--border-accent)]/5",
+            children: [
+              /* @__PURE__ */ jsx4(FileText, { className: "h-3 w-3" }),
+              badge.label,
+              badge.count !== void 0 && /* @__PURE__ */ jsx4("span", { className: "text-[var(--text-muted)]", children: badge.count }),
+              onRemoveBadge && /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  onClick: () => onRemoveBadge(badge.id),
+                  className: "hover:text-[var(--text-primary)] transition-colors",
+                  children: /* @__PURE__ */ jsx4(X2, { className: "h-2.5 w-2.5" })
+                }
+              )
+            ]
+          },
+          badge.id
+        )),
+        /* @__PURE__ */ jsx4("div", { className: "flex-1" }),
+        credits !== void 0 && /* @__PURE__ */ jsxs4("span", { className: "inline-flex items-center gap-1 text-[var(--text-muted)]", children: [
+          /* @__PURE__ */ jsx4(Zap, { className: "h-3 w-3" }),
+          credits.toLocaleString(),
+          " credits"
+        ] })
+      ]
+    }
+  );
+}
+
+// src/workspace/terminal-panel.tsx
+import { useRef as useRef2, useEffect as useEffect2 } from "react";
+import { Terminal as TerminalIcon, ChevronDown, ChevronUp, X as X3 } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var LINE_COLORS = {
+  command: "text-[var(--code-function)]",
+  stdout: "text-[var(--text-secondary)]",
+  stderr: "text-[var(--code-error)]",
+  system: "text-[var(--text-muted)]"
+};
+var LINE_PREFIXES = {
+  command: "$ ",
+  stdout: "",
+  stderr: "",
+  system: "# "
+};
+function TerminalPanel({
+  lines,
+  title = "Terminal",
+  isCollapsed = false,
+  onToggle,
+  onClose,
+  maxHeight = 200,
+  className
+}) {
+  const scrollRef = useRef2(null);
+  useEffect2(() => {
+    if (!isCollapsed && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [lines, isCollapsed]);
+  return /* @__PURE__ */ jsxs5("div", { className: cn("border-t border-[var(--border-subtle)] bg-[var(--bg-card)]", className), children: [
+    /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        onClick: onToggle,
+        className: "flex items-center gap-2 w-full px-3 py-1.5 text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors",
+        children: [
+          /* @__PURE__ */ jsx5(TerminalIcon, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx5("span", { className: "font-medium", children: title }),
+          lines.length > 0 && /* @__PURE__ */ jsx5("span", { className: "px-1.5 py-0.5 rounded-[var(--radius-full)] bg-[var(--bg-input)] text-[10px] tabular-nums", children: lines.length }),
+          /* @__PURE__ */ jsx5("div", { className: "flex-1" }),
+          onClose && /* @__PURE__ */ jsx5(X3, { className: "h-3 w-3 hover:text-[var(--text-primary)]", onClick: (e) => {
+            e.stopPropagation();
+            onClose();
+          } }),
+          isCollapsed ? /* @__PURE__ */ jsx5(ChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx5(ChevronDown, { className: "h-3 w-3" })
+        ]
+      }
+    ),
+    !isCollapsed && /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        ref: scrollRef,
+        className: "overflow-auto px-3 pb-2 font-[var(--font-mono)] text-xs leading-[1.6]",
+        style: { maxHeight },
+        children: [
+          lines.map((line) => /* @__PURE__ */ jsxs5("div", { className: cn("whitespace-pre-wrap", LINE_COLORS[line.type]), children: [
+            /* @__PURE__ */ jsx5("span", { className: "text-[var(--text-muted)] select-none", children: LINE_PREFIXES[line.type] }),
+            line.text
+          ] }, line.id)),
+          lines.length === 0 && /* @__PURE__ */ jsx5("div", { className: "text-[var(--text-muted)] py-2", children: "No output yet" })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/workspace/runtime-pane.tsx
+import { Binary, ShieldCheck, TerminalSquare } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function RuntimePane({
+  title = "Runtime",
+  subtitle = "Session state, execution output, and inspection surfaces",
+  statusBanner,
+  statusBar,
+  terminal,
+  audit,
+  inspector,
+  footer,
+  className
+}) {
+  return /* @__PURE__ */ jsxs6(
+    "section",
+    {
+      className: cn(
+        "flex h-full min-h-0 flex-col overflow-hidden bg-[var(--bg-dark)] text-[var(--text-primary)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs6("header", { className: "border-b border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.03),transparent)] px-4 py-3", children: [
+          /* @__PURE__ */ jsx6("div", { className: "mb-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--text-muted)]", children: "Sandbox" }),
+          /* @__PURE__ */ jsx6("div", { className: "text-sm font-semibold text-[var(--text-primary)]", children: title }),
+          /* @__PURE__ */ jsx6("div", { className: "mt-1 text-xs text-[var(--text-muted)]", children: subtitle })
+        ] }),
+        statusBanner && /* @__PURE__ */ jsx6(StatusBanner, { ...statusBanner }),
+        statusBar && /* @__PURE__ */ jsx6(StatusBar, { ...statusBar }),
+        /* @__PURE__ */ jsxs6("div", { className: "grid min-h-0 flex-1 gap-px bg-[var(--border-subtle)] lg:grid-cols-[minmax(0,1.35fr)_minmax(20rem,0.9fr)]", children: [
+          /* @__PURE__ */ jsx6("div", { className: "min-h-0 overflow-auto bg-[var(--bg-card)]", children: terminal ? /* @__PURE__ */ jsx6(
+            TerminalPanel,
+            {
+              ...terminal,
+              className: cn("border-t-0 bg-transparent", terminal.className)
+            }
+          ) : /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center p-6 text-sm text-[var(--text-muted)]", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx6(TerminalSquare, { className: "h-4 w-4" }),
+            "No terminal activity yet"
+          ] }) }) }),
+          /* @__PURE__ */ jsxs6("div", { className: "grid min-h-0 gap-px bg-[var(--border-subtle)]", children: [
+            /* @__PURE__ */ jsx6("div", { className: "min-h-0 overflow-auto bg-[var(--bg-card)]", children: audit ? audit : /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center p-6 text-sm text-[var(--text-muted)]", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx6(ShieldCheck, { className: "h-4 w-4" }),
+              "No audit data available"
+            ] }) }) }),
+            /* @__PURE__ */ jsx6("div", { className: "min-h-0 overflow-auto bg-[var(--bg-card)]", children: inspector ? inspector : /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center p-6 text-sm text-[var(--text-muted)]", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx6(Binary, { className: "h-4 w-4" }),
+              "No runtime inspector attached"
+            ] }) }) })
+          ] })
+        ] }),
+        footer && /* @__PURE__ */ jsx6("footer", { className: "shrink-0 border-t border-[var(--border-subtle)] bg-[var(--bg-card)] px-3 py-2", children: footer })
+      ]
+    }
+  );
+}
+
+// src/workspace/sandbox-workbench.tsx
+import { useEffect as useEffect3, useMemo as useMemo3, useState as useState4 } from "react";
+import {
+  Bot,
+  Boxes,
+  FileCode2,
+  FileText as FileText2,
+  FolderTree,
+  LayoutPanelTop,
+  X as X4
+} from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function getArtifactTabIcon(kind) {
+  switch (kind) {
+    case "file":
+      return FileCode2;
+    case "markdown":
+      return FileText2;
+    case "openui":
+      return LayoutPanelTop;
+    case "custom":
+      return Boxes;
+  }
+}
+function artifactTabLabel(artifact) {
+  if (typeof artifact.title === "string") return artifact.title;
+  if (artifact.kind === "file") return artifact.filename;
+  return "Artifact";
+}
+function ArtifactTabs({
+  artifacts,
+  activeArtifactId,
+  onSelect,
+  onClose
+}) {
+  if (artifacts.length === 0) return null;
+  return /* @__PURE__ */ jsx7("div", { className: "flex items-center overflow-x-auto border-b border-[var(--border-subtle)] bg-[var(--bg-dark)]", children: artifacts.map((artifact) => {
+    const Icon = getArtifactTabIcon(artifact.kind);
+    const isActive = artifact.id === activeArtifactId;
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: cn(
+          "group flex shrink-0 items-center border-r border-[var(--border-subtle)]",
+          isActive ? "border-b-2 border-b-[var(--brand-cool)] bg-[var(--bg-card)] text-[var(--text-primary)]" : "text-[var(--text-muted)] hover:bg-[var(--bg-elevated)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs7(
+            "button",
+            {
+              type: "button",
+              onClick: () => onSelect(artifact.id),
+              className: "flex min-w-0 items-center gap-2 px-3 py-2 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",
+              children: [
+                /* @__PURE__ */ jsx7(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
+                /* @__PURE__ */ jsx7("span", { className: "max-w-[14rem] truncate", children: artifactTabLabel(artifact) })
+              ]
+            }
+          ),
+          onClose && /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Close ${artifactTabLabel(artifact)}`,
+              onClick: () => onClose(artifact.id),
+              className: "mr-1 rounded p-1 opacity-0 transition-opacity hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)] focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60 group-hover:opacity-100",
+              children: /* @__PURE__ */ jsx7(X4, { className: "h-3 w-3" })
+            }
+          )
+        ]
+      },
+      artifact.id
+    );
+  }) });
+}
+function renderArtifact(artifact) {
+  switch (artifact.kind) {
+    case "file":
+      return /* @__PURE__ */ jsx7(
+        FileArtifactPane,
+        {
+          path: artifact.path,
+          filename: artifact.filename,
+          content: artifact.content,
+          blobUrl: artifact.blobUrl,
+          mimeType: artifact.mimeType,
+          onDownload: artifact.onDownload,
+          tabs: artifact.tabs,
+          activeTabId: artifact.activeTabId,
+          onTabSelect: artifact.onTabSelect,
+          onTabClose: artifact.onTabClose,
+          eyebrow: artifact.eyebrow,
+          meta: artifact.meta,
+          toolbar: artifact.toolbar,
+          footer: artifact.footer
+        }
+      );
+    case "markdown":
+      return /* @__PURE__ */ jsx7(
+        ArtifactPane,
+        {
+          eyebrow: artifact.eyebrow ?? "Document",
+          title: artifact.title,
+          subtitle: artifact.subtitle,
+          meta: artifact.meta,
+          headerActions: artifact.headerActions,
+          toolbar: artifact.toolbar,
+          footer: artifact.footer,
+          children: /* @__PURE__ */ jsx7("div", { className: "p-5", children: /* @__PURE__ */ jsx7(Markdown, { className: "prose-sm max-w-none", children: artifact.content }) })
+        }
+      );
+    case "openui":
+      return /* @__PURE__ */ jsx7(
+        ArtifactPane,
+        {
+          eyebrow: artifact.eyebrow ?? "Structured Artifact",
+          title: artifact.title,
+          subtitle: artifact.subtitle,
+          meta: artifact.meta,
+          headerActions: artifact.headerActions,
+          toolbar: artifact.toolbar,
+          footer: artifact.footer,
+          children: /* @__PURE__ */ jsx7(OpenUIArtifactRenderer, { schema: artifact.schema, onAction: artifact.onAction })
+        }
+      );
+    case "custom":
+      return /* @__PURE__ */ jsx7(
+        ArtifactPane,
+        {
+          eyebrow: artifact.eyebrow ?? "Artifact",
+          title: artifact.title,
+          subtitle: artifact.subtitle,
+          meta: artifact.meta,
+          headerActions: artifact.headerActions,
+          toolbar: artifact.toolbar,
+          footer: artifact.footer,
+          children: artifact.content
+        }
+      );
+  }
+}
+function SandboxWorkbench({
+  title = "Sandbox session",
+  subtitle,
+  status,
+  directory,
+  session,
+  artifacts = [],
+  activeArtifactId,
+  onArtifactChange,
+  onArtifactClose,
+  runtime,
+  layout,
+  emptyArtifactState,
+  className
+}) {
+  const [uncontrolledArtifactId, setUncontrolledArtifactId] = useState4(
+    activeArtifactId ?? artifacts[0]?.id
+  );
+  useEffect3(() => {
+    if (activeArtifactId !== void 0) return;
+    setUncontrolledArtifactId((current) => {
+      if (artifacts.length === 0) return void 0;
+      if (current && artifacts.some((artifact) => artifact.id === current)) return current;
+      return artifacts[0]?.id;
+    });
+  }, [activeArtifactId, artifacts]);
+  const resolvedArtifactId = activeArtifactId ?? uncontrolledArtifactId;
+  const activeArtifact = useMemo3(
+    () => artifacts.find((artifact) => artifact.id === resolvedArtifactId),
+    [artifacts, resolvedArtifactId]
+  );
+  const handleArtifactChange = (artifactId) => {
+    if (activeArtifactId === void 0) {
+      setUncontrolledArtifactId(artifactId);
+    }
+    onArtifactChange?.(artifactId);
+  };
+  const centerHeader = /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 items-start justify-between gap-4 rounded-[var(--radius-xl)] border border-[var(--border-subtle)] bg-[linear-gradient(135deg,rgba(98,114,243,0.12),rgba(255,255,255,0.02)_38%,transparent_72%)] px-4 py-3 shadow-[var(--shadow-card)]", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx7("div", { className: "text-[10px] font-semibold uppercase tracking-[0.18em] text-[var(--brand-cool)]", children: "Tangle Sandbox" }),
+      /* @__PURE__ */ jsx7("div", { className: "truncate text-base font-semibold text-[var(--text-primary)]", children: title }),
+      subtitle && /* @__PURE__ */ jsx7("div", { className: "truncate text-sm text-[var(--text-muted)]", children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "flex shrink-0 flex-wrap items-center justify-end gap-2", children: [
+      status,
+      artifacts.length > 0 && /* @__PURE__ */ jsxs7(Badge, { variant: "outline", children: [
+        artifacts.length,
+        " artifacts"
+      ] })
+    ] })
+  ] });
+  const center = /* @__PURE__ */ jsx7(
+    ArtifactPane,
+    {
+      eyebrow: session.eyebrow ?? "Agent Session",
+      title: session.title ?? "Execution timeline",
+      subtitle: session.subtitle,
+      meta: session.meta,
+      headerActions: session.headerActions,
+      className: "h-full",
+      contentClassName: "bg-[radial-gradient(circle_at_top,rgba(82,164,255,0.1),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.02),transparent_22%)]",
+      children: /* @__PURE__ */ jsx7(
+        ChatContainer,
+        {
+          ...session,
+          className: "h-full",
+          presentation: session.presentation ?? "timeline"
+        }
+      )
+    }
+  );
+  const right = artifacts.length > 0 ? /* @__PURE__ */ jsxs7("section", { className: "flex h-full min-h-0 flex-col bg-[var(--bg-dark)]", children: [
+    /* @__PURE__ */ jsx7(
+      ArtifactTabs,
+      {
+        artifacts,
+        activeArtifactId: resolvedArtifactId,
+        onSelect: handleArtifactChange,
+        onClose: onArtifactClose
+      }
+    ),
+    /* @__PURE__ */ jsx7("div", { className: "min-h-0 flex-1 overflow-auto bg-[linear-gradient(180deg,rgba(255,255,255,0.02),transparent)]", children: activeArtifact ? renderArtifact(activeArtifact) : /* @__PURE__ */ jsx7("div", { className: "flex h-full items-center justify-center p-6", children: emptyArtifactState ?? /* @__PURE__ */ jsx7(
+      EmptyState,
+      {
+        icon: /* @__PURE__ */ jsx7(Boxes, { className: "h-8 w-8" }),
+        title: "No artifact selected",
+        description: "Select a generated artifact, file preview, or OpenUI panel to inspect it here."
+      }
+    ) }) })
+  ] }) : null;
+  return /* @__PURE__ */ jsx7(
+    WorkspaceLayout,
+    {
+      left: directory ? /* @__PURE__ */ jsx7(DirectoryPane, { ...directory, className: "h-full" }) : void 0,
+      leftHeader: directory ? /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.12em] text-[var(--text-muted)]", children: [
+        /* @__PURE__ */ jsx7(FolderTree, { className: "h-3.5 w-3.5" }),
+        "Directory"
+      ] }) : void 0,
+      center,
+      centerHeader,
+      right,
+      rightHeader: right ? /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.12em] text-[var(--text-muted)]", children: [
+        /* @__PURE__ */ jsx7(LayoutPanelTop, { className: "h-3.5 w-3.5" }),
+        "Artifacts"
+      ] }) : void 0,
+      bottom: runtime ? /* @__PURE__ */ jsx7(RuntimePane, { ...runtime, className: "h-full" }) : void 0,
+      theme: layout?.theme ?? "operator",
+      density: layout?.density ?? "comfortable",
+      persistenceKey: layout?.persistenceKey,
+      defaultLeftOpen: layout?.defaultLeftOpen ?? Boolean(directory),
+      defaultRightOpen: layout?.defaultRightOpen ?? artifacts.length > 0,
+      defaultBottomOpen: layout?.defaultBottomOpen ?? Boolean(runtime),
+      defaultLeftWidth: layout?.defaultLeftWidth,
+      defaultRightWidth: layout?.defaultRightWidth,
+      minLeftWidth: layout?.minLeftWidth,
+      maxLeftWidth: layout?.maxLeftWidth,
+      minRightWidth: layout?.minRightWidth,
+      maxRightWidth: layout?.maxRightWidth,
+      resizable: layout?.resizable,
+      className: cn("p-3 lg:p-4", className)
+    }
+  );
+}
+function AgentWorkbench(props) {
+  return /* @__PURE__ */ jsx7(
+    SandboxWorkbench,
+    {
+      ...props,
+      session: {
+        ...props.session,
+        eyebrow: props.session.eyebrow ?? "Agent Session",
+        title: props.session.title ?? /* @__PURE__ */ jsxs7("span", { className: "inline-flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx7(Bot, { className: "h-4 w-4 text-[var(--brand-cool)]" }),
+          "Execution timeline"
+        ] })
+      }
+    }
+  );
+}
+
+// src/workspace/audit-results.tsx
+import { useState as useState5 } from "react";
+import { CheckCircle as CheckCircle2, XCircle, ChevronRight, Shield } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function AuditResults({ forms, crossFormChecks = [], overallScore, className }) {
+  const totalPassed = forms.reduce((s, f) => s + f.passed, 0);
+  const totalChecks = forms.reduce((s, f) => s + f.passed + f.failed, 0);
+  return /* @__PURE__ */ jsxs8("div", { className: cn("space-y-3 p-3", className), children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3 px-3 py-2 rounded-[var(--radius-md)] bg-[var(--bg-input)] border border-[var(--border-subtle)]", children: [
+      /* @__PURE__ */ jsx8(Shield, { className: cn("h-5 w-5", totalChecks === totalPassed ? "text-[var(--code-success)]" : "text-[var(--code-number)]") }),
+      /* @__PURE__ */ jsxs8("div", { children: [
+        /* @__PURE__ */ jsxs8("div", { className: "text-sm font-semibold text-[var(--text-primary)]", children: [
+          totalPassed,
+          "/",
+          totalChecks,
+          " checks passed"
+        ] }),
+        overallScore !== void 0 && /* @__PURE__ */ jsxs8("div", { className: "text-xs text-[var(--text-muted)]", children: [
+          "Score: ",
+          overallScore,
+          "/100"
+        ] })
+      ] })
+    ] }),
+    forms.map((form) => /* @__PURE__ */ jsx8(FormAuditCard, { form }, form.formId)),
+    crossFormChecks.length > 0 && /* @__PURE__ */ jsxs8("div", { children: [
+      /* @__PURE__ */ jsx8("div", { className: "text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider mb-1", children: "Cross-Form Checks" }),
+      crossFormChecks.map((check, i) => /* @__PURE__ */ jsx8(CheckRow, { check }, i))
+    ] })
+  ] });
+}
+function FormAuditCard({ form }) {
+  const [expanded, setExpanded] = useState5(form.failed > 0);
+  const allPassed = form.failed === 0 && form.found;
+  return /* @__PURE__ */ jsxs8("div", { className: "rounded-[var(--radius-md)] border border-[var(--border-subtle)] overflow-hidden", children: [
+    /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        onClick: () => setExpanded(!expanded),
+        className: "flex items-center gap-2 w-full px-3 py-2 text-left hover:bg-[var(--bg-hover)] transition-colors",
+        children: [
+          allPassed ? /* @__PURE__ */ jsx8(CheckCircle2, { className: "h-4 w-4 text-[var(--code-success)] shrink-0" }) : !form.found ? /* @__PURE__ */ jsx8(XCircle, { className: "h-4 w-4 text-[var(--code-error)] shrink-0" }) : /* @__PURE__ */ jsx8(XCircle, { className: "h-4 w-4 text-[var(--code-number)] shrink-0" }),
+          /* @__PURE__ */ jsx8("span", { className: "text-sm font-medium text-[var(--text-primary)] flex-1", children: form.formName || form.formId }),
+          /* @__PURE__ */ jsxs8("span", { className: cn("text-xs tabular-nums", allPassed ? "text-[var(--code-success)]" : "text-[var(--text-muted)]"), children: [
+            form.passed,
+            "/",
+            form.passed + form.failed
+          ] }),
+          /* @__PURE__ */ jsx8(ChevronRight, { className: cn("h-3 w-3 text-[var(--text-muted)] transition-transform", expanded && "rotate-90") })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx8("div", { className: "border-t border-[var(--border-subtle)] px-3 py-1.5 space-y-0.5", children: form.checks.map((check, i) => /* @__PURE__ */ jsx8(CheckRow, { check }, i)) })
+  ] });
+}
+function CheckRow({ check }) {
+  return /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 py-1 text-xs", children: [
+    check.passed ? /* @__PURE__ */ jsx8(CheckCircle2, { className: "h-3 w-3 text-[var(--code-success)] shrink-0" }) : /* @__PURE__ */ jsx8(XCircle, { className: "h-3 w-3 text-[var(--code-error)] shrink-0" }),
+    /* @__PURE__ */ jsx8("span", { className: "text-[var(--text-secondary)] flex-1 truncate", children: check.label }),
+    /* @__PURE__ */ jsx8("span", { className: "text-[var(--text-muted)] tabular-nums shrink-0", children: check.passed ? String(check.actual ?? check.expected) : `${check.actual ?? "missing"} \u2260 ${check.expected}` })
+  ] });
+}
+
+export {
+  WorkspaceLayout,
+  DirectoryPane,
+  StatusBanner,
+  StatusBar,
+  TerminalPanel,
+  RuntimePane,
+  SandboxWorkbench,
+  AgentWorkbench,
+  AuditResults
+};