@schandlergarcia/sf-web-components 1.9.67 → 1.9.69

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

@@ -1,6 +1,6 @@
 # Engine Travel Command Center
 
-Product Requirements Document · TDX26 Demo Build
+Product Requirements Document
 
 ---
 
@@ -8,28 +8,25 @@ Product Requirements Document · TDX26 Demo Build
 
 The Engine Travel Command Center is a real-time operations dashboard for corporate travel managers who use Engine (engine.com). It gives a single-screen view of every active traveler, booking, flight, policy flag, and agent interaction — built on Salesforce Data Cloud.
 
-It is not Engine's consumer-facing booking app. It is a personalized command center for one travel manager at one company.
-
-**Demo context:** Built live at TDX26 using Agentforce Vibes. The arc is: PRD → scaffold → data → agent → intelligence. Each build prompt maps to one beat.
+**Build approach:** Incremental — PRD → scaffold → data → agent → intelligence.
 
 ---
 
 ## 2. Users
 
 **Primary — Sarah Chen, Travel Manager at Acme Corp**
-Manages Acme's travel program: bookings, policy enforcement, exceptions, traveler monitoring. Before this dashboard she worked across Engine's booking interface, email, and Salesforce separately.
+Manages Acme's travel program: bookings, policy enforcement, exceptions, traveler monitoring.
 
 **Secondary — Eva (Agentforce Agent)**
-Engine's Agentforce-powered AI agent. Handles traveler requests autonomously — booking changes, policy questions, itinerary lookups. Resolves ~30% of requests without human involvement. Surfaces in the dashboard via `ChatBar` (command palette).
+Engine's Agentforce-powered AI agent. Handles traveler requests autonomously — booking changes, policy questions, itinerary lookups. Resolves ~30% of requests without human involvement. Surfaces via `ChatBar` below the hero map.
 
 ---
 
 ## 3. Brand Tokens
 
-Update `src/styles/global.css` — replace the existing `--color-brand-*` palette inside the `@theme inline` block. Do not add new CSS variables or custom properties outside this block.
+Update `src/styles/global.css` — replace the existing `--color-brand-*` palette inside the `@theme inline` block:
 
 ```css
-/* Engine teal brand palette */
 --color-brand-50:  #ECFDF9;
 --color-brand-100: #D1FAF0;
 --color-brand-200: #A7F3E1;
@@ -41,185 +38,96 @@ Update `src/styles/global.css` — replace the existing `--color-brand-*` palett
 --color-brand-800: #115E59;
 --color-brand-900: #134E4A;
 --color-brand-950: #042F2E;
-```
-
-Additionally, add a custom `--color-engine-savings` token for the green savings accent:
-
-```css
 --color-engine-savings: #16A34A;
 ```
 
-All component styling uses `brand-*` Tailwind classes for primary UI and Tailwind built-in colors (green, amber, red) for status. No hardcoded hex values in components. No `bg-indigo-*` or raw color classes for brand elements.
+Use `brand-*` Tailwind classes for brand elements. Tailwind built-in colors (green, amber, red) for status. No hardcoded hex in components.
 
-**Typography:** Inter (already configured as `--font-sans` in global.css). No changes needed.
-
-**Icons:** Heroicons 2 exclusively (`@heroicons/react`). No Lucide, Font Awesome, or other libraries inside command center pages.
+**Typography:** Inter (already `--font-sans`). **Icons:** Heroicons 2 (`@heroicons/react`).
 
 ---
 
 ## 4. Architecture
 
-**Dashboard file:** `src/pages/EngineDashboard.tsx` (single file, `.tsx` — TypeScript project, React components MUST use `.tsx`)
-
-**Wiring:** `CommandCenter.tsx` imports and renders `EngineDashboard` inside the existing provider stack (`heroui-scope` → `AppThemeProvider` → `DataModeProvider` → `Toast.Provider`). Never recreate these providers in the dashboard.
-
-**Imports:** All components from `@/components/library` barrel. Theme access from `@/components/library/theme/AppThemeProvider`.
+- **Dashboard file:** `src/pages/EngineDashboard.tsx`
+- **Wiring:** `CommandCenter.tsx` imports and renders `EngineDashboard` inside the existing provider stack. Never recreate providers in the dashboard.
+- **Imports:** Components from `@/components/library`. Theme from `@/components/library/theme/AppThemeProvider`.
 
 ---
 
