From a6d5b3fc2c30004f578284e79bbbea099723517f Mon Sep 17 00:00:00 2001
From: mkdev11 <94194147+MkDev11@users.noreply.github.com>
Date: Tue, 30 Jun 2026 19:08:27 +0200
Subject: [PATCH] Make social links drive speaker names in preview (Closes #63)

Wire the setup social-link fields through to the live composed preview:
derived handles now update canvas speaker labels immediately, persist across
Split/Stack/Spotlight, clear/replace per bucket only, and keep export enabled.

- episode.js: broaden deriveHandle (plain handles, trailing slashes,
  youtube @handles) and add speakerLabels() for preview/export consumers
- preview.js: paint scaled labels per layout rect and expose
  data-speaker-labels on the canvas for verification
- ui.js: handle both input and change on social-link fields; force a
  drawFrame after link edits so preview labels refresh without waiting
- verify-social-context.mjs: upload 3 speakers, assert canvas + setup
  derived names, preset survival, per-speaker clear/replace, export enabled
---
 .builderloops/verify.json         |   2 +-
 app/episode.js                    |  30 ++++++--
 app/preview.js                    |  18 +++--
 app/ui.js                         |  25 +++---
 scripts/preview-build.mjs         |  10 +++
 scripts/typecheck.mjs             |   2 +-
 scripts/verify-social-context.mjs | 122 +++++++++++++++++++-----------
 tests/episode.test.mjs            |  13 ++++
 8 files changed, 157 insertions(+), 65 deletions(-)

diff --git a/.builderloops/verify.json b/.builderloops/verify.json
index 0d932f4..ca0097e 100644
--- a/.builderloops/verify.json
+++ b/.builderloops/verify.json
@@ -1,5 +1,5 @@
 {
-  "comment": "Build-correctness and rendered-workflow gate: zero-dependency unit tests over the DOM-free episode/preset model, a preview-build smoke check, a headless Chrome rendered workflow that uploads three generated local WebM files through the shipped Host/Guest controls and decodes blob-backed pixels in the composed preview across Split/Stack/Spotlight — including per-region Stack row pixels and Spotlight host-dominant/PiP geometry — surviving preset switches with export still enabled, a headless social-context workflow that enters distinct per-speaker social links through the real inputs and confirms they store per speaker, surface as derived names in the preview, and survive a preset switch with the uploads intact, and a headless export workflow that uploads two generated videos, enters social links, chooses a preset, clicks the real Export action, and confirms the produced file is a genuinely playable video (loads back into a <video> with real dimensions and non-trivial bytes) reflecting the selected preset. No seeded product media, committed fixture output, or verifier-only product paths are used.",
+  "comment": "Build-correctness and rendered-workflow gate: zero-dependency unit tests over the DOM-free episode/preset model, a preview-build smoke check, a headless Chrome rendered workflow that uploads three generated local WebM files through the shipped Host/Guest controls and decodes blob-backed pixels in the composed preview across Split/Stack/Spotlight — including per-region Stack row pixels and Spotlight host-dominant/PiP geometry — surviving preset switches with export still enabled, a headless social-context workflow that uploads three speaker videos, enters distinct per-speaker social links through the real inputs (input and change events), confirms derived names appear on the live canvas preview labels and in setup, survive preset switching, clear/replace per speaker only, and keep export enabled, and a headless export workflow that uploads two generated videos, enters social links, chooses a preset, clicks the real Export action, and confirms the produced file is a genuinely playable video (loads back into a <video> with real dimensions and non-trivial bytes) reflecting the selected preset. No seeded product media, committed fixture output, or verifier-only product paths are used.",
   "checks": [
     { "name": "test", "run": "node scripts/run-tests.mjs" },
     { "name": "preview-build", "run": "node scripts/preview-build.mjs" },
diff --git a/app/episode.js b/app/episode.js
index 0944ced..09faabb 100644
--- a/app/episode.js
+++ b/app/episode.js
@@ -58,20 +58,37 @@
     if (!s) return "";
     const at = s.match(/^@([A-Za-z0-9_.\-]+)$/);
     if (at) return at[1];
-    s = s.replace(/^https?:\/\//i, "").replace(/^www\./i, "").split(/[?#]/)[0];
+    // Allow a plain handle when the creator skips the full URL.
+    if (/^[A-Za-z0-9_.\-]+$/.test(s)) return s;
+    s = s.replace(/^https?:\/\//i, "").replace(/^www\./i, "").split(/[?#]/)[0].replace(/\/+$/, "");
     const parts = s.split("/").filter(Boolean);
-    const last = parts.length > 1 ? parts[parts.length - 1] : "";
-    const handle = (last || "").replace(/^@/, "");
-    return handle;
+    if (!parts.length) return "";
+    // Walk path segments from the end; skip empty/@-only and generic route words.
+    for (let i = parts.length - 1; i >= 0; i--) {
+      const seg = parts[i].replace(/^@/, "");
+      if (!seg) continue;
+      if (/^(in|user|u|profile|channel|c|people|@)$/i.test(seg)) continue;
+      if (i === 0 && seg.includes(".")) continue; // domain-only remainder
+      return seg;
+    }
+    return "";
   }
 
-  // The name to display for a speaker: derived from their social link when one
-  // is set, otherwise the default bucket label (Host / Guest 1 / Guest 2).
+  // Display name for one speaker bucket (derived link handle or bucket label).
   function speakerName(episode, bucket) {
     const fallback = (PDC.presets.BUCKET_LABELS && PDC.presets.BUCKET_LABELS[bucket]) || bucket;
     return deriveHandle(getSocialLink(episode, bucket)) || fallback;
   }
 
+  // Map each speaker bucket to the label the preview should show right now.
+  function speakerLabels(episode) {
+    const labels = {};
+    SPEAKER_BUCKETS.forEach(function (bucket) {
+      labels[bucket] = speakerName(episode, bucket);
+    });
+    return labels;
+  }
+
   // Buckets that currently hold media, in canonical speaker order.
   function assignedBuckets(episode) {
     return SPEAKER_BUCKETS.filter((b) => episode.media[b]);
@@ -112,6 +129,7 @@
     getSocialLink,
     deriveHandle,
     speakerName,
+    speakerLabels,
     canCompose,
     readinessReason,
   };
diff --git a/app/preview.js b/app/preview.js
index d7e86c0..3c30c72 100644
--- a/app/preview.js
+++ b/app/preview.js
@@ -114,6 +114,7 @@
       ctx.fillStyle = "#05070c";
       ctx.fillRect(0, 0, w, h);
 
+      const labels = {};
       buckets.forEach(function (bucket, i) {
         const rect = rects[i] || rects[rects.length - 1];
         const x = (rect.x / 100) * w;
@@ -121,6 +122,8 @@
         const rw = (rect.w / 100) * w;
         const rh = (rect.h / 100) * h;
         const v = videos[bucket];
+        const label = PDC.episode.speakerName(episodeRef, bucket);
+        labels[bucket] = label;
 
         ctx.fillStyle = "#000";
         ctx.fillRect(x, y, rw, rh);
@@ -150,18 +153,22 @@
           ctx.strokeRect(x + 1, y + 1, rw - 2, rh - 2);
         }
 
-        const label = PDC.episode.speakerName(episodeRef, bucket);
         if (label) {
-          ctx.fillStyle = "rgba(8,10,16,0.72)";
-          ctx.fillRect(x + 8, y + rh - 28, Math.min(rw - 16, label.length * 9 + 20), 22);
+          const fontSize = Math.max(11, Math.min(14, Math.round(rh * 0.09)));
+          const padX = Math.max(8, Math.round(rw * 0.03));
+          const barW = Math.min(rw - padX * 2, label.length * (fontSize * 0.62) + 16);
+          const barH = Math.max(18, fontSize + 8);
+          ctx.fillStyle = "rgba(8,10,16,0.78)";
+          ctx.fillRect(x + padX, y + rh - barH - 6, barW, barH);
           ctx.fillStyle = "#fff";
-          ctx.font = "600 14px system-ui, sans-serif";
-          ctx.fillText(label, x + 14, y + rh - 12);
+          ctx.font = "600 " + fontSize + "px system-ui, sans-serif";
+          ctx.fillText(label, x + padX + 6, y + rh - 10);
         }
       });
 
       canvasEl.dataset.preset = preset.id;
       canvasEl.dataset.speakers = String(buckets.length);
+      canvasEl.dataset.speakerLabels = JSON.stringify(labels);
     }
 
     function loop() {
@@ -191,6 +198,7 @@
         ctx.fillRect(0, 0, canvasEl.width, canvasEl.height);
         canvasEl.dataset.preset = "";
         canvasEl.dataset.speakers = "0";
+        canvasEl.dataset.speakerLabels = "";
       }
       drawFrame();
       return buckets.length;
diff --git a/app/ui.js b/app/ui.js
index f9a0eff..0606369 100644
--- a/app/ui.js
+++ b/app/ui.js
@@ -69,17 +69,24 @@
     input.addEventListener("input", handle);
   });
 
