@tangle-network/sandbox-ui 0.20.2 → 0.21.0

package/dist/sdk-hooks-jUbIngSV.d.ts

@@ -0,0 +1,96 @@
+import '@tangle-network/ui/sdk-hooks';
+import { SessionMessage, SessionPart } from '@tangle-network/ui/types';
+
+/** Minimal session info returned by the listing API. */
+interface SessionInfo {
+    id: string;
+    title: string;
+    parentID?: string;
+}
+interface UseSessionStreamOptions {
+    /** Base URL of the session proxy (e.g. "http://localhost:9100"). */
+    apiUrl: string;
+    /** Bearer token for authentication. */
+    token: string | null;
+    /** Session ID to stream events for. */
+    sessionId: string;
+    /** Only connect when true. Defaults to true. */
+    enabled?: boolean;
+}
+/**
+ * Per-message overrides forwarded to the sidecar's send-message endpoint.
+ * Every field is optional — omitted fields fall back to the session's
+ * backend configuration. Matches `SendMessageRequestSchema` on the sidecar.
+ */
+interface SendMessageOptions {
+    /** Backend agent identifier override (e.g. a named opencode agent). */
+    agent?: string;
+    /** Per-turn model override; session backend supplies apiKey/baseUrl. */
+    model?: {
+        providerID: string;
+        modelID: string;
+    };
+    /** Per-turn system prompt override. */
+    system?: string;
+    /** Thinking-effort hint; the sidecar maps it to a thinking-token budget. */
+    reasoningEffort?: 'low' | 'medium' | 'high';
+}
+interface UseSessionStreamResult {
+    /** All messages in the session (fetched + streaming). */
+    messages: SessionMessage[];
+    /** Part map: messageId → SessionPart[]. */
+    partMap: Record<string, SessionPart[]>;
+    /** Whether the agent is currently streaming a response. */
+    isStreaming: boolean;
+    /** Send a text message to the agent, with optional per-turn overrides. */
+    send: (text: string, options?: SendMessageOptions) => Promise<void>;
+    /** Abort the current agent execution. */
+    abort: () => Promise<void>;
+    /** Refetch full message history from the API. */
+    refetch: () => Promise<void>;
+    /** Connection or stream error, if any. */
+    error: string | null;
+    /** Whether the SSE connection is active. */
+    connected: boolean;
+}
+/**
+ * Streams chat messages from a sidecar session gateway via SSE.
+ *
+ * Fetches existing message history on mount, then subscribes to SSE for
+ * real-time updates. Maps the sidecar's message format to agent-ui's
+ * SessionMessage + partMap format.
+ */
+declare function useSessionStream({ apiUrl, token, sessionId, enabled, }: UseSessionStreamOptions): UseSessionStreamResult;
+
+interface UseSidecarAuthOptions {
+    /** Scoping key for token storage (e.g. botId, sandboxId). */
+    resourceId: string;
+    /** Base URL of the sidecar or operator API. */
+    apiUrl: string;
+    /**
+     * Sign a plaintext message and return the hex signature.
+     * Consuming apps wire this to their wallet library (e.g. wagmi's signMessageAsync).
+     */
+    signMessage: (message: string) => Promise<string>;
+}
+interface SidecarAuth {
+    token: string | null;
+    isAuthenticated: boolean;
+    isAuthenticating: boolean;
+    authenticate: () => Promise<string | null>;
+    clearCachedToken: () => void;
+    error: string | null;
+}
+/**
+ * Generic sidecar PASETO challenge/response auth.
+ *
+ * Flow:
+ * 1. POST /api/auth/challenge  → { nonce, message, expires_at }
+ * 2. signMessage(message)       → signature (provided by consuming app)
+ * 3. POST /api/auth/session     → { token, address, expires_at }
+ *
+ * Tokens are cached in localStorage and auto-refreshed 5 minutes before expiry.
+ */
+declare function useSidecarAuth({ resourceId, apiUrl, signMessage }: UseSidecarAuthOptions): SidecarAuth;
+
+export { type SessionInfo as S, type UseSessionStreamOptions as U, type SidecarAuth as a, type UseSessionStreamResult as b, type UseSidecarAuthOptions as c, useSidecarAuth as d, type SendMessageOptions as e, useSessionStream as u };

