📅 Created: 2026-07-05🔄 Last Updated: 2026-07-05⏱️ 3 min read

Case Study: Multi-Agent Collaboration & Fallback Mechanics

This case study analyzes the collaborative engineering workflow used to overhaul the mobile responsiveness, aesthetic details, and interactive tooling of the QE Strategy Docs portal.

1. Project Overview

The objective was to transform a static, desktop-oriented quality engineering blueprints portal into a highly polished, mobile-responsive, and interactive portal.

The Target Scope

  1. Mobile UX Overhaul: Implement single-row sticky navigation, full-screen search overlays, 2x2 stats grids, tabbed login controls, glassmorphic floating buttons, and scrollable data tables.
  2. Interactive Mermaid Editor: Create a browser-based diagram editor with templates, SVG rendering, clipboard exports, and server-side JSON database storage.
  3. Security Hardening: Remediate cookie-spoofing and stored Cross-Site Scripting (XSS) vectors.

2. Multi-Agent Team Architecture

The project utilized a multi-agent team structure collaborating dynamically with a human-in-the-loop (the User) to govern design decisions.

Multi-Agent Team Architecture

Roles and Responsibilities

  • Human-in-the-Loop: Governed scope, selected feature options via interactive /grill-me interviews, and verified layout changes through Playwright browser viewports.
  • Lead AI Assistant (Orchestrator Liaison): Translated user requests, constructed implementation checklists, drafted project specifications, and managed fallback execution.
  • Sentinel Agent: Monitored the overall health of the multi-agent track, scheduled crons, and verified state consistency.
  • Project Orchestrator: Managed parallel tracks for verification (Track A) and coding (Track B).
  • E2E Testing Orchestrator: Authored independent Playwright tests verifying expected API outputs and login selectors.
  • Implementation Orchestrator: Created backend storage classes, mutex files, and stubbed API routes.

3. The Fallback Event & Resilience

During Phase 5 (Mermaid Editor integration), the multi-agent orchestration tracks encountered a strict API quota limitation:

RESOURCE_EXHAUSTED (code 429): Individual quota reached.

Fallback Sequence Diagram

Fallback Execution Details

  1. Orchestrator Adoption: The Sentinel attempted to recover by spawning a successor orchestrator, but due to persistent quota blocks, execution halted.
  2. Direct Takeover: The Lead Assistant immediately adopted the stubs created by the subagents, coded the frontend React workspace (pages/editor.tsx & styles/Editor.module.css), wired it to the global navigation layout, and compiled the production build.
  3. Execution Safety: The subagent processes were explicitly terminated (killed) to prevent background processes from conflicting with the finished fallback code.

4. Human-in-the-Loop Design Alignment

Major milestones were guided by the user using gated approvals:

  • Design Decisions: The User resolved layout options (like picking mobile tabs over drawers) via interactive multiple-choice modals (ask_question).
  • Interactive Tooltip: Selected the recommended popover mechanism explaining daily updates when clicking "Updated Daily" rather than adding modal overlays.
  • Prompt Scoping: Governed the exact requirements and acceptance criteria in prompt_draft.md before launching the agent team.

5. Security Iteration (Threat Modeling)

A post-implementation security review revealed critical bugs that were immediately patched:

  • Insecure Plaintext Cookie Check: We replaced spoofable plaintext role checks with cryptographic server-side validation of the HttpOnly JWT token cookie using jose.
  • Mermaid Rendering XSS Injection: Configured client-side Mermaid compilation to securityLevel: 'strict', escaping any raw HTML embedded inside node labels.
  • Access Isolation Violations: Updated API routes to store creator IDs (createdBy) and returned 403 Forbidden if unprivileged users attempted to delete or write over blueprints they did not author.

6. Project Outcomes

  • Zero TypeScript/Next.js Compile Warnings: Completed builds verified natively.
  • Robust Test Coverage: 12 independent Playwright tests verifying API inputs, database persistence, and session security boundaries passed successfully.
  • Version Control Cleanliness: Commits staged and pushed to Git, leaving a clean working tree with test-results and data caches correctly ignored in .gitignore.

💡 You Might Also Like