yadflow 2.6.0 → 2.8.0

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

@@ -0,0 +1,167 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useFlowStore } from "../../store/useFlowStore";
+import { Badge } from "../shared/Badge";
+
+export const StepDetail: React.FC = () => {
+  const getCurrentStep = useFlowStore((s) => s.getCurrentStep);
+  const step = getCurrentStep();
+
+  if (!step) {
+    return (
+      <div
+        className="flex h-full items-center justify-center text-sm"
+        style={{ color: "var(--color-text-muted)" }}
+      >
+        Select a path to view step details
+      </div>
+    );
+  }
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        key={step.id}
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -8 }}
+        transition={{ duration: 0.2 }}
+        className="flex h-full flex-col gap-2 overflow-auto px-4 py-2"
+      >
+        {/* Header */}
+        <div className="flex items-start justify-between gap-2">
+          <div>
+            <div
+              className="text-xs font-bold"
+              style={{ color: "var(--color-text-primary)" }}
+            >
+              {step.title}
+            </div>
+            <div
+              className="mt-0.5 text-[11px] leading-relaxed"
+              style={{ color: "var(--color-text-secondary)" }}
+            >
+              {step.description}
+            </div>
+          </div>
+        </div>
+
+        {/* Grid of details */}
+        <div className="grid grid-cols-2 gap-x-4 gap-y-1.5">
+          <DetailItem label="Trigger" value={step.trigger} />
+          <DetailItem label="Handler" value={step.handler} mono />
+          <DetailItem label="Status" value={step.status} highlight />
+          <DetailItem
+            label="Booking Status"
+            value={step.bookingStatus}
+            highlight
+          />
+        </div>
+
+        {/* Side Effects */}
+        {Object.keys(step.sideEffects).length > 0 && (
+          <div className="flex flex-wrap gap-1.5">
+            {step.sideEffects.jobs && (
+              <SideEffectPill icon="⏱️" label="Jobs" value={step.sideEffects.jobs} />
+            )}
+            {step.sideEffects.notifications && (
+              <SideEffectPill
+                icon="🔔"
+                label="Notifications"
+                value={step.sideEffects.notifications}
+              />
+            )}
+            {step.sideEffects.dac && (
+              <SideEffectPill icon="📋" label="DAC" value={step.sideEffects.dac} />
+            )}
+            {step.sideEffects.pubsub && (
+              <SideEffectPill icon="📡" label="Pub/Sub" value={step.sideEffects.pubsub} />
+            )}
+          </div>
+        )}
+
+        {/* Message types in this step */}
+        {step.messages.length > 0 && (
+          <div className="flex flex-wrap gap-1">
+            {Array.from(new Set(step.messages.map((m) => m.type))).map(
+              (type) => (
+                <Badge key={type} type={type} />
+              )
+            )}
+          </div>
+        )}
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+function DetailItem({
+  label,
+  value,
+  mono,
+  highlight,
+}: {
+  label: string;
+  value: string;
+  mono?: boolean;
+  highlight?: boolean;
+}) {
+  return (
+    <div className="min-w-0">
+      <div
+        className="text-[9px] uppercase tracking-wider"
+        style={{ color: "var(--color-text-muted)" }}
+      >
+        {label}
+      </div>
+      <div
+        className={`truncate text-[11px] ${mono ? "font-mono" : "font-medium"}`}
+        style={{
+          color: highlight
+            ? "var(--color-accent)"
+            : "var(--color-text-secondary)",
+        }}
+        title={value}
+      >
+        {value}
+      </div>
+    </div>
+  );
+}
+
+function SideEffectPill({
+  icon,
+  label,
+  value,
+}: {
+  icon: string;
+  label: string;
+  value: string;
+}) {
+  return (
+    <div
+      className="flex items-start gap-1 rounded-md border px-2 py-1"
+      style={{
+        borderColor: "var(--color-border-default)",
+        background: "var(--color-bg-secondary)",
+      }}
+    >
+      <span className="text-[10px]">{icon}</span>
+      <div className="min-w-0">
+        <div
+          className="text-[9px] font-bold uppercase"
+          style={{ color: "var(--color-text-muted)" }}
+        >
+          {label}
+        </div>
+        <div
+          className="text-[10px] leading-snug"
+          style={{ color: "var(--color-text-secondary)" }}
+          title={value}
+        >
+          {value}
+        </div>
+      </div>
+    </div>
+  );
+}