+  function onSocialLinkChange(bucket, value) {
+    setSocialLink(episode, bucket, value);
+    updateBucketRow(bucket);
+    if (canCompose(episode)) {
+      preview.render(episode);
+      preview.drawFrame();
+      if (!preview.isPlaying()) preview.play();
+    }
+    refresh();
+  }
+
   document.querySelectorAll("input[data-link-bucket]").forEach(function (input) {
     const bucket = input.getAttribute("data-link-bucket");
-    input.addEventListener("input", function () {
-      setSocialLink(episode, bucket, input.value);
-      updateBucketRow(bucket);
-      if (canCompose(episode)) {
-        preview.render(episode);
-        preview.play();
-      }
-      refresh();
-    });
+    function handle() {
+      onSocialLinkChange(bucket, input.value);
+    }
+    input.addEventListener("input", handle);
+    input.addEventListener("change", handle);
   });
 
   const presetsEl = $("presets");
diff --git a/scripts/preview-build.mjs b/scripts/preview-build.mjs
index a61be4f..c92d9cd 100644
--- a/scripts/preview-build.mjs
+++ b/scripts/preview-build.mjs
@@ -59,6 +59,16 @@ if (!PDC.episode.canCompose(ep)) {
   console.error("preview-build: canCompose() false with two speakers + default preset — readiness gate is broken");
   process.exit(1);
 }
