@tangle-network/sandbox-ui 0.111.2 → 0.113.0

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;
   }
@@ -847,6 +853,9 @@
   .h-\[640px\] {
     height: 640px;
   }
+  .h-\[720px\] {
+    height: 720px;
+  }
   .h-\[var\(--avatar-size\)\] {
     height: var(--avatar-size);
   }
@@ -898,6 +907,9 @@
   .max-h-96 {
     max-height: calc(var(--spacing) * 96);
   }
+  .max-h-\[40\%\] {
+    max-height: 40%;
+  }
   .max-h-\[70vh\] {
     max-height: 70vh;
   }
@@ -913,12 +925,18 @@
   .min-h-0 {
     min-height: 0px;
   }
+  .min-h-8 {
+    min-height: calc(var(--spacing) * 8);
+  }
   .min-h-24 {
     min-height: calc(var(--spacing) * 24);
   }
   .min-h-\[2px\] {
     min-height: 2px;
   }
+  .min-h-\[3\.5rem\] {
+    min-height: 3.5rem;
+  }
   .min-h-\[6rem\] {
     min-height: 6rem;
   }
@@ -1102,6 +1120,9 @@
   .w-\[3px\] {
     width: 3px;
   }
+  .w-\[5\.5rem\] {
+    width: 5.5rem;
+  }
   .w-\[17px\] {
     width: 17px;
   }
@@ -1135,6 +1156,9 @@
   .w-\[420px\] {
     width: 420px;
   }
+  .w-\[440px\] {
+    width: 440px;
+  }
   .w-\[480px\] {
     width: 480px;
   }
@@ -2691,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);
   }
@@ -2796,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);
   }
@@ -2965,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);
@@ -3300,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)) {
@@ -3471,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);
@@ -3724,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);
     }
@@ -4124,6 +4171,9 @@
     .hover\:bg-red-700:hover {
       background-color: var(--color-red-700);
     }
+    .hover\:bg-surface-container:hover {
+      background-color: var(--color-surface-container);
+    }
     .hover\:bg-surface-container-high:hover {
       background-color: var(--color-surface-container-high);
     }
@@ -4327,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;
   }
@@ -4696,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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { CSSProperties } from 'react';
-import { RichFileTreeGitEntry, RichFileTreeGitStatus } from '@tangle-network/ui/files';
+import { RichFileTreeGitStatus, RichFileTreeGitEntry } from '@tangle-network/ui/files';
 import { E as ExposedPort } from './ports-list-CDIvTNnX.js';
 
 /** Which surface the artifact pane is currently showing. */
@@ -67,6 +67,47 @@ interface SandboxArtifactPaneProps {
     className?: string;
     style?: CSSProperties;
 }
+/**
+ * One entry of the sandbox's git working tree, as the Changes pane lists it.
+ * `additions` / `deletions` are the numstat counts the sidecar's
+ * `GET /git/diff` reports per file.
+ *
+ * `baseline` / `current` are the file contents the diff is drawn from and are
+ * absent until the consumer resolves them for the selected file. Which of the
+ * two counts as "resolved" follows the status: an added or untracked file has
+ * no baseline and diffs against the empty string once `current` is present; a
+ * deleted file has no working copy and diffs against the empty string once
+ * `baseline` is present; every other status waits for both.
+ */
+interface ChangedFile {
+    path: string;
+    status: RichFileTreeGitStatus;
+    additions: number;
+    deletions: number;
+    /** Present once the consumer has resolved contents for the selected file. */
+    baseline?: string;
+    current?: string;
+}
+interface ChangesPaneProps {
+    /** Current branch; `null` when the tree has no commits yet or is not a repository. */
+    branch: string | null;
+    ahead?: number;
+    behind?: number;
+    files: ChangedFile[];
+    selectedPath?: string;
+    onSelectFile?: (path: string) => void;
+    loading?: boolean;
+    error?: string | null;
+    onRefresh?: () => void;
+    /** Stage everything and commit. Resolve on success; reject with an Error the pane shows inline. */
+    onCommit?: (message: string) => Promise<void>;
+    onPush?: () => Promise<void>;
+    /** Which action is in flight; the pane disables the other and shows a spinner on this one. */
+    busy?: "commit" | "push" | null;
+    /** Open the file as a workbench artifact (the product wires this to its artifact opener). */
+    onOpenFile?: (path: string) => void;
+    className?: string;
+}
 
 /**
  * Blueprint-grade artifact workbench. Composes the sandbox-ui substrate
@@ -78,6 +119,21 @@ interface SandboxArtifactPaneProps {
  */
 declare function SandboxArtifactPane({ artifact, paths, gitStatus, showTree, ports, previewUrl, terminal, activeView, defaultView, onViewChange, onFileSelect, onExposePort, onRemovePort, className, style, }: SandboxArtifactPaneProps): React.JSX.Element;
 
