@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.
Files changed (107) hide show
  1. package/README.md +40 -0
  2. package/dist/WorkflowGraph-B-NsdYz_.js +1961 -0
  3. package/dist/assets.d.ts +214 -206
  4. package/dist/assets.js +1057 -908
  5. package/dist/auth-CWe17Hly.js +37 -0
  6. package/dist/auth.d.ts +2 -30
  7. package/dist/auth.js +2 -15
  8. package/dist/chat-BOvFAe6p.js +903 -0
  9. package/dist/chat.d.ts +2 -230
  10. package/dist/chat.js +2 -34
  11. package/dist/connectors.d.ts +52 -49
  12. package/dist/connectors.js +595 -643
  13. package/dist/dashboard-CZ3VgNPR.js +4969 -0
  14. package/dist/dashboard.d.ts +4 -1297
  15. package/dist/dashboard.js +4 -152
  16. package/dist/editor.d.ts +2 -1
  17. package/dist/editor.js +2 -31
  18. package/dist/files.d.ts +2 -6
  19. package/dist/files.js +2 -33
  20. package/dist/globals.css +75 -3
  21. package/dist/hooks.d.ts +146 -148
  22. package/dist/hooks.js +222 -55
  23. package/dist/index-CKRaj1pM.d.ts +776 -0
  24. package/dist/index-CXX5IpH2.d.ts +2 -0
  25. package/dist/index-CesPlOyx.d.ts +367 -0
  26. package/dist/index-DPePq7c8.d.ts +1340 -0
  27. package/dist/index-DiyLLZuJ.d.ts +230 -0
  28. package/dist/index-DvmZLMT1.d.ts +30 -0
  29. package/dist/index-PRM636Ex.d.ts +86 -0
  30. package/dist/index.d.ts +21 -33
  31. package/dist/index.js +21 -701
  32. package/dist/info-panel-C9cqDzOL.js +594 -0
  33. package/dist/integrations.d.ts +133 -141
  34. package/dist/integrations.js +491 -673
  35. package/dist/markdown.d.ts +2 -1
  36. package/dist/markdown.js +2 -13
  37. package/dist/model-I-NIxeM-.js +1250 -0
  38. package/dist/model-brand-B9A4H9pJ.d.ts +98 -0
  39. package/dist/model-brand-hMyDTUqB.js +624 -0
  40. package/dist/motion-DkyBRJb9.js +37 -0
  41. package/dist/openui.d.ts +2 -1
  42. package/dist/openui.js +2 -7
  43. package/dist/pages.d.ts +307 -300
  44. package/dist/pages.js +4404 -4181
  45. package/dist/primitives-Dh1vG6J3.js +113 -0
  46. package/dist/primitives.d.ts +2 -74
  47. package/dist/primitives.js +2 -204
  48. package/dist/provider-logo-DjqmConF.js +311 -0
  49. package/dist/run.d.ts +2 -1
  50. package/dist/run.js +2 -23
  51. package/dist/sdk-hooks.d.ts +3 -4
  52. package/dist/sdk-hooks.js +3 -31
  53. package/dist/sidecar-DgH_vQ6m.d.ts +9 -0
  54. package/dist/stores.d.ts +14 -15
  55. package/dist/stores.js +13 -81
  56. package/dist/styles.css +75 -3
  57. package/dist/template-card-L-4gmjx2.d.ts +90 -0
  58. package/dist/terminal-CN9ZgHRt.js +197 -0
  59. package/dist/terminal.d.ts +60 -60
  60. package/dist/terminal.js +2 -10
  61. package/dist/tokens.css +51 -0
  62. package/dist/types.d.ts +4 -11
  63. package/dist/types.js +0 -1
  64. package/dist/use-pty-session-C8cE0adT.js +669 -0
  65. package/dist/use-sidecar-auth-CCTJcrq7.d.ts +145 -0
  66. package/dist/use-sidecar-auth-DkdcufOz.js +742 -0
  67. package/dist/utils-DzWbktWG.js +2 -0
  68. package/dist/utils.d.ts +2 -1
  69. package/dist/utils.js +2 -37
  70. package/dist/workbench-ztU44Jt2.js +8455 -0
  71. package/dist/workbench.d.ts +2 -310
  72. package/dist/workbench.js +2 -44
  73. package/dist/workflows.d.ts +341 -339
  74. package/dist/workflows.js +74 -109
  75. package/dist/workspace-B6AtI6ld.js +2510 -0
  76. package/dist/workspace.d.ts +2 -761
  77. package/dist/workspace.js +2 -51
  78. package/package.json +46 -40
  79. package/dist/WorkflowGraph-2QOORYIR.js +0 -1722
  80. package/dist/chunk-2BUPSB7O.js +0 -0
  81. package/dist/chunk-3KBNPQQF.js +0 -2697
  82. package/dist/chunk-3LIXVEEE.js +0 -279
  83. package/dist/chunk-72UF2H5H.js +0 -707
  84. package/dist/chunk-AI25G5MX.js +0 -944
  85. package/dist/chunk-ANSC5AFC.js +0 -314
  86. package/dist/chunk-AZ3AWMTM.js +0 -8
  87. package/dist/chunk-BGVEHENC.js +0 -10
  88. package/dist/chunk-CZ7CSFO4.js +0 -39
  89. package/dist/chunk-DYXXYGS4.js +0 -4700
  90. package/dist/chunk-EI44GEQ5.js +0 -6
  91. package/dist/chunk-IACRDXER.js +0 -219
  92. package/dist/chunk-IOB2PW5Z.js +0 -55
  93. package/dist/chunk-M4K7ZGR2.js +0 -24
  94. package/dist/chunk-MYZAW4RX.js +0 -665
  95. package/dist/chunk-OMUIPJQZ.js +0 -555
  96. package/dist/chunk-RQZRXKMR.js +0 -398
  97. package/dist/chunk-SOKKTB7W.js +0 -230
  98. package/dist/chunk-TADGS4Q7.js +0 -1010
  99. package/dist/chunk-UCQNOUN3.js +0 -7964
  100. package/dist/chunk-ULPLRBMF.js +0 -34
  101. package/dist/chunk-WID73FPH.js +0 -89
  102. package/dist/chunk-X3YXP7FG.js +0 -38
  103. package/dist/logo-DiAjq759.d.ts +0 -15
  104. package/dist/model-brand-BNnaUKKZ.d.ts +0 -99
  105. package/dist/ports-list-CDIvTNnX.d.ts +0 -17
  106. package/dist/sdk-hooks-Djkjq4cp.d.ts +0 -145
  107. 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 };
@@ -1,64 +1,64 @@
1
- import * as React from 'react';
2
- import { AgentInteractiveSessionControlClaim } from '@tangle-network/agent-interface';
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
- 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;
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
- /** 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;
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, }: TerminalViewProps): React.JSX.Element;
63
-
64
- export { DEFAULT_TERMINAL_THEME, type TerminalTheme, TerminalView, type TerminalViewProps };
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
- DEFAULT_TERMINAL_THEME,
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
- export { AgentBranding, CustomToolRenderer, DisplayVariant, FinalTextPart, GroupedMessage, MessageRun, MessageUser, ReasoningPart, Run, RunStats, SessionMessage, SessionPart, TextPart, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime } from '@tangle-network/ui/types';
2
- export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, RegisterActiveSessionOptions, SessionProjectKey } from '@tangle-network/ui/stores';
3
-
4
- /** A chat session on the sidecar session gateway. */
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";