+PDC.episode.setSocialLink(ep, "host", "https://x.com/hostperson");
+PDC.episode.setSocialLink(ep, "guest1", "@guestperson");
+if (PDC.episode.speakerName(ep, "host") !== "hostperson" || PDC.episode.speakerLabels(ep).guest1 !== "guestperson") {
+  console.error("preview-build: social links should derive speaker names for preview labels");
+  process.exit(1);
+}
+if (!html.includes('data-link-bucket="host"')) {
+  console.error("preview-build: index.html must declare static speaker social-link inputs");
+  process.exit(1);
+}
 
 // 4. Copy the static app into dist/.
 const dist = path.join(root, "dist");
diff --git a/scripts/typecheck.mjs b/scripts/typecheck.mjs
index e04f15f..4270020 100644
--- a/scripts/typecheck.mjs
+++ b/scripts/typecheck.mjs
@@ -12,7 +12,7 @@ const PDC = loadPDC(root);
 
 const required = {
   presets: ["SPEAKER_BUCKETS", "BUCKET_LABELS", "PRESETS", "DEFAULT_PRESET_ID", "getPreset"],
-  episode: ["createEpisode", "assignMedia", "clearMedia", "assignedBuckets", "setPreset", "canCompose", "readinessReason", "MIN_SPEAKERS"],
+  episode: ["createEpisode", "assignMedia", "clearMedia", "assignedBuckets", "setPreset", "canCompose", "readinessReason", "MIN_SPEAKERS", "speakerName", "speakerLabels"],
 };
 
 const missing = [];
diff --git a/scripts/verify-social-context.mjs b/scripts/verify-social-context.mjs
index d7e9560..e127b02 100644
--- a/scripts/verify-social-context.mjs
+++ b/scripts/verify-social-context.mjs
@@ -1,8 +1,9 @@
 // scripts/verify-social-context.mjs
