@tangle-network/sandbox-ui 0.6.0 → 0.6.1

package/dist/chat.js

@@ -8,9 +8,9 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-5F3VOGCT.js";
+} from "./chunk-RKXIRRKQ.js";
 import "./chunk-CNWVHQFY.js";
-import "./chunk-LY32SP6X.js";
+import "./chunk-ZMWWE5RF.js";
 import "./chunk-HRMUF35V.js";
 import "./chunk-MJUDMVRU.js";
 import "./chunk-BX6AQMUS.js";

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

@@ -10,7 +10,7 @@ import {
 } from "./chunk-BRBTD7RH.js";
 import {
   ChatContainer
-} from "./chunk-5F3VOGCT.js";
+} from "./chunk-RKXIRRKQ.js";
 import {
   OpenUIArtifactRenderer
 } from "./chunk-OVNLOE3Y.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(--bg-card)]", 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 w-3 text-[var(--surface-danger-text)]" });
+    return /* @__PURE__ */ jsx8(AlertCircle2, { className: "h-3 w-3 text-destructive" });
   }
   if (session.status === "running") {
-    return /* @__PURE__ */ jsx8(LoaderCircle, { className: "h-3 w-3 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 w-3 text-[var(--surface-warning-text)]" });
+    return /* @__PURE__ */ jsx8(Activity, { className: "h-3 w-3 text-warning" });
   }
-  return /* @__PURE__ */ jsx8("span", { className: "h-1.5 w-1.5 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,38 +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-md)] border border-[var(--border-subtle)] bg-[var(--depth-2)] px-3 py-2 text-xs 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-1.5", className), children: [
-    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between px-0.5", children: [
-      /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-[var(--text-muted)]", 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__ */ jsx8("span", { className: "rounded-full border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] px-1.5 py-px text-[10px] font-medium text-[var(--accent-text)]", children: totalRunning })
+      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-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(--depth-2)]",
+          className: "rounded-md border border-border bg-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-[var(--text-primary)]", children: label }),
-                /* @__PURE__ */ jsxs8("div", { className: "text-[10px] text-[var(--text-muted)]", 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,
                   " session",
                   project.activeSessionCount === 1 ? "" : "s"
                 ] })
               ] }),
