Merge pull request 'update README, add build script for NoMock' (#11) from README into recipe-cards

Reviewed-on: #11

.env.example

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

README.md

@@ -1,7 +1,52 @@
-# Coop Cloud Front 
+# Coop Cloud Front
 
-This is the frontend of a web wrapper for Coop Clouds abra CLI, letting users set up and manage VPSs and docker images through a web UI.
+Frontend for Coop Cloud — a web UI wrapper around the `abra` CLI for
+managing VPSs, containers and application deployments.
 
-## Still a work in progess!
+This repository contains a Vite + React + TypeScript app styled
+with SCSS.
 
-## This is built with react, typescript, scss, and vite
+## Quick start
+
+- Install dependencies (pnpm is recommended):
+
+pnpm install
+pnpm dev
+
+```
+
+The app uses Vite; start the dev server with `pnpm dev`.
+
+## Environment
+
+- The app reads runtime flags from Vite env variables. The default build uses mocked api data.
+-To deploy on a real API without mocking, run:
+pnpm start:prod
+
+Modify `.env` file at the project root if you need to override values for
+development (see Vite docs for env var conventions).
+
+## Scripts
+
+- `pnpm dev` — start dev server
+- `pnpm build` — run TypeScript and build production assets
+- `pnpm preview` — preview production build locally
+- `pnpm lint` — run ESLint
+- `pnpm lint:scss` — run Stylelint
+- `pnpm format` — format with Prettier
+
+## Notes about local development
+
+- The repo contains mock JSON and a `mockApi` service to develop UI without
+	a backend. Toggle mock mode with `VITE_MOCK_AUTH=true`.
+- Routes are client-side using `react-router-dom`.
+
+## Next steps / suggested work items
+
+- Add form validation and better UX for `RecipeForm`.
+- Improve accessibility.
+- Add unit tests.
+- Improve responsive layouts and card grid behaviour on narrow screens.
+- Add deployment docs and production environment variables.
+
+---

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "start": "vite",
     "dev": "vite",
+    "start:prod": "VITE_MOCK_AUTH=false pnpm start",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

src/assets/scss/_global.scss

@@ -1,6 +1,7 @@
 @use './variables' as *;
 @use './mixins' as *;
 
+
 body {
   margin: 0;
   padding: 0;
@@ -85,6 +86,7 @@ body {
   // Modifier classes for colored borders
   &.upgrade {
     border-left: 4px solid $primary-light;
+    cursor: none;
   }
 
   &.chaos {
@@ -234,6 +236,18 @@ body {
   color: $text-secondary;
 }
 
+// Ensure stat-chip shows primary-dark outline on hover and when active
+.stat-chip {
+  &:hover:not(:disabled),
+  &.active {
+    border-color: $primary-dark;
+    box-shadow: 0 0 0 3px rgba($primary-dark, 0.08);
+  }
+}
+.filter-chip {
+  cursor: default;
+}
+
 // Results count
 .results-count {
   text-align: center;

src/assets/scss/_mixins.scss

@@ -23,11 +23,98 @@
 // Card style
 @mixin card {
   background: $bg-primary;
-  border-radius: $radius-lg;
   box-shadow: $shadow-md;
   padding: $spacing-xl;
 }
 
+// Ensure cards occupy consistent vertical space and can stretch horizontally
+@mixin card-dimensions($min-width: 320px, $min-height: 180px) {
+  min-width: $min-width;
+  min-height: $min-height;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+/// Standard vertical stack for card-style list rows (dashboard recent apps, server detail apps, etc.)
+@mixin card-list-vertical($gap: $spacing-md) {
+  display: flex;
+  flex-direction: column;
+  gap: $gap;
+}
+
+/// 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;
+
+  &:hover {
+    transform: translateY($translate-y);
+    box-shadow: $hover-shadow;
+  }
+}
+
+/// Card shell with horizontal scroll (e.g. data tables)
+@mixin scrollable-card {
+  @include card;
+  overflow-x: auto;
+}
+
+/// Header block inside a card: title area with a bottom rule (server cards, etc.)
+@mixin card-header-rule {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: $spacing-lg;
+  padding-bottom: $spacing-md;
+  border-bottom: 2px solid $bg-secondary;
+}
+
+/// Primary title + muted monospace/meta line (server cards, resource headers)
+@mixin card-title-stack(
+  $title-size: $font-size-xl,
+  $title-weight: $font-weight-bold,
+  $meta-size: $font-size-sm
+) {
+  h3 {
+    margin: 0 0 $spacing-xs;
+    font-size: $title-size;
+    color: $text-primary;
+    font-weight: $title-weight;
+  }
+
+  .server-host {
+    font-size: $meta-size;
+    color: $text-muted;
+    font-family: monospace;
+  }
+}
+
+/// Label + value row inside a card body (server stats, etc.)
+@mixin card-stat-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: $spacing-sm 0;
+  border-bottom: 1px solid $bg-secondary;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+/// Full-width edge bleed for highlighted rows inside padded cards (matches card horizontal padding)
+@mixin card-row-highlight-bleed($clear-bottom-border: true) {
+  padding: $spacing-sm $spacing-md;
+  margin: $spacing-sm (-$spacing-xl);
+  padding-left: calc($spacing-xl + $spacing-md);
+  padding-right: calc($spacing-xl + $spacing-md);
+
+  @if $clear-bottom-border {
+    border-bottom: none;
+  }
+}
+
 // Button base
 @mixin button-base {
   padding: $spacing-sm $spacing-lg;
@@ -63,4 +150,63 @@
   font-weight: $font-weight-semibold;
   background-color: rgba($color, 0.1);
   // color: darken($color, 20%);
+}
+
+// Compact chip used for stat chips and small interactive chips
+@mixin chip(
+  $bg: white,
+  $border-color: $border-color,
+  $radius: $radius-md,
+  $padding: $spacing-md $spacing-lg,
+  $gap: $spacing-md,
+  $hover-translate: -2px,
+  $hover-shadow: $shadow-sm,
+  $font-size: $font-size-base
+) {
+  display: flex;
+  align-items: center;
+  gap: $gap;
+  padding: $padding;
+  background: $bg;
+  border: 2px solid $border-color;
+  border-radius: $radius;
+  cursor: pointer;
+  transition: all $transition-base;
+  font-size: $font-size;
+
+  &:hover:not(:disabled) {
+    border-color: $primary;
+    transform: translateY($hover-translate);
+    box-shadow: $hover-shadow;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+// Reusable action button styles; accepts border width and radius
+@mixin action-btn($border-width: 1px, $radius: $radius-sm, $padding: $spacing-xs $spacing-md, $font-size: $font-size-sm) {
+  background: none;
+  border: $border-width solid $border-color;
+  padding: $padding;
+  border-radius: $radius;
+  cursor: pointer;
+  font-size: $font-size;
+  color: $text-primary;
+  font-weight: $font-weight-medium;
+  transition: all $transition-base;
+
+  &:hover {
+    background-color: rgba($primary, 0.05);
+    color: $text-primary;
+    transform: translateY(-1px);
+    border-color: $primary;
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
 }

src/components/Header/Header.tsx

@@ -17,9 +17,6 @@ return(
         <img className="logo" src={logo}/>
       </h1>
       <nav className="nav">
-        <button onClick={() => navigate('/dashboard')} className="nav-link">
-          Dashboard
-        </button>
         <button onClick={() => navigate('/apps')} className="nav-link">
           Apps
         </button>

src/components/Header/_Header.scss

@@ -27,12 +27,14 @@
     margin: 0;
     display: inline-block;
     max-width: 100%;
+    cursor: pointer;
   }
 
   .nav {
     display: flex;
     gap: $spacing-sm;
     flex: 1;
+    text-align: center;
 
     @media (max-width: 768px) {
       width: 100%;

src/components/Terminal/Terminal.tsx

@@ -10,25 +10,26 @@ interface TerminalProps {
 
 export const Terminal: React.FC<TerminalProps> = ({ logs, isActive, onClose }) => {
   const terminalRef = useRef<HTMLDivElement>(null);
-  const indexRef = useRef(0);
   const [displayedLogs, setDisplayedLogs] = useState<LogEntry[]>([]);
 
   // Stream logs in with delays for realistic effect
   useEffect(() => {
     if (!isActive || logs.length === 0) {
-      indexRef.current = 0;
       setDisplayedLogs([]);
       return;
     }
 
+    setDisplayedLogs([]);
+    let currentIndex = 0;
+
     const streamLogs = () => {
-      if (indexRef.current < logs.length) {
-        setDisplayedLogs(prev => [...prev, logs[indexRef.current]]);
-        indexRef.current++;
+      if (currentIndex < logs.length) {
+        setDisplayedLogs(prev => [...prev, logs[currentIndex]]);
+        currentIndex++;
         
         // Variable delay based on log type
-        const delay = logs[indexRef.current - 1]?.type === 'command' ? 200 : 
-                     logs[indexRef.current - 1]?.type === 'output' ? 100 : 300;
+        const delay = logs[currentIndex - 1]?.type === 'command' ? 200 : 
+                     logs[currentIndex - 1]?.type === 'output' ? 100 : 300;
         
         setTimeout(streamLogs, delay);
       }
@@ -36,6 +37,7 @@ export const Terminal: React.FC<TerminalProps> = ({ logs, isActive, onClose }) =
 
     streamLogs();
   }, [logs, isActive]);
+
   // Auto-scroll to bottom
   useEffect(() => {
     if (terminalRef.current) {
@@ -71,6 +73,7 @@ export const Terminal: React.FC<TerminalProps> = ({ logs, isActive, onClose }) =
       <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>
         ))}

src/routes/Apps/App.scss

@@ -1,6 +1,8 @@
 @use '../../assets/scss/variables' as *;
 @use '../../assets/scss/mixins' as *;
 @use '../../assets/scss/global' as *;
+@use "sass:color";
+
 
 .app-detail-page {
   @extend .page-wrapper;
@@ -47,29 +49,11 @@
 
 // Action buttons
 .action-btn {
-  padding: $spacing-sm $spacing-lg;
-  border: 2px solid $border-color;
-  border-radius: $radius-md;
-  font-size: $font-size-sm;
-  font-weight: $font-weight-medium;
-  cursor: pointer;
-  transition: all $transition-base;
-  background: white;
-  color: $text-primary;
-
-  &:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  &:hover:not(:disabled) {
-    transform: translateY(-1px);
-    box-shadow: $shadow-md;
-  }
+  @include action-btn(2px, $radius-md, $spacing-sm $spacing-lg, $font-size-sm);
 
   &.primary {
     background: $primary;
-    color: white;
+    color: $text-primary;
     border-color: $primary;
 
     &:hover:not(:disabled) {
@@ -77,20 +61,11 @@
       border-color: $primary-light;
     }
   }
-  &.service {
-    &:hover:not(:disabled) {
-      background: #3fff5c9d;
 
-    }
-  }
   &.secondary {
     background: $bg-secondary;
     color: $text-primary;
     border-color: $border-color;
-
-    &:hover:not(:disabled) {
-      background: darken($bg-secondary, 5%);
-    }
   }
 
   &.danger {
@@ -99,7 +74,7 @@
     border-color: $error;
 
     &:hover:not(:disabled) {
-      background: darken($error, 10%);
+      background: color.adjust($error, $lightness: -10%);    
     }
   }
 }
@@ -137,49 +112,6 @@
   }
 }
 
-// service grid
-.service-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 2fr));
-  gap: $spacing-md;
-}
-
-.service-card {
-  @include card;
-  transition: transform $transition-base, box-shadow $transition-base;
-  position: relative;
-  overflow: hidden;
-  padding: $spacing-md;
-  .service-name {
-    h3 {
-      font-size: $font-size-lg;
-      color: $text-primary;
-      font-weight: $font-weight-bold;
-    }
-  }
-  .service-row {
-    flex-grow: 1;
-    flex: 1;
-
-    .service-value {
-      font-size: $font-size-sm;
-      display: -webkit-box;
-    }
-  }
-  &.dark-green {
-    background-color: #3fff5c;
-  }
-  &.green {
-    background-color: #3fff5c9d;
-  }
-  &.red {
-    background-color: #ff1313;
-  }
-  &.gray {
-    background-color: rgb(187, 187, 187)
-  }
-}
-
 // Info grid
 .info-grid {
   display: grid;
@@ -211,13 +143,13 @@
   }
 
   .chaos-active {
-    color: darken($info, 10%);
+    background: color.adjust($info, $lightness: -10%);    
     font-weight: $font-weight-medium;
   }
 }
 
 .domain-link {
-  color: $primary;
+  color: $primary-dark;
   text-decoration: none;
   font-size: $font-size-base;
   transition: color $transition-base;
@@ -231,7 +163,7 @@
 .server-link {
   background: none;
   border: none;
-  color: $primary;
+  color: $primary-dark;
   cursor: pointer;
   padding: 0;
   font-size: $font-size-base;
@@ -334,7 +266,7 @@
         transition: all $transition-base;
 
         &:hover:not(:disabled) {
-          background: darken($warning, 10%);
+          background: color.adjust($warning, $lightness: -10%);
           transform: translateY(-1px);
         }
 
@@ -349,7 +281,7 @@
   .version-latest {
     padding: $spacing-md;
     background: rgba($success, 0.1);
-    color: darken($success, 10%);
+    background: color.adjust($success, $lightness: -10%);
     border-radius: $radius-md;
     text-align: center;
     font-size: $font-size-base;
@@ -395,6 +327,7 @@
         background: rgba($error, 0.05);
       }
     }
+
     .action-text {
       flex: 1;
       font-weight: $font-weight-medium;

src/routes/Apps/App.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+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, AbraAppService, AbraServiceState } from '../../types';
+import type { AbraApp } from '../../types';
 import type { LogEntry } from '../../services/mockApi';
 import './App.scss';
 
@@ -12,9 +12,6 @@ export const AppDetail: React.FC = () => {
   const navigate = useNavigate();
   
   const [app, setApp] = useState<AbraApp | null>(null);
-  const [deployState, setDeployState] = useState("undeployed | deploying | deployed | failed");
-  const [serviceState, setServiceState] = useState<Record<string, AbraServiceState>>({});
-  const [services, setServices] = useState<AbraAppService[]>();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
   const [actionLoading, setActionLoading] = useState<string | null>(null);
@@ -23,26 +20,8 @@ export const AppDetail: React.FC = () => {
   const [terminalLogs, setTerminalLogs] = useState<LogEntry[]>([]);
   const [terminalActive, setTerminalActive] = useState(false);
 
-  // Stream state
-  const stopRef = useRef<null | (() => void)>(null);
-  const deployRef = useRef<null | (() => void)>(null);
+  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
 
-  // Use to refresh page
-  const [refreshKey, setRefreshKey] = useState(0);
-
-  const isMockMode = false;
-  const getServiceClass = (state: string, status: string) => {
-    if (state === "running" && status.includes("\(healthy\)")) return "service-card dark-green";
-    if (status.includes("unhealthy")) return "service-card red"
-    if (state === "running") return "service-card green";
-    return "service-card gray";
-  };
-  const getServiceClassDeploying = (state: string, status: string) => {
-    if (state.includes("converged") && status.includes("\(healthy\)")) return "service-card dark-green";
-    if (status.includes("unhealthy")) return "service-card red"
-    if (state.includes("converged")) return "service-card green";
-    return "service-card gray";
-  };
   useEffect(() => {
     const fetchApp = async () => {
       try {
@@ -59,17 +38,12 @@ export const AppDetail: React.FC = () => {
             setError('App not found');
           }
         } else {
-          console.log('fetching app...');
           const appsData = await apiService.getAppsGrouped();
           const serverApps = appsData[server || ''];
           const foundApp = serverApps?.apps.find(a => a.appName === appName);
           
           if (foundApp) {
             setApp(foundApp);
-            // when the app is deploying it should handle setting the deploy state itself after success/failure.
-            if (deployState !== "deploying") {
-              setDeployState(foundApp.status === "deployed" ? "deployed" : "undeployed");
-            }
           } else {
             setError('App not found');
           }
@@ -82,33 +56,15 @@ export const AppDetail: React.FC = () => {
     };
 
     fetchApp();
-  }, [server, appName, isMockMode, refreshKey]);
-  // checks status of app containers
-  useEffect(() => {
-    let isMounted = true;
-    const heartbeat = async () => {
-      while (isMounted) {
-        if (deployState === "deployed" && appName) {
-          const services = await apiService.getServices(appName);
-          if (services) {
-            setServices(services);
-          } else {
-            setServices([]);
-          }
-        }
+  }, [server, appName, isMockMode]);
 
-        await new Promise(resolve => setTimeout(resolve, 10000));
-      }
-    };
-    heartbeat();
-    return () => {
-      isMounted = false;
-    };
-  }, [deployState, appName]);
   const handleAction = async (action: string, version?: string) => {
     if (!app) return;
     
     setActionLoading(action);
+    setTerminalActive(true);
+    setTerminalLogs([]);
+    
     try {
       if (isMockMode) {
         const { mockApiService } = await import('../../services/mockApi');
@@ -138,54 +94,10 @@ export const AppDetail: React.FC = () => {
         switch (action) {
           case 'stop':
             await apiService.stopApp(app.appName);
-            setRefreshKey(prev => prev + 1);
             break;
           case 'deploy':
             await apiService.deployApp(app.appName);
-            setDeployState("deploying");
-            console.log("deploying");
-            deployRef.current = apiService.deployLogs(app.appName, 
-              (update) => {
-                if (update.type === "service") {
-                  console.log(update.data.name)
-                  const serviceName = update.data.name.slice(app.appName.length+1)
-                  setServiceState(prev => ({
-                    ...prev,
-                    [serviceName]: {
-                      ...prev[serviceName] ?? {}, 
-                      ...update.data
-                    }
-                  }))
-                }
-                if (update.type === "done") {
-                  console.log("done?");
-                  console.log(update.data.failed, update.data.count);
-                  if (update.data.failed) {
-                    setDeployState('failed');
-                    console.log("Deploy failed?");
-                  } else {
-                    setDeployState("deployed");
-                  }
-                  setRefreshKey(prev => prev + 1);
-                }
-              }
-            )
             break;
-          case 'logs':
-            setTerminalActive(true);
-            setTerminalLogs([]);
-            if (version) {
-              stopRef.current = apiService.getLogs(app.appName, version, 
-                (line) => {
-                  console.log(line);
-                  setTerminalLogs(prev => [...prev, {
-                    type: 'info',
-                    text: `${line}`,
-                    timestamp: new Date()
-                  }]);
-                }
-              )
-            }
         }
       }
     } catch (err) {
@@ -224,8 +136,8 @@ export const AppDetail: React.FC = () => {
       </div>
     );
   }
-  // TODO: make sure this makes sense when app.upgrade is unknown
-  const upgradeVersions = (app.upgrade !== 'latest'  && app.upgrade !== 'unknown') ? app.upgrade.split('\n') : [];
+
+  const upgradeVersions = app.upgrade !== 'latest' ? app.upgrade.split('\n') : [];
 
   return (
     <div className="app-detail-page">
@@ -246,7 +158,7 @@ export const AppDetail: React.FC = () => {
               <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="chaos-badge" title="Chaos mode enabled"> Chaos</span>
               )}
             </div>
           </div>
@@ -273,11 +185,7 @@ export const AppDetail: React.FC = () => {
         <Terminal 
           logs={terminalLogs} 
           isActive={terminalActive}
-          onClose={() => {
-            stopRef.current?.();
-            stopRef.current = null;
-            setTerminalActive(false)
-          }}
+          onClose={() => setTerminalActive(false)}
         />
 
         <div className="content-grid">
@@ -295,7 +203,7 @@ export const AppDetail: React.FC = () => {
                 <div className="info-item">
                   <label>Domain</label>
                   {app.domain ? (
-                    <a href={`https://${app.domain}`} target="_blank" rel="noopener noreferrer" className="domain-link">
+                    <a href={`https://${app.domain}`} target="_blank" rel="noopener noreferrer" className="link">
                       {app.domain} ↗
                     </a>
                   ) : (
@@ -304,13 +212,14 @@ export const AppDetail: React.FC = () => {
                 </div>
 
                 <div className="info-item">
-                  <label>Server</label>
-                  <button 
-                    onClick={() => navigate(`/servers/${app.server}`)}
-                    className="server-link"
+                  <label htmlFor="server-link">Server</label>
+                  <Link
+                    id="server-link"
+                    to={`/servers/${app.server}`}
+                    className="link"
                   >
-                    {app.server} →
-                  </button>
+                    {app.server} ↗
+                  </Link>
                 </div>
 
                 <div className="info-item">
@@ -328,75 +237,12 @@ 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'}
+                    {app.chaos === 'true' ? '☠️ Enabled' : 'Disabled'}
                   </span>
                 </div>
               </div>
             </section>
-            {(deployState === "deployed" || deployState === "failed") && (
-              <section className="info-card"> 
-                <h2> Service Information </h2>
-                <div className="service-grid">
-                  {services === undefined || services?.length === 0 ? (
-                    <div className="no-services"> Loading services... </div>
-                  ) : (
-                    services.map((service) => (
-                      <div
-                        key={service.service}
-                        className={getServiceClass(service.state, service.status)}
-                      >
-                        <div className="service-name">
-                          <h3> {service.service} </h3>
-                        </div>
-                        <div className="service-row">
-                          <span className="service-value">{service.state}</span>
-                          <span className="service-value">{service.status}</span>
-                        </div>
 
-                        <button 
-                          className="action-btn"
-                          onClick={() => handleAction('logs', service.service)}
-                          disabled={!!actionLoading}
-                        >
-                          Logs
-                        </button>
-                      </div>
-                    ))
-                  )}
-                </div>
-              </section>)}
-             {(deployState === "deploying") && (
-              <section className="info-card"> 
-                <h2> Service Information </h2>
-                <div className="service-grid">
-                  {serviceState === undefined || Object.keys(serviceState).length === 0 ? (
-                    <div className="no-services"> Preparing services... </div>
-                  ) : (
-                    Object.keys(serviceState).map((name) => (
-                      <div
-                        key={name}
-                        className={getServiceClass(serviceState[name].status, serviceState[name].health)}
-                      >
-                        <div className="service-name">
-                          <h3> {name} </h3>
-                        </div>
-                        <div className="service-row">
-                          <span className="service-value">{serviceState[name].status}</span>
-                          <span className="service-value">{serviceState[name].health}</span>
-                        </div>
-
-                        <button 
-                          className="action-btn"
-                          onClick={() => handleAction('logs', appName)}
-                          disabled={!!actionLoading}
-                        >
-                          Logs
-                        </button>
-                      </div>
-                    ))
-                  )}
-                </div>
-              </section>)}
             <section className="info-card">
               <h2>Version Information</h2>
               
@@ -436,18 +282,6 @@ export const AppDetail: React.FC = () => {
                   </div>
                 )}
 
-                {app.upgrade === 'unknown' && (
-                  <div className="version-upgrades">
-                    <label>
-                      Available Upgrades
-                    </label>
-                    <div className="upgrade-list">
-                      <div className="upgrade-item">
-                        <code>None</code>
-                      </div>
-                    </div>
-                  </div>
-                )}
                 {app.upgrade === 'latest' && (
                   <div className="version-latest">
                     ✓ Running latest version

src/routes/Apps/Apps.scss

@@ -11,10 +11,44 @@
   @extend .page-content;
 }
 
+// Compact stats row
+.stats-row {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  margin-bottom: $spacing-xl;
+  flex-wrap: wrap;
+}
+
+.stat-chip {
+  @include chip();
+
+  &.active {
+    border-color: $primary-dark;
+    background: $bg-primary;
+    box-shadow: 0 0 0 3px rgba($primary-dark, 0.08);
+  }
+
+  .stat-label {
+    color: $text-secondary;
+    font-size: $font-size-sm;
+    font-weight: $font-weight-medium;
+  }
+
+  .stat-value {
+    color: $text-primary;
+    font-size: $font-size-xl;
+    font-weight: $font-weight-bold;
+    min-width: 24px;
+    text-align: center;
+  }
+}
+
+/* reset-filters-btn removed — outline on stat-chip indicates active filters */
+
 // Apps table specific styles
 .apps-table-container {
-  @include card;
-  overflow-x: auto;
+  @include scrollable-card;
   margin-bottom: $spacing-lg;
 }
 
@@ -71,19 +105,19 @@
     font-weight: $font-weight-medium;
     color: $text-primary;
   }
-}
-
-.domain-link {
-  color: $primary;
-  text-decoration: none;
-  transition: color $transition-base;
-
-  &:hover {
-    color: $primary-light;
-    text-decoration: underline;
+  .domain-link {
+    color: $primary-dark;
+    text-decoration: none;
+    transition: color $transition-base;
+  
+    &:hover {
+      color: $primary-light;
+      text-decoration: underline;
+    }
   }
 }
 
+
 .no-domain {
   color: $text-muted;
   font-style: italic;
@@ -112,23 +146,22 @@
   gap: $spacing-sm;
 
   .action-btn {
-    background: none;
-    border: 1px solid $border-color;
-    padding: $spacing-xs $spacing-sm;
-    border-radius: $radius-sm;
-    cursor: pointer;
-    font-size: $font-size-base;
-    color: $text-primary;
-    transition: all $transition-base;
+    @include action-btn(1px, $radius-sm, $spacing-xs $spacing-md, $font-size-sm);
 
     &:hover {
-      background-color: $bg-tertiary;
-      transform: scale(1.1);
+      background-color: $primary;
+      color: white;
+      border-color: $primary;
     }
 
     &.upgrade {
       border-color: $warning;
       color: $warning;
+
+      &:hover {
+        background-color: $warning;
+        color: white;
+      }
     }
   }
-}
+}

