@happyvertical/smrt-jobs 0.30.0

package/dist/svelte/components/JobActions.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+/**
+ * JobActions - Action buttons for job management
+ */
+
+import { Button } from '@happyvertical/smrt-ui/ui';
+import type { JobData } from './types.js';
+
+export interface Props {
+  /** Job to perform actions on */
+  job: JobData;
+  /** Show retry button */
+  showRetry?: boolean;
+  /** Show cancel button */
+  showCancel?: boolean;
+  /** Show delete button */
+  showDelete?: boolean;
+  /** Callback when retry is clicked */
+  onRetry?: (job: JobData) => void;
+  /** Callback when cancel is clicked */
+  onCancel?: (job: JobData) => void;
+  /** Callback when delete is clicked */
+  onDelete?: (job: JobData) => void;
+  /** Compact mode */
+  compact?: boolean;
+}
+
+let {
+  job,
+  showRetry = true,
+  showCancel = true,
+  showDelete = false,
+  onRetry,
+  onCancel,
+  onDelete,
+  compact = false,
+}: Props = $props();
+
+const canRetry = $derived(
+  job.status === 'failed' || job.status === 'cancelled',
+);
+const canCancel = $derived(
+  job.status === 'pending' ||
+    job.status === 'ready' ||
+    job.status === 'running',
+);
+
+function handleRetry() {
+  onRetry?.(job);
+}
+
+function handleCancel() {
+  onCancel?.(job);
+}
+
+function handleDelete() {
+  onDelete?.(job);
+}
+</script>
+
+<div class="job-actions" class:compact>
+  {#if showRetry && canRetry}
+    <Button
+      variant="secondary"
+      size={compact ? 'sm' : 'md'}
+      onclick={handleRetry}
+    >
+      Retry
+    </Button>
+  {/if}
+
+  {#if showCancel && canCancel}
+    <Button
+      variant="secondary"
+      size={compact ? 'sm' : 'md'}
+      onclick={handleCancel}
+    >
+      Cancel
+    </Button>
+  {/if}
+
+  {#if showDelete}
+    <Button
+      variant="danger"
+      size={compact ? 'sm' : 'md'}
+      onclick={handleDelete}
+    >
+      Delete
+    </Button>
+  {/if}
+</div>
+
+<style>
+  .job-actions {
+    display: flex;
+    gap: var(--smrt-spacing-sm, 0.5rem);
+    align-items: center;
+  }
+
+  .compact {
+    gap: var(--smrt-spacing-xs, 0.25rem);
+  }
+</style>

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

@@ -0,0 +1,23 @@
+import type { JobData } from './types.js';
+export interface Props {
+    /** Job to perform actions on */
+    job: JobData;
+    /** Show retry button */
+    showRetry?: boolean;
+    /** Show cancel button */
+    showCancel?: boolean;
+    /** Show delete button */
+    showDelete?: boolean;
+    /** Callback when retry is clicked */
+    onRetry?: (job: JobData) => void;
+    /** Callback when cancel is clicked */
+    onCancel?: (job: JobData) => void;
+    /** Callback when delete is clicked */
+    onDelete?: (job: JobData) => void;
+    /** Compact mode */
+    compact?: boolean;
+}
+declare const JobActions: import("svelte").Component<Props, {}, "">;
+type JobActions = ReturnType<typeof JobActions>;
+export default JobActions;
+//# sourceMappingURL=JobActions.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"JobActions.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/JobActions.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAG1C,MAAM,WAAW,KAAK;IACpB,gCAAgC;IAChC,GAAG,EAAE,OAAO,CAAC;IACb,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yBAAyB;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qCAAqC;IACrC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,mBAAmB;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAiED,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/components/JobDashboard.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+/**
+ * JobDashboard - Combined overview panel for background jobs
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Card } from '@happyvertical/smrt-ui/ui';
+import { M } from '../i18n.js';
+import JobList from './JobList.svelte';
+import JobStatsSummary from './JobStats.svelte';
+import type { JobData, JobStats, QueueStats } from './types.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** Statistics data */
+  stats: JobStats;
+  /** Queue breakdown */
+  queues?: QueueStats[];
+  /** Recent jobs */
+  recentJobs?: JobData[];
+  /** Failed jobs */
+  failedJobs?: JobData[];
+  /** Loading state */
+  loading?: boolean;
+  /** Callback when job is clicked */
+  onJobClick?: (job: JobData) => void;
+  /** Callback when retry is clicked */
+  onRetry?: (job: JobData) => void;
+  /** Callback when cancel is clicked */
+  onCancel?: (job: JobData) => void;
+  /** Callback when view all is clicked */
+  onViewAll?: () => void;
+  /** Callback when view failed is clicked */
+  onViewFailed?: () => void;
+}
+
+let {
+  stats,
+  queues = [],
+  recentJobs = [],
+  failedJobs = [],
+  loading = false,
+  onJobClick,
+  onRetry,
+  onCancel,
+  onViewAll,
+  onViewFailed,
+}: Props = $props();
+</script>
+
+<div class="job-dashboard" class:loading>
+  <!-- Stats Overview -->
+  <section class="job-dashboard__section">
+    <JobStatsSummary {stats} {queues} {loading} />
+  </section>
+
+  <div class="job-dashboard__panels">
+    <!-- Recent Jobs -->
+    <section class="job-dashboard__section">
+      <Card>
+        {#snippet header()}
+          <div class="panel-header">
+            <h2>{t(M['jobs.job_dashboard.recent_jobs'])}</h2>
+            {#if onViewAll}
+              <button class="view-all-btn" onclick={onViewAll}>{t(M['jobs.job_dashboard.view_all'])}</button>
+            {/if}
+          </div>
+        {/snippet}
+
+        <JobList
+          jobs={recentJobs}
+          {loading}
+          showActions={false}
+          {onJobClick}
+        >
+          {#snippet empty()}
+            <p class="empty-message">{t(M['jobs.job_dashboard.no_recent_jobs'])}</p>
+          {/snippet}
+        </JobList>
+      </Card>
+    </section>
+
+    <!-- Failed Jobs -->
+    {#if failedJobs.length > 0 || stats.failed > 0}
+      <section class="job-dashboard__section">
+        <Card>
+          {#snippet header()}
+            <div class="panel-header panel-header--error">
+              <h2>{t(M['jobs.job_dashboard.failed_jobs'])}</h2>
+              {#if onViewFailed}
+                <button class="view-all-btn" onclick={onViewFailed}
+                  >{t(M['jobs.job_dashboard.view_all_count'], { count: stats.failed })}</button
+                >
+              {/if}
+            </div>
+          {/snippet}
+
+          <JobList
+            jobs={failedJobs}
+            {loading}
+            showActions={true}
+            {onJobClick}
+            {onRetry}
+            {onCancel}
+          >
+            {#snippet empty()}
+              <p class="empty-message empty-message--success">
+                {t(M['jobs.job_dashboard.no_failed_jobs'])}
+              </p>
+            {/snippet}
+          </JobList>
+        </Card>
+      </section>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .job-dashboard {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-lg, 1.5rem);
+  }
+
+  .job-dashboard.loading {
+    opacity: 0.7;
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .job-dashboard.loading {
+      transition: none;
+    }
+  }
+
+  .job-dashboard__section {
+    width: 100%;
+  }
+
+  .job-dashboard__panels {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: var(--smrt-spacing-lg, 1.5rem);
+  }
+
+  @media (max-width: 900px) {
+    .job-dashboard__panels {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .panel-header h2 {
+    margin: 0;
+    font: var(--smrt-typography-title-medium-font, 600 1rem / 1.5 sans-serif);
+  }
+
+  .panel-header--error h2 {
+    color: var(--smrt-color-error, #ba1a1a);
+  }
+
+  .view-all-btn {
+    padding: var(--smrt-spacing-xs, 0.25rem) var(--smrt-spacing-sm, 0.5rem);
+    border: none;
+    background: none;
+    color: var(--smrt-color-primary, #005ac1);
+    font: var(--smrt-typography-label-large-font, 500 0.875rem / 1.25 sans-serif);
+    cursor: pointer;
+    border-radius: var(--smrt-radius-small, 0.25rem);
+    transition: background-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  .view-all-btn:hover {
+    background: var(--smrt-color-primary-container, #d6e3ff);
+  }
+
+  .empty-message {
+    padding: var(--smrt-spacing-md, 1rem);
+    text-align: center;
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .empty-message--success {
+    color: var(--smrt-color-tertiary, #006c4f);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .view-all-btn {
+      transition: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,27 @@
+import type { JobData, JobStats, QueueStats } from './types.js';
+export interface Props {
+    /** Statistics data */
+    stats: JobStats;
+    /** Queue breakdown */
+    queues?: QueueStats[];
+    /** Recent jobs */
+    recentJobs?: JobData[];
+    /** Failed jobs */
+    failedJobs?: JobData[];
+    /** Loading state */
+    loading?: boolean;
+    /** Callback when job is clicked */
+    onJobClick?: (job: JobData) => void;
+    /** Callback when retry is clicked */
+    onRetry?: (job: JobData) => void;
+    /** Callback when cancel is clicked */
+    onCancel?: (job: JobData) => void;
+    /** Callback when view all is clicked */
+    onViewAll?: () => void;
+    /** Callback when view failed is clicked */
+    onViewFailed?: () => void;
+}
+declare const JobDashboard: import("svelte").Component<Props, {}, "">;
+type JobDashboard = ReturnType<typeof JobDashboard>;
+export default JobDashboard;
+//# sourceMappingURL=JobDashboard.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"JobDashboard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/JobDashboard.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAGhE,MAAM,WAAW,KAAK;IACpB,sBAAsB;IACtB,KAAK,EAAE,QAAQ,CAAC;IAChB,sBAAsB;IACtB,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IACtB,kBAAkB;IAClB,UAAU,CAAC,EAAE,OAAO,EAAE,CAAC;IACvB,kBAAkB;IAClB,UAAU,CAAC,EAAE,OAAO,EAAE,CAAC;IACvB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,qCAAqC;IACrC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAqFD,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/components/JobDetail.svelte

@@ -0,0 +1,256 @@
+<script lang="ts">
+/**
+ * JobDetail - Detailed view of a single job
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Card } from '@happyvertical/smrt-ui/ui';
+import { M } from '../i18n.js';
+import JobActions from './JobActions.svelte';
+import JobStatusBadge from './JobStatusBadge.svelte';
+import type { JobData } from './types.js';
+import {
+  formatDuration,
+  formatRelativeTime,
+  getPriorityLabel,
+} from './types.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** Job to display */
+  job: JobData;
+  /** Show result data */
+  showResult?: boolean;
+  /** Callback when retry is clicked */
+  onRetry?: (job: JobData) => void;
+  /** Callback when cancel is clicked */
+  onCancel?: (job: JobData) => void;
+  /** Callback when delete is clicked */
+  onDelete?: (job: JobData) => void;
+}
+
+let { job, showResult = true, onRetry, onCancel, onDelete }: Props = $props();
+
+// Calculate duration if job has started
+const duration = $derived.by(() => {
+  if (!job.startedAt) return null;
+  const start = new Date(job.startedAt).getTime();
+  const end = job.completedAt
+    ? new Date(job.completedAt).getTime()
+    : Date.now();
+  return end - start;
+});
+
+// Format args for display
+const formattedArgs = $derived(JSON.stringify(job.args, null, 2));
+</script>
+
+<div class="job-detail">
+  <Card>
+    {#snippet header()}
+      <div class="job-detail__header">
+        <div class="job-detail__title">
+          <h2>{job.objectType}.{job.method}()</h2>
+          <JobStatusBadge status={job.status} size="md" />
+        </div>
+        <div class="job-detail__actions">
+          <JobActions
+            {job}
+            showDelete={!!onDelete}
+            {onRetry}
+            {onCancel}
+            {onDelete}
+          />
+        </div>
+      </div>
+    {/snippet}
+
+    <div class="job-detail__content">
+      <div class="job-detail__grid">
+        <!-- Basic Info -->
+        <div class="job-detail__section">
+          <h3>{t(M['jobs.job_detail.job_info'])}</h3>
+          <dl class="job-detail__list">
+            <dt>ID</dt>
+            <dd><code>{job.id}</code></dd>
+
+            <dt>Queue</dt>
+            <dd>{job.queue}</dd>
+
+            <dt>Priority</dt>
+            <dd>{getPriorityLabel(job.priority)} ({job.priority})</dd>
+
+            <dt>{t(M['jobs.job_detail.object_type'])}</dt>
+            <dd>{job.objectType}</dd>
+
+            {#if job.objectId}
+              <dt>{t(M['jobs.job_detail.object_id'])}</dt>
+              <dd><code>{job.objectId}</code></dd>
+            {/if}
+
+            <dt>Method</dt>
+            <dd><code>{job.method}</code></dd>
+          </dl>
+        </div>
+
+        <!-- Timing -->
+        <div class="job-detail__section">
+          <h3>Timing</h3>
+          <dl class="job-detail__list">
+            <dt>Created</dt>
+            <dd>{formatRelativeTime(job.createdAt)}</dd>
+
+            <dt>{t(M['jobs.job_detail.scheduled_for'])}</dt>
+            <dd>{formatRelativeTime(job.runAt)}</dd>
+
+            {#if job.startedAt}
+              <dt>Started</dt>
+              <dd>{formatRelativeTime(job.startedAt)}</dd>
+            {/if}
+
+            {#if job.completedAt}
+              <dt>Completed</dt>
+              <dd>{formatRelativeTime(job.completedAt)}</dd>
+            {/if}
+
+            {#if duration !== null}
+              <dt>Duration</dt>
+              <dd>{formatDuration(duration)}</dd>
+            {/if}
+
+            <dt>Timeout</dt>
+            <dd>{formatDuration(job.timeout)} ({job.timeoutBehavior})</dd>
+          </dl>
+        </div>
+
+        <!-- Execution -->
+        <div class="job-detail__section">
+          <h3>Execution</h3>
+          <dl class="job-detail__list">
+            <dt>Attempts</dt>
+            <dd>{job.attempts} / {job.maxAttempts}</dd>
+
+            {#if job.workerId}
+              <dt>Worker</dt>
+              <dd><code>{job.workerId}</code></dd>
+            {/if}
+
+            {#if job.resultPointer}
+              <dt>Result</dt>
+              <dd><code>{job.resultPointer}</code></dd>
+            {/if}
+          </dl>
+        </div>
+      </div>
+
+      <!-- Arguments -->
+      <div class="job-detail__section job-detail__section--full">
+        <h3>Arguments</h3>
+        <pre class="job-detail__code">{formattedArgs}</pre>
+      </div>
+
+      <!-- Error -->
+      {#if job.lastError}
+        <div class="job-detail__section job-detail__section--full job-detail__section--error">
+          <h3>{t(M['jobs.job_detail.last_error'])}</h3>
+          <pre class="job-detail__code job-detail__code--error">{job.lastError}</pre>
+        </div>
+      {/if}
+    </div>
+  </Card>
+</div>
+
+<style>
+  .job-detail {
+    width: 100%;
+  }
+
+  .job-detail__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--smrt-spacing-md, 1rem);
+  }
+
+  .job-detail__title {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-md, 1rem);
+  }
+
+  .job-detail__title h2 {
+    margin: 0;
+    font: var(--smrt-typography-title-large-font, 1.125rem / 1.25 sans-serif);
+    font-family: var(--smrt-font-family-mono, ui-monospace, monospace);
+  }
+
+  .job-detail__content {
+    padding: var(--smrt-spacing-md, 1rem) 0;
+  }
+
+  .job-detail__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: var(--smrt-spacing-lg, 1.5rem);
+    margin-bottom: var(--smrt-spacing-lg, 1.5rem);
+  }
+
+  .job-detail__section h3 {
+    margin: 0 0 var(--spacing-sm, 0.5rem) 0;
+    font-size: var(--smrt-typography-title-small-size, 0.875rem);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    color: var(--color-text-secondary, #6b7280);
+    text-transform: uppercase;
+    letter-spacing: var(--smrt-typography-title-small-tracking, 0.05em);
+  }
+
+  .job-detail__section--full {
+    grid-column: 1 / -1;
+  }
+
+  .job-detail__section--error h3 {
+    color: var(--color-error, #dc2626);
+  }
+
+  .job-detail__list {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: var(--smrt-spacing-xs, 0.25rem) var(--smrt-spacing-md, 1rem);
+    margin: 0;
+  }
+
+  .job-detail__list dt {
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
+  }
+
+  .job-detail__list dd {
+    margin: 0;
+    font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
+  }
+
+  .job-detail__list code {
+    padding: 0.125rem 0.375rem;
+    background: var(--smrt-color-surface-container, #f3f4f6);
+    border-radius: var(--smrt-radius-small, 0.25rem);
+    font: var(--smrt-typography-body-small-font, 0.75rem / 1.25 sans-serif);
+  }
+
+  .job-detail__code {
+    margin: 0;
+    padding: var(--smrt-spacing-md, 1rem);
+    background: var(--smrt-color-surface-container, #f3f4f6);
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    font-family: var(--smrt-font-family-mono, ui-monospace, monospace);
+    font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .job-detail__code--error {
+    background: var(--smrt-color-error-container, #ffdad6);
+    color: var(--smrt-color-on-error-container, #410002);
+  }
+</style>

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

@@ -0,0 +1,17 @@
+import type { JobData } from './types.js';
+export interface Props {
+    /** Job to display */
+    job: JobData;
+    /** Show result data */
+    showResult?: boolean;
+    /** Callback when retry is clicked */
+    onRetry?: (job: JobData) => void;
+    /** Callback when cancel is clicked */
+    onCancel?: (job: JobData) => void;
+    /** Callback when delete is clicked */
+    onDelete?: (job: JobData) => void;
+}
+declare const JobDetail: import("svelte").Component<Props, {}, "">;
+type JobDetail = ReturnType<typeof JobDetail>;
+export default JobDetail;
+//# sourceMappingURL=JobDetail.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"JobDetail.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/JobDetail.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAQ1C,MAAM,WAAW,KAAK;IACpB,qBAAqB;IACrB,GAAG,EAAE,OAAO,CAAC;IACb,uBAAuB;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qCAAqC;IACrC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC;AAgJD,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}