add creating new app and fix terminal bug

merged recipes with log streaming
added service information for each app
2026-04-18 17:35:50 -04:00 · 2026-04-18 13:32:10 -04:00 · 2026-04-18 13:28:19 -04:00
27 changed files with 5847 additions and 655 deletions
--- a/.env.example
+++ b/.env.example
@ -0,0 +1,5 @@
+# API base URL for the backend that wraps the abra CLI
+VITE_API_URL=http://localhost:3000/api
+
+# Set to 'true' to use mock data
+VITE_MOCK_AUTH=true
--- a/README.md
+++ b/README.md
@ -1,52 +1,7 @@
-# Coop Cloud Front
+# Coop Cloud Front 

-Frontend for Coop Cloud — a web UI wrapper around the `abra` CLI for
-managing VPSs, containers and application deployments.
+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.

-This repository contains a Vite + React + TypeScript app styled
-with SCSS.
+## Still a work in progess!

-## 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.
-
---
+## This is built with react, typescript, scss, and vite
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -6,7 +6,6 @@
  "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",
--- a/src/assets/scss/_global.scss
+++ b/src/assets/scss/_global.scss
@ -1,7 +1,6 @@
@use './variables' as *;
@use './mixins' as *;

-
 body {
  margin: 0;
  padding: 0;
@ -86,7 +85,6 @@ body {
  // Modifier classes for colored borders
  &.upgrade {
    border-left: 4px solid $primary-light;
-    cursor: none;
  }

  &.chaos {
@ -236,18 +234,6 @@ 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;
--- a/src/assets/scss/_mixins.scss
+++ b/src/assets/scss/_mixins.scss
@ -23,98 +23,11 @@
 // 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;
@ -150,63 +63,4 @@
  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;
-  }
 }
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@ -17,6 +17,9 @@ 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>
--- a/src/components/Header/_Header.scss
+++ b/src/components/Header/_Header.scss
@ -27,14 +27,12 @@
    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%;
--- a/src/components/Terminal/Terminal.tsx
+++ b/src/components/Terminal/Terminal.tsx
@ -10,26 +10,25 @@ 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 (currentIndex < logs.length) {
-        setDisplayedLogs(prev => [...prev, logs[currentIndex]]);
-        currentIndex++;
+      if (indexRef.current < logs.length) {
+        setDisplayedLogs(prev => [...prev, logs[indexRef.current]]);
+        indexRef.current++;
        
        // Variable delay based on log type
-        const delay = logs[currentIndex - 1]?.type === 'command' ? 200 : 
-                     logs[currentIndex - 1]?.type === 'output' ? 100 : 300;
+        const delay = logs[indexRef.current - 1]?.type === 'command' ? 200 : 
+                     logs[indexRef.current - 1]?.type === 'output' ? 100 : 300;
        
        setTimeout(streamLogs, delay);
      }
@ -37,7 +36,6 @@ export const Terminal: React.FC<TerminalProps> = ({ logs, isActive, onClose }) =

    streamLogs();
  }, [logs, isActive]);
-
  // Auto-scroll to bottom
  useEffect(() => {
    if (terminalRef.current) {
@ -73,7 +71,6 @@ 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>
        ))}
--- a/src/routes/Apps/App.scss
+++ b/src/routes/Apps/App.scss
@ -1,8 +1,6 @@
@use '../../assets/scss/variables' as *;
@use '../../assets/scss/mixins' as *;
@use '../../assets/scss/global' as *;
-@use "sass:color";
-

 .app-detail-page {
  @extend .page-wrapper;
@ -49,11 +47,29 @@

 // Action buttons
 .action-btn {
-  @include action-btn(2px, $radius-md, $spacing-sm $spacing-lg, $font-size-sm);
+  padding: $spacing-sm $spacing-lg;
+  border: 2px solid $border-color;
+  border-radius: $radius-md;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
+  cursor: pointer;
+  transition: all $transition-base;
+  background: white;
+  color: $text-primary;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  &:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: $shadow-md;
+  }

  &.primary {
    background: $primary;
-    color: $text-primary;
+    color: white;
    border-color: $primary;

    &:hover:not(:disabled) {
@ -61,11 +77,20 @@
      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 {
@ -74,7 +99,7 @@
    border-color: $error;

    &:hover:not(:disabled) {
-      background: color.adjust($error, $lightness: -10%);    
+      background: darken($error, 10%);
    }
  }
 }
@ -112,6 +137,49 @@
  }
 }

