@tangle-network/sandbox-ui 0.2.0

package/README.md

@@ -0,0 +1,68 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/tangle-network/sandbox-ui/main/.github/banner.svg" alt="Tangle Sandbox UI" width="100%" />
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@tangle-network/sandbox-ui"><img src="https://img.shields.io/npm/v/@tangle-network/sandbox-ui?color=8E59FF&label=npm" alt="npm" /></a>
+  <a href="https://github.com/tangle-network/sandbox-ui/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@tangle-network/sandbox-ui?color=6888F9" alt="license" /></a>
+  <a href="https://github.com/tangle-network/sandbox-ui"><img src="https://img.shields.io/github/stars/tangle-network/sandbox-ui?style=flat&color=8E59FF" alt="stars" /></a>
+</p>
+
+# @tangle-network/sandbox-ui
+
+React component library for [Tangle Sandbox](https://sandbox.tangle.tools) — 100+ components for building AI agent interfaces with chat, terminal, file browser, tool call feeds, and dashboard views.
+
+## Install
+
+```bash
+npm install @tangle-network/sandbox-ui
+```
+
+**Peer dependencies:** `react` and `react-dom` (18 or 19). Optional peers for specific subpaths — see [package.json](./package.json).
+
+## Usage
+
+```tsx
+import { Button, Badge, Card } from "@tangle-network/sandbox-ui/primitives";
+import { ChatContainer } from "@tangle-network/sandbox-ui/chat";
+import { WorkspaceLayout } from "@tangle-network/sandbox-ui/workspace";
+```
+
+Import styles in your app root:
+
+```tsx
+import "@tangle-network/sandbox-ui/styles";
+```
+
+## Subpath Exports
+
+| Subpath | Description |
+|---------|-------------|
+| `/primitives` | Button, Card, Dialog, Badge, Input, Select, Table, Tabs, Toast, etc. |
+| `/chat` | ChatContainer, ChatInput, ChatMessage, MessageList |
+| `/run` | ToolCallFeed, RunGroup, InlineToolItem, ExpandedToolDetail |
+| `/workspace` | WorkspaceLayout, StatusBar, StatusBanner, TerminalPanel |
+| `/files` | FileTree, FilePreview, FileTabs |
+| `/dashboard` | DashboardLayout, BillingDashboard, UsageChart, ProfileSelector |
+| `/editor` | TipTap collaborative editor (requires optional peers) |
+| `/terminal` | xterm.js terminal view (requires optional peers) |
+| `/markdown` | Markdown renderer with GFM, code blocks, copy button |
+| `/auth` | AuthHeader, GitHubLoginButton, UserMenu |
+| `/pages` | Pre-built billing, pricing, profiles pages |
+| `/hooks` | useSSEStream, useAuth, usePtySession, useRunGroups, etc. |
+| `/stores` | Session and chat nanostores |
+| `/types` | TypeScript types for messages, parts, runs, sessions |
+| `/utils` | cn, formatDuration, timeAgo, tool display helpers |
+| `/styles` | Compiled CSS bundle |
+
+## Stack
+
+- [Radix UI](https://www.radix-ui.com/) primitives
+- [Tailwind CSS](https://tailwindcss.com/) v4
+- [Lucide](https://lucide.dev/) icons
+- [CVA](https://cva.style/) for variant management
+- ESM-only, tree-shakeable, fully typed
+
+## License
+
+Apache-2.0

package/dist/auth.d.ts

@@ -0,0 +1,57 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { a as ButtonProps } from './button-BidTtuRS.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+interface SessionUser {
+    customer_id: string;
+    email: string;
+    name?: string;
+    tier?: string;
+    github?: {
+        login: string;
+        connected: boolean;
+    } | null;
+    session_expires_at: string;
+}
+interface GitHubLoginButtonProps extends Omit<ButtonProps, "onClick"> {
+    /** API base URL (defaults to /auth/github) */
+    authUrl?: string;
+    /** Product variant for styling */
+    variant?: "sandbox" | "default" | "outline";
+}
+declare function GitHubLoginButton({ authUrl, variant, className, children, ...props }: GitHubLoginButtonProps): react_jsx_runtime.JSX.Element;
+interface UserMenuProps {
+    user: SessionUser;
+    /** API base URL for logout */
+    logoutUrl?: string;
+    /** Links to show in menu */
+    links?: Array<{
+        href: string;
+        label: string;
+        icon?: React.ReactNode;
+    }>;
+    /** Product variant for styling */
+    variant?: "sandbox";
+    /** Callback when logout is clicked */
+    onLogout?: () => void;
+}
+declare function UserMenu({ user, logoutUrl, links, variant, onLogout, }: UserMenuProps): react_jsx_runtime.JSX.Element;
+interface AuthHeaderProps {
+    /** Current session user (null if not logged in) */
+    user: SessionUser | null;
+    /** Whether session is loading */
+    loading?: boolean;
+    /** Product variant */
+    variant?: "sandbox";
+    /** API base URL */
+    apiBaseUrl?: string;
+    /** Links for user menu */
+    menuLinks?: UserMenuProps["links"];
+    /** Custom className */
+    className?: string;
+}
+declare function AuthHeader({ user, loading, variant, apiBaseUrl, menuLinks, className, }: AuthHeaderProps): react_jsx_runtime.JSX.Element;
+
+export { AuthHeader, type AuthHeaderProps, GitHubLoginButton, type GitHubLoginButtonProps, type SessionUser, UserMenu, type UserMenuProps };

package/dist/auth.js

@@ -0,0 +1,14 @@
+import {
+  AuthHeader,
+  GitHubLoginButton,
+  UserMenu
+} from "./chunk-OU4TRNQZ.js";
+import "./chunk-B26TQ7SA.js";
+import "./chunk-MCGKDCOR.js";
+import "./chunk-E6FS7R4X.js";
+import "./chunk-RQHJBTEU.js";
+export {
+  AuthHeader,
+  GitHubLoginButton,
+  UserMenu
+};

package/dist/branding-DCi5VEik.d.ts

@@ -0,0 +1,13 @@
+/** Visual branding for a run group header — injected by consuming app. */
+interface AgentBranding {
+    label: string;
+    accentClass: string;
+    bgClass: string;
+    containerBgClass: string;
+    borderClass: string;
+    /** CSS class for the agent icon (legacy). Ignored when using lucide-react icons. */
+    iconClass: string;
+    textClass: string;
+}
+
+export type { AgentBranding as A };

package/dist/button-BidTtuRS.d.ts

@@ -0,0 +1,15 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "sandbox" | null | undefined;
+    size?: "default" | "sm" | "lg" | "xl" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    loading?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Button as B, type ButtonProps as a, buttonVariants as b };

package/dist/chat.d.ts

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { S as SessionMessage, a as SessionPart } from './parts-CyGkM6Fp.js';
+import { A as AgentBranding } from './branding-DCi5VEik.js';
+import { C as CustomToolRenderer } from './tool-display-BvsVW_Ur.js';
+import { G as GroupedMessage } from './run-CtFZ6s-D.js';
+
+type MessageRole = "user" | "assistant" | "system";
+interface ChatMessageProps {
+    role: MessageRole;
+    content: string;
+    /** Inline tool call activity rendered between text chunks */
+    toolCalls?: ReactNode;
+    /** Whether the message is still streaming */
+    isStreaming?: boolean;
+    /** Timestamp */
+    timestamp?: Date;
+    className?: string;
+}
+declare function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, className, }: ChatMessageProps): react_jsx_runtime.JSX.Element;
+
+interface Message {
+    id: string;
+    role: MessageRole;
+    content: string;
+    toolCalls?: ReactNode;
+    isStreaming?: boolean;
+    timestamp?: Date;
+}
+interface ChatMessageListProps {
+    messages: Message[];
+    /** Render additional content after a message (e.g., tool call feed) */
+    renderAfter?: (message: Message, index: number) => ReactNode;
+    /** Content shown when no messages */
+    emptyState?: ReactNode;
+    /** Show thinking indicator at bottom */
+    isThinking?: boolean;
+    className?: string;
+}
+declare function ChatMessageList({ messages, renderAfter, emptyState, isThinking, className, }: ChatMessageListProps): react_jsx_runtime.JSX.Element;
+declare function ThinkingIndicator({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * ChatInput — message input bar with file attach, send/cancel, model selector.
+ *
+ * - Auto-resizing textarea (up to max height)
+ * - Enter to send, Shift+Enter for newline
+ * - File attachment button with pending file chips
+ * - Cancel button when streaming
+ * - Optional model selector pill
+ */
+interface PendingFile {
+    id: string;
+    name: string;
+    size: number;
+    status: "pending" | "uploading" | "ready" | "error";
+}
+interface ChatInputProps {
+    onSend: (message: string, files?: File[]) => void;
+    onCancel?: () => void;
+    isStreaming?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    /** Currently selected model label */
+    modelLabel?: string;
+    onModelClick?: () => void;
+    /** Pending uploaded files */
+    pendingFiles?: PendingFile[];
+    onRemoveFile?: (id: string) => void;
+    onAttach?: (files: FileList) => void;
+    className?: string;
+}
+declare function ChatInput({ onSend, onCancel, isStreaming, disabled, placeholder, modelLabel, onModelClick, pendingFiles, onRemoveFile, onAttach, className, }: ChatInputProps): react_jsx_runtime.JSX.Element;
+
+interface ChatContainerProps {
+    messages: SessionMessage[];
+    partMap: Record<string, SessionPart[]>;
+    isStreaming: boolean;
+    onSend?: (text: string) => void;
+    branding?: AgentBranding;
+    placeholder?: string;
+    className?: string;
+    /** Hide the input area (useful for read-only views). */
+    hideInput?: boolean;
+    /** Custom renderer for tool details. Return ReactNode to override, null to use default. */
+    renderToolDetail?: CustomToolRenderer;
+}
+/**
+ * Full chat container: message list + auto-scroll + input area.
+ * Orchestrates useRunGroups, useRunCollapseState, and useAutoScroll.
+ */
+declare const ChatContainer: React.MemoExoticComponent<({ messages, partMap, isStreaming, onSend, branding, placeholder, className, hideInput, renderToolDetail, }: ChatContainerProps) => react_jsx_runtime.JSX.Element>;
+
+interface MessageListProps {
+    groups: GroupedMessage[];
+    partMap: Record<string, SessionPart[]>;
+    isCollapsed: (runId: string) => boolean;
+    onToggleCollapse: (runId: string) => void;
+    branding?: AgentBranding;
+    renderToolDetail?: CustomToolRenderer;
+}
+/**
+ * Maps GroupedMessage[] to UserMessage and RunGroup components.
+ * This is the main render list for the chat view.
+ */
+declare const MessageList: React.MemoExoticComponent<({ groups, partMap, isCollapsed, onToggleCollapse, branding, renderToolDetail, }: MessageListProps) => react_jsx_runtime.JSX.Element>;
+
+interface UserMessageProps {
+    message: SessionMessage;
+    parts: SessionPart[];
+}
+/**
+ * Simple user message bubble.
+ * Renders text parts from the user's message.
+ */
+declare const UserMessage: React.MemoExoticComponent<({ message, parts }: UserMessageProps) => react_jsx_runtime.JSX.Element | null>;
+
+export { ChatContainer, type ChatContainerProps, ChatInput, type ChatInputProps, ChatMessage, ChatMessageList, type ChatMessageListProps, type ChatMessageProps, type Message, MessageList, type MessageListProps, type MessageRole, type PendingFile, ThinkingIndicator, UserMessage, type UserMessageProps };

package/dist/chat.js

@@ -0,0 +1,25 @@
+import {
+  ChatContainer,
+  ChatInput,
+  ChatMessage,
+  ChatMessageList,
+  MessageList,
+  ThinkingIndicator,
+  UserMessage
+} from "./chunk-U62G5TS7.js";
+import "./chunk-KMXV7DDX.js";
+import "./chunk-6MQIDUPA.js";
+import "./chunk-LTFK464G.js";
+import "./chunk-M34OA6PQ.js";
+import "./chunk-HRMUF35V.js";
+import "./chunk-QSQBDR3N.js";
+import "./chunk-RQHJBTEU.js";
+export {
+  ChatContainer,
+  ChatInput,
+  ChatMessage,
+  ChatMessageList,
+  MessageList,
+  ThinkingIndicator,
+  UserMessage
+};

package/dist/chunk-2UHPE5T7.js

@@ -0,0 +1,201 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/primitives/card.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Card = React.forwardRef(({ className, variant = "default", hover = false, ...props }, ref) => {
+  const variants = {
+    default: "bg-card border-border",
+    glass: "bg-card/60 backdrop-blur-xl border-border/50",
+    sandbox: "bg-card/80 backdrop-blur-xl border-purple-500/20 shadow-lg shadow-purple-500/5"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-xl border text-card-foreground transition-all duration-300",
+        variants[variant],
+        hover && "cursor-pointer hover:border-muted-foreground/50 hover:shadow-xl",
+        className
+      ),
+      ...props
+    }
+  );
+});
+Card.displayName = "Card";
+var CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "h3",
+  {
+    ref,
+    className: cn("font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("text-muted-foreground text-sm", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+
+// src/primitives/badge.tsx
+import { cva } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive text-destructive-foreground",
+        outline: "text-foreground",
+        success: "border-green-500/20 border-transparent bg-green-500/10 text-green-400",
+        warning: "border-transparent border-yellow-500/20 bg-yellow-500/10 text-yellow-400",
+        error: "border-red-500/20 border-transparent bg-red-500/10 text-red-400",
+        info: "border-blue-500/20 border-transparent bg-blue-500/10 text-blue-400",
+        sandbox: "border-purple-500/20 border-transparent bg-purple-500/10 text-purple-400"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx2("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+
+// src/primitives/progress.tsx
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as React2 from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var Progress = React2.forwardRef(
+  ({ className, value, variant = "default", showValue = false, ...props }, ref) => {
+    const indicatorVariants = {
+      default: "bg-primary",
+      sandbox: "bg-gradient-to-r from-purple-500 to-violet-500"
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx3(
+        ProgressPrimitive.Root,
+        {
+          ref,
+          className: cn(
+            "relative h-2 w-full overflow-hidden rounded-full bg-muted",
+            className
+          ),
+          ...props,
+          children: /* @__PURE__ */ jsx3(
+            ProgressPrimitive.Indicator,
+            {
+              className: cn(
+                "h-full w-full flex-1 transition-all duration-300 ease-out",
+                indicatorVariants[variant]
+              ),
+              style: { transform: `translateX(-${100 - (value || 0)}%)` }
+            }
+          )
+        }
+      ),
+      showValue && /* @__PURE__ */ jsxs("span", { className: "absolute -top-6 right-0 text-muted-foreground text-xs", children: [
+        value,
+        "%"
+      ] })
+    ] });
+  }
+);
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+// src/primitives/skeleton.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function Skeleton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: cn("animate-pulse rounded-lg bg-muted", className),
+      ...props
+    }
+  );
+}
+function SkeletonCard({ className }) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn(
+        "space-y-4 rounded-xl border border-border bg-card p-6",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-3/4" }),
+        /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/2" }),
+        /* @__PURE__ */ jsxs2("div", { className: "space-y-2 pt-4", children: [
+          /* @__PURE__ */ jsx4(Skeleton, { className: "h-3 w-full" }),
+          /* @__PURE__ */ jsx4(Skeleton, { className: "h-3 w-5/6" }),
+          /* @__PURE__ */ jsx4(Skeleton, { className: "h-3 w-4/6" })
+        ] })
+      ]
+    }
+  );
+}
+function SkeletonTable({ rows = 5 }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex gap-4 border-border border-b pb-2", children: [
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" })
+    ] }),
+    Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs2("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" }),
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-1/4" })
+    ] }, i))
+  ] });
+}
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  badgeVariants,
+  Badge,
+  Progress,
+  Skeleton,
+  SkeletonCard,
+  SkeletonTable
+};