@agile-vibe-coding/avc 0.2.3 → 0.3.1

package/kanban/client/src/components/ceremony/SprintPlanningModal.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
-import { X, Info, ArrowDownToLine } from 'lucide-react';
+import { X, Settings, ArrowDownToLine } from 'lucide-react';
 import { useSprintPlanningStore } from '../../store/sprintPlanningStore';
-import { runSprintPlanning, getSettings, getModels, saveCeremonies, pauseCeremony, resumeCeremony, cancelCeremony, resetCeremony } from '../../lib/api';
+import { runSprintPlanning, getSprintPlanningResumable, getSettings, getModels, saveCeremonies, pauseCeremony, resumeCeremony, cancelCeremony, resetCeremony } from '../../lib/api';
 import { CeremonyWorkflowModal } from './CeremonyWorkflowModal';
 
 // ── Step progress header ─────────────────────────────────────────────────────
@@ -55,7 +55,7 @@ function Stat({ label, value }) {
 
 // ── Step 1: Ready ─────────────────────────────────────────────────────────────
 
-function ReadyStep({ onStart }) {
+function ReadyStep({ onStart, onResume, resumeInfo }) {
   return (
     <div className="space-y-6">
       <div>
@@ -65,12 +65,39 @@ function ReadyStep({ onStart }) {
         </p>
       </div>
 
-      <div className="flex items-center justify-end pt-2">
+      {resumeInfo && (
+        <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 space-y-2">
+          <p className="text-sm font-medium text-amber-800">Previous run can be resumed</p>
+          <p className="text-xs text-amber-600">
+            Stopped at: <span className="font-medium">{resumeInfo.checkpointLabel}</span>
+            {resumeInfo.epics > 0 && <> &middot; {resumeInfo.epics} epics on disk</>}
+          </p>
+          {resumeInfo.timestamp && (
+            <p className="text-xs text-amber-500">
+              {new Date(resumeInfo.timestamp).toLocaleString()}
+            </p>
+          )}
+        </div>
+      )}
+
+      <div className="flex items-center justify-end gap-3 pt-2">
+        {resumeInfo && (
+          <button
+            onClick={onResume}
+            className="px-5 py-2 text-sm font-medium bg-amber-600 text-white rounded-lg hover:bg-amber-500 transition-colors"
+          >
+            Resume
+          </button>
+        )}
         <button
           onClick={onStart}
-          className="px-5 py-2 text-sm font-medium bg-slate-900 text-white rounded-lg hover:bg-slate-700 transition-colors"
+          className={`px-5 py-2 text-sm font-medium rounded-lg transition-colors ${
+            resumeInfo
+              ? 'border border-slate-200 text-slate-700 hover:bg-slate-50'
+              : 'bg-slate-900 text-white hover:bg-slate-700'
+          }`}
         >
-          Start
+          {resumeInfo ? 'Start Fresh' : 'Start'}
         </button>
       </div>
     </div>
@@ -454,9 +481,74 @@ function CompleteStep({ onClose }) {
   );
 }
 
+// ── Quota-limit pause overlay ─────────────────────────────────────────────────
+
+function QuotaLimitOverlay({ quotaLimitPending, onContinueAfterQuota, onCancel, onConfigureModels }) {
+  const [resuming, setResuming] = useState(false);
+
+  // Resume reads the current settings so any model change made via Configure Models is picked up.
+  async function handleResume() {
+    setResuming(true);
+    try {
+      const s = await getSettings();
+      const ceremony = s.ceremonies?.find(c => c.name === 'sprint-planning');
+      const newProvider = ceremony?.stages?.validation?.provider || null;
+      const newModel = ceremony?.stages?.validation?.model || null;
+      await onContinueAfterQuota(newProvider, newModel);
+    } finally {
+      setResuming(false);
+    }
+  }
+
+  return (
+    <div className="absolute inset-0 z-20 flex items-center justify-center bg-white/90 rounded-2xl">
+      <div className="bg-white border border-red-200 rounded-xl shadow-lg p-6 max-w-sm mx-4 text-center space-y-4">
+        <div className="text-3xl">⚠️</div>
+        <p className="text-base font-semibold text-slate-900">API Quota Exceeded</p>
+        <p className="text-sm text-slate-600">
+          <span className="font-mono font-medium">{quotaLimitPending.provider}</span>
+          {' / '}
+          <span className="font-mono text-xs">{quotaLimitPending.model}</span>
+          {' returned a quota error.'}
+        </p>
+        {quotaLimitPending.validatorName && (
+          <p className="text-xs text-slate-400">
+            Validator: {quotaLimitPending.validatorName.replace('validator-story-', '').replace('validator-epic-', '')}
+          </p>
+        )}
+        <p className="text-sm text-slate-500">The ceremony is paused. What would you like to do?</p>
+        <div className="flex flex-col gap-2 pt-1">
+          <button
+            onClick={handleResume}
+            disabled={resuming}
+            className="px-4 py-2 text-sm rounded-lg bg-slate-900 text-white hover:bg-slate-700 disabled:opacity-50"
+          >
+            {resuming ? 'Resuming…' : 'Resume'}
+          </button>
+          <button
+            onClick={onConfigureModels}
+            className="px-4 py-2 text-sm rounded-lg border border-slate-200 text-slate-700 hover:bg-slate-50"
+          >
+            Configure Models
+          </button>
+          <button
+            onClick={onCancel}
+            className="px-4 py-2 text-sm rounded-lg border border-red-200 text-red-600 hover:bg-red-50"
+          >
+            Cancel Ceremony
+          </button>
+        </div>
+        <p className="text-xs text-slate-400">
+          Use <strong>Configure Models</strong> to switch provider, then <strong>Resume</strong>.
+        </p>
+      </div>
+    </div>
+  );
+}
+
 // ── Main modal ────────────────────────────────────────────────────────────────
 
-export function SprintPlanningModal({ onClose, costLimitPending, onContinuePastCostLimit, onCancelFromCostLimit }) {
+export function SprintPlanningModal({ onClose, costLimitPending, onContinuePastCostLimit, onCancelFromCostLimit, quotaLimitPending, onContinueAfterQuota, onCancelFromQuota }) {
   const {
     isOpen,
     step,
@@ -473,8 +565,19 @@ export function SprintPlanningModal({ onClose, costLimitPending, onContinuePastC
   const [workflowCeremony, setWorkflowCeremony] = useState(null);
   const [workflowModels, setWorkflowModels] = useState([]);
   const [workflowAllCeremonies, setWorkflowAllCeremonies] = useState([]);
+  const [workflowApiKeys, setWorkflowApiKeys] = useState({});
   const [showCancelConfirm, setShowCancelConfirm] = useState(false);
   const [transitioning, setTransitioning] = useState(null); // null | 'pausing' | 'cancelling'
+  const [resumeInfo, setResumeInfo] = useState(null);
+
+  // Fetch resumable state when modal opens at step 1
+  useEffect(() => {
+    if (isOpen && step === 1 && status !== 'running') {
+      getSprintPlanningResumable()
+        .then(data => setResumeInfo(data?.resumable ? data : null))
+        .catch(() => setResumeInfo(null));
+    }
+  }, [isOpen, step, status]);
 
   if (!isOpen) return null;
 
@@ -486,11 +589,12 @@ export function SprintPlanningModal({ onClose, costLimitPending, onContinuePastC
     onClose?.();
   };
 
-  const handleStart = async () => {
+  const handleStart = async (resumeFromCheckpoint = null) => {
     setStatus('running');
     setStep(2);
+    setResumeInfo(null);
     try {
-      const result = await runSprintPlanning();
+      const result = await runSprintPlanning(resumeFromCheckpoint);
       if (result?.processId) setProcessId(result.processId);
       // Completion is handled via WebSocket in App.jsx
     } catch (err) {
@@ -506,6 +610,7 @@ export function SprintPlanningModal({ onClose, costLimitPending, onContinuePastC
       setWorkflowCeremony(sc);
       setWorkflowModels(m);
       setWorkflowAllCeremonies(s.ceremonies || []);
+      setWorkflowApiKeys(s.apiKeys || {});
       setWorkflowOpen(true);
     } catch {}
   };
@@ -527,10 +632,10 @@ export function SprintPlanningModal({ onClose, costLimitPending, onContinuePastC
     try { await resumeCeremony(); } catch (_) {}
   };
 
-  const handleConfirmCancel = async () => {
+  const handleConfirmCancel = async (keepItems = false) => {
     setShowCancelConfirm(false);
     setTransitioning('cancelling');
-    try { await cancelCeremony(); } catch (_) {}
+    try { await cancelCeremony(keepItems); } catch (_) {}
   };
 
   // Clear transitioning state when WS events arrive (isPaused / status change)
@@ -544,7 +649,13 @@ export function SprintPlanningModal({ onClose, costLimitPending, onContinuePastC
 
   const renderStep = () => {
     switch (step) {
-      case 1: return <ReadyStep onStart={handleStart} />;
+      case 1: return (
+          <ReadyStep
+            onStart={() => handleStart(null)}
+            onResume={() => handleStart(resumeInfo?.checkpoint)}
+            resumeInfo={resumeInfo}
+          />
+        );
       case 2: return (
         <RunningStep
           transitioning={transitioning}
@@ -611,15 +722,25 @@ export function SprintPlanningModal({ onClose, costLimitPending, onContinuePastC
           </div>
         )}
 
+        {/* Quota-limit pause overlay */}
+        {quotaLimitPending && (
+          <QuotaLimitOverlay
+            quotaLimitPending={quotaLimitPending}
+            onContinueAfterQuota={onContinueAfterQuota}
+            onCancel={onCancelFromQuota}
+            onConfigureModels={openWorkflow}
+          />
+        )}
+
         {/* Cancel confirmation overlay */}
         {showCancelConfirm && (
           <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/90 rounded-2xl">
             <div className="bg-white border border-slate-200 rounded-xl shadow-lg p-6 max-w-sm mx-4 text-center space-y-4">
               <p className="text-base font-semibold text-slate-900">Cancel sprint planning?</p>
               <p className="text-sm text-slate-500">
-                Any epics and stories created in this run will be permanently deleted.
+                What should happen with epics and stories already created in this run?
               </p>
-              <div className="flex gap-3 justify-center pt-1">
+              <div className="flex flex-col gap-2 pt-1">
                 <button
                   onClick={() => setShowCancelConfirm(false)}
                   className="px-4 py-2 text-sm rounded-lg border border-slate-200 text-slate-700 hover:bg-slate-50"
@@ -627,10 +748,16 @@ export function SprintPlanningModal({ onClose, costLimitPending, onContinuePastC
                   Keep Running
                 </button>
                 <button
-                  onClick={handleConfirmCancel}
+                  onClick={() => handleConfirmCancel(true)}
+                  className="px-4 py-2 text-sm rounded-lg border border-amber-300 bg-amber-50 text-amber-700 hover:bg-amber-100"
+                >
+                  Cancel &amp; Keep Items
+                </button>
+                <button
+                  onClick={() => handleConfirmCancel(false)}
                   className="px-4 py-2 text-sm rounded-lg bg-red-600 text-white hover:bg-red-700"
                 >
-                  Cancel Run
+                  Cancel &amp; Delete Items
                 </button>
               </div>
             </div>
@@ -650,11 +777,11 @@ export function SprintPlanningModal({ onClose, costLimitPending, onContinuePastC
               <button
                 type="button"
                 onClick={openWorkflow}
-                className="flex items-center gap-1 text-xs text-slate-400 hover:text-blue-500 transition-colors whitespace-nowrap"
-                title="View ceremony workflow"
+                className="flex items-center gap-1.5 text-xs font-medium text-slate-500 hover:text-blue-600 bg-slate-50 hover:bg-blue-50 border border-slate-200 hover:border-blue-200 rounded-md px-2.5 py-1.5 transition-colors whitespace-nowrap"
+                title="Configure ceremony models"
               >
-                <Info className="w-3.5 h-3.5" />
-                How it works
+                <Settings className="w-3.5 h-3.5" />
+                Select Model(s)
               </button>
             )}
             {!isBlocked && (
@@ -693,10 +820,17 @@ export function SprintPlanningModal({ onClose, costLimitPending, onContinuePastC
       {workflowOpen && workflowCeremony && (
         <CeremonyWorkflowModal
           ceremony={workflowCeremony}
+          allCeremonies={workflowAllCeremonies}
+          apiKeys={workflowApiKeys}
           models={workflowModels}
-          readOnly={status === 'running'}
-          onSave={status !== 'running' ? handleWorkflowSave : undefined}
+          readOnly={status === 'running' && !quotaLimitPending}
+          onSave={(status !== 'running' || quotaLimitPending) ? handleWorkflowSave : undefined}
           onClose={() => setWorkflowOpen(false)}
+          onCeremoniesUpdated={(updated) => {
+            setWorkflowAllCeremonies(updated);
+            const sc = updated.find((c) => c.name === 'sprint-planning');
+            if (sc) setWorkflowCeremony(sc);
+          }}
         />
       )}
     </div>

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

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { Wand2 } from 'lucide-react';
 import { useCeremonyStore } from '../../../store/ceremonyStore';
 import { AskArchPopup } from '../AskArchPopup';
 
@@ -73,7 +72,17 @@ export function ArchitectureStep({ onNext, onBack, analyzing, onOpenSettings })
   return (
     <div className="space-y-6">
       <div>
-        <h2 className="text-xl font-semibold text-slate-900">Architecture Selection</h2>
+        <div className="flex items-center justify-between">
+          <h2 className="text-xl font-semibold text-slate-900">Architecture Selection</h2>
+          <button
+            type="button"
+            onClick={() => setShowAskArch(true)}
+            disabled={analyzing}
+            className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1 transition-colors disabled:opacity-40"
+          >
+            ✨ Ask a Model
+          </button>
+        </div>
         <p className="text-sm text-slate-500 mt-1">
           Choose the deployment architecture that fits your project best.
         </p>
@@ -100,15 +109,6 @@ export function ArchitectureStep({ onNext, onBack, analyzing, onOpenSettings })
           ← Back
         </button>
         <div className="flex items-center gap-3">
-          <button
-            type="button"
-            onClick={() => setShowAskArch(true)}
-            disabled={analyzing}
-            className="flex items-center gap-1.5 px-3 py-2 text-sm text-violet-700 bg-violet-50 border border-violet-200 rounded-lg hover:bg-violet-100 disabled:opacity-40 transition-colors"
-          >
-            <Wand2 className="w-3.5 h-3.5" />
-            Ask a Model
-          </button>
           <button
             type="button"
             onClick={onNext}

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

@@ -1,13 +1,5 @@
 import { useCeremonyStore } from '../../../store/ceremonyStore';
 
-const EXAMPLE_ISSUES = [
-  { stage: 'Project Documentation', ruleId: 'fix-header-formatting',   name: 'Fix Header Spacing',              severity: 'major'  },
-  { stage: 'Project Documentation', ruleId: 'add-section-spacing',     name: 'Add Section Spacing',             severity: 'minor'  },
-  { stage: 'Project Context',       ruleId: 'token-count-too-short',   name: 'Expand If Too Short',             severity: 'major'  },
-  { stage: 'Project Context',       ruleId: 'no-redundant-info',       name: 'Remove Truly Redundant Information', severity: 'minor' },
-  { stage: 'Context Validation',    ruleId: 'fix-unclosed-code-blocks', name: 'Fix Unclosed Code Blocks',       severity: 'major'  },
-];
-
 function IssueTag({ severity }) {
   const cls =
     severity === 'critical' ? 'bg-red-100 text-red-700' :
@@ -46,20 +38,12 @@ export function CompleteStep({ onClose }) {
   const tokenInput = r.tokenUsage?.input || r.tokenUsage?.inputTokens || 0;
   const tokenOutput = r.tokenUsage?.output || r.tokenUsage?.outputTokens || 0;
   const tokenTotal = r.tokenUsage?.total || r.tokenUsage?.totalTokens || tokenInput + tokenOutput;
-  const costTotal =
-    r.cost?.total != null
-      ? `$${r.cost.total.toFixed(4)}`
-      : r.cost
-        ? `$${Object.values(r.cost).reduce((a, v) => a + (typeof v === 'number' ? v : 0), 0).toFixed(4)}`
-        : '—';
-
   const files = r.outputPath && r.contextPath
     ? [r.outputPath, r.contextPath]
     : r.filesGenerated || [];
 
-  // undefined → show example preview; [] → no issues (hide); [...] → real data
-  const isExample = r.validationIssues === undefined;
-  const rawIssues = r.validationIssues ?? EXAMPLE_ISSUES;
+  // Only show real validation issues; never show the example preview
+  const rawIssues = Array.isArray(r.validationIssues) ? r.validationIssues : [];
 
   // Group duplicate rule applications by ruleId
   const issueMap = {};
@@ -96,10 +80,9 @@ export function CompleteStep({ onClose }) {
         </div>
       )}
 
-      <div className="grid grid-cols-3 gap-3">
+      <div className="grid grid-cols-2 gap-3">
         <Stat label="Input tokens" value={tokenInput.toLocaleString()} />
         <Stat label="Output tokens" value={tokenOutput.toLocaleString()} />
-        <Stat label="Estimated cost" value={costTotal} />
       </div>
 
       {r.model && (
@@ -112,7 +95,6 @@ export function CompleteStep({ onClose }) {
         <div>
           <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">
             Quality fixes applied
-            {isExample && <span className="ml-2 normal-case font-normal text-slate-300">(example preview)</span>}
           </p>
           <div className="space-y-1.5">
             {issues.map((issue, i) => (

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

@@ -1,4 +1,7 @@
+import { useEffect, useState } from 'react';
+import { Sparkles } from 'lucide-react';
 import { useCeremonyStore } from '../../../store/ceremonyStore';
+import { getModels, getSettings, refineField } from '../../../lib/api';
 
 const FIELDS = [
   {
@@ -40,14 +43,176 @@ const FIELDS = [
   },
 ];
 
+// 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>
@@ -60,9 +225,12 @@ export function ReviewAnswersStep({ onNext, onBack }) {
       <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>
+          <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)}
@@ -70,11 +238,24 @@ export function ReviewAnswersStep({ onNext, onBack }) {
             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>
-          <label className="block text-sm font-medium text-slate-700 mb-0.5">
-            Initial Scope <span className="text-red-500">*</span>
-          </label>
+          <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)}
@@ -82,16 +263,29 @@ export function ReviewAnswersStep({ onNext, onBack }) {
             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}>
-            <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>
+            <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] || ''}
@@ -100,6 +294,16 @@ export function ReviewAnswersStep({ onNext, onBack }) {
               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>