package/skills/yad-docs/templates/app/src/components/DetailPanel/HandlerLogicSnippet.tsx

@@ -0,0 +1,41 @@
+import type { FlowStep } from '../../data/types';
+import { Icon } from '../shared/Icon';
+
+interface HandlerLogicSnippetProps {
+  step: FlowStep;
+}
+
+export function HandlerLogicSnippet({ step }: HandlerLogicSnippetProps) {
+  const handlerParts = step.handler.split('.');
+  const fileName = handlerParts.length > 1 ? handlerParts[0] + '.ts' : 'handler.ts';
+  const functionName = handlerParts.length > 1 ? handlerParts[1] : step.handler;
+
+  const code = `async ${functionName}(req) {
+  // trigger: ${step.trigger}
+  // status: ${step.status} → ${step.bookingStatus}
+  ${step.messages.map((m) => `await this.emit('${m.type}', '${m.label}');`).join('\n  ')}
+}`;
+
+  return (
+    <div>
+      <h4 className="text-xs font-bold text-slate-400 uppercase mb-2 flex items-center gap-2">
+        <Icon name="code" size={16} /> Handler Logic
+      </h4>
+      <div className="rounded-lg p-3 border"
+        style={{
+          background: 'var(--color-surface-darker)',
+          borderColor: 'var(--color-surface-highlight)',
+        }}
+      >
+        <div className="mb-2 pb-2"
+          style={{ borderBottom: '1px solid rgba(255,255,255,0.05)' }}
+        >
+          <span className="text-[10px] text-slate-400">{functionName}() — {fileName}</span>
+        </div>
+        <pre className="text-[11px] text-blue-300 font-mono leading-relaxed overflow-x-auto">
+          <code>{code}</code>
+        </pre>
+      </div>
+    </div>
+  );
+}

package/skills/yad-docs/templates/app/src/components/DetailPanel/RequestPayloadPreview.tsx

@@ -0,0 +1,46 @@
+import type { FlowStep } from '../../data/types';
+import { Icon } from '../shared/Icon';
+
+interface RequestPayloadPreviewProps {
+  step: FlowStep;
+}
+
+export function RequestPayloadPreview({ step }: RequestPayloadPreviewProps) {
+  const payload = {
+    step_id: step.id,
+    actor: step.actor,
+    status: step.status,
+    booking_status: step.bookingStatus,
+    trigger: step.trigger,
+    active_components: step.activeComponents,
+    messages: step.messages.map((m) => ({
+      from: m.from,
+      to: m.to,
+      type: m.type,
+      label: m.label,
+    })),
+    ...(Object.keys(step.sideEffects).length > 0 && {
+      side_effects: step.sideEffects,
+    }),
+  };
+
+  const jsonStr = JSON.stringify(payload, null, 2);
+
+  return (
+    <div>
+      <h4 className="text-xs font-bold text-slate-400 uppercase mb-2 flex items-center gap-2">
+        <Icon name="data_object" size={16} /> Request Payload
+      </h4>
+      <div className="rounded-lg p-3 border overflow-hidden"
+        style={{
+          background: 'var(--color-surface-darker)',
+          borderColor: 'var(--color-surface-highlight)',
+        }}
+      >
+        <pre className="text-[11px] text-green-400 font-mono leading-relaxed overflow-x-auto max-h-40">
+          <code>{jsonStr}</code>
+        </pre>
+      </div>
+    </div>
+  );
+}

package/skills/yad-docs/templates/app/src/components/DetailPanel/RightPanel.tsx

