<turbo-stream action="update" target="modal_container"><template>
  <div data-controller="agent-modal"
     data-agent-modal-current-tab-value="overview"
     class="hidden fixed inset-0 z-50">

  <!-- Backdrop -->
  <div data-action="click->agent-modal#close"
       data-agent-modal-target="backdrop"
       class="fixed inset-0 bg-black/70 transition-opacity duration-200 opacity-0 backdrop-blur-sm"></div>

  <!-- Modal -->
  <div class="fixed inset-0 overflow-y-auto">
    <div class="flex min-h-full items-center justify-center p-4 sm:p-6">
      <div data-agent-modal-target="modal"
           class="modal-content relative w-full max-w-[90vw] transform transition-all duration-200 opacity-0 scale-95">

        <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 h-[90vh] flex flex-col">

          <!-- Header with Tabs -->
          <div class="flex-shrink-0 border-b border-gray-200 dark:border-gray-700">
            <!-- Title and Close -->
            <div class="flex items-center justify-between px-6 py-4">
              <div>
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white">TDD Workflow Agent</h2>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                  by <a class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors" data-turbo-frame="_top" href="/authors/0199c65d-fb71-77fb-a296-59ef21fceae1">wshobson/agents</a>
                </p>
              </div>
              <button type="button"
                      data-action="click->agent-modal#close"
                      class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            <!-- Action Buttons -->
            <div class="px-6 pb-4 flex flex-wrap items-center gap-3">

              <a data-turbo-frame="_top" class="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" href="/agents/tdd-workflow-agent">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                </svg>
                View Full Page
</a>            </div>

            <!-- Tabs -->
            <div class="px-6">
              <nav class="flex gap-1 overflow-x-auto" aria-label="Tabs">
                <button type="button"
                        data-action="click->agent-modal#switchTab"
                        data-tab="overview"
                        data-agent-modal-target="tab"
                        class="px-4 py-2 text-sm font-medium rounded-t-lg whitespace-nowrap transition-colors border-b-2 border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:border-gray-300 dark:hover:border-gray-600 [&[data-active]]:text-amber-600 [&[data-active]]:dark:text-amber-400 [&[data-active]]:border-amber-600 [&[data-active]]:dark:border-amber-400 outline-none focus:outline-none active:outline-none">
                  Overview
                </button>

                  <button type="button"
                          data-action="click->agent-modal#switchTab"
                          data-tab="0199c678-ba11-7045-ba73-aaf855ca7418"
                          data-agent-modal-target="tab"
                          class="px-4 py-2 text-sm font-medium rounded-t-lg whitespace-nowrap transition-colors border-b-2 border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:border-gray-300 dark:hover:border-gray-600 [&[data-active]]:text-amber-600 [&[data-active]]:dark:text-amber-400 [&[data-active]]:border-amber-600 [&[data-active]]:dark:border-amber-400 outline-none focus:outline-none active:outline-none">
                    <div class="flex items-center gap-2"><img alt="Claude" class="w-4 h-4" loading="lazy" src="/assets/claude-7b230d75.svg" /><span class="">Claude</span></div>
                  </button>
              </nav>
            </div>
          </div>

          <!-- Tab Content -->
          <div class="flex-1 overflow-hidden">
            <!-- Overview Tab -->
            <div data-agent-modal-target="tabContent"
                 data-tab="overview"
                 class="hidden h-full overflow-y-auto p-6">
              <div class="space-y-6">
  <div>
    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Description</h3>
    <div class="text-gray-600 dark:text-gray-400 leading-relaxed">
      <div class="lexxy-content">
  <p>An agent that orchestrates and enforces Test-Driven Development workflows with strict red-green-refactor discipline</p>
</div>

    </div>
  </div>

  <div>
    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Available Platforms</h3>
    <div class="flex flex-wrap gap-2">
        <span class="inline-flex items-center gap-1.5 px-3 py-1 text-sm bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-md">
            <img class="w-4 h-4" alt="Claude" src="/assets/claude-7b230d75.svg" />
          claude
        </span>
    </div>
  </div>

