Preserve host updates across sign-out and report pending kernel activation

2026-11-02 19:02:31 +00:00 · 2026-10-28 17:30:44 +00:00
parent 2d4b0cb746
commit f40e0a53e1
24 changed files with 1605 additions and 18 deletions
@@ -0,0 +1,61 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { Button } from "./ui/button"
+import { fetchApi } from "../lib/api-config"
+import { useT } from "../lib/i18n/provider"
+
+export type HostUpdateJob = {
+  id: string
+  state: "starting" | "running" | "attention" | "finalizing" | "complete"
+  exit_code: number | null
+}
+
+export function HostUpdateJobs({ open, activeId, onResume, onJobs, onSettled }: {
+  open: boolean
+  activeId?: string
+  onResume: (job: HostUpdateJob) => void
+  onJobs: (jobs: HostUpdateJob[]) => void
+  onSettled: () => void
+}) {
+  const t = useT()
+  const [jobs, setJobs] = useState<HostUpdateJob[]>([])
+  const callbacks = useRef({ onJobs, onSettled })
+  callbacks.current = { onJobs, onSettled }
+  const observed = useRef(new Set<string>())
+  useEffect(() => {
+    if (!open) return
+    let closed = false
+    const read = async () => {
+      try {
+        const data = await fetchApi<{ jobs: HostUpdateJob[] }>("/api/host-update-jobs")
+        if (closed) return
+        const next = Array.isArray(data.jobs) ? data.jobs : []
+        setJobs(next)
+        callbacks.current.onJobs(next)
+        for (const job of next) {
+          if (job.state === "complete" && !observed.current.has(job.id)) {
+            observed.current.add(job.id)
+            callbacks.current.onSettled()
+          }
+        }
+      } catch {
+        // Authentication recovery belongs to fetchApi. Never retry a start.
+      }
+    }
+    void read()
+    const timer = setInterval(() => { void read() }, 5000)
+    return () => { closed = true; clearInterval(timer) }
+  }, [open])
+  const visible = jobs.filter(job => job.id !== activeId)
+  if (!visible.length) return null
+  return <div className="space-y-2" role="status">
+    {visible.map(job => <div key={job.id}
+      className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-violet-500/30 bg-violet-500/5 p-3">
+      <p className="text-sm">{t(`healthStatus.hostUpdate.${job.state === "complete" ? "finished" : job.state === "attention" ? "attention" : "running"}`)}</p>
+      <Button size="sm" variant="outline" onClick={() => onResume(job)}>
+        {t("healthStatus.hostUpdate.view")}
+      </Button>
+    </div>)}
+  </div>
+}