-## 5. Layout — Visualization-Hero Pattern
+## 5. Layout
 
-This dashboard uses the **visualization-hero** layout. The live flight map is the signature element.
-
-### Structure (top to bottom)
+Visualization-hero layout. Full-page scroll (no `h-screen`).
 
 ```
-┌─────────────────────────────────────────────────────────────┐
-│ HEADER BAR (h-12, sticky)                                   │
-│  Engine logo + "Travel Command Center" | ChatBar | actions  │
-├─────────────────────────────────────────────────────────────┤
-│ HERO MAP (h-[520px] or h-[600px], GeoMap)                  │  ↕
-│                                                             │  ↕ Full-page
-│  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐          │  ↕ scroll
-│  │ KPI     │ │ KPI     │ │ KPI     │ │ KPI     │  ← glass │  ↕
-│  │ overlay │ │ overlay │ │ overlay │ │ overlay │  overlays │  ↕
-│  └─────────┘ └─────────┘ └─────────┘ └─────────┘          │  ↕
-│                                                             │  ↕
-│  ┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐       ← flight  │  ↕
-│  │ BA286 │ │ NH109 │ │ LH431 │ │ SQ 37 │       status    │  ↕
-│  └───────┘ └───────┘ └───────┘ └───────┘       strip      │  ↕
-├─────────────────────────────────────────────────────────────┤  ↕
-│ DATA PANELS (px-4 py-5, space-y-6, natural flow)           │  ↕
-│                                                             │  ↕
-│  ┌─── 1/3 ───────┐ ┌─── 2/3 ────────────────────┐         │  ↕
-│  │ Disruptions    │ │ Active Travelers            │         │  ↕
-│  │ (custom panel) │ │ (expandable cards, scroll)  │         │  ↕
-│  └────────────────┘ └────────────────────────────┘         │  ↕
-│                                                             │  ↕
-│  ┌─── 1/2 ───────┐ ┌─── 1/2 ────────────────────┐         │  ↕
-│  │ Escalations    │ │ Travel Spend (Monthly)      │         │  ↕
-│  │ (ActivityCard) │ │ (ChartCard + D3Chart line)  │         │  ↕
-│  └────────────────┘ └────────────────────────────┘         │  ↕
-└─────────────────────────────────────────────────────────────┘
+┌──────────────────────────────────────────────────────────────┐
+│ HEADER (h-12, sticky, bg-slate-900)                          │
+│  Engine logo + "Travel Command Center" + badge  |  actions   │
+├──────────────────────────────────────────────────────────────┤
+│ HERO MAP (h-[520px], GeoMap, relative)                       │
+│  ┌─ glass KPI overlays (absolute top-left) ───────────────┐  │
+│  │ Active Travelers | Spend MTD | Compliance | Eva Resolved│  │
+│  └────────────────────────────────────────────────────────┘  │
+│  ┌─ flight status strip (absolute bottom) ────────────────┐  │
+│  │ BA 286 · In Air | NH 109 · In Air | LH 431 · Delayed  │  │
+│  └────────────────────────────────────────────────────────┘  │
+├──────────────────────────────────────────────────────────────┤
+│ EVA CHATBAR (px-4 pt-4, full-width command palette strip)    │
+├──────────────────────────────────────────────────────────────┤
+│ DATA PANELS (px-4 py-5 space-y-6)                            │
+│                                                              │
+│  Row 1: grid grid-cols-1 items-start gap-4 lg:grid-cols-3   │
+│  ┌── 2/3 (lg:col-span-2) ──────┐ ┌── 1/3 ───────────────┐  │
+│  │ Escalations (custom panel)    │ │ Disruptions (custom)  │  │
+│  └───────────────────────────────┘ └──────────────────────┘  │
+│                                                              │
+│  Row 2: grid grid-cols-1 items-start gap-4 lg:grid-cols-3   │
+│  ┌── 2/3 (lg:col-span-2) ──────┐ ┌── 1/3 ───────────────┐  │
+│  │ Active Travelers (expandable) │ │ Travel Spend (chart)  │  │
+│  └───────────────────────────────┘ └──────────────────────┘  │
+└──────────────────────────────────────────────────────────────┘
 ```
 
