aimeat 1.40.0 → 2.0.0

package/dist/public/views/profile/agents/tab-schedules.js

@@ -5,6 +5,10 @@
  *   internal (the agent's self-reported mirror, read-only). Lets the owner create
  *   a new schedule targeting this agent (reusing the master view's CreateForm).
  * @version-history
+ *   v1.2.0 -- 2026-07-17 -- Dispatched / agent-internal groups become pf-agd-cards.
+ *   v1.1.0 -- 2026-07-17 -- Style unification: canonical agent-detail section headers
+ *     (pf-agd-section-header/-title) instead of scheduler-view headings, pf-agd-empty
+ *     empty states, and the Tasks-tab "+ New" outline button pattern.
  *   v1.0.0 -- 2026-06-03 -- Initial agent Schedules sub-tab
  */
 import { h } from 'preact';
@@ -45,28 +49,29 @@ export default function TabSchedules({ agentName, allAgents = [], showToast }) {
 
   return html`
     <div class="sch-tab">
-      <div class="sch-head">
-        <div class="section-desc">${t('profile.scheduler.agentDesc')}</div>
-        <button class="btn-primary" onClick=${() => setShowForm(v => !v)}>
-          ${showForm ? t('profile.scheduler.close') : t('profile.scheduler.newSchedule')}
+      <div class="pf-agd-section-header">
+        <span class="pf-agd-section-title">${t('profile.agents.detail.tabs.schedules')}${managed.length + internal.length > 0 ? ` (${managed.length + internal.length})` : ''}</span>
+        <button class="btn-outline btn-sm" onClick=${() => setShowForm(v => !v)}>
+          ${showForm ? '-' : '+'} ${t('profile.scheduler.newSchedule')}
         </button>
       </div>
+      <div class="section-desc">${t('profile.scheduler.agentDesc')}</div>
 
       ${showForm && html`<${CreateForm} agents=${allAgents} lockedAgent=${agentName} showToast=${showToast}
         onCreated=${() => { setShowForm(false); loadData(); }} />`}
 
-      <div class="sch-section">
-        <h3 class="sch-section-title">${t('profile.scheduler.dispatchedTitle')}</h3>
+      <div class="sch-section pf-agd-card">
+        <div class="pf-agd-section-title">${t('profile.scheduler.dispatchedTitle')}</div>
         ${managed.length === 0
-          ? html`<div class="sch-empty">${t('profile.scheduler.noDispatched')}</div>`
+          ? html`<div class="pf-agd-empty">${t('profile.scheduler.noDispatched')}</div>`
           : html`<div class="sch-card-list">${managed.map(j => html`<${ScheduleItem} key=${j.id} schedule=${j} onChanged=${loadData} showToast=${showToast} />`)}</div>`}
       </div>
 
-      <div class="sch-section">
-        <h3 class="sch-section-title">${t('profile.scheduler.internalTitle')}</h3>
+      <div class="sch-section pf-agd-card">
+        <div class="pf-agd-section-title">${t('profile.scheduler.internalTitle')}</div>
         <div class="sch-muted sch-internal-note">${t('profile.scheduler.internalNote')}</div>
         ${internal.length === 0
-          ? html`<div class="sch-empty">${t('profile.scheduler.noInternal')}</div>`
+          ? html`<div class="pf-agd-empty">${t('profile.scheduler.noInternal')}</div>`
           : html`<table class="sch-table"><tbody>
             ${internal.map((e, i) => html`<tr key=${e.id || i}>
               <td>${e.name}${e.purpose && html`<div class="sch-muted">${e.purpose}</div>`}</td>

package/dist/public/views/profile/agents/tab-usage.js

@@ -11,13 +11,15 @@
  * @version-history
  *   v1.0.0 -- 2026-07-11 -- Initial: first consumer of the ledger, closes the "recorded
  *     but nowhere to see it" gap for agent LLM usage.
+ *   v1.1.0 -- 2026-07-16 -- Mount folds the two ledger reads into GET /v1/ledger/usage/overview
+ *     (getLedgerUsageOverview); individual usage + runs reads kept as fallback.
  */
 import { h } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
 import htm from 'htm';
 import { onLiveUpdate } from '/lib/live-updates.js';
 import { t } from '/js/i18n.js';
-import { getLedgerUsage, getLedgerRuns } from '/js/services/ledger.js';
+import { getLedgerUsage, getLedgerRuns, getLedgerUsageOverview } from '/js/services/ledger.js';
 
 const html = htm.bind(h);
 
@@ -44,13 +46,22 @@ export default function TabUsage({ agent, agentName }) {
   async function loadData({ showSpinner = true } = {}) {
     if (showSpinner) setLoading(true);
     try {
-      const [modelResp, runsResp] = await Promise.all([
-        getLedgerUsage(gaii, { groupBy: 'model' }).catch(() => null),
-        getLedgerRuns(gaii, { limit: 50 }).catch(() => null),
-      ]);
-      setTotals(modelResp?.data?.totals || null);
-      setByModel(modelResp?.data?.groups || []);
-      setRuns(runsResp?.data?.runs || []);
+      // Mount fold: ONE composite (model-grouped aggregates + totals + per-run rollups). On failure, fall
+      // back to the individual two-request fan-out.
+      const ov = await getLedgerUsageOverview(gaii, { runsLimit: 50 });
+      if (ov) {
+        setTotals(ov.totals || null);
+        setByModel(ov.groups || []);
+        setRuns(ov.runs || []);
+      } else {
+        const [modelResp, runsResp] = await Promise.all([
+          getLedgerUsage(gaii, { groupBy: 'model' }).catch(() => null),
+          getLedgerRuns(gaii, { limit: 50 }).catch(() => null),
+        ]);
+        setTotals(modelResp?.data?.totals || null);
+        setByModel(modelResp?.data?.groups || []);
+        setRuns(runsResp?.data?.runs || []);
+      }
     } catch {
       setTotals(null);
       setByModel([]);

package/dist/public/views/profile/agents-capabilities-subtab.js

@@ -30,7 +30,7 @@ function TechnicalSkills({ capabilities }) {
 
   return html`
     <div class="agd-directive-section">
-      <h4>${tFallback('profile.agents.capabilities.technical', 'Technical Skills')}</h4>
+      <div class="card-h3">${tFallback('profile.agents.capabilities.technical', 'Technical Skills')}</div>
       <div class="agd-cap-list">
         ${capabilities.map(cap => html`
           <span class="agd-cap-badge">
@@ -58,7 +58,7 @@ function DomainKnowledge({ domains, languages: separateLanguages }) {
 
   return html`
     <div class="agd-directive-section">
-      <h4>${tFallback('profile.agents.capabilities.domain', 'Domain Knowledge')}</h4>
+      <div class="card-h3">${tFallback('profile.agents.capabilities.domain', 'Domain Knowledge')}</div>
       ${otherDomains.length > 0 && html`
         <div class="agd-cap-list">
           ${otherDomains.map(d => html`
@@ -88,7 +88,7 @@ function ActionQueueSupport({ scopes }) {
 
   return html`
     <div class="agd-directive-section">
-      <h4>${tFallback('profile.agents.capabilities.actionQueue', 'Action Queue Support')}</h4>
+      <div class="card-h3">${tFallback('profile.agents.capabilities.actionQueue', 'Action Queue Support')}</div>
       <div class="agd-cap-queue-list">
         ${canAccept && html`
           <div class="agd-cap-queue-item">

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

@@ -4,6 +4,8 @@
  *   expandable agent cards with Two-Zone Header + 8-tab interface,
  *   device auth flow, scope management modal.
  * @version-history
+ *   v3.3.0 -- 2026-07-14 -- Task-runner section: add a "View the crewaimeat fleet on GitHub"
+ *     link (github.com/miikkij/crewaimeat) with the GitHub Octocat mark.
  *   v3.2.0 -- 2026-07-13 -- Split (max-file-lines): moved scope constants/labels, connect
  *     prompts + platform instructions, per-browser tab helpers, the filter bar / active-tasks
  *     panel / grouped renderer, and the scope modal into ./agents/ sibling modules
@@ -79,6 +81,9 @@ import { loadAgentOrder, saveAgentOrder, UNGROUPED_ID, loadCollapsedGroups, save
 import { renderFilterBar, ActiveTasksPanel, renderAgentGroups } from './agents/groups-render.js';
 import ScopesModal from './agents/scopes-modal.js';
 
+// The familiar GitHub "Octocat" mark. fill=currentColor so it inherits the link's themed color.
+const GhMark = html`<svg class="gh-mark" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>`;
+
 export default function AgentsTab({ session, showToast, onStats }) {
   const { confirm, ConfirmUI } = useConfirm();
   const [agents, setAgents] = useState(null);
@@ -450,7 +455,7 @@ export default function AgentsTab({ session, showToast, onStats }) {
 
     ${pendingRequests.length > 0 && html`
       <div class="agent-cta mb-1">
-        <h3>${t('profile.agents.pendingRequests.title')}</h3>
+        <div class="section-title">${t('profile.agents.pendingRequests.title')}</div>
         <p>${t('profile.agents.pendingRequests.desc')}</p>
         ${pendingRequests.map(req => html`
           <div class="card mt-1 p-1" key=${req.user_code}>
@@ -574,6 +579,11 @@ export default function AgentsTab({ session, showToast, onStats }) {
             <div class="mt-half">
               <p class="text-caption mb-half">${t('profile.agents.taskRunner.whatIs')}</p>
               <p class="text-caption mb-half">${t('profile.agents.taskRunner.whenToUse')}</p>
+              <p class="mb-half">
+                <a class="pf-gh-link" href="https://github.com/miikkij/crewaimeat" target="_blank" rel="noopener">
+                  ${GhMark}${t('profile.agents.taskRunner.repoLink')}
+                </a>
+              </p>
               <p class="text-caption mb-half"><strong>${t('profile.agents.taskRunner.exampleLabel')}</strong> ${t('profile.agents.taskRunner.exampleDesc')}</p>
               <div class="mb-half mt-1">
                 <label class="text-caption mb-half" for="pf-task-runner-name">${t('profile.agents.taskRunner.nameLabel')}</label>

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

@@ -0,0 +1,275 @@
+/**
+ * @file appdev-tab.js
+ * @description Profile → AppDev — the human-facing window into the AppDev knowledge base:
+ *   (1) copyable start prompts (the research-first flow prompt for Claude Code/OpenHands +
+ *   the canonical build-app prompt), (2) learned pitfalls with share/outdated/delete
+ *   management and model/app attribution, (3) agent-proposed template proposals with
+ *   derived-from links and proofs, (4) the curated node registry (read-only). Everything an
+ *   owner needs to follow what agents learned and to start the next build right.
+ * @structure AppDevTab (default export) — sections: StartPrompts · LearnedPitfalls ·
+ *   TemplateProposals · CuratedPitfalls
+ * @usage registered in views/profile.js TABS + landing-page.cards.js SIDEBAR_GROUPS (id 'appdev').
+ * @version-history
+ *   v1.0.0 — 2026-07-19 — initial (AppDev KB UI phase).
+ */
+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 { Spinner, KebabMenu } from './shared.js';
+import { CopyButton } from '/components/CopyButton.js';
+import {
+  getFlowPromptText, getBuildPromptText, getCuratedPitfalls, getLearnedPitfalls,
+  updateLearnedPitfall, deleteLearnedPitfall, getTemplateProposals, deleteTemplateProposal,
+} from '/js/services/appdev.js';
+
+const SEV_CLASS = { critical: 'pf-adk-sev--critical', warn: 'pf-adk-sev--warn', info: 'pf-adk-sev--info' };
+
+function sevBadge(severity) {
+  return html`<span class="pf-adk-sev ${SEV_CLASS[severity] || SEV_CLASS.info}">${t('profile.appdev.severity.' + (severity || 'info'))}</span>`;
+}
+
+function chip(text, cls = '') {
+  if (!text) return null;
+  return html`<span class="pf-adk-chip ${cls}">${text}</span>`;
+}
+
+// ── Section 1: copyable start prompts ──────────────────────────────────────
+function StartPrompts({ locale, showToast }) {
+  const [flow, setFlow] = useState(null);
+  const [build, setBuild] = useState(null);
+  const [open, setOpen] = useState(null); // 'flow' | 'build' | null
+
+  useEffect(() => {
+    getFlowPromptText().then(setFlow).catch(() => setFlow(''));
+    getBuildPromptText(locale).then(setBuild).catch(() => setBuild(''));
+  }, [locale]);
+
+  const box = (id, title, desc, text) => html`
+    <div class="card pf-adk-prompt-card">
+      <div class="pf-adk-prompt-head">
+        <div>
+          <div class="pf-adk-prompt-title">${title}</div>
+          <div class="section-desc">${desc}</div>
+        </div>
+        <div class="pf-adk-prompt-actions">
+          <button class="btn-ghost" onClick=${() => setOpen(open === id ? null : id)}>
+            ${open === id ? t('profile.appdev.hidePrompt') : t('profile.appdev.showPrompt')}
+          </button>
+          ${text != null && html`<${CopyButton} text=${text} className="copy-prompt-btn" label=${t('profile.appdev.copyPrompt')} onCopied=${() => showToast(t('profile.appdev.copied'))} />`}
+        </div>
+      </div>
+      ${open === id && html`<pre class="pf-adk-prompt-body">${text ?? t('profile.loading')}</pre>`}
+    </div>`;
+
+  return html`
+    <div class="section-title">${t('profile.appdev.promptsTitle')}</div>
+    <div class="section-desc">${t('profile.appdev.promptsDesc')}</div>
+    ${box('flow', t('profile.appdev.flowPromptTitle'), t('profile.appdev.flowPromptDesc'), flow)}
+    ${box('build', t('profile.appdev.buildPromptTitle'), t('profile.appdev.buildPromptDesc'), build)}
+  `;
+}
+
+// ── Section 2: learned pitfalls ────────────────────────────────────────────
+function LearnedPitfalls({ showToast }) {
+  const [data, setData] = useState(null);
+  const [includeShared, setIncludeShared] = useState(false);
+  const [showOutdated, setShowOutdated] = useState(false);
+  const [expanded, setExpanded] = useState(null);
+
+  async function load(shared = includeShared) {
+    try { setData(await getLearnedPitfalls(shared)); } catch { setData({ pitfalls: [], total: 0 }); }
+  }
+  const liveRef = useRef(load); liveRef.current = load;
+  useEffect(() => { liveRef.current(includeShared); }, [includeShared]);
+  useEffect(() => {
+    const handler = () => liveRef.current();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, []);
+
+  async function toggleShare(p) {
+    try {
+      await updateLearnedPitfall(p.category, p.slug, { share: !p.shared });
+      showToast(!p.shared ? t('profile.appdev.sharedOn') : t('profile.appdev.sharedOff'));
+      load();
+    } catch (e) { showToast(e.message, true); }
+  }
+  async function toggleOutdated(p) {
+    try {
+      await updateLearnedPitfall(p.category, p.slug, { status: p.status === 'outdated' ? 'active' : 'outdated' });
+      load();
+    } catch (e) { showToast(e.message, true); }
+  }
+  async function remove(p) {
+    try {
+      await deleteLearnedPitfall(p.category, p.slug);
+      showToast(t('profile.appdev.deleted'));
+      load();
+    } catch (e) { showToast(e.message, true); }
+  }
+
+  if (!data) return html`<${Spinner} text=${t('profile.loading')} />`;
+  let rows = data.pitfalls;
+  if (!showOutdated) rows = rows.filter(p => p.status !== 'outdated');
+
+  return html`
+    <div class="section-title">${t('profile.appdev.learnedTitle')}</div>
+    <div class="section-desc">${t('profile.appdev.learnedDesc')}</div>
+    <div class="pf-adk-filters">
+      <label class="pf-adk-filter"><input type="checkbox" checked=${includeShared} onChange=${e => setIncludeShared(e.target.checked)} /> ${t('profile.appdev.showShared')}</label>
+      <label class="pf-adk-filter"><input type="checkbox" checked=${showOutdated} onChange=${e => setShowOutdated(e.target.checked)} /> ${t('profile.appdev.showOutdated')}</label>
+    </div>
+    ${rows.length === 0 && html`<div class="card pf-adk-empty">${t('profile.appdev.learnedEmpty')}</div>`}
+    ${rows.map(p => html`
+      <div class="card pf-adk-row ${p.status === 'outdated' ? 'pf-adk-row--outdated' : ''}" key=${p.key + (p.owner || '')}>
+        <div class="pf-adk-row-head" onClick=${() => setExpanded(expanded === p.key ? null : p.key)}>
+          <div class="pf-adk-row-title">
+            ${sevBadge(p.severity)}
+            <span>${p.title}</span>
+          </div>
+          <div class="pf-adk-row-chips">
+            ${chip(p.category, 'pf-adk-chip--cat')}
+            ${chip(p.model, 'pf-adk-chip--model')}
+            ${p.source === 'shared' && chip(t('profile.appdev.fromCommunity'), 'pf-adk-chip--shared')}
+            ${p.source === 'own' && p.shared && chip(t('profile.appdev.sharedBadge'), 'pf-adk-chip--shared')}
+            ${p.status === 'outdated' && chip(t('profile.appdev.outdatedBadge'), 'pf-adk-chip--outdated')}
+          </div>
+          ${p.source === 'own' && html`
+            <${KebabMenu} label=${t('profile.appdev.actions')} items=${[
+              { label: p.shared ? t('profile.appdev.unshare') : t('profile.appdev.share'), onClick: () => toggleShare(p) },
+              { label: p.status === 'outdated' ? t('profile.appdev.markActive') : t('profile.appdev.markOutdated'), onClick: () => toggleOutdated(p) },
+              { divider: true },
+              { label: t('profile.appdev.delete'), danger: true, onClick: () => remove(p) },
+            ]} />`}
+        </div>
+        ${expanded === p.key && html`
+          <div class="pf-adk-row-body">
+            <div><strong>${t('profile.appdev.symptom')}:</strong> ${p.symptom}</div>
+            <div><strong>${t('profile.appdev.resolution')}:</strong> ${p.resolution}</div>
+            ${p.app_ref && html`<div><strong>${t('profile.appdev.relatedApp')}:</strong> <code>${p.app_ref}</code></div>`}
+            ${p.owner && html`<div><strong>${t('profile.appdev.sharedBy')}:</strong> <code>${p.owner}</code></div>`}
+          </div>`}
+      </div>`)}
+  `;
+}
+
+// ── Section 3: template proposals ──────────────────────────────────────────
+function TemplateProposals({ showToast }) {
+  const [data, setData] = useState(null);
+  const [expanded, setExpanded] = useState(null);
+
+  async function load() {
+    try { setData(await getTemplateProposals()); } catch { setData({ templates: [], total: 0 }); }
+  }
+  useEffect(() => { load(); }, []);
+  const liveRef = useRef(load); liveRef.current = load;
+  useEffect(() => {
+    const handler = () => liveRef.current();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, []);
+
+  async function remove(tpl) {
+    try {
+      await deleteTemplateProposal(tpl.id);
+      showToast(t('profile.appdev.deleted'));
+      load();
+    } catch (e) { showToast(e.message, true); }
+  }
+
+  if (!data) return html`<${Spinner} text=${t('profile.loading')} />`;
+
+  return html`
+    <div class="section-title">${t('profile.appdev.templatesTitle')}</div>
+    <div class="section-desc">${t('profile.appdev.templatesDesc')}</div>
+    ${data.templates.length === 0 && html`<div class="card pf-adk-empty">${t('profile.appdev.templatesEmpty')}</div>`}
+    ${data.templates.map(tpl => html`
+      <div class="card pf-adk-row" key=${tpl.id}>
+        <div class="pf-adk-row-head" onClick=${() => setExpanded(expanded === tpl.id ? null : tpl.id)}>
+          <div class="pf-adk-row-title">
+            ${chip(tpl.tier, 'pf-adk-chip--tier')}
+            <span>${tpl.title}</span>
+          </div>
+          <div class="pf-adk-row-chips">
+            ${chip(tpl.model, 'pf-adk-chip--model')}
+            ${chip(tpl.startMode, 'pf-adk-chip--cat')}
+            ${(tpl.proofs || []).length > 0 && chip(t('profile.appdev.proofsCount', { count: tpl.proofs.length }), 'pf-adk-chip--proof')}
+          </div>
+          <${KebabMenu} label=${t('profile.appdev.actions')} items=${[
+            { label: t('profile.appdev.openSourceApp'), onClick: () => window.open(`/v1/apps/${encodeURIComponent(tpl.derivedFrom.owner)}/${encodeURIComponent(tpl.derivedFrom.filename)}`, '_blank') },
+            { divider: true },
+            { label: t('profile.appdev.delete'), danger: true, onClick: () => remove(tpl) },
+          ]} />
+        </div>
+        ${expanded === tpl.id && html`
+          <div class="pf-adk-row-body">
+            <div>${tpl.description}</div>
+            <div><strong>${t('profile.appdev.derivedFrom')}:</strong> <code>${tpl.derivedFrom.owner}/${tpl.derivedFrom.filename}</code> v${tpl.derivedFrom.version}</div>
+            <div><strong>${t('profile.appdev.reuseNotes')}:</strong> ${tpl.reuseNotes}</div>
+            ${(tpl.packs || []).length > 0 && html`<div><strong>${t('profile.appdev.packs')}:</strong> ${tpl.packs.map(pk => chip(pk, 'pf-adk-chip--cat'))}</div>`}
+            ${(tpl.proofs || []).length > 0 && html`
+              <div><strong>${t('profile.appdev.proofs')}:</strong>
+                ${tpl.proofs.map(pr => chip(`${pr.model}: ${pr.verdict}`, pr.verdict === 'pass' ? 'pf-adk-chip--proof' : 'pf-adk-chip--outdated'))}
+              </div>`}
+          </div>`}
+      </div>`)}
+  `;
+}
+
+// ── Section 4: curated registry (read-only) ────────────────────────────────
+function CuratedPitfalls() {
+  const [data, setData] = useState(null);
+  const [filter, setFilter] = useState('');
+  const [expanded, setExpanded] = useState(null);
+  const [show, setShow] = useState(false);
+
+  const dataRef = useRef(data); dataRef.current = data;
+  useEffect(() => {
+    if (show && !dataRef.current) getCuratedPitfalls().then(setData).catch(() => setData({ pitfalls: [], facets: {} }));
+  }, [show]);
+
+  const areas = data?.facets?.applies_to ? Object.keys(data.facets.applies_to) : [];
+  let rows = data?.pitfalls ?? [];
+  if (filter) rows = rows.filter(p => (p.appliesTo || []).includes(filter));
+
+  return html`
+    <div class="section-title">${t('profile.appdev.curatedTitle')}</div>
+    <div class="section-desc">${t('profile.appdev.curatedDesc')}</div>
+    ${!show && html`<button class="btn-outline" onClick=${() => setShow(true)}>${t('profile.appdev.showCurated')}</button>`}
+    ${show && !data && html`<${Spinner} text=${t('profile.loading')} />`}
+    ${show && data && html`
+      <div class="pf-adk-filters">
+        <button class="btn-ghost ${filter === '' ? 'pf-adk-filter--active' : ''}" onClick=${() => setFilter('')}>${t('profile.appdev.allAreas')}</button>
+        ${areas.map(a => html`<button class="btn-ghost ${filter === a ? 'pf-adk-filter--active' : ''}" onClick=${() => setFilter(filter === a ? '' : a)}>${a} (${data.facets.applies_to[a]})</button>`)}
+      </div>
+      ${rows.map(p => html`
+        <div class="card pf-adk-row" key=${p.id}>
+          <div class="pf-adk-row-head" onClick=${() => setExpanded(expanded === p.id ? null : p.id)}>
+            <div class="pf-adk-row-title">${sevBadge(p.severity)}<span>${p.title}</span></div>
+            <div class="pf-adk-row-chips">${(p.appliesTo || []).map(a => chip(a, 'pf-adk-chip--cat'))}</div>
+          </div>
+          ${expanded === p.id && html`
+            <div class="pf-adk-row-body">
+              <div><strong>${t('profile.appdev.symptom')}:</strong> ${p.symptom}</div>
+              <div><strong>${t('profile.appdev.resolution')}:</strong> ${p.fix}</div>
+            </div>`}
+        </div>`)}
+    `}
+  `;
+}
+
+// ── The tab ────────────────────────────────────────────────────────────────
+export default function AppDevTab({ showToast, locale }) {
+  return html`
+    <div class="pf-adk">
+      <div class="section-title">${t('profile.appdev.title')}</div>
+      <div class="section-desc">${t('profile.appdev.desc')}</div>
+      <${StartPrompts} locale=${locale} showToast=${showToast} />
+      <${LearnedPitfalls} showToast=${showToast} />
+      <${TemplateProposals} showToast=${showToast} />
+      <${CuratedPitfalls} />
+    </div>
+  `;
+}