Rpa_Skills/rpa-dashboard-ai/SKILL.md

name, description

name

description

rpa-dashboard-ai

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.