yadflow 2.6.0 → 2.8.0

package/skills/yad-docs/templates/app/src/hooks/usePlayback.ts

@@ -0,0 +1,100 @@
+import { useEffect, useRef } from "react";
+import { useFlowStore } from "../store/useFlowStore";
+
+export function usePlayback() {
+  const {
+    playbackState,
+    speed,
+    activeStepIndex,
+    animatingMessages,
+    nextStep,
+    getCurrentSteps,
+    setAnimatingMessages,
+    addLog,
+    tickElapsed,
+    resetElapsed,
+  } = useFlowStore();
+
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const elapsedRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const prevStepRef = useRef<number>(-1);
+
+  // Elapsed time ticker
+  useEffect(() => {
+    if (playbackState === 'playing') {
+      elapsedRef.current = setInterval(tickElapsed, 100);
+    } else {
+      if (elapsedRef.current) clearInterval(elapsedRef.current);
+    }
+    if (playbackState === 'idle') resetElapsed();
+    return () => {
+      if (elapsedRef.current) clearInterval(elapsedRef.current);
+    };
+  }, [playbackState]);
+
+  // Generate logs on step change
+  useEffect(() => {
+    if (prevStepRef.current === activeStepIndex) return;
+    prevStepRef.current = activeStepIndex;
+
+    const steps = getCurrentSteps();
+    const currentStep = steps[activeStepIndex];
+    if (!currentStep) return;
+
+    addLog({
+      level: 'info',
+      source: currentStep.actor.toUpperCase(),
+      message: `Step ${activeStepIndex + 1}: ${currentStep.title}`,
+    });
+
+    for (const msg of currentStep.messages) {
+      setTimeout(() => {
+        addLog({
+          level: 'info',
+          source: msg.from,
+          message: `${msg.type}: ${msg.label} → ${msg.to}`,
+        });
+      }, msg.delay / speed);
+    }
+  }, [activeStepIndex, speed]);
+
+  useEffect(() => {
+    if (playbackState !== "playing") {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      return;
+    }
+
+    const steps = getCurrentSteps();
+    const currentStep = steps[activeStepIndex];
+    if (!currentStep) return;
+
+    // Calculate total duration for current step messages
+    const messages = currentStep.messages;
+    const lastMessage = messages[messages.length - 1];
+    const totalAnimDuration = lastMessage
+      ? (lastMessage.delay + lastMessage.duration) / speed
+      : 1000 / speed;
+
+    // Trigger message animations
+    if (!animatingMessages) {
+      setAnimatingMessages(true);
+    }
+
+    // Wait for animations + pause, then advance
+    const baseDelay = 3000 / speed;
+    const stepDuration = totalAnimDuration + baseDelay;
+
+    timerRef.current = setTimeout(() => {
+      const isLast = activeStepIndex >= steps.length - 1;
+      if (!isLast) {
+        nextStep();
+      } else {
+        useFlowStore.getState().pause();
+      }
+    }, stepDuration);
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [playbackState, activeStepIndex, speed, animatingMessages]);
+}

package/skills/yad-docs/templates/app/src/hooks/useStakeholderFilter.ts

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+import { useFlowStore } from '../store/useFlowStore';
+import type { StakeholderView } from '../data/types';
+
+export function useStakeholderFilter<T extends { visibleTo: StakeholderView[] }>(
+  items: T[]
+): T[] {
+  const view = useFlowStore((s) => s.stakeholderView);
+  return useMemo(() => items.filter((item) => item.visibleTo.includes(view)), [items, view]);
+}

package/skills/yad-docs/templates/app/src/index.css

@@ -0,0 +1,121 @@
+@import "tailwindcss";
+
+@layer base {
+  :root {
+    --color-bg-primary: #141118;
+    --color-bg-secondary: #1e1a25;
+    --color-bg-tertiary: #2f2938;
+    --color-bg-brand-soft: #1a0244;
+    --color-bg-accent-soft: #25060e;
+
+    --color-surface-dark: #1e1a25;
+    --color-surface-highlight: #2f2938;
+    --color-surface-darker: #0f0e13;
+
+    --color-text-primary: #ffffff;
+    --color-text-secondary: #a8a4b2;
+    --color-text-muted: #767284;
+
+    --color-primary: #6116da;
+    --color-primary-hover: #7a2ce0;
+    --color-primary-soft: #35087c;
+
+    --color-accent: #ff6490;
+    --color-accent-hover: #fb2576;
+    --color-accent-soft: #4f0520;
+
+    --color-border-light: #453c53;
+    --color-border-default: #342e40;
+    --color-border-strong: #141118;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  html, body, #root {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  body {
+    font-family: 'Noto Sans', system-ui, -apple-system, sans-serif;
+    background: var(--color-bg-primary);
+    color: var(--color-text-primary);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: 'Space Grotesk', sans-serif;
+  }
+
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--color-bg-primary);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-surface-highlight);
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--color-border-light);
+  }
+}
+
+/* Utility classes */
+.glass-panel {
+  background: rgba(47, 41, 56, 0.4);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.flow-grid {
+  background-size: 40px 40px;
+  background-image:
+    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+}
+
+.code-block {
+  font-family: 'Courier New', Courier, monospace;
+  background: var(--color-surface-darker);
+  border: 1px solid var(--color-surface-highlight);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+}
+
+.font-display {
+  font-family: 'Space Grotesk', sans-serif;
+}
+
+.font-body {
+  font-family: 'Noto Sans', sans-serif;
+}
+
+/* Logs terminal scrollbar */
+.logs-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.logs-scrollbar::-webkit-scrollbar-track {
+  background: var(--color-surface-darker);
+}
+
+.logs-scrollbar::-webkit-scrollbar-thumb {
+  background: #4a4059;
+  border-radius: 10px;
+}
+
+.logs-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #5d5270;
+}

