@schandlergarcia/sf-web-components 1.9.66 → 1.9.67

package/.a4drules/skills/command-center-builder/SKILL.md

@@ -1,19 +1,21 @@
 ---
 name: command-center-builder
 description: >-
-  Strict rules for building command center pages, dashboards, components, and
-  layouts. Use when creating or editing dashboard pages, choosing components,
-  designing layouts, styling with dark mode, or working with charts, tables,
-  forms, filters, chat, or navigation in this project.
+  Conventions and patterns for building the Engine Travel Command Center
+  dashboard and other command center pages. Covers layout patterns
+  (visualization-hero, grid), component selection (MetricCard, ChartCard,
+  GeoMap, ListCard, ActivityCard), dark mode, brand colors, styling, and
+  wiring dashboards into the app. Use when scaffolding, building, or editing
+  any dashboard page in this project.
 ---
 
 # Command Center Builder Rules
 
 These rules apply when building dashboards rendered by `CommandCenter.tsx`. For full component API details, read the **component-library** skill.
 
-## STOP — READ BEFORE WRITING ANY CODE
+## Core Conventions
 
-**Every time you build a dashboard, you MUST follow these non-negotiable rules. Violations are the #1 cause of rejected dashboards.**
+The following conventions apply to all dashboard development in this project.
 
 Before writing any code, read `.a4drules/features/pre-code-checklist.md` and verify all requirements. The most common mistakes are:
 - Creating `.jsx` instead of `.tsx` files
@@ -21,7 +23,7 @@ Before writing any code, read `.a4drules/features/pre-code-checklist.md` and ver
 - Using forbidden colors (`text-white`, `bg-black`)
 - Hand-rolling HTML cards instead of using library components
 
-1. **Actually write files to disk.** Use the file-writing tools to create `.tsx` files (NOT `.jsx`) in `src/pages/` (NOT `src/components/pages/`) and update `CommandCenter.tsx` to import your dashboard. This is a TypeScript project - all React components MUST use `.tsx` extension. If you only describe what you would build without creating the files, the dashboard will not render. Verify the files exist after writing them.
+1. **Write `.tsx` files** in `src/pages/` and update `CommandCenter.tsx` to import the dashboard. This is a TypeScript project — all React components use `.tsx` extension.
 
 2. **Use ONLY library components** from `@/components/library` for all cards, charts, tables, lists, and feeds. The library has 30+ components — there is no reason to hand-roll HTML. See the component table below.
 
@@ -33,11 +35,9 @@ Before writing any code, read `.a4drules/features/pre-code-checklist.md` and ver
 
 6. **Never `npm install` Salesforce packages.** The `@salesforce/*` packages are platform-provided via broken symlinks. They are stubbed in `src/stubs/` and aliased in `vite.config.ts`. Do not try to install them — they don't exist on npm. If you see a TypeScript error about `@salesforce/vite-plugin-webapp-experimental`, ignore it — the build still succeeds via `vite build` (the `tsc` error is in `vite.config.ts` which is handled separately by `tsconfig.node.json`).
 
-If your output violates any of these 6 rules, it will be rejected and you will need to redo the work.
+## Use Library Components — Not Hand-Rolled HTML Cards
 
-## CRITICAL: Use Library Components — Never Hand-Roll HTML Cards
-
-**This is the #1 mistake.** The component library (`@/components/library`) provides pre-built, themed, dark-mode-ready cards for every common dashboard need. You MUST use them instead of writing raw `<div>` cards with custom classes.
+The component library (`@/components/library`) provides pre-built, themed, dark-mode-ready cards for every common dashboard need. Use them instead of writing raw `<div>` cards with custom classes.
 
 ### Before writing ANY card-like UI, check this table:
 
@@ -53,7 +53,7 @@ If your output violates any of these 6 rules, it will be rejected and you will n
 | Text summary | `NarrativeSummary` / `SectionCard` | `<div>` with headings and paragraphs |
 | Alert / callout | `CalloutCard` | Custom banner div |
 
-**Every visible section of a dashboard should be a library component.** If you find yourself writing `<div className="bg-white border rounded-[10px] shadow-sm p-6">` with content inside, STOP — you are hand-rolling a card. Find the library component that fits.
+Every visible section of a dashboard should be a library component. If you're writing `<div className="bg-white border rounded-[10px] shadow-sm p-6">` with content inside, that's a hand-rolled card — use a library component instead.
 
 ### Correct example:
 
