yadflow 2.6.0 → 2.8.0

package/skills/yad-docs/templates/app/src/components/DocLayout/RoleCard.tsx

@@ -0,0 +1,67 @@
+import { useNavigate } from 'react-router-dom';
+import { Icon } from '../shared/Icon';
+import type { RoleConfig } from '../../data/roles';
+
+interface RoleCardProps {
+  role: RoleConfig;
+}
+
+export function RoleCard({ role }: RoleCardProps) {
+  const navigate = useNavigate();
+
+  return (
+    <button
+      onClick={() => navigate(`/docs/${role.slug}`)}
+      className="group text-left rounded-xl border p-5 transition-all hover:border-opacity-60"
+      style={{
+        background: 'rgba(20,17,24,0.5)',
+        borderColor: 'var(--color-border-default)',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.borderColor = `${role.color}50`;
+        e.currentTarget.style.background = `${role.color}08`;
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.borderColor = 'var(--color-border-default)';
+        e.currentTarget.style.background = 'rgba(20,17,24,0.5)';
+      }}
+    >
+      <div className="flex items-start justify-between mb-3">
+        <div
+          className="w-11 h-11 rounded-xl flex items-center justify-center"
+          style={{ background: `${role.color}20`, color: role.color }}
+        >
+          <Icon name={role.icon} size={24} />
+        </div>
+        <Icon
+          name="arrow_forward"
+          size={18}
+          className="text-slate-600 group-hover:text-slate-300 transition-colors mt-1"
+        />
+      </div>
+      <h3 className="text-white font-bold font-display mb-1">{role.label}</h3>
+      <p className="text-xs text-slate-400 leading-relaxed mb-3">{role.description}</p>
+      <div className="flex items-center gap-2">
+        <span
+          className="text-[10px] font-bold px-2 py-0.5 rounded border"
+          style={{
+            color: role.color,
+            background: `${role.color}15`,
+            borderColor: `${role.color}25`,
+          }}
+        >
+          {role.sectionIds.length} sections
+        </span>
+        <span
+          className="text-[10px] font-medium px-2 py-0.5 rounded border text-slate-400"
+          style={{
+            background: 'rgba(255,255,255,0.03)',
+            borderColor: 'var(--color-border-default)',
+          }}
+        >
+          {role.relevantPathIds.length} flow paths
+        </span>
+      </div>
+    </button>
+  );
+}

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

