@agile-vibe-coding/avc 0.1.1 → 0.3.1

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,329 @@
+import { useEffect, useState } from 'react';
+import { Sparkles } from 'lucide-react';
+import { useCeremonyStore } from '../../../store/ceremonyStore';
+import { getModels, getSettings, refineField } from '../../../lib/api';
+
+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,
+  },
+];
+
+// Maps model provider → apiKeys key returned by getSettings()
+function normalizeProvider(p = '') {
+  if (p === 'claude') return 'anthropic';
+  return p;
+}
+
+/**
+ * Inline "Ask a Model" panel for a single field.
+ */
+function AskModelPanel({ fieldKey, fieldLabel, currentValue, context, onApply, onClose }) {
+  const [models, setModels] = useState([]);
+  const [selectedModelId, setSelectedModelId] = useState('');
+  const [instruction, setInstruction] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    Promise.all([getModels(), getSettings()])
+      .then(([data, settings]) => {
+        setModels(data);
+        const apiKeys = settings.apiKeys ?? {};
+        const ready = data.filter((m) => apiKeys[normalizeProvider(m.provider)]?.isSet);
+        const isPro = (id) => /pro|opus|sonnet/i.test(id);
+        const best = ready.find((m) => isPro(m.modelId)) || ready[0];
+        setSelectedModelId(best ? best.modelId : (data[0]?.modelId || ''));
+      })
+      .catch(() => setError('Failed to load models.'));
+  }, []);
+
+  const selectedModel = models.find((m) => m.modelId === selectedModelId);
+  const providers = [...new Set(models.map((m) => m.provider))];
+
+  async function handleRefine() {
+    if (!selectedModel || !instruction.trim()) return;
+    setLoading(true);
+    setError('');
+    setResult(null);
+    try {
+      const data = await refineField(
+        fieldKey, fieldLabel, currentValue,
+        instruction.trim(), context,
+        selectedModelId, selectedModel.provider,
+      );
+      setResult(data.value);
+    } catch (err) {
+      setError(err.message || 'Refinement failed.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="mt-2 rounded-lg border border-blue-200 bg-blue-50/50 p-3 space-y-2">
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-semibold text-blue-700">Ask a Model — {fieldLabel}</span>
+        <button type="button" onClick={onClose} className="text-xs text-slate-400 hover:text-slate-600">
+          ×
+        </button>
+      </div>
+
+      {/* Model selector + instruction */}
+      {!result && (
+        <>
+          <div className="flex gap-2">
+            <select
+              value={selectedModelId}
+              onChange={(e) => setSelectedModelId(e.target.value)}
+              disabled={loading || models.length === 0}
+              className="flex-1 rounded-md border border-slate-300 px-2 py-1 text-xs text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-60 bg-white"
+            >
+              {models.length === 0 && <option value="">Loading…</option>}
+              {providers.map((p) => (
+                <optgroup key={p} label={p.charAt(0).toUpperCase() + p.slice(1)}>
+                  {models.filter((m) => m.provider === p).map((m) => (
+                    <option key={m.modelId} value={m.modelId}>
+                      {m.displayName}{!m.hasApiKey ? ' (no key)' : ''}
+                    </option>
+                  ))}
+                </optgroup>
+              ))}
+            </select>
+          </div>
+
+          <textarea
+            value={instruction}
+            onChange={(e) => setInstruction(e.target.value)}
+            rows={2}
+            placeholder="What would you like to improve? E.g. Be more specific about enterprise users…"
+            disabled={loading}
+            className="w-full rounded-md border border-slate-300 px-2 py-1.5 text-xs text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none disabled:opacity-60"
+          />
+
+          {error && <p className="text-xs text-red-600">{error}</p>}
+
+          <div className="flex justify-end gap-2">
+            <button type="button" onClick={onClose}
+              className="px-3 py-1 text-xs text-slate-500 hover:text-slate-700">
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={handleRefine}
+              disabled={loading || !instruction.trim() || !selectedModelId}
+              className="px-3 py-1 text-xs font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 disabled:opacity-40 flex items-center gap-1.5"
+            >
+              {loading ? (
+                <>
+                  <span className="w-3 h-3 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                  Refining…
+                </>
+              ) : 'Refine'}
+            </button>
+          </div>
+        </>
+      )}
+
+      {/* Result */}
+      {result && (
+        <>
+          <div className="text-xs text-slate-700 bg-white rounded-md border border-slate-200 px-2.5 py-2 whitespace-pre-wrap max-h-40 overflow-y-auto">
+            {result}
+          </div>
+          <div className="flex justify-end gap-2">
+            <button type="button" onClick={() => { setResult(null); setInstruction(''); }}
+              className="px-3 py-1 text-xs text-slate-500 hover:text-slate-700">
+              Try Again
+            </button>
+            <button type="button" onClick={() => { onApply(result); onClose(); }}
+              className="px-3 py-1 text-xs font-medium text-white bg-slate-900 rounded-md hover:bg-slate-700">
+              Use This
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export function ReviewAnswersStep({ onNext, onBack }) {
+  const { requirements, updateRequirement, mission, setMission, initialScope, setInitialScope } = useCeremonyStore();
+
+  // Track which field has the "Ask Model" panel open (only one at a time)
+  const [askModelField, setAskModelField] = useState(null);
+
+  const context = { mission, scope: initialScope };
+
+  const canContinue =
+    mission.trim().length > 0 &&
+    initialScope.trim().length > 0 &&
+    FIELDS.filter((f) => f.required).every((f) => requirements[f.key]?.trim());
+
+  function AskModelButton({ fieldKey }) {
+    return (
+      <button
+        type="button"
+        onClick={() => setAskModelField(askModelField === fieldKey ? null : fieldKey)}
+        className={`inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-md transition-colors ${
+          askModelField === fieldKey
+            ? 'bg-blue-100 text-blue-700'
+            : 'text-slate-400 hover:text-blue-600 hover:bg-blue-50'
+        }`}
+        title="Ask a model to improve this field"
+      >
+        <Sparkles className="w-3 h-3" />
+        Ask Model
+      </button>
+    );
+  }
+
+  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>
+          <div className="flex items-center justify-between mb-0.5">
+            <label className="block text-sm font-medium text-slate-700">
+              Mission Statement <span className="text-red-500">*</span>
+            </label>
+            <AskModelButton fieldKey="MISSION_STATEMENT" />
+          </div>
+          <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..."
+          />
+          {askModelField === 'MISSION_STATEMENT' && (
+            <AskModelPanel
+              fieldKey="MISSION_STATEMENT"
+              fieldLabel="Mission Statement"
+              currentValue={mission}
+              context={context}
+              onApply={(val) => setMission(val)}
+              onClose={() => setAskModelField(null)}
+            />
+          )}
+        </div>
+        <div>
+          <div className="flex items-center justify-between mb-0.5">
+            <label className="block text-sm font-medium text-slate-700">
+              Initial Scope <span className="text-red-500">*</span>
+            </label>
+            <AskModelButton fieldKey="INITIAL_SCOPE" />
+          </div>
+          <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..."
+          />
+          {askModelField === 'INITIAL_SCOPE' && (
+            <AskModelPanel
+              fieldKey="INITIAL_SCOPE"
+              fieldLabel="Initial Scope"
+              currentValue={initialScope}
+              context={context}
+              onApply={(val) => setInitialScope(val)}
+              onClose={() => setAskModelField(null)}
+            />
+          )}
+        </div>
+
+        <hr className="border-slate-200" />
+
+        {FIELDS.map((field) => (
+          <div key={field.key}>
+            <div className="flex items-center justify-between mb-0.5">
+              <label className="block text-sm font-medium text-slate-700">
+                {field.label}
+                {field.required && <span className="text-red-500 ml-1">*</span>}
+              </label>
+              <AskModelButton fieldKey={field.key} />
+            </div>
+            <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...'}
+            />
+            {askModelField === field.key && (
+              <AskModelPanel
+                fieldKey={field.key}
+                fieldLabel={field.label}
+                currentValue={requirements[field.key] || ''}
+                context={context}
+                onApply={(val) => updateRequirement(field.key, val)}
+                onClose={() => setAskModelField(null)}
+              />
+            )}
+          </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,249 @@
+import { useEffect, useRef, useState } 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 [showForceStop, setShowForceStop] = useState(false);
+
+  // Show "Force Stop" button after 5s of cancelling
+  useEffect(() => {
+    if (transitioning === 'cancelling') {
+      setShowForceStop(false);
+      const timer = setTimeout(() => setShowForceStop(true), 5000);
+      return () => clearTimeout(timer);
+    }
+    setShowForceStop(false);
+  }, [transitioning]);
+
+  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' ? (
+            <div className="flex items-center gap-3">
+              <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>
+              {showForceStop && (
+                <button
+                  onClick={handleForceReset}
+                  className="px-3 py-1.5 text-xs rounded-lg bg-red-600 text-white hover:bg-red-700 transition-colors"
+                >
+                  Force Stop
+                </button>
+              )}
+            </div>
+          ) : !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>
+  );
+}