adjust cors

.env

@@ -1,3 +1,2 @@
 VITE_API_URL=http://localhost:3000/api
-VITE_WS_URL=ws://localhost:3000
 VITE_MOCK_AUTH=true

.env.example

@@ -1,5 +1,5 @@
 # API base URL for the backend that wraps the abra CLI
 VITE_API_URL=http://localhost:3000/api
 
-# Set to 'true' to use mock data
+# Set to 'true' to bypass authentication for development
 VITE_MOCK_AUTH=true

src/App.tsx

@@ -1,26 +1,35 @@
-import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
-import { Dashboard } from './routes/Dashboard/Dashboard';
+import { AuthProvider } from "./context/AuthContext";
-import { Apps } from './routes/Apps/Apps';
+import { LoginForm } from "./routes/Login/LoginForm";
-import { AppDetail } from './routes/Apps/App';
+import { Authenticated } from "./components/Authenticated";
-import { Servers } from './routes/Servers/Servers';
+import { Dashboard } from "./routes/Authenticated/Dashboard/Dashboard";
-import { Server } from './routes/Servers/Server';
+import { Apps } from "./routes/Authenticated/Apps/Apps";
-import { Recipes } from './routes/Recipes/Recipes';
+import { AppDetail } from "./routes/Authenticated/Apps/App";
+import { Servers } from "./routes/Authenticated/Servers/Servers";
+import { Server } from "./routes/Authenticated/Servers/Server";
 
 function App() {
   return (
     <BrowserRouter>
-      <Routes>
+      <AuthProvider>
-          <Route path="/" element={<Navigate to="/dashboard" replace />} />
+        <Routes>
-          <Route path="/dashboard" element={<Dashboard />} />
+          {/* Public routes */}
-          <Route path="/apps" element={<Apps />} />
+          <Route path="/login" element={<LoginForm />} />
-          <Route path="/apps/:server/:appName" element={<AppDetail />} />
+
-          <Route path="/servers" element={<Servers />} />
+          {/* Protected routes */}
-          <Route path="/servers/:serverName" element={<Server />} />
+          <Route element={<Authenticated />}>
-          <Route path="/recipes" element={<Recipes />} />
+            <Route path="/" element={<Navigate to="/dashboard" replace />} />
+            <Route path="/dashboard" element={<Dashboard />} />
+            <Route path="/apps" element={<Apps />} />
+            <Route path="/apps/:server/:appName" element={<AppDetail />} />
+            <Route path="/servers" element={<Servers />} />
+            <Route path="/servers/:serverName" element={<Server />} />
+          </Route>
 
           {/* 404 catch-all */}
           <Route path="*" element={<Navigate to="/dashboard" replace />} />
         </Routes>
+      </AuthProvider>
     </BrowserRouter>
   );
 }

src/assets/scss/_fonts.scss

@@ -1,30 +1,30 @@
 @font-face {
-  font-family: 'Lora';
+  font-family: "Lora";
-  src: url('https://coopcloud.tech/font/Lora-Italic.woff2') format('woff2');
+  src: url("https://coopcloud.tech/font/Lora-Italic.woff2") format("woff2");
   font-style: italic;
   font-weight: 400;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Manrope';
+  font-family: "Manrope";
-  src: url('https://coopcloud.tech/font/manrope.light.woff2') format('woff2');
+  src: url("https://coopcloud.tech/font/manrope.light.woff2") format("woff2");
   font-weight: 300;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Manrope';
+  font-family: "Manrope";
-  src: url('https://coopcloud.tech/font/manrope.medium.woff2') format('woff2');
+  src: url("https://coopcloud.tech/font/manrope.medium.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Manrope';
+  font-family: "Manrope";
-  src: url('https://coopcloud.tech/font/manrope.bold.woff2') format('woff2');
+  src: url("https://coopcloud.tech/font/manrope.bold.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;

src/assets/scss/_global.scss

@@ -1,6 +1,5 @@
-@use './variables' as *;
+@use "./variables" as *;
-@use './mixins' as *;
+@use "./mixins" as *;
-
 
 body {
   margin: 0;
@@ -76,7 +75,9 @@ body {
   align-items: center;
   gap: $spacing-lg;
   padding: $spacing-xl;
-  transition: transform $transition-base, box-shadow $transition-base;
+  transition:
+    transform $transition-base,
+    box-shadow $transition-base;
 
   &:hover {
     transform: translateY(-2px);

src/assets/scss/_mixins.scss

@@ -1,4 +1,4 @@
-@use 'variables' as *;
+@use "variables" as *;
 
 // Flexbox center
 @mixin flex-center {
@@ -9,14 +9,22 @@
 
 // Responsive breakpoints
 @mixin respond-to($breakpoint) {
-  @if $breakpoint == 'sm' {
+  @if $breakpoint == "sm" {
-    @media (min-width: $breakpoint-sm) { @content; }
+    @media (min-width: $breakpoint-sm) {
-  } @else if $breakpoint == 'md' {
+      @content;
-    @media (min-width: $breakpoint-md) { @content; }
+    }
-  } @else if $breakpoint == 'lg' {
+  } @else if $breakpoint == "md" {
-    @media (min-width: $breakpoint-lg) { @content; }
+    @media (min-width: $breakpoint-md) {
-  } @else if $breakpoint == 'xl' {
+      @content;
-    @media (min-width: $breakpoint-xl) { @content; }
+    }
+  } @else if $breakpoint == "lg" {
+    @media (min-width: $breakpoint-lg) {
+      @content;
+    }
+  } @else if $breakpoint == "xl" {
+    @media (min-width: $breakpoint-xl) {
+      @content;
+    }
   }
 }
 
@@ -36,7 +44,7 @@
   font-weight: $font-weight-semibold;
   cursor: pointer;
   transition: all $transition-base;
-  
+
   &:disabled {
     opacity: 0.6;
     cursor: not-allowed;
@@ -62,4 +70,5 @@
   font-size: $font-size-sm;
   font-weight: $font-weight-semibold;
   background-color: rgba($color, 0.1);
-}
+  // color: darken($color, 20%);
+}

src/assets/scss/_variables.scss

@@ -1,6 +1,6 @@
 // Colors
-$primary: #EFEFEF;
+$primary: #efefef;
-$primary-dark: #6A9CFF;
+$primary-dark: #6a9cff;
 $primary-light: #ff4f88;
 $secondary: #363636;
 
@@ -10,8 +10,7 @@ $error: #ef4444;
 $info: #3b82f6;
 
 $text-primary: #363636;
-$text-secondary: #4a4a4a
+$text-secondary: #4a4a4a;
-;
 $text-muted: #999;
 
 $bg-primary: #ffffff;
@@ -31,11 +30,21 @@ $spacing-3xl: 4rem;
 
 // Typography
 
-$font-family-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+$font-family-body:
-'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+  "Manrope",
-'Helvetica Neue', sans-serif;
+  -apple-system,
+  BlinkMacSystemFont,
+  "Segoe UI",
+  "Roboto",
+  "Oxygen",
+  "Ubuntu",
+  "Cantarell",
+  "Fira Sans",
+  "Droid Sans",
+  "Helvetica Neue",
+  sans-serif;
 
-$font-family-heading: 'Lora', serif;
+$font-family-heading: "Lora", serif;
 
 $font-size-xs: 0.75rem;
 $font-size-sm: 0.875rem;
@@ -72,4 +81,4 @@ $transition-slow: 0.3s ease;
 $breakpoint-sm: 640px;
 $breakpoint-md: 768px;
 $breakpoint-lg: 1024px;
-$breakpoint-xl: 1280px;
+$breakpoint-xl: 1280px;

src/assets/scss/main.scss

@@ -1,7 +1,7 @@
 // 1. Configuration & helpers (no CSS output)
-@use 'variables';
+@use "variables";
-@use 'mixins';
+@use "mixins";
-@use 'fonts';
+@use "fonts";
 
 // 2. Global base styles
-@use 'global';
+@use "global";

src/components/Authenticated.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Navigate, Outlet } from "react-router-dom";
+import { useAuth } from "../context/AuthContext";
+
+export const Authenticated: React.FC = () => {
+  const { isAuthenticated, loading } = useAuth();
+
+  console.log("🛡️ ProtectedRoute:", { isAuthenticated, loading });
+
+  if (loading) {
+    return (
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100vh",
+        }}
+      >
+        <p>Loading...</p>
+      </div>
+    );
+  }
+
+  return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />;
+};

src/components/Header/Header.tsx

@@ -1,32 +1,45 @@
-import React from 'react';
+import React from "react";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
-import './_Header.scss';
+import { useAuth } from "../../hooks/useAuth";
-import logo from '../../assets/coopcloud_logo_grey.svg';
+import "./_Header.scss";
-
 
 interface HeaderProps {
   children: React.ReactNode;
 }
 
 export const Header: React.FC<HeaderProps> = ({ children }) => {
+  const { user, logout } = useAuth();
   const navigate = useNavigate();
-return(
+
-<header className="layout-header">
+  const handleLogout = async () => {
-    <div className="header-content">
+    await logout();
-      <h1 onClick={() => navigate('/dashboard')} className="logo">
+    navigate("/login");
-        <img className="logo" src={logo}/>
+  };
-      </h1>
+  return (
-      <nav className="nav">
+    <header className="layout-header">
-        <button onClick={() => navigate('/dashboard')} className="nav-link">
+      <div className="header-content">
-          Dashboard
+        <h1 onClick={() => navigate("/dashboard")} className="logo">
-        </button>
+          <img className="logo" src="/public/coopcloud_logo_grey.svg" />
-        <button onClick={() => navigate('/apps')} className="nav-link">
+        </h1>
-          Apps
+        <nav className="nav">
-        </button>
+          <button onClick={() => navigate("/dashboard")} className="nav-link">
-        <button onClick={() => navigate('/servers')} className="nav-link">
+            Dashboard
-          Servers
+          </button>
-        </button>
+          <button onClick={() => navigate("/apps")} className="nav-link">
-      </nav>
+            Apps
-    </div>
+          </button>
-  </header>
+          <button onClick={() => navigate("/servers")} className="nav-link">
-)}
+            Servers
+          </button>
+        </nav>
+
+        <div className="user-menu">
+          <span className="username">{user?.username}</span>
+          <button onClick={handleLogout} className="logout-button">
+            Logout
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+};

src/components/Header/_Header.scss

@@ -1,5 +1,5 @@
-@use '../../assets/scss/variables' as *;
+@use "../../assets/scss/variables" as *;
-@use '../../assets/scss/mixins' as *;
+@use "../../assets/scss/mixins" as *;
 
 .layout-header {
   background-color: $primary-light;
@@ -63,7 +63,7 @@
 
     // Active indicator
     &.active::after {
-      content: '';
+      content: "";
       position: absolute;
       bottom: 0;
       left: 50%;
@@ -78,4 +78,50 @@
       font-size: $font-size-xl;
     }
   }
-}
+
+  .user-menu {
+    display: flex;
+    align-items: center;
+    gap: $spacing-lg;
+
+    @media (max-width: 768px) {
+      width: 100%;
+      justify-content: space-between;
+    }
+
+    .username {
+      font-weight: $font-weight-medium;
+      font-size: $font-size-base;
+
+      @media (max-width: 480px) {
+        font-size: $font-size-sm;
+      }
+    }
+
+    .logout-button {
+      background: rgba(255, 255, 255, 0.2);
+      border: 1px solid rgba(255, 255, 255, 0.4);
+      color: $text-primary;
+      padding: $spacing-sm $spacing-lg;
+      border-radius: $radius-md;
+      cursor: pointer;
+      transition: all $transition-base;
+      font-weight: $font-weight-medium;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.3);
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      }
+
+      &:active {
+        transform: translateY(0);
+      }
+
+      @media (max-width: 480px) {
+        padding: $spacing-sm $spacing-md;
+        font-size: $font-size-sm;
+      }
+    }
+  }
+}

src/components/Terminal/Terminal.tsx

@@ -1,86 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import type { LogEntry } from '../../services/mockApi'; // Import from mockApi (or api for real)
-import './_Terminal.scss';
-
-interface TerminalProps {
-  logs: LogEntry[];
-  isActive: boolean;
-  onClose?: () => void;
-}
-
-export const Terminal: React.FC<TerminalProps> = ({ logs, isActive, onClose }) => {
-  const terminalRef = useRef<HTMLDivElement>(null);
-  const [displayedLogs, setDisplayedLogs] = useState<LogEntry[]>([]);
-
-  // Stream logs in with delays for realistic effect
-  useEffect(() => {
-    if (!isActive || logs.length === 0) {
-      setDisplayedLogs([]);
-      return;
-    }
-
-    setDisplayedLogs([]);
-    let currentIndex = 0;
-
-    const streamLogs = () => {
-      if (currentIndex < logs.length) {
-        setDisplayedLogs(prev => [...prev, logs[currentIndex]]);
-        currentIndex++;
-        
-        // Variable delay based on log type
-        const delay = logs[currentIndex - 1]?.type === 'command' ? 200 : 
-                     logs[currentIndex - 1]?.type === 'output' ? 100 : 300;
-        
-        setTimeout(streamLogs, delay);
-      }
-    };
-
-    streamLogs();
-  }, [logs, isActive]);
-
-  // Auto-scroll to bottom
-  useEffect(() => {
-    if (terminalRef.current) {
-      terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
-    }
-  }, [displayedLogs]);
-
-  if (!isActive && displayedLogs.length === 0) {
-    return null;
-  }
-
-  const formatTime = (date: Date) => {
-    return date.toLocaleTimeString('en-US', { 
-      hour12: false, 
-      hour: '2-digit', 
-      minute: '2-digit', 
-      second: '2-digit' 
-    });
-  };
-
-  return (
-    <div className="terminal-container">
-      <div className="terminal-header">
-        <div className="terminal-controls">
-          <span className="terminal-control close" onClick={onClose}></span>
-          <span className="terminal-control minimize"></span>
-          <span className="terminal-control maximize"></span>
-        </div>
-        <div className="terminal-title">abra CLI</div>
-        <div className="terminal-spacer"></div>
-      </div>
-      
-      <div className="terminal-content" ref={terminalRef}>
-        {displayedLogs.filter(log => log && log.type).map((log, index) => (
-          <div key={index} className={`terminal-line terminal-${log.type}`}>
-            <span className="terminal-timestamp">[{formatTime(log.timestamp)}]</span>
-            <span className="terminal-text">{log.text}</span>
-          </div>
-        ))}
-        {isActive && displayedLogs.length > 0 && (
-          <div className="terminal-cursor">▊</div>
-        )}
-      </div>
-    </div>
-  );
-};

src/components/Terminal/_Terminal.scss

