openfdd-react-spa

Maintain the Open-FDD React product SPA (frontend/web → openfdd-web). Use when editing Overview, Inspect, FDD Plots, RCx, Mapping, Operations, Sites, auth UI, health matrices, or client Plotly charts against central /api (DataFusion).

Jump to install

Repository: bbartling/open-fdd
Last source activity: September 1, 2026 at 19:28
Detected SKILL.md language: English
Stars: 163
Forks: 33

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/bbartling/open-fdd --skill openfdd-react-spa

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

openfdd-cookbook-parity

Use when editing rule cookbooks, parity matrix, or cookbook CI (cookbook-parity.yml, cookbook_parity_check.py). Triggers on: pandas cookbook, SQL cookbook, parity-matrix, gap-matrix, rule headings.

2026-09-01

openfdd-railway-cli

Use when installing, authenticating, linking, or re-pinning the Open-FDD Railway hub (central/mqtt/web) via the Railway CLI on bensbench. Triggers on: railway CLI, RAILWAY_TOKEN, railway login, railway link, railway redeploy, Railway re-pin, OPENFDD_NGINX_RESOLVER, sha tip on Railway, gleaming-cooperation.

2026-09-01

openfdd-stack-ghcr

Use when pulling, rebuilding, or verifying Open-FDD GHCR stack images. Test channel is nightly. Triggers on: nightly, openfdd-central, openfdd-web, GHCR, openfdd_stack_up, OPENFDD_IMAGE_TAG.

2026-09-01

View all from this repository

Open-FDD React SPA

When to use

Changing frontend/web pages, API clients, or Plotly builders

Overview / FDD / RCx chart parity vs vibe19 presentation (colors, axes)

Operations MQTT monitor / OT strip, Sites inventory

Auth/login hygiene for internet-facing UI

Rules

Browser → central Rust /api only. Overview data from /api/analytics/* via fetchCentralOverview — never invent a pandas/oracle product path.

FDD math stays in DataFusion SQL (sql_rules/). TypeScript builds figures only.

Shared palette: frontend/web/src/api/plotlyTheme.ts (RAINBOW_PALETTE).

No bench secrets, credential paths, or privileged username prefill on login.

Prefer Vitest unit tests next to changed modules; Playwright for smoke when needed.

Do not add Python to the product SPA or depend on open_fdd at runtime.

Overview = tables + health matrices (AHU / chiller / boiler / HP / VAV). No Plotly on Overview. Motor / mech / econ / BAS figures are additive RCx presets. CSV overlay lives on Inspect (/inspect). Empty charts mean missing zip roles — see openfdd-package-mapping.

Sidebar brand shows GET /api/health semver+shortsha (data-testid="app-revision"). Collapsed sidebar: +shortsha only.

After Lab Update this rule (RULES_UPDATED), FDD Plots / Reports must refetch results + series so confirm_min session overlays show up.

Do not drop REQUIRED_RCX_PRESET_IDS. Health row tint uses existing --health-broken-1/2/3 tokens (n/3; ?/3 is not red).

Operations (/operations) stays its own main tab — not nested under Sites. MQTT console watches Central’s ingest buffer (GET /api/mqtt/monitor) — no operator-facing scrape/poll-interval knobs (fieldbus owns OT cadence). OT strip may surface /api/ingest/stats + /api/edges. Never put broker credentials in the browser.

Sites (/sites) is package/edge inventory. CSV / MQTT / Both is an operator label only — not a dual-writer historian epic.

Low-RAM benches: prefer npm run dev (Vite → :8080) and get human approval before GHCR openfdd-web fresh pulls after UI PRs.

Rule display names: one contract across sidebar, FDD Plots, plot titles, health matrices, and exports — see docs/RULE_DISPLAY_NAMES.md. Registry description is canonical short name; cookbooks add long titles. Use shared ruleLabels helpers (planned); merge GET /api/fdd/rules into cookbookRuleCatalog at boot instead of duplicating static maps.

Key files

Area

Path

Overview assembly

frontend/web/src/api/centralOverview.ts

Overview types

frontend/web/src/api/overviewTypes.ts

Health matrices

frontend/web/src/components/HealthMatrixSection.tsx

Inspect

frontend/web/src/pages/InspectPage.tsx

Operations

frontend/web/src/pages/OperationsPage.tsx

Sites

frontend/web/src/pages/SitesPage.tsx

RCx Overview presets

frontend/web/src/api/rcxOverviewPresets.ts

RCx / FDD charts

frontend/web/src/api/vibeCharts.ts

Theme

frontend/web/src/api/plotlyTheme.ts

Rule labels

frontend/web/src/lib/cookbookRuleCatalog.ts; planned lib/ruleLabels.ts

SPA shell

frontend/web/src/App.tsx, components/

Anti-patterns

Calling removed overview-oracle endpoints

Computing fault logic in the browser beyond presentation masks

Hardcoding purple/glow “AI slop” themes that fight product CSS tokens

Putting Plotly motor/mech/econ/BAS hosts back on Overview

Nesting Operations under Sites or treating Sites ingest labels as backend mode

Exposing MQTT broker secrets to the SPA

Shipping GHCR web without Vite operator approval on low-RAM benches when required by the active plan