Refactor: Frontend-Fundament — Format-Utils, Dialog-Ref, Typen (Phase 3a)

- Neuer lib/format.ts: gb/fmtBytes/fmtSize/fmtEta/fmtCtx zentral; aus
  DashboardView/SystemView/ModelsView entdoppelt und importiert.
- CustomDialog: document.getElementById -> useRef (kein DOM-Query, robuster).
- api.ts: GitInfo/ComponentVersion/Versions typisiert, SystemStatus.versions
  ergänzt; App.tsx nutzt SystemStatus statt any.

tsc grün, Build grün, Dashboard verifiziert (keine Konsolenfehler, Formatierer
rendern identisch).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/lib/api.ts

@@ -130,6 +130,34 @@ export interface RoutingResp {
   gateway_reachable: boolean
 }
 
+export interface GitInfo {
+  hash: string
+  date: string
+  subject: string
+  branch: string
+  dirty: boolean
+  path: string
+}
+
+// Engine kann git-, binary- oder unbekannte Version sein — Felder je nach `type`.
+export interface ComponentVersion {
+  type: "git" | "binary" | "unknown"
+  hash?: string
+  date?: string
+  subject?: string
+  branch?: string
+  dirty?: boolean
+  path?: string
+  version_text?: string
+}
+
+export interface Versions {
+  mc2: GitInfo | null
+  engine: ComponentVersion
+  hermes_ui: GitInfo | null
+  hermes_agent: GitInfo | null
+}
+
 export interface SystemStatus {
   cpu: { percent: number; cores: number | null }
   ram: { total: number; used: number; percent: number }
@@ -142,6 +170,7 @@ export interface SystemStatus {
   } | null
   temp: { cpu?: number; gpu?: number } | null
   disk: { total: number; used: number; percent: number } | null
+  versions?: Versions
 }
 
 export interface ServicesResp {

frontend/src/lib/format.ts

@@ -0,0 +1,32 @@
+// Zentrale Formatierungs-Helfer (vorher in einzelnen Views dupliziert).
+
+/** Bytes → GB als String mit einer Nachkommastelle (z.B. "14.1"). */
+export function gb(b: number): string {
+  return (b / 1024 ** 3).toFixed(1)
+}
+
+/** Bytes → "1.2 GB" / "512 MB"; leer bei 0/undefined. */
+export function fmtBytes(b?: number): string {
+  if (!b) return ""
+  if (b > 1024 ** 3) return `${(b / 1024 ** 3).toFixed(1)} GB`
+  return `${(b / 1024 ** 2).toFixed(0)} MB`
+}
+
+/** Bytes → "1.2 GB" / "512 MB"; "—" bei 0/undefined/null. */
+export function fmtSize(b?: number | null): string {
+  if (!b) return "—"
+  const g = b / 1024 ** 3
+  return g >= 1 ? `${g.toFixed(1)} GB` : `${(b / 1024 ** 2).toFixed(0)} MB`
+}
+
+/** Sekunden → "3 min" / "45 s"; leer bei 0/undefined. */
+export function fmtEta(s?: number): string {
+  if (!s) return ""
+  const m = Math.floor(s / 60)
+  return m > 0 ? `${m} min` : `${s} s`
+}
+
+/** Kontextlänge → "32k"; "—" bei null. */
+export function fmtCtx(c: number | null): string {
+  return c ? `${Math.round(c / 1024)}k` : "—"
+}