@tangle-network/sandbox-ui 0.118.0 → 0.120.0

package/README.md

@@ -232,6 +232,36 @@ function App() {
 }
 ```
 
+### Compact workspace files
+
+New agent products compose their application shell with `AgentWorkspaceCompanion` from `@tangle-network/agent-app/workspace-react`.
+Use `WorkspaceFilesPane` for its Files content and `WorkspaceArtifactView` for technical artifact rendering.
+Both are exported from `@tangle-network/sandbox-ui/workspace`.
+
+```tsx
+<WorkspaceFilesPane
+  paths={workspacePaths}
+  selectedPath={selectedPath}
+  onSelect={openFile}
+  onBack={closePreview}
+  preview={selectedArtifact ? {
+    path: selectedArtifact.path,
+    content: <WorkspaceArtifactView artifact={selectedArtifact} />,
+    actions: <DownloadFile artifact={selectedArtifact} />,
+  } : undefined}
+/>
+```
+
+Pass either a recursive `root: FileNode` or canonical `paths`, including trailing slashes for empty folders.
+A root input returns its original node as the second `onSelect` argument; flat paths have no node metadata.
+The pane uses the shared searchable file tree and retains it while a preview is open.
+Returning to files preserves expansion, selection, and scroll.
+Native search ends when a result is selected.
+Adapters own loading, permissions, errors, file reads, and actions; `emptyState` customizes an empty workspace.
+The preview header exposes Back to files, the selected path, and supplied actions without a second title frame.
+
+### Existing sandbox workbench
+
 Compose sandbox applications around `SandboxWorkbench` when you want the library’s default operating model:
 
 ```tsx
@@ -437,7 +467,7 @@ Retheming is absolutely supported, but the documentation was thinner than it sho
 | `/primitives` | Button, Card, Dialog, Badge, Input, Select, Table, Tabs, Toast, etc. |
 | `/chat` | ChatContainer, ChatInput, ChatMessage, AgentTimeline, ThinkingIndicator |
 | `/run` | ToolCallFeed, RunGroup, InlineToolItem, ExpandedToolDetail |
-| `/workspace` | SandboxWorkbench, WorkspaceLayout, DirectoryPane, RuntimePane, StatusBar |
+| `/workspace` | WorkspaceFilesPane, WorkspaceArtifactView, SandboxWorkbench, WorkspaceLayout, DirectoryPane, RuntimePane, StatusBar |
 | `/workbench` | DiffView, ChangesPane, CodeView, artifact and preview components |
 | `/openui` | OpenUIArtifactRenderer and schema types for structured artifact rendering |
 | `/files` | FileTree, FilePreview, FileTabs, FileArtifactPane |

package/dist/{dashboard-D4un5GtD.js → dashboard-CnGK2S3A.js}

@@ -1,4 +1,4 @@
-import { Wt as Logo, o as Button$1 } from "./primitives-N-59i3-7.js";
+import { Wt as Logo, o as Button$1 } from "./primitives-BQGtwZX3.js";
 import { t as cn$1 } from "./utils-DzWbktWG.js";
 import { n as MOTION_SURFACE, r as MOTION_TRAVEL, t as MOTION_CONTROL } from "./motion-DkyBRJb9.js";
 import { i as moonshot_default } from "./model-brand-hMyDTUqB.js";
@@ -10,7 +10,7 @@ import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Activity, BarChart2, Bell, Bot, Box, Camera, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Clock, Code2, Copy, Cpu, DollarSign, Download, ExternalLink, File, FileEdit, FilePlus, FileText, GitBranch, GitCommit, Globe, HardDrive, Key, Layers, Loader2, MemoryStick, MessageSquare, Monitor, MoreHorizontal, MoreVertical, Network, PanelLeft, Play, Plug, Plus, Power, PowerOff, RefreshCw, RotateCcw, Server, Settings, ShieldAlert, Skull, Terminal, Timer, Trash2, User, Users, Wrench, X, XCircle } from "lucide-react";
 import { focusField, focusFieldWithin, focusRing, focusRingInset, timeAgo } from "@tangle-network/ui/utils";
-import * as Select from "@radix-ui/react-select";
+import * as Select$1 from "@radix-ui/react-select";
 //#region src/dashboard/sidebar-context.tsx
 const PANEL_OPEN_KEY = "sandbox-sidebar-panel-open";
 const RAIL_COLLAPSED_KEY = "sandbox-sidebar-rail-collapsed";
