wadi 1.0.0

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

@@ -0,0 +1,190 @@
+import { useState } from "react";
+import type { FormEvent } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuthStore } from "../store/authStore";
+import { Card } from "../components/common/Card";
+import { Input } from "../components/common/Input";
+import { Button } from "../components/common/Button";
+
+import HCaptcha from "@hcaptcha/react-hcaptcha";
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { signIn, signUp, loading } = useAuthStore();
+
+  const [isRegistering, setIsRegistering] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [errorMsg, setErrorMsg] = useState("");
+  const [captchaToken, setCaptchaToken] = useState("");
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setErrorMsg("");
+
+    if (!email || !password) {
+      setErrorMsg("Por favor completá todos los campos.");
+      return;
+    }
+
+    try {
+      if (isRegistering) {
+        if (!captchaToken) {
+          setErrorMsg("Por favor completá el CAPTCHA.");
+          return;
+        }
+        const { error } = await signUp(email, password, captchaToken);
+        if (error) throw error;
+        navigate("/projects");
+      } else {
+        const { error } = await signIn(email, password);
+        if (error) throw error;
+        navigate("/projects");
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (err: any) {
+      setErrorMsg(err.message || "Ocurrió un error inesperado.");
+    }
+  };
+
+  return (
+    <div
+      style={{
+        width: "100vw",
+        height: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "var(--bg-app)",
+        color: "var(--text-primary)",
+      }}
+    >
+      <Card
+        style={{
+          width: "100%",
+          maxWidth: "400px",
+          textAlign: "center",
+          boxShadow: "var(--shadow-lg)",
+        }}
+      >
+        {/* LOGO / BRAND */}
+        <div style={{ marginBottom: "2rem" }}>
+          <h1
+            style={{
+              fontSize: "2rem",
+              fontWeight: 700,
+              textTransform: "uppercase",
+              letterSpacing: "2px",
+              margin: 0,
+            }}
+          >
+            WADI
+          </h1>
+          <p style={{ color: "var(--text-secondary)", marginTop: "0.5rem" }}>
+            {isRegistering ? "Creá tu cuenta" : "Bienvenido de nuevo"}
+          </p>
+        </div>
+
+        {/* ERROR */}
+        {errorMsg && (
+          <div
+            style={{
+              background: "rgba(255, 80, 80, 0.1)",
+              border: "1px solid rgba(255, 80, 80, 0.3)",
+              color: "#ff6b6b",
+              padding: "10px",
+              borderRadius: "8px",
+              marginBottom: "1rem",
+              fontSize: "0.9rem",
+            }}
+          >
+            {errorMsg}
+          </div>
+        )}
+
+        {/* FORM */}
+        {/* FORM */}
+        <form
+          onSubmit={handleSubmit}
+          style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
+        >
+          <Input
+            label="Email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="nombre@ejemplo.com"
+          />
+
+          <Input
+            label="Contraseña"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="••••••••"
+          />
+
+          {isRegistering && (
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "center",
+                marginTop: "1rem",
+              }}
+            >
+              <HCaptcha
+                sitekey={
+                  import.meta.env.VITE_HCAPTCHA_SITE_KEY ||
+                  "10000000-ffff-ffff-ffff-000000000001"
+                }
+                onVerify={(token) => setCaptchaToken(token)}
+              />
+            </div>
+          )}
+
+          <Button
+            type="submit"
+            disabled={loading}
+            fullWidth
+            style={{ marginTop: "1rem" }}
+          >
+            {loading
+              ? "Procesando..."
+              : isRegistering
+                ? "Registrarse"
+                : "Continuar"}
+          </Button>
+        </form>
+
+        {/* TOGGLE LOGIN/REGISTER */}
+        <div
+          style={{
+            marginTop: "1.5rem",
+            fontSize: "0.9rem",
+            color: "var(--text-secondary)",
+          }}
+        >
+          {isRegistering ? "¿Ya tenés cuenta? " : "¿No tenés cuenta? "}
+          <button
+            type="button"
+            onClick={() => {
+              setIsRegistering(!isRegistering);
+              setErrorMsg("");
+              setCaptchaToken(""); // Reset captcha on toggle
+            }}
+            style={{
+              background: "none",
+              border: "none",
+              color: "var(--accent-primary)",
+              fontWeight: 600,
+              cursor: "pointer",
+              padding: 0,
+            }}
+          >
+            {isRegistering ? "Iniciar Sesión" : "Registrate"}
+          </button>
+        </div>
+      </Card>
+    </div>
+  );
+}

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

