Rpa_Skills/rpa-dashboard-ai/SKILL.md

---
name: rpa-dashboard-ai
description: Builds a working dashboard for an RPA bot or service that uses AI (an LLM or OCR extraction call). It has everything from rpa-dashboard-no-ai (sidebar, top bar with dark toggle and status dot, KPI cards, batch donut, run panel with steps and live log, report table with search and export) plus confidence bands, a review split pane (source document beside the extracted fields, band filters, draft edits, Verify) and an approve gate the server enforces. Web path is React + Vite + Tailwind with a sample-data server stub. Use when the user asks for an "AI RPA dashboard", an "extraction dashboard", an "LLM/OCR review dashboard", or any RPA/bot dashboard in a project that calls an LLM or OCR to extract fields. Needs rpa-dashboard-no-ai installed next to it.
---

# RPA dashboard (AI)

Everything this skill needs is bundled. Never read the original source projects.
Shared files live in the no-AI skill, installed next to this one: `<no-ai>` below
means `../rpa-dashboard-no-ai/templates/`.

| File | What it is |
|---|---|
| `templates/web/` | The React + Vite + Tailwind starter: shell, KPI, donut, run panel, report, **band legend, review split pane, approve gate**, sample data. |
| `templates/web/server_stub.py` | Sample-data backend for runs, review rows and the approve gate. Standard library only. |
| `templates/web/bands.py` | The band cut points and rules. The one source of truth: the backend imports it. |
| `templates/contract.md` | The AI contract: runs, review rows, endpoints and the gate. Extends `<no-ai>contract.md`. |
| `templates/reference/` | Superbill Review extracts, marked EXAMPLE ONLY. Use them to port extra polish, never copy their project names. |
| `<no-ai>frontend.md`, `<no-ai>detect_frontend.py` | Existing frontend: detect, report, keep or restyle. |
| `<no-ai>themes.md`, `<no-ai>palette.py` | Theme presets and the custom-colour steps. |
| `<no-ai>contract.md` | The no-AI contract the AI one extends. |

The questions are the same as the no-AI skill's, in the same order. Ask one at a
time and wait for the answer. If the user's request already answers a question,
don't ask it again.

## 1. Scan the project

Before asking anything:
- **Frontend:** run `python <no-ai>detect_frontend.py <project root>` and read
  `<no-ai>frontend.md` section 1.
- **AI call:** find the LLM or OCR extraction (for example `genai`, `openai`,
  `anthropic`, Textract or Tesseract calls): which fields it returns, which are
  mandatory, and whether it returns per-word scores.
- **Bot or backend:** the entry point, what it prints, and any web framework
  (FastAPI, Flask, Django).

If the project has no AI call at all, say so and suggest `rpa-dashboard-no-ai`.

## 2. Report the frontend, then ask keep or restyle

Follow `<no-ai>frontend.md` sections 2 to 5.
- **No frontend:** say "No existing frontend found." and go to step 3.
- **Frontend found:** say "Frontend found at `<path>`, stack `<stack>`, colours
  `<main tokens>`." Then ask: **keep its look**, or **restyle** it?

## 3. Ask for colours

Skip this if the user chose keep. Offer:
1. **Tebra Sky**: blue glass cards on a sky gradient.
2. **Superbill Ember**: flat surfaces with a red-orange brand gradient.
3. **Custom**: the user gives one brand hex colour.

## 4. Ask desktop or web

Ask only if there is no frontend. If there is one, use its stack. If the project
uses PyQt, choose desktop and say so.
- **Web:** the React starter in `templates/web/`, served by the backend.
- **Desktop:** the plain-HTML AI sections for the PyQt page aren't bundled yet.
  Tell the user, and offer the web path or the no-AI desktop page
  (`rpa-dashboard-no-ai`) without the AI sections.

## 5. Ask which optional sections to build

Always built: the no-AI shell and sections, plus the band legend, the review split
pane and the approve gate. Ask which extras to add (choose any, or none):
**checkpoint tracker**, **admin/roles screen**, **login page**. Build only the
chosen ones at their `OPTIONAL:` markers, and delete the markers.

## 6. Build (web)

1. Copy `templates/web/` into the project as `dashboard/` (an existing frontend:
   see `<no-ai>frontend.md` section 3; in an existing React app, port the
   `src/` components into it). Don't copy `node_modules/` or `dist/`.
2. Fill every `{{...}}` in `dashboard/index.html`'s CONFIG block:

   | Placeholder | Value |
   |---|---|
   | `APP_NAME`, `APP_SUBTITLE` | The project's name and a short tagline. |
   | `LOGO_SRC` | The logo's path, or empty. |
   | `STEPS_JSON` | The run steps as a JSON list, for example `["Initializing","Extract","Review","Completed"]`. |
   | `REPORT_COLUMNS_JSON` | `[{"key":..., "label":...}]`, with a `status` column. |
   | `API_BASE` | `/api` unless the backend mounts the dashboard API elsewhere. Keep it equal to `API` in `server_stub.py`. |

3. Apply the theme in `dashboard/src/index.css` only: replace the `body{...}` and
   `body.dark{...}` token blocks with the preset from `<no-ai>themes.md` (for Ember,
   add its font `<link>` to `index.html`'s `<head>`), or with
   `python <no-ai>palette.py "<hex>"` tokens for a custom colour, showing the user
   its contrast table. For keep, fill them from the project's tokens
   (`<no-ai>frontend.md` section 4). Never change the band colour block.
4. Search the output for `{{`. None may be left.

## 7. Wire the data

The contracts: `<no-ai>contract.md` for the shell, `templates/contract.md` for runs,
review rows and the gate.
- **Sample data (no backend for these endpoints yet):** keep `SAMPLE_DATA = true` in
  `src/store.ts` and use `server_stub.py`. Replace its `SAMPLE_FIELDS` with the
  fields the project's extraction really returns (name, a sample value, word scores,
  mandatory). Tell the user which endpoints their backend must serve later.
- **Backend exists:** add the endpoints from `templates/contract.md` to it. Copy
  `bands.py` next to it and band every field with `field_band(word_scores, value,
  mandatory)`. The approve endpoint must refuse (409 with `detail`) while any flagged
  field is unverified: the page never decides that. For the shell, set
  `SAMPLE_DATA = false` and serve the no-AI endpoints too.
- Never invent fields, model names or prices the project doesn't have.

## 8. Verify

```
cd dashboard
npm install
npm run build
python server_stub.py        # page + sample API on http://127.0.0.1:8000
```

Open the page and check, in light, dark (the toggle) and a window 820px wide or less:
- the dashboard, Run and Report tabs show sample data;
- on Review: the band legend counts and the caveat, band filters, a typed edit marked
  unsaved until Save, a refused Approve while flagged fields are unverified, and
  "page X of Y" on a running document;
- no `{{` is left and the console shows no script errors.

If you can't run npm here, say so and give the user these commands. Finish by
telling the user where the files are, which theme and sections were built, and
whether the review data is sample data or the backend's.