From 99185fa392c59a215bd6f21b672df0822dc34903 Mon Sep 17 00:00:00 2001
From: Liosha84 <Liosha84@gmail.com>
Date: Wed, 28 Oct 2026 01:03:18 +0100
Subject: [PATCH] =?UTF-8?q?=D0=B1=D0=BB=D0=B0=20=D0=B1=D0=BB=D0=B0=20?=
 =?UTF-8?q?=D0=B1=D0=BB=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/forwardedPorts.xml                      |   13 +
 .idea/gradle.xml                              |    3 +-
 .idea/misc.xml                                |    5 +-
 backend/build.gradle                          |    1 +
 .../system/SystemMetricsController.java       |   39 +-
 .../system/linux/CpuDetailsResponse.java      |   14 +
 .../system/linux/CpuDetailsService.java       |   68 +
 .../system/linux/LinuxDiskResponse.java       |   11 +
 .../system/linux/LinuxDiskService.java        |   54 +
 .../system/linux/LinuxMemoryResponse.java     |   12 +
 .../system/linux/LinuxMemoryService.java      |   53 +
 .../system/linux/LinuxNetworkResponse.java    |   22 +
 .../system/linux/LinuxNetworkService.java     |   93 ++
 backend/src/main/resources/static/index.html  |    2 +-
 frontend/angular.json                         |    2 +-
 .../src/app/core/models/cpu-details.model.ts  |   10 +
 .../app/core/models/linux-details.model.ts    |   11 +
 .../src/app/core/models/linux-disk.model.ts   |    9 +
 .../src/app/core/models/linux-memory.model.ts |   10 +
 .../app/core/models/linux-network.model.ts    |   17 +
 .../core/services/system-metrics.service.ts   |   90 +-
 frontend/src/app/dashboard/dashboard.html     |  663 +++++----
 frontend/src/app/dashboard/dashboard.scss     | 1277 ++++++++---------
 frontend/src/app/dashboard/dashboard.ts       |  183 ++-
 24 files changed, 1681 insertions(+), 981 deletions(-)
 create mode 100644 .idea/forwardedPorts.xml
 create mode 100644 backend/src/main/java/com/htopweb/system/linux/CpuDetailsResponse.java
 create mode 100644 backend/src/main/java/com/htopweb/system/linux/CpuDetailsService.java
 create mode 100644 backend/src/main/java/com/htopweb/system/linux/LinuxDiskResponse.java
 create mode 100644 backend/src/main/java/com/htopweb/system/linux/LinuxDiskService.java
 create mode 100644 backend/src/main/java/com/htopweb/system/linux/LinuxMemoryResponse.java
 create mode 100644 backend/src/main/java/com/htopweb/system/linux/LinuxMemoryService.java
 create mode 100644 backend/src/main/java/com/htopweb/system/linux/LinuxNetworkResponse.java
 create mode 100644 backend/src/main/java/com/htopweb/system/linux/LinuxNetworkService.java
 create mode 100644 frontend/src/app/core/models/cpu-details.model.ts
 create mode 100644 frontend/src/app/core/models/linux-details.model.ts
 create mode 100644 frontend/src/app/core/models/linux-disk.model.ts
 create mode 100644 frontend/src/app/core/models/linux-memory.model.ts
 create mode 100644 frontend/src/app/core/models/linux-network.model.ts

diff --git a/.idea/forwardedPorts.xml b/.idea/forwardedPorts.xml
new file mode 100644
index 0000000..db5d876
--- /dev/null
+++ b/.idea/forwardedPorts.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PortForwardingSettings">
+    <ports>
+      <entry key="8080">
+        <ForwardedPortInfo>
+          <option name="hostPort" value="8080" />
+          <option name="readOnly" value="false" />
+        </ForwardedPortInfo>
+      </entry>
+    </ports>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/gradle.xml b/.idea/gradle.xml
index 95fdbe3..e2d7a78 100644
--- a/.idea/gradle.xml
+++ b/.idea/gradle.xml
@@ -1,10 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="GradleMigrationSettings" migrationVersion="1" />
   <component name="GradleSettings">
     <option name="linkedExternalProjectsSettings">
       <GradleProjectSettings>
         <option name="externalProjectPath" value="$PROJECT_DIR$/backend" />
-        <option name="gradleJvm" value="#JAVA_HOME" />
+        <option name="gradleJvm" value="21" />
         <option name="modules">
           <set>
             <option value="$PROJECT_DIR$/backend" />
diff --git a/.idea/misc.xml b/.idea/misc.xml
index a94cba3..11d4cb2 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -1,7 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ExternalStorageConfigurationManager" enabled="true" />
-  <component name="ProjectRootManager" version="2">
+  <component name="FrameworkDetectionExcludesConfiguration">
+    <file type="web" url="file://$PROJECT_DIR$/backend" />
+  </component>
+  <component name="ProjectRootManager" version="2" project-jdk-name="21" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/out" />
   </component>
 </project>
