aimeat 1.2.0

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

@@ -0,0 +1,63 @@
+/**
+ * @file federation-tab.js
+ * @description Profile tab showing federated peer nodes and their online/offline status.
+ * @version-history
+ *   v1.0.0 — 2026-03-16 — Initial federation tab
+ *   v1.1.0 — 2026-03-17 — Replace inline styles with CSS classes
+ */
+import { h } from 'preact';
+import { useState, useEffect, useRef } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { escHtml } from '/js/utils.js';
+import { Spinner } from './shared.js';
+import { listPeers } from '/js/services/federation.js';
+
+export default function FederationTab({ session, showToast }) {
+  const [federation, setFederation] = useState(null);
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  async function loadData() {
+    try {
+      const peers = await listPeers();
+      setFederation(peers);
+    } catch { setFederation([]); }
+  }
+
+  // Live update listener
+  const loadRef = useRef(loadData);
+  loadRef.current = loadData;
+  useEffect(() => {
+    const handler = () => loadRef.current();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, []);
+
+  return html`
+    <div class="section-title">${t('profile.federation.title')}</div>
+    <div class="section-desc">${t('profile.federation.desc')}</div>
+    ${!federation ? html`<${Spinner} text=${t('profile.federation.loading')} />`
+      : federation.length === 0 ? html`<div class="empty">${t('profile.federation.empty')}</div>`
+      : html`<div class="section-title">${t('profile.federation.peers')}</div>
+          ${federation.map(p => {
+            const alive = p.status === 'active' || p.alive;
+            return html`
+              <div class="card">
+                <div class="peer-card">
+                  <div>
+                    <div class="card-title">${escHtml(p.node_id || p.nodeId || p.url)}</div>
+                    <div class="card-subtitle">${escHtml(p.url || '')}</div>
+                  </div>
+                  <div class="peer-status">
+                    <span class="peer-dot ${alive ? 'alive' : 'dead'}"></span>
+                    <span class="fed-status-text ${alive ? 'online' : 'offline'}">${alive ? t('profile.federation.online') : t('profile.federation.offline')}</span>
+                  </div>
+                </div>
+              </div>`;
+          })}`
+    }`;
+}

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

@@ -0,0 +1,193 @@
+/**
+ * @file DebugPanel.js
+ * @description Debug panel sub-component for the foundry dashboard — shows all
+ *   debug artifacts (prompts, generated code, test code, test results) saved to disk
+ *   during the autopilot run. Fetches from the debug API and renders files with
+ *   syntax-aware formatting.
+ *
+ *   Part of the hook-per-domain architecture. Standalone panel toggled from the
+ *   lifecycle toolbar. Fetches its own data via API calls.
+ *
+ * @structure
+ *   - DebugPanel({ projectId }): fetches and renders debug files for a project
+ * @usage
+ *   import { DebugPanel } from './foundry-dashboard/DebugPanel.js';
+ *   ${showDebug && html`<${DebugPanel} projectId=${projectId} />`}
+ * @version-history
+ *   v1.0.0 — 2026-03-23 — Initial implementation
+ */
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { apiGet, apiDelete } from '/js/api.js';
+
+export function DebugPanel({ projectId }) {
+  const [files, setFiles] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [fileContent, setFileContent] = useState(null);
+  const [loadingFile, setLoadingFile] = useState(false);
+
+  useEffect(() => {
+    loadFiles();
+  }, [projectId]);
+
+  async function loadFiles() {
+    setLoading(true);
+    try {
+      const resp = await apiGet(`/v1/foundry/debug/${projectId}/files`);
+      setFiles(resp?.data?.files || []);
+    } catch {
+      setFiles([]);
+    }
+    setLoading(false);
+  }
+
+  async function loadFile(path) {
+    setSelectedFile(path);
+    setLoadingFile(true);
+    try {
+      const resp = await apiGet(`/v1/foundry/debug/${projectId}/file?path=${encodeURIComponent(path)}`);
+      setFileContent(resp?.data?.content || null);
+    } catch {
+      setFileContent('(Error loading file)');
+    }
+    setLoadingFile(false);
+  }
+
+  async function handleDelete() {
+    if (!confirm('Delete all debug data for this project?')) return;
+    try {
+      await apiDelete(`/v1/foundry/debug/${projectId}`);
+      setFiles([]);
+      setSelectedFile(null);
+      setFileContent(null);
+    } catch { /* */ }
+  }
+
+  const [copying, setCopying] = useState(false);
+
+  async function handleCopyAll() {
+    setCopying(true);
+    try {
+      // Sort files in logical order: project meta first, then by component, then logs last
+      const sorted = [...files].sort((a, b) => {
+        const order = (f) => {
+          if (f.startsWith('project') || f.startsWith('interview') || f.startsWith('blueprint')) return '0_' + f;
+          if (f.includes('logs/')) return '9_' + f;
+          // Components: sort by component ID, then by phase
+          const phaseOrder = { 'prompt.txt': 1, 'generated.txt': 2, 'validation.json': 3, 'test-prompt.txt': 4, 'test-code.js': 5, 'test-result.json': 6 };
+          const name = f.split('/').pop();
+          return '5_' + f.replace(name, String(phaseOrder[name] || 7).padStart(2, '0'));
+        };
+        return order(a).localeCompare(order(b));
+      });
+
+      const parts = [];
+      parts.push(`=== GENERATOR DEBUG DUMP — ${projectId} ===`);
+      parts.push(`Date: ${new Date().toISOString()}`);
+      parts.push(`Files: ${files.length}`);
+      parts.push('');
+
+      for (const f of sorted) {
+        try {
+          const resp = await apiGet(`/v1/foundry/debug/${projectId}/file?path=${encodeURIComponent(f)}`);
+          const content = resp?.data?.content || '(empty)';
+          parts.push(`${'='.repeat(60)}`);
+          parts.push(`FILE: ${f}`);
+          parts.push(`${'='.repeat(60)}`);
+          parts.push(content);
+          parts.push('');
+        } catch {
+          parts.push(`--- ${f}: (failed to load) ---`);
+        }
+      }
+
+      await navigator.clipboard.writeText(parts.join('\n'));
+      // Brief visual feedback
+      setCopying('done');
+      setTimeout(() => setCopying(false), 2000);
+    } catch (e) {
+      setCopying(false);
+      alert('Copy failed: ' + e.message);
+    }
+  }
+
+  // Group files by component
+  const grouped = {};
+  for (const f of files) {
+    const parts = f.split('/');
+    const group = parts.length > 1 ? parts.slice(0, -1).join('/') : 'root';
+    if (!grouped[group]) grouped[group] = [];
+    grouped[group].push(f);
+  }
+
+  // Determine file type for display
+  function fileIcon(path) {
+    if (path.endsWith('.json')) return '\uD83D\uDCC4';
+    if (path.endsWith('.js')) return '\uD83D\uDCDC';
+    if (path.endsWith('.txt')) return '\uD83D\uDCDD';
+    if (path.endsWith('.jsonl')) return '\uD83D\uDCCA';
+    return '\uD83D\uDCC1';
+  }
+
+  function fileName(path) {
+    return path.split('/').pop();
+  }
+
+  if (loading) return html`<div class="fnd-debug-panel"><p>${t('profile.loading')}</p></div>`;
+
+  if (files.length === 0) {
+    return html`<div class="fnd-debug-panel">
+      <h4>Debug</h4>
+      <p class="fnd-debug-empty">No debug data yet. Run the autopilot to generate debug artifacts.</p>
+    </div>`;
+  }
+
+  return html`<div class="fnd-debug-panel">
+    <div class="fnd-debug-header">
+      <h4>Debug Artifacts</h4>
+      <span class="fnd-debug-count">${files.length} files</span>
+      <button class="btn-primary btn-sm" onClick=${handleCopyAll} disabled=${copying}>
+        ${copying === 'done' ? '\u2705 Copied!' : copying ? 'Copying...' : 'Copy All Debug'}
+      </button>
+      <button class="btn-ghost btn-sm" onClick=${() => loadFiles()}>Refresh</button>
+      <button class="btn-ghost btn-sm fnd-debug-delete" onClick=${handleDelete}>Delete all</button>
+    </div>
+    <div class="fnd-debug-body">
+      <div class="fnd-debug-tree">
+        ${Object.entries(grouped).map(([group, groupFiles]) => html`
+          <div class="fnd-debug-group">
+            <div class="fnd-debug-group-label">${group === 'root' ? 'Project' : group}</div>
+            ${groupFiles.map(f => html`
+              <div class="fnd-debug-file ${selectedFile === f ? 'active' : ''}"
+                onClick=${() => loadFile(f)}>
+                <span class="fnd-debug-icon">${fileIcon(f)}</span>
+                <span class="fnd-debug-name">${fileName(f)}</span>
+              </div>
+            `)}
+          </div>
+        `)}
+      </div>
+      <div class="fnd-debug-content">
+        ${selectedFile ? html`
+          <div class="fnd-debug-content-header">
+            <span class="fnd-debug-path">${selectedFile}</span>
+            <button class="btn-outline btn-sm fnd-debug-copy-file" onClick=${() => {
+              if (fileContent) {
+                navigator.clipboard.writeText(fileContent);
+                // TODO: visual feedback
+              }
+            }}>Copy File</button>
+          </div>
+          ${loadingFile
+            ? html`<p>${t('profile.loading')}</p>`
+            : html`<pre class="fnd-debug-pre">${fileContent}</pre>`
+          }
+        ` : html`<p class="fnd-debug-hint">Select a file to view its content</p>`}
+      </div>
+    </div>
+  </div>`;
+}

package/dist/public/views/profile/foundry-dashboard/DiagnosticsPanel.js

@@ -0,0 +1,69 @@
+/**
+ * @file DiagnosticsPanel.js
+ * @description Diagnostics table sub-component — renders a table showing each
+ *   component's foundry status, live status, and last action. Pure component
+ *   that derives diagnosticsData from its props.
+ *
+ *   Part of the hook-per-domain architecture.
+ *
+ * @structure
+ *   - DiagnosticsPanel({ components, liveStatuses }): diagnostics table
+ * @usage
+ *   import { DiagnosticsPanel } from './foundry-dashboard/DiagnosticsPanel.js';
+ *   ${showDiagnostics && html`<${DiagnosticsPanel} components=${core.components} liveStatuses=${core.liveStatuses} />`}
+ * @version-history
+ *   v1.0.0 — 2026-03-22 — Extracted from foundry-tab.js ProjectDashboard
+ */
+import { h } from 'preact';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+
+export function DiagnosticsPanel({ components, liveStatuses }) {
+  const data = components.map(c => {
+    const live = liveStatuses[c.id] || {};
+    return {
+      id: c.id, label: c.label, type: c.type,
+      foundryStatus: c.status,
+      registeredAs: c.registeredAs,
+      liveStatus: live.status || 'unknown',
+      active: live.active || false,
+      installed: live.installed || false,
+      lastAction: (c.history || []).slice(-1)[0] || null,
+    };
+  });
+
+  return html`
+    <div class="fnd-diagnostics-panel">
+      <h4>${t('profile.foundry.diagnostics')}</h4>
+      <table class="fnd-diag-table">
+        <thead>
+          <tr>
+            <th>${t('profile.foundry.diagComponent')}</th>
+            <th>${t('profile.foundry.diagType')}</th>
+            <th>${t('profile.foundry.diagGenStatus')}</th>
+            <th>${t('profile.foundry.diagLiveStatus')}</th>
+            <th>${t('profile.foundry.diagLastAction')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${data.map(d => html`
+            <tr class=${d.active ? 'diag-active' : d.installed ? 'diag-installed' : ''}>
+              <td>${d.label}</td>
+              <td><span class="fnd-type-badge type-${d.type}">${d.type}</span></td>
+              <td><span class="fnd-status-badge status-${d.foundryStatus}">${d.foundryStatus}</span></td>
+              <td>
+                <span class=${d.active ? 'fnd-live-active' : d.installed ? 'fnd-live-installed' : 'fnd-live-missing'}>
+                  ${d.liveStatus}
+                </span>
+              </td>
+              <td class="fnd-diag-action">
+                ${d.lastAction ? `${d.lastAction.action} (${new Date(d.lastAction.at).toLocaleTimeString()})` : '-'}
+              </td>
+            </tr>
+          `)}
+        </tbody>
+      </table>
+    </div>
+  `;
+}

package/dist/public/views/profile/foundry-dashboard/EditModePanel.js

@@ -0,0 +1,141 @@
+/**
+ * @file EditModePanel.js
+ * @description Edit service panel sub-component — renders the 3-phase edit flow:
+ *   1. Request mode: textarea for describing the change
+ *   2. Impact mode: paste/parse AI impact analysis JSON
+ *   3. Editing mode: per-component edit buttons with impact classification
+ *
+ *   Pure rendering component: all state and handlers come from useEditMode hook.
+ *   The batch edit "Run All" button uses autopilotState for progress display.
+ *
+ *   Part of the hook-per-domain architecture.
+ *
+ * @structure
+ *   - EditModePanel({ edit, core, autopilotState, orSettings }): renders the active
+ *     edit sub-mode based on edit.editMode value
+ * @usage
+ *   import { EditModePanel } from './foundry-dashboard/EditModePanel.js';
+ *   ${edit.editMode && html`<${EditModePanel} edit=${edit} core=${core} autopilotState=${autopilotState} orSettings=${orSettings} />`}
+ * @version-history
+ *   v1.0.0 — 2026-03-22 — Extracted from foundry-tab.js ProjectDashboard
+ */
+import { h } from 'preact';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+
+export function EditModePanel({ edit, core, autopilotState, orSettings }) {
+  if (edit.editMode === 'request') {
+    return html`
+      <div class="fnd-edit-panel">
+        <h4>${t('profile.foundry.editService')}</h4>
+        <p class="fnd-subtitle">${t('profile.foundry.editServiceDesc')}</p>
+        <textarea class="fnd-result-area" rows="4"
+          placeholder="${t('profile.foundry.editPlaceholder')}"
+          value=${edit.changeRequest}
+          onInput=${e => edit.setChangeRequest(e.target.value)}
+        />
+        <div class="fnd-actions">
+          <button class="btn-primary btn-sm" onClick=${edit.handleCopyImpactPrompt} disabled=${!edit.changeRequest.trim()}>
+            ${t('profile.foundry.copyImpactPrompt')}
+          </button>
+          ${orSettings?.hasApiKey && html`
+            <button class="btn-outline btn-sm fnd-or-run-btn ${edit.aiRunning === 'impact' ? 'fnd-or-running' : ''}"
+              onClick=${edit.handleRunImpactAi}
+              disabled=${!edit.changeRequest.trim() || edit.aiRunning !== null}>
+              ${edit.aiRunning === 'impact'
+                ? html`<span class="fnd-or-spin">⟳</span> ${t('profile.foundry.openrouter.waiting')}`
+                : t('profile.foundry.openrouter.runWithAi')}
+            </button>
+          `}
+        </div>
+      </div>
+    `;
+  }
+
+  if (edit.editMode === 'impact') {
+    return html`
+      <div class="fnd-edit-panel">
+        <h4>${t('profile.foundry.impactAnalysis')}</h4>
+        <p class="fnd-subtitle">${t('profile.foundry.impactPasteDesc')}</p>
+        <textarea class="fnd-result-area" rows="8"
+          placeholder="Paste the JSON response from AI Chat..."
+          value=${edit.impactResult}
+          onInput=${e => edit.setImpactResult(e.target.value)}
+        />
+        ${edit.impactErrors.length > 0 && html`
+          <div class="fnd-errors">
+            <ul>${edit.impactErrors.map(e => html`<li>${e}</li>`)}</ul>
+          </div>
+        `}
+        <div class="fnd-actions">
+          <button class="btn-primary btn-sm" onClick=${edit.handleParseImpact} disabled=${!edit.impactResult.trim()}>
+            ${t('profile.foundry.analyzeImpact')}
+          </button>
+          <button class="btn-outline btn-sm" onClick=${() => edit.setEditMode('request')}>${t('profile.foundry.back')}</button>
+        </div>
+      </div>
+    `;
+  }
+
+  if (edit.editMode === 'editing' && edit.impactParsed) {
+    return html`
+      <div class="fnd-edit-panel">
+        <h4>${t('profile.foundry.impactResults')}</h4>
+        ${edit.impactParsed.summary && html`<p class="fnd-subtitle">${edit.impactParsed.summary}</p>`}
+        <div class="fnd-impact-list">
+          ${edit.impactParsed.analysis.map(a => {
+            const comp = core.components.find(c => c.id === a.id);
+            const impactClass = a.impact === 'root' ? 'impact-root' : a.impact === 'update' ? 'impact-update' : 'impact-none';
+            return html`
+              <div class="fnd-impact-item ${impactClass}">
+                <div class="fnd-impact-header">
+                  <span class="fnd-impact-badge ${impactClass}">${a.impact.toUpperCase()}</span>
+                  <span class="fnd-impact-label">${a.label}</span>
+                </div>
+                <div class="fnd-impact-reason">${a.reason}</div>
+                ${(a.impact === 'root' || a.impact === 'update') && comp && html`
+                  <div class="fnd-actions mt-xs">
+                    <button class="btn-outline btn-sm"
+                      onClick=${() => edit.handleCopyEditPrompt(comp, a.suggestedChange)}>
+                      ${t('profile.foundry.copyEditPrompt')}
+                    </button>
+                    ${orSettings?.hasApiKey && html`
+                      <button class="btn-outline btn-sm fnd-or-run-btn ${edit.aiRunning === comp.id ? 'fnd-or-running' : ''}"
+                        onClick=${() => edit.handleRunSingleEditAi(comp, a.suggestedChange)}
+                        disabled=${edit.aiRunning !== null || autopilotState.running}>
+                        ${edit.aiRunning === comp.id
+                          ? html`<span class="fnd-or-spin">⟳</span> ${t('profile.foundry.openrouter.waiting')}`
+                          : t('profile.foundry.openrouter.runWithAi')}
+                      </button>
+                    `}
+                  </div>
+                `}
+              </div>
+            `;
+          })}
+        </div>
+        <div class="fnd-actions">
+          ${orSettings?.hasApiKey && edit.impactParsed.analysis.some(a => a.impact === 'root' || a.impact === 'update') && html`
+            <button class="btn-primary btn-sm fnd-or-run-btn ${autopilotState.running ? 'fnd-or-running' : ''}"
+              onClick=${edit.handleRunAllEditsAi}
+              disabled=${autopilotState.running}>
+              ${autopilotState.running
+                ? html`<span class="fnd-or-spin">⟳</span> ${autopilotState.step}`
+                : t('profile.foundry.openrouter.runAll')}
+            </button>
+            ${autopilotState.running && html`
+              <button class="btn-danger btn-sm" onClick=${autopilotState.cancel}>
+                ${t('profile.foundry.openrouter.cancel')}
+              </button>
+            `}
+          `}
+          <button class="btn-outline btn-sm" onClick=${() => edit.setEditMode('impact')}>${t('profile.foundry.backToImpact')}</button>
+          <button class="btn-ghost btn-sm" onClick=${edit.exitEditMode}>${t('profile.foundry.done')}</button>
+        </div>
+      </div>
+    `;
+  }
+
+  return null;
+}

package/dist/public/views/profile/foundry-dashboard/PackageDialog.js

@@ -0,0 +1,96 @@
+/**
+ * @file PackageDialog.js
+ * @description Package dialog sub-component — renders the form for packaging a
+ *   foundry project into a reusable template or updating an existing package.
+ *   Pure rendering component: all state and handlers come from usePackaging hook.
+ *
+ *   Part of the hook-per-domain architecture. Receives the full usePackaging()
+ *   return value as `pkg` prop.
+ *
+ * @structure
+ *   - PackageDialog({ project, pkg }): dialog with visibility, category, tags,
+ *     changelog fields + action buttons
+ * @usage
+ *   import { PackageDialog } from './foundry-dashboard/PackageDialog.js';
+ *   ${pkg.showDialog && html`<${PackageDialog} project=${project} pkg=${pkg} />`}
+ * @version-history
+ *   v1.0.0 — 2026-03-22 — Extracted from foundry-tab.js ProjectDashboard
+ */
+import { h } from 'preact';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+
+export function PackageDialog({ project, pkg }) {
+  return html`
+    <div class="fnd-package-dialog">
+      <h4>${project.packageGroupId
+        ? t('profile.foundry.updatePackage')
+        : t('profile.foundry.packageProject')}</h4>
+      ${project.forkedFrom && html`
+        <p class="text-caption mb-half">
+          ${t('profile.foundry.forkedFrom').replace('{name}', project.forkedFrom.packageGroupId).replace('{author}', project.forkedFrom.author)}
+        </p>
+      `}
+
+      ${!project.packageGroupId && html`
+        <label class="fnd-pkg-label">${t('profile.foundry.packageVisibility')}
+          <select value=${pkg.visibility} onChange=${e => pkg.setVisibility(e.target.value)}>
+            <option value="private">Private</option>
+            <option value="public">Public</option>
+          </select>
+        </label>
+      `}
+
+      <label class="fnd-pkg-label">${t('profile.foundry.packageCategory')}
+        <input type="text" value=${pkg.category}
+          onChange=${e => pkg.setCategory(e.target.value)}
+          placeholder="utility" />
+      </label>
+
+      <label class="fnd-pkg-label">${t('profile.foundry.packageTags')}
+        <input type="text" value=${pkg.tags}
+          onChange=${e => pkg.setTags(e.target.value)}
+          placeholder="alerts, maps, finland" />
+      </label>
+
+      ${project.packageGroupId && html`
+        <div class="fnd-changes-summary">
+          <strong>${t('profile.foundry.changesSummary')}</strong>
+          ${pkg.changes ? html`
+            <ul class="fnd-changes-list">
+              ${pkg.changes.filter(c => c.action === 'added').map(c => html`
+                <li class="fnd-change-added">${t('profile.foundry.changeAdded')}: ${c.label}</li>
+              `)}
+              ${pkg.changes.filter(c => c.action === 'modified').map(c => html`
+                <li class="fnd-change-modified">${t('profile.foundry.changeModified')}: ${c.label}</li>
+              `)}
+              ${pkg.changes.filter(c => c.action === 'removed').map(c => html`
+                <li class="fnd-change-removed">${t('profile.foundry.changeRemoved')}: ${c.label}</li>
+              `)}
+              ${pkg.changes.filter(c => c.action === 'unchanged').map(c => html`
+                <li class="fnd-change-unchanged">${t('profile.foundry.changeUnchanged')}: ${c.label}</li>
+              `)}
+            </ul>
+          ` : html`<span class="text-caption">...</span>`}
+          <label class="fnd-pkg-label">${t('profile.foundry.changelogNote')}
+            <input type="text" value=${pkg.changelogNote}
+              onChange=${e => pkg.setChangelogNote(e.target.value)}
+              placeholder=${t('profile.foundry.changelogPlaceholder')} />
+          </label>
+        </div>
+      `}
+
+      <div class="flex-actions">
+        <button class="btn-outline btn-sm" onClick=${() => pkg.setShowDialog(false)}>
+          ${t('profile.foundry.cancelRemove')}
+        </button>
+        <button class="btn-primary btn-sm" onClick=${pkg.handlePackage} disabled=${pkg.loading}>
+          ${pkg.loading ? '...' : (project.packageGroupId
+            ? t('profile.foundry.updatePackage')
+            : t('profile.foundry.packageProject'))}
+        </button>
+      </div>
+    </div>
+  `;
+}

package/dist/public/views/profile/foundry-dashboard/RemovePanel.js

@@ -0,0 +1,53 @@
+/**
+ * @file RemovePanel.js
+ * @description Remove components panel sub-component — renders checkboxes for
+ *   selecting registered components to remove, with memory deletion toggle.
+ *   Pure rendering component: all state and handlers come from useLifecycle hook.
+ *
+ *   Part of the hook-per-domain architecture. Receives the useLifecycle() return
+ *   value as `lifecycle` prop.
+ *
+ * @structure
+ *   - RemovePanel({ components, lifecycle }): panel with component checkboxes + remove button
+ * @usage
+ *   import { RemovePanel } from './foundry-dashboard/RemovePanel.js';
+ *   ${lifecycle.showRemovePanel && html`<${RemovePanel} components=${core.components} lifecycle=${lifecycle} />`}
+ * @version-history
+ *   v1.0.0 — 2026-03-22 — Extracted from foundry-tab.js ProjectDashboard
+ */
+import { h } from 'preact';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+
+export function RemovePanel({ components, lifecycle }) {
+  return html`
+    <div class="fnd-remove-panel">
+      <p class="fnd-remove-heading">${t('profile.foundry.removeSelectLabel')}</p>
+      <div class="fnd-remove-list">
+        ${components.filter(c => c.registeredAs).map(c => html`
+          <label class="fnd-remove-item">
+            <input type="checkbox"
+              checked=${!!lifecycle.removeSelection[c.id]}
+              onChange=${e => lifecycle.setRemoveSelection({ ...lifecycle.removeSelection, [c.id]: e.target.checked })}
+            />
+            <span>${c.label}</span>
+            <span class="fnd-type-badge type-${c.type}">${c.type}</span>
+            <span class="fnd-remove-name">${c.registeredAs}</span>
+          </label>
+        `)}
+      </div>
+      <div class="flex-row">
+        <label class="fnd-checkbox-label">
+          <input type="checkbox" checked=${lifecycle.removeMemory} onChange=${e => lifecycle.setRemoveMemory(e.target.checked)} />
+          ${t('profile.foundry.deleteExtensionMemory')}
+        </label>
+        <button class="btn-danger-solid btn-sm"
+          onClick=${lifecycle.handleRemoveConfirmed}
+          disabled=${lifecycle.lifecycleLoading === 'remove' || Object.values(lifecycle.removeSelection).filter(Boolean).length === 0}>
+          ${lifecycle.lifecycleLoading === 'remove' ? t('profile.foundry.removingLabel') : t('profile.foundry.removeSelected').replace('{count}', Object.values(lifecycle.removeSelection).filter(Boolean).length)}
+        </button>
+      </div>
+    </div>
+  `;
+}

package/dist/public/views/profile/foundry-dashboard/use-autopilot-state.js

@@ -0,0 +1,53 @@
+/**
+ * @file use-autopilot-state.js
+ * @description Shared autopilot primitives — running state, current step label,
+ *   and cancellation ref. Consumed by both useAutopilot (generation pipeline) and
+ *   useEditMode (batch edit operations) so they share a single "autopilot is active"
+ *   indicator in the UI.
+ *
+ *   Part of the hook-per-domain architecture for ProjectDashboard. This hook is
+ *   instantiated once in the dashboard shell and passed to useAutopilot and
+ *   useEditMode as a parameter. It provides start/finish/cancel lifecycle methods
+ *   so consumers don't manipulate the state directly.
+ *
+ *   Architecture: ProjectDashboard shell → useAutopilotState()
+ *                   ├─ passed to useAutopilot(core, autopilotState, ...)
+ *                   └─ passed to useEditMode(core, autopilotState, ...)
+ *
+ * @structure
+ *   - useAutopilotState(): custom hook
+ *     State: running, step (useState), cancelledRef (useRef)
+ *     Methods: start(), finish(), cancel()
+ * @usage
+ *   import { useAutopilotState } from './foundry-dashboard/use-autopilot-state.js';
+ *   const autopilotState = useAutopilotState();
+ * @version-history
+ *   v1.0.0 — 2026-03-22 — Extracted from foundry-tab.js ProjectDashboard
+ */
+import { useState, useRef } from 'preact/hooks';
+import { cancelAiRequest } from '../foundry-detail.js';
+import { t } from '/js/i18n.js';
+
+export function useAutopilotState() {
+  const [running, setRunning] = useState(false);
+  const [step, setStep] = useState('');
+  const cancelledRef = useRef(false);
+
+  function start() {
+    setRunning(true);
+    cancelledRef.current = false;
+  }
+
+  function finish() {
+    setRunning(false);
+    setStep('');
+  }
+
+  function cancel() {
+    cancelledRef.current = true;
+    cancelAiRequest();
+    setStep(t('profile.foundry.openrouter.cancel') + '...');
+  }
+
+  return { running, step, setStep, cancelledRef, start, finish, cancel };
+}