@@ -0,0 +1,213 @@
+import { useNavigate } from "react-router-dom";
+
+export default function PrivacyPage() {
+  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",
+          }}
+        >
+          Política de Privacidad de WADI
+        </h1>
+
+        <section style={{ marginBottom: "2rem" }}>
+          <h2
+            style={{
+              fontSize: "1.25rem",
+              fontWeight: 700,
+              marginBottom: "1rem",
+            }}
+          >
+            1. Datos que procesamos
+          </h2>
+          <p style={{ lineHeight: 1.6, color: "#4B5563" }}>
+            Procesamos el contenido de las conversaciones que mantienes con WADI
+            para generar respuestas. También recopilamos datos técnicos básicos
+            necesarios para el funcionamiento del servicio, como dirección IP y
+            metadatos de uso, únicamente con fines de seguridad y mejora del
+            servicio.
+          </p>
+        </section>
+
+        <section style={{ marginBottom: "2rem" }}>
+          <h2
+            style={{
+              fontSize: "1.25rem",
+              fontWeight: 700,
+              marginBottom: "1rem",
+            }}
+          >
+            2. Uso de la información
+          </h2>
+          <p style={{ lineHeight: 1.6, color: "#4B5563" }}>
+            Utilizamos la información para:
+          </p>
+          <ul
+            style={{
+              lineHeight: 1.6,
+              color: "#4B5563",
+              listStyleType: "disc",
+              paddingLeft: "1.5rem",
+              marginTop: "0.5rem",
+            }}
+          >
+            <li>Proveer y mantener el servicio operativo.</li>
+            <li>Generar respuestas contextualizadas a tus consultas.</li>
+            <li>Mejorar la calidad de nuestro modelo y herramientas.</li>
+            <li>Garantizar la seguridad de la plataforma.</li>
+          </ul>
+        </section>
+
+        <section style={{ marginBottom: "2rem" }}>
+          <h2
+            style={{
+              fontSize: "1.25rem",
+              fontWeight: 700,
+              marginBottom: "1rem",
+            }}
+          >
+            3. Compartición de datos
+          </h2>
+          <p style={{ lineHeight: 1.6, color: "#4B5563" }}>
+            No vendemos tus datos personales. Compartimos información
+            estrictamente necesaria con proveedores de infraestructura (como
+            servicios de hosting y proveedores de modelos de lenguaje) que
+            operan bajo acuerdos de confidencialidad. También podemos divulgar
+            información si así lo exige la ley.
+          </p>
+        </section>
+
+        <section style={{ marginBottom: "2rem" }}>
+          <h2
+            style={{
+              fontSize: "1.25rem",
+              fontWeight: 700,
+              marginBottom: "1rem",
+            }}
+          >
+            4. Retención y eliminación
+          </h2>
+          <p style={{ lineHeight: 1.6, color: "#4B5563" }}>
+            Mantenemos los datos mientras tu cuenta esté activa o sea necesario
+            para prestar el servicio. Puedes solicitar la eliminación de tu
+            cuenta y datos asociados en cualquier momento contactándonos.
+          </p>
+        </section>
+
+        <section style={{ marginBottom: "2rem" }}>
+          <h2
+            style={{
+              fontSize: "1.25rem",
+              fontWeight: 700,
+              marginBottom: "1rem",
+            }}
+          >
+            5. Seguridad
+          </h2>
+          <p style={{ lineHeight: 1.6, color: "#4B5563" }}>
+            Implementamos medidas de seguridad técnicas y organizativas para
+            proteger tus datos contra el acceso no autorizado, la pérdida o la
+            alteración.
+          </p>
+        </section>
+
+        <section style={{ marginBottom: "2rem" }}>
+          <h2
+            style={{
+              fontSize: "1.25rem",
+              fontWeight: 700,
+              marginBottom: "1rem",
+            }}
+          >
+            6. Derechos del usuario
+          </h2>
+          <p style={{ lineHeight: 1.6, color: "#4B5563" }}>
+            Tienes derecho a acceder, corregir y eliminar tus datos personales.
+            Para ejercer estos derechos, contáctanos en:{" "}
+            <a
+              href="mailto:privacidad@wadi.app"
+              style={{ color: "#7C6CFF", fontWeight: 600 }}
+            >
+              privacidad@wadi.app
+            </a>
+          </p>
+        </section>
+
+        <section style={{ marginBottom: "2rem" }}>
+          <h2
+            style={{
+              fontSize: "1.25rem",
+              fontWeight: 700,
+              marginBottom: "1rem",
+            }}
+          >
+            7. Uso con menores
+          </h2>
+          <p style={{ lineHeight: 1.6, color: "#4B5563" }}>
+            WADI no está dirigido a menores de 13 años. No recopilamos
+            intencionalmente información personal de niños menores de esta edad.
+          </p>
+        </section>
+
+        <section>
+          <h2
+            style={{
+              fontSize: "1.25rem",
+              fontWeight: 700,
+              marginBottom: "1rem",
+            }}
+          >
+            8. Cambios en la política
+          </h2>
+          <p style={{ lineHeight: 1.6, color: "#4B5563" }}>
+            Podemos actualizar esta política ocasionalmente. Notificaremos los
+            cambios publicando la nueva política en 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/pages/ProjectDetail.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useMemo } from "react";
+import { useParams } from "react-router-dom";
+import { useRunsStore } from "../store/runsStore";
+import { ChatInterface } from "../components/ChatInterface";
+import type { ChatMessage } from "../components/ChatInterface";
+import { Layout } from "../components/Layout";
+
+export default function ProjectDetail() {
+  const { id } = useParams();
+  const { runs, fetchRuns, createRun, loading } = useRunsStore();
+
+  useEffect(() => {
+    if (id) {
+      fetchRuns(id);
+    }
+  }, [id, fetchRuns]);
+
+  const handleSend = async (text: string) => {
+    if (!id || !text.trim()) return;
+    await createRun(id, text);
+  };
+
+  // Transform runs (Run[]) into ChatMessage[]
+  // Runs are stored [newest, ..., oldest] in store
+  // We want to display [oldest, ..., newest] in ChatInterface typically
+  const messages = useMemo(() => {
+    const msgs: ChatMessage[] = [];
+
+    // Process in reverse (oldest first) to build chat history
+    // Since 'runs' is [newest...oldest], we slice().reverse()
+    const sortedRuns = runs.slice().reverse();
+
+    sortedRuns.forEach((run) => {
+      // User Message
+      msgs.push({
+        id: `${run.id}-user`,
+        role: "user",
+        content: run.input,
+        timestamp: new Date(run.created_at).toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
+        }),
+      });
+
+      // Assistant Message (if output exists)
+      if (run.output) {
+        msgs.push({
+          id: `${run.id}-ai`,
+          role: "assistant",
+          content: run.output,
+          timestamp: new Date(run.created_at).toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit",
+          }),
+          // Technically output might be later, but for now using run time is fine
+        });
+      }
+    });
+
+    return msgs;
+  }, [runs]);
+
+  return (
+    <Layout>
+      <ChatInterface
+        title={`Project ${id}`}
+        status={loading ? "Processing..." : "Ready"}
+        messages={messages}
+        onSendMessage={handleSend}
+        isThinking={loading}
+        suggestions={[
+          "Analyze this code",
+          "Explain the architecture",
+          "Suggest improvements",
+          "Write a test case",
+        ]}
+      />
+    </Layout>
+  );
+}