velocious-jobler 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kasper Stöckel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,99 @@
+# velocious-jobler
+
+Track background-job progress and show it **live in a React Native / Expo UI**, driven by [Velocious](https://github.com/kaspernj/velocious) frontend-model websockets. A [jobler](https://github.com/kaspernj/jobler)-style tracker for the Velocious stack.
+
+A background service creates a *jobler job* record, updates its status/progress as it runs, and — because the job is a broadcasting Velocious frontend-model resource — the Expo UI subscribes to it and renders progress as it happens. No polling.
+
+> Status: `0.0.1`. Extracted from a working implementation in a real app; the runner and the UI component are framework-light and reusable. The Velocious model, model-base, frontend-model resource and migration are **shipped by the package** as a fully-generic (no-account) data layer — a consuming app registers the package and the framework auto-discovers them.
+
+## Install
+
+```bash
+npm install velocious-jobler
+```
+
+Peer dependencies (frontend component only): `react`, `react-native`, `prop-types`, and `set-state-compare` (Velocious's ShapeComponent).
+
+## 1. The jobler job data layer (shipped)
+
+The package ships a **fully-generic** `JoblerJob` — model, model-base, read-only frontend-model resource and migration — with **no account/owner coupling** (no `account_id`, no `belongsTo`). It is a standalone background-job progress tracker: any authenticated user can `find` one by its unguessable uuid id, and there is **no `index`/list command**, so there is no cross-tenant listing leak. Only your backend services create and mutate jobs; clients just read + subscribe.
+
+Columns (global DB — not a tenant DB):
+
+| column | type | notes |
+| --- | --- | --- |
+| `id` | uuid | primary key |
+| `name` | string | human label, e.g. `"Deleting project Foo"` |
+| `kind` | string | e.g. `"project_destroy"` |
+| `status` | string | `pending` \| `running` \| `succeeded` \| `failed` |
+| `progress_current` | integer | default `0` |
+| `progress_total` | integer, null | `null` = indeterminate |
+| `status_message` | string, null | current step |
+| `error_message` | text, null | set on failure |
+| `result_data` | text/json, null | optional |
+| `started_at` / `finished_at` | datetime, null | |
+| `created_at` / `updated_at` | datetime | timestamps |
+
+Register the package in your Velocious app so the framework auto-discovers the model, resource and migration:
+
+```js
+import joblerPackage from "velocious-jobler/velocious-package"
+
+// In your Velocious Configuration:
+new Configuration({
+  packages: [joblerPackage]
+  // ...your other config
+})
+```
+
+Then generate its frontend model and run the migration:
+
+```bash
+velocious generate:frontend-models
+velocious db:migrate
+```
+
+Because the resource is a broadcasting read-only frontend-model resource, its create/update/destroy events flow over the websocket to subscribed clients.
+
+## 2. Backend: run work with live progress
+
+```js
+import JoblerJobRunner from "velocious-jobler/backend/jobler-job-runner"
+
+await new JoblerJobRunner({
+  // optional: route failures to your bug reporter
+  onError: (error, joblerJob) => bugReporter.reportError({error, parameters: {joblerJobId: joblerJob.id()}})
+}).run({
+  joblerJob,
+  work: async (report) => {
+    await report.progress({current: 0, total: 3, message: "Dropping database"})
+    await dropDatabase()
+    await report.progress({current: 1, total: 3, message: "Cleaning up"})
+    await cleanup()
+    await report.progress({current: 2, total: 3, message: "Finishing"})
+    await finish()
+  }
+})
+```
+
+`run(...)` marks the job `running`, saves each `report.progress(...)`/`report.message(...)` update (each `save()` is a websocket push), then marks it `succeeded` — or, on a throw, marks it `failed`, calls `onError`, and rethrows so your background-job retry policy still applies. Dispatch it from a normal Velocious background job.
+
+## 3. Frontend: show it in Expo
+
+```jsx
+import JobProgressIndicator from "velocious-jobler/frontend/job-progress-indicator"
+import JoblerJob from "@/src/frontend-models/jobler-job.js"
+
+<JobProgressIndicator
+  model={JoblerJob}
+  joblerJobId={joblerJobId}
+  onSucceeded={() => router.replace("/somewhere")}
+  onFailed={({errorMessage}) => FlashNotifications.error(errorMessage)}
+/>
+```
+
+It loads the job through `model.findBy({id})`, subscribes with `model.onUpdate(...)`, renders status + a progress bar + the message, and fires `onSucceeded` / `onFailed` once when the job reaches a terminal status. Override the built-in English labels via the `labels` prop (`{loading, working, failed}`).
+
+## License
+
+MIT © Kasper Stöckel

package/build/src/backend/jobler-job-runner.d.ts

@@ -0,0 +1,74 @@
+export const JOBLER_JOB_STATUS_PENDING: "pending";
+export const JOBLER_JOB_STATUS_RUNNING: "running";
+export const JOBLER_JOB_STATUS_SUCCEEDED: "succeeded";
+export const JOBLER_JOB_STATUS_FAILED: "failed";
+/**
+ * The subset of a jobler-job model this runner needs. Any Velocious model with a
+ * `status` / `progress_current` / `progress_total` / `status_message` /
+ * `error_message` / `started_at` / `finished_at` schema satisfies it.
+ * @typedef {object} JoblerJobLike
+ * @property {(status: string) => void} setStatus
+ * @property {(current: number) => void} setProgressCurrent
+ * @property {(total: number | null) => void} setProgressTotal
+ * @property {(message: string | null) => void} setStatusMessage
+ * @property {(message: string | null) => void} setErrorMessage
+ * @property {(at: Date) => void} setStartedAt
+ * @property {(at: Date) => void} setFinishedAt
+ * @property {() => Promise<unknown>} save
+ */
+/**
+ * @typedef {object} JoblerProgressReporter
+ * @property {(args: {current?: number, total?: number | null, message?: string | null}) => Promise<void>} progress
+ * @property {(message: string) => Promise<void>} message
+ */
+/**
+ * Runs a unit of work while keeping a jobler-job's status and progress live. Each
+ * update is a `save()`, which — because the job is a broadcasting Velocious
+ * frontend-model resource — pushes a websocket update the UI can render as it
+ * happens. Framework-agnostic: pass any model that implements {@link JoblerJobLike}
+ * and, optionally, an `onError` reporter (e.g. your app's bug reporter).
+ */
+export default class JoblerJobRunner {
+    /**
+     * @param {{onError?: (error: Error, joblerJob: JoblerJobLike) => (void | Promise<void>)}} [args={}]
+     */
+    constructor(args?: {
+        onError?: (error: Error, joblerJob: JoblerJobLike) => (void | Promise<void>);
+    });
+    onError: ((error: Error, joblerJob: JoblerJobLike) => (void | Promise<void>)) | undefined;
+    /**
+     * Marks the job running, runs `work` (handed a progress reporter), then marks it
+     * succeeded. On failure it marks the job failed, calls `onError` if provided, and
+     * rethrows so the dispatching background job's retry policy still applies.
+     * @param {{joblerJob: JoblerJobLike, work: (report: JoblerProgressReporter) => Promise<void>}} args
+     * @returns {Promise<void>}
+     */
+    run({ joblerJob, work }: {
+        joblerJob: JoblerJobLike;
+        work: (report: JoblerProgressReporter) => Promise<void>;
+    }): Promise<void>;
+}
+/**
+ * The subset of a jobler-job model this runner needs. Any Velocious model with a
+ * `status` / `progress_current` / `progress_total` / `status_message` /
+ * `error_message` / `started_at` / `finished_at` schema satisfies it.
+ */
+export type JoblerJobLike = {
+    setStatus: (status: string) => void;
+    setProgressCurrent: (current: number) => void;
+    setProgressTotal: (total: number | null) => void;
+    setStatusMessage: (message: string | null) => void;
+    setErrorMessage: (message: string | null) => void;
+    setStartedAt: (at: Date) => void;
+    setFinishedAt: (at: Date) => void;
+    save: () => Promise<unknown>;
+};
+export type JoblerProgressReporter = {
+    progress: (args: {
+        current?: number;
+        total?: number | null;
+        message?: string | null;
+    }) => Promise<void>;
+    message: (message: string) => Promise<void>;
+};
+//# sourceMappingURL=jobler-job-runner.d.ts.map

package/build/src/backend/jobler-job-runner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jobler-job-runner.d.ts","sourceRoot":"","sources":["../../../src/backend/jobler-job-runner.js"],"names":[],"mappings":"AAEA,wCAAyC,SAAS,CAAA;AAClD,wCAAyC,SAAS,CAAA;AAClD,0CAA2C,WAAW,CAAA;AACtD,uCAAwC,QAAQ,CAAA;AAEhD;;;;;;;;;;;;;GAaG;AAEH;;;;GAIG;AAEH;;;;;;GAMG;AACH;IACE;;OAEG;IACH,mBAFW;QAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,KAAK,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAA;KAAC,EAIxF;IADC,kBAH4B,KAAK,aAAa,aAAa,KAAK,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,cAG3D;IAG7B;;;;;;OAMG;IACH,yBAHW;QAAC,SAAS,EAAE,aAAa,CAAC;QAAC,IAAI,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;KAAC,GACjF,OAAO,CAAC,IAAI,CAAC,CAkDzB;CACF;;;;;;;eAvFa,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI;wBACxB,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI;sBACzB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;sBAC9B,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;qBAChC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;kBAChC,CAAC,EAAE,EAAE,IAAI,KAAK,IAAI;mBAClB,CAAC,EAAE,EAAE,IAAI,KAAK,IAAI;UAClB,MAAM,OAAO,CAAC,OAAO,CAAC;;;cAKtB,CAAC,IAAI,EAAE;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAC,KAAK,OAAO,CAAC,IAAI,CAAC;aAC3F,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC"}

package/build/src/backend/jobler-job-runner.js

@@ -0,0 +1,87 @@
+// @ts-check
+export const JOBLER_JOB_STATUS_PENDING = "pending";
+export const JOBLER_JOB_STATUS_RUNNING = "running";
+export const JOBLER_JOB_STATUS_SUCCEEDED = "succeeded";
+export const JOBLER_JOB_STATUS_FAILED = "failed";
+/**
+ * The subset of a jobler-job model this runner needs. Any Velocious model with a
+ * `status` / `progress_current` / `progress_total` / `status_message` /
+ * `error_message` / `started_at` / `finished_at` schema satisfies it.
+ * @typedef {object} JoblerJobLike
+ * @property {(status: string) => void} setStatus
+ * @property {(current: number) => void} setProgressCurrent
+ * @property {(total: number | null) => void} setProgressTotal
+ * @property {(message: string | null) => void} setStatusMessage
+ * @property {(message: string | null) => void} setErrorMessage
+ * @property {(at: Date) => void} setStartedAt
+ * @property {(at: Date) => void} setFinishedAt
+ * @property {() => Promise<unknown>} save
+ */
+/**
+ * @typedef {object} JoblerProgressReporter
+ * @property {(args: {current?: number, total?: number | null, message?: string | null}) => Promise<void>} progress
+ * @property {(message: string) => Promise<void>} message
+ */
+/**
+ * Runs a unit of work while keeping a jobler-job's status and progress live. Each
+ * update is a `save()`, which — because the job is a broadcasting Velocious
+ * frontend-model resource — pushes a websocket update the UI can render as it
+ * happens. Framework-agnostic: pass any model that implements {@link JoblerJobLike}
+ * and, optionally, an `onError` reporter (e.g. your app's bug reporter).
+ */
+export default class JoblerJobRunner {
+    /**
+     * @param {{onError?: (error: Error, joblerJob: JoblerJobLike) => (void | Promise<void>)}} [args={}]
+     */
+    constructor(args = {}) {
+        this.onError = args.onError;
+    }
+    /**
+     * Marks the job running, runs `work` (handed a progress reporter), then marks it
+     * succeeded. On failure it marks the job failed, calls `onError` if provided, and
+     * rethrows so the dispatching background job's retry policy still applies.
+     * @param {{joblerJob: JoblerJobLike, work: (report: JoblerProgressReporter) => Promise<void>}} args
+     * @returns {Promise<void>}
+     */
+    async run({ joblerJob, work }) {
+        /** @type {JoblerProgressReporter} */
+        const report = {
+            progress: async ({ current, total, message } = {}) => {
+                if (current !== undefined) {
+                    joblerJob.setProgressCurrent(current);
+                }
+                if (total !== undefined) {
+                    joblerJob.setProgressTotal(total);
+                }
+                if (message !== undefined) {
+                    joblerJob.setStatusMessage(message);
+                }
+                await joblerJob.save();
+            },
+            message: async (message) => {
+                joblerJob.setStatusMessage(message);
+                await joblerJob.save();
+            }
+        };
+        joblerJob.setStatus(JOBLER_JOB_STATUS_RUNNING);
+        joblerJob.setStartedAt(new Date());
+        await joblerJob.save();
+        try {
+            await work(report);
+            joblerJob.setStatus(JOBLER_JOB_STATUS_SUCCEEDED);
+            joblerJob.setFinishedAt(new Date());
+            await joblerJob.save();
+        }
+        catch (error) {
+            const normalizedError = error instanceof Error ? error : new Error(String(error));
+            joblerJob.setStatus(JOBLER_JOB_STATUS_FAILED);
+            joblerJob.setErrorMessage(normalizedError.message);
+            joblerJob.setFinishedAt(new Date());
+            await joblerJob.save();
+            if (this.onError) {
+                await this.onError(normalizedError, joblerJob);
+            }
+            throw normalizedError;
+        }
+    }
+}

package/build/src/database/migrations/20260630140000-create-jobler-jobs.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Generic background-job progress records (a jobler-style tracker). A service
+ * creates one before starting heavy async work and updates its status/progress as
+ * it runs; the Expo UI subscribes to the broadcasting frontend model to show live
+ * progress. Lives in the global/default DB only — never a project tenant DB, since
+ * a job tracking a tenant-DB teardown cannot live inside the database it drops.
+ */
+export default class CreateJoblerJobs extends Migration {
+}
+import Migration from "velocious/build/src/database/migration/index.js";
+//# sourceMappingURL=20260630140000-create-jobler-jobs.d.ts.map

package/build/src/database/migrations/20260630140000-create-jobler-jobs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"20260630140000-create-jobler-jobs.d.ts","sourceRoot":"","sources":["../../../../src/database/migrations/20260630140000-create-jobler-jobs.js"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH;CAwBC;sBAjCqB,iDAAiD"}

package/build/src/database/migrations/20260630140000-create-jobler-jobs.js

@@ -0,0 +1,33 @@
+// @ts-check
+import Migration from "velocious/build/src/database/migration/index.js";
+/**
+ * Generic background-job progress records (a jobler-style tracker). A service
+ * creates one before starting heavy async work and updates its status/progress as
+ * it runs; the Expo UI subscribes to the broadcasting frontend model to show live
+ * progress. Lives in the global/default DB only — never a project tenant DB, since
+ * a job tracking a tenant-DB teardown cannot live inside the database it drops.
+ */
+export default class CreateJoblerJobs extends Migration {
+    /** @returns {Promise<void>} */
+    async up() {
+        await this.createTable("jobler_jobs", (table) => {
+            table.string("name", { null: false });
+            table.string("kind", { maxLength: 64, null: false });
+            table.string("status", { default: "pending", maxLength: 32, null: false });
+            table.integer("progress_current", { default: 0, null: false });
+            table.integer("progress_total", { null: true });
+            table.string("status_message", { null: true });
+            table.text("error_message", { null: true });
+            table.text("result_data", { null: true });
+            table.datetime("started_at", { null: true });
+            table.datetime("finished_at", { null: true });
+            table.timestamps();
+        });
+        await this.addIndex("jobler_jobs", ["kind", "status"], { name: "index_jobler_jobs_on_kind_and_status" });
+        await this.addIndex("jobler_jobs", ["created_at"], { name: "index_jobler_jobs_on_created_at" });
+    }
+    /** @returns {Promise<void>} */
+    async down() {
+        await this.dropTable("jobler_jobs");
+    }
+}

package/build/src/frontend/job-progress-indicator.d.ts

@@ -0,0 +1,56 @@
+export default JobProgressIndicator;
+export type JoblerJobModelLike = {
+    status: () => string;
+    progressCurrent: () => number;
+    progressTotal: () => number | null;
+    statusMessage: () => string | null;
+    errorMessage: () => string | null;
+};
+export type JobProgressIndicatorProps = {
+    /**
+     * - The jobler-job Velocious frontend-model class.
+     */
+    model: {
+        findBy: (conditions: {
+            id: string;
+        }) => Promise<JoblerJobModelLike | null>;
+        onUpdate: (callback: (event: {
+            id: string;
+        }) => void) => Promise<() => void>;
+    };
+    /**
+     * - Id of the jobler job to track.
+     */
+    joblerJobId: string;
+    /**
+     * - Called once when the job fails.
+     */
+    onFailed?: ((args: {
+        errorMessage: string | null;
+    }) => void) | undefined;
+    /**
+     * - Called once when the job succeeds.
+     */
+    onSucceeded?: (() => void) | undefined;
+    /**
+     * - Override the built-in English labels.
+     */
+    labels?: {
+        loading?: string;
+        working?: string;
+        failed?: string;
+    } | undefined;
+};
+export type JobProgressIndicatorState = {
+    joblerJob: JoblerJobModelLike | null;
+};
+/**
+ * Live progress for a jobler-tracked background job: loads the job through the given
+ * Velocious frontend-model, subscribes to its websocket updates, renders status, a
+ * progress bar and any message, and fires onSucceeded/onFailed once on a terminal
+ * status. Works with any status-bearing broadcasting frontend model.
+ */
+/** @type {NamedExoticComponent<JobProgressIndicatorProps>} */
+declare const JobProgressIndicator: NamedExoticComponent<JobProgressIndicatorProps>;
+import type { NamedExoticComponent } from "react";
+//# sourceMappingURL=job-progress-indicator.d.ts.map

package/build/src/frontend/job-progress-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"job-progress-indicator.d.ts","sourceRoot":"","sources":["../../../src/frontend/job-progress-indicator.jsx"],"names":[],"mappings":";;YASc,MAAM,MAAM;qBACZ,MAAM,MAAM;mBACZ,MAAM,MAAM,GAAG,IAAI;mBACnB,MAAM,MAAM,GAAG,IAAI;kBACnB,MAAM,MAAM,GAAG,IAAI;;;;;;WAKnB;QAAC,MAAM,EAAE,CAAC,UAAU,EAAE;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC,KAAK,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;QAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC,KAAK,IAAI,KAAK,OAAO,CAAC,MAAM,IAAI,CAAC,CAAA;KAAC;;;;iBACtJ,MAAM;;;;uBACC;QAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;KAAC,KAAK,IAAI;;;;yBACvC,IAAI;;;;;kBACC,MAAM;kBAAY,MAAM;iBAAW,MAAM;;;;eAKpD,kBAAkB,GAAG,IAAI;;AAKvC;;;;;GAKG;AACH,8DAA8D;AAC9D,oCADW,qBAAqB,yBAAyB,CAAC,CAwJxD;0CA7LiD,OAAO"}

package/build/src/frontend/job-progress-indicator.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-check
+/** @import {NamedExoticComponent, ReactNode} from "react" */
+import { memo, useEffect } from "react";
+import PropTypes from "prop-types";
+import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
+import { shapeComponent, ShapeComponent } from "set-state-compare/build/shape-component";
+/**
+ * @typedef {object} JoblerJobModelLike
+ * @property {() => string} status
+ * @property {() => number} progressCurrent
+ * @property {() => number | null} progressTotal
+ * @property {() => string | null} statusMessage
+ * @property {() => string | null} errorMessage
+ */
+/**
+ * @typedef {object} JobProgressIndicatorProps
+ * @property {{findBy: (conditions: {id: string}) => Promise<JoblerJobModelLike | null>, onUpdate: (callback: (event: {id: string}) => void) => Promise<() => void>}} model - The jobler-job Velocious frontend-model class.
+ * @property {string} joblerJobId - Id of the jobler job to track.
+ * @property {(args: {errorMessage: string | null}) => void} [onFailed] - Called once when the job fails.
+ * @property {() => void} [onSucceeded] - Called once when the job succeeds.
+ * @property {{loading?: string, working?: string, failed?: string}} [labels] - Override the built-in English labels.
+ */
+/**
+ * @typedef {object} JobProgressIndicatorState
+ * @property {JoblerJobModelLike | null} joblerJob
+ */
+const DEFAULT_LABELS = { failed: "Failed", loading: "Loading…", working: "Working…" };
+/**
+ * Live progress for a jobler-tracked background job: loads the job through the given
+ * Velocious frontend-model, subscribes to its websocket updates, renders status, a
+ * progress bar and any message, and fires onSucceeded/onFailed once on a terminal
+ * status. Works with any status-bearing broadcasting frontend model.
+ */
+/** @type {NamedExoticComponent<JobProgressIndicatorProps>} */
+const JobProgressIndicator = memo(shapeComponent(
+/** @augments {ShapeComponent<JobProgressIndicatorProps, JobProgressIndicatorState>} */
+class JobProgressIndicator extends ShapeComponent {
+    static defaultProps = {
+        labels: undefined,
+        onFailed: undefined,
+        onSucceeded: undefined
+    };
+    static propTypes = {
+        joblerJobId: PropTypes.string.isRequired,
+        labels: PropTypes.object,
+        model: PropTypes.any.isRequired,
+        onFailed: PropTypes.func,
+        onSucceeded: PropTypes.func
+    };
+    /** @type {JobProgressIndicatorState} */
+    state = {
+        joblerJob: null
+    };
+    /** @type {boolean} */
+    terminalNotified = false;
+    /** @returns {void} */
+    setup() {
+        useEffect(() => {
+            void this.loadData();
+        }, [this.p.joblerJobId]);
+        useEffect(() => {
+            let stopped = false;
+            /** @type {Array<() => void>} */
+            const unsubscribers = [];
+            void this.subscribe(unsubscribers, () => stopped);
+            return () => {
+                stopped = true;
+                for (const unsubscribe of unsubscribers)
+                    unsubscribe();
+            };
+        }, [this.p.joblerJobId]);
+    }
+    /** @returns {Promise<void>} */
+    async loadData() {
+        const joblerJob = await this.p.model.findBy({ id: this.p.joblerJobId });
+        this.s.joblerJob = joblerJob;
+        if (joblerJob) {
+            this.notifyTerminalStatus(joblerJob);
+        }
+    }
+    /**
+     * @param {Array<() => void>} unsubscribers
+     * @param {() => boolean} stopped
+     * @returns {Promise<void>}
+     */
+    async subscribe(unsubscribers, stopped) {
+        const unsubscribe = await this.p.model.onUpdate(this.onJoblerJobUpdated);
+        if (stopped()) {
+            unsubscribe();
+            return;
+        }
+        unsubscribers.push(unsubscribe);
+    }
+    /**
+     * @param {{id: string}} event
+     * @returns {void}
+     */
+    onJoblerJobUpdated = ({ id }) => {
+        if (id !== this.p.joblerJobId) {
+            return;
+        }
+        void this.loadData();
+    };
+    /**
+     * @param {JoblerJobModelLike} joblerJob
+     * @returns {void}
+     */
+    notifyTerminalStatus(joblerJob) {
+        if (this.terminalNotified) {
+            return;
+        }
+        const status = joblerJob.status();
+        if (status === "succeeded") {
+            this.terminalNotified = true;
+            if (this.p.onSucceeded) {
+                this.p.onSucceeded();
+            }
+        }
+        else if (status === "failed") {
+            this.terminalNotified = true;
+            if (this.p.onFailed) {
+                this.p.onFailed({ errorMessage: joblerJob.errorMessage() });
+            }
+        }
+    }
+    /** @returns {ReactNode} */
+    render() {
+        const labels = { ...DEFAULT_LABELS, ...this.p.labels };
+        const joblerJob = this.s.joblerJob;
+        if (!joblerJob) {
+            return (_jsxs(View, { style: styles.row, children: [_jsx(ActivityIndicator, { color: "#93c5fd" }), _jsx(Text, { style: styles.message, children: labels.loading })] }));
+        }
+        const status = joblerJob.status();
+        const inProgress = status === "pending" || status === "running";
+        const failed = status === "failed";
+        const progressTotal = joblerJob.progressTotal();
+        const statusMessage = joblerJob.statusMessage();
+        const jobErrorMessage = joblerJob.errorMessage();
+        return (_jsxs(View, { style: styles.wrap, children: [_jsxs(View, { style: styles.row, children: [inProgress && _jsx(ActivityIndicator, { color: "#93c5fd" }), _jsx(Text, { style: failed ? styles.statusFailed : styles.status, children: failed ? labels.failed : (statusMessage || labels.working) })] }), progressTotal !== null && progressTotal > 0 && (_jsx(View, { style: styles.progressTrack, children: _jsx(View, { style: [styles.progressFill, { width: /** @type {import("react-native").DimensionValue} */ (`${Math.min(100, Math.round((joblerJob.progressCurrent() / progressTotal) * 100))}%`) }] }) })), failed && Boolean(jobErrorMessage) && _jsx(Text, { style: styles.error, children: jobErrorMessage })] }));
+    }
+}));
+const styles = StyleSheet.create({
+    error: { color: "#fca5a5" },
+    message: { color: "#cbd5f5" },
+    progressFill: { backgroundColor: "#3b82f6", height: 6 },
+    progressTrack: { backgroundColor: "#1e293b", borderRadius: 4, height: 6, overflow: "hidden" },
+    row: { alignItems: "center", flexDirection: "row", gap: 8 },
+    status: { color: "#cbd5f5", fontWeight: "600" },
+    statusFailed: { color: "#fca5a5", fontWeight: "600" },
+    wrap: { gap: 8 }
+});
+JobProgressIndicator.displayName = "JobProgressIndicator";
+export default JobProgressIndicator;