aimeat 1.40.1 → 2.1.0

package/dist/static/app-catalog/js/apps-io.js

@@ -1,13 +1,16 @@
 /**
  * @file apps-io.js
- * @description Getting apps INTO the catalog: creation from a ZIP bundle / a URL / an uploaded HTML
- *   file / pasted source, and the "Add app" modal that drives it (open/close/tabs/file-drop/save,
- *   sign-in-gate). editingAppId (which app the modal is editing) lives here; main sets it via the
- *   exported setEditingAppId(). Shared modules by import; main-local fns + the live app-list getter
- *   injected via initAppsIo(deps). Carved from main.js.
- * @usage import { initAppsIo, showModal, addAppFromUrl, setEditingAppId } from './apps-io.js'; initAppsIo({...})
+ * @description Getting apps INTO the catalog. Server-only: creation from an uploaded HTML file, a
+ *   pasted source, or a ZIP bundle builds a TRANSIENT record and hands it straight to the publish
+ *   flow — it is published to the owner's account (UNLISTED) on the server. There is no browser-local
+ *   catalog anymore, so there is no "add a URL bookmark" and nothing is persisted in the browser.
+ *   Owns the Add-app modal (open/close/tabs/file-drop/save, sign-in gate) + editingAppId. Shared
+ *   modules by import; main-local fns injected via initAppsIo(deps). Carved from main.js.
+ * @usage import { initAppsIo, showModal, setEditingAppId } from './apps-io.js'; initAppsIo({...})
  * @version-history
  *   v1.0.0 — 2026-07-10 — Initial extraction (TARGET-021 Aalto 3 modularization, phase 10).
+ *   v2.0.0 — 2026-07-20 — Server-only cutover: drop the local writers (URL/file/paste/zip → IndexedDB);
+ *     creation now builds a transient record and publishes it to the server as an unlisted app.
  */
 import { saveApp } from './db.js';
 import { showNotice } from './ui.js';
@@ -15,106 +18,36 @@ import { t } from './i18n.js';
 import { extractZip, bundleZip } from './zip.js';
 import { getCortexOwnerToken } from './cortex.js';   // sign-in gate in requireSignInThen (runtime-only call, no import cycle)
 
-// Injected once at bootstrap by main.js (main-local fns + the live allApps getter).
-let generateId, readFileAsText, renderApps, getMainApps;
+// Injected once at bootstrap by main.js (main-local fns + the live working-set getter + the publish
+// modal opener from server-io, injected to avoid an apps-io ↔ server-io import cycle).
+let generateId, readFileAsText, renderApps, getMainApps, showPublishModal;
 export function initAppsIo(deps) {
-  ({ generateId, readFileAsText, renderApps, getMainApps } = deps);
+  ({ generateId, readFileAsText, renderApps, getMainApps, showPublishModal } = deps);
 }
 
