@tangle-network/sandbox-ui 0.2.0

package/dist/expanded-tool-detail-OkXGqTHe.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+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';
+
+interface RunGroupProps {
+    run: Run;
+    partMap: Record<string, SessionPart[]>;
+    collapsed: boolean;
+    onToggle: () => void;
+    branding?: AgentBranding;
+    renderToolDetail?: CustomToolRenderer;
+}
+/**
+ * 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>;
+
+interface InlineToolItemProps {
+    part: ToolPart;
+    renderToolDetail?: CustomToolRenderer;
+}
+/**
+ * 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>;
+
+interface InlineThinkingItemProps {
+    part: ReasoningPart;
+}
+/**
+ * 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>;
+
+interface ExpandedToolDetailProps {
+    part: ToolPart;
+}
+/**
+ * Renders full tool details when a tool item is expanded.
+ * Dispatches to specialised previews (CommandPreview, WriteFilePreview)
+ * or falls back to a generic input/output code view.
+ */
+declare const ExpandedToolDetail: React.MemoExoticComponent<({ part }: ExpandedToolDetailProps) => react_jsx_runtime.JSX.Element>;
+
+export { ExpandedToolDetail as E, InlineThinkingItem as I, RunGroup as R, type ExpandedToolDetailProps as a, type InlineThinkingItemProps as b, InlineToolItem as c, type InlineToolItemProps as d, type RunGroupProps as e };

package/dist/files.d.ts

@@ -0,0 +1,66 @@
+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;
+
+/**
+ * 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
+ * - Markdown: rendered prose
+ * - Images: inline display
+ * - Text: monospace pre
+ */
+interface FilePreviewProps {
+    filename: string;
+    content?: string;
+    blobUrl?: string;
+    mimeType?: string;
+    onClose?: () => void;
+    onDownload?: () => void;
+    className?: string;
+}
+declare function FilePreview({ filename, content, blobUrl, mimeType, onClose, onDownload, 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;
+    className?: string;
+}
+declare function FileTabs({ tabs, activeId, onSelect, onClose, className }: FileTabsProps): react_jsx_runtime.JSX.Element | null;
+
+export { type FileNode, FilePreview, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps };

package/dist/files.js

@@ -0,0 +1,11 @@
+import {
+  FilePreview,
+  FileTabs,
+  FileTree
+} from "./chunk-L6ZDH5F4.js";
+import "./chunk-RQHJBTEU.js";
+export {
+  FilePreview,
+  FileTabs,
+  FileTree
+};

package/dist/hooks.d.ts

@@ -0,0 +1,22 @@
+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';
+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';
+
+/** List all sessions for a sidecar. */
+declare function useSessions(apiUrl: string, token: string | null): _tanstack_react_query.UseQueryResult<Session[], Error>;
+/** Create a new session. */
+declare function useCreateSession(apiUrl: string, token: string | null): _tanstack_react_query.UseMutationResult<Session, Error, string, unknown>;
+/** Delete a session by ID. */
+declare function useDeleteSession(apiUrl: string, token: string | null): _tanstack_react_query.UseMutationResult<unknown, Error, string, unknown>;
+/** Rename a session. */
+declare function useRenameSession(apiUrl: string, token: string | null): _tanstack_react_query.UseMutationResult<Session, Error, {
+    sessionId: string;
+    title: string;
+}, unknown>;
+
+export { useCreateSession, useDeleteSession, useRenameSession, useSessions };

package/dist/hooks.js

@@ -0,0 +1,107 @@
+import {
+  createAuthFetcher,
+  useApiKey,
+  useAuth,
+  useDropdownMenu,
+  useSSEStream,
+  useSessionStream,
+  useSidecarAuth,
+  useToolCallStream
+} from "./chunk-HYEAX3DC.js";
+import {
+  usePtySession
+} from "./chunk-GRYHFH5O.js";
+import {
+  useAutoScroll,
+  useRunCollapseState,
+  useRunGroups
+} from "./chunk-KMXV7DDX.js";
+import "./chunk-M6VLC32S.js";
+import "./chunk-M34OA6PQ.js";
+import "./chunk-QSQBDR3N.js";
+import "./chunk-RQHJBTEU.js";
+
+// src/hooks/use-session-crud.ts
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+async function sessionFetch(apiUrl, token, path, opts) {
+  const res = await fetch(`${apiUrl}${path}`, {
+    ...opts,
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+      ...opts?.headers ?? {}
+    }
+  });
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(text || `API error: ${res.status}`);
+  }
+  return res.json();
+}
+function useSessions(apiUrl, token) {
+  return useQuery({
+    queryKey: ["sessions", apiUrl, token],
+    queryFn: () => sessionFetch(apiUrl, token, "/session/sessions"),
+    enabled: !!token,
+    staleTime: 3e4
+  });
+}
+function useCreateSession(apiUrl, token) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (title) => {
+      return sessionFetch(apiUrl, token, "/session/sessions", {
+        method: "POST",
+        body: JSON.stringify({ title, backend: { type: "opencode" } })
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["sessions", apiUrl, token] });
+    }
+  });
+}
+function useDeleteSession(apiUrl, token) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (sessionId) => {
+      return sessionFetch(apiUrl, token, `/session/sessions/${encodeURIComponent(sessionId)}`, {
+        method: "DELETE"
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["sessions", apiUrl, token] });
+    }
+  });
+}
+function useRenameSession(apiUrl, token) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ sessionId, title }) => {
+      return sessionFetch(apiUrl, token, `/session/sessions/${encodeURIComponent(sessionId)}`, {
+        method: "PATCH",
+        body: JSON.stringify({ title })
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["sessions", apiUrl, token] });
+    }
+  });
+}
+export {
+  createAuthFetcher,
+  useApiKey,
+  useAuth,
+  useAutoScroll,
+  useCreateSession,
+  useDeleteSession,
+  useDropdownMenu,
+  usePtySession,
+  useRenameSession,
+  useRunCollapseState,
+  useRunGroups,
+  useSSEStream,
+  useSessionStream,
+  useSessions,
+  useSidecarAuth,
+  useToolCallStream
+};