@@ -99,9 +99,9 @@ import { MetricCard, ListCard, ActivityCard, WidgetCard } from "@/components/lib
 </div>
 ```
 
-## Images (MANDATORY)
+## Images
 
-The only image allowed in dashboards is the **company logo**: `src/assets/images/engine_logo.png`. Import it as a module and use it where a logo is needed (nav header, branding, etc.).
+The company logo is at `src/assets/images/engine_logo.png`. Import it as a module and use it where a logo is needed (nav header, branding, etc.).
 
 ```jsx
 import engineLogo from "@/assets/images/engine_logo.png";
@@ -123,7 +123,7 @@ import engineLogo from "@/assets/images/engine_logo.png";
 <div className="w-8 h-8 bg-black rounded" />  // placeholder box instead of logo
 ```
 
-## No Dashboard-Level Navigation (MANDATORY)
+## No Dashboard-Level Navigation
 
 Dashboard pages must NOT include their own `<nav>`, header bar, or top navigation of any kind. Navigation is handled by `appLayout.tsx`. The dashboard renders inside the app shell — adding a nav inside the dashboard creates a duplicate header, which is the most visually obvious mistake.
 
@@ -152,7 +152,7 @@ Splitting a dashboard into 5 tab "pages" (Overview, Travelers, Spend, Policy, Ev
 
 ### Wiring a new dashboard (REQUIRED STEPS)
 
-You must do ALL of these or the dashboard will not render correctly:
+All three steps are required for the dashboard to render:
 
 **Step 1:** Create the dashboard file in `src/pages/` (NOT `src/components/pages/`):
 ```tsx
@@ -346,7 +346,7 @@ Defined in `global.css` (`--color-brand-*` and `--color-engine-*`), available as
 
 Canonical: `"operational"`, `"degraded"`, `"outage"`, `"maintenance"`. Always show color + text label.
 
-## Dark Mode (MANDATORY)
+## Dark Mode
 
 Every visible element needs both light and dark styles. Library components handle this automatically — which is another reason to use them.
 
@@ -429,9 +429,9 @@ Use `ChatBar` (command palette, ⌘K) for dashboards. `ChatPanel` for full-page
 
 `searchable` when 10+ rows (unless `FilterBar` handles search). `sortable` on comparable columns. `paginated` when 10+ rows. Use built-in column `type` before custom `render`.
 
-## Charts & Visualizations (MANDATORY)
+## Charts & Visualizations
 
-**All charts, graphs, maps, and visualizations MUST use library components.** Never use Recharts, Chart.js, Nivo, or any third-party charting library. Never hand-roll SVG, canvas, or custom chart markup. The ONLY charting tools allowed are `D3Chart` (via `D3ChartTemplates` or a custom `renderChart` function) and `GeoMap`.
+All charts, graphs, maps, and visualizations use the library's charting components. Never use Recharts, Chart.js, Nivo, or any third-party charting library. Never hand-roll SVG, canvas, or custom chart markup. The ONLY charting tools allowed are `D3Chart` (via `D3ChartTemplates` or a custom `renderChart` function) and `GeoMap`.
 
 | Visualization | MUST use | NEVER do |
 |--------------|----------|----------|

package/.a4drules/skills/command-center-guide/SKILL.md

@@ -1,36 +1,46 @@
 ---
 name: command-center-guide
-description: Master guide for building command center dashboards. Routes to the appropriate phase file or reference skill.
+description: >-
+  Overview of the development workflow for the Engine Travel Command Center
+  and other command center dashboards. Maps tasks to the right skills:
+  component-library for API reference, command-center-builder for layout
+  and conventions, command-center-project for file structure and routing.
+  Also covers Salesforce GraphQL data integration and Agentforce agent setup.
 ---
 
 # Command Center Development Guide
 
-## Quick Start
+## Engine Travel Command Center
 
-For the Engine Travel Command Center, use the phase files in `.a4drules/phases/`:
+The product spec is in `engine-command-center-prd.md` at the React app root (`force-app/main/default/uiBundles/reactcursor1/`). It defines the layout, components, data model, and brand tokens for the dashboard.
 
-| Phase | File | What to build |
-|-------|------|---------------|
-| 1 | `phase-1-layout.md` | Header, hero map, glass overlays, placeholder panels |
-| 2 | `phase-2-components.md` | Library components + sample data |
-| 3 | `phase-3-live-data.md` | GraphQL hooks + live Salesforce data |
-| 4 | `phase-4-agent.md` | Eva ChatBar + Salesforce signals |
+Sample data is pre-built in `src/data/engine-sample-data.js` with dashboard-ready exports.
 
-Each file is self-contained with a code template and exact imports. Complete phases in order.
+## Skills
 
