merge changes from dev branch

Reviewed-on: BornDeleuze/coop-cloud-front#8

.env

@@ -1,2 +1,3 @@
 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 bypass authentication for development
+# Set to 'true' to use mock data
 VITE_MOCK_AUTH=true

package.json

@@ -16,9 +16,11 @@
     "format:check": "prettier --check 'src/**/*.{ts,tsx,scss,css,json}'"
   },
   "dependencies": {
+    "prismjs": "^1.30.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-router-dom": "^7.9.5"
+    "react-router-dom": "^7.9.5",
+    "react-simple-code-editor": "^0.14.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",

src/App.tsx

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

src/assets/scss/_global.scss

@@ -1,6 +1,7 @@
 @use './variables' as *;
 @use './mixins' as *;
 
+
 body {
   margin: 0;
   padding: 0;

src/assets/scss/_mixins.scss

@@ -62,5 +62,4 @@
   font-size: $font-size-sm;
   font-weight: $font-weight-semibold;
   background-color: rgba($color, 0.1);
-  // color: darken($color, 20%);
 }

src/components/Authenticated.tsx

@@ -1,24 +0,0 @@
-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/Editor/Editor.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState, useRef } from "react";
+import { apiService } from '../../services/api';
+import Editor from "react-simple-code-editor";
+import Prism from "prismjs";
+
+// import a theme + language
+import "prismjs/themes/prism.css";
+import "prismjs/components/prism-javascript";
+
+interface EditorProps {
+  appName: string;
+}
+
+export const EditorPage:  React.FC<EditorProps> = ({ appName }) => {
+  const [code, setCode] = useState("");
+  useEffect(() => {
+    document.body.classList.add("modal-open");
+
+    return () => {
+      document.body.classList.remove("modal-open");
+    };
+  }, []);
+  useEffect(() => {
+    const fetchCode = async () => {
+      const config = await apiService.getConfig(appName);
+      setCode(config);
+    }
+    fetchCode();
+  }, []);
+
+  const saveFile = async () => {
+     await apiService.writeConfig(appName, code) 
+  };
+
+  return (
+    <div>
+      <Editor
+        value={code}
+        onValueChange={code => setCode(code)}
+        highlight={code => Prism.highlight(code, Prism.languages.javascript, "javascript")}
+        padding={10}
+        style={{
+          fontFamily: '"Fira code", "Fira Mono", monospace',
+          fontSize: 14,
+          border: "1px solid #ccc",
+          minHeight: "300px",
+        }}
+      />
+      <button onClick={saveFile}>Save</button>
+    </div>
+  );
+};

src/components/Header/Header.tsx

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

src/components/Header/_Header.scss

@@ -78,50 +78,4 @@
       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/Loader/Loader.scss

@@ -0,0 +1,20 @@
+@use '../../assets/scss/variables' as *;
+
+.loader {
+  display: inline-flex;   // instead of block
+  align-items: center;    // center SVG inside
+  line-height: 1;         // prevents extra vertical space
+  svg {
+    display: block;
+  }
+
+  rect {
+    fill: $primary-light;
+  }
+
+  &--style7 {
+    rect {
+      transform-origin: center bottom;
+    }
+  }
+}

src/components/Loader/Loader.tsx

@@ -0,0 +1,35 @@
+import "./Loader.scss";
+
+export const Loader = () => {
+  return (
+    <div className="loader loader--style6" title="5">
+      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        width="24px" height="30px" viewBox="0 0 24 30" style={{ enableBackground: "new 0 0 50 50" }} xml:space="preserve">
+        <rect x="0" y="13" width="4" height="5" fill="#333">
+          <animate attributeName="height" attributeType="XML"
+            values="5;21;5" 
+            begin="0s" dur="0.6s" repeatCount="indefinite" />
+          <animate attributeName="y" attributeType="XML"
+            values="13; 5; 13"
+            begin="0s" dur="0.6s" repeatCount="indefinite" />
+        </rect>
+        <rect x="10" y="13" width="4" height="5" fill="#333">
+          <animate attributeName="height" attributeType="XML"
+            values="5;21;5" 
+            begin="0.15s" dur="0.6s" repeatCount="indefinite" />
+          <animate attributeName="y" attributeType="XML"
+            values="13; 5; 13"
+            begin="0.15s" dur="0.6s" repeatCount="indefinite" />
+        </rect>
+        <rect x="20" y="13" width="4" height="5" fill="#333">
+          <animate attributeName="height" attributeType="XML"
+            values="5;21;5" 
+            begin="0.3s" dur="0.6s" repeatCount="indefinite" />
+          <animate attributeName="y" attributeType="XML"
+            values="13; 5; 13"
+            begin="0.3s" dur="0.6s" repeatCount="indefinite" />
+        </rect>
+      </svg>
+    </div>
+  );
+};

src/components/Spinner/Spinner.scss

@@ -0,0 +1,43 @@
+// magic spinner stuff
+
+$offset: 187;
+$duration: 1.4s;
+
+.spinner {
+  margin-top: 10px;
+  animation: rotator $duration linear infinite;
+}
+
+@keyframes rotator {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(270deg); }
+}
+
+.path {
+  stroke-dasharray: $offset;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  animation:
+    dash $duration ease-in-out infinite, 
+    colors ($duration*4) ease-in-out infinite;
+}
+
+@keyframes colors {
+	0% { stroke: #4285F4; }
+	25% { stroke: #DE3E35; }
+	50% { stroke: #F7C223; }
+	75% { stroke: #1B9A59; }
+  100% { stroke: #4285F4; }
+}
+
+@keyframes dash {
+ 0% { stroke-dashoffset: $offset; }
+ 50% {
+   stroke-dashoffset: $offset/4;
+   transform:rotate(135deg);
+ }
+ 100% {
+   stroke-dashoffset: $offset;
+   transform:rotate(450deg);
+ }
+}

src/components/Spinner/Spinner.tsx

@@ -0,0 +1,9 @@
+import "./Spinner.scss"
+
+export const Spinner = () => {
+  return (
+    <svg className="spinner" width="40px" height="40px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+      <circle className="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+    </svg>
+  );
+};

src/components/Terminal/Terminal.tsx

@@ -0,0 +1,83 @@
+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 indexRef = useRef(0);
+  const [displayedLogs, setDisplayedLogs] = useState<LogEntry[]>([]);
+
+  // Stream logs in with delays for realistic effect
+  useEffect(() => {
+    if (!isActive || logs.length === 0) {
+      indexRef.current = 0;
+      setDisplayedLogs([]);
+      return;
+    }
+
+    const streamLogs = () => {
+      if (indexRef.current < logs.length) {
+        setDisplayedLogs(prev => [...prev, logs[indexRef.current]]);
+        indexRef.current++;
+        
+        // Variable delay based on log type
+        const delay = logs[indexRef.current - 1]?.type === 'command' ? 200 : 
+                     logs[indexRef.current - 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-text">{log.text}</span>
+          </div>
+        ))}
+        {isActive && displayedLogs.length > 0 && (
+          <div className="terminal-cursor">▊</div>
+        )}
+      </div>
+    </div>
+  );
+};

src/components/Terminal/_Terminal.scss

@@ -0,0 +1,204 @@
+@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

@@ -1,89 +0,0 @@
-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 isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
-
-  useEffect(() => {
-    const checkAuth = async () => {
-      console.log('🔍 checkAuth running, isMockMode:', isMockMode);
-      try {
-        if (isMockMode) {
-          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();
-  }, [isMockMode]);
-
-  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

@@ -1,12 +0,0 @@
-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/routes/Apps/App.scss

@@ -0,0 +1,481 @@
+@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: white;
+    border-color: $primary-light;
+
+    &:hover:not(:disabled) {
+      background: $primary-light;
+      border-color: $primary-light;
+    }
+  }
+  &.service {
+    &:hover:not(:disabled) {
+      background: #3fff5c9d;
+
+    }
+  }
+  &.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;
+  }
+}
+
+// service grid
+.service-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 2fr));
+  gap: $spacing-md;
+}
+
+.service-card {
+  @include card;
+  transition: transform $transition-base, box-shadow $transition-base;
+  position: relative;
+  overflow: hidden;
+  padding: $spacing-md;
+  .service-name {
+    h3 {
+      font-size: $font-size-lg;
+      color: $text-primary;
+      font-weight: $font-weight-bold;
+    }
+  }
+  .service-row {
+    flex-grow: 1;
+    flex: 1;
+
+    .service-value {
+      font-size: $font-size-sm;
+      display: -webkit-box;
+    }
+  }
+  &.dark-green {
+    background-color: #3fff5c;
+  }
+  &.green {
+    background-color: #3fff5c9d;
+  }
+  &.red {
+    background-color: #ff1313;
+  }
+  &.gray {
+    background-color: rgb(187, 187, 187)
+  }
+}
+
+// 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;
+  }
+}
+
+.domain-link {
+  color: $primary-light;
+  text-decoration: none;
+  font-size: $font-size-base;
+  transition: color $transition-base;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.server-link {
+  background: none;
+  border: none;
+  color: $primary-light;
+  cursor: pointer;
+  padding: 0;
+  font-size: $font-size-base;
+  text-align: left;
+  transition: color $transition-base;
+
+  &:hover {
+    background: none;
+    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;
+    }
+  }
+}
+
+// editor modal overlay
+// locks scrolling
+body.modal-open {
+  overflow: hidden;
+}
+.editor-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.editor-modal {
+  width: 90%;
+  height: 90%;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  overflow: hidden;
+
+  .editor-header {
+    padding: 10px;
+    border-bottom: 1px solid #ddd;
+  }
+
+  .editor-body {
+    flex: 1;
+    overflow: auto; // 👈 THIS is key
+    display: flex;
+
+    // make your code editor stretch
+    > * {
+      flex: 1;
+    }
+  }
+}
+
+// navigation back to apps page
+.back-navigation {
+  margin-bottom: 10px;
+}