src/routes/Apps/Apps.tsx

@@ -1,3 +1,8 @@
+
+// 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';
@@ -12,10 +17,10 @@ export const Apps: React.FC = () => {
   const [error, setError] = useState('');
   const [searchTerm, setSearchTerm] = useState('');
   const [filterServer, setFilterServer] = useState<string>('all');
-  const [filterStatus, setFilterStatus] = useState<string>('all');
   const [showUpgradesOnly, setShowUpgradesOnly] = useState(false);
-
-  const isMockMode = false;
+  const [showChaosOnly, setShowChaosOnly] = useState(false);
+  
+  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
 
   useEffect(() => {
     const fetchData = async () => {
@@ -59,7 +64,7 @@ export const Apps: React.FC = () => {
     return Object.keys(appsData);
   }, [appsData]);
 
-  // Filter apps
+  // Filter apps (additive filters: upgrades AND chaos can be applied together)
   const filteredApps = useMemo(() => {
     return allApps.filter(app => {
       const matchesSearch = 
@@ -68,14 +73,12 @@ export const Apps: React.FC = () => {
         (app.domain || '').toLowerCase().includes(searchTerm.toLowerCase());
       
       const matchesServer = filterServer === 'all' || app.server === filterServer;
-      const matchesChaos = filterStatus === 'all' || 
-        (filterStatus === 'chaos' && app.chaos === 'true') ||
-        (filterStatus === 'stable' && app.chaos === 'false');
+      const matchesChaos = !showChaosOnly || app.chaos === 'true';
       const matchesUpgrade = !showUpgradesOnly || app.upgrade !== 'latest';
 
       return matchesSearch && matchesServer && matchesChaos && matchesUpgrade;
     });
-  }, [allApps, searchTerm, filterServer, filterStatus, showUpgradesOnly]);
+  }, [allApps, searchTerm, filterServer, showUpgradesOnly, showChaosOnly]);
 
   const stats = useMemo(() => {
     const total = allApps.length;
@@ -86,6 +89,9 @@ export const Apps: React.FC = () => {
     return { total, needsUpgrade, chaosApps, totalServers };
   }, [allApps, servers]);
 
+  const toggleUpgrades = () => setShowUpgradesOnly(prev => !prev);
+  const toggleChaos = () => setShowChaosOnly(prev => !prev);
+
   if (loading) {
     return (
       <div className="apps-page">
@@ -117,32 +123,37 @@ export const Apps: React.FC = () => {
           <p className="subtitle">{stats.total} apps across {stats.totalServers} servers</p>
         </div>
 
-        {/* Stats Overview */}
-        <div className="stats-grid">
-          <div className="stat-card">
-            <div className="stat-info">
-              <p className="stat-number">{stats.total}</p>
-              <p className="stat-label">Total Apps</p>
-            </div>
-          </div>
-          <div className="stat-card upgrade">
-            <div className="stat-info">
-              <p className="stat-number">{stats.needsUpgrade}</p>
-              <p className="stat-label">Upgrades Available</p>
-            </div>
-          </div>
-          <div className="stat-card chaos">
-            <div className="stat-info">
-              <p className="stat-number">{stats.chaosApps}</p>
-              <p className="stat-label">Chaos Mode</p>
-            </div>
-          </div>
-          <div className="stat-card">
-            <div className="stat-info">
-              <p className="stat-number">{stats.totalServers}</p>
-              <p className="stat-label">Servers</p>
-            </div>
-          </div>
+        {/* Compact Stats Overview */}
+        <div className="stats-row">
+          <button
+            className="stat-chip"
+            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' : ''}`}
+            onClick={toggleUpgrades}
+            title="Click to toggle apps with upgrades available"
+            disabled={stats.needsUpgrade === 0}
+          >
+            <span className="stat-label">Upgrades</span>
+            <span className="stat-value">{stats.needsUpgrade}</span>
+          </button>
+          
+          <button
+            className={`stat-chip filter-chip ${showChaosOnly ? 'active' : ''}`}
+            onClick={toggleChaos}
+            title="Click to toggle chaos mode apps"
+            disabled={stats.chaosApps === 0}
+          >
+            <span className="stat-label">Chaos</span>
+            <span className="stat-value">{stats.chaosApps}</span>
+          </button>
+          
         </div>
 
         {/* Filters */}
@@ -161,21 +172,6 @@ export const Apps: React.FC = () => {
               <option key={server} value={server}>{server}</option>
             ))}
           </select>
-
-          <select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)}>
-            <option value="all">All Status</option>
-            <option value="stable">Stable</option>
-            <option value="chaos">Chaos Mode</option>
-          </select>
-
-          <label className="checkbox-filter">
-            <input
-              type="checkbox"
-              checked={showUpgradesOnly}
-              onChange={(e) => setShowUpgradesOnly(e.target.checked)}
-            />
-            <span>Show only apps with upgrades</span>
-          </label>
         </div>
 
         {/* Apps Table */}
@@ -189,7 +185,7 @@ export const Apps: React.FC = () => {
                 <th>Server</th>
                 <th>Version</th>
                 <th>Status</th>
-                <th>Actions</th>
+                {/* <th>Actions</th> */}
               </tr>
             </thead>
             <tbody>
@@ -247,7 +243,7 @@ export const Apps: React.FC = () => {
                         {app.status}
                       </span>
                     </td>
-                    <td>
+                    {/* <td>
                       <div className="actions">
                         <button 
                           className="action-btn" 
@@ -272,7 +268,7 @@ export const Apps: React.FC = () => {
                           </button>
                         )}
                       </div>
-                    </td>
+                    </td> */}
                   </tr>
                 ))
               )}

