run formatter

Merge branch 'main' of https://git.coopcloud.tech/BornDeleuze/coop-cloud-front into dev
preload fonts
2026-05-16 22:46:44 -07:00 · 2026-05-16 19:18:25 -07:00 · 2026-05-16 19:16:48 -07:00 · 2026-05-17 02:01:07 +00:00 · 2026-05-17 01:52:45 +00:00 · 2026-05-17 01:52:12 +00:00
41 changed files with 942 additions and 3744 deletions
--- a/.gitignore
+++ b/.gitignore
@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*

 node_modules
+pnpm-lock.yaml
 dist
 dist-ssr
 *.local
--- a/README.md
+++ b/README.md
@ -10,6 +10,7 @@ with SCSS.

 - Install dependencies (pnpm is recommended):

+```
 pnpm install
 pnpm dev

--- a/index.html
+++ b/index.html
@ -5,6 +5,10 @@
    <link rel="shortcut icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>coopcloud-frontend</title>
+    <link rel="preload" href="/fonts/manrope.light.woff2" as="font" type="font/woff2">
+    <link rel="preload" href="/fonts/manrope.medium.woff2" as="font" type="font/woff2">
+    <link rel="preload" href="/fonts/manrope.bold.woff2" as="font" type="font/woff2">
+    <link rel="preload" href="/fonts/Lora-Italic.woff2" as="font" type="font/woff2">
  </head>
  <body>
    <div id="root"></div>
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/fonts/Lora-Italic.woff2
+++ b/public/fonts/Lora-Italic.woff2
--- a/public/fonts/manrope.bold.woff2
+++ b/public/fonts/manrope.bold.woff2
--- a/public/fonts/manrope.light.woff2
+++ b/public/fonts/manrope.light.woff2
--- a/public/fonts/manrope.medium.woff2
+++ b/public/fonts/manrope.medium.woff2
--- a/src/App.tsx
+++ b/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>
  );
 }
--- a/src/assets/scss/_fonts.scss
+++ b/src/assets/scss/_fonts.scss
@ -1,30 +1,30 @@
@font-face {
-  font-family: 'Lora';
-  src: url('https://coopcloud.tech/font/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('https://coopcloud.tech/font/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('https://coopcloud.tech/font/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('https://coopcloud.tech/font/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;
--- a/src/assets/scss/_global.scss
+++ b/src/assets/scss/_global.scss
@ -1,6 +1,5 @@
-@use './variables' as *;
-@use './mixins' as *;
-
+@use "./variables" as *;
+@use "./mixins" as *;

 body {
  margin: 0;
@ -76,7 +75,9 @@ body {
  align-items: center;
  gap: $spacing-lg;
  padding: $spacing-xl;
-  transition: transform $transition-base, box-shadow $transition-base;
+  transition:
+    transform $transition-base,
+    box-shadow $transition-base;

  &:hover {
    transform: translateY(-2px);
--- a/src/assets/scss/_mixins.scss
+++ b/src/assets/scss/_mixins.scss
@ -1,4 +1,4 @@
-@use 'variables' as *;
+@use "variables" as *;

 // Flexbox center
@mixin flex-center {
@ -9,14 +9,22 @@

 // Responsive breakpoints
@mixin respond-to($breakpoint) {
-  @if $breakpoint == 'sm' {
-    @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;
+    }
  }
 }

@ -46,7 +54,9 @@

 /// 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);
@ -123,7 +133,7 @@
  font-weight: $font-weight-semibold;
  cursor: pointer;
  transition: all $transition-base;
-  
+
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
@ -187,7 +197,12 @@
 }

 // 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) {
+@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;
@ -209,4 +224,4 @@
    opacity: 0.6;
    cursor: not-allowed;
  }
-}
+}
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@ -1,6 +1,6 @@
 // Colors
-$primary: #EFEFEF;
-$primary-dark: #6A9CFF;
+$primary: #efefef;
+$primary-dark: #6a9cff;
 $primary-light: #ff4f88;
 $secondary: #363636;

@ -10,8 +10,7 @@ $error: #ef4444;
 $info: #3b82f6;

 $text-primary: #363636;
-$text-secondary: #4a4a4a
-;
+$text-secondary: #4a4a4a;
 $text-muted: #999;

 $bg-primary: #ffffff;
@ -31,11 +30,21 @@ $spacing-3xl: 4rem;

 // Typography

-$font-family-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-'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;
@ -72,4 +81,4 @@ $transition-slow: 0.3s ease;
 $breakpoint-sm: 640px;
 $breakpoint-md: 768px;
 $breakpoint-lg: 1024px;
-$breakpoint-xl: 1280px;
+$breakpoint-xl: 1280px;
--- a/src/assets/scss/main.scss
+++ b/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";
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@ -1,8 +1,7 @@
-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;
@ -10,23 +9,24 @@ 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>
+  );
+};
--- a/src/components/Header/_Header.scss
+++ b/src/components/Header/_Header.scss
@ -1,5 +1,5 @@
-@use '../../assets/scss/variables' as *;
-@use '../../assets/scss/mixins' as *;
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;

 .layout-header {
  background-color: $primary-light;
@ -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;
    }
  }
-}
+}
--- a/src/components/Terminal/Terminal.tsx
+++ b/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,7 +8,11 @@ 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[]>([]);

@ -24,13 +28,17 @@ export const Terminal: React.FC<TerminalProps> = ({ logs, isActive, onClose }) =

    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);
      }
    };
@ -50,11 +58,11 @@ export const Terminal: React.FC<TerminalProps> = ({ logs, isActive, onClose }) =
  }

  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",
    });
  };

@ -69,14 +77,18 @@ export const Terminal: React.FC<TerminalProps> = ({ logs, isActive, onClose }) =
        <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>
        )}
--- a/src/components/Terminal/_Terminal.scss
+++ b/src/components/Terminal/_Terminal.scss
@ -1,12 +1,14 @@
-@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;
 }
@ -181,10 +183,12 @@
 }

@keyframes terminal-cursor-blink {
-  0%, 50% {
+  0%,
+  50% {
    opacity: 1;
  }
-  51%, 100% {
+  51%,
+  100% {
    opacity: 0;
  }
 }
@ -201,4 +205,4 @@
      display: none;
    }
  }
-}
+}
--- a/src/index.scss
+++ b/src/index.scss
@ -1,14 +1,24 @@
-@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;
@ -44,7 +54,12 @@ a {
 }

 // Global heading styles
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
  color: $text-primary;
  margin: 0;
 }
--- a/src/main.tsx
+++ b/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>,
-)
+);
--- a/src/routes/Apps/App.scss
+++ b/src/routes/Apps/App.scss
@ -1,9 +1,8 @@
-@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;
 }
@ -74,7 +73,7 @@
    border-color: $error;

    &:hover:not(:disabled) {
-      background: color.adjust($error, $lightness: -10%);    
+      background: color.adjust($error, $lightness: -10%);
    }
  }
 }
@ -143,7 +142,7 @@
  }

  .chaos-active {
-    background: color.adjust($info, $lightness: -10%);    
+    background: color.adjust($info, $lightness: -10%);
    font-weight: $font-weight-medium;
  }
 }
--- a/src/routes/Apps/App.tsx
+++ b/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,53 +60,56 @@ 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);
    }
@ -128,8 +131,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>
@ -137,14 +140,15 @@ export const AppDetail: React.FC = () => {
    );
  }

-  const upgradeVersions = app.upgrade !== 'latest' ? app.upgrade.split('\n') : [];
+  const upgradeVersions =
+    app.upgrade !== "latest" ? app.upgrade.split("\n") : [];

  return (
    <div className="app-detail-page">
      <Header />
      <main className="app-detail-content">
        <div className="breadcrumb">
-          <button onClick={() => navigate('/apps')} className="breadcrumb-link">
+          <button onClick={() => navigate("/apps")} className="breadcrumb-link">
            Apps
          </button>
          <span className="breadcrumb-separator">/</span>
@ -156,34 +160,39 @@ 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)}
        />
@ -193,7 +202,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>
@ -203,7 +212,12 @@ export const AppDetail: React.FC = () => {
                <div className="info-item">
                  <label>Domain</label>
                  {app.domain ? (
-                    <a href={`https://${app.domain}`} target="_blank" rel="noopener noreferrer" className="link">
+                    <a
+                      href={`https://${app.domain}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="link"
+                    >
                      {app.domain} ↗
                    </a>
                  ) : (
@ -236,8 +250,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>
@ -245,14 +259,14 @@ export const AppDetail: React.FC = () => {

            <section className="info-card">
              <h2>Version Information</h2>
-              
+
              <div className="version-info">
                <div className="version-current">
                  <label>Current Version</label>
                  <code>{app.version}</code>
                </div>

-                {app.chaosVersion !== 'unknown' && (
+                {app.chaosVersion !== "unknown" && (
                  <div className="version-current">
                    <label>Chaos Version</label>
                    <code>{app.chaosVersion}</code>
@ -263,18 +277,22 @@ export const AppDetail: React.FC = () => {
                  <div className="version-upgrades">
                    <label>
                      Available Upgrades
-                      <span className="upgrade-count">{upgradeVersions.length}</span>
+                      <span className="upgrade-count">
+                        {upgradeVersions.length}
+                      </span>
                    </label>
                    <div className="upgrade-list">
                      {upgradeVersions.map((version, idx) => (
                        <div key={idx} className="upgrade-item">
                          <code>{version}</code>
-                          <button 
+                          <button
                            className="upgrade-btn"
-                            onClick={() => handleAction('upgrade', version)}
+                            onClick={() => handleAction("upgrade", version)}
                            disabled={!!actionLoading}
                          >
-                            {actionLoading === 'upgrade' ? 'Upgrading...' : 'Upgrade'}
+                            {actionLoading === "upgrade"
+                              ? "Upgrading..."
+                              : "Upgrade"}
                          </button>
                        </div>
                      ))}
@ -282,10 +300,8 @@ 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>
@ -295,30 +311,31 @@ export const AppDetail: React.FC = () => {
          <div className="sidebar-column">
            <section className="info-card">
              <h2>Quick Actions</h2>
-              
-              <div className="action-list">

-                <button 
+              <div className="action-list">
+                <button
                  className="action-list-item"
-                  onClick={() => handleAction('deploy')}
+                  onClick={() => handleAction("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}
--- a/src/routes/Apps/Apps.scss
+++ b/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,7 +117,6 @@
  }
 }

-
 .no-domain {
  color: $text-muted;
  font-style: italic;
@ -146,7 +145,12 @@
  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;
@ -164,4 +168,4 @@
      }
    }
  }
-}
+}
--- a/src/routes/Apps/Apps.tsx
+++ b/src/routes/Apps/Apps.tsx
@ -1,32 +1,30 @@
-
 // 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 {
@ -34,7 +32,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);
      }
@ -46,15 +44,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]);

@ -66,15 +64,16 @@ 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;
    });
@ -82,15 +81,17 @@ 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 (
@ -120,22 +121,24 @@ 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}
@ -143,9 +146,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}
@ -153,7 +156,6 @@ export const Apps: React.FC = () => {
            <span className="stat-label">Chaos</span>
            <span className="stat-value">{stats.chaosApps}</span>
          </button>
-          
        </div>

        {/* Filters */}
@ -166,10 +168,15 @@ 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>
@ -197,10 +204,12 @@ 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>
@ -210,10 +219,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()}
                        >
@ -229,12 +238,17 @@ 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>
@ -282,4 +296,4 @@ export const Apps: React.FC = () => {
      </main>
    </div>
  );
-};
+};
--- a/src/routes/Dashboard/Dashboard.tsx
+++ b/src/routes/Dashboard/Dashboard.tsx
@ -1,32 +1,34 @@
-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 {
@ -35,14 +37,16 @@ export const Dashboard: React.FC = () => {
            apiService.getAppsGrouped(),
            apiService.getServers(),
          ]);
-          
+
          // Flatten the grouped apps data
-          const flatApps = Object.values(appsData).flatMap(serverData => serverData.apps);
+          const flatApps = Object.values(appsData).flatMap(
+            (serverData) => serverData.apps,
+          );
          setApps(flatApps);
          setServers(serversData);
        }
      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load data');
+        setError(err instanceof Error ? err.message : "Failed to load data");
      } finally {
        setLoading(false);
      }
@ -52,8 +56,8 @@ export const Dashboard: React.FC = () => {
  }, [isMockMode]);

  // Calculate stats
-  const deployedAppsCount = apps.filter(a => a.status === 'deployed').length;
-  const 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 (
@ -84,23 +88,25 @@ 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>
@ -109,14 +115,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}`}>
--- a/src/routes/Dashboard/_Dashboard.scss
+++ b/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 {
--- a/src/routes/Recipes/RecipeForm.scss
+++ b/src/routes/Recipes/RecipeForm.scss
@ -1,100 +1,106 @@
-@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%;
 }
