@tangle-network/sandbox-ui 0.2.0
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 +68 -0
- package/dist/auth.d.ts +57 -0
- package/dist/auth.js +14 -0
- package/dist/branding-DCi5VEik.d.ts +13 -0
- package/dist/button-BidTtuRS.d.ts +15 -0
- package/dist/chat.d.ts +121 -0
- package/dist/chat.js +25 -0
- package/dist/chunk-2UHPE5T7.js +201 -0
- package/dist/chunk-4EIWPJMJ.js +545 -0
- package/dist/chunk-6MQIDUPA.js +502 -0
- package/dist/chunk-B26TQ7SA.js +47 -0
- package/dist/chunk-E6FS7R4X.js +109 -0
- package/dist/chunk-GRYHFH5O.js +110 -0
- package/dist/chunk-HMND7JPA.js +868 -0
- package/dist/chunk-HRMUF35V.js +19 -0
- package/dist/chunk-HYEAX3DC.js +822 -0
- package/dist/chunk-KMXV7DDX.js +174 -0
- package/dist/chunk-KYY2X6LY.js +318 -0
- package/dist/chunk-L6ZDH5F4.js +334 -0
- package/dist/chunk-LTFK464G.js +103 -0
- package/dist/chunk-M34OA6PQ.js +233 -0
- package/dist/chunk-M6VLC32S.js +219 -0
- package/dist/chunk-MCGKDCOR.js +173 -0
- package/dist/chunk-NI2EI43H.js +294 -0
- package/dist/chunk-OU4TRNQZ.js +173 -0
- package/dist/chunk-QD4QE5P5.js +40 -0
- package/dist/chunk-QSQBDR3N.js +180 -0
- package/dist/chunk-RQHJBTEU.js +10 -0
- package/dist/chunk-U62G5TS7.js +472 -0
- package/dist/chunk-ZOL2TR5M.js +475 -0
- package/dist/dashboard.d.ts +111 -0
- package/dist/dashboard.js +26 -0
- package/dist/editor.d.ts +196 -0
- package/dist/editor.js +713 -0
- package/dist/expanded-tool-detail-OkXGqTHe.d.ts +52 -0
- package/dist/files.d.ts +66 -0
- package/dist/files.js +11 -0
- package/dist/hooks.d.ts +22 -0
- package/dist/hooks.js +107 -0
- package/dist/index.d.ts +107 -0
- package/dist/index.js +551 -0
- package/dist/markdown.d.ts +55 -0
- package/dist/markdown.js +17 -0
- package/dist/pages.d.ts +89 -0
- package/dist/pages.js +1181 -0
- package/dist/parts-CyGkM6Fp.d.ts +50 -0
- package/dist/primitives.d.ts +189 -0
- package/dist/primitives.js +161 -0
- package/dist/run-CtFZ6s-D.d.ts +41 -0
- package/dist/run.d.ts +14 -0
- package/dist/run.js +29 -0
- package/dist/sidecar-CFU2W9j1.d.ts +8 -0
- package/dist/stores.d.ts +28 -0
- package/dist/stores.js +49 -0
- package/dist/terminal.d.ts +44 -0
- package/dist/terminal.js +160 -0
- package/dist/tool-call-feed-D5Ume-Pt.d.ts +66 -0
- package/dist/tool-display-BvsVW_Ur.d.ts +32 -0
- package/dist/types.d.ts +6 -0
- package/dist/types.js +0 -0
- package/dist/usage-chart-DINgSVL5.d.ts +60 -0
- package/dist/use-sidecar-auth-Bb0-w3lX.d.ts +339 -0
- package/dist/utils.d.ts +28 -0
- package/dist/utils.js +28 -0
- package/dist/workspace.d.ts +113 -0
- package/dist/workspace.js +15 -0
- package/package.json +174 -0
- package/src/styles/globals.css +230 -0
- package/src/styles/tokens.css +73 -0
- package/tailwind.config.cjs +99 -0
package/dist/terminal.js
ADDED
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
import {
|
|
2
|
+
usePtySession
|
|
3
|
+
} from "./chunk-GRYHFH5O.js";
|
|
4
|
+
|
|
5
|
+
// src/terminal/terminal-view.tsx
|
|
6
|
+
import "@xterm/xterm/css/xterm.css";
|
|
7
|
+
import { useEffect, useRef, useCallback } from "react";
|
|
8
|
+
import { Terminal } from "@xterm/xterm";
|
|
9
|
+
import { FitAddon } from "@xterm/addon-fit";
|
|
10
|
+
import { WebLinksAddon } from "@xterm/addon-web-links";
|
|
11
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
12
|
+
var DEFAULT_TERMINAL_THEME = {
|
|
13
|
+
background: "#0c0c0e",
|
|
14
|
+
foreground: "#d4d4d8",
|
|
15
|
+
cursor: "#34d399",
|
|
16
|
+
cursorAccent: "#0c0c0e",
|
|
17
|
+
selectionBackground: "#7c3aed33",
|
|
18
|
+
selectionForeground: "#d4d4d8",
|
|
19
|
+
black: "#18181b",
|
|
20
|
+
red: "#ef4444",
|
|
21
|
+
green: "#34d399",
|
|
22
|
+
yellow: "#fbbf24",
|
|
23
|
+
blue: "#60a5fa",
|
|
24
|
+
magenta: "#a78bfa",
|
|
25
|
+
cyan: "#22d3ee",
|
|
26
|
+
white: "#d4d4d8",
|
|
27
|
+
brightBlack: "#52525b",
|
|
28
|
+
brightRed: "#f87171",
|
|
29
|
+
brightGreen: "#6ee7b7",
|
|
30
|
+
brightYellow: "#fde68a",
|
|
31
|
+
brightBlue: "#93c5fd",
|
|
32
|
+
brightMagenta: "#c4b5fd",
|
|
33
|
+
brightCyan: "#67e8f9",
|
|
34
|
+
brightWhite: "#fafafa"
|
|
35
|
+
};
|
|
36
|
+
var DEFAULT_PROMPT = "\x1B[38;5;48m$\x1B[0m ";
|
|
37
|
+
function TerminalView({
|
|
38
|
+
apiUrl,
|
|
39
|
+
token,
|
|
40
|
+
theme,
|
|
41
|
+
title = "Terminal",
|
|
42
|
+
subtitle = "Connected to PTY session",
|
|
43
|
+
prompt = DEFAULT_PROMPT
|
|
44
|
+
}) {
|
|
45
|
+
const resolvedTheme = { ...DEFAULT_TERMINAL_THEME, ...theme };
|
|
46
|
+
const containerRef = useRef(null);
|
|
47
|
+
const termRef = useRef(null);
|
|
48
|
+
const fitAddonRef = useRef(null);
|
|
49
|
+
const lineBufferRef = useRef("");
|
|
50
|
+
const writePrompt = useCallback(() => {
|
|
51
|
+
termRef.current?.write("\r\n" + prompt);
|
|
52
|
+
}, [prompt]);
|
|
53
|
+
const onData = useCallback((data) => {
|
|
54
|
+
termRef.current?.write(data);
|
|
55
|
+
}, []);
|
|
56
|
+
const { isConnected, error, sendCommand, reconnect } = usePtySession({
|
|
57
|
+
apiUrl,
|
|
58
|
+
token,
|
|
59
|
+
onData
|
|
60
|
+
});
|
|
61
|
+
useEffect(() => {
|
|
62
|
+
if (!containerRef.current) return;
|
|
63
|
+
const term = new Terminal({
|
|
64
|
+
theme: resolvedTheme,
|
|
65
|
+
fontFamily: '"JetBrains Mono", "Fira Code", "Cascadia Code", Menlo, monospace',
|
|
66
|
+
fontSize: 13,
|
|
67
|
+
lineHeight: 1.4,
|
|
68
|
+
cursorBlink: true,
|
|
69
|
+
cursorStyle: "bar",
|
|
70
|
+
scrollback: 5e3,
|
|
71
|
+
convertEol: true,
|
|
72
|
+
allowProposedApi: true
|
|
73
|
+
});
|
|
74
|
+
const fitAddon = new FitAddon();
|
|
75
|
+
const webLinksAddon = new WebLinksAddon();
|
|
76
|
+
term.loadAddon(fitAddon);
|
|
77
|
+
term.loadAddon(webLinksAddon);
|
|
78
|
+
term.open(containerRef.current);
|
|
79
|
+
requestAnimationFrame(() => {
|
|
80
|
+
fitAddon.fit();
|
|
81
|
+
});
|
|
82
|
+
termRef.current = term;
|
|
83
|
+
fitAddonRef.current = fitAddon;
|
|
84
|
+
const padTitle = title.padEnd(37);
|
|
85
|
+
const padSubtitle = subtitle.padEnd(37);
|
|
86
|
+
term.writeln(`\x1B[38;5;48m\u256D${"\u2500".repeat(41)}\u256E\x1B[0m`);
|
|
87
|
+
term.writeln(`\x1B[38;5;48m\u2502\x1B[0m \x1B[1m${padTitle}\x1B[0m\x1B[38;5;48m\u2502\x1B[0m`);
|
|
88
|
+
term.writeln(`\x1B[38;5;48m\u2502\x1B[0m ${padSubtitle}\x1B[38;5;48m\u2502\x1B[0m`);
|
|
89
|
+
term.writeln(`\x1B[38;5;48m\u2570${"\u2500".repeat(41)}\u256F\x1B[0m`);
|
|
90
|
+
term.write(prompt);
|
|
91
|
+
term.onData((data) => {
|
|
92
|
+
const code = data.charCodeAt(0);
|
|
93
|
+
if (data === "\r") {
|
|
94
|
+
const cmd = lineBufferRef.current;
|
|
95
|
+
lineBufferRef.current = "";
|
|
96
|
+
term.write("\r\n");
|
|
97
|
+
if (cmd.trim()) {
|
|
98
|
+
sendCommand(cmd).catch((err) => {
|
|
99
|
+
term.writeln(`\x1B[31mError: ${err instanceof Error ? err.message : String(err)}\x1B[0m`);
|
|
100
|
+
writePrompt();
|
|
101
|
+
});
|
|
102
|
+
} else {
|
|
103
|
+
term.write(prompt);
|
|
104
|
+
}
|
|
105
|
+
} else if (data === "\x7F" || data === "\b") {
|
|
106
|
+
if (lineBufferRef.current.length > 0) {
|
|
107
|
+
lineBufferRef.current = lineBufferRef.current.slice(0, -1);
|
|
108
|
+
term.write("\b \b");
|
|
109
|
+
}
|
|
110
|
+
} else if (data === "") {
|
|
111
|
+
lineBufferRef.current = "";
|
|
112
|
+
term.write("^C");
|
|
113
|
+
writePrompt();
|
|
114
|
+
} else if (data === "\f") {
|
|
115
|
+
term.clear();
|
|
116
|
+
term.write(prompt);
|
|
117
|
+
} else if (code >= 32) {
|
|
118
|
+
lineBufferRef.current += data;
|
|
119
|
+
term.write(data);
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
const ro = new ResizeObserver(() => {
|
|
123
|
+
requestAnimationFrame(() => {
|
|
124
|
+
fitAddon.fit();
|
|
125
|
+
});
|
|
126
|
+
});
|
|
127
|
+
ro.observe(containerRef.current);
|
|
128
|
+
return () => {
|
|
129
|
+
ro.disconnect();
|
|
130
|
+
term.dispose();
|
|
131
|
+
termRef.current = null;
|
|
132
|
+
fitAddonRef.current = null;
|
|
133
|
+
};
|
|
134
|
+
}, [sendCommand, writePrompt, prompt, resolvedTheme, title, subtitle]);
|
|
135
|
+
return /* @__PURE__ */ jsxs("div", { className: "relative h-full w-full", children: [
|
|
136
|
+
/* @__PURE__ */ jsx(
|
|
137
|
+
"div",
|
|
138
|
+
{
|
|
139
|
+
ref: containerRef,
|
|
140
|
+
className: "h-full w-full rounded-lg overflow-hidden",
|
|
141
|
+
style: { backgroundColor: resolvedTheme.background }
|
|
142
|
+
}
|
|
143
|
+
),
|
|
144
|
+
(!isConnected || error) && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/60 rounded-lg", children: /* @__PURE__ */ jsx("div", { className: "text-center", children: error ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
145
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm text-red-400 mb-3", children: error }),
|
|
146
|
+
/* @__PURE__ */ jsx(
|
|
147
|
+
"button",
|
|
148
|
+
{
|
|
149
|
+
onClick: reconnect,
|
|
150
|
+
className: "text-sm text-emerald-400 hover:text-emerald-300 underline cursor-pointer",
|
|
151
|
+
children: "Retry connection"
|
|
152
|
+
}
|
|
153
|
+
)
|
|
154
|
+
] }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-400", children: "Connecting to terminal..." }) }) })
|
|
155
|
+
] });
|
|
156
|
+
}
|
|
157
|
+
export {
|
|
158
|
+
DEFAULT_TERMINAL_THEME,
|
|
159
|
+
TerminalView
|
|
160
|
+
};
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
type ToolCallType = "bash" | "read" | "write" | "edit" | "glob" | "grep" | "list" | "download" | "inspect" | "audit" | "unknown";
|
|
5
|
+
type ToolCallStatus = "running" | "success" | "error";
|
|
6
|
+
interface ToolCallStepProps {
|
|
7
|
+
type: ToolCallType;
|
|
8
|
+
label: string;
|
|
9
|
+
status: ToolCallStatus;
|
|
10
|
+
detail?: string;
|
|
11
|
+
output?: string;
|
|
12
|
+
duration?: number;
|
|
13
|
+
className?: string;
|
|
14
|
+
}
|
|
15
|
+
declare function ToolCallStep({ type, label, status, detail, output, duration, className, }: ToolCallStepProps): react_jsx_runtime.JSX.Element;
|
|
16
|
+
/**
|
|
17
|
+
* ToolCallGroup — groups multiple tool calls under a heading.
|
|
18
|
+
*/
|
|
19
|
+
interface ToolCallGroupProps {
|
|
20
|
+
title?: string;
|
|
21
|
+
children: ReactNode;
|
|
22
|
+
className?: string;
|
|
23
|
+
}
|
|
24
|
+
declare function ToolCallGroup({ title, children, className }: ToolCallGroupProps): react_jsx_runtime.JSX.Element;
|
|
25
|
+
|
|
26
|
+
interface ToolCallData {
|
|
27
|
+
id: string;
|
|
28
|
+
type: ToolCallType;
|
|
29
|
+
label: string;
|
|
30
|
+
status: ToolCallStatus;
|
|
31
|
+
detail?: string;
|
|
32
|
+
output?: string;
|
|
33
|
+
duration?: number;
|
|
34
|
+
}
|
|
35
|
+
type FeedSegment = {
|
|
36
|
+
kind: "text";
|
|
37
|
+
content: string;
|
|
38
|
+
} | {
|
|
39
|
+
kind: "tool_call";
|
|
40
|
+
call: ToolCallData;
|
|
41
|
+
} | {
|
|
42
|
+
kind: "tool_group";
|
|
43
|
+
title?: string;
|
|
44
|
+
calls: ToolCallData[];
|
|
45
|
+
};
|
|
46
|
+
interface ToolCallFeedProps {
|
|
47
|
+
segments: FeedSegment[];
|
|
48
|
+
className?: string;
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* Renders a feed of interleaved text and tool calls.
|
|
52
|
+
*/
|
|
53
|
+
declare function ToolCallFeed({ segments, className }: ToolCallFeedProps): react_jsx_runtime.JSX.Element | null;
|
|
54
|
+
/**
|
|
55
|
+
* Parse raw SSE tool events into FeedSegments.
|
|
56
|
+
*
|
|
57
|
+
* This is the bridge between the orchestrator's SSE stream format
|
|
58
|
+
* and the ToolCallFeed component. Consumers call this in their
|
|
59
|
+
* useToolCallStream hook.
|
|
60
|
+
*/
|
|
61
|
+
declare function parseToolEvent(event: {
|
|
62
|
+
type: string;
|
|
63
|
+
data: Record<string, unknown>;
|
|
64
|
+
}): ToolCallData | null;
|
|
65
|
+
|
|
66
|
+
export { type FeedSegment as F, type ToolCallData as T, ToolCallFeed as a, type ToolCallFeedProps as b, ToolCallGroup as c, type ToolCallGroupProps as d, type ToolCallStatus as e, ToolCallStep as f, type ToolCallStepProps as g, type ToolCallType as h, parseToolEvent as p };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { b as ToolPart } from './parts-CyGkM6Fp.js';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Variant-specific rendering instructions for tool output.
|
|
6
|
+
* Maps directly to specialised preview components.
|
|
7
|
+
*/
|
|
8
|
+
type DisplayVariant = "command" | "write-file" | "question" | "web-search" | "grep" | "glob" | "default";
|
|
9
|
+
/**
|
|
10
|
+
* Custom renderer for tool details. Return a ReactNode to override the
|
|
11
|
+
* default ExpandedToolDetail, or null to fall back to the built-in renderer.
|
|
12
|
+
*/
|
|
13
|
+
type CustomToolRenderer = (part: ToolPart) => ReactNode | null;
|
|
14
|
+
/**
|
|
15
|
+
* Visual metadata for a tool invocation — computed from the tool name,
|
|
16
|
+
* input, and output by `getToolDisplayMetadata()`.
|
|
17
|
+
*/
|
|
18
|
+
interface ToolDisplayMetadata {
|
|
19
|
+
title: string;
|
|
20
|
+
description?: string;
|
|
21
|
+
inputTitle?: string;
|
|
22
|
+
outputTitle?: string;
|
|
23
|
+
inputLanguage?: string;
|
|
24
|
+
outputLanguage?: string;
|
|
25
|
+
hasDiffOutput?: boolean;
|
|
26
|
+
diffFilePath?: string;
|
|
27
|
+
displayVariant?: DisplayVariant;
|
|
28
|
+
commandSnippet?: string;
|
|
29
|
+
targetPath?: string;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export type { CustomToolRenderer as C, DisplayVariant as D, ToolDisplayMetadata as T };
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { R as ReasoningPart, S as SessionMessage, a as SessionPart, T as TextPart, b as ToolPart, c as ToolState, d as ToolStatus, e as ToolTime } from './parts-CyGkM6Fp.js';
|
|
2
|
+
export { F as FinalTextPart, G as GroupedMessage, M as MessageRun, a as MessageUser, R as Run, b as RunStats, T as ToolCategory } from './run-CtFZ6s-D.js';
|
|
3
|
+
export { S as Session } from './sidecar-CFU2W9j1.js';
|
|
4
|
+
export { C as CustomToolRenderer, D as DisplayVariant, T as ToolDisplayMetadata } from './tool-display-BvsVW_Ur.js';
|
|
5
|
+
export { A as AgentBranding } from './branding-DCi5VEik.js';
|
|
6
|
+
import 'react';
|
package/dist/types.js
ADDED
|
File without changes
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
interface BillingSubscription {
|
|
4
|
+
status: string;
|
|
5
|
+
tierName: string;
|
|
6
|
+
renewsAt: string;
|
|
7
|
+
}
|
|
8
|
+
interface BillingBalance {
|
|
9
|
+
available: number;
|
|
10
|
+
used: number;
|
|
11
|
+
}
|
|
12
|
+
interface BillingUsage {
|
|
13
|
+
period: string;
|
|
14
|
+
total: number;
|
|
15
|
+
byModel: Record<string, number>;
|
|
16
|
+
}
|
|
17
|
+
interface BillingDashboardProps {
|
|
18
|
+
subscription: BillingSubscription | null;
|
|
19
|
+
balance: BillingBalance;
|
|
20
|
+
usage: BillingUsage;
|
|
21
|
+
onManageSubscription: () => void;
|
|
22
|
+
onAddCredits: () => void;
|
|
23
|
+
variant?: "sandbox";
|
|
24
|
+
}
|
|
25
|
+
declare function BillingDashboard({ subscription, balance, usage, onManageSubscription, onAddCredits, variant, }: BillingDashboardProps): react_jsx_runtime.JSX.Element;
|
|
26
|
+
|
|
27
|
+
interface PricingTier {
|
|
28
|
+
id: string;
|
|
29
|
+
name: string;
|
|
30
|
+
description: string;
|
|
31
|
+
monthlyPriceCents: number;
|
|
32
|
+
yearlyPriceCents?: number;
|
|
33
|
+
features: string[];
|
|
34
|
+
recommended?: boolean;
|
|
35
|
+
creditsPerMonth?: number;
|
|
36
|
+
}
|
|
37
|
+
interface PricingPageProps {
|
|
38
|
+
tiers: PricingTier[];
|
|
39
|
+
currentTierId?: string;
|
|
40
|
+
billingPeriod: "monthly" | "yearly";
|
|
41
|
+
onBillingPeriodChange: (period: "monthly" | "yearly") => void;
|
|
42
|
+
onSelectTier: (tierId: string) => void;
|
|
43
|
+
variant?: "sandbox";
|
|
44
|
+
loading?: boolean;
|
|
45
|
+
}
|
|
46
|
+
declare function PricingPage({ tiers, currentTierId, billingPeriod, onBillingPeriodChange, onSelectTier, variant, loading, }: PricingPageProps): react_jsx_runtime.JSX.Element;
|
|
47
|
+
|
|
48
|
+
interface UsageDataPoint {
|
|
49
|
+
date: string;
|
|
50
|
+
value: number;
|
|
51
|
+
}
|
|
52
|
+
interface UsageChartProps {
|
|
53
|
+
data: UsageDataPoint[];
|
|
54
|
+
title: string;
|
|
55
|
+
unit: string;
|
|
56
|
+
variant?: "agentrun" | "automateai" | "tradingbots" | "sandbox";
|
|
57
|
+
}
|
|
58
|
+
declare function UsageChart({ data, title, unit, variant, }: UsageChartProps): react_jsx_runtime.JSX.Element;
|
|
59
|
+
|
|
60
|
+
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,339 @@
|
|
|
1
|
+
import { F as FeedSegment } from './tool-call-feed-D5Ume-Pt.js';
|
|
2
|
+
import { S as SessionMessage, a as SessionPart } from './parts-CyGkM6Fp.js';
|
|
3
|
+
import { G as GroupedMessage, R as Run } from './run-CtFZ6s-D.js';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { RefObject } from 'react';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* useToolCallStream — parses SSE events into ToolCallFeed segments.
|
|
9
|
+
*
|
|
10
|
+
* Takes raw SSE event data from the orchestrator stream and produces
|
|
11
|
+
* structured FeedSegments that ToolCallFeed can render.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
interface UseToolCallStreamReturn {
|
|
15
|
+
/** Current feed segments (text + tool calls interleaved) */
|
|
16
|
+
segments: FeedSegment[];
|
|
17
|
+
/** Push a raw SSE event into the stream */
|
|
18
|
+
pushEvent: (event: {
|
|
19
|
+
type: string;
|
|
20
|
+
data: Record<string, unknown>;
|
|
21
|
+
}) => void;
|
|
22
|
+
/** Push a text delta (from message.part.updated) */
|
|
23
|
+
pushText: (delta: string) => void;
|
|
24
|
+
/** Mark a tool call as complete */
|
|
25
|
+
completeToolCall: (id: string, result: {
|
|
26
|
+
output?: string;
|
|
27
|
+
error?: string;
|
|
28
|
+
duration?: number;
|
|
29
|
+
}) => void;
|
|
30
|
+
/** Reset the stream */
|
|
31
|
+
reset: () => void;
|
|
32
|
+
}
|
|
33
|
+
declare function useToolCallStream(): UseToolCallStreamReturn;
|
|
34
|
+
|
|
35
|
+
interface AuthUser {
|
|
36
|
+
customer_id: string;
|
|
37
|
+
email: string;
|
|
38
|
+
name?: string;
|
|
39
|
+
tier: string;
|
|
40
|
+
github?: {
|
|
41
|
+
login: string;
|
|
42
|
+
connected: boolean;
|
|
43
|
+
} | null;
|
|
44
|
+
session_expires_at?: string;
|
|
45
|
+
}
|
|
46
|
+
interface UseAuthOptions {
|
|
47
|
+
apiBaseUrl: string;
|
|
48
|
+
revalidateOnFocus?: boolean;
|
|
49
|
+
shouldRetryOnError?: boolean;
|
|
50
|
+
}
|
|
51
|
+
interface UseAuthResult {
|
|
52
|
+
user: AuthUser | null;
|
|
53
|
+
isLoading: boolean;
|
|
54
|
+
isError: boolean;
|
|
55
|
+
error: Error | null;
|
|
56
|
+
mutate: () => Promise<void>;
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Hook for managing authentication state.
|
|
60
|
+
* Fetches user session from the API and provides loading/error states.
|
|
61
|
+
*/
|
|
62
|
+
declare function useAuth({ apiBaseUrl, revalidateOnFocus, shouldRetryOnError, }: UseAuthOptions): UseAuthResult;
|
|
63
|
+
/**
|
|
64
|
+
* Creates a fetcher function that includes auth credentials.
|
|
65
|
+
* Uses both cookie-based session and localStorage API key for backwards compatibility.
|
|
66
|
+
*/
|
|
67
|
+
declare function createAuthFetcher(_apiBaseUrl: string): <T = unknown>(url: string, options?: RequestInit) => Promise<T>;
|
|
68
|
+
/**
|
|
69
|
+
* Hook to get the API key from localStorage.
|
|
70
|
+
* For backwards compatibility with API key-based auth.
|
|
71
|
+
*/
|
|
72
|
+
declare function useApiKey(): string | null;
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* SSE Event data structure
|
|
76
|
+
*/
|
|
77
|
+
interface SSEEvent<T = unknown> {
|
|
78
|
+
id?: string;
|
|
79
|
+
event: string;
|
|
80
|
+
data: T;
|
|
81
|
+
timestamp: number;
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Connection state for SSE streams
|
|
85
|
+
*/
|
|
86
|
+
type ConnectionState = "connecting" | "connected" | "reconnecting" | "disconnected" | "error";
|
|
87
|
+
/**
|
|
88
|
+
* SSE stream options
|
|
89
|
+
*/
|
|
90
|
+
interface UseSSEStreamOptions<T = unknown> {
|
|
91
|
+
/** URL to connect to */
|
|
92
|
+
url: string;
|
|
93
|
+
/** Authorization header value */
|
|
94
|
+
authToken?: string;
|
|
95
|
+
/** Enable automatic reconnection (default: true) */
|
|
96
|
+
autoReconnect?: boolean;
|
|
97
|
+
/** Max reconnection attempts (default: 5) */
|
|
98
|
+
maxRetries?: number;
|
|
99
|
+
/** Base delay between reconnects in ms (default: 1000) */
|
|
100
|
+
reconnectDelay?: number;
|
|
101
|
+
/** Event types to listen for (default: all) */
|
|
102
|
+
eventTypes?: string[];
|
|
103
|
+
/** Callback for each event */
|
|
104
|
+
onEvent?: (event: SSEEvent<T>) => void;
|
|
105
|
+
/** Callback on connection state change */
|
|
106
|
+
onStateChange?: (state: ConnectionState) => void;
|
|
107
|
+
/** Callback on error */
|
|
108
|
+
onError?: (error: Error) => void;
|
|
109
|
+
/** Custom headers */
|
|
110
|
+
headers?: Record<string, string>;
|
|
111
|
+
/** Whether to start connected (default: true) */
|
|
112
|
+
enabled?: boolean;
|
|
113
|
+
}
|
|
114
|
+
/**
|
|
115
|
+
* SSE stream result
|
|
116
|
+
*/
|
|
117
|
+
interface UseSSEStreamResult<T = unknown> {
|
|
118
|
+
/** Current connection state */
|
|
119
|
+
state: ConnectionState;
|
|
120
|
+
/** All received events */
|
|
121
|
+
events: SSEEvent<T>[];
|
|
122
|
+
/** Most recent event */
|
|
123
|
+
lastEvent: SSEEvent<T> | null;
|
|
124
|
+
/** Error if any */
|
|
125
|
+
error: Error | null;
|
|
126
|
+
/** Manually connect */
|
|
127
|
+
connect: () => void;
|
|
128
|
+
/** Manually disconnect */
|
|
129
|
+
disconnect: () => void;
|
|
130
|
+
/** Clear events buffer */
|
|
131
|
+
clearEvents: () => void;
|
|
132
|
+
/** Retry count */
|
|
133
|
+
retryCount: number;
|
|
134
|
+
/** Time since last event (ms) */
|
|
135
|
+
timeSinceLastEvent: number;
|
|
136
|
+
}
|
|
137
|
+
/**
|
|
138
|
+
* React hook for consuming SSE streams with automatic reconnection,
|
|
139
|
+
* event buffering, and state management.
|
|
140
|
+
*
|
|
141
|
+
* @example
|
|
142
|
+
* ```tsx
|
|
143
|
+
* const { events, state, lastEvent } = useSSEStream({
|
|
144
|
+
* url: '/api/v1/tasks/123/stream',
|
|
145
|
+
* authToken: 'Bearer xxx',
|
|
146
|
+
* onEvent: (e) => console.log('Event:', e),
|
|
147
|
+
* });
|
|
148
|
+
*
|
|
149
|
+
* return (
|
|
150
|
+
* <div>
|
|
151
|
+
* <p>Status: {state}</p>
|
|
152
|
+
* {events.map((e, i) => (
|
|
153
|
+
* <div key={i}>{e.event}: {JSON.stringify(e.data)}</div>
|
|
154
|
+
* ))}
|
|
155
|
+
* </div>
|
|
156
|
+
* );
|
|
157
|
+
* ```
|
|
158
|
+
*/
|
|
159
|
+
declare function useSSEStream<T = unknown>(options: UseSSEStreamOptions<T>): UseSSEStreamResult<T>;
|
|
160
|
+
/**
|
|
161
|
+
* Typed event types for common streaming scenarios
|
|
162
|
+
*/
|
|
163
|
+
interface TaskStreamEvent {
|
|
164
|
+
task_id: string;
|
|
165
|
+
status?: string;
|
|
166
|
+
progress?: number;
|
|
167
|
+
message?: string;
|
|
168
|
+
result?: unknown;
|
|
169
|
+
error?: string;
|
|
170
|
+
}
|
|
171
|
+
interface AgentStreamEvent {
|
|
172
|
+
type: "message.updated" | "tool_call" | "tool_result" | "llm_response" | "error" | "session.idle" | "execution.started" | "execution.result";
|
|
173
|
+
data: unknown;
|
|
174
|
+
timestamp?: number;
|
|
175
|
+
}
|
|
176
|
+
interface TerminalStreamEvent {
|
|
177
|
+
type: "output" | "input" | "error" | "exit";
|
|
178
|
+
data: string;
|
|
179
|
+
timestamp: number;
|
|
180
|
+
}
|
|
181
|
+
interface AutomationStreamEvent {
|
|
182
|
+
automation_id: string;
|
|
183
|
+
event_id?: string;
|
|
184
|
+
status?: string;
|
|
185
|
+
variant_id?: string;
|
|
186
|
+
output?: string;
|
|
187
|
+
action_result?: unknown;
|
|
188
|
+
error?: string;
|
|
189
|
+
}
|
|
190
|
+
interface BotStreamEvent {
|
|
191
|
+
bot_id: string;
|
|
192
|
+
type: "balance" | "trade" | "decision" | "log" | "error";
|
|
193
|
+
data: unknown;
|
|
194
|
+
timestamp: number;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
interface UseRunGroupsOptions {
|
|
198
|
+
messages: SessionMessage[];
|
|
199
|
+
partMap: Record<string, SessionPart[]>;
|
|
200
|
+
isStreaming: boolean;
|
|
201
|
+
}
|
|
202
|
+
declare function useRunGroups({ messages, partMap, isStreaming, }: UseRunGroupsOptions): GroupedMessage[];
|
|
203
|
+
|
|
204
|
+
/**
|
|
205
|
+
* Manages per-run collapse state with auto-collapse after run completion.
|
|
206
|
+
*
|
|
207
|
+
* - Runs start expanded while streaming
|
|
208
|
+
* - Auto-collapse 1s after the run completes
|
|
209
|
+
* - Manual toggle is preserved (user override sticks)
|
|
210
|
+
*/
|
|
211
|
+
declare function useRunCollapseState(runs: Run[]): {
|
|
212
|
+
isCollapsed: (runId: string) => boolean;
|
|
213
|
+
toggleCollapse: (runId: string) => void;
|
|
214
|
+
};
|
|
215
|
+
|
|
216
|
+
/**
|
|
217
|
+
* Scroll-to-bottom behaviour: sticks to the bottom while streaming,
|
|
218
|
+
* pauses when user scrolls up, resumes when user scrolls back down.
|
|
219
|
+
*/
|
|
220
|
+
declare function useAutoScroll(containerRef: RefObject<HTMLElement | null>, deps?: unknown[]): {
|
|
221
|
+
isAtBottom: boolean;
|
|
222
|
+
scrollToBottom: () => void;
|
|
223
|
+
};
|
|
224
|
+
|
|
225
|
+
/** Minimal session info returned by the listing API. */
|
|
226
|
+
interface SessionInfo {
|
|
227
|
+
id: string;
|
|
228
|
+
title: string;
|
|
229
|
+
parentID?: string;
|
|
230
|
+
}
|
|
231
|
+
interface UseSessionStreamOptions {
|
|
232
|
+
/** Base URL of the session proxy (e.g. "http://localhost:9100"). */
|
|
233
|
+
apiUrl: string;
|
|
234
|
+
/** Bearer token for authentication. */
|
|
235
|
+
token: string | null;
|
|
236
|
+
/** Session ID to stream events for. */
|
|
237
|
+
sessionId: string;
|
|
238
|
+
/** Only connect when true. Defaults to true. */
|
|
239
|
+
enabled?: boolean;
|
|
240
|
+
}
|
|
241
|
+
interface UseSessionStreamResult {
|
|
242
|
+
/** All messages in the session (fetched + streaming). */
|
|
243
|
+
messages: SessionMessage[];
|
|
244
|
+
/** Part map: messageId → SessionPart[]. */
|
|
245
|
+
partMap: Record<string, SessionPart[]>;
|
|
246
|
+
/** Whether the agent is currently streaming a response. */
|
|
247
|
+
isStreaming: boolean;
|
|
248
|
+
/** Send a text message to the agent. */
|
|
249
|
+
send: (text: string) => Promise<void>;
|
|
250
|
+
/** Abort the current agent execution. */
|
|
251
|
+
abort: () => Promise<void>;
|
|
252
|
+
/** Refetch full message history from the API. */
|
|
253
|
+
refetch: () => Promise<void>;
|
|
254
|
+
/** Connection or stream error, if any. */
|
|
255
|
+
error: string | null;
|
|
256
|
+
/** Whether the SSE connection is active. */
|
|
257
|
+
connected: boolean;
|
|
258
|
+
}
|
|
259
|
+
/**
|
|
260
|
+
* Streams chat messages from a sidecar session gateway via SSE.
|
|
261
|
+
*
|
|
262
|
+
* Fetches existing message history on mount, then subscribes to SSE for
|
|
263
|
+
* real-time updates. Maps the sidecar's message format to agent-ui's
|
|
264
|
+
* SessionMessage + partMap format.
|
|
265
|
+
*/
|
|
266
|
+
declare function useSessionStream({ apiUrl, token, sessionId, enabled, }: UseSessionStreamOptions): UseSessionStreamResult;
|
|
267
|
+
|
|
268
|
+
interface UseDropdownMenuOptions {
|
|
269
|
+
closeOnEsc?: boolean;
|
|
270
|
+
}
|
|
271
|
+
declare function useDropdownMenu(options?: UseDropdownMenuOptions): {
|
|
272
|
+
open: boolean;
|
|
273
|
+
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
274
|
+
ref: React.RefObject<HTMLDivElement | null>;
|
|
275
|
+
toggle: () => void;
|
|
276
|
+
close: () => void;
|
|
277
|
+
};
|
|
278
|
+
|
|
279
|
+
interface UsePtySessionOptions {
|
|
280
|
+
/** Base URL of the sidecar (e.g. "http://localhost:9100"). */
|
|
281
|
+
apiUrl: string;
|
|
282
|
+
/** Bearer token for authentication. */
|
|
283
|
+
token: string;
|
|
284
|
+
/** Called with raw PTY output (may contain ANSI escape codes). */
|
|
285
|
+
onData: (data: string) => void;
|
|
286
|
+
}
|
|
287
|
+
interface UsePtySessionReturn {
|
|
288
|
+
/** Whether the SSE stream is connected and receiving data. */
|
|
289
|
+
isConnected: boolean;
|
|
290
|
+
/** Connection or API error, if any. */
|
|
291
|
+
error: string | null;
|
|
292
|
+
/** Send a command to the PTY session. */
|
|
293
|
+
sendCommand: (command: string) => Promise<void>;
|
|
294
|
+
/** Tear down and reconnect. */
|
|
295
|
+
reconnect: () => void;
|
|
296
|
+
}
|
|
297
|
+
/**
|
|
298
|
+
* Manages a PTY session against the sidecar terminal API.
|
|
299
|
+
*
|
|
300
|
+
* Protocol:
|
|
301
|
+
* - POST /terminals → create session → { data: { sessionId } }
|
|
302
|
+
* - GET /terminals/{id}/stream → SSE output (raw PTY with ANSI codes)
|
|
303
|
+
* - POST /terminals/{id}/execute → send command { command: "..." }
|
|
304
|
+
* - DELETE /terminals/{id} → close session
|
|
305
|
+
*/
|
|
306
|
+
declare function usePtySession({ apiUrl, token, onData }: UsePtySessionOptions): UsePtySessionReturn;
|
|
307
|
+
|
|
308
|
+
interface UseSidecarAuthOptions {
|
|
309
|
+
/** Scoping key for token storage (e.g. botId, sandboxId). */
|
|
310
|
+
resourceId: string;
|
|
311
|
+
/** Base URL of the sidecar or operator API. */
|
|
312
|
+
apiUrl: string;
|
|
313
|
+
/**
|
|
314
|
+
* Sign a plaintext message and return the hex signature.
|
|
315
|
+
* Consuming apps wire this to their wallet library (e.g. wagmi's signMessageAsync).
|
|
316
|
+
*/
|
|
317
|
+
signMessage: (message: string) => Promise<string>;
|
|
318
|
+
}
|
|
319
|
+
interface SidecarAuth {
|
|
320
|
+
token: string | null;
|
|
321
|
+
isAuthenticated: boolean;
|
|
322
|
+
isAuthenticating: boolean;
|
|
323
|
+
authenticate: () => Promise<string | null>;
|
|
324
|
+
clearCachedToken: () => void;
|
|
325
|
+
error: string | null;
|
|
326
|
+
}
|
|
327
|
+
/**
|
|
328
|
+
* Generic sidecar PASETO challenge/response auth.
|
|
329
|
+
*
|
|
330
|
+
* Flow:
|
|
331
|
+
* 1. POST /api/auth/challenge → { nonce, message, expires_at }
|
|
332
|
+
* 2. signMessage(message) → signature (provided by consuming app)
|
|
333
|
+
* 3. POST /api/auth/session → { token, address, expires_at }
|
|
334
|
+
*
|
|
335
|
+
* Tokens are cached in localStorage and auto-refreshed 5 minutes before expiry.
|
|
336
|
+
*/
|
|
337
|
+
declare function useSidecarAuth({ resourceId, apiUrl, signMessage }: UseSidecarAuthOptions): SidecarAuth;
|
|
338
|
+
|
|
339
|
+
export { type AgentStreamEvent as A, type BotStreamEvent as B, type ConnectionState as C, useToolCallStream as D, type SSEEvent as S, type TaskStreamEvent as T, type UseAuthOptions as U, type AuthUser as a, type AutomationStreamEvent as b, type SessionInfo as c, type SidecarAuth as d, type TerminalStreamEvent as e, type UseAuthResult as f, type UsePtySessionOptions as g, type UsePtySessionReturn as h, type UseRunGroupsOptions as i, type UseSSEStreamOptions as j, type UseSSEStreamResult as k, type UseSessionStreamOptions as l, type UseSessionStreamResult as m, type UseSidecarAuthOptions as n, type UseToolCallStreamReturn as o, createAuthFetcher as p, useAuth as q, useAutoScroll as r, useDropdownMenu as s, usePtySession as t, useApiKey as u, useRunCollapseState as v, useRunGroups as w, useSSEStream as x, useSessionStream as y, useSidecarAuth as z };
|
package/dist/utils.d.ts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { b as ToolPart } from './parts-CyGkM6Fp.js';
|
|
2
|
+
import { T as ToolDisplayMetadata } from './tool-display-BvsVW_Ur.js';
|
|
3
|
+
import { T as ToolCategory } from './run-CtFZ6s-D.js';
|
|
4
|
+
import { ClassValue } from 'clsx';
|
|
5
|
+
import 'react';
|
|
6
|
+
|
|
7
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Copy text to clipboard with a non-secure-context fallback.
|
|
11
|
+
* Returns true if a copy strategy likely succeeded.
|
|
12
|
+
*/
|
|
13
|
+
declare function copyText(text: string): Promise<boolean>;
|
|
14
|
+
|
|
15
|
+
/** Format a duration in milliseconds to a human-readable string. */
|
|
16
|
+
declare function formatDuration(ms: number): string;
|
|
17
|
+
/** Truncate text to `max` characters, appending "..." if truncated. */
|
|
18
|
+
declare function truncateText(text: string, max: number): string;
|
|
19
|
+
|
|
20
|
+
declare function timeAgo(ts: number): string;
|
|
21
|
+
|
|
22
|
+
declare const TOOL_CATEGORY_ICONS: Record<ToolCategory, string>;
|
|
23
|
+
declare function getToolCategory(toolName: string): ToolCategory;
|
|
24
|
+
declare function getToolDisplayMetadata(part: ToolPart): ToolDisplayMetadata;
|
|
25
|
+
/** Extract error text from a tool part, if any. */
|
|
26
|
+
declare function getToolErrorText(part: ToolPart, fallback?: string): string | undefined;
|
|
27
|
+
|
|
28
|
+
export { TOOL_CATEGORY_ICONS, cn, copyText, formatDuration, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText };
|