wadi 1.0.0

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

@@ -0,0 +1,52 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+};
+
+type State = {
+  hasError: boolean;
+  error?: Error;
+};
+
+export class ErrorBoundary extends Component<Props, State> {
+  state: State = { hasError: false };
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("Uncaught error:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex flex-col items-center justify-center min-h-screen bg-[var(--wadi-bg)] text-[var(--wadi-alert)] p-8 text-center font-mono-wadi">
+          <h1 className="text-4xl font-bold mb-4">
+            💥 CRITICAL SYSTEM FAILURE
+          </h1>
+          <p className="text-xl text-[var(--wadi-text)] mb-8">
+            Ni siquiera WADI puede fingir que esto está bien.
+          </p>
+          <div className="bg-black/50 p-4 rounded border border-[var(--wadi-alert)]/30 text-left max-w-2xl overflow-auto text-xs text-red-300">
+            <p className="font-bold mb-2">ERROR TRACE:</p>
+            <pre>{this.state.error?.message}</pre>
+            <pre className="mt-2 text-[var(--wadi-text-muted)] opacity-50">
+              {this.state.error?.stack}
+            </pre>
+          </div>
+          <button
+            onClick={() => window.location.reload()}
+            className="mt-8 px-6 py-2 bg-[var(--wadi-alert)] text-white rounded hover:bg-red-600 transition-colors uppercase font-bold tracking-widest"
+          >
+            PURGAR & REINICIAR (F5)
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

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

@@ -0,0 +1,201 @@
+import { useState } from "react";
+import type { KeyboardEvent } from "react";
+
+interface InputAreaProps {
+  onSend: (text: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  suggestions?: string[];
+}
+
+export function InputArea({
+  onSend,
+  disabled,
+  placeholder,
+  suggestions,
+}: InputAreaProps) {
+  const [text, setText] = useState("");
+
+  const handleSend = () => {
+    if (!text.trim() || disabled) return;
+    onSend(text);
+    setText("");
+    // Reset height manually if needed, though state change might cause re-render which resets style if we were not careful.
+    // Ideally we reset height via ref, but let's stick to the simple onInput for now.
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+      // Reset height
+      (e.target as HTMLTextAreaElement).style.height = "auto";
+    }
+  };
+
+  return (
+    <div
+      style={{
+        padding: "1rem 1.5rem 1.5rem",
+        borderTop: "1px solid var(--color-border)",
+        backgroundColor: "var(--color-bg)",
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.75rem",
+        position: "sticky",
+        bottom: 0,
+        zIndex: 10,
+        transition: "background-color 0.2s",
+      }}
+    >
+      {/* Suggestions */}
+      {suggestions && suggestions.length > 0 && (
+        <div
+          style={{
+            display: "flex",
+            gap: "0.5rem",
+            overflowX: "auto",
+            paddingBottom: "0.5rem",
+            scrollbarWidth: "none", // Hide scrollbar for cleaner look
+          }}
+        >
+          {suggestions.map((s, i) => (
+            <button
+              key={i}
+              onClick={() => onSend(s)}
+              disabled={disabled}
+              style={{
+                fontSize: "var(--text-xs)",
+                padding: "0.4rem 1rem",
+                backgroundColor: "var(--color-surface)",
+                color: "var(--color-text-soft)",
+                borderRadius: "999px",
+                border: "1px solid var(--color-border)",
+                whiteSpace: "nowrap",
+                cursor: disabled ? "default" : "pointer",
+                transition: "all 0.2s",
+              }}
+              onMouseEnter={(e) => {
+                if (!disabled) {
+                  e.currentTarget.style.backgroundColor =
+                    "var(--color-surface-soft)";
+                  e.currentTarget.style.borderColor = "var(--color-primary)";
+                  e.currentTarget.style.color = "var(--color-primary)";
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (!disabled) {
+                  e.currentTarget.style.backgroundColor =
+                    "var(--color-surface)";
+                  e.currentTarget.style.borderColor = "var(--color-border)";
+                  e.currentTarget.style.color = "var(--color-text-soft)";
+                }
+              }}
+            >
+              {s}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Input Container */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "flex-end",
+          gap: "0.75rem",
+          backgroundColor: "var(--color-surface)",
+          padding: "0.75rem 1rem",
+          borderRadius: "1.5rem", // More rounded
+          border: "1px solid var(--color-border)",
+          transition: "border-color 0.2s, box-shadow 0.2s",
+        }}
+        onFocus={(e) => {
+          e.currentTarget.style.borderColor = "var(--color-primary)";
+          e.currentTarget.style.boxShadow = "0 0 0 2px rgba(139, 92, 246, 0.1)";
+        }}
+        onBlur={(e) => {
+          e.currentTarget.style.borderColor = "var(--color-border)";
+          e.currentTarget.style.boxShadow = "none";
+        }}
+      >
+        <textarea
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder || "Escribe un mensaje..."}
+          disabled={disabled}
+          rows={1}
+          style={{
+            flex: 1,
+            resize: "none",
+            maxHeight: "120px",
+            minHeight: "24px",
+            padding: "0.25rem 0",
+            background: "transparent",
+            border: "none",
+            outline: "none",
+            fontSize: "var(--text-base)",
+            color: "var(--color-text-main)",
+            fontFamily: "var(--font-sans)",
+            lineHeight: 1.5,
+          }}
+          onInput={(e) => {
+            const target = e.target as HTMLTextAreaElement;
+            target.style.height = "auto";
+            target.style.height = `${Math.min(target.scrollHeight, 120)}px`;
+          }}
+        />
+        <button
+          onClick={handleSend}
+          disabled={!text.trim() || disabled}
+          style={{
+            padding: "0.5rem",
+            borderRadius: "50%",
+            backgroundColor:
+              text.trim() && !disabled
+                ? "var(--color-primary)"
+                : "var(--color-surface-soft)",
+            color:
+              text.trim() && !disabled ? "white" : "var(--color-text-soft)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "44px",
+            height: "44px",
+            transition: "all 0.2s",
+            cursor: text.trim() && !disabled ? "pointer" : "default",
+            opacity: disabled ? 0.7 : 1,
+          }}
+          aria-label="Enviar"
+        >
+          {/* Simple Arrow Icon */}
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <line x1="22" y1="2" x2="11" y2="13"></line>
+            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+          </svg>
+        </button>
+      </div>
+
+      <small
+        style={{
+          textAlign: "center",
+          opacity: 0.6,
+          fontSize: "0.75rem",
+          color: "var(--color-text-soft)",
+        }}
+      >
+        WADI puede cometer errores. Verifica la información importante.
+      </small>
+    </div>
+  );
+}

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

@@ -0,0 +1,73 @@
+import { type ReactNode } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { Sidebar } from "./Sidebar";
+import { useChatStore } from "../store/chatStore";
+import { Menu, Plus } from "lucide-react";
+
+interface LayoutProps {
+  children: ReactNode;
+}
+
+export function Layout({ children }: LayoutProps) {
+  const { isSidebarOpen, setSidebarOpen, toggleSidebar, resetChat } =
+    useChatStore();
+  const navigate = useNavigate();
+
+  const handleNewChat = () => {
+    resetChat();
+    navigate("/chat");
+    setSidebarOpen(false);
+  };
+
+  return (
+    <div className="flex w-full h-screen min-h-screen relative overflow-hidden bg-[var(--wadi-bg)] text-[var(--wadi-text)]">
+      {/* Mobile Sidebar Overlay */}
+      {isSidebarOpen && (
+        <div
+          className="lg:hidden fixed inset-0 z-40 bg-black/50 backdrop-blur-sm transition-opacity"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      {/* Sidebar - Visible on Desktop, Drawer on Mobile */}
+      <div
+        className={`fixed lg:relative z-50 h-full transition-transform duration-300 lg:transform-none ${
+          isSidebarOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
+        }`}
+      >
+        <Sidebar isOpen={isSidebarOpen} onClose={() => setSidebarOpen(false)} />
+      </div>
+
+      <div className="flex-1 flex flex-col relative w-full overflow-hidden bg-[var(--wadi-bg)]">
+        {/* Mobile Top Bar */}
+        <div className="lg:hidden h-[60px] border-b border-[var(--wadi-border)] bg-[var(--wadi-surface)] backdrop-blur-md flex items-center justify-between px-4 shrink-0 z-30 shadow-sm relative">
+          <div className="flex items-center gap-3">
+            <button
+              onClick={toggleSidebar}
+              className="text-[var(--wadi-text-dim)] p-2 rounded-lg hover:bg-[var(--wadi-surface-hover)] transition-colors"
+              aria-label="Abrir menú"
+            >
+              <Menu size={20} />
+            </button>
+            <Link to="/" className="flex items-center gap-2 no-underline">
+              <span className="font-bold text-lg text-[var(--wadi-text)] tracking-tight">
+                WADI
+              </span>
+            </Link>
+          </div>
+
+          <button
+            onClick={handleNewChat}
+            className="p-2 bg-[var(--wadi-primary)] text-white rounded-full shadow-md active:scale-95 transition-transform"
+          >
+            <Plus size={20} />
+          </button>
+        </div>
+
+        <main className="flex-1 overflow-hidden relative flex flex-col">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,66 @@
+import type { Attachment } from "../store/chatStore";
+
+interface MessageBubbleProps {
+  role: "user" | "assistant";
+  content: string;
+  timestamp?: string;
+  attachments?: Attachment[];
+}
+
+export function MessageBubble({
+  role,
+  content,
+  timestamp,
+}: MessageBubbleProps) {
+  const isUser = role === "user";
+
+  return (
+    <div
+      className={`flex flex-col mb-4 w-full ${isUser ? "items-end" : "items-start"}`}
+    >
+      <div className={isUser ? "bubble-user" : "bubble-wadi"}>
+        {isUser ? (
+          <div className="whitespace-pre-wrap">{content}</div>
+        ) : (
+          <div>
+            {content.split(/(?=^#{1,3}\s)/m).map((block, i) => {
+              // Simple markdown header parsing for WADI structure
+              const match = block.match(/^(#{1,3})\s+(.+)(\r?\n|$)/);
+              if (match) {
+                const title = match[2].trim();
+                const body = block.replace(match[0], "").trim();
+                return (
+                  <div key={i} className="mb-4 last:mb-0">
+                    <div className="font-bold text-[1.05em] mb-1 text-[var(--wadi-primary)]">
+                      {title}
+                    </div>
+                    <div className="whitespace-pre-wrap leading-relaxed text-[var(--wadi-text-muted)] font-light">
+                      {body}
+                    </div>
+                  </div>
+                );
+              }
+              return (
+                <div
+                  key={i}
+                  className="whitespace-pre-wrap leading-relaxed text-[var(--wadi-text-muted)] font-light"
+                >
+                  {block.trim()}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {timestamp && (
+        <span className="text-[10px] text-[var(--wadi-text-dim)] px-2 mt-1">
+          {new Date(timestamp).toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit",
+          })}
+        </span>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,108 @@
+import { Button } from "./common/Button";
+
+interface OnboardingModalProps {
+  onComplete: () => void;
+}
+
+export function OnboardingModal({ onComplete }: OnboardingModalProps) {
+  return (
+    <div
+      style={{
+        position: "fixed",
+        inset: 0,
+        backgroundColor: "var(--color-bg)",
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "1.5rem",
+      }}
+    >
+      <div
+        style={{
+          maxWidth: "420px",
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          gap: "2rem",
+          alignItems: "flex-start", // Left align as per "serious" look usually, but centering might be better for intro. Let's try centered for focus.
+          textAlign: "left", // Actually, serious text looks good left-aligned often, but let's stick to a clean centered or left layout.
+          // User didn't specify alignment, but "Copy textual" suggests reading.
+          // Let's center the container but maybe left align text for readability?
+          // "Título: WADI no charla..." - Centered is probably safer for a splash screen.
+        }}
+      >
+        <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+          <h1
+            style={{
+              fontSize: "2rem",
+              fontWeight: 700,
+              lineHeight: "1.1",
+              margin: 0,
+              background: "var(--grad-main)",
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+            }}
+          >
+            WADI no charla.
+            <br />
+            Piensa con vos.
+          </h1>
+
+          <div
+            style={{
+              fontSize: "1.1rem",
+              color: "var(--color-text-soft)",
+              lineHeight: "1.6",
+              display: "flex",
+              flexDirection: "column",
+              gap: "0.25rem",
+            }}
+          >
+            <p style={{ margin: 0 }}>No hace magia.</p>
+            <p style={{ margin: 0 }}>No valida ideas flojas.</p>
+            <p style={{ margin: 0 }}>
+              Si algo está desordenado, lo ordena avanzando.
+            </p>
+          </div>
+        </div>
+
+        <div
+          style={{ width: "100%", borderTop: "1px solid var(--color-border)" }}
+        />
+
+        <div
+          style={{
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            gap: "1.5rem",
+          }}
+        >
+          <p
+            style={{
+              margin: 0,
+              color: "var(--color-text-main)",
+              fontWeight: 500,
+            }}
+          >
+            Escribí lo primero que tengas. Aunque esté mal.
+          </p>
+
+          <Button
+            variant="primary"
+            onClick={onComplete}
+            style={{
+              width: "100%",
+              justifyContent: "center",
+              padding: "1rem",
+              fontSize: "1.1rem",
+            }}
+          >
+            Empezar
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,187 @@
+import { useState } from "react";
+import { useChatStore, type ChatMode } from "../store/chatStore";
+
+interface SettingsModalProps {
+  onClose: () => void;
+}
+
+export function SettingsModal({ onClose }: SettingsModalProps) {
+  const { settings, updateSettings, exportData, clearAllChats } =
+    useChatStore();
+  const [activeTab, setActiveTab] = useState<"general" | "persona" | "data">(
+    "general"
+  );
+
+  return (
+    <div className="fixed inset-0 z-[200] flex items-center justify-center bg-black/80 backdrop-blur-sm animate-in fade-in duration-200">
+      <div className="w-[90%] max-w-[500px] bg-[var(--wadi-bg)] border border-[var(--wadi-primary)] shadow-[0_0_30px_rgba(var(--wadi-primary-rgb),0.2)] rounded-lg overflow-hidden flex flex-col h-[500px]">
+        {/* Header */}
+        <div className="p-4 border-b border-[var(--wadi-border)] flex justify-between items-center bg-[var(--wadi-surface)]/50">
+          <h2 className="font-mono-wadi text-sm font-bold text-[var(--wadi-primary)] uppercase tracking-wider">
+            [CONFIGURACIÓN_DEL_SISTEMA]
+          </h2>
+          <button
+            onClick={onClose}
+            className="text-[var(--wadi-text-secondary)] hover:text-[var(--wadi-text)] transition-colors text-xs"
+          >
+            [X]
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex border-b border-[var(--wadi-border)] bg-[var(--wadi-bg)]">
+          {(["general", "persona", "data"] as const).map((tab) => (
+            <button
+              key={tab}
+              onClick={() => setActiveTab(tab)}
+              className={`flex-1 py-3 text-xs font-mono-wadi uppercase tracking-widest transition-colors ${
+                activeTab === tab
+                  ? "bg-[var(--wadi-primary)] text-black font-bold"
+                  : "text-[var(--wadi-text-muted)] hover:text-[var(--wadi-text)] hover:bg-[var(--wadi-surface)]"
+              }`}
+            >
+              {tab}
+            </button>
+          ))}
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-6 space-y-8 custom-scrollbar">
+          {activeTab === "general" && (
+            <div className="space-y-6">
+              <div className="space-y-2">
+                <label className="text-xs font-mono-wadi text-[var(--wadi-text-secondary)] uppercase">
+                  Idioma de Interfaz
+                </label>
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => updateSettings({ language: "es" })}
+                    className={`flex-1 px-4 py-2 border rounded text-xs font-mono-wadi transition-all ${
+                      settings.language === "es"
+                        ? "border-[var(--wadi-primary)] bg-[var(--wadi-primary)]/10 text-[var(--wadi-primary)]"
+                        : "border-[var(--wadi-border)] text-[var(--wadi-text-muted)] hover:border-[var(--wadi-text-muted)]"
+                    }`}
+                  >
+                    Español
+                  </button>
+                  <button
+                    onClick={() => updateSettings({ language: "en" })}
+                    className={`flex-1 px-4 py-2 border rounded text-xs font-mono-wadi transition-all ${
+                      settings.language === "en"
+                        ? "border-[var(--wadi-primary)] bg-[var(--wadi-primary)]/10 text-[var(--wadi-primary)]"
+                        : "border-[var(--wadi-border)] text-[var(--wadi-text-muted)] hover:border-[var(--wadi-text-muted)]"
+                    }`}
+                  >
+                    English
+                  </button>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-xs font-mono-wadi text-[var(--wadi-text-secondary)] uppercase">
+                  Tema Visual
+                </label>
+                <div className="grid grid-cols-3 gap-2">
+                  {(["light", "dark", "system"] as const).map((theme) => (
+                    <button
+                      key={theme}
+                      onClick={() => updateSettings({ theme })}
+                      className={`px-2 py-2 border rounded text-xs font-mono-wadi transition-all uppercase ${
+                        settings.theme === theme
+                          ? "border-[var(--wadi-primary)] bg-[var(--wadi-primary)]/10 text-[var(--wadi-primary)]"
+                          : "border-[var(--wadi-border)] text-[var(--wadi-text-muted)] hover:border-[var(--wadi-text-muted)]"
+                      }`}
+                    >
+                      {theme}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {activeTab === "persona" && (
+            <div className="space-y-6">
+              <div className="space-y-2">
+                <div className="flex justify-between items-center mb-1">
+                  <label className="text-xs font-mono-wadi text-[var(--wadi-text-secondary)] uppercase">
+                    Nivel de Sarcasmo
+                  </label>
+                  <span className="text-xs font-mono-wadi text-[var(--wadi-primary)]">
+                    {settings.sarcasmLevel}%
+                  </span>
+                </div>
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  step="10"
+                  value={settings.sarcasmLevel}
+                  onChange={(e) =>
+                    updateSettings({ sarcasmLevel: parseInt(e.target.value) })
+                  }
+                  className="w-full h-1 bg-[var(--wadi-border)] rounded-lg appearance-none cursor-pointer accent-[var(--wadi-primary)]"
+                />
+                <div className="flex justify-between text-[10px] text-[var(--wadi-text-muted)] font-mono-wadi">
+                  <span>Sutil</span>
+                  <span>Nuclear</span>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-xs font-mono-wadi text-[var(--wadi-text-secondary)] uppercase">
+                  Modo por Defecto
+                </label>
+                <select
+                  value={settings.defaultMode}
+                  onChange={(e) =>
+                    updateSettings({ defaultMode: e.target.value as ChatMode })
+                  }
+                  className="w-full bg-[var(--wadi-surface)] border border-[var(--wadi-border)] text-[var(--wadi-text)] text-xs p-3 rounded font-mono-wadi outline-none focus:border-[var(--wadi-primary)]"
+                >
+                  <option value="normal">General (Compañero)</option>
+                  <option value="tech">Tech (Técnico)</option>
+                  <option value="biz">Biz (Negocios)</option>
+                  <option value="tutor">Tutor (Aprendizaje)</option>
+                </select>
+              </div>
+            </div>
+          )}
+
+          {activeTab === "data" && (
+            <div className="space-y-4">
+              <button
+                onClick={exportData}
+                className="w-full flex items-center justify-between p-4 border border-[var(--wadi-border)] rounded hover:bg-[var(--wadi-surface)] transition-colors group"
+              >
+                <span className="text-xs font-mono-wadi text-[var(--wadi-text)] uppercase">
+                  Exportar mis datos (JSON)
+                </span>
+                <span className="text-[var(--wadi-text-muted)] group-hover:text-[var(--wadi-primary)]">
+                  ↓
+                </span>
+              </button>
+
+              <button
+                onClick={() => {
+                  if (
+                    confirm("ESTO ES IRREVERSIBLE. ¿Borrar TODA la historia?")
+                  ) {
+                    clearAllChats();
+                    onClose();
+                  }
+                }}
+                className="w-full flex items-center justify-between p-4 border border-[var(--wadi-alert)]/30 rounded hover:bg-[var(--wadi-alert)]/10 transition-colors group text-[var(--wadi-alert)]"
+              >
+                <span className="text-xs font-mono-wadi uppercase">
+                  Quemar Archivos (Borrar Todo)
+                </span>
+                <span className="group-hover:animate-pulse">⚠️</span>
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}