wadi 1.0.0

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

@@ -0,0 +1,64 @@
+import { FileText } from "lucide-react";
+import type { HTMLAttributes } from "react";
+
+interface LogItemProps extends HTMLAttributes<HTMLDivElement> {
+  date: string;
+  title: string;
+  isActive?: boolean;
+  onDelete?: (e: React.MouseEvent) => void;
+  onReport?: (e: React.MouseEvent) => void;
+}
+
+export function LogItem({
+  date,
+  title,
+  isActive,
+  onDelete,
+  onReport,
+  onClick,
+  className,
+}: LogItemProps) {
+  return (
+    <div
+      onClick={onClick}
+      className={`
+            group relative flex items-center justify-between
+            px-4 py-2 cursor-pointer transition-all duration-150
+            border-l-2 select-none
+            ${
+              isActive
+                ? "bg-[var(--wadi-surface)] border-[var(--wadi-primary)] text-[var(--wadi-text)]"
+                : "border-transparent text-[var(--wadi-text-muted)] hover:bg-[var(--wadi-surface)] hover:text-[var(--wadi-text)] hover:border-[var(--wadi-border)]"
+            }
+            ${className || ""}
+            `}
+    >
+      <div className="flex items-baseline gap-2 overflow-hidden font-mono-wadi text-[11px] w-full">
+        <span className="opacity-50 shrink-0">[{date}]</span>
+        <span className="truncate opacity-90 uppercase tracking-tight">
+          {title}
+        </span>
+      </div>
+
+      {onReport && (
+        <button
+          onClick={onReport}
+          className="absolute right-8 opacity-0 group-hover:opacity-100 hover:text-[var(--wadi-primary)] transition-opacity mr-2"
+          title="Audit Report"
+        >
+          <FileText size={14} />
+        </button>
+      )}
+
+      {onDelete && (
+        <button
+          onClick={onDelete}
+          className="absolute right-2 opacity-0 group-hover:opacity-100 hover:text-[var(--wadi-alert)] transition-opacity"
+          title="Purge Log"
+        >
+          ✕
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,40 @@
+import React from "react";
+
+/**
+ * WADI BUTTON
+ * Estética Modern Dark.
+ */
+interface MondayButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "danger" | "ghost";
+  label: string;
+}
+
+export const MondayButton: React.FC<MondayButtonProps> = ({
+  variant = "primary",
+  label,
+  className = "",
+  ...props
+}) => {
+  const baseStyle =
+    "relative font-mono text-xs uppercase tracking-widest transition-all duration-200 border touch-min-44 px-6";
+
+  const variants = {
+    primary:
+      "bg-[var(--wadi-primary-glow)] border-[var(--wadi-primary)] text-[var(--wadi-primary)] hover:bg-[var(--wadi-primary)] hover:text-white hover:shadow-[0_0_20px_var(--wadi-primary-dim)]",
+    danger:
+      "bg-red-900/20 border-[var(--wadi-red)] text-[var(--wadi-red)] hover:bg-[var(--wadi-red)] hover:text-white hover:shadow-[0_0_20px_rgba(239,68,68,0.4)]",
+    ghost:
+      "bg-transparent border-transparent text-gray-500 hover:text-[var(--wadi-text)]",
+  };
+
+  return (
+    <button
+      className={`${baseStyle} ${variants[variant]} ${className}`}
+      {...props}
+    >
+      <span className="relative z-10">{label}</span>
+      {/* Tech Corner Decoration */}
+      <div className="absolute top-0 right-0 w-2 h-2 border-t border-r border-current opacity-50"></div>
+    </button>
+  );
+};

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

@@ -0,0 +1,24 @@
+import React, { type ReactNode } from "react";
+
+interface MondayCardProps {
+  children: ReactNode;
+  className?: string;
+  title?: string;
+}
+
+export const MondayCard: React.FC<MondayCardProps> = ({
+  children,
+  className = "",
+  title,
+}) => {
+  return (
+    <div className={`monday-card flex flex-col ${className}`}>
+      {title && (
+        <div className="absolute top-0 left-0 bg-[var(--wadi-primary)] text-black px-2 py-0.5 text-[10px] font-bold font-mono uppercase tracking-widest">
+          {title}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,208 @@
+import { useRef, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useChatStore } from "../../store/chatStore";
+import { useScouter } from "../../hooks/useScouter";
+
+interface ScouterProps {
+  isDecisionBlocked?: boolean;
+}
+
+export function Scouter({ isDecisionBlocked = false }: ScouterProps) {
+  const messages = useChatStore((state) => state.messages);
+  const rank = useChatStore((state) => state.rank);
+  const systemDeath = useChatStore((state) => state.systemDeath);
+  const resetChat = useChatStore((state) => state.resetChat);
+  const navigate = useNavigate();
+
+  const {
+    playAlertSound,
+    playScanSound,
+    initAmbientHum,
+    setAmbientIntensity,
+    playDeathSound,
+    playYawnSound,
+  } = useScouter();
+  const prevMessagesLength = useRef(messages.length);
+  const prevRank = useRef(rank);
+
+  const visualAlertTimestamp = useChatStore(
+    (state) => state.visualAlertTimestamp
+  );
+  const prevVisualAlertTimestamp = useRef(visualAlertTimestamp);
+
+  // Trigger Visual Alert on Timestamp Change
+  useEffect(() => {
+    if (visualAlertTimestamp !== prevVisualAlertTimestamp.current) {
+      playAlertSound();
+      const flashOverlay = document.getElementById("scouter-flash-overlay");
+      if (flashOverlay) {
+        // Alerta roja explícita para errores de validación
+        flashOverlay.style.background = "var(--wadi-alert)";
+        setTimeout(() => {
+          flashOverlay.style.opacity = "0.6";
+        }, 100);
+        setTimeout(() => {
+          flashOverlay.style.opacity = "0";
+        }, 800);
+      }
+      prevVisualAlertTimestamp.current = visualAlertTimestamp;
+    }
+  }, [visualAlertTimestamp, playAlertSound]);
+
+  const scornTimestamp = useChatStore((state) => state.scornTimestamp);
+  const prevScornTimestamp = useRef(scornTimestamp);
+
+  // Trigger Scorn Alert (Lavender Flash + Yawn Sound)
+  useEffect(() => {
+    if (scornTimestamp !== prevScornTimestamp.current) {
+      playYawnSound(); // Electronic Yawn
+      const flashOverlay = document.getElementById("scouter-flash-overlay");
+      if (flashOverlay) {
+        flashOverlay.style.background = "#A78BFA"; // Lavender
+        setTimeout(() => {
+          flashOverlay.style.opacity = "0.5";
+        }, 100);
+        setTimeout(() => {
+          flashOverlay.style.opacity = "0";
+        }, 800);
+      }
+      prevScornTimestamp.current = scornTimestamp;
+    }
+  }, [scornTimestamp, playYawnSound]);
+
+  // Initialize Ambient Hum on Mount
+  useEffect(() => {
+    const handleInteraction = () => initAmbientHum();
+    window.addEventListener("click", handleInteraction, { once: true });
+    window.addEventListener("keydown", handleInteraction, { once: true });
+    return () => {
+      window.removeEventListener("click", handleInteraction);
+      window.removeEventListener("keydown", handleInteraction);
+    };
+  }, [initAmbientHum]);
+
+  useEffect(() => {
+    if (systemDeath) {
+      setAmbientIntensity("high");
+      return;
+    }
+    // Si hay check de lucidez, el ambiente sube pero no es hostil
+    setAmbientIntensity(isDecisionBlocked ? "high" : "normal");
+  }, [isDecisionBlocked, systemDeath, setAmbientIntensity]);
+
+  // System Death Logic (Keep as fail-safe)
+  useEffect(() => {
+    if (systemDeath) {
+      playDeathSound();
+      const overlay = document.getElementById("scouter-flash-overlay");
+      let active = true;
+      const loop = () => {
+        if (!active || !overlay) return;
+        overlay.style.opacity = Math.random() > 0.5 ? "0.8" : "0.2";
+        setTimeout(loop, 100);
+      };
+      loop();
+
+      const timer = setTimeout(() => {
+        resetChat();
+        useChatStore.setState({
+          systemDeath: false,
+          rank: "GENERADOR_DE_HUMO",
+          points: 0,
+        });
+        navigate("/");
+      }, 10000);
+
+      return () => {
+        active = false;
+        clearTimeout(timer);
+        if (overlay) overlay.style.opacity = "0";
+      };
+    }
+  }, [systemDeath, navigate, resetChat, playDeathSound]);
+
+  // Rank Change Logic (Visual pulse)
+  useEffect(() => {
+    if (prevRank.current !== rank) {
+      playScanSound();
+      const overlay = document.getElementById("scouter-flash-overlay");
+      if (overlay) {
+        overlay.style.backgroundColor = "var(--wadi-primary)";
+        overlay.style.opacity = "0.3"; // Más suave
+        setTimeout(() => {
+          overlay.style.opacity = "0";
+          overlay.style.backgroundColor = "var(--wadi-alert)";
+        }, 1500);
+      }
+    }
+    prevRank.current = rank;
+  }, [rank, playScanSound]);
+
+  useEffect(() => {
+    const newCount = messages.length;
+    const oldCount = prevMessagesLength.current;
+
+    if (newCount > oldCount) {
+      const lastMsg = messages[newCount - 1];
+      const isMyMessage = lastMsg.role === "user";
+
+      // SCOUTER LOGIC
+      if (!isMyMessage) {
+        const text = lastMsg.content || "";
+        const isChaotic = text.includes("[ALERTA DE CAOS DETECTADA]");
+        const isLucidityCheck =
+          text.includes("[CHECK_DE_LUCIDEZ]") ||
+          text.includes("[FORCE_DECISION]"); // Backwards compat
+        const isAnalysis =
+          text.includes("Analizar") || text.includes("[DECONSTRUCT_START]");
+
+        if (isChaotic || isLucidityCheck) {
+          playAlertSound();
+          const flashOverlay = document.getElementById("scouter-flash-overlay");
+          if (flashOverlay) {
+            // Si es Lucidez, color lavanda suave, no rojo
+            if (isLucidityCheck) {
+              flashOverlay.style.background = "var(--wadi-primary)";
+            } else {
+              flashOverlay.style.background = "var(--wadi-alert)";
+            }
+            setTimeout(() => {
+              flashOverlay.style.opacity = "0.4";
+            }, 100);
+            setTimeout(() => {
+              flashOverlay.style.opacity = "0";
+              flashOverlay.style.background = "var(--wadi-alert)"; // reset
+            }, 1000);
+          }
+        } else if (isAnalysis) {
+          playScanSound();
+        }
+      }
+    }
+    prevMessagesLength.current = newCount;
+  }, [messages, playAlertSound, playScanSound]);
+
+  return (
+    <>
+      <div
+        id="scouter-flash-overlay"
+        className="fixed inset-0 pointer-events-none z-[9999] bg-[var(--wadi-alert)] opacity-0 transition-opacity duration-1000 mix-blend-screen" // blend screen is softer
+        aria-hidden="true"
+      />
+
+      {systemDeath && (
+        <div className="fixed inset-0 z-[10000] pointer-events-auto bg-black/80 flex items-center justify-center overflow-hidden">
+          <div className="text-[var(--wadi-alert)] font-bold text-4xl animate-pulse font-mono-wadi tracking-widest text-center">
+            DESCONEXIÓN VITAL
+            <br />
+            PROTOCOL_RESET
+            <br />
+            <span className="text-sm text-white mt-4 block">
+              Reiniciando búnker...
+            </span>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,202 @@
+import { useState, useEffect, useRef } from "react";
+import { type Attachment } from "../../store/chatStore";
+import { useScouter } from "../../hooks/useScouter";
+import { Paperclip } from "lucide-react";
+
+// Fallback icons if lucide not imported/working in this context, but user mentioned "iconos minimalistas"
+const IconSend = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="m22 2-7 20-4-9-9-4Z" />
+    <path d="M22 2 11 13" />
+  </svg>
+);
+
+const IconAttach = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
+  </svg>
+);
+
+interface TerminalInputProps {
+  onSendMessage: (text: string, attachments: Attachment[]) => Promise<void>;
+  isLoading: boolean;
+  isDecisionBlocked?: boolean;
+  activeFocus?: string | null;
+}
+
+export function TerminalInput({
+  onSendMessage,
+  isLoading,
+  activeFocus,
+}: TerminalInputProps) {
+  const [input, setInput] = useState("");
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const { playScanSound } = useScouter();
+
+  // FOCUS LAW: Keep input focused always
+  useEffect(() => {
+    if (!isLoading && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isLoading, input, selectedFile]);
+
+  const handleSend = async (e?: React.FormEvent) => {
+    e?.preventDefault();
+    if ((!input.trim() && !selectedFile) || isLoading) return;
+
+    let finalPrompt = input;
+    const finalAttachments: Attachment[] = [];
+
+    const prevInput = input;
+    setInput("");
+    setSelectedFile(null);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+
+    // Force focus back
+    if (inputRef.current) inputRef.current.focus();
+
+    if (selectedFile) {
+      const isText =
+        selectedFile.type.startsWith("text/") ||
+        selectedFile.name.endsWith(".md") ||
+        selectedFile.name.endsWith(".csv") ||
+        selectedFile.name.endsWith(".json");
+
+      if (isText) {
+        try {
+          const textContent = await selectedFile.text();
+          finalPrompt += `\n\n[ARCHIVO IMPLÍCITO: ${selectedFile.name}]\n---\n${textContent}\n---`;
+        } catch (err) {
+          console.error("Error reading text file", err);
+        }
+      } else {
+        try {
+          const base64 = await new Promise<string>((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result as string);
+            reader.onerror = reject;
+            reader.readAsDataURL(selectedFile);
+          });
+          finalAttachments.push({
+            url: base64,
+            name: selectedFile.name,
+            type: selectedFile.type,
+          });
+        } catch (err) {
+          console.error("Error converting file to base64", err);
+        }
+      }
+    }
+
+    try {
+      await onSendMessage(finalPrompt, finalAttachments);
+    } catch (err) {
+      console.error("Send failed", err);
+      setInput(prevInput);
+    }
+  };
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    playScanSound();
+    setSelectedFile(file);
+  };
+
+  return (
+    <div className="w-full max-w-3xl mx-auto flex flex-col gap-2 relative mb-6">
+      {/* File Preview Capsule */}
+      {selectedFile && (
+        <div className="absolute -top-12 left-0 right-0 flex justify-center animate-in fade-in slide-in-from-bottom-2">
+          <div className="bg-white/90 backdrop-blur border border-purple-100 shadow-sm rounded-full px-4 py-1 flex items-center gap-2 text-xs text-purple-600 font-medium">
+            <Paperclip size={12} className="opacity-50" />
+            <span>{selectedFile.name}</span>
+            <button
+              onClick={() => setSelectedFile(null)}
+              className="ml-2 hover:bg-purple-50 rounded-full p-1 transition-colors"
+            >
+              x
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Main Input Capsule */}
+      <form onSubmit={handleSend} className="relative w-full">
+        <div className="neo-capsule flex items-center gap-2 pr-2 overflow-hidden">
+          <input
+            type="file"
+            ref={fileInputRef}
+            className="hidden"
+            onChange={handleFileSelect}
+            accept="image/*,.txt,.md,.pdf,.csv,.json"
+          />
+
+          <button
+            type="button"
+            className="p-2 text-gray-400 hover:text-purple-500 transition-colors rounded-full hover:bg-[var(--wadi-surface-hover)]"
+            onClick={() => fileInputRef.current?.click()}
+            disabled={isLoading}
+          >
+            <IconAttach />
+          </button>
+
+          <input
+            id="wadi-user-input"
+            name="userInput"
+            type="text"
+            ref={inputRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder={
+              activeFocus
+                ? "Estamos en un foco activo. ¿Qué opinás?"
+                : "Preguntá o instruye a WADI..."
+            }
+            className="flex-1 bg-transparent border-none outline-none text-[var(--wadi-text)] placeholder:text-[var(--wadi-text-dim)] text-sm font-medium h-full min-h-[24px]"
+            autoComplete="off"
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                handleSend();
+              }
+            }}
+          />
+
+          <button
+            type="submit"
+            disabled={(!input.trim() && !selectedFile) || isLoading}
+            className={`p-2 rounded-full transition-all duration-300 ${
+              input.trim() || selectedFile
+                ? "bg-[var(--wadi-primary)] text-white shadow-md hover:scale-105"
+                : "bg-gray-100/10 text-gray-500"
+            }`}
+          >
+            <IconSend />
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

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

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+
+interface TooltipProps {
+  content: string;
+  children: React.ReactNode;
+  position?: "top" | "bottom" | "left" | "right";
+  delay?: number;
+}
+
+export function Tooltip({
+  content,
+  children,
+  position = "bottom",
+  delay = 200,
+}: TooltipProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
+
+  const showTooltip = () => {
+    const id = setTimeout(() => setIsVisible(true), delay);
+    setTimeoutId(id);
+  };
+
+  const hideTooltip = () => {
+    if (timeoutId) clearTimeout(timeoutId);
+    setIsVisible(false);
+  };
+
+  const positionClasses = {
+    top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+    bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+    left: "right-full top-1/2 -translate-y-1/2 mr-2",
+    right: "left-full top-1/2 -translate-y-1/2 ml-2",
+  };
+
+  return (
+    <div
+      className="relative inline-flex items-center"
+      onMouseEnter={showTooltip}
+      onMouseLeave={hideTooltip}
+      onFocus={showTooltip}
+      onBlur={hideTooltip}
+    >
+      {children}
+      {isVisible && (
+        <div
+          role="tooltip"
+          className={`absolute z-50 whitespace-nowrap bg-zinc-900 border border-zinc-700 text-zinc-100 text-xs px-2 py-1 rounded shadow-lg transition-opacity duration-200 animate-in fade-in zoom-in-95 ${positionClasses[position]}`}
+        >
+          {content}
+          {/* Arrow */}
+          <div
+            className={`absolute w-2 h-2 bg-zinc-900 border-zinc-700 transform rotate-45 ${
+              position === "top"
+                ? "bottom-[-5px] left-1/2 -translate-x-1/2 border-b border-r"
+                : position === "bottom"
+                  ? "top-[-5px] left-1/2 -translate-x-1/2 border-t border-l"
+                  : position === "left"
+                    ? "right-[-5px] top-1/2 -translate-y-1/2 border-t border-r"
+                    : "left-[-5px] top-1/2 -translate-y-1/2 border-b border-l"
+            }`}
+          ></div>
+        </div>
+      )}
+    </div>
+  );
+}

package/apps/frontend/src/config/chatShortcuts.ts

@@ -0,0 +1,20 @@
+export const chatShortcuts = [
+  {
+    label: "🧠 Tengo una idea mediocre, hacela brillante",
+    prompt: "Tengo una idea mediocre, hacela brillante",
+  },
+  {
+    label: "🗓️ Organizá mi semana antes de que me ahogue en caos",
+    prompt: "Organizá mi semana antes de que me ahogue en caos",
+  },
+  {
+    label: "🧪 Opiná sobre algo que todavía no existe",
+    prompt:
+      "Opiná sobre algo que todavía no existe y decime por qué va a fallar",
+  },
+  {
+    label: "❓ Explicame esto como si tuviera 3 neuronas",
+    prompt:
+      "Explicame esto como si tuviera 3 neuronas, sé cruel pero educativo",
+  },
+];

package/apps/frontend/src/config/supabase.ts

@@ -0,0 +1,6 @@
+import { createClient } from "@supabase/supabase-js";
+
+export const supabase = createClient(
+  import.meta.env.VITE_SUPABASE_URL || "",
+  import.meta.env.VITE_SUPABASE_KEY || ""
+);

package/apps/frontend/src/final_status.txt

@@ -0,0 +1,3 @@
+Neo-Y2K
+Final
+Check

package/apps/frontend/src/hooks/useScouter.ts

@@ -0,0 +1,28 @@
+export type AudioContextState = "suspended" | "running" | "closed";
+
+export function useScouter() {
+  // WADI AUDIO PROTOCOL - DISABLED
+  // All audio logic has been stripped as per instructions.
+
+  // No-op functions to satisfy interface
+  const playScanSound = () => {};
+  const playAlertSound = () => {};
+  const playCrystallizeSound = () => {};
+  const playDeathSound = () => {};
+  const playYawnSound = () => {};
+  const initAmbientHum = () => {};
+  const setAmbientIntensity = (_level: "normal" | "high") => {
+    void _level;
+  };
+
+  return {
+    playScanSound,
+    playAlertSound,
+    playCrystallizeSound,
+    playDeathSound,
+    playYawnSound,
+    initAmbientHum,
+    setAmbientIntensity,
+    audioState: "suspended" as AudioContextState,
+  };
+}

package/apps/frontend/src/hooks/useStoreHydration.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import { useChatStore } from "../store/chatStore";
+
+export const useStoreHydration = () => {
+  const [hydrated, setHydrated] = useState(() => {
+    return useChatStore.persist.hasHydrated();
+  });
+
+  useEffect(() => {
+    const unsub = useChatStore.persist.onFinishHydration(() => {
+      setHydrated(true);
+    });
+
+    if (useChatStore.persist.hasHydrated() && !hydrated) {
+      setTimeout(() => setHydrated(true), 0);
+    }
+
+    return () => {
+      if (unsub) unsub();
+    };
+  }, [hydrated]);
+
+  return hydrated;
+};