@schandlergarcia/sf-web-components 1.9.68 → 1.9.70

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

@@ -45,7 +45,8 @@ 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 | `ActivityCard` or `FeedPanel` | `<div>` with hand-rolled interaction 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)** |
 | 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 |
@@ -53,7 +54,7 @@ The component library (`@/components/library`) provides pre-built, themed, dark-
 | Text summary | `NarrativeSummary` / `SectionCard` | `<div>` with headings and paragraphs |
 | Alert / callout | `CalloutCard` | Custom banner div |
 
-Every visible section of a dashboard should be a library component. If you're writing `<div className="bg-white border rounded-[10px] shadow-sm p-6">` with content inside, that's a hand-rolled card — use a library component instead.
+Every visible section of a dashboard should be a library component. If you're writing `<div className="bg-white border rounded-[10px] shadow-sm p-6">` with content inside, that's a hand-rolled card — use a library component instead. Exception: when a panel needs per-item action buttons (like "Assign to Agent"), use custom markup inside `BaseCard`.
 
 ### Correct example:
 
@@ -103,7 +104,7 @@ No `<nav>`, header bar, tab bar, or content-swapping via `useState("activeTab")`
 
 - Dashboard page files: `src/pages/` (e.g. `EngineDashboard.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 `AppThemeProvider` + `DataModeProvider` + `Toaster`. **Never recreate these providers in dashboard pages.**
+- `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, use `toast` from `sonner` (not `addToast` from HeroUI).
 
 ### Wiring a new dashboard (REQUIRED STEPS)
 
@@ -124,22 +125,24 @@ export default function MyDashboard() {
 }
 ```
 
-**Step 2:** Update `CommandCenter.tsx` to import and render it:
+**Step 2:** Update `CommandCenter.tsx` to import and render it. Only change the import line — preserve `heroui-scope` and `Toast.Provider`:
 ```tsx
 // src/components/workspace/CommandCenter.tsx
 import AppThemeProvider from "@/components/library/theme/AppThemeProvider";
 import DataModeProvider from "@/components/library/data/DataModeProvider";
-import { Toaster } from "sonner";
-import MyDashboard from "../../pages/MyDashboard";  // ← change this import
+import { Toast } from "@heroui/react";
+import MyDashboard from "../../pages/MyDashboard";  // ← change ONLY this import
 
 export default function CommandCenter() {
   return (
-    <AppThemeProvider initialMode="light">
-      <DataModeProvider initialMode="sample">
-        <MyDashboard />                   {/* ← change this */}
-        <Toaster position="bottom-right" />
-      </DataModeProvider>
-    </AppThemeProvider>
+    <div className="heroui-scope">                   {/* ← preserve this wrapper */}
+      <AppThemeProvider initialMode="light">
+        <DataModeProvider initialMode="sample">
+          <MyDashboard />                             {/* ← change this */}
+          <Toast.Provider placement="bottom end" />   {/* ← preserve this */}
+        </DataModeProvider>
+      </AppThemeProvider>
+    </div>
   );
 }
 ```
@@ -224,7 +227,8 @@ Key rules:
 | System health | `StatusCard` |
 | Feed / item list | `ListCard` |
 | Scrollable side panel | `FeedPanel` |
-| Activity feed | `ActivityCard` |
+| Activity feed (display only) | `ActivityCard` |
+| Activity feed (per-item actions) | Custom markup in `BaseCard` |
 | User avatar | `Avatar` |
 | Text summary | `NarrativeSummary` (schema) / `SectionCard` |
 | Actions | `ActionList` (schema) / `UIButton` group |
@@ -341,8 +345,9 @@ Define schemas outside component body. Always `required: true` on mandatory fiel
 
 ## AI Chat & Agent
 
-Use `ChatBar` (command palette, ⌘K) for dashboards. `ChatPanel` for full-page chat.
+Use `ChatBar` for dashboards, `ChatPanel` for full-page chat.
 
+- Place `ChatBar` between the hero map and data panels (full-width, `px-4 pt-4`), NOT in the header
 - Always provide 3–5 `suggestions` for starter prompts
 - Return `components` for structured data — never markdown tables in text
 - Always set height on `ChatPanel`
@@ -466,7 +471,7 @@ Every data component handles loading. Error messages are human-readable. Empty s
 
 Before finishing a dashboard page, verify ALL of these:
 
-- [ ] **Every card/panel is a library component** (MetricCard, ListCard, ActivityCard, WidgetCard, TableCard, etc.) — no hand-rolled `<div className="bg-white border ...">` cards
+- [ ] **Every card/panel is a library component** (MetricCard, ListCard, ActivityCard, WidgetCard, TableCard, etc.) — no hand-rolled `<div className="bg-white border ...">` cards. Exception: panels that need per-item action buttons (e.g. "Assign to Agent") can use custom markup inside `BaseCard`.
 - [ ] **Every chart/visualization is a library component** (ChartCard + D3Chart, GeoMap) — no hand-rolled SVG/canvas
 - [ ] **No `<nav>`, header bar, or sticky tab bar** — navigation is handled by appLayout.tsx
 - [ ] **Single scrollable page** — no multi-tab layout that swaps content
@@ -498,7 +503,8 @@ Instead, verify correctness by reviewing the code against the Pre-Completion Che
 - Using `template` prop on D3Chart — use `renderChart={D3ChartTemplates.lineChart}`
 - Passing D3Chart as children to ChartCard — use `chart={<D3Chart ... />}` prop
 - Adding `<nav>` or tab-swapping (`useState("activeTab")`) inside dashboards
-- Recreating providers — `CommandCenter.tsx` already provides them
+- Recreating providers — `CommandCenter.tsx` already provides them. Do not replace `Toast.Provider` with `Toaster` from sonner, and do not remove the `heroui-scope` div
+- Using `addToast` from `@heroui/react` — use `toast` / `toast.success` from `sonner` instead
 - Using `text-black`, `text-white`, `bg-black` — use slate scale
 - Hardcoded data without `useDataSource` — always support sample/live switching
 - `position: fixed` without `createPortal`

package/CHANGELOG.md

@@ -5,7 +5,25 @@ 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.68] - 2026-04-01
+## [1.9.70] - 2026-04-02
+
+### Updated
+- **PRD (engine-command-center-prd.md)** - 5 edits for phasing clarity and toast API:
+  - Section 4 (Architecture): Added explicit rules to preserve `heroui-scope` wrapper and `Toast.Provider` in CommandCenter. Added `toast` from `sonner` as the correct toast API
+  - Section 6 (Header): Added "(Phase 4)" tag to "Powered by Agentforce" badge
+  - Section 8a (Escalations): Added "(Phase 4)" tag to "Assign to Agent" button, noted `toast.success` comes via `sonner`, added instruction to render button with empty `onClick` in Phase 2 and wire toast in Phase 4
+  - Section 10 (Signals): Changed `toast()` and `toast.success()` to include full call examples with "via sonner" annotation
+  - Section 13, Phase 3 prompt: Added file paths for queries and hook, code example showing how to wire `useEngineLiveData()` into `useDataSource({ sample: ..., live: live.xxx })`, clarified hook should match sample data shape
+
+- **Builder skill (SKILL.md)** - 3 edits for toast API and wiring:
+  - Wiring section: Changed description from Toaster to `heroui-scope` + `Toast.Provider` from `@heroui/react`. Added rule to use `toast` from `sonner` for dashboard toasts
+  - Wiring example (Step 2): Replaced sonner Toaster code with actual pattern: `heroui-scope` div, `Toast.Provider` from `@heroui/react`, with comments marking "preserve this" vs "change this"
+  - Component table: Bolded "per-item actions" row and added "see Engine PRD Section 8a" cross-reference
+  - Anti-patterns: Added two entries: (1) don't replace `Toast.Provider` with sonner's `Toaster` or remove `heroui-scope`, (2) don't use `addToast` from HeroUI — use `toast` from `sonner`
+
+**Context:** Clarified phasing tags for Phase 4 features (badge, agent buttons) and documented correct toast API pattern (HeroUI provider + sonner toast function).
+
+## [1.9.69] - 2026-04-01
 
 ### Fixed
 - **6 data bugs in engine-sample-data.js**:
@@ -17,39 +35,50 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   6. Updated TXL → BER throughout (Berlin airport code change)
 
 ### Updated
-- **PRD (engine-command-center-prd.md)** - Major rewrite (481 → 290 lines, -39%):
+- **Global styles** - Added `src/styles/global.css` with Engine brand tokens and command center styling
+
+- **PRD (engine-command-center-prd.md)** - Updated to match actual built dashboard:
+  - Layout diagram now shows 4-section structure: Header → Hero Map → Eva ChatBar → Data Panels (was missing ChatBar section)
+  - Layout classes added Eva: `<div className="px-4 pt-4">` as distinct section
+  - Section 6 (Header): Explicitly says "No ChatBar in the header — Eva lives below the map." Added "Powered by Agentforce" badge description
+  - Section 7 (Hero Map): Added explicit KPI label styling (`text-[10px] font-medium uppercase tracking-wide text-slate-300`) and value/pill/icon specs
+  - Section 8a (Escalations): Replaced ActivityCard with custom inline panel in BaseCard. Added full code example with status icons (CheckCircleIcon/ArrowPathIcon/ClockIcon), conditional "Assign to Agent" buttons, and toast.success
+  - Section 8c (Active Travelers): Added "View in Salesforce" link in expanded detail
+  - Section 9 (Eva): Completely rewritten - ChatBar is now between map and data panels, full-width, with phasing notes (Phase 1 = skip, Phase 4 = add)
+  - Section 10 (Signals): Added "Assigned to Eva" toast row for Assign to Agent button
+  - Phase 4 build prompt: Updated to say "Add Eva below the map as a ChatBar" and mention "Assign to Agent" buttons on open escalations
   - Applied Option A layout: Escalations + Disruptions in Row 1 (above fold), Active Travelers + Spend in Row 2
-  - Both rows now use `lg:grid-cols-3` with left panel at 2/3 width
+  - Both rows use `lg:grid-cols-3` with left panel at 2/3 width
   - Removed all "TDX26" and "demo" references
-  - Cut Section 14 "What NOT to Do" entirely (covered by builder rules)
-  - Cut all "Why" explanations and duplicate wrong/right examples
-  - Condensed Phase 1 placeholder rules from 75 lines to 8
-  - Sharpened every code example to be copy-ready
-  - Fixed "Sarah Chen" → "Priya Patel" in section 8c escalation example
-  - Removed "Required skills:" line from header
-
-- **Builder skill sub-files** - Replaced with single-line redirects (100% duplicates):
-  - `skills/command-center-builder/getting-started.md` - 125 → 1 line
-  - `skills/command-center-builder/page-layout.md` - 145 → 1 line
-  - `skills/command-center-builder/components-styling.md` - 98 → 1 line
-  - `skills/command-center-builder/charts-visualization.md` - 136 → 1 line
-  - `skills/command-center-builder/completion-checklist.md` - 62 → 1 line
-  - `skills/command-center-builder/data-forms-ai.md` - 44 → 1 line
-  - `skills/command-center-builder/improved-build-process.md` - 20 → 1 line
-
-- **Builder skill main file** - Trimmed (629 → 505 lines, -20%):
-  - `skills/command-center-builder/SKILL.md` - Removed wrong-example code blocks, condensed navigation section from 40 to 2 lines, trimmed map layout section, removed custom renderChart examples, cut anti-patterns list from 33 to 12 items
+  - Cut Section 14 "What NOT to Do" entirely
+  - Condensed Phase 1 placeholder rules from 75 to 8 lines
+
+- **Builder skill (SKILL.md)** - Fixed 4 contradictions:
+  - Component table: Split "Activity feed" into two rows: "display only" → ActivityCard, "with per-item actions" → custom markup in BaseCard
+  - Component selection table: Same split applied
+  - AI Chat & Agent section: Added bullet: "Place ChatBar between the hero map and data panels, NOT in the header"
+  - Pre-Completion Checklist: Added exception: panels needing per-item action buttons can use custom markup inside BaseCard
+  - General library component rule: Added exception note for per-item action buttons
+  - Removed wrong-example code blocks, condensed navigation (40 → 2 lines), removed custom renderChart examples, cut anti-patterns (33 → 12 items)
+
+- **Builder skill sub-files** - Replaced with single-line redirects:
+  - 7 files reduced from 630 total lines to 7 lines (100% duplicates eliminated)
 
 - **Simplified .a4drules documentation** - Removed redundancy, contradictions, and AI coaching language:
-  - `features/engine-dashboard-rule.md` - Rewritten as "Project Conventions" (reduced from 310 to ~65 lines)
+  - `features/engine-dashboard-rule.md` - Rewritten as "Project Conventions" (~65 lines)
   - `features/command-center-dashboard-rule.md` - Rewritten as slim conventions (~30 lines)
-  - `features/pre-code-checklist.md` - Rewritten as "Quick Reference" (~25 lines, removed auto-load)
+  - `features/pre-code-checklist.md` - Rewritten as "Quick Reference" (~25 lines)
   - `features/phase2-data-pattern.md` - Rewritten as "Sample Data" documentation (~20 lines)
-  - `skills/command-center-project/SKILL.md` - Fixed file path contradiction (src/components/pages/ → src/pages/). Description now includes "Engine Travel Command Center", tech stack keywords
-  - `skills/command-center-guide/SKILL.md` - Reduced from 270 to ~45 lines (simplified routing guide). Description improved for better matching
-  - `skills/component-library/SKILL.md` - Description now lists all key component names (MetricCard, ChartCard, GeoMap, etc.) for better matching
+  - `skills/command-center-project/SKILL.md` - Fixed file path contradiction
+  - `skills/command-center-guide/SKILL.md` - Reduced from 270 to ~45 lines
+  - `skills/component-library/SKILL.md` - Description now lists all key component names
+
+**Context:** PRD now accurately reflects the actual built dashboard with Eva ChatBar between map and data panels. Eliminated contradictions about ActivityCard vs custom markup for action buttons.
 
-**Context:** Major documentation consolidation. PRD is now 39% shorter with copy-ready code. Builder skill sub-files eliminated duplication by redirecting to SKILL.md. Overall .a4drules reduced from ~2000 to ~800 lines while improving clarity.
+## [1.9.68] - 2026-04-01
+
+### Updated
+- **Major documentation consolidation** - PRD reduced 39%, builder skill sub-files eliminated duplication, overall .a4drules reduced from ~2000 to ~800 lines
 
 ## [1.9.67] - 2026-04-01
 

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

@@ -18,7 +18,7 @@ The Engine Travel Command Center is a real-time operations dashboard for corpora
 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 via `ChatBar`.
+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.
 
 ---
 
@@ -50,7 +50,8 @@ Use `brand-*` Tailwind classes for brand elements. Tailwind built-in colors (gre
 ## 4. Architecture
 
 - **Dashboard file:** `src/pages/EngineDashboard.tsx`
-- **Wiring:** `CommandCenter.tsx` imports and renders `EngineDashboard` inside the existing provider stack. Never recreate providers in the dashboard.
+- **Wiring:** `CommandCenter.tsx` imports and renders `EngineDashboard` inside the existing provider stack. Never recreate providers in the dashboard. When updating `CommandCenter.tsx`, only change the dashboard import line — preserve the `heroui-scope` wrapper div and `Toast.Provider` from `@heroui/react` exactly as-is.
+- **Toasts:** Import `toast` from `sonner` in dashboard pages. Use `toast.success("message")` for success toasts and `toast("message")` for informational ones. The `Toast.Provider` in CommandCenter handles rendering — do not add a second `Toaster` or replace the existing provider.
 - **Imports:** Components from `@/components/library`. Theme from `@/components/library/theme/AppThemeProvider`.
 
 ---
@@ -62,7 +63,7 @@ Visualization-hero layout. Full-page scroll (no `h-screen`).
 ```
 ┌──────────────────────────────────────────────────────────────┐
 │ HEADER (h-12, sticky, bg-slate-900)                          │
-│  Engine logo + "Travel Command Center"  |  actions + toggle  │
+│  Engine logo + "Travel Command Center" + badge  |  actions   │
 ├──────────────────────────────────────────────────────────────┤
 │ HERO MAP (h-[520px], GeoMap, relative)                       │
 │  ┌─ glass KPI overlays (absolute top-left) ───────────────┐  │
@@ -72,11 +73,13 @@ Visualization-hero layout. Full-page scroll (no `h-screen`).
 │  │ 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 (ActivityCard)    │ │ Disruptions (custom)  │  │
+│  │ Escalations (custom panel)    │ │ Disruptions (custom)  │  │
 │  └───────────────────────────────┘ └──────────────────────┘  │
 │                                                              │
 │  Row 2: grid grid-cols-1 items-start gap-4 lg:grid-cols-3   │
@@ -90,13 +93,14 @@ Visualization-hero layout. Full-page scroll (no `h-screen`).
 
 - **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
 
 ### Phase 1 placeholders
 
-Phase 1 builds the header, map, glass overlays, and flight strip as real components. Only the 4 data panels below the map are placeholders:
+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
 <BaseCard>
@@ -112,11 +116,11 @@ The GeoMap renders the base world map with no data props. Glass overlays and fli
 
 ## 6. Header
 
-Compact `h-12` sticky header (`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.
 
 | Left | Right |
 |------|-------|
-| Engine logo (`GlobeAltIcon` in `bg-brand-600` square) + "ENGINE" wordmark + separator + "Travel Command Center" | ChatBar (Phase 4) + notification bell (badge count) + theme toggle (sun/moon) |
+| Engine logo (`GlobeAltIcon` in `bg-brand-600` square) + "ENGINE" wordmark + separator + "Travel Command Center" + "Powered by Agentforce" badge (Phase 4: `bg-brand-900/40 text-brand-400 rounded-full text-[10px]`) | Notification bell (badge count) + theme toggle (sun/moon) |
 
 ---
 
@@ -145,9 +149,13 @@ Compact `h-12` sticky header (`bg-slate-900 dark:bg-slate-950`).
 
 **Glass KPI overlays** — 4 pills, `absolute left-3 top-3`:
 Active Travelers (count), Spend MTD (`fmtK()`), Compliance %, Eva Resolved (count + "resolved").
-Style: `bg-black/40 backdrop-blur-md border border-white/10 rounded-lg px-3 py-1.5`
 
-**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, contextual=Boarding). Same glass styling.
+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** — `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.
 
 ---
 
@@ -157,18 +165,48 @@ Style: `bg-black/40 backdrop-blur-md border border-white/10 rounded-lg px-3 py-1
 
 ### 8a. Escalations (Row 1, 2/3 width)
 
-ActivityCard wrapped in BaseCard:
+Custom inline panel in BaseCard. Do NOT use ActivityCard — this panel has per-item "Assign to Agent" buttons.
+
+Each escalation row:
+- Status icon: `CheckCircleIcon` (complete, green), `ArrowPathIcon` (working, brand), `ClockIcon` (pending, amber)
+- Title + subtitle + timestamp
+- **"Assign to Agent" button** (Phase 4) 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")` via sonner. In Phase 2, render the button but leave the `onClick` empty — wire the toast in Phase 4.
 
 ```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>
 ```
 
-Each escalation: title, subtitle, status (`"working"` | `"pending"` | `"complete"`), timestamp.
+Data: `ESCALATION_CARDS` from sample data.
 
 ### 8b. Disruptions (Row 1, 1/3 width)
 
@@ -186,8 +224,8 @@ Data: `DISRUPTION_CARDS` from sample data.
 
 BaseCard with `maxBodyHeight={420}`. Expandable traveler cards.
 
-Each row: `Avatar` (initials) + name + department + origin → destination + `UIChip` (compliant/exception).
-Expand: 4-col grid — Flight, Hotel, Return, Destination.
+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.
 
 Data: `TRAVELER_CARDS` from sample data.
 
@@ -223,23 +261,28 @@ const spendChartData = useDataSource({
 
 ---
 
-## 9. Eva — ChatBar (Phase 4)
+## 9. Eva — ChatBar
 
-ChatBar in the header. Not a FAB or sliding panel.
+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.
 
 ```tsx
-<ChatBar
-  title="Eva"
-  placeholder="Ask about travelers, bookings, policy, spend…"
-  suggestions={CHAT_SUGGESTIONS}
-  onSend={handleChat}
-/>
+<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: "Who's traveling internationally right now?", "Show bookings pending approval", "What has Eva resolved today?", "Travelers returning this week"
 
 Define `handleChat` and `CHAT_SUGGESTIONS` at module scope.
 
+**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)
@@ -248,9 +291,10 @@ Subtle indicators, not banners.
 
 | Signal | Location |
 |--------|----------|
-| "View in Salesforce" | Traveler expanded view, booking rows (micro-link, muted text) |
-| "Salesforce updated" | After rebook/approve actions (`toast()`) |
-| "Powered by Agentforce" | ChatBar subtitle area (small badge) |
+| "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("Opening in Salesforce…")` via sonner |
+| "Assigned to Eva" | After "Assign to Agent" button click — `toast.success("Assigned to Eva")` via sonner |
 
 ---
 
@@ -285,8 +329,15 @@ Build in 4 incremental phases.
 
 ### 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.
+> Connect the dashboard to live Salesforce data using GraphQL. Read the sample data file to see which fields are needed, then build queries in `src/api/engine/queries.ts` and a hook in `src/hooks/useEngineLiveData.ts` for each object. The hook should return the same data shape as the sample data exports. Wire it into the dashboard by populating the `live` prop on each `useDataSource` call:
+>
+> ```tsx
+> const live = useEngineLiveData();
+> const markers = useDataSource({ sample: MAP_MARKERS, live: live.mapMarkers });
+> ```
+>
+> The UI should stay identical — only the data source changes.
 
 ### 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.
+> 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.

package/dist/styles/global.css

@@ -0,0 +1,238 @@
+@import '@heroui/styles';
+
+@layer base {
+  html,
+  body,
+  #root {
+    @apply min-h-screen;
+  }
+
+  body {
+    @apply antialiased bg-white;
+  }
+}
+
+@import 'tw-animate-css';
+@import 'shadcn/tailwind.css';
+
+@custom-variant dark (&:is(.dark *));
+
+@source "../components/library";
+@source "../components/pages";
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Engine brand palette */
+  --color-engine-black: #111111;
+  --color-engine-teal: #5BC8C8;
+  --color-engine-green: #3DAB5F;
+  --color-engine-coral: #FF5722;
+  --color-engine-orange: #F59E0B;
+  --color-engine-savings: #16A34A;
+  --color-engine-bg: #F7F8FA;
+  --color-engine-border: #E5E7EB;
+  --color-engine-text: #111111;
+  --color-engine-muted: #6B7280;
+  --color-engine-label: #9CA3AF;
+
+  /* Engine teal brand palette */
+  --color-brand-50:  #ECFDF9;
+  --color-brand-100: #D1FAF0;
+  --color-brand-200: #A7F3E1;
+  --color-brand-300: #6EE7C8;
+  --color-brand-400: #34D3AB;
+  --color-brand-500: #5BC8C8;
+  --color-brand-600: #0D9488;
+  --color-brand-700: #0F766E;
+  --color-brand-800: #115E59;
+  --color-brand-900: #134E4A;
+  --color-brand-950: #042F2E;
+
+  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+
+  /* Engine border radius tokens */
+  --radius-pill: 9999px;
+  --radius-card: 10px;
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/*
+ * Restore HeroUI theme variables inside the Command Center scope.
+ * shadcn redefines --muted, --accent, --accent-foreground with different
+ * semantics (bg colors vs text colors). This scope restores HeroUI's values
+ * so HeroUI components render correctly.
+ */
+.heroui-scope {
+  /* Engine HeroUI theme overrides */
+  --primary: #000000;
+  --primary-foreground: oklch(0.9911 0 0);
+  --secondary: #5BC8C8;
+  --secondary-foreground: oklch(0.2103 0.0059 285.89);
+  --success: #16A34A;
+  --success-foreground: oklch(0.9911 0 0);
+  --warning: #F59E0B;
+  --warning-foreground: oklch(0.2103 0.0059 285.89);
+  --danger: #FF5722;
+  --danger-foreground: oklch(0.9911 0 0);
+
+  --muted: oklch(0.5517 0.0138 285.94);
+  --accent: oklch(0.6204 0.195 253.83);
+  --accent-foreground: oklch(0.9911 0 0);
+  --background: oklch(0.9702 0 0);
+  --foreground: oklch(0.2103 0.0059 285.89);
+  --default: oklch(94% 0.001 286.375);
+  --default-foreground: oklch(0.2103 0.0059 285.89);
+  --border: oklch(90% 0.004 286.32);
+  --separator: oklch(92% 0.004 286.32);
+  --segment: oklch(100% 0 0);
+  --segment-foreground: oklch(0.2103 0.0059 285.89);
+  --surface: oklch(100% 0 0);
+  --surface-foreground: oklch(0.2103 0.0059 285.89);
+  --overlay: oklch(100% 0 0);
+  --overlay-foreground: oklch(0.2103 0.0059 285.89);
+  --focus: oklch(0.6204 0.195 253.83);
+  --link: oklch(0.2103 0.0059 285.89);
+}
+
+.dark .heroui-scope,
+.heroui-scope.dark {
+  --muted: oklch(70.5% 0.015 286.067);
+  --background: oklch(12% 0.005 285.823);
+  --foreground: oklch(0.9911 0 0);
+  --default: oklch(27.4% 0.006 286.033);
+  --default-foreground: oklch(0.9911 0 0);
+  --border: oklch(28% 0.006 286.033);
+  --separator: oklch(25% 0.006 286.033);
+  --segment: oklch(0.3964 0.01 285.93);
+  --segment-foreground: oklch(0.9911 0 0);
+  --surface: oklch(0.2103 0.0059 285.89);
+  --surface-foreground: oklch(0.9911 0 0);
+  --overlay: oklch(0.2103 0.0059 285.89);
+  --overlay-foreground: oklch(0.9911 0 0);
+  --warning: oklch(0.8203 0.1388 76.34);
+  --warning-foreground: oklch(0.2103 0.0059 285.89);
+  --danger: oklch(0.594 0.1967 24.63);
+  --danger-foreground: oklch(0.9911 0 0);
+  --focus: oklch(0.6204 0.195 253.83);
+  --link: oklch(0.9911 0 0);
+}
+
+/* ChatBar overlay — add horizontal padding so it doesn't hit window edges */
+body > .fixed.inset-x-0.rounded-2xl {
+  left: 1.5rem !important;
+  right: 1.5rem !important;
+}

package/package.json

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