@tangle-network/sandbox-ui 0.112.0 → 0.113.0

package/README.md

@@ -168,6 +168,52 @@ const partMap: Record<string, SessionPart[]> = {};
 
 `FileTreeVisibilityOptions` is a UI-layer policy only. Sensitive paths still need to be hidden and denied by the app/backend layer.
 
+### The three-pane shell
+
+For a chats rail · transcript + composer · artifacts layout, hand `SandboxWorkbench` a `SessionSidebar` as its `rail`, your composer as `composer`, and `centerHeader={null}` for the quiet center. `WorkspaceLayout` owns the pane sizes and, when you pass `layout.leftOpen` / `layout.onLeftOpenChange`, the open state too.
+
+```tsx
+const [chatsOpen, setChatsOpen] = useState(true);
+
+<SandboxWorkbench
+  centerHeader={null}
+  rail={
+    <SessionSidebar
+      variant="quiet"
+      groupBy="status"
+      showUpdatedAt
+      fill
+      className="border-r-0"
+      title="Chats"
+      createLabel="New chat"
+      items={threads}
+      currentItemId={threadId}
+      onSelectItem={(item) => navigate(item.href)}
+      onCreate={createThread}
+      onCollapse={() => setChatsOpen(false)}
+    />
+  }
+  session={{ messages, partMap, isStreaming }}
+  composer={<ChatComposer onSend={runTurn} />}
+  artifacts={[
+    { id: "changes", kind: "custom", title: "Changes", icon: GitCompare, pinned: true, content: <ChangesPanel /> },
+    ...openFiles,
+  ]}
+  layout={{
+    leftOpen: chatsOpen,
+    onLeftOpenChange: setChatsOpen,
+    keyboardShortcuts: true,
+    leftCollapsedControl: (
+      <button type="button" aria-label="Show chats" onClick={() => setChatsOpen(true)}>
+        <PanelLeftOpen className="h-4 w-4" />
+      </button>
+    ),
+  }}
+/>;
+```
+
+Each `SessionSidebarItem` can carry an `icon` (rendered in a 16×20 slot, with the status dot as a corner badge) and a `meta` line; `formatRelativeAge` from `/workspace` formats the age for that line.
+
 ## Theming And Retheming
 
 There is a built-in Tangle default theme, but consumers can restyle the library in three layers:

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,

package/dist/globals.css

@@ -368,6 +368,9 @@
   .top-full {
     top: 100%;
   }
+  .-right-0\.5 {
+    right: calc(var(--spacing) * -0.5);
+  }
   .-right-1 {
     right: calc(var(--spacing) * -1);
   }
@@ -389,6 +392,9 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .-bottom-0\.5 {
+    bottom: calc(var(--spacing) * -0.5);
+  }
   .bottom-0 {
     bottom: 0px;
   }
@@ -919,6 +925,9 @@
   .min-h-0 {
     min-height: 0px;
   }
+  .min-h-8 {
+    min-height: calc(var(--spacing) * 8);
+  }
   .min-h-24 {
     min-height: calc(var(--spacing) * 24);
   }
@@ -2706,6 +2715,9 @@
   .px-\[var\(--tool-card-px\)\] {
     padding-inline: var(--tool-card-px);
   }
+  .py-0 {
+    padding-block: 0px;
+  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -2811,6 +2823,9 @@
   .pr-2\.5 {
     padding-right: calc(var(--spacing) * 2.5);
   }
+  .pr-3 {
+    padding-right: calc(var(--spacing) * 3);
+  }
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
@@ -2980,6 +2995,10 @@
     --tw-leading: calc(var(--spacing) * 4);
     line-height: calc(var(--spacing) * 4);
   }
+  .leading-5 {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+  }
   .leading-6 {
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
@@ -3315,6 +3334,12 @@
       color: color-mix(in oklab, var(--color-foreground) 70%, transparent);
     }
   }
+  .text-foreground\/75 {
+    color: color-mix(in srgb, hsl(var(--foreground)) 75%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-foreground) 75%, transparent);
+    }
+  }
   .text-foreground\/80 {
     color: color-mix(in srgb, hsl(var(--foreground)) 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3486,6 +3511,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.2\)\] {
+    --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(0,0,0,0.2));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_1px_2px_rgba\(15\,23\,42\,0\.04\)\] {
     --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(15,23,42,0.04));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3739,6 +3768,9 @@
         border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
       }
     }
