wadi 1.0.0

package/apps/frontend/src/improvement_status.txt

@@ -0,0 +1,5 @@
+MONDAY
+OS
+Neo-Y2K
+Upgrade
+Complete

package/apps/frontend/src/index.css

@@ -0,0 +1,88 @@
+@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  /* WADI DARK MODE PALETTE */
+  --wadi-bg: #0f111a; /* Deep Bunker */
+  --wadi-surface: rgba(30, 41, 59, 0.6); /* Glass Slate */
+  --wadi-surface-hover: rgba(30, 41, 59, 0.9);
+
+  --wadi-primary: #8b5cf6; /* Electric Lavender */
+  --wadi-primary-dim: rgba(139, 92, 246, 0.2);
+  --wadi-primary-glow: rgba(139, 92, 246, 0.1);
+
+  --wadi-sky: #38bdf8; /* Digital Sky */
+  --wadi-amber: #fbbf24;
+  --wadi-red: #ef4444;
+  --wadi-gray: #64748b;
+
+  --wadi-text: #f8fafc; /* Slate 50 */
+  --wadi-text-dim: #94a3b8; /* Slate 400 */
+
+  --wadi-border: rgba(139, 92, 246, 0.2);
+  --wadi-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
+}
+
+@layer base {
+  html,
+  body,
+  #root {
+    background: var(--wadi-bg);
+    color: var(--wadi-text);
+    font-family: "Outfit", sans-serif;
+    height: 100vh;
+    height: 100dvh;
+    width: 100vw;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    cursor: default;
+  }
+
+  /* Smooth Scrolling */
+  * {
+    scroll-behavior: smooth;
+  }
+
+  /* Custom Scrollbar (Subtle) */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: rgba(139, 92, 246, 0.2);
+    border-radius: 99px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(139, 92, 246, 0.4);
+  }
+}
+
+@layer components {
+  /* GLASSMORPHISM UTILITIES */
+  .neo-glass {
+    @apply bg-[var(--wadi-surface)] backdrop-blur-md border border-[var(--wadi-border)] shadow-lg;
+  }
+
+  .neo-capsule {
+    @apply rounded-full bg-[var(--wadi-surface)] text-[var(--wadi-text)] shadow-lg border border-[var(--wadi-border)] px-6 py-3 transition-all hover:shadow-xl focus-within:shadow-xl focus-within:border-[var(--wadi-primary)] focus-within:ring-2 focus-within:ring-[var(--wadi-primary-dim)];
+  }
+
+  .wadi-btn-primary {
+    @apply relative px-6 py-3 rounded-2xl bg-[var(--wadi-primary)] text-white font-medium text-sm tracking-wide transition-all duration-300 hover:shadow-[0_4px_20px_var(--wadi-primary-dim)] hover:-translate-y-0.5 active:translate-y-0 shadow-lg;
+  }
+
+  .bubble-wadi {
+    @apply bg-purple-900/30 backdrop-blur-sm border border-purple-500/30 text-[var(--wadi-text)] text-sm p-4 my-2 max-w-[85%] rounded-2xl rounded-tl-sm shadow-sm;
+  }
+
+  .bubble-user {
+    @apply bg-slate-800/70 backdrop-blur-md border border-slate-700 text-[var(--wadi-text)] text-sm p-4 my-2 max-w-[80%] rounded-2xl rounded-tr-sm ml-auto shadow-sm;
+  }
+}

package/apps/frontend/src/main.tsx

