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>
2025-08-29 14:10:13 +10:00
parent 92779523c0
commit ec81dc9ddc
25 changed files with 368 additions and 48 deletions
--- a/install/config-ui/app/components/ThemeToggle.tsx
+++ b/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>
  )
-}
+}
--- a/install/config-ui/app/globals.css
+++ b/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; }
+}
--- a/install/config-ui/app/layout.tsx
+++ b/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">
--- a/install/config-ui/app/setup/components/LicenseValidation.tsx
+++ b/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>
  )
-}
+}
--- a/install/config-ui/app/setup/components/TermsAndConditions.tsx
+++ b/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>
  )
-}
+}
--- a/install/config-ui/app/setup/page.tsx
+++ b/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>