package/skills/yad-docs/templates/app/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import './index.css'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <BrowserRouter basename={import.meta.env.BASE_URL}>
+      <App />
+    </BrowserRouter>
+  </StrictMode>,
+)

package/skills/yad-docs/templates/app/src/pages/RoleSelectPage.tsx

@@ -0,0 +1,34 @@
+import { DocPageShell } from '../components/DocLayout/DocPageShell';
+import { RoleCard } from '../components/DocLayout/RoleCard';
+import { ROLES } from '../data/roles';
+
+export function RoleSelectPage() {
+  return (
+    <DocPageShell
+      title="Documentation Hub"
+      subtitle="Select your role to see tailored documentation for the Booking Status Sync feature"
+      icon="menu_book"
+      backTo="/"
+      backLabel="Dashboard"
+    >
+      <div className="p-8 max-w-5xl mx-auto">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {ROLES.map((role) => (
+            <RoleCard key={role.slug} role={role} />
+          ))}
+        </div>
+
+        <div
+          className="mt-8 rounded-xl border p-5 text-center"
+          style={{ background: 'rgba(20,17,24,0.3)', borderColor: 'var(--color-border-default)' }}
+        >
+          <p className="text-sm text-slate-400">
+            Each role page includes tailored documentation sections and relevant flow paths.
+            <br />
+            <span className="text-slate-500">Use the Reference panel (top nav) for quick-access to the legend and rules.</span>
+          </p>
+        </div>
+      </div>
+    </DocPageShell>
+  );
+}

package/skills/yad-docs/templates/app/src/pages/StakeholderDocPage.tsx

