fix: read completed update results without a live terminal

AppImage/components/health-status-modal.tsx

@@ -42,6 +42,7 @@ import {
 } from "lucide-react"
 import { ScriptTerminalModal } from "./script-terminal-modal"
 import { HostUpdateJobs, type HostUpdateJob } from "./host-update-jobs"
+import { HostUpdateResult } from "./host-update-result"
 import { RestartAfterUpdate, ProxMenuxVersionCard } from "./host-update-status"
 import { useT } from "@/lib/i18n/provider"
 import { useIsPbs } from "@/lib/use-platform"
@@ -134,6 +135,7 @@ export function HealthStatusModal({ open, onOpenChange, getApiUrl }: HealthStatu
   const [showUpdateTerminal, setShowUpdateTerminal] = useState(false)
   const [hostJob, setHostJob] = useState<{ runId: string; resume: boolean; kind: "host" } | null>(null)
   const [hostJobs, setHostJobs] = useState<HostUpdateJob[]>([])
+  const [resultJobId, setResultJobId] = useState<string | null>(null)
   const healthRequest = useRef<AbortController | null>(null)
   const previousAutoExpanded = useRef<Set<string>>(new Set())
 
@@ -790,6 +792,7 @@ export function HealthStatusModal({ open, onOpenChange, getApiUrl }: HealthStatu
         <HostUpdateJobs open={open} activeId={showUpdateTerminal ? hostJob?.runId : undefined}
           onJobs={setHostJobs} onSettled={() => { void fetchHealthDetails(true) }}
           onResume={job => {
+            if (job.state === "complete") { setResultJobId(job.id); return }
             setHostJob({ runId: job.id, resume: true, kind: "host" })
             setShowUpdateTerminal(true)
           }} />
@@ -1069,6 +1072,7 @@ export function HealthStatusModal({ open, onOpenChange, getApiUrl }: HealthStatu
           </div>
         )}
       </DialogContent>
+      <HostUpdateResult jobId={resultJobId} getApiUrl={getApiUrl} onClose={() => setResultJobId(null)} />
       <ScriptTerminalModal
         key={hostJob?.runId || "host-update"}
         open={showUpdateTerminal}

AppImage/components/host-update-jobs.tsx

@@ -20,6 +20,7 @@ export function HostUpdateJobs({ open, activeId, onResume, onJobs, onSettled }:
 }) {
   const t = useT()
   const [jobs, setJobs] = useState<HostUpdateJob[]>([])
+  const [hidden, setHidden] = useState<Set<string>>(new Set())
   const callbacks = useRef({ onJobs, onSettled })
   callbacks.current = { onJobs, onSettled }
   const observed = useRef(new Set<string>())
@@ -47,15 +48,20 @@ export function HostUpdateJobs({ open, activeId, onResume, onJobs, onSettled }:
     const timer = setInterval(() => { void read() }, 5000)
     return () => { closed = true; clearInterval(timer) }
   }, [open])
-  const visible = jobs.filter(job => job.id !== activeId)
+  const visible = jobs.filter(job => job.id !== activeId && !(job.state === "complete" && hidden.has(job.id)))
   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 className="flex items-center gap-2">
+        <Button size="sm" variant="outline" onClick={() => onResume(job)}>
+          {t(job.state === "complete" ? "healthStatus.hostUpdate.viewResult" : "healthStatus.hostUpdate.view")}
+        </Button>
+        {job.state === "complete" && <Button size="sm" variant="ghost" onClick={() => setHidden(previous => new Set([...previous, job.id]))}>
+          {t("healthStatus.hostUpdate.hideResult")}
+        </Button>}
+      </div>
     </div>)}
   </div>
 }

