@tangle-network/sandbox-ui 0.5.2 → 0.6.1

package/dist/{chunk-P24K22CV.js → chunk-E2XT3G52.js}

@@ -10,21 +10,21 @@ import {
 } from "./chunk-BRBTD7RH.js";
 import {
   ChatContainer
-} from "./chunk-R3IU37AW.js";
+} from "./chunk-RKXIRRKQ.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-VBWY44UU.js";
+} from "./chunk-OVNLOE3Y.js";
 import {
   FileArtifactPane,
   FileTree,
   filterFileTree
-} from "./chunk-WQH233GF.js";
+} from "./chunk-KH5UDAJ2.js";
 import {
   ArtifactPane
 } from "./chunk-W4LM3QYZ.js";
 import {
   Markdown
-} from "./chunk-H5XYSFYE.js";
+} from "./chunk-3HW53XTH.js";
 import {
   Badge
 } from "./chunk-TDYQBLL5.js";
@@ -832,19 +832,19 @@ function RuntimePane({
 }
 
 // src/workspace/session-sidebar.tsx
-import { useMemo as useMemo3, useState as useState4 } from "react";
+import { useCallback, useMemo as useMemo3, useRef as useRef3, 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) {
+function statusDot(status) {
   switch (status) {
     case "running":
-      return "bg-[var(--brand-cool)] shadow-[0_0_0_4px_color-mix(in_srgb,var(--brand-cool)_18%,transparent)]";
+      return "bg-[var(--status-running)]";
     case "error":
-      return "bg-[var(--status-danger)]";
+      return "bg-[var(--surface-danger-text)]";
     case "attention-needed":
-      return "bg-[var(--status-warning)]";
+      return "bg-[var(--surface-warning-text)]";
     default:
-      return "bg-[var(--text-dim)]";
+      return "bg-muted-foreground/40";
   }
 }
 function iconForLink(icon) {
@@ -887,24 +887,47 @@ function sortItems(items, sessionStatusById) {
     return rightUpdated - leftUpdated;
   });
 }
-function badgeClasses(tone = "neutral") {
+function badgeTone(tone = "neutral") {
   switch (tone) {
     case "accent":
-      return "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-[var(--accent-text)]";
+      return "border-primary/30 bg-primary/10 text-primary";
     case "success":
-      return "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]";
+      return "border-success/30 bg-success/10 text-success";
     case "warning":
-      return "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]";
+      return "border-warning/30 bg-warning/10 text-warning";
     case "danger":
-      return "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]";
+      return "border-destructive/30 bg-destructive/10 text-destructive";
     default:
-      return "border-[var(--border-subtle)] bg-[var(--bg-section)] text-[var(--text-secondary)]";
+      return "border-border bg-muted text-muted-foreground";
   }
 }
 function navigateToHref(href) {
   if (!href || typeof window === "undefined") return;
   window.location.assign(href);
 }
+function useResizable(defaultWidth, min, max, onChange) {
+  const [width, setWidth] = useState4(defaultWidth);
+  const dragging = useRef3(false);
+  const startX = useRef3(0);
+  const startW = useRef3(0);
+  const onPointerDown = useCallback((e) => {
+    dragging.current = true;
+    startX.current = e.clientX;
+    startW.current = width;
+    e.currentTarget.setPointerCapture(e.pointerId);
+  }, [width]);
+  const onPointerMove = useCallback((e) => {
+    if (!dragging.current) return;
+    const delta = e.clientX - startX.current;
+    const next = Math.min(max, Math.max(min, startW.current + delta));
+    setWidth(next);
+    onChange?.(next);
+  }, [min, max, onChange]);
+  const onPointerUp = useCallback(() => {
+    dragging.current = false;
+  }, []);
+  return { width, onPointerDown, onPointerMove, onPointerUp };
+}
 function SessionSidebar({
   title,
   subtitle,
@@ -923,6 +946,11 @@ function SessionSidebar({
   activityMonitor,
   filters = [],
   defaultFilterId,
+  resizable = false,
+  defaultWidth = 256,
+  minWidth = 200,
+  maxWidth = 400,
+  onWidthChange,
   renderItemActions
 }) {
   const [query, setQuery] = useState4("");
@@ -958,154 +986,172 @@ function SessionSidebar({
       isActive: currentItemId === item.id
     })).length
   ])), [currentItemId, filters, orderedItems, sessionsById]);
