merge changes from dev branch

package.json

@@ -16,9 +16,11 @@
     "format:check": "prettier --check 'src/**/*.{ts,tsx,scss,css,json}'"
   },
   "dependencies": {
+    "prismjs": "^1.30.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-router-dom": "^7.9.5"
+    "react-router-dom": "^7.9.5",
+    "react-simple-code-editor": "^0.14.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",

src/components/Editor/Editor.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState, useRef } from "react";
+import { apiService } from '../../services/api';
+import Editor from "react-simple-code-editor";
+import Prism from "prismjs";
+
+// import a theme + language
+import "prismjs/themes/prism.css";
+import "prismjs/components/prism-javascript";
+
+interface EditorProps {
+  appName: string;
+}
+
+export const EditorPage:  React.FC<EditorProps> = ({ appName }) => {
+  const [code, setCode] = useState("");
+  useEffect(() => {
+    document.body.classList.add("modal-open");
+
+    return () => {
+      document.body.classList.remove("modal-open");
+    };
+  }, []);
+  useEffect(() => {
+    const fetchCode = async () => {
+      const config = await apiService.getConfig(appName);
+      setCode(config);
+    }
+    fetchCode();
+  }, []);
+
+  const saveFile = async () => {
+     await apiService.writeConfig(appName, code) 
+  };
+
+  return (
+    <div>
+      <Editor
+        value={code}
+        onValueChange={code => setCode(code)}
+        highlight={code => Prism.highlight(code, Prism.languages.javascript, "javascript")}
+        padding={10}
+        style={{
+          fontFamily: '"Fira code", "Fira Mono", monospace',
+          fontSize: 14,
+          border: "1px solid #ccc",
+          minHeight: "300px",
+        }}
+      />
+      <button onClick={saveFile}>Save</button>
+    </div>
+  );
+};

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/Loader/Loader.scss

@@ -0,0 +1,20 @@
+@use '../../assets/scss/variables' as *;
+
+.loader {
+  display: inline-flex;   // instead of block
+  align-items: center;    // center SVG inside
+  line-height: 1;         // prevents extra vertical space
+  svg {
+    display: block;
+  }
+
+  rect {
+    fill: $primary-light;
+  }
+
+  &--style7 {
+    rect {
+      transform-origin: center bottom;
+    }
+  }
+}

src/components/Loader/Loader.tsx

@@ -0,0 +1,35 @@
+import "./Loader.scss";
+
+export const Loader = () => {
+  return (
+    <div className="loader loader--style6" title="5">
+      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        width="24px" height="30px" viewBox="0 0 24 30" style={{ enableBackground: "new 0 0 50 50" }} xml:space="preserve">
+        <rect x="0" y="13" width="4" height="5" fill="#333">
+          <animate attributeName="height" attributeType="XML"
+            values="5;21;5" 
+            begin="0s" dur="0.6s" repeatCount="indefinite" />
+          <animate attributeName="y" attributeType="XML"
+            values="13; 5; 13"
+            begin="0s" dur="0.6s" repeatCount="indefinite" />
+        </rect>
+        <rect x="10" y="13" width="4" height="5" fill="#333">
+          <animate attributeName="height" attributeType="XML"
+            values="5;21;5" 
+            begin="0.15s" dur="0.6s" repeatCount="indefinite" />
+          <animate attributeName="y" attributeType="XML"
+            values="13; 5; 13"
+            begin="0.15s" dur="0.6s" repeatCount="indefinite" />
+        </rect>
+        <rect x="20" y="13" width="4" height="5" fill="#333">
+          <animate attributeName="height" attributeType="XML"
+            values="5;21;5" 
+            begin="0.3s" dur="0.6s" repeatCount="indefinite" />
+          <animate attributeName="y" attributeType="XML"
+            values="13; 5; 13"
+            begin="0.3s" dur="0.6s" repeatCount="indefinite" />
+        </rect>
+      </svg>
+    </div>
+  );
+};

