add creating new app and fix terminal bug

Reviewed-on: #6

src/components/Header/Header.tsx

@@ -26,6 +26,9 @@ return(
         <button onClick={() => navigate('/servers')} className="nav-link">
           Servers
         </button>
+        <button onClick={() => navigate('/recipes')} className="nav-link">
+          Recipes
+        </button>
       </nav>
     </div>
   </header>

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>
         ))}

src/routes/Apps/App.scss

@@ -77,7 +77,12 @@
       border-color: $primary-light;
     }
   }
+  &.service {
+    &:hover:not(:disabled) {
+      background: #3fff5c9d;
 
+    }
+  }
   &.secondary {
     background: $bg-secondary;
     color: $text-primary;
@@ -132,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;
@@ -347,7 +395,6 @@
         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 } from 'react';
+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">
@@ -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">
@@ -241,7 +333,70 @@ export const AppDetail: React.FC = () => {
                 </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>
               
@@ -281,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

src/routes/Apps/Apps.scss

@@ -11,76 +11,6 @@
   @extend .page-content;
 }
 
-// Compact stats row
-.stats-row {
-  display: flex;
-  align-items: center;
-  gap: $spacing-md;
-  margin-bottom: $spacing-xl;
-  flex-wrap: wrap;
-}
-
-.stat-chip {
-  display: flex;
-  align-items: center;
-  gap: $spacing-sm;
-  padding: $spacing-sm $spacing-md;
-  background: white;
-  border: 2px solid $border-color;
-  border-radius: $radius-md;
-  cursor: pointer;
-  transition: all $transition-base;
-  font-size: $font-size-base;
-
-  &:hover:not(:disabled) {
-    border-color: $primary;
-    transform: translateY(-2px);
-    box-shadow: $shadow-sm;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &.active {
-    border-color: $primary;
-    background: rgba($primary, 0.05);
-  }
-
-  .stat-label {
-    color: $text-secondary;
-    font-size: $font-size-sm;
-    font-weight: $font-weight-medium;
-  }
-
-  .stat-value {
-    color: $text-primary;
-    font-size: $font-size-xl;
-    font-weight: $font-weight-bold;
-    min-width: 24px;
-    text-align: center;
-  }
-}
-
-.reset-filters-btn {
-  padding: $spacing-sm $spacing-md;
-  background: $bg-secondary;
-  border: 2px solid $border-color;
-  border-radius: $radius-md;
-  cursor: pointer;
-  transition: all $transition-base;
-  font-size: $font-size-sm;
-  font-weight: $font-weight-medium;
-  color: $text-secondary;
-
-  &:hover {
-    background: white;
-    color: $text-primary;
-    border-color: $primary;
-  }
-}
-
 // Apps table specific styles
 .apps-table-container {
   @include card;
@@ -184,28 +114,21 @@
   .action-btn {
     background: none;
     border: 1px solid $border-color;
-    padding: $spacing-xs $spacing-md;
+    padding: $spacing-xs $spacing-sm;
     border-radius: $radius-sm;
     cursor: pointer;
-    font-size: $font-size-sm;
+    font-size: $font-size-base;
     color: $text-primary;
-    font-weight: $font-weight-medium;
     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;
-      }
     }
   }
-}
+}

src/routes/Apps/Apps.tsx

