@tangle-network/sandbox-ui 0.113.7 → 0.115.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -0
- package/dist/WorkflowGraph-B-NsdYz_.js +1961 -0
- package/dist/assets.d.ts +214 -206
- package/dist/assets.js +1057 -908
- package/dist/auth-CWe17Hly.js +37 -0
- package/dist/auth.d.ts +2 -30
- package/dist/auth.js +2 -15
- package/dist/chat-BOvFAe6p.js +903 -0
- package/dist/chat.d.ts +2 -230
- package/dist/chat.js +2 -34
- package/dist/connectors.d.ts +52 -49
- package/dist/connectors.js +595 -643
- package/dist/dashboard-CZ3VgNPR.js +4969 -0
- package/dist/dashboard.d.ts +4 -1297
- package/dist/dashboard.js +4 -152
- package/dist/editor.d.ts +2 -1
- package/dist/editor.js +2 -31
- package/dist/files.d.ts +2 -6
- package/dist/files.js +2 -33
- package/dist/globals.css +75 -3
- package/dist/hooks.d.ts +146 -148
- package/dist/hooks.js +222 -55
- package/dist/index-CKRaj1pM.d.ts +776 -0
- package/dist/index-CXX5IpH2.d.ts +2 -0
- package/dist/index-CesPlOyx.d.ts +367 -0
- package/dist/index-DPePq7c8.d.ts +1340 -0
- package/dist/index-DiyLLZuJ.d.ts +230 -0
- package/dist/index-DvmZLMT1.d.ts +30 -0
- package/dist/index-PRM636Ex.d.ts +86 -0
- package/dist/index.d.ts +21 -33
- package/dist/index.js +21 -701
- package/dist/info-panel-C9cqDzOL.js +594 -0
- package/dist/integrations.d.ts +133 -141
- package/dist/integrations.js +491 -673
- package/dist/markdown.d.ts +2 -1
- package/dist/markdown.js +2 -13
- package/dist/model-I-NIxeM-.js +1250 -0
- package/dist/model-brand-B9A4H9pJ.d.ts +98 -0
- package/dist/model-brand-hMyDTUqB.js +624 -0
- package/dist/motion-DkyBRJb9.js +37 -0
- package/dist/openui.d.ts +2 -1
- package/dist/openui.js +2 -7
- package/dist/pages.d.ts +307 -300
- package/dist/pages.js +4404 -4181
- package/dist/primitives-Dh1vG6J3.js +113 -0
- package/dist/primitives.d.ts +2 -74
- package/dist/primitives.js +2 -204
- package/dist/provider-logo-DjqmConF.js +311 -0
- package/dist/run.d.ts +2 -1
- package/dist/run.js +2 -23
- package/dist/sdk-hooks.d.ts +3 -4
- package/dist/sdk-hooks.js +3 -31
- package/dist/sidecar-DgH_vQ6m.d.ts +9 -0
- package/dist/stores.d.ts +14 -15
- package/dist/stores.js +13 -81
- package/dist/styles.css +75 -3
- package/dist/template-card-L-4gmjx2.d.ts +90 -0
- package/dist/terminal-CN9ZgHRt.js +197 -0
- package/dist/terminal.d.ts +60 -60
- package/dist/terminal.js +2 -10
- package/dist/tokens.css +51 -0
- package/dist/types.d.ts +4 -11
- package/dist/types.js +0 -1
- package/dist/use-pty-session-C8cE0adT.js +669 -0
- package/dist/use-sidecar-auth-CCTJcrq7.d.ts +145 -0
- package/dist/use-sidecar-auth-DkdcufOz.js +742 -0
- package/dist/utils-DzWbktWG.js +2 -0
- package/dist/utils.d.ts +2 -1
- package/dist/utils.js +2 -37
- package/dist/workbench-ztU44Jt2.js +8455 -0
- package/dist/workbench.d.ts +2 -310
- package/dist/workbench.js +2 -44
- package/dist/workflows.d.ts +341 -339
- package/dist/workflows.js +74 -109
- package/dist/workspace-B6AtI6ld.js +2510 -0
- package/dist/workspace.d.ts +2 -761
- package/dist/workspace.js +2 -51
- package/package.json +46 -40
- package/dist/WorkflowGraph-2QOORYIR.js +0 -1722
- package/dist/chunk-2BUPSB7O.js +0 -0
- package/dist/chunk-3KBNPQQF.js +0 -2697
- package/dist/chunk-3LIXVEEE.js +0 -279
- package/dist/chunk-72UF2H5H.js +0 -707
- package/dist/chunk-AI25G5MX.js +0 -944
- package/dist/chunk-ANSC5AFC.js +0 -314
- package/dist/chunk-AZ3AWMTM.js +0 -8
- package/dist/chunk-BGVEHENC.js +0 -10
- package/dist/chunk-CZ7CSFO4.js +0 -39
- package/dist/chunk-DYXXYGS4.js +0 -4700
- package/dist/chunk-EI44GEQ5.js +0 -6
- package/dist/chunk-IACRDXER.js +0 -219
- package/dist/chunk-IOB2PW5Z.js +0 -55
- package/dist/chunk-M4K7ZGR2.js +0 -24
- package/dist/chunk-MYZAW4RX.js +0 -665
- package/dist/chunk-OMUIPJQZ.js +0 -555
- package/dist/chunk-RQZRXKMR.js +0 -398
- package/dist/chunk-SOKKTB7W.js +0 -230
- package/dist/chunk-TADGS4Q7.js +0 -1010
- package/dist/chunk-UCQNOUN3.js +0 -7964
- package/dist/chunk-ULPLRBMF.js +0 -34
- package/dist/chunk-WID73FPH.js +0 -89
- package/dist/chunk-X3YXP7FG.js +0 -38
- package/dist/logo-DiAjq759.d.ts +0 -15
- package/dist/model-brand-BNnaUKKZ.d.ts +0 -99
- package/dist/ports-list-CDIvTNnX.d.ts +0 -17
- package/dist/sdk-hooks-Djkjq4cp.d.ts +0 -145
- package/dist/template-card-Bn-Bw5xC.d.ts +0 -87
package/dist/styles.css
CHANGED
|
@@ -518,6 +518,9 @@
|
|
|
518
518
|
.-m-1 {
|
|
519
519
|
margin: calc(var(--spacing) * -1);
|
|
520
520
|
}
|
|
521
|
+
.m-0 {
|
|
522
|
+
margin: 0px;
|
|
523
|
+
}
|
|
521
524
|
.m-4 {
|
|
522
525
|
margin: calc(var(--spacing) * 4);
|
|
523
526
|
}
|
|
@@ -736,6 +739,10 @@
|
|
|
736
739
|
width: calc(var(--spacing) * 3);
|
|
737
740
|
height: calc(var(--spacing) * 3);
|
|
738
741
|
}
|
|
742
|
+
.size-4 {
|
|
743
|
+
width: calc(var(--spacing) * 4);
|
|
744
|
+
height: calc(var(--spacing) * 4);
|
|
745
|
+
}
|
|
739
746
|
.size-5 {
|
|
740
747
|
width: calc(var(--spacing) * 5);
|
|
741
748
|
height: calc(var(--spacing) * 5);
|
|
@@ -1222,9 +1229,6 @@
|
|
|
1222
1229
|
.w-\[420px\] {
|
|
1223
1230
|
width: 420px;
|
|
1224
1231
|
}
|
|
1225
|
-
.w-\[440px\] {
|
|
1226
|
-
width: 440px;
|
|
1227
|
-
}
|
|
1228
1232
|
.w-\[480px\] {
|
|
1229
1233
|
width: 480px;
|
|
1230
1234
|
}
|
|
@@ -1309,6 +1313,9 @@
|
|
|
1309
1313
|
.max-w-40 {
|
|
1310
1314
|
max-width: calc(var(--spacing) * 40);
|
|
1311
1315
|
}
|
|
1316
|
+
.max-w-80 {
|
|
1317
|
+
max-width: calc(var(--spacing) * 80);
|
|
1318
|
+
}
|
|
1312
1319
|
.max-w-\[14rem\] {
|
|
1313
1320
|
max-width: 14rem;
|
|
1314
1321
|
}
|
|
@@ -1339,6 +1346,12 @@
|
|
|
1339
1346
|
.max-w-\[320px\] {
|
|
1340
1347
|
max-width: 320px;
|
|
1341
1348
|
}
|
|
1349
|
+
.max-w-\[360px\] {
|
|
1350
|
+
max-width: 360px;
|
|
1351
|
+
}
|
|
1352
|
+
.max-w-\[390px\] {
|
|
1353
|
+
max-width: 390px;
|
|
1354
|
+
}
|
|
1342
1355
|
.max-w-\[400px\] {
|
|
1343
1356
|
max-width: 400px;
|
|
1344
1357
|
}
|
|
@@ -1381,6 +1394,9 @@
|
|
|
1381
1394
|
.max-w-\[700px\] {
|
|
1382
1395
|
max-width: 700px;
|
|
1383
1396
|
}
|
|
1397
|
+
.max-w-\[742px\] {
|
|
1398
|
+
max-width: 742px;
|
|
1399
|
+
}
|
|
1384
1400
|
.max-w-\[760px\] {
|
|
1385
1401
|
max-width: 760px;
|
|
1386
1402
|
}
|
|
@@ -1399,6 +1415,9 @@
|
|
|
1399
1415
|
.max-w-\[900px\] {
|
|
1400
1416
|
max-width: 900px;
|
|
1401
1417
|
}
|
|
1418
|
+
.max-w-\[960px\] {
|
|
1419
|
+
max-width: 960px;
|
|
1420
|
+
}
|
|
1402
1421
|
.max-w-\[1000px\] {
|
|
1403
1422
|
max-width: 1000px;
|
|
1404
1423
|
}
|
|
@@ -1411,6 +1430,15 @@
|
|
|
1411
1430
|
.max-w-\[1100px\] {
|
|
1412
1431
|
max-width: 1100px;
|
|
1413
1432
|
}
|
|
1433
|
+
.max-w-\[calc\(100vw-2rem\)\] {
|
|
1434
|
+
max-width: calc(100vw - 2rem);
|
|
1435
|
+
}
|
|
1436
|
+
.max-w-\[calc\(100vw-5rem\)\] {
|
|
1437
|
+
max-width: calc(100vw - 5rem);
|
|
1438
|
+
}
|
|
1439
|
+
.max-w-\[min\(640px\,calc\(100vw-2rem\)\)\] {
|
|
1440
|
+
max-width: min(640px, calc(100vw - 2rem));
|
|
1441
|
+
}
|
|
1414
1442
|
.max-w-full {
|
|
1415
1443
|
max-width: 100%;
|
|
1416
1444
|
}
|
|
@@ -1510,6 +1538,9 @@
|
|
|
1510
1538
|
.basis-1\/3 {
|
|
1511
1539
|
flex-basis: calc(1 / 3 * 100%);
|
|
1512
1540
|
}
|
|
1541
|
+
.basis-full {
|
|
1542
|
+
flex-basis: 100%;
|
|
1543
|
+
}
|
|
1513
1544
|
.caption-bottom {
|
|
1514
1545
|
caption-side: bottom;
|
|
1515
1546
|
}
|
|
@@ -4751,6 +4782,14 @@
|
|
|
4751
4782
|
}
|
|
4752
4783
|
}
|
|
4753
4784
|
}
|
|
4785
|
+
@media (width < 359px) {
|
|
4786
|
+
.max-\[359px\]\:w-full {
|
|
4787
|
+
width: 100%;
|
|
4788
|
+
}
|
|
4789
|
+
.max-\[359px\]\:justify-start {
|
|
4790
|
+
justify-content: flex-start;
|
|
4791
|
+
}
|
|
4792
|
+
}
|
|
4754
4793
|
@media (width < 64rem) {
|
|
4755
4794
|
.max-lg\:hidden {
|
|
4756
4795
|
display: none;
|
|
@@ -4777,6 +4816,9 @@
|
|
|
4777
4816
|
.sm\:row-start-1 {
|
|
4778
4817
|
grid-row-start: 1;
|
|
4779
4818
|
}
|
|
4819
|
+
.sm\:ml-0 {
|
|
4820
|
+
margin-left: 0px;
|
|
4821
|
+
}
|
|
4780
4822
|
.sm\:grid {
|
|
4781
4823
|
display: grid;
|
|
4782
4824
|
}
|
|
@@ -4792,6 +4834,12 @@
|
|
|
4792
4834
|
.sm\:w-auto {
|
|
4793
4835
|
width: auto;
|
|
4794
4836
|
}
|
|
4837
|
+
.sm\:flex-1 {
|
|
4838
|
+
flex: 1;
|
|
4839
|
+
}
|
|
4840
|
+
.sm\:basis-auto {
|
|
4841
|
+
flex-basis: auto;
|
|
4842
|
+
}
|
|
4795
4843
|
.sm\:grid-cols-2 {
|
|
4796
4844
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
4797
4845
|
}
|
|
@@ -4838,6 +4886,9 @@
|
|
|
4838
4886
|
.sm\:p-5 {
|
|
4839
4887
|
padding: calc(var(--spacing) * 5);
|
|
4840
4888
|
}
|
|
4889
|
+
.sm\:p-8 {
|
|
4890
|
+
padding: calc(var(--spacing) * 8);
|
|
4891
|
+
}
|
|
4841
4892
|
.sm\:px-4 {
|
|
4842
4893
|
padding-inline: calc(var(--spacing) * 4);
|
|
4843
4894
|
}
|
|
@@ -5581,6 +5632,27 @@
|
|
|
5581
5632
|
@supports (color: color-mix(in lab, red, red)) {
|
|
5582
5633
|
--border-strong: color-mix(in srgb, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 20%);
|
|
5583
5634
|
}
|
|
5635
|
+
--chart-ink: var(--text-primary);
|
|
5636
|
+
--chart-ink-muted: var(--text-dim);
|
|
5637
|
+
--chart-muted: var(--md3-outline);
|
|
5638
|
+
--chart-grid: var(--md3-surface-container-high);
|
|
5639
|
+
--chart-rule: var(--md3-outline-variant);
|
|
5640
|
+
--chart-shade: var(--bg-hover);
|
|
5641
|
+
--chart-accent: var(--brand-cool);
|
|
5642
|
+
--chart-tier-c: #4a4a95;
|
|
5643
|
+
--chart-tier-b: #5b5bd6;
|
|
5644
|
+
--chart-tier-a: #8b87f0;
|
|
5645
|
+
--chart-tier-s: #b1a9ff;
|
|
5646
|
+
}
|
|
5647
|
+
[data-sandbox-theme="vault"],
|
|
5648
|
+
[data-theme="light"],
|
|
5649
|
+
.light,
|
|
5650
|
+
[data-theme$="-light"] {
|
|
5651
|
+
--chart-accent: hsl(var(--hsl-primary));
|
|
5652
|
+
--chart-tier-c: #9b9ef0;
|
|
5653
|
+
--chart-tier-b: #7c7fe3;
|
|
5654
|
+
--chart-tier-a: #5b5bd6;
|
|
5655
|
+
--chart-tier-s: #272962;
|
|
5584
5656
|
}
|
|
5585
5657
|
[data-theme] {
|
|
5586
5658
|
--color-background: hsl(var(--hsl-background));
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import * as React$1 from "react";
|
|
2
|
+
//#region src/dashboard/billing-dashboard.d.ts
|
|
3
|
+
interface BillingSubscription {
|
|
4
|
+
status: string;
|
|
5
|
+
tierName: string;
|
|
6
|
+
renewsAt: string;
|
|
7
|
+
}
|
|
8
|
+
interface BillingBalance {
|
|
9
|
+
available: number;
|
|
10
|
+
used: number;
|
|
11
|
+
}
|
|
12
|
+
interface BillingUsage {
|
|
13
|
+
period: string;
|
|
14
|
+
total: number;
|
|
15
|
+
byModel: Record<string, number>;
|
|
16
|
+
}
|
|
17
|
+
interface BillingDashboardProps {
|
|
18
|
+
subscription: BillingSubscription | null;
|
|
19
|
+
balance: BillingBalance;
|
|
20
|
+
usage: BillingUsage;
|
|
21
|
+
onManageSubscription: () => void;
|
|
22
|
+
onAddCredits: () => void;
|
|
23
|
+
variant?: "sandbox";
|
|
24
|
+
className?: string;
|
|
25
|
+
cardClassName?: string;
|
|
26
|
+
}
|
|
27
|
+
declare function BillingDashboard({ subscription, balance, usage, onManageSubscription, onAddCredits, variant, className, cardClassName }: BillingDashboardProps): import("react").JSX.Element;
|
|
28
|
+
//#endregion
|
|
29
|
+
//#region src/dashboard/pricing-page.d.ts
|
|
30
|
+
interface PricingTier {
|
|
31
|
+
id: string;
|
|
32
|
+
name: string;
|
|
33
|
+
description: string;
|
|
34
|
+
monthlyPriceCents: number;
|
|
35
|
+
yearlyPriceCents?: number;
|
|
36
|
+
features: string[];
|
|
37
|
+
recommended?: boolean;
|
|
38
|
+
creditsPerMonth?: number;
|
|
39
|
+
monthlyPriceId?: string;
|
|
40
|
+
yearlyPriceId?: string;
|
|
41
|
+
}
|
|
42
|
+
interface PricingPageProps {
|
|
43
|
+
tiers: PricingTier[];
|
|
44
|
+
currentTierId?: string;
|
|
45
|
+
billingPeriod: "monthly" | "yearly";
|
|
46
|
+
onBillingPeriodChange: (period: "monthly" | "yearly") => void;
|
|
47
|
+
onSelectTier: (tierId: string) => void;
|
|
48
|
+
variant?: "sandbox";
|
|
49
|
+
loading?: boolean;
|
|
50
|
+
className?: string;
|
|
51
|
+
cardClassName?: string;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Formats an integer cent amount as a human-readable USD price.
|
|
55
|
+
* Whole-dollar amounts omit decimals ($10), fractional amounts show two ($10.99).
|
|
56
|
+
* Returns "$0" for non-finite or negative inputs.
|
|
57
|
+
* @param cents - Amount in whole US cents (e.g. 1099 for $10.99).
|
|
58
|
+
*/
|
|
59
|
+
declare function formatPrice(cents: number): string;
|
|
60
|
+
declare function PricingPage({ tiers, currentTierId, billingPeriod, onBillingPeriodChange, onSelectTier, loading, className }: PricingPageProps): import("react").JSX.Element;
|
|
61
|
+
//#endregion
|
|
62
|
+
//#region src/dashboard/usage-chart.d.ts
|
|
63
|
+
interface UsageDataPoint {
|
|
64
|
+
date: string;
|
|
65
|
+
value: number;
|
|
66
|
+
}
|
|
67
|
+
interface UsageChartProps {
|
|
68
|
+
data: UsageDataPoint[];
|
|
69
|
+
title: string;
|
|
70
|
+
unit: string;
|
|
71
|
+
className?: string;
|
|
72
|
+
}
|
|
73
|
+
declare function UsageChart({ data, title, unit, className }: UsageChartProps): React$1.JSX.Element;
|
|
74
|
+
//#endregion
|
|
75
|
+
//#region src/dashboard/template-card.d.ts
|
|
76
|
+
interface TemplateCardData {
|
|
77
|
+
id: string;
|
|
78
|
+
name: string;
|
|
79
|
+
description: string;
|
|
80
|
+
icon?: React$1.ReactNode;
|
|
81
|
+
tags?: string[];
|
|
82
|
+
}
|
|
83
|
+
interface TemplateCardProps {
|
|
84
|
+
template: TemplateCardData;
|
|
85
|
+
onUseTemplate: (templateId: string) => void;
|
|
86
|
+
className?: string;
|
|
87
|
+
}
|
|
88
|
+
declare function TemplateCard({ template, onUseTemplate, className }: TemplateCardProps): React$1.JSX.Element;
|
|
89
|
+
//#endregion
|
|
90
|
+
export { UsageChartProps as a, PricingPageProps as c, BillingBalance as d, BillingDashboard as f, BillingUsage as h, UsageChart as i, PricingTier as l, BillingSubscription as m, TemplateCardData as n, UsageDataPoint as o, BillingDashboardProps as p, TemplateCardProps as r, PricingPage as s, TemplateCard as t, formatPrice as u };
|
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
import { t as usePtySession } from "./use-pty-session-C8cE0adT.js";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useCallback, useEffect, useMemo, useRef } from "react";
|
|
4
|
+
import "@xterm/xterm/css/xterm.css";
|
|
5
|
+
import { Terminal } from "@xterm/xterm";
|
|
6
|
+
import { FitAddon } from "@xterm/addon-fit";
|
|
7
|
+
import { WebLinksAddon } from "@xterm/addon-web-links";
|
|
8
|
+
//#region src/terminal/terminal-view.tsx
|
|
9
|
+
const DEFAULT_TERMINAL_THEME = {
|
|
10
|
+
background: "#0c0c0e",
|
|
11
|
+
foreground: "#d4d4d8",
|
|
12
|
+
cursor: "#34d399",
|
|
13
|
+
cursorAccent: "#0c0c0e",
|
|
14
|
+
selectionBackground: "#7c3aed33",
|
|
15
|
+
selectionForeground: "#d4d4d8",
|
|
16
|
+
black: "#18181b",
|
|
17
|
+
red: "#ef4444",
|
|
18
|
+
green: "#34d399",
|
|
19
|
+
yellow: "#fbbf24",
|
|
20
|
+
blue: "#60a5fa",
|
|
21
|
+
magenta: "#a78bfa",
|
|
22
|
+
cyan: "#22d3ee",
|
|
23
|
+
white: "#d4d4d8",
|
|
24
|
+
brightBlack: "#52525b",
|
|
25
|
+
brightRed: "#f87171",
|
|
26
|
+
brightGreen: "#6ee7b7",
|
|
27
|
+
brightYellow: "#fde68a",
|
|
28
|
+
brightBlue: "#93c5fd",
|
|
29
|
+
brightMagenta: "#c4b5fd",
|
|
30
|
+
brightCyan: "#67e8f9",
|
|
31
|
+
brightWhite: "#fafafa"
|
|
32
|
+
};
|
|
33
|
+
function TerminalView({ apiUrl, token, theme, title = "Terminal", subtitle = "Connected to PTY session", isActive = true, connectionId, incarnationId, control, fontSize = 13 }) {
|
|
34
|
+
const resolvedTheme = useMemo(() => ({
|
|
35
|
+
...DEFAULT_TERMINAL_THEME,
|
|
36
|
+
...theme
|
|
37
|
+
}), [theme]);
|
|
38
|
+
const resolvedFontSize = Number.isFinite(fontSize) && fontSize > 0 ? fontSize : 13;
|
|
39
|
+
const fontSizeRef = useRef(resolvedFontSize);
|
|
40
|
+
fontSizeRef.current = resolvedFontSize;
|
|
41
|
+
const containerRef = useRef(null);
|
|
42
|
+
const termRef = useRef(null);
|
|
43
|
+
const fitAddonRef = useRef(null);
|
|
44
|
+
const pendingWritesRef = useRef([]);
|
|
45
|
+
const writeRafRef = useRef(null);
|
|
46
|
+
const onData = useCallback((data) => {
|
|
47
|
+
if (!data) return;
|
|
48
|
+
pendingWritesRef.current.push(data);
|
|
49
|
+
if (writeRafRef.current !== null) return;
|
|
50
|
+
writeRafRef.current = requestAnimationFrame(() => {
|
|
51
|
+
writeRafRef.current = null;
|
|
52
|
+
const chunks = pendingWritesRef.current;
|
|
53
|
+
if (chunks.length === 0) return;
|
|
54
|
+
pendingWritesRef.current = [];
|
|
55
|
+
termRef.current?.write(chunks.length === 1 ? chunks[0] : chunks.join(""));
|
|
56
|
+
});
|
|
57
|
+
}, []);
|
|
58
|
+
const { isConnected, error, sendCommand, resizeTerminal, reconnect } = usePtySession({
|
|
59
|
+
apiUrl,
|
|
60
|
+
token,
|
|
61
|
+
onData,
|
|
62
|
+
connectionId,
|
|
63
|
+
incarnationId,
|
|
64
|
+
control
|
|
65
|
+
});
|
|
66
|
+
useEffect(() => {
|
|
67
|
+
if (!containerRef.current) return;
|
|
68
|
+
const term = new Terminal({
|
|
69
|
+
theme: resolvedTheme,
|
|
70
|
+
fontFamily: "\"JetBrains Mono\", \"Fira Code\", \"Cascadia Code\", Menlo, monospace",
|
|
71
|
+
fontSize: fontSizeRef.current,
|
|
72
|
+
lineHeight: 1.4,
|
|
73
|
+
cursorBlink: true,
|
|
74
|
+
cursorStyle: "bar",
|
|
75
|
+
scrollback: 5e3,
|
|
76
|
+
convertEol: true,
|
|
77
|
+
allowProposedApi: true
|
|
78
|
+
});
|
|
79
|
+
const fitAddon = new FitAddon();
|
|
80
|
+
const webLinksAddon = new WebLinksAddon();
|
|
81
|
+
term.loadAddon(fitAddon);
|
|
82
|
+
term.loadAddon(webLinksAddon);
|
|
83
|
+
term.open(containerRef.current);
|
|
84
|
+
let webglAddon = null;
|
|
85
|
+
let webglCancelled = false;
|
|
86
|
+
(async () => {
|
|
87
|
+
try {
|
|
88
|
+
const mod = await import("@xterm/addon-webgl");
|
|
89
|
+
if (webglCancelled) return;
|
|
90
|
+
try {
|
|
91
|
+
const addon = new mod.WebglAddon();
|
|
92
|
+
addon.onContextLoss(() => {
|
|
93
|
+
webglAddon?.dispose();
|
|
94
|
+
webglAddon = null;
|
|
95
|
+
});
|
|
96
|
+
webglAddon = addon;
|
|
97
|
+
term.loadAddon(addon);
|
|
98
|
+
} catch {}
|
|
99
|
+
} catch {}
|
|
100
|
+
})();
|
|
101
|
+
requestAnimationFrame(() => {
|
|
102
|
+
fitAddon.fit();
|
|
103
|
+
});
|
|
104
|
+
termRef.current = term;
|
|
105
|
+
fitAddonRef.current = fitAddon;
|
|
106
|
+
term.onData((data) => {
|
|
107
|
+
if (data === "\f") {
|
|
108
|
+
termRef.current?.clear();
|
|
109
|
+
sendCommand("\r").catch(console.error);
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
sendCommand(data).catch((err) => {
|
|
113
|
+
termRef.current?.writeln(`\r\n\x1b[31m${err instanceof Error ? err.message : "Send failed"}\x1b[0m`);
|
|
114
|
+
});
|
|
115
|
+
});
|
|
116
|
+
term.onResize(({ cols, rows }) => {
|
|
117
|
+
resizeTerminal(cols, rows).catch(console.error);
|
|
118
|
+
});
|
|
119
|
+
const ro = new ResizeObserver(() => {
|
|
120
|
+
requestAnimationFrame(() => {
|
|
121
|
+
fitAddon.fit();
|
|
122
|
+
});
|
|
123
|
+
});
|
|
124
|
+
ro.observe(containerRef.current);
|
|
125
|
+
return () => {
|
|
126
|
+
webglCancelled = true;
|
|
127
|
+
ro.disconnect();
|
|
128
|
+
if (writeRafRef.current !== null) {
|
|
129
|
+
cancelAnimationFrame(writeRafRef.current);
|
|
130
|
+
writeRafRef.current = null;
|
|
131
|
+
}
|
|
132
|
+
pendingWritesRef.current = [];
|
|
133
|
+
webglAddon?.dispose();
|
|
134
|
+
term.dispose();
|
|
135
|
+
termRef.current = null;
|
|
136
|
+
fitAddonRef.current = null;
|
|
137
|
+
};
|
|
138
|
+
}, [
|
|
139
|
+
sendCommand,
|
|
140
|
+
resizeTerminal,
|
|
141
|
+
title,
|
|
142
|
+
subtitle
|
|
143
|
+
]);
|
|
144
|
+
useEffect(() => {
|
|
145
|
+
if (termRef.current) termRef.current.options.theme = resolvedTheme;
|
|
146
|
+
}, [resolvedTheme]);
|
|
147
|
+
useEffect(() => {
|
|
148
|
+
const term = termRef.current;
|
|
149
|
+
if (!term || term.options.fontSize === resolvedFontSize) return;
|
|
150
|
+
term.options.fontSize = resolvedFontSize;
|
|
151
|
+
const rafId = requestAnimationFrame(() => fitAddonRef.current?.fit());
|
|
152
|
+
return () => cancelAnimationFrame(rafId);
|
|
153
|
+
}, [resolvedFontSize]);
|
|
154
|
+
useEffect(() => {
|
|
155
|
+
if (isConnected && termRef.current) {
|
|
156
|
+
resizeTerminal(termRef.current.cols, termRef.current.rows).catch(console.error);
|
|
157
|
+
if (isActive) termRef.current.focus();
|
|
158
|
+
}
|
|
159
|
+
}, [
|
|
160
|
+
isConnected,
|
|
161
|
+
resizeTerminal,
|
|
162
|
+
isActive
|
|
163
|
+
]);
|
|
164
|
+
useEffect(() => {
|
|
165
|
+
if (isActive && termRef.current && fitAddonRef.current) setTimeout(() => {
|
|
166
|
+
fitAddonRef.current?.fit();
|
|
167
|
+
termRef.current?.focus();
|
|
168
|
+
}, 50);
|
|
169
|
+
}, [isActive]);
|
|
170
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
171
|
+
className: "relative h-full w-full group cursor-text",
|
|
172
|
+
onClick: () => termRef.current?.focus(),
|
|
173
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
174
|
+
ref: containerRef,
|
|
175
|
+
className: "h-full w-full overflow-hidden relative z-0",
|
|
176
|
+
style: { backgroundColor: resolvedTheme.background }
|
|
177
|
+
}), (!isConnected || error) && /* @__PURE__ */ jsx("div", {
|
|
178
|
+
className: "absolute inset-0 flex items-center justify-center bg-surface-container-lowest",
|
|
179
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
180
|
+
className: "text-center",
|
|
181
|
+
children: error ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
|
|
182
|
+
className: "text-sm text-[var(--surface-danger-text)] mb-3",
|
|
183
|
+
children: error
|
|
184
|
+
}), /* @__PURE__ */ jsx("button", {
|
|
185
|
+
onClick: reconnect,
|
|
186
|
+
className: "text-sm text-[var(--surface-success-text)] hover:opacity-80 underline cursor-pointer",
|
|
187
|
+
children: "Retry connection"
|
|
188
|
+
})] }) : /* @__PURE__ */ jsx("p", {
|
|
189
|
+
className: "text-[13px] text-muted-foreground",
|
|
190
|
+
children: "Connecting to terminal..."
|
|
191
|
+
})
|
|
192
|
+
})
|
|
193
|
+
})]
|
|
194
|
+
});
|
|
195
|
+
}
|
|
196
|
+
//#endregion
|
|
197
|
+
export { TerminalView as n, DEFAULT_TERMINAL_THEME as t };
|
package/dist/terminal.d.ts
CHANGED
|
@@ -1,64 +1,64 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { AgentInteractiveSessionControlClaim } from
|
|
3
|
-
|
|
1
|
+
import "@xterm/xterm/css/xterm.css";
|
|
2
|
+
import { AgentInteractiveSessionControlClaim } from "@tangle-network/agent-interface";
|
|
3
|
+
//#region src/terminal/terminal-view.d.ts
|
|
4
4
|
interface TerminalTheme {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
5
|
+
background: string;
|
|
6
|
+
foreground: string;
|
|
7
|
+
cursor: string;
|
|
8
|
+
cursorAccent: string;
|
|
9
|
+
selectionBackground: string;
|
|
10
|
+
selectionForeground: string;
|
|
11
|
+
black: string;
|
|
12
|
+
red: string;
|
|
13
|
+
green: string;
|
|
14
|
+
yellow: string;
|
|
15
|
+
blue: string;
|
|
16
|
+
magenta: string;
|
|
17
|
+
cyan: string;
|
|
18
|
+
white: string;
|
|
19
|
+
brightBlack: string;
|
|
20
|
+
brightRed: string;
|
|
21
|
+
brightGreen: string;
|
|
22
|
+
brightYellow: string;
|
|
23
|
+
brightBlue: string;
|
|
24
|
+
brightMagenta: string;
|
|
25
|
+
brightCyan: string;
|
|
26
|
+
brightWhite: string;
|
|
27
27
|
}
|
|
28
28
|
interface TerminalViewProps {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
29
|
+
/** Base URL of the sidecar. */
|
|
30
|
+
apiUrl: string;
|
|
31
|
+
/** Bearer token for authentication. */
|
|
32
|
+
token: string;
|
|
33
|
+
/** xterm color theme override. */
|
|
34
|
+
theme?: Partial<TerminalTheme>;
|
|
35
|
+
/** Title shown in the welcome box. Default: "Terminal". */
|
|
36
|
+
title?: string;
|
|
37
|
+
/** Subtitle shown in the welcome box. Default: "Connected to PTY session". */
|
|
38
|
+
subtitle?: string;
|
|
39
|
+
/** @deprecated No longer used — the PTY provides its own prompt. */
|
|
40
|
+
prompt?: string;
|
|
41
|
+
/**
|
|
42
|
+
* Monospace font size in CSS pixels. Default 13. Changing it updates
|
|
43
|
+
* the live terminal and refits so xterm recomputes cols/rows from the
|
|
44
|
+
* new measured cell size instead of re-creating the terminal (which
|
|
45
|
+
* would drop scrollback).
|
|
46
|
+
*/
|
|
47
|
+
fontSize?: number;
|
|
48
|
+
/** Whether the terminal tab is currently active and visible. */
|
|
49
|
+
isActive?: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* Stable id reused across remounts so the sidecar restores the same
|
|
52
|
+
* PTY session instead of spawning a fresh shell. Omit for a new
|
|
53
|
+
* session per mount.
|
|
54
|
+
*/
|
|
55
|
+
connectionId?: string;
|
|
56
|
+
/** Exact incarnation issued for an interactive agent session. */
|
|
57
|
+
incarnationId?: string;
|
|
58
|
+
/** Write claim for the exact interactive agent session. */
|
|
59
|
+
control?: AgentInteractiveSessionControlClaim;
|
|
60
60
|
}
|
|
61
|
-
declare const DEFAULT_TERMINAL_THEME: TerminalTheme;
|
|
62
|
-
declare function TerminalView({ apiUrl, token, theme, title, subtitle, isActive, connectionId, incarnationId, control, fontSize
|
|
63
|
-
|
|
64
|
-
export {
|
|
61
|
+
export declare const DEFAULT_TERMINAL_THEME: TerminalTheme;
|
|
62
|
+
declare function TerminalView({ apiUrl, token, theme, title, subtitle, isActive, connectionId, incarnationId, control, fontSize }: TerminalViewProps): import("react").JSX.Element;
|
|
63
|
+
//#endregion
|
|
64
|
+
export { type TerminalTheme, TerminalView, type TerminalViewProps };
|
package/dist/terminal.js
CHANGED
|
@@ -1,10 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
TerminalView
|
|
4
|
-
} from "./chunk-IACRDXER.js";
|
|
5
|
-
import "./chunk-MYZAW4RX.js";
|
|
6
|
-
import "./chunk-CZ7CSFO4.js";
|
|
7
|
-
export {
|
|
8
|
-
DEFAULT_TERMINAL_THEME,
|
|
9
|
-
TerminalView
|
|
10
|
-
};
|
|
1
|
+
import { n as TerminalView, t as DEFAULT_TERMINAL_THEME } from "./terminal-CN9ZgHRt.js";
|
|
2
|
+
export { DEFAULT_TERMINAL_THEME, TerminalView };
|
package/dist/tokens.css
CHANGED
|
@@ -718,3 +718,54 @@
|
|
|
718
718
|
* paper, lighter on a dark card, never tinted. */
|
|
719
719
|
--border-strong: color-mix(in srgb, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 20%);
|
|
720
720
|
}
|
|
721
|
+
|
|
722
|
+
/* Chart marks — the palette behind @tangle-network/charts.
|
|
723
|
+
*
|
|
724
|
+
* One accent marks the measure a reader decides on (a rate bar, a frontier
|
|
725
|
+
* point, a solved attempt). One muted grey marks everything secondary. An
|
|
726
|
+
* ordinal indigo ramp marks App Grade tiers C < B < A < S; F has no fill and
|
|
727
|
+
* draws as a --chart-muted outline, the same mark as an unsolved attempt. No
|
|
728
|
+
* categorical palette ships: identity is carried by direct labels.
|
|
729
|
+
*
|
|
730
|
+
* Contrast against the dark canvas (#151523) and white paper, checked with the
|
|
731
|
+
* dataviz palette validator and WCAG ratios:
|
|
732
|
+
* ink 14.45 / 13.70, ink-muted 7.34 / 5.56, accent 6.05 / 7.41,
|
|
733
|
+
* muted 5.54 / 4.41, grid 1.46 / 1.12 (recessive by design).
|
|
734
|
+
* Tiers pass the ordinal checks in both modes: one hue, monotone lightness,
|
|
735
|
+
* visible steps. They are iris ladder steps (ladders.css) except #8b87f0 dark
|
|
736
|
+
* and #7c7fe3 light, which sit between two steps to keep the gaps even.
|
|
737
|
+
*
|
|
738
|
+
* The aliases re-resolve on every theme scope, as the focus rule above does,
|
|
739
|
+
* so a named theme's ink and hairlines carry into its charts. */
|
|
740
|
+
:root,
|
|
741
|
+
.dark,
|
|
742
|
+
.light,
|
|
743
|
+
[data-sandbox-ui],
|
|
744
|
+
[data-sandbox-theme],
|
|
745
|
+
[data-theme] {
|
|
746
|
+
--chart-ink: var(--text-primary);
|
|
747
|
+
--chart-ink-muted: var(--text-dim);
|
|
748
|
+
--chart-muted: var(--md3-outline);
|
|
749
|
+
--chart-grid: var(--md3-surface-container-high);
|
|
750
|
+
--chart-rule: var(--md3-outline-variant);
|
|
751
|
+
--chart-shade: var(--bg-hover);
|
|
752
|
+
--chart-accent: var(--brand-cool);
|
|
753
|
+
--chart-tier-c: #4a4a95;
|
|
754
|
+
--chart-tier-b: #5b5bd6;
|
|
755
|
+
--chart-tier-a: #8b87f0;
|
|
756
|
+
--chart-tier-s: #b1a9ff;
|
|
757
|
+
}
|
|
758
|
+
|
|
759
|
+
/* Light: the accent is the indigo fill (#4c3fc6, 7.41:1 on white) and the tier
|
|
760
|
+
* ramp runs light to dark. `[data-theme$="-light"]` covers the named light
|
|
761
|
+
* themes, which would otherwise inherit the dark ramp from :root. */
|
|
762
|
+
[data-sandbox-theme="vault"],
|
|
763
|
+
[data-theme="light"],
|
|
764
|
+
.light,
|
|
765
|
+
[data-theme$="-light"] {
|
|
766
|
+
--chart-accent: hsl(var(--hsl-primary));
|
|
767
|
+
--chart-tier-c: #9b9ef0;
|
|
768
|
+
--chart-tier-b: #7c7fe3;
|
|
769
|
+
--chart-tier-a: #5b5bd6;
|
|
770
|
+
--chart-tier-s: #272962;
|
|
771
|
+
}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,11 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
interface Session {
|
|
6
|
-
id: string;
|
|
7
|
-
title: string;
|
|
8
|
-
parentID?: string;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export type { Session };
|
|
1
|
+
import { t as Session } from "./sidecar-DgH_vQ6m.js";
|
|
2
|
+
import { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, RegisterActiveSessionOptions, SessionProjectKey } from "@tangle-network/ui/stores";
|
|
3
|
+
import { AgentBranding, CustomToolRenderer, DisplayVariant, FinalTextPart, GroupedMessage, MessageRun, MessageUser, ReasoningPart, Run, RunStats, SessionMessage, SessionPart, TextPart, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime } from "@tangle-network/ui/types";
|
|
4
|
+
export { type ActiveProjectActivity, type ActiveSessionActivityOptions, type ActiveSessionConnectionOptions, type ActiveSessionConnectionState, type ActiveSessionReconnectState, type ActiveSessionRecord, type ActiveSessionStatus, type ActiveSessionTransportMode, type ActiveSessionsState, type AgentBranding, type CustomToolRenderer, type DisplayVariant, type FinalTextPart, type GroupedMessage, type MessageRun, type MessageUser, type ReasoningPart, type RegisterActiveSessionOptions, type Run, type RunStats, Session, type SessionMessage, type SessionPart, type SessionProjectKey, type TextPart, type ToolCategory, type ToolDisplayMetadata, type ToolPart, type ToolState, type ToolStatus, type ToolTime };
|
package/dist/types.js
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import "./chunk-2BUPSB7O.js";
|