yadflow 2.6.0 → 2.7.0

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

@@ -0,0 +1,106 @@
+import { Icon } from '../shared/Icon';
+
+const METRICS = [
+  {
+    name: 'booking_status_update_rate',
+    type: 'Counter',
+    description: 'Number of booking status updates per minute',
+    alert: '> 500/min sustained → investigate traffic spike',
+    source: 'fnUpdateBookingStatus middleware',
+  },
+  {
+    name: 'optimistic_lock_failure_rate',
+    type: 'Counter',
+    description: 'Number of modifiedCount: 0 responses',
+    alert: '> 5% of total updates → investigate concurrent access patterns',
+    source: 'Trip.updateOne with booking_status guard',
+  },
+  {
+    name: 'bullmq_job_processing_time',
+    type: 'Histogram',
+    description: 'Time from job scheduled to job completed',
+    alert: 'p99 > 30s → check Redis latency and worker health',
+    source: 'BullMQ worker event listeners',
+  },
+  {
+    name: 'bullmq_queue_depth',
+    type: 'Gauge',
+    description: 'Number of waiting jobs in booking-trips queue',
+    alert: '> 100 waiting → workers may be stuck or undersized',
+    source: 'BullMQ queue.getWaitingCount()',
+  },
+  {
+    name: 'notification_delivery_failures',
+    type: 'Counter',
+    description: 'Failed push notification sends',
+    alert: '> 10% failure rate → check FCM/APNS credentials',
+    source: 'sendBookingNotificationWithConfig .catch()',
+  },
+  {
+    name: 'dac_pubsub_publish_failures',
+    type: 'Counter',
+    description: 'Failed DAC Pub/Sub publishes',
+    alert: 'Any sustained failures → check GCP Pub/Sub health',
+    source: 'publishScheduledRideDacMW',
+  },
+];
+
+const DASHBOARD_PANELS = [
+  'Booking status distribution (pie chart: terminal vs active)',
+  'Update rate over time (time series: last 24h)',
+  'Optimistic lock failure ratio (single stat + trend)',
+  'BullMQ queue depth and processing rate (dual axis)',
+  'Notification delivery success rate (gauge)',
+  'Top error codes by frequency (bar chart)',
+];
+
+export function MonitoringAlertingSection() {
+  return (
+    <div className="space-y-5">
+      <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">Key Metrics & Alert Thresholds</span>
+        </div>
+        <div className="divide-y" style={{ borderColor: 'var(--color-border-default)' }}>
+          {METRICS.map((m) => (
+            <div key={m.name} className="p-4 hover:bg-white/5 transition-colors" style={{ borderColor: 'var(--color-border-default)' }}>
+              <div className="flex items-center gap-2 mb-1">
+                <code className="text-xs font-mono text-cyan-400">{m.name}</code>
+                <span
+                  className="text-[9px] px-1.5 py-0.5 rounded font-medium"
+                  style={{ background: 'rgba(255,255,255,0.05)', color: 'var(--color-text-muted)' }}
+                >
+                  {m.type}
+                </span>
+              </div>
+              <p className="text-xs text-slate-400 mb-1.5">{m.description}</p>
+              <div className="flex items-start gap-2">
+                <Icon name="notifications_active" size={12} className="text-amber-400 mt-0.5" />
+                <span className="text-[11px] text-amber-300">{m.alert}</span>
+              </div>
+              <div className="text-[10px] text-slate-600 mt-1">Source: {m.source}</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">Grafana Dashboard Panels</h4>
+        <div className="space-y-1.5">
+          {DASHBOARD_PANELS.map((panel, i) => (
+            <div key={i} className="flex items-center gap-2">
+              <Icon name="dashboard" size={14} className="text-slate-600" />
+              <span className="text-xs text-slate-400">{panel}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,102 @@
+import { DEEPLINK_ACTIONS } from '../../data/referenceData';
+
+const PUSH_PAYLOAD_EXAMPLE = {
+  notification: {
+    title: '{{ localized_title }}',
+    body: '{{ localized_body }}',
+  },
+  data: {
+    action: 'confirm_booking',
+    trip_id: '{{ trip._id }}',
+    deeplink: 'yassir://booking/confirm?tripId={{ trip._id }}',
+  },
+};
+
+const LOCALIZATION_KEYS = [
+  { action: 'confirm_booking', titleKey: 'booking.confirm.title', bodyKey: 'booking.confirm.body', description: 'Asks rider to confirm their scheduled ride' },
+  { action: 'booking_timeout', titleKey: 'booking.timeout.title', bodyKey: 'booking.timeout.body', description: 'Warns rider their confirmation window is closing' },
+  { action: 'booking_cancelled', titleKey: 'booking.cancelled.title', bodyKey: 'booking.cancelled.body', description: 'Informs rider booking was cancelled' },
+  { action: 'confirm_driver_booking', titleKey: 'driver.booking.confirm.title', bodyKey: 'driver.booking.confirm.body', description: 'Asks driver to confirm availability' },
+  { action: 'booking_driver_assigned', titleKey: 'driver.booking.assigned.title', bodyKey: 'driver.booking.assigned.body', description: 'Notifies driver of new assignment' },
+  { action: 'booking_driver_assigned_rider', titleKey: 'booking.driver_assigned.title', bodyKey: 'booking.driver_assigned.body', description: 'Notifies rider that driver is assigned' },
+  { action: 'booking_driver_confirmed_rider', titleKey: 'booking.driver_confirmed.title', bodyKey: 'booking.driver_confirmed.body', description: 'Notifies rider that driver confirmed' },
+];
+
+export function NotificationLocalizationSection() {
+  const riderActions = DEEPLINK_ACTIONS.filter((a) => a.target === 'rider');
+  const driverActions = DEEPLINK_ACTIONS.filter((a) => a.target === 'driver');
+
+  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">Push Notification Payload Format</h4>
+        <p className="text-xs text-slate-400 mb-3">
+          All booking notifications use <code className="text-xs bg-white/5 px-1 rounded text-slate-300">sendBookingNotificationWithConfig</code> which
+          wraps the standard notification service. The payload follows this structure:
+        </p>
+        <pre className="text-[11px] font-mono text-emerald-400 bg-black/30 rounded-lg p-3 overflow-x-auto">
+          {JSON.stringify(PUSH_PAYLOAD_EXAMPLE, null, 2)}
+        </pre>
+      </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">Localization Keys</span>
+        </div>
+        <table className="w-full text-sm">
+          <thead>
+            <tr style={{ background: 'rgba(255,255,255,0.05)' }}>
+              <th className="px-4 py-2 text-left text-xs font-semibold text-slate-400">Action</th>
+              <th className="px-4 py-2 text-left text-xs font-semibold text-slate-400">Title Key</th>
+              <th className="px-4 py-2 text-left text-xs font-semibold text-slate-400">Body Key</th>
+            </tr>
+          </thead>
+          <tbody>
+            {LOCALIZATION_KEYS.map((k) => (
+              <tr key={k.action} 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-cyan-400">{k.action}</td>
+                <td className="px-4 py-2 font-mono text-[11px] text-slate-400">{k.titleKey}</td>
+                <td className="px-4 py-2 font-mono text-[11px] text-slate-400">{k.bodyKey}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </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">Action Summary</h4>
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <span className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-2 block">
+              Rider ({riderActions.length})
+            </span>
+            <div className="space-y-1">
+              {riderActions.map((a) => (
+                <div key={a.value} className="text-[11px] font-mono text-slate-400">{a.value}</div>
+              ))}
+            </div>
+          </div>
+          <div>
+            <span className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-2 block">
+              Driver ({driverActions.length})
+            </span>
+            <div className="space-y-1">
+              {driverActions.map((a) => (
+                <div key={a.value} className="text-[11px] font-mono text-slate-400">{a.value}</div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,133 @@
+import { Icon } from '../shared/Icon';
+
+const PHASES = [
+  {
+    phase: 'Phase 1 — Foundation',
+    status: 'completed',
+    color: '#22c55e',
+    items: [
+      'booking_status field added to Trip schema',
+      'TRIP_STATUS_TO_BOOKING_STATUS mapping (12 entries)',
+      'fnUpdateBookingStatus middleware on internal trip updates',
+      'Rider booking status endpoint (confirm/unconfirm/cancel)',
+      'Driver booking status endpoint (accept/cancel)',
+    ],
+  },
+  {
+    phase: 'Phase 2 — Scheduled Jobs',
+    status: 'in-staging',
+    color: '#f59e0b',
+    items: [
+      'BullMQ job scheduling for pre-trip confirmations',
+      'Rider confirmation timeout chain (24h → 30min → 15min)',
+      'Ops intervention window for unconfirmed bookings',
+      'Job cleanup on cancellation/completion',
+    ],
+  },
+  {
+    phase: 'Phase 3 — Driver Confirmation',
+    status: 'planned',
+    color: '#8b5cf6',
+    items: [
+      'ENABLE_DRIVER_CONFIRMATION flag activation',
+      'Driver confirmation timeout chain (40min → 5min → 10min)',
+      'Fast-track auto-confirmation for imminent rides',
+      'handleBookAssigned decision tree (time threshold logic)',
+    ],
+  },
+  {
+    phase: 'Phase 4 — Enhancements',
+    status: 'planned',
+    color: '#64748b',
+    items: [
+      'Ops dashboard for booking status monitoring',
+      'Analytics events for booking funnel tracking',
+      'Rider/driver app booking status history view',
+      'Automated reporting for cancellation patterns',
+    ],
+  },
+];
+
+const STATUS_COLORS: Record<string, { color: string; bg: string; label: string }> = {
+  completed: { color: '#22c55e', bg: 'rgba(34,197,94,0.1)', label: 'Completed' },
+  'in-staging': { color: '#f59e0b', bg: 'rgba(245,158,11,0.1)', label: 'In Staging' },
+  planned: { color: '#8b5cf6', bg: 'rgba(139,92,246,0.1)', label: 'Planned' },
+};
+
+const RISKS = [
+  { risk: 'Redis downtime blocks all BullMQ jobs', mitigation: 'Redis HA setup + fallback to manual ops processing', level: 'high' },
+  { risk: 'Mobile app not handling new booking statuses', mitigation: 'Graceful degradation — unknown statuses treated as pending', level: 'medium' },
+  { risk: 'Notification service rate limiting', mitigation: 'Fire-and-forget pattern prevents blocking; add retry queue later', level: 'low' },
+];
+
+export function PMRoadmapSection() {
+  return (
+    <div className="space-y-5">
+      {PHASES.map((phase) => {
+        const sc = STATUS_COLORS[phase.status];
+        return (
+          <div
+            key={phase.phase}
+            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 justify-between" style={{ borderColor: 'var(--color-border-default)', background: 'rgba(255,255,255,0.03)' }}>
+              <div className="flex items-center gap-2">
+                <div className="w-2 h-2 rounded-full" style={{ background: phase.color }} />
+                <span className="text-sm font-bold text-slate-200">{phase.phase}</span>
+              </div>
+              <span
+                className="text-[10px] font-bold px-2 py-0.5 rounded"
+                style={{ background: sc.bg, color: sc.color }}
+              >
+                {sc.label}
+              </span>
+            </div>
+            <ul className="p-4 space-y-1.5">
+              {phase.items.map((item, i) => (
+                <li key={i} className="flex items-center gap-2">
+                  <Icon
+                    name={phase.status === 'completed' ? 'check_circle' : 'radio_button_unchecked'}
+                    size={14}
+                    className={phase.status === 'completed' ? 'text-emerald-400' : 'text-slate-600'}
+                  />
+                  <span className="text-xs text-slate-400">{item}</span>
+                </li>
+              ))}
+            </ul>
+          </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">Risk Register</h4>
+        <div className="space-y-2">
+          {RISKS.map((r, i) => (
+            <div
+              key={i}
+              className="flex items-start gap-3 p-2.5 rounded-lg"
+              style={{ background: 'rgba(255,255,255,0.02)' }}
+            >
+              <span
+                className="text-[9px] font-bold uppercase px-1.5 py-0.5 rounded shrink-0 mt-0.5"
+                style={{
+                  color: r.level === 'high' ? '#ef4444' : r.level === 'medium' ? '#f59e0b' : '#22c55e',
+                  background: r.level === 'high' ? 'rgba(239,68,68,0.1)' : r.level === 'medium' ? 'rgba(245,158,11,0.1)' : 'rgba(34,197,94,0.1)',
+                }}
+              >
+                {r.level}
+              </span>
+              <div>
+                <div className="text-xs text-slate-300">{r.risk}</div>
+                <div className="text-[11px] text-slate-500 mt-0.5">Mitigation: {r.mitigation}</div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,91 @@
+import { Icon } from '../shared/Icon';
+
+const SCENARIOS = [
+  {
+    name: 'Concurrent Booking Updates',
+    description: 'Simulate multiple status updates hitting the same trip simultaneously',
+    expected: 'Only one succeeds (optimistic lock), others skip silently with modifiedCount: 0',
+    metric: '< 50ms p99 for updateOne with status guard',
+  },
+  {
+    name: 'BullMQ Job Throughput',
+    description: 'Schedule 1000 confirmation jobs within 1 minute',
+    expected: 'All jobs processed within their delay windows, no job drops',
+    metric: 'Queue depth returns to 0 within expected timeframe + 10% buffer',
+  },
+  {
+    name: 'Notification Burst',
+    description: 'Trigger 500 booking notifications simultaneously',
+    expected: 'All notifications delivered via FCM/APNS, fire-and-forget pattern prevents blocking',
+    metric: '< 200ms for notification dispatch (excludes delivery)',
+  },
+  {
+    name: 'DAC Pub/Sub Latency',
+    description: 'Publish/delete 100 DAC cards in rapid succession',
+    expected: 'All Pub/Sub messages acknowledged within timeout',
+    metric: '< 100ms per Pub/Sub publish',
+  },
+  {
+    name: 'Full Flow Path Execution',
+    description: 'Execute all 11 flow paths sequentially with realistic delays',
+    expected: 'All paths reach terminal state with correct booking_status',
+    metric: 'No memory leaks, no connection pool exhaustion',
+  },
+];
+
+const KEY_METRICS = [
+  { metric: 'MongoDB updateOne (with guard)', target: '< 10ms p50, < 50ms p99', icon: 'storage' },
+  { metric: 'BullMQ job scheduling', target: '< 5ms per add()', icon: 'schedule' },
+  { metric: 'Pub/Sub publish', target: '< 100ms per message', icon: 'cloud_upload' },
+  { metric: 'API endpoint response', target: '< 200ms p99 (end-to-end)', icon: 'speed' },
+];
+
+export function PerformanceTestingSection() {
+  return (
+    <div className="space-y-5">
+      <div className="grid grid-cols-2 gap-3">
+        {KEY_METRICS.map((m) => (
+          <div
+            key={m.metric}
+            className="rounded-lg border p-3"
+            style={{ background: 'rgba(20,17,24,0.5)', borderColor: 'var(--color-border-default)' }}
+          >
+            <Icon name={m.icon} size={18} className="text-cyan-400 mb-2" />
+            <div className="text-xs text-slate-200 font-medium">{m.metric}</div>
+            <div className="text-[11px] text-emerald-400 font-mono mt-1">{m.target}</div>
+          </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">Load Test Scenarios</span>
+        </div>
+        <div className="divide-y" style={{ borderColor: 'var(--color-border-default)' }}>
+          {SCENARIOS.map((s) => (
+            <div key={s.name} className="p-4 hover:bg-white/5 transition-colors" style={{ borderColor: 'var(--color-border-default)' }}>
+              <div className="text-sm font-semibold text-slate-200 mb-1">{s.name}</div>
+              <p className="text-xs text-slate-400 mb-2">{s.description}</p>
+              <div className="flex flex-wrap gap-3">
+                <span className="text-[10px] text-slate-500">
+                  <strong className="text-slate-400">Expected:</strong> {s.expected}
+                </span>
+              </div>
+              <div className="mt-1.5">
+                <span
+                  className="text-[10px] font-mono px-2 py-0.5 rounded border"
+                  style={{ background: 'rgba(34,197,94,0.1)', borderColor: 'rgba(34,197,94,0.2)', color: '#22c55e' }}
+                >
+                  Target: {s.metric}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,99 @@
+import { Icon } from '../shared/Icon';
+
+const ENDPOINTS = [
+  {
+    method: 'PUT',
+    path: '/rider/trips/:tripId/booking-status',
+    body: '{ "booking_status": "BOOK_CONFIRMED" | "BOOK_UNCONFIRMED" | "RIDER_CANCELED" }',
+    description: 'Rider updates their booking status — confirm, decline, or cancel.',
+  },
+];
+
+const TRANSITIONS = [
+  { from: 'TRIP_BOOK_PENDING', to: 'BOOK_CONFIRMED', action: 'Rider confirms the booking' },
+  { from: 'TRIP_BOOK_PENDING', to: 'BOOK_UNCONFIRMED', action: 'Rider declines (maps to BOOK_RIDER_CANCELED)' },
+  { from: 'TRIP_BOOK_PENDING', to: 'RIDER_CANCELED', action: 'Rider cancels before confirmation' },
+  { from: 'TRIP_BOOK_RIDER_CONFIRMED', to: 'RIDER_CANCELED', action: 'Rider cancels after confirming' },
+];
+
+const INTEGRATION_CHECKLIST = [
+  'Handle push notification with action "confirm_booking" — deep link to booking confirmation screen',
+  'Handle push notification with action "booking_timeout" — show warning that confirmation window is closing',
+  'Handle push notification with action "booking_cancelled" — show cancellation screen',
+  'Handle push notification with action "booking_driver_assigned_rider" — show driver info',
+  'Handle push notification with action "booking_driver_confirmed_rider" — show confirmed status',
+  'Handle push notification with action "booking_canceled_by_driver" — show re-assignment pending',
+  'Implement booking status polling or WebSocket for real-time status updates',
+  'Handle HTTP 409 responses gracefully (concurrent update / invalid transition)',
+  'Handle HTTP 404 for non-booked trips (is_booked: false)',
+];
+
+export function RiderIntegrationSection() {
+  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 Rider 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 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/SecuritySection.tsx

@@ -0,0 +1,74 @@
+import { Icon } from '../shared/Icon';
+
+const SECURITY_LAYERS = [
+  {
+    layer: 'Authentication',
+    items: [
+      { control: 'JWT token validation on all endpoints', status: 'active' },
+      { control: 'Role-based access: rider endpoints require rider token, driver endpoints require driver token', status: 'active' },
+      { control: 'Trip ownership check: rider can only update their own trips', status: 'active' },
+    ],
+  },
+  {
+    layer: 'Authorization',
+    items: [
+      { control: 'VALID_RIDER_TRANSITIONS map restricts which statuses a rider can set', status: 'active' },
+      { control: 'VALID_DRIVER_TRANSITIONS map restricts which statuses a driver can set', status: 'active' },
+      { control: 'Terminal status guard prevents modifications to completed/cancelled bookings', status: 'active' },
+    ],
+  },
+  {
+    layer: 'Data Integrity',
+    items: [
+      { control: 'Optimistic locking via updateOne with booking_status guard', status: 'active' },
+      { control: 'booking_status_history array provides audit trail', status: 'active' },
+      { control: 'is_booked flag check prevents non-scheduled trips from using booking endpoints', status: 'active' },
+    ],
+  },
+  {
+    layer: 'Input Validation',
+    items: [
+      { control: 'Booking status value validated against enum (Joi/express-validator)', status: 'active' },
+      { control: 'Trip ID format validation (MongoDB ObjectId)', status: 'active' },
+      { control: 'Request body schema validation on booking status endpoints', status: 'active' },
+    ],
+  },
+  {
+    layer: 'Rate Limiting',
+    items: [
+      { control: 'API gateway rate limiting on booking endpoints', status: 'active' },
+      { control: 'BullMQ job deduplication prevents duplicate scheduling', status: 'active' },
+      { control: 'Notification throttling via sendBookingNotificationWithConfig', status: 'active' },
+    ],
+  },
+];
+
+export function SecuritySection() {
+  return (
+    <div className="space-y-4">
+      {SECURITY_LAYERS.map((layer) => (
+        <div
+          key={layer.layer}
+          className="rounded-xl border overflow-hidden"
+          style={{ background: 'rgba(20,17,24,0.5)', borderColor: 'var(--color-border-default)' }}
+        >
+          <div
+            className="px-4 py-2.5 border-b flex items-center gap-2"
+            style={{ borderColor: 'var(--color-border-default)', background: 'rgba(255,255,255,0.03)' }}
+          >
+            <Icon name="shield" size={16} className="text-emerald-400" />
+            <span className="text-sm font-bold text-slate-200">{layer.layer}</span>
+          </div>
+          <ul className="p-3 space-y-1.5">
+            {layer.items.map((item) => (
+              <li key={item.control} className="flex items-center gap-2 px-1">
+                <Icon name="check_circle" size={14} className="text-emerald-400 shrink-0" />
+                <span className="text-xs text-slate-400">{item.control}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  );
+}