@happyvertical/smrt-jobs 0.30.0

package/dist/svelte/components/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Re-export types for co-located component imports.
+ *
+ * svelte-package rewrites '../types.js' → './types.js' when building
+ * components in a subdirectory. This barrel file ensures the rewritten
+ * path resolves correctly in the dist output.
+ */
+export { formatDuration, formatRelativeTime, getPriorityClass, getPriorityLabel, getStatusVariant, type JobData, type JobFilter, type JobPriority, type JobSort, type JobStats, type JobStatus, type QueueStats, type TimeoutBehavior, } from '../types.js';
+//# sourceMappingURL=types.d.ts.map

package/dist/svelte/components/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,OAAO,EACZ,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,OAAO,EACZ,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,eAAe,GACrB,MAAM,aAAa,CAAC"}

package/dist/svelte/components/types.js

@@ -0,0 +1,8 @@
+/**
+ * Re-export types for co-located component imports.
+ *
+ * svelte-package rewrites '../types.js' → './types.js' when building
+ * components in a subdirectory. This barrel file ensures the rewritten
+ * path resolves correctly in the dist output.
+ */
+export { formatDuration, formatRelativeTime, getPriorityClass, getPriorityLabel, getStatusVariant, } from '../types.js';

package/dist/svelte/i18n.d.ts

@@ -0,0 +1,22 @@
+export declare const M: {
+    readonly 'jobs.job_dashboard.recent_jobs': "jobs.job_dashboard.recent_jobs";
+    readonly 'jobs.job_dashboard.view_all': "jobs.job_dashboard.view_all";
+    readonly 'jobs.job_dashboard.no_recent_jobs': "jobs.job_dashboard.no_recent_jobs";
+    readonly 'jobs.job_dashboard.failed_jobs': "jobs.job_dashboard.failed_jobs";
+    readonly 'jobs.job_dashboard.view_all_count': "jobs.job_dashboard.view_all_count";
+    readonly 'jobs.job_dashboard.no_failed_jobs': "jobs.job_dashboard.no_failed_jobs";
+    readonly 'jobs.job_detail.job_info': "jobs.job_detail.job_info";
+    readonly 'jobs.job_detail.object_type': "jobs.job_detail.object_type";
+    readonly 'jobs.job_detail.object_id': "jobs.job_detail.object_id";
+    readonly 'jobs.job_detail.scheduled_for': "jobs.job_detail.scheduled_for";
+    readonly 'jobs.job_detail.last_error': "jobs.job_detail.last_error";
+    readonly 'jobs.job_list.run_at': "jobs.job_list.run_at";
+    readonly 'jobs.job_list.loading_jobs': "jobs.job_list.loading_jobs";
+    readonly 'jobs.job_list.no_jobs_found': "jobs.job_list.no_jobs_found";
+    readonly 'jobs.job_list.select_all_jobs': "jobs.job_list.select_all_jobs";
+    readonly 'jobs.job_list.select_job': "jobs.job_list.select_job";
+    readonly 'jobs.job_stats.total_jobs': "jobs.job_stats.total_jobs";
+    readonly 'jobs.job_stats.success_rate': "jobs.job_stats.success_rate";
+    readonly 'jobs.job_stats.avg_duration': "jobs.job_stats.avg_duration";
+};
+//# sourceMappingURL=i18n.d.ts.map

package/dist/svelte/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../src/svelte/i18n.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;CAoBZ,CAAC"}

package/dist/svelte/i18n.js

