[object Object]

← back to Marketing Command Center

Board: show format + song chips on staged social cards

55e8f269a8aaf9e1729ceefdf1b8a7688beb2257 · 2026-08-25 11:35:50 -0700 · Steve

Close the create-flow loop — a post composed as a Reel with a song now shows its
🎬 Reel / 📱 Post / 📖 Story / 🎠 Carousel format + 🎵 song as chips on the Streams
Pipeline, so 'assemble → stage → review' is visible instead of the recipe vanishing
into the outbox JSON. Reads the format/song the composer now persists on each
outbox entry; additive (cards without them are unchanged).

Verified: staged reel+song → board shows 🎬 Reel + 🎵 song chips; no page errors.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files touched

Diff

commit 55e8f269a8aaf9e1729ceefdf1b8a7688beb2257
Author: Steve <steve@designerwallcoverings.com>
Date:   Tue Aug 25 11:35:50 2026 -0700

    Board: show format + song chips on staged social cards
    
    Close the create-flow loop — a post composed as a Reel with a song now shows its
    🎬 Reel / 📱 Post / 📖 Story / 🎠 Carousel format + 🎵 song as chips on the Streams
    Pipeline, so 'assemble → stage → review' is visible instead of the recipe vanishing
    into the outbox JSON. Reads the format/song the composer now persists on each
    outbox entry; additive (cards without them are unchanged).
    
    Verified: staged reel+song → board shows 🎬 Reel + 🎵 song chips; no page errors.
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 public/panels/board.html |  2 ++
 public/panels/board.js   | 15 +++++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/public/panels/board.html b/public/panels/board.html
index d94723a..fb2d801 100644
--- a/public/panels/board.html
+++ b/public/panels/board.html
@@ -47,6 +47,8 @@
   .bd-pill.soon{background:#f5efe2;color:#8a6a2a}
   .bd-body{padding:10px;overflow-y:auto;display:flex;flex-direction:column;gap:9px;flex:1}
   .bd-card{border:1px solid var(--line,#ece6da);border-radius:10px;padding:9px 10px;background:#fdfcf9}
+  .bd-chips{display:flex;flex-wrap:wrap;gap:4px;margin:5px 0}
+  .bd-chip{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:999px;background:#f2ede1;color:#6b5f45;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
   .bd-card .when{font-size:10.5px;color:var(--mut,#8a8170);margin-bottom:4px}
   .bd-card .txt{font-size:12.5px;color:var(--ink,#2a2620);line-height:1.4;word-break:break-word}
   .bd-card .media{margin-top:7px;width:100%;height:120px;object-fit:cover;border-radius:7px;display:block;background:#f0ece3}
diff --git a/public/panels/board.js b/public/panels/board.js
index fa092d2..5e7d440 100644
--- a/public/panels/board.js
+++ b/public/panels/board.js
@@ -146,11 +146,22 @@ window.MCC_PANELS['board'] = {
       return 'pending';
     }
 
-    function cardHTML({ when, text, media, status, metric }) {
+    // Format decision + attached song, surfaced from a composer-staged post so the
+    // "assemble → stage → review" loop is visible on the board.
+    const FMT_BADGE = { reel: '🎬 Reel', post: '📱 Post', story: '📖 Story', carousel: '🎠 Carousel' };
+    function cardBadges(it) {
+      if (!it) return '';
+      const chips = [];
+      if (it.format && FMT_BADGE[it.format]) chips.push(`<span class="bd-chip">${FMT_BADGE[it.format]}</span>`);
+      if (it.song && it.song.name) chips.push(`<span class="bd-chip" title="${esc(it.song.name)}">🎵 ${esc(String(it.song.name).slice(0, 22))}</span>`);
+      return chips.length ? `<div class="bd-chips">${chips.join('')}</div>` : '';
+    }
+    function cardHTML({ when, text, media, status, metric, badges }) {
       const w = fmtWhen(when);
       return `<div class="bd-card">
         ${w ? `<div class="when" title="${esc(when)}">🕓 ${esc(w)}</div>` : ''}
         <div class="txt">${esc((text || '').slice(0, 220)) || '<span class="bd-metric">(no text)</span>'}</div>
+        ${badges || ''}
         ${media ? `<img class="media" src="${esc(media)}" loading="lazy" onerror="this.onerror=null;this.classList.add('media-missing');this.src='data:image/svg+xml;utf8,${PLACEHOLDER_SVG}'">` : ''}
         <div class="foot">
           ${metric ? `<span class="bd-metric">${esc(metric)}</span>` : '<span></span>'}
@@ -213,7 +224,7 @@ window.MCC_PANELS['board'] = {
       else if (pf) pill = { cls: 'stage', txt: 'Stages (not connected)' };
       else pill = { cls: 'off', txt: 'Not connected' };
       const body = items.length
-        ? items.map(it => cardHTML({ when: it.at, text: it.caption, media: it.mediaUrl, status: it.status })).join('')
+        ? items.map(it => cardHTML({ when: it.at, text: it.caption, media: it.mediaUrl, status: it.status, badges: cardBadges(it) })).join('')
         : `<div class="bd-empty">Nothing queued for ${esc(label)}.</div>`;
       return { pill, count: items.length, body, label };
     }

← 81fe0b8 auto-data-snapshot: 2026-08-25T11:28:19 (2 data files) — dat  ·  back to Marketing Command Center  ·  auto-data-snapshot: 2026-08-25T12:06:42 (1 data files) — pub 2302081 →