wadi 1.0.0

package/apps/frontend/src/pages/Projects.tsx

@@ -0,0 +1,247 @@
+import { useEffect, useState } from "react";
+import type { FormEvent } from "react";
+import { Link } from "react-router-dom";
+import { useProjectsStore } from "../store/projectsStore";
+import { Layout } from "../components/Layout";
+import { Button } from "../components/common/Button";
+import { Input } from "../components/common/Input";
+import { Modal } from "../components/common/Modal";
+
+// Define interface for project with extra fields if not in store type
+interface ProjectWithMetrics {
+  id: string;
+  name: string;
+  description?: string;
+  created_at: string;
+  noise_count?: number;
+  total_items_audited?: number;
+}
+
+export default function Projects() {
+  const { projects, fetchProjects, createProject, loading } =
+    useProjectsStore();
+// ...
+  const [name, setName] = useState("");
+  const [desc, setDesc] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+  const [nameError, setNameError] = useState("");
+
+  useEffect(() => {
+    fetchProjects();
+  }, [fetchProjects]);
+
+  const handleCreate = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) {
+      setNameError("El nombre es obligatorio");
+      return;
+    }
+
+    setNameError("");
+
+    try {
+      await createProject(name, desc);
+      setName("");
+      setDesc("");
+      setIsCreating(false);
+    } catch (err) {
+      console.error("Error creating project:", err);
+    }
+  };
+
+  const openCreateModal = () => {
+    setNameError("");
+    setIsCreating(true);
+  };
+
+  return (
+    <Layout>
+      <div className="w-full max-w-5xl mx-auto p-8 min-h-full">
+        {/* Header simple */}
+        <header className="flex justify-end mb-8"></header>
+
+        {/* Hero Section */}
+        <div className="text-center mb-12">
+          <div className="w-16 h-16 bg-gradient-to-tr from-[#38bdf8] to-[#84cc16] rounded-full mx-auto mb-6 flex items-center justify-center text-3xl shadow-[0_0_30px_rgba(56,189,248,0.3)] animate-in zoom-in duration-500">
+            🚀
+          </div>
+          <h1 className="text-3xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-slate-800 to-slate-500">
+            Punto de Control
+          </h1>
+          <p className="text-slate-500 text-lg">¿En qué trabajamos hoy?</p>
+        </div>
+
+        {/* Action Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
+          {/* Card 1: New Project */}
+          <button
+            onClick={openCreateModal}
+            className="flex flex-col gap-4 items-start text-left p-8 rounded-3xl border border-purple-100 bg-white/60 backdrop-blur-md shadow-sm transition-all hover:scale-[1.02] hover:shadow-lg hover:border-purple-200 group"
+          >
+            <div className="text-3xl p-3 bg-purple-50 rounded-2xl group-hover:bg-purple-100 transition-colors">
+              ✨
+            </div>
+            <div>
+              <span className="block text-xl font-bold text-slate-800 mb-2">
+                Crear nuevo proyecto
+              </span>
+              <span className="text-sm text-slate-500 leading-relaxed">
+                Inicia una nueva sesión de trabajo desde cero.
+              </span>
+            </div>
+          </button>
+
+          {/* Card 2: Explore */}
+          <div className="flex flex-col gap-4 items-start text-left p-8 rounded-3xl border border-slate-100 bg-white/40 backdrop-blur-sm opacity-80">
+            <div className="text-3xl p-3 bg-slate-50 rounded-2xl grayscale">
+              📚
+            </div>
+            <div>
+              <span className="block text-xl font-bold text-slate-700 mb-2">
+                Explorar recursos
+              </span>
+              <span className="text-sm text-slate-500 leading-relaxed">
+                Documentación y guías (Próximamente).
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Recent Projects List */}
+        <div>
+          <h3 className="text-xs font-bold text-slate-400 mb-4 uppercase tracking-widest pl-2">
+            Recientes
+          </h3>
+
+          {loading && (
+            <p className="text-slate-400 pl-2 animate-pulse">
+              Sincronizando...
+            </p>
+          )}
+
+          <div className="flex flex-col gap-4">
+            {projects.map((p) => (
+              <Link
+                key={p.id}
+                to={`/projects/${p.id}`}
+                className="no-underline"
+              >
+                <div className="group p-6 flex items-center justify-between rounded-3xl border border-white/50 bg-white/70 backdrop-blur-md shadow-sm transition-all hover:shadow-md hover:bg-white hover:scale-[1.01]">
+                  <div className="flex items-center gap-4">
+                    <div className="w-12 h-12 bg-slate-100 rounded-2xl flex items-center justify-center text-xl group-hover:bg-purple-50 group-hover:text-purple-500 transition-colors">
+                      📄
+                    </div>
+                    <div>
+                      <div className="font-semibold text-base text-slate-800 mb-1 group-hover:text-purple-600 transition-colors">
+                        {p.name}
+                      </div>
+                      {p.description && (
+                        <div className="text-sm text-slate-500">
+                          {p.description}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="flex items-center gap-3">
+                    <span className="text-xs text-slate-400 bg-slate-50 px-3 py-1 rounded-full">
+                      {new Date(p.created_at).toLocaleDateString()}
+                    </span>
+
+                    {/* Smoke Index Calculation */}
+                    {(() => {
+                      const pWithMetrics = p as unknown as ProjectWithMetrics;
+                      const noise = pWithMetrics.noise_count || 0;
+                      const total = pWithMetrics.total_items_audited || 0;
+                      const percentage =
+                        total > 0 ? Math.round((noise / total) * 100) : 0;
+
+                      let colorClass = "text-purple-500 bg-purple-50";
+
+                      if (percentage > 50) {
+                        colorClass = "text-red-500 bg-red-50 animate-pulse";
+                      } else if (percentage > 20) {
+                        colorClass = "text-amber-500 bg-amber-50";
+                      }
+
+                      return (
+                        <span
+                          className={`text-[10px] font-mono px-3 py-1 rounded-full ${colorClass}`}
+                        >
+                          HUMO: {percentage}%
+                        </span>
+                      );
+                    })()}
+                  </div>
+                </div>
+              </Link>
+            ))}
+
+            {projects.length === 0 && !loading && (
+              <div className="text-center py-16 px-8 bg-white/30 rounded-3xl border border-dashed border-slate-200 flex flex-col items-center gap-4">
+                <div className="text-4xl">🌱</div>
+                <h3 className="text-lg font-medium text-slate-700">
+                  Tu espacio está limpio
+                </h3>
+                <p className="text-slate-500 max-w-xs mx-auto">
+                  Aún no tienes proyectos. ¡Es hora de empezar algo nuevo!
+                </p>
+                <Button
+                  onClick={openCreateModal}
+                  variant="primary"
+                  className="mt-4 shadow-lg shadow-purple-200"
+                >
+                  🚀 Creá tu primer proyecto
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Modal for Creating Project */}
+        <Modal
+          isOpen={isCreating}
+          onClose={() => setIsCreating(false)}
+          title="Nuevo Proyecto"
+        >
+          <form onSubmit={handleCreate} className="flex flex-col gap-4">
+            <Input
+              label="Nombre del proyecto"
+              placeholder="Ej. Análisis de datos"
+              value={name}
+              onChange={(e) => {
+                setName(e.target.value);
+                if (e.target.value.trim()) setNameError("");
+              }}
+              error={nameError}
+              autoFocus
+            />
+            <Input
+              label="Descripción (opcional)"
+              placeholder="Breve descripción del objetivo"
+              value={desc}
+              onChange={(e) => setDesc(e.target.value)}
+            />
+
+            <div className="flex justify-end gap-2 mt-4">
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={() => setIsCreating(false)}
+              >
+                Cancelar
+              </Button>
+              <Button
+                type="submit"
+                variant="primary"
+                className="bg-purple-600 hover:bg-purple-700 text-white shadow-lg shadow-purple-200"
+              >
+                Crear Proyecto
+              </Button>
+            </div>
+          </form>
+        </Modal>
+      </div>
+    </Layout>
+  );
+}

package/apps/frontend/src/pages/TermsPage.tsx

@@ -0,0 +1,202 @@
+import { useNavigate } from "react-router-dom";
+
+export default function TermsPage() {
+  const navigate = useNavigate();
+
+  return (
+    <div
+      style={{
+        fontFamily: "'Inter', sans-serif",
+        color: "#111827",
+        backgroundColor: "#F5F7FB",
+        minHeight: "100vh",
+        padding: "4rem 2rem",
+      }}
+    >
+      <main
+        style={{
+          maxWidth: "700px",
+          margin: "0 auto",
+          background: "#fff",
+          padding: "2rem",
+          borderRadius: "24px",
+          boxShadow: "0 10px 40px rgba(0,0,0,0.05)",
+        }}
+      >
+        <button
+          onClick={() => navigate("/")}
+          style={{
+            marginBottom: "2rem",
+            background: "transparent",
+            border: "none",
+            color: "#7C6CFF",
+            fontWeight: 600,
+            cursor: "pointer",
+          }}
+        >
+          ← Volver al inicio
+        </button>
+
+        <h1
+          style={{
+            fontSize: "2rem",
+            fontWeight: 800,
+            marginBottom: "2rem",
+            color: "#111827",
+          }}
+        >
+          Términos de uso de WADI
+        </h1>
+
+        <section style={{ marginBottom: "2rem" }}>
+          <h2
+            style={{
+              fontSize: "1.25rem",
+              fontWeight: 700,
+              marginBottom: "1rem",
+            }}
+          >
+            1. Descripción del servicio
+          </h2>
+          <p style={{ lineHeight: 1.6, color: "#4B5563" }}>
+            WADI es una herramienta de asistencia basada en inteligencia
+            artificial diseñada para potenciar la productividad personal y la
+            gestión de proyectos, ofreciendo funcionalidades de chat,
+            planificación y tutoría adaptativa.
+          </p>
+        </section>
+
+        <section style={{ marginBottom: "2rem" }}>
+          <h2
+            style={{
+              fontSize: "1.25rem",
+              fontWeight: 700,
+              marginBottom: "1rem",
+            }}
+          >
+            2. Uso permitido
+          </h2>
+          <p style={{ lineHeight: 1.6, color: "#4B5563" }}>
+            El usuario se compromete a no utilizar el servicio para fines
+            ilegales, dañinos o que violen derechos de terceros, ni para generar
+            contenido discriminatorio, violento o engañoso.
+          </p>
+        </section>
+
+        <section style={{ marginBottom: "2rem" }}>
+          <h2
+            style={{
+              fontSize: "1.25rem",
+              fontWeight: 700,
+              marginBottom: "1rem",
+            }}
+          >
+            3. Contenido generado por IA
+          </h2>
+          <p style={{ lineHeight: 1.6, color: "#4B5563" }}>
+            El contenido generado por WADI es orientativo y automatizado. La
+            inteligencia artificial puede cometer errores. El usuario es el
+            único responsable de verificar la exactitud y adecuación de la
+            información antes de tomar decisiones. No garantizamos la exactitud
+            absoluta de las respuestas.
+          </p>
+        </section>
+
+        <section style={{ marginBottom: "2rem" }}>
+          <h2
+            style={{
+              fontSize: "1.25rem",
+              fontWeight: 700,
+              marginBottom: "1rem",
+            }}
+          >
+            4. Propiedad Intelectual
+          </h2>
+          <p style={{ lineHeight: 1.6, color: "#4B5563" }}>
+            La marca WADI y el software de la plataforma son propiedad de sus
+            desarrolladores. El usuario conserva la propiedad de los datos de
+            entrada y el contenido generado para su uso en sus propios
+            proyectos, en la medida en que la ley aplicable lo permita.
+          </p>
+        </section>
+
+        <section style={{ marginBottom: "2rem" }}>
+          <h2
+            style={{
+              fontSize: "1.25rem",
+              fontWeight: 700,
+              marginBottom: "1rem",
+            }}
+          >
+            5. Cuentas y acceso
+          </h2>
+          <p style={{ lineHeight: 1.6, color: "#4B5563" }}>
+            El usuario es responsable de mantener la seguridad de sus
+            credenciales. WADI no se hace responsable por accesos no autorizados
+            derivados de negligencia del usuario. Nos reservamos el derecho de
+            suspender cuentas que violen estos términos.
+          </p>
+        </section>
+
+        <section style={{ marginBottom: "2rem" }}>
+          <h2
+            style={{
+              fontSize: "1.25rem",
+              fontWeight: 700,
+              marginBottom: "1rem",
+            }}
+          >
+            6. Limitación de responsabilidad
+          </h2>
+          <p style={{ lineHeight: 1.6, color: "#4B5563" }}>
+            En la máxima medida permitida por la ley, WADI y sus desarrolladores
+            no serán responsables por daños directos, indirectos o consecuentes
+            que surjan del uso o la imposibilidad de uso del servicio.
+          </p>
+        </section>
+
+        <section style={{ marginBottom: "2rem" }}>
+          <h2
+            style={{
+              fontSize: "1.25rem",
+              fontWeight: 700,
+              marginBottom: "1rem",
+            }}
+          >
+            7. Contacto
+          </h2>
+          <p style={{ lineHeight: 1.6, color: "#4B5563" }}>
+            Para cualquier consulta sobre estos términos, puede contactarnos en:{" "}
+            <a
+              href="mailto:contacto@wadi.app"
+              style={{ color: "#7C6CFF", fontWeight: 600 }}
+            >
+              contacto@wadi.app
+            </a>
+          </p>
+        </section>
+
+        <section>
+          <h2
+            style={{
+              fontSize: "1.25rem",
+              fontWeight: 700,
+              marginBottom: "1rem",
+            }}
+          >
+            8. Cambios en los términos
+          </h2>
+          <p style={{ lineHeight: 1.6, color: "#4B5563" }}>
+            Nos reservamos el derecho de modificar estos términos. Se
+            notificarán los cambios actualizando la fecha al pie de esta página.
+          </p>
+          <p
+            style={{ marginTop: "1rem", fontSize: "0.9rem", color: "#6B7280" }}
+          >
+            Última actualización: Diciembre 2025
+          </p>
+        </section>
+      </main>
+    </div>
+  );
+}

package/apps/frontend/src/router.tsx

@@ -0,0 +1,83 @@
+import { createBrowserRouter } from "react-router-dom";
+import { AuthLoader } from "./components/AuthLoader";
+import Login from "./pages/Login";
+import Projects from "./pages/Projects";
+import ProjectDetail from "./pages/ProjectDetail";
+import ChatPage from "./pages/ChatPage";
+import { AuditReport } from "./components/auditor/AuditReport";
+
+import IntroWadi from "./pages/IntroWadi";
+import TermsPage from "./pages/TermsPage";
+import PrivacyPage from "./pages/PrivacyPage";
+import DashboardPage from "./pages/DashboardPage";
+
+export const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <IntroWadi />,
+  },
+  {
+    path: "/terminos",
+    element: <TermsPage />,
+  },
+  {
+    path: "/privacidad",
+    element: <PrivacyPage />,
+  },
+  {
+    path: "/login",
+    element: (
+      <AuthLoader>
+        <Login />
+      </AuthLoader>
+    ),
+  },
+  {
+    path: "/projects",
+    element: (
+      <AuthLoader>
+        <Projects />
+      </AuthLoader>
+    ),
+  },
+  {
+    path: "/projects/:id",
+    element: (
+      <AuthLoader>
+        <ProjectDetail />
+      </AuthLoader>
+    ),
+  },
+  {
+    path: "/chat",
+    element: (
+      <AuthLoader>
+        <ChatPage />
+      </AuthLoader>
+    ),
+  },
+  {
+    path: "/chat/:conversationId",
+    element: (
+      <AuthLoader>
+        <ChatPage />
+      </AuthLoader>
+    ),
+  },
+  {
+    path: "/chat/:conversationId/audit",
+    element: (
+      <AuthLoader>
+        <AuditReport />
+      </AuthLoader>
+    ),
+  },
+  {
+    path: "/dashboard",
+    element: (
+      <AuthLoader>
+        <DashboardPage />
+      </AuthLoader>
+    ),
+  },
+]);

