341 lines
8.2 KiB
Markdown
341 lines
8.2 KiB
Markdown
# Dashboard Maintenance Guide
|
|
|
|
## Overview
|
|
|
|
The `index.html` dashboard automatically displays all demos in the project. It's designed to stay up-to-date with minimal effort.
|
|
|
|
## Quick Start
|
|
|
|
### View Dashboard
|
|
```bash
|
|
# Start server (if not running)
|
|
python3 -m http.server 8889
|
|
|
|
# Open in browser
|
|
firefox http://localhost:8889/
|
|
```
|
|
|
|
### Update Dashboard
|
|
```bash
|
|
# Regenerate after adding new demos
|
|
./generate_index.py
|
|
|
|
# Or make it executable and run directly
|
|
chmod +x generate_index.py
|
|
./generate_index.py
|
|
```
|
|
|
|
## Auto-Update Strategies
|
|
|
|
### Option 1: Manual Regeneration (Simplest)
|
|
|
|
Run after generating new demos:
|
|
```bash
|
|
./generate_index.py
|
|
```
|
|
|
|
**Best for:** Occasional updates, full control
|
|
|
|
### Option 2: File Watcher (Development)
|
|
|
|
Auto-regenerate when files change:
|
|
```bash
|
|
# Install watcher (Ubuntu/Debian)
|
|
sudo apt install inotify-tools
|
|
|
|
# Start watcher
|
|
./watch_and_update.sh
|
|
```
|
|
|
|
**Best for:** Active development, instant updates
|
|
|
|
### Option 3: Git Hook (Automated)
|
|
|
|
Auto-regenerate before commits:
|
|
```bash
|
|
# Copy hook to git hooks directory
|
|
cp .githooks/pre-commit .git/hooks/pre-commit
|
|
chmod +x .git/hooks/pre-commit
|
|
```
|
|
|
|
**Best for:** Team workflows, version control
|
|
|
|
### Option 4: Integrate with Generation
|
|
|
|
Add to your infinite loop workflow:
|
|
```python
|
|
# After agent completion in infinite loop
|
|
python3 generate_index.py
|
|
```
|
|
|
|
**Best for:** Seamless workflow integration
|
|
|
|
## How It Works
|
|
|
|
### Generator Script (`generate_index.py`)
|
|
|
|
**What it does:**
|
|
1. Scans demo directories (`threejs_viz/`, `sdg_viz/`, `src/`, `src_infinite/`, `src_group/`)
|
|
2. Extracts titles and descriptions from HTML files
|
|
3. Updates the `demos` object in `index.html`
|
|
4. Updates category counts and statistics
|
|
5. Preserves all styling and functionality
|
|
|
|
**What it scans:**
|
|
- `threejs_viz/threejs_viz_*.html` → Three.js demos
|
|
- `sdg_viz/sdg_viz_*.html` → SDG network visualizations
|
|
- `d3_test/d3_viz_*.html` → D3 data visualizations
|
|
- `mapbox_test/mapbox_globe_*/index.html` → Mapbox globe visualizations
|
|
- `claude_code_devtools/claude_devtool_*.html` → Claude Code developer tools
|
|
- `src/ui_hybrid_*.html` → UI single-file components
|
|
- `src_infinite/ui_hybrid_*.html` → Infinite mode UI
|
|
- `src_group/ui_hybrid_*/index.html` → Modular UI components
|
|
|
|
**Current stats:** 107 demos across 7 categories
|
|
|
|
### File Structure
|
|
|
|
```
|
|
infinite-agents/
|
|
├── index.html # Dashboard (auto-generated data section)
|
|
├── generate_index.py # Generator script
|
|
├── watch_and_update.sh # File watcher script
|
|
├── DASHBOARD.md # This guide
|
|
│
|
|
├── threejs_viz/ # Three.js demos
|
|
│ ├── threejs_viz_1.html
|
|
│ ├── threejs_viz_2.html
|
|
│ └── ...
|
|
│
|
|
├── sdg_viz/ # SDG network demos
|
|
│ ├── sdg_viz_1.html
|
|
│ ├── sdg_viz_2.html
|
|
│ └── ...
|
|
│
|
|
├── d3_test/ # D3 data visualizations
|
|
│ ├── d3_viz_1.html
|
|
│ ├── d3_viz_2.html
|
|
│ └── ...
|
|
│
|
|
├── mapbox_test/ # Mapbox globe visualizations
|
|
│ ├── mapbox_globe_1/
|
|
│ │ └── index.html
|
|
│ ├── mapbox_globe_2/
|
|
│ │ └── index.html
|
|
│ └── ...
|
|
│
|
|
├── claude_code_devtools/ # Claude Code developer tools
|
|
│ ├── claude_devtool_1.html
|
|
│ ├── claude_devtool_2.html
|
|
│ └── ...
|
|
│
|
|
├── src/ # UI hybrid (single file)
|
|
│ ├── ui_hybrid_1.html
|
|
│ ├── ui_hybrid_2.html
|
|
│ └── ...
|
|
│
|
|
├── src_infinite/ # UI hybrid (infinite mode)
|
|
│ ├── ui_hybrid_1.html
|
|
│ ├── ui_hybrid_2.html
|
|
│ └── ...
|
|
│
|
|
└── src_group/ # UI hybrid (modular)
|
|
├── ui_hybrid_1/
|
|
│ └── index.html
|
|
└── ...
|
|
```
|
|
|
|
## Customization
|
|
|
|
### Add New Demo Category
|
|
|
|
Edit `generate_index.py` and add scanning logic:
|
|
|
|
```python
|
|
def generate_demo_data():
|
|
demos = {
|
|
'threejs': [],
|
|
'sdg': [],
|
|
'uiSingle': [],
|
|
'uiModular': [],
|
|
'newCategory': [] # Add new category
|
|
}
|
|
|
|
# Add scanning for new category
|
|
new_files = scan_directory('new_dir', 'pattern_*.html')
|
|
for i, filepath in enumerate(new_files, 1):
|
|
demos['newCategory'].append({
|
|
'number': i,
|
|
'title': extract_title_from_html(filepath),
|
|
'description': extract_description_from_html(filepath),
|
|
'path': filepath,
|
|
'type': 'New Type',
|
|
'techniques': []
|
|
})
|
|
|
|
return demos
|
|
```
|
|
|
|
Then update `index.html` template to add the category section.
|
|
|
|
### Modify Extraction Logic
|
|
|
|
Edit `extract_title_from_html()` or `extract_description_from_html()` in `generate_index.py`:
|
|
|
|
```python
|
|
def extract_title_from_html(filepath):
|
|
"""Customize how titles are extracted."""
|
|
# Add custom regex patterns
|
|
# Try different HTML elements
|
|
# Handle edge cases
|
|
pass
|
|
```
|
|
|
|
### Change Dashboard Styling
|
|
|
|
Edit `index.html` directly - the generator only updates the `demos` object and stats, preserving all styling.
|
|
|
|
## Workflow Integration
|
|
|
|
### After Manual Demo Creation
|
|
|
|
```bash
|
|
# 1. Create new demo
|
|
nano threejs_viz/threejs_viz_6.html
|
|
|
|
# 2. Regenerate dashboard
|
|
./generate_index.py
|
|
|
|
# 3. Refresh browser to see changes
|
|
```
|
|
|
|
### After Infinite Loop Generation
|
|
|
|
Add to your agent completion callback:
|
|
|
|
```python
|
|
# In your infinite loop orchestrator
|
|
def on_generation_complete():
|
|
print("🔄 Updating dashboard...")
|
|
subprocess.run(['python3', 'generate_index.py'])
|
|
print("✅ Dashboard updated!")
|
|
```
|
|
|
|
### With Version Control
|
|
|
|
```bash
|
|
# 1. Generate new demos
|
|
./your_generation_command.sh
|
|
|
|
# 2. Update dashboard
|
|
./generate_index.py
|
|
|
|
# 3. Commit everything together
|
|
git add threejs_viz/ index.html
|
|
git commit -m "Add 5 new Three.js demos"
|
|
```
|
|
|
|
## Troubleshooting
|
|
|
|
### Dashboard shows old count
|
|
|
|
**Problem:** Statistics don't match actual files
|
|
**Solution:** Run `./generate_index.py` manually
|
|
|
|
### Can't execute script
|
|
|
|
**Problem:** Permission denied
|
|
**Solution:** `chmod +x generate_index.py watch_and_update.sh`
|
|
|
|
### Titles look wrong
|
|
|
|
**Problem:** Extraction isn't finding correct titles
|
|
**Solution:** Check HTML file structure, customize extraction in `generate_index.py`
|
|
|
|
### Watcher doesn't work
|
|
|
|
**Problem:** `inotifywait` command not found
|
|
**Solution:** Install with `sudo apt install inotify-tools`
|
|
|
|
### Server not accessible
|
|
|
|
**Problem:** Can't open http://localhost:8889/
|
|
**Solution:** Check if server is running: `python3 -m http.server 8889`
|
|
|
|
## Advanced Usage
|
|
|
|
### Generate JSON API
|
|
|
|
Export demo list as JSON for external tools:
|
|
|
|
```bash
|
|
# Add to generate_index.py
|
|
import json
|
|
|
|
demos = generate_demo_data()
|
|
with open('demos.json', 'w') as f:
|
|
json.dump(demos, f, indent=2)
|
|
```
|
|
|
|
### Create Category Pages
|
|
|
|
Generate separate pages per category:
|
|
|
|
```bash
|
|
# Add to workflow
|
|
./generate_index.py --category threejs --output threejs.html
|
|
./generate_index.py --category sdg --output sdg.html
|
|
```
|
|
|
|
### Statistics Dashboard
|
|
|
|
Track growth over time:
|
|
|
|
```bash
|
|
# Log counts on each generation
|
|
./generate_index.py | tee -a dashboard_stats.log
|
|
```
|
|
|
|
## Best Practices
|
|
|
|
1. **Regenerate after bulk changes** - After generating multiple demos, run once instead of per-demo
|
|
2. **Use watcher during development** - Auto-update while actively creating
|
|
3. **Git hook for teams** - Ensure dashboard stays in sync across team
|
|
4. **Backup before customization** - Copy `index.html` before major changes
|
|
5. **Test extraction** - Verify titles/descriptions look good after adding new demo types
|
|
|
|
## Quick Reference
|
|
|
|
```bash
|
|
# Update dashboard
|
|
./generate_index.py
|
|
|
|
# Watch for changes
|
|
./watch_and_update.sh
|
|
|
|
# Start server
|
|
python3 -m http.server 8889
|
|
|
|
# View dashboard
|
|
firefox http://localhost:8889/
|
|
|
|
# Check status
|
|
find threejs_viz sdg_viz d3_test mapbox_test claude_code_devtools src src_infinite src_group -name "*.html" | wc -l
|
|
```
|
|
|
|
## Future Enhancements
|
|
|
|
Potential improvements to consider:
|
|
|
|
- [ ] Screenshot thumbnails for each demo
|
|
- [ ] Iframe preview on hover
|
|
- [ ] Automatically populate cards with screen shots
|
|
- [ ] Demo Tags
|
|
- [ ] Use Playwright for automated testing and evaluation of demos
|
|
|
|
---
|
|
|
|
**Last Updated:** October 9, 2025
|
|
**Current Version:** Dynamic auto-discovery
|
|
**Total Demos:** 107 (and counting!)
|