Initial commit: plan, spec, tickets and dashboard skill templates

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

PLAN.md

@@ -0,0 +1,115 @@
+# 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.