Appendix C: Session Log - T20 Multi-Agent System

Appendix C: Full Example Session Log

This appendix provides a detailed, annotated example of a T20 system run. It illustrates the end-to-end process, from receiving a user's goal to the final agent outputs, highlighting the core concepts of dynamic planning, contextual collaboration, and traceability.

Example Scenario: Create a Minimalist Landing Page

Initial High-Level Goal:

Design and create the HTML and CSS for a modern, minimalist landing page for a new SaaS product called 'Innovate'.

T20 System Execution:

Step 0: Initialization and Planning

Action: User executes t20-cli "Design and create... 'Innovate'."
System Response: T20 creates a session directory (e.g., sessions/session_abc123...).

Artifact: initial_plan.json

The Orchestrator (Meta-AI) generates a plan. This plan exemplifies dynamic planning, breaking down the goal into logical steps:


{
  "plan": [
    {
      "step": 0,
      "agent": "Lyra",
      "task": "Refine system prompts for Designer and Engineer to emphasize 'modern minimalist' aesthetic.",
      "prompt_refinement_needed": true
    },
    {
      "step": 1,
      "agent": "Aurora",
      "task": "Generate a color palette, typography suggestions, and a layout description for the landing page, focusing on minimalist principles.",
      "depends_on": [0]
    },
    {
      "step": 2,
      "agent": "Kodax",
      "task": "Write the complete HTML and CSS code based on the design specifications from Aurora.",
      "depends_on": [1]
    }
  ]
}

(Note: This is a simplified representation. The actual plan might be more detailed.)

Step 1: Prompt Refinement (`Lyra`)

Action: Orchestrator delegates Step 0 to Lyra.
Lyra's Task: Refine prompts for Aurora and Kodax, emphasizing "modern minimalist".

Artifact: 0__step_0_Lyra_result.txt

Lyra might output confirmation or the refined prompts themselves. Example output:


Refined prompt for Aurora:
"Act as a UI/UX designer. Create a design concept for a minimalist landing page for 'Innovate' SaaS. Focus on clean lines, ample whitespace, a sophisticated yet simple color palette (e.g., muted tones with a single accent color), and elegant typography. Provide a layout description and color suggestions."

Refined prompt for Kodax:
"Act as a front-end engineer. Implement the provided design specifications into clean, semantic HTML5 and modern CSS3. Ensure the code is well-structured, responsive, and adheres strictly to minimalist design principles."

Step 2: Design Generation (`Aurora`)

Action: Orchestrator delegates Step 1 to Aurora, using the refined prompt.
Aurora's Task: Generate design specifications.

Artifact: 1__step_1_Aurora_result.md

This artifact contains the design output, demonstrating contextual collaboration as it uses the refined prompt.


# Design Specifications for 'Innovate' Landing Page

## Aesthetic:
Modern Minimalist

## Color Palette:
*   Primary: #FFFFFF (White)
*   Secondary: #F8F8F8 (Light Gray)
*   Accent: #4A90E2 (Calm Blue)
*   Text: #333333 (Dark Gray)

## Typography:
*   Headings: 'Poppins', sans-serif (modern, clean)
*   Body Text: 'Lato', sans-serif (readable, friendly)

## Layout:
*   Single-page layout.
*   Hero section with a clear value proposition and a call-to-action button.
*   Minimal sections (e.g., Features, About).
*   Responsive design adhering to mobile-first principles.
*   Generous use of whitespace.

Step 3: Code Implementation (`Kodax`)

Action: Orchestrator delegates Step 2 to Kodax, passing Aurora's design specifications.
Kodax's Task: Write HTML and CSS code based on the design.

Artifacts: landing_page.html and styles.css

These files contain the generated code, directly resulting from the previous step's output (Aurora's design). This showcases the end-to-end flow.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Innovate - SaaS Landing Page</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Lato&family=Poppins:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <div class="container"
            <h1>Innovate</h1>
            <nav>
                <!-- Navigation -->
            </nav>
        </div>
    </header>
    <main>
        <!-- Hero Section -->
        <section class="hero"
            <div class="container"
                <h2>Revolutionize Your Workflow</h2>
                <p>The future of productivity, simplified.</p>
                <button class="cta-button">Get Started</button>
            </div>
        </section>
        <!-- Other Sections -->
    </main>
    <footer>
        <!-- Footer Content -->
    </footer>
</body>
</html>

/* styles.css */
body { margin: 0; font-family: 'Lato', sans-serif; color: #333; }
.container { width: 90%; max-width: 1100px; margin: 0 auto; }

header { background-color: #FFFFFF; padding: 1rem 0; border-bottom: 1px solid #F8F8F8; }
header h1 { font-family: 'Poppins', sans-serif; font-weight: 600; margin: 0; }

.hero { background-color: #FFFFFF; text-align: center; padding: 4rem 0; }
.hero h2 { font-family: 'Poppins', sans-serif; font-size: 2.5rem; margin-bottom: 1rem; color: #4A90E2; }
.hero p { font-size: 1.1rem; margin-bottom: 2rem; }
.cta-button { background-color: #4A90E2; color: white; padding: 0.8rem 1.5rem; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; }

/* Add more styles for responsiveness and other sections */

Traceability and Logging:

Throughout this process, the T20 system maintains detailed logs within the session directory (sessions/session_abc123...). These logs record:

The initial goal.
The generated initial_plan.json.
The specific prompts sent to each agent (Lyra, Aurora, Kodax).
The outputs (artifacts) generated by each agent.
Any system-level execution messages or errors.

This comprehensive logging ensures full traceability, allowing you to review every step of the agent team's operation.