yadflow 2.6.0 → 2.7.0

package/skills/yad-docs/templates/app/src/components/Canvas/FlowCanvas.tsx

@@ -0,0 +1,216 @@
+import React, { useRef, useMemo, useCallback, useState, useEffect } from 'react';
+import { COMPONENTS } from '../../data/components';
+import { useFlowStore } from '../../store/useFlowStore';
+import { useAnimationQueue } from '../../hooks/useAnimationQueue';
+import { SystemComponent } from './SystemComponent';
+import { ConnectionLine } from './ConnectionLine';
+import { AnimatedMessage } from './AnimatedMessage';
+import { Icon } from '../shared/Icon';
+
+const ALL_CONNECTIONS = [
+  ['rider-app', 'backend-api'],
+  ['driver-app', 'backend-api'],
+  ['backend-api', 'bullmq'],
+  ['backend-api', 'database'],
+  ['backend-api', 'pubsub'],
+  ['backend-api', 'dac'],
+  ['backend-api', 'ops-dashboard'],
+  ['ops-dashboard', 'backend-api'],
+];
+
+export const FlowCanvas: React.FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [dims, setDims] = useState({ width: 0, height: 0 });
+  const getCurrentStep = useFlowStore((s) => s.getCurrentStep);
+  const speed = useFlowStore((s) => s.speed);
+  const zoomLevel = useFlowStore((s) => s.zoomLevel);
+  const zoomIn = useFlowStore((s) => s.zoomIn);
+  const zoomOut = useFlowStore((s) => s.zoomOut);
+  const resetZoom = useFlowStore((s) => s.resetZoom);
+  const selectedPath = useFlowStore((s) => s.selectedPath);
+  const currentStep = getCurrentStep();
+  const { completedTargets, animKey } = useAnimationQueue();
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        setDims({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height,
+        });
+      }
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const activeComponents = useMemo(
+    () => new Set(currentStep?.activeComponents || []),
+    [currentStep]
+  );
+
+  const activeConnections = useMemo(() => {
+    if (!currentStep) return new Set<string>();
+    const conns = new Set<string>();
+    for (const msg of currentStep.messages) {
+      conns.add(`${msg.from}-${msg.to}`);
+      conns.add(`${msg.to}-${msg.from}`);
+    }
+    return conns;
+  }, [currentStep]);
+
+  const isConnectionActive = useCallback(
+    (from: string, to: string) => {
+      return (
+        activeConnections.has(`${from}-${to}`) ||
+        activeConnections.has(`${to}-${from}`)
+      );
+    },
+    [activeConnections]
+  );
+
+  const messages = currentStep?.messages || [];
+
+  return (
+    <div ref={containerRef} className="relative h-full w-full overflow-hidden">
+      {/* Canvas Header Overlay */}
+      <div className="absolute top-4 left-4 right-4 z-30 flex justify-between items-start pointer-events-none">
+        <div className="pointer-events-auto rounded-lg p-3 border shadow-xl"
+          style={{
+            background: 'rgba(30,26,37,0.8)',
+            backdropFilter: 'blur(12px)',
+            borderColor: 'rgba(255,255,255,0.05)',
+          }}
+        >
+          <h1 className="text-white text-xl font-bold font-display">
+            {selectedPath.label}
+          </h1>
+          <div className="flex items-center gap-2 mt-1">
+            <span className="h-2 w-2 rounded-full bg-green-500 animate-pulse" />
+            <span className="text-xs text-slate-300 uppercase tracking-wide">Live Simulation</span>
+          </div>
+        </div>
+        <div className="pointer-events-auto flex gap-2">
+          <button
+            onClick={zoomIn}
+            className="h-10 w-10 flex items-center justify-center rounded-lg text-white border transition-colors"
+            style={{
+              background: 'rgba(30,26,37,0.8)',
+              borderColor: 'rgba(255,255,255,0.05)',
+            }}
+          >
+            <Icon name="zoom_in" size={20} />
+          </button>
+          <button
+            onClick={zoomOut}
+            className="h-10 w-10 flex items-center justify-center rounded-lg text-white border transition-colors"
+            style={{
+              background: 'rgba(30,26,37,0.8)',
+              borderColor: 'rgba(255,255,255,0.05)',
+            }}
+          >
+            <Icon name="zoom_out" size={20} />
+          </button>
+          <button
+            onClick={resetZoom}
+            className="h-10 w-10 flex items-center justify-center rounded-lg text-white border transition-colors"
+            style={{
+              background: 'rgba(30,26,37,0.8)',
+              borderColor: 'rgba(255,255,255,0.05)',
+            }}
+          >
+            <Icon name="center_focus_strong" size={20} />
+          </button>
+        </div>
+      </div>
+
+      {/* Zoomable content */}
+      <div
+        className="absolute inset-0"
+        style={{
+          transform: `scale(${zoomLevel})`,
+          transformOrigin: 'center center',
+          transition: 'transform 0.2s ease',
+        }}
+      >
+        {/* SVG layer for connection lines */}
+        {dims.width > 0 && (
+          <svg className="pointer-events-none absolute inset-0 h-full w-full">
+            <defs>
+              <linearGradient id="gradientPath" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stopColor="#6116da" stopOpacity={1} />
+                <stop offset="100%" stopColor="#ff6490" stopOpacity={1} />
+              </linearGradient>
+              <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+                <polygon points="0 0, 10 3.5, 0 7" fill="#ff6490" />
+              </marker>
+            </defs>
+            {ALL_CONNECTIONS.map(([from, to]) => (
+              <ConnectionLine
+                key={`${from}-${to}`}
+                from={from}
+                to={to}
+                isActive={isConnectionActive(from, to)}
+                containerWidth={dims.width}
+                containerHeight={dims.height}
+              />
+            ))}
+          </svg>
+        )}
+
+        {/* Animated messages */}
+        {dims.width > 0 &&
+          messages.map((msg) => (
+            <AnimatedMessage
+              key={`${animKey}-${msg.id}`}
+              from={msg.from}
+              to={msg.to}
+              label={msg.label}
+              color={msg.color}
+              delay={msg.delay}
+              duration={msg.duration}
+              speed={speed}
+              containerWidth={dims.width}
+              containerHeight={dims.height}
+            />
+          ))}
+
+        {/* System component nodes */}
+        {COMPONENTS.map((comp) => (
+          <SystemComponent
+            key={comp.id}
+            component={comp}
+            isActive={activeComponents.has(comp.id)}
+            isReceiving={completedTargets.has(comp.id)}
+          />
+        ))}
+      </div>
+
+      {/* Current status badge */}
+      {currentStep && (
+        <div
+          className="absolute left-4 bottom-4 z-30 rounded-lg border px-3 py-2"
+          style={{
+            background: 'rgba(30,26,37,0.85)',
+            backdropFilter: 'blur(8px)',
+            borderColor: 'var(--color-border-default)',
+          }}
+        >
+          <div className="text-[10px] uppercase tracking-wider" style={{ color: 'var(--color-text-muted)' }}>
+            Status
+          </div>
+          <div className="text-sm font-bold" style={{ color: 'var(--color-accent)' }}>
+            {currentStep.status}
+          </div>
+          <div className="mt-0.5 text-[10px]" style={{ color: 'var(--color-text-secondary)' }}>
+            {currentStep.bookingStatus}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/skills/yad-docs/templates/app/src/components/Canvas/SystemComponent.tsx

@@ -0,0 +1,153 @@
+import React, { useMemo, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import type { SystemComponent as SystemComponentType } from '../../data/types';
+import { Icon } from '../shared/Icon';
+import { COMPONENT_ICONS, COMPONENT_ROLES } from '../../utils/iconMap';
+
+interface SystemComponentProps {
+  component: SystemComponentType;
+  isActive: boolean;
+  isReceiving: boolean;
+  onClick?: () => void;
+}
+
+export const SystemComponent: React.FC<SystemComponentProps> = React.memo(
+  ({ component, isActive, isReceiving, onClick }) => {
+    const [hovered, setHovered] = useState(false);
+    const iconName = COMPONENT_ICONS[component.id] || 'circle';
+    const role = COMPONENT_ROLES[component.id] || 'Service';
+
+    const glowStyle = useMemo(() => {
+      if (isReceiving) {
+        return {
+          boxShadow: `0 0 30px ${component.color}40, 0 0 60px ${component.color}20`,
+          borderColor: `${component.color}80`,
+        };
+      }
+      if (isActive) {
+        return {
+          boxShadow: `0 0 20px ${component.color}30, 0 0 40px ${component.color}15`,
+          borderColor: `${component.color}50`,
+        };
+      }
+      return {
+        boxShadow: '0 4px 20px rgba(0,0,0,0.2)',
+        borderColor: 'rgba(255,255,255,0.05)',
+      };
+    }, [isActive, isReceiving, component.color]);
+
+    return (
+      <>
+        <motion.button
+          onClick={onClick}
+          onMouseEnter={() => setHovered(true)}
+          onMouseLeave={() => setHovered(false)}
+          className="absolute z-10 flex cursor-pointer flex-col items-center gap-2 rounded-2xl p-4 transition-colors glass-panel group"
+          style={{
+            left: `${component.position.x}%`,
+            top: `${component.position.y}%`,
+            transform: 'translate(-50%, -50%)',
+            background: isActive
+              ? `linear-gradient(135deg, ${component.color}12, ${component.color}06)`
+              : 'rgba(47, 41, 56, 0.4)',
+            backdropFilter: 'blur(12px)',
+            ...glowStyle,
+            minWidth: '130px',
+            minHeight: '140px',
+          }}
+          animate={
+            isReceiving
+              ? { scale: [1, 1.05, 1] }
+              : { scale: 1 }
+          }
+          transition={
+            isReceiving
+              ? { duration: 0.6, ease: 'easeInOut' }
+              : { duration: 0.3 }
+          }
+          whileHover={{ scale: 1.05 }}
+          aria-label={`${component.label}: ${component.description}`}
+          tabIndex={0}
+        >
+          {/* Role tag */}
+          <div className="absolute -top-3 px-3 py-1 rounded-full text-[10px] uppercase tracking-wider font-bold"
+            style={{
+              background: 'var(--color-surface-dark)',
+              border: '1px solid var(--color-surface-highlight)',
+              color: 'var(--color-text-muted)',
+            }}
+          >
+            {role}
+          </div>
+
+          {/* Icon with gradient background */}
+          <div className="h-14 w-14 rounded-2xl flex items-center justify-center text-white shadow-lg mb-1"
+            style={{
+              background: `linear-gradient(135deg, ${component.color}, ${component.color}99)`,
+            }}
+          >
+            <Icon name={iconName} size={28} className="text-white" />
+          </div>
+
+          {/* Label */}
+          <h3 className="text-white font-bold font-display text-sm text-center break-words w-full">{component.label}</h3>
+
+          {/* Status */}
+          <div className="flex items-center gap-1.5">
+            <motion.div
+              className="h-2 w-2 rounded-full"
+              style={{
+                backgroundColor: isActive ? '#22c55e' : isReceiving ? component.color : 'var(--color-text-muted)',
+              }}
+              animate={
+                isActive || isReceiving
+                  ? { opacity: [0.7, 1, 0.7] }
+                  : {}
+              }
+              transition={{ duration: 1.5, repeat: Infinity }}
+            />
+            <span className="text-xs text-slate-300">
+              {isReceiving ? 'Processing' : isActive ? 'Online' : 'Idle'}
+            </span>
+          </div>
+
+          {/* Connection points */}
+          <div className="absolute right-[-6px] top-1/2 -translate-y-1/2 h-3 w-3 rounded-full border-2 border-white"
+            style={{ background: component.color, opacity: isActive ? 1 : 0.3 }}
+          />
+          <div className="absolute left-[-6px] top-1/2 -translate-y-1/2 h-3 w-3 rounded-full border-2 border-white"
+            style={{ background: component.color, opacity: isActive ? 1 : 0.3 }}
+          />
+        </motion.button>
+
+        {/* Tooltip */}
+        <AnimatePresence>
+          {hovered && (
+            <motion.div
+              initial={{ opacity: 0, y: 4 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 4 }}
+              transition={{ duration: 0.15 }}
+              className="pointer-events-none absolute z-50 max-w-[220px] rounded-lg px-3 py-2 text-xs"
+              style={{
+                left: `${component.position.x}%`,
+                top: `${component.position.y}%`,
+                transform: 'translate(-50%, calc(-100% - 50px))',
+                backgroundColor: 'var(--color-surface-dark)',
+                color: 'var(--color-text-primary)',
+                border: '1px solid var(--color-border-light)',
+                boxShadow: '0 4px 20px rgba(0,0,0,0.4)',
+                backdropFilter: 'blur(8px)',
+              }}
+            >
+              <div className="font-semibold font-display">{component.label}</div>
+              <div className="mt-0.5 text-[10px]" style={{ color: 'var(--color-text-secondary)' }}>
+                {component.description}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </>
+    );
+  }
+);

package/skills/yad-docs/templates/app/src/components/Controls/PlaybackBar.tsx

@@ -0,0 +1,284 @@
+import { motion } from 'framer-motion';
+import { useFlowStore } from '../../store/useFlowStore';
+import { Icon } from '../shared/Icon';
+
+function formatTime(seconds: number): string {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  const cs = Math.floor((seconds % 1) * 100);
+  return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}.${String(cs).padStart(2, '0')}`;
+}
+
+export const PlaybackBar = () => {
+  const {
+    playbackState,
+    speed,
+    activeStepIndex,
+    elapsedTime,
+    play,
+    pause,
+    stop,
+    nextStep,
+    prevStep,
+    setSpeed,
+    setActiveStep,
+    getTotalSteps,
+    getCurrentStep,
+    getCurrentSteps,
+    toggleLogsPanel,
+    replayStep,
+    addLog,
+  } = useFlowStore();
+
+  const totalSteps = getTotalSteps();
+  const currentStep = getCurrentStep();
+  const steps = getCurrentSteps();
+  const progress = totalSteps > 0 ? ((activeStepIndex + 1) / totalSteps) * 100 : 0;
+  const estimatedTotal = totalSteps * 8;
+
+  const handleFlagIssue = () => {
+    if (currentStep) {
+      addLog({
+        level: 'warn',
+        source: 'USER',
+        message: `Flagged step ${activeStepIndex + 1}: ${currentStep.title}`,
+      });
+    }
+  };
+
+  return (
+    <div className="relative z-20">
+      {/* Ambient glow */}
+      <div
+        className="absolute inset-0 pointer-events-none overflow-hidden"
+        style={{ background: 'rgba(30,26,37,0.9)' }}
+      >
+        <div
+          className="absolute left-1/2 -translate-x-1/2 top-0 w-1/3 h-full"
+          style={{
+            background: 'rgba(97,22,218,0.05)',
+            filter: 'blur(100px)',
+          }}
+        />
+      </div>
+
+      <div
+        className="relative"
+        style={{
+          borderTop: '1px solid rgba(255,255,255,0.1)',
+        }}
+      >
+        {/* Header: label + timer */}
+        <div className="flex items-center justify-between px-6 pt-3 pb-1">
+          <span
+            className="text-[10px] font-semibold uppercase tracking-widest"
+            style={{ color: 'var(--color-text-muted)' }}
+          >
+            Booking Flow Progress
+          </span>
+          <div className="font-mono text-xs" style={{ color: 'var(--color-text-muted)' }}>
+            <span style={{ color: 'var(--color-primary)' }}>{formatTime(elapsedTime)}</span>
+            {' / '}
+            <span>{formatTime(estimatedTotal)}</span>
+          </div>
+        </div>
+
+        {/* Step title */}
+        <div className="px-6 pb-2">
+          <h3 className="text-white text-base font-bold">
+            {currentStep
+              ? `Step ${activeStepIndex + 1}: ${currentStep.title}`
+              : 'Select a path to begin'}
+          </h3>
+        </div>
+
+        {/* Step markers + progress bar */}
+        <div className="px-6 pb-3">
+          {/* Markers row */}
+          <div className="relative flex items-start justify-between mb-1">
+            {steps.map((step, i) => {
+              const isCompleted = i < activeStepIndex;
+              const isActive = i === activeStepIndex;
+              const shortLabel = step.title.split(' ')[0];
+
+              return (
+                <button
+                  key={step.id}
+                  onClick={() => setActiveStep(i)}
+                  className="flex flex-col items-center gap-1 z-10 group cursor-pointer"
+                  style={{ flex: '1 1 0' }}
+                  title={step.title}
+                >
+                  <div
+                    className="rounded-full transition-all duration-300"
+                    style={{
+                      width: isActive ? 14 : 10,
+                      height: isActive ? 14 : 10,
+                      background: isCompleted
+                        ? 'var(--color-primary)'
+                        : isActive
+                          ? 'white'
+                          : 'rgba(255,255,255,0.15)',
+                      border: isActive ? '3px solid var(--color-primary)' : 'none',
+                      boxShadow: isActive
+                        ? '0 0 12px rgba(97,22,218,0.6)'
+                        : isCompleted
+                          ? '0 0 6px rgba(97,22,218,0.3)'
+                          : 'none',
+                    }}
+                  />
+                  <span
+                    className="text-[9px] font-medium transition-colors"
+                    style={{
+                      color: isActive
+                        ? 'white'
+                        : isCompleted
+                          ? 'var(--color-primary)'
+                          : 'var(--color-text-muted)',
+                    }}
+                  >
+                    {shortLabel}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Progress bar */}
+          <div
+            className="relative h-1.5 w-full rounded-full overflow-hidden"
+            style={{ background: 'rgba(255,255,255,0.08)' }}
+          >
+            <motion.div
+              className="h-full rounded-full"
+              style={{
+                background: 'linear-gradient(90deg, var(--color-primary), #a855f7)',
+              }}
+              animate={{ width: `${progress}%` }}
+              transition={{ duration: 0.3 }}
+            />
+          </div>
+        </div>
+
+        {/* Controls row */}
+        <div className="flex items-center gap-3 px-6 pb-3">
+          {/* Skip Prev */}
+          <button
+            onClick={prevStep}
+            disabled={activeStepIndex === 0}
+            className="group flex flex-col items-center gap-0.5 p-1.5 rounded-md transition-colors disabled:opacity-30"
+            style={{ color: 'var(--color-text-secondary)' }}
+          >
+            <Icon name="skip_previous" size={22} />
+            <span className="text-[8px] opacity-0 group-hover:opacity-100 transition-opacity">Prev</span>
+          </button>
+
+          {/* Play / Pause */}
+          <motion.button
+            onClick={playbackState === 'playing' ? pause : play}
+            className="h-14 w-14 rounded-full flex items-center justify-center text-white transition-transform active:scale-95"
+            style={{
+              background: 'var(--color-primary)',
+              boxShadow: '0 0 20px rgba(97,22,218,0.5)',
+            }}
+            whileHover={{ scale: 1.05, boxShadow: '0 0 30px rgba(97,22,218,0.8)' }}
+            whileTap={{ scale: 0.95 }}
+            aria-label={playbackState === 'playing' ? 'Pause' : 'Play'}
+          >
+            <Icon name={playbackState === 'playing' ? 'pause' : 'play_arrow'} size={32} filled />
+          </motion.button>
+
+          {/* Skip Next */}
+          <button
+            onClick={nextStep}
+            disabled={activeStepIndex >= totalSteps - 1}
+            className="group flex flex-col items-center gap-0.5 p-1.5 rounded-md transition-colors disabled:opacity-30"
+            style={{ color: 'var(--color-text-secondary)' }}
+          >
+            <Icon name="skip_next" size={22} />
+            <span className="text-[8px] opacity-0 group-hover:opacity-100 transition-opacity">Next</span>
+          </button>
+
+          {/* Stop */}
+          <button
+            onClick={stop}
+            className="p-1.5 rounded-md transition-colors"
+            style={{ color: 'var(--color-text-secondary)' }}
+            aria-label="Stop"
+          >
+            <Icon name="stop" size={22} />
+          </button>
+
+          {/* Divider */}
+          <div className="h-8 w-px" style={{ background: 'rgba(255,255,255,0.1)' }} />
+
+          {/* Speed control */}
+          <div className="flex rounded-lg p-0.5" style={{ background: 'rgba(255,255,255,0.05)' }}>
+            {[1, 2, 3].map((s) => (
+              <button
+                key={s}
+                onClick={() => setSpeed(s)}
+                className="px-3 py-1 rounded-md text-xs font-bold transition-all"
+                style={{
+                  background: speed === s ? 'rgba(97,22,218,0.2)' : 'transparent',
+                  color: speed === s ? 'white' : 'var(--color-text-muted)',
+                  border: speed === s ? '1px solid rgba(97,22,218,0.3)' : '1px solid transparent',
+                }}
+              >
+                {s}x
+              </button>
+            ))}
+          </div>
+
+          {/* Divider */}
+          <div className="h-8 w-px" style={{ background: 'rgba(255,255,255,0.1)' }} />
+
+          {/* Replay Step */}
+          <button
+            onClick={replayStep}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border text-xs font-medium transition-colors"
+            style={{
+              background: 'var(--color-surface-dark)',
+              borderColor: 'var(--color-border-default)',
+              color: 'var(--color-text-secondary)',
+            }}
+          >
+            <Icon name="history" size={16} />
+            Replay Step
+          </button>
+
+          {/* Flag Issue */}
+          <button
+            onClick={handleFlagIssue}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border text-xs font-medium transition-colors"
+            style={{
+              background: 'var(--color-surface-dark)',
+              borderColor: 'var(--color-border-default)',
+              color: 'var(--color-text-secondary)',
+            }}
+          >
+            <Icon name="bug_report" size={16} />
+            Flag Issue
+          </button>
+
+          {/* Divider */}
+          <div className="h-8 w-px" style={{ background: 'rgba(255,255,255,0.1)' }} />
+
+          {/* Logs toggle */}
+          <button
+            onClick={toggleLogsPanel}
+            className="flex items-center gap-2 px-3 py-1.5 rounded-lg border text-xs font-medium transition-colors"
+            style={{
+              background: 'var(--color-surface-dark)',
+              borderColor: 'var(--color-border-default)',
+              color: 'var(--color-text-secondary)',
+            }}
+          >
+            <Icon name="terminal" size={16} />
+            Logs
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};