-  return /* @__PURE__ */ jsxs7("aside", { className: cn("flex w-64 shrink-0 flex-col border-r border-[var(--border-subtle)] bg-[var(--depth-2)]", className), children: [
-    /* @__PURE__ */ jsxs7("div", { className: "border-b border-[var(--border-subtle)] px-3 py-3", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 min-w-0", children: [
-          /* @__PURE__ */ jsx7("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-lg border border-[var(--border-accent)]/50 bg-[var(--accent-surface-soft)] text-[var(--accent-text)]", children: /* @__PURE__ */ jsx7(MessageSquareText, { className: "h-3.5 w-3.5" }) }),
-          /* @__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-[11px] text-[var(--text-muted)]", children: subtitle })
-          ] })
+  const resize = useResizable(defaultWidth, minWidth, maxWidth, onWidthChange);
+  return /* @__PURE__ */ jsxs7(
+    "aside",
+    {
+      className: cn("relative flex shrink-0 flex-col border-r border-border bg-card", className),
+      style: { width: resizable ? resize.width : defaultWidth },
+      children: [
+        /* @__PURE__ */ jsxs7("div", { className: "border-b border-border px-3 py-2.5", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 min-w-0", children: [
+              /* @__PURE__ */ jsx7("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary", children: /* @__PURE__ */ jsx7(MessageSquareText, { className: "h-3 w-3" }) }),
+              /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx7("div", { className: "truncate text-xs font-semibold text-foreground", children: title }),
+                subtitle && /* @__PURE__ */ jsx7("div", { className: "truncate text-[10px] text-muted-foreground", children: subtitle })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1.5 shrink-0", children: [
+              runningCount > 0 && /* @__PURE__ */ jsx7("span", { className: "rounded-full bg-primary/10 px-1.5 py-px text-[10px] font-medium text-primary", children: runningCount }),
+              onCreate && /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  onClick: onCreate,
+                  title: createLabel,
+                  className: "flex h-6 w-6 items-center justify-center rounded-md border border-border text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+                  children: /* @__PURE__ */ jsx7(Plus, { className: "h-3 w-3" })
+                }
+              )
+            ] })
+          ] }),
+          enableSearch && items.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "relative mt-2", children: [
+            /* @__PURE__ */ jsx7(Search2, { className: "pointer-events-none absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" }),
+            /* @__PURE__ */ jsx7(
+              "input",
+              {
+                value: query,
+                onChange: (event) => setQuery(event.target.value),
+                placeholder: searchPlaceholder,
+                "aria-label": searchPlaceholder,
+                className: "h-7 w-full rounded-md border border-border bg-background pl-7 pr-2 text-xs text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              }
+            )
+          ] }),
+          filters.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mt-1.5 flex flex-wrap gap-1", 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 rounded-full border px-2 py-px text-[10px] font-medium transition-colors",
+                  isSelected ? "border-primary/30 bg-primary/10 text-primary" : "border-border text-muted-foreground hover:text-foreground"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx7("span", { children: filter.label }),
+                  /* @__PURE__ */ jsx7("span", { className: "text-[9px] opacity-60", children: filterCounts[filter.id] ?? 0 })
+                ]
+              },
+              filter.id
+            );
+          }) })
         ] }),