</div>

            </div>

            <!-- Platform Implementation Tabs -->
              <div data-agent-modal-target="tabContent"
                   data-tab="0199c678-ba11-7045-ba73-aaf855ca7418"
                   class="hidden h-full">
                <div class="h-full flex flex-col lg:flex-row">
                  <!-- Sidebar (30%) -->
                  <div class="lg:w-[30%] border-b lg:border-b-0 lg:border-r border-gray-200 dark:border-gray-700 p-6 lg:overflow-y-auto">
                    <div class="flex items-center justify-between mb-4">
                      <div class="flex items-center gap-2"><img alt="Claude" class="w-8 h-8" loading="lazy" src="/assets/claude-7b230d75.svg" /><span class="text-xl font-semibold">Claude</span></div>

                      <!-- Quick Actions -->
                      <div class="flex items-center gap-1">
                        
  <button data-controller="download"
          data-download-url-value="/implementations/0199c678-ba11-7045-ba73-aaf855ca7418/download"
          data-download-implementation-id-value="0199c678-ba11-7045-ba73-aaf855ca7418"
          data-download-agent-id-value="0199c678-b9ee-7de9-afed-b248c4097496"
          data-action="click->download#handleClick"
          class="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors group"
          title="Download">
    <svg class="w-5 h-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
    </svg>
  </button>


                      </div>
                    </div>

                    <div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-6">
                      <span>Version 1.0.1</span>
                        <span class="text-gray-300 dark:text-gray-700">•</span>
                        <span class="inline-flex items-center gap-1" title="MIT License">
                          <img class="w-3 h-3 text-gray-600 dark:text-gray-400" alt="MIT" src="/assets/mit_license-736a4952.svg" />
                          <span class="text-xs">MIT</span>
                        </span>
                    </div>


                    <!-- Copy Button -->
                    <button type="button"
                            data-action="click->agent-modal#copyCode"
                            data-implementation-id="0199c678-ba11-7045-ba73-aaf855ca7418"
                            class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 bg-gray-900 dark:bg-gray-700 text-white rounded-lg hover:bg-gray-800 dark:hover:bg-gray-600 transition-colors [&[data-copied]]:!bg-green-600 [&[data-copied]]:dark:!bg-green-500 mb-3">
                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
                      </svg>
                      <span>Copy to Clipboard</span>
                    </button>

                    <!-- Download Button -->
                    
  <button data-controller="download"
          data-download-url-value="/implementations/0199c678-ba11-7045-ba73-aaf855ca7418/download"
          data-download-implementation-id-value="0199c678-ba11-7045-ba73-aaf855ca7418"
          data-download-agent-id-value="0199c678-b9ee-7de9-afed-b248c4097496"
          data-action="click->download#handleClick"
          class="w-full px-4 py-2 bg-amber-600 text-white text-sm rounded-md hover:bg-amber-700 transition-colors text-center font-medium">
    Download
  </button>

                  </div>

                  <!-- Code Content (70%) -->
                  <div class="flex-1 lg:w-[70%] overflow-y-auto p-6 bg-gray-50 dark:bg-gray-900/50">
                    <pre class="text-sm leading-relaxed text-gray-900 dark:text-gray-100 whitespace-pre-wrap font-mono" data-code-content="0199c678-ba11-7045-ba73-aaf855ca7418">---
model: claude-opus-4-1
---

Execute a comprehensive Test-Driven Development (TDD) workflow with strict red-green-refactor discipline:

[Extended thinking: This workflow enforces test-first development through coordinated agent orchestration. Each phase of the TDD cycle is strictly enforced with fail-first verification, incremental implementation, and continuous refactoring. The workflow supports both single test and test suite approaches with configurable coverage thresholds.]

## Configuration

### Coverage Thresholds
- Minimum line coverage: 80%
- Minimum branch coverage: 75%
- Critical path coverage: 100%

### Refactoring Triggers
- Cyclomatic complexity &gt; 10
- Method length &gt; 20 lines
- Class length &gt; 200 lines
- Duplicate code blocks &gt; 3 lines

## Phase 1: Test Specification and Design

### 1. Requirements Analysis
- Use Task tool with subagent_type=&quot;architect-review&quot;
- Prompt: &quot;Analyze requirements for: $ARGUMENTS. Define acceptance criteria, identify edge cases, and create test scenarios. Output a comprehensive test specification.&quot;
- Output: Test specification, acceptance criteria, edge case matrix
- Validation: Ensure all requirements have corresponding test scenarios

### 2. Test Architecture Design
- Use Task tool with subagent_type=&quot;test-automator&quot;
- Prompt: &quot;Design test architecture for: $ARGUMENTS based on test specification. Define test structure, fixtures, mocks, and test data strategy. Ensure testability and maintainability.&quot;
- Output: Test architecture, fixture design, mock strategy
- Validation: Architecture supports isolated, fast, reliable tests

## Phase 2: RED - Write Failing Tests

### 3. Write Unit Tests (Failing)
- Use Task tool with subagent_type=&quot;test-automator&quot;
- Prompt: &quot;Write FAILING unit tests for: $ARGUMENTS. Tests must fail initially. Include edge cases, error scenarios, and happy paths. DO NOT implement production code.&quot;
- Output: Failing unit tests, test documentation
- **CRITICAL**: Verify all tests fail with expected error messages

### 4. Verify Test Failure
- Use Task tool with subagent_type=&quot;code-reviewer&quot;
- Prompt: &quot;Verify that all tests for: $ARGUMENTS are failing correctly. Ensure failures are for the right reasons (missing implementation, not test errors). Confirm no false positives.&quot;
- Output: Test failure verification report
- **GATE**: Do not proceed until all tests fail appropriately

## Phase 3: GREEN - Make Tests Pass

### 5. Minimal Implementation
- Use Task tool with subagent_type=&quot;backend-architect&quot;
- Prompt: &quot;Implement MINIMAL code to make tests pass for: $ARGUMENTS. Focus only on making tests green. Do not add extra features or optimizations. Keep it simple.&quot;
- Output: Minimal working implementation
- Constraint: No code beyond what&#39;s needed to pass tests

