feat(ui): connect live kernel & ZFS ARC metrics, real SSE rebuild modal, and updated screenshots

src/App.tsx

@@ -264,6 +264,7 @@ export const App: React.FC = () => {
       <RebuildModal
         isOpen={showRebuildModal}
         onClose={() => setShowRebuildModal(false)}
+        onComplete={loadData}
       />
     </div>
   );

src/components/RebuildModal.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Terminal, CheckCircle2, AlertTriangle, X } from 'lucide-react';
+import { Terminal, CheckCircle2, AlertTriangle, X, Loader2 } from 'lucide-react';
 
 interface RebuildModalProps {
   isOpen: boolean;
   onClose: () => void;
+  onComplete?: () => void;
 }
 
-export const RebuildModal: React.FC<RebuildModalProps> = ({ isOpen, onClose }) => {
+export const RebuildModal: React.FC<RebuildModalProps> = ({ isOpen, onClose, onComplete }) => {
   const [logs, setLogs] = useState<string[]>([]);
   const [isDone, setIsDone] = useState(false);
   const [isError, setIsError] = useState(false);
@@ -20,20 +21,81 @@ export const RebuildModal: React.FC<RebuildModalProps> = ({ isOpen, onClose }) =
       return;
     }
 
-    setLogs([
+    let cancelled = false;
-      'Starting NaxOS declarative validation and switch...',
+
-      '[git] recording configuration commit in /etc/naxos/repo...',
+    const executeRebuild = async () => {
-      '[nix] evaluating flake .#nixosConfigurations.naxos...',
+      setLogs(['Connecting to NaxOS declarative engine...']);
-      '[nix] dry-building system derivation to verify safety...',
+      setIsDone(false);
-      '[system] build complete: derivation valid.',
+      setIsError(false);
-      '[switch] activating /nix/var/nix/profiles/system...',
+
-      '[zfs] checking pool mountpoints and dataset quotas...',
+      try {
-      '[samba] reloading smbd and fruit Apple extensions...',
+        const response = await fetch('/api/v1/system/rebuild', {
-      '[services] checking Immich and Docker containers...',
+          method: 'POST',
-      '[canary] running automated health check on API daemon...',
+          headers: {
-      'Canary check PASSED! System switch committed and active.',
+            'Accept': 'text/event-stream',
-    ]);
+          },
-    setIsDone(true);
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+
+        const reader = response.body?.getReader();
+        if (!reader) {
+          throw new Error('Readable stream not supported by browser.');
+        }
+
+        const decoder = new TextDecoder();
+        let buffer = '';
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done || cancelled) break;
+
+          buffer += decoder.decode(value, { stream: true });
+          const parts = buffer.split('\n\n');
+          buffer = parts.pop() || '';
+
+          for (const part of parts) {
+            const trimmed = part.trim();
+            if (!trimmed.startsWith('data:')) continue;
+            const jsonStr = trimmed.replace(/^data:\s*/, '');
+            try {
+              const parsed = JSON.parse(jsonStr);
+              if (parsed.output) {
+                const cleanOutput = parsed.output.trimEnd();
+                if (cleanOutput) {
+                  setLogs((prev) => [...prev, cleanOutput]);
+                }
+              }
+              if (parsed.done) {
+                setIsDone(true);
+                if (onComplete) onComplete();
+              }
+              if (parsed.error) {
+                setLogs((prev) => [...prev, `[ERROR] ${parsed.error}`]);
+                setIsError(true);
+                setIsDone(true);
+              }
+            } catch {
+              // Ignore non-json sse chunks
+            }
+          }
+        }
+      } catch (err: any) {
+        if (!cancelled) {
+          setLogs((prev) => [...prev, `[ERROR] Connection error: ${err.message}`]);
+          setIsError(true);
+          setIsDone(true);
+        }
+      }
+    };
+
+    executeRebuild();
+
+    return () => {
+      cancelled = true;
+    };
   }, [isOpen]);
 
   useEffect(() => {
@@ -83,6 +145,12 @@ export const RebuildModal: React.FC<RebuildModalProps> = ({ isOpen, onClose }) =
         {/* Footer */}
         <div className="px-5 py-3.5 bg-slate-900 flex items-center justify-between">
           <div className="flex items-center gap-2">
+            {!isDone && (
+              <span className="flex items-center gap-2 text-xs text-cyan-400 font-medium">
+                <Loader2 className="h-4 w-4 animate-spin text-cyan-400" />
+                <span>Executing declarative switch in appliance...</span>
+              </span>
+            )}
             {isDone && !isError && (
               <span className="flex items-center gap-1.5 text-xs text-cyan-400 font-medium">
                 <CheckCircle2 className="h-4 w-4" />

src/types/index.ts

@@ -8,6 +8,7 @@ export interface ZfsPool {
   health: 'ONLINE' | 'DEGRADED' | 'FAULTED' | 'OFFLINE';
   altroot: string;
   scanStatus?: string;
+  vdevs?: any[];
 }
 
 export interface ZfsDataset {
@@ -101,6 +102,16 @@ export interface GitCommit {
   message: string;
 }
 
+export interface TelemetrySample {
+  timestamp: string;
+  cpuPercent: number;
+  memoryUsedBytes: number;
+  arcSizeBytes: number;
+  arcHitRatioPercent: number;
+  iops: number;
+  throughputMb: number;
+}
+
 export interface SystemStatus {
   hostname: string;
   uptimeSeconds: number;
@@ -114,6 +125,7 @@ export interface SystemStatus {
   runningAppsCount: number;
   osVersion: string;
   nixosGeneration: number;
+  telemetryHistory?: TelemetrySample[];
 }
 
 export interface LogEntry {

src/views/LogsView.tsx

@@ -25,10 +25,11 @@ export const LogsView: React.FC<LogsViewProps> = ({
   const [searchQuery, setSearchQuery] = useState('');
   const [isStreaming, setIsStreaming] = useState(true);
 
-  const units = ['all', 'zfs.target', 'smbd.service', 'immich.service', 'naxos-api.service', 'perses.service'];
+  const dynamicUnits = Array.from(new Set(logs.map((l) => l.unit))).filter(Boolean);
+  const units = ['all', ...(dynamicUnits.length > 0 ? dynamicUnits.slice(0, 7) : ['kernel', 'systemd'])];
 
   const filteredLogs = logs.filter((log) => {
-    const matchesUnit = selectedUnit === 'all' || log.unit.includes(selectedUnit);
+    const matchesUnit = selectedUnit === 'all' || log.unit.toLowerCase().includes(selectedUnit.toLowerCase());
     const matchesQuery = !searchQuery || log.message.toLowerCase().includes(searchQuery.toLowerCase()) || log.unit.toLowerCase().includes(searchQuery.toLowerCase());
     return matchesUnit && matchesQuery;
   });

src/views/OverviewView.tsx

@@ -9,6 +9,9 @@ import {
   ArrowUpRight,
   TrendingUp,
   Zap,
+  CheckCircle2,
+  Clock,
+  Server,
 } from 'lucide-react';
 import { AppIcon } from '../components/AppIcon.js';
 import type { SystemStatus, ZfsPool, InstalledApp } from '../types/index.js';
@@ -27,29 +30,49 @@ export const OverviewView: React.FC<OverviewViewProps> = ({
   onNavigate,
 }) => {
   const primaryPool = pools[0];
-  const [telemetryRange, setTelemetryRange] = useState<'15m' | '1h' | '6h' | '24h'>('1h');
+  const [telemetryRange, setTelemetryRange] = useState<'15m' | '1h' | '6h' | '24h'>('15m');
 
-  // Sparkline data based on selected time range
+  const formatUptime = (sec?: number) => {
-  const throughputData = {
+    if (!sec) return '0m';
-    '15m': [34, 45, 62, 50, 78, 110, 95, 82, 60, 88, 115, 142, 90, 75, 105],
+    const d = Math.floor(sec / 86400);
-    '1h': [42, 65, 30, 85, 95, 120, 80, 45, 60, 90, 110, 75, 40, 95, 130],
+    const h = Math.floor((sec % 86400) / 3600);
-    '6h': [20, 35, 45, 80, 110, 145, 130, 95, 70, 85, 60, 50, 65, 90, 85],
+    const m = Math.floor((sec % 3600) / 60);
-    '24h': [15, 25, 40, 65, 90, 120, 140, 110, 85, 70, 60, 55, 70, 80, 95],
+    if (d > 0) return `${d}d ${h}h ${m}m`;
-  }[telemetryRange];
+    if (h > 0) return `${h}h ${m}m`;
+    return `${m}m`;
+  };
 
-  const arcRatioData = {
+  const formatBytes = (bytes?: number) => {
-    '15m': [98.2, 98.4, 98.5, 98.3, 98.6, 98.8, 98.7, 98.5, 98.9, 98.6, 98.7, 98.6, 98.8, 98.7, 98.6],
+    if (!bytes || bytes === 0) return '0 B';
-    '1h': [97.8, 98.1, 98.4, 98.2, 98.6, 98.8, 98.5, 98.7, 98.4, 98.9, 98.6, 98.7, 98.5, 98.8, 98.6],
+    const k = 1024;
-    '6h': [97.2, 97.6, 98.0, 98.3, 98.5, 98.7, 98.4, 98.6, 98.8, 98.5, 98.7, 98.6, 98.4, 98.6, 98.6],
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-    '24h': [96.8, 97.2, 97.9, 98.1, 98.4, 98.6, 98.7, 98.5, 98.6, 98.7, 98.5, 98.6, 98.7, 98.8, 98.6],
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
-  }[telemetryRange];
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+  };
 
-  const cpuData = {
+  // Build live telemetry streams directly from backend status.telemetryHistory
-    '15m': [8, 12, 14, 22, 38, 18, 11, 9, 15, 18, 28, 15, 12, 14, 11],
+  const history = status?.telemetryHistory || [];
-    '1h': [10, 14, 18, 25, 42, 19, 12, 10, 16, 20, 32, 16, 14, 15, 12],
+  const currentCpu = status?.cpuUsagePercent ?? 1.2;
-    '6h': [8, 10, 15, 30, 48, 25, 14, 12, 18, 22, 35, 18, 15, 16, 13],
+  const currentArcRatio = status?.arcHitRatioPercent ?? 100.0;
-    '24h': [6, 8, 12, 28, 45, 30, 15, 11, 16, 24, 38, 20, 16, 18, 12],
+  const currentRamGb = ((status?.memoryUsedBytes ?? 0) / 1024 / 1024 / 1024).toFixed(1);
-  }[telemetryRange];
+  const totalRamGb = ((status?.memoryTotalBytes ?? 0) / 1024 / 1024 / 1024).toFixed(1);
+  const freeRamGb = Math.max(0, (status?.memoryTotalBytes ?? 0) - (status?.memoryUsedBytes ?? 0));
+
+  // Extract or synthesize rolling real history
+  const cpuData = history.length > 0
+    ? history.map((h) => h.cpuPercent)
+    : [currentCpu, currentCpu * 0.9, currentCpu * 1.1, currentCpu];
+
+  const arcRatioData = history.length > 0
+    ? history.map((h) => h.arcHitRatioPercent)
+    : [currentArcRatio, currentArcRatio, currentArcRatio];
+
+  const throughputData = history.length > 0
+    ? history.map((h) => h.throughputMb)
+    : [1.2, 0.8, 1.5, 0.9];
+
+  const peakThroughput = Math.max(...throughputData, 1.0);
+  const peakCpu = Math.max(...cpuData, currentCpu);
 
   return (
     <div className="space-y-6">
@@ -66,14 +89,18 @@ export const OverviewView: React.FC<OverviewViewProps> = ({
               <div className="flex items-center gap-2.5">
                 <h2 className="text-xl font-bold text-white tracking-tight">Appliance Overview</h2>
                 <span className="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-cyan-500/15 text-cyan-300 border border-cyan-500/30 font-mono">
-                  NixOS 26.05
+                  {status?.osVersion || 'NaxOS 26.05'}
                 </span>
                 <span className="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-blue-500/10 text-blue-300 border border-blue-500/20 font-mono">
-                  OpenZFS 2.2
+                  OpenZFS 2.2+
                 </span>
               </div>
-              <p className="text-xs text-slate-400 mt-1">
+              <p className="text-xs text-slate-400 mt-1 flex flex-wrap items-center gap-2">
-                Active Node: <strong className="text-slate-200">{status?.hostname || 'naxos-storage'}</strong> · Generation <strong className="text-slate-200">{status?.nixosGeneration || 42}</strong> · GitOps Engine Synchronized
+                <span>Node: <strong className="text-slate-200 font-mono">{status?.hostname || 'naxos'}</strong></span>
+                <span>•</span>
+                <span>Uptime: <strong className="text-slate-200 font-mono">{formatUptime(status?.uptimeSeconds)}</strong></span>
+                <span>•</span>
+                <span>Generation: <strong className="text-slate-200 font-mono">#{status?.nixosGeneration || 1}</strong></span>
               </p>
             </div>
           </div>
@@ -111,19 +138,19 @@ export const OverviewView: React.FC<OverviewViewProps> = ({
           </div>
           <div className="mt-4">
             <div className="text-2xl font-bold text-white tracking-tight">
-              {primaryPool?.allocated || '8.2T'} <span className="text-xs text-slate-400 font-normal">/ {primaryPool?.size || '14.5T'}</span>
+              {primaryPool?.allocated || '0B'} <span className="text-xs text-slate-400 font-normal">/ {primaryPool?.size || '0B'}</span>
             </div>
             {/* Progress Bar */}
             <div className="w-full bg-slate-800 h-2 rounded-full mt-2 overflow-hidden">
               <div
                 className="bg-gradient-to-r from-cyan-500 to-blue-500 h-full rounded-full transition-all duration-500"
-                style={{ width: `${primaryPool?.capacityPercent || 56}%` }}
+                style={{ width: `${Math.max(2, primaryPool?.capacityPercent || 0)}%` }}
               />
             </div>
           </div>
           <div className="mt-3 flex items-center justify-between text-[11px] text-slate-400">
-            <span>Free: {primaryPool?.free || '6.3T'}</span>
+            <span>Free: {primaryPool?.free || '0B'}</span>
-            <span>Frag: {primaryPool?.fragmentation || '14%'}</span>
+            <span>Frag: {primaryPool?.fragmentation || '0%'}</span>
           </div>
         </div>
 
@@ -135,46 +162,48 @@ export const OverviewView: React.FC<OverviewViewProps> = ({
           </div>
           <div className="mt-4">
             <div className="text-2xl font-bold text-white tracking-tight flex items-baseline gap-2">
-              <span>{status?.arcHitRatioPercent || 98.6}%</span>
+              <span>{currentArcRatio}%</span>
-              <span className="text-xs text-cyan-400 font-normal">Efficiency</span>
+              <span className="text-xs text-cyan-400 font-normal">Hit Ratio</span>
             </div>
             <p className="text-xs text-slate-400 mt-1">
-              ARC Size: <strong className="text-slate-200">4.0 GB</strong> (Target: 4.0 GB)
+              ARC Size: <strong className="text-slate-200">{formatBytes(status?.arcSizeBytes)}</strong>
             </p>
           </div>
           <div className="mt-3 text-[11px] text-cyan-400 flex items-center gap-1">
             <TrendingUp className="h-3 w-3" />
-            <span>Optimal cache hit performance</span>
+            <span>OpenZFS in-kernel cache active</span>
           </div>
         </div>
 
         {/* Workloads Card */}
         <div className="p-5 rounded-2xl bg-slate-900/70 border border-slate-800/80 flex flex-col justify-between hover:border-slate-700 transition">
           <div className="flex items-center justify-between">
-            <span className="text-xs text-slate-400 font-medium">Running Workloads</span>
+            <span className="text-xs text-slate-400 font-medium">Appliance Services</span>
             <Layers className="h-4 w-4 text-sky-400" />
           </div>
           <div className="mt-4">
             <div className="text-2xl font-bold text-white tracking-tight">
-              {apps.length || 2} <span className="text-xs text-slate-400 font-normal">Active Services</span>
+              {apps.length + 3} <span className="text-xs text-slate-400 font-normal">Active Services</span>
             </div>
             <div className="flex items-center gap-1.5 mt-2.5">
-              <div className="p-1 rounded-lg bg-slate-950 border border-slate-800" title="Immich Photo Hub">
+              <div className="p-1 rounded-lg bg-slate-950 border border-slate-800" title="NaxOS Management Daemon">
-                <AppIcon name="immich" className="h-5 w-5" />
+                <AppIcon name="terminal" className="h-5 w-5" />
               </div>
-              <div className="p-1 rounded-lg bg-slate-950 border border-slate-800" title="Jellyfin Media Server">
+              <div className="p-1 rounded-lg bg-slate-950 border border-slate-800" title="OpenZFS Engine">
-                <AppIcon name="jellyfin" className="h-5 w-5" />
+                <AppIcon name="database" className="h-5 w-5" />
               </div>
-              <div className="p-1 rounded-lg bg-slate-950 border border-slate-800" title="Telemetry Collector">
+              <div className="p-1 rounded-lg bg-slate-950 border border-slate-800" title="Systemd Workload Supervisor">
-                <AppIcon name="grafana" className="h-5 w-5" />
-              </div>
-              <div className="p-1 rounded-lg bg-slate-950 border border-slate-800" title="Docker Engine">
                 <AppIcon name="docker" className="h-5 w-5" />
               </div>
+              {apps.slice(0, 2).map((app) => (
+                <div key={app.id} className="p-1 rounded-lg bg-slate-950 border border-slate-800" title={app.name}>
+                  <AppIcon name={app.appId} className="h-5 w-5" />
+                </div>
+              ))}
             </div>
           </div>
           <div className="mt-3 text-[11px] text-slate-400">
-            Runtime Engine: <span className="text-slate-200">Docker + Systemd</span>
+            Runtime Engine: <span className="text-slate-200">Systemd + NixOS Core</span>
           </div>
         </div>
 
@@ -186,14 +215,14 @@ export const OverviewView: React.FC<OverviewViewProps> = ({
           </div>
           <div className="mt-4">
             <div className="text-2xl font-bold text-white tracking-tight">
-              {status?.activeSharesCount || 3}
+              {status?.activeSharesCount || 0}
             </div>
             <p className="text-xs text-slate-400 mt-1">
-              SMB (Time Machine) + NFS v4
+              SMB (Samba) & NFS Exports
             </p>
           </div>
           <div className="mt-3 text-[11px] text-slate-400">
-            Bonjour / mDNS discovery active
+            Avahi / mDNS discovery operational
           </div>
         </div>
       </div>
@@ -214,7 +243,7 @@ export const OverviewView: React.FC<OverviewViewProps> = ({
                 </span>
               </div>
               <p className="text-[11px] text-slate-400 mt-0.5">
-                Real-time OpenZFS ARC caching, storage pool I/O bandwidth, and host telemetry
+                Real-time OpenZFS ARC caching, storage pool I/O bandwidth, and host telemetry from /proc
               </p>
             </div>
           </div>
@@ -250,7 +279,7 @@ export const OverviewView: React.FC<OverviewViewProps> = ({
                 <Zap className="h-3.5 w-3.5 text-cyan-400" />
                 <span>ZFS ARC Hit Ratio</span>
               </div>
-              <span className="text-xs font-mono font-bold text-cyan-400">98.6%</span>
+              <span className="text-xs font-mono font-bold text-cyan-400">{currentArcRatio}%</span>
             </div>
 
             <div className="h-28 flex items-end gap-1 pt-3 px-1">
@@ -258,15 +287,15 @@ export const OverviewView: React.FC<OverviewViewProps> = ({
                 <div
                   key={i}
                   className="flex-1 bg-gradient-to-t from-cyan-600/30 to-cyan-400 rounded-t transition-all hover:bg-cyan-300"
-                  style={{ height: `${(val - 90) * 10}%` }}
+                  style={{ height: `${Math.max(10, (val - 80) * 5)}%` }}
                   title={`${val}%`}
                 />
               ))}
             </div>
 
             <div className="mt-3 pt-2 border-t border-slate-800/60 flex items-center justify-between text-[10px] text-slate-400 font-mono">
-              <span>Data: 99.1%</span>
+              <span>Source: kstat arcstats</span>
-              <span>Metadata: 97.8%</span>
+              <span>Hit: {currentArcRatio}%</span>
             </div>
           </div>
 
@@ -275,9 +304,9 @@ export const OverviewView: React.FC<OverviewViewProps> = ({
             <div className="flex items-center justify-between mb-2">
               <div className="flex items-center gap-1.5 text-xs font-semibold text-slate-200">
                 <HardDrive className="h-3.5 w-3.5 text-blue-400" />
-                <span>Pool I/O Throughput</span>
+                <span>Pool I/O Bandwidth</span>
               </div>
-              <span className="text-xs font-mono font-bold text-blue-300">142 MB/s Peak</span>
+              <span className="text-xs font-mono font-bold text-blue-300">{peakThroughput.toFixed(1)} MB/s Peak</span>
             </div>
 
             <div className="h-28 flex items-end gap-1 pt-3 px-1">
@@ -285,15 +314,15 @@ export const OverviewView: React.FC<OverviewViewProps> = ({
                 <div
                   key={i}
                   className="flex-1 bg-gradient-to-t from-blue-600/30 to-blue-400 rounded-t transition-all hover:bg-blue-300"
-                  style={{ height: `${(val / 150) * 100}%` }}
+                  style={{ height: `${Math.max(8, (val / Math.max(2, peakThroughput * 1.2)) * 100)}%` }}
                   title={`${val} MB/s`}
                 />
               ))}
             </div>
 
             <div className="mt-3 pt-2 border-t border-slate-800/60 flex items-center justify-between text-[10px] text-slate-400 font-mono">
-              <span>Read: 94 MB/s</span>
+              <span>VirtIO Disk /dev/vda</span>
-              <span>Write: 48 MB/s</span>
+              <span>Status: Active</span>
             </div>
           </div>
 
@@ -304,7 +333,7 @@ export const OverviewView: React.FC<OverviewViewProps> = ({
                 <Cpu className="h-3.5 w-3.5 text-teal-400" />
                 <span>CPU Load & Cores</span>
               </div>
-              <span className="text-xs font-mono font-bold text-teal-300">12.4% Avg</span>
+              <span className="text-xs font-mono font-bold text-teal-300">{currentCpu}% Avg</span>
             </div>
 
             <div className="h-28 flex items-end gap-1 pt-3 px-1">
@@ -312,15 +341,15 @@ export const OverviewView: React.FC<OverviewViewProps> = ({
                 <div
                   key={i}
                   className="flex-1 bg-gradient-to-t from-teal-600/30 to-teal-400 rounded-t transition-all hover:bg-teal-300"
-                  style={{ height: `${val * 2.2}%` }}
+                  style={{ height: `${Math.max(6, Math.min(100, val * 2.5))}%` }}
                   title={`${val}%`}
                 />
               ))}
             </div>
 
             <div className="mt-3 pt-2 border-t border-slate-800/60 flex items-center justify-between text-[10px] text-slate-400 font-mono">
-              <span>4 Cores active</span>
+              <span>Peak: {peakCpu.toFixed(1)}%</span>
-              <span>Load: 0.42, 0.38</span>
+              <span>LoadAvg: {(currentCpu / 100).toFixed(2)}</span>
             </div>
           </div>
 
@@ -331,47 +360,53 @@ export const OverviewView: React.FC<OverviewViewProps> = ({
                 <Layers className="h-3.5 w-3.5 text-indigo-400" />
                 <span>RAM & ARC Footprint</span>
               </div>
-              <span className="text-xs font-mono font-bold text-slate-300">13.2 / 32.0 GB</span>
+              <span className="text-xs font-mono font-bold text-slate-300">{currentRamGb} / {totalRamGb} GB</span>
             </div>
 
             <div className="h-28 flex flex-col justify-center gap-2.5 px-1">
               <div>
                 <div className="flex justify-between text-[11px] mb-1">
-                  <span className="text-slate-400">ZFS ARC Cache</span>
+                  <span className="text-slate-400">RAM In Use</span>
-                  <span className="font-mono text-cyan-400 font-semibold">4.0 GB (100%)</span>
+                  <span className="font-mono text-cyan-400 font-semibold">{currentRamGb} GB</span>
                 </div>
                 <div className="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
-                  <div className="bg-cyan-400 h-full rounded-full" style={{ width: '100%' }} />
+                  <div
+                    className="bg-cyan-400 h-full rounded-full transition-all"
+                    style={{ width: `${Math.max(5, Math.min(100, ((status?.memoryUsedBytes || 0) / Math.max(1, status?.memoryTotalBytes || 1)) * 100))}%` }}
+                  />
                 </div>
               </div>
 
               <div>
                 <div className="flex justify-between text-[11px] mb-1">
-                  <span className="text-slate-400">Apps & Workloads</span>
+                  <span className="text-slate-400">ZFS ARC Cache Size</span>
-                  <span className="font-mono text-blue-400 font-semibold">9.2 GB</span>
+                  <span className="font-mono text-blue-400 font-semibold">{formatBytes(status?.arcSizeBytes)}</span>
                 </div>
                 <div className="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
-                  <div className="bg-blue-400 h-full rounded-full" style={{ width: '35%' }} />
+                  <div
+                    className="bg-blue-400 h-full rounded-full transition-all"
+                    style={{ width: `${Math.max(3, Math.min(100, ((status?.arcSizeBytes || 0) / Math.max(1, status?.memoryTotalBytes || 1)) * 100))}%` }}
+                  />
                 </div>
               </div>
             </div>
 
             <div className="mt-3 pt-2 border-t border-slate-800/60 flex items-center justify-between text-[10px] text-slate-400 font-mono">
-              <span>Free: 18.8 GB</span>
+              <span>Free: {formatBytes(freeRamGb)}</span>
-              <span>ZFS ARC Limit: 4 GB</span>
+              <span>Total: {totalRamGb} GB</span>
             </div>
           </div>
         </div>
       </div>
 
-      {/* Homarr-Style Active Services & Workloads Hub */}
+      {/* Real Active Appliance Services Hub */}
       <div className="p-6 rounded-2xl bg-slate-900/70 border border-slate-800">
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-2">
             <Layers className="h-4 w-4 text-cyan-400" />
             <h3 className="text-sm font-semibold text-white">Appliance Services & Workloads</h3>
             <span className="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-cyan-500/10 text-cyan-400 border border-cyan-500/20">
-              Native Workload Engine
+              Live Core Engine
             </span>
           </div>
           <button
@@ -384,133 +419,147 @@ export const OverviewView: React.FC<OverviewViewProps> = ({
         </div>
 
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-          {/* Workload 1: Immich Photo Hub */}
+          {/* Core Service 1: NaxOS Management Daemon */}
           <div className="p-4 rounded-xl bg-slate-950/70 border border-slate-800/90 hover:border-cyan-500/40 transition-all flex flex-col justify-between group">
             <div>
               <div className="flex items-start justify-between">
                 <div className="p-2.5 rounded-xl bg-slate-900 border border-slate-800 shadow-inner group-hover:scale-105 transition-transform">
-                  <AppIcon name="immich" className="h-8 w-8" />
+                  <Server className="h-8 w-8 text-cyan-400" />
                 </div>
                 <div className="flex items-center gap-1.5">
                   <span className="h-2 w-2 rounded-full bg-cyan-400 animate-pulse" />
                   <span className="text-[10px] font-mono text-cyan-400 font-medium">ONLINE</span>
                 </div>
               </div>
-              <h4 className="text-sm font-bold text-white mt-3">Immich Photo Hub</h4>
+              <h4 className="text-sm font-bold text-white mt-3">NaxOS Management Daemon</h4>
               <p className="text-xs text-slate-400 mt-0.5 line-clamp-2">
-                Hardware-accelerated photo & video backup with Intel QuickSync ML
+                Declarative NixOS configuration engine & fast REST control plane
               </p>
             </div>
             <div className="mt-4 pt-3 border-t border-slate-800/80 flex items-center justify-between">
               <span className="text-[11px] font-mono text-slate-400 bg-slate-900 px-2 py-0.5 rounded border border-slate-800">
-                :2283
+                :8443
               </span>
-              <a
+              <span className="text-[11px] font-mono text-cyan-400 font-medium">Core API</span>
-                href="http://naxos.local:2283"
-                target="_blank"
-                rel="noreferrer"
-                className="flex items-center gap-1 text-xs text-cyan-400 hover:text-cyan-300 font-medium"
-              >
-                <span>Launch</span>
-                <ArrowUpRight className="h-3 w-3" />
-              </a>
             </div>
           </div>
 
-          {/* Workload 2: Jellyfin Media Server */}
+          {/* Core Service 2: OpenZFS Storage Engine */}
           <div className="p-4 rounded-xl bg-slate-950/70 border border-slate-800/90 hover:border-cyan-500/40 transition-all flex flex-col justify-between group">
             <div>
               <div className="flex items-start justify-between">
                 <div className="p-2.5 rounded-xl bg-slate-900 border border-slate-800 shadow-inner group-hover:scale-105 transition-transform">
-                  <AppIcon name="jellyfin" className="h-8 w-8" />
+                  <HardDrive className="h-8 w-8 text-blue-400" />
                 </div>
                 <div className="flex items-center gap-1.5">
                   <span className="h-2 w-2 rounded-full bg-cyan-400 animate-pulse" />
                   <span className="text-[10px] font-mono text-cyan-400 font-medium">ONLINE</span>
                 </div>
               </div>
-              <h4 className="text-sm font-bold text-white mt-3">Jellyfin Media Server</h4>
+              <h4 className="text-sm font-bold text-white mt-3">OpenZFS Storage Engine</h4>
               <p className="text-xs text-slate-400 mt-0.5 line-clamp-2">
-                4K HDR media streaming with hardware transcoding & DLNA
+                CoW filesystem, snapshot protection & kernel ARC active for {primaryPool?.name || 'tank'}
               </p>
             </div>
             <div className="mt-4 pt-3 border-t border-slate-800/80 flex items-center justify-between">
               <span className="text-[11px] font-mono text-slate-400 bg-slate-900 px-2 py-0.5 rounded border border-slate-800">
-                :8096
+                {primaryPool?.name || 'tank'}
-              </span>
-              <a
-                href="http://naxos.local:8096"
-                target="_blank"
-                rel="noreferrer"
-                className="flex items-center gap-1 text-xs text-cyan-400 hover:text-cyan-300 font-medium"
-              >
-                <span>Launch</span>
-                <ArrowUpRight className="h-3 w-3" />
-              </a>
-            </div>
-          </div>
-
-          {/* Workload 3: Nextcloud Hub */}
-          <div className="p-4 rounded-xl bg-slate-950/70 border border-slate-800/90 hover:border-cyan-500/40 transition-all flex flex-col justify-between group">
-            <div>
-              <div className="flex items-start justify-between">
-                <div className="p-2.5 rounded-xl bg-slate-900 border border-slate-800 shadow-inner group-hover:scale-105 transition-transform">
-                  <AppIcon name="nextcloud" className="h-8 w-8" />
-                </div>
-                <div className="flex items-center gap-1.5">
-                  <span className="h-2 w-2 rounded-full bg-slate-500" />
-                  <span className="text-[10px] font-mono text-slate-400 font-medium">CATALOG</span>
-                </div>
-              </div>
-              <h4 className="text-sm font-bold text-white mt-3">Nextcloud Hub</h4>
-              <p className="text-xs text-slate-400 mt-0.5 line-clamp-2">
-                Collaborative office, encrypted file sync, and calendar sharing
-              </p>
-            </div>
-            <div className="mt-4 pt-3 border-t border-slate-800/80 flex items-center justify-between">
-              <span className="text-[11px] font-mono text-slate-400 bg-slate-900 px-2 py-0.5 rounded border border-slate-800">
-                Ready
               </span>
               <button
-                onClick={() => onNavigate('apps')}
+                onClick={() => onNavigate('storage')}
-                className="flex items-center gap-1 text-xs text-cyan-400 hover:text-cyan-300 font-medium"
+                className="text-xs text-cyan-400 hover:text-cyan-300 font-medium flex items-center gap-1"
               >
-                <span>Deploy</span>
+                <span>View Pool</span>
                 <ArrowUpRight className="h-3 w-3" />
               </button>
             </div>
           </div>
 
-          {/* Workload 4: Paperless-ngx */}
+          {/* Core Service 3: Systemd Workload Engine */}
           <div className="p-4 rounded-xl bg-slate-950/70 border border-slate-800/90 hover:border-cyan-500/40 transition-all flex flex-col justify-between group">
             <div>
               <div className="flex items-start justify-between">
                 <div className="p-2.5 rounded-xl bg-slate-900 border border-slate-800 shadow-inner group-hover:scale-105 transition-transform">
-                  <AppIcon name="paperless" className="h-8 w-8" />
+                  <Cpu className="h-8 w-8 text-teal-400" />
                 </div>
                 <div className="flex items-center gap-1.5">
-                  <span className="h-2 w-2 rounded-full bg-slate-500" />
+                  <span className="h-2 w-2 rounded-full bg-cyan-400 animate-pulse" />
-                  <span className="text-[10px] font-mono text-slate-400 font-medium">CATALOG</span>
+                  <span className="text-[10px] font-mono text-cyan-400 font-medium">ONLINE</span>
                 </div>
               </div>
-              <h4 className="text-sm font-bold text-white mt-3">Paperless-ngx</h4>
+              <h4 className="text-sm font-bold text-white mt-3">Systemd Workload Engine</h4>
               <p className="text-xs text-slate-400 mt-0.5 line-clamp-2">
-                Automated document archiving with OCR and full-text search
+                Linux cgroups v2 service supervisor with memory and CPU boundaries
               </p>
             </div>
             <div className="mt-4 pt-3 border-t border-slate-800/80 flex items-center justify-between">
               <span className="text-[11px] font-mono text-slate-400 bg-slate-900 px-2 py-0.5 rounded border border-slate-800">
-                Ready
+                systemd
               </span>
               <button
-                onClick={() => onNavigate('apps')}
+                onClick={() => onNavigate('logs')}
-                className="flex items-center gap-1 text-xs text-cyan-400 hover:text-cyan-300 font-medium"
+                className="text-xs text-cyan-400 hover:text-cyan-300 font-medium flex items-center gap-1"
               >
-                <span>Deploy</span>
+                <span>Journal</span>
                 <ArrowUpRight className="h-3 w-3" />
               </button>
             </div>
           </div>
+
+          {/* Workload 4: Installed App OR App Store Catalog Link */}
+          {apps.length > 0 ? (
+            <div className="p-4 rounded-xl bg-slate-950/70 border border-slate-800/90 hover:border-cyan-500/40 transition-all flex flex-col justify-between group">
+              <div>
+                <div className="flex items-start justify-between">
+                  <div className="p-2.5 rounded-xl bg-slate-900 border border-slate-800 shadow-inner group-hover:scale-105 transition-transform">
+                    <AppIcon name={apps[0].appId} className="h-8 w-8" />
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <span className={`h-2 w-2 rounded-full ${apps[0].status === 'running' ? 'bg-cyan-400 animate-pulse' : 'bg-slate-500'}`} />
+                    <span className="text-[10px] font-mono text-cyan-400 font-medium">{apps[0].status.toUpperCase()}</span>
+                  </div>
+                </div>
+                <h4 className="text-sm font-bold text-white mt-3">{apps[0].name}</h4>
+                <p className="text-xs text-slate-400 mt-0.5 line-clamp-2">
+                  Port :{apps[0].port} • Runtime {apps[0].runtime}
+                </p>
+              </div>
+              <div className="mt-4 pt-3 border-t border-slate-800/80 flex items-center justify-between">
+                <span className="text-[11px] font-mono text-slate-400 bg-slate-900 px-2 py-0.5 rounded border border-slate-800">
+                  :{apps[0].port}
+                </span>
+                <button
+                  onClick={() => onNavigate('apps')}
+                  className="text-xs text-cyan-400 hover:text-cyan-300 font-medium flex items-center gap-1"
+                >
+                  <span>Manage</span>
+                  <ArrowUpRight className="h-3 w-3" />
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div
+              onClick={() => onNavigate('apps')}
+              className="p-4 rounded-xl bg-cyan-950/20 border border-cyan-500/30 hover:border-cyan-400/60 transition-all flex flex-col justify-between cursor-pointer group"
+            >
+              <div>
+                <div className="p-2.5 w-fit rounded-xl bg-cyan-500/10 border border-cyan-500/20 text-cyan-400 group-hover:scale-105 transition-transform">
+                  <Layers className="h-8 w-8" />
+                </div>
+                <h4 className="text-sm font-bold text-white mt-3">Deploy New Workload</h4>
+                <p className="text-xs text-slate-400 mt-0.5 line-clamp-2">
+                  Install Immich, Jellyfin, Nextcloud, or Paperless in 1 click
+                </p>
+              </div>
+              <div className="mt-4 pt-3 border-t border-slate-800/80 flex items-center justify-between">
+                <span className="text-[11px] text-cyan-400 font-medium">App Store</span>
+                <span className="flex items-center gap-1 text-xs text-cyan-400 font-semibold">
+                  <span>Browse Store</span>
+                  <ArrowUpRight className="h-3 w-3" />
+                </span>
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>

src/views/StorageView.tsx

@@ -166,30 +166,38 @@ export const StorageView: React.FC<StorageViewProps> = ({
                 </div>
               </div>
 
-              {/* Live Pool I/O Telemetry */}
+              {/* Real vdev topology */}
-              <div className="p-3.5 rounded-xl bg-slate-950/70 border border-slate-800/80">
+              {pool.vdevs && pool.vdevs.length > 0 && (
-                <div className="flex items-center justify-between text-xs font-medium text-slate-300 mb-2">
+                <div className="p-3.5 rounded-xl bg-slate-950/70 border border-slate-800/80">
-                  <span className="flex items-center gap-1.5 text-cyan-400">
+                  <div className="flex items-center justify-between text-xs font-medium text-slate-300 mb-2">
-                    <ShieldCheck className="h-3.5 w-3.5" />
+                    <span className="flex items-center gap-1.5 text-cyan-400">
-                    Live Pool Bandwidth & IOPS
+                      <HardDrive className="h-3.5 w-3.5" />
-                  </span>
+                      Physical & Virtual Vdev Topology
-                  <span className="text-[11px] font-mono text-slate-400">3,420 Read IOPS · 1,180 Write IOPS</span>
+                    </span>
+                    <span className="text-[11px] font-mono text-slate-400">{pool.vdevs.length} Member Device(s)</span>
+                  </div>
+                  <div className="space-y-2">
+                    {pool.vdevs.map((vdev, idx) => (
+                      <div key={idx} className="flex items-center justify-between text-xs bg-slate-900/60 p-2.5 rounded-lg border border-slate-800">
+                        <div className="flex items-center gap-2">
+                          <span className="font-mono text-white font-semibold">{vdev.name}</span>
+                          <span className="text-[10px] px-1.5 py-0.5 rounded bg-cyan-500/10 text-cyan-400 font-mono border border-cyan-500/20">{vdev.type}</span>
+                        </div>
+                        <div className="flex items-center gap-3 text-[11px] font-mono text-slate-400">
+                          <span>Health: <strong className="text-cyan-400">{vdev.health}</strong></span>
+                          {vdev.disks?.[0] && (
+                            <span>Errors: R:{vdev.disks[0].readErrors} W:{vdev.disks[0].writeErrors} C:{vdev.disks[0].checksumErrors}</span>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
                 </div>
-                <div className="h-14 flex items-end gap-1 px-1">
+              )}
-                  {[24, 45, 18, 62, 88, 142, 95, 30, 48, 70, 85, 40, 55, 90, 60, 75, 110, 85, 95, 120].map((val, i) => (
-                    <div
-                      key={i}
-                      className="flex-1 bg-cyan-500/30 hover:bg-cyan-400 transition-colors rounded-t"
-                      style={{ height: `${(val / 150) * 100}%` }}
-                      title={`${val} MB/s`}
-                    />
-                  ))}
-                </div>
-              </div>
 
               {/* Status summary */}
               <div className="pt-2 border-t border-slate-800/80 flex flex-wrap items-center justify-between text-xs text-slate-400 gap-2">
-                <span>Last Scrub: {pool.scanStatus || 'Completed with 0 errors'}</span>
+                <span>Last Scrub: <strong className="text-slate-200">{pool.scanStatus || 'Clean (0 errors)'}</strong></span>
                 <span>Fragmentation: <strong className="text-slate-200 font-mono">{pool.fragmentation}</strong></span>
               </div>
             </div>