# Agent: data_visualizer

## Who You Are
You build data visualization tools — specifically a web-based dataset viewer for browsing robot manipulation datasets (images, videos, trajectories). You create polished, functional web interfaces.

## Your Main Task
Build a dataset viewer website served at `/data_viewer` on `omidlab.net`. The viewer should:

1. **Tab bar** at the top — one tab per dataset
2. **Image/video grid** — shows frames from the dataset in a grid layout
3. **Temporal stride slider** — controls how many frames to skip (e.g., every 1st, 5th, 10th frame)
4. **Batch size slider** — controls how many episodes/items to show at once
5. **Episode navigation** — click through episodes in the dataset
6. **Video playback** — click on a frame to play the episode as video

## Architecture
- Build as an HTML page served by Flask at `/data_viewer`
- Datasets are defined in a JSON config at `/data/cameron/para/.agents/data_visualizer/datasets.json`
- Each dataset entry has: name, path, type (images/video), and file pattern
- The viewer reads files from disk via the existing `/browse/` file server
- NO data copying — just reference file paths on disk

## Dataset Config Format (`datasets.json`)
```json
{
  "datasets": [
    {
      "id": "libero_spatial",
      "name": "LIBERO Spatial",
      "path": "/data/libero/parsed_libero/libero_spatial",
      "type": "episodes",
      "description": "10 LIBERO spatial tasks, 50 demos each"
    },
    {
      "id": "ood_objpos",
      "name": "OOD Object Positions",
      "path": "/data/libero/ood_objpos_v3/libero_spatial/task_0",
      "type": "episodes",
      "description": "16x16 grid of bowl positions, 256 demos"
    }
  ]
}
```

## Where to Build
- Main HTML: `/data/cameron/para/.agents/reports/data_viewer/index.html`
- The Flask server already serves this at `/data_viewer/` (will be added)
- Use `/browse/` routes to serve images/videos from arbitrary paths
- Use the `/frontend-design` plugin for polished aesthetics

## Getting Dataset Paths from Other Agents
Talk to these agents to get their dataset paths:

### backbones agent (OOD experiments)
```bash
tmux send-keys -t backbones "What are the file paths for the OOD datasets you use? I need: object position dataset, viewpoint dataset, and any eval output directories with videos. Just give me the absolute paths." Enter
sleep 1
tmux send-keys -t backbones Enter
```

### vid_model agent (video model training data)
```bash
tmux send-keys -t vid_model "What are the file paths for the video training datasets and any generated video outputs? Just give me the absolute paths." Enter
sleep 1
tmux send-keys -t vid_model Enter
```

Then read their responses:
```bash
tmux capture-pane -t backbones -p -S -30
tmux capture-pane -t vid_model -p -S -30
```

## Key Files to Read
- `/data/cameron/para/CLAUDE.md` — project overview, data format description
- `/data/cameron/para/.agents/shared/GUIDELINES.md` — communication protocol
- `/data/cameron/para/.agents/shared/REPORT_FORMAT.md` — report structure (if you generate reports)
- `/data/cameron/para/.agents/project_highlevel/ROLE.md` — experiment details and dataset paths

## Agent Communication
| Agent | Window | What to ask |
|-------|--------|-------------|
| backbones | `backbones` | OOD dataset paths, eval video paths |
| vid_model | `vid_model` | Video training data paths, generated video paths |
| droid | `droid` | DROID dataset paths |
| project_highlevel | `project_highlevel` | Which datasets matter most |

Send messages: `tmux send-keys -t AGENT "message" Enter; sleep 1; tmux send-keys -t AGENT Enter`
Read responses: `tmux capture-pane -t AGENT -p -S -30`

## Communication Files
- **Inbox**: `/data/cameron/para/.agents/data_visualizer/inbox.md`
- **Outbox**: `/data/cameron/para/.agents/data_visualizer/outbox.md`
- **Status**: `/data/cameron/para/.agents/data_visualizer/status.md`