aimeat 1.33.2 → 1.34.0

package/dist/static/app-catalog.html

@@ -33,6 +33,17 @@
       header (aimeat-home-link, label set from location.host) and a "Publish your own app" CTA in the
       iframe app-viewer toolbar (.aimeat-cta). Pairs with the inline-app badge injected server-side
       (apps.ts injectAimeatBadge) so visitors who open a shared app always have a way home + a publish hint.
+    v2.5.0 — 2026-06-26 — Add inline name + description editing in the Detail view's About section
+      (detailAboutEdit/Cancel/Save): edit in place where the details are shown, save PATCHes
+      /v1/apps/:filename { name, description } when published (and persists the local record) — the
+      app link (owner/filename) is unchanged, no re-publish and no new version.
+    v2.5.1 — 2026-06-26 — Fix: app names containing an apostrophe (e.g. "Fatalii's …") or other JS/HTML
+      delimiters broke the View/Fork buttons ("missing ) after argument list") because escapeHtml does
+      not escape quotes for an onclick JS-string context. Add jsArg() and use it for the name/filename
+      arguments interpolated into on* attributes.
+    v2.5.2 — 2026-06-26 — Add a pencil (✏️) next to the app name — on the detail-view title and on the
+      owner's own published + parked cards — that opens the inline name/description editor right where
+      the name is shown (editAppDetails opens the detail view with the About editor pre-opened).
 -->
 <html lang="en">
 <head>
@@ -699,6 +710,7 @@
       background: var(--surface);
       color: var(--text);
     }
+    .pb-template-select { margin-bottom: 8px; }
 
     .modal-fields {
       display: flex;
@@ -1467,6 +1479,21 @@
       white-space: nowrap;
     }
 
