@tangle-network/sandbox-ui 0.3.3 → 0.3.5
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/auth.d.ts +15 -1
- package/dist/auth.js +3 -1
- package/dist/chunk-HY5IBRCE.js +1171 -0
- package/dist/{chunk-COCSO7FG.js → chunk-PCTEG6HR.js} +69 -1
- package/dist/{chunk-67C53XVV.js → chunk-QGI5E7JD.js} +1 -1
- package/dist/dashboard.d.ts +3 -113
- package/dist/dashboard.js +13 -1
- package/dist/index-BOjBJwzD.d.ts +219 -0
- package/dist/index.d.ts +2 -2
- package/dist/index.js +103 -6
- package/dist/pages.d.ts +25 -1
- package/dist/pages.js +541 -221
- package/dist/tokens.css +111 -1
- package/dist/workspace.d.ts +1 -1
- package/dist/workspace.js +1 -1
- package/package.json +1 -1
- package/tailwind.config.cjs +39 -0
- package/dist/chunk-OM6ON27W.js +0 -829
package/dist/pages.js
CHANGED
|
@@ -291,9 +291,328 @@ function BillingPage({
|
|
|
291
291
|
] }) });
|
|
292
292
|
}
|
|
293
293
|
|
|
294
|
-
// src/pages/
|
|
294
|
+
// src/pages/provisioning-wizard.tsx
|
|
295
295
|
import * as React2 from "react";
|
|
296
296
|
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
297
|
+
function MaterialIcon({ name, className }) {
|
|
298
|
+
return /* @__PURE__ */ jsx2("span", { className: cn("material-symbols-outlined", className), style: { fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24" }, children: name });
|
|
299
|
+
}
|
|
300
|
+
var defaultEnvironments = [
|
|
301
|
+
{ id: "node", name: "Node.js", description: "v20.x LTS with optimized runtime for asynchronous event-driven agents.", icon: /* @__PURE__ */ jsx2("span", { className: "text-green-400 text-2xl font-bold", children: "N" }), color: "green" },
|
|
302
|
+
{ id: "python", name: "Python", description: "v3.11 pre-installed with PyTorch and common data science libraries.", icon: /* @__PURE__ */ jsx2("span", { className: "text-blue-400 text-2xl font-bold", children: "Py" }), color: "blue" },
|
|
303
|
+
{ id: "ubuntu", name: "Ubuntu", description: "Full 22.04 LTS terminal access for custom containerized workloads.", icon: /* @__PURE__ */ jsx2("span", { className: "text-orange-400 text-2xl font-bold", children: "U" }), color: "orange" }
|
|
304
|
+
];
|
|
305
|
+
var STEPS = ["Stack", "Resources", "Agent", "Review"];
|
|
306
|
+
var CPU_MIN = 0.5;
|
|
307
|
+
var CPU_MAX = 8;
|
|
308
|
+
var RAM_MIN = 2;
|
|
309
|
+
var RAM_MAX = 32;
|
|
310
|
+
var STORAGE_MIN = 20;
|
|
311
|
+
var STORAGE_MAX = 512;
|
|
312
|
+
function calcCost(cpu, ram) {
|
|
313
|
+
const cost = cpu * 0.045 + ram * 5e-3;
|
|
314
|
+
return cost.toFixed(2);
|
|
315
|
+
}
|
|
316
|
+
function ProvisioningWizard({
|
|
317
|
+
environments = defaultEnvironments,
|
|
318
|
+
onSubmit,
|
|
319
|
+
onBack,
|
|
320
|
+
className
|
|
321
|
+
}) {
|
|
322
|
+
const [step, setStep] = React2.useState(0);
|
|
323
|
+
const [selectedEnv, setSelectedEnv] = React2.useState(environments[0]?.id ?? "");
|
|
324
|
+
const [cpuCores, setCpuCores] = React2.useState(4);
|
|
325
|
+
const [ramGB, setRamGB] = React2.useState(16);
|
|
326
|
+
const [storageGB, setStorageGB] = React2.useState(128);
|
|
327
|
+
const [modelTier, setModelTier] = React2.useState("llama-3-8b");
|
|
328
|
+
const [systemPrompt, setSystemPrompt] = React2.useState("");
|
|
329
|
+
const handleNext = () => {
|
|
330
|
+
if (step < STEPS.length - 1) setStep(step + 1);
|
|
331
|
+
else onSubmit?.({ environment: selectedEnv, cpuCores, ramGB, storageGB, modelTier, systemPrompt });
|
|
332
|
+
};
|
|
333
|
+
const handleBack = () => {
|
|
334
|
+
if (step > 0) setStep(step - 1);
|
|
335
|
+
else onBack?.();
|
|
336
|
+
};
|
|
337
|
+
const hourCost = calcCost(cpuCores, ramGB);
|
|
338
|
+
return /* @__PURE__ */ jsxs2("div", { className: cn("max-w-6xl mx-auto", className), children: [
|
|
339
|
+
/* @__PURE__ */ jsxs2("div", { className: "mb-12", children: [
|
|
340
|
+
/* @__PURE__ */ jsx2("h1", { className: "text-4xl font-extrabold tracking-tight text-white mb-2", children: "Sandbox Provisioning" }),
|
|
341
|
+
/* @__PURE__ */ jsx2("p", { className: "text-on-surface-variant max-w-2xl", children: "Configure your high-performance orchestration environment. Select your stack, allocate resources, and prime your agent for deployment." })
|
|
342
|
+
] }),
|
|
343
|
+
/* @__PURE__ */ jsx2("div", { className: "grid grid-cols-4 gap-4 mb-12", children: STEPS.map((label, i) => /* @__PURE__ */ jsxs2("div", { className: "relative pt-4", children: [
|
|
344
|
+
/* @__PURE__ */ jsx2("div", { className: cn("h-1 w-full rounded-full", i <= step ? "bg-md3-primary" : i === step + 1 ? "bg-md3-primary/40" : "bg-surface-container-highest") }),
|
|
345
|
+
/* @__PURE__ */ jsxs2("span", { className: cn("absolute top-0 left-0 font-mono text-[10px] uppercase tracking-widest font-bold", i <= step ? "text-md3-primary" : "text-surface-variant"), children: [
|
|
346
|
+
String(i + 1).padStart(2, "0"),
|
|
347
|
+
" ",
|
|
348
|
+
label
|
|
349
|
+
] })
|
|
350
|
+
] }, label)) }),
|
|
351
|
+
/* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-12 gap-8 items-start", children: [
|
|
352
|
+
/* @__PURE__ */ jsxs2("div", { className: "col-span-12 xl:col-span-8 space-y-8", children: [
|
|
353
|
+
/* @__PURE__ */ jsxs2("section", { className: "bg-surface-container-low rounded-xl p-8 shadow-sm", children: [
|
|
354
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-4 mb-8", children: [
|
|
355
|
+
/* @__PURE__ */ jsx2("div", { className: "w-10 h-10 rounded-lg bg-md3-primary/10 flex items-center justify-center text-md3-primary", children: /* @__PURE__ */ jsx2(MaterialIcon, { name: "layers" }) }),
|
|
356
|
+
/* @__PURE__ */ jsx2("h2", { className: "text-xl font-bold", children: "Environment Selection" })
|
|
357
|
+
] }),
|
|
358
|
+
/* @__PURE__ */ jsx2("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: environments.map((env) => /* @__PURE__ */ jsxs2(
|
|
359
|
+
"button",
|
|
360
|
+
{
|
|
361
|
+
type: "button",
|
|
362
|
+
onClick: () => setSelectedEnv(env.id),
|
|
363
|
+
className: cn(
|
|
364
|
+
"group relative p-6 rounded-xl bg-surface-container cursor-pointer hover:bg-surface-container-high transition-all text-left",
|
|
365
|
+
selectedEnv === env.id ? "border border-md3-primary/20" : "border border-outline-variant/10"
|
|
366
|
+
),
|
|
367
|
+
children: [
|
|
368
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-start mb-4", children: [
|
|
369
|
+
/* @__PURE__ */ jsx2("div", { className: cn("w-12 h-12 rounded-full flex items-center justify-center", `bg-${env.color}-500/10`), children: env.icon }),
|
|
370
|
+
/* @__PURE__ */ jsx2("div", { className: cn("w-5 h-5 rounded-full border-2 flex items-center justify-center", selectedEnv === env.id ? "border-md3-primary" : "border-outline-variant/30"), children: selectedEnv === env.id && /* @__PURE__ */ jsx2("div", { className: "w-2.5 h-2.5 bg-md3-primary rounded-full" }) })
|
|
371
|
+
] }),
|
|
372
|
+
/* @__PURE__ */ jsx2("h3", { className: "font-bold text-lg mb-1", children: env.name }),
|
|
373
|
+
/* @__PURE__ */ jsx2("p", { className: "text-xs text-on-surface-variant leading-relaxed", children: env.description })
|
|
374
|
+
]
|
|
375
|
+
},
|
|
376
|
+
env.id
|
|
377
|
+
)) })
|
|
378
|
+
] }),
|
|
379
|
+
/* @__PURE__ */ jsxs2("section", { className: "bg-surface-container-low rounded-xl p-8 shadow-sm", children: [
|
|
380
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-4 mb-8", children: [
|
|
381
|
+
/* @__PURE__ */ jsx2("div", { className: "w-10 h-10 rounded-lg bg-md3-primary/10 flex items-center justify-center text-md3-primary", children: /* @__PURE__ */ jsx2(MaterialIcon, { name: "memory" }) }),
|
|
382
|
+
/* @__PURE__ */ jsx2("h2", { className: "text-xl font-bold", children: "Resource Allocation" })
|
|
383
|
+
] }),
|
|
384
|
+
/* @__PURE__ */ jsxs2("div", { className: "space-y-10", children: [
|
|
385
|
+
/* @__PURE__ */ jsxs2("div", { className: "space-y-4", children: [
|
|
386
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-end", children: [
|
|
387
|
+
/* @__PURE__ */ jsx2("label", { className: "font-mono text-xs uppercase tracking-widest text-on-surface-variant", children: "Compute Cores (CPU)" }),
|
|
388
|
+
/* @__PURE__ */ jsxs2("span", { className: "text-2xl font-bold text-md3-primary", children: [
|
|
389
|
+
cpuCores,
|
|
390
|
+
" ",
|
|
391
|
+
/* @__PURE__ */ jsx2("span", { className: "text-xs text-on-surface-variant", children: "vCPUs" })
|
|
392
|
+
] })
|
|
393
|
+
] }),
|
|
394
|
+
/* @__PURE__ */ jsx2(
|
|
395
|
+
"input",
|
|
396
|
+
{
|
|
397
|
+
type: "range",
|
|
398
|
+
min: CPU_MIN,
|
|
399
|
+
max: CPU_MAX,
|
|
400
|
+
step: 0.5,
|
|
401
|
+
value: cpuCores,
|
|
402
|
+
onChange: (e) => setCpuCores(+e.target.value),
|
|
403
|
+
className: "w-full h-2 bg-surface-container-highest rounded-full appearance-none cursor-pointer accent-violet-500"
|
|
404
|
+
}
|
|
405
|
+
),
|
|
406
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono text-surface-variant", children: [
|
|
407
|
+
/* @__PURE__ */ jsxs2("span", { children: [
|
|
408
|
+
CPU_MIN,
|
|
409
|
+
" vCPU"
|
|
410
|
+
] }),
|
|
411
|
+
/* @__PURE__ */ jsxs2("span", { children: [
|
|
412
|
+
CPU_MAX,
|
|
413
|
+
" vCPU"
|
|
414
|
+
] })
|
|
415
|
+
] })
|
|
416
|
+
] }),
|
|
417
|
+
/* @__PURE__ */ jsxs2("div", { className: "space-y-4", children: [
|
|
418
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-end", children: [
|
|
419
|
+
/* @__PURE__ */ jsx2("label", { className: "font-mono text-xs uppercase tracking-widest text-on-surface-variant", children: "Memory (RAM)" }),
|
|
420
|
+
/* @__PURE__ */ jsxs2("span", { className: "text-2xl font-bold text-md3-primary", children: [
|
|
421
|
+
ramGB,
|
|
422
|
+
" ",
|
|
423
|
+
/* @__PURE__ */ jsx2("span", { className: "text-xs text-on-surface-variant", children: "GB" })
|
|
424
|
+
] })
|
|
425
|
+
] }),
|
|
426
|
+
/* @__PURE__ */ jsx2(
|
|
427
|
+
"input",
|
|
428
|
+
{
|
|
429
|
+
type: "range",
|
|
430
|
+
min: RAM_MIN,
|
|
431
|
+
max: RAM_MAX,
|
|
432
|
+
step: 1,
|
|
433
|
+
value: ramGB,
|
|
434
|
+
onChange: (e) => setRamGB(+e.target.value),
|
|
435
|
+
className: "w-full h-2 bg-surface-container-highest rounded-full appearance-none cursor-pointer accent-violet-500"
|
|
436
|
+
}
|
|
437
|
+
),
|
|
438
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono text-surface-variant", children: [
|
|
439
|
+
/* @__PURE__ */ jsxs2("span", { children: [
|
|
440
|
+
RAM_MIN,
|
|
441
|
+
" GB"
|
|
442
|
+
] }),
|
|
443
|
+
/* @__PURE__ */ jsxs2("span", { children: [
|
|
444
|
+
RAM_MAX,
|
|
445
|
+
" GB"
|
|
446
|
+
] })
|
|
447
|
+
] })
|
|
448
|
+
] }),
|
|
449
|
+
/* @__PURE__ */ jsxs2("div", { className: "space-y-4", children: [
|
|
450
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-end", children: [
|
|
451
|
+
/* @__PURE__ */ jsx2("label", { className: "font-mono text-xs uppercase tracking-widest text-on-surface-variant", children: "Ephemeral Storage" }),
|
|
452
|
+
/* @__PURE__ */ jsxs2("span", { className: "text-2xl font-bold text-md3-primary", children: [
|
|
453
|
+
storageGB,
|
|
454
|
+
" ",
|
|
455
|
+
/* @__PURE__ */ jsx2("span", { className: "text-xs text-on-surface-variant", children: "GB" })
|
|
456
|
+
] })
|
|
457
|
+
] }),
|
|
458
|
+
/* @__PURE__ */ jsx2(
|
|
459
|
+
"input",
|
|
460
|
+
{
|
|
461
|
+
type: "range",
|
|
462
|
+
min: STORAGE_MIN,
|
|
463
|
+
max: STORAGE_MAX,
|
|
464
|
+
step: 8,
|
|
465
|
+
value: storageGB,
|
|
466
|
+
onChange: (e) => setStorageGB(+e.target.value),
|
|
467
|
+
className: "w-full h-2 bg-surface-container-highest rounded-full appearance-none cursor-pointer accent-violet-500"
|
|
468
|
+
}
|
|
469
|
+
),
|
|
470
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono text-surface-variant", children: [
|
|
471
|
+
/* @__PURE__ */ jsxs2("span", { children: [
|
|
472
|
+
STORAGE_MIN,
|
|
473
|
+
" GB"
|
|
474
|
+
] }),
|
|
475
|
+
/* @__PURE__ */ jsxs2("span", { children: [
|
|
476
|
+
STORAGE_MAX,
|
|
477
|
+
" GB"
|
|
478
|
+
] })
|
|
479
|
+
] })
|
|
480
|
+
] })
|
|
481
|
+
] })
|
|
482
|
+
] }),
|
|
483
|
+
/* @__PURE__ */ jsxs2("section", { className: "bg-surface-container-low rounded-xl p-8 shadow-sm", children: [
|
|
484
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-4 mb-8", children: [
|
|
485
|
+
/* @__PURE__ */ jsx2("div", { className: "w-10 h-10 rounded-lg bg-md3-primary/10 flex items-center justify-center text-md3-primary", children: /* @__PURE__ */ jsx2(MaterialIcon, { name: "smart_toy" }) }),
|
|
486
|
+
/* @__PURE__ */ jsx2("h2", { className: "text-xl font-bold", children: "AI Agent Configuration" })
|
|
487
|
+
] }),
|
|
488
|
+
/* @__PURE__ */ jsxs2("div", { className: "space-y-6", children: [
|
|
489
|
+
/* @__PURE__ */ jsxs2("div", { children: [
|
|
490
|
+
/* @__PURE__ */ jsx2("label", { className: "block font-mono text-xs uppercase tracking-widest text-on-surface-variant mb-3", children: "Model Tier" }),
|
|
491
|
+
/* @__PURE__ */ jsxs2(
|
|
492
|
+
"select",
|
|
493
|
+
{
|
|
494
|
+
value: modelTier,
|
|
495
|
+
onChange: (e) => setModelTier(e.target.value),
|
|
496
|
+
className: "w-full bg-surface-container-highest border-none rounded-xl h-12 px-4 font-mono text-sm focus:ring-2 focus:ring-md3-primary/40 text-on-surface",
|
|
497
|
+
children: [
|
|
498
|
+
/* @__PURE__ */ jsx2("option", { value: "llama-3-8b", children: "Llama-3-8B-Instruct (Lightweight)" }),
|
|
499
|
+
/* @__PURE__ */ jsx2("option", { value: "mistral-7b", children: "Mistral-7B-v0.2 (Efficient)" }),
|
|
500
|
+
/* @__PURE__ */ jsx2("option", { value: "claude-sonnet", children: "Claude Sonnet 4.6 (Capable)" })
|
|
501
|
+
]
|
|
502
|
+
}
|
|
503
|
+
)
|
|
504
|
+
] }),
|
|
505
|
+
/* @__PURE__ */ jsxs2("div", { children: [
|
|
506
|
+
/* @__PURE__ */ jsx2("label", { className: "block font-mono text-xs uppercase tracking-widest text-on-surface-variant mb-3", children: "Initial System Prompt" }),
|
|
507
|
+
/* @__PURE__ */ jsx2(
|
|
508
|
+
"textarea",
|
|
509
|
+
{
|
|
510
|
+
value: systemPrompt,
|
|
511
|
+
onChange: (e) => setSystemPrompt(e.target.value),
|
|
512
|
+
className: "w-full bg-surface-container-lowest border-none rounded-xl p-6 font-mono text-sm focus:ring-2 focus:ring-md3-primary/40 h-40 resize-none text-primary-fixed-dim",
|
|
513
|
+
placeholder: "Define the core persona of your agent..."
|
|
514
|
+
}
|
|
515
|
+
)
|
|
516
|
+
] })
|
|
517
|
+
] })
|
|
518
|
+
] }),
|
|
519
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-center py-4", children: [
|
|
520
|
+
/* @__PURE__ */ jsxs2("button", { type: "button", onClick: handleBack, className: "px-8 py-3 rounded-xl border border-outline-variant/20 hover:bg-surface-container-high transition-colors text-sm font-bold flex items-center gap-2", children: [
|
|
521
|
+
/* @__PURE__ */ jsx2(MaterialIcon, { name: "arrow_back", className: "text-lg" }),
|
|
522
|
+
"Back"
|
|
523
|
+
] }),
|
|
524
|
+
/* @__PURE__ */ jsxs2("button", { type: "button", onClick: handleNext, className: "px-10 py-3 bg-gradient-to-br from-md3-primary to-primary-container text-on-primary font-bold rounded-xl shadow-lg shadow-md3-primary/20 flex items-center gap-2 group", children: [
|
|
525
|
+
step < STEPS.length - 1 ? "Continue to Review" : "Launch Sandbox",
|
|
526
|
+
/* @__PURE__ */ jsx2(MaterialIcon, { name: "arrow_forward", className: "group-hover:translate-x-1 transition-transform" })
|
|
527
|
+
] })
|
|
528
|
+
] })
|
|
529
|
+
] }),
|
|
530
|
+
/* @__PURE__ */ jsxs2("div", { className: "col-span-12 xl:col-span-4 sticky top-24 space-y-8", children: [
|
|
531
|
+
/* @__PURE__ */ jsxs2("div", { className: "bg-surface-container-lowest rounded-xl overflow-hidden shadow-2xl", children: [
|
|
532
|
+
/* @__PURE__ */ jsxs2("div", { className: "bg-surface-container-high px-4 py-3 flex items-center justify-between", children: [
|
|
533
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex gap-2", children: [
|
|
534
|
+
/* @__PURE__ */ jsx2("div", { className: "w-3 h-3 rounded-full bg-red-500/50" }),
|
|
535
|
+
/* @__PURE__ */ jsx2("div", { className: "w-3 h-3 rounded-full bg-yellow-500/50" }),
|
|
536
|
+
/* @__PURE__ */ jsx2("div", { className: "w-3 h-3 rounded-full bg-green-500/50" })
|
|
537
|
+
] }),
|
|
538
|
+
/* @__PURE__ */ jsx2("div", { className: "font-mono text-[10px] text-slate-500 uppercase tracking-tighter", children: "config_stream.sh" }),
|
|
539
|
+
/* @__PURE__ */ jsx2("div", {})
|
|
540
|
+
] }),
|
|
541
|
+
/* @__PURE__ */ jsxs2("div", { className: "p-6 font-mono text-xs space-y-3 min-h-[300px]", children: [
|
|
542
|
+
/* @__PURE__ */ jsx2("div", { className: "text-green-400", children: "$ tangle-cli provision --new" }),
|
|
543
|
+
/* @__PURE__ */ jsx2("div", { className: "text-slate-500", children: "Initializing handshake..." }),
|
|
544
|
+
/* @__PURE__ */ jsxs2("div", { className: "text-slate-300", children: [
|
|
545
|
+
/* @__PURE__ */ jsx2("span", { className: "text-violet-400", children: "\u2713" }),
|
|
546
|
+
" Platform: ",
|
|
547
|
+
/* @__PURE__ */ jsx2("span", { className: "text-white", children: environments.find((e) => e.id === selectedEnv)?.name ?? "Node.js" })
|
|
548
|
+
] }),
|
|
549
|
+
/* @__PURE__ */ jsxs2("div", { className: "text-slate-300", children: [
|
|
550
|
+
/* @__PURE__ */ jsx2("span", { className: "text-violet-400", children: "\u2713" }),
|
|
551
|
+
" Compute: ",
|
|
552
|
+
/* @__PURE__ */ jsxs2("span", { className: "text-white", children: [
|
|
553
|
+
cpuCores,
|
|
554
|
+
" vCPUs"
|
|
555
|
+
] })
|
|
556
|
+
] }),
|
|
557
|
+
/* @__PURE__ */ jsxs2("div", { className: "text-slate-300", children: [
|
|
558
|
+
/* @__PURE__ */ jsx2("span", { className: "text-violet-400", children: "\u2713" }),
|
|
559
|
+
" Memory: ",
|
|
560
|
+
/* @__PURE__ */ jsxs2("span", { className: "text-white", children: [
|
|
561
|
+
ramGB,
|
|
562
|
+
"GB"
|
|
563
|
+
] })
|
|
564
|
+
] }),
|
|
565
|
+
/* @__PURE__ */ jsxs2("div", { className: "text-slate-300", children: [
|
|
566
|
+
/* @__PURE__ */ jsx2("span", { className: "text-violet-400", children: "\u2713" }),
|
|
567
|
+
" Disk: ",
|
|
568
|
+
/* @__PURE__ */ jsxs2("span", { className: "text-white", children: [
|
|
569
|
+
storageGB,
|
|
570
|
+
"GB NVMe"
|
|
571
|
+
] })
|
|
572
|
+
] }),
|
|
573
|
+
/* @__PURE__ */ jsxs2("div", { className: "pt-4 flex items-center gap-2", children: [
|
|
574
|
+
/* @__PURE__ */ jsx2("div", { className: "w-2 h-4 bg-md3-primary animate-pulse" }),
|
|
575
|
+
/* @__PURE__ */ jsx2("span", { className: "text-slate-500", children: "Ready for review..." })
|
|
576
|
+
] })
|
|
577
|
+
] })
|
|
578
|
+
] }),
|
|
579
|
+
/* @__PURE__ */ jsxs2("div", { className: "p-6 rounded-xl bg-gradient-to-br from-violet-500/10 to-transparent border border-violet-500/20 backdrop-blur-[20px]", children: [
|
|
580
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex justify-between items-center mb-4", children: [
|
|
581
|
+
/* @__PURE__ */ jsx2("span", { className: "text-sm font-bold text-on-surface-variant", children: "Estimated Run Cost" }),
|
|
582
|
+
/* @__PURE__ */ jsx2(MaterialIcon, { name: "info", className: "text-violet-400" })
|
|
583
|
+
] }),
|
|
584
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-2 mb-6", children: [
|
|
585
|
+
/* @__PURE__ */ jsxs2("span", { className: "text-4xl font-extrabold text-white", children: [
|
|
586
|
+
"$",
|
|
587
|
+
hourCost
|
|
588
|
+
] }),
|
|
589
|
+
/* @__PURE__ */ jsx2("span", { className: "text-on-surface-variant text-sm", children: "/ hour" })
|
|
590
|
+
] }),
|
|
591
|
+
/* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
|
|
592
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono uppercase tracking-widest text-slate-500", children: [
|
|
593
|
+
/* @__PURE__ */ jsx2("span", { children: "Compute" }),
|
|
594
|
+
/* @__PURE__ */ jsxs2("span", { className: "text-slate-300", children: [
|
|
595
|
+
"$",
|
|
596
|
+
(cpuCores * 0.045).toFixed(2)
|
|
597
|
+
] })
|
|
598
|
+
] }),
|
|
599
|
+
/* @__PURE__ */ jsxs2("div", { className: "flex justify-between text-[10px] font-mono uppercase tracking-widest text-slate-500", children: [
|
|
600
|
+
/* @__PURE__ */ jsx2("span", { children: "Memory" }),
|
|
601
|
+
/* @__PURE__ */ jsxs2("span", { className: "text-slate-300", children: [
|
|
602
|
+
"$",
|
|
603
|
+
(ramGB * 5e-3).toFixed(2)
|
|
604
|
+
] })
|
|
605
|
+
] })
|
|
606
|
+
] })
|
|
607
|
+
] })
|
|
608
|
+
] })
|
|
609
|
+
] })
|
|
610
|
+
] });
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
// src/pages/pricing-page.tsx
|
|
614
|
+
import * as React3 from "react";
|
|
615
|
+
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
297
616
|
var variantColors = {
|
|
298
617
|
sandbox: {
|
|
299
618
|
accent: "text-[var(--accent-text)]",
|
|
@@ -309,15 +628,15 @@ async function fetchTiersFromApi(apiBasePath) {
|
|
|
309
628
|
return data.tiers || data;
|
|
310
629
|
}
|
|
311
630
|
function PricingPageSkeleton() {
|
|
312
|
-
return /* @__PURE__ */
|
|
313
|
-
/* @__PURE__ */
|
|
314
|
-
/* @__PURE__ */
|
|
315
|
-
/* @__PURE__ */
|
|
631
|
+
return /* @__PURE__ */ jsxs3("div", { className: "space-y-8", children: [
|
|
632
|
+
/* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-center gap-4", children: [
|
|
633
|
+
/* @__PURE__ */ jsx3(Skeleton, { className: "h-10 w-24" }),
|
|
634
|
+
/* @__PURE__ */ jsx3(Skeleton, { className: "h-10 w-24" })
|
|
316
635
|
] }),
|
|
317
|
-
/* @__PURE__ */
|
|
318
|
-
/* @__PURE__ */
|
|
319
|
-
/* @__PURE__ */
|
|
320
|
-
/* @__PURE__ */
|
|
636
|
+
/* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: [
|
|
637
|
+
/* @__PURE__ */ jsx3(SkeletonCard, { className: "h-96" }),
|
|
638
|
+
/* @__PURE__ */ jsx3(SkeletonCard, { className: "h-96" }),
|
|
639
|
+
/* @__PURE__ */ jsx3(SkeletonCard, { className: "h-96" })
|
|
321
640
|
] })
|
|
322
641
|
] });
|
|
323
642
|
}
|
|
@@ -325,8 +644,8 @@ function PricingPageError({
|
|
|
325
644
|
message,
|
|
326
645
|
onRetry
|
|
327
646
|
}) {
|
|
328
|
-
return /* @__PURE__ */
|
|
329
|
-
/* @__PURE__ */
|
|
647
|
+
return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center space-y-4 rounded-xl border border-destructive/20 bg-destructive/5 p-8 text-center", children: [
|
|
648
|
+
/* @__PURE__ */ jsx3("div", { className: "rounded-full bg-destructive/10 p-3", children: /* @__PURE__ */ jsxs3(
|
|
330
649
|
"svg",
|
|
331
650
|
{
|
|
332
651
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -338,18 +657,18 @@ function PricingPageError({
|
|
|
338
657
|
strokeLinejoin: "round",
|
|
339
658
|
className: "h-6 w-6 text-destructive",
|
|
340
659
|
children: [
|
|
341
|
-
/* @__PURE__ */
|
|
342
|
-
/* @__PURE__ */
|
|
343
|
-
/* @__PURE__ */
|
|
344
|
-
/* @__PURE__ */
|
|
660
|
+
/* @__PURE__ */ jsx3("title", { children: "Error icon" }),
|
|
661
|
+
/* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "10" }),
|
|
662
|
+
/* @__PURE__ */ jsx3("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
|
|
663
|
+
/* @__PURE__ */ jsx3("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
|
|
345
664
|
]
|
|
346
665
|
}
|
|
347
666
|
) }),
|
|
348
|
-
/* @__PURE__ */
|
|
349
|
-
/* @__PURE__ */
|
|
350
|
-
/* @__PURE__ */
|
|
667
|
+
/* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
|
|
668
|
+
/* @__PURE__ */ jsx3("h3", { className: "font-semibold text-lg", children: "Failed to load pricing" }),
|
|
669
|
+
/* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-sm", children: message })
|
|
351
670
|
] }),
|
|
352
|
-
/* @__PURE__ */
|
|
671
|
+
/* @__PURE__ */ jsx3(
|
|
353
672
|
"button",
|
|
354
673
|
{
|
|
355
674
|
type: "button",
|
|
@@ -371,14 +690,14 @@ function StandalonePricingPage({
|
|
|
371
690
|
className
|
|
372
691
|
}) {
|
|
373
692
|
const colors = variantColors[variant];
|
|
374
|
-
const [state, setState] =
|
|
693
|
+
const [state, setState] = React3.useState({
|
|
375
694
|
tiers: initialTiers || [],
|
|
376
695
|
loading: !initialTiers,
|
|
377
696
|
error: null,
|
|
378
697
|
billingPeriod: "monthly",
|
|
379
698
|
selectingTier: false
|
|
380
699
|
});
|
|
381
|
-
const loadTiers =
|
|
700
|
+
const loadTiers = React3.useCallback(async () => {
|
|
382
701
|
setState((prev) => ({ ...prev, loading: true, error: null }));
|
|
383
702
|
try {
|
|
384
703
|
const tiers = fetchTiers ? await fetchTiers() : await fetchTiersFromApi(apiBasePath);
|
|
@@ -391,12 +710,12 @@ function StandalonePricingPage({
|
|
|
391
710
|
}));
|
|
392
711
|
}
|
|
393
712
|
}, [apiBasePath, fetchTiers]);
|
|
394
|
-
|
|
713
|
+
React3.useEffect(() => {
|
|
395
714
|
if (!initialTiers) {
|
|
396
715
|
loadTiers();
|
|
397
716
|
}
|
|
398
717
|
}, [initialTiers, loadTiers]);
|
|
399
|
-
const handleSelectTier =
|
|
718
|
+
const handleSelectTier = React3.useCallback(
|
|
400
719
|
async (tierId) => {
|
|
401
720
|
if (onSelectTier) {
|
|
402
721
|
onSelectTier(tierId, state.billingPeriod);
|
|
@@ -431,15 +750,15 @@ function StandalonePricingPage({
|
|
|
431
750
|
},
|
|
432
751
|
[apiBasePath, state.billingPeriod, onSelectTier]
|
|
433
752
|
);
|
|
434
|
-
const handleBillingPeriodChange =
|
|
753
|
+
const handleBillingPeriodChange = React3.useCallback(
|
|
435
754
|
(period) => {
|
|
436
755
|
setState((prev) => ({ ...prev, billingPeriod: period }));
|
|
437
756
|
},
|
|
438
757
|
[]
|
|
439
758
|
);
|
|
440
|
-
return /* @__PURE__ */
|
|
441
|
-
/* @__PURE__ */
|
|
442
|
-
/* @__PURE__ */
|
|
759
|
+
return /* @__PURE__ */ jsxs3("div", { className: cn("w-full space-y-12", className), children: [
|
|
760
|
+
/* @__PURE__ */ jsxs3("div", { className: "space-y-4 text-center", children: [
|
|
761
|
+
/* @__PURE__ */ jsx3(
|
|
443
762
|
"h1",
|
|
444
763
|
{
|
|
445
764
|
className: cn(
|
|
@@ -450,9 +769,9 @@ function StandalonePricingPage({
|
|
|
450
769
|
children: title
|
|
451
770
|
}
|
|
452
771
|
),
|
|
453
|
-
/* @__PURE__ */
|
|
772
|
+
/* @__PURE__ */ jsx3("p", { className: "mx-auto max-w-2xl text-lg text-muted-foreground", children: subtitle })
|
|
454
773
|
] }),
|
|
455
|
-
state.loading ? /* @__PURE__ */
|
|
774
|
+
state.loading ? /* @__PURE__ */ jsx3(PricingPageSkeleton, {}) : state.error ? /* @__PURE__ */ jsx3(PricingPageError, { message: state.error, onRetry: loadTiers }) : /* @__PURE__ */ jsx3(
|
|
456
775
|
PricingPage,
|
|
457
776
|
{
|
|
458
777
|
tiers: state.tiers,
|
|
@@ -463,13 +782,13 @@ function StandalonePricingPage({
|
|
|
463
782
|
loading: state.selectingTier
|
|
464
783
|
}
|
|
465
784
|
),
|
|
466
|
-
/* @__PURE__ */
|
|
467
|
-
/* @__PURE__ */
|
|
468
|
-
/* @__PURE__ */
|
|
469
|
-
/* @__PURE__ */
|
|
470
|
-
/* @__PURE__ */
|
|
785
|
+
/* @__PURE__ */ jsxs3("div", { className: "mx-auto max-w-3xl space-y-6 border-border border-t pt-8", children: [
|
|
786
|
+
/* @__PURE__ */ jsx3("h2", { className: "text-center font-semibold text-xl", children: "Frequently Asked Questions" }),
|
|
787
|
+
/* @__PURE__ */ jsxs3("div", { className: "space-y-4", children: [
|
|
788
|
+
/* @__PURE__ */ jsxs3("details", { className: "group rounded-lg border border-border bg-card p-4", children: [
|
|
789
|
+
/* @__PURE__ */ jsxs3("summary", { className: "flex cursor-pointer list-none items-center justify-between font-medium", children: [
|
|
471
790
|
"What are credits?",
|
|
472
|
-
/* @__PURE__ */
|
|
791
|
+
/* @__PURE__ */ jsxs3(
|
|
473
792
|
"svg",
|
|
474
793
|
{
|
|
475
794
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -481,18 +800,18 @@ function StandalonePricingPage({
|
|
|
481
800
|
strokeLinejoin: "round",
|
|
482
801
|
className: "h-4 w-4 transition-transform group-open:rotate-180",
|
|
483
802
|
children: [
|
|
484
|
-
/* @__PURE__ */
|
|
485
|
-
/* @__PURE__ */
|
|
803
|
+
/* @__PURE__ */ jsx3("title", { children: "Toggle icon" }),
|
|
804
|
+
/* @__PURE__ */ jsx3("path", { d: "m6 9 6 6 6-6" })
|
|
486
805
|
]
|
|
487
806
|
}
|
|
488
807
|
)
|
|
489
808
|
] }),
|
|
490
|
-
/* @__PURE__ */
|
|
809
|
+
/* @__PURE__ */ jsx3("p", { className: "mt-3 text-muted-foreground text-sm", children: "Credits are used to pay for AI model usage. Different models consume different amounts of credits based on their complexity and the length of your requests." })
|
|
491
810
|
] }),
|
|
492
|
-
/* @__PURE__ */
|
|
493
|
-
/* @__PURE__ */
|
|
811
|
+
/* @__PURE__ */ jsxs3("details", { className: "group rounded-lg border border-border bg-card p-4", children: [
|
|
812
|
+
/* @__PURE__ */ jsxs3("summary", { className: "flex cursor-pointer list-none items-center justify-between font-medium", children: [
|
|
494
813
|
"Can I change plans later?",
|
|
495
|
-
/* @__PURE__ */
|
|
814
|
+
/* @__PURE__ */ jsxs3(
|
|
496
815
|
"svg",
|
|
497
816
|
{
|
|
498
817
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -504,18 +823,18 @@ function StandalonePricingPage({
|
|
|
504
823
|
strokeLinejoin: "round",
|
|
505
824
|
className: "h-4 w-4 transition-transform group-open:rotate-180",
|
|
506
825
|
children: [
|
|
507
|
-
/* @__PURE__ */
|
|
508
|
-
/* @__PURE__ */
|
|
826
|
+
/* @__PURE__ */ jsx3("title", { children: "Toggle icon" }),
|
|
827
|
+
/* @__PURE__ */ jsx3("path", { d: "m6 9 6 6 6-6" })
|
|
509
828
|
]
|
|
510
829
|
}
|
|
511
830
|
)
|
|
512
831
|
] }),
|
|
513
|
-
/* @__PURE__ */
|
|
832
|
+
/* @__PURE__ */ jsx3("p", { className: "mt-3 text-muted-foreground text-sm", children: "Yes! You can upgrade or downgrade your plan at any time. When you upgrade, you will be charged the prorated difference. When you downgrade, the change takes effect at the end of your billing cycle." })
|
|
514
833
|
] }),
|
|
515
|
-
/* @__PURE__ */
|
|
516
|
-
/* @__PURE__ */
|
|
834
|
+
/* @__PURE__ */ jsxs3("details", { className: "group rounded-lg border border-border bg-card p-4", children: [
|
|
835
|
+
/* @__PURE__ */ jsxs3("summary", { className: "flex cursor-pointer list-none items-center justify-between font-medium", children: [
|
|
517
836
|
"Do unused credits roll over?",
|
|
518
|
-
/* @__PURE__ */
|
|
837
|
+
/* @__PURE__ */ jsxs3(
|
|
519
838
|
"svg",
|
|
520
839
|
{
|
|
521
840
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -527,13 +846,13 @@ function StandalonePricingPage({
|
|
|
527
846
|
strokeLinejoin: "round",
|
|
528
847
|
className: "h-4 w-4 transition-transform group-open:rotate-180",
|
|
529
848
|
children: [
|
|
530
|
-
/* @__PURE__ */
|
|
531
|
-
/* @__PURE__ */
|
|
849
|
+
/* @__PURE__ */ jsx3("title", { children: "Toggle icon" }),
|
|
850
|
+
/* @__PURE__ */ jsx3("path", { d: "m6 9 6 6 6-6" })
|
|
532
851
|
]
|
|
533
852
|
}
|
|
534
853
|
)
|
|
535
854
|
] }),
|
|
536
|
-
/* @__PURE__ */
|
|
855
|
+
/* @__PURE__ */ jsx3("p", { className: "mt-3 text-muted-foreground text-sm", children: "Monthly credits do not roll over to the next month. However, purchased credit packs never expire and can be used at any time." })
|
|
537
856
|
] })
|
|
538
857
|
] })
|
|
539
858
|
] })
|
|
@@ -552,8 +871,8 @@ import {
|
|
|
552
871
|
Settings2,
|
|
553
872
|
Trash2
|
|
554
873
|
} from "lucide-react";
|
|
555
|
-
import * as
|
|
556
|
-
import { jsx as
|
|
874
|
+
import * as React4 from "react";
|
|
875
|
+
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
557
876
|
var TIER_LIMITS = {
|
|
558
877
|
free: 3,
|
|
559
878
|
starter: 10,
|
|
@@ -567,24 +886,24 @@ function ProfilesPage({
|
|
|
567
886
|
onCompareClick,
|
|
568
887
|
title = "Profiles"
|
|
569
888
|
}) {
|
|
570
|
-
const [builtinProfiles, setBuiltinProfiles] =
|
|
571
|
-
const [customProfiles, setCustomProfiles] =
|
|
572
|
-
const [loading, setLoading] =
|
|
573
|
-
const [error, setError] =
|
|
574
|
-
const [searchQuery, setSearchQuery] =
|
|
575
|
-
const [createDialogOpen, setCreateDialogOpen] =
|
|
576
|
-
const [editingProfile, setEditingProfile] =
|
|
889
|
+
const [builtinProfiles, setBuiltinProfiles] = React4.useState([]);
|
|
890
|
+
const [customProfiles, setCustomProfiles] = React4.useState([]);
|
|
891
|
+
const [loading, setLoading] = React4.useState(true);
|
|
892
|
+
const [error, setError] = React4.useState(null);
|
|
893
|
+
const [searchQuery, setSearchQuery] = React4.useState("");
|
|
894
|
+
const [createDialogOpen, setCreateDialogOpen] = React4.useState(false);
|
|
895
|
+
const [editingProfile, setEditingProfile] = React4.useState(
|
|
577
896
|
null
|
|
578
897
|
);
|
|
579
|
-
const [deletingProfile, setDeletingProfile] =
|
|
898
|
+
const [deletingProfile, setDeletingProfile] = React4.useState(
|
|
580
899
|
null
|
|
581
900
|
);
|
|
582
|
-
const [detailProfile, setDetailProfile] =
|
|
901
|
+
const [detailProfile, setDetailProfile] = React4.useState(
|
|
583
902
|
null
|
|
584
903
|
);
|
|
585
904
|
const profileLimit = maxProfiles ?? TIER_LIMITS[tier] ?? 3;
|
|
586
905
|
const canCreateMore = customProfiles.length < profileLimit;
|
|
587
|
-
const loadProfiles =
|
|
906
|
+
const loadProfiles = React4.useCallback(async () => {
|
|
588
907
|
try {
|
|
589
908
|
setLoading(true);
|
|
590
909
|
setError(null);
|
|
@@ -597,7 +916,7 @@ function ProfilesPage({
|
|
|
597
916
|
setLoading(false);
|
|
598
917
|
}
|
|
599
918
|
}, [apiClient]);
|
|
600
|
-
|
|
919
|
+
React4.useEffect(() => {
|
|
601
920
|
loadProfiles();
|
|
602
921
|
}, [loadProfiles]);
|
|
603
922
|
const filteredBuiltin = builtinProfiles.filter(
|
|
@@ -606,14 +925,14 @@ function ProfilesPage({
|
|
|
606
925
|
const filteredCustom = customProfiles.filter(
|
|
607
926
|
(p) => p.name.toLowerCase().includes(searchQuery.toLowerCase()) || p.description?.toLowerCase().includes(searchQuery.toLowerCase())
|
|
608
927
|
);
|
|
609
|
-
return /* @__PURE__ */
|
|
610
|
-
/* @__PURE__ */
|
|
611
|
-
/* @__PURE__ */
|
|
612
|
-
/* @__PURE__ */
|
|
613
|
-
/* @__PURE__ */
|
|
928
|
+
return /* @__PURE__ */ jsxs4("div", { className: "space-y-6", children: [
|
|
929
|
+
/* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between", children: [
|
|
930
|
+
/* @__PURE__ */ jsxs4("div", { children: [
|
|
931
|
+
/* @__PURE__ */ jsx4("h1", { className: "font-semibold text-2xl", children: title }),
|
|
932
|
+
/* @__PURE__ */ jsx4("p", { className: "text-muted-foreground", children: "Customize agent behavior with system prompts, models, and instructions" })
|
|
614
933
|
] }),
|
|
615
|
-
/* @__PURE__ */
|
|
616
|
-
onCompareClick && customProfiles.length >= 2 && /* @__PURE__ */
|
|
934
|
+
/* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3", children: [
|
|
935
|
+
onCompareClick && customProfiles.length >= 2 && /* @__PURE__ */ jsx4(
|
|
617
936
|
Button,
|
|
618
937
|
{
|
|
619
938
|
variant: "outline",
|
|
@@ -621,30 +940,30 @@ function ProfilesPage({
|
|
|
621
940
|
children: "Compare Profiles"
|
|
622
941
|
}
|
|
623
942
|
),
|
|
624
|
-
/* @__PURE__ */
|
|
943
|
+
/* @__PURE__ */ jsxs4(
|
|
625
944
|
Button,
|
|
626
945
|
{
|
|
627
946
|
onClick: () => setCreateDialogOpen(true),
|
|
628
947
|
disabled: !canCreateMore,
|
|
629
948
|
children: [
|
|
630
|
-
/* @__PURE__ */
|
|
949
|
+
/* @__PURE__ */ jsx4(Plus, { className: "mr-2 h-4 w-4" }),
|
|
631
950
|
"Create Profile"
|
|
632
951
|
]
|
|
633
952
|
}
|
|
634
953
|
)
|
|
635
954
|
] })
|
|
636
955
|
] }),
|
|
637
|
-
!canCreateMore && /* @__PURE__ */
|
|
638
|
-
/* @__PURE__ */
|
|
639
|
-
/* @__PURE__ */
|
|
956
|
+
!canCreateMore && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-3 text-sm text-yellow-400", children: [
|
|
957
|
+
/* @__PURE__ */ jsx4(AlertCircle, { className: "h-4 w-4" }),
|
|
958
|
+
/* @__PURE__ */ jsxs4("span", { children: [
|
|
640
959
|
"You've reached your profile limit (",
|
|
641
960
|
profileLimit,
|
|
642
961
|
" profiles). Upgrade your plan to create more."
|
|
643
962
|
] })
|
|
644
963
|
] }),
|
|
645
|
-
/* @__PURE__ */
|
|
646
|
-
/* @__PURE__ */
|
|
647
|
-
/* @__PURE__ */
|
|
964
|
+
/* @__PURE__ */ jsxs4("div", { className: "relative max-w-md", children: [
|
|
965
|
+
/* @__PURE__ */ jsx4(Search, { className: "absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
|
|
966
|
+
/* @__PURE__ */ jsx4(
|
|
648
967
|
Input,
|
|
649
968
|
{
|
|
650
969
|
placeholder: "Search profiles...",
|
|
@@ -654,33 +973,33 @@ function ProfilesPage({
|
|
|
654
973
|
}
|
|
655
974
|
)
|
|
656
975
|
] }),
|
|
657
|
-
error && /* @__PURE__ */
|
|
658
|
-
/* @__PURE__ */
|
|
659
|
-
/* @__PURE__ */
|
|
660
|
-
/* @__PURE__ */
|
|
976
|
+
error && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-red-400 text-sm", children: [
|
|
977
|
+
/* @__PURE__ */ jsx4(AlertCircle, { className: "h-4 w-4" }),
|
|
978
|
+
/* @__PURE__ */ jsx4("span", { children: error }),
|
|
979
|
+
/* @__PURE__ */ jsx4(Button, { variant: "ghost", size: "sm", onClick: loadProfiles, children: "Retry" })
|
|
661
980
|
] }),
|
|
662
|
-
loading && /* @__PURE__ */
|
|
663
|
-
!loading && /* @__PURE__ */
|
|
664
|
-
/* @__PURE__ */
|
|
665
|
-
/* @__PURE__ */
|
|
981
|
+
loading && /* @__PURE__ */ jsx4("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx4(Loader2, { className: "h-8 w-8 animate-spin text-muted-foreground" }) }),
|
|
982
|
+
!loading && /* @__PURE__ */ jsxs4("div", { className: "space-y-8", children: [
|
|
983
|
+
/* @__PURE__ */ jsxs4("section", { children: [
|
|
984
|
+
/* @__PURE__ */ jsx4("div", { className: "mb-3 flex items-center justify-between", children: /* @__PURE__ */ jsxs4("h2", { className: "font-medium text-lg", children: [
|
|
666
985
|
"Your Profiles (",
|
|
667
986
|
customProfiles.length,
|
|
668
987
|
"/",
|
|
669
988
|
profileLimit === Number.POSITIVE_INFINITY ? "inf" : profileLimit,
|
|
670
989
|
")"
|
|
671
990
|
] }) }),
|
|
672
|
-
filteredCustom.length === 0 ? /* @__PURE__ */
|
|
991
|
+
filteredCustom.length === 0 ? /* @__PURE__ */ jsx4(
|
|
673
992
|
EmptyState,
|
|
674
993
|
{
|
|
675
|
-
icon: /* @__PURE__ */
|
|
994
|
+
icon: /* @__PURE__ */ jsx4(Settings2, { className: "h-8 w-8" }),
|
|
676
995
|
title: "No custom profiles yet",
|
|
677
996
|
description: "Create a profile to customize agent behavior",
|
|
678
|
-
action: canCreateMore ? /* @__PURE__ */
|
|
679
|
-
/* @__PURE__ */
|
|
997
|
+
action: canCreateMore ? /* @__PURE__ */ jsxs4(Button, { onClick: () => setCreateDialogOpen(true), children: [
|
|
998
|
+
/* @__PURE__ */ jsx4(Plus, { className: "mr-2 h-4 w-4" }),
|
|
680
999
|
"Create Profile"
|
|
681
1000
|
] }) : void 0
|
|
682
1001
|
}
|
|
683
|
-
) : /* @__PURE__ */
|
|
1002
|
+
) : /* @__PURE__ */ jsx4("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: filteredCustom.map((profile) => /* @__PURE__ */ jsx4(
|
|
684
1003
|
ProfileCard,
|
|
685
1004
|
{
|
|
686
1005
|
profile,
|
|
@@ -691,13 +1010,13 @@ function ProfilesPage({
|
|
|
691
1010
|
profile.id
|
|
692
1011
|
)) })
|
|
693
1012
|
] }),
|
|
694
|
-
/* @__PURE__ */
|
|
695
|
-
/* @__PURE__ */
|
|
1013
|
+
/* @__PURE__ */ jsxs4("section", { children: [
|
|
1014
|
+
/* @__PURE__ */ jsx4("div", { className: "mb-3 flex items-center justify-between", children: /* @__PURE__ */ jsxs4("h2", { className: "font-medium text-lg", children: [
|
|
696
1015
|
"Built-in Profiles (",
|
|
697
1016
|
builtinProfiles.length,
|
|
698
1017
|
")"
|
|
699
1018
|
] }) }),
|
|
700
|
-
filteredBuiltin.length === 0 ? /* @__PURE__ */
|
|
1019
|
+
filteredBuiltin.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "text-muted-foreground text-sm", children: "No matching built-in profiles" }) : /* @__PURE__ */ jsx4("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: filteredBuiltin.map((profile) => /* @__PURE__ */ jsx4(
|
|
701
1020
|
ProfileCard,
|
|
702
1021
|
{
|
|
703
1022
|
profile,
|
|
@@ -708,7 +1027,7 @@ function ProfilesPage({
|
|
|
708
1027
|
)) })
|
|
709
1028
|
] })
|
|
710
1029
|
] }),
|
|
711
|
-
/* @__PURE__ */
|
|
1030
|
+
/* @__PURE__ */ jsx4(
|
|
712
1031
|
ProfileFormDialog,
|
|
713
1032
|
{
|
|
714
1033
|
open: createDialogOpen || !!editingProfile,
|
|
@@ -726,7 +1045,7 @@ function ProfilesPage({
|
|
|
726
1045
|
}
|
|
727
1046
|
}
|
|
728
1047
|
),
|
|
729
|
-
/* @__PURE__ */
|
|
1048
|
+
/* @__PURE__ */ jsx4(
|
|
730
1049
|
DeleteProfileDialog,
|
|
731
1050
|
{
|
|
732
1051
|
profile: deletingProfile,
|
|
@@ -738,7 +1057,7 @@ function ProfilesPage({
|
|
|
738
1057
|
}
|
|
739
1058
|
}
|
|
740
1059
|
),
|
|
741
|
-
/* @__PURE__ */
|
|
1060
|
+
/* @__PURE__ */ jsx4(
|
|
742
1061
|
ProfileDetailDialog,
|
|
743
1062
|
{
|
|
744
1063
|
profile: detailProfile,
|
|
@@ -767,61 +1086,61 @@ function ProfileCard({
|
|
|
767
1086
|
onDelete,
|
|
768
1087
|
isBuiltin
|
|
769
1088
|
}) {
|
|
770
|
-
return /* @__PURE__ */
|
|
1089
|
+
return /* @__PURE__ */ jsxs4(
|
|
771
1090
|
Card,
|
|
772
1091
|
{
|
|
773
1092
|
className: "cursor-pointer p-4 transition-colors hover:border-border/80",
|
|
774
1093
|
onClick: onView,
|
|
775
1094
|
children: [
|
|
776
|
-
/* @__PURE__ */
|
|
777
|
-
/* @__PURE__ */
|
|
778
|
-
/* @__PURE__ */
|
|
779
|
-
/* @__PURE__ */
|
|
780
|
-
isBuiltin && /* @__PURE__ */
|
|
781
|
-
profile.is_public && !isBuiltin && /* @__PURE__ */
|
|
1095
|
+
/* @__PURE__ */ jsxs4("div", { className: "flex items-start justify-between", children: [
|
|
1096
|
+
/* @__PURE__ */ jsxs4("div", { className: "flex-1", children: [
|
|
1097
|
+
/* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
|
|
1098
|
+
/* @__PURE__ */ jsx4("h3", { className: "font-medium", children: profile.name }),
|
|
1099
|
+
isBuiltin && /* @__PURE__ */ jsx4(Badge, { variant: "secondary", className: "border-0 text-xs", children: "Built-in" }),
|
|
1100
|
+
profile.is_public && !isBuiltin && /* @__PURE__ */ jsx4(Badge, { className: "border-0 bg-blue-500/10 text-blue-400 text-xs", children: "Public" })
|
|
782
1101
|
] }),
|
|
783
|
-
profile.description && /* @__PURE__ */
|
|
1102
|
+
profile.description && /* @__PURE__ */ jsx4("p", { className: "mt-1 line-clamp-2 text-muted-foreground text-sm", children: profile.description })
|
|
784
1103
|
] }),
|
|
785
|
-
!isBuiltin && /* @__PURE__ */
|
|
786
|
-
onEdit && /* @__PURE__ */
|
|
1104
|
+
!isBuiltin && /* @__PURE__ */ jsxs4("div", { className: "flex gap-1", onClick: (e) => e.stopPropagation(), children: [
|
|
1105
|
+
onEdit && /* @__PURE__ */ jsx4(
|
|
787
1106
|
Button,
|
|
788
1107
|
{
|
|
789
1108
|
variant: "ghost",
|
|
790
1109
|
size: "icon",
|
|
791
1110
|
onClick: onEdit,
|
|
792
1111
|
"aria-label": "Edit profile",
|
|
793
|
-
children: /* @__PURE__ */
|
|
1112
|
+
children: /* @__PURE__ */ jsx4(Edit2, { className: "h-4 w-4" })
|
|
794
1113
|
}
|
|
795
1114
|
),
|
|
796
|
-
onDelete && /* @__PURE__ */
|
|
1115
|
+
onDelete && /* @__PURE__ */ jsx4(
|
|
797
1116
|
Button,
|
|
798
1117
|
{
|
|
799
1118
|
variant: "ghost",
|
|
800
1119
|
size: "icon",
|
|
801
1120
|
onClick: onDelete,
|
|
802
1121
|
"aria-label": "Delete profile",
|
|
803
|
-
children: /* @__PURE__ */
|
|
1122
|
+
children: /* @__PURE__ */ jsx4(Trash2, { className: "h-4 w-4 text-red-400" })
|
|
804
1123
|
}
|
|
805
1124
|
)
|
|
806
1125
|
] })
|
|
807
1126
|
] }),
|
|
808
|
-
/* @__PURE__ */
|
|
809
|
-
profile.extends && /* @__PURE__ */
|
|
1127
|
+
/* @__PURE__ */ jsxs4("div", { className: "mt-3 flex flex-wrap gap-2", children: [
|
|
1128
|
+
profile.extends && /* @__PURE__ */ jsxs4(Badge, { variant: "outline", className: "text-xs", children: [
|
|
810
1129
|
"extends ",
|
|
811
1130
|
profile.extends
|
|
812
1131
|
] }),
|
|
813
|
-
profile.model && /* @__PURE__ */
|
|
1132
|
+
profile.model && /* @__PURE__ */ jsx4(Badge, { variant: "outline", className: "text-xs", children: profile.model.split("/").pop() })
|
|
814
1133
|
] }),
|
|
815
|
-
profile.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */
|
|
816
|
-
/* @__PURE__ */
|
|
1134
|
+
profile.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */ jsxs4("div", { className: "mt-3 flex gap-4 border-border border-t pt-3 text-muted-foreground text-xs", children: [
|
|
1135
|
+
/* @__PURE__ */ jsxs4("span", { children: [
|
|
817
1136
|
profile.metrics.total_runs,
|
|
818
1137
|
" runs"
|
|
819
1138
|
] }),
|
|
820
|
-
/* @__PURE__ */
|
|
1139
|
+
/* @__PURE__ */ jsxs4("span", { children: [
|
|
821
1140
|
profile.metrics.success_rate.toFixed(0),
|
|
822
1141
|
"% success"
|
|
823
1142
|
] }),
|
|
824
|
-
/* @__PURE__ */
|
|
1143
|
+
/* @__PURE__ */ jsxs4("span", { children: [
|
|
825
1144
|
"~",
|
|
826
1145
|
(profile.metrics.avg_duration_ms / 1e3).toFixed(1),
|
|
827
1146
|
"s avg"
|
|
@@ -840,7 +1159,7 @@ function ProfileFormDialog({
|
|
|
840
1159
|
onSuccess
|
|
841
1160
|
}) {
|
|
842
1161
|
const isEditing = !!profile?.id;
|
|
843
|
-
const [formData, setFormData] =
|
|
1162
|
+
const [formData, setFormData] = React4.useState({
|
|
844
1163
|
name: "",
|
|
845
1164
|
description: "",
|
|
846
1165
|
extends: "",
|
|
@@ -850,9 +1169,9 @@ function ProfileFormDialog({
|
|
|
850
1169
|
tags: [],
|
|
851
1170
|
is_public: false
|
|
852
1171
|
});
|
|
853
|
-
const [saving, setSaving] =
|
|
854
|
-
const [error, setError] =
|
|
855
|
-
|
|
1172
|
+
const [saving, setSaving] = React4.useState(false);
|
|
1173
|
+
const [error, setError] = React4.useState(null);
|
|
1174
|
+
React4.useEffect(() => {
|
|
856
1175
|
if (profile) {
|
|
857
1176
|
setFormData({
|
|
858
1177
|
name: profile.name,
|
|
@@ -908,19 +1227,19 @@ function ProfileFormDialog({
|
|
|
908
1227
|
setSaving(false);
|
|
909
1228
|
}
|
|
910
1229
|
};
|
|
911
|
-
return /* @__PURE__ */
|
|
912
|
-
/* @__PURE__ */
|
|
913
|
-
/* @__PURE__ */
|
|
914
|
-
/* @__PURE__ */
|
|
1230
|
+
return /* @__PURE__ */ jsx4(Dialog, { open, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ jsxs4(DialogContent, { className: "max-w-2xl", children: [
|
|
1231
|
+
/* @__PURE__ */ jsxs4(DialogHeader, { children: [
|
|
1232
|
+
/* @__PURE__ */ jsx4(DialogTitle, { children: isEditing ? "Edit Profile" : "Create Profile" }),
|
|
1233
|
+
/* @__PURE__ */ jsx4(DialogDescription, { children: isEditing ? "Update your custom profile configuration" : "Create a new profile to customize agent behavior" })
|
|
915
1234
|
] }),
|
|
916
|
-
/* @__PURE__ */
|
|
917
|
-
error && /* @__PURE__ */
|
|
918
|
-
/* @__PURE__ */
|
|
919
|
-
/* @__PURE__ */
|
|
1235
|
+
/* @__PURE__ */ jsxs4("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
|
|
1236
|
+
error && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-red-400 text-sm", children: [
|
|
1237
|
+
/* @__PURE__ */ jsx4(AlertCircle, { className: "h-4 w-4" }),
|
|
1238
|
+
/* @__PURE__ */ jsx4("span", { children: error })
|
|
920
1239
|
] }),
|
|
921
|
-
/* @__PURE__ */
|
|
922
|
-
/* @__PURE__ */
|
|
923
|
-
/* @__PURE__ */
|
|
1240
|
+
/* @__PURE__ */ jsxs4("div", { children: [
|
|
1241
|
+
/* @__PURE__ */ jsx4("label", { className: "mb-1 block font-medium text-sm", children: "Name *" }),
|
|
1242
|
+
/* @__PURE__ */ jsx4(
|
|
924
1243
|
Input,
|
|
925
1244
|
{
|
|
926
1245
|
value: formData.name,
|
|
@@ -932,9 +1251,9 @@ function ProfileFormDialog({
|
|
|
932
1251
|
}
|
|
933
1252
|
)
|
|
934
1253
|
] }),
|
|
935
|
-
/* @__PURE__ */
|
|
936
|
-
/* @__PURE__ */
|
|
937
|
-
/* @__PURE__ */
|
|
1254
|
+
/* @__PURE__ */ jsxs4("div", { children: [
|
|
1255
|
+
/* @__PURE__ */ jsx4("label", { className: "mb-1 block font-medium text-sm", children: "Description" }),
|
|
1256
|
+
/* @__PURE__ */ jsx4(
|
|
938
1257
|
Input,
|
|
939
1258
|
{
|
|
940
1259
|
value: formData.description,
|
|
@@ -943,17 +1262,17 @@ function ProfileFormDialog({
|
|
|
943
1262
|
}
|
|
944
1263
|
)
|
|
945
1264
|
] }),
|
|
946
|
-
/* @__PURE__ */
|
|
947
|
-
/* @__PURE__ */
|
|
948
|
-
/* @__PURE__ */
|
|
1265
|
+
/* @__PURE__ */ jsxs4("div", { children: [
|
|
1266
|
+
/* @__PURE__ */ jsx4("label", { className: "mb-1 block font-medium text-sm", children: "Extends (base profile)" }),
|
|
1267
|
+
/* @__PURE__ */ jsxs4(
|
|
949
1268
|
"select",
|
|
950
1269
|
{
|
|
951
1270
|
value: formData.extends,
|
|
952
1271
|
onChange: (e) => setFormData((d) => ({ ...d, extends: e.target.value })),
|
|
953
1272
|
className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm",
|
|
954
1273
|
children: [
|
|
955
|
-
/* @__PURE__ */
|
|
956
|
-
builtinProfiles.map((p) => /* @__PURE__ */
|
|
1274
|
+
/* @__PURE__ */ jsx4("option", { value: "", children: "None (start from scratch)" }),
|
|
1275
|
+
builtinProfiles.map((p) => /* @__PURE__ */ jsxs4("option", { value: p.name, children: [
|
|
957
1276
|
p.name,
|
|
958
1277
|
" - ",
|
|
959
1278
|
p.description ?? "Built-in profile"
|
|
@@ -962,9 +1281,9 @@ function ProfileFormDialog({
|
|
|
962
1281
|
}
|
|
963
1282
|
)
|
|
964
1283
|
] }),
|
|
965
|
-
/* @__PURE__ */
|
|
966
|
-
/* @__PURE__ */
|
|
967
|
-
/* @__PURE__ */
|
|
1284
|
+
/* @__PURE__ */ jsxs4("div", { children: [
|
|
1285
|
+
/* @__PURE__ */ jsx4("label", { className: "mb-1 block font-medium text-sm", children: "Model" }),
|
|
1286
|
+
/* @__PURE__ */ jsx4(
|
|
968
1287
|
Input,
|
|
969
1288
|
{
|
|
970
1289
|
value: formData.model,
|
|
@@ -972,11 +1291,11 @@ function ProfileFormDialog({
|
|
|
972
1291
|
placeholder: "anthropic/claude-sonnet-4"
|
|
973
1292
|
}
|
|
974
1293
|
),
|
|
975
|
-
/* @__PURE__ */
|
|
1294
|
+
/* @__PURE__ */ jsx4("p", { className: "mt-1 text-muted-foreground text-xs", children: "Format: provider/model-id (e.g., anthropic/claude-sonnet-4)" })
|
|
976
1295
|
] }),
|
|
977
|
-
/* @__PURE__ */
|
|
978
|
-
/* @__PURE__ */
|
|
979
|
-
/* @__PURE__ */
|
|
1296
|
+
/* @__PURE__ */ jsxs4("div", { children: [
|
|
1297
|
+
/* @__PURE__ */ jsx4("label", { className: "mb-1 block font-medium text-sm", children: "System Prompt" }),
|
|
1298
|
+
/* @__PURE__ */ jsx4(
|
|
980
1299
|
"textarea",
|
|
981
1300
|
{
|
|
982
1301
|
value: formData.system_prompt,
|
|
@@ -987,9 +1306,9 @@ function ProfileFormDialog({
|
|
|
987
1306
|
}
|
|
988
1307
|
)
|
|
989
1308
|
] }),
|
|
990
|
-
/* @__PURE__ */
|
|
991
|
-
/* @__PURE__ */
|
|
992
|
-
/* @__PURE__ */
|
|
1309
|
+
/* @__PURE__ */ jsxs4("div", { children: [
|
|
1310
|
+
/* @__PURE__ */ jsx4("label", { className: "mb-1 block font-medium text-sm", children: "Tags" }),
|
|
1311
|
+
/* @__PURE__ */ jsx4(
|
|
993
1312
|
Input,
|
|
994
1313
|
{
|
|
995
1314
|
value: formData.tags?.join(", "),
|
|
@@ -1000,10 +1319,10 @@ function ProfileFormDialog({
|
|
|
1000
1319
|
placeholder: "trading, aggressive, experimental"
|
|
1001
1320
|
}
|
|
1002
1321
|
),
|
|
1003
|
-
/* @__PURE__ */
|
|
1322
|
+
/* @__PURE__ */ jsx4("p", { className: "mt-1 text-muted-foreground text-xs", children: "Comma-separated tags for organization" })
|
|
1004
1323
|
] }),
|
|
1005
|
-
/* @__PURE__ */
|
|
1006
|
-
/* @__PURE__ */
|
|
1324
|
+
/* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
|
|
1325
|
+
/* @__PURE__ */ jsx4(
|
|
1007
1326
|
"input",
|
|
1008
1327
|
{
|
|
1009
1328
|
type: "checkbox",
|
|
@@ -1013,12 +1332,12 @@ function ProfileFormDialog({
|
|
|
1013
1332
|
className: "rounded border-border"
|
|
1014
1333
|
}
|
|
1015
1334
|
),
|
|
1016
|
-
/* @__PURE__ */
|
|
1335
|
+
/* @__PURE__ */ jsx4("label", { htmlFor: "is_public", className: "text-sm", children: "Make this profile public (visible to other users)" })
|
|
1017
1336
|
] }),
|
|
1018
|
-
/* @__PURE__ */
|
|
1019
|
-
/* @__PURE__ */
|
|
1020
|
-
/* @__PURE__ */
|
|
1021
|
-
saving && /* @__PURE__ */
|
|
1337
|
+
/* @__PURE__ */ jsxs4(DialogFooter, { children: [
|
|
1338
|
+
/* @__PURE__ */ jsx4(Button, { type: "button", variant: "outline", onClick: onClose, children: "Cancel" }),
|
|
1339
|
+
/* @__PURE__ */ jsxs4(Button, { type: "submit", disabled: saving || !formData.name, children: [
|
|
1340
|
+
saving && /* @__PURE__ */ jsx4(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
|
|
1022
1341
|
isEditing ? "Save Changes" : "Create Profile"
|
|
1023
1342
|
] })
|
|
1024
1343
|
] })
|
|
@@ -1031,8 +1350,8 @@ function DeleteProfileDialog({
|
|
|
1031
1350
|
apiClient,
|
|
1032
1351
|
onSuccess
|
|
1033
1352
|
}) {
|
|
1034
|
-
const [deleting, setDeleting] =
|
|
1035
|
-
const [error, setError] =
|
|
1353
|
+
const [deleting, setDeleting] = React4.useState(false);
|
|
1354
|
+
const [error, setError] = React4.useState(null);
|
|
1036
1355
|
const handleDelete = async () => {
|
|
1037
1356
|
if (!profile) return;
|
|
1038
1357
|
setError(null);
|
|
@@ -1046,34 +1365,34 @@ function DeleteProfileDialog({
|
|
|
1046
1365
|
setDeleting(false);
|
|
1047
1366
|
}
|
|
1048
1367
|
};
|
|
1049
|
-
return /* @__PURE__ */
|
|
1050
|
-
/* @__PURE__ */
|
|
1051
|
-
/* @__PURE__ */
|
|
1052
|
-
/* @__PURE__ */
|
|
1368
|
+
return /* @__PURE__ */ jsx4(Dialog, { open: !!profile, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ jsxs4(DialogContent, { children: [
|
|
1369
|
+
/* @__PURE__ */ jsxs4(DialogHeader, { children: [
|
|
1370
|
+
/* @__PURE__ */ jsx4(DialogTitle, { children: "Delete Profile" }),
|
|
1371
|
+
/* @__PURE__ */ jsxs4(DialogDescription, { children: [
|
|
1053
1372
|
'Are you sure you want to delete "',
|
|
1054
1373
|
profile?.name,
|
|
1055
1374
|
'"? This action cannot be undone.'
|
|
1056
1375
|
] })
|
|
1057
1376
|
] }),
|
|
1058
|
-
error && /* @__PURE__ */
|
|
1059
|
-
/* @__PURE__ */
|
|
1060
|
-
/* @__PURE__ */
|
|
1377
|
+
error && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 rounded-lg border border-red-500/30 bg-red-500/10 p-3 text-red-400 text-sm", children: [
|
|
1378
|
+
/* @__PURE__ */ jsx4(AlertCircle, { className: "h-4 w-4" }),
|
|
1379
|
+
/* @__PURE__ */ jsx4("span", { children: error })
|
|
1061
1380
|
] }),
|
|
1062
|
-
profile?.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */
|
|
1381
|
+
profile?.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */ jsxs4("div", { className: "rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-3 text-sm text-yellow-400", children: [
|
|
1063
1382
|
"This profile has ",
|
|
1064
1383
|
profile.metrics.total_runs,
|
|
1065
1384
|
" recorded runs. Deleting it will lose all performance metrics."
|
|
1066
1385
|
] }),
|
|
1067
|
-
/* @__PURE__ */
|
|
1068
|
-
/* @__PURE__ */
|
|
1069
|
-
/* @__PURE__ */
|
|
1386
|
+
/* @__PURE__ */ jsxs4(DialogFooter, { children: [
|
|
1387
|
+
/* @__PURE__ */ jsx4(Button, { variant: "outline", onClick: onClose, children: "Cancel" }),
|
|
1388
|
+
/* @__PURE__ */ jsxs4(
|
|
1070
1389
|
Button,
|
|
1071
1390
|
{
|
|
1072
1391
|
variant: "destructive",
|
|
1073
1392
|
onClick: handleDelete,
|
|
1074
1393
|
disabled: deleting,
|
|
1075
1394
|
children: [
|
|
1076
|
-
deleting && /* @__PURE__ */
|
|
1395
|
+
deleting && /* @__PURE__ */ jsx4(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
|
|
1077
1396
|
"Delete Profile"
|
|
1078
1397
|
]
|
|
1079
1398
|
}
|
|
@@ -1088,35 +1407,35 @@ function ProfileDetailDialog({
|
|
|
1088
1407
|
onDuplicate
|
|
1089
1408
|
}) {
|
|
1090
1409
|
if (!profile) return null;
|
|
1091
|
-
return /* @__PURE__ */
|
|
1092
|
-
/* @__PURE__ */
|
|
1093
|
-
/* @__PURE__ */
|
|
1094
|
-
/* @__PURE__ */
|
|
1095
|
-
profile.is_builtin && /* @__PURE__ */
|
|
1096
|
-
profile.is_public && !profile.is_builtin && /* @__PURE__ */
|
|
1410
|
+
return /* @__PURE__ */ jsx4(Dialog, { open: !!profile, onOpenChange: (o) => !o && onClose(), children: /* @__PURE__ */ jsxs4(DialogContent, { className: "max-w-2xl", children: [
|
|
1411
|
+
/* @__PURE__ */ jsxs4(DialogHeader, { children: [
|
|
1412
|
+
/* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
|
|
1413
|
+
/* @__PURE__ */ jsx4(DialogTitle, { children: profile.name }),
|
|
1414
|
+
profile.is_builtin && /* @__PURE__ */ jsx4(Badge, { variant: "secondary", className: "border-0", children: "Built-in" }),
|
|
1415
|
+
profile.is_public && !profile.is_builtin && /* @__PURE__ */ jsx4(Badge, { className: "border-0 bg-blue-500/10 text-blue-400", children: "Public" })
|
|
1097
1416
|
] }),
|
|
1098
|
-
profile.description && /* @__PURE__ */
|
|
1417
|
+
profile.description && /* @__PURE__ */ jsx4(DialogDescription, { children: profile.description })
|
|
1099
1418
|
] }),
|
|
1100
|
-
/* @__PURE__ */
|
|
1101
|
-
/* @__PURE__ */
|
|
1102
|
-
profile.extends && /* @__PURE__ */
|
|
1103
|
-
/* @__PURE__ */
|
|
1104
|
-
/* @__PURE__ */
|
|
1419
|
+
/* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
|
|
1420
|
+
/* @__PURE__ */ jsxs4("div", { className: "grid gap-4 sm:grid-cols-2", children: [
|
|
1421
|
+
profile.extends && /* @__PURE__ */ jsxs4("div", { children: [
|
|
1422
|
+
/* @__PURE__ */ jsx4("label", { className: "font-medium text-muted-foreground text-xs", children: "Extends" }),
|
|
1423
|
+
/* @__PURE__ */ jsx4("p", { className: "text-sm", children: profile.extends })
|
|
1105
1424
|
] }),
|
|
1106
|
-
profile.model && /* @__PURE__ */
|
|
1107
|
-
/* @__PURE__ */
|
|
1108
|
-
/* @__PURE__ */
|
|
1425
|
+
profile.model && /* @__PURE__ */ jsxs4("div", { children: [
|
|
1426
|
+
/* @__PURE__ */ jsx4("label", { className: "font-medium text-muted-foreground text-xs", children: "Model" }),
|
|
1427
|
+
/* @__PURE__ */ jsx4("p", { className: "text-sm", children: profile.model })
|
|
1109
1428
|
] })
|
|
1110
1429
|
] }),
|
|
1111
|
-
profile.tags && profile.tags.length > 0 && /* @__PURE__ */
|
|
1112
|
-
/* @__PURE__ */
|
|
1113
|
-
/* @__PURE__ */
|
|
1430
|
+
profile.tags && profile.tags.length > 0 && /* @__PURE__ */ jsxs4("div", { children: [
|
|
1431
|
+
/* @__PURE__ */ jsx4("label", { className: "font-medium text-muted-foreground text-xs", children: "Tags" }),
|
|
1432
|
+
/* @__PURE__ */ jsx4("div", { className: "mt-1 flex flex-wrap gap-1", children: profile.tags.map((tag) => /* @__PURE__ */ jsx4(Badge, { variant: "outline", className: "text-xs", children: tag }, tag)) })
|
|
1114
1433
|
] }),
|
|
1115
|
-
profile.system_prompt && /* @__PURE__ */
|
|
1116
|
-
/* @__PURE__ */
|
|
1117
|
-
/* @__PURE__ */
|
|
1118
|
-
/* @__PURE__ */
|
|
1119
|
-
/* @__PURE__ */
|
|
1434
|
+
profile.system_prompt && /* @__PURE__ */ jsxs4("div", { children: [
|
|
1435
|
+
/* @__PURE__ */ jsx4("label", { className: "font-medium text-muted-foreground text-xs", children: "System Prompt" }),
|
|
1436
|
+
/* @__PURE__ */ jsxs4("div", { className: "relative mt-1", children: [
|
|
1437
|
+
/* @__PURE__ */ jsx4("pre", { className: "max-h-48 overflow-auto rounded-lg bg-muted p-3 font-mono text-sm", children: profile.system_prompt }),
|
|
1438
|
+
/* @__PURE__ */ jsx4(
|
|
1120
1439
|
Button,
|
|
1121
1440
|
{
|
|
1122
1441
|
variant: "ghost",
|
|
@@ -1124,54 +1443,54 @@ function ProfileDetailDialog({
|
|
|
1124
1443
|
className: "absolute top-2 right-2",
|
|
1125
1444
|
onClick: () => navigator.clipboard.writeText(profile.system_prompt),
|
|
1126
1445
|
"aria-label": "Copy system prompt",
|
|
1127
|
-
children: /* @__PURE__ */
|
|
1446
|
+
children: /* @__PURE__ */ jsx4(Copy, { className: "h-4 w-4" })
|
|
1128
1447
|
}
|
|
1129
1448
|
)
|
|
1130
1449
|
] })
|
|
1131
1450
|
] }),
|
|
1132
|
-
profile.instructions && profile.instructions.length > 0 && /* @__PURE__ */
|
|
1133
|
-
/* @__PURE__ */
|
|
1134
|
-
/* @__PURE__ */
|
|
1135
|
-
/* @__PURE__ */
|
|
1451
|
+
profile.instructions && profile.instructions.length > 0 && /* @__PURE__ */ jsxs4("div", { children: [
|
|
1452
|
+
/* @__PURE__ */ jsx4("label", { className: "font-medium text-muted-foreground text-xs", children: "Instructions" }),
|
|
1453
|
+
/* @__PURE__ */ jsx4("ul", { className: "mt-1 space-y-1", children: profile.instructions.map((inst, i) => /* @__PURE__ */ jsxs4("li", { className: "flex items-start gap-2 text-sm", children: [
|
|
1454
|
+
/* @__PURE__ */ jsx4(ChevronRight, { className: "mt-0.5 h-4 w-4 text-muted-foreground" }),
|
|
1136
1455
|
inst
|
|
1137
1456
|
] }, i)) })
|
|
1138
1457
|
] }),
|
|
1139
|
-
profile.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */
|
|
1140
|
-
/* @__PURE__ */
|
|
1141
|
-
/* @__PURE__ */
|
|
1142
|
-
/* @__PURE__ */
|
|
1143
|
-
/* @__PURE__ */
|
|
1144
|
-
/* @__PURE__ */
|
|
1458
|
+
profile.metrics && profile.metrics.total_runs > 0 && /* @__PURE__ */ jsxs4("div", { className: "rounded-lg border border-border p-4", children: [
|
|
1459
|
+
/* @__PURE__ */ jsx4("label", { className: "font-medium text-muted-foreground text-xs", children: "Performance Metrics" }),
|
|
1460
|
+
/* @__PURE__ */ jsxs4("div", { className: "mt-2 grid grid-cols-2 gap-4 sm:grid-cols-4", children: [
|
|
1461
|
+
/* @__PURE__ */ jsxs4("div", { children: [
|
|
1462
|
+
/* @__PURE__ */ jsx4("p", { className: "font-medium text-2xl", children: profile.metrics.total_runs }),
|
|
1463
|
+
/* @__PURE__ */ jsx4("p", { className: "text-muted-foreground text-xs", children: "Total Runs" })
|
|
1145
1464
|
] }),
|
|
1146
|
-
/* @__PURE__ */
|
|
1147
|
-
/* @__PURE__ */
|
|
1465
|
+
/* @__PURE__ */ jsxs4("div", { children: [
|
|
1466
|
+
/* @__PURE__ */ jsxs4("p", { className: "font-medium text-2xl", children: [
|
|
1148
1467
|
profile.metrics.success_rate.toFixed(0),
|
|
1149
1468
|
"%"
|
|
1150
1469
|
] }),
|
|
1151
|
-
/* @__PURE__ */
|
|
1470
|
+
/* @__PURE__ */ jsx4("p", { className: "text-muted-foreground text-xs", children: "Success Rate" })
|
|
1152
1471
|
] }),
|
|
1153
|
-
/* @__PURE__ */
|
|
1154
|
-
/* @__PURE__ */
|
|
1472
|
+
/* @__PURE__ */ jsxs4("div", { children: [
|
|
1473
|
+
/* @__PURE__ */ jsxs4("p", { className: "font-medium text-2xl", children: [
|
|
1155
1474
|
(profile.metrics.avg_duration_ms / 1e3).toFixed(1),
|
|
1156
1475
|
"s"
|
|
1157
1476
|
] }),
|
|
1158
|
-
/* @__PURE__ */
|
|
1477
|
+
/* @__PURE__ */ jsx4("p", { className: "text-muted-foreground text-xs", children: "Avg Duration" })
|
|
1159
1478
|
] }),
|
|
1160
|
-
profile.metrics.avg_tokens_used && /* @__PURE__ */
|
|
1161
|
-
/* @__PURE__ */
|
|
1162
|
-
/* @__PURE__ */
|
|
1479
|
+
profile.metrics.avg_tokens_used && /* @__PURE__ */ jsxs4("div", { children: [
|
|
1480
|
+
/* @__PURE__ */ jsx4("p", { className: "font-medium text-2xl", children: profile.metrics.avg_tokens_used.toLocaleString() }),
|
|
1481
|
+
/* @__PURE__ */ jsx4("p", { className: "text-muted-foreground text-xs", children: "Avg Tokens" })
|
|
1163
1482
|
] })
|
|
1164
1483
|
] })
|
|
1165
1484
|
] })
|
|
1166
1485
|
] }),
|
|
1167
|
-
/* @__PURE__ */
|
|
1168
|
-
/* @__PURE__ */
|
|
1169
|
-
onDuplicate && /* @__PURE__ */
|
|
1170
|
-
/* @__PURE__ */
|
|
1486
|
+
/* @__PURE__ */ jsxs4(DialogFooter, { children: [
|
|
1487
|
+
/* @__PURE__ */ jsx4(Button, { variant: "outline", onClick: onClose, children: "Close" }),
|
|
1488
|
+
onDuplicate && /* @__PURE__ */ jsxs4(Button, { variant: "outline", onClick: onDuplicate, children: [
|
|
1489
|
+
/* @__PURE__ */ jsx4(Copy, { className: "mr-2 h-4 w-4" }),
|
|
1171
1490
|
"Duplicate"
|
|
1172
1491
|
] }),
|
|
1173
|
-
onEdit && /* @__PURE__ */
|
|
1174
|
-
/* @__PURE__ */
|
|
1492
|
+
onEdit && /* @__PURE__ */ jsxs4(Button, { onClick: onEdit, children: [
|
|
1493
|
+
/* @__PURE__ */ jsx4(Edit2, { className: "mr-2 h-4 w-4" }),
|
|
1175
1494
|
"Edit"
|
|
1176
1495
|
] })
|
|
1177
1496
|
] })
|
|
@@ -1180,5 +1499,6 @@ function ProfileDetailDialog({
|
|
|
1180
1499
|
export {
|
|
1181
1500
|
BillingPage,
|
|
1182
1501
|
ProfilesPage,
|
|
1502
|
+
ProvisioningWizard,
|
|
1183
1503
|
StandalonePricingPage
|
|
1184
1504
|
};
|