AppImage/components/host-update-result.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "./ui/dialog"
+import { Button } from "./ui/button"
+import { getAuthToken } from "../lib/api-config"
+import { scriptCompletion } from "../lib/script-completion"
+import { useT } from "../lib/i18n/provider"
+import "xterm/css/xterm.css"
+
+export function HostUpdateResult({ jobId, getApiUrl, onClose }: {
+  jobId: string | null
+  getApiUrl: (path: string) => string
+  onClose: () => void
+}) {
+  const t = useT()
+  const container = useRef<HTMLDivElement>(null)
+  const [revision, setRevision] = useState(0)
+  const [exitCode, setExitCode] = useState<number | null>(null)
+  const [failed, setFailed] = useState(false)
+  useEffect(() => {
+    if (!jobId) return
+    const controller = new AbortController()
+    let terminal: import("xterm").Terminal | undefined
+    let observer: ResizeObserver | undefined
+    let disposed = false
+    setExitCode(null); setFailed(false)
+    const timeout = setTimeout(() => controller.abort(), 10000)
+    void (async () => {
+      try {
+        const token = getAuthToken()
+        const response = await fetch(getApiUrl(`/api/host-update-jobs/${encodeURIComponent(jobId)}/result`), {
+          headers: token ? { Authorization: `Bearer ${token}` } : {}, signal: controller.signal,
+        })
+        if (!response.ok) throw Error("unavailable")
+        const value = await response.json()
+        if (value.state !== "complete" || !Number.isSafeInteger(value.exit_code)
+          || typeof value.text !== "string" || value.text.length > 256 * 1024
+          || typeof value.truncated !== "boolean") throw Error("invalid result")
+        const [{ Terminal }, { FitAddon }] = await Promise.all([import("xterm"), import("xterm-addon-fit")])
+        if (controller.signal.aborted || !container.current) return
+        terminal = new Terminal({ disableStdin: true, convertEol: true, fontSize: 12,
+          screenReaderMode: true, theme: { background: "#000000", foreground: "#dddddd" } })
+        const fit = new FitAddon()
+        terminal.loadAddon(fit); terminal.open(container.current); fit.fit()
+        if (value.truncated) terminal.writeln(t("vmLxc.updates.backgroundOutputTrimmed"))
+        terminal.write(value.text)
+        observer = new ResizeObserver(() => { if (!controller.signal.aborted) fit.fit() })
+        observer.observe(container.current)
+        setExitCode(value.exit_code)
+      } catch {
+        if (!disposed) setFailed(true)
+      } finally { clearTimeout(timeout) }
+    })()
+    return () => { disposed = true; controller.abort(); clearTimeout(timeout); observer?.disconnect(); terminal?.dispose() }
+  }, [jobId, getApiUrl, revision, t])
+  const kind = exitCode === null ? null : scriptCompletion(exitCode, 130).kind
+  return <Dialog open={jobId !== null} onOpenChange={open => { if (!open) onClose() }}>
+    <DialogContent className="max-w-4xl w-[95vw] max-h-[85vh] overflow-y-auto p-4 sm:p-5">
+      <DialogHeader><DialogTitle>{t("healthStatus.hostUpdate.resultTitle")}</DialogTitle>
+        <DialogDescription>{t("healthStatus.hostUpdate.resultReadOnly")}</DialogDescription></DialogHeader>
+      {failed && <div role="alert" className="text-sm text-amber-500">
+        <p>{t("healthStatus.hostUpdate.resultUnavailable")}</p>
+        <Button size="sm" variant="outline" className="mt-3" onClick={() => setRevision(value => value + 1)}>{t("healthStatus.hostUpdate.retryResult")}</Button>
+      </div>}
+      <div ref={container} className="h-[45vh] min-h-[180px] bg-black rounded overflow-hidden" />
+      <div className="flex items-center justify-between gap-3">
+        <p role="status" className={`text-xs ${exitCode === 0 ? "text-green-500" : "text-muted-foreground"}`}>
+          {kind === null ? t(failed ? "healthStatus.hostUpdate.resultUnavailable" : "healthStatus.hostUpdate.loadingResult")
+            : kind === "cancelled" ? t("scriptTerminal.cancelled") : exitCode === 0
+            ? t("scriptTerminal.completedSuccessfully") : t("scriptTerminal.completedWithError", { code: exitCode })}
+        </p>
+        <Button size="sm" variant="outline" onClick={onClose}>{t("healthStatus.hostUpdate.closeResult")}</Button>
+      </div>
+    </DialogContent>
+  </Dialog>
+}