-
--- a/src/routes/Recipes/RecipeForm.tsx
+++ b/src/routes/Recipes/RecipeForm.tsx
@ -1,9 +1,7 @@
 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);
@ -11,26 +9,23 @@ 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,
@ -56,7 +51,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">
@ -96,7 +91,9 @@ 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>
@ -106,18 +103,24 @@ 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;
--- a/src/routes/Recipes/Recipes.scss
+++ b/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,7 +30,9 @@
  @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;
@ -77,7 +79,6 @@
    color: rgb(255, 255, 255);
    font-weight: 700;
    background-color: rgb(111, 128, 255);
-
  }
  .tag-feature {
    font-size: 12px;
@ -86,7 +87,6 @@
    color: rgb(255, 255, 255);
    font-weight: 700;
    background-color: rgb(22, 180, 22);
-
  }
  .recipe-stats {
    flex-grow: 1;
@ -99,7 +99,6 @@
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
-
    }
  }

@ -108,7 +107,12 @@
    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;
@ -145,12 +149,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 {
--- a/src/routes/Recipes/Recipes.tsx
+++ b/src/routes/Recipes/Recipes.tsx
@ -1,61 +1,59 @@
-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;
    });
@ -107,25 +105,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>

@ -136,32 +134,44 @@ 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>
        )}
