@tangle-network/sandbox-ui 0.3.7 → 0.3.10

package/dist/{chunk-ZSNOGOUX.js → chunk-RQOX5JRR.js}

@@ -1,25 +1,36 @@
+import {
+  useActiveSessions,
+  useNavbarSessions,
+  useProjectActivity,
+  useTotalRunningSessions
+} from "./chunk-OEX7NZE3.js";
 import {
   EmptyState,
   Input
 } from "./chunk-MUOL44AE.js";
 import {
   ChatContainer
-} from "./chunk-PXRPYAMM.js";
+} from "./chunk-6H3EFUUC.js";
 import {
   OpenUIArtifactRenderer
 } from "./chunk-YDBXQQLC.js";
 import {
-  ArtifactPane,
   FileArtifactPane,
   FileTree,
   filterFileTree
-} from "./chunk-JF6E2DS5.js";
+} from "./chunk-ZYGWTIWO.js";
+import {
+  ArtifactPane
+} from "./chunk-W4LM3QYZ.js";
 import {
   Markdown
 } from "./chunk-LTFK464G.js";
 import {
   Badge
 } from "./chunk-MXCSSOGH.js";
+import {
+  Button
+} from "./chunk-HWLX5NME.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -157,6 +168,7 @@ function WorkspaceLayout({
   right,
   rightHeader,
   bottom,
+  bottomHeader,
   defaultLeftOpen = true,
   defaultRightOpen = false,
   defaultBottomOpen = false,
