aimeat 1.16.2 → 1.18.0

package/dist/public/views/profile/extensions-tab.js

@@ -14,6 +14,15 @@
  * @version-history
  *   v1.0.0 — 2026-03-10 — Initial implementation with Cortex + Server extension management
  *   v1.1.0 — 2026-03-17 — Refactor: replace all inline style="" attributes with CSS classes
+ *   v1.2.0 — 2026-06-02 — Component unification (#2): both install modals use the
+ *     canonical <Modal> component (className="ext-modal-narrow" preserves width).
+ *   v1.3.0 — 2026-06-02 — Component unification (#1): the five tier-2 clipboard
+ *     buttons (copy prompt / script tag / API surface / instance ID / endpoint) now
+ *     use the canonical <CopyButton> with onCopied toasts. The two "Create with AI"
+ *     hero CTAs keep their labeled buttons + copyToClipboard (not copy buttons).
+ *   v1.4.0 — 2026-06-02 — Component unification (#11): all six extension/instance
+ *     status dots use the canonical <StatusDot> instead of bespoke .ext-status-dot
+ *     (which had hardcoded #4ade80/#9ca3af — now tokenized via the component).
  */
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
@@ -22,7 +31,9 @@ const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { escHtml, copyToClipboard } from '/js/utils.js';
 import { Spinner } from './shared.js';
-import { useConfirm } from '/components/Modal.js';
+import { Modal, useConfirm } from '/components/Modal.js';
+import { CopyButton } from '/components/CopyButton.js';
+import { StatusDot } from '/components/StatusDot.js';
 import * as cortexService from '/js/services/cortex.js';
 import * as v8Ext from '/js/services/extensions.js';
 import { getNodeUrl, getSession } from '/js/services/auth.js';
@@ -648,7 +659,7 @@ export default function ExtensionsTab({ session, showToast }) {
         <div class="ext-meta-row">
           <span>${t('profile.extensions.detail.author')}: ${ext.author || '?'}</span>
           ${ext.license ? html`<span>${t('profile.extensions.detail.license')}: ${ext.license}</span>` : null}
-          <span><span class="ext-status-dot ${ext.status}"></span> ${t('profile.extensions.status.' + ext.status)}</span>
+          <span><${StatusDot} status=${ext.status} /> ${t('profile.extensions.status.' + ext.status)}</span>
           <span>${t('profile.extensions.detail.tags')}: ${(ext.tags || []).join(', ')}</span>
         </div>
       </div>
@@ -662,7 +673,7 @@ export default function ExtensionsTab({ session, showToast }) {
         const content = p._content || p.content || '';
         return html`
           <div class="ext-detail-section">
-            <div class="ext-detail-section-title">${'\u{1F4AC}'} Prompt: ${p.name} <button class="btn-primary btn-sm" onClick=${() => { copyToClipboard(content); showToast(t('profile.extensions.detail.copied')); }}>${t('profile.extensions.detail.copyPrompt')}</button></div>
+            <div class="ext-detail-section-title">${'\u{1F4AC}'} Prompt: ${p.name} <${CopyButton} text=${content} label=${t('profile.extensions.detail.copyPrompt')} className="btn-primary btn-sm" onCopied=${() => showToast(t('profile.extensions.detail.copied'))} /></div>
             <div class="ext-detail-code">${content.substring(0, 500)}${content.length > 500 ? '...' : ''}</div>
           </div>`;
       })}
@@ -674,10 +685,10 @@ export default function ExtensionsTab({ session, showToast }) {
           <div class="ext-detail-section">
             <div class="ext-detail-section-title">${'\u{1F4E6}'} Library: ${lib.filename}</div>
             <div class="ext-lib-meta">${t('profile.extensions.detail.exports')}: ${(lib.exports || []).join(', ')}</div>
-            <div class="ext-lib-label">${t('profile.extensions.detail.scriptTag')} <button class="btn-primary btn-sm" onClick=${() => { copyToClipboard(scriptTag); showToast(t('profile.extensions.detail.copied')); }}>${t('profile.extensions.detail.copyUrl')}</button></div>
+            <div class="ext-lib-label">${t('profile.extensions.detail.scriptTag')} <${CopyButton} text=${scriptTag} label=${t('profile.extensions.detail.copyUrl')} className="btn-primary btn-sm" onCopied=${() => showToast(t('profile.extensions.detail.copied'))} /></div>
             <div class="ext-detail-code">${scriptTag}</div>
             ${lib.api_surface ? html`<div>
-              <div class="ext-lib-label-spaced">${t('profile.extensions.detail.apiSurface')} <button class="btn-primary btn-sm" onClick=${() => { copyToClipboard(lib.api_surface); showToast(t('profile.extensions.detail.copied')); }}>${t('profile.extensions.detail.copyApi')}</button></div>
+              <div class="ext-lib-label-spaced">${t('profile.extensions.detail.apiSurface')} <${CopyButton} text=${lib.api_surface} label=${t('profile.extensions.detail.copyApi')} className="btn-primary btn-sm" onCopied=${() => showToast(t('profile.extensions.detail.copied'))} /></div>
               <div class="ext-detail-code">${lib.api_surface}</div>
             </div>` : null}
           </div>`;
@@ -726,7 +737,7 @@ export default function ExtensionsTab({ session, showToast }) {
         <div class="ext-description">${ext.description || ''}</div>
         <div class="ext-meta-row-sm">
           <span>${t('profile.v8ext.author')}: ${ext.author || '?'}</span>
-          <span><span class="ext-status-dot ${ext.status}"></span> ${isActive ? t('profile.v8ext.statusActive') : t('profile.v8ext.statusInactive')}</span>
+          <span><${StatusDot} status=${ext.status} /> ${isActive ? t('profile.v8ext.statusActive') : t('profile.v8ext.statusInactive')}</span>
           <span>${t('profile.v8ext.actions')}: ${actions.length}</span>
         </div>
       </div>
@@ -829,9 +840,9 @@ export default function ExtensionsTab({ session, showToast }) {
             : srvInstances.map(inst => html`
               <div class="ext-instance-row">
                 <span class="ext-instance-name">${inst.id}</span>
-                <span class="ext-status-dot ${inst.status}"></span>
+                <${StatusDot} status=${inst.status} />
                 <span class="ext-instance-status">${inst.status}</span>
-                <button class="btn-outline btn-sm" onClick=${() => { copyToClipboard(inst.id); showToast(t('profile.v8ext.instanceIdCopied')); }}>${t('profile.v8ext.copyId')}</button>
+                <${CopyButton} text=${inst.id} label=${t('profile.v8ext.copyId')} className="btn-outline btn-sm" onCopied=${() => showToast(t('profile.v8ext.instanceIdCopied'))} />
                 <button class="btn-danger-solid btn-sm" onClick=${() => handleDeleteInstance(ext.name, inst.id)}>${t('profile.v8ext.deleteInstance')}</button>
               </div>`)}
           ${isActive ? html`
@@ -845,7 +856,7 @@ export default function ExtensionsTab({ session, showToast }) {
           <div class="ext-endpoint-box">
             POST ${NODE_URL}/v1/ext/${ext.name}/{actionId}
           </div>
-          <button class="btn-primary btn-sm ext-btn-copy-spaced" onClick=${() => { copyToClipboard(NODE_URL + '/v1/ext/' + ext.name + '/'); showToast(t('profile.v8ext.copied')); }}>${t('profile.v8ext.copyEndpoint')}</button>
+          <${CopyButton} text=${NODE_URL + '/v1/ext/' + ext.name + '/'} label=${t('profile.v8ext.copyEndpoint')} className="btn-primary btn-sm ext-btn-copy-spaced" onCopied=${() => showToast(t('profile.v8ext.copied'))} />
         </div>`}
 
       <div class="ext-actions-bar">
@@ -893,7 +904,7 @@ export default function ExtensionsTab({ session, showToast }) {
                   ${(ext.actions || []).map(a => html`<span class="ext-comp-tag ext-comp-tag-action">${a.id}</span>`)}
                 </div>
                 <div class="ext-card-footer">
-                  <span class="ext-status"><span class="ext-status-dot ${ext.status}"></span> ${isActive ? t('profile.v8ext.statusActive') : t('profile.v8ext.statusInactive')}</span>
+                  <span class="ext-status"><${StatusDot} status=${ext.status} /> ${isActive ? t('profile.v8ext.statusActive') : t('profile.v8ext.statusInactive')}</span>
                   <span class="ext-card-actions">
                     ${isActive
                       ? html`<button onClick=${(e) => { e.stopPropagation(); handleSrvDeactivate(ext.name); }}>${t('profile.v8ext.deactivate')}</button>`
@@ -935,7 +946,7 @@ export default function ExtensionsTab({ session, showToast }) {
                   ${types.map(ct => html`<span class="ext-comp-tag ${COMP_TAG_CLASSES[ct] || ''}">${t('profile.extensions.components.' + ct) || ct}</span>`)}
                 </div>
                 <div class="ext-card-footer">
-                  <span class="ext-status"><span class="ext-status-dot ${ext.status}"></span> ${t('profile.extensions.status.' + ext.status)}</span>
+                  <span class="ext-status"><${StatusDot} status=${ext.status} /> ${t('profile.extensions.status.' + ext.status)}</span>
                 </div>
               </div>`;
           })}
@@ -961,7 +972,7 @@ export default function ExtensionsTab({ session, showToast }) {
                   ${types.map(ct => html`<span class="ext-comp-tag ${COMP_TAG_CLASSES[ct] || ''}">${t('profile.extensions.components.' + ct) || ct}</span>`)}
                 </div>
                 <div class="ext-card-footer">
-                  <span class="ext-status"><span class="ext-status-dot ${ext.status}"></span> ${t('profile.extensions.status.' + ext.status)}</span>
+                  <span class="ext-status"><${StatusDot} status=${ext.status} /> ${t('profile.extensions.status.' + ext.status)}</span>
                   <span class="ext-card-actions">
                     ${isActive
                       ? html`<button onClick=${(e) => { e.stopPropagation(); deactivateExt(ext.name); }}>${t('profile.extensions.deactivate')}</button>`
@@ -995,9 +1006,7 @@ export default function ExtensionsTab({ session, showToast }) {
       </div>` : null}
 
     ${showInstall ? html`
-      <div class="modal-overlay" onClick=${(e) => { if (e.target === e.currentTarget) setShowInstall(false); }}>
-        <div class="modal ext-modal-narrow">
-          <h3>${t('profile.extensions.installModal.title')}</h3>
+      <${Modal} open=${true} onClose=${() => setShowInstall(false)} title=${t('profile.extensions.installModal.title')} className="ext-modal-narrow">
           <form onSubmit=${handleInstall}>
             <div class="ext-modal-section">
               <label>${t('profile.extensions.installModal.manifestLabel')}</label>
@@ -1033,13 +1042,10 @@ export default function ExtensionsTab({ session, showToast }) {
               <button type="submit" class="btn-primary">${t('profile.extensions.installModal.installBtn')}</button>
             </div>
           </form>
-        </div>
-      </div>` : null}
+      <//>` : null}
 
     ${showSrvInstall ? html`
-      <div class="modal-overlay" onClick=${(e) => { if (e.target === e.currentTarget) setShowSrvInstall(false); }}>
-        <div class="modal ext-modal-narrow">
-          <h3>Install Server Extension</h3>
+      <${Modal} open=${true} onClose=${() => setShowSrvInstall(false)} title="Install Server Extension" className="ext-modal-narrow">
           <div class="ext-modal-section">
             <label>YAML Manifest</label>
             <textarea rows="12" class="ext-modal-textarea" placeholder="metadata:\n  name: my-extension\n  version: 1.0.0\n  description: ...\n\nactions:\n  - id: my-action\n    ..." value=${srvManifestText} onInput=${(e) => onSrvManifestChange(e.target.value)}></textarea>
@@ -1057,8 +1063,7 @@ export default function ExtensionsTab({ session, showToast }) {
             <button class="btn-outline" onClick=${() => setShowSrvInstall(false)}>Cancel</button>
             <button class="btn-primary" onClick=${handleSrvInstall}>Install</button>
           </div>
-        </div>
-      </div>` : null}
+      <//>` : null}
 
     <${ConfirmUI} />
   </div>`;

package/dist/public/views/profile/federation-tab.js

@@ -4,6 +4,8 @@
  * @version-history
  *   v1.0.0 — 2026-03-16 — Initial federation tab
  *   v1.1.0 — 2026-03-17 — Replace inline styles with CSS classes
+ *   v1.2.0 — 2026-06-02 — Component unification (#11): peer online/offline dot
+ *     uses canonical <StatusDot> (alive/dead) instead of bespoke .peer-dot.
  */
 import { h } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
@@ -12,6 +14,7 @@ const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { escHtml } from '/js/utils.js';
 import { Spinner } from './shared.js';
+import { StatusDot } from '/components/StatusDot.js';
 import { listPeers } from '/js/services/federation.js';
 
 export default function FederationTab({ session, showToast }) {
@@ -53,7 +56,7 @@ export default function FederationTab({ session, showToast }) {
                     <div class="card-subtitle">${escHtml(p.url || '')}</div>
                   </div>
                   <div class="peer-status">
-                    <span class="peer-dot ${alive ? 'alive' : 'dead'}"></span>
+                    <${StatusDot} status=${alive ? 'alive' : 'dead'} />
                     <span class="fed-status-text ${alive ? 'online' : 'offline'}">${alive ? t('profile.federation.online') : t('profile.federation.offline')}</span>
                   </div>
                 </div>

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

@@ -28,6 +28,8 @@ import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { apiPost } from '/js/api.js';
+import { copyToClipboard } from '/js/utils.js';
+import { CopyButton } from '/components/CopyButton.js';
 import {
   saveComponent, registerComponent, reregisterComponent, writeProjectLog, writeDebugArtifact,
   getNextPass, MULTI_PASS_TYPES, saveSkeleton, saveUnit, saveTestCode,
@@ -637,7 +639,7 @@ export function ComponentDetail({ component, project, components, projectId, int
       interviewSpec,
     );
     try {
-      await navigator.clipboard.writeText(fresh);
+      await copyToClipboard(fresh);
       const updated = addHistory(component, 'prompt_copied');
       await saveComponent(projectId, { ...updated, status: 'waiting_user', prompt: fresh });
       showToast?.(t('profile.foundry.promptCopied'));
@@ -719,7 +721,7 @@ export function ComponentDetail({ component, project, components, projectId, int
   async function handleCopyTestPrompt() {
     if (!currentTestPrompt) return;
     try {
-      await navigator.clipboard.writeText(currentTestPrompt);
+      await copyToClipboard(currentTestPrompt);
       showToast?.(t('profile.foundry.test_prompt_copied'));
       await writeProjectLog(projectId, 'test_prompt_copied', { meta: { component: component.label, by: 'user' } });
     } catch { /* clipboard fallback */ }
@@ -817,14 +819,6 @@ export function ComponentDetail({ component, project, components, projectId, int
   // Multi-pass: current pass and submit handler
   const currentPass = isMultiPass && component.passes ? getNextPass(component.passes) : null;
 
-  async function handlePassCopy() {
-    if (!passPrompt) return;
-    try {
-      await navigator.clipboard.writeText(passPrompt);
-      showToast?.(t('profile.foundry.promptCopied'));
-    } catch { /* clipboard fallback */ }
-  }
-
   async function handlePassRunWithAi() {
     if (!currentPass || !passPrompt) return;
     setAiRunning(true);
@@ -899,9 +893,11 @@ export function ComponentDetail({ component, project, components, projectId, int
           <label>${t('profile.foundry.passProgress')} — ${t('profile.foundry.' + (({'test':'passTest','skeleton':'passSkeleton','unit':'passUnit','assembly':'passAssembly','reflection':'passReflection'})[currentPass.type] || currentPass.type))}${currentPass.unitLabel ? ': ' + currentPass.unitLabel : ''}</label>
           <pre class="fnd-prompt-box">${passPrompt}</pre>
           <div class="flex-row-wrap">
-            <button class="btn-outline btn-sm" onClick=${handlePassCopy}>
-              ${t('profile.foundry.copyPrompt')}
-            </button>
+            <${CopyButton}
+              text=${passPrompt}
+              label=${t('profile.foundry.copyPrompt')}
+              className="btn-outline btn-sm"
+              onCopied=${() => showToast?.(t('profile.foundry.promptCopied'))} />
             ${orSettings?.hasApiKey && html`
               <button class="btn-outline btn-sm fnd-or-run-btn ${aiRunning ? 'fnd-or-running' : ''}"
                 onClick=${handlePassRunWithAi}
@@ -982,10 +978,11 @@ export function ComponentDetail({ component, project, components, projectId, int
         />
         <div class="fnd-actions">
           ${explainPrompt && html`
-            <button class="btn-ghost btn-sm" onClick=${() => navigator.clipboard.writeText(explainPrompt)}
-              title="Copy explain prompt — ask AI to describe what it built before validating">
-              Explain
-            </button>
+            <${CopyButton}
+              text=${explainPrompt}
+              label="Explain"
+              className="btn-ghost btn-sm"
+              title="Copy explain prompt — ask AI to describe what it built before validating" />
           `}
           ${workflowStep === 'validate' && html`<${StepArrow} />`}
           <button class="btn-primary btn-sm" onClick=${handleValidate} disabled=${!result.trim()}
@@ -1017,17 +1014,19 @@ export function ComponentDetail({ component, project, components, projectId, int
           </ul>
           ${reflectionPrompt && html`
             <div class="flex-row" style="margin-bottom: 0.5rem">
-              <button class="btn-outline btn-sm" onClick=${() => navigator.clipboard.writeText(reflectionPrompt)}>
-                1. Copy Reflection (diagnose first)
-              </button>
+              <${CopyButton}
+                text=${reflectionPrompt}
+                label="1. Copy Reflection (diagnose first)"
+                className="btn-outline btn-sm" />
             </div>
           `}
           ${fixPrompt && html`
             <div class="flex-row">
               ${workflowStep === 'fix' && html`<${StepArrow} />`}
-              <button class="btn-primary btn-sm" onClick=${() => navigator.clipboard.writeText(fixPrompt)}>
-                2. ${t('profile.foundry.copyFixPrompt')}
-              </button>
+              <${CopyButton}
+                text=${fixPrompt}
+                label=${'2. ' + t('profile.foundry.copyFixPrompt')}
+                className="btn-primary btn-sm" />
             </div>
           `}
         </div>

package/dist/public/views/profile/foundry-tab.js

@@ -52,6 +52,8 @@ import htm from 'htm';
 const html = htm.bind(h);
 import { t, getLocale } from '/js/i18n.js';
 import { apiGet } from '/js/api.js';
+import { copyToClipboard } from '/js/utils.js';
+import { CopyButton } from '/components/CopyButton.js';
 import {
   listProjects, createProject, updateProject, archiveProject,
   loadAllComponents, saveComponent,
@@ -168,7 +170,7 @@ function NewProjectView({ onBack, onCreated, showToast, orSettings }) {
       }
     } catch { /* proceed without catalog */ }
     const prompt = buildBlueprintPrompt(description, interviewParsed, cortexLibs);
-    navigator.clipboard.writeText(prompt).catch(() => {});
+    await copyToClipboard(prompt);
     showToast?.(t('profile.foundry.blueprintPromptCopied'));
   }
 
@@ -200,12 +202,6 @@ function NewProjectView({ onBack, onCreated, showToast, orSettings }) {
   }
 
   if (phase === 'interview') {
-    function handleCopyInterviewPrompt() {
-      const prompt = buildInterviewPrompt(description, getLocale());
-      navigator.clipboard.writeText(prompt).catch(() => {});
-      showToast?.(t('profile.foundry.interviewPromptCopied'));
-    }
-
     async function handleRunInterviewAi() {
       if (!project) return;
       setAiRunning('interview');
@@ -289,9 +285,11 @@ function NewProjectView({ onBack, onCreated, showToast, orSettings }) {
         <div class="fnd-section">
           <label>${t('profile.foundry.interviewPrompt')}</label>
           <div class="fnd-or-btn-row">
-            <button class="btn-primary" onClick=${handleCopyInterviewPrompt}>
-              ${t('profile.foundry.copyPrompt')}
-            </button>
+            <${CopyButton}
+              text=${buildInterviewPrompt(description, getLocale())}
+              label=${t('profile.foundry.copyPrompt')}
+              className="btn-primary"
+              onCopied=${() => showToast?.(t('profile.foundry.interviewPromptCopied'))} />
             ${orSettings?.hasApiKey && html`
               <button class="btn-outline fnd-or-run-btn ${aiRunning === 'interview' ? 'fnd-or-running' : ''}"
                 onClick=${handleRunInterviewAi}
@@ -430,9 +428,10 @@ function NewProjectView({ onBack, onCreated, showToast, orSettings }) {
             <label>${t('profile.foundry.errors')}</label>
             <ul>${blueprintErrors.map(e => html`<li>${e}</li>`)}</ul>
             ${fixPrompt && html`
-              <button class="btn-primary btn-sm" onClick=${() => navigator.clipboard.writeText(fixPrompt)}>
-                ${t('profile.foundry.copyFixPrompt')}
-              </button>
+              <${CopyButton}
+                text=${fixPrompt}
+                label=${t('profile.foundry.copyFixPrompt')}
+                className="btn-primary btn-sm" />
             `}
           </div>
         `}

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

@@ -22,6 +22,8 @@ import htm from 'htm';
 const html = htm.bind(h);
 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';
 
 export function DebugPanel({ projectId }) {
   const [files, setFiles] = useState([]);
@@ -105,7 +107,7 @@ export function DebugPanel({ projectId }) {
         }
       }
 
-      await navigator.clipboard.writeText(parts.join('\n'));
+      await copyToClipboard(parts.join('\n'));
       // Brief visual feedback
       setCopying('done');
       setTimeout(() => setCopying(false), 2000);
@@ -175,12 +177,7 @@ export function DebugPanel({ projectId }) {
         ${selectedFile ? html`
           <div class="pf-gen-debug-content-header">
             <span class="pf-gen-debug-path">${selectedFile}</span>
-            <button class="btn-outline btn-sm pf-gen-debug-copy-file" onClick=${() => {
-              if (fileContent) {
-                navigator.clipboard.writeText(fileContent);
-                // TODO: visual feedback
-              }
-            }}>Copy File</button>
+            <${CopyButton} text=${fileContent || ''} label="Copy File" copiedLabel="Copied!" className="btn-outline btn-sm pf-gen-debug-copy-file" />
           </div>
           ${loadingFile
             ? html`<p>${t('profile.loading')}</p>`

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

@@ -78,7 +78,10 @@ export function useDashboardCore(projectId, onBack, showToast) {
         // Blueprint exists but no component records yet — initialize them
         const initialized = [];
         for (const c of p.blueprint.components) {
-          const comp = { id: c.id, type: c.type, label: c.label, status: 'not_started', prompt: null, result: null, validationErrors: [], registeredAs: null, history: [], _version: 0 };
+          // 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);
         }

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

@@ -30,6 +30,7 @@
  */
 import { useState, useEffect } from 'preact/hooks';
 import { t } from '/js/i18n.js';
+import { copyToClipboard } from '/js/utils.js';
 import {
   loadAllComponents, saveComponent, registerComponent, writeProjectLog,
   savePendingEdit, clearPendingEdit,
@@ -80,7 +81,7 @@ export function useEditMode(core, autopilotState, projectId, orSettings, session
 
   function handleCopyImpactPrompt() {
     const prompt = buildImpactPrompt(changeRequest, core.project?.blueprint);
-    navigator.clipboard.writeText(prompt).catch(() => {});
+    copyToClipboard(prompt).catch(() => {});
     showToast?.(t('profile.generator.impactPromptCopied'));
     setEditMode('impact');
   }
@@ -225,7 +226,7 @@ export function useEditMode(core, autopilotState, projectId, orSettings, session
       suggestedChange || changeRequest,
       upstream || null,
     );
-    navigator.clipboard.writeText(prompt).catch(() => {});
+    copyToClipboard(prompt).catch(() => {});
     showToast?.(t('profile.generator.editPromptCopied').replace('{name}', comp.label));
   }
 

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

@@ -26,6 +26,8 @@ import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { apiPost } from '/js/api.js';
+import { copyToClipboard } from '/js/utils.js';
+import { CopyButton } from '/components/CopyButton.js';
 import {
   saveComponent, saveSpec, registerComponent, reregisterComponent, writeProjectLog, writeDebugArtifact,
 } from '/js/services/generator.js';
@@ -431,7 +433,7 @@ export function ComponentDetail({ component, project, components, projectId, int
   async function handleCopyPrompt() {
     const fresh = await loadPromptFromBackend(projectId, component.id, 'code');
     try {
-      await navigator.clipboard.writeText(fresh);
+      await copyToClipboard(fresh);
       const updated = addHistory(component, 'prompt_copied');
       await saveComponent(projectId, { ...updated, status: 'waiting_user', prompt: fresh });
       showToast?.(t('profile.generator.promptCopied'));
@@ -498,6 +500,14 @@ export function ComponentDetail({ component, project, components, projectId, int
     ? buildExplainPrompt(component.type, result, bpComp)
     : null;
 
+  // Spec fix prompt — derived from current spec validation errors + spec result (shared by Copy and Fix-with-AI buttons)
+  const specFixPrompt = specValidation && !specValidation.valid
+    ? 'Fix the following spec JSON. It has validation errors.\n\n'
+      + '## Errors\n' + specValidation.errors.map((e, i) => (i + 1) + '. ' + e).join('\n')
+      + '\n\n## Current Spec\n```json\n' + specResult + '\n```\n\n'
+      + '## Rules\n- Fix ONLY the listed errors\n- Do NOT remove existing actions\n- Return the COMPLETE fixed JSON'
+    : null;
+
   // Test prompt for testable component types
   const testableTypes = ['extension', 'cortex', 'app'];
   const isTestable = testableTypes.includes(component.type) && component.registeredAs;
@@ -518,7 +528,7 @@ export function ComponentDetail({ component, project, components, projectId, int
   async function handleCopyTestPrompt() {
     if (!currentTestPrompt) return;
     try {
-      await navigator.clipboard.writeText(currentTestPrompt);
+      await copyToClipboard(currentTestPrompt);
       showToast?.(t('profile.generator.test_prompt_copied'));
       await writeProjectLog(projectId, 'test_prompt_copied', { meta: { component: component.label, by: 'user' } });
     } catch { /* clipboard fallback */ }
@@ -633,9 +643,8 @@ export function ComponentDetail({ component, project, components, projectId, int
           <label>SPEC PROMPT</label>
           <pre class="pf-gen-prompt-box" style="max-height:200px;overflow:auto;font-size:11px">${specPrompt || 'Loading spec prompt...'}</pre>
           <div class="flex-row-wrap">
-            <button class="btn-outline btn-sm" onClick=${() => navigator.clipboard.writeText(specPrompt).then(() => showToast?.('Spec prompt copied'))}>
-              Copy Spec Prompt
-            </button>
+            <${CopyButton} text=${specPrompt} label="Copy Spec Prompt" className="btn-outline btn-sm"
+              onCopied=${() => showToast?.('Spec prompt copied')} />
             ${orSettings?.hasApiKey && html`
               <button class="btn-outline btn-sm pf-gen-or-run-btn ${specAiRunning ? 'pf-gen-or-running' : ''}"
                 onClick=${async () => {
@@ -676,7 +685,11 @@ export function ComponentDetail({ component, project, components, projectId, int
                 else if (component.subtype === 'data') sv = validateDataApiSpec(parsed);
                 else if (component.subtype === 'component') sv = validateComponentSpec(parsed);
                 else if (component.subtype === 'app-domain') sv = validateAppDomainSpec(parsed);
-                else sv = validateDataApiSpec(parsed); // fallback
+                // FAIL LOUD: a cortex must declare its subtype. A silent fallback to a default
+                // validator (previously validateDataApiSpec) masked the real bug — a missing subtype —
+                // as a confusing "Missing wrapsExtension" error on a component cortex. Name the real cause.
+                else if (component.type === 'cortex') sv = { valid: false, errors: ['Cortex component "' + component.id + '" has no subtype (expected data | component | app-domain) — this is an upstream blueprint/init bug; fix the subtype, do not guess a validator'] };
+                else sv = { valid: false, errors: ['Cannot select a spec validator for component "' + component.id + '" (type=' + component.type + ', subtype=' + component.subtype + ')'] };
                 // Also check blueprint action IDs
                 const bp = project?.blueprint;
                 if (bp && component.type === 'extension') {
@@ -730,23 +743,12 @@ export function ComponentDetail({ component, project, components, projectId, int
               <strong>Spec Validation Errors</strong>
               <ul>${specValidation.errors.map(e => html`<li>${e}</li>`)}</ul>
               <div class="flex-row-wrap" style="margin-top:8px">
-                <button class="btn-outline btn-sm" onClick=${() => {
-                  const fixPrompt = 'Fix the following spec JSON. It has validation errors.\n\n'
-                    + '## Errors\n' + specValidation.errors.map((e, i) => (i + 1) + '. ' + e).join('\n')
-                    + '\n\n## Current Spec\n```json\n' + specResult + '\n```\n\n'
-                    + '## Rules\n- Fix ONLY the listed errors\n- Do NOT remove existing actions\n- Return the COMPLETE fixed JSON';
-                  navigator.clipboard.writeText(fixPrompt);
-                  showToast?.('Fix prompt copied');
-                }}>
-                  Copy Fix Prompt
-                </button>
+                <${CopyButton} text=${specFixPrompt} label="Copy Fix Prompt" className="btn-outline btn-sm"
+                  onCopied=${() => showToast?.('Fix prompt copied')} />
                 ${orSettings?.hasApiKey && html`
                   <button class="btn-outline btn-sm pf-gen-or-run-btn ${specAiRunning ? 'pf-gen-or-running' : ''}"
                     onClick=${async () => {
-                      const fixPrompt = 'Fix the following spec JSON. It has validation errors.\n\n'
-                        + '## Errors\n' + specValidation.errors.map((e, i) => (i + 1) + '. ' + e).join('\n')
-                        + '\n\n## Current Spec\n```json\n' + specResult + '\n```\n\n'
-                        + '## Rules\n- Fix ONLY the listed errors\n- Do NOT remove existing actions\n- Return the COMPLETE fixed JSON';
+                      const fixPrompt = specFixPrompt;
                       setSpecAiRunning(true);
                       try {
                         const fixed = await runWithAi(projectId, fixPrompt);
@@ -819,10 +821,8 @@ export function ComponentDetail({ component, project, components, projectId, int
         />
         <div class="pf-gen-actions">
           ${explainPrompt && html`
-            <button class="btn-ghost btn-sm" onClick=${() => navigator.clipboard.writeText(explainPrompt)}
-              title="Copy explain prompt — ask AI to describe what it built before validating">
-              Explain
-            </button>
+            <${CopyButton} text=${explainPrompt} label="Explain" className="btn-ghost btn-sm"
+              title="Copy explain prompt — ask AI to describe what it built before validating" />
           `}
           ${workflowStep === 'validate' && html`<${StepArrow} />`}
           <button class="btn-primary btn-sm" onClick=${handleValidate} disabled=${!result.trim()}
@@ -854,17 +854,13 @@ export function ComponentDetail({ component, project, components, projectId, int
           </ul>
           ${reflectionPrompt && html`
             <div class="flex-row" style="margin-bottom: 0.5rem">
-              <button class="btn-outline btn-sm" onClick=${() => navigator.clipboard.writeText(reflectionPrompt)}>
-                1. Copy Reflection (diagnose first)
-              </button>
+              <${CopyButton} text=${reflectionPrompt} label="1. Copy Reflection (diagnose first)" className="btn-outline btn-sm" />
             </div>
           `}
           ${fixPrompt && html`
             <div class="flex-row">
               ${workflowStep === 'fix' && html`<${StepArrow} />`}
-              <button class="btn-primary btn-sm" onClick=${() => navigator.clipboard.writeText(fixPrompt)}>
-                2. ${t('profile.generator.copyFixPrompt')}
-              </button>
+              <${CopyButton} text=${fixPrompt} label=${'2. ' + t('profile.generator.copyFixPrompt')} className="btn-primary btn-sm" />
             </div>
           `}
         </div>

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

@@ -52,6 +52,8 @@ import htm from 'htm';
 const html = htm.bind(h);
 import { t, getLocale } from '/js/i18n.js';
 import { apiGet } from '/js/api.js';
+import { copyToClipboard } from '/js/utils.js';
+import { CopyButton } from '/components/CopyButton.js';
 import {
   listProjects, createProject, updateProject, archiveProject,
   loadAllComponents, saveComponent,
@@ -168,7 +170,7 @@ function NewProjectView({ onBack, onCreated, showToast, orSettings }) {
   async function handleCopyBlueprintPrompt() {
     try {
       const prompt = await loadGeneratorPrompt(project.projectId, 'blueprint');
-      navigator.clipboard.writeText(prompt).catch(() => {});
+      copyToClipboard(prompt).catch(() => {});
       showToast?.(t('profile.generator.blueprintPromptCopied'));
     } catch (e) {
       showToast?.(e.message, true);
@@ -206,7 +208,7 @@ function NewProjectView({ onBack, onCreated, showToast, orSettings }) {
     async function handleCopyInterviewPrompt() {
       try {
         const prompt = await loadGeneratorPrompt(project.projectId, 'interview', getLocale());
-        navigator.clipboard.writeText(prompt).catch(() => {});
+        copyToClipboard(prompt).catch(() => {});
         showToast?.(t('profile.generator.interviewPromptCopied'));
       } catch (e) {
         showToast?.(e.message, true);
@@ -428,9 +430,7 @@ function NewProjectView({ onBack, onCreated, showToast, orSettings }) {
             <label>${t('profile.generator.errors')}</label>
             <ul>${blueprintErrors.map(e => html`<li>${e}</li>`)}</ul>
             ${fixPrompt && html`
-              <button class="btn-primary btn-sm" onClick=${() => navigator.clipboard.writeText(fixPrompt)}>
-                ${t('profile.generator.copyFixPrompt')}
-              </button>
+              <${CopyButton} text=${fixPrompt} label=${t('profile.generator.copyFixPrompt')} className="btn-primary btn-sm" />
             `}
           </div>
         `}