The Claude Code Agents system operates in two distinct modes:
- Demo Mode: Uses
.demofolder with mocked data for testing and demonstration - Real Mode: Uses root project folders for actual project development
When making changes to the agent system, you MUST update both:
- Templates (
.templates/): Clean template files without data - Demo (
.demo/): Mocked data versions for demonstration
- Agent Prompts:
.demo/.claude/agents/ - Planning Files:
.demo/.plan/ - Test Files:
.demo/tests/ - Orchestrator:
.demo/CLAUDE.md
- Agent Prompts:
.claude/agents/ - Planning Files:
.plan/ - Test Files:
tests/ - Orchestrator:
CLAUDE.md(root)
The dashboard must:
- Demo Mode: Watch and write files in
.demo/folder structure - Real Mode: Watch and write files in root folder structure
- Mode Detection: Check
demo_modeconfiguration to determine file paths
- Clean files with placeholder data
- Use
YYYY-MM-DDTHH:mm:ss.sssZfor timestamps - Use example/placeholder values
- No actual project data
- Realistic mocked data for demonstration
- Actual timestamps and realistic values
- Sample learnings, tasks, and agent interactions
- Simulates a working project environment
- Actual project data
- Real timestamps and values
- Actual learnings, tasks, and agent interactions
- Production environment
When updating agent prompts or system files:
- Update Templates: Make changes to
.templates/files first - Update Demo: Copy changes to
.demo/with mocked data - Update Documentation: Reflect changes in README and system docs
- Test in Demo: Verify functionality works with demo data
- Deploy to Real: System ready for real project deployment
- Source:
agents/(current working versions) - Template:
.templates/agents/(clean templates) - Demo:
.demo/.claude/agents/(demo versions) - Real:
.claude/agents/(deployed versions)
- Template:
.templates/.plan/(clean templates) - Demo:
.demo/.plan/(with mocked data) - Real:
.plan/(actual project data)
- Template:
.templates/CLAUDE.md.template(clean template) - Demo:
.demo/CLAUDE.md(with demo configuration) - Real:
CLAUDE.md(actual project orchestrator)
The dashboard must detect mode and adjust file paths:
const getFilePath = (relativePath) => {
const baseDir = config.demo_mode ? '.demo' : '.';
return path.join(baseDir, relativePath);
};
// Examples:
// Demo: .demo/.plan/tasks/index.json + .demo/.plan/tasks/<task_id>.json
// Real: .plan/tasks/index.json + .plan/tasks/<task_id>.jsonWhen Agent-Improver updates agent instructions:
- Demo Mode: Update
.demo/.claude/agents/[agent].md - Real Mode: Update
.claude/agents/[agent].md - Always: Log changes in appropriate
agent_changes.json
When Learner manages learnings:
- Demo Mode: Update
.demo/.plan/learnings.json - Real Mode: Update
.plan/learnings.json - Always: Maintain proper schema and validation
Before committing changes:
- Templates updated with clean structure
- Demo folder updated with mocked data
- File paths correctly mapped for both modes
- Dashboard configuration supports both modes
- Documentation reflects dual-mode operation
- No cross-contamination between demo and real data
- Update
.templates/with clean versions - Update
.demo/with mocked data versions - Update agent prompts in both locations
- Update orchestrator in both locations
- Test dashboard in both modes
- Verify file path resolution
- Update documentation
- Design template structure
- Create demo data examples
- Update dashboard to handle both modes
- Add mode-specific file path logic
- Test feature in both environments
- Document mode-specific behavior
- Single Mode Updates: Only updating templates OR demo
- Wrong File Paths: Using hardcoded paths instead of mode-aware paths
- Data Contamination: Mixing real data in demo or vice versa
- Missing Synchronization: Forgetting to update all three locations
- Mode Detection Failure: Dashboard not properly detecting mode
- Check both
.templates/and.demo/are updated - Verify file paths resolve correctly in both modes
- Test dashboard functionality in both modes
- Confirm no real data in demo files
- Ensure templates remain clean and generic
Remember: The goal is seamless operation in both demo (for testing/presentation) and real (for actual projects) environments while maintaining clear separation and proper data handling.