-### Layout Rules
-
-**CRITICAL: Full-page scroll, NOT viewport-locked sections.**
+### Layout classes
 
-The entire dashboard scrolls as one page. Do NOT use `h-screen` or flex height constraints that lock sections to viewport.
+- **Outer:** `<div className="flex flex-col bg-slate-50 dark:bg-slate-950">`
+- **Map:** `<div className="relative h-[520px]">`
+- **Eva:** `<div className="px-4 pt-4"><ChatBar ... /></div>`
+- **Panels:** `<div className="px-4 py-5"><div className="space-y-6">...</div></div>`
+- **Row 1:** `grid grid-cols-1 items-start gap-4 lg:grid-cols-3` — Escalations `lg:col-span-2`, Disruptions auto
+- **Row 2:** `grid grid-cols-1 items-start gap-4 lg:grid-cols-3` — Travelers `lg:col-span-2`, Spend auto
 
-- **Outer container:** `<div className="flex flex-col bg-slate-50 dark:bg-slate-950">` (NO `h-screen`)
-- **Hero map:** Fixed height `h-[520px]` or `h-[600px]` with `relative` positioning for glass overlays
-- **Data panels:** Natural flow with `px-4 py-5 space-y-6` (NO `overflow-y-auto`, NO flex height constraints)
-- **Row 1** - Disruptions + Travelers: `grid grid-cols-1 items-start gap-4 lg:grid-cols-3` (disruptions 1/3, travelers `lg:col-span-2`)
-- **Row 2** - Escalations + Chart: `grid grid-cols-1 items-start gap-4 lg:grid-cols-2`
-- All grids use `items-start` for different-height cards
+### Phase 1 placeholders
 
