@tangle-network/sandbox-ui 0.2.1 → 0.3.3
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 +201 -10
- package/dist/auth.js +2 -2
- package/dist/chat-container-C8eHLw8z.d.ts +67 -0
- package/dist/chat.d.ts +70 -78
- package/dist/chat.js +8 -8
- package/dist/chunk-4F2GJRGU.js +756 -0
- package/dist/{chunk-HYEAX3DC.js → chunk-5LV6DZZF.js} +445 -114
- package/dist/chunk-67C53XVV.js +1106 -0
- package/dist/{chunk-QSQBDR3N.js → chunk-BX6AQMUS.js} +5 -2
- package/dist/chunk-CCKNIAS7.js +124 -0
- package/dist/chunk-CJ2RYVZH.js +128 -0
- package/dist/{chunk-KMXV7DDX.js → chunk-CNWVHQFY.js} +1 -1
- package/dist/{chunk-OU4TRNQZ.js → chunk-COCSO7FG.js} +3 -3
- package/dist/chunk-FJSVPBKY.js +85 -0
- package/dist/chunk-FRGMMANX.js +102 -0
- package/dist/{chunk-E6FS7R4X.js → chunk-HWLX5NME.js} +1 -1
- package/dist/chunk-JF6E2DS5.js +610 -0
- package/dist/chunk-MUOL44AE.js +121 -0
- package/dist/chunk-MXCSSOGH.js +105 -0
- package/dist/{chunk-J4OADEUK.js → chunk-OM6ON27W.js} +24 -9
- package/dist/{chunk-NI2EI43H.js → chunk-PDV7W4NY.js} +9 -124
- package/dist/chunk-TQN3VR4F.js +92 -0
- package/dist/{chunk-SOT2V7TX.js → chunk-TXI4MZAZ.js} +62 -144
- package/dist/chunk-WUR652Y3.js +1140 -0
- package/dist/chunk-YDBXQQLC.js +336 -0
- package/dist/{chunk-4EIWPJMJ.js → chunk-ZP6GSX4D.js} +36 -27
- package/dist/dashboard.d.ts +5 -2
- package/dist/dashboard.js +5 -4
- package/dist/{expanded-tool-detail-OkXGqTHe.d.ts → expanded-tool-detail-BDi_h_dZ.d.ts} +11 -4
- package/dist/file-tabs-CmaoDVBI.d.ts +72 -0
- package/dist/files.d.ts +25 -44
- package/dist/files.js +8 -3
- package/{src/styles → dist}/globals.css +16 -67
- package/dist/hooks.d.ts +5 -4
- package/dist/hooks.js +14 -9
- package/dist/index.d.ts +38 -9
- package/dist/index.js +100 -126
- package/dist/markdown.d.ts +1 -24
- package/dist/markdown.js +1 -7
- package/dist/openui.d.ts +115 -0
- package/dist/openui.js +11 -0
- package/dist/pages.d.ts +3 -2
- package/dist/pages.js +19 -16
- package/dist/primitives.d.ts +8 -1
- package/dist/primitives.js +25 -19
- package/dist/run.d.ts +2 -2
- package/dist/run.js +8 -7
- package/dist/{use-sidecar-auth-Bb0-w3lX.d.ts → sdk-hooks.d.ts} +61 -72
- package/dist/sdk-hooks.js +29 -0
- package/dist/styles.css +179 -0
- package/dist/tokens.css +165 -0
- package/dist/{tool-display-BvsVW_Ur.d.ts → tool-display-Ct9nFAzJ.d.ts} +1 -1
- package/dist/types.d.ts +1 -1
- package/dist/{usage-chart-DINgSVL5.d.ts → usage-chart-CY9xo3KX.d.ts} +8 -3
- package/dist/use-pty-session-DeZSxOCN.d.ts +69 -0
- package/dist/utils.d.ts +1 -1
- package/dist/utils.js +1 -1
- package/dist/workspace.d.ts +171 -33
- package/dist/workspace.js +25 -1
- package/package.json +10 -3
- package/dist/chunk-2UHPE5T7.js +0 -201
- package/dist/chunk-6MQIDUPA.js +0 -502
- package/dist/chunk-KYY2X6LY.js +0 -318
- package/dist/chunk-L6ZDH5F4.js +0 -334
- package/dist/chunk-M34OA6PQ.js +0 -233
- package/dist/chunk-M6VLC32S.js +0 -219
- package/dist/chunk-U62G5TS7.js +0 -472
- package/src/styles/tokens.css +0 -73
|
@@ -21,8 +21,10 @@ interface BillingDashboardProps {
|
|
|
21
21
|
onManageSubscription: () => void;
|
|
22
22
|
onAddCredits: () => void;
|
|
23
23
|
variant?: "sandbox";
|
|
24
|
+
className?: string;
|
|
25
|
+
cardClassName?: string;
|
|
24
26
|
}
|
|
25
|
-
declare function BillingDashboard({ subscription, balance, usage, onManageSubscription, onAddCredits, variant, }: BillingDashboardProps): react_jsx_runtime.JSX.Element;
|
|
27
|
+
declare function BillingDashboard({ subscription, balance, usage, onManageSubscription, onAddCredits, variant, className, cardClassName, }: BillingDashboardProps): react_jsx_runtime.JSX.Element;
|
|
26
28
|
|
|
27
29
|
interface PricingTier {
|
|
28
30
|
id: string;
|
|
@@ -42,8 +44,10 @@ interface PricingPageProps {
|
|
|
42
44
|
onSelectTier: (tierId: string) => void;
|
|
43
45
|
variant?: "sandbox";
|
|
44
46
|
loading?: boolean;
|
|
47
|
+
className?: string;
|
|
48
|
+
cardClassName?: string;
|
|
45
49
|
}
|
|
46
|
-
declare function PricingPage({ tiers, currentTierId, billingPeriod, onBillingPeriodChange, onSelectTier, variant, loading, }: PricingPageProps): react_jsx_runtime.JSX.Element;
|
|
50
|
+
declare function PricingPage({ tiers, currentTierId, billingPeriod, onBillingPeriodChange, onSelectTier, variant, loading, className, cardClassName, }: PricingPageProps): react_jsx_runtime.JSX.Element;
|
|
47
51
|
|
|
48
52
|
interface UsageDataPoint {
|
|
49
53
|
date: string;
|
|
@@ -54,7 +58,8 @@ interface UsageChartProps {
|
|
|
54
58
|
title: string;
|
|
55
59
|
unit: string;
|
|
56
60
|
variant?: "agentrun" | "automateai" | "tradingbots" | "sandbox";
|
|
61
|
+
className?: string;
|
|
57
62
|
}
|
|
58
|
-
declare function UsageChart({ data, title, unit, variant, }: UsageChartProps): react_jsx_runtime.JSX.Element;
|
|
63
|
+
declare function UsageChart({ data, title, unit, variant, className, }: UsageChartProps): react_jsx_runtime.JSX.Element;
|
|
59
64
|
|
|
60
65
|
export { type BillingSubscription as B, type PricingTier as P, type UsageDataPoint as U, type BillingBalance as a, type BillingUsage as b, BillingDashboard as c, type BillingDashboardProps as d, PricingPage as e, type PricingPageProps as f, UsageChart as g, type UsageChartProps as h };
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
interface AuthUser {
|
|
2
|
+
customer_id: string;
|
|
3
|
+
email: string;
|
|
4
|
+
name?: string;
|
|
5
|
+
tier: string;
|
|
6
|
+
github?: {
|
|
7
|
+
login: string;
|
|
8
|
+
connected: boolean;
|
|
9
|
+
} | null;
|
|
10
|
+
session_expires_at?: string;
|
|
11
|
+
}
|
|
12
|
+
interface UseAuthOptions {
|
|
13
|
+
apiBaseUrl: string;
|
|
14
|
+
revalidateOnFocus?: boolean;
|
|
15
|
+
shouldRetryOnError?: boolean;
|
|
16
|
+
}
|
|
17
|
+
interface UseAuthResult {
|
|
18
|
+
user: AuthUser | null;
|
|
19
|
+
isLoading: boolean;
|
|
20
|
+
isError: boolean;
|
|
21
|
+
error: Error | null;
|
|
22
|
+
mutate: () => Promise<void>;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Hook for managing authentication state.
|
|
26
|
+
* Fetches user session from the API and provides loading/error states.
|
|
27
|
+
*/
|
|
28
|
+
declare function useAuth({ apiBaseUrl, revalidateOnFocus, shouldRetryOnError, }: UseAuthOptions): UseAuthResult;
|
|
29
|
+
/**
|
|
30
|
+
* Creates a fetcher function that includes auth credentials.
|
|
31
|
+
* Uses both cookie-based session and localStorage API key for backwards compatibility.
|
|
32
|
+
*/
|
|
33
|
+
declare function createAuthFetcher(_apiBaseUrl: string): <T = unknown>(url: string, options?: RequestInit) => Promise<T>;
|
|
34
|
+
/**
|
|
35
|
+
* Hook to get the API key from localStorage.
|
|
36
|
+
* For backwards compatibility with API key-based auth.
|
|
37
|
+
*/
|
|
38
|
+
declare function useApiKey(): string | null;
|
|
39
|
+
|
|
40
|
+
interface UsePtySessionOptions {
|
|
41
|
+
/** Base URL of the sidecar (e.g. "http://localhost:9100"). */
|
|
42
|
+
apiUrl: string;
|
|
43
|
+
/** Bearer token for authentication. */
|
|
44
|
+
token: string;
|
|
45
|
+
/** Called with raw PTY output (may contain ANSI escape codes). */
|
|
46
|
+
onData: (data: string) => void;
|
|
47
|
+
}
|
|
48
|
+
interface UsePtySessionReturn {
|
|
49
|
+
/** Whether the SSE stream is connected and receiving data. */
|
|
50
|
+
isConnected: boolean;
|
|
51
|
+
/** Connection or API error, if any. */
|
|
52
|
+
error: string | null;
|
|
53
|
+
/** Send a command to the PTY session. */
|
|
54
|
+
sendCommand: (command: string) => Promise<void>;
|
|
55
|
+
/** Tear down and reconnect. */
|
|
56
|
+
reconnect: () => void;
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Manages a PTY session against the sidecar terminal API.
|
|
60
|
+
*
|
|
61
|
+
* Protocol:
|
|
62
|
+
* - POST /terminals → create session → { data: { sessionId } }
|
|
63
|
+
* - GET /terminals/{id}/stream → SSE output (raw PTY with ANSI codes)
|
|
64
|
+
* - POST /terminals/{id}/execute → send command { command: "..." }
|
|
65
|
+
* - DELETE /terminals/{id} → close session
|
|
66
|
+
*/
|
|
67
|
+
declare function usePtySession({ apiUrl, token, onData }: UsePtySessionOptions): UsePtySessionReturn;
|
|
68
|
+
|
|
69
|
+
export { type AuthUser as A, type UseAuthOptions as U, type UseAuthResult as a, type UsePtySessionOptions as b, type UsePtySessionReturn as c, createAuthFetcher as d, useAuth as e, usePtySession as f, useApiKey as u };
|
package/dist/utils.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { b as ToolPart } from './parts-CyGkM6Fp.js';
|
|
2
|
-
import { T as ToolDisplayMetadata } from './tool-display-
|
|
2
|
+
import { T as ToolDisplayMetadata } from './tool-display-Ct9nFAzJ.js';
|
|
3
3
|
import { T as ToolCategory } from './run-CtFZ6s-D.js';
|
|
4
4
|
import { ClassValue } from 'clsx';
|
|
5
5
|
import 'react';
|
package/dist/utils.js
CHANGED
package/dist/workspace.d.ts
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
+
import { F as FileNode, g as FileTreeVisibilityOptions, b as FileTabData } from './file-tabs-CmaoDVBI.js';
|
|
4
|
+
export { A as ArtifactPane, a as ArtifactPaneProps } from './file-tabs-CmaoDVBI.js';
|
|
5
|
+
import { c as ChatContainerProps } from './chat-container-C8eHLw8z.js';
|
|
6
|
+
import { OpenUIComponentNode, OpenUIAction } from './openui.js';
|
|
7
|
+
import './parts-CyGkM6Fp.js';
|
|
8
|
+
import './branding-DCi5VEik.js';
|
|
9
|
+
import './tool-display-Ct9nFAzJ.js';
|
|
3
10
|
|
|
4
11
|
interface WorkspaceLayoutProps {
|
|
5
12
|
/** Left sidebar content (file tree, navigation) */
|
|
@@ -24,9 +31,67 @@ interface WorkspaceLayoutProps {
|
|
|
24
31
|
defaultRightOpen?: boolean;
|
|
25
32
|
/** Default bottom panel state */
|
|
26
33
|
defaultBottomOpen?: boolean;
|
|
34
|
+
/** Default left panel width in px */
|
|
35
|
+
defaultLeftWidth?: number;
|
|
36
|
+
/** Default right panel width in px */
|
|
37
|
+
defaultRightWidth?: number;
|
|
38
|
+
/** Minimum left panel width in px */
|
|
39
|
+
minLeftWidth?: number;
|
|
40
|
+
/** Maximum left panel width in px */
|
|
41
|
+
maxLeftWidth?: number;
|
|
42
|
+
/** Minimum right panel width in px */
|
|
43
|
+
minRightWidth?: number;
|
|
44
|
+
/** Maximum right panel width in px */
|
|
45
|
+
maxRightWidth?: number;
|
|
46
|
+
/** Persist panel state and sizes in localStorage */
|
|
47
|
+
persistenceKey?: string;
|
|
48
|
+
/** Disable resize handles */
|
|
49
|
+
resizable?: boolean;
|
|
50
|
+
/** Visual theme for sandbox surfaces */
|
|
51
|
+
theme?: "operator" | "builder" | "consumer";
|
|
52
|
+
/** Density mode for control sizing */
|
|
53
|
+
density?: "comfortable" | "compact";
|
|
54
|
+
/** Accessible label for the left panel */
|
|
55
|
+
leftLabel?: string;
|
|
56
|
+
/** Accessible label for the right panel */
|
|
57
|
+
rightLabel?: string;
|
|
58
|
+
/** Accessible label for the bottom panel */
|
|
59
|
+
bottomLabel?: string;
|
|
27
60
|
className?: string;
|
|
28
61
|
}
|
|
29
|
-
declare function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter, right, rightHeader, bottom, defaultLeftOpen, defaultRightOpen, defaultBottomOpen, className, }: WorkspaceLayoutProps): react_jsx_runtime.JSX.Element;
|
|
62
|
+
declare function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter, right, rightHeader, bottom, defaultLeftOpen, defaultRightOpen, defaultBottomOpen, defaultLeftWidth, defaultRightWidth, minLeftWidth, maxLeftWidth, minRightWidth, maxRightWidth, persistenceKey, resizable, theme, density, leftLabel, rightLabel, bottomLabel, className, }: WorkspaceLayoutProps): react_jsx_runtime.JSX.Element;
|
|
63
|
+
|
|
64
|
+
interface DirectoryPaneProps {
|
|
65
|
+
root: FileNode;
|
|
66
|
+
selectedPath?: string;
|
|
67
|
+
onSelect?: (path: string, node: FileNode) => void;
|
|
68
|
+
onRefresh?: () => void;
|
|
69
|
+
onUpload?: () => void;
|
|
70
|
+
title?: string;
|
|
71
|
+
subtitle?: string;
|
|
72
|
+
defaultExpanded?: boolean;
|
|
73
|
+
searchPlaceholder?: string;
|
|
74
|
+
visibility?: FileTreeVisibilityOptions;
|
|
75
|
+
className?: string;
|
|
76
|
+
}
|
|
77
|
+
/**
|
|
78
|
+
* DirectoryPane — searchable file-system navigation surface for sandbox
|
|
79
|
+
* sessions.
|
|
80
|
+
*/
|
|
81
|
+
declare function DirectoryPane({ root, selectedPath, onSelect, onRefresh, onUpload, title, subtitle, defaultExpanded, searchPlaceholder, visibility, className, }: DirectoryPaneProps): react_jsx_runtime.JSX.Element;
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
* StatusBanner — full-width notification banner for connection/provisioning states.
|
|
85
|
+
*/
|
|
86
|
+
type BannerType = "provisioning" | "connecting" | "error" | "success" | "info";
|
|
87
|
+
interface StatusBannerProps {
|
|
88
|
+
type: BannerType;
|
|
89
|
+
message: string;
|
|
90
|
+
detail?: string;
|
|
91
|
+
onDismiss?: () => void;
|
|
92
|
+
className?: string;
|
|
93
|
+
}
|
|
94
|
+
declare function StatusBanner({ type, message, detail, onDismiss, className }: StatusBannerProps): react_jsx_runtime.JSX.Element;
|
|
30
95
|
|
|
31
96
|
/**
|
|
32
97
|
* StatusBar — bottom bar with model selector, context badges, credits.
|
|
@@ -48,17 +113,113 @@ interface StatusBarProps {
|
|
|
48
113
|
declare function StatusBar({ modelLabel, onModelClick, credits, contextBadges, onRemoveBadge, status, className, }: StatusBarProps): react_jsx_runtime.JSX.Element;
|
|
49
114
|
|
|
50
115
|
/**
|
|
51
|
-
*
|
|
116
|
+
* Terminal — read-only terminal output panel.
|
|
117
|
+
*
|
|
118
|
+
* Shows agent's bash command output with basic ANSI color support.
|
|
119
|
+
* Collapsible, auto-scrolls to bottom.
|
|
52
120
|
*/
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
121
|
+
interface TerminalLine {
|
|
122
|
+
id: string;
|
|
123
|
+
text: string;
|
|
124
|
+
type: "command" | "stdout" | "stderr" | "system";
|
|
125
|
+
timestamp?: number;
|
|
126
|
+
}
|
|
127
|
+
interface TerminalProps {
|
|
128
|
+
lines: TerminalLine[];
|
|
129
|
+
title?: string;
|
|
130
|
+
isCollapsed?: boolean;
|
|
131
|
+
onToggle?: () => void;
|
|
132
|
+
onClose?: () => void;
|
|
133
|
+
maxHeight?: number;
|
|
59
134
|
className?: string;
|
|
60
135
|
}
|
|
61
|
-
declare function
|
|
136
|
+
declare function TerminalPanel({ lines, title, isCollapsed, onToggle, onClose, maxHeight, className, }: TerminalProps): react_jsx_runtime.JSX.Element;
|
|
137
|
+
|
|
138
|
+
interface RuntimePaneProps {
|
|
139
|
+
title?: string;
|
|
140
|
+
subtitle?: string;
|
|
141
|
+
statusBanner?: StatusBannerProps;
|
|
142
|
+
statusBar?: StatusBarProps;
|
|
143
|
+
terminal?: TerminalProps;
|
|
144
|
+
audit?: React.ReactNode;
|
|
145
|
+
inspector?: React.ReactNode;
|
|
146
|
+
footer?: React.ReactNode;
|
|
147
|
+
className?: string;
|
|
148
|
+
}
|
|
149
|
+
/**
|
|
150
|
+
* RuntimePane — shared operating surface for sandbox session state, terminal
|
|
151
|
+
* output, audit results, and runtime metadata.
|
|
152
|
+
*/
|
|
153
|
+
declare function RuntimePane({ title, subtitle, statusBanner, statusBar, terminal, audit, inspector, footer, className, }: RuntimePaneProps): react_jsx_runtime.JSX.Element;
|
|
154
|
+
|
|
155
|
+
interface SandboxWorkbenchArtifactBase {
|
|
156
|
+
id: string;
|
|
157
|
+
title: ReactNode;
|
|
158
|
+
subtitle?: ReactNode;
|
|
159
|
+
eyebrow?: ReactNode;
|
|
160
|
+
meta?: ReactNode;
|
|
161
|
+
headerActions?: ReactNode;
|
|
162
|
+
toolbar?: ReactNode;
|
|
163
|
+
footer?: ReactNode;
|
|
164
|
+
}
|
|
165
|
+
interface SandboxWorkbenchFileArtifact extends SandboxWorkbenchArtifactBase {
|
|
166
|
+
kind: "file";
|
|
167
|
+
path: string;
|
|
168
|
+
filename: string;
|
|
169
|
+
content?: string;
|
|
170
|
+
blobUrl?: string;
|
|
171
|
+
mimeType?: string;
|
|
172
|
+
onDownload?: () => void;
|
|
173
|
+
tabs?: FileTabData[];
|
|
174
|
+
activeTabId?: string;
|
|
175
|
+
onTabSelect?: (id: string) => void;
|
|
176
|
+
onTabClose?: (id: string) => void;
|
|
177
|
+
}
|
|
178
|
+
interface SandboxWorkbenchMarkdownArtifact extends SandboxWorkbenchArtifactBase {
|
|
179
|
+
kind: "markdown";
|
|
180
|
+
content: string;
|
|
181
|
+
}
|
|
182
|
+
interface SandboxWorkbenchOpenUIArtifact extends SandboxWorkbenchArtifactBase {
|
|
183
|
+
kind: "openui";
|
|
184
|
+
schema: OpenUIComponentNode | OpenUIComponentNode[];
|
|
185
|
+
onAction?: (action: OpenUIAction) => void;
|
|
186
|
+
}
|
|
187
|
+
interface SandboxWorkbenchCustomArtifact extends SandboxWorkbenchArtifactBase {
|
|
188
|
+
kind: "custom";
|
|
189
|
+
content: ReactNode;
|
|
190
|
+
}
|
|
191
|
+
type SandboxWorkbenchArtifact = SandboxWorkbenchCustomArtifact | SandboxWorkbenchFileArtifact | SandboxWorkbenchMarkdownArtifact | SandboxWorkbenchOpenUIArtifact;
|
|
192
|
+
interface SandboxWorkbenchSessionProps extends Omit<ChatContainerProps, "className"> {
|
|
193
|
+
eyebrow?: ReactNode;
|
|
194
|
+
title?: ReactNode;
|
|
195
|
+
subtitle?: ReactNode;
|
|
196
|
+
meta?: ReactNode;
|
|
197
|
+
headerActions?: ReactNode;
|
|
198
|
+
}
|
|
199
|
+
interface SandboxWorkbenchLayoutOptions extends Pick<WorkspaceLayoutProps, "defaultBottomOpen" | "defaultLeftOpen" | "defaultLeftWidth" | "defaultRightOpen" | "defaultRightWidth" | "density" | "maxLeftWidth" | "maxRightWidth" | "minLeftWidth" | "minRightWidth" | "persistenceKey" | "resizable" | "theme"> {
|
|
200
|
+
}
|
|
201
|
+
interface SandboxWorkbenchProps {
|
|
202
|
+
title?: ReactNode;
|
|
203
|
+
subtitle?: ReactNode;
|
|
204
|
+
status?: ReactNode;
|
|
205
|
+
directory?: DirectoryPaneProps;
|
|
206
|
+
session: SandboxWorkbenchSessionProps;
|
|
207
|
+
artifacts?: SandboxWorkbenchArtifact[];
|
|
208
|
+
activeArtifactId?: string;
|
|
209
|
+
onArtifactChange?: (artifactId: string) => void;
|
|
210
|
+
onArtifactClose?: (artifactId: string) => void;
|
|
211
|
+
runtime?: RuntimePaneProps;
|
|
212
|
+
layout?: SandboxWorkbenchLayoutOptions;
|
|
213
|
+
emptyArtifactState?: ReactNode;
|
|
214
|
+
className?: string;
|
|
215
|
+
}
|
|
216
|
+
/**
|
|
217
|
+
* SandboxWorkbench — high-level composition that turns sandbox-ui primitives
|
|
218
|
+
* into a complete session surface: directory, agent timeline, artifacts, and
|
|
219
|
+
* runtime in one reusable shell.
|
|
220
|
+
*/
|
|
221
|
+
declare function SandboxWorkbench({ title, subtitle, status, directory, session, artifacts, activeArtifactId, onArtifactChange, onArtifactClose, runtime, layout, emptyArtifactState, className, }: SandboxWorkbenchProps): react_jsx_runtime.JSX.Element;
|
|
222
|
+
declare function AgentWorkbench(props: SandboxWorkbenchProps): react_jsx_runtime.JSX.Element;
|
|
62
223
|
|
|
63
224
|
/**
|
|
64
225
|
* AuditResults — structured pass/fail display for form audits.
|
|
@@ -87,27 +248,4 @@ interface AuditResultsProps {
|
|
|
87
248
|
}
|
|
88
249
|
declare function AuditResults({ forms, crossFormChecks, overallScore, className }: AuditResultsProps): react_jsx_runtime.JSX.Element;
|
|
89
250
|
|
|
90
|
-
|
|
91
|
-
* Terminal — read-only terminal output panel.
|
|
92
|
-
*
|
|
93
|
-
* Shows agent's bash command output with basic ANSI color support.
|
|
94
|
-
* Collapsible, auto-scrolls to bottom.
|
|
95
|
-
*/
|
|
96
|
-
interface TerminalLine {
|
|
97
|
-
id: string;
|
|
98
|
-
text: string;
|
|
99
|
-
type: "command" | "stdout" | "stderr" | "system";
|
|
100
|
-
timestamp?: number;
|
|
101
|
-
}
|
|
102
|
-
interface TerminalProps {
|
|
103
|
-
lines: TerminalLine[];
|
|
104
|
-
title?: string;
|
|
105
|
-
isCollapsed?: boolean;
|
|
106
|
-
onToggle?: () => void;
|
|
107
|
-
onClose?: () => void;
|
|
108
|
-
maxHeight?: number;
|
|
109
|
-
className?: string;
|
|
110
|
-
}
|
|
111
|
-
declare function TerminalPanel({ lines, title, isCollapsed, onToggle, onClose, maxHeight, className, }: TerminalProps): react_jsx_runtime.JSX.Element;
|
|
112
|
-
|
|
113
|
-
export { type AuditCheck, AuditResults, type AuditResultsProps, type BannerType, type ContextBadge, type FormAudit, StatusBanner, type StatusBannerProps, StatusBar, type StatusBarProps, type TerminalLine, TerminalPanel, type TerminalProps, WorkspaceLayout, type WorkspaceLayoutProps };
|
|
251
|
+
export { AgentWorkbench, type AuditCheck, AuditResults, type AuditResultsProps, type BannerType, type ContextBadge, DirectoryPane, type DirectoryPaneProps, type FormAudit, RuntimePane, type RuntimePaneProps, SandboxWorkbench, type SandboxWorkbenchArtifact, type SandboxWorkbenchCustomArtifact, type SandboxWorkbenchFileArtifact, type SandboxWorkbenchLayoutOptions, type SandboxWorkbenchMarkdownArtifact, type SandboxWorkbenchOpenUIArtifact, type SandboxWorkbenchProps, type SandboxWorkbenchSessionProps, StatusBanner, type StatusBannerProps, StatusBar, type StatusBarProps, type TerminalLine, TerminalPanel, type TerminalProps, WorkspaceLayout, type WorkspaceLayoutProps };
|
package/dist/workspace.js
CHANGED
|
@@ -1,13 +1,37 @@
|
|
|
1
1
|
import {
|
|
2
|
+
AgentWorkbench,
|
|
2
3
|
AuditResults,
|
|
4
|
+
DirectoryPane,
|
|
5
|
+
RuntimePane,
|
|
6
|
+
SandboxWorkbench,
|
|
3
7
|
StatusBanner,
|
|
4
8
|
StatusBar,
|
|
5
9
|
TerminalPanel,
|
|
6
10
|
WorkspaceLayout
|
|
7
|
-
} from "./chunk-
|
|
11
|
+
} from "./chunk-67C53XVV.js";
|
|
12
|
+
import "./chunk-MUOL44AE.js";
|
|
13
|
+
import "./chunk-4F2GJRGU.js";
|
|
14
|
+
import "./chunk-CNWVHQFY.js";
|
|
15
|
+
import "./chunk-WUR652Y3.js";
|
|
16
|
+
import "./chunk-HRMUF35V.js";
|
|
17
|
+
import "./chunk-CJ2RYVZH.js";
|
|
18
|
+
import "./chunk-BX6AQMUS.js";
|
|
19
|
+
import "./chunk-YDBXQQLC.js";
|
|
20
|
+
import "./chunk-TQN3VR4F.js";
|
|
21
|
+
import {
|
|
22
|
+
ArtifactPane
|
|
23
|
+
} from "./chunk-JF6E2DS5.js";
|
|
24
|
+
import "./chunk-LTFK464G.js";
|
|
25
|
+
import "./chunk-MXCSSOGH.js";
|
|
26
|
+
import "./chunk-HWLX5NME.js";
|
|
8
27
|
import "./chunk-RQHJBTEU.js";
|
|
9
28
|
export {
|
|
29
|
+
AgentWorkbench,
|
|
30
|
+
ArtifactPane,
|
|
10
31
|
AuditResults,
|
|
32
|
+
DirectoryPane,
|
|
33
|
+
RuntimePane,
|
|
34
|
+
SandboxWorkbench,
|
|
11
35
|
StatusBanner,
|
|
12
36
|
StatusBar,
|
|
13
37
|
TerminalPanel,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tangle-network/sandbox-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.3",
|
|
4
4
|
"description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -26,6 +26,10 @@
|
|
|
26
26
|
"import": "./dist/workspace.js",
|
|
27
27
|
"types": "./dist/workspace.d.ts"
|
|
28
28
|
},
|
|
29
|
+
"./openui": {
|
|
30
|
+
"import": "./dist/openui.js",
|
|
31
|
+
"types": "./dist/openui.d.ts"
|
|
32
|
+
},
|
|
29
33
|
"./files": {
|
|
30
34
|
"import": "./dist/files.js",
|
|
31
35
|
"types": "./dist/files.d.ts"
|
|
@@ -58,6 +62,10 @@
|
|
|
58
62
|
"import": "./dist/hooks.js",
|
|
59
63
|
"types": "./dist/hooks.d.ts"
|
|
60
64
|
},
|
|
65
|
+
"./sdk-hooks": {
|
|
66
|
+
"import": "./dist/sdk-hooks.js",
|
|
67
|
+
"types": "./dist/sdk-hooks.d.ts"
|
|
68
|
+
},
|
|
61
69
|
"./stores": {
|
|
62
70
|
"import": "./dist/stores.js",
|
|
63
71
|
"types": "./dist/stores.d.ts"
|
|
@@ -71,12 +79,11 @@
|
|
|
71
79
|
"types": "./dist/utils.d.ts"
|
|
72
80
|
},
|
|
73
81
|
"./styles": "./dist/styles.css",
|
|
74
|
-
"./globals.css": "./
|
|
82
|
+
"./globals.css": "./dist/globals.css",
|
|
75
83
|
"./tailwind": "./tailwind.config.cjs"
|
|
76
84
|
},
|
|
77
85
|
"files": [
|
|
78
86
|
"dist",
|
|
79
|
-
"src/styles",
|
|
80
87
|
"tailwind.config.cjs"
|
|
81
88
|
],
|
|
82
89
|
"scripts": {
|
package/dist/chunk-2UHPE5T7.js
DELETED
|
@@ -1,201 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
cn
|
|
3
|
-
} from "./chunk-RQHJBTEU.js";
|
|
4
|
-
|
|
5
|
-
// src/primitives/card.tsx
|
|
6
|
-
import * as React from "react";
|
|
7
|
-
import { jsx } from "react/jsx-runtime";
|
|
8
|
-
var Card = React.forwardRef(({ className, variant = "default", hover = false, ...props }, ref) => {
|
|
9
|
-
const variants = {
|
|
10
|
-
default: "bg-card border-border",
|
|
11
|
-
glass: "bg-card/60 backdrop-blur-xl border-border/50",
|
|
12
|
-
sandbox: "bg-card/80 backdrop-blur-xl border-purple-500/20 shadow-lg shadow-purple-500/5"
|
|
13
|
-
};
|
|
14
|
-
return /* @__PURE__ */ jsx(
|
|
15
|
-
"div",
|
|
16
|
-
{
|
|
17
|
-
ref,
|
|
18
|
-
className: cn(
|
|
19
|
-
"rounded-xl border text-card-foreground transition-all duration-300",
|
|
20
|
-
variants[variant],
|
|
21
|
-
hover && "cursor-pointer hover:border-muted-foreground/50 hover:shadow-xl",
|
|
22
|
-
className
|
|
23
|
-
),
|
|
24
|
-
...props
|
|
25
|
-
}
|
|
26
|
-
);
|
|
27
|
-
});
|
|
28
|
-
Card.displayName = "Card";
|
|
29
|
-
var CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
30
|
-
"div",
|
|
31
|
-
{
|
|
32
|
-
ref,
|
|
33
|
-
className: cn("flex flex-col space-y-1.5 p-6", className),
|
|
34
|
-
...props
|
|
35
|
-
}
|
|
36
|
-
));
|
|
37
|
-
CardHeader.displayName = "CardHeader";
|
|
38
|
-
var CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
39
|
-
"h3",
|
|
40
|
-
{
|
|
41
|
-
ref,
|
|
42
|
-
className: cn("font-semibold leading-none tracking-tight", className),
|
|
43
|
-
...props
|
|
44
|
-
}
|
|
45
|
-
));
|
|
46
|
-
CardTitle.displayName = "CardTitle";
|
|
47
|
-
var CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
48
|
-
"p",
|
|
49
|
-
{
|
|
50
|
-
ref,
|
|
51
|
-
className: cn("text-muted-foreground text-sm", className),
|
|
52
|
-
...props
|
|
53
|
-
}
|
|
54
|
-
));
|
|
55
|
-
CardDescription.displayName = "CardDescription";
|
|
56
|
-
var CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
|
|
57
|
-
CardContent.displayName = "CardContent";
|
|
58
|
-
var CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
59
|
-
"div",
|
|
60
|
-
{
|
|
61
|
-
ref,
|
|
62
|
-
className: cn("flex items-center p-6 pt-0", className),
|
|
63
|
-
...props
|
|
64
|
-
}
|
|
65
|
-
));
|
|
66
|
-
CardFooter.displayName = "CardFooter";
|
|
67
|
-
|
|
68
|
-
// src/primitives/badge.tsx
|
|
69
|
-
import { cva } from "class-variance-authority";
|
|
70
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
71
|
-
var badgeVariants = cva(
|
|
72
|
-
"inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
73
|
-
{
|
|
74
|
-
variants: {
|
|
75
|
-
variant: {
|
|
76
|
-
default: "border-transparent bg-primary text-primary-foreground",
|
|
77
|
-
secondary: "border-transparent bg-secondary text-secondary-foreground",
|
|
78
|
-
destructive: "border-transparent bg-destructive text-destructive-foreground",
|
|
79
|
-
outline: "text-foreground",
|
|
80
|
-
success: "border-green-500/20 border-transparent bg-green-500/10 text-green-400",
|
|
81
|
-
warning: "border-transparent border-yellow-500/20 bg-yellow-500/10 text-yellow-400",
|
|
82
|
-
error: "border-red-500/20 border-transparent bg-red-500/10 text-red-400",
|
|
83
|
-
info: "border-blue-500/20 border-transparent bg-blue-500/10 text-blue-400",
|
|
84
|
-
sandbox: "border-purple-500/20 border-transparent bg-purple-500/10 text-purple-400"
|
|
85
|
-
}
|
|
86
|
-
},
|
|
87
|
-
defaultVariants: {
|
|
88
|
-
variant: "default"
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
);
|
|
92
|
-
function Badge({ className, variant, ...props }) {
|
|
93
|
-
return /* @__PURE__ */ jsx2("div", { className: cn(badgeVariants({ variant }), className), ...props });
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
// src/primitives/progress.tsx
|
|
97
|
-
import * as ProgressPrimitive from "@radix-ui/react-progress";
|
|
98
|
-
import * as React2 from "react";
|
|
99
|
-
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
100
|
-
var Progress = React2.forwardRef(
|
|
101
|
-
({ className, value, variant = "default", showValue = false, ...props }, ref) => {
|
|
102
|
-
const indicatorVariants = {
|
|
103
|
-
default: "bg-primary",
|
|
104
|
-
sandbox: "bg-gradient-to-r from-purple-500 to-violet-500"
|
|
105
|
-
};
|
|
106
|
-
return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
107
|
-
/* @__PURE__ */ jsx3(
|
|
108
|
-
ProgressPrimitive.Root,
|
|
109
|
-
{
|
|
110
|
-
ref,
|
|
111
|
-
className: cn(
|
|
112
|
-
"relative h-2 w-full overflow-hidden rounded-full bg-muted",
|
|
113
|
-
className
|
|
114
|
-
),
|
|
115
|
-
...props,
|
|
116
|
-
children: /* @__PURE__ */ jsx3(
|
|
117
|
-
ProgressPrimitive.Indicator,
|
|
118
|
-
{
|
|
119
|
-
className: cn(
|
|
120
|
-
"h-full w-full flex-1 transition-all duration-300 ease-out",
|
|
121
|
-
indicatorVariants[variant]
|
|
122
|
-
),
|
|
123
|
-
style: { transform: `translateX(-${100 - (value || 0)}%)` }
|
|
124
|
-
}
|
|
125
|
-
)
|
|
126
|
-
}
|
|
127
|
-
),
|
|
128
|
-
showValue && /* @__PURE__ */ jsxs("span", { className: "absolute -top-6 right-0 text-muted-foreground text-xs", children: [
|
|
129
|
-
value,
|
|
130
|
-
"%"
|
|
131
|
-
] })
|
|
132
|
-
] });
|
|
133
|
-
}
|
|
134
|
-
);
|
|
135
|
-
Progress.displayName = ProgressPrimitive.Root.displayName;
|
|
136
|
-
|
|
137
|
-
// src/primitives/skeleton.tsx
|
|
138
|
-
import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
139
|
-
function Skeleton({
|
|
140
|
-
className,
|
|
141
|
-
...props
|
|
142
|
-
}) {
|
|
143
|
-
return /* @__PURE__ */ jsx4(
|
|
144
|
-
"div",
|
|
145
|
-
{
|
|
146
|
-
className: cn("animate-pulse rounded-lg bg-muted", className),
|
|
147
|
-
...props
|
|
148
|
-
}
|
|
149
|
-
);
|
|
150
|
-
}
|
|
151
|
-
function SkeletonCard({ className }) {
|
|
152
|
-
return /* @__PURE__ */ jsxs2(
|
|
153
|
-
"div",
|
|
154
|
-
{
|
|
155
|
-
className: cn(
|
|
156
|
-
"space-y-4 rounded-xl border border-border bg-card p-6",
|
|
157
|
-
className
|
|
158
|
-
),
|
|
159
|
-
children: [
|
|
160
|
-
/* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-3/4" }),
|
|
161
|
-
/* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/2" }),
|
|
162
|
-
/* @__PURE__ */ jsxs2("div", { className: "space-y-2 pt-4", children: [
|
|
163
|
-
/* @__PURE__ */ jsx4(Skeleton, { className: "h-3 w-full" }),
|
|
164
|
-
/* @__PURE__ */ jsx4(Skeleton, { className: "h-3 w-5/6" }),
|
|
165
|
-
/* @__PURE__ */ jsx4(Skeleton, { className: "h-3 w-4/6" })
|
|
166
|
-
] })
|
|
167
|
-
]
|
|
168
|
-
}
|
|
169
|
-
);
|
|
170
|
-
}
|
|
171
|
-
function SkeletonTable({ rows = 5 }) {
|
|
172
|
-
return /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
|
|
173
|
-
/* @__PURE__ */ jsxs2("div", { className: "flex gap-4 border-border border-b pb-2", children: [
|
|
174
|
-
/* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
|
|
175
|
-
/* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
|
|
176
|
-
/* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
|
|
177
|
-
/* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" })
|
|
178
|
-
] }),
|
|
179
|
-
Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs2("div", { className: "flex gap-4", children: [
|
|
180
|
-
/* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
|
|
181
|
-
/* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
|
|
182
|
-
/* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
|
|
183
|
-
/* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" })
|
|
184
|
-
] }, i))
|
|
185
|
-
] });
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
export {
|
|
189
|
-
Card,
|
|
190
|
-
CardHeader,
|
|
191
|
-
CardTitle,
|
|
192
|
-
CardDescription,
|
|
193
|
-
CardContent,
|
|
194
|
-
CardFooter,
|
|
195
|
-
badgeVariants,
|
|
196
|
-
Badge,
|
|
197
|
-
Progress,
|
|
198
|
-
Skeleton,
|
|
199
|
-
SkeletonCard,
|
|
200
|
-
SkeletonTable
|
|
201
|
-
};
|