-## Reference Skills (read on demand)
+| Skill | What it covers |
+|-------|---------------|
+| **component-library** | Component API reference — props, data shapes, import patterns |
+| **command-center-builder** | Dashboard conventions — layout, styling, component selection, dark mode |
+| **command-center-project** | Project structure — routing, file locations, tech stack, wiring |
+| **outer-app** | Outer app — navigation, shadcn/ui, non-dashboard pages |
 
-| Skill | When to use |
-|-------|-------------|
-| `component-library/SKILL.md` | Looking up component props or choosing which component to use |
-| `command-center-project/SKILL.md` | Understanding project structure, routing, tech stack |
-| `outer-app/SKILL.md` | Working on the app shell, navigation, or non-dashboard pages |
+## Workflow
 
-## Decision Tree
+1. Read the PRD (`engine-command-center-prd.md`) for what to build
+2. Reference **component-library** for component APIs
+3. Follow **command-center-builder** conventions for layout and styling
+4. Reference **command-center-project** for file locations and wiring
 
-1. **Building the Engine dashboard?** → Read the phase file for your current phase
-2. **Need component API details?** → Read `component-library/SKILL.md` → relevant sub-file
-3. **Adding routes or pages?** → Read `command-center-project/SKILL.md`
-4. **Working on app shell/nav?** → Read `outer-app/SKILL.md`
-5. **Connecting to live data?** → Phase 3 file + global skills: `exploring-webapp-graphql-schema`, `using-webapp-graphql`
-6. **Adding Agentforce agent?** → Phase 4 file + global skill: `managing-webapp-agentforce-conversation-client`
+## Salesforce Data Integration
+
+For live data, use these global skills:
+- **exploring-webapp-graphql-schema** — Look up objects and fields in `schema.graphql`
+- **generating-webapp-graphql-read-query** — Generate typed GraphQL queries
+- **using-webapp-graphql** — Create data hooks with `{ data, loading, error }`
+
+## Agentforce Integration
+
+For AI agent features, use:
+- **managing-webapp-agentforce-conversation-client** — Full Agentforce setup
+- **component-library** (`chat-data.md`) — ChatBar component API

package/.a4drules/skills/command-center-project/SKILL.md

@@ -1,9 +1,11 @@
 ---
 name: command-center-project
 description: >-
-  Project architecture, tech stack, and conventions for the enginebespokeapp.
-  Use when building components, pages, or features in this project, or when
-  asking about its structure, patterns, or conventions.
+  Project architecture, tech stack, and file conventions for the Engine Travel
+  Command Center app. Vite + React 19 + TypeScript + Tailwind CSS 4. Covers
+  project structure, route architecture, path aliases, two UI systems
+  (shadcn for outer app, component library for command center), and how
+  dashboards wire into CommandCenter.tsx and the route tree.
 ---
 
 # Enginebespokeapp — Project Context

package/.a4drules/skills/component-library/SKILL.md

@@ -1,9 +1,12 @@
 ---
 name: component-library
 description: >-
-  Complete reference for the Command Center component library. Every component,
-  its exact props, data shapes, and when to use it. This is the authoritative
-  source — do not guess prop names or data formats.
+  API reference for the command center component library at
+  @/components/library. Documents every component (MetricCard, ChartCard,
+  D3Chart, D3ChartTemplates, GeoMap, ListCard, ActivityCard, TableCard,
+  StatusCard, WidgetCard, BaseCard, ChatBar, Avatar, UIChip, FilterBar),
+  their props, data shapes, and import patterns. Use when looking up how
+  to use a specific component or choosing which component fits a need.
 ---
 
 # Component Library

package/CHANGELOG.md

@@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [1.9.66] - 2026-04-01
+## [1.9.67] - 2026-04-01
 
 ### Fixed
 - **6 data bugs in engine-sample-data.js**:
@@ -20,22 +20,29 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **PRD (engine-command-center-prd.md)**:
   - Fixed "Sarah Chen" → "Priya Patel" in section 8c escalation example
   - Rewrote section 13 build prompts to sound natural (removed AI coaching language)
+  - Removed "Required skills:" line from header
 - **Simplified .a4drules documentation** - Removed redundancy, contradictions, and AI coaching language:
   - `features/engine-dashboard-rule.md` - Rewritten as "Project Conventions" (reduced from 310 to ~65 lines)
   - `features/command-center-dashboard-rule.md` - Rewritten as slim conventions (~30 lines)
   - `features/pre-code-checklist.md` - Rewritten as "Quick Reference" (~25 lines, removed auto-load)
   - `features/phase2-data-pattern.md` - Rewritten as "Sample Data" documentation (~20 lines)