-// ── App Creation from ZIP ─────────────────────────
-
-async function addAppFromZip(name, arrayBuffer, icon, tags, openMode) {
-  var files = await extractZip(arrayBuffer);
-  var bundledHtml = await bundleZip(files);
-  var encoded = btoa(unescape(encodeURIComponent(bundledHtml)));
-  var app = {
-    id: generateId(),
-    name: name,
-    description: '',
-    source: 'zip',
-    url: null,
-    blob: encoded,
-    tags: tags,
-    openMode: openMode,
-    icon: icon || '\u{1F4E6}',
-    screenshot: null,
-    favorite: false,
-    addedAt: new Date().toISOString(),
-    lastOpenedAt: null
-  };
-  await saveApp(app);
-  return app;
-}
-
-// ── App Creation from URL ───────────────────────
-
-function addAppFromUrl(name, url, icon, tags, openMode) {
-  var app = {
-    id: generateId(),
-    name: name,
-    description: '',
-    source: 'url',
-    url: url,
-    blob: null,
-    tags: tags,
-    openMode: openMode,
-    icon: icon || '\u{1F4DD}',
-    screenshot: null,
-    favorite: false,
-    addedAt: new Date().toISOString(),
-    lastOpenedAt: null
-  };
-  return saveApp(app).then(function () {
-    return app;
-  });
-}
-
-// ── App Creation from File ──────────────────────
-
-function addAppFromFile(name, file, icon, tags, openMode) {
-  return readFileAsText(file).then(function (content) {
-    var encoded = btoa(unescape(encodeURIComponent(content)));
-    var app = {
-      id: generateId(),
-      name: name,
-      description: '',
-      source: 'local',
-      url: null,
-      blob: encoded,
-      tags: tags,
-      openMode: openMode,
-      icon: icon || '\u{1F4DD}',
-      screenshot: null,
-      favorite: false,
-      addedAt: new Date().toISOString(),
-      lastOpenedAt: null
-    };
-    return saveApp(app).then(function () {
-      return app;
-    });
-  });
-}
-
-// ── App Creation from Pasted Source ─────────────
-
-function addAppFromSource(name, sourceCode, icon, tags, openMode) {
-  var encoded = btoa(unescape(encodeURIComponent(sourceCode)));
+// ── Create → publish straight to the server (unlisted) ─────────────────────────
+// Build a transient in-memory record from raw HTML and open the publish modal for it. The publish
+// modal collects filename/description/access-code and POSTs to /v1/apps; the create flow parks the
+// result so the new app lands UNLISTED (on the server, not yet public). Nothing is stored locally.
+function createAppFromHtml(name, html, icon, tags, description) {
+  var encoded = btoa(unescape(encodeURIComponent(html)));
   var app = {
     id: generateId(),
     name: name,
-    description: parseAppMeta(sourceCode).description || '',
-    source: 'local',
+    description: description || '',
+    source: 'create',
     url: null,
     blob: encoded,
-    tags: tags,
-    openMode: openMode,
+    tags: tags || [],
     icon: icon || '\u{1F4DD}',
-    screenshot: null,
-    favorite: false,
-    addedAt: new Date().toISOString(),
-    lastOpenedAt: null
+    published: false,
+    addedAt: new Date().toISOString()
   };
   return saveApp(app).then(function () {
+    // showPublishModal resolves the app from the main working-set (getMainApps), so make the
+    // transient record visible there too before opening it (same pattern as openPublishedDetail).
+    try { getMainApps().push(app); } catch (e) { /* getter optional */ }
+    if (typeof showPublishModal === 'function') showPublishModal(app.id, { unlisted: true });
     return app;
   });
 }
@@ -127,8 +60,8 @@ var editingAppId = null;
 function showModal() {
   document.getElementById('modal-overlay').hidden = false;
   document.getElementById('modal-title').textContent = t('addModal.title');
-  // Default to URL tab
-  switchTab('url');
+  // Server-only: there is no URL-bookmark tab — default to pasting source.
+  switchTab('paste');
 }
 
 // Step 0 for not-yet-signed-in users: adding/publishing an app needs an account, so
@@ -173,7 +106,6 @@ function parseAppMeta(html) {
 function closeModal() {
   document.getElementById('modal-overlay').hidden = true;
   // Reset form
-  document.getElementById('app-url').value = '';
   document.getElementById('app-name').value = '';
   document.getElementById('app-icon').value = '';
   document.getElementById('app-tags').value = '';
@@ -233,30 +165,19 @@ function handleSave() {
   var name = document.getElementById('app-name').value.trim();
   var icon = document.getElementById('app-icon').value.trim();
   var tagsRaw = document.getElementById('app-tags').value.trim();
-  // Apps open TOP-LEVEL on a real origin (published) or in the sandbox (local); there is no
-  // user-facing open-mode choice anymore, so new/edited apps default to 'tab'.
-  var openMode = 'tab';
-
   var tags = tagsRaw ? tagsRaw.split(',').map(function (t) { return t.trim(); }).filter(Boolean) : [];
 
-  // ── Edit mode: update existing app ──
+  // ── Edit mode: update a transient record's display metadata in place ──
   if (editingAppId) {
     var app = null;
     for (var i = 0; i < getMainApps().length; i++) {
       if (getMainApps()[i].id === editingAppId) { app = getMainApps()[i]; break; }
     }
-    if (!app) {
-      closeModal();
-      return;
-    }
-    if (!name) {
-      showNotice('Please enter a name');
-      return;
-    }
+    if (!app) { closeModal(); return; }
+    if (!name) { showNotice('Please enter a name'); return; }
     app.name = name;
     app.icon = icon || app.icon;
     app.tags = tags;
-    app.openMode = openMode;
     saveApp(app).then(function () {
       closeModal();
       renderApps();
@@ -264,69 +185,38 @@ function handleSave() {
     return;
   }
 
-  // ── Create mode ──
+  // ── Create mode → publish to the server (unlisted) ──
   var activeTab = document.querySelector('.modal-tab.active');
-  var tabName = activeTab ? activeTab.getAttribute('data-tab') : 'url';
+  var tabName = activeTab ? activeTab.getAttribute('data-tab') : 'paste';
 
-  if (tabName === 'url') {
-    var url = document.getElementById('app-url').value.trim();
-    if (!url) {
-      showNotice('Please enter a URL');
-      return;
-    }
-    if (!name) {
-      // Derive name from URL
-      try {
-        name = new URL(url).hostname;
-      } catch (e) {
-        name = url;
-      }
-    }
-    addAppFromUrl(name, url, icon, tags, openMode).then(function () {
-      closeModal();
-      renderApps();
-    });
-  } else if (tabName === 'paste') {
+  if (tabName === 'paste') {
     var pastedCode = document.getElementById('app-paste-code').value.trim();
     if (!pastedCode) {
       showNotice('Please paste your HTML source code');
       return;
     }
-    if (!name) {
-      // Try to extract title from HTML
-      var titleMatch = pastedCode.match(/<title[^>]*>([^<]+)<\/title>/i);
-      name = titleMatch ? titleMatch[1].trim() : 'Pasted App';
-    }
-    addAppFromSource(name, pastedCode, icon, tags, openMode).then(function () {
-      closeModal();
-      renderApps();
-    });
+    var meta = parseAppMeta(pastedCode);
+    if (!name) name = meta.name || 'Pasted App';
+    closeModal();
+    createAppFromHtml(name, pastedCode, icon, tags, meta.description);
   } else if (tabName === 'file') {
     if (!selectedFile) {
       showNotice('Please select a file');
       return;
     }
-    if (selectedFile.name.toLowerCase().endsWith('.zip')) {
-      // ZIP file — extract and bundle
-      if (!name) {
-        name = selectedFile.name.replace(/\.zip$/i, '');
-      }
-      selectedFile.arrayBuffer().then(function (arrayBuffer) {
-        return addAppFromZip(name, arrayBuffer, icon, tags, openMode);
-      }).then(function () {
-        closeModal();
-        renderApps();
-      }).catch(function (err) {
-        showNotice('ZIP import failed: ' + (err.message || err));
-      });
+    var file = selectedFile;
+    if (file.name.toLowerCase().endsWith('.zip')) {
+      if (!name) name = file.name.replace(/\.zip$/i, '');
+      file.arrayBuffer()
+        .then(function (arrayBuffer) { return extractZip(arrayBuffer); })
+        .then(function (files) { return bundleZip(files); })
+        .then(function (html) { closeModal(); return createAppFromHtml(name, html, icon, tags, parseAppMeta(html).description); })
+        .catch(function (err) { showNotice('ZIP import failed: ' + (err.message || err)); });
     } else {
-      // HTML file
-      if (!name) {
-        name = selectedFile.name.replace(/\.html?$/i, '');
-      }
-      addAppFromFile(name, selectedFile, icon, tags, openMode).then(function () {
+      if (!name) name = file.name.replace(/\.html?$/i, '');
+      readFileAsText(file).then(function (html) {
         closeModal();
-        renderApps();
+        createAppFromHtml(name, html, icon, tags, parseAppMeta(html).description);
       });
     }
   }
@@ -336,10 +226,6 @@ function handleSave() {
 export function setEditingAppId(v) { editingAppId = v; }
 
 export {
-  addAppFromZip,
-  addAppFromUrl,
-  addAppFromFile,
-  addAppFromSource,
   showModal,
   requireSignInThen,
   parseAppMeta,

package/dist/static/app-catalog/js/cortex.js

@@ -372,6 +372,8 @@ function openPromptBuilder(app) {
 
   // Load authoring templates (booster-kit) into the "Start from a template" picker
   loadPbTemplates();
+  // Load capability packs (charts/flows/games/3D…) into the pack picker
+  loadPbPacks();
   // Load the canonical platform-instructions core from the node (single source of truth)
   loadPbCore();
 
@@ -441,6 +443,105 @@ function loadPbTemplates() {
     .catch(function () { /* templates are optional */ });
 }
 
+// Capability packs (library-pack registry): vendored/bundled engines + wrapper cortexes
+// (charts, editable flows, games, 3D, creative canvas…). The picker inlines each SELECTED
+// pack's ai_doc into the composed prompt — chat AIs can't fetch, so the doc must travel
+// with the prompt. Idea text pre-selects packs via their interviewTriggers.
+var pbPacks = [];              // capability-pack index entries
+var pbPackDocs = {};           // id -> { include: [...], ai_doc: '...' } (lazy, cached)
+var pbPackTouched = {};        // id -> true once the user manually (un)checks it
+var PB_PACK_CATEGORIES = ['visualization', 'diagrams', 'canvas', 'game', '3d', 'realtime'];
+
+function pbSelectedPackIds() {
+  return Array.prototype.slice.call(document.querySelectorAll('.pb-pack-cb:checked'))
+    .map(function (cb) { return cb.value; });
+}
+
+function loadPbPacks() {
+  var wrap = document.getElementById('pb-packs');
+  if (!wrap) return;
+  var config = loadConfig();
+  if (!config.aimeatUrl) return;
+  var base = config.aimeatUrl.replace(/\/+$/, '');
+  fetch(base + '/v1/library-packs?lang=' + encodeURIComponent(getLang()))
+    .then(function (r) { return r.json(); })
+    .then(function (d) {
+      var all = (d.data && d.data.packs) || [];
+      pbPacks = all.filter(function (p) {
+        if (p.status === 'deprecated') return false;
+        if (p.kind === 'vendored' || p.kind === 'bundle') return PB_PACK_CATEGORIES.indexOf(p.category) !== -1;
+        if (p.kind === 'cortex') return PB_PACK_CATEGORIES.indexOf(p.category) !== -1 && p.id !== 'aimeat-charts';
+        return false;
+      });
+      wrap.innerHTML = '';
+      pbPacks.forEach(function (p) {
+        var label = document.createElement('label');
+        label.className = 'pb-pack-item';
+        label.title = p.description || '';
+        var cb = document.createElement('input');
+        cb.type = 'checkbox'; cb.className = 'pb-pack-cb'; cb.value = p.id;
+        cb.onchange = function () {
+          pbPackTouched[p.id] = true;
+          if (cb.checked) loadPbPackDoc(base, p.id); else updatePbPreview();
+        };
+        var span = document.createElement('span');
+        span.textContent = p.title;
+        label.appendChild(cb); label.appendChild(span);
+        // AEB reliability tier + per-model proof ledger, so a human picking a pack sees
+        // which model strength it is proven on (not just left in the API).
+        if (p.modelTier) {
+          var badge = document.createElement('span');
+          badge.className = 'pb-pack-tier pb-tier-' + p.modelTier;
+          badge.textContent = p.modelTier;
+          var proven = (p.proofs || []).map(function (pr) { return pr.model + '→' + pr.verdict; }).join(', ');
+          badge.title = 'AEB reliability tier: ' + p.modelTier
+            + (proven ? ' · proven on ' + proven : ' · not yet AEB-run')
+            + (p.apiCaveat ? ' · ⚠ ' + p.apiCaveat : '');
+          label.appendChild(badge);
+        }
+        wrap.appendChild(label);
+      });
+      // Pre-select from the idea text as the user types (never override a manual choice).
+      var desc = document.getElementById('pb-description');
+      if (desc && !desc._pbPackListener) {
+        desc._pbPackListener = true;
+        desc.addEventListener('input', function () { pbMatchPacksToIdea(base); });
+      }
+      pbMatchPacksToIdea(base);
+    })
+    .catch(function () { /* older node without the endpoint — picker stays empty */ });
+}
+
+function pbMatchPacksToIdea(base) {
+  var desc = document.getElementById('pb-description');
+  var text = ((desc && desc.value) || '').toLowerCase();
+  pbPacks.forEach(function (p) {
+    if (pbPackTouched[p.id]) return;
+    var cb = document.querySelector('.pb-pack-cb[value="' + p.id + '"]');
+    if (!cb) return;
+    // Word-start matching: a trigger must begin at a word boundary ('flow' matches
+    // "flowchart", but 'art' would not match "chart"). Suffixes are allowed on purpose
+    // (Finnish inflections: 'kaavio' matches "kaaviot").
+    var hit = (p.interviewTriggers || []).some(function (t) {
+      var esc = String(t).toLowerCase().replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      return new RegExp('(^|[^a-zà-öø-ÿ])' + esc).test(text);
+    });
+    if (hit && !cb.checked) { cb.checked = true; loadPbPackDoc(base, p.id); }
+    else if (!hit && cb.checked) { cb.checked = false; updatePbPreview(); }
+  });
+}
+
+function loadPbPackDoc(base, id) {
+  if (pbPackDocs[id]) { updatePbPreview(); return; }
+  fetch(base + '/v1/library-packs/' + encodeURIComponent(id))
+    .then(function (r) { return r.json(); })
+    .then(function (d) {
+      var pack = d.data && d.data.pack;
+      if (pack) { pbPackDocs[id] = pack; updatePbPreview(); }
+    })
+    .catch(function () { /* pack doc optional — the core prompt still indexes packs */ });
+}
+
 function buildPromptFromBuilder() {
   var config = loadConfig();
   var nodeUrl = config.aimeatUrl ? config.aimeatUrl.replace(/\/+$/, '') : 'https://your-aimeat-node.example';
@@ -471,6 +572,7 @@ function buildPromptFromBuilder() {
     prompt += '3. How should it look and feel? (e.g. dark neon · cozy · sleek minimal · fun colorful) — it must support BOTH light and dark.\n';
     prompt += '4. Data: SHARED (a community space others can see and add to) or PRIVATE (only mine)?\n';
     prompt += '5. Should it use AI features (summaries, suggestions, generation)? If yes I can enable them via aimeat-ai.\n';
+    prompt += '6. Does it need any special capabilities? (charts/graphs · editable flow or mindmap diagrams · static text-defined diagrams · a game or heavy 2D animation · generative art / creative canvas · 3D · live multi-user/realtime) — each maps to a capability pack in Step 2; include only what I pick.\n';
     prompt += 'Skip any question I already answered in my idea above. Use my answers to customise everything in Step 2.\n\n';
   }
 
@@ -631,6 +733,18 @@ function buildPromptFromBuilder() {
     prompt += '\n## Starting template (copy from this)\nUse this skeleton as your base — keep its boot, login pill, and self-hosted theme wiring intact; fill the {{...}} slots; build your views inside <main>. Return the COMPLETE single HTML file based on it.\n```html\n' + window.pbTemplate.content + '\n```\n';
   }
 
+  // Capability packs: inline each SELECTED pack's usage doc — a chat AI can't fetch the
+  // pack endpoint, so the doc travels with the prompt (agentic coders get the same text).
+  var selectedPacks = pbSelectedPackIds().map(function (id) { return pbPackDocs[id]; }).filter(Boolean);
+  if (selectedPacks.length > 0) {
+    prompt += '\n## Selected capability packs (self-hosted on my node — use these, never a CDN)\n';
+    selectedPacks.forEach(function (pack) {
+      prompt += '\n### Pack: ' + pack.id + ' — ' + (pack.title || '') + '\n';
+      prompt += 'Include (in order):\n' + (pack.include || []).map(function (l) { return l; }).join('\n') + '\n';
+      if (pack.ai_doc) prompt += 'Usage:\n' + pack.ai_doc + '\n';
+    });
+  }
+
   return prompt;
 }
 

package/dist/static/app-catalog/js/cost.js

@@ -0,0 +1,100 @@
+/**
+ * @file cost.js
+ * @description The Cost & Contracts section of the App Detail view (EXCHANGE G3 / TARGET-045): a
+ *   read-only per-app surface of the EXCHANGE contracts (metered entitlements) an app sources, with
+ *   live spend against each budget and the platform rake. Data comes from GET /v1/apps/cost?app_id=,
+ *   which returns only entitlements whose consumer is the signed-in owner (strictly cross-owner).
+ *   Rendering mirrors monetize.js: detail.js renders the shell for OWN published apps and calls
+ *   costOnOpen; this module async-loads and re-renders #detail-cost in place.
+ * @structure costOnOpen · costSectionInner
+ * @usage import { costSectionInner, costOnOpen } from './cost.js'
+ * @version-history
+ *   v1.0.0 — 2026-07-20 — Initial per-app cost & contracts surface (EXCHANGE G3).
+ */
+import { escapeHtml } from './util.js';
+import { loadConfig } from './config.js';
+import { t } from './i18n.js';
+import { getCortexOwnerToken } from './cortex.js';
+
+var cState = 'off';   // 'off' | 'loading' | 'ready' | 'error'
+var cData = null;     // the /v1/apps/cost data payload, or null
+var cAppId = '';      // full app id "owner/filename"
+
+function apiBase() {
+  var cfg = loadConfig();
+  return (cfg.aimeatUrl || '').replace(/\/+$/, '');
+}
+
+function rerender() {
+  var el = document.getElementById('detail-cost');
+  if (el) el.innerHTML = costSectionInner();
+}
+
+/** Reset + async-load the cost surface when a detail view opens. No-op for non-own / unpublished apps. */
+export function costOnOpen(owner, appId, isOwn) {
+  cData = null;
+  if (!isOwn || !owner || !appId) { cState = 'off'; cAppId = ''; return; }
+  cAppId = owner + '/' + appId;
+  cState = 'loading';
+  var token = getCortexOwnerToken();
+  if (!token) { cState = 'error'; cData = { _needLogin: true }; return; }
+  fetch(apiBase() + '/v1/apps/cost?app_id=' + encodeURIComponent(cAppId), {
+    headers: { 'Authorization': 'Bearer ' + token },
+  })
+    .then(function (r) { return r.json(); })
+    .then(function (res) {
+      if (!res || !res.ok || !res.data) throw new Error('bad response');
+      cData = res.data;
+      cState = 'ready';
+      rerender();
+    })
+    .catch(function () { cState = 'error'; cData = null; rerender(); });
+}
+
+function stateBadge(state) {
+  // Reuse the sync-chip colours: ok (active), diff (paused), none (revoked/exhausted).
+  var cls = state === 'active' ? 'ok' : (state === 'paused' ? 'diff' : 'none');
+  return '<span class="dtl-sync ' + cls + '" style="margin:0">' + escapeHtml(state) + '</span>';
+}
+
+function contractRow(c) {
+  var b = c.budget || {};
+  var cap = (b.cap_units === null || b.cap_units === undefined) ? t('cost.uncapped') : (b.spent_units + ' / ' + b.cap_units);
+  var remaining = (b.remaining_units === null || b.remaining_units === undefined) ? ''
+    : ' <span class="dtl-stat-label">(' + t('cost.remaining').replace('{n}', b.remaining_units) + ')</span>';
+  var providerShort = String(c.provider || '').split('@')[0];
+  return '<div class="dtl-status-row" style="align-items:center;gap:10px;flex-wrap:wrap">' +
+      '<div class="dtl-stat" style="flex:1;min-width:150px">' +
+        '<span class="dtl-stat-val">' + escapeHtml(c.capability || '') + '</span>' +
+        '<span class="dtl-stat-label">' + escapeHtml(t('cost.providerCol')) + ': ' + escapeHtml(providerShort) + '</span>' +
+      '</div>' +
+      '<div class="dtl-stat"><span class="dtl-stat-label">' + t('cost.priceCol') + '</span><span class="dtl-stat-val">' + escapeHtml(String(c.price_per_call)) + ' morsels</span></div>' +
+      '<div class="dtl-stat"><span class="dtl-stat-label">' + t('cost.rakeCol') + '</span><span class="dtl-stat-val">' + escapeHtml(String(c.rake_per_call)) + ' morsels (' + escapeHtml(String(c.rake_percent)) + '%)</span></div>' +
+      '<div class="dtl-stat"><span class="dtl-stat-label">' + t('cost.budgetCol') + '</span><span class="dtl-stat-val">' + escapeHtml(cap) + remaining + '</span></div>' +
+      '<div class="dtl-stat">' + stateBadge(c.state) + '</div>' +
+    '</div>';
+}
+
+/** Inner HTML of the section — detail.js wraps it in <div class="dtl-section" id="detail-cost">. */
+export function costSectionInner() {
+  if (cState === 'off') return '';
+  var html = '<h3>' + t('cost.title') + '</h3>' +
+    '<p class="dtl-desc">' + t('cost.hint') + '</p>';
+  if (cState === 'loading') {
+    return html + '<span style="color:var(--text-muted);font-size:.85rem">…</span>';
+  }
+  if (cState === 'error') {
+    var msg = (cData && cData._needLogin) ? t('cost.needLogin') : t('cost.loadFailed');
+    return html + '<span class="dtl-sync none">' + escapeHtml(msg) + '</span>';
+  }
+  var contracts = (cData && cData.contracts) || [];
+  if (!contracts.length) {
+    return html + '<span class="dtl-sync none">' + t('cost.empty') + '</span>';
+  }
+  var m = (cData.totals && cData.totals.morsels) || { spent_units: 0, calls: 0 };
+  html += '<div class="dtl-sync ok" style="margin:0 0 10px">' +
+    t('cost.summary').replace('{n}', cData.total_contracts).replace('{spent}', m.spent_units).replace('{calls}', m.calls) +
+    '</div>';
+  for (var i = 0; i < contracts.length; i++) html += contractRow(contracts[i]);
+  return html;
+}