@@ -0,0 +1,88 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import { useNavigate } from 'react-router-dom';
+import { useFlowStore } from '../../store/useFlowStore';
+import { StatusCard } from './StatusCard';
+import { TriggerEventCard } from './TriggerEventCard';
+import { RequestPayloadPreview } from './RequestPayloadPreview';
+import { HandlerLogicSnippet } from './HandlerLogicSnippet';
+import { Icon } from '../shared/Icon';
+
+export function RightPanel() {
+  const getCurrentStep = useFlowStore((s) => s.getCurrentStep);
+  const activeStepIndex = useFlowStore((s) => s.activeStepIndex);
+  const selectedPath = useFlowStore((s) => s.selectedPath);
+  const navigate = useNavigate();
+  const step = getCurrentStep();
+
+  return (
+    <aside
+      className="w-80 flex-none flex flex-col border-l z-10"
+      style={{
+        borderColor: 'var(--color-border-default)',
+        background: 'var(--color-bg-primary)',
+      }}
+    >
+      <div className="p-5 border-b flex justify-between items-center"
+        style={{ borderColor: 'var(--color-border-default)' }}
+      >
+        <h3 className="text-slate-100 text-sm font-bold font-display uppercase tracking-wider">
+          Step Details
+        </h3>
+        <Icon name="close" size={20} className="text-slate-500 cursor-pointer hover:text-white" />
+      </div>
+
+      {!step ? (
+        <div className="flex-1 flex items-center justify-center p-5">
+          <p className="text-sm text-center" style={{ color: 'var(--color-text-muted)' }}>
+            Select a path to view step details
+          </p>
+        </div>
+      ) : (
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={step.id}
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -8 }}
+            transition={{ duration: 0.2 }}
+            className="flex-1 overflow-y-auto p-5 space-y-6"
+          >
+            <StatusCard step={step} stepIndex={activeStepIndex} />
+            <TriggerEventCard step={step} />
+            <RequestPayloadPreview step={step} />
+            <HandlerLogicSnippet step={step} />
+          </motion.div>
+        </AnimatePresence>
+      )}
+
+      {step && (
+        <div className="p-4 border-t flex flex-col gap-2" style={{ borderColor: 'var(--color-border-default)' }}>
+          <button
+            onClick={() => navigate(`/path/${selectedPath.id}`)}
+            className="w-full py-2.5 rounded-lg text-white text-sm font-medium transition-colors flex items-center justify-center gap-2"
+            style={{
+              background: 'var(--color-primary)',
+              boxShadow: '0 4px 15px rgba(97,22,218,0.2)',
+            }}
+          >
+            <Icon name="open_in_new" size={18} />
+            View Full Path Details
+          </button>
+          <button
+            onClick={() => console.log('Debug step:', step)}
+            className="w-full py-2.5 rounded-lg text-slate-300 text-sm font-medium border transition-colors flex items-center justify-center gap-2"
+            style={{
+              background: 'rgba(255,255,255,0.05)',
+              borderColor: 'rgba(255,255,255,0.05)',
+            }}
+            onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.1)'}
+            onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.05)'}
+          >
+            <Icon name="bug_report" size={18} />
+            Debug Step
+          </button>
+        </div>
+      )}
+    </aside>
+  );
+}

package/skills/yad-docs/templates/app/src/components/DetailPanel/StatusCard.tsx

