Zeitachse (24h-Historie), Verbinden-Autofill, Modelltausch abgesichert

Paket 1 - Metrik-Historie mit Zeitachse (User: 'WANN war Last?'):
- services/metrics_history.py: 10s-Sampler (CPU/RAM/GPU/Disk + Token-Totale) in
  24h-Ringpuffer (aelteres faellt automatisch raus, nichts waechst unbegrenzt),
  persistiert alle 5 min -> uebersteht Deploys; GET /api/system/history?minutes
  mit Downsampling auf ~300 Punkte; Lifespan-Task in app.py
- Cockpit-Karten System-Status + Token-Durchsatz: Bereichs-Schalter Live/1h/24h,
  sichtbare Zeitachse (HH:MM:SS bei kurzen, HH:MM bei langen Fenstern), Tooltip
  zeigt Uhrzeit; Token-Raten in 1h/24h aus Totale-Deltas

Paket 2 - Verbinden selbsterklaerend:
- Box-IP vorbefuellt aus window.location.hostname (Dev-Fallback bleibt)
- MCP-Scriptpfad-Feld aus der Kopfzeile in die 'Gedaechtnis anbinden'-Karte
  verschoben, mit Erklaerung WANN man es braucht

Paket 3 - Modelltausch-Loecher gestopft (Review 16.07.):
- install: Registrierung OHNE Alias-Umzug; Rolle wird erst NACH erfolgreichem
  Download uebernommen (on_done) - hermes dabei durch den warm-bewussten
  set_agent_brain-Flow statt rohem Alias-Move (Lucy waere sonst bis Download-
  Ende tot gewesen); Re-Install erhaelt bestehende Aliase
- set_role_alias: lebenswichtige Aliase (hermes/embed) des Ziel-Modells
  ueberleben jeden Rollen-Klick (Qwen3.6 haelt live hermes+fast!)
- Rollen-Endpoint verweigert Rollen-Wechsel am Halter geschuetzter Aliase
  mit klarer Anleitung; Werkbank sperrt die Rollen-Chips sichtbar

Verifiziert: py_compile + Sampler-Smoke (2 Punkte, Persist ok) + Alias-Logik-
Unittest (3 Faelle) + Browser (Zeitachse tickt, Schalter, Leerzustand, Verbinden).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/components/dashboard/LiveAreaChart.tsx

@@ -18,10 +18,15 @@ function fmt(v: number, unit: string): string {
   return `${n}${unit}`
 }
 
