--- 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), an approve gate the server enforces, and a cost/ROI page (tokens and cost per run, total and monthly spend, priced coverage, an against-doing-it-by-hand panel). Web path is React + Vite + Tailwind with a sample-data server stub; desktop path (PyQt) is the no-AI page plus plain-HTML AI sections over the Qt bridge, gate enforced in Python. 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: `` 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, cost page**, sample data. | | `templates/web/pricing.py` | The pricing table (with its source and as-of date) and `cost_for_call`. The backend imports it. | | `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/desktop/ai_sections.html` | Desktop: the Review tab (band legend, review split pane, drafts, Verify, approve gate) and the Cost tab in plain HTML, pasted into `dashboard.html`. | | `templates/desktop/ai_bridge.py` | Desktop: the no-AI `Bridge` plus the `ai_request` slot that hands every AI request to the Python review backend. | | `templates/contract.md` | The AI contract: runs, review rows, endpoints and the gate, over HTTP or the Qt bridge. Extends `contract.md`. | | `templates/reference/` | Superbill Review extracts, marked EXAMPLE ONLY. Use them to port extra polish, never copy their project names. | | `frontend.md`, `detect_frontend.py` | Existing frontend: detect, report, keep or restyle. | | `themes.md`, `palette.py` | Theme presets and the custom-colour steps. | | `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 detect_frontend.py ` and read `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. Note the provider, the model names, and whether the response's token usage (input, output, thinking) is kept. - **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 `frontend.md` sections 2 to 5. - **No frontend:** say "No existing frontend found." and go to step 3. - **Frontend found:** say "Frontend found at ``, stack ``, colours `
`." 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 no-AI PyQt page with `templates/desktop/ai_sections.html` pasted in, hosted by `templates/desktop/ai_bridge.py`. No web server, no npm. ## 5. Ask which optional sections to build Always built: the no-AI shell and sections, plus the band legend, the review split pane, the approve gate and the cost page. Ask which extras to add (choose any, or none): **checkpoint tracker**, **admin/roles screen**, **login page**, **model picker** (choose the model per batch), **retry on another model** (for failed runs). Build only the chosen ones at their `OPTIONAL:` markers, and delete the markers. - **Checkpoint tracker, admin/roles, login:** web: port them from `dashboard.html`'s `OPTIONAL:` blocks. Desktop: they're already in the no-AI page; `sections.py` keeps the chosen ones (no-AI step 6), and `sections.md` says what each needs from the host. - **Model picker:** a `` (from `GET /models`, defaulting to the run's own model) and a Retry button that sends `POST /runs/{job_id}/retry {model}`, then polls the run as usual. Both need the endpoints in `templates/contract.md`; add them to the backend (and the stub). ## 6. Build (web) 1. Copy `templates/web/` into the project as `dashboard/` (an existing frontend: see `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 `themes.md` (for Ember, add its font `` to `index.html`'s ``), or with `python palette.py ""` tokens for a custom colour, showing the user its contrast table. For keep, fill them from the project's tokens (`frontend.md` section 4). Never change the band colour block. 4. Search the output for `{{`. None may be left. ## 6. Build (desktop) 1. Build the no-AI desktop page and host first, exactly as steps 6 and 7 of `../rpa-dashboard-no-ai/SKILL.md` say: `dashboard/dashboard.html` (theme, placeholders, `SAMPLE_DATA = false` once the bot is wired), `bridge.py` and `bot_runner.py`. 2. Paste the whole of `templates/desktop/ai_sections.html` (Review and Cost tabs) into `dashboard/dashboard.html`, just before ``. Change nothing in it: it uses the page's theme tokens, and its band colours are fixed. 3. Copy `templates/desktop/ai_bridge.py`, `templates/web/server_stub.py`, `templates/web/bands.py` and `templates/web/pricing.py` into `dashboard/`. Fill `{{APP_NAME}}` in `ai_bridge.py`. 4. The app now starts with `python dashboard/ai_bridge.py` (not `bridge.py`). 5. Search the output for `{{`. None may be left. ## 7. Wire the data The contracts: `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. - **Cost page:** copy `pricing.py` next to the backend. Fill `PRICING` with the rates of the models the project really calls, from the provider's pricing page, and set `PRICING_SOURCE` and `PRICING_AS_OF`. If you can't read the rates, ask the user for them. The backend stores each run's token usage and serves `GET /roi`, pricing each run with `cost_for_call`. A run with no recorded usage gets `null`, never 0. If the extraction doesn't keep token usage yet, wire it to (for example Gemini's `usage_metadata`, OpenAI's and Anthropic's `usage`). In sample mode, replace the stub's `ROI_RUNS` models with the project's models. - **Desktop:** the same rules, over the bridge (`templates/contract.md`, "Desktop"). The shell is wired in `bot_runner.py` as the no-AI skill says. For review data, keep `server_stub.py` (replace its `SAMPLE_FIELDS` with the real fields, as above) until the project stores its extraction results. Then write a module with the same `dispatch(method, path, body)` over the project's store (same routes, bands from `bands.py`, approve refused while flagged fields are unverified) and import it in `ai_bridge.py` instead of `server_stub`. The page never decides approval. - 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, the run panel and the Report tab 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; - on Cost: the coverage pill, total and this month's spend, the month table, a run marked "not priced", the pricing source and as-of date, and the by-hand figure changing when an assumption is edited; - no `{{` is left and the console shows no script errors. Desktop: `python dashboard/bot_runner.py` (dry run: real steps, ending at 100), then `python dashboard/ai_bridge.py`, and check the same list in the window. If you can't run npm (or open a window) 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.