src/components/Spinner/Spinner.scss

@@ -0,0 +1,43 @@
+// magic spinner stuff
+
+$offset: 187;
+$duration: 1.4s;
+
+.spinner {
+  margin-top: 10px;
+  animation: rotator $duration linear infinite;
+}
+
+@keyframes rotator {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(270deg); }
+}
+
+.path {
+  stroke-dasharray: $offset;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  animation:
+    dash $duration ease-in-out infinite, 
+    colors ($duration*4) ease-in-out infinite;
+}
+
+@keyframes colors {
+	0% { stroke: #4285F4; }
+	25% { stroke: #DE3E35; }
+	50% { stroke: #F7C223; }
+	75% { stroke: #1B9A59; }
+  100% { stroke: #4285F4; }
+}
+
+@keyframes dash {
+ 0% { stroke-dashoffset: $offset; }
+ 50% {
+   stroke-dashoffset: $offset/4;
+   transform:rotate(135deg);
+ }
+ 100% {
+   stroke-dashoffset: $offset;
+   transform:rotate(450deg);
+ }
+}

src/components/Spinner/Spinner.tsx

@@ -0,0 +1,9 @@
+import "./Spinner.scss"
+
+export const Spinner = () => {
+  return (
+    <svg className="spinner" width="40px" height="40px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+      <circle className="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+    </svg>
+  );
+};

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) {
+      if (indexRef.current < logs.length) {
-        setDisplayedLogs(prev => [...prev, logs[currentIndex]]);
+        setDisplayedLogs(prev => [...prev, logs[indexRef.current]]);
-        currentIndex++;
+        indexRef.current++;
         
         // Variable delay based on log type
-        const delay = logs[currentIndex - 1]?.type === 'command' ? 200 : 
+        const delay = logs[indexRef.current - 1]?.type === 'command' ? 200 : 
-                     logs[currentIndex - 1]?.type === 'output' ? 100 : 300;
+                     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

@@ -71,15 +71,20 @@
 
   &.primary {
     background: $primary;
-    color: $text-primary;
+    color: white;
-    border-color: $primary;
+    border-color: $primary-light;
 
     &:hover:not(:disabled) {
       background: $primary-light;
       border-color: $primary-light;
     }
   }
+  &.service {
+    &:hover:not(:disabled) {
+      background: #3fff5c9d;
 
+    }
+  }
   &.secondary {
     background: $bg-secondary;
     color: $text-primary;
@@ -130,6 +135,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;
@@ -166,13 +214,29 @@
   }
 }
 
-.link {
+.domain-link {
-  color: $primary-dark;
+  color: $primary-light;
   text-decoration: none;
   font-size: $font-size-base;
   transition: color $transition-base;
 
   &:hover {
+    text-decoration: underline;
+  }
+}
+
+.server-link {
+  background: none;
+  border: none;
+  color: $primary-light;
+  cursor: pointer;
+  padding: 0;
+  font-size: $font-size-base;
+  text-align: left;
+  transition: color $transition-base;
+
+  &:hover {
+    background: none;
     color: $primary-light;
     text-decoration: underline;
   }
@@ -329,7 +393,6 @@
         background: rgba($error, 0.05);
       }
     }
-
     .action-text {
       flex: 1;
       font-weight: $font-weight-medium;
@@ -367,3 +430,52 @@
     }
   }
 }
+
+// editor modal overlay
+// locks scrolling
+body.modal-open {
+  overflow: hidden;
+}
+.editor-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.editor-modal {
+  width: 90%;
+  height: 90%;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  overflow: hidden;
+
+  .editor-header {
+    padding: 10px;
+    border-bottom: 1px solid #ddd;
+  }
+
+  .editor-body {
+    flex: 1;
+    overflow: auto; // 👈 THIS is key
+    display: flex;
+
+    // make your code editor stretch
+    > * {
+      flex: 1;
+    }
+  }
+}
+
+// navigation back to apps page
+.back-navigation {
+  margin-bottom: 10px;
+}

src/routes/Apps/App.tsx

@@ -1,10 +1,14 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
 import { Header } from '../../components/Header/Header';
+import { Loader } from '../../components/Loader/Loader';
 import { Terminal } from '../../components/Terminal/Terminal';
+import { EditorPage } from '../../components/Editor/Editor';
 import { apiService } from '../../services/api';
-import type { AbraApp } from '../../types';
+import type { AbraApp, AbraAppService, AbraServiceState } from '../../types';
 import type { LogEntry } from '../../services/mockApi';
+import { createPortal } from "react-dom";
+
 import './App.scss';
 
 export const AppDetail: React.FC = () => {
@@ -12,16 +16,38 @@ 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);
+  const [openEditor, setOpenEditor] = useState(false);
   
   // Terminal state
   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 +64,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 +87,55 @@ 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]);
+
+  function EditorModal({ onClose }) {
+    return createPortal(
+      <div className="editor-overlay" onClick={onClose}>
+        <div
+          className="editor-modal"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="editor-header">
+            <button onClick={onClose}>Close</button>
+          </div>
+
+          <div className="editor-body">
+            <EditorPage 
+              appName={app ? app.appName : ""}
+            />
+          </div>
+        </div>
+      </div>,
+      document.body
+    );
+  }
   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,9 +165,57 @@ 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") {
+                  if (update.data.failed) {
+                    setDeployState('failed');
+                  } else {
+                    setDeployState("deployed");
+                  }
+                  setRefreshKey(prev => prev + 1);
+                }
+              }
+            )
+            break;
+          case 'logs':
+            setTerminalActive(true);
+            setTerminalLogs([]);
+            if (version) {
+              stopRef.current = apiService.getLogs(app.appName, version, 
+                (line) => {
+                  setTerminalLogs(prev => [...prev, {
+                    type: 'info',
+                    text: `${line}`,
+                    timestamp: new Date()
+                  }]);
+                }
+              )
+            }
+            break;
+          case 'remove':
+            await apiService.removeApp(app.appName);
+            setApp(null);
+            break;
+          case 'config':
+            setOpenEditor(true);
             break;
         }
       }