@@ -0,0 +1,22 @@
+import { defineMessages } from '@happyvertical/smrt-ui/i18n';
+export const M = defineMessages({
+    'jobs.job_dashboard.recent_jobs': 'Recent Jobs',
+    'jobs.job_dashboard.view_all': 'View All',
+    'jobs.job_dashboard.no_recent_jobs': 'No recent jobs',
+    'jobs.job_dashboard.failed_jobs': 'Failed Jobs',
+    'jobs.job_dashboard.view_all_count': 'View All ({count})',
+    'jobs.job_dashboard.no_failed_jobs': 'No failed jobs',
+    'jobs.job_detail.job_info': 'Job Info',
+    'jobs.job_detail.object_type': 'Object Type',
+    'jobs.job_detail.object_id': 'Object ID',
+    'jobs.job_detail.scheduled_for': 'Scheduled For',
+    'jobs.job_detail.last_error': 'Last Error',
+    'jobs.job_list.run_at': 'Run At',
+    'jobs.job_list.loading_jobs': 'Loading jobs...',
+    'jobs.job_list.no_jobs_found': 'No jobs found',
+    'jobs.job_list.select_all_jobs': 'Select all jobs',
+    'jobs.job_list.select_job': 'Select job',
+    'jobs.job_stats.total_jobs': 'Total Jobs',
+    'jobs.job_stats.success_rate': 'Success Rate',
+    'jobs.job_stats.avg_duration': 'Avg Duration',
+});