\ No newline at end of file
diff --git a/backend/build.gradle b/backend/build.gradle
index 28672a0..7bf8bd9 100644
--- a/backend/build.gradle
+++ b/backend/build.gradle
@@ -18,6 +18,7 @@ repositories {
 }
 
 dependencies {
+	implementation 'org.springframework.boot:spring-boot-starter-actuator'
 	implementation 'org.springframework.boot:spring-boot-starter-webflux'
 
 	testImplementation 'org.springframework.boot:spring-boot-starter-webflux-test'
diff --git a/backend/src/main/java/com/htopweb/system/SystemMetricsController.java b/backend/src/main/java/com/htopweb/system/SystemMetricsController.java
index a7606b9..d16c753 100644
--- a/backend/src/main/java/com/htopweb/system/SystemMetricsController.java
+++ b/backend/src/main/java/com/htopweb/system/SystemMetricsController.java
@@ -1,9 +1,7 @@
 
 package com.htopweb.system;
 
-import com.htopweb.system.linux.LinuxDetailsResponse;
-import com.htopweb.system.linux.LinuxDetailsService;
-
+import com.htopweb.system.linux.*;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
@@ -15,12 +13,25 @@ public class SystemMetricsController {
     private final SystemMetricsService _systemMetricsService;
     private final LinuxDetailsService _linuxDetailsService;
 
+    private  final CpuDetailsService _cpuDetailsService;
+
+    private final LinuxMemoryService _linuxMemoryService;
+    private final LinuxDiskService _linuxDiskService;
+    private final LinuxNetworkService _linuxNetworkService;
+
     public SystemMetricsController(
             SystemMetricsService systemMetricsService,
-            LinuxDetailsService linuxDetailsService
+            LinuxDetailsService linuxDetailsService,
+            CpuDetailsService cpuDetailsService,
+            LinuxMemoryService linuxMemoryService, LinuxDiskService linuxDiskService, LinuxNetworkService linuxNetworkService
+
     ) {
         _systemMetricsService = systemMetricsService;
         _linuxDetailsService = linuxDetailsService;
+        _cpuDetailsService = cpuDetailsService;
+        _linuxMemoryService = linuxMemoryService;
+        _linuxDiskService = linuxDiskService;
+        _linuxNetworkService = linuxNetworkService;
     }
 
     @GetMapping("/metrics")
@@ -32,4 +43,24 @@ public class SystemMetricsController {
     public LinuxDetailsResponse getLinuxDetails() {
         return _linuxDetailsService.getDetails();
     }
+
+    @GetMapping("/cpu")
+    public CpuDetailsResponse getCpuDetails() {
+        return _cpuDetailsService.getDetails();
+    }
+
+    @GetMapping("/linux/memory")
+    public LinuxMemoryResponse getLinuxMemory() {
+        return _linuxMemoryService.getDetails();
+    }
+
+    @GetMapping("/linux/disks")
+    public java.util.List<LinuxDiskResponse> getLinuxDisks() {
+        return _linuxDiskService.getDisks();
+    }
+
+    @GetMapping("/linux/network")
+    public java.util.List<LinuxNetworkResponse> getLinuxNetwork() {
+        return _linuxNetworkService.getInterfaces();
+    }
 }
diff --git a/backend/src/main/java/com/htopweb/system/linux/CpuDetailsResponse.java b/backend/src/main/java/com/htopweb/system/linux/CpuDetailsResponse.java
new file mode 100644
index 0000000..78ac676
--- /dev/null
+++ b/backend/src/main/java/com/htopweb/system/linux/CpuDetailsResponse.java
@@ -0,0 +1,14 @@
+package com.htopweb.system.linux;
+
+import java.util.List;
+
+public record CpuDetailsResponse(
+        double totalUsagePercent,
+        int logicalProcessors,
+        List<CpuCoreResponse> cores
+) {
+    public record CpuCoreResponse(
+            int core,
+            double usagePercent
+    ) {}
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/htopweb/system/linux/CpuDetailsService.java b/backend/src/main/java/com/htopweb/system/linux/CpuDetailsService.java
new file mode 100644
index 0000000..a851db3
--- /dev/null
+++ b/backend/src/main/java/com/htopweb/system/linux/CpuDetailsService.java
@@ -0,0 +1,68 @@
+package com.htopweb.system.linux;
+
+import oshi.SystemInfo;
+import oshi.hardware.CentralProcessor;
+import org.springframework.stereotype.Service;
+
+import java.util.ArrayList;
+import java.util.List;
+
+@Service
+public class CpuDetailsService {
+
+    private final CentralProcessor _processor;
+    private long[][] _previousCoreTicks;
+    private long[] _previousSystemTicks;
+
+    public CpuDetailsService() {
+        SystemInfo systemInfo = new SystemInfo();
+        _processor = systemInfo.getHardware().getProcessor();
+
+        _previousCoreTicks = _processor.getProcessorCpuLoadTicks();
+        _previousSystemTicks = _processor.getSystemCpuLoadTicks();
+    }
+
+    public synchronized CpuDetailsResponse getDetails() {
+        long[][] currentCoreTicks = _processor.getProcessorCpuLoadTicks();
+        long[] currentSystemTicks = _processor.getSystemCpuLoadTicks();
+
+        double[] coreLoads = _processor.getProcessorCpuLoadBetweenTicks(
+                _previousCoreTicks,
+                currentCoreTicks
+        );
+
+        double systemLoad = _processor.getSystemCpuLoadBetweenTicks(
+                _previousSystemTicks,
+                currentSystemTicks
+        );
+
+        _previousCoreTicks = currentCoreTicks;
+        _previousSystemTicks = currentSystemTicks;
+
+        List<CpuDetailsResponse.CpuCoreResponse> cores =
+                new ArrayList<>(coreLoads.length);
+
+        for (int i = 0; i < coreLoads.length; i++) {
+            cores.add(new CpuDetailsResponse.CpuCoreResponse(
+                    i,
+                    toPercent(coreLoads[i] * 100.0)
+            ));
+        }
+
+        return new CpuDetailsResponse(
+                toPercent(systemLoad * 100.0),
+                _processor.getLogicalProcessorCount(),
+                List.copyOf(cores)
+        );
+    }
+
+    private double toPercent(double value) {
+        if (!Double.isFinite(value)) {
+            return 0.0;
+        }
+
+        return Math.round(
+                Math.max(0.0, Math.min(100.0, value)) * 10.0
+        ) / 10.0;
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/htopweb/system/linux/LinuxDiskResponse.java b/backend/src/main/java/com/htopweb/system/linux/LinuxDiskResponse.java
new file mode 100644
index 0000000..13af1f3
--- /dev/null
+++ b/backend/src/main/java/com/htopweb/system/linux/LinuxDiskResponse.java
@@ -0,0 +1,11 @@
+package com.htopweb.system.linux;
+
+public record LinuxDiskResponse(
+        String name,
+        String mountPoint,
+        String fileSystem,
+        long totalBytes,
+        long usableBytes,
+        long usedBytes,
+        double usagePercent
+) {}
\ No newline at end of file
diff --git a/backend/src/main/java/com/htopweb/system/linux/LinuxDiskService.java b/backend/src/main/java/com/htopweb/system/linux/LinuxDiskService.java
new file mode 100644
index 0000000..a080233
--- /dev/null
+++ b/backend/src/main/java/com/htopweb/system/linux/LinuxDiskService.java
@@ -0,0 +1,54 @@
+package com.htopweb.system.linux;
+
+import oshi.SystemInfo;
+import oshi.software.os.OSFileStore;
+import oshi.software.os.OperatingSystem;
+import org.springframework.stereotype.Service;
+
+import java.util.Comparator;
+import java.util.List;
+
+@Service
+public class LinuxDiskService {
+
+    private final OperatingSystem _operatingSystem;
+
+    public LinuxDiskService() {
+        SystemInfo systemInfo = new SystemInfo();
+        _operatingSystem = systemInfo.getOperatingSystem();
+    }
+
+    public List<LinuxDiskResponse> getDisks() {
+        return _operatingSystem.getFileSystem()
+                .getFileStores()
+                .stream()
+                .filter(store -> store.getMount().startsWith("/"))
+                .filter(store -> store.getTotalSpace() > 0)
+                .map(this::toResponse)
+                .sorted(Comparator.comparing(LinuxDiskResponse::mountPoint))
+                .toList();
+    }
+
+    private LinuxDiskResponse toResponse(OSFileStore store) {
+        long total = Math.max(0L, store.getTotalSpace());
+        long usable = Math.max(
+                0L,
+                Math.min(total, store.getUsableSpace())
+        );
+        long used = Math.max(0L, total - usable);
+
+        double usage = total > 0
+                ? Math.round((double) used / total * 1000.0) / 10.0
+                : 0.0;
+
+        return new LinuxDiskResponse(
+                store.getName(),
+                store.getMount(),
+                store.getType(),
+                total,
+                usable,
+                used,
+                usage
+        );
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/htopweb/system/linux/LinuxMemoryResponse.java b/backend/src/main/java/com/htopweb/system/linux/LinuxMemoryResponse.java
new file mode 100644
index 0000000..ded8ee8
--- /dev/null
+++ b/backend/src/main/java/com/htopweb/system/linux/LinuxMemoryResponse.java
@@ -0,0 +1,12 @@
+package com.htopweb.system.linux;
+
+public record LinuxMemoryResponse(
+        long totalRamBytes,
+        long usedRamBytes,
+        long availableRamBytes,
+        double ramUsagePercent,
+        long totalSwapBytes,
+        long usedSwapBytes,
+        long freeSwapBytes,
+        double swapUsagePercent
+) {}
\ No newline at end of file
diff --git a/backend/src/main/java/com/htopweb/system/linux/LinuxMemoryService.java b/backend/src/main/java/com/htopweb/system/linux/LinuxMemoryService.java
new file mode 100644
index 0000000..685b3c6
--- /dev/null
+++ b/backend/src/main/java/com/htopweb/system/linux/LinuxMemoryService.java
@@ -0,0 +1,53 @@
+package com.htopweb.system.linux;
+
+import oshi.SystemInfo;
+import oshi.hardware.GlobalMemory;
+import oshi.hardware.VirtualMemory;
+import org.springframework.stereotype.Service;
+
+@Service
+public class LinuxMemoryService {
+
+    private final GlobalMemory _memory;
+    private final VirtualMemory _virtualMemory;
+
+
+    public LinuxMemoryService() {
+        SystemInfo systemInfo = new SystemInfo();
+        _memory = systemInfo.getHardware().getMemory();
+        _virtualMemory = _memory.getVirtualMemory();
+
+    }
+
+    public LinuxMemoryResponse getDetails() {
+        long totalRam = Math.max(0L, _memory.getTotal());
+        long availableRam = Math.max(0L, Math.min(totalRam, _memory.getAvailable()));
+        long usedRam = Math.max(0L, totalRam - availableRam);
+
+        long totalSwap = Math.max(0L, _virtualMemory.getSwapTotal());
+        long usedSwap = Math.max(
+                0L,
+                Math.min(totalSwap, _virtualMemory.getSwapUsed())
+        );
+        long freeSwap = Math.max(0L, totalSwap - usedSwap);
+
+        return new LinuxMemoryResponse(
+                totalRam,
+                usedRam,
+                availableRam,
+                percentage(usedRam, totalRam),
+                totalSwap,
+                usedSwap,
+                freeSwap,
+                percentage(usedSwap, totalSwap)
+        );
+    }
+
+    private double percentage(long used, long total) {
+        if (total <= 0) {
+            return 0.0;
+        }
+
+        return Math.round((double) used / total * 1000.0) / 10.0;
+    }
+}
\ No newline at end of file
diff --git a/backend/src/main/java/com/htopweb/system/linux/LinuxNetworkResponse.java b/backend/src/main/java/com/htopweb/system/linux/LinuxNetworkResponse.java
new file mode 100644
index 0000000..c6877d4
--- /dev/null
+++ b/backend/src/main/java/com/htopweb/system/linux/LinuxNetworkResponse.java
@@ -0,0 +1,22 @@
+
+package com.htopweb.system.linux;
+
+import java.util.List;
+
+public record LinuxNetworkResponse(
+        String name,
+        String displayName,
+        String macAddress,
+        List<String> ipv4Addresses,
+        List<String> ipv6Addresses,
+        long bytesReceived,
+        long bytesSent,
+        long packetsReceived,
+        long packetsSent,
+        long inboundErrors,
+        long outboundErrors,
+        double receiveBytesPerSecond,
+        double sendBytesPerSecond,
+        double receiveMbps,
+        double sendMbps
+) {}
diff --git a/backend/src/main/java/com/htopweb/system/linux/LinuxNetworkService.java b/backend/src/main/java/com/htopweb/system/linux/LinuxNetworkService.java
new file mode 100644
index 0000000..9b90afd
--- /dev/null
+++ b/backend/src/main/java/com/htopweb/system/linux/LinuxNetworkService.java
@@ -0,0 +1,93 @@
+
+package com.htopweb.system.linux;
+
+import oshi.SystemInfo;
+import oshi.hardware.NetworkIF;
+import org.springframework.stereotype.Service;
+
+import java.util.Arrays;
+import java.util.List;
+import java.util.concurrent.ConcurrentHashMap;
+import java.util.concurrent.ConcurrentMap;
+
+@Service
+public class LinuxNetworkService {
+
+    private final SystemInfo _systemInfo;
+
+    private final ConcurrentMap<String, NetworkSnapshot> _previousSnapshots =
+            new ConcurrentHashMap<>();
+
+    public LinuxNetworkService() {
+        _systemInfo = new SystemInfo();
+    }
+
+    public List<LinuxNetworkResponse> getInterfaces() {
+        return _systemInfo.getHardware()
+                .getNetworkIFs()
+                .stream()
+                .map(this::toResponse)
+                .toList();
+    }
+
+    private LinuxNetworkResponse toResponse(NetworkIF networkIF) {
+        networkIF.updateAttributes();
+
+        String name = networkIF.getName();
+        long received = Math.max(0L, networkIF.getBytesRecv());
+        long sent = Math.max(0L, networkIF.getBytesSent());
+        long now = System.nanoTime();
+
+        NetworkSnapshot current = new NetworkSnapshot(received, sent, now);
+        NetworkSnapshot previous = _previousSnapshots.put(name, current);
+
+        double receiveBytesPerSecond = 0.0;
+        double sendBytesPerSecond = 0.0;
+
+        if (previous != null && now > previous.timestampNanos()) {
+            double elapsedSeconds =
+                    (now - previous.timestampNanos()) / 1_000_000_000.0;
+
+            if (received >= previous.bytesReceived()) {
+                receiveBytesPerSecond =
+                        (received - previous.bytesReceived()) / elapsedSeconds;
+            }
+
+            if (sent >= previous.bytesSent()) {
+                sendBytesPerSecond =
+                        (sent - previous.bytesSent()) / elapsedSeconds;
+            }
+        }
+
+        double receiveMbps = receiveBytesPerSecond * 8.0 / 1_000_000.0;
+        double sendMbps = sendBytesPerSecond * 8.0 / 1_000_000.0;
+
+        return new LinuxNetworkResponse(
+                name,
+                networkIF.getDisplayName(),
+                networkIF.getMacaddr(),
+                Arrays.asList(networkIF.getIPv4addr()),
+                Arrays.asList(networkIF.getIPv6addr()),
+                received,
+                sent,
+                Math.max(0L, networkIF.getPacketsRecv()),
+                Math.max(0L, networkIF.getPacketsSent()),
+                Math.max(0L, networkIF.getInErrors()),
+                Math.max(0L, networkIF.getOutErrors()),
+                roundOne(receiveBytesPerSecond),
+                roundOne(sendBytesPerSecond),
+                roundOne(receiveMbps),
+                roundOne(sendMbps)
+        );
+    }
+
+    private double roundOne(double value) {
+        return Math.round(value * 10.0) / 10.0;
+    }
+
+    private record NetworkSnapshot(
+            long bytesReceived,
+            long bytesSent,
+            long timestampNanos
+    ) {}
+}
diff --git a/backend/src/main/resources/static/index.html b/backend/src/main/resources/static/index.html
index 2a8adf9..1b74f1c 100644
--- a/backend/src/main/resources/static/index.html
+++ b/backend/src/main/resources/static/index.html
@@ -9,5 +9,5 @@
 <link rel="stylesheet" href="styles-5INURTSO.css"></head>
 <body>
   <app-root></app-root>
-<script src="main-7OF6PXJ5.js" type="module"></script></body>
+<script src="main-Y67327X6.js" type="module"></script></body>
 </html>
diff --git a/frontend/angular.json b/frontend/angular.json
index 17fc4dd..a8684fa 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -44,7 +44,7 @@
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "10kb",
-                  "maximumError": "12kb"
+                  "maximumError": "30kb"
                 }
               ],
               "outputHashing": "all"
diff --git a/frontend/src/app/core/models/cpu-details.model.ts b/frontend/src/app/core/models/cpu-details.model.ts
new file mode 100644
index 0000000..4f597e2
--- /dev/null
+++ b/frontend/src/app/core/models/cpu-details.model.ts
@@ -0,0 +1,10 @@
+export interface CpuCore {
+  core: number;
+  usagePercent: number;
+}
+
+export interface CpuDetails {
+  totalUsagePercent: number;
+  logicalProcessors: number;
+  cores: CpuCore[];
+}
diff --git a/frontend/src/app/core/models/linux-details.model.ts b/frontend/src/app/core/models/linux-details.model.ts
new file mode 100644
index 0000000..cd5aa1e
--- /dev/null
+++ b/frontend/src/app/core/models/linux-details.model.ts
@@ -0,0 +1,11 @@
+export interface LinuxDetails {
+  linux: boolean;
+  hostname: string;
+  distribution: string;
+  kernelVersion: string;
+  uptimeSeconds: number;
+  loadAverage1Min: number;
+  loadAverage5Min: number;
+  loadAverage15Min: number;
+  logicalProcessors: number;
+}
diff --git a/frontend/src/app/core/models/linux-disk.model.ts b/frontend/src/app/core/models/linux-disk.model.ts
new file mode 100644
index 0000000..b6166b3
--- /dev/null
+++ b/frontend/src/app/core/models/linux-disk.model.ts
@@ -0,0 +1,9 @@
+export interface LinuxDisk {
+  name: string;
+  mountPoint: string;
+  fileSystem: string;
+  totalBytes: number;
+  usableBytes: number;
+  usedBytes: number;
+  usagePercent: number;
+}
diff --git a/frontend/src/app/core/models/linux-memory.model.ts b/frontend/src/app/core/models/linux-memory.model.ts
new file mode 100644
index 0000000..cf9d0df
--- /dev/null
+++ b/frontend/src/app/core/models/linux-memory.model.ts
@@ -0,0 +1,10 @@
+export interface LinuxMemory {
+  totalRamBytes: number;
+  usedRamBytes: number;
+  availableRamBytes: number;
+  ramUsagePercent: number;
+  totalSwapBytes: number;
+  usedSwapBytes: number;
+  freeSwapBytes: number;
+  swapUsagePercent: number;
+}
diff --git a/frontend/src/app/core/models/linux-network.model.ts b/frontend/src/app/core/models/linux-network.model.ts
new file mode 100644
index 0000000..cba8ee2
--- /dev/null
+++ b/frontend/src/app/core/models/linux-network.model.ts
@@ -0,0 +1,17 @@
+export interface LinuxNetwork {
+  name: string;
+  displayName: string;
+  macAddress: string;
+  ipv4Addresses: string[];
+  ipv6Addresses: string[];
+  bytesReceived: number;
+  bytesSent: number;
+  packetsReceived: number;
+  packetsSent: number;
+  inboundErrors: number;
+  outboundErrors: number;
+  receiveBytesPerSecond: number;
+  sendBytesPerSecond: number;
+  receiveMbps: number;
+  sendMbps: number;
+}
diff --git a/frontend/src/app/core/services/system-metrics.service.ts b/frontend/src/app/core/services/system-metrics.service.ts
index 7fb5931..07f95e2 100644
--- a/frontend/src/app/core/services/system-metrics.service.ts
+++ b/frontend/src/app/core/services/system-metrics.service.ts
@@ -1,9 +1,14 @@
 import { Injectable, inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable, timer, switchMap, shareReplay, catchError, of } from 'rxjs';
+import { Observable, timer, switchMap, shareReplay, catchError, of, map } from 'rxjs';
 
 import { SystemMetrics } from '../models/system-metrics.model';
 import { SystemProcess } from '../models/system-process.model';
+import { LinuxDetails } from '../models/linux-details.model';
+import { CpuDetails } from '../models/cpu-details.model';
+import { LinuxMemory } from '../models/linux-memory.model';
+import { LinuxDisk } from '../models/linux-disk.model';
+import { LinuxNetwork } from '../models/linux-network.model';
 
 @Injectable({
   providedIn: 'root',
@@ -11,22 +16,95 @@ import { SystemProcess } from '../models/system-process.model';
 export class SystemMetricsService {
   private readonly http = inject(HttpClient);
 
-  readonly metrics$: Observable<SystemMetrics> = timer(0, 1000).pipe(
-    switchMap(() => this.http.get<SystemMetrics>('/api/system/metrics')),
+  private readonly refreshInterval = 1000;
+
+  readonly metrics$: Observable<SystemMetrics> = timer(0, this.refreshInterval).pipe(
+    switchMap(() =>
+      this.http.get<SystemMetrics>('/api/system/metrics').pipe(
+        catchError((error: unknown) => {
+          console.error('Failed to load system metrics', error);
+          return of(null);
+        }),
+      ),
+    ),
+    // Ignore failed requests without terminating the stream.
+    map((value) => value),
+    // Keep the last successful response for subscribers.
     shareReplay({ bufferSize: 1, refCount: true }),
+    // The public type remains SystemMetrics below via the typed getter.
+    map((value) => value as SystemMetrics),
   );
 
-  readonly processes$: Observable<SystemProcess[]> = timer(0, 1000).pipe(
+  readonly processes$: Observable<SystemProcess[]> = timer(0, this.refreshInterval).pipe(
     switchMap(() =>
       this.http.get<SystemProcess[] | { value: SystemProcess[] }>('/api/system/processes').pipe(
+        map((response) => (Array.isArray(response) ? response : (response.value ?? []))),
         catchError((error: unknown) => {
           console.error('Failed to load system processes', error);
           return of([] as SystemProcess[]);
         }),
       ),
     ),
-    // Normalize either a plain array or a response containing "value".
-    switchMap((response) => of(Array.isArray(response) ? response : response.value)),
+    shareReplay({ bufferSize: 1, refCount: true }),
+  );
+
+  readonly linux$: Observable<LinuxDetails | null> = timer(0, this.refreshInterval).pipe(
+    switchMap(() =>
+      this.http.get<LinuxDetails>('/api/system/linux').pipe(
+        catchError((error: unknown) => {
+          console.error('Failed to load Linux details', error);
+          return of(null);
+        }),
+      ),
+    ),
+    shareReplay({ bufferSize: 1, refCount: true }),
+  );
+
+  readonly cpu$: Observable<CpuDetails | null> = timer(0, this.refreshInterval).pipe(
+    switchMap(() =>
+      this.http.get<CpuDetails>('/api/system/cpu').pipe(
+        catchError((error: unknown) => {
+          console.error('Failed to load CPU details', error);
+          return of(null);
+        }),
+      ),
+    ),
+    shareReplay({ bufferSize: 1, refCount: true }),
+  );
+
+  readonly memory$: Observable<LinuxMemory | null> = timer(0, this.refreshInterval).pipe(
+    switchMap(() =>
+      this.http.get<LinuxMemory>('/api/system/linux/memory').pipe(
+        catchError((error: unknown) => {
+          console.error('Failed to load memory details', error);
+          return of(null);
+        }),
+      ),
+    ),
+    shareReplay({ bufferSize: 1, refCount: true }),
+  );
+
+  readonly disks$: Observable<LinuxDisk[]> = timer(0, 10_000).pipe(
+    switchMap(() =>
+      this.http.get<LinuxDisk[]>('/api/system/linux/disks').pipe(
+        catchError((error: unknown) => {
+          console.error('Failed to load disk details', error);
+          return of([] as LinuxDisk[]);
+        }),
+      ),
+    ),
+    shareReplay({ bufferSize: 1, refCount: true }),
+  );
+
+  readonly network$: Observable<LinuxNetwork[]> = timer(0, this.refreshInterval).pipe(
+    switchMap(() =>
+      this.http.get<LinuxNetwork[]>('/api/system/linux/network').pipe(
+        catchError((error: unknown) => {
+          console.error('Failed to load network details', error);
+          return of([] as LinuxNetwork[]);
+        }),
+      ),
+    ),
     shareReplay({ bufferSize: 1, refCount: true }),
   );
 }
diff --git a/frontend/src/app/dashboard/dashboard.html b/frontend/src/app/dashboard/dashboard.html
index fc9b012..f4fe001 100644
--- a/frontend/src/app/dashboard/dashboard.html
+++ b/frontend/src/app/dashboard/dashboard.html
@@ -1,297 +1,406 @@
 
-<main class="dashboard" [class.htop-mode]="viewMode === 'htop'">
-  <header class="page-header">
-    <div>
-      <h1>htop-web</h1>
-      <p>System monitoring dashboard</p>
-    </div>
+<main
+  class="dashboard"
+  [class.htop-mode]="viewMode === 'htop'"
+  [class.htop-original-mode]="viewMode === 'htop-original'"
+>
+  <nav class="view-switcher">
+    <button
+      type="button"
+      [class.view-active]="viewMode === 'monitor'"
+      (click)="setViewMode('monitor')"
+    >Monitor</button>
+    <button
+      type="button"
+      [class.view-active]="viewMode === 'htop'"
+      (click)="setViewMode('htop')"
+    >htop</button>
+    <button
+      type="button"
+      [class.view-active]="viewMode === 'htop-original'"
+      (click)="setViewMode('htop-original')"
+    >htop-original</button>
+  </nav>
 
-    <div class="header-actions">
-      <div class="view-switcher" role="group" aria-label="Dashboard view">
-        <button
-          type="button"
-          [class.active]="viewMode === 'monitor'"
-          [attr.aria-pressed]="viewMode === 'monitor'"
-          (click)="setViewMode('monitor')">
-          <span>▦</span>
-          Monitor
-        </button>
-
-        <button
-          type="button"
-          [class.active]="viewMode === 'htop'"
-          [attr.aria-pressed]="viewMode === 'htop'"
-          (click)="setViewMode('htop')">
-          <span>▤</span>
-          htop
-        </button>
-      </div>
-
-      <span class="live-indicator">
-        <span class="live-dot"></span>
-        Live monitoring
-      </span>
-    </div>
-  </header>
-
-  @if (metrics$ | async; as metrics) {
-    @if (viewMode === 'monitor') {
-      <section class="system-info">
-        <div>
-          <span class="label">HOSTNAME</span>
-          <strong>{{ metrics.hostname }}</strong>
-        </div>
-
-        <div>
-          <span class="label">OPERATING SYSTEM</span>
-          <strong>{{ metrics.operatingSystem }} {{ metrics.osVersion }}</strong>
-        </div>
-
-        <div>
-          <span class="label">PROCESSOR</span>
-          <strong>{{ metrics.processor }}</strong>
-          <span class="muted">
-            {{ metrics.logicalProcessors }} logical processors
-          </span>
-        </div>
-      </section>
-
-      <section class="metrics-grid">
-        <article class="metric-card">
-          <div class="card-heading">
-            <span class="metric-icon cpu-icon">CPU</span>
-            <span class="muted">Processor load</span>
-          </div>
-
-          <div class="metric-value">
-            {{ metrics.cpuUsagePercent | number:'1.1-1' }}<span>%</span>
-          </div>
-
-          <div
-            class="progress-track"
-            role="progressbar"
-            aria-label="CPU usage"
-            [attr.aria-valuenow]="metrics.cpuUsagePercent"
-            aria-valuemin="0"
-            aria-valuemax="100">
-            <div
-              class="progress-fill cpu-fill"
-              [style.width.%]="clampPercent(metrics.cpuUsagePercent)">
-            </div>
-          </div>
-
-          <p class="card-footer">Total CPU utilization</p>
-        </article>
-
-        <article class="metric-card">
-          <div class="card-heading">
-            <span class="metric-icon memory-icon">RAM</span>
-            <span class="muted">Physical memory</span>
-          </div>
-
-          <div class="metric-value">
-            {{ metrics.memoryUsagePercent | number:'1.1-1' }}<span>%</span>
-          </div>
-
-          <div
-            class="progress-track"
-            role="progressbar"
-            aria-label="Memory usage"
-            [attr.aria-valuenow]="metrics.memoryUsagePercent"
-            aria-valuemin="0"
-            aria-valuemax="100">
-            <div
-              class="progress-fill memory-fill"
-              [style.width.%]="clampPercent(metrics.memoryUsagePercent)">
-            </div>
-          </div>
-
-          <div class="memory-details">
-            <span>Used: {{ formatBytes(metrics.usedMemoryBytes) }}</span>
-            <span>Total: {{ formatBytes(metrics.totalMemoryBytes) }}</span>
-          </div>
-
-          <p class="card-footer">
-            Available: {{ formatBytes(metrics.availableMemoryBytes) }}
-          </p>
-        </article>
-      </section>
-    } @else {
-      <section class="htop-system-panel">
-        <div class="htop-system-heading">
+  @if (viewMode === 'monitor') {
+    <section class="monitor-view">
+      @if (metrics$ | async; as metrics) {
+        <header class="monitor-heading">
           <div>
-            <span class="htop-brand">HTOP-WEB</span>
-            <h2>{{ metrics.hostname }}</h2>
+            <span class="eyebrow">SYSTEM MONITOR</span>
+            <h1>{{ metrics.hostname }}</h1>
+            <p>{{ metrics.operatingSystem }} · {{ metrics.osVersion }}</p>
           </div>
-
-          <div class="htop-os">
-            {{ metrics.operatingSystem }} {{ metrics.osVersion }}
+          <div class="status-indicator">
+            <span></span> Live
           </div>
-        </div>
+        </header>
 
-        <div class="htop-resource">
-          <div class="htop-resource-label">
-            <span>CPU</span>
+        <div class="monitor-cards">
+          <article class="monitor-card">
+            <span class="card-label">CPU USAGE</span>
             <strong>{{ metrics.cpuUsagePercent | number:'1.1-1' }}%</strong>
-          </div>
-
-          <div
-            class="htop-bar"
-            role="progressbar"
-            aria-label="CPU usage"
-            [attr.aria-valuenow]="metrics.cpuUsagePercent"
-            aria-valuemin="0"
-            aria-valuemax="100">
-            <div
-              class="htop-bar-fill htop-cpu-fill"
-              [style.width.%]="clampPercent(metrics.cpuUsagePercent)">
+            <div class="progress-track">
+              <div
+                class="progress-fill cpu-fill"
+                [style.width.%]="clampPercent(metrics.cpuUsagePercent)"
+              ></div>
             </div>
-          </div>
+            <span class="card-caption">{{ metrics.logicalProcessors }} logical processors</span>
+          </article>
 
-          <div class="htop-resource-meta">
-            {{ metrics.processor }}
-            · {{ metrics.logicalProcessors }} logical processors
-          </div>
+          <article class="monitor-card">
+            <span class="card-label">MEMORY USAGE</span>
+            <strong>{{ metrics.memoryUsagePercent | number:'1.1-1' }}%</strong>
+            <div class="progress-track">
+              <div
+                class="progress-fill memory-fill"
+                [style.width.%]="clampPercent(metrics.memoryUsagePercent)"
+              ></div>
+            </div>
+            <span class="card-caption">
+              {{ formatBytes(metrics.usedMemoryBytes) }} / {{ formatBytes(metrics.totalMemoryBytes) }}
+            </span>
+          </article>
+
+          <article class="monitor-card">
+            <span class="card-label">AVAILABLE MEMORY</span>
+            <strong>{{ formatBytes(metrics.availableMemoryBytes) }}</strong>
+            <span class="card-caption">Currently available</span>
+          </article>
         </div>
 
-        <div class="htop-resource">
-          <div class="htop-resource-label">
-            <span>Mem</span>
-            <strong>
-              {{ formatBytes(metrics.usedMemoryBytes) }}
-              / {{ formatBytes(metrics.totalMemoryBytes) }}
-            </strong>
-          </div>
-
-          <div
-            class="htop-bar"
-            role="progressbar"
-            aria-label="Memory usage"
-            [attr.aria-valuenow]="metrics.memoryUsagePercent"
-            aria-valuemin="0"
-            aria-valuemax="100">
-            <div
-              class="htop-bar-fill htop-memory-fill"
-              [style.width.%]="clampPercent(metrics.memoryUsagePercent)">
+        @if (cpu$ | async; as cpu) {
+          <section class="monitor-section">
+            <h2>CPU cores</h2>
+            <div class="core-cards">
+              @for (core of cpu.cores; track core.core) {
+                <article class="core-card">
+                  <div class="core-card-heading">
+                    <span>Core {{ core.core }}</span>
+                    <strong>{{ core.usagePercent | number:'1.1-1' }}%</strong>
+                  </div>
+                  <div class="progress-track">
+                    <div
+                      class="progress-fill cpu-fill"
+                      [style.width.%]="clampPercent(core.usagePercent)"
+                    ></div>
+                  </div>
+                </article>
+              }
             </div>
-          </div>
+          </section>
+        }
+      } @else {
+        <p class="loading-state">Waiting for system metrics…</p>
+      }
 
-          <div class="htop-resource-meta">
-            {{ metrics.memoryUsagePercent | number:'1.1-1' }}% used
-            · {{ formatBytes(metrics.availableMemoryBytes) }} available
+      @if (linux$ | async; as linux) {
+        <section class="monitor-section system-info">
+          <h2>System information</h2>
+          <div class="system-info-grid">
+            <div><span>Hostname</span><strong>{{ linux.hostname }}</strong></div>
+            <div><span>Distribution</span><strong>{{ linux.distribution }}</strong></div>
+            <div><span>Kernel</span><strong>{{ linux.kernelVersion }}</strong></div>
+            <div><span>Uptime</span><strong>{{ formatUptime(linux.uptimeSeconds) }}</strong></div>
+            <div><span>Load 1 min</span><strong>{{ linux.loadAverage1Min | number:'1.2-2' }}</strong></div>
+            <div><span>Load 5 min</span><strong>{{ linux.loadAverage5Min | number:'1.2-2' }}</strong></div>
+            <div><span>Load 15 min</span><strong>{{ linux.loadAverage15Min | number:'1.2-2' }}</strong></div>
           </div>
+        </section>
+      }
+    </section>
+  } @else if (viewMode === 'htop') {
+    <section class="classic-htop">
+      @if (cpu$ | async; as cpu) {
+        <div class="classic-cpu-grid">
+          @for (core of cpu.cores; track core.core) {
+            <div class="classic-meter-row">
+              <span class="classic-label">{{ core.core }}</span>
+              <div class="classic-meter-track">
+                <div
+                  class="classic-meter-fill"
+                  [style.width.%]="clampPercent(core.usagePercent)"
+                ></div>
+              </div>
+              <strong>{{ core.usagePercent | number:'1.0-0' }}%</strong>
+            </div>
+          }
         </div>
+      }
+
+      @if (memory$ | async; as memory) {
+        <div class="classic-memory-row">
+          <span>Mem</span>
+          <div class="classic-meter-track">
+            <div
+              class="classic-memory-fill"
+              [style.width.%]="clampPercent(memory.ramUsagePercent)"
+            ></div>
+          </div>
+          <strong>{{ formatBytes(memory.usedRamBytes) }} / {{ formatBytes(memory.totalRamBytes) }}</strong>
+        </div>
+        <div class="classic-memory-row">
+          <span>Swp</span>
+          <div class="classic-meter-track">
+            <div
+              class="classic-swap-fill"
+              [style.width.%]="clampPercent(memory.swapUsagePercent)"
+            ></div>
+          </div>
+          <strong>{{ formatBytes(memory.usedSwapBytes) }} / {{ formatBytes(memory.totalSwapBytes) }}</strong>
+        </div>
+      }
+
+      @if (linux$ | async; as linux) {
+        <div class="classic-system-line">
+          <span>Load average</span>
+          {{ linux.loadAverage1Min | number:'1.2-2' }}
+          {{ linux.loadAverage5Min | number:'1.2-2' }}
+          {{ linux.loadAverage15Min | number:'1.2-2' }}
+          <span>Uptime</span>
+          {{ formatUptime(linux.uptimeSeconds) }}
+        </div>
+      }
+
+      <section class="classic-processes">
+        <header class="classic-process-heading">
+          <span>PID</span><span>Command</span><span>CPU%</span><span>MEMORY</span><span>STATE</span>
+        </header>
+        @if (processes$ | async; as processes) {
+          @for (process of getSortedProcesses(processes); track process.pid) {
+            <div class="classic-process-row">
+              <span>{{ process.pid }}</span>
+              <span class="classic-command">{{ process.name }}</span>
+              <span>{{ process.cpuUsagePercent | number:'1.1-1' }}</span>
+              <span>{{ formatBytes(process.residentMemoryBytes) }}</span>
+              <span>{{ process.state }}</span>
+            </div>
+          } @empty {
+            <p class="loading-state">No processes available</p>
+          }
+        }
       </section>
-    }
+    </section>
   } @else {
-    <section class="loading">
-      <div class="spinner"></div>
-      <p>Connecting to system metrics...</p>
+    <!-- htop-original: styling follows the supplied reference -->
+    <section class="htop-original">
+      @if (cpu$ | async; as cpu) {
+        @if (memory$ | async; as memory) {
+          @if (linux$ | async; as linux) {
+            <header class="original-header">
+              <div class="original-meters">
+                <div class="original-cpu-grid">
+                  @for (core of cpu.cores; track core.core) {
+                    <div class="original-meter-row">
+                      <span class="original-cpu-number">{{ core.core }}</span>
+                      <span class="meter-bracket">[</span>
+                      <span class="original-meter-bar">
+                        @for (segment of meterSegments20; track segment) {
+                          <span
+                            [class.pipe-used]="segment < core.usagePercent / 5"
+                            [class.pipe-bg]="segment >= core.usagePercent / 5"
+                          >|</span>
+                        }
+                      </span>
+                      <span class="meter-bracket">]</span>
+                      <span class="original-meter-value">{{ core.usagePercent | number:'1.1-1' }}%</span>
+                    </div>
+                  }
+                </div>
+
+                <div class="original-meter-row">
+                  <span class="original-meter-label">Mem</span>
+                  <span class="meter-bracket">[</span>
+                  <span class="original-meter-bar">
+                    @for (segment of meterSegments35; track segment) {
+                      <span
+                        [class.pipe-used]="segment < memory.ramUsagePercent / 100 * 35"
+                        [class.pipe-bg]="segment >= memory.ramUsagePercent / 100 * 35"
+                      >|</span>
+                    }
+                  </span>
+                  <span class="meter-bracket">]</span>
+                  <span class="original-meter-value">
+                    {{ formatBytes(memory.usedRamBytes) }}/{{ formatBytes(memory.totalRamBytes) }}
+                  </span>
+                </div>
+
+                <div class="original-meter-row">
+                  <span class="original-meter-label">Swp</span>
+                  <span class="meter-bracket">[</span>
+                  <span class="original-meter-bar">
+                    @for (segment of meterSegments15; track segment) {
+                      <span
+                        [class.pipe-used]="memory.totalSwapBytes > 0 && segment < memory.swapUsagePercent / 100 * 15"
+                        [class.pipe-bg]="memory.totalSwapBytes <= 0 || segment >= memory.swapUsagePercent / 100 * 15"
+                      >|</span>
+                    }
+                  </span>
+                  <span class="meter-bracket">]</span>
+                  <span class="original-meter-value">
+                    {{ formatBytes(memory.usedSwapBytes) }}/{{ formatBytes(memory.totalSwapBytes) }}
+                  </span>
+                </div>
+              </div>
+
+              <div class="original-system-summary">
+                @if (processes$ | async; as processes) {
+                  <div>
+                    <span class="original-label">Tasks:</span>
+                    <span class="original-white">{{ processes.length }}</span>,
+                    <span class="original-white">—</span>
+                    <span class="original-dim">thr</span>;
+                    <span class="original-white">—</span>
+                    <span class="original-dim">kthr</span>;
+                    <span class="original-green">{{ countRunningProcesses(processes) }} running</span>
+                  </div>
+                }
+
+                <div class="original-summary-row">
+                  <span class="original-label">Load average:</span>
+                  <span class="original-white">{{ linux.loadAverage1Min | number:'1.2-2' }}</span>
+                  <span class="original-white">{{ linux.loadAverage5Min | number:'1.2-2' }}</span>
+                  <span class="original-white">{{ linux.loadAverage15Min | number:'1.2-2' }}</span>
+                </div>
+
+                <div class="original-summary-row">
+                  <span class="original-label">Uptime:</span>
+                  <span class="original-green">{{ formatUptime(linux.uptimeSeconds) }}</span>
+                </div>
+
+                <div class="original-navigation-hint">
+                  <span>Navigation:</span> ↑/↓ (or J/K) Select |
+                  <span>/</span> Filter |
+                  <span>K</span> Kill |
+                  <span>P</span> CPU Sort |
+                  <span>M</span> MEM Sort
+                </div>
+              </div>
+            </header>
+          }
+        }
+      }
+
+      <nav class="original-tabs" role="tablist" aria-label="htop views">
+        <button
+          type="button"
+          role="tab"
+          [attr.aria-selected]="htopOriginalTab === 'main'"
+          [class.original-tab-active]="htopOriginalTab === 'main'"
+          [class.original-tab-inactive]="htopOriginalTab !== 'main'"
+          (click)="setHtopOriginalTab('main')"
+        >Main</button>
+        <button
+          type="button"
+          role="tab"
+          [attr.aria-selected]="htopOriginalTab === 'io'"
+          [class.original-tab-active]="htopOriginalTab === 'io'"
+          [class.original-tab-inactive]="htopOriginalTab !== 'io'"
+          (click)="setHtopOriginalTab('io')"
+        >I/O</button>
+
+        <input
+          id="original-process-filter"
+          class="original-filter-input"
+          type="text"
+          placeholder="Type to filter..."
+          [value]="processFilter"
+          (input)="onOriginalFilterInput($event)"
+        />
+        @if (processFilter) {
+          <button type="button" class="original-clear-filter" (click)="clearProcessFilter()">✕</button>
+        }
+      </nav>
+
+      @if (htopOriginalTab === 'main') {
+        <section class="original-process-panel">
+          <div class="original-process-grid original-process-heading">
+            <button type="button" (click)="sortBy('pid')">PID</button>
+            <span>USER</span>
+            <span>PRI</span>
+            <span>NI</span>
+            <span>VIRT</span>
+            <span>RES</span>
+            <span>SHR</span>
+            <span>S</span>
+            <button type="button" (click)="sortBy('cpu')">
+              CPU% {{ processSort === 'cpu' ? (sortDescending ? '▼' : '▲') : '' }}
+            </button>
+            <button type="button" (click)="sortBy('memory')">
+              MEM% {{ processSort === 'memory' ? (sortDescending ? '▼' : '▲') : '' }}
+            </button>
+            <span>TIME+</span>
+            <span>Command</span>
+          </div>
+
+          <div
+            class="original-process-list"
+            tabindex="0"
+            (keydown)="onOriginalProcessKeydown($event)"
+          >
+            @if (memory$ | async; as memory) {
+              @if (processes$ | async; as processes) {
+                @for (process of getSortedProcessesForOriginal(processes); track process.pid; let i = $index) {
+                  <div
+                    class="original-process-grid original-process-row"
+                    [class.original-process-selected]="i === selectedOriginalProcessIndex"
+                    (click)="selectOriginalProcess(i)"
+                  >
+                    <span class="original-teal">{{ process.pid }}</span>
+                    <span class="original-dim">—</span>
+                    <span class="original-dim">—</span>
+                    <span class="original-dim">—</span>
+                    <span class="original-teal">{{ formatBytes(process.virtualMemoryBytes) }}</span>
+                    <span class="original-green">{{ formatBytes(process.residentMemoryBytes) }}</span>
+                    <span class="original-teal">—</span>
+                    <span [class.original-green]="process.state === 'R'">{{ process.state }}</span>
+                    <span
+                      [class.original-red]="process.cpuUsagePercent > 10"
+                      [class.original-yellow]="process.cpuUsagePercent > 5 && process.cpuUsagePercent <= 10"
+                      [class.original-green]="process.cpuUsagePercent <= 5"
+                    >{{ process.cpuUsagePercent | number:'1.1-1' }}</span>
+                    <span>{{ getProcessMemoryPercent(process, memory.totalRamBytes) | number:'1.1-1' }}</span>
+                    <span class="original-teal">{{ formatUptime(process.uptimeSeconds) }}</span>
+                    <span class="original-command" [title]="process.name">{{ process.name }}</span>
+                  </div>
+                } @empty {
+                  <div class="original-empty">No matching processes found</div>
+                }
+              }
+            }
+          </div>
+        </section>
+      } @else {
+        <section class="original-io-panel">
+          <h3>Disks</h3>
+          @if (disks$ | async; as disks) {
+            @for (disk of disks; track $index) {
+              <pre class="original-json-row">{{ disk | json }}</pre>
+            } @empty {
+              <p class="original-dim">No disk information available</p>
+            }
+          }
+
+          <h3>Network</h3>
+          @if (network$ | async; as networks) {
+            @for (network of networks; track $index) {
+              <pre class="original-json-row">{{ network | json }}</pre>
+            } @empty {
+              <p class="original-dim">No network information available</p>
+            }
+          }
+        </section>
+      }
+
+      <footer class="original-function-keys">
+        @for (key of originalFunctionKeys; track key.key) {
+          <button type="button" (click)="handleOriginalFunctionKey(key.key)">
+            <strong>{{ key.key }}</strong>
+            <span>{{ key.label }}</span>
+          </button>
+        }
+      </footer>
     </section>
   }
-
-  <section class="processes-section">
-    <header class="processes-header">
-      <div>
-        <h2>{{ viewMode === 'htop' ? 'Tasks / Processes' : 'Processes' }}</h2>
-        <p class="muted">
-          {{ viewMode === 'htop'
-          ? 'Interactive process overview'
-          : 'Live system process monitor' }}
-        </p>
-      </div>
-
-      @if (processes$ | async; as processes) {
-        <span class="process-count">
-          {{ getSortedProcesses(processes).length }} processes
-        </span>
-      }
-    </header>
-
-    <label class="process-search">
-      <span>Search</span>
-      <input
-        #processSearch
-        type="search"
-        placeholder="Process name or PID..."
-        [value]="processFilter"
-        (input)="processFilter = processSearch.value">
-    </label>
-
-    @if (processes$ | async; as processes) {
-      <div class="table-scroll">
-        <table class="process-table">
-          <thead>
-          <tr>
-            <th>
-              <button type="button" (click)="sortBy('pid')">PID</button>
-            </th>
-            <th>
-              <button type="button" (click)="sortBy('name')">Process</button>
-            </th>
-            <th>State</th>
-            <th class="numeric">
-              <button type="button" (click)="sortBy('cpu')">CPU %</button>
-            </th>
-            <th class="numeric">
-              <button type="button" (click)="sortBy('memory')">Memory</button>
-            </th>
-            <th class="numeric">Virtual memory</th>
-            <th class="numeric">Threads</th>
-            <th>Uptime</th>
-          </tr>
-          </thead>
-
-          <tbody>
-            @for (process of getSortedProcesses(processes); track process.pid) {
-              <tr>
-                <td class="pid-cell">{{ process.pid }}</td>
-                <td class="process-name">{{ process.name }}</td>
-                <td>
-                  <span class="process-state">{{ process.state }}</span>
-                </td>
-                <td class="numeric">
-                  <span
-                    class="cpu-value"
-                    [class.cpu-high]="process.cpuUsagePercent >= 80">
-                    {{ process.cpuUsagePercent | number:'1.1-1' }}%
-                  </span>
-
-                  <div class="mini-progress">
-                    <div
-                      class="mini-progress-fill"
-                      [style.width.%]="clampPercent(process.cpuUsagePercent)">
-                    </div>
-                  </div>
-                </td>
-                <td class="numeric">
-                  {{ formatBytes(process.residentMemoryBytes) }}
-                </td>
-                <td class="numeric">
-                  {{ formatBytes(process.virtualMemoryBytes) }}
-                </td>
-                <td class="numeric">{{ process.threadCount }}</td>
-                <td>{{ formatUptime(process.uptimeSeconds) }}</td>
-              </tr>
-            } @empty {
-              <tr>
-                <td colspan="8" class="empty-processes">
-                  No matching processes found.
-                </td>
-              </tr>
-            }
-          </tbody>
-        </table>
-      </div>
-    } @else {
-      <div class="loading">
-        <p>Loading processes...</p>
-      </div>
-    }
-  </section>
-
-  <footer class="dashboard-footer">
-    <span>htop-web</span>
-    <span>Refresh interval: 500 ms</span>
-  </footer>
 </main>
diff --git a/frontend/src/app/dashboard/dashboard.scss b/frontend/src/app/dashboard/dashboard.scss
index 2a6b187..74a31fd 100644
--- a/frontend/src/app/dashboard/dashboard.scss
+++ b/frontend/src/app/dashboard/dashboard.scss
@@ -1,767 +1,748 @@
 
 :host {
   display: block;
-  min-height: 100vh;
-  background: #0b1120;
-  color: #e5e7eb;
-  font-family: Inter, "Segoe UI", sans-serif;
+  height: 100%;
+  min-height: 0;
+  color: #d4d4d4;
 }
 
 .dashboard {
-  max-width: 1440px;
-  margin: 0 auto;
-  padding: 32px;
-}
-
-.page-header {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 20px;
-  margin-bottom: 24px;
-
-  h1 {
-    margin: 0;
-    font-size: 30px;
-    font-weight: 700;
-    letter-spacing: -1px;
-  }
-
-  p {
-    margin: 8px 0 0;
-    color: #94a3b8;
-  }
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex-wrap: wrap;
+  flex-direction: column;
   gap: 12px;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  padding: 16px;
+  box-sizing: border-box;
+  background: #111318;
+  color: #e5e7eb;
+  font-family: Inter, Arial, sans-serif;
 }
 
 .view-switcher {
-  display: inline-flex;
-  gap: 4px;
-  padding: 4px;
-  border: 1px solid #263449;
-  border-radius: 10px;
-  background: #111c2e;
-
-  button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    padding: 9px 13px;
-    border: 1px solid transparent;
-    border-radius: 7px;
-    background: transparent;
-    color: #94a3b8;
-    font: inherit;
-    font-size: 13px;
-    cursor: pointer;
-    transition: background 150ms ease, color 150ms ease;
-
-    &:hover {
-      color: #e5e7eb;
-    }
-
-    &.active {
-      border-color: #334155;
-      background: #243449;
-      color: #93c5fd;
-    }
-  }
-}
-
-.live-indicator {
-  display: inline-flex;
-  align-items: center;
-  gap: 9px;
-  padding: 9px 13px;
-  border: 1px solid #23483c;
-  border-radius: 20px;
-  background: #10271f;
-  color: #86efac;
-  font-size: 13px;
-  white-space: nowrap;
-}
-
-.live-dot {
-  width: 8px;
-  height: 8px;
+  display: flex;
   flex-shrink: 0;
-  border-radius: 50%;
-  background: #4ade80;
-  box-shadow: 0 0 10px #4ade8080;
+  gap: 6px;
 }
 
-.system-info {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 16px;
-  margin-bottom: 20px;
-
-  > div {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    min-width: 0;
-    padding: 20px;
-    border: 1px solid #263449;
-    border-radius: 12px;
-    background: #111c2e;
-  }
-
-  strong {
-    overflow-wrap: anywhere;
-    font-size: 14px;
-    font-weight: 600;
-  }
+.view-switcher button {
+  padding: 7px 12px;
+  border: 1px solid #30343d;
+  border-radius: 5px;
+  background: #1b1e25;
+  color: #aeb5c2;
+  font: inherit;
+  cursor: pointer;
 }
 
-.label {
-  color: #8292aa;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 1px;
+.view-switcher button:hover {
+  border-color: #00aaaa;
+  color: #fff;
 }
 
-.muted {
-  color: #94a3b8;
-  font-size: 13px;
+.view-switcher button.view-active {
+  border-color: #00aaaa;
+  background: #063e40;
+  color: #5fffff;
 }
 
-.metrics-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+/* Monitor */
+
+.monitor-view {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
   gap: 20px;
 }
 
-.metric-card {
-  padding: 24px;
-  border: 1px solid #263449;
-  border-radius: 14px;
-  background: #111c2e;
-}
-
-.card-heading {
+.monitor-heading {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.monitor-heading h1 {
+  margin: 5px 0;
+  font-size: 25px;
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+
+.monitor-heading p,
+.card-caption {
+  color: #8b93a2;
+  font-size: 12px;
+}
+
+.eyebrow,
+.card-label {
+  color: #8b93a2;
+  font-size: 10px;
+  letter-spacing: 0.12em;
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: #4ade80;
+  font-size: 12px;
+}
+
+.status-indicator span {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #4ade80;
+}
+
+.monitor-cards {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 12px;
 }
 
-.metric-icon {
-  display: grid;
-  place-items: center;
-  width: 42px;
-  height: 42px;
-  border-radius: 10px;
-  font-size: 12px;
-  font-weight: 800;
+.monitor-card,
+.core-card,
+.monitor-section {
+  min-width: 0;
+  padding: 16px;
+  border: 1px solid #2a2e37;
+  border-radius: 8px;
+  background: #191c23;
 }
 
-.cpu-icon {
-  background: #172e4d;
-  color: #60a5fa;
+.monitor-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
-.memory-icon {
-  background: #40251e;
-  color: #fb923c;
-}
-
-.metric-value {
-  margin: 24px 0 18px;
-  font-size: clamp(36px, 5vw, 52px);
-  font-weight: 700;
-  letter-spacing: -2px;
-
-  span {
-    margin-left: 4px;
-    color: #94a3b8;
-    font-size: 24px;
-  }
+.monitor-card > strong {
+  color: #f5f7fa;
+  font-size: 26px;
 }
 
 .progress-track {
-  height: 8px;
+  height: 6px;
   overflow: hidden;
-  border-radius: 8px;
-  background: #263449;
+  border-radius: 6px;
+  background: #30343d;
 }
 
 .progress-fill {
   height: 100%;
   border-radius: inherit;
-  transition: width 400ms ease;
+  transition: width 250ms ease;
 }
 
 .cpu-fill {
-  background: #60a5fa;
+  background: #00b9b0;
 }
 
 .memory-fill {
-  background: #fb923c;
+  background: #4c9fff;
 }
 
-.memory-details {
+.monitor-section h2 {
+  margin: 0 0 14px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.core-cards {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.core-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+}
+
+.core-card-heading {
   display: flex;
-  flex-wrap: wrap;
   justify-content: space-between;
   gap: 8px;
-  margin-top: 18px;
-  color: #cbd5e1;
   font-size: 12px;
 }
 
-.card-footer {
-  margin: 18px 0 0;
-  color: #8292aa;
-  font-size: 12px;
+.core-card-heading strong {
+  color: #5fffff;
 }
 
-.loading {
+.system-info-grid {
   display: grid;
-  justify-items: center;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 16px;
-  padding: 80px 20px;
-  color: #94a3b8;
 }
 
-.spinner {
-  width: 32px;
-  height: 32px;
-  border: 3px solid #263449;
-  border-top-color: #60a5fa;
-  border-radius: 50%;
-  animation: spin 800ms linear infinite;
-}
-
-/* htop system panel */
-
-.htop-system-panel {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 22px 32px;
-  margin-bottom: 20px;
-  padding: 22px;
-  border: 1px solid #294438;
-  border-radius: 10px;
-  background: #101b19;
-  color: #d1fae5;
-  font-family: Consolas, "Courier New", monospace;
-}
-
-.htop-system-heading {
-  grid-column: 1 / -1;
+.system-info-grid > div {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #294438;
-
-  h2 {
-    margin: 6px 0 0;
-    overflow-wrap: anywhere;
-    color: #ecfdf5;
-    font-size: 20px;
-  }
-}
-
-.htop-brand {
-  color: #4ade80;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 2px;
-}
-
-.htop-os {
-  color: #86a99a;
-  font-size: 12px;
-  text-align: right;
-}
-
-.htop-resource {
+  flex-direction: column;
+  gap: 5px;
   min-width: 0;
 }
 
-.htop-resource-label {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 9px;
-  color: #86efac;
-  font-size: 13px;
-
-  strong {
-    color: #ecfdf5;
-    font-variant-numeric: tabular-nums;
-  }
-}
-
-.htop-bar {
-  height: 14px;
-  overflow: hidden;
-  border: 1px solid #315344;
-  border-radius: 3px;
-  background: #07110e;
-}
-
-.htop-bar-fill {
-  height: 100%;
-  transition: width 400ms ease;
-}
-
-.htop-cpu-fill {
-  background: repeating-linear-gradient(
-    90deg,
-    #4ade80 0,
-    #4ade80 8px,
-    #166534 8px,
-    #166534 10px
-  );
-}
-
-.htop-memory-fill {
-  background: repeating-linear-gradient(
-    90deg,
-    #34d399 0,
-    #34d399 8px,
-    #065f46 8px,
-    #065f46 10px
-  );
-}
-
-.htop-resource-meta {
-  margin-top: 8px;
-  overflow-wrap: anywhere;
-  color: #86a99a;
+.system-info-grid span {
+  color: #8b93a2;
   font-size: 11px;
-  line-height: 1.6;
 }
 
-/* Process table */
-
-.processes-section {
-  margin-top: 28px;
-  padding: 24px;
-  border: 1px solid #29313d;
-  border-radius: 12px;
-  background: #151a22;
-  color: #e5e7eb;
-}
-
-.processes-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 20px;
-
-  h2 {
-    margin: 0 0 6px;
-    font-size: 20px;
-  }
-
-  p {
-    margin: 0;
-  }
-}
-
-.process-count {
-  padding: 6px 10px;
-  border: 1px solid #374151;
-  border-radius: 6px;
-  color: #a5b4fc;
+.system-info-grid strong {
+  overflow-wrap: anywhere;
   font-size: 12px;
-  white-space: nowrap;
 }
 
-.process-search {
+.loading-state {
+  padding: 20px;
+  color: #8b93a2;
+  text-align: center;
+}
+
+/* Classic htop */
+
+.classic-htop {
   display: flex;
+  flex: 1;
+  min-height: 0;
   flex-direction: column;
   gap: 8px;
-  max-width: 380px;
-  margin-bottom: 18px;
-  color: #9ca3af;
+  overflow: hidden;
+  padding: 12px;
+  border: 1px solid #333;
+  background: #151515;
+  color: #d0d0d0;
+  font-family: 'JetBrains Mono', 'Courier New', monospace;
   font-size: 12px;
-
-  input {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 11px 12px;
-    border: 1px solid #374151;
-    border-radius: 7px;
-    outline: none;
-    background: #0d1117;
-    color: #e5e7eb;
-    font: inherit;
-    font-size: 14px;
-
-    &:focus {
-      border-color: #6366f1;
-    }
-  }
 }
 
-.table-scroll {
-  overflow-x: auto;
+.classic-cpu-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 5px 16px;
 }
 
-.process-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
+.classic-meter-row,
+.classic-memory-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.classic-label,
+.classic-memory-row > span {
+  width: 32px;
+  color: #00aaaa;
+}
+
+.classic-meter-row strong,
+.classic-memory-row strong {
+  color: #fff;
   white-space: nowrap;
-
-  th,
-  td {
-    padding: 12px 14px;
-    border-bottom: 1px solid #252d38;
-    text-align: left;
-  }
-
-  th {
-    background: #1b222d;
-    color: #9ca3af;
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-  }
-
-  th button {
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    cursor: pointer;
-    text-transform: inherit;
-
-    &:hover {
-      color: #c7d2fe;
-    }
-  }
-
-  tbody tr:hover {
-    background: #1d2531;
-  }
-
-  .numeric {
-    text-align: right;
-    font-variant-numeric: tabular-nums;
-  }
-
-  .pid-cell {
-    color: #9ca3af;
-    font-variant-numeric: tabular-nums;
-  }
-
-  .process-name {
-    max-width: 240px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-weight: 600;
-  }
 }
 
-.process-state {
-  display: inline-block;
-  padding: 3px 7px;
-  border-radius: 4px;
-  background: #163629;
-  color: #86efac;
+.classic-meter-track {
+  flex: 1;
+  min-width: 20px;
+  height: 10px;
+  overflow: hidden;
+  background: #333;
+}
+
+.classic-meter-fill {
+  height: 100%;
+  background: #00cc66;
+}
+
+.classic-memory-fill {
+  height: 100%;
+  background: #00aaaa;
+}
+
+.classic-swap-fill {
+  height: 100%;
+  background: #ffcc00;
+}
+
+.classic-system-line {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 8px 0;
+  border-bottom: 1px solid #333;
+}
+
+.classic-system-line > span {
+  color: #00aaaa;
+  font-weight: 700;
+}
+
+.classic-processes {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.classic-process-heading,
+.classic-process-row {
+  display: grid;
+  grid-template-columns: 80px minmax(160px, 1fr) 80px 110px 60px;
+  gap: 8px;
+  padding: 5px 8px;
+  white-space: nowrap;
+}
+
+.classic-process-heading {
+  position: sticky;
+  top: 0;
+  background: #007777;
+  color: #000;
+  font-weight: 700;
+}
+
+.classic-process-row:nth-child(even) {
+  background: #1b1b1b;
+}
+
+.classic-command {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* htop-original: visual reference palette */
+
+.htop-original-mode {
+  gap: 6px;
+  padding: 8px;
+  background: #121212;
+  color: #b0b0b0;
+  font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
+  font-size: 12px;
+}
+
+.htop-original-mode .view-switcher {
+  gap: 4px;
+}
+
+.htop-original-mode .view-switcher button {
+  padding: 3px 9px;
+  border-color: #333;
+  border-radius: 2px;
+  background: #222;
+  color: #00aaaa;
   font-size: 11px;
 }
 
-.cpu-value {
-  display: inline-block;
-  min-width: 60px;
-  font-variant-numeric: tabular-nums;
+.htop-original-mode .view-switcher button.view-active {
+  border-color: #00aaaa;
+  background: #00aaaa;
+  color: #000;
+  font-weight: 700;
 }
 
-.cpu-high {
-  color: #fca5a5;
-}
-
-.mini-progress {
-  width: 60px;
-  height: 3px;
-  margin: 5px 0 0 auto;
-  overflow: hidden;
-  border-radius: 3px;
-  background: #303846;
-}
-
-.mini-progress-fill {
-  height: 100%;
-  border-radius: inherit;
-  background: #818cf8;
-  transition: width 200ms ease;
-}
-
-.empty-processes {
-  padding: 30px !important;
-  color: #9ca3af;
-  text-align: center !important;
-}
-
-.dashboard-footer {
+.htop-original-mode .htop-original {
   display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+  gap: 6px;
+  overflow: hidden;
+  color: #b0b0b0;
+  user-select: none;
+}
+
+.htop-original-mode .original-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 24px;
+  flex-shrink: 0;
+  padding: 0 4px 10px;
+  border-bottom: 1px solid #292929;
+}
+
+.htop-original-mode .original-meters,
+.htop-original-mode .original-system-summary {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.htop-original-mode .original-cpu-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: 16px;
+  row-gap: 3px;
+}
+
+.htop-original-mode .original-meter-row {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 2px;
+  white-space: nowrap;
+}
+
+.htop-original-mode .original-cpu-number {
+  width: 16px;
+  margin-right: 3px;
+  color: #00aaaa;
+  text-align: right;
+}
+
+.htop-original-mode .original-meter-label,
+.htop-original-mode .original-label {
+  color: #00aaaa;
+  font-weight: 700;
+}
+
+.htop-original-mode .original-meter-label {
+  width: 38px;
+  flex-shrink: 0;
+}
+
+.htop-original-mode .meter-bracket {
+  color: #888;
+}
+
+.htop-original-mode .original-meter-bar {
+  display: inline-flex;
+  overflow: hidden;
+  white-space: pre;
+  letter-spacing: -1px;
+}
+
+.htop-original-mode .pipe-used {
+  color: #00ff00;
+}
+
+.htop-original-mode .pipe-bg {
+  color: #444;
+}
+
+.htop-original-mode .original-meter-value {
+  margin-left: auto;
+  padding-left: 8px;
+  color: #fff;
+  font-weight: 700;
+}
+
+.htop-original-mode .original-summary-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-top: 4px;
+}
+
+.htop-original-mode .original-white {
+  color: #fff;
+  font-weight: 700;
+}
+
+.htop-original-mode .original-green {
+  color: #00ff00;
+}
+
+.htop-original-mode .original-teal {
+  color: #00aaaa;
+}
+
+.htop-original-mode .original-yellow {
+  color: #ffff00;
+}
+
+.htop-original-mode .original-red {
+  color: #ff5555;
+}
+
+.htop-original-mode .original-dim {
+  color: #888;
+}
+
+.htop-original-mode .original-navigation-hint {
+  margin-top: auto;
+  padding-top: 8px;
+  color: #666;
+  font-size: 10px;
+}
+
+.htop-original-mode .original-navigation-hint span {
+  color: #00aaaa;
+  font-weight: 700;
+}
+
+.htop-original-mode .original-tabs {
+  display: flex;
+  min-height: 26px;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 4px;
+}
+
+.htop-original-mode .original-tabs > button {
+  padding: 3px 12px;
+  border: 0;
+  border-radius: 3px 3px 0 0;
+  font: inherit;
+  cursor: pointer;
+}
+
+.htop-original-mode .original-tab-active {
+  background: #00aaaa;
+  color: #000;
+  font-weight: 700;
+}
+
+.htop-original-mode .original-tab-inactive {
+  background: #222;
+  color: #00aaaa;
+}
+
+.htop-original-mode .original-filter-input {
+  width: 180px;
+  min-width: 0;
+  margin-left: auto;
+  border: 1px solid #007777;
+  padding: 3px 6px;
+  background: #181818;
+  color: #fff;
+  outline: none;
+  font: inherit;
+}
+
+.htop-original-mode .original-clear-filter {
+  color: #aaa;
+}
+
+.htop-original-mode .original-clear-filter:hover {
+  color: #fff;
+}
+
+.htop-original-mode .original-process-panel {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid #292929;
+  border-radius: 3px;
+}
+
+.htop-original-mode .original-process-grid {
+  display: grid;
+  grid-template-columns: 80px 80px 45px 45px 80px 80px 80px 30px 65px 65px 90px minmax(180px, 1fr);
+  align-items: center;
+  column-gap: 0;
+  font-size: 11px;
+  line-height: 1.55;
+  white-space: nowrap;
+}
+
+.htop-original-mode .original-process-heading {
+  flex-shrink: 0;
+  padding: 3px 8px;
+  background: #007777;
+  color: #000;
+  font-weight: 700;
+}
+
+.htop-original-mode .original-process-heading button {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.htop-original-mode .original-process-list {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  outline: none;
+}
+
+.htop-original-mode .original-process-row {
+  padding: 2px 8px;
+  border-bottom: 1px solid #191919;
+  cursor: pointer;
+}
+
+.htop-original-mode .original-process-row:hover {
+  background: #202020;
+}
+
+.htop-original-mode .original-process-row.original-process-selected {
+  background: #00aaaa;
+  color: #000;
+}
+
+.htop-original-mode .original-process-selected .original-teal,
+.htop-original-mode .original-process-selected .original-green,
+.htop-original-mode .original-process-selected .original-red,
+.htop-original-mode .original-process-selected .original-yellow,
+.htop-original-mode .original-process-selected .original-dim {
+  color: #000;
+}
+
+.htop-original-mode .original-command {
+  min-width: 0;
+  overflow: hidden;
+  color: #fff;
+  text-overflow: ellipsis;
+}
+
+.htop-original-mode .original-process-selected .original-command {
+  color: #000;
+}
+
+.htop-original-mode .original-empty {
+  padding: 20px;
+  color: #777;
+  text-align: center;
+}
+
+.htop-original-mode .original-io-panel {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 12px;
+  border: 1px solid #292929;
+}
+
+.htop-original-mode .original-io-panel h3 {
+  margin: 0 0 8px;
+  color: #00aaaa;
+  font-weight: 700;
+}
+
+.htop-original-mode .original-json-row {
+  margin: 0;
+  padding: 5px 0;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  border-bottom: 1px solid #202020;
+  color: #b0b0b0;
+  font: inherit;
+}
+
+.htop-original-mode .original-function-keys {
+  display: grid;
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+  gap: 4px;
+  flex-shrink: 0;
+  padding-top: 2px;
+}
+
+.htop-original-mode .original-function-keys button {
+  display: flex;
+  min-width: 0;
+  align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  margin-top: 28px;
-  padding-top: 18px;
-  border-top: 1px solid #263449;
-  color: #8292aa;
-  font-size: 12px;
+  gap: 4px;
+  padding: 4px 6px;
+  border: 0;
+  border-radius: 2px;
+  background: #222;
+  color: #ccc;
+  font: inherit;
+  cursor: pointer;
 }
 
-/* Terminal-style htop mode */
-
-.dashboard.htop-mode {
-  max-width: none;
-  min-height: 100vh;
-  background: #080f0d;
-  color: #c7f9d4;
-  font-family: Consolas, "Courier New", monospace;
-
-  .page-header {
-    h1 {
-      color: #4ade80;
-      font-size: 26px;
-      letter-spacing: 0;
-    }
-
-    > div > p {
-      color: #86a99a;
-    }
-  }
-
-  .view-switcher {
-    border-color: #294438;
-    background: #101b19;
-
-    button {
-      color: #86a99a;
-
-      &.active {
-        border-color: #326449;
-        background: #183326;
-        color: #86efac;
-      }
-    }
-  }
-
-  .live-indicator {
-    border-color: #294438;
-    background: #101b19;
-    color: #86efac;
-  }
-
-  .system-info {
-    > div {
-      border-color: #294438;
-      border-radius: 6px;
-      background: #101b19;
-    }
-
-    .label,
-    .muted {
-      color: #86a99a;
-    }
-
-    strong {
-      color: #d1fae5;
-    }
-  }
-
-  .processes-section {
-    border-color: #294438;
-    border-radius: 8px;
-    background: #101b19;
-    color: #d1fae5;
-  }
-
-  .processes-header {
-    h2 {
-      color: #4ade80;
-    }
-
-    .muted {
-      color: #86a99a;
-    }
-  }
-
-  .process-count {
-    border-color: #326449;
-    color: #86efac;
-  }
-
-  .process-search {
-    color: #86a99a;
-
-    input {
-      border-color: #294438;
-      border-radius: 4px;
-      background: #080f0d;
-      color: #d1fae5;
-      font-family: inherit;
-
-      &:focus {
-        border-color: #4ade80;
-      }
-    }
-  }
-
-  .process-table {
-    font-family: Consolas, "Courier New", monospace;
-    font-size: 12px;
-
-    th,
-    td {
-      border-bottom-color: #20352a;
-    }
-
-    th {
-      background: #183326;
-      color: #86efac;
-    }
-
-    th button:hover {
-      color: #d1fae5;
-    }
-
-    tbody tr:hover {
-      background: #183326;
-    }
-
-    .pid-cell {
-      color: #86a99a;
-    }
-
-    .process-name {
-      color: #d1fae5;
-    }
-  }
-
-  .process-state {
-    border-radius: 3px;
-    background: #183326;
-    color: #86efac;
-  }
-
-  .cpu-value {
-    color: #a7f3d0;
-  }
-
-  .cpu-high {
-    color: #fca5a5;
-  }
-
-  .mini-progress {
-    background: #20352a;
-  }
-
-  .mini-progress-fill {
-    background: #4ade80;
-  }
-
-  .empty-processes {
-    color: #86a99a;
-  }
-
-  .dashboard-footer {
-    border-top-color: #294438;
-    color: #86a99a;
-  }
+.htop-original-mode .original-function-keys button strong {
+  color: #00aaaa;
 }
 
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+.htop-original-mode .original-function-keys button:hover {
+  background: #00aaaa;
+  color: #000;
 }
 
-@media (max-width: 900px) {
-  .page-header {
-    align-items: flex-start;
+.htop-original-mode .original-function-keys button:hover strong {
+  color: #000;
+}
+
+/* Scrollbars */
+
+.dashboard ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.dashboard ::-webkit-scrollbar-track {
+  background: #181818;
+}
+
+.dashboard ::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background: #333;
+}
+
+.dashboard ::-webkit-scrollbar-thumb:hover {
+  background: #00aaaa;
+}
+
+/* Responsive */
+
+@media (max-width: 1000px) {
+  .monitor-cards {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .header-actions {
-    align-items: flex-end;
-    flex-direction: column;
+  .core-cards {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .system-info {
+  .system-info-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .htop-original-mode .original-header {
     grid-template-columns: 1fr;
+    gap: 10px;
   }
 
-  .htop-system-panel {
-    grid-template-columns: 1fr;
+  .htop-original-mode .original-process-grid {
+    min-width: 920px;
   }
 
-  .htop-system-heading {
-    grid-column: auto;
+  .htop-original-mode .original-function-keys {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 }
 
-@media (max-width: 760px) {
+@media (max-width: 600px) {
   .dashboard {
-    padding: 20px 14px;
+    padding: 8px;
   }
 
-  .page-header {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .header-actions {
-    align-items: flex-start;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
-  .metrics-grid {
+  .monitor-cards,
+  .core-cards,
+  .system-info-grid {
     grid-template-columns: 1fr;
   }
 
-  .live-indicator {
-    font-size: 11px;
+  .htop-original-mode .original-cpu-grid {
+    grid-template-columns: 1fr;
   }
 
-  .processes-section {
-    padding: 14px;
+  .htop-original-mode .original-meter-value {
+    padding-left: 4px;
+    font-size: 10px;
   }
 
-  .processes-header {
-    align-items: flex-start;
-  }
-
-  .process-table th,
-  .process-table td {
-    padding: 10px;
-  }
-
-  .htop-system-panel {
-    padding: 16px;
-  }
-
-  .htop-system-heading {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .htop-os {
-    text-align: left;
-  }
-
-  .dashboard-footer {
-    flex-wrap: wrap;
+  .htop-original-mode .original-filter-input {
+    width: 120px;
   }
 }
diff --git a/frontend/src/app/dashboard/dashboard.ts b/frontend/src/app/dashboard/dashboard.ts
index 0d0ed93..8fa83a3 100644
--- a/frontend/src/app/dashboard/dashboard.ts
+++ b/frontend/src/app/dashboard/dashboard.ts
@@ -1,15 +1,17 @@
-import { AsyncPipe, DecimalPipe } from '@angular/common';
+import { AsyncPipe, DecimalPipe, JsonPipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
+
 import { SystemMetricsService } from '../core/services/system-metrics.service';
 import { SystemProcess } from '../core/models/system-process.model';
 
 type ProcessSort = 'cpu' | 'memory' | 'name' | 'pid';
-type DashboardView = 'monitor' | 'htop';
+type DashboardView = 'monitor' | 'htop' | 'htop-original';
+type OriginalTab = 'main' | 'io';
 
 @Component({
   selector: 'app-dashboard',
   standalone: true,
-  imports: [AsyncPipe, DecimalPipe],
+  imports: [AsyncPipe, DecimalPipe, JsonPipe],
   templateUrl: './dashboard.html',
   styleUrl: './dashboard.scss',
 })
@@ -18,66 +20,117 @@ export class Dashboard {
 
   readonly metrics$ = this._systemMetricsService.metrics$;
   readonly processes$ = this._systemMetricsService.processes$;
+  readonly linux$ = this._systemMetricsService.linux$;
+  readonly cpu$ = this._systemMetricsService.cpu$;
+  readonly memory$ = this._systemMetricsService.memory$;
+  readonly disks$ = this._systemMetricsService.disks$;
+  readonly network$ = this._systemMetricsService.network$;
+
+  readonly meterSegments20 = Array.from({ length: 20 }, (_, index) => index);
+  readonly meterSegments35 = Array.from({ length: 35 }, (_, index) => index);
+  readonly meterSegments15 = Array.from({ length: 15 }, (_, index) => index);
+
+  readonly originalFunctionKeys = [
+    { key: 'F1', label: 'Help' },
+    { key: 'F2', label: 'Setup' },
+    { key: 'F3', label: 'Search' },
+    { key: 'F4', label: 'Filter' },
+    { key: 'F5', label: 'Tree' },
+    { key: 'F6', label: 'SortBy' },
+    { key: 'F7', label: 'Nice-' },
+    { key: 'F8', label: 'Nice+' },
+    { key: 'F9', label: 'Kill' },
+    { key: 'F10', label: 'Quit' },
+  ];
+
+  viewMode: DashboardView = 'monitor';
+  htopOriginalTab: OriginalTab = 'main';
 
   processFilter = '';
   processSort: ProcessSort = 'cpu';
   sortDescending = true;
-
-  viewMode: DashboardView = 'monitor';
+  selectedOriginalProcessIndex = 0;
 
   setViewMode(mode: DashboardView): void {
     this.viewMode = mode;
   }
 
+  setHtopOriginalTab(tab: OriginalTab): void {
+    this.htopOriginalTab = tab;
+  }
+
   getSortedProcesses(processes: SystemProcess[]): SystemProcess[] {
     const query = this.processFilter.trim().toLowerCase();
 
-    const filtered = processes.filter(
-      (process) =>
-        process.name.toLowerCase().includes(query) || String(process.pid).includes(query),
-    );
+    return processes
+      .filter(
+        (process) =>
+          process.name.toLowerCase().includes(query) || String(process.pid).includes(query),
+      )
+      .sort((a, b) => {
+        let comparison: number;
 
-    return [...filtered].sort((a, b) => {
-      let comparison: number;
+        switch (this.processSort) {
+          case 'cpu':
+            comparison = a.cpuUsagePercent - b.cpuUsagePercent;
+            break;
+          case 'memory':
+            comparison = a.residentMemoryBytes - b.residentMemoryBytes;
+            break;
+          case 'name':
+            comparison = a.name.localeCompare(b.name);
+            break;
+          case 'pid':
+            comparison = a.pid - b.pid;
+            break;
+        }
 
-      switch (this.processSort) {
-        case 'cpu':
-          comparison = a.cpuUsagePercent - b.cpuUsagePercent;
-          break;
-        case 'memory':
-          comparison = a.residentMemoryBytes - b.residentMemoryBytes;
-          break;
-        case 'name':
-          comparison = a.name.localeCompare(b.name);
-          break;
-        case 'pid':
-          comparison = a.pid - b.pid;
-          break;
-      }
+        return this.sortDescending ? -comparison : comparison;
+      });
+  }
 
-      return this.sortDescending ? -comparison : comparison;
-    });
+  getSortedProcessesForOriginal(processes: SystemProcess[]): SystemProcess[] {
+    return this.getSortedProcesses(processes);
   }
 
   sortBy(column: ProcessSort): void {
     if (this.processSort === column) {
       this.sortDescending = !this.sortDescending;
-      return;
+    } else {
+      this.processSort = column;
+      this.sortDescending = true;
+    }
+  }
+
+  countRunningProcesses(processes: SystemProcess[]): number {
+    return processes.filter((process) => process.state === 'R').length;
+  }
+
+  selectOriginalProcess(index: number): void {
+    this.selectedOriginalProcessIndex = index;
+  }
+
+  getProcessMemoryPercent(process: SystemProcess, totalMemoryBytes: number): number {
+    if (totalMemoryBytes <= 0) {
+      return 0;
     }
 
-    this.processSort = column;
-    this.sortDescending = true;
+    return (process.residentMemoryBytes / totalMemoryBytes) * 100;
+  }
+
+  clampPercent(value: number): number {
+    return Math.max(0, Math.min(100, value));
   }
 
   formatBytes(bytes: number): string {
-    if (bytes <= 0) {
+    if (!Number.isFinite(bytes) || bytes <= 0) {
       return '0 B';
     }
 
     const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB'];
     const index = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
 
-    return `${(bytes / Math.pow(1024, index)).toFixed(2)} ${units[index]}`;
+    return `${(bytes / Math.pow(1024, index)).toFixed(1)}${units[index]}`;
   }
 
   formatUptime(seconds: number): string {
@@ -85,19 +138,65 @@ export class Dashboard {
     const days = Math.floor(safeSeconds / 86400);
     const hours = Math.floor((safeSeconds % 86400) / 3600);
     const minutes = Math.floor((safeSeconds % 3600) / 60);
+    const remainingSeconds = safeSeconds % 60;
 
-    if (days > 0) {
-      return `${days}d ${hours}h`;
-    }
+    const time = [
+      String(hours).padStart(2, '0'),
+      String(minutes).padStart(2, '0'),
+      String(remainingSeconds).padStart(2, '0'),
+    ].join(':');
 
-    if (hours > 0) {
-      return `${hours}h ${minutes}m`;
-    }
-
-    return `${minutes}m`;
+    return days > 0 ? `${days} days, ${time}` : time;
   }
 
-  clampPercent(value: number): number {
-    return Math.max(0, Math.min(100, value));
+  handleOriginalFunctionKey(key: string): void {
+    switch (key) {
+      case 'F3':
+      case 'F4':
+        document.getElementById('original-process-filter')?.focus();
+        break;
+
+      case 'F6':
+        this.sortBy('cpu');
+        break;
+
+      case 'F10':
+        this.setViewMode('htop');
+        break;
+
+      default:
+        break;
+    }
+  }
+
+  onOriginalFilterInput(event: Event): void {
+    const target = event.target;
+
+    if (target instanceof HTMLInputElement) {
+      this.processFilter = target.value;
+      this.selectedOriginalProcessIndex = 0;
+    }
+  }
+
+  clearProcessFilter(): void {
+    this.processFilter = '';
+    this.selectedOriginalProcessIndex = 0;
+  }
+
+  onOriginalProcessKeydown(event: KeyboardEvent): void {
+    if (event.key === 'ArrowDown' || event.key.toLowerCase() === 'j') {
+      event.preventDefault();
+      this.selectedOriginalProcessIndex++;
+    } else if (event.key === 'ArrowUp' || event.key.toLowerCase() === 'k') {
+      event.preventDefault();
+      this.selectedOriginalProcessIndex = Math.max(0, this.selectedOriginalProcessIndex - 1);
+    } else if (event.key === '/') {
+      event.preventDefault();
+      document.getElementById('original-process-filter')?.focus();
+    } else if (event.key.toLowerCase() === 'p') {
+      this.sortBy('cpu');
+    } else if (event.key.toLowerCase() === 'm') {
+      this.sortBy('memory');
+    }
   }
 }