aimeat 1.40.1 → 2.1.0

package/dist/public/views/profile/generator-dashboard/DebugPanel.js

@@ -24,8 +24,12 @@ import { t } from '/js/i18n.js';
 import { apiGet, apiDelete } from '/js/api.js';
 import { copyToClipboard } from '/js/utils.js';
 import { CopyButton } from '/components/CopyButton.js';
+import { useConfirm } from '/components/Modal.js';
+import { useToast } from '/components/Toast.js';
 
 export function DebugPanel({ projectId }) {
+  const { confirm, ConfirmUI } = useConfirm();
+  const { showToast, ToastContainer } = useToast();
   const [files, setFiles] = useState([]);
   const [loading, setLoading] = useState(true);
   const [selectedFile, setSelectedFile] = useState(null);
@@ -59,14 +63,15 @@ export function DebugPanel({ projectId }) {
     setLoadingFile(false);
   }
 
-  async function handleDelete() {
-    if (!confirm('Delete all debug data for this project?')) return;
-    try {
-      await apiDelete(`/v1/generator/debug/${projectId}`);
-      setFiles([]);
-      setSelectedFile(null);
-      setFileContent(null);
-    } catch { /* */ }
+  function handleDelete() {
+    confirm('Delete all debug data for this project?', async () => {
+      try {
+        await apiDelete(`/v1/generator/debug/${projectId}`);
+        setFiles([]);
+        setSelectedFile(null);
+        setFileContent(null);
+      } catch { /* */ }
+    }, { danger: true });
   }
 
   const [copying, setCopying] = useState(false);
@@ -113,7 +118,7 @@ export function DebugPanel({ projectId }) {
       setTimeout(() => setCopying(false), 2000);
     } catch (e) {
       setCopying(false);
-      alert('Copy failed: ' + e.message);
+      showToast('Copy failed: ' + e.message, true);
     }
   }
 
@@ -186,5 +191,7 @@ export function DebugPanel({ projectId }) {
         ` : html`<p class="pf-gen-debug-hint">Select a file to view its content</p>`}
       </div>
     </div>
+    <${ConfirmUI} />
+    <${ToastContainer} />
   </div>`;
 }

package/dist/public/views/profile/generator-dashboard/use-dashboard-core.js

@@ -26,13 +26,16 @@
  *   import { useDashboardCore } from './generator-dashboard/use-dashboard-core.js';
  *   const core = useDashboardCore(projectId, onBack, showToast);
  * @version-history
+ *   v1.1.0 — 2026-07-16 — loadData folds the mount into GET /v1/generator/:id/state (getProjectState);
+ *     status reads reuse the loaded components; individual waterfall kept as fallback. Removed the
+ *     project-change status effect (loadData now seeds statuses, so it would double-fetch).
  *   v1.0.0 — 2026-03-22 — Extracted from generator-tab.js ProjectDashboard
  */
 import { useState, useEffect } from 'preact/hooks';
 import { t } from '/js/i18n.js';
 import {
   getProject, loadAllComponents, saveComponent, cleanupOldEntries,
-  getInterviewSpec, getComponentStatuses, getPendingEdit,
+  getInterviewSpec, getComponentStatuses, getPendingEdit, getProjectState,
 } from '/js/services/generator.js';
 
 /**
@@ -62,7 +65,40 @@ export function useDashboardCore(projectId, onBack, showToast) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [projectId]);
 
+  // Blueprint exists but no component records yet — initialize them. Preserve subtype
+  // (data|component|app-domain) on cortex records: the spec/code prompt selectors and the spec
+  // validators dispatch on it (dropping it here was the single hop where subtype was lost end-to-end).
+  async function ensureComponents(proj, loaded) {
+    if (proj?.blueprint?.components && loaded.length === 0) {
+      const initialized = [];
+      for (const c of proj.blueprint.components) {
+        const comp = { id: c.id, type: c.type, label: c.label, ...(c.subtype ? { subtype: c.subtype } : {}), status: 'not_started', prompt: null, result: null, validationErrors: [], registeredAs: null, history: [], _version: 0 };
+        await saveComponent(projectId, comp);
+        initialized.push(comp);
+      }
+      return initialized;
+    }
+    return loaded;
+  }
+
   async function loadData() {
+    // Mount fold: ONE composite (project + interview-spec + components + pending-edit from a single
+    // server-side prefix scan), then the live status reads reuse the loaded components (no second scan).
+    // On composite failure, fall back to the individual reads.
+    const state = await getProjectState(projectId);
+    if (state) {
+      if (!state.project?.projectId) { onBack(); return; }
+      setProject(state.project);
+      setInterviewSpec(state.interviewSpec ?? null);
+      const comps = await ensureComponents(state.project, state.components);
+      setComponents(comps);
+      if (state.pendingEdit) setPendingEdit(state.pendingEdit);
+      refreshStatuses(comps);
+      cleanupOldEntries(projectId).catch(() => {});
+      return;
+    }
+
+    // ── Fallback: individual waterfall ──
     const p = await getProject(projectId);
     if (!p || !p.projectId) {
       onBack();
@@ -74,23 +110,10 @@ export function useDashboardCore(projectId, onBack, showToast) {
       const spec = await getInterviewSpec(projectId);
       setInterviewSpec(spec);
     } catch { /* no interview spec — that's fine */ }