src/routes/Dashboard/Dashboard.tsx

@@ -12,7 +12,7 @@ export const Dashboard: React.FC = () => {
   const [error, setError] = useState('');
   const navigate = useNavigate();
 
-  const isMockMode = false;
+  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
 
   useEffect(() => {
     const fetchData = async () => {
@@ -89,7 +89,6 @@ export const Dashboard: React.FC = () => {
           <button onClick={() => navigate('/apps')} className="nav-link bland-button">
             <div className="stat-card">
               <h3>Apps</h3>
-              <p className="stat-number">{apps.length}</p>
               <p className="stat-label">
                 {deployedAppsCount} deployed
               </p>
@@ -99,7 +98,6 @@ export const Dashboard: React.FC = () => {
           <button onClick={() => navigate('/servers')} className="nav-link bland-button">
             <div className="stat-card">
               <h3>Servers</h3>
-              <p className="stat-number">{servers.length}</p>
               <p className="stat-label">
                 {serversWithAppsCount} connected
               </p>

src/routes/Dashboard/_Dashboard.scss

@@ -23,29 +23,21 @@
 }
 
 .apps-list {
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-md;
+  @include card-list-vertical;
 }
 
 .app-item {
   @include card;
+  @include card-hover-lift(-2px, $shadow-lg);
   display: flex;
   justify-content: space-between;
   align-items: center;
-  transition: transform $transition-base, box-shadow $transition-base;
   cursor: pointer;
 
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: $shadow-lg;
-  }
-
   .app-info {
     flex: 1;
 
     h4 {
-      margin: 0 0 $spacing-xs;
       font-size: $font-size-lg;
       color: $text-primary;
       font-weight: $font-weight-semibold;

src/routes/Recipes/RecipeForm.scss

@@ -0,0 +1,100 @@
+@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;
+
+	h2 {
+		margin: 0;
+		font-size: $font-size-xl;
+		color: $text-primary;
+	}
+
+	.field {
+		display: flex;
+		flex-direction: column;
+		gap: $spacing-xs;
+
+		&.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;
+
+			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);
+			}
+		}
+
+		.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;
+			}
+		}
+	}
+
+	.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);
+		}
+	}
+}
+
+.form-subtitle {
+	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;
+}
+
+.select-input {
+	width: 100%;
+}
+