+    .group-hover\:text-foreground:is(:where(.group):hover *) {
+      color: var(--color-foreground);
+    }
     .group-hover\:text-foreground\/40:is(:where(.group):hover *) {
       color: color-mix(in srgb, hsl(var(--foreground)) 40%, transparent);
     }
@@ -4345,6 +4377,9 @@
       background-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
     }
   }
+  .focus-visible\:bg-surface-container:focus-visible {
+    background-color: var(--color-surface-container);
+  }
   .focus-visible\:bg-transparent:focus-visible {
     background-color: transparent;
   }
@@ -4714,6 +4749,9 @@
     .lg\:items-center {
       align-items: center;
     }
+    .lg\:p-0 {
+      padding: 0px;
+    }
     .lg\:p-4 {
       padding: calc(var(--spacing) * 4);
     }

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { ArtifactPane, ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CodeBlock, CodeBlockProps, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, FilterField, FilterFieldProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Metric, MetricProps, MetricStrip, MetricStripProps, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, StatusPill, StatusPillProps, StatusTone, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalDisplay, TerminalCursor as TerminalDisplayCursor, TerminalInput as TerminalDisplayInput, TerminalLine as TerminalDisplayLine, Textarea, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, Toolbar, ToolbarProps, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, buttonVariants, useTheme, useToast } from '@tangle-network/ui/primitives';
 export { L as Logo, a as LogoProps, T as TangleKnot } from './logo-CaIvk3J1.js';
 export { CodeBlock as CodeBlockDisplay, Markdown, MarkdownProps } from '@tangle-network/ui/markdown';
-export { AgentWorkbench, ApprovalConfidenceStat, ApprovalItem, ApprovalQueue, ApprovalQueueProps, AuditCheck, AuditResults, AuditResultsProps, BannerType, CalendarEvent, CalendarView, CalendarViewProps, ContextBadge, DirectoryPane, DirectoryPaneProps, FormAudit, RuntimePane, RuntimePaneProps, SESSION_CREATED_EVENT, SandboxWorkbench, SandboxWorkbenchArtifact, SandboxWorkbenchCustomArtifact, SandboxWorkbenchFileArtifact, SandboxWorkbenchLayoutOptions, SandboxWorkbenchMarkdownArtifact, SandboxWorkbenchOpenUIArtifact, SandboxWorkbenchProps, SandboxWorkbenchSessionProps, SessionActivityMonitor, SessionActivityMonitorProps, SessionCreatedDetail, SessionOptimisticController, SessionSidebar, SessionSidebarBadge, SessionSidebarFilter, SessionSidebarItem, SessionSidebarLink, SessionSidebarProps, ShellShouldRevalidateArgs, ShellShouldRevalidateOptions, StatusBanner, StatusBannerProps, StatusBar, StatusBarProps, TaskBoard, TaskBoardColumn, TaskBoardItem, TaskBoardProps, TerminalLine, TerminalPanel, TerminalProps, UseOptimisticSessionItemsOptions, WorkspaceLayout, WorkspaceLayoutProps, WorkspacePaneHeader, WorkspacePaneHeaderProps, createShellShouldRevalidate, dispatchSessionCreated, shellShouldRevalidate, useOptimisticSessionItems } from './workspace.js';
+export { AgentWorkbench, ApprovalConfidenceStat, ApprovalItem, ApprovalQueue, ApprovalQueueProps, AuditCheck, AuditResults, AuditResultsProps, BannerType, CalendarEvent, CalendarView, CalendarViewProps, ContextBadge, DirectoryPane, DirectoryPaneProps, FormAudit, RuntimePane, RuntimePaneProps, SESSION_CREATED_EVENT, SandboxWorkbench, SandboxWorkbenchArtifact, SandboxWorkbenchCustomArtifact, SandboxWorkbenchFileArtifact, SandboxWorkbenchLayoutOptions, SandboxWorkbenchMarkdownArtifact, SandboxWorkbenchOpenUIArtifact, SandboxWorkbenchProps, SandboxWorkbenchSessionProps, SessionActivityMonitor, SessionActivityMonitorProps, SessionCreatedDetail, SessionOptimisticController, SessionSidebar, SessionSidebarBadge, SessionSidebarFilter, SessionSidebarGroupBy, SessionSidebarItem, SessionSidebarLink, SessionSidebarProps, SessionSidebarVariant, ShellShouldRevalidateArgs, ShellShouldRevalidateOptions, StatusBanner, StatusBannerProps, StatusBar, StatusBarProps, TaskBoard, TaskBoardColumn, TaskBoardItem, TaskBoardProps, TerminalLine, TerminalPanel, TerminalProps, UseOptimisticSessionItemsOptions, WorkspaceLayout, WorkspaceLayoutProps, WorkspacePaneHeader, WorkspacePaneHeaderProps, createShellShouldRevalidate, dispatchSessionCreated, formatRelativeAge, shellShouldRevalidate, useOptimisticSessionItems } from './workspace.js';
 export { ArtifactView, BRAND_PRISM_THEME, ChangedFile, ChangesPane, ChangesPaneProps, CodeSurface, CodeSurfaceProps, CodeView, CodeViewProps, DiffStats, DiffStatsBadge, DiffView, DiffViewProps, FileBreadcrumb, FileBreadcrumbProps, GitStatusBadge, PanelHeader, PanelHeaderProps, PillTabItem, PillTabs, PillTabsProps, PreviewView, PreviewViewProps, SandboxArtifact, SandboxArtifactPane, SandboxArtifactPaneProps, SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats, resolveLanguage } from './workbench.js';
 export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from '@tangle-network/ui/openui';
 export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from '@tangle-network/ui/chat';
