@schandlergarcia/sf-web-components 1.9.77 → 1.9.79

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

@@ -43,6 +43,7 @@ export default function HomePage() {
 // src/components/workspace/CommandCenter.tsx
 import AppThemeProvider from "@/components/library/theme/AppThemeProvider";
 import DataModeProvider from "@/components/library/data/DataModeProvider";
+import { ENABLE_SAMPLE_DATA_CACHE } from "@/lib/dataStrategy";
 import { Toast } from "@heroui/react";
 import MyDashboard from "../../pages/MyDashboard";  // ← change ONLY this import
 
@@ -50,7 +51,7 @@ export default function CommandCenter() {
   return (
     <div className="heroui-scope">
       <AppThemeProvider initialMode="light">
-        <DataModeProvider initialMode="sample">
+        <DataModeProvider initialMode={ENABLE_SAMPLE_DATA_CACHE ? "sample" : "live"}>
           <MyDashboard />
           <Toast.Provider placement="bottom end" />
         </DataModeProvider>

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

@@ -2,6 +2,16 @@
 
 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.
 
+## General Rules for All Phases
+
+1. **Phase 1 writes new files. Phases 2 and 3 make surgical edits.** Phase 2 and 3 should NEVER rewrite `EngineDashboard.tsx` from scratch — use targeted edits (add imports, update specific lines, insert JSX blocks). Rewriting the entire file risks losing Phase 1 work and takes 60+ seconds vs seconds per edit.
+
+2. **Don't read files you don't need.** The patterns for `useDataSource`, `DataModeProvider`, `DataModeToggle`, and library components are documented in this skill. Only read files that contain project-specific code you need to understand (e.g., the dashboard you're editing, the live data file for its shape).
+
+3. **Don't run `npm run build` during the build.** Vite handles JSX/TSX regardless of TypeScript errors. Pre-existing TS7016 errors are normal.
+
+4. **STOP and ASK before creating Salesforce metadata.** When the build guide says "suggest" a custom field, platform event, or Apex class — you must present the suggestion to the user and WAIT for confirmation. Do NOT create the file until the user says yes. This is a scripted demo moment.
+
 ---
 
 ## Phase 1 — Build the Dashboard (sample data only)
@@ -35,52 +45,130 @@ The dashboard is built in **3 phases**, one per user prompt. Each phase adds a l
 
 ## Phase 2 — Connect to Live Data
 
-**What to build:**
-- Import `useEngineLiveData` from `src/hooks/useEngineLiveData.ts`
-- Wire `live` prop on every `useDataSource` call:
-  ```tsx
-  const live = useEngineLiveData();
-  const markers = useDataSource({ sample: MAP_MARKERS, live: live.mapMarkers });
-  const arcs = useDataSource({ sample: MAP_ARCS, live: live.mapArcs });
-  ```
-- Update KPI overlays to use active metrics:
-  ```tsx
-  const activeMetrics = live.loading ? METRICS : live.metrics;
-  ```
-
-**What to do after wiring:**
-- Proactively suggest creating `Flight__c.Weather_Impact__c` custom field
-- If confirmed, create SFDX XML from PRD section 14a and deploy
+**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 should see different names, different cities, different metrics, and different disruptions.
+
+**How the switch works:** `ENABLE_SAMPLE_DATA_CACHE` in `src/lib/dataStrategy.ts` controls which data `useDataSource` returns. `CommandCenter.tsx` reads this flag and passes it to `DataModeProvider`. When the flag is `true` (default), mode is "sample." When `false`, mode is "live" and every `useDataSource` call returns its `live` prop instead.
+
+**How to work:** Make surgical edits to the existing `EngineDashboard.tsx`. Do NOT rewrite the file.
+
+**Files to read first (only these):**
+1. `src/pages/EngineDashboard.tsx` — the Phase 1 dashboard you're editing
+2. `src/hooks/useEngineLiveData.ts` — to see the live data shape
+
+**Do NOT read:** `useDataSource.jsx`, `DataModeProvider.jsx`, `dataStrategy.ts`, or any library component source. The patterns are right here.
+
+**Edits to make (in order):**
+
+1. **Add import** at the top of EngineDashboard.tsx:
+   ```tsx
+   import { useEngineLiveData } from "@/hooks/useEngineLiveData";
+   ```
+
+2. **Add hook call** inside the component, near the top:
+   ```tsx
+   const live = useEngineLiveData();
+   ```
+
+3. **Update every `useDataSource` call** to pass live data:
+   ```tsx
+   // Before (Phase 1):
+   const markers = useDataSource({ sample: MAP_MARKERS, live: [] });
+   // After (Phase 2):
+   const markers = useDataSource({ sample: MAP_MARKERS, live: live.mapMarkers });
+   ```
+   Do this for markers, arcs, travelers, flights, escalations, disruptions, spendData — whatever the dashboard uses.
+
+4. **Update KPI derivations** to react to active data:
+   ```tsx
+   const activeMetrics = live.loading ? SAMPLE_METRICS : live.metrics;
+   ```
+   Then use `activeMetrics` in KPI overlays instead of hardcoded sample constants.
+
+5. **Flip the backend switch** — change `src/lib/dataStrategy.ts`:
+   ```tsx
+   export const ENABLE_SAMPLE_DATA_CACHE = false;
+   ```
+   This causes `CommandCenter.tsx` to pass `initialMode="live"` to `DataModeProvider`, and every `useDataSource` call now returns the live prop. The dashboard instantly shows the live dataset on next load.
+
+That's 5 targeted edits. Not a full rewrite.
+
+**No UI toggle.** There is no `DataModeToggle` in the dashboard. The switch is `ENABLE_SAMPLE_DATA_CACHE` in `dataStrategy.ts`.
+
+**After wiring — STOP and suggest (do not create yet):**
+
+Say something like: *"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?"*
+
+Only create `Flight__c.Weather_Impact__c` (PRD section 14a) AFTER the user confirms.
 
 **What NOT to build:**
 - No ChatBar or Eva — that's Phase 3
 - No platform events or Apex — that's Phase 3
+- Do NOT rewrite EngineDashboard.tsx from scratch
+- Do NOT add `DataModeToggle` to the UI
+- Do NOT read library component source files
+- Do NOT run `npm run build` between edits
 
 ---
 
 ## Phase 3 — Add Agentforce
 
-**What to build:**
-- `ChatBar` between the map and data panels:
-  ```tsx
-  <div className="px-4 pt-4">
-    <ChatBar
-      title="Eva"
-      placeholder="Ask Eva anything about travelers, bookings, policy, or spend…"
-      suggestions={CHAT_SUGGESTIONS}
-      onSend={handleChat}
-    />
-  </div>
-  ```
-- Suggestions: weather warning, rebooking policy, notify travelers, create support case
-- `handleChat` mock response at module scope
-- `AgentforceConversationClient` with `agentId="0Xxa5000000relhCAA"` and `agentLabel="Eva"`
-
-**What to do after adding Eva:**
-- Proactively suggest creating `Travel_Disruption_Alert__e` platform event
-- If confirmed, create SFDX XML from PRD section 14b and deploy
-- Then suggest creating `TravelDisruptionEventService` Apex class
-- If confirmed, create from PRD section 14c and deploy
+**How to work:** Make surgical edits to the existing `EngineDashboard.tsx`. Do NOT rewrite the file.
+
+**Files to read first (only these):**
+1. `src/pages/EngineDashboard.tsx` — the current dashboard
+
+**Edits to make (in order):**
+
+1. **Add ChatBar import** (if not already imported from the barrel):
+   ```tsx
+   import { ChatBar } from "@/components/library";
+   ```
+
+2. **Add chat suggestions constant** at module scope:
+   ```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",
+   ];
+   ```
+
+3. **Add handleChat function** at module scope:
+   ```tsx
+   const handleChat = (msg: string) => ({ text: `Looking into: "${msg}"…` });
+   ```
+
+4. **Insert ChatBar JSX** between the map section and the data panels:
+   ```tsx
+   <div className="px-4 pt-4">
+     <ChatBar
+       title="Eva"
+       placeholder="Ask Eva anything about travelers, bookings, policy, or spend…"
+       suggestions={CHAT_SUGGESTIONS}
+       onSend={handleChat}
+     />
+   </div>
+   ```
+
+5. **Add AgentforceConversationClient** with `agentId="0Xxa5000000relhCAA"` and `agentLabel="Eva"`
+
+**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?"*
+
+Only create `TravelDisruptionEventService` (PRD section 14c) AFTER the user confirms.
+
+**What NOT to build without asking:**
+- Do NOT create platform events or Apex classes without user confirmation
+- Do NOT rewrite EngineDashboard.tsx from scratch
+- Do NOT read library component source files
 
 ---
 
@@ -88,11 +176,14 @@ The dashboard is built in **3 phases**, one per user prompt. Each phase adds a l
 
 | | Phase 1 | Phase 2 | Phase 3 |
 |---|---------|---------|---------|
-| Dashboard layout & panels | Build | — | — |
-| Sample data | Wire | — | — |
-| Live data | Skip | Wire | — |
-| Custom field metadata | Skip | Suggest | — |
-| ChatBar (Eva) | Skip | Skip | Build |
-| AgentforceConversationClient | Skip | Skip | Build |
-| Platform event | Skip | Skip | Suggest |
-| Apex service | Skip | Skip | Suggest |
+| Dashboard layout & panels | Write new file | — | — |
+| Sample data | Wire (`live: []`) | — | — |
+| Live data wiring | Skip | Surgical edits | — |
+| Flip `dataStrategy.ts` to `false` | Skip | Edit | — |
+| Custom field metadata | Skip | Suggest → wait | — |
+| ChatBar (Eva) | Skip | Skip | Surgical edit |
+| AgentforceConversationClient | Skip | Skip | Surgical edit |
+| Platform event | Skip | Skip | Suggest → wait |
+| Apex service | Skip | Skip | Suggest → wait |
+
+**Data mode control:** `ENABLE_SAMPLE_DATA_CACHE` in `src/lib/dataStrategy.ts` is the backend switch. `CommandCenter.tsx` reads this flag and passes `initialMode` to `DataModeProvider`. Phase 1 leaves it `true` (sample data). Phase 2 flips it to `false` (live data — different travelers, cities, and metrics). There is no UI toggle.

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

@@ -1,18 +1,28 @@
 # Efficient Build Process
 
+## 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 ~5 surgical edits to the existing dashboard (StrReplace / targeted edits). Never rewrites the file.
+- **Phase 3** makes ~4 surgical edits to the existing dashboard (StrReplace / targeted edits). 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.
+
 ## Speed Rules
 
 1. **Load only 2 files before building:** the PRD and this skill (command-center-builder). Do NOT load component-library, command-center-project, or outer-app skills — they add latency and aren't needed for the initial build.
 
-2. **Do NOT read component source files.** The props for every component (GeoMap, BaseCard, Avatar, ChartCard, D3Chart, etc.) are documented in this skill and the PRD. Reading `GeoMap.jsx`, `BaseCard.jsx`, etc. wastes time and produces no new information.
+2. **Do NOT read component source files.** The props for every component (GeoMap, BaseCard, Avatar, ChartCard, D3Chart, etc.) are documented in this skill and the PRD. Reading `GeoMap.jsx`, `BaseCard.jsx`, `useDataSource.js`, `DataModeProvider.jsx`, etc. wastes time and produces no new information.
 
-3. **Write the dashboard in one pass.** Plan the full file before writing. Do not write a partial dashboard and iterate — write the complete component with all imports, data, and JSX in a single Write call.
+3. **Phase 1: Write the dashboard in one pass.** Plan the full file before writing. Do not write a partial dashboard and iterate — write the complete component with all imports, data, and JSX in a single Write call. Then write all 4 files without stopping.
 
-4. **Write all 4 files without stopping.** After the dashboard, immediately write CommandCenter.tsx, Home.tsx, and edit routes.tsx. Do not run build commands between files.
+4. **Phases 2-3: Make targeted edits only.** Read the existing dashboard, then make specific edits (add imports, update lines, insert JSX blocks). Do NOT use Write to replace the entire file.
 
 5. **Do NOT run `npm run build`, `npm run dev`, `tsc`, or `npm run validate:dashboard` during the build.** These waste time. The Vite build handles JSX/TSX regardless of TypeScript errors, and pre-existing TS7016 errors (from untyped .jsx library files) are normal.
 
-## File Write Order
+6. **STOP and ASK before creating metadata.** Custom fields, platform events, and Apex classes are scripted demo moments. Suggest them, wait for "yes," then create. Never just create them.
+
+## Phase 1 File Write Order
 
 ```
 1. src/pages/EngineDashboard.tsx     ← full dashboard, one pass
@@ -21,12 +31,38 @@
 4. src/routes.tsx                    ← edit index route label to "Dashboard"
 ```
 
+## Phase 2 Edit Order
+
+```
+1. Add useEngineLiveData import to EngineDashboard.tsx
+2. Add const live = useEngineLiveData() hook call
+3. Update each useDataSource({ sample, live: [] }) → live: live.xxx
+4. Update KPI derivations to use activeMetrics
+5. Flip ENABLE_SAMPLE_DATA_CACHE to false in src/lib/dataStrategy.ts
+→ STOP — suggest Weather_Impact__c, wait for confirmation
+```
+
+No UI toggle. The switch is `ENABLE_SAMPLE_DATA_CACHE` in `dataStrategy.ts`. When `false`, `CommandCenter.tsx` passes `initialMode="live"` and every `useDataSource` returns its live prop.
+
+## Phase 3 Edit Order
+
+```
+1. Add ChatBar import (if not in barrel import)
+2. Add CHAT_SUGGESTIONS constant + handleChat function
+3. Insert <ChatBar /> JSX between map and data panels
+4. Add AgentforceConversationClient
+→ STOP — suggest platform event, wait for confirmation
+→ STOP — suggest Apex class, wait for confirmation
+```
+
 ## Common Time Wasters
 
 | Waste | Fix |
 |-------|-----|
 | Loading 4-5 skills before starting | Load only command-center-builder + PRD |
-| Reading GeoMap.jsx, Avatar.jsx, BaseCard.jsx source | Props are in this skill — trust the docs |
-| Running `npm run build` after writing | Don't — Vite handles it, TS errors are pre-existing |
+| Reading GeoMap.jsx, Avatar.jsx, useDataSource.js source | Props/patterns are in this skill — trust the docs |
+| Rewriting EngineDashboard.tsx from scratch in Phase 2/3 | Make 5 surgical edits, not a 454-line rewrite |
+| Running `npm run build` between edits | Don't — Vite handles it, TS errors are pre-existing |
 | Fixing imports iteratively (wrong icon names, wrong exports) | Check the PRD and this skill for exact import names before writing |
 | Writing Home.tsx with Account Search content | REPLACE it with the 3-line CommandCenter wrapper (see WIRING section) |
+| Creating metadata without asking | STOP, suggest, wait for "yes" — it's a scripted demo moment |

package/CHANGELOG.md

@@ -5,6 +5,38 @@ 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.79] - 2026-04-04
+
+### Fixed
+- **Data mode switching was broken** — `ENABLE_SAMPLE_DATA_CACHE` in `dataStrategy.ts` was dead code (nothing read it). `useEngineLiveData` was auto-calling `setMode("live")` after 2 seconds via React context, which was fragile and confusing
+- **No visible data change between phases** — Phase 2 should produce visibly different data (12 global travelers vs 8 US travelers, Midwest storm scenario) but the switching mechanism wasn't wired to `dataStrategy.ts`
+
+### Changed
+- **`useEngineLiveData.ts`** — Removed `setMode("sample"/"live")` calls. Hook now just provides the live data; it no longer controls the data mode
+- **`useDataSource.jsx`** — Updated to fall back to sample when live is null/empty, reads mode from `DataModeProvider` context which is now properly controlled by `dataStrategy.ts`
+- **`CommandCenter.tsx` template** — Now imports `ENABLE_SAMPLE_DATA_CACHE` from `@/lib/dataStrategy` and passes `initialMode={ENABLE_SAMPLE_DATA_CACHE ? "sample" : "live"}` to `DataModeProvider`
+- **`dataStrategy.ts` template** — Rewritten comments to explain the Phase 1/Phase 2 connection and how flipping the flag changes the dashboard data
+- **Build guide Phase 2** — Added step 5: "Flip `ENABLE_SAMPLE_DATA_CACHE` to `false`". Added explanation of what changes visually (different names, cities, metrics)
+- **PRD Phase 2** — Added `dataStrategy.ts` flip as step 6 with explanation of the visual change
+- **Efficient build process** — Updated Phase 2 edit order to include the flag flip
+- **SKILL.md** — Updated `CommandCenter.tsx` wiring example to include `ENABLE_SAMPLE_DATA_CACHE` import
+
+**Context:** The data mode switch was supposed to be a backend config (`dataStrategy.ts`) but the flag was disconnected. The actual switching was done by `useEngineLiveData` auto-calling `setMode("live")` after a 2-second delay, which meant the hook controlled both data AND mode — not clean. Now: `dataStrategy.ts` is the single control point, `CommandCenter.tsx` reads it, `DataModeProvider` respects it, and `useDataSource` returns the right data. Phase 2 just flips the flag.
+
+## [1.9.78] - 2026-04-04
+
+### Fixed
+- **Phase 2 rewrites entire dashboard** — Agent was writing a brand new 454-line file instead of making ~4 surgical edits. Build guide and PRD now enforce "Phase 1 writes, Phases 2-3 edit" with explicit edit lists
+- **Agent creates metadata without asking** — Agent was creating custom fields/platform events/Apex without waiting for user confirmation. All phases now say "STOP and suggest — wait for yes" with scripted dialogue
+- **Agent reads 6+ files before starting Phase 2** — Now limited to reading only the dashboard and live data file; library component source files are explicitly prohibited
+- **DataModeToggle in the UI** — Removed from all Phase 2 instructions. Data mode is controlled by `ENABLE_SAMPLE_DATA_CACHE` in `dataStrategy.ts`, not a visible toggle
+
+### Changed
+- **Build guide (`getting-started.md`)** — Full rewrite with surgical edit instructions for Phases 2-3, explicit "files to read" and "do NOT read" lists, "STOP and ASK" enforcement for metadata creation
+- **Efficient build process (`improved-build-process.md`)** — Added "#1 Rule: Phase 1 Writes, Phases 2-3 Edit", phase-specific edit orders, metadata ask-before-creating rule
+- **PRD Prompt 2** — Added "What the agent must NOT do" section, removed DataModeToggle, reworded user prompt to remove "toggle" language
+- **PRD Prompt 3** — Added "What the agent must NOT do" section, enforced stop-and-ask pattern for each metadata creation
+
 ## [1.9.77] - 2026-04-04
 
 ### Added

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

@@ -348,18 +348,29 @@ Build incrementally in 3 prompts. Each prompt builds on the previous result. The
 
 ### Prompt 2 — Connect to Salesforce Data
 
-> Now let's connect this to real data. There's a second dataset with different travelers and metrics — hook that up as the "live" data source so when someone toggles from sample to live mode, everything refreshes with the new data. After that, see if there are any data model improvements we should make for tracking weather disruptions.
+> Now let's connect this to real data. There's a second dataset with different travelers and metrics — hook that up as the "live" data source so the dashboard can pull from either dataset depending on the backend config. After that, see if there are any data model improvements we should make for tracking weather disruptions.
 
 **What the agent must do:**
 
-1. Find and use `src/data/engine-live-data.js` and `src/hooks/useEngineLiveData.ts`
-2. Import `useEngineLiveData` and wire each `useDataSource({ sample, live })` call
-3. Update KPI overlays to derive from whichever metrics are active
-4. After wiring, proactively offer to create the `Weather_Impact__c` custom field (section 14a)
+1. Read only `EngineDashboard.tsx` and `src/hooks/useEngineLiveData.ts` — don't read `useDataSource.jsx`, `DataModeProvider.jsx`, or other library source files (the patterns are in the build guide)
+2. Make **surgical edits** to the existing `EngineDashboard.tsx` — do NOT rewrite the entire file
+3. Add `useEngineLiveData` import and hook call
+4. Update every `useDataSource({ sample, live })` call to pass live data
+5. Update KPI overlays to derive from whichever metrics are active
+6. **Flip the backend switch:** change `ENABLE_SAMPLE_DATA_CACHE` from `true` to `false` in `src/lib/dataStrategy.ts` — this makes `CommandCenter.tsx` pass `initialMode="live"` to `DataModeProvider`, so every `useDataSource` call now returns the live prop. The dashboard will show completely different data: 12 global travelers (Raj Kapoor, Sofia Reyes…) instead of 8 US travelers, a Midwest storm scenario, and different metrics.
+7. After wiring is complete, **STOP and suggest** the `Weather_Impact__c` custom field — do NOT create it until the user confirms
 
-**Reference — what the agent should say:**
+**What the agent must NOT do in this prompt:**
+- Do NOT rewrite `EngineDashboard.tsx` from scratch — make targeted edits to the existing Phase 1 file
+- Do NOT read library component source files (`useDataSource.jsx`, `DataModeProvider.jsx`, `dataStrategy.ts`) — the wiring patterns are in the build guide
+- Do NOT add `DataModeToggle` to the UI — there is no UI toggle, the switch is `dataStrategy.ts`
+- Do NOT create the custom field without asking first — suggest it, then wait for "yes"
+- Do NOT add ChatBar, Eva, or any Agentforce integration — that's Prompt 3
+- Do NOT run `npm run build` between edits
+
+**Reference — what the agent should say after wiring:**
 
-After wiring the live data: *"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?"* — When confirmed, create the custom field XML from section 14a and deploy it.
+*"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?"* — Only create the custom field XML from section 14a AFTER the user confirms.
 
 ---
 
@@ -369,16 +380,22 @@ After wiring the live data: *"I notice `Flight__c` doesn't have a field to track
 
 **What the agent must do:**
 
-1. Add `ChatBar` with suggestions from section 9, placed between map and data panels
-2. Add `AgentforceConversationClient` with `agentId="0Xxa5000000relhCAA"` and `agentLabel="Eva"`
-3. Proactively offer to create `Travel_Disruption_Alert__e` platform event (section 14b)
-4. After the event, proactively offer to create `TravelDisruptionEventService` Apex class (section 14c)
+1. Make **surgical edits** to the existing `EngineDashboard.tsx` — do NOT rewrite the entire file
+2. Add `ChatBar` with suggestions from section 9, placed between map and data panels
+3. Add `AgentforceConversationClient` with `agentId="0Xxa5000000relhCAA"` and `agentLabel="Eva"`
+4. After adding Eva, **STOP and suggest** the platform event — do NOT create it until the user confirms
+5. After user confirms and platform event is created, **STOP and suggest** the Apex class — do NOT create it until the user confirms
+
+**What the agent must NOT do in this prompt:**
+- Do NOT rewrite `EngineDashboard.tsx` from scratch — make targeted edits to the existing Phase 2 file
+- Do NOT create platform events or Apex classes without user confirmation — each is a scripted demo moment where you suggest, wait, then create
+- Do NOT read library component source files
 
-**Reference — what the agent should say:**
+**Reference — what the agent should say (in sequence, stopping after each):**
 
-1. After adding Eva: *"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 — other systems and automation can subscribe to it. Want me to set it up?"* — When confirmed, create the platform event and its fields from section 14b and deploy.
+1. After adding Eva: *"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 — other systems and automation can subscribe to it. Want me to set it up?"* — Only create the platform event (section 14b) AFTER the user confirms.
 
-2. After the platform event: *"Now I'll write an Apex service class to publish disruption records to that event bus. `TravelDisruptionEventService` will take a list of disruptions and fire platform events with the flight number, severity, and description. Want me to create it?"* — When confirmed, create the Apex class from section 14c and deploy.
+2. After the platform event: *"Now I'll write an Apex service class to publish disruption records to that event bus. `TravelDisruptionEventService` will take a list of disruptions and fire platform events with the flight number, severity, and description. Want me to create it?"* — Only create the Apex class (section 14c) AFTER the user confirms.
 
 ---
 

package/data/useEngineLiveData.ts

@@ -1,5 +1,4 @@
 import { useState, useEffect } from "react";
-import { useDataMode } from "@/components/library/data/DataModeProvider";
 import * as live from "@/data/engine-live-data";
 
 const SIMULATED_LOAD_MS = 2000;
@@ -18,26 +17,22 @@ export interface EngineLiveData {
 }
 
 /**
- * Simulates fetching live data from Salesforce via GraphQL.
+ * Provides the live dataset for the Engine Travel Command Center.
  *
- * On mount, shows a loading state for ~2 seconds, then resolves with the
- * live dataset and flips the global data mode from "sample" → "live".
- * Every useDataSource call across the dashboard will then return the
- * live prop instead of the sample prop, causing all components to refresh
- * simultaneously with new data.
+ * Simulates a 2-second network fetch, then resolves with all live data.
+ * Does NOT control the data mode — that's handled by ENABLE_SAMPLE_DATA_CACHE
+ * in src/lib/dataStrategy.ts. When the flag is false, every useDataSource call
+ * returns its live prop (which this hook provides) instead of its sample prop.
  */
 export function useEngineLiveData(): EngineLiveData {
   const [loading, setLoading] = useState(true);
-  const { setMode } = useDataMode();
 
   useEffect(() => {
-    setMode("sample");
     const timer = setTimeout(() => {
       setLoading(false);
-      setMode("live");
     }, SIMULATED_LOAD_MS);
     return () => clearTimeout(timer);
-  }, [setMode]);
+  }, []);
 
   return {
     loading,

package/dist/components/library/data/useDataSource.js

@@ -1,13 +1,10 @@
-import { useMemo as u } from "react";
-import { useDataMode as n } from "./DataModeProvider.js";
-function c({ sample: t, live: e }) {
-  const { mode: r } = n();
-  return u(() => {
-    const o = r === "sample" ? t : e;
-    return typeof o == "function" ? o() : o;
-  }, [r, t, e]);
+import { useMemo as n } from "react";
+import { useDataMode as u } from "./DataModeProvider.js";
+function a({ sample: t, live: r }) {
+  const { mode: o } = u();
+  return n(() => o === "live" && r != null && !(Array.isArray(r) && r.length === 0) ? typeof r == "function" ? r() : r : typeof t == "function" ? t() : t, [o, t, r]);
 }
 export {
-  c as default
+  a as default
 };
 //# sourceMappingURL=useDataSource.js.map

package/dist/components/library/data/useDataSource.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDataSource.js","sources":["../../../../src/components/library/data/useDataSource.jsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDataMode } from \"./DataModeProvider\";\n\n/**\n * Select between sample and live data based on the global data mode.\n *\n * Values can be plain data or functions (lazy-evaluated only when active).\n *\n * @param {{ sample: any | () => any, live: any | () => any }} sources\n * @returns {any} the resolved value for the active mode\n *\n * @example\n * // Static data\n * const incidents = useDataSource({\n *   sample: sampleIncidents,\n *   live: fetchedIncidents,\n * });\n *\n * @example\n * // Lazy — factory only runs when that mode is active\n * const metrics = useDataSource({\n *   sample: () => generateSampleMetrics(),\n *   live: () => computeFromAPI(apiData),\n * });\n */\nexport default function useDataSource({ sample, live }) {\n  const { mode } = useDataMode();\n\n  return useMemo(() => {\n    const source = mode === \"sample\" ? sample : live;\n    return typeof source === \"function\" ? source() : source;\n  }, [mode, sample, live]);\n}\n"],"names":["useDataSource","sample","live","mode","useDataMode","useMemo","source"],"mappings":";;AAyBA,SAAwBA,EAAc,EAAE,QAAAC,GAAQ,MAAAC,KAAQ;AACtD,QAAM,EAAE,MAAAC,EAAA,IAASC,EAAA;AAEjB,SAAOC,EAAQ,MAAM;AACnB,UAAMC,IAASH,MAAS,WAAWF,IAASC;AAC5C,WAAO,OAAOI,KAAW,aAAaA,EAAA,IAAWA;AAAA,EACnD,GAAG,CAACH,GAAMF,GAAQC,CAAI,CAAC;AACzB;"}
+{"version":3,"file":"useDataSource.js","sources":["../../../../src/components/library/data/useDataSource.jsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDataMode } from \"./DataModeProvider\";\n\n/**\n * Select between sample and live data based on the global data mode.\n *\n * The mode is controlled by ENABLE_SAMPLE_DATA_CACHE in src/lib/dataStrategy.ts,\n * which CommandCenter.tsx passes to DataModeProvider as initialMode.\n * When the flag is true, mode is \"sample\" and this hook returns the sample prop.\n * When false, mode is \"live\" and this hook returns the live prop.\n *\n * Values can be plain data or functions (lazy-evaluated only when active).\n *\n * @param {{ sample: any | () => any, live: any | () => any }} sources\n * @returns {any} the resolved value for the active mode\n *\n * @example\n * const incidents = useDataSource({\n *   sample: sampleIncidents,\n *   live: fetchedIncidents,\n * });\n */\nexport default function useDataSource({ sample, live }) {\n  const { mode } = useDataMode();\n\n  return useMemo(() => {\n    if (mode === \"live\" && live != null && !(Array.isArray(live) && live.length === 0)) {\n      return typeof live === \"function\" ? live() : live;\n    }\n    return typeof sample === \"function\" ? sample() : sample;\n  }, [mode, sample, live]);\n}\n"],"names":["useDataSource","sample","live","mode","useDataMode","useMemo"],"mappings":";;AAsBA,SAAwBA,EAAc,EAAE,QAAAC,GAAQ,MAAAC,KAAQ;AACtD,QAAM,EAAE,MAAAC,EAAA,IAASC,EAAA;AAEjB,SAAOC,EAAQ,MACTF,MAAS,UAAUD,KAAQ,QAAQ,EAAE,MAAM,QAAQA,CAAI,KAAKA,EAAK,WAAW,KACvE,OAAOA,KAAS,aAAaA,EAAA,IAASA,IAExC,OAAOD,KAAW,aAAaA,EAAA,IAAWA,GAChD,CAACE,GAAMF,GAAQC,CAAI,CAAC;AACzB;"}

package/package.json

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

package/src/components/library/data/useDataSource.jsx

@@ -4,30 +4,29 @@ import { useDataMode } from "./DataModeProvider";
 /**
  * Select between sample and live data based on the global data mode.
  *
+ * The mode is controlled by ENABLE_SAMPLE_DATA_CACHE in src/lib/dataStrategy.ts,
+ * which CommandCenter.tsx passes to DataModeProvider as initialMode.
+ * When the flag is true, mode is "sample" and this hook returns the sample prop.
+ * When false, mode is "live" and this hook returns the live prop.
+ *
  * Values can be plain data or functions (lazy-evaluated only when active).
  *
  * @param {{ sample: any | () => any, live: any | () => any }} sources
  * @returns {any} the resolved value for the active mode
  *
  * @example
- * // Static data
  * const incidents = useDataSource({
  *   sample: sampleIncidents,
  *   live: fetchedIncidents,
  * });
- *
- * @example
- * // Lazy — factory only runs when that mode is active
- * const metrics = useDataSource({
- *   sample: () => generateSampleMetrics(),
- *   live: () => computeFromAPI(apiData),
- * });
  */
 export default function useDataSource({ sample, live }) {
   const { mode } = useDataMode();
 
   return useMemo(() => {
-    const source = mode === "sample" ? sample : live;
-    return typeof source === "function" ? source() : source;
+    if (mode === "live" && live != null && !(Array.isArray(live) && live.length === 0)) {
+      return typeof live === "function" ? live() : live;
+    }
+    return typeof sample === "function" ? sample() : sample;
   }, [mode, sample, live]);
 }

package/src/templates/lib/dataStrategy.ts.template

@@ -1,42 +1,24 @@
 /**
  * Data Strategy Configuration
  *
- * Controls data sourcing strategy for the application.
+ * Controls which dataset the dashboard displays.
  *
  * ENABLE_SAMPLE_DATA_CACHE:
- * When enabled, the application uses an optimized sample data cache
- * instead of making live API requests. This provides:
- * - Faster load times during development
- * - Consistent data for testing and presentations
- * - Reduced API load
- * - Offline-first capability
+ * - true  → Dashboard shows sample data (default after install)
+ * - false → Dashboard shows live data (different travelers, cities, metrics)
  *
  * HOW IT WORKS:
- * The useDataSource hook checks this flag and returns cached sample
- * data when enabled, or live API data when disabled. This allows
- * seamless switching between data sources without code changes.
+ * CommandCenter.tsx reads this flag and passes initialMode to DataModeProvider:
+ *   initialMode={ENABLE_SAMPLE_DATA_CACHE ? "sample" : "live"}
  *
- * USAGE:
- * Set to false to enable live data fetching from APIs.
- * Set to true to use the local sample data cache.
+ * Every useDataSource({ sample, live }) call returns whichever prop matches
+ * the active mode. When you flip this flag to false, the dashboard instantly
+ * shows the live dataset on next load — no code changes needed.
  *
- * AFFECTED COMPONENTS:
- * All components using useDataSource hook will respect this setting.
+ * USAGE:
+ * Phase 1 (Build the Dashboard): Leave as true — sample data.
+ * Phase 2 (Connect to Live Data): Flip to false — live data with different
+ *   travelers, cities, disruptions, and metrics.
  */
 
 export const ENABLE_SAMPLE_DATA_CACHE = true;
-
-/**
- * Sample data cache is currently ENABLED
- *
- * Benefits:
- * ✓ Instant data loading (no network latency)
- * ✓ No API rate limiting concerns
- * ✓ Consistent data for demos and testing
- * ✓ Works offline
- * ✓ Reduced backend load
- *
- * To enable live API data:
- * 1. Set ENABLE_SAMPLE_DATA_CACHE to false
- * 2. Restart the development server
- */

package/src/templates/workspace/CommandCenter.tsx.template

@@ -1,12 +1,13 @@
 import AppThemeProvider from "@/components/library/theme/AppThemeProvider";
 import DataModeProvider from "@/components/library/data/DataModeProvider";
+import { ENABLE_SAMPLE_DATA_CACHE } from "@/lib/dataStrategy";
 import { Toaster } from "sonner";
 import BlankDashboard from "../pages/BlankDashboard";
 
 export default function CommandCenter() {
   return (
     <AppThemeProvider initialMode="light">
-      <DataModeProvider initialMode="sample">
+      <DataModeProvider initialMode={ENABLE_SAMPLE_DATA_CACHE ? "sample" : "live"}>
         <BlankDashboard />
         <Toaster position="bottom-right" />
       </DataModeProvider>