Merge branch 'main' of https://github.com/devaine/CodeRED-Astra into cloud-prep

eslint.config.js

@@ -0,0 +1,29 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import { defineConfig, globalIgnores } from "eslint/config";
+
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{js,jsx}"],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs["recommended-latest"],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: "latest",
+        ecmaFeatures: { jsx: true },
+        sourceType: "module",
+      },
+    },
+    rules: {
+      "no-unused-vars": ["error", { varsIgnorePattern: "^[A-Z_]" }],
+    },
+  },
+]);

package.json

@@ -0,0 +1,45 @@
+{
+	"name": "codered-astra",
+	"private": true,
+	"scripts": {
+		"build": "vite build",
+		"dev": "vite",
+		"host": "vite host",
+		"format": "prettier --write \"**/*.{ts,tsx,md}\"",
+		"clean-dist": "find apps/ -type d -name 'dist' -print0 | xargs -r0 -- rm -r",
+		"clean-all": "find apps/ -type d -name 'dist' -print0 | xargs -r0 -- rm -r && find . -path ./node_modules -prune -o -name 'node_modules' | xargs rm -rf "
+	},
+	"license": "ISC",
+	"dependencies": {
+		"@google/genai": "^1.25.0",
+		"@tailwindcss/postcss": "^4.1.14",
+		"@tailwindcss/vite": "^4.1.14",
+		"@vitejs/plugin-react": "^5.0.4",
+		"bootstrap": "^5.3.8",
+		"bootstrap-icons": "^1.13.1",
+		"cors": "^2.8.5",
+		"dotenv": "^17.2.3",
+		"express": "^5.1.0",
+		"helmet": "^8.1.0",
+		"lucide-react": "^0.546.0",
+		"pg": "^8.16.3",
+		"react": "^19.2.0",
+		"react-bootstrap": "^2.10.10",
+		"react-dom": "^19.2.0",
+		"react-router": "^7.9.4",
+		"react-router-dom": "^7.9.4",
+		"vite-jsconfig-paths": "^2.0.1"
+	},
+	"packageManager": ">=npm@10.9.0",
+	"devDependencies": {
+		"eslint": "^9.38.0",
+		"eslint-plugin-import": "^2.32.0",
+		"eslint-plugin-react": "^7.37.5",
+		"eslint-plugin-react-hooks": "^7.0.0",
+		"eslint-plugin-react-refresh": "^0.4.24",
+		"nodemon": "^3.1.10",
+		"prettier": "^3.6.2",
+		"tailwindcss": "^4.1.14",
+		"vite": "^7.1.10"
+	}
+}

src/app/index.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import ChatLayout from "src/components/ui/ChatLayout";
+
+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;

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>
+  );
+}

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;
+}

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>
+  );
+}

src/components/ui/ChatHeader.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>
+  );
+}

src/components/ui/ChatLayout.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import ChatHeader from "./ChatHeader";
+import ChatWindow from "./ChatWindow";
+import MessageInput from "./MessageInput";
+
+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>
+  );
+}

src/components/ui/ChatWindow.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>
+  );
+}

src/components/ui/MessageInput.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>
+  );
+}

src/index.css

@@ -0,0 +1,24 @@
+@import "tailwindcss/preflight";
+@import "tailwindcss/utilities";
+
+:root {
+  --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;
+  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;
+}

src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./app/index.jsx";
+
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

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);
+}

vite.config.js

@@ -0,0 +1,14 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import jsconfigPaths from "vite-jsconfig-paths";
+import tailwindcss from "@tailwindcss/vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [tailwindcss(), react(), jsconfigPaths()],
+  resolve: {
+    alias: {
+      src: "/src",
+    },
+  },
+});

web-app/eslint.config.js

@@ -1,29 +1,29 @@
-import js from '@eslint/js'
+import js from "@eslint/js";
-import globals from 'globals'
+import globals from "globals";
-import reactHooks from 'eslint-plugin-react-hooks'
+import reactHooks from "eslint-plugin-react-hooks";
-import reactRefresh from 'eslint-plugin-react-refresh'
+import reactRefresh from "eslint-plugin-react-refresh";
-import { defineConfig, globalIgnores } from 'eslint/config'
+import { defineConfig, globalIgnores } from "eslint/config";
 
 export default defineConfig([
-  globalIgnores(['dist']),
+  globalIgnores(["dist"]),
   {
-    files: ['**/*.{js,jsx}'],
+    files: ["**/*.{js,jsx}"],
     extends: [
       js.configs.recommended,
-      reactHooks.configs['recommended-latest'],
+      reactHooks.configs["recommended-latest"],
       reactRefresh.configs.vite,
     ],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
       parserOptions: {
-        ecmaVersion: 'latest',
+        ecmaVersion: "latest",
         ecmaFeatures: { jsx: true },
-        sourceType: 'module',
+        sourceType: "module",
       },
     },
     rules: {
-      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+      "no-unused-vars": ["error", { varsIgnorePattern: "^[A-Z_]" }],
     },
   },
-])
+]);

web-app/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="/src/index.css" rel="stylesheet" />
     <title>codered-astra</title>
   </head>
   <body>

web-app/src/main.jsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
+import { StrictMode } from "react";
-import { createRoot } from 'react-dom/client'
+import { createRoot } from "react-dom/client";
-import './index.css'
+import "./index.css";
-import App from './App.jsx'
+import App from "./app/index.jsx";
 
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById("root")).render(
   <StrictMode>
     <App />
-  </StrictMode>,
+  </StrictMode>
-)
+);

web-app/tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{html,js}"],
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
       colors: {