@@ -329,7 +341,7 @@ function WorkspaceLayout({
                 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("div", { className: "min-w-0 flex-1", children: bottomHeader ?? /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-[0.12em] text-[var(--text-muted)]", children: "Runtime" }) }),
                     /* @__PURE__ */ jsx(
                       "button",
                       {
@@ -749,18 +761,406 @@ function RuntimePane({
   );
 }
 
+// src/workspace/session-sidebar.tsx
+import { useMemo as useMemo3, useState as useState4 } from "react";
+import { ArrowLeft, FolderTree, MessageSquareText, Plus, Search as Search2, Settings, Sparkles } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function statusClasses(status) {
+  switch (status) {
+    case "running":
+      return "bg-[var(--brand-cool)] shadow-[0_0_0_4px_color-mix(in_srgb,var(--brand-cool)_18%,transparent)]";
+    case "error":
+      return "bg-[var(--status-danger)]";
+    case "attention-needed":
+      return "bg-[var(--status-warning)]";
+    default:
+      return "bg-[var(--text-dim)]";
+  }
+}
+function iconForLink(icon) {
+  switch (icon) {
+    case "vault":
+      return FolderTree;
+    case "settings":
+      return Settings;
+    case "back":
+      return ArrowLeft;
+    default:
+      return Sparkles;
+  }
+}
+function sortItems(items, sessionStatusById) {
+  return [...items].sort((left, right) => {
+    if (Boolean(left.isPinned) !== Boolean(right.isPinned)) {
+      return left.isPinned ? -1 : 1;
+    }
+    const leftSession = sessionStatusById.get(left.id);
+    const rightSession = sessionStatusById.get(right.id);
+    if (Boolean(leftSession) !== Boolean(rightSession)) {
+      return leftSession ? -1 : 1;
+    }
+    if (leftSession && rightSession) {
+      if (leftSession.isForeground !== rightSession.isForeground) {
+        return Number(rightSession.isForeground) - Number(leftSession.isForeground);
+      }
+      const leftRunning = Number(leftSession.status === "running");
+      const rightRunning = Number(rightSession.status === "running");
+      if (leftRunning !== rightRunning) {
+        return rightRunning - leftRunning;
+      }
+      if (leftSession.lastActivityAt !== rightSession.lastActivityAt) {
+        return rightSession.lastActivityAt - leftSession.lastActivityAt;
+      }
+    }
+    const leftUpdated = left.updatedAt ? new Date(left.updatedAt).getTime() : 0;
+    const rightUpdated = right.updatedAt ? new Date(right.updatedAt).getTime() : 0;
+    return rightUpdated - leftUpdated;
+  });
+}
+function badgeClasses(tone = "neutral") {
+  switch (tone) {
+    case "accent":
+      return "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-[var(--accent-text)]";
+    case "success":
+      return "border-emerald-500/30 bg-emerald-500/10 text-emerald-200";
+    case "warning":
+      return "border-amber-500/30 bg-amber-500/10 text-amber-100";
+    case "danger":
+      return "border-red-500/30 bg-red-500/10 text-red-200";
+    default:
+      return "border-[var(--border-subtle)] bg-[var(--bg-section)] text-[var(--text-secondary)]";
+  }
+}
+function navigateToHref(href) {
+  if (!href || typeof window === "undefined") return;
+  window.location.assign(href);
+}
+function SessionSidebar({
+  title,
+  subtitle,
+  projectId = null,
+  items,
+  currentItemId,
+  createLabel = "New Session",
+  onCreate,
+  onSelectItem,
+  onSelectLink,
+  links = [],
+  className,
+  emptyMessage = "No sessions yet. Start a conversation.",
+  searchPlaceholder = "Search sessions",
+  enableSearch = true,
+  activityMonitor,
+  filters = [],
+  defaultFilterId,
+  renderItemActions
+}) {
+  const [query, setQuery] = useState4("");
+  const [activeFilterId, setActiveFilterId] = useState4(defaultFilterId ?? filters[0]?.id ?? "all");
+  const activeSessions = useNavbarSessions(projectId);
+  const sessionsById = useMemo3(
+    () => new Map(activeSessions.map((session) => [session.sessionId, session])),
+    [activeSessions]
+  );
+  const orderedItems = useMemo3(
+    () => sortItems(items, sessionsById),
+    [items, sessionsById]
+  );
+  const visibleItems = useMemo3(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+    const selectedFilter = filters.find((filter) => filter.id === activeFilterId) ?? null;
+    return orderedItems.filter((item) => {
+      const session = sessionsById.get(item.id) ?? null;
+      const isActive = currentItemId === item.id;
+      if (selectedFilter && !selectedFilter.matches(item, { session, isActive })) {
+        return false;
+      }
+      if (!normalizedQuery) return true;
+      const haystack = `${item.title} ${item.subtitle ?? ""} ${item.category ?? ""} ${(item.badges ?? []).map((badge) => badge.label).join(" ")}`.toLowerCase();
+      return haystack.includes(normalizedQuery);
+    });
+  }, [activeFilterId, currentItemId, filters, orderedItems, query, sessionsById]);
+  const runningCount = activeSessions.filter((session) => session.status === "running").length;
+  const filterCounts = useMemo3(() => Object.fromEntries(filters.map((filter) => [
+    filter.id,
+    orderedItems.filter((item) => filter.matches(item, {
+      session: sessionsById.get(item.id) ?? null,
+      isActive: currentItemId === item.id
+    })).length
+  ])), [currentItemId, filters, orderedItems, sessionsById]);
+  return /* @__PURE__ */ jsxs7("aside", { className: cn("flex w-72 shrink-0 flex-col border-r border-[var(--border-subtle)] bg-[radial-gradient(circle_at_top,rgba(96,165,250,0.12),transparent_26%),var(--bg-card)]/94 backdrop-blur-xl", className), children: [
+    /* @__PURE__ */ jsxs7("div", { className: "border-b border-[var(--border-subtle)] px-4 py-4", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx7("div", { className: "flex h-11 w-11 items-center justify-center rounded-2xl border border-[var(--border-subtle)] bg-[linear-gradient(135deg,rgba(82,164,255,0.22),rgba(82,164,255,0.08))] text-[var(--accent-text)] shadow-[var(--shadow-accent)]", children: /* @__PURE__ */ jsx7(MessageSquareText, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx7("div", { className: "truncate text-sm font-semibold tracking-[0.01em] text-[var(--text-primary)]", children: title }),
+          subtitle && /* @__PURE__ */ jsx7("div", { className: "truncate text-xs text-[var(--text-muted)]", children: subtitle })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { className: "mt-4 grid grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ jsxs7("div", { className: "rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.04),transparent)] px-3 py-2", children: [
+          /* @__PURE__ */ jsx7("div", { className: "text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--text-muted)]", children: "Tracked" }),
+          /* @__PURE__ */ jsx7("div", { className: "mt-1 text-sm font-semibold text-[var(--text-primary)]", children: items.length })
+        ] }),
+        /* @__PURE__ */ jsxs7("div", { className: "rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.04),transparent)] px-3 py-2", children: [
+          /* @__PURE__ */ jsx7("div", { className: "text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--text-muted)]", children: "Running" }),
+          /* @__PURE__ */ jsx7("div", { className: "mt-1 text-sm font-semibold text-[var(--text-primary)]", children: runningCount })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs7(
+        Button,
+        {
+          type: "button",
+          onClick: onCreate,
+          className: "mt-4 w-full justify-center gap-2 rounded-xl bg-[linear-gradient(135deg,var(--brand-cool),var(--brand-glow))] text-white shadow-[var(--shadow-accent)] hover:translate-y-[-1px] hover:brightness-105",
+          children: [
+            /* @__PURE__ */ jsx7(Plus, { className: "h-4 w-4" }),
+            createLabel
+          ]
+        }
+      ),
+      enableSearch && items.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "relative mt-3", children: [
+        /* @__PURE__ */ jsx7(Search2, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--text-dim)]" }),
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            value: query,
+            onChange: (event) => setQuery(event.target.value),
+            placeholder: searchPlaceholder,
+            "aria-label": searchPlaceholder,
+            className: "h-10 w-full rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.04),transparent)] pl-9 pr-3 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-dim)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/45"
+          }
+        )
+      ] }),
+      filters.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mt-3 flex flex-wrap gap-2", children: filters.map((filter) => {
+        const isSelected = activeFilterId === filter.id;
+        return /* @__PURE__ */ jsxs7(
+          "button",
+          {
+            type: "button",
+            onClick: () => setActiveFilterId(filter.id),
+            className: cn(
+              "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors",
+              isSelected ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-[var(--accent-text)]" : "border-[var(--border-subtle)] bg-[var(--bg-section)] text-[var(--text-muted)] hover:text-[var(--text-primary)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx7("span", { children: filter.label }),
+              /* @__PURE__ */ jsx7("span", { className: "rounded-full bg-[var(--bg-card)] px-1.5 py-0.5 text-[10px] text-[var(--text-secondary)]", children: filterCounts[filter.id] ?? 0 })
+            ]
+          },
+          filter.id
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ jsx7("nav", { "aria-label": "Sessions", className: "flex-1 overflow-y-auto px-3 py-3", children: visibleItems.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "rounded-[var(--radius-lg)] border border-dashed border-[var(--border-subtle)] bg-[var(--bg-section)] px-4 py-5 text-sm text-[var(--text-muted)]", children: query.trim() ? `No sessions match "${query.trim()}".` : emptyMessage }) : /* @__PURE__ */ jsx7("ul", { className: "space-y-1.5", children: visibleItems.map((item) => {
+      const session = sessionsById.get(item.id) ?? null;
+      const isActive = currentItemId === item.id;
+      const status = session?.status ?? item.status;
+      const visibleBadges = [
+        ...item.isPinned ? [{ id: `${item.id}-pinned`, label: "Pinned", tone: "accent" }] : [],
+        ...item.badges ?? []
+      ];
+      return /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          className: cn(
+            "group flex items-start gap-2 rounded-[calc(var(--radius-lg)+2px)] border px-2 py-2 transition-colors backdrop-blur-sm",
+            isActive ? "border-[var(--border-accent)] bg-[radial-gradient(circle_at_top_left,rgba(96,165,250,0.16),transparent_40%),var(--accent-surface-soft)] shadow-[var(--shadow-card)]" : "border-transparent bg-transparent hover:border-[var(--border-subtle)] hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.03),transparent)]"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs7(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  if (onSelectItem) {
+                    onSelectItem(item);
+                    return;
+                  }
+                  navigateToHref(item.href);
+                },
+                "aria-current": isActive ? "page" : void 0,
+                className: "min-w-0 flex flex-1 items-start gap-3 rounded-[var(--radius-lg)] px-1 py-1 text-left",
+                children: [
+                  /* @__PURE__ */ jsx7("span", { className: cn("mt-1 h-2.5 w-2.5 shrink-0 rounded-full", statusClasses(status)) }),
+                  /* @__PURE__ */ jsxs7("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx7("div", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: item.title }),
+                    item.subtitle && /* @__PURE__ */ jsx7("div", { className: "mt-0.5 truncate text-xs text-[var(--text-muted)]", children: item.subtitle }),
+                    visibleBadges.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mt-2 flex flex-wrap items-center gap-1.5", children: visibleBadges.map((badge) => /* @__PURE__ */ jsx7(
+                      "span",
+                      {
+                        className: cn(
+                          "inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.08em]",
+                          badgeClasses(badge.tone)
+                        ),
+                        children: badge.label
+                      },
+                      badge.id
+                    )) })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs7("div", { className: "flex shrink-0 items-center gap-2", children: [
+              session?.isForeground && /* @__PURE__ */ jsx7(Badge, { className: "rounded-full border-[var(--border-subtle)] bg-[var(--bg-section)] text-[10px] uppercase tracking-[0.14em] text-[var(--text-secondary)]", children: "Live" }),
+              renderItemActions ? /* @__PURE__ */ jsx7(
+                "div",
+                {
+                  className: "opacity-70 transition-opacity hover:opacity-100 group-hover:opacity-100",
+                  onClick: (event) => event.stopPropagation(),
+                  children: renderItemActions(item, {
+                    session,
+                    isActive
+                  })
+                }
+              ) : null
+            ] })
+          ]
+        }
+      ) }, item.id);
+    }) }) }),
+    activityMonitor && /* @__PURE__ */ jsx7("div", { className: "border-t border-[var(--border-subtle)] px-3 py-3", children: activityMonitor }),
+    links.length > 0 && /* @__PURE__ */ jsx7("nav", { "aria-label": "Workspace sections", className: "border-t border-[var(--border-subtle)] px-3 py-3", children: /* @__PURE__ */ jsx7("div", { className: "space-y-1", children: links.map((link) => {
+      const Icon = iconForLink(link.icon);
+      return /* @__PURE__ */ jsxs7(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            if (onSelectLink) {
+              onSelectLink(link);
+              return;
+            }
+            navigateToHref(link.href);
+          },
+          className: "flex w-full items-center gap-2 rounded-[var(--radius-md)] px-3 py-2 text-left text-sm text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-section)] hover:text-[var(--text-primary)]",
+          children: [
+            /* @__PURE__ */ jsx7(Icon, { className: "h-4 w-4 shrink-0" }),
+            /* @__PURE__ */ jsx7("span", { className: "truncate", children: link.label })
+          ]
+        },
+        link.id
+      );
+    }) }) })
+  ] });
+}
+
+// src/workspace/session-activity-monitor.tsx
+import { Activity, AlertCircle as AlertCircle2, LoaderCircle, MessageSquareText as MessageSquareText2 } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function SessionStatusDot({ session }) {
+  if (session.status === "error") {
+    return /* @__PURE__ */ jsx8(AlertCircle2, { className: "h-3.5 w-3.5 text-[var(--status-danger)]" });
+  }
+  if (session.status === "running") {
+    return /* @__PURE__ */ jsx8(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin text-[var(--brand-cool)]" });
+  }
+  if (session.status === "attention-needed") {
+    return /* @__PURE__ */ jsx8(Activity, { className: "h-3.5 w-3.5 text-[var(--status-warning)]" });
+  }
+  return /* @__PURE__ */ jsx8("span", { className: "h-2 w-2 rounded-full bg-[var(--text-dim)]" });
+}
+function navigateToSession(session) {
+  if (!session.href || typeof window === "undefined") return;
+  window.location.assign(session.href);
+}
+function SessionActivityMonitor({
+  className,
+  compact = false,
+  sessionsById = {},
+  emptyMessage = "No active sessions",
+  resolveProjectLabel,
+  onSelectSession
+}) {
+  const trackedSessions = useActiveSessions();
+  const projectActivity = useProjectActivity();
+  const totalRunning = useTotalRunningSessions();
+  const sessionLookup = Object.keys(sessionsById).length > 0 ? sessionsById : Object.fromEntries(trackedSessions.map((session) => [session.sessionId, session]));
+  if (projectActivity.length === 0) {
+    if (compact) return null;
+    return /* @__PURE__ */ jsx8("div", { className: cn("rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[linear-gradient(180deg,rgba(255,255,255,0.04),transparent)] p-3 text-sm text-[var(--text-muted)]", className), children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsxs8("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between px-1", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-[var(--text-muted)]", children: [
+        /* @__PURE__ */ jsx8(Activity, { className: "h-3.5 w-3.5" }),
+        "Active Sessions"
+      ] }),
+      totalRunning > 0 && /* @__PURE__ */ jsxs8("span", { className: "rounded-full border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] px-2 py-0.5 text-[11px] font-medium text-[var(--accent-text)]", children: [
+        totalRunning,
+        " running"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx8("div", { className: "space-y-2", children: projectActivity.map((project) => {
+      const label = resolveProjectLabel?.(project.projectId, project.projectLabel) ?? project.projectLabel ?? String(project.projectId);
+      return /* @__PURE__ */ jsxs8(
+        "div",
+        {
+          className: "rounded-[calc(var(--radius-lg)+2px)] border border-[var(--border-subtle)] bg-[radial-gradient(circle_at_top_left,rgba(96,165,250,0.12),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.04),transparent),var(--bg-card)]/96 p-3 shadow-[var(--shadow-card)]",
+          children: [
+            /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between gap-3", children: [
+              /* @__PURE__ */ jsxs8("div", { children: [
+                /* @__PURE__ */ jsx8("div", { className: "text-sm font-semibold text-[var(--text-primary)]", children: label }),
+                /* @__PURE__ */ jsxs8("div", { className: "text-xs text-[var(--text-muted)]", children: [
+                  project.activeSessionCount,
+                  " tracked session",
+                  project.activeSessionCount === 1 ? "" : "s"
+                ] })
+              ] }),
+              project.runningSessionIds.length > 0 && /* @__PURE__ */ jsxs8("span", { className: "rounded-full border border-[var(--border-subtle)] bg-[var(--bg-section)] px-2 py-0.5 text-[11px] text-[var(--text-secondary)]", children: [
+                project.runningSessionIds.length,
+                " live"
+              ] })
+            ] }),
+            !compact && project.runningSessionIds.length > 0 && /* @__PURE__ */ jsx8("div", { className: "mt-3 space-y-2", children: project.runningSessionIds.map((sessionId) => {
+              const session = sessionLookup[sessionId];
+              if (!session) return null;
+              return /* @__PURE__ */ jsxs8(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    if (onSelectSession) {
+                      onSelectSession(session);
+                      return;
+                    }
+                    navigateToSession(session);
+                  },
+                  className: "flex w-full items-center justify-between rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-section)] px-3 py-2 text-left transition-colors hover:border-[var(--border-accent)] hover:bg-[var(--bg-elevated)]",
+                  children: [
+                    /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 items-center gap-2", children: [
+                      /* @__PURE__ */ jsx8(SessionStatusDot, { session }),
+                      /* @__PURE__ */ jsxs8("div", { className: "min-w-0", children: [
+                        /* @__PURE__ */ jsx8("div", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: session.title ?? "Untitled Session" }),
+                        /* @__PURE__ */ jsx8("div", { className: "truncate text-xs text-[var(--text-muted)]", children: session.href ?? session.sessionId })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx8(MessageSquareText2, { className: "h-4 w-4 shrink-0 text-[var(--text-dim)]" })
+                  ]
+                },
+                sessionId
+              );
+            }) })
+          ]
+        },
+        String(project.projectId)
+      );
+    }) })
+  ] });
+}
+
 // src/workspace/sandbox-workbench.tsx