+    let comps = [];
     if (p?.blueprint?.components) {
-      const comps = await loadAllComponents(projectId);
-      if (comps.length > 0) {
-        setComponents(comps);
-      } else {
-        // Blueprint exists but no component records yet — initialize them
-        const initialized = [];
-        for (const c of p.blueprint.components) {
-          // Preserve subtype (data|component|app-domain) on cortex records — the spec/code prompt
-          // selectors and the spec validators dispatch on it. Dropping it here was the single hop
-          // where subtype was lost end-to-end, forcing every downstream picker onto a wrong guess.
-          const comp = { id: c.id, type: c.type, label: c.label, ...(c.subtype ? { subtype: c.subtype } : {}), status: 'not_started', prompt: null, result: null, validationErrors: [], registeredAs: null, history: [], _version: 0 };
-          await saveComponent(projectId, comp);
-          initialized.push(comp);
-        }
-        setComponents(initialized);
-      }
+      comps = await ensureComponents(p, await loadAllComponents(projectId));
+      setComponents(comps);
     }
     cleanupOldEntries(projectId).catch(() => {});
     // Load pending edit data (useEditMode watches this to restore its state)
@@ -98,22 +121,19 @@ export function useDashboardCore(projectId, onBack, showToast) {
       const pending = await getPendingEdit(projectId);
       if (pending) setPendingEdit(pending);
     } catch { /* no pending edit */ }
+    refreshStatuses(comps);
   }
 