@@ -25,6 +25,7 @@ export { AgentBranding, CustomToolRenderer, DisplayVariant, FinalTextPart, Group
 export { Session } from './types.js';
 export { TOOL_CATEGORY_ICONS, cn, copyText, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText } from '@tangle-network/ui/utils';
 import 'react';
+import 'lucide-react';
 import '@radix-ui/react-dropdown-menu';
 import '@tanstack/react-query';
 import '@tangle-network/ui/sdk-hooks';

package/dist/index.js

@@ -130,9 +130,10 @@ import {
   WorkspacePaneHeader,
   createShellShouldRevalidate,
   dispatchSessionCreated,
+  formatRelativeAge,
   shellShouldRevalidate,
   useOptimisticSessionItems
-} from "./chunk-D5VXCWUG.js";
+} from "./chunk-2Q3KDQX7.js";
 import {
   BRAND_PRISM_THEME,
   ChangesPane,
@@ -608,6 +609,7 @@ export {
   formatBytes,
   formatDuration,
   formatPrice,
+  formatRelativeAge,
   formatUptime,
   getActiveSession,
   getAllActiveSessions,

package/dist/styles.css

@@ -368,6 +368,9 @@
   .top-full {
     top: 100%;
   }
+  .-right-0\.5 {
+    right: calc(var(--spacing) * -0.5);
+  }
   .-right-1 {
     right: calc(var(--spacing) * -1);
   }
@@ -389,6 +392,9 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .-bottom-0\.5 {
+    bottom: calc(var(--spacing) * -0.5);
+  }
   .bottom-0 {
     bottom: 0px;
   }
@@ -919,6 +925,9 @@
   .min-h-0 {
     min-height: 0px;
   }
+  .min-h-8 {
+    min-height: calc(var(--spacing) * 8);
+  }
   .min-h-24 {
     min-height: calc(var(--spacing) * 24);
   }
@@ -2706,6 +2715,9 @@
   .px-\[var\(--tool-card-px\)\] {
     padding-inline: var(--tool-card-px);
   }
+  .py-0 {
+    padding-block: 0px;
+  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -2811,6 +2823,9 @@
   .pr-2\.5 {
     padding-right: calc(var(--spacing) * 2.5);
   }
+  .pr-3 {
+    padding-right: calc(var(--spacing) * 3);
+  }
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
@@ -2980,6 +2995,10 @@
     --tw-leading: calc(var(--spacing) * 4);
     line-height: calc(var(--spacing) * 4);
   }
+  .leading-5 {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+  }
   .leading-6 {
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
@@ -3315,6 +3334,12 @@
       color: color-mix(in oklab, var(--color-foreground) 70%, transparent);
     }
   }
+  .text-foreground\/75 {
+    color: color-mix(in srgb, hsl(var(--foreground)) 75%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-foreground) 75%, transparent);
+    }
+  }
   .text-foreground\/80 {
     color: color-mix(in srgb, hsl(var(--foreground)) 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3486,6 +3511,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.2\)\] {
+    --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(0,0,0,0.2));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_1px_2px_rgba\(15\,23\,42\,0\.04\)\] {
     --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(15,23,42,0.04));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3739,6 +3768,9 @@
         border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
       }
     }