src/routes/Apps/App.tsx

@@ -0,0 +1,565 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import { Header } from '../../components/Header/Header';
+import { Loader } from '../../components/Loader/Loader';
+import { Terminal } from '../../components/Terminal/Terminal';
+import { EditorPage } from '../../components/Editor/Editor';
+import { apiService } from '../../services/api';
+import type { AbraApp, AbraAppService, AbraServiceState } from '../../types';
+import type { LogEntry } from '../../services/mockApi';
+import { createPortal } from "react-dom";
+
+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 [deployState, setDeployState] = useState("undeployed | deploying | deployed | failed");
+  const [serviceState, setServiceState] = useState<Record<string, AbraServiceState>>({});
+  const [services, setServices] = useState<AbraAppService[]>();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [actionLoading, setActionLoading] = useState<string | null>(null);
+  const [openEditor, setOpenEditor] = useState(false);
+  
+  // Terminal state
+  const [terminalLogs, setTerminalLogs] = useState<LogEntry[]>([]);
+  const [terminalActive, setTerminalActive] = useState(false);
+
+  // Stream state
+  const stopRef = useRef<null | (() => void)>(null);
+  const deployRef = useRef<null | (() => void)>(null);
+
+  // Use to refresh page
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const isMockMode = false;
+  const getServiceClass = (state: string, status: string) => {
+    if (state === "running" && status.includes("\(healthy\)")) return "service-card dark-green";
+    if (status.includes("unhealthy")) return "service-card red"
+    if (state === "running") return "service-card green";
+    return "service-card gray";
+  };
+  const getServiceClassDeploying = (state: string, status: string) => {
+    if (state.includes("converged") && status.includes("\(healthy\)")) return "service-card dark-green";
+    if (status.includes("unhealthy")) return "service-card red"
+    if (state.includes("converged")) return "service-card green";
+    return "service-card gray";
+  };
+  useEffect(() => {
+    const fetchApp = async () => {
+      try {
+        if (isMockMode) {
+          const { mockApiService } = await import('../../services/mockApi');
+          const appsData = await mockApiService.getAppsGrouped();
+          
+          const serverApps = appsData[server || ''];
+          const foundApp = serverApps?.apps.find(a => a.appName === appName);
+          
+          if (foundApp) {
+            setApp(foundApp);
+          } else {
+            setError('App not found');
+          }
+        } else {
+          console.log('fetching app...');
+          const appsData = await apiService.getAppsGrouped();
+          const serverApps = appsData[server || ''];
+          const foundApp = serverApps?.apps.find(a => a.appName === appName);
+          
+          if (foundApp) {
+            setApp(foundApp);
+            // when the app is deploying it should handle setting the deploy state itself after success/failure.
+            if (deployState !== "deploying") {
+              setDeployState(foundApp.status === "deployed" ? "deployed" : "undeployed");
+            }
+          } else {
+            setError('App not found');
+          }
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load app');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchApp();
+  }, [server, appName, isMockMode, refreshKey]);
+  // checks status of app containers
+  useEffect(() => {
+    let isMounted = true;
+    const heartbeat = async () => {
+      while (isMounted) {
+        if (deployState === "deployed" && appName) {
+          const services = await apiService.getServices(appName);
+          if (services) {
+            setServices(services);
+          } else {
+            setServices([]);
+          }
+        }
+
+        await new Promise(resolve => setTimeout(resolve, 10000));
+      }
+    };
+    heartbeat();
+    return () => {
+      isMounted = false;
+    };
+  }, [deployState, appName]);
+
+  function EditorModal({ onClose }) {
+    return createPortal(
+      <div className="editor-overlay" onClick={onClose}>
+        <div
+          className="editor-modal"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="editor-header">
+            <button onClick={onClose}>Close</button>
+          </div>
+
+          <div className="editor-body">
+            <EditorPage 
+              appName={app ? app.appName : ""}
+            />
+          </div>
+        </div>
+      </div>,
+      document.body
+    );
+  }
+  const handleAction = async (action: string, version?: string) => {
+    if (!app) return;
+    
+    setActionLoading(action);
+    try {
+      if (isMockMode) {
+        const { mockApiService } = await import('../../services/mockApi');
+        
+        const onLog = (log: LogEntry) => {
+          setTerminalLogs(prev => [...prev, log]);
+        };
+        
+        switch (action) {
+          case 'deploy':
+            await mockApiService.deployApp(app.appName, onLog);
+            break;
+          case 'stop':
+            await mockApiService.stopApp(app.appName, onLog);
+            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);
+            setRefreshKey(prev => prev + 1);
+            break;
+          case 'deploy':
+            await apiService.deployApp(app.appName);
+            setDeployState("deploying");
+            console.log("deploying");
+            deployRef.current = apiService.deployLogs(app.appName, 
+              (update) => {
+                if (update.type === "service") {
+                  console.log(update.data.name)
+                  const serviceName = update.data.name.slice(app.appName.length+1)
+                  setServiceState(prev => ({
+                    ...prev,
+                    [serviceName]: {
+                      ...prev[serviceName] ?? {}, 
+                      ...update.data
+                    }
+                  }))
+                }
+                if (update.type === "done") {
+                  if (update.data.failed) {
+                    setDeployState('failed');
+                  } else {
+                    setDeployState("deployed");
+                  }
+                  setRefreshKey(prev => prev + 1);
+                }
+              }
+            )
+            break;
+          case 'logs':
+            setTerminalActive(true);
+            setTerminalLogs([]);
+            if (version) {
+              stopRef.current = apiService.getLogs(app.appName, version, 
+                (line) => {
+                  setTerminalLogs(prev => [...prev, {
+                    type: 'info',
+                    text: `${line}`,
+                    timestamp: new Date()
+                  }]);
+                }
+              )
+            }
+            break;
+          case 'remove':
+            await apiService.removeApp(app.appName);
+            setApp(null);
+            break;
+          case 'config':
+            setOpenEditor(true);
+            break;
+        }
+      }
+    } catch (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);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="app-detail-page">
+        <Header />
+        <main className="app-detail-content">
+          <div className="loading">
+            <Loader />
+            <div>Loading application</div>
+          </div>
+        </main>
+      </div>
+    );
+  }
+
+  if (error || !app) {
+    return (
+      <div className="app-detail-page">
+        <Header />
+        <main className="app-detail-content">
+          <div className="error">{error || 'App not found'}</div>
+          <button onClick={() => navigate('/apps')} className="back-button">
+            Back to Apps
+          </button>
+        </main>
+      </div>
+    );
+  }
+  // TODO: make sure this makes sense when app.upgrade is unknown
+  const upgradeVersions = (app.upgrade !== 'latest'  && app.upgrade !== 'unknown') ? app.upgrade.split('\n') : [];
+
+  return (
+    <div className="app-detail-page">
+      {openEditor && (
+        <EditorModal onClose={() => setOpenEditor(false)} />
+      )}
+      <Header />
+      <main className="app-detail-content">
+        <div className="back-navigation">
+          <button 
+            onClick={() => navigate(`/apps`)}
+            className="server-link"
+          >
+             ← Back to Apps
+          </button>
+        </div>
+
+        <div className="app-header">
+          <div className="app-title-section">
+            <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>
+              {app.chaos === 'true' && (
+                <span className="chaos-badge" title="Chaos mode enabled"> Chaos</span>
+              )}
+            </div>
+          </div>
+
+          <div className="app-actions">
+            <button 
+              className="action-btn danger"
+              onClick={() => handleAction('stop')}
+              disabled={!!actionLoading || deployState === "undeployed"}
+            >
+              {actionLoading === 'stop' ? 'Stopping...' : 'Stop'}
+            </button>
+            <button 
+              className="action-btn"
+              onClick={() => handleAction('deploy')}
+              disabled={!!actionLoading || deployState === "deployed"}
+            >
+              {actionLoading === 'deploy' ? 'Deploying...' : 'Deploy'}
+            </button>
+          </div>
+        </div>
+
+        {/* Terminal Component */}
+        <Terminal 
+          logs={terminalLogs} 
+          isActive={terminalActive}
+          onClose={() => {
+            stopRef.current?.();
+            stopRef.current = null;
+            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>
+                  <span>{app.appName}</span>
+                </div>
+
+                <div className="info-item">
+                  <label>Domain</label>
+                  {app.domain ? (
+                    <a href={`https://${app.domain}`} target="_blank" rel="noopener noreferrer" className="link">
+                      {app.domain} ↗
+                    </a>
+                  ) : (
+                    <span className="no-value">No domain configured</span>
+                  )}
+                </div>
+
+                <div className="info-item">
+                  <label htmlFor="server-link">Server</label>
+                  <Link
+                    id="server-link"
+                    to={`/servers/${app.server}`}
+                    className="link"
+                  >
+                    {app.server} ↗
+                  </Link>
+                </div>
+
+                <div className="info-item">
+                  <label>Recipe</label>
+                  <span>{app.recipe}</span>
+                </div>
+
+                <div className="info-item">
+                  <label>Status</label>
+                  <span className={`status-badge status-${app.status}`}>
+                    {app.status}
+                  </span>
+                </div>
+
+                <div className="info-item">
+                  <label>Chaos Mode</label>
+                  <span className={app.chaos === 'true' ? 'chaos-active' : ''}>
+                    {app.chaos === 'true' ? '☠️ Enabled' : 'Disabled'}
+                  </span>
+                </div>
+              </div>
+            </section>
+            {(deployState === "deployed" || deployState === "failed") && (
+              <section className="info-card"> 
+                <h2> Service Information </h2>
+                <div className="service-grid">
+                  {services === undefined || services?.length === 0 ? (
+                    <div className="no-services"> Loading services... </div>
+                  ) : (
+                    services.map((service) => (
+                      <div
+                        key={service.service}
+                        className={getServiceClass(service.state, service.status)}
+                      >
+                        <div className="service-name">
+                          <h3> {service.service} </h3>
+                        </div>
+                        <div className="service-row">
+                          <span className="service-value">{service.state}</span>
+                          <span className="service-value">{service.status}</span>
+                        </div>
+
+                        <button 
+                          className="action-btn"
+                          onClick={() => handleAction('logs', service.service)}
+                          disabled={!!actionLoading}
+                        >
+                          Logs
+                        </button>
+                      </div>
+                    ))
+                  )}
+                </div>
+              </section>)}
+             {(deployState === "deploying") && (
+              <section className="info-card"> 
+                <h2> Service Information </h2>
+                <div className="service-grid">
+                  {serviceState === undefined || Object.keys(serviceState).length === 0 ? (
+                    <div className="no-services"> Preparing services... </div>
+                  ) : (
+                    Object.keys(serviceState).map((name) => (
+                      <div
+                        key={name}
+                        className={getServiceClass(serviceState[name].status, serviceState[name].health)}
+                      >
+                        <div className="service-name">
+                          <h3> {name} </h3>
+                        </div>
+                        <div className="service-row">
+                          <span className="service-value">{serviceState[name].status}</span>
+                          <span className="service-value">{serviceState[name].health}</span>
+                        </div>
+
+                        <button 
+                          className="action-btn"
+                          onClick={() => handleAction('logs', appName)}
+                          disabled={!!actionLoading}
+                        >
+                          Logs
+                        </button>
+                      </div>
+                    ))
+                  )}
+                </div>
+              </section>)}
+            <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' && (
+                  <div className="version-current">
+                    <label>Chaos Version</label>
+                    <code>{app.chaosVersion}</code>
+                  </div>
+                )}
+
+                {upgradeVersions.length > 0 && (
+                  <div className="version-upgrades">
+                    <label>
+                      Available Upgrades
+                      <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 
+                            className="upgrade-btn"
+                            onClick={() => handleAction('upgrade', version)}
+                            disabled={!!actionLoading}
+                          >
+                            {actionLoading === 'upgrade' ? 'Upgrading...' : 'Upgrade'}
+                          </button>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {app.upgrade === 'unknown' && (
+                  <div className="version-upgrades">
+                    <label>
+                      Available Upgrades
+                    </label>
+                    <div className="upgrade-list">
+                      <div className="upgrade-item">
+                        <code>None</code>
+                      </div>
+                    </div>
+                  </div>
+                )}
+                {app.upgrade === 'latest' && (
+                  <div className="version-latest">
+                    ✓ Running latest version
+                  </div>
+                )}
+              </div>
+            </section>
+          </div>
+
+          {/* Right Column - Actions & Stats */}
+          <div className="sidebar-column">
+            <section className="info-card">
+              <h2>Quick Actions</h2>
+              
+              <div className="action-list">
+
+                <button 
+                  className="action-list-item"
+                  onClick={() => handleAction('deploy')}
+                  disabled={!!actionLoading}
+                >
+                  <span className="action-text">Deploy Application</span>
+                </button>
+
+                <button 
+                  className="action-list-item"
+                  onClick={() => handleAction('stop')}
+                  disabled={!!actionLoading}
+                >
+                  <span className="action-text">Stop Application</span>
+                </button>
+
+                <button 
+                  className="action-list-item danger"
+                  onClick={() => {
+                    if (confirm(`Are you sure you want to remove ${app.appName}?\nThis will delete all data and config`)) {
+                      handleAction('remove');
+                    }
+                  }}
+                  disabled={!!actionLoading}
+                >
+                  <span className="action-text">Remove Application</span>
+                </button>
+                <button
+                  className="action-list-item"
+                  onClick={() => handleAction('config')}
+                  disabled={!!actionLoading}
+                >
+                  <span className="action-text">Manage Config</span>
+                </button>
+              </div>
+            </section>
+
+            <section className="info-card">
+              <h2>Health Status</h2>
+              <div className="health-status">
+                <div className="health-item">
+                  <span className="health-label">CPU Usage</span>
+                  <span className="health-value">—</span>
+                </div>
+                <div className="health-item">
+                  <span className="health-label">Memory</span>
+                  <span className="health-value">—</span>
+                </div>
+                <div className="health-item">
+                  <span className="health-label">Uptime</span>
+                  <span className="health-value">—</span>
+                </div>
+              </div>
+            </section>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};

src/routes/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,6 +11,76 @@
   @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;
@@ -74,7 +144,7 @@
 }
 
 .domain-link {
-  color: $primary;
+  color: $primary-dark;
   text-decoration: none;
   transition: color $transition-base;
 
@@ -114,21 +184,28 @@
   .action-btn {
     background: none;
     border: 1px solid $border-color;
-    padding: $spacing-xs $spacing-sm;
+    padding: $spacing-xs $spacing-md;
     border-radius: $radius-sm;
     cursor: pointer;
-    font-size: $font-size-base;
+    font-size: $font-size-sm;
     color: $text-primary;
+    font-weight: $font-weight-medium;
     transition: all $transition-base;
 
     &:hover {
-      background-color: $bg-tertiary;
+      background-color: $primary;
-      transform: scale(1.1);
+      color: white;
+      border-color: $primary;
     }
 
     &.upgrade {
       border-color: $warning;
       color: $warning;
+
+      &:hover {
+        background-color: $warning;
+        color: white;
+      }
     }
   }
-}
+}

src/routes/Apps/Apps.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Header } from '../../../components/Header/Header';
+import { Header } from '../../components/Header/Header';
-import { apiService } from '../../../services/api';
+import { Loader } from '../../components/Loader/Loader';
-import type { AbraApp, AppWithServer, ServerAppsResponse } from '../../../types';
+import { apiService } from '../../services/api';
+import type { AbraApp, AppWithServer, ServerAppsResponse } from '../../types';
 import './Apps.scss';
 
 export const Apps: React.FC = () => {
@@ -14,14 +15,15 @@ export const Apps: React.FC = () => {
   const [filterServer, setFilterServer] = 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_MOCK_AUTH === 'true';
+  const isMockMode = false;
 
   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 {
@@ -86,12 +88,37 @@ export const Apps: React.FC = () => {
     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">
         <Header />
         <main className="apps-content">
-          <div className="loading">Loading applications...</div>
+          <div className="loading">
+            <Loader />
+            <div>Loading apps</div>
+          </div>
         </main>
       </div>
     );
@@ -117,32 +144,46 @@ export const Apps: React.FC = () => {
           <p className="subtitle">{stats.total} apps across {stats.totalServers} servers</p>
         </div>
 
-        {/* Stats Overview */}
+        {/* Compact Stats Overview */}
-        <div className="stats-grid">
+        <div className="stats-row">
-          <div className="stat-card">
+          <button
-            <div className="stat-info">
+            className="stat-chip"
-              <p className="stat-number">{stats.total}</p>
+            onClick={resetFilters}
-              <p className="stat-label">Total Apps</p>
+            title="Click to show all apps"
-            </div>
+            > 
-          </div>
+            <span className="stat-label">Apps</span>
-          <div className="stat-card upgrade">
+            <span className="stat-value">{stats.total}</span>
-            <div className="stat-info">
+          </button>
-              <p className="stat-number">{stats.needsUpgrade}</p>
+          
-              <p className="stat-label">Upgrades Available</p>
+          <button
-            </div>
+            className="stat-chip"
-          </div>
+            onClick={() => navigate('/servers')}
-          <div className="stat-card chaos">
+            title="View servers"
-            <div className="stat-info">
+          >
-              <p className="stat-number">{stats.chaosApps}</p>
+            <span className="stat-label">Servers</span>
-              <p className="stat-label">Chaos Mode</p>
+            <span className="stat-value">{stats.totalServers}</span>
-            </div>
+          </button>
-          </div>
+          
-          <div className="stat-card">
+          <button
-            <div className="stat-info">
+            className={`stat-chip ${showUpgradesOnly ? 'active' : ''}`}
-              <p className="stat-number">{stats.totalServers}</p>
+            onClick={toggleUpgrades}
-              <p className="stat-label">Servers</p>
+            title="Click to toggle apps with upgrades available"
-            </div>
+            disabled={stats.needsUpgrade === 0}
-          </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 */}
@@ -161,21 +202,6 @@ export const Apps: React.FC = () => {
               <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 */}
@@ -189,7 +215,7 @@ export const Apps: React.FC = () => {
                 <th>Server</th>
                 <th>Version</th>
                 <th>Status</th>
-                <th>Actions</th>
+                {/* <th>Actions</th> */}
               </tr>
             </thead>
             <tbody>
@@ -247,7 +273,7 @@ export const Apps: React.FC = () => {
                         {app.status}
                       </span>
                     </td>
-                    <td>
+                    {/* <td>
                       <div className="actions">
                         <button 
                           className="action-btn" 
@@ -272,7 +298,7 @@ export const Apps: React.FC = () => {
                           </button>
                         )}
                       </div>
-                    </td>
+                    </td> */}
                   </tr>
                 ))
               )}

src/routes/Authenticated/Apps/App.scss

@@ -1,463 +0,0 @@
-@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,326 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import { Header } from '../../../components/Header/Header';
-import { apiService } from '../../../services/api';
-import type { AbraApp } from '../../../types';
-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 [isEditing, setIsEditing] = useState(false);
-  const [actionLoading, setActionLoading] = useState<string | null>(null);
-
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
-
-  useEffect(() => {
-    const fetchApp = async () => {
-      try {
-        if (isMockMode) {
-          const { mockApiService } = await import('../../../services/mockApi');
-          const appsData = await mockApiService.getAppsGrouped();
-          
-          // Find the specific app
-          const serverApps = appsData[server || ''];
-          const foundApp = serverApps?.apps.find(a => a.appName === appName);
-          
-          if (foundApp) {
-            setApp(foundApp);
-          } else {
-            setError('App not found');
-          }
-        } else {
-          // Real API call would be here
-          const appsData = await apiService.getAppsGrouped();
-          const serverApps = appsData[server || ''];
-          const foundApp = serverApps?.apps.find(a => a.appName === appName);
-          
-          if (foundApp) {
-            setApp(foundApp);
-          } else {
-            setError('App not found');
-          }
-        }
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load app');
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchApp();
-  }, [server, appName, isMockMode]);
-
-  const handleAction = async (action: string) => {
-    if (!app) return;
-    
-    setActionLoading(action);
-    try {
-      switch (action) {
-        case 'start':
-          await apiService.startApp(app.appName);
-          break;
-        case 'stop':
-          await apiService.stopApp(app.appName);
-          break;
-        case 'deploy':
-          await apiService.deployApp(app.appName);
-          break;
-        case 'upgrade':
-          // Upgrade logic would go here
-          console.log('Upgrade app');
-          break;
-      }
-      // Refresh app data after action
-      // In real implementation, you'd refetch the app
-    } catch (err) {
-      console.error('Action failed:', err);
-    } finally {
-      setActionLoading(null);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="app-detail-page">
-        <Header />
-        <main className="app-detail-content">
-          <div className="loading">Loading application...</div>
-        </main>
-      </div>
-    );
-  }
-
-  if (error || !app) {
-    return (
-      <div className="app-detail-page">
-        <Header />
-        <main className="app-detail-content">
-          <div className="error">{error || 'App not found'}</div>
-          <button onClick={() => navigate('/apps')} className="back-button">
-            Back to Apps
-          </button>
-        </main>
-      </div>
-    );
-  }
-
-  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">
-            Apps
-          </button>
-          <span className="breadcrumb-separator">/</span>
-          <span className="breadcrumb-current">{app.appName}</span>
-        </div>
-
-        <div className="app-header">
-          <div className="app-title-section">
-            <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>
-              {app.chaos === 'true' && (
-                <span className="chaos-badge" title="Chaos mode enabled">Chaos</span>
-              )}
-            </div>
-          </div>
-
-          <div className="app-actions">
-            <button 
-              className="action-btn secondary"
-              onClick={() => setIsEditing(!isEditing)}
-            >
-              {isEditing ? 'Cancel' : 'Edit'}
-            </button>
-            <button 
-              className="action-btn danger"
-              onClick={() => handleAction('stop')}
-              disabled={actionLoading === 'stop'}
-            >
-              {actionLoading === 'stop' ? 'Stopping...' : 'Stop'}
-            </button>
-            <button 
-              className="action-btn primary"
-              onClick={() => handleAction('deploy')}
-              disabled={actionLoading === 'deploy'}
-            >
-              {actionLoading === 'deploy' ? 'Deploying...' : 'Deploy'}
-            </button>
-          </div>
-        </div>
-
-        <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>
-                  <span>{app.appName}</span>
-                </div>
-
-                <div className="info-item">
-                  <label>Domain</label>
-                  {app.domain ? (
-                    <a href={`https://${app.domain}`} target="_blank" rel="noopener noreferrer" className="domain-link">
-                      {app.domain} ↗
-                    </a>
-                  ) : (
-                    <span className="no-value">No domain configured</span>
-                  )}
-                </div>
-
-                <div className="info-item">
-                  <label>Server</label>
-                  <button 
-                    onClick={() => navigate(`/servers/${app.server}`)}
-                    className="server-link"
-                  >
-                    {app.server} →
-                  </button>
-                </div>
-
-                <div className="info-item">
-                  <label>Recipe</label>
-                  <span>{app.recipe}</span>
-                </div>
-
-                <div className="info-item">
-                  <label>Status</label>
-                  <span className={`status-badge status-${app.status}`}>
-                    {app.status}
-                  </span>
-                </div>
-
-                <div className="info-item">
-                  <label>Chaos Mode</label>
-                  <span className={app.chaos === 'true' ? 'chaos-active' : ''}>
-                    {app.chaos === 'true' ? '🔬 Enabled' : 'Disabled'}
-                  </span>
-                </div>
-              </div>
-            </section>
-
-            <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' && (
-                  <div className="version-current">
-                    <label>Chaos Version</label>
-                    <code>{app.chaosVersion}</code>
-                  </div>
-                )}
-
-                {upgradeVersions.length > 0 && (
-                  <div className="version-upgrades">
-                    <label>
-                      Available Upgrades
-                      <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 
-                            className="upgrade-btn"
-                            onClick={() => handleAction('upgrade')}
-                            disabled={actionLoading === 'upgrade'}
-                          >
-                            {actionLoading === 'upgrade' ? 'Upgrading...' : 'Upgrade'}
-                          </button>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-
-                {app.upgrade === 'latest' && (
-                  <div className="version-latest">
-                    Running latest version
-                  </div>
-                )}
-              </div>
-            </section>
-          </div>
-
-          {/* Right Column - Actions & Logs */}
-          <div className="sidebar-column">
-            <section className="info-card">
-              <h2>Quick Actions</h2>
-              
-              <div className="action-list">
-                <button 
-                  className="action-list-item"
-                  onClick={() => handleAction('start')}
-                  disabled={actionLoading === 'start'}
-                >
-                  <span className="action-text">Start Application</span>
-                </button>
-
-                <button 
-                  className="action-list-item"
-                  onClick={() => handleAction('stop')}
-                  disabled={actionLoading === 'stop'}
-                >
-                  <span className="action-text">Stop Application</span>
-                </button>
-
-                <button className="action-list-item">
-                  <span className="action-text">Restart Application</span>
-                </button>
-
-                <button className="action-list-item">
-                  <span className="action-text">View Logs</span>
-                </button>
-
-                <button className="action-list-item">
-                  <span className="action-text">Edit Configuration</span>
-                </button>
-
-                <button className="action-list-item danger">
-                  <span className="action-text">Delete Application</span>
-                </button>
-              </div>
-            </section>
-
-            <section className="info-card">
-              <h2>Health Status</h2>
-              <div className="health-status">
-                <div className="health-item">
-                  <span className="health-label">CPU Usage</span>
-                  <span className="health-value">—</span>
-                </div>
-                <div className="health-item">
-                  <span className="health-label">Memory</span>
-                  <span className="health-value">—</span>
-                </div>
-                <div className="health-item">
-                  <span className="health-label">Uptime</span>
-                  <span className="health-value">—</span>
-                </div>
-              </div>
-            </section>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-};

src/routes/Dashboard/Dashboard.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { Header } from '../../../components/Header/Header';
+import { Header } from '../../components/Header/Header';
+import { Loader } from '../../components/Loader/Loader';
 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';
 
 export const Dashboard: React.FC = () => {
@@ -12,14 +13,14 @@ export const Dashboard: React.FC = () => {
   const [error, setError] = useState('');
   const navigate = useNavigate();
 
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
+  const isMockMode = false;
 
   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(),
@@ -60,7 +61,10 @@ export const Dashboard: React.FC = () => {
       <div className="dashboard-page">
         <Header />
         <main className="dashboard-content">
-          <div className="loading">Loading dashboard...</div>
+          <div className="loading">
+            <Loader />
+            <div>Loading dashboard</div>
+          </div>
         </main>
       </div>
     );
@@ -89,7 +93,6 @@ export const Dashboard: React.FC = () => {
           <button onClick={() => navigate('/apps')} className="nav-link bland-button">
             <div className="stat-card">
               <h3>Apps</h3>
-              <p className="stat-number">{apps.length}</p>
               <p className="stat-label">
                 {deployedAppsCount} deployed
               </p>
@@ -99,7 +102,6 @@ export const Dashboard: React.FC = () => {
           <button onClick={() => navigate('/servers')} className="nav-link bland-button">
             <div className="stat-card">
               <h3>Servers</h3>
-              <p className="stat-number">{servers.length}</p>
               <p className="stat-label">
                 {serversWithAppsCount} connected
               </p>

src/routes/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 {

src/routes/Login/LoginForm.scss

@@ -1,94 +0,0 @@
-@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

@@ -1,72 +0,0 @@
-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.scss

@@ -0,0 +1,59 @@
+.modal {
+  background: white;
+  position: relative;
+  padding: 24px;
+  border-radius: 8px;
+  width: min(100%, 800px);
+  max-height: 90vh;
+}
+
+.modal .close-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1;
+
+  padding: 4px 8px;
+  border-radius: 4px;
+  background: rgba(255, 0, 0, 0.308);
+}
+
+.modal .close-btn:hover {
+  background: rgba(255, 0, 0, 0.797);
+}
+
+.modal .close-btn:focus {
+  outline: 2px solid #888;
+}
+
+.secrets table {
+  width: 90%;
+  border-collapse: collapse;
+  margin-top: 10px;
+}
+
+.secrets th,
+.secrets td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+.secrets th {
+  background-color: #f5f5f5;
+  font-weight: bold;
+}
+
+.secrets tr:nth-child(even) {
+  background-color: #fafafa;
+}
+
+.copy-btn {
+  margin-left: 10px;
+  padding: 2px 6px;
+  font-size: 12px;
+  cursor: pointer;
+}

src/routes/Recipes/RecipeForm.tsx

@@ -0,0 +1,155 @@
+import { useState, useEffect } from "react";
+import { apiService } from '../../services/api';
+import type { AbraServer, AbraAppSecret } from '../../types';
+import './RecipeForm.scss';
+
+
+function RecipeForm({ recipe, onClose }) {
+  const [loading, setLoading] = useState(true);
+  const [submitted, setSubmitted] = useState(false);
+  const [servers, setServers] = useState<AbraServer[]>([]);
+  const [secretData, setSecretData] = useState<AbraAppSecret[]>([]);
+  const [error, setError] = useState('');
+  
+  useEffect(() => {
+      const fetchData = async () => {
+        try {
+          if (servers.length === 0) {
+            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({
+    server: "",
+    domain: "",
+    chaos: false,
+    secrets: false,
+  });
+
+  const handleChange = (e) => {
+    const {name, type, value, checked} = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: type === "checkbox" ? checked : value,
+    }));
+    console.log(formData);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    console.log("Submitting:", formData);
+    setSubmitted(true);
+    const generatedSecrets = await apiService.newApp(recipe.name, formData);
+    setSecretData(generatedSecrets);
+  };
+
+  return (
+    <div className="modal">
+      <button className="close-btn" onClick={onClose}>x</button>
+      {(secretData.length === 0 && submitted) && (
+        <p> Creating new app...</p> 
+      )
+      }
+      {(secretData.length > 0 && submitted) && (
+        <div className="secrets">
+          <table>
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              {secretData.map((secret) => (
+                <tr key={secret.name}>
+                  <td>{secret.name}</td>
+                  <td>
+                    <span>{secret.value}</span>
+                    <button
+                      className="copy-btn"
+                      onClick={() => navigator.clipboard.writeText(secret.value)}
+                    >
+                      Copy
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+      {(submitted === false) && 
+        <form onSubmit={handleSubmit}>
+          <h2>{recipe.name}</h2>
+          { loading ? (<p> Loading servers...</p> 
+          ) : (
+          <div>
+            <label>
+                Choose a server to deploy to: 
+                <select
+                  name="server"
+                  value={formData.server || ""}
+                  onChange={handleChange}
+                >
+                  <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.domain}
+                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>
+        </form>
+      }
+    </div>
+  );
+}
+
+export default RecipeForm;

src/routes/Recipes/Recipes.scss

@@ -0,0 +1,170 @@
+@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;
+}

src/routes/Recipes/Recipes.tsx

@@ -0,0 +1,196 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Header } from '../../components/Header/Header';
+import { Loader } from '../../components/Loader/Loader';
+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 = false;
+
+  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">
+            <Loader />
+            <div>Loading recipes</div>
+          </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 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/Server.scss

@@ -1,68 +1,14 @@
-@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 {
-  min-height: 100vh;
+  @extend .page-wrapper;
-  background-color: $bg-secondary;
 }
 
 .server-detail-content {
-  max-width: 1600px;
+  @extend .page-content;
-  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
@@ -100,7 +46,7 @@
   }
 }
 
-// Action buttons
+// Action buttons (shared with App view, could be moved to global)
 .action-btn {
   padding: $spacing-sm $spacing-lg;
   border: 2px solid $border-color;
@@ -139,7 +85,7 @@
     border-color: $border-color;
 
     &:hover:not(:disabled) {
-      background: darken($bg-secondary, 5%);
+      background: color.adjust($bg-secondary, $lightness: -10%);
     }
   }
 
@@ -149,7 +95,7 @@
     border-color: $error;
 
     &:hover:not(:disabled) {
-      background: darken($error, 10%);
+      background: color.adjust($error, $lightness: -10%);
     }
   }
 }
@@ -159,7 +105,7 @@
   @extend .secondary;
 }
 
-// Badges
+// Badges - host badge is specific to server view
 .host-badge {
   display: inline-flex;
   align-items: center;
@@ -179,56 +125,12 @@
   gap: $spacing-xs;
   padding: $spacing-xs $spacing-md;
   background: rgba($warning, 0.1);
-  color: darken($warning, 20%);
+  background: color.adjust($error, $lightness: -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;
@@ -288,11 +190,11 @@
     color: $text-primary;
 
     &.warning {
-      color: darken($warning, 10%);
+      background: color.adjust($warning, $lightness: -10%);
     }
 
     &.chaos {
-      color: darken($info, 10%);
+      background: color.adjust($info, $lightness: -10%);
     }
   }
 
@@ -405,18 +307,12 @@
     }
 
     &.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;
@@ -461,4 +357,4 @@
       }
     }
   }
-}
+}

src/routes/Servers/Server.tsx

@@ -1,8 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { Header } from '../../../components/Header/Header';
+import { Header } from '../../components/Header/Header';
-import { apiService } from '../../../services/api';
+import { Loader } from '../../components/Loader/Loader';
-import type { AbraServer, ServerAppsResponse } from '../../../types';
+import { Terminal } from '../../components/Terminal/Terminal';
+import { apiService } from '../../services/api';
+import type { AbraServer, ServerAppsResponse } from '../../types';
+import type { LogEntry } from '../../services/mockApi';
 import './Server.scss';
 
 interface ServerWithApps extends AbraServer {
@@ -22,18 +25,21 @@ export const Server: React.FC = () => {
   const [loading, setLoading] = useState(true);
   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 = false;
 
   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();
           
-          // Find the server
           const foundServer = serversData.find(s => s.name === serverName);
           const serverApps = appsData[serverName || ''];
           
@@ -51,7 +57,6 @@ export const Server: React.FC = () => {
             setError('Server not found');
           }
         } else {
-          // Real API call
           const appsData = await apiService.getAppsGrouped();
           const serversData = await apiService.getServers();
           
@@ -86,11 +91,39 @@ export const Server: React.FC = () => {
     if (!server) return;
     
     setActionLoading(action);
+    setTerminalActive(true);
+    setTerminalLogs([]);
+    
     try {
-      console.log(`Action: ${action} on server ${server.name}`);
+      if (isMockMode) {
-      // Add actual server actions here
+        const { mockApiService } = await import('../../services/mockApi');
+        
+        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);
+      setTerminalLogs(prev => [...prev, {
+        type: 'error',
+        text: `❌ Error: ${err instanceof Error ? err.message : 'Action failed'}`,
+        timestamp: new Date()
+      }]);
     } finally {
       setActionLoading(null);
     }
@@ -101,7 +134,10 @@ export const Server: React.FC = () => {
       <div className="server-detail-page">
         <Header />
         <main className="server-detail-content">
-          <div className="loading">Loading server...</div>
+          <div className="loading">
+            <Loader />
+            <div> Loading server</div>
+          </div>
         </main>
       </div>
     );
@@ -128,12 +164,13 @@ export const Server: React.FC = () => {
     <div className="server-detail-page">
       <Header />
       <main className="server-detail-content">
-        <div className="breadcrumb">
+        <div className="back-navigation">
-          <button onClick={() => navigate('/servers')} className="breadcrumb-link">
+          <button 
-            Servers
+            onClick={() => navigate(`/servers`)}
+            className="server-link"
+          >
+             ← Back to Servers
           </button>
-          <span className="breadcrumb-separator">/</span>
-          <span className="breadcrumb-current">{server.name}</span>
         </div>
 
         <div className="server-header">
@@ -153,20 +190,27 @@ export const Server: React.FC = () => {
             <button 
               className="action-btn secondary"
               onClick={() => handleAction('refresh')}
-              disabled={actionLoading === 'refresh'}
+              disabled={!!actionLoading}
             >
               {actionLoading === 'refresh' ? 'Refreshing...' : 'Refresh'}
             </button>
             <button 
-              className="action-btn primary"
+              className="action-btn"
               onClick={() => handleAction('deploy-all')}
-              disabled={actionLoading === 'deploy-all'}
+              disabled={!!actionLoading}
             >
               {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">
@@ -241,10 +285,10 @@ export const Server: React.FC = () => {
                             {app.status}
                           </span>
                           {app.chaos === 'true' && (
-                            <span className="chaos-badge" title="Chaos mode"></span>
+                            <span className="chaos-badge">☠️</span>
                           )}
                           {app.upgrade !== 'latest' && (
-                            <span className="upgrade-badge" title="Upgrade available"></span>
+                            <span className="upgrade-badge">⬆️</span>
                           )}
                         </div>
                       </div>
@@ -278,7 +322,7 @@ export const Server: React.FC = () => {
                 <button 
                   className="action-list-item"
                   onClick={() => handleAction('refresh')}
-                  disabled={actionLoading === 'refresh'}
+                  disabled={!!actionLoading}
                 >
                   <span className="action-text">Refresh Server Info</span>
                 </button>
@@ -286,7 +330,7 @@ export const Server: React.FC = () => {
                 <button 
                   className="action-list-item"
                   onClick={() => handleAction('deploy-all')}
-                  disabled={actionLoading === 'deploy-all'}
+                  disabled={!!actionLoading}
                 >
                   <span className="action-text">Deploy All Apps</span>
                 </button>
@@ -294,26 +338,10 @@ export const Server: React.FC = () => {
                 <button 
                   className="action-list-item"
                   onClick={() => handleAction('upgrade-all')}
-                  disabled={actionLoading === 'upgrade-all' || server.upgradeCount === 0}
+                  disabled={!!actionLoading || 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>
 
@@ -322,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>
@@ -347,4 +375,4 @@ export const Server: React.FC = () => {
       </main>
     </div>
   );
-};
+};

src/routes/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 {
@@ -169,9 +169,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/Servers/Servers.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Header } from '../../../components/Header/Header';
+import { Header } from '../../components/Header/Header';
-import { apiService } from '../../../services/api';
+import { Loader } from '../../components/Loader/Loader';
-import type { AbraServer, ServerAppsResponse } from '../../../types';
+import { apiService } from '../../services/api';
+import type { AbraServer, ServerAppsResponse } from '../../types';
 import './Servers.scss';
 
 interface ServerWithStats extends AbraServer {
@@ -20,59 +21,46 @@ export const Servers: React.FC = () => {
   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';
+  const isMockMode = false;
 
   useEffect(() => {
     const fetchData = async () => {
       try {
+        let serversData, appsData;
+        
         if (isMockMode) {
-          const { mockApiService } = await import('../../../services/mockApi');
+          const { mockApiService } = await import('../../services/mockApi');
-          const [serversData, appsData] = await Promise.all([
+          [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([
+          [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);
         }
+        
+        // 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);
@@ -94,33 +82,42 @@ export const Servers: React.FC = () => {
 
   // Filter and sort servers
   const filteredServers = useMemo(() => {
-    const filtered = servers.filter(server =>
+  const filtered = servers.filter(server => {
+    const matchesSearch =
       server.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      server.host.toLowerCase().includes(searchTerm.toLowerCase())
+      server.host.toLowerCase().includes(searchTerm.toLowerCase());
-    );
+    const matchesUpgrades = !showUpgradesOnly || server.upgradeCount > 0;
+    return matchesSearch && matchesUpgrades;
+  });
 
-    // Sort
+  filtered.sort((a, b) => {
-    filtered.sort((a, b) => {
+    switch (sortBy) {
-      switch (sortBy) {
+      case 'apps':
-        case 'apps':
+        return b.appCount - a.appCount;
-          return b.appCount - a.appCount;
+      case 'name':
-        case 'upgrades':
+      default:
-          return b.upgradeCount - a.upgradeCount;
+        return a.name.localeCompare(b.name);
-        case 'name':
+    }
-        default:
+  });
-          return a.name.localeCompare(b.name);
-      }
-    });
 
-    return filtered;
+  return filtered;
-  }, [servers, searchTerm, sortBy]);
+}, [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>
+          <div className="loading">
+            <Loader />
+            <div> Loading servers</div>
+          </div>
         </main>
       </div>
     );
@@ -146,36 +143,53 @@ export const Servers: React.FC = () => {
           <p className="subtitle">Managing {stats.totalServers} servers with {stats.totalApps} applications</p>
         </div>
 
-        {/* Stats Overview */}
+        {/* Compact Stats Row */}
-        <div className="stats-grid">
+        <div className="stats-row">
-          <div className="stat-card">
+          <button
-            <div className="stat-icon"></div>
+            className="stat-chip"
-            <div className="stat-info">
+            onClick={resetFilters}
-              <p className="stat-number">{stats.totalServers}</p>
+            title="Click to reset filters"
-              <p className="stat-label">Total Servers</p>
+          >
-            </div>
+            <span className="stat-label">Servers</span>
-          </div>
+            <span className="stat-value">{stats.totalServers}</span>
-          <div className="stat-card">
+          </button>
-            <div className="stat-icon"></div>
+
-            <div className="stat-info">
+          <button
-              <p className="stat-number">{stats.totalApps}</p>
+            className="stat-chip"
-              <p className="stat-label">Total Apps</p>
+            onClick={() => navigate('/apps')}
-            </div>
+            title="View all apps"
-          </div>
+          >
-          <div className="stat-card upgrade">
+            <span className="stat-label">Apps</span>
-            <div className="stat-icon"></div>
+            <span className="stat-value">{stats.totalApps}</span>
-            <div className="stat-info">
+          </button>
-              <p className="stat-number">{stats.totalUpgrades}</p>
+
-              <p className="stat-label">Apps Need Upgrade</p>
+          <button
-            </div>
+            className={`stat-chip ${showUpgradesOnly ? 'active' : ''}`}
-          </div>
+            onClick={() => setShowUpgradesOnly(prev => !prev)}
-          <div className="stat-card chaos">
+            title="Click to filter by servers with upgrades"
-            <div className="stat-icon"></div>
+            disabled={stats.totalUpgrades === 0}
-            <div className="stat-info">
+          >
-              <p className="stat-number">{stats.totalChaos}</p>
+            <span className="stat-label">Upgrades</span>
-              <p className="stat-label">Chaos Apps</p>
+            <span className="stat-value">{stats.totalUpgrades}</span>
-            </div>
+          </button>
-          </div>
+
+          <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 */}
@@ -187,12 +201,6 @@ export const Servers: React.FC = () => {
             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 */}
@@ -233,7 +241,7 @@ export const Servers: React.FC = () => {
                   {server.upgradeCount > 0 && (
                     <div className="stat-row highlight">
                       <span className="stat-label">
-                        <span className="upgrade-icon">⬆️</span> Need Upgrade
+                        Need Upgrade
                       </span>
                       <span className="stat-value">{server.upgradeCount}</span>
                     </div>
@@ -241,37 +249,15 @@ export const Servers: React.FC = () => {
                   {server.chaosCount > 0 && (
                     <div className="stat-row chaos-row">
                       <span className="stat-label">
-                        <span className="chaos-icon">☠️</span> Chaos Mode
+                        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>
@@ -288,4 +274,4 @@ export const Servers: React.FC = () => {
       </main>
     </div>
   );
-};
+};

src/services/api.ts

@@ -1,15 +1,24 @@
-import type { AbraApp, AbraServer, AuthResponse, LoginCredentials, User } from '../types';
+import type { AbraServer, AbraRecipe, ServerAppsResponse, AbraAppService, DeployEvent, AbraAppSecret, File } from '../types';
+
+// Log entry type
+export type LogEntry = {
+  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 = {}
@@ -19,10 +28,6 @@ class ApiService {
       ...options.headers,
     };
 
-    if (this.token) {
-      headers['Authorization'] = `Bearer ${this.token}`;
-    }
-
     const response = await fetch(`${API_BASE_URL}${endpoint}`, {
       ...options,
       headers,
@@ -32,57 +37,178 @@ class ApiService {
       const error = await response.json().catch(() => ({ message: 'An error occurred' }));
       throw new Error(error.message || `HTTP ${response.status}`);
     }
+    if (response.status === 204) {
+      return undefined as T;
+    }
 
-    return response.json();
+    const contentType = response.headers.get('content-type');
+
+    if (contentType?.includes('application/json')) {
+      return response.json();
+    }
+    return response.text() as unknown as T;
   }
 
-  // Auth methods
+  private stream<T>(
-  async login(credentials: LoginCredentials): Promise<AuthResponse> {
+    endpoint: string,
-    const response = await this.request<AuthResponse>('/auth/login', {
+    handlers: {
+      onMessage: (data: T) => void;
+      onError?: (err: any) => void;
+      onOpen?: () => void;
+      parser?: (raw: string) => T;
+    }
+  ) {
+    const es = new EventSource(`${API_BASE_URL}${endpoint}`);
+
+    es.onopen = () => {
+      handlers.onOpen?.();
+    };
+    es.onmessage = (event) => {
+      try {
+        const data = handlers.parser
+          ? handlers.parser(event.data)
+          : (event.data as unknown as T);
+
+        handlers.onMessage(data);
+      } catch (err) {
+        handlers.onError?.(err);
+      }
+    };
+    es.onerror = (err) => {
+      handlers.onError?.(err);
+      es.close();
+    };
+    return () => es.close();
+  }
+  // Get Logs for service
+  getLogs(appName: string, serviceName: string, msgHandler: (data: String) => void) {
+    return this.stream(`/apps/${appName}/${serviceName}/logs`, {onMessage: msgHandler})
+  }
+
+  async getConfig(appName: string): Promise<string> {
+    const file = await this.request<File>(`/apps/${appName}/config`)
+    return file.content
+  }
+
+  async writeConfig(appName: string, code: string): Promise<void> {
+    const file : File = { content: code };
+    return this.request<void>(`/apps/${appName}/config`, {
       method: 'POST',
-      body: JSON.stringify(credentials),
+      headers: {
-    });
+        'Accept': 'application/json'
-
+      },
-    this.token = response.token;
+      body: JSON.stringify(file),
-    localStorage.setItem('auth_token', response.token);
+    })
-    return response;
   }
 
-  async logout(): Promise<void> {
-    this.token = null;
-    localStorage.removeItem('auth_token');
-  }
 
-  async getCurrentUser(): Promise<User> {
+  // Get all apps grouped by server
-    return this.request<User>('/auth/me');
-  }
-
-  // Abra CLI wrapper methods
   async getAppsGrouped(): Promise<ServerAppsResponse> {
-    return this.request<ServerAppsResponse>('/abra/apps');
+    return this.request<ServerAppsResponse>('/apps');
   }
 
+  // Get all servers
   async getServers(): Promise<AbraServer[]> {
-    return this.request<AbraServer[]>('/abra/servers');
+    return this.request<AbraServer[]>('/servers');
+  }
+  // Get services for app
+  async getServices(appName: string): Promise<AbraAppService[]> {
+    return this.request<AbraAppService[]>(`/apps/${appName}/services`);
   }
 
+  // App actions with log streaming (websocket future)
   async deployApp(appName: string): Promise<void> {
-    return this.request(`/abra/apps/${appName}/deploy`, {
+    return this.request<void>(`/apps/${appName}/deploy`, {
       method: 'POST',
     });
   }
-
+  deployLogs(appName: string, msgHandler: (data: DeployEvent) => void) {
-  async stopApp(appName: string): Promise<void> {
+    return this.stream(`/apps/${appName}/deploy`, {parser: JSON.parse, onMessage: msgHandler})
-    return this.request(`/abra/apps/${appName}/stop`, {
-      method: 'POST',
-    });
   }
 
-  async startApp(appName: string): Promise<void> {
+
-    return this.request(`/abra/apps/${appName}/start`, {
+  async stopApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const response = await this.request<{ logs: any[] }>(`/apps/${appName}/stop`, {
       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> {
+    const response = await this.request<{ logs: any[] }>(`/apps/${appName}/upgrade`, {
+      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));
+    }
+  }
+  async newApp(appName: string, formData: Object): Promise<AbraSecret[]> {
+    const response = await this.request<AbraSecret[]>(`/apps/${appName}/new`, {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json'
+      },
+      body: JSON.stringify(formData)
+    });
+    return response
+  }
+
+  // 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[]>('/catalogue');
   }
 }
+    
 
 export const apiService = new ApiService();

src/services/mock-logs.json

@@ -0,0 +1,326 @@
+{
+  "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/mockApi.ts

@@ -1,10 +1,69 @@
-import type { AbraServer, ServerAppsResponse } from '../types';
+import type { AbraServer, AbraRecipe, ServerAppsResponse } from '../types';
 import appsData from './mock-apps.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));
 
+// 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> {
     await delay(500);
@@ -16,18 +75,71 @@ export const mockApiService = {
     return serversData as AbraServer[];
   },
 
-  async deployApp(appName: string): Promise<void> {
+  async deployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
-    await delay(1000);
+    const logs = processLogs('deploy', { appName });
-    console.log(`Mock: Deploying app ${appName}`);
+    
+    for (const log of logs) {
+      await delay(200);
+      onLog?.(log);
+    }
   },
 
-  async stopApp(appName: string): Promise<void> {
+  async stopApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
-    await delay(500);
+    const logs = processLogs('stop', { appName });
-    console.log(`Mock: Stopping app ${appName}`);
+    
+    for (const log of logs) {
+      await delay(150);
+      onLog?.(log);
+    }
   },
 
-  async startApp(appName: string): Promise<void> {
+  async upgradeApp(appName: string, version: string, onLog?: (log: LogEntry) => void): Promise<void> {
-    await delay(500);
+    const logs = processLogs('upgrade', { appName, version });
-    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,19 +1,3 @@
-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;
@@ -52,4 +36,83 @@ export interface AppWithServer extends AbraApp {
     appCount: number;
     upgradeCount: number;
   };
+}
+
+export interface AbraAppService {
+  service: string;
+  chaos: boolean;
+  created: string;
+  image: string;
+  ports: string;
+  state: string;
+  status: string;
+  version: string;
+}
+export interface AbraServiceState {
+  name: string;
+  err: string;
+  id: string;
+  status: string;
+  retries: number;
+  health: string;
+  rollback: boolean;
+  failed: boolean;
+}
+export interface DeployState {
+  count: number;
+  total: number;
+  failed: boolean;
+  quit: boolean;
+}
+
+export type DeployEvent = 
+  | {
+    type: "service";
+    data: AbraServiceState;
+  }
+  | {
+    type: "done";
+    data: DeployState;
+  }
+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;
+}
+
+export interface AbraAppSecret {
+  name: string;
+  version: string;
+  value: string;
+}
+
+export interface File {
+  content: string;
 }