@app-studio/web 0.9.15 → 0.9.17

package/dist/components/adk/AgentSession/AgentSession/AgentSession.style.d.ts

@@ -0,0 +1,105 @@
+import { ViewProps } from 'app-studio';
+/**
+ * Default styles for AgentSession component
+ * Following the app-studio design system with 4px grid, Inter/Geist fonts, and neutral palette
+ */
+export declare const DefaultAgentSessionStyles: {
+    container: ViewProps;
+    header: ViewProps;
+    sessionList: ViewProps;
+    sessionItem: ViewProps;
+    activeSessionItem: ViewProps;
+    compactSessionItem: ViewProps;
+    sessionInfo: ViewProps;
+    sessionTitle: ViewProps;
+    sessionDescription: ViewProps;
+    sessionMeta: ViewProps;
+    sessionActions: ViewProps;
+    actionButton: ViewProps;
+    deleteButton: ViewProps;
+    exportButton: ViewProps;
+    importButton: ViewProps;
+    emptyState: ViewProps;
+    loadingState: ViewProps;
+    errorState: ViewProps;
+    searchInput: ViewProps;
+    filterContainer: ViewProps;
+    filterGroup: ViewProps;
+    filterLabel: ViewProps;
+    tagContainer: ViewProps;
+    tag: ViewProps;
+    statusIndicator: ViewProps;
+    activeStatus: ViewProps;
+    inactiveStatus: ViewProps;
+    errorStatus: ViewProps;
+};
+/**
+ * Size variants for AgentSession
+ */
+export declare const AgentSessionSizes: {
+    sm: {
+        container: {
+            height: string;
+        };
+        sessionList: {
+            minHeight: string;
+        };
+    };
+    md: {
+        container: {
+            height: string;
+        };
+        sessionList: {
+            minHeight: string;
+        };
+    };
+    lg: {
+        container: {
+            height: string;
+        };
+        sessionList: {
+            minHeight: string;
+        };
+    };
+    xl: {
+        container: {
+            height: string;
+        };
+        sessionList: {
+            minHeight: string;
+        };
+    };
+};
+/**
+ * Theme variants for AgentSession
+ */
+export declare const AgentSessionThemes: {
+    light: {
+        container: {
+            backgroundColor: string;
+        };
+        header: {
+            backgroundColor: string;
+        };
+        sessionList: {
+            backgroundColor: string;
+        };
+        sessionActions: {
+            backgroundColor: string;
+        };
+    };
+    dark: {
+        container: {
+            backgroundColor: string;
+        };
+        header: {
+            backgroundColor: string;
+        };
+        sessionList: {
+            backgroundColor: string;
+        };
+        sessionActions: {
+            backgroundColor: string;
+        };
+    };
+};

package/dist/components/adk/AgentSession/AgentSession/AgentSession.view.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AgentSessionProps } from './AgentSession.props';
+import { useAgentSession } from './AgentSession.state';
+export interface AgentSessionViewProps extends AgentSessionProps, ReturnType<typeof useAgentSession> {
+}
+/**
+ * AgentSession View Component
+ *
+ * Renders the complete session management interface with session list, actions, and filters
+ */
+declare const AgentSessionView: React.FC<AgentSessionViewProps>;
+export default AgentSessionView;

package/dist/components/adk/AgentSession/AgentSession/SessionActions.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { AgentSession } from './AgentSession.props';
+export interface SessionActionsProps {
+    enableImport?: boolean;
+    enableExport?: boolean;
+    selectedSession?: AgentSession | null;
+    onImport: () => void;
+    onExport: (sessionId: string) => void;
+    views?: {
+        container?: any;
+        importButton?: any;
+        exportButton?: any;
+    };
+}
+/**
+ * SessionActions Component
+ *
+ * Renders action buttons for session management (import, export, etc.)
+ */
+export declare const SessionActions: React.FC<SessionActionsProps>;

package/dist/components/adk/AgentSession/AgentSession/SessionFilters.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SessionFilters as SessionFiltersType, SessionSortOptions } from './AgentSession.props';
+export interface SessionFiltersProps {
+    filters: SessionFiltersType;
+    sortOptions: SessionSortOptions;
+    onFiltersChange: (filters: SessionFiltersType) => void;
+    onSortChange: (sortOptions: SessionSortOptions) => void;
+}
+/**
+ * SessionFilters Component
+ *
+ * Renders filter and sort controls for the session list
+ */
+export declare const SessionFilters: React.FC<SessionFiltersProps>;

