---
name: fluent-feature-dashboard
description: Interactive HTML dashboard showing feature lifecycle status, specs, plans, architecture diagrams, feedback metrics, reports, and session history. Auto-starts a live-reload server that updates in real-time as features change. Triggers on "feature dashboard", "open dashboard", "show dashboard", "live view".
user-invocable: true
allowed-tools: Bash, Read, Glob, Grep
argument-hint: [--profile PROFILE] [--serve] [--setup]
cursor-tier: auto
---

# Feature Lifecycle Dashboard

Generate and serve an interactive HTML dashboard that aggregates all feature lifecycle data for a profile. The dashboard updates **automatically** as the LLM works on features — no manual trigger needed.

## Ownership Boundary

This skill owns: dashboard generation, live-reload server, Fluent-themed HTML output.

Other skills own: feature data (spec, plan, status, architecture), feedback JSONL, session audits, reports.

## No Planning Gate

This is a **read-only** diagnostic/visualization skill. No planning gate required. It reads existing files and produces a generated HTML file. It makes no mutations to feature data.

## Auto-Start Convention (CRITICAL)

**The LLM MUST auto-start the dashboard server when beginning any feature work.** The user should never need to say "dashboard" — it starts automatically.

### When to auto-start

Start the dashboard server in background when ANY of these happen:
- Session begins and features exist under `accounts/<PROFILE>/features/`
- User invokes any feature-modifying skill (`/fluent-use-case-discover`, `/fluent-feature-plan`, `/fluent-workflow-builder`, `/fluent-rule-scaffold`, `/fluent-settings`, `/fluent-mystique-builder`, `/fluent-build`, `/fluent-e2e-test`, etc.)
- User asks to work on a feature by name

### How to auto-start

```bash
# Check if already running (port 3456 in use)
curl -s http://localhost:3456 > /dev/null 2>&1 && echo "RUNNING" || echo "STOPPED"

# If STOPPED, start in background
cd <WORKSPACE_ROOT>
node fluent-ai-skills/tools/generate-feature-dashboard.mjs --profile <PROFILE> --serve --port 3456 &
disown

# Tell user once
# "Dashboard server started at http://localhost:3456 — open in a browser tab for live feature updates."
```

### Do NOT auto-start when

- No features directory exists for the profile
- Vendor libs are missing (tell user to run `--setup`)
- Only doing read-only analysis with no feature context

## Manual Invocation

User says `/fluent-feature-dashboard` to:
- Start the server if not running
- Generate a static snapshot (without `--serve`)
- Run `--setup` to download vendor libs

## Inputs

| Parameter | Required | Default | Description |
|-----------|----------|---------|-------------|
| `--profile` | No | Active CLI profile (`FLUENT_PROFILE`) | Profile to generate dashboard for |
| `--serve` | No | `false` | Start live-reload HTTP server with SSE |
| `--setup` | No | `false` | Download vendor libs (marked.js, mermaid.js) to `fluent-ai-skills/tools/vendor/` |
| `--port` | No | `3456` | HTTP server port for `--serve` mode |
| `--all` | No | `false` | Generate dashboards for all profiles (incompatible with `--serve`) |

## Prerequisites

1. **Vendor libs** must exist at `fluent-ai-skills/tools/vendor/marked.min.js` and `fluent-ai-skills/tools/vendor/mermaid.min.js`
   - If missing: `node fluent-ai-skills/tools/generate-feature-dashboard.mjs --setup`
2. **Features directory** must exist: `accounts/<PROFILE>/features/`
3. **Node.js 20+** required

## How It Works

### Generator (`fluent-ai-skills/tools/generate-feature-dashboard.mjs`)

1. Scans `accounts/<PROFILE>/features/*/` for status.json, spec.md, plan.md, architecture.md
2. Collects cross-cutting data: feedback JSONL, session audits, reports (with base64 images)
3. Matches cross-cutting data to features by slug (word-boundary matching, longest-first)
4. Sorts features by actionability: IN_PROGRESS > BUILT > DEPLOYED > APPROVED > PLANNING > DISCOVERY > VERIFIED
5. Generates a self-contained HTML file with all data embedded as JSON + vendor libs inline
6. Writes to `accounts/<PROFILE>/feature-dashboard.html`