@ -172,4 +182,4 @@ export const Recipes: React.FC = () => {
      </main>
    </div>
  );
-};
+};
--- a/src/routes/Servers/Server.scss
+++ b/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 {
--- a/src/routes/Servers/Server.tsx
+++ b/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,28 +88,36 @@ 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 {
@ -117,12 +125,15 @@ 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);
    }
@ -144,8 +155,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>
@ -153,15 +164,20 @@ 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>
@ -175,33 +191,34 @@ 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)}
        />
@ -211,7 +228,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>
@ -235,14 +252,24 @@ export const Server: React.FC = () => {

                <div className="info-item">
                  <label>Upgrades Available</label>
-                  <span className={server.upgradeCount > 0 ? 'stat-value warning' : 'stat-value'}>
+                  <span
+                    className={
+                      server.upgradeCount > 0
+                        ? "stat-value warning"
+                        : "stat-value"
+                    }
+                  >
                    {server.upgradeCount}
                  </span>
                </div>

                <div className="info-item">
                  <label>Chaos Mode Apps</label>
-                  <span className={chaosApps.length > 0 ? 'stat-value chaos' : 'stat-value'}>
+                  <span
+                    className={
+                      chaosApps.length > 0 ? "stat-value chaos" : "stat-value"
+                    }
+                  >
                    {chaosApps.length}
                  </span>
                </div>
@ -261,16 +288,20 @@ export const Server: React.FC = () => {

            <section className="info-card">
              <h2>Applications on this Server</h2>
-              
+
              {server.apps.length === 0 ? (
-                <div className="no-apps">No applications deployed on this server</div>
+                <div className="no-apps">
+                  No applications deployed on this server
+                </div>
              ) : (
                <div className="apps-list">
                  {server.apps.map((app, idx) => (
-                    <div 
+                    <div
                      key={`${app.appName}-${idx}`}
                      className="app-item"
-                      onClick={() => navigate(`/apps/${server.name}/${app.appName}`)}
+                      onClick={() =>
+                        navigate(`/apps/${server.name}/${app.appName}`)
+                      }
                    >
                      <div className="app-item-header">
                        <span className="app-item-name">{app.appName}</span>
@ -279,10 +310,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>
@ -290,7 +321,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"
@ -312,27 +343,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>
--- a/src/routes/Servers/Servers.scss
+++ b/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,7 +119,12 @@

    .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;
--- a/src/routes/Servers/Servers.tsx
+++ b/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,12 +42,13 @@ 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,
@ -57,11 +58,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);
      }
@ -82,27 +83,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 (
@ -132,14 +133,17 @@ 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>
@ -147,8 +151,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}
          >
@ -157,16 +161,14 @@ 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 */}
@ -183,14 +185,16 @@ 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">
@ -198,7 +202,12 @@ 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>

@ -217,17 +226,13 @@ 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>
                  )}
@ -236,7 +241,8 @@ 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>
                )}
