@inf-minds/jobs-ui 0.0.1

package/dist/components/ConnectionStatus.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Props for ConnectionStatus component.
+ */
+export interface ConnectionStatusProps {
+    /** Whether the connection is active */
+    connected: boolean;
+    /** Error message if connection failed */
+    error?: string;
+    /** Whether reconnection is in progress */
+    reconnecting?: boolean;
+    /** Label for connected state */
+    connectedLabel?: string;
+    /** Label for disconnected state */
+    disconnectedLabel?: string;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Connection status indicator component.
+ *
+ * Displays the current connection state with optional error
+ * and reconnecting indicators. Uses data attributes for styling.
+ *
+ * @example
+ * ```tsx
+ * <ConnectionStatus
+ *   connected={connected}
+ *   error={error}
+ *   reconnecting={!connected && !error}
+ * />
+ * ```
+ */
+export declare function ConnectionStatus({ connected, error, reconnecting, connectedLabel, disconnectedLabel, className, }: ConnectionStatusProps): JSX.Element;

package/dist/components/ConnectionStatus.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Connection status indicator component.
+ *
+ * Displays the current connection state with optional error
+ * and reconnecting indicators. Uses data attributes for styling.
+ *
+ * @example
+ * ```tsx
+ * <ConnectionStatus
+ *   connected={connected}
+ *   error={error}
+ *   reconnecting={!connected && !error}
+ * />
+ * ```
+ */
+export function ConnectionStatus({ connected, error, reconnecting, connectedLabel = 'Connected', disconnectedLabel = 'Disconnected', className, }) {
+    return (_jsxs("div", { "data-connection-status": true, "data-connected": connected, className: className, children: [_jsx("span", { "data-status-text": true, children: connected ? connectedLabel : disconnectedLabel }), !connected && reconnecting && (_jsx("span", { "data-reconnecting": true, children: "Reconnecting..." })), error && _jsx("span", { "data-error": true, children: error })] }));
+}

package/dist/components/CreateJobForm.d.ts

@@ -0,0 +1,34 @@
+import type { JobRendererRegistry } from '../types/renderers.js';
+/**
+ * Props for CreateJobForm component.
+ */
+export interface CreateJobFormProps {
+    /** Available job types */
+    jobTypes: string[];
+    /** Registry of renderers for job-specific form fields */
+    renderers: JobRendererRegistry;
+    /** Callback when form is submitted with valid input */
+    onSubmit: (jobType: string, input: unknown) => void;
+    /** Whether the form is disabled */
+    disabled?: boolean;
+    /** Whether submission is in progress */
+    loading?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Form for creating new jobs.
+ *
+ * Uses the renderer plugin system to display job-type-specific
+ * form fields and validation. Uses data attributes for styling.
+ *
+ * @example
+ * ```tsx
+ * <CreateJobForm
+ *   jobTypes={['haiku', 'summary']}
+ *   renderers={renderers}
+ *   onSubmit={(type, input) => createJob(type, input)}
+ * />
+ * ```
+ */
+export declare function CreateJobForm({ jobTypes, renderers, onSubmit, disabled, loading, className, }: CreateJobFormProps): JSX.Element;

package/dist/components/CreateJobForm.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ABOUTME: Form component for creating new jobs
+// ABOUTME: Uses renderer plugin system for job-type-specific form fields
+import { useState, useRef } from 'react';
+/**
+ * Form for creating new jobs.
+ *
+ * Uses the renderer plugin system to display job-type-specific
+ * form fields and validation. Uses data attributes for styling.
+ *
+ * @example
+ * ```tsx
+ * <CreateJobForm
+ *   jobTypes={['haiku', 'summary']}
+ *   renderers={renderers}
+ *   onSubmit={(type, input) => createJob(type, input)}
+ * />
+ * ```
+ */
+export function CreateJobForm({ jobTypes, renderers, onSubmit, disabled = false, loading = false, className, }) {
+    const [selectedType, setSelectedType] = useState(jobTypes[0] || '');
+    const [error, setError] = useState(null);
+    const formRef = useRef(null);
+    const renderer = renderers[selectedType];
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        setError(null);
+        if (!renderer || !formRef.current) {
+            return;
+        }
+        const formData = new FormData(formRef.current);
+        const result = renderer.validateInput(formData);
+        if (result && typeof result === 'object' && 'error' in result) {
+            setError(result.error);
+            return;
+        }
+        onSubmit(selectedType, result);
+    };
+    const handleTypeChange = (e) => {
+        setSelectedType(e.target.value);
+        setError(null);
+    };
+    const isDisabled = disabled || loading;
+    return (_jsxs("form", { ref: formRef, "data-create-job-form": true, "data-disabled": isDisabled || undefined, className: className, onSubmit: handleSubmit, children: [_jsx("select", { "aria-label": "Job type", value: selectedType, onChange: handleTypeChange, disabled: isDisabled, "data-job-type-select": true, children: jobTypes.map((type) => (_jsx("option", { value: type, children: type }, type))) }), _jsx("div", { "data-form-fields": true, children: renderer ? (renderer.renderFormFields()) : (_jsx("p", { children: "No configuration available for this job type" })) }), error && _jsx("div", { "data-form-error": true, children: error }), _jsx("button", { type: "submit", disabled: isDisabled, children: loading ? 'Creating...' : 'Create Job' })] }));
+}

package/dist/components/Dashboard.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+/**
+ * Props for Dashboard component.
+ */
+export interface DashboardProps {
+    /** Content for the header section */
+    header?: ReactNode;
+    /** Content for the sidebar section */
+    sidebar?: ReactNode;
+    /** Content for the footer section */
+    footer?: ReactNode;
+    /** Main content */
+    children: ReactNode;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Props for Dashboard.Section component.
+ */
+export interface DashboardSectionProps {
+    /** Section title */
+    title: string;
+    /** Section content */
+    children: ReactNode;
+    /** Whether section is collapsible */
+    collapsible?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Dashboard section subcomponent.
+ */
+declare function DashboardSection({ title, children, collapsible, className, }: DashboardSectionProps): JSX.Element;
+/**
+ * Dashboard layout component.
+ *
+ * Provides a flexible layout structure with optional header, sidebar,
+ * main content area, and footer. Uses data attributes for styling.
+ *
+ * @example
+ * ```tsx
+ * <Dashboard
+ *   header={<h1>Jobs Dashboard</h1>}
+ *   sidebar={<Navigation />}
+ * >
+ *   <Dashboard.Section title="Active Jobs">
+ *     <JobList jobs={jobs} />
+ *   </Dashboard.Section>
+ * </Dashboard>
+ * ```
+ */
+export declare function Dashboard({ header, sidebar, footer, children, className, }: DashboardProps): JSX.Element;
+export declare namespace Dashboard {
+    var Section: typeof DashboardSection;
+}
+export {};

package/dist/components/Dashboard.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Dashboard section subcomponent.
+ */
+function DashboardSection({ title, children, collapsible, className, }) {
+    return (_jsxs("section", { "data-dashboard-section": true, "data-collapsible": collapsible || undefined, "aria-label": title, className: className, children: [_jsx("h3", { children: title }), children] }));
+}
+/**
+ * Dashboard layout component.
+ *
+ * Provides a flexible layout structure with optional header, sidebar,
+ * main content area, and footer. Uses data attributes for styling.
+ *
+ * @example
+ * ```tsx
+ * <Dashboard
+ *   header={<h1>Jobs Dashboard</h1>}
+ *   sidebar={<Navigation />}
+ * >
+ *   <Dashboard.Section title="Active Jobs">
+ *     <JobList jobs={jobs} />
+ *   </Dashboard.Section>
+ * </Dashboard>
+ * ```
+ */
+export function Dashboard({ header, sidebar, footer, children, className, }) {
+    return (_jsxs("div", { "data-dashboard": true, "data-has-sidebar": sidebar ? true : undefined, "data-has-header": header ? true : undefined, className: className, children: [header && _jsx("header", { "data-dashboard-header": true, children: header }), _jsxs("div", { "data-dashboard-body": true, children: [sidebar && _jsx("aside", { "data-dashboard-sidebar": true, children: sidebar }), _jsx("main", { "data-dashboard-main": true, children: children })] }), footer && _jsx("footer", { "data-dashboard-footer": true, children: footer })] }));
+}
+// Attach Section as a static property
+Dashboard.Section = DashboardSection;

package/dist/components/JobCard.d.ts

@@ -0,0 +1,30 @@
+import type { JobData, JobTypeRenderer } from '../types/renderers.js';
+/**
+ * Props for JobCard component.
+ */
+export interface JobCardProps<TInput = unknown, TOutput = unknown> {
+    /** Job data to display */
+    job: JobData<TInput, TOutput>;
+    /** Custom renderer for job-specific content */
+    renderer?: JobTypeRenderer<TInput, TOutput>;
+    /** Callback when retry button is clicked */
+    onRetry?: (jobId: string) => void;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Generic job card component.
+ *
+ * Displays job status, content, errors, and retry functionality.
+ * Uses data attributes for CSS styling.
+ *
+ * @example
+ * ```tsx
+ * <JobCard
+ *   job={job}
+ *   renderer={myRenderer}
+ *   onRetry={(id) => handleRetry(id)}
+ * />
+ * ```
+ */
+export declare function JobCard<TInput = unknown, TOutput = unknown>({ job, renderer, onRetry, className, }: JobCardProps<TInput, TOutput>): JSX.Element;

package/dist/components/JobCard.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JobStatusBadge } from './JobStatusBadge.js';
+/**
+ * Generic job card component.
+ *
+ * Displays job status, content, errors, and retry functionality.
+ * Uses data attributes for CSS styling.
+ *
+ * @example
+ * ```tsx
+ * <JobCard
+ *   job={job}
+ *   renderer={myRenderer}
+ *   onRetry={(id) => handleRetry(id)}
+ * />
+ * ```
+ */
+export function JobCard({ job, renderer, onRetry, className, }) {
+    const isFailed = job.status === 'failed';
+    return (_jsxs("div", { "data-job-card": true, "data-status": job.status, className: className, children: [_jsxs("div", { "data-job-card-header": true, children: [_jsx("span", { "data-job-id": true, children: job.id }), _jsx(JobStatusBadge, { status: job.status })] }), _jsx("div", { "data-job-card-content": true, children: renderer ? (renderer.renderContent(job)) : (job.output !== undefined && (_jsx("pre", { children: JSON.stringify(job.output, null, 2) }))) }), job.error && (_jsx("div", { "data-job-card-error": true, children: job.error })), isFailed && onRetry && (_jsx("div", { "data-job-card-actions": true, children: _jsx("button", { onClick: () => onRetry(job.id), "data-retry-button": true, children: "Retry" }) }))] }));
+}

package/dist/components/JobEventLog.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+/**
+ * Props for JobEventLog component.
+ */
+export interface JobEventLogProps<TEvent> {
+    /** Events to display */
+    events: TEvent[];
+    /** Render function for each event */
+    renderEvent: (event: TEvent, index: number) => React.ReactNode;
+    /** Auto-scroll to bottom when new events arrive (default: true) */
+    autoScroll?: boolean;
+    /** Maximum height - enables scrolling */
+    maxHeight?: string | number;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Scrollable event log component.
+ *
+ * Unstyled by default - use CSS to style via data attributes:
+ * - `[data-job-event-log]` - container
+ * - `[data-job-event-log-empty]` - shown when no events
+ *
+ * @example
+ * ```tsx
+ * <JobEventLog
+ *   events={events}
+ *   maxHeight={400}
+ *   renderEvent={(event) => (
+ *     <div key={event.id}>
+ *       <span>{event.type}</span>: {event.message}
+ *     </div>
+ *   )}
+ * />
+ * ```
+ */
+export declare function JobEventLog<TEvent>({ events, renderEvent, autoScroll, maxHeight, className, }: JobEventLogProps<TEvent>): JSX.Element;

package/dist/components/JobEventLog.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// ABOUTME: JobEventLog component for displaying job events
+// ABOUTME: Supports auto-scroll and custom event rendering
+import { useRef, useEffect } from 'react';
+/**
+ * Scrollable event log component.
+ *
+ * Unstyled by default - use CSS to style via data attributes:
+ * - `[data-job-event-log]` - container
+ * - `[data-job-event-log-empty]` - shown when no events
+ *
+ * @example
+ * ```tsx
+ * <JobEventLog
+ *   events={events}
+ *   maxHeight={400}
+ *   renderEvent={(event) => (
+ *     <div key={event.id}>
+ *       <span>{event.type}</span>: {event.message}
+ *     </div>
+ *   )}
+ * />
+ * ```
+ */
+export function JobEventLog({ events, renderEvent, autoScroll = true, maxHeight, className, }) {
+    const containerRef = useRef(null);
+    const prevEventsLengthRef = useRef(events.length);
+    // Auto-scroll when new events arrive
+    useEffect(() => {
+        if (autoScroll && events.length > prevEventsLengthRef.current && containerRef.current) {
+            containerRef.current.scrollTop = containerRef.current.scrollHeight;
+        }
+        prevEventsLengthRef.current = events.length;
+    }, [events.length, autoScroll]);
+    const style = {};
+    if (maxHeight !== undefined) {
+        style.maxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
+        style.overflowY = 'auto';
+    }
+    return (_jsx("div", { ref: containerRef, "data-job-event-log": true, className: className, style: style, children: events.length === 0 ? (_jsx("div", { "data-job-event-log-empty": true, children: "No events yet" })) : (events.map((event, index) => renderEvent(event, index))) }));
+}

package/dist/components/JobFilters.d.ts

@@ -0,0 +1,36 @@
+import type { JobStatus } from './JobStatusBadge.js';
+/**
+ * Props for JobFilters component.
+ */
+export interface JobFiltersProps {
+    /** Current status filter value */
+    statusFilter: JobStatus | 'all';
+    /** Current type filter value */
+    typeFilter: string | 'all';
+    /** Available job types for filtering */
+    availableTypes: string[];
+    /** Callback when status filter changes */
+    onStatusChange: (status: JobStatus | 'all') => void;
+    /** Callback when type filter changes */
+    onTypeChange: (type: string | 'all') => void;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Filter controls for job lists.
+ *
+ * Provides dropdown filters for job status and type.
+ * Uses data attributes for CSS styling.
+ *
+ * @example
+ * ```tsx
+ * <JobFilters
+ *   statusFilter={statusFilter}
+ *   typeFilter={typeFilter}
+ *   availableTypes={['haiku', 'summary']}
+ *   onStatusChange={setStatusFilter}
+ *   onTypeChange={setTypeFilter}
+ * />
+ * ```
+ */
+export declare function JobFilters({ statusFilter, typeFilter, availableTypes, onStatusChange, onTypeChange, className, }: JobFiltersProps): JSX.Element;

package/dist/components/JobFilters.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Filter controls for job lists.
+ *
+ * Provides dropdown filters for job status and type.
+ * Uses data attributes for CSS styling.
+ *
+ * @example
+ * ```tsx
+ * <JobFilters
+ *   statusFilter={statusFilter}
+ *   typeFilter={typeFilter}
+ *   availableTypes={['haiku', 'summary']}
+ *   onStatusChange={setStatusFilter}
+ *   onTypeChange={setTypeFilter}
+ * />
+ * ```
+ */
+export function JobFilters({ statusFilter, typeFilter, availableTypes, onStatusChange, onTypeChange, className, }) {
+    return (_jsxs("div", { "data-job-filters": true, className: className, children: [_jsxs("select", { "aria-label": "Filter by status", value: statusFilter, onChange: (e) => onStatusChange(e.target.value), "data-filter-status": true, children: [_jsx("option", { value: "all", children: "All Statuses" }), _jsx("option", { value: "pending", children: "Pending" }), _jsx("option", { value: "running", children: "Running" }), _jsx("option", { value: "completed", children: "Completed" }), _jsx("option", { value: "failed", children: "Failed" })] }), _jsxs("select", { "aria-label": "Filter by type", value: typeFilter, onChange: (e) => onTypeChange(e.target.value), "data-filter-type": true, children: [_jsx("option", { value: "all", children: "All Types" }), availableTypes.map((type) => (_jsx("option", { value: type, children: type }, type)))] })] }));
+}

package/dist/components/JobList.d.ts

@@ -0,0 +1,35 @@
+import type { JobData, JobRendererRegistry } from '../types/renderers.js';
+/**
+ * Props for JobList component.
+ */
+export interface JobListProps {
+    /** Jobs to display */
+    jobs: JobData[];
+    /** Registry of renderers for different job types */
+    renderers?: JobRendererRegistry;
+    /** Callback when retry button is clicked */
+    onRetry?: (jobId: string) => void;
+    /** Title for the section */
+    title?: string;
+    /** Message to display when list is empty */
+    emptyMessage?: string;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Job list component with grid layout.
+ *
+ * Displays a list of jobs with optional title and empty state handling.
+ * Uses data attributes for CSS styling.
+ *
+ * @example
+ * ```tsx
+ * <JobList
+ *   jobs={jobs}
+ *   title="Active Jobs"
+ *   renderers={{ 'haiku': haikuRenderer }}
+ *   onRetry={(id) => handleRetry(id)}
+ * />
+ * ```
+ */
+export declare function JobList({ jobs, renderers, onRetry, title, emptyMessage, className, }: JobListProps): JSX.Element;

package/dist/components/JobList.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JobCard } from './JobCard.js';
+/**
+ * Job list component with grid layout.
+ *
+ * Displays a list of jobs with optional title and empty state handling.
+ * Uses data attributes for CSS styling.
+ *
+ * @example
+ * ```tsx
+ * <JobList
+ *   jobs={jobs}
+ *   title="Active Jobs"
+ *   renderers={{ 'haiku': haikuRenderer }}
+ *   onRetry={(id) => handleRetry(id)}
+ * />
+ * ```
+ */
+export function JobList({ jobs, renderers, onRetry, title, emptyMessage = 'No jobs', className, }) {
+    // Empty state
+    if (jobs.length === 0) {
+        return (_jsx("div", { "data-job-list-empty": true, className: className, children: emptyMessage }));
+    }
+    return (_jsxs("section", { "data-job-list": true, className: className, children: [title && (_jsxs("h2", { "data-job-list-title": true, children: [title, " (", jobs.length, ")"] })), _jsx("div", { "data-job-list-grid": true, children: jobs.map((job) => (_jsx(JobCard, { job: job, renderer: renderers?.[job.type], onRetry: onRetry }, job.id))) })] }));
+}

package/dist/components/JobProgress.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Props for JobProgress component.
+ */
+export interface JobProgressProps {
+    /** Progress value (0.0 - 1.0) */
+    value: number;
+    /** Optional message */
+    message?: string;
+    /** Show percentage label */
+    showLabel?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Simple progress bar component.
+ *
+ * Unstyled by default - use CSS to style via data attributes:
+ * - `[data-job-progress]` - container
+ * - `[data-job-progress-bar]` - the fill bar
+ * - `[data-job-progress-label]` - the percentage label
+ * - `[data-job-progress-message]` - the message
+ *
+ * @example
+ * ```tsx
+ * <JobProgress value={0.5} message="Processing..." showLabel />
+ * ```
+ *
+ * @example CSS
+ * ```css
+ * [data-job-progress] {
+ *   height: 8px;
+ *   background: #e5e7eb;
+ *   border-radius: 4px;
+ *   overflow: hidden;
+ * }
+ *
+ * [data-job-progress-bar] {
+ *   height: 100%;
+ *   background: #3b82f6;
+ *   transition: width 0.3s ease;
+ * }
+ * ```
+ */
+export declare function JobProgress({ value, message, showLabel, className, }: JobProgressProps): JSX.Element;

package/dist/components/JobProgress.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Simple progress bar component.
+ *
+ * Unstyled by default - use CSS to style via data attributes:
+ * - `[data-job-progress]` - container
+ * - `[data-job-progress-bar]` - the fill bar
+ * - `[data-job-progress-label]` - the percentage label
+ * - `[data-job-progress-message]` - the message
+ *
+ * @example
+ * ```tsx
+ * <JobProgress value={0.5} message="Processing..." showLabel />
+ * ```
+ *
+ * @example CSS
+ * ```css
+ * [data-job-progress] {
+ *   height: 8px;
+ *   background: #e5e7eb;
+ *   border-radius: 4px;
+ *   overflow: hidden;
+ * }
+ *
+ * [data-job-progress-bar] {
+ *   height: 100%;
+ *   background: #3b82f6;
+ *   transition: width 0.3s ease;
+ * }
+ * ```
+ */
+export function JobProgress({ value, message, showLabel = false, className, }) {
+    const percentage = Math.round(Math.max(0, Math.min(1, value)) * 100);
+    return (_jsxs("div", { "data-job-progress": true, className: className, children: [_jsx("div", { "data-job-progress-bar": true, style: { width: `${percentage}%` }, role: "progressbar", "aria-valuenow": percentage, "aria-valuemin": 0, "aria-valuemax": 100 }), showLabel && (_jsxs("span", { "data-job-progress-label": true, children: [percentage, "%"] })), message && (_jsx("span", { "data-job-progress-message": true, children: message }))] }));
+}

package/dist/components/JobStatusBadge.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Job status values.
+ */
+export type JobStatus = 'pending' | 'running' | 'completed' | 'failed' | 'cancelled';
+/**
+ * Props for JobStatusBadge component.
+ */
+export interface JobStatusBadgeProps {
+    /** Job status */
+    status: JobStatus;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Status badge component.
+ *
+ * Unstyled by default - use CSS to style via data attributes:
+ * - `[data-job-status]` - container
+ * - `[data-status="pending"]`, `[data-status="running"]`, etc. - for status-specific styles
+ *
+ * @example
+ * ```tsx
+ * <JobStatusBadge status="running" />
+ * ```
+ *
+ * @example CSS
+ * ```css
+ * [data-job-status] {
+ *   padding: 2px 8px;
+ *   border-radius: 4px;
+ *   font-size: 12px;
+ *   font-weight: 500;
+ * }
+ *
+ * [data-status="pending"] { background: #fef3c7; color: #92400e; }
+ * [data-status="running"] { background: #dbeafe; color: #1e40af; }
+ * [data-status="completed"] { background: #d1fae5; color: #065f46; }
+ * [data-status="failed"] { background: #fee2e2; color: #991b1b; }
+ * [data-status="cancelled"] { background: #f3f4f6; color: #4b5563; }
+ * ```
+ */
+export declare function JobStatusBadge({ status, className, }: JobStatusBadgeProps): JSX.Element;

package/dist/components/JobStatusBadge.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Status badge component.
+ *
+ * Unstyled by default - use CSS to style via data attributes:
+ * - `[data-job-status]` - container
+ * - `[data-status="pending"]`, `[data-status="running"]`, etc. - for status-specific styles
+ *
+ * @example
+ * ```tsx
+ * <JobStatusBadge status="running" />
+ * ```
+ *
+ * @example CSS
+ * ```css
+ * [data-job-status] {
+ *   padding: 2px 8px;
+ *   border-radius: 4px;
+ *   font-size: 12px;
+ *   font-weight: 500;
+ * }
+ *
+ * [data-status="pending"] { background: #fef3c7; color: #92400e; }
+ * [data-status="running"] { background: #dbeafe; color: #1e40af; }
+ * [data-status="completed"] { background: #d1fae5; color: #065f46; }
+ * [data-status="failed"] { background: #fee2e2; color: #991b1b; }
+ * [data-status="cancelled"] { background: #f3f4f6; color: #4b5563; }
+ * ```
+ */
+export function JobStatusBadge({ status, className, }) {
+    return (_jsx("span", { "data-job-status": true, "data-status": status, className: className, children: status }));
+}

package/dist/components/index.d.ts

@@ -0,0 +1,9 @@
+export { JobProgress, type JobProgressProps } from './JobProgress.js';
+export { JobEventLog, type JobEventLogProps } from './JobEventLog.js';
+export { JobStatusBadge, type JobStatusBadgeProps, type JobStatus } from './JobStatusBadge.js';
+export { JobCard, type JobCardProps } from './JobCard.js';
+export { JobList, type JobListProps } from './JobList.js';
+export { JobFilters, type JobFiltersProps } from './JobFilters.js';
+export { ConnectionStatus, type ConnectionStatusProps } from './ConnectionStatus.js';
+export { CreateJobForm, type CreateJobFormProps } from './CreateJobForm.js';
+export { Dashboard, type DashboardProps, type DashboardSectionProps } from './Dashboard.js';

package/dist/components/index.js

@@ -0,0 +1,11 @@
+// ABOUTME: Components module exports
+// ABOUTME: Re-exports all React components for job UI
+export { JobProgress } from './JobProgress.js';
+export { JobEventLog } from './JobEventLog.js';
+export { JobStatusBadge } from './JobStatusBadge.js';
+export { JobCard } from './JobCard.js';
+export { JobList } from './JobList.js';
+export { JobFilters } from './JobFilters.js';
+export { ConnectionStatus } from './ConnectionStatus.js';
+export { CreateJobForm } from './CreateJobForm.js';
+export { Dashboard } from './Dashboard.js';

package/dist/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export { useJobStream, type UseJobStreamOptions, type UseJobStreamResult } from './use-job-stream.js';
+export { useJob, type UseJobResult, type FetchJobFn, type JobData } from './use-job.js';
+export { useJobList, type UseJobListResult, type FetchJobsFn, type ListJobsOptions, type ListJobsResult } from './use-job-list.js';
+export { useConnection, type UseConnectionOptions, type UseConnectionResult } from './use-connection.js';