-  // Refresh live statuses
-  async function refreshStatuses() {
+  // Refresh live statuses. Pass the current components to reuse them (the mount does — no second scan);
+  // omit to reload them. Statuses are seeded by loadData on every load (mount + SSE), so there is no
+  // separate project-change effect (that would double-fetch).
+  async function refreshStatuses(comps) {
     try {
-      const s = await getComponentStatuses(projectId);
+      const s = await getComponentStatuses(projectId, comps || components);
       setLiveStatuses(s);
     } catch { /* best effort */ }
   }
 
-  // Refresh live statuses whenever the project record changes. refreshStatuses is recreated each
-  // render and is also returned from this hook (consumers depend on its runtime behavior); keep it
-  // out of the deps and key the effect to the project record.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => { if (project) refreshStatuses(); }, [project]);
-
   // Advance to next unregistered component in phase order
   function advanceToNext(currentId) {
     const phases = project?.blueprint?.phases || [];

package/dist/public/views/profile/generator-dashboard/use-edit-mode.js

@@ -35,9 +35,9 @@ import {
   saveComponent, registerComponent, writeProjectLog,
   savePendingEdit, clearPendingEdit,
 } from '/js/services/generator.js';
-import { buildImpactPrompt, buildEditPrompt, buildFixPrompt } from '/js/services/generator-prompts.js';
 import { validateComponent } from '/js/services/generator-validate.js';
 import { runWithAi, stripCodeblock } from '../generator-detail.js';
+import { buildPromptFromBackend } from '../generator-detail.ai.js';
 
 /** History helper — creates a new component object with a history entry appended */
 function addHistory(comp, action, extra = {}) {
@@ -79,8 +79,8 @@ export function useEditMode(core, autopilotState, projectId, orSettings, session
     clearPendingEdit(projectId).catch(() => {});
   }
 
-  function handleCopyImpactPrompt() {
-    const prompt = buildImpactPrompt(changeRequest, core.project?.blueprint);
+  async function handleCopyImpactPrompt() {
+    const prompt = await buildPromptFromBackend(projectId, 'gen-impact', { changeRequest });
     copyToClipboard(prompt).catch(() => {});
     showToast?.(t('profile.generator.impactPromptCopied'));
     setEditMode('impact');
@@ -90,7 +90,7 @@ export function useEditMode(core, autopilotState, projectId, orSettings, session
     if (!orSettings?.hasApiKey) return;
     setAiRunning('impact');
     try {
-      const prompt = buildImpactPrompt(changeRequest, core.project?.blueprint);
+      const prompt = await buildPromptFromBackend(projectId, 'gen-impact', { changeRequest });
       const content = await runWithAi(projectId, prompt);
       setImpactResult(content);
       setEditMode('impact');
@@ -147,12 +147,12 @@ export function useEditMode(core, autopilotState, projectId, orSettings, session
           .filter(a => a.impact === 'root' && a.id !== comp.id)
           .map(a => `- ${a.label}: ${a.suggestedChange}`)
           .join('\n') || '';
-        const prompt = buildEditPrompt(
-          comp.type, comp.label,
-          comp.result || '(no current code)',
-          item.suggestedChange || changeRequest,
-          upstream || null,
-        );
+        const prompt = await buildPromptFromBackend(projectId, 'gen-edit', {
+          componentId: comp.id, componentType: comp.type, componentLabel: comp.label,
+          code: comp.result || '(no current code)',
+          changeRequest: item.suggestedChange || changeRequest,
+          upstreamChanges: upstream || undefined,
+        });
 
         let content;
         try {
@@ -173,7 +173,9 @@ export function useEditMode(core, autopilotState, projectId, orSettings, session
             autopilotState.setStep(
               comp.label + ' - ' + t('profile.generator.openrouter.retrying').replace('{current}', attempt).replace('{max}', max)
             );
-            const fp = buildFixPrompt(prompt, content, vr.errors, comp.type);
+            const fp = await buildPromptFromBackend(projectId, 'gen-fix', {
+              componentId: comp.id, originalPrompt: prompt, code: content, errors: vr.errors, componentType: comp.type,
+            });
             try { content = await runWithAi(projectId, fp); } catch { break; }
             content = stripCodeblock(content);
             vr = validateComponent(comp.type, content, core.project?.blueprint);
@@ -215,17 +217,17 @@ export function useEditMode(core, autopilotState, projectId, orSettings, session
     showToast?.(t('profile.generator.openrouter.stepComplete'));
   }
 
-  function handleCopyEditPrompt(comp, suggestedChange) {
+  async function handleCopyEditPrompt(comp, suggestedChange) {
     const upstream = impactParsed?.analysis
       ?.filter(a => a.impact === 'root' && a.id !== comp.id)
       ?.map(a => `- ${a.label}: ${a.suggestedChange}`)
       ?.join('\n') || '';
-    const prompt = buildEditPrompt(
-      comp.type, comp.label,
-      comp.result || '(no current code)',
-      suggestedChange || changeRequest,
-      upstream || null,
-    );
+    const prompt = await buildPromptFromBackend(projectId, 'gen-edit', {
+      componentId: comp.id, componentType: comp.type, componentLabel: comp.label,
+      code: comp.result || '(no current code)',
+      changeRequest: suggestedChange || changeRequest,
+      upstreamChanges: upstream || undefined,
+    });
     copyToClipboard(prompt).catch(() => {});
     showToast?.(t('profile.generator.editPromptCopied').replace('{name}', comp.label));
   }
@@ -238,12 +240,12 @@ export function useEditMode(core, autopilotState, projectId, orSettings, session
         ?.filter(a => a.impact === 'root' && a.id !== comp.id)
         ?.map(a => `- ${a.label}: ${a.suggestedChange}`)
         ?.join('\n') || '';
-      const prompt = buildEditPrompt(
-        comp.type, comp.label,
-        comp.result || '(no current code)',
-        suggestedChange || changeRequest,
-        upstream || null,
-      );
+      const prompt = await buildPromptFromBackend(projectId, 'gen-edit', {
+        componentId: comp.id, componentType: comp.type, componentLabel: comp.label,
+        code: comp.result || '(no current code)',
+        changeRequest: suggestedChange || changeRequest,
+        upstreamChanges: upstream || undefined,
+      });
       let content = await runWithAi(projectId, prompt);
       content = stripCodeblock(content);
       let vr = validateComponent(comp.type, content, core.project?.blueprint);
@@ -251,7 +253,9 @@ export function useEditMode(core, autopilotState, projectId, orSettings, session
       if (!vr.valid && orSettings?.autoRetry) {
         const max = orSettings.maxRetries || 3;
         for (let attempt = 1; attempt <= max && !vr.valid; attempt++) {
-          const fp = buildFixPrompt(prompt, content, vr.errors, comp.type);
+          const fp = await buildPromptFromBackend(projectId, 'gen-fix', {
+            componentId: comp.id, originalPrompt: prompt, code: content, errors: vr.errors, componentType: comp.type,
+          });
           try { content = await runWithAi(projectId, fp); } catch { break; }
           content = stripCodeblock(content);
           vr = validateComponent(comp.type, content, core.project?.blueprint);

package/dist/public/views/profile/generator-dashboard/use-test-execution.js

@@ -32,10 +32,10 @@ import { apiPost } from '/js/api.js';
 import {
   loadAllComponents, saveComponent, registerComponent, writeProjectLog,
 } from '/js/services/generator.js';
-import { buildComponentPrompt, buildFixPrompt, buildReflectionPrompt, buildTestPrompt } from '/js/services/generator-prompts.js';
 import { validateComponent } from '/js/services/generator-validate.js';
 import { runTests, runComponentTest } from '/js/services/generator-testing.js';
 import { runWithAi, stripCodeblock } from '../generator-detail.js';
+import { loadPromptFromBackend, buildPromptFromBackend } from '../generator-detail.ai.js';
 
 /**
  * @param {Object} core — useDashboardCore return value
@@ -109,10 +109,7 @@ export function useTestExecution(core, projectId, orSettings, session, showToast
       let testCode;
       try {
         await writeProjectLog(projectId, 'test_prompt_generating', { meta: { component: comp.label, type: comp.type, by: 'batch' } });
-        const testPrompt = buildTestPrompt(
-          comp.type, comp.result, comp.label, comp.registeredAs,
-          core.project?.blueprint, core.interviewSpec
-        );
+        const testPrompt = await loadPromptFromBackend(projectId, comp.id, 'test');
         testCode = await runWithAi(projectId, testPrompt);
         testCode = stripCodeblock(testCode);
         await saveComponent(projectId, { ...comp, testPrompt, testCode, testEnvironment });
@@ -192,20 +189,21 @@ export function useTestExecution(core, projectId, orSettings, session, showToast
     showToast?.(t('profile.generator.test_fix_round') + ' ' + (testFixRound + 1));
 
     try {
-      const completedComps = core.components.filter(c => c.status === 'done' && c.registeredAs);
-      const originalPrompt = comp.prompt || await buildComponentPrompt(
-        comp.type, comp.label,
-        core.project?.description, core.project?.blueprint, completedComps,
-        core.interviewSpec,
-      );
+      const originalPrompt = comp.prompt || await loadPromptFromBackend(projectId, comp.id, 'code');
       // Step 1: Reflection — diagnose the failure before writing code
       let reflectionDiagnosis = '';
       try {
-        const reflectionPrompt = buildReflectionPrompt(comp.result || '', failedTestComp.errors || [], testContext);
+        const reflectionPrompt = await buildPromptFromBackend(projectId, 'gen-reflection', {
+          componentId: comp.id, code: comp.result || '', errors: failedTestComp.errors || [],
+          componentType: comp.type, testContext,
+        });
         reflectionDiagnosis = await runWithAi(projectId, reflectionPrompt);
       } catch { /* reflection is optional enhancement */ }
 
-      const fixP = buildFixPrompt(originalPrompt, comp.result || '', failedTestComp.errors || [], comp.type, testContext, null, reflectionDiagnosis);
+      const fixP = await buildPromptFromBackend(projectId, 'gen-fix', {
+        componentId: comp.id, originalPrompt, code: comp.result || '', errors: failedTestComp.errors || [],
+        componentType: comp.type, testContext, reflectionDiagnosis,
+      });
 
       let content = await runWithAi(projectId, fixP);
       content = stripCodeblock(content);
@@ -216,7 +214,9 @@ export function useTestExecution(core, projectId, orSettings, session, showToast
         const max = orSettings.maxRetries || 3;
         for (let attempt = 1; attempt <= max && !vr.valid; attempt++) {
           showToast?.(t('profile.generator.openrouter.retrying').replace('{current}', attempt).replace('{max}', max));
-          const retryP = buildFixPrompt(originalPrompt, content, vr.errors, comp.type);
+          const retryP = await buildPromptFromBackend(projectId, 'gen-fix', {
+            componentId: comp.id, originalPrompt, code: content, errors: vr.errors, componentType: comp.type,
+          });
           content = await runWithAi(projectId, retryP);
           content = stripCodeblock(content);
           vr = validateComponent(comp.type, content, core.project?.blueprint);

package/dist/public/views/profile/generator-detail.ai.js

@@ -120,3 +120,24 @@ export async function loadPromptFromBackend(projectId, componentId, type = 'code
   if (!resp.ok) throw new Error(resp.error?.message || 'Failed to load prompt');
   return resp.data?.prompt || '';
 }
+
+/**
+ * Build a self-correction prompt from the database via the backend build route.
+ * Replaces the browser-side System-A builders (buildFixPrompt, buildReflectionPrompt,
+ * buildExplainPrompt, buildImpactPrompt, buildEditPrompt, buildBlueprintFixPrompt) so the
+ * copy-paste flow uses the SAME DB templates the autopilot uses — single source of truth.
+ * @param {string} projectId
+ * @param {string} promptId - one of gen-fix|gen-reflection|gen-explain|gen-edit|gen-impact|gen-blueprint-fix|gen-fresh-generation
+ * @param {Object} payload - runtime data: { componentId?, code?, errors?, changeRequest?, upstreamChanges?, componentType?, componentLabel?, originalPrompt?, testContext?, previousAttempts?, reflectionDiagnosis? }
+ * @returns {Promise<string>} the prompt text
+ */
+export async function buildPromptFromBackend(projectId, promptId, payload = {}) {
+  const s = window.AIMEAT?.auth?.getSession?.();
+  if (!s) throw new Error('Not authenticated');
+  const resp = await s.fetch(`/v1/generator/${projectId}/prompts/build`, {
+    method: 'POST',
+    body: JSON.stringify({ promptId, ...payload }),
+  });
+  if (!resp.ok) throw new Error(resp.error?.message || 'Failed to build prompt');
+  return resp.data?.prompt || '';
+}

package/dist/public/views/profile/generator-detail.js

@@ -32,18 +32,18 @@ import { CopyButton } from '/components/CopyButton.js';
 import {
   saveComponent, saveSpec, registerComponent, reregisterComponent, writeProjectLog, writeDebugArtifact,
 } from '/js/services/generator.js';
-// DEPRECATED: browser-side prompt builders no longer used. Prompts loaded from database via API.
-// import { buildComponentPrompt, buildFixPrompt, buildReflectionPrompt, buildTestPrompt } from '/js/services/generator-prompts.js';
+// All prompts (including the self-correction ones) are loaded from the database via API —
+// single source of truth shared with the autopilot. No browser-side prompt builders remain.
 import { validateComponent } from '/js/services/generator-validate.js';
 import { verifyContract } from '/js/services/generator-contract.js';
 import { smokeTest } from '/js/services/generator-smoke.js';
 import { createBundle } from '/js/services/generator-context-bundle.js';
-import { buildExplainPrompt, buildReflectionPrompt, buildFixPrompt } from '/js/services/generator-prompts-fix.js';
 import { runComponentTest, screenshotUrl } from '/js/services/generator-testing.js';
-import { runWithAi, stripCodeblock, cancelAiRequest, loadPromptFromBackend } from './generator-detail.ai.js';
+import { runWithAi, stripCodeblock, cancelAiRequest, loadPromptFromBackend, buildPromptFromBackend } from './generator-detail.ai.js';
 import { getWorkflowStep, StepArrow } from './generator-detail.helpers.js';
 import { SpecSection } from './generator-detail.spec-section.js';
 import { TestScopeSelector, TestResultsView } from './generator-detail.results.js';
+import { useConfirm } from '/components/Modal.js';
 
 // Re-export moved symbols so existing consumers (generator-tab, generator-dashboard, dashboard hooks)
 // keep importing them from this module unchanged.
@@ -54,6 +54,7 @@ export { TestScopeSelector, TestResultsView };
 /* ── ComponentDetail ─────────────────────────────────── */
 
 export function ComponentDetail({ component, project, projectId, liveStatuses, onUpdate, onAdvance, showToast, session, orSettings }) {
+  const { confirm, ConfirmUI } = useConfirm();
   const [result, setResult] = useState(component.result || '');
   const [validationResult, setValidationResult] = useState(null);
   const [registering, setRegistering] = useState(false);
@@ -275,8 +276,8 @@ export function ComponentDetail({ component, project, projectId, liveStatuses, o
     onUpdate();
   }
 
-  async function handleResetComponent() {
-    if (!confirm('Reset this component? Spec, code, test results, and registration will all be cleared.')) return;
+  function handleResetComponent() {
+    confirm('Reset this component? Spec, code, test results, and registration will all be cleared.', async () => {
     try {
       const s = session || window.AIMEAT?.auth?.getSession?.();
       if (!s) return;
@@ -306,6 +307,7 @@ export function ComponentDetail({ component, project, projectId, liveStatuses, o
     } catch (e) {
       showToast?.('Reset failed: ' + e.message, true);
     }
+    }, { danger: true });
   }
 
   async function handleCopyPrompt() {
@@ -338,7 +340,9 @@ export function ComponentDetail({ component, project, projectId, liveStatuses, o
         const max = orSettings.maxRetries || 3;
         for (let attempt = 1; attempt <= max && !vr.valid; attempt++) {
           showToast?.(t('profile.generator.openrouter.retrying').replace('{current}', attempt).replace('{max}', max));
-          const fp = buildFixPrompt(fresh, content, vr.errors, component.type);
+          const fp = await buildPromptFromBackend(projectId, 'gen-fix', {
+            componentId: component.id, originalPrompt: fresh, code: content, errors: vr.errors, componentType: component.type,
+          });
           content = await runWithAi(projectId, fp);
           setResult(content);
           vr = validateComponent(component.type, content, project.blueprint);
@@ -363,19 +367,42 @@ export function ComponentDetail({ component, project, projectId, liveStatuses, o
     setAiRunning(false);
   }
 
-  // Mandatory reflection before fix — diagnose first, then fix
-  const reflectionPrompt = validationResult && !validationResult.valid
-    ? buildReflectionPrompt(result, validationResult.errors)
-    : null;
-  const fixPrompt = validationResult && !validationResult.valid
-    ? buildFixPrompt(prompt, result, validationResult.errors, component.type)
-    : null;
+  // Self-correction prompts — fetched from the DB (single source of truth) on validation
+  // transitions, not on every keystroke. Reflection + fix are built for the failed code;
+  // explain is offered after generation, before validation.
+  const [reflectionPrompt, setReflectionPrompt] = useState(null);
+  const [fixPrompt, setFixPrompt] = useState(null);
+  const [explainPrompt, setExplainPrompt] = useState(null);
 
-  // Explain prompt — optional step after generation, before validation
-  const bpComp = project.blueprint?.components?.find(c => c.label === component.label || c.id === component.id);
-  const explainPrompt = result.trim() && !validationResult
-    ? buildExplainPrompt(component.type, result, bpComp)
-    : null;
+  const validationFailed = !!(validationResult && !validationResult.valid);
+  useEffect(() => {
+    if (validationFailed) {
+      buildPromptFromBackend(projectId, 'gen-reflection', {
+        componentId: component.id, code: result, errors: validationResult.errors, componentType: component.type,
+      }).then(setReflectionPrompt).catch(() => setReflectionPrompt(null));
+      buildPromptFromBackend(projectId, 'gen-fix', {
+        componentId: component.id, originalPrompt: prompt, code: result, errors: validationResult.errors, componentType: component.type,
+      }).then(setFixPrompt).catch(() => setFixPrompt(null));
+    } else {
+      setReflectionPrompt(null);
+      setFixPrompt(null);
+    }
+    // Intentionally keyed on the validation transition, not `result`, to avoid a network
+    // POST on every keystroke — the failed code is captured when validation ran.
+    // eslint-disable-next-line
+  }, [validationResult, projectId, component.id, component.type]);
+
+  const canExplain = !!(result.trim() && !validationResult);
+  useEffect(() => {
+    if (canExplain) {
+      buildPromptFromBackend(projectId, 'gen-explain', {
+        componentId: component.id, code: result, componentType: component.type,
+      }).then(setExplainPrompt).catch(() => setExplainPrompt(null));
+    } else {
+      setExplainPrompt(null);
+    }
+    // eslint-disable-next-line
+  }, [canExplain, projectId, component.id, component.type]);
 
   // Test prompt for testable component types
   const testableTypes = ['extension', 'cortex', 'app'];
@@ -499,7 +526,7 @@ export function ComponentDetail({ component, project, projectId, liveStatuses, o
   return html`
     <div class="pf-gen-component-detail">
       <div class="pf-gen-comp-header">
-        <h4>${component.label}</h4>
+        <div class="card-h3">${component.label}</div>
         <span class="pf-gen-type-badge type-${component.type}">${component.type.toUpperCase()}</span>
         <span class="pf-gen-status-badge status-${component.status}">${component.status}</span>
         <button class="btn-ghost btn-xs" style="margin-left:auto" onClick=${handleResetComponent}
@@ -515,8 +542,10 @@ export function ComponentDetail({ component, project, projectId, liveStatuses, o
         specValidation=${specValidation} setSpecValidation=${setSpecValidation}
         setGeneratedPrompt=${setGeneratedPrompt} />`}
 
+      <!-- WORKSPACE: prompt (copy) | response (paste) — two-pane on wide, stacked on mobile -->
+      <div class="pf-gen-workspace">
       <!-- CODE PROMPT (AI Chat Mode) -->
-      <div class="pf-gen-section">
+      <div class="pf-gen-section pf-gen-ws-pane">
         <label>${t('profile.generator.prompt')}</label>
         <pre class="pf-gen-prompt-box">${prompt}</pre>
         <div class="flex-row-wrap">
@@ -539,7 +568,7 @@ export function ComponentDetail({ component, project, projectId, liveStatuses, o
           </button>
         </div>
       </div>
-      <div class="pf-gen-section">
+      <div class="pf-gen-section pf-gen-ws-pane">
         <div class="flex-row">
           <label>${t('profile.generator.result')}</label>
           ${workflowStep === 'paste' && html`<${StepArrow} direction="down" />`}
@@ -550,7 +579,7 @@ export function ComponentDetail({ component, project, projectId, liveStatuses, o
         <textarea
           ref=${el => { resultRef.current = el; }}
           class="pf-gen-result-area"
-          rows="12"
+          rows="16"
           placeholder=${component.type === 'extension'
             ? t('profile.generator.extensionResultPlaceholder')
             : t('profile.generator.resultPlaceholder')}
@@ -582,6 +611,7 @@ export function ComponentDetail({ component, project, projectId, liveStatuses, o
           `}
         </div>
       </div>
+      </div>
 
       <!-- Errors -->
       ${validationResult && !validationResult.valid && html`
@@ -607,7 +637,8 @@ export function ComponentDetail({ component, project, projectId, liveStatuses, o
       <!-- Test Section (for registered testable components) -->
       <!-- Same structure as component generation: PROMPT → RESULT (test code) → RUN -->
       ${isTestable && html`
-        <div class="pf-gen-section pf-gen-test-section">
+        <div class="pf-gen-workspace">
+        <div class="pf-gen-section pf-gen-test-section pf-gen-ws-pane">
           <label>${t('profile.generator.test_prompt')} (${testEnvironment})</label>
           <pre class="pf-gen-prompt-box">${currentTestPrompt}</pre>
           <div class="flex-row-wrap">
@@ -625,11 +656,11 @@ export function ComponentDetail({ component, project, projectId, liveStatuses, o
             `}
           </div>
         </div>
-        <div class="pf-gen-section">
+        <div class="pf-gen-section pf-gen-ws-pane">
           <label>${t('profile.generator.test_code')}</label>
           <textarea
             class="pf-gen-result-area"
-            rows="8"
+            rows="14"
             placeholder=${t('profile.generator.test_code_placeholder')}
             value=${testCode}
             onInput=${e => setTestCode(e.target.value)}
@@ -643,6 +674,7 @@ export function ComponentDetail({ component, project, projectId, liveStatuses, o
             </button>
           </div>
         </div>
+        </div>
 
         <!-- Test Result -->
         ${testResult && html`
@@ -676,6 +708,7 @@ export function ComponentDetail({ component, project, projectId, liveStatuses, o
           </div>
         `}
       `}
+      <${ConfirmUI} />
     </div>
   `;
 }

package/dist/public/views/profile/generator-detail.results.js

@@ -20,7 +20,7 @@ import { screenshotUrl } from '/js/services/generator-testing.js';
 
 export function TestScopeSelector({ value, onChange, compact }) {
   return html`<div class="pf-gen-test-scope ${compact ? 'pf-gen-test-scope-compact' : ''}">
-    ${!compact && html`<h4>${t('profile.generator.test_scope_title')}</h4>`}
+    ${!compact && html`<div class="card-h3">${t('profile.generator.test_scope_title')}</div>`}
     ${['comprehensive', 'basic', 'none'].map(level => html`
       <label class="pf-gen-or-radio-label" title=${t('profile.generator.test_scope_' + level)}>
         <input type="radio" name="test-scope-${compact ? 'compact' : 'full'}" value=${level}