@@ -1,204 +0,0 @@
-@use '../../assets/scss/variables' as *;
-@use '../../assets/scss/mixins' as *;
-
-.terminal-container {
-  background: #1e1e1e;
-  border-radius: $radius-md;
-  overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Source Code Pro', monospace;
-  margin-bottom: $spacing-xl;
-  animation: terminal-appear 0.3s ease-out;
-}
-
-@keyframes terminal-appear {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.terminal-header {
-  display: flex;
-  align-items: center;
-  padding: $spacing-sm $spacing-md;
-  background: #323232;
-  border-bottom: 1px solid #404040;
-  user-select: none;
-
-  .terminal-controls {
-    display: flex;
-    gap: $spacing-xs;
-    min-width: 60px;
-  }
-
-  .terminal-control {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: opacity 0.2s;
-
-    &:hover {
-      opacity: 0.8;
-    }
-
-    &.close {
-      background: #ff5f56;
-    }
-
-    &.minimize {
-      background: #ffbd2e;
-    }
-
-    &.maximize {
-      background: #27c93f;
-    }
-  }
-
-  .terminal-title {
-    flex: 1;
-    text-align: center;
-    color: #a0a0a0;
-    font-size: $font-size-xs;
-    font-weight: $font-weight-medium;
-  }
-
-  .terminal-spacer {
-    min-width: 60px;
-  }
-}
-
-.terminal-content {
-  padding: $spacing-md;
-  background: #1e1e1e;
-  color: #d4d4d4;
-  font-size: 13px;
-  line-height: 1.6;
-  max-height: 400px;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  /* Custom scrollbar */
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #2d2d2d;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #4a4a4a;
-    border-radius: 4px;
-
-    &:hover {
-      background: #5a5a5a;
-    }
-  }
-}
-
-.terminal-line {
-  display: flex;
-  margin-bottom: 2px;
-  animation: terminal-line-appear 0.2s ease-out;
-  white-space: pre-wrap;
-  word-break: break-word;
-
-  @keyframes terminal-line-appear {
-    from {
-      opacity: 0;
-      transform: translateX(-4px);
-    }
-    to {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-
-  .terminal-timestamp {
-    color: #6a6a6a;
-    margin-right: $spacing-sm;
-    flex-shrink: 0;
-    font-size: 11px;
-  }
-
-  .terminal-text {
-    flex: 1;
-  }
-
-  /* Line type styles */
-  &.terminal-info {
-    .terminal-text {
-      color: #4fc3f7;
-    }
-  }
-
-  &.terminal-success {
-    .terminal-text {
-      color: #81c784;
-      font-weight: $font-weight-medium;
-    }
-  }
-
-  &.terminal-error {
-    .terminal-text {
-      color: #e57373;
-      font-weight: $font-weight-medium;
-    }
-  }
-
-  &.terminal-warning {
-    .terminal-text {
-      color: #ffb74d;
-    }
-  }
-
-  &.terminal-command {
-    .terminal-text {
-      color: #ba68c8;
-      font-weight: $font-weight-semibold;
-    }
-  }
-
-  &.terminal-output {
-    .terminal-text {
-      color: #d4d4d4;
-      opacity: 0.9;
-    }
-  }
-}
-
-.terminal-cursor {
-  display: inline-block;
-  color: #81c784;
-  margin-left: 4px;
-  animation: terminal-cursor-blink 1s step-end infinite;
-}
-
-@keyframes terminal-cursor-blink {
-  0%, 50% {
-    opacity: 1;
-  }
-  51%, 100% {
-    opacity: 0;
-  }
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .terminal-content {
-    font-size: 12px;
-    padding: $spacing-sm;
-  }
-
-  .terminal-line {
-    .terminal-timestamp {
-      display: none;
-    }
-  }
-}

src/context/AuthContext.tsx

@@ -0,0 +1,101 @@
+import React, {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { apiService } from "../services/api";
+import type { LoginCredentials, User } from "../types";
+
+interface AuthContextType {
+  user: User | null;
+  loading: boolean;
+  login: (credentials: LoginCredentials) => Promise<void>;
+  logout: () => Promise<void>;
+  isAuthenticated: boolean;
+}
+
+export const AuthContext = createContext<AuthContextType | undefined>(
+  undefined,
+);
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const isMockAuthMode = import.meta.env.VITE_MOCK_AUTH === "true";
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      console.log("🔍 checkAuth running, isMockAuthMode:", isMockAuthMode);
+      try {
+        if (isMockAuthMode) {
+          console.log("✅ Mock mode - setting mock user");
+          setUser({
+            id: "mock-user-1",
+            username: "developer",
+            email: "dev@coopcloud.tech",
+          });
+          setLoading(false);
+          console.log("✅ Mock user set, loading set to false");
+          return;
+        }
+
+        const token = localStorage.getItem("auth_token");
+        if (token) {
+          const currentUser = await apiService.getCurrentUser();
+          setUser(currentUser);
+        }
+      } catch (error) {
+        console.error("Auth check failed:", error);
+        localStorage.removeItem("auth_token");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    checkAuth();
+  }, [isMockAuthMode]);
+
+  const login = async (credentials: LoginCredentials) => {
+    try {
+      const response = await apiService.login(credentials);
+      setUser(response.user);
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const logout = async () => {
+    await apiService.logout();
+    setUser(null);
+  };
+
+  const value: AuthContextType = {
+    user,
+    loading,
+    login,
+    logout,
+    isAuthenticated: !!user,
+  };
+  console.log("📊 AuthContext state:", {
+    user,
+    loading,
+    isAuthenticated: !!user,
+  });
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+};
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}

src/hooks/useAuth.ts

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { AuthContext } from "../context/AuthContext";
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+
+  if (context === undefined) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+
+  return context;
+};

src/index.scss

@@ -1,14 +1,24 @@
-@use './assets/scss/variables' as *;
+@use "./assets/scss/variables" as *;
-@use './assets/scss/mixins' as *;
+@use "./assets/scss/mixins" as *;
-@use './assets/scss/global' as *;
+@use "./assets/scss/global" as *;
 
 // Global root styles
 :root {
   line-height: 1.5;
   font-weight: 400;
-  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+  font-family:
-    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+    "Manrope",
-    'Helvetica Neue', sans-serif;
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Roboto",
+    "Oxygen",
+    "Ubuntu",
+    "Cantarell",
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
+    sans-serif;
 
   color-scheme: light dark;
   color: $text-primary;
@@ -44,7 +54,12 @@ a {
 }
 
 // Global heading styles
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   color: $text-primary;
   margin: 0;
 }

src/main.tsx

@@ -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.scss'
+import "./index.scss";
-import App from './App.tsx'
+import App from "./App.tsx";
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
   </StrictMode>,
-)
+);

src/routes/Apps/App.scss

@@ -1,369 +0,0 @@
-@use '../../assets/scss/variables' as *;
-@use '../../assets/scss/mixins' as *;
-@use '../../assets/scss/global' as *;
-@use "sass:color";
-
-
-.app-detail-page {
-  @extend .page-wrapper;
-}
-
-.app-detail-content {
-  @extend .page-content;
-}
-
-// App header section
-.app-header {
-  @include card;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  flex-wrap: wrap;
-  gap: $spacing-xl;
-  margin-bottom: $spacing-xl;
-
-  .app-title-section {
-    flex: 1;
-    min-width: 300px;
-
-    h1 {
-      margin: 0 0 $spacing-md 0;
-      font-size: $font-size-3xl;
-      color: $text-primary;
-      font-weight: $font-weight-bold;
-    }
-
-    .app-meta {
-      display: flex;
-      gap: $spacing-sm;
-      flex-wrap: wrap;
-    }
-  }
-
-  .app-actions {
-    display: flex;
-    gap: $spacing-md;
-    flex-wrap: wrap;
-  }
-}
-
-// Action buttons
-.action-btn {
-  padding: $spacing-sm $spacing-lg;
-  border: 2px solid $border-color;
-  border-radius: $radius-md;
-  font-size: $font-size-sm;
-  font-weight: $font-weight-medium;
-  cursor: pointer;
-  transition: all $transition-base;
-  background: white;
-  color: $text-primary;
-
-  &:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  &:hover:not(:disabled) {
-    transform: translateY(-1px);
-    box-shadow: $shadow-md;
-  }
-
-  &.primary {
-    background: $primary;
-    color: $text-primary;
-    border-color: $primary;
-
-    &:hover:not(:disabled) {
-      background: $primary-light;
-      border-color: $primary-light;
-    }
-  }
-
-  &.secondary {
-    background: $bg-secondary;
-    color: $text-primary;
-    border-color: $border-color;
-  }
-
-  &.danger {
-    background: $error;
-    color: white;
-    border-color: $error;
-
-    &:hover:not(:disabled) {
-      background: color.adjust($error, $lightness: -10%);    
-    }
-  }
-}
-
-.back-button {
-  @extend .action-btn;
-  @extend .secondary;
-}
-
-// Content grid layout
-.content-grid {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  gap: $spacing-xl;
-
-  @media (max-width: 1024px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-// Info cards
-.info-card {
-  @include card;
-  margin-bottom: $spacing-xl;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  h2 {
-    margin: 0 0 $spacing-lg 0;
-    font-size: $font-size-xl;
-    color: $text-primary;
-    font-weight: $font-weight-bold;
-  }
-}
-
-// Info grid
-.info-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: $spacing-lg;
-}
-
-.info-item {
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-xs;
-
-  label {
-    font-size: $font-size-xs;
-    color: $text-secondary;
-    font-weight: $font-weight-medium;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-  }
-
-  span {
-    font-size: $font-size-base;
-    color: $text-primary;
-  }
-
-  .no-value {
-    color: $text-muted;
-    font-style: italic;
-  }
-
-  .chaos-active {
-    background: color.adjust($info, $lightness: -10%);    
-    font-weight: $font-weight-medium;
-  }
-}
-
-.link {
-  color: $primary-dark;
-  text-decoration: none;
-  font-size: $font-size-base;
-  transition: color $transition-base;
-
-  &:hover {
-    color: $primary-light;
-    text-decoration: underline;
-  }
-}
-
-// Version information
-.version-info {
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-lg;
-
-  .version-current {
-    label {
-      display: block;
-      font-size: $font-size-xs;
-      color: $text-secondary;
-      font-weight: $font-weight-medium;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      margin-bottom: $spacing-sm;
-    }
-
-    code {
-      display: inline-block;
-      background: $bg-secondary;
-      padding: $spacing-sm $spacing-md;
-      border-radius: $radius-sm;
-      font-size: $font-size-sm;
-      color: $text-primary;
-      font-family: monospace;
-    }
-  }
-
-  .version-upgrades {
-    label {
-      display: flex;
-      align-items: center;
-      gap: $spacing-sm;
-      font-size: $font-size-xs;
-      color: $text-secondary;
-      font-weight: $font-weight-medium;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      margin-bottom: $spacing-md;
-
-      .upgrade-count {
-        background: $warning;
-        color: white;
-        padding: 2px 8px;
-        border-radius: $radius-full;
-        font-size: $font-size-xs;
-        font-weight: $font-weight-bold;
-      }
-    }
-
-    .upgrade-list {
-      display: flex;
-      flex-direction: column;
-      gap: $spacing-sm;
-    }
-
-    .upgrade-item {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: $spacing-md;
-      padding: $spacing-md;
-      background: $bg-secondary;
-      border-radius: $radius-md;
-      border: 2px solid transparent;
-      transition: border-color $transition-base;
-
-      &:hover {
-        border-color: $warning;
-      }
-
-      code {
-        flex: 1;
-        font-size: $font-size-sm;
-        color: $text-primary;
-        font-family: monospace;
-      }
-
-      .upgrade-btn {
-        padding: $spacing-xs $spacing-md;
-        background: $warning;
-        color: white;
-        border: none;
-        border-radius: $radius-sm;
-        font-size: $font-size-sm;
-        font-weight: $font-weight-medium;
-        cursor: pointer;
-        transition: all $transition-base;
-
-        &:hover:not(:disabled) {
-          background: color.adjust($warning, $lightness: -10%);
-          transform: translateY(-1px);
-        }
-
-        &:disabled {
-          opacity: 0.6;
-          cursor: not-allowed;
-        }
-      }
-    }
-  }
-
-  .version-latest {
-    padding: $spacing-md;
-    background: rgba($success, 0.1);
-    background: color.adjust($success, $lightness: -10%);
-    border-radius: $radius-md;
-    text-align: center;
-    font-size: $font-size-base;
-    font-weight: $font-weight-medium;
-  }
-}
-
-// Quick actions list
-.action-list {
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-sm;
-
-  .action-list-item {
-    display: flex;
-    align-items: center;
-    gap: $spacing-md;
-    padding: $spacing-md;
-    background: $bg-secondary;
-    border: 2px solid transparent;
-    border-radius: $radius-md;
-    cursor: pointer;
-    transition: all $transition-base;
-    font-size: $font-size-sm;
-    color: $text-primary;
-    text-align: left;
-    width: 100%;
-
-    &:hover:not(:disabled) {
-      background: white;
-      border-color: $primary;
-      transform: translateX(2px);
-    }
-
-    &:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-
-    &.danger {
-      &:hover:not(:disabled) {
-        border-color: $error;
-        background: rgba($error, 0.05);
-      }
-    }
-
-    .action-text {
-      flex: 1;
-      font-weight: $font-weight-medium;
-    }
-  }
-}
-
-// Health status
-.health-status {
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-md;
-
-  .health-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: $spacing-md;
-    border-bottom: 1px solid $border-color;
-
-    &:last-child {
-      border-bottom: none;
-      padding-bottom: 0;
-    }
-
-    .health-label {
-      font-size: $font-size-sm;
-      color: $text-secondary;
-    }
-
-    .health-value {
-      font-size: $font-size-base;
-      font-weight: $font-weight-semibold;
-      color: $text-primary;
-    }
-  }
-}

src/routes/Authenticated/Apps/App.scss