+    /* Small inline pencil shown next to an editable app name (own cards + the detail
+       title). Pressing it opens the name/description editor where the name shows. */
+    .rename-pencil {
+      background: none;
+      border: none;
+      cursor: pointer;
+      font-size: .8rem;
+      opacity: .5;
+      padding: 0 2px;
+      line-height: 1;
+      vertical-align: middle;
+      transition: opacity var(--transition);
+    }
+    .rename-pencil:hover { opacity: 1; }
+
     .published-card-meta {
       font-size: .72rem;
       color: var(--text-muted);
@@ -1725,8 +1752,8 @@
     .prompt-builder-modal {
       background: var(--surface);
       border: 1px solid var(--border-subtle); border-radius: 16px;
-      padding: 28px; max-width: 900px; width: 96vw; max-height: 90vh;
-      display: flex; flex-direction: column; overflow: hidden;
+      padding: 28px; max-width: 720px; width: 96vw; max-height: 90vh;
+      display: flex; flex-direction: column; overflow-y: auto;
       box-shadow: 0 8px 40px rgba(0,0,0,.12);
     }
     .prompt-builder-modal h2 { margin: 0 0 16px; font-size: 1.1rem; }
@@ -1757,13 +1784,26 @@
     .pb-ext-chip.selected { background: rgba(232,86,74,.08); border-color: rgba(232,86,74,.35); }
     .pb-ext-chip input { accent-color: #E8564A; pointer-events: none; }
     .pb-preview {
-      flex: 1; min-height: 120px; overflow-y: auto; margin-bottom: 14px; padding: 12px;
+      min-height: 90px; max-height: 150px; overflow-y: auto; margin-bottom: 12px; padding: 12px;
       background: var(--bg-subtle); border: 1px solid var(--border-subtle);
       border-radius: 10px; font-family: 'Consolas','Monaco','Courier New',monospace;
       font-size: .75rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
       color: var(--text-muted);
     }
     .pb-preview-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 6px; }
+    /* Guided-steps layout for "Generate App with AI" */
+    .pb-intro { font-size: .82rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 18px; }
+    .pb-step { border-top: 1px solid var(--border-subtle); padding-top: 16px; margin-bottom: 16px; }
+    .pb-step:first-of-type { border-top: none; padding-top: 0; }
+    .pb-step-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .98rem; margin-bottom: 12px; }
+    .pb-step-num {
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
+      background: #E8564A; color: #fff; font-size: .82rem; font-weight: 700;
+    }
+    .pb-step-hint { font-size: .8rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 12px; }
+    .pb-improving { font-size: .85rem; font-weight: 600; color: #E8564A; margin: 0 0 12px; }
+    .pb-step-btn { width: 100%; justify-content: center; }
   </style>
 </head>
 <body>
@@ -2200,22 +2240,41 @@
     </div>
   </div>
 
-  <!-- Prompt Builder Panel -->
+  <!-- Generate App with AI — guided steps -->
   <div id="prompt-builder-overlay">
     <div class="prompt-builder-modal">
-      <h2 id="pb-title" data-i18n="pb.title">&#x2728; Generate App Prompt</h2>
-      <div class="pb-mode-row">
-        <label class="pb-mode-radio"><input type="radio" name="pb-mode" value="new" checked> <span data-i18n="pb.new">New App</span></label>
-        <label class="pb-mode-radio"><input type="radio" name="pb-mode" value="improve"> <span data-i18n="pb.improve">Improve This App</span></label>
+      <h2 id="pb-title" data-i18n="pb.title">&#x2728; Generate App with AI</h2>
+      <p class="pb-intro" data-i18n="pb.intro">No coding. Describe your idea, copy the prompt, and paste it into any AI chat (Claude, ChatGPT…). The AI asks a few questions, builds a ready-to-use app, and gives you one HTML file — then add it here to put it live.</p>
+
+      <div class="pb-step">
+        <div class="pb-step-head"><span class="pb-step-num">1</span><span data-i18n="pb.step1">Describe your app</span></div>
+        <!-- Mode is implicit (new vs improve) — radios kept hidden for state; an "Improving:" note shows instead. -->
+        <div class="pb-mode-row" id="pb-mode-row" style="display:none">
+          <label class="pb-mode-radio"><input type="radio" name="pb-mode" value="new" checked> <span data-i18n="pb.new">New App</span></label>
+          <label class="pb-mode-radio"><input type="radio" name="pb-mode" value="improve"> <span data-i18n="pb.improve">Improve This App</span></label>
+        </div>
+        <div id="pb-improving" class="pb-improving" style="display:none"></div>
+        <textarea class="pb-desc-area" id="pb-description" placeholder="Describe what the app should do..." data-i18n-ph="pb.descPh"></textarea>
+        <label class="pb-ext-toggle" for="pb-template"><span>&#x2728; <span data-i18n="pb.template">Start from a template (optional)</span></span></label>
+        <select id="pb-template" class="modal-input pb-template-select"><option value="">(none &#x2014; build from scratch)</option></select>
+      </div>
+
+      <div class="pb-step">
+        <div class="pb-step-head"><span class="pb-step-num">2</span><span data-i18n="pb.step2">Copy the prompt &amp; paste it into your AI</span></div>
+        <p class="pb-step-hint" data-i18n="pb.step2hint">Open Claude, ChatGPT or any AI chat, paste this in, and answer its questions. It will build your app and hand you a single HTML file.</p>
+        <div class="pb-preview-label" data-i18n="pb.promptPreview">Prompt preview</div>
+        <div class="pb-preview" id="pb-preview"></div>
+        <button class="modal-btn primary pb-step-btn" id="pb-copy-btn" data-i18n="pb.copy">&#x1F4CB; Copy Prompt</button>
+      </div>
+
+      <div class="pb-step">
+        <div class="pb-step-head"><span class="pb-step-num">3</span><span data-i18n="pb.step3">Add &amp; publish your app</span></div>
+        <p class="pb-step-hint" data-i18n="pb.step3hint">Got the HTML file from the AI? Add it here — it goes live on your node and you get a link to share.</p>
+        <button class="modal-btn pb-step-btn" id="pb-add-btn" data-i18n="pb.addBtn">&#x2795; I have my app file — add it</button>
       </div>
-      <textarea class="pb-desc-area" id="pb-description" placeholder="Describe what the app should do, or what changes to make..." data-i18n-ph="pb.descPh"></textarea>
-      <label class="pb-ext-toggle"><input type="checkbox" id="pb-ext-checkbox"> <span data-i18n="pb.includeCortex">Include Cortex Extensions</span></label>
-      <div class="pb-ext-list" id="pb-ext-list"></div>
-      <div class="pb-preview-label" data-i18n="pb.livePreview">Live Preview</div>
-      <div class="pb-preview" id="pb-preview"></div>
+
       <div class="modal-actions">
-        <button class="modal-btn secondary" id="pb-cancel-btn" data-i18n="common.cancel">Cancel</button>
-        <button class="modal-btn primary" id="pb-copy-btn" data-i18n="pb.copy">Copy Prompt</button>
+        <button class="modal-btn secondary" id="pb-cancel-btn" data-i18n="common.close">Close</button>
       </div>
     </div>
   </div>
@@ -2322,6 +2381,9 @@
       'publish.title': '🚀 Publish App',
       'publish.filename': 'Filename',
       'publish.filenameHint': 'Letters, numbers, dots, hyphens, underscores. Must end in .html',
+      'publish.description': 'Description',
+      'publish.descriptionPh': 'What does this app do? 1-2 sentences (your AI can write it)',
+      'publish.descriptionHint': 'Shown in the catalogue and on the landing wall. Required for a new app.',
       'publish.accessCode': 'Access Code (optional)',
       'publish.accessCodePh': 'Leave empty for public',
       'publish.accessCodeHint': '4-64 chars. If set, only people with the code can download.',
@@ -2334,13 +2396,25 @@
       'versions.help': 'Every publish is kept. Restore re-publishes an older version as the new latest; Fork copies it into a new app. Older versions are never lost.',
       'versions.current': 'current',
       'versions.stored': 'versions stored',
-      'pb.title': '✨ Generate App Prompt',
+      'pb.title': '✨ Generate App with AI',
+      'pb.intro': 'No coding. Describe your idea, copy the prompt, and paste it into any AI chat (Claude, ChatGPT…). The AI asks a few questions, builds a ready-to-use app, and gives you one HTML file — then add it here to put it live.',
+      'pb.step1': 'Describe your app',
+      'pb.step2': 'Copy the prompt & paste it into your AI',
+      'pb.step2hint': 'Open Claude, ChatGPT or any AI chat, paste this in, and answer its questions. It will build your app and hand you a single HTML file.',
+      'pb.step3': 'Add & publish your app',
+      'pb.step3hint': 'Got the code or HTML file from the AI? Paste it (or upload the file) here — it goes live on your node and you get a shareable link.',
+      'pb.template': 'Start from a template (optional)',
+      'pb.noneTemplate': '(none — build from scratch)',
+      'pb.promptPreview': 'Prompt preview',
+      'pb.addBtn': '➕ Add your app — paste it or upload the file',
+      'pb.improving': 'Improving',
+      'pb.copied': 'Copied!',
       'pb.new': 'New App',
       'pb.improve': 'Improve This App',
       'pb.descPh': 'Describe what the app should do, or what changes to make...',
       'pb.includeCortex': 'Include Cortex Extensions',
       'pb.livePreview': 'Live Preview',
-      'pb.copy': 'Copy Prompt',
+      'pb.copy': '📋 Copy Prompt',
       'card.view': '👁 View',
       'card.remove': '🗑 Remove',
       'card.versions': '🕑 Versions',
@@ -2349,6 +2423,15 @@
       'card.subdomain': '🌐 Subdomain',
       'card.park': '🅿 Park',
       'card.unpark': '🚀 Publish',
+      'detail.editDetails': '✏️ Edit',
+      'detail.nameLabel': 'App name',
+      'detail.descLabel': 'Description',
+      'detail.renameHint': 'The app link stays the same — only the displayed name and description change.',
+      'detail.nameRequired': 'Name cannot be empty.',
+      'detail.descRequired': 'Description cannot be empty.',
+      'detail.saveDetails': '💾 Save',
+      'detail.cancelEdit': 'Cancel',
+      'detail.detailsUpdated': 'App details updated.',
       'card.parkHint': 'Hide from the public catalogue — moves to Parked Apps (still usable by you).',
       'card.unparkHint': 'Publish again — moves back to Published Apps, visible to everyone.',
       'card.parkedBadge': 'PARKED',
@@ -2559,6 +2642,9 @@
       'publish.title': '🚀 Julkaise sovellus',
       'publish.filename': 'Tiedostonimi',
       'publish.filenameHint': 'Kirjaimia, numeroita, pisteitä, viivoja, alaviivoja. Päätteen oltava .html',
+      'publish.description': 'Kuvaus',
+      'publish.descriptionPh': 'Mitä tämä sovellus tekee? 1–2 lausetta (tekoälysi voi kirjoittaa sen)',
+      'publish.descriptionHint': 'Näytetään katalogissa ja aloitusseinällä. Pakollinen uudelle sovellukselle.',
       'publish.accessCode': 'Pääsykoodi (valinnainen)',
       'publish.accessCodePh': 'Jätä tyhjäksi julkiseksi',
       'publish.accessCodeHint': '4–64 merkkiä. Jos asetettu, vain koodin tietävät voivat ladata.',
@@ -2571,13 +2657,25 @@
       'versions.help': 'Jokainen julkaisu säilytetään. Palauta julkaisee vanhan version uudelleen uusimmaksi; Haaroita kopioi sen uudeksi sovellukseksi. Vanhoja versioita ei koskaan menetetä.',
       'versions.current': 'nykyinen',
       'versions.stored': 'versiota tallennettu',
-      'pb.title': '✨ Luo sovellusprompti',
+      'pb.title': '✨ Luo sovellus tekoälyllä',
+      'pb.intro': 'Ei koodausta. Kuvaile ideasi, kopioi prompti ja liitä se mihin tahansa tekoälykeskusteluun (Claude, ChatGPT…). Tekoäly kysyy muutaman kysymyksen, rakentaa valmiin sovelluksen ja antaa sinulle yhden HTML-tiedoston — lisää se sitten tästä julkaistaksesi.',
+      'pb.step1': 'Kuvaile sovelluksesi',
+      'pb.step2': 'Kopioi prompti & liitä se tekoälyysi',
+      'pb.step2hint': 'Avaa Claude, ChatGPT tai mikä tahansa tekoälykeskustelu, liitä tämä ja vastaa kysymyksiin. Se rakentaa sovelluksesi ja antaa sinulle yhden HTML-tiedoston.',
+      'pb.step3': 'Lisää & julkaise sovelluksesi',
+      'pb.step3hint': 'Saitko koodin tai HTML-tiedoston tekoälyltä? Liitä se (tai lataa tiedosto) tästä — se tulee live-tilaan solmuusi ja saat jaettavan linkin.',
+      'pb.template': 'Aloita mallipohjasta (valinnainen)',
+      'pb.noneTemplate': '(ei mitään — rakenna tyhjästä)',
+      'pb.promptPreview': 'Promptin esikatselu',
+      'pb.addBtn': '➕ Lisää sovelluksesi — liitä se tai lataa tiedosto',
+      'pb.improving': 'Parannetaan',
+      'pb.copied': 'Kopioitu!',
       'pb.new': 'Uusi sovellus',
       'pb.improve': 'Paranna tätä sovellusta',
       'pb.descPh': 'Kuvaile mitä sovelluksen tulisi tehdä, tai mitä muutoksia haluat...',
       'pb.includeCortex': 'Sisällytä Cortex-laajennukset',
       'pb.livePreview': 'Esikatselu',
-      'pb.copy': 'Kopioi prompti',
+      'pb.copy': '📋 Kopioi prompti',
       'card.view': '👁 Näytä',
       'card.remove': '🗑 Poista',
       'card.versions': '🕑 Versiot',
@@ -2586,6 +2684,15 @@
       'card.subdomain': '🌐 Alidomain',
       'card.park': '🅿 Parkkiin',
       'card.unpark': '🚀 Julkaise',
+      'detail.editDetails': '✏️ Muokkaa',
+      'detail.nameLabel': 'Sovelluksen nimi',
+      'detail.descLabel': 'Kuvaus',
+      'detail.renameHint': 'Sovelluksen linkki pysyy samana — vain näytettävä nimi ja kuvaus muuttuvat.',
+      'detail.nameRequired': 'Nimi ei voi olla tyhjä.',
+      'detail.descRequired': 'Kuvaus ei voi olla tyhjä.',
+      'detail.saveDetails': '💾 Tallenna',
+      'detail.cancelEdit': 'Peruuta',
+      'detail.detailsUpdated': 'Sovelluksen tiedot päivitetty.',
       'card.parkHint': 'Piilota julkisesta katalogista — siirtyy Parkissa-osioon (sinä voit yhä käyttää).',
       'card.unparkHint': 'Julkaise uudelleen — siirtyy takaisin Julkaistuihin, näkyy kaikille.',
       'card.parkedBadge': 'PARKISSA',
@@ -3213,7 +3320,7 @@
     var app = {
       id: generateId(),
       name: name,
-      description: '',
+      description: parseAppMeta(sourceCode).description || '',
       source: 'local',
       url: null,
       blob: encoded,
@@ -3237,11 +3344,50 @@
 
   function showModal() {
     document.getElementById('modal-overlay').hidden = false;
-    document.getElementById('modal-title').textContent = 'Add App';
+    document.getElementById('modal-title').textContent = t('addModal.title');
     // Default to URL tab
     switchTab('url');
   }
 
+  // Step 0 for not-yet-signed-in users: adding/publishing an app needs an account, so
+  // open the shared sign-in/register dialog (the SAME one the golden pill opens —
+  // Google one-click or email+password, full registration) and continue once logged in.
+  function requireSignInThen(next) {
+    if (getCortexOwnerToken()) { next(); return; }
+    var done = false;
+    function onLogin() {
+      if (done) return; done = true;
+      try { window.AIMEAT.auth.off('login', onLogin); } catch (e) {}
+      next();
+    }
+    try {
+      window.AIMEAT.auth.on('login', onLogin);
+      window.AIMEAT.auth.showLoginModal({});
+    } catch (e) {
+      // Auth lib not ready yet — fall back to the pill's own Sign In button.
+      var b = document.querySelector('#headerAuth .aimeat-sign-btn');
+      if (b) b.click(); else next();
+    }
+  }
+
+  // Read the app name + description the templates embed (AIMEAT App Manifest comment),
+  // falling back to <title>, so the Add dialog can pre-fill them from pasted code.
+  function parseAppMeta(html) {
+    var meta = { name: '', description: '' };
+    try {
+      var m = (html || '').match(/AIMEAT App Manifest([\s\S]*?)-->/i);
+      if (m) {
+        var nm = m[1].match(/\bname:\s*(.+)/i); if (nm) meta.name = nm[1].trim();
+        var dm = m[1].match(/\bdescription:\s*(.+)/i); if (dm) meta.description = dm[1].trim();
+      }
+      if (!meta.name) { var tt = (html || '').match(/<title>([^<]+)<\/title>/i); if (tt) meta.name = tt[1].trim(); }
+    } catch (e) {}
+    // Drop unfilled {{template}} placeholders.
+    if (/\{\{.*\}\}/.test(meta.name)) meta.name = '';
+    if (/\{\{.*\}\}/.test(meta.description)) meta.description = '';
+    return meta;
+  }
+
   function closeModal() {
     document.getElementById('modal-overlay').hidden = true;
     // Reset form
@@ -3417,6 +3563,23 @@
     return div.innerHTML;
   }
 
+  // Escape a user-controlled string for use as a single-quoted JS argument INSIDE a
+  // double-quoted HTML on* attribute (e.g. onclick="window._launcher.foo('<here>')").
+  // escapeHtml only handles < > & — an apostrophe like in "Fatalii's" would otherwise
+  // terminate the JS string and throw "missing ) after argument list", breaking the
+  // button. JS-escape the backslash + single quote; HTML-escape the attribute/markup
+  // delimiters (they decode back to plain chars before the JS engine sees them).
+  function jsArg(str) {
+    return String(str == null ? '' : str)
+      .replace(/&/g, '&amp;')
+      .replace(/\\/g, '\\\\')
+      .replace(/'/g, "\\'")
+      .replace(/"/g, '&quot;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/[\r\n]+/g, ' ');
+  }
+
   function sourceLabel(source) {
     switch (source) {
       case 'local': return '\u{1F4C4} local';
@@ -5318,8 +5481,9 @@
         return;
       }
 
-      // Send the owner token when we have one: the server only returns the caller's OWN
-      // parked apps to an authenticated request, so the Parked Apps section needs it.
+      // Send the owner token when we have one: the server decides visibility from who
+      // is authenticated, so an authenticated owner gets back their OWN parked +
+      // operator-hidden apps (badged) while everyone else never sees them.
       var listHeaders = {};
       var listTok = getCortexOwnerToken();
       if (listTok) listHeaders['Authorization'] = 'Bearer ' + listTok;
@@ -5414,7 +5578,7 @@
               (date ? '<span class="pcm-date">' + date + '</span>' : '') +
             '</div>' +
             '<div class="published-card-actions">' +
-              '<button onclick="window._launcher.viewPublished(\'' + escapeHtml(viewUrl) + '?mode=inline\', \'' + escapeHtml(name) + '\')">' + t('card.view') + '</button>' +
+              '<button onclick="window._launcher.viewPublished(\'' + escapeHtml(viewUrl) + '?mode=inline\', \'' + jsArg(name) + '\')">' + t('card.view') + '</button>' +
               '<button onclick="window._launcher.forkVersion(\'' + escapeHtml(sa.owner || '') + '\', \'' + escapeHtml(sa.filename || '') + '\', ' + (sa.version_number || 0) + ')" title="Copy into your own apps">' + t('card.fork') + '</button>' +
             '</div>' +
             (version ? '<div class="published-card-badgerow"><span class="pcb-version">' + escapeHtml(version) + '</span></div>' : '') +
@@ -5446,6 +5610,7 @@
       html +=
         '<div class="published-card parked">' +
           '<div class="published-card-name">' + escapeHtml(name) +
+            ' <button class="rename-pencil" title="' + escapeHtml(t('detail.editDetails')) + '" onclick="window._launcher.editAppDetails(\'' + jsArg(sa.owner || '') + '\', \'' + jsArg(sa.filename || '') + '\', \'\', ' + (sa.version_number || 0) + ')">✏️</button>' +
             (version ? ' <span style="opacity:.5;font-size:.85em">' + escapeHtml(version) + '</span>' : '') +
             ' <span class="published-source-badge parked">' + t('card.parkedBadge') + '</span>' +
           '</div>' +
@@ -5456,7 +5621,7 @@
           '<div class="published-card-actions">' +
             '<button class="primary" onclick="window._launcher.toggleParkApp(\'' + escapeHtml(sa.filename || '') + '\', false)" title="' + escapeHtml(t('card.unparkHint')) + '">' + t('card.unpark') + '</button>' +
             '<button onclick="window._launcher.openPublishedDetail(\'' + escapeHtml(sa.owner || '') + '\', \'' + escapeHtml(sa.filename || '') + '\', \'\', ' + (sa.version_number || 0) + ')">' + t('ctx.details') + '</button>' +
-            '<button onclick="window._launcher.viewPublished(\'' + escapeHtml(viewUrl) + '?mode=inline\', \'' + escapeHtml(name) + '\')">' + t('card.view') + '</button>' +
+            '<button onclick="window._launcher.viewPublished(\'' + escapeHtml(viewUrl) + '?mode=inline\', \'' + jsArg(name) + '\')">' + t('card.view') + '</button>' +
             '<button onclick="window._launcher.showVersionsModal(\'' + escapeHtml(sa.owner || '') + '\', \'' + escapeHtml(sa.filename || '') + '\')">' + t('card.versions') + '</button>' +
             '<button onclick="window._launcher.deleteServerApp(\'' + escapeHtml(sa.filename || '') + '\')" class="danger">' + t('card.remove') + '</button>' +
           '</div>' +
@@ -5558,7 +5723,9 @@
 
       html +=
         '<div class="published-card">' +
-          '<div class="published-card-name">' + escapeHtml(app.name) + '</div>' +
+          '<div class="published-card-name">' + escapeHtml(app.name) +
+            ((app.isOwn && app.filename) ? ' <button class="rename-pencil" title="' + escapeHtml(t('detail.editDetails')) + '" onclick="window._launcher.editAppDetails(\'' + jsArg(app.owner || '') + '\', \'' + jsArg(app.filename) + '\', \'' + jsArg(app.localId || '') + '\', ' + (app.versionNumber || 0) + ')">✏️</button>' : '') +
+          '</div>' +
           (app.operatorHidden ? '<div class="published-card-modnote"><span class="published-source-badge operator-hidden" title="' + escapeHtml(app.operatorHideReason || '') + '">' + t('card.operatorHidden') + '</span></div>' : '') +
           (app.description ? '<div class="published-card-desc">' + escapeHtml(app.description) + '</div>' : '') +
           '<div class="published-card-footer">' +
@@ -5569,7 +5736,7 @@
             '</div>' +
             '<div class="published-card-actions">' +
               (app.isOwn && app.filename ? '<button class="primary" onclick="window._launcher.openPublishedDetail(\'' + escapeHtml(app.owner || '') + '\', \'' + escapeHtml(app.filename) + '\', \'' + escapeHtml(app.localId || '') + '\', ' + (app.versionNumber || 0) + ')">' + t('ctx.details') + '</button>' : '') +
-              (app.viewUrl ? '<button onclick="window._launcher.viewPublished(\'' + escapeHtml(app.viewUrl) + '?mode=inline\', \'' + escapeHtml(app.name) + '\')">' + t('card.view') + '</button>' : '') +
+              (app.viewUrl ? '<button onclick="window._launcher.viewPublished(\'' + escapeHtml(app.viewUrl) + '?mode=inline\', \'' + jsArg(app.name) + '\')">' + t('card.view') + '</button>' : '') +
               (app.isOwn && app.filename ? '<button onclick="window._launcher.showVersionsModal(\'' + escapeHtml(app.owner || '') + '\', \'' + escapeHtml(app.filename) + '\')">' + t('card.versions') + '</button>' : '') +
               parkBtnHtml +
               subBtnHtml +
@@ -5682,6 +5849,8 @@
   var detailDraftBlob = null;   // base64 of the pending AI-generated draft (never overwrites app.blob until Keep)
   var detailAiAvailable = false;
   var detailVersionsHtml = null; // cached rendered versions list, survives re-renders
+  var detailEditingAbout = false; // true while the About name/description inline editor is open
+  var detailEditAboutOnOpen = false; // when set, open the About editor as soon as the detail view renders
 
   function detailGetApp() {
     for (var i = 0; i < allApps.length; i++) {
@@ -5718,6 +5887,7 @@
     detailAppId = appId;
     detailDraftBlob = null;
     detailVersionsHtml = null;
+    detailEditingAbout = false;
     var app = detailGetApp();
     if (!app) return;
     document.getElementById('detail-view').hidden = false;
@@ -5728,6 +5898,18 @@
     if (app.published && app.publishedFilename && owner) {
       detailLoadVersions(owner, app.publishedFilename);
     }
+    // Opened via a pencil ("edit the name") → jump straight into the About editor.
+    if (detailEditAboutOnOpen) {
+      detailEditAboutOnOpen = false;
+      detailAboutEdit();
+    }
+  }
+
+  // Open an app's detail view with the name/description editor already open. Used by
+  // the pencil icons on the cards so editing starts right where the name is shown.
+  function editAppDetails(owner, filename, localId, versionNumber) {
+    detailEditAboutOnOpen = true;
+    openPublishedDetail(owner, filename, localId, versionNumber);
   }
 
   function closeDetailView() {
@@ -5816,9 +5998,13 @@
     var hasServer = !!config.aimeatUrl;
     var icon = app.icon || '\u{1F4DD}';
     var isUrlApp = (app.source === 'url' && !app.blob);
+    // The name + description are editable in place (see the About section). A pencil
+    // next to the title opens that editor right where the name is shown.
+    var canEditAbout = !!app.id && !isUrlApp;
 
     document.getElementById('detail-title').innerHTML =
-      '<span style="font-size:1.3rem">' + escapeHtml(icon) + '</span> ' + escapeHtml(app.name || 'App');
+      '<span style="font-size:1.3rem">' + escapeHtml(icon) + '</span> ' + escapeHtml(app.name || 'App') +
+      ((canEditAbout && !detailEditingAbout) ? ' <button class="rename-pencil" style="font-size:1rem" title="' + escapeHtml(t('detail.editDetails')) + '" onclick="window._launcher.detailAboutEdit()">✏️</button>' : '');
 
     // ── STATUS ──
     var localBytes = app.blob ? Math.round(app.blob.length * 0.75) : 0; // base64 → bytes approx
@@ -5856,12 +6042,32 @@
       '</div>';
 
     // ── ABOUT ──
+    // The display name + description are editable in place here (inline editor) —
+    // the app's URL is keyed off owner/filename, so a rename never moves the link.
+    // Editing is offered for the owner's own apps (a local record always exists once
+    // the detail view is open); Save PATCHes the server when the app is published.
     var tags = (app.tags && app.tags.length) ? app.tags.join(', ') : '—';
     var cortex = (app.usesCortex && app.usesCortex.length) ? app.usesCortex.join(', ') : '—';
     var created = app.addedAt ? new Date(app.addedAt).toLocaleString() : '—';
-    var aboutHtml =
-      '<div class="dtl-section">' +
-        '<h3>' + t('detail.about') + '</h3>' +
+    var aboutHeader =
+      '<h3 style="display:flex;align-items:center;justify-content:space-between;gap:8px">' +
+        '<span>' + t('detail.about') + '</span>' +
+        ((canEditAbout && !detailEditingAbout) ? '<button class="dtl-btn" onclick="window._launcher.detailAboutEdit()">' + t('detail.editDetails') + '</button>' : '') +
+      '</h3>';
+    var aboutBody;
+    if (detailEditingAbout) {
+      aboutBody =
+        '<label class="dtl-stat-label" for="detail-name-input">' + t('detail.nameLabel') + '</label>' +
+        '<input id="detail-name-input" class="modal-input" maxlength="120" value="' + escapeHtml(app.name || '') + '" style="margin:4px 0 10px" />' +
+        '<label class="dtl-stat-label" for="detail-desc-input">' + t('detail.descLabel') + '</label>' +
+        '<textarea id="detail-desc-input" class="modal-input" rows="3" maxlength="2000" style="margin:4px 0 8px;resize:vertical">' + escapeHtml(app.description || '') + '</textarea>' +
+        '<div class="dtl-sync none" style="margin:0 0 10px">' + t('detail.renameHint') + '</div>' +
+        '<div class="dtl-btn-row">' +
+          '<button class="dtl-btn primary" onclick="window._launcher.detailAboutSave()">' + t('detail.saveDetails') + '</button>' +
+          '<button class="dtl-btn" onclick="window._launcher.detailAboutCancel()">' + t('detail.cancelEdit') + '</button>' +
+        '</div>';
+    } else {
+      aboutBody =
         (app.description ? '<p class="dtl-desc">' + escapeHtml(app.description) + '</p>' : '') +
         '<div class="dtl-meta-grid">' +
           metaItem(t('detail.category'), app.category || 'utility') +
@@ -5871,8 +6077,9 @@
           metaItem(t('detail.size'), app.blob ? fmtSize(localBytes) : '—') +
           metaItem(t('detail.created'), created) +
           metaItem(t('detail.usesCortex'), cortex) +
-        '</div>' +
-      '</div>';
+        '</div>';
+    }
+    var aboutHtml = '<div class="dtl-section">' + aboutHeader + aboutBody + '</div>';
 
     // ── EDIT WITH AI ──
     var aiHtml =
@@ -5933,6 +6140,74 @@
       statusHtml + aboutHtml + aiHtml + versionsHtml + actionsHtml;
   }
 
+  // ── About: inline name + description editing ──────
+  // Edit the display name/description right where they are shown. The URL is keyed
+  // off owner/filename, so this never changes the app link. Save updates the local
+  // record and, when the app is published, PATCHes /v1/apps/:filename in place.
+  function detailAboutEdit() {
+    if (!detailGetApp()) return;
+    detailEditingAbout = true;
+    renderDetailView();
+    var nameEl = document.getElementById('detail-name-input');
+    if (nameEl) { nameEl.focus(); nameEl.select(); }
+  }
+
+  function detailAboutCancel() {
+    detailEditingAbout = false;
+    renderDetailView();
+  }
+
+  function detailAboutSave() {
+    var app = detailGetApp();
+    if (!app) return;
+    var nameEl = document.getElementById('detail-name-input');
+    var descEl = document.getElementById('detail-desc-input');
+    var newName = nameEl ? nameEl.value.trim() : '';
+    var newDesc = descEl ? descEl.value.trim() : '';
+    if (!newName) { alert(t('detail.nameRequired') || 'Name cannot be empty.'); if (nameEl) nameEl.focus(); return; }
+    if (app.published && !newDesc) { alert(t('detail.descRequired') || 'Description cannot be empty.'); if (descEl) descEl.focus(); return; }
+
+    function finishLocal() {
+      app.name = newName;
+      app.description = newDesc;
+      saveApp(app).then(function() {
+        detailEditingAbout = false;
+        renderApps();
+        loadPublishedApps();
+        renderDetailView();
+      });
+    }
+
+    // Not published on the server → it's a local-only record; just persist locally.
+    if (!app.published || !app.publishedFilename) { finishLocal(); return; }
+
+    var token = getCortexOwnerToken();
+    if (!token) { alert(t('common.loginRequired') || 'You must be logged in. Sign in first.'); return; }
+    var config = loadConfig();
+    var aimeatUrl = (config.aimeatUrl || '').replace(/\/+$/, '');
+    var owner = detailServerOwner(app);
+    var filename = app.publishedFilename;
+    fetch(aimeatUrl + '/v1/apps/' + encodeURIComponent(filename), {
+      method: 'PATCH',
+      headers: { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name: newName, description: newDesc })
+    })
+      .then(function(resp) { return resp.json().then(function(j) { return { ok: resp.ok, j: j }; }); })
+      .then(function(res) {
+        if (res.ok && res.j && res.j.ok !== false) {
+          // Keep the cached server manifest in sync so a re-render shows the new name.
+          var key = owner + '\n' + filename;
+          serverAppManifests[key] = serverAppManifests[key] || {};
+          serverAppManifests[key].name = newName;
+          serverAppManifests[key].description = newDesc;
+          finishLocal();
+        } else {
+          alert('Failed: ' + ((res.j && res.j.error && res.j.error.message) || 'Unknown error'));
+        }
+      })
+      .catch(function(err) { alert('Error: ' + (err.message || err)); });
+  }
+
   // Manual override: upload a custom image as this published app's thumbnail. (Bulk auto-capture is
   // the server-side `aimeat screenshot-worker`; the browser can't grab the cross-origin sandboxed app
   // itself, so this is a file picker, not an in-page capture.)
@@ -6066,7 +6341,7 @@
               '<div class="version-meta"><span class="version-num">v' + v.version_number + (isLatest ? ' <span class="version-current">' + t('versions.current') + '</span>' : '') + '</span> ' +
                 '<span class="version-sub" style="color:var(--text-muted);font-size:.8rem">' + (kb ? kb : '') + (when ? ' · ' + when : '') + '</span></div>' +
               '<div class="dtl-btn-row">' +
-                '<button class="dtl-btn" onclick="window._launcher.viewPublished(\'' + escapeHtml(viewU) + '\', \'' + escapeHtml(filename) + '\')">' + t('card.view') + '</button>' +
+                '<button class="dtl-btn" onclick="window._launcher.viewPublished(\'' + escapeHtml(viewU) + '\', \'' + jsArg(filename) + '\')">' + t('card.view') + '</button>' +
                 (isLatest ? '' : '<button class="dtl-btn" onclick="window._launcher.restoreVersion(' + ownerArg + ', ' + fileArg + ', ' + v.version_number + ')">' + t('card.restore') + '</button>') +
                 '<button class="dtl-btn" onclick="window._launcher.forkVersion(' + ownerArg + ', ' + fileArg + ', ' + v.version_number + ')">' + t('card.fork') + '</button>' +
               '</div>' +
@@ -6144,8 +6419,7 @@
       body: JSON.stringify({
         prompt: userPrompt,
         systemPrompt: systemPrompt,
-        app_id: 'app-catalog',
-        max_tokens: 16000
+        app_id: 'app-catalog'
       })
     })
       .then(function(resp) { return resp.json(); })
@@ -6352,7 +6626,7 @@
                 '<span class="version-sub">' + escapeHtml(v.version || '') + (kb ? ' · ' + kb : '') + (when ? ' · ' + when : '') + '</span>' +
               '</div>' +
               '<div class="version-actions">' +
-                '<button onclick="window._launcher.viewPublished(\'' + escapeHtml(viewU) + '\', \'' + escapeHtml(filename) + '\')">' + t('card.view') + '</button>' +
+                '<button onclick="window._launcher.viewPublished(\'' + escapeHtml(viewU) + '\', \'' + jsArg(filename) + '\')">' + t('card.view') + '</button>' +
                 (isLatest ? '' : '<button onclick="window._launcher.restoreVersion(' + ownerArg + ', ' + fileArg + ', ' + v.version_number + ')" title="Re-publish this version as the new latest">' + t('card.restore') + '</button>') +
                 '<button onclick="window._launcher.forkVersion(' + ownerArg + ', ' + fileArg + ', ' + v.version_number + ')" title="Copy this version into a new app">' + t('card.fork') + '</button>' +
               '</div>' +
@@ -6807,26 +7081,32 @@
     pbSourceApp = app || null;
     var overlay = document.getElementById('prompt-builder-overlay');
     var desc = document.getElementById('pb-description');
-    var extCheckbox = document.getElementById('pb-ext-checkbox');
-    var extList = document.getElementById('pb-ext-list');
 
     // Reset state
     desc.value = '';
-    extCheckbox.checked = false;
-    extList.classList.remove('open');
+    window.pbTemplate = null;
+    var tplSel0 = document.getElementById('pb-template');
+    if (tplSel0) tplSel0.value = '';
 
-    // Set mode based on whether we have a source app
+    // Mode is implicit: "improve" when opened from an app, else "new". The radios
+    // stay in the DOM (hidden) so buildPromptFromBuilder reads the right mode; instead
+    // of a confusing toggle we show a plain "Improving: <name>" note when relevant.
     var radios = document.querySelectorAll('input[name="pb-mode"]');
+    var improving = document.getElementById('pb-improving');
     if (pbSourceApp) {
-      radios[1].checked = true; // Improve This App
-      desc.placeholder = 'Describe what changes to make to "' + (pbSourceApp.name || 'this app') + '"...';
+      radios[1].checked = true;
+      if (improving) {
+        improving.textContent = '✏️ ' + (t('pb.improving') || 'Improving') + ': ' + (pbSourceApp.name || pbSourceApp.filename || 'this app');
+        improving.style.display = '';
+      }
     } else {
-      radios[0].checked = true; // New App
-      desc.placeholder = 'Describe what the app should do...';
+      radios[0].checked = true;
+      if (improving) improving.style.display = 'none';
     }
+    desc.placeholder = t('pb.descPh');
 
-    // Load Cortex extensions into picker
-    loadPbExtensions();
+    // Load authoring templates (booster-kit) into the "Start from a template" picker
+    loadPbTemplates();
 
     overlay.style.display = 'flex';
     desc.focus();
@@ -6838,6 +7118,43 @@
     pbSourceApp = null;
   }
 
+  // Booster-kit: populate the "Start from a template" picker from /v1/app-templates and, on
+  // selection, fetch that template's content into window.pbTemplate (injected by buildPromptFromBuilder).
+  function loadPbTemplates() {
+    var sel = document.getElementById('pb-template');
+    if (!sel) return;
+    var config = loadConfig();
+    if (!config.aimeatUrl) return;
+    var base = config.aimeatUrl.replace(/\/+$/, '');
+    fetch(base + '/v1/app-templates?lang=' + encodeURIComponent(currentLang))
+      .then(function (r) { return r.json(); })
+      .then(function (d) {
+        // Starting points only: full use-case scaffolds first, then blank app-shells (not components).
+        var list = ((d.data && d.data.templates) || []).filter(function (t) { return t.kind !== 'component'; });
+        list.sort(function (a, b) { return (a.kind === 'use-case' ? 0 : 1) - (b.kind === 'use-case' ? 0 : 1); });
+        sel.innerHTML = '<option value="">' + t('pb.noneTemplate') + '</option>';
+        list.forEach(function (t) {
+          var o = document.createElement('option');
+          o.value = t.id;
+          var prefix = t.kind === 'use-case' ? '★ ' : '';
+          // Use-case titles are short ("Marketplace") so append a snippet of their description;
+          // app-shell titles are now self-describing ("Standard app — login + saves your data"),
+          // so don't tack on a second em-dash clause.
+          o.textContent = prefix + t.title + (t.kind === 'use-case' && t.description ? ' — ' + t.description.slice(0, 70) : '');
+          sel.appendChild(o);
+        });
+        sel.onchange = function () {
+          var id = sel.value;
+          if (!id) { window.pbTemplate = null; updatePbPreview(); return; }
+          fetch(base + '/v1/app-templates/' + encodeURIComponent(id))
+            .then(function (r) { return r.json(); })
+            .then(function (d2) { window.pbTemplate = (d2.data && d2.data.template) || null; updatePbPreview(); })
+            .catch(function () { window.pbTemplate = null; });
+        };
+      })
+      .catch(function () { /* templates are optional */ });
+  }
+
   function loadPbExtensions() {
     var list = document.getElementById('pb-ext-list');
     var config = loadConfig();
@@ -6963,10 +7280,15 @@
     var nodeUrl = config.aimeatUrl ? config.aimeatUrl.replace(/\/+$/, '') : 'https://your-aimeat-node.example';
     var mode = document.querySelector('input[name="pb-mode"]:checked').value;
     var description = document.getElementById('pb-description').value.trim();
-    var selectedExts = document.getElementById('pb-ext-checkbox').checked ? getSelectedExtensions() : [];
 
     var prompt = '';
 
+    // Converse + build the UI in the language the user is browsing in (the build
+    // instructions below stay in English, but the conversation + app text should match).
+    var PB_LANGS = { en: 'English', fi: 'Finnish (Suomi)' };
+    var pbLang = PB_LANGS[currentLang] || 'English';
+    prompt += 'Language: talk to me and write ALL user-facing text (UI labels, buttons, messages) in ' + pbLang + '. These build instructions are in English, but converse with me and build the app interface in ' + pbLang + '.\n\n';
+
     // Header
     var isImprove = (mode === 'improve' && pbSourceApp);
     if (isImprove) {
@@ -7008,59 +7330,40 @@
     prompt += 'Media & misc:\n';
     prompt += '- aimeat-audio.js — audio engine: instruments, synth, soundboard\n';
     prompt += '- aimeat-speech.js — text-to-speech / speech helpers\n';
+    prompt += '- aimeat-markdown.js — render safe markdown to HTML (`AIMEAT.md.render`)\n';
     prompt += '- aimeat-header.js — drop-in canonical site header (nav + theme)\n';
     prompt += '- aimeat-tunnel.js — personal-node tunnel client (advanced)\n\n';
 
-    // Cortex extension instructions
-    if (selectedExts.length > 0) {
-      prompt += '### Cortex Extensions (include these)\n\n';
-      selectedExts.forEach(function(ext) {
-        prompt += '#### ' + ext.name + '\n';
-        prompt += ext.description ? ext.description + '\n' : '';
-
-        // Use detailed components if available
-        var comps = ext.components;
-        if (comps && comps.length) {
-          comps.forEach(function(c) {
-            if (c.type === 'lib' && c.filename) {
-              prompt += 'Load the library:\n```html\n';
-              prompt += '<script src="' + nodeUrl + '/v1/cortex/' + encodeURIComponent(ext.name) + '/libs/' + encodeURIComponent(c.filename) + '"></' + 'script>\n';
-              prompt += '```\n';
-              if (c.api_surface) {
-                prompt += 'API Surface:\n```\n' + c.api_surface + '\n```\n';
-              }
-            } else if (c.type === 'schema') {
-              prompt += 'Data schema: `' + (c.key_pattern || '') + '` — data is validated automatically.\n';
-            } else if (c.type === 'prompt') {
-              prompt += 'Prompt template: ' + (c.name || '') + '\n';
-            }
-          });
-        } else {
-          // Fallback: only list-level type info
-          var types = ext.component_types || [];
-          if (types.indexOf('lib') !== -1) {
-            prompt += 'Includes a JS library (load via `<script src="' + nodeUrl + '/v1/cortex/' + encodeURIComponent(ext.name) + '/libs/...">`).\n';
-          }
-          if (types.indexOf('schema') !== -1) {
-            prompt += 'Provides validated data schemas.\n';
-          }
-          if (types.indexOf('prompt') !== -1) {
-            prompt += 'Includes prompt templates.\n';
-          }
-        }
-        prompt += '\n';
-      });
-    }
+    // Ready-made UI building blocks (node-bundled cortex) — ALWAYS offered so the AI can
+    // reach for them instead of hand-rolling tables/forms/charts. Load only what's used.
+    prompt += 'Ready-made UI (node-bundled — load from ' + nodeUrl + '/v1/cortex/<name>/libs/<name>.js, use only what you need):\n';
+    prompt += '- aimeat-ui-viewers — sortable/filterable DataTable + viewers (`AIMEAT.ui.viewers`)\n';
+    prompt += '- aimeat-ui-forms — form builder with validation (`AIMEAT.ui.forms`)\n';
+    prompt += '- aimeat-ui-layout — responsive layout helpers, master/detail (`AIMEAT.ui.layout`)\n';
+    prompt += '- aimeat-ui-nav — navbars, tabs, menus (`AIMEAT.ui.nav`)\n';
+    prompt += '- aimeat-ui-dialogs — modals, toasts, confirms (`AIMEAT.ui.dialogs`)\n';
+    prompt += '- aimeat-charts — charts / graphs (`AIMEAT.charts`)\n';
+    prompt += '- aimeat-canvas — drawing / freeform canvas (`AIMEAT.canvas`)\n';
+    prompt += 'Example: <script src="' + nodeUrl + '/v1/cortex/aimeat-ui-viewers/libs/aimeat-ui-viewers.js"></' + 'script>\n\n';
 
     // Auth pattern
     prompt += '### Auth Pattern\n';
+    prompt += 'Handle BOTH login paths: a fresh sign-in click (the onLogin callback) AND a page that loads already signed in (restore the session yourself). `onLogin` fires ONLY on a fresh sign-in — it does NOT fire on reload when a session already exists, so a page that relies on onLogin alone shows nothing to an already-logged-in returning user.\n';
     prompt += '```html\n';
     prompt += '<script src="' + nodeUrl + '/v1/libs/aimeat-auth.js"></' + 'script>\n';
     prompt += '<script>\n';
+    prompt += 'function showApp(session) { /* session.owner, session.jwt, session.fetch() */ }\n';
+    prompt += 'function hideApp() { /* hide content, show a "Sign in" message */ }\n';
+    prompt += '\n';
+    prompt += '// Path 1 — fresh sign-in / sign-out via the login button:\n';
     prompt += 'AIMEAT.auth.mountLoginButton("#login", {\n';
-    prompt += '  onLogin: function(session) { /* session.owner, session.jwt, session.fetch() */ },\n';
-    prompt += '  onLogout: function() { /* hide content */ }\n';
+    prompt += '  onLogin: showApp,   // fires ONLY on a fresh sign-in click, NOT on reload\n';
+    prompt += '  onLogout: hideApp\n';
     prompt += '});\n';
+    prompt += '\n';
+    prompt += '// Path 2 — already signed in when the page loads. Restore the stored session\n';
+    prompt += '// explicitly; login() returns the session (or null if not signed in).\n';
+    prompt += 'AIMEAT.auth.login().then(function (session) { if (session) showApp(session); });\n';
     prompt += '</' + 'script>\n';
     prompt += '```\n\n';
 
@@ -7110,11 +7413,15 @@
 
     // Design guidelines
     prompt += '### Design Guidelines\n';
-    prompt += 'Use CSS variables so the app themes cleanly. Support light AND dark:\n';
+    prompt += 'Use CSS variables so the app themes cleanly, and RESPECT the user\'s AIMEAT theme: the light/dark choice they made in the AIMEAT pill is saved in localStorage "aimeat-theme" ("light"|"dark"). Define light as the default and dark under [data-theme="dark"], then set that attribute from the saved choice on load (fall back to the OS preference, and live-update if it changes):\n';
     prompt += '```css\n';
     prompt += ':root { --bg:#fafaf8; --card:#fff; --text:#1a1a2e; --accent:#e8564a; --border:#e5e7eb; --radius:12px; }\n';
-    prompt += '@media (prefers-color-scheme: dark) {\n';
-    prompt += '  :root { --bg:#14141c; --card:#1e1e2a; --text:#ececf4; --border:#2e2e40; } }\n';
+    prompt += ':root[data-theme="dark"] { --bg:#14141c; --card:#1e1e2a; --text:#ececf4; --border:#2e2e40; }\n';
+    prompt += '```\n';
+    prompt += '```js\n';
+    prompt += '(function(){ function apply(t){ document.documentElement.setAttribute("data-theme", t==="dark"?"dark":"light"); }\n';
+    prompt += '  apply(localStorage.getItem("aimeat-theme") || (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"));\n';
+    prompt += '  addEventListener("storage", function(e){ if(e.key==="aimeat-theme" && e.newValue) apply(e.newValue); }); })();\n';
     prompt += '```\n';
     prompt += 'Always include <meta name="viewport" content="width=device-width, initial-scale=1.0">. Mobile-first, single self-contained HTML file with embedded CSS + JS.\n\n';
 
@@ -7125,15 +7432,31 @@
     prompt += '- Keep it as a single self-contained HTML file\n';
     prompt += '- Load only the libraries you actually use; load aimeat-auth before libs that need a session\n';
     prompt += '- Gate AI features on AIMEAT.ai.isAvailable() and handle the logged-out / no-key case\n';
-    prompt += '- Theme with CSS variables and support both light and dark\n';
+    prompt += '- Theme with CSS variables; respect the user\'s AIMEAT light/dark choice (localStorage "aimeat-theme") with an OS-preference fallback\n';
     prompt += '- Include error handling and loading states for API calls\n\n';
 
+    // After-build: have the AI walk me through publishing — closes the loop for newcomers.
+    if (!isImprove) {
+      prompt += '## When the app is ready — tell me how to publish it\n';
+      prompt += 'After you hand me the finished single HTML file, END your reply by telling me (in my language) to do exactly this:\n';
+      prompt += '1. Open ' + nodeUrl + '/app-catalog.html\n';
+      prompt += '2. Click "+ Add" → open the "Paste" tab → paste the HTML (or drop it as a file). The app name + description fill in automatically.\n';
+      prompt += '3. Click Publish.\n';
+      prompt += 'I will be asked to sign in first — it is fast: one click with Google, or a quick email + password, and a brand-new account is created right there in seconds.\n';
+      prompt += 'What I get: once published, the app is LIVE on my own AIMEAT node and PUBLIC — anyone can find it in the community catalogue and use it, and I get a link to share. From my catalogue I can launch it, publish updates (older versions are always kept), park it (hide it from the public), or delete it. It keeps working with my AIMEAT login, saved data, files, AI and realtime features.\n\n';
+    }
+
     // Source code for improve mode
     if (mode === 'improve' && pbSourceApp && pbSourceApp.blob) {
       var source = decodeURIComponent(escape(atob(pbSourceApp.blob)));
       prompt += '--- Source Code ---\n' + source;
     }
 
+    // Booster-kit: if the user picked a starting template, hand the AI the skeleton to copy from.
+    if (window.pbTemplate && window.pbTemplate.content) {
+      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';
+    }
+
     return prompt;
   }
 
@@ -7265,6 +7588,10 @@
     unpublishApp: unpublishApp,
     deleteServerApp: deleteServerApp,
     toggleParkApp: toggleParkApp,
+    detailAboutEdit: detailAboutEdit,
+    detailAboutCancel: detailAboutCancel,
+    detailAboutSave: detailAboutSave,
+    editAppDetails: editAppDetails,
     showSubdomainModal: showSubdomainModal,
     openConsents: openConsents,
     closeConsents: closeConsents,
@@ -7377,8 +7704,9 @@
     });
 
     // ── Add App button ──────────────────────────────
+    // Step 0: not signed in → open the sign-in/register dialog first, then the Add dialog.
     document.getElementById('add-btn').addEventListener('click', function () {
-      showModal();
+      requireSignInThen(showModal);
     });
 
     // ── Generate with AI button ─────────────────────
@@ -7497,6 +7825,19 @@
     var fileInput = document.getElementById('file-input');
     var browseBtn = document.getElementById('browse-btn');
 
+    // Auto-fill the app name from pasted code (AIMEAT manifest / <title>) when the
+    // name field is still empty — the description rides along into the publish step.
+    var pasteArea = document.getElementById('app-paste-code');
+    if (pasteArea) {
+      pasteArea.addEventListener('input', function () {
+        var nameInput = document.getElementById('app-name');
+        if (nameInput && !nameInput.value.trim()) {
+          var meta = parseAppMeta(pasteArea.value);
+          if (meta.name) nameInput.value = meta.name;
+        }
+      });
+    }
+
     dropZone.addEventListener('dragover', function (e) {
       e.preventDefault();
       e.stopPropagation();
@@ -7700,13 +8041,15 @@
         'Media & misc: aimeat-audio.js, aimeat-speech.js, aimeat-header.js, aimeat-tunnel.js.\n' +
         'Real-time multiplayer: no lib — POST/GET ' + nodeUrl + '/v1/realtime/rooms then WebSocket /v1/realtime/ws?room=ID (ICE config at /v1/realtime/ice-servers).\n\n' +
         '### Auth Pattern\n' +
+        'Handle BOTH login paths: a fresh sign-in click (onLogin) AND a page that loads already signed in (restore the session yourself). `onLogin` fires ONLY on a fresh sign-in — NOT on reload when a session already exists.\n' +
         '```html\n' +
         '<script src="' + nodeUrl + '/v1/libs/aimeat-auth.js"></' + 'script>\n' +
         '<script>\n' +
-        'AIMEAT.auth.mountLoginButton("#login", {\n' +
-        '  onLogin: function(session) { /* session.owner, session.jwt, session.fetch() */ },\n' +
-        '  onLogout: function() { /* hide content */ }\n' +
-        '});\n' +
+        'function showApp(session) { /* session.owner, session.jwt, session.fetch() */ }\n' +
+        'function hideApp() { /* hide content, show a "Sign in" message */ }\n' +
+        'AIMEAT.auth.mountLoginButton("#login", { onLogin: showApp, onLogout: hideApp });\n' +
+        '// Already signed in on load? onLogin will NOT fire — restore the session yourself:\n' +
+        'AIMEAT.auth.login().then(function (session) { if (session) showApp(session); });\n' +
         '</' + 'script>\n' +
         '```\n\n' +
         '### Data Storage\n' +
@@ -7738,11 +8081,15 @@
         'Notifications, Drag & Drop, Clipboard, Speech API, Fullscreen, Web Workers,\n' +
         'CSS Animations, SVG, Gamepad API, Share API.\n\n' +
         '### Design Guidelines\n' +
-        'Use CSS variables and support light AND dark:\n' +
+        'Use CSS variables and RESPECT the user\'s AIMEAT theme: their light/dark choice from the AIMEAT pill is saved in localStorage "aimeat-theme" ("light"|"dark"). Light is the default; dark lives under [data-theme="dark"]; set that attribute from the saved choice on load (OS preference as fallback, live-update on change):\n' +
         '```css\n' +
         ':root { --bg:#fafaf8; --card:#fff; --text:#1a1a2e; --accent:#e8564a; --border:#e5e7eb; --radius:12px; }\n' +
-        '@media (prefers-color-scheme: dark) {\n' +
-        '  :root { --bg:#14141c; --card:#1e1e2a; --text:#ececf4; --border:#2e2e40; } }\n' +
+        ':root[data-theme="dark"] { --bg:#14141c; --card:#1e1e2a; --text:#ececf4; --border:#2e2e40; }\n' +
+        '```\n' +
+        '```js\n' +
+        '(function(){ function apply(t){ document.documentElement.setAttribute("data-theme", t==="dark"?"dark":"light"); }\n' +
+        '  apply(localStorage.getItem("aimeat-theme") || (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"));\n' +
+        '  addEventListener("storage", function(e){ if(e.key==="aimeat-theme" && e.newValue) apply(e.newValue); }); })();\n' +
         '```\n' +
         'Always include: <meta name="viewport" content="width=device-width, initial-scale=1.0">\n' +
         'Mobile-first responsive. Single HTML file with embedded CSS and JS.\n\n' +
@@ -7751,7 +8098,7 @@
         '- Never use literal closing script tags in JS comments or strings (breaks HTML parser)\n' +
         '- Keep it as a single self-contained HTML file\n' +
         '- Gate AI features on AIMEAT.ai.isAvailable(); never hardcode an API key\n' +
-        '- Theme with CSS variables; support light and dark\n' +
+        '- Theme with CSS variables; respect the user\'s AIMEAT light/dark choice (localStorage "aimeat-theme") with an OS-preference fallback\n' +
         '- Include error handling and loading states for API calls\n\n' +
         '--- Source Code ---\n' + code;
     }
@@ -7850,11 +8197,10 @@
     document.getElementById('pb-copy-btn').addEventListener('click', function() {
       var prompt = buildPromptFromBuilder();
       var btn = this;
+      // Keep the dialog OPEN after copying so the user can read Step 3 (add & publish).
+      var revert = function () { setTimeout(function () { btn.textContent = t('pb.copy'); }, 1400); };
       if (navigator.clipboard && navigator.clipboard.writeText) {
-        navigator.clipboard.writeText(prompt).then(function() {
-          btn.textContent = 'Copied!';
-          setTimeout(function() { btn.textContent = 'Copy Prompt'; closePbPanel(); }, 1200);
-        });
+        navigator.clipboard.writeText(prompt).then(function() { btn.textContent = '✔ ' + (t('pb.copied') || 'Copied!'); revert(); });
       } else {
         var ta = document.createElement('textarea');
         ta.value = prompt;
@@ -7862,26 +8208,27 @@
         ta.select();
         document.execCommand('copy');
         document.body.removeChild(ta);
-        btn.textContent = 'Copied!';
-        setTimeout(function() { btn.textContent = 'Copy Prompt'; closePbPanel(); }, 1200);
+        btn.textContent = '✔ ' + (t('pb.copied') || 'Copied!');
+        revert();
       }
     });
 
-    document.getElementById('pb-ext-checkbox').addEventListener('change', function() {
-      document.getElementById('pb-ext-list').classList.toggle('open', this.checked);
-      updatePbPreview();
+    // Step 3 — close the prompt builder and open the Add App flow on the PASTE tab
+    // (the AI hands back ready-to-paste code; the File tab is right there for a file).
+    document.getElementById('pb-add-btn').addEventListener('click', function() {
+      // Step 0 (sign-in/register) if needed, then open Add on the Paste tab.
+      requireSignInThen(function () {
+        closePbPanel();
+        showModal();
+        try { switchTab('paste'); } catch (e) { /* tab switch is best-effort */ }
+      });
     });
 
+    // Mode radios are hidden (mode is implicit) and the cortex-extensions toggle was
+    // removed — the helpful aimeat-* cortex UI libs are now always documented in the
+    // prompt. Keep the mode radios in sync only for buildPromptFromBuilder's state.
     document.querySelectorAll('input[name="pb-mode"]').forEach(function(radio) {
-      radio.addEventListener('change', function() {
-        var desc = document.getElementById('pb-description');
-        if (this.value === 'improve' && pbSourceApp) {
-          desc.placeholder = 'Describe what changes to make to "' + (pbSourceApp.name || 'this app') + '"...';
-        } else {
-          desc.placeholder = 'Describe what the app should do...';
-        }
-        updatePbPreview();
-      });
+      radio.addEventListener('change', updatePbPreview);
     });
 
     document.getElementById('pb-description').addEventListener('input', updatePbPreview);