+/**
+ * The sandbox's git working tree as a review surface: every changed file with
+ * its line counts, the selected file's word-level diff beneath, and a commit
+ * box in the footer. Data in, callbacks out — the pane never fetches; the
+ * consumer feeds it the sidecar's `/git/status` + `/git/diff` and resolves
+ * `baseline` / `current` for the file it is told was selected.
+ *
+ * The list is capped at 40% of the pane and scrolls, so the diff keeps its
+ * room however many files changed. The row's own chrome is compact: the
+ * workspace shell already gives its right pane the 56px `WorkspacePaneHeader`,
+ * so this header nests beneath it at `PanelHeader` rhythm rather than adding a
+ * second tall bar.
+ */
+declare function ChangesPane({ branch, ahead, behind, files, selectedPath, onSelectFile, loading, error, onRefresh, onCommit, onPush, busy, onOpenFile, className, }: ChangesPaneProps): React.JSX.Element;
+
 interface PillTabItem<T extends string> {
     value: T;
     label: string;
@@ -124,6 +180,11 @@ declare function buildUnifiedPatch(filename: string, baseline: string, current:
 declare function GitStatusBadge({ status }: {
     status: RichFileTreeGitStatus;
 }): React.JSX.Element;
+/** `+added −removed` line counts in mono; the same pair the Changes list prints per file. */
+declare function DiffStatsBadge({ stats, className }: {
+    stats: DiffStats;
+    className?: string;
+}): React.JSX.Element;
 interface PanelHeaderProps {
     filename: string;
     gitStatus?: RichFileTreeGitStatus;
@@ -182,6 +243,12 @@ interface DiffViewProps {
     filename: string;
     baseline: string;
     current: string;
+    /**
+     * The renderer's own sticky file header (name + counts). On by default; a
+     * host whose chrome already names the file, such as the Changes pane under
+     * its `PanelHeader`, turns it off so the name is not printed twice.
+     */
+    showFileHeader?: boolean;
     className?: string;
 }
 /**
@@ -189,7 +256,7 @@ interface DiffViewProps {
  * with jsdiff's `createTwoFilesPatch` (baseline → current); the renderer owns
  * hunking, intra-line word diffing, gutters, and syntax highlighting.
  */
-declare function DiffView({ filename, baseline, current, className }: DiffViewProps): React.JSX.Element;
+declare function DiffView({ filename, baseline, current, showFileHeader, className }: DiffViewProps): React.JSX.Element;
 
 interface PreviewViewProps {
     /** Origin to load in the preview iframe. */
@@ -223,4 +290,4 @@ interface CodeSurfaceProps {
  */
 declare function CodeSurface({ code, filename, language, showLineNumbers, className, }: CodeSurfaceProps): React.JSX.Element;
 
-export { type ArtifactView, BRAND_PRISM_THEME, CodeSurface, type CodeSurfaceProps, CodeView, type CodeViewProps, type DiffStats, DiffView, type DiffViewProps, FileBreadcrumb, type FileBreadcrumbProps, GitStatusBadge, PanelHeader, type PanelHeaderProps, type PillTabItem, PillTabs, type PillTabsProps, PreviewView, type PreviewViewProps, type SandboxArtifact, SandboxArtifactPane, type SandboxArtifactPaneProps, type SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats, resolveLanguage };
+export { type ArtifactView, BRAND_PRISM_THEME, type ChangedFile, ChangesPane, type ChangesPaneProps, CodeSurface, type CodeSurfaceProps, CodeView, type CodeViewProps, type DiffStats, DiffStatsBadge, DiffView, type DiffViewProps, FileBreadcrumb, type FileBreadcrumbProps, GitStatusBadge, PanelHeader, type PanelHeaderProps, type PillTabItem, PillTabs, type PillTabsProps, PreviewView, type PreviewViewProps, type SandboxArtifact, SandboxArtifactPane, type SandboxArtifactPaneProps, type SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats, resolveLanguage };

package/dist/workbench.js

@@ -1,7 +1,9 @@
 import {
   BRAND_PRISM_THEME,
+  ChangesPane,
   CodeSurface,
   CodeView,
+  DiffStatsBadge,
   DiffView,
   FileBreadcrumb,
   GitStatusBadge,
@@ -12,7 +14,7 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-5M67IFVI.js";
+} from "./chunk-ISTJTUHJ.js";
 import "./chunk-PZVUIUUW.js";
 import "./chunk-K4Q4E7D7.js";
 import "./chunk-OMUIPJQZ.js";
@@ -25,8 +27,10 @@ import "./chunk-EI44GEQ5.js";
 import "./chunk-CZ7CSFO4.js";
 export {
   BRAND_PRISM_THEME,
+  ChangesPane,
   CodeSurface,
   CodeView,
+  DiffStatsBadge,
   DiffView,
   FileBreadcrumb,
   GitStatusBadge,

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