@getcatalystiq/agent-plane-ui 0.1.30 → 0.1.31
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/dist/index.cjs +641 -258
- package/dist/index.d.cts +75 -2
- package/dist/index.d.ts +75 -2
- package/dist/index.js +394 -24
- package/package.json +2 -1
package/dist/index.cjs
CHANGED
|
@@ -2,13 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
var chunkVZ43ATC5_cjs = require('./chunk-VZ43ATC5.cjs');
|
|
4
4
|
var chunkXXF4U7WL_cjs = require('./chunk-XXF4U7WL.cjs');
|
|
5
|
+
var React4 = require('react');
|
|
5
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var React = require('react');
|
|
7
7
|
var swr = require('swr');
|
|
8
8
|
var ReactMarkdown = require('react-markdown');
|
|
9
9
|
var cmdk = require('cmdk');
|
|
10
10
|
var Popover = require('@radix-ui/react-popover');
|
|
11
11
|
var remarkGfm = require('remark-gfm');
|
|
12
|
+
var ToastPrimitives = require('@radix-ui/react-toast');
|
|
13
|
+
var classVarianceAuthority = require('class-variance-authority');
|
|
12
14
|
|
|
13
15
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
16
|
|
|
@@ -30,11 +32,70 @@ function _interopNamespace(e) {
|
|
|
30
32
|
return Object.freeze(n);
|
|
31
33
|
}
|
|
32
34
|
|
|
33
|
-
var
|
|
35
|
+
var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
|
|
34
36
|
var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
|
|
35
37
|
var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
|
|
36
38
|
var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
|
|
39
|
+
var ToastPrimitives__namespace = /*#__PURE__*/_interopNamespace(ToastPrimitives);
|
|
37
40
|
|
|
41
|
+
var ACTIVE_STATUSES = /* @__PURE__ */ new Set(["running", "pending"]);
|
|
42
|
+
function useRunStream(runId, status) {
|
|
43
|
+
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
44
|
+
const [events, setEvents] = React4.useState([]);
|
|
45
|
+
const [isStreaming, setIsStreaming] = React4.useState(false);
|
|
46
|
+
const [terminalEvent, setTerminalEvent] = React4.useState(null);
|
|
47
|
+
const [streamingText, setStreamingText] = React4.useState("");
|
|
48
|
+
const [error, setError] = React4.useState(null);
|
|
49
|
+
const abortRef = React4.useRef(null);
|
|
50
|
+
const startStream = React4.useCallback(async (id, signal) => {
|
|
51
|
+
setIsStreaming(true);
|
|
52
|
+
setError(null);
|
|
53
|
+
try {
|
|
54
|
+
const stream = await client.runs.stream(id, { signal });
|
|
55
|
+
for await (const event of stream) {
|
|
56
|
+
if (signal.aborted) break;
|
|
57
|
+
if (event.type === "text_delta") {
|
|
58
|
+
const text = event.text ?? "";
|
|
59
|
+
setStreamingText((prev) => prev + text);
|
|
60
|
+
continue;
|
|
61
|
+
}
|
|
62
|
+
if (event.type === "assistant") {
|
|
63
|
+
setStreamingText("");
|
|
64
|
+
}
|
|
65
|
+
if (event.type === "stream_detached") {
|
|
66
|
+
continue;
|
|
67
|
+
}
|
|
68
|
+
setEvents((prev) => [...prev, event]);
|
|
69
|
+
if (event.type === "result" || event.type === "error") {
|
|
70
|
+
setTerminalEvent(event);
|
|
71
|
+
setIsStreaming(false);
|
|
72
|
+
setStreamingText("");
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
setIsStreaming(false);
|
|
77
|
+
} catch (err) {
|
|
78
|
+
if (signal.aborted) return;
|
|
79
|
+
setError(err instanceof Error ? err : new Error(String(err)));
|
|
80
|
+
setIsStreaming(false);
|
|
81
|
+
}
|
|
82
|
+
}, [client]);
|
|
83
|
+
React4.useEffect(() => {
|
|
84
|
+
if (!runId || !ACTIVE_STATUSES.has(status)) {
|
|
85
|
+
setIsStreaming(false);
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
88
|
+
if (terminalEvent) return;
|
|
89
|
+
const controller = new AbortController();
|
|
90
|
+
abortRef.current = controller;
|
|
91
|
+
startStream(runId, controller.signal);
|
|
92
|
+
return () => {
|
|
93
|
+
controller.abort();
|
|
94
|
+
abortRef.current = null;
|
|
95
|
+
};
|
|
96
|
+
}, [runId, status, startStream, terminalEvent]);
|
|
97
|
+
return { events, isStreaming, terminalEvent, streamingText, error };
|
|
98
|
+
}
|
|
38
99
|
function Select({ className = "", ...props }) {
|
|
39
100
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
|
|
40
101
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -51,7 +112,7 @@ function Select({ className = "", ...props }) {
|
|
|
51
112
|
] }) })
|
|
52
113
|
] });
|
|
53
114
|
}
|
|
54
|
-
var Textarea =
|
|
115
|
+
var Textarea = React4__namespace.forwardRef(
|
|
55
116
|
({ className, ...props }, ref) => {
|
|
56
117
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
57
118
|
"textarea",
|
|
@@ -157,7 +218,7 @@ function PaginationBar({
|
|
|
157
218
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-t border-border bg-muted/20 text-sm", children: [
|
|
158
219
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
|
|
159
220
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Rows per page:" }),
|
|
160
|
-
PAGE_SIZE_OPTIONS.map((ps) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
221
|
+
PAGE_SIZE_OPTIONS.map((ps) => /* @__PURE__ */ jsxRuntime.jsx(React4__namespace.default.Fragment, { children: renderLink(
|
|
161
222
|
buildHref(1, ps),
|
|
162
223
|
ps,
|
|
163
224
|
`px-2 py-0.5 rounded text-xs ${pageSize === ps ? "bg-primary text-primary-foreground font-medium" : "hover:bg-muted"}`
|
|
@@ -188,7 +249,7 @@ function parsePaginationParams(pageParam, pageSizeParam, defaultPageSize = 20) {
|
|
|
188
249
|
return { page, pageSize, offset };
|
|
189
250
|
}
|
|
190
251
|
function Tabs({ tabs, defaultTab = 0 }) {
|
|
191
|
-
const [active, setActive] =
|
|
252
|
+
const [active, setActive] = React4.useState(defaultTab);
|
|
192
253
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
193
254
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-4", children: tabs.map((tab, i) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
194
255
|
"button",
|
|
@@ -230,7 +291,7 @@ function ConfirmDialog({
|
|
|
230
291
|
] }) });
|
|
231
292
|
}
|
|
232
293
|
function CopyButton({ text, className = "" }) {
|
|
233
|
-
const [copied, setCopied] =
|
|
294
|
+
const [copied, setCopied] = React4.useState(false);
|
|
234
295
|
async function handleCopy() {
|
|
235
296
|
await navigator.clipboard.writeText(text);
|
|
236
297
|
setCopied(true);
|
|
@@ -323,6 +384,102 @@ function DashboardPage({ initialData, chartComponent: ChartComponent }) {
|
|
|
323
384
|
ChartComponent && /* @__PURE__ */ jsxRuntime.jsx(ChartComponent, { stats: daily_stats })
|
|
324
385
|
] });
|
|
325
386
|
}
|
|
387
|
+
var TOAST_LIMIT = 5;
|
|
388
|
+
var TOAST_REMOVE_DELAY = 1e6;
|
|
389
|
+
var count = 0;
|
|
390
|
+
function genId() {
|
|
391
|
+
count = (count + 1) % Number.MAX_SAFE_INTEGER;
|
|
392
|
+
return count.toString();
|
|
393
|
+
}
|
|
394
|
+
var toastTimeouts = /* @__PURE__ */ new Map();
|
|
395
|
+
function addToRemoveQueue(toastId) {
|
|
396
|
+
if (toastTimeouts.has(toastId)) return;
|
|
397
|
+
const timeout = setTimeout(() => {
|
|
398
|
+
toastTimeouts.delete(toastId);
|
|
399
|
+
dispatch({ type: "REMOVE_TOAST", toastId });
|
|
400
|
+
}, TOAST_REMOVE_DELAY);
|
|
401
|
+
toastTimeouts.set(toastId, timeout);
|
|
402
|
+
}
|
|
403
|
+
function reducer(state, action) {
|
|
404
|
+
switch (action.type) {
|
|
405
|
+
case "ADD_TOAST":
|
|
406
|
+
return {
|
|
407
|
+
...state,
|
|
408
|
+
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
|
|
409
|
+
};
|
|
410
|
+
case "UPDATE_TOAST":
|
|
411
|
+
return {
|
|
412
|
+
...state,
|
|
413
|
+
toasts: state.toasts.map(
|
|
414
|
+
(t) => t.id === action.toast.id ? { ...t, ...action.toast } : t
|
|
415
|
+
)
|
|
416
|
+
};
|
|
417
|
+
case "DISMISS_TOAST": {
|
|
418
|
+
const { toastId } = action;
|
|
419
|
+
if (toastId) {
|
|
420
|
+
addToRemoveQueue(toastId);
|
|
421
|
+
} else {
|
|
422
|
+
state.toasts.forEach((t) => addToRemoveQueue(t.id));
|
|
423
|
+
}
|
|
424
|
+
return {
|
|
425
|
+
...state,
|
|
426
|
+
toasts: state.toasts.map(
|
|
427
|
+
(t) => t.id === toastId || toastId === void 0 ? { ...t, open: false } : t
|
|
428
|
+
)
|
|
429
|
+
};
|
|
430
|
+
}
|
|
431
|
+
case "REMOVE_TOAST":
|
|
432
|
+
if (action.toastId === void 0) {
|
|
433
|
+
return { ...state, toasts: [] };
|
|
434
|
+
}
|
|
435
|
+
return {
|
|
436
|
+
...state,
|
|
437
|
+
toasts: state.toasts.filter((t) => t.id !== action.toastId)
|
|
438
|
+
};
|
|
439
|
+
}
|
|
440
|
+
}
|
|
441
|
+
var listeners = [];
|
|
442
|
+
var memoryState = { toasts: [] };
|
|
443
|
+
function dispatch(action) {
|
|
444
|
+
memoryState = reducer(memoryState, action);
|
|
445
|
+
listeners.forEach((listener) => listener(memoryState));
|
|
446
|
+
}
|
|
447
|
+
function toast(props) {
|
|
448
|
+
const id = genId();
|
|
449
|
+
const update = (updateProps) => dispatch({ type: "UPDATE_TOAST", toast: { ...updateProps, id } });
|
|
450
|
+
const dismiss2 = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
|
|
451
|
+
dispatch({
|
|
452
|
+
type: "ADD_TOAST",
|
|
453
|
+
toast: {
|
|
454
|
+
...props,
|
|
455
|
+
id,
|
|
456
|
+
open: true,
|
|
457
|
+
onOpenChange: (open) => {
|
|
458
|
+
if (!open) dismiss2();
|
|
459
|
+
}
|
|
460
|
+
}
|
|
461
|
+
});
|
|
462
|
+
return { id, dismiss: dismiss2, update };
|
|
463
|
+
}
|
|
464
|
+
function dismiss(toastId) {
|
|
465
|
+
const action = toastId !== void 0 ? { type: "DISMISS_TOAST", toastId } : { type: "DISMISS_TOAST" };
|
|
466
|
+
dispatch(action);
|
|
467
|
+
}
|
|
468
|
+
function useToast() {
|
|
469
|
+
const [state, setState] = React4__namespace.useState(memoryState);
|
|
470
|
+
React4__namespace.useEffect(() => {
|
|
471
|
+
listeners.push(setState);
|
|
472
|
+
return () => {
|
|
473
|
+
const index = listeners.indexOf(setState);
|
|
474
|
+
if (index > -1) listeners.splice(index, 1);
|
|
475
|
+
};
|
|
476
|
+
}, [state]);
|
|
477
|
+
return {
|
|
478
|
+
...state,
|
|
479
|
+
toast,
|
|
480
|
+
dismiss
|
|
481
|
+
};
|
|
482
|
+
}
|
|
326
483
|
var SOURCES = [
|
|
327
484
|
{ value: "", label: "All Sources" },
|
|
328
485
|
{ value: "api", label: "API" },
|
|
@@ -332,11 +489,18 @@ var SOURCES = [
|
|
|
332
489
|
{ value: "a2a", label: "A2A" }
|
|
333
490
|
];
|
|
334
491
|
var VALID_SOURCES = SOURCES.filter((s) => s.value).map((s) => s.value);
|
|
492
|
+
var ACTIVE_STATUSES2 = /* @__PURE__ */ new Set(["running", "pending"]);
|
|
493
|
+
var TERMINAL_STATUSES = /* @__PURE__ */ new Set(["completed", "failed", "cancelled", "timed_out"]);
|
|
335
494
|
function RunListPage({ initialData }) {
|
|
336
495
|
const { LinkComponent, basePath } = chunkXXF4U7WL_cjs.useNavigation();
|
|
337
|
-
const
|
|
338
|
-
const [
|
|
339
|
-
const [
|
|
496
|
+
const { toast: toast2 } = useToast();
|
|
497
|
+
const [page, setPage] = React4.useState(1);
|
|
498
|
+
const [pageSize, setPageSize] = React4.useState(20);
|
|
499
|
+
const [sourceFilter, setSourceFilter] = React4.useState(null);
|
|
500
|
+
const prevStatusesRef = React4.useRef(/* @__PURE__ */ new Map());
|
|
501
|
+
const [activeRunsExist, setActiveRunsExist] = React4.useState(
|
|
502
|
+
() => initialData?.data?.some((r) => ACTIVE_STATUSES2.has(r.status)) ?? false
|
|
503
|
+
);
|
|
340
504
|
const cacheKey = `runs-${page}-${pageSize}-${sourceFilter || "all"}`;
|
|
341
505
|
const { data, error, isLoading } = chunkVZ43ATC5_cjs.useApi(
|
|
342
506
|
cacheKey,
|
|
@@ -347,14 +511,35 @@ function RunListPage({ initialData }) {
|
|
|
347
511
|
...sourceFilter ? { triggered_by: sourceFilter } : {}
|
|
348
512
|
});
|
|
349
513
|
},
|
|
350
|
-
|
|
514
|
+
{
|
|
515
|
+
...initialData ? { fallbackData: initialData } : {},
|
|
516
|
+
refreshInterval: activeRunsExist ? 5e3 : 0
|
|
517
|
+
}
|
|
351
518
|
);
|
|
352
|
-
|
|
519
|
+
React4.useEffect(() => {
|
|
520
|
+
if (!data?.data) return;
|
|
521
|
+
const prev = prevStatusesRef.current;
|
|
522
|
+
const next = /* @__PURE__ */ new Map();
|
|
523
|
+
for (const run of data.data) {
|
|
524
|
+
next.set(run.id, run.status);
|
|
525
|
+
const oldStatus = prev.get(run.id);
|
|
526
|
+
if (oldStatus && ACTIVE_STATUSES2.has(oldStatus) && TERMINAL_STATUSES.has(run.status)) {
|
|
527
|
+
toast2({
|
|
528
|
+
title: `Run ${run.status}`,
|
|
529
|
+
description: run.agent_name,
|
|
530
|
+
variant: run.status === "completed" ? "success" : "destructive"
|
|
531
|
+
});
|
|
532
|
+
}
|
|
533
|
+
}
|
|
534
|
+
prevStatusesRef.current = next;
|
|
535
|
+
setActiveRunsExist(data.data.some((r) => ACTIVE_STATUSES2.has(r.status)));
|
|
536
|
+
}, [data, toast2]);
|
|
537
|
+
const handleSourceChange = React4.useCallback((e) => {
|
|
353
538
|
const value = e.target.value;
|
|
354
539
|
setSourceFilter(VALID_SOURCES.includes(value) ? value : null);
|
|
355
540
|
setPage(1);
|
|
356
541
|
}, []);
|
|
357
|
-
const handlePaginationNavigate =
|
|
542
|
+
const handlePaginationNavigate = React4.useCallback((href) => {
|
|
358
543
|
const url = new URL(href, "http://localhost");
|
|
359
544
|
const p = parseInt(url.searchParams.get("page") || "1", 10);
|
|
360
545
|
const ps = parseInt(url.searchParams.get("pageSize") || "20", 10);
|
|
@@ -529,17 +714,51 @@ function buildConversation(events) {
|
|
|
529
714
|
}
|
|
530
715
|
return items;
|
|
531
716
|
}
|
|
532
|
-
function TranscriptViewer({ transcript, prompt }) {
|
|
533
|
-
const conversation =
|
|
717
|
+
function TranscriptViewer({ transcript, prompt, isStreaming = false }) {
|
|
718
|
+
const conversation = React4.useMemo(() => buildConversation(transcript), [transcript]);
|
|
719
|
+
const scrollContainerRef = React4.useRef(null);
|
|
720
|
+
const sentinelRef = React4.useRef(null);
|
|
721
|
+
const userHasScrolledUpRef = React4.useRef(false);
|
|
722
|
+
const [userHasScrolledUp, setUserHasScrolledUp] = React4.useState(false);
|
|
723
|
+
const handleScroll = React4.useCallback(() => {
|
|
724
|
+
const el = scrollContainerRef.current;
|
|
725
|
+
if (!el) return;
|
|
726
|
+
const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 50;
|
|
727
|
+
if (atBottom) {
|
|
728
|
+
userHasScrolledUpRef.current = false;
|
|
729
|
+
setUserHasScrolledUp(false);
|
|
730
|
+
} else {
|
|
731
|
+
userHasScrolledUpRef.current = true;
|
|
732
|
+
setUserHasScrolledUp(true);
|
|
733
|
+
}
|
|
734
|
+
}, []);
|
|
735
|
+
React4.useEffect(() => {
|
|
736
|
+
if (isStreaming && !userHasScrolledUpRef.current) {
|
|
737
|
+
sentinelRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
738
|
+
}
|
|
739
|
+
}, [transcript.length, isStreaming]);
|
|
534
740
|
return /* @__PURE__ */ jsxRuntime.jsxs(chunkVZ43ATC5_cjs.Card, { children: [
|
|
535
741
|
/* @__PURE__ */ jsxRuntime.jsx(chunkVZ43ATC5_cjs.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(chunkVZ43ATC5_cjs.CardTitle, { className: "text-base", children: "Transcript" }) }),
|
|
536
|
-
/* @__PURE__ */ jsxRuntime.
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
742
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunkVZ43ATC5_cjs.CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
743
|
+
"div",
|
|
744
|
+
{
|
|
745
|
+
ref: scrollContainerRef,
|
|
746
|
+
onScroll: isStreaming ? handleScroll : void 0,
|
|
747
|
+
className: "space-y-3 overflow-y-auto px-6 pb-6",
|
|
748
|
+
children: [
|
|
749
|
+
prompt && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-border bg-muted/20 px-4 py-3", children: [
|
|
750
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Prompt" }),
|
|
751
|
+
/* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs font-mono whitespace-pre-wrap", children: prompt })
|
|
752
|
+
] }),
|
|
753
|
+
transcript.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No transcript available" }) : /* @__PURE__ */ jsxRuntime.jsx(ConversationView, { items: conversation }),
|
|
754
|
+
isStreaming && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-4 py-2 text-xs text-muted-foreground", children: [
|
|
755
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 rounded-full bg-blue-400 animate-pulse" }),
|
|
756
|
+
"Streaming..."
|
|
757
|
+
] }),
|
|
758
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { ref: sentinelRef })
|
|
759
|
+
]
|
|
760
|
+
}
|
|
761
|
+
) })
|
|
543
762
|
] });
|
|
544
763
|
}
|
|
545
764
|
function ConversationView({ items }) {
|
|
@@ -563,7 +782,7 @@ function ConversationView({ items }) {
|
|
|
563
782
|
}) });
|
|
564
783
|
}
|
|
565
784
|
function A2AIncomingItem({ item }) {
|
|
566
|
-
const [expanded, setExpanded] =
|
|
785
|
+
const [expanded, setExpanded] = React4.useState(false);
|
|
567
786
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-border bg-muted/30 overflow-hidden", children: [
|
|
568
787
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
569
788
|
"button",
|
|
@@ -589,7 +808,7 @@ function A2AIncomingItem({ item }) {
|
|
|
589
808
|
] });
|
|
590
809
|
}
|
|
591
810
|
function SystemItem({ item }) {
|
|
592
|
-
const [expanded, setExpanded] =
|
|
811
|
+
const [expanded, setExpanded] = React4.useState(false);
|
|
593
812
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-border bg-muted/30 overflow-hidden", children: [
|
|
594
813
|
/* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: () => setExpanded(!expanded), className: "w-full flex items-center gap-2 px-4 py-2 text-left hover:bg-muted/50 transition-colors", children: [
|
|
595
814
|
/* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Badge, { variant: "outline", className: "text-[10px]", children: "system" }),
|
|
@@ -618,7 +837,7 @@ function SystemItem({ item }) {
|
|
|
618
837
|
] });
|
|
619
838
|
}
|
|
620
839
|
function AssistantItem({ item }) {
|
|
621
|
-
const [expanded, setExpanded] =
|
|
840
|
+
const [expanded, setExpanded] = React4.useState(false);
|
|
622
841
|
const preview = item.text?.split("\n")[0]?.slice(0, 120) ?? "";
|
|
623
842
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-border overflow-hidden", children: [
|
|
624
843
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -637,7 +856,7 @@ function AssistantItem({ item }) {
|
|
|
637
856
|
] });
|
|
638
857
|
}
|
|
639
858
|
function ToolItem({ item }) {
|
|
640
|
-
const [expanded, setExpanded] =
|
|
859
|
+
const [expanded, setExpanded] = React4.useState(false);
|
|
641
860
|
const hasOutput = item.toolOutput && item.toolOutput.length > 0;
|
|
642
861
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-border overflow-hidden", children: [
|
|
643
862
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -693,6 +912,7 @@ function ErrorItem({ item }) {
|
|
|
693
912
|
}
|
|
694
913
|
function RunDetailPage({ runId, initialData, initialTranscript }) {
|
|
695
914
|
const { mutate } = swr.useSWRConfig();
|
|
915
|
+
const { toast: toast2 } = useToast();
|
|
696
916
|
const { data: run, error, isLoading } = chunkVZ43ATC5_cjs.useApi(
|
|
697
917
|
`run-${runId}`,
|
|
698
918
|
(client) => client.runs.get(runId),
|
|
@@ -703,6 +923,20 @@ function RunDetailPage({ runId, initialData, initialTranscript }) {
|
|
|
703
923
|
(client) => client.runs.transcriptArray(runId),
|
|
704
924
|
initialTranscript ? { fallbackData: initialTranscript } : void 0
|
|
705
925
|
);
|
|
926
|
+
const isActive = run?.status === "running" || run?.status === "pending";
|
|
927
|
+
const { events, isStreaming, terminalEvent, streamingText } = useRunStream(
|
|
928
|
+
runId,
|
|
929
|
+
run?.status ?? ""
|
|
930
|
+
);
|
|
931
|
+
React4.useEffect(() => {
|
|
932
|
+
if (!terminalEvent) return;
|
|
933
|
+
toast2({
|
|
934
|
+
title: terminalEvent.type === "result" ? "Run completed" : "Run failed",
|
|
935
|
+
variant: terminalEvent.type === "result" ? "success" : "destructive"
|
|
936
|
+
});
|
|
937
|
+
mutate(`run-${runId}`);
|
|
938
|
+
mutate(`transcript-${runId}`);
|
|
939
|
+
}, [terminalEvent, toast2, mutate, runId]);
|
|
706
940
|
if (error) {
|
|
707
941
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-[40vh]", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-destructive", children: [
|
|
708
942
|
"Failed to load run: ",
|
|
@@ -735,16 +969,26 @@ function RunDetailPage({ runId, initialData, initialTranscript }) {
|
|
|
735
969
|
] }),
|
|
736
970
|
/* @__PURE__ */ jsxRuntime.jsx(MetricCard, { label: "Cost", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
|
|
737
971
|
"$",
|
|
738
|
-
|
|
972
|
+
(() => {
|
|
973
|
+
const cost = terminalEvent?.cost_usd ?? run.cost_usd;
|
|
974
|
+
return cost != null ? Number(cost).toFixed(4) : "\u2014";
|
|
975
|
+
})()
|
|
739
976
|
] }) }),
|
|
740
|
-
/* @__PURE__ */ jsxRuntime.jsx(MetricCard, { label: "Turns", children: run.num_turns }),
|
|
741
|
-
/* @__PURE__ */ jsxRuntime.jsx(MetricCard, { label: "Duration", children:
|
|
977
|
+
/* @__PURE__ */ jsxRuntime.jsx(MetricCard, { label: "Turns", children: terminalEvent?.num_turns ?? run.num_turns }),
|
|
978
|
+
/* @__PURE__ */ jsxRuntime.jsx(MetricCard, { label: "Duration", children: (() => {
|
|
979
|
+
const ms = terminalEvent?.duration_ms ?? run.duration_ms;
|
|
980
|
+
return ms > 0 ? `${(ms / 1e3).toFixed(1)}s` : "\u2014";
|
|
981
|
+
})() }),
|
|
742
982
|
/* @__PURE__ */ jsxRuntime.jsxs(MetricCard, { label: "Tokens", children: [
|
|
743
|
-
(
|
|
983
|
+
(() => {
|
|
984
|
+
const inTok = terminalEvent?.total_input_tokens ?? run.total_input_tokens;
|
|
985
|
+
const outTok = terminalEvent?.total_output_tokens ?? run.total_output_tokens;
|
|
986
|
+
return (inTok + outTok).toLocaleString();
|
|
987
|
+
})(),
|
|
744
988
|
/* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground mt-0.5 font-normal", children: [
|
|
745
|
-
run.total_input_tokens.toLocaleString(),
|
|
989
|
+
(terminalEvent?.total_input_tokens ?? run.total_input_tokens).toLocaleString(),
|
|
746
990
|
" in / ",
|
|
747
|
-
run.total_output_tokens.toLocaleString(),
|
|
991
|
+
(terminalEvent?.total_output_tokens ?? run.total_output_tokens).toLocaleString(),
|
|
748
992
|
" out"
|
|
749
993
|
] })
|
|
750
994
|
] })
|
|
@@ -756,7 +1000,18 @@ function RunDetailPage({ runId, initialData, initialTranscript }) {
|
|
|
756
1000
|
run.error_messages.map((msg, i) => /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "whitespace-pre-wrap text-sm text-destructive font-mono bg-destructive/10 rounded-md p-3", children: msg }, i))
|
|
757
1001
|
] })
|
|
758
1002
|
] }),
|
|
759
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1003
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1004
|
+
TranscriptViewer,
|
|
1005
|
+
{
|
|
1006
|
+
transcript: isActive && isStreaming ? events : transcript || [],
|
|
1007
|
+
prompt: run.prompt,
|
|
1008
|
+
isStreaming: isActive && isStreaming
|
|
1009
|
+
}
|
|
1010
|
+
),
|
|
1011
|
+
isActive && streamingText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border bg-muted/30 p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("pre", { className: "whitespace-pre-wrap text-sm font-mono", children: [
|
|
1012
|
+
streamingText,
|
|
1013
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-2 h-4 ml-0.5 bg-foreground/70 animate-pulse align-text-bottom" })
|
|
1014
|
+
] }) }),
|
|
760
1015
|
/* @__PURE__ */ jsxRuntime.jsx(chunkVZ43ATC5_cjs.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
|
|
761
1016
|
/* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex items-center justify-between px-6 py-4 cursor-pointer list-none hover:bg-muted/30 transition-colors rounded-xl", children: [
|
|
762
1017
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-semibold", children: "Metadata" }),
|
|
@@ -782,8 +1037,8 @@ function RunDetailPage({ runId, initialData, initialTranscript }) {
|
|
|
782
1037
|
] });
|
|
783
1038
|
}
|
|
784
1039
|
function CancelRunButton({ runId, onCancelled }) {
|
|
785
|
-
const [open, setOpen] =
|
|
786
|
-
const [cancelling, setCancelling] =
|
|
1040
|
+
const [open, setOpen] = React4.useState(false);
|
|
1041
|
+
const [cancelling, setCancelling] = React4.useState(false);
|
|
787
1042
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
788
1043
|
async function handleConfirm() {
|
|
789
1044
|
setCancelling(true);
|
|
@@ -836,17 +1091,17 @@ function McpServerListPage({ initialData }) {
|
|
|
836
1091
|
(c) => c.customConnectors.listServers(),
|
|
837
1092
|
initialData ? { fallbackData: initialData } : void 0
|
|
838
1093
|
);
|
|
839
|
-
const [showCreate, setShowCreate] =
|
|
840
|
-
const [creating, setCreating] =
|
|
841
|
-
const [createForm, setCreateForm] =
|
|
842
|
-
const [createError, setCreateError] =
|
|
843
|
-
const [editTarget, setEditTarget] =
|
|
844
|
-
const [editing, setEditing] =
|
|
845
|
-
const [editForm, setEditForm] =
|
|
846
|
-
const [editError, setEditError] =
|
|
847
|
-
const [deleteTarget, setDeleteTarget] =
|
|
848
|
-
const [deleting, setDeleting] =
|
|
849
|
-
const [deleteError, setDeleteError] =
|
|
1094
|
+
const [showCreate, setShowCreate] = React4.useState(false);
|
|
1095
|
+
const [creating, setCreating] = React4.useState(false);
|
|
1096
|
+
const [createForm, setCreateForm] = React4.useState(emptyForm);
|
|
1097
|
+
const [createError, setCreateError] = React4.useState("");
|
|
1098
|
+
const [editTarget, setEditTarget] = React4.useState(null);
|
|
1099
|
+
const [editing, setEditing] = React4.useState(false);
|
|
1100
|
+
const [editForm, setEditForm] = React4.useState({ name: "", description: "" });
|
|
1101
|
+
const [editError, setEditError] = React4.useState("");
|
|
1102
|
+
const [deleteTarget, setDeleteTarget] = React4.useState(null);
|
|
1103
|
+
const [deleting, setDeleting] = React4.useState(false);
|
|
1104
|
+
const [deleteError, setDeleteError] = React4.useState("");
|
|
850
1105
|
async function handleCreate() {
|
|
851
1106
|
setCreating(true);
|
|
852
1107
|
setCreateError("");
|
|
@@ -1029,13 +1284,13 @@ function PluginMarketplaceListPage({ initialData }) {
|
|
|
1029
1284
|
(c) => c.pluginMarketplaces.list(),
|
|
1030
1285
|
initialData ? { fallbackData: initialData } : void 0
|
|
1031
1286
|
);
|
|
1032
|
-
const [showAdd, setShowAdd] =
|
|
1033
|
-
const [adding, setAdding] =
|
|
1034
|
-
const [addError, setAddError] =
|
|
1035
|
-
const [newMarketplace, setNewMarketplace] =
|
|
1036
|
-
const [deleteTarget, setDeleteTarget] =
|
|
1037
|
-
const [deleting, setDeleting] =
|
|
1038
|
-
const [deleteError, setDeleteError] =
|
|
1287
|
+
const [showAdd, setShowAdd] = React4.useState(false);
|
|
1288
|
+
const [adding, setAdding] = React4.useState(false);
|
|
1289
|
+
const [addError, setAddError] = React4.useState("");
|
|
1290
|
+
const [newMarketplace, setNewMarketplace] = React4.useState({ name: "", github_repo: "" });
|
|
1291
|
+
const [deleteTarget, setDeleteTarget] = React4.useState(null);
|
|
1292
|
+
const [deleting, setDeleting] = React4.useState(false);
|
|
1293
|
+
const [deleteError, setDeleteError] = React4.useState("");
|
|
1039
1294
|
function resetAddForm() {
|
|
1040
1295
|
setNewMarketplace({ name: "", github_repo: "" });
|
|
1041
1296
|
setAddError("");
|
|
@@ -1197,8 +1452,8 @@ function PluginMarketplaceDetailPage({ marketplaceId, initialData, initialPlugin
|
|
|
1197
1452
|
(c) => c.pluginMarketplaces.listPlugins(marketplaceId),
|
|
1198
1453
|
initialPlugins ? { fallbackData: initialPlugins } : void 0
|
|
1199
1454
|
);
|
|
1200
|
-
const [tokenInput, setTokenInput] =
|
|
1201
|
-
const [savingToken, setSavingToken] =
|
|
1455
|
+
const [tokenInput, setTokenInput] = React4.useState("");
|
|
1456
|
+
const [savingToken, setSavingToken] = React4.useState(false);
|
|
1202
1457
|
async function handleSaveToken() {
|
|
1203
1458
|
setSavingToken(true);
|
|
1204
1459
|
try {
|
|
@@ -1395,15 +1650,15 @@ function PluginDetailPage({ marketplaceId, pluginName }) {
|
|
|
1395
1650
|
`marketplace-${marketplaceId}-plugin-${pluginName}`,
|
|
1396
1651
|
(c) => c.pluginMarketplaces.getPlugin(marketplaceId, pluginName)
|
|
1397
1652
|
);
|
|
1398
|
-
const [editorState, setEditorState] =
|
|
1399
|
-
const [pluginFiles, setPluginFiles] =
|
|
1400
|
-
const [filesLoading, setFilesLoading] =
|
|
1401
|
-
const [filesError, setFilesError] =
|
|
1402
|
-
const [editedContent, setEditedContent] =
|
|
1403
|
-
const [saving, setSaving] =
|
|
1404
|
-
const [saveError, setSaveError] =
|
|
1405
|
-
const [saveSuccess, setSaveSuccess] =
|
|
1406
|
-
const fetchFiles =
|
|
1653
|
+
const [editorState, setEditorState] = React4.useState(null);
|
|
1654
|
+
const [pluginFiles, setPluginFiles] = React4.useState(null);
|
|
1655
|
+
const [filesLoading, setFilesLoading] = React4.useState(false);
|
|
1656
|
+
const [filesError, setFilesError] = React4.useState("");
|
|
1657
|
+
const [editedContent, setEditedContent] = React4.useState(/* @__PURE__ */ new Map());
|
|
1658
|
+
const [saving, setSaving] = React4.useState(false);
|
|
1659
|
+
const [saveError, setSaveError] = React4.useState("");
|
|
1660
|
+
const [saveSuccess, setSaveSuccess] = React4.useState("");
|
|
1661
|
+
const fetchFiles = React4.useCallback(async () => {
|
|
1407
1662
|
if (pluginFiles) return pluginFiles;
|
|
1408
1663
|
setFilesLoading(true);
|
|
1409
1664
|
setFilesError("");
|
|
@@ -1418,7 +1673,7 @@ function PluginDetailPage({ marketplaceId, pluginName }) {
|
|
|
1418
1673
|
setFilesLoading(false);
|
|
1419
1674
|
}
|
|
1420
1675
|
}, [client, marketplaceId, pluginName, pluginFiles]);
|
|
1421
|
-
const handleSelectAgent =
|
|
1676
|
+
const handleSelectAgent = React4.useCallback(async (filename) => {
|
|
1422
1677
|
if (editorState?.type === "agent" && editorState.identifier === filename) {
|
|
1423
1678
|
setEditorState(null);
|
|
1424
1679
|
return;
|
|
@@ -1430,7 +1685,7 @@ function PluginDetailPage({ marketplaceId, pluginName }) {
|
|
|
1430
1685
|
setEditorState({ type: "agent", identifier: filename });
|
|
1431
1686
|
}
|
|
1432
1687
|
}, [editorState, fetchFiles]);
|
|
1433
|
-
const handleSelectSkill =
|
|
1688
|
+
const handleSelectSkill = React4.useCallback(async (skill) => {
|
|
1434
1689
|
if (editorState?.type === "skill" && editorState.identifier === skill) {
|
|
1435
1690
|
setEditorState(null);
|
|
1436
1691
|
return;
|
|
@@ -1442,7 +1697,7 @@ function PluginDetailPage({ marketplaceId, pluginName }) {
|
|
|
1442
1697
|
setEditorState({ type: "skill", identifier: skill });
|
|
1443
1698
|
}
|
|
1444
1699
|
}, [editorState, fetchFiles]);
|
|
1445
|
-
const handleSelectConnector =
|
|
1700
|
+
const handleSelectConnector = React4.useCallback(async () => {
|
|
1446
1701
|
if (editorState?.type === "connector") {
|
|
1447
1702
|
setEditorState(null);
|
|
1448
1703
|
return;
|
|
@@ -1683,12 +1938,12 @@ function SettingsPage({ initialData, hideDangerZone }) {
|
|
|
1683
1938
|
}
|
|
1684
1939
|
function CompanyForm({ tenant, onSaved }) {
|
|
1685
1940
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
1686
|
-
const fileInputRef =
|
|
1687
|
-
const [name, setName] =
|
|
1688
|
-
const [budget, setBudget] =
|
|
1689
|
-
const [timezone, setTimezone] =
|
|
1690
|
-
const [logoUrl, setLogoUrl] =
|
|
1691
|
-
const [saving, setSaving] =
|
|
1941
|
+
const fileInputRef = React4.useRef(null);
|
|
1942
|
+
const [name, setName] = React4.useState(tenant.name);
|
|
1943
|
+
const [budget, setBudget] = React4.useState(tenant.monthly_budget_usd.toString());
|
|
1944
|
+
const [timezone, setTimezone] = React4.useState(tenant.timezone);
|
|
1945
|
+
const [logoUrl, setLogoUrl] = React4.useState(tenant.logo_url ?? "");
|
|
1946
|
+
const [saving, setSaving] = React4.useState(false);
|
|
1692
1947
|
const isDirty = name !== tenant.name || budget !== tenant.monthly_budget_usd.toString() || timezone !== tenant.timezone || (logoUrl || "") !== (tenant.logo_url ?? "");
|
|
1693
1948
|
async function handleSave() {
|
|
1694
1949
|
setSaving(true);
|
|
@@ -1762,13 +2017,13 @@ function CompanyForm({ tenant, onSaved }) {
|
|
|
1762
2017
|
}
|
|
1763
2018
|
function ApiKeysSection({ initialKeys, onChanged }) {
|
|
1764
2019
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
1765
|
-
const [creating, setCreating] =
|
|
1766
|
-
const [newKeyName, setNewKeyName] =
|
|
1767
|
-
const [showCreate, setShowCreate] =
|
|
1768
|
-
const [rawKey, setRawKey] =
|
|
1769
|
-
const [revokeTarget, setRevokeTarget] =
|
|
1770
|
-
const [revoking, setRevoking] =
|
|
1771
|
-
const [revokeError, setRevokeError] =
|
|
2020
|
+
const [creating, setCreating] = React4.useState(false);
|
|
2021
|
+
const [newKeyName, setNewKeyName] = React4.useState("default");
|
|
2022
|
+
const [showCreate, setShowCreate] = React4.useState(false);
|
|
2023
|
+
const [rawKey, setRawKey] = React4.useState(null);
|
|
2024
|
+
const [revokeTarget, setRevokeTarget] = React4.useState(null);
|
|
2025
|
+
const [revoking, setRevoking] = React4.useState(false);
|
|
2026
|
+
const [revokeError, setRevokeError] = React4.useState("");
|
|
1772
2027
|
async function handleCreate() {
|
|
1773
2028
|
setCreating(true);
|
|
1774
2029
|
try {
|
|
@@ -1889,9 +2144,9 @@ function ApiKeysSection({ initialKeys, onChanged }) {
|
|
|
1889
2144
|
function DangerZone({ tenantId, tenantName }) {
|
|
1890
2145
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
1891
2146
|
const { onNavigate, basePath } = chunkXXF4U7WL_cjs.useNavigation();
|
|
1892
|
-
const [open, setOpen] =
|
|
1893
|
-
const [deleting, setDeleting] =
|
|
1894
|
-
const [error, setError] =
|
|
2147
|
+
const [open, setOpen] = React4.useState(false);
|
|
2148
|
+
const [deleting, setDeleting] = React4.useState(false);
|
|
2149
|
+
const [error, setError] = React4.useState("");
|
|
1895
2150
|
async function handleDelete() {
|
|
1896
2151
|
setDeleting(true);
|
|
1897
2152
|
setError("");
|
|
@@ -1972,14 +2227,14 @@ var TAG_TITLES = {
|
|
|
1972
2227
|
};
|
|
1973
2228
|
function ModelSelector({ value, onChange, disabled }) {
|
|
1974
2229
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
1975
|
-
const [open, setOpen] =
|
|
1976
|
-
const [models, setModels] =
|
|
1977
|
-
const [loading, setLoading] =
|
|
1978
|
-
const [error, setError] =
|
|
1979
|
-
const [search, setSearch] =
|
|
1980
|
-
const [providerFilter, setProviderFilter] =
|
|
1981
|
-
const hasFetchedRef =
|
|
1982
|
-
|
|
2230
|
+
const [open, setOpen] = React4.useState(false);
|
|
2231
|
+
const [models, setModels] = React4.useState(null);
|
|
2232
|
+
const [loading, setLoading] = React4.useState(false);
|
|
2233
|
+
const [error, setError] = React4.useState(false);
|
|
2234
|
+
const [search, setSearch] = React4.useState("");
|
|
2235
|
+
const [providerFilter, setProviderFilter] = React4.useState("all");
|
|
2236
|
+
const hasFetchedRef = React4.useRef(false);
|
|
2237
|
+
React4.useEffect(() => {
|
|
1983
2238
|
if (!open || hasFetchedRef.current) return;
|
|
1984
2239
|
hasFetchedRef.current = true;
|
|
1985
2240
|
let cancelled = false;
|
|
@@ -2000,12 +2255,12 @@ function ModelSelector({ value, onChange, disabled }) {
|
|
|
2000
2255
|
cancelled = true;
|
|
2001
2256
|
};
|
|
2002
2257
|
}, [open, client]);
|
|
2003
|
-
const providers =
|
|
2258
|
+
const providers = React4.useMemo(() => {
|
|
2004
2259
|
if (!models) return [];
|
|
2005
2260
|
const set = new Set(models.map((m) => m.provider));
|
|
2006
2261
|
return Array.from(set).sort();
|
|
2007
2262
|
}, [models]);
|
|
2008
|
-
const grouped =
|
|
2263
|
+
const grouped = React4.useMemo(() => {
|
|
2009
2264
|
if (!models) return {};
|
|
2010
2265
|
let filtered = models;
|
|
2011
2266
|
if (providerFilter !== "all") {
|
|
@@ -2021,7 +2276,7 @@ function ModelSelector({ value, onChange, disabled }) {
|
|
|
2021
2276
|
}, [models, providerFilter]);
|
|
2022
2277
|
const selectedModel = models?.find((m) => m.id === value);
|
|
2023
2278
|
const displayName = selectedModel?.name || value || "Select model...";
|
|
2024
|
-
const searchMatchesAny =
|
|
2279
|
+
const searchMatchesAny = React4.useMemo(() => {
|
|
2025
2280
|
if (!search || !models) return true;
|
|
2026
2281
|
const lower = search.toLowerCase();
|
|
2027
2282
|
return models.some(
|
|
@@ -2176,10 +2431,10 @@ function ModelSelector({ value, onChange, disabled }) {
|
|
|
2176
2431
|
}
|
|
2177
2432
|
function AddAgentDialog({ onCreated }) {
|
|
2178
2433
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
2179
|
-
const [open, setOpen] =
|
|
2180
|
-
const [saving, setSaving] =
|
|
2181
|
-
const [error, setError] =
|
|
2182
|
-
const [form, setForm] =
|
|
2434
|
+
const [open, setOpen] = React4.useState(false);
|
|
2435
|
+
const [saving, setSaving] = React4.useState(false);
|
|
2436
|
+
const [error, setError] = React4.useState("");
|
|
2437
|
+
const [form, setForm] = React4.useState({
|
|
2183
2438
|
name: "",
|
|
2184
2439
|
description: "",
|
|
2185
2440
|
model: "claude-sonnet-4-6",
|
|
@@ -2348,9 +2603,9 @@ function AddAgentDialog({ onCreated }) {
|
|
|
2348
2603
|
}
|
|
2349
2604
|
function DeleteAgentButton({ agentId, agentName, onDeleted }) {
|
|
2350
2605
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
2351
|
-
const [open, setOpen] =
|
|
2352
|
-
const [deleting, setDeleting] =
|
|
2353
|
-
const [error, setError] =
|
|
2606
|
+
const [open, setOpen] = React4.useState(false);
|
|
2607
|
+
const [deleting, setDeleting] = React4.useState(false);
|
|
2608
|
+
const [error, setError] = React4.useState("");
|
|
2354
2609
|
async function handleDelete() {
|
|
2355
2610
|
setDeleting(true);
|
|
2356
2611
|
setError("");
|
|
@@ -2403,7 +2658,7 @@ function AgentListPage() {
|
|
|
2403
2658
|
(client) => client.agents.list()
|
|
2404
2659
|
);
|
|
2405
2660
|
const agents = data?.data ?? [];
|
|
2406
|
-
const invalidate =
|
|
2661
|
+
const invalidate = React4.useCallback(() => {
|
|
2407
2662
|
mutate("agents");
|
|
2408
2663
|
}, [mutate]);
|
|
2409
2664
|
if (isLoading) {
|
|
@@ -2450,17 +2705,17 @@ function AgentListPage() {
|
|
|
2450
2705
|
}
|
|
2451
2706
|
function AgentEditForm({ agent, onSaved }) {
|
|
2452
2707
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
2453
|
-
const [name, setName] =
|
|
2454
|
-
const [description, setDescription] =
|
|
2455
|
-
const [model, setModel] =
|
|
2456
|
-
const [runner, setRunner] =
|
|
2457
|
-
const [permissionMode, setPermissionMode] =
|
|
2458
|
-
const [maxTurns, setMaxTurns] =
|
|
2459
|
-
const [maxBudget, setMaxBudget] =
|
|
2460
|
-
const [maxRuntime, setMaxRuntime] =
|
|
2461
|
-
const [saving, setSaving] =
|
|
2708
|
+
const [name, setName] = React4.useState(agent.name);
|
|
2709
|
+
const [description, setDescription] = React4.useState(agent.description ?? "");
|
|
2710
|
+
const [model, setModel] = React4.useState(agent.model);
|
|
2711
|
+
const [runner, setRunner] = React4.useState(agent.runner ?? "");
|
|
2712
|
+
const [permissionMode, setPermissionMode] = React4.useState(agent.permission_mode);
|
|
2713
|
+
const [maxTurns, setMaxTurns] = React4.useState(agent.max_turns.toString());
|
|
2714
|
+
const [maxBudget, setMaxBudget] = React4.useState(agent.max_budget_usd.toString());
|
|
2715
|
+
const [maxRuntime, setMaxRuntime] = React4.useState(Math.floor(agent.max_runtime_seconds / 60).toString());
|
|
2716
|
+
const [saving, setSaving] = React4.useState(false);
|
|
2462
2717
|
const isDirty = name !== agent.name || description !== (agent.description ?? "") || model !== agent.model || runner !== (agent.runner ?? "") || permissionMode !== agent.permission_mode || maxTurns !== agent.max_turns.toString() || maxBudget !== agent.max_budget_usd.toString() || maxRuntime !== Math.floor(agent.max_runtime_seconds / 60).toString();
|
|
2463
|
-
const [error, setError] =
|
|
2718
|
+
const [error, setError] = React4.useState("");
|
|
2464
2719
|
async function handleSave() {
|
|
2465
2720
|
setSaving(true);
|
|
2466
2721
|
setError("");
|
|
@@ -2540,17 +2795,17 @@ function AgentEditForm({ agent, onSaved }) {
|
|
|
2540
2795
|
}
|
|
2541
2796
|
function ToolkitMultiselect({ value, onChange }) {
|
|
2542
2797
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
2543
|
-
const [open, setOpen] =
|
|
2544
|
-
const [search, setSearch] =
|
|
2545
|
-
const [toolkits, setToolkits] =
|
|
2546
|
-
const [loading, setLoading] =
|
|
2547
|
-
const containerRef =
|
|
2548
|
-
const searchRef =
|
|
2549
|
-
|
|
2798
|
+
const [open, setOpen] = React4.useState(false);
|
|
2799
|
+
const [search, setSearch] = React4.useState("");
|
|
2800
|
+
const [toolkits, setToolkits] = React4.useState([]);
|
|
2801
|
+
const [loading, setLoading] = React4.useState(true);
|
|
2802
|
+
const containerRef = React4.useRef(null);
|
|
2803
|
+
const searchRef = React4.useRef(null);
|
|
2804
|
+
React4.useEffect(() => {
|
|
2550
2805
|
client.composio.toolkits().then((data) => setToolkits(data)).catch(() => {
|
|
2551
2806
|
}).finally(() => setLoading(false));
|
|
2552
2807
|
}, [client]);
|
|
2553
|
-
|
|
2808
|
+
React4.useEffect(() => {
|
|
2554
2809
|
function handleClick(e) {
|
|
2555
2810
|
if (containerRef.current && !containerRef.current.contains(e.target)) {
|
|
2556
2811
|
setOpen(false);
|
|
@@ -2560,7 +2815,7 @@ function ToolkitMultiselect({ value, onChange }) {
|
|
|
2560
2815
|
document.addEventListener("mousedown", handleClick);
|
|
2561
2816
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
2562
2817
|
}, []);
|
|
2563
|
-
|
|
2818
|
+
React4.useEffect(() => {
|
|
2564
2819
|
searchRef.current?.focus();
|
|
2565
2820
|
}, []);
|
|
2566
2821
|
const filtered = toolkits.filter((t) => {
|
|
@@ -2666,12 +2921,12 @@ function ToolsModal({
|
|
|
2666
2921
|
onSave
|
|
2667
2922
|
}) {
|
|
2668
2923
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
2669
|
-
const [tools, setTools] =
|
|
2670
|
-
const [loading, setLoading] =
|
|
2671
|
-
const [search, setSearch] =
|
|
2672
|
-
const [selected, setSelected] =
|
|
2673
|
-
const [saving, setSaving] =
|
|
2674
|
-
const fetchTools =
|
|
2924
|
+
const [tools, setTools] = React4.useState([]);
|
|
2925
|
+
const [loading, setLoading] = React4.useState(false);
|
|
2926
|
+
const [search, setSearch] = React4.useState("");
|
|
2927
|
+
const [selected, setSelected] = React4.useState(/* @__PURE__ */ new Set());
|
|
2928
|
+
const [saving, setSaving] = React4.useState(false);
|
|
2929
|
+
const fetchTools = React4.useCallback(async () => {
|
|
2675
2930
|
setLoading(true);
|
|
2676
2931
|
try {
|
|
2677
2932
|
const data = await client.composio.tools(toolkit);
|
|
@@ -2680,7 +2935,7 @@ function ToolsModal({
|
|
|
2680
2935
|
setLoading(false);
|
|
2681
2936
|
}
|
|
2682
2937
|
}, [toolkit, client]);
|
|
2683
|
-
|
|
2938
|
+
React4.useEffect(() => {
|
|
2684
2939
|
if (open) {
|
|
2685
2940
|
fetchTools();
|
|
2686
2941
|
setSearch("");
|
|
@@ -2771,13 +3026,13 @@ function McpToolsModal({
|
|
|
2771
3026
|
onSave
|
|
2772
3027
|
}) {
|
|
2773
3028
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
2774
|
-
const [tools, setTools] =
|
|
2775
|
-
const [loading, setLoading] =
|
|
2776
|
-
const [search, setSearch] =
|
|
2777
|
-
const [selected, setSelected] =
|
|
2778
|
-
const [saving, setSaving] =
|
|
2779
|
-
const [error, setError] =
|
|
2780
|
-
const fetchTools =
|
|
3029
|
+
const [tools, setTools] = React4.useState([]);
|
|
3030
|
+
const [loading, setLoading] = React4.useState(false);
|
|
3031
|
+
const [search, setSearch] = React4.useState("");
|
|
3032
|
+
const [selected, setSelected] = React4.useState(/* @__PURE__ */ new Set());
|
|
3033
|
+
const [saving, setSaving] = React4.useState(false);
|
|
3034
|
+
const [error, setError] = React4.useState("");
|
|
3035
|
+
const fetchTools = React4.useCallback(async () => {
|
|
2781
3036
|
setLoading(true);
|
|
2782
3037
|
setError("");
|
|
2783
3038
|
try {
|
|
@@ -2789,7 +3044,7 @@ function McpToolsModal({
|
|
|
2789
3044
|
setLoading(false);
|
|
2790
3045
|
}
|
|
2791
3046
|
}, [agentId, mcpServerId, client]);
|
|
2792
|
-
|
|
3047
|
+
React4.useEffect(() => {
|
|
2793
3048
|
if (open) {
|
|
2794
3049
|
fetchTools();
|
|
2795
3050
|
setSearch("");
|
|
@@ -2869,30 +3124,30 @@ function McpToolsModal({
|
|
|
2869
3124
|
}
|
|
2870
3125
|
function AgentConnectorsManager({ agentId, toolkits: initialToolkits, composioAllowedTools: initialAllowedTools, onChanged }) {
|
|
2871
3126
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
2872
|
-
const [localToolkits, setLocalToolkits] =
|
|
2873
|
-
const [connectors, setConnectors] =
|
|
2874
|
-
const [loading, setLoading] =
|
|
2875
|
-
const [showAdd, setShowAdd] =
|
|
2876
|
-
const [pendingToolkits, setPendingToolkits] =
|
|
2877
|
-
const [applyingToolkits, setApplyingToolkits] =
|
|
2878
|
-
const [confirmDelete, setConfirmDelete] =
|
|
2879
|
-
const [deleting, setDeleting] =
|
|
2880
|
-
const [apiKeys, setApiKeys] =
|
|
2881
|
-
const [saving, setSaving] =
|
|
2882
|
-
const [errors, setErrors] =
|
|
2883
|
-
const [allowedTools, setAllowedTools] =
|
|
2884
|
-
const [toolCounts, setToolCounts] =
|
|
2885
|
-
const [toolsModalToolkit, setToolsModalToolkit] =
|
|
2886
|
-
const mcpOauthHandlerRef =
|
|
2887
|
-
const composioOauthHandlerRef =
|
|
2888
|
-
const [mcpConnections, setMcpConnections] =
|
|
2889
|
-
const [mcpServers, setMcpServers] =
|
|
2890
|
-
const [mcpLoading, setMcpLoading] =
|
|
2891
|
-
const [mcpConnecting, setMcpConnecting] =
|
|
2892
|
-
const [confirmMcpDisconnect, setConfirmMcpDisconnect] =
|
|
2893
|
-
const [mcpDisconnecting, setMcpDisconnecting] =
|
|
2894
|
-
const [mcpToolsModal, setMcpToolsModal] =
|
|
2895
|
-
const loadComposio =
|
|
3127
|
+
const [localToolkits, setLocalToolkits] = React4.useState(initialToolkits);
|
|
3128
|
+
const [connectors, setConnectors] = React4.useState([]);
|
|
3129
|
+
const [loading, setLoading] = React4.useState(true);
|
|
3130
|
+
const [showAdd, setShowAdd] = React4.useState(false);
|
|
3131
|
+
const [pendingToolkits, setPendingToolkits] = React4.useState(initialToolkits);
|
|
3132
|
+
const [applyingToolkits, setApplyingToolkits] = React4.useState(false);
|
|
3133
|
+
const [confirmDelete, setConfirmDelete] = React4.useState(null);
|
|
3134
|
+
const [deleting, setDeleting] = React4.useState(false);
|
|
3135
|
+
const [apiKeys, setApiKeys] = React4.useState({});
|
|
3136
|
+
const [saving, setSaving] = React4.useState({});
|
|
3137
|
+
const [errors, setErrors] = React4.useState({});
|
|
3138
|
+
const [allowedTools, setAllowedTools] = React4.useState(initialAllowedTools);
|
|
3139
|
+
const [toolCounts, setToolCounts] = React4.useState({});
|
|
3140
|
+
const [toolsModalToolkit, setToolsModalToolkit] = React4.useState(null);
|
|
3141
|
+
const mcpOauthHandlerRef = React4.useRef(null);
|
|
3142
|
+
const composioOauthHandlerRef = React4.useRef(null);
|
|
3143
|
+
const [mcpConnections, setMcpConnections] = React4.useState([]);
|
|
3144
|
+
const [mcpServers, setMcpServers] = React4.useState([]);
|
|
3145
|
+
const [mcpLoading, setMcpLoading] = React4.useState(true);
|
|
3146
|
+
const [mcpConnecting, setMcpConnecting] = React4.useState(null);
|
|
3147
|
+
const [confirmMcpDisconnect, setConfirmMcpDisconnect] = React4.useState(null);
|
|
3148
|
+
const [mcpDisconnecting, setMcpDisconnecting] = React4.useState(false);
|
|
3149
|
+
const [mcpToolsModal, setMcpToolsModal] = React4.useState(null);
|
|
3150
|
+
const loadComposio = React4.useCallback(async () => {
|
|
2896
3151
|
setLoading(true);
|
|
2897
3152
|
try {
|
|
2898
3153
|
const data = await client.connectors.list(agentId);
|
|
@@ -2901,7 +3156,7 @@ function AgentConnectorsManager({ agentId, toolkits: initialToolkits, composioAl
|
|
|
2901
3156
|
setLoading(false);
|
|
2902
3157
|
}
|
|
2903
3158
|
}, [agentId, client]);
|
|
2904
|
-
const loadMcp =
|
|
3159
|
+
const loadMcp = React4.useCallback(async () => {
|
|
2905
3160
|
setMcpLoading(true);
|
|
2906
3161
|
try {
|
|
2907
3162
|
const data = await client.customConnectors.list(agentId);
|
|
@@ -2911,13 +3166,13 @@ function AgentConnectorsManager({ agentId, toolkits: initialToolkits, composioAl
|
|
|
2911
3166
|
}
|
|
2912
3167
|
}, [agentId, client]);
|
|
2913
3168
|
const toolkitsKey = localToolkits.join(",");
|
|
2914
|
-
|
|
3169
|
+
React4.useEffect(() => {
|
|
2915
3170
|
loadComposio();
|
|
2916
3171
|
}, [loadComposio, toolkitsKey]);
|
|
2917
|
-
|
|
3172
|
+
React4.useEffect(() => {
|
|
2918
3173
|
loadMcp();
|
|
2919
3174
|
}, [loadMcp]);
|
|
2920
|
-
|
|
3175
|
+
React4.useEffect(() => {
|
|
2921
3176
|
return () => {
|
|
2922
3177
|
if (mcpOauthHandlerRef.current) {
|
|
2923
3178
|
window.removeEventListener("message", mcpOauthHandlerRef.current);
|
|
@@ -2929,7 +3184,7 @@ function AgentConnectorsManager({ agentId, toolkits: initialToolkits, composioAl
|
|
|
2929
3184
|
}
|
|
2930
3185
|
};
|
|
2931
3186
|
}, []);
|
|
2932
|
-
|
|
3187
|
+
React4.useEffect(() => {
|
|
2933
3188
|
if (localToolkits.length === 0) return;
|
|
2934
3189
|
let cancelled = false;
|
|
2935
3190
|
for (const slug of localToolkits) {
|
|
@@ -3292,7 +3547,7 @@ function AgentConnectorsManager({ agentId, toolkits: initialToolkits, composioAl
|
|
|
3292
3547
|
)
|
|
3293
3548
|
] });
|
|
3294
3549
|
}
|
|
3295
|
-
var CodeEditor =
|
|
3550
|
+
var CodeEditor = React4.lazy(() => import('./code-editor-ZYP54YUT.cjs'));
|
|
3296
3551
|
function buildTree(files) {
|
|
3297
3552
|
const rootFiles = [];
|
|
3298
3553
|
const dirMap = /* @__PURE__ */ new Map();
|
|
@@ -3365,49 +3620,49 @@ function FileTreeEditor2({
|
|
|
3365
3620
|
fixedStructure = false,
|
|
3366
3621
|
headerActions
|
|
3367
3622
|
}) {
|
|
3368
|
-
const [files, setFiles] =
|
|
3369
|
-
const [selectedPath, setSelectedPath] =
|
|
3623
|
+
const [files, setFiles] = React4.useState(initialFiles);
|
|
3624
|
+
const [selectedPath, setSelectedPath] = React4.useState(
|
|
3370
3625
|
initialFiles.length > 0 ? initialFiles[0].path : null
|
|
3371
3626
|
);
|
|
3372
|
-
const [saving, setSaving] =
|
|
3373
|
-
const [expanded, setExpanded] =
|
|
3627
|
+
const [saving, setSaving] = React4.useState(false);
|
|
3628
|
+
const [expanded, setExpanded] = React4.useState(() => {
|
|
3374
3629
|
const { rootDirs } = buildTree(initialFiles);
|
|
3375
3630
|
return collectAllDirPaths(rootDirs);
|
|
3376
3631
|
});
|
|
3377
|
-
const [showAddFolder, setShowAddFolder] =
|
|
3378
|
-
const [newFolderName, setNewFolderName] =
|
|
3379
|
-
const [addingFileInDir, setAddingFileInDir] =
|
|
3380
|
-
const [newFileName, setNewFileName] =
|
|
3381
|
-
const [savedSnapshot, setSavedSnapshot] =
|
|
3382
|
-
|
|
3632
|
+
const [showAddFolder, setShowAddFolder] = React4.useState(false);
|
|
3633
|
+
const [newFolderName, setNewFolderName] = React4.useState("");
|
|
3634
|
+
const [addingFileInDir, setAddingFileInDir] = React4.useState(null);
|
|
3635
|
+
const [newFileName, setNewFileName] = React4.useState("");
|
|
3636
|
+
const [savedSnapshot, setSavedSnapshot] = React4.useState(() => JSON.stringify(initialFiles));
|
|
3637
|
+
React4.useEffect(() => {
|
|
3383
3638
|
const snap = JSON.stringify(initialFiles);
|
|
3384
3639
|
setSavedSnapshot(snap);
|
|
3385
3640
|
setFiles(initialFiles);
|
|
3386
3641
|
const { rootDirs } = buildTree(initialFiles);
|
|
3387
3642
|
setExpanded(collectAllDirPaths(rootDirs));
|
|
3388
3643
|
}, [initialFiles]);
|
|
3389
|
-
|
|
3644
|
+
React4.useEffect(() => {
|
|
3390
3645
|
if (savedVersion !== void 0 && savedVersion > 0) {
|
|
3391
3646
|
setSavedSnapshot(JSON.stringify(files));
|
|
3392
3647
|
}
|
|
3393
3648
|
}, [savedVersion]);
|
|
3394
|
-
const onChangeRef =
|
|
3649
|
+
const onChangeRef = React4.useRef(onChange);
|
|
3395
3650
|
onChangeRef.current = onChange;
|
|
3396
|
-
|
|
3651
|
+
React4.useEffect(() => {
|
|
3397
3652
|
if (onChangeRef.current && JSON.stringify(files) !== savedSnapshot) {
|
|
3398
3653
|
onChangeRef.current(files);
|
|
3399
3654
|
}
|
|
3400
3655
|
}, [files, savedSnapshot]);
|
|
3401
|
-
const isDirty =
|
|
3656
|
+
const isDirty = React4.useMemo(
|
|
3402
3657
|
() => JSON.stringify(files) !== savedSnapshot,
|
|
3403
3658
|
[files, savedSnapshot]
|
|
3404
3659
|
);
|
|
3405
|
-
const tree =
|
|
3406
|
-
const activeFile =
|
|
3660
|
+
const tree = React4.useMemo(() => buildTree(files), [files]);
|
|
3661
|
+
const activeFile = React4.useMemo(
|
|
3407
3662
|
() => selectedPath ? files.find((f) => f.path === selectedPath) ?? null : null,
|
|
3408
3663
|
[files, selectedPath]
|
|
3409
3664
|
);
|
|
3410
|
-
const handleEditorChange =
|
|
3665
|
+
const handleEditorChange = React4.useCallback((value) => {
|
|
3411
3666
|
if (readOnly || !selectedPath) return;
|
|
3412
3667
|
setFiles((prev) => prev.map((f) => f.path === selectedPath ? { ...f, content: value } : f));
|
|
3413
3668
|
}, [readOnly, selectedPath]);
|
|
@@ -3619,7 +3874,7 @@ function FileTreeEditor2({
|
|
|
3619
3874
|
] }),
|
|
3620
3875
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 border border-border rounded-md overflow-hidden", children: activeFile ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full flex flex-col", children: [
|
|
3621
3876
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-1.5 bg-muted/50 border-b border-border text-xs text-muted-foreground", children: activeFile.path }),
|
|
3622
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3877
|
+
/* @__PURE__ */ jsxRuntime.jsx(React4.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 animate-pulse bg-muted/50" }), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3623
3878
|
CodeEditor,
|
|
3624
3879
|
{
|
|
3625
3880
|
value: activeFile.content,
|
|
@@ -3649,19 +3904,19 @@ function TabButton({ label, active, onClick }) {
|
|
|
3649
3904
|
}
|
|
3650
3905
|
function ImportSkillDialog({ open, onOpenChange, onImported, existingFolders }) {
|
|
3651
3906
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
3652
|
-
const [tab, setTab] =
|
|
3653
|
-
const [entries, setEntries] =
|
|
3654
|
-
const [loading, setLoading] =
|
|
3655
|
-
const [error, setError] =
|
|
3656
|
-
const [search, setSearch] =
|
|
3657
|
-
const [selected, setSelected] =
|
|
3658
|
-
const [preview, setPreview] =
|
|
3659
|
-
const [previewLoading, setPreviewLoading] =
|
|
3660
|
-
const [importing, setImporting] =
|
|
3661
|
-
const [importError, setImportError] =
|
|
3662
|
-
const [url, setUrl] =
|
|
3663
|
-
const [urlImporting, setUrlImporting] =
|
|
3664
|
-
|
|
3907
|
+
const [tab, setTab] = React4.useState("all");
|
|
3908
|
+
const [entries, setEntries] = React4.useState([]);
|
|
3909
|
+
const [loading, setLoading] = React4.useState(false);
|
|
3910
|
+
const [error, setError] = React4.useState("");
|
|
3911
|
+
const [search, setSearch] = React4.useState("");
|
|
3912
|
+
const [selected, setSelected] = React4.useState(null);
|
|
3913
|
+
const [preview, setPreview] = React4.useState("");
|
|
3914
|
+
const [previewLoading, setPreviewLoading] = React4.useState(false);
|
|
3915
|
+
const [importing, setImporting] = React4.useState(false);
|
|
3916
|
+
const [importError, setImportError] = React4.useState("");
|
|
3917
|
+
const [url, setUrl] = React4.useState("");
|
|
3918
|
+
const [urlImporting, setUrlImporting] = React4.useState(false);
|
|
3919
|
+
React4.useEffect(() => {
|
|
3665
3920
|
if (!open) return;
|
|
3666
3921
|
setLoading(true);
|
|
3667
3922
|
setError("");
|
|
@@ -3669,7 +3924,7 @@ function ImportSkillDialog({ open, onOpenChange, onImported, existingFolders })
|
|
|
3669
3924
|
setPreview("");
|
|
3670
3925
|
client.skillsDirectory.list(tab).then((data) => setEntries(data)).catch((err) => setError(err instanceof Error ? err.message : "Failed to load skills")).finally(() => setLoading(false));
|
|
3671
3926
|
}, [tab, open, client]);
|
|
3672
|
-
const filtered =
|
|
3927
|
+
const filtered = React4.useMemo(() => {
|
|
3673
3928
|
if (!search.trim()) return entries;
|
|
3674
3929
|
const q = search.toLowerCase();
|
|
3675
3930
|
return entries.filter(
|
|
@@ -3805,10 +4060,10 @@ function ImportSkillDialog({ open, onOpenChange, onImported, existingFolders })
|
|
|
3805
4060
|
}
|
|
3806
4061
|
function AgentSkillManager({ agentId, initialSkills, onSaved }) {
|
|
3807
4062
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
3808
|
-
const [importOpen, setImportOpen] =
|
|
3809
|
-
const [extraSkills, setExtraSkills] =
|
|
3810
|
-
const allSkills =
|
|
3811
|
-
const initialFiles =
|
|
4063
|
+
const [importOpen, setImportOpen] = React4.useState(false);
|
|
4064
|
+
const [extraSkills, setExtraSkills] = React4.useState([]);
|
|
4065
|
+
const allSkills = React4.useMemo(() => [...initialSkills, ...extraSkills], [initialSkills, extraSkills]);
|
|
4066
|
+
const initialFiles = React4.useMemo(
|
|
3812
4067
|
() => allSkills.flatMap(
|
|
3813
4068
|
(s) => s.files.map((f) => ({
|
|
3814
4069
|
path: s.folder === "(root)" ? f.path : `${s.folder}/${f.path}`,
|
|
@@ -3817,11 +4072,11 @@ function AgentSkillManager({ agentId, initialSkills, onSaved }) {
|
|
|
3817
4072
|
),
|
|
3818
4073
|
[allSkills]
|
|
3819
4074
|
);
|
|
3820
|
-
const existingFolders =
|
|
3821
|
-
const handleImported =
|
|
4075
|
+
const existingFolders = React4.useMemo(() => allSkills.map((s) => s.folder), [allSkills]);
|
|
4076
|
+
const handleImported = React4.useCallback((skill) => {
|
|
3822
4077
|
setExtraSkills((prev) => [...prev, skill]);
|
|
3823
4078
|
}, []);
|
|
3824
|
-
const handleSave =
|
|
4079
|
+
const handleSave = React4.useCallback(async (files) => {
|
|
3825
4080
|
const folderMap = /* @__PURE__ */ new Map();
|
|
3826
4081
|
for (const file of files) {
|
|
3827
4082
|
const slashIdx = file.path.lastIndexOf("/");
|
|
@@ -3871,24 +4126,24 @@ function AgentSkillManager({ agentId, initialSkills, onSaved }) {
|
|
|
3871
4126
|
}
|
|
3872
4127
|
function AgentPluginManager({ agentId, initialPlugins, onSaved }) {
|
|
3873
4128
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
3874
|
-
const [plugins, setPlugins] =
|
|
3875
|
-
const [saving, setSaving] =
|
|
3876
|
-
const [dialogOpen, setDialogOpen] =
|
|
3877
|
-
const [marketplaces, setMarketplaces] =
|
|
3878
|
-
const [selectedMarketplace, setSelectedMarketplace] =
|
|
3879
|
-
const [availablePlugins, setAvailablePlugins] =
|
|
3880
|
-
const [loadingPlugins, setLoadingPlugins] =
|
|
3881
|
-
const [marketplaceNames, setMarketplaceNames] =
|
|
3882
|
-
const savedSnapshot =
|
|
3883
|
-
|
|
4129
|
+
const [plugins, setPlugins] = React4.useState(initialPlugins);
|
|
4130
|
+
const [saving, setSaving] = React4.useState(false);
|
|
4131
|
+
const [dialogOpen, setDialogOpen] = React4.useState(false);
|
|
4132
|
+
const [marketplaces, setMarketplaces] = React4.useState([]);
|
|
4133
|
+
const [selectedMarketplace, setSelectedMarketplace] = React4.useState(null);
|
|
4134
|
+
const [availablePlugins, setAvailablePlugins] = React4.useState([]);
|
|
4135
|
+
const [loadingPlugins, setLoadingPlugins] = React4.useState(false);
|
|
4136
|
+
const [marketplaceNames, setMarketplaceNames] = React4.useState({});
|
|
4137
|
+
const savedSnapshot = React4.useRef(JSON.stringify(initialPlugins));
|
|
4138
|
+
React4.useEffect(() => {
|
|
3884
4139
|
savedSnapshot.current = JSON.stringify(initialPlugins);
|
|
3885
4140
|
setPlugins(initialPlugins);
|
|
3886
4141
|
}, [initialPlugins]);
|
|
3887
|
-
const isDirty =
|
|
4142
|
+
const isDirty = React4.useMemo(
|
|
3888
4143
|
() => JSON.stringify(plugins) !== savedSnapshot.current,
|
|
3889
4144
|
[plugins]
|
|
3890
4145
|
);
|
|
3891
|
-
|
|
4146
|
+
React4.useEffect(() => {
|
|
3892
4147
|
client.pluginMarketplaces.list().then((data) => {
|
|
3893
4148
|
setMarketplaces(data);
|
|
3894
4149
|
const names = {};
|
|
@@ -3897,7 +4152,7 @@ function AgentPluginManager({ agentId, initialPlugins, onSaved }) {
|
|
|
3897
4152
|
}).catch(() => {
|
|
3898
4153
|
});
|
|
3899
4154
|
}, [client]);
|
|
3900
|
-
const loadPluginsForMarketplace =
|
|
4155
|
+
const loadPluginsForMarketplace = React4.useCallback(async (marketplaceId) => {
|
|
3901
4156
|
setSelectedMarketplace(marketplaceId);
|
|
3902
4157
|
setLoadingPlugins(true);
|
|
3903
4158
|
setAvailablePlugins([]);
|
|
@@ -4085,15 +4340,15 @@ function AgentA2aInfo({
|
|
|
4085
4340
|
onChanged
|
|
4086
4341
|
}) {
|
|
4087
4342
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
4088
|
-
const [enabled, setEnabled] =
|
|
4089
|
-
const [toggling, setToggling] =
|
|
4090
|
-
const [detailsOpen, setDetailsOpen] =
|
|
4091
|
-
const [cardPreview, setCardPreview] =
|
|
4092
|
-
const [loading, setLoading] =
|
|
4093
|
-
const [tags, setTags] =
|
|
4094
|
-
const [tagInput, setTagInput] =
|
|
4095
|
-
const [savingTags, setSavingTags] =
|
|
4096
|
-
const inputRef =
|
|
4343
|
+
const [enabled, setEnabled] = React4.useState(initialEnabled);
|
|
4344
|
+
const [toggling, setToggling] = React4.useState(false);
|
|
4345
|
+
const [detailsOpen, setDetailsOpen] = React4.useState(false);
|
|
4346
|
+
const [cardPreview, setCardPreview] = React4.useState(null);
|
|
4347
|
+
const [loading, setLoading] = React4.useState(false);
|
|
4348
|
+
const [tags, setTags] = React4.useState(initialTags);
|
|
4349
|
+
const [tagInput, setTagInput] = React4.useState("");
|
|
4350
|
+
const [savingTags, setSavingTags] = React4.useState(false);
|
|
4351
|
+
const inputRef = React4.useRef(null);
|
|
4097
4352
|
const endpointUrl = `${baseUrl}/api/a2a/${tenantSlug}/${agentSlug}`;
|
|
4098
4353
|
const jsonRpcUrl = `${baseUrl}/api/a2a/${tenantSlug}/${agentSlug}/jsonrpc`;
|
|
4099
4354
|
const agentCardUrl = `${baseUrl}/api/a2a/${tenantSlug}/${agentSlug}/.well-known/agent-card.json`;
|
|
@@ -4263,7 +4518,7 @@ function AgentA2aInfo({
|
|
|
4263
4518
|
] })
|
|
4264
4519
|
] });
|
|
4265
4520
|
}
|
|
4266
|
-
var AgentIdentityTab =
|
|
4521
|
+
var AgentIdentityTab = React4.lazy(() => import('./agent-identity-tab-YGMVWOWT.cjs').then((m) => ({ default: m.AgentIdentityTab })));
|
|
4267
4522
|
function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, adminApiBaseUrl, adminApiKey }) {
|
|
4268
4523
|
const { LinkComponent, basePath } = chunkXXF4U7WL_cjs.useNavigation();
|
|
4269
4524
|
const { mutate } = swr.useSWRConfig();
|
|
@@ -4272,10 +4527,10 @@ function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, adminApiBaseUrl, adm
|
|
|
4272
4527
|
cacheKey,
|
|
4273
4528
|
(client) => client.agents.get(agentId)
|
|
4274
4529
|
);
|
|
4275
|
-
const invalidate =
|
|
4530
|
+
const invalidate = React4.useCallback(() => {
|
|
4276
4531
|
mutate(cacheKey);
|
|
4277
4532
|
}, [mutate, cacheKey]);
|
|
4278
|
-
const adminFetch =
|
|
4533
|
+
const adminFetch = React4.useCallback(async (path, options) => {
|
|
4279
4534
|
if (!adminApiBaseUrl) throw new Error("Admin API not configured");
|
|
4280
4535
|
const res = await fetch(`${adminApiBaseUrl}${path}`, {
|
|
4281
4536
|
...options,
|
|
@@ -4291,7 +4546,7 @@ function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, adminApiBaseUrl, adm
|
|
|
4291
4546
|
}
|
|
4292
4547
|
return res.json();
|
|
4293
4548
|
}, [adminApiBaseUrl, adminApiKey]);
|
|
4294
|
-
const soulCallbacks =
|
|
4549
|
+
const soulCallbacks = React4.useMemo(() => {
|
|
4295
4550
|
if (!adminApiBaseUrl) return {};
|
|
4296
4551
|
return {
|
|
4297
4552
|
onGenerateSoul: async () => {
|
|
@@ -4378,7 +4633,7 @@ function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, adminApiBaseUrl, adm
|
|
|
4378
4633
|
},
|
|
4379
4634
|
{
|
|
4380
4635
|
label: "Identity",
|
|
4381
|
-
content: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4636
|
+
content: /* @__PURE__ */ jsxRuntime.jsx(React4.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(chunkVZ43ATC5_cjs.Skeleton, { className: "h-64 w-full" }), children: /* @__PURE__ */ jsxRuntime.jsx(AgentIdentityTab, { agent, FileTreeEditor: chunkVZ43ATC5_cjs.FileTreeEditor, onSaved: invalidate, ...soulCallbacks }) })
|
|
4382
4637
|
},
|
|
4383
4638
|
{
|
|
4384
4639
|
label: "Connectors",
|
|
@@ -4463,12 +4718,12 @@ function ScheduleCard({
|
|
|
4463
4718
|
schedule,
|
|
4464
4719
|
timezone
|
|
4465
4720
|
}) {
|
|
4466
|
-
const [frequency, setFrequency] =
|
|
4467
|
-
const [time, setTime] =
|
|
4468
|
-
const [dayOfWeek, setDayOfWeek] =
|
|
4469
|
-
const [prompt, setPrompt] =
|
|
4470
|
-
const [enabled, setEnabled] =
|
|
4471
|
-
const [name, setName] =
|
|
4721
|
+
const [frequency, setFrequency] = React4.useState(schedule.frequency);
|
|
4722
|
+
const [time, setTime] = React4.useState(formatTimeForInput(schedule.time));
|
|
4723
|
+
const [dayOfWeek, setDayOfWeek] = React4.useState(schedule.day_of_week ?? 1);
|
|
4724
|
+
const [prompt, setPrompt] = React4.useState(schedule.prompt ?? "");
|
|
4725
|
+
const [enabled, setEnabled] = React4.useState(schedule.enabled);
|
|
4726
|
+
const [name, setName] = React4.useState(schedule.name ?? "");
|
|
4472
4727
|
const showTimePicker = ["daily", "weekdays", "weekly"].includes(frequency);
|
|
4473
4728
|
const showDayPicker = frequency === "weekly";
|
|
4474
4729
|
const canEnable = frequency !== "manual";
|
|
@@ -4571,7 +4826,7 @@ function MarkdownContent({ children }) {
|
|
|
4571
4826
|
) });
|
|
4572
4827
|
}
|
|
4573
4828
|
function CollapsibleJson({ data, maxHeight = "12rem" }) {
|
|
4574
|
-
const [expanded, setExpanded] =
|
|
4829
|
+
const [expanded, setExpanded] = React4.useState(false);
|
|
4575
4830
|
const json = typeof data === "string" ? data : JSON.stringify(data, null, 2);
|
|
4576
4831
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
4577
4832
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -4717,7 +4972,7 @@ function renderEvent(event, idx) {
|
|
|
4717
4972
|
/* @__PURE__ */ jsxRuntime.jsx(CollapsibleJson, { data: event, maxHeight: "8rem" })
|
|
4718
4973
|
] }, idx);
|
|
4719
4974
|
}
|
|
4720
|
-
var
|
|
4975
|
+
var TERMINAL_STATUSES2 = /* @__PURE__ */ new Set(["completed", "failed", "cancelled", "timed_out"]);
|
|
4721
4976
|
function PlaygroundPage({ agentId }) {
|
|
4722
4977
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
4723
4978
|
const { LinkComponent, basePath } = chunkXXF4U7WL_cjs.useNavigation();
|
|
@@ -4725,30 +4980,30 @@ function PlaygroundPage({ agentId }) {
|
|
|
4725
4980
|
`agent-${agentId}`,
|
|
4726
4981
|
(c) => c.agents.get(agentId)
|
|
4727
4982
|
);
|
|
4728
|
-
const [prompt, setPrompt] =
|
|
4729
|
-
const [events, setEvents] =
|
|
4730
|
-
const [streamingText, setStreamingText] =
|
|
4731
|
-
const [running, setRunning] =
|
|
4732
|
-
const [polling, setPolling] =
|
|
4733
|
-
const [error, setError] =
|
|
4734
|
-
const [sessionId, setSessionId] =
|
|
4735
|
-
const sessionIdRef =
|
|
4736
|
-
const abortRef =
|
|
4737
|
-
const runIdRef =
|
|
4738
|
-
const streamRef =
|
|
4739
|
-
const scrollRef =
|
|
4740
|
-
const textareaRef =
|
|
4741
|
-
|
|
4983
|
+
const [prompt, setPrompt] = React4.useState("");
|
|
4984
|
+
const [events, setEvents] = React4.useState([]);
|
|
4985
|
+
const [streamingText, setStreamingText] = React4.useState("");
|
|
4986
|
+
const [running, setRunning] = React4.useState(false);
|
|
4987
|
+
const [polling, setPolling] = React4.useState(false);
|
|
4988
|
+
const [error, setError] = React4.useState(null);
|
|
4989
|
+
const [sessionId, setSessionId] = React4.useState(null);
|
|
4990
|
+
const sessionIdRef = React4.useRef(null);
|
|
4991
|
+
const abortRef = React4.useRef(null);
|
|
4992
|
+
const runIdRef = React4.useRef(null);
|
|
4993
|
+
const streamRef = React4.useRef(null);
|
|
4994
|
+
const scrollRef = React4.useRef(null);
|
|
4995
|
+
const textareaRef = React4.useRef(null);
|
|
4996
|
+
React4.useEffect(() => {
|
|
4742
4997
|
const el = scrollRef.current;
|
|
4743
4998
|
if (el) el.scrollTop = el.scrollHeight;
|
|
4744
4999
|
}, [events, streamingText]);
|
|
4745
|
-
|
|
5000
|
+
React4.useEffect(() => {
|
|
4746
5001
|
return () => {
|
|
4747
5002
|
abortRef.current?.abort();
|
|
4748
5003
|
streamRef.current?.abort();
|
|
4749
5004
|
};
|
|
4750
5005
|
}, []);
|
|
4751
|
-
const pollForFinalResult =
|
|
5006
|
+
const pollForFinalResult = React4.useCallback(async (runId) => {
|
|
4752
5007
|
setPolling(true);
|
|
4753
5008
|
let delay = 3e3;
|
|
4754
5009
|
const maxDelay = 1e4;
|
|
@@ -4759,7 +5014,7 @@ function PlaygroundPage({ agentId }) {
|
|
|
4759
5014
|
if (abortRef.current?.signal.aborted) break;
|
|
4760
5015
|
try {
|
|
4761
5016
|
const run = await client.runs.get(runId);
|
|
4762
|
-
if (
|
|
5017
|
+
if (TERMINAL_STATUSES2.has(run.status)) {
|
|
4763
5018
|
try {
|
|
4764
5019
|
const transcriptEvents = await client.runs.transcriptArray(runId);
|
|
4765
5020
|
if (transcriptEvents.length > 0) {
|
|
@@ -4804,7 +5059,7 @@ function PlaygroundPage({ agentId }) {
|
|
|
4804
5059
|
streamRef.current = null;
|
|
4805
5060
|
}
|
|
4806
5061
|
}, [client]);
|
|
4807
|
-
const consumeStream =
|
|
5062
|
+
const consumeStream = React4.useCallback(async (stream) => {
|
|
4808
5063
|
streamRef.current = stream;
|
|
4809
5064
|
let handedOffToPoll = false;
|
|
4810
5065
|
try {
|
|
@@ -4842,7 +5097,7 @@ function PlaygroundPage({ agentId }) {
|
|
|
4842
5097
|
}
|
|
4843
5098
|
}
|
|
4844
5099
|
}, [pollForFinalResult]);
|
|
4845
|
-
const handleSend =
|
|
5100
|
+
const handleSend = React4.useCallback(async () => {
|
|
4846
5101
|
if (!prompt.trim() || running) return;
|
|
4847
5102
|
const messageText = prompt.trim();
|
|
4848
5103
|
setPrompt("");
|
|
@@ -4995,6 +5250,122 @@ function PlaygroundPage({ agentId }) {
|
|
|
4995
5250
|
] })
|
|
4996
5251
|
] });
|
|
4997
5252
|
}
|
|
5253
|
+
var ToastProvider = ToastPrimitives__namespace.Provider;
|
|
5254
|
+
var ToastViewport = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
5255
|
+
ToastPrimitives__namespace.Viewport,
|
|
5256
|
+
{
|
|
5257
|
+
ref,
|
|
5258
|
+
className: chunkXXF4U7WL_cjs.cn(
|
|
5259
|
+
"fixed top-0 right-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:flex-col sm:max-w-[420px]",
|
|
5260
|
+
className
|
|
5261
|
+
),
|
|
5262
|
+
...props
|
|
5263
|
+
}
|
|
5264
|
+
));
|
|
5265
|
+
ToastViewport.displayName = ToastPrimitives__namespace.Viewport.displayName;
|
|
5266
|
+
var toastVariants = classVarianceAuthority.cva(
|
|
5267
|
+
"group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-lg border p-4 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-right-full",
|
|
5268
|
+
{
|
|
5269
|
+
variants: {
|
|
5270
|
+
variant: {
|
|
5271
|
+
default: "bg-zinc-800 border-zinc-700 text-zinc-100",
|
|
5272
|
+
success: "bg-green-950 border-green-900 text-green-400",
|
|
5273
|
+
destructive: "bg-red-950 border-red-900 text-red-400"
|
|
5274
|
+
}
|
|
5275
|
+
},
|
|
5276
|
+
defaultVariants: {
|
|
5277
|
+
variant: "default"
|
|
5278
|
+
}
|
|
5279
|
+
}
|
|
5280
|
+
);
|
|
5281
|
+
var Toast = React4__namespace.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
5282
|
+
ToastPrimitives__namespace.Root,
|
|
5283
|
+
{
|
|
5284
|
+
ref,
|
|
5285
|
+
className: chunkXXF4U7WL_cjs.cn(toastVariants({ variant }), className),
|
|
5286
|
+
...props
|
|
5287
|
+
}
|
|
5288
|
+
));
|
|
5289
|
+
Toast.displayName = ToastPrimitives__namespace.Root.displayName;
|
|
5290
|
+
var ToastAction = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
5291
|
+
ToastPrimitives__namespace.Action,
|
|
5292
|
+
{
|
|
5293
|
+
ref,
|
|
5294
|
+
className: chunkXXF4U7WL_cjs.cn(
|
|
5295
|
+
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-zinc-600 bg-transparent px-3 text-sm font-medium transition-colors hover:bg-zinc-700 focus:outline-none focus:ring-1 focus:ring-zinc-500 disabled:pointer-events-none disabled:opacity-50",
|
|
5296
|
+
"group-[.destructive]:border-red-800 group-[.destructive]:hover:border-red-700 group-[.destructive]:hover:bg-red-900 group-[.destructive]:focus:ring-red-800",
|
|
5297
|
+
"group-[.success]:border-green-800 group-[.success]:hover:border-green-700 group-[.success]:hover:bg-green-900 group-[.success]:focus:ring-green-800",
|
|
5298
|
+
className
|
|
5299
|
+
),
|
|
5300
|
+
...props
|
|
5301
|
+
}
|
|
5302
|
+
));
|
|
5303
|
+
ToastAction.displayName = ToastPrimitives__namespace.Action.displayName;
|
|
5304
|
+
var ToastClose = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
5305
|
+
ToastPrimitives__namespace.Close,
|
|
5306
|
+
{
|
|
5307
|
+
ref,
|
|
5308
|
+
className: chunkXXF4U7WL_cjs.cn(
|
|
5309
|
+
"absolute right-1 top-1 rounded-md p-1 text-zinc-400 opacity-0 transition-opacity hover:text-zinc-100 focus:opacity-100 focus:outline-none group-hover:opacity-100",
|
|
5310
|
+
"group-[.destructive]:text-red-400 group-[.destructive]:hover:text-red-300",
|
|
5311
|
+
"group-[.success]:text-green-400 group-[.success]:hover:text-green-300",
|
|
5312
|
+
className
|
|
5313
|
+
),
|
|
5314
|
+
"toast-close": "",
|
|
5315
|
+
...props,
|
|
5316
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5317
|
+
"svg",
|
|
5318
|
+
{
|
|
5319
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5320
|
+
width: "16",
|
|
5321
|
+
height: "16",
|
|
5322
|
+
viewBox: "0 0 24 24",
|
|
5323
|
+
fill: "none",
|
|
5324
|
+
stroke: "currentColor",
|
|
5325
|
+
strokeWidth: "2",
|
|
5326
|
+
strokeLinecap: "round",
|
|
5327
|
+
strokeLinejoin: "round",
|
|
5328
|
+
children: [
|
|
5329
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
|
|
5330
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
|
|
5331
|
+
]
|
|
5332
|
+
}
|
|
5333
|
+
)
|
|
5334
|
+
}
|
|
5335
|
+
));
|
|
5336
|
+
ToastClose.displayName = ToastPrimitives__namespace.Close.displayName;
|
|
5337
|
+
var ToastTitle = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
5338
|
+
ToastPrimitives__namespace.Title,
|
|
5339
|
+
{
|
|
5340
|
+
ref,
|
|
5341
|
+
className: chunkXXF4U7WL_cjs.cn("text-sm font-semibold [&+div]:text-xs", className),
|
|
5342
|
+
...props
|
|
5343
|
+
}
|
|
5344
|
+
));
|
|
5345
|
+
ToastTitle.displayName = ToastPrimitives__namespace.Title.displayName;
|
|
5346
|
+
var ToastDescription = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
5347
|
+
ToastPrimitives__namespace.Description,
|
|
5348
|
+
{
|
|
5349
|
+
ref,
|
|
5350
|
+
className: chunkXXF4U7WL_cjs.cn("text-sm opacity-90", className),
|
|
5351
|
+
...props
|
|
5352
|
+
}
|
|
5353
|
+
));
|
|
5354
|
+
ToastDescription.displayName = ToastPrimitives__namespace.Description.displayName;
|
|
5355
|
+
function Toaster() {
|
|
5356
|
+
const { toasts } = useToast();
|
|
5357
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(ToastProvider, { children: [
|
|
5358
|
+
toasts.map(({ id, title, description, action, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(Toast, { ...props, children: [
|
|
5359
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-1", children: [
|
|
5360
|
+
title && /* @__PURE__ */ jsxRuntime.jsx(ToastTitle, { children: title }),
|
|
5361
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(ToastDescription, { children: description })
|
|
5362
|
+
] }),
|
|
5363
|
+
action,
|
|
5364
|
+
/* @__PURE__ */ jsxRuntime.jsx(ToastClose, {})
|
|
5365
|
+
] }, id)),
|
|
5366
|
+
/* @__PURE__ */ jsxRuntime.jsx(ToastViewport, {})
|
|
5367
|
+
] });
|
|
5368
|
+
}
|
|
4998
5369
|
|
|
4999
5370
|
Object.defineProperty(exports, "Card", {
|
|
5000
5371
|
enumerable: true,
|
|
@@ -5133,6 +5504,18 @@ exports.SettingsPage = SettingsPage;
|
|
|
5133
5504
|
exports.Tabs = Tabs;
|
|
5134
5505
|
exports.Textarea = Textarea;
|
|
5135
5506
|
exports.Th = Th;
|
|
5507
|
+
exports.Toast = Toast;
|
|
5508
|
+
exports.ToastAction = ToastAction;
|
|
5509
|
+
exports.ToastClose = ToastClose;
|
|
5510
|
+
exports.ToastDescription = ToastDescription;
|
|
5511
|
+
exports.ToastProvider = ToastProvider;
|
|
5512
|
+
exports.ToastTitle = ToastTitle;
|
|
5513
|
+
exports.ToastViewport = ToastViewport;
|
|
5514
|
+
exports.Toaster = Toaster;
|
|
5136
5515
|
exports.ToolkitMultiselect = ToolkitMultiselect;
|
|
5137
5516
|
exports.TranscriptViewer = TranscriptViewer;
|
|
5138
5517
|
exports.parsePaginationParams = parsePaginationParams;
|
|
5518
|
+
exports.toast = toast;
|
|
5519
|
+
exports.toastVariants = toastVariants;
|
|
5520
|
+
exports.useRunStream = useRunStream;
|
|
5521
|
+
exports.useToast = useToast;
|