Frontend-Erneuerung: Mobile, Diät, Tempo, UI-Politur (10-Punkte-Paket)

- Fix: 'Interaktives Terminal' im Cockpit führte ins Leere (#terminal) → Konsole - Mobile: Off-Canvas-Sidebar mit Hamburger unter md, Inhalt volle Breite (vorher: 240px starre Sidebar, 135px Rest mit Quer-Scroll auf dem Handy) - Dead Weight raus: src/mc3/ (verworfener Prototyp), DashboardView (alte Zentrale) + 6 nur dort genutzte Karten, 8 ungenutzte npm-Pakete (three, three-vrm, react-three fiber/drei, sigma, graphology ×2, @types/three) - Code-Splitting: alle Views außer Cockpit per React.lazy → Haupt-Bundle 983 → 739 KB, jede View ein eigenes Chunk - Fonts lokal (@fontsource) statt Google-CDN → UI offline identisch - Polling harmonisiert: EINE Takt-Tabelle in queries.ts (Graphen 3s, Rest 8-60s), keine Override-Intervalle mehr in Komponenten; Updates-Check (apt/git!) von 4s auf 60s - CSS-Hack-Layer aufgelöst: !important-Klassen-Sniffing → explizite .mc-card/.mc-card-sm/.nav-active-Klassen (Look identisch, ungeschichtete Regeln statt Utility-Raten); totes .light-Theme raus; Scrollbars 1× definiert - Aurora: animierte Fullscreen-Blur-Filter → statische radial-gradients (gleicher Look, keine Dauer-GPU-Last) - Sicherheit: Sudo-Passwort/HF-Token nur noch bei mutierenden Requests, nicht mehr auf jedem GET-Poll - Strg+K statt ⌘K auf Windows; dist neu gebaut Live gegen die Box verifiziert: alle 10 Views + Mobile-Flow, 0 Konsolen-Fehler. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-13 12:26:27 +02:00
parent f88f8e8bf9
commit 94444f4dcb
174 changed files with 1265 additions and 3229 deletions
@@ -6,15 +6,18 @@ export async function api<T = unknown>(path: string, init?: RequestInit): Promis
    ...init?.headers,
  } as Record<string, string>

-  const sudoPassword = localStorage.getItem("mc_sudo_password")
-  const hfToken = localStorage.getItem("mc_hf_token")
+  const method = init?.method?.toUpperCase() || "GET"
+
+  // Geheimnisse (Box-Passwort, HF-Token) reisen NUR bei mutierenden Requests mit —
+  // die Dauer-Polls (GET) brauchen sie nie und sollen sie auch nie im Netz tragen.
+  const sudoPassword = method === "GET" ? null : localStorage.getItem("mc_sudo_password")
+  const hfToken = method === "GET" ? null : localStorage.getItem("mc_hf_token")

  if (sudoPassword) {
    headers["X-Sudo-Password"] = sudoPassword
  }

  let body = init?.body
