@tangle-network/sandbox-ui 0.13.0 → 0.15.1

package/dist/auth.d.ts

@@ -1,74 +1 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import { a as ButtonProps } from './button-CMQuQEW_.js';
-import 'class-variance-authority/types';
-
-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;
-
-interface LoginLayoutProps {
-    title?: React.ReactNode;
-    subtitle?: React.ReactNode;
-    brandIcon?: React.ReactNode;
-    children: React.ReactNode;
-    className?: string;
-    /** (Deprecated) terminal lines from legacy layout, kept for backwards compatibility */
-    terminalLines?: string[];
-    /** (Deprecated) tagline, kept for backwards compatibility */
-    tagline?: React.ReactNode;
-    /** (Deprecated) footerLinks, kept for backwards compatibility */
-    footerLinks?: {
-        label: string;
-        href: string;
-    }[];
-}
-declare function LoginLayout({ title, subtitle, brandIcon, children, className, }: LoginLayoutProps): react_jsx_runtime.JSX.Element;
-
-export { AuthHeader, type AuthHeaderProps, GitHubLoginButton, type GitHubLoginButtonProps, LoginLayout, type LoginLayoutProps, type SessionUser, UserMenu, type UserMenuProps };
+export { AuthHeader, AuthHeaderProps, GitHubLoginButton, GitHubLoginButtonProps, LoginLayout, LoginLayoutProps, SessionUser, UserMenu, UserMenuProps } from '@tangle-network/ui/auth';

package/dist/auth.js

@@ -3,10 +3,7 @@ import {
   GitHubLoginButton,
   LoginLayout,
   UserMenu
-} from "./chunk-DI3NZ5ZX.js";
-import "./chunk-34A66VBG.js";
-import "./chunk-MKTSMWVD.js";
-import "./chunk-RQHJBTEU.js";
+} from "./chunk-NJNME4J4.js";
 export {
   AuthHeader,
   GitHubLoginButton,

package/dist/chat.d.ts

@@ -1,136 +1 @@
-export { C as ChatContainer, a as ChatContainerProps, b as ChatInput, c as ChatInputProps, P as PendingFile } from './chat-container-f4yEs6KN.js';
-import * as React from 'react';
-import { ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { G as GroupedMessage } from './run-CtFZ6s-D.js';
-import { a as SessionPart, S as SessionMessage, b as ToolPart } from './parts-CyGkM6Fp.js';
-import { A as AgentBranding } from './branding-DCi5VEik.js';
-import { C as CustomToolRenderer } from './tool-display-Ct9nFAzJ.js';
-import { T as ToolCallData } from './tool-call-feed-Bs3MyQMT.js';
-import './openui.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;
-    /** Custom user label. Default: "You" */
-    userLabel?: string;
-    /** Custom assistant label. Default: "Agent" */
-    assistantLabel?: string;
-    /** Hide the role label row entirely */
-    hideRoleLabel?: boolean;
-    /** Hide the avatar icon */
-    hideAvatar?: boolean;
-    /** Custom avatar element (replaces default User/Bot icon) */
-    avatar?: ReactNode;
-}
-declare function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, className, userLabel, assistantLabel, hideRoleLabel, hideAvatar, avatar, }: ChatMessageProps): 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;
-    renderRunActions?: (group: Extract<GroupedMessage, {
-        type: "run";
-    }>["run"]) => ReactNode;
-    renderUserMessageActions?: (message: SessionMessage, parts: SessionPart[]) => ReactNode;
-    renderToolActions?: (part: ToolPart, options: {
-        run: Extract<GroupedMessage, {
-            type: "run";
-        }>["run"];
-        messageId: string;
-        partIndex: number;
-    }) => ReactNode;
-}
-/**
- * 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, renderRunActions, renderUserMessageActions, renderToolActions, }: MessageListProps) => react_jsx_runtime.JSX.Element>;
-
-interface UserMessageProps {
-    message: SessionMessage;
-    parts: SessionPart[];
-    actions?: ReactNode;
-}
-/**
- * Simple user message bubble.
- * Renders text parts from the user's message.
- */
-declare const UserMessage: React.MemoExoticComponent<({ message, parts, actions }: UserMessageProps) => react_jsx_runtime.JSX.Element | null>;
-
-interface ThinkingIndicatorProps {
-    className?: string;
-}
-declare function ThinkingIndicator({ className }: ThinkingIndicatorProps): react_jsx_runtime.JSX.Element;
-
-type AgentTimelineTone = "default" | "info" | "success" | "warning" | "error";
-interface AgentTimelineMessageItem {
-    id: string;
-    kind: "message";
-    role: MessageRole;
-    content: string;
-    toolCalls?: ReactNode;
-    isStreaming?: boolean;
-    timestamp?: Date;
-    after?: ReactNode;
-}
-interface AgentTimelineToolItem {
-    id: string;
-    kind: "tool";
-    call: ToolCallData;
-}
-interface AgentTimelineToolGroupItem {
-    id: string;
-    kind: "tool_group";
-    title?: string;
-    calls: ToolCallData[];
-}
-interface AgentTimelineStatusItem {
-    id: string;
-    kind: "status";
-    label: string;
-    detail?: string;
-    tone?: AgentTimelineTone;
-}
-interface AgentTimelineArtifactItem {
-    id: string;
-    kind: "artifact";
-    title: string;
-    description?: string;
-    meta?: ReactNode;
-    icon?: ReactNode;
-    tone?: AgentTimelineTone;
-    action?: ReactNode;
-    onClick?: () => void;
-}
-interface AgentTimelineCustomItem {
-    id: string;
-    kind: "custom";
-    content: ReactNode;
-}
-type AgentTimelineItem = AgentTimelineMessageItem | AgentTimelineToolItem | AgentTimelineToolGroupItem | AgentTimelineStatusItem | AgentTimelineArtifactItem | AgentTimelineCustomItem;
-interface AgentTimelineProps {
-    items: AgentTimelineItem[];
-    isThinking?: boolean;
-    emptyState?: ReactNode;
-    className?: string;
-}
-/**
- * AgentTimeline — unified mixed-content timeline for agent-backed sandbox
- * sessions. Renders messages, tool steps, status cards, and artifact handoffs in
- * a single execution narrative.
- */
-declare function AgentTimeline({ items, isThinking, emptyState, className, }: AgentTimelineProps): react_jsx_runtime.JSX.Element | null;
-
-export { AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, ChatMessage, type ChatMessageProps, MessageList, type MessageListProps, type MessageRole, ThinkingIndicator, type ThinkingIndicatorProps, UserMessage, type UserMessageProps };
+export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatInput, ChatInputProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, PendingFile, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from '@tangle-network/ui/chat';