@@ -0,0 +1,108 @@
+import { Icon } from '../shared/Icon';
+
+const ENDPOINTS = [
+  {
+    method: 'PUT',
+    path: '/b2c/rider/services/v6/request',
+    description: 'Internal trip status update — triggers fnUpdateBookingStatus middleware',
+    middleware: [
+      'validateTripStatus',
+      'fnUpdateBookingStatus',
+      'fnUpdateCancelBookingStatus',
+      'fnCancelBookedTripScheduledJobs',
+      'fnDeleteScheduledRideDac',
+      'publishScheduledRideDacMW',
+      'scheduleBookingJobs',
+    ],
+    category: 'rider',
+  },
+  {
+    method: 'PUT',
+    path: '/rider/trips/:tripId/booking-status',
+    description: 'Rider booking status update — confirmation, unconfirmation, cancellation',
+    middleware: [
+      'validateBookingStatusTransition',
+      'saveBookingStatusUpdate',
+      'fnCancelBookedTripScheduledJobs',
+      'fnDeleteScheduledRideDac',
+      'publishScheduledRideDacMW',
+      'sendBookingNotification',
+    ],
+    category: 'rider',
+  },
+  {
+    method: 'PUT',
+    path: '/b2c/driver/trips/:tripId/booking-status',
+    description: 'Driver booking status update — accept or cancel assigned ride',
+    middleware: [
+      'validateDriverBookingTransition',
+      'saveBookingStatusUpdate',
+      'fnCancelBookedTripScheduledJobs',
+      'publishRideDispatchBookingMW',
+      'publishScheduledRideDacMW',
+      'sendBookingNotification',
+    ],
+    category: 'driver',
+  },
+];
+
+export function ApiReferenceSection() {
+  return (
+    <div className="space-y-4">
+      {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: ep.method === 'PUT' ? 'rgba(251,191,36,0.15)' : 'rgba(96,165,250,0.15)',
+                color: ep.method === 'PUT' ? '#fbbf24' : '#60a5fa',
+              }}
+            >
+              {ep.method}
+            </span>
+            <code className="text-sm text-slate-200 font-mono">{ep.path}</code>
+            <span
+              className="ml-auto text-[10px] uppercase tracking-wider font-semibold px-2 py-0.5 rounded"
+              style={{
+                color: ep.category === 'rider' ? '#7b59e6' : '#06b6d4',
+                background: ep.category === 'rider' ? 'rgba(123,89,230,0.1)' : 'rgba(6,182,212,0.1)',
+              }}
+            >
+              {ep.category}
+            </span>
+          </div>
+          <div className="px-4 py-2.5">
+            <p className="text-xs text-slate-400 mb-3">{ep.description}</p>
+            <div className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-2">
+              Middleware Chain ({ep.middleware.length})
+            </div>
+            <div className="flex flex-wrap gap-1.5">
+              {ep.middleware.map((mw, i) => (
+                <span key={mw} className="inline-flex items-center gap-1">
+                  <span
+                    className="px-2 py-1 rounded text-[11px] font-mono border"
+                    style={{
+                      background: 'rgba(255,255,255,0.03)',
+                      borderColor: 'var(--color-border-default)',
+                      color: '#94a3b8',
+                    }}
+                  >
+                    {mw}
+                  </span>
+                  {i < ep.middleware.length - 1 && (
+                    <Icon name="arrow_forward" size={12} className="text-slate-600" />
+                  )}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,73 @@
+import { Icon } from '../shared/Icon';
+
+const CANCELABILITY_RULES = [
+  { status: 'TRIP_BOOK_PENDING', riderCancel: true, driverCancel: false, opsCancel: true, note: 'Before assignment — rider or ops can cancel freely' },
+  { status: 'TRIP_BOOK_RIDER_CONFIRMED', riderCancel: true, driverCancel: false, opsCancel: true, note: 'Rider confirmed but no driver yet' },
+  { status: 'TRIP_BOOK_OPERATION_DRIVER_CONFIRMED', riderCancel: true, driverCancel: true, opsCancel: true, note: 'Both confirmed — either party can still cancel' },
+  { status: 'TRIP_BOOK_FINISHED', riderCancel: false, driverCancel: false, opsCancel: false, note: 'Terminal: trip completed' },
+  { status: 'TRIP_BOOK_OPERATION_RIDER_CANCELED', riderCancel: false, driverCancel: false, opsCancel: false, note: 'Terminal: rider cancelled' },
+  { status: 'TRIP_BOOK_OPERATION_DRIVER_CANCELED', riderCancel: false, driverCancel: false, opsCancel: false, note: 'Terminal: driver cancelled' },
+  { status: 'TRIP_BOOK_SYSTEM_CANCELED', riderCancel: false, driverCancel: false, opsCancel: false, note: 'Terminal: system auto-cancelled (timeout)' },
+];
+
+function CancelBadge({ allowed }: { allowed: boolean }) {
+  return allowed ? (
+    <span className="inline-flex items-center gap-0.5 text-emerald-400 text-[11px] font-medium">
+      <Icon name="check_circle" size={13} /> Yes
+    </span>
+  ) : (
+    <span className="inline-flex items-center gap-0.5 text-slate-600 text-[11px]">
+      <Icon name="block" size={13} /> No
+    </span>
+  );
+}
+
+export function CancelabilitySection() {
+  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)' }}
+      >
+        <p className="text-sm text-slate-400 leading-relaxed">
+          Cancellation is only possible before a booking reaches a <strong className="text-white">terminal state</strong>.
+          The terminal status guard in <code className="text-xs bg-white/5 px-1 rounded text-slate-300">fnUpdateBookingStatus</code> prevents
+          any further transitions once a booking is finished, cancelled by rider/driver, or auto-cancelled by the system.
+        </p>
+      </div>
+
+      <div
+        className="rounded-xl border overflow-hidden"
+        style={{ borderColor: 'var(--color-border-default)', background: 'rgba(20,17,24,0.5)' }}
+      >
+        <table className="w-full text-sm">
+          <thead style={{ background: 'rgba(255,255,255,0.05)' }}>
+            <tr>
+              <th className="px-4 py-2.5 text-left text-xs font-semibold text-slate-400">Booking Status</th>
+              <th className="px-4 py-2.5 text-center text-xs font-semibold text-slate-400">Rider</th>
+              <th className="px-4 py-2.5 text-center text-xs font-semibold text-slate-400">Driver</th>
+              <th className="px-4 py-2.5 text-center text-xs font-semibold text-slate-400">Ops</th>
+            </tr>
+          </thead>
+          <tbody>
+            {CANCELABILITY_RULES.map((rule) => (
+              <tr
+                key={rule.status}
+                className="border-t hover:bg-white/5 transition-colors"
+                style={{ borderColor: 'var(--color-border-default)' }}
+              >
+                <td className="px-4 py-2.5">
+                  <div className="font-mono text-xs text-slate-300">{rule.status}</div>
+                  <div className="text-[10px] text-slate-500 mt-0.5">{rule.note}</div>
+                </td>
+                <td className="px-4 py-2.5 text-center"><CancelBadge allowed={rule.riderCancel} /></td>
+                <td className="px-4 py-2.5 text-center"><CancelBadge allowed={rule.driverCancel} /></td>
+                <td className="px-4 py-2.5 text-center"><CancelBadge allowed={rule.opsCancel} /></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,177 @@
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Icon } from '../shared/Icon';
+
+interface Incident {
+  title: string;
+  severity: 'P1' | 'P2' | 'P3';
+  symptoms: string[];
+  diagnosis: string[];
+  resolution: string[];
+  escalation: string;
+}
+
+const SEVERITY_COLORS = {
+  P1: { color: '#ef4444', bg: 'rgba(239,68,68,0.1)', border: 'rgba(239,68,68,0.2)' },
+  P2: { color: '#f59e0b', bg: 'rgba(245,158,11,0.1)', border: 'rgba(245,158,11,0.2)' },
+  P3: { color: '#60a5fa', bg: 'rgba(96,165,250,0.1)', border: 'rgba(96,165,250,0.2)' },
+};
+
+const INCIDENTS: Incident[] = [
+  {
+    title: 'Optimistic Lock Failures Spike',
+    severity: 'P2',
+    symptoms: [
+      'High rate of modifiedCount: 0 in logs',
+      'Booking statuses appear stuck or outdated',
+      'Users report stale booking UI',
+    ],
+    diagnosis: [
+      'Check for concurrent request patterns (multiple webhooks firing simultaneously)',
+      'Verify MongoDB connection pool is not exhausted',
+      'Check if any deployment introduced a new middleware that reads/writes booking_status',
+    ],
+    resolution: [
+      'The system is designed to skip silently on lock failures — this is safe by design',
+      'If persistent: check for infinite retry loops in upstream services',
+      'Monitor BullMQ job queue for backed-up jobs that might be causing contention',
+    ],
+    escalation: 'Backend team lead → Staff engineer if rate exceeds 5% of requests',
+  },
+  {
+    title: 'BullMQ Jobs Stuck / Not Processing',
+    severity: 'P1',
+    symptoms: [
+      'Riders not receiving confirmation notifications',
+      'Timeouts not firing — expired bookings remain active',
+      'BullMQ dashboard shows jobs in "waiting" state indefinitely',
+    ],
+    diagnosis: [
+      'Check Redis connectivity (BullMQ depends on Redis)',
+      'Verify worker processes are running (pm2 list or k8s pod status)',
+      'Check ENABLE_BOOKING_JOBS flag is true in the environment',
+    ],
+    resolution: [
+      'Restart BullMQ worker pods/processes',
+      'If Redis is down: restore from backup, jobs will auto-retry on reconnect',
+      'For stuck individual jobs: use BullMQ admin to manually remove and reschedule',
+    ],
+    escalation: 'Immediate: on-call backend engineer → infrastructure team if Redis related',
+  },
+  {
+    title: 'DAC Card Orphans',
+    severity: 'P3',
+    symptoms: [
+      'Driver app shows stale action cards for cancelled/completed trips',
+      'DAC delete Pub/Sub messages failing silently',
+    ],
+    diagnosis: [
+      'Check GCP Pub/Sub topic health and subscription backlog',
+      'Verify PUB_SUB_DRIVER_ACTIONS_TOPIC environment variable',
+      'Check DAC service logs for processing errors',
+    ],
+    resolution: [
+      'DAC operations are fire-and-forget — orphans resolve when driver refreshes app',
+      'For bulk cleanup: run a script that queries terminal-status trips and publishes delete messages',
+      'Long-term: add a TTL-based auto-cleanup in DAC service',
+    ],
+    escalation: 'Driver platform team if affecting > 100 drivers',
+  },
+  {
+    title: 'Notification Delivery Failures',
+    severity: 'P2',
+    symptoms: [
+      'Riders/drivers not receiving push notifications',
+      'sendBookingNotificationWithConfig errors in logs',
+      'FCM/APNS error codes in notification service logs',
+    ],
+    diagnosis: [
+      'Check FCM/APNS service status',
+      'Verify device tokens are valid and not expired',
+      'Check notification service rate limits',
+    ],
+    resolution: [
+      'Notifications are fire-and-forget — core booking flow continues regardless',
+      'For critical notifications: trigger manual re-send through ops dashboard',
+      'If FCM key expired: rotate in GCP console and redeploy',
+    ],
+    escalation: 'Notifications team → Mobile platform team if device token issues',
+  },
+];
+
+export function CriticalRunbookSection() {
+  const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
+
+  return (
+    <div className="space-y-3">
+      {INCIDENTS.map((incident, i) => {
+        const isExpanded = expandedIndex === i;
+        const sc = SEVERITY_COLORS[incident.severity];
+        return (
+          <div
+            key={i}
+            className="rounded-xl border overflow-hidden transition-colors"
+            style={{
+              borderColor: isExpanded ? sc.border : 'var(--color-border-default)',
+              background: 'rgba(20,17,24,0.5)',
+            }}
+          >
+            <button
+              onClick={() => setExpandedIndex(isExpanded ? null : i)}
+              className="w-full px-4 py-3 flex items-center gap-3 hover:bg-white/5 transition-colors"
+            >
+              <span
+                className="text-[10px] font-bold px-2 py-0.5 rounded shrink-0"
+                style={{ background: sc.bg, color: sc.color, border: `1px solid ${sc.border}` }}
+              >
+                {incident.severity}
+              </span>
+              <span className="text-sm text-slate-200 font-medium text-left flex-1">{incident.title}</span>
+              <Icon name={isExpanded ? 'expand_less' : 'expand_more'} size={18} className="text-slate-500" />
+            </button>
+            <AnimatePresence>
+              {isExpanded && (
+                <motion.div
+                  initial={{ height: 0, opacity: 0 }}
+                  animate={{ height: 'auto', opacity: 1 }}
+                  exit={{ height: 0, opacity: 0 }}
+                  transition={{ duration: 0.2 }}
+                  className="overflow-hidden"
+                >
+                  <div className="px-4 pb-4 space-y-4 border-t" style={{ borderColor: 'var(--color-border-default)' }}>
+                    {[
+                      { title: 'Symptoms', items: incident.symptoms, icon: 'warning', color: '#fbbf24' },
+                      { title: 'Diagnosis', items: incident.diagnosis, icon: 'search', color: '#60a5fa' },
+                      { title: 'Resolution', items: incident.resolution, icon: 'build', color: '#22c55e' },
+                    ].map((section) => (
+                      <div key={section.title} className="pt-3">
+                        <div className="flex items-center gap-1.5 mb-2">
+                          <Icon name={section.icon} size={14} className={`text-[${section.color}]`} />
+                          <span className="text-[10px] uppercase tracking-wider font-semibold" style={{ color: section.color }}>
+                            {section.title}
+                          </span>
+                        </div>
+                        <ul className="space-y-1.5">
+                          {section.items.map((item, j) => (
+                            <li key={j} className="flex items-start gap-2">
+                              <span className="text-slate-600 mt-1">-</span>
+                              <span className="text-xs text-slate-400">{item}</span>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    ))}
+                    <div className="pt-2">
+                      <span className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold">Escalation: </span>
+                      <span className="text-xs text-slate-400">{incident.escalation}</span>
+                    </div>
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,102 @@
+import { Icon } from '../shared/Icon';
+
+const MIGRATION_STEPS = [
+  {
+    phase: 'Pre-migration',
+    steps: [
+      'Verify booking_status field exists on Trip schema (additive — no breaking changes)',
+      'Run validation query to count trips with is_booked: true that lack booking_status',
+      'Backup: snapshot the trips collection before running backfill',
+    ],
+  },
+  {
+    phase: 'Backfill Script',
+    steps: [
+      'Query all trips where is_booked: true AND booking_status is null',
+      'For each trip, compute booking_status from current trip_status using TRIP_STATUS_TO_BOOKING_STATUS map',
+      'Use bulkWrite with ordered: false for parallel processing',
+      'Set booking_status_history to [{ status: computed_status, timestamp: trip.updatedAt }]',
+    ],
+  },
+  {
+    phase: 'Validation',
+    steps: [
+      'Count trips where is_booked: true AND booking_status is null — should be 0',
+      'Verify booking_status values are all valid enum values',
+      'Spot-check 10 random trips: compare trip_status to booking_status for consistency',
+      'Run the full QA test plan against staging with backfilled data',
+    ],
+  },
+];
+
+const VALIDATION_QUERIES = [
+  {
+    label: 'Count un-migrated trips',
+    query: 'db.trips.countDocuments({ is_booked: true, booking_status: { $exists: false } })',
+  },
+  {
+    label: 'Verify valid statuses',
+    query: 'db.trips.distinct("booking_status", { is_booked: true })',
+  },
+  {
+    label: 'Check for null booking_status',
+    query: 'db.trips.countDocuments({ is_booked: true, booking_status: null })',
+  },
+];
+
+export function DataMigrationSection() {
+  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)' }}
+      >
+        <p className="text-sm text-slate-400 leading-relaxed">
+          The <code className="text-xs bg-white/5 px-1.5 py-0.5 rounded text-slate-300">booking_status</code> field is
+          additive — it does not replace or modify any existing fields. Existing trips without this field continue to work normally.
+          Migration is only needed if you want historical trips to show booking status in the UI.
+        </p>
+      </div>
+
+      {MIGRATION_STEPS.map((phase) => (
+        <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-2.5 border-b"
+            style={{ borderColor: 'var(--color-border-default)', background: 'rgba(255,255,255,0.03)' }}
+          >
+            <span className="text-sm font-bold text-slate-200">{phase.phase}</span>
+          </div>
+          <ul className="p-4 space-y-2">
+            {phase.steps.map((step, i) => (
+              <li key={i} className="flex items-start gap-2.5">
+                <Icon name="chevron_right" size={14} className="text-slate-600 mt-0.5 shrink-0" />
+                <span className="text-xs text-slate-400">{step}</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">Validation Queries</h4>
+        <div className="space-y-2">
+          {VALIDATION_QUERIES.map((q) => (
+            <div key={q.label}>
+              <span className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold">{q.label}</span>
+              <pre className="mt-1 text-[11px] font-mono text-emerald-400 bg-black/30 rounded-lg px-3 py-2 overflow-x-auto">
+                {q.query}
+              </pre>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,98 @@
+import { Icon } from '../shared/Icon';
+
+const SCHEMA_FIELDS = [
+  { field: 'booking_status', type: 'String', description: 'Current booking lifecycle status (enum)', indexed: true, example: 'TRIP_BOOK_PENDING' },
+  { field: 'booking_status_history', type: 'Array<Object>', description: 'Audit trail of all status transitions', indexed: false, example: '[{ status, timestamp, reason? }]' },
+  { field: 'is_booked', type: 'Boolean', description: 'Flag indicating this is a scheduled ride', indexed: true, example: 'true' },
+  { field: 'booked_for', type: 'Date', description: 'Scheduled pickup time', indexed: true, example: '2024-12-25T14:00:00Z' },
+];
+
+const INDEXES = [
+  { name: 'booking_status_1', fields: '{ booking_status: 1 }', purpose: 'Query trips by booking status' },
+  { name: 'is_booked_1_booking_status_1', fields: '{ is_booked: 1, booking_status: 1 }', purpose: 'Compound: find booked trips in specific status' },
+  { name: 'booked_for_1', fields: '{ booked_for: 1 }', purpose: 'Query trips by scheduled time (BullMQ job scheduling)' },
+];
+
+const QUERY_PATTERNS = [
+  { name: 'Optimistic Lock Update', query: "Trip.updateOne(\n  { _id: tripId, booking_status: currentStatus },\n  { $set: { booking_status: newStatus }, $push: { booking_status_history: entry } }\n)", description: 'Core update pattern — only succeeds if status hasn\'t changed since read' },
+  { name: 'Find Pending Bookings', query: "Trip.find(\n  { is_booked: true, booking_status: 'TRIP_BOOK_PENDING' }\n)", description: 'Used by BullMQ job scheduler to find trips needing confirmation' },
+  { name: 'Terminal Status Guard', query: "const TERMINAL = ['TRIP_BOOK_FINISHED', 'TRIP_BOOK_OPERATION_RIDER_CANCELED',\n  'TRIP_BOOK_OPERATION_DRIVER_CANCELED', 'TRIP_BOOK_SYSTEM_CANCELED'];\nif (TERMINAL.includes(trip.booking_status)) return;", description: 'Skip middleware if booking is already in terminal state' },
+];
+
+export function DbSchemaSection() {
+  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 flex items-center gap-2" style={{ borderColor: 'var(--color-border-default)', background: 'rgba(255,255,255,0.03)' }}>
+          <Icon name="storage" size={16} className="text-emerald-400" />
+          <span className="text-sm font-bold text-slate-200">Trip Schema — Booking Fields</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">Field</th>
+              <th className="px-4 py-2 text-left text-xs font-semibold text-slate-400">Type</th>
+              <th className="px-4 py-2 text-left text-xs font-semibold text-slate-400">Description</th>
+              <th className="px-4 py-2 text-center text-xs font-semibold text-slate-400">Indexed</th>
+            </tr>
+          </thead>
+          <tbody>
+            {SCHEMA_FIELDS.map((f) => (
+              <tr key={f.field} className="border-t hover:bg-white/5 transition-colors" style={{ borderColor: 'var(--color-border-default)' }}>
+                <td className="px-4 py-2.5 font-mono text-xs text-cyan-400">{f.field}</td>
+                <td className="px-4 py-2.5 font-mono text-[11px] text-slate-400">{f.type}</td>
+                <td className="px-4 py-2.5 text-xs text-slate-400">{f.description}</td>
+                <td className="px-4 py-2.5 text-center">
+                  {f.indexed ? (
+                    <Icon name="check_circle" size={14} className="text-emerald-400" />
+                  ) : (
+                    <Icon name="remove" size={14} className="text-slate-600" />
+                  )}
+                </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">Indexes</h4>
+        <div className="space-y-2">
+          {INDEXES.map((idx) => (
+            <div key={idx.name} className="flex items-start gap-3 p-2 rounded-lg" style={{ background: 'rgba(255,255,255,0.02)' }}>
+              <Icon name="sort" size={14} className="text-amber-400 mt-0.5 shrink-0" />
+              <div>
+                <code className="text-xs font-mono text-slate-300">{idx.fields}</code>
+                <p className="text-[11px] text-slate-500 mt-0.5">{idx.purpose}</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">Common Query Patterns</h4>
+        <div className="space-y-4">
+          {QUERY_PATTERNS.map((q) => (
+            <div key={q.name}>
+              <div className="text-xs font-semibold text-slate-300 mb-1">{q.name}</div>
+              <p className="text-[11px] text-slate-500 mb-2">{q.description}</p>
+              <pre className="text-[11px] font-mono text-emerald-400 bg-black/30 rounded-lg px-3 py-2 overflow-x-auto whitespace-pre-wrap">
+                {q.query}
+              </pre>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}