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/components/CustomDialog.tsx

@@ -1,3 +1,4 @@
+import { useRef } from "react"
 import { X } from "lucide-react"
 
 export interface CustomDialogProps {
@@ -10,6 +11,7 @@ export interface CustomDialogProps {
 }
 
 export function CustomDialog({ type, title, message, defaultValue, onConfirm, onCancel }: CustomDialogProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
   return (
     <div className="fixed inset-0 z-[99] bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
       <div className="w-full max-w-sm rounded-2xl border border-border/80 bg-card p-6 shadow-2xl space-y-4 animate-in fade-in zoom-in-95 duration-200">
@@ -26,15 +28,14 @@ export function CustomDialog({ type, title, message, defaultValue, onConfirm, on
         
         {type === "prompt" && (
           <input
+            ref={inputRef}
             type="text"
-            id="custom-dialog-input"
             defaultValue={defaultValue}
             className="w-full h-9 px-3 text-xs bg-background/40 border border-border/60 rounded-lg outline-none focus:border-primary transition-colors text-foreground"
             autoFocus
             onKeyDown={(e) => {
               if (e.key === "Enter") {
-                const val = (document.getElementById("custom-dialog-input") as HTMLInputElement)?.value
-                onConfirm(val)
+                onConfirm(inputRef.current?.value)
               }
             }}
           />
@@ -51,9 +52,7 @@ export function CustomDialog({ type, title, message, defaultValue, onConfirm, on
           )}
           <button
             onClick={() => {
-              const val = type === "prompt" 
-                ? (document.getElementById("custom-dialog-input") as HTMLInputElement)?.value 
-                : undefined
+              const val = type === "prompt" ? inputRef.current?.value : undefined
               onConfirm(val)
             }}
             className="h-8 px-4 flex items-center justify-center text-xs font-semibold text-primary-foreground bg-primary hover:bg-primary/95 rounded-lg transition-colors cursor-pointer"