-// Drives the shipped app in headless Chrome and proves issue #41's full workflow:
-// upload Host + Guest videos, enter distinct social links, confirm derived names
-// in the preview, cycle Split → Stack → Spotlight with nonblank video, and keep
-// uploads + social context intact throughout.
+// Drives the shipped app in headless Chrome and proves issue #63: upload speaker
+// videos, enter distinct social links for Host/Guest 1/Guest 2 through the real
+// setup inputs, confirm derived names appear in the live composed preview (canvas
+// labels + setup hints), survive preset switching, clear/replace per speaker
+// only, and keep export available.
 import { spawn, spawnSync } from "node:child_process";
 import fs from "node:fs";
 import net from "node:net";
@@ -136,7 +137,7 @@ const browserExpression = `
     recorder.start();
     for (let i = 0; i < 24; i++) {
       ctx.fillStyle = color; ctx.fillRect(0, 0, canvas.width, canvas.height);
-      ctx.fillStyle = "#fff"; ctx.font = "26px sans-serif"; ctx.fillText("frame " + i, 20, 100);
+      ctx.fillStyle = "#fff"; ctx.font = "26px sans-serif"; ctx.fillText(name, 20, 100);
       await sleep(45);
     }
     await new Promise((resolve) => { recorder.onstop = resolve; recorder.stop(); });
@@ -149,18 +150,22 @@ const browserExpression = `
     input.files = dt.files;
     input.dispatchEvent(new Event("change", { bubbles: true }));
   }