package/dist/components/adk/AgentSession/AgentSession/SessionListItem.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { AgentSession } from './AgentSession.props';
+export interface SessionListItemProps {
+    session: AgentSession;
+    isSelected: boolean;
+    compactMode?: boolean;
+    showInfo?: boolean;
+    enableDelete?: boolean;
+    enableExport?: boolean;
+    onSelect: () => void;
+    onDelete: () => void;
+    onExport: () => void;
+    formatDate: (timestamp: number) => string;
+    views?: {
+        container?: any;
+        info?: any;
+        deleteButton?: any;
+        exportButton?: any;
+    };
+}
+/**
+ * SessionListItem Component
+ *
+ * Renders individual session items in the session list
+ */
+export declare const SessionListItem: React.FC<SessionListItemProps>;

package/dist/components/adk/AgentSession/AgentSession.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { AgentSessionProps } from './AgentSession/AgentSession.props';
+/**
+ * AgentSession Component
+ *
+ * A comprehensive session management component for ADK agents.
+ * Handles session creation, listing, selection, deletion, and state management.
+ *
+ * @example
+ * ```tsx
+ * <AgentSession
+ *   appName="my-agent"
+ *   userId="user123"
+ *   onSessionSelect={(session) => console.log('Selected:', session)}
+ *   onSessionCreate={(session) => console.log('Created:', session)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom styling and features
+ * <AgentSession
+ *   appName="my-agent"
+ *   userId="user123"
+ *   showSessionHistory={true}
+ *   enableSessionImport={true}
+ *   enableSessionExport={true}
+ *   maxSessions={50}
+ *   autoRefresh={true}
+ *   refreshInterval={30000}
+ *   views={{
+ *     container: { backgroundColor: 'color.gray.50' },
+ *     sessionList: { maxHeight: '400px' },
+ *     sessionItem: { borderRadius: '8px' }
+ *   }}
+ * />
+ * ```
+ */
+declare const AgentSession: React.FC<AgentSessionProps>;
+export default AgentSession;
+export { AgentSession };
+export type { AgentSessionProps };

package/dist/components/adk/AgentSession/examples/default.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+/**
+ * Default AgentSession Example
+ *
+ * Demonstrates basic usage of the AgentSession component
+ */
+export declare const DefaultDemo: () => React.JSX.Element;
+/**
+ * Compact AgentSession Example
+ *
+ * Shows the component in compact mode
+ */
+export declare const CompactDemo: () => React.JSX.Element;
+/**
+ * Customized AgentSession Example
+ *
+ * Shows advanced customization options
+ */
+export declare const CustomizedDemo: () => React.JSX.Element;
+/**
+ * Session with Mock Data Example
+ *
+ * Demonstrates the component with initial session data
+ */
+export declare const MockDataDemo: () => React.JSX.Element;
+/**
+ * Session Management Features Example
+ *
+ * Demonstrates import/export and advanced features
+ */
+export declare const FeaturesDemo: () => React.JSX.Element;

package/dist/components/adk/AgentTrace/AgentTrace/AgentTrace.props.d.ts

