wadi 1.0.0

package/apps/frontend/src/components/Sidebar.tsx

@@ -0,0 +1,171 @@
+import { useNavigate, useLocation } from "react-router-dom";
+import { useAuthStore } from "../store/authStore";
+import { useChatStore } from "../store/chatStore";
+import { useEffect, useState } from "react";
+import { MessageSquare, Plus, LogOut, Settings, User } from "lucide-react";
+import { SettingsModal } from "./SettingsModal";
+
+interface SidebarProps {
+  isOpen?: boolean;
+  onClose?: () => void;
+  className?: string; // Kept for compat
+}
+
+export function Sidebar({ isOpen, onClose }: SidebarProps) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { user, signOut } = useAuthStore();
+  const {
+    conversations,
+    fetchConversations,
+    loadConversation,
+    resetChat,
+    setSidebarOpen,
+    deleteConversation,
+    fetchCriminalSummary,
+  } = useChatStore();
+
+  useEffect(() => {
+    if (user?.id) {
+      fetchConversations();
+      fetchCriminalSummary();
+    }
+  }, [user?.id, fetchConversations, fetchCriminalSummary]);
+
+  const handleNewChat = () => {
+    resetChat();
+    navigate("/chat");
+    onClose?.();
+  };
+
+  const handleHistoryClick = (id: string) => {
+    loadConversation(id);
+    navigate(`/chat/${id}`);
+    onClose?.();
+    setSidebarOpen(false);
+  };
+
+  const handleDelete = async (e: React.MouseEvent, id: string) => {
+    e.stopPropagation();
+    if (confirm("¿Borrar chat?")) {
+      await deleteConversation(id);
+      if (location.pathname.includes(id)) {
+        navigate("/chat");
+      }
+      fetchConversations();
+    }
+  };
+
+  const [showSettings, setShowSettings] = useState(false);
+
+  return (
+    <aside
+      className={`sidebar-drawer ${
+        isOpen ? "open" : ""
+      } flex flex-col h-full bg-[var(--wadi-surface)] backdrop-blur-xl border-r border-[var(--wadi-border)] w-[280px] shadow-2xl z-50 transition-all duration-300`}
+    >
+      {/* HEADER */}
+      <div className="p-6 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-xl bg-gradient-to-br from-[#8B5CF6] to-[#38bdf8] flex items-center justify-center shadow-md text-white font-bold text-xs">
+            W
+          </div>
+          <h1 className="font-['Outfit'] text-lg font-bold text-[var(--wadi-text)] tracking-tight">
+            WADI
+          </h1>
+        </div>
+        <button
+          onClick={handleNewChat}
+          className="p-2 bg-[var(--wadi-surface)] hover:bg-[var(--wadi-surface-hover)] border border-[var(--wadi-border)] rounded-lg shadow-sm text-[var(--wadi-text-dim)] hover:text-[#8B5CF6] transition-all"
+          title="Nuevo Chat"
+        >
+          <Plus size={18} />
+        </button>
+      </div>
+
+      {/* CHAT LIST */}
+      <div className="flex-1 overflow-y-auto px-4 space-y-2 py-2">
+        <h3 className="text-xs font-semibold text-[var(--wadi-text-dim)] uppercase tracking-wider px-2 mb-2">
+          Conversaciones
+        </h3>
+        {conversations && conversations.length > 0 ? (
+          conversations.map((c) => {
+            const isActive = location.pathname.includes(c.id);
+            return (
+              <div
+                key={c.id}
+                onClick={() => handleHistoryClick(c.id)}
+                className={`group flex items-center gap-3 p-3 rounded-xl cursor-pointer transition-all duration-200 ${
+                  isActive
+                    ? "bg-[var(--wadi-surface-hover)] shadow-sm border border-[var(--wadi-border)]"
+                    : "hover:bg-[var(--wadi-surface-hover)] hover:shadow-xs border border-transparent"
+                }`}
+              >
+                <MessageSquare
+                  size={16}
+                  className={
+                    isActive
+                      ? "text-[#8B5CF6]"
+                      : "text-[var(--wadi-text-dim)] group-hover:text-[var(--wadi-text)]"
+                  }
+                />
+                <div className="flex-1 overflow-hidden">
+                  <p
+                    className={`text-sm truncate ${
+                      isActive
+                        ? "font-medium text-[var(--wadi-text)]"
+                        : "text-[var(--wadi-text-muted)]"
+                    }`}
+                  >
+                    {c.title || "Nueva Conversación"}
+                  </p>
+                </div>
+                <button
+                  onClick={(e) => handleDelete(e, c.id)}
+                  className="opacity-0 group-hover:opacity-100 text-[var(--wadi-text-dim)] hover:text-red-400 transition-opacity"
+                >
+                  ×
+                </button>
+              </div>
+            );
+          })
+        ) : (
+          <div className="text-center py-10 text-[var(--wadi-text-dim)] text-sm italic">
+            Sin chats recientes.
+          </div>
+        )}
+      </div>
+
+      {/* USER FOOTER */}
+      <div className="p-4 border-t border-[var(--wadi-border)] bg-[var(--wadi-surface)] backdrop-blur-md">
+        <div className="flex items-center gap-3 p-2 rounded-xl hover:bg-[var(--wadi-surface-hover)] transition-colors">
+          <div className="w-9 h-9 rounded-full bg-slate-700 flex items-center justify-center text-slate-300">
+            <User size={16} />
+          </div>
+          <div className="flex-1 overflow-hidden">
+            <p className="text-sm font-medium text-[var(--wadi-text)] truncate">
+              {user?.email?.split("@")[0] || "Usuario"}
+            </p>
+            <p className="text-[10px] text-[var(--wadi-text-dim)]">En línea</p>
+          </div>
+          <div className="flex gap-1">
+            <button
+              onClick={() => setShowSettings(true)}
+              className="p-1.5 text-[var(--wadi-text-dim)] hover:text-[#8B5CF6] hover:bg-purple-900/20 rounded-lg transition-colors"
+            >
+              <Settings size={16} />
+            </button>
+            <button
+              onClick={() => signOut()}
+              className="p-1.5 text-[var(--wadi-text-dim)] hover:text-red-500 hover:bg-red-900/20 rounded-lg transition-colors"
+            >
+              <LogOut size={16} />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {showSettings && <SettingsModal onClose={() => setShowSettings(false)} />}
+    </aside>
+  );
+}