@@ -0,0 +1,62 @@
+// WADI Frontend Entry Point (Force Rebuild)
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { RouterProvider } from "react-router-dom";
+import { router } from "./router";
+import { useChatStore, type Message } from "./store/chatStore";
+
+import "./index.css";
+
+// 1. Service Worker Registration
+// 1. Service Worker Registration
+if ("serviceWorker" in navigator) {
+  window.addEventListener("load", () => {
+    navigator.serviceWorker
+      .register("/sw.js")
+      .then((registration) => {
+        console.log(
+          "[WADI_SYSTEM]: Service Worker registrado. Alcance:",
+          registration.scope
+        );
+      })
+      .catch((error) => {
+        console.error("[WADI_ERROR]: Fallo en registro de SW:", error);
+      });
+  });
+}
+
+// 2. Monday's Standalone Detection
+const isStandalone =
+  window.matchMedia("(display-mode: standalone)").matches ||
+  // @ts-expect-error - navigator.standalone is iOS legacy
+  window.navigator.standalone === true;
+
+if (isStandalone) {
+  const hasGreetedPWA = sessionStorage.getItem("wadi_pwa_greeted");
+  if (!hasGreetedPWA) {
+    // Inject secret message via Store (outside React)
+    const pwaMsg: Message = {
+      id: "sys-pwa-" + Date.now(),
+      role: "assistant", // Using assistant role for Monday's voice
+      content: "Veo que me instalaste. No hay salida, Usuario. Empecemos.",
+      created_at: new Date().toISOString(),
+    };
+
+    // We append to messages directly using zustand setState
+    useChatStore.setState((state) => ({
+      messages: [...state.messages, pwaMsg],
+    }));
+
+    sessionStorage.setItem("wadi_pwa_greeted", "true");
+  }
+}
+
+import { ErrorBoundary } from "./components/ErrorBoundary";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ErrorBoundary>
+      <RouterProvider router={router} />
+    </ErrorBoundary>
+  </StrictMode>
+);

package/apps/frontend/src/monday_status.txt

@@ -0,0 +1,7 @@
+MONDAY
+OS
+v3.5
+-
+The
+Bunker
+Edition

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