@@ -0,0 +1,159 @@
+import { ViewProps } from 'app-studio';
+/**
+ * Core ADK Trace Types
+ */
+export interface TraceEvent {
+    id: string;
+    sessionId: string;
+    type: 'llm_request' | 'llm_response' | 'function_call' | 'function_response' | 'user_input' | 'agent_output' | 'error' | 'system';
+    timestamp: number;
+    duration?: number;
+    data: any;
+    metadata?: {
+        title?: string;
+        description?: string;
+        level?: 'info' | 'warning' | 'error' | 'debug';
+        tags?: string[];
+    };
+    parentId?: string;
+    children?: TraceEvent[];
+    attributes?: Record<string, any>;
+}
+export interface TraceSpan {
+    id: string;
+    name: string;
+    startTime: number;
+    endTime?: number;
+    duration?: number;
+    status: 'running' | 'completed' | 'error' | 'cancelled';
+    events: TraceEvent[];
+    attributes: Record<string, any>;
+    parentId?: string;
+    children?: TraceSpan[];
+}
+export interface TraceMetrics {
+    totalEvents: number;
+    totalDuration: number;
+    averageResponseTime: number;
+    errorCount: number;
+    successCount: number;
+    functionCallCount: number;
+    llmRequestCount: number;
+    eventsByType: Record<string, number>;
+    performanceMetrics: {
+        p50: number;
+        p90: number;
+        p95: number;
+        p99: number;
+    };
+}
+export interface TraceFilter {
+    eventTypes?: string[];
+    timeRange?: {
+        start: Date;
+        end: Date;
+    };
+    searchQuery?: string;
+    level?: ('info' | 'warning' | 'error' | 'debug')[];
+    tags?: string[];
+    minDuration?: number;
+    maxDuration?: number;
+}
+/**
+ * Component View Customization
+ */
+export interface AgentTraceViews {
+    container?: ViewProps;
+    header?: ViewProps;
+    timeline?: ViewProps;
+    eventList?: ViewProps;
+    eventItem?: ViewProps;
+    selectedEventItem?: ViewProps;
+    metrics?: ViewProps;
+    filters?: ViewProps;
+    visualization?: ViewProps;
+    exportButton?: ViewProps;
+    refreshButton?: ViewProps;
+    searchInput?: ViewProps;
+    emptyState?: ViewProps;
+    loadingState?: ViewProps;
+    errorState?: ViewProps;
+}
+/**
+ * Event Handlers
+ */
+export interface AgentTraceEventHandlers {
+    onEventSelect?: (event: TraceEvent) => void;
+    onSpanSelect?: (span: TraceSpan) => void;
+    onFilterChange?: (filter: TraceFilter) => void;
+    onExport?: (format: 'json' | 'csv' | 'svg') => void;
+    onRefresh?: () => void;
+    onError?: (error: Error) => void;
+}
+/**
+ * Visualization Options
+ */
+export declare type VisualizationType = 'timeline' | 'tree' | 'graph' | 'table' | 'flamegraph';
+export interface VisualizationConfig {
+    type: VisualizationType;
+    showDuration?: boolean;
+    showMetadata?: boolean;
+    groupBy?: 'type' | 'level' | 'parent' | 'none';
+    sortBy?: 'timestamp' | 'duration' | 'type' | 'name';
+    sortDirection?: 'asc' | 'desc';
+    maxDepth?: number;
+    collapsible?: boolean;
+}
+/**
+ * Main AgentTrace Props Interface
+ */
+export interface AgentTraceProps extends ViewProps, AgentTraceEventHandlers {
+    sessionId: string;
+    userId: string;
+    appName: string;
+    apiBaseUrl?: string;
+    showTimeline?: boolean;
+    showMetrics?: boolean;
+    showVisualization?: boolean;
+    enableFiltering?: boolean;
+    enableExport?: boolean;
+    enableSearch?: boolean;
+    enableAutoRefresh?: boolean;
+    visualizationType?: VisualizationType;
+    visualizationConfig?: VisualizationConfig;
+    maxEvents?: number;
+    refreshInterval?: number;
+    showEventDetails?: boolean;
+    showPerformanceMetrics?: boolean;
+    compactMode?: boolean;
+    views?: AgentTraceViews;
+    initialEvents?: TraceEvent[];
+    initialFilter?: TraceFilter;
+    selectedEventId?: string;
+    enableRealTimeUpdates?: boolean;
+    enableEventGrouping?: boolean;
+    enableSpanVisualization?: boolean;
+    ariaLabel?: string;
+    ariaDescribedBy?: string;
+}
+/**
+ * Export Formats
+ */
+export interface TraceExportOptions {
+    format: 'json' | 'csv' | 'svg' | 'png';
+    includeMetadata?: boolean;
+    includeMetrics?: boolean;
+    timeRange?: {
+        start: Date;
+        end: Date;
+    };
+    eventTypes?: string[];
+}
+/**
+ * Real-time Update Types
+ */
+export interface TraceUpdate {
+    type: 'event_added' | 'event_updated' | 'span_completed' | 'metrics_updated';
+    data: TraceEvent | TraceSpan | TraceMetrics;
+    timestamp: number;
+}