@@ -0,0 +1,76 @@
+import type { FlowStep } from '../../data/types';
+import { Icon } from '../shared/Icon';
+
+interface StatusCardProps {
+  step: FlowStep;
+  stepIndex: number;
+}
+
+export function StatusCard({ step, stepIndex }: StatusCardProps) {
+  return (
+    <div className="rounded-xl p-4 border"
+      style={{
+        background: 'var(--color-surface-highlight)',
+        borderColor: 'var(--color-surface-highlight)',
+      }}
+    >
+      <div className="flex items-center justify-between mb-3">
+        <span className="text-xs font-bold text-slate-400 uppercase">Current State</span>
+        <span className="text-[10px] font-mono px-2 py-0.5 rounded border"
+          style={{
+            background: 'rgba(59,130,246,0.2)',
+            color: 'rgb(147,197,253)',
+            borderColor: 'rgba(59,130,246,0.3)',
+          }}
+        >
+          Step {stepIndex + 1}
+        </span>
+      </div>
+      <div className="flex items-center gap-3 mb-2">
+        <div className="h-3 w-3 rounded-full animate-pulse"
+          style={{ backgroundColor: '#eab308' }}
+        />
+        <h2 className="text-white text-lg font-bold font-display break-all">{step.bookingStatus}</h2>
+      </div>
+      <p className="text-slate-400 text-sm leading-relaxed">
+        {step.description}
+      </p>
+
+      {/* Side effects badges */}
+      {Object.keys(step.sideEffects).length > 0 && (
+        <div className="flex flex-wrap gap-1.5 mt-3 pt-3 border-t"
+          style={{ borderColor: 'rgba(255,255,255,0.05)' }}
+        >
+          {step.sideEffects.jobs && (
+            <span className="flex items-center gap-1 text-[10px] px-2 py-1 rounded-md"
+              style={{ background: 'rgba(245,158,11,0.15)', color: '#f59e0b' }}
+            >
+              <Icon name="work" size={12} /> {step.sideEffects.jobs}
+            </span>
+          )}
+          {step.sideEffects.notifications && (
+            <span className="flex items-center gap-1 text-[10px] px-2 py-1 rounded-md"
+              style={{ background: 'rgba(251,37,118,0.15)', color: '#fb2576' }}
+            >
+              <Icon name="notifications" size={12} /> {step.sideEffects.notifications}
+            </span>
+          )}
+          {step.sideEffects.dac && (
+            <span className="flex items-center gap-1 text-[10px] px-2 py-1 rounded-md"
+              style={{ background: 'rgba(139,92,246,0.15)', color: '#8b5cf6' }}
+            >
+              <Icon name="assignment" size={12} /> {step.sideEffects.dac}
+            </span>
+          )}
+          {step.sideEffects.pubsub && (
+            <span className="flex items-center gap-1 text-[10px] px-2 py-1 rounded-md"
+              style={{ background: 'rgba(16,185,129,0.15)', color: '#10b981' }}
+            >
+              <Icon name="cell_tower" size={12} /> {step.sideEffects.pubsub}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/skills/yad-docs/templates/app/src/components/DetailPanel/TriggerEventCard.tsx

@@ -0,0 +1,45 @@
+import type { FlowStep } from '../../data/types';
+import { Icon } from '../shared/Icon';
+import { ACTOR_ICONS } from '../../utils/iconMap';
+
+interface TriggerEventCardProps {
+  step: FlowStep;
+}
+
+export function TriggerEventCard({ step }: TriggerEventCardProps) {
+  const actorIcon = ACTOR_ICONS[step.actor] || 'person';
+
+  return (
+    <div>
+      <h4 className="text-xs font-bold text-slate-400 uppercase mb-2 flex items-center gap-2">
+        <Icon name="bolt" size={16} /> Trigger Event
+      </h4>
+      <div className="rounded-lg p-3 border group relative"
+        style={{
+          background: 'var(--color-surface-darker)',
+          borderColor: 'var(--color-surface-highlight)',
+        }}
+      >
+        <div className="flex items-center gap-2 mb-2">
+          <span className="text-[10px] font-bold px-1.5 rounded text-white"
+            style={{ background: 'var(--color-primary)' }}
+          >
+            {step.actor.toUpperCase()}
+          </span>
+          <Icon name={actorIcon} size={14} className="text-slate-400" />
+          <span className="text-xs text-slate-300 font-mono break-all">{step.trigger}</span>
+        </div>
+        <div className="text-[10px] text-slate-500 font-mono">
+          Status: {step.status}
+        </div>
+        <button
+          onClick={() => navigator.clipboard.writeText(step.trigger)}
+          className="absolute top-2 right-2 text-slate-600 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity"
+          aria-label="Copy trigger"
+        >
+          <Icon name="content_copy" size={16} />
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,80 @@
+import type { ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Icon } from '../shared/Icon';
+
+interface DocPageShellProps {
+  title: string;
+  subtitle?: string;
+  icon?: string;
+  iconColor?: string;
+  backTo?: string;
+  backLabel?: string;
+  headerRight?: ReactNode;
+  sidebar?: ReactNode;
+  children: ReactNode;
+}
+
+export function DocPageShell({
+  title,
+  subtitle,
+  icon,
+  iconColor = 'var(--color-primary)',
+  backTo,
+  backLabel = 'Back',
+  headerRight,
+  sidebar,
+  children,
+}: DocPageShellProps) {
+  const navigate = useNavigate();
+
+  return (
+    <div className="flex flex-1 overflow-hidden">
+      {sidebar && (
+        <aside
+          className="w-64 flex-none flex flex-col border-r overflow-y-auto"
+          style={{
+            borderColor: 'var(--color-border-default)',
+            background: 'var(--color-bg-primary)',
+          }}
+        >
+          {sidebar}
+        </aside>
+      )}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <div
+          className="flex-none px-8 py-5 border-b flex items-center justify-between"
+          style={{
+            borderColor: 'var(--color-border-default)',
+            background: 'var(--color-bg-primary)',
+          }}
+        >
+          <div className="flex items-center gap-4">
+            {backTo && (
+              <button
+                onClick={() => navigate(backTo)}
+                className="flex items-center gap-1 text-slate-400 hover:text-white transition-colors text-sm"
+              >
+                <Icon name="arrow_back" size={18} />
+                {backLabel}
+              </button>
+            )}
+            {icon && (
+              <div
+                className="w-10 h-10 rounded-lg flex items-center justify-center"
+                style={{ background: `${iconColor}20`, color: iconColor }}
+              >
+                <Icon name={icon} size={22} />
+              </div>
+            )}
+            <div>
+              <h1 className="text-xl font-bold text-white font-display">{title}</h1>
+              {subtitle && <p className="text-sm text-slate-400 mt-0.5">{subtitle}</p>}
+            </div>
+          </div>
+          {headerRight}
+        </div>
+        <div className="flex-1 overflow-y-auto">{children}</div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,55 @@
+import { useState, forwardRef, type ReactNode } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Icon } from '../shared/Icon';
+
+interface DocSectionCardProps {
+  id: string;
+  title: string;
+  icon: string;
+  iconColor?: string;
+  defaultOpen?: boolean;
+  children: ReactNode;
+}
+
+export const DocSectionCard = forwardRef<HTMLElement, DocSectionCardProps>(
+  function DocSectionCard({ id, title, icon, iconColor = 'var(--color-primary)', defaultOpen = true, children }, ref) {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+
+    return (
+      <section ref={ref} id={id} className="scroll-mt-6">
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="w-full flex items-center justify-between py-3 group"
+        >
+          <div className="flex items-center gap-3">
+            <div
+              className="w-8 h-8 rounded-lg flex items-center justify-center"
+              style={{ background: `${iconColor}20`, color: iconColor }}
+            >
+              <Icon name={icon} size={18} />
+            </div>
+            <h2 className="text-base font-bold text-slate-100 font-display">{title}</h2>
+          </div>
+          <Icon
+            name={isOpen ? 'expand_less' : 'expand_more'}
+            size={20}
+            className="text-slate-500 group-hover:text-slate-300 transition-colors"
+          />
+        </button>
+        <AnimatePresence initial={false}>
+          {isOpen && (
+            <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="pb-6">{children}</div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </section>
+    );
+  }
+);

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

@@ -0,0 +1,79 @@
+import { useState, useEffect } from 'react';
+import { Icon } from '../shared/Icon';
+
+interface TocItem {
+  id: string;
+  title: string;
+  icon: string;
+}
+
+interface DocTableOfContentsProps {
+  items: TocItem[];
+  roleLabel: string;
+  roleIcon: string;
+  roleColor: string;
+}
+
+export function DocTableOfContents({ items, roleLabel, roleIcon, roleColor }: DocTableOfContentsProps) {
+  const [activeId, setActiveId] = useState(items[0]?.id ?? '');
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries.filter((e) => e.isIntersecting);
+        if (visible.length > 0) {
+          setActiveId(visible[0].target.id);
+        }
+      },
+      { rootMargin: '-80px 0px -60% 0px', threshold: 0.1 }
+    );
+
+    items.forEach(({ id }) => {
+      const el = document.getElementById(id);
+      if (el) observer.observe(el);
+    });
+
+    return () => observer.disconnect();
+  }, [items]);
+
+  const scrollTo = (id: string) => {
+    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  };
+
+  return (
+    <div className="p-4">
+      <div className="flex items-center gap-2 mb-6 px-2">
+        <div
+          className="w-8 h-8 rounded-lg flex items-center justify-center"
+          style={{ background: `${roleColor}20`, color: roleColor }}
+        >
+          <Icon name={roleIcon} size={18} />
+        </div>
+        <span className="text-sm font-bold text-white font-display">{roleLabel}</span>
+      </div>
+      <div className="text-[10px] uppercase tracking-widest text-slate-500 font-semibold px-2 mb-3">
+        Sections ({items.length})
+      </div>
+      <nav className="space-y-0.5">
+        {items.map(({ id, title, icon }) => {
+          const isActive = activeId === id;
+          return (
+            <button
+              key={id}
+              onClick={() => scrollTo(id)}
+              className="w-full flex items-center gap-2.5 px-2 py-2 rounded-lg text-left transition-all text-sm"
+              style={{
+                background: isActive ? `${roleColor}15` : 'transparent',
+                color: isActive ? roleColor : 'var(--color-text-muted)',
+                borderLeft: isActive ? `2px solid ${roleColor}` : '2px solid transparent',
+              }}
+            >
+              <Icon name={icon} size={16} />
+              <span className="truncate font-medium">{title}</span>
+            </button>
+          );
+        })}
+      </nav>
+    </div>
+  );
+}