-  function typeInto(input, value) {
+  function setLink(bucket, value, eventName) {
+    const input = document.querySelector('[data-link-bucket="' + bucket + '"]');
     input.value = value;
-    input.dispatchEvent(new Event("input", { bubbles: true }));
+    input.dispatchEvent(new Event(eventName || "input", { bubbles: true }));
   }
-  const tagText = (bucket) => {
+  const bucketName = (bucket) => {
     const el = document.querySelector('.bucket[data-bucket="' + bucket + '"] .bucket-name');
     return el ? el.textContent : null;
   };
-  const ensureNames = () => {
-    assert(tagText("host") === "hostperson", "host label should show derived name, got: " + tagText("host"));
-    assert(tagText("guest1") === "guestperson", "guest1 label should show derived name, got: " + tagText("guest1"));
-    assert(tagText("host") !== tagText("guest1"), "derived names must be distinct per speaker");
+  const derivedHint = (bucket) => {
+    const el = document.querySelector('[data-derived="' + bucket + '"]');
+    return el ? el.textContent : "";
+  };
+  const canvasLabels = () => {
+    const raw = document.getElementById("stage-canvas").dataset.speakerLabels || "{}";
+    return JSON.parse(raw);
   };
   function canvasLitPct() {
     const c = document.getElementById("stage-canvas");
@@ -171,70 +176,101 @@ const browserExpression = `
     }
     return Math.round((lit / (data.length / 4)) * 100);
   }
-  function assertSocialState(label) {
-    ensureNames();
-    assert(document.querySelector('[data-link-bucket="host"]').value === HOST_URL, label + ": host link must persist");
-    assert(document.querySelector('[data-link-bucket="guest1"]').value === GUEST_URL, label + ": guest1 link must persist");
-    videos = [...document.querySelectorAll("video[data-speaker]")];
-    assert(videos.length === 2, label + ": both uploaded videos should remain");
-    assert(videos.every((v) => v.src.startsWith("blob:") && v.videoWidth > 0), label + ": uploaded media should stay decoded");
-    const lit = canvasLitPct();
-    assert(lit >= 5, label + ": composed canvas should show nonblank pixels (" + lit + "%)");
+  function assertPreviewLabels(expected, label) {
+    const labels = canvasLabels();
+    for (const bucket of Object.keys(expected)) {
+      assert(labels[bucket] === expected[bucket], label + ": canvas label for " + bucket + " should be " + expected[bucket] + ", got " + labels[bucket]);
+    }
+  }
+  function assertSetupNames(expected, label) {
+    for (const bucket of Object.keys(expected)) {
+      assert(bucketName(bucket) === expected[bucket], label + ": setup name for " + bucket + " should be " + expected[bucket] + ", got " + bucketName(bucket));
+      if (expected[bucket] !== window.PDC.presets.BUCKET_LABELS[bucket]) {
+        assert(derivedHint(bucket).includes(expected[bucket]), label + ": derived hint for " + bucket + " should mention " + expected[bucket]);
+      }
+    }
+  }
+  function assertSocialState(expected, label) {
+    assertSetupNames(expected, label);
+    assertPreviewLabels(expected, label);
+    assert(document.querySelectorAll("video[data-speaker]").length >= 2, label + ": uploaded videos should remain");
+    assert(canvasLitPct() >= 5, label + ": preview canvas should stay visible");
+    const exportBtn = document.querySelector("#export");
+    assert(exportBtn && !exportBtn.disabled, label + ": export should remain available");
   }
 
-  // Wait for the app's classic scripts to finish wiring the DOM (the page may
-  // still be loading when this evaluates), then assert the controls exist.
   const waitFor = async (fn, label) => {
     for (let i = 0; i < 100; i++) { if (fn()) return; await sleep(50); }
     throw new Error(label);
   };
-  await waitFor(() => window.PDC && window.PDC.episode && window.PDC.episode.setSocialLink, "PDC.episode social API should load");
+  await waitFor(() => window.PDC && window.PDC.episode && window.PDC.episode.speakerLabels, "PDC.episode social API should load");
   await waitFor(() => document.querySelector("#stage-canvas"), "composed preview canvas should exist");
   await waitFor(() => document.querySelector('[data-file-bucket="host"]'), "Host upload control should exist");
   assert(document.querySelector('[data-link-bucket="host"]'), "Host social link input should exist");
   assert(document.querySelector('[data-link-bucket="guest1"]'), "Guest 1 social link input should exist");
+  assert(document.querySelector('[data-link-bucket="guest2"]'), "Guest 2 social link input should exist");
 
-  // Upload two real speaker videos.
   uploadTo(document.querySelector('[data-file-bucket="host"]'), await makeVideo("host.webm", "#b91c1c"));
   await sleep(100);
   uploadTo(document.querySelector('[data-file-bucket="guest1"]'), await makeVideo("guest.webm", "#047857"));
+  await sleep(100);
+  uploadTo(document.querySelector('[data-file-bucket="guest2"]'), await makeVideo("guest2.webm", "#2563eb"));
   await sleep(1200);
-  let videos = [...document.querySelectorAll("video[data-speaker]")];
-  assert(videos.length === 2, "two uploaded speaker videos should compose the preview");
+  assert(document.querySelectorAll("video[data-speaker]").length === 3, "three uploaded speaker videos should compose the preview");
 
-  // Enter DISTINCT social links for each speaker through the real inputs.
-  const HOST_URL = "https://x.com/hostperson";
-  const GUEST_URL = "https://x.com/guestperson";
-  typeInto(document.querySelector('[data-link-bucket="host"]'), HOST_URL);
-  typeInto(document.querySelector('[data-link-bucket="guest1"]'), GUEST_URL);
-  await sleep(300);
+  const LINKS = {
+    host: "https://x.com/hostperson",
+    guest1: "https://x.com/guestperson",
+    guest2: "https://www.youtube.com/@guesttwo",
+  };
+  const NAMES = { host: "hostperson", guest1: "guestperson", guest2: "guesttwo" };
 
-  // Links stored per speaker and surfaced as distinct derived names in preview.
-  ensureNames();
-  assert(document.querySelector('[data-link-bucket="host"]').value === HOST_URL, "host link input should hold its value");
-  assert(document.querySelector('[data-link-bucket="guest1"]').value === GUEST_URL, "guest1 link input should hold its value");
-  assert(/hostperson/.test((document.querySelector('[data-derived="host"]') || {}).textContent || ""), "host derived-name hint should show");
+  setLink("host", LINKS.host, "input");
+  setLink("guest1", LINKS.guest1, "change");
+  setLink("guest2", LINKS.guest2, "input");
+  await sleep(400);
 
   const playButton = document.querySelector("#play");
   if (!playButton.textContent.includes("Pause")) playButton.click();
   await sleep(700);
-  assertSocialState("split preset with social links");
+
+  assertSocialState(NAMES, "after entering social links");
 
   for (const presetId of ["stack", "spotlight", "split"]) {
     document.querySelector('[data-preset="' + presetId + '"]').click();
     await sleep(500);
     assert(document.querySelector("#stage-canvas").dataset.preset === presetId, "preset should switch to " + presetId);
-    assertSocialState(presetId + " preset with social links");
+    assertSocialState(NAMES, presetId + " preset preserves derived names");
   }
 
+  setLink("guest1", "", "change");
+  await sleep(300);
+  assert(bucketName("guest1") === "Guest 1", "clearing guest1 link should revert only guest1 setup label");
+  assert(bucketName("host") === "hostperson", "clearing guest1 link must not change host setup label");
+  assert(canvasLabels().guest1 === "Guest 1", "clearing guest1 link should revert only guest1 canvas label");
+  assert(canvasLabels().host === "hostperson", "clearing guest1 link must not change host canvas label");
+
+  setLink("guest1", LINKS.guest1, "input");
+  await sleep(250);
+  assertSocialState(NAMES, "after restoring guest1 link");
+
+  setLink("guest2", "https://instagram.com/replacementguest", "change");
+  await sleep(300);
+  assert(bucketName("guest2") === "replacementguest", "replacing guest2 link should update only guest2 setup label");
+  assert(canvasLabels().guest2 === "replacementguest", "replacing guest2 link should update only guest2 canvas label");
+  assert(canvasLabels().host === "hostperson", "replacing guest2 link must not change host canvas label");
+  assert(canvasLabels().guest1 === "guestperson", "replacing guest2 link must not change guest1 canvas label");
+
   return {
-    tags: { host: tagText("host"), guest1: tagText("guest1") },
+    setup: { host: bucketName("host"), guest1: bucketName("guest1"), guest2: bucketName("guest2") },
+    canvas: canvasLabels(),
     links: {
       host: document.querySelector('[data-link-bucket="host"]').value,
       guest1: document.querySelector('[data-link-bucket="guest1"]').value,
+      guest2: document.querySelector('[data-link-bucket="guest2"]').value,
     },
     presetAfter: document.querySelector("#stage-canvas").dataset.preset,
-    videoCount: videos.length,
+    exportEnabled: !document.querySelector("#export").disabled,
   };
 })()
 `;
@@ -268,7 +304,7 @@ async function main() {
       expression: browserExpression,
       awaitPromise: true,
       returnByValue: true,
-      timeout: 30000,
+      timeout: 45000,
     });
     ws.close();
 
diff --git a/tests/episode.test.mjs b/tests/episode.test.mjs
index e4e9bf4..ef8d29d 100644
--- a/tests/episode.test.mjs
+++ b/tests/episode.test.mjs
@@ -88,9 +88,22 @@ test("deriveHandle reads handles from common profile URL shapes", () => {
   assert.equal(E.deriveHandle("https://www.linkedin.com/in/jane-doe"), "jane-doe");
   assert.equal(E.deriveHandle("github.com/foo?tab=repos"), "foo");
   assert.equal(E.deriveHandle("@bar"), "bar");
+  assert.equal(E.deriveHandle("plainhandle"), "plainhandle");
+  assert.equal(E.deriveHandle("https://x.com/hostperson/"), "hostperson");
+  assert.equal(E.deriveHandle("https://www.youtube.com/@guesttwo"), "guesttwo");
   assert.equal(E.deriveHandle(""), "");
 });
 
+test("speakerLabels maps every bucket to its current display name", () => {
+  const ep = E.createEpisode({});
+  E.setSocialLink(ep, "host", "https://x.com/hostperson");
+  E.setSocialLink(ep, "guest2", "@guesttwo");
+  const labels = E.speakerLabels(ep);
+  assert.equal(labels.host, "hostperson");
+  assert.equal(labels.guest1, "Guest 1");
+  assert.equal(labels.guest2, "guesttwo");
+});
+
 test("removing a speaker clears only its own link, not the others'", () => {
   const ep = E.createEpisode({});
   E.assignMedia(ep, "host", media("h.webm"));