yadflow 2.6.0 → 2.7.0

package/skills/yad-docs/templates/app/src/components/DocSections/DeploymentGuideSection.tsx

@@ -0,0 +1,104 @@
+import { Icon } from '../shared/Icon';
+
+const ENV_CONFIGS = [
+  { env: 'Staging', flags: { ENABLE_BOOKING_JOBS: true, ENABLE_PRE_TRIP_RIDER_CONFIRMATION: true, ENABLE_DRIVER_CONFIRMATION: false }, color: '#f59e0b' },
+  { env: 'Production', flags: { ENABLE_BOOKING_JOBS: false, ENABLE_PRE_TRIP_RIDER_CONFIRMATION: false, ENABLE_DRIVER_CONFIRMATION: false }, color: '#ef4444' },
+];
+
+const ROLLOUT_STEPS = [
+  { step: 'Deploy backend with all flags OFF', detail: 'Code ships but nothing executes — zero risk' },
+  { step: 'Enable ENABLE_BOOKING_JOBS in staging', detail: 'Master switch: allows BullMQ job scheduling' },
+  { step: 'Enable ENABLE_PRE_TRIP_RIDER_CONFIRMATION in staging', detail: 'Enables the 24h-before-trip rider confirmation flow' },
+  { step: 'QA validates all 11 flow paths in staging', detail: 'Full regression: happy path, cancellations, timeouts' },
+  { step: 'Enable ENABLE_BOOKING_JOBS in production', detail: 'Production rollout — monitor BullMQ dashboard and error rates' },
+  { step: 'Enable ENABLE_PRE_TRIP_RIDER_CONFIRMATION in production', detail: 'Rider confirmation goes live — monitor notification delivery' },
+  { step: 'Enable ENABLE_DRIVER_CONFIRMATION when ready', detail: 'Last phase: driver confirmation flow (currently false everywhere)' },
+];
+
+const ROLLBACK = [
+  'Set ENABLE_BOOKING_JOBS=false to disable all job scheduling immediately',
+  'Existing in-flight jobs will still process — they are idempotent',
+  'No database migration needed — booking_status field is additive, not destructive',
+  'Mobile apps degrade gracefully: they simply won\'t see booking-specific UI states',
+];
+
+export function DeploymentGuideSection() {
+  return (
+    <div className="space-y-5">
+      <div
+        className="rounded-xl border p-5"
+        style={{ background: 'rgba(20,17,24,0.5)', borderColor: 'var(--color-border-default)' }}
+      >
+        <h4 className="text-sm font-bold text-slate-200 mb-3">Environment Configuration</h4>
+        <div className="space-y-3">
+          {ENV_CONFIGS.map((env) => (
+            <div key={env.env} className="flex items-center gap-3">
+              <span
+                className="text-xs font-bold w-24 px-2 py-1 rounded text-center"
+                style={{ background: `${env.color}15`, color: env.color, border: `1px solid ${env.color}25` }}
+              >
+                {env.env}
+              </span>
+              <div className="flex flex-wrap gap-2">
+                {Object.entries(env.flags).map(([key, val]) => (
+                  <span
+                    key={key}
+                    className="text-[11px] font-mono px-2 py-0.5 rounded border"
+                    style={{
+                      color: val ? '#22c55e' : '#ef4444',
+                      background: val ? 'rgba(34,197,94,0.1)' : 'rgba(239,68,68,0.1)',
+                      borderColor: val ? 'rgba(34,197,94,0.2)' : 'rgba(239,68,68,0.2)',
+                    }}
+                  >
+                    {key}={val ? 'true' : 'false'}
+                  </span>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div
+        className="rounded-xl border p-5"
+        style={{ background: 'rgba(20,17,24,0.5)', borderColor: 'var(--color-border-default)' }}
+      >
+        <h4 className="text-sm font-bold text-slate-200 mb-3">Rollout Steps</h4>
+        <div className="space-y-3">
+          {ROLLOUT_STEPS.map((s, i) => (
+            <div key={i} className="flex items-start gap-3">
+              <div
+                className="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5"
+                style={{ background: 'rgba(123,89,230,0.15)', color: '#7b59e6' }}
+              >
+                {i + 1}
+              </div>
+              <div>
+                <div className="text-sm text-slate-200 font-medium">{s.step}</div>
+                <p className="text-xs text-slate-500 mt-0.5">{s.detail}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div
+        className="rounded-xl border p-5"
+        style={{ background: 'rgba(239,68,68,0.05)', borderColor: 'rgba(239,68,68,0.2)' }}
+      >
+        <div className="flex items-center gap-2 mb-3">
+          <Icon name="replay" size={18} className="text-red-400" />
+          <h4 className="text-sm font-bold text-red-300">Rollback Procedure</h4>
+        </div>
+        <ul className="space-y-2">
+          {ROLLBACK.map((item, i) => (
+            <li key={i} className="flex items-start gap-2">
+              <Icon name="arrow_right" size={14} className="text-red-400 mt-0.5 shrink-0" />
+              <span className="text-xs text-slate-400">{item}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/skills/yad-docs/templates/app/src/components/DocSections/DriverIntegrationSection.tsx

@@ -0,0 +1,127 @@
+import { Icon } from '../shared/Icon';
+
+const ENDPOINTS = [
+  {
+    method: 'PUT',
+    path: '/b2c/driver/trips/:tripId/booking-status',
+    body: '{ "booking_status": "BOOK_ACCEPTED" | "BOOK_DRIVER_CANCELED" }',
+    description: 'Driver updates their booking status — accept or cancel the assigned ride.',
+  },
+];
+
+const TRANSITIONS = [
+  { from: 'TRIP_BOOK_PENDING', to: 'BOOK_ACCEPTED', action: 'Driver accepts the assignment' },
+  { from: 'TRIP_BOOK_PENDING', to: 'BOOK_DRIVER_CANCELED', action: 'Driver cancels the assignment' },
+  { from: 'TRIP_BOOK_OPERATION_DRIVER_CONFIRMED', to: 'BOOK_DRIVER_CANCELED', action: 'Driver cancels after confirming' },
+];
+
+const DAC_CARDS = [
+  { action: 'confirm', description: 'Shown when driver is assigned and needs to confirm availability', triggers: 'BOOK_ACCEPTED on tap' },
+  { action: 'cancel', description: 'Shown alongside confirm — driver can decline', triggers: 'BOOK_DRIVER_CANCELED on tap' },
+  { action: 'view_ride', description: 'Shown after confirmation — ride details view', triggers: 'Opens ride detail screen' },
+];
+
+const INTEGRATION_CHECKLIST = [
+  'Handle push notification with action "confirm_driver_booking" — show confirmation DAC card',
+  'Handle push notification with action "driver_booking_timeout" — show timeout warning',
+  'Handle push notification with action "driver_booking_ops_cancelled" — remove DAC card',
+  'Handle push notification with action "booking_driver_assigned" — show new assignment card',
+  'Handle push notification with action "booking_canceled_by_rider" — remove DAC card',
+  'Implement DAC card rendering for confirm/cancel actions',
+  'Handle HTTP 409 responses (concurrent update / invalid transition)',
+  'Handle re-dispatch scenario: after driver cancel, ride goes back to dispatch queue',
+  'Handle the publishRideDispatchBookingMW side effect: new driver may be assigned',
+];
+
+export function DriverIntegrationSection() {
+  return (
+    <div className="space-y-5">
+      {ENDPOINTS.map((ep) => (
+        <div
+          key={ep.path}
+          className="rounded-xl border overflow-hidden"
+          style={{ background: 'rgba(20,17,24,0.5)', borderColor: 'var(--color-border-default)' }}
+        >
+          <div className="px-4 py-3 flex items-center gap-3 border-b" style={{ borderColor: 'var(--color-border-default)' }}>
+            <span className="text-[10px] font-bold px-2 py-0.5 rounded" style={{ background: 'rgba(251,191,36,0.15)', color: '#fbbf24' }}>
+              {ep.method}
+            </span>
+            <code className="text-sm text-slate-200 font-mono">{ep.path}</code>
+          </div>
+          <div className="px-4 py-3">
+            <p className="text-xs text-slate-400 mb-2">{ep.description}</p>
+            <span className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold">Request Body</span>
+            <pre className="mt-1 text-[11px] font-mono text-emerald-400 bg-black/30 rounded-lg px-3 py-2">{ep.body}</pre>
+          </div>
+        </div>
+      ))}
+
+      <div
+        className="rounded-xl border overflow-hidden"
+        style={{ borderColor: 'var(--color-border-default)', background: 'rgba(20,17,24,0.5)' }}
+      >
+        <div className="px-4 py-3 border-b" style={{ borderColor: 'var(--color-border-default)', background: 'rgba(255,255,255,0.03)' }}>
+          <span className="text-sm font-bold text-slate-200">Valid Driver Transitions</span>
+        </div>
+        <table className="w-full text-sm">
+          <thead style={{ background: 'rgba(255,255,255,0.05)' }}>
+            <tr>
+              <th className="px-4 py-2 text-left text-xs font-semibold text-slate-400">From</th>
+              <th className="px-4 py-2 text-center text-xs font-semibold text-slate-400"></th>
+              <th className="px-4 py-2 text-left text-xs font-semibold text-slate-400">To</th>
+              <th className="px-4 py-2 text-left text-xs font-semibold text-slate-400">Action</th>
+            </tr>
+          </thead>
+          <tbody>
+            {TRANSITIONS.map((t, i) => (
+              <tr key={i} className="border-t hover:bg-white/5 transition-colors" style={{ borderColor: 'var(--color-border-default)' }}>
+                <td className="px-4 py-2 font-mono text-[11px] text-slate-400">{t.from}</td>
+                <td className="px-4 py-2 text-center"><Icon name="arrow_forward" size={14} className="text-slate-600" /></td>
+                <td className="px-4 py-2 font-mono text-[11px] text-cyan-400">{t.to}</td>
+                <td className="px-4 py-2 text-xs text-slate-400">{t.action}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <div
+        className="rounded-xl border overflow-hidden"
+        style={{ borderColor: 'var(--color-border-default)', background: 'rgba(20,17,24,0.5)' }}
+      >
+        <div className="px-4 py-3 border-b" style={{ borderColor: 'var(--color-border-default)', background: 'rgba(255,255,255,0.03)' }}>
+          <span className="text-sm font-bold text-slate-200">DAC (Driver Action Cards)</span>
+        </div>
+        <div className="p-3 space-y-2">
+          {DAC_CARDS.map((card) => (
+            <div key={card.action} className="flex items-start gap-3 p-2.5 rounded-lg" style={{ background: 'rgba(255,255,255,0.02)' }}>
+              <Icon name="credit_card" size={16} className="text-cyan-400 mt-0.5 shrink-0" />
+              <div>
+                <div className="flex items-center gap-2">
+                  <span className="text-xs font-mono font-semibold text-slate-200">{card.action}</span>
+                  <span className="text-[10px] text-slate-500">→ {card.triggers}</span>
+                </div>
+                <p className="text-[11px] text-slate-400 mt-0.5">{card.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div
+        className="rounded-xl border p-4"
+        style={{ background: 'rgba(20,17,24,0.5)', borderColor: 'var(--color-border-default)' }}
+      >
+        <h4 className="text-sm font-bold text-slate-200 mb-3">Integration Checklist</h4>
+        <ul className="space-y-2">
+          {INTEGRATION_CHECKLIST.map((item, i) => (
+            <li key={i} className="flex items-start gap-2">
+              <Icon name="check_box_outline_blank" size={16} className="text-slate-600 mt-0.5 shrink-0" />
+              <span className="text-xs text-slate-400">{item}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/skills/yad-docs/templates/app/src/components/DocSections/ExecutiveSummarySection.tsx

@@ -0,0 +1,69 @@
+import { Icon } from '../shared/Icon';
+
+const METRICS = [
+  { label: 'Flow Paths', value: '11', icon: 'route', color: '#7b59e6' },
+  { label: 'Status Mappings', value: '12', icon: 'swap_horiz', color: '#06b6d4' },
+  { label: 'BullMQ Jobs', value: '6', icon: 'schedule', color: '#a855f7' },
+  { label: 'Feature Flags', value: '3', icon: 'flag', color: '#f59e0b' },
+];
+
+const KEY_POINTS = [
+  'Syncs internal trip status changes to a rider/driver-facing booking_status field on the Trip schema',
+  'Uses optimistic locking (updateOne with status guard) to prevent race conditions',
+  'All side effects (notifications, DAC, cleanup) are fire-and-forget — never block the response',
+  'Feature flags control rollout: ENABLE_BOOKING_JOBS, ENABLE_PRE_TRIP_RIDER_CONFIRMATION, ENABLE_DRIVER_CONFIRMATION',
+  'Two entry points: rider endpoint (PUT /rider/trips/:tripId/booking-status) and driver endpoint (PUT /b2c/driver/trips/:tripId/booking-status)',
+];
+
+export function ExecutiveSummarySection() {
+  return (
+    <div className="space-y-5">
+      <div
+        className="rounded-xl border p-5"
+        style={{ background: 'rgba(20,17,24,0.5)', borderColor: 'var(--color-border-default)' }}
+      >
+        <h4 className="text-sm font-bold text-slate-200 mb-2">What is Sync Booking Status?</h4>
+        <p className="text-sm text-slate-400 leading-relaxed">
+          The Scheduled Ride Booking Status Sync feature maintains a parallel <code className="text-xs bg-white/5 px-1.5 py-0.5 rounded text-slate-300">booking_status</code> field
+          on the Trip schema that reflects the lifecycle of a scheduled (booked) ride. When internal trip statuses change
+          (e.g., driver assigned, trip started, rider cancelled), the middleware automatically maps these to
+          booking-specific statuses that the mobile apps consume.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+        {METRICS.map((m) => (
+          <div
+            key={m.label}
+            className="rounded-lg border p-3 text-center"
+            style={{ background: 'rgba(20,17,24,0.5)', borderColor: 'var(--color-border-default)' }}
+          >
+            <div
+              className="w-8 h-8 rounded-lg flex items-center justify-center mx-auto mb-2"
+              style={{ background: `${m.color}20`, color: m.color }}
+            >
+              <Icon name={m.icon} size={18} />
+            </div>
+            <div className="text-2xl font-bold text-white">{m.value}</div>
+            <div className="text-[10px] text-slate-500 uppercase tracking-wider font-semibold mt-0.5">{m.label}</div>
+          </div>
+        ))}
+      </div>
+
+      <div
+        className="rounded-xl border p-5"
+        style={{ background: 'rgba(20,17,24,0.5)', borderColor: 'var(--color-border-default)' }}
+      >
+        <h4 className="text-sm font-bold text-slate-200 mb-3">Key Points</h4>
+        <ul className="space-y-2">
+          {KEY_POINTS.map((point, i) => (
+            <li key={i} className="flex items-start gap-2">
+              <Icon name="check_circle" size={16} className="text-emerald-400 mt-0.5 shrink-0" />
+              <span className="text-sm text-slate-400 leading-relaxed">{point}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/skills/yad-docs/templates/app/src/components/DocSections/FlowOverviewSection.tsx

@@ -0,0 +1,73 @@
+import { Icon } from '../shared/Icon';
+import { PATHS } from '../../data/paths';
+
+const CATEGORY_COLORS: Record<string, string> = {
+  success: '#22c55e',
+  'rider-cancel': '#ef4444',
+  'driver-cancel': '#f97316',
+  timeout: '#eab308',
+  ops: '#8b5cf6',
+  'active-cancel': '#ec4899',
+};
+
+export function FlowOverviewSection() {
+  const grouped = PATHS.reduce<Record<string, typeof PATHS>>((acc, path) => {
+    const cat = path.category;
+    if (!acc[cat]) acc[cat] = [];
+    acc[cat].push(path);
+    return acc;
+  }, {});
+
+  return (
+    <div className="space-y-4">
+      <div
+        className="rounded-xl border p-5"
+        style={{ background: 'rgba(20,17,24,0.5)', borderColor: 'var(--color-border-default)' }}
+      >
+        <p className="text-sm text-slate-400 leading-relaxed">
+          The booking status sync feature covers <strong className="text-white">{PATHS.length} distinct flow paths</strong> organized
+          by category. Each path represents a complete lifecycle scenario from trip creation through terminal state.
+        </p>
+      </div>
+
+      {Object.entries(grouped).map(([category, paths]) => {
+        const color = CATEGORY_COLORS[category] || '#64748b';
+        return (
+          <div key={category}>
+            <div className="flex items-center gap-2 mb-2">
+              <span
+                className="h-2 w-2 rounded-full"
+                style={{ background: color }}
+              />
+              <span className="text-xs font-bold uppercase tracking-wider" style={{ color }}>
+                {category.replace(/-/g, ' ')} ({paths.length})
+              </span>
+            </div>
+            <div className="space-y-1.5">
+              {paths.map((path) => (
+                <div
+                  key={path.id}
+                  className="flex items-center gap-3 px-3 py-2.5 rounded-lg border hover:bg-white/5 transition-colors"
+                  style={{
+                    background: 'rgba(20,17,24,0.3)',
+                    borderColor: 'var(--color-border-default)',
+                  }}
+                >
+                  <Icon name={path.icon} size={18} className={`text-[${path.color}]`} />
+                  <div className="flex-1 min-w-0">
+                    <span className="text-sm text-slate-200 font-medium">{path.label}</span>
+                    <p className="text-xs text-slate-500 truncate">{path.description}</p>
+                  </div>
+                  <span className="text-[10px] text-slate-500 font-mono">
+                    {path.steps.length} steps
+                    {path.subPaths ? ` + ${path.subPaths.length} sub-paths` : ''}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/skills/yad-docs/templates/app/src/components/DocSections/FlowPathsChecklistSection.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { Icon } from '../shared/Icon';
+import { PATHS } from '../../data/paths';
+
+const CATEGORY_COLORS: Record<string, string> = {
+  success: '#22c55e',
+  'rider-cancel': '#ef4444',
+  'driver-cancel': '#f97316',
+  timeout: '#eab308',
+  ops: '#8b5cf6',
+  'active-cancel': '#ec4899',
+};
+
+export function FlowPathsChecklistSection() {
+  const [checked, setChecked] = useState<Set<number>>(new Set());
+
+  const toggle = (id: number) => {
+    setChecked((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const total = PATHS.length;
+  const done = checked.size;
+  const pct = total > 0 ? Math.round((done / total) * 100) : 0;
+
+  return (
+    <div className="space-y-4">
+      <div
+        className="rounded-xl border p-4"
+        style={{ background: 'rgba(20,17,24,0.5)', borderColor: 'var(--color-border-default)' }}
+      >
+        <div className="flex items-center justify-between mb-3">
+          <span className="text-sm font-bold text-slate-200">Verification Progress</span>
+          <span className="text-sm font-bold" style={{ color: pct === 100 ? '#22c55e' : '#f59e0b' }}>
+            {done}/{total} ({pct}%)
+          </span>
+        </div>
+        <div className="w-full h-2 rounded-full overflow-hidden" style={{ background: 'rgba(255,255,255,0.05)' }}>
+          <div
+            className="h-full rounded-full transition-all"
+            style={{
+              width: `${pct}%`,
+              background: pct === 100 ? '#22c55e' : 'var(--color-primary)',
+            }}
+          />
+        </div>
+      </div>
+
+      <div className="space-y-1.5">
+        {PATHS.map((path) => {
+          const isChecked = checked.has(path.id);
+          const catColor = CATEGORY_COLORS[path.category] || '#64748b';
+          return (
+            <button
+              key={path.id}
+              onClick={() => toggle(path.id)}
+              className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg border text-left transition-all"
+              style={{
+                background: isChecked ? 'rgba(34,197,94,0.05)' : 'rgba(20,17,24,0.3)',
+                borderColor: isChecked ? 'rgba(34,197,94,0.2)' : 'var(--color-border-default)',
+              }}
+            >
+              <Icon
+                name={isChecked ? 'check_box' : 'check_box_outline_blank'}
+                size={20}
+                className={isChecked ? 'text-emerald-400' : 'text-slate-600'}
+              />
+              <Icon name={path.icon} size={18} className="text-slate-400" />
+              <div className="flex-1 min-w-0">
+                <span
+                  className="text-sm font-medium"
+                  style={{ color: isChecked ? '#94a3b8' : '#e2e8f0', textDecoration: isChecked ? 'line-through' : 'none' }}
+                >
+                  Path {path.id}: {path.label}
+                </span>
+              </div>
+              <span
+                className="text-[9px] font-bold px-1.5 py-0.5 rounded shrink-0"
+                style={{ background: `${catColor}15`, color: catColor }}
+              >
+                {path.category}
+              </span>
+              <span className="text-[10px] text-slate-500 font-mono shrink-0">
+                {path.steps.length}s{path.subPaths ? `+${path.subPaths.length}sp` : ''}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/skills/yad-docs/templates/app/src/components/DocSections/MiddlewareChainSection.tsx

@@ -0,0 +1,107 @@
+interface MiddlewareStep {
+  name: string;
+  description: string;
+  type: 'validate' | 'persist' | 'sideEffect' | 'notify';
+}
+
+const TYPE_COLORS = {
+  validate: { color: '#60a5fa', bg: 'rgba(96,165,250,0.1)' },
+  persist: { color: '#22c55e', bg: 'rgba(34,197,94,0.1)' },
+  sideEffect: { color: '#f59e0b', bg: 'rgba(245,158,11,0.1)' },
+  notify: { color: '#fb2576', bg: 'rgba(251,37,118,0.1)' },
+};
+
+const CHAINS: { title: string; endpoint: string; color: string; steps: MiddlewareStep[] }[] = [
+  {
+    title: 'Internal Trip Status Path',
+    endpoint: 'PUT /b2c/rider/services/v6/request',
+    color: '#7b59e6',
+    steps: [
+      { name: 'validateTripStatus', description: 'Validates trip status transition is allowed', type: 'validate' },
+      { name: 'fnUpdateBookingStatus', description: 'Maps trip status to booking_status using TRIP_STATUS_TO_BOOKING_STATUS, writes with optimistic lock', type: 'persist' },
+      { name: 'fnUpdateCancelBookingStatus', description: 'Handles cancel-specific booking status updates (rider/driver/system cancels)', type: 'persist' },
+      { name: 'fnCancelBookedTripScheduledJobs', description: 'Removes pending BullMQ jobs on cancellation', type: 'sideEffect' },
+      { name: 'fnDeleteScheduledRideDac', description: 'Deletes DAC card via Pub/Sub when trip ends or is cancelled', type: 'sideEffect' },
+      { name: 'publishScheduledRideDacMW', description: 'Publishes new DAC card for driver actions (confirm/cancel)', type: 'sideEffect' },
+      { name: 'scheduleBookingJobs', description: 'Schedules BullMQ jobs on assignment (pre-trip confirmation timers)', type: 'sideEffect' },
+    ],
+  },
+  {
+    title: 'Rider Booking Endpoint',
+    endpoint: 'PUT /rider/trips/:tripId/booking-status',
+    color: '#06b6d4',
+    steps: [
+      { name: 'validateBookingStatusTransition', description: 'Checks VALID_RIDER_TRANSITIONS map', type: 'validate' },
+      { name: 'saveBookingStatusUpdate', description: 'Persists new booking_status with optimistic lock', type: 'persist' },
+      { name: 'fnCancelBookedTripScheduledJobs', description: 'Cleans up BullMQ jobs if cancelled', type: 'sideEffect' },
+      { name: 'fnDeleteScheduledRideDac', description: 'Deletes DAC card on cancellation', type: 'sideEffect' },
+      { name: 'publishScheduledRideDacMW', description: 'Publishes updated DAC card', type: 'sideEffect' },
+      { name: 'sendBookingNotification', description: 'Sends push notification to driver about rider action', type: 'notify' },
+    ],
+  },
+  {
+    title: 'Driver Booking Endpoint',
+    endpoint: 'PUT /b2c/driver/trips/:tripId/booking-status',
+    color: '#10b981',
+    steps: [
+      { name: 'validateDriverBookingTransition', description: 'Checks VALID_DRIVER_TRANSITIONS map', type: 'validate' },
+      { name: 'saveBookingStatusUpdate', description: 'Persists new booking_status with optimistic lock', type: 'persist' },
+      { name: 'fnCancelBookedTripScheduledJobs', description: 'Cleans up BullMQ jobs on driver cancel', type: 'sideEffect' },
+      { name: 'publishRideDispatchBookingMW', description: 'Re-dispatches ride when driver cancels', type: 'sideEffect' },
+      { name: 'publishScheduledRideDacMW', description: 'Publishes/deletes DAC card', type: 'sideEffect' },
+      { name: 'sendBookingNotification', description: 'Sends push notification to rider about driver action', type: 'notify' },
+    ],
+  },
+];
+
+export function MiddlewareChainSection() {
+  return (
+    <div className="space-y-5">
+      {CHAINS.map((chain) => (
+        <div
+          key={chain.endpoint}
+          className="rounded-xl border overflow-hidden"
+          style={{ background: 'rgba(20,17,24,0.5)', borderColor: 'var(--color-border-default)' }}
+        >
+          <div className="px-4 py-3 border-b flex items-center gap-3" style={{ borderColor: 'var(--color-border-default)', background: 'rgba(255,255,255,0.03)' }}>
+            <div className="w-2 h-2 rounded-full" style={{ background: chain.color }} />
+            <span className="text-sm font-bold text-slate-200">{chain.title}</span>
+            <code className="text-[10px] font-mono text-slate-500 ml-auto">{chain.endpoint}</code>
+          </div>
+          <div className="p-3 space-y-1.5">
+            {chain.steps.map((step, i) => {
+              const tc = TYPE_COLORS[step.type];
+              return (
+                <div key={step.name} className="flex items-start gap-3 group">
+                  <div className="flex flex-col items-center pt-1">
+                    <div
+                      className="w-5 h-5 rounded-full flex items-center justify-center text-[9px] font-bold"
+                      style={{ background: tc.bg, color: tc.color }}
+                    >
+                      {i + 1}
+                    </div>
+                    {i < chain.steps.length - 1 && (
+                      <div className="w-px h-6 mt-0.5" style={{ background: 'var(--color-border-default)' }} />
+                    )}
+                  </div>
+                  <div className="flex-1 min-w-0 pb-1">
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs font-mono font-semibold text-slate-200">{step.name}</span>
+                      <span
+                        className="text-[9px] px-1.5 py-0.5 rounded font-medium"
+                        style={{ background: tc.bg, color: tc.color }}
+                      >
+                        {step.type}
+                      </span>
+                    </div>
+                    <p className="text-[11px] text-slate-500 mt-0.5">{step.description}</p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}