@tangle-network/sandbox-ui 0.2.2 → 0.3.4

package/dist/{expanded-tool-detail-OkXGqTHe.d.ts → expanded-tool-detail-BDi_h_dZ.d.ts}

@@ -3,7 +3,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { R as Run } from './run-CtFZ6s-D.js';
 import { a as SessionPart, b as ToolPart, R as ReasoningPart } from './parts-CyGkM6Fp.js';
 import { A as AgentBranding } from './branding-DCi5VEik.js';
-import { C as CustomToolRenderer } from './tool-display-BvsVW_Ur.js';
+import { C as CustomToolRenderer } from './tool-display-Ct9nFAzJ.js';
 
 interface RunGroupProps {
     run: Run;
@@ -17,27 +17,34 @@ interface RunGroupProps {
  * Collapsible container for a consecutive group of assistant messages (a "run").
  * Shows a summary header with stats and renders tool/thinking/text parts.
  */
-declare const RunGroup: React.MemoExoticComponent<({ run, partMap, collapsed, onToggle, branding, renderToolDetail, }: RunGroupProps) => react_jsx_runtime.JSX.Element>;
+declare const RunGroup: React.MemoExoticComponent<({ run, partMap, collapsed, onToggle, branding, renderToolDetail, }: RunGroupProps) => react_jsx_runtime.JSX.Element | null>;
 
 interface InlineToolItemProps {
     part: ToolPart;
     renderToolDetail?: CustomToolRenderer;
+    groupPosition?: "single" | "first" | "middle" | "last";
+    className?: string;
+    contentClassName?: string;
 }
 /**
  * Compact single-line tool call display (32px height).
  * Shows icon, title, description, duration, and status indicator.
  * Expands on click to show ExpandedToolDetail.
  */
-declare const InlineToolItem: React.MemoExoticComponent<({ part, renderToolDetail }: InlineToolItemProps) => react_jsx_runtime.JSX.Element>;
+declare const InlineToolItem: React.MemoExoticComponent<({ part, renderToolDetail, groupPosition, className, contentClassName, }: InlineToolItemProps) => react_jsx_runtime.JSX.Element>;
 
 interface InlineThinkingItemProps {
     part: ReasoningPart;
+    defaultOpen?: boolean;
+    autoCollapse?: boolean;
+    className?: string;
+    contentClassName?: string;
 }
 /**
  * Minimal collapsible display for thinking/reasoning parts.
  * Shows "Thinking..." with optional preview text and duration.
  */
-declare const InlineThinkingItem: React.MemoExoticComponent<({ part }: InlineThinkingItemProps) => react_jsx_runtime.JSX.Element>;
+declare const InlineThinkingItem: React.MemoExoticComponent<({ part, defaultOpen, autoCollapse, className, contentClassName, }: InlineThinkingItemProps) => react_jsx_runtime.JSX.Element>;
 
 interface ExpandedToolDetailProps {
     part: ToolPart;

package/dist/file-tabs-CmaoDVBI.d.ts

@@ -0,0 +1,72 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface ArtifactPaneProps {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    meta?: ReactNode;
+    headerActions?: ReactNode;
+    tabs?: ReactNode;
+    toolbar?: ReactNode;
+    footer?: ReactNode;
+    emptyState?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    contentClassName?: string;
+}
+/**
+ * ArtifactPane — shared frame for files, previews, documents, inspectors, and
+ * other artifact-like surfaces inside sandbox applications.
+ */
+declare function ArtifactPane({ eyebrow, title, subtitle, meta, headerActions, tabs, toolbar, footer, emptyState, children, className, contentClassName, }: ArtifactPaneProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * FileTree — directory browser with file type icons.
+ *
+ * Renders a hierarchical file system view. Clicking a file
+ * triggers onSelect with the full path.
+ */
+interface FileNode {
+    name: string;
+    path: string;
+    type: "file" | "directory";
+    children?: FileNode[];
+    size?: number;
+    mimeType?: string;
+}
+interface FileTreeProps {
+    root: FileNode;
+    selectedPath?: string;
+    onSelect?: (path: string, node: FileNode) => void;
+    className?: string;
+    defaultExpanded?: boolean;
+    visibility?: FileTreeVisibilityOptions;
+}
+interface FileTreeVisibilityOptions {
+    hiddenPaths?: string[];
+    hiddenPathPrefixes?: string[];
+    isVisible?: (node: FileNode) => boolean;
+}
+declare function filterFileTree(root: FileNode, visibility?: FileTreeVisibilityOptions): FileNode | null;
+declare function FileTree({ root, selectedPath, onSelect, className, defaultExpanded, visibility, }: FileTreeProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * FileTabs — tab bar for open files in the preview panel.
+ */
+interface FileTabData {
+    id: string;
+    name: string;
+    path: string;
+    dirty?: boolean;
+}
+interface FileTabsProps {
+    tabs: FileTabData[];
+    activeId?: string;
+    onSelect: (id: string) => void;
+    onClose: (id: string) => void;
+    className?: string;
+}
+declare function FileTabs({ tabs, activeId, onSelect, onClose, className }: FileTabsProps): react_jsx_runtime.JSX.Element | null;
+
+export { ArtifactPane as A, type FileNode as F, type ArtifactPaneProps as a, type FileTabData as b, FileTabs as c, type FileTabsProps as d, FileTree as e, type FileTreeProps as f, type FileTreeVisibilityOptions as g, filterFileTree as h };

package/dist/files.d.ts

@@ -1,38 +1,18 @@
+import { b as FileTabData, a as ArtifactPaneProps } from './file-tabs-CmaoDVBI.js';
+export { F as FileNode, c as FileTabs, d as FileTabsProps, e as FileTree, f as FileTreeProps, g as FileTreeVisibilityOptions, h as filterFileTree } from './file-tabs-CmaoDVBI.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-
-/**
- * FileTree — directory browser with file type icons.
- *
- * Renders a hierarchical file system view. Clicking a file
- * triggers onSelect with the full path.
- */
-interface FileNode {
-    name: string;
-    path: string;
-    type: "file" | "directory";
-    children?: FileNode[];
-    size?: number;
-    mimeType?: string;
-}
-interface FileTreeProps {
-    root: FileNode;
-    selectedPath?: string;
-    onSelect?: (path: string, node: FileNode) => void;
-    className?: string;
-    defaultExpanded?: boolean;
-}
-declare function FileTree({ root, selectedPath, onSelect, className, defaultExpanded }: FileTreeProps): react_jsx_runtime.JSX.Element;
+import 'react';
 
 /**
  * FilePreview — universal file renderer.
  *
  * Renders any file type beautifully:
- * - PDF: react-pdf paginated viewer
- * - CSV/XLSX: sortable table
- * - Code (py/json/yaml/ts/js): syntax highlighted
+ * - PDF: embedded viewer
+ * - CSV/XLSX: tabular preview
+ * - Code (py/json/yaml/ts/js): line-numbered viewer
  * - Markdown: rendered prose
  * - Images: inline display
- * - Text: monospace pre
+ * - Text: monospace preview
  */
 interface FilePreviewProps {
     filename: string;
@@ -41,26 +21,27 @@ interface FilePreviewProps {
     mimeType?: string;
     onClose?: () => void;
     onDownload?: () => void;
+    hideHeader?: boolean;
     className?: string;
 }
-declare function FilePreview({ filename, content, blobUrl, mimeType, onClose, onDownload, className, }: FilePreviewProps): react_jsx_runtime.JSX.Element;
+declare function FilePreview({ filename, content, blobUrl, mimeType, onClose, onDownload, hideHeader, className, }: FilePreviewProps): react_jsx_runtime.JSX.Element;
 
-/**
- * FileTabs — tab bar for open files in the preview panel.
- */
-interface FileTabData {
-    id: string;
-    name: string;
-    path: string;
-    dirty?: boolean;
-}
-interface FileTabsProps {
-    tabs: FileTabData[];
-    activeId?: string;
-    onSelect: (id: string) => void;
-    onClose: (id: string) => void;
+interface FileArtifactPaneProps extends Omit<FilePreviewProps, "className"> {
+    path?: string;
+    tabs?: FileTabData[];
+    activeTabId?: string;
+    onTabSelect?: (id: string) => void;
+    onTabClose?: (id: string) => void;
+    eyebrow?: ArtifactPaneProps["eyebrow"];
+    meta?: ArtifactPaneProps["meta"];
+    toolbar?: ArtifactPaneProps["toolbar"];
+    footer?: ArtifactPaneProps["footer"];
     className?: string;
 }
-declare function FileTabs({ tabs, activeId, onSelect, onClose, className }: FileTabsProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * FileArtifactPane — opinionated artifact frame for file previews with tabs and
+ * header actions.
+ */
+declare function FileArtifactPane({ filename, content, blobUrl, mimeType, onClose, onDownload, path, tabs, activeTabId, onTabSelect, onTabClose, eyebrow, meta, toolbar, footer, className, }: FileArtifactPaneProps): react_jsx_runtime.JSX.Element;
 
-export { type FileNode, FilePreview, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps };
+export { FileArtifactPane, type FileArtifactPaneProps, FilePreview, type FilePreviewProps, FileTabData };

package/dist/files.js

@@ -1,11 +1,16 @@
 import {
+  FileArtifactPane,
   FilePreview,
   FileTabs,
-  FileTree
-} from "./chunk-L6ZDH5F4.js";
+  FileTree,
+  filterFileTree
+} from "./chunk-JF6E2DS5.js";
+import "./chunk-LTFK464G.js";
 import "./chunk-RQHJBTEU.js";
 export {
+  FileArtifactPane,
   FilePreview,
   FileTabs,
-  FileTree
+  FileTree,
+  filterFileTree
 };

package/{src/styles → dist}/globals.css

@@ -1,77 +1,24 @@
+@import "./tokens.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
   :root {
-    --background: 0 0% 98%;
-    --foreground: 0 0% 9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 9%;
-    --primary: 270 80% 55%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 0 0% 94%;
-    --secondary-foreground: 0 0% 20%;
-    --muted: 0 0% 94%;
-    --muted-foreground: 0 0% 40%;
-    --accent: 0 0% 94%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 0 0% 88%;
-    --input: 0 0% 88%;
-    --ring: 270 80% 55%;
-    --radius: 0.625rem;
-
-    /* Product accent colors -- Tangle purple */
-    --sandbox: 270 80% 55%;
-    --sandbox-glow: 270 75% 58%;
-
-    /* Status colors */
-    --success: 142 71% 40%;
-    --warning: 38 92% 45%;
-    --error: 0 84% 55%;
-    --info: 217 91% 55%;
-  }
-
-  .dark {
-    --background: 0 0% 5%;
-    --foreground: 0 0% 96%;
-    --card: 0 0% 8%;
-    --card-foreground: 0 0% 96%;
-    --popover: 0 0% 8%;
-    --popover-foreground: 0 0% 96%;
-    --primary: 0 0% 96%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14%;
-    --secondary-foreground: 0 0% 96%;
-    --muted: 0 0% 14%;
-    --muted-foreground: 0 0% 72%;
-    --accent: 0 0% 16%;
-    --accent-foreground: 0 0% 96%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 96%;
-    --border: 0 0% 18%;
-    --input: 0 0% 18%;
-    --ring: 0 0% 83.1%;
-
-    --sandbox: 270 95% 65%;
-    --sandbox-glow: 270 90% 66%;
-
-    --success: 142 71% 45%;
-    --warning: 38 92% 50%;
-    --error: 0 84% 60%;
-    --info: 217 91% 60%;
+    --sandbox: var(--primary);
+    --sandbox-glow: var(--info);
   }
 
   * {
-    @apply border-border;
+    border-color: hsl(var(--border));
   }
 
   body {
-    @apply bg-background text-foreground antialiased;
+    @apply antialiased;
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-family: var(--font-sans);
     font-feature-settings:
       "rlig" 1,
       "calt" 1;
@@ -97,9 +44,10 @@
 }
 
 @layer utilities {
-  /* Gradient text -- Tangle purple */
+  /* Gradient text -- Tangle default accent */
   .text-gradient-sandbox {
-    @apply bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-violet-400;
+    background-image: var(--tangle-gradient);
+    @apply bg-clip-text text-transparent;
   }
 
   /* Glow effects */
@@ -109,7 +57,9 @@
 
   /* Glass effect */
   .glass {
-    @apply bg-card/80 backdrop-blur-xl border border-border/50;
+    backdrop-filter: blur(24px);
+    background-color: hsl(var(--card) / 0.8);
+    border: 1px solid hsl(var(--border) / 0.5);
   }
 
   /* Subtle noise texture */
@@ -184,8 +134,7 @@
   }
 }
 
-/* Fonts -- Inter (UI) + JetBrains Mono (code).
-   Using @font-face with font-display: swap to avoid render-blocking. */
+/* Fonts -- Inter (UI) + JetBrains Mono (code). */
 @font-face {
   font-family: "Inter";
   src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiA.woff2") format("woff2");

package/dist/hooks.d.ts

@@ -1,11 +1,12 @@
-export { A as AgentStreamEvent, a as AuthUser, b as AutomationStreamEvent, B as BotStreamEvent, C as ConnectionState, S as SSEEvent, c as SessionInfo, d as SidecarAuth, T as TaskStreamEvent, e as TerminalStreamEvent, U as UseAuthOptions, f as UseAuthResult, g as UsePtySessionOptions, h as UsePtySessionReturn, i as UseRunGroupsOptions, j as UseSSEStreamOptions, k as UseSSEStreamResult, l as UseSessionStreamOptions, m as UseSessionStreamResult, n as UseSidecarAuthOptions, o as UseToolCallStreamReturn, p as createAuthFetcher, u as useApiKey, q as useAuth, r as useAutoScroll, s as useDropdownMenu, t as usePtySession, v as useRunCollapseState, w as useRunGroups, x as useSSEStream, y as useSessionStream, z as useSidecarAuth, D as useToolCallStream } from './use-sidecar-auth-Bb0-w3lX.js';
+export { A as AuthUser, U as UseAuthOptions, a as UseAuthResult, b as UsePtySessionOptions, c as UsePtySessionReturn, d as createAuthFetcher, u as useApiKey, e as useAuth, f as usePtySession } from './use-pty-session-DeZSxOCN.js';
+export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, ConnectionState, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SessionInfo, SidecarAuth, TaskStreamEvent, TerminalStreamEvent, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseSessionStreamOptions, UseSessionStreamResult, UseSidecarAuthOptions, UseToolCallStreamReturn, useAutoScroll, useDropdownMenu, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionStream, useSidecarAuth, useToolCallStream } from './sdk-hooks.js';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { S as Session } from './sidecar-CFU2W9j1.js';
-import './tool-call-feed-D5Ume-Pt.js';
-import 'react/jsx-runtime';
 import 'react';
-import './parts-CyGkM6Fp.js';
 import './run-CtFZ6s-D.js';
+import './parts-CyGkM6Fp.js';
+import './tool-call-feed-D5Ume-Pt.js';
+import 'react/jsx-runtime';
 
 /** List all sessions for a sidecar. */
 declare function useSessions(apiUrl: string, token: string | null): _tanstack_react_query.UseQueryResult<Session[], Error>;

package/dist/hooks.js

@@ -1,24 +1,28 @@
 import {
   createAuthFetcher,
   useApiKey,
-  useAuth,
+  useAuth
+} from "./chunk-FJSVPBKY.js";
+import {
+  usePtySession
+} from "./chunk-GRYHFH5O.js";
+import {
   useDropdownMenu,
   useSSEStream,
+  useSdkSession,
   useSessionStream,
   useSidecarAuth,
   useToolCallStream
-} from "./chunk-HYEAX3DC.js";
-import {
-  usePtySession
-} from "./chunk-GRYHFH5O.js";
+} from "./chunk-5LV6DZZF.js";
+import "./chunk-CCKNIAS7.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-KMXV7DDX.js";
-import "./chunk-M6VLC32S.js";
-import "./chunk-M34OA6PQ.js";
-import "./chunk-QSQBDR3N.js";
+} from "./chunk-CNWVHQFY.js";
+import "./chunk-CJ2RYVZH.js";
+import "./chunk-BX6AQMUS.js";
+import "./chunk-LTFK464G.js";
 import "./chunk-RQHJBTEU.js";
 
 // src/hooks/use-session-crud.ts
@@ -100,6 +104,7 @@ export {
   useRunCollapseState,
   useRunGroups,
   useSSEStream,
+  useSdkSession,
   useSessionStream,
   useSessions,
   useSidecarAuth,

package/dist/index-BOjBJwzD.d.ts

@@ -0,0 +1,219 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import './usage-chart-CY9xo3KX.js';
+
+interface SidebarNavItem {
+    id: string;
+    label: string;
+    href: string;
+    icon: string;
+    badge?: string;
+}
+interface SidebarSandbox {
+    id: string;
+    name: string;
+    label?: string;
+}
+interface AppSidebarProps {
+    navItems: SidebarNavItem[];
+    activeNavId?: string;
+    sandboxes?: SidebarSandbox[];
+    activeSandboxId?: string;
+    onSandboxChange?: (id: string) => void;
+    onNewAgent?: () => void;
+    className?: string;
+    LinkComponent?: React.ComponentType<any>;
+}
+declare function AppSidebar({ navItems, activeNavId, sandboxes, activeSandboxId, onSandboxChange, onNewAgent, className, LinkComponent, }: AppSidebarProps): react_jsx_runtime.JSX.Element;
+
+interface ClusterStatusItem {
+    icon: string;
+    label: string;
+    value: string;
+    valueClass?: string;
+}
+interface ClusterStatusBarProps {
+    items: ClusterStatusItem[];
+    latency?: string;
+    className?: string;
+}
+declare function ClusterStatusBar({ items, latency, className }: ClusterStatusBarProps): react_jsx_runtime.JSX.Element;
+
+type ProductVariant = "sandbox";
+interface NavItem {
+    id: string;
+    label: string;
+    href: string;
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+    /** Material icon name for Stitch sidebar (optional, falls back to icon component) */
+    materialIcon?: string;
+}
+interface DashboardUser {
+    email: string;
+    name?: string;
+    tier?: string;
+    avatarUrl?: string;
+}
+interface TopNavLink {
+    label: string;
+    href: string;
+}
+interface DashboardLayoutProps {
+    children: React.ReactNode;
+    variant?: ProductVariant;
+    navItems: NavItem[];
+    activeNavId?: string;
+    user?: DashboardUser | null;
+    isLoading?: boolean;
+    onLogout?: () => void;
+    onSettingsClick?: () => void;
+    settingsHref?: string;
+    onNewSandbox?: () => void;
+    className?: string;
+    sidebarClassName?: string;
+    contentClassName?: string;
+    topNavLinks?: TopNavLink[];
+    activeTopNavHref?: string;
+    sandboxName?: string;
+    sandboxLabel?: string;
+    /** Custom link component (e.g., Next.js Link). Use any type to support various router implementations. */
+    LinkComponent?: React.ComponentType<any>;
+    /** Footer content rendered at bottom of viewport */
+    footer?: React.ReactNode;
+}
+declare function DashboardLayout({ children, variant, navItems, activeNavId, user, isLoading, onLogout, onSettingsClick, settingsHref, onNewSandbox, className, sidebarClassName, contentClassName, topNavLinks, activeTopNavHref, sandboxName, sandboxLabel, LinkComponent, footer, }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface ResourceMeterProps {
+    label: string;
+    value: number;
+    max?: number;
+    unit?: string;
+    icon?: string;
+    className?: string;
+}
+declare function ResourceMeter({ label, value, max, unit, icon, className }: ResourceMeterProps): react_jsx_runtime.JSX.Element;
+
+type SandboxStatus = "running" | "hibernating" | "provisioning" | "stopped" | "failed" | "archived";
+interface SandboxCardData {
+    id: string;
+    name: string;
+    nodeId?: string;
+    status: SandboxStatus;
+    image?: string;
+    imageIcon?: React.ReactNode;
+    cpuPercent?: number;
+    ramUsed?: number;
+    ramTotal?: number;
+    provisioningMessage?: string;
+    provisioningPercent?: number;
+    archivedAt?: string;
+}
+interface SandboxCardProps {
+    sandbox: SandboxCardData;
+    onOpenIDE?: (id: string) => void;
+    onOpenTerminal?: (id: string) => void;
+    onWake?: (id: string) => void;
+    onRestore?: (id: string) => void;
+    className?: string;
+}
+declare function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, className }: SandboxCardProps): react_jsx_runtime.JSX.Element;
+interface NewSandboxCardProps {
+    onClick?: () => void;
+    className?: string;
+}
+declare function NewSandboxCard({ onClick, className }: NewSandboxCardProps): react_jsx_runtime.JSX.Element;
+
+interface SandboxTableProps {
+    sandboxes: SandboxCardData[];
+    page?: number;
+    pageSize?: number;
+    total?: number;
+    onPageChange?: (page: number) => void;
+    onOpenIDE?: (id: string) => void;
+    onOpenTerminal?: (id: string) => void;
+    onSSH?: (id: string) => void;
+    onWake?: (id: string) => void;
+    onMore?: (id: string) => void;
+    className?: string;
+}
+declare function SandboxTable({ sandboxes, page, pageSize, total, onPageChange, onOpenIDE, onOpenTerminal, onSSH, onWake, onMore, className, }: SandboxTableProps): react_jsx_runtime.JSX.Element;
+
+interface Backend {
+    type: string;
+    label: string;
+    description?: string;
+}
+interface BackendSelectorProps {
+    backends: Backend[];
+    selected: string[];
+    onChange: (selected: string[]) => void;
+    label?: string;
+    hint?: string;
+    multiSelect?: boolean;
+    className?: string;
+}
+declare function BackendSelector({ backends, selected, onChange, label, hint, multiSelect, className, }: BackendSelectorProps): react_jsx_runtime.JSX.Element;
+
+interface Profile {
+    id: string;
+    name: string;
+    description?: string;
+    is_builtin?: boolean;
+    extends?: string;
+    model?: string;
+    metrics?: {
+        total_runs: number;
+        success_rate: number;
+        avg_duration_ms: number;
+    };
+}
+interface ProfileSelectorProps {
+    profiles: Profile[];
+    selectedId?: string | null;
+    onSelect: (profile: Profile | null) => void;
+    onCreateClick?: () => void;
+    onManageClick?: () => void;
+    label?: string;
+    placeholder?: string;
+    showMetrics?: boolean;
+    className?: string;
+}
+declare function ProfileSelector({ profiles, selectedId, onSelect, onCreateClick, onManageClick, label, placeholder, showMetrics, className, }: ProfileSelectorProps): react_jsx_runtime.JSX.Element;
+/**
+ * Profile performance comparison card.
+ * Shows metrics from multiple profiles side by side.
+ */
+interface ProfileComparisonProps {
+    profiles: Profile[];
+    className?: string;
+}
+declare function ProfileComparison({ profiles, className, }: ProfileComparisonProps): react_jsx_runtime.JSX.Element | null;
+
+type VariantStatus = "pending" | "running" | "completed" | "failed" | "cancelled";
+type VariantOutcome = "pending_review" | "accepted" | "rejected" | "merged_with_conflicts" | "expired";
+interface Variant {
+    id: string;
+    label: string;
+    sublabel?: string;
+    status: VariantStatus;
+    outcome?: VariantOutcome;
+    durationMs?: number;
+    error?: string;
+    summary?: string;
+    /** Link to view variant details (e.g., chat UI) */
+    detailsUrl?: string;
+}
+interface VariantListProps {
+    variants: Variant[];
+    selectedId?: string | null;
+    onSelect?: (id: string) => void;
+    onAccept?: (id: string) => void;
+    onReject?: (id: string) => void;
+    isActioning?: string | null;
+    className?: string;
+}
+declare function VariantList({ variants, selectedId, onSelect, onAccept, onReject, isActioning, className, }: VariantListProps): react_jsx_runtime.JSX.Element;
+
+export { AppSidebar as A, type Backend as B, ClusterStatusBar as C, DashboardLayout as D, type NavItem as N, ProfileComparison as P, ResourceMeter as R, SandboxCard as S, type TopNavLink as T, VariantList as V, type AppSidebarProps as a, BackendSelector as b, type BackendSelectorProps as c, type ClusterStatusBarProps as d, type ClusterStatusItem as e, type DashboardLayoutProps as f, type DashboardUser as g, NewSandboxCard as h, type NewSandboxCardProps as i, type ProfileComparisonProps as j, ProfileSelector as k, type ProfileSelectorProps as l, type ResourceMeterProps as m, type SandboxCardData as n, type SandboxCardProps as o, type SandboxStatus as p, SandboxTable as q, type SandboxTableProps as r, type SidebarNavItem as s, type SidebarSandbox as t, type VariantListProps as u, type Profile as v, type ProductVariant as w, type Variant as x, type VariantOutcome as y, type VariantStatus as z };