-function ChartTooltip({ active, payload, unit }: any) {
+function ChartTooltip({ active, payload, unit, label }: any) {
   if (!active || !payload?.length) return null
   return (
     <div className="rounded-lg border border-border/70 bg-popover/95 px-3 py-2 shadow-xl backdrop-blur">
+      {Number.isFinite(label) && (
+        <div className="mb-1 border-b border-border/40 pb-1 font-mono text-[10px] text-muted-foreground/80">
+          {new Date(label).toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit", second: "2-digit" })}
+        </div>
+      )}
       <div className="space-y-1">
         {payload.map((p: any) => (
           <div key={p.dataKey} className="flex items-center gap-2 text-[11px] font-mono">
@@ -36,15 +41,17 @@ function ChartTooltip({ active, payload, unit }: any) {
 }
 
 /** Wiederverwendbarer Live-Verlaufsgraph (Recharts Area, glatte Splines, Gradient-Fill,
- * Hover-Tooltip). yMode='percent' → 0..100 in 25er-Schritten; 'auto' → dynamisch (nice). */
+ * Hover-Tooltip). yMode='percent' → 0..100 in 25er-Schritten; 'auto' → dynamisch (nice).
+ * showTime=true blendet die Zeitachse ein (t in ms; Label-Format folgt der Spannweite). */
 export function LiveAreaChart({
-  data, series, unit = "%", yMode = "percent", height = 176,
+  data, series, unit = "%", yMode = "percent", height = 176, showTime = false,
 }: {
   data: any[]
   series: ChartSeries[]
   unit?: string
   yMode?: "percent" | "auto"
   height?: number
+  showTime?: boolean
 }) {
   const peak = data.reduce(
     (m, row) => series.reduce((mm, s) => Math.max(mm, Number(row[s.key]) || 0), m), 0
@@ -53,6 +60,13 @@ export function LiveAreaChart({
     ? Math.min(100, Math.max(25, Math.ceil((peak * 1.2) / 25) * 25))
     : Math.max(niceCeil(peak * 1.15), 10)
 
+  // Kurze Fenster (Live ≈ 2 min) brauchen Sekunden, lange (1 h / 24 h) nur HH:MM.
+  const spanMs = data.length > 1 ? Number(data[data.length - 1]?.t) - Number(data[0]?.t) : 0
+  const fmtTime = (v: number) =>
+    new Date(v).toLocaleTimeString("de-DE",
+      spanMs <= 10 * 60_000 ? { hour: "2-digit", minute: "2-digit", second: "2-digit" }
+                            : { hour: "2-digit", minute: "2-digit" })
+
   return (
     <div style={{ height }} className="w-full">
       <ResponsiveContainer width="100%" height="100%">
@@ -66,7 +80,15 @@ export function LiveAreaChart({
             ))}
           </defs>
           <CartesianGrid vertical={false} stroke={GRID} />
-          <XAxis dataKey="t" hide />
+          {showTime ? (
+            <XAxis
+              dataKey="t" type="number" domain={["dataMin", "dataMax"]}
+              tickFormatter={fmtTime} tickCount={5} minTickGap={40} interval="preserveStartEnd"
+              axisLine={false} tickLine={false} tick={{ fontSize: 10, fill: AXIS }} height={18}
+            />
+          ) : (
+            <XAxis dataKey="t" hide />
+          )}
           <YAxis
             domain={[0, yMax]} ticks={[0, yMax / 2, yMax]} tickFormatter={(v) => fmt(v, unit)}
             width={42} axisLine={false} tickLine={false} tick={{ fontSize: 10, fill: AXIS }}

frontend/src/components/dashboard/RangeSwitch.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@/lib/utils"
+
+// Bereichs-Schalter der Leistungs-Karten: Live (2-min-Browser-Store) vs. 1h/24h
+// (Backend-Ringpuffer, /api/system/history). Bewusst winzig — kein Chart-Gebirge.
+export type ChartRange = "live" | "1h" | "24h"
+export const RANGE_MINUTES: Record<Exclude<ChartRange, "live">, number> = { "1h": 60, "24h": 1440 }
+
+const LABELS: Record<ChartRange, string> = { live: "Live", "1h": "1 h", "24h": "24 h" }
+
+export function RangeSwitch({ value, onChange }: { value: ChartRange; onChange: (r: ChartRange) => void }) {
+  return (
+    <div className="flex rounded-lg border border-border/40 bg-background/30 p-0.5">
+      {(Object.keys(LABELS) as ChartRange[]).map((r) => (
+        <button
+          key={r}
+          onClick={() => onChange(r)}
+          className={cn(
+            "rounded-md px-2 py-0.5 text-[9px] font-bold uppercase tracking-wide transition-all cursor-pointer",
+            value === r ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground",
+          )}
+        >
+          {LABELS[r]}
+        </button>
+      ))}
+    </div>
+  )
+}

frontend/src/components/dashboard/SystemStatusCard.tsx

@@ -1,7 +1,10 @@
+import { useMemo, useState } from "react"
 import { Cpu } from "lucide-react"
 import { useSystemHistory } from "@/lib/useSystemHistory"
+import { useMetricHistory } from "@/lib/queries"
 import { gb } from "@/lib/format"
 import { LiveAreaChart, type ChartSeries } from "./LiveAreaChart"
+import { RangeSwitch, RANGE_MINUTES, type ChartRange } from "./RangeSwitch"
 
 const SERIES: ChartSeries[] = [
   { key: "cpu", label: "CPU", color: "#2dd4bf" },
@@ -12,6 +15,14 @@ const SERIES: ChartSeries[] = [
 
 export function SystemStatusCard() {
   const { sys, hist } = useSystemHistory()
+  const [range, setRange] = useState<ChartRange>("live")
+  const histQ = useMetricHistory(range === "live" ? 60 : RANGE_MINUTES[range], range !== "live")
+
+  // Live = 3-s-Browser-Store (~2 min); 1h/24h = Backend-Ringpuffer mit echten Zeitstempeln.
+  const chartData = useMemo(() => {
+    if (range === "live") return hist
+    return (histQ.data?.points ?? []).map((p) => ({ t: p.t * 1000, cpu: p.cpu, ram: p.ram, gpu: p.gpu, disk: p.disk }))
+  }, [range, hist, histQ.data])
 
   const hasGpu = !!(sys?.gpu && sys.gpu.busy_percent != null && sys.gpu.gtt_used != null && sys.gpu.gtt_total != null)
   const activeSeries = SERIES.filter((s) => s.key !== "gpu" || hasGpu)
@@ -33,9 +44,12 @@ export function SystemStatusCard() {
         <div className="mb-3 flex items-center gap-2">
           <Cpu className="h-4.5 w-4.5 text-primary" />
           <h2 className="text-sm font-semibold uppercase tracking-wide text-foreground">System-Status</h2>
-          <span className="ml-1 inline-flex items-center gap-1 text-[10px] font-medium text-muted-foreground/70">
-            <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" /> live
-          </span>
+          {range === "live" && (
+            <span className="ml-1 inline-flex items-center gap-1 text-[10px] font-medium text-muted-foreground/70">
+              <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" /> live
+            </span>
+          )}
+          <div className="ml-auto"><RangeSwitch value={range} onChange={setRange} /></div>
         </div>
 
         {sys ? (
@@ -50,7 +64,14 @@ export function SystemStatusCard() {
                 </div>
               ))}
             </div>
-            <LiveAreaChart data={hist} series={activeSeries} unit="%" yMode="percent" height={176} />
+            {range !== "live" && chartData.length === 0 && (
+              <div className="flex h-44 items-center justify-center text-xs text-muted-foreground">
+                {histQ.isLoading ? "Verlauf wird geladen …" : "Noch kein Verlauf — der Sammler baut die Historie gerade erst auf."}
+              </div>
+            )}
+            {(range === "live" || chartData.length > 0) && (
+              <LiveAreaChart data={chartData} series={activeSeries} unit="%" yMode="percent" height={176} showTime />
+            )}
           </>
         ) : (
           <div className="flex h-44 items-center justify-center text-xs text-muted-foreground">Lade Systemdaten…</div>

frontend/src/components/dashboard/TokenPerformanceCard.tsx

@@ -1,7 +1,9 @@
+import { useMemo, useState } from "react"
 import { Activity } from "lucide-react"
-import { useTokenStats } from "@/lib/queries"
+import { useTokenStats, useMetricHistory } from "@/lib/queries"
 import { useTokHistory } from "@/lib/metricsStore"
 import { LiveAreaChart, type ChartSeries } from "./LiveAreaChart"
+import { RangeSwitch, RANGE_MINUTES, type ChartRange } from "./RangeSwitch"
 
 const SERIES: ChartSeries[] = [
   { key: "prompt", label: "Prompt", color: "#f59e0b" },
@@ -10,7 +12,27 @@ const SERIES: ChartSeries[] = [
 
 export function TokenPerformanceCard() {
   const { data: ts } = useTokenStats()
-  const hist = useTokHistory()   // Durchsatz-Verlauf aus dem modul-globalen Store
+  const hist = useTokHistory()   // Live-Durchsatz aus dem modul-globalen Store (~2 min)
+  const [range, setRange] = useState<ChartRange>("live")
+  const histQ = useMetricHistory(range === "live" ? 60 : RANGE_MINUTES[range], range !== "live")
+
+  // 1h/24h: Raten aus den Deltas der Gesamtzähler (tok/s zwischen zwei Sample-Punkten).
+  const chartData = useMemo(() => {
+    if (range === "live") return hist
+    const pts = histQ.data?.points ?? []
+    const out: { t: number; prompt: number; completion: number }[] = []
+    for (let i = 1; i < pts.length; i++) {
+      const a = pts[i - 1], b = pts[i]
+      if (a.tp == null || b.tp == null || a.tc == null || b.tc == null) continue
+      const dt = Math.max(b.t - a.t, 1)
+      out.push({
+        t: b.t * 1000,
+        prompt: Math.max(0, (b.tp - a.tp) / dt),
+        completion: Math.max(0, (b.tc - a.tc) / dt),
+      })
+    }
+    return out
+  }, [range, hist, histQ.data])
 
   const last = hist[hist.length - 1]
   const curRate = last ? Math.round(last.prompt + last.completion) : 0
@@ -22,9 +44,11 @@ export function TokenPerformanceCard() {
           <div className="flex items-center gap-2">
             <Activity className="h-4.5 w-4.5 text-primary" />
             <h2 className="text-sm font-semibold uppercase tracking-wide text-foreground">Token-Durchsatz</h2>
-            <span className="ml-1 inline-flex items-center gap-1 text-[10px] font-medium text-muted-foreground/70">
-              <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" /> live
-            </span>
+            {range === "live" && (
+              <span className="ml-1 inline-flex items-center gap-1 text-[10px] font-medium text-muted-foreground/70">
+                <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" /> live
+              </span>
+            )}
           </div>
           {ts && (
             <div className="mt-2 flex items-baseline gap-2">
@@ -45,21 +69,28 @@ export function TokenPerformanceCard() {
             </div>
           )}
         </div>
-        <div className="flex shrink-0 flex-col items-end gap-1.5 pt-1">
-          {SERIES.map((s) => (
-            <div key={s.key} className="flex items-center gap-1.5">
-              <span className="h-2 w-2 rounded-full" style={{ background: s.color }} />
-              <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{s.label}</span>
-              <span className="font-mono text-xs font-bold tabular-nums text-foreground">
-                {Math.round((last?.[s.key as "prompt" | "completion"]) ?? 0)}
-              </span>
-            </div>
-          ))}
+        <div className="flex shrink-0 flex-col items-end gap-2 pt-1">
+          <RangeSwitch value={range} onChange={setRange} />
+          <div className="flex flex-col items-end gap-1.5">
+            {SERIES.map((s) => (
+              <div key={s.key} className="flex items-center gap-1.5">
+                <span className="h-2 w-2 rounded-full" style={{ background: s.color }} />
+                <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{s.label}</span>
+                <span className="font-mono text-xs font-bold tabular-nums text-foreground">
+                  {Math.round((last?.[s.key as "prompt" | "completion"]) ?? 0)}
+                </span>
+              </div>
+            ))}
+          </div>
         </div>
       </div>
 
-      {ts ? (
-        <LiveAreaChart data={hist} series={SERIES} unit=" tok/s" yMode="auto" height={150} />
+      {range !== "live" && chartData.length === 0 ? (
+        <div className="flex h-[150px] items-center justify-center text-xs text-muted-foreground">
+          {histQ.isLoading ? "Verlauf wird geladen …" : "Noch kein Verlauf — der Sammler baut die Historie gerade erst auf."}
+        </div>
+      ) : ts ? (
+        <LiveAreaChart data={chartData} series={SERIES} unit=" tok/s" yMode="auto" height={150} showTime />
       ) : (
         <div className="flex h-[150px] items-center justify-center text-xs text-muted-foreground">Lade Durchsatz…</div>
       )}