-              project.runningSessionIds.length > 0 && /* @__PURE__ */ jsxs8("span", { className: "shrink-0 text-[10px] text-[var(--text-muted)]", 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: "border-t border-[var(--border-subtle)] px-1.5 py-1", 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(
@@ -1186,11 +1232,11 @@ function SessionActivityMonitor({
                     }
                     navigateToSession(session);
                   },
-                  className: "flex w-full items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1 text-left transition-colors hover:bg-[var(--bg-hover)]",
+                  className: "flex w-full items-center gap-2 rounded-sm px-2 py-1 text-left transition-colors hover:bg-accent",
                   children: [
                     /* @__PURE__ */ jsx8(SessionStatusDot, { session }),
-                    /* @__PURE__ */ jsx8("span", { className: "min-w-0 truncate text-xs text-[var(--text-primary)]", children: session.title ?? "Untitled" }),
-                    /* @__PURE__ */ jsx8(MessageSquareText2, { className: "ml-auto h-3 w-3 shrink-0 text-[var(--text-dim)]" })
+                    /* @__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-5F3VOGCT.js → chunk-RKXIRRKQ.js}

@@ -6,7 +6,7 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-LY32SP6X.js";
+} from "./chunk-ZMWWE5RF.js";
 import {
   ToolCallGroup,
   ToolCallStep

package/dist/{chunk-LY32SP6X.js → chunk-ZMWWE5RF.js}

@@ -898,44 +898,32 @@ var InlineThinkingItem = memo10(
         "button",
         {
           className: cn(
-            "w-full rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)] text-left transition-colors",
-            "hover:border-[var(--border-accent-hover)] hover:bg-[var(--bg-hover)]/35",
-            open && "border-[var(--border-accent)] bg-[var(--bg-hover)]/30",
+            "w-full rounded-[var(--radius-lg)] border text-left transition-colors",
+            isActive ? "border-primary/30 bg-primary/10" : "border-border bg-muted hover:bg-accent",
+            open && !isActive && "bg-accent",
             className
           ),
-          children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-3 px-3 py-3", children: [
-            /* @__PURE__ */ jsx12(
-              "div",
-              {
-                className: cn(
-                  "flex h-8 w-8 shrink-0 items-center justify-center rounded-[var(--radius-md)] border",
-                  isActive ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-[var(--accent-text)] shadow-[var(--shadow-glow)]" : "border-[var(--border-subtle)] bg-[var(--bg-section)] text-[var(--text-muted)]"
-                ),
-                children: /* @__PURE__ */ jsx12(Brain, { className: cn("h-4 w-4", isActive && "animate-pulse") })
-              }
-            ),
-            /* @__PURE__ */ jsxs11("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-[var(--text-primary)]", children: isActive ? "Thinking\u2026" : "Reasoning" }),
-                !isActive && durationMs != null ? /* @__PURE__ */ jsx12("span", { className: "rounded-full border border-[var(--border-subtle)] bg-[var(--bg-section)] px-2 py-0.5 text-[11px] font-[var(--font-mono)] text-[var(--text-muted)]", children: formatDuration(durationMs) }) : null,
-                isActive && startTime ? /* @__PURE__ */ jsx12(LiveDuration, { startTime }) : null
-              ] }),
-              preview && !open ? /* @__PURE__ */ jsx12("div", { className: "mt-1 truncate text-xs text-[var(--text-muted)]", children: preview }) : null
-            ] }),
-            open ? /* @__PURE__ */ jsx12(ChevronDown3, { className: "h-3.5 w-3.5 shrink-0 text-[var(--text-muted)]" }) : /* @__PURE__ */ jsx12(ChevronRight3, { className: "h-3.5 w-3.5 shrink-0 text-[var(--text-muted)]" })
+          children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2.5 px-3 py-2", children: [
+            /* @__PURE__ */ jsx12(Brain, { className: cn("h-4 w-4 shrink-0", isActive ? "text-primary animate-pulse" : "text-muted-foreground") }),
+            /* @__PURE__ */ jsx12("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx12("span", { className: "truncate text-xs text-foreground", children: preview ?? (isActive ? "Thinking\u2026" : "Reasoning") }) }),
+            /* @__PURE__ */ jsxs11("div", { className: "flex shrink-0 items-center gap-2", children: [
+              isActive && startTime ? /* @__PURE__ */ jsx12(LiveDuration, { startTime }) : null,
+              !isActive && durationMs != null ? /* @__PURE__ */ jsx12("span", { className: "text-[10px] font-mono tabular-nums text-muted-foreground", children: formatDuration(durationMs) }) : null,
+              open ? /* @__PURE__ */ jsx12(ChevronDown3, { className: "h-3 w-3 text-muted-foreground" }) : /* @__PURE__ */ jsx12(ChevronRight3, { className: "h-3 w-3 text-muted-foreground" })
+            ] })
           ] })
         }
       ) }),
-      /* @__PURE__ */ jsx12(Collapsible2.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: part.text ? /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx12(Collapsible2.Content, { className: "overflow-hidden rounded-b-[var(--radius-lg)] data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: part.text ? /* @__PURE__ */ jsx12(
         "div",
         {
           className: cn(
-            "border-t border-[var(--border-subtle)] px-4 py-4 text-sm text-[var(--text-secondary)]",
+            "max-h-60 overflow-y-auto border-t border-border bg-card px-3 py-3 text-sm leading-relaxed text-foreground",
             contentClassName
           ),
           children: /* @__PURE__ */ jsx12(Markdown, { children: part.text })
         }
-      ) : /* @__PURE__ */ jsx12("div", { className: "border-t border-[var(--border-subtle)] px-4 py-3 text-sm text-[var(--text-muted)]", children: "No reasoning text was provided." }) })
+      ) : /* @__PURE__ */ jsx12("div", { className: "border-t border-border px-3 py-2.5 text-xs text-muted-foreground", children: "No reasoning text provided." }) })
     ] });
   }
 );

