feat(dashboard): UI refinements - density, flat agents table, history log

- Reduce layout density ~20% (tighter padding, margins, fonts)
- Flatten Agents table view with Client/Site columns (no grouping)
- Add version info to sidebar footer (UI v0.2.0, API v0.1.0)
- Replace Commands nav with sidebar History log
- Add /history page with full command list
- Add /history/:id detail view with output display
- Apply Mission Control styling to all new components

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

projects/msp-tools/guru-rmm/dashboard/src/App.tsx

@@ -9,7 +9,7 @@ import { Clients } from "./pages/Clients";
 import { Sites } from "./pages/Sites";
 import { Agents } from "./pages/Agents";
 import { AgentDetail } from "./pages/AgentDetail";
-import { Commands } from "./pages/Commands";
+import { History, HistoryDetail } from "./pages/History";
 import { Settings } from "./pages/Settings";
 import "./index.css";
 
@@ -118,10 +118,18 @@ function AppRoutes() {
         }
       />
       <Route
-        path="/commands"
+        path="/history"
         element={
           <ProtectedRoute>
-            <Commands />
+            <History />
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        path="/history/:id"
+        element={
+          <ProtectedRoute>
+            <HistoryDetail />
           </ProtectedRoute>
         }
       />

projects/msp-tools/guru-rmm/dashboard/src/components/Layout.tsx

@@ -1,17 +1,22 @@
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { commandsApi, Command } from "../api/client";
 import {
   LayoutDashboard,
   Server,
-  Terminal,
   Settings,
   LogOut,
   Menu,
   X,
   Building2,
   MapPin,
+  History,
+  CheckCircle,
+  XCircle,
+  Clock,
+  Loader2,
 } from "lucide-react";
-import { useState } from "react";
 import { useAuth } from "../hooks/useAuth";
 import { Button } from "./Button";
 
@@ -24,16 +29,37 @@ const navItems = [
   { path: "/clients", label: "Clients", icon: Building2 },
   { path: "/sites", label: "Sites", icon: MapPin },
   { path: "/agents", label: "Agents", icon: Server },
-  { path: "/commands", label: "Commands", icon: Terminal },
   { path: "/settings", label: "Settings", icon: Settings },
 ];
 
+const APP_VERSION = "0.2.0";
+const SERVER_VERSION = "0.1.0";
+
+function CommandStatusIcon({ status }: { status: Command["status"] }) {
+  const config = {
+    pending: { icon: Clock, color: "text-amber-500" },
+    running: { icon: Loader2, color: "text-cyan-500 animate-spin" },
+    completed: { icon: CheckCircle, color: "text-emerald-500" },
+    failed: { icon: XCircle, color: "text-rose-500" },
+  };
+  const { icon: Icon, color } = config[status];
+  return <Icon className={`h-3 w-3 ${color}`} />;
+}
+
 export function Layout({ children }: LayoutProps) {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const location = useLocation();
   const navigate = useNavigate();
   const { user, logout } = useAuth();
 
+  const { data: commands = [] } = useQuery({
+    queryKey: ["commands"],
+    queryFn: () => commandsApi.list().then((res) => res.data),
+    refetchInterval: 15000,
+  });
+
+  const recentCommands = commands.slice(0, 4);
+
   const handleLogout = () => {
     logout();
     navigate("/login");
@@ -85,7 +111,7 @@ export function Layout({ children }: LayoutProps) {
       <div className="flex relative">
         {/* Sidebar - Mission Control Aesthetic */}
         <aside
-          className={`fixed inset-y-0 left-0 z-50 w-72 transform transition-all duration-300 ease-out lg:translate-x-0 lg:static ${
+          className={`fixed inset-y-0 left-0 z-50 w-60 transform transition-all duration-300 ease-out lg:translate-x-0 lg:static ${
             sidebarOpen ? "translate-x-0" : "-translate-x-full"
           }`}
         >
@@ -95,18 +121,18 @@ export function Layout({ children }: LayoutProps) {
             <div className="absolute left-0 top-0 bottom-0 w-[2px] bg-gradient-to-b from-transparent via-cyan-500/50 to-transparent" />
 
             {/* Logo section */}
-            <div className="p-6 hidden lg:block">
+            <div className="p-4 hidden lg:block">
               <div className="flex items-center gap-3">
                 {/* Logo icon with glow */}
                 <div className="relative">
                   <div className="absolute inset-0 bg-cyan-500/30 blur-lg rounded-lg" />
-                  <div className="relative h-10 w-10 rounded-lg bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center shadow-lg shadow-cyan-500/20">
+                  <div className="relative h-8 w-8 rounded-lg bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center shadow-lg shadow-cyan-500/20">
-                    <LayoutDashboard className="h-5 w-5 text-white" />
+                    <LayoutDashboard className="h-4 w-4 text-white" />
                   </div>
                 </div>
                 {/* Logo text with gradient */}
                 <div>
-                  <h1 className="text-xl font-bold tracking-wider">
+                  <h1 className="text-lg font-bold tracking-wider">
                     <span className="bg-gradient-to-r from-cyan-400 via-cyan-300 to-blue-400 bg-clip-text text-transparent">
                       GURU
                     </span>
@@ -120,7 +146,7 @@ export function Layout({ children }: LayoutProps) {
             </div>
 
             {/* Navigation */}
-            <nav className="flex-1 px-3 space-y-1 mt-4 lg:mt-2 pt-16 lg:pt-0">
+            <nav className="flex-1 px-2 space-y-0.5 mt-4 lg:mt-2 pt-16 lg:pt-0">
               {navItems.map((item) => {
                 const isActive = location.pathname === item.path;
                 return (
@@ -128,7 +154,7 @@ export function Layout({ children }: LayoutProps) {
                     key={item.path}
                     to={item.path}
                     onClick={() => setSidebarOpen(false)}
-                    className={`group relative flex items-center gap-3 px-4 py-3 rounded-lg text-xs font-semibold uppercase tracking-wider transition-all duration-300 ${
+                    className={`group relative flex items-center gap-2 px-3 py-2 rounded-lg text-xs font-semibold uppercase tracking-wider transition-all duration-300 ${
                       isActive
                         ? "text-cyan-400"
                         : "text-slate-400 hover:text-slate-200"
@@ -155,7 +181,7 @@ export function Layout({ children }: LayoutProps) {
                     {/* Icon with conditional glow */}
                     <div className="relative z-10">
                       <item.icon
-                        className={`h-5 w-5 transition-all duration-300 ${
+                        className={`h-4 w-4 transition-all duration-300 ${
                           isActive
                             ? "text-cyan-400 drop-shadow-[0_0_8px_rgba(6,182,212,0.8)]"
                             : "text-slate-500 group-hover:text-slate-300"
@@ -176,14 +202,14 @@ export function Layout({ children }: LayoutProps) {
             </nav>
 
             {/* User profile section */}
-            <div className="p-4 border-t border-cyan-500/10">
+            <div className="p-3 border-t border-cyan-500/10">
-              <div className="flex items-center gap-3 mb-4 p-3 rounded-lg bg-slate-800/30">
+              <div className="flex items-center gap-2 mb-3 p-2 rounded-lg bg-slate-800/30">
                 {/* Avatar with cyan ring glow */}
                 <div className="relative">
                   {/* Glow ring */}
                   <div className="absolute -inset-1 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full opacity-50 blur-sm" />
                   {/* Avatar */}
-                  <div className="relative h-10 w-10 rounded-full bg-gradient-to-br from-slate-700 to-slate-800 ring-2 ring-cyan-500/50 flex items-center justify-center text-cyan-400 text-sm font-bold shadow-lg">
+                  <div className="relative h-8 w-8 rounded-full bg-gradient-to-br from-slate-700 to-slate-800 ring-2 ring-cyan-500/50 flex items-center justify-center text-cyan-400 text-sm font-bold shadow-lg">
                     {user?.name?.[0] || user?.email?.[0] || "U"}
                   </div>
                   {/* Online indicator */}
@@ -204,19 +230,58 @@ export function Layout({ children }: LayoutProps) {
               {/* Sign out button */}
               <Button
                 variant="ghost"
-                className="w-full justify-start gap-3 px-4 py-3 text-xs font-semibold uppercase tracking-wider text-slate-400 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-all duration-300 group"
+                className="w-full justify-start gap-2 px-3 py-2 text-xs font-semibold uppercase tracking-wider text-slate-400 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-all duration-300 group"
                 onClick={handleLogout}
               >
                 <LogOut className="h-4 w-4 transition-all duration-300 group-hover:text-red-400 group-hover:drop-shadow-[0_0_6px_rgba(239,68,68,0.6)]" />
                 Sign Out
               </Button>
+
+              {/* History log */}
+              <div className="mt-2 pt-2 border-t border-slate-800/50">
+                <Link
+                  to="/history"
+                  className="flex items-center gap-1.5 px-1 py-1 text-[10px] font-mono text-slate-500 hover:text-cyan-400 transition-colors"
+                >
+                  <History className="h-3 w-3" />
+                  <span>History</span>
+                </Link>
+
+                <div className="mt-1 space-y-0.5">
+                  {recentCommands.length === 0 ? (
+                    <p className="text-[10px] text-slate-600 px-1">No recent activity</p>
+                  ) : (
+                    recentCommands.map((cmd: Command) => (
+                      <Link
+                        key={cmd.id}
+                        to={`/history/${cmd.id}`}
+                        className="flex items-center gap-1.5 px-1 py-0.5 rounded text-[10px] hover:bg-slate-800/50 transition-colors"
+                        title={cmd.command_text}
+                      >
+                        <CommandStatusIcon status={cmd.status} />
+                        <span className="text-slate-500 hover:text-slate-400 truncate flex-1 font-mono">
+                          {cmd.command_text.length > 18
+                            ? cmd.command_text.slice(0, 18) + "..."
+                            : cmd.command_text}
+                        </span>
+                      </Link>
+                    ))
+                  )}
+                </div>
+              </div>
+
+              {/* Version info */}
+              <div className="mt-2 pt-2 border-t border-slate-800/50 text-[10px] font-mono text-slate-600 flex justify-between px-1">
+                <span>UI v{APP_VERSION}</span>
+                <span>API v{SERVER_VERSION}</span>
+              </div>
             </div>
           </div>
         </aside>
 
         {/* Main content area */}
         <main className="flex-1 min-h-screen pt-16 lg:pt-0">
-          <div className="p-6 lg:p-8 transition-all duration-300">
+          <div className="p-4 lg:p-6 transition-all duration-300">
             {children}
           </div>
         </main>

projects/msp-tools/guru-rmm/dashboard/src/index.css

@@ -395,7 +395,7 @@ code, pre, .mono {
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
-  padding: 1.5rem;
+  padding: 1rem;
   transition: all var(--transition-base);
 }
 
@@ -669,7 +669,7 @@ code, pre, .mono {
   background: var(--bg-card);
   border: 1px solid var(--border-primary);
   border-radius: var(--radius-lg);
-  padding: 1.5rem;
+  padding: 1rem;
   transition: all var(--transition-base);
 }
 
@@ -683,8 +683,8 @@ code, pre, .mono {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 1rem;
+  margin-bottom: 0.75rem;
-  padding-bottom: 1rem;
+  padding-bottom: 0.75rem;
   border-bottom: 1px solid var(--border-secondary);
 }
 
@@ -703,10 +703,10 @@ code, pre, .mono {
   backdrop-filter: blur(var(--glass-blur));
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-lg);
-  padding: 1.25rem;
+  padding: 1rem;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.375rem;
 }
 
 .metric-label {
@@ -719,7 +719,7 @@ code, pre, .mono {
 
 .metric-value {
   font-family: var(--font-mono);
-  font-size: 2rem;
+  font-size: 1.75rem;
   font-weight: 700;
   color: var(--text-primary);
   line-height: 1;
@@ -761,13 +761,13 @@ code, pre, .mono {
   text-transform: uppercase;
   letter-spacing: 0.05em;
   font-size: 0.75rem;
-  padding: 0.75rem 1rem;
+  padding: 0.5rem 0.75rem;
   text-align: left;
   border-bottom: 1px solid var(--border-primary);
 }
 
 .data-grid td {
-  padding: 0.75rem 1rem;
+  padding: 0.5rem 0.75rem;
   color: var(--text-secondary);
   border-bottom: 1px solid var(--border-secondary);
   transition: background var(--transition-fast);
@@ -790,7 +790,7 @@ code, pre, .mono {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-  padding: 0.625rem 1.25rem;
+  padding: 0.5rem 1rem;
   font-family: var(--font-mono);
   font-size: 0.875rem;
   font-weight: 600;
@@ -954,9 +954,9 @@ code, pre, .mono {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 1rem;
+  padding: 0.375rem 0.75rem;
   font-family: var(--font-mono);
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   font-weight: 500;
   color: var(--text-muted);
   background: transparent;
@@ -987,7 +987,7 @@ code, pre, .mono {
   border-right: 1px solid var(--glass-border);
   height: 100vh;
   position: fixed;
-  width: 260px;
+  width: 240px;
   overflow-y: auto;
   z-index: 100;
 }
@@ -1238,6 +1238,15 @@ code, pre, .mono {
   letter-spacing: 0.2em;
 }
 
+/* Compact spacing utilities */
+.space-y-compact > * + * {
+  margin-top: 0.75rem;
+}
+
+.gap-compact {
+  gap: 0.75rem;
+}
+
 /* ============================================================
    SCROLLBAR STYLING
    ============================================================ */

projects/msp-tools/guru-rmm/dashboard/src/pages/Agents.tsx

@@ -1,21 +1,36 @@
 import { useState } from "react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { Link } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
-import { Trash2, Terminal, RefreshCw, MoveRight, Building2, MapPin } from "lucide-react";
+import { Trash2, Terminal, RefreshCw, MoveRight, X } from "lucide-react";
 import { agentsApi, sitesApi, Agent, Site } from "../api/client";
-import { Card, CardHeader, CardTitle, CardContent } from "../components/Card";
+import { Card, CardContent } from "../components/Card";
 import { Button } from "../components/Button";
 import { Input } from "../components/Input";
 
 function AgentStatusBadge({ status }: { status: Agent["status"] }) {
-  const colors = {
+  const statusConfig = {
-    online: "bg-green-100 text-green-800",
+    online: {
-    offline: "bg-gray-100 text-gray-800",
+      dotClass: "bg-[var(--accent-green)] shadow-[0_0_8px_var(--accent-green)]",
-    error: "bg-red-100 text-red-800",
+      badgeClass: "bg-[var(--accent-green-muted)] text-[var(--accent-green-light)] border border-[rgba(16,185,129,0.3)]",
+      animate: true,
+    },
+    offline: {
+      dotClass: "bg-[var(--text-muted)]",
+      badgeClass: "bg-[rgba(100,116,139,0.2)] text-[var(--text-muted)] border border-[rgba(100,116,139,0.3)]",
+      animate: false,
+    },
+    error: {
+      dotClass: "bg-[var(--accent-rose)] shadow-[0_0_8px_var(--accent-rose)]",
+      badgeClass: "bg-[var(--accent-rose-muted)] text-[var(--accent-rose-light)] border border-[rgba(244,63,94,0.3)]",
+      animate: true,
+    },
   };
 
+  const config = statusConfig[status];
+
   return (
-    <span className={`px-2 py-1 rounded-full text-xs font-medium ${colors[status]}`}>
+    <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full font-mono text-xs font-semibold uppercase tracking-wider ${config.badgeClass}`}>
+      <span className={`w-2 h-2 rounded-full ${config.dotClass} ${config.animate ? "animate-pulse" : ""}`} />
       {status}
     </span>
   );
@@ -37,36 +52,39 @@ function MoveAgentModal({
   const [selectedSiteId, setSelectedSiteId] = useState<string>(agent.site_id || "");
 
   return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+    <div className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50">
-      <div className="bg-[hsl(var(--card))] rounded-lg p-6 w-full max-w-md">
+      <div className="glass-card bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-xl p-6 w-full max-w-md shadow-xl">
-        <h2 className="text-xl font-bold mb-4">Move Agent</h2>
+        <h2 className="text-xl font-mono font-bold text-[var(--text-primary)] mb-2">Move Agent</h2>
-        <p className="text-[hsl(var(--muted-foreground))] mb-4">
+        <p className="text-[var(--text-secondary)] mb-6">
-          Move <strong>{agent.hostname}</strong> to a different site
+          Move <strong className="text-[var(--accent-cyan)]">{agent.hostname}</strong> to a different site
         </p>
 
-        <div className="mb-4">
+        <div className="mb-6">
-          <label className="block text-sm font-medium mb-2">Select Site</label>
+          <label className="block text-xs font-mono font-semibold text-[var(--text-muted)] uppercase tracking-wider mb-2">
+            Select Site
+          </label>
           <select
             value={selectedSiteId}
             onChange={(e) => setSelectedSiteId(e.target.value)}
-            className="w-full px-3 py-2 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] text-sm"
+            className="w-full px-3 py-2.5 rounded-lg border border-[var(--border-primary)] bg-[var(--bg-secondary)] text-[var(--text-primary)] font-mono text-sm focus:border-[var(--accent-cyan)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-cyan-muted)] transition-all"
           >
             <option value="">-- Unassigned --</option>
             {sites.map((site) => (
               <option key={site.id} value={site.id}>
-                {site.client_name} → {site.name} ({site.site_code})
+                {site.client_name} &rarr; {site.name} ({site.site_code})
               </option>
             ))}
           </select>
         </div>
 
-        <div className="flex justify-end gap-2 pt-4">
+        <div className="flex justify-end gap-3 pt-4 border-t border-[var(--border-secondary)]">
           <Button type="button" variant="ghost" onClick={onClose}>
             Cancel
           </Button>
           <Button
             onClick={() => onMove(selectedSiteId || null)}
             disabled={isLoading || selectedSiteId === (agent.site_id || "")}
+            className="btn-mission-control"
           >
             {isLoading ? "Moving..." : "Move Agent"}
           </Button>
@@ -82,6 +100,8 @@ export function Agents() {
   const [movingAgent, setMovingAgent] = useState<Agent | null>(null);
   const [filterClient, setFilterClient] = useState<string>("");
   const [filterSite, setFilterSite] = useState<string>("");
+  const [searchParams, setSearchParams] = useSearchParams();
+  const statusFilter = searchParams.get("status") || "";
   const queryClient = useQueryClient();
 
   const { data: agents = [], isLoading, refetch } = useQuery({
@@ -144,209 +164,259 @@ export function Agents() {
     }
 
     const matchesSite = !filterSite || agent.site_id === filterSite;
+    const matchesStatus = !statusFilter || agent.status === statusFilter;
 
-    return matchesSearch && matchesClient && matchesSite;
+    return matchesSearch && matchesClient && matchesSite && matchesStatus;
   });
 
-  // Group agents by client > site for display
+  const clearStatusFilter = () => {
-  const groupedAgents = filteredAgents.reduce((acc: Record<string, Record<string, Agent[]>>, agent: Agent) => {
+    searchParams.delete("status");
-    const clientKey = agent.client_name || "Unassigned";
+    setSearchParams(searchParams);
-    const siteKey = agent.site_name || "No Site";
+  };
-
-    if (!acc[clientKey]) acc[clientKey] = {};
-    if (!acc[clientKey][siteKey]) acc[clientKey][siteKey] = [];
-    acc[clientKey][siteKey].push(agent);
-
-    return acc;
-  }, {});
 
   return (
     <div className="space-y-6">
+      {/* Header */}
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-3xl font-bold">Agents</h1>
+          <div className="flex items-center gap-3">
-          <p className="text-[hsl(var(--muted-foreground))]">
+            <h1 className="text-3xl font-mono font-bold text-[var(--text-primary)]">Agents</h1>
+            {statusFilter && (
+              <button
+                onClick={clearStatusFilter}
+                className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-mono font-semibold bg-[var(--accent-cyan-muted)] text-[var(--accent-cyan)] border border-[var(--border-accent)] hover:bg-[var(--accent-cyan)] hover:text-[var(--bg-primary)] transition-all"
+              >
+                Status: {statusFilter}
+                <X className="h-3 w-3" />
+              </button>
+            )}
+          </div>
+          <p className="text-[var(--text-secondary)] mt-1">
             Manage your monitored endpoints
           </p>
         </div>
-        <Button variant="outline" size="sm" onClick={() => refetch()}>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => refetch()}
+          className="border-[var(--border-accent)] text-[var(--accent-cyan)] hover:bg-[var(--accent-cyan-muted)] hover:shadow-[var(--glow-cyan)] transition-all"
+        >
           <RefreshCw className="h-4 w-4 mr-2" />
           Refresh
         </Button>
       </div>
 
-      <div className="flex flex-wrap items-center gap-4">
+      {/* Filters */}
-        <Input
+      <div className="glass-card bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-xl p-4">
-          placeholder="Search agents..."
+        <div className="flex flex-wrap items-center gap-4">
-          value={search}
+          <Input
-          onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search agents..."
-          className="max-w-sm"
+            value={search}
-        />
+            onChange={(e) => setSearch(e.target.value)}
-        <select
+            className="max-w-sm bg-[var(--bg-secondary)] border-[var(--border-primary)] text-[var(--text-primary)] font-mono placeholder:text-[var(--text-muted)] focus:border-[var(--accent-cyan)] focus:ring-[var(--accent-cyan-muted)]"
-          value={filterClient}
+          />
-          onChange={(e) => {
-            setFilterClient(e.target.value);
-            setFilterSite("");
-          }}
-          className="px-3 py-2 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] text-sm"
-        >
-          <option value="">All Clients</option>
-          <option value="__unassigned__">Unassigned Only</option>
-          {clients.map((client) => (
-            <option key={client} value={client || ""}>
-              {client}
-            </option>
-          ))}
-        </select>
-        {filterClient && (
           <select
-            value={filterSite}
+            value={filterClient}
-            onChange={(e) => setFilterSite(e.target.value)}
+            onChange={(e) => {
-            className="px-3 py-2 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] text-sm"
+              setFilterClient(e.target.value);
+              setFilterSite("");
+            }}
+            className="px-3 py-2 rounded-lg border border-[var(--border-primary)] bg-[var(--bg-secondary)] text-[var(--text-primary)] font-mono text-sm focus:border-[var(--accent-cyan)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-cyan-muted)] transition-all"
           >
-            <option value="">All Sites</option>
+            <option value="">All Clients</option>
-            {sites
+            <option value="__unassigned__">Unassigned Only</option>
-              .filter((s: Site) => s.client_name === filterClient)
+            {clients.map((client) => (
-              .map((site: Site) => (
+              <option key={client} value={client || ""}>
-                <option key={site.id} value={site.id}>
+                {client}
-                  {site.name}
+              </option>
-                </option>
+            ))}
-              ))}
           </select>
-        )}
+          {filterClient && filterClient !== "__unassigned__" && (
+            <select
+              value={filterSite}
+              onChange={(e) => setFilterSite(e.target.value)}
+              className="px-3 py-2 rounded-lg border border-[var(--border-primary)] bg-[var(--bg-secondary)] text-[var(--text-primary)] font-mono text-sm focus:border-[var(--accent-cyan)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-cyan-muted)] transition-all"
+            >
+              <option value="">All Sites</option>
+              {sites
+                .filter((s: Site) => s.client_name === filterClient)
+                .map((site: Site) => (
+                  <option key={site.id} value={site.id}>
+                    {site.name}
+                  </option>
+                ))}
+            </select>
+          )}
+          <select
+            value={statusFilter}
+            onChange={(e) => {
+              if (e.target.value) {
+                searchParams.set("status", e.target.value);
+              } else {
+                searchParams.delete("status");
+              }
+              setSearchParams(searchParams);
+            }}
+            className="px-3 py-2 rounded-lg border border-[var(--border-primary)] bg-[var(--bg-secondary)] text-[var(--text-primary)] font-mono text-sm focus:border-[var(--accent-cyan)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-cyan-muted)] transition-all"
+          >
+            <option value="">All Statuses</option>
+            <option value="online">Online</option>
+            <option value="offline">Offline</option>
+            <option value="error">Error</option>
+          </select>
+        </div>
       </div>
 
-      {/* Grouped View */}
+      {/* Flat Table View */}
-      {Object.entries(groupedAgents).map(([clientName, siteGroups]) => (
+      {filteredAgents.length > 0 && (
-        <Card key={clientName}>
+        <Card className="glass-card bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-xl overflow-hidden">
-          <CardHeader>
+          <CardContent className="p-0">
-            <CardTitle className="flex items-center gap-2">
+            <div className="overflow-x-auto">
-              <Building2 className="h-5 w-5" />
+              <table className="w-full data-grid">
-              {clientName}
+                <thead>
-              <span className="text-sm font-normal text-[hsl(var(--muted-foreground))]">
+                  <tr className="border-b border-[var(--border-primary)]">
-                ({Object.values(siteGroups).flat().length} agents)
+                    <th className="text-left py-2 px-4 font-mono text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider bg-[var(--bg-tertiary)]">Hostname</th>
-              </span>
+                    <th className="text-left py-2 px-4 font-mono text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider bg-[var(--bg-tertiary)]">Client</th>
-            </CardTitle>
+                    <th className="text-left py-2 px-4 font-mono text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider bg-[var(--bg-tertiary)]">Site</th>
-          </CardHeader>
+                    <th className="text-left py-2 px-4 font-mono text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider bg-[var(--bg-tertiary)]">OS</th>
-          <CardContent>
+                    <th className="text-left py-2 px-4 font-mono text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider bg-[var(--bg-tertiary)]">Status</th>
-            {Object.entries(siteGroups).map(([siteName, siteAgents]) => (
+                    <th className="text-left py-2 px-4 font-mono text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider bg-[var(--bg-tertiary)]">Last Seen</th>
-              <div key={siteName} className="mb-6 last:mb-0">
+                    <th className="text-left py-2 px-4 font-mono text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider bg-[var(--bg-tertiary)]">Version</th>
-                <div className="flex items-center gap-2 mb-3 text-sm font-medium text-[hsl(var(--muted-foreground))]">
+                    <th className="text-right py-2 px-4 font-mono text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider bg-[var(--bg-tertiary)]">Actions</th>
-                  <MapPin className="h-4 w-4" />
+                  </tr>
-                  {siteName}
+                </thead>
-                  <span className="text-xs">({siteAgents.length} agents)</span>
+                <tbody>
-                </div>
+                  {filteredAgents.map((agent: Agent) => (
-                <div className="overflow-x-auto">
+                    <tr
-                  <table className="w-full">
+                      key={agent.id}
-                    <thead>
+                      className="border-b border-[var(--border-secondary)] hover:bg-[rgba(6,182,212,0.05)] transition-colors"
-                      <tr className="border-b border-[hsl(var(--border))]">
+                    >
-                        <th className="text-left py-2 px-4 font-medium text-sm">Hostname</th>
+                      <td className="py-2 px-4">
-                        <th className="text-left py-2 px-4 font-medium text-sm">OS</th>
+                        <Link
-                        <th className="text-left py-2 px-4 font-medium text-sm">Status</th>
+                          to={`/agents/${agent.id}`}
-                        <th className="text-left py-2 px-4 font-medium text-sm">Last Seen</th>
+                          className="font-mono font-medium text-[var(--accent-cyan)] hover:text-[var(--accent-cyan-light)] hover:underline transition-colors"
-                        <th className="text-left py-2 px-4 font-medium text-sm">Version</th>
-                        <th className="text-right py-2 px-4 font-medium text-sm">Actions</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {siteAgents.map((agent: Agent) => (
-                        <tr
-                          key={agent.id}
-                          className="border-b border-[hsl(var(--border))] hover:bg-[hsl(var(--muted))]/50"
                         >
-                          <td className="py-2 px-4">
+                          {agent.hostname}
-                            <Link
+                        </Link>
-                              to={`/agents/${agent.id}`}
+                      </td>
-                              className="font-medium hover:underline text-[hsl(var(--primary))]"
+                      <td className="py-2 px-4 font-mono text-sm text-[var(--text-secondary)]">
+                        {agent.client_name || <span className="text-[var(--text-muted)]">-</span>}
+                      </td>
+                      <td className="py-2 px-4 font-mono text-sm text-[var(--text-secondary)]">
+                        {agent.site_name || <span className="text-[var(--text-muted)]">-</span>}
+                      </td>
+                      <td className="py-2 px-4 font-mono text-sm text-[var(--text-secondary)]">
+                        {agent.os_type}
+                        {agent.os_version && (
+                          <span className="text-[var(--text-muted)]">
+                            {" "}({agent.os_version})
+                          </span>
+                        )}
+                      </td>
+                      <td className="py-2 px-4">
+                        <AgentStatusBadge status={agent.status} />
+                      </td>
+                      <td className="py-2 px-4 font-mono text-sm text-[var(--text-muted)]">
+                        {agent.last_seen
+                          ? new Date(agent.last_seen).toLocaleString()
+                          : "Never"}
+                      </td>
+                      <td className="py-2 px-4 font-mono text-sm text-[var(--text-muted)]">
+                        {agent.agent_version || "-"}
+                      </td>
+                      <td className="py-2 px-4">
+                        <div className="flex items-center justify-end gap-1">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            title="Move to different site"
+                            onClick={() => setMovingAgent(agent)}
+                            className="text-[var(--text-muted)] hover:text-[var(--accent-cyan)] hover:bg-[var(--accent-cyan-muted)] transition-all"
+                          >
+                            <MoveRight className="h-4 w-4" />
+                          </Button>
+                          <Link to={`/agents/${agent.id}`}>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              title="Open terminal"
+                              className="text-[var(--text-muted)] hover:text-[var(--accent-green)] hover:bg-[var(--accent-green-muted)] transition-all"
                             >
-                              {agent.hostname}
+                              <Terminal className="h-4 w-4" />
-                            </Link>
+                            </Button>
-                          </td>
+                          </Link>
-                          <td className="py-2 px-4 text-sm">
+                          {deleteConfirm === agent.id ? (
-                            {agent.os_type}
+                            <div className="flex items-center gap-1">
-                            {agent.os_version && (
+                              <Button
-                              <span className="text-[hsl(var(--muted-foreground))]">
+                                variant="destructive"
-                                {" "}({agent.os_version})
+                                size="sm"
-                              </span>
+                                onClick={() => deleteMutation.mutate(agent.id)}
-                            )}
+                                disabled={deleteMutation.isPending}
-                          </td>
+                                className="bg-[var(--accent-rose)] hover:bg-[var(--accent-rose-light)] hover:shadow-[var(--glow-rose)]"
-                          <td className="py-2 px-4">
+                              >
-                            <AgentStatusBadge status={agent.status} />
+                                Confirm
-                          </td>
+                              </Button>
-                          <td className="py-2 px-4 text-sm text-[hsl(var(--muted-foreground))]">
-                            {agent.last_seen
-                              ? new Date(agent.last_seen).toLocaleString()
-                              : "Never"}
-                          </td>
-                          <td className="py-2 px-4 text-sm text-[hsl(var(--muted-foreground))]">
-                            {agent.agent_version || "-"}
-                          </td>
-                          <td className="py-2 px-4">
-                            <div className="flex items-center justify-end gap-1">
                               <Button
                                 variant="ghost"
-                                size="icon"
+                                size="sm"
-                                title="Move to different site"
+                                onClick={() => setDeleteConfirm(null)}
-                                onClick={() => setMovingAgent(agent)}
+                                className="text-[var(--text-muted)] hover:text-[var(--text-primary)]"
                               >
-                                <MoveRight className="h-4 w-4" />
+                                Cancel
                               </Button>
-                              <Link to={`/agents/${agent.id}`}>
-                                <Button variant="ghost" size="icon" title="Open terminal">
-                                  <Terminal className="h-4 w-4" />
-                                </Button>
-                              </Link>
-                              {deleteConfirm === agent.id ? (
-                                <div className="flex items-center gap-1">
-                                  <Button
-                                    variant="destructive"
-                                    size="sm"
-                                    onClick={() => deleteMutation.mutate(agent.id)}
-                                    disabled={deleteMutation.isPending}
-                                  >
-                                    Confirm
-                                  </Button>
-                                  <Button
-                                    variant="ghost"
-                                    size="sm"
-                                    onClick={() => setDeleteConfirm(null)}
-                                  >
-                                    Cancel
-                                  </Button>
-                                </div>
-                              ) : (
-                                <Button
-                                  variant="ghost"
-                                  size="icon"
-                                  title="Delete agent"
-                                  onClick={() => setDeleteConfirm(agent.id)}
-                                >
-                                  <Trash2 className="h-4 w-4" />
-                                </Button>
-                              )}
                             </div>
-                          </td>
+                          ) : (
-                        </tr>
+                            <Button
-                      ))}
+                              variant="ghost"
-                    </tbody>
+                              size="icon"
-                  </table>
+                              title="Delete agent"
-                </div>
+                              onClick={() => setDeleteConfirm(agent.id)}
-              </div>
+                              className="text-[var(--text-muted)] hover:text-[var(--accent-rose)] hover:bg-[var(--accent-rose-muted)] transition-all"
-            ))}
+                            >
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
+                          )}
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
           </CardContent>
         </Card>
-      ))}
+      )}
 
       {isLoading && (
-        <p className="text-[hsl(var(--muted-foreground))]">Loading agents...</p>
+        <div className="glass-card bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-xl p-8 text-center">
+          <div className="inline-flex items-center gap-3 text-[var(--text-secondary)]">
+            <RefreshCw className="h-5 w-5 animate-spin text-[var(--accent-cyan)]" />
+            <span className="font-mono">Loading agents...</span>
+          </div>
+        </div>
       )}
 
       {!isLoading && filteredAgents.length === 0 && (
-        <Card>
+        <Card className="glass-card bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-xl">
-          <CardContent className="py-8 text-center">
+          <CardContent className="py-12 text-center">
-            <p className="text-[hsl(var(--muted-foreground))]">
+            <p className="text-[var(--text-muted)] font-mono">
-              {search || filterClient ? "No agents match your filters." : "No agents registered yet."}
+              {search || filterClient || statusFilter
+                ? "No agents match your filters."
+                : "No agents registered yet."}
             </p>
+            {(search || filterClient || statusFilter) && (
+              <button
+                onClick={() => {
+                  setSearch("");
+                  setFilterClient("");
+                  setFilterSite("");
+                  clearStatusFilter();
+                }}
+                className="mt-4 text-[var(--accent-cyan)] hover:text-[var(--accent-cyan-light)] font-mono text-sm underline transition-colors"
+              >
+                Clear all filters
+              </button>
+            )}
           </CardContent>
         </Card>
       )}

projects/msp-tools/guru-rmm/dashboard/src/pages/Commands.tsx

@@ -1,114 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { RefreshCw, CheckCircle, XCircle, Clock, Play } from "lucide-react";
-import { commandsApi, Command } from "../api/client";
-import { Card, CardHeader, CardTitle, CardContent } from "../components/Card";
-import { Button } from "../components/Button";
-
-function StatusIcon({ status }: { status: Command["status"] }) {
-  const icons = {
-    pending: <Clock className="h-4 w-4 text-yellow-500" />,
-    running: <Play className="h-4 w-4 text-blue-500" />,
-    completed: <CheckCircle className="h-4 w-4 text-green-500" />,
-    failed: <XCircle className="h-4 w-4 text-red-500" />,
-  };
-  return icons[status];
-}
-
-export function Commands() {
-  const { data: commands = [], isLoading, refetch } = useQuery({
-    queryKey: ["commands"],
-    queryFn: () => commandsApi.list().then((res) => res.data),
-    refetchInterval: 10000,
-  });
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold">Commands</h1>
-          <p className="text-[hsl(var(--muted-foreground))]">
-            View command history and results
-          </p>
-        </div>
-        <Button variant="outline" size="sm" onClick={() => refetch()}>
-          <RefreshCw className="h-4 w-4 mr-2" />
-          Refresh
-        </Button>
-      </div>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Command History</CardTitle>
-        </CardHeader>
-        <CardContent>
-          {isLoading ? (
-            <p className="text-[hsl(var(--muted-foreground))]">Loading commands...</p>
-          ) : commands.length === 0 ? (
-            <p className="text-[hsl(var(--muted-foreground))]">
-              No commands have been executed yet.
-            </p>
-          ) : (
-            <div className="space-y-4">
-              {commands.map((cmd: Command) => (
-                <div
-                  key={cmd.id}
-                  className="border border-[hsl(var(--border))] rounded-lg p-4"
-                >
-                  <div className="flex items-start justify-between">
-                    <div className="flex items-center gap-3">
-                      <StatusIcon status={cmd.status} />
-                      <div>
-                        <p className="font-mono text-sm">{cmd.command_text}</p>
-                        <p className="text-xs text-[hsl(var(--muted-foreground))] mt-1">
-                          {cmd.command_type} • Agent: {cmd.agent_id.slice(0, 8)}... •{" "}
-                          {new Date(cmd.created_at).toLocaleString()}
-                        </p>
-                      </div>
-                    </div>
-                    <span
-                      className={`px-2 py-1 rounded text-xs font-medium ${
-                        cmd.status === "completed"
-                          ? "bg-green-100 text-green-800"
-                          : cmd.status === "failed"
-                          ? "bg-red-100 text-red-800"
-                          : cmd.status === "running"
-                          ? "bg-blue-100 text-blue-800"
-                          : "bg-yellow-100 text-yellow-800"
-                      }`}
-                    >
-                      {cmd.status}
-                      {cmd.exit_code !== null && ` (${cmd.exit_code})`}
-                    </span>
-                  </div>
-
-                  {(cmd.stdout || cmd.stderr) && (
-                    <div className="mt-3 space-y-2">
-                      {cmd.stdout && (
-                        <div>
-                          <p className="text-xs font-medium text-[hsl(var(--muted-foreground))] mb-1">
-                            Output:
-                          </p>
-                          <pre className="text-xs bg-[hsl(var(--muted))] p-2 rounded overflow-x-auto">
-                            {cmd.stdout}
-                          </pre>
-                        </div>
-                      )}
-                      {cmd.stderr && (
-                        <div>
-                          <p className="text-xs font-medium text-red-600 mb-1">Error:</p>
-                          <pre className="text-xs bg-red-50 text-red-800 p-2 rounded overflow-x-auto">
-                            {cmd.stderr}
-                          </pre>
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
-              ))}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

projects/msp-tools/guru-rmm/dashboard/src/pages/Dashboard.tsx

@@ -1,4 +1,6 @@
+import { useNavigate } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
+import { Link } from "react-router-dom";
 import {
   Activity,
   Server,
@@ -9,6 +11,7 @@ import {
   RefreshCw,
   Shield,
   Zap,
+  ArrowRight,
 } from "lucide-react";
 import { agentsApi, Agent } from "../api/client";
 
@@ -60,7 +63,7 @@ function StatCardSkeleton({ delay }: { delay: number }) {
 }
 
 /**
- * Stat card component with Mission Control styling
+ * Stat card component with Mission Control styling - navigates to filtered agents page on click
  */
 function StatCard({
   title,
@@ -69,6 +72,7 @@ function StatCard({
   description,
   accentColor,
   delay,
+  linkTo,
 }: {
   title: string;
   value: string | number;
@@ -76,47 +80,59 @@ function StatCard({
   description?: string;
   accentColor: "cyan" | "green" | "amber" | "rose";
   delay: number;
+  linkTo: string;
 }) {
+  const navigate = useNavigate();
+
   const colorClasses = {
     cyan: {
       icon: "text-cyan",
       glow: "glow-cyan",
       bg: "bg-[var(--accent-cyan-muted)]",
-      border: "border-l-[var(--accent-cyan)]",
       value: "text-cyan",
     },
     green: {
       icon: "text-green",
       glow: "glow-green",
       bg: "bg-[var(--accent-green-muted)]",
-      border: "border-l-[var(--accent-green)]",
       value: "text-green",
     },
     amber: {
       icon: "text-amber",
       glow: "glow-amber",
       bg: "bg-[var(--accent-amber-muted)]",
-      border: "border-l-[var(--accent-amber)]",
       value: "text-amber",
     },
     rose: {
       icon: "text-rose",
       glow: "glow-rose",
       bg: "bg-[var(--accent-rose-muted)]",
-      border: "border-l-[var(--accent-rose)]",
       value: "text-rose",
     },
   };
 
   const colors = colorClasses[accentColor];
 
+  const handleClick = () => {
+    navigate(linkTo);
+  };
+
   return (
     <div
-      className="glass-card relative overflow-hidden opacity-0 border-l-4 group cursor-default"
+      className="glass-card relative overflow-hidden opacity-0 border-l-4 group cursor-pointer transition-transform duration-200 hover:scale-[1.02]"
       style={{
         animation: `fadeInUp 0.4s ease-out ${delay}s forwards`,
         borderLeftColor: `var(--accent-${accentColor})`,
       }}
+      onClick={handleClick}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
+      }}
     >
       {/* Subtle gradient overlay on hover */}
       <div
@@ -126,24 +142,34 @@ function StatCard({
         }}
       />
 
-      <div className="relative flex items-start justify-between">
+      <div className="relative">
-        <div className="space-y-1">
+        <div className="flex items-start justify-between">
-          <p className="text-muted font-mono text-xs uppercase tracking-widest-custom">
+          <div>
-            {title}
+            <p className="text-muted font-mono text-xs uppercase tracking-widest-custom">
-          </p>
+              {title}
-          <p className={`font-mono text-4xl font-bold ${colors.value}`}>
+            </p>
-            {value}
+            <p className={`font-mono text-3xl font-bold ${colors.value} mt-1`}>
-          </p>
+              {value}
-          {description && (
+            </p>
-            <p className="text-muted text-sm">{description}</p>
+            {description && (
-          )}
+              <p className="text-muted text-xs mt-0.5">{description}</p>
+            )}
+          </div>
+
+          {/* Icon - smaller padding */}
+          <div
+            className={`p-2 rounded-lg ${colors.bg} ${colors.glow} transition-all duration-300 group-hover:scale-110`}
+          >
+            <Icon className={`h-5 w-5 ${colors.icon}`} />
+          </div>
         </div>
 
-        {/* Icon with glow effect */}
+        {/* Simplified view all - no border */}
-        <div
+        <div className="mt-3 flex items-center justify-between opacity-60 group-hover:opacity-100 transition-opacity">
-          className={`p-3 rounded-lg ${colors.bg} ${colors.glow} transition-all duration-300 group-hover:scale-110`}
+          <span className="text-muted text-xs font-mono">View all</span>
-        >
+          <ArrowRight
-          <Icon className={`h-6 w-6 ${colors.icon}`} />
+            className={`h-3 w-3 ${colors.icon} group-hover:translate-x-1 transition-transform`}
+          />
         </div>
       </div>
     </div>
@@ -168,12 +194,15 @@ function StatusDot({ status }: { status: string }) {
 }
 
 /**
- * Activity list item with hover effects
+ * Activity list item with hover effects - clickable with Link
  */
 function ActivityItem({ agent }: { agent: Agent }) {
   return (
-    <div className="flex items-center justify-between p-3 rounded-lg transition-all duration-200 hover:bg-[rgba(6,182,212,0.05)] group cursor-default">
+    <Link
-      <div className="flex items-center gap-4">
+      to={`/agents/${agent.id}`}
+      className="flex items-center justify-between p-2 rounded-lg transition-all duration-200 hover:bg-[rgba(6,182,212,0.08)] group cursor-pointer"
+    >
+      <div className="flex items-center gap-3">
         <StatusDot status={agent.status} />
         <div>
           <p className="font-mono text-sm font-medium text-primary group-hover:text-cyan transition-colors">
@@ -184,10 +213,13 @@ function ActivityItem({ agent }: { agent: Agent }) {
           </p>
         </div>
       </div>
-      <span className="font-mono text-xs text-muted tabular-nums">
+      <div className="flex items-center gap-3">
-        {formatRelativeTime(agent.last_seen)}
+        <span className="font-mono text-xs text-muted tabular-nums">
-      </span>
+          {formatRelativeTime(agent.last_seen)}
-    </div>
+        </span>
+        <ArrowRight className="h-4 w-4 text-muted opacity-0 group-hover:opacity-100 group-hover:text-cyan transition-all duration-200 transform group-hover:translate-x-1" />
+      </div>
+    </Link>
   );
 }
 
@@ -243,6 +275,10 @@ function ActivityListSkeleton() {
 
 /**
  * Main Dashboard component with Mission Control aesthetic
+ *
+ * Stat cards navigate to the Agents page with status filters.
+ * This approach scales better for large agent counts (1000+) since
+ * the Agents page handles pagination, search, and sorting.
  */
 export function Dashboard() {
   const { data: agents = [], isLoading } = useQuery({
@@ -270,12 +306,12 @@ export function Dashboard() {
     : "status-online";
 
   return (
-    <div className="space-y-8">
+    <div className="space-y-5">
       {/* Page Header */}
-      <header className="space-y-2 animate-fade-in">
+      <header className="space-y-1 animate-fade-in">
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-gradient font-mono text-4xl font-bold tracking-tight">
+            <h1 className="text-gradient font-mono text-3xl font-bold tracking-tight">
               DASHBOARD
             </h1>
             <p className="text-muted text-sm uppercase tracking-widest-custom mt-1">
@@ -294,7 +330,7 @@ export function Dashboard() {
       </header>
 
       {/* Stat Cards Grid */}
-      <section className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+      <section className="grid gap-3 md:grid-cols-2 lg:grid-cols-4">
         {isLoading ? (
           <>
             <StatCardSkeleton delay={0.1} />
@@ -311,6 +347,7 @@ export function Dashboard() {
               description="Registered endpoints"
               accentColor="cyan"
               delay={0.1}
+              linkTo="/agents"
             />
             <StatCard
               title="Online"
@@ -319,6 +356,7 @@ export function Dashboard() {
               description="Currently connected"
               accentColor="green"
               delay={0.2}
+              linkTo="/agents?status=online"
             />
             <StatCard
               title="Offline"
@@ -327,6 +365,7 @@ export function Dashboard() {
               description="Not responding"
               accentColor="amber"
               delay={0.3}
+              linkTo="/agents?status=offline"
             />
             <StatCard
               title="Errors"
@@ -335,13 +374,14 @@ export function Dashboard() {
               description="Requires attention"
               accentColor="rose"
               delay={0.4}
+              linkTo="/agents?status=error"
             />
           </>
         )}
       </section>
 
       {/* Bottom Grid: Activity + Quick Actions */}
-      <section className="grid gap-6 md:grid-cols-2">
+      <section className="grid gap-4 md:grid-cols-2">
         {/* Recent Activity Card */}
         <div
           className="glass-card opacity-0"
@@ -349,7 +389,7 @@ export function Dashboard() {
             animation: "fadeInUp 0.4s ease-out 0.5s forwards",
           }}
         >
-          <div className="flex items-center justify-between mb-4 pb-4 border-b border-[var(--border-secondary)]">
+          <div className="flex items-center justify-between mb-3 pb-3 border-b border-[var(--border-secondary)]">
             <h2 className="card-title flex items-center gap-2">
               <Activity className="h-4 w-4 text-cyan" />
               Recent Activity
@@ -374,7 +414,7 @@ export function Dashboard() {
               </p>
             </div>
           ) : (
-            <div className="space-y-1 -mx-3">
+            <div className="space-y-0.5 -mx-2">
               {agents.slice(0, 5).map((agent: Agent) => (
                 <ActivityItem key={agent.id} agent={agent} />
               ))}
@@ -389,12 +429,12 @@ export function Dashboard() {
             animation: "fadeInUp 0.4s ease-out 0.6s forwards",
           }}
         >
-          <div className="flex items-center gap-2 mb-4 pb-4 border-b border-[var(--border-secondary)]">
+          <div className="flex items-center gap-2 mb-3 pb-3 border-b border-[var(--border-secondary)]">
             <Zap className="h-4 w-4 text-cyan" />
             <h2 className="card-title">Quick Actions</h2>
           </div>
 
-          <div className="space-y-3">
+          <div className="space-y-2">
             <QuickActionButton
               icon={Terminal}
               label="Deploy Agent"
@@ -413,7 +453,7 @@ export function Dashboard() {
           </div>
 
           {/* Terminal-style hint */}
-          <div className="mt-6 p-3 rounded-lg bg-[var(--bg-primary)] border border-[var(--border-secondary)]">
+          <div className="mt-4 p-2 rounded-lg bg-[var(--bg-primary)] border border-[var(--border-secondary)]">
             <div className="flex items-center gap-2">
               <span className="font-mono text-xs text-cyan">$</span>
               <span className="font-mono text-xs text-muted">

projects/msp-tools/guru-rmm/dashboard/src/pages/History.tsx

@@ -0,0 +1,281 @@
+import { useQuery } from "@tanstack/react-query";
+import { Link, useParams, useNavigate } from "react-router-dom";
+import { RefreshCw, CheckCircle, XCircle, Clock, Loader2, ArrowLeft, Terminal } from "lucide-react";
+import { commandsApi, Command } from "../api/client";
+import { Card, CardContent } from "../components/Card";
+import { Button } from "../components/Button";
+
+function StatusBadge({ status }: { status: Command["status"] }) {
+  const config = {
+    pending: {
+      icon: Clock,
+      label: "Pending",
+      className: "bg-amber-500/10 text-amber-400 border-amber-500/30",
+    },
+    running: {
+      icon: Loader2,
+      label: "Running",
+      className: "bg-cyan-500/10 text-cyan-400 border-cyan-500/30",
+      spin: true,
+    },
+    completed: {
+      icon: CheckCircle,
+      label: "Completed",
+      className: "bg-emerald-500/10 text-emerald-400 border-emerald-500/30",
+    },
+    failed: {
+      icon: XCircle,
+      label: "Failed",
+      className: "bg-rose-500/10 text-rose-400 border-rose-500/30",
+    },
+  };
+
+  const { icon: Icon, label, className, spin } = config[status] as {
+    icon: typeof Clock;
+    label: string;
+    className: string;
+    spin?: boolean;
+  };
+
+  return (
+    <span className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-mono font-medium border ${className}`}>
+      <Icon className={`h-3 w-3 ${spin ? "animate-spin" : ""}`} />
+      {label}
+    </span>
+  );
+}
+
+function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  return date.toLocaleString();
+}
+
+function formatRelativeTime(dateString: string): string {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+  if (diffInSeconds < 60) return "Just now";
+  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
+  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
+  return `${Math.floor(diffInSeconds / 86400)}d ago`;
+}
+
+export function History() {
+  const { data: commands = [], isLoading, refetch } = useQuery({
+    queryKey: ["commands"],
+    queryFn: () => commandsApi.list().then((res) => res.data),
+    refetchInterval: 10000,
+  });
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-mono font-bold text-[var(--text-primary)]">History</h1>
+          <p className="text-[var(--text-muted)] text-sm">Command execution log</p>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => refetch()}
+          className="border-[var(--border-accent)] text-[var(--accent-cyan)] hover:bg-[var(--accent-cyan-muted)]"
+        >
+          <RefreshCw className="h-4 w-4 mr-2" />
+          Refresh
+        </Button>
+      </div>
+
+      {/* History List */}
+      <Card className="glass-card bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-xl overflow-hidden">
+        <CardContent className="p-0">
+          {isLoading ? (
+            <div className="p-8 text-center">
+              <Loader2 className="h-6 w-6 animate-spin text-[var(--accent-cyan)] mx-auto mb-2" />
+              <p className="text-[var(--text-muted)] font-mono text-sm">Loading history...</p>
+            </div>
+          ) : commands.length === 0 ? (
+            <div className="p-8 text-center">
+              <Terminal className="h-8 w-8 text-[var(--text-muted)] mx-auto mb-2 opacity-50" />
+              <p className="text-[var(--text-muted)] font-mono text-sm">No commands executed yet</p>
+            </div>
+          ) : (
+            <div className="divide-y divide-[var(--border-secondary)]">
+              {commands.map((cmd: Command) => (
+                <Link
+                  key={cmd.id}
+                  to={`/history/${cmd.id}`}
+                  className="flex items-center justify-between p-3 hover:bg-[rgba(6,182,212,0.05)] transition-colors group"
+                >
+                  <div className="flex items-center gap-3 min-w-0 flex-1">
+                    <StatusBadge status={cmd.status} />
+                    <div className="min-w-0 flex-1">
+                      <p className="font-mono text-sm text-[var(--text-primary)] truncate group-hover:text-[var(--accent-cyan)] transition-colors">
+                        {cmd.command_text}
+                      </p>
+                      <p className="text-xs text-[var(--text-muted)] mt-0.5">
+                        {cmd.command_type} | Agent: {cmd.agent_id.slice(0, 8)}...
+                      </p>
+                    </div>
+                  </div>
+                  <div className="text-right pl-4 shrink-0">
+                    <p className="font-mono text-xs text-[var(--text-muted)]">
+                      {formatRelativeTime(cmd.created_at)}
+                    </p>
+                    {cmd.exit_code !== null && (
+                      <p className={`text-xs font-mono ${cmd.exit_code === 0 ? "text-emerald-500" : "text-rose-500"}`}>
+                        exit: {cmd.exit_code}
+                      </p>
+                    )}
+                  </div>
+                </Link>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export function HistoryDetail() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+
+  const { data: commands = [], isLoading } = useQuery({
+    queryKey: ["commands"],
+    queryFn: () => commandsApi.list().then((res) => res.data),
+  });
+
+  const command = commands.find((cmd: Command) => cmd.id === id);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-[50vh]">
+        <Loader2 className="h-8 w-8 animate-spin text-[var(--accent-cyan)]" />
+      </div>
+    );
+  }
+
+  if (!command) {
+    return (
+      <div className="space-y-4">
+        <Button
+          variant="ghost"
+          onClick={() => navigate("/history")}
+          className="text-[var(--text-muted)] hover:text-[var(--accent-cyan)]"
+        >
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          Back to History
+        </Button>
+        <Card className="glass-card">
+          <CardContent className="p-8 text-center">
+            <p className="text-[var(--text-muted)]">Command not found</p>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center gap-4">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => navigate("/history")}
+          className="text-[var(--text-muted)] hover:text-[var(--accent-cyan)] hover:bg-[var(--accent-cyan-muted)]"
+        >
+          <ArrowLeft className="h-5 w-5" />
+        </Button>
+        <div className="flex-1">
+          <div className="flex items-center gap-3">
+            <h1 className="text-xl font-mono font-bold text-[var(--text-primary)]">Command Detail</h1>
+            <StatusBadge status={command.status} />
+          </div>
+          <p className="text-[var(--text-muted)] text-sm mt-0.5">
+            {formatDate(command.created_at)}
+          </p>
+        </div>
+      </div>
+
+      {/* Command Info */}
+      <Card className="glass-card bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-xl">
+        <CardContent className="p-4 space-y-4">
+          {/* Command */}
+          <div>
+            <label className="text-xs font-mono font-semibold text-[var(--text-muted)] uppercase tracking-wider">
+              Command
+            </label>
+            <div className="mt-1 p-3 rounded-lg bg-[var(--bg-primary)] border border-[var(--border-secondary)] font-mono text-sm text-[var(--accent-cyan)]">
+              {command.command_text}
+            </div>
+          </div>
+
+          {/* Meta info */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div>
+              <label className="text-xs font-mono font-semibold text-[var(--text-muted)] uppercase tracking-wider">
+                Type
+              </label>
+              <p className="mt-1 font-mono text-sm text-[var(--text-secondary)]">{command.command_type}</p>
+            </div>
+            <div>
+              <label className="text-xs font-mono font-semibold text-[var(--text-muted)] uppercase tracking-wider">
+                Agent
+              </label>
+              <Link
+                to={`/agents/${command.agent_id}`}
+                className="mt-1 block font-mono text-sm text-[var(--accent-cyan)] hover:underline"
+              >
+                {command.agent_id.slice(0, 12)}...
+              </Link>
+            </div>
+            <div>
+              <label className="text-xs font-mono font-semibold text-[var(--text-muted)] uppercase tracking-wider">
+                Exit Code
+              </label>
+              <p className={`mt-1 font-mono text-sm ${command.exit_code === 0 ? "text-emerald-400" : command.exit_code !== null ? "text-rose-400" : "text-[var(--text-muted)]"}`}>
+                {command.exit_code !== null ? command.exit_code : "-"}
+              </p>
+            </div>
+            <div>
+              <label className="text-xs font-mono font-semibold text-[var(--text-muted)] uppercase tracking-wider">
+                Executed
+              </label>
+              <p className="mt-1 font-mono text-sm text-[var(--text-secondary)]">
+                {formatRelativeTime(command.created_at)}
+              </p>
+            </div>
+          </div>
+
+          {/* Output */}
+          {command.stdout && (
+            <div>
+              <label className="text-xs font-mono font-semibold text-[var(--text-muted)] uppercase tracking-wider">
+                Output
+              </label>
+              <pre className="mt-1 p-3 rounded-lg bg-[var(--bg-primary)] border border-[var(--border-secondary)] font-mono text-xs text-[var(--text-secondary)] overflow-x-auto max-h-64 overflow-y-auto">
+                {command.stdout}
+              </pre>
+            </div>
+          )}
+
+          {/* Error */}
+          {command.stderr && (
+            <div>
+              <label className="text-xs font-mono font-semibold text-rose-400 uppercase tracking-wider">
+                Error Output
+              </label>
+              <pre className="mt-1 p-3 rounded-lg bg-rose-500/5 border border-rose-500/20 font-mono text-xs text-rose-300 overflow-x-auto max-h-64 overflow-y-auto">
+                {command.stderr}
+              </pre>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}