feat: add Next.js frontend for city surveillance dashboard

- Dark-theme dashboard with stat cards, severity pie chart, incident type bar chart
- Multi-camera live grid (2/3 col toggle) with per-cell VLM analysis trigger
- Incident table with filter, resolve/false-alarm actions
- AI Agent chat page with quick-suggestion prompts and DB context display
- Shift report generator with time window + district filter and TXT download
- Camera manager (CRUD, toggle active, delete) with go2rtc registration
- Real-time alert ticker bar via WebSocket with auto-reconnect
- Full TypeScript, Tailwind dark theme, Recharts for charts
- Dockerfile (multi-stage) + docker-compose frontend service

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DXvYppU6bAHzS9R8HbTHdN

Author: claude

docker/docker-compose-backend.yml

@@ -82,6 +82,18 @@ services:
     volumes:
       - snapshots:/tmp/snapshots
 
+  frontend:
+    build:
+      context: ../src/frontend
+      dockerfile: Dockerfile
+      args:
+        NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL:-http://localhost:8000}
+        NEXT_PUBLIC_WS_URL: ${NEXT_PUBLIC_WS_URL:-ws://localhost:8000}
+    ports:
+      - "3000:3000"
+    depends_on:
+      - backend
+
 volumes:
   pg_data:
   redis_data:

src/frontend/Dockerfile

@@ -0,0 +1,18 @@
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY package.json ./
+RUN npm install
+COPY . .
+ARG NEXT_PUBLIC_API_URL=http://localhost:8000
+ARG NEXT_PUBLIC_WS_URL=ws://localhost:8000
+ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
+ENV NEXT_PUBLIC_WS_URL=$NEXT_PUBLIC_WS_URL
+RUN npm run build
+
+FROM node:20-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+EXPOSE 3000
+CMD ["node", "server.js"]

src/frontend/app/agent/page.tsx

@@ -0,0 +1,147 @@
+'use client'
+import { useState, useRef, useEffect } from 'react'
+import { api } from '@/lib/api'
+import { Send, Bot, User, Loader2 } from 'lucide-react'
+import { fmtTime } from '@/lib/utils'
+
+interface Message {
+  role: 'user' | 'assistant'
+  content: string
+  time: string
+  context?: number
+}
+
+const SUGGESTIONS = [
+  'How many incidents occurred in the last 24 hours?',
+  'List all critical incidents today',
+  'Which camera has the most incidents?',
+  'Summarize traffic accidents from this week',
+]
+
+export default function AgentPage() {
+  const [messages, setMessages] = useState<Message[]>([])
+  const [input, setInput] = useState('')
+  const [loading, setLoading] = useState(false)
+  const bottomRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages])
+
+  async function send(question: string) {
+    if (!question.trim() || loading) return
+    const userMsg: Message = { role: 'user', content: question, time: new Date().toISOString() }
+    setMessages((prev) => [...prev, userMsg])
+    setInput('')
+    setLoading(true)
+
+    try {
+      const res = await api.agent.query(question)
+      setMessages((prev) => [
+        ...prev,
+        {
+          role: 'assistant',
+          content: res.answer,
+          time: new Date().toISOString(),
+          context: res.incidents_in_context,
+        },
+      ])
+    } catch (e) {
+      setMessages((prev) => [
+        ...prev,
+        { role: 'assistant', content: 'Failed to get a response. Is the backend running?', time: new Date().toISOString() },
+      ])
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full max-w-3xl mx-auto">
+      <h1 className="text-xl font-semibold text-white mb-4">AI Agent</h1>
+
+      {/* Chat window */}
+      <div className="flex-1 bg-gray-900 rounded-xl border border-gray-800 flex flex-col overflow-hidden">
+        <div className="flex-1 overflow-y-auto p-4 space-y-4 scrollbar-thin">
+          {messages.length === 0 && (
+            <div className="text-center pt-8">
+              <Bot size={40} className="mx-auto text-brand-500 mb-3" />
+              <p className="text-gray-400 text-sm mb-6">Ask anything about incidents, cameras, or traffic patterns.</p>
+              <div className="grid grid-cols-2 gap-2">
+                {SUGGESTIONS.map((s) => (
+                  <button
+                    key={s}
+                    onClick={() => send(s)}
+                    className="text-left text-xs bg-gray-800 hover:bg-gray-700 text-gray-300 px-3 py-2 rounded-lg transition-colors"
+                  >
+                    {s}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {messages.map((msg, i) => (
+            <div key={i} className={`flex gap-3 ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+              {msg.role === 'assistant' && (
+                <div className="w-7 h-7 rounded-full bg-brand-600 flex items-center justify-center flex-shrink-0 mt-1">
+                  <Bot size={14} />
+                </div>
+              )}
+              <div className={`max-w-lg ${msg.role === 'user' ? 'items-end' : 'items-start'} flex flex-col gap-1`}>
+                <div className={`px-4 py-2.5 rounded-2xl text-sm whitespace-pre-wrap ${
+                  msg.role === 'user'
+                    ? 'bg-brand-600 text-white rounded-br-sm'
+                    : 'bg-gray-800 text-gray-200 rounded-bl-sm'
+                }`}>
+                  {msg.content}
+                </div>
+                <span className="text-xs text-gray-600">
+                  {fmtTime(msg.time)}
+                  {msg.context != null && ` · ${msg.context} incidents in context`}
+                </span>
+              </div>
+              {msg.role === 'user' && (
+                <div className="w-7 h-7 rounded-full bg-gray-700 flex items-center justify-center flex-shrink-0 mt-1">
+                  <User size={14} />
+                </div>
+              )}
+            </div>
+          ))}
+
+          {loading && (
+            <div className="flex gap-3">
+              <div className="w-7 h-7 rounded-full bg-brand-600 flex items-center justify-center">
+                <Bot size={14} />
+              </div>
+              <div className="bg-gray-800 rounded-2xl rounded-bl-sm px-4 py-3 flex items-center gap-2">
+                <Loader2 size={14} className="animate-spin text-brand-400" />
+                <span className="text-gray-400 text-sm">Thinking…</span>
+              </div>
+            </div>
+          )}
+          <div ref={bottomRef} />
+        </div>
+
+        {/* Input bar */}
+        <div className="border-t border-gray-800 p-3 flex gap-2">
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && !e.shiftKey && send(input)}
+            placeholder="Ask about incidents, cameras, or traffic…"
+            className="flex-1 bg-gray-800 text-white text-sm rounded-lg px-4 py-2.5 outline-none placeholder-gray-600 focus:ring-1 focus:ring-brand-500"
+          />
+          <button
+            onClick={() => send(input)}
+            disabled={loading || !input.trim()}
+            className="bg-brand-600 hover:bg-brand-500 disabled:opacity-50 text-white px-4 py-2.5 rounded-lg transition-colors"
+          >
+            <Send size={15} />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/frontend/app/cameras/page.tsx

@@ -0,0 +1,14 @@
+import { api } from '@/lib/api'
+import { CameraManager } from '@/components/camera/CameraManager'
+
+export const revalidate = 0
+
+export default async function CamerasPage() {
+  const cameras = await api.cameras.list().catch(() => [])
+  return (
+    <div className="space-y-4">
+      <h1 className="text-xl font-semibold text-white">Cameras</h1>
+      <CameraManager initialCameras={cameras} />
+    </div>
+  )
+}

src/frontend/app/dashboard/page.tsx

@@ -0,0 +1,57 @@
+import { api } from '@/lib/api'
+import { StatCard } from '@/components/ui/StatCard'
+import { SeverityChart } from '@/components/incident/SeverityChart'
+import { IncidentTypeChart } from '@/components/incident/IncidentTypeChart'
+import { RecentIncidents } from '@/components/incident/RecentIncidents'
+import { CameraGrid } from '@/components/camera/CameraGrid'
+import { AlertTriangle, Camera, Activity, ShieldAlert } from 'lucide-react'
+
+export const revalidate = 30
+
+export default async function DashboardPage() {
+  const [cameras, stats, recentIncidents] = await Promise.all([
+    api.cameras.list().catch(() => []),
+    api.incidents.stats().catch(() => ({ total: 0, by_type: {}, by_severity: {}, by_camera: {} })),
+    api.incidents.list({ limit: '10', resolved: 'open' }).catch(() => []),
+  ])
+
+  const critical = stats.by_severity['critical'] ?? 0
+  const activeCams = cameras.filter((c) => c.is_active).length
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-xl font-semibold text-white">Dashboard</h1>
+
+      {/* Stat cards */}
+      <div className="grid grid-cols-4 gap-4">
+        <StatCard label="Total Incidents" value={stats.total} icon={AlertTriangle} color="blue" />
+        <StatCard label="Critical" value={critical} icon={ShieldAlert} color="red" />
+        <StatCard label="Active Cameras" value={activeCams} icon={Camera} color="green" />
+        <StatCard label="Open Cases" value={recentIncidents.length} icon={Activity} color="yellow" />
+      </div>
+
+      {/* Charts row */}
+      <div className="grid grid-cols-2 gap-4">
+        <div className="bg-gray-900 rounded-xl p-4 border border-gray-800">
+          <p className="text-sm font-medium text-gray-400 mb-3">Incidents by Severity</p>
+          <SeverityChart data={stats.by_severity} />
+        </div>
+        <div className="bg-gray-900 rounded-xl p-4 border border-gray-800">
+          <p className="text-sm font-medium text-gray-400 mb-3">Incidents by Type</p>
+          <IncidentTypeChart data={stats.by_type} />
+        </div>
+      </div>
+
+      {/* Camera grid + recent incidents */}
+      <div className="grid grid-cols-3 gap-4">
+        <div className="col-span-2">
+          <CameraGrid cameras={cameras.slice(0, 6)} />
+        </div>
+        <div className="bg-gray-900 rounded-xl p-4 border border-gray-800">
+          <p className="text-sm font-medium text-gray-400 mb-3">Open Incidents</p>
+          <RecentIncidents incidents={recentIncidents} />
+        </div>
+      </div>
+    </div>
+  )
+}

src/frontend/app/globals.css

@@ -0,0 +1,16 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-gray-950 text-gray-100 antialiased;
+  }
+}
+
+@layer utilities {
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: #374151 transparent;
+  }
+}

src/frontend/app/incidents/page.tsx

@@ -0,0 +1,26 @@
+import { api } from '@/lib/api'
+import { IncidentTable } from '@/components/incident/IncidentTable'
+
+export const revalidate = 0
+
+export default async function IncidentsPage({
+  searchParams,
+}: {
+  searchParams: Record<string, string>
+}) {
+  const incidents = await api.incidents
+    .list({
+      incident_type: searchParams.type,
+      severity: searchParams.severity,
+      resolved: searchParams.resolved ?? 'open',
+      limit: '100',
+    })
+    .catch(() => [])
+
+  return (
+    <div className="space-y-4">
+      <h1 className="text-xl font-semibold text-white">Incidents</h1>
+      <IncidentTable incidents={incidents} />
+    </div>
+  )
+}

src/frontend/app/layout.tsx

@@ -0,0 +1,23 @@
+import type { Metadata } from 'next'
+import './globals.css'
+import { Sidebar } from '@/components/layout/Sidebar'
+import { AlertBar } from '@/components/layout/AlertBar'
+
+export const metadata: Metadata = {
+  title: 'NamuCam — City Surveillance',
+  description: 'AI-powered city CCTV surveillance dashboard',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className="flex h-screen overflow-hidden">
+        <Sidebar />
+        <div className="flex flex-col flex-1 overflow-hidden">
+          <AlertBar />
+          <main className="flex-1 overflow-auto p-6">{children}</main>
+        </div>
+      </body>
+    </html>
+  )
+}

src/frontend/app/page.tsx

@@ -0,0 +1,2 @@
+import { redirect } from 'next/navigation'
+export default function Root() { redirect('/dashboard') }