Add a Jobs page: upload a sliced file, watch it queue, delete it

The console could watch and control printers but not give them work. The
Jobs page uploads a .3mf/.gcode: it creates the job (POST /jobs), PUTs the
file straight to the presigned storage URL with a progress bar, and lists
the farm's jobs, polling every 5s since there is no job push channel yet.
The scheduler then starts it on the next idle printer, so there is no Start
button - a queued job IS the request.

Deliberate details: the PUT carries no Authorization header (the URL is
presigned and an uncovered header makes storage reject it) and the same
Content-Type the URL was signed for; a failed upload deletes the job row
it just created, so no queued job waits for a file that never arrives;
only queued/uploading jobs offer Delete, matching what the backend allows.

JobUpload and JobList live in @continuum/ui and take the API calls as
props, like the printer card. A shared apiErrorMessage() replaces the
inline copy on the fleet page.

Checked in real Chrome against the live stack with job dispatch OFF: upload
to the real bucket (57 bytes landed intact), listed as queued, still queued
after a scheduler tick, Delete clears it, no page errors; the test object
was removed from the bucket afterwards. pnpm -r typecheck is clean.

apps/web/pages/index.vue

@@ -58,8 +58,7 @@ async function sendCommand(printerId: string, command: PrinterCommand): Promise<
   try {
     await apiFetch(`/printers/${printerId}/commands`, { method: "POST", body: command });
   } catch (err) {
-    const body = (err as { data?: { error?: { message?: string } } }).data;
-    throw new Error(body?.error?.message ?? "the command could not be sent");
+    throw new Error(apiErrorMessage(err, "the command could not be sent"));
   }
 }
 

apps/web/pages/jobs.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { JobList, JobUpload, type AppFarm, type AppJob, type AppPrinterState } from "@continuum/ui";
+
+const apiFetch = useApiFetch();
+
+const { data: farms } = await useAsyncData("farms", () => apiFetch<AppFarm[]>("/farms"));
+const { data: printers } = await useAsyncData("job-printers", () => apiFetch<AppPrinterState[]>("/printers"));
+const { data: jobs, refresh } = await useAsyncData("jobs", () => apiFetch<AppJob[]>("/jobs"));
+
+const printerNames = computed(() =>
+  Object.fromEntries((printers.value ?? []).map((printer) => [printer.id, printer.name])),
+);
+
+// There is no job push channel yet (the telemetry socket carries printers
+// only), so a job moving from queued to printing shows up by polling. Five
+// seconds matches the scheduler's own tick, which is the fastest it can move.
+let poll: ReturnType<typeof setInterval> | undefined;
+onMounted(() => {
+  poll = setInterval(() => void refresh(), 5_000);
+});
+onBeforeUnmount(() => clearInterval(poll));
+
+/**
+ * PUT with progress. `XMLHttpRequest` because `fetch` cannot report upload
+ * progress, and a sliced project is tens of megabytes. Plain request with no
+ * Authorization header on purpose: the URL is presigned, and an extra header
+ * the signature did not cover makes the storage server reject it.
+ *
+ * The Content-Type must be the one the URL was signed for.
+ */
+function putFile(url: string, file: File, contentType: string, onProgress: (percent: number) => void) {
+  return new Promise<void>((resolve, reject) => {
+    const request = new XMLHttpRequest();
+    request.open("PUT", url);
+    request.setRequestHeader("Content-Type", contentType);
+    request.upload.onprogress = (event) => {
+      if (event.lengthComputable) onProgress((event.loaded / event.total) * 100);
+    };
+    request.onload = () =>
+      request.status >= 200 && request.status < 300
+        ? resolve()
+        : reject(new Error(`storage refused the upload (HTTP ${request.status})`));
+    request.onerror = () => reject(new Error("could not reach storage - blocked, or offline"));
+    request.send(file);
+  });
+}
+
+async function uploadJob(farmId: string, file: File, onProgress: (percent: number) => void) {
+  const contentType = file.type || "application/octet-stream";
+  let created: { job: AppJob; uploadUrl: string };
+  try {
+    created = await apiFetch("/jobs", { method: "POST", body: { farmId, fileName: file.name, contentType } });
+  } catch (err) {
+    throw new Error(apiErrorMessage(err, "the job could not be created"));
+  }
+  try {
+    await putFile(created.uploadUrl, file, contentType, onProgress);
+  } catch (err) {
+    // The row exists before the file does, so a failed upload would leave a
+    // queued job whose file never arrives. Removed rather than left to sit.
+    await apiFetch(`/jobs/${created.job.id}`, { method: "DELETE" }).catch(() => undefined);
+    await refresh();
+    throw err;
+  }
+  await refresh();
+}
+
+async function removeJob(jobId: string) {
+  try {
+    await apiFetch(`/jobs/${jobId}`, { method: "DELETE" });
+  } catch (err) {
+    throw new Error(apiErrorMessage(err, "the job could not be deleted"));
+  }
+  await refresh();
+}
+</script>
+
+<template>
+  <div class="jobs">
+    <h1>Jobs</h1>
+    <JobUpload :farms="farms ?? []" :upload="uploadJob" />
+    <JobList :jobs="jobs ?? []" :printer-names="printerNames" :remove="removeJob" />
+  </div>
+</template>
+
+<style scoped>
+.jobs {
+  display: grid;
+  gap: 1.25rem;
+}
+</style>