package/dist/svelte/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Jobs Module Svelte Components
+ *
+ * Optional Svelte UI components for background job management.
+ * Auto-registers components with ModuleUIRegistry on import.
+ *
+ * @packageDocumentation
+ */
+import type { ComponentProps } from 'svelte';
+import JobActions from './components/JobActions.svelte';
+import JobDashboard from './components/JobDashboard.svelte';
+import JobDetail from './components/JobDetail.svelte';
+import JobList from './components/JobList.svelte';
+import JobStats from './components/JobStats.svelte';
+import JobStatusBadge from './components/JobStatusBadge.svelte';
+export { JobActions, JobDashboard, JobDetail, JobList, JobStats, JobStatusBadge, };
+export type JobActionsProps = ComponentProps<typeof JobActions>;
+export type JobDashboardProps = ComponentProps<typeof JobDashboard>;
+export type JobDetailProps = ComponentProps<typeof JobDetail>;
+export type JobListProps = ComponentProps<typeof JobList>;
+export type JobStatsProps = ComponentProps<typeof JobStats>;
+export type JobStatusBadgeProps = ComponentProps<typeof JobStatusBadge>;
+export type { JobActionsProps as JobActionsPropsLegacy, JobDashboardProps as JobDashboardPropsLegacy, JobData, JobDetailProps as JobDetailPropsLegacy, JobFilter, JobListProps as JobListPropsLegacy, JobPriority, JobSort, JobStats as JobStatsData, JobStatsProps as JobStatsPropsLegacy, JobStatus, QueueStats, TimeoutBehavior, } from './types.js';
+export { formatDuration, formatRelativeTime, getPriorityClass, getPriorityLabel, getStatusVariant, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/svelte/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAI7C,OAAO,UAAU,MAAM,gCAAgC,CAAC;AACxD,OAAO,YAAY,MAAM,kCAAkC,CAAC;AAC5D,OAAO,SAAS,MAAM,+BAA+B,CAAC;AACtD,OAAO,OAAO,MAAM,6BAA6B,CAAC;AAClD,OAAO,QAAQ,MAAM,8BAA8B,CAAC;AACpD,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAGhE,OAAO,EACL,UAAU,EACV,YAAY,EACZ,SAAS,EACT,OAAO,EACP,QAAQ,EACR,cAAc,GACf,CAAC;AAGF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC;AACpE,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9D,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1D,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5D,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;AAGxE,YAAY,EACV,eAAe,IAAI,qBAAqB,EACxC,iBAAiB,IAAI,uBAAuB,EAC5C,OAAO,EACP,cAAc,IAAI,oBAAoB,EACtC,SAAS,EACT,YAAY,IAAI,kBAAkB,EAClC,WAAW,EACX,OAAO,EACP,QAAQ,IAAI,YAAY,EACxB,aAAa,IAAI,mBAAmB,EACpC,SAAS,EACT,UAAU,EACV,eAAe,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,YAAY,CAAC"}

package/dist/svelte/index.js

@@ -0,0 +1,28 @@
+/**
+ * Jobs Module Svelte Components
+ *
+ * Optional Svelte UI components for background job management.
+ * Auto-registers components with ModuleUIRegistry on import.
+ *
+ * @packageDocumentation
+ */
+import { ModuleUIRegistry } from '@happyvertical/smrt-ui/registry';
+import { JOBS_MODULE_META } from '../ui.js';
+// Import components
+import JobActions from './components/JobActions.svelte';
+import JobDashboard from './components/JobDashboard.svelte';
+import JobDetail from './components/JobDetail.svelte';
+import JobList from './components/JobList.svelte';
+import JobStats from './components/JobStats.svelte';
+import JobStatusBadge from './components/JobStatusBadge.svelte';
+// Export components
+export { JobActions, JobDashboard, JobDetail, JobList, JobStats, JobStatusBadge, };
+export { formatDuration, formatRelativeTime, getPriorityClass, getPriorityLabel, getStatusVariant, } from './types.js';
+// Auto-register with ModuleUIRegistry
+ModuleUIRegistry.registerModule(JOBS_MODULE_META);
+ModuleUIRegistry.register('@happyvertical/smrt-jobs', 'job-dashboard', JobDashboard);
+ModuleUIRegistry.register('@happyvertical/smrt-jobs', 'job-list', JobList);
+ModuleUIRegistry.register('@happyvertical/smrt-jobs', 'job-detail', JobDetail);
+ModuleUIRegistry.register('@happyvertical/smrt-jobs', 'job-stats', JobStats);
+ModuleUIRegistry.register('@happyvertical/smrt-jobs', 'job-actions', JobActions);
+ModuleUIRegistry.register('@happyvertical/smrt-jobs', 'job-status-badge', JobStatusBadge);

package/dist/svelte/playground.d.ts

@@ -0,0 +1,329 @@
+declare const _default: {
+    packageName: string;
+    displayName: string;
+    description: string | undefined;
+    moduleMeta: import("@happyvertical/smrt-types").SmrtModuleMeta;
+    entries: ({
+        id: string;
+        title: string;
+        description: string;
+        loadComponent: () => Promise<typeof import("./components/JobDashboard.svelte")>;
+        order: number;
+        props: {
+            stats: {
+                total: number;
+                pending: number;
+                ready: number;
+                running: number;
+                completed: number;
+                failed: number;
+                cancelled: number;
+                avgDuration: number;
+                successRate: number;
+            };
+            queues: {
+                name: string;
+                pending: number;
+                running: number;
+                completed24h: number;
+                failed24h: number;
+                avgDuration: number;
+            }[];
+            recentJobs: ({
+                id: string;
+                queue: string;
+                objectType: string;
+                objectId: string;
+                method: string;
+                args: {
+                    force: boolean;
+                    profileKey?: undefined;
+                    destination?: undefined;
+                };
+                status: string;
+                priority: number;
+                attempts: number;
+                maxAttempts: number;
+                timeout: number;
+                timeoutBehavior: string;
+                runAt: string;
+                startedAt: string;
+                completedAt: null;
+                lastError: null;
+                resultPointer: null;
+                workerId: string;
+                createdAt: string;
+                updatedAt: string;
+            } | {
+                id: string;
+                queue: string;
+                objectType: string;
+                objectId: string;
+                method: string;
+                args: {
+                    profileKey: string;
+                    force?: undefined;
+                    destination?: undefined;
+                };
+                status: string;
+                priority: number;
+                attempts: number;
+                maxAttempts: number;
+                timeout: number;
+                timeoutBehavior: string;
+                runAt: string;
+                startedAt: string;
+                completedAt: string;
+                lastError: string;
+                resultPointer: null;
+                workerId: string;
+                createdAt: string;
+                updatedAt: string;
+            } | {
+                id: string;
+                queue: string;
+                objectType: string;
+                objectId: null;
+                method: string;
+                args: {
+                    destination: string;
+                    force?: undefined;
+                    profileKey?: undefined;
+                };
+                status: string;
+                priority: number;
+                attempts: number;
+                maxAttempts: number;
+                timeout: number;
+                timeoutBehavior: string;
+                runAt: string;
+                startedAt: string;
+                completedAt: string;
+                lastError: null;
+                resultPointer: string;
+                workerId: string;
+                createdAt: string;
+                updatedAt: string;
+            })[];
+            failedJobs: ({
+                id: string;
+                queue: string;
+                objectType: string;
+                objectId: string;
+                method: string;
+                args: {
+                    force: boolean;
+                    profileKey?: undefined;
+                    destination?: undefined;
+                };
+                status: string;
+                priority: number;
+                attempts: number;
+                maxAttempts: number;
+                timeout: number;
+                timeoutBehavior: string;
+                runAt: string;
+                startedAt: string;
+                completedAt: null;
+                lastError: null;
+                resultPointer: null;
+                workerId: string;
+                createdAt: string;
+                updatedAt: string;
+            } | {
+                id: string;
+                queue: string;
+                objectType: string;
+                objectId: string;
+                method: string;
+                args: {
+                    profileKey: string;
+                    force?: undefined;
+                    destination?: undefined;
+                };
+                status: string;
+                priority: number;
+                attempts: number;
+                maxAttempts: number;
+                timeout: number;
+                timeoutBehavior: string;
+                runAt: string;
+                startedAt: string;
+                completedAt: string;
+                lastError: string;
+                resultPointer: null;
+                workerId: string;
+                createdAt: string;
+                updatedAt: string;
+            } | {
+                id: string;
+                queue: string;
+                objectType: string;
+                objectId: null;
+                method: string;
+                args: {
+                    destination: string;
+                    force?: undefined;
+                    profileKey?: undefined;
+                };
+                status: string;
+                priority: number;
+                attempts: number;
+                maxAttempts: number;
+                timeout: number;
+                timeoutBehavior: string;
+                runAt: string;
+                startedAt: string;
+                completedAt: string;
+                lastError: null;
+                resultPointer: string;
+                workerId: string;
+                createdAt: string;
+                updatedAt: string;
+            })[];
+            onJobClick: () => void;
+            onRetry: () => void;
+            onCancel: () => void;
+            onViewAll: () => void;
+            onViewFailed: () => void;
+            job?: undefined;
+            onDelete?: undefined;
+            status?: undefined;
+            size?: undefined;
+        };
+        modes: {
+            mock: {
+                label: string;
+            };
+        };
+    } | {
+        id: string;
+        title: string;
+        description: string;
+        loadComponent: () => Promise<typeof import("./components/JobDetail.svelte")>;
+        order: number;
+        props: {
+            job: {
+                id: string;
+                queue: string;
+                objectType: string;
+                objectId: string;
+                method: string;
+                args: {
+                    force: boolean;
+                    profileKey?: undefined;
+                    destination?: undefined;
+                };
+                status: string;
+                priority: number;
+                attempts: number;
+                maxAttempts: number;
+                timeout: number;
+                timeoutBehavior: string;
+                runAt: string;
+                startedAt: string;
+                completedAt: null;
+                lastError: null;
+                resultPointer: null;
+                workerId: string;
+                createdAt: string;
+                updatedAt: string;
+            } | {
+                id: string;
+                queue: string;
+                objectType: string;
+                objectId: string;
+                method: string;
+                args: {
+                    profileKey: string;
+                    force?: undefined;
+                    destination?: undefined;
+                };
+                status: string;
+                priority: number;
+                attempts: number;
+                maxAttempts: number;
+                timeout: number;
+                timeoutBehavior: string;
+                runAt: string;
+                startedAt: string;
+                completedAt: string;
+                lastError: string;
+                resultPointer: null;
+                workerId: string;
+                createdAt: string;
+                updatedAt: string;
+            } | {
+                id: string;
+                queue: string;
+                objectType: string;
+                objectId: null;
+                method: string;
+                args: {
+                    destination: string;
+                    force?: undefined;
+                    profileKey?: undefined;
+                };
+                status: string;
+                priority: number;
+                attempts: number;
+                maxAttempts: number;
+                timeout: number;
+                timeoutBehavior: string;
+                runAt: string;
+                startedAt: string;
+                completedAt: string;
+                lastError: null;
+                resultPointer: string;
+                workerId: string;
+                createdAt: string;
+                updatedAt: string;
+            };
+            onRetry: () => void;
+            onDelete: () => void;
+            stats?: undefined;
+            queues?: undefined;
+            recentJobs?: undefined;
+            failedJobs?: undefined;
+            onJobClick?: undefined;
+            onCancel?: undefined;
+            onViewAll?: undefined;
+            onViewFailed?: undefined;
+            status?: undefined;
+            size?: undefined;
+        };
+        modes: {
+            mock: {
+                label: string;
+            };
+        };
+    } | {
+        id: string;
+        title: string;
+        description: string;
+        loadComponent: () => Promise<typeof import("./components/JobStatusBadge.svelte")>;
+        order: number;
+        props: {
+            status: string;
+            size: string;
+            stats?: undefined;
+            queues?: undefined;
+            recentJobs?: undefined;
+            failedJobs?: undefined;
+            onJobClick?: undefined;
+            onRetry?: undefined;
+            onCancel?: undefined;
+            onViewAll?: undefined;
+            onViewFailed?: undefined;
+            job?: undefined;
+            onDelete?: undefined;
+        };
+        modes: {
+            mock: {
+                label: string;
+            };
+        };
+    })[];
+};
+export default _default;
+//# sourceMappingURL=playground.d.ts.map

package/dist/svelte/playground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../src/svelte/playground.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoHA,wBAiEE"}

package/dist/svelte/playground.js

@@ -0,0 +1,174 @@
+import { JOBS_MODULE_META } from '../ui.js';
+const noop = () => { };
+const sampleJobs = [
+    {
+        id: 'job-publish-1',
+        queue: 'content',
+        objectType: '@happyvertical/smrt-content:Article',
+        objectId: 'article-aurora-kitchen',
+        method: 'publish',
+        args: { force: false },
+        status: 'running',
+        priority: 80,
+        attempts: 1,
+        maxAttempts: 3,
+        timeout: 600000,
+        timeoutBehavior: 'fail',
+        runAt: '2026-03-21T16:15:00.000Z',
+        startedAt: '2026-03-21T16:15:15.000Z',
+        completedAt: null,
+        lastError: null,
+        resultPointer: null,
+        workerId: 'worker-content-1',
+        createdAt: '2026-03-21T16:14:50.000Z',
+        updatedAt: '2026-03-21T16:15:20.000Z',
+    },
+    {
+        id: 'job-review-2',
+        queue: 'governance',
+        objectType: '@happyvertical/smrt-content:GovernancePolicy',
+        objectId: 'policy-facts',
+        method: 'recalculateReadiness',
+        args: { profileKey: 'publication' },
+        status: 'failed',
+        priority: 95,
+        attempts: 3,
+        maxAttempts: 3,
+        timeout: 300000,
+        timeoutBehavior: 'fail',
+        runAt: '2026-03-21T15:40:00.000Z',
+        startedAt: '2026-03-21T15:40:02.000Z',
+        completedAt: '2026-03-21T15:41:11.000Z',
+        lastError: 'Relationship column missing during readiness sync.',
+        resultPointer: null,
+        workerId: 'worker-governance-2',
+        createdAt: '2026-03-21T15:39:30.000Z',
+        updatedAt: '2026-03-21T15:41:11.000Z',
+    },
+    {
+        id: 'job-export-3',
+        queue: 'exports',
+        objectType: '@happyvertical/smrt-content:ArticleCollection',
+        objectId: null,
+        method: 'buildStaticFeed',
+        args: { destination: 'cdn' },
+        status: 'completed',
+        priority: 40,
+        attempts: 1,
+        maxAttempts: 2,
+        timeout: 900000,
+        timeoutBehavior: 'warn',
+        runAt: '2026-03-21T14:30:00.000Z',
+        startedAt: '2026-03-21T14:30:00.000Z',
+        completedAt: '2026-03-21T14:31:25.000Z',
+        lastError: null,
+        resultPointer: 'results/exports/build-static-feed-3.json',
+        workerId: 'worker-export-1',
+        createdAt: '2026-03-21T14:29:52.000Z',
+        updatedAt: '2026-03-21T14:31:25.000Z',
+    },
+];
+const sampleStats = {
+    total: 3421,
+    pending: 24,
+    ready: 13,
+    running: 4,
+    completed: 3340,
+    failed: 31,
+    cancelled: 9,
+    avgDuration: 18450,
+    successRate: 0.976,
+};
+const sampleQueues = [
+    {
+        name: 'content',
+        pending: 8,
+        running: 2,
+        completed24h: 412,
+        failed24h: 4,
+        avgDuration: 22800,
+    },
+    {
+        name: 'governance',
+        pending: 5,
+        running: 1,
+        completed24h: 188,
+        failed24h: 7,
+        avgDuration: 31200,
+    },
+    {
+        name: 'exports',
+        pending: 11,
+        running: 1,
+        completed24h: 94,
+        failed24h: 1,
+        avgDuration: 52200,
+    },
+];
+const loadJobDashboard = () => import('./components/JobDashboard.svelte');
+const loadJobDetail = () => import('./components/JobDetail.svelte');
+const loadJobStatusBadge = () => import('./components/JobStatusBadge.svelte');
+export default {
+    packageName: '@happyvertical/smrt-jobs',
+    displayName: JOBS_MODULE_META.displayName,
+    description: JOBS_MODULE_META.description,
+    moduleMeta: JOBS_MODULE_META,
+    entries: [
+        {
+            id: 'job-dashboard',
+            title: 'Job Dashboard',
+            description: 'Operational overview for background job queues with recent and failed work.',
+            loadComponent: loadJobDashboard,
+            order: 1,
+            props: {
+                stats: sampleStats,
+                queues: sampleQueues,
+                recentJobs: sampleJobs,
+                failedJobs: sampleJobs.filter((job) => job.status === 'failed'),
+                onJobClick: noop,
+                onRetry: noop,
+                onCancel: noop,
+                onViewAll: noop,
+                onViewFailed: noop,
+            },
+            modes: {
+                mock: {
+                    label: 'Mock',
+                },
+            },
+        },
+        {
+            id: 'job-detail',
+            title: 'Job Detail',
+            description: 'Detailed execution view for a single background job with retry and cancellation actions.',
+            loadComponent: loadJobDetail,
+            order: 2,
+            props: {
+                job: sampleJobs[1],
+                onRetry: noop,
+                onDelete: noop,
+            },
+            modes: {
+                mock: {
+                    label: 'Mock',
+                },
+            },
+        },
+        {
+            id: 'job-status-badge',
+            title: 'Job Status Badge',
+            description: 'Compact status treatment used throughout the jobs surface.',
+            loadComponent: loadJobStatusBadge,
+            order: 3,
+            props: {
+                status: 'running',
+                size: 'md',
+            },
+            modes: {
+                mock: {
+                    label: 'Mock',
+                },
+            },
+        },
+    ],
+};