-**Why full-page scroll:** Users need to see the map in context while scrolling through data. A fixed-height map that stays visible while data scrolls below creates a cramped, split-screen feeling. Full-page scroll is more natural and gives each section breathing room.
-
-### Phase 1 Placeholder Rules
-
-**Phase 1 builds the complete layout structure** including header bar, hero map, glass KPI overlays, flight status strip, and data panels. The only "placeholders" are the **data panels** below the map.
-
-**What to build in Phase 1:**
-- ✅ Header bar (with logo, title, theme toggle) - **use slate scale colors, NOT text-white**
-- ✅ Hero map (GeoMap component with no markers/arcs/overlays props)
-- ✅ Glass KPI overlays (4 KPIs, hardcoded values, positioned absolutely over map)
-- ✅ Flight status strip (4 flights, hardcoded values, positioned at map bottom)
-- ✅ Data panels (BaseCard placeholders with centered text) - **these are the only placeholders**
-
-**Data panel placeholders** use `BaseCard` with centered text:
+Phase 1 builds the header, map, glass overlays, and flight strip as real components. Only the ChatBar and 4 data panels below the map are placeholders:
 
 ```tsx
-// ✅ Correct data panel placeholder
 <BaseCard>
   <div className="h-48 flex items-center justify-center text-slate-400">
-    Disruptions Panel
+    Escalations Panel
   </div>
 </BaseCard>
-
-// ❌ Wrong - title causes text to run together
-<BaseCard title="Disruptions">
-  <div className="text-slate-400">No disruptions detected</div>
-</BaseCard>
-```
-
-**Hero map** (render actual GeoMap component in Phase 1):
-
-```tsx
-// ✅ Correct - render actual GeoMap component (empty, no data)
-import { GeoMap } from "@/components/library";
-import { useThemeMode } from "@/components/library/theme/AppThemeProvider";
-
-export default function EngineDashboard() {
-  const { mode } = useThemeMode();
-  
-  return (
-    <div className="relative h-[520px]">
-      <GeoMap
-        width={960}
-        height={520}
-        theme={mode === "dark" ? "dark" : "light"}
-        className="h-full w-full"
-      />
-    </div>
-  );
-}
-```
-
-In Phase 1:
-- GeoMap component renders with NO `markers`, `arcs`, or `overlays` props (these are GeoMap data props for Phase 2+)
-- GeoMap will render the base world map (land, sphere, graticule) even without data - this is NOT a placeholder, it's the actual map component
-- Glass KPI overlays and flight status strip ARE built in Phase 1 (as separate `<div>` elements positioned absolutely over the map)
-- Uses `useThemeMode()` to get dark/light mode for theme prop
-- **Verify:** You should see a blue world map (dark theme) or gray world map (light theme) with glass overlays on top
-
-// ❌ Wrong - wrapped in BaseCard
-<div className="relative h-[520px]">
-  <BaseCard>
-    <GeoMap ... />
-  </BaseCard>
-</div>
-
-// ❌ Wrong - text placeholder instead of GeoMap component
-<div className="relative h-[520px]">
-  <div className="flex h-full items-center justify-center bg-slate-100 dark:bg-slate-900">
-    <span className="text-slate-400">Hero Map (GeoMap)</span>
-  </div>
-</div>
 ```
 
-All data panel placeholders use: BaseCard, no title, centered text, `h-48`, `text-slate-400`.
-
-Hero map uses: actual GeoMap component (no markers/arcs/overlays in Phase 1), direct render, fills hero container.
+The GeoMap renders the base world map with no data props. Glass overlays and flight strip use hardcoded values.
 
 ---
 
 ## 6. Header
 
-Compact `h-12` sticky header with dark background (`bg-slate-900 dark:bg-slate-950`).
+Compact `h-12` sticky header (`bg-slate-900 dark:bg-slate-950`). No ChatBar in the header — Eva lives below the map.
 
-| Position | Content |
-|----------|---------|
-| Left | Engine logo (small square icon with `GlobeAltIcon` in `bg-brand-600`) + "ENGINE" wordmark + separator + "Travel Command Center" |
-| Right | `ChatBar` (Eva) + notification bell (with pending count badge) + theme toggle (sun/moon) |
-
-The `ChatBar` replaces any FAB or sliding panel. It opens inline as a command palette overlay.
+| Left | Right |
+|------|-------|
+| Engine logo (`GlobeAltIcon` in `bg-brand-600` square) + "ENGINE" wordmark + separator + "Travel Command Center" + "Powered by Agentforce" badge (`bg-brand-900/40 text-brand-400 rounded-full text-[10px]`) | Notification bell (badge count) + theme toggle (sun/moon) |
 
 ---
 
 ## 7. Hero Map
 
-**Component:** `GeoMap` (from `@/components/library`)
-
-**Phase 1:** Render GeoMap with NO data props (no markers/arcs/overlays)
-**Phase 2:** Add markers, arcs, and overlays from sample data to show where travelers are
+**Component:** `GeoMap` from `@/components/library`
 
 ```tsx
-import { MAP_MARKERS, MAP_ARCS, MAP_OVERLAYS } from "@/data/engine-sample-data";
-
-// Phase 2 - with map data
 <GeoMap
   width={960}
   height={520}