@@ -117,7 +236,10 @@ export const AppDetail: React.FC = () => {
       <div className="app-detail-page">
         <Header />
         <main className="app-detail-content">
-          <div className="loading">Loading application...</div>
+          <div className="loading">
+            <Loader />
+            <div>Loading application</div>
+          </div>
         </main>
       </div>
     );
@@ -136,19 +258,23 @@ export const AppDetail: React.FC = () => {
       </div>
     );
   }
-
+  // TODO: make sure this makes sense when app.upgrade is unknown
-  const upgradeVersions = app.upgrade !== 'latest' ? app.upgrade.split('\n') : [];
+  const upgradeVersions = (app.upgrade !== 'latest'  && app.upgrade !== 'unknown') ? app.upgrade.split('\n') : [];
 
   return (
     <div className="app-detail-page">
+      {openEditor && (
+        <EditorModal onClose={() => setOpenEditor(false)} />
+      )}
       <Header />
       <main className="app-detail-content">
-        <div className="breadcrumb">
+        <div className="back-navigation">
-          <button onClick={() => navigate('/apps')} className="breadcrumb-link">
+          <button 
-            Apps
+            onClick={() => navigate(`/apps`)}
+            className="server-link"
+          >
+             ← Back to Apps
           </button>
-          <span className="breadcrumb-separator">/</span>
-          <span className="breadcrumb-current">{app.appName}</span>
         </div>
 
         <div className="app-header">
@@ -167,14 +293,14 @@ export const AppDetail: React.FC = () => {
             <button 
               className="action-btn danger"
               onClick={() => handleAction('stop')}
-              disabled={!!actionLoading}
+              disabled={!!actionLoading || deployState === "undeployed"}
             >
               {actionLoading === 'stop' ? 'Stopping...' : 'Stop'}
             </button>
             <button 
-              className="action-btn primary"
+              className="action-btn"
               onClick={() => handleAction('deploy')}
-              disabled={!!actionLoading}
+              disabled={!!actionLoading || deployState === "deployed"}
             >
               {actionLoading === 'deploy' ? 'Deploying...' : 'Deploy'}
             </button>
@@ -185,7 +311,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">
@@ -242,7 +372,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>
               
@@ -282,6 +475,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
@@ -317,7 +522,7 @@ export const AppDetail: React.FC = () => {
                 <button 
                   className="action-list-item danger"
                   onClick={() => {
-                    if (confirm(`Are you sure you want to remove ${app.appName}?`)) {
+                    if (confirm(`Are you sure you want to remove ${app.appName}?\nThis will delete all data and config`)) {
                       handleAction('remove');
                     }
                   }}
@@ -325,6 +530,13 @@ export const AppDetail: React.FC = () => {
                 >
                   <span className="action-text">Remove Application</span>
                 </button>
+                <button
+                  className="action-list-item"
+                  onClick={() => handleAction('config')}
+                  disabled={!!actionLoading}
+                >
+                  <span className="action-text">Manage Config</span>
+                </button>
               </div>
             </section>
 

src/routes/Apps/Apps.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Header } from '../../components/Header/Header';
+import { Loader } from '../../components/Loader/Loader';
 import { apiService } from '../../services/api';
 import type { AbraApp, AppWithServer, ServerAppsResponse } from '../../types';
 import './Apps.scss';
@@ -16,7 +17,7 @@ export const Apps: React.FC = () => {
   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 () => {
@@ -114,7 +115,10 @@ export const Apps: React.FC = () => {
       <div className="apps-page">
         <Header />
         <main className="apps-content">
-          <div className="loading">Loading applications...</div>
+          <div className="loading">
+            <Loader />
+            <div>Loading apps</div>
+          </div>
         </main>
       </div>
     );

src/routes/Dashboard/Dashboard.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Header } from '../../components/Header/Header';
+import { Loader } from '../../components/Loader/Loader';
 import { useNavigate } from 'react-router-dom';
 import { apiService } from '../../services/api';
 import type { AbraApp, AbraServer } from '../../types';
@@ -12,7 +13,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 () => {
@@ -60,7 +61,10 @@ export const Dashboard: React.FC = () => {
       <div className="dashboard-page">
         <Header />
         <main className="dashboard-content">
-          <div className="loading">Loading dashboard...</div>
+          <div className="loading">
+            <Loader />
+            <div>Loading dashboard</div>
+          </div>
         </main>
       </div>
     );

src/routes/Recipes/RecipeForm.scss

@@ -0,0 +1,59 @@
+.modal {
+  background: white;
+  position: relative;
+  padding: 24px;
+  border-radius: 8px;
+  width: min(100%, 800px);
+  max-height: 90vh;
+}
+
+.modal .close-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1;
+
+  padding: 4px 8px;
+  border-radius: 4px;
+  background: rgba(255, 0, 0, 0.308);
+}
+
+.modal .close-btn:hover {
+  background: rgba(255, 0, 0, 0.797);
+}
+
+.modal .close-btn:focus {
+  outline: 2px solid #888;
+}
+
+.secrets table {
+  width: 90%;
+  border-collapse: collapse;
+  margin-top: 10px;
+}
+
+.secrets th,
+.secrets td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+.secrets th {
+  background-color: #f5f5f5;
+  font-weight: bold;
+}
+
+.secrets tr:nth-child(even) {
+  background-color: #fafafa;
+}
+
+.copy-btn {
+  margin-left: 10px;
+  padding: 2px 6px;
+  font-size: 12px;
+  cursor: pointer;
+}

src/routes/Recipes/RecipeForm.tsx

@@ -1,25 +1,26 @@
 import { useState, useEffect } from "react";
 import { apiService } from '../../services/api';
-import type { AbraServer } from '../../types';
+import type { AbraServer, AbraAppSecret } from '../../types';
-
+import './RecipeForm.scss';
 
 
 function RecipeForm({ recipe, onClose }) {
   const [loading, setLoading] = useState(true);
+  const [submitted, setSubmitted] = useState(false);
   const [servers, setServers] = useState<AbraServer[]>([]);
-  const [selectedServer, setSelectedServer] = useState(""); // ❌ only one value
+  const [secretData, setSecretData] = useState<AbraAppSecret[]>([]);
-  const [chaos, setChaos] = useState(false);
-  const [secrets, setSecrets] = useState(false);
   const [error, setError] = useState('');
   
   useEffect(() => {
       const fetchData = async () => {
         try {
-          const [serversData] = await Promise.all([
+          if (servers.length === 0) {
-            apiService.getServers(),
+            const [serversData] = await Promise.all([
-          ]);
+              apiService.getServers(),
+            ]);
               
-          setServers(serversData);
+            setServers(serversData);
+          }
           
         } catch (err) {
           setError(err instanceof Error ? err.message : 'Failed to load servers');
@@ -31,81 +32,123 @@ function RecipeForm({ recipe, onClose }) {
       fetchData();
     });
   const [formData, setFormData] = useState({
+    server: "",
     domain: "",
     chaos: false,
-    secrets: true,
+    secrets: false,
   });
 
   const handleChange = (e) => {
-    setFormData({
+    const {name, type, value, checked} = e.target;
-      ...formData,
+    setFormData((prev) => ({
-      [e.target.name]: e.target.value,
+      ...prev,
-    });
+      [name]: type === "checkbox" ? checked : value,
+    }));
+    console.log(formData);
   };
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
     console.log("Submitting:", formData);
-    onClose();
+    setSubmitted(true);
+    const generatedSecrets = await apiService.newApp(recipe.name, formData);
+    setSecretData(generatedSecrets);
   };
 
   return (
-    <form onSubmit={handleSubmit}>
+    <div className="modal">
-      <h2>{recipe.name}</h2>
+      <button className="close-btn" onClick={onClose}>x</button>
-      { loading ? (<p> Loading servers...</p> 
+      {(secretData.length === 0 && submitted) && (
-      ) : (
+        <p> Creating new app...</p> 
-      <div>
+      )
-        <label>
+      }
-            Choose a server to deploy to: 
+      {(secretData.length > 0 && submitted) && (
-            <select
+        <div className="secrets">
-              value={selectedServer}
+          <table>
-              onChange={(e) => setSelectedServer(e.target.value)}
+            <thead>
-            >
+              <tr>
-              <option value="">None</option>
+                <th>Name</th>
-              {servers.map((server) => (
+                <th>Value</th>
-                <option key={server.name} value={server.name}>
+              </tr>
-                  {server.name}
+            </thead>
-                </option>
+            <tbody>
+              {secretData.map((secret) => (
+                <tr key={secret.name}>
+                  <td>{secret.name}</td>
+                  <td>
+                    <span>{secret.value}</span>
+                    <button
+                      className="copy-btn"
+                      onClick={() => navigator.clipboard.writeText(secret.value)}
+                    >
+                      Copy
+                    </button>
+                  </td>
+                </tr>
               ))}
-            </select>
+            </tbody>
-        </label>
+          </table>
-      </div>
+        </div>
       )}
-      <div> 
+      {(submitted === false) && 
-        <label>
+        <form onSubmit={handleSubmit}>
-          Domain:
+          <h2>{recipe.name}</h2>
-          <input
+          { loading ? (<p> Loading servers...</p> 
-            name="Domain"
+          ) : (
-            value={formData.name}
+          <div>
-            onChange={handleChange}
+            <label>
-          />
+                Choose a server to deploy to: 
-        </label>
+                <select
-      </div>
+                  name="server"
-      <div> 
+                  value={formData.server || ""}
-        <label>
+                  onChange={handleChange}
-          Chaos Mode Enabled: 
+                >
-          <input
+                  <option value="">None</option>
-            type="checkbox"
+                  {servers.map((server) => (
-            name="chaos"
+                    <option key={server.name} value={server.name}>
-            onChange={handleChange}
+                      {server.name}
-          />
+                    </option>
-        </label>
+                  ))}
-      </div>
+                </select>
+            </label>
+          </div>
+          )}
+          <div> 
+            <label>
+              Domain:
+              <input
+                name="domain"
+                value={formData.domain}
+                onChange={handleChange}
+              />
+            </label>
+          </div>
+          <div> 
+            <label>
+              Chaos Mode Enabled: 
+              <input
+                type="checkbox"
+                name="chaos"
+                onChange={handleChange}
+              />
+            </label>
+          </div>
 
-      <div> 
+          <div> 
-        <label>
+            <label>
-          Autogenerate Secrets: 
+              Autogenerate Secrets: 
-          <input
+              <input
-            type="checkbox"
+                type="checkbox"
-            name="secrets"
+                name="secrets"
-            onChange={handleChange}
+                onChange={handleChange}
-          />
+              />
-        </label>
+            </label>
-      </div>
+          </div>
 
-      <button type="submit">Submit</button>
+          <button type="submit">Submit</button>
-      <button type="button" onClick={onClose}>Cancel</button>
+        </form>
-    </form>
+      }
+    </div>
   );
 }
 

src/routes/Recipes/Recipes.scss

@@ -168,10 +168,3 @@ display: flex;
 justify-content: center;
 align-items: center;
 }
-
-.modal {
-  background: white;
-  padding: 24px;
-  border-radius: 8px;
-  width: min(90%, 500px);
-}

src/routes/Recipes/Recipes.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Header } from '../../components/Header/Header';
+import { Loader } from '../../components/Loader/Loader';
 import { apiService } from '../../services/api';
 import type { AbraApp, AppWithServer, AbraRecipe } from '../../types';
 import RecipeForm from './RecipeForm.tsx'
@@ -19,7 +20,7 @@ export const Recipes: React.FC = () => {
 
 
 
-  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
+  const isMockMode = false;
 
   useEffect(() => {
     const fetchData = async () => {
@@ -72,7 +73,10 @@ export const Recipes: React.FC = () => {
       <div className="apps-page">
         <Header />
         <main className="recipes-content">
-          <div className="loading">Loading applications...</div>
+          <div className="loading">
+            <Loader />
+            <div>Loading recipes</div>
+          </div>
         </main>
       </div>
     );
@@ -176,7 +180,7 @@ export const Recipes: React.FC = () => {
         </div>
         {selectedRecipe && (
           <div className="modal-overlay" onClick={() => setSelectedRecipe(null)}>
-            <div className="modal" onClick={(e) => e.stopPropagation()}>
+            <div onClick={(e) => e.stopPropagation()}>
               {}
               <RecipeForm recipe={selectedRecipe} onClose={() => setSelectedRecipe(null)} />
             </div>

src/routes/Servers/Server.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Header } from '../../components/Header/Header';
+import { Loader } from '../../components/Loader/Loader';
 import { Terminal } from '../../components/Terminal/Terminal';
 import { apiService } from '../../services/api';
 import type { AbraServer, ServerAppsResponse } from '../../types';
@@ -29,7 +30,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 () => {
@@ -133,7 +134,10 @@ export const Server: React.FC = () => {
       <div className="server-detail-page">
         <Header />
         <main className="server-detail-content">
-          <div className="loading">Loading server...</div>
+          <div className="loading">
+            <Loader />
+            <div> Loading server</div>
+          </div>
         </main>
       </div>
     );
@@ -160,12 +164,13 @@ export const Server: React.FC = () => {
     <div className="server-detail-page">
       <Header />
       <main className="server-detail-content">
-        <div className="breadcrumb">
+        <div className="back-navigation">
-          <button onClick={() => navigate('/servers')} className="breadcrumb-link">
+          <button 
-            Servers
+            onClick={() => navigate(`/servers`)}
+            className="server-link"
+          >
+             ← Back to Servers
           </button>
-          <span className="breadcrumb-separator">/</span>
-          <span className="breadcrumb-current">{server.name}</span>
         </div>
 
         <div className="server-header">

src/routes/Servers/Servers.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Header } from '../../components/Header/Header';
+import { Loader } from '../../components/Loader/Loader';
 import { apiService } from '../../services/api';
 import type { AbraServer, ServerAppsResponse } from '../../types';
 import './Servers.scss';
@@ -22,7 +23,7 @@ export const Servers: React.FC = () => {
   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 () => {
@@ -113,7 +114,10 @@ const resetFilters = () => {
       <div className="servers-page">
         <Header />
         <main className="servers-content">
-          <div className="loading">Loading servers...</div>
+          <div className="loading">
+            <Loader />
+            <div> Loading servers</div>
+          </div>
         </main>
       </div>
     );

src/services/api.ts

@@ -1,4 +1,4 @@
-import type { AbraServer, AbraRecipe, ServerAppsResponse } from '../types';
+import type { AbraServer, AbraRecipe, ServerAppsResponse, AbraAppService, DeployEvent, AbraAppSecret, File } from '../types';
 
 // Log entry type
 export type LogEntry = {
@@ -37,10 +37,71 @@ 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})
+  }
+
+  async getConfig(appName: string): Promise<string> {
+    const file = await this.request<File>(`/apps/${appName}/config`)
+    return file.content
+  }
+
+  async writeConfig(appName: string, code: string): Promise<void> {
+    const file : File = { content: code };
+    return this.request<void>(`/apps/${appName}/config`, {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json'
+      },
+      body: JSON.stringify(file),
+    })
+  }
+
+
   // Get all apps grouped by server
   async getAppsGrouped(): Promise<ServerAppsResponse> {
     return this.request<ServerAppsResponse>('/apps');
@@ -50,21 +111,24 @@ class ApiService {
   async getServers(): Promise<AbraServer[]> {
     return this.request<AbraServer[]>('/servers');
   }
-
+  // Get services for app
-  // App actions with log streaming (websocket future)
+  async getServices(appName: string): Promise<AbraAppService[]> {
-  async deployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    return this.request<AbraAppService[]>(`/apps/${appName}/services`);
-    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));
-    }
   }
 
-  async undeployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+  // App actions with log streaming (websocket future)
-    const response = await this.request<{ logs: any[] }>(`/apps/${appName}/undeploy`, {
+  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 +160,16 @@ class ApiService {
       logs.forEach(log => onLog(log));
     }
   }
+  async newApp(appName: string, formData: Object): Promise<AbraSecret[]> {
+    const response = await this.request<AbraSecret[]>(`/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 +206,7 @@ class ApiService {
   }
   // recipe catalog imports
   async getRecipes(): Promise<AbraRecipe[]> {
-    return this.request<AbraRecipe[]>('/abra/catalogue');
+    return this.request<AbraRecipe[]>('/catalogue');
   }
 }
     

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
@@ -69,3 +106,13 @@ export interface AbraRecipe {
   versions: RecipeVersions;
   website: string;
 }
+
+export interface AbraAppSecret {
+  name: string;
+  version: string;
+  value: string;
+}
+
+export interface File {
+  content: string;
+}