package/dist/components/adk/AgentTrace/AgentTrace/AgentTrace.state.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { AgentTraceProps, TraceEvent, TraceSpan, TraceMetrics, TraceFilter, TraceExportOptions, VisualizationType } from './AgentTrace.props';
+/**
+ * Custom hook for managing AgentTrace state and operations
+ */
+export declare const useAgentTrace: (props: AgentTraceProps) => {
+    events: TraceEvent[];
+    spans: TraceSpan[];
+    selectedEvent: TraceEvent | null;
+    selectedSpan: TraceSpan | null;
+    metrics: TraceMetrics | null;
+    isLoading: boolean;
+    error: string | null;
+    filter: TraceFilter;
+    searchQuery: string;
+    currentVisualization: VisualizationType;
+    fetchTraceEvents: () => Promise<void>;
+    fetchTraceSpans: () => Promise<void>;
+    selectEvent: (eventId: string) => void;
+    selectSpan: (spanId: string) => void;
+    updateFilter: (newFilter: TraceFilter) => void;
+    exportTrace: (options: TraceExportOptions) => Promise<void>;
+    setSearchQuery: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setCurrentVisualization: import("react").Dispatch<import("react").SetStateAction<VisualizationType>>;
+    setError: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    filteredEvents: TraceEvent[];
+};

package/dist/components/adk/AgentTrace/AgentTrace/AgentTrace.style.d.ts

@@ -0,0 +1,146 @@
+import { ViewProps } from 'app-studio';
+/**
+ * Default styles for AgentTrace component
+ * Following the app-studio design system with 4px grid, Inter/Geist fonts, and neutral palette
+ */
+export declare const DefaultAgentTraceStyles: {
+    container: ViewProps;
+    header: ViewProps;
+    timeline: ViewProps;
+    eventList: ViewProps;
+    eventItem: ViewProps;
+    selectedEventItem: ViewProps;
+    eventHeader: ViewProps;
+    eventType: ViewProps;
+    eventTypeRequest: ViewProps;
+    eventTypeResponse: ViewProps;
+    eventTypeError: ViewProps;
+    eventTypeFunction: ViewProps;
+    eventTypeSystem: ViewProps;
+    eventContent: ViewProps;
+    eventMetadata: ViewProps;
+    eventDuration: ViewProps;
+    eventTimestamp: ViewProps;
+    metrics: ViewProps;
+    metricsGrid: ViewProps;
+    metricCard: ViewProps;
+    metricValue: ViewProps;
+    metricLabel: ViewProps;
+    visualization: ViewProps;
+    timelineContainer: ViewProps;
+    timelineAxis: ViewProps;
+    timelineEvent: ViewProps;
+    timelineSpan: ViewProps;
+    filters: ViewProps;
+    filterGroup: ViewProps;
+    filterLabel: ViewProps;
+    tagContainer: ViewProps;
+    tag: ViewProps;
+    emptyState: ViewProps;
+    loadingState: ViewProps;
+    errorState: ViewProps;
+    searchInput: ViewProps;
+    exportButton: ViewProps;
+    refreshButton: ViewProps;
+};
+/**
+ * Event type color mapping
+ */
+export declare const EventTypeColors: {
+    llm_request: string;
+    llm_response: string;
+    function_call: string;
+    function_response: string;
+    user_input: string;
+    agent_output: string;
+    error: string;
+    system: string;
+};
+/**
+ * Size variants for AgentTrace
+ */
+export declare const AgentTraceSizes: {
+    sm: {
+        container: {
+            height: string;
+        };
+        timeline: {
+            height: string;
+        };
+        eventList: {
+            minHeight: string;
+        };
+    };
+    md: {
+        container: {
+            height: string;
+        };
+        timeline: {
+            height: string;
+        };
+        eventList: {
+            minHeight: string;
+        };
+    };
+    lg: {
+        container: {
+            height: string;
+        };
+        timeline: {
+            height: string;
+        };
+        eventList: {
+            minHeight: string;
+        };
+    };
+    xl: {
+        container: {
+            height: string;
+        };
+        timeline: {
+            height: string;
+        };
+        eventList: {
+            minHeight: string;
+        };
+    };
+};
+/**
+ * Theme variants for AgentTrace
+ */
+export declare const AgentTraceThemes: {
+    light: {
+        container: {
+            backgroundColor: string;
+        };
+        header: {
+            backgroundColor: string;
+        };
+        timeline: {
+            backgroundColor: string;
+        };
+        eventList: {
+            backgroundColor: string;
+        };
+        metrics: {
+            backgroundColor: string;
+        };
+    };
+    dark: {
+        container: {
+            backgroundColor: string;
+        };
+        header: {
+            backgroundColor: string;
+        };
+        timeline: {
+            backgroundColor: string;
+        };
+        eventList: {
+            backgroundColor: string;
+        };
+        metrics: {
+            backgroundColor: string;
+        };
+    };
+};