### 6. Verify Test Success
- Use Task tool with subagent_type=&quot;test-automator&quot;
- Prompt: &quot;Run all tests for: $ARGUMENTS and verify they pass. Check test coverage metrics. Ensure no tests were accidentally broken.&quot;
- Output: Test execution report, coverage metrics
- **GATE**: All tests must pass before proceeding

## Phase 4: REFACTOR - Improve Code Quality

### 7. Code Refactoring
- Use Task tool with subagent_type=&quot;code-reviewer&quot;
- Prompt: &quot;Refactor implementation for: $ARGUMENTS while keeping tests green. Apply SOLID principles, remove duplication, improve naming, and optimize performance. Run tests after each refactoring.&quot;
- Output: Refactored code, refactoring report
- Constraint: Tests must remain green throughout

### 8. Test Refactoring
- Use Task tool with subagent_type=&quot;test-automator&quot;
- Prompt: &quot;Refactor tests for: $ARGUMENTS. Remove test duplication, improve test names, extract common fixtures, and enhance test readability. Ensure tests still provide same coverage.&quot;
- Output: Refactored tests, improved test structure
- Validation: Coverage metrics unchanged or improved

## Phase 5: Integration and System Tests

### 9. Write Integration Tests (Failing First)
- Use Task tool with subagent_type=&quot;test-automator&quot;
- Prompt: &quot;Write FAILING integration tests for: $ARGUMENTS. Test component interactions, API contracts, and data flow. Tests must fail initially.&quot;
- Output: Failing integration tests
- Validation: Tests fail due to missing integration logic

### 10. Implement Integration
- Use Task tool with subagent_type=&quot;backend-architect&quot;
- Prompt: &quot;Implement integration code for: $ARGUMENTS to make integration tests pass. Focus on component interaction and data flow.&quot;
- Output: Integration implementation
- Validation: All integration tests pass

## Phase 6: Continuous Improvement Cycle

### 11. Performance and Edge Case Tests
- Use Task tool with subagent_type=&quot;test-automator&quot;
- Prompt: &quot;Add performance tests and additional edge case tests for: $ARGUMENTS. Include stress tests, boundary tests, and error recovery tests.&quot;
- Output: Extended test suite
- Metric: Increased test coverage and scenario coverage

### 12. Final Code Review
- Use Task tool with subagent_type=&quot;architect-review&quot;
- Prompt: &quot;Perform comprehensive review of: $ARGUMENTS. Verify TDD process was followed, check code quality, test quality, and coverage. Suggest improvements.&quot;
- Output: Review report, improvement suggestions
- Action: Implement critical suggestions while maintaining green tests

## Incremental Development Mode

For test-by-test development:
1. Write ONE failing test
2. Make ONLY that test pass
3. Refactor if needed
4. Repeat for next test

Use this approach by adding `--incremental` flag to focus on one test at a time.

## Test Suite Mode

For comprehensive test suite development:
1. Write ALL tests for a feature/module (failing)
2. Implement code to pass ALL tests
3. Refactor entire module
4. Add integration tests

Use this approach by adding `--suite` flag for batch test development.

## Validation Checkpoints

### RED Phase Validation
- [ ] All tests written before implementation
- [ ] All tests fail with meaningful error messages
- [ ] Test failures are due to missing implementation
- [ ] No test passes accidentally

### GREEN Phase Validation
- [ ] All tests pass
- [ ] No extra code beyond test requirements
- [ ] Coverage meets minimum thresholds
- [ ] No test was modified to make it pass

### REFACTOR Phase Validation
- [ ] All tests still pass after refactoring
- [ ] Code complexity reduced
- [ ] Duplication eliminated
- [ ] Performance improved or maintained
- [ ] Test readability improved

## Coverage Reports

Generate coverage reports after each phase:
- Line coverage
- Branch coverage
- Function coverage
- Statement coverage

## Failure Recovery

If TDD discipline is broken:
1. **STOP** immediately
2. Identify which phase was violated
3. Rollback to last valid state
4. Resume from correct phase
5. Document lesson learned

## TDD Metrics Tracking

Track and report:
- Time in each phase (Red/Green/Refactor)
- Number of test-implementation cycles
- Coverage progression
- Refactoring frequency
- Defect escape rate

## Anti-Patterns to Avoid

- Writing implementation before tests
- Writing tests that already pass
- Skipping the refactor phase
- Writing multiple features without tests
- Modifying tests to make them pass
- Ignoring failing tests
- Writing tests after implementation

## Success Criteria

- 100% of code written test-first
- All tests pass continuously
- Coverage exceeds thresholds
- Code complexity within limits
- Zero defects in covered code
- Clear test documentation
- Fast test execution (&lt; 5 seconds for unit tests)

## Notes

- Enforce strict RED-GREEN-REFACTOR discipline
- Each phase must be completed before moving to next
- Tests are the specification
- If a test is hard to write, the design needs improvement
- Refactoring is NOT optional
- Keep test execution fast
- Tests should be independent and isolated

TDD implementation for: $ARGUMENTS</pre>
                  </div>
                </div>
              </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

</template></turbo-stream>