InftyAI · InftyAI-Agent · Dec 6, 2025 · Dec 6, 2025 · Dec 6, 2025 · Dec 6, 2025
diff --git a/Makefile b/Makefile
@@ -52,3 +52,7 @@ seed:
 .PHONY: seed-cleanup
 seed-cleanup:
 	python hack/seed.py cleanup
+
+build-dashboard:
+	rm -rf alphatrion/static/*
+	cd dashboard && npm install && npm run build
diff --git a/README.md b/README.md
@@ -54,7 +54,7 @@ HostName:    postgres
 ServerPWD:   alphatr1on
 ```
 
-### Run a Sample Experiment
+### Run a Simple Experiment
 
 Below is a simple example with two approaches demonstrating how to create an experiment and log performance metrics.
 
@@ -75,27 +75,25 @@ async with alpha.CraftExperiment.setup(name="my_experiment") as exp:
     await run.wait()
 ```
 
-### View Results
+### View Dashboard
 
-The dashboard is under active development.  
+The dashboard is under active development.
 You can already run the frontend locally to explore experiments, trials, runs, and metrics through the UI.
 
 ### Prerequisites
 Make sure the following are installed:
 
 - **Node.js ≥ 18**
-- **npm ≥ 9** 
+- **npm ≥ 9**
 - **Vite**
-- Backend (`alphatrion server`) running
 
-### Running the Frontend
+### Launch Dashboard
 
-Inside the `dashboard` directory:
 ```bash
-npm install
-npm run dev
+alphatrion server # Start the backend server
+alphatrion dashboard # Start the dashboard
 ```
-Dashboard is available at `http://localhost:5173`
+Dashboard is available at `http://localhost:3000` by default.
 
 ### Cleanup
 

diff --git a/alphatrion/server/cmd/main.py b/alphatrion/server/cmd/main.py
@@ -1,7 +1,13 @@
 import argparse
+import os
+import webbrowser
+from pathlib import Path
 
 import uvicorn
 from dotenv import load_dotenv
+from fastapi import FastAPI
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
 from rich.console import Console
 from rich.text import Text
 
@@ -24,7 +30,11 @@ def main():
     )
     server.set_defaults(func=run_server)
 
-    # Reserve for dashboard command in the future
+    dashboard = subparsers.add_parser("dashboard", help="Run the AlphaTrion dashboard")
+    dashboard.add_argument(
+        "--port", type=int, default=3000, help="Port to run the dashboard on"
+    )
+    dashboard.set_defaults(func=start_dashboard)
 
     args = parser.parse_args()
     args.func(args)
@@ -38,3 +48,22 @@ def run_server(args):
     console.print(msg)
     graphql_init()
     uvicorn.run("alphatrion.server.cmd.app:app", host=args.host, port=args.port)
+
+
+def start_dashboard(args):
+    static_path = Path(__file__).resolve().parents[2] / "static"
+
+    app = FastAPI()
+    app.mount("/static", StaticFiles(directory=static_path, html=True), name="static")
+
+    @app.get("/{full_path:path}")
+    def spa_fallback(full_path: str):
+        index_file = os.path.join(static_path, "index.html")
+        if os.path.exists(index_file):
+            return FileResponse(index_file)
+        return {"error": "index.html not found"}
+
+    url = f"http://localhost:{args.port}"
+    webbrowser.open(url)
+
+    uvicorn.run(app, host="127.0.0.1", port=args.port)
diff --git a/alphatrion/static/alphatrion.png b/alphatrion/static/alphatrion.png
diff --git a/alphatrion/static/assets/index-CZjEehIf.css b/alphatrion/static/assets/index-CZjEehIf.css
diff --git a/alphatrion/static/assets/index-DzgxcILT.js b/alphatrion/static/assets/index-DzgxcILT.js
diff --git a/alphatrion/static/index.html b/alphatrion/static/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LLM Observatory</title>
+  <script type="module" crossorigin src="/static/assets/index-DzgxcILT.js"></script>
+  <link rel="stylesheet" crossorigin href="/static/assets/index-CZjEehIf.css">
+</head>
+
+<body>
+    <div id="root"></div>
+    <!-- Vite entry points to src/main.tsx -->
+</body>
+
+</html>
diff --git a/alphatrion/static/logo.png b/alphatrion/static/logo.png
diff --git a/dashboard/src/pages/App.tsx b/dashboard/src/pages/App.tsx
@@ -95,7 +95,7 @@ function App() {
             <div className="flex justify-center items-center h-screen">
                 <div className="relative">
                     <div className="w-16 h-16 border-4 border-indigo-200 rounded-full animate-spin border-t-indigo-600"></div>
-                    <img src="/logo.png" alt="Loading" className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-6 h-6" />
+                    <img src="/static/logo.png" alt="Loading" className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-6 h-6" />
                 </div>
             </div>
         );
@@ -127,17 +127,17 @@ function App() {
             <div className="flex h-screen">
                 {/* Sidebar */}
                 <div
-                    className={`${sidebarOpen ? "w-64" : "w-19"} 
-                    transition-all duration-300 flex-shrink-0 
-                    bg-white/70 backdrop-blur-xl 
+                    className={`${sidebarOpen ? "w-64" : "w-19"}
+                    transition-all duration-300 flex-shrink-0
+                    bg-white/70 backdrop-blur-xl
                     border-r border-gray-200/50
                     shadow-[1px_0_30px_-15px_rgba(0,0,0,0.1)]`}
                 >
                     <div className="flex flex-col h-full">
                         {/* Logo */}
                         <div className="flex items-center justify-between h-16 px-3 border-b border-gray-200/50">
                             <div className="flex items-center gap-3">
-                                <img src="/logo.png" alt="Alphatrion" className="w-9 h-9 rounded-xl flex-shrink-0" />
+                                <img src="/static/logo.png" alt="AlphaTrion" className="w-9 h-9 rounded-xl flex-shrink-0" />
                                 {sidebarOpen && (
                                     <span className="font-bold text-lg bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
                                         AlphaTrion
@@ -170,7 +170,7 @@ function App() {
                                             setSelectedTrialId(null);
                                             navigate(`/experiments?projectId=${id}`);
                                         }}
-                                        className="mt-2 block w-full px-3 py-2 text-sm bg-gray-50/80 border border-gray-200 rounded-lg 
+                                        className="mt-2 block w-full px-3 py-2 text-sm bg-gray-50/80 border border-gray-200 rounded-lg
                                         focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-400
                                         transition-all cursor-pointer hover:bg-gray-100/80"
                                     >
@@ -183,7 +183,7 @@ function App() {
                                 </div>
                             ) : (
                                 <div
-                                    className="w-10 h-10 bg-gradient-to-br from-gray-100 to-gray-50 rounded-lg flex items-center justify-center 
+                                    className="w-10 h-10 bg-gradient-to-br from-gray-100 to-gray-50 rounded-lg flex items-center justify-center
                                     text-indigo-600 text-sm font-semibold cursor-pointer border border-gray-200
                                     hover:shadow-md transition-all mx-auto"
                                     title={selectedProject?.name || "Select Project"}

diff --git a/dashboard/vite.config.ts b/dashboard/vite.config.ts
@@ -2,5 +2,9 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 
 export default defineConfig({
+    base: "/static/",
     plugins: [react()],
+    build: {
+        outDir: "../alphatrion/static",
+    },
 });