-        /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 shrink-0", children: [
-          runningCount > 0 && /* @__PURE__ */ jsx7("span", { className: "rounded-full border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--accent-text)]", children: runningCount }),
-          onCreate && /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx7("nav", { "aria-label": "Sessions", className: "flex-1 overflow-y-auto px-1.5 py-1.5", children: visibleItems.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "rounded-md border border-dashed border-border px-3 py-3 text-xs text-muted-foreground", children: query.trim() ? `No sessions match "${query.trim()}".` : emptyMessage }) : /* @__PURE__ */ jsx7("ul", { className: "space-y-px", 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 relative flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors",
+                isActive ? "bg-accent text-accent-foreground shadow-[inset_2px_0_0_hsl(var(--primary))]" : "text-foreground hover:bg-accent/50"
+              ),
+              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-center gap-2 text-left",
+                    children: [
+                      /* @__PURE__ */ jsx7("span", { className: cn("h-1.5 w-1.5 shrink-0 rounded-full", statusDot(status)) }),
+                      /* @__PURE__ */ jsxs7("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsx7("div", { className: cn(
+                          "truncate text-xs",
+                          isActive ? "font-semibold" : "font-medium"
+                        ), children: item.title }),
+                        item.subtitle && /* @__PURE__ */ jsx7("div", { className: "truncate text-[10px] leading-tight text-muted-foreground", children: item.subtitle })
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs7("div", { className: "flex shrink-0 items-center gap-1", children: [
+                  visibleBadges.length > 0 && visibleBadges.slice(0, 1).map((badge) => /* @__PURE__ */ jsx7(
+                    "span",
+                    {
+                      className: cn(
+                        "rounded-full border px-1.5 py-px text-[8px] font-semibold uppercase",
+                        badgeTone(badge.tone)
+                      ),
+                      children: badge.label
+                    },
+                    badge.id
+                  )),
+                  session?.isForeground && /* @__PURE__ */ jsx7("span", { className: "h-1.5 w-1.5 rounded-full bg-primary animate-pulse", title: "Live" }),
+                  renderItemActions ? /* @__PURE__ */ jsx7(
+                    "div",
+                    {
+                      className: "opacity-0 transition-opacity group-hover:opacity-100",
+                      onClick: (event) => event.stopPropagation(),
+                      children: renderItemActions(item, { session, isActive })
+                    }
+                  ) : null
+                ] })
+              ]
+            }
+          ) }, item.id);
+        }) }) }),
+        activityMonitor && /* @__PURE__ */ jsx7("div", { className: "border-t border-border px-2 py-1.5", children: activityMonitor }),
+        links.length > 0 && /* @__PURE__ */ jsx7("nav", { "aria-label": "Workspace sections", className: "border-t border-border px-1.5 py-1.5", children: /* @__PURE__ */ jsx7("div", { className: "space-y-px", children: links.map((link) => {
+          const Icon = iconForLink(link.icon);
+          return /* @__PURE__ */ jsxs7(
             "button",
             {
               type: "button",
-              onClick: onCreate,
-              title: createLabel,
-              className: "flex h-6 w-6 items-center justify-center rounded-md border border-[var(--border-default)] bg-[var(--bg-section)] text-[var(--text-muted)] transition-colors hover:border-[var(--border-accent)] hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]",
-              children: /* @__PURE__ */ jsx7(Plus, { className: "h-3.5 w-3.5" })
-            }
-          )
-        ] })
-      ] }),
-      enableSearch && items.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "relative mt-2.5", children: [
-        /* @__PURE__ */ jsx7(Search2, { className: "pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[var(--text-dim)]" }),
-        /* @__PURE__ */ jsx7(
-          "input",
+              onClick: () => {
+                if (onSelectLink) {
+                  onSelectLink(link);
+                  return;
+                }
+                navigateToHref(link.href);
+              },
+              className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+              children: [
+                /* @__PURE__ */ jsx7(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
+                /* @__PURE__ */ jsx7("span", { className: "truncate", children: link.label })
+              ]
+            },
+            link.id
+          );
+        }) }) }),
+        resizable && /* @__PURE__ */ jsx7(
+          "div",
           {
-            value: query,
-            onChange: (event) => setQuery(event.target.value),
-            placeholder: searchPlaceholder,
-            "aria-label": searchPlaceholder,
-            className: "h-8 w-full rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-section)] pl-8 pr-3 text-xs text-[var(--text-primary)] placeholder:text-[var(--text-dim)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-accent)]"
+            className: "absolute top-0 right-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/20 active:bg-primary/30 transition-colors",
+            onPointerDown: resize.onPointerDown,
+            onPointerMove: resize.onPointerMove,
+            onPointerUp: resize.onPointerUp,
+            title: "Drag to resize"
           }
         )