@@ -14,9 +14,8 @@ export const Apps: React.FC = () => {
   const [filterServer, setFilterServer] = useState<string>('all');
   const [filterStatus, setFilterStatus] = useState<string>('all');
   const [showUpgradesOnly, setShowUpgradesOnly] = useState(false);
-  const [showChaosOnly, setShowChaosOnly] = useState(false);
-  
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
+
+  const isMockMode = false;
 
   useEffect(() => {
     const fetchData = async () => {
@@ -87,28 +86,6 @@ export const Apps: React.FC = () => {
     return { total, needsUpgrade, chaosApps, totalServers };
   }, [allApps, servers]);
 
-  const resetFilters = () => {
-    setSearchTerm('');
-    setFilterServer('all');
-    setShowChaosOnly(false);
-    setShowUpgradesOnly(false);
-  };
-
-  const toggleUpgrades = () => setShowUpgradesOnly(prev => !prev);
-  const toggleChaos = () => setShowChaosOnly(prev => !prev);
-
-  // Show only apps that need upgrades
-  const filterByUpgrades = () => {
-    setShowUpgradesOnly(true);
-    setFilterStatus('all');
-  };
- 
-  // Show only chaos apps
-  const filterByChaos = () => {
-    setFilterStatus('chaos');
-    setShowUpgradesOnly(false);
-  };
-
   if (loading) {
     return (
       <div className="apps-page">
@@ -140,46 +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={resetFilters}
-            title="Click to show all apps"
-            > 
-            <span className="stat-label">Apps</span>
-            <span className="stat-value">{stats.total}</span>
-          </button>
-          
-          <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 ${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 ${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 */}
@@ -198,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 */}

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 () => {

src/routes/Recipes/RecipeForm.tsx

@@ -7,19 +7,18 @@ import type { AbraServer } from '../../types';
 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');
@@ -31,21 +30,25 @@ 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();
   };
 
@@ -58,8 +61,9 @@ function RecipeForm({ recipe, onClose }) {
         <label>
             Choose a server to deploy to: 
             <select
-              value={selectedServer}
-              onChange={(e) => setSelectedServer(e.target.value)}
+              name="server"
+              value={formData.server || ""}
+              onChange={handleChange}
             >
               <option value="">None</option>
               {servers.map((server) => (
@@ -75,8 +79,8 @@ function RecipeForm({ recipe, onClose }) {
         <label>
           Domain:
           <input
-            name="Domain"
-            value={formData.name}
+            name="domain"
+            value={formData.domain}
             onChange={handleChange}
           />
         </label>

src/routes/Recipes/Recipes.tsx

@@ -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 () => {
@@ -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>
     );

src/routes/Servers/Server.tsx

@@ -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 primary"
               onClick={() => handleAction('deploy-all')}
               disabled={!!actionLoading}
             >
-              {actionLoading === 'deploy-all' ? 'Deploying...' : 'Deploy All'}
+              {actionLoading === 'deploy-all' ? 'Deploying...' : '🚀 Deploy All'}
             </button>
           </div>
         </div>

src/routes/Servers/Servers.tsx

@@ -20,46 +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 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);
@@ -81,32 +94,26 @@ export const Servers: React.FC = () => {
 
   // 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;
-    return matchesSearch && matchesUpgrades;
-  });
+      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]);
-
-const resetFilters = () => {
-  setSearchTerm('');
-  setSortBy('name');
-  setShowUpgradesOnly(false);
-};
+    return filtered;
+  }, [servers, searchTerm, sortBy]);
 
   if (loading) {
     return (
@@ -139,53 +146,36 @@ const resetFilters = () => {
           <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={resetFilters}
-            title="Click to reset filters"
-          >
-            <span className="stat-label">Servers</span>
-            <span className="stat-value">{stats.totalServers}</span>
-          </button>
-
-          <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 ${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 ${sortBy === 'apps' ? 'active' : ''}`}
-            onClick={() => setSortBy(sortBy === 'apps' ? 'name' : 'apps')}
-            title="Click to sort by app count"
-          >
-            <span className="stat-label">Chaos</span>
-            <span className="stat-value">{stats.totalChaos}</span>
-          </button>
-
-          {(searchTerm || sortBy !== 'name' || showUpgradesOnly) && (
-            <button
-              className="reset-filters-btn"
-              onClick={resetFilters}
-            >
-              Clear filters
-            </button>
-          )}
+        {/* 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 */}
@@ -197,6 +187,12 @@ const resetFilters = () => {
             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 */}
@@ -236,17 +232,13 @@ const resetFilters = () => {
                   </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>
                   )}
@@ -275,6 +267,7 @@ const resetFilters = () => {
 
                 {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>
@@ -291,4 +284,4 @@ const resetFilters = () => {
       </main>
     </div>
   );
-};
+};

src/services/api.ts

@@ -1,4 +1,4 @@
-import type { AbraServer, AbraRecipe, 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');
   }
 }
     

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/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;
-}
+}