T1/Phase 1: scaffold Vite SPA + Hono API + Bun worker

- apps/web: Vite + React 19 + TanStack Router/Query + shadcn/ui - apps/api: Hono + Bun on :3001 with /api/health, /api/auth/*, /mcp stubs - apps/worker: Bun worker stub, DB connection, graceful SIGTERM - apps/web-legacy/: old Next.js code moved aside (preserved for T2-T8 reference) - Dockerfiles: api (Bun), worker (Bun), spa (multi-stage Caddy) - Caddyfile: serves dist + reverse-proxies /api/* + /mcp to api - docker-compose.yml: 4-service target (api, spa, db, worker) - packages/db/src/client.ts: shared Drizzle client for api + worker - db/client.ts: root-level alias for convenience Parent: t_e1cbd87d -> t_24c9c3fd (T0)
2026-08-01 01:15:31 +00:00
parent 9203aee758
commit fca56ab77e
312 changed files with 3489 additions and 196 deletions
@@ -0,0 +1,90 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Activity, Clock, User, Plus, CheckCircle2, XCircle } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+
+interface ActivityItem {
+  id: string;
+  actor: string;
+  action: string;
+  entity_type: string;
+  entity_id: string;
+  changes: Record<string, unknown> | null;
+  created_at: string;
+}
+
+export function ActivityFeedWidget() {
+  const [activities, setActivities] = useState<ActivityItem[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchActivities();
+  }, []);
+
+  async function fetchActivities() {
+    try {
+      const res = await fetch('/api/agent-activity?perPage=20&sort=-created');
+      if (res.ok) {
+        const data = await res.json();
+        setActivities(data.items || []);
+      }
+    } catch {} finally {
+      setLoading(false);
+    }
+  }
+
+  function getActionIcon(action: string) {
+    switch (action) {
+      case 'created': return <Plus className="h-3 w-3 text-green-500" />;
+      case 'completed': return <CheckCircle2 className="h-3 w-3 text-green-500" />;
+      case 'deleted': return <XCircle className="h-3 w-3 text-red-500" />;
+      default: return <Clock className="h-3 w-3 text-blue-500" />;
+    }
+  }
+
+  function timeAgo(dateStr: string) {
+    const diff = Date.now() - new Date(dateStr).getTime();
+    const mins = Math.floor(diff / 60000);
+    if (mins < 1) return 'just now';
+    if (mins < 60) return `${mins}m ago`;
+    const hours = Math.floor(mins / 60);
+    if (hours < 24) return `${hours}h ago`;
+    return `${Math.floor(hours / 24)}d ago`;
+  }
+
+  return (
+    <Card className="h-full border-0 shadow-none">
+      <CardHeader className="p-0 pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="flex items-center gap-2 text-base">
+            <Activity className="h-4 w-4" aria-hidden="true" />
+            Activity Feed
+          </CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent className="p-0">
+        {loading ? (
+          <p className="text-sm text-muted-foreground">Loading...</p>
+        ) : activities.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No recent activity</p>
+        ) : (
+          <div className="space-y-1.5">
+            {activities.slice(0, 10).map((item) => (
+              <div key={item.id} className="flex items-start gap-2 rounded-md p-1.5 text-xs">
+                <span className="mt-0.5 shrink-0">{getActionIcon(item.action)}</span>
+                <div className="min-w-0 flex-1">
+                  <span className="font-medium">{item.actor}</span>{' '}
+                  <span className="text-muted-foreground">{item.action}</span>{' '}
+                  <Badge variant="outline" className="text-[10px]">{item.entity_type}</Badge>
+                </div>
+                <span className="shrink-0 text-muted-foreground">{timeAgo(item.created_at)}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}