yadflow 2.5.0 → 2.7.0

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

@@ -0,0 +1,61 @@
+import { Icon } from '../shared/Icon';
+import { useStakeholderFilter } from '../../hooks/useStakeholderFilter';
+import { DRIVER_UI_STATES } from '../../data/referenceData';
+
+export function DriverUIStatesTable() {
+  const states = useStakeholderFilter(DRIVER_UI_STATES);
+
+  if (states.length === 0) return null;
+
+  return (
+    <section>
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <Icon name="directions_car" size={20} className="text-purple-400" />
+          <h3 className="text-slate-100 text-lg font-bold font-display">Driver UI States</h3>
+        </div>
+        <span
+          className="text-[10px] font-bold uppercase tracking-wider px-2 py-1 rounded border"
+          style={{ color: '#a78bfa', background: 'rgba(167,139,250,0.1)', borderColor: 'rgba(167,139,250,0.2)' }}
+        >
+          Mobile Dev Focus
+        </span>
+      </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-left text-sm">
+          <thead style={{ background: 'rgba(255,255,255,0.05)' }}>
+            <tr>
+              <th className="px-4 py-3 font-semibold text-slate-300">State</th>
+              <th className="px-4 py-3 font-semibold text-slate-300">Schema Value</th>
+              <th className="px-4 py-3 font-semibold text-slate-300 text-right">Terminal</th>
+            </tr>
+          </thead>
+          <tbody>
+            {states.map((state) => (
+              <tr
+                key={state.state}
+                className="border-t hover:bg-white/5 transition-colors"
+                style={{ borderColor: 'var(--color-border-default)' }}
+              >
+                <td className="px-4 py-3 text-slate-200 font-mono text-xs">{state.state}</td>
+                <td className="px-4 py-3 text-blue-400 font-mono text-xs">{state.schemaValue}</td>
+                <td className="px-4 py-3 text-right">
+                  {state.isTerminal ? (
+                    <span className="inline-flex items-center gap-1 text-rose-400 text-xs font-medium">
+                      <Icon name="cancel" size={14} /> Yes
+                    </span>
+                  ) : (
+                    <span className="text-slate-500 text-xs">No</span>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,73 @@
+import { Icon } from '../shared/Icon';
+import { useStakeholderFilter } from '../../hooks/useStakeholderFilter';
+import { FEATURE_FLAGS } from '../../data/referenceData';
+
+function FlagIndicator({ value }: { value: boolean }) {
+  return value ? (
+    <span className="inline-flex items-center gap-1 text-emerald-400 text-xs font-medium">
+      <Icon name="check_circle" size={14} /> true
+    </span>
+  ) : (
+    <span className="inline-flex items-center gap-1 text-rose-400 text-xs font-medium">
+      <Icon name="cancel" size={14} /> false
+    </span>
+  );
+}
+
+export function FeatureFlagMatrix() {
+  const flags = useStakeholderFilter(FEATURE_FLAGS);
+
+  if (flags.length === 0) return null;
+
+  return (
+    <section>
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <Icon name="flag" size={20} className="text-amber-400" />
+          <h3 className="text-slate-100 text-lg font-bold font-display">Feature Flag Matrix</h3>
+        </div>
+        <span
+          className="text-[10px] font-bold uppercase tracking-wider px-2 py-1 rounded border"
+          style={{ color: '#fbbf24', background: 'rgba(251,191,36,0.1)', borderColor: 'rgba(251,191,36,0.2)' }}
+        >
+          QA Focus
+        </span>
+      </div>
+      <div className="space-y-3">
+        {flags.map((flag) => (
+          <div
+            key={flag.name}
+            className="p-3 rounded-lg border"
+            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-xs font-mono text-slate-200">{flag.name}</span>
+              <span
+                className="text-[10px] px-2 py-0.5 rounded font-medium"
+                style={{ background: 'rgba(255,255,255,0.05)', color: 'var(--color-text-muted)' }}
+              >
+                Default: {flag.defaultValue ? 'true' : 'false'}
+              </span>
+            </div>
+            <p className="text-[11px] text-slate-500 mb-2.5">{flag.description}</p>
+            <div className="flex items-center justify-between text-sm">
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-2">
+                  <span className="text-slate-500 text-xs">Staging</span>
+                  <FlagIndicator value={flag.stagingValue} />
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-slate-500 text-xs">Prod</span>
+                  <FlagIndicator value={flag.productionValue} />
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,61 @@
+import { Icon } from '../shared/Icon';
+import { useStakeholderFilter } from '../../hooks/useStakeholderFilter';
+import { RIDER_UI_STATES } from '../../data/referenceData';
+
+export function RiderUIStatesTable() {
+  const states = useStakeholderFilter(RIDER_UI_STATES);
+
+  if (states.length === 0) return null;
+
+  return (
+    <section>
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <Icon name="phone_iphone" size={20} className="text-emerald-400" />
+          <h3 className="text-slate-100 text-lg font-bold font-display">Rider UI States</h3>
+        </div>
+        <span
+          className="text-[10px] font-bold uppercase tracking-wider px-2 py-1 rounded border"
+          style={{ color: '#10b981', background: 'rgba(16,185,129,0.1)', borderColor: 'rgba(16,185,129,0.2)' }}
+        >
+          Mobile Dev Focus
+        </span>
+      </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-left text-sm">
+          <thead style={{ background: 'rgba(255,255,255,0.05)' }}>
+            <tr>
+              <th className="px-4 py-3 font-semibold text-slate-300">State</th>
+              <th className="px-4 py-3 font-semibold text-slate-300">Schema Value</th>
+              <th className="px-4 py-3 font-semibold text-slate-300 text-right">Terminal</th>
+            </tr>
+          </thead>
+          <tbody>
+            {states.map((state) => (
+              <tr
+                key={state.state}
+                className="border-t hover:bg-white/5 transition-colors"
+                style={{ borderColor: 'var(--color-border-default)' }}
+              >
+                <td className="px-4 py-3 text-slate-200 font-mono text-xs">{state.state}</td>
+                <td className="px-4 py-3 text-blue-400 font-mono text-xs">{state.schemaValue}</td>
+                <td className="px-4 py-3 text-right">
+                  {state.isTerminal ? (
+                    <span className="inline-flex items-center gap-1 text-rose-400 text-xs font-medium">
+                      <Icon name="cancel" size={14} /> Yes
+                    </span>
+                  ) : (
+                    <span className="text-slate-500 text-xs">No</span>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,217 @@
+import { motion, AnimatePresence } from 'framer-motion';
+import { useFlowStore } from '../../store/useFlowStore';
+import { Icon } from '../shared/Icon';
+import { MESSAGE_COLORS } from '../../data/types';
+import { MESSAGE_TYPE_ICONS } from '../../utils/iconMap';
+import { StakeholderToggle } from './StakeholderToggle';
+import { DecisionTreeView } from './DecisionTreeView';
+import { RiderUIStatesTable } from './RiderUIStatesTable';
+import { DriverUIStatesTable } from './DriverUIStatesTable';
+import { BullMQJobsList } from './BullMQJobsList';
+import { FeatureFlagMatrix } from './FeatureFlagMatrix';
+import { DeeplinkActionsChips } from './DeeplinkActionsChips';
+import { TroubleshootingSection } from './TroubleshootingSection';
+
+const CANCELABILITY_RULES = [
+  { status: '<= ACCEPTED', canCancel: 'Yes', color: '#22c55e', dotColor: '#22c55e' },
+  { status: 'DRIVING', canCancel: 'Maybe (Fee Applies)', color: '#eab308', dotColor: '#eab308' },
+  { status: 'COMPLETED', canCancel: 'No', color: '#ef4444', dotColor: '#3b82f6' },
+  { status: 'CANCELLED', canCancel: 'No', color: '#ef4444', dotColor: '#64748b' },
+];
+
+const MESSAGE_LEGEND = [
+  { type: 'request', label: 'Request', description: 'Inbound data stream' },
+  { type: 'response', label: 'Response', description: 'System confirmation' },
+  { type: 'event', label: 'Event', description: 'State change trigger' },
+  { type: 'job', label: 'Job', description: 'Background process' },
+  { type: 'notification', label: 'Notification', description: 'User alert' },
+  { type: 'cleanup', label: 'Cleanup', description: 'Garbage collection' },
+] as const;
+
+export function RulesLegendPanel() {
+  const isOpen = useFlowStore((s) => s.isReferencePanelOpen);
+  const toggle = useFlowStore((s) => s.toggleReferencePanel);
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-40 bg-black/50"
+            onClick={toggle}
+          />
+          {/* Panel */}
+          <motion.div
+            initial={{ x: '100%' }}
+            animate={{ x: 0 }}
+            exit={{ x: '100%' }}
+            transition={{ type: 'spring', damping: 30, stiffness: 300 }}
+            className="fixed right-0 top-0 bottom-0 w-full max-w-[640px] z-50 flex flex-col overflow-hidden rounded-l-xl shadow-2xl border-l"
+            style={{
+              background: 'var(--color-surface-dark)',
+              borderColor: 'var(--color-border-default)',
+            }}
+          >
+            {/* Header */}
+            <div className="px-6 py-5 border-b flex items-center justify-between sticky top-0 z-10"
+              style={{
+                borderColor: 'var(--color-border-default)',
+                background: 'var(--color-surface-dark)',
+              }}
+            >
+              <div>
+                <h2 className="text-slate-100 text-xl font-bold font-display leading-tight">System Reference</h2>
+                <p className="text-slate-400 text-sm mt-1">Rules and visual guides for ride lifecycle</p>
+              </div>
+              <button
+                onClick={toggle}
+                className="text-slate-400 hover:text-white transition-colors p-2 rounded-full hover:bg-white/5"
+              >
+                <Icon name="close" size={24} />
+              </button>
+            </div>
+
+            {/* Stakeholder Toggle */}
+            <StakeholderToggle />
+
+            {/* Scrollable Content */}
+            <div className="flex-1 overflow-y-auto p-6 space-y-8">
+              {/* Cancelability Rules */}
+              <section>
+                <div className="flex items-center gap-2 mb-4">
+                  <Icon name="gavel" size={20} className="text-[var(--color-primary)]" />
+                  <h3 className="text-slate-100 text-lg font-bold font-display">Cancelability Rules</h3>
+                </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-left text-sm">
+                    <thead style={{ background: 'rgba(255,255,255,0.05)' }}>
+                      <tr>
+                        <th className="px-4 py-3 font-semibold text-slate-300 w-1/2">Ride Status</th>
+                        <th className="px-4 py-3 font-semibold text-slate-300 w-1/2 text-right">Rider Can Cancel?</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-3 text-slate-400 font-medium">
+                            <div className="flex items-center gap-2">
+                              <span className="h-1.5 w-1.5 rounded-full" style={{ background: rule.dotColor }} />
+                              {rule.status}
+                            </div>
+                          </td>
+                          <td className="px-4 py-3 text-right">
+                            <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium border"
+                              style={{
+                                background: `${rule.color}15`,
+                                color: rule.color,
+                                borderColor: `${rule.color}30`,
+                              }}
+                            >
+                              {rule.canCancel}
+                            </span>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </section>
+
+              {/* Message Legend */}
+              <section>
+                <div className="flex items-center gap-2 mb-4">
+                  <Icon name="palette" size={20} className="text-[var(--color-primary)]" />
+                  <h3 className="text-slate-100 text-lg font-bold font-display">Message Legend</h3>
+                </div>
+                <div className="grid grid-cols-1 gap-3">
+                  {MESSAGE_LEGEND.map(({ type, label, description }) => {
+                    const color = MESSAGE_COLORS[type];
+                    const iconName = MESSAGE_TYPE_ICONS[type] || 'circle';
+                    return (
+                      <div key={type}
+                        className="flex items-center justify-between p-3 rounded-lg border group hover:border-[var(--color-primary)] transition-colors"
+                        style={{
+                          background: 'rgba(20,17,24,0.5)',
+                          borderColor: 'var(--color-border-default)',
+                        }}
+                      >
+                        <div className="flex items-center gap-3">
+                          <div className="flex items-center justify-center w-10 h-10 rounded-lg"
+                            style={{ background: `${color}20`, color: color }}
+                          >
+                            <Icon name={iconName} size={20} />
+                          </div>
+                          <div>
+                            <p className="text-sm font-semibold text-slate-200">{label}</p>
+                            <p className="text-xs text-slate-500">{description}</p>
+                          </div>
+                        </div>
+                        <div className="h-6 w-24 rounded-full flex items-center justify-center"
+                          style={{ background: `${color}20`, border: `1px solid ${color}30` }}
+                        >
+                          <div className="w-12 h-1.5 rounded-full opacity-60" style={{ background: color }} />
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </section>
+
+              {/* Decision Tree */}
+              <DecisionTreeView />
+
+              {/* Rider UI States */}
+              <RiderUIStatesTable />
+
+              {/* Driver UI States */}
+              <DriverUIStatesTable />
+
+              {/* BullMQ Jobs */}
+              <BullMQJobsList />
+
+              {/* Feature Flags */}
+              <FeatureFlagMatrix />
+
+              {/* Deeplink Actions */}
+              <DeeplinkActionsChips />
+
+              {/* Troubleshooting */}
+              <TroubleshootingSection />
+            </div>
+
+            {/* Footer */}
+            <div className="p-4 border-t flex items-center justify-center gap-2"
+              style={{
+                borderColor: 'var(--color-border-default)',
+                background: 'var(--color-surface-dark)',
+              }}
+            >
+              <button className="flex-1 py-3 px-4 rounded-lg text-white text-sm font-bold transition-colors flex items-center justify-center gap-2"
+                style={{ background: 'var(--color-primary)' }}
+              >
+                <Icon name="download" size={18} />
+                Export Rules PDF
+              </button>
+              <button className="p-3 rounded-lg text-slate-300 transition-colors"
+                style={{ background: 'rgba(255,255,255,0.05)' }}
+              >
+                <Icon name="settings" size={20} />
+              </button>
+            </div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}

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

@@ -0,0 +1,41 @@
+import { useFlowStore } from '../../store/useFlowStore';
+import type { StakeholderView } from '../../data/types';
+import { Icon } from '../shared/Icon';
+
+const VIEWS: { id: StakeholderView; label: string; icon: string }[] = [
+  { id: 'rider-mobile-dev', label: 'Rider', icon: 'phone_iphone' },
+  { id: 'driver-mobile-dev', label: 'Driver', icon: 'directions_car' },
+  { id: 'backend-dev', label: 'Backend', icon: 'terminal' },
+  { id: 'product-manager', label: 'PM', icon: 'bar_chart' },
+  { id: 'engineering-manager', label: 'EM', icon: 'groups' },
+  { id: 'staff-engineer', label: 'Staff', icon: 'engineering' },
+  { id: 'qa-engineer', label: 'QA', icon: 'bug_report' },
+];
+
+export function StakeholderToggle() {
+  const view = useFlowStore((s) => s.stakeholderView);
+  const setView = useFlowStore((s) => s.setStakeholderView);
+
+  return (
+    <div className="flex items-center gap-2 px-6 py-3 border-b" style={{ borderColor: 'var(--color-border-default)' }}>
+      <span className="text-[10px] uppercase tracking-widest text-slate-500 font-semibold mr-1 shrink-0">View:</span>
+      <div className="flex overflow-x-auto rounded-lg p-0.5 gap-0.5" style={{ background: 'rgba(255,255,255,0.05)' }}>
+        {VIEWS.map(({ id, label, icon }) => (
+          <button
+            key={id}
+            onClick={() => setView(id)}
+            className="flex items-center gap-1 px-2.5 py-1.5 rounded-md text-[11px] font-medium transition-all whitespace-nowrap shrink-0"
+            style={{
+              background: view === id ? 'var(--color-primary)' : 'transparent',
+              color: view === id ? 'white' : 'var(--color-text-muted)',
+              border: view === id ? '1px solid rgba(97,22,218,0.3)' : '1px solid transparent',
+            }}
+          >
+            <Icon name={icon} size={13} />
+            {label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Icon } from '../shared/Icon';
+import { useStakeholderFilter } from '../../hooks/useStakeholderFilter';
+import { ERROR_CODES } from '../../data/referenceData';
+
+const SEVERITY_COLORS = {
+  info: { text: '#60a5fa', bg: 'rgba(96,165,250,0.1)', border: 'rgba(96,165,250,0.2)' },
+  warn: { text: '#fbbf24', bg: 'rgba(251,191,36,0.1)', border: 'rgba(251,191,36,0.2)' },
+  critical: { text: '#f87171', bg: 'rgba(248,113,113,0.1)', border: 'rgba(248,113,113,0.2)' },
+};
+
+export function TroubleshootingSection() {
+  const errors = useStakeholderFilter(ERROR_CODES);
+  const [expandedCode, setExpandedCode] = useState<string | null>(null);
+
+  if (errors.length === 0) return null;
+
+  return (
+    <section>
+      <div className="flex items-center gap-2 mb-4">
+        <Icon name="warning" size={20} className="text-amber-400" />
+        <h3 className="text-slate-100 text-lg font-bold font-display">Troubleshooting & Error Codes</h3>
+      </div>
+      <div className="space-y-2">
+        {errors.map((error) => {
+          const isExpanded = expandedCode === error.code;
+          const colors = SEVERITY_COLORS[error.severity];
+
+          return (
+            <div
+              key={error.code}
+              className="rounded-lg border overflow-hidden transition-colors"
+              style={{
+                borderColor: isExpanded ? colors.border : 'var(--color-border-default)',
+                background: 'rgba(20,17,24,0.5)',
+              }}
+            >
+              <button
+                onClick={() => setExpandedCode(isExpanded ? null : error.code)}
+                className="w-full px-4 py-3 flex items-center justify-between hover:bg-white/5 transition-colors"
+              >
+                <div className="flex items-center gap-3">
+                  <span
+                    className="text-xs font-mono font-bold"
+                    style={{ color: colors.text }}
+                  >
+                    {error.code}
+                  </span>
+                  {error.httpStatus && (
+                    <span
+                      className="text-[10px] px-1.5 py-0.5 rounded font-medium"
+                      style={{ background: colors.bg, color: colors.text, border: `1px solid ${colors.border}` }}
+                    >
+                      {error.httpStatus}
+                    </span>
+                  )}
+                </div>
+                <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-3 space-y-2 border-t" style={{ borderColor: 'var(--color-border-default)' }}>
+                      <div className="pt-3">
+                        <span className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold">Cause</span>
+                        <p className="text-xs text-slate-300 mt-1">{error.cause}</p>
+                      </div>
+                      <div>
+                        <span className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold">Resolution</span>
+                        <p className="text-xs text-slate-300 mt-1">{error.resolution}</p>
+                      </div>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}