@@ -0,0 +1,201 @@
+import { useRef, useEffect, useState, useLayoutEffect } from "react";
+import { useParams } from "react-router-dom";
+import { Layout } from "../components/Layout";
+import { useChatStore, type Attachment } from "../store/chatStore";
+import { useStoreHydration } from "../hooks/useStoreHydration";
+
+import { TerminalInput } from "../components/ui/TerminalInput";
+import { Scouter } from "../components/ui/Scouter";
+import { AuditorHeader } from "../components/auditor/AuditorHeader";
+import { DataDeconstructor } from "../components/auditor/DataDeconstructor";
+import { Dropzone } from "../components/auditor/Dropzone";
+import { MessageBubble } from "../components/MessageBubble";
+
+export default function ChatPage() {
+  const { conversationId } = useParams();
+  const hydrated = useStoreHydration();
+
+  const {
+    messages,
+    isLoading,
+    sendMessage,
+    loadConversations,
+    resetChat,
+    loadConversation,
+    conversationId: storeConversationId,
+    activeFocus,
+  } = useChatStore();
+
+  // Load conversation on mount/param change
+  useEffect(() => {
+    loadConversations();
+    if (conversationId) {
+      if (conversationId !== storeConversationId) {
+        loadConversation(conversationId);
+      }
+    } else {
+      if (storeConversationId) resetChat();
+    }
+  }, [
+    conversationId,
+    loadConversation,
+    resetChat,
+    storeConversationId,
+    loadConversations,
+  ]);
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [shouldAutoScroll, setShouldAutoScroll] = useState(true);
+  const prevMessagesLength = useRef(0);
+
+  // Scroll Handling
+  const handleScroll = () => {
+    if (!scrollContainerRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } =
+      scrollContainerRef.current;
+    const isNearBottom = scrollHeight - scrollTop - clientHeight < 100;
+    setShouldAutoScroll(isNearBottom);
+  };
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  useLayoutEffect(() => {
+    const newCount = messages.length;
+    const oldCount = prevMessagesLength.current;
+
+    if (newCount > oldCount) {
+      const lastMsg = messages[newCount - 1];
+      const isMyMessage = lastMsg.role === "user";
+
+      if (isMyMessage || shouldAutoScroll) {
+        scrollToBottom();
+      }
+    }
+    prevMessagesLength.current = newCount;
+  }, [messages, shouldAutoScroll]);
+
+  // Handle message sending
+  const handleSendMessage = async (
+    text: string,
+    attachments: Attachment[] = []
+  ) => {
+    if (!text.trim() && attachments.length === 0) return;
+    await sendMessage(text, attachments);
+  };
+
+  const hasMessages = messages.length > 0;
+
+  if (!hydrated) return null;
+
+  return (
+    <Layout>
+      <Scouter />
+      <Dropzone />
+
+      <div className="flex h-full max-w-7xl mx-auto w-full gap-4 pt-16 md:pt-4 px-2 md:px-0">
+        {/* Main Chat Area */}
+        <div className="flex-1 flex flex-col h-full relative z-10 transition-all duration-500">
+          {!hasMessages ? (
+            // WADI MODERN EMPTY STATE
+            <div className="flex-1 flex flex-col items-center justify-center p-8 space-y-8 animate-in fade-in zoom-in duration-500">
+              <div className="relative group">
+                <div className="w-24 h-24 rounded-full bg-[var(--wadi-surface)] backdrop-blur-xl border border-[var(--wadi-border)] shadow-[0_0_40px_rgba(139,92,246,0.15)] flex items-center justify-center transition-transform group-hover:scale-110 duration-500">
+                  <div className="w-16 h-16 rounded-full bg-gradient-to-tr from-[#8B5CF6] to-[#38bdf8] opacity-80 animate-pulse-soft"></div>
+                </div>
+              </div>
+
+              <div className="text-center space-y-2 max-w-md">
+                <h1 className="text-3xl font-semibold text-[var(--wadi-text)] tracking-tight">
+                  Hola, soy WADI.
+                </h1>
+                <p className="text-[var(--wadi-text-dim)] text-lg font-light">
+                  ¿En qué plan estamos hoy?
+                </p>
+              </div>
+
+              {/* Minimalist Action Prompt - Buttons Removed per instruction */}
+              <div className="opacity-50 text-xs text-[var(--wadi-text-dim)] uppercase tracking-widest">
+                Esperando instrucción...
+              </div>
+            </div>
+          ) : (
+            // Message List
+            <div
+              className="flex-1 overflow-y-auto px-2 md:px-4 py-4 space-y-6 scrollbar-hide"
+              ref={scrollContainerRef}
+              onScroll={handleScroll}
+            >
+              <AuditorHeader />
+
+              {messages.map((message) => {
+                // Check if message triggers special UI
+                const isDeconstruct = message.content.includes(
+                  "[DECONSTRUCT_START]"
+                );
+                let displayContent = message.content;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                let deconstructItems: any[] = [];
+
+                if (isDeconstruct) {
+                  try {
+                    const jsonMatch = message.content.match(
+                      /\[DECONSTRUCT_START\]([\s\S]*?)\[DECONSTRUCT_END\]/
+                    );
+                    if (jsonMatch && jsonMatch[1]) {
+                      deconstructItems = JSON.parse(jsonMatch[1]);
+                      displayContent = message.content
+                        .replace(jsonMatch[0], "")
+                        .trim();
+                    }
+                  } catch (e) {
+                    console.error("Deconstruct Parse Error", e);
+                  }
+                }
+
+                return (
+                  <div key={message.id} className="space-y-4">
+                    <MessageBubble
+                      role={message.role === "assistant" ? "assistant" : "user"}
+                      content={displayContent}
+                      timestamp={message.created_at}
+                    />
+                    {deconstructItems.length > 0 && (
+                      <DataDeconstructor items={deconstructItems} />
+                    )}
+                  </div>
+                );
+              })}
+              <div ref={messagesEndRef} className="h-4" />
+            </div>
+          )}
+
+          {/* Floating Input Area */}
+          <div className="w-full px-4 pb-4 md:px-0 z-20">
+            <TerminalInput
+              onSendMessage={handleSendMessage}
+              isLoading={isLoading}
+              activeFocus={activeFocus}
+            />
+          </div>
+        </div>
+
+        {/* Side Panel (Context - Desktop Only - Subtle) */}
+        {!hasMessages && (
+          <div className="hidden lg:block w-[300px] h-full p-6 pt-24 opacity-40 pointer-events-none select-none transition-opacity duration-1000">
+            <div className="border-l border-slate-200 pl-6 space-y-8">
+              <div>
+                <h3 className="text-[10px] uppercase tracking-widest text-slate-400 mb-2">
+                  Estado Neural
+                </h3>
+                <div className="text-slate-300 text-xs">Sincronizado</div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </Layout>
+  );
+}