@@ -2415,7 +2415,7 @@ function BackendSelector({ backends, selected, onChange, variant = "pill", label
 	const current = backends.find((b) => b.type === selected);
 	const triggerText = current?.label ?? placeholder;
 	const ariaLabel = label ? `${label}: ${triggerText}` : triggerText;
-	const trigger = variant === "pill" ? /* @__PURE__ */ jsxs(Select.Trigger, {
+	const trigger = variant === "pill" ? /* @__PURE__ */ jsxs(Select$1.Trigger, {
 		"aria-label": ariaLabel,
 		className: cn$1("inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container", "px-2.5 text-xs font-medium text-foreground shadow-sm", "transition-colors duration-[var(--transition-fast)]", "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high", focusRing, "data-[state=open]:border-[var(--md3-outline)] data-[state=open]:bg-surface-container-high", "disabled:opacity-50 disabled:cursor-not-allowed", triggerClassName),
 		children: [
@@ -2428,12 +2428,12 @@ function BackendSelector({ backends, selected, onChange, variant = "pill", label
 				className: "sr-only",
 				children: current.description
 			}),
-			/* @__PURE__ */ jsx(Select.Icon, {
+			/* @__PURE__ */ jsx(Select$1.Icon, {
 				asChild: true,
 				children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground transition-transform duration-[var(--transition-fast)] data-[state=open]:rotate-180" })
 			})
 		]
-	}) : /* @__PURE__ */ jsxs(Select.Trigger, {
+	}) : /* @__PURE__ */ jsxs(Select$1.Trigger, {
 		"aria-label": ariaLabel,
 		className: cn$1("flex w-full items-center justify-between gap-2 rounded-[var(--radius-md)]", "border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-2.5 text-sm text-left", "transition-colors duration-[var(--transition-fast)]", "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high", focusRing, "data-[state=open]:border-[var(--md3-outline)] data-[state=open]:bg-surface-container-high", "disabled:opacity-50 disabled:cursor-not-allowed", triggerClassName),
 		children: [/* @__PURE__ */ jsxs("span", {
@@ -2449,7 +2449,7 @@ function BackendSelector({ backends, selected, onChange, variant = "pill", label
 					children: current.description
 				})
 			]
-		}), /* @__PURE__ */ jsx(Select.Icon, {
+		}), /* @__PURE__ */ jsx(Select$1.Icon, {
 			asChild: true,
 			children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-[var(--transition-fast)] data-[state=open]:rotate-180" })
 		})]
@@ -2459,16 +2459,16 @@ function BackendSelector({ backends, selected, onChange, variant = "pill", label
 		children: [variant === "field" && label && /* @__PURE__ */ jsx("label", {
 			className: "block text-xs font-medium text-muted-foreground uppercase tracking-[0.06em]",
 			children: label
-		}), /* @__PURE__ */ jsxs(Select.Root, {
+		}), /* @__PURE__ */ jsxs(Select$1.Root, {
 			value: selected,
 			onValueChange: onChange,
-			children: [trigger, /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Content, {
+			children: [trigger, /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Content, {
 				position: "popper",
 				sideOffset: 4,
 				className: cn$1("z-50 max-h-[var(--radix-select-content-available-height)] overflow-hidden", variant === "pill" ? "min-w-[240px] max-w-[320px]" : "w-[var(--radix-select-trigger-width)]", "rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)]", "bg-surface-container-highest shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-1"),
-				children: /* @__PURE__ */ jsx(Select.Viewport, {
+				children: /* @__PURE__ */ jsx(Select$1.Viewport, {
 					className: "max-h-[min(24rem,calc(var(--radix-select-content-available-height)-2px))] overflow-y-auto overscroll-contain p-1",
-					children: backends.map((backend) => /* @__PURE__ */ jsxs(Select.Item, {
+					children: backends.map((backend) => /* @__PURE__ */ jsxs(Select$1.Item, {
 						value: backend.type,
 						className: cn$1("relative flex cursor-pointer select-none items-start gap-2.5 rounded-[var(--radius-sm)]", "px-3 py-2 text-sm outline-none", "transition-colors duration-[var(--transition-fast)]", "hover:bg-accent/50 focus:bg-accent/50", "data-[state=checked]:bg-[var(--accent-surface-soft)] data-[state=checked]:text-[var(--brand-primary)]"),
 						children: [backend.icon && /* @__PURE__ */ jsx("span", {
@@ -2476,7 +2476,7 @@ function BackendSelector({ backends, selected, onChange, variant = "pill", label
 							children: backend.icon
 						}), /* @__PURE__ */ jsxs("span", {
 							className: "flex min-w-0 flex-col",
-							children: [/* @__PURE__ */ jsx(Select.ItemText, { children: /* @__PURE__ */ jsx("span", {
+							children: [/* @__PURE__ */ jsx(Select$1.ItemText, { children: /* @__PURE__ */ jsx("span", {
 								className: "font-medium",
 								children: backend.label
 							}) }), backend.description && /* @__PURE__ */ jsx("span", {

package/dist/dashboard.js

@@ -1,4 +1,4 @@
-import { $ as SidebarRailNav, A as ResourceMeter, B as RailFlyout, C as InvoiceTable, D as canAdminSandbox, E as SandboxCard, F as CreditBalance, G as Sidebar, H as RailModeButton, I as ProfileAvatar, J as SidebarPanelContent, K as SidebarContent, L as RailButton, M as INSUFFICIENT_BALANCE_CODE, N as OutOfCreditsModal, O as ActivityFeed, P as parseInsufficientBalance, Q as SidebarRailHeader, R as RailCollapseToggle, S as PlanCards, T as NewSandboxCard, U as RailSeparator, V as RailHeader, W as RailThemeToggle, X as SidebarRail, Y as SidebarPanelHeader, Z as SidebarRailFooter, _ as HarnessPicker, a as ProcessList, at as SIDEBAR_TOTAL_WIDTH, b as HarnessLogo, c as UsageSummary, d as MetricAreaChart, et as RailTooltip, f as ProfileComparison, g as HARNESS_OPTIONS, h as DashboardLayout, i as NetworkConfig, it as SIDEBAR_RAIL_WIDTH, j as ClusterStatusBar, k as ResourceSnapshot, l as SystemLogsViewer, m as SidebarLayout, n as SnapshotList, nt as SIDEBAR_PANEL_WIDTH, o as PortsList, ot as SidebarProvider, p as ProfileSelector, q as SidebarPanel, r as BackendConfig, rt as SIDEBAR_RAIL_LABELED_WIDTH, s as GitPanel, st as useSidebar, t as PromoBanner, tt as SIDEBAR_MOBILE_WIDTH, u as VariantList, v as chatCapableHarnesses, w as SandboxTable, x as BackendSelector, y as HARNESS_BRAND, z as RailExpandable } from "./dashboard-D4un5GtD.js";
+import { $ as SidebarRailNav, A as ResourceMeter, B as RailFlyout, C as InvoiceTable, D as canAdminSandbox, E as SandboxCard, F as CreditBalance, G as Sidebar, H as RailModeButton, I as ProfileAvatar, J as SidebarPanelContent, K as SidebarContent, L as RailButton, M as INSUFFICIENT_BALANCE_CODE, N as OutOfCreditsModal, O as ActivityFeed, P as parseInsufficientBalance, Q as SidebarRailHeader, R as RailCollapseToggle, S as PlanCards, T as NewSandboxCard, U as RailSeparator, V as RailHeader, W as RailThemeToggle, X as SidebarRail, Y as SidebarPanelHeader, Z as SidebarRailFooter, _ as HarnessPicker, a as ProcessList, at as SIDEBAR_TOTAL_WIDTH, b as HarnessLogo, c as UsageSummary, d as MetricAreaChart, et as RailTooltip, f as ProfileComparison, g as HARNESS_OPTIONS, h as DashboardLayout, i as NetworkConfig, it as SIDEBAR_RAIL_WIDTH, j as ClusterStatusBar, k as ResourceSnapshot, l as SystemLogsViewer, m as SidebarLayout, n as SnapshotList, nt as SIDEBAR_PANEL_WIDTH, o as PortsList, ot as SidebarProvider, p as ProfileSelector, q as SidebarPanel, r as BackendConfig, rt as SIDEBAR_RAIL_LABELED_WIDTH, s as GitPanel, st as useSidebar, t as PromoBanner, tt as SIDEBAR_MOBILE_WIDTH, u as VariantList, v as chatCapableHarnesses, w as SandboxTable, x as BackendSelector, y as HARNESS_BRAND, z as RailExpandable } from "./dashboard-CnGK2S3A.js";
 import { n as canonicalModelId, r as modelBrandFor, t as ModelBrandStack } from "./model-brand-hMyDTUqB.js";
 import { a as formatPrice, i as PricingPage, n as TemplateCard, o as BillingDashboard, r as UsageChart, t as InfoPanel } from "./info-panel-C9cqDzOL.js";
 export { ActivityFeed, BackendConfig, BackendSelector, BillingDashboard, ClusterStatusBar, CreditBalance, DashboardLayout, GitPanel, HARNESS_BRAND, HARNESS_OPTIONS, HarnessLogo, HarnessPicker, INSUFFICIENT_BALANCE_CODE, InfoPanel, InvoiceTable, MetricAreaChart, ModelBrandStack, NetworkConfig, NewSandboxCard, OutOfCreditsModal, PlanCards, PortsList, PricingPage, ProcessList, ProfileAvatar, ProfileComparison, ProfileSelector, PromoBanner, RailButton, RailCollapseToggle, RailExpandable, RailFlyout, RailHeader, RailModeButton, RailSeparator, RailThemeToggle, RailTooltip, ResourceMeter, ResourceSnapshot, SIDEBAR_MOBILE_WIDTH, SIDEBAR_PANEL_WIDTH, SIDEBAR_RAIL_LABELED_WIDTH, SIDEBAR_RAIL_WIDTH, SIDEBAR_TOTAL_WIDTH, SandboxCard, SandboxTable, Sidebar, SidebarContent, SidebarLayout, SidebarPanel, SidebarPanelContent, SidebarPanelHeader, SidebarProvider, SidebarRail, SidebarRailFooter, SidebarRailHeader, SidebarRailNav, SnapshotList, SystemLogsViewer, TemplateCard, UsageChart, UsageSummary, VariantList, canAdminSandbox, canonicalModelId, chatCapableHarnesses, formatPrice, modelBrandFor, parseInsufficientBalance, useSidebar };

package/dist/files.d.ts

@@ -1,2 +1,2 @@
-import { C as getCodeLanguage, D as resolveFilePreviewKind, E as parseCsv, S as filterFileTree, T as getSyntaxLanguage, _ as RichFileTreeGitStatus, a as FileNode, b as detectFileFormat, c as FilePreviewProps, d as FileTabsProps, f as FileTree, g as RichFileTreeGitEntry, h as RichFileTree, i as FileFormat, l as FileTabData, m as FileTreeVisibilityOptions, n as FileArtifactPane, o as FilePreview, p as FileTreeProps, r as FileArtifactPaneProps, s as FilePreviewKind, t as CSV_PREVIEW_ROW_LIMIT, u as FileTabs, v as RichFileTreeProps, w as getFormatLabel, x as fileExtension, y as RichFileTreeThemeVars } from "./index-CXX5IpH2.js";
+import { C as getCodeLanguage, D as resolveFilePreviewKind, E as parseCsv, S as filterFileTree, T as getSyntaxLanguage, _ as RichFileTreeGitStatus, a as FileNode, b as detectFileFormat, c as FilePreviewProps, d as FileTabsProps, f as FileTree, g as RichFileTreeGitEntry, h as RichFileTree, i as FileFormat, l as FileTabData, m as FileTreeVisibilityOptions, n as FileArtifactPane, o as FilePreview, p as FileTreeProps, r as FileArtifactPaneProps, s as FilePreviewKind, t as CSV_PREVIEW_ROW_LIMIT, u as FileTabs, v as RichFileTreeProps, w as getFormatLabel, x as fileExtension, y as RichFileTreeThemeVars } from "./index-B6wKsKV6.js";
 export { CSV_PREVIEW_ROW_LIMIT, FileArtifactPane, type FileArtifactPaneProps, type FileFormat, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage, parseCsv, resolveFilePreviewKind };

package/dist/globals.css

@@ -525,6 +525,9 @@
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
+  .mx-3 {
+    margin-inline: calc(var(--spacing) * 3);
+  }
   .mx-4 {
     margin-inline: calc(var(--spacing) * 4);
   }
@@ -858,6 +861,9 @@
   .h-\[220px\] {
     height: 220px;
   }
+  .h-\[360px\] {
+    height: 360px;
+  }
   .h-\[380px\] {
     height: 380px;
   }
@@ -1293,6 +1299,9 @@
   .w-\[var\(--tool-icon-size\)\] {
     width: var(--tool-icon-size);
   }
+  .w-auto {
+    width: auto;
+  }
   .w-fit {
     width: fit-content;
   }
@@ -1494,6 +1503,9 @@
   .min-w-14 {
     min-width: calc(var(--spacing) * 14);
   }
+  .min-w-32 {
+    min-width: calc(var(--spacing) * 32);
+  }
   .min-w-40 {
     min-width: calc(var(--spacing) * 40);
   }
@@ -1566,6 +1578,9 @@
   .basis-1\/3 {
     flex-basis: calc(1 / 3 * 100%);
   }
+  .basis-64 {
+    flex-basis: calc(var(--spacing) * 64);
+  }
   .table-fixed {
     table-layout: fixed;
   }
@@ -1898,12 +1913,6 @@
   .gap-y-3 {
     row-gap: calc(var(--spacing) * 3);
   }
-  :where(.divide-x > :not(:last-child)) {
-    --tw-divide-x-reverse: 0;
-    border-inline-style: var(--tw-border-style);
-    border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
-    border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
-  }
   :where(.divide-y > :not(:last-child)) {
     --tw-divide-y-reverse: 0;
     border-bottom-style: var(--tw-border-style);
@@ -2233,9 +2242,6 @@
       border-color: color-mix(in oklab, var(--color-emerald-500) 40%, transparent);
     }
   }
-  .border-foreground {
-    border-color: hsl(var(--foreground));
-  }
   .border-green-500\/30 {
     border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2245,9 +2251,6 @@
   .border-input {
     border-color: hsl(var(--input));
   }
-  .border-muted-foreground {
-    border-color: hsl(var(--muted-foreground));
-  }
   .border-primary {
     border-color: hsl(var(--primary));
   }
@@ -2359,6 +2362,9 @@
   .bg-\[var\(--accent-surface-strong\)\] {
     background-color: var(--accent-surface-strong);
   }
+  .bg-\[var\(--bg-input\)\] {
+    background-color: var(--bg-input);
+  }
   .bg-\[var\(--bg-root\)\] {
     background-color: var(--bg-root);
   }
@@ -2602,6 +2608,9 @@
       background-color: color-mix(in oklab, var(--color-green-600) 20%, transparent);
     }
   }
+  .bg-input {
+    background-color: hsl(var(--input));
+  }
   .bg-muted {
     background-color: hsl(var(--muted));
   }
@@ -3057,12 +3066,18 @@
   .pb-8 {
     padding-bottom: calc(var(--spacing) * 8);
   }
+  .pl-1 {
+    padding-left: var(--spacing);
+  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
+  .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
   .pl-6 {
     padding-left: calc(var(--spacing) * 6);
   }
@@ -3879,6 +3894,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[color\,background-color\,border-color\,box-shadow\,transform\,scale\] {
+    transition-property: color,background-color,border-color,box-shadow,transform,scale;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[color\,background-color\,border-color\,box-shadow\] {
     transition-property: color,background-color,border-color,box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -4110,6 +4130,16 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 0px;
   }
+  .autofill\:caret-\[var\(--text-primary\)\]:autofill {
+    caret-color: var(--text-primary);
+  }
+  .autofill\:shadow-\[inset_0_0_0_1000px_var\(--bg-input\)\]:autofill {
+    --tw-shadow: inset 0 0 0 1000px var(--tw-shadow-color, var(--bg-input));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .autofill\:\[-webkit-text-fill-color\:var\(--text-primary\)\]:autofill {
+    -webkit-text-fill-color: var(--text-primary);
+  }
   @media (hover: hover) {
     .hover\:-translate-y-0\.5:hover {
       --tw-translate-y: calc(var(--spacing) * -0.5);
@@ -4506,6 +4536,9 @@
   .focus\:border-\[var\(--focus-border-danger\)\]:focus {
     border-color: var(--focus-border-danger);
   }
+  .focus\:bg-\[var\(--accent-surface-strong\)\]:focus {
+    background-color: var(--accent-surface-strong);
+  }
   .focus\:bg-accent:focus {
     background-color: hsl(var(--accent));
   }
@@ -4688,12 +4721,29 @@
   .aria-disabled\:opacity-50[aria-disabled="true"] {
     opacity: 50%;
   }
+  .aria-invalid\:border-\[var\(--surface-danger-border\)\][aria-invalid="true"] {
+    border-color: var(--surface-danger-border);
+  }
+  @media (hover: hover) {
+    .aria-invalid\:hover\:border-\[var\(--surface-danger-border\)\][aria-invalid="true"]:hover {
+      border-color: var(--surface-danger-border);
+    }
+  }
+  .aria-invalid\:focus\:border-\[var\(--focus-border-danger\)\][aria-invalid="true"]:focus {
+    border-color: var(--focus-border-danger);
+  }
+  .aria-invalid\:focus\:ring-\[var\(--focus-halo-danger\)\][aria-invalid="true"]:focus {
+    --tw-ring-color: var(--focus-halo-danger);
+  }
   .data-\[disabled\]\:pointer-events-none[data-disabled] {
     pointer-events: none;
   }
   .data-\[disabled\]\:opacity-50[data-disabled] {
     opacity: 50%;
   }
+  .data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
+    color: hsl(var(--muted-foreground));
+  }
   .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
     --tw-translate-y: var(--spacing);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -4736,15 +4786,25 @@
   .data-\[state\=checked\]\:bg-\[var\(--accent-surface-soft\)\][data-state="checked"] {
     background-color: var(--accent-surface-soft);
   }
+  .data-\[state\=checked\]\:bg-\[var\(--accent-surface-strong\)\][data-state="checked"] {
+    background-color: var(--accent-surface-strong);
+  }
   .data-\[state\=checked\]\:bg-primary[data-state="checked"] {
     background-color: hsl(var(--primary));
   }
+  .data-\[state\=checked\]\:font-medium[data-state="checked"] {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
   .data-\[state\=checked\]\:text-\[var\(--accent-text\)\][data-state="checked"] {
     color: var(--accent-text);
   }
   .data-\[state\=checked\]\:text-\[var\(--brand-primary\)\][data-state="checked"] {
     color: var(--brand-primary);
   }
+  .data-\[state\=checked\]\:text-foreground[data-state="checked"] {
+    color: hsl(var(--foreground));
+  }
   .data-\[state\=inactive\]\:text-muted-foreground[data-state="inactive"] {
     color: hsl(var(--muted-foreground));
   }
@@ -4762,6 +4822,9 @@
   .data-\[state\=open\]\:border-\[var\(--md3-outline-variant\)\][data-state="open"] {
     border-color: var(--md3-outline-variant);
   }
+  .data-\[state\=open\]\:border-primary[data-state="open"] {
+    border-color: hsl(var(--primary));
+  }
   .data-\[state\=open\]\:bg-\[var\(--accent-surface-strong\)\][data-state="open"] {
     background-color: var(--accent-surface-strong);
   }
@@ -4813,6 +4876,10 @@
     .motion-reduce\:transition-none {
       transition-property: none;
     }
+    .motion-reduce\:duration-0 {
+      --tw-duration: 0ms;
+      transition-duration: 0ms;
+    }
     .motion-reduce\:active\:scale-100:active {
       --tw-scale-x: 100%;
       --tw-scale-y: 100%;
@@ -4838,6 +4905,23 @@
       display: none;
     }
   }
+  @media (width < 40rem) {
+    .max-sm\:col-span-2 {
+      grid-column: span 2 / span 2;
+    }
+    .max-sm\:border-b {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+    .max-sm\:border-l\! {
+      border-left-style: var(--tw-border-style) !important;
+      border-left-width: 1px !important;
+    }
+    .max-sm\:border-l-0\! {
+      border-left-style: var(--tw-border-style) !important;
+      border-left-width: 0px !important;
+    }
+  }
   @media (width >= 40rem) {
     .sm\:col-span-1 {
       grid-column: span 1 / span 1;
@@ -4869,6 +4953,9 @@
     .sm\:w-auto {
       width: auto;
     }
+    .sm\:min-w-40 {
+      min-width: calc(var(--spacing) * 40);
+    }
     .sm\:shrink-0 {
       flex-shrink: 0;
     }
@@ -4902,6 +4989,9 @@
     .sm\:gap-2 {
       gap: calc(var(--spacing) * 2);
     }
+    .sm\:gap-3 {
+      gap: calc(var(--spacing) * 3);
+    }
     .sm\:gap-x-2 {
       column-gap: calc(var(--spacing) * 2);
     }
@@ -4927,17 +5017,14 @@
     .sm\:px-4 {
       padding-inline: calc(var(--spacing) * 4);
     }
-    .sm\:px-5 {
-      padding-inline: calc(var(--spacing) * 5);
-    }
     .sm\:px-6 {
       padding-inline: calc(var(--spacing) * 6);
     }
     .sm\:py-1 {
       padding-block: var(--spacing);
     }
-    .sm\:py-4 {
-      padding-block: calc(var(--spacing) * 4);
+    .sm\:pr-6 {
+      padding-right: calc(var(--spacing) * 6);
     }
     .sm\:text-left {
       text-align: left;
@@ -4946,9 +5033,9 @@
       font-size: var(--text-5xl);
       line-height: var(--tw-leading, var(--text-5xl--line-height));
     }
-    .sm\:break-normal {
-      overflow-wrap: normal;
-      word-break: normal;
+    .sm\:text-sm {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
     }
     .sm\:opacity-0 {
       opacity: 0%;
@@ -4978,6 +5065,9 @@
     .md\:hidden {
       display: none;
     }
+    .md\:table-cell {
+      display: table-cell;
+    }
     .md\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
@@ -5033,6 +5123,9 @@
     .lg\:grid-cols-4 {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
+    .lg\:grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
     .lg\:grid-cols-6 {
       grid-template-columns: repeat(6, minmax(0, 1fr));
     }
@@ -5216,29 +5309,43 @@
   .\[\&\:not\(\:first-child\)\]\:pt-0:not(:first-child) {
     padding-top: 0px;
   }
+  .\[\&\>\*\]\:max-w-full > * {
+    max-width: 100%;
+  }
+  .\[\&\>\*\]\:min-w-0 > * {
+    min-width: 0px;
+  }
   @media (width < 40rem) {
-    .max-sm\:\[\&\:not\(\:nth-child\(2n\+1\)\)\]\:border-l:not(:nth-child(2n+1)) {
+    .max-sm\:\[\&\>div\:not\(\:nth-child\(2n\+1\)\)\]\:border-l > div:not(:nth-child(2n+1)) {
       border-left-style: var(--tw-border-style);
       border-left-width: 1px;
     }
   }
-  @media (width >= 48rem) {
-    .md\:\[\&\:not\(\:nth-child\(3n\+1\)\)\]\:border-l:not(:nth-child(3n+1)) {
+  @media (width >= 40rem) {
+    .sm\:\[\&\>div\:not\(\:nth-child\(3n\+1\)\)\]\:border-l > div:not(:nth-child(3n+1)) {
       border-left-style: var(--tw-border-style);
       border-left-width: 1px;
     }
-  }
-  @media (width >= 40rem) {
-    .sm\:\[\&\:not\(\:nth-child\(4n\+1\)\)\]\:border-l:not(:nth-child(4n+1)) {
+    @media (width < 64rem) {
+      .sm\:max-lg\:\[\&\>div\:not\(\:nth-child\(3n\+1\)\)\]\:border-l > div:not(:nth-child(3n+1)) {
+        border-left-style: var(--tw-border-style);
+        border-left-width: 1px;
+      }
+    }
+    .sm\:\[\&\>div\:not\(\:nth-child\(4n\+1\)\)\]\:border-l > div:not(:nth-child(4n+1)) {
       border-left-style: var(--tw-border-style);
       border-left-width: 1px;
     }
   }
-  .\[\&\>\*\]\:max-w-full > * {
-    max-width: 100%;
-  }
-  .\[\&\>\*\]\:min-w-0 > * {
-    min-width: 0px;
+  @media (width >= 64rem) {
+    .lg\:\[\&\>div\:not\(\:nth-child\(5n\+1\)\)\]\:border-l > div:not(:nth-child(5n+1)) {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+    .lg\:\[\&\>div\:not\(\:nth-child\(6n\+1\)\)\]\:border-l > div:not(:nth-child(6n+1)) {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
   }
   .\[\&\>span\]\:line-clamp-1 > span {
     overflow: hidden;
@@ -5246,10 +5353,24 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
   }
+  .\[\&\>span\]\:min-w-0 > span {
+    min-width: 0px;
+  }
+  .\[\&\>span\]\:text-left > span {
+    text-align: left;
+  }
+  .\[\&\>svg\]\:transition-transform > svg {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .\[\&\>tr\]\:last\:border-b-0 > tr:last-child {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 0px;
   }
+  .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open] > svg {
+    rotate: 180deg;
+  }
   [data-sandbox-theme=''] .\[\[data-sandbox-theme\=\'\'\]_\&\]\:invert {
     --tw-invert: invert(100%);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -6788,7 +6909,7 @@
   inherits: false;
   initial-value: 0;
 }
-@property --tw-divide-x-reverse {
+@property --tw-divide-y-reverse {
   syntax: "*";
   inherits: false;
   initial-value: 0;
@@ -6798,11 +6919,6 @@
   inherits: false;
   initial-value: solid;
 }
-@property --tw-divide-y-reverse {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
 @property --tw-gradient-position {
   syntax: "*";
   inherits: false;
@@ -7103,9 +7219,8 @@
       --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
-      --tw-divide-x-reverse: 0;
-      --tw-border-style: solid;
       --tw-divide-y-reverse: 0;
+      --tw-border-style: solid;
       --tw-gradient-position: initial;
       --tw-gradient-from: #0000;
       --tw-gradient-via: #0000;

package/dist/index-B6wKsKV6.d.ts

@@ -0,0 +1,2 @@
+import { CSV_PREVIEW_ROW_LIMIT, FileArtifactPane as FileArtifactPane$1, FileArtifactPaneProps, FileFormat, FileNode as FileNode$1, FilePreview, FilePreviewKind, FilePreviewProps, FileTabData as FileTabData$1, FileTabs, FileTabsProps, FileTree as FileTree$1, FileTreeProps, FileTreeVisibilityOptions as FileTreeVisibilityOptions$1, RichFileTree as RichFileTree$1, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps as RichFileTreeProps$1, RichFileTreeThemeVars, detectFileFormat, fileExtension, filterFileTree as filterFileTree$1, getCodeLanguage, getFormatLabel, getSyntaxLanguage, parseCsv, resolveFilePreviewKind } from "@tangle-network/ui/files";
+export { getCodeLanguage as C, resolveFilePreviewKind as D, parseCsv as E, filterFileTree$1 as S, getSyntaxLanguage as T, RichFileTreeGitStatus as _, FileNode$1 as a, detectFileFormat as b, FilePreviewProps as c, FileTabsProps as d, FileTree$1 as f, RichFileTreeGitEntry as g, RichFileTree$1 as h, FileFormat as i, FileTabData$1 as l, FileTreeVisibilityOptions$1 as m, FileArtifactPane$1 as n, FilePreview as o, FileTreeProps as p, FileArtifactPaneProps as r, FilePreviewKind as s, CSV_PREVIEW_ROW_LIMIT as t, FileTabs as u, RichFileTreeProps$1 as v, getFormatLabel as w, fileExtension as x, RichFileTreeThemeVars as y };

package/dist/{index-CcbhfDa-.d.ts → index-BxFd7DOv.d.ts}

@@ -1,7 +1,7 @@
 import { ArtifactPane as ArtifactPane$1, ArtifactPaneProps } from "@tangle-network/ui/primitives";
 import { HTMLAttributes, ReactNode, Ref } from "react";
 import { LucideIcon } from "lucide-react";
-import { FileNode, FileTabData, FileTreeVisibilityOptions } from "@tangle-network/ui/files";
+import { FileNode, FileTabData, FileTreeVisibilityOptions, RichFileTreeProps } from "@tangle-network/ui/files";
 import { ActiveSessionRecord, ActiveSessionStatus, SessionProjectKey } from "@tangle-network/ui/stores";
 import { ChatContainerProps } from "@tangle-network/ui/chat";
 import { OpenUIAction, OpenUIComponentNode } from "@tangle-network/ui/openui";
@@ -774,4 +774,36 @@ interface ApprovalQueueProps {
  */
 declare function ApprovalQueue({ items, className, onApprove, onReject, renderItemDetail, renderTypeBadge, renderStats, canResolve, header, emptyState, showResolved: controlledShowResolved }: ApprovalQueueProps): import("react").JSX.Element;
 //#endregion
-export { TerminalProps as $, ShellShouldRevalidateArgs as A, SessionSidebarLink as B, SandboxWorkbenchLayoutOptions as C, SandboxWorkbenchSessionProps as D, SandboxWorkbenchProps as E, SessionSidebar as F, SessionOptimisticController as G, SessionSidebarVariant as H, SessionSidebarBadge as I, useOptimisticSessionItems as J, UseOptimisticSessionItemsOptions as K, SessionSidebarFilter as L, createShellShouldRevalidate as M, shellShouldRevalidate as N, SessionActivityMonitor as O, formatRelativeAge as P, TerminalPanel as Q, SessionSidebarGroupBy as R, SandboxWorkbenchFileArtifact as S, SandboxWorkbenchOpenUIArtifact as T, SESSION_CREATED_EVENT as U, SessionSidebarProps as V, SessionCreatedDetail as W, RuntimePaneProps as X, RuntimePane as Y, TerminalLine as Z, FormAudit as _, ApprovalQueue as a, StatusBannerProps as at, SandboxWorkbenchArtifact as b, CalendarView as c, WorkspacePaneHeader as ct, TaskBoardColumn as d, WorkspaceLayoutProps as dt, ContextBadge as et, TaskBoardItem as f, AuditResultsProps as g, AuditResults as h, ApprovalItem as i, StatusBanner as it, ShellShouldRevalidateOptions as j, SessionActivityMonitorProps as k, CalendarViewProps as l, WorkspacePaneHeaderProps as lt, AuditCheck as m, ArtifactPaneProps as n, StatusBarProps as nt, ApprovalQueueProps as o, DirectoryPane as ot, TaskBoardProps as p, dispatchSessionCreated as q, ApprovalConfidenceStat as r, BannerType as rt, CalendarEvent as s, DirectoryPaneProps as st, ArtifactPane$1 as t, StatusBar as tt, TaskBoard as u, WorkspaceLayout as ut, AgentWorkbench as v, SandboxWorkbenchMarkdownArtifact as w, SandboxWorkbenchCustomArtifact as x, SandboxWorkbench as y, SessionSidebarItem as z };
+//#region src/workspace/workspace-files-pane.d.ts
+interface WorkspaceFilesPreview {
+  path: string;
+  content: ReactNode;
+  actions?: ReactNode;
+}
+type WorkspaceFilesSource = {
+  root: FileNode;
+  paths?: never;
+} | {
+  paths: ReadonlyArray<string>;
+  root?: never;
+};
+type WorkspaceFilesPaneProps = Omit<RichFileTreeProps, "root" | "paths" | "onSelect" | "className"> & WorkspaceFilesSource & {
+  /** Root inputs preserve the original node. Flat path inputs have no node metadata. */
+  onSelect?: (path: string, node?: FileNode) => void;
+  preview?: WorkspaceFilesPreview;
+  onBack?: () => void;
+  /** Supply loading, unavailable, or empty content from the authoritative adapter. */
+  emptyState?: ReactNode;
+  className?: string;
+};
+/** Compact file navigation shared by workspace companions and standalone panes. */
+declare function WorkspaceFilesPane({ root, paths, onSelect, preview, onBack, emptyState, className, ...treeProps }: WorkspaceFilesPaneProps): import("react").JSX.Element;
+//#endregion
+//#region src/workspace/workspace-artifact-view.d.ts
+interface WorkspaceArtifactViewProps {
+  artifact: SandboxWorkbenchArtifact;
+}
+/** The shared technical renderer for workspace files and generated artifacts. */
+declare function WorkspaceArtifactView({ artifact }: WorkspaceArtifactViewProps): import("react").JSX.Element;
+//#endregion
+export { useOptimisticSessionItems as $, SandboxWorkbenchOpenUIArtifact as A, SessionSidebar as B, AgentWorkbench as C, SandboxWorkbenchFileArtifact as D, SandboxWorkbenchCustomArtifact as E, ShellShouldRevalidateArgs as F, SessionSidebarLink as G, SessionSidebarFilter as H, ShellShouldRevalidateOptions as I, SESSION_CREATED_EVENT as J, SessionSidebarProps as K, createShellShouldRevalidate as L, SandboxWorkbenchSessionProps as M, SessionActivityMonitor as N, SandboxWorkbenchLayoutOptions as O, SessionActivityMonitorProps as P, dispatchSessionCreated as Q, shellShouldRevalidate as R, FormAudit as S, SandboxWorkbenchArtifact as T, SessionSidebarGroupBy as U, SessionSidebarBadge as V, SessionSidebarItem as W, SessionOptimisticController as X, SessionCreatedDetail as Y, UseOptimisticSessionItemsOptions as Z, TaskBoardItem as _, WorkspaceFilesPane as a, ContextBadge as at, AuditResults as b, ApprovalConfidenceStat as c, BannerType as ct, ApprovalQueueProps as d, DirectoryPane as dt, RuntimePane as et, CalendarEvent as f, DirectoryPaneProps as ft, TaskBoardColumn as g, WorkspaceLayoutProps as gt, TaskBoard as h, WorkspaceLayout as ht, WorkspaceArtifactViewProps as i, TerminalProps as it, SandboxWorkbenchProps as j, SandboxWorkbenchMarkdownArtifact as k, ApprovalItem as l, StatusBanner as lt, CalendarViewProps as m, WorkspacePaneHeaderProps as mt, ArtifactPaneProps as n, TerminalLine as nt, WorkspaceFilesPaneProps as o, StatusBar as ot, CalendarView as p, WorkspacePaneHeader as pt, SessionSidebarVariant as q, WorkspaceArtifactView as r, TerminalPanel as rt, WorkspaceFilesPreview as s, StatusBarProps as st, ArtifactPane$1 as t, RuntimePaneProps as tt, ApprovalQueue as u, StatusBannerProps as ut, TaskBoardProps as v, SandboxWorkbench as w, AuditResultsProps as x, AuditCheck as y, formatRelativeAge as z };

package/dist/{index-z_zNuZHm.d.ts → index-DJyIXUx9.d.ts}

@@ -1,5 +1,5 @@
 import { v as ExposedPort } from "./index-CGMpKgB8.js";
-import { _ as RichFileTreeGitStatus, g as RichFileTreeGitEntry } from "./index-CXX5IpH2.js";
+import { _ as RichFileTreeGitStatus, g as RichFileTreeGitEntry } from "./index-B6wKsKV6.js";
 import { a as PreviewReadiness, i as PreviewAccess } from "./embedded-app-view-B_vMTtJn.js";
 import * as React$1 from "react";
 import { CSSProperties } from "react";