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

Transform BZZZ config-ui to CHORUS ultra-minimalist branding

Browse Source 
- Replace BZZZ branding with CHORUS Agent Configuration
- Implement ultra-minimalist design system with subtle 3-5px rounded corners
- Add CHORUS corporate color palette (Dark Mulberry primary, Orchestration Blue secondary)
- Integrate Mobius ring logo from brand assets
- Update all copy from BZZZ to CHORUS/CHORUS:Agents references
- Apply clean typography hierarchy and generous spacing
- Remove shadows and gradients for minimalist aesthetic
- Implement invisible border system for subtle organization
- Update progress indicators and status elements
- Maintain all functionality while enhancing brand consistency

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
anthonyrawlins
2025-08-19 00:23:17 +10:00
parent c177363a19
commit 82036bdd5a
66 changed files with 239 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
install/config-ui/app/globals.css
View File

@@ -4,33 +4,53 @@
@layer base {
html {
font-family: system-ui, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
}
body {
background-color: theme('colors.chorus-paper');
color: theme('colors.chorus-text-primary');
}
}
@layer components {
/* Ultra-Minimalist Button System */
.btn-primary {
@apply bg-bzzz-primary hover:bg-opacity-90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
@apply bg-chorus-primary hover:opacity-90 text-white font-medium py-3 px-6 rounded-md transition-opacity duration-200 disabled:opacity-40 disabled:cursor-not-allowed border-none;
}
.btn-secondary {
@apply bg-bzzz-secondary hover:bg-opacity-90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
@apply bg-transparent border border-chorus-secondary text-chorus-secondary hover:bg-chorus-secondary hover:text-white font-medium py-3 px-6 rounded-md transition-all duration-200 disabled:opacity-40 disabled:cursor-not-allowed;
}
.btn-outline {
@apply border-2 border-bzzz-primary text-bzzz-primary hover:bg-bzzz-primary hover:text-white font-medium py-2 px-4 rounded-lg transition-all duration-200;
@apply border border-chorus-primary text-chorus-primary hover:bg-chorus-primary hover:text-white font-medium py-3 px-6 rounded-md transition-all duration-200;
}
.btn-text {
@apply bg-transparent text-chorus-secondary hover:text-chorus-primary font-medium py-2 px-0 border-none transition-colors duration-200;
}
/* Clean Card System */
.card {
@apply bg-white rounded-lg shadow-lg p-6 border border-gray-200;
@apply bg-white border border-chorus-border-invisible p-8 rounded-lg;
}
.card-elevated {
@apply bg-chorus-warm border border-chorus-border-subtle p-8 rounded-lg;
}
/* Form Elements */
.input-field {
@apply block w-full rounded-md border-gray-300 shadow-sm focus:border-bzzz-primary focus:ring-bzzz-primary sm:text-sm;
@apply block w-full border border-chorus-border-defined p-3 rounded-sm focus:border-chorus-primary focus:outline-none transition-colors duration-200 bg-white;
}
.input-field:focus {
@apply border-chorus-primary ring-0;
}
.label {
@apply block text-sm font-medium text-gray-700 mb-2;
@apply block text-sm font-medium text-chorus-text-primary mb-2;
}
.error-text {
@@ -38,22 +58,69 @@
}
.success-text {
@apply text-green-600 text-sm mt-1;
@apply text-chorus-secondary text-sm mt-1;
}
/* Minimalist Status System */
.status-indicator {
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
@apply text-xs font-medium;
}
.status-online {
@apply status-indicator bg-green-100 text-green-800;
@apply status-indicator text-chorus-secondary;
}
.status-offline {
@apply status-indicator bg-red-100 text-red-800;
@apply status-indicator text-chorus-text-subtle;
}
.status-pending {
@apply status-indicator bg-yellow-100 text-yellow-800;
@apply status-indicator text-chorus-brown;
}
/* Progress Elements */
.progress-step {
@apply p-3 rounded-md border transition-all duration-200;
}
.progress-step-current {
@apply border-chorus-primary bg-chorus-primary bg-opacity-5 text-chorus-primary;
}
.progress-step-completed {
@apply border-chorus-secondary bg-chorus-secondary bg-opacity-5 text-chorus-secondary;
}
.progress-step-accessible {
@apply border-chorus-border-defined hover:border-chorus-border-emphasis text-chorus-text-secondary;
}
.progress-step-disabled {
@apply border-chorus-border-invisible text-chorus-text-subtle cursor-not-allowed;
}
/* Typography Hierarchy */
.heading-hero {
@apply text-3xl font-semibold text-chorus-text-primary tracking-tight;
}
.heading-section {
@apply text-2xl font-semibold text-chorus-text-primary;
}
.heading-subsection {
@apply text-lg font-medium text-chorus-text-primary;
}
.text-body {
@apply text-base text-chorus-text-secondary leading-relaxed;
}
.text-small {
@apply text-sm text-chorus-text-tertiary;
}
.text-ghost {
@apply text-sm text-chorus-text-ghost;
}
}