package/dist/sdk-hooks.d.ts

@@ -1,78 +1,3 @@
 export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, ConnectionState, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, TaskStreamEvent, TerminalStreamEvent, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, useAutoScroll, useDropdownMenu, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream } from '@tangle-network/ui/sdk-hooks';
-import { SessionMessage, SessionPart } from '@tangle-network/ui/types';
-
-/** Minimal session info returned by the listing API. */
-interface SessionInfo {
-    id: string;
-    title: string;
-    parentID?: string;
-}
-interface UseSessionStreamOptions {
-    /** Base URL of the session proxy (e.g. "http://localhost:9100"). */
-    apiUrl: string;
-    /** Bearer token for authentication. */
-    token: string | null;
-    /** Session ID to stream events for. */
-    sessionId: string;
-    /** Only connect when true. Defaults to true. */
-    enabled?: boolean;
-}
-interface UseSessionStreamResult {
-    /** All messages in the session (fetched + streaming). */
-    messages: SessionMessage[];
-    /** Part map: messageId → SessionPart[]. */
-    partMap: Record<string, SessionPart[]>;
-    /** Whether the agent is currently streaming a response. */
-    isStreaming: boolean;
-    /** Send a text message to the agent. */
-    send: (text: string) => Promise<void>;
-    /** Abort the current agent execution. */
-    abort: () => Promise<void>;
-    /** Refetch full message history from the API. */
-    refetch: () => Promise<void>;
-    /** Connection or stream error, if any. */
-    error: string | null;
-    /** Whether the SSE connection is active. */
-    connected: boolean;
-}
-/**
- * Streams chat messages from a sidecar session gateway via SSE.
- *
- * Fetches existing message history on mount, then subscribes to SSE for
- * real-time updates. Maps the sidecar's message format to agent-ui's
- * SessionMessage + partMap format.
- */
-declare function useSessionStream({ apiUrl, token, sessionId, enabled, }: UseSessionStreamOptions): UseSessionStreamResult;
-
-interface UseSidecarAuthOptions {
-    /** Scoping key for token storage (e.g. botId, sandboxId). */
-    resourceId: string;
-    /** Base URL of the sidecar or operator API. */
-    apiUrl: string;
-    /**
-     * Sign a plaintext message and return the hex signature.
-     * Consuming apps wire this to their wallet library (e.g. wagmi's signMessageAsync).
-     */
-    signMessage: (message: string) => Promise<string>;
-}
-interface SidecarAuth {
-    token: string | null;
-    isAuthenticated: boolean;
-    isAuthenticating: boolean;
-    authenticate: () => Promise<string | null>;
-    clearCachedToken: () => void;
-    error: string | null;
-}
-/**
- * Generic sidecar PASETO challenge/response auth.
- *
- * Flow:
- * 1. POST /api/auth/challenge  → { nonce, message, expires_at }
- * 2. signMessage(message)       → signature (provided by consuming app)
- * 3. POST /api/auth/session     → { token, address, expires_at }
- *
- * Tokens are cached in localStorage and auto-refreshed 5 minutes before expiry.
- */
-declare function useSidecarAuth({ resourceId, apiUrl, signMessage }: UseSidecarAuthOptions): SidecarAuth;
-
-export { type SessionInfo, type SidecarAuth, type UseSessionStreamOptions, type UseSessionStreamResult, type UseSidecarAuthOptions, useSessionStream, useSidecarAuth };
+export { S as SessionInfo, a as SidecarAuth, U as UseSessionStreamOptions, b as UseSessionStreamResult, c as UseSidecarAuthOptions, u as useSessionStream, d as useSidecarAuth } from './sdk-hooks-jUbIngSV.js';
+import '@tangle-network/ui/types';

package/dist/sdk-hooks.js

