@tangle-network/sandbox-ui 0.113.6 → 0.114.0

package/dist/template-card-L-4gmjx2.d.ts

@@ -0,0 +1,90 @@
+import * as React$1 from "react";
+//#region src/dashboard/billing-dashboard.d.ts
+interface BillingSubscription {
+  status: string;
+  tierName: string;
+  renewsAt: string;
+}
+interface BillingBalance {
+  available: number;
+  used: number;
+}
+interface BillingUsage {
+  period: string;
+  total: number;
+  byModel: Record<string, number>;
+}
+interface BillingDashboardProps {
+  subscription: BillingSubscription | null;
+  balance: BillingBalance;
+  usage: BillingUsage;
+  onManageSubscription: () => void;
+  onAddCredits: () => void;
+  variant?: "sandbox";
+  className?: string;
+  cardClassName?: string;
+}
+declare function BillingDashboard({ subscription, balance, usage, onManageSubscription, onAddCredits, variant, className, cardClassName }: BillingDashboardProps): import("react").JSX.Element;
+//#endregion
+//#region src/dashboard/pricing-page.d.ts
+interface PricingTier {
+  id: string;
+  name: string;
+  description: string;
+  monthlyPriceCents: number;
+  yearlyPriceCents?: number;
+  features: string[];
+  recommended?: boolean;
+  creditsPerMonth?: number;
+  monthlyPriceId?: string;
+  yearlyPriceId?: string;
+}
+interface PricingPageProps {
+  tiers: PricingTier[];
+  currentTierId?: string;
+  billingPeriod: "monthly" | "yearly";
+  onBillingPeriodChange: (period: "monthly" | "yearly") => void;
+  onSelectTier: (tierId: string) => void;
+  variant?: "sandbox";
+  loading?: boolean;
+  className?: string;
+  cardClassName?: string;
+}
+/**
+ * Formats an integer cent amount as a human-readable USD price.
+ * Whole-dollar amounts omit decimals ($10), fractional amounts show two ($10.99).
+ * Returns "$0" for non-finite or negative inputs.
+ * @param cents - Amount in whole US cents (e.g. 1099 for $10.99).
+ */
+declare function formatPrice(cents: number): string;
+declare function PricingPage({ tiers, currentTierId, billingPeriod, onBillingPeriodChange, onSelectTier, loading, className }: PricingPageProps): import("react").JSX.Element;
+//#endregion
+//#region src/dashboard/usage-chart.d.ts
+interface UsageDataPoint {
+  date: string;
+  value: number;
+}
+interface UsageChartProps {
+  data: UsageDataPoint[];
+  title: string;
+  unit: string;
+  className?: string;
+}
+declare function UsageChart({ data, title, unit, className }: UsageChartProps): React$1.JSX.Element;
+//#endregion
+//#region src/dashboard/template-card.d.ts
+interface TemplateCardData {
+  id: string;
+  name: string;
+  description: string;
+  icon?: React$1.ReactNode;
+  tags?: string[];
+}
+interface TemplateCardProps {
+  template: TemplateCardData;
+  onUseTemplate: (templateId: string) => void;
+  className?: string;
+}
+declare function TemplateCard({ template, onUseTemplate, className }: TemplateCardProps): React$1.JSX.Element;
+//#endregion
+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 };

package/dist/terminal-CN9ZgHRt.js