package/dist/{expanded-tool-detail-DM5M_T9h.d.ts → expanded-tool-detail-Dh99mcbY.d.ts}

@@ -48,10 +48,6 @@ interface InlineThinkingItemProps {
     className?: string;
     contentClassName?: string;
 }
-/**
- * Minimal collapsible display for thinking/reasoning parts.
- * Shows "Thinking..." with optional preview text and duration.
- */
 declare const InlineThinkingItem: React.MemoExoticComponent<({ part, defaultOpen, autoCollapse, className, contentClassName, }: InlineThinkingItemProps) => react_jsx_runtime.JSX.Element>;
 
 interface ExpandedToolDetailProps {

package/dist/index.d.ts

@@ -9,7 +9,7 @@ export { C as ChatContainer, a as ChatContainerProps, b as ChatInput, c as ChatI
 export { C as Collaborator, a as ConnectionState, D as DocumentEditorBackend, b as DocumentEditorMode, c as DocumentEditorPane, d as DocumentEditorPaneCollaborationConfig, e as DocumentEditorPaneProps, E as EditorContextValue, f as EditorProvider, g as EditorProviderProps, h as EditorUser, u as useEditorContext } from './document-editor-pane-A70-EhdQ.js';
 export { CollaboratorsList, EditorToolbar, TiptapEditor, TiptapEditorProps, useAwareness, useCollaboratorPresence, useCollaborators, useDocumentChanges, useEditorConnection, useYjsState } from './editor.js';
 export { F as FeedSegment, T as ToolCallData, a as ToolCallFeed, b as ToolCallFeedProps, c as ToolCallGroup, d as ToolCallGroupProps, e as ToolCallStatus, f as ToolCallStep, g as ToolCallStepProps, h as ToolCallType, p as parseToolEvent } from './tool-call-feed-Bs3MyQMT.js';
-export { E as ExpandedToolDetail, I as InlineThinkingItem, c as InlineToolItem, R as RunGroup, e as RunGroupProps } from './expanded-tool-detail-DM5M_T9h.js';
+export { E as ExpandedToolDetail, I as InlineThinkingItem, c as InlineToolItem, R as RunGroup, e as RunGroupProps } from './expanded-tool-detail-Dh99mcbY.js';
 import * as React$1 from 'react';
 import { b as ToolPart } from './parts-CyGkM6Fp.js';
 export { R as ReasoningPart, S as SessionMessage, a as SessionPart, T as TextPart, c as ToolState, d as ToolStatus, e as ToolTime } from './parts-CyGkM6Fp.js';

package/dist/index.js

@@ -102,7 +102,7 @@ import {
   StatusBar,
   TerminalPanel,
   WorkspaceLayout
-} from "./chunk-WSR2NB2H.js";
+} from "./chunk-E2XT3G52.js";
 import "./chunk-OEX7NZE3.js";
 import {
   EmptyState,
@@ -116,7 +116,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-5F3VOGCT.js";
+} from "./chunk-RKXIRRKQ.js";
 import {
   useAutoScroll,
   useRunCollapseState,
@@ -134,7 +134,7 @@ import {
   RunGroup,
   WebSearchPreview,
   WriteFilePreview
-} from "./chunk-LY32SP6X.js";
+} from "./chunk-ZMWWE5RF.js";
 import {
   formatDuration,
   truncateText

package/dist/run.d.ts

@@ -1,4 +1,4 @@
-export { E as ExpandedToolDetail, a as ExpandedToolDetailProps, I as InlineThinkingItem, b as InlineThinkingItemProps, c as InlineToolItem, d as InlineToolItemProps, R as RunGroup, e as RunGroupProps } from './expanded-tool-detail-DM5M_T9h.js';
+export { E as ExpandedToolDetail, a as ExpandedToolDetailProps, I as InlineThinkingItem, b as InlineThinkingItemProps, c as InlineToolItem, d as InlineToolItemProps, R as RunGroup, e as RunGroupProps } from './expanded-tool-detail-Dh99mcbY.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 export { F as FeedSegment, T as ToolCallData, a as ToolCallFeed, b as ToolCallFeedProps, c as ToolCallGroup, d as ToolCallGroupProps, e as ToolCallStatus, f as ToolCallStep, g as ToolCallStepProps, h as ToolCallType, p as parseToolEvent } from './tool-call-feed-Bs3MyQMT.js';
 import 'react';

package/dist/run.js

@@ -8,7 +8,7 @@ import {
   InlineToolItem,
   LiveDuration,
   RunGroup
-} from "./chunk-LY32SP6X.js";
+} from "./chunk-ZMWWE5RF.js";
 import "./chunk-HRMUF35V.js";
 import {
   ToolCallGroup,

package/dist/tokens.css

@@ -47,7 +47,7 @@
   --hsl-secondary: 243 25% 19%;
   --hsl-secondary-foreground: 240 16% 90%;
   --hsl-muted: 242 22% 16%;
-  --hsl-muted-foreground: 233 17% 55%;
+  --hsl-muted-foreground: 233 17% 62%;
   --hsl-accent: 245 28% 21%;
   --hsl-accent-foreground: 240 16% 92%;
   --hsl-destructive: 348 90% 60%;
@@ -169,9 +169,9 @@
 
   /* Text */
   --text-primary: hsl(var(--hsl-foreground));
-  --text-secondary: hsl(244 18% 86%);
-  --text-muted: #6B7094;
-  --text-dim: #4A4D6A;
+  --text-secondary: hsl(244 18% 88%);
+  --text-muted: #8B90B8;
+  --text-dim: #6B70A0;
 
   /* Brand accents — Tangle exact */
   --brand-primary: #4a3aff;

package/dist/workspace.d.ts

@@ -214,12 +214,17 @@ interface SessionSidebarProps {
     activityMonitor?: ReactNode;
     filters?: SessionSidebarFilter[];
     defaultFilterId?: string;
+    resizable?: boolean;
+    defaultWidth?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    onWidthChange?: (width: number) => void;
     renderItemActions?: (item: SessionSidebarItem, options: {
         session: ActiveSessionRecord | null;
         isActive: boolean;
     }) => ReactNode;
 }
-declare function SessionSidebar({ title, subtitle, projectId, items, currentItemId, createLabel, onCreate, onSelectItem, onSelectLink, links, className, emptyMessage, searchPlaceholder, enableSearch, activityMonitor, filters, defaultFilterId, renderItemActions, }: SessionSidebarProps): react_jsx_runtime.JSX.Element;
+declare function SessionSidebar({ title, subtitle, projectId, items, currentItemId, createLabel, onCreate, onSelectItem, onSelectLink, links, className, emptyMessage, searchPlaceholder, enableSearch, activityMonitor, filters, defaultFilterId, resizable, defaultWidth, minWidth, maxWidth, onWidthChange, renderItemActions, }: SessionSidebarProps): react_jsx_runtime.JSX.Element;
 
 interface SessionActivityMonitorProps {
     className?: string;

package/dist/workspace.js

@@ -10,12 +10,12 @@ import {
   StatusBar,
   TerminalPanel,
   WorkspaceLayout
-} from "./chunk-WSR2NB2H.js";
+} from "./chunk-E2XT3G52.js";
 import "./chunk-OEX7NZE3.js";
 import "./chunk-BRBTD7RH.js";
-import "./chunk-5F3VOGCT.js";
+import "./chunk-RKXIRRKQ.js";
 import "./chunk-CNWVHQFY.js";
-import "./chunk-LY32SP6X.js";
+import "./chunk-ZMWWE5RF.js";
 import "./chunk-HRMUF35V.js";
 import "./chunk-MJUDMVRU.js";
 import "./chunk-BX6AQMUS.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",