# Plan: two RPA dashboard skills

Goal: build two Claude skills. Future RPA projects use them to create a dashboard page.
- **`rpa-dashboard-no-ai`**: for RPA projects with no AI. Source project: `D:\Tebra_Auto_Post`.
- **`rpa-dashboard-ai`**: for RPA projects that use AI (LLM/OCR extraction). Source project: `D:\Superbill_extRACTION`.

Build both in `D:\RPA SKILLS\<skill-name>\`. The user installs them into Claude later.

## Decisions (from the grill)

| # | Question | Decision |
|---|---|---|
| Q1 | Where the skills live | `D:\RPA SKILLS` only. The user installs them into Claude later. |
| Q2 | Tech stack | **Detect, then adapt.** Scan the project first. If a frontend exists, use its stack. If not, ask the user: Desktop (PyQt6 + QWebEngine HTML) or Web. Both skills support both. |
| Q3 | Colours when there's no frontend | **Offer presets + custom:** 1) Tebra Sky, 2) Superbill Ember, 3) Custom (user gives a primary/brand hex). Always produce light and dark token blocks. |
| Q4 | Frontend already exists | **Report, then ask.** Say "Frontend found at X, stack Y, colours Z". Then ask: keep the existing theme and add the dashboard in the same style, or restyle to a preset/custom palette. |
| Q5 | Sections | **Core + ask for extras** (see below). |
| Q6 | Reference code | **Bundle templates** inside each skill (`templates/`). Do not read the D:\ source projects at runtime. |
| Q7 | Data | **Standard contract + wire it.** One event/JSON contract. Wire it to the project's bot if one exists. Otherwise ship sample data so the page works on day one. |

## Sections

**Both skills, always built:**
- Shell: sidebar, topbar, dark toggle, status dot
- KPI cards
- Status donut
- Run panel: progress bar, steps and live log
- Report table with search and Excel export

**Both skills, optional (ask the user):**
- Checkpoint tracker
- Admin/roles
- Login page

**AI skill, also always built:**
- Confidence bands. Scoring: green ≥0.95, amber 0.90–0.95, red <0.90. A field gets the worst word score. The band caveat text is shown to the user.
- Review split pane: source document next to the extracted fields. Edits stay drafts until Save. Each field has Verify. Approve is a gate enforced on the server.
- ROI/cost page: tokens (input/output/thinking) per run, cost per run, monthly spend, coverage pill, "vs by hand" assumptions.

**AI skill, also optional:**
- Model picker
- Retry on the other model

## Skill workflow (each SKILL.md must follow this order)
1. **Scan the project.** Look for an existing frontend: `*.html`, `web/`, `package.json` with react/vue, a PyQt `QWebEngineView`. Also find the bot entry point and any status/log output.
2. **Report what you found, then ask Q4.** Skip this step if there is no frontend.
3. **Ask for colours (Q3).** Skip this step if the user chose to keep the existing theme.
4. **Ask the stack question (Q2).** Only if there is no frontend.
5. **Ask which optional sections to build (Q5).**
6. **Build.** Copy the template, fill the `{{PLACEHOLDERS}}`, apply the tokens, remove the sections the user didn't choose.
7. **Wire the data.** Connect to the bot using the contract. If there is no bot yet, use sample data.
8. **Verify.** Open the page, check both light and dark mode, and check width ≤820px.

## Theme presets (put in `templates/themes.md` in BOTH skills)

**Tebra Sky.** Glass cards on a gradient background. Segoe UI font.
- Light: `--bg-top:#8fc9e8; --bg-mid:#bfe3f2; --bg-bottom:#eaf6fb; --ink:#1c2b33; --muted:#5c7382; --accent-dark:#16202a; --accent:#3d9bd0; --accent-2:#5cb2e2; --ok:#1f9d57; --warn:#b7791f; --bad:#c0392b`
- Dark: `--bg-top:#0f1b26; --bg-mid:#13212e; --bg-bottom:#182a38; --ink:#e6eef4; --muted:#8fa6b4; --accent-dark:#2e5d80; --ok:#2fbf72; --warn:#d9a13c; --bad:#e05a4b`

