Deploy Next.js frontend Docker Space

Dockerfile

@@ -0,0 +1,27 @@
+FROM node:20-bookworm-slim
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV PORT=7860
+ENV HOSTNAME=0.0.0.0
+
+# Public backend URL on AMD Developer Cloud.
+# This is public, not a secret.
+ARG NEXT_PUBLIC_API_BASE_URL=http://134.199.203.136:8080
+ENV NEXT_PUBLIC_API_BASE_URL=${NEXT_PUBLIC_API_BASE_URL}
+
+COPY frontend/package*.json ./frontend/
+
+WORKDIR /app/frontend
+
+RUN if [ -f package-lock.json ]; then npm ci; else npm install; fi
+
+COPY frontend/ ./
+
+RUN npm run build
+
+EXPOSE 7860
+
+CMD ["npx", "next", "start", "-H", "0.0.0.0", "-p", "7860"]

README.md

@@ -1,10 +1,20 @@
 ---
-title: ReliefLens Frontend
-emoji: 🚀
-colorFrom: red
-colorTo: green
+title: ReliefLens AI Frontend
+emoji: 🚨
+colorFrom: blue
+colorTo: red
 sdk: docker
-pinned: false
+app_port: 7860
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# ReliefLens AI Frontend
+
+This Docker Space runs the Next.js frontend for ReliefLens AI.
+
+The backend runs on AMD Developer Cloud:
+
+`http://134.199.203.136:8080`
+
+## Safety
+
+This demo uses synthetic disaster-response data. It is not connected to emergency services and must not be used for real-world dispatch decisions.

frontend/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/AGENTS.md

@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->

frontend/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend/app/globals.css

@@ -0,0 +1,29 @@
+@import "tailwindcss";
+
+:root {
+  --background: #030712;
+  --foreground: #f9fafb;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: #111827;
+}
+::-webkit-scrollbar-thumb {
+  background: #374151;
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #4b5563;
+}
+

frontend/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "ReliefLensAI | Crisis Room",
+  description:
+    "Real-time multimodal disaster triage system powered by AMD MI300X",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="es" className="h-full">
+      <body className="bg-gray-950 text-white antialiased min-h-screen">
+        {children}
+      </body>
+    </html>
+  );
+}

frontend/app/page.tsx

