Merge pull request 'preload fonts' (#15) from dev into main

Reviewed-on: #15

.gitignore

@@ -12,7 +12,6 @@ pnpm-lock.yaml
 dist
 dist-ssr
 *.local
-design-system.html 
 
 # Editor directories and files
 .vscode/*

README.md

@@ -10,7 +10,6 @@ with SCSS.
 
 - Install dependencies (pnpm is recommended):
 
-```
 pnpm install
 pnpm dev
 

src/App.tsx

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

src/assets/scss/_fonts.scss

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

src/assets/scss/_global.scss

@@ -1,18 +1,12 @@
-@use "./variables" as *;
-@use "./mixins" as *;
+@use './variables' as *;
+@use './mixins' as *;
 
-* {
-  box-sizing: border-box;
-}
 
 body {
   margin: 0;
   padding: 0;
   width: 100%;
   min-height: 100vh;
-  font-family: $font-family-body;
-  color: $text-primary;
-  background: linear-gradient(180deg, $bg-secondary 0%, #f7f7f7 100%);
 }
 
 #root {
@@ -20,13 +14,6 @@ body {
   min-height: 100vh;
 }
 
-button,
-input,
-select,
-textarea {
-  font: inherit;
-}
-
 // global page layout styles
 .page-wrapper {
   min-height: 100vh;
@@ -45,11 +32,8 @@ textarea {
 
 .page-header {
   margin-bottom: $spacing-2xl;
-  padding-bottom: $spacing-lg;
-  border-bottom: 1px solid $border-color;
 
   h1 {
-    font-family: $font-family-heading;
     font-size: $font-size-3xl;
     margin: 0 0 $spacing-sm;
     color: $text-primary;
@@ -92,9 +76,7 @@ textarea {
   align-items: center;
   gap: $spacing-lg;
   padding: $spacing-xl;
-  transition:
-    transform $transition-base,
-    box-shadow $transition-base;
+  transition: transform $transition-base, box-shadow $transition-base;
 
   &:hover {
     transform: translateY(-2px);
@@ -147,7 +129,6 @@ textarea {
   gap: $spacing-md;
   flex-wrap: wrap;
   margin-bottom: $spacing-xl;
-  border-radius: $radius-xl;
 
   @media (max-width: 768px) {
     flex-direction: column;
@@ -158,10 +139,10 @@ textarea {
     flex: 1;
     min-width: 250px;
     padding: $spacing-sm $spacing-md;
-    border: 1px solid $border-color;
+    border: 2px solid $border-color;
     border-radius: $radius-md;
     font-size: $font-size-base;
-    transition: border-color $transition-base, box-shadow $transition-base;
+    transition: border-color $transition-base;
     color: $text-primary;
 
     &::placeholder {
@@ -170,25 +151,23 @@ textarea {
 
     &:focus {
       outline: none;
-      border-color: $primary-dark;
-      box-shadow: 0 0 0 3px $accent-blue-soft;
+      border-color: $primary;
     }
   }
 
   select {
     padding: $spacing-sm $spacing-md;
-    border: 1px solid $border-color;
+    border: 2px solid $border-color;
     border-radius: $radius-md;
     font-size: $font-size-base;
     background-color: $bg-primary;
     color: $text-primary;
     cursor: pointer;
-    transition: border-color $transition-base, box-shadow $transition-base;
+    transition: border-color $transition-base;
 
     &:focus {
       outline: none;
-      border-color: $primary-dark;
-      box-shadow: 0 0 0 3px $accent-blue-soft;
+      border-color: $primary;
     }
   }
 
@@ -220,24 +199,20 @@ textarea {
   font-size: $font-size-xs;
   font-weight: $font-weight-semibold;
   text-transform: capitalize;
-  border: 1px solid transparent;
 
   &.status-deployed {
     background-color: rgba($success, 0.1);
     color: $success;
-    border-color: rgba($success, 0.2);
   }
 
   &.status-stopped {
     background-color: rgba($text-muted, 0.1);
     color: $text-muted;
-    border-color: rgba($text-muted, 0.2);
   }
 
   &.status-error {
     background-color: rgba($error, 0.1);
     color: $error;
-    border-color: rgba($error, 0.2);
   }
 }
 
@@ -249,19 +224,16 @@ textarea {
   border-radius: $radius-sm;
   font-size: $font-size-sm;
   font-weight: $font-weight-medium;
-  border: 1px solid transparent;
 }
 
 .recipe-badge {
-  background-color: $accent-blue-soft;
-  color: $primary-dark;
-  border-color: rgba($primary-dark, 0.12);
+  background-color: rgba($info, 0.1);
+  color: $info;
 }
 
 .server-badge {
-  background-color: $brand-pink-soft;
-  color: $primary;
-  border-color: rgba($primary, 0.12);
+  background-color: rgba($text-secondary, 0.1);
+  color: $text-secondary;
 }
 
 // Ensure stat-chip shows primary-dark outline on hover and when active

src/assets/scss/_mixins.scss

@@ -1,4 +1,4 @@
-@use "variables" as *;
+@use 'variables' as *;
 
 // Flexbox center
 @mixin flex-center {
@@ -9,30 +9,20 @@
 
 // Responsive breakpoints
 @mixin respond-to($breakpoint) {
-  @if $breakpoint == "sm" {
-    @media (min-width: $breakpoint-sm) {
-      @content;
-    }
-  } @else if $breakpoint == "md" {
-    @media (min-width: $breakpoint-md) {
-      @content;
-    }
-  } @else if $breakpoint == "lg" {
-    @media (min-width: $breakpoint-lg) {
-      @content;
-    }
-  } @else if $breakpoint == "xl" {
-    @media (min-width: $breakpoint-xl) {
-      @content;
-    }
+  @if $breakpoint == 'sm' {
+    @media (min-width: $breakpoint-sm) { @content; }
+  } @else if $breakpoint == 'md' {
+    @media (min-width: $breakpoint-md) { @content; }
+  } @else if $breakpoint == 'lg' {
+    @media (min-width: $breakpoint-lg) { @content; }
+  } @else if $breakpoint == 'xl' {
+    @media (min-width: $breakpoint-xl) { @content; }
   }
 }
 
 // Card style
 @mixin card {
   background: $bg-primary;
-  border: 1px solid $border-color;
-  border-radius: $radius-lg;
   box-shadow: $shadow-md;
   padding: $spacing-xl;
 }
@@ -56,9 +46,7 @@
 
 /// Hover lift used by dashboard list cards, server grid cards, and similar surfaces
 @mixin card-hover-lift($translate-y: -2px, $hover-shadow: $shadow-lg) {
-  transition:
-    transform $transition-base,
-    box-shadow $transition-base;
+  transition: transform $transition-base, box-shadow $transition-base;
 
   &:hover {
     transform: translateY($translate-y);
@@ -130,17 +118,15 @@
 // Button base
 @mixin button-base {
   padding: $spacing-sm $spacing-lg;
-  border: 1px solid transparent;
+  border: none;
   border-radius: $radius-md;
   font-weight: $font-weight-semibold;
   cursor: pointer;
   transition: all $transition-base;
-  box-shadow: $shadow-sm;
-
+  
   &:disabled {
     opacity: 0.6;
     cursor: not-allowed;
-    box-shadow: none;
   }
 }
 
@@ -201,13 +187,8 @@
 }
 
 // Reusable action button styles; accepts border width and radius
-@mixin action-btn(
-  $border-width: 1px,
-  $radius: $radius-sm,
-  $padding: $spacing-xs $spacing-md,
-  $font-size: $font-size-sm
-) {
-  background: $bg-primary;
+@mixin action-btn($border-width: 1px, $radius: $radius-sm, $padding: $spacing-xs $spacing-md, $font-size: $font-size-sm) {
+  background: none;
   border: $border-width solid $border-color;
   padding: $padding;
   border-radius: $radius;
@@ -216,18 +197,16 @@
   color: $text-primary;
   font-weight: $font-weight-medium;
   transition: all $transition-base;
-  box-shadow: $shadow-sm;
 
   &:hover {
-    background-color: $accent-blue-soft;
+    background-color: rgba($primary, 0.05);
     color: $text-primary;
     transform: translateY(-1px);
-    border-color: $primary-dark;
+    border-color: $primary;
   }
 
   &:disabled {
     opacity: 0.6;
     cursor: not-allowed;
-    box-shadow: none;
   }
-}
+}

src/assets/scss/_variables.scss

@@ -1,12 +1,7 @@
 // Colors
-$brand-pink: #ff4f88;
-$accent-blue: #6a9cff;
-$brand-pink-soft: rgba(255, 79, 136, 0.12);
-$accent-blue-soft: rgba(106, 156, 255, 0.12);
-
-$primary: $brand-pink;
-$primary-dark: $accent-blue;
-$primary-light: $brand-pink-soft;
+$primary: #EFEFEF;
+$primary-dark: #6A9CFF;
+$primary-light: #ff4f88;
 $secondary: #363636;
 
 $success: #10b981;
@@ -15,7 +10,8 @@ $error: #ef4444;
 $info: #3b82f6;
 
 $text-primary: #363636;
-$text-secondary: #4a4a4a;
+$text-secondary: #4a4a4a
+;
 $text-muted: #999;
 
 $bg-primary: #ffffff;
@@ -35,21 +31,11 @@ $spacing-3xl: 4rem;
 
 // Typography
 
-$font-family-body:
-  "Manrope",
-  -apple-system,
-  BlinkMacSystemFont,
-  "Segoe UI",
-  "Roboto",
-  "Oxygen",
-  "Ubuntu",
-  "Cantarell",
-  "Fira Sans",
-  "Droid Sans",
-  "Helvetica Neue",
-  sans-serif;
+$font-family-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+'Helvetica Neue', sans-serif;
 
-$font-family-heading: "Lora", serif;
+$font-family-heading: 'Lora', serif;
 
 $font-size-xs: 0.75rem;
 $font-size-sm: 0.875rem;
@@ -86,4 +72,4 @@ $transition-slow: 0.3s ease;
 $breakpoint-sm: 640px;
 $breakpoint-md: 768px;
 $breakpoint-lg: 1024px;
-$breakpoint-xl: 1280px;
+$breakpoint-xl: 1280px;

src/assets/scss/main.scss

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

src/components/Header/Header.tsx

@@ -1,7 +1,8 @@
-import React from "react";
-import { useNavigate } from "react-router-dom";
-import "./_Header.scss";
-import logo from "../../assets/coopcloud_logo_grey.svg";
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import './_Header.scss';
+import logo from '../../assets/coopcloud_logo_grey.svg';
+
 
 interface HeaderProps {
   children: React.ReactNode;
@@ -9,24 +10,23 @@ interface HeaderProps {
 
 export const Header: React.FC<HeaderProps> = ({ children }) => {
   const navigate = useNavigate();
-  return (
-    <header className="layout-header">
-      <div className="header-content">
-        <h1 onClick={() => navigate("/dashboard")} className="logo">
-          <img className="logo" src={logo} />
-        </h1>
-        <nav className="nav">
-          <button onClick={() => navigate("/apps")} className="nav-link">
-            Apps
-          </button>
-          <button onClick={() => navigate("/servers")} className="nav-link">
-            Servers
-          </button>
-          <button onClick={() => navigate("/recipes")} className="nav-link">
-            Recipes
-          </button>
-        </nav>
-      </div>
-    </header>
-  );
-};
+return(
+<header className="layout-header">
+    <div className="header-content">
+      <h1 onClick={() => navigate('/dashboard')} className="logo">
+        <img className="logo" src={logo}/>
+      </h1>
+      <nav className="nav">
+        <button onClick={() => navigate('/apps')} className="nav-link">
+          Apps
+        </button>
+        <button onClick={() => navigate('/servers')} className="nav-link">
+          Servers
+        </button>
+        <button onClick={() => navigate('/recipes')} className="nav-link">
+          Recipes
+        </button>
+      </nav>
+    </div>
+  </header>
+)}

src/components/Header/_Header.scss

@@ -1,8 +1,8 @@
-@use "../../assets/scss/variables" as *;
-@use "../../assets/scss/mixins" as *;
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
 
 .layout-header {
-  background-color: $brand-pink;
+  background-color: $primary-light;
   color: $text-primary;
   padding: $spacing-lg 0;
   box-shadow: $shadow-lg;
@@ -65,7 +65,7 @@
 
     // Active indicator
     &.active::after {
-      content: "";
+      content: '';
       position: absolute;
       bottom: 0;
       left: 50%;
@@ -80,4 +80,4 @@
       font-size: $font-size-xl;
     }
   }
-}
+}

src/components/Terminal/Terminal.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useRef, useState } from "react";
-import type { LogEntry } from "../../services/mockApi"; // Import from mockApi (or api for real)
-import "./_Terminal.scss";
+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[];
@@ -8,11 +8,7 @@ interface TerminalProps {
   onClose?: () => void;
 }
 
-export const Terminal: React.FC<TerminalProps> = ({
-  logs,
-  isActive,
-  onClose,
-}) => {
+export const Terminal: React.FC<TerminalProps> = ({ logs, isActive, onClose }) => {
   const terminalRef = useRef<HTMLDivElement>(null);
   const [displayedLogs, setDisplayedLogs] = useState<LogEntry[]>([]);
 
@@ -28,17 +24,13 @@ export const Terminal: React.FC<TerminalProps> = ({
 
     const streamLogs = () => {
       if (currentIndex < logs.length) {
-        setDisplayedLogs((prev) => [...prev, logs[currentIndex]]);
+        setDisplayedLogs(prev => [...prev, logs[currentIndex]]);
         currentIndex++;
-
+        
         // Variable delay based on log type
-        const delay =
-          logs[currentIndex - 1]?.type === "command"
-            ? 200
-            : logs[currentIndex - 1]?.type === "output"
-              ? 100
-              : 300;
-
+        const delay = logs[currentIndex - 1]?.type === 'command' ? 200 : 
+                     logs[currentIndex - 1]?.type === 'output' ? 100 : 300;
+        
         setTimeout(streamLogs, delay);
       }
     };
@@ -58,11 +50,11 @@ export const Terminal: React.FC<TerminalProps> = ({
   }
 
   const formatTime = (date: Date) => {
-    return date.toLocaleTimeString("en-US", {
-      hour12: false,
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
+    return date.toLocaleTimeString('en-US', { 
+      hour12: false, 
+      hour: '2-digit', 
+      minute: '2-digit', 
+      second: '2-digit' 
     });
   };
 
@@ -77,18 +69,14 @@ export const Terminal: React.FC<TerminalProps> = ({
         <div className="terminal-title">abra CLI</div>
         <div className="terminal-spacer"></div>
       </div>
-
+      
       <div className="terminal-content" ref={terminalRef}>
-        {displayedLogs
-          .filter((log) => log && log.type)
-          .map((log, index) => (
-            <div key={index} className={`terminal-line terminal-${log.type}`}>
-              <span className="terminal-timestamp">
-                [{formatTime(log.timestamp)}]
-              </span>
-              <span className="terminal-text">{log.text}</span>
-            </div>
-          ))}
+        {displayedLogs.filter(log => log && log.type).map((log, index) => (
+          <div key={index} className={`terminal-line terminal-${log.type}`}>
+            <span className="terminal-timestamp">[{formatTime(log.timestamp)}]</span>
+            <span className="terminal-text">{log.text}</span>
+          </div>
+        ))}
         {isActive && displayedLogs.length > 0 && (
           <div className="terminal-cursor">▊</div>
         )}

src/components/Terminal/_Terminal.scss

@@ -1,14 +1,12 @@
-@use "../../assets/scss/variables" as *;
-@use "../../assets/scss/mixins" as *;
+@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;
+  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;
 }
@@ -183,12 +181,10 @@
 }
 
 @keyframes terminal-cursor-blink {
-  0%,
-  50% {
+  0%, 50% {
     opacity: 1;
   }
-  51%,
-  100% {
+  51%, 100% {
     opacity: 0;
   }
 }
@@ -205,4 +201,4 @@
       display: none;
     }
   }
-}
+}

src/index.scss

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

src/main.tsx

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

src/routes/Apps/App.scss

@@ -1,8 +1,9 @@
-@use "../../assets/scss/variables" as *;
-@use "../../assets/scss/mixins" as *;
-@use "../../assets/scss/global" as *;
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
 @use "sass:color";
 
+
 .app-detail-page {
   @extend .page-wrapper;
 }
@@ -73,7 +74,7 @@
     border-color: $error;
 
     &:hover:not(:disabled) {
-      background: color.adjust($error, $lightness: -10%);
+      background: color.adjust($error, $lightness: -10%);    
     }
   }
 }
@@ -142,7 +143,7 @@
   }
 
   .chaos-active {
-    background: color.adjust($info, $lightness: -10%);
+    background: color.adjust($info, $lightness: -10%);    
     font-weight: $font-weight-medium;
   }
 }

src/routes/Apps/App.tsx

@@ -1,55 +1,55 @@
-import React, { useEffect, useState } from "react";
-import { Link, useNavigate, useParams } from "react-router-dom";
-import { Header } from "../../components/Header/Header";
-import { Terminal } from "../../components/Terminal/Terminal";
-import { apiService } from "../../services/api";
-import type { AbraApp } from "../../types";
-import type { LogEntry } from "../../services/mockApi";
-import "./App.scss";
+import React, { useEffect, useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import { Header } from '../../components/Header/Header';
+import { Terminal } from '../../components/Terminal/Terminal';
+import { apiService } from '../../services/api';
+import type { AbraApp } from '../../types';
+import type { LogEntry } from '../../services/mockApi';
+import './App.scss';
 
 export const AppDetail: React.FC = () => {
   const { server, appName } = useParams<{ server: string; appName: string }>();
   const navigate = useNavigate();
-
+  
   const [app, setApp] = useState<AbraApp | null>(null);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState("");
+  const [error, setError] = useState('');
   const [actionLoading, setActionLoading] = useState<string | null>(null);
-
+  
   // Terminal state
   const [terminalLogs, setTerminalLogs] = useState<LogEntry[]>([]);
   const [terminalActive, setTerminalActive] = useState(false);
 
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === "true";
+  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
 
   useEffect(() => {
     const fetchApp = async () => {
       try {
         if (isMockMode) {
-          const { mockApiService } = await import("../../services/mockApi");
+          const { mockApiService } = await import('../../services/mockApi');
           const appsData = await mockApiService.getAppsGrouped();
-
-          const serverApps = appsData[server || ""];
-          const foundApp = serverApps?.apps.find((a) => a.appName === appName);
-
+          
+          const serverApps = appsData[server || ''];
+          const foundApp = serverApps?.apps.find(a => a.appName === appName);
+          
           if (foundApp) {
             setApp(foundApp);
           } else {
-            setError("App not found");
+            setError('App not found');
           }
         } else {
           const appsData = await apiService.getAppsGrouped();
-          const serverApps = appsData[server || ""];
-          const foundApp = serverApps?.apps.find((a) => a.appName === appName);
-
+          const serverApps = appsData[server || ''];
+          const foundApp = serverApps?.apps.find(a => a.appName === appName);
+          
           if (foundApp) {
             setApp(foundApp);
           } else {
-            setError("App not found");
+            setError('App not found');
           }
         }
       } catch (err) {
-        setError(err instanceof Error ? err.message : "Failed to load app");
+        setError(err instanceof Error ? err.message : 'Failed to load app');
       } finally {
         setLoading(false);
       }
@@ -60,56 +60,53 @@ export const AppDetail: React.FC = () => {
 
   const handleAction = async (action: string, version?: string) => {
     if (!app) return;
-
+    
     setActionLoading(action);
     setTerminalActive(true);
     setTerminalLogs([]);
-
+    
     try {
       if (isMockMode) {
-        const { mockApiService } = await import("../../services/mockApi");
-
+        const { mockApiService } = await import('../../services/mockApi');
+        
         const onLog = (log: LogEntry) => {
-          setTerminalLogs((prev) => [...prev, log]);
+          setTerminalLogs(prev => [...prev, log]);
         };
-
+        
         switch (action) {
-          case "deploy":
+          case 'deploy':
             await mockApiService.deployApp(app.appName, onLog);
             break;
-          case "stop":
+          case 'stop':
             await mockApiService.stopApp(app.appName, onLog);
             break;
-          case "upgrade":
+          case 'upgrade':
             if (version) {
               await mockApiService.upgradeApp(app.appName, version, onLog);
             }
             break;
-          case "remove":
+          case 'remove':
             await mockApiService.removeApp(app.appName, onLog);
             break;
         }
       } else {
         // Real API calls
         switch (action) {
-          case "stop":
+          case 'stop':
             await apiService.stopApp(app.appName);
             break;
-          case "deploy":
+          case 'deploy':
             await apiService.deployApp(app.appName);
             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(),
-        },
-      ]);
+      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);
     }
@@ -131,8 +128,8 @@ export const AppDetail: React.FC = () => {
       <div className="app-detail-page">
         <Header />
         <main className="app-detail-content">
-          <div className="error">{error || "App not found"}</div>
-          <button onClick={() => navigate("/apps")} className="back-button">
+          <div className="error">{error || 'App not found'}</div>
+          <button onClick={() => navigate('/apps')} className="back-button">
             Back to Apps
           </button>
         </main>
@@ -140,15 +137,14 @@ export const AppDetail: React.FC = () => {
     );
   }
 
-  const upgradeVersions =
-    app.upgrade !== "latest" ? app.upgrade.split("\n") : [];
+  const upgradeVersions = app.upgrade !== 'latest' ? app.upgrade.split('\n') : [];
 
   return (
     <div className="app-detail-page">
       <Header />
       <main className="app-detail-content">
         <div className="breadcrumb">
-          <button onClick={() => navigate("/apps")} className="breadcrumb-link">
+          <button onClick={() => navigate('/apps')} className="breadcrumb-link">
             Apps
           </button>
           <span className="breadcrumb-separator">/</span>
@@ -160,39 +156,34 @@ export const AppDetail: React.FC = () => {
             <h1>{app.appName}</h1>
             <div className="app-meta">
               <span className="recipe-badge">{app.recipe}</span>
-              <span className={`status-badge status-${app.status}`}>
-                {app.status}
-              </span>
-              {app.chaos === "true" && (
-                <span className="chaos-badge" title="Chaos mode enabled">
-                  {" "}
-                  Chaos
-                </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
+            <button 
               className="action-btn danger"
-              onClick={() => handleAction("stop")}
+              onClick={() => handleAction('stop')}
               disabled={!!actionLoading}
             >
-              {actionLoading === "stop" ? "Stopping..." : "Stop"}
+              {actionLoading === 'stop' ? 'Stopping...' : 'Stop'}
             </button>
-            <button
+            <button 
               className="action-btn primary"
-              onClick={() => handleAction("deploy")}
+              onClick={() => handleAction('deploy')}
               disabled={!!actionLoading}
             >
-              {actionLoading === "deploy" ? "Deploying..." : "Deploy"}
+              {actionLoading === 'deploy' ? 'Deploying...' : 'Deploy'}
             </button>
           </div>
         </div>
 
         {/* Terminal Component */}
