@agile-vibe-coding/avc 0.1.1 → 0.2.3

package/kanban/client/src/components/ceremony/steps/MissionStep.jsx

@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import { useCeremonyStore } from '../../../store/ceremonyStore';
+import { AskModelPopup } from '../AskModelPopup';
+
+export function MissionStep({ onNext, onBack, analyzing, onOpenSettings }) {
+  const { mission, setMission, initialScope, setInitialScope } = useCeremonyStore();
+  const [showPopup, setShowPopup] = useState(false);
+
+  const canContinue = mission.trim().length > 0 && initialScope.trim().length > 0;
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold text-slate-900">Mission & Scope</h2>
+        <p className="text-sm text-slate-500 mt-1">
+          Describe what your project does and what it will deliver in the first version.
+        </p>
+      </div>
+
+      <div className="space-y-4">
+        <div>
+          <div className="flex items-center justify-between mb-1">
+            <label className="block text-sm font-medium text-slate-700">
+              Mission Statement <span className="text-red-500">*</span>
+            </label>
+            <button
+              type="button"
+              onClick={() => setShowPopup(true)}
+              className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1 transition-colors"
+            >
+              ✨ Ask a Model
+            </button>
+          </div>
+          <p className="text-xs text-slate-400 mb-2">
+            A concise statement describing the core purpose and value proposition.
+            Example: "Enable small businesses to manage inventory through an intuitive mobile-first platform."
+          </p>
+          <textarea
+            value={mission}
+            onChange={(e) => setMission(e.target.value)}
+            rows={3}
+            placeholder="Enter your mission statement..."
+            className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
+          />
+          {!mission.trim() && (
+            <p className="text-xs text-red-500 mt-1">Mission statement is required.</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">
+            Initial Scope <span className="text-red-500">*</span>
+          </label>
+          <p className="text-xs text-slate-400 mb-2">
+            Describe key features, main workflows, and core functionality for the first version.
+            Example: "Users can create tasks, assign them to team members, track progress, and set deadlines."
+          </p>
+          <textarea
+            value={initialScope}
+            onChange={(e) => setInitialScope(e.target.value)}
+            rows={4}
+            placeholder="Describe the initial scope and features..."
+            className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between pt-2">
+        <button
+          type="button"
+          onClick={onBack}
+          disabled={analyzing}
+          className="text-sm text-slate-400 hover:text-slate-600 disabled:opacity-40 transition-colors"
+        >
+          ← Back
+        </button>
+        <button
+          onClick={onNext}
+          disabled={!canContinue || analyzing}
+          className="px-5 py-2 bg-slate-900 text-white text-sm font-medium rounded-lg disabled:opacity-40 hover:bg-slate-700 transition-colors flex items-center gap-2"
+        >
+          {analyzing ? (
+            <>
+              <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+              Analysing…
+            </>
+          ) : (
+            'Continue'
+          )}
+        </button>
+      </div>
+
+      {showPopup && (
+        <AskModelPopup
+          onUse={(generatedMission, generatedScope) => {
+            setMission(generatedMission);
+            setInitialScope(generatedScope);
+            setShowPopup(false);
+          }}
+          onClose={() => setShowPopup(false)}
+          onOpenSettings={onOpenSettings}
+        />
+      )}
+    </div>
+  );
+}

package/kanban/client/src/components/ceremony/steps/ReviewAnswersStep.jsx

@@ -0,0 +1,125 @@
+import { useCeremonyStore } from '../../../store/ceremonyStore';
+
+const FIELDS = [
+  {
+    key: 'TARGET_USERS',
+    label: 'Target Users',
+    description: 'Who will use this application? List different user types and their roles.',
+    rows: 3,
+    required: true,
+  },
+  {
+    key: 'DEPLOYMENT_TARGET',
+    label: 'Deployment Target',
+    description: 'Where and how will this application be deployed?',
+    rows: 3,
+    required: true,
+  },
+  {
+    key: 'TECHNICAL_CONSIDERATIONS',
+    label: 'Technical Considerations',
+    description: 'Technology stack, architectural patterns, scalability, and performance requirements.',
+    rows: 4,
+    required: true,
+  },
+  {
+    key: 'TECHNICAL_EXCLUSIONS',
+    label: 'Technical Exclusions',
+    description:
+      'Technologies, frameworks, or services to explicitly exclude from recommendations. Leave blank if none.',
+    rows: 2,
+    required: false,
+  },
+  {
+    key: 'SECURITY_AND_COMPLIANCE_REQUIREMENTS',
+    label: 'Security & Compliance Requirements',
+    description:
+      'Security, privacy, or regulatory requirements your application must meet. Examples: GDPR compliance, PCI DSS, two-factor authentication.',
+    rows: 3,
+    required: true,
+  },
+];
+
+export function ReviewAnswersStep({ onNext, onBack }) {
+  const { requirements, updateRequirement, mission, setMission, initialScope, setInitialScope } = useCeremonyStore();
+
+  const canContinue =
+    mission.trim().length > 0 &&
+    initialScope.trim().length > 0 &&
+    FIELDS.filter((f) => f.required).every((f) => requirements[f.key]?.trim());
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold text-slate-900">Review & Edit Requirements</h2>
+        <p className="text-sm text-slate-500 mt-1">
+          AI has pre-filled these requirements based on your selections. Review and edit as needed.
+        </p>
+      </div>
+
+      <div className="space-y-4">
+        {/* Mission & Scope */}
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-0.5">
+            Mission Statement <span className="text-red-500">*</span>
+          </label>
+          <textarea
+            value={mission}
+            onChange={(e) => setMission(e.target.value)}
+            rows={3}
+            className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
+            placeholder="Required..."
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-0.5">
+            Initial Scope <span className="text-red-500">*</span>
+          </label>
+          <textarea
+            value={initialScope}
+            onChange={(e) => setInitialScope(e.target.value)}
+            rows={4}
+            className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
+            placeholder="Required..."
+          />
+        </div>
+
+        <hr className="border-slate-200" />
+
+        {FIELDS.map((field) => (
+          <div key={field.key}>
+            <label className="block text-sm font-medium text-slate-700 mb-0.5">
+              {field.label}
+              {field.required && <span className="text-red-500 ml-1">*</span>}
+            </label>
+            <p className="text-xs text-slate-400 mb-1">{field.description}</p>
+            <textarea
+              value={requirements[field.key] || ''}
+              onChange={(e) => updateRequirement(field.key, e.target.value)}
+              rows={field.rows}
+              className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
+              placeholder={field.required ? `Required...` : 'Optional...'}
+            />
+          </div>
+        ))}
+      </div>
+
+      <div className="flex items-center justify-between pt-2">
+        <button
+          type="button"
+          onClick={onBack}
+          className="text-sm text-slate-400 hover:text-slate-600 transition-colors"
+        >
+          ← Back
+        </button>
+        <button
+          onClick={onNext}
+          disabled={!canContinue}
+          className="px-5 py-2 bg-green-600 text-white text-sm font-medium rounded-lg disabled:opacity-40 hover:bg-green-700 transition-colors"
+        >
+          Generate Project Brief
+        </button>
+      </div>
+    </div>
+  );
+}

