Improve memory display formatting

src/App.css

@@ -450,6 +450,113 @@ body {
 .col-time { width: 60px; color: var(--color-text-dim); }
 .col-command { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
+/* Alert Bar */
+.alert-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
+  flex-shrink: 0;
+  transition: opacity 0.2s ease;
+}
+
+.alert-bar.alert-flash-off {
+  opacity: 0.4;
+}
+
+.alert-bar.alert-info {
+  background: linear-gradient(145deg, rgba(52, 211, 153, 0.1) 0%, rgba(13, 18, 25, 0.8) 100%);
+  border-color: rgba(52, 211, 153, 0.3);
+}
+
+.alert-bar.alert-warn {
+  background: linear-gradient(145deg, rgba(251, 191, 36, 0.1) 0%, rgba(13, 18, 25, 0.8) 100%);
+  border-color: rgba(251, 191, 36, 0.3);
+}
+
+.alert-bar.alert-critical {
+  background: linear-gradient(145deg, rgba(248, 113, 113, 0.15) 0%, rgba(13, 18, 25, 0.8) 100%);
+  border-color: rgba(248, 113, 113, 0.4);
+}
+
+.alert-icon {
+  font-weight: 900;
+  font-size: 12px;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.alert-info .alert-icon {
+  color: var(--color-green);
+  background: rgba(52, 211, 153, 0.15);
+}
+
+.alert-warn .alert-icon {
+  color: var(--color-yellow);
+  background: rgba(251, 191, 36, 0.15);
+}
+
+.alert-critical .alert-icon {
+  color: var(--color-red);
+  background: rgba(248, 113, 113, 0.15);
+}
+
+.alert-messages {
+  display: flex;
+  gap: 16px;
+  flex: 1;
+}
+
+.alert-msg {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.alert-msg-info { color: var(--color-green); }
+.alert-msg-warn { color: var(--color-yellow); }
+.alert-msg-critical { color: var(--color-red); }
+
+.alert-timestamp {
+  color: var(--color-text-dim);
+  font-size: 10px;
+  margin-left: auto;
+}
+
+/* Status Indicator */
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-green);
+  opacity: 0.3;
+  transition: opacity 0.3s ease;
+}
+
+.status-dot.active {
+  opacity: 1;
+  box-shadow: 0 0 8px var(--color-green), 0 0 16px rgba(52, 211, 153, 0.4);
+}
+
+.status-text {
+  color: var(--color-green);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 2px;
+}
+
 /* Status Bar */
 .status-bar {
   display: flex;

src/App.tsx

@@ -4,6 +4,7 @@ import { CpuGraph } from './components/CpuGraph';
 import { MemoryGraph } from './components/MemoryGraph';
 import { ProcessTable } from './components/ProcessTable';
 import { StatusBar } from './components/StatusBar';
+import { AlertBar } from './components/AlertBar';
 import { EnvironmentPanel } from './components/EnvironmentPanel';
 import { useSystemMetrics } from './hooks/useSystemMetrics';
 import './App.css';
@@ -71,6 +72,8 @@ function App() {
 
       <EnvironmentPanel filter={filter} />
 
+      <AlertBar cpuUsage={metrics.cpuUsage} memPercent={metrics.memPercent} />
+
       <StatusBar
         filter={filter}
         onFilterChange={setFilter}

src/components/AlertBar.tsx

@@ -0,0 +1,66 @@
+import { useState, useEffect } from 'react';
+
+interface AlertBarProps {
+  cpuUsage: number[];
+  memPercent: number;
+}
+
+function getAlerts(cpuUsage: number[], memPercent: number): { message: string; level: 'info' | 'warn' | 'critical' }[] {
+  const alerts: { message: string; level: 'info' | 'warn' | 'critical' }[] = [];
+  const avgCpu = cpuUsage.reduce((a, b) => a + b, 0) / cpuUsage.length;
+
+  if (avgCpu > 90) {
+    alerts.push({ message: 'CPU usage critical', level: 'critical' });
+  } else if (avgCpu > 70) {
+    alerts.push({ message: 'CPU usage high', level: 'warn' });
+  }
+
+  if (memPercent > 90) {
+    alerts.push({ message: 'Memory usage critical', level: 'critical' });
+  } else if (memPercent > 70) {
+    alerts.push({ message: 'Memory usage high', level: 'warn' });
+  }
+
+  if (alerts.length === 0) {
+    alerts.push({ message: 'All systems nominal', level: 'info' });
+  }
+
+  return alerts;
+}
+
+export function AlertBar({ cpuUsage, memPercent }: AlertBarProps) {
+  const [visible, setVisible] = useState(true);
+  const alerts = getAlerts(cpuUsage, memPercent);
+  const hasWarnings = alerts.some((a) => a.level !== 'info');
+
+  useEffect(() => {
+    if (!hasWarnings) return;
+    const interval = setInterval(() => {
+      setVisible((prev) => !prev);
+    }, 800);
+    return () => clearInterval(interval);
+  }, [hasWarnings]);
+
+  const highestLevel = alerts.reduce<'info' | 'warn' | 'critical'>((max, a) => {
+    const order = { info: 0, warn: 1, critical: 2 };
+    return order[a.level] > order[max] ? a.level : max;
+  }, 'info');
+
+  return (
+    <div className={`alert-bar alert-${highestLevel} ${hasWarnings && !visible ? 'alert-flash-off' : ''}`}>
+      <span className="alert-icon">
+        {highestLevel === 'critical' ? '!!' : highestLevel === 'warn' ? '!' : '~'}
+      </span>
+      <div className="alert-messages">
+        {alerts.map((alert, i) => (
+          <span key={i} className={`alert-msg alert-msg-${alert.level}`}>
+            {alert.message}
+          </span>
+        ))}
+      </div>
+      <span className="alert-timestamp">
+        {new Date().toLocaleTimeString()}
+      </span>
+    </div>
+  );
+}

src/components/MemoryBar.tsx

@@ -8,9 +8,9 @@ interface MemoryBarProps {
 function formatBytes(bytes: number): string {
   if (bytes === 0) return '0 B';
   const k = 1024;
-  const sizes = ['B', 'K', 'M', 'G', 'T'];
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + sizes[i];
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
 }
 
 export function MemoryBar({ label, used, total, percent }: MemoryBarProps) {

src/components/MemoryGraph.tsx

@@ -63,7 +63,7 @@ export function MemoryGraph({ used, total, percent }: MemoryGraphProps) {
       <div className="graph-header">
         <span className="graph-title">Memory</span>
         <span className="graph-value" style={{ color }}>
-          {percent}%
+          {formatBytes(used)} / {formatBytes(total)} ({percent}%)
         </span>
       </div>
       <div className="graph-container">
@@ -113,15 +113,15 @@ export function MemoryGraph({ used, total, percent }: MemoryGraphProps) {
         <div className="memory-stats">
           <span className="memory-stat">
             <span className="stat-label">Used</span>
-            <span className="stat-value" style={{ color }}>{formatBytes(used)}</span>
+            <span className="stat-value" style={{ color }}>{formatBytes(used)} ({percent}%)</span>
           </span>
           <span className="memory-stat">
             <span className="stat-label">Total</span>
             <span className="stat-value">{formatBytes(total)}</span>
           </span>
           <span className="memory-stat">
             <span className="stat-label">Free</span>
-            <span className="stat-value" style={{ color: '#34d399' }}>{formatBytes(total - used)}</span>
+            <span className="stat-value" style={{ color: '#34d399' }}>{formatBytes(total - used)} ({total > 0 ? Math.round(((total - used) / total) * 100) : 0}%)</span>
           </span>
         </div>
       </div>

src/components/StatusBar.tsx

@@ -1,3 +1,5 @@
+import { useState, useEffect } from 'react';
+
 interface StatusBarProps {
   filter: string;
   onFilterChange: (filter: string) => void;
@@ -6,6 +8,15 @@ interface StatusBarProps {
 }
 
 export function StatusBar({ filter, onFilterChange, refreshRate, onRefreshRateChange }: StatusBarProps) {
+  const [statusActive, setStatusActive] = useState(true);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setStatusActive((prev) => !prev);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
   const shortcuts = [
     { key: 'F1', label: 'Help' },
     { key: 'F2', label: 'Setup' },
@@ -19,6 +30,10 @@ export function StatusBar({ filter, onFilterChange, refreshRate, onRefreshRateCh
 
   return (
     <div className="status-bar">
+      <div className="status-indicator">
+        <span className={`status-dot ${statusActive ? 'active' : ''}`} />
+        <span className="status-text">LIVE</span>
+      </div>
       <div className="filter-section">
         <span className="filter-label">Filter:</span>
         <input