HAP Analysis: Archive docs and create implementation action plan

- Archive all existing markdown documentation files
- Create comprehensive HAP_ACTION_PLAN.md with:
  * Analysis of current BZZZ implementation vs HAP vision
  * 4-phase implementation strategy
  * Structural reorganization approach (multi-binary)
  * HAP interface implementation roadmap
- Preserve existing functionality while adding human agent portal
- Focus on incremental migration over rewrite

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

Co-Authored-By: Claude <noreply@anthropic.com>

HAP_ACTION_PLAN.md

@@ -0,0 +1,228 @@
+# BZZZ Human Agent Portal (HAP) — Implementation Action Plan
+
+**Goal:**  
+Transform the existing BZZZ autonomous agent system into a dual-binary architecture supporting both autonomous agents and human agent portals using shared P2P infrastructure.
+
+---
+
+## 🔍 Current State Analysis
+
+### ✅ What We Have
+BZZZ currently implements a **comprehensive P2P autonomous agent system** with:
+
+- **P2P Infrastructure**: libp2p mesh with mDNS discovery
+- **Agent Identity**: Crypto-based agent records (`pkg/agentid/`)
+- **Messaging**: HMMM collaborative reasoning integration
+- **Storage**: DHT with role-based Age encryption
+- **Addressing**: UCXL context resolution system (`pkg/ucxl/`)
+- **Coordination**: SLURP task distribution (`pkg/slurp/`)
+- **Configuration**: Role-based agent definitions
+- **Web Interface**: Setup and configuration UI
+
+### ⚠️ What's Missing
+- **Multi-binary architecture** (currently single `main.go`)
+- **Human interface layer** for message composition and interaction
+- **HAP-specific workflows** (templated forms, prompts, context browsing)
+
+---
+
+## 📋 Implementation Phases
+
+### Phase 1: Structural Reorganization (HIGH PRIORITY)
+**Goal**: Split monolithic binary into shared runtime + dual binaries
+
+#### Tasks:
+- [ ] **1.1** Create `cmd/agent/main.go` (move existing `main.go`)
+- [ ] **1.2** Create `cmd/hap/main.go` (new human portal entry point)
+- [ ] **1.3** Extract shared initialization to `internal/common/runtime/`
+- [ ] **1.4** Update `Makefile` to build both `bzzz-agent` and `bzzz-hap` binaries
+- [ ] **1.5** Test autonomous agent functionality remains identical
+
+**Key Changes:**
+```
+/cmd/
+  /agent/main.go     # Existing autonomous agent logic
+  /hap/main.go       # New human agent portal
+/internal/common/
+  /runtime/          # Shared P2P, config, services initialization
+    agent.go
+    config.go
+    services.go
+```
+
+**Success Criteria:**
+- Both binaries compile successfully
+- `bzzz-agent` maintains all current functionality
+- `bzzz-hap` can join P2P mesh as peer
+
+### Phase 2: HAP Interface Implementation (MEDIUM PRIORITY)
+**Goal**: Create human-friendly interaction layer
+
+#### Tasks:
+- [ ] **2.1** Implement basic terminal interface in `internal/hapui/terminal.go`
+- [ ] **2.2** Create message composition templates for HMMM messages
+- [ ] **2.3** Add context browsing interface for UCXL addresses
+- [ ] **2.4** Implement justification prompts and metadata helpers
+- [ ] **2.5** Test human agent can send/receive HMMM messages
+
+**Key Components:**
+```
+/internal/hapui/
+  forms.go          # Templated message composition
+  terminal.go       # Terminal-based human interface
+  context.go        # UCXL context browsing helpers
+  prompts.go        # Justification and metadata prompts
+```
+
+**Success Criteria:**
+- Human can compose and send HMMM messages via terminal
+- Context browsing works for UCXL addresses
+- HAP appears as valid agent to autonomous peers
+
+### Phase 3: Enhanced Human Workflows (MEDIUM PRIORITY)  
+**Goal**: Add sophisticated human agent features
+
+#### Tasks:
+- [ ] **3.1** Implement patch creation and submission workflows
+- [ ] **3.2** Add time-travel diff support (`~~`, `^^` operators)
+- [ ] **3.3** Create collaborative editing interfaces
+- [ ] **3.4** Add decision tracking and approval workflows
+- [ ] **3.5** Implement web bridge for browser-based HAP interface
+
+**Advanced Features:**
+- Patch preview before submission to DHT
+- Approval chains for architectural decisions
+- Real-time collaboration on UCXL contexts
+- WebSocket bridge to web UI for rich interface
+
+**Success Criteria:**
+- Humans can create and submit patches via HAP
+- Approval workflows integrate with existing SLURP coordination
+- Web interface provides richer interaction than terminal
+
+### Phase 4: Integration & Optimization (LOW PRIORITY)
+**Goal**: Polish and optimize the dual-agent system
+
+#### Tasks:
+- [ ] **4.1** Enhance `AgentID` structure to match HAP plan specification
+- [ ] **4.2** Optimize resource usage for dual-binary deployment
+- [ ] **4.3** Add comprehensive testing for human/machine agent interactions
+- [ ] **4.4** Document HAP usage patterns and workflows
+- [ ] **4.5** Create deployment guides for mixed agent teams
+
+**Refinements:**
+- Performance optimization for shared P2P layer
+- Memory usage optimization when running both binaries
+- Enhanced logging and monitoring for human activities
+- Integration with existing health monitoring system
+
+---
+
+## 🧱 Architecture Alignment
+
+### Current vs Planned Structure
+
+| Component | Current Status | HAP Plan Status | Action Required |
+|-----------|----------------|-----------------|-----------------|
+| **Multi-binary** | ❌ Single `main.go` | Required | **Phase 1** restructure |
+| **Agent Identity** | ✅ `pkg/agentid/` | ✅ Compatible | Minor enhancement |
+| **HMMM Messages** | ✅ Integrated | ✅ Complete | None |
+| **UCXL Context** | ✅ Full implementation | ✅ Complete | None |
+| **DHT Storage** | ✅ Encrypted, distributed | ✅ Complete | None |
+| **PubSub Comms** | ✅ Role-based topics | ✅ Complete | None |
+| **HAP Interface** | ❌ Not implemented | Required | **Phase 2-3** |
+
+### Shared Runtime Components
+Both `bzzz-agent` and `bzzz-hap` will share:
+
+- **P2P networking** and peer discovery
+- **Agent identity** and cryptographic signing
+- **HMMM message** validation and routing
+- **UCXL address** resolution and context storage
+- **DHT operations** for distributed state
+- **Configuration system** and role definitions
+
+**Only the execution loop and UI modality differ between binaries.**
+
+---
+
+## 🔧 Implementation Strategy
+
+### Incremental Migration Approach
+1. **Preserve existing functionality** - autonomous agents continue working
+2. **Add HAP alongside** existing system rather than replacing
+3. **Test continuously** - both binaries must interoperate correctly
+4. **Gradual enhancement** - start with basic HAP, add features incrementally
+
+### Key Principles
+- **Backward compatibility**: Existing BZZZ deployments unaffected
+- **Shared protocols**: Human and machine agents are indistinguishable on P2P mesh
+- **Common codebase**: Maximum code reuse between binaries
+- **Incremental delivery**: Each phase delivers working functionality
+
+### Risk Mitigation
+- **Comprehensive testing** after each phase
+- **Feature flags** to enable/disable HAP features during development
+- **Rollback capability** to single binary if needed
+- **Documentation** of breaking changes and migration steps
+
+---
+
+## 📈 Success Metrics
+
+### Phase 1 Success
+- [ ] `make build` produces both `bzzz-agent` and `bzzz-hap` binaries
+- [ ] Existing autonomous agent functionality unchanged
+- [ ] Both binaries can join same P2P mesh
+
+### Phase 2 Success  
+- [ ] Human can send HMMM messages via HAP terminal interface
+- [ ] HAP appears as valid agent to autonomous peers
+- [ ] Message composition templates functional
+
+### Phase 3 Success
+- [ ] Patch submission workflows complete
+- [ ] Web interface provides rich HAP experience
+- [ ] Human/machine agent collaboration demonstrated
+
+### Overall Success
+- [ ] Mixed teams of human and autonomous agents collaborate seamlessly
+- [ ] HAP provides superior human experience compared to direct protocol interaction
+- [ ] System maintains all existing performance and reliability characteristics
+
+---
+
+## 🎯 Next Steps
+
+### Immediate Actions (This Sprint)
+1. **Create cmd/ structure** and move main.go to cmd/agent/
+2. **Stub cmd/hap/main.go** with basic P2P initialization
+3. **Extract common runtime** to internal/common/
+4. **Update Makefile** for dual binary builds
+5. **Test agent binary** maintains existing functionality
+
+### Short Term (Next 2-4 weeks)
+1. **Implement basic HAP terminal interface**
+2. **Add HMMM message composition**
+3. **Test human agent P2P participation**
+4. **Document HAP usage patterns**
+
+### Medium Term (1-2 months)
+1. **Add web bridge for browser interface**  
+2. **Implement patch workflows**
+3. **Add collaborative features**
+4. **Optimize performance**
+
+---
+
+## 📚 Resources & References
+
+- **Original HAP Plan**: `archive/bzzz_hap_dev_plan.md`
+- **Current Architecture**: `pkg/` directory structure
+- **P2P Infrastructure**: `p2p/`, `pubsub/`, `pkg/dht/`
+- **Agent Identity**: `pkg/agentid/`, `pkg/crypto/`
+- **Messaging**: `pkg/hmmm_adapter/`, HMMM integration
+- **Context System**: `pkg/ucxl/`, `pkg/ucxi/`
+- **Configuration**: `pkg/config/`, role definitions
+
+The current BZZZ implementation provides an excellent foundation for the HAP vision. The primary challenge is architectural restructuring rather than building new functionality from scratch.