package/kanban/client/src/components/ceremony/steps/RunningStep.jsx

@@ -0,0 +1,228 @@
+import { useEffect, useRef } from 'react';
+import { ArrowDownToLine } from 'lucide-react';
+import { useCeremonyStore } from '../../../store/ceremonyStore';
+import { resetCeremony } from '../../../lib/api';
+
+function parseStageNumber(message) {
+  const m = message?.match(/Stage\s+(\d+(?:\.\d+)?)\/(\d+)/i);
+  if (m) return { current: parseFloat(m[1]), total: parseInt(m[2]) };
+  return null;
+}
+
+function buildStageGroups(progressLog) {
+  const groups = [];
+  for (const entry of progressLog) {
+    if (entry.type === 'progress') {
+      groups.push({ message: entry.message, substeps: [], orphanDetails: [] });
+    } else if (entry.type === 'substep' && groups.length > 0) {
+      groups[groups.length - 1].substeps.push({ text: entry.substep, details: [] });
+    } else if (entry.type === 'detail' && groups.length > 0) {
+      const group = groups[groups.length - 1];
+      const substeps = group.substeps;
+      if (substeps.length > 0) {
+        substeps[substeps.length - 1].details.push(entry.detail);
+      } else {
+        group.orphanDetails.push(entry.detail);
+      }
+    }
+  }
+  return groups;
+}
+
+export function RunningStep({ transitioning, onPause, onResume, onCancel, onBackground }) {
+  const { progressLog, ceremonyStatus, ceremonyError, isPaused, setWizardStep, setCeremonyStatus, setCeremonyError } = useCeremonyStore();
+  const logBottomRef = useRef(null);
+
+  const handleForceReset = async () => {
+    try { await resetCeremony(); } catch (_) {}
+    setCeremonyStatus('idle');
+    setCeremonyError(null);
+    setWizardStep(1);
+  };
+
+  useEffect(() => {
+    logBottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [progressLog]);
+
+  // Auto-advance to CompleteStep when ceremony finishes
+  useEffect(() => {
+    if (ceremonyStatus === 'complete') {
+      setWizardStep(7);
+    }
+  }, [ceremonyStatus, setWizardStep]);
+
+  const stageGroups = buildStageGroups(progressLog);
+
+  let currentStage = null;
+  let totalStages = 5;
+  for (const g of [...stageGroups].reverse()) {
+    const parsed = parseStageNumber(g.message);
+    if (parsed) {
+      currentStage = parsed.current;
+      totalStages = parsed.total;
+      break;
+    }
+  }
+
+  const progressPct = currentStage ? Math.round((currentStage / totalStages) * 100) : 5;
+  const latestProgress = stageGroups[stageGroups.length - 1]?.message || 'Starting ceremony...';
+
+  if (ceremonyStatus === 'error') {
+    const isAlreadyRunning = ceremonyError?.includes('already running');
+    return (
+      <div className="space-y-4">
+        <h2 className="text-xl font-semibold text-slate-900">Generation Failed</h2>
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+          <p className="text-sm font-medium text-red-700 mb-1">Error</p>
+          <p className="text-sm text-red-600">{ceremonyError || 'An unknown error occurred.'}</p>
+        </div>
+        {isAlreadyRunning ? (
+          <div className="space-y-3">
+            <p className="text-sm text-slate-500">
+              A ceremony is already running on the server. You can force-stop it and reset the state — this will discard any in-progress work.
+            </p>
+            <button
+              onClick={handleForceReset}
+              className="px-4 py-2 text-sm rounded-lg bg-red-600 text-white hover:bg-red-700 transition-colors"
+            >
+              Force Stop &amp; Reset
+            </button>
+          </div>
+        ) : (
+          <p className="text-sm text-slate-500">
+            Check that your API key is configured correctly in your project's <code>.env</code> file.
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold text-slate-900">Generating Documentation</h2>
+        <p className="text-sm text-slate-500 mt-1">
+          The AI is generating your project documentation. Duration varies depending on the number of validation iterations — typically a few minutes, but may take longer.
+        </p>
+      </div>
+
+      {/* Stage progress bar */}
+      <div>
+        <div className="flex items-center justify-between mb-1">
+          <span className="text-xs font-medium text-slate-600">{latestProgress}</span>
+          <span className="text-xs text-slate-400">{progressPct}%</span>
+        </div>
+        <div className="w-full bg-slate-200 rounded-full h-2">
+          <div
+            className="bg-blue-500 h-2 rounded-full transition-all duration-500"
+            style={{ width: `${progressPct}%` }}
+          />
+        </div>
+      </div>
+
+      {/* Stage log — hierarchical */}
+      <div className="bg-slate-900 rounded-lg p-4 h-56 overflow-y-auto font-mono text-xs">
+        {stageGroups.length === 0 ? (
+          <p className="text-slate-400 animate-pulse">Initializing...</p>
+        ) : (
+          <div className="space-y-2">
+            {stageGroups.map((group, gi) => {
+              const isActive = gi === stageGroups.length - 1 && ceremonyStatus === 'running';
+              return (
+                <div key={gi}>
+                  <div className="flex items-center gap-1.5">
+                    {isActive ? (
+                      <span className="inline-block w-3 h-3 border border-blue-400 border-t-blue-200 rounded-full animate-spin flex-shrink-0" />
+                    ) : (
+                      <span className="text-green-500 flex-shrink-0">✓</span>
+                    )}
+                    <span className={isActive ? 'text-blue-300 font-medium' : 'text-slate-400'}>
+                      {group.message}
+                    </span>
+                  </div>
+                  {group.orphanDetails?.length > 0 && (
+                    <div className="ml-5 mt-0.5 space-y-0.5 border-l border-slate-700 pl-2">
+                      {group.orphanDetails.map((d, di) => (
+                        <p key={di} className="text-slate-500">{d}</p>
+                      ))}
+                    </div>
+                  )}
+                  {group.substeps.length > 0 && (
+                    <div className="ml-5 mt-0.5 space-y-0.5 border-l border-slate-700 pl-2">
+                      {group.substeps.map((sub, si) => (
+                        <div key={si}>
+                          <p className="text-slate-400">{sub.text}</p>
+                          {sub.details.length > 0 && (
+                            <div className="ml-3 mt-0.5 space-y-0.5 border-l border-slate-700 pl-2">
+                              {sub.details.map((d, di) => (
+                                <p key={di} className="text-slate-500">{d}</p>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+            {transitioning === 'cancelling' && (
+              <div className="flex items-center gap-1.5 mt-1">
+                <span className="inline-block w-3 h-3 border border-red-400 border-t-red-200 rounded-full animate-spin flex-shrink-0" />
+                <span className="text-red-400 font-medium">Cancelling…</span>
+              </div>
+            )}
+            <div ref={logBottomRef} />
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-center justify-between gap-2 pt-2">
+        {/* Left: run in background */}
+        {onBackground && !transitioning && (
+          <button
+            type="button"
+            onClick={onBackground}
+            className="flex items-center gap-1.5 text-xs font-medium text-slate-500 hover:text-slate-700 bg-slate-50 hover:bg-slate-100 border border-slate-200 rounded-md px-2.5 py-1.5 transition-colors"
+            title="Hide this window — ceremony keeps running in the background"
+          >
+            <ArrowDownToLine className="w-3.5 h-3.5" />
+            Run in Background
+          </button>
+        )}
+        {transitioning && <span />}
+
+        {/* Right: pause / resume / cancel */}
+        <div className="flex items-center gap-2">
+          {transitioning === 'pausing' ? (
+            <span className="flex items-center gap-1.5 text-xs text-slate-400"><span className="inline-block w-3 h-3 border border-slate-400 border-t-slate-200 rounded-full animate-spin" />Pausing…</span>
+          ) : transitioning === 'cancelling' ? (
+            <span className="flex items-center gap-1.5 text-xs text-red-400"><span className="inline-block w-3 h-3 border border-red-400 border-t-red-200 rounded-full animate-spin" />Cancelling…</span>
+          ) : !isPaused ? (
+            <button
+              onClick={onPause}
+              className="px-4 py-2 text-sm rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50 transition-colors"
+            >
+              ⏸ Pause
+            </button>
+          ) : (
+            <button
+              onClick={onResume}
+              className="px-4 py-2 text-sm rounded-lg border border-amber-300 bg-amber-50 text-amber-700 hover:bg-amber-100 transition-colors"
+            >
+              ▶ Resume
+            </button>
+          )}
+          {!transitioning && (
+            <button
+              onClick={onCancel}
+              className="px-4 py-2 text-sm rounded-lg border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
+            >
+              ✕ Cancel
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}