# Dashboard

> Launch a live NotebookLM-style dashboard for managing sources and generating outputs. Use when the user wants a visual interface, dashboard, or UI for their notebook.

- Skill: `damionrashford/dashboard` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add damionrashford/dashboard`
- Raw SKILL.md: https://api.skillmd.com/api/skills/damionrashford/dashboard/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: damionrashford (https://skillmd.com/u/damionrashford)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/damionrashford/dashboard

---


# Notebook Dashboard

Live interactive dashboard server that mirrors NotebookLM's interface with real-time updates via SSE.

## Architecture

```
skills/ui/
├── SKILL.md              # This file
├── dashboard/
│   ├── index.html        # SPA markup + client JS ({{CSS}} placeholder)
│   └── index.css         # All styles and design tokens
└── scripts/
    └── dashboard.mjs     # HTTP server, SSE, generation pipeline
```

The server reads `index.html` and `index.css` at runtime, injects CSS via the `{{CSS}}` placeholder, and serves the composed page. Zero npm dependencies — Node.js builtins only.

## Workflow

1. **Launch the dashboard server**:

```bash
node "${CLAUDE_SKILL_DIR}/scripts/dashboard.mjs" -o output [--name notebook] [--port 3456]
```

This starts a local HTTP server and auto-opens the browser.

2. The dashboard is now **live** — it watches the output directory and vector store for changes and pushes updates to the browser via Server-Sent Events.

## CLI Options

| Flag | Default | Description |
|------|---------|-------------|
| `-o <dir>` | `./output` | Output directory for generated files |
| `--name <name>` | `notebook` | Project name |
| `--port <port>` | `3456` | Server port |

## Features

### Live Dashboard (SPA)
- **Sources panel** — lists ingested documents with page/chunk counts, pulled from `~/.notebook-plugin/stores/<hash>/meta.json`
- **Studio panel** — cards for each output type with one-click generation
- **Outputs panel** — shows generated files with inline preview (HTML via iframe, audio player, CSV→table, JSON highlighting, Markdown rendering, binary download cards)
- **Real-time updates** — SSE stream pushes state changes instantly (no polling)
- **Toast notifications** — generation status feedback

### Generation Pipeline
- **Single-session architecture** — first generation creates a Claude session, subsequent ones `--resume` into it so source material stays in context
- **Queue system** — multiple generation requests are queued and processed sequentially
- **Phases**: queued → running (querying → generating → building) → done/error
- **Temp file cleanup** — intermediate `_<type>_input.json` files are removed after generation

### Server API

| Endpoint | Method | Description |
|----------|--------|-------------|
| `/` | GET | Serves the dashboard HTML |
| `/api/state` | GET | Current sources, outputs, chunks |
| `/api/events` | GET | SSE stream for real-time updates |
| `/api/generate/<type>` | POST | Enqueue generation (body: `{ topic }`) |
| `/api/jobs` | GET | Current job statuses |
| `/outputs/<file>` | GET | Serve generated output files |

### Supported Output Types

| Type | Script | Description |
|------|--------|-------------|
| `flashcards` | flashcards.mjs | 15-30 study cards |
| `quiz` | quiz.mjs | 50-question assessment |
| `report` | report.mjs | Executive report (DOCX + HTML) |
| `slide-deck` | slide-deck.mjs | 8-15 slide presentation |
| `mind-map` | mind-map.mjs | Mermaid mindmap diagram |
| `infographic` | infographic.mjs | Visual stats infographic |
| `data-table` | data-table.mjs | Structured data extraction |
| `audio-overview` | audio-overview.sh | Conversational audio summary |

## File Responsibilities

### `scripts/dashboard.mjs` (~454 lines)
Server logic only: CLI args, data gathering from vector store metadata, SSE broadcasting, file watcher, generation pipeline (session management, claude invocation, queue processing), HTTP routing, MIME handling.

### `dashboard/index.html`
Full single-page app: HTML structure (header, 3-column layout, sources sidebar, center panel, studio sidebar, toast container), Google Fonts (Outfit + JetBrains Mono), Lucide icons CDN, and all client-side JavaScript (output type definitions, icon helpers, inline preview system, render functions, SSE connection, toast system, tile click handlers).

### `dashboard/index.css`
All styles: CSS custom properties (design tokens for colors, fonts, radii), base resets, layout grid, component styles (cards, tiles, panels, badges, toasts), inline preview overlay, scrollbar theming, animations, and responsive breakpoints.

## Gotchas

- Sources are read from `~/.notebook-plugin/stores/<md5(cwd)>/meta.json` — run ingest first.
- The `claude` binary path defaults to `/opt/homebrew/bin/claude`. Override with `CLAUDE_BIN` env var.
- Generation requires the `skills/generate/` scripts and `skills/ingest/scripts/query.mjs` to be present.
- `report`, `slide-deck`, `data-table`, and ingest/query scripts require Bun (deps auto-installed). Override path with `BUN_BIN` env var.

$ARGUMENTS