fix(repo): shoud be fixed now

web-app/src/App.jsx

@@ -1,137 +0,0 @@
-import { useState, useEffect } from "react";
-import { Cpu, Database, Zap, Activity } from "lucide-react";
-
-function App() {
-  const [engineStatus, setEngineStatus] = useState(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    checkEngineHealth();
-  }, []);
-
-  const checkEngineHealth = async () => {
-    try {
-      const response = await fetch('/api/health');
-      const data = await response.json();
-      setEngineStatus(data);
-    } catch (error) {
-      console.error('Engine health check failed:', error);
-      setEngineStatus({ success: false, message: 'Engine offline' });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-violet-900">
-      <div className="container mx-auto px-4 py-8">
-        {/* Header */}
-        <header className="text-center mb-12">
-          <div className="flex items-center justify-center mb-4">
-            <Zap className="h-12 w-12 text-yellow-400 mr-3" />
-            <h1 className="text-4xl font-bold text-white">
-              CodeRED-Astra
-            </h1>
-          </div>
-          <p className="text-gray-300 text-lg">
-            Hackathon Project - React Frontend + Rust Engine
-          </p>
-        </header>
-
-        {/* Status Cards */}
-        <div className="grid md:grid-cols-2 gap-6 mb-8">
-          {/* React App Status */}
-          <div className="bg-white/10 backdrop-blur-lg rounded-lg p-6 border border-white/20">
-            <div className="flex items-center mb-4">
-              <Activity className="h-8 w-8 text-blue-400 mr-3" />
-              <h2 className="text-xl font-semibold text-white">React Frontend</h2>
-            </div>
-            <div className="text-green-400 font-medium">✓ Online</div>
-            <p className="text-gray-300 text-sm mt-2">
-              Vite + React development environment ready
-            </p>
-          </div>
-
-          {/* Rust Engine Status */}
-          <div className="bg-white/10 backdrop-blur-lg rounded-lg p-6 border border-white/20">
-            <div className="flex items-center mb-4">
-              <Cpu className="h-8 w-8 text-orange-400 mr-3" />
-              <h2 className="text-xl font-semibold text-white">Rust Engine</h2>
-            </div>
-            <div className={`font-medium ${loading ? 'text-yellow-400' : engineStatus?.success ? 'text-green-400' : 'text-red-400'}`}>
-              {loading ? '⏳ Checking...' : engineStatus?.success ? '✓ Online' : '✗ Offline'}
-            </div>
-            <p className="text-gray-300 text-sm mt-2">
-              {loading ? 'Connecting to engine...' : 
-               engineStatus?.success ? 'Engine responding normally' : 
-               'Engine may still be starting up'}
-            </p>
-          </div>
-        </div>
-
-        {/* Engine Details */}
-        {engineStatus?.success && (
-          <div className="bg-white/10 backdrop-blur-lg rounded-lg p-6 border border-white/20 mb-8">
-            <div className="flex items-center mb-4">
-              <Database className="h-6 w-6 text-purple-400 mr-3" />
-              <h3 className="text-lg font-semibold text-white">Engine Status</h3>
-            </div>
-            <div className="grid md:grid-cols-2 gap-4 text-sm">
-              <div>
-                <span className="text-gray-400">Status:</span>
-                <span className="text-white ml-2">{engineStatus.data?.status}</span>
-              </div>
-              <div>
-                <span className="text-gray-400">Last Check:</span>
-                <span className="text-white ml-2">
-                  {engineStatus.data?.timestamp ? new Date(engineStatus.data.timestamp).toLocaleTimeString() : 'N/A'}
-                </span>
-              </div>
-            </div>
-            {engineStatus.message && (
-              <div className="mt-3 p-3 bg-yellow-500/20 border border-yellow-500/30 rounded">
-                <span className="text-yellow-200 text-sm">{engineStatus.message}</span>
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Quick Actions */}
-        <div className="bg-white/10 backdrop-blur-lg rounded-lg p-6 border border-white/20">
-          <h3 className="text-lg font-semibold text-white mb-4">Quick Actions</h3>
-          <div className="flex flex-wrap gap-3">
-            <button 
-              onClick={checkEngineHealth}
-              className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
-            >
-              Refresh Status
-            </button>
-            <button 
-              onClick={() => window.open('/api/health', '_blank')}
-              className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors"
-            >
-              Test API Direct
-            </button>
-            <button 
-              onClick={() => alert('Add your hackathon features here!')}
-              className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors"
-            >
-              Add Feature
-            </button>
-          </div>
-        </div>
-
-        {/* Development Notes */}
-        <div className="mt-8 text-center text-gray-400 text-sm">
-          <p>🚀 Ready for hackathon development!</p>
-          <p className="mt-1">
-            Frontend team: Work in <code className="bg-white/10 px-1 rounded">web-app/src/</code> | 
-            Backend team: Work in <code className="bg-white/10 px-1 rounded">rust-engine/src/</code>
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default App;

web-app/src/app/index.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import ChatLayout from "src/components/layouts/chat-layout";
+
+function App() {
+  return (
+    <div className="min-h-screen bg-slate-900 text-white flex items-center justify-center p-6">
+      <ChatLayout />
+    </div>
+  );
+}
+
+export default App;

web-app/src/components/layouts/chat-layout.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import ChatHeader from "src/components/ui/chat/chat-header";
+import ChatWindow from "src/components/ui/chat/chat-window";
+import MessageInput from "src/components/ui/chat/message-input";
+
+export default function ChatLayout() {
+  const [messages, setMessages] = useState([
+    {
+      role: "assistant",
+      content: "Hello — I can help you with code, explanations, and more.",
+    },
+  ]);
+
+  function handleSend(text) {
+    const userMsg = { role: "user", content: text };
+    setMessages((s) => [...s, userMsg]);
+
+    // fake assistant reply after short delay
+    setTimeout(() => {
+      setMessages((s) => [
+        ...s,
+        { role: "assistant", content: `You said: ${text}` },
+      ]);
+    }, 600);
+  }
+
+  return (
+    <div className="flex flex-col h-[80vh] w-full max-w-3xl mx-auto rounded-lg overflow-hidden shadow-lg border border-slate-700">
+      <ChatHeader />
+      <ChatWindow messages={messages} />
+      <MessageInput onSend={handleSend} />
+    </div>
+  );
+}

web-app/src/components/ui/Button/DeleteButton.jsx

@@ -0,0 +1,19 @@
+import Button from 'react-bootstrap/Button';
+
+export default function DeleteButton({ onClick, variant = "outline-danger", children, ...props }) {
+  return (
+    <Button onClick={onClick} variant={variant} {...props}>
+      {children || "Delete"}{" "}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="currentColor"
+        className="bi bi-trash3"
+        viewBox="0 0 16 16"
+      >
+        <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5"/>
+      </svg>
+    </Button>
+  );
+}

web-app/src/components/ui/Button/NewChatButton.css

@@ -0,0 +1,13 @@
+.custom-btn {
+  background-color: white !important;
+  border: 2px solid #0F2862 !important;
+  color: #0F2862 !important;
+  transition: all 0.25s ease;
+}
+
+.custom-btn:hover,
+.custom-btn:focus {
+  background-color: #0F2862 !important;
+  color: white !important;
+  border-color: #0F2862 !important;
+}

web-app/src/components/ui/Button/NewChatButton.jsx

@@ -0,0 +1,19 @@
+import Button from 'react-bootstrap/Button';
+import './NewChatButton.css'
+export default function NewChatButton({ onClick, variant = "outline-light", children, ...props }) {
+  return (
+    <Button onClick={onClick} className="custom-btn" {...props}>
+      {children || "New Chat"}{" "}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="currentColor"
+        className="bi bi-plus-lg"
+        viewBox="0 0 16 16"
+      >
+        <path fillRule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/>
+      </svg>
+    </Button>
+  );
+}

web-app/src/components/ui/chat/chat-header.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+export default function ChatHeader({ title = "AI Assistant" }) {
+  return (
+    <header className="flex items-center justify-between px-4 py-3 bg-gradient-to-r from-slate-800 to-slate-900 text-white">
+      <div className="flex items-center gap-3">
+        <div className="w-10 h-10 bg-indigo-500 rounded flex items-center justify-center font-bold">
+          AI
+        </div>
+        <div>
+          <h1 className="text-lg font-semibold">{title}</h1>
+          <p className="text-sm text-slate-300">
+            Ask anything — AI is listening
+          </p>
+        </div>
+      </div>
+    </header>
+  );
+}

web-app/src/components/ui/chat/chat-window.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { useRef } from "react";
+function MessageBubble({ message }) {
+  const isUser = message.role === "user";
+  return (
+    <div
+      className={`flex ${isUser ? "justify-end" : "justify-start"} px-4 py-2`}
+    >
+      <div
+        className={`max-w-[70%] p-3 rounded-lg ${isUser ? "bg-indigo-600 text-white" : "bg-slate-700 text-slate-100"}`}
+      >
+        <div className="text-sm">{message.content}</div>
+      </div>
+    </div>
+  );
+}
+
+export default function ChatWindow({ messages }) {
+  const chatRef = useRef(null);
+  // Auto-scroll to bottom when new messages appear
+  useEffect(() => {
+    chatRef.current?.scrollTo({
+      top: chatRef.current.scrollHeight,
+      behavior: "smooth",
+    });
+  }, [messages]);
+
+  return (
+    <main className="flex-1 overflow-auto p-2 bg-gradient-to-b from-slate-900 to-slate-800">
+      <div className="space-y-2">
+        {messages.map((m, i) => (
+          <MessageBubble key={i} message={m} />
+        ))}
+      </div>
+    </main>
+  );
+}

web-app/src/components/ui/chat/message-input.jsx

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+
+export default function MessageInput({ onSend }) {
+  const [text, setText] = useState("");
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!text.trim()) return;
+    onSend(text.trim());
+    setText("");
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="p-3 bg-slate-900">
+      <div className="flex gap-2">
+        <input
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="Type a message..."
+          className="flex-1 rounded-md bg-slate-800 border border-slate-700 px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+        />
+        <button
+          type="submit"
+          className="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-md"
+        >
+          Send
+        </button>
+      </div>
+    </form>
+  );
+}

web-app/src/index.css

@@ -1,33 +1,24 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss/preflight";
+@import "tailwindcss/utilities";
 
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-  color-scheme: dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  --color-primary: 15 40 98;
+  --color-secondary: 79 95 118;
+  --color-accent: 158 54 58;
+  --color-paragraph: 255 255 255;
+  --color-background: 9 31 54;
 }
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-#root {
-  width: 100%;
-  margin: 0;
-}
-
-code {
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+  background-color: rgb(var(--color-background));
+  color: rgb(var(--color-paragraph));
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial;
 }

web-app/src/styles/theme.css

@@ -0,0 +1,7 @@
+@theme {
+  --color-primary: rgba(15, 40, 98);
+  --color-secondary: rgba(79, 95, 118);
+  --color-accent: rgba(158, 54, 58);
+  --color-paragraph: rgba(255, 255, 255);
+  --color-background: rgba(9, 31, 54);
+}