151 lines
8.8 KiB
Markdown
151 lines
8.8 KiB
Markdown
---
|
|
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; 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: `<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/desktop/ai_sections.html` | Desktop: the Review tab (band legend, review split pane, drafts, Verify, approve gate) in plain HTML, pasted into `<no-ai>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 `<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 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 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.
|
|
|
|
## 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` into `dashboard/dashboard.html`,
|
|
just before `</body>`. 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` and
|
|
`templates/web/bands.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: `<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.
|
|
- **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, 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.
|
|
|
|
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.
|