Spaces:

rohanjain1648
/

forgeai

Sleeping

forgeai / ForgeAI_Design_Presentation.html

Rohan Jain

updates

e2668a7 23 days ago

100 kB

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ForgeAI — Design Document \| Itanta Hackathon 2026</title>
	<link
	href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap"
	rel="stylesheet">
	<style>
	:root {
	--bg-primary: #0a0e1a;
	--bg-secondary: #111827;
	--bg-card: #1a1f35;
	--bg-card-hover: #222845;
	--accent-blue: #3b82f6;
	--accent-cyan: #06b6d4;
	--accent-purple: #8b5cf6;
	--accent-pink: #ec4899;
	--accent-orange: #f59e0b;
	--accent-green: #10b981;
	--accent-red: #ef4444;
	--text-primary: #f1f5f9;
	--text-secondary: #94a3b8;
	--text-muted: #64748b;
	--border-subtle: rgba(255, 255, 255, 0.06);
	--glow-blue: rgba(59, 130, 246, 0.3);
	--glow-purple: rgba(139, 92, 246, 0.3);
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Inter', -apple-system, sans-serif;
	background: var(--bg-primary);
	color: var(--text-primary);
	line-height: 1.6;
	overflow-x: hidden;
	}

	/* Slide System */
	.slide {
	min-height: 100vh;
	padding: 60px 80px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	border-bottom: 1px solid var(--border-subtle);
	page-break-after: always;
	}

	.slide::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(ellipse at 20% 50%, rgba(59, 130, 246, 0.04) 0%, transparent 60%),
	radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.04) 0%, transparent 60%);
	pointer-events: none;
	}

	.slide-number {
	position: absolute;
	top: 30px;
	right: 40px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-muted);
	letter-spacing: 2px;
	}

	.slide-tag {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 20px;
	}

	.tag-intro {
	background: rgba(59, 130, 246, 0.15);
	color: var(--accent-blue);
	border: 1px solid rgba(59, 130, 246, 0.3);
	}

	.tag-arch {
	background: rgba(16, 185, 129, 0.15);
	color: var(--accent-green);
	border: 1px solid rgba(16, 185, 129, 0.3);
	}

	.tag-workflow {
	background: rgba(139, 92, 246, 0.15);
	color: var(--accent-purple);
	border: 1px solid rgba(139, 92, 246, 0.3);
	}

	.tag-failure {
	background: rgba(239, 68, 68, 0.15);
	color: var(--accent-red);
	border: 1px solid rgba(239, 68, 68, 0.3);
	}

	.tag-tech {
	background: rgba(6, 182, 212, 0.15);
	color: var(--accent-cyan);
	border: 1px solid rgba(6, 182, 212, 0.3);
	}

	.tag-risk {
	background: rgba(245, 158, 11, 0.15);
	color: var(--accent-orange);
	border: 1px solid rgba(245, 158, 11, 0.3);
	}

	h1 {
	font-size: 48px;
	font-weight: 800;
	line-height: 1.15;
	margin-bottom: 16px;
	letter-spacing: -1px;
	}

	h1 .gradient-text {
	background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple), var(--accent-pink));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}

	h2 {
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 12px;
	color: var(--text-primary);
	}

	h3 {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 10px;
	color: var(--accent-cyan);
	}

	p,
	li {
	font-size: 16px;
	color: var(--text-secondary);
	line-height: 1.7;
	}

	.subtitle {
	font-size: 20px;
	color: var(--text-secondary);
	font-weight: 400;
	margin-bottom: 40px;
	max-width: 700px;
	}

	/* Cards */
	.card-grid {
	display: grid;
	gap: 20px;
	margin-top: 24px;
	}

	.card-grid-2 {
	grid-template-columns: 1fr 1fr;
	}

	.card-grid-3 {
	grid-template-columns: 1fr 1fr 1fr;
	}

	.card-grid-4 {
	grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.card-grid-7 {
	grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.card {
	background: var(--bg-card);
	border: 1px solid var(--border-subtle);
	border-radius: 16px;
	padding: 24px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	}

	.card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 16px 16px 0 0;
	}

	.card-blue::before {
	background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
	}

	.card-green::before {
	background: linear-gradient(90deg, var(--accent-green), #34d399);
	}

	.card-purple::before {
	background: linear-gradient(90deg, var(--accent-purple), var(--accent-pink));
	}

	.card-orange::before {
	background: linear-gradient(90deg, var(--accent-orange), #f97316);
	}

	.card-red::before {
	background: linear-gradient(90deg, var(--accent-red), #f97316);
	}

	.card-cyan::before {
	background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
	}

	.card-pink::before {
	background: linear-gradient(90deg, var(--accent-pink), var(--accent-purple));
	}

	.card-icon {
	font-size: 32px;
	margin-bottom: 12px;
	display: block;
	}

	.card-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	}

	.card-desc {
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.6;
	}

	.card-list {
	list-style: none;
	padding: 0;
	margin-top: 10px;
	}

	.card-list li {
	font-size: 13px;
	padding: 4px 0;
	color: var(--text-secondary);
	display: flex;
	align-items: flex-start;
	gap: 8px;
	}

	.card-list li::before {
	content: '→';
	color: var(--accent-cyan);
	font-weight: 700;
	flex-shrink: 0;
	}

	/* Tables */
	.table-wrap {
	margin-top: 20px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--border-subtle);
	}

	table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	}

	thead {
	background: rgba(59, 130, 246, 0.1);
	}

	th {
	padding: 14px 18px;
	text-align: left;
	font-weight: 600;
	color: var(--accent-blue);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-bottom: 1px solid var(--border-subtle);
	}

	td {
	padding: 12px 18px;
	border-bottom: 1px solid var(--border-subtle);
	color: var(--text-secondary);
	font-size: 13px;
	}

	tr:last-child td {
	border-bottom: none;
	}

	tr:hover td {
	background: rgba(255, 255, 255, 0.02);
	}

	.status-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	}

	.badge-green {
	background: rgba(16, 185, 129, 0.15);
	color: var(--accent-green);
	}

	.badge-blue {
	background: rgba(59, 130, 246, 0.15);
	color: var(--accent-blue);
	}

	.badge-orange {
	background: rgba(245, 158, 11, 0.15);
	color: var(--accent-orange);
	}

	.badge-red {
	background: rgba(239, 68, 68, 0.15);
	color: var(--accent-red);
	}

	.badge-purple {
	background: rgba(139, 92, 246, 0.15);
	color: var(--accent-purple);
	}

	/* Architecture Diagrams (SVG-based) */
	.diagram-container {
	margin: 24px 0;
	display: flex;
	justify-content: center;
	padding: 30px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 16px;
	border: 1px solid var(--border-subtle);
	overflow-x: auto;
	}

	.diagram-container svg {
	max-width: 100%;
	height: auto;
	}

	/* Code blocks */
	.code-block {
	background: #0d1117;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 20px 24px;
	margin: 16px 0;
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	line-height: 1.7;
	color: #e6edf3;
	overflow-x: auto;
	}

	.code-comment {
	color: #8b949e;
	}

	.code-keyword {
	color: #ff7b72;
	}

	.code-string {
	color: #a5d6ff;
	}

	.code-value {
	color: #79c0ff;
	}

	.code-func {
	color: #d2a8ff;
	}

	/* Flow arrows */
	.flow-horizontal {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 30px 0;
	flex-wrap: wrap;
	justify-content: center;
	}

	.flow-node {
	padding: 16px 20px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 13px;
	text-align: center;
	min-width: 120px;
	position: relative;
	}

	.flow-arrow {
	font-size: 24px;
	color: var(--text-muted);
	padding: 0 4px;
	flex-shrink: 0;
	}

	/* Highlights */
	.highlight-box {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.08));
	border: 1px solid rgba(59, 130, 246, 0.2);
	border-radius: 12px;
	padding: 20px 24px;
	margin: 20px 0;
	}

	.highlight-box.warning {
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(239, 68, 68, 0.08));
	border-color: rgba(245, 158, 11, 0.2);
	}

	.highlight-box.success {
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(6, 182, 212, 0.08));
	border-color: rgba(16, 185, 129, 0.2);
	}

	.highlight-box p {
	font-size: 15px;
	color: var(--text-primary);
	font-weight: 500;
	}

	/* Two column layout */
	.two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-top: 20px;
	}

	.divider {
	width: 60px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
	margin: 16px 0 24px;
	}

	/* Section markers */
	.section-label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 30px;
	}

	.section-num {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 18px;
	flex-shrink: 0;
	}

	.section-num-1 {
	background: rgba(59, 130, 246, 0.15);
	color: var(--accent-blue);
	}

	.section-num-2 {
	background: rgba(139, 92, 246, 0.15);
	color: var(--accent-purple);
	}

	.section-num-3 {
	background: rgba(239, 68, 68, 0.15);
	color: var(--accent-red);
	}

	.section-num-4 {
	background: rgba(6, 182, 212, 0.15);
	color: var(--accent-cyan);
	}

	.section-num-5 {
	background: rgba(245, 158, 11, 0.15);
	color: var(--accent-orange);
	}

	.metric-row {
	display: flex;
	gap: 20px;
	margin: 20px 0;
	flex-wrap: wrap;
	}

	.metric {
	background: var(--bg-card);
	border: 1px solid var(--border-subtle);
	border-radius: 12px;
	padding: 20px;
	flex: 1;
	min-width: 140px;
	text-align: center;
	}

	.metric-value {
	font-size: 36px;
	font-weight: 800;
	margin-bottom: 4px;
	}

	.metric-label {
	font-size: 12px;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 1px;
	}

	/* Title slide special */
	.title-slide {
	text-align: center;
	justify-content: center;
	align-items: center;
	}

	.title-slide h1 {
	font-size: 64px;
	margin-bottom: 8px;
	}

	.logo-mark {
	font-size: 72px;
	margin-bottom: 20px;
	display: block;
	}

	.team-badges {
	display: flex;
	gap: 16px;
	justify-content: center;
	margin-top: 30px;
	flex-wrap: wrap;
	}

	.team-badge {
	padding: 8px 20px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 500;
	}

	/* Responsive print */
	@media print {
	.slide {
	min-height: auto;
	padding: 40px;
	page-break-inside: avoid;
	}

	body {
	background: white;
	color: #1a1a2e;
	}

	.card {
	border: 1px solid #ddd;
	}
	}

	/* Navigation */
	.nav-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(10, 14, 26, 0.95);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--border-subtle);
	padding: 12px 40px;
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 100;
	}

	.nav-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--text-muted);
	cursor: pointer;
	transition: all 0.3s;
	border: none;
	opacity: 0.4;
	}

	.nav-dot:hover {
	opacity: 0.8;
	transform: scale(1.3);
	}

	.nav-dot.active {
	opacity: 1;
	background: var(--accent-blue);
	transform: scale(1.3);
	}

	/* Connector lines for diagrams */
	.connector {
	stroke: var(--text-muted);
	stroke-width: 1.5;
	fill: none;
	}

	.connector-highlight {
	stroke: var(--accent-blue);
	stroke-width: 2;
	fill: none;
	}

	.connector-arrow {
	fill: var(--text-muted);
	}

	ul.bullet-list {
	list-style: none;
	padding: 0;
	margin: 12px 0;
	}

	ul.bullet-list li {
	padding: 6px 0;
	padding-left: 24px;
	position: relative;
	font-size: 15px;
	}

	ul.bullet-list li::before {
	content: '▸';
	position: absolute;
	left: 0;
	color: var(--accent-blue);
	font-weight: bold;
	}

	.comparison-table td:first-child {
	font-weight: 600;
	color: var(--text-primary);
	}

	.check {
	color: var(--accent-green);
	}

	.cross {
	color: var(--accent-red);
	}

	.warn {
	color: var(--accent-orange);
	}

	.pipeline-step {
	display: flex;
	align-items: stretch;
	gap: 2px;
	margin: 20px 0;
	}

	.pipeline-block {
	flex: 1;
	padding: 16px 14px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: white;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	}

	.pipeline-block:first-child {
	border-radius: 12px 0 0 12px;
	}

	.pipeline-block:last-child {
	border-radius: 0 12px 12px 0;
	}

	.pipeline-block .step-icon {
	font-size: 22px;
	}

	.pipeline-block .step-label {
	font-size: 11px;
	opacity: 0.85;
	font-weight: 400;
	}
	</style>
	</head>

	<body>

	<!-- ╔══════════════════════════════════════════════════════════════════════════╗ -->
	<!-- ║ SLIDE 1: TITLE ║ -->
	<!-- ╚══════════════════════════════════════════════════════════════════════════╝ -->
	<section class="slide title-slide" id="slide-1">
	<span class="slide-number">01 / 12</span>
	<span class="logo-mark">⚡</span>
	<h1><span class="gradient-text">ForgeAI</span></h1>
	<p class="subtitle" style="text-align:center; max-width:800px;">
	An Autonomous Multi-Agent Framework that Transforms<br>
	Natural-Language Specifications into Fully Tested Software
	</p>
	<div class="divider" style="margin:16px auto;"></div>
	<p style="font-size:16px; color:var(--text-muted); text-align:center; margin-bottom:30px;">
	Phase 1 — Proposed Design Document  \|  Itanta Hackathon 2026
	</p>

	<div class="metric-row" style="justify-content:center; max-width:800px; margin:0 auto;">
	<div class="metric">
	<div class="metric-value" style="color:var(--accent-blue);">7</div>
	<div class="metric-label">Specialized Agents</div>
	</div>
	<div class="metric">
	<div class="metric-value" style="color:var(--accent-purple);">16</div>
	<div class="metric-label">FSM States</div>
	</div>
	<div class="metric">
	<div class="metric-value" style="color:var(--accent-green);">5</div>
	<div class="metric-label">Complexity Tiers</div>
	</div>
	<div class="metric">
	<div class="metric-value" style="color:var(--accent-orange);">0</div>
	<div class="metric-label">Manual Code Lines</div>
	</div>
	</div>

	<div class="team-badges">
	<span class="team-badge" style="background:rgba(59,130,246,0.1); color:var(--accent-blue);">🧠 Systems
	Design</span>
	<span class="team-badge" style="background:rgba(16,185,129,0.1); color:var(--accent-green);">✅ TDD-First</span>
	<span class="team-badge" style="background:rgba(139,92,246,0.1); color:var(--accent-purple);">🤖 Gemini 2.5
	Flash</span>
	<span class="team-badge" style="background:rgba(239,68,68,0.1); color:var(--accent-red);">🔄 Auto-Recovery</span>
	</div>
	</section>

	<!-- ╔══════════════════════════════════════════════════════════════════════════╗ -->
	<!-- ║ SLIDE 2: PROBLEM & VISION ║ -->
	<!-- ╚══════════════════════════════════════════════════════════════════════════╝ -->
	<section class="slide" id="slide-2">
	<span class="slide-number">02 / 12</span>
	<span class="slide-tag tag-intro">PROBLEM STATEMENT</span>
	<h1>The Gap: From Reactive Assistants<br>to <span class="gradient-text">Proactive Engineers</span></h1>
	<div class="divider"></div>

	<div class="two-col">
	<div>
	<h3>❌ Current AI Coding Tools</h3>
	<ul class="bullet-list">
	<li>Developers <strong>manually decompose</strong> projects</li>
	<li>Hand-feed each task to the AI one by one</li>
	<li>Evaluate, debug, and integrate each output</li>
	<li>Handle failures and retries manually</li>
	<li>No persistent state across tasks</li>
	<li><strong>Does not scale</strong> to complex, multi-system projects</li>
	</ul>
	</div>
	<div>
	<h3>✅ ForgeAI's Approach</h3>
	<ul class="bullet-list">
	<li><strong>Automated decomposition</strong> into atomic tasks</li>
	<li>Specialized agents work autonomously</li>
	<li>TDD-first verification after every task</li>
	<li>Intelligent failure recovery with cascading strategies</li>
	<li>Full state tracking with Pydantic models</li>
	<li><strong>Scales across all 5 complexity tiers</strong></li>
	</ul>
	</div>
	</div>

	<div class="pipeline-step" style="margin-top:30px;">
	<div class="pipeline-block" style="background:var(--accent-blue);">
	<span class="step-icon">💬</span>
	<span>NL Spec</span>
	<span class="step-label">User Input</span>
	</div>
	<div class="pipeline-block" style="background:#2563eb;">
	<span class="step-icon">🎯</span>
	<span>Intake</span>
	<span class="step-label">Clarify & Refine</span>
	</div>
	<div class="pipeline-block" style="background:var(--accent-purple);">
	<span class="step-icon">🏗️</span>
	<span>Architect</span>
	<span class="step-label">Design</span>
	</div>
	<div class="pipeline-block" style="background:#7c3aed;">
	<span class="step-icon">📋</span>
	<span>Plan</span>
	<span class="step-label">Decompose</span>
	</div>
	<div class="pipeline-block" style="background:var(--accent-green);">
	<span class="step-icon">✅</span>
	<span>QA</span>
	<span class="step-label">Tests First</span>
	</div>
	<div class="pipeline-block" style="background:#059669;">
	<span class="step-icon">💻</span>
	<span>Coder</span>
	<span class="step-label">Generate</span>
	</div>
	<div class="pipeline-block" style="background:var(--accent-orange);">
	<span class="step-icon">🔒</span>
	<span>Security</span>
	<span class="step-label">Audit</span>
	</div>
	<div class="pipeline-block" style="background:var(--accent-red);">
	<span class="step-icon">📊</span>
	<span>Report</span>
	<span class="step-label">Summary</span>
	</div>
	</div>
	</section>

	<!-- ╔══════════════════════════════════════════════════════════════════════════╗ -->
	<!-- ║ SLIDE 3: HIGH-LEVEL ARCHITECTURE ║ -->
	<!-- ╚══════════════════════════════════════════════════════════════════════════╝ -->
	<section class="slide" id="slide-3">
	<span class="slide-number">03 / 12</span>
	<span class="slide-tag tag-arch">SECTION 1 — AGENT ARCHITECTURE</span>
	<h1>Layered System <span class="gradient-text">Architecture</span></h1>
	<div class="divider"></div>

	<div class="diagram-container">
	<svg width="950" height="520" viewBox="0 0 950 520" xmlns="http://www.w3.org/2000/svg">
	<!-- Layer 1: UI -->
	<rect x="20" y="10" width="910" height="85" rx="14" fill="rgba(59,130,246,0.08)" stroke="rgba(59,130,246,0.3)"
	stroke-width="1.5" />
	<text x="40" y="36" font-family="Inter" font-size="11" fill="#3b82f6" font-weight="700" letter-spacing="2">UI
	LAYER</text>
	<rect x="40" y="48" width="200" height="38" rx="8" fill="rgba(59,130,246,0.15)" stroke="rgba(59,130,246,0.4)"
	stroke-width="1" />
	<text x="140" y="72" text-anchor="middle" font-family="Inter" font-size="12" fill="#60a5fa"
	font-weight="600">🖥️ Rich CLI Interface</text>
	<rect x="260" y="48" width="220" height="38" rx="8" fill="rgba(59,130,246,0.15)" stroke="rgba(59,130,246,0.4)"
	stroke-width="1" />
	<text x="370" y="72" text-anchor="middle" font-family="Inter" font-size="12" fill="#60a5fa" font-weight="600">🌐
	FastAPI Web Dashboard</text>

	<!-- Layer 2: Orchestration -->
	<rect x="20" y="110" width="910" height="110" rx="14" fill="rgba(139,92,246,0.08)" stroke="rgba(139,92,246,0.3)"
	stroke-width="1.5" />
	<text x="40" y="136" font-family="Inter" font-size="11" fill="#8b5cf6" font-weight="700"
	letter-spacing="2">ORCHESTRATION LAYER</text>
	<rect x="40" y="148" width="210" height="58" rx="8" fill="rgba(139,92,246,0.15)" stroke="rgba(139,92,246,0.4)"
	stroke-width="1" />
	<text x="145" y="173" text-anchor="middle" font-family="Inter" font-size="13" fill="#a78bfa"
	font-weight="700">🧠 Orchestrator</text>
	<text x="145" y="193" text-anchor="middle" font-family="Inter" font-size="10" fill="#94a3b8">16-State Finite
	State Machine</text>
	<rect x="270" y="148" width="160" height="58" rx="8" fill="rgba(139,92,246,0.15)" stroke="rgba(139,92,246,0.4)"
	stroke-width="1" />
	<text x="350" y="173" text-anchor="middle" font-family="Inter" font-size="13" fill="#a78bfa"
	font-weight="700">⚙️ Config Manager</text>
	<text x="350" y="193" text-anchor="middle" font-family="Inter" font-size="10" fill="#94a3b8">YAML Guardrails
	(NFR-03)</text>
	<rect x="450" y="148" width="160" height="58" rx="8" fill="rgba(139,92,246,0.15)" stroke="rgba(139,92,246,0.4)"
	stroke-width="1" />
	<text x="530" y="173" text-anchor="middle" font-family="Inter" font-size="13" fill="#a78bfa"
	font-weight="700">📝 Activity Logger</text>
	<text x="530" y="193" text-anchor="middle" font-family="Inter" font-size="10" fill="#94a3b8">Append-Only
	(NFR-02)</text>
	<rect x="630" y="148" width="160" height="58" rx="8" fill="rgba(139,92,246,0.15)" stroke="rgba(139,92,246,0.4)"
	stroke-width="1" />
	<text x="710" y="173" text-anchor="middle" font-family="Inter" font-size="13" fill="#a78bfa"
	font-weight="700">📦 Workflow State</text>
	<text x="710" y="193" text-anchor="middle" font-family="Inter" font-size="10"
	fill="#94a3b8">Pydantic-Typed</text>

	<!-- Layer 3: Agents -->
	<rect x="20" y="235" width="910" height="120" rx="14" fill="rgba(16,185,129,0.08)" stroke="rgba(16,185,129,0.3)"
	stroke-width="1.5" />
	<text x="40" y="261" font-family="Inter" font-size="11" fill="#10b981" font-weight="700"
	letter-spacing="2">AGENT LAYER — 7 SPECIALIZED AGENTS</text>
	<rect x="40" y="274" width="116" height="68" rx="8" fill="rgba(59,130,246,0.15)" stroke="rgba(59,130,246,0.4)"
	stroke-width="1" />
	<text x="98" y="299" text-anchor="middle" font-family="Inter" font-size="17" fill="#60a5fa">🎯</text>
	<text x="98" y="328" text-anchor="middle" font-family="Inter" font-size="11" fill="#94a3b8"
	font-weight="600">Intake</text>
	<rect x="168" y="274" width="116" height="68" rx="8" fill="rgba(16,185,129,0.15)" stroke="rgba(16,185,129,0.4)"
	stroke-width="1" />
	<text x="226" y="299" text-anchor="middle" font-family="Inter" font-size="17" fill="#34d399">🏗️</text>
	<text x="226" y="328" text-anchor="middle" font-family="Inter" font-size="11" fill="#94a3b8"
	font-weight="600">Architect</text>
	<rect x="296" y="274" width="116" height="68" rx="8" fill="rgba(16,185,129,0.15)" stroke="rgba(16,185,129,0.4)"
	stroke-width="1" />
	<text x="354" y="299" text-anchor="middle" font-family="Inter" font-size="17" fill="#34d399">📋</text>
	<text x="354" y="328" text-anchor="middle" font-family="Inter" font-size="11" fill="#94a3b8"
	font-weight="600">Planner</text>
	<rect x="424" y="274" width="116" height="68" rx="8" fill="rgba(245,158,11,0.15)" stroke="rgba(245,158,11,0.4)"
	stroke-width="1" />
	<text x="482" y="299" text-anchor="middle" font-family="Inter" font-size="17" fill="#fbbf24">✅</text>
	<text x="482" y="328" text-anchor="middle" font-family="Inter" font-size="11" fill="#94a3b8"
	font-weight="600">QA (TDD)</text>
	<rect x="552" y="274" width="116" height="68" rx="8" fill="rgba(245,158,11,0.15)" stroke="rgba(245,158,11,0.4)"
	stroke-width="1" />
	<text x="610" y="299" text-anchor="middle" font-family="Inter" font-size="17" fill="#fbbf24">💻</text>
	<text x="610" y="328" text-anchor="middle" font-family="Inter" font-size="11" fill="#94a3b8"
	font-weight="600">Coder</text>
	<rect x="680" y="274" width="116" height="68" rx="8" fill="rgba(239,68,68,0.15)" stroke="rgba(239,68,68,0.4)"
	stroke-width="1" />
	<text x="738" y="299" text-anchor="middle" font-family="Inter" font-size="17" fill="#f87171">🔒</text>
	<text x="738" y="328" text-anchor="middle" font-family="Inter" font-size="11" fill="#94a3b8"
	font-weight="600">Security</text>
	<rect x="808" y="274" width="116" height="68" rx="8" fill="rgba(239,68,68,0.15)" stroke="rgba(239,68,68,0.4)"
	stroke-width="1" />
	<text x="866" y="299" text-anchor="middle" font-family="Inter" font-size="17" fill="#f87171">🔄</text>
	<text x="866" y="328" text-anchor="middle" font-family="Inter" font-size="11" fill="#94a3b8"
	font-weight="600">Recovery</text>

	<!-- Layer 4: Tools -->
	<rect x="20" y="370" width="910" height="85" rx="14" fill="rgba(6,182,212,0.08)" stroke="rgba(6,182,212,0.3)"
	stroke-width="1.5" />
	<text x="40" y="396" font-family="Inter" font-size="11" fill="#06b6d4" font-weight="700" letter-spacing="2">TOOL
	LAYER</text>
	<rect x="40" y="410" width="200" height="38" rx="8" fill="rgba(6,182,212,0.12)" stroke="rgba(6,182,212,0.3)"
	stroke-width="1" />
	<text x="140" y="434" text-anchor="middle" font-family="Inter" font-size="12" fill="#22d3ee"
	font-weight="600">🤖 LLM Gateway (Gemini)</text>
	<rect x="260" y="410" width="200" height="38" rx="8" fill="rgba(6,182,212,0.12)" stroke="rgba(6,182,212,0.3)"
	stroke-width="1" />
	<text x="360" y="434" text-anchor="middle" font-family="Inter" font-size="12" fill="#22d3ee"
	font-weight="600">📂 File Manager</text>
	<rect x="480" y="410" width="200" height="38" rx="8" fill="rgba(6,182,212,0.12)" stroke="rgba(6,182,212,0.3)"
	stroke-width="1" />
	<text x="580" y="434" text-anchor="middle" font-family="Inter" font-size="12" fill="#22d3ee"
	font-weight="600">🧪 Test Runner (pytest)</text>
	<rect x="700" y="410" width="220" height="38" rx="8" fill="rgba(6,182,212,0.12)" stroke="rgba(6,182,212,0.3)"
	stroke-width="1" />
	<text x="810" y="434" text-anchor="middle" font-family="Inter" font-size="12" fill="#22d3ee"
	font-weight="600">🐳 Docker Builder</text>

	<!-- Arrows between layers -->
	<line x1="140" y1="95" x2="145" y2="148" stroke="#64748b" stroke-width="1.5" stroke-dasharray="4,3" />
	<line x1="370" y1="95" x2="350" y2="148" stroke="#64748b" stroke-width="1.5" stroke-dasharray="4,3" />
	<line x1="145" y1="206" x2="280" y2="274" stroke="#64748b" stroke-width="1.5" stroke-dasharray="4,3" />
	<line x1="482" y1="342" x2="360" y2="410" stroke="#64748b" stroke-width="1.5" stroke-dasharray="4,3" />
	<line x1="610" y1="342" x2="580" y2="410" stroke="#64748b" stroke-width="1.5" stroke-dasharray="4,3" />

	<!-- Labels -->
	<text x="475" y="490" text-anchor="middle" font-family="Inter" font-size="13" fill="#64748b"
	font-style="italic">Agents only communicate through AgentContext → AgentResult contracts</text>
	<text x="475" y="510" text-anchor="middle" font-family="Inter" font-size="13" fill="#64748b"
	font-style="italic">All filesystem I/O goes through the File Manager (sandboxed)</text>
	</svg>
	</div>
	</section>

	<!-- ╔══════════════════════════════════════════════════════════════════════════╗ -->
	<!-- ║ SLIDE 4: AGENT ARCHITECTURE — DEEP DIVE ║ -->
	<!-- ╚══════════════════════════════════════════════════════════════════════════╝ -->
	<section class="slide" id="slide-4">
	<span class="slide-number">04 / 12</span>
	<span class="slide-tag tag-arch">SECTION 1 — AGENT ARCHITECTURE</span>
	<h1>7 Agents, <span class="gradient-text">Clear Responsibilities</span></h1>
	<div class="divider"></div>

	<div class="card-grid card-grid-4" style="grid-template-columns: repeat(4, 1fr);">
	<div class="card card-blue">
	<span class="card-icon">🎯</span>
	<div class="card-title">Intake Agent</div>
	<ul class="card-list">
	<li>Parse natural-language spec</li>
	<li>Detect ambiguities & gaps</li>
	<li>Generate clarifying questions</li>
	<li>Produce StructuredSpecification</li>
	</ul>
	<div style="margin-top:10px;"><span class="status-badge badge-blue">FR-01, FR-02</span></div>
	</div>
	<div class="card card-green">
	<span class="card-icon">🏗️</span>
	<div class="card-title">Architect Agent</div>
	<ul class="card-list">
	<li>Design project structure</li>
	<li>Define directory layout</li>
	<li>Data models & API contracts</li>
	<li>Technology decisions</li>
	</ul>
	<div style="margin-top:10px;"><span class="status-badge badge-green">FR-04</span></div>
	</div>
	<div class="card card-purple">
	<span class="card-icon">📋</span>
	<div class="card-title">Planner Agent</div>
	<ul class="card-list">
	<li>Decompose into atomic tasks</li>
	<li>Build dependency graph</li>
	<li>Assign risk levels</li>
	<li>Set checkpoint flags</li>
	</ul>
	<div style="margin-top:10px;"><span class="status-badge badge-purple">FR-05, FR-06</span></div>
	</div>
	<div class="card card-orange">
	<span class="card-icon">✅</span>
	<div class="card-title">QA Agent (TDD)</div>
	<ul class="card-list">
	<li>Write failing tests FIRST</li>
	<li>pytest format with assertions</li>
	<li>Edge case coverage</li>
	<li>One test file per task</li>
	</ul>
	<div style="margin-top:10px;"><span class="status-badge badge-orange">FR-11</span></div>
	</div>
	<div class="card card-cyan">
	<span class="card-icon">💻</span>
	<div class="card-title">Coder Agent</div>
	<ul class="card-list">
	<li>Generate production code</li>
	<li>Pass all failing tests</li>
	<li>Follow architecture design</li>
	<li>Present diffs for review</li>
	</ul>
	<div style="margin-top:10px;"><span class="status-badge badge-blue">FR-08, FR-09</span></div>
	</div>
	<div class="card card-pink">
	<span class="card-icon">🔒</span>
	<div class="card-title">Security Agent</div>
	<ul class="card-list">
	<li>Scan for injection vulns</li>
	<li>Auth & RBAC flaws</li>
	<li>Hardcoded secrets check</li>
	<li>Generate audit report</li>
	</ul>
	<div style="margin-top:10px;"><span class="status-badge badge-purple">FR-14 (Extended)</span></div>
	</div>
	<div class="card card-red">
	<span class="card-icon">🔄</span>
	<div class="card-title">Recovery Agent</div>
	<ul class="card-list">
	<li>Diagnose root cause</li>
	<li>Classify error type</li>
	<li>Provide fix instructions</li>
	<li>Decide: retry/skip/escalate</li>
	</ul>
	<div style="margin-top:10px;"><span class="status-badge badge-red">FR-15, FR-17</span></div>
	</div>
	</div>

	<div class="highlight-box" style="margin-top:24px;">
	<p>🔑 <strong>Uniform Contract:</strong> Every agent extends <code
	style="color:var(--accent-cyan);">BaseAgent</code> and implements exactly 3 methods:
	<code style="color:var(--accent-purple);">build_system_prompt()</code>,
	<code style="color:var(--accent-purple);">build_user_prompt()</code>,
	<code style="color:var(--accent-purple);">parse_response()</code>.
	All accept <code style="color:var(--accent-cyan);">AgentContext</code> → return <code
	style="color:var(--accent-cyan);">AgentResult</code>. No shared mutable state.
	</p>
	</div>
	</section>

	<!-- ╔══════════════════════════════════════════════════════════════════════════╗ -->
	<!-- ║ SLIDE 5: AGENT DATA FLOW ║ -->
	<!-- ╚══════════════════════════════════════════════════════════════════════════╝ -->
	<section class="slide" id="slide-5">
	<span class="slide-number">05 / 12</span>
	<span class="slide-tag tag-arch">SECTION 1 — AGENT ARCHITECTURE</span>
	<h1>Agent Data <span class="gradient-text">Flow & Contracts</span></h1>
	<div class="divider"></div>

	<div class="diagram-container">
	<svg width="920" height="400" viewBox="0 0 920 400" xmlns="http://www.w3.org/2000/svg">
	<!-- AgentContext Box -->
	<rect x="20" y="20" width="350" height="360" rx="14" fill="rgba(59,130,246,0.06)" stroke="rgba(59,130,246,0.3)"
	stroke-width="1.5" />
	<text x="195" y="50" text-anchor="middle" font-family="Inter" font-size="14" fill="#3b82f6" font-weight="700">📥
	AgentContext (Input)</text>
	<rect x="40" y="65" width="310" height="26" rx="6" fill="rgba(59,130,246,0.1)" />
	<text x="50" y="83" font-family="JetBrains Mono" font-size="11" fill="#94a3b8">role: AgentRole</text>
	<rect x="40" y="97" width="310" height="26" rx="6" fill="rgba(59,130,246,0.1)" />
	<text x="50" y="115" font-family="JetBrains Mono" font-size="11" fill="#94a3b8">specification:
	StructuredSpecification</text>
	<rect x="40" y="129" width="310" height="26" rx="6" fill="rgba(59,130,246,0.1)" />
	<text x="50" y="147" font-family="JetBrains Mono" font-size="11" fill="#94a3b8">architecture: dict</text>
	<rect x="40" y="161" width="310" height="26" rx="6" fill="rgba(59,130,246,0.1)" />
	<text x="50" y="179" font-family="JetBrains Mono" font-size="11" fill="#94a3b8">current_task: AtomicTask</text>
	<rect x="40" y="193" width="310" height="26" rx="6" fill="rgba(59,130,246,0.1)" />
	<text x="50" y="211" font-family="JetBrains Mono" font-size="11" fill="#94a3b8">existing_files: {path →
	content}</text>
	<rect x="40" y="225" width="310" height="26" rx="6" fill="rgba(239,68,68,0.1)" />
	<text x="50" y="243" font-family="JetBrains Mono" font-size="11" fill="#f87171">error_message: str</text>
	<rect x="40" y="257" width="310" height="26" rx="6" fill="rgba(239,68,68,0.1)" />
	<text x="50" y="275" font-family="JetBrains Mono" font-size="11" fill="#f87171">error_traceback: str</text>
	<rect x="40" y="289" width="310" height="26" rx="6" fill="rgba(245,158,11,0.1)" />
	<text x="50" y="307" font-family="JetBrains Mono" font-size="11" fill="#fbbf24">user_input: str</text>
	<rect x="40" y="321" width="310" height="26" rx="6" fill="rgba(245,158,11,0.1)" />
	<text x="50" y="339" font-family="JetBrains Mono" font-size="11" fill="#fbbf24">clarification_responses:
	dict</text>
	<rect x="40" y="353" width="310" height="20" rx="6" fill="rgba(139,92,246,0.1)" />
	<text x="50" y="368" font-family="JetBrains Mono" font-size="11" fill="#a78bfa">retry_count: int</text>

	<!-- Arrow -->
	<path d="M 380 200 L 420 170 L 420 200 L 530 200 L 530 170 L 530 230 L 530 200 L 420 200 L 420 230 L 380 200"
	fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="2" />
	<text x="475" y="165" text-anchor="middle" font-family="Inter" font-size="13" fill="#64748b"
	font-weight="600">BaseAgent</text>
	<text x="475" y="185" text-anchor="middle" font-family="Inter" font-size="10"
	fill="#64748b">build_prompt()</text>
	<text x="475" y="200" text-anchor="middle" font-family="Inter" font-size="10" fill="#64748b">→
	LLM.generate()</text>
	<text x="475" y="215" text-anchor="middle" font-family="Inter" font-size="10" fill="#64748b">→
	parse_response()</text>
	<!-- Big arrow -->
	<polygon points="535,200 525,185 525,195 385,195 385,205 525,205 525,215" fill="rgba(139,92,246,0.3)" />

	<!-- AgentResult Box -->
	<rect x="550" y="20" width="350" height="360" rx="14" fill="rgba(16,185,129,0.06)" stroke="rgba(16,185,129,0.3)"
	stroke-width="1.5" />
	<text x="725" y="50" text-anchor="middle" font-family="Inter" font-size="14" fill="#10b981" font-weight="700">📤
	AgentResult (Output)</text>
	<rect x="570" y="65" width="310" height="26" rx="6" fill="rgba(16,185,129,0.1)" />
	<text x="580" y="83" font-family="JetBrains Mono" font-size="11" fill="#94a3b8">success: bool</text>
	<rect x="570" y="97" width="310" height="26" rx="6" fill="rgba(16,185,129,0.1)" />
	<text x="580" y="115" font-family="JetBrains Mono" font-size="11" fill="#94a3b8">specification:
	StructuredSpecification</text>
	<rect x="570" y="129" width="310" height="26" rx="6" fill="rgba(16,185,129,0.1)" />
	<text x="580" y="147" font-family="JetBrains Mono" font-size="11" fill="#94a3b8">architecture: dict</text>
	<rect x="570" y="161" width="310" height="26" rx="6" fill="rgba(16,185,129,0.1)" />
	<text x="580" y="179" font-family="JetBrains Mono" font-size="11" fill="#94a3b8">implementation_plan:
	ImplementationPlan</text>
	<rect x="570" y="193" width="310" height="26" rx="6" fill="rgba(59,130,246,0.1)" />
	<text x="580" y="211" font-family="JetBrains Mono" font-size="11" fill="#60a5fa">generated_files: {path →
	content}</text>
	<rect x="570" y="225" width="310" height="26" rx="6" fill="rgba(59,130,246,0.1)" />
	<text x="580" y="243" font-family="JetBrains Mono" font-size="11" fill="#60a5fa">test_results: dict</text>
	<rect x="570" y="257" width="310" height="26" rx="6" fill="rgba(59,130,246,0.1)" />
	<text x="580" y="275" font-family="JetBrains Mono" font-size="11" fill="#60a5fa">security_report: dict</text>
	<rect x="570" y="289" width="310" height="26" rx="6" fill="rgba(245,158,11,0.1)" />
	<text x="580" y="307" font-family="JetBrains Mono" font-size="11" fill="#fbbf24">clarifying_questions:
	list[str]</text>
	<rect x="570" y="321" width="310" height="26" rx="6" fill="rgba(245,158,11,0.1)" />
	<text x="580" y="339" font-family="JetBrains Mono" font-size="11" fill="#fbbf24">requires_human_input:
	bool</text>
	<rect x="570" y="353" width="310" height="20" rx="6" fill="rgba(139,92,246,0.1)" />
	<text x="580" y="368" font-family="JetBrains Mono" font-size="11" fill="#a78bfa">api_calls_made: int, error:
	str</text>
	</svg>
	</div>

	<div class="highlight-box success">
	<p>🔐 <strong>Isolation Guarantee:</strong> Agents have <strong>ZERO filesystem access</strong> — they return file
	dicts <code>{path → content}</code>, and the Orchestrator writes through the sandboxed FileManager. No agent can
	mutate another agent's output.</p>
	</div>
	</section>

	<!-- ╔══════════════════════════════════════════════════════════════════════════╗ -->
	<!-- ║ SLIDE 6: WORKFLOW — FSM ║ -->
	<!-- ╚══════════════════════════════════════════════════════════════════════════╝ -->
	<section class="slide" id="slide-6">
	<span class="slide-number">06 / 12</span>
	<span class="slide-tag tag-workflow">SECTION 2 — WORKFLOW DESIGN</span>
	<h1>16-State <span class="gradient-text">Finite State Machine</span></h1>
	<div class="divider"></div>

	<div class="diagram-container">
	<svg width="950" height="480" viewBox="0 0 950 480" xmlns="http://www.w3.org/2000/svg">
	<!-- Start -->
	<circle cx="50" cy="45" r="18" fill="none" stroke="#64748b" stroke-width="2" />
	<circle cx="50" cy="45" r="10" fill="#64748b" />
	<line x1="68" y1="45" x2="100" y2="45" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow)" />

	<!-- Markers -->
	<defs>
	<marker id="arrow" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
	<polygon points="0 0, 8 3, 0 6" fill="#64748b" />
	</marker>
	<marker id="arrow-green" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
	<polygon points="0 0, 8 3, 0 6" fill="#10b981" />
	</marker>
	<marker id="arrow-red" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
	<polygon points="0 0, 8 3, 0 6" fill="#ef4444" />
	</marker>
	</defs>

	<!-- Row 1: Requirements Phase -->
	<rect x="105" y="25" width="100" height="40" rx="8" fill="rgba(59,130,246,0.2)" stroke="rgba(59,130,246,0.5)"
	stroke-width="1.5" />
	<text x="155" y="50" text-anchor="middle" font-family="Inter" font-size="11" fill="#60a5fa"
	font-weight="600">IDLE</text>
	<line x1="205" y1="45" x2="240" y2="45" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow)" />

	<rect x="245" y="25" width="100" height="40" rx="8" fill="rgba(59,130,246,0.2)" stroke="rgba(59,130,246,0.5)"
	stroke-width="1.5" />
	<text x="295" y="50" text-anchor="middle" font-family="Inter" font-size="11" fill="#60a5fa"
	font-weight="600">INTAKE</text>

	<!-- Fork -->
	<line x1="345" y1="35" x2="390" y2="20" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow)" />
	<line x1="345" y1="55" x2="390" y2="70" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow)" />

	<rect x="395" y="0" width="130" height="40" rx="8" fill="rgba(245,158,11,0.2)" stroke="rgba(245,158,11,0.5)"
	stroke-width="1.5" />
	<text x="460" y="25" text-anchor="middle" font-family="Inter" font-size="11" fill="#fbbf24"
	font-weight="600">CLARIFICATION</text>
	<text x="460" y="53" text-anchor="middle" font-family="Inter" font-size="9" fill="#64748b">ambiguities
	found</text>

	<rect x="395" y="50" width="130" height="40" rx="8" fill="rgba(16,185,129,0.2)" stroke="rgba(16,185,129,0.5)"
	stroke-width="1.5" />
	<text x="460" y="75" text-anchor="middle" font-family="Inter" font-size="11" fill="#34d399"
	font-weight="600">SPECIFICATION</text>

	<!-- Clarification loop arrow -->
	<path d="M 525 20 C 545 20, 545 70, 525 70" fill="none" stroke="#64748b" stroke-width="1"
	stroke-dasharray="4,3" />
	<line x1="460" y1="40" x2="460" y2="50" stroke="rgba(16,185,129,0.5)" stroke-width="1.5"
	marker-end="url(#arrow-green)" />

	<!-- Row 2: Design Phase -->
	<line x1="525" y1="70" x2="560" y2="70" stroke="#64748b" stroke-width="1.5" />
	<line x1="560" y1="70" x2="560" y2="140" stroke="#64748b" stroke-width="1.5" />
	<line x1="560" y1="140" x2="110" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow)" />

	<rect x="105" y="120" width="140" height="40" rx="8" fill="rgba(139,92,246,0.2)" stroke="rgba(139,92,246,0.5)"
	stroke-width="1.5" />
	<text x="175" y="145" text-anchor="middle" font-family="Inter" font-size="11" fill="#a78bfa"
	font-weight="600">ARCHITECTURE</text>
	<line x1="245" y1="140" x2="280" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow)" />

	<rect x="285" y="120" width="120" height="40" rx="8" fill="rgba(139,92,246,0.2)" stroke="rgba(139,92,246,0.5)"
	stroke-width="1.5" />
	<text x="345" y="145" text-anchor="middle" font-family="Inter" font-size="11" fill="#a78bfa"
	font-weight="600">PLANNING</text>
	<line x1="405" y1="140" x2="440" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow)" />

	<!-- Checkpoint -->
	<rect x="445" y="115" width="140" height="50" rx="8" fill="rgba(245,158,11,0.15)" stroke="rgba(245,158,11,0.6)"
	stroke-width="2" stroke-dasharray="5,3" />
	<text x="515" y="138" text-anchor="middle" font-family="Inter" font-size="11" fill="#fbbf24"
	font-weight="700">PLAN_REVIEW</text>
	<text x="515" y="155" text-anchor="middle" font-family="Inter" font-size="9" fill="#fbbf24">🔒 CHECKPOINT</text>

	<line x1="585" y1="140" x2="625" y2="140" stroke="rgba(16,185,129,0.6)" stroke-width="2"
	marker-end="url(#arrow-green)" />
	<text x="605" y="133" text-anchor="middle" font-family="Inter" font-size="9" fill="#10b981">✅</text>

	<!-- Row 3: TDD EXECUTION LOOP -->
	<rect x="630" y="100" width="300" height="190" rx="14" fill="rgba(236,72,153,0.04)"
	stroke="rgba(236,72,153,0.2)" stroke-width="1.5" stroke-dasharray="6,4" />
	<text x="780" y="120" text-anchor="middle" font-family="Inter" font-size="10" fill="#ec4899" font-weight="700"
	letter-spacing="2">TDD EXECUTION LOOP (per task)</text>

	<rect x="650" y="130" width="110" height="35" rx="8" fill="rgba(16,185,129,0.2)" stroke="rgba(16,185,129,0.5)"
	stroke-width="1" />
	<text x="705" y="152" text-anchor="middle" font-family="Inter" font-size="10" fill="#34d399"
	font-weight="600">EXECUTION</text>
	<line x1="760" y1="147" x2="790" y2="147" stroke="#64748b" stroke-width="1" marker-end="url(#arrow)" />

	<rect x="795" y="130" width="110" height="35" rx="8" fill="rgba(245,158,11,0.2)" stroke="rgba(245,158,11,0.5)"
	stroke-width="1" />
	<text x="850" y="152" text-anchor="middle" font-family="Inter" font-size="10" fill="#fbbf24"
	font-weight="600">TASK_QA</text>

	<line x1="850" y1="165" x2="850" y2="185" stroke="#64748b" stroke-width="1" marker-end="url(#arrow)" />
	<rect x="795" y="190" width="110" height="35" rx="8" fill="rgba(59,130,246,0.2)" stroke="rgba(59,130,246,0.5)"
	stroke-width="1" />
	<text x="850" y="212" text-anchor="middle" font-family="Inter" font-size="10" fill="#60a5fa"
	font-weight="600">TASK_CODE</text>

	<line x1="795" y1="207" x2="760" y2="207" stroke="#64748b" stroke-width="1" marker-end="url(#arrow)" />
	<rect x="650" y="190" width="110" height="35" rx="8" fill="rgba(6,182,212,0.2)" stroke="rgba(6,182,212,0.5)"
	stroke-width="1" />
	<text x="705" y="212" text-anchor="middle" font-family="Inter" font-size="10" fill="#22d3ee"
	font-weight="600">TASK_TEST</text>

	<!-- Test results -->
	<line x1="705" y1="225" x2="705" y2="260" stroke="rgba(16,185,129,0.5)" stroke-width="1.5"
	marker-end="url(#arrow-green)" />
	<text x="718" y="245" font-family="Inter" font-size="9" fill="#10b981">pass ✅</text>

	<line x1="660" y1="225" x2="660" y2="255" stroke="rgba(239,68,68,0.5)" stroke-width="1.5"
	marker-end="url(#arrow-red)" />
	<text x="645" y="245" font-family="Inter" font-size="9" fill="#ef4444" text-anchor="end">fail ❌</text>

	<rect x="650" y="260" width="110" height="35" rx="8" fill="rgba(239,68,68,0.2)" stroke="rgba(239,68,68,0.5)"
	stroke-width="1" />
	<text x="705" y="278" text-anchor="middle" font-family="Inter" font-size="10" fill="#f87171"
	font-weight="600">TASK_RECOVERY</text>

	<!-- Recovery loop -->
	<path d="M 760 277 Q 790 277, 790 240 Q 790 210, 800 210" fill="none" stroke="rgba(239,68,68,0.4)"
	stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#arrow-red)" />
	<text x="802" y="250" font-family="Inter" font-size="8" fill="#f87171">retry</text>

	<!-- After execution loop -->
	<rect x="105" y="310" width="160" height="40" rx="8" fill="rgba(139,92,246,0.2)" stroke="rgba(139,92,246,0.5)"
	stroke-width="1.5" />
	<text x="185" y="335" text-anchor="middle" font-family="Inter" font-size="11" fill="#a78bfa"
	font-weight="600">SECURITY_AUDIT</text>
	<line x1="265" y1="330" x2="300" y2="330" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow)" />

	<rect x="305" y="310" width="120" height="40" rx="8" fill="rgba(59,130,246,0.2)" stroke="rgba(59,130,246,0.5)"
	stroke-width="1.5" />
	<text x="365" y="335" text-anchor="middle" font-family="Inter" font-size="11" fill="#60a5fa"
	font-weight="600">SUMMARY</text>
	<line x1="425" y1="330" x2="460" y2="330" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrow)" />

	<rect x="465" y="310" width="100" height="40" rx="8" fill="rgba(16,185,129,0.2)" stroke="rgba(16,185,129,0.5)"
	stroke-width="2" />
	<text x="515" y="335" text-anchor="middle" font-family="Inter" font-size="11" fill="#34d399"
	font-weight="700">DONE ✓</text>

	<!-- Connection from loop to security -->
	<line x1="705" y1="290" x2="705" y2="330" stroke="#64748b" stroke-width="1" stroke-dasharray="4,3" />
	<line x1="705" y1="330" x2="265" y2="330" stroke="#64748b" stroke-width="1" stroke-dasharray="4,3"
	marker-end="url(#arrow)" />
	<text x="500" y="320" font-family="Inter" font-size="9" fill="#64748b">all tasks complete</text>

	<!-- Error state -->
	<rect x="650" y="310" width="100" height="40" rx="8" fill="rgba(239,68,68,0.15)" stroke="rgba(239,68,68,0.5)"
	stroke-width="1.5" />
	<text x="700" y="335" text-anchor="middle" font-family="Inter" font-size="11" fill="#f87171"
	font-weight="600">ERROR</text>

	<!-- Legend -->
	<rect x="30" y="400" width="890" height="60" rx="10" fill="rgba(0,0,0,0.3)" stroke="var(--border-subtle)"
	stroke-width="1" />
	<text x="50" y="425" font-family="Inter" font-size="11" fill="#64748b" font-weight="600">LEGEND:</text>
	<rect x="120" y="413" width="12" height="12" rx="3" fill="rgba(59,130,246,0.3)" stroke="rgba(59,130,246,0.6)" />
	<text x="138" y="424" font-family="Inter" font-size="10" fill="#94a3b8">Requirements</text>
	<rect x="230" y="413" width="12" height="12" rx="3" fill="rgba(139,92,246,0.3)" stroke="rgba(139,92,246,0.6)" />
	<text x="248" y="424" font-family="Inter" font-size="10" fill="#94a3b8">Design</text>
	<rect x="310" y="413" width="12" height="12" rx="3" fill="rgba(245,158,11,0.3)" stroke="rgba(245,158,11,0.6)" />
	<text x="328" y="424" font-family="Inter" font-size="10" fill="#94a3b8">Checkpoint</text>
	<rect x="420" y="413" width="12" height="12" rx="3" fill="rgba(236,72,153,0.3)" stroke="rgba(236,72,153,0.6)" />
	<text x="438" y="424" font-family="Inter" font-size="10" fill="#94a3b8">TDD Loop</text>
	<rect x="520" y="413" width="12" height="12" rx="3" fill="rgba(239,68,68,0.3)" stroke="rgba(239,68,68,0.6)" />
	<text x="538" y="424" font-family="Inter" font-size="10" fill="#94a3b8">Recovery</text>
	<text x="620" y="424" font-family="Inter" font-size="10" fill="#94a3b8">⚠️ All transitions are <tspan
	font-weight="700" fill="#fbbf24">validated</tspan> — invalid transitions are rejected and logged</text>
	</svg>
	</div>
	</section>

	<!-- ╔══════════════════════════════════════════════════════════════════════════╗ -->
	<!-- ║ SLIDE 7: WORKFLOW — HANDOFFS & CHECKPOINTS ║ -->
	<!-- ╚══════════════════════════════════════════════════════════════════════════╝ -->
	<section class="slide" id="slide-7">
	<span class="slide-number">07 / 12</span>
	<span class="slide-tag tag-workflow">SECTION 2 — WORKFLOW DESIGN</span>
	<h1>Agent Handoffs & <span class="gradient-text">Human Checkpoints</span></h1>
	<div class="divider"></div>

	<div class="two-col">
	<div>
	<h3>How Agents Hand Off Work</h3>
	<p style="margin-bottom:16px; font-size:14px;">The Orchestrator is the <strong>sole coordinator</strong>. Agents
	never invoke each other directly. Each phase produces artifacts consumed by the next:</p>
	<div class="table-wrap">
	<table>
	<thead>
	<tr>
	<th>Phase</th>
	<th>Agent</th>
	<th>Produces</th>
	<th>Consumed By</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>1</td>
	<td style="color:var(--accent-blue)">Intake</td>
	<td>StructuredSpec</td>
	<td>Architect, all</td>
	</tr>
	<tr>
	<td>2</td>
	<td style="color:var(--accent-green)">Architect</td>
	<td>Architecture dict</td>
	<td>Planner, QA, Coder</td>
	</tr>
	<tr>
	<td>3</td>
	<td style="color:var(--accent-purple)">Planner</td>
	<td>ImplementationPlan</td>
	<td>Orchestrator loop</td>
	</tr>
	<tr>
	<td>4</td>
	<td style="color:var(--accent-orange)">QA</td>
	<td>Test files</td>
	<td>Coder, Test Runner</td>
	</tr>
	<tr>
	<td>5</td>
	<td style="color:var(--accent-cyan)">Coder</td>
	<td>Production files</td>
	<td>Test Runner, Security</td>
	</tr>
	<tr>
	<td>6</td>
	<td style="color:var(--accent-red)">Recovery</td>
	<td>Fix instructions</td>
	<td>Coder (retry)</td>
	</tr>
	<tr>
	<td>7</td>
	<td style="color:var(--accent-pink)">Security</td>
	<td>Audit report</td>
	<td>Summary</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	<div>
	<h3>🔒 Human-in-the-Loop Checkpoints</h3>
	<p style="margin-bottom:16px; font-size:14px;">ForgeAI pauses at <strong>configurable checkpoints</strong> for
	human review. All controllable via a single YAML file:</p>

	<div class="card card-orange" style="margin-bottom:16px;">
	<div class="card-title">Checkpoint 1: After Specification</div>
	<div class="card-desc">User reviews structured spec: requirements, models, API contracts. Can request changes
	before architecture begins.</div>
	</div>
	<div class="card card-purple" style="margin-bottom:16px;">
	<div class="card-title">Checkpoint 2: After Architecture</div>
	<div class="card-desc">User reviews directory layout, tech decisions. Approves before planning starts.</div>
	</div>
	<div class="card card-blue" style="margin-bottom:16px;">
	<div class="card-title">Checkpoint 3: After Plan (FR-06)</div>
	<div class="card-desc">User reviews ordered task list with risk levels, dependencies. <strong>Must approve
	before code generation.</strong></div>
	</div>
	<div class="card card-cyan">
	<div class="card-title">Per-Diff Review (FR-09)</div>
	<div class="card-desc">Each code change is shown as a diff summary before filesystem write.</div>
	</div>
	</div>
	</div>

	<div class="code-block" style="margin-top:20px;">
	<span class="code-comment"># default_config.yaml — Single file to control all behavior (NFR-03)</span><br>
	<span class="code-keyword">workflow:</span><br>
	<span class="code-keyword">checkpoints:</span><br>
	- <span class="code-string">"after_specification"</span><br>
	- <span class="code-string">"after_architecture"</span><br>
	- <span class="code-string">"after_plan"</span><br>
	<span class="code-keyword">auto_approve_checkpoints:</span> <span class="code-value">false</span>
	<span class="code-comment"># Set true for zero-touch demo mode</span><br>
	<span class="code-keyword">max_retries:</span> <span class="code-value">3</span>
	<span
	class="code-comment"># Configurable retry limit per task</span><br>
	<span class="code-keyword">retry_delay_seconds:</span> <span class="code-value">2</span>
	</div>
	</section>

	<!-- ╔══════════════════════════════════════════════════════════════════════════╗ -->
	<!-- ║ SLIDE 8: TDD EXECUTION DEEP DIVE ║ -->
	<!-- ╚══════════════════════════════════════════════════════════════════════════╝ -->
	<section class="slide" id="slide-8">
	<span class="slide-number">08 / 12</span>
	<span class="slide-tag tag-workflow">SECTION 2 — WORKFLOW DESIGN</span>
	<h1>TDD-First <span class="gradient-text">Execution Pipeline</span></h1>
	<div class="divider"></div>

	<div class="diagram-container">
	<svg width="900" height="380" viewBox="0 0 900 380" xmlns="http://www.w3.org/2000/svg">
	<defs>
	<marker id="arr" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
	<polygon points="0 0, 8 3, 0 6" fill="#64748b" />
	</marker>
	<marker id="arr-g" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
	<polygon points="0 0, 8 3, 0 6" fill="#10b981" />
	</marker>
	<marker id="arr-r" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
	<polygon points="0 0, 8 3, 0 6" fill="#ef4444" />
	</marker>
	</defs>

	<!-- Step 1 -->
	<rect x="20" y="10" width="180" height="160" rx="12" fill="rgba(16,185,129,0.06)" stroke="rgba(16,185,129,0.3)"
	stroke-width="1.5" />
	<text x="110" y="35" text-anchor="middle" font-family="Inter" font-size="10" fill="#10b981" font-weight="700"
	letter-spacing="1">STEP 1 — TDD</text>
	<text x="110" y="65" text-anchor="middle" font-family="Inter" font-size="28">✅</text>
	<text x="110" y="90" text-anchor="middle" font-family="Inter" font-size="13" fill="#f1f5f9" font-weight="700">QA
	Agent</text>
	<text x="110" y="110" text-anchor="middle" font-family="Inter" font-size="10" fill="#94a3b8">Writes failing
	tests</text>
	<text x="110" y="125" text-anchor="middle" font-family="Inter" font-size="10" fill="#94a3b8">BEFORE any
	code</text>
	<text x="110" y="155" text-anchor="middle" font-family="JetBrains Mono" font-size="9" fill="#10b981">→
	tests/test_*.py</text>

	<line x1="200" y1="90" x2="240" y2="90" stroke="#64748b" stroke-width="1.5" marker-end="url(#arr)" />

	<!-- Step 2 -->
	<rect x="245" y="10" width="180" height="160" rx="12" fill="rgba(59,130,246,0.06)" stroke="rgba(59,130,246,0.3)"
	stroke-width="1.5" />
	<text x="335" y="35" text-anchor="middle" font-family="Inter" font-size="10" fill="#3b82f6" font-weight="700"
	letter-spacing="1">STEP 2 — CODE</text>
	<text x="335" y="65" text-anchor="middle" font-family="Inter" font-size="28">💻</text>
	<text x="335" y="90" text-anchor="middle" font-family="Inter" font-size="13" fill="#f1f5f9"
	font-weight="700">Coder Agent</text>
	<text x="335" y="110" text-anchor="middle" font-family="Inter" font-size="10" fill="#94a3b8">Generates code
	to</text>
	<text x="335" y="125" text-anchor="middle" font-family="Inter" font-size="10" fill="#94a3b8">pass failing
	tests</text>
	<text x="335" y="155" text-anchor="middle" font-family="JetBrains Mono" font-size="9" fill="#3b82f6">→
	src/*.py</text>

	<line x1="425" y1="90" x2="465" y2="90" stroke="#64748b" stroke-width="1.5" marker-end="url(#arr)" />

	<!-- Step 3 -->
	<rect x="470" y="10" width="180" height="160" rx="12" fill="rgba(6,182,212,0.06)" stroke="rgba(6,182,212,0.3)"
	stroke-width="1.5" />
	<text x="560" y="35" text-anchor="middle" font-family="Inter" font-size="10" fill="#06b6d4" font-weight="700"
	letter-spacing="1">STEP 3 — TEST</text>
	<text x="560" y="65" text-anchor="middle" font-family="Inter" font-size="28">🧪</text>
	<text x="560" y="90" text-anchor="middle" font-family="Inter" font-size="13" fill="#f1f5f9"
	font-weight="700">Test Runner</text>
	<text x="560" y="110" text-anchor="middle" font-family="Inter" font-size="10" fill="#94a3b8">Executes pytest
	suite</text>
	<text x="560" y="125" text-anchor="middle" font-family="Inter" font-size="10" fill="#94a3b8">Pass/Fail
	verdict</text>
	<text x="560" y="155" text-anchor="middle" font-family="JetBrains Mono" font-size="9" fill="#06b6d4">→ {passed,
	failed, output}</text>

	<!-- Success path -->
	<line x1="650" y1="60" x2="710" y2="60" stroke="rgba(16,185,129,0.6)" stroke-width="2"
	marker-end="url(#arr-g)" />
	<rect x="715" y="30" width="160" height="60" rx="10" fill="rgba(16,185,129,0.15)" stroke="rgba(16,185,129,0.5)"
	stroke-width="2" />
	<text x="795" y="55" text-anchor="middle" font-family="Inter" font-size="13" fill="#34d399" font-weight="700">✅
	TASK PASSED</text>
	<text x="795" y="73" text-anchor="middle" font-family="Inter" font-size="10" fill="#94a3b8">Move to next
	task</text>
	<text x="680" y="53" font-family="Inter" font-size="9" fill="#10b981" font-weight="600">PASS</text>

	<!-- Failure path -->
	<line x1="560" y1="170" x2="560" y2="210" stroke="rgba(239,68,68,0.6)" stroke-width="2"
	marker-end="url(#arr-r)" />
	<text x="575" y="195" font-family="Inter" font-size="9" fill="#ef4444" font-weight="600">FAIL</text>

	<!-- Step 4: Recovery -->
	<rect x="470" y="215" width="180" height="140" rx="12" fill="rgba(239,68,68,0.06)" stroke="rgba(239,68,68,0.3)"
	stroke-width="1.5" />
	<text x="560" y="240" text-anchor="middle" font-family="Inter" font-size="10" fill="#ef4444" font-weight="700"
	letter-spacing="1">STEP 4 — RECOVERY</text>
	<text x="560" y="268" text-anchor="middle" font-family="Inter" font-size="28">🔄</text>
	<text x="560" y="293" text-anchor="middle" font-family="Inter" font-size="13" fill="#f1f5f9"
	font-weight="700">Recovery Agent</text>
	<text x="560" y="312" text-anchor="middle" font-family="Inter" font-size="10" fill="#94a3b8">Diagnose → Fix →
	Strategy</text>
	<text x="560" y="345" text-anchor="middle" font-family="JetBrains Mono" font-size="9" fill="#ef4444">RETRY \|
	MODIFY \| SKIP \| ESCALATE</text>

	<!-- Retry loop back to Coder -->
	<path d="M 470 285 L 335 285 L 335 170" fill="none" stroke="rgba(245,158,11,0.5)" stroke-width="2"
	stroke-dasharray="6,3" marker-end="url(#arr)" />
	<text x="380" y="275" font-family="Inter" font-size="10" fill="#fbbf24" font-weight="600">Retry with error
	context</text>

	<!-- Context enrichment -->
	<rect x="20" y="220" width="400" height="140" rx="12" fill="rgba(0,0,0,0.3)" stroke="var(--border-subtle)"
	stroke-width="1" />
	<text x="40" y="248" font-family="Inter" font-size="12" fill="#f1f5f9" font-weight="700">📊 Error Context
	Accumulation (per retry)</text>
	<text x="40" y="275" font-family="JetBrains Mono" font-size="11" fill="#94a3b8">Attempt 1: spec + arch + task +
	tests</text>
	<text x="40" y="295" font-family="JetBrains Mono" font-size="11" fill="#fbbf24">Attempt 2: + error msg +
	traceback</text>
	<text x="40" y="315" font-family="JetBrains Mono" font-size="11" fill="#f97316">Attempt 3: + all prior errors +
	fix instructions</text>
	<text x="40" y="335" font-family="JetBrains Mono" font-size="11" fill="#ef4444">Attempt 4: exhausted → SKIP or
	ESCALATE</text>
	</svg>
	</div>
	</section>

	<!-- ╔══════════════════════════════════════════════════════════════════════════╗ -->
	<!-- ║ SLIDE 9: FAILURE STRATEGY ║ -->
	<!-- ╚══════════════════════════════════════════════════════════════════════════╝ -->
	<section class="slide" id="slide-9">
	<span class="slide-number">09 / 12</span>
	<span class="slide-tag tag-failure">SECTION 3 — FAILURE STRATEGY</span>
	<h1>4-Tier Cascading <span class="gradient-text">Recovery System</span></h1>
	<div class="divider"></div>

	<div class="diagram-container">
	<svg width="900" height="370" viewBox="0 0 900 370" xmlns="http://www.w3.org/2000/svg">
	<defs>
	<marker id="a1" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
	<polygon points="0 0, 8 3, 0 6" fill="#64748b" />
	</marker>
	</defs>

	<!-- Failure trigger -->
	<rect x="350" y="5" width="200" height="45" rx="10" fill="rgba(239,68,68,0.2)" stroke="rgba(239,68,68,0.6)"
	stroke-width="2" />
	<text x="450" y="33" text-anchor="middle" font-family="Inter" font-size="14" fill="#f87171" font-weight="700">❌
	Test Failure Detected</text>

	<line x1="450" y1="50" x2="450" y2="75" stroke="#64748b" stroke-width="1.5" marker-end="url(#a1)" />

	<!-- Recovery Agent -->
	<rect x="340" y="80" width="220" height="45" rx="10" fill="rgba(59,130,246,0.15)" stroke="rgba(59,130,246,0.5)"
	stroke-width="1.5" />
	<text x="450" y="108" text-anchor="middle" font-family="Inter" font-size="13" fill="#60a5fa"
	font-weight="700">🔍 Recovery Agent Diagnoses</text>

	<!-- Classification -->
	<line x1="450" y1="125" x2="450" y2="150" stroke="#64748b" stroke-width="1.5" marker-end="url(#a1)" />
	<rect x="370" y="155" width="160" height="30" rx="8" fill="rgba(139,92,246,0.15)" stroke="rgba(139,92,246,0.4)"
	stroke-width="1" />
	<text x="450" y="175" text-anchor="middle" font-family="Inter" font-size="11" fill="#a78bfa"
	font-weight="600">Error Classification</text>

	<!-- 4 Strategies -->
	<line x1="300" y1="170" x2="125" y2="210" stroke="#64748b" stroke-width="1" marker-end="url(#a1)" />
	<line x1="390" y1="185" x2="325" y2="210" stroke="#64748b" stroke-width="1" marker-end="url(#a1)" />
	<line x1="510" y1="185" x2="575" y2="210" stroke="#64748b" stroke-width="1" marker-end="url(#a1)" />
	<line x1="600" y1="170" x2="775" y2="210" stroke="#64748b" stroke-width="1" marker-end="url(#a1)" />

	<!-- Strategy 1: RETRY -->
	<rect x="20" y="215" width="210" height="140" rx="12" fill="rgba(16,185,129,0.08)" stroke="rgba(16,185,129,0.4)"
	stroke-width="1.5" />
	<text x="125" y="240" text-anchor="middle" font-family="Inter" font-size="12" fill="#34d399"
	font-weight="700">🔧 RETRY_WITH_FIX</text>
	<text x="125" y="260" text-anchor="middle" font-family="Inter" font-size="10" fill="#94a3b8">Confidence:
	HIGH</text>
	<line x1="40" y1="270" x2="210" y2="270" stroke="rgba(255,255,255,0.05)" stroke-width="1" />
	<text x="35" y="290" font-family="Inter" font-size="10" fill="#94a3b8">• Specific fix instructions</text>
	<text x="35" y="308" font-family="Inter" font-size="10" fill="#94a3b8">• Error + traceback → Coder</text>
	<text x="35" y="326" font-family="Inter" font-size="10" fill="#94a3b8">• Modify tests if bug in test</text>
	<text x="35" y="344" font-family="Inter" font-size="10" fill="#10b981" font-weight="600">Triggers: syntax,
	import</text>

	<!-- Strategy 2: MODIFY -->
	<rect x="245" y="215" width="210" height="140" rx="12" fill="rgba(245,158,11,0.08)"
	stroke="rgba(245,158,11,0.4)" stroke-width="1.5" />
	<text x="350" y="240" text-anchor="middle" font-family="Inter" font-size="12" fill="#fbbf24"
	font-weight="700">🔄 MODIFY_APPROACH</text>
	<text x="350" y="260" text-anchor="middle" font-family="Inter" font-size="10" fill="#94a3b8">Confidence:
	MEDIUM</text>
	<line x1="260" y1="270" x2="440" y2="270" stroke="rgba(255,255,255,0.05)" stroke-width="1" />
	<text x="260" y="290" font-family="Inter" font-size="10" fill="#94a3b8">• Different algorithm/pattern</text>
	<text x="260" y="308" font-family="Inter" font-size="10" fill="#94a3b8">• Revised test expectations</text>
	<text x="260" y="326" font-family="Inter" font-size="10" fill="#94a3b8">• Fresh code generation</text>
	<text x="260" y="344" font-family="Inter" font-size="10" fill="#f59e0b" font-weight="600">Triggers: logic,
	approach</text>

	<!-- Strategy 3: SKIP -->
	<rect x="470" y="215" width="210" height="140" rx="12" fill="rgba(100,116,139,0.08)"
	stroke="rgba(100,116,139,0.4)" stroke-width="1.5" />
	<text x="575" y="240" text-anchor="middle" font-family="Inter" font-size="12" fill="#94a3b8"
	font-weight="700">⏭️ SKIP_TASK</text>
	<text x="575" y="260" text-anchor="middle" font-family="Inter" font-size="10" fill="#94a3b8">Confidence:
	N/A</text>
	<line x1="485" y1="270" x2="665" y2="270" stroke="rgba(255,255,255,0.05)" stroke-width="1" />
	<text x="485" y="290" font-family="Inter" font-size="10" fill="#94a3b8">• Task is non-blocking</text>
	<text x="485" y="308" font-family="Inter" font-size="10" fill="#94a3b8">• No downstream deps</text>
	<text x="485" y="326" font-family="Inter" font-size="10" fill="#94a3b8">• Log and proceed</text>
	<text x="485" y="344" font-family="Inter" font-size="10" fill="#64748b" font-weight="600">Triggers: retries
	exhausted</text>

	<!-- Strategy 4: ESCALATE -->
	<rect x="695" y="215" width="190" height="140" rx="12" fill="rgba(239,68,68,0.08)" stroke="rgba(239,68,68,0.4)"
	stroke-width="1.5" />
	<text x="790" y="240" text-anchor="middle" font-family="Inter" font-size="12" fill="#f87171"
	font-weight="700">🚨 ESCALATE</text>
	<text x="790" y="260" text-anchor="middle" font-family="Inter" font-size="10" fill="#94a3b8">Confidence:
	LOW</text>
	<line x1="710" y1="270" x2="870" y2="270" stroke="rgba(255,255,255,0.05)" stroke-width="1" />
	<text x="710" y="290" font-family="Inter" font-size="10" fill="#94a3b8">• Pause pipeline</text>
	<text x="710" y="308" font-family="Inter" font-size="10" fill="#94a3b8">• Show diagnostics to user</text>
	<text x="710" y="326" font-family="Inter" font-size="10" fill="#94a3b8">• User decides next step</text>
	<text x="710" y="344" font-family="Inter" font-size="10" fill="#ef4444" font-weight="600">Triggers: human
	judgment</text>
	</svg>
	</div>

	<div class="two-col" style="margin-top:10px;">
	<div class="highlight-box">
	<p>🧠 <strong>Diagnostic Output Example:</strong></p>
	<div class="code-block" style="margin-top:8px; font-size:11px;">
	{<br>
	<span class="code-string">"diagnosis"</span>: {<br>
	<span class="code-string">"root_cause"</span>: <span class="code-string">"ImportError:
	no 'APIRoute'"</span>,<br>
	<span class="code-string">"error_type"</span>: <span
	class="code-string">"import"</span>,<br>
	<span class="code-string">"error_in"</span>: <span
	class="code-string">"production_code"</span><br>
	},<br>
	<span class="code-string">"strategy"</span>: <span
	class="code-string">"RETRY_WITH_FIX"</span>,<br>
	<span class="code-string">"fix_instructions"</span>: <span class="code-string">"Use
	APIRouter"</span>,<br>
	<span class="code-string">"confidence"</span>: <span class="code-value">0.95</span><br>
	}
	</div>
	</div>
	<div>
	<h3>Guardrail Safety (Configurable via YAML)</h3>
	<div class="code-block" style="font-size:11px;">
	<span class="code-keyword">guardrails:</span><br>
	<span class="code-keyword">max_files_per_task:</span> <span class="code-value">8</span><br>
	<span class="code-keyword">max_lines_per_file:</span> <span class="code-value">600</span><br>
	<span class="code-keyword">blocked_commands:</span><br>
	- <span class="code-string">"rm -rf /"</span><br>
	- <span class="code-string">"del /s /q C:\\"</span><br>
	<span class="code-keyword">require_approval_for:</span><br>
	- <span class="code-string">"database_schema_changes"</span><br>
	- <span class="code-string">"security_sensitive_patterns"</span>
	</div>
	</div>
	</div>
	</section>

	<!-- ╔══════════════════════════════════════════════════════════════════════════╗ -->
	<!-- ║ SLIDE 10: TECH STACK ║ -->
	<!-- ╚══════════════════════════════════════════════════════════════════════════╝ -->
	<section class="slide" id="slide-10">
	<span class="slide-number">10 / 12</span>
	<span class="slide-tag tag-tech">SECTION 4 — TECH STACK JUSTIFICATION</span>
	<h1>Every Choice is <span class="gradient-text">Deliberate</span></h1>
	<div class="divider"></div>

	<div class="two-col">
	<div>
	<h3>🤖 LLM: Google Gemini 2.5 Flash</h3>
	<div class="table-wrap">
	<table>
	<thead>
	<tr>
	<th>Criterion</th>
	<th>Gemini 2.5</th>
	<th>GPT-4o</th>
	<th>Claude 3.5</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td style="color:var(--text-primary)">Speed</td>
	<td><span class="check">⚡ Fastest</span></td>
	<td>🔵 Fast</td>
	<td>🟡 Medium</td>
	</tr>
	<tr>
	<td style="color:var(--text-primary)">Context</td>
	<td><span class="check">1M tokens</span></td>
	<td>128K</td>
	<td>200K</td>
	</tr>
	<tr>
	<td style="color:var(--text-primary)">Cost</td>
	<td><span class="check">Free tier</span></td>
	<td><span class="cross">Paid</span></td>
	<td><span class="cross">Paid</span></td>
	</tr>
	<tr>
	<td style="color:var(--text-primary)">JSON Mode</td>
	<td><span class="check">✅ Native</span></td>
	<td><span class="check">✅</span></td>
	<td><span class="cross">❌</span></td>
	</tr>
	<tr>
	<td style="color:var(--text-primary)">Code Quality</td>
	<td><span class="check">Excellent</span></td>
	<td><span class="check">Excellent</span></td>
	<td><span class="check">Excellent</span></td>
	</tr>
	</tbody>
	</table>
	</div>
	<div class="highlight-box" style="margin-top:16px;">
	<p>💡 <strong>Why 1M context?</strong> Our agents pass full project state — spec, architecture, existing
	files, error history — to the LLM. A large context window is critical for maintaining coherence across
	complex multi-file projects.</p>
	</div>
	</div>
	<div>
	<h3>🔧 Framework & Libraries</h3>
	<div class="card-grid" style="grid-template-columns: 1fr 1fr; gap:12px;">
	<div class="card card-blue" style="padding:16px;">
	<div class="card-title" style="font-size:13px;">Python 3.11+</div>
	<div class="card-desc" style="font-size:11px;">Hackathon requirement. Rich ecosystem, type hints.</div>
	</div>
	<div class="card card-purple" style="padding:16px;">
	<div class="card-title" style="font-size:13px;">Pydantic v2</div>
	<div class="card-desc" style="font-size:11px;">Strict contracts at every agent boundary. Auto-validation.
	</div>
	</div>
	<div class="card card-green" style="padding:16px;">
	<div class="card-title" style="font-size:13px;">pytest</div>
	<div class="card-desc" style="font-size:11px;">Industry standard. Rich assertions. Coverage plugin.</div>
	</div>
	<div class="card card-orange" style="padding:16px;">
	<div class="card-title" style="font-size:13px;">Rich</div>
	<div class="card-desc" style="font-size:11px;">Premium terminal UX. Live tables, spinners, syntax
	highlighting.</div>
	</div>
	<div class="card card-cyan" style="padding:16px;">
	<div class="card-title" style="font-size:13px;">FastAPI</div>
	<div class="card-desc" style="font-size:11px;">Real-time web dashboard. Async. Auto-docs.</div>
	</div>
	<div class="card card-red" style="padding:16px;">
	<div class="card-title" style="font-size:13px;">PyYAML</div>
	<div class="card-desc" style="font-size:11px;">Human-readable config. NFR-03 compliance.</div>
	</div>
	</div>
	</div>
	</div>

	<div class="highlight-box warning" style="margin-top:24px;">
	<p>⚠️ <strong>Why NOT LangChain / CrewAI / AutoGen?</strong></p>
	<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; margin-top:12px;">
	<div>
	<p style="font-size:13px; color:var(--text-secondary);">
	<strong style="color:var(--accent-orange);">Abstraction overhead.</strong> Custom FSM gives us full control
	over state transitions and recovery logic.
	</p>
	</div>
	<div>
	<p style="font-size:13px; color:var(--text-secondary);">
	<strong style="color:var(--accent-orange);">Debugging difficulty.</strong> With LangChain, debugging agent
	failures through deep abstraction layers is painful.
	</p>
	</div>
	<div>
	<p style="font-size:13px; color:var(--text-secondary);">
	<strong style="color:var(--accent-orange);">Evaluation criteria.</strong> The hackathon evaluates
	<em>our</em> systems design, not a framework we imported.
	</p>
	</div>
	</div>
	</div>
	</section>

	<!-- ╔══════════════════════════════════════════════════════════════════════════╗ -->
	<!-- ║ SLIDE 11: RISK ASSESSMENT ║ -->
	<!-- ╚══════════════════════════════════════════════════════════════════════════╝ -->
	<section class="slide" id="slide-11">
	<span class="slide-number">11 / 12</span>
	<span class="slide-tag tag-risk">SECTION 5 — RISK ASSESSMENT</span>
	<h1>Honest Risk <span class="gradient-text">Assessment & Mitigation</span></h1>
	<div class="divider"></div>

	<div class="diagram-container" style="padding:20px;">
	<svg width="880" height="300" viewBox="0 0 880 300" xmlns="http://www.w3.org/2000/svg">
	<!-- Grid -->
	<text x="440" y="20" text-anchor="middle" font-family="Inter" font-size="14" fill="#f1f5f9"
	font-weight="700">Risk Impact vs Probability Matrix</text>

	<!-- Axes -->
	<line x1="80" y1="40" x2="80" y2="270" stroke="#334155" stroke-width="1.5" />
	<line x1="80" y1="270" x2="860" y2="270" stroke="#334155" stroke-width="1.5" />
	<text x="30" y="160" text-anchor="middle" font-family="Inter" font-size="10" fill="#64748b"
	transform="rotate(-90,30,160)">← IMPACT →</text>
	<text x="470" y="295" text-anchor="middle" font-family="Inter" font-size="10" fill="#64748b">← PROBABILITY
	→</text>
	<text x="80" y="55" font-family="Inter" font-size="9" fill="#64748b">HIGH</text>
	<text x="80" y="268" font-family="Inter" font-size="9" fill="#64748b">LOW</text>

	<!-- Quadrants -->
	<rect x="80" y="40" width="390" height="115" rx="0" fill="rgba(16,185,129,0.04)" />
	<rect x="470" y="40" width="390" height="115" rx="0" fill="rgba(239,68,68,0.06)" />
	<rect x="80" y="155" width="390" height="115" rx="0" fill="rgba(59,130,246,0.03)" />
	<rect x="470" y="155" width="390" height="115" rx="0" fill="rgba(245,158,11,0.04)" />

	<text x="270" y="65" text-anchor="middle" font-family="Inter" font-size="10" fill="#10b981"
	font-weight="600">MONITOR</text>
	<text x="660" y="65" text-anchor="middle" font-family="Inter" font-size="10" fill="#ef4444" font-weight="600">⚠️
	MITIGATE NOW</text>
	<text x="270" y="175" text-anchor="middle" font-family="Inter" font-size="10" fill="#3b82f6"
	font-weight="600">ACCEPT</text>
	<text x="660" y="175" text-anchor="middle" font-family="Inter" font-size="10" fill="#f59e0b"
	font-weight="600">PLAN CONTINGENCY</text>

	<!-- Risk dots -->
	<!-- R1: LLM Hallucination — high prob, high impact -->
	<circle cx="700" cy="80" r="22" fill="rgba(239,68,68,0.2)" stroke="#ef4444" stroke-width="2" />
	<text x="700" y="84" text-anchor="middle" font-family="Inter" font-size="9" fill="#f87171"
	font-weight="700">R1</text>
	<text x="740" y="75" font-family="Inter" font-size="9" fill="#94a3b8">LLM</text>
	<text x="740" y="88" font-family="Inter" font-size="9" fill="#94a3b8">Hallucination</text>

	<!-- R2: Complex Tier — medium-high prob, high impact -->
	<circle cx="580" cy="95" r="20" fill="rgba(245,158,11,0.2)" stroke="#f59e0b" stroke-width="2" />
	<text x="580" y="99" text-anchor="middle" font-family="Inter" font-size="9" fill="#fbbf24"
	font-weight="700">R2</text>
	<text x="620" y="90" font-family="Inter" font-size="9" fill="#94a3b8">Complex Tier</text>
	<text x="620" y="103" font-family="Inter" font-size="9" fill="#94a3b8">Failure</text>

	<!-- R3: Test Flakiness — medium prob, medium impact -->
	<circle cx="530" cy="180" r="18" fill="rgba(245,158,11,0.15)" stroke="#f59e0b" stroke-width="1.5" />
	<text x="530" y="184" text-anchor="middle" font-family="Inter" font-size="9" fill="#fbbf24"
	font-weight="700">R3</text>
	<text x="565" y="180" font-family="Inter" font-size="9" fill="#94a3b8">Test Flakiness</text>

	<!-- R4: API Rate Limits — medium prob, medium impact -->
	<circle cx="400" cy="200" r="16" fill="rgba(59,130,246,0.15)" stroke="#3b82f6" stroke-width="1.5" />
	<text x="400" y="204" text-anchor="middle" font-family="Inter" font-size="9" fill="#60a5fa"
	font-weight="700">R4</text>
	<text x="440" y="200" font-family="Inter" font-size="9" fill="#94a3b8">API Rate Limits</text>

	<!-- R5: Context Overflow — low prob, medium impact -->
	<circle cx="250" cy="140" r="16" fill="rgba(16,185,129,0.15)" stroke="#10b981" stroke-width="1.5" />
	<text x="250" y="144" text-anchor="middle" font-family="Inter" font-size="9" fill="#34d399"
	font-weight="700">R5</text>
	<text x="290" y="140" font-family="Inter" font-size="9" fill="#94a3b8">Context Overflow</text>
	</svg>
	</div>

	<div class="table-wrap">
	<table>
	<thead>
	<tr>
	<th style="width:30px;">#</th>
	<th style="width:180px;">Risk</th>
	<th style="width:70px;">Impact</th>
	<th style="width:80px;">Probability</th>
	<th>Mitigation Strategy</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><span class="status-badge badge-red">R1</span></td>
	<td style="color:var(--text-primary); font-weight:600;">LLM Hallucination</td>
	<td>🔴 High</td>
	<td>🔴 High</td>
	<td>TDD-first ensures every line is validated. Recovery agent re-diagnoses with accumulated error context
	across retries.</td>
	</tr>
	<tr>
	<td><span class="status-badge badge-orange">R2</span></td>
	<td style="color:var(--text-primary); font-weight:600;">Complex Tier Failure</td>
	<td>🔴 High</td>
	<td>🟡 Med</td>
	<td>Planner assigns risk levels per task. High-risk tasks get extra retries. Gracefully skip non-critical
	tasks.</td>
	</tr>
	<tr>
	<td><span class="status-badge badge-orange">R3</span></td>
	<td style="color:var(--text-primary); font-weight:600;">Test Flakiness</td>
	<td>🟡 Med</td>
	<td>🟡 Med</td>
	<td>Recovery Agent can <strong>modify test code</strong> if bug is in test. Double-validate test design
	against spec.</td>
	</tr>
	<tr>
	<td><span class="status-badge badge-blue">R4</span></td>
	<td style="color:var(--text-primary); font-weight:600;">API Rate Limiting</td>
	<td>🟡 Med</td>
	<td>🟡 Med</td>
	<td>LLM Gateway has exponential backoff (2s→4s→8s). Max 3 retries per API call. Proactive token tracking.
	</td>
	</tr>
	<tr>
	<td><span class="status-badge badge-green">R5</span></td>
	<td style="color:var(--text-primary); font-weight:600;">Context Overflow</td>
	<td>🟡 Med</td>
	<td>🟢 Low</td>
	<td>Gemini's 1M token context virtually eliminates this. Files truncated to 1500 chars when injected into
	prompts.</td>
	</tr>
	</tbody>
	</table>
	</div>
	</section>

	<!-- ╔══════════════════════════════════════════════════════════════════════════╗ -->
	<!-- ║ SLIDE 12: SUMMARY & CLOSING ║ -->
	<!-- ╚══════════════════════════════════════════════════════════════════════════╝ -->
	<section class="slide" id="slide-12">
	<span class="slide-number">12 / 12</span>
	<span class="slide-tag tag-intro">SUMMARY</span>
	<h1>ForgeAI: <span class="gradient-text">Ready to Build</span></h1>
	<div class="divider"></div>

	<div class="two-col">
	<div>
	<h3>📊 Evaluation Alignment</h3>
	<div class="table-wrap">
	<table>
	<thead>
	<tr>
	<th>Criterion</th>
	<th>Pts</th>
	<th>Our Strategy</th>
	<th>Status</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td style="color:var(--text-primary); font-weight:600;">Agentic Autonomy</td>
	<td style="color:var(--accent-blue); font-weight:700;">30</td>
	<td>Zero-touch pipeline. Auto-approve mode.</td>
	<td><span class="status-badge badge-green">✅</span></td>
	</tr>
	<tr>
	<td style="color:var(--text-primary); font-weight:600;">TDD & Verification</td>
	<td style="color:var(--accent-blue); font-weight:700;">25</td>
	<td>QA writes tests BEFORE Coder writes code.</td>
	<td><span class="status-badge badge-green">✅</span></td>
	</tr>
	<tr>
	<td style="color:var(--text-primary); font-weight:600;">Complex Logic & State</td>
	<td style="color:var(--accent-blue); font-weight:700;">20</td>
	<td>16-state FSM. Dependency-aware scheduling.</td>
	<td><span class="status-badge badge-green">✅</span></td>
	</tr>
	<tr>
	<td style="color:var(--text-primary); font-weight:600;">Failure Recovery</td>
	<td style="color:var(--accent-blue); font-weight:700;">10</td>
	<td>4-tier cascade: Retry→Modify→Skip→Escalate.</td>
	<td><span class="status-badge badge-green">✅</span></td>
	</tr>
	<tr>
	<td style="color:var(--text-primary); font-weight:600;">Code Quality</td>
	<td style="color:var(--accent-blue); font-weight:700;">10</td>
	<td>Modular, typed, documented, config-driven.</td>
	<td><span class="status-badge badge-green">✅</span></td>
	</tr>
	<tr>
	<td style="color:var(--text-primary); font-weight:600;">Extended Features</td>
	<td style="color:var(--accent-blue); font-weight:700;">5</td>
	<td>Security audit, Docker, Web dashboard.</td>
	<td><span class="status-badge badge-green">✅</span></td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	<div>
	<h3>📁 Output Artifacts Per Run</h3>
	<div class="card card-green" style="margin-bottom:10px; padding:14px;">
	<div class="card-title" style="font-size:12px;">📄 structured_specification.yaml</div>
	<div class="card-desc" style="font-size:11px;">Machine + human-readable refined spec (FR-01, FR-02)</div>
	</div>
	<div class="card card-blue" style="margin-bottom:10px; padding:14px;">
	<div class="card-title" style="font-size:12px;">🏗️ architecture.json</div>
	<div class="card-desc" style="font-size:11px;">Project structure, models, API contracts (FR-04)</div>
	</div>
	<div class="card card-purple" style="margin-bottom:10px; padding:14px;">
	<div class="card-title" style="font-size:12px;">📋 implementation_plan.json</div>
	<div class="card-desc" style="font-size:11px;">Ordered tasks with risks & dependencies (FR-05)</div>
	</div>
	<div class="card card-orange" style="margin-bottom:10px; padding:14px;">
	<div class="card-title" style="font-size:12px;">📝 forgeai_activity.log</div>
	<div class="card-desc" style="font-size:11px;">Timestamped log of every action (NFR-02)</div>
	</div>
	<div class="card card-cyan" style="margin-bottom:10px; padding:14px;">
	<div class="card-title" style="font-size:12px;">📦 generated_project/ + tests/</div>
	<div class="card-desc" style="font-size:11px;">Complete runnable project with TDD test suite</div>
	</div>
	<div class="card card-red" style="padding:14px;">
	<div class="card-title" style="font-size:12px;">📊 workflow_summary.json + security_report.json</div>
	<div class="card-desc" style="font-size:11px;">Summary: tasks, files, tests, API calls (NFR-06)</div>
	</div>
	</div>
	</div>

	<div class="highlight-box success" style="margin-top:24px; text-align:center;">
	<p style="font-size:18px;">
	🚀 <strong>ForgeAI is architecturally complete and ready for Phase 2 implementation.</strong><br>
	<span style="font-size:14px; color:var(--text-secondary);">7 agents. 16-state FSM. TDD-first. Intelligent
	recovery. Built from scratch — no LangChain, no shortcuts, pure systems engineering.</span>
	</p>
	</div>
	</section>

	<!-- Navigation dots -->
	<nav class="nav-bar" id="navBar">
	<button class="nav-dot active" onclick="scrollToSlide(1)"></button>
	<button class="nav-dot" onclick="scrollToSlide(2)"></button>
	<button class="nav-dot" onclick="scrollToSlide(3)"></button>
	<button class="nav-dot" onclick="scrollToSlide(4)"></button>
	<button class="nav-dot" onclick="scrollToSlide(5)"></button>
	<button class="nav-dot" onclick="scrollToSlide(6)"></button>
	<button class="nav-dot" onclick="scrollToSlide(7)"></button>
	<button class="nav-dot" onclick="scrollToSlide(8)"></button>
	<button class="nav-dot" onclick="scrollToSlide(9)"></button>
	<button class="nav-dot" onclick="scrollToSlide(10)"></button>
	<button class="nav-dot" onclick="scrollToSlide(11)"></button>
	<button class="nav-dot" onclick="scrollToSlide(12)"></button>
	</nav>

	<script>
	function scrollToSlide(n) {
	document.getElementById('slide-' + n).scrollIntoView({ behavior: 'smooth' });
	}

	// Update active dot on scroll
	const slides = document.querySelectorAll('.slide');
	const dots = document.querySelectorAll('.nav-dot');

	const observer = new IntersectionObserver(entries => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	const idx = Array.from(slides).indexOf(entry.target);
	dots.forEach(d => d.classList.remove('active'));
	if (dots[idx]) dots[idx].classList.add('active');
	}
	});
	}, { threshold: 0.5 });

	slides.forEach(s => observer.observe(s));

	// Keyboard navigation
	document.addEventListener('keydown', e => {
	const current = Array.from(dots).findIndex(d => d.classList.contains('active'));
	if (e.key === 'ArrowDown' \|\| e.key === 'ArrowRight' \|\| e.key === ' ') {
	e.preventDefault();
	if (current < slides.length - 1) scrollToSlide(current + 2);
	} else if (e.key === 'ArrowUp' \|\| e.key === 'ArrowLeft') {
	e.preventDefault();
	if (current > 0) scrollToSlide(current);
	}
	});
	</script>
	</body>

	</html>