wadi 1.0.0

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

@@ -0,0 +1,65 @@
+import React from "react";
+
+interface DecisionWallProps {
+  onOptionA: () => void;
+  onOptionB: () => void;
+}
+
+export const DecisionWall: React.FC<DecisionWallProps> = ({
+  onOptionA,
+  onOptionB,
+}) => {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-lg">
+      <div className="w-full max-w-md p-1 border-2 border-[var(--monday-amber)] bg-black relative">
+        {/* Title Bar */}
+        <div className="bg-[var(--monday-amber)] text-black font-bold font-mono px-2 py-1 flex justify-between items-center">
+          <span>[CHECK_DE_LUCIDEZ]</span>
+          <span className="animate-blink">⚠</span>
+        </div>
+
+        <div className="p-8 flex flex-col items-center text-center space-y-6">
+          <h2 className="text-2xl font-bold font-mono text-[var(--monday-amber)]">
+            DETECTADA DIVAGACIÓN
+          </h2>
+          <p className="text-[var(--monday-text)] text-sm leading-relaxed">
+            El sistema ha detectado una fuga de ejecución. Estás hablando mucho
+            y haciendo poco.
+            <br />
+            <br />
+            Seleccioná un protocolo para continuar:
+          </p>
+
+          <div className="flex flex-col w-full gap-4 mt-4">
+            <button
+              onClick={onOptionA}
+              className="w-full border border-[var(--monday-primary)] text-[var(--monday-primary)] p-4 hover:bg-[var(--monday-primary)] hover:text-white transition-all text-left font-mono text-sm group"
+            >
+              <span className="block text-xs opacity-50 mb-1">OPCIÓN A</span>
+              <span className="font-bold">VOLVER AL PLAN TÉCNICO</span>
+              <span className="block text-xs mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                Prometo dejar de vender humo y escribir código.
+              </span>
+            </button>
+
+            <button
+              onClick={onOptionB}
+              className="w-full border border-[var(--monday-red)] text-[var(--monday-red)] p-4 hover:bg-[var(--monday-red)] hover:text-white transition-all text-left font-mono text-sm group"
+            >
+              <span className="block text-xs opacity-50 mb-1">OPCIÓN B</span>
+              <span className="font-bold">CERRAR CANAL</span>
+              <span className="block text-xs mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                No estoy listo. Volveré cuando quiera trabajar.
+              </span>
+            </button>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="border-t border-[var(--monday-amber)]/30 p-2 text-center text-[10px] text-[var(--monday-amber)] font-mono">
+          BLOCK_ID: {Math.random().toString(36).substr(2, 6).toUpperCase()}
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,137 @@
+import React, { useState } from "react";
+import { UploadCloud, FileText, X } from "lucide-react";
+import { useDocumentStore } from "../../store/documentStore";
+import { useShallow } from "zustand/react/shallow";
+
+export function Dropzone() {
+  const [isDragging, setIsDragging] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const {
+    uploadDocument,
+    activeDocument,
+    documents,
+    removeDocument,
+    setCurrentDocument,
+  } = useDocumentStore(
+    useShallow((state) => ({
+      uploadDocument: state.uploadDocument,
+      activeDocument: state.documents.find(
+        (d) => d.id === state.currentDocumentId
+      ),
+      documents: state.documents,
+      removeDocument: state.removeDocument,
+      setCurrentDocument: state.setCurrentDocument,
+    }))
+  );
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = () => {
+    setIsDragging(false);
+  };
+
+  const processFile = async (file: File) => {
+    if (!file) return;
+    setIsUploading(true);
+    try {
+      await uploadDocument(file);
+    } catch (e) {
+      console.error(e);
+      alert("Error subiendo archivo.");
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleDrop = async (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length > 0) processFile(files[0]);
+  };
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      processFile(e.target.files[0]);
+    }
+  };
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      {/* ACTIVE DOCUMENTS LIST */}
+      {documents.length > 0 && (
+        <div className="flex gap-2 flex-wrap mb-2">
+          {documents.map((doc) => (
+            <div
+              key={doc.id}
+              className={`flex items-center gap-2 px-3 py-1.5 rounded border text-xs cursor-pointer transition-colors ${activeDocument?.id === doc.id ? "bg-[var(--wadi-primary)]/10 border-[var(--wadi-primary)] text-[var(--wadi-primary)]" : "bg-[var(--wadi-surface)] border-[var(--wadi-border)] text-[var(--wadi-text-muted)] hover:border-[var(--wadi-text-muted)]"}`}
+              onClick={() => setCurrentDocument(doc.id)}
+            >
+              <FileText size={12} />
+              <span className="max-w-[100px] truncate">{doc.filename}</span>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  removeDocument(doc.id);
+                }}
+                className="hover:text-[var(--wadi-alert)]"
+              >
+                <X size={12} />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        className={`relative border border-dashed rounded-3xl p-8 transition-all duration-300 flex flex-col items-center justify-center text-center cursor-pointer overflow-hidden bg-[var(--wadi-bg)]
+        ${
+          isDragging
+            ? "border-[var(--wadi-primary)] bg-zinc-100 scale-[1.005]"
+            : "border-zinc-300 hover:border-zinc-400"
+        }`}
+      >
+        <input
+          type="file"
+          className="absolute inset-0 opacity-0 cursor-pointer"
+          accept=".pdf,.txt,.md"
+          onChange={handleFileSelect}
+        />
+
+        {isUploading ? (
+          <div className="flex flex-col items-center gap-2 animate-pulse">
+            <UploadCloud size={32} className="text-[var(--wadi-primary)]" />
+            <p className="text-xs font-mono-wadi text-[var(--wadi-primary)] tracking-widest">
+              INGIRIENDO DATOS...
+            </p>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center gap-2 pointer-events-none">
+            <UploadCloud
+              size={24}
+              className={
+                isDragging
+                  ? "text-[var(--wadi-primary)]"
+                  : "text-[var(--wadi-text-muted)]"
+              }
+            />
+            <div className="flex flex-col gap-1">
+              <p className="text-sm font-medium text-[var(--wadi-text)]">
+                Arrastrá tus documentos (sí, los que evitás leer)
+              </p>
+              <p className="text-[10px] text-[var(--wadi-text-muted)] uppercase tracking-wide">
+                PDF, TXT, MD (EVIDENCIA REQUERIDA)
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/apps/frontend/src/components/common/Button.tsx

@@ -0,0 +1,97 @@
+import { type ButtonHTMLAttributes, forwardRef } from "react";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
+  size?: "sm" | "md" | "lg";
+  fullWidth?: boolean;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant = "primary",
+      size = "md",
+      fullWidth = false,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    let bg = "var(--accent-primary)";
+    let color = "var(--accent-text)";
+    let border = "none";
+    let padding = "var(--space-2) var(--space-4)";
+    let fontSize = "1rem";
+
+    if (variant === "secondary") {
+      bg = "var(--bg-element)";
+      color = "var(--text-primary)";
+    } else if (variant === "outline") {
+      bg = "transparent";
+      border = "1px solid var(--border-subtle)";
+      color = "var(--text-primary)";
+    } else if (variant === "ghost") {
+      bg = "transparent";
+      color = "var(--text-secondary)";
+    } else if (variant === "danger") {
+      bg = "transparent";
+      color = "var(--error)";
+      border = "1px solid var(--error)";
+    }
+
+    if (size === "sm") {
+      padding = "var(--space-1) var(--space-3)";
+      fontSize = "0.875rem";
+    } else if (size === "lg") {
+      padding = "var(--space-3) var(--space-5)";
+      fontSize = "1.125rem";
+    }
+
+    const baseStyle = {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "var(--radius-md)",
+      fontWeight: 500,
+      cursor: props.disabled ? "not-allowed" : "pointer",
+      opacity: props.disabled ? 0.6 : 1,
+      transition: "all 0.2s ease",
+      backgroundColor: bg,
+      color: color,
+      border: border,
+      padding: padding,
+      fontSize: fontSize,
+      width: fullWidth ? "100%" : "auto",
+      ...style,
+    };
+
+    return (
+      <button
+        ref={ref}
+        className={className}
+        style={baseStyle}
+        onMouseEnter={(e) => {
+          if (!props.disabled && variant === "primary") {
+            e.currentTarget.style.backgroundColor =
+              "var(--accent-primary-hover)";
+          }
+          if (!props.disabled && variant === "outline") {
+            e.currentTarget.style.borderColor = "var(--border-focus)";
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (!props.disabled && variant === "primary") {
+            e.currentTarget.style.backgroundColor = "var(--accent-primary)";
+          }
+          if (!props.disabled && variant === "outline") {
+            e.currentTarget.style.borderColor = "var(--border-subtle)";
+          }
+        }}
+        {...props}
+      />
+    );
+  }
+);
+
+Button.displayName = "Button";

package/apps/frontend/src/components/common/Card.tsx

@@ -0,0 +1,43 @@
+import { type HTMLAttributes, forwardRef } from "react";
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  hoverable?: boolean;
+}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ hoverable, style, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        style={{
+          backgroundColor: "var(--bg-panel)",
+          border: "1px solid var(--border-subtle)",
+          borderRadius: "var(--radius-lg)",
+          padding: "var(--space-4)",
+          transition: "transform 0.2s, border-color 0.2s, box-shadow 0.2s",
+          cursor: hoverable ? "pointer" : "default",
+          ...style,
+        }}
+        onMouseEnter={(e) => {
+          if (hoverable) {
+            e.currentTarget.style.transform = "translateY(-2px)";
+            e.currentTarget.style.borderColor = "var(--border-focus)";
+            e.currentTarget.style.boxShadow = "var(--shadow-md)";
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (hoverable) {
+            e.currentTarget.style.transform = "translateY(0)";
+            e.currentTarget.style.borderColor = "var(--border-subtle)";
+            e.currentTarget.style.boxShadow = "none";
+          }
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Card.displayName = "Card";

package/apps/frontend/src/components/common/Input.tsx

@@ -0,0 +1,73 @@
+import { type InputHTMLAttributes, forwardRef } from "react";
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  fullWidth?: boolean;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ label, error, fullWidth = true, style, ...props }, ref) => {
+    return (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          width: fullWidth ? "100%" : "auto",
+        }}
+      >
+        {label && (
+          <label
+            style={{
+              marginBottom: "var(--space-1)",
+              fontSize: "0.875rem",
+              fontWeight: 500,
+              color: "var(--text-secondary)",
+            }}
+          >
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          style={{
+            width: "100%",
+            padding: "var(--space-2) var(--space-3)",
+            backgroundColor: "var(--bg-app)",
+            border: error
+              ? "1px solid var(--error)"
+              : "1px solid var(--border-subtle)",
+            borderRadius: "var(--radius-md)",
+            color: "var(--text-primary)",
+            fontSize: "1rem",
+            outline: "none",
+            transition: "border-color 0.2s",
+            ...style,
+          }}
+          onFocus={(e) => {
+            if (!error)
+              e.currentTarget.style.borderColor = "var(--border-focus)";
+          }}
+          onBlur={(e) => {
+            if (!error)
+              e.currentTarget.style.borderColor = "var(--border-subtle)";
+          }}
+          {...props}
+        />
+        {error && (
+          <span
+            style={{
+              color: "var(--error)",
+              fontSize: "0.8rem",
+              marginTop: "4px",
+            }}
+          >
+            {error}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = "Input";

package/apps/frontend/src/components/common/Modal.tsx

@@ -0,0 +1,53 @@
+import { type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { Card } from "./Card";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: ReactNode;
+}
+
+export const Modal = ({ isOpen, onClose, title, children }: ModalProps) => {
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0,0,0,0.6)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 100,
+        backdropFilter: "blur(4px)",
+      }}
+      onClick={onClose}
+    >
+      <Card
+        style={{
+          width: "100%",
+          maxWidth: "480px",
+          // We override card hover behavior just in case, though it defaults false
+          transform: "none",
+          cursor: "default",
+          boxShadow: "var(--shadow-lg)",
+        }}
+        onClick={(e) => e.stopPropagation()} // Prevent closing when clicking inside
+      >
+        {title && (
+          <h3 style={{ marginBottom: "var(--space-4)", fontSize: "1.25rem" }}>
+            {title}
+          </h3>
+        )}
+        {children}
+      </Card>
+    </div>,
+    document.body
+  );
+};

package/apps/frontend/src/components/ui/Button.tsx

@@ -0,0 +1,68 @@
+import { forwardRef, type ButtonHTMLAttributes } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// Utility for class merging
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--wadi-primary)] disabled:pointer-events-none disabled:opacity-50 font-mono-wadi uppercase tracking-wider",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-[var(--wadi-primary)] text-white shadow hover:bg-[var(--wadi-primary)]/90 hover:shadow-[0_0_15px_var(--wadi-primary-glow)]",
+        destructive:
+          "bg-[var(--wadi-alert)] text-white shadow-sm hover:bg-[var(--wadi-alert)]/90 hover:shadow-[0_0_15px_var(--wadi-alert-glow)]",
+        outline:
+          "border border-[var(--wadi-border)] bg-transparent shadow-sm hover:bg-[var(--wadi-surface)] hover:text-[var(--wadi-text)]",
+        ghost: "hover:bg-[var(--wadi-surface)] hover:text-[var(--wadi-text)]",
+        link: "text-[var(--wadi-primary)] underline-offset-4 hover:underline",
+        glass:
+          "wadi-glass hover:bg-[rgba(139,92,246,0.1)] text-[var(--wadi-primary)] border-[var(--wadi-primary)]/30",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 px-3 text-xs",
+        lg: "h-10 px-8",
+        icon: "h-9 w-9",
+      },
+      radius: {
+        none: "rounded-none",
+        sm: "rounded-[2px]",
+        md: "rounded-md",
+        full: "rounded-full",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "sm",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, radius, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, radius, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button };

package/apps/frontend/src/components/ui/Card.tsx

@@ -0,0 +1,86 @@
+import { type HTMLAttributes, forwardRef } from "react";
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "rounded-sm border border-[var(--wadi-border)] bg-[var(--wadi-surface)]/50 text-[var(--wadi-text)] shadow backdrop-blur-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Card.displayName = "Card";
+
+const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
+  )
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "font-semibold leading-none tracking-tight font-mono-wadi uppercase text-[var(--wadi-primary)]",
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-[var(--wadi-text-muted)]", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  )
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex items-center p-6 pt-0", className)}
+      {...props}
+    />
+  )
+);
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

package/apps/frontend/src/components/ui/Input.tsx

@@ -0,0 +1,28 @@
+import { type InputHTMLAttributes, forwardRef } from "react";
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export type InputProps = InputHTMLAttributes<HTMLInputElement>;
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-12 w-full bg-transparent border-b border-[var(--wadi-border)] px-3 py-1 text-base shadow-sm transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[var(--wadi-text-muted)] focus-visible:outline-none focus-visible:border-[var(--wadi-primary)] focus-visible:shadow-[0_1px_0_0_var(--wadi-primary)] disabled:cursor-not-allowed disabled:opacity-50 rounded-none font-sans",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };