# ng Studio: Pipeline Inspector + Content Loader

**Date**: 2026-03-01
**Status**: Implementing

## Architecture

ng Studio is a **timeline + dispatcher**, not a monolithic viewer. It renders
the stage timeline from RunLog and dispatches individual stage data to pluggable
viewer components.

```
ng Studio (timeline + dispatcher)
  ├── Content Loader (reusable, lib/gradio/)
  ├── Problem input + recipe selector + run trigger
  ├── Stage Timeline (the core — clickable)
  │     └── Click a stage → dispatch to viewer
  ├── Result summary + final Things
  └── Stage Detail Panel (renders selected viewer)
        ├── ThingsViewer — side-by-side Things (generate, synthesize)
        ├── ScoresViewer — rubric breakdown, scores, feedback (critique)
        ├── DiffViewer — before/after (apply)
        ├── IterationViewer — rounds, convergence (repeat)
        └── [future viewers as needed]
```

## Key Decisions

### Viewer component contract

Viewers are standalone HTML renderers:

```python
def render_xxx(things: list[Thing], trace: Trace) -> str
```

They don't know about Gradio. ng Studio renders their HTML into a detail panel.
This means viewers can be used in CLI reports, HTML exports, or other UIs.

### Content loader as reusable component

`lib/gradio/content_loader.py` — depends only on `lib/ingest/` and `lib/gradio/`.
No vario imports. URL input → fetch → card strip with pills. Exposes
`ContentLoaderState` with `.get_text()` for consumers.

### Dispatch map

```python
VIEWER_MAP = {
    "generate":   render_things_viewer,
    "critique":   render_scores_viewer,
    "apply":      render_diff_viewer,
    "repeat":     render_iteration_viewer,
    "synthesize": render_things_viewer,
}
```

### Relationship to current Studio

Current Studio (vario/ui_studio.py) survives as-is. It's a side-by-side
multi-model generation + review tool. ng Studio is a separate pipeline
inspector focused on ng engine recipes. In the future, current Studio
could become a viewer component dispatched from ng Studio.

## Components

| File                         | Purpose                                |
|------------------------------|----------------------------------------|
| `lib/gradio/content_loader.py` | Reusable content loader (URL → text) |
| `vario/ui_studio.py`     | ng Studio main UI                      |
| `vario/ui_viewers.py`    | Stage viewer HTML renderers            |
| `vario/app.py`           | Standalone Gradio app (port 7960)      |
| `vario/static/ngstudio.css` | Styles                              |

## Future (not in v1)

- Real-time streaming during execution
- Recipe YAML editor in UI
- Run history / experiments DB
- Wire current Studio as a generate viewer