@agentxjs/ui 0.0.1

package/dist/components/element/TokenUsagePie.d.ts

@@ -0,0 +1,33 @@
+export interface TokenUsagePieProps {
+    /**
+     * Number of tokens used
+     */
+    used: number;
+    /**
+     * Total token limit
+     */
+    total: number;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * TokenUsagePie - Display token usage as a circular progress indicator
+ *
+ * Single Responsibility: Visualize token usage percentage with color coding
+ *
+ * Color coding (following design system):
+ * - Blue (<50%): Normal usage - computational color
+ * - Amber (50-75%): Warning - generative/attention color
+ * - Red (>75%): Critical - destructive color
+ *
+ * Returns null if invalid data
+ *
+ * @example
+ * ```tsx
+ * <TokenUsagePie used={5000} total={8000} />
+ * <TokenUsagePie used={120000} total={200000} />
+ * ```
+ */
+export declare function TokenUsagePie({ used, total, className }: TokenUsagePieProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/element/index.d.ts

@@ -0,0 +1,18 @@
+export { ActionBar } from './ActionBar';
+export { AgentLogo } from './AgentLogo';
+export { AppHeader } from './AppHeader';
+export { Badge } from './Badge';
+export { Button } from './Button';
+export { EmptyState } from './EmptyState';
+export { ImageAttachment } from './ImageAttachment';
+export { Input } from './Input';
+export { ListItem } from './ListItem';
+export { LoadingState } from './LoadingState';
+export { MessageAvatar } from './MessageAvatar';
+export { PageHeader } from './PageHeader';
+export { Popover } from './Popover';
+export { ScrollArea } from './ScrollArea';
+export { SearchInput } from './SearchInput';
+export { TabNavigation } from './TabNavigation';
+export { TimeAgo } from './TimeAgo';
+export { TokenUsagePie } from './TokenUsagePie';

package/dist/components/input/InputBox.d.ts

@@ -0,0 +1,43 @@
+/**
+ * InputBox - Full-height textarea with send button
+ *
+ * Pure UI component for text input that fills available space.
+ *
+ * Features:
+ * - Full-height textarea (fills container)
+ * - Enter to send, Shift+Enter for new line
+ * - Send button at bottom right
+ * - Minimal design, no borders or decorations
+ *
+ * @example
+ * ```tsx
+ * <InputBox
+ *   onSend={(text) => console.log('Send:', text)}
+ *   disabled={isLoading}
+ *   placeholder="Type a message..."
+ * />
+ * ```
+ */
+export interface InputBoxProps {
+    /**
+     * Callback when user sends a message
+     */
+    onSend: (text: string) => void;
+    /**
+     * Whether the input is disabled (e.g., while AI is responding)
+     */
+    disabled?: boolean;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Initial value
+     */
+    defaultValue?: string;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare function InputBox({ onSend, disabled, placeholder, defaultValue, className, }: InputBoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/input/index.d.ts

@@ -0,0 +1 @@
+export { InputBox, type InputBoxProps } from './InputBox';

package/dist/components/layout/ActivityBar.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+export interface ActivityBarItem {
+    /**
+     * Unique identifier
+     */
+    id: string;
+    /**
+     * Icon element
+     */
+    icon: React.ReactNode;
+    /**
+     * Tooltip text
+     */
+    label: string;
+    /**
+     * Badge content (e.g., notification count)
+     */
+    badge?: string | number;
+}
+export interface ActivityBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Top activity bar items (main features)
+     */
+    items: ActivityBarItem[];
+    /**
+     * Bottom activity bar items (settings, account, etc.)
+     */
+    bottomItems?: ActivityBarItem[];
+    /**
+     * Currently active item ID
+     */
+    activeId?: string;
+    /**
+     * Callback when item is clicked
+     */
+    onItemClick?: (id: string) => void;
+    /**
+     * Position of the activity bar
+     * @default 'left'
+     */
+    position?: "left" | "right";
+}
+/**
+ * ActivityBar - VSCode-style activity bar with icon buttons
+ *
+ * A vertical bar with icon buttons, typically used for switching between
+ * different views/panels. Inspired by VSCode's activity bar.
+ *
+ * @example
+ * ```tsx
+ * <ActivityBar
+ *   items={[
+ *     { id: 'explorer', icon: <FileIcon />, label: 'Explorer' },
+ *     { id: 'search', icon: <SearchIcon />, label: 'Search' },
+ *     { id: 'git', icon: <GitIcon />, label: 'Git', badge: 3 },
+ *   ]}
+ *   activeId="explorer"
+ *   onItemClick={setActiveView}
+ * />
+ * ```
+ */
+export declare const ActivityBar: React.ForwardRefExoticComponent<ActivityBarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/Header.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Left section content (e.g., logo, title)
+     */
+    left?: React.ReactNode;
+    /**
+     * Center section content (e.g., search bar, tabs)
+     */
+    center?: React.ReactNode;
+    /**
+     * Right section content (e.g., user menu, notifications)
+     */
+    right?: React.ReactNode;
+    /**
+     * Header height in pixels
+     * @default 56
+     */
+    height?: number;
+}
+/**
+ * Header - Application-level top header bar
+ *
+ * A fixed-height header that spans the entire width of the application.
+ * Use this for global navigation, branding, search, and user controls.
+ *
+ * @example
+ * ```tsx
+ * <Header
+ *   left={<Logo />}
+ *   center={<SearchBar />}
+ *   right={<UserMenu />}
+ * />
+ * ```
+ */
+export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/MainContent.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export interface MainContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Main content
+     */
+    children: React.ReactNode;
+}
+/**
+ * MainContent - Main content area container
+ *
+ * A semantic container for the main content area with consistent styling.
+ * This is where your primary content (chat, editor, dashboard) lives.
+ *
+ * @example
+ * ```tsx
+ * <MainContent>
+ *   <ChatInterface />
+ * </MainContent>
+ * ```
+ */
+export declare const MainContent: React.ForwardRefExoticComponent<MainContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/Panel.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+export interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Initial height in pixels
+     * @default 200
+     */
+    height?: number;
+    /**
+     * Minimum height in pixels
+     * @default 100
+     */
+    minHeight?: number;
+    /**
+     * Maximum height in pixels
+     * @default 500
+     */
+    maxHeight?: number;
+    /**
+     * Panel content
+     */
+    children: React.ReactNode;
+}
+/**
+ * Panel - Resizable bottom panel container
+ *
+ * A container for bottom panel content (terminal, output, logs, etc.)
+ * with consistent styling. Should be used with Allotment (vertical)
+ * for resizing functionality.
+ *
+ * @example
+ * ```tsx
+ * <Allotment vertical>
+ *   <Allotment.Pane>
+ *     <MainContent />
+ *   </Allotment.Pane>
+ *   <Allotment.Pane minSize={100} maxSize={500} preferredSize={200}>
+ *     <Panel>
+ *       <Terminal />
+ *     </Panel>
+ *   </Allotment.Pane>
+ * </Allotment>
+ * ```
+ */
+export declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/RightSidebar.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+export interface RightSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Initial width in pixels
+     * @default 300
+     */
+    width?: number;
+    /**
+     * Minimum width in pixels
+     * @default 200
+     */
+    minWidth?: number;
+    /**
+     * Maximum width in pixels
+     * @default 600
+     */
+    maxWidth?: number;
+    /**
+     * Sidebar content
+     */
+    children: React.ReactNode;
+}
+/**
+ * RightSidebar - Resizable right sidebar container
+ *
+ * A container for right sidebar content (outline, properties, preview, etc.)
+ * with consistent styling. Should be used with Allotment for resizing functionality.
+ *
+ * @example
+ * ```tsx
+ * <Allotment>
+ *   <Allotment.Pane>
+ *     <MainContent />
+ *   </Allotment.Pane>
+ *   <Allotment.Pane minSize={200} maxSize={600} preferredSize={300}>
+ *     <RightSidebar>
+ *       <Outline />
+ *     </RightSidebar>
+ *   </Allotment.Pane>
+ * </Allotment>
+ * ```
+ */
+export declare const RightSidebar: React.ForwardRefExoticComponent<RightSidebarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/Sidebar.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Position of the sidebar
+     * @default 'left'
+     */
+    position?: "left" | "right";
+    /**
+     * Sidebar content
+     */
+    children: React.ReactNode;
+}
+/**
+ * Sidebar - Sidebar container
+ *
+ * A container for sidebar content with consistent styling.
+ * Should be used with Allotment for resizing functionality.
+ * Width is controlled by Allotment.Pane, not by this component.
+ *
+ * @example
+ * ```tsx
+ * <Allotment>
+ *   <Allotment.Pane minSize={200} maxSize={600} preferredSize={256}>
+ *     <Sidebar>
+ *       <SessionList sessions={sessions} />
+ *     </Sidebar>
+ *   </Allotment.Pane>
+ *   <Allotment.Pane>
+ *     <MainContent />
+ *   </Allotment.Pane>
+ * </Allotment>
+ * ```
+ */
+export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/StatusBar.d.ts