**Superbill Ember.** Flat surfaces. The brand gradient appears only on the header bar, primary buttons, the active nav row and the progress fill. Fonts: Sora for display, IBM Plex Sans for body.
- Light: `--ground:#f4f3f7; --surface:#ffffff; --surface-2:#f7f6fa; --line:#e2dfe9; --ink:#18151f; --ink-2:#3d3850; --muted:#66607a; --accent-1:#ff3049; --accent-2:#f26b21`
- Dark: `--ground:#0a0912; --surface:#151220; --surface-2:#1b1727; --line:#2a2438; --ink:#f3f1f8; --ink-2:#c9c4d8; --muted:#8d87a0`
- Band colours (AI only, semantic, never used on buttons): `--clean:#51a68f; --verify:#e39b34; --review:#de5243; --absent:#6b6580`

**Custom.** Take the user's primary hex and derive from it:
- `--accent`
- `--accent-2`: lighter
- `--accent-dark`: darker
- `--accent-soft`: tint
- Keep ok/warn/bad unless the user gives their own.
- Check text contrast in both light and dark.

## Status: what already exists

```
rpa-dashboard-no-ai/
  templates/dashboard.html     DONE: generic page, works in Qt (QWebChannel) or web (polling)
  templates/contract.md        DONE: event/JSON contract + Tebra lessons
  templates/bridge.py          DONE: minimal PyQt6 host + subprocess log tailing
  templates/reference/         DONE: tebra_dashboard.html, tebra_bridge_part1/2.py (raw extracts)
rpa-dashboard-ai/
  templates/reference/web/     DONE: Superbill index.css, DESIGN.md, bands.ts, theme.tsx, types.ts, api.ts,
                                     components (BrandHeader, Sidebar, StatsBar, Donut, SplitPane,
                                     RunPanel, ReviewPane, RoiTab, PdfPane, Tooltip, icons)
  templates/reference/backend/ DONE: bands.py, gemini_cost.py (PRICING table + cost_for_call)
```

## TODO for the implement skill
1. **Fix the lint error in `rpa-dashboard-no-ai/templates/bridge.py:15`.** `STEPS = {{STEPS_PY}}` is not valid Python, so the lint hook flags it (F821). Change it to `STEPS = ["{{STEP_1}}", "{{STEP_2}}"]` or similar.
2. **Write `rpa-dashboard-no-ai/SKILL.md`.**
   - Frontmatter `name` and `description`. The trigger should cover "RPA dashboard", "automation dashboard", "bot dashboard", and "without AI".
   - The workflow above.
   - Point to `templates/*`.
3. **Write `rpa-dashboard-ai/SKILL.md`.**
   - Trigger: "AI RPA dashboard", "extraction dashboard", "LLM/OCR review dashboard".
   - The workflow above.
   - Web path: React + Vite + Tailwind v4, adapted from `reference/web`.
   - Desktop path: copy the no-AI `dashboard.html`, then add the AI sections.
4. **Write `templates/themes.md` in both skills.** Content is in the Theme presets section above.
5. **Write `rpa-dashboard-ai/templates/contract.md`.** It extends the no-AI contract with:
   - `Run{job_id,status:pending|queued|running|done|failed,model,pages_done,pages_total,summary:{green,amber,red,unscored}}`
   - `ReviewRow{row_id,field,value,band,score,reason,verified,corrected_value}`
   - `RoiRun{model,input_tokens,output_tokens,thinking_tokens,total_cost}`
   - Endpoints: `PATCH /review/{row_id}`, `POST /runs/{id}/approve` (server gate), `GET /roi`.
   - Polling: 1.5–2s only while a run is busy.
6. **Write `rpa-dashboard-ai/templates/ai-sections.html`.** Plain HTML/CSS/JS versions of the band legend, the review split pane and the ROI tiles, for the desktop path.
7. **Strip project-specific bits from the AI reference files.** Remove ECW/Tebra project names, SPB_* tables and patient/ticket wording, or mark them as such. **Never** ship real patient data (PHI), internal IPs or keys. The reference copies have already been checked for these, but check again after editing.
8. **Verify.** Open `dashboard.html` in a browser using sample data. Check light, dark and narrow width. Load each SKILL.md and make sure every path it references exists.

## Done when
- Both folders have a SKILL.md and all the templates it references.
- In a fresh test project, each skill:
  - asks the questions in order,
  - reports any existing frontend,
  - produces a working dashboard page that renders in light and dark.