yadflow 2.6.0 → 2.8.0

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

@@ -0,0 +1,90 @@
+import { Icon } from '../shared/Icon';
+import { STATUS_MAPPINGS } from '../../data/referenceData';
+
+const CATEGORY_COLORS: Record<string, string> = {
+  Completion: '#22c55e',
+  'Rider cancel': '#ef4444',
+  'Driver cancel': '#f97316',
+  'System cancel': '#eab308',
+  'Active trip cancel': '#ec4899',
+  'Driver confirm': '#06b6d4',
+  'Assignment (special)': '#8b5cf6',
+};
+
+const TERMINAL_STATUSES = [
+  'TRIP_BOOK_FINISHED',
+  'TRIP_BOOK_OPERATION_RIDER_CANCELED',
+  'TRIP_BOOK_OPERATION_DRIVER_CANCELED',
+  'TRIP_BOOK_SYSTEM_CANCELED',
+];
+
+export function StatusMachineSection() {
+  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 justify-between" style={{ borderColor: 'var(--color-border-default)', background: 'rgba(255,255,255,0.03)' }}>
+          <span className="text-sm font-bold text-slate-200">TRIP_STATUS → BOOKING_STATUS Mapping</span>
+          <span className="text-[10px] font-bold text-slate-400">{STATUS_MAPPINGS.length} entries</span>
+        </div>
+        <table className="w-full text-sm">
+          <thead>
+            <tr style={{ background: 'rgba(255,255,255,0.05)' }}>
+              <th className="px-4 py-2.5 text-left text-xs font-semibold text-slate-400">Trip Status</th>
+              <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-right text-xs font-semibold text-slate-400">Category</th>
+            </tr>
+          </thead>
+          <tbody>
+            {STATUS_MAPPINGS.map((m) => {
+              const color = CATEGORY_COLORS[m.category] || '#64748b';
+              return (
+                <tr
+                  key={m.tripStatus}
+                  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-slate-300">{m.tripStatus}</td>
+                  <td className="px-4 py-2.5 font-mono text-xs text-slate-300">{m.bookingStatus}</td>
+                  <td className="px-4 py-2.5 text-right">
+                    <span
+                      className="text-[10px] font-medium px-2 py-0.5 rounded border"
+                      style={{ color, background: `${color}15`, borderColor: `${color}25` }}
+                    >
+                      {m.category}
+                    </span>
+                  </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">Terminal States</h4>
+        <p className="text-xs text-slate-400 mb-3">
+          Once a booking reaches a terminal state, no further transitions are allowed. The <code className="text-xs bg-white/5 px-1 rounded text-slate-300">fnUpdateBookingStatus</code> middleware
+          includes a guard that skips updates if the current status is terminal.
+        </p>
+        <div className="flex flex-wrap gap-2">
+          {TERMINAL_STATUSES.map((s) => (
+            <span
+              key={s}
+              className="px-2.5 py-1 rounded-md text-xs font-mono border"
+              style={{ background: 'rgba(239,68,68,0.1)', borderColor: 'rgba(239,68,68,0.2)', color: '#f87171' }}
+            >
+              <Icon name="block" size={12} className="inline mr-1" />
+              {s}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,163 @@
+import { useState } from 'react';
+import { Icon } from '../shared/Icon';
+
+interface TestCase {
+  id: string;
+  scenario: string;
+  steps: string[];
+  expected: string;
+  priority: 'critical' | 'high' | 'medium';
+}
+
+const PRIORITY_COLORS = {
+  critical: { color: '#ef4444', bg: 'rgba(239,68,68,0.1)' },
+  high: { color: '#f59e0b', bg: 'rgba(245,158,11,0.1)' },
+  medium: { color: '#60a5fa', bg: 'rgba(96,165,250,0.1)' },
+};
+
+const TEST_CASES: TestCase[] = [
+  {
+    id: 'TC-001',
+    scenario: 'Happy Path — Rider confirms booking',
+    steps: ['Create scheduled trip', 'Wait for confirmation notification (24h before)', 'Rider sends BOOK_CONFIRMED', 'Verify booking_status = TRIP_BOOK_RIDER_CONFIRMED'],
+    expected: 'Status transitions correctly, notification sent to driver, history updated',
+    priority: 'critical',
+  },
+  {
+    id: 'TC-002',
+    scenario: 'Rider declines confirmation',
+    steps: ['Create scheduled trip', 'Wait for confirmation notification', 'Rider sends BOOK_UNCONFIRMED', 'Verify booking_status = TRIP_BOOK_RIDER_CANCELED'],
+    expected: 'Booking cancelled, BullMQ jobs cleaned up, DAC deleted, driver notified',
+    priority: 'critical',
+  },
+  {
+    id: 'TC-003',
+    scenario: 'Rider confirmation timeout → ops timeout → system cancel',
+    steps: ['Create trip', 'Let rider confirmation expire (30 min)', 'Let ops window expire (15 min)', 'Verify auto-cancellation'],
+    expected: 'booking_status = TRIP_BOOK_SYSTEM_CANCELED after full timeout chain',
+    priority: 'critical',
+  },
+  {
+    id: 'TC-004',
+    scenario: 'Driver accepts booking',
+    steps: ['Create trip with assigned driver', 'Driver sends BOOK_ACCEPTED', 'Verify booking_status = TRIP_BOOK_OPERATION_DRIVER_CONFIRMED'],
+    expected: 'Status updated, rider notified, DAC card updated',
+    priority: 'high',
+  },
+  {
+    id: 'TC-005',
+    scenario: 'Driver cancels booking',
+    steps: ['Create trip with assigned driver', 'Driver sends BOOK_DRIVER_CANCELED', 'Verify re-dispatch triggered'],
+    expected: 'Status = TRIP_BOOK_OPERATION_DRIVER_CANCELED, ride re-dispatched, rider notified',
+    priority: 'high',
+  },
+  {
+    id: 'TC-006',
+    scenario: 'Concurrent update (optimistic lock)',
+    steps: ['Send two booking status updates simultaneously for same trip', 'Verify only one succeeds'],
+    expected: 'One update returns success, other silently skips (modifiedCount: 0)',
+    priority: 'high',
+  },
+  {
+    id: 'TC-007',
+    scenario: 'Invalid transition rejected',
+    steps: ['Set booking_status to TRIP_BOOK_FINISHED (terminal)', 'Attempt to send BOOK_CONFIRMED'],
+    expected: 'HTTP 409 — INVALID_BOOKING_STATUS_TRANSITION',
+    priority: 'medium',
+  },
+  {
+    id: 'TC-008',
+    scenario: 'Active trip cancellation (DRIVER_COMING)',
+    steps: ['Trip reaches DRIVER_COMING status', 'Rider cancels active trip', 'Verify booking_status sync'],
+    expected: 'booking_status = TRIP_BOOK_OPERATION_RIDER_CANCELED via fnUpdateBookingStatus',
+    priority: 'high',
+  },
+  {
+    id: 'TC-009',
+    scenario: 'Feature flags OFF — no jobs scheduled',
+    steps: ['Set ENABLE_BOOKING_JOBS=false', 'Create scheduled trip', 'Verify no BullMQ jobs created'],
+    expected: 'Trip created normally but no confirmation jobs in queue',
+    priority: 'medium',
+  },
+  {
+    id: 'TC-010',
+    scenario: 'Non-booked trip — endpoints return 404',
+    steps: ['Create regular (non-scheduled) trip', 'Call PUT /rider/trips/:id/booking-status'],
+    expected: 'HTTP 404 — NOT_A_BOOKED_TRIP',
+    priority: 'medium',
+  },
+];
+
+export function TestPlanSection() {
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  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-2">
+          <span className="text-sm font-bold text-slate-200">Test Coverage</span>
+          <div className="flex gap-3">
+            {(['critical', 'high', 'medium'] as const).map((p) => {
+              const count = TEST_CASES.filter((t) => t.priority === p).length;
+              const pc = PRIORITY_COLORS[p];
+              return (
+                <span key={p} className="text-[10px] font-bold px-2 py-0.5 rounded" style={{ background: pc.bg, color: pc.color }}>
+                  {p}: {count}
+                </span>
+              );
+            })}
+          </div>
+        </div>
+        <p className="text-xs text-slate-400">{TEST_CASES.length} test cases covering all flow paths, edge cases, and error scenarios.</p>
+      </div>
+
+      <div className="space-y-2">
+        {TEST_CASES.map((tc) => {
+          const isExpanded = expandedId === tc.id;
+          const pc = PRIORITY_COLORS[tc.priority];
+          return (
+            <div
+              key={tc.id}
+              className="rounded-lg border overflow-hidden"
+              style={{ background: 'rgba(20,17,24,0.5)', borderColor: 'var(--color-border-default)' }}
+            >
+              <button
+                onClick={() => setExpandedId(isExpanded ? null : tc.id)}
+                className="w-full px-4 py-3 flex items-center gap-3 hover:bg-white/5 transition-colors"
+              >
+                <span className="text-[10px] font-mono font-bold text-slate-500 w-14 shrink-0">{tc.id}</span>
+                <span className="text-[10px] font-bold px-1.5 py-0.5 rounded shrink-0" style={{ background: pc.bg, color: pc.color }}>
+                  {tc.priority}
+                </span>
+                <span className="text-sm text-slate-200 text-left flex-1">{tc.scenario}</span>
+                <Icon name={isExpanded ? 'expand_less' : 'expand_more'} size={16} className="text-slate-500" />
+              </button>
+              {isExpanded && (
+                <div className="px-4 pb-3 space-y-3 border-t" style={{ borderColor: 'var(--color-border-default)' }}>
+                  <div className="pt-3">
+                    <span className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold">Steps</span>
+                    <ol className="mt-1.5 space-y-1">
+                      {tc.steps.map((step, i) => (
+                        <li key={i} className="flex items-start gap-2">
+                          <span className="text-[10px] font-bold text-slate-600 w-4 shrink-0 mt-0.5">{i + 1}.</span>
+                          <span className="text-xs text-slate-400">{step}</span>
+                        </li>
+                      ))}
+                    </ol>
+                  </div>
+                  <div>
+                    <span className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold">Expected Result</span>
+                    <p className="text-xs text-emerald-400 mt-1">{tc.expected}</p>
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/skills/yad-docs/templates/app/src/components/Logs/SystemLogsTerminal.tsx

@@ -0,0 +1,126 @@
+import { useEffect, useRef } from 'react';
+import { useFlowStore } from '../../store/useFlowStore';
+import { Icon } from '../shared/Icon';
+
+const LEVEL_COLORS: Record<string, string> = {
+  info: '#22c55e',
+  warn: '#eab308',
+  error: '#ef4444',
+  debug: '#64748b',
+};
+
+function isHighlightEntry(message: string): boolean {
+  const keywords = ['request', 'matching', 'confirmation', 'assigned', 'accepted'];
+  const lower = message.toLowerCase();
+  return keywords.some((k) => lower.includes(k));
+}
+
+function exportLogs(logs: { timestamp: Date; level: string; source: string; message: string }[]) {
+  const text = logs
+    .map((l) => `[${l.timestamp.toLocaleTimeString('en-US', { hour12: false })}] [${l.level.toUpperCase()}] ${l.source}: ${l.message}`)
+    .join('\n');
+  const blob = new Blob([text], { type: 'text/plain' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `system-logs-${Date.now()}.txt`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+export function SystemLogsTerminal() {
+  const logs = useFlowStore((s) => s.logs);
+  const clearLogs = useFlowStore((s) => s.clearLogs);
+  const toggleLogsPanel = useFlowStore((s) => s.toggleLogsPanel);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [logs]);
+
+  return (
+    <div
+      className="h-full flex flex-col overflow-hidden"
+      style={{ background: 'var(--color-surface-darker, #0f0e13)' }}
+    >
+      {/* Header */}
+      <div
+        className="px-4 py-2 border-b flex justify-between items-center"
+        style={{
+          borderColor: 'var(--color-border-default)',
+          background: 'var(--color-surface-dark)',
+        }}
+      >
+        <div className="flex items-center gap-2">
+          <Icon name="terminal" size={16} className="text-[var(--color-primary)]" />
+          <h3 className="font-mono text-xs font-semibold text-slate-200">System Logs</h3>
+        </div>
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => exportLogs(logs)}
+            className="text-[10px] text-slate-400 hover:text-white transition-colors px-2 py-0.5 rounded flex items-center gap-1"
+            style={{ background: 'rgba(255,255,255,0.05)' }}
+          >
+            <Icon name="download" size={12} />
+            Export
+          </button>
+          <button
+            onClick={clearLogs}
+            className="text-[10px] text-slate-400 hover:text-white transition-colors px-2 py-0.5 rounded"
+            style={{ background: 'rgba(255,255,255,0.05)' }}
+          >
+            Clear
+          </button>
+          {/* macOS window dots */}
+          <div className="flex items-center gap-1.5 ml-1">
+            <div className="w-2.5 h-2.5 rounded-full" style={{ background: 'rgba(239,68,68,0.2)', border: '1px solid rgba(239,68,68,0.5)' }} />
+            <div className="w-2.5 h-2.5 rounded-full" style={{ background: 'rgba(234,179,8,0.2)', border: '1px solid rgba(234,179,8,0.5)' }} />
+            <div className="w-2.5 h-2.5 rounded-full" style={{ background: 'rgba(34,197,94,0.2)', border: '1px solid rgba(34,197,94,0.5)' }} />
+          </div>
+          <button
+            onClick={toggleLogsPanel}
+            className="text-slate-400 hover:text-white transition-colors"
+          >
+            <Icon name="close" size={16} />
+          </button>
+        </div>
+      </div>
+
+      {/* Log entries */}
+      <div
+        ref={scrollRef}
+        className="flex-1 p-3 font-mono text-xs overflow-y-auto space-y-0.5 logs-scrollbar"
+      >
+        {logs.length === 0 ? (
+          <div className="text-slate-500 animate-pulse">Waiting for events...</div>
+        ) : (
+          logs.map((log, index) => {
+            const isLast = index === logs.length - 1;
+            const isHighlight = isHighlightEntry(log.message);
+
+            return (
+              <div
+                key={log.id}
+                className={`flex gap-3 px-2 py-0.5 rounded transition-all ${isLast ? 'animate-pulse' : ''}`}
+                style={{
+                  color: LEVEL_COLORS[log.level] || '#64748b',
+                  background: isHighlight ? 'rgba(97,22,218,0.08)' : 'transparent',
+                  borderLeft: isHighlight ? '2px solid var(--color-primary)' : '2px solid transparent',
+                  opacity: index < logs.length - 3 ? 0.7 : 1,
+                }}
+              >
+                <span className="w-16 shrink-0 text-slate-600">
+                  {log.timestamp.toLocaleTimeString('en-US', { hour12: false })}
+                </span>
+                <span style={{ color: LEVEL_COLORS[log.level] }}>{log.source}</span>
+                <span className="text-slate-300">{log.message}</span>
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}

package/skills/yad-docs/templates/app/src/components/Navigation/TopNavBar.tsx

@@ -0,0 +1,90 @@
+import { useNavigate } from 'react-router-dom';
+import { Icon } from '../shared/Icon';
+import { useFlowStore } from '../../store/useFlowStore';
+import { useAuthStore } from '../../store/useAuthStore';
+
+export function TopNavBar() {
+  const navigate = useNavigate();
+  const toggleReferencePanel = useFlowStore((s) => s.toggleReferencePanel);
+  const toggleCommandPalette = useFlowStore((s) => s.toggleCommandPalette);
+  const logout = useAuthStore((s) => s.logout);
+
+  return (
+    <header className="flex-none flex items-center justify-between whitespace-nowrap border-b px-6 py-3 z-20"
+      style={{
+        borderColor: 'var(--color-border-default)',
+        background: 'var(--color-bg-primary)',
+      }}
+    >
+      <div className="flex items-center gap-8">
+        <div className="flex items-center gap-3 text-white">
+          <img src="/logo.svg" alt="Logo" className="h-8" />
+        </div>
+        <button
+          onClick={toggleCommandPalette}
+          className="hidden md:flex items-center rounded-lg px-3 py-1.5 w-64 border transition-colors"
+          style={{
+            background: 'var(--color-surface-highlight)',
+            borderColor: 'transparent',
+          }}
+        >
+          <Icon name="search" size={20} className="text-slate-400" />
+          <span className="text-sm text-slate-500 ml-2 flex-1 text-left">Search flows...</span>
+          <div className="text-xs text-slate-500 px-1.5 py-0.5 rounded border"
+            style={{ background: 'var(--color-surface-dark)', borderColor: 'var(--color-border-default)' }}
+          >
+            &#8984;K
+          </div>
+        </button>
+      </div>
+      <div className="flex items-center gap-4">
+        <div className="hidden lg:flex items-center gap-2">
+          <button
+            onClick={toggleReferencePanel}
+            className="flex items-center justify-center px-4 py-2 rounded-full text-slate-300 text-sm font-medium transition-colors"
+            style={{ ':hover': { background: 'var(--color-surface-highlight)' } } as React.CSSProperties}
+            onMouseEnter={(e) => e.currentTarget.style.background = 'var(--color-surface-highlight)'}
+            onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
+          >
+            <Icon name="menu_book" size={18} className="mr-2" />
+            Reference
+          </button>
+          <button
+            onClick={() => navigate('/docs')}
+            className="flex items-center justify-center px-4 py-2 rounded-full text-slate-300 text-sm font-medium transition-colors"
+            onMouseEnter={(e) => e.currentTarget.style.background = 'var(--color-surface-highlight)'}
+            onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
+          >
+            <Icon name="description" size={18} className="mr-2" />
+            Docs
+          </button>
+          <button
+            className="flex items-center justify-center px-4 py-2 rounded-full text-slate-300 text-sm font-medium transition-colors"
+            onMouseEnter={(e) => e.currentTarget.style.background = 'var(--color-surface-highlight)'}
+            onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
+          >
+            <Icon name="settings" size={18} className="mr-2" />
+            Settings
+          </button>
+        </div>
+        <div className="h-6 w-px mx-2" style={{ background: 'var(--color-surface-highlight)' }} />
+        <div className="flex items-center gap-3">
+          <div className="text-right hidden sm:block">
+            <p className="text-sm font-medium text-white">AbdelRahman Nasr</p>
+            <p className="text-xs text-slate-400">Admin</p>
+          </div>
+          <button
+            onClick={logout}
+            title="Sign out"
+            className="h-10 w-10 rounded-full ring-2 ring-[#2f2938] flex items-center justify-center cursor-pointer transition-opacity hover:opacity-80"
+            style={{
+              background: 'linear-gradient(135deg, var(--color-primary) 0%, #a855f7 100%)',
+            }}
+          >
+            <Icon name="logout" size={20} className="text-white" />
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+}

package/skills/yad-docs/templates/app/src/components/Reference/BullMQJobsList.tsx

@@ -0,0 +1,60 @@
+import { Icon } from '../shared/Icon';
+import { useStakeholderFilter } from '../../hooks/useStakeholderFilter';
+import { BULLMQ_JOBS } from '../../data/referenceData';
+
+export function BullMQJobsList() {
+  const jobs = useStakeholderFilter(BULLMQ_JOBS);
+
+  if (jobs.length === 0) return null;
+
+  return (
+    <section>
+      <div className="flex items-center gap-2 mb-4">
+        <Icon name="schedule" size={20} className="text-purple-400" />
+        <h3 className="text-slate-100 text-lg font-bold font-display">BullMQ Jobs Scheduling</h3>
+      </div>
+      <div className="space-y-2">
+        {jobs.map((job) => (
+          <div
+            key={job.name}
+            className="p-3 rounded-lg border hover:border-purple-500/30 transition-colors"
+            style={{
+              background: 'rgba(20,17,24,0.5)',
+              borderColor: 'var(--color-border-default)',
+            }}
+          >
+            <div className="flex items-start gap-3">
+              <div
+                className="flex items-center justify-center w-8 h-8 rounded-lg shrink-0 mt-0.5"
+                style={{ background: 'rgba(168,85,247,0.15)', color: '#a855f7' }}
+              >
+                <Icon name="timer" size={18} />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="text-sm font-semibold text-slate-200 font-mono">{job.name}</span>
+                </div>
+                <p className="text-xs text-slate-400 mb-1.5">{job.description}</p>
+                <div className="flex flex-wrap gap-2">
+                  <span
+                    className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-medium border"
+                    style={{ color: '#a855f7', background: 'rgba(168,85,247,0.1)', borderColor: 'rgba(168,85,247,0.2)' }}
+                  >
+                    <Icon name="schedule" size={10} />
+                    {job.timing}
+                  </span>
+                  <span
+                    className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium text-slate-400 border"
+                    style={{ background: 'rgba(255,255,255,0.03)', borderColor: 'var(--color-border-default)' }}
+                  >
+                    queue: {job.queue}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/skills/yad-docs/templates/app/src/components/Reference/DecisionTreeView.tsx

@@ -0,0 +1,49 @@
+import { Icon } from '../shared/Icon';
+import { useStakeholderFilter } from '../../hooks/useStakeholderFilter';
+import { DECISION_TREE } from '../../data/referenceData';
+
+export function DecisionTreeView() {
+  const branches = useStakeholderFilter(DECISION_TREE);
+
+  if (branches.length === 0) return null;
+
+  return (
+    <section>
+      <div className="flex items-center gap-2 mb-4">
+        <Icon name="account_tree" size={20} className="text-[var(--color-primary)]" />
+        <h3 className="text-slate-100 text-lg font-bold font-display">handleBookAssigned Decision Tree</h3>
+      </div>
+      <div
+        className="rounded-xl border overflow-hidden font-mono text-sm"
+        style={{
+          borderColor: 'var(--color-border-default)',
+          background: 'rgba(20,17,24,0.5)',
+        }}
+      >
+        {branches.map((branch, i) => (
+          <div
+            key={i}
+            className="p-4 border-b last:border-b-0 hover:bg-white/5 transition-colors"
+            style={{ borderColor: 'var(--color-border-default)' }}
+          >
+            <div className="flex items-start gap-2">
+              <span className="text-blue-400 shrink-0 mt-0.5">
+                {i === branches.length - 1 ? '└' : '├'}
+              </span>
+              <div className="flex-1 min-w-0">
+                <div className="text-slate-200">
+                  {branch.condition}
+                  <span className="text-slate-500"> → </span>
+                  <span className="text-emerald-400">{branch.result}</span>
+                </div>
+                {branch.detail && (
+                  <p className="text-[11px] text-slate-500 mt-1.5 font-sans leading-relaxed">{branch.detail}</p>
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/skills/yad-docs/templates/app/src/components/Reference/DeeplinkActionsChips.tsx

@@ -0,0 +1,69 @@
+import { Icon } from '../shared/Icon';
+import { useStakeholderFilter } from '../../hooks/useStakeholderFilter';
+import { DEEPLINK_ACTIONS } from '../../data/referenceData';
+
+export function DeeplinkActionsChips() {
+  const actions = useStakeholderFilter(DEEPLINK_ACTIONS);
+
+  if (actions.length === 0) return null;
+
+  const riderActions = actions.filter((a) => a.target === 'rider');
+  const driverActions = actions.filter((a) => a.target === 'driver');
+
+  return (
+    <section>
+      <div className="flex items-center gap-2 mb-4">
+        <Icon name="link" size={20} className="text-cyan-400" />
+        <h3 className="text-slate-100 text-lg font-bold font-display">Deeplink Actions</h3>
+      </div>
+
+      {riderActions.length > 0 && (
+        <div className="mb-3">
+          <span className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-2 block">
+            Rider ({riderActions.length})
+          </span>
+          <div className="flex flex-wrap gap-1.5">
+            {riderActions.map((action) => (
+              <span
+                key={action.value}
+                className="px-2.5 py-1.5 rounded-md text-xs font-mono border cursor-default hover:bg-white/5 transition-colors"
+                style={{
+                  background: 'rgba(20,17,24,0.5)',
+                  borderColor: 'var(--color-border-default)',
+                  color: '#94a3b8',
+                }}
+                title={action.description}
+              >
+                {action.value}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {driverActions.length > 0 && (
+        <div>
+          <span className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-2 block">
+            Driver ({driverActions.length})
+          </span>
+          <div className="flex flex-wrap gap-1.5">
+            {driverActions.map((action) => (
+              <span
+                key={action.value}
+                className="px-2.5 py-1.5 rounded-md text-xs font-mono border cursor-default hover:bg-white/5 transition-colors"
+                style={{
+                  background: 'rgba(20,17,24,0.5)',
+                  borderColor: 'var(--color-border-default)',
+                  color: '#94a3b8',
+                }}
+                title={action.description}
+              >
+                {action.value}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}