+    .group-hover\:text-foreground:is(:where(.group):hover *) {
+      color: var(--color-foreground);
+    }
     .group-hover\:text-foreground\/40:is(:where(.group):hover *) {
       color: color-mix(in srgb, hsl(var(--foreground)) 40%, transparent);
     }
@@ -4345,6 +4377,9 @@
       background-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
     }
   }
+  .focus-visible\:bg-surface-container:focus-visible {
+    background-color: var(--color-surface-container);
+  }
   .focus-visible\:bg-transparent:focus-visible {
     background-color: transparent;
   }
@@ -4714,6 +4749,9 @@
     .lg\:items-center {
       align-items: center;
     }
+    .lg\:p-0 {
+      padding: 0px;
+    }
     .lg\:p-4 {
       padding: calc(var(--spacing) * 4);
     }

package/dist/workspace.d.ts

@@ -3,6 +3,7 @@ import { ReactNode, HTMLAttributes, Ref } from 'react';
 export { ArtifactPane, ArtifactPaneProps } from '@tangle-network/ui/primitives';
 import { FileNode, FileTreeVisibilityOptions, FileTabData } from '@tangle-network/ui/files';
 import { SessionProjectKey, ActiveSessionStatus, ActiveSessionRecord } from '@tangle-network/ui/stores';
+import { LucideIcon } from 'lucide-react';
 import { ChatContainerProps } from '@tangle-network/ui/chat';
 import { OpenUIComponentNode, OpenUIAction } from '@tangle-network/ui/openui';
 
@@ -63,9 +64,42 @@ interface WorkspaceLayoutProps {
     rightLabel?: string;
     /** Accessible label for the bottom panel */
     bottomLabel?: string;
+    /**
+     * Controlled open state for the left pane. Omit to keep the pane
+     * uncontrolled (`defaultLeftOpen`, persisted under `persistenceKey`).
+     */
+    leftOpen?: boolean;
+    /** Called with the next state whenever the layout would open or close the left pane. */
+    onLeftOpenChange?: (open: boolean) => void;
+    /** Controlled open state for the right pane; see `leftOpen`. */
+    rightOpen?: boolean;
+    /** Called with the next state whenever the layout would open or close the right pane. */
+    onRightOpenChange?: (open: boolean) => void;
+    /**
+     * ⌘B / Ctrl+B toggles the left pane and ⌘E / Ctrl+E the right pane. A
+     * chord with Alt or Shift, or one fired while an input, textarea, select, or
+     * contentEditable has focus, is left to the page. Off by default.
+     */
+    keyboardShortcuts?: boolean;
+    /**
+     * Replaces the default "Open left panel" button at the top-left of the
+     * center pane while a left pane is provided but closed.
+     */
+    leftCollapsedControl?: ReactNode;
+    /** Extra classes for the left pane's scrolling content wrapper, e.g. `py-0` so a rail owns its own gutter. */
+    leftContentClassName?: string;
+    /** Extra classes for the right pane's scrolling content wrapper. */
+    rightContentClassName?: string;
+    /**
+     * `always` (default) keeps the center header row whenever a side or bottom
+     * pane exists, so pane headers line up across the shell even while the row
+     * is empty. `auto` renders the row only while it has content: a
+     * `centerHeader`, or an open-pane toggle for a closed pane.
+     */
+    centerHeaderVisibility?: "always" | "auto";
     className?: string;
 }