#### Data Extraction from status.json

Extract all standard fields plus the three gate fields for each feature:

```js
const feature = {
  // ... standard fields (slug, status, spec, plan, etc.) ...
  build:  status.build  ?? null,  // null | "PENDING" | "FAILED" | "PASSED"
  deploy: status.deploy ?? null,  // null | "PENDING" | "FAILED" | "DEPLOYED"
  test:   status.test   ?? null,  // null | "PENDING" | "FAILED" | "PASSED"
};
```

Gate fields default to `null` when absent (backward compatibility with pre-v2 status.json files).

### Live Reload (`--serve` mode)

1. Starts HTTP server on configured port
2. Watches `features/`, `feedback/`, `sessions/`, `reports/` directories for changes
3. On any file change: 500ms debounce → regenerate HTML → send SSE `reload` event
4. Browser auto-refreshes via EventSource (SSE script only injected in serve mode)
5. Linux: polling fallback every 2s (recursive `fs.watch` not supported)

### Dashboard Features

- **Sidebar**: Feature list with color-coded status dots, search, status filter
- **7 tabs per feature**: Status, Spec, Plan, Architecture, Feedback, Reports, Files
- **Status tab**: Lifecycle progress bar + status details + session timeline
- **Markdown tabs**: Rendered via marked.js with Mermaid diagram SVG rendering
- **Annotation overlays**: info/warning/issue callouts from `annotations.json`
- **Feedback tab**: Skill execution success/failure metrics from JSONL
- **Reports tab**: Embedded markdown reports + base64 screenshots (collapsible)
- **Print/PDF**: Print button renders all tabs for selected feature
- **Dark mode**: Toggle button with localStorage persistence (defaults to light)
- **Fluent theme**: Fluent Commerce brand colors (#00C2EF accent, #18013A navy, #552ABB purple, Inter font family)
- **Activity indicator**: Pulsing dot on sidebar for features updated within 30 minutes, with tooltip showing last modified file and time

## Output

| Artifact | Path | Description |
|----------|------|-------------|
| Dashboard HTML | `accounts/<PROFILE>/feature-dashboard.html` | Self-contained, offline-capable |
| Vendor libs | `fluent-ai-skills/tools/vendor/marked.min.js`, `fluent-ai-skills/tools/vendor/mermaid.min.js` | Downloaded once via `--setup` |

## Error Handling

| Scenario | Behavior |
|----------|----------|
| Malformed status.json | Skip feature, log warning |
| Missing spec.md/plan.md | Tab shows "Not yet created", dimmed |
| Missing vendor libs | Exit with error: "Run --setup first" |
| Malformed JSONL line | Skip line, continue |
| Images > 5MB/feature or > 20MB total | Switch to thumbnail mode |
| `--all` + `--serve` | Exit with error |

## Execution Steps

### Step 1: Check prerequisites

```bash
# Check vendor libs exist
ls fluent-ai-skills/tools/vendor/marked.min.js fluent-ai-skills/tools/vendor/mermaid.min.js

# If missing, download them
node fluent-ai-skills/tools/generate-feature-dashboard.mjs --setup
```

### Step 2: Determine profile

```bash
# Use explicit profile or FLUENT_PROFILE env var
PROFILE="${1:-$FLUENT_PROFILE}"
```

### Step 3: Check if server already running

```bash
curl -s http://localhost:3456 > /dev/null 2>&1 && echo "Dashboard already running" || echo "Starting..."
```

### Step 4: Start in background (for auto-start)

```bash
node fluent-ai-skills/tools/generate-feature-dashboard.mjs --profile "$PROFILE" --serve &
disown
```

### Step 5: Inform user (once per session)

Print: "Dashboard live at http://localhost:3456 — open in a browser tab. Updates automatically as you work."

## Post-Execution

- Dashboard continues running in background
- All feature file changes auto-trigger regeneration
- Server stops when terminal/session ends, or user presses Ctrl+C in that terminal
- Static HTML file persists and can be opened directly (`file://` protocol, no SSE)