@@ -0,0 +1,66 @@
+import * as React from "react";
+export interface StatusBarItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Optional icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * Item content
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the item is clickable
+     */
+    clickable?: boolean;
+}
+/**
+ * StatusBarItem - Individual item in the status bar
+ */
+export declare const StatusBarItem: React.ForwardRefExoticComponent<StatusBarItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface StatusBarSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Alignment of items in this section
+     * @default 'left'
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Section content
+     */
+    children: React.ReactNode;
+}
+/**
+ * StatusBarSection - Group of items in the status bar
+ */
+export declare const StatusBarSection: React.ForwardRefExoticComponent<StatusBarSectionProps & React.RefAttributes<HTMLDivElement>>;
+export interface StatusBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Status bar height in pixels
+     * @default 24
+     */
+    height?: number;
+    /**
+     * Status bar content
+     */
+    children: React.ReactNode;
+}
+/**
+ * StatusBar - VSCode-style bottom status bar
+ *
+ * A fixed-height status bar that displays global application state.
+ * Use StatusBarSection to organize items with different alignments.
+ *
+ * @example
+ * ```tsx
+ * <StatusBar>
+ *   <StatusBarSection align="left">
+ *     <StatusBarItem icon={<GitBranch />}>main</StatusBarItem>
+ *     <StatusBarItem icon={<AlertCircle />}>0 errors</StatusBarItem>
+ *   </StatusBarSection>
+ *   <StatusBarSection align="right">
+ *     <StatusBarItem>Line 42, Col 8</StatusBarItem>
+ *     <StatusBarItem>UTF-8</StatusBarItem>
+ *   </StatusBarSection>
+ * </StatusBar>
+ * ```
+ */
+export declare const StatusBar: React.ForwardRefExoticComponent<StatusBarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/index.d.ts

