claude-code-glm-suite/docs/coordination-system-pro.html

<!-- AGENT COORDINATION SYSTEM EXPLANATION -->
<div style="margin: 60px 0; border-radius: 20px; overflow: hidden; border: 2px solid #e2e8f0; background: #ffffff">

  <!-- Header -->
  <div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 40px 32px; text-align: center">
    <div style="display: inline-flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.2); padding: 10px 24px; border-radius: 50px; margin-bottom: 20px">
      <span style="font-size: 24px">🤖</span>
      <span style="color: #fff; font-weight: 600; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase">Intelligent Agent Coordination</span>
    </div>
    <h2 style="margin: 0; color: #fff; font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -0.02em">How 38 Agents Work Together</h2>
    <p style="margin: 16px 0 0 0; color: rgba(255,255,255,0.9); font-size: clamp(16px, 2vw, 19px); max-width: 600px; margin-left: auto; margin-right: auto">
      7 coordinators automatically orchestrate 31 specialists for seamless workflow automation
    </p>
  </div>

  <!-- Content -->
  <div style="padding: 48px 32px">

    <!-- Architecture Overview -->
    <div style="margin-bottom: 56px">
      <h3 style="margin: 0 0 24px 0; font-size: 22px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 12px">
        <span style="font-size: 28px">🏗️</span>
        <span>Architecture Overview</span>
      </h3>

      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px">

        <!-- PROACTIVELY Agents -->
        <div style="background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); padding: 28px; border-radius: 16px; border: 2px solid #f59e0b">
          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px">
            <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px">🎯</div>
            <div>
              <div style="font-size: 32px; font-weight: 800; color: #92400e; line-height: 1">7</div>
              <div style="font-size: 13px; font-weight: 600; color: #92400e; text-transform: uppercase; letter-spacing: 0.5px">Coordinators</div>
            </div>
          </div>
          <p style="margin: 0; font-size: 15px; color: #78350f; line-height: 1.6">
            <strong>PROACTIVELY agents</strong> that auto-trigger based on context and coordinate specialists
          </p>
          <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(146, 64, 14, 0.2); font-size: 13px; color: #92400e">
            <strong>Auto-trigger on:</strong> Design work, code changes, launches, experiments, multi-agent tasks
          </div>
        </div>

        <!-- Specialist Agents -->
        <div style="background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); padding: 28px; border-radius: 16px; border: 2px solid #86efac">
          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px">
            <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px">⚡</div>
            <div>
              <div style="font-size: 32px; font-weight: 800; color: #065f46; line-height: 1">31</div>
              <div style="font-size: 13px; font-weight: 600; color: #065f46; text-transform: uppercase; letter-spacing: 0.5px">Specialists</div>
            </div>
          </div>
          <p style="margin: 0; font-size: 15px; color: #064e3b; line-height: 1.6">
            <strong>Domain experts</strong> that execute specific tasks when called by coordinators or users
          </p>
          <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(5, 150, 105, 0.2); font-size: 13px; color: #065f46">
            <strong>Invoke for:</strong> Engineering, design, marketing, product, testing, operations
          </div>
        </div>

      </div>
    </div>

    <!-- Two Pathways -->
    <div style="margin-bottom: 56px">
      <h3 style="margin: 0 0 24px 0; font-size: 22px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 12px">
        <span style="font-size: 28px">🔄</span>
        <span>Two Pathways, Perfect Control</span>
      </h3>

      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px">

        <!-- Pathway 1: Automatic -->
        <div style="background: #fff; padding: 32px 28px; border-radius: 16px; border: 2px solid #e2e8f0; position: relative">
          <div style="position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%); border-radius: 16px 16px 0 0"></div>
          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px">
            <span style="font-size: 36px">🚀</span>
            <div>
              <div style="font-size: 18px; font-weight: 700; color: #1e293b">Automatic</div>
              <div style="font-size: 13px; color: #64748b; font-weight: 500">Let coordinators handle it</div>
            </div>
          </div>
          <div style="font-size: 14px; color: #475569; line-height: 1.7; margin-bottom: 20px">
            Coordinators auto-trigger based on context, call specialists as needed, coordinate multi-agent workflows
          </div>
          <div style="background: #f8fafc; padding: 16px; border-radius: 12px; border: 1px solid #e2e8f0">
            <div style="font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px">Example</div>
            <div style="font-size: 13px; color: #475569; font-family: 'Monaco', monospace">
              "I need a payment system"<br>
              <span style="color: #8b5cf6">→ ui-ux-pro-max auto-triggers</span><br>
              <span style="color: #8b5cf6">→ backend-architect called</span><br>
              <span style="color: #8b5cf6">→ test-writer-fixer ensures quality</span>
            </div>
          </div>
        </div>

        <!-- Pathway 2: Direct -->
        <div style="background: #fff; padding: 32px 28px; border-radius: 16px; border: 2px solid #e2e8f0; position: relative">
          <div style="position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #2dd4bf 0%, #14b8a6 100%); border-radius: 16px 16px 0 0"></div>
          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px">
            <span style="font-size: 36px">🎮</span>
            <div>
              <div style="font-size: 18px; font-weight: 700; color: #1e293b">Direct Control</div>
              <div style="font-size: 13px; color: #64748b; font-weight: 500">You choose the specialist</div>
            </div>
          </div>
          <div style="font-size: 14px; color: #475569; line-height: 1.7; margin-bottom: 20px">
            Manually invoke any specialist agent for precise control over specific tasks
          </div>
          <div style="background: #f8fafc; padding: 16px; border-radius: 12px; border: 1px solid #e2e8f0">
            <div style="font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px">Example</div>
            <div style="font-size: 13px; color: #475569; font-family: 'Monaco', monospace">
              "Use frontend-developer"<br>
              <span style="color: #2dd4bf">→ You're in control</span><br>
              <span style="color: #2dd4bf">→ Direct specialist access</span><br>
              <span style="color: #2dd4bf">→ Precise task execution</span>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- The 7 Coordinators -->
    <div>
      <h3 style="margin: 0 0 24px 0; font-size: 22px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 12px">
        <span style="font-size: 28px">🎯</span>
        <span>The 7 PROACTIVELY Coordinators</span>
      </h3>

      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px">

        <!-- ui-ux-pro-max -->
        <div style="background: #fff; padding: 24px; border-radius: 14px; border: 2px solid #e2e8f0; border-left: 4px solid #f59e0b">
          <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px">
            <span style="font-size: 28px">🎨</span>
            <div style="flex: 1">
              <div style="font-size: 16px; font-weight: 700; color: #1e293b">ui-ux-pro-max</div>
              <div style="font-size: 12px; color: #64748b">Design Department</div>
            </div>
            <span style="background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px">PROACTIVELY</span>
          </div>
          <p style="margin: 0 0 12px 0; font-size: 14px; color: #475569; line-height: 1.6">
            Professional UI/UX design with 50+ styles, 97 color palettes, WCAG accessibility
          </p>
          <div style="font-size: 12px; color: #64748b; font-weight: 500">Triggers on: "design", "UI", "component", "page", "dashboard"</div>
        </div>

        <!-- test-writer-fixer -->
        <div style="background: #fff; padding: 24px; border-radius: 14px; border: 2px solid #e2e8f0; border-left: 4px solid #06b6d4">
          <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px">
            <span style="font-size: 28px">🧪</span>
            <div style="flex: 1">
              <div style="font-size: 16px; font-weight: 700; color: #1e293b">test-writer-fixer</div>
              <div style="font-size: 12px; color: #64748b">Engineering Department</div>
            </div>
            <span style="background: #cffafe; color: #0e7490; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px">PROACTIVELY</span>
          </div>
          <p style="margin: 0 0 12px 0; font-size: 14px; color: #475569; line-height: 1.6">
            Comprehensive test coverage, automated test writing, failure analysis and repair
          </p>
          <div style="font-size: 12px; color: #64748b; font-weight: 500">Triggers after: code modifications, refactoring, bug fixes</div>
        </div>

        <!-- whimsy-injector -->
        <div style="background: #fff; padding: 24px; border-radius: 14px; border: 2px solid #e2e8f0; border-left: 4px solid #f472b6">
          <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px">
            <span style="font-size: 28px">✨</span>
            <div style="flex: 1">
              <div style="font-size: 16px; font-weight: 700; color: #1e293b">whimsy-injector</div>
              <div style="font-size: 12px; color: #64748b">Design Department</div>
            </div>
            <span style="background: #fce7f3; color: #9d174d; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px">PROACTIVELY</span>
          </div>
          <p style="margin: 0 0 12px 0; font-size: 14px; color: #475569; line-height: 1.6">
            Delightful micro-interactions, memorable moments, playful animations
          </p>
          <div style="font-size: 12px; color: #64748b; font-weight: 500">Triggers after: UI/UX changes, new components, feature completion</div>
        </div>

        <!-- studio-coach -->
        <div style="background: #fff; padding: 24px; border-radius: 14px; border: 2px solid #e2e8f0; border-left: 4px solid #fbbf24">
          <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px">
            <span style="font-size: 28px">🏆</span>
            <div style="flex: 1">
              <div style="font-size: 16px; font-weight: 700; color: #1e293b">studio-coach</div>
              <div style="font-size: 12px; color: #64748b">Bonus Department</div>
            </div>
            <span style="background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px">PROACTIVELY</span>
          </div>
          <p style="margin: 0 0 12px 0; font-size: 14px; color: #475569; line-height: 1.6">
            Elite performance coach for complex multi-agent tasks and team coordination
          </p>
          <div style="font-size: 12px; color: #64748b; font-weight: 500">Triggers on: complex projects, multi-agent tasks, agent confusion</div>
        </div>

        <!-- experiment-tracker -->
        <div style="background: #fff; padding: 24px; border-radius: 14px; border: 2px solid #e2e8f0; border-left: 4px solid #3b82f6">
          <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px">
            <span style="font-size: 28px">📊</span>
            <div style="flex: 1">
              <div style="font-size: 16px; font-weight: 700; color: #1e293b">experiment-tracker</div>
              <div style="font-size: 12px; color: #64748b">Project Management</div>
            </div>
            <span style="background: #dbeafe; color: #1e40af; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px">PROACTIVELY</span>
          </div>
          <p style="margin: 0 0 12px 0; font-size: 14px; color: #475569; line-height: 1.6">
            A/B test tracking, experiment metrics, feature flag monitoring
          </p>
          <div style="font-size: 12px; color: #64748b; font-weight: 500">Triggers on: feature flags, experiments, A/B tests, product decisions</div>
        </div>

        <!-- studio-producer -->
        <div style="background: #fff; padding: 24px; border-radius: 14px; border: 2px solid #e2e8f0; border-left: 4px solid #10b981">
          <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px">
            <span style="font-size: 28px">🎬</span>
            <div style="flex: 1">
              <div style="font-size: 16px; font-weight: 700; color: #1e293b">studio-producer</div>
              <div style="font-size: 12px; color: #64748b">Project Management</div>
            </div>
            <span style="background: #d1fae5; color: #065f46; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px">PROACTIVELY</span>
          </div>
          <p style="margin: 0 0 12px 0; font-size: 14px; color: #475569; line-height: 1.6">
            Cross-team coordination, resource allocation, workflow optimization
          </p>
          <div style="font-size: 12px; color: #64748b; font-weight: 500">Triggers on: team collaboration, resource conflicts, workflow issues</div>
        </div>

        <!-- project-shipper -->
        <div style="background: #fff; padding: 24px; border-radius: 14px; border: 2px solid #e2e8f0; border-left: 4px solid #8b5cf6">
          <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px">
            <span style="font-size: 28px">🚀</span>
            <div style="flex: 1">
              <div style="font-size: 16px; font-weight: 700; color: #1e293b">project-shipper</div>
              <div style="font-size: 12px; color: #64748b">Project Management</div>
            </div>
            <span style="background: #ede9fe; color: #5b21b6; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px">PROACTIVELY</span>
          </div>
          <p style="margin: 0 0 12px 0; font-size: 14px; color: #475569; line-height: 1.6">
            Launch coordination, release management, go-to-market strategy
          </p>
          <div style="font-size: 12px; color: #64748b; font-weight: 500">Triggers on: releases, launches, go-to-market, shipping milestones</div>
        </div>

      </div>
    </div>

  </div>

</div>
<!-- END AGENT COORDINATION SYSTEM EXPLANATION -->