i18n: complete Slovak PBS dialogs, status and errors

AppImage/components/pbs-datastore-usage.tsx

@@ -4,7 +4,8 @@ import { CalendarClock, Database } from "lucide-react"
 import { Badge } from "./ui/badge"
 import { Progress } from "./ui/progress"
 import { formatStorage } from "../lib/utils"
-import { useT } from "../lib/i18n/provider"
+import { useT, useI18n } from "../lib/i18n/provider"
+import { PBSProblemMessage } from "./pbs-problem-message"
 
 export interface PBSDatastore {
   name: string
@@ -13,6 +14,7 @@ export interface PBSDatastore {
   used?: number | null
   avail?: number | null
   error?: string
+  error_code?: string
   "backend-type"?: string
   "estimated-full-date"?: number
   "gc-status"?: { upid?: string | null; "removed-bytes"?: number; "pending-bytes"?: number }
@@ -42,7 +44,7 @@ export function DatastoreUsageRow({ store, compact = false }: { store: PBSDatast
         <span className="font-medium text-foreground truncate">{store.name}</span>
         <span className="text-xs text-muted-foreground">—</span>
       </div>
-      <p className="text-xs text-amber-500">{store.error || t("pbs.capacityUnavailable")}</p>
+      <PBSProblemMessage className="text-xs text-amber-500" problem={{ code: store.error_code }} raw={store.error} fallback="pbs.capacityUnavailable" />
     </div>
   }
   const tone = usageTone(percent)
@@ -62,10 +64,11 @@ export function DatastoreUsageRow({ store, compact = false }: { store: PBSDatast
 // Same layout as the "Proxmox storage" cards of the PVE Monitor.
 export function PBSDatastoreCard({ store }: { store: PBSDatastore }) {
   const t = useT()
+  const { language } = useI18n()
   const percent = datastorePercent(store)
   const tone = percent == null ? null : usageTone(percent)
   const fullDate = store["estimated-full-date"]
-  const type = store["backend-type"] || "datastore"
+  const type = store["backend-type"] || t("pbs.datastoreType")
   return <div className={`border rounded-lg p-4 ${store.error ? "border-red-500/50 bg-red-500/5" : ""}`}>
     <div className="flex items-center justify-between gap-2 mb-3">
       <div className="flex items-center gap-2 md:gap-3 min-w-0">
@@ -99,13 +102,13 @@ export function PBSDatastoreCard({ store }: { store: PBSDatastore }) {
         </div>
       </div>
     ) : (
-      <p className="text-sm text-muted-foreground">{store.error || t("storage.capacityNotReported")}</p>
+      <PBSProblemMessage className="text-sm text-muted-foreground" problem={{ code: store.error_code }} raw={store.error} fallback="pbs.capacityUnavailable" />
     )}
     {(store.path || fullDate !== undefined) && <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground">
       {store.path && <span className="font-mono truncate" title={store.path}>{store.path}</span>}
       {fullDate !== undefined && <span className="flex items-center">
         <CalendarClock className="mr-1.5 h-3.5 w-3.5" />{t("pbs.estimatedFull")}:
-        <span className="ml-1 font-medium text-foreground">{fullDate > 0 ? new Date(fullDate * 1000).toLocaleDateString() : t("pbs.estimatedFullUnknown")}</span>
+        <span className="ml-1 font-medium text-foreground">{fullDate > 0 ? new Date(fullDate * 1000).toLocaleDateString(language) : t("pbs.estimatedFullUnknown")}</span>
       </span>}
     </div>}
   </div>

AppImage/components/pbs-panel.tsx

@@ -14,8 +14,10 @@ import { Label } from "./ui/label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog"
 import { PBSDatastoreCard, type PBSDatastore } from "./pbs-datastore-usage"
+import { PBSProblemMessage } from "./pbs-problem-message"
+import { pbsDiagnostic, pbsResultText, pbsServiceState, pbsTaskType, formatPBSDuration } from "../lib/pbs-messages"
 import { fetchApi } from "../lib/api-config"
-import { useT } from "../lib/i18n/provider"
+import { useT, useI18n } from "../lib/i18n/provider"
 
 interface Connection { id: string; name: string; url: string; token_id: string; fingerprint: string; has_token: boolean }
 interface Detected { name: string; url: string; fingerprint: string }
@@ -26,6 +28,7 @@ interface PBSStatus {
   name: string; version: string | null; fetched_at: number; services: Record<string, string>;
   datastores: PBSDatastore[] | null; tasks: Task[] | null;
   sync: Job[] | null; verify: Job[] | null; prune: Job[] | null; errors: Record<string, string>;
+  error_details?: Record<string, { code: string; params?: Record<string, unknown> }>;
 }
 
 const emptyForm = { id: "", name: "", url: "", token_id: "", fingerprint: "", token_secret: "", username: "", password: "" }
@@ -46,9 +49,10 @@ const TASK_ICONS: Record<string, typeof Activity> = {
   termproxy: Terminal, dircreate: Database, "create-datastore": Database,
 }
 
-// PBS reports "OK", "WARNINGS: n" or the error text; a task without one is still running.
+// PBS reports "unknown", "OK", "WARNINGS: n" or an error; no state is still running.
 function taskState(task: Task): keyof typeof badgeTone {
   if (!task.status) return task.endtime ? "muted" : "running"
+  if (task.status === "unknown") return "muted"
   if (task.status === "OK") return "ok"
   if (task.status.startsWith("WARNINGS")) return "warn"
   return "error"
@@ -56,27 +60,19 @@ function taskState(task: Task): keyof typeof badgeTone {
 
 // PBS reports "OK", "WARNINGS: n" or the error text of the last run.
 function jobState(state?: string): keyof typeof badgeTone {
-  if (!state) return "muted"
+  if (!state || state === "unknown") return "muted"
   if (state.toLowerCase() === "ok") return "ok"
   if (state.toLowerCase().startsWith("warn")) return "warn"
   return "error"
 }
 
-function formatDuration(seconds: number) {
-  if (!Number.isFinite(seconds) || seconds < 0) return "—"
-  if (seconds < 60) return `${Math.round(seconds)}s`
-  const minutes = Math.floor(seconds / 60)
-  if (minutes < 60) return `${minutes}m ${Math.round(seconds % 60)}s`
-  const hours = Math.floor(minutes / 60)
-  return hours < 24 ? `${hours}h ${minutes % 60}m` : `${Math.floor(hours / 24)}d ${hours % 24}h`
-}
-
 // `localOnly` is the PBS host's own Monitor: no connection picker, the
 // header Refresh already reloads the page data. Its tabs show one `view` each.
 export function PBSPanel({ localOnly = false, view = "all" }: { localOnly?: boolean; view?: "all" | "datastores" | "tasks" } = {}) {
   const showStores = view !== "tasks"
   const showTasks = view !== "datastores"
   const t = useT()
+  const { language } = useI18n()
   const { data: connections, error: connectionError, mutate: reloadConnections } = useSWR<Connections>(
     "/api/pbs/servers", url => fetchApi<Connections>(url), { revalidateOnFocus: false })
   const [selected, setSelected] = useState("")
@@ -85,7 +81,8 @@ export function PBSPanel({ localOnly = false, view = "all" }: { localOnly?: bool
   const [method, setMethod] = useState<Method>("password")
   const [busy, setBusy] = useState(false)
   const [message, setMessage] = useState("")
-  const [error, setError] = useState("")
+  const [error, setError] = useState<unknown>(null)
+  const [errorFallback, setErrorFallback] = useState("pbs.saveFailed")
   const { data, error: statusError, isLoading, mutate } = useSWR<PBSStatus>(
     selected ? `/api/pbs/status?server=${encodeURIComponent(selected)}` : null,
     url => fetchApi<PBSStatus>(url), { refreshInterval: 30000, revalidateOnFocus: false })
@@ -102,7 +99,9 @@ export function PBSPanel({ localOnly = false, view = "all" }: { localOnly?: bool
   }
 
   const save = async () => {
+    setErrorFallback("pbs.saveFailed")
     setBusy(true); setError(""); setMessage("")
+    let saved = false
     try {
       // A password is sent once to create a read-only token; only the token is kept.
       const { username, password, ...connection } = form
@@ -113,22 +112,26 @@ export function PBSPanel({ localOnly = false, view = "all" }: { localOnly?: bool
         : await fetchApi<{ id: string }>("/api/pbs/servers", { method: "POST", body: JSON.stringify({
           ...connection, id: form.id || undefined, token_secret: form.token_secret || undefined,
         }) })
+      saved = true
       await reloadConnections()
       setSelected(result.id)
       setForm(emptyForm)
       setManage(false)
-    } catch (err) { setError(err instanceof Error ? err.message : t("pbs.saveFailed")) }
+    } catch (err) { setError(saved ? { body: { code: "pbs_saved_refresh_failed" }, message: pbsDiagnostic(err) } : err) }
     finally { setBusy(false) }
   }
 
   const remove = async () => {
     if (!form.id || !window.confirm(t("pbs.removeConfirm"))) return
+    setErrorFallback("pbs.removeFailed")
     setBusy(true); setError(""); setMessage("")
+    let removed = false
     try {
       await fetchApi(`/api/pbs/servers/${encodeURIComponent(form.id)}`, { method: "DELETE" })
+      removed = true
       setForm(emptyForm)
       await reloadConnections()
-    } catch (err) { setError(err instanceof Error ? err.message : t("pbs.saveFailed")) }
+    } catch (err) { setError(removed ? { body: { code: "pbs_removed_refresh_failed" }, message: pbsDiagnostic(err) } : err) }
     finally { setBusy(false) }
   }
   const now = Date.now() / 1000
@@ -150,8 +153,9 @@ export function PBSPanel({ localOnly = false, view = "all" }: { localOnly?: bool
         <Settings2 className="mr-2 h-4 w-4" />{t("pbs.manage")}
       </Button>
     </div>}
-    {(connectionError || statusError) && <p role="alert" className="text-sm text-red-500">
-      {String((connectionError || statusError)?.message || t("pbs.loadFailed"))}</p>}
+    {(connectionError || statusError) && <div role="alert" className="text-sm text-red-500">
+      <PBSProblemMessage problem={connectionError || statusError} raw={pbsDiagnostic(connectionError || statusError)} />
+    </div>}
     {isLoading && <p role="status" className="text-sm text-muted-foreground">{t("pbs.loading")}</p>}
     {!selected && !connectionError && connections && <p className="text-sm text-muted-foreground">{t("pbs.noServer")}</p>}
     {!localOnly && !manage && (connections?.detected?.length || 0) > 0 && <Card className="bg-card border-border">
@@ -171,7 +175,7 @@ export function PBSPanel({ localOnly = false, view = "all" }: { localOnly?: bool
       </CardContent>
     </Card>}
     {!localOnly && <Dialog open={manage} onOpenChange={open => { if (!busy) setManage(open) }}>
-      <DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto bg-accent [&_input]:bg-background [&_[role=combobox]]:bg-background">
+      <DialogContent className="grid-cols-1 max-w-2xl max-h-[85vh] overflow-y-auto bg-accent [&_input]:bg-background [&_[role=combobox]]:bg-background">
         <DialogHeader>
           <DialogTitle>{t("pbs.manage")}</DialogTitle>
           <DialogDescription>{method === "password" && !form.id ? t("pbs.passwordHelp") : t("pbs.permissionsHelp")}</DialogDescription>
@@ -201,7 +205,7 @@ export function PBSPanel({ localOnly = false, view = "all" }: { localOnly?: bool
                 </Button>)}
             </div>
           </div>}
-          <div className="grid gap-4 md:grid-cols-2">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             {(["name", "url", ...(method === "password" && !form.id ? ["username", "password"] : ["token_id", "token_secret"]), "fingerprint"] as const).map(field => {
               const secret = field === "token_secret" || field === "password"
               return <div key={field} className="space-y-2">
@@ -213,7 +217,9 @@ export function PBSPanel({ localOnly = false, view = "all" }: { localOnly?: bool
             })}
           </div>
           <p className="text-xs text-muted-foreground">{t("pbs.tlsHelp")}</p>
-          {error && <p role="alert" className="text-sm text-red-500">{error}</p>}
+          {!!error && <div role="alert" className="text-sm text-red-500">
+            <PBSProblemMessage problem={error} raw={pbsDiagnostic(error)} fallback={errorFallback} />
+          </div>}
           {message && <p role="status" className="text-sm text-green-500">{message}</p>}
           <div className="flex flex-wrap justify-end gap-2">
             {form.id && <Button variant="outline" disabled={busy} className="mr-auto text-red-500 hover:text-red-500" onClick={remove}>
@@ -230,14 +236,17 @@ export function PBSPanel({ localOnly = false, view = "all" }: { localOnly?: bool
     </Dialog>}
     {data && <>
       {!localOnly && <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
-        <span>{data.name} · PBS {data.version || "—"} · {t("pbs.updatedAt", { time: new Date(data.fetched_at * 1000).toLocaleTimeString() })}</span>
+        <span>{data.name} · PBS {data.version || "—"} · {t("pbs.updatedAt", { time: new Date(data.fetched_at * 1000).toLocaleTimeString(language) })}</span>
         {Object.keys(data.services).length > 0 && Object.values(data.services).every(state => state === "active")
           ? <Badge variant="outline" className={badgeTone.ok}>{t("pbs.servicesActive")}</Badge>
           : Object.entries(data.services).filter(([, state]) => state !== "active").map(([service, state]) =>
-            <Badge key={service} variant="outline" className={badgeTone.error}>{service}: {state}</Badge>)}
+            <Badge key={service} variant="outline" className={badgeTone.error}>{service}: {pbsServiceState(state, t)}</Badge>)}
       </div>}
       {Object.entries(data.errors).filter(([section]) => section === "datastores" ? showStores : showTasks)
-        .map(([section, detail]) => <p key={section} role="alert" className="text-sm text-amber-500">{t(`pbs.${section}`)}: {detail}</p>)}
+        .map(([section, detail]) => <div key={section} role="alert" className="text-sm text-amber-500">
+          <p className="font-medium">{t(`pbs.${["datastores", "tasks", "sync", "verify", "prune"].includes(section) ? section : "title"}`)}</p>
+          <PBSProblemMessage problem={data.error_details?.[section]} raw={detail} />
+        </div>)}
 
       {showStores && <Card className="bg-card border-border">
         <CardHeader><CardTitle className="flex items-center text-foreground"><Database className="mr-2 h-5 w-5" />{t("pbs.datastores")}</CardTitle></CardHeader>
@@ -268,14 +277,14 @@ export function PBSPanel({ localOnly = false, view = "all" }: { localOnly?: bool
               return <tr key={row.upid} className="border-b border-border/60 last:border-0">
                 <td className="py-2 pr-3"><span className="flex items-center gap-2">
                   <Icon className="h-4 w-4 shrink-0 text-muted-foreground" />
-                  <span className="text-foreground">{row.worker_type}</span>
+                  <span className="text-foreground" title={row.worker_type}>{pbsTaskType(row.worker_type, t)}</span>
                   {row.worker_id && <span className="truncate text-muted-foreground">{row.worker_id}</span>}
                 </span></td>
-                <td className="whitespace-nowrap py-2 pr-3 tabular-nums text-muted-foreground">{row.starttime ? new Date(row.starttime * 1000).toLocaleString() : "—"}</td>
-                <td className="whitespace-nowrap py-2 pr-3 tabular-nums text-muted-foreground">{row.starttime && end ? formatDuration(end - row.starttime) : "—"}</td>
-                <td className="py-2"><Badge variant="outline" className={`${badgeTone[state]} max-w-[16rem] truncate`} title={row.status}>
-                  {state === "running" ? t("pbs.running") : row.status || "—"}
-                </Badge></td>
+                <td className="whitespace-nowrap py-2 pr-3 tabular-nums text-muted-foreground">{row.starttime ? new Date(row.starttime * 1000).toLocaleString(language) : "—"}</td>
+                <td className="whitespace-nowrap py-2 pr-3 tabular-nums text-muted-foreground">{row.starttime && end ? formatPBSDuration(end - row.starttime, t) : "—"}</td>
+                <td className="py-2">
+                  <PBSResultBadge status={row.status} running={state === "running"} tone={badgeTone[state]} />
+                </td>
               </tr>
             })}</tbody>
           </table></div>}
@@ -299,7 +308,7 @@ export function PBSPanel({ localOnly = false, view = "all" }: { localOnly?: bool
                 <td className="py-2 pr-3"><span className="text-foreground">{t(`pbs.${kind}`)}</span> <span className="text-muted-foreground">· {row.id}</span></td>
                 <td className="py-2 pr-3 text-muted-foreground">{row.store || "—"}</td>
                 <td className="py-2 pr-3 font-mono text-xs text-muted-foreground">{row.schedule || "—"}</td>
-                <td className="py-2"><Badge variant="outline" className={badgeTone[jobState(row["last-run-state"])]}>{row["last-run-state"] || "—"}</Badge></td>
+                <td className="py-2"><PBSResultBadge status={row["last-run-state"]} tone={badgeTone[jobState(row["last-run-state"])]} /></td>
               </tr>)}</tbody>
             </table></div>
           })()}
@@ -309,3 +318,15 @@ export function PBSPanel({ localOnly = false, view = "all" }: { localOnly?: bool
     </>}
   </div>
 }
+
+function PBSResultBadge({ status, running = false, tone }: { status?: string; running?: boolean; tone: string }) {
+  const t = useT()
+  const badge = <Badge variant="outline" className={`${tone} max-w-[16rem] truncate`}>
+    {running ? t("pbs.running") : pbsResultText(status, t)}
+  </Badge>
+  if (running || !status || /^ok$/i.test(status)) return badge
+  return <details className="max-w-xs">
+    <summary className="cursor-pointer" aria-label={t("pbs.technicalDetails")}>{badge}</summary>
+    <pre className="mt-1 whitespace-pre-wrap break-words text-xs text-muted-foreground">{status}</pre>
+  </details>
+}

AppImage/components/pbs-problem-message.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import { pbsErrorText } from "../lib/pbs-messages"
+import { useT } from "../lib/i18n/provider"
+
+// Keep PBS's original diagnostic available without making it the UI message.
+export function PBSProblemMessage({ problem, raw, fallback, className = "" }: {
+  problem?: unknown; raw?: string; fallback?: string; className?: string
+}) {
+  const t = useT()
+  return <div className={`min-w-0 space-y-1 ${className}`}>
+    <p>{pbsErrorText(problem, t, fallback)}</p>
+    {raw && <details className="text-xs">
+      <summary className="cursor-pointer">{t("pbs.technicalDetails")}</summary>
+      <pre className="mt-1 whitespace-pre-wrap break-words font-mono">{raw}</pre>
+    </details>}
+  </div>
+}

AppImage/components/system-overview.tsx

@@ -7,6 +7,8 @@ import { Progress } from "./ui/progress"
 import { Badge } from "./ui/badge"
 import { Cpu, MemoryStick, Thermometer, Server, Zap, AlertCircle, HardDrive, Network, ChevronRight, Database } from "lucide-react"
 import { DatastoreUsageRow, type PBSDatastore } from "./pbs-datastore-usage"
+import { PBSProblemMessage } from "./pbs-problem-message"
+import { pbsDiagnostic } from "../lib/pbs-messages"
 import { NodeMetricsCharts } from "./node-metrics-charts"
 import { NetworkTrafficChart } from "./network-traffic-chart"
 import { TemperatureDetailModal } from "./temperature-detail-modal"
@@ -187,14 +189,20 @@ const getUnitsSettings = (): "Bytes" | "Bits" => {
   return raw && raw.toLowerCase() === "bits" ? "Bits" : "Bytes"
 }
 
+interface PBSOverviewStatus {
+  datastores: PBSDatastore[] | null
+  errors?: Record<string, string>
+  error_details?: Record<string, { code: string }>
+}
+
 export function SystemOverview({ product = "pve" }: { product?: "pve" | "pbs" } = {}) {
   const t = useT()
   const { language } = useI18n()
   const isPbs = product === "pbs"
   // On Proxmox Backup Server the datastores take the place of guests and PVE storage.
-  const { data: pbsStatus, error: pbsError } = useSWR<{ datastores: PBSDatastore[] | null }>(
+  const { data: pbsStatus, error: pbsError } = useSWR<PBSOverviewStatus>(
     isPbs ? "/api/pbs/status?server=local" : null,
-    (url: string) => fetchApi<{ datastores: PBSDatastore[] | null }>(url),
+    (url: string) => fetchApi<PBSOverviewStatus>(url),
     { refreshInterval: 60000, revalidateOnFocus: false },
   )
   const datastores = pbsStatus?.datastores ?? null
@@ -545,13 +553,15 @@ export function SystemOverview({ product = "pve" }: { product?: "pve" | "pbs" }
             <Database className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            {!datastores && !pbsError ? (
+            {!pbsStatus && !pbsError ? (
               <div className="space-y-2 animate-pulse">
                 <div className="h-10 bg-muted rounded w-20"></div>
                 <div className="h-5 bg-muted rounded w-32"></div>
               </div>
             ) : !datastores ? (
-              <p className="text-sm text-amber-500">{t("pbs.loadFailed")}</p>
+              <div role="alert" className="text-sm text-amber-500">
+                <PBSProblemMessage problem={pbsError || pbsStatus?.error_details?.datastores} raw={pbsDiagnostic(pbsError) || pbsStatus?.errors?.datastores} />
+              </div>
             ) : datastores.length === 0 ? (
               <p className="text-sm text-muted-foreground">{t("pbs.noDatastores")}</p>
             ) : (
@@ -762,8 +772,12 @@ export function SystemOverview({ product = "pve" }: { product?: "pve" | "pbs" }
                 {isPbs ? (
                   <div className="space-y-3">
                     <div className="text-xs font-medium text-muted-foreground mb-2">{t("pbs.datastores")}</div>
-                    {!datastores ? (
-                      <div className="text-center py-4 text-muted-foreground text-sm">{pbsError ? t("pbs.loadFailed") : t("pbs.loading")}</div>
+                    {!pbsStatus && !pbsError ? (
+                      <div className="text-center py-4 text-muted-foreground text-sm">{t("pbs.loading")}</div>
+                    ) : !datastores ? (
+                      <div role="alert" className="py-4 text-amber-500 text-sm">
+                        <PBSProblemMessage problem={pbsError || pbsStatus?.error_details?.datastores} raw={pbsDiagnostic(pbsError) || pbsStatus?.errors?.datastores} />
+                      </div>
                     ) : datastores.length === 0 ? (
                       <div className="text-center py-4 text-muted-foreground text-sm">{t("pbs.noDatastores")}</div>
                     ) : datastores.map(store => <DatastoreUsageRow key={store.name} store={store} />)}