--- a/src/services/api.ts
+++ b/src/services/api.ts
@ -1,17 +1,18 @@
-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()),
@ -21,10 +22,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,
    };

@ -34,7 +35,9 @@ 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}`);
    }

@ -43,98 +46,142 @@ 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();
--- a/src/services/mock-apps.json
+++ b/src/services/mock-apps.json
@ -590,4 +590,4 @@
    "latestCount": 3,
    "upgradeCount": 6
  }
-}
+}
--- a/src/services/mock-catalogue.json
+++ b/src/services/mock-catalogue.json
@ -1723,4 +1723,4 @@
    ],
    "website": ""
  }
-]
+]
--- a/src/services/mock-logs.json
+++ b/src/services/mock-logs.json
@ -323,4 +323,4 @@
      }
    ]
  }
-}
+}
--- a/src/services/mock-servers.json
+++ b/src/services/mock-servers.json
@ -27,4 +27,4 @@
    "host": "orgsite.org",
    "name": "orgsite.org"
  }
-]
+]
--- a/src/services/mockApi.ts
+++ b/src/services/mockApi.ts
@ -1,20 +1,19 @@
-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;
 };

@ -25,13 +24,16 @@ 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;
 };
@ -39,25 +41,25 @@ const replaceVars = (text: string, vars: Record<string, string | number>): strin
 // 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(),
@ -75,63 +77,87 @@ 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);
@ -141,5 +167,5 @@ export const mockApiService = {
  async getRecipes(): Promise<AbraRecipe[]> {
    await delay(300);
    return catalogue as AbraRecipe[];
-  }
-};
+  },
+};
--- a/src/types/index.ts
+++ b/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;
-}
+}
Author	SHA1	Message	Date
Matt Beaudoin	6258fdeee9	run formatter	2026-05-16 22:46:44 -07:00
Matt Beaudoin	2bc1bc77ce	Merge branch 'main' of https://git.coopcloud.tech/BornDeleuze/coop-cloud-front into dev	2026-05-16 19:18:25 -07:00
Matt Beaudoin	577eabd6fc	preload fonts	2026-05-16 19:16:48 -07:00
BornDeleuze	d08fdd8082	delete lock file	2026-05-17 02:01:07 +00:00
BornDeleuze	7f86e6bcc8	Merge pull request 'Merge pull request 'recipe-cards' (#13 ) from recipe-cards into dev' (#14 ) from dev into main Reviewed-on: #14	2026-05-17 01:52:45 +00:00
BornDeleuze	9aa692d877	Merge branch 'main' into dev	2026-05-17 01:52:12 +00:00
BornDeleuze	87f320376c	Merge pull request 'recipe-cards' (#13 ) from recipe-cards into dev Reviewed-on: #13	2026-05-17 01:51:17 +00:00
BornDeleuze	3727cebace	Merge pull request 'recipe-cards' (#12 ) from recipe-cards into main Reviewed-on: #12	2026-05-17 01:50:06 +00:00
BornDeleuze	f24340176f	Merge pull request 'update README, add build script for NoMock' (#11 ) from README into recipe-cards Reviewed-on: #11	2026-05-17 01:48:27 +00:00
BornDeleuze	1f7e91b871	Merge pull request 'Add Recipes and style updates' (#10 ) from dev into main Reviewed-on: #10	2026-05-16 21:17:08 +00:00