From 840084fbb00dbdc0527a630c369ff8e44f1fc7d4 Mon Sep 17 00:00:00 2001
From: Tyler Koenig <tyler@lerkolabs.com>
Date: Sun, 17 May 2026 11:05:10 -0400
Subject: [PATCH] fix(ui): render full card content in mobile inline expansion

Promoted cards now show decision/steps/link/body sections in inline
detail instead of just a body preview. Fullscreen removes line clamp.
---
 web/app.js    | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 web/style.css |  3 ++-
 2 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/web/app.js b/web/app.js
index 9d63a27..dfaa3bb 100644
--- a/web/app.js
+++ b/web/app.js
@@ -664,12 +664,65 @@
       actions += `<button class="action-btn primary" onclick="event.stopPropagation();nibApp.showPromote('${e.id}')">promote</button>`;
     }
     if (e.card_type) {
+      actions += `<button class="action-btn primary" onclick="event.stopPropagation();nibApp.copyEntity('${e.id}')">copy</button>`;
       actions += `<button class="action-btn danger" onclick="event.stopPropagation();nibApp.demoteEntity('${e.id}')">demote</button>`;
     } else {
       actions += `<button class="action-btn danger" onclick="event.stopPropagation();nibApp.deleteEntity('${e.id}')">delete</button>`;
     }
+
+    let content = '';
+    if (e.card_type) {
+      const data = e.card_data ? (() => { try { return JSON.parse(e.card_data); } catch { return {}; } })() : {};
+      const hasDecision = data.chose != null;
+      const hasSteps = data.steps && data.steps.length;
+      const hasLink = !!data.url;
+      const hasFill = /\$\{[^}]+\}/.test(e.body || '');
+
+      if (hasDecision) {
+        const rejected = (data.rejected || []).map(r => `<span class="peek-dec-rej">${escHtml(r)}</span>`).join('');
+        content += `<div class="peek-sec">
+          <div class="peek-sec-lbl">decision<span class="peek-sec-status">${data.status || 'decided'}</span></div>
+          <div class="peek-sec-inner peek-decision">
+            <div class="peek-dec-choice">${escHtml(data.chose)}</div>
+            <div class="peek-dec-why"><span class="peek-dec-key">why</span>${escHtml(data.why || '')}</div>
+            ${rejected ? `<div><span class="peek-dec-key">considered</span><div class="peek-dec-rejected">${rejected}</div></div>` : ''}
+          </div>
+        </div>`;
+      }
+      if (hasLink && !hasDecision) {
+        content += `<div class="peek-sec">
+          <div class="peek-sec-lbl">link</div>
+          <div class="peek-sec-inner"><div class="peek-link-url">↗ ${escHtml(data.url)}</div></div>
+        </div>`;
+      }
+      if (hasSteps) {
+        const steps = data.steps.map(s => `<div class="peek-step"><span class="peek-step-mark" style="color:var(--dim)">○</span><span class="peek-step-text">${escHtml(s.text || s)}</span></div>`).join('');
+        content += `<div class="peek-sec">
+          <div class="peek-sec-lbl">steps · ${data.steps.length}<button class="peek-sec-run" onclick="event.stopPropagation();nibApp.enterMode('run')">▶ run</button></div>
+          <div class="peek-sec-inner"><div class="peek-steps">${steps}</div></div>
+        </div>`;
+        actions += `<button class="action-btn" onclick="event.stopPropagation();nibApp.enterMode('run')">run</button>`;
+      }
+      if (hasFill) {
+        actions += `<button class="action-btn" onclick="event.stopPropagation();nibApp.enterMode('fill')">fill</button>`;
+      }
+      if (!hasDecision && e.body) {
+        const lang = data.lang || '';
+        const isCode = lang || e.card_type === 'snippet';
+        const bodyHtml = isCode
+          ? `<div class="peek-code"><pre><code>${escHtml(e.body)}</code></pre></div>`
+          : `<div class="exp-body md">${renderMd(e.body)}</div>`;
+        content += `<div class="peek-sec">
+          <div class="peek-sec-lbl">content${lang ? `<span class="peek-sec-lang">${lang}</span>` : ''}</div>
+          <div class="peek-sec-inner">${bodyHtml}</div>
+        </div>`;
+      }
+    } else {
+      content = `<div class="exp-body md">${renderMd(e.body || '')}</div>`;
+    }
+
     return `<div class="exp-inner">
-      <div class="exp-body md">${renderMd(e.body || '')}</div>
+      ${content}
       ${tags ? `<div class="exp-tags">${tags}</div>` : ''}
       <div class="exp-acts">${actions}</div>
       <div class="exp-toolbar">
diff --git a/web/style.css b/web/style.css
index 4618915..55df904 100644
--- a/web/style.css
+++ b/web/style.css
@@ -414,7 +414,8 @@ main.focus-peek .resize-handle { visibility: hidden; }
     overflow: hidden;
 }
 
-.entity-item.exp-full .exp-body {
+.entity-item.exp-full .exp-body,
+.card-row.exp-full .exp-body {
     -webkit-line-clamp: unset;
     overflow: visible;
 }