@@ -0,0 +1,98 @@
+import { useParams, useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
+import { DocPageShell } from '../components/DocLayout/DocPageShell';
+import { DocTableOfContents } from '../components/DocLayout/DocTableOfContents';
+import { DocSectionCard } from '../components/DocLayout/DocSectionCard';
+import { getRoleBySlug } from '../data/roles';
+import { DOC_SECTIONS } from '../data/docSections';
+import { useFlowStore } from '../store/useFlowStore';
+import { Icon } from '../components/shared/Icon';
+import type { StakeholderView } from '../data/types';
+
+export function StakeholderDocPage() {
+  const { roleSlug } = useParams<{ roleSlug: string }>();
+  const navigate = useNavigate();
+  const setStakeholderView = useFlowStore((s) => s.setStakeholderView);
+
+  const role = getRoleBySlug(roleSlug ?? '');
+
+  useEffect(() => {
+    if (role) {
+      setStakeholderView(role.slug as StakeholderView);
+    }
+  }, [role, setStakeholderView]);
+
+  if (!role) {
+    return (
+      <DocPageShell title="Role Not Found" backTo="/docs" backLabel="Back to Docs">
+        <div className="flex items-center justify-center h-full">
+          <div className="text-center">
+            <Icon name="error_outline" size={48} className="text-slate-600 mb-3" />
+            <p className="text-slate-400">Unknown role: {roleSlug}</p>
+            <button
+              onClick={() => navigate('/docs')}
+              className="mt-4 px-4 py-2 rounded-lg text-sm font-medium text-white"
+              style={{ background: 'var(--color-primary)' }}
+            >
+              Back to Documentation Hub
+            </button>
+          </div>
+        </div>
+      </DocPageShell>
+    );
+  }
+
+  const sections = role.sectionIds
+    .map((id) => DOC_SECTIONS[id])
+    .filter(Boolean);
+
+  const tocItems = sections.map((s) => ({ id: s.id, title: s.title, icon: s.icon }));
+
+  return (
+    <DocPageShell
+      title={role.label}
+      subtitle={role.description}
+      icon={role.icon}
+      iconColor={role.color}
+      backTo="/docs"
+      backLabel="All Roles"
+      headerRight={
+        <button
+          onClick={() => navigate('/')}
+          className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+          style={{ background: `${role.color}20`, color: role.color }}
+          onMouseEnter={(e) => (e.currentTarget.style.background = `${role.color}30`)}
+          onMouseLeave={(e) => (e.currentTarget.style.background = `${role.color}20`)}
+        >
+          <Icon name="play_circle" size={18} />
+          Open Visualizer
+        </button>
+      }
+      sidebar={
+        <DocTableOfContents
+          items={tocItems}
+          roleLabel={role.shortLabel}
+          roleIcon={role.icon}
+          roleColor={role.color}
+        />
+      }
+    >
+      <div className="p-8 max-w-4xl space-y-2">
+        {sections.map((section) => {
+          const Component = section.component;
+          return (
+            <DocSectionCard
+              key={section.id}
+              id={section.id}
+              title={section.title}
+              icon={section.icon}
+              iconColor={section.iconColor}
+            >
+              <Component />
+            </DocSectionCard>
+          );
+        })}
+      </div>
+    </DocPageShell>
+  );
+}

package/skills/yad-docs/templates/app/src/pages/SubPathDetailPage.tsx

@@ -0,0 +1,282 @@
+import { useParams, useNavigate } from 'react-router-dom';
+import { useMemo, useState } from 'react';
+import { PATHS } from '../data/paths';
+import { useFlowStore } from '../store/useFlowStore';
+import { Icon } from '../components/shared/Icon';
+
+export function SubPathDetailPage() {
+  const { pathId } = useParams<{ pathId: string }>();
+  const navigate = useNavigate();
+  const selectPath = useFlowStore((s) => s.selectPath);
+  const [activeTab, setActiveTab] = useState(0);
+
+  const path = useMemo(() => {
+    const id = parseInt(pathId || '0');
+    return PATHS.find((p) => p.id === id);
+  }, [pathId]);
+
+  if (!path) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <div className="text-center">
+          <Icon name="error" size={48} className="text-slate-500 mb-4" />
+          <h2 className="text-xl font-bold text-white mb-2">Path Not Found</h2>
+          <button
+            onClick={() => navigate('/')}
+            className="text-sm px-4 py-2 rounded-lg"
+            style={{ background: 'var(--color-primary)', color: 'white' }}
+          >
+            Go Back
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const subPaths = path.subPaths || [];
+  const currentSubPath = subPaths[activeTab];
+  const steps = currentSubPath?.steps || path.steps;
+
+  return (
+    <main className="flex-1 flex flex-col overflow-y-auto px-6 py-8 max-w-7xl mx-auto w-full">
+      {/* Header */}
+      <header className="mb-8">
+        <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
+          <div>
+            <div className="flex items-center gap-2 mb-2">
+              <span className="px-2 py-0.5 rounded text-xs font-bold uppercase tracking-wider"
+                style={{ background: `${path.color}25`, color: path.color, border: `1px solid ${path.color}40` }}
+              >
+                Path {path.id}
+              </span>
+              <button
+                onClick={() => navigate('/')}
+                className="text-slate-400 text-sm hover:text-white transition-colors"
+              >
+                / Dashboard
+              </button>
+            </div>
+            <h2 className="text-3xl md:text-4xl font-bold text-white font-display mb-2">
+              {path.label}
+            </h2>
+            <p className="text-slate-400 max-w-2xl text-lg">{path.description}</p>
+          </div>
+          <div className="flex gap-3">
+            <button className="px-4 py-2 rounded-lg border text-white text-sm font-medium flex items-center gap-2 transition-colors"
+              style={{
+                background: 'var(--color-surface-dark)',
+                borderColor: 'var(--color-border-default)',
+              }}
+            >
+              <Icon name="download" size={18} />
+              Export PDF
+            </button>
+            <button
+              onClick={() => { selectPath(path.id); navigate('/'); }}
+              className="px-4 py-2 rounded-lg text-white text-sm font-medium flex items-center gap-2 transition-colors"
+              style={{
+                background: 'var(--color-primary)',
+                boxShadow: '0 4px 15px rgba(97,22,218,0.2)',
+              }}
+            >
+              <Icon name="play_arrow" size={18} />
+              Simulate Path
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* Sub-path tabs */}
+      {subPaths.length > 0 && (
+        <div className="border-b mb-8" style={{ borderColor: 'var(--color-border-default)' }}>
+          <div className="flex gap-8 overflow-x-auto pb-px">
+            {subPaths.map((sub, idx) => (
+              <button
+                key={sub.id}
+                onClick={() => setActiveTab(idx)}
+                className="group flex flex-col items-center gap-3 min-w-[140px] cursor-pointer"
+              >
+                <span className={`font-medium text-sm ${idx === activeTab ? 'text-[var(--color-primary)] font-bold' : 'text-slate-400 hover:text-white'} transition-colors`}>
+                  {sub.id}. {sub.label}
+                </span>
+                <div className={`h-0.5 w-full rounded-t-full ${idx === activeTab ? 'bg-[var(--color-primary)]' : 'bg-transparent hover:bg-[var(--color-border-default)]'} transition-colors`} />
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Content Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
+        {/* Left: System State & Side Effects Table */}
+        <div className="lg:col-span-2 flex flex-col gap-6">
+          {/* System State */}
+          <div className="rounded-xl p-6 border shadow-xl relative overflow-hidden"
+            style={{
+              background: 'var(--color-surface-dark)',
+              borderColor: 'var(--color-border-default)',
+            }}
+          >
+            <h3 className="text-xl font-bold text-white mb-6 flex items-center gap-2 font-display">
+              <Icon name="schema" size={20} className="text-[var(--color-primary)]" />
+              System State Visualization
+            </h3>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              {steps[0]?.activeComponents.slice(0, 3).map((compId, idx) => (
+                <div key={compId} className="flex items-center gap-4">
+                  <div className="rounded-lg p-4 flex flex-col gap-3 flex-1 border"
+                    style={{
+                      background: 'var(--color-bg-primary)',
+                      borderColor: idx === 0 ? 'rgba(97,22,218,0.5)' : 'var(--color-border-default)',
+                    }}
+                  >
+                    <div className="text-slate-300 text-sm font-semibold uppercase tracking-wider">
+                      {compId.replace(/-/g, ' ')}
+                    </div>
+                    <div className="text-xs text-slate-500">
+                      Status: <span className="text-slate-300 font-mono">{steps[0]?.status}</span>
+                    </div>
+                  </div>
+                  {idx < 2 && (
+                    <Icon name="arrow_forward" size={20} className="text-slate-600 hidden md:block shrink-0" />
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Side Effects Table */}
+          <div className="rounded-xl border overflow-hidden"
+            style={{
+              background: 'var(--color-surface-dark)',
+              borderColor: 'var(--color-border-default)',
+            }}
+          >
+            <div className="px-6 py-4 border-b flex justify-between items-center"
+              style={{
+                borderColor: 'var(--color-border-default)',
+                background: 'var(--color-bg-primary)',
+              }}
+            >
+              <h3 className="text-white font-bold text-lg flex items-center gap-2 font-display">
+                <Icon name="table_chart" size={20} className="text-slate-400" />
+                Scenario Side Effects
+              </h3>
+            </div>
+            <div className="overflow-x-auto">
+              <table className="w-full text-left text-sm">
+                <thead>
+                  <tr className="border-b" style={{ borderColor: 'var(--color-border-default)', color: 'var(--color-text-muted)' }}>
+                    <th className="px-6 py-3 font-medium">Step</th>
+                    <th className="px-6 py-3 font-medium">Status</th>
+                    <th className="px-6 py-3 font-medium">Side Effects</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {steps.map((step) => (
+                    <tr key={step.id} className="border-t hover:bg-white/5 transition-colors"
+                      style={{ borderColor: 'var(--color-border-default)' }}
+                    >
+                      <td className="px-6 py-4 font-medium text-white">{step.title}</td>
+                      <td className="px-6 py-4">
+                        <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium"
+                          style={{
+                            background: 'rgba(97,22,218,0.1)',
+                            color: 'var(--color-primary)',
+                          }}
+                        >
+                          {step.bookingStatus}
+                        </span>
+                      </td>
+                      <td className="px-6 py-4 text-slate-400">
+                        {Object.entries(step.sideEffects)
+                          .filter(([, v]) => v)
+                          .map(([k, v]) => `${k}: ${v}`)
+                          .join(', ') || 'None'}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+
+        {/* Right: Step Detail Panel */}
+        <div className="flex flex-col gap-6">
+          <div className="rounded-xl p-6 border h-full"
+            style={{
+              background: 'var(--color-surface-dark)',
+              borderColor: 'var(--color-border-default)',
+            }}
+          >
+            <div className="flex items-center justify-between mb-6">
+              <h2 className="text-white text-xl font-bold font-display">Step Detail Panel</h2>
+              <div className="p-2 rounded-lg" style={{ background: 'rgba(97,22,218,0.2)' }}>
+                <Icon name="info" size={20} className="text-[var(--color-primary)]" />
+              </div>
+            </div>
+
+            <div className="space-y-6">
+              {/* Pre-conditions */}
+              <div>
+                <h4 className="text-slate-400 text-xs font-bold uppercase tracking-wider mb-2">Pre-conditions</h4>
+                <ul className="space-y-2">
+                  {steps[0] && (
+                    <>
+                      <li className="flex items-start gap-2 text-sm text-slate-300">
+                        <Icon name="check_circle" size={18} className="text-emerald-400 shrink-0" />
+                        <span>Status is <code className="px-1 rounded text-xs" style={{ background: 'var(--color-bg-primary)', color: 'var(--color-primary)' }}>{steps[0].status}</code></span>
+                      </li>
+                      <li className="flex items-start gap-2 text-sm text-slate-300">
+                        <Icon name="check_circle" size={18} className="text-emerald-400 shrink-0" />
+                        <span>Trigger: {steps[0].trigger}</span>
+                      </li>
+                    </>
+                  )}
+                </ul>
+              </div>
+
+              <div className="h-px w-full" style={{ background: 'var(--color-border-default)' }} />
+
+              {/* Critical Logic */}
+              <div>
+                <h4 className="text-slate-400 text-xs font-bold uppercase tracking-wider mb-2">Critical Logic</h4>
+                <div className="p-4 rounded-r-lg border-l-2"
+                  style={{
+                    background: 'var(--color-bg-primary)',
+                    borderLeftColor: 'var(--color-primary)',
+                  }}
+                >
+                  <p className="text-sm text-slate-300 leading-relaxed">
+                    {steps[0]?.description || 'No description available.'}
+                  </p>
+                </div>
+              </div>
+
+              {/* Component Flags */}
+              {steps[0] && (
+                <div>
+                  <h4 className="text-slate-400 text-xs font-bold uppercase tracking-wider mb-2">Component Flags</h4>
+                  <div className="grid grid-cols-2 gap-3">
+                    {steps[0].activeComponents.map((comp) => (
+                      <div key={comp} className="p-3 rounded border"
+                        style={{
+                          background: 'var(--color-bg-primary)',
+                          borderColor: 'var(--color-border-default)',
+                        }}
+                      >
+                        <div className="text-xs text-slate-500 mb-1">{comp}</div>
+                        <div className="text-emerald-400 font-mono text-sm">ACTIVE</div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}