48
install/config-ui/app/layout.tsx
View File

@@ -2,8 +2,8 @@ import type { Metadata } from 'next'
import './globals.css'
export const metadata: Metadata = {
title: 'BZZZ Cluster Configuration',
description: 'Configure your BZZZ distributed AI coordination cluster',
title: 'CHORUS Agent Configuration',
description: 'Configure your CHORUS distributed agent orchestration platform',
viewport: 'width=device-width, initial-scale=1',
}
@@ -14,27 +14,29 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body className="bg-gray-50 min-h-screen">
<body className="bg-chorus-paper min-h-screen">
<div className="min-h-screen flex flex-col">
<header className="bg-white shadow-sm border-b border-gray-200">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center py-4">
<div className="flex items-center">
<header className="bg-white border-b border-chorus-border-invisible">
<div className="max-w-7xl mx-auto px-8 py-6">
<div className="flex justify-between items-center">
<div className="flex items-center space-x-4">
<div className="flex-shrink-0">
<div className="w-8 h-8 bg-bzzz-primary rounded-lg flex items-center justify-center">
<span className="text-white font-bold text-lg">B</span>
</div>
<img
src="/assets/chorus-mobius-on-white.png"
alt="CHORUS"
className="w-10 h-10"
/>
</div>
<div className="ml-3">
<h1 className="text-xl font-semibold text-gray-900">
BZZZ Cluster Configuration
<div>
<h1 className="heading-subsection">
CHORUS Agent Configuration
</h1>
<p className="text-sm text-gray-500">
Distributed AI Coordination Platform
<p className="text-small">
Distributed Agent Orchestration Platform
</p>
</div>
</div>
<div className="flex items-center space-x-4">
<div className="flex items-center space-x-6">
<div className="status-online">
System Online
</div>
@@ -47,24 +49,24 @@ export default function RootLayout({
{children}
</main>
<footer className="bg-white border-t border-gray-200">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div className="flex justify-between items-center text-sm text-gray-500">
<footer className="bg-white border-t border-chorus-border-invisible">
<div className="max-w-7xl mx-auto px-8 py-6">
<div className="flex justify-between items-center text-sm text-chorus-text-tertiary">
<div>
© 2025 Chorus Services. All rights reserved.
</div>
<div className="flex space-x-4">
<div className="flex space-x-6">
<a
href="https://docs.chorus.services/bzzz"
href="https://docs.chorus.services/agents"
target="_blank"
className="hover:text-bzzz-primary transition-colors"
className="btn-text"
>
Documentation
</a>
<a
href="https://discord.gg/chorus-services"
target="_blank"
className="hover:text-bzzz-primary transition-colors"
className="btn-text"
>
Support
</a>

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

@@ -23,7 +23,7 @@ const SETUP_STEPS = [
{
id: 'license',
title: 'License Validation',
description: 'Validate your BZZZ license key and email',
description: 'Validate your CHORUS license key and email',
component: LicenseValidation,
},
{
@@ -59,13 +59,13 @@ const SETUP_STEPS = [
{
id: 'deployment',
title: 'Service Deployment',
description: 'Deploy and configure CHORUS:agents services',
description: 'Deploy and configure CHORUS agent services',
component: ServiceDeployment,
},
{
id: 'cluster',
title: 'Cluster Formation',
description: 'Join or create CHORUS:agents cluster',
description: 'Join or create CHORUS agent cluster',
component: ClusterFormation,
},
{
@@ -99,7 +99,7 @@ export default function SetupPage() {
const loadPersistedData = () => {
try {
const savedState = localStorage.getItem('bzzz-setup-state')
const savedState = localStorage.getItem('chorus-setup-state')
if (savedState) {
const state = JSON.parse(savedState)
setCurrentStep(state.currentStep || 0)
@@ -119,7 +119,7 @@ export default function SetupPage() {
configData,
timestamp: new Date().toISOString()
}
localStorage.setItem('bzzz-setup-state', JSON.stringify(state))
localStorage.setItem('chorus-setup-state', JSON.stringify(state))
} catch (error) {
console.error('Failed to save setup state:', error)
}
@@ -127,7 +127,7 @@ export default function SetupPage() {
const clearPersistedData = () => {
try {
localStorage.removeItem('bzzz-setup-state')
localStorage.removeItem('chorus-setup-state')
// Reset state to initial values
setCurrentStep(0)
setCompletedSteps(new Set<number>())
@@ -183,29 +183,29 @@ export default function SetupPage() {
return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="mb-8">
<h1 className="text-3xl font-bold text-gray-900 mb-2">
Welcome to CHORUS:agents Setup
<h1 className="heading-hero mb-3">
CHORUS Agent Setup
</h1>
<p className="text-lg text-gray-600">
Let's configure your distributed AI agent coordination cluster in {SETUP_STEPS.length} simple steps.
<p className="text-body">
Configure your distributed agent orchestration platform in {SETUP_STEPS.length} simple steps.
</p>
</div>
{/* Resume Setup Notification */}
{isResuming && (
<div className="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
<div className="mb-8 bg-chorus-secondary bg-opacity-5 border border-chorus-secondary border-opacity-20 rounded-lg p-6">
<div className="flex items-start justify-between">
<div className="flex items-start">
<div className="flex-shrink-0">
<svg className="h-5 w-5 text-blue-500 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg className="h-5 w-5 text-chorus-secondary mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div className="ml-3">
<h3 className="text-sm font-medium text-blue-800">
<h3 className="text-sm font-medium text-chorus-secondary">
Setup Progress Restored
</h3>
<p className="text-sm text-blue-700 mt-1">
<p className="text-small text-chorus-text-secondary mt-1">
Your previous setup progress has been restored. You're currently on step {currentStep + 1} of {SETUP_STEPS.length}.
{completedSteps.size > 0 && ` You've completed ${completedSteps.size} step${completedSteps.size !== 1 ? 's' : ''}.`}
</p>
@@ -213,7 +213,7 @@ export default function SetupPage() {
</div>
<button
onClick={clearPersistedData}
className="text-blue-500 hover:text-blue-700 text-sm font-medium"
className="btn-text"
>
Start Over
</button>
@@ -221,11 +221,11 @@ export default function SetupPage() {
</div>
)}
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
<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">
<h2 className="text-lg font-semibold text-gray-900 mb-4">
<h2 className="heading-subsection mb-6">
Setup Progress
</h2>
<nav className="space-y-2">
@@ -239,25 +239,25 @@ export default function SetupPage() {
key={step.id}
onClick={() => isAccessible && setCurrentStep(index)}
disabled={!isAccessible}
className={`w-full text-left p-3 rounded-lg border transition-all duration-200 ${
className={`w-full text-left progress-step ${
isCurrent
? 'border-bzzz-primary bg-bzzz-primary bg-opacity-10 text-bzzz-primary'
? 'progress-step-current'
: isCompleted
? 'border-green-200 bg-green-50 text-green-700'
? 'progress-step-completed'
: isAccessible
? 'border-gray-200 hover:border-gray-300 text-gray-700'
: 'border-gray-100 text-gray-400 cursor-not-allowed'
? 'progress-step-accessible'
: 'progress-step-disabled'
}`}
>
<div className="flex items-center">
<div className="flex-shrink-0 mr-3">
{isCompleted ? (
<CheckCircleIcon className="h-5 w-5 text-green-500" />
<CheckCircleIcon className="h-5 w-5 text-chorus-secondary" />
) : (
<div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center text-xs font-medium ${
isCurrent
? 'border-bzzz-primary bg-bzzz-primary text-white'
: 'border-gray-300 text-gray-500'
? 'border-chorus-primary bg-chorus-primary text-white'
: 'border-chorus-border-emphasis text-chorus-text-subtle'
}`}>
{index + 1}
</div>
@@ -280,13 +280,13 @@ export default function SetupPage() {
})}
</nav>
<div className="mt-6 pt-4 border-t border-gray-200">
<div className="text-sm text-gray-600 mb-2">
<div className="mt-8 pt-6 border-t border-chorus-border-invisible">
<div className="text-small mb-3">
Progress: {completedSteps.size} of {SETUP_STEPS.length} steps
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div className="w-full bg-chorus-border-subtle rounded-sm h-2">
<div
className="bg-bzzz-primary h-2 rounded-full transition-all duration-500"
className="bg-chorus-primary h-2 rounded-sm transition-all duration-500"
style={{ width: `${(completedSteps.size / SETUP_STEPS.length) * 100}%` }}
/>
</div>
@@ -297,16 +297,16 @@ export default function SetupPage() {
{/* Main Content */}
<div className="lg:col-span-3">
<div className="card">
<div className="mb-6">
<div className="flex items-center justify-between mb-2">
<h2 className="text-2xl font-bold text-gray-900">
<div className="mb-8">
<div className="flex items-center justify-between mb-3">
<h2 className="heading-section">
{SETUP_STEPS[currentStep].title}
</h2>
<div className="text-sm text-gray-500">
<div className="text-ghost">
Step {currentStep + 1} of {SETUP_STEPS.length}
</div>
</div>
<p className="text-gray-600">
<p className="text-body">
{SETUP_STEPS[currentStep].description}
</p>
</div>