-        <Terminal
-          logs={terminalLogs}
+        <Terminal 
+          logs={terminalLogs} 
           isActive={terminalActive}
           onClose={() => setTerminalActive(false)}
         />
@@ -202,7 +193,7 @@ export const AppDetail: React.FC = () => {
           <div className="main-column">
             <section className="info-card">
               <h2>Application Details</h2>
-
+              
               <div className="info-grid">
                 <div className="info-item">
                   <label>App Name</label>
@@ -212,12 +203,7 @@ export const AppDetail: React.FC = () => {
                 <div className="info-item">
                   <label>Domain</label>
                   {app.domain ? (
-                    <a
-                      href={`https://${app.domain}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="link"
-                    >
+                    <a href={`https://${app.domain}`} target="_blank" rel="noopener noreferrer" className="link">
                       {app.domain} ↗
                     </a>
                   ) : (
@@ -250,8 +236,8 @@ export const AppDetail: React.FC = () => {
 
                 <div className="info-item">
                   <label>Chaos Mode</label>
-                  <span className={app.chaos === "true" ? "chaos-active" : ""}>
-                    {app.chaos === "true" ? "☠️ Enabled" : "Disabled"}
+                  <span className={app.chaos === 'true' ? 'chaos-active' : ''}>
+                    {app.chaos === 'true' ? '☠️ Enabled' : 'Disabled'}
                   </span>
                 </div>
               </div>
@@ -259,14 +245,14 @@ export const AppDetail: React.FC = () => {
 
             <section className="info-card">
               <h2>Version Information</h2>
-
+              
               <div className="version-info">
                 <div className="version-current">
                   <label>Current Version</label>
                   <code>{app.version}</code>
                 </div>
 
-                {app.chaosVersion !== "unknown" && (
+                {app.chaosVersion !== 'unknown' && (
                   <div className="version-current">
                     <label>Chaos Version</label>
                     <code>{app.chaosVersion}</code>
@@ -277,22 +263,18 @@ export const AppDetail: React.FC = () => {
                   <div className="version-upgrades">
                     <label>
                       Available Upgrades
-                      <span className="upgrade-count">
-                        {upgradeVersions.length}
-                      </span>
+                      <span className="upgrade-count">{upgradeVersions.length}</span>
                     </label>
                     <div className="upgrade-list">
                       {upgradeVersions.map((version, idx) => (
                         <div key={idx} className="upgrade-item">
                           <code>{version}</code>
-                          <button
+                          <button 
                             className="upgrade-btn"
-                            onClick={() => handleAction("upgrade", version)}
+                            onClick={() => handleAction('upgrade', version)}
                             disabled={!!actionLoading}
                           >
-                            {actionLoading === "upgrade"
-                              ? "Upgrading..."
-                              : "Upgrade"}
+                            {actionLoading === 'upgrade' ? 'Upgrading...' : 'Upgrade'}
                           </button>
                         </div>
                       ))}
@@ -300,8 +282,10 @@ export const AppDetail: React.FC = () => {
                   </div>
                 )}
 
-                {app.upgrade === "latest" && (
-                  <div className="version-latest">✓ Running latest version</div>
+                {app.upgrade === 'latest' && (
+                  <div className="version-latest">
+                    ✓ Running latest version
+                  </div>
                 )}
               </div>
             </section>
@@ -311,31 +295,30 @@ export const AppDetail: React.FC = () => {
           <div className="sidebar-column">
             <section className="info-card">
               <h2>Quick Actions</h2>
-
+              
               <div className="action-list">
-                <button
+
+                <button 
                   className="action-list-item"
-                  onClick={() => handleAction("deploy")}
+                  onClick={() => handleAction('deploy')}
                   disabled={!!actionLoading}
                 >
                   <span className="action-text">Deploy Application</span>
                 </button>
 
-                <button
+                <button 
                   className="action-list-item"
-                  onClick={() => handleAction("stop")}
+                  onClick={() => handleAction('stop')}
                   disabled={!!actionLoading}
                 >
                   <span className="action-text">Stop Application</span>
                 </button>
 
-                <button
+                <button 
                   className="action-list-item danger"
                   onClick={() => {
-                    if (
-                      confirm(`Are you sure you want to remove ${app.appName}?`)
-                    ) {
-                      handleAction("remove");
+                    if (confirm(`Are you sure you want to remove ${app.appName}?`)) {
+                      handleAction('remove');
                     }
                   }}
                   disabled={!!actionLoading}

src/routes/Apps/Apps.scss

@@ -1,6 +1,6 @@
-@use "../../assets/scss/variables" as *;
-@use "../../assets/scss/mixins" as *;
-@use "../../assets/scss/global" as *;
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
 
 // Extend global page wrapper
 .apps-page {
@@ -109,7 +109,7 @@
     color: $primary-dark;
     text-decoration: none;
     transition: color $transition-base;
-
+  
     &:hover {
       color: $primary-light;
       text-decoration: underline;
@@ -117,6 +117,7 @@
   }
 }
 
+
 .no-domain {
   color: $text-muted;
   font-style: italic;
@@ -145,12 +146,7 @@
   gap: $spacing-sm;
 
   .action-btn {
-    @include action-btn(
-      1px,
-      $radius-sm,
-      $spacing-xs $spacing-md,
-      $font-size-sm
-    );
+    @include action-btn(1px, $radius-sm, $spacing-xs $spacing-md, $font-size-sm);
 
     &:hover {
       background-color: $primary;
@@ -168,4 +164,4 @@
       }
     }
   }
-}
+}

src/routes/Apps/Apps.tsx

@@ -1,30 +1,32 @@
+
 // TODOS:
 // make the two filters non-exlusive
 
-import React, { useEffect, useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { Header } from "../../components/Header/Header";
-import { apiService } from "../../services/api";
-import type { AbraApp, AppWithServer, ServerAppsResponse } from "../../types";
-import "./Apps.scss";
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Header } from '../../components/Header/Header';
+import { apiService } from '../../services/api';
+import type { AbraApp, AppWithServer, ServerAppsResponse } from '../../types';
+import './Apps.scss';
 
 export const Apps: React.FC = () => {
   const navigate = useNavigate();
   const [appsData, setAppsData] = useState<ServerAppsResponse | null>(null);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState("");
-  const [searchTerm, setSearchTerm] = useState("");
-  const [filterServer, setFilterServer] = useState<string>("all");
+  const [error, setError] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filterServer, setFilterServer] = useState<string>('all');
   const [showUpgradesOnly, setShowUpgradesOnly] = useState(false);
   const [showChaosOnly, setShowChaosOnly] = useState(false);
-
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === "true";
+  
+  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
 
   useEffect(() => {
     const fetchData = async () => {
       try {
         if (isMockMode) {
-          const { mockApiService } = await import("../../services/mockApi");
+          const { mockApiService } = await import('../../services/mockApi');
           const data = await mockApiService.getAppsGrouped();
           setAppsData(data);
         } else {
@@ -32,7 +34,7 @@ export const Apps: React.FC = () => {
           setAppsData(data);
         }
       } catch (err) {
-        setError(err instanceof Error ? err.message : "Failed to load apps");
+        setError(err instanceof Error ? err.message : 'Failed to load apps');
       } finally {
         setLoading(false);
       }
@@ -44,15 +46,15 @@ export const Apps: React.FC = () => {
   // Flatten and enrich apps data
   const allApps: AppWithServer[] = useMemo(() => {
     if (!appsData) return [];
-
+    
     return Object.entries(appsData).flatMap(([serverName, serverData]) =>
-      serverData.apps.map((app) => ({
+      serverData.apps.map(app => ({
         ...app,
         serverStats: {
           appCount: serverData.appCount,
           upgradeCount: serverData.upgradeCount,
         },
-      })),
+      }))
     );
   }, [appsData]);
 
@@ -64,16 +66,15 @@ export const Apps: React.FC = () => {
 
   // Filter apps (additive filters: upgrades AND chaos can be applied together)
   const filteredApps = useMemo(() => {
-    return allApps.filter((app) => {
-      const matchesSearch =
+    return allApps.filter(app => {
+      const matchesSearch = 
         app.appName.toLowerCase().includes(searchTerm.toLowerCase()) ||
         app.recipe.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        (app.domain || "").toLowerCase().includes(searchTerm.toLowerCase());
-
-      const matchesServer =
-        filterServer === "all" || app.server === filterServer;
-      const matchesChaos = !showChaosOnly || app.chaos === "true";
-      const matchesUpgrade = !showUpgradesOnly || app.upgrade !== "latest";
+        (app.domain || '').toLowerCase().includes(searchTerm.toLowerCase());
+      
+      const matchesServer = filterServer === 'all' || app.server === filterServer;
+      const matchesChaos = !showChaosOnly || app.chaos === 'true';
+      const matchesUpgrade = !showUpgradesOnly || app.upgrade !== 'latest';
 
       return matchesSearch && matchesServer && matchesChaos && matchesUpgrade;
     });
@@ -81,17 +82,15 @@ export const Apps: React.FC = () => {
 
   const stats = useMemo(() => {
     const total = allApps.length;
-    const needsUpgrade = allApps.filter(
-      (app) => app.upgrade !== "latest",
-    ).length;
-    const chaosApps = allApps.filter((app) => app.chaos === "true").length;
+    const needsUpgrade = allApps.filter(app => app.upgrade !== 'latest').length;
+    const chaosApps = allApps.filter(app => app.chaos === 'true').length;
     const totalServers = servers.length;
 
     return { total, needsUpgrade, chaosApps, totalServers };
   }, [allApps, servers]);
 
-  const toggleUpgrades = () => setShowUpgradesOnly((prev) => !prev);
-  const toggleChaos = () => setShowChaosOnly((prev) => !prev);
+  const toggleUpgrades = () => setShowUpgradesOnly(prev => !prev);
+  const toggleChaos = () => setShowChaosOnly(prev => !prev);
 
   if (loading) {
     return (
@@ -121,24 +120,22 @@ export const Apps: React.FC = () => {
       <main className="apps-content">
         <div className="page-header">
           <h1>Applications</h1>
-          <p className="subtitle">
-            {stats.total} apps across {stats.totalServers} servers
-          </p>
+          <p className="subtitle">{stats.total} apps across {stats.totalServers} servers</p>
         </div>
 
         {/* Compact Stats Overview */}
         <div className="stats-row">
           <button
             className="stat-chip"
-            onClick={() => navigate("/servers")}
+            onClick={() => navigate('/servers')}
             title="View servers"
           >
             <span className="stat-label">Servers</span>
             <span className="stat-value">{stats.totalServers}</span>
           </button>
-
+          
           <button
-            className={`stat-chip filter-chip ${showUpgradesOnly ? "active" : ""}`}
+            className={`stat-chip filter-chip ${showUpgradesOnly ? 'active' : ''}`}
             onClick={toggleUpgrades}
             title="Click to toggle apps with upgrades available"
             disabled={stats.needsUpgrade === 0}
@@ -146,9 +143,9 @@ export const Apps: React.FC = () => {
             <span className="stat-label">Upgrades</span>
             <span className="stat-value">{stats.needsUpgrade}</span>
           </button>
-
+          
           <button
-            className={`stat-chip filter-chip ${showChaosOnly ? "active" : ""}`}
+            className={`stat-chip filter-chip ${showChaosOnly ? 'active' : ''}`}
             onClick={toggleChaos}
             title="Click to toggle chaos mode apps"
             disabled={stats.chaosApps === 0}
@@ -156,6 +153,7 @@ export const Apps: React.FC = () => {
             <span className="stat-label">Chaos</span>
             <span className="stat-value">{stats.chaosApps}</span>
           </button>
+          
         </div>
 
         {/* Filters */}
@@ -168,15 +166,10 @@ export const Apps: React.FC = () => {
             className="search-input"
           />
 
-          <select
-            value={filterServer}
-            onChange={(e) => setFilterServer(e.target.value)}
-          >
+          <select value={filterServer} onChange={(e) => setFilterServer(e.target.value)}>
             <option value="all">All Servers</option>
-            {servers.map((server) => (
-              <option key={server} value={server}>
-                {server}
-              </option>
+            {servers.map(server => (
+              <option key={server} value={server}>{server}</option>
             ))}
           </select>
         </div>
@@ -204,12 +197,10 @@ export const Apps: React.FC = () => {
                 </tr>
               ) : (
                 filteredApps.map((app) => (
-                  <tr
+                  <tr 
                     key={`${app.server}/${app.appName}`}
-                    onClick={() =>
-                      navigate(`/apps/${app.server}/${app.appName}`)
-                    }
-                    style={{ cursor: "pointer" }}
+                    onClick={() => navigate(`/apps/${app.server}/${app.appName}`)}
+                    style={{ cursor: 'pointer' }}
                   >
                     <td className="app-name-cell">
                       <span className="app-name">{app.appName}</span>
@@ -219,10 +210,10 @@ export const Apps: React.FC = () => {
                     </td>
                     <td>
                       {app.domain ? (
-                        <a
-                          href={`https://${app.domain}`}
-                          target="_blank"
-                          rel="noopener noreferrer"
+                        <a 
+                          href={`https://${app.domain}`} 
+                          target="_blank" 
+                          rel="noopener noreferrer" 
                           className="domain-link"
                           onClick={(e) => e.stopPropagation()}
                         >
@@ -238,17 +229,12 @@ export const Apps: React.FC = () => {
                     <td>
                       <div className="version-cell">
                         <span className="version">{app.version}</span>
-                        {app.chaos === "true" && (
-                          <span
-                            className="chaos-badge"
-                            title="Chaos mode enabled"
-                          ></span>
+                        {app.chaos === 'true' && (
+                          <span className="chaos-badge" title="Chaos mode enabled"></span>
                         )}
-                        {app.upgrade !== "latest" && (
-                          <span
-                            className="upgrade-available"
-                            title="Upgrade available"
-                          ></span>
+                        {app.upgrade !== 'latest' && (
+                          <span className="upgrade-available" title="Upgrade available">
+                          </span>
                         )}
                       </div>
                     </td>
@@ -296,4 +282,4 @@ export const Apps: React.FC = () => {
       </main>
     </div>
   );
-};
+};

src/routes/Dashboard/Dashboard.tsx

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

src/routes/Dashboard/_Dashboard.scss

@@ -1,6 +1,6 @@
-@use "../../assets/scss/variables" as *;
-@use "../../assets/scss/mixins" as *;
-@use "../../assets/scss/global" as *;
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
 
 // Extend global page wrapper
 .dashboard-page {

src/routes/Recipes/RecipeForm.scss

@@ -1,106 +1,100 @@
-@use "../../assets/scss/variables" as *;
-@use "../../assets/scss/mixins" as *;
-@use "../../assets/scss/global" as *;
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
 
 .recipe-form {
-  @include card;
-  max-width: 680px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-lg;
-  padding: $spacing-lg;
+	@include card;
+	max-width: 680px;
+	margin: 0 auto;
+	display: flex;
+	flex-direction: column;
+	gap: $spacing-lg;
+	padding: $spacing-lg;
 
-  h2 {
-    margin: 0;
-    font-size: $font-size-xl;
-    color: $text-primary;
-  }
+	h2 {
+		margin: 0;
+		font-size: $font-size-xl;
+		color: $text-primary;
+	}
 
-  .field {
-    display: flex;
-    flex-direction: column;
-    gap: $spacing-xs;
+	.field {
+		display: flex;
+		flex-direction: column;
+		gap: $spacing-xs;
 
-    &.field-inline {
-      flex-direction: row;
-      align-items: center;
-      gap: $spacing-md;
-    }
+		&.field-inline {
+			flex-direction: row;
+			align-items: center;
+			gap: $spacing-md;
+		}
 
-    label {
-      color: $text-secondary;
-      font-size: $font-size-sm;
-      display: flex;
-      flex-direction: column;
-      gap: $spacing-xs;
+		label {
+			color: $text-secondary;
+			font-size: $font-size-sm;
+			display: flex;
+			flex-direction: column;
+			gap: $spacing-xs;
 
-      input[type="text"],
-      input[type="email"],
-      input:not([type]),
-      select {
-        padding: $spacing-sm $spacing-md;
-        border: 2px solid $border-color;
-        border-radius: $radius-md;
-        font-size: $font-size-base;
-        background: $bg-primary;
-        color: $text-primary;
-        transition:
-          border-color $transition-base,
-          box-shadow $transition-base;
-      }
+			input[type="text"],
+			input[type="email"],
+			input:not([type]),
+			select {
+				padding: $spacing-sm $spacing-md;
+				border: 2px solid $border-color;
+				border-radius: $radius-md;
+				font-size: $font-size-base;
+				background: $bg-primary;
+				color: $text-primary;
+				transition: border-color $transition-base, box-shadow $transition-base;
+			}
 
-      input:focus,
-      select:focus {
-        outline: none;
-        border-color: $primary;
-        box-shadow: 0 0 0 4px rgba($primary, 0.06);
-      }
-    }
+			input:focus,
+			select:focus {
+				outline: none;
+				border-color: $primary;
+				box-shadow: 0 0 0 4px rgba($primary, 0.06);
+			}
+		}
 
-    .checkbox-label {
-      display: inline-flex;
-      align-items: center;
-      gap: $spacing-sm;
-      font-size: $font-size-base;
-      color: $text-primary;
+		.checkbox-label {
+			display: inline-flex;
+			align-items: center;
+			gap: $spacing-sm;
+			font-size: $font-size-base;
+			color: $text-primary;
 
-      input[type="checkbox"] {
-        width: 18px;
-        height: 18px;
-      }
-    }
-  }
+			input[type="checkbox"] {
+				width: 18px;
+				height: 18px;
+			}
+		}
+	}
 
-  .form-actions {
-    display: flex;
-    gap: $spacing-sm;
-    justify-content: flex-end;
+	.form-actions {
+		display: flex;
+		gap: $spacing-sm;
+		justify-content: flex-end;
 
-    .action-btn {
-      @include action-btn(
-        2px,
-        $radius-md,
-        $spacing-sm $spacing-lg,
-        $font-size-sm
-      );
-    }
-  }
+		.action-btn {
+			@include action-btn(2px, $radius-md, $spacing-sm $spacing-lg, $font-size-sm);
+		}
+	}
 }
 
 .form-subtitle {
-  margin: 0;
-  color: $text-secondary;
-  font-size: $font-size-sm;
+	margin: 0;
+	color: $text-secondary;
+	font-size: $font-size-sm;
 }
 
 .form-error {
-  background: rgba($error, 0.08);
-  color: $error;
-  padding: $spacing-sm $spacing-md;
-  border-radius: $radius-sm;
+	background: rgba($error, 0.08);
+	color: $error;
+	padding: $spacing-sm $spacing-md;
+	border-radius: $radius-sm;
 }
 
 .select-input {
-  width: 100%;
+	width: 100%;
 }
+

src/routes/Recipes/RecipeForm.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useState } from "react";
-import { apiService } from "../../services/api";
-import type { AbraServer } from "../../types";
-import "./RecipeForm.scss";
+import { apiService } from '../../services/api';
+import type { AbraServer } from '../../types';
+import './RecipeForm.scss';
+
+
 
 function RecipeForm({ recipe, onClose }) {
   const [loading, setLoading] = useState(true);
@@ -9,23 +11,26 @@ function RecipeForm({ recipe, onClose }) {
   const [selectedServer, setSelectedServer] = useState(""); // ❌ only one value
   const [chaos, setChaos] = useState(false);
   const [secrets, setSecrets] = useState(false);
-  const [error, setError] = useState("");
-
+  const [error, setError] = useState('');
+  
   useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const [serversData] = await Promise.all([apiService.getServers()]);
-
-        setServers(serversData);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : "Failed to load servers");
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchData();
-  });
+      const fetchData = async () => {
+        try {
+          const [serversData] = await Promise.all([
+            apiService.getServers(),
+          ]);
+            
+          setServers(serversData);
+          
+        } catch (err) {
+          setError(err instanceof Error ? err.message : 'Failed to load servers');
+        } finally {
+          setLoading(false);
+        }
+      };
+  
+      fetchData();
+    });
   const [formData, setFormData] = useState({
     domain: "",
     chaos: false,
@@ -51,7 +56,7 @@ function RecipeForm({ recipe, onClose }) {
       <p className="form-subtitle">Configure and deploy this recipe.</p>
       {error && <div className="form-error">{error}</div>}
 
-      {loading ? (
+      { loading ? (
         <p className="loading">Loading servers...</p>
       ) : (
         <div className="field">
@@ -91,9 +96,7 @@ function RecipeForm({ recipe, onClose }) {
             type="checkbox"
             name="chaos"
             checked={formData.chaos}
-            onChange={(e) =>
-              setFormData({ ...formData, chaos: e.target.checked })
-            }
+            onChange={(e) => setFormData({ ...formData, chaos: e.target.checked })}
           />
           Chaos Mode
         </label>
@@ -103,24 +106,18 @@ function RecipeForm({ recipe, onClose }) {
             type="checkbox"
             name="secrets"
             checked={formData.secrets}
-            onChange={(e) =>
-              setFormData({ ...formData, secrets: e.target.checked })
-            }
+            onChange={(e) => setFormData({ ...formData, secrets: e.target.checked })}
           />
           Autogenerate Secrets
         </label>
       </div>
 
       <div className="form-actions">
-        <button className="action-btn primary" type="submit">
-          Submit
-        </button>
-        <button className="action-btn" type="button" onClick={onClose}>
-          Cancel
-        </button>
+        <button className="action-btn primary" type="submit">Submit</button>
+        <button className="action-btn" type="button" onClick={onClose}>Cancel</button>
       </div>
     </form>
   );
 }
 
-export default RecipeForm;
+export default RecipeForm;

src/routes/Recipes/Recipes.scss

@@ -1,6 +1,6 @@
-@use "../../assets/scss/variables" as *;
-@use "../../assets/scss/mixins" as *;
-@use "../../assets/scss/global" as *;
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
 
 // Extend global page wrapper
 .recipes-page {
@@ -30,9 +30,7 @@
   @include card-dimensions(320px, 180px);
   row-gap: 1em;
   grid-template-rows: 1fr 2fr auto 0.9fr;
-  transition:
-    transform $transition-base,
-    box-shadow $transition-base;
+  transition: transform $transition-base, box-shadow $transition-base;
   position: relative;
   overflow: hidden;
   max-width: 30em;
@@ -75,18 +73,20 @@
   .tag-category {
     font-size: 12px;
     padding: 2px 8px;
-    border-radius: $radius-sm;
-    color: $primary-dark;
-    font-weight: $font-weight-bold;
-    background-color: $accent-blue-soft;
+    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: $radius-sm;
-    color: $primary;
-    font-weight: $font-weight-bold;
-    background-color: $brand-pink-soft;
+    border-radius: 5px;
+    color: rgb(255, 255, 255);
+    font-weight: 700;
+    background-color: rgb(22, 180, 22);
+
   }
   .recipe-stats {
     flex-grow: 1;
@@ -99,6 +99,7 @@
       -webkit-box-orient: vertical;
       overflow: hidden;
       text-overflow: ellipsis;
+
     }
   }
 
@@ -107,12 +108,7 @@
     gap: $spacing-sm;
     .action-btn {
       flex: 1;
-      @include action-btn(
-        2px,
-        $radius-md,
-        $spacing-sm $spacing-md,
-        $font-size-sm
-      );
+      @include action-btn(2px, $radius-md, $spacing-sm $spacing-md, $font-size-sm);
 
       &.primary {
         background-color: $primary;
@@ -149,12 +145,12 @@
   }
 }
 .modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  display: flex;
-  justify-content: center;
-  align-items: center;
+position: fixed;
+inset: 0;
+background: rgba(0, 0, 0, 0.4);
+display: flex;
+justify-content: center;
+align-items: center;
 }
 
 .modal {

src/routes/Recipes/Recipes.tsx

@@ -1,59 +1,61 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { Header } from "../../components/Header/Header";
-import { apiService } from "../../services/api";
-import type { AbraApp, AbraRecipe, AppWithServer } from "../../types";
-import RecipeForm from "./RecipeForm.tsx";
-import "./Recipes.scss";
+import React, { useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Header } from '../../components/Header/Header';
+import { apiService } from '../../services/api';
+import type { AbraApp, AbraRecipe, AppWithServer } 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 [error, setError] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filterServer, setFilterServer] = useState<string>('all');
+  const [filterStatus, setFilterStatus] = useState<string>('all');
   const [selectedRecipe, setSelectedRecipe] = useState(null);
   const [showForm, setShowForm] = useState(false);
 
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === "true";
+
+
+  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
 
   useEffect(() => {
     const fetchData = async () => {
       try {
         if (isMockMode) {
-          const { mockApiService } = await import("../../services/mockApi");
+          const { mockApiService } = await import('../../services/mockApi');
           const data = await mockApiService.getRecipes();
-          console.log(data);
+          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");
+        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 recipes
   const filteredRecipes = useMemo(() => {
-    return allRecipes.filter((recipe) => {
-      const matchesSearch = recipe.name
-        .toLowerCase()
-        .includes(searchTerm.toLowerCase());
+    return allRecipes.filter(recipe => {
+      const matchesSearch = 
+        recipe.name.toLowerCase().includes(searchTerm.toLowerCase());
 
       return matchesSearch;
     });
@@ -105,25 +107,25 @@ export const Recipes: React.FC = () => {
             onChange={(e) => setSearchTerm(e.target.value)}
             className="search-input"
           />
+
         </div>
 
         {/* Server Cards */}
         <div className="recipes-grid">
           {filteredRecipes.length === 0 ? (
-            <div className="no-results">
-              No recipes found matching your search
-            </div>
+            <div className="no-results">No recipes found matching your search</div>
           ) : (
             filteredRecipes.map((recipe) => (
-              <div key={recipe.name} className="recipe-card">
+              <div 
+                key={recipe.name} 
+                className="recipe-card"
+              >
                 <div className="recipe-header">
                   <div className="recipe-title">
                     <h3>{recipe.name}</h3>
                   </div>
                   <div>
-                    {recipe.icon.length > 0 ? (
-                      <img src={`${recipe.icon}`} />
-                    ) : null}
+                    {recipe.icon.length > 0 ? <img src={`${recipe.icon}`} /> : null }
                   </div>
                 </div>
 
@@ -134,44 +136,32 @@ export const Recipes: React.FC = () => {
                 </div>
 
                 <div className="recipe-actions">
-                  <button
+                  <button 
                     className="action-btn"
                     onClick={(e) => {
                       e.stopPropagation();
-                      console.log("clicked");
+                      console.log('clicked');
                       setSelectedRecipe(recipe);
-                      console.log("selectedRecipe:", selectedRecipe);
+                      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}
+                  {recipe.features.backups.toLowerCase().includes("yes") ? <span className="tag-feature"> Backups </span> : null}
+                  {recipe.features.healthcheck.toLowerCase().includes("yes") ? <span className="tag-feature"> Healthcheck </span> : null}
+                  {recipe.category.length > 0 ? <span className="tag-category"> {recipe.category} </span> : null}
                 </div>
               </div>
             ))
           )}
         </div>
         {selectedRecipe && (
-          <div
-            className="modal-overlay"
-            onClick={() => setSelectedRecipe(null)}
-          >
+          <div className="modal-overlay" onClick={() => setSelectedRecipe(null)}>
             <div className="modal" onClick={(e) => e.stopPropagation()}>
               {}
-              <RecipeForm
-                recipe={selectedRecipe}
-                onClose={() => setSelectedRecipe(null)}
-              />
+              <RecipeForm recipe={selectedRecipe} onClose={() => setSelectedRecipe(null)} />
             </div>
           </div>
         )}
@@ -182,4 +172,4 @@ export const Recipes: React.FC = () => {
       </main>
     </div>
   );
-};
+};

src/routes/Servers/Server.scss

@@ -1,6 +1,6 @@
-@use "../../assets/scss/variables" as *;
-@use "../../assets/scss/mixins" as *;
-@use "../../assets/scss/global" as *;
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
 @use "sass:color";
 
 .server-detail-page {

src/routes/Servers/Server.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-import { Header } from "../../components/Header/Header";
-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";
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Header } from '../../components/Header/Header';
+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 {
   apps: any[];
@@ -19,29 +19,29 @@ interface ServerWithApps extends AbraServer {
 export const Server: React.FC = () => {
   const { serverName } = useParams<{ serverName: string }>();
   const navigate = useNavigate();
-
+  
   const [server, setServer] = useState<ServerWithApps | null>(null);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState("");
+  const [error, setError] = useState('');
   const [actionLoading, setActionLoading] = useState<string | null>(null);
-
+  
   // Terminal state
   const [terminalLogs, setTerminalLogs] = useState<LogEntry[]>([]);
   const [terminalActive, setTerminalActive] = useState(false);
 
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === "true";
+  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
 
   useEffect(() => {
     const fetchServer = async () => {
       try {
         if (isMockMode) {
-          const { mockApiService } = await import("../../services/mockApi");
+          const { mockApiService } = await import('../../services/mockApi');
           const appsData = await mockApiService.getAppsGrouped();
           const serversData = await mockApiService.getServers();
-
-          const foundServer = serversData.find((s) => s.name === serverName);
-          const serverApps = appsData[serverName || ""];
-
+          
+          const foundServer = serversData.find(s => s.name === serverName);
+          const serverApps = appsData[serverName || ''];
+          
           if (foundServer && serverApps) {
             setServer({
               ...foundServer,
@@ -53,15 +53,15 @@ export const Server: React.FC = () => {
               latestCount: serverApps.latestCount,
             });
           } else {
-            setError("Server not found");
+            setError('Server not found');
           }
         } else {
           const appsData = await apiService.getAppsGrouped();
           const serversData = await apiService.getServers();
-
-          const foundServer = serversData.find((s) => s.name === serverName);
-          const serverApps = appsData[serverName || ""];
-
+          
+          const foundServer = serversData.find(s => s.name === serverName);
+          const serverApps = appsData[serverName || ''];
+          
           if (foundServer && serverApps) {
             setServer({
               ...foundServer,
@@ -73,11 +73,11 @@ export const Server: React.FC = () => {
               latestCount: serverApps.latestCount,
             });
           } else {
-            setError("Server not found");
+            setError('Server not found');
           }
         }
       } catch (err) {
-        setError(err instanceof Error ? err.message : "Failed to load server");
+        setError(err instanceof Error ? err.message : 'Failed to load server');
       } finally {
         setLoading(false);
       }
@@ -88,36 +88,28 @@ export const Server: React.FC = () => {
 
   const handleAction = async (action: string) => {
     if (!server) return;
-
+    
     setActionLoading(action);
     setTerminalActive(true);
     setTerminalLogs([]);
-
+    
     try {
       if (isMockMode) {
-        const { mockApiService } = await import("../../services/mockApi");
-
+        const { mockApiService } = await import('../../services/mockApi');
+        
         const onLog = (log: LogEntry) => {
-          setTerminalLogs((prev) => [...prev, log]);
+          setTerminalLogs(prev => [...prev, log]);
         };
-
+        
         switch (action) {
-          case "refresh":
+          case 'refresh':
             await mockApiService.refreshServer(server.name, onLog);
             break;
-          case "deploy-all":
-            await mockApiService.deployAllApps(
-              server.name,
-              server.appCount,
-              onLog,
-            );
+          case 'deploy-all':
+            await mockApiService.deployAllApps(server.name, server.appCount, onLog);
             break;
-          case "upgrade-all":
-            await mockApiService.upgradeAllApps(
-              server.name,
-              server.upgradeCount,
-              onLog,
-            );
+          case 'upgrade-all':
+            await mockApiService.upgradeAllApps(server.name, server.upgradeCount, onLog);
             break;
         }
       } else {
@@ -125,15 +117,12 @@ export const Server: React.FC = () => {
         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(),
-        },
-      ]);
+      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);
     }
@@ -155,8 +144,8 @@ export const Server: React.FC = () => {
       <div className="server-detail-page">
         <Header />
         <main className="server-detail-content">
-          <div className="error">{error || "Server not found"}</div>
-          <button onClick={() => navigate("/servers")} className="back-button">
+          <div className="error">{error || 'Server not found'}</div>
+          <button onClick={() => navigate('/servers')} className="back-button">
             Back to Servers
           </button>
         </main>
@@ -164,20 +153,15 @@ export const Server: React.FC = () => {
     );
   }
 
-  const chaosApps = server.apps.filter((app) => app.chaos === "true");
-  const runningApps = server.apps.filter(
-    (app) => app.status === "deployed" || app.status === "running",
-  );
+  const chaosApps = server.apps.filter(app => app.chaos === 'true');
+  const runningApps = server.apps.filter(app => app.status === 'deployed' || app.status === 'running');
 
   return (
     <div className="server-detail-page">
       <Header />
       <main className="server-detail-content">
         <div className="breadcrumb">
-          <button
-            onClick={() => navigate("/servers")}
-            className="breadcrumb-link"
-          >
+          <button onClick={() => navigate('/servers')} className="breadcrumb-link">
             Servers
           </button>
           <span className="breadcrumb-separator">/</span>
@@ -191,34 +175,33 @@ export const Server: React.FC = () => {
               <span className="host-badge">{server.host}</span>
               {server.upgradeCount > 0 && (
                 <span className="upgrade-badge">
-                  {server.upgradeCount} upgrade
-                  {server.upgradeCount !== 1 ? "s" : ""}
+                  {server.upgradeCount} upgrade{server.upgradeCount !== 1 ? 's' : ''}
                 </span>
               )}
             </div>
           </div>
 
           <div className="server-actions">
-            <button
+            <button 
               className="action-btn secondary"
-              onClick={() => handleAction("refresh")}
+              onClick={() => handleAction('refresh')}
               disabled={!!actionLoading}
             >
-              {actionLoading === "refresh" ? "Refreshing..." : "Refresh"}
+              {actionLoading === 'refresh' ? 'Refreshing...' : 'Refresh'}
             </button>
-            <button
+            <button 
               className="action-btn"
-              onClick={() => handleAction("deploy-all")}
+              onClick={() => handleAction('deploy-all')}
               disabled={!!actionLoading}
             >
-              {actionLoading === "deploy-all" ? "Deploying..." : "Deploy All"}
+              {actionLoading === 'deploy-all' ? 'Deploying...' : 'Deploy All'}
             </button>
           </div>
         </div>
 
         {/* Terminal Component */}
-        <Terminal
-          logs={terminalLogs}
+        <Terminal 
+          logs={terminalLogs} 
           isActive={terminalActive}
           onClose={() => setTerminalActive(false)}
         />
@@ -228,7 +211,7 @@ export const Server: React.FC = () => {
           <div className="main-column">
             <section className="info-card">
               <h2>Server Details</h2>
-
+              
               <div className="info-grid">
                 <div className="info-item">
                   <label>Server Name</label>
@@ -252,24 +235,14 @@ export const Server: React.FC = () => {
 
                 <div className="info-item">
                   <label>Upgrades Available</label>
-                  <span
-                    className={
-                      server.upgradeCount > 0
-                        ? "stat-value warning"
-                        : "stat-value"
-                    }
-                  >
+                  <span className={server.upgradeCount > 0 ? 'stat-value warning' : 'stat-value'}>
                     {server.upgradeCount}
                   </span>
                 </div>
 
                 <div className="info-item">
                   <label>Chaos Mode Apps</label>
-                  <span
-                    className={
-                      chaosApps.length > 0 ? "stat-value chaos" : "stat-value"
-                    }
-                  >
+                  <span className={chaosApps.length > 0 ? 'stat-value chaos' : 'stat-value'}>
                     {chaosApps.length}
                   </span>
                 </div>
@@ -288,20 +261,16 @@ export const Server: React.FC = () => {
 
             <section className="info-card">
               <h2>Applications on this Server</h2>
-
+              
               {server.apps.length === 0 ? (
-                <div className="no-apps">
-                  No applications deployed on this server
-                </div>
+                <div className="no-apps">No applications deployed on this server</div>
               ) : (
                 <div className="apps-list">
                   {server.apps.map((app, idx) => (
-                    <div
+                    <div 
                       key={`${app.appName}-${idx}`}
                       className="app-item"
-                      onClick={() =>
-                        navigate(`/apps/${server.name}/${app.appName}`)
-                      }
+                      onClick={() => navigate(`/apps/${server.name}/${app.appName}`)}
                     >
                       <div className="app-item-header">
                         <span className="app-item-name">{app.appName}</span>
@@ -310,10 +279,10 @@ export const Server: React.FC = () => {
                           <span className={`status-badge status-${app.status}`}>
                             {app.status}
                           </span>
-                          {app.chaos === "true" && (
+                          {app.chaos === 'true' && (
                             <span className="chaos-badge">☠️</span>
                           )}
-                          {app.upgrade !== "latest" && (
+                          {app.upgrade !== 'latest' && (
                             <span className="upgrade-badge">⬆️</span>
                           )}
                         </div>
@@ -321,7 +290,7 @@ export const Server: React.FC = () => {
                       <div className="app-item-details">
                         <span className="app-item-version">v{app.version}</span>
                         {app.domain && (
-                          <a
+                          <a 
                             href={`https://${app.domain}`}
                             target="_blank"
                             rel="noopener noreferrer"
@@ -343,27 +312,27 @@ export const Server: React.FC = () => {
           <div className="sidebar-column">
             <section className="info-card">
               <h2>Quick Actions</h2>
-
+              
               <div className="action-list">
-                <button
+                <button 
                   className="action-list-item"
-                  onClick={() => handleAction("refresh")}
+                  onClick={() => handleAction('refresh')}
                   disabled={!!actionLoading}
                 >
                   <span className="action-text">Refresh Server Info</span>
                 </button>
 
-                <button
+                <button 
                   className="action-list-item"
-                  onClick={() => handleAction("deploy-all")}
+                  onClick={() => handleAction('deploy-all')}
                   disabled={!!actionLoading}
                 >
                   <span className="action-text">Deploy All Apps</span>
                 </button>
 
-                <button
+                <button 
                   className="action-list-item"
-                  onClick={() => handleAction("upgrade-all")}
+                  onClick={() => handleAction('upgrade-all')}
                   disabled={!!actionLoading || server.upgradeCount === 0}
                 >
                   <span className="action-text">Upgrade All Apps</span>

src/routes/Servers/Servers.scss

@@ -1,6 +1,6 @@
-@use "../../assets/scss/variables" as *;
-@use "../../assets/scss/mixins" as *;
-@use "../../assets/scss/global" as *;
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
 
 // Extend global page wrapper
 .servers-page {
@@ -45,7 +45,7 @@
     .server-status {
       .status-indicator {
         font-size: $font-size-xl;
-
+        
         &.connected {
           color: $success;
         }
@@ -119,12 +119,7 @@
 
     .action-btn {
       flex: 1;
-      @include action-btn(
-        2px,
-        $radius-md,
-        $spacing-sm $spacing-md,
-        $font-size-sm
-      );
+      @include action-btn(2px, $radius-md, $spacing-sm $spacing-md, $font-size-sm);
 
       &.primary {
         // background-color: $primary;

src/routes/Servers/Servers.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { Header } from "../../components/Header/Header";
-import { apiService } from "../../services/api";
-import type { AbraServer, ServerAppsResponse } from "../../types";
-import "./Servers.scss";
+import React, { useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Header } from '../../components/Header/Header';
+import { apiService } from '../../services/api';
+import type { AbraServer, ServerAppsResponse } from '../../types';
+import './Servers.scss';
 
 interface ServerWithStats extends AbraServer {
   appCount: number;
@@ -17,21 +17,21 @@ export const Servers: React.FC = () => {
   const navigate = useNavigate();
   const [servers, setServers] = useState<ServerWithStats[]>([]);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState("");
-  const [searchTerm, setSearchTerm] = useState("");
-  const [sortBy, setSortBy] = useState<"name" | "apps" | "upgrades">("name");
+  const [error, setError] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [sortBy, setSortBy] = useState<'name' | 'apps' | 'upgrades'>('name');
   const [showUpgradesOnly, setShowUpgradesOnly] = useState(false);
   const [showChaosOnly, setShowChaosOnly] = useState(false);
 
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === "true";
+  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
 
   useEffect(() => {
     const fetchData = async () => {
       try {
         let serversData, appsData;
-
+        
         if (isMockMode) {
-          const { mockApiService } = await import("../../services/mockApi");
+          const { mockApiService } = await import('../../services/mockApi');
           [serversData, appsData] = await Promise.all([
             mockApiService.getServers(),
             mockApiService.getAppsGrouped(),
@@ -42,13 +42,12 @@ export const Servers: React.FC = () => {
             apiService.getAppsGrouped(),
           ]);
         }
-
+        
         // Enrich servers with stats from apps data
-        const enrichedServers = serversData.map((server) => {
+        const enrichedServers = serversData.map(server => {
           const serverStats = appsData[server.name];
-          const chaosCount =
-            serverStats?.apps.filter((app) => app.chaos === "true").length || 0;
-
+          const chaosCount = serverStats?.apps.filter(app => app.chaos === 'true').length || 0;
+          
           return {
             ...server,
             appCount: serverStats?.appCount || 0,
@@ -58,11 +57,11 @@ export const Servers: React.FC = () => {
             chaosCount,
           };
         });
-
+        
         setServers(enrichedServers);
       } catch (err) {
-        console.error("Error loading servers:", err);
-        setError(err instanceof Error ? err.message : "Failed to load servers");
+        console.error('Error loading servers:', err);
+        setError(err instanceof Error ? err.message : 'Failed to load servers');
       } finally {
         setLoading(false);
       }
@@ -83,27 +82,27 @@ export const Servers: React.FC = () => {
 
   // Filter and sort servers (additive filters allowed)
   const filteredServers = useMemo(() => {
-    const filtered = servers.filter((server) => {
-      const matchesSearch =
-        server.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        server.host.toLowerCase().includes(searchTerm.toLowerCase());
-      const matchesUpgrades = !showUpgradesOnly || server.upgradeCount > 0;
-      const matchesChaos = !showChaosOnly || server.chaosCount > 0;
-      return matchesSearch && matchesUpgrades && matchesChaos;
-    });
+  const filtered = servers.filter(server => {
+    const matchesSearch =
+      server.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      server.host.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesUpgrades = !showUpgradesOnly || server.upgradeCount > 0;
+    const matchesChaos = !showChaosOnly || server.chaosCount > 0;
+    return matchesSearch && matchesUpgrades && matchesChaos;
+  });
 
-    filtered.sort((a, b) => {
-      switch (sortBy) {
-        case "apps":
-          return b.appCount - a.appCount;
-        case "name":
-        default:
-          return a.name.localeCompare(b.name);
-      }
-    });
+  filtered.sort((a, b) => {
+    switch (sortBy) {
+      case 'apps':
+        return b.appCount - a.appCount;
+      case 'name':
+      default:
+        return a.name.localeCompare(b.name);
+    }
+  });
 
-    return filtered;
-  }, [servers, searchTerm, sortBy, showUpgradesOnly]);
+  return filtered;
+}, [servers, searchTerm, sortBy, showUpgradesOnly]);
 
   if (loading) {
     return (
@@ -133,17 +132,14 @@ export const Servers: React.FC = () => {
       <main className="servers-content">
         <div className="page-header">
           <h1>Servers</h1>
-          <p className="subtitle">
-            Managing {stats.totalServers} servers with {stats.totalApps}{" "}
-            applications
-          </p>
+          <p className="subtitle">Managing {stats.totalServers} servers with {stats.totalApps} applications</p>
         </div>
 
         {/* Compact Stats Row */}
         <div className="stats-row">
           <button
             className="stat-chip"
-            onClick={() => navigate("/apps")}
+            onClick={() => navigate('/apps')}
             title="View all apps"
           >
             <span className="stat-label">Apps</span>
@@ -151,8 +147,8 @@ export const Servers: React.FC = () => {
           </button>
 
           <button
-            className={`stat-chip filter-chip ${showUpgradesOnly ? "active" : ""}`}
-            onClick={() => setShowUpgradesOnly((prev) => !prev)}
+            className={`stat-chip filter-chip ${showUpgradesOnly ? 'active' : ''}`}
+            onClick={() => setShowUpgradesOnly(prev => !prev)}
             title="Click to filter by servers with upgrades"
             disabled={stats.totalUpgrades === 0}
           >
@@ -161,14 +157,16 @@ export const Servers: React.FC = () => {
           </button>
 
           <button
-            className={`stat-chip filter-chip ${showChaosOnly ? "active" : ""}`}
-            onClick={() => setShowChaosOnly((prev) => !prev)}
+            className={`stat-chip filter-chip ${showChaosOnly ? 'active' : ''}`}
+            onClick={() => setShowChaosOnly(prev => !prev)}
             title="Click to filter servers with chaos apps"
             disabled={stats.totalChaos === 0}
           >
             <span className="stat-label">Chaos</span>
             <span className="stat-value">{stats.totalChaos}</span>
           </button>
+
+          {/* Clear filters button removed — use stat-chip outlines for active filters */}
         </div>
 
         {/* Filters */}
@@ -185,16 +183,14 @@ export const Servers: React.FC = () => {
         {/* Server Cards */}
         <div className="servers-grid">
           {filteredServers.length === 0 ? (
-            <div className="no-results">
-              No servers found matching your search
-            </div>
+            <div className="no-results">No servers found matching your search</div>
           ) : (
             filteredServers.map((server) => (
-              <div
-                key={server.name}
+              <div 
+                key={server.name} 
                 className="server-card"
                 onClick={() => navigate(`/servers/${server.name}`)}
-                style={{ cursor: "pointer" }}
+                style={{ cursor: 'pointer' }}
               >
                 <div className="server-header">
                   <div className="server-title">
@@ -202,12 +198,7 @@ export const Servers: React.FC = () => {
                     <span className="server-host">{server.host}</span>
                   </div>
                   <div className="server-status">
-                    <span
-                      className="status-indicator connected"
-                      title="Connected"
-                    >
-                      ●
-                    </span>
+                    <span className="status-indicator connected" title="Connected">●</span>
                   </div>
                 </div>
 
@@ -226,13 +217,17 @@ export const Servers: React.FC = () => {
                   </div>
                   {server.upgradeCount > 0 && (
                     <div className="stat-row highlight">
-                      <span className="stat-label">Need Upgrade</span>
+                      <span className="stat-label">
+                        Need Upgrade
+                      </span>
                       <span className="stat-value">{server.upgradeCount}</span>
                     </div>
                   )}
                   {server.chaosCount > 0 && (
                     <div className="stat-row chaos-row">
-                      <span className="stat-label">Chaos Mode</span>
+                      <span className="stat-label">
+                        Chaos Mode
+                      </span>
                       <span className="stat-value">{server.chaosCount}</span>
                     </div>
                   )}
@@ -241,8 +236,7 @@ export const Servers: React.FC = () => {
                 {server.upgradeCount > 0 && (
                   <div className="server-alert">
                     <span className="alert-text">
-                      {server.upgradeCount} app
-                      {server.upgradeCount > 1 ? "s" : ""} can be upgraded
+                      {server.upgradeCount} app{server.upgradeCount > 1 ? 's' : ''} can be upgraded
                     </span>
                   </div>
                 )}

src/services/api.ts

@@ -1,18 +1,17 @@
-import type { AbraRecipe, AbraServer, ServerAppsResponse } from "../types";
+import type { AbraRecipe, AbraServer, ServerAppsResponse } from '../types';
 
 // Log entry type
 export type LogEntry = {
-  type: "info" | "success" | "error" | "warning" | "command" | "output";
+  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";
+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) => ({
+  return logData.map(log => ({
     type: log.type,
     text: log.text,
     timestamp: new Date(log.timestamp || Date.now()),
@@ -22,10 +21,10 @@ const processLogResponse = (logData: any[]): LogEntry[] => {
 class ApiService {
   private async request<T>(
     endpoint: string,
-    options: RequestInit = {},
+    options: RequestInit = {}
   ): Promise<T> {
     const headers: HeadersInit = {
-      "Content-Type": "application/json",
+      'Content-Type': 'application/json',
       ...options.headers,
     };
 
@@ -35,9 +34,7 @@ class ApiService {
     });
 
     if (!response.ok) {
-      const error = await response
-        .json()
-        .catch(() => ({ message: "An error occurred" }));
+      const error = await response.json().catch(() => ({ message: 'An error occurred' }));
       throw new Error(error.message || `HTTP ${response.status}`);
     }
 
@@ -46,142 +43,98 @@ class ApiService {
 
   // Get all apps grouped by server
   async getAppsGrouped(): Promise<ServerAppsResponse> {
-    return this.request<ServerAppsResponse>("/apps");
+    return this.request<ServerAppsResponse>('/apps');
   }
 
   // Get all servers
   async getServers(): Promise<AbraServer[]> {
-    return this.request<AbraServer[]>("/servers");
+    return this.request<AbraServer[]>('/servers');
   }
 
   // App actions with log streaming (websocket future)
-  async deployApp(
-    appName: string,
-    onLog?: (log: LogEntry) => void,
-  ): Promise<void> {
-    const response = await this.request<{ logs: any[] }>(
-      `/apps/${appName}/deploy`,
-      {
-        method: "POST",
-      },
-    );
+  async deployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const response = await this.request<{ logs: any[] }>(`/apps/${appName}/deploy`, {
+      method: 'POST',
+    });
 
     if (onLog && response.logs) {
       const logs = processLogResponse(response.logs);
-      logs.forEach((log) => onLog(log));
+      logs.forEach(log => onLog(log));
     }
   }
 
-  async undeployApp(
-    appName: string,
-    onLog?: (log: LogEntry) => void,
-  ): Promise<void> {
-    const response = await this.request<{ logs: any[] }>(
-      `/apps/${appName}/undeploy`,
-      {
-        method: "POST",
-      },
-    );
+  async undeployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const response = await this.request<{ logs: any[] }>(`/apps/${appName}/undeploy`, {
+      method: 'POST',
+    });
 
     if (onLog && response.logs) {
       const logs = processLogResponse(response.logs);
-      logs.forEach((log) => onLog(log));
+      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 }),
-      },
-    );
+  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));
+      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",
-      },
-    );
+  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));
+      logs.forEach(log => onLog(log));
     }
   }
 
   // Server actions with log streaming
-  async refreshServer(
-    serverName: string,
-    onLog?: (log: LogEntry) => void,
-  ): Promise<void> {
-    const response = await this.request<{ logs: any[] }>(
-      `/servers/${serverName}/refresh`,
-      {
-        method: "POST",
-      },
-    );
+  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));
+      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",
-      },
-    );
+  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));
+      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",
-      },
-    );
+  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));
+      logs.forEach(log => onLog(log));
     }
   }
   // recipe catalog imports
   async getRecipes(): Promise<AbraRecipe[]> {
-    return this.request<AbraRecipe[]>("/abra/catalogue");
+    return this.request<AbraRecipe[]>('/abra/catalogue');
   }
 }
+    
 
-export const apiService = new ApiService();
+export const apiService = new ApiService();

src/services/mock-apps.json

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

src/services/mock-catalogue.json

@@ -1723,4 +1723,4 @@
     ],
     "website": ""
   }
-]
+]

src/services/mock-logs.json

@@ -323,4 +323,4 @@
       }
     ]
   }
-}
+}

src/services/mock-servers.json

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

src/services/mockApi.ts

@@ -1,19 +1,20 @@
-import type { AbraRecipe, AbraServer, 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";
+import type { AbraRecipe, AbraServer, 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";
+  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";
+  type: 'info' | 'success' | 'error' | 'warning' | 'command' | 'output';
   text: string;
 };
 
@@ -24,16 +25,13 @@ type LogsDataStructure = {
 };
 
 // Simulate API delay
-const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
 
 // Helper to replace template variables like {appName}, {version}
-const replaceVars = (
-  text: string,
-  vars: Record<string, string | number>,
-): string => {
+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));
+    result = result.replace(new RegExp(`\\{${key}\\}`, 'g'), String(value));
   });
   return result;
 };
@@ -41,25 +39,25 @@ const replaceVars = (
 // Helper to process log templates into LogEntry objects
 const processLogs = (
   action: string,
-  vars: Record<string, string | number>,
+  vars: Record<string, string | number>
 ): LogEntry[] => {
-  console.log("Processing logs for action:", action);
-  console.log("Loaded logsData:", logsData);
-
+  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);
-
+  
+  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) => ({
+    .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(),
@@ -77,87 +75,63 @@ export const mockApiService = {
     return serversData as AbraServer[];
   },
 
-  async deployApp(
-    appName: string,
-    onLog?: (log: LogEntry) => void,
-  ): Promise<void> {
-    const logs = processLogs("deploy", { appName });
-
+  async deployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const logs = processLogs('deploy', { appName });
+    
     for (const log of logs) {
       await delay(200);
       onLog?.(log);
     }
   },
 
-  async stopApp(
-    appName: string,
-    onLog?: (log: LogEntry) => void,
-  ): Promise<void> {
-    const logs = processLogs("stop", { appName });
-
+  async stopApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const logs = processLogs('stop', { appName });
+    
     for (const log of logs) {
       await delay(150);
       onLog?.(log);
     }
   },
 
-  async upgradeApp(
-    appName: string,
-    version: string,
-    onLog?: (log: LogEntry) => void,
-  ): Promise<void> {
-    const logs = processLogs("upgrade", { appName, version });
-
+  async upgradeApp(appName: string, version: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const logs = processLogs('upgrade', { appName, version });
+    
     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 });
-
+  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 });
-
+  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 });
-
+  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 });
-
+  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);
@@ -167,5 +141,5 @@ export const mockApiService = {
   async getRecipes(): Promise<AbraRecipe[]> {
     await delay(300);
     return catalogue as AbraRecipe[];
-  },
-};
+  }
+};

src/types/index.ts

@@ -8,7 +8,7 @@ export interface AbraApp {
   recipe: string;
   appName: string;
   domain: string;
-  status: "deployed" | "stopped" | "unknown";
+  status: 'deployed' | 'stopped' | 'unknown';
   chaos: string;
   chaosVersion: string;
   version: string;
@@ -39,14 +39,14 @@ export interface AppWithServer extends AbraApp {
 }
 export interface Image {
   image: string;
-  rating: string;
-  source: string;
-  url: string;
+  rating: string
+  source: string
+  url: string
 }
 type RecipeVersions = Record<string, Record<string, ServiceMeta>>[];
 export interface ServiceMeta {
   image: string;
-  tag: string;
+  tag: string
 }
 export interface Features {
   backups: string;
@@ -68,4 +68,4 @@ export interface AbraRecipe {
   ssh_url: string;
   versions: RecipeVersions;
   website: string;
-}
+}