@schandlergarcia/sf-web-components 2.3.17 → 2.5.0

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

@@ -1,575 +0,0 @@
-# Engine Travel Command Center
-
-Product Requirements Document
-
----
-
-## 1. Product Overview
-
-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.
-
-**Build approach:** Incremental — PRD → dashboard → data → agent.
-
----
-
-## 2. Users
-
-**Primary — Sarah Chen, Travel Manager at Acme Corp**
-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` below the hero map.
-
----
-
-## 3. Brand Tokens
-
-Update `src/styles/global.css` — replace the existing `--color-brand-*` palette inside the `@theme inline` block:
-
-```css
---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;
---color-engine-savings: #16A34A;
-```
-
-Use `brand-*` Tailwind classes for brand elements. Tailwind built-in colors (green, amber, red) for status. No hardcoded hex in components.
-
-**Typography:** Inter (already `--font-sans`). **Icons:** Heroicons 2 (`@heroicons/react`).
-
----
-
-## 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. 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 `@heroui/react` 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`.
-- **Salesforce metadata:** This is an SFDX project. Metadata lives in `force-app/main/default/`. When creating permission sets, custom fields, flows, or other metadata, write standard SFDX XML files and deploy with `sf project deploy start`.
-
----
-
-## 5. Layout
-
-Visualization-hero layout. Full-page scroll (no `h-screen`).
-
-```
-┌──────────────────────────────────────────────────────────────┐
-│ 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 classes
-
-- **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
-
----
-
-## 6. Header
-
-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 (`engine_logo.png`, `h-5 w-auto brightness-0 invert` to make it white on the dark header) + "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) |
-
-```tsx
-import engineLogo from "@/assets/images/engine_logo.png";
-
-<img src={engineLogo} alt="Engine" className="h-5 w-auto brightness-0 invert" />
-```
-
----
-
-## 7. Hero Map
-
-**Component:** `GeoMap` from `@/components/library`
-
-```tsx
-<GeoMap
-  width={960}
-  height={520}
-  theme={mode === "dark" ? "dark" : "light"}
-  markers={useDataSource({ sample: MAP_MARKERS, live: live.mapMarkers })}
-  arcs={useDataSource({ sample: MAP_ARCS, live: live.mapArcs })}
-  overlays={useDataSource({ sample: MAP_OVERLAYS, live: live.mapOverlays })}
-  zoomable
-  className="h-full w-full"
-/>
-```
-
-- **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 }`
-
-**Glass KPI overlays** — 4 pills, `absolute left-3 top-3`:
-Active Travelers (count), Spend MTD (`fmtK()`), Compliance %, Eva Resolved (count + "resolved").
-
-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.
-
----
-
-## 8. Data Panels
-
-4 panels in 2 rows. Sample data imported from `src/data/engine-sample-data.js`.
-
-### 8a. Escalations (Row 1, 2/3 width)
-
-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** 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 `@heroui/react`.
-
-```tsx
-<BaseCard>
-  <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={() => toast.success("Assigned to Eva")}
-                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: `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.
-
-### 8c. Active Travelers (Row 2, 2/3 width)
-
-BaseCard with `maxBodyHeight={420}`. Expandable traveler cards.
-
-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.
-
-### 8d. Monthly Spend Trend (Row 2, 1/3 width)
-
-```tsx
-const spendChartData = useDataSource({
-  sample: MONTHLY_SPEND.map(m => ({ x: m.month, spend: m.amount })),
-  live: live.monthlySpend.map(m => ({ x: m.month, spend: m.amount })),
-});
-
-<ChartCard
-  title="Travel Spend"
-  subtitle="Monthly trend (6 months)"
-  chart={
-    <D3Chart
-      data={spendChartData}
-      renderChart={D3ChartTemplates.groupedBarChart}
-      options={{
-        xKey: "x",
-        groups: ["spend"],
-        colors: ["#5BC8C8"],
-        barRadius: 6,
-        margin: { top: 20, right: 20, bottom: 40, left: 60 },
-        showGrid: true,
-      }}
-      responsive
-      height={320}
-    />
-  }
-/>
-```
-
----
-
-## 9. Eva — Agentforce Integration
-
-Two pieces work together: a **ChatBar** for user input and the **`useEvaAgent` hook** which talks to the Agentforce Agent REST API.
-
-> **Important:** We do NOT use `AgentforceConversationClient` (the iframe widget). All agent communication goes through the REST-based Agent API via the `useEvaAgent` hook. The Vite dev server proxies the requests to avoid CORS issues.
-
-### ChatBar
-
-A command-palette strip below the hero map. NOT in the header. NOT a FAB or sliding panel.
-
-```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: "Storm warning in the Midwest — which travelers are affected?", "What's our severe weather rebooking policy?", "Notify Anna and Sofia about the Chicago delays", "Create a support case for Anna Johansson's flight"
-
-### useEvaAgent Hook
-
-The hook manages the full Agent API lifecycle — OAuth, session, messaging, cleanup.
-
-```tsx
-import useEvaAgent from "@/hooks/useEvaAgent";
-
-// Inside the component:
-const { messages, isReady, isSending, connect, sendMessage } = useEvaAgent();
-
-// Connect on mount (or on first ChatBar focus):
-useEffect(() => { connect(); }, [connect]);
-
-// Wire to ChatBar:
-const handleChat = (text: string) => {
-  sendMessage(text);
-  return { text: `Looking into: "${text}"…` };
-};
-```
-
-The hook:
-1. **Authenticates** via OAuth client-credentials (`POST /sf-oauth/services/oauth2/token`)
-2. **Creates a session** (`POST /sf-agent/einstein/ai-agent/v1/agents/{agentId}/sessions`)
-3. **Sends messages** (`POST /sf-agent/…/messages`) — returns agent response text
-4. **Ends the session** (`DELETE /sf-agent/…`) on unmount
-
-Config is in `src/config/agentApi.ts`. Proxy rules are in `vite.config.ts` (`/sf-oauth` and `/sf-agent`).
-
-Define `CHAT_SUGGESTIONS` at module scope.
-
----
-
-## 10. Salesforce Signals
-
-Subtle indicators throughout the dashboard — not banners.
-
-| 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("Opening in Salesforce…")` via `@heroui/react` |
-| "Assigned to Eva" | After "Assign to Agent" button click — `toast.success("Assigned to Eva")` via `@heroui/react` |
-
----
-
-## 11. Dark Mode
-
-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`, `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 incrementally in 3 prompts. Each prompt builds on the previous result. The user prompt (blockquote) is what you copy-paste. The agent instructions below each prompt are guidance for the AI — not shown to the user.
-
-> **CRITICAL — Rules for ALL prompts:**
-> - Do NOT read any file inside `src/components/library/` (GeoMap.jsx, ChatBar.jsx, BaseCard.jsx, useDataSource.jsx, DataModeProvider.jsx, etc.) — all props/patterns are documented here and in the build guide.
-> - Do NOT load unnecessary skills — only `command-center-builder` is needed.
-> - Do NOT run `npm run build` during the build — Vite handles it.
-> - Do NOT create files not listed in the instructions below.
-
----
-
-### Prompt 1 — Build the Dashboard
-
-> Build me a travel command center for Engine. There's a PRD with the full spec. I want the big hero map showing where all our travelers are with flight arcs, glass KPI overlays on top of the map, a flight status ticker, and then below that the main panels — escalations that need attention, active disruptions, our traveler roster with expandable details, and a spend trend chart. Hook it all up to the sample data so it looks real. Don't worry about the AI assistant or live data yet — we'll layer those on after. Make it the home page when you're done — I want to see it when I open the app.
-
-**What the agent must do:**
-
-1. Load ONLY the `command-center-builder` skill (no other skills)
-2. Read ONLY the PRD and `src/data/engine-sample-data.js` — no other files before writing
-3. Create `src/pages/EngineDashboard.tsx` with the full dashboard in ONE write
-4. Update `src/components/workspace/CommandCenter.tsx` to import EngineDashboard
-5. **Rewrite `src/pages/Home.tsx`** to render CommandCenter (it ships as Account Search — must be replaced with a 3-line wrapper)
-6. **Update `src/routes.tsx`** to set Home as the index route with label "Dashboard"
-
-**FORBIDDEN in Prompt 1:**
-- ❌ ChatBar, Eva, or any Agentforce integration (Prompt 3)
-- ❌ `useEngineLiveData` or live data wiring (Prompt 2)
-- ❌ Salesforce metadata — custom fields, platform events, Apex (Prompts 2-3)
-- ❌ Reading library component source files (GeoMap.jsx, BaseCard.jsx, etc.)
-- ❌ Loading `outer-app`, `component-library`, `command-center-project`, or other skills
-
-**Common failure:** The agent creates the dashboard file but forgets to update `Home.tsx` and `routes.tsx`, so the user still sees the Account Search page.
-
----
-
-### 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 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 (exactly 5 edits + 1 suggestion):**
-
-1. Read ONLY `EngineDashboard.tsx` and `src/hooks/useEngineLiveData.ts` — no other files
-2. **Edit 1:** Add `useEngineLiveData` import to EngineDashboard.tsx
-3. **Edit 2:** Add `const live = useEngineLiveData()` hook call
-4. **Edit 3:** Update every `useDataSource({ sample, live: [] })` to pass `live: live.xxx`
-5. **Edit 4:** Update KPI derivations to use reactive metrics
-6. **Edit 5:** ⚠️ **CRITICAL — Flip `ENABLE_SAMPLE_DATA_CACHE` from `true` to `false` in `src/lib/dataStrategy.ts`** — without this, the data never switches and the demo fails
-7. After all edits, **STOP and suggest** ONLY `Weather_Impact__c` — do NOT create it until the user says yes
-
-**FORBIDDEN in Prompt 2:**
-- ❌ **`DataModeToggle`** — do NOT add it to the UI. There is NO UI toggle. The switch is `dataStrategy.ts`. This is the most common agent mistake.
-- ❌ Rewriting `EngineDashboard.tsx` from scratch (make 5 targeted edits)
-- ❌ Renaming existing imports with `SAMPLE_` prefix (leave variable names alone, just fill in `live:` props)
-- ❌ Reading library source files (`useDataSource.jsx`, `DataModeProvider.jsx`, `DataModeToggle.jsx`)
-- ❌ ChatBar, Eva, or Agentforce (Prompt 3)
-- ❌ Running `npm run build` between edits
-- ❌ Suggesting more than one custom field (only `Weather_Impact__c`)
-- ❌ Creating extra files not listed above
-
-**Reference — what the agent should say after wiring:**
-
-*"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.
-
----
-
-### Prompt 3 — Add Agentforce
-
-> Last piece — let's add Eva, the AI travel assistant. I want a chat bar right below the map where people can ask her questions about travelers and disruptions. Also hook up the real Agentforce agent so she can actually do things. Then let's set up the backend so disruption alerts can flow through the platform in real time.
-
-**Pre-installed files (already in the project — do NOT recreate):**
-- `src/hooks/useEvaAgent.ts` — Agent API hook (OAuth → session → messages → cleanup)
-- `src/config/agentApi.ts` — hardcoded credentials and endpoints
-- `vite.config.ts` — already has `/sf-oauth` and `/sf-agent` proxy rules
-
-**What the agent must do (exactly 4 edits + 2 suggestions):**
-
-1. Read ONLY `src/pages/EngineDashboard.tsx` — no other files
-2. **Edit 1:** Add `ChatBar` and `useEvaAgent` imports
-3. **Edit 2:** Add `CHAT_SUGGESTIONS` constant at module scope
-4. **Edit 3:** Add `useEvaAgent` hook call + `handleChat` handler inside component
-5. **Edit 4:** Insert `<ChatBar />` JSX between map and data panels
-6. After adding Eva, **STOP and suggest** the platform event — wait for user confirmation
-7. After platform event, **STOP and suggest** the Apex class — wait for user confirmation
-
-**FORBIDDEN in Prompt 3:**
-- ❌ **`AgentforceConversationClient`** — do NOT use the iframe widget. We use the Agent REST API via `useEvaAgent`.
-- ❌ **Wrapper hooks** — do NOT create `useEvaChatAdapter.ts`, `useDisruptionAlerts.ts`, or any extra hook file. Use `useEvaAgent` directly.
-- ❌ **`.env` or `.env.local` files** — config is hardcoded in `src/config/agentApi.ts`
-- ❌ **Recreating `useEvaAgent.ts`, `agentApi.ts`, or proxy config** — these are pre-installed
-- ❌ Rewriting `EngineDashboard.tsx` from scratch
-- ❌ Reading library source files (including `ChatBar.jsx`)
-- ❌ Creating platform events or Apex without user confirmation
-- ❌ Loading `agentforce-test`, `agentforce-observability`, or `outer-app` skills
-
-**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?"* — 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?"* — Only create the Apex class (section 14c) AFTER the user confirms.
-
----
-
-## 14. Metadata Reference Templates
-
-Templates for the scripted metadata interactions. The agent should use these exact structures when creating files.
-
-### 14a. Custom Field — `Flight__c.Weather_Impact__c`
-
-`force-app/main/default/objects/Flight__c/fields/Weather_Impact__c.field-meta.xml`
-
-```xml
-<?xml version="1.0" encoding="UTF-8"?>
-<CustomField xmlns="http://soap.sforce.com/2006/04/metadata">
-    <fullName>Weather_Impact__c</fullName>
-    <label>Weather Impact</label>
-    <type>Picklist</type>
-    <required>false</required>
-    <valueSet>
-        <restricted>true</restricted>
-        <valueSetDefinition>
-            <sorted>false</sorted>
-            <value><fullName>None</fullName><default>true</default><label>None</label></value>
-            <value><fullName>Minor</fullName><default>false</default><label>Minor</label></value>
-            <value><fullName>Moderate</fullName><default>false</default><label>Moderate</label></value>
-            <value><fullName>Severe</fullName><default>false</default><label>Severe</label></value>
-        </valueSetDefinition>
-    </valueSet>
-</CustomField>
-```
-
-Deploy: `sf project deploy start --source-dir force-app/main/default/objects/Flight__c/fields/Weather_Impact__c.field-meta.xml`
-
-### 14b. Platform Event — `Travel_Disruption_Alert__e`
-
-Create the event object and its fields:
-
-`force-app/main/default/objects/Travel_Disruption_Alert__e/Travel_Disruption_Alert__e.object-meta.xml`
-
-```xml
-<?xml version="1.0" encoding="UTF-8"?>
-<CustomObject xmlns="http://soap.sforce.com/2006/04/metadata">
-    <label>Travel Disruption Alert</label>
-    <pluralLabel>Travel Disruption Alerts</pluralLabel>
-    <description>Published when a travel disruption is detected. Subscribers can react to real-time flight delays, weather events, and rebooking triggers.</description>
-    <deploymentStatus>Deployed</deploymentStatus>
-    <eventType>HighVolume</eventType>
-</CustomObject>
-```
-
-`force-app/main/default/objects/Travel_Disruption_Alert__e/fields/Flight_Number__c.field-meta.xml`
-
-```xml
-<?xml version="1.0" encoding="UTF-8"?>
-<CustomField xmlns="http://soap.sforce.com/2006/04/metadata">
-    <fullName>Flight_Number__c</fullName>
-    <label>Flight Number</label>
-    <type>Text</type>
-    <length>20</length>
-    <required>false</required>
-</CustomField>
-```
-
-`force-app/main/default/objects/Travel_Disruption_Alert__e/fields/Severity__c.field-meta.xml`
-
-```xml
-<?xml version="1.0" encoding="UTF-8"?>
-<CustomField xmlns="http://soap.sforce.com/2006/04/metadata">
-    <fullName>Severity__c</fullName>
-    <label>Severity</label>
-    <type>Text</type>
-    <length>20</length>
-    <required>false</required>
-</CustomField>
-```
-
-`force-app/main/default/objects/Travel_Disruption_Alert__e/fields/Description__c.field-meta.xml`
-
-```xml
-<?xml version="1.0" encoding="UTF-8"?>
-<CustomField xmlns="http://soap.sforce.com/2006/04/metadata">
-    <fullName>Description__c</fullName>
-    <label>Description</label>
-    <type>LongTextArea</type>
-    <length>1000</length>
-    <visibleLines>3</visibleLines>
-    <required>false</required>
-</CustomField>
-```
-
-Deploy: `sf project deploy start --source-dir force-app/main/default/objects/Travel_Disruption_Alert__e`
-
-### 14c. Apex Class — `TravelDisruptionEventService`
-
-`force-app/main/default/classes/TravelDisruptionEventService.cls`
-
-```apex
-public with sharing class TravelDisruptionEventService {
-
-    public static void publishDisruptionAlerts(List<Disruption__c> disruptions) {
-        List<Travel_Disruption_Alert__e> events = new List<Travel_Disruption_Alert__e>();
-
-        for (Disruption__c d : disruptions) {
-            events.add(new Travel_Disruption_Alert__e(
-                Flight_Number__c = d.Flight_Number__c,
-                Severity__c      = d.Severity__c,
-                Description__c   = d.Description__c
-            ));
-        }
-
-        if (!events.isEmpty()) {
-            List<Database.SaveResult> results = EventBus.publish(events);
-            for (Database.SaveResult sr : results) {
-                if (!sr.isSuccess()) {
-                    for (Database.Error err : sr.getErrors()) {
-                        System.debug(LoggingLevel.ERROR,
-                            'Failed to publish Travel_Disruption_Alert__e: ' + err.getMessage());
-                    }
-                }
-            }
-        }
-    }
-}
-```
-
-`force-app/main/default/classes/TravelDisruptionEventService.cls-meta.xml`
-
-```xml
-<?xml version="1.0" encoding="UTF-8"?>
-<ApexClass xmlns="http://soap.sforce.com/2006/04/metadata">
-    <apiVersion>62.0</apiVersion>
-    <status>Active</status>
-</ApexClass>
-```
-
-Deploy: `sf project deploy start --source-dir force-app/main/default/classes/TravelDisruptionEventService.cls --test-level NoTestRun`