aimeat 1.40.0 → 2.0.0

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}

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

@@ -32,6 +32,7 @@ import { t } from '/js/i18n.js';
 import { apiGet, apiPut, apiPost, apiDelete } from '/js/api.js';
 import { saveProjectSettings, getProjectSettings } from '/js/services/generator.js';
 import { UsageChart, colorForIndex } from '/components/UsageChart.js';
+import { useConfirm } from '/components/Modal.js';
 
 /** Compact number (73306 → "73.3k") for token axis/labels. */
 function fmtCompact(n) {
@@ -44,6 +45,7 @@ function fmtCompact(n) {
 /* ── OpenRouter / LM Studio / Custom Settings ────────── */
 
 export function OpenRouterSettings({ onSettingsChange }) {
+  const { confirm, ConfirmUI } = useConfirm();
   const [collapsed, setCollapsed] = useState(true);
   const [hasApiKey, setHasApiKey] = useState(false);
   const [apiKey, setApiKey] = useState('');
@@ -160,25 +162,26 @@ export function OpenRouterSettings({ onSettingsChange }) {
     setTesting(false);
   }
 
-  async function handleDelete() {
-    if (!confirm(t('profile.generator.openrouter.deleteConfirm'))) return;
-    try {
-      await apiDelete('/v1/openrouter/settings');
-      setHasApiKey(false);
-      setApiKey('');
-      setModel('');
-      setVisionModel('');
-      setModels([]);
-      setModelsError(null);
-      setAutoRetry(false);
-      setMaxRetries(3);
-      setTemperature('');
-      setTopP('');
-      setMaxTokens('');
-      showMsg(t('profile.generator.openrouter.delete'));
-    } catch (e) {
-      showMsg(e.message, true);
-    }
+  function handleDelete() {
+    confirm(t('profile.generator.openrouter.deleteConfirm'), async () => {
+      try {
+        await apiDelete('/v1/openrouter/settings');
+        setHasApiKey(false);
+        setApiKey('');
+        setModel('');
+        setVisionModel('');
+        setModels([]);
+        setModelsError(null);
+        setAutoRetry(false);
+        setMaxRetries(3);
+        setTemperature('');
+        setTopP('');
+        setMaxTokens('');
+        showMsg(t('profile.generator.openrouter.delete'));
+      } catch (e) {
+        showMsg(e.message, true);
+      }
+    }, { danger: true });
   }
 
   if (!loaded) return null;
@@ -396,6 +399,7 @@ export function OpenRouterSettings({ onSettingsChange }) {
           </div>
         </div>
       `}
+      <${ConfirmUI} />
     </div>
   `;
 }
@@ -496,25 +500,25 @@ function AiAppsBudgetPanel() {
   const appNames = Array.from(new Set([...perAppEntries.map(([a]) => a), ...historyApps, ...Object.keys(caps)]));
 
   return html`
-    <div class="pf-gen-or-field" style="border-top:2px solid var(--cl-ink,#e5e5e5);padding-top:14px;margin-top:14px;">
+    <div class="pf-gen-or-field pf-gen-spend-section">
       <label class="pf-gen-or-label">💸 AI apps daily budget</label>
-      <div style="font-size:12px;color:#666;margin-bottom:8px;">
+      <div class="pf-gen-spend-desc">
         Apps that call <code>AIMEAT.ai.complete()</code> use this key. This is the TOTAL across all
         apps for the day; each app may spend up to this much unless you set a per-app limit below.
         When the budget is hit, further calls return <code>QUOTA_EXHAUSTED</code>.
       </div>
 
-      <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
-        <div style="flex:1;min-width:200px;background:#f5f5f5;border-radius:4px;height:20px;position:relative;overflow:hidden;">
-          <div style="position:absolute;top:0;left:0;bottom:0;width:${pct}%;background:${pct >= 90 ? '#ef4444' : pct >= 60 ? '#f59e0b' : '#22c55e'};transition:width .3s;"></div>
-          <div style="position:relative;text-align:center;font-size:11px;line-height:20px;font-weight:700;">
+      <div class="pf-gen-spend-bar-row">
+        <div class="pf-gen-spend-bar">
+          <div class="pf-gen-spend-bar-fill ${pct >= 90 ? 'crit' : pct >= 60 ? 'warn' : ''}" style="width:${pct}%"></div>
+          <div class="pf-gen-spend-bar-label">
             $${spent.toFixed(4)} / $${budget.toFixed(2)} (${pct}%)
           </div>
         </div>
         ${editing ? html`
           <input type="number" min="0" max="1000" step="0.10" value=${budgetInput}
                  onInput=${e => setBudgetInput(e.target.value)}
-                 style="width:90px;padding:4px 6px;font-size:13px;" />
+                 class="pf-gen-spend-budget-input" />
           <button class="btn-primary btn-sm" onClick=${saveBudget} disabled=${saving}>
             ${saving ? '...' : 'Save'}
           </button>
@@ -524,24 +528,24 @@ function AiAppsBudgetPanel() {
         `}
       </div>
 
-      ${message && html`<div class="pf-gen-or-message ${message.error ? 'pf-gen-or-message-error' : 'pf-gen-or-message-success'}" style="margin-top:8px;">${message.text}</div>`}
+      ${message && html`<div class="pf-gen-or-message pf-gen-spend-msg ${message.error ? 'pf-gen-or-message-error' : 'pf-gen-or-message-success'}">${message.text}</div>`}
 
       ${appNames.length > 0 && html`
-        <details style="margin-top:10px;" open>
-          <summary style="cursor:pointer;font-size:12px;color:#666;">
+        <details class="pf-gen-spend-details" open>
+          <summary class="pf-gen-spend-summary">
             Per-app limits & spend (${appNames.length} app${appNames.length === 1 ? '' : 's'})
           </summary>
-          <div style="font-size:11px;color:#999;margin:6px 0;">
+          <div class="pf-gen-spend-hint">
             Each app may spend up to the daily budget above. Set a cap to throttle one app below it;
             leave blank to use the full budget.
           </div>
-          <table style="width:100%;margin-top:4px;font-size:12px;border-collapse:collapse;">
+          <table class="pf-gen-spend-table">
             <thead>
-              <tr style="border-bottom:1px solid #e5e5e5;">
-                <th style="text-align:left;padding:4px;">App</th>
-                <th style="text-align:right;padding:4px;">Spent today</th>
-                <th style="text-align:right;padding:4px;">Daily cap ($)</th>
-                <th style="text-align:right;padding:4px;">Calls</th>
+              <tr>
+                <th>App</th>
+                <th class="num">Spent today</th>
+                <th class="num">Daily cap ($)</th>
+                <th class="num">Calls</th>
               </tr>
             </thead>
             <tbody>
@@ -549,20 +553,20 @@ function AiAppsBudgetPanel() {
                 const s = usage.per_app[app] || { cost_usd: 0, calls: 0 };
                 return html`
                 <tr key=${app}>
-                  <td style="padding:4px;">${app}</td>
-                  <td style="text-align:right;padding:4px;">$${(s.cost_usd || 0).toFixed(4)}</td>
-                  <td style="text-align:right;padding:4px;">
+                  <td>${app}</td>
+                  <td class="num">$${(s.cost_usd || 0).toFixed(4)}</td>
+                  <td class="num">
                     <input type="number" min="0" max="1000" step="0.10"
                       value=${caps[app] ?? ''} placeholder=${budget.toFixed(2)}
                       onInput=${e => setCaps(c => ({ ...c, [app]: e.target.value }))}
-                      style="width:74px;padding:3px 5px;font-size:12px;text-align:right;" />
+                      class="pf-gen-spend-cap-input" />
                   </td>
-                  <td style="text-align:right;padding:4px;">${s.calls || 0}</td>
+                  <td class="num">${s.calls || 0}</td>
                 </tr>`;
               })}
             </tbody>
           </table>
-          <div style="display:flex;align-items:center;gap:8px;margin-top:8px;">
+          <div class="pf-gen-spend-actions">
             <button class="btn-primary btn-sm" onClick=${saveCaps} disabled=${savingCaps}>
               ${savingCaps ? '...' : 'Save per-app limits'}
             </button>
@@ -585,10 +589,10 @@ function AiAppsBudgetPanel() {
         }));
         const yFormat = isTokens ? (v) => fmtCompact(v) : (v) => '$' + (Number(v) < 1 ? Number(v).toFixed(3) : Number(v).toFixed(2));
         return html`
-          <div style="margin-top:14px;">
-            <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;">
-              <span style="font-size:12px;font-weight:600;color:#666;">${t('profile.generator.aiUsageOverTime') || 'Usage over time (30 days)'}</span>
-              <span style="display:inline-flex;gap:4px;">
+          <div class="pf-gen-spend-chart-wrap">
+            <div class="pf-gen-spend-chart-head">
+              <span class="pf-gen-spend-chart-title">${t('profile.generator.aiUsageOverTime') || 'Usage over time (30 days)'}</span>
+              <span class="pf-gen-spend-metric-toggle">
                 <button class=${!isTokens ? 'btn-primary btn-sm' : 'btn-outline btn-sm'} onClick=${() => setMetric('cost')}>${t('profile.generator.aiMetricCost') || 'Cost'}</button>
                 <button class=${isTokens ? 'btn-primary btn-sm' : 'btn-outline btn-sm'} onClick=${() => setMetric('tokens')}>${t('profile.generator.aiMetricTokens') || 'Tokens'}</button>
               </span>
@@ -597,7 +601,7 @@ function AiAppsBudgetPanel() {
           </div>`;
       })()}
 
-      <div style="font-size:11px;color:#999;margin-top:8px;">
+      <div class="pf-gen-spend-footnote">
         Cost is estimated when the provider doesn't report it (LM Studio, custom). Your
         OpenRouter dashboard has the authoritative bill.
       </div>