@@ -0,0 +1,300 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Activity, AlertTriangle, RefreshCw, ShieldCheck, Wifi, WifiOff } from "lucide-react";
+import { AMDPanel } from "@/components/AMDPanel";
+import { IncidentCard } from "@/components/IncidentCard";
+import { StatsBar } from "@/components/StatsBar";
+import { UploadPanel } from "@/components/UploadPanel";
+import { api } from "@/lib/api";
+import type {
+  AMDPerformanceMetric,
+  CrisisRoomSummary,
+  DispatchMessage,
+  Incident,
+  Priority,
+  ResourceRecommendation,
+} from "@/lib/types";
+
+type PriorityFilter = "ALL" | Priority;
+
+const FILTERS: PriorityFilter[] = ["ALL", "P0", "P1", "P2", "P3"];
+
+export default function CrisisRoomPage() {
+  const [backendOnline, setBackendOnline] = useState<boolean | null>(null);
+  const [processing, setProcessing] = useState(false);
+  const [sessionId, setSessionId] = useState<string | null>(null);
+  const [scenarioName, setScenarioName] = useState<string>("Sin sesión activa");
+  const [summary, setSummary] = useState<CrisisRoomSummary | null>(null);
+  const [incidents, setIncidents] = useState<Incident[]>([]);
+  const [resources, setResources] = useState<ResourceRecommendation[]>([]);
+  const [dispatchMessages, setDispatchMessages] = useState<DispatchMessage[]>([]);
+  const [amdMetrics, setAmdMetrics] = useState<AMDPerformanceMetric | null>(null);
+  const [filter, setFilter] = useState<PriorityFilter>("ALL");
+  const [lastError, setLastError] = useState<string | null>(null);
+
+  const fetchHealth = useCallback(async () => {
+    try {
+      await api.getHealth();
+      setBackendOnline(true);
+    } catch {
+      setBackendOnline(false);
+    }
+  }, []);
+
+  const fetchAmdMetrics = useCallback(async () => {
+    try {
+      const res = await api.getAMDMetrics();
+      setAmdMetrics(res.data as AMDPerformanceMetric);
+    } catch {
+      setAmdMetrics(null);
+    }
+  }, []);
+
+  const fetchIncidents = useCallback(async (sid: string) => {
+    const res = await api.getIncidents(sid);
+    setIncidents(Array.isArray(res.data) ? (res.data as Incident[]) : []);
+  }, []);
+
+  useEffect(() => {
+    fetchHealth();
+    fetchAmdMetrics();
+    const interval = setInterval(fetchAmdMetrics, 5000);
+    return () => clearInterval(interval);
+  }, [fetchAmdMetrics, fetchHealth]);
+
+  const filteredIncidents = useMemo(
+    () => (filter === "ALL" ? incidents : incidents.filter((incident) => incident.priority === filter)),
+    [filter, incidents],
+  );
+
+  const counts = useMemo(
+    () => ({
+      total: incidents.length,
+      p0: incidents.filter((incident) => incident.priority === "P0").length,
+      p1: incidents.filter((incident) => incident.priority === "P1").length,
+      p2: incidents.filter((incident) => incident.priority === "P2").length,
+      p3: incidents.filter((incident) => incident.priority === "P3").length,
+    }),
+    [incidents],
+  );
+
+  const resourcesByIncident = useMemo(() => {
+    const map = new Map<string, ResourceRecommendation[]>();
+    for (const resource of resources) {
+      const bucket = map.get(resource.incident_id) ?? [];
+      bucket.push(resource);
+      map.set(resource.incident_id, bucket);
+    }
+    return map;
+  }, [resources]);
+
+  const dispatchByIncident = useMemo(() => {
+    const map = new Map<string, DispatchMessage>();
+    for (const message of dispatchMessages) {
+      if (!map.has(message.incident_id)) {
+        map.set(message.incident_id, message);
+      }
+    }
+    return map;
+  }, [dispatchMessages]);
+
+  function handleResults(nextSummary: CrisisRoomSummary) {
+    setSummary(nextSummary);
+    setSessionId(nextSummary.session_id);
+    setScenarioName(nextSummary.scenario_name);
+    setResources(nextSummary.resource_recommendations ?? []);
+    setDispatchMessages(nextSummary.dispatch_messages ?? []);
+    setAmdMetrics(nextSummary.amd_metrics ?? null);
+    setLastError(null);
+    fetchIncidents(nextSummary.session_id).catch(() => {
+      setLastError("No se pudo refrescar la lista de incidentes de la sesión.");
+    });
+  }
+
+  async function handleRefresh() {
+    await fetchHealth();
+    await fetchAmdMetrics();
+    if (sessionId) {
+      try {
+        await fetchIncidents(sessionId);
+      } catch {
+        setLastError("No se pudo actualizar la sesión actual.");
+      }
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-950 text-white">
+      <header className="border-b border-gray-800 bg-gray-950/95 backdrop-blur">
+        <div className="mx-auto flex max-w-[1600px] items-center justify-between gap-4 px-4 py-4">
+          <div className="flex items-center gap-3">
+            <div className="rounded-lg border border-red-900/60 bg-red-950/40 p-2">
+              <AlertTriangle className="h-5 w-5 text-red-400" />
+            </div>
+            <div>
+              <p className="text-xs uppercase tracking-[0.2em] text-gray-500">ReliefLens AI</p>
+              <h1 className="text-lg font-semibold text-white">Crisis Room</h1>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <span
+              className={`inline-flex items-center gap-2 rounded-md border px-3 py-2 text-xs ${
+                backendOnline
+                  ? "border-emerald-900/60 bg-emerald-950/40 text-emerald-300"
+                  : backendOnline === false
+                    ? "border-red-900/60 bg-red-950/40 text-red-300"
+                    : "border-gray-800 bg-gray-900 text-gray-400"
+              }`}
+            >
+              {backendOnline ? <Wifi className="h-3.5 w-3.5" /> : <WifiOff className="h-3.5 w-3.5" />}
+              {backendOnline ? "Backend online" : backendOnline === false ? "Backend offline" : "Verificando"}
+            </span>
+            <span className="inline-flex items-center gap-2 rounded-md border border-orange-900/60 bg-orange-950/40 px-3 py-2 text-xs text-orange-300">
+              <Activity className="h-3.5 w-3.5" />
+              AMD MI300X
+            </span>
+            <button
+              onClick={handleRefresh}
+              className="inline-flex items-center gap-2 rounded-md border border-gray-800 bg-gray-900 px-3 py-2 text-xs text-gray-300 transition-colors hover:bg-gray-800"
+            >
+              <RefreshCw className="h-3.5 w-3.5" />
+              Refresh
+            </button>
+          </div>
+        </div>
+      </header>
+
+      <main className="mx-auto grid max-w-[1600px] gap-6 px-4 py-6 xl:grid-cols-[360px_minmax(0,1fr)_340px]">
+        <div className="space-y-4">
+          <section className="rounded-xl border border-gray-800 bg-gray-900 p-4">
+            <h2 className="text-sm font-semibold text-white">Ingesta</h2>
+            <p className="mt-1 text-sm text-gray-400">Demo guiada y prueba rápida para validar el backend.</p>
+            <div className="mt-4">
+              <UploadPanel
+                processing={processing}
+                onProcessing={setProcessing}
+                onError={setLastError}
+                onResults={(nextSummary) => handleResults(nextSummary)}
+              />
+            </div>
+          </section>
+
+          <section className="rounded-xl border border-gray-800 bg-gray-900 p-4">
+            <h2 className="text-sm font-semibold text-white">Sesión activa</h2>
+            <dl className="mt-3 space-y-3 text-sm">
+              <div>
+                <dt className="text-gray-500">Escenario</dt>
+                <dd className="mt-1 text-gray-200">{scenarioName}</dd>
+              </div>
+              <div>
+                <dt className="text-gray-500">Session ID</dt>
+                <dd className="mt-1 break-all font-mono text-xs text-gray-300">{sessionId ?? "—"}</dd>
+              </div>
+              <div>
+                <dt className="text-gray-500">Estado</dt>
+                <dd className="mt-1 text-gray-200">{summary?.status ?? "idle"}</dd>
+              </div>
+              <div>
+                <dt className="text-gray-500">Tiempo de proceso</dt>
+                <dd className="mt-1 text-gray-200">
+                  {summary ? `${summary.processing_time_seconds.toFixed(2)} s` : "—"}
+                </dd>
+              </div>
+            </dl>
+          </section>
+        </div>
+
+        <div className="space-y-6">
+          <StatsBar total={counts.total} p0={counts.p0} p1={counts.p1} p2={counts.p2} p3={counts.p3} />
+
+          <section className="rounded-xl border border-gray-800 bg-gray-900 p-4">
+            <div className="flex flex-wrap items-center justify-between gap-3">
+              <div>
+                <h2 className="text-sm font-semibold text-white">Operational Incidents</h2>
+                <p className="mt-1 text-sm text-gray-400">
+                  {filteredIncidents.length} visibles de {incidents.length} incidentes consolidados.
+                </p>
+              </div>
+              <div className="flex items-center gap-2">
+                {FILTERS.map((option) => (
+                  <button
+                    key={option}
+                    onClick={() => setFilter(option)}
+                    className={`rounded-md px-3 py-1.5 text-xs font-semibold transition-colors ${
+                      filter === option ? "bg-white text-gray-950" : "bg-gray-950 text-gray-400 hover:bg-gray-800 hover:text-white"
+                    }`}
+                  >
+                    {option === "ALL" ? "Todos" : option}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {lastError ? (
+              <div className="mt-4 rounded-lg border border-red-900/60 bg-red-950/30 px-3 py-2 text-sm text-red-300">
+                {lastError}
+              </div>
+            ) : null}
+
+            <div className="mt-4 space-y-3">
+              {filteredIncidents.length === 0 ? (
+                <div className="rounded-xl border border-dashed border-gray-800 bg-gray-950/40 px-6 py-12 text-center">
+                  <p className="text-sm font-medium text-gray-300">Sin incidentes cargados</p>
+                  <p className="mt-1 text-sm text-gray-500">
+                    Ejecuta la demo o procesa mensajes de texto desde el panel izquierdo.
+                  </p>
+                </div>
+              ) : (
+                filteredIncidents.map((incident) => (
+                  <IncidentCard
+                    key={incident.id}
+                    incident={incident}
+                    resources={resourcesByIncident.get(incident.id) ?? []}
+                    dispatch={dispatchByIncident.get(incident.id) ?? null}
+                    onApprove={(id) =>
+                      setIncidents((prev) =>
+                        prev.map((current) => (current.id === id ? { ...current, human_approved: true } : current)),
+                      )
+                    }
+                  />
+                ))
+              )}
+            </div>
+          </section>
+        </div>
+
+        <div className="space-y-4">
+          <AMDPanel metrics={amdMetrics} />
+
+          <section className="rounded-xl border border-gray-800 bg-gray-900 p-4">
+            <div className="flex items-center gap-2">
+              <ShieldCheck className="h-4 w-4 text-emerald-400" />
+              <h2 className="text-sm font-semibold text-white">Guardrails</h2>
+            </div>
+            <ul className="mt-3 space-y-2 text-sm text-gray-400">
+              <li>Los incidentes P0 y P1 requieren aprobación humana antes de despacho.</li>
+              <li>La evidencia multimodal se mantiene vinculada al incidente consolidado.</li>
+              <li>Este sistema apoya coordinación; no sustituye respuesta médica ni emergencias oficiales.</li>
+            </ul>
+          </section>
+
+          <section className="rounded-xl border border-gray-800 bg-gray-900 p-4">
+            <h2 className="text-sm font-semibold text-white">Dispatch readiness</h2>
+            <dl className="mt-3 grid grid-cols-2 gap-3 text-sm">
+              <div className="rounded-lg border border-gray-800 bg-gray-950/60 p-3">
+                <dt className="text-gray-500">Mensajes listos</dt>
+                <dd className="mt-1 font-mono text-xl text-white">{dispatchMessages.length}</dd>
+              </div>
+              <div className="rounded-lg border border-gray-800 bg-gray-950/60 p-3">
+                <dt className="text-gray-500">Recursos activos</dt>
+                <dd className="mt-1 font-mono text-xl text-white">{resources.length}</dd>
+              </div>
+            </dl>
+          </section>
+        </div>
+      </main>
+    </div>
+  );
+}

frontend/components/AMDPanel.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { Activity, Cpu, MemoryStick, Zap } from "lucide-react";
+import type { AMDPerformanceMetric } from "@/lib/types";
+
+interface AMDPanelProps {
+  metrics: AMDPerformanceMetric | null;
+  loading?: boolean;
+}
+
+function ProgressBar({
+  value,
+  max = 100,
+  tone,
+}: {
+  value: number;
+  max?: number;
+  tone: string;
+}) {
+  const pct = Math.min(100, Math.round((value / max) * 100));
+  return (
+    <div className="h-2 overflow-hidden rounded-full bg-gray-800">
+      <div className={`h-2 rounded-full transition-all duration-500 ${tone}`} style={{ width: `${pct}%` }} />
+    </div>
+  );
+}
+
+export function AMDPanel({ metrics, loading }: AMDPanelProps) {
+  return (
+    <section className="rounded-xl border border-gray-800 bg-gray-900 p-4">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <Cpu className="h-4 w-4 text-orange-400" />
+          <h3 className="text-sm font-semibold text-white">AMD Performance</h3>
+        </div>
+        <span className="text-xs text-gray-500">{loading ? "Actualizando" : "Telemetría activa"}</span>
+      </div>
+
+      <div className="mt-3 rounded-lg border border-orange-900/50 bg-orange-950/40 px-3 py-2 text-xs text-orange-300">
+        {metrics?.model_name ?? "Modelo no disponible"}{metrics?.rocm_version ? ` · ROCm ${metrics.rocm_version}` : ""}
+      </div>
+
+      <div className="mt-4 space-y-4">
+        <div>
+          <div className="mb-1 flex items-center justify-between text-xs text-gray-400">
+            <span className="flex items-center gap-1.5">
+              <Activity className="h-3.5 w-3.5" />
+              Utilización GPU
+            </span>
+            <span className="font-mono text-orange-300">
+              {metrics ? `${metrics.gpu_utilization.toFixed(1)}%` : "—"}
+            </span>
+          </div>
+          <ProgressBar value={metrics?.gpu_utilization ?? 0} tone="bg-orange-500" />
+        </div>
+
+        <div>
+          <div className="mb-1 flex items-center justify-between text-xs text-gray-400">
+            <span className="flex items-center gap-1.5">
+              <MemoryStick className="h-3.5 w-3.5" />
+              Memoria HBM
+            </span>
+            <span className="font-mono text-purple-300">
+              {metrics ? `${metrics.memory_used_gb.toFixed(1)} / ${metrics.memory_total_gb.toFixed(0)} GB` : "—"}
+            </span>
+          </div>
+          <ProgressBar
+            value={metrics?.memory_used_gb ?? 0}
+            max={metrics?.memory_total_gb ?? 1}
+            tone="bg-purple-500"
+          />
+        </div>
+      </div>
+
+      <div className="mt-4 grid grid-cols-2 gap-2">
+        <div className="rounded-lg border border-gray-800 bg-gray-950/70 p-3">
+          <p className="flex items-center gap-1.5 text-xs text-gray-500">
+            <Zap className="h-3.5 w-3.5 text-yellow-400" />
+            Tokens/s
+          </p>
+          <p className="mt-1 font-mono text-xl font-semibold text-white">
+            {metrics ? metrics.tokens_per_second.toFixed(0) : "—"}
+          </p>
+        </div>
+        <div className="rounded-lg border border-gray-800 bg-gray-950/70 p-3">
+          <p className="text-xs text-gray-500">Latencia media</p>
+          <p className="mt-1 font-mono text-xl font-semibold text-white">
+            {metrics ? `${metrics.avg_latency_ms.toFixed(0)} ms` : "—"}
+          </p>
+        </div>
+        <div className="rounded-lg border border-gray-800 bg-gray-950/70 p-3">
+          <p className="text-xs text-gray-500">Requests</p>
+          <p className="mt-1 font-mono text-lg font-semibold text-white">
+            {metrics?.requests_processed ?? "—"}
+          </p>
+        </div>
+        <div className="rounded-lg border border-gray-800 bg-gray-950/70 p-3">
+          <p className="text-xs text-gray-500">Potencia</p>
+          <p className="mt-1 font-mono text-lg font-semibold text-white">
+            {metrics?.power_watts ? `${metrics.power_watts.toFixed(0)} W` : "—"}
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}

frontend/components/IncidentCard.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { CheckCircle2, ChevronDown, ChevronUp, FileText, Image, MapPin, Mic, Radio, Send, Table, Users } from "lucide-react";
+import { PriorityBadge } from "@/components/PriorityBadge";
+import { api } from "@/lib/api";
+import type { DispatchMessage, EvidenceItem, Incident, ResourceRecommendation } from "@/lib/types";
+
+const MODALITY_ICON: Record<string, React.ReactNode> = {
+  text: <FileText className="h-3.5 w-3.5 text-blue-400" />,
+  image: <Image className="h-3.5 w-3.5 text-purple-400" />,
+  audio: <Mic className="h-3.5 w-3.5 text-emerald-400" />,
+  csv: <Table className="h-3.5 w-3.5 text-yellow-400" />,
+  location: <MapPin className="h-3.5 w-3.5 text-cyan-400" />,
+};
+
+const STATUS_LABELS: Record<string, string> = {
+  new: "Nuevo",
+  acknowledged: "Recibido",
+  in_progress: "En progreso",
+  resolved: "Resuelto",
+};
+
+interface IncidentCardProps {
+  incident: Incident;
+  resources?: ResourceRecommendation[];
+  dispatch?: DispatchMessage | null;
+  onApprove?: (id: string) => void;
+}
+
+function EvidenceRow({ item }: { item: EvidenceItem }) {
+  return (
+    <div className="flex items-start gap-2 rounded-lg border border-gray-800 bg-gray-950/70 px-3 py-2">
+      <span className="mt-0.5 shrink-0">{MODALITY_ICON[item.modality] ?? MODALITY_ICON.text}</span>
+      <span className="text-xs leading-5 text-gray-300">{item.description}</span>
+    </div>
+  );
+}
+
+export function IncidentCard({ incident, resources = [], dispatch, onApprove }: IncidentCardProps) {
+  const [expanded, setExpanded] = useState(false);
+  const [approved, setApproved] = useState(incident.human_approved);
+  const [dispatchMessage, setDispatchMessage] = useState(dispatch?.message ?? "");
+  const [generatingDispatch, setGeneratingDispatch] = useState(false);
+
+  const confidencePct = Math.round(incident.confidence * 100);
+  const statusLabel = STATUS_LABELS[incident.status] ?? incident.status;
+  const resourceSummary = useMemo(
+    () =>
+      resources
+        .map((resource) =>
+          resource.quantity ? `${resource.quantity} ${resource.description}` : resource.description,
+        )
+        .slice(0, 3)
+        .join(" · "),
+    [resources],
+  );
+
+  async function handleApprove() {
+    try {
+      await api.approveIncident(incident.id);
+    } catch {
+      // optimistic update
+    }
+    setApproved(true);
+    onApprove?.(incident.id);
+  }
+
+  async function handleGenerateDispatch() {
+    setGeneratingDispatch(true);
+    try {
+      const res = await api.generateDispatch(incident.id);
+      setDispatchMessage(res.data?.message ?? "");
+    } finally {
+      setGeneratingDispatch(false);
+    }
+  }
+
+  return (
+    <article className="overflow-hidden rounded-xl border border-gray-800 bg-gray-900">
+      <button
+        onClick={() => setExpanded((value) => !value)}
+        className="flex w-full items-start gap-3 p-4 text-left"
+        aria-expanded={expanded}
+      >
+        <div className="shrink-0">
+          <PriorityBadge priority={incident.priority} />
+        </div>
+
+        <div className="min-w-0 flex-1">
+          <div className="flex items-start justify-between gap-4">
+            <div className="min-w-0">
+              <h3 className="truncate text-sm font-semibold text-white">{incident.title}</h3>
+              <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-gray-400">
+                <span className="flex items-center gap-1">
+                  <MapPin className="h-3 w-3" />
+                  {incident.location ?? "Ubicación no disponible"}
+                </span>
+                <span className="flex items-center gap-1">
+                  <Users className="h-3 w-3" />
+                  {incident.affected_people ?? 0} personas
+                </span>
+                <span>{statusLabel}</span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <span className="font-mono text-xs text-gray-500">{confidencePct}%</span>
+              {approved ? <CheckCircle2 className="h-4 w-4 text-emerald-400" /> : null}
+              {expanded ? <ChevronUp className="h-4 w-4 text-gray-500" /> : <ChevronDown className="h-4 w-4 text-gray-500" />}
+            </div>
+          </div>
+
+          {!expanded && resourceSummary ? (
+            <p className="mt-2 truncate text-xs text-gray-500">{resourceSummary}</p>
+          ) : null}
+        </div>
+      </button>
+
+      {expanded ? (
+        <div className="border-t border-gray-800 px-4 pb-4 pt-4">
+          <div className="grid gap-4 lg:grid-cols-[1.3fr_0.7fr]">
+            <div className="space-y-4">
+              <section>
+                <h4 className="text-xs font-semibold uppercase tracking-wide text-gray-500">Situación</h4>
+                <p className="mt-2 text-sm leading-6 text-gray-300">{incident.description}</p>
+              </section>
+
+              <section>
+                <h4 className="text-xs font-semibold uppercase tracking-wide text-gray-500">
+                  Evidencia ({incident.evidence.length})
+                </h4>
+                <div className="mt-2 space-y-2">
+                  {incident.evidence.map((item) => (
+                    <EvidenceRow key={item.id} item={item} />
+                  ))}
+                </div>
+              </section>
+            </div>
+
+            <div className="space-y-4">
+              <section className="rounded-lg border border-gray-800 bg-gray-950/70 p-3">
+                <h4 className="text-xs font-semibold uppercase tracking-wide text-gray-500">Recursos sugeridos</h4>
+                {resources.length > 0 ? (
+                  <div className="mt-2 space-y-2">
+                    {resources.map((resource) => (
+                      <div key={resource.id} className="rounded-md border border-gray-800 bg-gray-900 px-3 py-2">
+                        <p className="text-sm font-medium text-white">
+                          {resource.quantity ? `${resource.quantity} ` : ""}
+                          {resource.description}
+                        </p>
+                        <p className="mt-1 text-xs text-gray-400">
+                          {resource.urgency} · {resource.rationale}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <p className="mt-2 text-xs text-gray-500">Sin recursos asociados en esta sesión.</p>
+                )}
+              </section>
+
+              <section className="rounded-lg border border-gray-800 bg-gray-950/70 p-3">
+                <div className="flex items-center justify-between gap-3">
+                  <h4 className="text-xs font-semibold uppercase tracking-wide text-gray-500">
+                    Mensaje de despacho
+                  </h4>
+                  <button
+                    onClick={handleGenerateDispatch}
+                    disabled={generatingDispatch}
+                    className="inline-flex items-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-500 disabled:opacity-60"
+                  >
+                    <Send className="h-3.5 w-3.5" />
+                    {generatingDispatch ? "Generando" : "Generar"}
+                  </button>
+                </div>
+                <div className="mt-2 rounded-md border border-gray-800 bg-gray-900 p-3 text-xs leading-5 text-gray-300">
+                  {dispatchMessage || "Todavía no hay mensaje generado para este incidente."}
+                </div>
+              </section>
+
+              <div className="flex items-center justify-between gap-3">
+                <div className="inline-flex items-center gap-2 rounded-md border border-gray-800 bg-gray-950/70 px-3 py-2 text-xs text-gray-400">
+                  <Radio className="h-3.5 w-3.5 text-orange-400" />
+                  Human-in-the-loop requerido para despacho crítico
+                </div>
+                <button
+                  onClick={handleApprove}
+                  disabled={approved}
+                  className={`inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-semibold transition-colors ${
+                    approved ? "bg-emerald-900/50 text-emerald-300" : "bg-emerald-600 text-white hover:bg-emerald-500"
+                  }`}
+                >
+                  <CheckCircle2 className="h-4 w-4" />
+                  {approved ? "Aprobado" : "Aprobar"}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </article>
+  );
+}

frontend/components/PriorityBadge.tsx

@@ -0,0 +1,18 @@
+import type { Priority } from "@/lib/types";
+
+const PRIORITY_CONFIG: Record<Priority, { bg: string; text: string; label: string }> = {
+  P0: { bg: "bg-red-600/90", text: "text-white", label: "P0" },
+  P1: { bg: "bg-orange-500/90", text: "text-white", label: "P1" },
+  P2: { bg: "bg-yellow-500/90", text: "text-gray-950", label: "P2" },
+  P3: { bg: "bg-emerald-500/90", text: "text-white", label: "P3" },
+};
+
+export function PriorityBadge({ priority }: { priority: Priority }) {
+  const cfg = PRIORITY_CONFIG[priority];
+
+  return (
+    <span className={`inline-flex min-w-11 items-center justify-center rounded-md px-2.5 py-1 text-xs font-bold ${cfg.bg} ${cfg.text}`}>
+      {cfg.label}
+    </span>
+  );
+}

frontend/components/StatsBar.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+interface StatsBarProps {
+  total: number;
+  p0: number;
+  p1: number;
+  p2: number;
+  p3: number;
+}
+
+function StatTile({
+  label,
+  value,
+  accent,
+  tone,
+}: {
+  label: string;
+  value: number;
+  accent: string;
+  tone: string;
+}) {
+  return (
+    <div className={`rounded-xl border p-4 ${accent}`}>
+      <p className="text-xs uppercase tracking-wide text-gray-500">{label}</p>
+      <p className={`mt-2 font-mono text-3xl font-semibold ${tone}`}>{value}</p>
+    </div>
+  );
+}
+
+export function StatsBar({ total, p0, p1, p2, p3 }: StatsBarProps) {
+  return (
+    <div className="grid grid-cols-2 gap-3 xl:grid-cols-5">
+      <StatTile label="Total" value={total} accent="border-gray-800 bg-gray-900" tone="text-white" />
+      <StatTile label="P0 crítico" value={p0} accent="border-red-900/60 bg-red-950/40" tone="text-red-300" />
+      <StatTile label="P1 urgente" value={p1} accent="border-orange-900/60 bg-orange-950/40" tone="text-orange-300" />
+      <StatTile label="P2 moderado" value={p2} accent="border-yellow-900/60 bg-yellow-950/30" tone="text-yellow-200" />
+      <StatTile label="P3 bajo" value={p3} accent="border-emerald-900/60 bg-emerald-950/30" tone="text-emerald-300" />
+    </div>
+  );
+}

frontend/components/UploadPanel.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { AlertCircle, FileText, Loader2, Play, SendHorizontal } from "lucide-react";
+import { api } from "@/lib/api";
+import type { CrisisRoomSummary } from "@/lib/types";
+
+interface UploadPanelProps {
+  onResults: (summary: CrisisRoomSummary, demoMode: boolean) => void;
+  onProcessing: (processing: boolean) => void;
+  processing: boolean;
+  onError?: (message: string) => void;
+}
+
+const QUICK_TEST_MESSAGES = [
+  "Hay una familia atrapada en el techo de una casa en Barrio Santa Ana, el agua sigue subiendo.",
+  "Adulto mayor con posible fractura en el centro comunitario, necesita atención médica.",
+  "Tenemos 20 personas refugiadas en la escuela, falta agua potable.",
+];
+
+export function UploadPanel({
+  onResults,
+  onProcessing,
+  processing,
+  onError,
+}: UploadPanelProps) {
+  const [rawMessages, setRawMessages] = useState(QUICK_TEST_MESSAGES.join("\n"));
+  const messages = useMemo(
+    () => rawMessages.split("\n").map((line) => line.trim()).filter(Boolean),
+    [rawMessages],
+  );
+
+  async function handleLoadDemo() {
+    onProcessing(true);
+    try {
+      const res = await api.runDemo();
+      onResults(res.data as CrisisRoomSummary, false);
+    } catch {
+      onError?.("No se pudo ejecutar el escenario demo. Verifica que el backend esté disponible.");
+    } finally {
+      onProcessing(false);
+    }
+  }
+
+  async function handleQuickProcess() {
+    if (messages.length === 0) {
+      return;
+    }
+
+    const sessionId = crypto.randomUUID();
+    const payload = {
+      session_id: sessionId,
+      scenario_name: "Quick Manual Intake",
+      reports: messages.map((content) => ({
+        id: crypto.randomUUID(),
+        session_id: sessionId,
+        report_type: "text",
+        content,
+        metadata: { source: "frontend_quick_test" },
+        created_at: new Date().toISOString(),
+      })),
+    };
+
+    onProcessing(true);
+    try {
+      const res = await api.processBatch(payload);
+      onResults(res.data as CrisisRoomSummary, false);
+    } catch {
+      onError?.("No se pudo procesar la prueba rápida. Revisa la conexión con el backend.");
+    } finally {
+      onProcessing(false);
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-lg border border-gray-800 bg-gray-950/60 p-3">
+        <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
+          Demo recomendada
+        </p>
+        <p className="mt-1 text-sm leading-6 text-gray-300">
+          Ejecuta el escenario Santa Ana para mostrar la tubería completa: ingestión, normalización,
+          deduplicación, prioridad, recursos y despacho.
+        </p>
+        <button
+          onClick={handleLoadDemo}
+          disabled={processing}
+          className="mt-3 flex w-full items-center justify-center gap-2 rounded-lg bg-orange-600 px-4 py-3 text-sm font-semibold text-white transition-colors hover:bg-orange-500 disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          {processing ? <Loader2 className="h-4 w-4 animate-spin" /> : <Play className="h-4 w-4" />}
+          Ejecutar Demo Santa Ana
+        </button>
+      </div>
+
+      <div className="rounded-lg border border-gray-800 bg-gray-950/60 p-3">
+        <div className="flex items-start gap-2">
+          <FileText className="mt-0.5 h-4 w-4 text-blue-400" />
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">
+              Prueba rápida
+            </p>
+            <p className="mt-1 text-sm leading-6 text-gray-300">
+              Pega mensajes de texto separados por línea para validar el backend sin depender del
+              dataset demo.
+            </p>
+          </div>
+        </div>
+
+        <textarea
+          value={rawMessages}
+          onChange={(e) => setRawMessages(e.target.value)}
+          rows={8}
+          className="mt-3 w-full resize-none rounded-lg border border-gray-800 bg-gray-900 px-3 py-3 text-sm text-gray-100 outline-none ring-0 placeholder:text-gray-500 focus:border-blue-600"
+          placeholder="Un reporte por línea"
+        />
+
+        <div className="mt-3 flex items-center justify-between gap-3">
+          <div className="flex items-center gap-2 text-xs text-gray-400">
+            <AlertCircle className="h-3.5 w-3.5" />
+            <span>{messages.length} mensajes listos para procesar</span>
+          </div>
+          <button
+            onClick={handleQuickProcess}
+            disabled={processing || messages.length === 0}
+            className="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-blue-500 disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            {processing ? <Loader2 className="h-4 w-4 animate-spin" /> : <SendHorizontal className="h-4 w-4" />}
+            Procesar texto
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/dev.log

@@ -0,0 +1,17 @@
+
+> frontend@0.1.0 dev
+> next dev -p 3000
+
+Error: spawn EPERM
+    at ChildProcess.spawn (node:internal/child_process:421:11)
+    at spawn (node:child_process:796:9)
+    at fork (node:child_process:174:10)
+    at C:\Users\Acer\Hackathon\ReliefLensAI\frontend\node_modules\next\dist\cli\next-dev.js:253:45
+    at new Promise (<anonymous>)
+    at startServer (C:\Users\Acer\Hackathon\ReliefLensAI\frontend\node_modules\next\dist\cli\next-dev.js:221:16)
+    at runDevServer (C:\Users\Acer\Hackathon\ReliefLensAI\frontend\node_modules\next\dist\cli\next-dev.js:355:23)
+    at Module.nextDev (C:\Users\Acer\Hackathon\ReliefLensAI\frontend\node_modules\next\dist\cli\next-dev.js:363:11) {
+  errno: -4048,
+  code: 'EPERM',
+  syscall: 'spawn'
+}

frontend/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

frontend/lib/api.ts

@@ -0,0 +1,22 @@
+import axios from "axios";
+
+const BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8080";
+
+export const api = {
+  getHealth: () => axios.get(`${BASE_URL}/health`),
+  runDemo: () => axios.post(`${BASE_URL}/api/demo/run`),
+  getDemoScenario: () => axios.get(`${BASE_URL}/api/demo/scenario`),
+  processBatch: (payload: unknown) => axios.post(`${BASE_URL}/api/reports/process`, payload),
+  getIncidents: (sessionId?: string) =>
+    axios.get(`${BASE_URL}/api/incidents`, {
+      params: sessionId ? { session_id: sessionId } : {},
+    }),
+  getIncident: (id: string) => axios.get(`${BASE_URL}/api/incidents/${id}`),
+  approveIncident: (id: string) =>
+    axios.patch(`${BASE_URL}/api/incidents/${id}`, { human_approved: true }),
+  generateDispatch: (id: string) =>
+    axios.post(`${BASE_URL}/api/incidents/${id}/dispatch-message`),
+  getAMDMetrics: () => axios.get(`${BASE_URL}/api/amd/performance`),
+  getCrisisRoom: (sessionId: string) =>
+    axios.get(`${BASE_URL}/api/crisis-room/${sessionId}`),
+};

frontend/lib/types.ts

@@ -0,0 +1,85 @@
+export type Priority = "P0" | "P1" | "P2" | "P3";
+
+export type IncidentStatus = "new" | "acknowledged" | "in_progress" | "resolved";
+
+export interface Coordinates {
+  lat: number;
+  lon: number;
+}
+
+export interface EvidenceItem {
+  id: string;
+  report_id?: string;
+  modality: "text" | "image" | "audio" | "csv" | "location" | "video";
+  description: string;
+  file_path?: string | null;
+  timestamp?: string;
+}
+
+export interface ResourceRecommendation {
+  id: string;
+  incident_id: string;
+  resource_type: string;
+  description: string;
+  quantity?: number | null;
+  urgency: string;
+  rationale: string;
+}
+
+export interface DispatchMessage {
+  id: string;
+  incident_id: string;
+  channel: string;
+  message: string;
+  brigade_target?: string | null;
+  created_at?: string;
+  approved?: boolean;
+}
+
+export interface Incident {
+  id: string;
+  session_id?: string;
+  title: string;
+  description: string;
+  priority: Priority;
+  status: IncidentStatus;
+  signal_ids?: string[];
+  evidence: EvidenceItem[];
+  location?: string | null;
+  coordinates?: Coordinates | null;
+  affected_people?: number | null;
+  confidence: number;
+  created_at: string;
+  updated_at?: string;
+  human_approved: boolean;
+  notes?: string | null;
+}
+
+export interface AMDPerformanceMetric {
+  timestamp?: string;
+  gpu_utilization: number;
+  memory_used_gb: number;
+  memory_total_gb: number;
+  tokens_per_second: number;
+  requests_processed: number;
+  avg_latency_ms: number;
+  model_name: string;
+  rocm_version?: string | null;
+  power_watts?: number | null;
+}
+
+export interface CrisisRoomSummary {
+  session_id: string;
+  scenario_name: string;
+  total_reports: number;
+  total_signals: number;
+  total_incidents: number;
+  incidents_by_priority: Record<string, number>;
+  critical_incidents: Incident[];
+  resource_recommendations: ResourceRecommendation[];
+  dispatch_messages: DispatchMessage[];
+  amd_metrics?: AMDPerformanceMetric | null;
+  processing_time_seconds: number;
+  created_at: string;
+  status: string;
+}

frontend/next.config.ts

@@ -0,0 +1,10 @@
+import type { NextConfig } from "next";
+import path from "node:path";
+
+const nextConfig: NextConfig = {
+  turbopack: {
+    root: path.join(__dirname),
+  },
+};
+
+export default nextConfig;

frontend/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3000",
+    "build": "next build",
+    "start": "next start -p 3000",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.100.9",
+    "axios": "^1.16.0",
+    "lucide-react": "^1.14.0",
+    "next": "16.2.4",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "recharts": "^3.8.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.4",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

frontend/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

frontend/start.log

@@ -0,0 +1,15 @@
+
+> frontend@0.1.0 start
+> next start -p 3000
+
+▲ Next.js 16.2.4
+- Local:         http://localhost:3000
+- Network:       http://172.23.64.1:3000
+✓ Ready in 533ms
+⚠ Warning: Next.js inferred your workspace root, but it may not be correct.
+ We detected multiple lockfiles and selected the directory of C:\Users\Acer\package-lock.json as the root directory.
+ To silence this warning, set `outputFileTracingRoot` in your Next.js config, or consider removing one of the lockfiles if it's not needed.
+   See https://nextjs.org/docs/app/api-reference/config/next-config-js/output#caveats for more information.
+ Detected additional lockfiles: 
+   * C:\Users\Acer\Hackathon\ReliefLensAI\frontend\package-lock.json
+

frontend/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}