install/config-ui/app/components/ThemeToggle.tsx

@@ -19,8 +19,10 @@ export default function ThemeToggle() {
     const html = document.documentElement
     if (dark) {
       html.classList.add('dark')
+      html.classList.remove('light')
     } else {
       html.classList.remove('dark')
+      html.classList.add('light')
     }
   }
 
@@ -52,4 +54,4 @@ export default function ThemeToggle() {
       )}
     </button>
   )
-}
+}

install/config-ui/app/globals.css

@@ -44,8 +44,8 @@ html { font-size: 16px; }
   --border-emphasis: #666666;
 }
 
-/* Light Theme Variables */
-:root:not(.dark) {
+/* Light Theme Variables (apply when html has class 'light') */
+html.light {
   --bg-primary: #FFFFFF;
   --bg-secondary: #f8f8f8;
   --bg-tertiary: #f0f0f0;
@@ -89,6 +89,7 @@ body {
   /* Ultra-Minimalist Button System */
   .btn-primary {
     @apply text-white font-semibold py-3 px-6 rounded-md transition-all duration-300 disabled:opacity-40 disabled:cursor-not-allowed;
+    /* Light mode: warm sand gradient */
     background: linear-gradient(135deg, var(--chorus-warning) 0%, var(--chorus-neutral) 100%);
     border: 2px solid var(--chorus-warning);
   }
@@ -101,6 +102,16 @@ body {
   .btn-primary:hover { transform: translateY(-2px); }
   .btn-secondary:hover { transform: translateY(-2px); border-color: var(--text-primary); }
 
+  /* Dark mode: Mulberry mid-tone for stronger contrast */
+  html.dark .btn-primary {
+    background: #5b3d77; /* approx mulberry-500 */
+    border-color: #5b3d77;
+    box-shadow: 0 4px 12px rgba(11, 2, 19, 0.35);
+  }
+  html.dark .btn-primary:hover {
+    filter: brightness(1.08);
+  }
+
   /* Teaser-aligned Form Elements */
   .form-input {
     background: var(--bg-tertiary);
@@ -114,7 +125,6 @@ body {
   }
   .form-input:focus { outline: none; border-color: var(--chorus-primary); box-shadow: 0 0 0 3px rgba(11,2,19,0.1); background: var(--bg-secondary); }
   .form-input::placeholder { color: var(--text-subtle); }
-  }
   
   .btn-outline {
     @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;
@@ -218,6 +228,52 @@ body {
   }
 }
 
+/* Brand Panel Components */
+@layer components {
+  .panel { @apply rounded-lg p-4 border; }
+
+  /* Info (Ocean) */
+  .panel-info { @apply border-ocean-200 bg-ocean-50; }
+  .panel-info .panel-title { @apply text-ocean-800; }
+  .panel-info .panel-body { @apply text-ocean-700; }
+  html.dark .panel-info { @apply border-ocean-700; background-color: rgba(58,70,84,0.20) !important; }
+  html.dark .panel-info .panel-title { @apply text-ocean-300; }
+  html.dark .panel-info .panel-body { @apply text-ocean-300; }
+
+  /* Note (Nickel / Neutral) */
+  .panel-note { background-color: #f5f4f1; border-color: #e0ddd7; }
+  .panel-note .panel-title { @apply text-chorus-text-primary; }
+  .panel-note .panel-body { @apply text-chorus-text-secondary; }
+  html.dark .panel-note { background-color: rgba(11,2,19,0.20) !important; border-color: var(--border-defined) !important; }
+  html.dark .panel-note .panel-title { @apply text-chorus-text-primary; }
+  html.dark .panel-note .panel-body { @apply text-chorus-text-secondary; }
+
+  /* Warning (Sand) */
+  .panel-warning { @apply bg-sand-100 border-sand-900; }
+  .panel-warning .panel-title { @apply text-sand-900; }
+  .panel-warning .panel-body { @apply text-sand-900; }
+  html.dark .panel-warning { background-color: rgba(106,92,70,0.20) !important; @apply border-sand-900; }
+  /* Fallback to white/neutral for readability in dark */
+  html.dark .panel-warning .panel-title { @apply text-white; }
+  html.dark .panel-warning .panel-body { color: #F1F0EF !important; }
+
+  /* Error (Coral) */
+  .panel-error { @apply bg-coral-50 border-coral-950; }
+  .panel-error .panel-title { @apply text-coral-950; }
+  .panel-error .panel-body { @apply text-coral-950; }
+  html.dark .panel-error { background-color: rgba(46,29,28,0.20) !important; @apply border-coral-950; }
+  html.dark .panel-error .panel-title { @apply text-white; }
+  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; }
+  html.dark .panel-success .panel-title { @apply text-white; }
+  html.dark .panel-success .panel-body { color: #bacfbf !important; }
+}
+
 /* Teaser-aligned color aliases */
 @layer utilities {
   /* 8 standard color families - key shades */
@@ -235,6 +291,18 @@ body {
   .text-ocean-500 { color: #7a90b2 !important; }
   .border-ocean-500 { border-color: #7a90b2 !important; }
 
+  .bg-ocean-900 { background-color: #3a4654 !important; }
+  .text-ocean-900 { color: #3a4654 !important; }
+  .border-ocean-900 { border-color: #3a4654 !important; }
+
+  .text-ocean-800 { color: #4a5867 !important; }
+  .border-ocean-800 { border-color: #4a5867 !important; }
+
+  .text-ocean-300 { color: #9bb6d6 !important; }
+  .border-ocean-300 { border-color: #9bb6d6 !important; }
+
+  .border-ocean-200 { border-color: #abc9e8 !important; }
+
   .bg-ocean-50 { background-color: #cbefff !important; }
   .text-ocean-50 { color: #cbefff !important; }
   .border-ocean-50 { border-color: #cbefff !important; }
@@ -280,6 +348,11 @@ body {
   /* Utility text/border fallbacks for theme tokens */
   .text-chorus-primary { color: var(--text-primary) !important; }
   .text-chorus-secondary { color: var(--text-secondary) !important; }
+  .text-chorus-text-primary { color: var(--text-primary) !important; }
+  .text-chorus-text-secondary { color: var(--text-secondary) !important; }
+  .text-chorus-text-tertiary { color: var(--text-tertiary) !important; }
+  .text-chorus-text-subtle { color: var(--text-subtle) !important; }
+  .text-chorus-text-ghost { color: var(--text-ghost) !important; }
   .bg-chorus-primary { background-color: var(--bg-primary) !important; }
   .bg-chorus-white { background-color: var(--bg-secondary) !important; }
   .bg-chorus-warm { background-color: var(--bg-tertiary) !important; }
@@ -301,3 +374,20 @@ body {
 @keyframes slideUp { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } }
 .animate-fade-in { animation: fadeIn 0.6s ease-out; }
 .animate-slide-up { animation: slideUp 0.8s ease-out; }
+
+/* Dark-mode heading contrast: make headings white unless panel overrides apply */
+@layer base {
+  html.dark h1:not(.panel-title),
+  html.dark h2:not(.panel-title),
+  html.dark h3:not(.panel-title),
+  html.dark h4:not(.panel-title),
+  html.dark h5:not(.panel-title),
+  html.dark h6:not(.panel-title) {
+    color: #ffffff !important;
+  }
+}
+
+@layer utilities {
+  html.dark .text-h1, html.dark .text-h2, html.dark .text-h3,
+  html.dark .text-h4, html.dark .text-h5, html.dark .text-h6 { color: #ffffff !important; }
+}

install/config-ui/app/layout.tsx

@@ -14,8 +14,8 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en">
-      <body className="min-h-screen transition-colors duration-200">
+    <html lang="en" className="dark">
+      <body className="min-h-screen bg-chorus-primary transition-colors duration-200">
         <div className="min-h-screen flex flex-col">
           <header className="bg-chorus-primary border-b border-chorus-border-subtle transition-colors duration-200">
             <div className="max-w-7xl mx-auto px-8 py-6">

install/config-ui/app/setup/components/LicenseValidation.tsx

@@ -226,25 +226,25 @@ export default function LicenseValidation({
 
       {/* Validation Result */}
       {validationResult && (
-        <div className={`card ${validationResult.valid ? 'border-green-200 bg-green-50' : 'border-red-200 bg-red-50'}`}>
+        <div className={`panel ${validationResult.valid ? 'panel-success' : 'panel-error'}`}>
           <div className="flex items-start">
             <div className="flex-shrink-0">
               {validationResult.valid ? (
-                <CheckCircleIcon className="h-6 w-6 text-green-500" />
+                <CheckCircleIcon className="h-6 w-6 text-eucalyptus-950 dark:text-eucalyptus-50" />
               ) : (
-                <ExclamationTriangleIcon className="h-6 w-6 text-red-500" />
+                <ExclamationTriangleIcon className="h-6 w-6 text-coral-950 dark:text-coral-50" />
               )}
             </div>
             <div className="ml-3">
-              <h4 className={`text-sm font-medium ${validationResult.valid ? 'text-green-800' : 'text-red-800'}`}>
+              <h4 className={`text-sm font-medium panel-title`}>
                 {validationResult.valid ? 'License Valid' : 'License Invalid'}
               </h4>
-              <p className={`text-sm mt-1 ${validationResult.valid ? 'text-green-700' : 'text-red-700'}`}>
+              <p className={`text-sm mt-1 panel-body`}>
                 {validationResult.message}
               </p>
               
               {validationResult.valid && validationResult.details && (
-                <div className="mt-3 text-sm text-green-700">
+                <div className="mt-3 text-sm panel-body">
                   <p><strong>License Type:</strong> {validationResult.details.licenseType || 'Standard'}</p>
                   <p><strong>Max Nodes:</strong> {validationResult.details.maxNodes || 'Unlimited'}</p>
                   <p><strong>Expires:</strong> {validationResult.details.expiresAt || 'Never'}</p>
@@ -262,18 +262,18 @@ export default function LicenseValidation({
         </div>
       )}
 
-      {/* License Information */}
-      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+      {/* Need a License Panel */}
+      <div className="rounded-lg p-4 border bg-chorus-warm border-chorus-border-subtle dark:bg-mulberry-900 dark:border-chorus-border-defined">
         <div className="flex items-start">
-          <DocumentTextIcon className="h-5 w-5 text-blue-500 mt-0.5 mr-2" />
+          <DocumentTextIcon className="h-5 w-5 text-chorus-text-primary mt-0.5 mr-2 opacity-80" />
           <div className="text-sm">
-            <h4 className="font-medium text-blue-800 mb-1">Need a License?</h4>
-            <p className="text-blue-700">
+            <h4 className="font-medium text-chorus-text-primary mb-1">Need a License?</h4>
+            <p className="text-chorus-text-secondary">
               If you don't have a CHORUS:agents license yet, you can:
             </p>
-            <ul className="text-blue-700 mt-1 space-y-1 ml-4">
-              <li>• Visit <a href="https://chorus.services/bzzz" target="_blank" className="underline hover:no-underline">chorus.services/bzzz</a> to purchase a license</li>
-              <li>• Contact our sales team at <a href="mailto:sales@chorus.services" className="underline hover:no-underline">sales@chorus.services</a></li>
+            <ul className="text-chorus-text-secondary mt-1 space-y-1 ml-4">
+              <li>• Visit <a href="https://chorus.services/bzzz" target="_blank" className="underline hover:no-underline text-chorus-text-primary">chorus.services/bzzz</a> to purchase a license</li>
+              <li>• Contact our sales team at <a href="mailto:sales@chorus.services" className="underline hover:no-underline text-chorus-text-primary">sales@chorus.services</a></li>
               <li>• Request a trial license for evaluation purposes</li>
             </ul>
           </div>
@@ -298,4 +298,4 @@ export default function LicenseValidation({
       </div>
     </form>
   )
-}
+}

install/config-ui/app/setup/components/TermsAndConditions.tsx

@@ -48,19 +48,19 @@ export default function TermsAndConditions({
       {/* Terms and Conditions Content */}
       <div className="card">
         <div className="flex items-center mb-4">
-          <DocumentTextIcon className="h-6 w-6 text-bzzz-primary mr-2" />
-          <h3 className="text-lg font-medium text-gray-900">CHORUS:agents Software License Agreement</h3>
+          <DocumentTextIcon className="h-6 w-6 text-ocean-500 mr-2" />
+          <h3 className="text-lg font-medium text-chorus-text-primary">CHORUS:agents Software License Agreement</h3>
         </div>
 
-        <div className="bg-gray-50 border border-gray-200 rounded-lg p-6 max-h-96 overflow-y-auto">
-          <div className="prose prose-sm max-w-none text-gray-700">
-            <h4 className="text-base font-semibold text-gray-900 mb-3">1. License Grant</h4>
+        <div className="bg-chorus-warm border border-chorus-border-subtle rounded-lg p-6 max-h-96 overflow-y-auto">
+          <div className="prose prose-sm max-w-none text-chorus-text-secondary">
+            <h4 className="text-base font-semibold text-chorus-text-primary mb-3">1. License Grant</h4>
             <p className="mb-4">
               Subject to the terms and conditions of this Agreement, Chorus Services grants you a non-exclusive, 
               non-transferable license to use CHORUS:agents (the "Software") for distributed AI coordination and task management.
             </p>
 
-            <h4 className="text-base font-semibold text-gray-900 mb-3">2. Permitted Uses</h4>
+            <h4 className="text-base font-semibold text-chorus-text-primary mb-3">2. Permitted Uses</h4>
             <ul className="list-disc list-inside mb-4 space-y-1">
               <li>Install and operate CHORUS:agents on your infrastructure</li>
               <li>Configure cluster nodes for distributed processing</li>
@@ -68,7 +68,7 @@ export default function TermsAndConditions({
               <li>Use for commercial and non-commercial purposes</li>
             </ul>
 
-            <h4 className="text-base font-semibold text-gray-900 mb-3">3. Restrictions</h4>
+            <h4 className="text-base font-semibold text-chorus-text-primary mb-3">3. Restrictions</h4>
             <ul className="list-disc list-inside mb-4 space-y-1">
               <li>You may not redistribute, sublicense, or sell the Software</li>
               <li>You may not reverse engineer or decompile the Software</li>
@@ -76,42 +76,42 @@ export default function TermsAndConditions({
               <li>You may not remove or modify proprietary notices</li>
             </ul>
 
-            <h4 className="text-base font-semibold text-gray-900 mb-3">4. Data Privacy</h4>
+            <h4 className="text-base font-semibold text-chorus-text-primary mb-3">4. Data Privacy</h4>
             <p className="mb-4">
               CHORUS:agents processes data locally on your infrastructure. Chorus Services does not collect or store 
               your operational data. Telemetry data may be collected for software improvement purposes.
             </p>
 
-            <h4 className="text-base font-semibold text-gray-900 mb-3">5. Support and Updates</h4>
+            <h4 className="text-base font-semibold text-chorus-text-primary mb-3">5. Support and Updates</h4>
             <p className="mb-4">
               Licensed users receive access to software updates, security patches, and community support. 
               Premium support tiers are available separately.
             </p>
 
-            <h4 className="text-base font-semibold text-gray-900 mb-3">6. Disclaimer of Warranty</h4>
+            <h4 className="text-base font-semibold text-chorus-text-primary mb-3">6. Disclaimer of Warranty</h4>
             <p className="mb-4">
               THE SOFTWARE IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND. CHORUS SERVICES DISCLAIMS 
               ALL WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WARRANTIES OF MERCHANTABILITY AND FITNESS 
               FOR A PARTICULAR PURPOSE.
             </p>
 
-            <h4 className="text-base font-semibold text-gray-900 mb-3">7. Limitation of Liability</h4>
+            <h4 className="text-base font-semibold text-chorus-text-primary mb-3">7. Limitation of Liability</h4>
             <p className="mb-4">
               IN NO EVENT SHALL CHORUS SERVICES BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL, 
               OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OF THE SOFTWARE.
             </p>
 
-            <h4 className="text-base font-semibold text-gray-900 mb-3">8. Termination</h4>
+            <h4 className="text-base font-semibold text-chorus-text-primary mb-3">8. Termination</h4>
             <p className="mb-4">
               This license is effective until terminated. You may terminate it at any time by 
               uninstalling the Software. Chorus Services may terminate this license if you 
               violate any terms of this Agreement.
             </p>
 
-            <div className="bg-blue-50 border-l-4 border-blue-400 p-4 mt-6">
+            <div className="panel panel-info mt-6">
               <div className="flex">
-                <ExclamationTriangleIcon className="h-5 w-5 text-blue-500 mt-0.5 mr-2" />
-                <div className="text-sm text-blue-700">
+                <ExclamationTriangleIcon className="h-5 w-5 text-ocean-600 dark:text-ocean-300 mt-0.5 mr-2" />
+                <div className="text-sm panel-body">
                   <p><strong>Contact Information:</strong></p>
                   <p>Chorus Services<br />
                   Email: legal@chorus.services<br />
@@ -131,13 +131,13 @@ export default function TermsAndConditions({
               type="checkbox"
               checked={agreed}
               onChange={(e) => setAgreed(e.target.checked)}
-              className="mt-1 mr-3 h-4 w-4 text-bzzz-primary border-gray-300 rounded focus:ring-bzzz-primary"
+              className="mt-1 mr-3 h-4 w-4 text-ocean-600 border-chorus-border-defined rounded focus:ring-ocean-600"
             />
             <div className="text-sm">
-              <span className="font-medium text-gray-900">
+              <span className="font-medium text-chorus-text-primary">
                 I have read and agree to the Terms and Conditions
               </span>
-              <p className="text-gray-600 mt-1">
+              <p className="text-chorus-text-secondary mt-1">
                 By checking this box, you acknowledge that you have read, understood, and agree to be 
                 bound by the terms and conditions outlined above.
               </p>
@@ -160,7 +160,7 @@ export default function TermsAndConditions({
         </div>
       </div>
 
-      <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 type="button" onClick={onBack} className="btn-outline">
@@ -171,11 +171,11 @@ export default function TermsAndConditions({
         <button 
           type="submit" 
           disabled={!agreed}
-          className={`${agreed ? 'btn-primary' : 'btn-disabled'}`}
+          className="btn-primary"
         >
 {isCompleted ? 'Continue' : 'Next: License Validation'}
         </button>
       </div>
     </form>
   )
-}
+}

install/config-ui/app/setup/page.tsx

@@ -191,21 +191,21 @@ export default function SetupPage() {
         </p>
       </div>
 
-      {/* Resume Setup Notification */}
+      {/* Resume Setup Notification (Info Panel) */}
       {isResuming && (
-        <div className="mb-8 bg-chorus-warm border border-chorus-border-defined rounded-lg p-6">
+        <div className="mb-8 panel panel-info 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-chorus-secondary mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="h-5 w-5 text-ocean-600 dark:text-ocean-300 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-chorus-secondary">
+                <h3 className="text-sm font-medium panel-title">
                   Setup Progress Restored
                 </h3>
-                <p className="text-small text-gray-300 mt-1">
+                <p className="text-small panel-body 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>
@@ -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-ocean-700">
+          <div className="card sticky top-8 bg-chorus-white dark:bg-ocean-700">
             <h2 className="heading-subsection mb-6">
               Setup Progress
             </h2>