@@ -0,0 +1,7 @@
+export { ActivityBar } from './ActivityBar';
+export { Header } from './Header';
+export { MainContent } from './MainContent';
+export { Panel } from './Panel';
+export { RightSidebar } from './RightSidebar';
+export { Sidebar } from './Sidebar';
+export { StatusBar } from './StatusBar';

package/dist/components/message/MessageList.d.ts

@@ -0,0 +1,16 @@
+import { Message } from '@agentxjs/types';
+export interface MessageListProps {
+    /**
+     * Array of messages to display
+     */
+    messages: Message[];
+    /**
+     * Current streaming text (if any)
+     */
+    streamingText?: string;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+export declare function MessageList({ messages, streamingText, className }: MessageListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/message/StatusIndicator.d.ts

@@ -0,0 +1,28 @@
+import { AgentState } from '@agentxjs/types';
+export interface StatusIndicatorProps {
+    /**
+     * Current agent state
+     */
+    status: AgentState;
+    /**
+     * Whether the agent is currently processing
+     */
+    isLoading: boolean;
+    /**
+     * Callback to abort/interrupt the current operation
+     */
+    onAbort?: () => void;
+    /**
+     * Whether to show the abort button
+     * @default true
+     */
+    showAbortButton?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+/**
+ * StatusIndicator - Displays status with animations
+ */
+export declare function StatusIndicator({ status, isLoading, onAbort, showAbortButton, className, }: StatusIndicatorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/message/index.d.ts

@@ -0,0 +1,4 @@
+export { MessageList, type MessageListProps } from './MessageList';
+export { StatusIndicator, type StatusIndicatorProps } from './StatusIndicator';
+export * from './items';
+export * from './parts';

package/dist/components/message/items/AssistantMessage.d.ts

@@ -0,0 +1,33 @@
+import { AssistantMessage as AssistantMessageType } from '@agentxjs/types';
+export interface AssistantMessageProps {
+    /**
+     * Assistant message data
+     */
+    message: AssistantMessageType;
+    /**
+     * Whether this message is currently streaming
+     */
+    isStreaming?: boolean;
+}
+/**
+ * AssistantMessage - Display an AI assistant message
+ *
+ * Features:
+ * - AI avatar (blue color)
+ * - Text content rendering
+ * - Thinking process (collapsible)
+ * - Tool calls display
+ * - File attachments
+ * - Streaming support
+ *
+ * @example
+ * ```tsx
+ * <AssistantMessage message={{
+ *   id: '2',
+ *   role: 'assistant',
+ *   content: 'Here is the answer...',
+ *   timestamp: Date.now()
+ * }} />
+ * ```
+ */
+export declare function AssistantMessage({ message, isStreaming }: AssistantMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/message/items/ErrorAlert.d.ts

@@ -0,0 +1,33 @@
+import { AgentError } from '@agentxjs/types';
+export interface ErrorAlertProps {
+    /**
+     * The AgentError to display
+     */
+    error: AgentError;
+    /**
+     * Whether to show detailed error information
+     * @default false
+     */
+    showDetails?: boolean;
+}
+/**
+ * ErrorAlert - Display an agent error
+ *
+ * Features:
+ * - Error severity visualization (fatal/error/warning)
+ * - Error category badge (driver/llm/network/validation/system)
+ * - Error code and message
+ * - Optional details expansion
+ *
+ * @example
+ * ```tsx
+ * <ErrorAlert error={{
+ *   category: 'llm',
+ *   code: 'RATE_LIMITED',
+ *   message: 'Rate limit exceeded',
+ *   severity: 'error',
+ *   recoverable: true,
+ * }} />
+ * ```
+ */
+export declare function ErrorAlert({ error, showDetails }: ErrorAlertProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/message/items/SystemMessage.d.ts

@@ -0,0 +1,25 @@
+import { SystemMessage as SystemMessageType } from '@agentxjs/types';
+export interface SystemMessageProps {
+    /**
+     * System message data
+     */
+    message: SystemMessageType;
+}
+/**
+ * SystemMessage - Display a system message
+ *
+ * Features:
+ * - System avatar (neutral gray)
+ * - System prompt or notification display
+ *
+ * @example
+ * ```tsx
+ * <SystemMessage message={{
+ *   id: '0',
+ *   role: 'system',
+ *   content: 'You are a helpful assistant',
+ *   timestamp: Date.now()
+ * }} />
+ * ```
+ */
+export declare function SystemMessage({ message }: SystemMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/message/items/ToolCallMessage.d.ts

@@ -0,0 +1,31 @@
+import { ToolCallMessage as ToolCallMessageType } from '@agentxjs/types';
+export interface ToolCallMessageProps {
+    /**
+     * Tool call message data
+     */
+    message: ToolCallMessageType;
+}
+/**
+ * ToolCallMessage - Display AI's request to call a tool
+ *
+ * Features:
+ * - Tool avatar (info blue)
+ * - Tool call display (collapsible)
+ *
+ * @example
+ * ```tsx
+ * <ToolCallMessage message={{
+ *   id: '3',
+ *   role: 'assistant',
+ *   subtype: 'tool-call',
+ *   toolCall: {
+ *     type: 'tool-call',
+ *     id: 'call_123',
+ *     name: 'get_weather',
+ *     input: { location: 'San Francisco' }
+ *   },
+ *   timestamp: Date.now()
+ * }} />
+ * ```
+ */
+export declare function ToolCallMessage({ message }: ToolCallMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/message/items/ToolResultMessage.d.ts

@@ -0,0 +1,33 @@
+import { ToolResultMessage as ToolResultMessageType } from '@agentxjs/types';
+export interface ToolResultMessageProps {
+    /**
+     * Tool result message data
+     */
+    message: ToolResultMessageType;
+}
+/**
+ * ToolResultMessage - Display tool execution result
+ *
+ * Features:
+ * - Tool result avatar (success green)
+ * - Tool result display (collapsible)
+ * - Rich output formatting
+ *
+ * @example
+ * ```tsx
+ * <ToolResultMessage message={{
+ *   id: '4',
+ *   role: 'tool',
+ *   subtype: 'tool-result',
+ *   toolResult: {
+ *     type: 'tool-result',
+ *     id: 'call_123',
+ *     name: 'get_weather',
+ *     output: { type: 'text', value: 'Temperature: 72°F' }
+ *   },
+ *   toolCallId: 'call_123',
+ *   timestamp: Date.now()
+ * }} />
+ * ```
+ */
+export declare function ToolResultMessage({ message }: ToolResultMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/message/items/ToolUseMessage.d.ts

@@ -0,0 +1,30 @@
+import { ToolCallMessage, ToolResultMessage } from '@agentxjs/types';
+export interface ToolUseMessageProps {
+    /**
+     * Tool call message
+     */
+    toolCall: ToolCallMessage;
+    /**
+     * Tool result message (optional - may not have arrived yet)
+     */
+    toolResult?: ToolResultMessage;
+    /**
+     * Whether to show expanded by default
+     */
+    defaultExpanded?: boolean;
+}
+/**
+ * ToolUseMessage - Unified display of tool call + result
+ *
+ * Combines ToolCallMessage and ToolResultMessage into a single visual unit.
+ * Supports streaming: shows "executing" state when result hasn't arrived yet.
+ *
+ * @example
+ * ```tsx
+ * <ToolUseMessage
+ *   toolCall={toolCallMsg}
+ *   toolResult={toolResultMsg}
+ * />
+ * ```
+ */
+export declare function ToolUseMessage({ toolCall, toolResult, defaultExpanded, }: ToolUseMessageProps): import("react/jsx-runtime").JSX.Element;