Enhance deployment system with retry functionality and improved UX

Major Improvements:
- Added retry deployment buttons in machine list for failed deployments
- Added retry button in SSH console modal footer for enhanced UX
- Enhanced deployment process with comprehensive cleanup of existing services
- Improved binary installation with password-based sudo authentication
- Updated configuration generation to include all required sections (agent, ai, network, security)
- Fixed deployment verification and error handling

Security Enhancements:
- Enhanced verifiedStopExistingServices with thorough cleanup process
- Improved binary copying with proper sudo authentication
- Added comprehensive configuration validation

UX Improvements:
- Users can retry deployments without re-running machine discovery
- Retry buttons available from both machine list and console modal
- Real-time deployment progress with detailed console output
- Clear error states with actionable retry options

Technical Changes:
- Modified ServiceDeployment.tsx with retry button components
- Enhanced api/setup_manager.go with improved deployment functions
- Updated main.go with command line argument support (--config, --setup)
- Added comprehensive zero-trust security validation system

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
anthonyrawlins
2025-08-31 10:23:27 +10:00
parent df4d98bf30
commit be761cfe20
234 changed files with 7508 additions and 38528 deletions

View File

@@ -2,6 +2,189 @@
@tailwind components;
@tailwind utilities;
:root {
--carbon-950: #000000;
--carbon-900: #0a0a0a;
--carbon-800: #1a1a1a;
--carbon-700: #2a2a2a;
--carbon-600: #666666;
--carbon-500: #808080;
--carbon-400: #a0a0a0;
--carbon-300: #c0c0c0;
--carbon-200: #e0e0e0;
--carbon-100: #f0f0f0;
--carbon-50: #f8f8f8;
--mulberry-950: #0b0213;
--mulberry-900: #1a1426;
--mulberry-800: #2a2639;
--mulberry-700: #3a384c;
--mulberry-600: #4a4a5f;
--mulberry-500: #5a5c72;
--mulberry-400: #7a7e95;
--mulberry-300: #9aa0b8;
--mulberry-200: #bac2db;
--mulberry-100: #dae4fe;
--mulberry-50: #f0f4ff;
--walnut-950: #1E1815;
--walnut-900: #403730;
--walnut-800: #504743;
--walnut-700: #605756;
--walnut-600: #706769;
--walnut-500: #80777c;
--walnut-400: #90878f;
--walnut-300: #a09aa2;
--walnut-200: #b0adb5;
--walnut-100: #c0c0c8;
--walnut-50: #d0d3db;
--walnut-25: #e0e6ee;
--nickel-950: #171717;
--nickel-900: #2a2a2a;
--nickel-800: #3d3d3d;
--nickel-700: #505050;
--nickel-600: #636363;
--nickel-500: #767676;
--nickel-400: #c1bfb1;
--nickel-300: #d4d2c6;
--nickel-200: #e7e5db;
--nickel-100: #faf8f0;
--nickel-50: #fdfcf8;
--ocean-950: #2a3441;
--ocean-900: #3a4654;
--ocean-800: #4a5867;
--ocean-700: #5a6c80;
--ocean-600: #6a7e99;
--ocean-500: #7a90b2;
--ocean-400: #8ba3c4;
--ocean-300: #9bb6d6;
--ocean-200: #abc9e8;
--ocean-100: #bbdcfa;
--ocean-50: #cbefff;
--eucalyptus-950: #2a3330;
--eucalyptus-900: #3a4540;
--eucalyptus-800: #4a5750;
--eucalyptus-700: #515d54;
--eucalyptus-600: #5a6964;
--eucalyptus-500: #6a7974;
--eucalyptus-400: #7a8a7f;
--eucalyptus-300: #8a9b8f;
--eucalyptus-200: #9aac9f;
--eucalyptus-100: #aabdaf;
--eucalyptus-50: #bacfbf;
--sand-950: #8E7B5E;
--sand-900: #99886E;
--sand-800: #A4957E;
--sand-700: #AFA28E;
--sand-600: #BAAF9F;
--sand-500: #C5BCAF;
--sand-400: #D0C9BF;
--sand-300: #DBD6CF;
--sand-200: #E6E3DF;
--sand-100: #F1F0EF;
--sand-50: #F1F0EF;
--coral-950: #6A4A48;
--coral-900: #7B5D5A;
--coral-800: #8C706C;
--coral-700: #9D8380;
--coral-600: #AE9693;
--coral-500: #BFAAA7;
--coral-400: #D0BDBB;
--coral-300: #E1D1CF;
--coral-200: #F2E4E3;
--coral-100: #9e979c;
--coral-50: #aea7ac;
}
/*
--font-sans: ['Inter Tight', 'Inter', 'system-ui', 'sans-serif'],
--font-mono: ['Inconsolata', 'ui-monospace', 'monospace'],
--font-logo: ['Exo', 'Inter Tight', 'sans-serif']
},
spacing: {
'chorus-xxs': '0.854rem',
'chorus-xs': '0.945rem',
'chorus-sm': '1.0rem',
'chorus-base': '1.25rem',
'chorus-md': '1.953rem',
'chorus-lg': '2.441rem',
'chorus-xl': '3.052rem',
'chorus-xxl': '6.1rem',
},
// CHORUS Proportional Typography System (Major Third - 1.25 ratio)
fontSize: {
// Base scale using Minor Third (1.20) ratio for harmonious proportions
'xs': ['0.854rem', { lineHeight: '1.00rem', fontWeight: '600' }], // 10.24px
'sm': ['0.954rem', { lineHeight: '1.10rem', fontWeight: '500' }], // 12.8px
'base': ['1rem', { lineHeight: '1.50rem', fontWeight: '400' }], // 16px (foundation)
'lg': ['1.25rem', { lineHeight: '1.75rem', fontWeight: '400' }], // 20px
'xl': ['1.563rem', { lineHeight: '2.00rem', fontWeight: '400' }], // 25px
'2xl': ['1.953rem', { lineHeight: '2.50rem', fontWeight: '300' }], // 31.25px
'3xl': ['2.441rem', { lineHeight: '3.00rem', fontWeight: '200' }], // 39px
'4xl': ['3.052rem', { lineHeight: '3.50rem', fontWeight: '100' }], // 48.8px
'5xl': ['3.815rem', { lineHeight: '4.00rem', fontWeight: '100' }], // 61px
// Semantic heading sizes for easier usage
'h7': ['1.000rem', { lineHeight: '1.25rem', fontWeight: '400' }], // 14px
'h6': ['1.250rem', { lineHeight: '1.563rem', fontWeight: '500' }], // 16px
'h5': ['1.563rem', { lineHeight: '1.953rem', fontWeight: '500' }], // 20px
'h4': ['1.953rem', { lineHeight: '2.441rem', fontWeight: '600' }], // 25px
'h3': ['2.441rem', { lineHeight: '3.052rem', fontWeight: '600' }], // 31.25px
'h2': ['3.052rem', { lineHeight: '4.768rem', fontWeight: '700' }], // 39px
'h1': ['4.768rem', { lineHeight: '6.96rem', fontWeight: '700' }], // 76.3px
// Display sizes for hero sections
'display-sm': ['3.815rem', { lineHeight: '4rem', fontWeight: '800' }], // 61px
'display-md': ['4.768rem', { lineHeight: '5rem', fontWeight: '800' }], // 76.3px
'display-lg': ['5.96rem', { lineHeight: '6rem', fontWeight: '800' }], // 95.4px
},
// Extended rem-based sizing for complete system consistency
width: {
'rem-xs': '0.640rem',
'rem-sm': '0.800rem',
'rem-base': '1.000rem',
'rem-lg': '1.250rem',
'rem-xl': '1.563rem',
'rem-2xl': '1.953rem',
'rem-3xl': '2.441rem',
'rem-4xl': '3.052rem',
'rem-5xl': '3.815rem',
},
height: {
'rem-xs': '0.640rem',
'rem-sm': '0.800rem',
'rem-base': '1.000rem',
'rem-lg': '1.250rem',
'rem-xl': '1.563rem',
'rem-2xl': '1.953rem',
'rem-3xl': '2.441rem',
'rem-4xl': '3.052rem',
'rem-5xl': '3.815rem',
},
// Border radius using proportional scale
borderRadius: {
'none': '0',
'micro': '0.125rem', // 2px
'sm': '0.25rem', // 4px
'base': '0.375rem', // 6px
'md': '0.5rem', // 8px
'lg': '0.75rem', // 12px
'xl': '1rem', // 16px
'full': '9999px',
}
*/
/* === Teaser-aligned Global Foundation === */
/* CHORUS Proportional Typography System - 16px Base */
html { font-size: 16px; }
@@ -10,9 +193,13 @@ html { font-size: 16px; }
:root {
/* Core Brand Colors */
--color-carbon: #000000;
--color-mulberry: #0b0213;
--color-walnut: #403730;
--color-nickel: #c1bfb1;
--color-mulberry: #3a384c;
--color-walnut: #605756;
--color-nickel: #505050;
--color-sand: #6a5c46;
--color-coral: #9D8380;
--color-ocean: #5a6c80;
--color-eucalyptus:#515d54;
/* Semantic Tokens */
--chorus-primary: #0b0213; /* mulberry */
@@ -24,11 +211,15 @@ html { font-size: 16px; }
--chorus-warning: #6a5c46; /* sand-900 */
--chorus-danger: #2e1d1c; /* coral-950 */
/* Theme Surfaces (dark default) */
--bg-primary: #000000; /* carbon-950 */
--bg-secondary: #0b0213; /* mulberry-950 */
--bg-tertiary: #1a1426; /* mulberry-900 */
--bg-accent: #2a2639; /* mulberry-800 */
--bg-primary: #0b0213; /* carbon-950 */
--bg-secondary: #1a1426; /* mulberry-950 */
--bg-tertiary: #2a2639; /* mulberry-900 */
--bg-accent: #5b3d77; /* mulberry-600 */
/* Text */
--text-primary: #FFFFFF;
@@ -49,7 +240,7 @@ html.light {
--bg-primary: #FFFFFF;
--bg-secondary: #f8f8f8;
--bg-tertiary: #f0f0f0;
--bg-accent: #e0e0e0;
--bg-accent: #cbefff;
--text-primary: #000000;
--text-secondary: #1a1a1a;
@@ -145,15 +336,45 @@ body {
/* Form Elements */
.input-field {
@apply block w-full border border-chorus-border-defined p-3 rounded-sm focus:border-chorus-secondary focus:outline-none transition-colors duration-200 bg-chorus-white text-chorus-text-primary;
@apply block w-full border p-3 rounded-sm focus:outline-none transition-colors duration-200;
background-color: var(--bg-secondary);
border-color: var(--border-defined);
color: var(--text-primary);
}
.input-field:focus {
@apply border-chorus-secondary ring-0;
border-color: var(--chorus-accent);
background-color: var(--bg-primary);
ring: 0;
}
/* Fix form inputs for dark theme */
input[type="checkbox"],
input[type="radio"],
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
background-color: var(--bg-secondary) !important;
border-color: var(--border-defined) !important;
color: var(--text-primary) !important;
}
input[type="checkbox"]:focus,
input[type="radio"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border-color: var(--chorus-accent) !important;
background-color: var(--bg-primary) !important;
}
.label {
@apply block text-sm font-medium text-chorus-text-primary mb-2;
@apply block text-sm font-medium mb-2;
color: var(--text-primary);
}
.error-text {
@@ -161,7 +382,7 @@ body {
}
.success-text {
@apply text-green-400 text-sm mt-1;
@apply text-eucalyptus-600 text-sm mt-1;
}
/* Status System */
@@ -181,25 +402,53 @@ body {
@apply status-indicator text-chorus-brown;
}
.setup-progress {
@apply border transition-all duration-200;
}
.agreement {
background-color: var(--sand-400) !important;
}
html.dark .agreement {
background-color: var(--mulberry-800) !important;
}
/* Progress Elements */
.progress-step {
@apply p-3 rounded-md border transition-all duration-200;
}
.progress-step-current {
@apply border-chorus-secondary bg-chorus-secondary bg-opacity-20 text-chorus-secondary;
background-color: var(--bg-tertiary) !important;
border-color: var(--bg-secondary) !important;
color: var(--text-primary) !important;
}
.progress-step-completed {
@apply border-chorus-secondary bg-chorus-secondary bg-opacity-10 text-chorus-secondary;
background-color: var(--bg-primary) !important;
border-color: var(--bg-secondary) !important;
color: var(--text-primary) !important;
}
.progress-step-accessible {
@apply border-chorus-border-defined hover:border-chorus-border-emphasis text-chorus-text-secondary;
background-color: var(--bg-secondary);
border-color: var(--border-defined);
color: var(--text-secondary);
}
.progress-step-accessible:hover {
background-color: var(--bg-accent);
border-color: var(--border-emphasis);
color: var(--text-primary);
}
.progress-step-disabled {
@apply border-chorus-border-invisible text-chorus-text-subtle cursor-not-allowed;
@apply cursor-not-allowed;
background-color: var(--bg-subtle);
border-color: var(--border-subtle);
color: var(--text-subtle);
}
/* Typography Hierarchy */
@@ -266,10 +515,10 @@ body {
html.dark .panel-error .panel-body { color: #ffd6d6 !important; }
/* Success (Eucalyptus) */
.panel-success { @apply bg-eucalyptus-50 border-eucalyptus-950; }
.panel-success .panel-title { @apply text-eucalyptus-950; }
.panel-success .panel-body { @apply text-eucalyptus-950; }
html.dark .panel-success { background-color: rgba(42,51,48,0.20) !important; @apply border-eucalyptus-950; }
.panel-success { @apply bg-eucalyptus-50 border-eucalyptus-600; }
.panel-success .panel-title { @apply text-eucalyptus-600; }
.panel-success .panel-body { @apply text-eucalyptus-600; }
html.dark .panel-success { background-color: rgba(42,51,48,0.20) !important; @apply border-eucalyptus-400; }
html.dark .panel-success .panel-title { @apply text-white; }
html.dark .panel-success .panel-body { color: #bacfbf !important; }
}
@@ -341,9 +590,21 @@ body {
/* Eucalyptus */
.bg-eucalyptus-950 { background-color: #2a3330 !important; }
.bg-eucalyptus-800 { background-color: #3a4843 !important; }
.bg-eucalyptus-600 { background-color: #5a7060 !important; }
.bg-eucalyptus-500 { background-color: #6b8570 !important; }
.bg-eucalyptus-400 { background-color: #7c9a80 !important; }
.bg-eucalyptus-50 { background-color: #bacfbf !important; }
.text-eucalyptus-950 { color: #2a3330 !important; }
.text-eucalyptus-800 { color: #3a4843 !important; }
.text-eucalyptus-600 { color: #5a7060 !important; }
.text-eucalyptus-500 { color: #6b8570 !important; }
.text-eucalyptus-400 { color: #7c9a80 !important; }
.border-eucalyptus-950 { border-color: #2a3330 !important; }
.border-eucalyptus-800 { border-color: #3a4843 !important; }
.border-eucalyptus-600 { border-color: #5a7060 !important; }
.border-eucalyptus-500 { border-color: #6b8570 !important; }
.border-eucalyptus-400 { border-color: #7c9a80 !important; }
/* Utility text/border fallbacks for theme tokens */
.text-chorus-primary { color: var(--text-primary) !important; }