+// 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;
@ -143,13 +211,13 @@
  }

  .chaos-active {
-    background: color.adjust($info, $lightness: -10%);    
+    color: darken($info, 10%);
    font-weight: $font-weight-medium;
  }
 }

 .domain-link {
-  color: $primary-dark;
+  color: $primary;
  text-decoration: none;
  font-size: $font-size-base;
  transition: color $transition-base;
@ -163,7 +231,7 @@
 .server-link {
  background: none;
  border: none;
-  color: $primary-dark;
+  color: $primary;
  cursor: pointer;
  padding: 0;
  font-size: $font-size-base;
@ -266,7 +334,7 @@
        transition: all $transition-base;

        &:hover:not(:disabled) {
-          background: color.adjust($warning, $lightness: -10%);
+          background: darken($warning, 10%);
          transform: translateY(-1px);
        }

@ -281,7 +349,7 @@
  .version-latest {
    padding: $spacing-md;
    background: rgba($success, 0.1);
-    background: color.adjust($success, $lightness: -10%);
+    color: darken($success, 10%);
    border-radius: $radius-md;
    text-align: center;
    font-size: $font-size-base;
@ -327,7 +395,6 @@
        background: rgba($error, 0.05);
      }
    }
-
    .action-text {
      flex: 1;
      font-weight: $font-weight-medium;
--- a/src/routes/Apps/App.tsx
+++ b/src/routes/Apps/App.tsx
@ -1,9 +1,9 @@
-import React, { useEffect, useState } from 'react';
-import { Link, useNavigate, useParams } from 'react-router-dom';
+import React, { useEffect, useState, useRef } from 'react';
+import { useParams, useNavigate } 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 { AbraApp, AbraAppService, AbraServiceState } from '../../types';
 import type { LogEntry } from '../../services/mockApi';
 import './App.scss';

@ -12,6 +12,9 @@ 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);
@ -20,8 +23,26 @@ export const AppDetail: React.FC = () => {
  const [terminalLogs, setTerminalLogs] = useState<LogEntry[]>([]);
  const [terminalActive, setTerminalActive] = useState(false);

-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
+  // Stream state
+  const stopRef = useRef<null | (() => void)>(null);
+  const deployRef = useRef<null | (() => void)>(null);

+  // Use to refresh page
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const isMockMode = false;
+  const getServiceClass = (state: string, status: string) => {
+    if (state === "running" && status.includes("\(healthy\)")) return "service-card dark-green";
+    if (status.includes("unhealthy")) return "service-card red"
+    if (state === "running") return "service-card green";
+    return "service-card gray";
+  };
+  const getServiceClassDeploying = (state: string, status: string) => {
+    if (state.includes("converged") && status.includes("\(healthy\)")) return "service-card dark-green";
+    if (status.includes("unhealthy")) return "service-card red"
+    if (state.includes("converged")) return "service-card green";
+    return "service-card gray";
+  };
  useEffect(() => {
    const fetchApp = async () => {
      try {
@ -38,12 +59,17 @@ 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');
          }
@ -56,15 +82,33 @@ export const AppDetail: React.FC = () => {
    };

    fetchApp();
-  }, [server, appName, isMockMode]);
+  }, [server, appName, isMockMode, refreshKey]);
+  // checks status of app containers
+  useEffect(() => {
+    let isMounted = true;
+    const heartbeat = async () => {
+      while (isMounted) {
+        if (deployState === "deployed" && appName) {
+          const services = await apiService.getServices(appName);
+          if (services) {
+            setServices(services);
+          } else {
+            setServices([]);
+          }
+        }

+        await new Promise(resolve => setTimeout(resolve, 10000));
+      }
+    };
+    heartbeat();
+    return () => {
+      isMounted = false;
+    };
+  }, [deployState, appName]);
  const handleAction = async (action: string, version?: string) => {
    if (!app) return;
    
    setActionLoading(action);
-    setTerminalActive(true);
-    setTerminalLogs([]);
-    
    try {
      if (isMockMode) {
        const { mockApiService } = await import('../../services/mockApi');
@ -94,10 +138,54 @@ 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) {
@ -136,8 +224,8 @@ export const AppDetail: React.FC = () => {
      </div>
    );
  }
-
-  const upgradeVersions = app.upgrade !== 'latest' ? app.upgrade.split('\n') : [];
+  // TODO: make sure this makes sense when app.upgrade is unknown
+  const upgradeVersions = (app.upgrade !== 'latest'  && app.upgrade !== 'unknown') ? app.upgrade.split('\n') : [];

  return (
    <div className="app-detail-page">
@ -158,7 +246,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>
@ -185,7 +273,11 @@ export const AppDetail: React.FC = () => {
        <Terminal 
          logs={terminalLogs} 
          isActive={terminalActive}
-          onClose={() => setTerminalActive(false)}
+          onClose={() => {
+            stopRef.current?.();
+            stopRef.current = null;
+            setTerminalActive(false)
+          }}
        />

        <div className="content-grid">
@ -203,7 +295,7 @@ export const AppDetail: React.FC = () => {
                <div className="info-item">
                  <label>Domain</label>
                  {app.domain ? (
-                    <a href={`https://${app.domain}`} target="_blank" rel="noopener noreferrer" className="link">
+                    <a href={`https://${app.domain}`} target="_blank" rel="noopener noreferrer" className="domain-link">
                      {app.domain} ↗
                    </a>
                  ) : (
@ -212,14 +304,13 @@ export const AppDetail: React.FC = () => {
                </div>

                <div className="info-item">
-                  <label htmlFor="server-link">Server</label>
-                  <Link
-                    id="server-link"
-                    to={`/servers/${app.server}`}
-                    className="link"
+                  <label>Server</label>
+                  <button 
+                    onClick={() => navigate(`/servers/${app.server}`)}
+                    className="server-link"
                  >
-                    {app.server} ↗
-                  </Link>
+                    {app.server} →
+                  </button>
                </div>

                <div className="info-item">
@ -237,12 +328,75 @@ 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>
              
@ -282,6 +436,18 @@ 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
--- a/src/routes/Apps/Apps.scss
+++ b/src/routes/Apps/Apps.scss
@ -11,44 +11,10 @@
  @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 scrollable-card;
+  @include card;
+  overflow-x: auto;
  margin-bottom: $spacing-lg;
 }

@ -105,18 +71,18 @@
    font-weight: $font-weight-medium;
    color: $text-primary;
  }
-  .domain-link {
-    color: $primary-dark;
-    text-decoration: none;
-    transition: color $transition-base;
-  
-    &:hover {
-      color: $primary-light;
-      text-decoration: underline;
-    }
-  }
 }

+.domain-link {
+  color: $primary;
+  text-decoration: none;
+  transition: color $transition-base;
+
+  &:hover {
+    color: $primary-light;
+    text-decoration: underline;
+  }
+}

 .no-domain {
  color: $text-muted;
@ -146,22 +112,23 @@
  gap: $spacing-sm;

  .action-btn {
-    @include action-btn(1px, $radius-sm, $spacing-xs $spacing-md, $font-size-sm);
+    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;

    &:hover {
-      background-color: $primary;
-      color: white;
-      border-color: $primary;
+      background-color: $bg-tertiary;
+      transform: scale(1.1);
    }

    &.upgrade {
      border-color: $warning;
      color: $warning;
-
-      &:hover {
-        background-color: $warning;
-        color: white;
-      }
    }
  }
-}
+}
--- a/src/routes/Apps/Apps.tsx
+++ b/src/routes/Apps/Apps.tsx
@ -1,8 +1,3 @@
-
-// 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';
@ -17,10 +12,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 [showChaosOnly, setShowChaosOnly] = useState(false);
-  
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
+
+  const isMockMode = false;

  useEffect(() => {
    const fetchData = async () => {
@ -64,7 +59,7 @@ export const Apps: React.FC = () => {
    return Object.keys(appsData);
  }, [appsData]);

-  // Filter apps (additive filters: upgrades AND chaos can be applied together)
+  // Filter apps
  const filteredApps = useMemo(() => {
    return allApps.filter(app => {
      const matchesSearch = 
@ -73,12 +68,14 @@ export const Apps: React.FC = () => {
        (app.domain || '').toLowerCase().includes(searchTerm.toLowerCase());
      
      const matchesServer = filterServer === 'all' || app.server === filterServer;
-      const matchesChaos = !showChaosOnly || app.chaos === 'true';
+      const matchesChaos = filterStatus === 'all' || 
+        (filterStatus === 'chaos' && app.chaos === 'true') ||
+        (filterStatus === 'stable' && app.chaos === 'false');
      const matchesUpgrade = !showUpgradesOnly || app.upgrade !== 'latest';

      return matchesSearch && matchesServer && matchesChaos && matchesUpgrade;
    });
-  }, [allApps, searchTerm, filterServer, showUpgradesOnly, showChaosOnly]);
+  }, [allApps, searchTerm, filterServer, filterStatus, showUpgradesOnly]);

  const stats = useMemo(() => {
    const total = allApps.length;
@ -89,9 +86,6 @@ 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">
@ -123,37 +117,32 @@ export const Apps: React.FC = () => {
          <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')}
-            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>
-          
+        {/* 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>
        </div>

        {/* Filters */}
@ -172,6 +161,21 @@ 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 */}
@ -185,7 +189,7 @@ export const Apps: React.FC = () => {
                <th>Server</th>
                <th>Version</th>
                <th>Status</th>
-                {/* <th>Actions</th> */}
+                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
@ -243,7 +247,7 @@ export const Apps: React.FC = () => {
                        {app.status}
                      </span>
                    </td>
-                    {/* <td>
+                    <td>
                      <div className="actions">
                        <button 
                          className="action-btn" 
@ -268,7 +272,7 @@ export const Apps: React.FC = () => {
                          </button>
                        )}
                      </div>
-                    </td> */}
+                    </td>
                  </tr>
                ))
              )}
--- a/src/routes/Dashboard/Dashboard.tsx
+++ b/src/routes/Dashboard/Dashboard.tsx
@ -12,7 +12,7 @@ export const Dashboard: React.FC = () => {
  const [error, setError] = useState('');
  const navigate = useNavigate();

-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
+  const isMockMode = false;

  useEffect(() => {
    const fetchData = async () => {
@ -89,6 +89,7 @@ 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>
@ -98,6 +99,7 @@ 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>
--- a/src/routes/Dashboard/_Dashboard.scss
+++ b/src/routes/Dashboard/_Dashboard.scss
@ -23,21 +23,29 @@
 }

 .apps-list {
-  @include card-list-vertical;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
 }

 .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;
--- a/src/routes/Recipes/RecipeForm.scss
+++ b/src/routes/Recipes/RecipeForm.scss
@ -1,100 +0,0 @@
-@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%;
-}
-
--- a/src/routes/Recipes/RecipeForm.tsx
+++ b/src/routes/Recipes/RecipeForm.tsx
@ -1,26 +1,24 @@
-import { useEffect, useState } from "react";
+import { useState, useEffect } 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 {
-          const [serversData] = await Promise.all([
-            apiService.getServers(),
-          ]);
-            
-          setServers(serversData);
+          if (servers.length === 0) {
+            const [serversData] = await Promise.all([
+              apiService.getServers(),
+            ]);
+              
+            setServers(serversData);
+          }
          
        } catch (err) {
          setError(err instanceof Error ? err.message : 'Failed to load servers');
@ -32,40 +30,40 @@ function RecipeForm({ recipe, onClose }) {
      fetchData();
    });
  const [formData, setFormData] = useState({
+    server: "",
    domain: "",
    chaos: false,
-    secrets: true,
+    secrets: false,
  });

  const handleChange = (e) => {
-    setFormData({
-      ...formData,
-      [e.target.name]: e.target.value,
-    });
+    const {name, type, value, checked} = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: type === "checkbox" ? checked : value,
+    }));
+    console.log(formData);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Submitting:", formData);
+    apiService.newApp(recipe.name, formData);
    onClose();
  };

  return (
-    <form className="recipe-form" onSubmit={handleSubmit}>
+    <form onSubmit={handleSubmit}>
      <h2>{recipe.name}</h2>
-      <p className="form-subtitle">Configure and deploy this recipe.</p>
-      {error && <div className="form-error">{error}</div>}
-
-      { loading ? (
-        <p className="loading">Loading servers...</p>
+      { loading ? (<p> Loading servers...</p> 
      ) : (
-        <div className="field">
-          <label>
-            Choose a server to deploy to:
+      <div>
+        <label>
+            Choose a server to deploy to: 
            <select
-              className="select-input"
-              value={selectedServer}
-              onChange={(e) => setSelectedServer(e.target.value)}
+              name="server"
+              value={formData.server || ""}
+              onChange={handleChange}
            >
              <option value="">None</option>
              {servers.map((server) => (
@ -74,48 +72,43 @@ function RecipeForm({ recipe, onClose }) {
                </option>
              ))}
            </select>
-          </label>
-        </div>
+        </label>
+      </div>
      )}
-
-      <div className="field">
+      <div> 
        <label>
          Domain:
          <input
            name="domain"
-            placeholder="example.com"
            value={formData.domain}
            onChange={handleChange}
          />
        </label>
      </div>
-
-      <div className="field field-inline">
-        <label className="checkbox-label">
+      <div> 
+        <label>
+          Chaos Mode Enabled: 
          <input
            type="checkbox"
            name="chaos"
-            checked={formData.chaos}
-            onChange={(e) => setFormData({ ...formData, chaos: e.target.checked })}
+            onChange={handleChange}
          />
-          Chaos Mode
        </label>
+      </div>

-        <label className="checkbox-label">
+      <div> 
+        <label>
+          Autogenerate Secrets: 
          <input
            type="checkbox"
            name="secrets"
-            checked={formData.secrets}
-            onChange={(e) => setFormData({ ...formData, secrets: e.target.checked })}
+            onChange={handleChange}
          />
-          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>
-      </div>
+      <button type="submit">Submit</button>
+      <button type="button" onClick={onClose}>Cancel</button>
    </form>
  );
 }
--- a/src/routes/Recipes/Recipes.scss
+++ b/src/routes/Recipes/Recipes.scss
@ -11,11 +11,10 @@
  @extend .page-content;
 }

-// Recipes grid
+// Servers grid
 .recipes-grid {
  display: grid;
-  justify-content: stretch;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: $spacing-xl;
  margin-bottom: $spacing-xl;

@ -24,16 +23,19 @@
  }
 }

-// Recipe card
+// Server card
 .recipe-card {
  @include card;
-  @include card-dimensions(320px, 180px);
-  row-gap: 1em;
+  display: grid;
  grid-template-rows: 1fr 2fr auto 0.9fr;
  transition: transform $transition-base, box-shadow $transition-base;
  position: relative;
  overflow: hidden;
-  max-width: 30em;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: $shadow-xl;
+  }

  .recipe-header {
    display: flex;
@ -108,7 +110,21 @@
    gap: $spacing-sm;
    .action-btn {
      flex: 1;
-      @include action-btn(2px, $radius-md, $spacing-sm $spacing-md, $font-size-sm);
+      padding: $spacing-sm $spacing-md;
+      border: 2px solid $border-color;
+      background: none;
+      color: $text-primary;
+      border-radius: $radius-md;
+      font-size: $font-size-sm;
+      font-weight: $font-weight-medium;
+      cursor: pointer;
+      transition: all $transition-base;
+
+      &:hover {
+        background-color: rgba($primary, 0.1);
+        border-color: $primary;
+        transform: translateY(-1px);
+      }

      &.primary {
        background-color: $primary;
--- a/src/routes/Recipes/Recipes.tsx
+++ b/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, AbraRecipe, AppWithServer } from '../../types';
+import type { AbraApp, AppWithServer, AbraRecipe } from '../../types';
 import RecipeForm from './RecipeForm.tsx'
 import './Recipes.scss';

@ -19,7 +19,7 @@ export const Recipes: React.FC = () => {



-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
+  const isMockMode = false;

  useEffect(() => {
    const fetchData = async () => {
@ -51,7 +51,7 @@ export const Recipes: React.FC = () => {
  }, [recipesData]);


-  // Filter recipes
+  // Filter apps
  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 applications...</div>
+          <div className="loading">Loading recipes...</div>
        </main>
      </div>
    );
@ -94,20 +94,36 @@ export const Recipes: React.FC = () => {
      <Header />
      <main className="recipes-content">
        <div className="page-header">
-          <h1>Recipes</h1>
+          <h1>Applications</h1>
          <p className="subtitle">{stats.total} recipes</p>
        </div>

+        {/* Stats Overview */}
+        <div className="stats-grid">
+          <div className="stat-card">
+            <div className="stat-info">
+              <p className="stat-number">{stats.total}</p>
+              <p className="stat-label">Total Recipes</p>
+            </div>
+          </div>
+        </div>
+
        {/* Filters */}
        <div className="filters">
          <input
            type="text"
-            placeholder="Search recipes by name or description..."
+            placeholder="Search apps by name, recipe, or domain..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="search-input"
          />

+          <select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)}>
+            <option value="all">All Status</option>
+            <option value="stable">Stable</option>
+            <option value="chaos">Chaos Mode</option>
+          </select>
+
        </div>

        {/* Server Cards */}
@ -119,6 +135,7 @@ export const Recipes: React.FC = () => {
              <div 
                key={recipe.name} 
                className="recipe-card"
+                style={{ cursor: 'pointer' }}
              >
                <div className="recipe-header">
                  <div className="recipe-title">
--- a/src/routes/Servers/Server.scss
+++ b/src/routes/Servers/Server.scss
@ -1,7 +1,6 @@
@use '../../assets/scss/variables' as *;
@use '../../assets/scss/mixins' as *;
@use '../../assets/scss/global' as *;
-@use "sass:color";

 .server-detail-page {
  @extend .page-wrapper;
@ -48,7 +47,25 @@

 // Action buttons (shared with App view, could be moved to global)
 .action-btn {
-  @include action-btn(2px, $radius-md, $spacing-sm $spacing-lg, $font-size-sm);
+  padding: $spacing-sm $spacing-lg;
+  border: 2px solid $border-color;
+  border-radius: $radius-md;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
+  cursor: pointer;
+  transition: all $transition-base;
+  background: white;
+  color: $text-primary;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  &:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: $shadow-md;
+  }

  &.primary {
    background: $primary;
@ -67,7 +84,7 @@
    border-color: $border-color;

    &:hover:not(:disabled) {
-      background: color.adjust($bg-secondary, $lightness: -10%);
+      background: darken($bg-secondary, 5%);
    }
  }

@ -77,7 +94,7 @@
    border-color: $error;

    &:hover:not(:disabled) {
-      background: color.adjust($error, $lightness: -10%);
+      background: darken($error, 10%);
    }
  }
 }
@ -107,7 +124,7 @@
  gap: $spacing-xs;
  padding: $spacing-xs $spacing-md;
  background: rgba($warning, 0.1);
-  background: color.adjust($error, $lightness: -20%);
+  color: darken($warning, 20%);
  border-radius: $radius-md;
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
@ -172,11 +189,11 @@
    color: $text-primary;

    &.warning {
-      background: color.adjust($warning, $lightness: -10%);
+      color: darken($warning, 10%);
    }

    &.chaos {
-      background: color.adjust($info, $lightness: -10%);
+      color: darken($info, 10%);
    }
  }

@ -195,7 +212,9 @@
 }

 .apps-list {
-  @include card-list-vertical;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
 }

 .app-item {
--- a/src/routes/Servers/Server.tsx
+++ b/src/routes/Servers/Server.tsx
@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams, useNavigate } 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 = import.meta.env.VITE_MOCK_AUTH === 'true';
+  const isMockMode = false;

  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"
+              className="action-btn primary"
              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>
--- a/src/routes/Servers/Servers.scss
+++ b/src/routes/Servers/Servers.scss
@ -14,12 +14,10 @@
 // Servers grid
 .servers-grid {
  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: $spacing-xl;
  margin-bottom: $spacing-xl;

-  align-items: stretch;
-
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
@ -28,18 +26,38 @@
 // 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 {
-    @include 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;

    .server-title {
-      @include card-title-stack;
+      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;
+      }
    }

    .server-status {
@ -62,12 +80,24 @@
    margin-bottom: $spacing-lg;

    .stat-row {
-      @include 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;
+      }

      // 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;
@ -79,8 +109,11 @@
      }

      &.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;
@ -119,12 +152,26 @@

    .action-btn {
      flex: 1;
-      @include action-btn(2px, $radius-md, $spacing-sm $spacing-md, $font-size-sm);
+      padding: $spacing-sm $spacing-md;
+      border: 2px solid $border-color;
+      background: none;
+      color: $text-primary;
+      border-radius: $radius-md;
+      font-size: $font-size-sm;
+      font-weight: $font-weight-medium;
+      cursor: pointer;
+      transition: all $transition-base;
+
+      &:hover {
+        background-color: rgba($primary, 0.1);
+        border-color: $primary;
+        transform: translateY(-1px);
+      }

      &.primary {
-        // background-color: $primary;
-        // color: white;
-        // border-color: $primary;
+        background-color: $primary;
+        color: white;
+        border-color: $primary;

        &:hover {
          background-color: $primary-light;
--- a/src/routes/Servers/Servers.tsx
+++ b/src/routes/Servers/Servers.tsx
@ -20,47 +20,59 @@ 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 = import.meta.env.VITE_MOCK_AUTH === 'true';
+  const isMockMode = false;

  useEffect(() => {
    const fetchData = async () => {
      try {
-        let serversData, appsData;
-        
        if (isMockMode) {
          const { mockApiService } = await import('../../services/mockApi');
-          [serversData, appsData] = await Promise.all([
+          const [serversData, appsData] = await Promise.all([
            mockApiService.getServers(),
            mockApiService.getAppsGrouped(),
          ]);
+          
+          // Enrich servers with stats from apps data
+          const enrichedServers = serversData.map(server => {
+            const serverStats = appsData[server.name];
+            const chaosCount = serverStats?.apps.filter(app => app.chaos === 'true').length || 0;
+            
+            return {
+              ...server,
+              appCount: serverStats?.appCount || 0,
+              versionCount: serverStats?.versionCount || 0,
+              latestCount: serverStats?.latestCount || 0,
+              upgradeCount: serverStats?.upgradeCount || 0,
+              chaosCount,
+            };
+          });
+          
+          setServers(enrichedServers);
        } else {
-          [serversData, appsData] = await Promise.all([
+          const [serversData, appsData] = await Promise.all([
            apiService.getServers(),
            apiService.getAppsGrouped(),
          ]);
-        }
-        
-        // Enrich servers with stats from apps data
-        const enrichedServers = serversData.map(server => {
-          const serverStats = appsData[server.name];
-          const chaosCount = serverStats?.apps.filter(app => app.chaos === 'true').length || 0;
          
-          return {
-            ...server,
-            appCount: serverStats?.appCount || 0,
-            versionCount: serverStats?.versionCount || 0,
-            latestCount: serverStats?.latestCount || 0,
-            upgradeCount: serverStats?.upgradeCount || 0,
-            chaosCount,
-          };
-        });
-        
-        setServers(enrichedServers);
+          // 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);
@ -80,29 +92,28 @@ export const Servers: React.FC = () => {
    return { totalServers, totalApps, totalUpgrades, totalChaos };
  }, [servers]);

-  // Filter and sort servers (additive filters allowed)
+  // Filter and sort servers
  const filteredServers = useMemo(() => {
-  const filtered = servers.filter(server => {
-    const matchesSearch =
+    const filtered = servers.filter(server =>
      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;
-  });
+      server.host.toLowerCase().includes(searchTerm.toLowerCase())
+    );

-  filtered.sort((a, b) => {
-    switch (sortBy) {
-      case 'apps':
-        return b.appCount - a.appCount;
-      case 'name':
-      default:
-        return a.name.localeCompare(b.name);
-    }
-  });
+    // Sort
+    filtered.sort((a, b) => {
+      switch (sortBy) {
+        case 'apps':
+          return b.appCount - a.appCount;
+        case 'upgrades':
+          return b.upgradeCount - a.upgradeCount;
+        case 'name':
+        default:
+          return a.name.localeCompare(b.name);
+      }
+    });

-  return filtered;
-}, [servers, searchTerm, sortBy, showUpgradesOnly]);
+    return filtered;
+  }, [servers, searchTerm, sortBy]);

  if (loading) {
    return (
@ -135,38 +146,36 @@ export const Servers: React.FC = () => {
          <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')}
-            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 */}
+        {/* Stats Overview */}
+        <div className="stats-grid">
+          <div className="stat-card">
+            <div className="stat-icon"></div>
+            <div className="stat-info">
+              <p className="stat-number">{stats.totalServers}</p>
+              <p className="stat-label">Total Servers</p>
+            </div>
+          </div>
+          <div className="stat-card">
+            <div className="stat-icon"></div>
+            <div className="stat-info">
+              <p className="stat-number">{stats.totalApps}</p>
+              <p className="stat-label">Total Apps</p>
+            </div>
+          </div>
+          <div className="stat-card upgrade">
+            <div className="stat-icon"></div>
+            <div className="stat-info">
+              <p className="stat-number">{stats.totalUpgrades}</p>
+              <p className="stat-label">Apps Need Upgrade</p>
+            </div>
+          </div>
+          <div className="stat-card chaos">
+            <div className="stat-icon"></div>
+            <div className="stat-info">
+              <p className="stat-number">{stats.totalChaos}</p>
+              <p className="stat-label">Chaos Apps</p>
+            </div>
+          </div>
        </div>

        {/* Filters */}
@ -178,6 +187,12 @@ 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 */}
@ -217,24 +232,42 @@ 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>
@ -251,4 +284,4 @@ export const Servers: React.FC = () => {
      </main>
    </div>
  );
-};
+};
--- a/src/services/api.ts
+++ b/src/services/api.ts
@ -1,4 +1,4 @@
-import type { AbraRecipe, AbraServer, ServerAppsResponse } from '../types';
+import type { AbraServer, AbraRecipe, ServerAppsResponse, AbraAppService, DeployEvent } from '../types';

 // Log entry type
 export type LogEntry = {
@ -37,8 +37,52 @@ class ApiService {
      const error = await response.json().catch(() => ({ message: 'An error occurred' }));
      throw new Error(error.message || `HTTP ${response.status}`);
    }
+    if (response.status === 204) {
+      return undefined as T;
+    }

-    return response.json();
+    const contentType = response.headers.get('content-type');
+
+    if (contentType?.includes('application/json')) {
+      return response.json();
+    }
+    return response.text() as unknown as T;
+  }
+
+  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})
  }

  // Get all apps grouped by server
@ -50,21 +94,24 @@ class ApiService {
  async getServers(): Promise<AbraServer[]> {
    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',
-    });
-
-    if (onLog && response.logs) {
-      const logs = processLogResponse(response.logs);
-      logs.forEach(log => onLog(log));
-    }
+  // Get services for app
+  async getServices(appName: string): Promise<AbraAppService[]> {
+    return this.request<AbraAppService[]>(`/apps/${appName}/services`);
  }

-  async undeployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
-    const response = await this.request<{ logs: any[] }>(`/apps/${appName}/undeploy`, {
+  // App actions with log streaming (websocket future)
+  async deployApp(appName: string): Promise<void> {
+    return this.request<void>(`/apps/${appName}/deploy`, {
+      method: 'POST',
+    });
+  }
+  deployLogs(appName: string, msgHandler: (data: DeployEvent) => void) {
+    return this.stream(`/apps/${appName}/deploy`, {parser: JSON.parse, onMessage: msgHandler})
+  }
+
+
+  async stopApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const response = await this.request<{ logs: any[] }>(`/apps/${appName}/stop`, {
      method: 'POST',
    });

@ -96,6 +143,16 @@ 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> {
@ -132,7 +189,7 @@ class ApiService {
  }
  // recipe catalog imports
  async getRecipes(): Promise<AbraRecipe[]> {
-    return this.request<AbraRecipe[]>('/abra/catalogue');
+    return this.request<AbraRecipe[]>('/catalogue');
  }
 }
    
--- a/src/services/mock-logs.json
+++ b/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",
--- a/src/services/mockApi.ts
+++ b/src/services/mockApi.ts
@ -1,4 +1,4 @@
-import type { AbraRecipe, AbraServer, ServerAppsResponse } from '../types';
+import type { AbraServer, AbraRecipe, ServerAppsResponse } from '../types';
 import appsData from './mock-apps.json';
 import serversData from './mock-servers.json';
 import logsData from './mock-logs.json';
--- a/src/types/index.ts
+++ b/src/types/index.ts
@ -37,6 +37,43 @@ 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
@ -68,4 +105,4 @@ export interface AbraRecipe {
  ssh_url: string;
  versions: RecipeVersions;
  website: string;
-}
+}
Author	SHA1	Message	Date
hey	6ecc158268	add creating new app and fix terminal bug	2026-04-18 17:35:50 -04:00
hey	864640a15e	merged recipes with log streaming	2026-04-18 13:32:10 -04:00
hey	9b1eaf168f	added service information for each app	2026-04-18 13:28:19 -04:00