+
+ Loading application
+
+ 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",
+ }}
+ />
+
+
+ );
+};
\ No newline at end of file
diff --git a/web/src/components/Editor/Secrets.scss b/web/src/components/Editor/Secrets.scss
new file mode 100644
index 0000000..1d194f9
--- /dev/null
+++ b/web/src/components/Editor/Secrets.scss
@@ -0,0 +1,150 @@
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
+@use "sass:color";
+.secrets {
+ color: $text-primary
+}
+.status {
+ white-space: nowrap;
+ min-width: 350px;
+ .manage-secret {
+ display: flex;
+ align-items: center;
+ gap: $spacing-sm;
+ &.created {
+ color: $success;
+ }
+ &.not-created {
+ color: $error;
+ }
+ }
+}
+
+.gen-btn {
+ @include action-btn(1px, $radius-md, $spacing-xs $spacing-md, $font-size-sm);
+ white-space: nowrap;
+ &.auto {
+
+ padding: $spacing-xs;
+ border: 1px solid #d0d7de;
+ border-radius: 6px;
+
+ background: #fff;
+ cursor: pointer;
+
+ transition: background-color 0.15s ease;
+
+ &:hover:not(:disabled) {
+ background: #f3f4f6;
+ }
+ }
+ &.create {
+ margin-left: auto;
+ display: flex;
+ gap: 8px;
+ background: $success;
+ color: white;
+ border-color: $success;
+
+ &:hover:not(:disabled) {
+ background: color.adjust($success, $lightness: -10%);
+ }
+ }
+ &.modify {
+ margin-left: auto;
+ display: flex;
+ gap: 8px;
+ background: $warning;
+ color: white;
+ border-color: $warning;
+
+ &:hover:not(:disabled) {
+ background: color.adjust($warning, $lightness: -10%);
+ }
+ }
+ &.cancel {
+ background: $error;
+ color: white;
+ border-color: $error;
+
+ &:hover:not(:disabled) {
+ background: color.adjust($error, $lightness: -10%);
+ }
+ }
+
+}
+.secret-input-wrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ max-width: 420px;
+}
+.secret-input {
+ flex: 1;
+ min-width: 350px;
+ padding: $spacing-xs;
+ padding-right: calc(
+ 16px +
+ 16px +
+ 6px +
+ 16px
+ );
+ font-size: $font-size-sm;
+
+ border: 1px solid #d0d7de;
+ border-radius: $radius-md;
+
+ background: #fff;
+ color: #24292f;
+
+ transition:
+ border-color 0.15s ease,
+ box-shadow 0.15s ease;
+}
+
+.secret-input::placeholder {
+ color: #8b949e;
+}
+
+.secret-input:focus {
+ outline: none;
+ border-color: #2f81f7;
+ box-shadow: 0 0 0 3px rgba(47, 129, 247, 0.15);
+}
+.right-icons {
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+
+ display: flex;
+ align-items: center;
+ gap: 6px;
+
+ z-index: 1;
+}
+
+.right-icons button {
+ all: unset;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 16px;
+ height: 16px;
+
+ border: none;
+ background: transparent;
+ cursor: pointer;
+
+ color: #6b7280;
+ border-radius: 4px;
+
+ transition: background-color 0.15s ease;
+}
+
+.right-icons button:hover {
+ color: #37393b;
+}
\ No newline at end of file
diff --git a/web/src/components/Editor/Secrets.tsx b/web/src/components/Editor/Secrets.tsx
new file mode 100644
index 0000000..3211ef4
--- /dev/null
+++ b/web/src/components/Editor/Secrets.tsx
@@ -0,0 +1,208 @@
+import React, { useEffect, useState, useRef } from "react";
+import { apiService } from '../../services/api';
+import type { AbraAppSecret } from '../../types'
+import './Secrets.scss';
+import {generatePassphrase} from "niceware-ts";
+import { FaCopy, FaEye, FaEyeSlash, FaDice } from "react-icons/fa";
+
+
+
+
+interface SecretProps {
+ appName: string;
+}
+
+export const SecretsPage: React.FC
+ {(secrets == null &&
+ );
+};
\ No newline at end of file
diff --git a/web/src/components/Header/Header.tsx b/web/src/components/Header/Header.tsx
new file mode 100644
index 0000000..3cc8ff2
--- /dev/null
+++ b/web/src/components/Header/Header.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import './_Header.scss';
+import logo from '../../assets/coopcloud_logo_grey.svg';
+
+
+interface HeaderProps {
+ children: React.ReactNode;
+}
+
+export const Header: React.FCFetching Secrets...
)} + {(secrets != null && secrets.length == 0 &&Found no secrets
)} + {(secrets != null && secrets.length > 0 && +
+
+
+
+
)}
+ | Secret Name | +Version | +Status | +|
|---|---|---|---|
| {secret.name} | +{secret.version} | +
+ {loadingSecrets.has(secret.name) && modifying secret{ellipses} }
+ {!loadingSecrets.has(secret.name) && (
+ {!editingSecrets.has(secret.name) && !loadingSecrets.has(secret.name) && {secret.created ? "created" : "not created"} }
+ {editingSecrets.has(secret.name) &&
+ )}
+
+
+
+ setSecretValues(prev => ({
+ ...prev,
+ [secret.name]: e.target.value,
+ }))
+ }
+ />
+
+ }
+
+
+ { editingSecrets.has(secret.name) &&
+
+ }
+
+
+
+
+ |
+ + {secret.value} + + | +
+ navigate('/dashboard')} className="logo">
+
+
+
+ navigate('/dashboard')} className="logo">
+ 
+
+
+
+
+
+ );
+};
diff --git a/web/src/components/Spinner/Spinner.scss b/web/src/components/Spinner/Spinner.scss
new file mode 100644
index 0000000..6ceb45e
--- /dev/null
+++ b/web/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);
+ }
+}
\ No newline at end of file
diff --git a/web/src/components/Spinner/Spinner.tsx b/web/src/components/Spinner/Spinner.tsx
new file mode 100644
index 0000000..c345fe8
--- /dev/null
+++ b/web/src/components/Spinner/Spinner.tsx
@@ -0,0 +1,9 @@
+import "./Spinner.scss"
+
+export const Spinner = () => {
+ return (
+
+ );
+};
diff --git a/web/src/components/Terminal/Terminal.tsx b/web/src/components/Terminal/Terminal.tsx
new file mode 100644
index 0000000..9fd1b6a
--- /dev/null
+++ b/web/src/components/Terminal/Terminal.tsx
@@ -0,0 +1,83 @@
+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
+
+ );
+};
diff --git a/web/src/components/Terminal/_Terminal.scss b/web/src/components/Terminal/_Terminal.scss
new file mode 100644
index 0000000..fc1579e
--- /dev/null
+++ b/web/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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/src/index.scss b/web/src/index.scss
new file mode 100644
index 0000000..f13b8e4
--- /dev/null
+++ b/web/src/index.scss
@@ -0,0 +1,93 @@
+@use './assets/scss/variables' as *;
+@use './assets/scss/mixins' as *;
+@use './assets/scss/global' as *;
+
+// Global root styles
+:root {
+ line-height: 1.5;
+ font-weight: 400;
+ font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+ 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+ 'Helvetica Neue', sans-serif;
+
+ color-scheme: light dark;
+ color: $text-primary;
+ background-color: $bg-primary;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+// Global element resets
+* {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+// Global link styles
+a {
+ font-weight: 500;
+ color: $primary;
+ text-decoration: none;
+ transition: color $transition-base;
+
+ &:hover {
+ color: $primary-light;
+ }
+}
+
+// Global heading styles
+h1, h2, h3, h4, h5, h6 {
+ color: $text-primary;
+ margin: 0;
+}
+
+h1 {
+ font-size: $font-size-3xl;
+ line-height: 1.1;
+}
+
+h2 {
+ font-size: $font-size-2xl;
+ line-height: 1.2;
+}
+
+h3 {
+ font-size: $font-size-xl;
+ line-height: 1.3;
+}
+
+// Global button styles
+button {
+ border-radius: $radius-md;
+ border: 1px solid transparent;
+ padding: $spacing-sm $spacing-lg;
+ font-size: $font-size-base;
+ font-weight: $font-weight-medium;
+ font-family: inherit;
+ background-color: $primary;
+ color: white;
+ cursor: pointer;
+ transition: all $transition-base;
+
+ &:hover {
+ background-color: $primary-light;
+ }
+
+ &:focus-visible {
+ outline: 2px solid $primary;
+ outline-offset: 2px;
+ }
+
+ &:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+}
diff --git a/web/src/main.tsx b/web/src/main.tsx
new file mode 100644
index 0000000..46c0846
--- /dev/null
+++ b/web/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.scss'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+
+
+
+
+
+
+
+ abra CLI
+
+
+ {displayedLogs.filter(log => log && log.type).map((log, index) => (
+
+
+ {log.text}
+
+ ))}
+ {isActive && displayedLogs.length > 0 && (
+ ▊
+ )}
+
+
,
+ document.body
+ );
+ }
+ function SecretsModal({ onClose }) {
+ return createPortal(
+ e.stopPropagation()}
+ >
+
+
+
+
+
+
+
+
+
,
+ document.body
+ );
+ }
+ const waitForLogs = (appName: string) => {
+ setDeployState("deploying");
+ console.log("deploying");
+ deployRef.current = apiService.deployLogs(appName,
+ (update) => {
+ if (update.type === "service") {
+ console.log(update.data.name)
+ const serviceName = update.data.name.slice(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);
+ }
+ }
+ )
+ }
+ // TODO
+ const handleDeleteSnapshot = async () => {}
+ const handleDownloadSnapshot = async (appName: string) => {
+ const a = document.createElement('a')
+ a.href = `http://localhost:3000/api/apps/${appName}/backup/download`
+ a.click()
+ // console.log("downloading...")
+ // const blob = await apiService.downloadSnapshot(appName)
+
+ // const url = URL.createObjectURL(blob)
+
+ // const a = document.createElement('a')
+ // a.href = url
+ // a.download = `${appName}.tar.gz`
+ // a.click()
+
+ // URL.revokeObjectURL(url)
+ }
+ // RESTORE UNTESTED
+ const handleRestoreSnapshot = async (appName: string, snapshot?: string) => {
+ apiService.restoreBackup(appName, snapshot)
+ }
+
+ const handleAction = async (action: string, version?: string) => {
+ if (!app) return;
+
+ setActionLoading(action);
+ try {
+ if (isMockMode) {
+ const { mockApiService } = await import('../../services/mockApi');
+
+ const onLog = (log: LogEntry) => {
+ setTerminalLogs(prev => [...prev, log]);
+ };
+
+ switch (action) {
+ case 'deploy':
+ await mockApiService.deployApp(app.appName, onLog);
+ break;
+ case 'stop':
+ await mockApiService.stopApp(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 'stop':
+ await apiService.stopApp(app.appName);
+ setRefreshKey(prev => prev + 1);
+ break;
+ case 'upgrade':
+ await apiService.upgradeApp(app.appName);
+ waitForLogs(app.appName);
+ break;
+ case 'deploy':
+ await apiService.deployApp(app.appName);
+ waitForLogs(app.appName);
+ 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;
+ case 'secrets':
+ setOpenSecrets(true);
+ break;
+ case 'rollback':
+ if (version) {
+ console.log(version);
+ apiService.rollbackApp(app.appName, version);
+ waitForLogs(app.appName);
+ } else {
+ console.log("no version for rollback");
+ }
+ }
+ }
+ } 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);
+ }
+ };
+
+ if (loading) {
+ return (
+ e.stopPropagation()}
+ >
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ if (error || !app) {
+ return (
+
+
+
+
+ );
+ }
+ // TODO: make sure this makes sense when app.upgrade is unknown
+ const upgradeVersions = (app.upgrade !== 'latest' && app.upgrade !== 'unknown') ? app.upgrade.split('\n') : [];
+
+ return (
+ {error || 'App not found'}
+
+
+ {openEditor && (
+ setOpenEditor(false)} />
+ )}
+ {openSecrets && (
+ setOpenSecrets(false)} />
+ )}
+
+ {
+ stopRef.current?.();
+ stopRef.current = null;
+ setTerminalActive(false)
+ }}
+ />
+
+
+
+ );
+};
diff --git a/web/src/routes/Apps/Apps.scss b/web/src/routes/Apps/Apps.scss
new file mode 100644
index 0000000..ead1337
--- /dev/null
+++ b/web/src/routes/Apps/Apps.scss
@@ -0,0 +1,167 @@
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
+
+// Extend global page wrapper
+.apps-page {
+ @extend .page-wrapper;
+}
+
+.apps-content {
+ @extend .page-content;
+}
+
+// Compact stats row
+.stats-row {
+ display: flex;
+ align-items: center;
+ gap: $spacing-md;
+ margin-bottom: $spacing-xl;
+ flex-wrap: wrap;
+}
+
+.stat-chip {
+ @include chip();
+
+ &.active {
+ border-color: $primary-dark;
+ background: $bg-primary;
+ box-shadow: 0 0 0 3px rgba($primary-dark, 0.08);
+ }
+
+ .stat-label {
+ color: $text-secondary;
+ font-size: $font-size-sm;
+ font-weight: $font-weight-medium;
+ }
+
+ .stat-value {
+ color: $text-primary;
+ font-size: $font-size-xl;
+ font-weight: $font-weight-bold;
+ min-width: 24px;
+ text-align: center;
+ }
+}
+
+/* reset-filters-btn removed — outline on stat-chip indicates active filters */
+
+// Apps table specific styles
+.apps-table-container {
+ @include scrollable-card;
+ margin-bottom: $spacing-lg;
+}
+
+.apps-table {
+ width: 100%;
+ border-collapse: collapse;
+
+ thead {
+ background-color: $bg-tertiary;
+
+ th {
+ padding: $spacing-md $spacing-lg;
+ text-align: left;
+ font-weight: $font-weight-semibold;
+ color: $text-primary;
+ font-size: $font-size-sm;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ border-bottom: 2px solid $border-color;
+ }
+ }
+
+ tbody {
+ tr {
+ border-bottom: 1px solid $border-color;
+ transition: background-color $transition-base;
+
+ &:hover {
+ background-color: rgba($primary, 0.05);
+ }
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+
+ td {
+ padding: $spacing-md $spacing-lg;
+ font-size: $font-size-base;
+ color: $text-primary;
+
+ &.no-results {
+ text-align: center;
+ padding: $spacing-3xl;
+ color: $text-secondary;
+ }
+ }
+ }
+}
+
+// App table cell styles
+.app-name-cell {
+ .app-name {
+ font-weight: $font-weight-medium;
+ color: $text-primary;
+ }
+ .domain-link {
+ color: $primary-dark;
+ text-decoration: none;
+ transition: color $transition-base;
+
+ &:hover {
+ color: $primary-light;
+ text-decoration: underline;
+ }
+ }
+}
+
+
+.no-domain {
+ color: $text-muted;
+ font-style: italic;
+}
+
+.version-cell {
+ display: flex;
+ align-items: center;
+ gap: $spacing-sm;
+
+ .version {
+ font-family: monospace;
+ font-size: $font-size-sm;
+ color: $text-primary;
+ }
+
+ .chaos-badge,
+ .upgrade-available {
+ font-size: $font-size-base;
+ }
+}
+
+// Action buttons
+.actions {
+ display: flex;
+ gap: $spacing-sm;
+
+ .action-btn {
+ @include action-btn(1px, $radius-sm, $spacing-xs $spacing-md, $font-size-sm);
+
+ &:hover {
+ background-color: $primary;
+ color: white;
+ border-color: $primary;
+ }
+
+ &.upgrade {
+ border-color: $warning;
+ color: $warning;
+
+ &:hover {
+ background-color: $warning;
+ color: white;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/src/routes/Apps/Apps.tsx b/web/src/routes/Apps/Apps.tsx
new file mode 100644
index 0000000..8c44776
--- /dev/null
+++ b/web/src/routes/Apps/Apps.tsx
@@ -0,0 +1,289 @@
+
+// TODOS:
+// make the two filters non-exlusive
+
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Header } from '../../components/Header/Header';
+import { Loader } from '../../components/Loader/Loader';
+import { apiService } from '../../services/api';
+import type { AbraApp, AppWithServer, ServerAppsResponse } from '../../types';
+import './Apps.scss';
+
+export const Apps: React.FC = () => {
+ const navigate = useNavigate();
+ const [appsData, setAppsData] = useState
+
+
+
+
+
+
+ {/* Terminal Component */}
+
+
+
+ {app.appName}
+
+ {app.recipe}
+ {app.status}
+ {app.chaos === 'true' && (
+ Chaos
+ )}
+
+
+
+
+
+
+ {/* Left Column - Main Info */}
+
+
+
+
+ {(deployState === "deployed" || deployState === "failed") && (
+
+ )}
+ {(deployState === "deploying") && (
+
+ )}
+
+
+
+ {backupEnabled && (
+
+
+
+ {/* Right Column - Actions & Stats */}
+ Application Details
+ +
+
+
+
+ {app.appName}
+
+
+
+
+ {app.domain ? (
+
+ {app.domain} ↗
+
+ ) : (
+ No domain configured
+ )}
+
+
+
+
+
+ {app.server} ↗
+
+
+
+
+
+ {app.recipe}
+
+
+
+
+
+ {app.status}
+
+
+
+
+
+
+ {app.chaos === 'true' ? '☠️ Enabled' : 'Disabled'}
+
+
+ Service Information
+
+ {services === undefined || services?.length === 0 ? (
+
+ Loading services...
+ ) : (
+ services.map((service) => (
+
+
+ ))
+ )}
+
+
+ {service.service}
+
+ {service.state}
+ {service.status}
+
+
+
+ Service Information
+
+ {serviceState === undefined || Object.keys(serviceState).length === 0 ? (
+
+ Preparing services...
+ ) : (
+ Object.keys(serviceState).map((name) => (
+
+
+ ))
+ )}
+
+
+ {name}
+
+ {serviceState[name].status}
+ {serviceState[name].health}
+
+
+
+ Version Information
+ +
+
+
+
+
+
+ {app.chaosVersion !== 'unknown' && (
+ {app.version}
+
+
+
+ )}
+
+ {upgradeVersions.length > 0 && (
+ {app.chaosVersion}
+
+
+
+ )}
+
+ {app.upgrade === 'unknown' && (
+
+ {upgradeVersions.map((version, idx) => (
+
+
+
+ ))}
+ {version}
+
+
+
+
+ )}
+ {app.upgrade === 'latest' && (
+
+
+
+
+ None
+
+ ✓ Running latest version
+
+ )}
+
+
+
+
+
+
+ )}
+
+
+
+ Backups
+ + backupbot deployed + +
+ Time Created
+ Snapshot ID
+ Version
+
+
+
+
+ {backupSnapshots?.map((snapshot, idx) => (
+
+
+ {snapshot.createdAt}
+ {snapshot.snapshot}
+
+ ))}
+ {snapshot.version}
+
+
+
+ { /* Not convinced this is necesary...
+ */ }
+
+
+
+
+
+
+
+ Quick Actions
+ +
+
+
+ { /* TODO: make upgrade have force option*/}
+
+
+
+
+
+
+
+
+ Health Status
+
+
+
+ CPU Usage
+ —
+
+
+ Memory
+ —
+
+
+ Uptime
+ —
+
+
+
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ Loading apps
+
+
+
+
+ );
+ }
+
+ return (
+ Error: {error}
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/web/src/routes/Dashboard/Dashboard.tsx b/web/src/routes/Dashboard/Dashboard.tsx
new file mode 100644
index 0000000..0294c34
--- /dev/null
+++ b/web/src/routes/Dashboard/Dashboard.tsx
@@ -0,0 +1,136 @@
+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';
+import './_Dashboard.scss';
+
+export const Dashboard: React.FC = () => {
+ const [apps, setApps] = useState
+
+
+ {/* Compact Stats Overview */}
+ Applications
+{stats.total} apps across {stats.totalServers} servers
+
+
+
+
+
+
+
+
+
+ {/* Filters */}
+
+ setSearchTerm(e.target.value)}
+ className="search-input"
+ />
+
+
+
+
+ {/* Apps Table */}
+
+
+
+
+
+
+ | App Name | +Recipe | +Domain | +Server | +Version | +Status | + {/*Actions | */} +
|---|---|---|---|---|---|---|
| + No apps found matching your filters + | +||||||
| + {app.appName} + | ++ {app.recipe} + | ++ {app.domain ? ( + e.stopPropagation()} + > + {app.domain} + + ) : ( + — + )} + | ++ {app.server} + | +
+
+ {app.version}
+ {app.chaos === 'true' && (
+
+ )}
+ {app.upgrade !== 'latest' && (
+
+
+ )}
+
+ |
+ + + {app.status} + + | + {/*
+
+
+ {app.upgrade !== 'latest' && (
+
+ )}
+
+ | */}
+
+ Showing {filteredApps.length} of {allApps.length} apps
+
+
+
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ Loading dashboard
+
+
+
+
+ );
+ }
+
+ return (
+ Error: {error}
+
+
+
+
+
+
+ );
+};
diff --git a/web/src/routes/Dashboard/_Dashboard.scss b/web/src/routes/Dashboard/_Dashboard.scss
new file mode 100644
index 0000000..dbbc5dc
--- /dev/null
+++ b/web/src/routes/Dashboard/_Dashboard.scss
@@ -0,0 +1,59 @@
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
+
+// Extend global page wrapper
+.dashboard-page {
+ @extend .page-wrapper;
+}
+
+.dashboard-content {
+ @extend .page-content;
+}
+
+// Dashboard-specific styles
+.recent-apps {
+ margin-bottom: $spacing-2xl;
+
+ h3 {
+ font-size: $font-size-2xl;
+ margin: 0 0 $spacing-lg;
+ color: $text-primary;
+ }
+}
+
+.apps-list {
+ @include card-list-vertical;
+}
+
+.app-item {
+ @include card;
+ @include card-hover-lift(-2px, $shadow-lg);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ cursor: pointer;
+
+ .app-info {
+ flex: 1;
+
+ h4 {
+ font-size: $font-size-lg;
+ color: $text-primary;
+ font-weight: $font-weight-semibold;
+ }
+
+ .app-domain {
+ margin: 0 0 $spacing-xs;
+ color: $text-muted;
+ font-size: $font-size-sm;
+ }
+
+ .app-server {
+ margin: 0;
+ font-size: $font-size-sm;
+ color: $text-secondary;
+ font-family: monospace;
+ }
+ }
+}
diff --git a/web/src/routes/Recipes/Recipe.scss b/web/src/routes/Recipes/Recipe.scss
new file mode 100644
index 0000000..e69de29
diff --git a/web/src/routes/Recipes/Recipe.tsx b/web/src/routes/Recipes/Recipe.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/web/src/routes/Recipes/RecipeForm.scss b/web/src/routes/Recipes/RecipeForm.scss
new file mode 100644
index 0000000..be60cbb
--- /dev/null
+++ b/web/src/routes/Recipes/RecipeForm.scss
@@ -0,0 +1,159 @@
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
+
+.recipe-form {
+ @include card;
+ max-width: 680px;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ gap: $spacing-lg;
+ padding: $spacing-lg;
+
+ h2 {
+ margin: 0;
+ font-size: $font-size-xl;
+ color: $text-primary;
+ }
+
+ .field {
+ display: flex;
+ flex-direction: column;
+ gap: $spacing-xs;
+
+ &.field-inline {
+ flex-direction: row;
+ align-items: center;
+ gap: $spacing-md;
+ }
+
+ label {
+ color: $text-secondary;
+ font-size: $font-size-sm;
+ display: flex;
+ flex-direction: column;
+ gap: $spacing-xs;
+
+ input[type="text"],
+ input[type="email"],
+ input:not([type]),
+ select {
+ padding: $spacing-sm $spacing-md;
+ border: 2px solid $border-color;
+ border-radius: $radius-md;
+ font-size: $font-size-base;
+ background: $bg-primary;
+ color: $text-primary;
+ transition: border-color $transition-base, box-shadow $transition-base;
+ }
+
+ input:focus,
+ select:focus {
+ outline: none;
+ border-color: $primary;
+ box-shadow: 0 0 0 4px rgba($primary, 0.06);
+ }
+ }
+ }
+
+ .form-actions {
+ display: flex;
+ gap: $spacing-sm;
+ justify-content: flex-end;
+
+ .action-btn {
+ @include action-btn(2px, $radius-md, $spacing-sm $spacing-lg, $font-size-sm);
+ }
+ }
+}
+
+.checkbox-label {
+ display: inline-flex;
+ align-items: center;
+ gap: $spacing-sm;
+ font-size: $font-size-base;
+ color: $text-primary;
+
+ input[type="checkbox"] {
+ width: 18px;
+ height: 18px;
+ }
+}
+
+.form-subtitle {
+ margin: 0;
+ color: $text-secondary;
+ font-size: $font-size-sm;
+}
+
+.form-error {
+ background: rgba($error, 0.08);
+ color: $error;
+ padding: $spacing-sm $spacing-md;
+ border-radius: $radius-sm;
+}
+
+.select-input {
+ width: 100%;
+}
+
+.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;
+}
diff --git a/web/src/routes/Recipes/RecipeForm.tsx b/web/src/routes/Recipes/RecipeForm.tsx
new file mode 100644
index 0000000..edb1f65
--- /dev/null
+++ b/web/src/routes/Recipes/RecipeForm.tsx
@@ -0,0 +1,158 @@
+import { useState, useEffect } from "react";
+import { apiService } from '../../services/api';
+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
+
+
+ Dashboard
+
+
+
+
+
+
+ Recent Applications
+
+ {apps.slice(0, 5).map((app, index) => (
+
+ navigate(`/apps/${app.server}/${app.appName}`)}
+ >
+
+ ))}
+
+
+
+ {app.status}
+
+ {app.appName}
+{app.domain || 'No domain'}
+{app.server}
+
+
+ {(secretData.length === 0 && submitted) && (
+
+ );
+}
+
+export default RecipeForm;
\ No newline at end of file
diff --git a/web/src/routes/Recipes/Recipes.scss b/web/src/routes/Recipes/Recipes.scss
new file mode 100644
index 0000000..0847379
--- /dev/null
+++ b/web/src/routes/Recipes/Recipes.scss
@@ -0,0 +1,154 @@
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
+
+// Extend global page wrapper
+.recipes-page {
+ @extend .page-wrapper;
+}
+
+.recipes-content {
+ @extend .page-content;
+}
+
+// Recipes grid
+.recipes-grid {
+ display: grid;
+ justify-content: stretch;
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+ gap: $spacing-xl;
+ margin-bottom: $spacing-xl;
+
+ @media (max-width: 768px) {
+ grid-template-columns: 1fr;
+ }
+}
+
+// Recipe card
+.recipe-card {
+ @include card;
+ @include card-dimensions(320px, 180px);
+ row-gap: 1em;
+ grid-template-rows: 1fr 2fr auto 0.9fr;
+ transition: transform $transition-base, box-shadow $transition-base;
+ position: relative;
+ overflow: hidden;
+ max-width: 30em;
+
+ .recipe-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: $spacing-lg;
+ padding-bottom: $spacing-md;
+ border-bottom: 2px solid $bg-secondary;
+
+ .recipe-title {
+ h3 {
+ margin: 0 0 $spacing-xs;
+ font-size: $font-size-xl;
+ color: $text-primary;
+ font-weight: $font-weight-bold;
+ }
+
+ .recipe-host {
+ font-size: $font-size-sm;
+ color: $text-muted;
+ font-family: monospace;
+ }
+ }
+ img {
+ width: clamp(20px, 3vw, 32px);
+ height: clamp(20px, 3vw, 32px);
+ object-fit: contain;
+ }
+ }
+ .card-tags {
+ display: flex;
+ gap: 6px;
+ margin-top: $spacing-sm;
+ height: $spacing-md;
+ flex-wrap: wrap;
+ }
+ .tag-category {
+ font-size: 12px;
+ padding: 2px 8px;
+ border-radius: 5px;
+ color: rgb(255, 255, 255);
+ font-weight: 700;
+ background-color: rgb(111, 128, 255);
+
+ }
+ .tag-feature {
+ font-size: 12px;
+ padding: 2px 8px;
+ border-radius: 5px;
+ color: rgb(255, 255, 255);
+ font-weight: 700;
+ background-color: rgb(22, 180, 22);
+
+ }
+ .recipe-stats {
+ flex-grow: 1;
+ flex: 1;
+ margin-bottom: $spacing-lg;
+
+ .stat-row {
+ display: -webkit-box;
+ -webkit-line-clamp: 4;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ }
+ }
+
+ .recipe-actions {
+ display: flex;
+ gap: $spacing-sm;
+ .action-btn {
+ flex: 1;
+ @include action-btn(2px, $radius-md, $spacing-sm $spacing-md, $font-size-sm);
+
+ &.primary {
+ background-color: $primary;
+ color: white;
+ border-color: $primary;
+
+ &:hover {
+ background-color: $primary-light;
+ border-color: $primary-light;
+ }
+ }
+ }
+ }
+
+ .recipe-alert {
+ background-color: rgba($warning, 0.1);
+ border-left: 4px solid $warning;
+ padding: $spacing-sm $spacing-md;
+ margin: 0 (-$spacing-xl) (-$spacing-xl);
+ display: flex;
+ align-items: center;
+ gap: $spacing-sm;
+
+ .alert-icon {
+ font-size: $font-size-lg;
+ color: $warning;
+ }
+
+ .alert-text {
+ font-size: $font-size-sm;
+ color: $text-primary;
+ font-weight: $font-weight-medium;
+ }
+ }
+}
+.modal-overlay {
+position: fixed;
+inset: 0;
+background: rgba(0, 0, 0, 0.4);
+display: flex;
+justify-content: center;
+align-items: center;
+}
diff --git a/web/src/routes/Recipes/Recipes.tsx b/web/src/routes/Recipes/Recipes.tsx
new file mode 100644
index 0000000..eb91d33
--- /dev/null
+++ b/web/src/routes/Recipes/Recipes.tsx
@@ -0,0 +1,179 @@
+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, AbraRecipe, AppWithServer } from '../../types';
+import RecipeForm from './RecipeForm.tsx'
+import './Recipes.scss';
+
+export const Recipes: React.FC = () => {
+ const navigate = useNavigate();
+ const [recipesData, setRecipesData] = useStateCreating new app...
+ ) + } + {(secretData.length > 0 && submitted) && ( +
+
+
+
+
+ )}
+ {(submitted === false) &&
+
+ }
+ | Name | +Value | +
|---|---|
| {secret.name} | ++ {secret.value} + + | +
+
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ Loading recipes
+
+
+
+
+ );
+ }
+
+ return (
+ Error: {error}
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/web/src/routes/Servers/Server.scss b/web/src/routes/Servers/Server.scss
new file mode 100644
index 0000000..ea53d47
--- /dev/null
+++ b/web/src/routes/Servers/Server.scss
@@ -0,0 +1,340 @@
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
+@use "sass:color";
+
+.server-detail-page {
+ @extend .page-wrapper;
+}
+
+.server-detail-content {
+ @extend .page-content;
+}
+
+// Server header section
+.server-header {
+ @include card;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ flex-wrap: wrap;
+ gap: $spacing-xl;
+ margin-bottom: $spacing-xl;
+
+ .server-title-section {
+ flex: 1;
+ min-width: 300px;
+
+ h1 {
+ margin: 0 0 $spacing-md 0;
+ font-size: $font-size-3xl;
+ color: $text-primary;
+ font-weight: $font-weight-bold;
+ }
+
+ .server-meta {
+ display: flex;
+ gap: $spacing-sm;
+ flex-wrap: wrap;
+ }
+ }
+
+ .server-actions {
+ display: flex;
+ gap: $spacing-md;
+ flex-wrap: wrap;
+ }
+}
+
+// Action buttons (shared with App view, could be moved to global)
+.action-btn {
+ @include action-btn(2px, $radius-md, $spacing-sm $spacing-lg, $font-size-sm);
+
+ &.primary {
+ background: $primary;
+ color: white;
+ border-color: $primary;
+
+ &:hover:not(:disabled) {
+ background: $primary-light;
+ border-color: $primary-light;
+ }
+ }
+
+ &.secondary {
+ background: $bg-secondary;
+ color: $text-primary;
+ border-color: $border-color;
+
+ &:hover:not(:disabled) {
+ background: color.adjust($bg-secondary, $lightness: -10%);
+ }
+ }
+
+ &.danger {
+ background: $error;
+ color: white;
+ border-color: $error;
+
+ &:hover:not(:disabled) {
+ background: color.adjust($error, $lightness: -10%);
+ }
+ }
+}
+
+.back-button {
+ @extend .action-btn;
+ @extend .secondary;
+}
+
+// Badges - host badge is specific to server view
+.host-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: $spacing-xs;
+ padding: $spacing-xs $spacing-md;
+ background: $bg-secondary;
+ color: $text-secondary;
+ border-radius: $radius-md;
+ font-size: $font-size-sm;
+ font-weight: $font-weight-medium;
+ font-family: monospace;
+}
+
+.upgrade-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: $spacing-xs;
+ padding: $spacing-xs $spacing-md;
+ background: rgba($warning, 0.1);
+ background: color.adjust($error, $lightness: -20%);
+ border-radius: $radius-md;
+ font-size: $font-size-sm;
+ font-weight: $font-weight-medium;
+}
+
+// Content grid layout
+.content-grid {
+ display: grid;
+ grid-template-columns: 2fr 1fr;
+ gap: $spacing-xl;
+
+ @media (max-width: 1024px) {
+ grid-template-columns: 1fr;
+ }
+}
+
+// Info cards
+.info-card {
+ @include card;
+ margin-bottom: $spacing-xl;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ h2 {
+ margin: 0 0 $spacing-lg 0;
+ font-size: $font-size-xl;
+ color: $text-primary;
+ font-weight: $font-weight-bold;
+ }
+}
+
+// Info grid
+.info-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: $spacing-lg;
+}
+
+.info-item {
+ display: flex;
+ flex-direction: column;
+ gap: $spacing-xs;
+
+ label {
+ font-size: $font-size-xs;
+ color: $text-secondary;
+ font-weight: $font-weight-medium;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ }
+
+ span {
+ font-size: $font-size-base;
+ color: $text-primary;
+ }
+
+ .stat-value {
+ font-size: $font-size-xl;
+ font-weight: $font-weight-bold;
+ color: $text-primary;
+
+ &.warning {
+ background: color.adjust($warning, $lightness: -10%);
+ }
+
+ &.chaos {
+ background: color.adjust($info, $lightness: -10%);
+ }
+ }
+
+ .no-value {
+ color: $text-muted;
+ font-style: italic;
+ }
+}
+
+// Apps list in server detail
+.no-apps {
+ text-align: center;
+ padding: $spacing-2xl;
+ color: $text-secondary;
+ font-size: $font-size-base;
+}
+
+.apps-list {
+ @include card-list-vertical;
+}
+
+.app-item {
+ padding: $spacing-md;
+ background: $bg-secondary;
+ border-radius: $radius-md;
+ border: 2px solid transparent;
+ cursor: pointer;
+ transition: all $transition-base;
+
+ &:hover {
+ border-color: $primary;
+ background: white;
+ transform: translateX(4px);
+ }
+
+ .app-item-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: $spacing-md;
+ margin-bottom: $spacing-sm;
+
+ .app-item-name {
+ font-size: $font-size-base;
+ font-weight: $font-weight-semibold;
+ color: $text-primary;
+ }
+
+ .app-item-badges {
+ display: flex;
+ gap: $spacing-xs;
+ flex-wrap: wrap;
+ }
+ }
+
+ .app-item-details {
+ display: flex;
+ align-items: center;
+ gap: $spacing-md;
+ font-size: $font-size-sm;
+
+ .app-item-version {
+ color: $text-secondary;
+ font-family: monospace;
+ }
+
+ .app-item-domain {
+ color: $primary;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+}
+
+// Quick actions list
+.action-list {
+ display: flex;
+ flex-direction: column;
+ gap: $spacing-sm;
+
+ .action-list-item {
+ display: flex;
+ align-items: center;
+ gap: $spacing-md;
+ padding: $spacing-md;
+ background: $bg-secondary;
+ border: 2px solid transparent;
+ border-radius: $radius-md;
+ cursor: pointer;
+ transition: all $transition-base;
+ font-size: $font-size-sm;
+ color: $text-primary;
+ text-align: left;
+ width: 100%;
+
+ &:hover:not(:disabled) {
+ background: white;
+ border-color: $primary;
+ transform: translateX(2px);
+ }
+
+ &:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+ }
+
+ &.danger {
+ &:hover:not(:disabled) {
+ border-color: $error;
+ background: rgba($error, 0.05);
+ }
+ }
+
+ .action-text {
+ flex: 1;
+ font-weight: $font-weight-medium;
+ }
+ }
+}
+
+// Health status
+.health-status {
+ display: flex;
+ flex-direction: column;
+ gap: $spacing-md;
+
+ .health-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-bottom: $spacing-md;
+ border-bottom: 1px solid $border-color;
+
+ &:last-child {
+ border-bottom: none;
+ padding-bottom: 0;
+ }
+
+ .health-label {
+ font-size: $font-size-sm;
+ color: $text-secondary;
+ }
+
+ .health-value {
+ font-size: $font-size-base;
+ font-weight: $font-weight-semibold;
+ color: $text-primary;
+
+ &.status-online {
+ color: $success;
+ }
+
+ &.status-offline {
+ color: $error;
+ }
+ }
+ }
+}
diff --git a/web/src/routes/Servers/Server.tsx b/web/src/routes/Servers/Server.tsx
new file mode 100644
index 0000000..f895a51
--- /dev/null
+++ b/web/src/routes/Servers/Server.tsx
@@ -0,0 +1,378 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useParams } 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';
+import type { LogEntry } from '../../services/mockApi';
+import './Server.scss';
+
+interface ServerWithApps extends AbraServer {
+ apps: any[];
+ appCount: number;
+ upgradeCount: number;
+ versionCount: number;
+ unversionedCount: number;
+ latestCount: number;
+}
+
+export const Server: React.FC = () => {
+ const { serverName } = useParams<{ serverName: string }>();
+ const navigate = useNavigate();
+
+ const [server, setServer] = useState
+
+
+ {/* Filters */}
+ Recipes
+{stats.total} recipes
+
+ setSearchTerm(e.target.value)}
+ className="search-input"
+ />
+
+
+
+ {/* Server Cards */}
+
+ {filteredRecipes.length === 0 ? (
+
+ {selectedRecipe && (
+ No recipes found matching your search
+ ) : (
+ filteredRecipes.map((recipe) => (
+
+
+ ))
+ )}
+
+
+
+
+
+ {recipe.name}
+
+ {recipe.icon.length > 0 ? 
: null }
+
+
+
+
+
+ {recipe.description}
+
+
+
+
+
+ {recipe.features.backups.toLowerCase().includes("yes") ? Backups : null}
+ {recipe.features.healthcheck.toLowerCase().includes("yes") ? Healthcheck : null}
+ {recipe.category.length > 0 ? {recipe.category} : null}
+
+ setSelectedRecipe(null)}>
+
+ )}
+
+ e.stopPropagation()}>
+ {}
+ setSelectedRecipe(null)} />
+
+
+ Showing {filteredRecipes.length} of {allRecipes.length} apps
+
+
+
+
+
+ );
+ }
+
+ if (error || !server) {
+ return (
+
+
+ Loading server
+
+
+
+
+ );
+ }
+
+ const chaosApps = server.apps.filter(app => app.chaos === 'true');
+ const runningApps = server.apps.filter(app => app.status === 'deployed' || app.status === 'running');
+
+ return (
+ {error || 'Server not found'}
+
+
+
+ setTerminalActive(false)}
+ />
+
+
+
+ );
+};
diff --git a/web/src/routes/Servers/Servers.scss b/web/src/routes/Servers/Servers.scss
new file mode 100644
index 0000000..a6ec97c
--- /dev/null
+++ b/web/src/routes/Servers/Servers.scss
@@ -0,0 +1,157 @@
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
+
+// Extend global page wrapper
+.servers-page {
+ @extend .page-wrapper;
+}
+
+.servers-content {
+ @extend .page-content;
+}
+
+// Servers grid
+.servers-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+ gap: $spacing-xl;
+ margin-bottom: $spacing-xl;
+
+ align-items: stretch;
+
+ @media (max-width: 768px) {
+ grid-template-columns: 1fr;
+ }
+}
+
+// Server card
+.server-card {
+ @include card;
+ @include card-hover-lift(-4px, $shadow-xl);
+ @include card-dimensions(320px, 180px);
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ overflow: hidden;
+
+ .server-header {
+ @include card-header-rule;
+
+ .server-title {
+ @include card-title-stack;
+ }
+
+ .server-status {
+ .status-indicator {
+ font-size: $font-size-xl;
+
+ &.connected {
+ color: $success;
+ }
+
+ &.disconnected {
+ color: $error;
+ }
+ }
+ }
+ }
+
+ .server-stats {
+ flex: 1;
+ margin-bottom: $spacing-lg;
+
+ .stat-row {
+ @include card-stat-row;
+
+ // Highlighted rows
+ &.highlight {
+ @include card-row-highlight-bleed;
+ background-color: rgba($warning, 0.05);
+
+ .stat-label {
+ font-weight: $font-weight-semibold;
+ }
+
+ .stat-value {
+ font-weight: $font-weight-bold;
+ }
+ }
+
+ &.chaos-row {
+ @include card-row-highlight-bleed(false);
+ background-color: rgba($info, 0.05);
+
+ .stat-label {
+ font-weight: $font-weight-semibold;
+ }
+
+ .stat-value {
+ font-weight: $font-weight-bold;
+ }
+ }
+
+ .stat-label {
+ font-size: $font-size-sm;
+ color: $text-secondary;
+ display: flex;
+ align-items: center;
+ gap: $spacing-xs;
+
+ .upgrade-icon,
+ .chaos-icon {
+ font-size: $font-size-base;
+ }
+ }
+
+ .stat-value {
+ font-size: $font-size-lg;
+ color: $text-primary;
+ font-weight: $font-weight-semibold;
+ }
+ }
+ }
+
+ .server-actions {
+ display: flex;
+ gap: $spacing-sm;
+ margin-bottom: $spacing-md;
+
+ .action-btn {
+ flex: 1;
+ @include action-btn(2px, $radius-md, $spacing-sm $spacing-md, $font-size-sm);
+
+ &.primary {
+ // background-color: $primary;
+ // color: white;
+ // border-color: $primary;
+
+ &:hover {
+ background-color: $primary-light;
+ border-color: $primary-light;
+ }
+ }
+ }
+ }
+
+ .server-alert {
+ background-color: rgba($warning, 0.1);
+ border-left: 4px solid $warning;
+ padding: $spacing-sm $spacing-md;
+ margin: 0 (-$spacing-xl) (-$spacing-xl);
+ display: flex;
+ align-items: center;
+ gap: $spacing-sm;
+
+ .alert-icon {
+ font-size: $font-size-lg;
+ color: $warning;
+ }
+
+ .alert-text {
+ font-size: $font-size-sm;
+ color: $text-primary;
+ font-weight: $font-weight-medium;
+ }
+ }
+}
diff --git a/web/src/routes/Servers/Servers.tsx b/web/src/routes/Servers/Servers.tsx
new file mode 100644
index 0000000..6d3d84b
--- /dev/null
+++ b/web/src/routes/Servers/Servers.tsx
@@ -0,0 +1,259 @@
+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';
+
+interface ServerWithStats extends AbraServer {
+ appCount: number;
+ versionCount: number;
+ latestCount: number;
+ upgradeCount: number;
+ chaosCount: number;
+ backupEnabled: boolean;
+}
+
+export const Servers: React.FC = () => {
+ const navigate = useNavigate();
+ const [servers, setServers] = useState
+
+
+
+
+
+
+ {/* Terminal Component */}
+
+
+
+ {server.name}
+
+ {server.host}
+ {server.upgradeCount > 0 && (
+
+ {server.upgradeCount} upgrade{server.upgradeCount !== 1 ? 's' : ''}
+
+ )}
+
+
+
+
+
+
+ {/* Left Column - Main Info */}
+
+
+
+
+
+
+
+
+
+ {/* Right Column - Actions & Stats */}
+ Server Details
+ +
+
+
+
+ {server.name}
+
+
+
+
+ {server.host}
+
+
+
+
+ {server.appCount}
+
+
+
+
+ {runningApps.length}
+
+
+
+
+ 0 ? 'stat-value warning' : 'stat-value'}>
+ {server.upgradeCount}
+
+
+
+
+
+ 0 ? 'stat-value chaos' : 'stat-value'}>
+ {chaosApps.length}
+
+
+
+
+
+ {server.latestCount}
+
+
+
+
+ {server.versionCount}
+
+ Applications on this Server
+ + {server.apps.length === 0 ? ( +No applications deployed on this server
+ ) : (
+
+ {server.apps.map((app, idx) => (
+
+ )}
+ navigate(`/apps/${server.name}/${app.appName}`)}
+ >
+
+ ))}
+
+ {app.appName}
+
+
+ {app.recipe}
+
+ {app.status}
+
+ {app.chaos === 'true' && (
+ ☠️
+ )}
+ {app.upgrade !== 'latest' && (
+ ⬆️
+ )}
+
+
+ v{app.version}
+ {app.domain && (
+ e.stopPropagation()}
+ >
+ {app.domain}
+
+ )}
+
+
+
+
+
+
+
+
+ Quick Actions
+ +
+
+
+
+
+
+
+ Server Health
+
+
+
+ Status
+ 🟢 Online
+
+
+ CPU Usage
+ —
+
+
+ Memory
+ —
+
+
+ Disk Space
+ —
+
+
+ Uptime
+ —
+
+
+
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ Loading servers
+
+
+
+
+ );
+ }
+
+ return (
+ Error: {error}
+
+
+
+
+ );
+};
diff --git a/web/src/services/api.ts b/web/src/services/api.ts
new file mode 100644
index 0000000..171b164
--- /dev/null
+++ b/web/src/services/api.ts
@@ -0,0 +1,287 @@
+import type { AbraServer, AbraRecipe, ServerAppsResponse, AbraAppService, DeployEvent, AbraAppSecret, File, AppSnapshot } from '../types';
+
+// Log entry type
+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 async request
+
+
+ {/* Compact Stats Row */}
+ Servers
+Managing {stats.totalServers} servers with {stats.totalApps} applications
+
+
+
+
+
+
+
+ {/* Clear filters button removed — use stat-chip outlines for active filters */}
+
+
+ {/* Filters */}
+
+ setSearchTerm(e.target.value)}
+ className="search-input"
+ />
+
+
+ {/* Server Cards */}
+
+ {filteredServers.length === 0 ? (
+
+
+ No servers found matching your search
+ ) : (
+ filteredServers.map((server) => (
+ navigate(`/servers/${server.name}`)}
+ style={{ cursor: 'pointer' }}
+ >
+
+ ))
+ )}
+
+
+
+
+
+ {server.name}
+ {server.host} +
+ ●
+
+
+
+ {!server.backupEnabled && (
+
+ Applications
+ {server.appCount}
+
+
+ Versioned
+ {server.versionCount}
+
+
+ Latest
+ {server.latestCount}
+
+ {server.upgradeCount > 0 && (
+
+
+ Need Upgrade
+
+ {server.upgradeCount}
+
+ )}
+ {server.chaosCount > 0 && (
+
+
+ Chaos Mode
+
+ {server.chaosCount}
+
+ )}
+
+
+ No Backups Enabled
+
+
+ )}
+
+ Showing {filteredServers.length} of {servers.length} servers
+
+