package/dist/index.d.ts

@@ -0,0 +1,107 @@
+export { B as Button, a as ButtonProps, b as buttonVariants } from './button-BidTtuRS.js';
+export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, Input, InputProps, Label, Progress, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TextareaProps, Toast, ToastContainer, ToastProvider, badgeVariants, useToast } from './primitives.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default from 'react';
+export { AuditCheck, AuditResults, AuditResultsProps, BannerType, ContextBadge, FormAudit, StatusBanner, StatusBannerProps, StatusBar, StatusBarProps, TerminalLine, TerminalPanel, TerminalProps, WorkspaceLayout, WorkspaceLayoutProps } from './workspace.js';
+export { ChatContainer, ChatInput, ChatInputProps, ChatMessage, ChatMessageList, ChatMessageListProps, ChatMessageProps, Message, MessageList, MessageRole, PendingFile, ThinkingIndicator, UserMessage } from './chat.js';
+export { F as FeedSegment, T as ToolCallData, a as ToolCallFeed, b as ToolCallFeedProps, c as ToolCallGroup, d as ToolCallGroupProps, e as ToolCallStatus, f as ToolCallStep, g as ToolCallStepProps, h as ToolCallType, p as parseToolEvent } from './tool-call-feed-D5Ume-Pt.js';
+export { E as ExpandedToolDetail, I as InlineThinkingItem, c as InlineToolItem, R as RunGroup } from './expanded-tool-detail-OkXGqTHe.js';
+import { b as ToolPart } from './parts-CyGkM6Fp.js';
+export { R as ReasoningPart, S as SessionMessage, a as SessionPart, T as TextPart, c as ToolState, d as ToolStatus, e as ToolTime } from './parts-CyGkM6Fp.js';
+export { FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps } from './files.js';
+export { Backend, BackendSelector, BackendSelectorProps, DashboardLayout, DashboardLayoutProps, DashboardUser, NavItem, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, VariantList, VariantListProps } from './dashboard.js';
+export { c as BillingDashboard, d as BillingDashboardProps, e as PricingCards, f as PricingPageProps, g as UsageChart, h as UsageChartProps, U as UsageDataPoint } from './usage-chart-DINgSVL5.js';
+export { AuthHeader, GitHubLoginButton, UserMenu } from './auth.js';
+export { CodeBlock, CopyButton, Markdown, MarkdownProps, SimpleMarkdown, SimpleMarkdownProps, simpleMarkdownStyles } from './markdown.js';
+export { 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 { G as GroupedMessage, R as Run, b as RunStats, T as ToolCategory } from './run-CtFZ6s-D.js';
+export { S as Session } from './sidecar-CFU2W9j1.js';
+export { C as CustomToolRenderer, D as DisplayVariant, T as ToolDisplayMetadata } from './tool-display-BvsVW_Ur.js';
+export { A as AgentBranding } from './branding-DCi5VEik.js';
+export { TOOL_CATEGORY_ICONS, cn, copyText, formatDuration, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText } from './utils.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '@radix-ui/react-dialog';
+import '@radix-ui/react-avatar';
+import '@radix-ui/react-dropdown-menu';
+import '@radix-ui/react-select';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-progress';
+import '@radix-ui/react-switch';
+import '@radix-ui/react-label';
+import 'clsx';
+
+interface LogoProps {
+    variant?: "sandbox";
+    size?: "sm" | "md" | "lg" | "xl";
+    className?: string;
+    iconOnly?: boolean;
+}
+declare function TangleKnot({ size, className }: {
+    size: number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function Logo({ variant, size, className, iconOnly }: LogoProps): react_jsx_runtime.JSX.Element;
+declare namespace Logo {
+    var displayName: string;
+}
+
+type Theme = "light" | "dark" | "system";
+declare function useTheme(): {
+    theme: Theme;
+    setTheme: (next: Theme) => void;
+};
+declare function ThemeToggle(): react_jsx_runtime.JSX.Element;
+
+interface CodeBlockProps extends React__default.HTMLAttributes<HTMLPreElement> {
+    code: string;
+    language?: string;
+    showCopy?: boolean;
+    showLineNumbers?: boolean;
+}
+declare function CodeBlock({ code, language, showCopy, showLineNumbers, className, ...props }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+interface InlineCodeProps extends React__default.HTMLAttributes<HTMLElement> {
+}
+declare function InlineCode({ className, children, ...props }: InlineCodeProps): react_jsx_runtime.JSX.Element;
+
+interface TerminalDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "sandbox";
+    title?: string;
+    showHeader?: boolean;
+    autoScroll?: boolean;
+    maxHeight?: string;
+}
+declare const TerminalDisplay: React.ForwardRefExoticComponent<TerminalDisplayProps & React.RefAttributes<HTMLDivElement>>;
+interface TerminalLineProps extends React.HTMLAttributes<HTMLDivElement> {
+    type?: "input" | "output" | "error" | "success" | "info" | "thinking" | "command" | "warning";
+    prompt?: string;
+    timestamp?: string;
+}
+declare const TerminalLine: React.ForwardRefExoticComponent<TerminalLineProps & React.RefAttributes<HTMLDivElement>>;
+declare const TerminalCursor: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+interface TerminalInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onSubmit"> {
+    onSubmit?: (value: string) => void;
+    variant?: "default" | "sandbox";
+}
+declare const TerminalInput: React.ForwardRefExoticComponent<TerminalInputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface CommandPreviewProps {
+    part: ToolPart;
+}
+/**
+ * Terminal-style command output preview.
+ * Shows the command, exit code, and stdout/stderr with expand/collapse.
+ */
+declare const CommandPreview: React.MemoExoticComponent<({ part }: CommandPreviewProps) => react_jsx_runtime.JSX.Element>;
+
+interface WriteFilePreviewProps {
+    part: ToolPart;
+}
+/**
+ * Preview for file write/create operations.
+ * Shows file path, line count, and the written content.
+ */
+declare const WriteFilePreview: React.MemoExoticComponent<({ part }: WriteFilePreviewProps) => react_jsx_runtime.JSX.Element | null>;
+
+export { CodeBlock as CodeBlockDisplay, CommandPreview, InlineCode, Logo, type LogoProps, TangleKnot, TerminalDisplay, TerminalCursor as TerminalDisplayCursor, TerminalInput as TerminalDisplayInput, TerminalLine as TerminalDisplayLine, ThemeToggle, ToolPart, WriteFilePreview, useTheme };