docs: add step 8 feedback loop diary entry

Author: uid4oe

.claude/diary/2026-03-20-step8-educational-content.md

@@ -0,0 +1,49 @@
+# Diary: Step 8 — Educational Content & Interactive Tutorials
+
+**Date:** 2026-03-20
+**Agent:** frontend-builder
+**Step:** Step 8: Educational Content
+**Duration:** ~45 min
+
+## What Happened
+
+Added a Learn tab to the right panel with per-pattern educational content, interactive "Try it" prompts, and rendered mermaid architecture diagrams. 8 commits:
+1. Step doc + plan/CLAUDE.md updates
+2. Structured PatternContent data for all 7 patterns
+3. TabBar, CollapsibleSection, SuggestedPrompts components
+4. RightPanel + LearnView + App integration
+5. TraceView cleanup (remove guessPattern, accept patternName prop)
+6. Status update
+7. Mermaid diagram rendering (added `mermaid` dependency)
+8. Horizontal diagrams + panel layout swap (Learn panel on left, wider)
+
+Files: 7 new, 5 modified. 193 tests still passing. New dependency: `mermaid`.
+
+## What Worked Well
+
+- **Comprehensive planning**: Detailed plan with per-pattern content specs, research on educational UI best practices, and WAI-ARIA tab patterns. This prevented back-and-forth during implementation.
+- **Progressive disclosure via CollapsibleSection**: Reused the expand/collapse UX from TraceNodeCard — users already know this interaction. First 3 sections open by default avoids information overload.
+- **Structured TypeScript data over raw markdown**: Typed `PatternContent` interface gives full layout control per section. Much better than rendering a markdown blob.
+- **"Try it" → auto-switch flow**: Clicking a suggested prompt fills the input, user sends, panel auto-switches to Trace. Natural learn-by-doing loop.
+- **Single source of truth**: Moving PATTERN_DESCRIPTIONS from TraceView to pattern-content.ts eliminated duplication.
+
+## What Went Wrong / Surprises
+
+- **Initial plan lacked depth**: First two plan submissions were rejected — user wanted the full project workflow (step doc, plan.md updates) and per-pattern elaboration. Had to iterate the plan 3 times before approval. Lesson: for this project, always include step doc creation and per-pattern detail in plans.
+- **Mermaid diagrams were raw code initially**: The plan said "code blocks for now, mermaid library later" but the user immediately flagged this. Should have included mermaid rendering from the start — it's the core educational value of the Architecture section.
+- **Vertical diagrams didn't fit**: `graph TB` diagrams from the READMEs were too tall for the panel. Had to convert Supervisor, Debate, Swarm, and Reflection to `graph LR`. The simplified horizontal versions are actually clearer.
+- **Panel width and position**: Default `flex-[2]` right panel was too narrow for educational content. User requested it wider and on the left. Should have considered this during planning — the Learn tab has more content density than Chat.
+
+## Learnings
+
+- **Follow the full project workflow in plans**: Always include step doc creation, docs/plan.md updates, and CLAUDE.md status in the plan. The user expects the documented lifecycle.
+- **Don't defer visual features to "future enhancement"**: If a feature is core to the educational value (like rendered diagrams), include it in the initial implementation. Code blocks for mermaid diagrams undermine the purpose.
+- **Design for content density**: When adding a content-heavy panel, consider its width and position relative to other panels. Educational content needs more horizontal space than a chat stream.
+- **Horizontal diagrams work better in narrow panels**: Always prefer `graph LR` over `graph TB` for sidebar/panel layouts. Simplify node labels to fit.
+
+## Changes Made (Feedback Applied)
+
+- No agent definition changes needed (frontend-builder scope already covers this)
+- Updated `CLAUDE.md`: Added Step 8 to implementation table, dependency graph, and status
+- Updated `docs/plan.md`: Added Step 8 to build order
+- Created `docs/steps/08-educational-content.md`: Full step doc with 15 sub-steps

.claude/diary/INDEX.md

@@ -15,6 +15,7 @@ Evolution log for the agent orchestration patterns project. Each entry captures
 | 2026-03-18 | Steps 5-7: Eval+Docker+Docs | eval/docker/docs builders | All remaining steps complete, project finished |
 | 2026-03-19 | Step 4e-4f: Swarm+Map-Reduce | pattern-planner + pattern-builder x2 | Parallel providers for Promise.all, eval path must be src/eval/, pattern-planner agent created |
 | 2026-03-20 | Step 4g: Reflection | pattern-planner + pattern-builder | Always follow documented lifecycle, step docs are the contract, don't shortcut |
+| 2026-03-20 | Step 8: Educational Content | frontend-builder | Don't defer core visual features, design for content density, horizontal diagrams in panels |
 
 ## How to Read