# IETF Draft Analyzer — Web Dashboard Architecture

## Overview

A read-only Flask dashboard for exploring and visualizing 361+ IETF Internet-Drafts on AI/agent topics. All data comes from the existing SQLite database (`data/drafts.db`) via the `Database` class from `src/ietf_analyzer/db.py`.

## Tech Stack

- **Backend**: Flask (simple routes, no blueprints)
- **Database**: Existing SQLite via `ietf_analyzer.db.Database` (read-only)
- **CSS**: Tailwind CSS via CDN (dark theme: slate/gray palette)
- **Charts**: Plotly.js via CDN (all interactive charts rendered client-side)
- **Fonts**: Inter via Google Fonts CDN

## File Structure

```
src/webui/
  __init__.py          # Empty package init
  app.py               # Flask app, all routes
  data.py              # Data access layer (wraps Database queries, returns JSON-ready dicts)
  templates/
    base.html          # Dark-themed base with sidebar nav, Tailwind, Plotly CDN
    overview.html       # Dashboard home: key stats, charts
    drafts.html        # Draft explorer: search, filter, sortable table
    draft_detail.html  # Single draft detail page
    ideas.html         # Ideas explorer with type breakdown
    gaps.html          # Gap analysis display
    ratings.html       # Rating distributions and comparisons
    landscape.html     # UMAP/t-SNE scatter (embeddings)
    authors.html       # Author network and top contributors
    about.html         # About page with project info
```

## Pages & Routes

| Route | Template | Description |
|-------|----------|-------------|
| `/` | `overview.html` | Dashboard home: total drafts, rated count, author count, idea count, gap count. Charts: category treemap, timeline, score distribution histogram. |
| `/drafts` | `drafts.html` | Searchable, filterable, sortable table of all drafts with ratings. Pagination. Category chip filters. Score range slider. |
| `/drafts/<name>` | `draft_detail.html` | Single draft: all rating dimensions with notes, categories, authors, ideas extracted, references. |
| `/ideas` | `ideas.html` | All extracted ideas grouped by type. Bar chart of idea types. Searchable. |
| `/gaps` | `gaps.html` | Gap analysis results: severity badges, categories, evidence. |
| `/ratings` | `ratings.html` | Rating analytics: dimension distributions (violin/box), category radar profiles, top-scored drafts. |
| `/landscape` | `landscape.html` | Embedding scatter plot (pre-computed coordinates served as JSON). |
| `/authors` | `authors.html` | Top authors table, org contributions bar chart, co-author network graph. |
| `/about` | `about.html` | Project description, data freshness, counts. |

## Data Layer (`data.py`)

Thin wrapper around `Database` that returns plain dicts/lists ready for `jsonify()` or template rendering:

- `get_overview_stats()` — counts for drafts, ratings, authors, ideas, gaps
- `get_drafts_page(page, per_page, search, category, min_score, sort)` — paginated draft list with ratings
- `get_draft_detail(name)` — single draft + rating + authors + ideas + refs
- `get_category_counts()` — {category: count} for filter chips
- `get_rating_distributions()` — arrays for each dimension for Plotly
- `get_timeline_data()` — monthly counts by category for stacked area
- `get_ideas_by_type()` — grouped idea counts
- `get_all_gaps()` — gap list with severity
- `get_top_authors(limit)` — author leaderboard
- `get_org_data(limit)` — organization contributions
- `get_landscape_coords()` — pre-computed 2D coordinates + metadata

## Design System

- **Dark theme**: `bg-slate-900` body, `bg-slate-800` cards, `bg-slate-700` hover states
- **Accent**: Blue-500 (`#3b82f6`) for links, active states, charts
- **Text**: `text-slate-100` primary, `text-slate-400` secondary
- **Cards**: Rounded corners (`rounded-xl`), subtle border (`border-slate-700`)
- **Sidebar**: Fixed left, 240px wide, collapsible on mobile
- **Charts**: Plotly dark theme (`plotly_dark` template), consistent color palette

## Key Decisions

1. **Read-only**: No writes to DB. All data comes from CLI pipeline runs.
2. **Server-side rendering**: Templates with Jinja2, chart data passed as JSON.
3. **No build step**: All CSS/JS from CDN. Zero npm/webpack complexity.
4. **Reuse existing queries**: `data.py` calls `Database` methods directly.
5. **Responsive**: Tailwind responsive utilities, sidebar collapses to hamburger.