package/dist/components/adk/AgentTrace/AgentTrace/AgentTrace.view.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AgentTraceProps } from './AgentTrace.props';
+import { useAgentTrace } from './AgentTrace.state';
+export interface AgentTraceViewProps extends Omit<AgentTraceProps, 'filter'>, ReturnType<typeof useAgentTrace> {
+}
+/**
+ * AgentTrace View Component
+ *
+ * Renders the complete trace visualization interface with timeline, events, and metrics
+ */
+declare const AgentTraceView: React.FC<AgentTraceViewProps>;
+export default AgentTraceView;

package/dist/components/adk/AgentTrace/AgentTrace/TraceEventList.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TraceEvent } from './AgentTrace.props';
+export interface TraceEventListProps {
+    events: TraceEvent[];
+    selectedEvent?: TraceEvent | null;
+    onEventSelect: (eventId: string) => void;
+    showDetails?: boolean;
+    compactMode?: boolean;
+    views?: {
+        container?: any;
+        eventItem?: any;
+        selectedEventItem?: any;
+    };
+}
+/**
+ * TraceEventList Component
+ *
+ * Renders a list of trace events with selection and detail display
+ */
+export declare const TraceEventList: React.FC<TraceEventListProps>;

package/dist/components/adk/AgentTrace/AgentTrace/TraceFilters.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TraceFilter } from './AgentTrace.props';
+export interface TraceFiltersProps {
+    filter: TraceFilter;
+    onFilterChange: (filter: TraceFilter) => void;
+    eventTypes: string[];
+}
+/**
+ * TraceFilters Component
+ *
+ * Renders filter controls for trace events
+ */
+export declare const TraceFilters: React.FC<TraceFiltersProps>;

package/dist/components/adk/AgentTrace/AgentTrace/TraceMetrics.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TraceMetrics as TraceMetricsType } from './AgentTrace.props';
+export interface TraceMetricsProps {
+    metrics: TraceMetricsType;
+    showPerformanceMetrics?: boolean;
+    compactMode?: boolean;
+    views?: {
+        container?: any;
+    };
+}
+/**
+ * TraceMetrics Component
+ *
+ * Displays performance metrics and statistics for trace events
+ */
+export declare const TraceMetrics: React.FC<TraceMetricsProps>;

package/dist/components/adk/AgentTrace/AgentTrace/TraceTimeline.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TraceEvent, TraceSpan } from './AgentTrace.props';
+export interface TraceTimelineProps {
+    events: TraceEvent[];
+    spans: TraceSpan[];
+    selectedEvent?: TraceEvent | null;
+    selectedSpan?: TraceSpan | null;
+    onEventSelect: (eventId: string) => void;
+    onSpanSelect: (spanId: string) => void;
+    views?: {
+        container?: any;
+    };
+}
+/**
+ * TraceTimeline Component
+ *
+ * Renders a timeline visualization of trace events and spans
+ */
+export declare const TraceTimeline: React.FC<TraceTimelineProps>;

package/dist/components/adk/AgentTrace/AgentTrace/TraceVisualization.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TraceEvent, TraceSpan, VisualizationType } from './AgentTrace.props';
+export interface TraceVisualizationProps {
+    events: TraceEvent[];
+    spans: TraceSpan[];
+    selectedEvent?: TraceEvent | null;
+    visualizationType: VisualizationType;
+    onVisualizationChange: (type: VisualizationType) => void;
+    onEventSelect: (eventId: string) => void;
+    views?: {
+        container?: any;
+    };
+}
+/**
+ * TraceVisualization Component
+ *
+ * Renders different visualization types for trace data
+ */
+export declare const TraceVisualization: React.FC<TraceVisualizationProps>;