@tangle-network/sandbox-ui 0.116.0 → 0.116.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -1
- package/dist/globals.css +3 -14
- package/dist/{index-D8XVXO94.d.ts → index-iDiLnSoo.d.ts} +7 -9
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/styles.css +3 -14
- package/dist/{workspace-CT4aDUE5.js → workspace-Pq-koOTW.js} +171 -100
- package/dist/workspace.d.ts +1 -1
- package/dist/workspace.js +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -212,7 +212,12 @@ const partMap: Record<string, SessionPart[]> = {};
|
|
|
212
212
|
|
|
213
213
|
### The three-pane shell
|
|
214
214
|
|
|
215
|
-
For a chats rail · transcript + composer · artifacts layout, hand `SandboxWorkbench` a `SessionSidebar` as its `rail
|
|
215
|
+
For a chats rail · transcript + composer · artifacts layout, hand `SandboxWorkbench` a `SessionSidebar` as its `rail` and your composer as `composer`.
|
|
216
|
+
The default places the session title and status in the transcript pane header without a second shell row.
|
|
217
|
+
Use `centerHeader={null}` when the transcript should have no pane frame either.
|
|
218
|
+
`WorkspaceLayout` leaves its center row out until a caller supplies `centerHeader`.
|
|
219
|
+
Closed panes get compact edge controls with reserved space beside the transcript.
|
|
220
|
+
It owns pane sizes and, when you pass `layout.leftOpen` / `layout.onLeftOpenChange`, the open state too.
|
|
216
221
|
|
|
217
222
|
```tsx
|
|
218
223
|
const [chatsOpen, setChatsOpen] = useState(true);
|
package/dist/globals.css
CHANGED
|
@@ -1319,6 +1319,9 @@
|
|
|
1319
1319
|
.max-w-\[14rem\] {
|
|
1320
1320
|
max-width: 14rem;
|
|
1321
1321
|
}
|
|
1322
|
+
.max-w-\[35\%\] {
|
|
1323
|
+
max-width: 35%;
|
|
1324
|
+
}
|
|
1322
1325
|
.max-w-\[45\%\] {
|
|
1323
1326
|
max-width: 45%;
|
|
1324
1327
|
}
|
|
@@ -2912,9 +2915,6 @@
|
|
|
2912
2915
|
.py-3 {
|
|
2913
2916
|
padding-block: calc(var(--spacing) * 3);
|
|
2914
2917
|
}
|
|
2915
|
-
.py-3\.5 {
|
|
2916
|
-
padding-block: calc(var(--spacing) * 3.5);
|
|
2917
|
-
}
|
|
2918
2918
|
.py-4 {
|
|
2919
2919
|
padding-block: calc(var(--spacing) * 4);
|
|
2920
2920
|
}
|
|
@@ -3146,9 +3146,6 @@
|
|
|
3146
3146
|
.text-\[15px\] {
|
|
3147
3147
|
font-size: 15px;
|
|
3148
3148
|
}
|
|
3149
|
-
.text-\[17px\] {
|
|
3150
|
-
font-size: 17px;
|
|
3151
|
-
}
|
|
3152
3149
|
.text-\[calc\(var\(--font-size-xs\)-1px\)\] {
|
|
3153
3150
|
font-size: calc(var(--font-size-xs) - 1px);
|
|
3154
3151
|
}
|
|
@@ -3265,10 +3262,6 @@
|
|
|
3265
3262
|
--tw-font-weight: var(--font-weight-semibold);
|
|
3266
3263
|
font-weight: var(--font-weight-semibold);
|
|
3267
3264
|
}
|
|
3268
|
-
.tracking-\[0\.01em\] {
|
|
3269
|
-
--tw-tracking: 0.01em;
|
|
3270
|
-
letter-spacing: 0.01em;
|
|
3271
|
-
}
|
|
3272
3265
|
.tracking-\[0\.1em\] {
|
|
3273
3266
|
--tw-tracking: 0.1em;
|
|
3274
3267
|
letter-spacing: 0.1em;
|
|
@@ -3297,10 +3290,6 @@
|
|
|
3297
3290
|
--tw-tracking: 0.16em;
|
|
3298
3291
|
letter-spacing: 0.16em;
|
|
3299
3292
|
}
|
|
3300
|
-
.tracking-\[0\.18em\] {
|
|
3301
|
-
--tw-tracking: 0.18em;
|
|
3302
|
-
letter-spacing: 0.18em;
|
|
3303
|
-
}
|
|
3304
3293
|
.tracking-\[var\(--tracking-snug\,-0\.01em\)\] {
|
|
3305
3294
|
--tw-tracking: var(--tracking-snug,-0.01em);
|
|
3306
3295
|
letter-spacing: var(--tracking-snug,-0.01em);
|
|
@@ -96,10 +96,9 @@ interface WorkspaceLayoutProps {
|
|
|
96
96
|
/** Extra classes for the right pane's scrolling content wrapper. */
|
|
97
97
|
rightContentClassName?: string;
|
|
98
98
|
/**
|
|
99
|
-
* `
|
|
100
|
-
*
|
|
101
|
-
*
|
|
102
|
-
* `centerHeader`, or an open-pane toggle for a closed pane.
|
|
99
|
+
* `auto` (default) reserves the center row only for `centerHeader`.
|
|
100
|
+
* Closed panes get narrow edge controls beside the content instead of a
|
|
101
|
+
* full-width row. `always` aligns every pane to the 56px header row.
|
|
103
102
|
*/
|
|
104
103
|
centerHeaderVisibility?: "always" | "auto";
|
|
105
104
|
className?: string;
|
|
@@ -562,11 +561,10 @@ interface SandboxWorkbenchProps {
|
|
|
562
561
|
subtitle?: ReactNode;
|
|
563
562
|
status?: ReactNode;
|
|
564
563
|
/**
|
|
565
|
-
*
|
|
566
|
-
*
|
|
567
|
-
*
|
|
568
|
-
*
|
|
569
|
-
* only while it holds an open-pane toggle.
|
|
564
|
+
* Optional header above the transcript. By default, `title`, `subtitle`,
|
|
565
|
+
* and `status` live in the transcript pane's own header, with no separate
|
|
566
|
+
* shell row. A node adds a distinct shell header. `null` removes the pane
|
|
567
|
+
* frame too and renders the transcript directly on `bg-background`.
|
|
570
568
|
*/
|
|
571
569
|
centerHeader?: ReactNode | null;
|
|
572
570
|
/**
|
package/dist/index.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ import { t as Session } from "./sidecar-DgH_vQ6m.js";
|
|
|
9
9
|
import { d as useSessionStream, l as UseSessionStreamOptions, n as UseSidecarAuthOptions, o as SessionDegradation, r as useSidecarAuth, s as SessionInfo, t as SidecarAuth, u as UseSessionStreamResult } from "./use-sidecar-auth-CCTJcrq7.js";
|
|
10
10
|
import { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AuthUser, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SandboxMetrics, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SidecarMetricsPayload, TaskStreamEvent, TerminalStreamEvent, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSandboxMetricsOptions, UseSandboxMetricsResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, createAuthFetcher, useApiKey, useAuth, useAutoScroll, useCreateSession, useDeleteSession, useDropdownMenu, useLiveTime, useRealtimeSession, useRenameSession, useRunCollapseState, useRunGroups, useSSEStream, useSandboxMetrics, useSdkSession, useSessions, useToolCallStream } from "./hooks.js";
|
|
11
11
|
import { $ as InputProps, $t as ToastProvider, A as DropZoneProps, At as Table, B as DropdownMenuSeparator, Bt as TabsList, C as DialogFooter, Ct as SkeletonTable, D as DialogTitle, Dt as StatusPillProps, E as DialogPortal, Et as StatusPill, F as DropdownMenuItem, Ft as TableHead, G as DropdownMenuTrigger, H as DropdownMenuSub, I as DropdownMenuLabel, It as TableHeader, J as FilterField, Jt as Textarea, K as EmptyState, Kt as TextShimmer, L as DropdownMenuPortal, Lt as TableRow, M as DropdownMenuCheckboxItem, Mt as TableCaption, N as DropdownMenuContent, Nt as TableCell, O as DialogTrigger, Ot as StatusTone, P as DropdownMenuGroup, Pt as TableFooter, Q as Input, Qt as ToastContainer, R as DropdownMenuRadioGroup, Rt as Tabs, S as DialogDescription, St as SkeletonCard, T as DialogOverlay, Tt as StatCardProps, U as DropdownMenuSubContent, Ut as TerminalDisplay, V as DropdownMenuShortcut, Vt as TabsTrigger, W as DropdownMenuSubTrigger, X as InlineCode, Xt as ThemeToggle, Y as FilterFieldProps, Yt as TextareaProps, Z as InlineCodeProps, Zt as Toast, _ as CodeBlockProps, _t as SelectTrigger, a as AvatarImage, an as badgeVariants, at as Progress, b as DialogClose, bn as TangleKnot, bt as SidebarDropZoneProps, c as Button, cn as useToast, ct as SegmentedControlProps, d as CardContent, dt as SelectGroup, en as Toolbar, et as Label, f as CardDescription, ft as SelectItem, g as CodeBlock, gt as SelectSeparator, h as CardTitle, ht as SelectScrollUpButton, i as AvatarFallback, in as UploadProgressProps, it as MetricStripProps, j as DropdownMenu, jt as TableBody, k as DropZone, kt as Switch, l as ButtonProps, lt as Select, m as CardHeader, mt as SelectScrollDownButton, nn as UploadFile, nt as MetricProps, o as Badge, on as buttonVariants, ot as SegmentedControl, p as CardFooter, pt as SelectLabel, q as EmptyStateProps, qt as TextShimmerProps, r as Avatar, rn as UploadProgress, rt as MetricStrip, s as BadgeProps, sn as useTheme, st as SegmentedControlOption, tn as ToolbarProps, tt as Metric, u as Card, ut as SelectContent, v as CopyButton, vn as Logo, vt as SelectValue, w as DialogHeader, wt as StatCard, x as DialogContent, xt as Skeleton, y as Dialog, yn as LogoProps, yt as SidebarDropZone, z as DropdownMenuRadioItem, zt as TabsContent } from "./index-PRM636Ex.js";
|
|
12
|
-
import { $ as TerminalProps, A as ShellShouldRevalidateArgs, B as SessionSidebarLink, C as SandboxWorkbenchLayoutOptions, D as SandboxWorkbenchSessionProps, E as SandboxWorkbenchProps, F as SessionSidebar, G as SessionOptimisticController, H as SessionSidebarVariant, I as SessionSidebarBadge, J as useOptimisticSessionItems, K as UseOptimisticSessionItemsOptions, L as SessionSidebarFilter, M as createShellShouldRevalidate, N as shellShouldRevalidate, O as SessionActivityMonitor, P as formatRelativeAge, Q as TerminalPanel, R as SessionSidebarGroupBy, S as SandboxWorkbenchFileArtifact, T as SandboxWorkbenchOpenUIArtifact, U as SESSION_CREATED_EVENT, V as SessionSidebarProps, W as SessionCreatedDetail, X as RuntimePaneProps, Y as RuntimePane, Z as TerminalLine, _ as FormAudit, a as ApprovalQueue, at as StatusBannerProps, b as SandboxWorkbenchArtifact, c as CalendarView, ct as WorkspacePaneHeader, d as TaskBoardColumn, dt as WorkspaceLayoutProps, et as ContextBadge, f as TaskBoardItem, g as AuditResultsProps, h as AuditResults, i as ApprovalItem, it as StatusBanner, j as ShellShouldRevalidateOptions, k as SessionActivityMonitorProps, l as CalendarViewProps, lt as WorkspacePaneHeaderProps, m as AuditCheck, n as ArtifactPaneProps, nt as StatusBarProps, o as ApprovalQueueProps, ot as DirectoryPane, p as TaskBoardProps, q as dispatchSessionCreated, r as ApprovalConfidenceStat, rt as BannerType, s as CalendarEvent, st as DirectoryPaneProps, t as ArtifactPane, tt as StatusBar, u as TaskBoard, ut as WorkspaceLayout, v as AgentWorkbench, w as SandboxWorkbenchMarkdownArtifact, x as SandboxWorkbenchCustomArtifact, y as SandboxWorkbench, z as SessionSidebarItem } from "./index-
|
|
12
|
+
import { $ as TerminalProps, A as ShellShouldRevalidateArgs, B as SessionSidebarLink, C as SandboxWorkbenchLayoutOptions, D as SandboxWorkbenchSessionProps, E as SandboxWorkbenchProps, F as SessionSidebar, G as SessionOptimisticController, H as SessionSidebarVariant, I as SessionSidebarBadge, J as useOptimisticSessionItems, K as UseOptimisticSessionItemsOptions, L as SessionSidebarFilter, M as createShellShouldRevalidate, N as shellShouldRevalidate, O as SessionActivityMonitor, P as formatRelativeAge, Q as TerminalPanel, R as SessionSidebarGroupBy, S as SandboxWorkbenchFileArtifact, T as SandboxWorkbenchOpenUIArtifact, U as SESSION_CREATED_EVENT, V as SessionSidebarProps, W as SessionCreatedDetail, X as RuntimePaneProps, Y as RuntimePane, Z as TerminalLine, _ as FormAudit, a as ApprovalQueue, at as StatusBannerProps, b as SandboxWorkbenchArtifact, c as CalendarView, ct as WorkspacePaneHeader, d as TaskBoardColumn, dt as WorkspaceLayoutProps, et as ContextBadge, f as TaskBoardItem, g as AuditResultsProps, h as AuditResults, i as ApprovalItem, it as StatusBanner, j as ShellShouldRevalidateOptions, k as SessionActivityMonitorProps, l as CalendarViewProps, lt as WorkspacePaneHeaderProps, m as AuditCheck, n as ArtifactPaneProps, nt as StatusBarProps, o as ApprovalQueueProps, ot as DirectoryPane, p as TaskBoardProps, q as dispatchSessionCreated, r as ApprovalConfidenceStat, rt as BannerType, s as CalendarEvent, st as DirectoryPaneProps, t as ArtifactPane, tt as StatusBar, u as TaskBoard, ut as WorkspaceLayout, v as AgentWorkbench, w as SandboxWorkbenchMarkdownArtifact, x as SandboxWorkbenchCustomArtifact, y as SandboxWorkbench, z as SessionSidebarItem } from "./index-iDiLnSoo.js";
|
|
13
13
|
import { A as SandboxArtifactTerminal, C as ChangesPane, D as ChangesPaneProps, E as ChangedFile, O as SandboxArtifact, S as PillTabsProps, T as ArtifactView, _ as DiffStats, a as PreviewView, b as PillTabItem, c as DiffViewProps, d as FileBreadcrumb, f as FileBreadcrumbProps, g as PanelHeaderProps, h as PanelHeader, i as resolveLanguage, k as SandboxArtifactPaneProps, l as CodeView, m as GitStatusBadge, n as CodeSurface, o as PreviewViewProps, p as DiffStatsBadge, r as CodeSurfaceProps, s as DiffView, t as BRAND_PRISM_THEME, u as CodeViewProps, v as buildUnifiedPatch, w as SandboxArtifactPane, x as PillTabs, y as computeDiffStats } from "./index-D_G-wF6u.js";
|
|
14
14
|
import { a as PreviewReadiness, i as PreviewAccess, n as EmbeddedAppView, r as EmbeddedAppViewProps, t as EmbeddedApp } from "./embedded-app-view-B_vMTtJn.js";
|
|
15
15
|
import { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from "./openui.js";
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { a as computeDiffStats, c as BRAND_PRISM_THEME, d as DiffStatsBadge, f as GitStatusBadge, i as buildUnifiedPatch, l as CodeSurface, m as PillTabs, n as SandboxArtifactPane, o as CodeView, p as PanelHeader, r as DiffView, s as FileBreadcrumb, t as ChangesPane, u as resolveLanguage } from "./workbench-DJlOqodW.js";
|
|
2
2
|
import { $ as SelectItem, A as DropdownMenuItem, At as Textarea, B as DropdownMenuTrigger, C as DialogTitle, Ct as TabsList, D as DropdownMenuCheckboxItem, E as DropdownMenu, Et as TerminalDisplay, F as DropdownMenuSeparator, Ft as UploadProgress, G as Label, Gt as TangleKnot, H as FilterField, I as DropdownMenuShortcut, It as badgeVariants, J as Progress, K as Metric, L as DropdownMenuSub, Lt as buttonVariants, M as DropdownMenuPortal, Mt as ToastContainer, N as DropdownMenuRadioGroup, Nt as ToastProvider, O as DropdownMenuContent, P as DropdownMenuRadioItem, Pt as Toolbar, Q as SelectGroup, R as DropdownMenuSubContent, Rt as useTheme, S as DialogPortal, St as TabsContent, T as DropZone, U as InlineCode, V as EmptyState, W as Input, Wt as Logo, X as Select, Y as SegmentedControl, Z as SelectContent, _ as DialogContent, _t as TableFooter, a as Badge, at as SelectValue, b as DialogHeader, bt as TableRow, c as CardContent, ct as SkeletonCard, d as CardHeader, dt as StatusPill, et as SelectLabel, f as CardTitle, ft as Switch, g as DialogClose, gt as TableCell, h as Dialog, ht as TableCaption, i as AvatarImage, it as SelectTrigger, j as DropdownMenuLabel, jt as ThemeToggle, k as DropdownMenuGroup, kt as TextShimmer, l as CardDescription, lt as SkeletonTable, m as CopyButton, mt as TableBody, n as Avatar, nt as SelectScrollUpButton, o as Button, ot as SidebarDropZone, p as CodeBlock, pt as Table, q as MetricStrip, r as AvatarFallback, rt as SelectSeparator, s as Card, st as Skeleton, tt as SelectScrollDownButton, u as CardFooter, ut as StatCard, v as DialogDescription, vt as TableHead, w as DialogTrigger, wt as TabsTrigger, x as DialogOverlay, xt as Tabs, y as DialogFooter, yt as TableHeader, z as DropdownMenuSubTrigger, zt as useToast } from "./primitives-Dh1vG6J3.js";
|
|
3
3
|
import { t as WorkspacePaneHeader } from "./workspace-pane-header-Bg1cCcHX.js";
|
|
4
|
-
import { _ as TerminalPanel, a as AuditResults, b as DirectoryPane, c as SessionActivityMonitor, d as SessionSidebar, f as SESSION_CREATED_EVENT, g as RuntimePane, h as formatRelativeAge, i as TaskBoard, l as createShellShouldRevalidate, m as useOptimisticSessionItems, n as ApprovalQueue, o as AgentWorkbench, p as dispatchSessionCreated, r as CalendarView, s as SandboxWorkbench, t as ArtifactPane, u as shellShouldRevalidate, v as StatusBar, x as WorkspaceLayout, y as StatusBanner } from "./workspace-
|
|
4
|
+
import { _ as TerminalPanel, a as AuditResults, b as DirectoryPane, c as SessionActivityMonitor, d as SessionSidebar, f as SESSION_CREATED_EVENT, g as RuntimePane, h as formatRelativeAge, i as TaskBoard, l as createShellShouldRevalidate, m as useOptimisticSessionItems, n as ApprovalQueue, o as AgentWorkbench, p as dispatchSessionCreated, r as CalendarView, s as SandboxWorkbench, t as ArtifactPane, u as shellShouldRevalidate, v as StatusBar, x as WorkspaceLayout, y as StatusBanner } from "./workspace-Pq-koOTW.js";
|
|
5
5
|
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-CqyJQc7V.js";
|
|
6
6
|
import { n as canonicalModelId, r as modelBrandFor, t as ModelBrandStack } from "./model-brand-hMyDTUqB.js";
|
|
7
7
|
import { a as formatPrice, i as PricingPage, n as TemplateCard, o as BillingDashboard, r as UsageChart, t as InfoPanel } from "./info-panel-C9cqDzOL.js";
|
package/dist/styles.css
CHANGED
|
@@ -1319,6 +1319,9 @@
|
|
|
1319
1319
|
.max-w-\[14rem\] {
|
|
1320
1320
|
max-width: 14rem;
|
|
1321
1321
|
}
|
|
1322
|
+
.max-w-\[35\%\] {
|
|
1323
|
+
max-width: 35%;
|
|
1324
|
+
}
|
|
1322
1325
|
.max-w-\[45\%\] {
|
|
1323
1326
|
max-width: 45%;
|
|
1324
1327
|
}
|
|
@@ -2912,9 +2915,6 @@
|
|
|
2912
2915
|
.py-3 {
|
|
2913
2916
|
padding-block: calc(var(--spacing) * 3);
|
|
2914
2917
|
}
|
|
2915
|
-
.py-3\.5 {
|
|
2916
|
-
padding-block: calc(var(--spacing) * 3.5);
|
|
2917
|
-
}
|
|
2918
2918
|
.py-4 {
|
|
2919
2919
|
padding-block: calc(var(--spacing) * 4);
|
|
2920
2920
|
}
|
|
@@ -3146,9 +3146,6 @@
|
|
|
3146
3146
|
.text-\[15px\] {
|
|
3147
3147
|
font-size: 15px;
|
|
3148
3148
|
}
|
|
3149
|
-
.text-\[17px\] {
|
|
3150
|
-
font-size: 17px;
|
|
3151
|
-
}
|
|
3152
3149
|
.text-\[calc\(var\(--font-size-xs\)-1px\)\] {
|
|
3153
3150
|
font-size: calc(var(--font-size-xs) - 1px);
|
|
3154
3151
|
}
|
|
@@ -3265,10 +3262,6 @@
|
|
|
3265
3262
|
--tw-font-weight: var(--font-weight-semibold);
|
|
3266
3263
|
font-weight: var(--font-weight-semibold);
|
|
3267
3264
|
}
|
|
3268
|
-
.tracking-\[0\.01em\] {
|
|
3269
|
-
--tw-tracking: 0.01em;
|
|
3270
|
-
letter-spacing: 0.01em;
|
|
3271
|
-
}
|
|
3272
3265
|
.tracking-\[0\.1em\] {
|
|
3273
3266
|
--tw-tracking: 0.1em;
|
|
3274
3267
|
letter-spacing: 0.1em;
|
|
@@ -3297,10 +3290,6 @@
|
|
|
3297
3290
|
--tw-tracking: 0.16em;
|
|
3298
3291
|
letter-spacing: 0.16em;
|
|
3299
3292
|
}
|
|
3300
|
-
.tracking-\[0\.18em\] {
|
|
3301
|
-
--tw-tracking: 0.18em;
|
|
3302
|
-
letter-spacing: 0.18em;
|
|
3303
|
-
}
|
|
3304
3293
|
.tracking-\[var\(--tracking-snug\,-0\.01em\)\] {
|
|
3305
3294
|
--tw-tracking: var(--tracking-snug,-0.01em);
|
|
3306
3295
|
letter-spacing: var(--tracking-snug,-0.01em);
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { t as cn$1 } from "./utils-DzWbktWG.js";
|
|
2
2
|
import { t as WorkspacePaneHeader } from "./workspace-pane-header-Bg1cCcHX.js";
|
|
3
3
|
import { t as MOTION_CONTROL } from "./motion-DkyBRJb9.js";
|
|
4
|
-
import { ArtifactPane, ArtifactPane as ArtifactPane$1,
|
|
4
|
+
import { ArtifactPane, ArtifactPane as ArtifactPane$1, EmptyState, Input } from "@tangle-network/ui/primitives";
|
|
5
5
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import { useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
|
|
7
7
|
import { focusField, focusRing, focusRingInset } from "@tangle-network/ui/utils";
|
|
8
8
|
import { Markdown } from "@tangle-network/ui/markdown";
|
|
9
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
9
10
|
import { Activity, AlertCircle, AlertTriangle, ArrowLeft, Binary, Bot, Boxes, CheckCircle, ChevronDown, ChevronRight, ChevronUp, FileCode2, FileText, FolderTree, LayoutPanelTop, Loader2, LoaderCircle, MessageSquareText, PanelBottomClose, PanelBottomOpen, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Plus, RefreshCw, Search, Settings, Shield, ShieldCheck, Sparkles, Terminal, TerminalSquare, Upload, Wifi, X, XCircle, Zap } from "lucide-react";
|
|
10
11
|
import { FileArtifactPane, FileTree, filterFileTree } from "@tangle-network/ui/files";
|
|
11
12
|
import { useActiveSessions, useNavbarSessions, useProjectActivity, useTotalRunningSessions } from "@tangle-network/ui/stores";
|
|
@@ -130,42 +131,55 @@ function HorizontalResizeHandle({ label, onDragStart, onStep, className }) {
|
|
|
130
131
|
})]
|
|
131
132
|
});
|
|
132
133
|
}
|
|
133
|
-
function MobileDrawer({ side, title, header, onClose, children }) {
|
|
134
|
-
return /* @__PURE__ */
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
children: [/* @__PURE__ */ jsx("
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
}),
|
|
155
|
-
|
|
156
|
-
"
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
134
|
+
function MobileDrawer({ side, title, header, onClose, onReturnFocus, theme, density, children }) {
|
|
135
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
|
|
136
|
+
open: true,
|
|
137
|
+
onOpenChange: (open) => {
|
|
138
|
+
if (!open) onClose();
|
|
139
|
+
},
|
|
140
|
+
children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm lg:hidden" }), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
|
|
141
|
+
...theme ? {
|
|
142
|
+
"data-sandbox-ui": "true",
|
|
143
|
+
"data-sandbox-theme": theme
|
|
144
|
+
} : {},
|
|
145
|
+
"data-density": density,
|
|
146
|
+
onCloseAutoFocus: (event) => {
|
|
147
|
+
event.preventDefault();
|
|
148
|
+
requestAnimationFrame(onReturnFocus);
|
|
149
|
+
},
|
|
150
|
+
className: cn$1("fixed inset-y-0 z-50 flex h-full w-[min(88vw,24rem)] flex-col border-border bg-card shadow-[0_8px_30px_rgba(0,0,0,0.18)] lg:hidden", side === "left" ? "left-0 border-r" : "right-0 border-l"),
|
|
151
|
+
children: [
|
|
152
|
+
/* @__PURE__ */ jsx(DialogPrimitive.Title, {
|
|
153
|
+
className: "sr-only",
|
|
154
|
+
children: title
|
|
155
|
+
}),
|
|
156
|
+
/* @__PURE__ */ jsxs(WorkspacePaneHeader, {
|
|
157
|
+
className: "justify-between gap-3",
|
|
158
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
159
|
+
className: "min-w-0 flex-1",
|
|
160
|
+
children: header ?? /* @__PURE__ */ jsx("span", {
|
|
161
|
+
className: "text-[13px] font-medium text-foreground",
|
|
162
|
+
children: title
|
|
163
|
+
})
|
|
164
|
+
}), /* @__PURE__ */ jsx(DialogPrimitive.Close, {
|
|
165
|
+
asChild: true,
|
|
166
|
+
children: /* @__PURE__ */ jsx("button", {
|
|
167
|
+
type: "button",
|
|
168
|
+
"aria-label": `Close ${title}`,
|
|
169
|
+
className: `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
|
|
170
|
+
children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
|
|
171
|
+
})
|
|
172
|
+
})]
|
|
173
|
+
}),
|
|
174
|
+
/* @__PURE__ */ jsx("div", {
|
|
175
|
+
className: "min-h-0 flex-1 overflow-auto",
|
|
176
|
+
children
|
|
177
|
+
})
|
|
178
|
+
]
|
|
179
|
+
})] })
|
|
166
180
|
});
|
|
167
181
|
}
|
|
168
|
-
function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter, right, rightHeader, bottom, bottomHeader, defaultLeftOpen = true, defaultRightOpen = false, defaultBottomOpen = false, defaultLeftWidth = 280, defaultRightWidth = 480, defaultBottomHeight = 224, minLeftWidth = 220, maxLeftWidth = 420, minRightWidth = 320, maxRightWidth = 720, minCenterWidth = 400, minBottomHeight = 100, maxBottomHeight = 500, persistenceKey, resizable = true, theme, density = "comfortable", leftLabel = "Left workspace panel", rightLabel = "Right workspace panel", bottomLabel = "Bottom runtime panel", leftOpen: leftOpenProp, onLeftOpenChange, rightOpen: rightOpenProp, onRightOpenChange, keyboardShortcuts = false, leftCollapsedControl, leftContentClassName, rightContentClassName, centerHeaderVisibility = "
|
|
182
|
+
function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter, right, rightHeader, bottom, bottomHeader, defaultLeftOpen = true, defaultRightOpen = false, defaultBottomOpen = false, defaultLeftWidth = 280, defaultRightWidth = 480, defaultBottomHeight = 224, minLeftWidth = 220, maxLeftWidth = 420, minRightWidth = 320, maxRightWidth = 720, minCenterWidth = 400, minBottomHeight = 100, maxBottomHeight = 500, persistenceKey, resizable = true, theme, density = "comfortable", leftLabel = "Left workspace panel", rightLabel = "Right workspace panel", bottomLabel = "Bottom runtime panel", leftOpen: leftOpenProp, onLeftOpenChange, rightOpen: rightOpenProp, onRightOpenChange, keyboardShortcuts = false, leftCollapsedControl, leftContentClassName, rightContentClassName, centerHeaderVisibility = "auto", className }) {
|
|
169
183
|
const desktop = useDesktopMediaQuery(DESKTOP_BREAKPOINT);
|
|
170
184
|
const dragStateRef = useRef(null);
|
|
171
185
|
const storedLayout = useMemo(() => persistenceKey ? readStoredLayout(persistenceKey) : null, [persistenceKey]);
|
|
@@ -189,7 +203,31 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
|
|
|
189
203
|
const [leftWidth, setLeftWidth] = useState(clamp(storedLayout?.leftWidth ?? defaultLeftWidth, minLeftWidth, maxLeftWidth));
|
|
190
204
|
const [rightWidth, setRightWidth] = useState(clamp(storedLayout?.rightWidth ?? defaultRightWidth, minRightWidth, maxRightWidth));
|
|
191
205
|
const [bottomHeight, setBottomHeight] = useState(clamp(storedLayout?.bottomHeight ?? defaultBottomHeight, minBottomHeight, maxBottomHeight));
|
|
192
|
-
const showCenterHeader = centerHeaderVisibility === "auto" ? Boolean(centerHeader)
|
|
206
|
+
const showCenterHeader = centerHeaderVisibility === "auto" ? Boolean(centerHeader) : Boolean(centerHeader || left || right || bottom);
|
|
207
|
+
const reopenClassName = showCenterHeader ? `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}` : `flex h-10 w-8 items-center justify-center rounded-md border border-border bg-card text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-foreground ${focusRing}`;
|
|
208
|
+
const leftReopenControl = left && !leftOpen ? leftCollapsedControl ?? /* @__PURE__ */ jsx("button", {
|
|
209
|
+
type: "button",
|
|
210
|
+
"aria-label": "Open left panel",
|
|
211
|
+
onClick: () => setLeftOpen(true),
|
|
212
|
+
className: reopenClassName,
|
|
213
|
+
children: /* @__PURE__ */ jsx(PanelLeftOpen, { className: "h-4 w-4" })
|
|
214
|
+
}) : null;
|
|
215
|
+
const bottomReopenControl = bottom && !bottomOpen ? /* @__PURE__ */ jsx("button", {
|
|
216
|
+
type: "button",
|
|
217
|
+
"aria-label": "Open bottom panel",
|
|
218
|
+
onClick: () => setBottomOpen(true),
|
|
219
|
+
className: reopenClassName,
|
|
220
|
+
children: /* @__PURE__ */ jsx(PanelBottomOpen, { className: "h-4 w-4" })
|
|
221
|
+
}) : null;
|
|
222
|
+
const rightReopenControl = right && !rightOpen ? /* @__PURE__ */ jsx("button", {
|
|
223
|
+
type: "button",
|
|
224
|
+
"aria-label": "Open right panel",
|
|
225
|
+
onClick: () => setRightOpen(true),
|
|
226
|
+
className: reopenClassName,
|
|
227
|
+
children: /* @__PURE__ */ jsx(PanelRightOpen, { className: "h-4 w-4" })
|
|
228
|
+
}) : null;
|
|
229
|
+
const leftReopenRef = useRef(null);
|
|
230
|
+
const rightReopenRef = useRef(null);
|
|
193
231
|
useEffect(() => {
|
|
194
232
|
if (!persistenceKey || typeof window === "undefined") return;
|
|
195
233
|
const payload = {
|
|
@@ -272,6 +310,14 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
|
|
|
272
310
|
minRightWidth
|
|
273
311
|
]);
|
|
274
312
|
const shellRef = useRef(null);
|
|
313
|
+
const focusSideControl = (side) => {
|
|
314
|
+
const target = (side === "left" ? leftReopenRef : rightReopenRef).current?.querySelector("button, a[href], [tabindex]:not([tabindex=\"-1\"])");
|
|
315
|
+
if (target) {
|
|
316
|
+
target.focus();
|
|
317
|
+
return;
|
|
318
|
+
}
|
|
319
|
+
shellRef.current?.querySelector(`[aria-label="Collapse ${side} panel"]`)?.focus();
|
|
320
|
+
};
|
|
275
321
|
const [shellWidth, setShellWidth] = useState(null);
|
|
276
322
|
useEffect(() => {
|
|
277
323
|
const shell = shellRef.current;
|
|
@@ -365,7 +411,10 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
|
|
|
365
411
|
}), /* @__PURE__ */ jsx("button", {
|
|
366
412
|
type: "button",
|
|
367
413
|
"aria-label": "Collapse left panel",
|
|
368
|
-
onClick: () =>
|
|
414
|
+
onClick: () => {
|
|
415
|
+
setLeftOpen(false);
|
|
416
|
+
requestAnimationFrame(() => focusSideControl("left"));
|
|
417
|
+
},
|
|
369
418
|
className: `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
|
|
370
419
|
children: /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-4 w-4" })
|
|
371
420
|
})]
|
|
@@ -384,36 +433,43 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
|
|
|
384
433
|
showCenterHeader && /* @__PURE__ */ jsxs(WorkspacePaneHeader, {
|
|
385
434
|
className: "gap-2",
|
|
386
435
|
children: [
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
children: /* @__PURE__ */ jsx(PanelLeftOpen, { className: "h-4 w-4" })
|
|
393
|
-
})),
|
|
436
|
+
leftReopenControl && /* @__PURE__ */ jsx("div", {
|
|
437
|
+
ref: leftReopenRef,
|
|
438
|
+
className: "shrink-0",
|
|
439
|
+
children: leftReopenControl
|
|
440
|
+
}),
|
|
394
441
|
/* @__PURE__ */ jsx("div", {
|
|
395
442
|
className: "min-w-0 flex-1",
|
|
396
443
|
children: centerHeader
|
|
397
444
|
}),
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
children: /* @__PURE__ */ jsx(PanelBottomOpen, { className: "h-4 w-4" })
|
|
404
|
-
}),
|
|
405
|
-
right && !rightOpen && /* @__PURE__ */ jsx("button", {
|
|
406
|
-
type: "button",
|
|
407
|
-
"aria-label": "Open right panel",
|
|
408
|
-
onClick: () => setRightOpen(true),
|
|
409
|
-
className: `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
|
|
410
|
-
children: /* @__PURE__ */ jsx(PanelRightOpen, { className: "h-4 w-4" })
|
|
445
|
+
bottomReopenControl,
|
|
446
|
+
rightReopenControl && /* @__PURE__ */ jsx("div", {
|
|
447
|
+
ref: rightReopenRef,
|
|
448
|
+
className: "shrink-0",
|
|
449
|
+
children: rightReopenControl
|
|
411
450
|
})
|
|
412
451
|
]
|
|
413
452
|
}),
|
|
414
|
-
/* @__PURE__ */
|
|
415
|
-
className: "min-h-0 flex-1
|
|
416
|
-
children:
|
|
453
|
+
/* @__PURE__ */ jsxs("div", {
|
|
454
|
+
className: "flex min-h-0 flex-1",
|
|
455
|
+
children: [
|
|
456
|
+
!showCenterHeader && leftReopenControl && /* @__PURE__ */ jsx("div", {
|
|
457
|
+
ref: leftReopenRef,
|
|
458
|
+
className: "shrink-0 pt-2",
|
|
459
|
+
children: leftReopenControl
|
|
460
|
+
}),
|
|
461
|
+
/* @__PURE__ */ jsx("div", {
|
|
462
|
+
className: "min-w-0 flex-1 overflow-auto",
|
|
463
|
+
children: center
|
|
464
|
+
}),
|
|
465
|
+
!showCenterHeader && (bottomReopenControl || rightReopenControl) && /* @__PURE__ */ jsxs("div", {
|
|
466
|
+
className: "flex shrink-0 flex-col gap-1 pt-2",
|
|
467
|
+
children: [bottomReopenControl, rightReopenControl && /* @__PURE__ */ jsx("div", {
|
|
468
|
+
ref: rightReopenRef,
|
|
469
|
+
children: rightReopenControl
|
|
470
|
+
})]
|
|
471
|
+
})
|
|
472
|
+
]
|
|
417
473
|
}),
|
|
418
474
|
bottom && bottomOpen && /* @__PURE__ */ jsxs(Fragment, { children: [resizable && /* @__PURE__ */ jsx(HorizontalResizeHandle, {
|
|
419
475
|
label: "Resize bottom panel",
|
|
@@ -471,7 +527,10 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
|
|
|
471
527
|
}), /* @__PURE__ */ jsx("button", {
|
|
472
528
|
type: "button",
|
|
473
529
|
"aria-label": "Collapse right panel",
|
|
474
|
-
onClick: () =>
|
|
530
|
+
onClick: () => {
|
|
531
|
+
setRightOpen(false);
|
|
532
|
+
requestAnimationFrame(() => focusSideControl("right"));
|
|
533
|
+
},
|
|
475
534
|
className: `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
|
|
476
535
|
children: /* @__PURE__ */ jsx(PanelRightClose, { className: "h-4 w-4" })
|
|
477
536
|
})]
|
|
@@ -482,11 +541,14 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
|
|
|
482
541
|
})] })
|
|
483
542
|
]
|
|
484
543
|
}),
|
|
485
|
-
!desktop && left && leftOpen && /* @__PURE__ */ jsx(MobileDrawer, {
|
|
544
|
+
!desktop && left && leftOpen && !(right && rightOpen) && /* @__PURE__ */ jsx(MobileDrawer, {
|
|
486
545
|
side: "left",
|
|
487
546
|
title: leftLabel,
|
|
488
547
|
header: leftHeader,
|
|
489
548
|
onClose: () => setLeftOpen(false),
|
|
549
|
+
onReturnFocus: () => focusSideControl("left"),
|
|
550
|
+
theme,
|
|
551
|
+
density,
|
|
490
552
|
children: left
|
|
491
553
|
}),
|
|
492
554
|
!desktop && right && rightOpen && /* @__PURE__ */ jsx(MobileDrawer, {
|
|
@@ -494,6 +556,9 @@ function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter,
|
|
|
494
556
|
title: rightLabel,
|
|
495
557
|
header: rightHeader,
|
|
496
558
|
onClose: () => setRightOpen(false),
|
|
559
|
+
onReturnFocus: () => focusSideControl("right"),
|
|
560
|
+
theme,
|
|
561
|
+
density,
|
|
497
562
|
children: right
|
|
498
563
|
})
|
|
499
564
|
]
|
|
@@ -1706,7 +1771,7 @@ function renderRegion(sections, region) {
|
|
|
1706
1771
|
* into a complete session surface: directory, agent timeline, artifacts, and
|
|
1707
1772
|
* runtime in one reusable shell.
|
|
1708
1773
|
*/
|
|
1709
|
-
function SandboxWorkbench({ title
|
|
1774
|
+
function SandboxWorkbench({ title, subtitle, status, centerHeader: centerHeaderProp, composer, rail, directory, session, artifacts: artifactsProp = [], activeArtifactId, onArtifactChange, onArtifactClose, runtime, layout, emptyArtifactState, className }) {
|
|
1710
1775
|
const artifacts = useMemo(() => sortPinnedFirst(artifactsProp), [artifactsProp]);
|
|
1711
1776
|
const artifactTabsId = useId();
|
|
1712
1777
|
const artifactPanelId = `${artifactTabsId}-panel`;
|
|
@@ -1725,34 +1790,8 @@ function SandboxWorkbench({ title = "Sandbox session", subtitle, status, centerH
|
|
|
1725
1790
|
if (activeArtifactId === void 0) setUncontrolledArtifactId(artifactId);
|
|
1726
1791
|
onArtifactChange?.(artifactId);
|
|
1727
1792
|
};
|
|
1728
|
-
const brandedHeader = /* @__PURE__ */ jsxs("div", {
|
|
1729
|
-
className: "flex min-w-0 items-start justify-between gap-4 rounded-[var(--radius-xl)] border border-border bg-card px-4 py-3.5",
|
|
1730
|
-
children: [/* @__PURE__ */ jsxs("div", {
|
|
1731
|
-
className: "min-w-0",
|
|
1732
|
-
children: [
|
|
1733
|
-
/* @__PURE__ */ jsx("div", {
|
|
1734
|
-
className: "text-[10px] font-semibold uppercase tracking-[0.18em] text-primary",
|
|
1735
|
-
children: "Tangle Sandbox"
|
|
1736
|
-
}),
|
|
1737
|
-
/* @__PURE__ */ jsx("div", {
|
|
1738
|
-
className: "truncate text-[17px] font-semibold tracking-[0.01em] text-foreground",
|
|
1739
|
-
children: title
|
|
1740
|
-
}),
|
|
1741
|
-
subtitle && /* @__PURE__ */ jsx("div", {
|
|
1742
|
-
className: "truncate text-sm text-muted-foreground",
|
|
1743
|
-
children: subtitle
|
|
1744
|
-
})
|
|
1745
|
-
]
|
|
1746
|
-
}), /* @__PURE__ */ jsxs("div", {
|
|
1747
|
-
className: "flex shrink-0 flex-wrap items-center justify-end gap-2",
|
|
1748
|
-
children: [status, artifacts.length > 0 && /* @__PURE__ */ jsxs(Badge, {
|
|
1749
|
-
variant: "outline",
|
|
1750
|
-
children: [artifacts.length, " artifacts"]
|
|
1751
|
-
})]
|
|
1752
|
-
})]
|
|
1753
|
-
});
|
|
1754
1793
|
const quiet = centerHeaderProp === null;
|
|
1755
|
-
const centerHeader = centerHeaderProp
|
|
1794
|
+
const centerHeader = centerHeaderProp ?? void 0;
|
|
1756
1795
|
const { composerControls, ...chatSession } = session;
|
|
1757
1796
|
const transcript = /* @__PURE__ */ jsxs("div", {
|
|
1758
1797
|
className: cn$1("flex h-full min-h-0 flex-col", quiet && "bg-background"),
|
|
@@ -1765,15 +1804,47 @@ function SandboxWorkbench({ title = "Sandbox session", subtitle, status, centerH
|
|
|
1765
1804
|
children: [composerControls, composer]
|
|
1766
1805
|
})]
|
|
1767
1806
|
});
|
|
1768
|
-
const
|
|
1769
|
-
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
|
|
1807
|
+
const paneSubtitle = subtitle ?? session.subtitle;
|
|
1808
|
+
const center = quiet ? transcript : /* @__PURE__ */ jsxs("section", {
|
|
1809
|
+
className: "flex h-full min-h-0 flex-col overflow-hidden bg-background text-foreground",
|
|
1810
|
+
children: [/* @__PURE__ */ jsxs(WorkspacePaneHeader, {
|
|
1811
|
+
className: "gap-3",
|
|
1812
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
1813
|
+
className: "min-w-0 flex-1",
|
|
1814
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
1815
|
+
className: "flex min-w-0 items-center gap-2",
|
|
1816
|
+
children: [session.eyebrow && /* @__PURE__ */ jsx("span", {
|
|
1817
|
+
className: "max-w-[35%] shrink-0 truncate text-[10px] font-semibold uppercase tracking-wider text-muted-foreground",
|
|
1818
|
+
children: session.eyebrow
|
|
1819
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
1820
|
+
className: "min-w-0 flex-1 truncate text-[13px] font-medium text-foreground",
|
|
1821
|
+
children: title ?? session.title ?? "Execution timeline"
|
|
1822
|
+
})]
|
|
1823
|
+
}), (paneSubtitle || session.meta || status) && /* @__PURE__ */ jsxs("div", {
|
|
1824
|
+
className: "mt-0.5 flex min-w-0 items-center gap-2 overflow-hidden text-xs text-muted-foreground",
|
|
1825
|
+
children: [
|
|
1826
|
+
paneSubtitle && /* @__PURE__ */ jsx("span", {
|
|
1827
|
+
className: "min-w-0 truncate",
|
|
1828
|
+
children: paneSubtitle
|
|
1829
|
+
}),
|
|
1830
|
+
session.meta && /* @__PURE__ */ jsx("span", {
|
|
1831
|
+
className: "min-w-0 truncate",
|
|
1832
|
+
children: session.meta
|
|
1833
|
+
}),
|
|
1834
|
+
status && /* @__PURE__ */ jsx("span", {
|
|
1835
|
+
className: "shrink-0",
|
|
1836
|
+
children: status
|
|
1837
|
+
})
|
|
1838
|
+
]
|
|
1839
|
+
})]
|
|
1840
|
+
}), session.headerActions && /* @__PURE__ */ jsx("div", {
|
|
1841
|
+
className: "flex shrink-0 items-center gap-1.5",
|
|
1842
|
+
children: session.headerActions
|
|
1843
|
+
})]
|
|
1844
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
1845
|
+
className: "min-h-0 flex-1 overflow-auto bg-background",
|
|
1846
|
+
children: transcript
|
|
1847
|
+
})]
|
|
1777
1848
|
});
|
|
1778
1849
|
const artifactPanel = artifacts.length > 0 || emptyArtifactState ? /* @__PURE__ */ jsxs("section", {
|
|
1779
1850
|
className: "flex h-full min-h-0 flex-col bg-background",
|
|
@@ -1868,7 +1939,7 @@ function SandboxWorkbench({ title = "Sandbox session", subtitle, status, centerH
|
|
|
1868
1939
|
keyboardShortcuts: layout?.keyboardShortcuts,
|
|
1869
1940
|
leftCollapsedControl: layout?.leftCollapsedControl,
|
|
1870
1941
|
leftContentClassName: railOnly ? "py-0" : void 0,
|
|
1871
|
-
centerHeaderVisibility:
|
|
1942
|
+
centerHeaderVisibility: "auto",
|
|
1872
1943
|
className: cn$1("p-2", className)
|
|
1873
1944
|
});
|
|
1874
1945
|
}
|
package/dist/workspace.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { $ as TerminalProps, A as ShellShouldRevalidateArgs, B as SessionSidebarLink, C as SandboxWorkbenchLayoutOptions, D as SandboxWorkbenchSessionProps, E as SandboxWorkbenchProps, F as SessionSidebar, G as SessionOptimisticController, H as SessionSidebarVariant, I as SessionSidebarBadge, J as useOptimisticSessionItems, K as UseOptimisticSessionItemsOptions, L as SessionSidebarFilter, M as createShellShouldRevalidate, N as shellShouldRevalidate, O as SessionActivityMonitor, P as formatRelativeAge, Q as TerminalPanel, R as SessionSidebarGroupBy, S as SandboxWorkbenchFileArtifact, T as SandboxWorkbenchOpenUIArtifact, U as SESSION_CREATED_EVENT, V as SessionSidebarProps, W as SessionCreatedDetail, X as RuntimePaneProps, Y as RuntimePane, Z as TerminalLine, _ as FormAudit, a as ApprovalQueue, at as StatusBannerProps, b as SandboxWorkbenchArtifact, c as CalendarView, ct as WorkspacePaneHeader, d as TaskBoardColumn, dt as WorkspaceLayoutProps, et as ContextBadge, f as TaskBoardItem, g as AuditResultsProps, h as AuditResults, i as ApprovalItem, it as StatusBanner, j as ShellShouldRevalidateOptions, k as SessionActivityMonitorProps, l as CalendarViewProps, lt as WorkspacePaneHeaderProps, m as AuditCheck, n as ArtifactPaneProps, nt as StatusBarProps, o as ApprovalQueueProps, ot as DirectoryPane, p as TaskBoardProps, q as dispatchSessionCreated, r as ApprovalConfidenceStat, rt as BannerType, s as CalendarEvent, st as DirectoryPaneProps, t as ArtifactPane, tt as StatusBar, u as TaskBoard, ut as WorkspaceLayout, v as AgentWorkbench, w as SandboxWorkbenchMarkdownArtifact, x as SandboxWorkbenchCustomArtifact, y as SandboxWorkbench, z as SessionSidebarItem } from "./index-
|
|
1
|
+
import { $ as TerminalProps, A as ShellShouldRevalidateArgs, B as SessionSidebarLink, C as SandboxWorkbenchLayoutOptions, D as SandboxWorkbenchSessionProps, E as SandboxWorkbenchProps, F as SessionSidebar, G as SessionOptimisticController, H as SessionSidebarVariant, I as SessionSidebarBadge, J as useOptimisticSessionItems, K as UseOptimisticSessionItemsOptions, L as SessionSidebarFilter, M as createShellShouldRevalidate, N as shellShouldRevalidate, O as SessionActivityMonitor, P as formatRelativeAge, Q as TerminalPanel, R as SessionSidebarGroupBy, S as SandboxWorkbenchFileArtifact, T as SandboxWorkbenchOpenUIArtifact, U as SESSION_CREATED_EVENT, V as SessionSidebarProps, W as SessionCreatedDetail, X as RuntimePaneProps, Y as RuntimePane, Z as TerminalLine, _ as FormAudit, a as ApprovalQueue, at as StatusBannerProps, b as SandboxWorkbenchArtifact, c as CalendarView, ct as WorkspacePaneHeader, d as TaskBoardColumn, dt as WorkspaceLayoutProps, et as ContextBadge, f as TaskBoardItem, g as AuditResultsProps, h as AuditResults, i as ApprovalItem, it as StatusBanner, j as ShellShouldRevalidateOptions, k as SessionActivityMonitorProps, l as CalendarViewProps, lt as WorkspacePaneHeaderProps, m as AuditCheck, n as ArtifactPaneProps, nt as StatusBarProps, o as ApprovalQueueProps, ot as DirectoryPane, p as TaskBoardProps, q as dispatchSessionCreated, r as ApprovalConfidenceStat, rt as BannerType, s as CalendarEvent, st as DirectoryPaneProps, t as ArtifactPane, tt as StatusBar, u as TaskBoard, ut as WorkspaceLayout, v as AgentWorkbench, w as SandboxWorkbenchMarkdownArtifact, x as SandboxWorkbenchCustomArtifact, y as SandboxWorkbench, z as SessionSidebarItem } from "./index-iDiLnSoo.js";
|
|
2
2
|
export { AgentWorkbench, type ApprovalConfidenceStat, type ApprovalItem, ApprovalQueue, type ApprovalQueueProps, ArtifactPane, type ArtifactPaneProps, 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
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { t as WorkspacePaneHeader } from "./workspace-pane-header-Bg1cCcHX.js";
|
|
2
|
-
import { _ as TerminalPanel, a as AuditResults, b as DirectoryPane, c as SessionActivityMonitor, d as SessionSidebar, f as SESSION_CREATED_EVENT, g as RuntimePane, h as formatRelativeAge, i as TaskBoard, l as createShellShouldRevalidate, m as useOptimisticSessionItems, n as ApprovalQueue, o as AgentWorkbench, p as dispatchSessionCreated, r as CalendarView, s as SandboxWorkbench, t as ArtifactPane, u as shellShouldRevalidate, v as StatusBar, x as WorkspaceLayout, y as StatusBanner } from "./workspace-
|
|
2
|
+
import { _ as TerminalPanel, a as AuditResults, b as DirectoryPane, c as SessionActivityMonitor, d as SessionSidebar, f as SESSION_CREATED_EVENT, g as RuntimePane, h as formatRelativeAge, i as TaskBoard, l as createShellShouldRevalidate, m as useOptimisticSessionItems, n as ApprovalQueue, o as AgentWorkbench, p as dispatchSessionCreated, r as CalendarView, s as SandboxWorkbench, t as ArtifactPane, u as shellShouldRevalidate, v as StatusBar, x as WorkspaceLayout, y as StatusBanner } from "./workspace-Pq-koOTW.js";
|
|
3
3
|
export { AgentWorkbench, ApprovalQueue, ArtifactPane, AuditResults, CalendarView, DirectoryPane, RuntimePane, SESSION_CREATED_EVENT, SandboxWorkbench, SessionActivityMonitor, SessionSidebar, StatusBanner, StatusBar, TaskBoard, TerminalPanel, WorkspaceLayout, WorkspacePaneHeader, createShellShouldRevalidate, dispatchSessionCreated, formatRelativeAge, shellShouldRevalidate, useOptimisticSessionItems };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tangle-network/sandbox-ui",
|
|
3
|
-
"version": "0.116.
|
|
3
|
+
"version": "0.116.1",
|
|
4
4
|
"description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -187,6 +187,7 @@
|
|
|
187
187
|
"dependencies": {
|
|
188
188
|
"@lobehub/icons-static-svg": "^1.95.1",
|
|
189
189
|
"@pierre/diffs": "^1.5.1",
|
|
190
|
+
"@radix-ui/react-dialog": "^1.1.23",
|
|
190
191
|
"@radix-ui/react-dropdown-menu": "^2.1.24",
|
|
191
192
|
"@radix-ui/react-select": "^2.3.7",
|
|
192
193
|
"diff": "^9.0.0",
|