@@ -0,0 +1,197 @@
+import { t as usePtySession } from "./use-pty-session-C8cE0adT.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import "@xterm/xterm/css/xterm.css";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+import { WebLinksAddon } from "@xterm/addon-web-links";
+//#region src/terminal/terminal-view.tsx
+const DEFAULT_TERMINAL_THEME = {
+	background: "#0c0c0e",
+	foreground: "#d4d4d8",
+	cursor: "#34d399",
+	cursorAccent: "#0c0c0e",
+	selectionBackground: "#7c3aed33",
+	selectionForeground: "#d4d4d8",
+	black: "#18181b",
+	red: "#ef4444",
+	green: "#34d399",
+	yellow: "#fbbf24",
+	blue: "#60a5fa",
+	magenta: "#a78bfa",
+	cyan: "#22d3ee",
+	white: "#d4d4d8",
+	brightBlack: "#52525b",
+	brightRed: "#f87171",
+	brightGreen: "#6ee7b7",
+	brightYellow: "#fde68a",
+	brightBlue: "#93c5fd",
+	brightMagenta: "#c4b5fd",
+	brightCyan: "#67e8f9",
+	brightWhite: "#fafafa"
+};
+function TerminalView({ apiUrl, token, theme, title = "Terminal", subtitle = "Connected to PTY session", isActive = true, connectionId, incarnationId, control, fontSize = 13 }) {
+	const resolvedTheme = useMemo(() => ({
+		...DEFAULT_TERMINAL_THEME,
+		...theme
+	}), [theme]);
+	const resolvedFontSize = Number.isFinite(fontSize) && fontSize > 0 ? fontSize : 13;
+	const fontSizeRef = useRef(resolvedFontSize);
+	fontSizeRef.current = resolvedFontSize;
+	const containerRef = useRef(null);
+	const termRef = useRef(null);
+	const fitAddonRef = useRef(null);
+	const pendingWritesRef = useRef([]);
+	const writeRafRef = useRef(null);
+	const onData = useCallback((data) => {
+		if (!data) return;
+		pendingWritesRef.current.push(data);
+		if (writeRafRef.current !== null) return;
+		writeRafRef.current = requestAnimationFrame(() => {
+			writeRafRef.current = null;
+			const chunks = pendingWritesRef.current;
+			if (chunks.length === 0) return;
+			pendingWritesRef.current = [];
+			termRef.current?.write(chunks.length === 1 ? chunks[0] : chunks.join(""));
+		});
+	}, []);
+	const { isConnected, error, sendCommand, resizeTerminal, reconnect } = usePtySession({
+		apiUrl,
+		token,
+		onData,
+		connectionId,
+		incarnationId,
+		control
+	});
+	useEffect(() => {
+		if (!containerRef.current) return;
+		const term = new Terminal({
+			theme: resolvedTheme,
+			fontFamily: "\"JetBrains Mono\", \"Fira Code\", \"Cascadia Code\", Menlo, monospace",
+			fontSize: fontSizeRef.current,
+			lineHeight: 1.4,
+			cursorBlink: true,
+			cursorStyle: "bar",
+			scrollback: 5e3,
+			convertEol: true,
+			allowProposedApi: true
+		});
+		const fitAddon = new FitAddon();
+		const webLinksAddon = new WebLinksAddon();
+		term.loadAddon(fitAddon);
+		term.loadAddon(webLinksAddon);
+		term.open(containerRef.current);
+		let webglAddon = null;
+		let webglCancelled = false;
+		(async () => {
+			try {
+				const mod = await import("@xterm/addon-webgl");
+				if (webglCancelled) return;
+				try {
+					const addon = new mod.WebglAddon();
+					addon.onContextLoss(() => {
+						webglAddon?.dispose();
+						webglAddon = null;
+					});
+					webglAddon = addon;
+					term.loadAddon(addon);
+				} catch {}
+			} catch {}
+		})();
+		requestAnimationFrame(() => {
+			fitAddon.fit();
+		});
+		termRef.current = term;
+		fitAddonRef.current = fitAddon;
+		term.onData((data) => {
+			if (data === "\f") {
+				termRef.current?.clear();
+				sendCommand("\r").catch(console.error);
+				return;
+			}
+			sendCommand(data).catch((err) => {
+				termRef.current?.writeln(`\r\n\x1b[31m${err instanceof Error ? err.message : "Send failed"}\x1b[0m`);
+			});
+		});
+		term.onResize(({ cols, rows }) => {
+			resizeTerminal(cols, rows).catch(console.error);
+		});
+		const ro = new ResizeObserver(() => {
+			requestAnimationFrame(() => {
+				fitAddon.fit();
+			});
+		});
+		ro.observe(containerRef.current);
+		return () => {
+			webglCancelled = true;
+			ro.disconnect();
+			if (writeRafRef.current !== null) {
+				cancelAnimationFrame(writeRafRef.current);
+				writeRafRef.current = null;
+			}
+			pendingWritesRef.current = [];
+			webglAddon?.dispose();
+			term.dispose();
+			termRef.current = null;
+			fitAddonRef.current = null;
+		};
+	}, [
+		sendCommand,
+		resizeTerminal,
+		title,
+		subtitle
+	]);
+	useEffect(() => {
+		if (termRef.current) termRef.current.options.theme = resolvedTheme;
+	}, [resolvedTheme]);
+	useEffect(() => {
+		const term = termRef.current;
+		if (!term || term.options.fontSize === resolvedFontSize) return;
+		term.options.fontSize = resolvedFontSize;
+		const rafId = requestAnimationFrame(() => fitAddonRef.current?.fit());
+		return () => cancelAnimationFrame(rafId);
+	}, [resolvedFontSize]);
+	useEffect(() => {
+		if (isConnected && termRef.current) {
+			resizeTerminal(termRef.current.cols, termRef.current.rows).catch(console.error);
+			if (isActive) termRef.current.focus();
+		}
+	}, [
+		isConnected,
+		resizeTerminal,
+		isActive
+	]);
+	useEffect(() => {
+		if (isActive && termRef.current && fitAddonRef.current) setTimeout(() => {
+			fitAddonRef.current?.fit();
+			termRef.current?.focus();
+		}, 50);
+	}, [isActive]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative h-full w-full group cursor-text",
+		onClick: () => termRef.current?.focus(),
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			className: "h-full w-full overflow-hidden relative z-0",
+			style: { backgroundColor: resolvedTheme.background }
+		}), (!isConnected || error) && /* @__PURE__ */ jsx("div", {
+			className: "absolute inset-0 flex items-center justify-center bg-surface-container-lowest",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "text-center",
+				children: error ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+					className: "text-sm text-[var(--surface-danger-text)] mb-3",
+					children: error
+				}), /* @__PURE__ */ jsx("button", {
+					onClick: reconnect,
+					className: "text-sm text-[var(--surface-success-text)] hover:opacity-80 underline cursor-pointer",
+					children: "Retry connection"
+				})] }) : /* @__PURE__ */ jsx("p", {
+					className: "text-[13px] text-muted-foreground",
+					children: "Connecting to terminal..."
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { TerminalView as n, DEFAULT_TERMINAL_THEME as t };

package/dist/terminal.d.ts

@@ -1,64 +1,64 @@
-import * as React from 'react';
-import { AgentInteractiveSessionControlClaim } from '@tangle-network/agent-interface';
-
+import "@xterm/xterm/css/xterm.css";
+import { AgentInteractiveSessionControlClaim } from "@tangle-network/agent-interface";
+//#region src/terminal/terminal-view.d.ts
 interface TerminalTheme {
-    background: string;
-    foreground: string;
-    cursor: string;
-    cursorAccent: string;
-    selectionBackground: string;
-    selectionForeground: string;
-    black: string;
-    red: string;
-    green: string;
-    yellow: string;
-    blue: string;
-    magenta: string;
-    cyan: string;
-    white: string;
-    brightBlack: string;
-    brightRed: string;
-    brightGreen: string;
-    brightYellow: string;
-    brightBlue: string;
-    brightMagenta: string;
-    brightCyan: string;
-    brightWhite: string;
+  background: string;
+  foreground: string;
+  cursor: string;
+  cursorAccent: string;
+  selectionBackground: string;
+  selectionForeground: string;
+  black: string;
+  red: string;
+  green: string;
+  yellow: string;
+  blue: string;
+  magenta: string;
+  cyan: string;
+  white: string;
+  brightBlack: string;
+  brightRed: string;
+  brightGreen: string;
+  brightYellow: string;
+  brightBlue: string;
+  brightMagenta: string;
+  brightCyan: string;
+  brightWhite: string;
 }
 interface TerminalViewProps {
-    /** Base URL of the sidecar. */
-    apiUrl: string;
-    /** Bearer token for authentication. */
-    token: string;
-    /** xterm color theme override. */
-    theme?: Partial<TerminalTheme>;
-    /** Title shown in the welcome box. Default: "Terminal". */
-    title?: string;
-    /** Subtitle shown in the welcome box. Default: "Connected to PTY session". */
-    subtitle?: string;
-    /** @deprecated No longer used — the PTY provides its own prompt. */
-    prompt?: string;
-    /**
-     * Monospace font size in CSS pixels. Default 13. Changing it updates
-     * the live terminal and refits so xterm recomputes cols/rows from the
-     * new measured cell size instead of re-creating the terminal (which
-     * would drop scrollback).
-     */
-    fontSize?: number;
-    /** Whether the terminal tab is currently active and visible. */
-    isActive?: boolean;
-    /**
-     * Stable id reused across remounts so the sidecar restores the same
-     * PTY session instead of spawning a fresh shell. Omit for a new
-     * session per mount.
-     */
-    connectionId?: string;
-    /** Exact incarnation issued for an interactive agent session. */
-    incarnationId?: string;
-    /** Write claim for the exact interactive agent session. */
-    control?: AgentInteractiveSessionControlClaim;
+  /** Base URL of the sidecar. */
+  apiUrl: string;
+  /** Bearer token for authentication. */
+  token: string;
+  /** xterm color theme override. */
+  theme?: Partial<TerminalTheme>;
+  /** Title shown in the welcome box. Default: "Terminal". */
+  title?: string;
+  /** Subtitle shown in the welcome box. Default: "Connected to PTY session". */
+  subtitle?: string;
+  /** @deprecated No longer used — the PTY provides its own prompt. */
+  prompt?: string;
+  /**
+   * Monospace font size in CSS pixels. Default 13. Changing it updates
+   * the live terminal and refits so xterm recomputes cols/rows from the
+   * new measured cell size instead of re-creating the terminal (which
+   * would drop scrollback).
+   */
+  fontSize?: number;
+  /** Whether the terminal tab is currently active and visible. */
+  isActive?: boolean;
+  /**
+   * Stable id reused across remounts so the sidecar restores the same
+   * PTY session instead of spawning a fresh shell. Omit for a new
+   * session per mount.
+   */
+  connectionId?: string;
+  /** Exact incarnation issued for an interactive agent session. */
+  incarnationId?: string;
+  /** Write claim for the exact interactive agent session. */
+  control?: AgentInteractiveSessionControlClaim;
 }
-declare const DEFAULT_TERMINAL_THEME: TerminalTheme;
-declare function TerminalView({ apiUrl, token, theme, title, subtitle, isActive, connectionId, incarnationId, control, fontSize, }: TerminalViewProps): React.JSX.Element;
-
-export { DEFAULT_TERMINAL_THEME, type TerminalTheme, TerminalView, type TerminalViewProps };
+export declare const DEFAULT_TERMINAL_THEME: TerminalTheme;
+declare function TerminalView({ apiUrl, token, theme, title, subtitle, isActive, connectionId, incarnationId, control, fontSize }: TerminalViewProps): import("react").JSX.Element;
+//#endregion
+export { type TerminalTheme, TerminalView, type TerminalViewProps };

package/dist/terminal.js

@@ -1,10 +1,2 @@
-import {
-  DEFAULT_TERMINAL_THEME,
-  TerminalView
-} from "./chunk-IACRDXER.js";
-import "./chunk-MYZAW4RX.js";
-import "./chunk-CZ7CSFO4.js";
-export {
-  DEFAULT_TERMINAL_THEME,
-  TerminalView
-};
+import { n as TerminalView, t as DEFAULT_TERMINAL_THEME } from "./terminal-CN9ZgHRt.js";
+export { DEFAULT_TERMINAL_THEME, TerminalView };

package/dist/tokens.css

@@ -718,3 +718,54 @@
    * paper, lighter on a dark card, never tinted. */
   --border-strong: color-mix(in srgb, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 20%);
 }
+
+/* Chart marks — the palette behind @tangle-network/charts.
+ *
+ * One accent marks the measure a reader decides on (a rate bar, a frontier
+ * point, a solved attempt). One muted grey marks everything secondary. An
+ * ordinal indigo ramp marks App Grade tiers C < B < A < S; F has no fill and
+ * draws as a --chart-muted outline, the same mark as an unsolved attempt. No
+ * categorical palette ships: identity is carried by direct labels.
+ *
+ * Contrast against the dark canvas (#151523) and white paper, checked with the
+ * dataviz palette validator and WCAG ratios:
+ *   ink 14.45 / 13.70, ink-muted 7.34 / 5.56, accent 6.05 / 7.41,
+ *   muted 5.54 / 4.41, grid 1.46 / 1.12 (recessive by design).
+ * Tiers pass the ordinal checks in both modes: one hue, monotone lightness,
+ * visible steps. They are iris ladder steps (ladders.css) except #8b87f0 dark
+ * and #7c7fe3 light, which sit between two steps to keep the gaps even.
+ *
+ * The aliases re-resolve on every theme scope, as the focus rule above does,
+ * so a named theme's ink and hairlines carry into its charts. */
+:root,
+.dark,
+.light,
+[data-sandbox-ui],
+[data-sandbox-theme],
+[data-theme] {
+  --chart-ink: var(--text-primary);
+  --chart-ink-muted: var(--text-dim);
+  --chart-muted: var(--md3-outline);
+  --chart-grid: var(--md3-surface-container-high);
+  --chart-rule: var(--md3-outline-variant);
+  --chart-shade: var(--bg-hover);
+  --chart-accent: var(--brand-cool);
+  --chart-tier-c: #4a4a95;
+  --chart-tier-b: #5b5bd6;
+  --chart-tier-a: #8b87f0;
+  --chart-tier-s: #b1a9ff;
+}
+
+/* Light: the accent is the indigo fill (#4c3fc6, 7.41:1 on white) and the tier
+ * ramp runs light to dark. `[data-theme$="-light"]` covers the named light
+ * themes, which would otherwise inherit the dark ramp from :root. */
+[data-sandbox-theme="vault"],
+[data-theme="light"],
+.light,
+[data-theme$="-light"] {
+  --chart-accent: hsl(var(--hsl-primary));
+  --chart-tier-c: #9b9ef0;
+  --chart-tier-b: #7c7fe3;
+  --chart-tier-a: #5b5bd6;
+  --chart-tier-s: #272962;
+}

package/dist/types.d.ts

@@ -1,11 +1,4 @@
-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';
-export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, RegisterActiveSessionOptions, SessionProjectKey } from '@tangle-network/ui/stores';
-
-/** A chat session on the sidecar session gateway. */
-interface Session {
-    id: string;
-    title: string;
-    parentID?: string;
-}
-
-export type { Session };
+import { t as Session } from "./sidecar-DgH_vQ6m.js";
+import { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, RegisterActiveSessionOptions, SessionProjectKey } from "@tangle-network/ui/stores";
+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";
+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

@@ -1 +0,0 @@
-import "./chunk-2BUPSB7O.js";