150 lines
3.9 KiB
Markdown
150 lines
3.9 KiB
Markdown
# Dashboard Screenshots
|
|
|
|
This directory contains screenshots for the Loki Mode README.
|
|
|
|
---
|
|
|
|
## Required Screenshots
|
|
|
|
### 1. `dashboard-agents.png`
|
|
|
|
**What to capture:** The agent monitoring section of the Loki Mode dashboard showing active agents.
|
|
|
|
**How to create:**
|
|
1. Run Loki Mode with a test project:
|
|
```bash
|
|
cd /path/to/test/project
|
|
../../autonomy/run.sh examples/simple-todo-app.md
|
|
```
|
|
|
|
2. Open the dashboard:
|
|
```bash
|
|
open .loki/dashboard/index.html
|
|
```
|
|
|
|
3. Wait for agents to spawn (should happen within 30-60 seconds)
|
|
|
|
4. Take a screenshot of the **"Active Agents" section** showing:
|
|
- Multiple agent cards (ideally 5-8 visible)
|
|
- Agent IDs and types (e.g., "eng-frontend", "qa-001-testing")
|
|
- Model badges (Sonnet, Haiku, Opus) with color coding
|
|
- Current work being performed
|
|
- Runtime and tasks completed stats
|
|
- Status indicators (active/completed)
|
|
|
|
**Recommended size:** 1200px wide (use browser zoom to fit multiple agents)
|
|
|
|
**Save as:** `dashboard-agents.png`
|
|
|
|
---
|
|
|
|
### 2. `dashboard-tasks.png`
|
|
|
|
**What to capture:** The task queue kanban board section.
|
|
|
|
**How to create:**
|
|
1. Using the same running Loki Mode instance from above
|
|
|
|
2. Scroll down to the **"Task Queue" section**
|
|
|
|
3. Take a screenshot showing all four columns:
|
|
- **Pending** (left column, ideally with 3-5 tasks)
|
|
- **In Progress** (should have at least 1 task)
|
|
- **Completed** (should show several completed tasks)
|
|
- **Failed** (can be empty, that's fine)
|
|
|
|
4. Ensure the screenshot shows:
|
|
- Column headers with count badges
|
|
- Task cards with IDs, types, and descriptions
|
|
- Clear separation between columns
|
|
|
|
**Recommended size:** 1200px wide
|
|
|
|
**Save as:** `dashboard-tasks.png`
|
|
|
|
---
|
|
|
|
## Screenshot Specifications
|
|
|
|
- **Format:** PNG (for quality and transparency support)
|
|
- **Resolution:** At least 1200px wide, retina/2x if possible
|
|
- **Browser:** Use Chrome or Firefox for consistent rendering
|
|
- **Zoom:** Adjust browser zoom to fit content nicely (90-100%)
|
|
- **Clean State:** Ensure no browser extensions visible, clean URL bar
|
|
|
|
---
|
|
|
|
## Testing the Screenshots
|
|
|
|
After adding screenshots, verify they display correctly in the README:
|
|
|
|
```bash
|
|
# View the README with screenshots
|
|
open README.md
|
|
# or use a Markdown viewer
|
|
```
|
|
|
|
Check that:
|
|
- [ ] Images load without errors
|
|
- [ ] Resolution is clear and readable
|
|
- [ ] Colors match the Loki Mode design (cream background, coral accents)
|
|
- [ ] Text in screenshots is legible
|
|
|
|
---
|
|
|
|
## Placeholder Images
|
|
|
|
If you don't have live agent data yet, you can use the test data provided in this repository:
|
|
|
|
```bash
|
|
# Create test agent data
|
|
cd /Users/lokesh/git/jobman # or any test project
|
|
mkdir -p .agent/sub-agents .loki/state .loki/queue
|
|
|
|
# Copy test data from Loki Mode repo
|
|
cp ~/git/loki-mode/tests/fixtures/agents/*.json .agent/sub-agents/
|
|
cp ~/git/loki-mode/tests/fixtures/queue/*.json .loki/queue/
|
|
|
|
# Generate dashboard
|
|
~/git/loki-mode/autonomy/run.sh --generate-dashboard-only
|
|
|
|
# Open dashboard
|
|
open .loki/dashboard/index.html
|
|
```
|
|
|
|
---
|
|
|
|
## Current Status
|
|
|
|
- [ ] `dashboard-agents.png` - Not yet created
|
|
- [ ] `dashboard-tasks.png` - Not yet created
|
|
|
|
Once screenshots are added, update this checklist and commit:
|
|
|
|
```bash
|
|
git add docs/screenshots/*.png
|
|
git commit -m "Add dashboard screenshots for README"
|
|
```
|
|
|
|
---
|
|
|
|
## Alternative: Create Mock Screenshots
|
|
|
|
If you want to create mock/placeholder screenshots quickly:
|
|
|
|
1. Use the test fixture data (see above)
|
|
2. Edit `.loki/state/agents.json` to add more agents
|
|
3. Edit `.loki/queue/*.json` to populate task columns
|
|
4. Refresh dashboard and capture screenshots
|
|
|
|
This gives you polished screenshots without waiting for a full Loki Mode run.
|
|
|
|
---
|
|
|
|
**Note:** Screenshots should demonstrate Loki Mode's capabilities while being clean and professional. Avoid showing:
|
|
- Personal information or API keys
|
|
- Error states (unless specifically demonstrating error handling)
|
|
- Cluttered or confusing data
|
|
|
|
The goal is to show potential users what the dashboard looks like during normal operation.
|