@@ -0,0 +1,463 @@
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
+.app-detail-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.app-detail-content {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 24px;
+
+  .loading,
+  .error {
+    text-align: center;
+    padding: 60px 20px;
+    font-size: 16px;
+    color: #666;
+  }
+
+  .error {
+    color: #dc3545;
+  }
+}
+
+// Breadcrumb navigation
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 24px;
+  font-size: 14px;
+
+  .breadcrumb-link {
+    background: none;
+    border: none;
+    color: #0066cc;
+    cursor: pointer;
+    padding: 0;
+    font-size: 14px;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .breadcrumb-separator {
+    color: #999;
+  }
+
+  .breadcrumb-current {
+    color: #333;
+    font-weight: 500;
+  }
+}
+
+// App header section
+.app-header {
+  background: white;
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 24px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  .app-title-section {
+    flex: 1;
+    min-width: 300px;
+
+    h1 {
+      margin: 0 0 12px 0;
+      font-size: 28px;
+      color: #1a1a1a;
+    }
+
+    .app-meta {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+  }
+
+  .app-actions {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+}
+
+// Action buttons
+.action-btn {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  &.primary {
+    background: #0066cc;
+    color: white;
+
+    &:hover:not(:disabled) {
+      background: #0052a3;
+    }
+  }
+
+  &.secondary {
+    background: #f0f0f0;
+    color: #333;
+
+    &:hover:not(:disabled) {
+      background: #e0e0e0;
+    }
+  }
+
+  &.danger {
+    background: #dc3545;
+    color: white;
+
+    &:hover:not(:disabled) {
+      background: #c82333;
+    }
+  }
+}
+
+.back-button {
+  @extend .action-btn;
+  @extend .secondary;
+}
+
+// Badges
+.recipe-badge {
+  display: inline-block;
+  padding: 4px 12px;
+  background: #e7f3ff;
+  color: #0066cc;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+
+  &.status-deployed,
+  &.status-running {
+    background: #d4edda;
+    color: #155724;
+  }
+
+  &.status-stopped {
+    background: #f8d7da;
+    color: #721c24;
+  }
+
+  &.status-unknown {
+    background: #e2e3e5;
+    color: #383d41;
+  }
+}
+
+.chaos-badge {
+  display: inline-block;
+  padding: 4px 12px;
+  background: #fff3cd;
+  color: #856404;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+// Content grid layout
+.content-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 24px;
+
+  @media (max-width: 1024px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+// Info cards
+.info-card {
+  background: white;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  margin-bottom: 24px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  h2 {
+    margin: 0 0 20px 0;
+    font-size: 18px;
+    color: #1a1a1a;
+    font-weight: 600;
+  }
+}
+
+// Info grid
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  label {
+    font-size: 12px;
+    color: #666;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  span {
+    font-size: 14px;
+    color: #1a1a1a;
+  }
+
+  .no-value {
+    color: #999;
+    font-style: italic;
+  }
+
+  .chaos-active {
+    color: #856404;
+    font-weight: 500;
+  }
+}
+
+.domain-link {
+  color: $primary-dark;
+  text-decoration: none;
+  font-size: 14px;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.server-link {
+  background: none;
+  border: none;
+  color: #0066cc;
+  cursor: pointer;
+  padding: 0;
+  font-size: 14px;
+  text-align: left;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+// Version information
+.version-info {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  .version-current {
+    label {
+      display: block;
+      font-size: 12px;
+      color: #666;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 8px;
+    }
+
+    code {
+      display: inline-block;
+      background: #f5f5f5;
+      padding: 8px 12px;
+      border-radius: 4px;
+      font-size: 13px;
+      color: #1a1a1a;
+    }
+  }
+
+  .version-upgrades {
+    label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+      color: #666;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 12px;
+
+      .upgrade-count {
+        background: #ffc107;
+        color: #856404;
+        padding: 2px 8px;
+        border-radius: 12px;
+        font-size: 11px;
+        font-weight: 600;
+      }
+    }
+
+    .upgrade-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .upgrade-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 12px;
+      background: #f8f9fa;
+      border-radius: 6px;
+      border: 1px solid #e9ecef;
+
+      code {
+        flex: 1;
+        font-size: 13px;
+        color: #1a1a1a;
+      }
+
+      .upgrade-btn {
+        padding: 6px 16px;
+        background: #ffc107;
+        color: #856404;
+        border: none;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+
+        &:hover:not(:disabled) {
+          background: #e0a800;
+        }
+
+        &:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+
+  .version-latest {
+    padding: 12px;
+    background: #d4edda;
+    color: #155724;
+    border-radius: 6px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+
+// Quick actions list
+.action-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .action-list-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 14px;
+    color: #1a1a1a;
+    text-align: left;
+    width: 100%;
+
+    &:hover:not(:disabled) {
+      background: #e9ecef;
+      border-color: #dee2e6;
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    &.danger {
+      color: #dc3545;
+
+      &:hover:not(:disabled) {
+        background: #f8d7da;
+        border-color: #f5c6cb;
+      }
+    }
+
+    .action-icon {
+      font-size: 18px;
+    }
+
+    .action-text {
+      flex: 1;
+    }
+  }
+}
+
+// Health status
+.health-status {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .health-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #e9ecef;
+
+    &:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+
+    .health-label {
+      font-size: 14px;
+      color: #666;
+    }
+
+    .health-value {
+      font-size: 16px;
+      font-weight: 600;
+      color: #1a1a1a;
+    }
+  }
+}

src/routes/Authenticated/Apps/App.tsx

@@ -1,55 +1,52 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
-import { useParams, useNavigate, Link } from 'react-router-dom';
+import { useParams, useNavigate } from "react-router-dom";
-import { Header } from '../../components/Header/Header';
+import { Header } from "../../../components/Header/Header";
-import { Terminal } from '../../components/Terminal/Terminal';
+import { apiService } from "../../../services/api";
-import { apiService } from '../../services/api';
+import type { AbraApp } from "../../../types";
-import type { AbraApp } from '../../types';
+import "./App.scss";
-import type { LogEntry } from '../../services/mockApi';
-import './App.scss';
 
 export const AppDetail: React.FC = () => {
   const { server, appName } = useParams<{ server: string; appName: string }>();
   const navigate = useNavigate();
-  
+
   const [app, setApp] = useState<AbraApp | null>(null);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
+  const [isEditing, setIsEditing] = useState(false);
   const [actionLoading, setActionLoading] = useState<string | null>(null);
-  
-  // Terminal state
-  const [terminalLogs, setTerminalLogs] = useState<LogEntry[]>([]);
-  const [terminalActive, setTerminalActive] = useState(false);
 
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
+  const isMockMode = !import.meta.env.VITE_API_URL;
 
   useEffect(() => {
     const fetchApp = async () => {
       try {
         if (isMockMode) {
-          const { mockApiService } = await import('../../services/mockApi');
+          const { mockApiService } = await import("../../../services/mockApi");
           const appsData = await mockApiService.getAppsGrouped();
-          
+
-          const serverApps = appsData[server || ''];
+          // Find the specific app
-          const foundApp = serverApps?.apps.find(a => a.appName === appName);
+          const serverApps = appsData[server || ""];
-          
+          const foundApp = serverApps?.apps.find((a) => a.appName === appName);
+
           if (foundApp) {
             setApp(foundApp);
           } else {
-            setError('App not found');
+            setError("App not found");
           }
         } else {
+          // Real API call would be here
           const appsData = await apiService.getAppsGrouped();
-          const serverApps = appsData[server || ''];
+          const serverApps = appsData[server || ""];
-          const foundApp = serverApps?.apps.find(a => a.appName === appName);
+          const foundApp = serverApps?.apps.find((a) => a.appName === appName);
-          
+
           if (foundApp) {
             setApp(foundApp);
           } else {
-            setError('App not found');
+            setError("App not found");
           }
         }
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load app');
+        setError(err instanceof Error ? err.message : "Failed to load app");
       } finally {
         setLoading(false);
       }
@@ -58,55 +55,30 @@ export const AppDetail: React.FC = () => {
     fetchApp();
   }, [server, appName, isMockMode]);
 
-  const handleAction = async (action: string, version?: string) => {
+  const handleAction = async (action: string) => {
     if (!app) return;
-    
+
     setActionLoading(action);
-    setTerminalActive(true);
-    setTerminalLogs([]);
-    
     try {
-      if (isMockMode) {
+      switch (action) {
-        const { mockApiService } = await import('../../services/mockApi');
+        case "start":
-        
+          await apiService.startApp(app.appName);
-        const onLog = (log: LogEntry) => {
+          break;
-          setTerminalLogs(prev => [...prev, log]);
+        case "stop":
-        };
+          await apiService.stopApp(app.appName);
-        
+          break;
-        switch (action) {
+        case "deploy":
-          case 'deploy':
+          await apiService.deployApp(app.appName);
-            await mockApiService.deployApp(app.appName, onLog);
+          break;
-            break;
+        case "upgrade":
-          case 'stop':
+          // Upgrade logic would go here
-            await mockApiService.stopApp(app.appName, onLog);
+          console.log("Upgrade app");
-            break;
+          break;
-          case 'upgrade':
-            if (version) {
-              await mockApiService.upgradeApp(app.appName, version, onLog);
-            }
-            break;
-          case 'remove':
-            await mockApiService.removeApp(app.appName, onLog);
-            break;
-        }
-      } else {
-        // Real API calls
-        switch (action) {
-          case 'stop':
-            await apiService.stopApp(app.appName);
-            break;
-          case 'deploy':
-            await apiService.deployApp(app.appName);
-            break;
-        }
       }
+      // Refresh app data after action
+      // In real implementation, you'd refetch the app
     } catch (err) {
-      console.error('Action failed:', err);
+      console.error("Action failed:", err);
-      setTerminalLogs(prev => [...prev, {
-        type: 'error',
-        text: `❌ Error: ${err instanceof Error ? err.message : 'Action failed'}`,
-        timestamp: new Date()
-      }]);
     } finally {
       setActionLoading(null);
     }
@@ -128,8 +100,8 @@ export const AppDetail: React.FC = () => {
       <div className="app-detail-page">
         <Header />
         <main className="app-detail-content">
-          <div className="error">{error || 'App not found'}</div>
+          <div className="error">{error || "App not found"}</div>
-          <button onClick={() => navigate('/apps')} className="back-button">
+          <button onClick={() => navigate("/apps")} className="back-button">
             Back to Apps
           </button>
         </main>
@@ -137,14 +109,15 @@ export const AppDetail: React.FC = () => {
     );
   }
 
-  const upgradeVersions = app.upgrade !== 'latest' ? app.upgrade.split('\n') : [];
+  const upgradeVersions =
+    app.upgrade !== "latest" ? app.upgrade.split("\n") : [];
 
   return (
     <div className="app-detail-page">
       <Header />
       <main className="app-detail-content">
         <div className="breadcrumb">
-          <button onClick={() => navigate('/apps')} className="breadcrumb-link">
+          <button onClick={() => navigate("/apps")} className="breadcrumb-link">
             Apps
           </button>
           <span className="breadcrumb-separator">/</span>
@@ -156,44 +129,47 @@ export const AppDetail: React.FC = () => {
             <h1>{app.appName}</h1>
             <div className="app-meta">
               <span className="recipe-badge">{app.recipe}</span>
-              <span className={`status-badge status-${app.status}`}>{app.status}</span>
+              <span className={`status-badge status-${app.status}`}>
-              {app.chaos === 'true' && (
+                {app.status}
-                <span className="chaos-badge" title="Chaos mode enabled"> Chaos</span>
+              </span>
+              {app.chaos === "true" && (
+                <span className="chaos-badge" title="Chaos mode enabled">
+                  Chaos
+                </span>
               )}
             </div>
           </div>
 
           <div className="app-actions">
-            <button 
+            <button
-              className="action-btn danger"
+              className="action-btn secondary"
-              onClick={() => handleAction('stop')}
+              onClick={() => setIsEditing(!isEditing)}
-              disabled={!!actionLoading}
             >
-              {actionLoading === 'stop' ? 'Stopping...' : 'Stop'}
+              {isEditing ? "Cancel" : "Edit"}
             </button>
-            <button 
+            <button
-              className="action-btn primary"
+              className="action-btn danger"
-              onClick={() => handleAction('deploy')}
+              onClick={() => handleAction("stop")}
-              disabled={!!actionLoading}
+              disabled={actionLoading === "stop"}
             >
-              {actionLoading === 'deploy' ? 'Deploying...' : 'Deploy'}
+              {actionLoading === "stop" ? "Stopping..." : "Stop"}
+            </button>
+            <button
+              className="action-btn primary"
+              onClick={() => handleAction("deploy")}
+              disabled={actionLoading === "deploy"}
+            >
+              {actionLoading === "deploy" ? "Deploying..." : "Deploy"}
             </button>
           </div>
         </div>
 
-        {/* Terminal Component */}
-        <Terminal 
-          logs={terminalLogs} 
-          isActive={terminalActive}
-          onClose={() => setTerminalActive(false)}
-        />
-
         <div className="content-grid">
           {/* Left Column - Main Info */}
           <div className="main-column">
             <section className="info-card">
               <h2>Application Details</h2>
-              
+
               <div className="info-grid">
                 <div className="info-item">
                   <label>App Name</label>
@@ -203,7 +179,12 @@ export const AppDetail: React.FC = () => {
                 <div className="info-item">
                   <label>Domain</label>
                   {app.domain ? (
-                    <a href={`https://${app.domain}`} target="_blank" rel="noopener noreferrer" className="link">
+                    <a
+                      href={`https://${app.domain}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="domain-link"
+                    >
                       {app.domain} ↗
                     </a>
                   ) : (
@@ -212,14 +193,13 @@ export const AppDetail: React.FC = () => {
                 </div>
 
                 <div className="info-item">
-                  <label htmlFor="server-link">Server</label>
+                  <label>Server</label>
-                  <Link
+                  <button
-                    id="server-link"
+                    onClick={() => navigate(`/servers/${app.server}`)}
-                    to={`/servers/${app.server}`}
+                    className="server-link"
-                    className="link"
                   >
-                    {app.server} ↗
+                    {app.server} →
-                  </Link>
+                  </button>
                 </div>
 
                 <div className="info-item">
@@ -236,8 +216,8 @@ export const AppDetail: React.FC = () => {
 
                 <div className="info-item">
                   <label>Chaos Mode</label>
-                  <span className={app.chaos === 'true' ? 'chaos-active' : ''}>
+                  <span className={app.chaos === "true" ? "chaos-active" : ""}>
-                    {app.chaos === 'true' ? '☠️ Enabled' : 'Disabled'}
+                    {app.chaos === "true" ? "🔬 Enabled" : "Disabled"}
                   </span>
                 </div>
               </div>
@@ -245,14 +225,14 @@ export const AppDetail: React.FC = () => {
 
             <section className="info-card">
               <h2>Version Information</h2>
-              
+
               <div className="version-info">
                 <div className="version-current">
                   <label>Current Version</label>
                   <code>{app.version}</code>
                 </div>
 
-                {app.chaosVersion !== 'unknown' && (
+                {app.chaosVersion !== "unknown" && (
                   <div className="version-current">
                     <label>Chaos Version</label>
                     <code>{app.chaosVersion}</code>
@@ -263,18 +243,22 @@ export const AppDetail: React.FC = () => {
                   <div className="version-upgrades">
                     <label>
                       Available Upgrades
-                      <span className="upgrade-count">{upgradeVersions.length}</span>
+                      <span className="upgrade-count">
+                        {upgradeVersions.length}
+                      </span>
                     </label>
                     <div className="upgrade-list">
                       {upgradeVersions.map((version, idx) => (
                         <div key={idx} className="upgrade-item">
                           <code>{version}</code>
-                          <button 
+                          <button
                             className="upgrade-btn"
-                            onClick={() => handleAction('upgrade', version)}
+                            onClick={() => handleAction("upgrade")}
-                            disabled={!!actionLoading}
+                            disabled={actionLoading === "upgrade"}
                           >
-                            {actionLoading === 'upgrade' ? 'Upgrading...' : 'Upgrade'}
+                            {actionLoading === "upgrade"
+                              ? "Upgrading..."
+                              : "Upgrade"}
                           </button>
                         </div>
                       ))}
@@ -282,48 +266,49 @@ export const AppDetail: React.FC = () => {
                   </div>
                 )}
 
-                {app.upgrade === 'latest' && (
+                {app.upgrade === "latest" && (
-                  <div className="version-latest">
+                  <div className="version-latest">Running latest version</div>
-                    ✓ Running latest version
-                  </div>
                 )}
               </div>
             </section>
           </div>
 
-          {/* Right Column - Actions & Stats */}
+          {/* Right Column - Actions & Logs */}
           <div className="sidebar-column">
             <section className="info-card">
               <h2>Quick Actions</h2>
-              
-              <div className="action-list">
 
-                <button 
+              <div className="action-list">
+                <button
                   className="action-list-item"
-                  onClick={() => handleAction('deploy')}
+                  onClick={() => handleAction("start")}
-                  disabled={!!actionLoading}
+                  disabled={actionLoading === "start"}
                 >
-                  <span className="action-text">Deploy Application</span>
+                  <span className="action-text">Start Application</span>
                 </button>
 
-                <button 
+                <button
                   className="action-list-item"
-                  onClick={() => handleAction('stop')}
+                  onClick={() => handleAction("stop")}
-                  disabled={!!actionLoading}
+                  disabled={actionLoading === "stop"}
                 >
                   <span className="action-text">Stop Application</span>
                 </button>
 
-                <button 
+                <button className="action-list-item">
-                  className="action-list-item danger"
+                  <span className="action-text">Restart Application</span>
-                  onClick={() => {
+                </button>
-                    if (confirm(`Are you sure you want to remove ${app.appName}?`)) {
+
-                      handleAction('remove');
+                <button className="action-list-item">
-                    }
+                  <span className="action-text">View Logs</span>
-                  }}
+                </button>
-                  disabled={!!actionLoading}
+
-                >
+                <button className="action-list-item">
-                  <span className="action-text">Remove Application</span>
+                  <span className="action-text">Edit Configuration</span>
+                </button>
+
+                <button className="action-list-item danger">
+                  <span className="action-text">Delete Application</span>
                 </button>
               </div>
             </section>

src/routes/Authenticated/Apps/Apps.scss

@@ -1,6 +1,6 @@
-@use '../../assets/scss/variables' as *;
+@use "../../../assets/scss/variables" as *;
-@use '../../assets/scss/mixins' as *;
+@use "../../../assets/scss/mixins" as *;
-@use '../../assets/scss/global' as *;
+@use "../../../assets/scss/global" as *;
 
 // Extend global page wrapper
 .apps-page {
@@ -11,76 +11,6 @@
   @extend .page-content;
 }
 
-// Compact stats row
-.stats-row {
-  display: flex;
-  align-items: center;
-  gap: $spacing-md;
-  margin-bottom: $spacing-xl;
-  flex-wrap: wrap;
-}
-
-.stat-chip {
-  display: flex;
-  align-items: center;
-  gap: $spacing-sm;
-  padding: $spacing-sm $spacing-md;
-  background: white;
-  border: 2px solid $border-color;
-  border-radius: $radius-md;
-  cursor: pointer;
-  transition: all $transition-base;
-  font-size: $font-size-base;
-
-  &:hover:not(:disabled) {
-    border-color: $primary;
-    transform: translateY(-2px);
-    box-shadow: $shadow-sm;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &.active {
-    border-color: $primary;
-    background: rgba($primary, 0.05);
-  }
-
-  .stat-label {
-    color: $text-secondary;
-    font-size: $font-size-sm;
-    font-weight: $font-weight-medium;
-  }
-
-  .stat-value {
-    color: $text-primary;
-    font-size: $font-size-xl;
-    font-weight: $font-weight-bold;
-    min-width: 24px;
-    text-align: center;
-  }
-}
-
-.reset-filters-btn {
-  padding: $spacing-sm $spacing-md;
-  background: $bg-secondary;
-  border: 2px solid $border-color;
-  border-radius: $radius-md;
-  cursor: pointer;
-  transition: all $transition-base;
-  font-size: $font-size-sm;
-  font-weight: $font-weight-medium;
-  color: $text-secondary;
-
-  &:hover {
-    background: white;
-    color: $text-primary;
-    border-color: $primary;
-  }
-}
-
 // Apps table specific styles
 .apps-table-container {
   @include card;
@@ -144,7 +74,7 @@
 }
 
 .domain-link {
-  color: $primary-dark;
+  color: $primary;
   text-decoration: none;
   transition: color $transition-base;
 
@@ -184,28 +114,21 @@
   .action-btn {
     background: none;
     border: 1px solid $border-color;
-    padding: $spacing-xs $spacing-md;
+    padding: $spacing-xs $spacing-sm;
     border-radius: $radius-sm;
     cursor: pointer;
-    font-size: $font-size-sm;
+    font-size: $font-size-base;
     color: $text-primary;
-    font-weight: $font-weight-medium;
     transition: all $transition-base;
 
     &:hover {
-      background-color: $primary;
+      background-color: $bg-tertiary;
-      color: white;
+      transform: scale(1.1);
-      border-color: $primary;
     }
 
     &.upgrade {
       border-color: $warning;
       color: $warning;
-
-      &:hover {
-        background-color: $warning;
-        color: white;
-      }
     }
   }
-}
+}

src/routes/Authenticated/Apps/Apps.tsx

@@ -1,28 +1,31 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from "react";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
-import { Header } from '../../components/Header/Header';
+import { Header } from "../../../components/Header/Header";
-import { apiService } from '../../services/api';
+import { apiService } from "../../../services/api";
-import type { AbraApp, AppWithServer, ServerAppsResponse } from '../../types';
+import type {
-import './Apps.scss';
+  AbraApp,
+  AppWithServer,
+  ServerAppsResponse,
+} from "../../../types";
+import "./Apps.scss";
 
 export const Apps: React.FC = () => {
   const navigate = useNavigate();
   const [appsData, setAppsData] = useState<ServerAppsResponse | null>(null);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
-  const [searchTerm, setSearchTerm] = useState('');
+  const [searchTerm, setSearchTerm] = useState("");
-  const [filterServer, setFilterServer] = useState<string>('all');
+  const [filterServer, setFilterServer] = useState<string>("all");
-  const [filterStatus, setFilterStatus] = useState<string>('all');
+  const [filterStatus, setFilterStatus] = useState<string>("all");
   const [showUpgradesOnly, setShowUpgradesOnly] = useState(false);
-  const [showChaosOnly, setShowChaosOnly] = useState(false);
+
-  
+  const isMockMode = !import.meta.env.VITE_API_URL;
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
 
   useEffect(() => {
     const fetchData = async () => {
       try {
         if (isMockMode) {
-          const { mockApiService } = await import('../../services/mockApi');
+          const { mockApiService } = await import("../../../services/mockApi");
           const data = await mockApiService.getAppsGrouped();
           setAppsData(data);
         } else {
@@ -30,7 +33,7 @@ export const Apps: React.FC = () => {
           setAppsData(data);
         }
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load apps');
+        setError(err instanceof Error ? err.message : "Failed to load apps");
       } finally {
         setLoading(false);
       }
@@ -42,15 +45,15 @@ export const Apps: React.FC = () => {
   // Flatten and enrich apps data
   const allApps: AppWithServer[] = useMemo(() => {
     if (!appsData) return [];
-    
+
     return Object.entries(appsData).flatMap(([serverName, serverData]) =>
-      serverData.apps.map(app => ({
+      serverData.apps.map((app) => ({
         ...app,
         serverStats: {
           appCount: serverData.appCount,
           upgradeCount: serverData.upgradeCount,
         },
-      }))
+      })),
     );
   }, [appsData]);
 
@@ -62,17 +65,19 @@ export const Apps: React.FC = () => {
 
   // Filter apps
   const filteredApps = useMemo(() => {
-    return allApps.filter(app => {
+    return allApps.filter((app) => {
-      const matchesSearch = 
+      const matchesSearch =
         app.appName.toLowerCase().includes(searchTerm.toLowerCase()) ||
         app.recipe.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        (app.domain || '').toLowerCase().includes(searchTerm.toLowerCase());
+        (app.domain || "").toLowerCase().includes(searchTerm.toLowerCase());
-      
+
-      const matchesServer = filterServer === 'all' || app.server === filterServer;
+      const matchesServer =
-      const matchesChaos = filterStatus === 'all' || 
+        filterServer === "all" || app.server === filterServer;
-        (filterStatus === 'chaos' && app.chaos === 'true') ||
+      const matchesChaos =
-        (filterStatus === 'stable' && app.chaos === 'false');
+        filterStatus === "all" ||
-      const matchesUpgrade = !showUpgradesOnly || app.upgrade !== 'latest';
+        (filterStatus === "chaos" && app.chaos === "true") ||
+        (filterStatus === "stable" && app.chaos === "false");
+      const matchesUpgrade = !showUpgradesOnly || app.upgrade !== "latest";
 
       return matchesSearch && matchesServer && matchesChaos && matchesUpgrade;
     });
@@ -80,35 +85,15 @@ export const Apps: React.FC = () => {
 
   const stats = useMemo(() => {
     const total = allApps.length;
-    const needsUpgrade = allApps.filter(app => app.upgrade !== 'latest').length;
+    const needsUpgrade = allApps.filter(
-    const chaosApps = allApps.filter(app => app.chaos === 'true').length;
+      (app) => app.upgrade !== "latest",
+    ).length;
+    const chaosApps = allApps.filter((app) => app.chaos === "true").length;
     const totalServers = servers.length;
 
     return { total, needsUpgrade, chaosApps, totalServers };
   }, [allApps, servers]);
 
-  const resetFilters = () => {
-    setSearchTerm('');
-    setFilterServer('all');
-    setShowChaosOnly(false);
-    setShowUpgradesOnly(false);
-  };
-
-  const toggleUpgrades = () => setShowUpgradesOnly(prev => !prev);
-  const toggleChaos = () => setShowChaosOnly(prev => !prev);
-
-  // Show only apps that need upgrades
-  const filterByUpgrades = () => {
-    setShowUpgradesOnly(true);
-    setFilterStatus('all');
-  };
- 
-  // Show only chaos apps
-  const filterByChaos = () => {
-    setFilterStatus('chaos');
-    setShowUpgradesOnly(false);
-  };
-
   if (loading) {
     return (
       <div className="apps-page">
@@ -137,49 +122,37 @@ export const Apps: React.FC = () => {
       <main className="apps-content">
         <div className="page-header">
           <h1>Applications</h1>
-          <p className="subtitle">{stats.total} apps across {stats.totalServers} servers</p>
+          <p className="subtitle">
+            {stats.total} apps across {stats.totalServers} servers
+          </p>
         </div>
 
-        {/* Compact Stats Overview */}
+        {/* Stats Overview */}
-        <div className="stats-row">
+        <div className="stats-grid">
-          <button
+          <div className="stat-card">
-            className="stat-chip"
+            <div className="stat-info">
-            onClick={resetFilters}
+              <p className="stat-number">{stats.total}</p>
-            title="Click to show all apps"
+              <p className="stat-label">Total Apps</p>
-            > 
+            </div>
-            <span className="stat-label">Apps</span>
+          </div>
-            <span className="stat-value">{stats.total}</span>
+          <div className="stat-card upgrade">
-          </button>
+            <div className="stat-info">
-          
+              <p className="stat-number">{stats.needsUpgrade}</p>
-          <button
+              <p className="stat-label">Upgrades Available</p>
-            className="stat-chip"
+            </div>
-            onClick={() => navigate('/servers')}
+          </div>
-            title="View servers"
+          <div className="stat-card chaos">
-          >
+            <div className="stat-info">
-            <span className="stat-label">Servers</span>
+              <p className="stat-number">{stats.chaosApps}</p>
-            <span className="stat-value">{stats.totalServers}</span>
+              <p className="stat-label">Chaos Mode</p>
-          </button>
+            </div>
-          
+          </div>
-          <button
+          <div className="stat-card">
-            className={`stat-chip ${showUpgradesOnly ? 'active' : ''}`}
+            <div className="stat-info">
-            onClick={toggleUpgrades}
+              <p className="stat-number">{stats.totalServers}</p>
-            title="Click to toggle apps with upgrades available"
+              <p className="stat-label">Servers</p>
-            disabled={stats.needsUpgrade === 0}
+            </div>
-          >
+          </div>
-            <span className="stat-label">Upgrades</span>
-            <span className="stat-value">{stats.needsUpgrade}</span>
-          </button>
-          
-          <button
-            className={`stat-chip ${showChaosOnly ? 'active' : ''}`}
-            onClick={toggleChaos}
-            title="Click to toggle chaos mode apps"
-            disabled={stats.chaosApps === 0}
-          >
-            <span className="stat-label">Chaos</span>
-            <span className="stat-value">{stats.chaosApps}</span>
-          </button>
-          
         </div>
 
         {/* Filters */}
@@ -192,12 +165,35 @@ export const Apps: React.FC = () => {
             className="search-input"
           />
 
-          <select value={filterServer} onChange={(e) => setFilterServer(e.target.value)}>
+          <select
+            value={filterServer}
+            onChange={(e) => setFilterServer(e.target.value)}
+          >
             <option value="all">All Servers</option>
-            {servers.map(server => (
+            {servers.map((server) => (
-              <option key={server} value={server}>{server}</option>
+              <option key={server} value={server}>
+                {server}
+              </option>
             ))}
           </select>
+
+          <select
+            value={filterStatus}
+            onChange={(e) => setFilterStatus(e.target.value)}
+          >
+            <option value="all">All Status</option>
+            <option value="stable">Stable</option>
+            <option value="chaos">Chaos Mode</option>
+          </select>
+
+          <label className="checkbox-filter">
+            <input
+              type="checkbox"
+              checked={showUpgradesOnly}
+              onChange={(e) => setShowUpgradesOnly(e.target.checked)}
+            />
+            <span>Show only apps with upgrades</span>
+          </label>
         </div>
 
         {/* Apps Table */}
@@ -211,7 +207,7 @@ export const Apps: React.FC = () => {
                 <th>Server</th>
                 <th>Version</th>
                 <th>Status</th>
-                {/* <th>Actions</th> */}
+                <th>Actions</th>
               </tr>
             </thead>
             <tbody>
@@ -223,10 +219,12 @@ export const Apps: React.FC = () => {
                 </tr>
               ) : (
                 filteredApps.map((app) => (
-                  <tr 
+                  <tr
                     key={`${app.server}/${app.appName}`}
-                    onClick={() => navigate(`/apps/${app.server}/${app.appName}`)}
+                    onClick={() =>
-                    style={{ cursor: 'pointer' }}
+                      navigate(`/apps/${app.server}/${app.appName}`)
+                    }
+                    style={{ cursor: "pointer" }}
                   >
                     <td className="app-name-cell">
                       <span className="app-name">{app.appName}</span>
@@ -236,10 +234,10 @@ export const Apps: React.FC = () => {
                     </td>
                     <td>
                       {app.domain ? (
-                        <a 
+                        <a
-                          href={`https://${app.domain}`} 
+                          href={`https://${app.domain}`}
-                          target="_blank" 
+                          target="_blank"
-                          rel="noopener noreferrer" 
+                          rel="noopener noreferrer"
                           className="domain-link"
                           onClick={(e) => e.stopPropagation()}
                         >
@@ -255,12 +253,17 @@ export const Apps: React.FC = () => {
                     <td>
                       <div className="version-cell">
                         <span className="version">{app.version}</span>
-                        {app.chaos === 'true' && (
+                        {app.chaos === "true" && (
-                          <span className="chaos-badge" title="Chaos mode enabled"></span>
+                          <span
+                            className="chaos-badge"
+                            title="Chaos mode enabled"
+                          ></span>
                         )}
-                        {app.upgrade !== 'latest' && (
+                        {app.upgrade !== "latest" && (
-                          <span className="upgrade-available" title="Upgrade available">
+                          <span
-                          </span>
+                            className="upgrade-available"
+                            title="Upgrade available"
+                          ></span>
                         )}
                       </div>
                     </td>
@@ -269,10 +272,10 @@ export const Apps: React.FC = () => {
                         {app.status}
                       </span>
                     </td>
-                    {/* <td>
+                    <td>
                       <div className="actions">
-                        <button 
+                        <button
-                          className="action-btn" 
+                          className="action-btn"
                           title="View details"
                           onClick={(e) => {
                             e.stopPropagation();
@@ -281,9 +284,9 @@ export const Apps: React.FC = () => {
                         >
                           details
                         </button>
-                        {app.upgrade !== 'latest' && (
+                        {app.upgrade !== "latest" && (
-                          <button 
+                          <button
-                            className="action-btn upgrade" 
+                            className="action-btn upgrade"
                             title="Upgrade"
                             onClick={(e) => {
                               e.stopPropagation();
@@ -294,7 +297,7 @@ export const Apps: React.FC = () => {
                           </button>
                         )}
                       </div>
-                    </td> */}
+                    </td>
                   </tr>
                 ))
               )}
@@ -308,4 +311,4 @@ export const Apps: React.FC = () => {
       </main>
     </div>
   );
-};
+};

src/routes/Authenticated/Dashboard/Dashboard.tsx

@@ -1,32 +1,34 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
-import { Header } from '../../components/Header/Header';
+import { Header } from "../../../components/Header/Header";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
-import { apiService } from '../../services/api';
+import { apiService } from "../../../services/api";
-import type { AbraApp, AbraServer } from '../../types';
+import type { AbraApp, AbraServer } from "../../../types";
-import './_Dashboard.scss';
+import "./_Dashboard.scss";
 
 export const Dashboard: React.FC = () => {
   const [apps, setApps] = useState<AbraApp[]>([]);
   const [servers, setServers] = useState<AbraServer[]>([]);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
   const navigate = useNavigate();
 
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
+  const isMockMode = !import.meta.env.VITE_API_URL;
 
   useEffect(() => {
     const fetchData = async () => {
       try {
         if (isMockMode) {
           // Use mock API in development
-          const { mockApiService } = await import('../../services/mockApi');
+          const { mockApiService } = await import("../../../services/mockApi");
           const [appsData, serversData] = await Promise.all([
             mockApiService.getAppsGrouped(),
             mockApiService.getServers(),
           ]);
-          
+
           // Flatten the grouped apps data
-          const flatApps = Object.values(appsData).flatMap(serverData => serverData.apps);
+          const flatApps = Object.values(appsData).flatMap(
+            (serverData) => serverData.apps,
+          );
           setApps(flatApps);
           setServers(serversData);
         } else {
@@ -35,14 +37,16 @@ export const Dashboard: React.FC = () => {
             apiService.getAppsGrouped(),
             apiService.getServers(),
           ]);
-          
+
           // Flatten the grouped apps data
-          const flatApps = Object.values(appsData).flatMap(serverData => serverData.apps);
+          const flatApps = Object.values(appsData).flatMap(
+            (serverData) => serverData.apps,
+          );
           setApps(flatApps);
           setServers(serversData);
         }
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load data');
+        setError(err instanceof Error ? err.message : "Failed to load data");
       } finally {
         setLoading(false);
       }
@@ -52,8 +56,8 @@ export const Dashboard: React.FC = () => {
   }, [isMockMode]);
 
   // Calculate stats
-  const deployedAppsCount = apps.filter(a => a.status === 'deployed').length;
+  const deployedAppsCount = apps.filter((a) => a.status === "deployed").length;
-  const serversWithAppsCount = new Set(apps.map(a => a.server)).size;
+  const serversWithAppsCount = new Set(apps.map((a) => a.server)).size;
 
   if (loading) {
     return (
@@ -84,23 +88,27 @@ export const Dashboard: React.FC = () => {
         <div className="page-header">
           <h1>Dashboard</h1>
         </div>
-        
+
         <div className="stats-grid">
-          <button onClick={() => navigate('/apps')} className="nav-link bland-button">
+          <button
+            onClick={() => navigate("/apps")}
+            className="nav-link bland-button"
+          >
             <div className="stat-card">
               <h3>Apps</h3>
-              <p className="stat-label">
+              <p className="stat-number">{apps.length}</p>
-                {deployedAppsCount} deployed
+              <p className="stat-label">{deployedAppsCount} deployed</p>
-              </p>
             </div>
           </button>
 
-          <button onClick={() => navigate('/servers')} className="nav-link bland-button">
+          <button
+            onClick={() => navigate("/servers")}
+            className="nav-link bland-button"
+          >
             <div className="stat-card">
               <h3>Servers</h3>
-              <p className="stat-label">
+              <p className="stat-number">{servers.length}</p>
-                {serversWithAppsCount} connected
+              <p className="stat-label">{serversWithAppsCount} connected</p>
-              </p>
             </div>
           </button>
         </div>
@@ -109,14 +117,14 @@ export const Dashboard: React.FC = () => {
           <h3>Recent Applications</h3>
           <div className="apps-list">
             {apps.slice(0, 5).map((app, index) => (
-              <div 
+              <div
-                key={`${app.server}-${app.appName}-${index}`} 
+                key={`${app.server}-${app.appName}-${index}`}
-                className="app-item" 
+                className="app-item"
                 onClick={() => navigate(`/apps/${app.server}/${app.appName}`)}
               >
                 <div className="app-info">
                   <h4>{app.appName}</h4>
-                  <p className="app-domain">{app.domain || 'No domain'}</p>
+                  <p className="app-domain">{app.domain || "No domain"}</p>
                   <p className="app-server">{app.server}</p>
                 </div>
                 <span className={`status-badge status-${app.status}`}>

src/routes/Authenticated/Dashboard/_Dashboard.scss

@@ -1,6 +1,6 @@
-@use '../../assets/scss/variables' as *;
+@use "../../../assets/scss/variables" as *;
-@use '../../assets/scss/mixins' as *;
+@use "../../../assets/scss/mixins" as *;
-@use '../../assets/scss/global' as *;
+@use "../../../assets/scss/global" as *;
 
 // Extend global page wrapper
 .dashboard-page {
@@ -33,7 +33,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  transition: transform $transition-base, box-shadow $transition-base;
+  transition:
+    transform $transition-base,
+    box-shadow $transition-base;
   cursor: pointer;
 
   &:hover {

src/routes/Authenticated/Servers/Server.scss

@@ -1,14 +1,68 @@
-@use '../../assets/scss/variables' as *;
+@use "../../../assets/scss/variables" as *;
-@use '../../assets/scss/mixins' as *;
+@use "../../../assets/scss/mixins" as *;
-@use '../../assets/scss/global' as *;
-@use "sass:color";
 
 .server-detail-page {
-  @extend .page-wrapper;
+  min-height: 100vh;
+  background-color: $bg-secondary;
 }
 
 .server-detail-content {
-  @extend .page-content;
+  max-width: 1600px;
+  margin: 0 auto;
+  padding: $spacing-2xl $spacing-xl;
+
+  @media (max-width: 768px) {
+    padding: $spacing-xl $spacing-md;
+  }
+
+  .loading,
+  .error {
+    text-align: center;
+    padding: $spacing-3xl;
+    font-size: $font-size-lg;
+  }
+
+  .loading {
+    color: $text-secondary;
+  }
+
+  .error {
+    color: $error;
+  }
+}
+
+// Breadcrumb navigation
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  margin-bottom: $spacing-xl;
+  font-size: $font-size-sm;
+
+  .breadcrumb-link {
+    background: none;
+    border: none;
+    color: $primary;
+    cursor: pointer;
+    padding: 0;
+    font-size: $font-size-sm;
+    text-decoration: none;
+    transition: color $transition-base;
+
+    &:hover {
+      color: $primary-light;
+      text-decoration: underline;
+    }
+  }
+
+  .breadcrumb-separator {
+    color: $text-muted;
+  }
+
+  .breadcrumb-current {
+    color: $text-primary;
+    font-weight: $font-weight-semibold;
+  }
 }
 
 // Server header section
@@ -46,7 +100,7 @@
   }
 }
 
-// Action buttons (shared with App view, could be moved to global)
+// Action buttons
 .action-btn {
   padding: $spacing-sm $spacing-lg;
   border: 2px solid $border-color;
@@ -85,7 +139,7 @@
     border-color: $border-color;
 
     &:hover:not(:disabled) {
-      background: color.adjust($bg-secondary, $lightness: -10%);
+      background: darken($bg-secondary, 5%);
     }
   }
 
@@ -95,7 +149,7 @@
     border-color: $error;
 
     &:hover:not(:disabled) {
-      background: color.adjust($error, $lightness: -10%);
+      background: darken($error, 10%);
     }
   }
 }
@@ -105,7 +159,7 @@
   @extend .secondary;
 }
 
-// Badges - host badge is specific to server view
+// Badges
 .host-badge {
   display: inline-flex;
   align-items: center;
@@ -125,12 +179,56 @@
   gap: $spacing-xs;
   padding: $spacing-xs $spacing-md;
   background: rgba($warning, 0.1);
-  background: color.adjust($error, $lightness: -20%);
+  color: darken($warning, 20%);
   border-radius: $radius-md;
   font-size: $font-size-sm;
   font-weight: $font-weight-medium;
 }
 
+.recipe-badge {
+  display: inline-block;
+  padding: $spacing-xs $spacing-sm;
+  background: rgba($primary, 0.1);
+  color: $primary-light;
+  border-radius: $radius-sm;
+  font-size: $font-size-xs;
+  font-weight: $font-weight-medium;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: $spacing-xs $spacing-sm;
+  border-radius: $radius-sm;
+  font-size: $font-size-xs;
+  font-weight: $font-weight-medium;
+
+  &.status-deployed,
+  &.status-running {
+    background: rgba($success, 0.1);
+    color: darken($success, 10%);
+  }
+
+  &.status-stopped {
+    background: rgba($error, 0.1);
+    color: darken($error, 10%);
+  }
+
+  &.status-unknown {
+    background: $bg-secondary;
+    color: $text-muted;
+  }
+}
+
+.chaos-badge {
+  display: inline-block;
+  padding: $spacing-xs $spacing-sm;
+  background: rgba($info, 0.1);
+  color: darken($info, 10%);
+  border-radius: $radius-sm;
+  font-size: $font-size-xs;
+  font-weight: $font-weight-medium;
+}
+
 // Content grid layout
 .content-grid {
   display: grid;
@@ -190,11 +288,11 @@
     color: $text-primary;
 
     &.warning {
-      background: color.adjust($warning, $lightness: -10%);
+      color: darken($warning, 10%);
     }
 
     &.chaos {
-      background: color.adjust($info, $lightness: -10%);
+      color: darken($info, 10%);
     }
   }
 
@@ -307,12 +405,18 @@
     }
 
     &.danger {
+      color: $error;
+
       &:hover:not(:disabled) {
         border-color: $error;
         background: rgba($error, 0.05);
       }
     }
 
+    .action-icon {
+      font-size: $font-size-lg;
+    }
+
     .action-text {
       flex: 1;
       font-weight: $font-weight-medium;

src/routes/Authenticated/Servers/Server.tsx

@@ -1,11 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate } from "react-router-dom";
-import { Header } from '../../components/Header/Header';
+import { Header } from "../../../components/Header/Header";
-import { Terminal } from '../../components/Terminal/Terminal';
+import { apiService } from "../../../services/api";
-import { apiService } from '../../services/api';
+import type { AbraServer, ServerAppsResponse } from "../../../types";
-import type { AbraServer, ServerAppsResponse } from '../../types';
+import "./Server.scss";
-import type { LogEntry } from '../../services/mockApi';
-import './Server.scss';
 
 interface ServerWithApps extends AbraServer {
   apps: any[];
@@ -19,29 +17,26 @@ interface ServerWithApps extends AbraServer {
 export const Server: React.FC = () => {
   const { serverName } = useParams<{ serverName: string }>();
   const navigate = useNavigate();
-  
+
   const [server, setServer] = useState<ServerWithApps | null>(null);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
   const [actionLoading, setActionLoading] = useState<string | null>(null);
-  
-  // Terminal state
-  const [terminalLogs, setTerminalLogs] = useState<LogEntry[]>([]);
-  const [terminalActive, setTerminalActive] = useState(false);
 
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
+  const isMockMode = !import.meta.env.VITE_API_URL;
 
   useEffect(() => {
     const fetchServer = async () => {
       try {
         if (isMockMode) {
-          const { mockApiService } = await import('../../services/mockApi');
+          const { mockApiService } = await import("../../../services/mockApi");
           const appsData = await mockApiService.getAppsGrouped();
           const serversData = await mockApiService.getServers();
-          
+
-          const foundServer = serversData.find(s => s.name === serverName);
+          // Find the server
-          const serverApps = appsData[serverName || ''];
+          const foundServer = serversData.find((s) => s.name === serverName);
-          
+          const serverApps = appsData[serverName || ""];
+
           if (foundServer && serverApps) {
             setServer({
               ...foundServer,
@@ -53,15 +48,16 @@ export const Server: React.FC = () => {
               latestCount: serverApps.latestCount,
             });
           } else {
-            setError('Server not found');
+            setError("Server not found");
           }
         } else {
+          // Real API call
           const appsData = await apiService.getAppsGrouped();
           const serversData = await apiService.getServers();
-          
+
-          const foundServer = serversData.find(s => s.name === serverName);
+          const foundServer = serversData.find((s) => s.name === serverName);
-          const serverApps = appsData[serverName || ''];
+          const serverApps = appsData[serverName || ""];
-          
+
           if (foundServer && serverApps) {
             setServer({
               ...foundServer,
@@ -73,11 +69,11 @@ export const Server: React.FC = () => {
               latestCount: serverApps.latestCount,
             });
           } else {
-            setError('Server not found');
+            setError("Server not found");
           }
         }
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load server');
+        setError(err instanceof Error ? err.message : "Failed to load server");
       } finally {
         setLoading(false);
       }
@@ -88,41 +84,13 @@ export const Server: React.FC = () => {
 
   const handleAction = async (action: string) => {
     if (!server) return;
-    
+
     setActionLoading(action);
-    setTerminalActive(true);
-    setTerminalLogs([]);
-    
     try {
-      if (isMockMode) {
+      console.log(`Action: ${action} on server ${server.name}`);
-        const { mockApiService } = await import('../../services/mockApi');
+      // Add actual server actions here
-        
-        const onLog = (log: LogEntry) => {
-          setTerminalLogs(prev => [...prev, log]);
-        };
-        
-        switch (action) {
-          case 'refresh':
-            await mockApiService.refreshServer(server.name, onLog);
-            break;
-          case 'deploy-all':
-            await mockApiService.deployAllApps(server.name, server.appCount, onLog);
-            break;
-          case 'upgrade-all':
-            await mockApiService.upgradeAllApps(server.name, server.upgradeCount, onLog);
-            break;
-        }
-      } else {
-        // Real API calls
-        console.log(`Action: ${action} on server ${server.name}`);
-      }
     } catch (err) {
-      console.error('Action failed:', err);
+      console.error("Action failed:", err);
-      setTerminalLogs(prev => [...prev, {
-        type: 'error',
-        text: `❌ Error: ${err instanceof Error ? err.message : 'Action failed'}`,
-        timestamp: new Date()
-      }]);
     } finally {
       setActionLoading(null);
     }
@@ -144,8 +112,8 @@ export const Server: React.FC = () => {
       <div className="server-detail-page">
         <Header />
         <main className="server-detail-content">
-          <div className="error">{error || 'Server not found'}</div>
+          <div className="error">{error || "Server not found"}</div>
-          <button onClick={() => navigate('/servers')} className="back-button">
+          <button onClick={() => navigate("/servers")} className="back-button">
             Back to Servers
           </button>
         </main>
@@ -153,15 +121,20 @@ export const Server: React.FC = () => {
     );
   }
 
-  const chaosApps = server.apps.filter(app => app.chaos === 'true');
+  const chaosApps = server.apps.filter((app) => app.chaos === "true");
-  const runningApps = server.apps.filter(app => app.status === 'deployed' || app.status === 'running');
+  const runningApps = server.apps.filter(
+    (app) => app.status === "deployed" || app.status === "running",
+  );
 
   return (
     <div className="server-detail-page">
       <Header />
       <main className="server-detail-content">
         <div className="breadcrumb">
-          <button onClick={() => navigate('/servers')} className="breadcrumb-link">
+          <button
+            onClick={() => navigate("/servers")}
+            className="breadcrumb-link"
+          >
             Servers
           </button>
           <span className="breadcrumb-separator">/</span>
@@ -175,43 +148,37 @@ export const Server: React.FC = () => {
               <span className="host-badge">{server.host}</span>
               {server.upgradeCount > 0 && (
                 <span className="upgrade-badge">
-                  {server.upgradeCount} upgrade{server.upgradeCount !== 1 ? 's' : ''}
+                  {server.upgradeCount} upgrade
+                  {server.upgradeCount !== 1 ? "s" : ""}
                 </span>
               )}
             </div>
           </div>
 
           <div className="server-actions">
-            <button 
+            <button
               className="action-btn secondary"
-              onClick={() => handleAction('refresh')}
+              onClick={() => handleAction("refresh")}
-              disabled={!!actionLoading}
+              disabled={actionLoading === "refresh"}
             >
-              {actionLoading === 'refresh' ? 'Refreshing...' : 'Refresh'}
+              {actionLoading === "refresh" ? "Refreshing..." : "Refresh"}
             </button>
-            <button 
+            <button
-              className="action-btn"
+              className="action-btn primary"
-              onClick={() => handleAction('deploy-all')}
+              onClick={() => handleAction("deploy-all")}
-              disabled={!!actionLoading}
+              disabled={actionLoading === "deploy-all"}
             >
-              {actionLoading === 'deploy-all' ? 'Deploying...' : 'Deploy All'}
+              {actionLoading === "deploy-all" ? "Deploying..." : "Deploy All"}
             </button>
           </div>
         </div>
 
-        {/* Terminal Component */}
-        <Terminal 
-          logs={terminalLogs} 
-          isActive={terminalActive}
-          onClose={() => setTerminalActive(false)}
-        />
-
         <div className="content-grid">
           {/* Left Column - Main Info */}
           <div className="main-column">
             <section className="info-card">
               <h2>Server Details</h2>
-              
+
               <div className="info-grid">
                 <div className="info-item">
                   <label>Server Name</label>
@@ -235,14 +202,24 @@ export const Server: React.FC = () => {
 
                 <div className="info-item">
                   <label>Upgrades Available</label>
-                  <span className={server.upgradeCount > 0 ? 'stat-value warning' : 'stat-value'}>
+                  <span
+                    className={
+                      server.upgradeCount > 0
+                        ? "stat-value warning"
+                        : "stat-value"
+                    }
+                  >
                     {server.upgradeCount}
                   </span>
                 </div>
 
                 <div className="info-item">
                   <label>Chaos Mode Apps</label>
-                  <span className={chaosApps.length > 0 ? 'stat-value chaos' : 'stat-value'}>
+                  <span
+                    className={
+                      chaosApps.length > 0 ? "stat-value chaos" : "stat-value"
+                    }
+                  >
                     {chaosApps.length}
                   </span>
                 </div>
@@ -261,16 +238,20 @@ export const Server: React.FC = () => {
 
             <section className="info-card">
               <h2>Applications on this Server</h2>
-              
+
               {server.apps.length === 0 ? (
-                <div className="no-apps">No applications deployed on this server</div>
+                <div className="no-apps">
+                  No applications deployed on this server
+                </div>
               ) : (
                 <div className="apps-list">
                   {server.apps.map((app, idx) => (
-                    <div 
+                    <div
                       key={`${app.appName}-${idx}`}
                       className="app-item"
-                      onClick={() => navigate(`/apps/${server.name}/${app.appName}`)}
+                      onClick={() =>
+                        navigate(`/apps/${server.name}/${app.appName}`)
+                      }
                     >
                       <div className="app-item-header">
                         <span className="app-item-name">{app.appName}</span>
@@ -279,18 +260,24 @@ export const Server: React.FC = () => {
                           <span className={`status-badge status-${app.status}`}>
                             {app.status}
                           </span>
-                          {app.chaos === 'true' && (
+                          {app.chaos === "true" && (
-                            <span className="chaos-badge">☠️</span>
+                            <span
+                              className="chaos-badge"
+                              title="Chaos mode"
+                            ></span>
                           )}
-                          {app.upgrade !== 'latest' && (
+                          {app.upgrade !== "latest" && (
-                            <span className="upgrade-badge">⬆️</span>
+                            <span
+                              className="upgrade-badge"
+                              title="Upgrade available"
+                            ></span>
                           )}
                         </div>
                       </div>
                       <div className="app-item-details">
                         <span className="app-item-version">v{app.version}</span>
                         {app.domain && (
-                          <a 
+                          <a
                             href={`https://${app.domain}`}
                             target="_blank"
                             rel="noopener noreferrer"
@@ -312,31 +299,49 @@ export const Server: React.FC = () => {
           <div className="sidebar-column">
             <section className="info-card">
               <h2>Quick Actions</h2>
-              
+
               <div className="action-list">
-                <button 
+                <button
                   className="action-list-item"
-                  onClick={() => handleAction('refresh')}
+                  onClick={() => handleAction("refresh")}
-                  disabled={!!actionLoading}
+                  disabled={actionLoading === "refresh"}
                 >
                   <span className="action-text">Refresh Server Info</span>
                 </button>
 
-                <button 
+                <button
                   className="action-list-item"
-                  onClick={() => handleAction('deploy-all')}
+                  onClick={() => handleAction("deploy-all")}
-                  disabled={!!actionLoading}
+                  disabled={actionLoading === "deploy-all"}
                 >
                   <span className="action-text">Deploy All Apps</span>
                 </button>
 
-                <button 
+                <button
                   className="action-list-item"
-                  onClick={() => handleAction('upgrade-all')}
+                  onClick={() => handleAction("upgrade-all")}
-                  disabled={!!actionLoading || server.upgradeCount === 0}
+                  disabled={
+                    actionLoading === "upgrade-all" || server.upgradeCount === 0
+                  }
                 >
                   <span className="action-text">Upgrade All Apps</span>
                 </button>
+
+                <button className="action-list-item">
+                  <span className="action-text">View Metrics</span>
+                </button>
+
+                <button className="action-list-item">
+                  <span className="action-text">View Logs</span>
+                </button>
+
+                <button className="action-list-item">
+                  <span className="action-text">Server Settings</span>
+                </button>
+
+                <button className="action-list-item danger">
+                  <span className="action-text">Remove Server</span>
+                </button>
               </div>
             </section>
 
@@ -345,7 +350,7 @@ export const Server: React.FC = () => {
               <div className="health-status">
                 <div className="health-item">
                   <span className="health-label">Status</span>
-                  <span className="health-value status-online">🟢 Online</span>
+                  <span className="health-value status-online">Online</span>
                 </div>
                 <div className="health-item">
                   <span className="health-label">CPU Usage</span>

src/routes/Authenticated/Servers/Servers.scss

@@ -1,6 +1,6 @@
-@use '../../assets/scss/variables' as *;
+@use "../../../assets/scss/variables" as *;
-@use '../../assets/scss/mixins' as *;
+@use "../../../assets/scss/mixins" as *;
-@use '../../assets/scss/global' as *;
+@use "../../../assets/scss/global" as *;
 
 // Extend global page wrapper
 .servers-page {
@@ -28,7 +28,9 @@
   @include card;
   display: flex;
   flex-direction: column;
-  transition: transform $transition-base, box-shadow $transition-base;
+  transition:
+    transform $transition-base,
+    box-shadow $transition-base;
   position: relative;
   overflow: hidden;
 
@@ -63,7 +65,7 @@
     .server-status {
       .status-indicator {
         font-size: $font-size-xl;
-        
+
         &.connected {
           color: $success;
         }
@@ -169,9 +171,9 @@
       }
 
       &.primary {
-        // background-color: $primary;
+        background-color: $primary;
-        // color: white;
+        color: white;
-        // border-color: $primary;
+        border-color: $primary;
 
         &:hover {
           background-color: $primary-light;

src/routes/Authenticated/Servers/Servers.tsx

@@ -0,0 +1,310 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Header } from "../../../components/Header/Header";
+import { apiService } from "../../../services/api";
+import type { AbraServer, ServerAppsResponse } from "../../../types";
+import "./Servers.scss";
+
+interface ServerWithStats extends AbraServer {
+  appCount: number;
+  versionCount: number;
+  latestCount: number;
+  upgradeCount: number;
+  chaosCount: number;
+}
+
+export const Servers: React.FC = () => {
+  const navigate = useNavigate();
+  const [servers, setServers] = useState<ServerWithStats[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [searchTerm, setSearchTerm] = useState("");
+  const [sortBy, setSortBy] = useState<"name" | "apps" | "upgrades">("name");
+
+  const isMockMode = !import.meta.env.VITE_API_URL;
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        if (isMockMode) {
+          const { mockApiService } = await import("../../../services/mockApi");
+          const [serversData, appsData] = await Promise.all([
+            mockApiService.getServers(),
+            mockApiService.getAppsGrouped(),
+          ]);
+
+          // Enrich servers with stats from apps data
+          const enrichedServers = serversData.map((server) => {
+            const serverStats = appsData[server.name];
+            const chaosCount =
+              serverStats?.apps.filter((app) => app.chaos === "true").length ||
+              0;
+
+            return {
+              ...server,
+              appCount: serverStats?.appCount || 0,
+              versionCount: serverStats?.versionCount || 0,
+              latestCount: serverStats?.latestCount || 0,
+              upgradeCount: serverStats?.upgradeCount || 0,
+              chaosCount,
+            };
+          });
+
+          setServers(enrichedServers);
+        } else {
+          const [serversData, appsData] = await Promise.all([
+            apiService.getServers(),
+            apiService.getAppsGrouped(),
+          ]);
+
+          // Enrich servers with stats from apps data
+          const enrichedServers = serversData.map((server) => {
+            const serverStats = appsData[server.name];
+            const chaosCount =
+              serverStats?.apps.filter((app) => app.chaos === "true").length ||
+              0;
+
+            return {
+              ...server,
+              appCount: serverStats?.appCount || 0,
+              versionCount: serverStats?.versionCount || 0,
+              latestCount: serverStats?.latestCount || 0,
+              upgradeCount: serverStats?.upgradeCount || 0,
+              chaosCount,
+            };
+          });
+
+          setServers(enrichedServers);
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to load servers");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [isMockMode]);
+
+  // Calculate overall stats
+  const stats = useMemo(() => {
+    const totalServers = servers.length;
+    const totalApps = servers.reduce((sum, s) => sum + s.appCount, 0);
+    const totalUpgrades = servers.reduce((sum, s) => sum + s.upgradeCount, 0);
+    const totalChaos = servers.reduce((sum, s) => sum + s.chaosCount, 0);
+
+    return { totalServers, totalApps, totalUpgrades, totalChaos };
+  }, [servers]);
+
+  // Filter and sort servers
+  const filteredServers = useMemo(() => {
+    const filtered = servers.filter(
+      (server) =>
+        server.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        server.host.toLowerCase().includes(searchTerm.toLowerCase()),
+    );
+
+    // Sort
+    filtered.sort((a, b) => {
+      switch (sortBy) {
+        case "apps":
+          return b.appCount - a.appCount;
+        case "upgrades":
+          return b.upgradeCount - a.upgradeCount;
+        case "name":
+        default:
+          return a.name.localeCompare(b.name);
+      }
+    });
+
+    return filtered;
+  }, [servers, searchTerm, sortBy]);
+
+  if (loading) {
+    return (
+      <div className="servers-page">
+        <Header />
+        <main className="servers-content">
+          <div className="loading">Loading servers...</div>
+        </main>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="servers-page">
+        <Header />
+        <main className="servers-content">
+          <div className="error">Error: {error}</div>
+        </main>
+      </div>
+    );
+  }
+
+  return (
+    <div className="servers-page">
+      <Header />
+      <main className="servers-content">
+        <div className="page-header">
+          <h1>Servers</h1>
+          <p className="subtitle">
+            Managing {stats.totalServers} servers with {stats.totalApps}{" "}
+            applications
+          </p>
+        </div>
+
+        {/* Stats Overview */}
+        <div className="stats-grid">
+          <div className="stat-card">
+            <div className="stat-icon"></div>
+            <div className="stat-info">
+              <p className="stat-number">{stats.totalServers}</p>
+              <p className="stat-label">Total Servers</p>
+            </div>
+          </div>
+          <div className="stat-card">
+            <div className="stat-icon"></div>
+            <div className="stat-info">
+              <p className="stat-number">{stats.totalApps}</p>
+              <p className="stat-label">Total Apps</p>
+            </div>
+          </div>
+          <div className="stat-card upgrade">
+            <div className="stat-icon"></div>
+            <div className="stat-info">
+              <p className="stat-number">{stats.totalUpgrades}</p>
+              <p className="stat-label">Apps Need Upgrade</p>
+            </div>
+          </div>
+          <div className="stat-card chaos">
+            <div className="stat-icon"></div>
+            <div className="stat-info">
+              <p className="stat-number">{stats.totalChaos}</p>
+              <p className="stat-label">Chaos Apps</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Filters */}
+        <div className="filters">
+          <input
+            type="text"
+            placeholder="Search servers by name or host..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="search-input"
+          />
+
+          <select
+            value={sortBy}
+            onChange={(e) => setSortBy(e.target.value as any)}
+          >
+            <option value="name">Sort by Name</option>
+            <option value="apps">Sort by App Count</option>
+            <option value="upgrades">Sort by Upgrades</option>
+          </select>
+        </div>
+
+        {/* Server Cards */}
+        <div className="servers-grid">
+          {filteredServers.length === 0 ? (
+            <div className="no-results">
+              No servers found matching your search
+            </div>
+          ) : (
+            filteredServers.map((server) => (
+              <div
+                key={server.name}
+                className="server-card"
+                onClick={() => navigate(`/servers/${server.name}`)}
+                style={{ cursor: "pointer" }}
+              >
+                <div className="server-header">
+                  <div className="server-title">
+                    <h3>{server.name}</h3>
+                    <span className="server-host">{server.host}</span>
+                  </div>
+                  <div className="server-status">
+                    <span
+                      className="status-indicator connected"
+                      title="Connected"
+                    >
+                      ●
+                    </span>
+                  </div>
+                </div>
+
+                <div className="server-stats">
+                  <div className="stat-row">
+                    <span className="stat-label">Applications</span>
+                    <span className="stat-value">{server.appCount}</span>
+                  </div>
+                  <div className="stat-row">
+                    <span className="stat-label">Versioned</span>
+                    <span className="stat-value">{server.versionCount}</span>
+                  </div>
+                  <div className="stat-row">
+                    <span className="stat-label">Latest</span>
+                    <span className="stat-value">{server.latestCount}</span>
+                  </div>
+                  {server.upgradeCount > 0 && (
+                    <div className="stat-row highlight">
+                      <span className="stat-label">
+                        <span className="upgrade-icon">⬆️</span> Need Upgrade
+                      </span>
+                      <span className="stat-value">{server.upgradeCount}</span>
+                    </div>
+                  )}
+                  {server.chaosCount > 0 && (
+                    <div className="stat-row chaos-row">
+                      <span className="stat-label">
+                        <span className="chaos-icon">☠️</span> Chaos Mode
+                      </span>
+                      <span className="stat-value">{server.chaosCount}</span>
+                    </div>
+                  )}
+                </div>
+
+                <div className="server-actions">
+                  <button
+                    className="action-btn primary"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      navigate(`/servers/${server.name}`);
+                    }}
+                  >
+                    View Apps
+                  </button>
+                  <button
+                    className="action-btn"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      navigate(`/servers/${server.name}`);
+                    }}
+                  >
+                    Manage
+                  </button>
+                </div>
+
+                {server.upgradeCount > 0 && (
+                  <div className="server-alert">
+                    <span className="alert-icon">⚠️</span>
+                    <span className="alert-text">
+                      {server.upgradeCount} app
+                      {server.upgradeCount > 1 ? "s" : ""} can be upgraded
+                    </span>
+                  </div>
+                )}
+              </div>
+            ))
+          )}
+        </div>
+
+        <div className="results-count">
+          Showing {filteredServers.length} of {servers.length} servers
+        </div>
+      </main>
+    </div>
+  );
+};

src/routes/Login/LoginForm.scss

@@ -0,0 +1,94 @@
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
+
+.login-container {
+  @include flex-center;
+  min-height: 100vh;
+  width: 100%;
+  // @include gradient-primary;
+  background-color: $primary-light;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.login-card {
+  @include card;
+  width: 100%;
+  max-width: 400px;
+
+  h1 {
+    margin: 0 0 $spacing-sm;
+    font-size: $font-size-3xl;
+    color: $text-primary;
+    text-align: center;
+  }
+
+  .login-subtitle {
+    text-align: center;
+    color: $text-secondary;
+    margin: 0 0 $spacing-2xl;
+    font-size: $font-size-sm;
+  }
+}
+
+.form-group {
+  margin-bottom: $spacing-lg;
+
+  label {
+    display: block;
+    margin-bottom: $spacing-sm;
+    color: $text-primary;
+    font-weight: $font-weight-medium;
+    font-size: $font-size-sm;
+  }
+
+  input {
+    width: 100%;
+    padding: $spacing-md;
+    border: 2px solid $border-color;
+    border-radius: $radius-md;
+    font-size: $font-size-base;
+    transition: border-color $transition-base;
+    box-sizing: border-box;
+
+    &:focus {
+      outline: none;
+      border-color: $primary;
+    }
+
+    &:disabled {
+      background-color: $bg-secondary;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.error-message {
+  // background-color: rgba($error, 0.1);
+  // color: darken($error, 10%);
+  padding: $spacing-md;
+  border-radius: $radius-md;
+  margin-bottom: $spacing-md;
+  font-size: $font-size-sm;
+  // border-left: 4px solid $error;
+}
+
+.login-button {
+  @include button-base;
+  @include gradient-primary;
+  width: 100%;
+  color: white;
+  font-size: $font-size-base;
+
+  &:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 16px rgba($primary, 0.4);
+  }
+
+  &:active:not(:disabled) {
+    transform: translateY(0);
+  }
+}

src/routes/Login/LoginForm.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "../../hooks/useAuth";
+import "./LoginForm.scss";
+
+export const LoginForm: React.FC = () => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const { login } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      await login({ username, password });
+      navigate("/dashboard");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="login-container">
+      <div className="login-card">
+        <h1>Coop Cloud</h1>
+        <p className="login-subtitle">Sign in to manage your applications</p>
+
+        <form onSubmit={handleSubmit}>
+          {error && <div className="error-message">{error}</div>}
+
+          <div className="form-group">
+            <label htmlFor="username">Username</label>
+            <input
+              id="username"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              required
+              autoComplete="username"
+              disabled={loading}
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="password">Password</label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              autoComplete="current-password"
+              disabled={loading}
+            />
+          </div>
+
+          <button type="submit" disabled={loading} className="login-button">
+            {loading ? "Signing in..." : "Sign in"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};

src/routes/Recipes/RecipeForm.tsx

@@ -1,112 +0,0 @@
-import { useState, useEffect } from "react";
-import { apiService } from '../../services/api';
-import type { AbraServer } from '../../types';
-
-
-
-function RecipeForm({ recipe, onClose }) {
-  const [loading, setLoading] = useState(true);
-  const [servers, setServers] = useState<AbraServer[]>([]);
-  const [selectedServer, setSelectedServer] = useState(""); // ❌ only one value
-  const [chaos, setChaos] = useState(false);
-  const [secrets, setSecrets] = useState(false);
-  const [error, setError] = useState('');
-  
-  useEffect(() => {
-      const fetchData = async () => {
-        try {
-          const [serversData] = await Promise.all([
-            apiService.getServers(),
-          ]);
-            
-          setServers(serversData);
-          
-        } catch (err) {
-          setError(err instanceof Error ? err.message : 'Failed to load servers');
-        } finally {
-          setLoading(false);
-        }
-      };
-  
-      fetchData();
-    });
-  const [formData, setFormData] = useState({
-    domain: "",
-    chaos: false,
-    secrets: true,
-  });
-
-  const handleChange = (e) => {
-    setFormData({
-      ...formData,
-      [e.target.name]: e.target.value,
-    });
-  };
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    console.log("Submitting:", formData);
-    onClose();
-  };
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <h2>{recipe.name}</h2>
-      { loading ? (<p> Loading servers...</p> 
-      ) : (
-      <div>
-        <label>
-            Choose a server to deploy to: 
-            <select
-              value={selectedServer}
-              onChange={(e) => setSelectedServer(e.target.value)}
-            >
-              <option value="">None</option>
-              {servers.map((server) => (
-                <option key={server.name} value={server.name}>
-                  {server.name}
-                </option>
-              ))}
-            </select>
-        </label>
-      </div>
-      )}
-      <div> 
-        <label>
-          Domain:
-          <input
-            name="Domain"
-            value={formData.name}
-            onChange={handleChange}
-          />
-        </label>
-      </div>
-      <div> 
-        <label>
-          Chaos Mode Enabled: 
-          <input
-            type="checkbox"
-            name="chaos"
-            onChange={handleChange}
-          />
-        </label>
-      </div>
-
-      <div> 
-        <label>
-          Autogenerate Secrets: 
-          <input
-            type="checkbox"
-            name="secrets"
-            onChange={handleChange}
-          />
-        </label>
-      </div>
-
-      <button type="submit">Submit</button>
-      <button type="button" onClick={onClose}>Cancel</button>
-    </form>
-  );
-}
-
-export default RecipeForm;

src/routes/Recipes/Recipes.scss

@@ -1,177 +0,0 @@
-@use '../../assets/scss/variables' as *;
-@use '../../assets/scss/mixins' as *;
-@use '../../assets/scss/global' as *;
-
-// Extend global page wrapper
-.recipes-page {
-  @extend .page-wrapper;
-}
-
-.recipes-content {
-  @extend .page-content;
-}
-
-// Servers grid
-.recipes-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: $spacing-xl;
-  margin-bottom: $spacing-xl;
-
-  @media (max-width: 768px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-// Server card
-.recipe-card {
-  @include card;
-  display: grid;
-  grid-template-rows: 1fr 2fr auto 0.9fr;
-  transition: transform $transition-base, box-shadow $transition-base;
-  position: relative;
-  overflow: hidden;
-
-  &:hover {
-    transform: translateY(-4px);
-    box-shadow: $shadow-xl;
-  }
-
-  .recipe-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: $spacing-lg;
-    padding-bottom: $spacing-md;
-    border-bottom: 2px solid $bg-secondary;
-
-    .recipe-title {
-      h3 {
-        margin: 0 0 $spacing-xs;
-        font-size: $font-size-xl;
-        color: $text-primary;
-        font-weight: $font-weight-bold;
-      }
-
-      .recipe-host {
-        font-size: $font-size-sm;
-        color: $text-muted;
-        font-family: monospace;
-      }
-    }
-    img {
-      width: clamp(20px, 3vw, 32px);
-      height: clamp(20px, 3vw, 32px);
-      object-fit: contain;
-    }
-  }
-  .card-tags {
-    display: flex;
-    gap: 6px;
-    margin-top: $spacing-sm;
-    height: $spacing-md;
-    flex-wrap: wrap;
-  }
-  .tag-category {
-    font-size: 12px;
-    padding: 2px 8px;
-    border-radius: 5px;
-    color: rgb(255, 255, 255);
-    font-weight: 700;
-    background-color: rgb(111, 128, 255);
-
-  }
-  .tag-feature {
-    font-size: 12px;
-    padding: 2px 8px;
-    border-radius: 5px;
-    color: rgb(255, 255, 255);
-    font-weight: 700;
-    background-color: rgb(22, 180, 22);
-
-  }
-  .recipe-stats {
-    flex-grow: 1;
-    flex: 1;
-    margin-bottom: $spacing-lg;
-
-    .stat-row {
-      display: -webkit-box;
-      -webkit-line-clamp: 4;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-    }
-  }
-
-  .recipe-actions {
-    display: flex;
-    gap: $spacing-sm;
-    .action-btn {
-      flex: 1;
-      padding: $spacing-sm $spacing-md;
-      border: 2px solid $border-color;
-      background: none;
-      color: $text-primary;
-      border-radius: $radius-md;
-      font-size: $font-size-sm;
-      font-weight: $font-weight-medium;
-      cursor: pointer;
-      transition: all $transition-base;
-
-      &:hover {
-        background-color: rgba($primary, 0.1);
-        border-color: $primary;
-        transform: translateY(-1px);
-      }
-
-      &.primary {
-        background-color: $primary;
-        color: white;
-        border-color: $primary;
-
-        &:hover {
-          background-color: $primary-light;
-          border-color: $primary-light;
-        }
-      }
-    }
-  }
-
-  .recipe-alert {
-    background-color: rgba($warning, 0.1);
-    border-left: 4px solid $warning;
-    padding: $spacing-sm $spacing-md;
-    margin: 0 (-$spacing-xl) (-$spacing-xl);
-    display: flex;
-    align-items: center;
-    gap: $spacing-sm;
-
-    .alert-icon {
-      font-size: $font-size-lg;
-      color: $warning;
-    }
-
-    .alert-text {
-      font-size: $font-size-sm;
-      color: $text-primary;
-      font-weight: $font-weight-medium;
-    }
-  }
-}
-.modal-overlay {
-position: fixed;
-inset: 0;
-background: rgba(0, 0, 0, 0.4);
-display: flex;
-justify-content: center;
-align-items: center;
-}
-
-.modal {
-  background: white;
-  padding: 24px;
-  border-radius: 8px;
-  width: min(90%, 500px);
-}

src/routes/Recipes/Recipes.tsx

@@ -1,192 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Header } from '../../components/Header/Header';
-import { apiService } from '../../services/api';
-import type { AbraApp, AppWithServer, AbraRecipe } from '../../types';
-import RecipeForm from './RecipeForm.tsx'
-import './Recipes.scss';
-
-export const Recipes: React.FC = () => {
-  const navigate = useNavigate();
-  const [recipesData, setRecipesData] = useState<AbraRecipe[] | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
-  const [searchTerm, setSearchTerm] = useState('');
-  const [filterServer, setFilterServer] = useState<string>('all');
-  const [filterStatus, setFilterStatus] = useState<string>('all');
-  const [selectedRecipe, setSelectedRecipe] = useState(null);
-  const [showForm, setShowForm] = useState(false);
-
-
-
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        if (isMockMode) {
-          const { mockApiService } = await import('../../services/mockApi');
-          const data = await mockApiService.getRecipes();
-          console.log(data)
-          setRecipesData(data);
-        } else {
-          const data = await apiService.getRecipes();
-          setRecipesData(data);
-        }
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load apps');
-      } finally {
-        setLoading(false);
-      }
-    }; 
-    
-    fetchData();
-  }, [isMockMode]);
-
-  // Flatten and enrich apps data
-  const allRecipes: AbraRecipe[] = useMemo(() => {
-    if (!recipesData) return [];
-    
-    return recipesData;
-  }, [recipesData]);
-
-
-  // Filter apps
-  const filteredRecipes = useMemo(() => {
-    return allRecipes.filter(recipe => {
-      const matchesSearch = 
-        recipe.name.toLowerCase().includes(searchTerm.toLowerCase());
-
-      return matchesSearch;
-    });
-  }, [allRecipes, searchTerm, filterServer, filterStatus]);
-
-  const stats = useMemo(() => {
-    const total = allRecipes.length;
-
-    return { total };
-  }, [allRecipes]);
-
-  if (loading) {
-    return (
-      <div className="apps-page">
-        <Header />
-        <main className="recipes-content">
-          <div className="loading">Loading applications...</div>
-        </main>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="recipes-page">
-        <Header />
-        <main className="recipes-content">
-          <div className="error">Error: {error}</div>
-        </main>
-      </div>
-    );
-  }
-
-  return (
-    <div className="recipes-page">
-      <Header />
-      <main className="recipes-content">
-        <div className="page-header">
-          <h1>Applications</h1>
-          <p className="subtitle">{stats.total} recipes</p>
-        </div>
-
-        {/* Stats Overview */}
-        <div className="stats-grid">
-          <div className="stat-card">
-            <div className="stat-info">
-              <p className="stat-number">{stats.total}</p>
-              <p className="stat-label">Total Recipes</p>
-            </div>
-          </div>
-        </div>
-
-        {/* Filters */}
-        <div className="filters">
-          <input
-            type="text"
-            placeholder="Search apps by name, recipe, or domain..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="search-input"
-          />
-
-          <select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)}>
-            <option value="all">All Status</option>
-            <option value="stable">Stable</option>
-            <option value="chaos">Chaos Mode</option>
-          </select>
-
-        </div>
-
-        {/* Server Cards */}
-        <div className="recipes-grid">
-          {filteredRecipes.length === 0 ? (
-            <div className="no-results">No recipes found matching your search</div>
-          ) : (
-            filteredRecipes.map((recipe) => (
-              <div 
-                key={recipe.name} 
-                className="recipe-card"
-                style={{ cursor: 'pointer' }}
-              >
-                <div className="recipe-header">
-                  <div className="recipe-title">
-                    <h3>{recipe.name}</h3>
-                  </div>
-                  <div>
-                    {recipe.icon.length > 0 ? <img src={`${recipe.icon}`} /> : null }
-                  </div>
-                </div>
-
-                <div className="recipe-stats">
-                  <div className="stat-row">
-                    <span className="stat-value">{recipe.description}</span>
-                  </div>
-                </div>
-
-                <div className="recipe-actions">
-                  <button 
-                    className="action-btn"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      console.log('clicked');
-                      setSelectedRecipe(recipe);
-                      console.log('selectedRecipe:', selectedRecipe);
-                    }}
-                  >
-                    Add Recipe
-                  </button>
-                </div>
-                <div className="card-tags">
-                  {recipe.features.backups.toLowerCase().includes("yes") ? <span className="tag-feature"> Backups </span> : null}
-                  {recipe.features.healthcheck.toLowerCase().includes("yes") ? <span className="tag-feature"> Healthcheck </span> : null}
-                  {recipe.category.length > 0 ? <span className="tag-category"> {recipe.category} </span> : null}
-                </div>
-              </div>
-            ))
-          )}
-        </div>
-        {selectedRecipe && (
-          <div className="modal-overlay" onClick={() => setSelectedRecipe(null)}>
-            <div className="modal" onClick={(e) => e.stopPropagation()}>
-              {}
-              <RecipeForm recipe={selectedRecipe} onClose={() => setSelectedRecipe(null)} />
-            </div>
-          </div>
-        )}
-
-        <div className="results-count">
-          Showing {filteredRecipes.length} of {allRecipes.length} apps
-        </div>
-      </main>
-    </div>
-  );
-};

src/routes/Servers/Servers.tsx

@@ -1,273 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Header } from '../../components/Header/Header';
-import { apiService } from '../../services/api';
-import type { AbraServer, ServerAppsResponse } from '../../types';
-import './Servers.scss';
-
-interface ServerWithStats extends AbraServer {
-  appCount: number;
-  versionCount: number;
-  latestCount: number;
-  upgradeCount: number;
-  chaosCount: number;
-}
-
-export const Servers: React.FC = () => {
-  const navigate = useNavigate();
-  const [servers, setServers] = useState<ServerWithStats[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
-  const [searchTerm, setSearchTerm] = useState('');
-  const [sortBy, setSortBy] = useState<'name' | 'apps' | 'upgrades'>('name');
-  const [showUpgradesOnly, setShowUpgradesOnly] = useState(false);
-
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        let serversData, appsData;
-        
-        if (isMockMode) {
-          const { mockApiService } = await import('../../services/mockApi');
-          [serversData, appsData] = await Promise.all([
-            mockApiService.getServers(),
-            mockApiService.getAppsGrouped(),
-          ]);
-        } else {
-          [serversData, appsData] = await Promise.all([
-            apiService.getServers(),
-            apiService.getAppsGrouped(),
-          ]);
-        }
-        
-        // Enrich servers with stats from apps data
-        const enrichedServers = serversData.map(server => {
-          const serverStats = appsData[server.name];
-          const chaosCount = serverStats?.apps.filter(app => app.chaos === 'true').length || 0;
-          
-          return {
-            ...server,
-            appCount: serverStats?.appCount || 0,
-            versionCount: serverStats?.versionCount || 0,
-            latestCount: serverStats?.latestCount || 0,
-            upgradeCount: serverStats?.upgradeCount || 0,
-            chaosCount,
-          };
-        });
-        
-        setServers(enrichedServers);
-      } catch (err) {
-        console.error('Error loading servers:', err);
-        setError(err instanceof Error ? err.message : 'Failed to load servers');
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchData();
-  }, [isMockMode]);
-
-  // Calculate overall stats
-  const stats = useMemo(() => {
-    const totalServers = servers.length;
-    const totalApps = servers.reduce((sum, s) => sum + s.appCount, 0);
-    const totalUpgrades = servers.reduce((sum, s) => sum + s.upgradeCount, 0);
-    const totalChaos = servers.reduce((sum, s) => sum + s.chaosCount, 0);
-
-    return { totalServers, totalApps, totalUpgrades, totalChaos };
-  }, [servers]);
-
-  // Filter and sort servers
-  const filteredServers = useMemo(() => {
-  const filtered = servers.filter(server => {
-    const matchesSearch =
-      server.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      server.host.toLowerCase().includes(searchTerm.toLowerCase());
-    const matchesUpgrades = !showUpgradesOnly || server.upgradeCount > 0;
-    return matchesSearch && matchesUpgrades;
-  });
-
-  filtered.sort((a, b) => {
-    switch (sortBy) {
-      case 'apps':
-        return b.appCount - a.appCount;
-      case 'name':
-      default:
-        return a.name.localeCompare(b.name);
-    }
-  });
-
-  return filtered;
-}, [servers, searchTerm, sortBy, showUpgradesOnly]);
-
-const resetFilters = () => {
-  setSearchTerm('');
-  setSortBy('name');
-  setShowUpgradesOnly(false);
-};
-
-  if (loading) {
-    return (
-      <div className="servers-page">
-        <Header />
-        <main className="servers-content">
-          <div className="loading">Loading servers...</div>
-        </main>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="servers-page">
-        <Header />
-        <main className="servers-content">
-          <div className="error">Error: {error}</div>
-        </main>
-      </div>
-    );
-  }
-
-  return (
-    <div className="servers-page">
-      <Header />
-      <main className="servers-content">
-        <div className="page-header">
-          <h1>Servers</h1>
-          <p className="subtitle">Managing {stats.totalServers} servers with {stats.totalApps} applications</p>
-        </div>
-
-        {/* Compact Stats Row */}
-        <div className="stats-row">
-          <button
-            className="stat-chip"
-            onClick={resetFilters}
-            title="Click to reset filters"
-          >
-            <span className="stat-label">Servers</span>
-            <span className="stat-value">{stats.totalServers}</span>
-          </button>
-
-          <button
-            className="stat-chip"
-            onClick={() => navigate('/apps')}
-            title="View all apps"
-          >
-            <span className="stat-label">Apps</span>
-            <span className="stat-value">{stats.totalApps}</span>
-          </button>
-
-          <button
-            className={`stat-chip ${showUpgradesOnly ? 'active' : ''}`}
-            onClick={() => setShowUpgradesOnly(prev => !prev)}
-            title="Click to filter by servers with upgrades"
-            disabled={stats.totalUpgrades === 0}
-          >
-            <span className="stat-label">Upgrades</span>
-            <span className="stat-value">{stats.totalUpgrades}</span>
-          </button>
-
-          <button
-            className={`stat-chip ${sortBy === 'apps' ? 'active' : ''}`}
-            onClick={() => setSortBy(sortBy === 'apps' ? 'name' : 'apps')}
-            title="Click to sort by app count"
-          >
-            <span className="stat-label">Chaos</span>
-            <span className="stat-value">{stats.totalChaos}</span>
-          </button>
-
-          {(searchTerm || sortBy !== 'name' || showUpgradesOnly) && (
-            <button
-              className="reset-filters-btn"
-              onClick={resetFilters}
-            >
-              Clear filters
-            </button>
-          )}
-        </div>
-
-        {/* Filters */}
-        <div className="filters">
-          <input
-            type="text"
-            placeholder="Search servers by name or host..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="search-input"
-          />
-        </div>
-
-        {/* Server Cards */}
-        <div className="servers-grid">
-          {filteredServers.length === 0 ? (
-            <div className="no-results">No servers found matching your search</div>
-          ) : (
-            filteredServers.map((server) => (
-              <div 
-                key={server.name} 
-                className="server-card"
-                onClick={() => navigate(`/servers/${server.name}`)}
-                style={{ cursor: 'pointer' }}
-              >
-                <div className="server-header">
-                  <div className="server-title">
-                    <h3>{server.name}</h3>
-                    <span className="server-host">{server.host}</span>
-                  </div>
-                  <div className="server-status">
-                    <span className="status-indicator connected" title="Connected">●</span>
-                  </div>
-                </div>
-
-                <div className="server-stats">
-                  <div className="stat-row">
-                    <span className="stat-label">Applications</span>
-                    <span className="stat-value">{server.appCount}</span>
-                  </div>
-                  <div className="stat-row">
-                    <span className="stat-label">Versioned</span>
-                    <span className="stat-value">{server.versionCount}</span>
-                  </div>
-                  <div className="stat-row">
-                    <span className="stat-label">Latest</span>
-                    <span className="stat-value">{server.latestCount}</span>
-                  </div>
-                  {server.upgradeCount > 0 && (
-                    <div className="stat-row highlight">
-                      <span className="stat-label">
-                        Need Upgrade
-                      </span>
-                      <span className="stat-value">{server.upgradeCount}</span>
-                    </div>
-                  )}
-                  {server.chaosCount > 0 && (
-                    <div className="stat-row chaos-row">
-                      <span className="stat-label">
-                        Chaos Mode
-                      </span>
-                      <span className="stat-value">{server.chaosCount}</span>
-                    </div>
-                  )}
-                </div>
-
-                {server.upgradeCount > 0 && (
-                  <div className="server-alert">
-                    <span className="alert-text">
-                      {server.upgradeCount} app{server.upgradeCount > 1 ? 's' : ''} can be upgraded
-                    </span>
-                  </div>
-                )}
-              </div>
-            ))
-          )}
-        </div>
-
-        <div className="results-count">
-          Showing {filteredServers.length} of {servers.length} servers
-        </div>
-      </main>
-    </div>
-  );
-};

src/services/api.ts

@@ -1,140 +1,97 @@
-import type { AbraServer, AbraRecipe, ServerAppsResponse } from '../types';
+import type {
+  AbraApp,
+  AbraServer,
+  AuthResponse,
+  LoginCredentials,
+  User,
+} from "../types";
 
-// Log entry type
+const API_BASE_URL =
-export type LogEntry = {
+  import.meta.env.VITE_API_URL || "http://localhost:3000/api";
-  type: 'info' | 'success' | 'error' | 'warning' | 'command' | 'output';
-  text: string;
-  timestamp: Date;
-};
-
-const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000/api';
-
-// Helper to process log JSON from API response
-const processLogResponse = (logData: any[]): LogEntry[] => {
-  return logData.map(log => ({
-    type: log.type,
-    text: log.text,
-    timestamp: new Date(log.timestamp || Date.now()),
-  }));
-};
 
 class ApiService {
+  private token: string | null = null;
+
+  constructor() {
+    // Load token from localStorage on initialization
+    this.token = localStorage.getItem("auth_token");
+  }
+
   private async request<T>(
     endpoint: string,
-    options: RequestInit = {}
+    options: RequestInit = {},
   ): Promise<T> {
     const headers: HeadersInit = {
-      'Content-Type': 'application/json',
+      "Content-Type": "application/json",
       ...options.headers,
     };
 
+    if (this.token) {
+      headers["Authorization"] = `Bearer ${this.token}`;
+    }
+
     const response = await fetch(`${API_BASE_URL}${endpoint}`, {
       ...options,
       headers,
     });
 
     if (!response.ok) {
-      const error = await response.json().catch(() => ({ message: 'An error occurred' }));
+      const error = await response
+        .json()
+        .catch(() => ({ message: "An error occurred" }));
       throw new Error(error.message || `HTTP ${response.status}`);
     }
 
     return response.json();
   }
 
-  // Get all apps grouped by server
+  // Auth methods
+  async login(credentials: LoginCredentials): Promise<AuthResponse> {
+    const response = await this.request<AuthResponse>("/auth/login", {
+      method: "POST",
+      body: JSON.stringify(credentials),
+    });
+
+    this.token = response.token;
+    localStorage.setItem("auth_token", response.token);
+    return response;
+  }
+
+  async logout(): Promise<void> {
+    this.token = null;
+    localStorage.removeItem("auth_token");
+  }
+
+  async getCurrentUser(): Promise<User> {
+    return this.request<User>("/auth/me");
+  }
+
+  // Abra CLI wrapper methods
   async getAppsGrouped(): Promise<ServerAppsResponse> {
-    return this.request<ServerAppsResponse>('/apps');
+    return this.request<ServerAppsResponse>("/abra/apps");
   }
 
-  // Get all servers
   async getServers(): Promise<AbraServer[]> {
-    return this.request<AbraServer[]>('/servers');
+    return this.request<AbraServer[]>("/abra/servers");
   }
 
-  // App actions with log streaming (websocket future)
+  async deployApp(appName: string): Promise<void> {
-  async deployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    return this.request(`/abra/apps/${appName}/deploy`, {
-    const response = await this.request<{ logs: any[] }>(`/apps/${appName}/deploy`, {
+      method: "POST",
-      method: 'POST',
     });
-
-    if (onLog && response.logs) {
-      const logs = processLogResponse(response.logs);
-      logs.forEach(log => onLog(log));
-    }
   }
 
-  async undeployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+  async stopApp(appName: string): Promise<void> {
-    const response = await this.request<{ logs: any[] }>(`/apps/${appName}/undeploy`, {
+    return this.request(`/abra/apps/${appName}/stop`, {
-      method: 'POST',
+      method: "POST",
     });
-
-    if (onLog && response.logs) {
-      const logs = processLogResponse(response.logs);
-      logs.forEach(log => onLog(log));
-    }
   }
 
-  async upgradeApp(appName: string, version: string, onLog?: (log: LogEntry) => void): Promise<void> {
+  async startApp(appName: string): Promise<void> {
-    const response = await this.request<{ logs: any[] }>(`/apps/${appName}/upgrade`, {
+    return this.request(`/abra/apps/${appName}/start`, {
-      method: 'POST',
+      method: "POST",
-      body: JSON.stringify({ version }),
     });
-
-    if (onLog && response.logs) {
-      const logs = processLogResponse(response.logs);
-      logs.forEach(log => onLog(log));
-    }
-  }
-
-  async removeApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
-    const response = await this.request<{ logs: any[] }>(`/apps/${appName}/remove`, {
-      method: 'POST',
-    });
-
-    if (onLog && response.logs) {
-      const logs = processLogResponse(response.logs);
-      logs.forEach(log => onLog(log));
-    }
-  }
-
-  // Server actions with log streaming
-  async refreshServer(serverName: string, onLog?: (log: LogEntry) => void): Promise<void> {
-    const response = await this.request<{ logs: any[] }>(`/servers/${serverName}/refresh`, {
-      method: 'POST',
-    });
-
-    if (onLog && response.logs) {
-      const logs = processLogResponse(response.logs);
-      logs.forEach(log => onLog(log));
-    }
-  }
-
-  async deployAllApps(serverName: string, appCount: number, onLog?: (log: LogEntry) => void): Promise<void> {
-    const response = await this.request<{ logs: any[] }>(`/servers/${serverName}/deploy-all`, {
-      method: 'POST',
-    });
-
-    if (onLog && response.logs) {
-      const logs = processLogResponse(response.logs);
-      logs.forEach(log => onLog(log));
-    }
-  }
-
-  async upgradeAllApps(serverName: string, upgradeCount: number, onLog?: (log: LogEntry) => void): Promise<void> {
-    const response = await this.request<{ logs: any[] }>(`/servers/${serverName}/upgrade-all`, {
-      method: 'POST',
-    });
-
-    if (onLog && response.logs) {
-      const logs = processLogResponse(response.logs);
-      logs.forEach(log => onLog(log));
-    }
-  }
-  // recipe catalog imports
-  async getRecipes(): Promise<AbraRecipe[]> {
-    return this.request<AbraRecipe[]>('/abra/catalogue');
   }
 }
-    
 
-export const apiService = new ApiService();
+export const apiService = new ApiService();

src/services/mock-apps.json

@@ -590,4 +590,4 @@
     "latestCount": 3,
     "upgradeCount": 6
   }
-}
+}

src/services/mock-logs.json

@@ -1,326 +0,0 @@
-{
-  "deploy": {
-    "logs": [
-      {
-        "type": "info",
-        "text": "📦 Deploying {appName}..."
-      },
-      {
-        "type": "command",
-        "text": "$ abra app deploy {appName}"
-      },
-      {
-        "type": "info",
-        "text": "Checking server connection..."
-      },
-      {
-        "type": "success",
-        "text": "✓ Connected to server"
-      },
-      {
-        "type": "info",
-        "text": "Pulling latest images..."
-      },
-      {
-        "type": "output",
-        "text": "latest: Pulling from library/traefik"
-      },
-      {
-        "type": "output",
-        "text": "a1b2c3d4: Pull complete"
-      },
-      {
-        "type": "output",
-        "text": "e5f6g7h8: Pull complete"
-      },
-      {
-        "type": "success",
-        "text": "✓ Images pulled successfully"
-      },
-      {
-        "type": "info",
-        "text": "Creating containers..."
-      },
-      {
-        "type": "output",
-        "text": "Creating {appName}_app_1 ... done"
-      },
-      {
-        "type": "output",
-        "text": "Creating {appName}_db_1  ... done"
-      },
-      {
-        "type": "info",
-        "text": "Starting services..."
-      },
-      {
-        "type": "output",
-        "text": "Starting {appName}_app_1 ... done"
-      },
-      {
-        "type": "output",
-        "text": "Starting {appName}_db_1  ... done"
-      },
-      {
-        "type": "success",
-        "text": "✓ {appName} deployed successfully!"
-      }
-    ]
-  },
-  "stop": {
-    "logs": [
-      {
-        "type": "info",
-        "text": "🛑 Stopping {appName}..."
-      },
-      {
-        "type": "command",
-        "text": "$ abra app stop {appName}"
-      },
-      {
-        "type": "output",
-        "text": "Stopping {appName}_app_1 ... done"
-      },
-      {
-        "type": "output",
-        "text": "Stopping {appName}_db_1  ... done"
-      },
-      {
-        "type": "success",
-        "text": "✓ {appName} stopped"
-      }
-    ]
-  },
-  "start": {
-    "logs": [
-      {
-        "type": "info",
-        "text": "▶️ Starting {appName}..."
-      },
-      {
-        "type": "command",
-        "text": "$ abra app start {appName}"
-      },
-      {
-        "type": "output",
-        "text": "Starting {appName}_app_1 ... done"
-      },
-      {
-        "type": "output",
-        "text": "Starting {appName}_db_1  ... done"
-      },
-      {
-        "type": "success",
-        "text": "✓ {appName} started"
-      }
-    ]
-  },
-  "upgrade": {
-    "logs": [
-      {
-        "type": "info",
-        "text": "Upgrading {appName} to {version}..."
-      },
-      {
-        "type": "command",
-        "text": "$ abra app upgrade {appName}"
-      },
-      {
-        "type": "info",
-        "text": "Pulling new version..."
-      },
-      {
-        "type": "output",
-        "text": "{version}: Pulling from library/app"
-      },
-      {
-        "type": "output",
-        "text": "x9y8z7w6: Pull complete"
-      },
-      {
-        "type": "success",
-        "text": "✓ New version pulled"
-      },
-      {
-        "type": "info",
-        "text": "Stopping old containers..."
-      },
-      {
-        "type": "output",
-        "text": "Stopping {appName}_app_1 ... done"
-      },
-      {
-        "type": "info",
-        "text": "Starting new containers..."
-      },
-      {
-        "type": "output",
-        "text": "Starting {appName}_app_1 ... done"
-      },
-      {
-        "type": "success",
-        "text": "✓ {appName} upgraded to {version}"
-      }
-    ]
-  },
-  "remove": {
-    "logs": [
-      {
-        "type": "warning",
-        "text": "⚠️ Removing {appName}..."
-      },
-      {
-        "type": "command",
-        "text": "$ abra app remove {appName}"
-      },
-      {
-        "type": "output",
-        "text": "Stopping {appName}_app_1 ... done"
-      },
-      {
-        "type": "output",
-        "text": "Stopping {appName}_db_1  ... done"
-      },
-      {
-        "type": "output",
-        "text": "Removing {appName}_app_1 ... done"
-      },
-      {
-        "type": "output",
-        "text": "Removing {appName}_db_1  ... done"
-      },
-      {
-        "type": "output",
-        "text": "Removing network {appName}_default"
-      },
-      {
-        "type": "success",
-        "text": "✓ {appName} removed"
-      }
-    ]
-  },
-  "serverRefresh": {
-    "logs": [
-      {
-        "type": "info",
-        "text": "🔄 Refreshing server {serverName}..."
-      },
-      {
-        "type": "command",
-        "text": "$ abra server ls"
-      },
-      {
-        "type": "info",
-        "text": "Fetching server status..."
-      },
-      {
-        "type": "output",
-        "text": "Checking connection..."
-      },
-      {
-        "type": "success",
-        "text": "✓ Connected"
-      },
-      {
-        "type": "output",
-        "text": "Fetching app list..."
-      },
-      {
-        "type": "success",
-        "text": "✓ Found apps on {serverName}"
-      },
-      {
-        "type": "success",
-        "text": "✓ Server refreshed"
-      }
-    ]
-  },
-  "deployAll": {
-    "logs": [
-      {
-        "type": "info",
-        "text": "📦 Deploying all apps on {serverName}..."
-      },
-      {
-        "type": "command",
-        "text": "$ abra app deploy --all --server {serverName}"
-      },
-      {
-        "type": "info",
-        "text": "Found {appCount} apps to deploy"
-      },
-      {
-        "type": "output",
-        "text": "Deploying apps in parallel..."
-      },
-      {
-        "type": "info",
-        "text": "[1/{appCount}] Deploying app_1..."
-      },
-      {
-        "type": "success",
-        "text": "✓ app_1 deployed"
-      },
-      {
-        "type": "info",
-        "text": "[2/{appCount}] Deploying app_2..."
-      },
-      {
-        "type": "success",
-        "text": "✓ app_2 deployed"
-      },
-      {
-        "type": "info",
-        "text": "[3/{appCount}] Deploying app_3..."
-      },
-      {
-        "type": "success",
-        "text": "✓ app_3 deployed"
-      },
-      {
-        "type": "success",
-        "text": "✓ All apps deployed on {serverName}"
-      }
-    ]
-  },
-  "upgradeAll": {
-    "logs": [
-      {
-        "type": "info",
-        "text": "Upgrading all apps on {serverName}..."
-      },
-      {
-        "type": "command",
-        "text": "$ abra app upgrade --all --server {serverName}"
-      },
-      {
-        "type": "info",
-        "text": "Found {upgradeCount} apps with available upgrades"
-      },
-      {
-        "type": "output",
-        "text": "Upgrading apps sequentially..."
-      },
-      {
-        "type": "info",
-        "text": "[1/{upgradeCount}] Upgrading app_1..."
-      },
-      {
-        "type": "success",
-        "text": "✓ app_1 upgraded"
-      },
-      {
-        "type": "info",
-        "text": "[2/{upgradeCount}] Upgrading app_2..."
-      },
-      {
-        "type": "success",
-        "text": "✓ app_2 upgraded"
-      },
-      {
-        "type": "success",
-        "text": "✓ All apps upgraded on {serverName}"
-      }
-    ]
-  }
-}

src/services/mock-servers.json

@@ -27,4 +27,4 @@
     "host": "orgsite.org",
     "name": "orgsite.org"
   }
-]
+]

src/services/mockApi.ts

@@ -1,68 +1,9 @@
-import type { AbraServer, AbraRecipe, ServerAppsResponse } from '../types';
+import type { AbraServer, ServerAppsResponse } from "../types";
-import appsData from './mock-apps.json';
+import appsData from "./mock-apps.json";
-import serversData from './mock-servers.json';
+import serversData from "./mock-servers.json";
-import logsData from './mock-logs.json';
-import catalogue from './mock-catalogue.json';
-
-
-// Log entry type
-export type LogEntry = {
-  type: 'info' | 'success' | 'error' | 'warning' | 'command' | 'output';
-  text: string;
-  timestamp: Date;
-};
-
-// Type for the imported JSON structure
-type LogTemplate = {
-  type: 'info' | 'success' | 'error' | 'warning' | 'command' | 'output';
-  text: string;
-};
-
-type LogsDataStructure = {
-  [key: string]: {
-    logs: LogTemplate[];
-  };
-};
 
 // Simulate API delay
-const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-
-// Helper to replace template variables like {appName}, {version}
-const replaceVars = (text: string, vars: Record<string, string | number>): string => {
-  let result = text;
-  Object.entries(vars).forEach(([key, value]) => {
-    result = result.replace(new RegExp(`\\{${key}\\}`, 'g'), String(value));
-  });
-  return result;
-};
-
-// Helper to process log templates into LogEntry objects
-const processLogs = (
-  action: string,
-  vars: Record<string, string | number>
-): LogEntry[] => {
-  console.log('Processing logs for action:', action);
-  console.log('Loaded logsData:', logsData);
-  
-  const typedLogsData = logsData as LogsDataStructure;
-  const actionData = typedLogsData[action];
-  
-  if (!actionData || !actionData.logs) {
-    console.error(`No logs found for action: ${action}`);
-    return [];
-  }
-  
-  console.log('Found logs:', actionData.logs);
-  
-  const templates = actionData.logs;
-  return templates
-    .filter(template => template && template.type && template.text) // Filter out any undefined/malformed entries
-    .map(template => ({
-      type: template.type,
-      text: replaceVars(template.text, vars),
-      timestamp: new Date(),
-    }));
-};
 
 export const mockApiService = {
   async getAppsGrouped(): Promise<ServerAppsResponse> {
@@ -75,71 +16,18 @@ export const mockApiService = {
     return serversData as AbraServer[];
   },
 
-  async deployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+  async deployApp(appName: string): Promise<void> {
-    const logs = processLogs('deploy', { appName });
+    await delay(1000);
-    
+    console.log(`Mock: Deploying app ${appName}`);
-    for (const log of logs) {
-      await delay(200);
-      onLog?.(log);
-    }
   },
 
-  async stopApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+  async stopApp(appName: string): Promise<void> {
-    const logs = processLogs('stop', { appName });
+    await delay(500);
-    
+    console.log(`Mock: Stopping app ${appName}`);
-    for (const log of logs) {
-      await delay(150);
-      onLog?.(log);
-    }
   },
 
-  async upgradeApp(appName: string, version: string, onLog?: (log: LogEntry) => void): Promise<void> {
+  async startApp(appName: string): Promise<void> {
-    const logs = processLogs('upgrade', { appName, version });
+    await delay(500);
-    
+    console.log(`Mock: Starting app ${appName}`);
-    for (const log of logs) {
-      await delay(200);
-      onLog?.(log);
-    }
   },
-
+};
-  async removeApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
-    const logs = processLogs('remove', { appName });
-    
-    for (const log of logs) {
-      await delay(180);
-      onLog?.(log);
-    }
-  },
-
-  async refreshServer(serverName: string, onLog?: (log: LogEntry) => void): Promise<void> {
-    const logs = processLogs('serverRefresh', { serverName });
-    
-    for (const log of logs) {
-      await delay(200);
-      onLog?.(log);
-    }
-  },
-
-  async deployAllApps(serverName: string, appCount: number, onLog?: (log: LogEntry) => void): Promise<void> {
-    const logs = processLogs('deployAll', { serverName, appCount });
-    
-    for (const log of logs) {
-      await delay(250);
-      onLog?.(log);
-    }
-  },
-
-  async upgradeAllApps(serverName: string, upgradeCount: number, onLog?: (log: LogEntry) => void): Promise<void> {
-    const logs = processLogs('upgradeAll', { serverName, upgradeCount });
-    
-    for (const log of logs) {
-      await delay(250);
-      onLog?.(log);
-    }
-  },
-  // recipe catalog imports
-  async getRecipes(): Promise<AbraRecipe[]> {
-    await delay(300);
-    return catalogue as AbraRecipe[];
-  }
-};

src/types/index.ts

@@ -1,3 +1,19 @@
+export interface User {
+  id: string;
+  username: string;
+  email: string;
+}
+
+export interface AuthResponse {
+  user: User;
+  token: string;
+}
+
+export interface LoginCredentials {
+  username: string;
+  password: string;
+}
+
 export interface ApiError {
   message: string;
   status: number;
@@ -8,7 +24,7 @@ export interface AbraApp {
   recipe: string;
   appName: string;
   domain: string;
-  status: 'deployed' | 'stopped' | 'unknown';
+  status: "deployed" | "stopped" | "unknown";
   chaos: string;
   chaosVersion: string;
   version: string;
@@ -37,35 +53,3 @@ export interface AppWithServer extends AbraApp {
     upgradeCount: number;
   };
 }
-export interface Image {
-  image: string;
-  rating: string
-  source: string
-  url: string
-}
-type RecipeVersions = Record<string, Record<string, ServiceMeta>>[];
-export interface ServiceMeta {
-  image: string;
-  tag: string
-}
-export interface Features {
-  backups: string;
-  email: string;
-  healthcheck: string;
-  image: Image;
-  status: number;
-  tests: string;
-  sso: string;
-}
-export interface AbraRecipe {
-  category: string;
-  default_branch: string;
-  description: string;
-  features: Features;
-  icon: string;
-  name: string;
-  repository: string;
-  ssh_url: string;
-  versions: RecipeVersions;
-  website: string;
-}

vite.config.ts

@@ -1,6 +1,11 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
-import react from '@vitejs/plugin-react'
+import react from "@vitejs/plugin-react";
 
 export default defineConfig({
   plugins: [react()],
-})
+  server: {
+    cors: {
+      origin: "http://localhost:3000",
+    },
+  },
+});