feat: unified activity feed with comments + progress notes

- New /api/activity endpoint returning combined timeline of progress notes
  and comments across all tasks, sorted chronologically
- Activity page now fetches from unified endpoint instead of extracting
  from task data client-side
- Type filter (progress/comment) and status filter on Activity page
- Comment entries show author avatars and type badges
- 30s auto-refresh on activity feed

frontend/src/pages/ActivityPage.tsx

@@ -1,7 +1,5 @@
-import { useMemo, useState } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { Link } from "react-router-dom";
-import { useTasks } from "../hooks/useTasks";
-import type { Task, ProgressNote } from "../lib/types";
 
 function timeAgo(dateStr: string): string {
   const seconds = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000);
@@ -26,55 +24,89 @@ function formatDate(dateStr: string): string {
 }
 
 interface ActivityItem {
-  task: Task;
-  note: ProgressNote;
+  type: "progress" | "comment";
+  timestamp: string;
+  taskId: string;
+  taskNumber: number | null;
+  taskTitle: string;
+  taskStatus: string;
+  note?: string;
+  commentId?: string;
+  authorName?: string;
+  authorId?: string | null;
+  content?: string;
+}
+
+interface ActivityGroup {
+  date: string;
+  items: ActivityItem[];
+}
+
+function avatarColor(name: string): string {
+  const colors = [
+    "bg-blue-500", "bg-green-500", "bg-purple-500", "bg-pink-500",
+    "bg-indigo-500", "bg-teal-500", "bg-cyan-500", "bg-rose-500",
+  ];
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  return colors[Math.abs(hash) % colors.length];
 }
 
 export function ActivityPage() {
-  const { tasks, loading } = useTasks(15000);
+  const [items, setItems] = useState<ActivityItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [_total, setTotal] = useState(0);
   const [filter, setFilter] = useState<string>("all");
+  const [typeFilter, setTypeFilter] = useState<string>("all");
 
-  const allActivity = useMemo(() => {
-    const items: ActivityItem[] = [];
-    for (const task of tasks) {
-      if (task.progressNotes) {
-        for (const note of task.progressNotes) {
-          items.push({ task, note });
-        }
-      }
+  const fetchActivity = useCallback(async () => {
+    try {
+      const res = await fetch("/api/activity?limit=200", { credentials: "include" });
+      if (!res.ok) throw new Error("Failed to fetch activity");
+      const data = await res.json();
+      setItems(data.items || []);
+      setTotal(data.total || 0);
+    } catch (e) {
+      console.error("Failed to fetch activity:", e);
+    } finally {
+      setLoading(false);
     }
-    items.sort(
-      (a, b) =>
-        new Date(b.note.timestamp).getTime() - new Date(a.note.timestamp).getTime()
-    );
-    return items;
-  }, [tasks]);
+  }, []);
 
-  const groupedActivity = useMemo(() => {
-    const filtered =
-      filter === "all"
-        ? allActivity
-        : allActivity.filter((a) => a.task.status === filter);
+  useEffect(() => {
+    fetchActivity();
+    const interval = setInterval(fetchActivity, 30000);
+    return () => clearInterval(interval);
+  }, [fetchActivity]);
 
-    const groups: { date: string; items: ActivityItem[] }[] = [];
-    let currentDate = "";
-    for (const item of filtered) {
-      const d = new Date(item.note.timestamp).toLocaleDateString("en-US", {
-        weekday: "long",
-        month: "long",
-        day: "numeric",
-        year: "numeric",
-      });
-      if (d !== currentDate) {
-        currentDate = d;
-        groups.push({ date: d, items: [] });
-      }
-      groups[groups.length - 1].items.push(item);
+  // Apply filters
+  const filtered = items.filter((item) => {
+    if (filter !== "all" && item.taskStatus !== filter) return false;
+    if (typeFilter !== "all" && item.type !== typeFilter) return false;
+    return true;
+  });
+
+  // Group by date
+  const grouped: ActivityGroup[] = [];
+  let currentDate = "";
+  for (const item of filtered) {
+    const d = new Date(item.timestamp).toLocaleDateString("en-US", {
+      weekday: "long",
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+    });
+    if (d !== currentDate) {
+      currentDate = d;
+      grouped.push({ date: d, items: [] });
     }
-    return groups;
-  }, [allActivity, filter]);
+    grouped[grouped.length - 1].items.push(item);
+  }
 
-  if (loading && tasks.length === 0) {
+  const commentCount = items.filter(i => i.type === "comment").length;
+  const progressCount = items.filter(i => i.type === "progress").length;
+
+  if (loading) {
     return (
       <div className="min-h-screen flex items-center justify-center text-gray-400 dark:text-gray-500">
         Loading activity...
@@ -85,33 +117,54 @@ export function ActivityPage() {
   return (
     <div className="min-h-screen">
       <header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-14 md:top-0 z-30">
-        <div className="max-w-3xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between">
-          <div>
-            <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">📝 Activity Log</h1>
-            <p className="text-sm text-gray-400 dark:text-gray-500">
-              {allActivity.length} updates across {tasks.length} tasks
-            </p>
+        <div className="max-w-3xl mx-auto px-4 sm:px-6 py-4">
+          <div className="flex items-center justify-between mb-2">
+            <div>
+              <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">📝 Activity Log</h1>
+              <p className="text-sm text-gray-400 dark:text-gray-500">
+                {progressCount} updates · {commentCount} comments
+              </p>
+            </div>
+          </div>
+          <div className="flex gap-2 flex-wrap">
+            <select
+              value={filter}
+              onChange={(e) => setFilter(e.target.value)}
+              className="text-xs border border-gray-200 dark:border-gray-700 rounded-lg px-2.5 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+            >
+              <option value="all">All Statuses</option>
+              <option value="active">Active</option>
+              <option value="completed">Completed</option>
+              <option value="queued">Queued</option>
+              <option value="blocked">Blocked</option>
+            </select>
+            <select
+              value={typeFilter}
+              onChange={(e) => setTypeFilter(e.target.value)}
+              className="text-xs border border-gray-200 dark:border-gray-700 rounded-lg px-2.5 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+            >
+              <option value="all">All Types</option>
+              <option value="progress">🔨 Progress Notes</option>
+              <option value="comment">💬 Comments</option>
+            </select>
+            {(filter !== "all" || typeFilter !== "all") && (
+              <button
+                onClick={() => { setFilter("all"); setTypeFilter("all"); }}
+                className="text-xs text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+              >
+                Clear filters
+              </button>
+            )}
           </div>
-          <select
-            value={filter}
-            onChange={(e) => setFilter(e.target.value)}
-            className="text-sm border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-200 dark:focus:ring-amber-800 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
-          >
-            <option value="all">All Tasks</option>
-            <option value="active">Active</option>
-            <option value="completed">Completed</option>
-            <option value="queued">Queued</option>
-            <option value="blocked">Blocked</option>
-          </select>
         </div>
       </header>
 
       <div className="max-w-3xl mx-auto px-4 sm:px-6 py-6">
-        {groupedActivity.length === 0 ? (
+        {grouped.length === 0 ? (
           <div className="text-center text-gray-400 dark:text-gray-500 py-12">No activity found</div>
         ) : (
           <div className="space-y-8">
-            {groupedActivity.map((group) => (
+            {grouped.map((group) => (
               <div key={group.date}>
                 <div className="sticky top-28 md:top-14 z-10 bg-gray-50/95 dark:bg-gray-950/95 backdrop-blur-sm py-2 mb-3">
                   <h2 className="text-sm font-semibold text-gray-500 dark:text-gray-400">{group.date}</h2>
@@ -119,11 +172,21 @@ export function ActivityPage() {
                 <div className="space-y-1">
                   {group.items.map((item, i) => (
                     <div
-                      key={`${item.task.id}-${i}`}
+                      key={`${item.taskId}-${item.type}-${i}`}
                       className="flex gap-3 py-3 px-3 rounded-lg hover:bg-white dark:hover:bg-gray-900 transition group"
                     >
                       <div className="flex flex-col items-center pt-1.5">
-                        <div className="w-2.5 h-2.5 rounded-full bg-amber-400 shrink-0" />
+                        {item.type === "comment" ? (
+                          <div className={`w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold text-white shrink-0 ${
+                            item.authorId === "hammer"
+                              ? "bg-amber-500"
+                              : avatarColor(item.authorName || "?")
+                          }`}>
+                            {item.authorId === "hammer" ? "🔨" : (item.authorName || "?").charAt(0).toUpperCase()}
+                          </div>
+                        ) : (
+                          <div className="w-2.5 h-2.5 rounded-full bg-amber-400 shrink-0 mt-1.5" />
+                        )}
                         {i < group.items.length - 1 && (
                           <div className="w-px flex-1 bg-gray-200 dark:bg-gray-700 mt-1" />
                         )}
@@ -132,23 +195,35 @@ export function ActivityPage() {
                       <div className="flex-1 min-w-0">
                         <div className="flex items-center gap-2 mb-1 flex-wrap">
                           <Link
-                            to={`/task/HQ-${item.task.taskNumber}`}
+                            to={`/task/HQ-${item.taskNumber}`}
                             className="text-xs font-bold text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/30 px-1.5 py-0.5 rounded font-mono hover:bg-amber-100 dark:hover:bg-amber-900/50 transition"
                           >
-                            HQ-{item.task.taskNumber}
+                            HQ-{item.taskNumber}
                           </Link>
+                          <span className={`text-[10px] px-1.5 py-0.5 rounded-full font-medium ${
+                            item.type === "comment"
+                              ? "bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400"
+                              : "bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400"
+                          }`}>
+                            {item.type === "comment" ? "💬 comment" : "🔨 progress"}
+                          </span>
+                          {item.type === "comment" && item.authorName && (
+                            <span className="text-[10px] text-gray-500 dark:text-gray-400 font-medium">
+                              by {item.authorName}
+                            </span>
+                          )}
                           <span className="text-[10px] text-gray-400 dark:text-gray-500">
-                            {formatDate(item.note.timestamp)}
+                            {formatDate(item.timestamp)}
                           </span>
                           <span className="text-[10px] text-gray-300 dark:text-gray-600">
-                            ({timeAgo(item.note.timestamp)})
+                            ({timeAgo(item.timestamp)})
                           </span>
                         </div>
                         <p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
-                          {item.note.note}
+                          {item.type === "comment" ? item.content : item.note}
                         </p>
                         <p className="text-xs text-gray-400 dark:text-gray-500 mt-1 truncate">
-                          {item.task.title}
+                          {item.taskTitle}
                         </p>
                       </div>
                     </div>