@schandlergarcia/sf-web-components 1.9.88 → 2.1.0

package/.a4drules/features/command-center-dashboard-rule.md

@@ -6,7 +6,7 @@ paths:
 
 # Command Center Dashboard Rules
 
-These rules apply to all dashboard files. For Engine-specific rules, see `engine-dashboard-rule.md`.
+These rules apply to all dashboard files.
 
 **Read `.a4drules/skills/command-center-builder/SKILL.md` before building any dashboard.** It has the full conventions, component rules, and wiring steps.
 

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

@@ -1,12 +1,11 @@
 ---
 name: command-center-builder
 description: >-
-  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.
+  Conventions and patterns for building Command Center dashboards.
+  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
@@ -115,19 +114,17 @@ import {
   MapPinIcon, GlobeAltIcon, UserIcon,
 } from "@heroicons/react/24/outline";
 
-// Sample data
-import {
-  MAP_MARKERS, MAP_ARCS, MAP_OVERLAYS, FLIGHT_STATUS_LIST,
-  TRAVELER_CARDS, DISRUPTION_CARDS, ESCALATION_CARDS,
-  MONTHLY_SPEND, METRICS,
-} from "@/data/engine-sample-data.js";
+// Sample data (import from your project's sample data file)
+// import { ... } from "@/data/sample-data.js";
 
-// Logo
-import engineLogo from "@/assets/images/engine_logo.png";
+// Logo (import from your project's assets)
+// import logo from "@/assets/images/logo.png";
 ```
 
 **Common mistakes:** `PlaneIcon` doesn't exist (use `PaperAirplaneIcon`), `HotelIcon` doesn't exist (use `BuildingOfficeIcon`), `import { useDataSource }` fails (it's a default export — no braces).
 
+> **Sample data:** Import sample data from your project's data file. The exact exports depend on your domain. Use `useDataSource({ sample: SAMPLE_DATA, live: liveData })` for all data.
+
 ---
 
 ## Core Conventions
@@ -165,7 +162,7 @@ The component library (`@/components/library`) provides pre-built, themed, dark-
 | KPI / stat | `MetricCard` | `<div className="bg-white border ..."><h3>Total Spend</h3><span>$4,903</span></div>` |
 | List of items | `ListCard` | `<div className="bg-white ..."><div className="space-y-3">` with custom item rows |
 | Activity feed (display only) | `ActivityCard` or `FeedPanel` | `<div>` with hand-rolled interaction rows |
-| **Activity feed (with per-item actions like "Assign to Agent")** | **Custom markup inside `BaseCard`** | **`ActivityCard` (doesn't support per-item buttons — see Engine PRD Section 8a)** |
+| **Activity feed (with per-item actions like "Assign to Agent")** | **Custom markup inside `BaseCard`** | **`ActivityCard` (doesn't support per-item buttons)** |
 | Data table | `TableCard` | `<table>` or custom grid of rows |
 | Stats panel | `WidgetCard` or `SectionCard` | `<div className="bg-white ... p-6">` with label/value pairs |
 | Custom interactive content (expand/collapse, inline details) | `WidgetCard` (sections accept arbitrary JSX) or `ListCard` (with `onItemClick` + `itemActions`) | Hand-rolled `<div>` card with custom expand/collapse logic |
@@ -190,7 +187,7 @@ import { MetricCard, ListCard, ActivityCard, WidgetCard } from "@/components/lib
 }))} />
 
 // Activity feed — use ActivityCard
-<ActivityCard title="Eva — Recent Interactions" items={interactions.map(i => ({
+<ActivityCard title="Recent Activity" items={interactions.map(i => ({
   id: i.id, title: i.traveler, description: i.query,
   status: i.status, timestamp: i.time
 }))} />
@@ -203,19 +200,19 @@ import { MetricCard, ListCard, ActivityCard, WidgetCard } from "@/components/lib
 
 ## Images
 
-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.).
+Import your company logo as a module and use it where a logo is needed (nav header, branding, etc.).
 
 ```jsx
-import engineLogo from "@/assets/images/engine_logo.png";
+import logo from "@/assets/images/logo.png";
 
 // On light backgrounds:
-<img src={engineLogo} alt="Engine" className="h-5 w-auto" />
+<img src={logo} alt="Company" className="h-5 w-auto" />
 
 // On dark backgrounds (slate-900 header, dark mode):
