@elevasis/ui 1.0.0

package/dist/display/index.d.ts

@@ -0,0 +1,606 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1, { ReactNode, ComponentType, CSSProperties } from 'react';
+import { MantineSpacing, MantineColor } from '@mantine/core';
+import { Icon } from '@tabler/icons-react';
+import { Components } from 'react-markdown';
+
+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 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 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 NavigationButtonProps {
+    /** Icon component to display */
+    icon: React$1.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$1.CSSProperties;
+    /** Custom transition duration in ms */
+    transitionDuration?: number;
+}
+declare const NavigationButton: React$1.FC<NavigationButtonProps>;
+
+declare function PageNotFound(): 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 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 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;
+
+/**
+ * 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';
+
+/**
+ * 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;
+}
+
+/**
+ * Time range selector for dashboard metrics
+ */
+type TimeRange = '1h' | '24h' | '7d' | '30d';
+
+/**
+ * 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];
+
+/**
+ * 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;
+
+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;
+
+/**
+ * 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 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;
+
+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 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 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;
+
+export { APIErrorAlert, CollapsibleSection, ContextViewer, CustomSelector, DetailCardSkeleton, EmptyState, JsonViewer, ListSkeleton, NavigationButton, PageNotFound, PageTitleCaption, ResourceCard, StatCard, StatCardSkeleton, StatsCardSkeleton, StyledMarkdown, TabCountBadge, TimeRangeSelector, TrendIndicator, catalogItemToResourceDefinition };
+export type { ContextViewerProps, JsonViewerProps, NavigationButtonProps, StatCardProps, StyledMarkdownProps, TrendIndicatorProps };

package/dist/display/index.js

@@ -0,0 +1,6 @@
+export { APIErrorAlert, CollapsibleSection, ContextViewer, CustomSelector, DetailCardSkeleton, EmptyState, JsonViewer, ListSkeleton, NavigationButton, PageNotFound, PageTitleCaption, ResourceCard, StatCard, StatCardSkeleton, StatsCardSkeleton, TabCountBadge, TimeRangeSelector, TrendIndicator, catalogItemToResourceDefinition } from '../chunk-OUHGHTE7.js';
+export { StyledMarkdown } from '../chunk-3KMDHCAR.js';
+import '../chunk-YZ6GTZXL.js';
+import '../chunk-7AI5ZYJ4.js';
+import '../chunk-7PLEQFHO.js';
+import '../chunk-Q7DJKLEN.js';