feat: dashboard overview page with stats, activity, and up-next (HQ-21)

- New Dashboard page: task stats grid, active tasks, up-next queue, recent activity, recently completed
- Dashboard is now the home page (/)
- Sidebar: Dashboard → Queue → Projects → Chat
- Queue page defaults redirect to / instead of /queue

frontend/src/App.tsx

@@ -1,5 +1,6 @@
 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import { DashboardLayout } from "./components/DashboardLayout";
+import { DashboardPage } from "./pages/DashboardPage";
 import { QueuePage } from "./pages/QueuePage";
 import { ChatPage } from "./pages/ChatPage";
 import { ProjectsPage } from "./pages/ProjectsPage";
@@ -12,11 +13,12 @@ function AuthenticatedApp() {
     <BrowserRouter>
       <Routes>
         <Route element={<DashboardLayout />}>
+          <Route path="/" element={<DashboardPage />} />
           <Route path="/queue" element={<QueuePage />} />
           <Route path="/projects" element={<ProjectsPage />} />
           <Route path="/chat" element={<ChatPage />} />
           <Route path="/admin" element={<AdminPage />} />
-          <Route path="*" element={<Navigate to="/queue" replace />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
         </Route>
       </Routes>
     </BrowserRouter>

frontend/src/components/DashboardLayout.tsx

@@ -4,6 +4,7 @@ import { useCurrentUser } from "../hooks/useCurrentUser";
 import { signOut } from "../lib/auth-client";
 
 const navItems = [
+  { to: "/", label: "Dashboard", icon: "🔨" },
   { to: "/queue", label: "Queue", icon: "📋" },
   { to: "/projects", label: "Projects", icon: "📁" },
   { to: "/chat", label: "Chat", icon: "💬" },
@@ -89,6 +90,7 @@ export function DashboardLayout() {
             <NavLink
               key={item.to}
               to={item.to}
+              end={item.to === "/"}
               onClick={closeSidebar}
               className={({ isActive }) =>
                 `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition ${

frontend/src/pages/DashboardPage.tsx

@@ -0,0 +1,217 @@
+import { useMemo } from "react";
+import { Link } from "react-router-dom";
+import { useTasks } from "../hooks/useTasks";
+import type { Task, ProgressNote } from "../lib/types";
+
+function StatCard({ label, value, icon, color }: { label: string; value: number; icon: string; color: string }) {
+  return (
+    <div className={`rounded-xl border p-4 ${color}`}>
+      <div className="flex items-center justify-between mb-1">
+        <span className="text-2xl">{icon}</span>
+        <span className="text-2xl font-bold">{value}</span>
+      </div>
+      <p className="text-sm font-medium opacity-80">{label}</p>
+    </div>
+  );
+}
+
+function timeAgo(dateStr: string): string {
+  const seconds = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000);
+  if (seconds < 60) return "just now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+function RecentActivity({ tasks }: { tasks: Task[] }) {
+  // Gather all progress notes with task context, sorted by timestamp desc
+  const recentNotes = useMemo(() => {
+    const notes: { task: Task; note: ProgressNote }[] = [];
+    for (const task of tasks) {
+      if (task.progressNotes) {
+        for (const note of task.progressNotes) {
+          notes.push({ task, note });
+        }
+      }
+    }
+    notes.sort((a, b) => new Date(b.note.timestamp).getTime() - new Date(a.note.timestamp).getTime());
+    return notes.slice(0, 8);
+  }, [tasks]);
+
+  if (recentNotes.length === 0) {
+    return (
+      <div className="text-sm text-gray-400 italic py-6 text-center">
+        No recent activity
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {recentNotes.map((item, i) => (
+        <div key={i} className="flex gap-3">
+          <div className="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center text-sm shrink-0 mt-0.5">
+            🔨
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 mb-0.5">
+              <span className="text-xs font-bold text-amber-700 bg-amber-50 px-1.5 py-0.5 rounded font-mono">
+                HQ-{item.task.taskNumber}
+              </span>
+              <span className="text-xs text-gray-400">{timeAgo(item.note.timestamp)}</span>
+            </div>
+            <p className="text-sm text-gray-700 line-clamp-2">{item.note.note}</p>
+            <p className="text-xs text-gray-400 mt-0.5 truncate">{item.task.title}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function DashboardPage() {
+  const { tasks, loading } = useTasks(10000);
+
+  const stats = useMemo(() => {
+    const active = tasks.filter((t) => t.status === "active").length;
+    const queued = tasks.filter((t) => t.status === "queued").length;
+    const blocked = tasks.filter((t) => t.status === "blocked").length;
+    const completed = tasks.filter((t) => t.status === "completed").length;
+    return { active, queued, blocked, completed, total: tasks.length };
+  }, [tasks]);
+
+  const activeTasks = useMemo(() => tasks.filter((t) => t.status === "active"), [tasks]);
+  const upNext = useMemo(() => tasks.filter((t) => t.status === "queued").slice(0, 3), [tasks]);
+  const recentlyCompleted = useMemo(
+    () =>
+      tasks
+        .filter((t) => t.status === "completed" && t.completedAt)
+        .sort((a, b) => new Date(b.completedAt!).getTime() - new Date(a.completedAt!).getTime())
+        .slice(0, 3),
+    [tasks]
+  );
+
+  if (loading && tasks.length === 0) {
+    return (
+      <div className="min-h-screen flex items-center justify-center text-gray-400">
+        Loading dashboard...
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen">
+      <header className="bg-white border-b border-gray-200 sticky top-14 md:top-0 z-30">
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 py-4">
+          <h1 className="text-xl font-bold text-gray-900">🔨 Dashboard</h1>
+          <p className="text-sm text-gray-400">Overview of Hammer's work</p>
+        </div>
+      </header>
+
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 py-6 space-y-6">
+        {/* Stats Grid */}
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+          <StatCard label="Active" value={stats.active} icon="⚡" color="bg-amber-50 border-amber-200 text-amber-800" />
+          <StatCard label="Queued" value={stats.queued} icon="📋" color="bg-blue-50 border-blue-200 text-blue-800" />
+          <StatCard label="Blocked" value={stats.blocked} icon="🚫" color="bg-red-50 border-red-200 text-red-800" />
+          <StatCard label="Completed" value={stats.completed} icon="✅" color="bg-green-50 border-green-200 text-green-800" />
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Currently Working On */}
+          <div className="bg-white rounded-xl border border-gray-200 shadow-sm">
+            <div className="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
+              <h2 className="font-semibold text-gray-900">⚡ Currently Working On</h2>
+              <Link to="/queue" className="text-xs text-amber-600 hover:text-amber-700 font-medium">
+                View Queue →
+              </Link>
+            </div>
+            <div className="p-5">
+              {activeTasks.length === 0 ? (
+                <div className="text-sm text-gray-400 italic py-4 text-center">
+                  Hammer is idle — no active tasks
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  {activeTasks.map((task) => (
+                    <Link to="/queue" key={task.id} className="block">
+                      <div className="rounded-lg border border-amber-200 bg-amber-50 p-3 hover:bg-amber-100 transition">
+                        <div className="flex items-center gap-2 mb-1">
+                          <span className="relative flex h-2 w-2">
+                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
+                            <span className="relative inline-flex rounded-full h-2 w-2 bg-amber-500"></span>
+                          </span>
+                          <span className="text-xs font-bold text-amber-700 font-mono">HQ-{task.taskNumber}</span>
+                          <span className="text-xs text-amber-600 capitalize px-1.5 py-0.5 bg-amber-200/50 rounded-full">{task.priority}</span>
+                        </div>
+                        <h3 className="font-medium text-sm text-amber-900">{task.title}</h3>
+                        {task.progressNotes?.length > 0 && (
+                          <p className="text-xs text-amber-700 mt-1 line-clamp-2 opacity-70">
+                            Latest: {task.progressNotes[task.progressNotes.length - 1].note}
+                          </p>
+                        )}
+                      </div>
+                    </Link>
+                  ))}
+                </div>
+              )}
+
+              {/* Up Next */}
+              {upNext.length > 0 && (
+                <div className="mt-4 pt-4 border-t border-gray-100">
+                  <h3 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Up Next</h3>
+                  <div className="space-y-2">
+                    {upNext.map((task, i) => (
+                      <div key={task.id} className="flex items-center gap-2 text-sm">
+                        <span className="text-gray-300 text-xs w-4 text-right">{i + 1}.</span>
+                        <span className="text-xs font-mono text-gray-400">HQ-{task.taskNumber}</span>
+                        <span className="text-gray-700 truncate">{task.title}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Recent Activity */}
+          <div className="bg-white rounded-xl border border-gray-200 shadow-sm">
+            <div className="px-5 py-4 border-b border-gray-100">
+              <h2 className="font-semibold text-gray-900">📝 Recent Activity</h2>
+            </div>
+            <div className="p-5">
+              <RecentActivity tasks={tasks} />
+            </div>
+          </div>
+        </div>
+
+        {/* Recently Completed */}
+        {recentlyCompleted.length > 0 && (
+          <div className="bg-white rounded-xl border border-gray-200 shadow-sm">
+            <div className="px-5 py-4 border-b border-gray-100">
+              <h2 className="font-semibold text-gray-900">✅ Recently Completed</h2>
+            </div>
+            <div className="p-5">
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                {recentlyCompleted.map((task) => (
+                  <div key={task.id} className="rounded-lg border border-green-200 bg-green-50 p-3">
+                    <div className="flex items-center gap-2 mb-1">
+                      <span className="text-xs font-bold text-green-700 font-mono">HQ-{task.taskNumber}</span>
+                      {task.completedAt && (
+                        <span className="text-xs text-green-600">{timeAgo(task.completedAt)}</span>
+                      )}
+                    </div>
+                    <h3 className="font-medium text-sm text-green-900">{task.title}</h3>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}