@@ -232,86 +140,100 @@ import { MAP_MARKERS, MAP_ARCS, MAP_OVERLAYS } from "@/data/engine-sample-data";
 />
 ```
 
-**Markers:** One per city (origin and destination). Each marker: `{ id, lon, lat, label, active: true }`. Shows where travelers are located.
-
-**Arcs:** One per active flight route. Each arc: `{ id, from: [lon, lat], to: [lon, lat], progress: 0–1 }`. Set `danger: true` on disrupted routes (delayed 60+ min or grounded). The `progress` value places an animated pulsing dot showing the flight's current position along the great circle arc.
-
-**Overlays:** Weather/disruption zones as pulsing circles. Each overlay: `{ id, center: [lon, lat], radius: number }`.
+- **Markers:** One per city. `{ id, lon, lat, label, active: true }`
+- **Arcs:** One per flight route. `{ id, from: [lon, lat], to: [lon, lat], progress: 0–1, danger: boolean }`. `danger: true` on disrupted routes.
+- **Overlays:** Weather zones. `{ id, center: [lon, lat], radius: number }`
+- **Phase 1:** Render GeoMap with no data props (map renders base world automatically)
+- **Phase 2:** Add `MAP_MARKERS`, `MAP_ARCS`, `MAP_OVERLAYS` from `@/data/engine-sample-data`
 
-**Glass KPI overlays:** Four pills floating `absolute left-3 top-3` on the map:
-- Active Travelers (count)
-- Spend MTD (formatted with `fmtK()`)
-- Compliance %
-- Eva Resolved (count + "resolved")
+**Glass KPI overlays** — 4 pills, `absolute left-3 top-3`:
+Active Travelers (count), Spend MTD (`fmtK()`), Compliance %, Eva Resolved (count + "resolved").
 
-Each pill: `bg-black/40 backdrop-blur-md border border-white/10 rounded-lg px-3 py-1.5` with white text and icon.
+Label styling: `text-[10px] font-medium uppercase tracking-wide text-slate-300`
+Value styling: `text-sm font-semibold text-slate-50`
+Pill styling: `bg-black/40 backdrop-blur-md border border-white/10 rounded-lg px-3 py-1.5`
+Icon: `h-4 w-4 text-brand-400`
 
-**Flight status strip:** Floating `absolute bottom-3 left-3 right-3`, horizontal scroll. One pill per active flight showing flight number + status chip (On Time = green, Delayed = amber, Grounded/Boarding = contextual). Same glass styling as KPI overlays.
+**Flight status strip** — `absolute bottom-3 left-3 right-3`, horizontal scroll. One pill per flight: flight number + status chip (green=On Time, amber=Delayed, sky=Boarding). Same glass styling.
 
 ---
 
 ## 8. Data Panels
 
-**CRITICAL: Panel titles MUST match PRD exactly, even if data export has different name.**
-
-For example: Panel titled "Escalations" uses data exported as `EVA_ACTIONS` or `ESCALATION_CARDS` (both are aliases). The PRD panel title takes precedence over data export names.
-
-### 8a. Disruptions Panel (1/3 width)
-
-Custom inline component inside a `BaseCard`. Shows only flights that are delayed 60+ min or grounded.
-
-Each disruption card:
-- Severity dot (rose for grounded, amber for delayed) + flight number + severity label + delay minutes
-- Route + affected traveler name
-- Reason text
-- Eva action line with `SparklesIcon` showing what Eva is doing about it
-
-### 8b. Active Travelers (2/3 width)
+4 panels in 2 rows. Sample data imported from `src/data/engine-sample-data.js`.
 
-`BaseCard` with `maxBodyHeight={420}` for internal scroll. Expandable traveler cards.
+### 8a. Escalations (Row 1, 2/3 width)
 
-Each traveler row:
-- `Avatar` (initials) + name + department + origin → destination
-- `UIChip` for policy status (success = compliant, warning = exception)
-- Click to expand: 4-col grid showing Flight, Hotel, Return date, Destination
+Custom inline panel in BaseCard. Do NOT use ActivityCard — this panel has per-item "Assign to Agent" buttons.
 
-### 8c. Escalations (1/2 width)
-
-**CRITICAL: ActivityCard has no card styling by default. Must wrap in BaseCard for visible card background.**
+Each escalation row:
+- Status icon: `CheckCircleIcon` (complete, green), `ArrowPathIcon` (working, brand), `ClockIcon` (pending, amber)
+- Title + subtitle + timestamp
+- **"Assign to Agent" button** on items where status is NOT `"complete"`: teal button (`bg-brand-600`) with `SparklesIcon` + "Assign to Agent" text. On click: `toast.success("Assigned to Eva")`
 
 ```tsx
 <BaseCard>
