tony/bzzz
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance deployment system with retry functionality and improved UX

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

299
install/config-ui/app/globals.css
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; }

35
install/config-ui/app/setup/components/AIConfiguration.tsx
View File

@@ -149,10 +149,29 @@ export default function AIConfiguration({
setValidatingLocal(true)
try {
const response = await fetch(`${config.localAIEndpoint}/api/tags`)
setLocalAIValid(response.ok)
const response = await fetch('/api/setup/ollama/validate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
endpoint: config.localAIEndpoint
})
})
const result = await response.json()
if (result.valid && result.models) {
setLocalAIValid(true)
// Update the local AI models list with discovered models
setConfig(prev => ({ ...prev, localAIModels: result.models }))
} else {
setLocalAIValid(false)
console.error('Ollama validation failed:', result.message)
}
} catch (error) {
setLocalAIValid(false)
console.error('Ollama validation error:', error)
} finally {
setValidatingLocal(false)
}
@@ -232,26 +251,26 @@ export default function AIConfiguration({
</h3>
<div className={`p-4 rounded-lg border mb-4 ${
gpuRecommendation.type === 'success' ? 'bg-green-50 border-green-200' :
gpuRecommendation.type === 'success' ? 'bg-eucalyptus-50 border-eucalyptus-950' :
gpuRecommendation.type === 'warning' ? 'bg-yellow-50 border-yellow-200' :
'bg-blue-50 border-blue-200'
}`}>
<div className="flex items-start">
<InformationCircleIcon className={`h-5 w-5 mt-0.5 mr-2 ${
gpuRecommendation.type === 'success' ? 'text-green-600' :
gpuRecommendation.type === 'success' ? 'text-eucalyptus-600' :
gpuRecommendation.type === 'warning' ? 'text-yellow-600' :
'text-blue-600'
}`} />
<div>
<div className={`font-medium ${
gpuRecommendation.type === 'success' ? 'text-green-800' :
gpuRecommendation.type === 'success' ? 'text-eucalyptus-600' :
gpuRecommendation.type === 'warning' ? 'text-yellow-800' :
'text-blue-800'
}`}>
{gpuRecommendation.recommendation}
</div>
<div className={`text-sm mt-1 ${
gpuRecommendation.type === 'success' ? 'text-green-700' :
gpuRecommendation.type === 'success' ? 'text-eucalyptus-600' :
gpuRecommendation.type === 'warning' ? 'text-yellow-700' :
'text-blue-700'
}`}>
@@ -376,7 +395,7 @@ export default function AIConfiguration({
</button>
</div>
{localAIValid === true && (
<div className="flex items-center mt-1 text-green-600 text-sm">
<div className="flex items-center mt-1 text-eucalyptus-600 text-sm">
<CheckCircleIcon className="h-4 w-4 mr-1" />
Connection successful
</div>
@@ -468,7 +487,7 @@ export default function AIConfiguration({
</button>
</div>
{openaiValid === true && (
<div className="flex items-center mt-1 text-green-600 text-sm">
<div className="flex items-center mt-1 text-eucalyptus-600 text-sm">
<CheckCircleIcon className="h-4 w-4 mr-1" />
API key valid
</div>

4
install/config-ui/app/setup/components/LicenseValidation.tsx
View File

@@ -141,7 +141,7 @@ export default function LicenseValidation({
<div className="flex items-center mb-4">
<KeyIcon className="h-6 w-6 text-bzzz-primary mr-2" />
<h3 className="text-lg font-medium text-gray-900">License Information</h3>
{validationResult?.valid && <CheckCircleIcon className="h-5 w-5 text-green-500 ml-2" />}
{validationResult?.valid && <CheckCircleIcon className="h-5 w-5 text-eucalyptus-600 ml-2" />}
</div>
<div className="space-y-4">
@@ -230,7 +230,7 @@ export default function LicenseValidation({
<div className="flex items-start">
<div className="flex-shrink-0">
{validationResult.valid ? (
<CheckCircleIcon className="h-6 w-6 text-eucalyptus-950 dark:text-eucalyptus-50" />
<CheckCircleIcon className="h-6 w-6 text-eucalyptus-600 dark:text-eucalyptus-50" />
) : (
<ExclamationTriangleIcon className="h-6 w-6 text-coral-950 dark:text-coral-50" />
)}

6
install/config-ui/app/setup/components/RepositoryConfiguration.tsx
View File

@@ -347,16 +347,16 @@ export default function RepositoryConfiguration({
{validation && (
<div className={`flex items-center p-3 rounded-lg mb-4 ${
validation.valid
? 'bg-green-50 border border-green-200'
? 'bg-eucalyptus-50 border border-eucalyptus-950'
: 'bg-red-50 border border-red-200'
}`}>
{validation.valid ? (
<CheckCircleIcon className="h-5 w-5 text-green-600 mr-2" />
<CheckCircleIcon className="h-5 w-5 text-eucalyptus-600 mr-2" />
) : (
<XCircleIcon className="h-5 w-5 text-red-600 mr-2" />
)}
<span className={`text-sm ${
validation.valid ? 'text-green-800' : 'text-red-800'
validation.valid ? 'text-eucalyptus-600' : 'text-red-800'
}`}>
{validation.valid ? validation.message : validation.error}
</span>

6
install/config-ui/app/setup/components/SecuritySetup.tsx
View File

@@ -208,7 +208,7 @@ b3BlbnNzaC1rZXktdjEAAAAABG5vbmUAAAAEbm9uZQAAAAAAAAABAAAFwwAAAAd...
<div className="flex items-center mb-4">
<KeyIcon className="h-6 w-6 text-bzzz-primary mr-2" />
<h3 className="text-lg font-medium text-gray-900">SSH Key Management</h3>
{validation.sshKeys === true && <CheckCircleIcon className="h-5 w-5 text-green-500 ml-2" />}
{validation.sshKeys === true && <CheckCircleIcon className="h-5 w-5 text-eucalyptus-600 ml-2" />}
{validation.sshKeys === false && <XCircleIcon className="h-5 w-5 text-red-500 ml-2" />}
</div>
@@ -420,7 +420,7 @@ b3BlbnNzaC1rZXktdjEAAAAABG5vbmUAAAAEbm9uZQAAAAAAAAABAAAFwwAAAAd...
<div className="flex items-center mb-4">
<LockClosedIcon className="h-6 w-6 text-bzzz-primary mr-2" />
<h3 className="text-lg font-medium text-gray-900">TLS/SSL Configuration</h3>
{validation.tlsCert === true && <CheckCircleIcon className="h-5 w-5 text-green-500 ml-2" />}
{validation.tlsCert === true && <CheckCircleIcon className="h-5 w-5 text-eucalyptus-600 ml-2" />}
{validation.tlsCert === false && <XCircleIcon className="h-5 w-5 text-red-500 ml-2" />}
</div>
@@ -626,7 +626,7 @@ b3BlbnNzaC1rZXktdjEAAAAABG5vbmUAAAAEbm9uZQAAAAAAAAABAAAFwwAAAAd...
className="w-full p-3 border border-gray-300 rounded-lg"
/>
{configData?.network && (
<p className="text-sm text-green-600 mt-1 flex items-center">
<p className="text-sm text-eucalyptus-600 mt-1 flex items-center">
<CheckCircleIcon className="h-4 w-4 mr-1" />
Ports automatically configured from Network Settings: {[
configData.network.bzzzPort,

44
install/config-ui/app/setup/components/ServiceDeployment.tsx
View File

@@ -380,10 +380,10 @@ export default function ServiceDeployment({
const getStatusIcon = (status: string) => {
switch (status) {
case 'connected': return <CheckCircleIcon className="h-5 w-5 text-green-500" />
case 'connected': return <CheckCircleIcon className="h-5 w-5 text-eucalyptus-600" />
case 'failed': return <XCircleIcon className="h-5 w-5 text-red-500" />
case 'testing': return <ArrowPathIcon className="h-5 w-5 text-blue-500 animate-spin" />
case 'running': return <CheckCircleIcon className="h-5 w-5 text-green-500" />
case 'running': return <CheckCircleIcon className="h-5 w-5 text-eucalyptus-600" />
case 'installing': return <ArrowPathIcon className="h-5 w-5 text-blue-500 animate-spin" />
case 'error': return <XCircleIcon className="h-5 w-5 text-red-500" />
case 'stopped': return <StopIcon className="h-5 w-5 text-yellow-500" />
@@ -585,12 +585,24 @@ export default function ServiceDeployment({
<button
type="button"
onClick={() => deployToMachine(machine.id)}
className="text-green-600 hover:text-green-900"
className="text-eucalyptus-600 hover:text-eucalyptus-600"
>
Install
</button>
)}
{machine.sshStatus === 'connected' && machine.deployStatus === 'error' && (
<button
type="button"
onClick={() => deployToMachine(machine.id)}
className="text-amber-600 hover:text-amber-700 mr-2"
title="Retry deployment"
>
<ArrowPathIcon className="h-4 w-4 inline mr-1" />
Retry
</button>
)}
{machine.deployStatus !== 'not_deployed' && (
<>
<button
@@ -684,7 +696,7 @@ export default function ServiceDeployment({
✕
</button>
</div>
<div className="bg-gray-900 text-green-400 p-4 rounded font-mono text-sm max-h-64 overflow-y-auto">
<div className="bg-gray-900 text-eucalyptus-600 p-4 rounded font-mono text-sm max-h-64 overflow-y-auto">
{deploymentLogs[showLogs]?.map((log, index) => (
<div key={index}>{log}</div>
)) || <div>No logs available</div>}
@@ -699,7 +711,7 @@ export default function ServiceDeployment({
<div className="bg-gray-900 rounded-lg overflow-hidden max-w-4xl w-full max-h-[80vh] flex flex-col">
<div className="bg-gray-800 px-4 py-3 flex justify-between items-center border-b border-gray-700">
<div className="flex items-center">
<ComputerDesktopIcon className="h-5 w-5 text-green-400 mr-2" />
<ComputerDesktopIcon className="h-5 w-5 text-eucalyptus-600 mr-2" />
<h3 className="text-lg font-medium text-white">
SSH Console - {machines.find(m => m.id === showConsole)?.hostname}
</h3>
@@ -711,7 +723,7 @@ export default function ServiceDeployment({
<div className="flex items-center space-x-1">
<div className="w-2 h-2 bg-red-500 rounded-full"></div>
<div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
<div className="w-2 h-2 bg-eucalyptus-500 rounded-full"></div>
</div>
<button
onClick={() => setShowConsole(null)}
@@ -722,7 +734,7 @@ export default function ServiceDeployment({
</div>
</div>
<div className="flex-1 p-4 font-mono text-sm overflow-y-auto bg-gray-900">
<div className="text-green-400 space-y-1">
<div className="text-eucalyptus-600 space-y-1">
{consoleLogs[showConsole]?.length > 0 ? (
consoleLogs[showConsole].map((log, index) => (
<div key={index} className="whitespace-pre-wrap">{log}</div>
@@ -734,10 +746,26 @@ export default function ServiceDeployment({
<div className="inline-block w-2 h-4 bg-green-400 animate-pulse"></div>
</div>
</div>
<div className="bg-gray-800 px-4 py-2 border-t border-gray-700">
<div className="bg-gray-800 px-4 py-2 border-t border-gray-700 flex justify-between items-center">
<div className="text-xs text-gray-400">
💡 This console shows real-time deployment progress and SSH operations
</div>
{(() => {
const machine = machines.find(m => m.id === showConsole)
return machine?.sshStatus === 'connected' && machine?.deployStatus === 'error' && (
<button
type="button"
onClick={() => {
deployToMachine(showConsole!)
}}
className="ml-4 px-3 py-1 bg-amber-600 hover:bg-amber-700 text-white text-xs rounded-md flex items-center space-x-1 transition-colors"
title="Retry deployment"
>
<ArrowPathIcon className="h-3 w-3" />
<span>Retry Deployment</span>
</button>
)
})()}
</div>
</div>
</div>

86
install/config-ui/app/setup/components/SystemDetection.tsx
View File

@@ -94,7 +94,7 @@ export default function SystemDetection({
const getStatusColor = (condition: boolean) => {
return condition ? 'text-green-600' : 'text-red-600'
return condition ? 'text-eucalyptus-600' : 'text-red-600'
}
const getStatusIcon = (condition: boolean) => {
@@ -106,7 +106,7 @@ export default function SystemDetection({
<div className="flex items-center justify-center py-12">
<div className="text-center">
<ArrowPathIcon className="h-8 w-8 text-bzzz-primary animate-spin mx-auto mb-4" />
<p className="text-gray-600">Detecting system configuration...</p>
<p className="text-chorus-text-secondary">Detecting system configuration...</p>
</div>
</div>
)
@@ -116,10 +116,10 @@ export default function SystemDetection({
return (
<div className="text-center py-12">
<ExclamationTriangleIcon className="h-12 w-12 text-red-500 mx-auto mb-4" />
<h3 className="text-lg font-medium text-gray-900 mb-2">
<h3 className="heading-subsection mb-2">
System Detection Failed
</h3>
<p className="text-gray-600 mb-4">
<p className="text-chorus-text-secondary mb-4">
Unable to detect system configuration. Please try again.
</p>
<button
@@ -136,9 +136,9 @@ export default function SystemDetection({
return (
<div className="space-y-6">
{/* System Overview */}
<div className="bg-gray-50 rounded-lg p-6">
<div className="card">
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-medium text-gray-900">System Overview</h3>
<h3 className="heading-subsection">System Overview</h3>
<button
onClick={refreshSystemInfo}
disabled={refreshing}
@@ -150,12 +150,12 @@ export default function SystemDetection({
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<div className="text-sm font-medium text-gray-700">Hostname</div>
<div className="text-lg text-gray-900">{detectedInfo.network.hostname}</div>
<div className="text-sm font-medium text-chorus-text-secondary">Hostname</div>
<div className="text-lg text-chorus-text-primary">{detectedInfo.network.hostname}</div>
</div>
<div>
<div className="text-sm font-medium text-gray-700">Operating System</div>
<div className="text-lg text-gray-900">
<div className="text-sm font-medium text-chorus-text-secondary">Operating System</div>
<div className="text-lg text-chorus-text-primary">
{detectedInfo.os} ({detectedInfo.architecture})
</div>
</div>
@@ -165,22 +165,22 @@ export default function SystemDetection({
{/* Hardware Information */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* CPU & Memory */}
<div className="bg-white border border-gray-200 rounded-lg p-6">
<div className="card">
<div className="flex items-center mb-4">
<CpuChipIcon className="h-6 w-6 text-bzzz-primary mr-2" />
<h3 className="text-lg font-medium text-gray-900">CPU & Memory</h3>
<h3 className="heading-subsection">CPU & Memory</h3>
</div>
<div className="space-y-3">
<div>
<div className="text-sm font-medium text-gray-700">CPU</div>
<div className="text-gray-900">
<div className="text-sm font-medium text-chorus-text-secondary">CPU</div>
<div className="text-chorus-text-primary">
{detectedInfo.cpu_cores} cores
</div>
</div>
<div>
<div className="text-sm font-medium text-gray-700">Memory</div>
<div className="text-gray-900">
<div className="text-sm font-medium text-chorus-text-secondary">Memory</div>
<div className="text-chorus-text-primary">
{Math.round(detectedInfo.memory_mb / 1024)} GB total
</div>
</div>
@@ -188,21 +188,21 @@ export default function SystemDetection({
</div>
{/* Storage */}
<div className="bg-white border border-gray-200 rounded-lg p-6">
<div className="card">
<div className="flex items-center mb-4">
<CircleStackIcon className="h-6 w-6 text-bzzz-primary mr-2" />
<h3 className="text-lg font-medium text-gray-900">Storage</h3>
<h3 className="heading-subsection">Storage</h3>
</div>
<div className="space-y-3">
<div>
<div className="text-sm font-medium text-gray-700">Disk Space</div>
<div className="text-gray-900">
<div className="text-sm font-medium text-chorus-text-secondary">Disk Space</div>
<div className="text-chorus-text-primary">
{detectedInfo.storage.total_space_gb} GB total, {' '}
{detectedInfo.storage.free_space_gb} GB available
</div>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div className="w-full bg-chorus-border-invisible rounded-full h-2">
<div
className="bg-bzzz-primary h-2 rounded-full"
style={{
@@ -216,19 +216,19 @@ export default function SystemDetection({
{/* GPU Information */}
{detectedInfo.gpus && detectedInfo.gpus.length > 0 && (
<div className="bg-white border border-gray-200 rounded-lg p-6">
<div className="card">
<div className="flex items-center mb-4">
<ServerIcon className="h-6 w-6 text-bzzz-primary mr-2" />
<h3 className="text-lg font-medium text-gray-900">
<h3 className="heading-subsection">
GPU Configuration ({detectedInfo.gpus.length} GPU{detectedInfo.gpus.length !== 1 ? 's' : ''})
</h3>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{detectedInfo.gpus.map((gpu, index) => (
<div key={index} className="bg-gray-50 rounded-lg p-4">
<div className="font-medium text-gray-900">{gpu.name}</div>
<div className="text-sm text-gray-600">
<div key={index} className="bg-chorus-warm rounded-lg p-4">
<div className="font-medium text-chorus-text-primary">{gpu.name}</div>
<div className="text-sm text-chorus-text-secondary">
{gpu.type.toUpperCase()} • {gpu.memory} • {gpu.driver}
</div>
</div>
@@ -238,21 +238,21 @@ export default function SystemDetection({
)}
{/* Network Information */}
<div className="bg-white border border-gray-200 rounded-lg p-6">
<div className="card">
<div className="flex items-center mb-4">
<GlobeAltIcon className="h-6 w-6 text-bzzz-primary mr-2" />
<h3 className="text-lg font-medium text-gray-900">Network Configuration</h3>
<h3 className="heading-subsection">Network Configuration</h3>
</div>
<div className="space-y-3">
<div>
<div className="text-sm font-medium text-gray-700">Hostname</div>
<div className="text-gray-900">{detectedInfo.network.hostname}</div>
<div className="text-sm font-medium text-chorus-text-secondary">Hostname</div>
<div className="text-chorus-text-primary">{detectedInfo.network.hostname}</div>
</div>
{detectedInfo.network.private_ips && detectedInfo.network.private_ips.length > 0 && (
<div>
<div className="text-sm font-medium text-gray-700 mb-2">Private IP Addresses</div>
<div className="text-sm font-medium text-chorus-text-secondary mb-2">Private IP Addresses</div>
<div className="space-y-2">
{detectedInfo.network.private_ips.map((ip, index) => (
<div key={index} className="flex justify-between items-center text-sm">
@@ -266,16 +266,16 @@ export default function SystemDetection({
{detectedInfo.network.public_ip && (
<div>
<div className="text-sm font-medium text-gray-700">Public IP</div>
<div className="text-gray-900">{detectedInfo.network.public_ip}</div>
<div className="text-sm font-medium text-chorus-text-secondary">Public IP</div>
<div className="text-chorus-text-primary">{detectedInfo.network.public_ip}</div>
</div>
)}
</div>
</div>
{/* Software Requirements */}
<div className="bg-white border border-gray-200 rounded-lg p-6">
<h3 className="text-lg font-medium text-gray-900 mb-4">Software Requirements</h3>
<div className="card">
<h3 className="heading-subsection mb-4">Software Requirements</h3>
<div className="space-y-4">
{[
@@ -304,9 +304,9 @@ export default function SystemDetection({
<div className="flex items-center">
<StatusIcon className={`h-5 w-5 mr-3 ${getStatusColor(software.installed)}`} />
<div>
<div className="font-medium text-gray-900">{software.name}</div>
<div className="font-medium text-chorus-text-primary">{software.name}</div>
{software.version && (
<div className="text-sm text-gray-600">Version: {software.version}</div>
<div className="text-sm text-chorus-text-secondary">Version: {software.version}</div>
)}
</div>
</div>
@@ -327,8 +327,8 @@ export default function SystemDetection({
</div>
{/* System Validation */}
<div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
<h3 className="text-lg font-medium text-blue-900 mb-4">System Validation</h3>
<div className="panel panel-info">
<h3 className="heading-subsection mb-4 panel-title">System Validation</h3>
<div className="space-y-2">
{[
@@ -351,13 +351,13 @@ export default function SystemDetection({
<div key={index} className="flex items-center">
<StatusIcon className={`h-4 w-4 mr-3 ${
validation.passed
? 'text-green-600'
? 'text-eucalyptus-600'
: 'text-red-600'
}`} />
<span className={`text-sm ${
validation.passed
? 'text-green-800'
: 'text-red-800'
? 'text-eucalyptus-600'
: 'text-red-600'
}`}>
{validation.check}
{validation.warning && validation.passed && (
@@ -371,7 +371,7 @@ export default function SystemDetection({
</div>
{/* Action Buttons */}
<div className="flex justify-between pt-6 border-t border-gray-200">
<div className="flex justify-between pt-6 border-t border-chorus-border-defined">
<div>
{onBack && (
<button onClick={onBack} className="btn-outline">

4
install/config-ui/app/setup/components/TermsAndConditions.tsx
View File

@@ -124,7 +124,7 @@ export default function TermsAndConditions({
</div>
{/* Agreement Checkbox */}
<div className="card">
<div className="card agreement">
<div className="space-y-4">
<label className="flex items-start">
<input
@@ -152,7 +152,7 @@ export default function TermsAndConditions({
)}
{agreed && (
<div className="flex items-center text-green-600 text-sm">
<div className="flex items-center text-eucalyptus-600 text-sm">
<CheckCircleIcon className="h-4 w-4 mr-1" />
Thank you for accepting the terms and conditions
</div>

8
install/config-ui/app/setup/components/TestingValidation.tsx
View File

@@ -86,14 +86,14 @@ export default function TestingValidation({
)}
{isCompleted && (
<div className="mt-8 bg-green-50 border border-green-200 rounded-lg p-6">
<h4 className="text-lg font-medium text-green-900 mb-2">
<div className="mt-8 bg-eucalyptus-50 border border-eucalyptus-950 rounded-lg p-6">
<h4 className="text-lg font-medium text-eucalyptus-600 mb-2">
🎉 Setup Complete!
</h4>
<p className="text-green-700 mb-4">
<p className="text-eucalyptus-600 mb-4">
Your CHORUS:agents cluster has been successfully configured and deployed.
</p>
<div className="space-y-2 text-sm text-green-600 mb-4">
<div className="space-y-2 text-sm text-eucalyptus-600 mb-4">
<div>✓ System configuration validated</div>
<div>✓ Network connectivity tested</div>
<div>✓ Services deployed to all nodes</div>

4
install/config-ui/app/setup/page.tsx
View File

@@ -224,7 +224,7 @@ export default function SetupPage() {
<div className="grid grid-cols-1 lg:grid-cols-4 gap-12">
{/* Progress Sidebar */}
<div className="lg:col-span-1">
<div className="card sticky top-8 bg-chorus-white dark:bg-ocean-700">
<div className="card sticky top-8 setup-progress">
<h2 className="heading-subsection mb-6">
Setup Progress
</h2>
@@ -252,7 +252,7 @@ export default function SetupPage() {
<div className="flex items-center">
<div className="flex-shrink-0 mr-3">
{isCompleted ? (
<CheckCircleIcon className="h-5 w-5 text-green-400" />
<CheckCircleIcon className="h-5 w-5 text-eucalyptus-600" />
) : (
<div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center text-xs font-medium ${
isCurrent