src/routes/Recipes/RecipeForm.tsx

@@ -1,24 +1,26 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { apiService } from '../../services/api';
 import type { AbraServer } from '../../types';
+import './RecipeForm.scss';
 
 
 
 function RecipeForm({ recipe, onClose }) {
   const [loading, setLoading] = useState(true);
   const [servers, setServers] = useState<AbraServer[]>([]);
+  const [selectedServer, setSelectedServer] = useState(""); // ❌ only one value
+  const [chaos, setChaos] = useState(false);
+  const [secrets, setSecrets] = useState(false);
   const [error, setError] = useState('');
   
   useEffect(() => {
       const fetchData = async () => {
         try {
-          if (servers.length === 0) {
-            const [serversData] = await Promise.all([
-              apiService.getServers(),
-            ]);
-              
-            setServers(serversData);
-          }
+          const [serversData] = await Promise.all([
+            apiService.getServers(),
+          ]);
+            
+          setServers(serversData);
           
         } catch (err) {
           setError(err instanceof Error ? err.message : 'Failed to load servers');
@@ -30,40 +32,40 @@ function RecipeForm({ recipe, onClose }) {
       fetchData();
     });
   const [formData, setFormData] = useState({
-    server: "",
     domain: "",
     chaos: false,
-    secrets: false,
+    secrets: true,
   });
 
   const handleChange = (e) => {
-    const {name, type, value, checked} = e.target;
-    setFormData((prev) => ({
-      ...prev,
-      [name]: type === "checkbox" ? checked : value,
-    }));
-    console.log(formData);
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
   };
 
   const handleSubmit = (e) => {
     e.preventDefault();
     console.log("Submitting:", formData);
-    apiService.newApp(recipe.name, formData);
     onClose();
   };
 
   return (
-    <form onSubmit={handleSubmit}>
+    <form className="recipe-form" onSubmit={handleSubmit}>
       <h2>{recipe.name}</h2>
-      { loading ? (<p> Loading servers...</p> 
+      <p className="form-subtitle">Configure and deploy this recipe.</p>
+      {error && <div className="form-error">{error}</div>}
+
+      { loading ? (
+        <p className="loading">Loading servers...</p>
       ) : (
-      <div>
-        <label>
-            Choose a server to deploy to: 
+        <div className="field">
+          <label>
+            Choose a server to deploy to:
             <select
-              name="server"
-              value={formData.server || ""}
-              onChange={handleChange}
+              className="select-input"
+              value={selectedServer}
+              onChange={(e) => setSelectedServer(e.target.value)}
             >
               <option value="">None</option>
               {servers.map((server) => (
@@ -72,43 +74,48 @@ function RecipeForm({ recipe, onClose }) {
                 </option>
               ))}
             </select>
-        </label>
-      </div>
+          </label>
+        </div>
       )}
-      <div> 
+
+      <div className="field">
         <label>
           Domain:
           <input
             name="domain"
+            placeholder="example.com"
             value={formData.domain}
             onChange={handleChange}
           />
         </label>
       </div>
-      <div> 
-        <label>
-          Chaos Mode Enabled: 
+
+      <div className="field field-inline">
+        <label className="checkbox-label">
           <input
             type="checkbox"
             name="chaos"
-            onChange={handleChange}
+            checked={formData.chaos}
+            onChange={(e) => setFormData({ ...formData, chaos: e.target.checked })}
           />
+          Chaos Mode
         </label>
-      </div>
 
-      <div> 
-        <label>
-          Autogenerate Secrets: 
+        <label className="checkbox-label">
           <input
             type="checkbox"
             name="secrets"
-            onChange={handleChange}
+            checked={formData.secrets}
+            onChange={(e) => setFormData({ ...formData, secrets: e.target.checked })}
           />
+          Autogenerate Secrets
         </label>
       </div>
 
-      <button type="submit">Submit</button>
-      <button type="button" onClick={onClose}>Cancel</button>
+      <div className="form-actions">
+        <button className="action-btn primary" type="submit">Submit</button>
+        <button className="action-btn" type="button" onClick={onClose}>Cancel</button>
+      </div>
     </form>
   );
 }

src/routes/Recipes/Recipes.scss

@@ -11,10 +11,11 @@
   @extend .page-content;
 }
 
-// Servers grid
+// Recipes grid
 .recipes-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  justify-content: stretch;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: $spacing-xl;
   margin-bottom: $spacing-xl;
 
@@ -23,19 +24,16 @@
   }
 }
 
-// Server card
+// Recipe card
 .recipe-card {
   @include card;
-  display: grid;
+  @include card-dimensions(320px, 180px);
+  row-gap: 1em;
   grid-template-rows: 1fr 2fr auto 0.9fr;
   transition: transform $transition-base, box-shadow $transition-base;
   position: relative;
   overflow: hidden;
-
-  &:hover {
-    transform: translateY(-4px);
-    box-shadow: $shadow-xl;
-  }
+  max-width: 30em;
 
   .recipe-header {
     display: flex;
@@ -110,21 +108,7 @@
     gap: $spacing-sm;
     .action-btn {
       flex: 1;
-      padding: $spacing-sm $spacing-md;
-      border: 2px solid $border-color;
-      background: none;
-      color: $text-primary;
-      border-radius: $radius-md;
-      font-size: $font-size-sm;
-      font-weight: $font-weight-medium;
-      cursor: pointer;
-      transition: all $transition-base;
-
-      &:hover {
-        background-color: rgba($primary, 0.1);
-        border-color: $primary;
-        transform: translateY(-1px);
-      }
+      @include action-btn(2px, $radius-md, $spacing-sm $spacing-md, $font-size-sm);
 
       &.primary {
         background-color: $primary;

src/routes/Recipes/Recipes.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Header } from '../../components/Header/Header';
 import { apiService } from '../../services/api';
-import type { AbraApp, AppWithServer, AbraRecipe } from '../../types';
+import type { AbraApp, AbraRecipe, AppWithServer } from '../../types';
 import RecipeForm from './RecipeForm.tsx'
 import './Recipes.scss';
 
@@ -19,7 +19,7 @@ export const Recipes: React.FC = () => {
 
 
 
-  const isMockMode = false;
+  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
 
   useEffect(() => {
     const fetchData = async () => {
@@ -51,7 +51,7 @@ export const Recipes: React.FC = () => {
   }, [recipesData]);
 
 
-  // Filter apps
+  // Filter recipes
   const filteredRecipes = useMemo(() => {
     return allRecipes.filter(recipe => {
       const matchesSearch = 
@@ -72,7 +72,7 @@ export const Recipes: React.FC = () => {
       <div className="apps-page">
         <Header />
         <main className="recipes-content">
-          <div className="loading">Loading recipes...</div>
+          <div className="loading">Loading applications...</div>
         </main>
       </div>
     );
@@ -94,36 +94,20 @@ export const Recipes: React.FC = () => {
       <Header />
       <main className="recipes-content">
         <div className="page-header">
-          <h1>Applications</h1>
+          <h1>Recipes</h1>
           <p className="subtitle">{stats.total} recipes</p>
         </div>
 
-        {/* Stats Overview */}
-        <div className="stats-grid">
-          <div className="stat-card">
-            <div className="stat-info">
-              <p className="stat-number">{stats.total}</p>
-              <p className="stat-label">Total Recipes</p>
-            </div>
-          </div>
-        </div>
-
         {/* Filters */}
         <div className="filters">
           <input
             type="text"
-            placeholder="Search apps by name, recipe, or domain..."
+            placeholder="Search recipes by name or description..."
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
             className="search-input"
           />
 
-          <select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)}>
-            <option value="all">All Status</option>
-            <option value="stable">Stable</option>
-            <option value="chaos">Chaos Mode</option>
-          </select>
-
         </div>
 
         {/* Server Cards */}
@@ -135,7 +119,6 @@ export const Recipes: React.FC = () => {
               <div 
                 key={recipe.name} 
                 className="recipe-card"
-                style={{ cursor: 'pointer' }}
               >
                 <div className="recipe-header">
                   <div className="recipe-title">

src/routes/Servers/Server.scss

@@ -1,6 +1,7 @@
 @use '../../assets/scss/variables' as *;
 @use '../../assets/scss/mixins' as *;
 @use '../../assets/scss/global' as *;
+@use "sass:color";
 
 .server-detail-page {
   @extend .page-wrapper;
@@ -47,25 +48,7 @@
 
 // Action buttons (shared with App view, could be moved to global)
 .action-btn {
-  padding: $spacing-sm $spacing-lg;
-  border: 2px solid $border-color;
-  border-radius: $radius-md;
-  font-size: $font-size-sm;
-  font-weight: $font-weight-medium;
-  cursor: pointer;
-  transition: all $transition-base;
-  background: white;
-  color: $text-primary;
-
-  &:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  &:hover:not(:disabled) {
-    transform: translateY(-1px);
-    box-shadow: $shadow-md;
-  }
+  @include action-btn(2px, $radius-md, $spacing-sm $spacing-lg, $font-size-sm);
 
   &.primary {
     background: $primary;
@@ -84,7 +67,7 @@
     border-color: $border-color;
 
     &:hover:not(:disabled) {
-      background: darken($bg-secondary, 5%);
+      background: color.adjust($bg-secondary, $lightness: -10%);
     }
   }
 
@@ -94,7 +77,7 @@
     border-color: $error;
 
     &:hover:not(:disabled) {
-      background: darken($error, 10%);
+      background: color.adjust($error, $lightness: -10%);
     }
   }
 }
@@ -124,7 +107,7 @@
   gap: $spacing-xs;
   padding: $spacing-xs $spacing-md;
   background: rgba($warning, 0.1);
-  color: darken($warning, 20%);
+  background: color.adjust($error, $lightness: -20%);
   border-radius: $radius-md;
   font-size: $font-size-sm;
   font-weight: $font-weight-medium;
@@ -189,11 +172,11 @@
     color: $text-primary;
 
     &.warning {
-      color: darken($warning, 10%);
+      background: color.adjust($warning, $lightness: -10%);
     }
 
     &.chaos {
-      color: darken($info, 10%);
+      background: color.adjust($info, $lightness: -10%);
     }
   }
 
@@ -212,9 +195,7 @@
 }
 
 .apps-list {
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-md;
+  @include card-list-vertical;
 }
 
 .app-item {

src/routes/Servers/Server.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { Header } from '../../components/Header/Header';
 import { Terminal } from '../../components/Terminal/Terminal';
 import { apiService } from '../../services/api';
@@ -29,7 +29,7 @@ export const Server: React.FC = () => {
   const [terminalLogs, setTerminalLogs] = useState<LogEntry[]>([]);
   const [terminalActive, setTerminalActive] = useState(false);
 
-  const isMockMode = false;
+  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
 
   useEffect(() => {
     const fetchServer = async () => {
@@ -175,7 +175,7 @@ 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>
@@ -187,14 +187,14 @@ export const Server: React.FC = () => {
               onClick={() => handleAction('refresh')}
               disabled={!!actionLoading}
             >
-              {actionLoading === 'refresh' ? 'Refreshing...' : '🔄 Refresh'}
+              {actionLoading === 'refresh' ? 'Refreshing...' : 'Refresh'}
             </button>
             <button 
-              className="action-btn primary"
+              className="action-btn"
               onClick={() => handleAction('deploy-all')}
               disabled={!!actionLoading}
             >
-              {actionLoading === 'deploy-all' ? 'Deploying...' : '🚀 Deploy All'}
+              {actionLoading === 'deploy-all' ? 'Deploying...' : 'Deploy All'}
             </button>
           </div>
         </div>
@@ -280,7 +280,7 @@ export const Server: React.FC = () => {
                             {app.status}
                           </span>
                           {app.chaos === 'true' && (
-                            <span className="chaos-badge">🔬</span>
+                            <span className="chaos-badge">☠️</span>
                           )}
                           {app.upgrade !== 'latest' && (
                             <span className="upgrade-badge">⬆️</span>
@@ -335,7 +335,7 @@ export const Server: React.FC = () => {
                   onClick={() => handleAction('upgrade-all')}
                   disabled={!!actionLoading || server.upgradeCount === 0}
                 >
-                  <span className="action-text">⬆Upgrade All Apps</span>
+                  <span className="action-text">Upgrade All Apps</span>
                 </button>
               </div>
             </section>

src/routes/Servers/Servers.scss

@@ -14,10 +14,12 @@
 // Servers grid
 .servers-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: $spacing-xl;
   margin-bottom: $spacing-xl;
 
+  align-items: stretch;
+
   @media (max-width: 768px) {
     grid-template-columns: 1fr;
   }
@@ -26,38 +28,18 @@
 // Server card
 .server-card {
   @include card;
+  @include card-hover-lift(-4px, $shadow-xl);
+  @include card-dimensions(320px, 180px);
   display: flex;
   flex-direction: column;
-  transition: transform $transition-base, box-shadow $transition-base;
   position: relative;
   overflow: hidden;
 
-  &:hover {
-    transform: translateY(-4px);
-    box-shadow: $shadow-xl;
-  }
-
   .server-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: $spacing-lg;
-    padding-bottom: $spacing-md;
-    border-bottom: 2px solid $bg-secondary;
+    @include card-header-rule;
 
     .server-title {
-      h3 {
-        margin: 0 0 $spacing-xs;
-        font-size: $font-size-xl;
-        color: $text-primary;
-        font-weight: $font-weight-bold;
-      }
-
-      .server-host {
-        font-size: $font-size-sm;
-        color: $text-muted;
-        font-family: monospace;
-      }
+      @include card-title-stack;
     }
 
     .server-status {
@@ -80,24 +62,12 @@
     margin-bottom: $spacing-lg;
 
     .stat-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: $spacing-sm 0;
-      border-bottom: 1px solid $bg-secondary;
-
-      &:last-child {
-        border-bottom: none;
-      }
+      @include card-stat-row;
 
       // Highlighted rows
       &.highlight {
+        @include card-row-highlight-bleed;
         background-color: rgba($warning, 0.05);
-        padding: $spacing-sm $spacing-md;
-        margin: $spacing-sm (-$spacing-xl);
-        padding-left: calc($spacing-xl + $spacing-md);
-        padding-right: calc($spacing-xl + $spacing-md);
-        border-bottom: none;
 
         .stat-label {
           font-weight: $font-weight-semibold;
@@ -109,11 +79,8 @@
       }
 
       &.chaos-row {
+        @include card-row-highlight-bleed(false);
         background-color: rgba($info, 0.05);
-        padding: $spacing-sm $spacing-md;
-        margin: $spacing-sm (-$spacing-xl);
-        padding-left: calc($spacing-xl + $spacing-md);
-        padding-right: calc($spacing-xl + $spacing-md);
 
         .stat-label {
           font-weight: $font-weight-semibold;
@@ -152,26 +119,12 @@
 
     .action-btn {
       flex: 1;
-      padding: $spacing-sm $spacing-md;
-      border: 2px solid $border-color;
-      background: none;
-      color: $text-primary;
-      border-radius: $radius-md;
-      font-size: $font-size-sm;
-      font-weight: $font-weight-medium;
-      cursor: pointer;
-      transition: all $transition-base;
-
-      &:hover {
-        background-color: rgba($primary, 0.1);
-        border-color: $primary;
-        transform: translateY(-1px);
-      }
+      @include action-btn(2px, $radius-md, $spacing-sm $spacing-md, $font-size-sm);
 
       &.primary {
-        background-color: $primary;
-        color: white;
-        border-color: $primary;
+        // background-color: $primary;
+        // color: white;
+        // border-color: $primary;
 
         &:hover {
           background-color: $primary-light;

src/routes/Servers/Servers.tsx

@@ -20,59 +20,47 @@ export const Servers: React.FC = () => {
   const [error, setError] = useState('');
   const [searchTerm, setSearchTerm] = useState('');
   const [sortBy, setSortBy] = useState<'name' | 'apps' | 'upgrades'>('name');
+  const [showUpgradesOnly, setShowUpgradesOnly] = useState(false);
+  const [showChaosOnly, setShowChaosOnly] = useState(false);
 
-  const isMockMode = false;
+  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
 
   useEffect(() => {
     const fetchData = async () => {
       try {
+        let serversData, appsData;
+        
         if (isMockMode) {
           const { mockApiService } = await import('../../services/mockApi');
-          const [serversData, appsData] = await Promise.all([
+          [serversData, appsData] = await Promise.all([
             mockApiService.getServers(),
             mockApiService.getAppsGrouped(),
           ]);
-          
-          // Enrich servers with stats from apps data
-          const enrichedServers = serversData.map(server => {
-            const serverStats = appsData[server.name];
-            const chaosCount = serverStats?.apps.filter(app => app.chaos === 'true').length || 0;
-            
-            return {
-              ...server,
-              appCount: serverStats?.appCount || 0,
-              versionCount: serverStats?.versionCount || 0,
-              latestCount: serverStats?.latestCount || 0,
-              upgradeCount: serverStats?.upgradeCount || 0,
-              chaosCount,
-            };
-          });
-          
-          setServers(enrichedServers);
         } else {
-          const [serversData, appsData] = await Promise.all([
+          [serversData, appsData] = await Promise.all([
             apiService.getServers(),
             apiService.getAppsGrouped(),
           ]);
-          
-          // Enrich servers with stats from apps data
-          const enrichedServers = serversData.map(server => {
-            const serverStats = appsData[server.name];
-            const chaosCount = serverStats?.apps.filter(app => app.chaos === 'true').length || 0;
-            
-            return {
-              ...server,
-              appCount: serverStats?.appCount || 0,
-              versionCount: serverStats?.versionCount || 0,
-              latestCount: serverStats?.latestCount || 0,
-              upgradeCount: serverStats?.upgradeCount || 0,
-              chaosCount,
-            };
-          });
-          
-          setServers(enrichedServers);
         }
+        
+        // Enrich servers with stats from apps data
+        const enrichedServers = serversData.map(server => {
+          const serverStats = appsData[server.name];
+          const chaosCount = serverStats?.apps.filter(app => app.chaos === 'true').length || 0;
+          
+          return {
+            ...server,
+            appCount: serverStats?.appCount || 0,
+            versionCount: serverStats?.versionCount || 0,
+            latestCount: serverStats?.latestCount || 0,
+            upgradeCount: serverStats?.upgradeCount || 0,
+            chaosCount,
+          };
+        });
+        
+        setServers(enrichedServers);
       } catch (err) {
+        console.error('Error loading servers:', err);
         setError(err instanceof Error ? err.message : 'Failed to load servers');
       } finally {
         setLoading(false);
@@ -92,28 +80,29 @@ export const Servers: React.FC = () => {
     return { totalServers, totalApps, totalUpgrades, totalChaos };
   }, [servers]);
 
-  // Filter and sort servers
+  // Filter and sort servers (additive filters allowed)
   const filteredServers = useMemo(() => {
-    const filtered = servers.filter(server =>
+  const filtered = servers.filter(server => {
+    const matchesSearch =
       server.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      server.host.toLowerCase().includes(searchTerm.toLowerCase())
-    );
+      server.host.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesUpgrades = !showUpgradesOnly || server.upgradeCount > 0;
+    const matchesChaos = !showChaosOnly || server.chaosCount > 0;
+    return matchesSearch && matchesUpgrades && matchesChaos;
+  });
 
-    // Sort
-    filtered.sort((a, b) => {
-      switch (sortBy) {
-        case 'apps':
-          return b.appCount - a.appCount;
-        case 'upgrades':
-          return b.upgradeCount - a.upgradeCount;
-        case 'name':
-        default:
-          return a.name.localeCompare(b.name);
-      }
-    });
+  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]);
+  return filtered;
+}, [servers, searchTerm, sortBy, showUpgradesOnly]);
 
   if (loading) {
     return (
@@ -146,36 +135,38 @@ export const Servers: React.FC = () => {
           <p className="subtitle">Managing {stats.totalServers} servers with {stats.totalApps} applications</p>
         </div>
 
-        {/* Stats Overview */}
-        <div className="stats-grid">
-          <div className="stat-card">
-            <div className="stat-icon"></div>
-            <div className="stat-info">
-              <p className="stat-number">{stats.totalServers}</p>
-              <p className="stat-label">Total Servers</p>
-            </div>
-          </div>
-          <div className="stat-card">
-            <div className="stat-icon"></div>
-            <div className="stat-info">
-              <p className="stat-number">{stats.totalApps}</p>
-              <p className="stat-label">Total Apps</p>
-            </div>
-          </div>
-          <div className="stat-card upgrade">
-            <div className="stat-icon"></div>
-            <div className="stat-info">
-              <p className="stat-number">{stats.totalUpgrades}</p>
-              <p className="stat-label">Apps Need Upgrade</p>
-            </div>
-          </div>
-          <div className="stat-card chaos">
-            <div className="stat-icon"></div>
-            <div className="stat-info">
-              <p className="stat-number">{stats.totalChaos}</p>
-              <p className="stat-label">Chaos Apps</p>
-            </div>
-          </div>
+        {/* Compact Stats Row */}
+        <div className="stats-row">
+          <button
+            className="stat-chip"
+            onClick={() => navigate('/apps')}
+            title="View all apps"
+          >
+            <span className="stat-label">Apps</span>
+            <span className="stat-value">{stats.totalApps}</span>
+          </button>
+
+          <button
+            className={`stat-chip filter-chip ${showUpgradesOnly ? 'active' : ''}`}
+            onClick={() => setShowUpgradesOnly(prev => !prev)}
+            title="Click to filter by servers with upgrades"
+            disabled={stats.totalUpgrades === 0}
+          >
+            <span className="stat-label">Upgrades</span>
+            <span className="stat-value">{stats.totalUpgrades}</span>
+          </button>
+
+          <button
+            className={`stat-chip 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 */}
@@ -187,12 +178,6 @@ export const Servers: React.FC = () => {
             onChange={(e) => setSearchTerm(e.target.value)}
             className="search-input"
           />
-
-          <select value={sortBy} onChange={(e) => setSortBy(e.target.value as any)}>
-            <option value="name">Sort by Name</option>
-            <option value="apps">Sort by App Count</option>
-            <option value="upgrades">Sort by Upgrades</option>
-          </select>
         </div>
 
         {/* Server Cards */}
@@ -232,42 +217,24 @@ 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>
                   )}
                 </div>
 
-                <div className="server-actions">
-                  <button 
-                    className="action-btn primary"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      navigate(`/servers/${server.name}`);
-                    }}
-                  >
-                    View Apps
-                  </button>
-                  <button 
-                    className="action-btn"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      navigate(`/servers/${server.name}`);
-                    }}
-                  >
-                    Manage
-                  </button>
-                </div>
-
                 {server.upgradeCount > 0 && (
                   <div className="server-alert">
-                    <span className="alert-icon">⚠️</span>
                     <span className="alert-text">
                       {server.upgradeCount} app{server.upgradeCount > 1 ? 's' : ''} can be upgraded
                     </span>
@@ -284,4 +251,4 @@ export const Servers: React.FC = () => {
       </main>
     </div>
   );
-};
+};

src/services/api.ts

@@ -1,4 +1,4 @@
-import type { AbraServer, AbraRecipe, ServerAppsResponse, AbraAppService, DeployEvent } from '../types';
+import type { AbraRecipe, AbraServer, ServerAppsResponse } from '../types';
 
 // Log entry type
 export type LogEntry = {
@@ -37,52 +37,8 @@ class ApiService {
       const error = await response.json().catch(() => ({ message: 'An error occurred' }));
       throw new Error(error.message || `HTTP ${response.status}`);
     }
-    if (response.status === 204) {
-      return undefined as T;
-    }
 
-    const contentType = response.headers.get('content-type');
-
-    if (contentType?.includes('application/json')) {
-      return response.json();
-    }
-    return response.text() as unknown as T;
-  }
-
-  private stream<T>(
-    endpoint: string,
-    handlers: {
-      onMessage: (data: T) => void;
-      onError?: (err: any) => void;
-      onOpen?: () => void;
-      parser?: (raw: string) => T;
-    }
-  ) {
-    const es = new EventSource(`${API_BASE_URL}${endpoint}`);
-
-    es.onopen = () => {
-      handlers.onOpen?.();
-    };
-    es.onmessage = (event) => {
-      try {
-        const data = handlers.parser
-          ? handlers.parser(event.data)
-          : (event.data as unknown as T);
-
-        handlers.onMessage(data);
-      } catch (err) {
-        handlers.onError?.(err);
-      }
-    };
-    es.onerror = (err) => {
-      handlers.onError?.(err);
-      es.close();
-    };
-    return () => es.close();
-  }
-  // Get Logs for service
-  getLogs(appName: string, serviceName: string, msgHandler: (data: String) => void) {
-    return this.stream(`/apps/${appName}/${serviceName}/logs`, {onMessage: msgHandler})
+    return response.json();
   }
 
   // Get all apps grouped by server
@@ -94,24 +50,21 @@ class ApiService {
   async getServers(): Promise<AbraServer[]> {
     return this.request<AbraServer[]>('/servers');
   }
-  // Get services for app
-  async getServices(appName: string): Promise<AbraAppService[]> {
-    return this.request<AbraAppService[]>(`/apps/${appName}/services`);
-  }
 
   // App actions with log streaming (websocket future)
-  async deployApp(appName: string): Promise<void> {
-    return this.request<void>(`/apps/${appName}/deploy`, {
+  async deployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const response = await this.request<{ logs: any[] }>(`/apps/${appName}/deploy`, {
       method: 'POST',
     });
-  }
-  deployLogs(appName: string, msgHandler: (data: DeployEvent) => void) {
-    return this.stream(`/apps/${appName}/deploy`, {parser: JSON.parse, onMessage: msgHandler})
+
+    if (onLog && response.logs) {
+      const logs = processLogResponse(response.logs);
+      logs.forEach(log => onLog(log));
+    }
   }
 
-
-  async stopApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
-    const response = await this.request<{ logs: any[] }>(`/apps/${appName}/stop`, {
+  async undeployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const response = await this.request<{ logs: any[] }>(`/apps/${appName}/undeploy`, {
       method: 'POST',
     });
 
@@ -143,16 +96,6 @@ class ApiService {
       logs.forEach(log => onLog(log));
     }
   }
-  async newApp(appName: string, formData: Object): Promise<void> {
-    const response = await this.request<void>(`/apps/${appName}/new`, {
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json'
-      },
-      body: JSON.stringify(formData)
-    });
-    return response
-  }
 
   // Server actions with log streaming
   async refreshServer(serverName: string, onLog?: (log: LogEntry) => void): Promise<void> {
@@ -189,7 +132,7 @@ class ApiService {
   }
   // recipe catalog imports
   async getRecipes(): Promise<AbraRecipe[]> {
-    return this.request<AbraRecipe[]>('/catalogue');
+    return this.request<AbraRecipe[]>('/abra/catalogue');
   }
 }
     

src/services/mock-logs.json

@@ -119,7 +119,7 @@
     "logs": [
       {
         "type": "info",
-        "text": "⬆️ Upgrading {appName} to {version}..."
+        "text": "Upgrading {appName} to {version}..."
       },
       {
         "type": "command",
@@ -287,7 +287,7 @@
     "logs": [
       {
         "type": "info",
-        "text": "⬆️ Upgrading all apps on {serverName}..."
+        "text": "Upgrading all apps on {serverName}..."
       },
       {
         "type": "command",

src/services/mockApi.ts

@@ -1,4 +1,4 @@
-import type { AbraServer, AbraRecipe, ServerAppsResponse } from '../types';
+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';

src/types/index.ts

@@ -37,43 +37,6 @@ export interface AppWithServer extends AbraApp {
     upgradeCount: number;
   };
 }
-
-export interface AbraAppService {
-  service: string;
-  chaos: boolean;
-  created: string;
-  image: string;
-  ports: string;
-  state: string;
-  status: string;
-  version: string;
-}
-export interface AbraServiceState {
-  name: string;
-  err: string;
-  id: string;
-  status: string;
-  retries: number;
-  health: string;
-  rollback: boolean;
-  failed: boolean;
-}
-export interface DeployState {
-  count: number;
-  total: number;
-  failed: boolean;
-  quit: boolean;
-}
-
-export type DeployEvent = 
-  | {
-    type: "service";
-    data: AbraServiceState;
-  }
-  | {
-    type: "done";
-    data: DeployState;
-  }
 export interface Image {
   image: string;
   rating: string
@@ -105,4 +68,4 @@ export interface AbraRecipe {
   ssh_url: string;
   versions: RecipeVersions;
   website: string;
-}
+}