package/dist/chat.js

@@ -1,25 +1,12 @@
-import {
-  ChatMessage
-} from "./chunk-GSZA3TSY.js";
 import {
   AgentTimeline,
   ChatContainer,
   ChatInput,
+  ChatMessage,
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-XLG757B6.js";
-import "./chunk-54SQQMMM.js";
-import "./chunk-MQXABZTB.js";
-import "./chunk-4CLN43XT.js";
-import "./chunk-MT5FJ3ZT.js";
-import "./chunk-BX6AQMUS.js";
-import "./chunk-ZNCEM5CD.js";
-import "./chunk-34I7UFSX.js";
-import "./chunk-T7HMZEVO.js";
-import "./chunk-ZMNSRDMH.js";
-import "./chunk-MKTSMWVD.js";
-import "./chunk-RQHJBTEU.js";
+} from "./chunk-QPAJR74X.js";
 export {
   AgentTimeline,
   ChatContainer,

package/dist/chunk-3J6FG3FJ.js

@@ -0,0 +1,18 @@
+// src/files/index.ts
+import {
+  FileArtifactPane,
+  FilePreview,
+  FileTabs,
+  FileTree,
+  RichFileTree,
+  filterFileTree
+} from "@tangle-network/ui/files";
+
+export {
+  FileArtifactPane,
+  FilePreview,
+  FileTabs,
+  FileTree,
+  RichFileTree,
+  filterFileTree
+};

package/dist/chunk-76IQLPW2.js

@@ -0,0 +1,206 @@
+// src/hooks/index.ts
+import {
+  RealtimeSessionRegistry,
+  createAuthFetcher,
+  useApiKey,
+  useAuth,
+  useAutoScroll,
+  useDropdownMenu,
+  useLiveTime,
+  useRealtimeSession,
+  useRunCollapseState,
+  useRunGroups,
+  useSSEStream,
+  useSdkSession,
+  useToolCallStream
+} from "@tangle-network/ui/hooks";
+
+// src/hooks/use-sandbox-metrics.ts
+import * as React from "react";
+function useSandboxMetrics({
+  apiBaseUrl,
+  sandboxId,
+  token,
+  enabled = true,
+  intervalMs = 3e3
+}) {
+  const [metrics, setMetrics] = React.useState(null);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [lastUpdatedAt, setLastUpdatedAt] = React.useState(null);
+  const sampleRef = React.useRef(null);
+  const hasLoadedRef = React.useRef(false);
+  const prevSandboxIdRef = React.useRef(null);
+  React.useEffect(() => {
+    const sandboxCleared = !sandboxId || !apiBaseUrl;
+    const sandboxChanged = prevSandboxIdRef.current !== null && prevSandboxIdRef.current !== sandboxId;
+    if (sandboxCleared && prevSandboxIdRef.current !== null || sandboxChanged) {
+      sampleRef.current = null;
+      hasLoadedRef.current = false;
+      setMetrics(null);
+      setLastUpdatedAt(null);
+      setError(null);
+      if (sandboxCleared) setLoading(false);
+    }
+    prevSandboxIdRef.current = sandboxId ?? null;
+    if (!enabled || sandboxCleared) {
+      return;
+    }
+    const controller = new AbortController();
+    let cancelled = false;
+    let timeoutId = null;
+    const delay = Math.max(intervalMs, 500);
+    const fetchOnce = async () => {
+      if (!hasLoadedRef.current) setLoading(true);
+      try {
+        const headers = {};
+        if (token) headers.Authorization = `Bearer ${token}`;
+        const res = await fetch(
+          `${apiBaseUrl}/v1/sidecar-proxy/${encodeURIComponent(sandboxId)}/metrics/json`,
+          {
+            method: "GET",
+            credentials: "include",
+            headers,
+            signal: controller.signal
+          }
+        );
+        if (!res.ok) {
+          throw new Error(`Metrics request failed (HTTP ${res.status})`);
+        }
+        const data = await res.json();
+        const user = data?.process?.cpuSeconds?.user ?? 0;
+        const system = data?.process?.cpuSeconds?.system ?? 0;
+        const cpuSeconds = user + system;
+        const wallMs = Date.now();
+        if (cancelled) return;
+        let cpuPercent = null;
+        const prev = sampleRef.current;
+        if (prev && prev.sandboxId === sandboxId) {
+          const dCpu = cpuSeconds - prev.cpuSeconds;
+          const dWallSec = (wallMs - prev.wallMs) / 1e3;
+          if (dWallSec > 0 && dCpu >= 0) {
+            cpuPercent = dCpu / dWallSec * 100;
+          }
+        }
+        sampleRef.current = { cpuSeconds, wallMs, sandboxId };
+        setMetrics({
+          cpuPercent,
+          rssBytes: data?.process?.memoryBytes?.rss ?? 0,
+          heapUsedBytes: data?.process?.memoryBytes?.heapUsed ?? 0,
+          heapTotalBytes: data?.process?.memoryBytes?.heapTotal ?? 0
+        });
+        setLastUpdatedAt(wallMs);
+        setError(null);
+        hasLoadedRef.current = true;
+        setLoading(false);
+      } catch (err) {
+        if (cancelled || err instanceof DOMException && err.name === "AbortError") {
+          return;
+        }
+        setError(err instanceof Error ? err : new Error(String(err)));
+        if (!hasLoadedRef.current) setLoading(false);
+      }
+    };
+    const runLoop = async () => {
+      if (cancelled) return;
+      await fetchOnce();
+      if (cancelled) return;
+      timeoutId = window.setTimeout(runLoop, delay);
+    };
+    runLoop();
+    return () => {
+      cancelled = true;
+      controller.abort();
+      if (timeoutId !== null) window.clearTimeout(timeoutId);
+    };
+  }, [apiBaseUrl, sandboxId, token, enabled, intervalMs]);
+  return { metrics, loading, error, lastUpdatedAt };
+}
+
+// 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 {
+  useSandboxMetrics,
+  useSessions,
+  useCreateSession,
+  useDeleteSession,
+  useRenameSession,
+  RealtimeSessionRegistry,
+  createAuthFetcher,
+  useApiKey,
+  useAuth,
+  useAutoScroll,
+  useDropdownMenu,
+  useLiveTime,
+  useRealtimeSession,
+  useRunCollapseState,
+  useRunGroups,
+  useSSEStream,
+  useSdkSession,
+  useToolCallStream
+};