aimeat 1.40.1 → 2.0.0

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

@@ -2,6 +2,12 @@
  * @file apps-tab.js
  * @description Profile tab for HTML app management — upload, gallery, access code editing.
  * @version-history
+ *   v1.7.0 — 2026-07-17 — Agent-Bundled Apps Slice 2: the Deploy action opens a panel with a
+ *     crew-def inspector (crew/tools/tasks) + runner and organism pickers instead of one-click
+ *     defaulting to crew-forge.
+ *   v1.6.0 — 2026-07-16 — Agent-Bundled Apps: My-Apps cards show a "ships an agent" badge for apps
+ *     declaring manifest.cortex.agents, with per-agent Deploy/Undeploy onto the owner's own fleet
+ *     and liveness read from the deploy status endpoint (AppAgents component).
  *   v1.5.0 — 2026-07-06 — Bound skills (2d): each My-Apps card shows the skills that teach agents
  *     this app + an attach/detach picker (rewrites the skill's frontmatter metadata.binding).
  *   v1.4.0 — 2026-06-26 — Add "Edit details" (rename + edit description) to My Apps — updates the
@@ -22,7 +28,9 @@ import { t } from '/js/i18n.js';
 import { escHtml, handleImgError, timeAgo } from '/js/utils.js';
 import { Spinner } from './shared.js';
 import { useConfirm } from '/components/Modal.js';
-import { listApps, uploadApp, deleteApp, patchApp } from '/js/services/apps.js';
+import { listApps, uploadApp, deleteApp, patchApp, deployAppAgent, undeployAppAgent, appAgentStatus } from '/js/services/apps.js';
+import { listAgents } from '/js/services/agents.js';
+import { listOrganisms } from '/js/services/organisms.js';
 import * as skillsService from '/js/services/skills.js';
 import { getNodeUrl } from '/js/services/auth.js';
 import { recordRecent } from '/js/recents.js';
@@ -112,6 +120,162 @@ function AppSkills({ owner, filename, showToast }) {
   `;
 }
 
+/**
+ * Agent-Bundled Apps: the crew-defs this app ships (manifest.cortex.agents), each with a
+ * deploy panel (crew-def inspector + runner/organism pickers) targeting the OWNER'S OWN
+ * fleet, Undeploy, and liveness from the status endpoint (agent registration + the
+ * agents.<name>.deploy key the fleet writes). Deploy targets the signed-in owner by
+ * construction — the node hard-rejects any other target.
+ */
+function AppAgents({ owner, filename, agents, showToast, session }) {
+  const [statuses, setStatuses] = useState({});
+  const [busy, setBusy] = useState('');
+  const [openDef, setOpenDef] = useState(null);   // agent_name whose deploy panel is open
+  const [myAgents, setMyAgents] = useState(null); // runner picker options (lazy)
+  const [myOrgs, setMyOrgs] = useState(null);     // organism picker options (lazy)
+  const [runner, setRunner] = useState('');
+  const [organism, setOrganism] = useState('');
+
+  const loadStatuses = useCallback(async () => {
+    const next = {};
+    await Promise.all(agents.map(async (def) => {
+      try {
+        const resp = await appAgentStatus(owner, filename, def.agent_name);
+        if (resp?.ok !== false && resp?.data) next[def.agent_name] = resp.data;
+      } catch { /* leave unknown */ }
+    }));
+    setStatuses(next);
+  }, [owner, filename, agents]);
+
+  useEffect(() => {
+    loadStatuses();
+    const handler = () => loadStatuses();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, [loadStatuses]);
+
+  async function openPanel(def) {
+    if (openDef === def.agent_name) { setOpenDef(null); return; }
+    setOpenDef(def.agent_name);
+    if (myAgents === null) {
+      try {
+        const list = await listAgents(session.owner);
+        const rank = m => (m === 'task-runner' ? 0 : m === 'autonomous' ? 1 : 2);
+        list.sort((a, b) => rank(a.mode) - rank(b.mode));
+        setMyAgents(list);
+        setRunner(list.some(a => a.name === 'crew-forge') ? 'crew-forge' : (list[0]?.name ?? ''));
+      } catch { setMyAgents([]); }
+      try {
+        const resp = await listOrganisms({ member: session.owner });
+        setMyOrgs(resp?.data?.organisms ?? []);
+      } catch { setMyOrgs([]); }
+    }
+  }
+
+  async function act(def, deploy) {
+    setBusy(def.agent_name);
+    try {
+      const opts = {};
+      if (deploy && runner) opts.runner_agent = runner;
+      if (deploy && organism) opts.organism_id = organism;
+      const resp = deploy
+        ? await deployAppAgent(owner, filename, def.agent_name, opts)
+        : await undeployAppAgent(owner, filename, def.agent_name, runner ? { runner_agent: runner } : {});
+      if (resp?.ok !== false) {
+        const auto = resp?.data?.auto_activated;
+        showToast(deploy
+          ? (auto ? (t('profile.apps.agentDeployStarted') || 'Deploy task started on your fleet') : (t('profile.apps.agentDeployQueued') || 'Deploy task queued — start it from the Tasks tab'))
+          : (t('profile.apps.agentUndeployQueued') || 'Undeploy task sent to your fleet'));
+        if (deploy) setOpenDef(null);
+        setTimeout(loadStatuses, 1500);
+      } else {
+        showToast(resp?.error?.message || (t('profile.apps.agentDeployFailed') || 'Deploy failed'), true);
+      }
+    } catch (err) {
+      showToast((t('profile.apps.agentDeployFailed') || 'Deploy failed') + ': ' + err.message, true);
+    } finally { setBusy(''); }
+  }
+
+  return html`
+    <div class="pf-app-skills">
+      <span class="text-meta">${t('profile.apps.agentsLabel') || 'Bundled agents'}:</span>
+      ${agents.map(def => {
+        const s = statuses[def.agent_name];
+        const live = !!s?.live && s?.deploy_state?.status !== 'undeployed';
+        return html`
+          <span key=${def.agent_name} class="pf-app-skill-chip flex-row">
+            <span class="badge ${live ? 'badge-success' : 'badge-dim'}" title=${s?.deployed_agent_name || ''}>
+              \u{1F916} ${escHtml(def.agent_name)} ${live ? '● ' + (t('profile.apps.agentLive') || 'live') : '○ ' + (t('profile.apps.agentOffline') || 'not deployed')}
+            </span>
+            ${live
+              ? html`<button class="btn-outline btn-sm" disabled=${busy === def.agent_name} onClick=${() => act(def, false)}>${t('profile.apps.agentUndeploy') || 'Undeploy'}</button>`
+              : html`<button class="btn-primary btn-sm" onClick=${() => openPanel(def)}>${t('profile.apps.agentDeploy') || 'Deploy to my fleet'}…</button>`}
+          </span>`;
+      })}
+      <button class="btn-ghost btn-sm" onClick=${loadStatuses} title=${t('profile.apps.agentRefresh') || 'Refresh status'}>↻</button>
+    </div>
+    ${agents.filter(def => openDef === def.agent_name).map(def => html`
+      <div key=${'panel-' + def.agent_name} class="pf-edit-panel">
+        <div class="text-meta mb-half"><strong>\u{1F916} ${escHtml(def.agent_name)}</strong>${def.llm_profile ? html` <span class="badge badge-dim">${escHtml(def.llm_profile)}</span>` : ''}${def.process ? html` <span class="badge badge-dim">${escHtml(def.process)}</span>` : ''}</div>
+        <div class="text-meta mb-half">${t('profile.apps.agentCrew') || 'Crew'}:</div>
+        ${(def.agents ?? []).map(a => html`
+          <div key=${a.role} class="text-meta-sm mb-half">
+            <strong>${escHtml(a.role)}</strong> — ${escHtml(a.goal || '')}
+            ${(a.tools ?? []).map(x => html` <span class="badge badge-dim">${escHtml(x)}</span>`)}
+            ${(a.skills ?? []).map(x => html` <span class="badge badge-info">${escHtml(x)}</span>`)}
+          </div>`)}
+        <div class="text-meta mb-half">${t('profile.apps.agentTasks') || 'Tasks'}:</div>
+        ${(def.tasks ?? []).map((tk, i) => html`
+          <div key=${tk.id || i} class="text-meta-sm mb-half">• ${escHtml(String(tk.description || '').slice(0, 140))}</div>`)}
+        <div class="flex-row-wrap mb-half">
+          <label class="text-meta">${t('profile.apps.agentRunnerLabel') || 'Runner'}
+            <select class="input-field" value=${runner} onChange=${e => setRunner(e.target.value)}>
+              ${myAgents === null ? html`<option value="">…</option>`
+                : myAgents.length === 0 ? html`<option value="">${t('profile.apps.agentNoRunners') || 'no agents — connect one first'}</option>`
+                : myAgents.map(a => html`<option key=${a.name} value=${a.name}>${a.name}${a.mode === 'task-runner' ? ' · task-runner' : a.mode ? ' · ' + a.mode : ''}</option>`)}
+            </select>
+          </label>
+          <label class="text-meta">${t('profile.apps.agentOrganismLabel') || 'Organism (optional)'}
+            <select class="input-field" value=${organism} onChange=${e => setOrganism(e.target.value)}>
+              <option value="">—</option>
+              ${(myOrgs ?? []).map(o => html`<option key=${o.id} value=${o.id}>${escHtml(o.name || o.id)}</option>`)}
+            </select>
+          </label>
+        </div>
+        <div class="text-meta-sm mb-half">${t('profile.apps.agentDeployHint') || 'Creates a deploy task on YOUR own runner. The fleet reads the crew definition from the manifest and starts the agent under your account.'}</div>
+        <div class="flex-row">
+          <button class="btn-primary btn-sm" disabled=${busy === def.agent_name || !runner} onClick=${() => act(def, true)}>${t('profile.apps.agentDeploy') || 'Deploy to my fleet'}</button>
+          <button class="btn-outline btn-sm" onClick=${() => setOpenDef(null)}>${t('profile.cancel') || 'Cancel'}</button>
+        </div>
+      </div>`)}`;
+}
+
+/**
+ * The ready-made prompt for authoring crew-defs in the user's own AI chat (the AIMEAT
+ * prompt-driven pattern): embeds the app context + current defs + the schema rules the node
+ * enforces at save, and asks for ONLY the JSON array back — paste it into the editor.
+ */
+function buildAgentAuthoringPrompt(app, currentAgents) {
+  return `You are writing the "bundled agents" for an AIMEAT app — declarative crew definitions (crewaimeat crew_def JSON) that the app's users can deploy onto their own agent fleet. Output ONLY a JSON array of crew-def objects (no prose, no markdown fences).
+
+APP CONTEXT
+- Name: ${app.manifest?.name || app.filename}
+- Description: ${app.manifest?.description || '(none)'}
+
+CURRENT CREW-DEFS (edit these, or design new ones):
+${JSON.stringify(currentAgents ?? [], null, 2)}
+
+SCHEMA RULES (the node rejects anything that violates these):
+- Array of 1-5 crew-def objects. Each: { "agent_name", "agents", "tasks", optional "readme_md", "llm_profile" ("content"|"coding"|"content-free"), "temperature" (0-2), "tags", "skills", "process" ("sequential"|"hierarchical") }.
+- "agent_name": 3-32 chars, lowercase alphanumeric + hyphens, unique across the array.
+- "agents": 1-10 crew members: { "role", "goal", optional "backstory", "tools" (names from the vetted set: web, memory, schedule, delegate, image, app_build), "skills", "allow_delegation" (boolean) }. Use several members + "process": "hierarchical" when the work needs an orchestrator over specialists.
+- "tasks": 1-20 items: { "id", "description", "expected_output", "agent" (must equal a declared role), optional "context" (ids of EARLIER tasks whose output feeds this one), "async" }.
+- At least one task description MUST contain the literal placeholder {{ctx.prompt}} — that is where the user's request is injected at runtime.
+- The crew-def is pure data. Never include code.
+
+Design the crew to genuinely serve this app's users, then output the JSON array.`;
+}
+
 export default function AppsTab({ session, showToast, onStats }) {
   const { confirm, ConfirmUI } = useConfirm();
   const NODE_URL = getNodeUrl();
@@ -123,6 +287,8 @@ export default function AppsTab({ session, showToast, onStats }) {
   const [editingMeta, setEditingMeta] = useState(null);
   const [editName, setEditName] = useState('');
   const [editDesc, setEditDesc] = useState('');
+  const [editingAgents, setEditingAgents] = useState(null);
+  const [agentsJson, setAgentsJson] = useState('');
 
   // Reload the app lists when the session becomes available / changes. loadData closes over the
   // optional onStats prop (not guaranteed memoized), so we key on session only to avoid re-running
@@ -184,6 +350,53 @@ export default function AppsTab({ session, showToast, onStats }) {
     setEditDesc(app.manifest?.description || '');
   }
 
+  // Agent-Bundled Apps authoring: add/edit/remove the crew-defs an app ships, without
+  // re-uploading its HTML. The editor is JSON-first (a crew-def IS data) + a ready-made
+  // AI prompt in the platform's prompt-driven pattern; the node validates on save.
+  function startEditAgents(app) {
+    if (editingAgents === app.filename) { setEditingAgents(null); return; }
+    setEditingAgents(app.filename);
+    setAgentsJson(JSON.stringify(app.manifest?.cortex?.agents ?? [], null, 2));
+  }
+
+  async function handleCopyAgentPrompt(app) {
+    let current;
+    try { current = JSON.parse(agentsJson); } catch { current = app.manifest?.cortex?.agents ?? []; }
+    try {
+      await navigator.clipboard.writeText(buildAgentAuthoringPrompt(app, current));
+      showToast(t('profile.apps.agentPromptCopied') || 'Prompt copied — paste it to your AI chat, then paste the JSON result back here');
+    } catch {
+      showToast(t('profile.apps.agentPromptCopyFailed') || 'Copy failed — clipboard unavailable', true);
+    }
+  }
+
+  async function handleSaveAgents(filename) {
+    let parsed;
+    try {
+      parsed = JSON.parse(agentsJson.trim() || '[]');
+    } catch (err) {
+      showToast((t('profile.apps.agentJsonInvalid') || 'Not valid JSON') + ': ' + err.message, true);
+      return;
+    }
+    if (!Array.isArray(parsed)) {
+      showToast(t('profile.apps.agentJsonNotArray') || 'Expected a JSON ARRAY of crew-def objects', true);
+      return;
+    }
+    try {
+      const resp = await patchApp(filename, { cortex: { agents: parsed } });
+      if (resp.ok === false) throw new Error(resp?.error?.message || 'Update failed');
+      showToast(parsed.length === 0
+        ? (t('profile.apps.agentEditCleared') || 'Bundled agents removed')
+        : (t('profile.apps.agentEditSaved') || 'Bundled agents saved'));
+      setEditingAgents(null);
+      loadData();
+    } catch (err) {
+      // Surface the node's real crew-def validation errors verbatim — that IS the editor's
+      // linter (api() throws on an ok:false envelope, carrying error.message).
+      showToast(err.message || (t('profile.apps.updateFailed') || 'Update failed'), true);
+    }
+  }
+
   function cancelEditMeta() {
     setEditingMeta(null);
     setEditName('');
@@ -266,6 +479,7 @@ export default function AppsTab({ session, showToast, onStats }) {
               <span class="badge badge-info">${escHtml(a.mime_type || a.content_type || 'html')}</span>
               ${a.protected ? html`<span class="badge badge-warn">\u{1F512}</span>` : ''}
               ${a.parked ? html`<span class="badge badge-dim">\u{1F17F}️ ${t('profile.apps.parkedBadge') || 'Parked'}</span>` : ''}
+              ${a.manifest?.cortex?.agents?.length ? html`<span class="badge badge-info" title=${t('profile.apps.agentBadgeHint') || 'This app ships its own agent — deploy it onto your fleet below'}>\u{1F916} ${t('profile.apps.agentBadge') || 'Ships an agent'}</span>` : ''}
               ${a.operator_hidden ? html`<span class="badge badge-danger">\u{1F6AB} ${t('profile.apps.operatorHiddenBadge') || 'Moderated by operator: hidden'}</span>` : ''}
             </div>
           </div>
@@ -286,11 +500,13 @@ export default function AppsTab({ session, showToast, onStats }) {
               window.open(`/v1/apps/${encodeURIComponent(a.owner || session.owner)}/${encodeURIComponent(a.filename || a.name)}?mode=inline`, '_blank');
             }}>${t('profile.apps.launch') || 'Launch'}</button>
             <button class="btn-sm" onClick=${() => startEditMeta(a)}>${t('profile.apps.editDetails') || 'Edit Details'}</button>
+            <button class="btn-sm" onClick=${() => startEditAgents(a)}>\u{1F916} ${a.manifest?.cortex?.agents?.length ? (t('profile.apps.agentEdit') || 'Edit Agents') : (t('profile.apps.agentAdd') || 'Add Agents')}</button>
             <button class="btn-sm" onClick=${() => startEdit(a)}>${t('profile.apps.editAccess') || 'Edit Access Code'}</button>
             <button class=${a.parked ? 'btn-success btn-sm' : 'btn-outline btn-sm'} onClick=${() => handleTogglePark(a)}>${a.parked ? (t('profile.apps.unpark') || 'Unpark') : (t('profile.apps.park') || 'Park')}</button>
             <button class="btn-danger-solid btn-sm" onClick=${() => handleDelete(a.filename || a.name)}>${t('profile.apps.deleteBtn') || 'Delete'}</button>
           </div>
           <${AppSkills} owner=${a.owner || session.owner} filename=${a.filename || a.name} showToast=${showToast} />
+          ${a.manifest?.cortex?.agents?.length ? html`<${AppAgents} owner=${a.owner || session.owner} filename=${a.filename || a.name} agents=${a.manifest.cortex.agents} showToast=${showToast} session=${session} />` : ''}
           ${editingMeta === a.filename ? html`
             <div class="pf-edit-panel">
               <label class="text-meta mb-half">${t('profile.apps.nameLabel') || 'App Name'}</label>
@@ -304,6 +520,19 @@ export default function AppsTab({ session, showToast, onStats }) {
               </div>
             </div>
           ` : ''}
+          ${editingAgents === a.filename ? html`
+            <div class="pf-edit-panel">
+              <label class="text-meta mb-half">\u{1F916} ${t('profile.apps.agentJsonLabel') || 'Bundled agents (crew-def JSON array)'}</label>
+              <div class="text-meta-sm mb-half">${t('profile.apps.agentEditorHint') || 'A crew-def can hold a whole TEAM: up to 10 crew members per definition (process "hierarchical" adds an orchestrator over them), up to 5 definitions per app. Use "Copy AI prompt" to have your AI write or extend this JSON, then paste the result here and Save — the node validates it strictly.'}</div>
+              <textarea class="prompt-box mb-half" rows="14" spellcheck="false" value=${agentsJson} onInput=${e => setAgentsJson(e.target.value)}></textarea>
+              <div class="flex-row-wrap">
+                <button class="btn-primary btn-sm" onClick=${() => handleSaveAgents(a.filename)}>${t('profile.apps.save') || 'Save'}</button>
+                <button class="btn-info btn-sm" onClick=${() => handleCopyAgentPrompt(a)}>\u{1F4CB} ${t('profile.apps.agentCopyPrompt') || 'Copy AI prompt'}</button>
+                <button class="btn-outline btn-sm" onClick=${() => setEditingAgents(null)}>${t('profile.cancel') || 'Cancel'}</button>
+              </div>
+              <div class="text-meta-sm mt-xs">${t('profile.apps.agentClearHint') || 'Save an empty array [] to remove all bundled agents.'}</div>
+            </div>
+          ` : ''}
           ${editingApp === a.filename ? html`
             <div class="pf-edit-panel">
               <label class="text-meta mb-half">${t('profile.apps.accessCodeLabel') || 'Access Code'}</label>

package/dist/public/views/profile/calibrator-batch.js

@@ -623,7 +623,7 @@ Now return the full modified instruction prompt with the fixes incorporated. Rem
                 <div class="fnd-cal-reflection-cols">
                   <!-- Judge column -->
                   <div class="fnd-cal-reflection-col">
-                    <h4>${t('profile.calibrator.step3a')}</h4>
+                    <div class="card-h3">${t('profile.calibrator.step3a')}</div>
                     ${jp?.error ? html`<div class="fnd-cal-hint" style="color:var(--danger)">Error: ${jp.error}</div>` : ''}
                     ${jp?.proposals?.length > 0 ? html`
                       <ol>
@@ -637,7 +637,7 @@ Now return the full modified instruction prompt with the fixes incorporated. Rem
                   </div>
                   <!-- Self column -->
                   <div class="fnd-cal-reflection-col">
-                    <h4>${t('profile.calibrator.step3b')}</h4>
+                    <div class="card-h3">${t('profile.calibrator.step3b')}</div>
                     ${sp?.error ? html`<div class="fnd-cal-hint" style="color:var(--danger)">Error: ${sp.error}</div>` : ''}
                     ${sp?.proposals?.length > 0 ? html`
                       <ol>

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

@@ -10,6 +10,8 @@
  *   v1.0.0 — 2026-03-29 — Initial implementation
  *   v1.1.0 — 2026-03-29 — Extract LlmConfigEditor and CalibrationChart into separate files
  *   v2.0.0 — 2026-03-29 — V2 redesign: batch-based 4-step flow, score bars, template sections
+ *   v2.1.0 — 2026-07-16 — Detail-view mount folds its 4-request waterfall into one GET /v1/calibrator/:id/detail
+ *     (getProjectDetail); individual loaders kept as fallback + interactive re-fetch.
  */
 
 import { h } from 'preact';
@@ -19,11 +21,12 @@ const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { apiGet, apiDelete } from '/js/api.js';
 import { CopyButton } from '/components/CopyButton.js';
+import { useConfirm } from '/components/Modal.js';
 import LlmConfigEditor from '/views/profile/calibrator-llm-editor.js';
 import CalibrationChart from '/views/profile/calibrator-chart.js';
 import BatchCard from '/views/profile/calibrator-batch.js';
 import {
-  listProjects, createProject, getProject, updateProject, deleteProject,
+  listProjects, createProject, getProject, getProjectDetail, updateProject, deleteProject,
   listVersions, getVersion, createVersion,
   listBatches, createBatch,
   getTemplateDefaults,
@@ -120,6 +123,7 @@ function ProjectListView({ onSelect, showToast }) {
 // ── Detail View ──
 
 function ProjectDetailView({ projectId, onBack, showToast }) {
+  const { confirm, ConfirmUI } = useConfirm();
   const [project, setProject] = useState(null);
   const [dimensions, setDimensions] = useState([]);
   const [versions, setVersions] = useState([]);
@@ -153,39 +157,65 @@ function ProjectDetailView({ projectId, onBack, showToast }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  async function loadProject() {
-    try {
-      const { project: proj, dimensions: dims } = await getProject(projectId);
-      setProject(proj);
-      setDimensions(dims || []);
-      setTemplates({
-        analysis: proj.analysisPromptTemplate || '',
-        reflection: proj.reflectionPromptTemplate || '',
-        selfReflection: proj.selfReflectionPromptTemplate || '',
-        synthesis: proj.synthesisPromptTemplate || '',
-      });
-
-      const vers = await listVersions(projectId);
-      setVersions(vers);
+  function applyProject(proj) {
+    setProject(proj);
+    setTemplates({
+      analysis: proj.analysisPromptTemplate || '',
+      reflection: proj.reflectionPromptTemplate || '',
+      selfReflection: proj.selfReflectionPromptTemplate || '',
+      synthesis: proj.synthesisPromptTemplate || '',
+    });
+  }
 
-      if (proj.currentVersion > 0) {
-        const ver = await getVersion(projectId, proj.currentVersion);
-        setCurrentVersion(ver);
-        setPrompt(ver.prompt || '');
-        setTargetOutput(ver.targetOutput || '');
-        setSelectedVersion(ver.version);
+  // Data migration: clean up old V1 run keys (silently). One-time legacy cleanup, kept out of the mount
+  // composite because it deletes.
+  async function cleanupLegacyRuns() {
+    try {
+      const resp = await apiGet(`/v1/memory?prefix=calibrator.${projectId}.run.&tags=calibrator,run`);
+      const oldRuns = resp?.data?.entries || [];
+      for (const r of oldRuns) {
+        try { await apiDelete(`/v1/memory/${encodeURIComponent(r.key)}`); } catch { /* ignore */ }
       }
+    } catch { /* ignore migration errors */ }
+  }
 
-      setBatches(await listBatches(projectId));
+  // Fallback path: the individual four-request waterfall, used when the composite is unavailable.
+  async function loadProjectIndividually() {
+    const { project: proj, dimensions: dims } = await getProject(projectId);
+    applyProject(proj);
+    setDimensions(dims || []);
+    const vers = await listVersions(projectId);
+    setVersions(vers);
+    if (proj.currentVersion > 0) {
+      const ver = await getVersion(projectId, proj.currentVersion);
+      setCurrentVersion(ver);
+      setPrompt(ver.prompt || '');
+      setTargetOutput(ver.targetOutput || '');
+      setSelectedVersion(ver.version);
+    }
+    setBatches(await listBatches(projectId));
+  }
 
-      // Data migration: clean up old V1 run keys (silently)
-      try {
-        const resp = await apiGet(`/v1/memory?prefix=calibrator.${projectId}.run.&tags=calibrator,run`);
-        const oldRuns = resp?.data?.entries || [];
-        for (const r of oldRuns) {
-          try { await apiDelete(`/v1/memory/${encodeURIComponent(r.key)}`); } catch { /* ignore */ }
+  async function loadProject() {
+    try {
+      // Composite mount: project + dimensions + versions + current version + batches in one call.
+      const detail = await getProjectDetail(projectId);
+      if (detail?.project) {
+        applyProject(detail.project);
+        setDimensions(detail.dimensions || []);
+        setVersions(detail.versions || []);
+        if (detail.project.currentVersion > 0 && detail.currentVersion) {
+          const ver = detail.currentVersion;
+          setCurrentVersion(ver);
+          setPrompt(ver.prompt || '');
+          setTargetOutput(ver.targetOutput || '');
+          setSelectedVersion(ver.version);
         }
-      } catch { /* ignore migration errors */ }
+        setBatches(detail.batches || []);
+      } else {
+        await loadProjectIndividually();
+      }
+      await cleanupLegacyRuns();
     } catch (e) {
       showToast?.(e.message, true);
     }
@@ -321,14 +351,15 @@ function ProjectDetailView({ projectId, onBack, showToast }) {
     onBack();
   }
 
-  async function handleDelete() {
-    if (!confirm(t('profile.calibrator.deleteConfirm'))) return;
-    try {
-      await deleteProject(projectId);
-      onBack();
-    } catch (e) {
-      showToast?.(e.message, true);
-    }
+  function handleDelete() {
+    confirm(t('profile.calibrator.deleteConfirm'), async () => {
+      try {
+        await deleteProject(projectId);
+        onBack();
+      } catch (e) {
+        showToast?.(e.message, true);
+      }
+    }, { danger: true });
   }
 
   if (!project) return html`<div class="fnd-cal-empty">...</div>`;
@@ -512,6 +543,7 @@ function ProjectDetailView({ projectId, onBack, showToast }) {
         </div>
       </div>
 
+      <${ConfirmUI} />
     </div>
   `;
 }

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

@@ -5,10 +5,16 @@
  * @version-history
  *   v1.0.0 — 2026-05-02 — Initial capability tab (CRUD form)
  *   v2.0.0 — 2026-05-02 — Redesigned: node capabilities listing, policy display, source filter
+ *   v2.1.0 — 2026-07-17 — Replace the native alert()/confirm() with the themed useToast +
+ *     useConfirm (delete now a proper danger dialog, errors a toast); the inline-styled
+ *     delete button becomes .btn-danger.btn-sm.cap-delete-btn (no inline style).
  */
 import { h } from 'preact';
 import { useState, useEffect, useCallback } from 'preact/hooks';
 import htm from 'htm';
+import { EmptyState } from '/components/EmptyState.js';
+import { useToast } from '/components/Toast.js';
+import { useConfirm } from '/components/Modal.js';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { escHtml } from '/js/utils.js';
@@ -23,6 +29,8 @@ const POLICY_LABELS = {
 };
 
 export default function CapabilitiesTab() {
+  const { showToast, ToastContainer } = useToast();
+  const { confirm, ConfirmUI } = useConfirm();
   const [caps, setCaps] = useState([]);
   const [policy, setPolicy] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -71,20 +79,21 @@ export default function CapabilitiesTab() {
       setNewCap({ id: '', name: '', summary: '', callable: false, visibility: 'private', tags: '' });
       loadCaps();
     } catch (e) {
-      alert(e.message || 'Failed to create');
+      showToast(e.message || 'Failed to create', true);
     }
   };
 
-  const handleDelete = async (id) => {
-    if (!confirm(t('capabilities.deleteConfirm'))) return;
-    const session = getSession();
-    if (!session) return;
-    try {
-      await session.fetch('/v1/capabilities/' + encodeURIComponent(id), { method: 'DELETE' });
-      loadCaps();
-    } catch (e) {
-      alert(e.message || 'Failed to delete');
-    }
+  const handleDelete = (id) => {
+    confirm(t('capabilities.deleteConfirm'), async () => {
+      const session = getSession();
+      if (!session) return;
+      try {
+        await session.fetch('/v1/capabilities/' + encodeURIComponent(id), { method: 'DELETE' });
+        loadCaps();
+      } catch (e) {
+        showToast(e.message || 'Failed to delete', true);
+      }
+    }, { danger: true });
   };
 
   if (loading) return html`<${Spinner} />`;
@@ -126,7 +135,7 @@ export default function CapabilitiesTab() {
       </div>
 
       <!-- Capability list -->
-      ${!filtered.length ? html`<div class="pf-empty">${t('capabilities.noCapabilities')}</div>` : ''}
+      ${!filtered.length ? html`<${EmptyState} text=${t('capabilities.noCapabilities')} />` : ''}
 
       ${filtered.map(c => {
         const s = c.stats || {};
@@ -183,7 +192,7 @@ export default function CapabilitiesTab() {
                   </details>
                 ` : ''}
                 ${c.source?.type === 'manual' ? html`
-                  <button class="btn-danger" style="margin-top:8px;font-size:.8rem" onClick=${() => handleDelete(c.id)}>
+                  <button class="btn-danger btn-sm cap-delete-btn" onClick=${() => handleDelete(c.id)}>
                     ${t('capabilities.delete')}
                   </button>
                 ` : ''}
@@ -247,6 +256,8 @@ export default function CapabilitiesTab() {
           ` : ''}
         </div>
       ` : ''}
+      <${ToastContainer} />
+      <${ConfirmUI} />
     </div>
   `;
 }