@@ -1,7 +1,7 @@
 import {
   useSessionStream,
   useSidecarAuth
-} from "./chunk-CMY7W45U.js";
+} from "./chunk-MEDE37J5.js";
 
 // src/sdk-hooks.ts
 import {

package/dist/styles.css

@@ -668,9 +668,6 @@
   .h-28 {
     height: calc(var(--spacing) * 28);
   }
-  .h-32 {
-    height: calc(var(--spacing) * 32);
-  }
   .h-48 {
     height: calc(var(--spacing) * 48);
   }
@@ -2758,9 +2755,6 @@
   .underline {
     text-decoration-line: underline;
   }
-  .underline-offset-2 {
-    text-underline-offset: 2px;
-  }
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
@@ -3503,11 +3497,6 @@
       color: var(--color-red-400);
     }
   }
-  .focus\:underline {
-    &:focus {
-      text-decoration-line: underline;
-    }
-  }
   .focus\:ring-0 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);

package/dist/template-card-UhV3pmRC.d.ts

@@ -0,0 +1,88 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+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): react_jsx_runtime.JSX.Element;
+
+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): react_jsx_runtime.JSX.Element;
+
+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_jsx_runtime.JSX.Element;
+
+interface TemplateCardData {
+    id: string;
+    name: string;
+    description: string;
+    icon?: React.ReactNode;
+    tags?: string[];
+}
+interface TemplateCardProps {
+    template: TemplateCardData;
+    onUseTemplate: (templateId: string) => void;
+    className?: string;
+}
+declare function TemplateCard({ template, onUseTemplate, className }: TemplateCardProps): react_jsx_runtime.JSX.Element;
+
+export { type BillingBalance as B, PricingPage as P, TemplateCard as T, UsageChart as U, BillingDashboard as a, type BillingDashboardProps as b, type BillingSubscription as c, type BillingUsage as d, type PricingPageProps as e, type PricingTier as f, type TemplateCardData as g, type TemplateCardProps as h, type UsageChartProps as i, type UsageDataPoint as j, formatPrice as k };

package/dist/workspace.d.ts

@@ -275,6 +275,13 @@ interface SandboxWorkbenchSessionProps extends Omit<ChatContainerProps, "classNa
     subtitle?: ReactNode;
     meta?: ReactNode;
     headerActions?: ReactNode;
+    /**
+     * Controls rendered as a strip attached beneath the chat composer —
+     * harness/model/effort pickers, token meters, etc. Use
+     * `AgentSessionControls` from `@tangle-network/sandbox-ui/chat` for the
+     * standard set.
+     */
+    composerControls?: ReactNode;
     renderRunActions?: ChatContainerProps["renderRunActions"];
     renderUserMessageActions?: ChatContainerProps["renderUserMessageActions"];
     renderToolActions?: ChatContainerProps["renderToolActions"];

package/dist/workspace.js

@@ -14,7 +14,7 @@ import {
   TaskBoard,
   TerminalPanel,
   WorkspaceLayout
-} from "./chunk-CP2L6B53.js";
+} from "./chunk-R6NONXFC.js";
 import "./chunk-EI44GEQ5.js";
 export {
   AgentWorkbench,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.20.2",
+  "version": "0.21.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -176,23 +176,23 @@
     "@xterm/xterm": "^6.0.0",
     "jsdom": "^29.0.2",
     "marked": "^17.0.5",
+    "postcss": "^8.5.8",
+    "postcss-import": "^16.1.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-markdown": "^10.1.0",
     "react-pdf": "^9.2.1",
     "react-syntax-highlighter": "^16.1.1",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
-    "turndown": "^7.2.2",
-    "yjs": "^13.6.30",
-    "postcss": "^8.5.8",
-    "postcss-import": "^16.1.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
     "storybook": "^8.6.18",
     "tailwindcss": "^4.1.4",
     "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.4.0",
+    "turndown": "^7.2.2",
     "typescript": "^5.8.3",
     "vite": "^8.0.5",
-    "vitest": "^4.1.3"
+    "vitest": "^4.1.3",
+    "yjs": "^13.6.30"
   }
 }