@getcatalystiq/agent-plane-ui 0.1.29 → 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 +649 -262
- package/dist/index.d.cts +75 -2
- package/dist/index.d.ts +75 -2
- package/dist/index.js +402 -28
- 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();
|
|
@@ -3362,51 +3617,52 @@ function FileTreeEditor2({
|
|
|
3362
3617
|
addFolderLabel = "Folder",
|
|
3363
3618
|
newFileTemplate = { filename: "SKILL.md", content: "---\nname: New Skill\ndescription: Describe when this skill should be triggered\n---\n\n# Instructions\n\nDescribe what this skill does...\n" },
|
|
3364
3619
|
savedVersion,
|
|
3365
|
-
fixedStructure = false
|
|
3620
|
+
fixedStructure = false,
|
|
3621
|
+
headerActions
|
|
3366
3622
|
}) {
|
|
3367
|
-
const [files, setFiles] =
|
|
3368
|
-
const [selectedPath, setSelectedPath] =
|
|
3623
|
+
const [files, setFiles] = React4.useState(initialFiles);
|
|
3624
|
+
const [selectedPath, setSelectedPath] = React4.useState(
|
|
3369
3625
|
initialFiles.length > 0 ? initialFiles[0].path : null
|
|
3370
3626
|
);
|
|
3371
|
-
const [saving, setSaving] =
|
|
3372
|
-
const [expanded, setExpanded] =
|
|
3627
|
+
const [saving, setSaving] = React4.useState(false);
|
|
3628
|
+
const [expanded, setExpanded] = React4.useState(() => {
|
|
3373
3629
|
const { rootDirs } = buildTree(initialFiles);
|
|
3374
3630
|
return collectAllDirPaths(rootDirs);
|
|
3375
3631
|
});
|
|
3376
|
-
const [showAddFolder, setShowAddFolder] =
|
|
3377
|
-
const [newFolderName, setNewFolderName] =
|
|
3378
|
-
const [addingFileInDir, setAddingFileInDir] =
|
|
3379
|
-
const [newFileName, setNewFileName] =
|
|
3380
|
-
const [savedSnapshot, setSavedSnapshot] =
|
|
3381
|
-
|
|
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(() => {
|
|
3382
3638
|
const snap = JSON.stringify(initialFiles);
|
|
3383
3639
|
setSavedSnapshot(snap);
|
|
3384
3640
|
setFiles(initialFiles);
|
|
3385
3641
|
const { rootDirs } = buildTree(initialFiles);
|
|
3386
3642
|
setExpanded(collectAllDirPaths(rootDirs));
|
|
3387
3643
|
}, [initialFiles]);
|
|
3388
|
-
|
|
3644
|
+
React4.useEffect(() => {
|
|
3389
3645
|
if (savedVersion !== void 0 && savedVersion > 0) {
|
|
3390
3646
|
setSavedSnapshot(JSON.stringify(files));
|
|
3391
3647
|
}
|
|
3392
3648
|
}, [savedVersion]);
|
|
3393
|
-
const onChangeRef =
|
|
3649
|
+
const onChangeRef = React4.useRef(onChange);
|
|
3394
3650
|
onChangeRef.current = onChange;
|
|
3395
|
-
|
|
3651
|
+
React4.useEffect(() => {
|
|
3396
3652
|
if (onChangeRef.current && JSON.stringify(files) !== savedSnapshot) {
|
|
3397
3653
|
onChangeRef.current(files);
|
|
3398
3654
|
}
|
|
3399
3655
|
}, [files, savedSnapshot]);
|
|
3400
|
-
const isDirty =
|
|
3656
|
+
const isDirty = React4.useMemo(
|
|
3401
3657
|
() => JSON.stringify(files) !== savedSnapshot,
|
|
3402
3658
|
[files, savedSnapshot]
|
|
3403
3659
|
);
|
|
3404
|
-
const tree =
|
|
3405
|
-
const activeFile =
|
|
3660
|
+
const tree = React4.useMemo(() => buildTree(files), [files]);
|
|
3661
|
+
const activeFile = React4.useMemo(
|
|
3406
3662
|
() => selectedPath ? files.find((f) => f.path === selectedPath) ?? null : null,
|
|
3407
3663
|
[files, selectedPath]
|
|
3408
3664
|
);
|
|
3409
|
-
const handleEditorChange =
|
|
3665
|
+
const handleEditorChange = React4.useCallback((value) => {
|
|
3410
3666
|
if (readOnly || !selectedPath) return;
|
|
3411
3667
|
setFiles((prev) => prev.map((f) => f.path === selectedPath ? { ...f, content: value } : f));
|
|
3412
3668
|
}, [readOnly, selectedPath]);
|
|
@@ -3553,7 +3809,10 @@ function FileTreeEditor2({
|
|
|
3553
3809
|
isDirty && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Badge, { variant: "destructive", className: "text-xs", children: "Unsaved changes" }),
|
|
3554
3810
|
readOnly && /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Badge, { variant: "secondary", className: "text-xs", children: "Read-only" })
|
|
3555
3811
|
] }),
|
|
3556
|
-
|
|
3812
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
3813
|
+
headerActions,
|
|
3814
|
+
!readOnly && !hideSave && /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Button, { onClick: handleSave, disabled: saving || !isDirty, size: "sm", children: saving ? "Saving..." : saveLabel })
|
|
3815
|
+
] })
|
|
3557
3816
|
] }),
|
|
3558
3817
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 min-h-[500px]", children: [
|
|
3559
3818
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-64 shrink-0 border border-border rounded-md overflow-hidden", children: [
|
|
@@ -3615,7 +3874,7 @@ function FileTreeEditor2({
|
|
|
3615
3874
|
] }),
|
|
3616
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: [
|
|
3617
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 }),
|
|
3618
|
-
/* @__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(
|
|
3619
3878
|
CodeEditor,
|
|
3620
3879
|
{
|
|
3621
3880
|
value: activeFile.content,
|
|
@@ -3645,19 +3904,19 @@ function TabButton({ label, active, onClick }) {
|
|
|
3645
3904
|
}
|
|
3646
3905
|
function ImportSkillDialog({ open, onOpenChange, onImported, existingFolders }) {
|
|
3647
3906
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
3648
|
-
const [tab, setTab] =
|
|
3649
|
-
const [entries, setEntries] =
|
|
3650
|
-
const [loading, setLoading] =
|
|
3651
|
-
const [error, setError] =
|
|
3652
|
-
const [search, setSearch] =
|
|
3653
|
-
const [selected, setSelected] =
|
|
3654
|
-
const [preview, setPreview] =
|
|
3655
|
-
const [previewLoading, setPreviewLoading] =
|
|
3656
|
-
const [importing, setImporting] =
|
|
3657
|
-
const [importError, setImportError] =
|
|
3658
|
-
const [url, setUrl] =
|
|
3659
|
-
const [urlImporting, setUrlImporting] =
|
|
3660
|
-
|
|
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(() => {
|
|
3661
3920
|
if (!open) return;
|
|
3662
3921
|
setLoading(true);
|
|
3663
3922
|
setError("");
|
|
@@ -3665,7 +3924,7 @@ function ImportSkillDialog({ open, onOpenChange, onImported, existingFolders })
|
|
|
3665
3924
|
setPreview("");
|
|
3666
3925
|
client.skillsDirectory.list(tab).then((data) => setEntries(data)).catch((err) => setError(err instanceof Error ? err.message : "Failed to load skills")).finally(() => setLoading(false));
|
|
3667
3926
|
}, [tab, open, client]);
|
|
3668
|
-
const filtered =
|
|
3927
|
+
const filtered = React4.useMemo(() => {
|
|
3669
3928
|
if (!search.trim()) return entries;
|
|
3670
3929
|
const q = search.toLowerCase();
|
|
3671
3930
|
return entries.filter(
|
|
@@ -3801,10 +4060,10 @@ function ImportSkillDialog({ open, onOpenChange, onImported, existingFolders })
|
|
|
3801
4060
|
}
|
|
3802
4061
|
function AgentSkillManager({ agentId, initialSkills, onSaved }) {
|
|
3803
4062
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
3804
|
-
const [importOpen, setImportOpen] =
|
|
3805
|
-
const [extraSkills, setExtraSkills] =
|
|
3806
|
-
const allSkills =
|
|
3807
|
-
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(
|
|
3808
4067
|
() => allSkills.flatMap(
|
|
3809
4068
|
(s) => s.files.map((f) => ({
|
|
3810
4069
|
path: s.folder === "(root)" ? f.path : `${s.folder}/${f.path}`,
|
|
@@ -3813,11 +4072,11 @@ function AgentSkillManager({ agentId, initialSkills, onSaved }) {
|
|
|
3813
4072
|
),
|
|
3814
4073
|
[allSkills]
|
|
3815
4074
|
);
|
|
3816
|
-
const existingFolders =
|
|
3817
|
-
const handleImported =
|
|
4075
|
+
const existingFolders = React4.useMemo(() => allSkills.map((s) => s.folder), [allSkills]);
|
|
4076
|
+
const handleImported = React4.useCallback((skill) => {
|
|
3818
4077
|
setExtraSkills((prev) => [...prev, skill]);
|
|
3819
4078
|
}, []);
|
|
3820
|
-
const handleSave =
|
|
4079
|
+
const handleSave = React4.useCallback(async (files) => {
|
|
3821
4080
|
const folderMap = /* @__PURE__ */ new Map();
|
|
3822
4081
|
for (const file of files) {
|
|
3823
4082
|
const slashIdx = file.path.lastIndexOf("/");
|
|
@@ -3839,7 +4098,6 @@ function AgentSkillManager({ agentId, initialSkills, onSaved }) {
|
|
|
3839
4098
|
onSaved?.();
|
|
3840
4099
|
}, [agentId, client, onSaved]);
|
|
3841
4100
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
3842
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Button, { size: "sm", variant: "outline", onClick: () => setImportOpen(true), children: "Import from skills.sh" }) }),
|
|
3843
4101
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3844
4102
|
FileTreeEditor2,
|
|
3845
4103
|
{
|
|
@@ -3851,7 +4109,8 @@ function AgentSkillManager({ agentId, initialSkills, onSaved }) {
|
|
|
3851
4109
|
newFileTemplate: {
|
|
3852
4110
|
filename: "SKILL.md",
|
|
3853
4111
|
content: "---\nname: New Skill\ndescription: Describe when this skill should be triggered\n---\n\n# Instructions\n\nDescribe what this skill does...\n"
|
|
3854
|
-
}
|
|
4112
|
+
},
|
|
4113
|
+
headerActions: /* @__PURE__ */ jsxRuntime.jsx(chunkXXF4U7WL_cjs.Button, { size: "sm", variant: "outline", onClick: () => setImportOpen(true), children: "Import from skills.sh" })
|
|
3855
4114
|
}
|
|
3856
4115
|
),
|
|
3857
4116
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -3867,24 +4126,24 @@ function AgentSkillManager({ agentId, initialSkills, onSaved }) {
|
|
|
3867
4126
|
}
|
|
3868
4127
|
function AgentPluginManager({ agentId, initialPlugins, onSaved }) {
|
|
3869
4128
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
3870
|
-
const [plugins, setPlugins] =
|
|
3871
|
-
const [saving, setSaving] =
|
|
3872
|
-
const [dialogOpen, setDialogOpen] =
|
|
3873
|
-
const [marketplaces, setMarketplaces] =
|
|
3874
|
-
const [selectedMarketplace, setSelectedMarketplace] =
|
|
3875
|
-
const [availablePlugins, setAvailablePlugins] =
|
|
3876
|
-
const [loadingPlugins, setLoadingPlugins] =
|
|
3877
|
-
const [marketplaceNames, setMarketplaceNames] =
|
|
3878
|
-
const savedSnapshot =
|
|
3879
|
-
|
|
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(() => {
|
|
3880
4139
|
savedSnapshot.current = JSON.stringify(initialPlugins);
|
|
3881
4140
|
setPlugins(initialPlugins);
|
|
3882
4141
|
}, [initialPlugins]);
|
|
3883
|
-
const isDirty =
|
|
4142
|
+
const isDirty = React4.useMemo(
|
|
3884
4143
|
() => JSON.stringify(plugins) !== savedSnapshot.current,
|
|
3885
4144
|
[plugins]
|
|
3886
4145
|
);
|
|
3887
|
-
|
|
4146
|
+
React4.useEffect(() => {
|
|
3888
4147
|
client.pluginMarketplaces.list().then((data) => {
|
|
3889
4148
|
setMarketplaces(data);
|
|
3890
4149
|
const names = {};
|
|
@@ -3893,7 +4152,7 @@ function AgentPluginManager({ agentId, initialPlugins, onSaved }) {
|
|
|
3893
4152
|
}).catch(() => {
|
|
3894
4153
|
});
|
|
3895
4154
|
}, [client]);
|
|
3896
|
-
const loadPluginsForMarketplace =
|
|
4155
|
+
const loadPluginsForMarketplace = React4.useCallback(async (marketplaceId) => {
|
|
3897
4156
|
setSelectedMarketplace(marketplaceId);
|
|
3898
4157
|
setLoadingPlugins(true);
|
|
3899
4158
|
setAvailablePlugins([]);
|
|
@@ -4081,15 +4340,15 @@ function AgentA2aInfo({
|
|
|
4081
4340
|
onChanged
|
|
4082
4341
|
}) {
|
|
4083
4342
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
4084
|
-
const [enabled, setEnabled] =
|
|
4085
|
-
const [toggling, setToggling] =
|
|
4086
|
-
const [detailsOpen, setDetailsOpen] =
|
|
4087
|
-
const [cardPreview, setCardPreview] =
|
|
4088
|
-
const [loading, setLoading] =
|
|
4089
|
-
const [tags, setTags] =
|
|
4090
|
-
const [tagInput, setTagInput] =
|
|
4091
|
-
const [savingTags, setSavingTags] =
|
|
4092
|
-
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);
|
|
4093
4352
|
const endpointUrl = `${baseUrl}/api/a2a/${tenantSlug}/${agentSlug}`;
|
|
4094
4353
|
const jsonRpcUrl = `${baseUrl}/api/a2a/${tenantSlug}/${agentSlug}/jsonrpc`;
|
|
4095
4354
|
const agentCardUrl = `${baseUrl}/api/a2a/${tenantSlug}/${agentSlug}/.well-known/agent-card.json`;
|
|
@@ -4259,7 +4518,7 @@ function AgentA2aInfo({
|
|
|
4259
4518
|
] })
|
|
4260
4519
|
] });
|
|
4261
4520
|
}
|
|
4262
|
-
var AgentIdentityTab =
|
|
4521
|
+
var AgentIdentityTab = React4.lazy(() => import('./agent-identity-tab-YGMVWOWT.cjs').then((m) => ({ default: m.AgentIdentityTab })));
|
|
4263
4522
|
function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, adminApiBaseUrl, adminApiKey }) {
|
|
4264
4523
|
const { LinkComponent, basePath } = chunkXXF4U7WL_cjs.useNavigation();
|
|
4265
4524
|
const { mutate } = swr.useSWRConfig();
|
|
@@ -4268,10 +4527,10 @@ function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, adminApiBaseUrl, adm
|
|
|
4268
4527
|
cacheKey,
|
|
4269
4528
|
(client) => client.agents.get(agentId)
|
|
4270
4529
|
);
|
|
4271
|
-
const invalidate =
|
|
4530
|
+
const invalidate = React4.useCallback(() => {
|
|
4272
4531
|
mutate(cacheKey);
|
|
4273
4532
|
}, [mutate, cacheKey]);
|
|
4274
|
-
const adminFetch =
|
|
4533
|
+
const adminFetch = React4.useCallback(async (path, options) => {
|
|
4275
4534
|
if (!adminApiBaseUrl) throw new Error("Admin API not configured");
|
|
4276
4535
|
const res = await fetch(`${adminApiBaseUrl}${path}`, {
|
|
4277
4536
|
...options,
|
|
@@ -4287,7 +4546,7 @@ function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, adminApiBaseUrl, adm
|
|
|
4287
4546
|
}
|
|
4288
4547
|
return res.json();
|
|
4289
4548
|
}, [adminApiBaseUrl, adminApiKey]);
|
|
4290
|
-
const soulCallbacks =
|
|
4549
|
+
const soulCallbacks = React4.useMemo(() => {
|
|
4291
4550
|
if (!adminApiBaseUrl) return {};
|
|
4292
4551
|
return {
|
|
4293
4552
|
onGenerateSoul: async () => {
|
|
@@ -4374,7 +4633,7 @@ function AgentDetailPage({ agentId, a2aBaseUrl, tenantSlug, adminApiBaseUrl, adm
|
|
|
4374
4633
|
},
|
|
4375
4634
|
{
|
|
4376
4635
|
label: "Identity",
|
|
4377
|
-
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 }) })
|
|
4378
4637
|
},
|
|
4379
4638
|
{
|
|
4380
4639
|
label: "Connectors",
|
|
@@ -4459,12 +4718,12 @@ function ScheduleCard({
|
|
|
4459
4718
|
schedule,
|
|
4460
4719
|
timezone
|
|
4461
4720
|
}) {
|
|
4462
|
-
const [frequency, setFrequency] =
|
|
4463
|
-
const [time, setTime] =
|
|
4464
|
-
const [dayOfWeek, setDayOfWeek] =
|
|
4465
|
-
const [prompt, setPrompt] =
|
|
4466
|
-
const [enabled, setEnabled] =
|
|
4467
|
-
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 ?? "");
|
|
4468
4727
|
const showTimePicker = ["daily", "weekdays", "weekly"].includes(frequency);
|
|
4469
4728
|
const showDayPicker = frequency === "weekly";
|
|
4470
4729
|
const canEnable = frequency !== "manual";
|
|
@@ -4567,7 +4826,7 @@ function MarkdownContent({ children }) {
|
|
|
4567
4826
|
) });
|
|
4568
4827
|
}
|
|
4569
4828
|
function CollapsibleJson({ data, maxHeight = "12rem" }) {
|
|
4570
|
-
const [expanded, setExpanded] =
|
|
4829
|
+
const [expanded, setExpanded] = React4.useState(false);
|
|
4571
4830
|
const json = typeof data === "string" ? data : JSON.stringify(data, null, 2);
|
|
4572
4831
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
4573
4832
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -4713,7 +4972,7 @@ function renderEvent(event, idx) {
|
|
|
4713
4972
|
/* @__PURE__ */ jsxRuntime.jsx(CollapsibleJson, { data: event, maxHeight: "8rem" })
|
|
4714
4973
|
] }, idx);
|
|
4715
4974
|
}
|
|
4716
|
-
var
|
|
4975
|
+
var TERMINAL_STATUSES2 = /* @__PURE__ */ new Set(["completed", "failed", "cancelled", "timed_out"]);
|
|
4717
4976
|
function PlaygroundPage({ agentId }) {
|
|
4718
4977
|
const client = chunkXXF4U7WL_cjs.useAgentPlaneClient();
|
|
4719
4978
|
const { LinkComponent, basePath } = chunkXXF4U7WL_cjs.useNavigation();
|
|
@@ -4721,30 +4980,30 @@ function PlaygroundPage({ agentId }) {
|
|
|
4721
4980
|
`agent-${agentId}`,
|
|
4722
4981
|
(c) => c.agents.get(agentId)
|
|
4723
4982
|
);
|
|
4724
|
-
const [prompt, setPrompt] =
|
|
4725
|
-
const [events, setEvents] =
|
|
4726
|
-
const [streamingText, setStreamingText] =
|
|
4727
|
-
const [running, setRunning] =
|
|
4728
|
-
const [polling, setPolling] =
|
|
4729
|
-
const [error, setError] =
|
|
4730
|
-
const [sessionId, setSessionId] =
|
|
4731
|
-
const sessionIdRef =
|
|
4732
|
-
const abortRef =
|
|
4733
|
-
const runIdRef =
|
|
4734
|
-
const streamRef =
|
|
4735
|
-
const scrollRef =
|
|
4736
|
-
const textareaRef =
|
|
4737
|
-
|
|
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(() => {
|
|
4738
4997
|
const el = scrollRef.current;
|
|
4739
4998
|
if (el) el.scrollTop = el.scrollHeight;
|
|
4740
4999
|
}, [events, streamingText]);
|
|
4741
|
-
|
|
5000
|
+
React4.useEffect(() => {
|
|
4742
5001
|
return () => {
|
|
4743
5002
|
abortRef.current?.abort();
|
|
4744
5003
|
streamRef.current?.abort();
|
|
4745
5004
|
};
|
|
4746
5005
|
}, []);
|
|
4747
|
-
const pollForFinalResult =
|
|
5006
|
+
const pollForFinalResult = React4.useCallback(async (runId) => {
|
|
4748
5007
|
setPolling(true);
|
|
4749
5008
|
let delay = 3e3;
|
|
4750
5009
|
const maxDelay = 1e4;
|
|
@@ -4755,7 +5014,7 @@ function PlaygroundPage({ agentId }) {
|
|
|
4755
5014
|
if (abortRef.current?.signal.aborted) break;
|
|
4756
5015
|
try {
|
|
4757
5016
|
const run = await client.runs.get(runId);
|
|
4758
|
-
if (
|
|
5017
|
+
if (TERMINAL_STATUSES2.has(run.status)) {
|
|
4759
5018
|
try {
|
|
4760
5019
|
const transcriptEvents = await client.runs.transcriptArray(runId);
|
|
4761
5020
|
if (transcriptEvents.length > 0) {
|
|
@@ -4800,7 +5059,7 @@ function PlaygroundPage({ agentId }) {
|
|
|
4800
5059
|
streamRef.current = null;
|
|
4801
5060
|
}
|
|
4802
5061
|
}, [client]);
|
|
4803
|
-
const consumeStream =
|
|
5062
|
+
const consumeStream = React4.useCallback(async (stream) => {
|
|
4804
5063
|
streamRef.current = stream;
|
|
4805
5064
|
let handedOffToPoll = false;
|
|
4806
5065
|
try {
|
|
@@ -4838,7 +5097,7 @@ function PlaygroundPage({ agentId }) {
|
|
|
4838
5097
|
}
|
|
4839
5098
|
}
|
|
4840
5099
|
}, [pollForFinalResult]);
|
|
4841
|
-
const handleSend =
|
|
5100
|
+
const handleSend = React4.useCallback(async () => {
|
|
4842
5101
|
if (!prompt.trim() || running) return;
|
|
4843
5102
|
const messageText = prompt.trim();
|
|
4844
5103
|
setPrompt("");
|
|
@@ -4991,6 +5250,122 @@ function PlaygroundPage({ agentId }) {
|
|
|
4991
5250
|
] })
|
|
4992
5251
|
] });
|
|
4993
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
|
+
}
|
|
4994
5369
|
|
|
4995
5370
|
Object.defineProperty(exports, "Card", {
|
|
4996
5371
|
enumerable: true,
|
|
@@ -5129,6 +5504,18 @@ exports.SettingsPage = SettingsPage;
|
|
|
5129
5504
|
exports.Tabs = Tabs;
|
|
5130
5505
|
exports.Textarea = Textarea;
|
|
5131
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;
|
|
5132
5515
|
exports.ToolkitMultiselect = ToolkitMultiselect;
|
|
5133
5516
|
exports.TranscriptViewer = TranscriptViewer;
|
|
5134
5517
|
exports.parsePaginationParams = parsePaginationParams;
|
|
5518
|
+
exports.toast = toast;
|
|
5519
|
+
exports.toastVariants = toastVariants;
|
|
5520
|
+
exports.useRunStream = useRunStream;
|
|
5521
|
+
exports.useToast = useToast;
|