-declare function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter, right, rightHeader, bottom, bottomHeader, defaultLeftOpen, defaultRightOpen, defaultBottomOpen, defaultLeftWidth, defaultRightWidth, defaultBottomHeight, minLeftWidth, maxLeftWidth, minRightWidth, maxRightWidth, minBottomHeight, maxBottomHeight, persistenceKey, resizable, theme, density, leftLabel, rightLabel, bottomLabel, className, }: WorkspaceLayoutProps): React$1.JSX.Element;
+declare function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter, right, rightHeader, bottom, bottomHeader, defaultLeftOpen, defaultRightOpen, defaultBottomOpen, defaultLeftWidth, defaultRightWidth, defaultBottomHeight, minLeftWidth, maxLeftWidth, minRightWidth, maxRightWidth, minBottomHeight, maxBottomHeight, persistenceKey, resizable, theme, density, leftLabel, rightLabel, bottomLabel, leftOpen: leftOpenProp, onLeftOpenChange, rightOpen: rightOpenProp, onRightOpenChange, keyboardShortcuts, leftCollapsedControl, leftContentClassName, rightContentClassName, centerHeaderVisibility, className, }: WorkspaceLayoutProps): React$1.JSX.Element;
 
 type WorkspacePaneHeaderProps = HTMLAttributes<HTMLDivElement>;
 /**
@@ -243,6 +277,17 @@ interface SessionSidebarItem {
     category?: string;
     isPinned?: boolean;
     badges?: SessionSidebarBadge[];
+    /**
+     * Glyph rendered in a 16×20 slot before the title — a harness mark, for
+     * example. While an icon is present the status dot becomes a 6px badge on
+     * the icon's corner instead of a leading dot.
+     */
+    icon?: ReactNode;
+    /**
+     * Muted 12px line under the title, e.g. `harness · age`. When omitted and
+     * `showUpdatedAt` is set, the row renders `updatedAt` as a relative age here.
+     */
+    meta?: ReactNode;
 }
 interface SessionSidebarBadge {
     id: string;
@@ -263,6 +308,8 @@ interface SessionSidebarFilter {
         isActive: boolean;
     }) => boolean;
 }
+type SessionSidebarVariant = "default" | "quiet";
+type SessionSidebarGroupBy = "none" | "status";
 interface SessionSidebarProps {
     title: string;
     subtitle?: string;
@@ -304,8 +351,45 @@ interface SessionSidebarProps {
      * handlers. Only populated when `optimistic` is enabled.
      */
     optimisticRef?: Ref<SessionOptimisticController | null>;
+    /**
+     * `default` is the branded panel: icon-in-a-box header, running-count chip,
+     * bordered search field, accent-filled selected row. `quiet` is the rail of a
+     * three-pane shell: the header is one row (a "new" text button plus the
+     * optional `onCollapse` button), rows are `rounded-lg` with a surface fill
+     * for hover and selection, only non-neutral badges render, and search is a
+     * borderless field.
+     */
+    variant?: SessionSidebarVariant;
+    /**
+     * `status` partitions the list into "Needs input" (`attention-needed`),
+     * "Failed" (`error`), "Working" (`running`), and "Done" (everything else),
+     * in that order. Group labels render only while more than one group has
+     * items. Within a group the sort is unchanged: pinned first, then activity.
+     * Status comes from the active-sessions store record when one exists for the
+     * id, else from `item.status`.
+     */
+    groupBy?: SessionSidebarGroupBy;
+    /** Render `updatedAt` as a relative age under the title for rows with no `meta`. */
+    showUpdatedAt?: boolean;
+    /** Renders a "Hide chats" button in the `quiet` header. */
+    onCollapse?: () => void;
+    /**
+     * Fill the parent instead of carrying the sidebar's own width: no inline
+     * width, `h-full w-full`. Use when a layout owns the pane size. Ignored while
+     * `resizable`, which needs the inline width it drags.
+     */
+    fill?: boolean;
 }
-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, optimistic, optimisticRef, }: SessionSidebarProps): React$1.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, optimistic, optimisticRef, variant, groupBy, showUpdatedAt, onCollapse, fill, }: SessionSidebarProps): React$1.JSX.Element;
+
+/**
+ * Compact age for a session rail: `now`, `5m`, `3h`, `2d`, `3w`, `4mo`, `1y`.
+ * Unlike `timeAgo` from `@tangle-network/ui/utils` it accepts any date input,
+ * rolls past hours into days and beyond, and carries no "ago" suffix, so it
+ * fits a "codex · 2h" meta line. A future or unparseable date reads `now` /
+ * empty rather than a negative count. `now` is injectable for deterministic tests.
+ */
+declare function formatRelativeAge(date: string | number | Date, now?: number): string;
 
 /**
  * Snappy in-app navigation: a shared `shouldRevalidate` rule for the agent-app
@@ -402,6 +486,10 @@ interface SandboxWorkbenchArtifactBase {
     headerActions?: ReactNode;
     toolbar?: ReactNode;
     footer?: ReactNode;
+    /** Tab glyph. Defaults per `kind`; a `custom` artifact usually names its own. */
+    icon?: LucideIcon;
+    /** A pinned artifact's tab sorts before the rest and carries no close button. */
+    pinned?: boolean;
 }
 interface SandboxWorkbenchFileArtifact extends SandboxWorkbenchArtifactBase {
     kind: "file";
@@ -447,7 +535,7 @@ interface SandboxWorkbenchSessionProps extends Omit<ChatContainerProps, "classNa
     renderUserMessageActions?: ChatContainerProps["renderUserMessageActions"];
     renderToolActions?: ChatContainerProps["renderToolActions"];
 }
