@elevasis/ui 1.4.0 → 1.6.0

package/dist/components/index.d.ts

@@ -1,2 +1,2048 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MantineSpacing, MantineColor, MantineLoaderComponent, BadgeProps } from '@mantine/core';
+import * as react from 'react';
+import react__default, { ComponentType, ReactNode, CSSProperties, ReactElement } from 'react';
+import { Icon, IconCheck } from '@tabler/icons-react';
+import { Components } from 'react-markdown';
+import { UseFormReturnType } from '@mantine/form';
+import { NodeProps, Node, EdgeProps, Edge } from '@xyflow/react';
+import * as Graph_module_css from '../graph/Graph.module.css';
+export { Graph_module_css as graphStyles };
 
-export { };
+interface EmptyStateProps {
+    /** Icon component to display (e.g., IconKey from @tabler/icons-react) */
+    icon: ComponentType<{
+        size: number;
+        style?: React.CSSProperties;
+    }>;
+    /** Main title text */
+    title: string;
+    /** Description text shown below title */
+    description?: string;
+    /** Optional action button */
+    action?: {
+        label: string;
+        onClick: () => void;
+        icon?: ReactNode;
+    };
+    /** Vertical padding - defaults to 'xl' */
+    py?: MantineSpacing;
+}
+/**
+ * EmptyState - Reusable empty state component for lists and tables
+ *
+ * Consolidates the Center + Stack + Icon + Text pattern used across:
+ * - ApiKeyList.tsx
+ * - CredentialList.tsx
+ * - Various other list components
+ *
+ * @example
+ * ```tsx
+ * <EmptyState
+ *   icon={IconKey}
+ *   title="No API keys yet"
+ *   description="Create your first API key to enable external integrations"
+ *   action={{ label: "Create API Key", onClick: handleCreate }}
+ * />
+ * ```
+ */
+declare function EmptyState({ icon: Icon, title, description, action, py }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+interface TabCountBadgeProps {
+    count: number;
+    isLoading?: boolean;
+}
+/**
+ * A badge that displays a count in tabs with consistent sizing.
+ * Uses a fixed-width container to prevent layout shift when switching
+ * between the loading spinner and the count badge.
+ */
+declare function TabCountBadge({ count, isLoading }: TabCountBadgeProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * TrendIndicator - Reusable component for showing percentage change trends
+ * Displays up/down/flat arrow with colored badge
+ */
+interface TrendIndicatorProps {
+    /** Current value */
+    current: number;
+    /** Previous value to compare against */
+    previous: number;
+    /** Optional formatter for the value (not used in display but kept for API compatibility) */
+    formatter?: (value: number) => string;
+    /** If true, negative change is considered positive (e.g., for costs) */
+    inverse?: boolean;
+}
+/**
+ * Shows a trend indicator with arrow icon and percentage change badge
+ *
+ * @example
+ * // Positive trend (green when going up)
+ * <TrendIndicator current={100} previous={80} />
+ *
+ * @example
+ * // Inverse trend (green when going down, useful for costs)
+ * <TrendIndicator current={100} previous={120} inverse />
+ */
+declare function TrendIndicator({ current, previous, inverse }: TrendIndicatorProps): react_jsx_runtime.JSX.Element;
+
+interface CollapsibleSectionProps {
+    title: string | ReactNode;
+    count?: number;
+    countLabel?: string;
+    children: ReactNode;
+    emptyMessage?: string;
+    defaultExpanded?: boolean;
+    maxHeight?: number;
+}
+/**
+ * Reusable collapsible section with header, badge, and scroll area
+ * Used for expandable content like memory sections, logs, etc.
+ */
+declare function CollapsibleSection({ title, count, countLabel, children, emptyMessage, defaultExpanded, maxHeight }: CollapsibleSectionProps): react_jsx_runtime.JSX.Element;
+
+interface PageTitleCaptionProps {
+    title: string;
+    caption?: string;
+    rightSection?: ReactNode;
+}
+declare const PageTitleCaption: ({ title, caption, rightSection }: PageTitleCaptionProps) => react_jsx_runtime.JSX.Element;
+
+interface StatsCardSkeletonProps {
+    /** Height of the chart skeleton - defaults to 120 */
+    chartHeight?: number;
+    /** Whether to show a chart skeleton - defaults to true */
+    withChart?: boolean;
+    /** Number of stat columns - defaults to 3 */
+    statCount?: 2 | 3;
+}
+/**
+ * StatsCardSkeleton - Loading skeleton for dashboard metric cards
+ *
+ * Consolidates the identical card skeleton pattern used across:
+ * - ExecutionHealthCard.tsx
+ * - CostMetricsCard.tsx
+ * - ThroughputCard.tsx
+ * - BusinessImpactCard.tsx
+ *
+ * @example
+ * ```tsx
+ * if (isLoading) {
+ *   return <StatsCardSkeleton />
+ * }
+ * ```
+ */
+declare function StatsCardSkeleton({ chartHeight, withChart, statCount }: StatsCardSkeletonProps): react_jsx_runtime.JSX.Element;
+interface ListSkeletonProps {
+    /** Number of skeleton rows to show - defaults to 3 */
+    rows?: number;
+    /** Height of each row - defaults to 50 */
+    rowHeight?: number;
+}
+/**
+ * ListSkeleton - Loading skeleton for table/list content
+ *
+ * Consolidates the Stack + Skeleton pattern used across:
+ * - ApiKeyList.tsx
+ * - CredentialList.tsx
+ * - Various other list components
+ *
+ * @example
+ * ```tsx
+ * if (isLoading) {
+ *   return <ListSkeleton rows={5} />
+ * }
+ * ```
+ */
+declare function ListSkeleton({ rows, rowHeight }: ListSkeletonProps): react_jsx_runtime.JSX.Element;
+interface DetailCardSkeletonProps {
+    /** Number of detail rows - defaults to 3 */
+    rows?: number;
+}
+/**
+ * DetailCardSkeleton - Loading skeleton for cards with list of detail items
+ *
+ * Used for cards like CostBreakdownCard that show a list of items
+ *
+ * @example
+ * ```tsx
+ * if (isLoading) {
+ *   return <DetailCardSkeleton rows={4} />
+ * }
+ * ```
+ */
+declare function DetailCardSkeleton({ rows }: DetailCardSkeletonProps): react_jsx_runtime.JSX.Element;
+
+interface NavigationButtonProps {
+    /** Icon component to display */
+    icon: react__default.ComponentType<{
+        size?: number;
+        stroke?: number;
+    }>;
+    /** Button label text */
+    label: string;
+    /** Whether the button is in collapsed state (hides text) */
+    isCollapsed?: boolean;
+    /** Whether this button has sub-items/links */
+    hasSubItems?: boolean;
+    /** Whether sub-items are expanded (controls chevron rotation) */
+    isExpanded?: boolean;
+    /** Whether the icon and text should be styled as active */
+    isActive?: boolean;
+    /** Whether the background should be styled as active */
+    hasActiveBackground?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Additional styles for the button container */
+    style?: react__default.CSSProperties;
+    /** Custom transition duration in ms */
+    transitionDuration?: number;
+}
+declare const NavigationButton: react__default.FC<NavigationButtonProps>;
+
+interface CustomSelectorProps {
+    value: string | null;
+    onChange: (value: string | null) => void;
+    data: {
+        value: string;
+        label: string;
+    }[] | readonly {
+        value: string;
+        label: string;
+    }[];
+    leftSection?: ReactNode;
+    placeholder?: string;
+    w?: number | string;
+    withCheckIcon?: boolean;
+    disabled?: boolean;
+}
+declare function CustomSelector({ value, onChange, data, leftSection, placeholder, w, withCheckIcon, disabled }: CustomSelectorProps): react_jsx_runtime.JSX.Element;
+
+interface APIErrorAlertProps {
+    /**
+     * The error to display. Can be an APIClientError, generic Error, or any unknown value.
+     */
+    error: unknown;
+    /**
+     * Optional title override. If not provided, uses getErrorTitle() based on error code.
+     */
+    title?: string;
+    /**
+     * Whether to show the request ID (if available). Defaults to true.
+     */
+    showRequestId?: boolean;
+    /**
+     * Optional custom icon. Defaults to IconAlertCircle.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Alert color. Defaults to 'red'.
+     */
+    color?: string;
+}
+/**
+ * Alert component for displaying API errors with type-safe error handling.
+ *
+ * Automatically extracts error message, code, and request ID from APIClientError
+ * or falls back to generic Error handling.
+ *
+ * @example
+ * ```tsx
+ * const { data, error } = useQuery(...)
+ *
+ * if (error) {
+ *   return <APIErrorAlert error={error} />
+ * }
+ * ```
+ *
+ * @example With custom title
+ * ```tsx
+ * <APIErrorAlert
+ *   error={error}
+ *   title="Failed to load resources"
+ * />
+ * ```
+ *
+ * @example Without request ID
+ * ```tsx
+ * <APIErrorAlert
+ *   error={error}
+ *   showRequestId={false}
+ * />
+ * ```
+ */
+declare function APIErrorAlert({ error, title, showRequestId, icon, color }: APIErrorAlertProps): react_jsx_runtime.JSX.Element;
+
+interface StatCardBaseProps {
+    /** The label/description text */
+    label: string;
+    /** The value to display (number or formatted string) */
+    value: string | number;
+    /** Tabler icon component */
+    icon: Icon;
+    /** Optional extra content rendered below the label */
+    children?: ReactNode;
+}
+interface StatCardDefaultProps extends StatCardBaseProps {
+    variant?: 'default';
+    /** Theme color for the icon (defaults to theme primary) */
+    color?: MantineColor;
+    isLoading?: never;
+    valueColor?: never;
+}
+interface StatCardHeroProps extends StatCardBaseProps {
+    variant: 'hero';
+    /** Whether data is loading */
+    isLoading?: boolean;
+    /** Custom color for the value text */
+    valueColor?: string;
+    /** Card sizing — 'sm' (default) for compact layouts, 'md' for spacious layouts */
+    size?: 'sm' | 'md';
+    color?: never;
+}
+type StatCardProps = StatCardDefaultProps | StatCardHeroProps;
+/**
+ * StatCard - Stat display card with icon, label, and value.
+ *
+ * Supports two variants:
+ * - `default`: Compact card with ThemeIcon (used in admin overviews)
+ * - `hero`: Glass card with glowing icon ring (used on dashboards)
+ *
+ * @example
+ * ```tsx
+ * // Default variant
+ * <StatCard label="Total Executions" value={150} icon={IconPlayerPlay} color="blue" />
+ *
+ * // Hero variant
+ * <StatCard variant="hero" label="Executions" value={43} icon={IconPlayerPlay} isLoading={false} />
+ * ```
+ */
+declare function StatCard(props: StatCardProps): react_jsx_runtime.JSX.Element;
+/**
+ * StatCardSkeleton - Loading skeleton for StatCard (default variant)
+ */
+declare function StatCardSkeleton(): react_jsx_runtime.JSX.Element;
+
+interface StyledMarkdownProps {
+    /** Markdown content to render */
+    children: string;
+    /** Custom component overrides */
+    components?: Partial<Components>;
+    /** Additional class name */
+    className?: string;
+    /** Inline styles for the wrapper div */
+    style?: React.CSSProperties;
+}
+/**
+ * Styled markdown renderer with Mantine components and syntax highlighting
+ *
+ * Features:
+ * - Colored headings using theme primary color
+ * - Syntax-highlighted code blocks (oneDark theme, no token backgrounds)
+ * - Styled inline code with Mantine Code component
+ * - Styled blockquotes with left border
+ * - Proper list styling
+ *
+ * @example
+ * ```tsx
+ * import { StyledMarkdown } from '@repo/ui'
+ *
+ * <StyledMarkdown>{markdownContent}</StyledMarkdown>
+ * ```
+ */
+declare function StyledMarkdown({ children, components, className, style }: StyledMarkdownProps): react_jsx_runtime.JSX.Element;
+
+interface JsonViewerProps {
+    /** JSON data to display (will be stringified) or pre-formatted JSON string */
+    data: unknown;
+    /** Maximum height with scroll (e.g., '300px'). If not set, expands to content */
+    maxHeight?: string | number;
+    /** Font size override */
+    fontSize?: string | number;
+}
+/**
+ * Syntax-highlighted JSON viewer component
+ *
+ * @example
+ * ```tsx
+ * import { JsonViewer } from '@repo/ui'
+ *
+ * <JsonViewer data={{ foo: 'bar', count: 42 }} />
+ * <JsonViewer data={apiResponse} maxHeight={300} />
+ * ```
+ */
+declare function JsonViewer({ data, maxHeight, fontSize }: JsonViewerProps): react_jsx_runtime.JSX.Element;
+
+interface ContextViewerProps {
+    /** Any JSON-serializable data to display in a human-readable format */
+    data: unknown;
+}
+/**
+ * Auto-formats any JSON context into a human-readable layout.
+ *
+ * - Strings → rendered as markdown (supports formatting, lists, tables)
+ * - Flat key-value objects → labeled field list
+ * - Nested objects → indented subsections with left border
+ * - Arrays → bulleted lists or bordered cards
+ * - null/undefined/boolean/number → inline text
+ *
+ * No display configuration needed — the component infers layout from data shape.
+ */
+declare function ContextViewer({ data }: ContextViewerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Workflow-specific logging types and utilities
+ */
+
+interface WorkflowExecutionContext {
+    type: 'workflow';
+    contextType: 'workflow-execution';
+    executionId: string;
+    workflowId: string;
+    workflowName?: string;
+    organizationId: string;
+    executionPath?: string[];
+}
+interface WorkflowFailureContext {
+    type: 'workflow';
+    contextType: 'workflow-failure';
+    executionId: string;
+    workflowId: string;
+    error: string;
+}
+interface StepStartedContext {
+    type: 'workflow';
+    contextType: 'step-started';
+    stepId: string;
+    stepStatus: 'started';
+    input: unknown;
+    startTime: number;
+}
+interface StepCompletedContext {
+    type: 'workflow';
+    contextType: 'step-completed';
+    stepId: string;
+    stepStatus: 'completed';
+    output: unknown;
+    duration: number;
+    isTerminal: boolean;
+    startTime: number;
+    endTime: number;
+}
+interface StepFailedContext {
+    type: 'workflow';
+    contextType: 'step-failed';
+    stepId: string;
+    stepStatus: 'failed';
+    error: string;
+    duration: number;
+    startTime: number;
+    endTime: number;
+}
+interface ConditionalRouteContext {
+    type: 'workflow';
+    contextType: 'conditional-route';
+    stepId: string;
+    target: string;
+    error?: string;
+}
+interface ExecutionPathContext {
+    type: 'workflow';
+    contextType: 'execution-path';
+    executionPath: string[];
+}
+type WorkflowLogContext = WorkflowExecutionContext | WorkflowFailureContext | StepStartedContext | StepCompletedContext | StepFailedContext | ConditionalRouteContext | ExecutionPathContext;
+interface WorkflowLogMessage {
+    level: ExecutionLogLevel;
+    message: string;
+    timestamp: number;
+    context?: WorkflowLogContext;
+}
+
+/**
+ * Agent-specific logging types
+ * Simplified 2-event model: lifecycle, iteration
+ *
+ * Design Philosophy:
+ * - LIFECYCLE EVENTS: Structural checkpoints (initialization, iteration, completion)
+ * - ITERATION EVENTS: Execution activities (reasoning, actions during iterations)
+ */
+
+/**
+ * Agent lifecycle stages
+ * Universal checkpoints that apply to all agent executions
+ */
+type AgentLifecycle = 'initialization' | 'iteration' | 'completion';
+/**
+ * Iteration event types
+ * Activities that occur during agent iterations
+ */
+type IterationEventType = 'reasoning' | 'action' | 'tool-call';
+/**
+ * Base fields shared by all lifecycle events
+ */
+interface AgentLifecycleEventBase {
+    type: 'agent';
+    agentId: string;
+    lifecycle: AgentLifecycle;
+    sessionId?: string;
+}
+/**
+ * Lifecycle started event - emitted when a phase begins
+ * REQUIRED: startTime (phase has started, no end yet)
+ */
+interface AgentLifecycleStartedEvent extends AgentLifecycleEventBase {
+    stage: 'started';
+    startTime: number;
+    iteration?: number;
+}
+/**
+ * Lifecycle completed event - emitted when a phase succeeds
+ * REQUIRED: startTime, endTime, duration (phase has finished successfully)
+ */
+interface AgentLifecycleCompletedEvent extends AgentLifecycleEventBase {
+    stage: 'completed';
+    startTime: number;
+    endTime: number;
+    duration: number;
+    iteration?: number;
+    attempts?: number;
+    memorySize?: {
+        sessionMemoryKeys: number;
+        historyEntries: number;
+    };
+}
+/**
+ * Lifecycle failed event - emitted when a phase fails
+ * REQUIRED: startTime, endTime, duration, error (phase has finished with error)
+ */
+interface AgentLifecycleFailedEvent extends AgentLifecycleEventBase {
+    stage: 'failed';
+    startTime: number;
+    endTime: number;
+    duration: number;
+    error: string;
+    iteration?: number;
+}
+/**
+ * Union type for all lifecycle events
+ * Discriminated by 'stage' field for type narrowing
+ */
+type AgentLifecycleEvent = AgentLifecycleStartedEvent | AgentLifecycleCompletedEvent | AgentLifecycleFailedEvent;
+/**
+ * Placeholder data for MVP
+ * Will be typed per actionType in future
+ */
+interface ActionPlaceholderData {
+    message: string;
+}
+/**
+ * Iteration event - captures activities during agent iterations
+ * Consolidates reasoning (LLM thought process) and actions (tool use, memory ops, etc.)
+ */
+interface AgentIterationEvent {
+    type: 'agent';
+    agentId: string;
+    lifecycle: 'iteration';
+    eventType: IterationEventType;
+    iteration: number;
+    sessionId?: string;
+    startTime: number;
+    endTime: number;
+    duration: number;
+    output?: string;
+    actionType?: string;
+    data?: ActionPlaceholderData;
+}
+/**
+ * Tool call event - captures individual tool executions during iterations
+ * Provides granular timing for each tool invocation
+ */
+interface AgentToolCallEvent {
+    type: 'agent';
+    agentId: string;
+    lifecycle: 'iteration';
+    eventType: 'tool-call';
+    iteration: number;
+    sessionId?: string;
+    toolName: string;
+    startTime: number;
+    endTime: number;
+    duration: number;
+    success: boolean;
+    error?: string;
+    input?: Record<string, unknown>;
+    output?: unknown;
+}
+/**
+ * Union type for all agent log contexts
+ * 3 event types total (lifecycle, iteration, tool-call)
+ */
+type AgentLogContext = AgentLifecycleEvent | AgentIterationEvent | AgentToolCallEvent;
+
+/**
+ * Base execution logger for Execution Engine
+ */
+type ExecutionLogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+type LogContext = WorkflowLogContext | AgentLogContext;
+interface ExecutionLogMessage {
+    level: ExecutionLogLevel;
+    message: string;
+    timestamp: number;
+    context?: LogContext;
+}
+
+/**
+ * Shared form field types for dynamic form generation
+ * Used by: Command Queue, Execution Runner UI, future form-based features
+ */
+/**
+ * Supported form field types for action payloads
+ * Maps to Mantine form components
+ */
+type FormFieldType = 'text' | 'textarea' | 'number' | 'select' | 'checkbox' | 'radio' | 'richtext';
+/**
+ * Form field definition
+ */
+interface FormField {
+    /** Field key in payload object */
+    name: string;
+    /** Field label for UI */
+    label: string;
+    /** Field type (determines UI component) */
+    type: FormFieldType;
+    /** Default value */
+    defaultValue?: unknown;
+    /** Required field */
+    required?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Help text */
+    description?: string;
+    /** Options for select/radio */
+    options?: Array<{
+        label: string;
+        value: string | number;
+    }>;
+    /** Min/max for number */
+    min?: number;
+    max?: number;
+    /** Path to context value for pre-filling (dot notation, e.g., 'proposal.summary') */
+    defaultValueFromContext?: string;
+}
+/**
+ * Form schema for action payload collection
+ */
+interface FormSchema {
+    /** Form title */
+    title?: string;
+    /** Form description */
+    description?: string;
+    /** Form fields */
+    fields: FormField[];
+}
+
+/**
+ * Serialized Registry Types
+ *
+ * Pre-computed JSON-safe types for API responses and Command View.
+ * Serialization happens once at API startup, enabling instant response times.
+ */
+
+/**
+ * Serialized form field for API responses
+ */
+interface SerializedFormField {
+    name: string;
+    label: string;
+    type: FormFieldType;
+    defaultValue?: unknown;
+    required?: boolean;
+    placeholder?: string;
+    description?: string;
+    options?: Array<{
+        label: string;
+        value: string | number;
+    }>;
+    min?: number;
+    max?: number;
+}
+/**
+ * Serialized form schema for API responses
+ */
+interface SerializedFormSchema {
+    title?: string;
+    description?: string;
+    fields: SerializedFormField[];
+    layout?: 'vertical' | 'horizontal' | 'grid';
+}
+/**
+ * Serialized execution form schema for API responses
+ */
+interface SerializedExecutionFormSchema extends SerializedFormSchema {
+    fieldMappings?: Record<string, string>;
+    submitButton?: {
+        label?: string;
+        loadingLabel?: string;
+        confirmMessage?: string;
+    };
+}
+/**
+ * Serialized schedule config for API responses
+ */
+interface SerializedScheduleConfig {
+    enabled: boolean;
+    defaultSchedule?: string;
+    allowedPatterns?: string[];
+}
+/**
+ * Serialized webhook config for API responses
+ */
+interface SerializedWebhookConfig {
+    enabled: boolean;
+    payloadSchema?: unknown;
+}
+/**
+ * Serialized execution interface for API responses
+ */
+interface SerializedExecutionInterface {
+    form: SerializedExecutionFormSchema;
+    schedule?: SerializedScheduleConfig;
+    webhook?: SerializedWebhookConfig;
+}
+/**
+ * Serialized agent definition (JSON-safe)
+ * Result of serializeDefinition(AgentDefinition)
+ */
+interface SerializedAgentDefinition {
+    config: {
+        resourceId: string;
+        name: string;
+        description: string;
+        version: string;
+        type: 'agent';
+        status: 'dev' | 'prod';
+        /** Whether this resource is archived and should be excluded from registration and deployment */
+        archived?: boolean;
+        systemPrompt: string;
+        constraints?: {
+            maxIterations?: number;
+            timeout?: number;
+            maxSessionMemoryKeys?: number;
+            maxMemoryTokens?: number;
+        };
+        sessionCapable?: boolean;
+        memoryPreferences?: string;
+    };
+    modelConfig: {
+        provider: string;
+        model: string;
+        apiKey: string;
+        temperature: number;
+        maxOutputTokens: number;
+        topP?: number;
+        modelOptions?: Record<string, unknown>;
+    };
+    contract: {
+        inputSchema: object;
+        outputSchema?: object;
+    };
+    tools: Array<{
+        name: string;
+        description: string;
+        inputSchema?: object;
+        outputSchema?: object;
+    }>;
+    knowledgeMap?: {
+        nodeCount: number;
+        nodes: Array<{
+            id: string;
+            description: string;
+            loaded: boolean;
+            hasPrompt: boolean;
+        }>;
+    };
+    metricsConfig?: object;
+    interface?: SerializedExecutionInterface;
+}
+/**
+ * Serialized workflow definition (JSON-safe)
+ * Result of serializeDefinition(WorkflowDefinition)
+ */
+interface SerializedWorkflowDefinition {
+    config: {
+        resourceId: string;
+        name: string;
+        description: string;
+        version: string;
+        type: 'workflow';
+        status: 'dev' | 'prod';
+        /** Whether this resource is archived and should be excluded from registration and deployment */
+        archived?: boolean;
+    };
+    entryPoint: string;
+    steps: Array<{
+        id: string;
+        name: string;
+        description: string;
+        inputSchema?: object;
+        outputSchema?: object;
+        next: {
+            type: 'linear' | 'conditional';
+            target?: string;
+            routes?: Array<{
+                target: string;
+            }>;
+            default?: string;
+        } | null;
+    }>;
+    contract: {
+        inputSchema: object;
+        outputSchema?: object;
+    };
+    metricsConfig?: object;
+    interface?: SerializedExecutionInterface;
+}
+
+/**
+ * Workflow step state
+ * Aggregates step context events with timing and logs
+ */
+interface StepState {
+    stepId: string;
+    stepName: string;
+    status: 'pending' | 'running' | 'completed' | 'failed';
+    startTime?: number;
+    endTime?: number;
+    duration?: number;
+    input?: unknown;
+    output?: unknown;
+    error?: unknown;
+    logs: WorkflowLogMessage[];
+}
+/**
+ * Complete workflow execution data for node visualization
+ * Parsed from execution logs
+ */
+interface WorkflowNodeVisualizerData {
+    steps: StepState[];
+    totalDuration: number;
+    isRunning: boolean;
+}
+
+/**
+ * Agent timeline and observability types
+ * Used for UI timeline visualization and backend processing
+ */
+
+/**
+ * Sub-activity within an iteration
+ * Represents reasoning, actions, or tool calls with timing
+ */
+interface SubActivity {
+    type: 'reasoning' | 'action' | 'tool-call';
+    startTime: number;
+    endTime: number;
+    duration: number;
+    details: AgentIterationEvent | AgentToolCallEvent;
+}
+/**
+ * Agent iteration state
+ * Aggregates lifecycle events and sub-activities for a single iteration
+ */
+interface AgentIteration {
+    iterationNumber: number;
+    status: 'running' | 'completed' | 'failed' | 'pending';
+    iterationEvents: AgentIterationEvent[];
+    duration?: number;
+    timestamp: number;
+    subActivities: SubActivity[];
+    startTime?: number;
+    endTime?: number;
+}
+/**
+ * Agent lifecycle node state
+ * Represents initialization or completion phase
+ */
+interface AgentLifecycleNode {
+    type: 'initialization' | 'completion';
+    status: 'running' | 'completed' | 'failed' | 'pending';
+    duration?: number;
+    timestamp?: number;
+    startTime?: number;
+    endTime?: number;
+}
+/**
+ * Complete agent execution data for timeline visualization
+ * Parsed from execution logs
+ */
+interface AgentIterationData {
+    initialization: AgentLifecycleNode;
+    iterations: AgentIteration[];
+    completion: AgentLifecycleNode;
+    currentIteration: number | null;
+    totalIterations: number;
+    totalDuration?: number;
+    status: 'running' | 'completed' | 'failed' | 'warning';
+}
+
+/**
+ * Action configuration for HITL tasks
+ * Defines available user actions and their behavior
+ */
+interface ActionConfig {
+    /** Unique action identifier (e.g., 'approve', 'retry', 'escalate') */
+    id: string;
+    /** Display label for UI button */
+    label: string;
+    /** Button variant/style */
+    type: 'primary' | 'secondary' | 'danger' | 'outline';
+    /** Tabler icon name (e.g., 'IconCheck', 'IconRefresh') */
+    icon?: string;
+    /** Button color (Mantine theme colors) */
+    color?: string;
+    /** Button variant (Mantine button variant, e.g., 'light', 'filled', 'outline') */
+    variant?: string;
+    /** Execution target (agent/workflow to invoke) */
+    target?: {
+        resourceType: 'agent' | 'workflow';
+        resourceId: string;
+        /**
+         * Optional session ID for agent continuation.
+         * If provided, invokes a new turn on the existing session instead of standalone execution.
+         * Only valid when resourceType is 'agent'.
+         */
+        sessionId?: string;
+    };
+    /** Form schema for collecting action-specific data */
+    form?: FormSchema;
+    /** Payload template for pre-filling forms */
+    payloadTemplate?: unknown;
+    /** Requires confirmation dialog */
+    requiresConfirmation?: boolean;
+    /** Confirmation message */
+    confirmationMessage?: string;
+    /** Help text / tooltip */
+    description?: string;
+}
+
+/**
+ * Origin resource type - where an execution/task originated from.
+ * Used for audit trails and tracking execution lineage.
+ */
+type OriginResourceType = 'agent' | 'workflow' | 'scheduler' | 'api';
+/**
+ * Origin tracking metadata - who/what created this execution/task.
+ * Used by both TaskScheduler and CommandQueue for complete audit trails.
+ */
+interface OriginTracking {
+    originExecutionId: string;
+    originResourceType: OriginResourceType;
+    originResourceId: string;
+}
+
+/**
+ * Command queue task with flexible action system
+ */
+interface Task extends OriginTracking {
+    id: string;
+    organizationId: string;
+    actions: ActionConfig[];
+    context: unknown;
+    selectedAction?: string;
+    actionPayload?: unknown;
+    description?: string;
+    priority: number;
+    /** Optional checkpoint identifier for grouping related human approval tasks */
+    humanCheckpoint?: string;
+    status: TaskStatus;
+    /**
+     * Target resource tracking — mirrors origin columns.
+     * Set when task is created; patchable to redirect execution to a different resource.
+     */
+    targetResourceId?: string;
+    targetResourceType?: 'agent' | 'workflow';
+    /**
+     * Execution ID for the action that runs AFTER user approval.
+     * NULL until execution starts.
+     *
+     * Naming distinction:
+     * - originExecutionId = Parent execution that CREATED the HITL task
+     * - targetExecutionId = Child execution that RUNS AFTER user approval
+     */
+    targetExecutionId?: string;
+    createdAt: Date;
+    completedAt?: Date;
+    completedBy?: string;
+    expiresAt?: Date;
+    idempotencyKey?: string | null;
+}
+/**
+ * Task status values
+ * - pending: awaiting action
+ * - processing: execution in progress after user approval
+ * - completed: action was taken and execution succeeded
+ * - failed: execution failed, task can be retried
+ * - expired: timed out before action
+ */
+type TaskStatus = 'pending' | 'processing' | 'completed' | 'failed' | 'expired';
+
+/**
+ * Wire-format DTO for notification API responses.
+ * Dates are ISO 8601 strings (not Date objects like the domain Notification type).
+ * Used by frontend hooks that consume /api/notifications.
+ */
+interface NotificationDTO {
+    id: string;
+    userId: string;
+    organizationId: string;
+    category: string;
+    title: string;
+    message: string;
+    actionUrl: string | null;
+    read: boolean;
+    readAt: string | null;
+    createdAt: string;
+}
+
+/**
+ * Time range selector for dashboard metrics
+ */
+type TimeRange = '1h' | '24h' | '7d' | '30d';
+/** Time-bucketed health data point */
+interface ResourceHealthDataPoint {
+    time: string;
+    success: number;
+    failure: number;
+    warning: number;
+    rate: number;
+}
+/** Health data for a single resource */
+interface ResourceHealth {
+    entityType: string;
+    entityId: string;
+    entityName: string | null;
+    trendData: ResourceHealthDataPoint[];
+    summary: {
+        total: number;
+        successRate: number;
+    };
+}
+
+/**
+ * Base Execution Engine type definitions
+ * Core types shared across all Execution Engine resources
+ */
+
+/**
+ * NOTE: AIResource interface has been removed and replaced with ResourceDefinition
+ * from registry/types.ts. All resources (executable and non-executable) now extend
+ * the unified ResourceDefinition base interface.
+ *
+ * AgentConfig and WorkflowConfig now extend ResourceDefinition directly.
+ * See packages/core/src/registry/types.ts for the base interface definition.
+ */
+type AIResourceDefinition = SerializedWorkflowDefinition | SerializedAgentDefinition;
+
+/**
+ * Resource Registry type definitions
+ */
+
+/**
+ * Environment/deployment status for resources
+ */
+type ResourceStatus = 'dev' | 'prod';
+/**
+ * All resource types in the platform
+ * Used as the discriminator field in ResourceDefinition
+ */
+type ResourceType = 'agent' | 'workflow' | 'trigger' | 'integration' | 'external' | 'human';
+/**
+ * Base interface for ALL platform resources
+ * Shared by both executable (agents, workflows) and non-executable (triggers, integrations, etc.) resources
+ */
+interface ResourceDefinition {
+    /** Unique resource identifier */
+    resourceId: string;
+    /** Display name */
+    name: string;
+    /** Purpose and functionality description */
+    description: string;
+    /** Version for change tracking and evolution */
+    version: string;
+    /** Resource type discriminator */
+    type: ResourceType;
+    /** Environment/deployment status */
+    status: ResourceStatus;
+    /** Domain tags for filtering and organization */
+    domains?: ResourceDomain[];
+    /** Whether the agent supports multi-turn sessions (agents only) */
+    sessionCapable?: boolean;
+    /** Whether the resource is local (monorepo) or remote (externally deployed) */
+    origin?: 'local' | 'remote';
+    /** Whether this resource is archived and should be excluded from registration and deployment */
+    archived?: boolean;
+}
+
+/**
+ * Standard Domain Definitions
+ * Centralized domain constants and definitions for all organization resources.
+ */
+
+declare const DOMAINS: {
+    readonly INBOUND_PIPELINE: "inbound-pipeline";
+    readonly LEAD_GEN_PIPELINE: "lead-gen-pipeline";
+    readonly SUPPORT: "support";
+    readonly CLIENT_SUPPORT: "client-support";
+    readonly DELIVERY: "delivery";
+    readonly OPERATIONS: "operations";
+    readonly FINANCE: "finance";
+    readonly EXECUTIVE: "executive";
+    readonly INSTANTLY: "instantly";
+    readonly TESTING: "testing";
+    readonly INTERNAL: "internal";
+    readonly INTEGRATION: "integration";
+    readonly UTILITY: "utility";
+    readonly DIAGNOSTIC: "diagnostic";
+};
+/**
+ * ResourceDomain - Strongly typed domain identifier
+ * Use this type for all domain references to ensure compile-time validation.
+ */
+type ResourceDomain = (typeof DOMAINS)[keyof typeof DOMAINS];
+
+type ExecutionStatus = 'pending' | 'running' | 'completed' | 'failed' | 'warning';
+
+/**
+ * Resource Type Metadata
+ *
+ * Centralized metadata for ResourceDefinition types including icon names and colors.
+ * Icon names reference @tabler/icons-react - UI layer maps these to actual components.
+ */
+
+/**
+ * Node color types for graph visualization
+ * Used by both @repo/core (metadata) and @repo/ui (components)
+ */
+type NodeColorType = 'violet' | 'blue' | 'orange' | 'teal' | 'gray' | 'yellow';
+
+/**
+ * Execution Runner Types
+ *
+ * Shared types for the Execution Runner UI feature.
+ * Used by both API (apps/api) and frontend (apps/command-center).
+ */
+
+interface ExecutionRunnerCatalogItem {
+    resourceId: string;
+    resourceName: string;
+    resourceType: 'workflow' | 'agent';
+    description?: string;
+    status: 'dev' | 'prod';
+    version: string;
+    interface: SerializedExecutionInterface;
+}
+
+interface TimeRangeSelectorProps {
+    value: TimeRange;
+    onChange: (value: TimeRange) => void;
+    width?: number;
+}
+declare function TimeRangeSelector({ value, onChange, width }: TimeRangeSelectorProps): react_jsx_runtime.JSX.Element;
+
+declare function PageNotFound(): react_jsx_runtime.JSX.Element;
+
+interface ResourceCardProps {
+    resource: ResourceDefinition;
+    onClick: (resource: ResourceDefinition) => void;
+    /** Layout mode: 'stack' renders vertically (default), 'row' renders as a dense horizontal strip, 'grid' renders with a right section, 'card' renders with top section above details */
+    layout?: 'stack' | 'row' | 'grid' | 'card';
+    /** Content rendered in the right column when layout is 'grid' */
+    rightSection?: ReactNode;
+    /** Content rendered above the details when layout is 'card' */
+    topSection?: ReactNode;
+    /** Optional "Last run X ago" label shown below status badges */
+    lastRunLabel?: string;
+    /** HTML data attributes and style overrides passed to the root Card */
+    'data-resource-id'?: string;
+    style?: CSSProperties;
+}
+declare function ResourceCard({ resource, onClick, layout, rightSection, topSection, lastRunLabel, style, ...rest }: ResourceCardProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Converts ExecutionRunnerCatalogItem to ResourceDefinition format
+ * for use with the unified ResourceCard component.
+ *
+ * @param item - ExecutionRunnerCatalogItem from the execution runner API
+ * @returns ResourceDefinition compatible with ResourceCard
+ *
+ * @example
+ * const catalogItem = {
+ *   resourceId: 'wf-001',
+ *   resourceName: 'Order Processor',
+ *   resourceType: 'workflow',
+ *   description: 'Processes customer orders',
+ *   status: 'prod',
+ *   version: '1.0.0',
+ *   interface: { ... }
+ * }
+ *
+ * const resource = catalogItemToResourceDefinition(catalogItem)
+ * <ResourceCard resource={resource} />
+ */
+declare function catalogItemToResourceDefinition(item: ExecutionRunnerCatalogItem): ResourceDefinition;
+
+interface CardHeaderProps {
+    icon?: ReactNode;
+    title: string;
+    subtitle?: string;
+    rightSection?: ReactNode;
+}
+declare function CardHeader({ icon, title, subtitle, rightSection }: CardHeaderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Custom Mantine loader — three ascending chevrons that pulse upward in sequence.
+ * Mirrors the Elevasis logo's angular, upward-pointing silhouette.
+ *
+ * Uses `--loader-size` and `--loader-color` CSS variables automatically
+ * provided by Mantine's `<Loader />` wrapper, so `size` and `color` props work.
+ */
+declare const ElevasisLoader: MantineLoaderComponent;
+
+interface ICustomModalProps {
+    opened: boolean;
+    onClose: () => void;
+    children: react__default.ReactNode | react__default.ReactNode[] | string;
+    loading?: boolean;
+    style?: react__default.CSSProperties;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+declare const CustomModal: ({ children, opened, onClose, loading, style, size }: ICustomModalProps) => react_jsx_runtime.JSX.Element;
+
+interface IConfirmationModalProps {
+    opened: boolean;
+    onClose: () => void;
+    icon: ReactElement<{
+        size?: number;
+        strokeWidth?: number;
+    }>;
+    confirmationHandler?: () => void;
+    loading?: boolean;
+    style?: React.CSSProperties;
+    title: string;
+    text?: ReactNode | string;
+    buttonText?: string;
+    buttonColor?: string;
+    centerText?: boolean;
+}
+declare const ConfirmationModal: ({ opened, onClose, loading, icon, confirmationHandler, style, title, text, buttonText, buttonColor, centerText }: IConfirmationModalProps) => react_jsx_runtime.JSX.Element;
+
+interface IConfirmationInputModalProps {
+    opened: boolean;
+    onClose: () => void;
+    icon: ReactElement<{
+        size?: number;
+        strokeWidth?: number;
+    }>;
+    confirmationHandler?: () => void;
+    loading?: boolean;
+    style?: React.CSSProperties;
+    title: string | ReactNode;
+    text?: ReactNode | string;
+    buttonText?: string;
+    buttonColor?: string;
+    centerText?: boolean;
+    inputValue: string;
+    onInputChange: (value: string) => void;
+    expectedValue: string;
+    placeholder?: string;
+}
+declare const ConfirmationInputModal: ({ opened, onClose, loading, icon, confirmationHandler, style, title, text, buttonText, buttonColor, inputValue, onInputChange, expectedValue, placeholder }: IConfirmationInputModalProps) => react_jsx_runtime.JSX.Element;
+
+type SortDirection = 'asc' | 'desc';
+interface SortState {
+    column: string;
+    direction: SortDirection;
+}
+
+interface SortableHeaderProps {
+    column: string;
+    children: React.ReactNode;
+    sort: SortState;
+    onToggle: (column: string) => void;
+    style?: React.CSSProperties;
+    w?: number | string;
+}
+declare function SortableHeader({ column, children, sort, onToggle, style, w }: SortableHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface FilterBarProps {
+    children: ReactNode;
+    actions?: ReactNode;
+}
+declare function FilterBar({ children, actions }: FilterBarProps): react_jsx_runtime.JSX.Element;
+
+interface TableSelectionToolbarProps {
+    selectedCount: number;
+    onDelete?: () => void;
+    isDeleting?: boolean;
+}
+declare function TableSelectionToolbar({ selectedCount, onDelete, isDeleting }: TableSelectionToolbarProps): react_jsx_runtime.JSX.Element | null;
+
+interface FormFieldRendererProps {
+    field: FormField;
+    form: UseFormReturnType<any>;
+    richTextRenderer?: (props: {
+        content: string;
+        onChange: (content: string) => void;
+        placeholder?: string;
+    }) => ReactNode;
+}
+declare function FormFieldRenderer({ field, form, richTextRenderer }: FormFieldRendererProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+
+interface ExecutionLogEntry {
+    id: string;
+    resourceId: string;
+    resourceName: string;
+    resourceType: 'workflow' | 'agent' | 'pipeline';
+    status: ExecutionStatus;
+    startTime: number;
+    endTime?: number;
+    duration?: number;
+    resourceStatus: 'dev' | 'prod';
+    resourceVersion?: string | null;
+    apiVersion?: string | null;
+    sdkVersion?: string | null;
+}
+interface ExecutionLogsTableProps {
+    executions: ExecutionLogEntry[];
+    isLoading: boolean;
+    onRowClick?: (params: {
+        resourceType: string;
+        resourceId: string;
+        executionId: string;
+    }) => void;
+}
+declare function ExecutionLogsTable({ executions, isLoading, onRowClick }: ExecutionLogsTableProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Get chart color based on success rate
+ */
+declare function getHealthColor(successRate: number, hasExecutions?: boolean): string;
+interface ResourceHealthChartProps {
+    healthData: ResourceHealth | undefined;
+    hasExecutions?: boolean;
+    width?: number | string;
+    height?: number;
+}
+/**
+ * Mini health chart for resource cards
+ */
+declare function ResourceHealthChart({ healthData, hasExecutions, width, height }: ResourceHealthChartProps): react_jsx_runtime.JSX.Element;
+
+interface NotificationBellProps {
+    /** Override unread count (e.g., from SSE-enhanced source) */
+    unreadCount?: number;
+    /** Callback for navigation when notification is clicked */
+    onNavigate?: (url: string) => void;
+}
+declare function NotificationBell({ unreadCount, onNavigate }: NotificationBellProps): react_jsx_runtime.JSX.Element;
+
+interface NotificationItemProps {
+    notification: NotificationDTO;
+    onClose?: () => void;
+    onNavigate?: (url: string) => void;
+}
+declare function NotificationItem({ notification, onClose, onNavigate }: NotificationItemProps): react_jsx_runtime.JSX.Element;
+
+interface NotificationListProps {
+    notifications: NotificationDTO[];
+    isLoading?: boolean;
+    onClose?: () => void;
+    onNavigate?: (url: string) => void;
+}
+declare function NotificationList({ notifications, isLoading, onClose, onNavigate }: NotificationListProps): react_jsx_runtime.JSX.Element;
+
+interface NotificationPanelProps {
+    notifications: NotificationDTO[];
+    isLoading?: boolean;
+    onClose?: () => void;
+    onNavigate?: (url: string) => void;
+}
+declare function NotificationPanel({ notifications, isLoading, onClose, onNavigate }: NotificationPanelProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Shared visualization constants used by both workflow and agent visualizers
+ */
+declare const SHARED_VIZ_CONSTANTS: {
+    readonly NODE_WIDTH: 160;
+    readonly NODE_SPACING: 220;
+    readonly HANDLE_SIZE: 8;
+    readonly MIN_ZOOM: 0.5;
+    readonly MAX_ZOOM: 2;
+};
+/**
+ * Container height constant (used by VisualizerContainer and EmptyVisualizer)
+ */
+declare const CONTAINER_CONSTANTS: {
+    CONTAINER_HEIGHT: number;
+};
+
+/**
+ * Timeline Bar Props
+ * Represents a single horizontal bar in the timeline
+ */
+interface TimelineBarProps {
+    startTime: number;
+    endTime: number;
+    executionStart: number;
+    executionEnd: number;
+    status: ExecutionStatus;
+    label?: string;
+    onClick?: () => void;
+    nodeId?: string | number;
+    isSelected?: boolean;
+    hasSelection?: boolean;
+}
+/**
+ * Timeline Row Props
+ * Represents a row with label + one or more bars
+ */
+interface TimelineRowProps {
+    label: string;
+    bars: Array<{
+        startTime: number;
+        endTime: number;
+        status: ExecutionStatus;
+        label?: string;
+        onClick?: () => void;
+        nodeId?: string | number;
+    }>;
+    executionStart: number;
+    executionEnd: number;
+    indent?: number;
+    selectedNodeId?: string | number | null;
+}
+/**
+ * Timeline Container Props
+ * Outer container for the timeline
+ */
+interface TimelineContainerProps {
+    executionStart: number;
+    executionEnd: number;
+    children: React.ReactNode;
+}
+/**
+ * Unified node data combining workflow structure and execution state
+ */
+interface UnifiedWorkflowNodeData {
+    id: string;
+    name: string;
+    description: string;
+    isEntryPoint: boolean;
+    isEndNode: boolean;
+    isConditional: boolean;
+    routeCount?: number;
+    executionStatus?: 'pending' | 'running' | 'completed' | 'failed';
+    duration?: number;
+    input?: unknown;
+    output?: unknown;
+    error?: unknown;
+    logs?: WorkflowLogMessage[];
+    isExecuted: boolean;
+    isDimmed: boolean;
+    isSelected?: boolean;
+    [key: string]: unknown;
+}
+/**
+ * Unified edge data combining workflow structure and execution state
+ */
+interface UnifiedWorkflowEdgeData {
+    edgeType: 'linear' | 'conditional' | 'default';
+    label?: string;
+    wasTaken: boolean;
+    sourceStatus?: ExecutionStatus;
+    targetStatus?: ExecutionStatus;
+    isDimmed: boolean;
+    isAnimated: boolean;
+    [key: string]: unknown;
+}
+
+/**
+ * useWorkflowStepsLayout - Hook to convert workflow definition to ReactFlow nodes/edges
+ *
+ * Uses Dagre for automatic graph layout:
+ * - Left-to-right flow (LR)
+ * - Minimizes edge crossings
+ * - Keeps connected nodes closer together
+ */
+
+/**
+ * Serialized next config from API
+ */
+interface SerializedNextConfig {
+    type: 'linear' | 'conditional';
+    target?: string;
+    routes?: Array<{
+        target: string;
+    }>;
+    default?: string;
+}
+/**
+ * Serialized workflow step from API
+ */
+interface SerializedWorkflowStep {
+    id: string;
+    name: string;
+    description: string;
+    next: SerializedNextConfig | null;
+}
+/**
+ * Serialized workflow definition subset needed for layout
+ */
+interface WorkflowStepsLayoutInput {
+    entryPoint: string;
+    steps: SerializedWorkflowStep[];
+}
+
+interface ExecutionStatusBadgeProps {
+    /** The execution status */
+    status: ExecutionStatus;
+    /** Badge size - defaults to 'sm' */
+    size?: BadgeProps['size'];
+    /** Badge variant - defaults to 'light' */
+    variant?: 'light' | 'filled' | 'outline' | 'dot';
+    /** Whether to show a loader for running status - defaults to true */
+    showLoader?: boolean;
+}
+/**
+ * ExecutionStatusBadge - Reusable badge for execution statuses
+ *
+ * Consolidates status badge rendering across:
+ * - ExecutionSummaryRow.tsx
+ * - SessionExecutionLogs.tsx
+ * - BaseExecutionLogsHeader.tsx
+ * - UnifiedWorkflowNode.tsx
+ * - Dashboard.tsx task list
+ *
+ * Uses the centralized STATUS_COLORS from statusColors.ts
+ *
+ * @example
+ * ```tsx
+ * <ExecutionStatusBadge status="running" />
+ * <ExecutionStatusBadge status="completed" variant="dot" />
+ * ```
+ */
+declare function ExecutionStatusBadge({ status, size, variant, showLoader }: ExecutionStatusBadgeProps): react_jsx_runtime.JSX.Element;
+
+interface ExecutionStatsProps {
+    totalExecutions: number;
+    successCount: number;
+    failureCount: number;
+    warningCount?: number;
+    successRate: number;
+    align?: 'flex-start' | 'flex-end' | 'center';
+    /** Compact mode renders metric chips in a horizontal row */
+    compact?: boolean;
+}
+/**
+ * Execution statistics with colored text — vertical stack or compact metric chips
+ */
+declare function ExecutionStats({ totalExecutions, successCount, failureCount, warningCount, successRate, align, compact }: ExecutionStatsProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * TimelineContainer Component
+ *
+ * Outer container for the timeline visualization.
+ * Wraps timeline rows and displays time axis at the bottom.
+ */
+declare function TimelineContainer({ executionStart, executionEnd, children }: TimelineContainerProps): react_jsx_runtime.JSX.Element;
+
+interface TimelineAxisProps {
+    totalDuration: number;
+}
+/**
+ * TimelineAxis Component
+ *
+ * Renders time markers at the bottom of the timeline.
+ * Shows 0ms on the left, total duration on the right, and 3 intermediate markers.
+ */
+declare function TimelineAxis({ totalDuration }: TimelineAxisProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * TimelineBar Component
+ *
+ * Renders a single horizontal bar in the timeline visualization.
+ * Position and width are calculated as percentages based on absolute timestamps.
+ */
+declare function TimelineBar({ startTime, endTime, executionStart, executionEnd, status, label, onClick, isSelected, hasSelection }: TimelineBarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * TimelineRow Component
+ *
+ * Renders a row in the timeline with a label and one or more timeline bars.
+ * Supports indentation for nested rows (e.g., sub-activities within iterations).
+ */
+declare function TimelineRow({ label, bars, executionStart, executionEnd, indent, selectedNodeId }: TimelineRowProps): react_jsx_runtime.JSX.Element;
+
+interface IVisualizerContainerProps {
+    children: React.ReactNode;
+    /** Click handler for container (for deselecting nodes). Optional for definition mode. */
+    handleContainerClick?: (event: React.MouseEvent) => void;
+    /** Optional dynamic height calculated from graph layout. Falls back to default if not provided. */
+    height?: number;
+}
+declare const VisualizerContainer: ({ children, handleContainerClick, height }: IVisualizerContainerProps) => react_jsx_runtime.JSX.Element;
+
+declare const EmptyVisualizer: ({ message }: {
+    message?: string;
+}) => react_jsx_runtime.JSX.Element;
+
+interface UnifiedWorkflowGraphProps {
+    /**
+     * Workflow definition (entry point, steps, routes)
+     * Accepts either SerializedWorkflowDefinition (execution mode) or WorkflowStepsLayoutInput (definition mode)
+     */
+    resourceDefinition: SerializedWorkflowDefinition | WorkflowStepsLayoutInput;
+    /** Execution logs from SSE or useExecution hook (only used in execution mode) */
+    executionLogs?: ExecutionLogMessage[];
+    /** Currently selected step ID for highlighting (only used in execution mode) */
+    selectedStepId?: string | null;
+    /** Callback when step selection changes (only used in execution mode) */
+    onStepSelect?: (stepId: string | null) => void;
+    /** External trigger for fit view (increment to trigger, used after collapse animations) */
+    fitViewTrigger?: number;
+}
+declare function UnifiedWorkflowGraph({ resourceDefinition, executionLogs, selectedStepId, onStepSelect, fitViewTrigger: externalFitViewTrigger }: UnifiedWorkflowGraphProps): react_jsx_runtime.JSX.Element;
+
+type UnifiedWorkflowNodeProps = NodeProps<Node<UnifiedWorkflowNodeData>>;
+declare const UnifiedWorkflowNode: react.NamedExoticComponent<UnifiedWorkflowNodeProps>;
+
+type UnifiedWorkflowEdgeProps = EdgeProps<Edge<UnifiedWorkflowEdgeData, string>>;
+declare const UnifiedWorkflowEdge: react.NamedExoticComponent<UnifiedWorkflowEdgeProps>;
+
+interface WorkflowExecutionTimelineProps {
+    timelineData: WorkflowNodeVisualizerData;
+    selectedStepId?: string | null;
+}
+/**
+ * WorkflowExecutionTimeline Component
+ *
+ * Renders a Temporal-style timeline visualization for workflow executions.
+ * Shows all workflow steps with their timing and status.
+ */
+declare function WorkflowExecutionTimeline({ timelineData, selectedStepId }: WorkflowExecutionTimelineProps): react_jsx_runtime.JSX.Element;
+
+interface AgentExecutionVisualizerProps {
+    resourceDefinition: SerializedAgentDefinition;
+    iterationData: AgentIterationData | null;
+    selectedExecutionId?: string;
+    liveExecutions: Set<string>;
+    selectedIterationId: number | 'initialization' | 'completion' | null;
+    onIterationSelect: (iterationId: number | 'initialization' | 'completion' | null) => void;
+}
+declare function AgentExecutionVisualizer({ resourceDefinition, iterationData, selectedExecutionId, liveExecutions, selectedIterationId, onIterationSelect }: AgentExecutionVisualizerProps): react_jsx_runtime.JSX.Element;
+
+interface AgentExecutionTimelineProps {
+    iterationData: AgentIterationData;
+    selectedIterationId?: number | 'initialization' | 'completion' | null;
+}
+/**
+ * AgentExecutionTimeline Component
+ *
+ * Renders a Temporal-style timeline visualization for agent executions.
+ * Shows initialization, iterations (with sub-activities), and completion phases.
+ */
+declare function AgentExecutionTimeline({ iterationData, selectedIterationId }: AgentExecutionTimelineProps): react_jsx_runtime.JSX.Element;
+
+declare const AgentIterationNode: react.NamedExoticComponent<NodeProps>;
+
+declare const AgentIterationEdge: react.NamedExoticComponent<EdgeProps>;
+
+/**
+ * Graph Component Types
+ *
+ * Shared type definitions for graph components
+ */
+
+interface GraphThemeColors {
+    primary: string;
+    agent: string;
+    workflow: string;
+    trigger: string;
+    integration: string;
+    approval: string;
+    primaryGlow: string;
+    agentGlow: string;
+    workflowGlow: string;
+    triggerGlow: string;
+    integrationGlow: string;
+    approvalGlow: string;
+    edgeTriggers: string;
+    edgeUses: string;
+    edgeApproval: string;
+    edgeTriggersGlow: string;
+    edgeUsesGlow: string;
+    edgeApprovalGlow: string;
+}
+
+/**
+ * useGraphTheme - Hook for theme-aware graph colors
+ *
+ * Returns color values that adapt to light/dark mode for graph elements.
+ * Self-contained: derives colors from hardcoded domain palette using color-mix().
+ */
+
+declare function useGraphTheme(): GraphThemeColors;
+
+interface GraphContainerProps {
+    children: React.ReactNode;
+    height?: number | string;
+}
+/**
+ * Returns the animated grid background styles for the current theme.
+ * Uses color-mix() with --color-primary so the grid adapts to any preset.
+ *
+ * @param isDark - Whether dark mode is active
+ * @returns CSSProperties object with background styles
+ */
+declare function getGraphBackgroundStyles(isDark: boolean): CSSProperties;
+/**
+ * Hook that returns the animated grid background styles for the current theme
+ *
+ * @returns CSSProperties object with background styles
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const backgroundStyles = useGraphBackgroundStyles()
+ *
+ *   return (
+ *     <div style={{ ...myStyles, ...backgroundStyles }}>
+ *       Content
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare function useGraphBackgroundStyles(): CSSProperties;
+declare function GraphContainer({ children, height }: GraphContainerProps): react_jsx_runtime.JSX.Element;
+/**
+ * GraphBackground - Empty background component (no dots)
+ *
+ * Usage: Place inside <ReactFlow> component
+ */
+declare function GraphBackground(): null;
+
+/**
+ * GraphLegend - Legend panel for graph visualization
+ *
+ * Provides:
+ * - Theme-aware styling using CSS variables
+ * - Colored legend dots (for nodes) or lines (for edges)
+ * - Flexible positioning
+ */
+interface LegendItem {
+    color: string;
+    label: string;
+    /** Use 'line' for edge legends, 'dot' (default) for node legends */
+    type?: 'dot' | 'line';
+}
+interface GraphLegendProps {
+    title?: string;
+    items: LegendItem[];
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+/**
+ * GraphLegend - Main legend component
+ *
+ * Renders a glassmorphism panel with colored legend items.
+ * Can be positioned in any corner of the graph.
+ */
+declare function GraphLegend({ title, items, position }: GraphLegendProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * GraphFitViewButton - Custom fit view button for ReactFlow graphs
+ *
+ * Supports two variants:
+ * - 'reactflow': Native ReactFlow button style
+ * - 'mantine': Mantine ActionIcon with theme support
+ */
+type FitViewButtonVariant = 'reactflow' | 'mantine';
+interface GraphFitViewButtonProps {
+    padding?: number;
+    variant?: FitViewButtonVariant;
+    duration?: number;
+}
+/**
+ * GraphFitViewButton - Custom fit view button for ReactFlow visualizers
+ *
+ * Usage:
+ * ```tsx
+ * <ReactFlow>
+ *   <GraphFitViewButton padding={0.15} variant="mantine" duration={300} />
+ * </ReactFlow>
+ * ```
+ */
+declare function GraphFitViewButton({ padding, variant, duration }: GraphFitViewButtonProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * GraphFitViewHandler - Programmatic fit view trigger component
+ *
+ * Used to trigger fitView after animations complete (e.g., Mantine Collapse).
+ * Must be placed inside ReactFlow component.
+ *
+ * @example
+ * ```tsx
+ * const [fitViewTrigger, setFitViewTrigger] = useState(0)
+ *
+ * // When collapse expands, trigger fit view
+ * const handleExpand = () => {
+ *   setExpanded(true)
+ *   setFitViewTrigger(prev => prev + 1)
+ * }
+ *
+ * <ReactFlow>
+ *   <GraphFitViewHandler trigger={fitViewTrigger} />
+ * </ReactFlow>
+ * ```
+ */
+interface GraphFitViewHandlerProps {
+    /**
+     * Trigger value - increment to trigger fitView
+     * Must be > 0 to trigger
+     */
+    trigger?: number;
+    /**
+     * Padding around nodes when fitting view
+     * @default 0.15
+     */
+    padding?: number;
+    /**
+     * Animation duration in milliseconds
+     * @default 300
+     */
+    duration?: number;
+    /**
+     * Delay before triggering fitView (to wait for animations)
+     * @default 250
+     */
+    delay?: number;
+}
+/**
+ * Invisible component that triggers fitView when trigger value changes
+ *
+ * @param trigger - Increment this value to trigger fitView
+ * @param padding - Padding around nodes (default: 0.15)
+ * @param duration - Animation duration in ms (default: 300)
+ * @param delay - Delay before triggering in ms (default: 250)
+ */
+declare function GraphFitViewHandler({ trigger, padding, duration, delay }: GraphFitViewHandlerProps): null;
+
+interface BaseNodeProps {
+    children: ReactNode;
+    color: NodeColorType;
+    selected?: boolean;
+    highlighted?: boolean;
+    width?: number;
+    className?: string;
+    /** Handle layout direction: 'horizontal' (left/right) or 'vertical' (top/bottom) */
+    handleDirection?: 'horizontal' | 'vertical';
+    /** Whether to render the source (outgoing) handle. Default: true */
+    showSourceHandle?: boolean;
+    /** Whether to render the target (incoming) handle. Default: true */
+    showTargetHandle?: boolean;
+}
+declare const BaseNode: react.NamedExoticComponent<BaseNodeProps>;
+
+interface BaseEdgeProps {
+    id: string;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition: EdgeProps['sourcePosition'];
+    targetPosition: EdgeProps['targetPosition'];
+    color: string;
+    glowColor: string;
+    label?: string;
+    animated?: boolean;
+    selected?: boolean;
+    dimmed?: boolean;
+    edgeIndex?: number;
+    totalEdges?: number;
+}
+declare const BaseEdge: react.NamedExoticComponent<BaseEdgeProps>;
+
+interface TaskCardProps {
+    task: Task;
+    onViewExecution?: (params: {
+        resourceType: string;
+        resourceId: string;
+        executionId: string;
+    }) => void;
+    richTextRenderer?: (props: {
+        content: string;
+        onChange: (content: string) => void;
+        placeholder?: string;
+    }) => ReactNode;
+}
+declare function TaskCard({ task, onViewExecution, richTextRenderer }: TaskCardProps): react_jsx_runtime.JSX.Element;
+
+interface ActionModalProps {
+    action: ActionConfig;
+    task: Task;
+    opened: boolean;
+    onClose: () => void;
+    onSubmit: (payload: unknown, notes?: string) => void;
+    richTextRenderer?: (props: {
+        content: string;
+        onChange: (content: string) => void;
+        placeholder?: string;
+    }) => ReactNode;
+    error?: unknown;
+    isPending?: boolean;
+}
+declare function ActionModal({ action, task, opened, onClose, onSubmit, richTextRenderer, error, isPending }: ActionModalProps): react_jsx_runtime.JSX.Element | null;
+
+declare const iconMap: Record<string, typeof IconCheck>;
+/** Allowed icon names: IconCheck, IconX, IconRefresh, IconAlertTriangle, IconEdit, IconEye, IconRocket, IconMessageCircle, IconArrowUp, IconClock, IconFileText, IconSend, IconMail */
+declare function getIcon(iconName?: string): typeof IconCheck | null;
+
+interface ContentSectionsProps {
+    context: Record<string, unknown>;
+    sections?: string[];
+    titles?: Record<string, string>;
+}
+declare function ContentSections({ context, sections, titles }: ContentSectionsProps): react_jsx_runtime.JSX.Element;
+
+interface ResourceDefinitionSectionProps {
+    resourceDefinition: AIResourceDefinition;
+    defaultExpanded?: boolean;
+}
+declare function ResourceDefinitionSection({ resourceDefinition, defaultExpanded }: ResourceDefinitionSectionProps): react_jsx_runtime.JSX.Element;
+
+interface AgentDefinitionDisplayProps {
+    agent: SerializedAgentDefinition;
+    defaultExpanded?: boolean;
+}
+declare function AgentDefinitionDisplay({ agent, defaultExpanded }: AgentDefinitionDisplayProps): react_jsx_runtime.JSX.Element;
+
+interface WorkflowDefinitionDisplayProps {
+    workflow: SerializedWorkflowDefinition;
+    defaultExpanded?: boolean;
+}
+declare function WorkflowDefinitionDisplay({ workflow, defaultExpanded }: WorkflowDefinitionDisplayProps): react_jsx_runtime.JSX.Element;
+
+interface ContractDisplayProps {
+    contract: {
+        inputSchema: unknown;
+        outputSchema?: unknown;
+    };
+    defaultExpanded?: boolean;
+}
+declare function ContractDisplay({ contract, defaultExpanded }: ContractDisplayProps): react_jsx_runtime.JSX.Element;
+
+interface ConfigItem {
+    label: string;
+    value: ReactNode;
+    mono?: boolean;
+}
+interface ConfigCardProps {
+    icon: ReactNode;
+    title: string;
+    badge?: string;
+    items: ConfigItem[];
+    color?: string;
+}
+declare function ConfigCard({ icon, title, badge, items, color }: ConfigCardProps): react_jsx_runtime.JSX.Element | null;
+
+interface ToolInfo {
+    name: string;
+    description?: string;
+}
+interface ToolsListDisplayProps {
+    tools: Array<string | ToolInfo>;
+    compact?: boolean;
+    maxVisible?: number;
+}
+declare function ToolsListDisplay({ tools, compact, maxVisible }: ToolsListDisplayProps): react_jsx_runtime.JSX.Element;
+
+interface CollapsibleJsonSectionProps {
+    title: React.ReactNode;
+    data: unknown;
+    defaultExpanded?: boolean;
+}
+declare function CollapsibleJsonSection({ title, data, defaultExpanded }: CollapsibleJsonSectionProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Shared types for ResourceDefinition components
+ */
+/** Serialized knowledge node from API response */
+interface SerializedKnowledgeNode {
+    id: string;
+    description: string;
+    loaded: boolean;
+    hasPrompt: boolean;
+    [key: string]: unknown;
+}
+/** Serialized knowledge map from API response */
+interface SerializedKnowledgeMap {
+    nodeCount: number;
+    nodes: SerializedKnowledgeNode[];
+}
+
+interface NewKnowledgeMapGraphProps {
+    knowledgeMap: SerializedKnowledgeMap;
+    agentName: string;
+    compact?: boolean;
+    fitViewTrigger?: number;
+}
+declare function NewKnowledgeMapGraph(props: NewKnowledgeMapGraphProps): react_jsx_runtime.JSX.Element;
+
+interface KnowledgeMapNodeData {
+    id: string;
+    name: string;
+    description: string;
+    loaded: boolean;
+    hasPrompt: boolean;
+    isAgentNode: boolean;
+    [key: string]: unknown;
+}
+interface KnowledgeMapEdgeData {
+    [key: string]: unknown;
+}
+declare function useNewKnowledgeMapLayout(knowledgeMap: SerializedKnowledgeMap | undefined, agentName: string): {
+    nodes: Node<KnowledgeMapNodeData>[];
+    edges: Edge<KnowledgeMapEdgeData>[];
+};
+
+type NewKnowledgeMapNodeProps = NodeProps<Node<KnowledgeMapNodeData>>;
+declare const NewKnowledgeMapNode: react.NamedExoticComponent<NewKnowledgeMapNodeProps>;
+
+type NewKnowledgeMapEdgeProps = EdgeProps<Edge<KnowledgeMapEdgeData, string>>;
+declare const NewKnowledgeMapEdge: react.NamedExoticComponent<NewKnowledgeMapEdgeProps>;
+
+declare const showInfoNotification: (message: string) => void;
+declare const showSuccessNotification: (message: string) => void;
+declare const showErrorNotification: (error: Error | string) => void;
+declare const showWarningNotification: (message: string) => void;
+/**
+ * Show API error notification with type-safe error handling
+ * Automatically extracts error code, message, and request ID
+ *
+ * @param error - Any error (APIClientError, Error, or unknown)
+ *
+ * @example
+ * ```typescript
+ * import { showApiErrorNotification } from '@repo/ui/utils'
+ *
+ * onError: (error) => {
+ *   showApiErrorNotification(error)
+ * }
+ * ```
+ */
+declare const showApiErrorNotification: (error: unknown) => void;
+
+export { APIErrorAlert, ActionModal, AgentDefinitionDisplay, AgentExecutionTimeline, AgentExecutionVisualizer, AgentIterationEdge, AgentIterationNode, BaseEdge, BaseNode, CONTAINER_CONSTANTS, CardHeader, CollapsibleJsonSection, CollapsibleSection, ConfigCard, ConfirmationInputModal, ConfirmationModal, ContentSections, ContextViewer, ContractDisplay, CustomModal, CustomSelector, DetailCardSkeleton, ElevasisLoader, EmptyState, EmptyVisualizer, ExecutionLogsTable, ExecutionStats, ExecutionStatusBadge, FilterBar, FormFieldRenderer, GraphBackground, GraphContainer, GraphFitViewButton, GraphFitViewHandler, GraphLegend, JsonViewer, ListSkeleton, NavigationButton, NewKnowledgeMapEdge, NewKnowledgeMapGraph, NewKnowledgeMapNode, NotificationBell, NotificationItem, NotificationList, NotificationPanel, PageNotFound, PageTitleCaption, ResourceCard, ResourceDefinitionSection, ResourceHealthChart, SHARED_VIZ_CONSTANTS, SortableHeader, StatCard, StatCardSkeleton, StatsCardSkeleton, StyledMarkdown, TabCountBadge, TableSelectionToolbar, TaskCard, TimeRangeSelector, TimelineAxis, TimelineBar, TimelineContainer, TimelineRow, ToolsListDisplay, TrendIndicator, UnifiedWorkflowEdge, UnifiedWorkflowGraph, UnifiedWorkflowNode, VisualizerContainer, WorkflowDefinitionDisplay, WorkflowExecutionTimeline, catalogItemToResourceDefinition, getGraphBackgroundStyles, getHealthColor, getIcon, iconMap, showApiErrorNotification, showErrorNotification, showInfoNotification, showSuccessNotification, showWarningNotification, useGraphBackgroundStyles, useGraphTheme, useNewKnowledgeMapLayout };
+export type { BaseEdgeProps, ContextViewerProps, ExecutionLogEntry, ExecutionLogsTableProps, FitViewButtonVariant, GraphFitViewHandlerProps, JsonViewerProps, KnowledgeMapEdgeData, KnowledgeMapNodeData, NavigationButtonProps, SerializedKnowledgeMap, SerializedKnowledgeNode, StatCardProps, StyledMarkdownProps, TrendIndicatorProps };