@tangle-network/sandbox-ui 0.112.0 → 0.113.1

package/dist/{chunk-D5VXCWUG.js → chunk-2Q3KDQX7.js}

@@ -7,6 +7,7 @@ import {
 
 // src/workspace/workspace-layout.tsx
 import {
+  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -46,6 +47,14 @@ var DESKTOP_BREAKPOINT = "(min-width: 1024px)";
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
+function isEditableTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.isContentEditable) return true;
+  const tag = target.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  const editable = target.closest("[contenteditable]");
+  return editable !== null && editable.getAttribute("contenteditable") !== "false";
+}
 function readStoredLayout(key) {
   if (typeof window === "undefined") return null;
   try {
@@ -215,6 +224,15 @@ function WorkspaceLayout({
   leftLabel = "Left workspace panel",
   rightLabel = "Right workspace panel",
   bottomLabel = "Bottom runtime panel",
+  leftOpen: leftOpenProp,
+  onLeftOpenChange,
+  rightOpen: rightOpenProp,
+  onRightOpenChange,
+  keyboardShortcuts = false,
+  leftCollapsedControl,
+  leftContentClassName,
+  rightContentClassName,
+  centerHeaderVisibility = "always",
   className
 }) {
   const desktop = useDesktopMediaQuery(DESKTOP_BREAKPOINT);
@@ -223,8 +241,28 @@ function WorkspaceLayout({
     () => persistenceKey ? readStoredLayout(persistenceKey) : null,
     [persistenceKey]
   );
-  const [leftOpen, setLeftOpen] = useState(storedLayout?.leftOpen ?? defaultLeftOpen);
-  const [rightOpen, setRightOpen] = useState(storedLayout?.rightOpen ?? defaultRightOpen);
+  const [uncontrolledLeftOpen, setUncontrolledLeftOpen] = useState(storedLayout?.leftOpen ?? defaultLeftOpen);
+  const [uncontrolledRightOpen, setUncontrolledRightOpen] = useState(storedLayout?.rightOpen ?? defaultRightOpen);
+  const leftControlled = leftOpenProp !== void 0;
+  const rightControlled = rightOpenProp !== void 0;
+  const leftOpen = leftControlled ? leftOpenProp : uncontrolledLeftOpen;
+  const rightOpen = rightControlled ? rightOpenProp : uncontrolledRightOpen;
+  const setLeftOpen = useCallback(
+    (open) => {
+      if (!leftControlled) setUncontrolledLeftOpen(open);
+      onLeftOpenChange?.(open);
+    },
+    [leftControlled, onLeftOpenChange]
+  );
+  const setRightOpen = useCallback(
+    (open) => {
+      if (!rightControlled) setUncontrolledRightOpen(open);
+      onRightOpenChange?.(open);
+    },
+    [rightControlled, onRightOpenChange]
+  );
+  const hasLeft = Boolean(left);
+  const hasRight = Boolean(right);
   const [bottomOpen, setBottomOpen] = useState(storedLayout?.bottomOpen ?? defaultBottomOpen);
   const [leftWidth, setLeftWidth] = useState(
     clamp(storedLayout?.leftWidth ?? defaultLeftWidth, minLeftWidth, maxLeftWidth)
@@ -235,6 +273,8 @@ function WorkspaceLayout({
   const [bottomHeight, setBottomHeight] = useState(
     clamp(storedLayout?.bottomHeight ?? defaultBottomHeight, minBottomHeight, maxBottomHeight)
   );
+  const centerHeaderHasContent = Boolean(centerHeader) || hasLeft && !leftOpen || hasRight && !rightOpen || Boolean(bottom) && !bottomOpen;
+  const showCenterHeader = centerHeaderVisibility === "auto" ? centerHeaderHasContent : Boolean(centerHeader || left || right || bottom);
   useEffect(() => {
     if (!persistenceKey || typeof window === "undefined") return;
     const payload = {
@@ -247,6 +287,23 @@ function WorkspaceLayout({
     };
     window.localStorage.setItem(persistenceKey, JSON.stringify(payload));
   }, [bottomHeight, bottomOpen, leftOpen, leftWidth, persistenceKey, rightOpen, rightWidth]);
+  useEffect(() => {
+    if (!keyboardShortcuts || typeof window === "undefined") return;
+    const handleKeyDown = (event) => {
+      if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return;
+      if (isEditableTarget(event.target)) return;
+      const key = event.key.toLowerCase();
+      if (key === "b" && hasLeft) {
+        event.preventDefault();
+        setLeftOpen(!leftOpen);
+      } else if (key === "e" && hasRight) {
+        event.preventDefault();
+        setRightOpen(!rightOpen);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [hasLeft, hasRight, keyboardShortcuts, leftOpen, rightOpen, setLeftOpen, setRightOpen]);
   useEffect(() => {
     if (!desktop) return;
     const handlePointerMove = (event) => {
@@ -336,7 +393,7 @@ function WorkspaceLayout({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx2("div", { className: "min-h-0 flex-1 overflow-auto py-1", children: left })
+                  /* @__PURE__ */ jsx2("div", { className: cn("min-h-0 flex-1 overflow-auto py-1", leftContentClassName), children: left })
                 ]
               }
             ),
@@ -350,8 +407,8 @@ function WorkspaceLayout({
             )
           ] }),
           /* @__PURE__ */ jsxs("main", { className: "flex min-w-0 flex-1 flex-col", children: [
-            (centerHeader || left || right || bottom) && /* @__PURE__ */ jsxs(WorkspacePaneHeader, { className: "gap-2", children: [
-              left && !leftOpen && /* @__PURE__ */ jsx2(
+            showCenterHeader && /* @__PURE__ */ jsxs(WorkspacePaneHeader, { className: "gap-2", children: [
+              left && !leftOpen && (leftCollapsedControl ?? /* @__PURE__ */ jsx2(
                 "button",
                 {
                   type: "button",
@@ -360,7 +417,7 @@ function WorkspaceLayout({
                   className: "rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
                   children: /* @__PURE__ */ jsx2(PanelLeftOpen, { className: "h-4 w-4" })
                 }
-              ),
+              )),
               /* @__PURE__ */ jsx2("div", { className: "min-w-0 flex-1", children: centerHeader }),
               bottom && !bottomOpen && /* @__PURE__ */ jsx2(
                 "button",
@@ -449,7 +506,7 @@ function WorkspaceLayout({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx2("div", { className: "min-h-0 flex-1 overflow-auto", children: right })
+                  /* @__PURE__ */ jsx2("div", { className: cn("min-h-0 flex-1 overflow-auto", rightContentClassName), children: right })
                 ]
               }
             )
@@ -865,12 +922,35 @@ function RuntimePane({
 }
 
 // src/workspace/session-sidebar.tsx
-import { useCallback as useCallback2, useImperativeHandle, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
-import { ArrowLeft, FolderTree, MessageSquareText, Plus, Search as Search2, Settings, Sparkles } from "lucide-react";
+import { useCallback as useCallback3, useImperativeHandle, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
+import { ArrowLeft, FolderTree, MessageSquareText, PanelLeftClose as PanelLeftClose2, Plus, Search as Search2, Settings, Sparkles } from "lucide-react";
+
+// src/lib/format-relative-age.ts
+var SECOND = 1e3;
+var MINUTE = 60 * SECOND;
+var HOUR = 60 * MINUTE;
+var DAY = 24 * HOUR;
+var WEEK = 7 * DAY;
+var MONTH = 30 * DAY;
+var YEAR = 365 * DAY;
+function formatRelativeAge(date, now = Date.now()) {
+  const timestamp = date instanceof Date ? date.getTime() : new Date(date).getTime();
+  if (Number.isNaN(timestamp)) return "";
+  const elapsed = Math.max(0, now - timestamp);
+  if (elapsed < MINUTE) return "now";
+  if (elapsed < HOUR) return `${Math.floor(elapsed / MINUTE)}m`;
+  if (elapsed < DAY) return `${Math.floor(elapsed / HOUR)}h`;
+  if (elapsed < WEEK) return `${Math.floor(elapsed / DAY)}d`;
+  if (elapsed < MONTH) return `${Math.floor(elapsed / WEEK)}w`;
+  if (elapsed < YEAR) return `${Math.floor(elapsed / MONTH)}mo`;
+  return `${Math.floor(elapsed / YEAR)}y`;
+}
+
+// src/workspace/session-sidebar.tsx
 import { useNavbarSessions } from "@tangle-network/ui/stores";
 
 // src/workspace/session-optimistic.ts
-import { useCallback, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 var SESSION_CREATED_EVENT = "sandbox-thread-created";
 function dispatchSessionCreated(detail, eventName = SESSION_CREATED_EVENT) {
   if (typeof window === "undefined") return;
@@ -885,19 +965,19 @@ function useOptimisticSessionItems(items, options = {}) {
   useEffect3(() => {
     setOptimisticItems(items);
   }, [items]);
-  const add = useCallback((detail) => {
+  const add = useCallback2((detail) => {
     const next = toItem(detail);
     setOptimisticItems((prev) => [next, ...prev.filter((item) => item.id !== next.id)]);
   }, []);
-  const update = useCallback((id, patch) => {
+  const update = useCallback2((id, patch) => {
     setOptimisticItems(
       (prev) => prev.map((item) => item.id === id ? { ...item, ...patch } : item)
     );
   }, []);
-  const remove = useCallback((id) => {
+  const remove = useCallback2((id) => {
     setOptimisticItems((prev) => prev.filter((item) => item.id !== id));
   }, []);
-  const reset = useCallback(() => setOptimisticItems(items), [items]);
+  const reset = useCallback2(() => setOptimisticItems(items), [items]);
   const addRef = useRef3(add);
   addRef.current = add;
   useEffect3(() => {
@@ -928,6 +1008,24 @@ var NO_CONTROLLER = {
   reset: () => {
   }
 };
+var STATUS_GROUPS = [
+  { key: "attention", label: "Needs input" },
+  { key: "failed", label: "Failed" },
+  { key: "working", label: "Working" },
+  { key: "done", label: "Done" }
+];
+function groupKeyForStatus(status) {
+  switch (status) {
+    case "attention-needed":
+      return "attention";
+    case "error":
+      return "failed";
+    case "running":
+      return "working";
+    default:
+      return "done";
+  }
+}
 function statusDot(status) {
   switch (status) {
     case "running":
@@ -952,6 +1050,11 @@ function iconForLink(icon) {
       return Sparkles;
   }
 }
+function toDate(value) {
+  if (value === void 0) return null;
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
 function sortItems(items, sessionStatusById) {
   return [...items].sort((left, right) => {
     if (Boolean(left.isPinned) !== Boolean(right.isPinned)) {
@@ -1003,20 +1106,20 @@ function useResizable(defaultWidth, min, max, onChange) {
   const dragging = useRef4(false);
   const startX = useRef4(0);
   const startW = useRef4(0);
-  const onPointerDown = useCallback2((e) => {
+  const onPointerDown = useCallback3((e) => {
     dragging.current = true;
     startX.current = e.clientX;
     startW.current = width;
     e.currentTarget.setPointerCapture(e.pointerId);
   }, [width]);
-  const onPointerMove = useCallback2((e) => {
+  const onPointerMove = useCallback3((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 = useCallback2(() => {
+  const onPointerUp = useCallback3(() => {
     dragging.current = false;
   }, []);
   return { width, onPointerDown, onPointerMove, onPointerUp };
@@ -1046,8 +1149,14 @@ function SessionSidebar({
   onWidthChange,
   renderItemActions,
   optimistic = false,
-  optimisticRef
+  optimisticRef,
+  variant = "default",
+  groupBy = "none",
+  showUpdatedAt = false,
+  onCollapse,
+  fill = false
 }) {
+  const quiet = variant === "quiet";
   const [query, setQuery] = useState4("");
   const [activeFilterId, setActiveFilterId] = useState4(defaultFilterId ?? filters[0]?.id ?? "all");
   const optimisticOptions = typeof optimistic === "object" ? optimistic : void 0;
@@ -1085,6 +1194,19 @@ function SessionSidebar({
       return haystack.includes(normalizedQuery);
     });
   }, [activeFilterId, currentItemId, filters, orderedItems, query, sessionsById]);
+  const groups = useMemo3(() => {
+    if (groupBy !== "status") {
+      return [{ key: "all", label: null, items: visibleItems }];
+    }
+    return STATUS_GROUPS.map((group) => ({
+      key: group.key,
+      label: group.label,
+      items: visibleItems.filter(
+        (item) => groupKeyForStatus(sessionsById.get(item.id)?.status ?? item.status) === group.key
+      )
+    })).filter((group) => group.items.length > 0);
+  }, [groupBy, sessionsById, visibleItems]);
+  const showGroupLabels = groups.length > 1;
   const runningCount = activeSessions.filter((session) => session.status === "running").length;
   const filterCounts = useMemo3(() => Object.fromEntries(filters.map((filter) => [
     filter.id,
@@ -1094,13 +1216,134 @@ function SessionSidebar({
     })).length
   ])), [currentItemId, filters, orderedItems, sessionsById]);
   const resize = useResizable(defaultWidth, minWidth, maxWidth, onWidthChange);
+  const fillsParent = fill && !resizable;
+  const renderRow = (item, index) => {
+    const session = sessionsById.get(item.id) ?? null;
+    const isActive = currentItemId === item.id;
+    const status = session?.status ?? item.status;
+    const isWorking = status === "running";
+    const visibleBadges = [
+      ...item.isPinned ? [{ id: `${item.id}-pinned`, label: "Pinned", tone: "neutral" }] : [],
+      ...item.badges ?? []
+    ].filter((badge) => !quiet || (badge.tone ?? "neutral") !== "neutral");
+    const updatedAt = showUpdatedAt && item.meta === void 0 ? toDate(item.updatedAt) : null;
+    const metaLine = item.meta ?? (updatedAt ? /* @__PURE__ */ jsx8("time", { dateTime: updatedAt.toISOString(), title: updatedAt.toLocaleString(), children: formatRelativeAge(updatedAt) }) : null);
+    return /* @__PURE__ */ jsx8(
+      "li",
+      {
+        className: "agent-arrive",
+        style: { "--stagger-index": index },
+        children: /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            className: cn(
+              quiet ? "group relative flex items-center gap-2 rounded-lg py-2 pl-2 pr-3 transition-colors" : "group relative flex items-center gap-2 rounded-[var(--radius-sm)] px-2.5 py-1.5 transition-colors",
+              MOTION_CONTROL,
+              quiet ? isActive ? "bg-surface-container-high" : "hover:bg-surface-container" : isActive ? "bg-accent font-medium text-foreground" : "text-muted-foreground hover:bg-accent/30"
+            ),
+            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: [
+                    item.icon ? /* @__PURE__ */ jsxs7("span", { className: "relative flex h-5 w-4 shrink-0 items-center justify-center", "aria-hidden": "true", children: [
+                      item.icon,
+                      /* @__PURE__ */ jsx8("span", { className: cn("absolute -bottom-0.5 -right-0.5 h-1.5 w-1.5 rounded-full", statusDot(status)) })
+                    ] }) : /* @__PURE__ */ jsx8("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__ */ jsx8(
+                        "div",
+                        {
+                          className: cn(
+                            quiet ? "truncate text-sm leading-5 text-foreground/75 group-hover:text-foreground" : "truncate text-sm font-medium",
+                            isActive && "text-foreground",
+                            isWorking && "agent-shimmer"
+                          ),
+                          ...isWorking ? { "data-motion": "essential" } : {},
+                          children: item.title
+                        }
+                      ),
+                      item.subtitle && /* @__PURE__ */ jsx8("div", { className: "truncate text-xs leading-tight text-muted-foreground", children: item.subtitle }),
+                      metaLine && /* @__PURE__ */ jsx8("div", { className: "truncate text-xs leading-tight text-muted-foreground", children: metaLine })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs7("div", { className: "flex shrink-0 items-center gap-1", children: [
+                visibleBadges.length > 0 && visibleBadges.slice(0, 1).map((badge) => /* @__PURE__ */ jsx8(
+                  "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__ */ jsx8("span", { className: "h-1.5 w-1.5 rounded-full bg-[var(--status-running)]", title: "Live" }),
+                renderItemActions ? /* @__PURE__ */ jsx8(
+                  "div",
+                  {
+                    className: cn("opacity-0 transition-opacity group-hover:opacity-100", MOTION_CONTROL),
+                    onClick: (event) => event.stopPropagation(),
+                    children: renderItemActions(item, { session, isActive })
+                  }
+                ) : null
+              ] })
+            ]
+          }
+        )
+      },
+      item.id
+    );
+  };
+  let rowIndex = 0;
   return /* @__PURE__ */ jsxs7(
     "aside",
     {
-      className: cn("relative flex shrink-0 flex-col border-r border-[var(--md3-outline-variant)] bg-surface-container-low", className),
-      style: { width: resizable ? resize.width : defaultWidth },
+      className: cn(
+        "relative flex shrink-0 flex-col border-r border-[var(--md3-outline-variant)] bg-surface-container-low",
+        fillsParent && "h-full w-full",
+        className
+      ),
+      style: fillsParent ? void 0 : { width: resizable ? resize.width : defaultWidth },
       children: [
-        /* @__PURE__ */ jsx8(WorkspacePaneHeader, { children: /* @__PURE__ */ jsxs7("div", { className: "flex w-full items-center justify-between gap-2", children: [
+        quiet ? /* @__PURE__ */ jsxs7("div", { className: "flex h-14 shrink-0 items-center justify-between gap-2 px-3", children: [
+          /* @__PURE__ */ jsx8("span", { className: "sr-only", children: title }),
+          onCreate ? /* @__PURE__ */ jsxs7(
+            "button",
+            {
+              type: "button",
+              onClick: onCreate,
+              className: cn("flex items-center gap-1.5 rounded-md px-1.5 py-1 text-sm text-muted-foreground transition-colors hover:text-foreground", MOTION_CONTROL),
+              children: [
+                /* @__PURE__ */ jsx8(Plus, { className: "h-4 w-4", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx8("span", { children: createLabel })
+              ]
+            }
+          ) : /* @__PURE__ */ jsx8("span", {}),
+          onCollapse && /* @__PURE__ */ jsx8(
+            "button",
+            {
+              type: "button",
+              onClick: onCollapse,
+              "aria-label": "Hide chats",
+              className: cn("flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-surface-container hover:text-foreground", MOTION_CONTROL),
+              children: /* @__PURE__ */ jsx8(PanelLeftClose2, { className: "h-4 w-4" })
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx8(WorkspacePaneHeader, { children: /* @__PURE__ */ jsxs7("div", { className: "flex w-full items-center justify-between gap-2", children: [
           /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 items-center gap-2", children: [
             /* @__PURE__ */ jsx8("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary", children: /* @__PURE__ */ jsx8(MessageSquareText, { className: "h-3.5 w-3.5" }) }),
             /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
@@ -1122,129 +1365,69 @@ function SessionSidebar({
             )
           ] })
         ] }) }),
-        (enableSearch && items.length > 0 || filters.length > 0) && /* @__PURE__ */ jsxs7("div", { className: "shrink-0 border-b border-[var(--md3-outline-variant)] px-3 py-2.5", children: [
-          enableSearch && effectiveItems.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx8(Search2, { className: "pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
-            /* @__PURE__ */ jsx8(
-              "input",
-              {
-                value: query,
-                onChange: (event) => setQuery(event.target.value),
-                placeholder: searchPlaceholder,
-                "aria-label": searchPlaceholder,
-                className: cn("h-8 w-full rounded-[var(--radius-sm)] border border-[var(--md3-outline-variant)] bg-surface-container-lowest pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus-visible:border-[var(--border-accent)] focus-visible:bg-transparent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-accent)]", MOTION_CONTROL)
-              }
-            )
-          ] }),
-          filters.length > 0 && /* @__PURE__ */ jsx8("div", { className: cn("flex flex-wrap gap-1", enableSearch && items.length > 0 && "mt-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 rounded-full border px-2 py-0.5 text-xs font-medium transition-colors",
-                  MOTION_CONTROL,
-                  isSelected ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary" : "border-[var(--md3-outline-variant)] text-muted-foreground hover:text-foreground"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx8("span", { children: filter.label }),
-                  /* @__PURE__ */ jsx8("span", { className: "text-[11px] opacity-60", children: filterCounts[filter.id] ?? 0 })
-                ]
-              },
-              filter.id
-            );
-          }) })
-        ] }),
+        (enableSearch && items.length > 0 || filters.length > 0) && /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            className: cn(
+              "shrink-0",
+              quiet ? "px-3 pb-1" : "border-b border-[var(--md3-outline-variant)] px-3 py-2.5"
+            ),
+            children: [
+              enableSearch && effectiveItems.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx8(Search2, { className: "pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
+                /* @__PURE__ */ jsx8(
+                  "input",
+                  {
+                    value: query,
+                    onChange: (event) => setQuery(event.target.value),
+                    placeholder: searchPlaceholder,
+                    "aria-label": searchPlaceholder,
+                    className: cn(
+                      quiet ? "h-8 w-full rounded-md border-0 bg-transparent pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus-visible:bg-surface-container focus-visible:outline-none" : "h-8 w-full rounded-[var(--radius-sm)] border border-[var(--md3-outline-variant)] bg-surface-container-lowest pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus-visible:border-[var(--border-accent)] focus-visible:bg-transparent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-accent)]",
+                      MOTION_CONTROL
+                    )
+                  }
+                )
+              ] }),
+              filters.length > 0 && /* @__PURE__ */ jsx8("div", { className: cn("flex flex-wrap gap-1", enableSearch && items.length > 0 && "mt-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 rounded-full border px-2 py-0.5 text-xs font-medium transition-colors",
+                      MOTION_CONTROL,
+                      isSelected ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary" : "border-[var(--md3-outline-variant)] text-muted-foreground hover:text-foreground"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx8("span", { children: filter.label }),
+                      /* @__PURE__ */ jsx8("span", { className: "text-[11px] opacity-60", children: filterCounts[filter.id] ?? 0 })
+                    ]
+                  },
+                  filter.id
+                );
+              }) })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx8("nav", { "aria-label": "Sessions", className: "flex-1 overflow-y-auto px-1.5 py-1.5", children: visibleItems.length === 0 ? /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-center justify-center gap-2 px-4 py-10 text-center text-sm text-muted-foreground", children: [
           /* @__PURE__ */ jsx8(MessageSquareText, { className: "h-5 w-5 opacity-50", "aria-hidden": "true" }),
           /* @__PURE__ */ jsx8("p", { children: query.trim() ? `No sessions match "${query.trim()}".` : emptyMessage })
-        ] }) : /* @__PURE__ */ jsx8("ul", { className: "space-y-px", children: visibleItems.map((item, index) => {
-          const session = sessionsById.get(item.id) ?? null;
-          const isActive = currentItemId === item.id;
-          const status = session?.status ?? item.status;
-          const isWorking = status === "running";
-          const visibleBadges = [
-            ...item.isPinned ? [{ id: `${item.id}-pinned`, label: "Pinned", tone: "neutral" }] : [],
-            ...item.badges ?? []
-          ];
-          return /* @__PURE__ */ jsx8(
-            "li",
+        ] }) : showGroupLabels ? groups.map((group, groupIndex) => /* @__PURE__ */ jsxs7("section", { "aria-label": group.label ?? void 0, children: [
+          /* @__PURE__ */ jsx8(
+            "div",
             {
-              className: "agent-arrive",
-              style: { "--stagger-index": index },
-              children: /* @__PURE__ */ jsxs7(
-                "div",
-                {
-                  className: cn(
-                    "group relative flex items-center gap-2 rounded-[var(--radius-sm)] px-2.5 py-1.5 transition-colors",
-                    MOTION_CONTROL,
-                    isActive ? "bg-accent font-medium text-foreground" : "text-muted-foreground hover:bg-accent/30"
-                  ),
-                  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__ */ jsx8("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__ */ jsx8(
-                              "div",
-                              {
-                                className: cn(
-                                  "truncate text-sm font-medium",
-                                  isActive && "text-foreground",
-                                  isWorking && "agent-shimmer"
-                                ),
-                                ...isWorking ? { "data-motion": "essential" } : {},
-                                children: item.title
-                              }
-                            ),
-                            item.subtitle && /* @__PURE__ */ jsx8("div", { className: "truncate text-xs 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__ */ jsx8(
-                        "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__ */ jsx8("span", { className: "h-1.5 w-1.5 rounded-full bg-[var(--status-running)]", title: "Live" }),
-                      renderItemActions ? /* @__PURE__ */ jsx8(
-                        "div",
-                        {
-                          className: cn("opacity-0 transition-opacity group-hover:opacity-100", MOTION_CONTROL),
-                          onClick: (event) => event.stopPropagation(),
-                          children: renderItemActions(item, { session, isActive })
-                        }
-                      ) : null
-                    ] })
-                  ]
-                }
-              )
-            },
-            item.id
-          );
-        }) }) }),
+              className: cn(
+                "px-2 pb-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground",
+                groupIndex === 0 ? "pt-1" : "pt-3"
+              ),
+              children: group.label
+            }
+          ),
+          /* @__PURE__ */ jsx8("ul", { className: "space-y-px", children: group.items.map((item) => renderRow(item, rowIndex++)) })
+        ] }, group.key)) : /* @__PURE__ */ jsx8("ul", { className: "space-y-px", children: visibleItems.map((item) => renderRow(item, rowIndex++)) }) }),
         activityMonitor && /* @__PURE__ */ jsx8("div", { className: "border-t border-[var(--md3-outline-variant)] px-2 py-1.5", children: activityMonitor }),
         links.length > 0 && /* @__PURE__ */ jsx8("nav", { "aria-label": "Workspace sections", className: "border-t border-[var(--md3-outline-variant)] px-1.5 py-1.5", children: /* @__PURE__ */ jsx8("div", { className: "space-y-px", children: links.map((link) => {
           const Icon = iconForLink(link.icon);
@@ -1434,6 +1617,13 @@ function artifactTabLabel(artifact) {
   if (artifact.kind === "file") return artifact.filename;
   return "Artifact";
 }
+function sortPinnedFirst(artifacts) {
+  if (!artifacts.some((artifact) => artifact.pinned)) return artifacts;
+  return [
+    ...artifacts.filter((artifact) => artifact.pinned),
+    ...artifacts.filter((artifact) => !artifact.pinned)
+  ];
+}
 function ArtifactTabs({
   artifacts,
   activeArtifactId,
@@ -1442,7 +1632,7 @@ function ArtifactTabs({
 }) {
   if (artifacts.length === 0) return null;
   return /* @__PURE__ */ jsx10("div", { className: "flex items-center overflow-x-auto border-b border-[var(--md3-outline-variant)] bg-surface-container-high", children: artifacts.map((artifact) => {
-    const Icon = getArtifactTabIcon(artifact.kind);
+    const Icon = artifact.icon ?? getArtifactTabIcon(artifact.kind);
     const isActive = artifact.id === activeArtifactId;
     return /* @__PURE__ */ jsxs9(
       "div",
@@ -1464,7 +1654,7 @@ function ArtifactTabs({
               ]
             }
           ),
-          onClose && /* @__PURE__ */ jsx10(
+          onClose && !artifact.pinned && /* @__PURE__ */ jsx10(
             "button",
             {
               type: "button",
@@ -1551,6 +1741,9 @@ function regionHeader(sections, fallback) {
     return fallback;
   }
   switch (sections[0]?.key) {
+    // The rail brings its own header row.
+    case "rail":
+      return void 0;
     case "directory":
       return /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: [
         /* @__PURE__ */ jsx10(FolderTree2, { className: "h-3.5 w-3.5" }),
@@ -1588,9 +1781,12 @@ function SandboxWorkbench({
   title = "Sandbox session",
   subtitle,
   status,
+  centerHeader: centerHeaderProp,
+  composer,
+  rail,
   directory,
   session,
-  artifacts = [],
+  artifacts: artifactsProp = [],
   activeArtifactId,
   onArtifactChange,
   onArtifactClose,
@@ -1599,6 +1795,7 @@ function SandboxWorkbench({
   emptyArtifactState,
   className
 }) {
+  const artifacts = useMemo4(() => sortPinnedFirst(artifactsProp), [artifactsProp]);
   const [uncontrolledArtifactId, setUncontrolledArtifactId] = useState5(
     activeArtifactId ?? artifacts[0]?.id
   );
@@ -1621,7 +1818,7 @@ function SandboxWorkbench({
     }
     onArtifactChange?.(artifactId);
   };
-  const centerHeader = /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 items-start justify-between gap-4 rounded-[var(--radius-xl)] border border-[var(--md3-outline-variant)] bg-surface-container px-4 py-3.5", children: [
+  const brandedHeader = /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 items-start justify-between gap-4 rounded-[var(--radius-xl)] border border-[var(--md3-outline-variant)] bg-surface-container px-4 py-3.5", children: [
     /* @__PURE__ */ jsxs9("div", { className: "min-w-0", children: [
       /* @__PURE__ */ jsx10("div", { className: "text-[10px] font-semibold uppercase tracking-[0.18em] text-primary", children: "Tangle Sandbox" }),
       /* @__PURE__ */ jsx10("div", { className: "truncate text-[17px] font-semibold tracking-[0.01em] text-foreground", children: title }),
@@ -1635,8 +1832,22 @@ function SandboxWorkbench({
       ] })
     ] })
   ] });
+  const quiet = centerHeaderProp === null;
+  const centerHeader = centerHeaderProp === void 0 ? brandedHeader : centerHeaderProp ?? void 0;
   const { composerControls, ...chatSession } = session;
-  const center = /* @__PURE__ */ jsx10(
+  const transcript = /* @__PURE__ */ jsxs9("div", { className: cn("flex h-full min-h-0 flex-col", quiet && "bg-surface"), children: [
+    /* @__PURE__ */ jsx10(
+      ChatContainer,
+      {
+        ...chatSession,
+        className: "min-h-0 flex-1",
+        presentation: session.presentation ?? "timeline"
+      }
+    ),
+    composerControls && /* @__PURE__ */ jsx10("div", { className: "shrink-0 border-t border-[var(--md3-outline-variant)] bg-surface-container-high px-3 py-2", children: composerControls }),
+    composer && /* @__PURE__ */ jsx10("div", { className: "shrink-0", children: /* @__PURE__ */ jsx10("div", { className: "mx-auto w-full max-w-3xl px-3 pb-3", children: composer }) })
+  ] });
+  const center = quiet ? transcript : /* @__PURE__ */ jsx10(
     ArtifactPane2,
     {
       eyebrow: session.eyebrow ?? "Agent Session",
@@ -1646,17 +1857,7 @@ function SandboxWorkbench({
       headerActions: session.headerActions,
       className: "h-full",
       contentClassName: "bg-surface-container",
-      children: /* @__PURE__ */ jsxs9("div", { className: "flex h-full min-h-0 flex-col", children: [
-        /* @__PURE__ */ jsx10(
-          ChatContainer,
-          {
-            ...chatSession,
-            className: "min-h-0 flex-1",
-            presentation: session.presentation ?? "timeline"
-          }
-        ),
-        composerControls && /* @__PURE__ */ jsx10("div", { className: "shrink-0 border-t border-[var(--md3-outline-variant)] bg-surface-container-high px-3 py-2", children: composerControls })
-      ] })
+      children: transcript
     }
   );
   const artifactPanel = artifacts.length > 0 ? /* @__PURE__ */ jsxs9("section", { className: "flex h-full min-h-0 flex-col bg-surface-container", children: [
@@ -1686,6 +1887,9 @@ function SandboxWorkbench({
     right: [],
     bottom: []
   };
+  if (rail) {
+    regionSections.left.push({ key: "rail", content: rail });
+  }
   if (directory && directoryPlacement !== "hidden") {
     regionSections[directoryPlacement].push({
       key: "directory",
@@ -1707,6 +1911,7 @@ function SandboxWorkbench({
   const left = renderRegion(regionSections.left, "left");
   const right = renderRegion(regionSections.right, "right");
   const bottom = renderRegion(regionSections.bottom, "bottom");
+  const railOnly = regionSections.left.length === 1 && regionSections.left[0]?.key === "rail";
   const genericPanelsHeader = /* @__PURE__ */ jsx10("span", { className: "text-xs font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: "Workspace Panels" });
   return /* @__PURE__ */ jsx10(
     WorkspaceLayout,
@@ -1732,6 +1937,14 @@ function SandboxWorkbench({
       minRightWidth: layout?.minRightWidth,
       maxRightWidth: layout?.maxRightWidth,
       resizable: layout?.resizable,
+      leftOpen: layout?.leftOpen,
+      onLeftOpenChange: layout?.onLeftOpenChange,
+      rightOpen: layout?.rightOpen,
+      onRightOpenChange: layout?.onRightOpenChange,
+      keyboardShortcuts: layout?.keyboardShortcuts,
+      leftCollapsedControl: layout?.leftCollapsedControl,
+      leftContentClassName: railOnly ? "py-0" : void 0,
+      centerHeaderVisibility: quiet ? "auto" : "always",
       className: cn("p-3 lg:p-4", className)
     }
   );
@@ -2371,6 +2584,7 @@ export {
   StatusBar,
   TerminalPanel,
   RuntimePane,
+  formatRelativeAge,
   SESSION_CREATED_EVENT,
   dispatchSessionCreated,
   useOptimisticSessionItems,