-interface SandboxWorkbenchLayoutOptions extends Pick<WorkspaceLayoutProps, "bottomHeader" | "defaultBottomOpen" | "defaultLeftOpen" | "defaultLeftWidth" | "defaultRightOpen" | "defaultRightWidth" | "density" | "maxLeftWidth" | "maxRightWidth" | "minLeftWidth" | "minRightWidth" | "persistenceKey" | "resizable" | "theme"> {
+interface SandboxWorkbenchLayoutOptions extends Pick<WorkspaceLayoutProps, "bottomHeader" | "defaultBottomOpen" | "defaultLeftOpen" | "defaultLeftWidth" | "defaultRightOpen" | "defaultRightWidth" | "density" | "keyboardShortcuts" | "leftCollapsedControl" | "leftOpen" | "maxLeftWidth" | "maxRightWidth" | "minLeftWidth" | "minRightWidth" | "onLeftOpenChange" | "onRightOpenChange" | "persistenceKey" | "resizable" | "rightOpen" | "theme"> {
     directoryPlacement?: SandboxWorkbenchPlacement;
     artifactPlacement?: SandboxWorkbenchPlacement;
     runtimePlacement?: SandboxWorkbenchPlacement;
@@ -456,6 +544,27 @@ interface SandboxWorkbenchProps {
     title?: ReactNode;
     subtitle?: ReactNode;
     status?: ReactNode;
+    /**
+     * Header above the transcript. `undefined` keeps the branded session card
+     * (`Tangle Sandbox` / `title` / `status`), a node replaces it, and `null`
+     * removes it: the transcript then renders directly on `bg-surface` with no
+     * eyebrow/title frame around it, and the shell's center header row appears
+     * only while it holds an open-pane toggle.
+     */
+    centerHeader?: ReactNode | null;
+    /**
+     * Composer rendered under the transcript on the panel background, inside the
+     * transcript's own `max-w-3xl` column. `session.composerControls`, when
+     * also given, sits above it as before.
+     */
+    composer?: ReactNode;
+    /**
+     * First section of the left region, ahead of the directory pane — a
+     * `SessionSidebar` for a chats rail. A rail that is the only left section
+     * fills the pane: no region header, no gutter. Give it `fill` and
+     * `className="border-r-0"` so the layout's own divider is the only one.
+     */
+    rail?: ReactNode;
     directory?: DirectoryPaneProps;
     session: SandboxWorkbenchSessionProps;
     artifacts?: SandboxWorkbenchArtifact[];
@@ -472,7 +581,7 @@ interface SandboxWorkbenchProps {
  * into a complete session surface: directory, agent timeline, artifacts, and
  * runtime in one reusable shell.
  */
-declare function SandboxWorkbench({ title, subtitle, status, directory, session, artifacts, activeArtifactId, onArtifactChange, onArtifactClose, runtime, layout, emptyArtifactState, className, }: SandboxWorkbenchProps): React$1.JSX.Element;
+declare function SandboxWorkbench({ title, subtitle, status, centerHeader: centerHeaderProp, composer, rail, directory, session, artifacts: artifactsProp, activeArtifactId, onArtifactChange, onArtifactClose, runtime, layout, emptyArtifactState, className, }: SandboxWorkbenchProps): React$1.JSX.Element;
 declare function AgentWorkbench(props: SandboxWorkbenchProps): React$1.JSX.Element;
 
 /**
@@ -639,4 +748,4 @@ interface ApprovalQueueProps {
  */
 declare function ApprovalQueue({ items, className, onApprove, onReject, renderItemDetail, renderTypeBadge, renderStats, canResolve, header, emptyState, showResolved: controlledShowResolved, }: ApprovalQueueProps): React$1.JSX.Element;
 
-export { AgentWorkbench, type ApprovalConfidenceStat, type ApprovalItem, ApprovalQueue, type ApprovalQueueProps, type AuditCheck, AuditResults, type AuditResultsProps, type BannerType, type CalendarEvent, CalendarView, type CalendarViewProps, type ContextBadge, DirectoryPane, type DirectoryPaneProps, type FormAudit, RuntimePane, type RuntimePaneProps, SESSION_CREATED_EVENT, SandboxWorkbench, type SandboxWorkbenchArtifact, type SandboxWorkbenchCustomArtifact, type SandboxWorkbenchFileArtifact, type SandboxWorkbenchLayoutOptions, type SandboxWorkbenchMarkdownArtifact, type SandboxWorkbenchOpenUIArtifact, type SandboxWorkbenchProps, type SandboxWorkbenchSessionProps, SessionActivityMonitor, type SessionActivityMonitorProps, type SessionCreatedDetail, type SessionOptimisticController, SessionSidebar, type SessionSidebarBadge, type SessionSidebarFilter, type SessionSidebarItem, type SessionSidebarLink, type SessionSidebarProps, type ShellShouldRevalidateArgs, type ShellShouldRevalidateOptions, StatusBanner, type StatusBannerProps, StatusBar, type StatusBarProps, TaskBoard, type TaskBoardColumn, type TaskBoardItem, type TaskBoardProps, type TerminalLine, TerminalPanel, type TerminalProps, type UseOptimisticSessionItemsOptions, WorkspaceLayout, type WorkspaceLayoutProps, WorkspacePaneHeader, type WorkspacePaneHeaderProps, createShellShouldRevalidate, dispatchSessionCreated, shellShouldRevalidate, useOptimisticSessionItems };
+export { AgentWorkbench, type ApprovalConfidenceStat, type ApprovalItem, ApprovalQueue, type ApprovalQueueProps, type AuditCheck, AuditResults, type AuditResultsProps, type BannerType, type CalendarEvent, CalendarView, type CalendarViewProps, type ContextBadge, DirectoryPane, type DirectoryPaneProps, type FormAudit, RuntimePane, type RuntimePaneProps, SESSION_CREATED_EVENT, SandboxWorkbench, type SandboxWorkbenchArtifact, type SandboxWorkbenchCustomArtifact, type SandboxWorkbenchFileArtifact, type SandboxWorkbenchLayoutOptions, type SandboxWorkbenchMarkdownArtifact, type SandboxWorkbenchOpenUIArtifact, type SandboxWorkbenchProps, type SandboxWorkbenchSessionProps, SessionActivityMonitor, type SessionActivityMonitorProps, type SessionCreatedDetail, type SessionOptimisticController, SessionSidebar, type SessionSidebarBadge, type SessionSidebarFilter, type SessionSidebarGroupBy, type SessionSidebarItem, type SessionSidebarLink, type SessionSidebarProps, type SessionSidebarVariant, type ShellShouldRevalidateArgs, type ShellShouldRevalidateOptions, StatusBanner, type StatusBannerProps, StatusBar, type StatusBarProps, TaskBoard, type TaskBoardColumn, type TaskBoardItem, type TaskBoardProps, type TerminalLine, TerminalPanel, type TerminalProps, type UseOptimisticSessionItemsOptions, WorkspaceLayout, type WorkspaceLayoutProps, WorkspacePaneHeader, type WorkspacePaneHeaderProps, createShellShouldRevalidate, dispatchSessionCreated, formatRelativeAge, shellShouldRevalidate, useOptimisticSessionItems };

package/dist/workspace.js

@@ -18,9 +18,10 @@ import {
   WorkspacePaneHeader,
   createShellShouldRevalidate,
   dispatchSessionCreated,
+  formatRelativeAge,
   shellShouldRevalidate,
   useOptimisticSessionItems
-} from "./chunk-D5VXCWUG.js";
+} from "./chunk-2Q3KDQX7.js";
 import "./chunk-BGVEHENC.js";
 import "./chunk-EI44GEQ5.js";
 import "./chunk-CZ7CSFO4.js";
@@ -44,6 +45,7 @@ export {
   WorkspacePaneHeader,
   createShellShouldRevalidate,
   dispatchSessionCreated,
+  formatRelativeAge,
   shellShouldRevalidate,
   useOptimisticSessionItems
 };

package/package.json

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