logs hooked up

Merge pull request 'dev' (#5 ) from dev into main
Reviewed-on: BornDeleuze/coop-cloud-front#5
2026-03-05 08:16:11 -08:00 · 2026-03-04 22:44:53 +00:00 · 2026-03-04 22:44:26 +00:00 · 2026-03-02 22:32:33 +00:00 · 2026-03-02 22:31:59 +00:00 · 2026-01-18 05:51:37 +00:00
14 changed files with 1148 additions and 432 deletions
--- a/Netlify.toml
+++ b/Netlify.toml
@ -0,0 +1,14 @@
+[build]
+  command = "npm run build"
+  publish = "dist"
+
+# Environment variables for build
+[build.environment]
+  VITE_MOCK_AUTH = "true"
+  VITE_API_URL = "http://localhost:3000/api"
+
+# Redirect all requests to index.html for client-side routing
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
--- a/src/assets/coopcloud_logo_grey.svg
+++ b/src/assets/coopcloud_logo_grey.svg
--- a/src/components/Authenticated.tsx
+++ b/src/components/Authenticated.tsx
@ -5,7 +5,7 @@ import { useAuth } from '../context/AuthContext';
 export const Authenticated: React.FC = () => {
  const { isAuthenticated, loading } = useAuth();

-    console.log('🛡️ ProtectedRoute:', { isAuthenticated, loading });
+    console.log('ProtectedRoute:', { isAuthenticated, loading });

  if (loading) {
    return (
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@ -2,6 +2,8 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../hooks/useAuth';
 import './_Header.scss';
+import logo from '../../assets/coopcloud_logo_grey.svg';
+

 interface HeaderProps {
  children: React.ReactNode;
@ -19,7 +21,7 @@ return(
 <header className="layout-header">
    <div className="header-content">
      <h1 onClick={() => navigate('/dashboard')} className="logo">
-        <img className="logo" src="/public/coopcloud_logo_grey.svg"/>
+        <img className="logo" src={logo}/>
      </h1>
      <nav className="nav">
        <button onClick={() => navigate('/dashboard')} className="nav-link">
--- a/src/components/Terminal/Terminal.tsx
+++ b/src/components/Terminal/Terminal.tsx
@ -0,0 +1,86 @@
+import React, { useEffect, useRef, useState } from 'react';
+import type { LogEntry } from '../../services/mockApi'; // Import from mockApi (or api for real)
+import './_Terminal.scss';
+
+interface TerminalProps {
+  logs: LogEntry[];
+  isActive: boolean;
+  onClose?: () => void;
+}
+
+export const Terminal: React.FC<TerminalProps> = ({ logs, isActive, onClose }) => {
+  const terminalRef = useRef<HTMLDivElement>(null);
+  const [displayedLogs, setDisplayedLogs] = useState<LogEntry[]>([]);
+
+  // Stream logs in with delays for realistic effect
+  useEffect(() => {
+    if (!isActive || logs.length === 0) {
+      setDisplayedLogs([]);
+      return;
+    }
+
+    setDisplayedLogs([]);
+    let currentIndex = 0;
+
+    const streamLogs = () => {
+      if (currentIndex < logs.length) {
+        setDisplayedLogs(prev => [...prev, logs[currentIndex]]);
+        currentIndex++;
+        
+        // Variable delay based on log type
+        const delay = logs[currentIndex - 1]?.type === 'command' ? 200 : 
+                     logs[currentIndex - 1]?.type === 'output' ? 100 : 300;
+        
+        setTimeout(streamLogs, delay);
+      }
+    };
+
+    streamLogs();
+  }, [logs, isActive]);
+
+  // Auto-scroll to bottom
+  useEffect(() => {
+    if (terminalRef.current) {
+      terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
+    }
+  }, [displayedLogs]);
+
+  if (!isActive && displayedLogs.length === 0) {
+    return null;
+  }
+
+  const formatTime = (date: Date) => {
+    return date.toLocaleTimeString('en-US', { 
+      hour12: false, 
+      hour: '2-digit', 
+      minute: '2-digit', 
+      second: '2-digit' 
+    });
+  };
+
+  return (
+    <div className="terminal-container">
+      <div className="terminal-header">
+        <div className="terminal-controls">
+          <span className="terminal-control close" onClick={onClose}></span>
+          <span className="terminal-control minimize"></span>
+          <span className="terminal-control maximize"></span>
+        </div>
+        <div className="terminal-title">abra CLI</div>
+        <div className="terminal-spacer"></div>
+      </div>
+      
+      <div className="terminal-content" ref={terminalRef}>
+        {displayedLogs.filter(log => log && log.type).map((log, index) => (
+          <div key={index} className={`terminal-line terminal-${log.type}`}>
+            <span className="terminal-timestamp">[{formatTime(log.timestamp)}]</span>
+            <span className="terminal-text">{log.text}</span>
+          </div>
+        ))}
+        {isActive && displayedLogs.length > 0 && (
+          <div className="terminal-cursor">▊</div>
+        )}
+      </div>
+    </div>
+  );
+};
--- a/src/components/Terminal/_Terminal.scss
+++ b/src/components/Terminal/_Terminal.scss
@ -0,0 +1,204 @@
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+
+.terminal-container {
+  background: #1e1e1e;
+  border-radius: $radius-md;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Source Code Pro', monospace;
+  margin-bottom: $spacing-xl;
+  animation: terminal-appear 0.3s ease-out;
+}
+
+@keyframes terminal-appear {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.terminal-header {
+  display: flex;
+  align-items: center;
+  padding: $spacing-sm $spacing-md;
+  background: #323232;
+  border-bottom: 1px solid #404040;
+  user-select: none;
+
+  .terminal-controls {
+    display: flex;
+    gap: $spacing-xs;
+    min-width: 60px;
+  }
+
+  .terminal-control {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    &.close {
+      background: #ff5f56;
+    }
+
+    &.minimize {
+      background: #ffbd2e;
+    }
+
+    &.maximize {
+      background: #27c93f;
+    }
+  }
+
+  .terminal-title {
+    flex: 1;
+    text-align: center;
+    color: #a0a0a0;
+    font-size: $font-size-xs;
+    font-weight: $font-weight-medium;
+  }
+
+  .terminal-spacer {
+    min-width: 60px;
+  }
+}
+
+.terminal-content {
+  padding: $spacing-md;
+  background: #1e1e1e;
+  color: #d4d4d4;
+  font-size: 13px;
+  line-height: 1.6;
+  max-height: 400px;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  /* Custom scrollbar */
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #2d2d2d;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #4a4a4a;
+    border-radius: 4px;
+
+    &:hover {
+      background: #5a5a5a;
+    }
+  }
+}
+
+.terminal-line {
+  display: flex;
+  margin-bottom: 2px;
+  animation: terminal-line-appear 0.2s ease-out;
+  white-space: pre-wrap;
+  word-break: break-word;
+
+  @keyframes terminal-line-appear {
+    from {
+      opacity: 0;
+      transform: translateX(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  .terminal-timestamp {
+    color: #6a6a6a;
+    margin-right: $spacing-sm;
+    flex-shrink: 0;
+    font-size: 11px;
+  }
+
+  .terminal-text {
+    flex: 1;
+  }
+
+  /* Line type styles */
+  &.terminal-info {
+    .terminal-text {
+      color: #4fc3f7;
+    }
+  }
+
+  &.terminal-success {
+    .terminal-text {
+      color: #81c784;
+      font-weight: $font-weight-medium;
+    }
+  }
+
+  &.terminal-error {
+    .terminal-text {
+      color: #e57373;
+      font-weight: $font-weight-medium;
+    }
+  }
+
+  &.terminal-warning {
+    .terminal-text {
+      color: #ffb74d;
+    }
+  }
+
+  &.terminal-command {
+    .terminal-text {
+      color: #ba68c8;
+      font-weight: $font-weight-semibold;
+    }
+  }
+
+  &.terminal-output {
+    .terminal-text {
+      color: #d4d4d4;
+      opacity: 0.9;
+    }
+  }
+}
+
+.terminal-cursor {
+  display: inline-block;
+  color: #81c784;
+  margin-left: 4px;
+  animation: terminal-cursor-blink 1s step-end infinite;
+}
+
+@keyframes terminal-cursor-blink {
+  0%, 50% {
+    opacity: 1;
+  }
+  51%, 100% {
+    opacity: 0;
+  }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .terminal-content {
+    font-size: 12px;
+    padding: $spacing-sm;
+  }
+
+  .terminal-line {
+    .terminal-timestamp {
+      display: none;
+    }
+  }
+}
--- a/src/context/AuthContext.tsx
+++ b/src/context/AuthContext.tsx
@ -24,17 +24,17 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {

  useEffect(() => {
    const checkAuth = async () => {
-      console.log('🔍 checkAuth running, isMockMode:', isMockMode);
+      console.log('checkAuth running, isMockMode:', isMockMode);
      try {
        if (isMockMode) {
-          console.log('✅ Mock mode - setting mock user');
+          console.log('Mock mode - setting mock user');
          setUser({
            id: 'mock-user-1',
            username: 'developer',
            email: 'dev@coopcloud.tech',
          });
          setLoading(false);
-          console.log('✅ Mock user set, loading set to false');
+          console.log('Mock user set, loading set to false');
          return;
        }

@ -75,7 +75,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
    logout,
    isAuthenticated: !!user,
  };
-  console.log('📊 AuthContext state:', { user, loading, isAuthenticated: !!user });
+  console.log('AuthContext state:', { user, loading, isAuthenticated: !!user });

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 };
--- a/src/routes/Authenticated/Apps/App.scss
+++ b/src/routes/Authenticated/Apps/App.scss
@ -1,136 +1,100 @@
@use '../../../assets/scss/variables' as *;
@use '../../../assets/scss/mixins' as *;
+@use '../../../assets/scss/global' as *;
+
 .app-detail-page {
-  min-height: 100vh;
-  background: #f5f5f5;
+  @extend .page-wrapper;
 }

 .app-detail-content {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 24px;
-
-  .loading,
-  .error {
-    text-align: center;
-    padding: 60px 20px;
-    font-size: 16px;
-    color: #666;
-  }
-
-  .error {
-    color: #dc3545;
-  }
-}
-
-// Breadcrumb navigation
-.breadcrumb {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 24px;
-  font-size: 14px;
-
-  .breadcrumb-link {
-    background: none;
-    border: none;
-    color: #0066cc;
-    cursor: pointer;
-    padding: 0;
-    font-size: 14px;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  .breadcrumb-separator {
-    color: #999;
-  }
-
-  .breadcrumb-current {
-    color: #333;
-    font-weight: 500;
-  }
+  @extend .page-content;
 }

 // App header section
 .app-header {
-  background: white;
-  border-radius: 12px;
-  padding: 24px;
-  margin-bottom: 24px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  @include card;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
-  gap: 20px;
+  gap: $spacing-xl;
+  margin-bottom: $spacing-xl;

  .app-title-section {
    flex: 1;
    min-width: 300px;

    h1 {
-      margin: 0 0 12px 0;
-      font-size: 28px;
-      color: #1a1a1a;
+      margin: 0 0 $spacing-md 0;
+      font-size: $font-size-3xl;
+      color: $text-primary;
+      font-weight: $font-weight-bold;
    }

    .app-meta {
      display: flex;
-      gap: 8px;
+      gap: $spacing-sm;
      flex-wrap: wrap;
    }
  }

  .app-actions {
    display: flex;
-    gap: 12px;
+    gap: $spacing-md;
    flex-wrap: wrap;
  }
 }

 // Action buttons
 .action-btn {
-  padding: 10px 20px;
-  border: none;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 500;
+  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 0.2s;
+  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: #0066cc;
+    background: $primary;
    color: white;
+    border-color: $primary;

    &:hover:not(:disabled) {
-      background: #0052a3;
+      background: $primary-light;
+      border-color: $primary-light;
    }
  }

  &.secondary {
-    background: #f0f0f0;
-    color: #333;
+    background: $bg-secondary;
+    color: $text-primary;
+    border-color: $border-color;

    &:hover:not(:disabled) {
-      background: #e0e0e0;
+      background: darken($bg-secondary, 5%);
    }
  }

  &.danger {
-    background: #dc3545;
+    background: $error;
    color: white;
+    border-color: $error;

    &:hover:not(:disabled) {
-      background: #c82333;
+      background: darken($error, 10%);
    }
  }
 }
@ -140,56 +104,11 @@
  @extend .secondary;
 }

-// Badges
-.recipe-badge {
-  display: inline-block;
-  padding: 4px 12px;
-  background: #e7f3ff;
-  color: #0066cc;
-  border-radius: 4px;
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.status-badge {
-  display: inline-block;
-  padding: 4px 12px;
-  border-radius: 4px;
-  font-size: 13px;
-  font-weight: 500;
-
-  &.status-deployed,
-  &.status-running {
-    background: #d4edda;
-    color: #155724;
-  }
-
-  &.status-stopped {
-    background: #f8d7da;
-    color: #721c24;
-  }
-
-  &.status-unknown {
-    background: #e2e3e5;
-    color: #383d41;
-  }
-}
-
-.chaos-badge {
-  display: inline-block;
-  padding: 4px 12px;
-  background: #fff3cd;
-  color: #856404;
-  border-radius: 4px;
-  font-size: 13px;
-  font-weight: 500;
-}
-
 // Content grid layout
 .content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
-  gap: 24px;
+  gap: $spacing-xl;

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
@ -198,21 +117,18 @@

 // Info cards
 .info-card {
-  background: white;
-  border-radius: 12px;
-  padding: 24px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  margin-bottom: 24px;
+  @include card;
+  margin-bottom: $spacing-xl;

  &:last-child {
    margin-bottom: 0;
  }

  h2 {
-    margin: 0 0 20px 0;
-    font-size: 18px;
-    color: #1a1a1a;
-    font-weight: 600;
+    margin: 0 0 $spacing-lg 0;
+    font-size: $font-size-xl;
+    color: $text-primary;
+    font-weight: $font-weight-bold;
  }
 }

@ -220,44 +136,46 @@
 .info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 20px;
+  gap: $spacing-lg;
 }

 .info-item {
  display: flex;
  flex-direction: column;
-  gap: 6px;
+  gap: $spacing-xs;

  label {
-    font-size: 12px;
-    color: #666;
-    font-weight: 500;
+    font-size: $font-size-xs;
+    color: $text-secondary;
+    font-weight: $font-weight-medium;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  span {
-    font-size: 14px;
-    color: #1a1a1a;
+    font-size: $font-size-base;
+    color: $text-primary;
  }

  .no-value {
-    color: #999;
+    color: $text-muted;
    font-style: italic;
  }

  .chaos-active {
-    color: #856404;
-    font-weight: 500;
+    color: darken($info, 10%);
+    font-weight: $font-weight-medium;
  }
 }

 .domain-link {
-  color: $primary-dark;
+  color: $primary;
  text-decoration: none;
-  font-size: 14px;
+  font-size: $font-size-base;
+  transition: color $transition-base;

  &:hover {
+    color: $primary-light;
    text-decoration: underline;
  }
 }
@ -265,13 +183,15 @@
 .server-link {
  background: none;
  border: none;
-  color: #0066cc;
+  color: $primary;
  cursor: pointer;
  padding: 0;
-  font-size: 14px;
+  font-size: $font-size-base;
  text-align: left;
+  transition: color $transition-base;

  &:hover {
+    color: $primary-light;
    text-decoration: underline;
  }
 }
@ -280,26 +200,27 @@
 .version-info {
  display: flex;
  flex-direction: column;
-  gap: 20px;
+  gap: $spacing-lg;

  .version-current {
    label {
      display: block;
-      font-size: 12px;
-      color: #666;
-      font-weight: 500;
+      font-size: $font-size-xs;
+      color: $text-secondary;
+      font-weight: $font-weight-medium;
      text-transform: uppercase;
      letter-spacing: 0.5px;
-      margin-bottom: 8px;
+      margin-bottom: $spacing-sm;
    }

    code {
      display: inline-block;
-      background: #f5f5f5;
-      padding: 8px 12px;
-      border-radius: 4px;
-      font-size: 13px;
-      color: #1a1a1a;
+      background: $bg-secondary;
+      padding: $spacing-sm $spacing-md;
+      border-radius: $radius-sm;
+      font-size: $font-size-sm;
+      color: $text-primary;
+      font-family: monospace;
    }
  }

@ -307,59 +228,66 @@
    label {
      display: flex;
      align-items: center;
-      gap: 8px;
-      font-size: 12px;
-      color: #666;
-      font-weight: 500;
+      gap: $spacing-sm;
+      font-size: $font-size-xs;
+      color: $text-secondary;
+      font-weight: $font-weight-medium;
      text-transform: uppercase;
      letter-spacing: 0.5px;
-      margin-bottom: 12px;
+      margin-bottom: $spacing-md;

      .upgrade-count {
-        background: #ffc107;
-        color: #856404;
+        background: $warning;
+        color: white;
        padding: 2px 8px;
-        border-radius: 12px;
-        font-size: 11px;
-        font-weight: 600;
+        border-radius: $radius-full;
+        font-size: $font-size-xs;
+        font-weight: $font-weight-bold;
      }
    }

    .upgrade-list {
      display: flex;
      flex-direction: column;
-      gap: 8px;
+      gap: $spacing-sm;
    }

    .upgrade-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
-      gap: 12px;
-      padding: 12px;
-      background: #f8f9fa;
-      border-radius: 6px;
-      border: 1px solid #e9ecef;
+      gap: $spacing-md;
+      padding: $spacing-md;
+      background: $bg-secondary;
+      border-radius: $radius-md;
+      border: 2px solid transparent;
+      transition: border-color $transition-base;
+
+      &:hover {
+        border-color: $warning;
+      }

      code {
        flex: 1;
-        font-size: 13px;
-        color: #1a1a1a;
+        font-size: $font-size-sm;
+        color: $text-primary;
+        font-family: monospace;
      }

      .upgrade-btn {
-        padding: 6px 16px;
-        background: #ffc107;
-        color: #856404;
+        padding: $spacing-xs $spacing-md;
+        background: $warning;
+        color: white;
        border: none;
-        border-radius: 4px;
-        font-size: 12px;
-        font-weight: 500;
+        border-radius: $radius-sm;
+        font-size: $font-size-sm;
+        font-weight: $font-weight-medium;
        cursor: pointer;
-        transition: all 0.2s;
+        transition: all $transition-base;

        &:hover:not(:disabled) {
-          background: #e0a800;
+          background: darken($warning, 10%);
+          transform: translateY(-1px);
        }

        &:disabled {
@ -371,13 +299,13 @@
  }

  .version-latest {
-    padding: 12px;
-    background: #d4edda;
-    color: #155724;
-    border-radius: 6px;
+    padding: $spacing-md;
+    background: rgba($success, 0.1);
+    color: darken($success, 10%);
+    border-radius: $radius-md;
    text-align: center;
-    font-size: 14px;
-    font-weight: 500;
+    font-size: $font-size-base;
+    font-weight: $font-weight-medium;
  }
 }

@ -385,26 +313,27 @@
 .action-list {
  display: flex;
  flex-direction: column;
-  gap: 8px;
+  gap: $spacing-sm;

  .action-list-item {
    display: flex;
    align-items: center;
-    gap: 12px;
-    padding: 12px 16px;
-    background: #f8f9fa;
-    border: 1px solid #e9ecef;
-    border-radius: 6px;
+    gap: $spacing-md;
+    padding: $spacing-md;
+    background: $bg-secondary;
+    border: 2px solid transparent;
+    border-radius: $radius-md;
    cursor: pointer;
-    transition: all 0.2s;
-    font-size: 14px;
-    color: #1a1a1a;
+    transition: all $transition-base;
+    font-size: $font-size-sm;
+    color: $text-primary;
    text-align: left;
    width: 100%;

    &:hover:not(:disabled) {
-      background: #e9ecef;
-      border-color: #dee2e6;
+      background: white;
+      border-color: $primary;
+      transform: translateX(2px);
    }

    &:disabled {
@ -413,20 +342,15 @@
    }

    &.danger {
-      color: #dc3545;
-
      &:hover:not(:disabled) {
-        background: #f8d7da;
-        border-color: #f5c6cb;
+        border-color: $error;
+        background: rgba($error, 0.05);
      }
    }

-    .action-icon {
-      font-size: 18px;
-    }
-
    .action-text {
      flex: 1;
+      font-weight: $font-weight-medium;
    }
  }
 }
@ -435,14 +359,14 @@
 .health-status {
  display: flex;
  flex-direction: column;
-  gap: 16px;
+  gap: $spacing-md;

  .health-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
-    padding-bottom: 16px;
-    border-bottom: 1px solid #e9ecef;
+    padding-bottom: $spacing-md;
+    border-bottom: 1px solid $border-color;

    &:last-child {
      border-bottom: none;
@ -450,14 +374,14 @@
    }

    .health-label {
-      font-size: 14px;
-      color: #666;
+      font-size: $font-size-sm;
+      color: $text-secondary;
    }

    .health-value {
-      font-size: 16px;
-      font-weight: 600;
-      color: #1a1a1a;
+      font-size: $font-size-base;
+      font-weight: $font-weight-semibold;
+      color: $text-primary;
    }
  }
-}
+}
--- a/src/routes/Authenticated/Apps/App.tsx
+++ b/src/routes/Authenticated/Apps/App.tsx
@ -1,8 +1,10 @@
 import React, { useEffect, useState } 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 { LogEntry } from '../../../services/mockApi';
 import './App.scss';

 export const AppDetail: React.FC = () => {
@ -12,8 +14,11 @@ export const AppDetail: React.FC = () => {
  const [app, setApp] = useState<AbraApp | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
-  const [isEditing, setIsEditing] = useState(false);
  const [actionLoading, setActionLoading] = useState<string | null>(null);
+  
+  // Terminal state
+  const [terminalLogs, setTerminalLogs] = useState<LogEntry[]>([]);
+  const [terminalActive, setTerminalActive] = useState(false);

  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';

@ -24,7 +29,6 @@ export const AppDetail: React.FC = () => {
          const { mockApiService } = await import('../../../services/mockApi');
          const appsData = await mockApiService.getAppsGrouped();
          
-          // Find the specific app
          const serverApps = appsData[server || ''];
          const foundApp = serverApps?.apps.find(a => a.appName === appName);
          
@ -34,7 +38,6 @@ export const AppDetail: React.FC = () => {
            setError('App not found');
          }
        } else {
-          // Real API call would be here
          const appsData = await apiService.getAppsGrouped();
          const serverApps = appsData[server || ''];
          const foundApp = serverApps?.apps.find(a => a.appName === appName);
@ -55,30 +58,61 @@ export const AppDetail: React.FC = () => {
    fetchApp();
  }, [server, appName, isMockMode]);

-  const handleAction = async (action: string) => {
+  const handleAction = async (action: string, version?: string) => {
    if (!app) return;
    
    setActionLoading(action);
+    setTerminalActive(true);
+    setTerminalLogs([]);
+    
    try {
-      switch (action) {
-        case 'start':
-          await apiService.startApp(app.appName);
-          break;
-        case 'stop':
-          await apiService.stopApp(app.appName);
-          break;
-        case 'deploy':
-          await apiService.deployApp(app.appName);
-          break;
-        case 'upgrade':
-          // Upgrade logic would go here
-          console.log('Upgrade app');
-          break;
+      if (isMockMode) {
+        const { mockApiService } = await import('../../../services/mockApi');
+        
+        const onLog = (log: LogEntry) => {
+          setTerminalLogs(prev => [...prev, log]);
+        };
+        
+        switch (action) {
+          case 'start':
+            await mockApiService.startApp(app.appName, onLog);
+            break;
+          case 'stop':
+            await mockApiService.stopApp(app.appName, onLog);
+            break;
+          case 'deploy':
+            await mockApiService.deployApp(app.appName, onLog);
+            break;
+          case 'upgrade':
+            if (version) {
+              await mockApiService.upgradeApp(app.appName, version, onLog);
+            }
+            break;
+          case 'remove':
+            await mockApiService.removeApp(app.appName, onLog);
+            break;
+        }
+      } else {
+        // Real API calls
+        switch (action) {
+          case 'start':
+            await apiService.startApp(app.appName);
+            break;
+          case 'stop':
+            await apiService.stopApp(app.appName);
+            break;
+          case 'deploy':
+            await apiService.deployApp(app.appName);
+            break;
+        }
      }
-      // Refresh app data after action
-      // In real implementation, you'd refetch the app
    } catch (err) {
      console.error('Action failed:', err);
+      setTerminalLogs(prev => [...prev, {
+        type: 'error',
+        text: `❌ Error: ${err instanceof Error ? err.message : 'Action failed'}`,
+        timestamp: new Date()
+      }]);
    } finally {
      setActionLoading(null);
    }
@ -130,35 +164,36 @@ 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>

          <div className="app-actions">
-            <button 
-              className="action-btn secondary"
-              onClick={() => setIsEditing(!isEditing)}
-            >
-              {isEditing ? 'Cancel' : 'Edit'}
-            </button>
            <button 
              className="action-btn danger"
              onClick={() => handleAction('stop')}
-              disabled={actionLoading === 'stop'}
+              disabled={!!actionLoading}
            >
              {actionLoading === 'stop' ? 'Stopping...' : 'Stop'}
            </button>
            <button 
              className="action-btn primary"
              onClick={() => handleAction('deploy')}
-              disabled={actionLoading === 'deploy'}
+              disabled={!!actionLoading}
            >
              {actionLoading === 'deploy' ? 'Deploying...' : 'Deploy'}
            </button>
          </div>
        </div>

+        {/* Terminal Component */}
+        <Terminal 
+          logs={terminalLogs} 
+          isActive={terminalActive}
+          onClose={() => setTerminalActive(false)}
+        />
+
        <div className="content-grid">
          {/* Left Column - Main Info */}
          <div className="main-column">
@ -241,8 +276,8 @@ export const AppDetail: React.FC = () => {
                          <code>{version}</code>
                          <button 
                            className="upgrade-btn"
-                            onClick={() => handleAction('upgrade')}
-                            disabled={actionLoading === 'upgrade'}
+                            onClick={() => handleAction('upgrade', version)}
+                            disabled={!!actionLoading}
                          >
                            {actionLoading === 'upgrade' ? 'Upgrading...' : 'Upgrade'}
                          </button>
@ -254,14 +289,14 @@ export const AppDetail: React.FC = () => {

                {app.upgrade === 'latest' && (
                  <div className="version-latest">
-                    Running latest version
+                    ✓ Running latest version
                  </div>
                )}
              </div>
            </section>
          </div>

-          {/* Right Column - Actions & Logs */}
+          {/* Right Column - Actions & Stats */}
          <div className="sidebar-column">
            <section className="info-card">
              <h2>Quick Actions</h2>
@ -270,33 +305,37 @@ export const AppDetail: React.FC = () => {
                <button 
                  className="action-list-item"
                  onClick={() => handleAction('start')}
-                  disabled={actionLoading === 'start'}
+                  disabled={!!actionLoading}
                >
-                  <span className="action-text">Start Application</span>
+                  <span className="action-text">▶️ Start Application</span>
                </button>

                <button 
                  className="action-list-item"
                  onClick={() => handleAction('stop')}
-                  disabled={actionLoading === 'stop'}
+                  disabled={!!actionLoading}
                >
-                  <span className="action-text">Stop Application</span>
+                  <span className="action-text">⏹️ Stop Application</span>
                </button>

-                <button className="action-list-item">
-                  <span className="action-text">Restart Application</span>
+                <button 
+                  className="action-list-item"
+                  onClick={() => handleAction('deploy')}
+                  disabled={!!actionLoading}
+                >
+                  <span className="action-text">🚀 Deploy Application</span>
                </button>

-                <button className="action-list-item">
-                  <span className="action-text">View Logs</span>
-                </button>
-
-                <button className="action-list-item">
-                  <span className="action-text">Edit Configuration</span>
-                </button>
-
-                <button className="action-list-item danger">
-                  <span className="action-text">Delete Application</span>
+                <button 
+                  className="action-list-item danger"
+                  onClick={() => {
+                    if (confirm(`Are you sure you want to remove ${app.appName}?`)) {
+                      handleAction('remove');
+                    }
+                  }}
+                  disabled={!!actionLoading}
+                >
+                  <span className="action-text">🗑️ Remove Application</span>
                </button>
              </div>
            </section>
@ -323,4 +362,4 @@ export const AppDetail: React.FC = () => {
      </main>
    </div>
  );
-};
+};
--- a/src/routes/Authenticated/Servers/Server.scss
+++ b/src/routes/Authenticated/Servers/Server.scss
@ -1,68 +1,13 @@
@use '../../../assets/scss/variables' as *;
@use '../../../assets/scss/mixins' as *;
+@use '../../../assets/scss/global' as *;

 .server-detail-page {
-  min-height: 100vh;
-  background-color: $bg-secondary;
+  @extend .page-wrapper;
 }

 .server-detail-content {
-  max-width: 1600px;
-  margin: 0 auto;
-  padding: $spacing-2xl $spacing-xl;
-
-  @media (max-width: 768px) {
-    padding: $spacing-xl $spacing-md;
-  }
-
-  .loading,
-  .error {
-    text-align: center;
-    padding: $spacing-3xl;
-    font-size: $font-size-lg;
-  }
-
-  .loading {
-    color: $text-secondary;
-  }
-
-  .error {
-    color: $error;
-  }
-}
-
-// Breadcrumb navigation
-.breadcrumb {
-  display: flex;
-  align-items: center;
-  gap: $spacing-sm;
-  margin-bottom: $spacing-xl;
-  font-size: $font-size-sm;
-
-  .breadcrumb-link {
-    background: none;
-    border: none;
-    color: $primary;
-    cursor: pointer;
-    padding: 0;
-    font-size: $font-size-sm;
-    text-decoration: none;
-    transition: color $transition-base;
-
-    &:hover {
-      color: $primary-light;
-      text-decoration: underline;
-    }
-  }
-
-  .breadcrumb-separator {
-    color: $text-muted;
-  }
-
-  .breadcrumb-current {
-    color: $text-primary;
-    font-weight: $font-weight-semibold;
-  }
+  @extend .page-content;
 }

 // Server header section
@ -100,7 +45,7 @@
  }
 }

-// Action buttons
+// Action buttons (shared with App view, could be moved to global)
 .action-btn {
  padding: $spacing-sm $spacing-lg;
  border: 2px solid $border-color;
@ -159,7 +104,7 @@
  @extend .secondary;
 }

-// Badges
+// Badges - host badge is specific to server view
 .host-badge {
  display: inline-flex;
  align-items: center;
@ -185,50 +130,6 @@
  font-weight: $font-weight-medium;
 }

-.recipe-badge {
-  display: inline-block;
-  padding: $spacing-xs $spacing-sm;
-  background: rgba($primary, 0.1);
-  color: $primary-light;
-  border-radius: $radius-sm;
-  font-size: $font-size-xs;
-  font-weight: $font-weight-medium;
-}
-
-.status-badge {
-  display: inline-block;
-  padding: $spacing-xs $spacing-sm;
-  border-radius: $radius-sm;
-  font-size: $font-size-xs;
-  font-weight: $font-weight-medium;
-
-  &.status-deployed,
-  &.status-running {
-    background: rgba($success, 0.1);
-    color: darken($success, 10%);
-  }
-
-  &.status-stopped {
-    background: rgba($error, 0.1);
-    color: darken($error, 10%);
-  }
-
-  &.status-unknown {
-    background: $bg-secondary;
-    color: $text-muted;
-  }
-}
-
-.chaos-badge {
-  display: inline-block;
-  padding: $spacing-xs $spacing-sm;
-  background: rgba($info, 0.1);
-  color: darken($info, 10%);
-  border-radius: $radius-sm;
-  font-size: $font-size-xs;
-  font-weight: $font-weight-medium;
-}
-
 // Content grid layout
 .content-grid {
  display: grid;
@ -405,18 +306,12 @@
    }

    &.danger {
-      color: $error;
-
      &:hover:not(:disabled) {
        border-color: $error;
        background: rgba($error, 0.05);
      }
    }

-    .action-icon {
-      font-size: $font-size-lg;
-    }
-
    .action-text {
      flex: 1;
      font-weight: $font-weight-medium;
@ -461,4 +356,4 @@
      }
    }
  }
-}
+}
--- a/src/routes/Authenticated/Servers/Server.tsx
+++ b/src/routes/Authenticated/Servers/Server.tsx
@ -1,8 +1,10 @@
 import React, { useEffect, useState } 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 { AbraServer, ServerAppsResponse } from '../../../types';
+import type { LogEntry } from '../../../services/mockApi';
 import './Server.scss';

 interface ServerWithApps extends AbraServer {
@ -22,6 +24,10 @@ export const Server: React.FC = () => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [actionLoading, setActionLoading] = useState<string | null>(null);
+  
+  // Terminal state
+  const [terminalLogs, setTerminalLogs] = useState<LogEntry[]>([]);
+  const [terminalActive, setTerminalActive] = useState(false);

  const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';

@ -33,7 +39,6 @@ export const Server: React.FC = () => {
          const appsData = await mockApiService.getAppsGrouped();
          const serversData = await mockApiService.getServers();
          
-          // Find the server
          const foundServer = serversData.find(s => s.name === serverName);
          const serverApps = appsData[serverName || ''];
          
@ -51,7 +56,6 @@ export const Server: React.FC = () => {
            setError('Server not found');
          }
        } else {
-          // Real API call
          const appsData = await apiService.getAppsGrouped();
          const serversData = await apiService.getServers();
          
@ -86,11 +90,39 @@ export const Server: React.FC = () => {
    if (!server) return;
    
    setActionLoading(action);
+    setTerminalActive(true);
+    setTerminalLogs([]);
+    
    try {
-      console.log(`Action: ${action} on server ${server.name}`);
-      // Add actual server actions here
+      if (isMockMode) {
+        const { mockApiService } = await import('../../../services/mockApi');
+        
+        const onLog = (log: LogEntry) => {
+          setTerminalLogs(prev => [...prev, log]);
+        };
+        
+        switch (action) {
+          case 'refresh':
+            await mockApiService.refreshServer(server.name, onLog);
+            break;
+          case 'deploy-all':
+            await mockApiService.deployAllApps(server.name, server.appCount, onLog);
+            break;
+          case 'upgrade-all':
+            await mockApiService.upgradeAllApps(server.name, server.upgradeCount, onLog);
+            break;
+        }
+      } else {
+        // Real API calls
+        console.log(`Action: ${action} on server ${server.name}`);
+      }
    } catch (err) {
      console.error('Action failed:', err);
+      setTerminalLogs(prev => [...prev, {
+        type: 'error',
+        text: `❌ Error: ${err instanceof Error ? err.message : 'Action failed'}`,
+        timestamp: new Date()
+      }]);
    } finally {
      setActionLoading(null);
    }
@ -143,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>
@ -153,20 +185,27 @@ export const Server: React.FC = () => {
            <button 
              className="action-btn secondary"
              onClick={() => handleAction('refresh')}
-              disabled={actionLoading === 'refresh'}
+              disabled={!!actionLoading}
            >
-              {actionLoading === 'refresh' ? 'Refreshing...' : 'Refresh'}
+              {actionLoading === 'refresh' ? 'Refreshing...' : '🔄 Refresh'}
            </button>
            <button 
              className="action-btn primary"
              onClick={() => handleAction('deploy-all')}
-              disabled={actionLoading === 'deploy-all'}
+              disabled={!!actionLoading}
            >
-              {actionLoading === 'deploy-all' ? 'Deploying...' : 'Deploy All'}
+              {actionLoading === 'deploy-all' ? 'Deploying...' : '🚀 Deploy All'}
            </button>
          </div>
        </div>

+        {/* Terminal Component */}
+        <Terminal 
+          logs={terminalLogs} 
+          isActive={terminalActive}
+          onClose={() => setTerminalActive(false)}
+        />
+
        <div className="content-grid">
          {/* Left Column - Main Info */}
          <div className="main-column">
@ -241,10 +280,10 @@ export const Server: React.FC = () => {
                            {app.status}
                          </span>
                          {app.chaos === 'true' && (
-                            <span className="chaos-badge" title="Chaos mode"></span>
+                            <span className="chaos-badge">🔬</span>
                          )}
                          {app.upgrade !== 'latest' && (
-                            <span className="upgrade-badge" title="Upgrade available"></span>
+                            <span className="upgrade-badge">⬆️</span>
                          )}
                        </div>
                      </div>
@ -278,41 +317,25 @@ export const Server: React.FC = () => {
                <button 
                  className="action-list-item"
                  onClick={() => handleAction('refresh')}
-                  disabled={actionLoading === 'refresh'}
+                  disabled={!!actionLoading}
                >
-                  <span className="action-text">Refresh Server Info</span>
+                  <span className="action-text">🔄 Refresh Server Info</span>
                </button>

                <button 
                  className="action-list-item"
                  onClick={() => handleAction('deploy-all')}
-                  disabled={actionLoading === 'deploy-all'}
+                  disabled={!!actionLoading}
                >
-                  <span className="action-text">Deploy All Apps</span>
+                  <span className="action-text">🚀 Deploy All Apps</span>
                </button>

                <button 
                  className="action-list-item"
                  onClick={() => handleAction('upgrade-all')}
-                  disabled={actionLoading === 'upgrade-all' || server.upgradeCount === 0}
+                  disabled={!!actionLoading || server.upgradeCount === 0}
                >
-                  <span className="action-text">Upgrade All Apps</span>
-                </button>
-
-                <button className="action-list-item">
-                  <span className="action-text">View Metrics</span>
-                </button>
-
-                <button className="action-list-item">
-                  <span className="action-text">View Logs</span>
-                </button>
-
-                <button className="action-list-item">
-                  <span className="action-text">Server Settings</span>
-                </button>
-
-                <button className="action-list-item danger">
-                  <span className="action-text">Remove Server</span>
+                  <span className="action-text">⬆️ Upgrade All Apps</span>
                </button>
              </div>
            </section>
@ -322,7 +345,7 @@ export const Server: React.FC = () => {
              <div className="health-status">
                <div className="health-item">
                  <span className="health-label">Status</span>
-                  <span className="health-value status-online">Online</span>
+                  <span className="health-value status-online">🟢 Online</span>
                </div>
                <div className="health-item">
                  <span className="health-label">CPU Usage</span>
@ -347,4 +370,4 @@ export const Server: React.FC = () => {
      </main>
    </div>
  );
-};
+};
--- a/src/services/api.ts
+++ b/src/services/api.ts
@ -1,12 +1,27 @@
-import type { AbraApp, AbraServer, AuthResponse, LoginCredentials, User } from '../types';
+import type { AbraServer, ServerAppsResponse, AuthResponse, LoginCredentials, User } from '../types';
+
+// Log entry type - shared between mock and real API
+export type LogEntry = {
+  type: 'info' | 'success' | 'error' | 'warning' | 'command' | 'output';
+  text: string;
+  timestamp: Date;
+};

 const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000/api';

+// Helper to process log JSON from API response
+const processLogResponse = (logData: any[]): LogEntry[] => {
+  return logData.map(log => ({
+    type: log.type,
+    text: log.text,
+    timestamp: new Date(log.timestamp || Date.now()),
+  }));
+};
+
 class ApiService {
  private token: string | null = null;

  constructor() {
-    // Load token from localStorage on initialization
    this.token = localStorage.getItem('auth_token');
  }

@ -66,23 +81,97 @@ class ApiService {
    return this.request<AbraServer[]>('/abra/servers');
  }

-  async deployApp(appName: string): Promise<void> {
-    return this.request(`/abra/apps/${appName}/deploy`, {
+  // App actions with log streaming
+  async deployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/deploy`, {
      method: 'POST',
    });
+
+    // Process logs and stream to callback
+    if (onLog && response.logs) {
+      const logs = processLogResponse(response.logs);
+      logs.forEach(log => onLog(log));
+    }
  }

-  async stopApp(appName: string): Promise<void> {
-    return this.request(`/abra/apps/${appName}/stop`, {
+  async stopApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/stop`, {
      method: 'POST',
    });
+
+    if (onLog && response.logs) {
+      const logs = processLogResponse(response.logs);
+      logs.forEach(log => onLog(log));
+    }
  }

-  async startApp(appName: string): Promise<void> {
-    return this.request(`/abra/apps/${appName}/start`, {
+  async startApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/start`, {
      method: 'POST',
    });
+
+    if (onLog && response.logs) {
+      const logs = processLogResponse(response.logs);
+      logs.forEach(log => onLog(log));
+    }
+  }
+
+  async upgradeApp(appName: string, version: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/upgrade`, {
+      method: 'POST',
+      body: JSON.stringify({ version }),
+    });
+
+    if (onLog && response.logs) {
+      const logs = processLogResponse(response.logs);
+      logs.forEach(log => onLog(log));
+    }
+  }
+
+  async removeApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const response = await this.request<{ logs: any[] }>(`/abra/apps/${appName}/remove`, {
+      method: 'POST',
+    });
+
+    if (onLog && response.logs) {
+      const logs = processLogResponse(response.logs);
+      logs.forEach(log => onLog(log));
+    }
+  }
+
+  // Server actions with log streaming
+  async refreshServer(serverName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const response = await this.request<{ logs: any[] }>(`/abra/servers/${serverName}/refresh`, {
+      method: 'POST',
+    });
+
+    if (onLog && response.logs) {
+      const logs = processLogResponse(response.logs);
+      logs.forEach(log => onLog(log));
+    }
+  }
+
+  async deployAllApps(serverName: string, appCount: number, onLog?: (log: LogEntry) => void): Promise<void> {
+    const response = await this.request<{ logs: any[] }>(`/abra/servers/${serverName}/deploy-all`, {
+      method: 'POST',
+    });
+
+    if (onLog && response.logs) {
+      const logs = processLogResponse(response.logs);
+      logs.forEach(log => onLog(log));
+    }
+  }
+
+  async upgradeAllApps(serverName: string, upgradeCount: number, onLog?: (log: LogEntry) => void): Promise<void> {
+    const response = await this.request<{ logs: any[] }>(`/abra/servers/${serverName}/upgrade-all`, {
+      method: 'POST',
+    });
+
+    if (onLog && response.logs) {
+      const logs = processLogResponse(response.logs);
+      logs.forEach(log => onLog(log));
+    }
  }
 }

-export const apiService = new ApiService();
+export const apiService = new ApiService();
--- a/src/services/mock-logs.json
+++ b/src/services/mock-logs.json
@ -0,0 +1,326 @@
+{
+  "deploy": {
+    "logs": [
+      {
+        "type": "info",
+        "text": "📦 Deploying {appName}..."
+      },
+      {
+        "type": "command",
+        "text": "$ abra app deploy {appName}"
+      },
+      {
+        "type": "info",
+        "text": "Checking server connection..."
+      },
+      {
+        "type": "success",
+        "text": "✓ Connected to server"
+      },
+      {
+        "type": "info",
+        "text": "Pulling latest images..."
+      },
+      {
+        "type": "output",
+        "text": "latest: Pulling from library/traefik"
+      },
+      {
+        "type": "output",
+        "text": "a1b2c3d4: Pull complete"
+      },
+      {
+        "type": "output",
+        "text": "e5f6g7h8: Pull complete"
+      },
+      {
+        "type": "success",
+        "text": "✓ Images pulled successfully"
+      },
+      {
+        "type": "info",
+        "text": "Creating containers..."
+      },
+      {
+        "type": "output",
+        "text": "Creating {appName}_app_1 ... done"
+      },
+      {
+        "type": "output",
+        "text": "Creating {appName}_db_1  ... done"
+      },
+      {
+        "type": "info",
+        "text": "Starting services..."
+      },
+      {
+        "type": "output",
+        "text": "Starting {appName}_app_1 ... done"
+      },
+      {
+        "type": "output",
+        "text": "Starting {appName}_db_1  ... done"
+      },
+      {
+        "type": "success",
+        "text": "✓ {appName} deployed successfully!"
+      }
+    ]
+  },
+  "stop": {
+    "logs": [
+      {
+        "type": "info",
+        "text": "🛑 Stopping {appName}..."
+      },
+      {
+        "type": "command",
+        "text": "$ abra app stop {appName}"
+      },
+      {
+        "type": "output",
+        "text": "Stopping {appName}_app_1 ... done"
+      },
+      {
+        "type": "output",
+        "text": "Stopping {appName}_db_1  ... done"
+      },
+      {
+        "type": "success",
+        "text": "✓ {appName} stopped"
+      }
+    ]
+  },
+  "start": {
+    "logs": [
+      {
+        "type": "info",
+        "text": "▶️ Starting {appName}..."
+      },
+      {
+        "type": "command",
+        "text": "$ abra app start {appName}"
+      },
+      {
+        "type": "output",
+        "text": "Starting {appName}_app_1 ... done"
+      },
+      {
+        "type": "output",
+        "text": "Starting {appName}_db_1  ... done"
+      },
+      {
+        "type": "success",
+        "text": "✓ {appName} started"
+      }
+    ]
+  },
+  "upgrade": {
+    "logs": [
+      {
+        "type": "info",
+        "text": "⬆️ Upgrading {appName} to {version}..."
+      },
+      {
+        "type": "command",
+        "text": "$ abra app upgrade {appName}"
+      },
+      {
+        "type": "info",
+        "text": "Pulling new version..."
+      },
+      {
+        "type": "output",
+        "text": "{version}: Pulling from library/app"
+      },
+      {
+        "type": "output",
+        "text": "x9y8z7w6: Pull complete"
+      },
+      {
+        "type": "success",
+        "text": "✓ New version pulled"
+      },
+      {
+        "type": "info",
+        "text": "Stopping old containers..."
+      },
+      {
+        "type": "output",
+        "text": "Stopping {appName}_app_1 ... done"
+      },
+      {
+        "type": "info",
+        "text": "Starting new containers..."
+      },
+      {
+        "type": "output",
+        "text": "Starting {appName}_app_1 ... done"
+      },
+      {
+        "type": "success",
+        "text": "✓ {appName} upgraded to {version}"
+      }
+    ]
+  },
+  "remove": {
+    "logs": [
+      {
+        "type": "warning",
+        "text": "⚠️ Removing {appName}..."
+      },
+      {
+        "type": "command",
+        "text": "$ abra app remove {appName}"
+      },
+      {
+        "type": "output",
+        "text": "Stopping {appName}_app_1 ... done"
+      },
+      {
+        "type": "output",
+        "text": "Stopping {appName}_db_1  ... done"
+      },
+      {
+        "type": "output",
+        "text": "Removing {appName}_app_1 ... done"
+      },
+      {
+        "type": "output",
+        "text": "Removing {appName}_db_1  ... done"
+      },
+      {
+        "type": "output",
+        "text": "Removing network {appName}_default"
+      },
+      {
+        "type": "success",
+        "text": "✓ {appName} removed"
+      }
+    ]
+  },
+  "serverRefresh": {
+    "logs": [
+      {
+        "type": "info",
+        "text": "🔄 Refreshing server {serverName}..."
+      },
+      {
+        "type": "command",
+        "text": "$ abra server ls"
+      },
+      {
+        "type": "info",
+        "text": "Fetching server status..."
+      },
+      {
+        "type": "output",
+        "text": "Checking connection..."
+      },
+      {
+        "type": "success",
+        "text": "✓ Connected"
+      },
+      {
+        "type": "output",
+        "text": "Fetching app list..."
+      },
+      {
+        "type": "success",
+        "text": "✓ Found apps on {serverName}"
+      },
+      {
+        "type": "success",
+        "text": "✓ Server refreshed"
+      }
+    ]
+  },
+  "deployAll": {
+    "logs": [
+      {
+        "type": "info",
+        "text": "📦 Deploying all apps on {serverName}..."
+      },
+      {
+        "type": "command",
+        "text": "$ abra app deploy --all --server {serverName}"
+      },
+      {
+        "type": "info",
+        "text": "Found {appCount} apps to deploy"
+      },
+      {
+        "type": "output",
+        "text": "Deploying apps in parallel..."
+      },
+      {
+        "type": "info",
+        "text": "[1/{appCount}] Deploying app_1..."
+      },
+      {
+        "type": "success",
+        "text": "✓ app_1 deployed"
+      },
+      {
+        "type": "info",
+        "text": "[2/{appCount}] Deploying app_2..."
+      },
+      {
+        "type": "success",
+        "text": "✓ app_2 deployed"
+      },
+      {
+        "type": "info",
+        "text": "[3/{appCount}] Deploying app_3..."
+      },
+      {
+        "type": "success",
+        "text": "✓ app_3 deployed"
+      },
+      {
+        "type": "success",
+        "text": "✓ All apps deployed on {serverName}"
+      }
+    ]
+  },
+  "upgradeAll": {
+    "logs": [
+      {
+        "type": "info",
+        "text": "⬆️ Upgrading all apps on {serverName}..."
+      },
+      {
+        "type": "command",
+        "text": "$ abra app upgrade --all --server {serverName}"
+      },
+      {
+        "type": "info",
+        "text": "Found {upgradeCount} apps with available upgrades"
+      },
+      {
+        "type": "output",
+        "text": "Upgrading apps sequentially..."
+      },
+      {
+        "type": "info",
+        "text": "[1/{upgradeCount}] Upgrading app_1..."
+      },
+      {
+        "type": "success",
+        "text": "✓ app_1 upgraded"
+      },
+      {
+        "type": "info",
+        "text": "[2/{upgradeCount}] Upgrading app_2..."
+      },
+      {
+        "type": "success",
+        "text": "✓ app_2 upgraded"
+      },
+      {
+        "type": "success",
+        "text": "✓ All apps upgraded on {serverName}"
+      }
+    ]
+  }
+}
--- a/src/services/mockApi.ts
+++ b/src/services/mockApi.ts
@ -1,10 +1,67 @@
 import type { AbraServer, ServerAppsResponse } from '../types';
 import appsData from './mock-apps.json';
 import serversData from './mock-servers.json';
+import logsData from './mock-logs.json';
+
+// Log entry type
+export type LogEntry = {
+  type: 'info' | 'success' | 'error' | 'warning' | 'command' | 'output';
+  text: string;
+  timestamp: Date;
+};
+
+// Type for the imported JSON structure
+type LogTemplate = {
+  type: 'info' | 'success' | 'error' | 'warning' | 'command' | 'output';
+  text: string;
+};
+
+type LogsDataStructure = {
+  [key: string]: {
+    logs: LogTemplate[];
+  };
+};

 // Simulate API delay
 const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));

+// Helper to replace template variables like {appName}, {version}
+const replaceVars = (text: string, vars: Record<string, string | number>): string => {
+  let result = text;
+  Object.entries(vars).forEach(([key, value]) => {
+    result = result.replace(new RegExp(`\\{${key}\\}`, 'g'), String(value));
+  });
+  return result;
+};
+
+// Helper to process log templates into LogEntry objects
+const processLogs = (
+  action: string,
+  vars: Record<string, string | number>
+): LogEntry[] => {
+  console.log('Processing logs for action:', action);
+  console.log('Loaded logsData:', logsData);
+  
+  const typedLogsData = logsData as LogsDataStructure;
+  const actionData = typedLogsData[action];
+  
+  if (!actionData || !actionData.logs) {
+    console.error(`No logs found for action: ${action}`);
+    return [];
+  }
+  
+  console.log('Found logs:', actionData.logs);
+  
+  const templates = actionData.logs;
+  return templates
+    .filter(template => template && template.type && template.text) // Filter out any undefined/malformed entries
+    .map(template => ({
+      type: template.type,
+      text: replaceVars(template.text, vars),
+      timestamp: new Date(),
+    }));
+};
+
 export const mockApiService = {
  async getAppsGrouped(): Promise<ServerAppsResponse> {
    await delay(500);
@ -16,18 +73,75 @@ export const mockApiService = {
    return serversData as AbraServer[];
  },

-  async deployApp(appName: string): Promise<void> {
-    await delay(1000);
-    console.log(`Mock: Deploying app ${appName}`);
+  async deployApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const logs = processLogs('deploy', { appName });
+    
+    for (const log of logs) {
+      await delay(200);
+      onLog?.(log);
+    }
  },

-  async stopApp(appName: string): Promise<void> {
-    await delay(500);
-    console.log(`Mock: Stopping app ${appName}`);
+  async stopApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const logs = processLogs('stop', { appName });
+    
+    for (const log of logs) {
+      await delay(150);
+      onLog?.(log);
+    }
  },

-  async startApp(appName: string): Promise<void> {
-    await delay(500);
-    console.log(`Mock: Starting app ${appName}`);
+  async startApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const logs = processLogs('start', { appName });
+    
+    for (const log of logs) {
+      await delay(150);
+      onLog?.(log);
+    }
+  },
+
+  async upgradeApp(appName: string, version: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const logs = processLogs('upgrade', { appName, version });
+    
+    for (const log of logs) {
+      await delay(200);
+      onLog?.(log);
+    }
+  },
+
+  async removeApp(appName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const logs = processLogs('remove', { appName });
+    
+    for (const log of logs) {
+      await delay(180);
+      onLog?.(log);
+    }
+  },
+
+  async refreshServer(serverName: string, onLog?: (log: LogEntry) => void): Promise<void> {
+    const logs = processLogs('serverRefresh', { serverName });
+    
+    for (const log of logs) {
+      await delay(200);
+      onLog?.(log);
+    }
+  },
+
+  async deployAllApps(serverName: string, appCount: number, onLog?: (log: LogEntry) => void): Promise<void> {
+    const logs = processLogs('deployAll', { serverName, appCount });
+    
+    for (const log of logs) {
+      await delay(250);
+      onLog?.(log);
+    }
+  },
+
+  async upgradeAllApps(serverName: string, upgradeCount: number, onLog?: (log: LogEntry) => void): Promise<void> {
+    const logs = processLogs('upgradeAll', { serverName, upgradeCount });
+    
+    for (const log of logs) {
+      await delay(250);
+      onLog?.(log);
+    }
  },
 };
Author	SHA1	Message	Date
Matt Beaudoin	89da98e35c	logs hooked up	2026-03-05 08:16:11 -08:00
BornDeleuze	08510b136e	Merge pull request 'dev' (#5 ) from dev into main Reviewed-on: BornDeleuze/coop-cloud-front#5	2026-03-04 22:44:53 +00:00
BornDeleuze	4e1482c1dc	Merge pull request 'rewrite-auth' (#4 ) from rewrite-auth into dev Reviewed-on: BornDeleuze/coop-cloud-front#4	2026-03-04 22:44:26 +00:00
BornDeleuze	4fea476147	Merge pull request 'rewrite auth' (#3 ) from dev into main Reviewed-on: BornDeleuze/coop-cloud-front#3	2026-03-02 22:32:33 +00:00
BornDeleuze	f33066e95a	Merge pull request 'rewrite-auth' (#2 ) from rewrite-auth into dev Reviewed-on: BornDeleuze/coop-cloud-front#2	2026-03-02 22:31:59 +00:00
BornDeleuze	e0ac707600	add server details page Reviewed-on: BornDeleuze/coop-cloud-front#1	2026-01-18 05:51:37 +00:00