-      ] }),
-      filters.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mt-2 flex flex-wrap gap-1", 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 rounded-full border px-2 py-0.5 text-[10px] font-medium transition-colors",
-              isSelected ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-[var(--accent-text)]" : "border-[var(--border-subtle)] bg-transparent text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
-            ),
-            children: [
-              /* @__PURE__ */ jsx7("span", { children: filter.label }),
-              /* @__PURE__ */ jsx7("span", { className: "text-[9px] opacity-70", children: filterCounts[filter.id] ?? 0 })
-            ]
-          },
-          filter.id
-        );
-      }) })
-    ] }),
-    /* @__PURE__ */ jsx7("nav", { "aria-label": "Sessions", className: "flex-1 overflow-y-auto px-2 py-2", children: visibleItems.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "rounded-[var(--radius-md)] border border-dashed border-[var(--border-subtle)] bg-[var(--bg-section)] px-3 py-4 text-xs text-[var(--text-muted)]", children: query.trim() ? `No sessions match "${query.trim()}".` : emptyMessage }) : /* @__PURE__ */ jsx7("ul", { className: "space-y-1", 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-[var(--radius-md)] border px-2 py-2 transition-colors",
-            isActive ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] shadow-[var(--shadow-card)]" : "border-[var(--border-subtle)] bg-transparent hover:border-[var(--border-default)] hover:bg-[var(--bg-section)]"
-          ),
-          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-2.5 text-left",
-                children: [
-                  /* @__PURE__ */ jsx7("span", { className: cn("mt-[5px] h-2 w-2 shrink-0 rounded-full", statusClasses(status)) }),
-                  /* @__PURE__ */ jsxs7("div", { className: "min-w-0 flex-1", children: [
-                    /* @__PURE__ */ jsx7("div", { className: "truncate text-xs font-medium text-[var(--text-primary)]", children: item.title }),
-                    item.subtitle && /* @__PURE__ */ jsx7("div", { className: "mt-0.5 truncate text-[11px] leading-tight text-[var(--text-muted)]", children: item.subtitle }),
-                    visibleBadges.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mt-1.5 flex flex-wrap items-center gap-1", children: visibleBadges.map((badge) => /* @__PURE__ */ jsx7(
-                      "span",
-                      {
-                        className: cn(
-                          "inline-flex items-center rounded-full border px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-[0.06em]",
-                          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-2 py-2", children: activityMonitor }),
-    links.length > 0 && /* @__PURE__ */ jsx7("nav", { "aria-label": "Workspace sections", className: "border-t border-[var(--border-subtle)] px-2 py-2", children: /* @__PURE__ */ jsx7("div", { className: "space-y-0.5", 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-sm)] px-2 py-1.5 text-left text-xs text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-section)] hover:text-[var(--text-primary)]",
-          children: [
-            /* @__PURE__ */ jsx7(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
-            /* @__PURE__ */ jsx7("span", { className: "truncate", children: link.label })
-          ]
-        },
-        link.id
-      );
-    }) }) })
-  ] });
+      ]
+    }
+  );
 }
 
 // src/workspace/session-activity-monitor.tsx
@@ -1113,15 +1159,15 @@ import { Activity, AlertCircle as AlertCircle2, LoaderCircle, MessageSquareText
 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)]" });