-  const method = init?.method?.toUpperCase() || "GET"
  if (method === "POST") {
    if (typeof body === "string") {
      try {
@@ -26,8 +26,8 @@ export const useTokHistory = () => useSyncExternalStore(subscribe, () => tokHist
 /** Immer-laufender Sammler (in App eingehängt, also stets gemountet): füttert den
 * Store bei jedem Poll — unabhängig davon, welcher Tab gerade sichtbar ist. */
 export function useMetricsFeeder() {
-  const { data: sys, dataUpdatedAt: sysAt } = useSystemStatus(3_000)
-  const { data: ts, dataUpdatedAt: tsAt } = useTokenStats(3_000)
+  const { data: sys, dataUpdatedAt: sysAt } = useSystemStatus()
+  const { data: ts, dataUpdatedAt: tsAt } = useTokenStats()
  const prevTok = useRef<{ p: number; c: number; t: number } | null>(null)

  useEffect(() => {
@@ -61,9 +61,22 @@ export const qk = {
  reminders: ["reminders"] as const,
 }

+// ── Polling-Takte ────────────────────────────────────────────────────────────
+// EINE Stelle für alle Intervalle. Regel: Die Live-Graphen (System/Token) takten
+// schnell, alles andere gemächlich — Mutationen invalidieren ohnehin gezielt,
+// Polling ist nur das Sicherheitsnetz. Komponenten übergeben KEINE eigenen
+// Intervalle mehr (mehrere Beobachter = kleinstes Intervall gewinnt).
+const TAKT = {
+  graph: 3_000,        // Live-Graphen im Cockpit (System, Token-Durchsatz)
+  schnell: 8_000,      // „fühlt sich live an": Modelle, Voice-Trace, Auftragsbuch
+  normal: 10_000,      // Dienste, Routing, Agent-Status, Health
+  gemuetlich: 30_000,  // Chronik, Ideen
+  traege: 60_000,      // Updates-Check, Reminders, Zeitmaschine, HF-Abfragen
+} as const
+
 // Auftragsbuch: Vorschlags-Inbox (Branches + Skill-Kandidaten). Pollt, damit laufende
 // Annahme-Läufe (Status aus der JSON-Datei des Runners) live sichtbar werden.
-export const useAuftragsbuch = (refetchInterval = 8_000) =>
+export const useAuftragsbuch = (refetchInterval: number = TAKT.schnell) =>
  useQuery({
    queryKey: qk.auftragsbuch,
    queryFn: () => api<AuftragsbuchResp>("/api/auftragsbuch"),
@@ -71,14 +84,14 @@ export const useAuftragsbuch = (refetchInterval = 8_000) =>
  })

 // Ideen-Queue (natives Hermes-Kanban): das Backend cached ~15 s, öfter pollen lohnt nicht.
-export const useIdeen = (refetchInterval = 20_000) =>
+export const useIdeen = (refetchInterval: number = TAKT.gemuetlich) =>
  useQuery({
    queryKey: qk.ideen,
    queryFn: () => api<IdeenResp>("/api/ideen"),
    refetchInterval,
  })

-export const useChronik = (limit = 150, refetchInterval = 15_000) =>
+export const useChronik = (limit = 150, refetchInterval: number = TAKT.gemuetlich) =>
  useQuery({
    queryKey: qk.chronik,
    queryFn: () => api<ChronikResp>(`/api/chronik?limit=${limit}`),
@@ -89,14 +102,14 @@ export const useChronik = (limit = 150, refetchInterval = 15_000) =>
 export const useWissen = () =>
  useQuery({ queryKey: qk.wissen, queryFn: () => api<WissenResp>("/api/wissen") })

-export const useZeitmaschine = (refetchInterval = 30_000) =>
+export const useZeitmaschine = (refetchInterval: number = TAKT.traege) =>
  useQuery({
    queryKey: qk.zeitmaschine,
    queryFn: () => api<ZeitmaschineResp>("/api/zeitmaschine"),
    refetchInterval,
  })

-export const useReminders = (refetchInterval = 20_000) =>
+export const useReminders = (refetchInterval: number = TAKT.traege) =>
  useQuery({
    queryKey: qk.reminders,
    queryFn: () => api<{ items: Reminder[] }>("/api/reminders"),
@@ -105,7 +118,7 @@ export const useReminders = (refetchInterval = 20_000) =>
  })

 // Per-Turn-Latenz-Trace (letzte N Voice/Lucy-Turns mit Stufen-Breakdown).
-export const useVoiceTrace = (limit = 12, refetchInterval = 4_000) =>
+export const useVoiceTrace = (limit = 12, refetchInterval: number = TAKT.schnell) =>
  useQuery({
    queryKey: qk.voiceTrace,
    queryFn: () => api<VoiceTraceResp>(`/api/voice/trace?limit=${limit}`),
@@ -121,27 +134,28 @@ export const useMemoryGraph = (enabled = true) =>
  })

 export const useHealth = () =>
-  useQuery({ queryKey: qk.health, queryFn: () => api<Health>("/api/health"), refetchInterval: 10_000 })
+  useQuery({ queryKey: qk.health, queryFn: () => api<Health>("/api/health"), refetchInterval: TAKT.normal })

-export const useSystemStatus = (refetchInterval = 5_000) =>
+export const useSystemStatus = (refetchInterval: number = TAKT.graph) =>
  useQuery({ queryKey: qk.systemStatus, queryFn: () => api<SystemStatus>("/api/system/status"), refetchInterval })

-export const useServices = (refetchInterval = 3_000) =>
+export const useServices = (refetchInterval: number = TAKT.normal) =>
  useQuery({ queryKey: qk.services, queryFn: () => api<ServicesResp>("/api/system/services"), refetchInterval })

-export const useModels = (refetchInterval = 4_000) =>
+export const useModels = (refetchInterval: number = TAKT.schnell) =>
  useQuery({ queryKey: qk.models, queryFn: () => api<ModelsResp>("/api/models"), refetchInterval })

-export const useGroups = (refetchInterval = 8_000) =>
+export const useGroups = (refetchInterval: number = TAKT.normal) =>
  useQuery({ queryKey: qk.groups, queryFn: () => api<GroupsResp>("/api/groups"), refetchInterval })

-export const useRouting = (refetchInterval = 4_000) =>
+export const useRouting = (refetchInterval: number = TAKT.normal) =>
  useQuery({ queryKey: qk.routing, queryFn: () => api<RoutingResp>("/api/routing"), refetchInterval })

 export const useRoutingPolicy = () =>
  useQuery({ queryKey: qk.routingPolicy, queryFn: () => api<RoutingPolicyMeta>("/api/routing/policy") })

-export const useJobs = (refetchInterval = 2_000) =>
+// Jobs (Downloads) takten etwas schneller, damit Fortschritts-Balken flüssig wirken.
+export const useJobs = (refetchInterval = 3_000) =>
  useQuery({
    queryKey: qk.jobs,
    queryFn: () => api<{ jobs: Job[] }>("/api/jobs"),
@@ -149,17 +163,18 @@ export const useJobs = (refetchInterval = 2_000) =>
    select: (d) => d.jobs ?? [],
  })

-export const useTokenStats = (refetchInterval = 3_000) =>
+export const useTokenStats = (refetchInterval: number = TAKT.graph) =>
  useQuery({ queryKey: qk.tokenStats, queryFn: () => api<TokenStats>("/api/system/token-stats"), refetchInterval })

-export const useAgentStatus = (refetchInterval = 5_000) =>
+export const useAgentStatus = (refetchInterval: number = TAKT.normal) =>
  useQuery({ queryKey: qk.agentStatus, queryFn: () => api<AgentStatus>("/api/agent/status"), refetchInterval })

 // Agent-Hirn (Hermes) + bestes NousResearch-Update. Selten pollen (HF-Abfrage).
-export const useHermesBrain = (refetchInterval = 60_000) =>
+export const useHermesBrain = (refetchInterval: number = TAKT.traege) =>
  useQuery({ queryKey: qk.hermesBrain, queryFn: () => api<HermesBrainResp>("/api/agent/brain"), refetchInterval })

-export const useUpdates = (refetchInterval?: number) =>
+// Updates-Check ist teuer (apt/git auf der Box) — träge pollen reicht völlig.
+export const useUpdates = (refetchInterval: number = TAKT.traege) =>
  useQuery({ queryKey: qk.updates, queryFn: () => api<UpdatesResp>("/api/maintenance/updates"), refetchInterval })

 export const useDiscover = () =>
@@ -6,7 +6,7 @@ export type { SysSample }
 /** Aktuelle System-Werte (für Legende) + rollende Live-Historie aus dem modul-globalen
 * Store (überlebt Tab-Wechsel; gefüllt vom App-Feeder). */
 export function useSystemHistory() {
-  const { data: sys, error } = useSystemStatus(3_000)
+  const { data: sys, error } = useSystemStatus()
  const hist = useSysHistory()
  return { sys, hist, error }
 }