social-autoposter 1.4.0 → 1.5.0

package/bin/server.js

@@ -385,11 +385,19 @@ function getPool() {
   if (_pool) return _pool;
   const dbUrl = getDbUrl();
   if (!dbUrl) return null;
+  // Pool sized for the per-project breakdown load pattern: 8 pg-backed
+  // endpoints (views/upvotes/comments/clicks/posts/bookings/cost + funnel
+  // metadata) firing for 2-3 concurrent projects = ~24 simultaneous queries,
+  // on top of normal page load. max:5 caused ~219k connection timeouts in
+  // skill/logs/launchd-dashboard-stderr.log on 2026-05-19 because every
+  // pg-backed request started failing at the 10s connectionTimeoutMillis cap
+  // (blank Get Started card, empty per-project rows). Neon free tier allows
+  // 100 concurrent connections per project, so 25 is well within budget.
   _pool = new Pool({
     connectionString: dbUrl,
-    max: 5,
+    max: 25,
     idleTimeoutMillis: 30000,
-    connectionTimeoutMillis: 10000,
+    connectionTimeoutMillis: 30000,
   });
   _pool.on('error', (err) => {
     console.error('[pg.Pool] idle client error:', err.message);
@@ -416,9 +424,9 @@ function getBookingsPool() {
   if (!dbUrl) return null;
   _bookingsPool = new Pool({
     connectionString: dbUrl,
-    max: 3,
+    max: 10,
     idleTimeoutMillis: 30000,
-    connectionTimeoutMillis: 10000,
+    connectionTimeoutMillis: 30000,
   });
   _bookingsPool.on('error', (err) => {
     console.error('[bookings pg.Pool] idle client error:', err.message);
@@ -1102,6 +1110,20 @@ function parseTwitterBatchIdMs(batchId) {
   return new Date(`${y}-${mo}-${d}T${hh}:${mm}:${ss}`).getTime();
 }
 
+// Parse a reddit cycle batch_id (`rdcycle-YYYYMMDD-HHMMSS`) into epoch ms.
+// Mirrors parseTwitterBatchIdMs. Used to attribute reddit_candidates +
+// posts back to the cycle that owns them, so styles_used / posted counts
+// reflect THIS run's work, not whatever concurrent reddit cycles posted
+// during the same wall-clock window (the prior window-based approach
+// double-counted styles on overlapping 22-min cycles).
+function parseRedditBatchIdMs(batchId) {
+  if (!batchId) return NaN;
+  const m = batchId.match(/^rdcycle-(\d{4})(\d{2})(\d{2})-(\d{2})(\d{2})(\d{2})$/);
+  if (!m) return NaN;
+  const [, y, mo, d, hh, mm, ss] = m;
+  return new Date(`${y}-${mo}-${d}T${hh}:${mm}:${ss}`).getTime();
+}
+
 async function enrichPostCommentsTwitterRuns(runs) {
   const txRuns = runs.filter(r =>
     r.job_type === 'post-comments' && r.platform_key === 'twitter'
@@ -1142,7 +1164,7 @@ async function enrichPostCommentsTwitterRuns(runs) {
   const candidateRows = await pq(
     "SELECT discovered_at, posted_at, t1_checked_at, drafted_at, " +
     "       (draft_reply_text IS NOT NULL) AS has_draft, status, batch_id, " +
-    "       matched_project " +
+    "       matched_project, tweet_url " +
     "FROM twitter_candidates " +
     "WHERE discovered_at >= $1::timestamp OR posted_at >= $1::timestamp OR t1_checked_at >= $1::timestamp OR status='pending'",
     [since]
@@ -1176,12 +1198,23 @@ async function enrichPostCommentsTwitterRuns(runs) {
     "  )"
   );
   const salvageableNow = (salvageableRow && salvageableRow[0]) ? salvageableRow[0].n : 0;
+  // Bulk-fetch twitter/x posts in window to compute per-run style breakdown.
+  const twitterPostRows = await pq(
+    "SELECT posted_at, thread_url, engagement_style FROM posts " +
+    "WHERE platform IN ('twitter', 'x') AND posted_at >= $1::timestamp AND engagement_style IS NOT NULL",
+    [since]
+  ) || [];
 
   const toMs = (d) => {
     if (!d) return null;
     const dt = d instanceof Date ? d : new Date(d);
     return dt.getTime();
   };
+  const twitterPostNorm = twitterPostRows.map(r => ({
+    postedMs: toMs(r.posted_at),
+    threadUrl: r.thread_url || '',
+    style: r.engagement_style || '',
+  }));
   const searchNorm = searchRows.map(r => ({
     ms: toMs(r.ran_at),
     found: r.tweets_found || 0,
@@ -1207,6 +1240,7 @@ async function enrichPostCommentsTwitterRuns(runs) {
       status: r.status,
       batch_id: r.batch_id || '',
       matched_project: r.matched_project || '',
+      tweet_url: r.tweet_url || '',
     };
   });
 
@@ -1383,6 +1417,30 @@ async function enrichPostCommentsTwitterRuns(runs) {
         }
       }
     }
+    // Style counting: scope to the URLs this batch posted, not the time window.
+    // Time-window approach captured concurrent cycles during long-running cycles.
+    const batchPostedUrls = new Set();
+    for (const c of candNorm) {
+      if (ownBatchId && c.batch_id === ownBatchId && c.status === 'posted' && c.tweet_url) {
+        batchPostedUrls.add(c.tweet_url);
+      }
+    }
+    const stylesMapTx = {};
+    for (const p of twitterPostNorm) {
+      if (!p.threadUrl || !batchPostedUrls.has(p.threadUrl)) continue;
+      stylesMapTx[p.style] = (stylesMapTx[p.style] || 0) + 1;
+    }
+    // Fall back to time-window if batch URL matching found nothing (e.g. old
+    // rows before tweet_url was added to the SELECT, or cycle with no ownBatchId).
+    if (!Object.keys(stylesMapTx).length && !ownBatchId) {
+      for (const p of twitterPostNorm) {
+        if (p.postedMs == null || p.postedMs < startMs || p.postedMs > endMs) continue;
+        stylesMapTx[p.style] = (stylesMapTx[p.style] || 0) + 1;
+      }
+    }
+    const stylesUsedTx = Object.entries(stylesMapTx)
+      .sort(function (a, b) { return b[1] - a[1]; })
+      .map(function (e) { return e[0] + '(' + e[1] + ')'; });
     const prior = run.result || {};
     const priorDiscover = (prior.discover && typeof prior.discover === 'object') ? prior.discover : {};
     run.result = {
@@ -1421,6 +1479,7 @@ async function enrichPostCommentsTwitterRuns(runs) {
       // pill row so the operator can see at a glance which projects consumed
       // the cycle, even when posted=0. Mirrors enrichPostCommentsRedditRuns.
       projects_worked: projectsList,
+      styles_used: stylesUsedTx,
       cost_usd: prior.cost_usd || 0,
       failed: prior.failed || 0,
       failure_reasons: Array.isArray(prior.failure_reasons) ? prior.failure_reasons : [],
@@ -1478,7 +1537,8 @@ async function enrichPostCommentsRedditRuns(runs) {
   const since = new Date(oldestMs - 2 * 60 * 1000).toISOString();
   const candidateRows = await pq(
     "SELECT discovered_at, posted_at, last_attempt_at, t1_checked_at, drafted_at, " +
-    "       attempt_count, (draft_text IS NOT NULL) AS has_draft, status, batch_id " +
+    "       attempt_count, (draft_text IS NOT NULL) AS has_draft, status, batch_id, " +
+    "       post_id " +
     "FROM reddit_candidates " +
     "WHERE discovered_at >= $1::timestamp " +
     "   OR posted_at >= $1::timestamp " +
@@ -1504,12 +1564,26 @@ async function enrichPostCommentsRedditRuns(runs) {
     "  )"
   );
   const salvageableNow = (salvageableRow && salvageableRow[0]) ? salvageableRow[0].n : 0;
+  // Bulk-fetch reddit posts in window to compute per-run style breakdown.
+  // posts.id is included so the enricher can scope styles to "posts whose id
+  // appears as reddit_candidates.post_id for this run's own batch_id",
+  // mirroring the Twitter batch-scoped style attribution.
+  const redditPostRows = await pq(
+    "SELECT id, posted_at, engagement_style FROM posts " +
+    "WHERE platform = 'reddit' AND posted_at >= $1::timestamp AND engagement_style IS NOT NULL",
+    [since]
+  ) || [];
 
   const toMs = (d) => {
     if (!d) return null;
     const dt = d instanceof Date ? d : new Date(d);
     return dt.getTime();
   };
+  const redditPostNorm = redditPostRows.map(r => ({
+    id: r.id,
+    postedMs: toMs(r.posted_at),
+    style: r.engagement_style || '',
+  }));
   // exitMs = the moment the row left 'pending'. Null for rows still pending.
   // posted  -> posted_at
   // failed  -> last_attempt_at  (set by _db_mark_candidate_attempt + html_locked)
@@ -1539,6 +1613,7 @@ async function enrichPostCommentsRedditRuns(runs) {
       exitMs,
       status: r.status,
       batch_id: r.batch_id || '',
+      post_id: r.post_id || null,
     };
   });
   // Filename carries the run start: run-reddit-search-YYYY-MM-DD_HHMMSS.log
@@ -1847,6 +1922,57 @@ async function enrichPostCommentsRedditRuns(runs) {
                        + queueDrainedExpired + queueDrainedSkipped;
 
     const dropped = Math.max(0, raw - passed);
+    // Style counting: scope to the post_ids THIS batch posted, not the time
+    // window. Mirrors the Twitter fix (server.js ~line 1408). Window-based
+    // attribution double-counted styles during long-running cycles because
+    // reddit-search overlaps every 15 min and salvage/discover lanes from
+    // OTHER projects post inside the same wall-clock window.
+    //
+    // Derive ownBatchId by matching rdcycle-YYYYMMDD-HHMMSS to run.started_at
+    // within ±10s. Fall back to the cycle log header `Cycle batch_id=...`
+    // (emitted by run-reddit-search.sh:191) when no candidate batch matches,
+    // so cycles that scored 0 raw → 0 candidates still attribute their styles.
+    let ownBatchId = null;
+    let ownBatchDelta = Infinity;
+    for (const c of candNorm) {
+      if (!c.batch_id) continue;
+      const bms = parseRedditBatchIdMs(c.batch_id);
+      if (!Number.isFinite(bms)) continue;
+      const delta = Math.abs(bms - startMs);
+      if (delta > 10 * 1000) continue;
+      if (delta < ownBatchDelta) { ownBatchDelta = delta; ownBatchId = c.batch_id; }
+    }
+    if (!ownBatchId) {
+      const logHeader = body.match(/Cycle batch_id=(rdcycle-\d{8}-\d{6})/);
+      if (logHeader) ownBatchId = logHeader[1];
+    }
+    // Build a Set of posts.id values that THIS batch's reddit_candidates
+    // rows have stamped as their post_id (the posts row created by
+    // post_reddit.py when status flipped to 'posted').
+    const batchPostedIds = new Set();
+    for (const c of candNorm) {
+      if (ownBatchId && c.batch_id === ownBatchId
+          && c.status === 'posted' && c.post_id != null) {
+        batchPostedIds.add(c.post_id);
+      }
+    }
+    const stylesMapRd = {};
+    for (const p of redditPostNorm) {
+      if (p.id == null || !batchPostedIds.has(p.id)) continue;
+      stylesMapRd[p.style] = (stylesMapRd[p.style] || 0) + 1;
+    }
+    // Fall back to time-window when batch-scoped lookup found nothing AND we
+    // failed to identify ownBatchId (very old rows, or cycle log missing the
+    // header). Preserves visibility for runs with no batch correlation.
+    if (!Object.keys(stylesMapRd).length && !ownBatchId) {
+      for (const p of redditPostNorm) {
+        if (p.postedMs == null || p.postedMs < startMs || p.postedMs > endMs) continue;
+        stylesMapRd[p.style] = (stylesMapRd[p.style] || 0) + 1;
+      }
+    }
+    const stylesUsedRd = Object.entries(stylesMapRd)
+      .sort(function (a, b) { return b[1] - a[1]; })
+      .map(function (e) { return e[0] + '(' + e[1] + ')'; });
     const prior = run.result || {};
     // Trust the per-iter rollup `phase=post posted=N` over the bare POSTED:
     // grep when both exist (POSTED: can fire mid-retry). Fall back to the
@@ -1881,6 +2007,11 @@ async function enrichPostCommentsRedditRuns(runs) {
       // end of the dashboard pill row so the operator can see at a glance which
       // project(s) consumed the cycle (often 2 distinct: salvage lane + discover).
       projects_worked: projectsList,
+      styles_used: stylesUsedRd,
+      // Exposed for parity with Twitter's enricher result; lets the dashboard
+      // (or `/api/...`) show which rdcycle batch this run "owns" for debugging
+      // batch-scoped attribution misses.
+      own_batch_id: ownBatchId,
       // Ripen phase (5-min delta gate, scripts/ripen_reddit_plan.py). Reflects
       // the per-run sum across all iterations that reached the ripen step.
       // ripen_iters counts iterations where the [ripen] summary marker fired
@@ -4155,7 +4286,7 @@ async function handleApi(req, res) {
     // Project is case-sensitive (stored as 'Assrt', 'Cyrano', 'fazm', etc.).
     const rawProject = (url.searchParams.get('project') || '').trim();
     const project = (rawProject === '' || rawProject.toLowerCase() === 'all') ? '' : rawProject;
-    const projectOk = project === '' || /^[A-Za-z0-9_\-]{1,64}$/.test(project);
+    const projectOk = project === '' || /^[A-Za-z0-9_\- ]{1,64}$/.test(project);
     if (!projectOk) return json(res, { error: 'invalid project' }, 400);
     // Non-admin clients can only see projects in their claim. Reject if the
     // requested project isn't allowed, and force-filter the default "all" view.
@@ -4207,18 +4338,23 @@ async function handleApi(req, res) {
           "ELSE COALESCE(upvotes,0) END), 0)::int AS upvotes_discounted, " +
         "COALESCE(SUM(comments_count), 0)::int AS comments, " +
         "COALESCE(SUM(views) FILTER (WHERE LOWER(platform) NOT IN ('moltbook', 'github', 'github_issues')), 0)::int AS views, " +
-        // post_clicks: SUM of post_links.clicks attributable to short links
-        // minted for these posts (post_id-keyed). Reply-keyed clicks are
-        // excluded so we don't double-count engagement on replies that hang
-        // off someone else's thread.
+        // post_clicks: bot-filtered click events from post_link_clicks for
+        // short links minted for these posts (post_id-keyed). Reply-keyed
+        // clicks are excluded so we don't double-count engagement on replies
+        // that hang off someone else's thread. Source matches the picker
+        // (engagement_styles._fetch_style_stats) and top_performers.SCORE_SQL.
         "COALESCE(SUM(pl.total_clicks), 0)::int AS post_clicks, " +
         // Intent dimension (is_recommendation) is independent of tone (engagement_style).
         // This sum tells us "of N posts in this tone, how many carried a project mention".
         "COALESCE(SUM(CASE WHEN is_recommendation THEN 1 ELSE 0 END), 0)::int AS recommendations " +
       "FROM posts " +
       "LEFT JOIN (" +
-        "SELECT post_id, SUM(clicks)::int AS total_clicks " +
-        "FROM post_links WHERE post_id IS NOT NULL GROUP BY post_id" +
+        "SELECT pl2.post_id, COUNT(plc.id)::int AS total_clicks " +
+        "FROM post_links pl2 " +
+        "LEFT JOIN post_link_clicks plc " +
+          "ON plc.code = pl2.code AND plc.is_bot = false " +
+        "WHERE pl2.post_id IS NOT NULL " +
+        "GROUP BY pl2.post_id" +
       ") pl ON pl.post_id = posts.id " +
       "WHERE posted_at >= NOW() - INTERVAL '" + windowHours + " hours' " +
       "AND our_content <> '(mention - no original post)' " +
@@ -4246,9 +4382,10 @@ async function handleApi(req, res) {
   }
 
   // GET /api/cohort/stats - posts bucketed into 4 score cohorts over a trailing window.
-  // Score formula matches top_performers.py SCORE_SQL:
-  //   score = comments_count*3 + upvotes (Reddit/Moltbook: -1 to strip OP self-upvote)
-  // Cohorts: dead=0, low=1-4, mid=5-14, high=15+.
+  // Score formula matches top_performers.py SCORE_SQL and engagement_styles.py picker:
+  //   score = clicks*10 + comments_count*3 + upvotes (Reddit/Moltbook: -1 to strip OP self-upvote)
+  // clicks = COUNT(post_link_clicks WHERE is_bot=false) per post (bot-filtered).
+  // Cohorts: dead=0, low=1-9, mid=10-29, high=30+ (rebucketed for the click-weighted score).
   // Honors the same window/platform/project filters as the rest of the Stats tab.
   if (p === '/api/cohort/stats' && req.method === 'GET') {
     const url = new URL(req.url, 'http://localhost');
@@ -4260,7 +4397,7 @@ async function handleApi(req, res) {
     if (!platformOk) return json(res, { error: 'invalid platform' }, 400);
     const rawProject = (url.searchParams.get('project') || '').trim();
     const project = (rawProject === '' || rawProject.toLowerCase() === 'all') ? '' : rawProject;
-    const projectOk = project === '' || /^[A-Za-z0-9_\-]{1,64}$/.test(project);
+    const projectOk = project === '' || /^[A-Za-z0-9_\- ]{1,64}$/.test(project);
     if (!projectOk) return json(res, { error: 'invalid project' }, 400);
     const cohortPc = auth.projectClause(req.user, 'project_name', project || null);
     if (!cohortPc.ok) return json(res, { windowHours, platform: platform || 'all', project: project || 'all', rows: [], totalPosts: 0 });
@@ -4275,17 +4412,27 @@ async function handleApi(req, res) {
       : '';
     const projectFilter = cohortPc.clause ? cohortPc.clause + ' '
       : (project ? "AND project_name = '" + project.replace(/'/g, "''") + "' " : '');
-    // Score expression (must stay aligned with scripts/top_performers.SCORE_SQL).
+    // Score expression (must stay aligned with scripts/top_performers.SCORE_SQL
+    // and scripts/engagement_styles.py picker). clicks weighted ×10 because a
+    // real human click outvalues 10 likes of vibes. Clicks come from a
+    // bot-filtered subquery against post_link_clicks (matching the picker).
     const scoreExpr =
-      "(COALESCE(comments_count,0) * 3 + " +
+      "(COALESCE(clicks, 0) * 10 + " +
+        "COALESCE(comments_count,0) * 3 + " +
         "CASE WHEN LOWER(platform) IN ('reddit', 'moltbook') " +
           "THEN GREATEST(0, COALESCE(upvotes,0) - 1) " +
           "ELSE COALESCE(upvotes,0) END)";
+    // Cohort bands rescaled for the click-weighted score so most posts don't
+    // collapse into 'high' (a single click already adds 10). Empirically:
+    //   dead = 0   no engagement at all
+    //   low  = 1-9 some upvotes/comments OR no clicks
+    //   mid  = 10-29 a click OR strong comment/upvote
+    //   high = 30+  clicks + discussion combined
     const cohortExpr =
       "CASE " +
         "WHEN " + scoreExpr + " = 0 THEN 'dead' " +
-        "WHEN " + scoreExpr + " BETWEEN 1 AND 4 THEN 'low' " +
-        "WHEN " + scoreExpr + " BETWEEN 5 AND 14 THEN 'mid' " +
+        "WHEN " + scoreExpr + " BETWEEN 1 AND 9 THEN 'low' " +
+        "WHEN " + scoreExpr + " BETWEEN 10 AND 29 THEN 'mid' " +
         "ELSE 'high' END";
     // Views excluded from moltbook/github (no public view counter on those
     // platforms); use FILTER so the views range only reflects platforms that
@@ -4314,11 +4461,20 @@ async function handleApi(req, res) {
         "MAX(COALESCE(views,0)) " + viewsFilter + " AS max_views, " +
         "(AVG(COALESCE(views,0)) " + viewsFilter + ")::numeric(10,0) AS avg_views " +
       "FROM (" +
-        "SELECT platform, " + upvotesNetExpr + " AS upvotes_net, " +
+        "SELECT posts.platform, " + upvotesNetExpr + " AS upvotes_net, " +
+          "COALESCE(pl.total_clicks, 0) AS clicks, " +
           "comments_count, views, " +
           scoreExpr + " AS score, " +
           cohortExpr + " AS cohort " +
         "FROM posts " +
+        "LEFT JOIN (" +
+          "SELECT pl2.post_id, COUNT(plc.id)::int AS total_clicks " +
+          "FROM post_links pl2 " +
+          "LEFT JOIN post_link_clicks plc " +
+            "ON plc.code = pl2.code AND plc.is_bot = false " +
+          "WHERE pl2.post_id IS NOT NULL " +
+          "GROUP BY pl2.post_id" +
+        ") pl ON pl.post_id = posts.id " +
         "WHERE posted_at >= NOW() - INTERVAL '" + windowHours + " hours' " +
           "AND upvotes IS NOT NULL " +
           "AND our_content <> '(mention - no original post)' " +
@@ -4507,7 +4663,7 @@ async function handleApi(req, res) {
     if (!platformOk) return json(res, { error: 'invalid platform' }, 400);
     const rawProject = (url.searchParams.get('project') || '').trim();
     const project = (rawProject === '' || rawProject.toLowerCase() === 'all') ? '' : rawProject;
-    const projectOk = project === '' || /^[A-Za-z0-9_\-]{1,64}$/.test(project);
+    const projectOk = project === '' || /^[A-Za-z0-9_\- ]{1,64}$/.test(project);
     if (!projectOk) return json(res, { error: 'invalid project' }, 400);
     const cacheKey = days + '|' + platform + '|' + project;
     const cached = cache.get(cacheKey);
@@ -4587,7 +4743,7 @@ async function handleApi(req, res) {
     if (!platformOk) return json(res, { error: 'invalid platform' }, 400);
     const rawProject = (url.searchParams.get('project') || '').trim();
     const project = (rawProject === '' || rawProject.toLowerCase() === 'all') ? '' : rawProject;
-    const projectOk = project === '' || /^[A-Za-z0-9_\-]{1,64}$/.test(project);
+    const projectOk = project === '' || /^[A-Za-z0-9_\- ]{1,64}$/.test(project);
     if (!projectOk) return json(res, { error: 'invalid project' }, 400);
     const cacheKey = days + '|' + platform + '|' + project;
     const cached = clicksPerDayCache.get(cacheKey);
@@ -4639,7 +4795,7 @@ async function handleApi(req, res) {
     if (!platformOk) return json(res, { error: 'invalid platform' }, 400);
     const rawProject = (url.searchParams.get('project') || '').trim();
     const project = (rawProject === '' || rawProject.toLowerCase() === 'all') ? '' : rawProject;
-    const projectOk = project === '' || /^[A-Za-z0-9_\-]{1,64}$/.test(project);
+    const projectOk = project === '' || /^[A-Za-z0-9_\- ]{1,64}$/.test(project);
     if (!projectOk) return json(res, { error: 'invalid project' }, 400);
     const cacheKey = days + '|' + platform + '|' + project;
     const cached = postsPerDayCache.get(cacheKey);
@@ -4690,7 +4846,7 @@ async function handleApi(req, res) {
     const days = Math.max(1, Math.min(365, parseInt(url.searchParams.get('days') || '30', 10) || 30));
     const rawProject = (url.searchParams.get('project') || '').trim();
     const project = (rawProject === '' || rawProject.toLowerCase() === 'all') ? '' : rawProject;
-    const projectOk = project === '' || /^[A-Za-z0-9_\-]{1,64}$/.test(project);
+    const projectOk = project === '' || /^[A-Za-z0-9_\- ]{1,64}$/.test(project);
     if (!projectOk) return json(res, { error: 'invalid project' }, 400);
     const cacheKey = days + '|' + project;
     const cached = bookingsPerDayCache.get(cacheKey);
@@ -4730,7 +4886,7 @@ async function handleApi(req, res) {
     const days = Math.max(1, Math.min(90, parseInt(url.searchParams.get('days') || '30', 10) || 30));
     const rawProject = (url.searchParams.get('project') || '').trim();
     const project = (rawProject === '' || rawProject.toLowerCase() === 'all') ? '' : rawProject;
-    const projectOk = project === '' || /^[A-Za-z0-9_\-]{1,64}$/.test(project);
+    const projectOk = project === '' || /^[A-Za-z0-9_\- ]{1,64}$/.test(project);
     if (!projectOk) return json(res, { error: 'invalid project' }, 400);
     const cacheKey = days + '|' + project;
     const cached = funnelPerDayCache.get(cacheKey);
@@ -4921,7 +5077,7 @@ async function handleApi(req, res) {
     const days = Math.max(1, Math.min(365, parseInt(url.searchParams.get('days') || '30', 10) || 30));
     const rawProject = (url.searchParams.get('project') || '').trim();
     const project = (rawProject === '' || rawProject.toLowerCase() === 'all') ? '' : rawProject;
-    const projectOk = project === '' || /^[A-Za-z0-9_\-]{1,64}$/.test(project);
+    const projectOk = project === '' || /^[A-Za-z0-9_\- ]{1,64}$/.test(project);
     if (!projectOk) return json(res, { error: 'invalid project' }, 400);
     const ALLOWED_COST_PLATFORMS = new Set(['reddit', 'twitter', 'linkedin', 'moltbook', 'github', 'seo', 'email']);
     let rawPlat = String(url.searchParams.get('platform') || '').toLowerCase().trim();
@@ -5867,36 +6023,44 @@ async function handleApi(req, res) {
   // slow (~15-30s), so we cache for 10 min and dedupe concurrent callers.
   // A launchd timer (com.m13v.social-precompute-stats) also writes fresh
   // snapshots to skill/cache/funnel_stats_<N>d.json so cold starts are instant.
+  //
+  // Platform filter handling:
+  //   !platform: read the all-platform snapshot from disk (~instant).
+  //   platform set: read the snapshot for funnel cells (pageviews / signups /
+  //     bookings / amplitude are platform-independent since they measure on-
+  //     site behavior, not which social platform drove the visitor) AND spawn
+  //     python with --posts-only --platform=X to recompute ONLY the per-project
+  //     posts.* engagement counters (~1.5s instead of ~30s+ because the
+  //     PostHog/Amplitude/bookings batch is skipped). Merge the two into one
+  //     payload so the dashboard sees platform-scoped engagement on the same
+  //     row as the all-source funnel cells.
   if (p === '/api/funnel/stats' && req.method === 'GET') {
     const url = new URL(req.url, 'http://localhost');
     const days = Math.max(1, Math.min(90, parseInt(url.searchParams.get('days') || '1', 10) || 1));
-    const entry = funnelStatsCache.get(days);
+    const rawPlatform = (url.searchParams.get('platform') || '').trim().toLowerCase();
+    const platform = (rawPlatform === '' || rawPlatform === 'all') ? '' :
+                     (rawPlatform === 'x' ? 'twitter' : rawPlatform);
+    const platformOk = platform === '' || /^[a-z0-9_]{1,32}$/.test(platform);
+    if (!platformOk) return json(res, { error: 'invalid platform' }, 400);
+    const cacheKey = days + '|' + platform;
+    const entry = funnelStatsCache.get(cacheKey);
     const TTL_MS = 600000;
     if (entry && entry.value && Date.now() - entry.at < TTL_MS) {
-      return json(res, scopeFunnelStatsPayload({ days, ...entry.value, cachedAt: entry.at }, req.user));
-    }
-    const snap = await readSnapshotCached(`funnel_stats_${days}d.json`);
-    if (snap && snap.value && !snap.value.error) {
-      // Warm the in-memory cache so subsequent hits skip the disk read too.
-      funnelStatsCache.set(days, { at: snap.at, value: snap.value });
-      return json(res, scopeFunnelStatsPayload({ ...snap.value, cachedAt: snap.at }, req.user));
+      return json(res, scopeFunnelStatsPayload({ days, platform: platform || 'all', ...entry.value, cachedAt: entry.at }, req.user));
     }
     if (entry && entry.pending) {
-      entry.pending.then(val => json(res, scopeFunnelStatsPayload({ days, ...val, cachedAt: Date.now() }, req.user)))
+      entry.pending.then(val => json(res, scopeFunnelStatsPayload({ days, platform: platform || 'all', ...val, cachedAt: Date.now() }, req.user)))
                    .catch(err => json(res, { error: String(err && err.message || err) }, 500));
       return;
     }
-    // Cloud Run has no python runtime and no PostHog creds; only the
-    // operator's local server can run the live pipeline. Return whatever
-    // we've got (empty snapshot if nothing) rather than hanging.
     if (auth.CLIENT_MODE) {
-      return json(res, { days, error: 'snapshot_missing', cachedAt: null }, 503);
+      return json(res, { days, platform: platform || 'all', error: 'snapshot_missing', cachedAt: null }, 503);
     }
+
     const scriptPath = path.join(DEST, 'scripts', 'project_stats_json.py');
-    const pending = new Promise((resolve, reject) => {
-      const child = spawn('python3', [scriptPath, '--days', String(days)], {
-        env: process.env, cwd: DEST,
-      });
+    const runPython = (extraArgs) => new Promise((resolve, reject) => {
+      const args = [scriptPath, '--days', String(days), ...extraArgs];
+      const child = spawn('python3', args, { env: process.env, cwd: DEST });
       let out = '', err = '';
       child.stdout.on('data', d => out += d);
       child.stderr.on('data', d => err += d);
@@ -5906,12 +6070,69 @@ async function handleApi(req, res) {
         try { resolve(JSON.parse(out)); } catch (e) { reject(e); }
       });
     });
-    funnelStatsCache.set(days, { at: Date.now(), pending });
+
+    let pending;
+    if (platform) {
+      // Fast platform-filtered path: snapshot (funnel cells) + posts-only overlay.
+      // Falls back to the slow full pipeline if no all-platform snapshot exists.
+      pending = (async () => {
+        // Use a 24h freshness window for the overlay base: the snapshot only
+        // contributes the funnel cells (pageviews / signups / bookings /
+        // amplitude / SEO pages), all of which move on a daily-ish timescale.
+        // The posts.* counters (which DO move every few minutes) are
+        // recomputed live via --posts-only, so a stale funnel-cell base is
+        // safe and avoids falling back to the 30s+ full pipeline whenever
+        // the precompute job lags >15min.
+        const STALE_OK = 24 * 60 * 60 * 1000;
+        const snap = await readSnapshotCached(`funnel_stats_${days}d.json`, STALE_OK);
+        if (!snap || !snap.value || snap.value.error || !Array.isArray(snap.value.projects)) {
+          return runPython(['--platform', platform]);
+        }
+        const overlay = await runPython(['--platform', platform, '--posts-only']);
+        const overlayByName = new Map();
+        for (const op of overlay.projects || []) {
+          if (op && op.name) overlayByName.set(op.name, op);
+        }
+        const mergedProjects = snap.value.projects.map(snapP => {
+          if (!snapP || !snapP.name) return snapP;
+          const op = overlayByName.get(snapP.name);
+          if (!op || op.error || !op.posts) return snapP;
+          // Replace ONLY the posts.* counters from the overlay; everything
+          // else (funnel, posthog, bookings, seo, platforms, analytics flags)
+          // stays at the snapshot's all-platform value because those metrics
+          // don't move with the social-platform filter.
+          return { ...snapP, posts: { ...(snapP.posts || {}), ...op.posts } };
+        });
+        return {
+          generated_at: overlay.generated_at || snap.value.generated_at,
+          days,
+          platform,
+          posts_only_overlay: true,
+          projects: mergedProjects,
+          overall: snap.value.overall || null,
+        };
+      })();
+    } else {
+      // Prefer a fresh snapshot. If none, accept a stale-but-recent one
+      // (<24h) to avoid blocking the user behind a 30s+ live python run
+      // every time the precompute job lags. The 5-min precompute timer
+      // cycles through all five windows (1d/7d/14d/30d/90d) so any one
+      // can be 20-30min old at random.
+      const STALE_OK = 24 * 60 * 60 * 1000;
+      const snap = await readSnapshotCached(`funnel_stats_${days}d.json`, STALE_OK);
+      if (snap && snap.value && !snap.value.error) {
+        funnelStatsCache.set(cacheKey, { at: snap.at, value: snap.value });
+        return json(res, scopeFunnelStatsPayload({ ...snap.value, cachedAt: snap.at }, req.user));
+      }
+      pending = runPython([]);
+    }
+
+    funnelStatsCache.set(cacheKey, { at: Date.now(), pending });
     pending.then(val => {
-      funnelStatsCache.set(days, { at: Date.now(), value: val });
-      json(res, scopeFunnelStatsPayload({ days, ...val, cachedAt: Date.now() }, req.user));
+      funnelStatsCache.set(cacheKey, { at: Date.now(), value: val });
+      json(res, scopeFunnelStatsPayload({ days, platform: platform || 'all', ...val, cachedAt: Date.now() }, req.user));
     }).catch(err => {
-      funnelStatsCache.delete(days);
+      funnelStatsCache.delete(cacheKey);
       json(res, { error: String(err && err.message || err) }, 500);
     });
     return;
@@ -7209,6 +7430,34 @@ const HTML = `<!DOCTYPE html>
   .daily-metrics-tooltip .tt-row { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; color: var(--text); }
   .daily-metrics-tooltip .tt-row .swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
   .daily-metrics-tooltip .tt-row .val { margin-left: auto; }
+  /* Trends tab — per-project breakdown. One row per project, each row has a
+     left-aligned project label and the same column chart used in the main
+     section (just shorter). Stack vertically, lazy-loaded on details open;
+     re-rendered (no refetch) when the user toggles legend pills. */
+  .per-project-breakdown { padding: 0 20px 14px; }
+  .per-project-breakdown > summary { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; font-size: 12px; color: var(--text-secondary); user-select: none; list-style: none; }
+  .per-project-breakdown > summary::-webkit-details-marker { display: none; }
+  .per-project-breakdown > summary .pp-caret { display: inline-block; width: 10px; transition: transform 0.1s; }
+  .per-project-breakdown[open] > summary .pp-caret { transform: rotate(90deg); }
+  .per-project-breakdown > summary .pp-status { margin-left: auto; color: var(--text-muted); font-size: 11px; }
+  .per-project-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
+  .per-project-row { display: grid; grid-template-columns: 140px 1fr; align-items: stretch; gap: 8px; padding: 4px 0; border-top: 1px dashed var(--border); }
+  .per-project-row:first-child { border-top: none; }
+  .per-project-label { font-size: 12px; color: var(--text); font-weight: 500; padding: 6px 0 0 4px; word-break: break-word; }
+  .per-project-chart { position: relative; min-height: 130px; }
+  .per-project-chart svg { display: block; width: 100%; height: 130px; overflow: visible; }
+  .per-project-chart .gridline { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
+  .per-project-chart .axis-text { fill: var(--text-secondary); font-size: 9px; font-variant-numeric: tabular-nums; }
+  .per-project-chart .series-bar { transition: opacity 0.1s; }
+  .per-project-chart .series-bar:hover { opacity: 0.85; }
+  .per-project-chart .hover-line { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; pointer-events: none; }
+  .per-project-chart .pp-tooltip { position: absolute; pointer-events: none; background: var(--bg-panel, #fff); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 11px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); min-width: 160px; max-width: 240px; opacity: 0; transition: opacity 0.08s; z-index: 5; left: 0; top: 0; }
+  .per-project-chart .pp-tooltip .tt-day { font-weight: 600; margin-bottom: 3px; color: var(--text); }
+  .per-project-chart .pp-tooltip .tt-row { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; color: var(--text); }
+  .per-project-chart .pp-tooltip .tt-row .swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
+  .per-project-chart .pp-tooltip .tt-row .val { margin-left: auto; }
+  .per-project-chart .pp-empty { padding: 14px 12px; color: var(--text-muted); font-size: 11px; text-align: center; }
+  .per-project-row.pp-loading .per-project-chart .pp-empty { color: var(--text-secondary); }
   /* Deploy Health: slim inline bar when collapsed, alert colors when there is something worth attention */
   #deploy-health:not([open]) { margin-bottom: 10px; border-radius: 8px; }
   #deploy-health:not([open]) > summary { padding: 6px 14px; }
@@ -7509,7 +7758,7 @@ const HTML = `<!DOCTYPE html>
   </div>
   <details class="style-stats-section" id="cohort-stats" open>
     <summary>
-      <span class="style-stats-title"><span class="style-stats-caret">\u25B6</span><span id="cohort-stats-heading">Score Cohort Distribution (24h)</span><span class="stat-card-info" data-tooltip="Buckets posts by composite score (comments \u00D7 3 + upvotes; Reddit/Moltbook subtract 1 to strip OP self-upvote). Views are deliberately excluded from the score. Cohorts: Dead = 0, Low = 1-4, Mid = 5-14, High = 15+. Honors the Window / Platform / Project filters above.">i</span></span>
+      <span class="style-stats-title"><span class="style-stats-caret">\u25B6</span><span id="cohort-stats-heading">Score Cohort Distribution (24h)</span><span class="stat-card-info" data-tooltip="Buckets posts by composite score (clicks \u00D7 10 + comments \u00D7 3 + upvotes; Reddit/Moltbook subtract 1 to strip OP self-upvote). Click weight \u00D710 because a real human click outvalues 10 likes of vibes (matches top_performers.SCORE_SQL and the engagement_styles.py picker). Views are deliberately excluded. Cohorts: Dead = 0, Low = 1\u20139, Mid = 10\u201329, High = 30+. Honors the Window / Platform / Project filters above.">i</span></span>
       <span class="style-stats-total" id="cohort-stats-total"></span>
     </summary>
     <div id="cohort-stats-body">
@@ -7587,6 +7836,16 @@ const HTML = `<!DOCTYPE html>
       <div id="daily-metrics-chart" class="daily-metrics-chart">
         <div class="views-chart-empty">Loading…</div>
       </div>
+      <details class="per-project-breakdown" id="daily-metrics-per-project" data-scope="daily">
+        <summary>
+          <span class="pp-caret">▶</span>
+          <span class="pp-label">Per-project breakdown</span>
+          <span class="pp-status" id="daily-metrics-per-project-status"></span>
+        </summary>
+        <div class="per-project-rows" id="daily-metrics-per-project-rows">
+          <div class="views-chart-empty">Click to load per-project charts.</div>
+        </div>
+      </details>
     </div>
   </details>
   <details class="style-stats-section" id="ratio-metrics" open>
@@ -7599,6 +7858,16 @@ const HTML = `<!DOCTYPE html>
       <div id="ratio-metrics-chart" class="daily-metrics-chart">
         <div class="views-chart-empty">Loading&hellip;</div>
       </div>
+      <details class="per-project-breakdown" id="ratio-metrics-per-project" data-scope="ratio">
+        <summary>
+          <span class="pp-caret">&#9654;</span>
+          <span class="pp-label">Per-project breakdown</span>
+          <span class="pp-status" id="ratio-metrics-per-project-status"></span>
+        </summary>
+        <div class="per-project-rows" id="ratio-metrics-per-project-rows">
+          <div class="views-chart-empty">Click to load per-project charts.</div>
+        </div>
+      </details>
     </div>
   </details>
 </div>
@@ -7916,11 +8185,31 @@ function toast(msg, isError) {
     tipEl.style.left = left + 'px';
     tipEl.style.top  = top + 'px';
   }
+  // Render tooltip text with safe minimal markup:
+  //   1. Escape all HTML special chars (so dynamic data can never inject HTML).
+  //   2. Then turn double-asterisk sequences into bold. The escape step happens
+  //      FIRST, so even bolded angle-bracket text becomes inert.
+  //   3. Newlines render via CSS white-space:pre-line (already on .sa-tooltip).
+  //      No conversion to br needed.
+  // NOTE: this whole file sits inside the outer HTML backtick template, so all
+  // escapes here must be DOUBLE backslashes — the outer template eats single
+  // backslashes. The served JS sees single-backslash escapes, which the regex
+  // engine then handles correctly.
+  function renderTooltipMarkup(text) {
+    var html = String(text)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+    // Non-greedy match so multiple **bold** runs on one line work.
+    html = html.replace(/\\*\\*([^*\\n]+?)\\*\\*/g, '<b>$1</b>');
+    return html;
+  }
   function show(host) {
     const text = getText(host);
     if (!text) return;
     const el = ensureTip();
-    el.textContent = text;
+    el.innerHTML = renderTooltipMarkup(text);
     el.classList.add('visible');
     position(host);
     currentHost = host;
@@ -8326,12 +8615,14 @@ function renderResult(run) {
     const unmatchedN = scan.unmatched || 0;
     const backfillN = scan.backfill || 0;
     const hasScan = scannedN || newN || excludedN || unmatchedN || backfillN;
+    const SNL = String.fromCharCode(10);
     const scanTooltip = hasScan
-      ? ('inbox scan: seen=' + scannedN +
-         ' / new=' + newN +
-         ' / excluded=' + excludedN +
-         ' / unmatched=' + unmatchedN +
-         ' / backfill_skipped=' + backfillN)
+      ? ('**Inbox scan**' + SNL + SNL +
+         '• **seen:** ' + scannedN + SNL +
+         '• **new:** ' + newN + SNL +
+         '• **excluded:** ' + excludedN + SNL +
+         '• **unmatched:** ' + unmatchedN + SNL +
+         '• **backfill_skipped:** ' + backfillN)
       : '';
     const scanPills = hasScan
       ? ('<span title="' + scanTooltip.replace(/"/g, '&quot;') + '" style="display:inline-block;">' +
@@ -8365,7 +8656,8 @@ function renderResult(run) {
       if (!failed && !reasons.length) return '';
       const top = reasons[0];
       const tt = reasons.length
-        ? reasons.map(function (x) { return x.reason + ' x' + x.count; }).join(', ')
+        ? '**Failure reasons**' + String.fromCharCode(10) +
+          reasons.map(function (x) { return '• ' + x.reason + ' × **' + x.count + '**'; }).join(String.fromCharCode(10))
         : 'failed (no reason logged)';
       const label = top
         ? ('failed: ' + top.reason + (reasons.length > 1 ? ' +' + (reasons.length - 1) : ''))
@@ -8375,12 +8667,16 @@ function renderResult(run) {
         'style="display:inline-block;margin-right:10px;font-size:12px;color:var(--muted);">' +
         label + (count ? ' <span style="color:var(--text);font-weight:600;">' + count + '</span>' : '') + '</span>';
     };
-    const tooltip = 'searches: ' + searches +
-      ' / raw SERP candidates: ' + raw +
-      ' / passed 20.0 floor: ' + passed +
-      ' / dropped below floor: ' + dropped +
-      ' / posted: ' + posted +
-      ' / pending queue: ' + queue;
+    const LNL = String.fromCharCode(10);
+    const tooltip =
+      '**LinkedIn post-comment funnel**' + LNL +
+      LNL +
+      '• **searches:** ' + searches + LNL +
+      '• **raw SERP candidates:** ' + raw + LNL +
+      '• **passed 20.0 floor:** ' + passed + LNL +
+      '• **dropped below floor:** ' + dropped + LNL +
+      '• **posted:** ' + posted + LNL +
+      '• **pending queue:** ' + queue;
     return (
       '<span title="' + tooltip.replace(/"/g, '&quot;') + '" style="display:inline-block;">' +
         pill('searches', searches, searches > 0 ? 'var(--text)' : 'var(--muted)') +
@@ -8431,7 +8727,8 @@ function renderResult(run) {
       if (!failed && !reasons.length) return '';
       const top = reasons[0];
       const tt = reasons.length
-        ? reasons.map(function (x) { return x.reason + ' x' + x.count; }).join(', ')
+        ? '**Failure reasons**' + String.fromCharCode(10) +
+          reasons.map(function (x) { return '• ' + x.reason + ' × **' + x.count + '**'; }).join(String.fromCharCode(10))
         : 'failed (no reason logged)';
       const label = top
         ? ('failed: ' + top.reason + (reasons.length > 1 ? ' +' + (reasons.length - 1) : ''))
@@ -8466,27 +8763,27 @@ function renderResult(run) {
     // CSS .sa-tooltip white-space:pre-line turns these into line breaks.
     const NL = String.fromCharCode(10);
     const tooltip =
-      'Phase 0 (cleanup):' + NL +
-      '• salvaged ' + salvAttempted + ': orphan rows adopted from prior dead cycles (' + salvPosted + ' posted this cycle)' + NL +
-      '• pool for next cycle: ' + salvageableLive + ' salvageable (+' + salvAdded + ' / -' + salvDrained + ' this run)' + NL +
+      '**Phase 0 — cleanup**' + NL +
+      '• **salvaged ' + salvAttempted + '** — orphan rows adopted from prior dead cycles (' + salvPosted + ' posted this cycle)' + NL +
+      '• pool for next cycle: **' + salvageableLive + '** salvageable (+' + salvAdded + ' / -' + salvDrained + ' this run)' + NL +
       NL +
-      'Phase 1 (scrape):' + NL +
-      '• searches ' + searches + ': queries run' + NL +
-      '• raw ' + raw + ': tweets returned' + NL +
-      '• passed ' + passed + ': after dedup + age>18h cuts (' + dropped + ' dropped)' + NL +
+      '**Phase 1 — scrape**' + NL +
+      '• **searches ' + searches + '** — queries run' + NL +
+      '• **raw ' + raw + '** — tweets returned' + NL +
+      '• **passed ' + passed + '** — after dedup + age>18h cuts (' + dropped + ' dropped)' + NL +
       NL +
-      'Phase 2a (Δ re-score):' + NL +
-      '• expired ' + expired + ': below Δ<1 likes floor' + NL +
+      '**Phase 2a — Δ re-score**' + NL +
+      '• **expired ' + expired + '** — below Δ<1 likes floor' + NL +
       NL +
-      'Phase 2b (draft + post):' + NL +
-      '• Δ≥10 ' + aboveFloor + ': crossed POST_LIMIT=3 review cap' + NL +
-      '• posted ' + posted + ': shipped' + NL +
-      '• failed ' + failed + ': post errors' + NL +
+      '**Phase 2b — draft + post**' + NL +
+      '• **Δ≥10: ' + aboveFloor + '** — crossed POST_LIMIT=3 review cap' + NL +
+      '• **posted ' + posted + '** — shipped' + NL +
+      '• **failed ' + failed + '** — post errors' + NL +
       NL +
-      'Pending end-of-run: ' + queue +
-      ' (start ' + queueStart + ', +' + qAdded + ' / -' + qDrained + ' = ' +
-        qDrainedPosted + ' posted, ' + qDrainedExpired + ' expired, ' + qDrainedSkipped + ' skipped)' + NL +
-      'Pending live: ' + pendingLive;
+      '**Pending end-of-run:** ' + queue + NL +
+      '  start ' + queueStart + ', +' + qAdded + ' / -' + qDrained + ' = ' +
+        qDrainedPosted + ' posted, ' + qDrainedExpired + ' expired, ' + qDrainedSkipped + ' skipped' + NL +
+      '**Pending live:** ' + pendingLive;
     // Pill order mirrors the tooltip story: salvaged (Phase 0 input) leads,
     // then Phase 1 funnel (searches, raw, passed), Phase 2a drop (expired),
     // Phase 2b decision and outcome (Δ≥10, posted, failed).
@@ -8507,6 +8804,13 @@ function renderResult(run) {
             + r.projects_worked.join(', ')
             + '</span></span>'
           : '') +
+        (Array.isArray(r.styles_used) && r.styles_used.length
+          ? '<span style="display:inline-block;margin-right:10px;font-size:12px;color:var(--muted);">'
+            + 'styles '
+            + '<span style="color:var(--text);font-weight:600;">'
+            + r.styles_used.join(', ')
+            + '</span></span>'
+          : '') +
       '</span>'
     );
   }
@@ -8563,7 +8867,8 @@ function renderResult(run) {
         ? ' (' + reasons.map(function (x) { return x.reason + ' ' + x.count; }).join('; ') + ')'
         : '';
       const tt = reasons.length
-        ? reasons.map(function (x) { return x.reason + ': ' + x.count; }).join(', ')
+        ? '**Failure reasons**' + String.fromCharCode(10) +
+          reasons.map(function (x) { return '• ' + x.reason + ': **' + x.count + '**'; }).join(String.fromCharCode(10))
         : 'failed (no reason logged)';
       return '<span title="' + tt.replace(/"/g, '&quot;') + '" ' +
         'style="display:inline-block;margin-right:10px;font-size:12px;color:var(--muted);">' +
@@ -8587,17 +8892,28 @@ function renderResult(run) {
       //     now means "threads that ACTUALLY came through the ripen step
       //     with positive momentum", which is what the word implies in plain
       //     English. Final chain: raw → passed → ripened → drafted → posted.
-      const ripenTip = 'ripen iters: ' + ripenIters +
-        ' / input decisions (=passed): ' + ripenInput +
-        ' / ripened (composite > ' + (ripenFloor != null ? ripenFloor : '?') + '): ' + ripenSurvivors +
-        ' / drops: ' + ripenDrops +
-        ' / iters skipped (0 survivors): ' + ripenSkipped +
-        ' / iters passthrough (no urls / rate limit): ' + ripenPassthrough +
-        (ripenWindow != null ? ' / window: ' + ripenWindow + 's' : '') +
-        (ripenW != null ? ' / formula: Δup + ' + ripenW + '*Δcomments' : '') +
-        (bestComp != null ? ' / best: composite=' + bestComp.toFixed(1) +
-          ' (Δup=' + (bestDup != null ? bestDup : '?') +
-          ', Δcomm=' + (bestDco != null ? bestDco : '?') + ')' : '');
+      // Build the ripen tooltip with explicit newlines (NL is defined in the
+      // outer scope; use String.fromCharCode(10) here in case the closure
+      // walked away from it). See feedback_server_js_template_regex memory:
+      // literal backslash-n inside the outer HTML backtick template gets eaten,
+      // so we build the newline char numerically.
+      const RNL = String.fromCharCode(10);
+      const ripenTip =
+        '**Ripen step** — 5-min Δ re-score' + RNL +
+        RNL +
+        '• **iterations:** ' + ripenIters + RNL +
+        '• **input decisions** (= passed): ' + ripenInput + RNL +
+        '• **ripened** (composite > ' + (ripenFloor != null ? ripenFloor : '?') + '): ' + ripenSurvivors + RNL +
+        '• **drops:** ' + ripenDrops + RNL +
+        '• **iters skipped** (0 survivors): ' + ripenSkipped + RNL +
+        '• **iters passthrough** (no urls / rate limit): ' + ripenPassthrough +
+        (ripenWindow != null ? RNL + RNL + '**window:** ' + ripenWindow + 's' : '') +
+        (ripenW != null ? RNL + '**formula:** Δup + ' + ripenW + '×Δcomments' : '') +
+        (bestComp != null
+          ? RNL + RNL + '**best:** composite=' + bestComp.toFixed(1) +
+            ' (Δup=' + (bestDup != null ? bestDup : '?') +
+            ', Δcomm=' + (bestDco != null ? bestDco : '?') + ')'
+          : '');
       const bestLabel = bestComp != null
         ? ('best Δ' + bestComp.toFixed(1))
         : (ripenSurvivors > 0 ? 'best Δ?' : 'no Δ');
@@ -8654,35 +8970,55 @@ function renderResult(run) {
         bracket = ' <span style="color:var(--muted);font-weight:400;">(' +
                   '+' + salvAdded + '/-' + salvDrained + ' pool)</span>';
       }
-      const qTip = 'salvage attempts this run (Phase 0 row pulls): ' + salvAttempted +
-        ' / salvage lane posted: ' + salvPosted +
-        ' / salvage lane failed: ' + salvFailedNow +
-        ' / salvageable now (pool size for next cycle): ' + salvageableLive +
-        ' (+' + salvAdded + ' became salvageable / -' + salvDrained + ' drained out)' +
-        ' / pending pool end-of-run: ' + queue + ' (start: ' + queueStartV +
-        ', +' + qAdded + ' added, -' + qDrained + ' drained = ' +
-        qDrainedPosted + ' posted + ' + qDrainedFailed + ' failed + ' +
-        qDrainedExpired + ' expired + ' + qDrainedSkipped + ' skipped)' +
-        ' / pending right now (live): ' + pendingLive;
+      const QNL = String.fromCharCode(10);
+      const qTip =
+        '**Salvage lane** — Phase 0 cleanup' + QNL +
+        QNL +
+        '• **attempts this run:** ' + salvAttempted + QNL +
+        '• **posted:** ' + salvPosted + QNL +
+        '• **failed:** ' + salvFailedNow + QNL +
+        QNL +
+        '**Salvageable pool** (next cycle): ' + salvageableLive + QNL +
+        '  +' + salvAdded + ' became salvageable, -' + salvDrained + ' drained out' + QNL +
+        QNL +
+        '**Pending pool end-of-run:** ' + queue + QNL +
+        '  start: ' + queueStartV + ', +' + qAdded + ' added, -' + qDrained + ' drained' + QNL +
+        '  drained = ' + qDrainedPosted + ' posted + ' + qDrainedFailed + ' failed + ' +
+        qDrainedExpired + ' expired + ' + qDrainedSkipped + ' skipped' + QNL +
+        QNL +
+        '**Pending live now:** ' + pendingLive;
       return '<span title="' + qTip.replace(/"/g, '&quot;') + '" ' +
         'style="display:inline-block;margin-right:10px;font-size:12px;color:var(--muted);">' +
         'salvaged <span style="color:var(--text);font-weight:600;">' + primaryN + '</span>' +
         bracket + '</span>';
     };
 
-    const tooltip = 'iterations: ' + iterations +
-      ' / searches: ' + searches +
-      ' / raw API results: ' + raw +
-      ' / passed (post-API filter): ' + passed +
-      ' / dropped (blocked sub / archived / locked / age>180d): ' + dropped +
-      ' / fetched (model opened to read): ' + fetched +
-      ' / drafted: ' + drafted +
-      (ripenIters ? ' / ripen survivors: ' + ripenSurvivors + '/' + ripenInput +
-        (bestComp != null ? ' (best composite ' + bestComp.toFixed(1) + ')' : '') : '') +
-      ' / posted: ' + posted +
-      (salvageableLive ? ' / salvageable in DB: ' + salvageableLive : '');
+    const RDNL = String.fromCharCode(10);
+    const tooltip =
+      '**Reddit post-comment funnel**' + RDNL +
+      RDNL +
+      '• **iterations:** ' + iterations + RDNL +
+      '• **searches:** ' + searches + RDNL +
+      '• **raw API results:** ' + raw + RDNL +
+      '• **passed** (post-API filter): ' + passed + RDNL +
+      '• **dropped** (blocked sub / archived / locked / age>180d): ' + dropped + RDNL +
+      '• **fetched** (model opened to read): ' + fetched + RDNL +
+      '• **drafted:** ' + drafted +
+      (ripenIters
+        ? RDNL + '• **ripen survivors:** ' + ripenSurvivors + ' / ' + ripenInput +
+          (bestComp != null ? ' (best composite ' + bestComp.toFixed(1) + ')' : '')
+        : '') + RDNL +
+      '• **posted:** ' + posted +
+      (salvageableLive ? RDNL + RDNL + '**Salvageable in DB:** ' + salvageableLive : '');
     return (
       '<span title="' + tooltip.replace(/"/g, '&quot;') + '" style="display:inline-block;">' +
+        // 2026-05-19: salvaged pill leads, mirroring Twitter chronological
+        // pill order (server.js ~line 8723). Phase 0 salvage runs FIRST in
+        // every reddit cycle (run-reddit-search.sh:241), so it belongs at the
+        // start of the funnel, not buried after the posted pill. Twitter
+        // renderer comment says: pill order mirrors the tooltip story,
+        // salvaged (Phase 0 input) leads, then Phase 1 funnel, Phase 2b.
+        renderQueuePill() +
         pill('iterations', iterations, iterations > 0 ? 'var(--text)' : 'var(--muted)') +
         pill('searches', searches, searches > 0 ? 'var(--text)' : 'var(--muted)') +
         pill('raw', raw, raw > 0 ? 'var(--text)' : 'var(--muted)') +
@@ -8696,7 +9032,6 @@ function renderResult(run) {
         renderRipenPills() +
         pill('drafted', drafted, drafted > 0 ? 'var(--text)' : 'var(--muted)') +
         pill('posted', posted, posted > 0 ? '#22c55e' : 'var(--muted)') +
-        renderQueuePill() +
         renderFailedPill() +
         (Array.isArray(r.projects_worked) && r.projects_worked.length
           ? '<span style="display:inline-block;margin-right:10px;font-size:12px;color:var(--muted);">'
@@ -8705,6 +9040,13 @@ function renderResult(run) {
             + r.projects_worked.join(', ')
             + '</span></span>'
           : '') +
+        (Array.isArray(r.styles_used) && r.styles_used.length
+          ? '<span style="display:inline-block;margin-right:10px;font-size:12px;color:var(--muted);">'
+            + 'styles '
+            + '<span style="color:var(--text);font-weight:600;">'
+            + r.styles_used.join(', ')
+            + '</span></span>'
+          : '') +
       '</span>'
     );
   }
@@ -8732,7 +9074,8 @@ function renderResult(run) {
       if (!failed) return '';
       const top = reasons[0];
       const tooltip = reasons.length
-        ? reasons.map(function (x) { return x.reason + ' x' + x.count; }).join(', ')
+        ? '**Failure reasons**' + String.fromCharCode(10) +
+          reasons.map(function (x) { return '• ' + x.reason + ' × **' + x.count + '**'; }).join(String.fromCharCode(10))
         : 'failed (no reason logged)';
       const label = top
         ? ('failed: ' + top.reason + (reasons.length > 1 ? ' +' + (reasons.length - 1) : ''))
@@ -8752,12 +9095,14 @@ function renderResult(run) {
     const unmatchedN = scan.unmatched || 0;
     const backfillN = scan.backfill || 0;
     const hasScan = scannedN || newN || excludedN || unmatchedN || backfillN;
+    const SNL = String.fromCharCode(10);
     const scanTooltip = hasScan
-      ? ('inbox scan: seen=' + scannedN +
-         ' / new=' + newN +
-         ' / excluded=' + excludedN +
-         ' / unmatched=' + unmatchedN +
-         ' / backfill_skipped=' + backfillN)
+      ? ('**Inbox scan**' + SNL + SNL +
+         '• **seen:** ' + scannedN + SNL +
+         '• **new:** ' + newN + SNL +
+         '• **excluded:** ' + excludedN + SNL +
+         '• **unmatched:** ' + unmatchedN + SNL +
+         '• **backfill_skipped:** ' + backfillN)
       : '';
     const scanPills = hasScan
       ? ('<span title="' + scanTooltip.replace(/"/g, '&quot;') + '" style="display:inline-block;">' +
@@ -8831,48 +9176,54 @@ function renderResult(run) {
     };
     return (
       tipPill('scanned', scanned, 'var(--text)',
-        'Total rows the run considered (every active row in the relevant ' +
-        'platform tables). = checked + skipped + bypassed-as-fresh.') +
+        '**Scanned**\\n\\n' +
+        'Total rows the run considered (every active row in the relevant platform tables).\\n\\n' +
+        '= checked + skipped + bypassed-as-fresh.') +
       (skipped ? tipPill('skipped', skipped, 'var(--muted)',
-        'Rows we deliberately did NOT poll this run. Two reasons: ' +
-        '(1) already refreshed by the cheap scrape leg within the last 4h, ' +
-        '(2) stable cooldown (2+ scans with no metric change AND older than ' +
-        '3 days). Saves API calls; data is still current.') : '') +
+        '**Skipped**\\n\\n' +
+        'Rows we deliberately did NOT poll this run.\\n\\n' +
+        '**Two reasons:**\\n' +
+        '• already refreshed by the cheap scrape leg within the last 4h\\n' +
+        '• stable cooldown (2+ scans with no metric change AND older than 3 days)\\n\\n' +
+        'Saves API calls; data is still current.') : '') +
       tipPill('checked', checked, 'var(--text)',
-        'Rows we actually hit the platform API for this run ' +
-        '(Reddit old.reddit.com JSON / fxtwitter / LinkedIn activity feed). ' +
+        '**Checked**\\n\\n' +
+        'Rows we actually hit the platform API for this run (Reddit old.reddit.com JSON / fxtwitter / LinkedIn activity feed).\\n\\n' +
         'Includes both successful polls and the ones that errored mid-fetch.') +
       tipPill('changed', changed, '#22c55e',
-        'Subset of CHECKED where any tracked metric (upvotes, ' +
-        'comments_count, views) actually moved since the prior scan. ' +
+        '**Changed**\\n\\n' +
+        'Subset of CHECKED where any tracked metric (upvotes, comments_count, views) actually moved since the prior scan.\\n\\n' +
         'The real-activity signal; everything else is no-op polling.') +
       (viewsRefreshed ? tipPill('views', viewsRefreshed, '#06b6d4',
-        'Rows where the cheap view-scrape leg wrote a fresh view count ' +
-        'this run. Reddit: Step 1 profile-page scrape (sees every ' +
-        'comment + thread on /user/<name>/). Twitter: built-in to the ' +
-        'fxtwitter call. Separate from CHANGED because views can ' +
-        'tick up without upvotes/comments moving.') : '') +
+        '**Views refreshed**\\n\\n' +
+        'Rows where the cheap view-scrape leg wrote a fresh view count this run.\\n\\n' +
+        '• **Reddit:** Step 1 profile-page scrape (sees every comment + thread on /user/<name>/)\\n' +
+        '• **Twitter:** built-in to the fxtwitter call\\n\\n' +
+        'Separate from CHANGED because views can tick up without upvotes/comments moving.') : '') +
       (repliesRefreshed ? tipPill('replies', repliesRefreshed, '#3b82f6',
-        'Per-reply rows refreshed: comments we authored AS replies to ' +
-        'someone else reply to our original comment (the DM-rail ' +
-        'follow-up). Live in the replies table, not posts. ' +
-        'Reddit refreshes upvotes + reply-count via batch JSON API. ' +
-        'Twitter also refreshes views via fxtwitter.') : '') +
+        '**Replies refreshed**\\n\\n' +
+        'Per-reply rows refreshed: comments we authored AS replies to someone else replying to our original comment (the DM-rail follow-up). Live in the replies table, not posts.\\n\\n' +
+        '• **Reddit:** refreshes upvotes + reply-count via batch JSON API\\n' +
+        '• **Twitter:** also refreshes views via fxtwitter') : '') +
       (removed ? tipPill('removed', removed, '#eab308',
-        'Posts newly flagged deleted/removed this run. Reddit: comment ' +
-        'gone from thread JSON for 2+ consecutive scans (deletion_detect_' +
-        'count threshold). LinkedIn: post returned "Post unavailable".') : '') +
+        '**Removed**\\n\\n' +
+        'Posts newly flagged deleted/removed this run.\\n\\n' +
+        '• **Reddit:** comment gone from thread JSON for 2+ consecutive scans (deletion_detect_count threshold)\\n' +
+        '• **LinkedIn:** post returned "Post unavailable"') : '') +
       (unavailable ? tipPill('unavail', unavailable, '#eab308',
-        'LinkedIn only: post explicitly returned a Post Unavailable ' +
-        'string. Subset of REMOVED; rendered as its own pill so an ' +
-        'operator can tell hard-deletion from rate-limit or network noise.') : '') +
+        '**Unavailable** (LinkedIn only)\\n\\n' +
+        'Post explicitly returned a Post Unavailable string.\\n\\n' +
+        'Subset of REMOVED; rendered as its own pill so an operator can tell hard-deletion from rate-limit or network noise.') : '') +
       (notFound ? tipPill('not found', notFound, 'var(--muted)',
-        'LinkedIn only: post is still active on LinkedIn but our specific ' +
-        'comment couldn\'t be located on the activity feed (may have ' +
-        'aged off our visible recent-activity window).') : '') +
+        '**Not found** (LinkedIn only)\\n\\n' +
+        'Post is still active on LinkedIn but our specific comment could not be located on the activity feed (may have aged off our visible recent-activity window).') : '') +
       (failed ? tipPill('failed', failed, '#ef4444',
-        'API errors during the run, broken down by category: 404 not_found, ' +
-        'rate-limited (429), empty / malformed response, or other / network. ' +
+        '**Failed**\\n\\n' +
+        'API errors during the run, broken down by category:\\n' +
+        '• 404 not_found\\n' +
+        '• rate-limited (429)\\n' +
+        '• empty / malformed response\\n' +
+        '• other / network\\n\\n' +
         'Includes step-exit failures from the shell pipeline as well.') : '')
     );
   }
@@ -8891,7 +9242,8 @@ function renderResult(run) {
       if (!failed && !reasons.length) return '';
       const top = reasons[0];
       const tt = reasons.length
-        ? reasons.map(function (x) { return x.reason + ' x' + x.count; }).join(', ')
+        ? '**Failure reasons**' + String.fromCharCode(10) +
+          reasons.map(function (x) { return '• ' + x.reason + ' × **' + x.count + '**'; }).join(String.fromCharCode(10))
         : 'failed (no reason logged)';
       const label = top
         ? ('failed: ' + top.reason + (reasons.length > 1 ? ' +' + (reasons.length - 1) : ''))
@@ -8901,10 +9253,16 @@ function renderResult(run) {
         'style="display:inline-block;margin-right:10px;font-size:12px;color:var(--muted);">' +
         label + (count ? ' <span style="color:var(--text);font-weight:600;">' + count + '</span>' : '') + '</span>';
     };
-    const tooltip = 'total pages in scope (zero-click 30+ days, all projects): ' + total +
-      ' / deleted this run: ' + deleted +
-      ' / queue (waiting for next run, capped by DAILY_MAX): ' + queue +
-      ' / failed: ' + failed;
+    const ENL = String.fromCharCode(10);
+    const tooltip =
+      '**SEO page expire**' + ENL +
+      ENL +
+      '• **total pages in scope:** ' + total + ENL +
+      '  (zero-click 30+ days, all projects)' + ENL +
+      '• **deleted this run:** ' + deleted + ENL +
+      '• **queue:** ' + queue + ENL +
+      '  (waiting for next run, capped by DAILY_MAX)' + ENL +
+      '• **failed:** ' + failed;
     return (
       '<span title="' + tooltip.replace(/"/g, '&quot;') + '" style="display:inline-block;">' +
         pill('total pages', total, total > 0 ? 'var(--text)' : 'var(--muted)') +
@@ -8929,7 +9287,8 @@ function renderResult(run) {
     if (!failed && !reasons.length) return '';
     const top = reasons[0];
     const tooltip = reasons.length
-      ? reasons.map(function (x) { return x.reason + ' x' + x.count; }).join(', ')
+      ? '**Failure reasons**' + String.fromCharCode(10) +
+        reasons.map(function (x) { return '• ' + x.reason + ' × **' + x.count + '**'; }).join(String.fromCharCode(10))
       : 'failed (no reason logged)';
     const label = top
       ? ('failed: ' + top.reason + (reasons.length > 1 ? ' +' + (reasons.length - 1) : ''))
@@ -8946,8 +9305,10 @@ function renderResult(run) {
   const renderSkipReasonsPill = () => {
     if (!skipBreakdown.length) return '';
     const top = skipBreakdown[0];
-    const tooltip = skipBreakdown
-      .map(function (x) { return x.reason + ' x' + x.count; }).join(', ');
+    const tooltip = '**Skip reasons**' + String.fromCharCode(10) +
+      skipBreakdown
+        .map(function (x) { return '• ' + x.reason + ' × **' + x.count + '**'; })
+        .join(String.fromCharCode(10));
     const label = 'skipped: ' + top.reason +
       (skipBreakdown.length > 1 ? ' +' + (skipBreakdown.length - 1) : '');
     const count = top.count;
@@ -8969,10 +9330,17 @@ function renderResult(run) {
     const tp = discover.tweets_pulled || 0;
     const c = discover.candidates || 0;
     const af = discover.above_floor || 0;
-    const tip = (q + ' queries' + (d ? ' (' + d + ' duds)' : '')) + ' \u2192 ' +
-      (tp + ' tweets pulled') + ' \u2192 ' +
-      (c + ' candidates after floor') + ' \u2192 ' +
-      (af + ' cleared review cap');
+    const DNL = String.fromCharCode(10);
+    const tip =
+      '**Discovery funnel**' + DNL +
+      DNL +
+      '• **' + q + ' queries**' + (d ? ' (' + d + ' duds)' : '') + DNL +
+      '  \u2193' + DNL +
+      '• **' + tp + ' tweets pulled**' + DNL +
+      '  \u2193' + DNL +
+      '• **' + c + ' candidates** after floor' + DNL +
+      '  \u2193' + DNL +
+      '• **' + af + ' cleared** review cap';
     const visStr = q + '\u2192' + c + '\u2192' + af;
     const color = (q || c || af) ? 'var(--text)' : 'var(--muted)';
     return '<span title="' + tip.replace(/"/g, '&quot;') + '" ' +
@@ -9115,16 +9483,16 @@ function _jobHistoryCostCell(result) {
     headerHtml = fmtCost(totalForDisplay);
   }
   const lines = [
-    'Cost (SDK orchestrator): ' + (sessionsWithSdk > 0 ? fmtLane(orch) : 'n/a'),
+    '**Cost (SDK orchestrator):** ' + (sessionsWithSdk > 0 ? fmtLane(orch) : 'n/a'),
   ];
   if (sessionsAll > 0) {
-    lines.push('  Sessions: ' + sessionsAll +
-      '  ·  with SDK data: ' + sessionsWithSdk +
-      '  ·  missing SDK: ' + sessionsMissing);
+    lines.push('• Sessions: **' + sessionsAll + '**');
+    lines.push('• with SDK data: **' + sessionsWithSdk + '**');
+    lines.push('• missing SDK: **' + sessionsMissing + '**');
   }
   if (bd && Array.isArray(bd.phases) && bd.phases.length) {
     lines.push('');
-    lines.push('Per-phase (claude_sessions.script grouping):');
+    lines.push('**Per-phase** (claude_sessions.script grouping)');
     const shown = bd.phases.slice(0, 10);
     for (const p of shown) {
       const missing = (p.sessions_missing_sdk && p.sessions_missing_sdk > 0)
@@ -9133,7 +9501,7 @@ function _jobHistoryCostCell(result) {
       const orchVal = (p.sessions_with_sdk && p.sessions_with_sdk > 0)
         ? fmtLane(p.orch)
         : 'n/a';
-      lines.push('  ' + (p.phase || '(unknown)') + '  x' + p.sessions +
+      lines.push('• ' + (p.phase || '(unknown)') + ' ×' + p.sessions +
         '  ' + orchVal + missing);
     }
     if (bd.phases.length > shown.length) {
@@ -9142,12 +9510,12 @@ function _jobHistoryCostCell(result) {
   }
   if (typeof result.cost_usd_from_log === 'number') {
     lines.push('');
-    lines.push('Wrapper shell-log value: ' + fmtLane(result.cost_usd_from_log));
+    lines.push('**Wrapper shell-log value:** ' + fmtLane(result.cost_usd_from_log));
   }
   lines.push('');
-  lines.push('Diagnostic-only (local pricing estimate, not actual billing):');
-  lines.push('  Transcript estimate: ' + fmtLane(est));
-  lines.push('  Subagent (est): ' + fmtLane(sub));
+  lines.push('**Diagnostic-only** (local pricing estimate, not actual billing)');
+  lines.push('• Transcript estimate: ' + fmtLane(est));
+  lines.push('• Subagent (est): ' + fmtLane(sub));
   lines.push('');
   lines.push('SDK-only mode: shows orchestrator_cost_usd captured by the SDK result event. "missing SDK" = wrapper script didn\\'t pass --output-format json to claude, so no result event = no cost data recorded. Patch the wrapper to fix.');
   const tip = lines.join('\\n');
@@ -10085,11 +10453,11 @@ function fmtCostCell(displayed, orchestrator, estimated, subagent) {
     ? fmtCost(Number(orchestrator))
     : '<span style="color:var(--text-very-faint);">n/a</span>';
   const lines = [
-    'Cost (SDK orchestrator): ' + fmtLane(orchestrator),
+    '**Cost (SDK orchestrator):** ' + fmtLane(orchestrator),
     '',
-    'Diagnostic-only (not actual billing):',
-    '  Transcript estimate: ' + fmtLane(estimated),
-    '  Subagent (est): ' + fmtLane(subagent),
+    '**Diagnostic-only** (not actual billing)',
+    '• Transcript estimate: ' + fmtLane(estimated),
+    '• Subagent (est): ' + fmtLane(subagent),
     '',
     'Displays Anthropic-reported orchestrator_cost_usd only. "n/a" means the wrapper didn\\'t capture the SDK cost (no --output-format json on the claude call). Transcript estimate and subagent figures are computed locally from a hardcoded pricing table — informational, not billing-accurate on subscription plans.',
   ];
@@ -10404,8 +10772,12 @@ async function reloadStatsTabSections() {
   // of the filter bar.
   const funnelEl = document.getElementById('funnel-stats');
   if (funnelEl && funnelEl.open) {
-    if (_lastFunnelPayload) renderFunnelStats(_lastFunnelPayload);
-    else pending.push(loadFunnelStats(true));
+    // Always refetch when a filter pill changes — the cached payload was
+    // built against the *previous* platform/window and rendering it would
+    // contradict the engagement-style table above it. loadFunnelStats's
+    // own (loadKey) check still keeps redundant fetches off when nothing
+    // actually changed.
+    pending.push(loadFunnelStats(true));
   }
   const dmEl = document.getElementById('dm-stats');
   if (dmEl && dmEl.open) pending.push(loadDmStats(true));
@@ -10733,6 +11105,13 @@ function renderDailyMetrics() {
       if (active.has(id)) active.delete(id); else active.add(id);
       _saveDailyMetricsActive();
       renderDailyMetrics();
+      // Mirror the legend change across all per-project mini charts so they
+      // stay in sync with the main chart's metric selection. No fetch.
+      try {
+        if (_perProjectState && _perProjectState.loadedKey) {
+          _perProjectGetProjects().forEach(p => _renderPerProjectChart(p, 'daily'));
+        }
+      } catch {}
     });
   });
 
@@ -11056,6 +11435,13 @@ function renderRatioMetrics() {
       if (active.has(id)) active.delete(id); else active.add(id);
       _saveRatioMetricsActive();
       renderRatioMetrics();
+      // Same pattern as the daily-metrics legend: mirror the toggle across
+      // the per-project ratio mini-charts (no fetch, just SVG rebuild).
+      try {
+        if (_perProjectState && _perProjectState.loadedKey) {
+          _perProjectGetProjects().forEach(p => _renderPerProjectChart(p, 'ratio'));
+        }
+      } catch {}
     });
   });
   const visible = RATIO_METRICS.filter(r => active.has(r.id));
@@ -11204,6 +11590,508 @@ function renderRatioMetrics() {
   }
 }
 
+// ============================================================================
+// Per-project breakdown for the Trends tab. Renders the same Daily Metrics
+// and Engagement Ratios charts (sharing the user's legend selection) once per
+// project, stacked vertically. Lazy-loaded on first details open; cached by
+// granularity+platform (so toggling either filter triggers a refetch but the
+// legend pills just re-render from the cached series). Always shows ALL
+// projects regardless of the Trends project filter — the breakdown is the
+// place to compare projects against each other.
+// ============================================================================
+const _perProjectState = {
+  loadedKey: null,        // 'daily|all' style cache key
+  series: {},             // { project: { metricId: { dayISO: value } } }
+  days: [],               // axis (daily or weekly buckets)
+  failed: {},             // { project: [{key, timedOut}] }
+  loading: false,         // a fetch cycle is in flight
+};
+
+function _perProjectGetProjects() {
+  const pills = document.querySelectorAll('#trends-project-pills .style-stats-pill[data-value]');
+  return Array.from(pills)
+    .map(p => p.getAttribute('data-value'))
+    .filter(v => v && v !== 'all');
+}
+
+function _perProjectCacheKey() {
+  return currentTrendsGranularity() + '|' + currentTrendsPlatform();
+}
+
+// True when at least one of the per-project details elements is open.
+// Used to decide whether to (re)load on filter change; if both are closed
+// the data is irrelevant until the user opens one.
+function _perProjectIsAnyOpen() {
+  const a = document.getElementById('daily-metrics-per-project');
+  const b = document.getElementById('ratio-metrics-per-project');
+  return !!((a && a.open) || (b && b.open));
+}
+
+// Maybe-invalidate: only clears state when the cache key (granularity +
+// platform) actually changed. Project filter is irrelevant to per-project
+// breakdown (it always shows all projects), so a project-only change is a
+// no-op. Called from loadDailyMetrics on every refilter; cheap when no
+// section is open and no key change happened.
+function _perProjectInvalidate() {
+  const want = _perProjectCacheKey();
+  const changed = _perProjectState.loadedKey && _perProjectState.loadedKey !== want;
+  if (changed) {
+    _perProjectState.loadedKey = null;
+    _perProjectState.series = {};
+    _perProjectState.failed = {};
+  }
+  if (_perProjectIsAnyOpen()) {
+    _perProjectLoadIfNeeded();
+  } else if (changed) {
+    // Reset both row containers to a hint state so when the user opens the
+    // section next, they don't see stale data.
+    ['daily-metrics-per-project-rows', 'ratio-metrics-per-project-rows'].forEach(id => {
+      const el = document.getElementById(id);
+      if (el) el.innerHTML = '<div class="views-chart-empty">Click to load per-project charts.</div>';
+    });
+    ['daily-metrics-per-project-status', 'ratio-metrics-per-project-status'].forEach(id => {
+      const el = document.getElementById(id);
+      if (el) el.textContent = '';
+    });
+  }
+}
+
+// Single fetch helper: 7 best-effort endpoints (8 in admin mode w/ cost) for
+// one project, mirroring the shape of loadDailyMetrics. Returns a flat
+// { series: { metricId: { day: value } }, failed: [...] } record.
+async function _perProjectFetchOne(project, gran, platform, fetchDays, dailyAxis) {
+  // 30s per endpoint. /api/funnel/per-day shells out to PostHog HogQL which
+  // routinely takes 10-25s on a cold cache; 9s was killing 19 of 23 projects'
+  // funnel fetch on first page-load and rendering them as silent zeros.
+  // Pair this with the funnel pre-warmer (launchd com.m13v.social-funnel-prewarm)
+  // which keeps the 5-min server cache hot so most fetches return instantly.
+  const FETCH_TIMEOUT_MS = 30000;
+  const fetchOne = async (url) => {
+    const ctl = (typeof AbortController !== 'undefined') ? new AbortController() : null;
+    const timer = ctl ? setTimeout(() => { try { ctl.abort(); } catch {} }, FETCH_TIMEOUT_MS) : null;
+    try {
+      const res = await fetch(url, ctl ? { signal: ctl.signal } : undefined);
+      if (!res.ok) return { rows: [], failed: true, status: res.status };
+      const data = await res.json();
+      return { rows: data.rows || [], failed: false };
+    } catch (e) {
+      const msg = String(e && e.message || e);
+      const timedOut = msg.includes('aborted') || msg.includes('Timeout') || msg.includes('timed out');
+      return { rows: [], failed: true, timedOut };
+    } finally {
+      if (timer) clearTimeout(timer);
+    }
+  };
+  // Force the project filter; platform stays inherited from the Trends bar.
+  const platformAwareParams = ['days=' + fetchDays, 'project=' + encodeURIComponent(project)];
+  if (platform && platform !== 'all') platformAwareParams.push('platform=' + encodeURIComponent(platform));
+  const projectOnlyParams = ['days=' + fetchDays, 'project=' + encodeURIComponent(project)];
+  const qsAware = platformAwareParams.join('&');
+  const qsProj  = projectOnlyParams.join('&');
+  const costAvail = window.SA_IS_ADMIN !== false;
+  const [views, upvotes, comments, clicks, bookings, funnel, cost, posts] = await Promise.all([
+    fetchOne('/api/views/per-day?'    + qsAware),
+    fetchOne('/api/upvotes/per-day?'  + qsAware),
+    fetchOne('/api/comments/per-day?' + qsAware),
+    fetchOne('/api/clicks/per-day?'   + qsAware),
+    fetchOne('/api/bookings/per-day?' + qsProj),
+    fetchOne('/api/funnel/per-day?'   + qsProj),
+    costAvail ? fetchOne('/api/cost/per-day?' + qsAware) : Promise.resolve({ rows: [], failed: false }),
+    fetchOne('/api/posts/per-day?'    + qsAware),
+  ]);
+  const series = {};
+  const intoSeries = (id, rows, key) => {
+    const map = {};
+    rows.forEach(r => { if (r && r.day) map[r.day] = Number(r[key]) || 0; });
+    series[id] = map;
+  };
+  intoSeries('views',         views.rows,    'views_gained');
+  intoSeries('upvotes',       upvotes.rows,  'upvotes_gained');
+  intoSeries('comments',      comments.rows, 'comments_gained');
+  intoSeries('clicks',        clicks.rows,   'clicks_gained');
+  intoSeries('bookings',      bookings.rows, 'bookings_gained');
+  intoSeries('cost',          cost.rows,     'cost_usd');
+  intoSeries('posts',         posts.rows,    'posts_made');
+  intoSeries('threads',       posts.rows,    'threads_made');
+  intoSeries('comments_made', posts.rows,    'comments_made');
+  DAILY_METRICS.filter(m => m.funnel).forEach(m => {
+    intoSeries(m.id, funnel.rows, m.valueKey);
+  });
+  // Apply weekly bucketing if needed (same shape as loadDailyMetrics).
+  let outSeries = series;
+  if (gran === 'weekly') {
+    const aggregated = {};
+    DAILY_METRICS.forEach(m => {
+      const bucketed = _bucketWeekly(dailyAxis, series[m.id] || {});
+      aggregated[m.id] = bucketed.weeklyMap;
+    });
+    outSeries = aggregated;
+  }
+  const fetchResults = { views, upvotes, comments, clicks, bookings, funnel, cost, posts };
+  const failed = Object.keys(fetchResults)
+    .filter(k => fetchResults[k].failed)
+    .map(k => ({ key: k, timedOut: !!fetchResults[k].timedOut }));
+  return { series: outSeries, failed };
+}
+
+// Run an async fn over items with bounded concurrency. Used so we don't
+// fire 8 endpoints * 25 projects = 200 simultaneous requests at PostHog.
+async function _perProjectRunConcurrency(items, limit, fn) {
+  const queue = items.slice();
+  const workers = [];
+  for (let i = 0; i < Math.min(limit, queue.length); i++) {
+    workers.push((async () => {
+      while (queue.length) {
+        const item = queue.shift();
+        if (item == null) break;
+        try { await fn(item); } catch {}
+      }
+    })());
+  }
+  await Promise.all(workers);
+}
+
+// Build a compact column chart SVG. Same visual model as renderDailyMetrics
+// but smaller (130px tall, no value labels above bars, X labels at first/
+// middle/last only). Returns { svgHtml, plot } where plot exposes the
+// padding + dimensions for hover wiring.
+function _buildMiniChartSvg(opts) {
+  const days = opts.days || [];
+  const visible = opts.visible || [];
+  const valueOf = opts.valueOf; // (metric, day) => number|null
+  const isRatio = !!opts.isRatio;
+  const formatter = opts.formatter; // (metric, value) => string
+  const seriesPeak = {};
+  visible.forEach(m => {
+    let p = 0;
+    days.forEach(d => {
+      const v = valueOf(m, d);
+      if (v == null || !isFinite(v)) return;
+      p = Math.max(p, v);
+    });
+    seriesPeak[m.id] = p;
+  });
+  const isSingle = visible.length === 1;
+  const singleMetric = isSingle ? visible[0] : null;
+  const yMax = isSingle ? _niceMax(Math.max(isRatio ? 0.01 : 0, seriesPeak[visible[0].id] || 0)) : 0;
+  const width = 960;
+  const height = 130;
+  const padL = isSingle ? 44 : 12;
+  const padR = 12, padT = 10, padB = 16;
+  const plotW = width - padL - padR;
+  const plotH = height - padT - padB;
+  const groupWidth = days.length > 0 ? plotW / days.length : 0;
+  const groupGap = Math.max(1, groupWidth * 0.18);
+  const barCount = visible.length;
+  const barSpacing = barCount > 1 ? 1 : 0;
+  const innerWidth = Math.max(1, groupWidth - groupGap);
+  const barWidth = Math.max(1, (innerWidth - barSpacing * (barCount - 1)) / barCount);
+  const yOfFor = (m) => {
+    const peak = isSingle ? yMax : (seriesPeak[m.id] || 0);
+    return v => padT + plotH - (peak > 0 ? (v / peak) * plotH : 0);
+  };
+  const xCenter = i => padL + groupWidth * i + groupWidth / 2;
+  const yGrid = [0, 0.5, 1].map(t => {
+    const y = padT + plotH - t * plotH;
+    let label = '';
+    if (isSingle) {
+      const v = yMax * t;
+      label = '<text class="axis-text" x="' + (padL - 6) + '" y="' + (y + 3) + '" text-anchor="end">' + escapeHtml(formatter(singleMetric, v)) + '</text>';
+    }
+    return '<line class="gridline" x1="' + padL + '" x2="' + (width - padR) + '" y1="' + y + '" y2="' + y + '"/>' + label;
+  }).join('');
+  const xLabelIdxs = days.length <= 1
+    ? [0]
+    : [0, Math.floor(days.length / 2), days.length - 1];
+  const xLabels = Array.from(new Set(xLabelIdxs)).map(i => {
+    return '<text class="axis-text" x="' + xCenter(i) + '" y="' + (height - 4) + '" text-anchor="middle">' + escapeHtml(_fmtDay(days[i])) + '</text>';
+  }).join('');
+  const bars = days.map((d, i) => {
+    const groupX = padL + groupWidth * i + groupGap / 2;
+    return visible.map((m, mi) => {
+      const v = valueOf(m, d);
+      if (v == null || !isFinite(v)) return '';
+      if (!isRatio && v === 0) return ''; // skip zero bars for cleanliness
+      const x = groupX + (barWidth + barSpacing) * mi;
+      const yOf = yOfFor(m);
+      const y = yOf(v);
+      const h = Math.max(0, padT + plotH - y);
+      return '<rect class="series-bar" data-day="' + escapeHtml(d) + '" data-metric="' + escapeHtml(m.id) + '" x="' + x.toFixed(2) + '" y="' + y.toFixed(2) + '" width="' + barWidth.toFixed(2) + '" height="' + h.toFixed(2) + '" fill="' + m.color + '"/>';
+    }).join('');
+  }).join('');
+  const svgHtml =
+    '<svg viewBox="0 0 ' + width + ' ' + height + '" preserveAspectRatio="none" role="img">' +
+      yGrid + xLabels + bars +
+      '<line class="hover-line" x1="0" y1="' + padT + '" x2="0" y2="' + (padT + plotH) + '"/>' +
+      '<rect class="pp-hover-rect" x="' + padL + '" y="' + padT + '" width="' + plotW + '" height="' + plotH + '" fill="transparent"/>' +
+    '</svg>' +
+    '<div class="pp-tooltip"></div>';
+  return { svgHtml, plot: { width, height, padL, padR, padT, padB, plotW, plotH, groupWidth, xCenter } };
+}
+
+// Attach hover behavior to a mini chart inside chartEl. visible / valueOf /
+// formatter match the build call so the tooltip shows the same values.
+function _wireMiniChartHover(chartEl, plot, opts) {
+  const days = opts.days;
+  const visible = opts.visible;
+  const valueOf = opts.valueOf;
+  const formatter = opts.formatter;
+  const emptyLabelFor = opts.emptyLabelFor; // (metric) => string | null
+  const rect = chartEl.querySelector('.pp-hover-rect');
+  const hoverLine = chartEl.querySelector('.hover-line');
+  const tip = chartEl.querySelector('.pp-tooltip');
+  if (!rect || !hoverLine || !tip) return;
+  const show = e => {
+    const svgEl = chartEl.querySelector('svg');
+    const box = svgEl.getBoundingClientRect();
+    const relX = e.clientX - box.left;
+    const scale = plot.width / box.width;
+    const svgX = relX * scale;
+    const idxRaw = (svgX - plot.padL) / (plot.groupWidth || 1);
+    const idx = Math.max(0, Math.min(days.length - 1, Math.floor(idxRaw)));
+    const snapX = plot.xCenter(idx);
+    hoverLine.setAttribute('x1', snapX);
+    hoverLine.setAttribute('x2', snapX);
+    hoverLine.style.opacity = '1';
+    const day = days[idx];
+    const rows = visible.map(m => {
+      const v = valueOf(m, day);
+      let display;
+      if (v == null || !isFinite(v)) {
+        display = (emptyLabelFor ? emptyLabelFor(m) : '\u2014');
+      } else {
+        display = formatter(m, v);
+      }
+      return '<div class="tt-row"><span class="swatch" style="background:' + m.color + ';"></span>' +
+             '<span>' + escapeHtml(m.label) + '</span>' +
+             '<span class="val">' + escapeHtml(display) + '</span></div>';
+    }).join('');
+    tip.innerHTML = '<div class="tt-day">' + escapeHtml(_fmtDay(day)) + '</div>' + rows;
+    const cssX = snapX / scale;
+    tip.style.transform = 'none';
+    tip.style.visibility = 'hidden';
+    tip.style.opacity = '1';
+    const tipW = tip.offsetWidth;
+    const tipH = tip.offsetHeight;
+    const cw = chartEl.clientWidth;
+    const margin = 4;
+    const gap = 10;
+    const chartBox = chartEl.getBoundingClientRect();
+    const svgOffsetLeft = box.left - chartBox.left;
+    const cursorPx = svgOffsetLeft + cssX;
+    let leftPx = cursorPx - tipW / 2;
+    if (leftPx + tipW > cw - margin) {
+      leftPx = cursorPx - tipW - gap;
+      if (leftPx < margin) leftPx = Math.max(margin, cw - margin - tipW);
+    } else if (leftPx < margin) {
+      leftPx = cursorPx + gap;
+      if (leftPx + tipW > cw - margin) leftPx = Math.max(margin, cw - margin - tipW);
+    }
+    let topPx = plot.padT - 6 - tipH;
+    if (topPx < margin) topPx = plot.padT + 12;
+    tip.style.left = leftPx + 'px';
+    tip.style.top = topPx + 'px';
+    tip.style.visibility = '';
+  };
+  const hide = () => { hoverLine.style.opacity = '0'; tip.style.opacity = '0'; };
+  rect.addEventListener('mousemove', show);
+  rect.addEventListener('mouseleave', hide);
+}
+
+// Render one mini chart for a single project in either 'daily' or 'ratio' scope.
+function _renderPerProjectChart(project, scope) {
+  const rowsEl = document.getElementById(scope === 'daily' ? 'daily-metrics-per-project-rows' : 'ratio-metrics-per-project-rows');
+  if (!rowsEl) return;
+  const rowEl = rowsEl.querySelector('.per-project-row[data-project="' + (window.CSS && CSS.escape ? CSS.escape(project) : project) + '"]');
+  if (!rowEl) return;
+  const chartEl = rowEl.querySelector('.per-project-chart');
+  if (!chartEl) return;
+  const projectSeries = _perProjectState.series[project];
+  if (!projectSeries) {
+    chartEl.innerHTML = '<div class="pp-empty">Loading\u2026</div>';
+    rowEl.classList.add('pp-loading');
+    return;
+  }
+  rowEl.classList.remove('pp-loading');
+  const days = _perProjectState.days;
+  // Map each metric id -> the endpoint key its data comes from in _perProjectFetchOne.
+  // Used below to detect when ALL visible metrics are powered by a failed endpoint
+  // (e.g. funnel timed out for this project), so we can render an explicit "failed
+  // to load" hint instead of silently drawing flat zeros that look like real data.
+  const failedKeys = new Set((_perProjectState.failed[project] || []).map(f => f.key));
+  const _sourceKeyForMetric = (m) => {
+    if (m.funnel) return 'funnel';
+    if (m.id === 'posts' || m.id === 'threads' || m.id === 'comments_made') return 'posts';
+    return m.id; // views / upvotes / comments / clicks / bookings / cost match by id
+  };
+  if (scope === 'daily') {
+    const active = _loadDailyMetricsActive();
+    const visible = DAILY_METRICS.filter(m => active.has(m.id));
+    if (!visible.length) {
+      chartEl.innerHTML = '<div class="pp-empty">No metrics selected.</div>';
+      return;
+    }
+    // If every visible metric's source endpoint failed for this project,
+    // show a clear failure hint instead of silent zeros.
+    if (visible.every(m => failedKeys.has(_sourceKeyForMetric(m)))) {
+      const failKeys = Array.from(new Set(visible.map(m => _sourceKeyForMetric(m))));
+      const timedOut = (_perProjectState.failed[project] || []).some(f => f.timedOut && failKeys.includes(f.key));
+      chartEl.innerHTML = '<div class="pp-empty" style="color:#dc2626;">Failed to load (' + (timedOut ? 'timed out' : 'error') + ': ' + escapeHtml(failKeys.join(', ')) + ')</div>';
+      return;
+    }
+    const valueOf = (m, d) => Number((projectSeries[m.id] || {})[d]) || 0;
+    const formatter = (m, v) => _fmtForMetric(m, v);
+    const { svgHtml, plot } = _buildMiniChartSvg({ days, visible, valueOf, isRatio: false, formatter });
+    chartEl.innerHTML = svgHtml;
+    _wireMiniChartHover(chartEl, plot, { days, visible, valueOf, formatter });
+  } else {
+    const active = _loadRatioMetricsActive();
+    const visible = RATIO_METRICS.filter(r => active.has(r.id));
+    if (!visible.length) {
+      chartEl.innerHTML = '<div class="pp-empty">No ratios selected.</div>';
+      return;
+    }
+    // Build per-ratio per-day series from this project's numerator/denominator.
+    const ratioCache = {};
+    visible.forEach(r => {
+      const numByDay = projectSeries[r.numerator]   || {};
+      const denByDay = projectSeries[r.denominator] || {};
+      const scale = (typeof r.scaleFactor === 'number') ? r.scaleFactor : 100;
+      const map = {};
+      days.forEach(d => {
+        const num = Number(numByDay[d]) || 0;
+        const den = Number(denByDay[d]) || 0;
+        map[d] = (den > 0) ? (num / den * scale) : null;
+      });
+      ratioCache[r.id] = map;
+    });
+    const valueOf = (r, d) => ratioCache[r.id][d];
+    const formatter = (r, v) => _fmtForRatio(r, v);
+    const emptyLabelFor = (r) => (r.denominator === 'pageviews') ? 'no visitors'
+                                : (r.denominator === 'posts')     ? 'no posts'
+                                : 'no views';
+    const { svgHtml, plot } = _buildMiniChartSvg({ days, visible, valueOf, isRatio: true, formatter });
+    chartEl.innerHTML = svgHtml;
+    _wireMiniChartHover(chartEl, plot, { days, visible, valueOf, formatter, emptyLabelFor });
+  }
+}
+
+// Render BOTH scopes (daily + ratio) for one project. Cheap; only the open
+// section will be visually scrolled into view, but rendering both keeps the
+// state symmetric.
+function _renderPerProjectBoth(project) {
+  _renderPerProjectChart(project, 'daily');
+  _renderPerProjectChart(project, 'ratio');
+}
+
+// Re-render every per-project row for both scopes. Used after legend pill
+// toggles (no fetch, just SVG rebuild) and after a fresh load completes.
+function _renderPerProjectAll() {
+  const projects = _perProjectGetProjects();
+  projects.forEach(p => _renderPerProjectBoth(p));
+}
+
+// Build (or rebuild) the row skeleton in both containers. One row per project
+// with a project label and an empty .per-project-chart waiting for render.
+function _renderPerProjectSkeleton() {
+  const projects = _perProjectGetProjects();
+  ['daily-metrics-per-project-rows', 'ratio-metrics-per-project-rows'].forEach(id => {
+    const el = document.getElementById(id);
+    if (!el) return;
+    if (!projects.length) {
+      el.innerHTML = '<div class="views-chart-empty">No projects.</div>';
+      return;
+    }
+    el.innerHTML = projects.map(p => (
+      '<div class="per-project-row pp-loading" data-project="' + escapeHtml(p) + '">' +
+        '<div class="per-project-label">' + escapeHtml(p) + '</div>' +
+        '<div class="per-project-chart"><div class="pp-empty">Loading\u2026</div></div>' +
+      '</div>'
+    )).join('');
+  });
+}
+
+function _setPerProjectStatus(text) {
+  ['daily-metrics-per-project-status', 'ratio-metrics-per-project-status'].forEach(id => {
+    const el = document.getElementById(id);
+    if (el) el.textContent = text || '';
+  });
+}
+
+// Lazy-load entry point. Triggered by details toggle and by filter changes
+// while at least one details is open. No-op if already loading or already
+// loaded for the current (granularity, platform) key.
+async function _perProjectLoadIfNeeded() {
+  const want = _perProjectCacheKey();
+  if (_perProjectState.loadedKey === want) {
+    _renderPerProjectSkeleton();
+    _renderPerProjectAll();
+    return;
+  }
+  if (_perProjectState.loading) return;
+  _perProjectState.loading = true;
+  _perProjectState.loadedKey = want;
+  _perProjectState.series = {};
+  _perProjectState.failed = {};
+  const gran = currentTrendsGranularity();
+  const platform = currentTrendsPlatform();
+  const fetchDays = gran === 'weekly' ? DAILY_METRICS_DAYS_WEEKLY : DAILY_METRICS_DAYS_DAILY;
+  const today = new Date();
+  const dailyAxis = [];
+  for (let i = fetchDays - 1; i >= 0; i--) {
+    const d = new Date(today);
+    d.setDate(today.getDate() - i);
+    dailyAxis.push(d.toISOString().slice(0, 10));
+  }
+  // Axis stored on state matches the granularity (weekly buckets or daily).
+  if (gran === 'weekly') {
+    const { weekKeys } = _bucketWeekly(dailyAxis, {});
+    _perProjectState.days = weekKeys;
+  } else {
+    _perProjectState.days = dailyAxis;
+  }
+  _renderPerProjectSkeleton();
+  const projects = _perProjectGetProjects();
+  let done = 0;
+  _setPerProjectStatus('0 / ' + projects.length);
+  try {
+    // 2 concurrent projects = 16 simultaneous endpoint calls (8 per project).
+    // 3 was overloading the dashboard's pg pool and PostHog rate limits on a
+    // cold cache; 2 keeps the per-project load slow-but-steady and lets the
+    // pg pool (now max:25) actually drain between waves.
+    await _perProjectRunConcurrency(projects, 2, async (project) => {
+      // Bail if filters changed mid-load.
+      if (_perProjectState.loadedKey !== want) return;
+      const { series, failed } = await _perProjectFetchOne(project, gran, platform, fetchDays, dailyAxis);
+      if (_perProjectState.loadedKey !== want) return;
+      _perProjectState.series[project] = series;
+      _perProjectState.failed[project] = failed;
+      _renderPerProjectBoth(project);
+      done += 1;
+      _setPerProjectStatus(done + ' / ' + projects.length);
+    });
+  } finally {
+    _perProjectState.loading = false;
+  }
+  // Final status: how many had any failed endpoint?
+  const failedCount = Object.values(_perProjectState.failed).filter(arr => arr && arr.length).length;
+  _setPerProjectStatus(projects.length + ' / ' + projects.length + (failedCount ? ' · ' + failedCount + ' partial' : ''));
+}
+
+// Wire details toggle on first DOMContentLoaded. Idempotent so it survives
+// any partial reloads. Hook is delayed via setTimeout to make sure the
+// elements exist before we attach.
+function _wirePerProjectToggles() {
+  ['daily-metrics-per-project', 'ratio-metrics-per-project'].forEach(id => {
+    const el = document.getElementById(id);
+    if (!el || el.dataset.wired === '1') return;
+    el.dataset.wired = '1';
+    el.addEventListener('toggle', () => {
+      if (el.open) _perProjectLoadIfNeeded();
+    });
+  });
+}
+
 // Trends-tab filter state. Selection is read off the trends pill rows by
 // data-selected; granularity drives the day count and axis bucketing.
 function currentTrendsPlatform() {
@@ -11279,13 +12167,14 @@ async function loadDailyMetrics() {
   // or any transient 5xx) renders the affected series as flat zeros instead
   // of killing the whole chart. The "Unable to load daily metrics" fallback
   // below now only triggers when literally every fetch failed.
-  // Per-endpoint timeout. /api/funnel/per-day shells out to PostHog +
-  // Postgres and at days=91 (weekly window) it can hang well past 15s,
-  // which previously froze the entire chart because Promise.all waited on
-  // the slowest of 5. Cap each fetch at ~9s so a slow endpoint degrades
-  // gracefully (renders as flat zeros with the "rendered N of 5" note in
-  // the status pill) instead of leaving a permanent "Loading…" placeholder.
-  const FETCH_TIMEOUT_MS = 9000;
+  // Per-endpoint timeout. /api/funnel/per-day shells out to PostHog HogQL
+  // and at days=91 (weekly window) routinely takes 15-25s on a cold cache.
+  // 9s was too tight: on a fresh page load the funnel endpoint timed out
+  // and the top chart's Get Started / Visitors / Email Signups / Schedule
+  // Clicks series all rendered as flat zeros. Bumped to 30s; paired with
+  // the funnel pre-warmer (launchd com.m13v.social-funnel-prewarm) which
+  // keeps the 5-min server cache hot so most fetches still return fast.
+  const FETCH_TIMEOUT_MS = 30000;
   const fetchOne = async (url) => {
     const ctl = (typeof AbortController !== 'undefined') ? new AbortController() : null;
     const timer = ctl ? setTimeout(() => { try { ctl.abort(); } catch {} }, FETCH_TIMEOUT_MS) : null;
@@ -11371,6 +12260,11 @@ async function loadDailyMetrics() {
       .map(k => ({ key: k, timedOut: !!fetchResults[k].timedOut }));
     renderDailyMetrics();
     renderRatioMetrics();
+    // Propagate filter changes to the per-project breakdown. Cheap no-op
+    // when neither section is open and the cache key (granularity+platform)
+    // hasn't actually changed; otherwise it kicks off a fresh per-project
+    // fetch in the background.
+    try { _perProjectInvalidate(); } catch {}
   } catch (e) {
     if (chartEl) chartEl.innerHTML = '<div class="views-chart-empty">Unable to load daily metrics (' + escapeHtml(String(e.message || e)) + ').</div>';
   }
@@ -11668,7 +12562,7 @@ let _styleStatsTableState = { sortField: 'score', sortDir: 'desc', filters: {} }
 // OS-level title-attribute delay.
 const STYLE_STATS_HELP = {
   style:    'Engagement tone Claude used to draft this first-touch comment/post (slug from scripts/engagement_styles.py). The A/B testing system uses these stats to decide which tones to imitate next. Note: a row in the posts table = our FIRST-TOUCH engagement on a thread, not (usually) an original thread we authored. Reddit/Moltbook/GitHub = our top-level comment on someone else’s thread; X = our reply; LinkedIn = our comment. Subsequent back-and-forth replies live in a separate replies pipeline and are not counted here.',
-  score:    'Per-post quality signal computed on engagement that landed on OUR comment/post (replies to it, upvotes on it), not on the underlying third-party thread. Formula: (comments * 3 + upvotes_discounted) / posts. upvotes_discounted subtracts the OP self-upvote on Reddit and Moltbook so those platforms compare fairly with X/LinkedIn. Views are deliberately excluded so low-volume styles compare fairly with high-volume ones. Same signal the feedback report uses.',
+  score:    'Per-post quality signal computed on engagement that landed on OUR comment/post (clicks on our short link, replies to it, upvotes on it), not on the underlying third-party thread. Formula: (post_clicks * 10 + comments * 3 + upvotes_discounted) / posts. Click weight ×10 because a real human click outvalues 10 likes of vibes (matches top_performers.SCORE_SQL and the engagement_styles.py picker). upvotes_discounted subtracts the OP self-upvote on Reddit and Moltbook so those platforms compare fairly with X/LinkedIn. Views are deliberately excluded so low-volume styles compare fairly with high-volume ones.',
   posts:    'Count of first-touch comments/posts published in this style during the selected window. (Reddit comments on others’ threads, X replies, LinkedIn comments, etc. The rare run-reddit-threads.sh original-thread rows are also counted.)',
   upvotes:  'Sum of upvotes/likes received by OUR comment (or our thread, in the rare original-thread case). Net of the Reddit/Moltbook OP self-upvote (both platforms auto-apply +1 on every post; we strip it so a brand-new post starts at 0, not 1). Other platforms (X, LinkedIn, GitHub) pass through unchanged. Per-post average shown in parentheses.',
   comments: 'Sum of replies received by OUR comment (or comments under our thread). Per-post average in parentheses. Tracked in the posts.comments_count column, independent of the separate replies pipeline that records replies WE author.',
@@ -11715,17 +12609,31 @@ function formatStyleCell(name, metaMap) {
   const m = (metaMap && metaMap[name]) || null;
   if (!m || name === '(none)') return safeName;
   const lines = [];
-  if (m.description) lines.push(m.description);
-  if (m.note) lines.push('Note: ' + m.note);
-  if (m.why_existing_didnt_fit) lines.push('Why invented: ' + m.why_existing_didnt_fit);
+  // Bold the style name as the tooltip header.
+  lines.push('**' + name + '**');
+  if (m.description) {
+    lines.push('');
+    lines.push(m.description);
+  }
+  if (m.note) {
+    lines.push('');
+    lines.push('**Note:** ' + m.note);
+  }
+  if (m.why_existing_didnt_fit) {
+    lines.push('');
+    lines.push('**Why invented:** ' + m.why_existing_didnt_fit);
+  }
   const status = m.status || 'active';
   const provenance = [];
   if (status && status !== 'active') provenance.push('status=' + status);
   if (m.invented_at) provenance.push('invented ' + String(m.invented_at).slice(0, 10));
   if (m.first_post_platform) provenance.push('first on ' + m.first_post_platform);
   if (m.promoted_at) provenance.push('promoted ' + String(m.promoted_at).slice(0, 10));
-  if (provenance.length) lines.push(provenance.join(' · '));
-  if (!lines.length) return safeName;
+  if (provenance.length) {
+    lines.push('');
+    lines.push(provenance.join(' · '));
+  }
+  if (lines.length <= 1) return safeName;
   const tip = lines.join('\\n');
   return '<span data-tooltip="' + escapeHtml(tip) + '" style="cursor: help; border-bottom: 1px dotted var(--text-muted);">' + safeName + '</span>';
 }
@@ -11788,15 +12696,17 @@ function renderStyleStats(payload, meta) {
     const per   = total / denom;
     return fmt(total) + ' <span style="color:var(--text-muted);">(' + perPostStr(per) + ')</span>';
   };
-  // Per-post score matches top_performers.SCORE_SQL (comments*3 + upvotes, Reddit
-  // self-upvote discounted at SQL layer). Views deliberately excluded so this is
-  // the same signal Claude uses for imitation; comparing by per-post keeps low-
-  // volume styles on equal footing with high-volume ones.
+  // Per-post score matches top_performers.SCORE_SQL and engagement_styles.py
+  // picker (clicks*10 + comments*3 + upvotes, Reddit self-upvote discounted
+  // at SQL layer). Click weight ×10: one real human click outvalues 10 likes
+  // of vibes when ranking styles. Views deliberately excluded. Per-post avg
+  // keeps low-volume styles on equal footing with high-volume ones.
   const normalized = rows.map(r => {
     const posts            = Number(r.posts)             || 0;
     const comments         = Number(r.comments)          || 0;
     const upvotesDiscounted = Number(r.upvotes_discounted) || 0;
-    const score = posts > 0 ? (comments * 3 + upvotesDiscounted) / posts : 0;
+    const postClicks       = Number(r.post_clicks)       || 0;
+    const score = posts > 0 ? (postClicks * 10 + comments * 3 + upvotesDiscounted) / posts : 0;
     return {
       style:       r.style || '(none)',
       posts,
@@ -11804,7 +12714,7 @@ function renderStyleStats(payload, meta) {
       upvotes:     Number(r.upvotes)     || 0,
       comments,
       views:       Number(r.views)       || 0,
-      post_clicks: Number(r.post_clicks) || 0,
+      post_clicks: postClicks,
       recommendations: Number(r.recommendations) || 0,
       score,
     };
@@ -11886,13 +12796,15 @@ async function loadStyleStats() {
 }
 
 // Score-cohort distribution. Buckets posts in the trailing window into
-// 4 cohorts (dead/low/mid/high) by composite score (comments*3 + upvotes,
-// minus 1 on Reddit/Moltbook to strip the OP self-upvote). Mirrors top_performers.
+// 4 cohorts (dead/low/mid/high) by composite score (clicks*10 + comments*3 +
+// upvotes, minus 1 on Reddit/Moltbook to strip the OP self-upvote). Mirrors
+// top_performers.SCORE_SQL and the engagement_styles.py picker. Bands
+// rescaled to absorb the click ×10 weight (a single click already adds 10).
 const COHORT_DEFS = [
-  { key: 'dead', label: 'Dead',  scoreLabel: '0',     blurb: 'No discussion, no upvotes beyond the OP self-upvote (Reddit/Moltbook). Skip imitating.' },
-  { key: 'low',  label: 'Low',   scoreLabel: '1\u20134',  blurb: 'A handful of upvotes OR a single comment. Faint signal, below the per-platform meaningful-engagement floor.' },
-  { key: 'mid',  label: 'Mid',   scoreLabel: '5\u201314', blurb: 'Real but modest reaction. Roughly 1\u20134 comments, or 5\u201314 upvotes, or a mix.' },
-  { key: 'high', label: 'High',  scoreLabel: '15+',   blurb: 'Posts that actually sparked discussion. Imitate these.' },
+  { key: 'dead', label: 'Dead',  scoreLabel: '0',     blurb: 'No discussion, no upvotes beyond the OP self-upvote (Reddit/Moltbook), no clicks. Skip imitating.' },
+  { key: 'low',  label: 'Low',   scoreLabel: '1\u20139',  blurb: 'A handful of upvotes OR a couple of comments, but no real clicks. Faint signal.' },
+  { key: 'mid',  label: 'Mid',   scoreLabel: '10\u201329', blurb: 'A single real click (×10), OR strong discussion (3+ comments), OR 10\u201329 upvotes. Worth imitating.' },
+  { key: 'high', label: 'High',  scoreLabel: '30+',   blurb: 'Multiple clicks plus discussion, or a viral comment thread. Imitate these.' },
 ];
 const COHORT_COLORS = { dead: '#9ca3af', low: '#60a5fa', mid: '#22c55e', high: '#a855f7' };
 
@@ -11932,7 +12844,7 @@ function renderCohortStats(payload) {
   const headers = [
     { label: 'Cohort',   tip: 'Bucket name. Tooltip on each row explains what that range means.' },
     { label: 'Posts',    tip: 'Number of posts in the bucket (and share of total in the current window/platform/project filter).' },
-    { label: 'Score',    tip: 'Composite score = comments \u00D7 3 + upvotes (Reddit/Moltbook subtract 1 to strip OP self-upvote). Range and average within this cohort.' },
+    { label: 'Score',    tip: 'Composite score = clicks \u00D7 10 + comments \u00D7 3 + upvotes (Reddit/Moltbook subtract 1 to strip OP self-upvote). Click weight \u00D710 matches top_performers.SCORE_SQL and the engagement_styles.py picker. Range and average within this cohort.' },
     { label: 'Upvotes',  tip: 'Upvote/like/reaction count range (min\u2013max) and average within this cohort. Raw, before the Reddit/Moltbook self-upvote discount.' },
     { label: 'Comments', tip: 'Reply/comment count range (min\u2013max) and average within this cohort.' },
     { label: 'Views',    tip: 'View count range (min\u2013max) and average within this cohort. Excludes Moltbook and GitHub since those platforms do not expose view counts.' },
@@ -12479,7 +13391,7 @@ function renderSearchQueriesStats(payload) {
         formatter: (v, row) => {
           const n = Number(v) || 0;
           if (row.serp_quality_avg != null) {
-            const tip = 'avg SERP quality (LinkedIn only): ' + row.serp_quality_avg.toFixed(1) + '/10';
+            const tip = '**Avg SERP quality** (LinkedIn only): **' + row.serp_quality_avg.toFixed(1) + '/10**';
             return '<span data-tooltip="' + escapeHtml(tip) + '">' + fmt(n) + '</span>';
           }
           return fmt(n);
@@ -12487,7 +13399,7 @@ function renderSearchQueriesStats(payload) {
       { key: 'dud_rate',    label: 'Dud %',     type: 'numeric', align: 'right', widthPct: 5,
         formatter: (v, row) => {
           const n = Number(v) || 0;
-          const tip = (row.dud_attempts || 0) + ' of ' + (row.attempts || 0) + ' attempts returned 0';
+          const tip = '**' + (row.dud_attempts || 0) + '** of **' + (row.attempts || 0) + '** attempts returned 0';
           const color = n >= 0.5 ? 'var(--danger,#dc2626)' : (n >= 0.25 ? 'var(--warn,#d97706)' : 'var(--text-secondary)');
           return '<span data-tooltip="' + escapeHtml(tip) + '" style="color:' + color + ';font-variant-numeric:tabular-nums;">' + pct(n) + '</span>';
         } },
@@ -12500,13 +13412,15 @@ function renderSearchQueriesStats(payload) {
       { key: 'avg_engagement', label: 'Avg Eng', type: 'numeric', align: 'right', widthPct: 4,
         formatter: v => {
           if (v == null) return '<span style="color:var(--text-faint);">\u2014</span>';
-          const tip = 'comments\u00D73 + upvotes on our reply (same formula as top_performers.py)';
+          const tip = '**Formula:** comments\u00D73 + upvotes on our reply' + String.fromCharCode(10) +
+                      '(same as top_performers.py)';
           return '<span data-tooltip="' + escapeHtml(tip) + '" style="font-variant-numeric:tabular-nums;">' + fmt1(v) + '</span>';
         } },
       { key: 'avg_views',   label: 'Avg Views', type: 'numeric', align: 'right', widthPct: 4,
         formatter: v => {
           if (v == null) return '<span data-tooltip="LinkedIn does not expose comment views" style="color:var(--text-faint);">\u2014</span>';
-          const tip = 'avg view count on our Twitter reply (raw, not weighted into Avg Eng)';
+          const tip = '**Avg view count** on our Twitter reply' + String.fromCharCode(10) +
+                      '(raw, not weighted into Avg Eng)';
           return '<span data-tooltip="' + escapeHtml(tip) + '" style="font-variant-numeric:tabular-nums;">' + fmt(Math.round(v)) + '</span>';
         } },
       { key: 'last_run',    label: 'Last Run',  type: 'numeric', align: 'right', widthPct: 4,
@@ -12566,11 +13480,11 @@ function renderCostStats(payload) {
   if (totalEl) {
     totalEl.textContent = '$' + totalCost.toFixed(2) + ' · ' + totalCount.toLocaleString() + ' activit' + (totalCount === 1 ? 'y' : 'ies');
     const tipLines = [
-      'Cost (SDK orchestrator): $' + totalOrch.toFixed(4),
+      '**Cost (SDK orchestrator):** $' + totalOrch.toFixed(4),
       '',
-      'Diagnostic-only (local pricing estimate, not actual billing):',
-      '  Transcript estimate: $' + totalEst.toFixed(4),
-      '  Subagent (est): $' + totalSub.toFixed(4),
+      '**Diagnostic-only** (local pricing estimate, not actual billing)',
+      '• Transcript estimate: $' + totalEst.toFixed(4),
+      '• Subagent (est): $' + totalSub.toFixed(4),
       '',
       'Anthropic SDK-reported orchestrator_cost_usd. Pipelines whose wrappers don\\'t capture --orchestrator-cost-usd contribute $0 — see the per-phase table for which scripts are missing coverage.',
     ];
@@ -12587,11 +13501,11 @@ function renderCostStats(payload) {
   function fmtCount(v) { return (Number(v) || 0).toLocaleString(); }
   function moneyCell(displayed, orch, est, sub) {
     const tip = [
-      'Cost (SDK orchestrator): ' + (orch != null ? fmtMoney(orch) : 'n/a'),
+      '**Cost (SDK orchestrator):** ' + (orch != null ? fmtMoney(orch) : 'n/a'),
       '',
-      'Diagnostic-only (local pricing estimate):',
-      '  Transcript estimate: ' + (est != null ? fmtMoney(est) : 'n/a'),
-      '  Subagent (est): ' + (sub != null ? fmtMoney(sub) : 'n/a'),
+      '**Diagnostic-only** (local pricing estimate)',
+      '• Transcript estimate: ' + (est != null ? fmtMoney(est) : 'n/a'),
+      '• Subagent (est): ' + (sub != null ? fmtMoney(sub) : 'n/a'),
     ].join('\\n');
     return '<span data-tooltip="' + escapeHtml(tip) +
       '" style="cursor:help;border-bottom:1px dotted var(--text-muted);">' +
@@ -13129,7 +14043,15 @@ function renderTopPosts(payload) {
           let clickLine = '';
           if (hasLink) {
             if (havePerClick) {
-              const tip = 'Humans / bots split from post_link_clicks (UA bot regex). Real clicks are the human number. Bots are Twitter card / LinkedIn unfurl / Slack preview prefetches. CTR = humans / views.';
+              const tip =
+                '**Clicks: humans / bots**' + String.fromCharCode(10) +
+                String.fromCharCode(10) +
+                'Split from post_link_clicks (UA bot regex).' + String.fromCharCode(10) +
+                String.fromCharCode(10) +
+                '• **Real clicks** = the human number' + String.fromCharCode(10) +
+                '• **Bots** = Twitter card / LinkedIn unfurl / Slack preview prefetches' + String.fromCharCode(10) +
+                String.fromCharCode(10) +
+                '**CTR** = humans / views';
               clickLine = '<span class="top-stats-bit" data-tooltip="' + escapeHtml(tip) + '">'
                 + '<span class="top-stats-k">clicks</span>'
                 + real
@@ -13137,7 +14059,14 @@ function renderTopPosts(payload) {
                 + ' <span style="color:var(--text-muted);">/ ' + bots + '</span>'
                 + '</span>';
             } else if (backfill > 0) {
-              const tip = 'Estimated from PostHog $pageview events with matching utm_content (real humans only, bots already filtered by PostHog). Pre 2026-05-07 row, no per-click log; backfilled by scripts/backfill_real_clicks.py. CTR = backfill / views.';
+              const tip =
+                '**Clicks (estimated)**' + String.fromCharCode(10) +
+                String.fromCharCode(10) +
+                'Estimated from PostHog $pageview events with matching utm_content. Real humans only — bots already filtered by PostHog.' + String.fromCharCode(10) +
+                String.fromCharCode(10) +
+                'Pre 2026-05-07 row, no per-click log; backfilled by scripts/backfill_real_clicks.py.' + String.fromCharCode(10) +
+                String.fromCharCode(10) +
+                '**CTR** = backfill / views';
               clickLine = '<span class="top-stats-bit" data-tooltip="' + escapeHtml(tip) + '">'
                 + '<span class="top-stats-k">clicks</span>'
                 + backfill
@@ -13145,7 +14074,14 @@ function renderTopPosts(payload) {
                 + ' <span style="color:var(--text-muted);">(estimated)</span>'
                 + '</span>';
             } else if (legacy > 0) {
-              const tip = 'Legacy click count (pre 2026-05-07). Twitter card / LinkedIn / Slack preview bots inflated this ~20x. New clicks split humans/bots in post_link_clicks. Destination domain has no PostHog so we cannot backfill the real number. CTR = legacy / views (also inflated).';
+              const tip =
+                '**Clicks (legacy)** — pre 2026-05-07' + String.fromCharCode(10) +
+                String.fromCharCode(10) +
+                'Twitter card / LinkedIn / Slack preview bots inflated this ~20×.' + String.fromCharCode(10) +
+                String.fromCharCode(10) +
+                'New clicks split humans/bots in post_link_clicks. Destination domain has no PostHog so we cannot backfill the real number.' + String.fromCharCode(10) +
+                String.fromCharCode(10) +
+                '**CTR** = legacy / views (also inflated)';
               clickLine = '<span class="top-stats-bit" data-tooltip="' + escapeHtml(tip) + '">'
                 + '<span class="top-stats-k">clicks</span>'
                 + legacy
@@ -14272,7 +15208,11 @@ function renderTopDms(payload) {
           clickLine = '<div class="dm-stat-line dm-stat-line-muted"><span class="dm-stat-num">—</span> <span class="dm-stat-label">clicks</span></div>';
         } else {
           const lastAt = r.short_link_last_click_at ? new Date(r.short_link_last_click_at).toLocaleString() : 'never';
-          const tip = '/r/' + String(r.short_link_code) + (clicks ? (' • last click: ' + lastAt) : ' • no clicks yet');
+          const tipNL = String.fromCharCode(10);
+          const tip = '**Short link** /r/' + String(r.short_link_code) + tipNL +
+            (clicks
+              ? tipNL + '**Last click:** ' + lastAt
+              : tipNL + 'No clicks yet');
           const color = clicks > 0 ? 'var(--accent)' : 'var(--text-muted)';
           clickLine = '<div class="dm-stat-line" data-tooltip="' + escapeHtml(tip) + '" style="color:' + color + ';"><span class="dm-stat-num" style="font-variant-numeric:tabular-nums;">' + fmt(clicks) + '</span> <span class="dm-stat-label">clicks</span></div>';
         }
@@ -14282,7 +15222,14 @@ function renderTopDms(payload) {
           bookedLine = '<div class="dm-stat-line dm-stat-line-muted"><span class="dm-stat-num">—</span> <span class="dm-stat-label">booked</span></div>';
         } else {
           const lastAt = r.last_booking_at ? new Date(r.last_booking_at).toLocaleString() : '';
-          const tip = booked + ' booked' + (cancelled ? (' • ' + cancelled + ' cancelled') : '') + (lastAt ? (' • last: ' + lastAt) : '');
+          const bNL = String.fromCharCode(10);
+          const tipParts = ['**Bookings**', '', '• **Booked:** ' + booked];
+          if (cancelled) tipParts.push('• **Cancelled:** ' + cancelled);
+          if (lastAt) {
+            tipParts.push('');
+            tipParts.push('**Last booking:** ' + lastAt);
+          }
+          const tip = tipParts.join(bNL);
           bookedLine = '<div class="dm-stat-line" data-tooltip="' + escapeHtml(tip) + '" style="color:var(--success);font-weight:600;"><span class="dm-stat-num" style="font-variant-numeric:tabular-nums;">' + fmt(booked) + '</span> <span class="dm-stat-label">booked</span></div>';
         }
 
@@ -14295,13 +15242,19 @@ function renderTopDms(payload) {
         const wrapped = !!(r.booking_link_sent_at || linkCount > 0);
         const detected = !!r.outbound_url_detected;
         if (!wrapped && !detected) return '<span style="color:var(--text-faint);">No</span>';
-        const tipParts = [];
-        if (r.booking_link_sent_at) tipParts.push('booking link sent: ' + new Date(r.booking_link_sent_at).toLocaleString());
-        if (linkCount > 0) tipParts.push(linkCount + ' wrapped link' + (linkCount === 1 ? '' : 's'));
-        if (r.short_link_code) tipParts.push('latest: /r/' + String(r.short_link_code));
-        if (!wrapped && detected) tipParts.push('raw URL detected in outbound text (wrap pipeline bypassed - no dm_links row, click tracking missing)');
-        else if (detected && wrapped) tipParts.push('also: raw URL in outbound text');
-        const tip = tipParts.join(' • ');
+        const tipParts = ['**Link tracking**', ''];
+        if (r.booking_link_sent_at) tipParts.push('• **Booking link sent:** ' + new Date(r.booking_link_sent_at).toLocaleString());
+        if (linkCount > 0) tipParts.push('• **' + linkCount + ' wrapped link' + (linkCount === 1 ? '' : 's') + '**');
+        if (r.short_link_code) tipParts.push('• **Latest:** /r/' + String(r.short_link_code));
+        if (!wrapped && detected) {
+          tipParts.push('');
+          tipParts.push('**Raw URL detected** in outbound text');
+          tipParts.push('(wrap pipeline bypassed — no dm_links row, click tracking missing)');
+        } else if (detected && wrapped) {
+          tipParts.push('');
+          tipParts.push('Also: raw URL in outbound text');
+        }
+        const tip = tipParts.join(String.fromCharCode(10));
         const tipAttr = tip ? ' data-tooltip="' + escapeHtml(tip) + '"' : '';
         const label = wrapped ? 'Yes' : 'Yes*';
         const color = wrapped ? 'var(--success)' : '#b45309';
@@ -15111,11 +16064,11 @@ function renderProjectStatus(data, opts) {
     // SDK-only mode: displayed value comes from orchestrator_cost_usd; the
     // estimate and subagent are diagnostic-only (local pricing table).
     const tip = [
-      'Cost (SDK orchestrator): ' + (orch != null ? fmtMoney(orch) : 'n/a'),
+      '**Cost (SDK orchestrator):** ' + (orch != null ? fmtMoney(orch) : 'n/a'),
       '',
-      'Diagnostic-only (local pricing estimate, not actual billing):',
-      '  Transcript estimate: ' + (est != null ? fmtMoney(est) : 'n/a'),
-      '  Subagent (est): ' + (sub != null ? fmtMoney(sub) : 'n/a'),
+      '**Diagnostic-only** (local pricing estimate, not actual billing)',
+      '• Transcript estimate: ' + (est != null ? fmtMoney(est) : 'n/a'),
+      '• Subagent (est): ' + (sub != null ? fmtMoney(sub) : 'n/a'),
       '',
       'Anthropic SDK-reported cost only. "n/a" or $0 means the wrapper didn\\'t capture --orchestrator-cost-usd (no --output-format json on the claude call) for one or more sessions in this window. Subagent and transcript estimates are computed from a local pricing table and are not billing-accurate on subscription plans.',
     ].join('\\n');
@@ -15133,11 +16086,11 @@ function renderProjectStatus(data, opts) {
       : base;
     if (costAvailable) {
       const tipLines = [
-        'Cost (SDK orchestrator): ' + fmtMoney(grandCostOrch),
+        '**Cost (SDK orchestrator):** ' + fmtMoney(grandCostOrch),
         '',
-        'Diagnostic-only (local pricing estimate, not actual billing):',
-        '  Transcript estimate: ' + fmtMoney(grandCostEst),
-        '  Subagent (est): ' + fmtMoney(grandCostSub),
+        '**Diagnostic-only** (local pricing estimate, not actual billing)',
+        '• Transcript estimate: ' + fmtMoney(grandCostEst),
+        '• Subagent (est): ' + fmtMoney(grandCostSub),
         '',
         'Anthropic SDK-reported orchestrator_cost_usd across all activity rows in this window. Per-session attribution is the session\\'s cost split evenly across its activity rows. Pipelines whose wrappers don\\'t pass --output-format json to claude contribute $0.',
       ];
@@ -15412,7 +16365,11 @@ async function loadFunnelStats(force) {
   if (_funnelStatsLoading) return;
   if (saAuthNotReady()) return;
   const days = currentStatsWindow().days;
-  if (_funnelStatsLoadedFor === days && !force) return;
+  const platform = currentStatsPlatform();
+  // Cache key is window+platform so a platform-pill change forces a refetch
+  // even when the days dropdown stayed the same. Matches the server's cache key.
+  const loadKey = days + '|' + platform;
+  if (_funnelStatsLoadedFor === loadKey && !force) return;
   _funnelStatsLoading = true;
   const totalEl = document.getElementById('funnel-stats-total');
   const body = document.getElementById('funnel-stats-body');
@@ -15421,11 +16378,13 @@ async function loadFunnelStats(force) {
     body.innerHTML = '<div class="style-stats-empty">Loading\u2026 (first call can take 15\u201330s)</div>';
   }
   try {
-    const res = await fetch('/api/funnel/stats?days=' + days);
+    const params = ['days=' + days];
+    if (platform && platform !== 'all') params.push('platform=' + encodeURIComponent(platform));
+    const res = await fetch('/api/funnel/stats?' + params.join('&'));
     const data = await res.json();
     if (data && !data.error) _lastFunnelPayload = data;
     renderFunnelStats(data);
-    _funnelStatsLoadedFor = days;
+    _funnelStatsLoadedFor = loadKey;
   } catch (e) {
     if (body) body.innerHTML = '<div class="style-stats-empty">Failed to load.</div>';
   } finally {
@@ -15808,6 +16767,15 @@ _saInstallDeleteListener();
   });
 })();
 
+// Wire the per-project breakdown <details> toggles so the first time the
+// user opens either one we kick off a lazy fetch. Subsequent opens reuse
+// the cache built for the current (granularity, platform) key.
+(function wirePerProjectBreakdownToggles() {
+  if (typeof _wirePerProjectToggles === 'function') {
+    _wirePerProjectToggles();
+  }
+})();
+
 // Lazy-load funnel stats the first time the user opens the section. The fetch
 // shells out to PostHog and two Postgres DBs, so we don't want to run it on
 // every page load.