# Phase 4: AI Integration + Story Progression + Quest System ## Implementation Plan > **Note:** This document contains detailed implementation tasks for developers building the API backend. > For high-level project roadmap and progress tracking, see [/docs/ROADMAP.md](../../docs/ROADMAP.md). **Document Version:** 1.2 **Created:** November 16, 2025 **Last Updated:** November 23, 2025 **Status:** In Progress **Duration:** 3 weeks (21 days) **Total Tasks:** 45 tasks **Completed Tasks:** 22/45 (49%) --- ### Next Tasks - Task 8.29: Create story gameplay template with HTMX --- ## Overview Phase 4 delivers the core single-player gameplay experience for Code of Conquest. This phase integrates AI narrative generation via Replicate (Llama-3 and Claude models), implements turn-based story progression with button-based actions, and creates a context-aware quest system. > **Architecture Note:** All AI models (Llama-3, Claude Haiku/Sonnet/Opus) are accessed through the Replicate API for unified billing and management. **Key Deliverables:** - AI narrative generation with tier-based model selection - Turn-based story progression system - YAML-driven quest system with context-aware offering - Cost tracking and usage limits - Complete solo gameplay loop **Development Approach:** - Tasks are moderately granular (4 hours each) - Testing bundled into implementation tasks - Verification checkpoints after major features - YAML data created inline with features --- ## Week 8: Story Progression System (Days 8-14) **Goal:** Implement turn-based story progression with button-based actions ### Task Group 8: Story UI & Integration (Tasks 29-31) #### Task 8.29: Create story gameplay template with HTMX **Duration:** 5 hours **File:** `templates/game/story.html` **Implementation:** - Create main story gameplay page layout: - Header: Character info, turn count, location - Left sidebar: Quest tracker (placeholder for Week 9) - Main area: Latest DM response - Action panel: Available action buttons - Footer: Custom input (if Premium/Elite) - Right sidebar: Conversation history (collapsible) - Add HTMX for dynamic updates: - Action buttons trigger `hx-post="/api/v1/sessions/{id}/action"` - Poll job status with `hx-trigger="every 2s"` - Update content when job completes - Add loading spinner during AI processing - Style with dark fantasy theme (match existing CSS) - Add responsive design (mobile-friendly) - Write Flask route to render template - Test UI rendering **Dependencies:** Tasks 8.25-8.28 (API endpoints) **Deliverable:** Story gameplay UI template **Key HTMX Patterns:** ```html