+    return /* @__PURE__ */ jsx8(AlertCircle2, { className: "h-3 w-3 text-destructive" });
   }
   if (session.status === "running") {
-    return /* @__PURE__ */ jsx8(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin text-[var(--brand-cool)]" });
+    return /* @__PURE__ */ jsx8(LoaderCircle, { className: "h-3 w-3 animate-spin text-primary" });
   }
   if (session.status === "attention-needed") {
-    return /* @__PURE__ */ jsx8(Activity, { className: "h-3.5 w-3.5 text-[var(--status-warning)]" });
+    return /* @__PURE__ */ jsx8(Activity, { className: "h-3 w-3 text-warning" });
   }
-  return /* @__PURE__ */ jsx8("span", { className: "h-2 w-2 rounded-full bg-[var(--text-dim)]" });
+  return /* @__PURE__ */ jsx8("span", { className: "h-1.5 w-1.5 rounded-full bg-muted-foreground/40" });
 }
 function navigateToSession(session) {
   if (!session.href || typeof window === "undefined") return;
@@ -1141,41 +1187,38 @@ function SessionActivityMonitor({
   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__ */ jsx8("div", { className: cn("rounded-md border border-dashed border-border bg-muted px-3 py-2.5 text-xs text-muted-foreground", 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"
+  return /* @__PURE__ */ jsxs8("div", { className: cn("space-y-1.5", className), children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs8("span", { className: "flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: [
+        /* @__PURE__ */ jsx8(Activity, { className: "h-3 w-3" }),
+        "Active"
       ] }),
-      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"
-      ] })
+      totalRunning > 0 && /* @__PURE__ */ jsx8("span", { className: "rounded-full bg-primary/10 px-1.5 py-px text-[10px] font-medium text-primary", children: totalRunning })
     ] }),
-    /* @__PURE__ */ jsx8("div", { className: "space-y-2", children: projectActivity.map((project) => {
+    /* @__PURE__ */ jsx8("div", { className: "space-y-1", children: projectActivity.map((project) => {
       const label = resolveProjectLabel?.(project.projectId, project.projectLabel) ?? project.projectLabel ?? String(project.projectId);
       return /* @__PURE__ */ jsxs8(
         "div",
         {
-          className: "rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-section)] p-3 shadow-[var(--shadow-card)]",
+          className: "rounded-md border border-border bg-muted",
           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: [
+            /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between gap-2 px-2.5 py-1.5", children: [
+              /* @__PURE__ */ jsxs8("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx8("div", { className: "truncate text-xs font-medium text-foreground", children: label }),
+                /* @__PURE__ */ jsxs8("div", { className: "text-[10px] text-muted-foreground", children: [
                   project.activeSessionCount,
-                  " tracked session",
+                  " 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 > 0 && /* @__PURE__ */ jsxs8("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: [
                 project.runningSessionIds.length,
                 " live"
               ] })
             ] }),
-            !compact && project.runningSessionIds.length > 0 && /* @__PURE__ */ jsx8("div", { className: "mt-3 space-y-2", children: project.runningSessionIds.map((sessionId) => {
+            !compact && project.runningSessionIds.length > 0 && /* @__PURE__ */ jsx8("div", { className: "border-t border-border px-1 py-0.5", children: project.runningSessionIds.map((sessionId) => {
               const session = sessionLookup[sessionId];
               if (!session) return null;
               return /* @__PURE__ */ jsxs8(
@@ -1189,16 +1232,11 @@ function SessionActivityMonitor({
                     }
                     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)]",
+                  className: "flex w-full items-center gap-2 rounded-sm px-2 py-1 text-left transition-colors hover:bg-accent",
                   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)]" })
+                    /* @__PURE__ */ jsx8(SessionStatusDot, { session }),
+                    /* @__PURE__ */ jsx8("span", { className: "min-w-0 truncate text-xs text-foreground", children: session.title ?? "Untitled" }),
+                    /* @__PURE__ */ jsx8(MessageSquareText2, { className: "ml-auto h-3 w-3 shrink-0 text-muted-foreground" })
                   ]
                 },
                 sessionId

package/dist/{chunk-FFOXUHOF.js → chunk-FNYJFCGU.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-W4LM3QYZ.js";
 import {
   Markdown
-} from "./chunk-H5XYSFYE.js";
+} from "./chunk-3HW53XTH.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -933,7 +933,7 @@ function MarkdownDocumentEditor({
     "div",
     {
       className: cn(
-        "flex min-h-[24rem] w-full flex-col overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-input)]",
+        "flex min-h-[14rem] w-full flex-col overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-input)]",
         className
       ),
       children: [
@@ -1213,7 +1213,7 @@ function CollaborativeDocumentSurface({
         placeholder,
         autoFocus,
         readOnly,
-        className: cn("h-full min-h-[28rem]", className),
+        className: cn("h-full min-h-[16rem]", className),
         onUpdate: (editor) => {
           onChange?.(normalizeMarkdown(htmlToMarkdown(editor.getHTML())));
         }

package/dist/{chunk-5CEMHKBP.js → chunk-GW4GRAWJ.js}

@@ -1,6 +1,6 @@
 import {
   Markdown
-} from "./chunk-H5XYSFYE.js";
+} from "./chunk-3HW53XTH.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -40,7 +40,8 @@ function ChatMessage({
           "div",
           {
             className: cn(
-              "min-w-0 max-w-[85%] space-y-1.5 rounded-[var(--radius-xl)] border px-4 py-3",
+              "min-w-0 max-w-[85%] space-y-1 rounded-[var(--radius-lg)] border",
+              "px-[var(--chat-message-px)] py-[var(--chat-message-py)]",
               isUser ? "border-[var(--border-accent)] bg-[var(--depth-3)]" : "border-[var(--border-subtle)] bg-[var(--depth-2)]"
             ),
             children: [

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

@@ -3,7 +3,7 @@ import {
 } from "./chunk-W4LM3QYZ.js";
 import {
   Markdown
-} from "./chunk-H5XYSFYE.js";
+} from "./chunk-3HW53XTH.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -484,7 +484,7 @@ import { lazy, Suspense } from "react";
 import { Download as Download2, X as X3 } from "lucide-react";
 import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var LazyDocumentEditorPane = lazy(async () => {
-  const module = await import("./document-editor-pane-JNXPANWM.js");
+  const module = await import("./document-editor-pane-DWWUTTTZ.js");
   return { default: module.DocumentEditorPane };
 });
 function FileArtifactPane({
@@ -556,7 +556,7 @@ function FileArtifactPane({
             className,
             tabs: paneTabs,
             headerActions,
-            children: /* @__PURE__ */ jsx4("div", { className: "flex min-h-[20rem] items-center justify-center rounded-[var(--radius-lg)] border border-dashed border-[var(--border-subtle)] bg-[var(--bg-section)] text-sm text-[var(--text-muted)]", children: "Loading editor\u2026" })
+            children: /* @__PURE__ */ jsx4("div", { className: "flex min-h-[12rem] items-center justify-center rounded-[var(--radius-lg)] border border-dashed border-[var(--border-subtle)] bg-[var(--bg-section)] text-sm text-[var(--text-muted)]", children: "Loading editor\u2026" })
           }
         ),
         children: /* @__PURE__ */ jsx4(