@tangle-network/sandbox-ui 0.112.0 → 0.113.1

package/dist/{chunk-ISTJTUHJ.js → chunk-VEK3EZIW.js}

@@ -7242,7 +7242,7 @@ function CodeView({
 
 // src/workbench/diff-view.tsx
 import * as React7 from "react";
-import { PatchDiff } from "@pierre/diffs/react";
+import { FileDiff, getSingularPatch } from "@pierre/diffs";
 
 // src/workbench/diff-utils.ts
 import { createTwoFilesPatch, diffLines } from "diff";
@@ -7280,19 +7280,40 @@ var DIFF_OPTIONS = {
   themeType: "dark",
   stickyHeader: true
 };
+var DIFF_CONTAINER_TAG = "diffs-container";
 function DiffView({ filename, baseline, current, showFileHeader = true, className }) {
   const patch = React7.useMemo(
     () => buildUnifiedPatch(filename, baseline, current),
     [filename, baseline, current]
   );
-  const options = React7.useMemo(
-    () => showFileHeader ? DIFF_OPTIONS : { ...DIFF_OPTIONS, disableFileHeader: true },
-    [showFileHeader]
-  );
+  const hostRef = React7.useRef(null);
+  React7.useLayoutEffect(() => {
+    const host = hostRef.current;
+    if (host == null || !patch) return;
+    const container = document.createElement(DIFF_CONTAINER_TAG);
+    host.appendChild(container);
+    const instance = new FileDiff(
+      showFileHeader ? DIFF_OPTIONS : { ...DIFF_OPTIONS, disableFileHeader: true },
+      void 0,
+      false
+    );
+    instance.hydrate({ fileDiff: getSingularPatch(patch), fileContainer: container });
+    return () => {
+      instance.cleanUp();
+      container.remove();
+    };
+  }, [patch, showFileHeader]);
   if (!patch) {
     return /* @__PURE__ */ jsx7("div", { className: cn("flex h-full items-center justify-center bg-surface-container", className), children: /* @__PURE__ */ jsx7("p", { className: "text-sm text-muted-foreground", children: "No changes \u2014 baseline and working copy are identical." }) });
   }
-  return /* @__PURE__ */ jsx7("div", { className: cn("h-full min-h-0 overflow-auto bg-surface-container text-[13px]", className), children: /* @__PURE__ */ jsx7(PatchDiff, { patch, options }) });
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      ref: hostRef,
+      "data-testid": "diff-view",
+      className: cn("h-full min-h-0 overflow-auto bg-surface-container text-[13px]", className)
+    }
+  );
 }
 
 // src/workbench/preview-view.tsx

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,
@@ -149,7 +150,7 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-ISTJTUHJ.js";
+} from "./chunk-VEK3EZIW.js";
 import {
   FileArtifactPane,
   FilePreview,
@@ -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/workbench.d.ts

@@ -252,9 +252,18 @@ interface DiffViewProps {
     className?: string;
 }
 /**
- * Word-level unified diff via `@pierre/diffs`' `PatchDiff`. The patch is built
- * with jsdiff's `createTwoFilesPatch` (baseline → current); the renderer owns
- * hunking, intra-line word diffing, gutters, and syntax highlighting.
+ * Word-level unified diff via `@pierre/diffs`' core `FileDiff` renderer. The
+ * patch is built with jsdiff's `createTwoFilesPatch` (baseline → current); the
+ * renderer owns hunking, intra-line word diffing, gutters, and highlighting.
+ *
+ * The renderer is driven from an effect on a host element this component
+ * creates for every mount, not through the library's React wrapper. The
+ * wrapper hydrates the element React hands it and treats an existing shadow
+ * `<pre>` as prerendered content; React StrictMode attaches, detaches, and
+ * re-attaches that element on mount, so the second hydrate finds the first
+ * mount's `<pre>` and renders nothing. A fresh element per effect run has no
+ * such history, and the cleanup removes it (the instance is not
+ * container-managed).
  */
 declare function DiffView({ filename, baseline, current, showFileHeader, className }: DiffViewProps): React.JSX.Element;
 

package/dist/workbench.js

@@ -14,7 +14,7 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-ISTJTUHJ.js";
+} from "./chunk-VEK3EZIW.js";
 import "./chunk-PZVUIUUW.js";
 import "./chunk-K4Q4E7D7.js";
 import "./chunk-OMUIPJQZ.js";

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.1",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",