-<img src={engineLogo} alt="Engine" className="h-5 w-auto brightness-0 invert" />
+<img src={logo} alt="Company" className="h-5 w-auto brightness-0 invert" />
 ```
 
-The logo is black — use `brightness-0 invert` to make it white when placed on dark surfaces.
+If the logo is dark-colored, use `brightness-0 invert` to make it white when placed on dark surfaces.
 
 - **Do not use external image URLs** (Unsplash, placeholder services, etc.) unless the user explicitly requests images.
 - **Do not use other asset images** (codey-*.png, etc.) unless the user asks for them.
@@ -227,7 +224,7 @@ No `<nav>`, header bar, tab bar, or content-swapping via `useState("activeTab")`
 
 ## Where Dashboards Live
 
-- Dashboard page files: `src/pages/` (e.g. `EngineDashboard.tsx`, `FleetDashboard.tsx`) — **NOT** `src/components/pages/`
+- Dashboard page files: `src/pages/` (e.g. `MyDashboard.tsx`, `FleetDashboard.tsx`) — **NOT** `src/components/pages/`
 - File format: `.tsx` (MUST be TypeScript) — this is a TypeScript project, all React components use `.tsx`, NEVER `.jsx`.
 - `CommandCenter.tsx` wraps with `heroui-scope` div + `AppThemeProvider` + `DataModeProvider` + `Toast.Provider` from `@heroui/react`. **Never recreate these providers in dashboard pages.** When wiring a new dashboard, only change the import — preserve the `heroui-scope` wrapper and `Toast.Provider` exactly as-is. For toasts inside dashboards, import `toast` from `@heroui/react` (or `@/components/library`) — NOT from `sonner`.
 - **Wiring is covered at the top of this file** — see "WIRING — DO THIS FIRST".
@@ -309,10 +306,10 @@ function fmtK(n) {
 
 ## Brand & Accent Colors
 
-Defined in `global.css` (`--color-brand-*` and `--color-engine-*`), available as Tailwind classes.
+Defined in `global.css` (`--color-brand-*`), available as Tailwind classes.
 
-- `engine-*` for the Engine brand: `engine-teal`, `engine-coral`, `engine-orange`, `engine-savings`, `engine-text`, `engine-muted`, `engine-label`, `engine-border`, `engine-bg`
-- `brand-*` for the legacy command center palette (indigo-based)
+- `brand-*` for the command center palette (indigo-based)
+- Custom brand tokens can be defined in `global.css` (e.g. `--color-brand-teal`, etc.)
 - Tailwind built-in colors for status (green/amber/red). Never use brand for status.
 
 ## Semantic Colors
@@ -373,7 +370,7 @@ Three layers: `filterUtils.js` (pure) → `usePageFilters` hook (state) → `Fil
 - Same layout for both modes — only data changes.
 - Sample data: 10–50 items, realistic, deterministic (no `Math.random()`).
 - Define sample data as constants outside the component body.
-- **Live data simulation:** When GraphQL is unavailable, use a separate live data file (`engine-live-data.js`) with a visibly different dataset. Create a hook that simulates async loading via `setTimeout`, then calls `setMode("live")` to flip all `useDataSource` calls at once. This makes the data transition visible — components refresh with new values after a loading period.
+- **Live data simulation:** When GraphQL is unavailable, use a separate live data file with a visibly different dataset. Create a hook that simulates async loading via `setTimeout`, then calls `setMode("live")` to flip all `useDataSource` calls at once. This makes the data transition visible — components refresh with new values after a loading period.
 
 ```jsx
 // ✅ Correct: data defined outside, selected by mode
@@ -398,19 +395,19 @@ Define schemas outside component body. Always `required: true` on mandatory fiel
 
 ## AI Chat & Agent
 
-Two pieces for agent integration — a **ChatBar** component and the **`useEvaAgent` hook** (Agent REST API):
+Two pieces for agent integration — a **ChatBar** component and an **agent hook** (Agent REST API):
 
-- **`ChatBar`** — command-palette strip for suggested prompts. Place between the hero map and data panels (full-width, `px-4 pt-4`), NOT in the header. Always provide 3–5 `suggestions`.
-- **`useEvaAgent`** — pre-installed hook at `src/hooks/useEvaAgent.ts`. Handles OAuth → session → messages → cleanup via the Agentforce Agent REST API. Config is in `src/config/agentApi.ts`. Vite proxy rules in `vite.config.ts` forward requests.
+- **`ChatBar`** — command-palette strip for suggested prompts. Place between the hero/visualization area and data panels (full-width, `px-4 pt-4`), NOT in the header. Always provide 3–5 `suggestions`.
+- **Agent hook** — a hook that handles OAuth → session → messages → cleanup via the Agentforce Agent REST API. Config lives in `src/config/agentApi.ts`. Vite proxy rules in `vite.config.ts` forward requests.
 
-> **Do NOT use `AgentforceConversationClient`** (the iframe widget). We use the Agent REST API via `useEvaAgent`.
-> **Do NOT create wrapper hooks** (useEvaChatAdapter, useDisruptionAlerts, etc.). Use `useEvaAgent` directly.
+> **Do NOT use `AgentforceConversationClient`** (the iframe widget). Use the Agent REST API via a dedicated hook.
+> **Do NOT create wrapper hooks** around the agent hook. Use it directly.
 > **Do NOT create `.env` or `.env.local` files** — config is hardcoded in `src/config/agentApi.ts`.
 
 ```tsx