-import { useEffect as useEffect3, useMemo as useMemo3, useState as useState4 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo4, useState as useState5 } from "react";
 import {
   Bot,
   Boxes,
   FileCode2,
   FileText as FileText2,
-  FolderTree,
+  FolderTree as FolderTree2,
   LayoutPanelTop,
   X as X4
 } from "lucide-react";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function getArtifactTabIcon(kind) {
   switch (kind) {
     case "file":
@@ -785,10 +1185,10 @@ function ArtifactTabs({
   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) => {
+  return /* @__PURE__ */ jsx9("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(
+    return /* @__PURE__ */ jsxs9(
       "div",
       {
         className: cn(
@@ -796,26 +1196,26 @@ function ArtifactTabs({
           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(
+          /* @__PURE__ */ jsxs9(
             "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) })
+                /* @__PURE__ */ jsx9(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
+                /* @__PURE__ */ jsx9("span", { className: "max-w-[14rem] truncate", children: artifactTabLabel(artifact) })
               ]
             }
           ),
-          onClose && /* @__PURE__ */ jsx7(
+          onClose && /* @__PURE__ */ jsx9(
             "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" })
+              children: /* @__PURE__ */ jsx9(X4, { className: "h-3 w-3" })
             }
           )
         ]
@@ -827,7 +1227,7 @@ function ArtifactTabs({
 function renderArtifact(artifact) {
   switch (artifact.kind) {
     case "file":
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx9(
         FileArtifactPane,
         {
           path: artifact.path,
@@ -847,7 +1247,7 @@ function renderArtifact(artifact) {
         }
       );
     case "markdown":
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx9(
         ArtifactPane,
         {
           eyebrow: artifact.eyebrow ?? "Document",
@@ -857,11 +1257,11 @@ function renderArtifact(artifact) {
           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 }) })
+          children: /* @__PURE__ */ jsx9("div", { className: "p-5", children: /* @__PURE__ */ jsx9(Markdown, { className: "prose-sm max-w-none", children: artifact.content }) })
         }
       );
     case "openui":
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx9(
         ArtifactPane,
         {
           eyebrow: artifact.eyebrow ?? "Structured Artifact",
@@ -871,11 +1271,11 @@ function renderArtifact(artifact) {
           headerActions: artifact.headerActions,
           toolbar: artifact.toolbar,
           footer: artifact.footer,
-          children: /* @__PURE__ */ jsx7(OpenUIArtifactRenderer, { schema: artifact.schema, onAction: artifact.onAction })
+          children: /* @__PURE__ */ jsx9(OpenUIArtifactRenderer, { schema: artifact.schema, onAction: artifact.onAction })
         }
       );
     case "custom":
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx9(
         ArtifactPane,
         {
           eyebrow: artifact.eyebrow ?? "Artifact",
@@ -890,6 +1290,44 @@ function renderArtifact(artifact) {
       );
   }
 }
+function regionHeader(sections, fallback) {
+  if (sections.length !== 1) {
+    return fallback;
+  }
+  switch (sections[0]?.key) {
+    case "directory":
+      return /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.12em] text-[var(--text-muted)]", children: [
+        /* @__PURE__ */ jsx9(FolderTree2, { className: "h-3.5 w-3.5" }),
+        "Directory"
+      ] });
+    case "artifacts":
+      return /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.12em] text-[var(--text-muted)]", children: [
+        /* @__PURE__ */ jsx9(LayoutPanelTop, { className: "h-3.5 w-3.5" }),
+        "Artifacts"
+      ] });
+    case "runtime":
+      return /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.12em] text-[var(--text-muted)]", children: [
+        /* @__PURE__ */ jsx9(Bot, { className: "h-3.5 w-3.5" }),
+        "Runtime"
+      ] });
+    default:
+      return fallback;
+  }
+}
+function renderRegion(sections, region) {
+  if (sections.length === 0) return void 0;
+  if (sections.length === 1) return sections[0]?.content;
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      className: cn(
+        "flex min-h-0 h-full gap-3 p-3",
+        region === "bottom" ? "flex-col" : "flex-col"
+      ),
+      children: sections.map((section) => /* @__PURE__ */ jsx9("div", { className: "min-h-0 flex-1 overflow-hidden", children: section.content }, section.key))
+    }
+  );
+}
 function SandboxWorkbench({
   title = "Sandbox session",
   subtitle,
@@ -905,7 +1343,7 @@ function SandboxWorkbench({
   emptyArtifactState,
   className
 }) {
-  const [uncontrolledArtifactId, setUncontrolledArtifactId] = useState4(
+  const [uncontrolledArtifactId, setUncontrolledArtifactId] = useState5(
     activeArtifactId ?? artifacts[0]?.id
   );
   useEffect3(() => {
@@ -917,7 +1355,7 @@ function SandboxWorkbench({
     });
   }, [activeArtifactId, artifacts]);
   const resolvedArtifactId = activeArtifactId ?? uncontrolledArtifactId;
-  const activeArtifact = useMemo3(
+  const activeArtifact = useMemo4(
     () => artifacts.find((artifact) => artifact.id === resolvedArtifactId),
     [artifacts, resolvedArtifactId]
   );
@@ -927,21 +1365,21 @@ function SandboxWorkbench({
     }
     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 })
+  const centerHeader = /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 items-start justify-between gap-4 rounded-[calc(var(--radius-xl)+2px)] border border-[var(--border-subtle)] bg-[radial-gradient(circle_at_top_left,rgba(96,165,250,0.16),transparent_34%),linear-gradient(135deg,rgba(98,114,243,0.14),rgba(255,255,255,0.03)_42%,transparent_76%)] px-4 py-3.5 shadow-[var(--shadow-accent)] backdrop-blur-sm", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx9("div", { className: "text-[10px] font-semibold uppercase tracking-[0.18em] text-[var(--brand-cool)]", children: "Tangle Sandbox" }),
+      /* @__PURE__ */ jsx9("div", { className: "truncate text-[17px] font-semibold tracking-[0.01em] text-[var(--text-primary)]", children: title }),
+      subtitle && /* @__PURE__ */ jsx9("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: [
+    /* @__PURE__ */ jsxs9("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 > 0 && /* @__PURE__ */ jsxs9(Badge, { variant: "outline", children: [
         artifacts.length,
         " artifacts"
       ] })
     ] })
   ] });