package/apps/frontend/src/components/WadiOnboarding.tsx

@@ -0,0 +1,71 @@
+import { useState, useEffect } from "react";
+
+export type WadiMood = "hostile" | "mildly_disappointed" | "training_wheels";
+
+interface WadiOnboardingProps {
+  mood?: WadiMood;
+}
+
+export default function WadiOnboarding({
+  mood = "hostile",
+}: WadiOnboardingProps) {
+  const [step, setStep] = useState(0);
+
+  const messagesByMood: Record<WadiMood, string[]> = {
+    hostile: [
+      "*⌛ Cargando paciencia... ERROR 404*",
+      "🧠 WADI activo (a regañadientes).",
+      "No estoy acá para mimarte,",
+      "estoy para que dejes de mentirte.",
+      "➡️ Decime qué rompiste hoy,",
+      "🌀 o volvé cuando tengas un plan real.",
+    ],
+    mildly_disappointed: [
+      "*⌛ WADI está despertando de su siesta funcional...*",
+      "🧠 WADI activo.",
+      "Esto puede doler menos si cooperás.",
+      "Tomemos una decisión antes de que vuelva la confusión.",
+      "📌 ¿Por dónde empezamos?",
+      "📉 O seguí divagando, pero sin mí.",
+    ],
+    training_wheels: [
+      "*⌛ Preparando el espacio para ordenar tus ideas...*",
+      "🧠 Hola, soy WADI.",
+      "Estoy acá para ayudarte a decidir sin drama.",
+      "Podemos ir paso a paso, sin presión.",
+      "🗺️ Empezamos cuando quieras.",
+      "☕ O tomamos un respiro y seguimos después.",
+    ],
+  };
+
+  const messages = messagesByMood[mood] || messagesByMood.hostile;
+
+  useEffect(() => {
+    if (step < messages.length - 1) {
+      const timer = setTimeout(() => setStep(step + 1), 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [step, messages.length]);
+
+  return (
+    <div className="whitespace-pre-wrap font-mono text-sm leading-relaxed p-4 rounded-xl bg-[var(--color-surface)] border border-[var(--color-border)] w-[90vw] max-w-lg mx-auto mt-10 text-[var(--color-text-main)] flex flex-col">
+      {messages.slice(0, step + 1).map((line, index) => (
+        <p
+          key={index}
+          style={{
+            marginBottom: "0.25rem",
+            color: index === 0 ? "var(--color-text-soft)" : "inherit",
+          }}
+        >
+          {index === 0 ? (
+            <span className="animate-pulse">{line}</span>
+          ) : index === 1 ? (
+            <strong>{line}</strong>
+          ) : (
+            line
+          )}
+        </p>
+      ))}
+    </div>
+  );
+}

package/apps/frontend/src/components/auditor/AuditReport.tsx

@@ -0,0 +1,166 @@
+import { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { Button } from "../ui/Button";
+import { API_URL } from "../../store/chatStore";
+import { useAuthStore } from "../../store/authStore";
+import { useScouter } from "../../hooks/useScouter";
+import { supabase } from "../../config/supabase";
+
+interface Vulnerability {
+  level: "HIGH" | "MEDIUM" | "LOW";
+  title: string;
+  description: string;
+}
+
+export function AuditReport() {
+  const { conversationId } = useParams();
+  const navigate = useNavigate();
+  const { user } = useAuthStore();
+  const { playAlertSound } = useScouter();
+
+  const [vulnerabilities, setVulnerabilities] = useState<Vulnerability[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!conversationId || !user) return; // Wait for user
+
+    const fetchAudit = async () => {
+      setIsLoading(true);
+      try {
+        const { data: sessionData } = await supabase.auth.getSession();
+        const token = sessionData.session?.access_token;
+        if (!token) throw new Error("NO_AUTH_TOKEN");
+
+        const res = await fetch(
+          `${API_URL}/api/conversations/${conversationId}/audit`,
+          {
+            headers: { Authorization: `Bearer ${token}` },
+          }
+        );
+
+        if (!res.ok) throw new Error("AUDIT_REFUSED_BY_SYSTEM");
+
+        const jsonData = await res.json();
+        setVulnerabilities(jsonData.vulnerabilities || []);
+      } catch (err) {
+        console.error(err);
+        setError("ERROR DE CONEXIÓN VITAL: No pude sincronizar con tu estado.");
+        playAlertSound();
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchAudit();
+  }, [conversationId, user, playAlertSound]);
+
+  if (isLoading) {
+    return (
+      <div className="fixed inset-0 z-50 bg-[#0f111a] flex flex-col items-center justify-center p-4">
+        <div className="animate-pulse text-[var(--wadi-primary)] font-mono-wadi text-xl tracking-[0.3em] uppercase">
+          [SINCRONIZANDO REALIDAD...]
+        </div>
+        <div className="mt-4 w-64 h-1 bg-[var(--wadi-surface)] overflow-hidden rounded-full">
+          <div className="h-full bg-[var(--wadi-primary)] animate-[shimmer_1s_infinite] w-1/3 rounded-full"></div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="fixed inset-0 z-50 bg-black flex flex-col items-center justify-center p-4">
+        <h1 className="text-[var(--wadi-text-muted)] text-xl font-bold font-mono-wadi mb-4">
+          DESCONEXIÓN
+        </h1>
+        <p className="text-white font-mono-wadi text-sm">{error}</p>
+        <Button
+          onClick={() => navigate(-1)}
+          className="mt-8 bg-[var(--wadi-surface)] text-white hover:bg-[var(--wadi-surface)]/80"
+        >
+          [VOLVER AL REFUGIO]
+        </Button>
+      </div>
+    );
+  }
+
+  const highRiskCount = vulnerabilities.filter(
+    (v) => v.level === "HIGH"
+  ).length;
+  const riskPercentage = Math.min(
+    100,
+    vulnerabilities.length * 20 + highRiskCount * 15
+  );
+
+  return (
+    <div className="fixed inset-0 z-50 bg-[#0f111a] flex flex-col items-center justify-center p-4 animate-in fade-in duration-500">
+      {/* HEADER */}
+      <div className="w-full max-w-2xl border-b border-[var(--wadi-primary)]/30 pb-4 mb-8 flex justify-between items-end">
+        <div>
+          <h1 className="text-3xl font-light font-['Outfit'] text-[var(--wadi-primary)] tracking-widest uppercase">
+            Mapa de Distorsión
+          </h1>
+          <p className="text-[var(--wadi-text-muted)] mt-2 font-mono-wadi text-xs uppercase">
+            REF: {conversationId?.split("-")[0]} // ESTADO:{" "}
+            {highRiskCount > 0 ? "DISTORSIÓN ACTIVA" : "LÚCIDO"}
+          </p>
+        </div>
+        <div className="text-right">
+          <div className="text-4xl font-bold text-white font-['Outfit']">
+            {riskPercentage}%
+          </div>
+          <div className="text-[var(--wadi-text-muted)] text-[10px] uppercase tracking-widest mt-1">
+            NIVEL DE AUTOENGAÑO
+          </div>
+        </div>
+      </div>
+
+      {/* VULNERABILITIES LIST */}
+      <div className="w-full max-w-2xl space-y-4 max-h-[60vh] overflow-y-auto pr-2 custom-scrollbar">
+        {vulnerabilities.length === 0 ? (
+          <div className="text-center py-12 text-[var(--wadi-text-muted)] font-mono-wadi border border-dashed border-[var(--wadi-border)] bg-[var(--wadi-surface)]/20 rounded-sm">
+            [TODO CLARO. ESTÁS SIENDO HONESTO CON VOS MISMO.]
+          </div>
+        ) : (
+          vulnerabilities.map((vuln, idx) => (
+            <div
+              key={idx}
+              className={`
+                        border-l-2 p-6 bg-[var(--wadi-surface)]/30 relative overflow-hidden group rounded-r-sm hover:bg-[var(--wadi-surface)]/50 transition-colors
+                        ${vuln.level === "HIGH" ? "border-[var(--wadi-alert)]" : "border-[var(--wadi-primary)]"}
+                    `}
+            >
+              <div className="flex justify-between items-start mb-3">
+                <span
+                  className={`
+                            font-mono-wadi text-[10px] px-2 py-0.5 font-bold tracking-wider uppercase
+                            ${vuln.level === "HIGH" ? "text-[var(--wadi-alert)] bg-[var(--wadi-alert)]/10" : "text-[var(--wadi-primary)] bg-[var(--wadi-primary)]/10"}
+                        `}
+                >
+                  {vuln.level === "HIGH" ? "ZONA CIEGA CRÍTICA" : "DISTORSIÓN"}
+                </span>
+              </div>
+              <h3 className="font-['Outfit'] text-lg font-medium text-white mb-2">
+                {vuln.title}
+              </h3>
+              <p className="text-[var(--wadi-text-muted)] text-sm font-light leading-relaxed">
+                {vuln.description}
+              </p>
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* ACTIONS */}
+      <div className="w-full max-w-2xl mt-8 flex justify-end gap-4">
+        <Button
+          className="border border-[var(--wadi-text-muted)] text-[var(--wadi-text-muted)] hover:text-white"
+          onClick={() => navigate(-1)}
+        >
+          [CERRAR MAPA]
+        </Button>
+      </div>
+    </div>
+  );
+}

package/apps/frontend/src/components/auditor/AuditorHeader.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+export const AuditorHeader: React.FC = () => {
+  return (
+    <header className="fixed top-0 left-0 w-full h-[60px] bg-[var(--monday-bg)]/90 backdrop-blur-md border-b border-[var(--monday-border)] z-40 flex items-center justify-between px-6">
+      <div className="flex items-center gap-3">
+        <div className="w-8 h-8 flex items-center justify-center border border-[var(--monday-primary)] rounded-full animate-pulse-soft">
+          <div className="w-2 h-2 bg-[var(--monday-primary)] rounded-full"></div>
+        </div>
+        <div>
+          <h1 className="text-xl font-bold tracking-tighter text-white font-mono leading-none">
+            MONDAY<span className="text-[var(--monday-primary)]">::OS</span>
+          </h1>
+          <div className="flex items-center gap-2">
+            <span className="w-1.5 h-1.5 bg-green-500 rounded-full animate-blink block"></span>
+            <span className="text-[9px] text-[var(--monday-text-dim)] tracking-widest uppercase font-mono">
+              ONLINE // V3.0
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Decorative Status */}
+      <div className="hidden md:flex gap-4 font-mono text-[10px] text-[var(--monday-text-dim)]">
+        <span className="border px-2 py-1 border-[var(--monday-border)] rounded">
+          MEM: 64TB
+        </span>
+        <span className="border px-2 py-1 border-[var(--monday-border)] rounded text-[var(--monday-primary)]">
+          UPLINK: SECURE
+        </span>
+      </div>
+    </header>
+  );
+};

package/apps/frontend/src/components/auditor/ContextPanel.tsx

@@ -0,0 +1,138 @@
+import { useChatStore } from "../../store/chatStore";
+import { Target, AlertTriangle } from "lucide-react";
+import { useMemo } from "react";
+
+export function ContextPanel() {
+  const { messages, activeFocus, rank, points } = useChatStore();
+
+  // Extract diagnoses from messages
+  const diagnoses = useMemo(() => {
+    return messages
+      .filter((m) => m.diagnosis)
+      .map((m) => ({
+        id: m.id,
+        parsed: m.diagnosis?.replace(/_/g, " "),
+        timestamp: m.created_at,
+      }))
+      .reverse(); // Newest first
+  }, [messages]);
+
+  /*
+  // Future V2: Extract implied commitments
+  const commitments = useMemo(() => {
+    // ...
+  }, [activeFocus]);
+  */
+
+  return (
+    <div className="flex flex-col h-full p-6 gap-8 bg-zinc-50/50">
+      {/* HEADER */}
+      <div className="flex flex-col gap-1">
+        <h2 className="text-sm font-bold tracking-tight text-zinc-900 uppercase">
+          Tablero de Control
+        </h2>
+        <span className="text-[10px] text-zinc-500 font-medium tracking-wide">
+          FACT SHEET & METRICS
+        </span>
+      </div>
+
+      {/* 1. ACTIVE FOCUS CARD */}
+      <div
+        className={`p-4 bg-white rounded-2xl shadow-sm border relative overflow-hidden group transition-colors duration-500 ${activeFocus ? "border-amber-400/30" : "border-zinc-200/60"}`}
+      >
+        <div
+          className={`absolute top-0 left-0 w-1 h-full transition-colors duration-500 ${activeFocus ? "bg-amber-500" : "bg-zinc-300"}`}
+        ></div>
+        <div className="flex items-start justify-between mb-2">
+          <div className="flex items-center gap-2 text-zinc-600">
+            <Target
+              size={14}
+              className={
+                activeFocus ? "text-amber-600 animate-pulse" : "text-zinc-400"
+              }
+            />
+            <span
+              className={`text-[10px] font-bold uppercase tracking-wider ${activeFocus ? "text-amber-700" : "text-zinc-400"}`}
+            >
+              {activeFocus ? "Foco Pendiente" : "Sin Objetivo"}
+            </span>
+          </div>
+          {activeFocus && (
+            <span className="flex h-2 w-2 rounded-full bg-amber-500 animate-[pulse_3s_infinite]" />
+          )}
+        </div>
+        <p className="text-sm font-medium text-zinc-800 leading-snug">
+          {activeFocus || "El sistema espera una declaración de intención."}
+        </p>
+      </div>
+
+      {/* 2. DIAGNOSIS LOG */}
+      <div className="flex flex-col gap-3 flex-1 min-h-0">
+        <div className="flex items-center justify-between text-zinc-500">
+          <div className="flex items-center gap-2">
+            <AlertTriangle size={14} />
+            <span className="text-[10px] font-bold uppercase tracking-wider">
+              Historial Clínico
+            </span>
+          </div>
+          <span className="text-[10px] bg-zinc-200 px-1.5 py-0.5 rounded-full">
+            {diagnoses.length}
+          </span>
+        </div>
+
+        <div className="flex flex-col gap-2 overflow-y-auto pr-2 -mr-2">
+          {diagnoses.length === 0 ? (
+            <div className="p-4 border border-dashed border-zinc-200 rounded-xl text-center">
+              <span className="text-xs text-zinc-400">
+                Sin anomalías detectadas.
+              </span>
+            </div>
+          ) : (
+            diagnoses.map((diag) => (
+              <div
+                key={diag.id}
+                className="p-3 bg-red-50/50 border border-red-100 rounded-xl flex flex-col gap-1"
+              >
+                <div className="flex items-center justify-between">
+                  <span className="text-[10px] font-bold text-red-700 uppercase">
+                    {diag.parsed}
+                  </span>
+                  <span className="text-[9px] text-red-400 opacity-60">
+                    {diag.timestamp
+                      ? new Date(diag.timestamp).toLocaleTimeString([], {
+                          hour: "2-digit",
+                          minute: "2-digit",
+                        })
+                      : ""}
+                  </span>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* 3. METRICS FOOTER */}
+      <div className="mt-auto pt-6 border-t border-zinc-200 flex flex-col gap-4">
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-zinc-500 font-medium">Eficiencia</span>
+          <span className="text-sm font-bold font-mono text-zinc-900">
+            {points} PTS
+          </span>
+        </div>
+        <div className="w-full bg-zinc-200 h-1.5 rounded-full overflow-hidden">
+          {/* Visual progress bar based on points (clamped 0-1000) */}
+          <div
+            className="h-full bg-zinc-800 transition-all duration-500"
+            style={{
+              width: `${Math.min(Math.max((points / 1000) * 100, 5), 100)}%`,
+            }}
+          />
+        </div>
+        <div className="flex items-center gap-2 text-[10px] text-zinc-400 uppercase tracking-widest justify-center">
+          <span>Rango: {rank.replace(/_/g, " ")}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/apps/frontend/src/components/auditor/DataDeconstructor.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { MondayCard } from "../ui/MondayCard";
+
+interface DeconstructItem {
+  item: string;
+  category: "CRÍTICO" | "RUIDO" | "VULNERABILIDAD";
+  verdict: string;
+}
+
+interface DataDeconstructorProps {
+  items: DeconstructItem[];
+}
+
+export const DataDeconstructor: React.FC<DataDeconstructorProps> = ({
+  items,
+}) => {
+  const getColor = (cat: string) => {
+    switch (cat) {
+      case "CRÍTICO":
+        return "text-[var(--wadi-primary)] border-[var(--wadi-primary)]";
+      case "VULNERABILIDAD":
+        return "text-[var(--wadi-red)] border-[var(--wadi-red)]";
+      default:
+        return "text-[var(--wadi-gray)] border-[var(--wadi-gray)]";
+    }
+  };
+
+  return (
+    <MondayCard
+      title="DECONSTRUCTOR_V3.0"
+      className="w-full my-4 overflow-hidden"
+    >
+      <div className="overflow-x-auto">
+        <table className="w-full text-left border-collapse font-mono text-xs">
+          <thead>
+            <tr className="border-b border-[var(--wadi-border)] text-[var(--wadi-text-dim)]">
+              <th className="p-3 uppercase">Input Data</th>
+              <th className="p-3 uppercase">Class</th>
+              <th className="p-3 uppercase">System Verdict</th>
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((row, idx) => (
+              <tr
+                key={idx}
+                className="border-b border-[rgba(255,255,255,0.05)] hover:bg-[rgba(255,255,255,0.02)]"
+              >
+                <td className="p-3 text-[var(--wadi-text)]">{row.item}</td>
+                <td className="p-3">
+                  <span
+                    className={`border px-2 py-0.5 text-[10px] font-bold ${getColor(row.category)}`}
+                  >
+                    {row.category}
+                  </span>
+                </td>
+                <td className="p-3 text-[var(--wadi-text-dim)] italic">
+                  "{row.verdict}"
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div className="p-2 border-t border-[var(--wadi-border)] text-[10px] text-[var(--wadi-text-dim)] flex justify-between">
+        <span>TOTAL ITEMS: {items.length}</span>
+        <button
+          onClick={() => {
+            const text = items
+              .map((i) => `[${i.category}] ${i.item} -> ${i.verdict}`)
+              .join("\n");
+            const blob = new Blob([text], { type: "text/plain" });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = `WADI_PLAN_${Date.now()}.txt`;
+            a.click();
+          }}
+          className="hover:text-[var(--wadi-primary)] hover:underline cursor-pointer uppercase font-bold"
+        >
+          [EXPORT_PLAN]
+        </button>
+      </div>
+    </MondayCard>
+  );
+};