-import useEvaAgent from "@/hooks/useEvaAgent";
+import useAgentChat from "@/hooks/useAgentChat";
 
-const { messages, isReady, isSending, connect, sendMessage } = useEvaAgent();
+const { messages, isReady, isSending, connect, sendMessage } = useAgentChat();
 useEffect(() => { connect(); }, [connect]);
 
 const handleChat = (text: string) => {
@@ -462,7 +459,7 @@ const spendData = [
 ];
 <ChartCard
   title="30-Day Spend"
-  subtitle="Engine savings"
+  subtitle="Last 30 days"
   chart={
     <D3Chart
       data={spendData}
@@ -551,7 +548,7 @@ Before finishing a dashboard page, verify ALL of these:
 - [ ] **No inline `<svg>`** — use Heroicons from `@heroicons/react`
 - [ ] **`position: fixed` uses `createPortal`** — FABs, modals, toasts
 - [ ] **Data uses `useDataSource`** — sample data defined outside the component
-- [ ] **Only uses company logo** (`@/assets/images/engine_logo.png`) — no external URLs, no placeholder boxes
+- [ ] **Only uses company logo** (from `@/assets/images/`) — no external URLs, no placeholder boxes
 - [ ] **Images preserve aspect ratio** — one dimension auto, never both fixed
 - [ ] **Imports only from `@/components/library`** — no shadcn, no Lucide, no `cn()`
 - [ ] **Grid patterns match the approved list** — no custom grid layouts
@@ -616,7 +613,7 @@ sf project deploy start --source-dir force-app/main/default/classes/TravelDisrup
 
 ### When to create metadata
 
-During the build, proactively create the Salesforce metadata needed for the features you're building. If the dashboard needs field access, create a permission set. If a new field would improve the data model, create it. If automation would enhance a workflow, create a flow. Tell the user what you're creating and ask before doing it. The PRD's build prompts (section 13) include specific instructions for these interactions, with XML templates in section 14.
+During the build, proactively create the Salesforce metadata needed for the features you're building. If the dashboard needs field access, create a permission set. If a new field would improve the data model, create it. If automation would enhance a workflow, create a flow. Tell the user what you're creating and ask before doing it.
 
 ### Key rules
 

package/.a4drules/skills/command-center-builder/getting-started.md

@@ -1,4 +1,4 @@
-# Engine Travel Command Center — Build Guide
+# Command Center Dashboard — Build Guide
 
 The dashboard is built in **3 phases**, one per user prompt. Each phase adds a layer. Do NOT build ahead — only build what the current phase asks for.
 
@@ -6,17 +6,17 @@ The dashboard is built in **3 phases**, one per user prompt. Each phase adds a l
 
 ## RULES THAT APPLY TO EVERY PHASE
 
-> **Read these first. Violations of these rules are the #1 cause of failed demos.**
+> **Read these first. Violations of these rules are the #1 cause of failed builds.**
 
-1. **Phase 1 writes new files. Phases 2 and 3 make surgical edits.** Never rewrite `EngineDashboard.tsx` from scratch in Phase 2 or 3. Rewriting a 400+ line file takes 60s, risks losing prior work, and introduces regressions. Surgical edits take seconds.
+1. **Phase 1 writes new files. Phases 2 and 3 make surgical edits.** Never rewrite the dashboard file from scratch in Phase 2 or 3. Rewriting a 400+ line file takes 60s, risks losing prior work, and introduces regressions. Surgical edits take seconds.
 
-2. **Do NOT read library component source files.** This means: do NOT read `GeoMap.jsx`, `BaseCard.jsx`, `Avatar.jsx`, `ChatBar.jsx`, `ChartCard.jsx`, `D3Chart.jsx`, `useDataSource.jsx`, `DataModeProvider.jsx`, `DataModeToggle.jsx`, or any file inside `src/components/library/`. All props and patterns are documented in this build guide and the PRD. Reading source files wastes time and produces no new information.
+2. **Do NOT read library component source files.** Do NOT read `GeoMap.jsx`, `BaseCard.jsx`, `Avatar.jsx`, `ChatBar.jsx`, `ChartCard.jsx`, `D3Chart.jsx`, `useDataSource.jsx`, `DataModeProvider.jsx`, `DataModeToggle.jsx`, or any file inside `src/components/library/`. All props and patterns are documented in this build guide and the SKILL.md. Reading source files wastes time and produces no new information.
 
 3. **Do NOT load unnecessary skills.** Phase 1 needs only `command-center-builder`. Do NOT load `outer-app`, `component-library`, `command-center-project`, `agentforce-test`, or `agentforce-observability` — they add latency and aren't needed.
 
 4. **Do NOT run `npm run build` or `npm run dev` during the build.** Vite handles JSX/TSX regardless of TypeScript errors. Pre-existing TS7016 errors (from untyped .jsx library files) are normal and expected.
 
-5. **STOP and ASK before creating Salesforce metadata.** Custom fields, platform events, and Apex classes are scripted demo moments. Suggest them, wait for "yes," then create. Never create them proactively.
+5. **STOP and ASK before creating Salesforce metadata.** Custom fields, platform events, and Apex classes should be suggested to the user first. Never create them proactively.
 
 6. **Do NOT create extra files not listed in the build guide.** Each phase lists exactly which files to create or edit. Do NOT create wrapper hooks, adapter files, .env files, or any file not explicitly listed.
 
@@ -25,37 +25,32 @@ The dashboard is built in **3 phases**, one per user prompt. Each phase adds a l
 ## Phase 1 — Build the Dashboard (sample data only)
 
 ### FORBIDDEN in Phase 1
-- ❌ ChatBar, Eva, or any Agentforce integration (that's Phase 3)
-- ❌ `useEngineLiveData` or live data wiring (that's Phase 2)
-- ❌ Salesforce metadata — custom fields, platform events, Apex (that's Phases 2-3)
-- ❌ Reading library component source files (GeoMap.jsx, BaseCard.jsx, etc.)
+- ❌ ChatBar or any Agentforce/AI integration (that's Phase 3)
+- ❌ Live data hooks or live data wiring (that's Phase 2)
+- ❌ Salesforce metadata — custom fields, platform events, Apex
+- ❌ Reading library component source files
 - ❌ Loading skills other than `command-center-builder`
 
-### Files to read (only these)
-1. `engine-command-center-prd.md` — the full spec
-2. `src/data/engine-sample-data.js` — sample data shape
+### Files to read
+1. Your PRD or requirements document — the full spec
+2. Your sample data file — to understand available data shapes
 
 ### Files to create/edit (in order)
 ```
-1. WRITE  src/pages/EngineDashboard.tsx     ← full dashboard, one pass
-2. EDIT   src/components/workspace/CommandCenter.tsx  ← import EngineDashboard
-3. WRITE  src/pages/Home.tsx                ← REPLACE with CommandCenter wrapper (3 lines)
-4. EDIT   src/routes.tsx                    ← change index route label to "Dashboard"
+1. WRITE  src/pages/YourDashboard.tsx          ← full dashboard, one pass
+2. EDIT   src/components/workspace/CommandCenter.tsx  ← import YourDashboard
+3. WRITE  src/pages/Home.tsx                   ← REPLACE with CommandCenter wrapper (3 lines)
+4. EDIT   src/routes.tsx                       ← change index route label to "Dashboard"
 ```
 
-### What to build in EngineDashboard.tsx
-- Sticky header (h-12, Engine logo, "Travel Command Center", "Powered by Agentforce" badge, bell icon, theme toggle)
-- Hero GeoMap (h-[520px]) with markers, arcs, overlays from sample data
-- Glass KPI overlays on the map (Active Travelers, Spend MTD, Compliance %, Eva Resolved)
-- Flight status strip (horizontal scroll, glass pills)
-- Escalations panel (BaseCard with "Assign to Agent" buttons, toast on click)
-- Disruptions panel (severity dots, flight info, Eva action lines)
-- Active Travelers panel (expandable cards with Avatar, details grid, "View in Salesforce" links)
-- Monthly Spend chart (ChartCard + D3Chart groupedBarChart)
-- All data via `useDataSource({ sample: SAMPLE_DATA, live: [] })` — leave `live:` empty
+### What to build
+- Choose your layout pattern (visualization-hero with full-width map, or grid-first)
+- Pick components from the library for each section (MetricCard, ChartCard, ListCard, TableCard, etc.)
+- Wire all data via `useDataSource({ sample: SAMPLE_DATA, live: [] })` — leave `live:` empty for now
+- Add dark mode support to any custom markup
 
 ### Wiring
-- `CommandCenter.tsx` → import EngineDashboard instead of BlankDashboard
+- `CommandCenter.tsx` → import your dashboard instead of BlankDashboard
 - `Home.tsx` → **REPLACE** the Account Search page with a 3-line wrapper that renders `<CommandCenter />`
 - `routes.tsx` → change the index route handle to `{ showInNavigation: false, showNavBar: false, label: "Dashboard" }`
 
@@ -67,112 +62,89 @@ Plan the entire file before writing. Do NOT write a partial dashboard and iterat
 ## Phase 2 — Connect to Live Data
 
 ### FORBIDDEN in Phase 2
-- ❌ `DataModeToggle` — do NOT add it to the UI. There is NO UI toggle. The switch is `dataStrategy.ts` on the backend.
-- ❌ Rewriting `EngineDashboard.tsx` from scratch — make 5 targeted edits only
-- ❌ Reading library source files (`useDataSource.jsx`, `DataModeProvider.jsx`, `DataModeToggle.jsx`, `dataStrategy.ts`)
-- ❌ ChatBar, Eva, or Agentforce integration (that's Phase 3)
-- ❌ Platform events or Apex classes (that's Phase 3)
-- ❌ Renaming existing imports (don't add SAMPLE_ prefix — leave existing variable names alone, just fill in the `live:` props)
+- ❌ Rewriting the dashboard file from scratch — make targeted surgical edits only
+- ❌ Reading library source files (`useDataSource.jsx`, `DataModeProvider.jsx`, etc.)
+- ❌ ChatBar or AI/agent integration (that's Phase 3)
 - ❌ Creating extra files not listed below
 - ❌ Running `npm run build` between edits
 
 ### The point of Phase 2
-The dashboard switches from sample data (8 US travelers: Sarah Chen, Marcus Johnson…) to a completely different live dataset (12 global travelers: Raj Kapoor, Sofia Reyes… with a Midwest storm scenario). The user sees different names, different cities, different metrics, and different disruptions.
+The dashboard switches from sample data to live data from your Salesforce org. The `useDataSource` hook handles the toggle — you just need to fill in the `live:` props and flip the backend switch.
 
 ### How the switch works
 `ENABLE_SAMPLE_DATA_CACHE` in `src/lib/dataStrategy.ts` controls the mode. `CommandCenter.tsx` reads this flag and passes `initialMode` to `DataModeProvider`. When `true` (default) → sample mode. When `false` → live mode, every `useDataSource` returns its `live` prop.
 
-### Files to read (only these — no others)
-1. `src/pages/EngineDashboard.tsx` — the Phase 1 dashboard you're editing
-2. `src/hooks/useEngineLiveData.ts` — to see the live data shape
+### Edits to make (in order)
 
-### Edits to make (exactly 5, in order)
-
-**Edit 1 — Add import** at the top of EngineDashboard.tsx:
+**Edit 1 — Add live data import** at the top of your dashboard file:
 ```tsx
-import { useEngineLiveData } from "@/hooks/useEngineLiveData";
+import { useLiveData } from "@/hooks/useLiveData";
 ```
 
 **Edit 2 — Add hook call** inside the component, near the top:
 ```tsx
-const live = useEngineLiveData();
+const live = useLiveData();
 ```
 
 **Edit 3 — Update every `useDataSource` call** to pass live data:
 ```tsx
 // Before (Phase 1):
-const markers = useDataSource({ sample: MAP_MARKERS, live: [] });
+const items = useDataSource({ sample: SAMPLE_ITEMS, live: [] });
 // After (Phase 2 — just fill in the live: prop):
-const markers = useDataSource({ sample: MAP_MARKERS, live: live.mapMarkers });
+const items = useDataSource({ sample: SAMPLE_ITEMS, live: live.items });
 ```
-Do this for ALL useDataSource calls: markers, arcs, travelers, flights, escalations, disruptions, spendData.
+Do this for ALL `useDataSource` calls in the dashboard.
 
-**Edit 4 — Update KPI derivations** to react to active data:
-```tsx
-const activeMetrics = live.loading ? null : live.metrics;
-// Then use activeMetrics in KPI overlays when available, fall back to sample constants
-```
+**Edit 4 — Update any derived values** to react to the active data source.
 
 **Edit 5 — Flip the backend switch** — edit `src/lib/dataStrategy.ts`:
 ```tsx
 export const ENABLE_SAMPLE_DATA_CACHE = false;
 ```
 
-> ⚠️ **Do NOT skip Edit 5.** This is the most critical step. Without it, the data never switches and the demo fails. The dashboard will still show sample data no matter what you wired in Edits 1-4.
-
-That's 5 targeted edits, not a full rewrite.
-
-### After wiring — STOP and suggest (do not create yet)
-
-Say: *"I notice Flight__c doesn't have a field to track weather impact on individual flights. A Weather_Impact__c picklist would help the dashboard filter storm-affected flights. Want me to create it?"*
+> ⚠️ **Do NOT skip Edit 5.** This is the most critical step. Without it, the data never switches. The dashboard will still show sample data no matter what you wired in Edits 1-4.
 
-Only create `Flight__c.Weather_Impact__c` (PRD section 14a) AFTER the user says yes. Suggest ONLY this one field — do not suggest additional fields.
+That's targeted surgical edits, not a full rewrite.
 
 ---
 
-## Phase 3 — Add Agentforce
+## Phase 3 — Add AI Assistant
 
 ### FORBIDDEN in Phase 3
-- ❌ `AgentforceConversationClient` — do NOT use the iframe widget. We use the Agent REST API via `useEvaAgent`.
-- ❌ Wrapper hooks or adapter files — do NOT create `useEvaChatAdapter.ts`, `useDisruptionAlerts.ts`, or any extra hook. Use `useEvaAgent` directly.
-- ❌ `.env` or `.env.local` files — the config is hardcoded in `src/config/agentApi.ts` (pre-installed by the package)
-- ❌ Rewriting `EngineDashboard.tsx` from scratch
+- ❌ `AgentforceConversationClient` — do NOT use the iframe widget. Use the Agent REST API via a dedicated hook.
+- ❌ Wrapper hooks or adapter files — use the agent hook directly.
+- ❌ `.env` or `.env.local` files — config is hardcoded in `src/config/agentApi.ts`
+- ❌ Rewriting the dashboard file from scratch
 - ❌ Reading library component source files (including `ChatBar.jsx`)
-- ❌ Creating platform events or Apex classes without user confirmation
-- ❌ Loading `agentforce-test`, `agentforce-observability`, or `outer-app` skills
 
 ### Pre-installed files (already in the project — do NOT recreate)
-These files are installed by the package and restored by the reset script. They already exist:
-- `src/hooks/useEvaAgent.ts` — the Agent API hook (OAuth → session → messages → cleanup)
-- `src/config/agentApi.ts` — hardcoded credentials and endpoint config
-- `vite.config.ts` — already has `/sf-oauth` and `/sf-agent` proxy rules
+If the agent hook and config files are already installed by the package, they already exist:
+- `src/hooks/useAgentChat.ts` — the Agent API hook
+- `src/config/agentApi.ts` — endpoint config
+- `vite.config.ts` — already has proxy rules for agent API
 
 **Do NOT create, rewrite, or modify these files.** Just import and use them.
 
-### Files to read (only these)
-1. `src/pages/EngineDashboard.tsx` — the current dashboard
+### Edits to make (in order)
 
-### Edits to make (exactly 4, in order)
-
-**Edit 1 — Add imports** at the top of EngineDashboard.tsx:
+**Edit 1 — Add imports** at the top of the dashboard file:
 ```tsx
 import { ChatBar } from "@/components/library";
-import useEvaAgent from "@/hooks/useEvaAgent";
+import useAgentChat from "@/hooks/useAgentChat";
 ```
 
 **Edit 2 — Add chat suggestions constant** at module scope (outside the component):
 ```tsx
 const CHAT_SUGGESTIONS = [
-  "Are any travelers affected by the Denver weather?",
-  "What's our rebooking policy for weather delays?",
-  "Notify all travelers on disrupted flights",
-  "Create a support case for the SFO→JFK cancellation",
+  "Show me a summary of recent activity",
+  "What items need attention?",
+  "Help me understand the current status",
 ];
 ```
 
 **Edit 3 — Add agent hook + handler** inside the component:
 ```tsx
-const { messages: evaMessages, isReady, isSending, connect, sendMessage } = useEvaAgent();
+const { messages, isReady, isSending, connect, sendMessage } = useAgentChat();
 useEffect(() => { connect(); }, [connect]);
 
 const handleChat = (text: string) => {
@@ -181,13 +153,12 @@ const handleChat = (text: string) => {
 };
 ```
 
-**Edit 4 — Insert ChatBar JSX** between the map section closing `</div>` and the data panels `<div>`:
+**Edit 4 — Insert ChatBar JSX** between the visualization area and data panels:
 ```tsx
-{/* ── EVA CHATBAR ──────────────────────────────────────────────── */}
 <div className="px-4 pt-4">
   <ChatBar
-    title="Eva"
-    placeholder="Ask Eva anything about travelers, bookings, policy, or spend…"
+    title="AI Assistant"
+    placeholder="Ask anything about your data…"
     suggestions={CHAT_SUGGESTIONS}
     onSend={handleChat}
   />
@@ -196,17 +167,9 @@ const handleChat = (text: string) => {
 
 That's 4 targeted edits. Nothing else.
 
-### After adding Eva — STOP and suggest (do not create yet)
-
-Say: *"The dashboard tracks disruptions in real time. I can create a Travel_Disruption_Alert__e platform event so disruption data can be published to the Salesforce event bus. Want me to set it up?"*
-
-Only create the platform event (PRD section 14b) AFTER the user confirms.
-
-### After the platform event — STOP and suggest again
-
-Say: *"Now I'll write an Apex service class to publish disruption records to that event bus. Want me to create it?"*
+### After adding AI — suggest Salesforce metadata
 
-Only create `TravelDisruptionEventService` (PRD section 14c) AFTER the user confirms.
+If your use case benefits from platform events or Apex services, suggest them to the user and wait for confirmation before creating.
 
 ---
 
@@ -216,16 +179,13 @@ Only create `TravelDisruptionEventService` (PRD section 14c) AFTER the user conf
 |---|---------|---------|---------|
 | Dashboard layout & panels | Write new file | — | — |
 | Sample data | Wire (`live: []`) | — | — |
-| Live data wiring | Skip | 5 surgical edits | — |
-| Flip `dataStrategy.ts` to `false` | Skip | **Edit 5 — don't skip** | — |
-| DataModeToggle in UI | **NO — never** | **NO — never** | **NO — never** |
-| Custom field metadata | Skip | Suggest → wait | — |
-| ChatBar (Eva) | Skip | Skip | 4 surgical edits |
-| `useEvaAgent` hook | Skip | Skip | Import (pre-installed) |
+| Live data wiring | Skip | Surgical edits | — |
+| Flip `dataStrategy.ts` to `false` | Skip | **Don't skip** | — |
+| ChatBar / AI assistant | Skip | Skip | Surgical edits |
+| Agent hook | Skip | Skip | Import (pre-installed) |
 | Wrapper hooks / adapters | **NO — never** | **NO — never** | **NO — never** |
-| Platform event | Skip | Skip | Suggest → wait |
-| Apex service | Skip | Skip | Suggest → wait |
+| Salesforce metadata | Skip | Suggest → wait | Suggest → wait |
 
-**Data mode control:** `ENABLE_SAMPLE_DATA_CACHE` in `src/lib/dataStrategy.ts` is the backend switch. Phase 1 leaves it `true`. Phase 2 flips it to `false`. There is NO UI toggle — never add `DataModeToggle`.
+**Data mode control:** `ENABLE_SAMPLE_DATA_CACHE` in `src/lib/dataStrategy.ts` is the backend switch. Phase 1 leaves it `true`. Phase 2 flips it to `false`.
 
-**Agent communication:** `useEvaAgent` hook in `src/hooks/useEvaAgent.ts` handles OAuth → session → messages → cleanup via the Agent REST API. Config is in `src/config/agentApi.ts`. Vite proxy rules (`/sf-oauth`, `/sf-agent`) in `vite.config.ts` forward requests. All three files are pre-installed — do NOT recreate them.
+**Agent communication:** The agent hook handles OAuth → session → messages → cleanup via the Agent REST API. Config is in `src/config/agentApi.ts`. Vite proxy rules forward requests. These files are pre-installed — do NOT recreate them.

package/.a4drules/skills/command-center-builder/improved-build-process.md

@@ -2,9 +2,9 @@
 
 ## The #1 Rule: Phase 1 Writes, Phases 2-3 Edit
 
-- **Phase 1** creates `EngineDashboard.tsx` from scratch (Write). Also writes CommandCenter.tsx, Home.tsx, edits routes.tsx.
-- **Phase 2** makes exactly 5 surgical edits. Never rewrites the file.
-- **Phase 3** makes exactly 4 surgical edits. Never rewrites the file.
+- **Phase 1** creates your dashboard file from scratch (Write). Also writes CommandCenter.tsx, Home.tsx, edits routes.tsx.
+- **Phase 2** makes targeted surgical edits to wire live data. Never rewrites the file.
+- **Phase 3** makes targeted surgical edits to add AI chat. Never rewrites the file.
 
 Rewriting a 400+ line file from scratch takes 60 seconds, risks losing prior work, and can introduce regressions. Surgical edits take seconds each and preserve everything.
 
@@ -12,58 +12,55 @@ Rewriting a 400+ line file from scratch takes 60 seconds, risks losing prior wor
 
 1. **Load only `command-center-builder` skill before building.** Do NOT load component-library, command-center-project, outer-app, agentforce-test, or agentforce-observability — they add latency and aren't needed.
 
-2. **Do NOT read component source files.** This means ALL files inside `src/components/library/` are off-limits: GeoMap.jsx, BaseCard.jsx, Avatar.jsx, ChatBar.jsx, D3Chart.jsx, useDataSource.jsx, DataModeProvider.jsx, DataModeToggle.jsx, etc. Props/patterns are documented in the build guide and PRD.
+2. **Do NOT read component source files.** This means ALL files inside `src/components/library/` are off-limits: GeoMap.jsx, BaseCard.jsx, Avatar.jsx, ChatBar.jsx, D3Chart.jsx, useDataSource.jsx, DataModeProvider.jsx, DataModeToggle.jsx, etc. Props/patterns are documented in the build guide.
 
 3. **Phase 1: Write the dashboard in one pass.** Plan the full file before writing. Write the complete component with all imports, data, and JSX in a single Write call.
 
-4. **Phases 2-3: Make the exact edits listed in the build guide.** Phase 2 = 5 edits. Phase 3 = 4 edits. No more, no less.
+4. **Phases 2-3: Make the edits listed in the build guide.** Targeted surgical edits only. No full rewrites.
 
 5. **Do NOT run `npm run build`, `npm run dev`, `tsc`, or `npm run validate:dashboard` during the build.** Vite handles it. TS7016 errors are pre-existing and expected.
 
-6. **STOP and ASK before creating metadata.** Custom fields, platform events, and Apex classes are scripted demo moments. Suggest, wait, create.
+6. **STOP and ASK before creating metadata.** Custom fields, platform events, and Apex classes should be suggested first. Wait for confirmation.
 
-7. **Do NOT create extra files.** No wrapper hooks (useEvaChatAdapter, useDisruptionAlerts), no .env files, no adapter files. The build guide lists every file to create or edit.
+7. **Do NOT create extra files.** No wrapper hooks, no .env files, no adapter files. The build guide lists every file to create or edit.
 
 ## Phase 1 File Write Order
 
 ```
-1. WRITE  src/pages/EngineDashboard.tsx          ← full dashboard, one pass
-2. EDIT   src/components/workspace/CommandCenter.tsx  ← swap BlankDashboard → EngineDashboard
-3. WRITE  src/pages/Home.tsx                     ← 3-line CommandCenter wrapper
-4. EDIT   src/routes.tsx                         ← change index route label to "Dashboard"
+1. WRITE  src/pages/YourDashboard.tsx              ← full dashboard, one pass
+2. EDIT   src/components/workspace/CommandCenter.tsx  ← swap BlankDashboard → YourDashboard
+3. WRITE  src/pages/Home.tsx                       ← 3-line CommandCenter wrapper
+4. EDIT   src/routes.tsx                           ← change index route label to "Dashboard"
 ```
 
-## Phase 2 Edit Order (5 edits)
+## Phase 2 Edit Order
 
 ```
-1. Add useEngineLiveData import to EngineDashboard.tsx
-2. Add const live = useEngineLiveData() hook call
+1. Add live data import to your dashboard file
+2. Add live data hook call inside the component
 3. Update each useDataSource({ sample, live: [] }) → live: live.xxx
-4. Update KPI derivations to use activeMetrics
+4. Update any derived values to react to active data
 5. Flip ENABLE_SAMPLE_DATA_CACHE to false in src/lib/dataStrategy.ts
-→ STOP — suggest Weather_Impact__c, wait for confirmation
+→ STOP — suggest metadata if applicable, wait for confirmation
 ```
 
-⚠️ **Edit 5 is the most critical.** Without it, the data never switches and the demo fails.
+⚠️ **The final edit (flipping the flag) is the most critical.** Without it, the data never switches.
 
-**NEVER add DataModeToggle to the UI.** The switch is `ENABLE_SAMPLE_DATA_CACHE` in `dataStrategy.ts`.
-
-## Phase 3 Edit Order (4 edits)
+## Phase 3 Edit Order
 
 ```
-1. Add ChatBar + useEvaAgent imports to EngineDashboard.tsx
-2. Add CHAT_SUGGESTIONS constant at module scope
-3. Add useEvaAgent hook call + handleChat inside component
-4. Insert <ChatBar /> JSX between map and data panels
-→ STOP — suggest platform event, wait for confirmation
-→ STOP — suggest Apex class, wait for confirmation
+1. Add ChatBar + agent hook imports to your dashboard file
+2. Add chat suggestions constant at module scope
+3. Add agent hook call + handleChat inside component
+4. Insert <ChatBar /> JSX between visualization and data panels
+→ STOP — suggest metadata if applicable, wait for confirmation
 ```
 
-**useEvaAgent, agentApi.ts, and vite.config.ts proxy rules are pre-installed.** Do NOT recreate them. Just import `useEvaAgent` from `@/hooks/useEvaAgent`.
+**Agent hook and config files are pre-installed.** Do NOT recreate them. Just import and use.
 
-**NEVER use AgentforceConversationClient.** We use the Agent REST API via `useEvaAgent`.
+**NEVER use AgentforceConversationClient.** Use the Agent REST API via the dedicated hook.
 
-**NEVER create wrapper hooks** (useEvaChatAdapter, useDisruptionAlerts, etc.). Use `useEvaAgent` directly.
+**NEVER create wrapper hooks.** Use the agent hook directly.
 
 ## Common Time Wasters
 
@@ -71,10 +68,7 @@ Rewriting a 400+ line file from scratch takes 60 seconds, risks losing prior wor
 |-------|-----|
 | Loading 4-5 skills before starting | Load only command-center-builder |
 | Reading GeoMap.jsx, ChatBar.jsx, useDataSource.js source | Props are in the build guide — trust the docs |
-| Rewriting EngineDashboard.tsx in Phase 2/3 | Make 5 or 4 targeted edits |
+| Rewriting the dashboard in Phase 2/3 | Make targeted surgical edits |
 | Running `npm run build` between edits | Don't — Vite handles it |
-| Adding DataModeToggle to the UI | **NEVER** — the switch is dataStrategy.ts |
-| Creating useEvaChatAdapter or useDisruptionAlerts | **NEVER** — use useEvaAgent directly, no wrappers |
+| Creating wrapper hooks or adapter files | **NEVER** — use hooks directly |
 | Creating .env or .env.local files | **NEVER** — config is hardcoded in src/config/agentApi.ts |
-| Renaming imports with SAMPLE_ prefix | Don't rename — just fill in the `live:` props |
-| Suggesting 3+ custom fields | Suggest only Weather_Impact__c |