-  const center = /* @__PURE__ */ jsx7(
+  const center = /* @__PURE__ */ jsx9(
     ArtifactPane,
     {
       eyebrow: session.eyebrow ?? "Agent Session",
@@ -951,7 +1389,7 @@ function SandboxWorkbench({
       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(
+      children: /* @__PURE__ */ jsx9(
         ChatContainer,
         {
           ...session,
@@ -961,8 +1399,8 @@ function SandboxWorkbench({
       )
     }
   );
-  const right = artifacts.length > 0 ? /* @__PURE__ */ jsxs7("section", { className: "flex h-full min-h-0 flex-col bg-[var(--bg-dark)]", children: [
-    /* @__PURE__ */ jsx7(
+  const artifactPanel = artifacts.length > 0 ? /* @__PURE__ */ jsxs9("section", { className: "flex h-full min-h-0 flex-col bg-[var(--bg-dark)]", children: [
+    /* @__PURE__ */ jsx9(
       ArtifactTabs,
       {
         artifacts,
@@ -971,37 +1409,62 @@ function SandboxWorkbench({
         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(
+    /* @__PURE__ */ jsx9("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__ */ jsx9("div", { className: "flex h-full items-center justify-center p-6", children: emptyArtifactState ?? /* @__PURE__ */ jsx9(
       EmptyState,
       {
-        icon: /* @__PURE__ */ jsx7(Boxes, { className: "h-8 w-8" }),
+        icon: /* @__PURE__ */ jsx9(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(
+  const directoryPlacement = layout?.directoryPlacement ?? (directory ? "left" : "hidden");
+  const artifactPlacement = layout?.artifactPlacement ?? (artifacts.length > 0 ? "right" : "hidden");
+  const runtimePlacement = layout?.runtimePlacement ?? (runtime ? "bottom" : "hidden");
+  const regionSections = {
+    left: [],
+    right: [],
+    bottom: []
+  };
+  if (directory && directoryPlacement !== "hidden") {
+    regionSections[directoryPlacement].push({
+      key: "directory",
+      content: /* @__PURE__ */ jsx9(DirectoryPane, { ...directory, className: "h-full" })
+    });
+  }
+  if (artifactPanel && artifactPlacement !== "hidden") {
+    regionSections[artifactPlacement].push({
+      key: "artifacts",
+      content: artifactPanel
+    });
+  }
+  if (runtime && runtimePlacement !== "hidden") {
+    regionSections[runtimePlacement].push({
+      key: "runtime",
+      content: /* @__PURE__ */ jsx9(RuntimePane, { ...runtime, className: "h-full" })
+    });
+  }
+  const left = renderRegion(regionSections.left, "left");
+  const right = renderRegion(regionSections.right, "right");
+  const bottom = renderRegion(regionSections.bottom, "bottom");
+  const genericPanelsHeader = /* @__PURE__ */ jsx9("span", { className: "text-xs font-semibold uppercase tracking-[0.12em] text-[var(--text-muted)]", children: "Workspace Panels" });
+  return /* @__PURE__ */ jsx9(
     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,
+      left,
+      leftHeader: left ? regionHeader(regionSections.left, genericPanelsHeader) : 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,
+      rightHeader: right ? regionHeader(regionSections.right, genericPanelsHeader) : void 0,
+      bottom,
+      bottomHeader: bottom ? regionHeader(regionSections.bottom, genericPanelsHeader) : 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),
+      defaultLeftOpen: layout?.defaultLeftOpen ?? Boolean(left),
+      defaultRightOpen: layout?.defaultRightOpen ?? Boolean(right),
+      defaultBottomOpen: layout?.defaultBottomOpen ?? Boolean(bottom),
       defaultLeftWidth: layout?.defaultLeftWidth,
       defaultRightWidth: layout?.defaultRightWidth,
       minLeftWidth: layout?.minLeftWidth,
@@ -1014,15 +1477,15 @@ function SandboxWorkbench({
   );
 }
 function AgentWorkbench(props) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx9(
     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)]" }),
+        title: props.session.title ?? /* @__PURE__ */ jsxs9("span", { className: "inline-flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx9(Bot, { className: "h-4 w-4 text-[var(--brand-cool)]" }),
           "Execution timeline"
         ] })
       }
@@ -1031,65 +1494,65 @@ function AgentWorkbench(props) {
 }
 
 // src/workspace/audit-results.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { CheckCircle as CheckCircle2, XCircle, ChevronRight, Shield } from "lucide-react";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs10 } 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: [
+  return /* @__PURE__ */ jsxs10("div", { className: cn("space-y-3 p-3", className), children: [
+    /* @__PURE__ */ jsxs10("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__ */ jsx10(Shield, { className: cn("h-5 w-5", totalChecks === totalPassed ? "text-[var(--code-success)]" : "text-[var(--code-number)]") }),
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsxs10("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: [
+        overallScore !== void 0 && /* @__PURE__ */ jsxs10("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))
+    forms.map((form) => /* @__PURE__ */ jsx10(FormAuditCard, { form }, form.formId)),
+    crossFormChecks.length > 0 && /* @__PURE__ */ jsxs10("div", { children: [
+      /* @__PURE__ */ jsx10("div", { className: "text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider mb-1", children: "Cross-Form Checks" }),
+      crossFormChecks.map((check, i) => /* @__PURE__ */ jsx10(CheckRow, { check }, i))
     ] })
   ] });
 }
 function FormAuditCard({ form }) {
-  const [expanded, setExpanded] = useState5(form.failed > 0);
+  const [expanded, setExpanded] = useState6(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(
+  return /* @__PURE__ */ jsxs10("div", { className: "rounded-[var(--radius-md)] border border-[var(--border-subtle)] overflow-hidden", children: [
+    /* @__PURE__ */ jsxs10(
       "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: [
+          allPassed ? /* @__PURE__ */ jsx10(CheckCircle2, { className: "h-4 w-4 text-[var(--code-success)] shrink-0" }) : !form.found ? /* @__PURE__ */ jsx10(XCircle, { className: "h-4 w-4 text-[var(--code-error)] shrink-0" }) : /* @__PURE__ */ jsx10(XCircle, { className: "h-4 w-4 text-[var(--code-number)] shrink-0" }),
+          /* @__PURE__ */ jsx10("span", { className: "text-sm font-medium text-[var(--text-primary)] flex-1", children: form.formName || form.formId }),
+          /* @__PURE__ */ jsxs10("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") })
+          /* @__PURE__ */ jsx10(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)) })
+    expanded && /* @__PURE__ */ jsx10("div", { className: "border-t border-[var(--border-subtle)] px-3 py-1.5 space-y-0.5", children: form.checks.map((check, i) => /* @__PURE__ */ jsx10(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}` })
+  return /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 py-1 text-xs", children: [
+    check.passed ? /* @__PURE__ */ jsx10(CheckCircle2, { className: "h-3 w-3 text-[var(--code-success)] shrink-0" }) : /* @__PURE__ */ jsx10(XCircle, { className: "h-3 w-3 text-[var(--code-error)] shrink-0" }),
+    /* @__PURE__ */ jsx10("span", { className: "text-[var(--text-secondary)] flex-1 truncate", children: check.label }),
+    /* @__PURE__ */ jsx10("span", { className: "text-[var(--text-muted)] tabular-nums shrink-0", children: check.passed ? String(check.actual ?? check.expected) : `${check.actual ?? "missing"} \u2260 ${check.expected}` })
   ] });
 }
 
@@ -1100,6 +1563,8 @@ export {
   StatusBar,
   TerminalPanel,
   RuntimePane,
+  SessionSidebar,
+  SessionActivityMonitor,
   SandboxWorkbench,
   AgentWorkbench,
   AuditResults