-  <ActivityCard
-    title="Escalations"
-    actions={useDataSource({ sample: ESCALATION_CARDS, live: [] })}
-  />
+  <div className="p-4">
+    <h3 className="mb-3 text-sm font-semibold text-slate-900 dark:text-slate-50">
+      Escalations
+    </h3>
+    <div className="divide-y divide-slate-100 dark:divide-slate-800">
+      {escalations.map((e) => {
+        const isOpen = e.status !== "complete";
+        return (
+          <div key={e.id} className="flex items-start gap-3 py-3">
+            <StatusIcon className={`mt-0.5 h-5 w-5 shrink-0 ${statusColor}`} />
+            <div className="min-w-0 flex-1">
+              <div className="text-sm font-medium text-slate-900 dark:text-slate-50">{e.title}</div>
+              <div className="mt-0.5 text-xs text-slate-500 dark:text-slate-400">
+                {e.subtitle} · {e.timestamp}
+              </div>
+            </div>
+            {isOpen && (
+              <button onClick={() => handleAssignToAgent(e)}
+                className="shrink-0 rounded-md bg-brand-600 px-2.5 py-1 text-xs font-medium text-slate-50 hover:bg-brand-700">
+                <span className="flex items-center gap-1">
+                  <SparklesIcon className="h-3 w-3" /> Assign to Agent
+                </span>
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  </div>
 </BaseCard>
 ```
 
-**Data source:** Import `ESCALATION_CARDS` from sample data (alias of `EVA_ACTIONS`)
+Data: `ESCALATION_CARDS` from sample data.
+
+### 8b. Disruptions (Row 1, 1/3 width)
+
+Custom inline component in BaseCard. Shows flights delayed 60+ min or grounded.
+
+Each disruption card:
+- Severity dot (rose=grounded, amber=delayed) + flight number + delay minutes
+- Route + traveler name
+- Reason text
+- Eva action line with `SparklesIcon`
+
+Data: `DISRUPTION_CARDS` from sample data.
 
-Each escalation has:
-- Title (issue description)
-- Subtitle (details + context)
-- Status: `"working"` (Eva is handling), `"pending"` (needs review), or `"complete"` (resolved)
-- Timestamp
+### 8c. Active Travelers (Row 2, 2/3 width)
 
-Examples from sample data:
-- "Processing approval for Omar Hassan" - subtitle: "Paris trip over budget · escalated to manager" (status: pending)
-- "Monitoring weather delay for Elena Rodriguez" - subtitle: "AF 99 · CDG arrival delayed 45 min · No action yet" (status: working)
-- "Rebooked cancelled flight for Priya Patel" - subtitle: "LH 431 → LH 433 · Same fare class" (status: complete)
+BaseCard with `maxBodyHeight={420}`. Expandable traveler cards.
 
-### 8d. Monthly Spend Trend (1/2 width)
+Each row: `Avatar` (initials) + name + department + origin → destination + policy chip (compliant=green, exception=amber).
+Expand: 4-col grid — Flight, Hotel, Return, Destination + "View in Salesforce" link.
 
-`ChartCard` wrapping a `D3Chart` with `D3ChartTemplates.groupedBarChart` (lineChart doesn't support categorical x-axis).
+Data: `TRAVELER_CARDS` from sample data.
 
-**CRITICAL: Use this exact code structure:**
+### 8d. Monthly Spend Trend (Row 2, 1/3 width)
 
 ```tsx
-// Transform data to chart format
-const spendChartData = useDataSource({ 
-  sample: MONTHLY_SPEND.map(m => ({ x: m.month, spend: m.amount })), 
-  live: [] 
+const spendChartData = useDataSource({
+  sample: MONTHLY_SPEND.map(m => ({ x: m.month, spend: m.amount })),
+  live: [],
 });
 
 <ChartCard
@@ -336,145 +258,78 @@ const spendChartData = useDataSource({
 />
 ```
 
-**Data source:** Import `MONTHLY_SPEND` from sample data, transform to chart format
-
-**Requirements:**
-- X-axis: month names (Oct through Mar) - categorical
-- Y-axis: spend amount in dollars (will show as thousands: 98000, 128000, etc.)
-- Height: 320px
-- Bar color: Engine teal (#5BC8C8)
-- Bar radius: 6 for rounded corners
-- **Data transformation:** map `{ month, amount }` to `{ x, spend }` format inline
-- responsive={true}
-
-**Why this chart:** Shows spend trends over time so travel managers can spot anomalies, budget overruns, or seasonal patterns. Using bars instead of line because D3 lineChart requires numeric x-axis.
-
-**That's it!** Only 4 panels total: Disruptions, Active Travelers, Escalations, and Monthly Spend Trend.
-
 ---
 
 ## 9. Eva — ChatBar
 
-Eva surfaces as a `ChatBar` in the header. Not a FAB. Not a sliding panel. Not a `ChatPanel` in the grid.
+Eva renders as a full-width `ChatBar` below the hero map, between the map and the data panels. NOT in the header. NOT a FAB or sliding panel.
 
-```jsx
-<ChatBar
-  title="Eva"
-  placeholder="Ask about travelers, bookings, policy, spend…"
-  suggestions={suggestions}
-  onSend={handleChat}
-/>
+```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>
 ```
 
-**Starter suggestions (3–5):**
-- "Who's traveling internationally right now?"
-- "Show bookings pending approval"
-- "What has Eva resolved today?"
-- "Travelers returning this week"
+Suggestions: "Who's traveling internationally right now?", "Show bookings pending approval", "What has Eva resolved today?", "Travelers returning this week"
 
-**Agent responses:** Return structured `components` arrays for data (MetricCard, DataTable, StatusCard) — never markdown tables in text content.
+Define `handleChat` and `CHAT_SUGGESTIONS` at module scope.
 
-**Handler:** Define `handleChat` and `CHAT_SUGGESTIONS` at module scope (outside the component body) so they can be shared if an "open in tab" feature is added later.
+**Phase 1:** Placeholder — do NOT add ChatBar. Just leave the space empty.
+**Phase 4:** Add the ChatBar between the map and data panels.
 
 ---
 
-## 10. Salesforce Signals (Phase 4 Only)
+## 10. Salesforce Signals (Phase 4)
 
-**⚠️ These are added in Phase 4, NOT Phase 1.** Phase 1 has only the Engine logo and "Travel Command Center" title.
+Subtle indicators, not banners.
 
-Subtle, contextual indicators — like "Sent from iPhone", not promotional banners.
-
-| Signal | Location | Implementation | Phase |
-|--------|----------|----------------|-------|
-| "☁ View in Salesforce" | Traveler expanded view, booking rows | Micro-link, muted text | Phase 4 |
-| "✓ Salesforce updated" | After rebook/approve actions | `toast()` with success tone | Phase 4 |
-| "Powered by Agentforce" | ChatBar title or subtitle area | Small badge/chip | Phase 4 |
+| Signal | Location |
+|--------|----------|
+| "Powered by Agentforce" | Header, next to "Travel Command Center" (small rounded badge) |
+| "View in Salesforce" | Traveler expanded view (micro-link, muted text) |
+| "Salesforce updated" | After rebook/approve actions (`toast()`) |
+| "Assigned to Eva" | After "Assign to Agent" button click (`toast.success()`) |
 
 ---
 
 ## 11. Dark Mode
 
-Mandatory on every element. The dashboard must work in both light and dark mode with no visual bugs.
-
-- Use the standard dark mode pairs from the builder rules (bg-white/dark:bg-slate-900, etc.)
-- The GeoMap has built-in dark/light themes — pass `theme={mode === "dark" ? "dark" : "light"}`
-- Glass overlays use `bg-black/40 backdrop-blur-md` which works in both modes
-- Custom inline components (disruption cards, flight chips) must include `dark:` variants on every color class
-- Never use `text-black` or `text-white` directly — use the slate scale
-- Theme toggle button in the header (sun/moon icon)
+Every element supports light and dark. GeoMap: `theme={mode === "dark" ? "dark" : "light"}`. Glass overlays work in both modes. Use slate scale (no `text-white` or `text-black`). Theme toggle in header.
 
 ---
 
 ## 12. Data Model
 
-**Traveler** — `id`, `name`, `department`, `destination`, `origin`, `hotel`, `flight`, `return`, `status`, `policyStatus` (compliant | exception)
-
-**Flight** — `id`, `flight` (number), `route`, `dep` (time), `status` (On Time | Delayed | Boarding | In Air | Landed), `traveler`, `delayMin`
-
-**Disruption** — `id`, `flight`, `route`, `traveler`, `severity` (grounded | delayed), `delayMin`, `reason`, `evaAction`
-
-**Map Coordinates** — City name → `[lon, lat]` lookup object. Markers derived from coordinates. Arcs derived from flight origin/destination pairs.
-
-**Booking** — `id`, `traveler`, `type`, `destination`, `dates`, `cost`, `status` (Confirmed | Pending approval), `policy` (In policy | Over budget | Exception granted)
-
-**Policy Item** — `id`, `title`, `description`, `status` (operational | degraded), `timestamp`
-
-**Escalation** — `id`, `title`, `subtitle`, `status` (complete | working | pending), `timestamp`
-
-**Monthly Spend** — `{ month: string, amount: number }` array. Six months of travel spend data (Oct through Mar). Amounts in dollars, typically $98K-$156K range.
-
-**Sample data:** 8–10 travelers, 8 flights, 4 disruptions, 8 bookings, 5 policy items, 8 escalations, 6 months of spend. All deterministic (no `Math.random()`). Include realistic names, routes, dollar amounts, and a mix of all status types.
+- **Traveler** — `id`, `name`, `department`, `destination`, `origin`, `hotel`, `flight`, `return`, `policyStatus` (compliant | exception)
+- **Flight** — `id`, `flight`, `route`, `dep`, `status` (On Time | Delayed | Boarding | In Air | Landed), `traveler`, `delayMin`
+- **Disruption** — `id`, `flight`, `route`, `traveler`, `severity` (grounded | delayed), `delayMin`, `reason`, `evaAction`
+- **Escalation** — `id`, `title`, `subtitle`, `status` (complete | working | pending), `timestamp`
+- **Monthly Spend** — `{ month, amount }` array, 6 months (Oct–Mar), $98K–$156K range
+- **Sample data:** Pre-built in `src/data/engine-sample-data.js`. 8 travelers, 8 flights, 4 disruptions, 8 escalations, 6 months spend. All deterministic.
 
 ---
 
 ## 13. Build Prompts
 
-Build in 4 incremental phases. Each prompt maps to one beat of the demo arc.
-
----
+Build in 4 incremental phases.
 
 ### Phase 1: Layout & Structure
 
 > 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
 
-> 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.
-
----
+> Replace the placeholders with real components and wire up the sample data. Build the 4 data panels from section 8 — Escalations, Disruptions, Active Travelers, 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
 
 > 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
 
-> Add Eva to the header as a ChatBar. Add subtle Salesforce signals throughout — "View in Salesforce" links, success toasts, "Powered by Agentforce" badge.
-
----
-
-## 14. What NOT to Do
-
-These are explicit anti-patterns. If any prompt output includes these, it must be corrected:
-
-- Do not use `react-simple-maps`, Recharts, or any charting library other than the built-in `D3Chart` + `D3ChartTemplates`
-- Do not use Lucide icons, Font Awesome, or any icon library other than Heroicons 2
-- Do not import from `src/components/ui/` (shadcn) — use `@/components/library` exclusively
-- Do not use `cn()` helper — that belongs to the outer app
-- Do not recreate `AppThemeProvider`, `DataModeProvider`, or `Toast.Provider` — `CommandCenter.tsx` provides them
-- Do not build a FAB or sliding chat panel — use `ChatBar` in the header
-- Do not hardcode hex color values in component JSX — use `brand-*` Tailwind classes and Tailwind built-in colors for status
-- Do not use `bg-indigo-*` for brand — use `brand-*`
-- Do not use `text-black` or `text-white` — use the slate scale
-- Do not put more than 4 KPIs in a row
-- Do not squeeze the map into a grid column — it must be full-width hero
-- Do not wrap GeoMap in ChartCard — render it directly
-- Do not use `Math.random()` in sample data
-- Do not skip dark mode on any visible element
-- Do not use inline `style={{}}` for layout except the flex properties on the hero/panel containers
-- Do not put `ChatPanel` in the dashboard grid
-- Do not use `position: fixed` without `createPortal` to `document.body`
+> Add Eva below the map as a ChatBar. Add subtle Salesforce signals throughout — "Powered by Agentforce" badge in the header, "View in Salesforce" links in traveler details, success toasts, and "Assign to Agent" buttons on open escalations.