Add flashing alert bar for CPU and memory warnings

New AlertBar component sits above the status bar and displays system
health alerts. It flashes when CPU or memory usage exceeds thresholds
(70% warn, 90% critical) and shows "All systems nominal" when healthy.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: jbingham17

src/App.css

@@ -450,6 +450,85 @@ 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;

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>
+  );
+}