-  - `skills/command-center-builder/SKILL.md` - Fixed map contradiction, removed validator contradiction, removed AI coaching language
+  - `skills/command-center-builder/SKILL.md` - Fixed map contradiction, removed validator contradiction, removed AI coaching language. Description now includes "Engine Travel Command Center", "scaffold", component names for better matching
   - `skills/command-center-builder/page-layout.md` - Fixed map contradiction, softened wiring language
   - `skills/command-center-builder/completion-checklist.md` - Removed validator contradiction
   - `skills/command-center-builder/improved-build-process.md` - Rewritten as methodology description (~30 lines)
   - `skills/command-center-builder/getting-started.md` - Removed AI coaching language
   - `skills/command-center-builder/components-styling.md` - Removed (MANDATORY) header
   - `skills/command-center-builder/charts-visualization.md` - Removed (MANDATORY) header
-  - `skills/command-center-project/SKILL.md` - Fixed file path contradiction (src/components/pages/ → src/pages/)
-  - `skills/command-center-guide/SKILL.md` - Reduced from 270 to ~45 lines (simplified routing guide)
+  - `skills/command-center-project/SKILL.md` - Fixed file path contradiction (src/components/pages/ → src/pages/). Description now includes "Engine Travel Command Center", tech stack keywords
+  - `skills/command-center-guide/SKILL.md` - Reduced from 270 to ~45 lines (simplified routing guide). Description improved for better matching
+  - `skills/component-library/SKILL.md` - Description now lists all key component names (MetricCard, ChartCard, GeoMap, etc.) for better matching
+
+**Context:** Complete documentation overhaul to eliminate confusion from scattered, contradictory guidance. Removed prescriptive AI coaching language in favor of clear technical conventions. Improved skill descriptions for better discoverability.
 
-**Context:** Complete documentation overhaul to eliminate confusion from scattered, contradictory guidance. Removed prescriptive AI coaching language in favor of clear technical conventions.
+## [1.9.66] - 2026-04-01
+
+### Updated
+- **Documentation improvements** - Initial complete sync from react-cursor-1
 
 ## [1.9.65] - 2026-04-01
 

package/data/engine-command-center-prd.md

@@ -2,8 +2,6 @@
 
 Product Requirements Document · TDX26 Demo Build
 
-**Required skills:** `command-center-builder`, `command-center-project`, `component-library`, `outer-app`
-
 ---
 
 ## 1. Product Overview
@@ -431,39 +429,31 @@ Mandatory on every element. The dashboard must work in both light and dark mode
 
 ## 13. Build Prompts
 
-**Build Methodology:** 4-phase incremental process (Layout → Components → Data → Agent). Each phase has a self-contained instruction file in `.a4drules/phases/` with code templates and exact imports.
+Build in 4 incremental phases. Each prompt maps to one beat of the demo arc.
 
 ---
 
 ### Phase 1: Layout & Structure
 
-> Read `.a4drules/phases/phase-1-layout.md` and follow the code template.
->
-> Scaffold the Engine Travel Command Center skeleton with header, hero map, glass KPI overlays, flight status strip, and 4 placeholder data panels.
+> Scaffold the Engine Travel Command Center skeleton. Build the visualization-hero layout from section 5 with the header, hero map, glass KPI overlays, flight status strip, and placeholder cards for the data panels.
 
 ---
 
 ### Phase 2: Components & Sample Data
 
-> Read `.a4drules/phases/phase-2-components.md` and follow the instructions.
->
-> Replace placeholders with library components. Import data from `src/data/engine-sample-data.js`. Add map data (markers, arcs, overlays). Build the 4 data panels: Disruptions, Active Travelers, Escalations, Monthly Spend Trend.
+> Replace the placeholders with real components and wire up the sample data. Build the 4 data panels from section 8 — Disruptions, Active Travelers, Escalations, and Monthly Spend Trend. Add map markers, arcs, and overlays from the sample data so we can see where travelers are.
 
 ---
 
 ### Phase 3: Real Data Integration
 
-> Read `.a4drules/phases/phase-3-live-data.md` and follow the instructions.
->
-> Connect to live Salesforce data via GraphQL. UI stays identical to Phase 2.
+> Connect the dashboard to live Salesforce data using GraphQL. Read the sample data file to see which fields are needed, then build queries and hooks for each object. The UI should stay identical — just swap the data source.
 
 ---
 
 ### Phase 4: Agentforce Integration
 
-> Read `.a4drules/phases/phase-4-agent.md` and follow the instructions.
->
-> Add Eva ChatBar to header. Add Salesforce signals throughout.
+> Add Eva to the header as a ChatBar. Add subtle Salesforce signals throughout — "View in Salesforce" links, success toasts, "Powered by Agentforce" badge.
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.9.66",
+  "version": "1.9.67",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",