package/apps/frontend/src/store/authStore.ts

@@ -0,0 +1,152 @@
+import { create } from "zustand";
+import type { User } from "@supabase/supabase-js";
+import { supabase } from "../config/supabase";
+
+interface AuthResponse {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  error: any;
+}
+
+interface AuthState {
+  user: User | null;
+  loading: boolean;
+  signIn: (email: string, password: string) => Promise<AuthResponse>;
+  signUp: (
+    email: string,
+    password: string,
+    captchaToken?: string
+  ) => Promise<AuthResponse>;
+  loginAsGuest: () => Promise<AuthResponse>;
+  convertGuestToUser: (
+    email: string,
+    password: string
+  ) => Promise<AuthResponse>;
+  signOut: () => Promise<void>;
+  setUser: (user: User | null) => void;
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+  user: null,
+  loading: false,
+
+  setUser: (user) => set({ user }),
+
+  signIn: async (email, password) => {
+    set({ loading: true });
+
+    const { data, error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    });
+
+    set({ user: data.user, loading: false });
+    return { data, error };
+  },
+
+  signUp: async (email, password, captchaToken) => {
+    set({ loading: true });
+
+    const { data, error } = await supabase.auth.signUp({
+      email,
+      password,
+      options: { captchaToken },
+    });
+
+    set({ user: data.user, loading: false });
+    return { data, error };
+  },
+
+  loginAsGuest: async () => {
+    set({ loading: true });
+    const { data, error } = await supabase.auth.signInAnonymously();
+    if (error) console.error("Error login anónimo:", error);
+    set({ user: data.user, loading: false });
+    return { data, error };
+  },
+
+  convertGuestToUser: async (email, password) => {
+    set({ loading: true });
+
+    // 1. Capture current anon ID
+    const {
+      data: { session: anonSession },
+    } = await supabase.auth.getSession();
+    const anonUserId = anonSession?.user?.id;
+
+    // 2. Attempt to convert (Update User)
+    const { data, error } = await supabase.auth.updateUser({
+      email: email,
+      password: password,
+    });
+
+    if (error) {
+      // 3. Handle "User already exists" conflict
+      // Note: Error message content may vary, checking for common indicators
+      if (
+        error.message.includes("already registered") ||
+        error.message.includes("unique constraint") ||
+        error.status === 422
+      ) {
+        console.log("Email exists. Attempting to link/merge account...");
+
+        // 4. Sign in to the existing account
+        const { data: signInData, error: signInError } =
+          await supabase.auth.signInWithPassword({
+            email,
+            password,
+          });
+
+        if (signInError) {
+          set({ loading: false });
+          throw new Error(
+            "El usuario ya existe y la contraseña es incorrecta."
+          );
+        }
+
+        if (signInData.user && anonUserId) {
+          console.log(
+            `Merging data from ${anonUserId} to ${signInData.user.id}`
+          );
+
+          // 5. Reassign entities (Projects & Runs)
+          // Note: This relies on RLS policies allowing the new user to update the old user's rows
+          // OR the backend handling this. We attempt client-side update here as per request.
+
+          const { error: projectError } = await supabase
+            .from("projects")
+            .update({ user_id: signInData.user.id }) // Assuming 'user_id' column exists
+            .eq("user_id", anonUserId); // Assuming logical 'owner' link
+
+          if (projectError)
+            console.warn("Project merge warning:", projectError);
+
+          const { error: runError } = await supabase
+            .from("runs")
+            .update({ user_id: signInData.user.id })
+            .eq("user_id", anonUserId);
+
+          if (runError) console.warn("Run merge warning:", runError);
+        }
+
+        set({ user: signInData.user, loading: false });
+        // Return null error to indicate success in handling
+        return { data: signInData, error: null };
+      }
+
+      // Real error
+      set({ loading: false });
+      return { data, error };
+    }
+
+    // Success (New User Conversion)
+    set({ user: data.user, loading: false });
+    return { data, error };
+  },
+
+  signOut: async () => {
+    await supabase.auth.signOut();
+    set({ user: null });
+  },
+}));