Rpa_Skills/PLAN.md

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.