Viewer: Combined/Source groups with a clear break, recording specs, current-call colour, sibling-set link

app.js

@@ -21,8 +21,9 @@
     title: $("call-title"), meta: $("call-meta"), desc: $("call-desc"),
     play: $("play"), clock: $("clock"), muteAgent: $("mute-agent"), muteCustomer: $("mute-customer"), muteNoise: $("mute-noise"),
     listenSources: $("listen-sources"), listenCombined: $("listen-combined"), groupSources: $("group-sources"), groupCombined: $("group-combined"),
-    combinedName: $("combined-name"), combinedNote: $("combined-note"), sourcesNote: $("sources-note"), keyNoise: $("key-noise"),
-    badgeSources: $("badge-sources"), badgeCombined: $("badge-combined"), recipe: $("recipe"), laneL: $("lane-l-note"), laneR: $("lane-r-note"), calllines: $("calllines"),
+    combinedName: $("combined-name"), combinedNote: $("combined-note"), sourcesName: $("sources-name"), sourcesNote: $("sources-note"), keyNoise: $("key-noise"),
+    specs: $("specs"), emptySibling: $("empty-sibling"),
+    badgeSources: $("badge-sources"), badgeCombined: $("badge-combined"), laneL: $("lane-l-note"), laneR: $("lane-r-note"), calllines: $("calllines"),
     stage: $("stage"), waveAgent: $("wave-agent"), waveCustomer: $("wave-customer"), waveNoise: $("wave-noise"), rowNoise: $("row-noise"),
     waveCombL: $("wave-combined-l"), waveCombR: $("wave-combined-r"), markers: $("markers"), axis: $("axis"),
     playhead: $("playhead"), tip: $("tip"), nowBody: $("now-body"), logBody: $("log").querySelector("tbody"), logCount: $("log-count"),
@@ -85,14 +86,20 @@
     const title = PINNED ? set.title : (sets.title || document.body.dataset.title);
     el.setTitle.textContent = title; document.title = title;
     el.setBlurb.textContent = PINNED ? (set.blurb || "") : (set.blurb ? `${set.label}: ${set.blurb}` : set.label);
-    el.siblings.replaceChildren();
-    for (const other of sets.sets) {
-      if (other.name === set.name) continue;
-      const a = text("a", `Also: ${other.label}`);
-      a.href = PINNED && other.space_url ? other.space_url : `?set=${encodeURIComponent(other.name)}`;
-      if (PINNED && other.space_url) { a.target = "_blank"; a.rel = "noopener"; }
-      a.title = other.title;
-      el.siblings.append(a);
+    el.siblings.replaceChildren(); el.emptySibling.replaceChildren();
+    const others = sets.sets.filter((o) => o.name !== set.name);
+    if (others.length) el.siblings.append(text("span", "Other set:", "muted"));
+    el.emptySibling.append(document.createTextNode(`This page is the ${set.label} set (${set.n_takes} calls). `));
+    for (const other of others) {
+      const link = () => {
+        const a = text("a", `${other.label} set ${PINNED && other.space_url ? "↗" : "→"}`, "sibling");
+        a.href = PINNED && other.space_url ? other.space_url : `?set=${encodeURIComponent(other.name)}`;
+        if (PINNED && other.space_url) { a.target = "_blank"; a.rel = "noopener"; }
+        a.title = other.title;
+        return a;
+      };
+      el.siblings.append(link());
+      el.emptySibling.append(document.createTextNode(`The ${other.label} set (${other.n_takes} calls) has its own page: `), link(), document.createTextNode(". "));
     }
     if (!PINNED && sets.sets.length > 1) {
       el.setSwitch.hidden = false;
@@ -142,11 +149,12 @@
     if (state.hasNoise) setSource(el.aNoise, paths.proxy(row.take_id, "noise"), paths.wav(row.noise_file));
     else { el.aNoise.removeAttribute("src"); el.aNoise.load(); }
     setSource(el.aCombined, paths.proxy(row.take_id, "combined"), paths.wav(row.file_name));
-    const renoised = row.stereo_content === "renoised";
-    el.combinedName.textContent = renoised ? "Processed call" : "Combined call";
-    el.combinedNote.textContent = renoised ? "what an agent-side system would receive, one stereo file" : "the two studio tracks side by side in one stereo file, no processing";
-    el.sourcesNote.textContent = `what was captured, ${state.hasNoise ? "three" : "two"} separate tracks; switch each on or off`;
-    describeCombined(row);
+    const renoised = row.stereo_content === "renoised", f = formatsOf(row);
+    el.combinedName.textContent = "Combined";
+    el.combinedNote.textContent = renoised ? "single post-processed stereo file" : "single stereo file, the two source tracks side by side, unprocessed";
+    el.sourcesName.textContent = "Source";
+    el.sourcesNote.textContent = `studio recordings · ${fmtSpec(f.agent_audio)} speaker-isolated recordings${state.hasNoise ? " and ambient noise" : ""}; switch each on or off`;
+    renderSpecs(row, f);
     applyListen();
     renderLog(); setNow(-1); drawAll(); frame();
     try {
@@ -219,25 +227,31 @@
     el.groupSources.classList.toggle("inactive", !src); el.groupCombined.classList.toggle("inactive", src);
     el.badgeSources.hidden = !src; el.badgeCombined.hidden = src;
   }
-  function describeCombined(row) {
+  const formatsOf = (row) => { try { return JSON.parse(row.formats || "{}") || {}; } catch { return {}; } };
+  const fmtSpec = (f) => f ? `${Math.round((f.sample_rate_hz || 48000) / 1000)} kHz / ${f.bit_depth || "?"}-bit` : "48 kHz / 32-bit";
+  /* The "Recording specs" block under the waveforms: what each group is, from the row's format blocks and
+     the renoise recipe, so the numbers are the take's own. */
+  function renderSpecs(row, f) {
     let r = {};
     try { r = JSON.parse(row.renoised || "{}") || {}; } catch { r = {}; }
-    if (row.stereo_content !== "renoised") {
-      el.laneL.textContent = "customer, clean"; el.laneR.textContent = "agent, clean";
-      el.recipe.textContent = "Combined call: the two clean tracks side by side, customer left, agent right; no processing. " +
-        "Studio recordings play at their recorded levels.";
-      return;
+    const renoised = row.stereo_content === "renoised";
+    const bed = (row.noise_bed || (r.noise_mix || {}).bed || "").toLowerCase() || "ambient";
+    const rows = [["Source", `Agent and customer: ${fmtSpec(f.agent_audio)} mono WAV, one microphone each, unprocessed.`
+      + (state.hasNoise ? ` Ambient: the ${bed} bed played into both talents' headphones, ${fmtSpec(f.noise_audio)} mono WAV, studio playback level.` : "")]];
+    if (renoised) {
+      const snr = (r.noise_mix || {}).snr || {}, room = r.room_simulation || {}, loud = r.loudness_normalisation || {};
+      rows.push(["Combined", `${fmtSpec(f.stereo)} stereo WAV. Customer LEFT: the source track through a simulated car cabin`
+        + `${room.rt60_s != null ? ` (RT60 ${Number(room.rt60_s).toFixed(2)} s)` : ""}, mixed with the ${bed} bed at ${snr.target_db_a ?? "?"} dB(A) `
+        + `signal-to-noise ratio over the customer's speech${snr.measured_db_a != null ? ` (measured ${snr.measured_db_a})` : ""}. Agent RIGHT: the source track, clean. `
+        + `Both channels normalised to ${loud.target_lufs ?? "?"} LUFS under a ${loud.true_peak_ceiling_dbtp ?? -1} dBTP ceiling.`]);
+      rows.push(["Levels", "Source tracks play at their recorded levels; the combined file is loudness-normalised, so the two groups differ in loudness by design."]);
+    } else {
+      rows.push(["Combined", `${fmtSpec(f.stereo)} stereo WAV: customer LEFT, agent RIGHT, the two source tracks side by side, unprocessed.`]);
     }
-    const snr = (r.noise_mix || {}).snr || {}, room = r.room_simulation || {}, loud = r.loudness_normalisation || {};
-    const bed = ((r.noise_mix || {}).bed || row.noise_bed || "ambient").toLowerCase();
-    el.laneL.textContent = `customer, cabin + ${bed} bed`; el.laneR.textContent = "agent, normalised";
-    el.recipe.textContent =
-      `Combined call: customer channel through a simulated car cabin${room.rt60_s != null ? ` (RT60 ${Number(room.rt60_s).toFixed(2)} s)` : ""}, ` +
-      `mixed with the ${bed} bed at ${snr.target_db_a ?? "?"} dB(A) signal-to-noise ratio over the customer's speech` +
-      `${snr.measured_db_a != null ? ` (measured ${snr.measured_db_a})` : ""}; agent channel clean; both channels normalised to ` +
-      `${loud.target_lufs ?? "?"} LUFS under a ${loud.true_peak_ceiling_dbtp ?? -1} dBTP ceiling; 24-bit. ` +
-      "Studio recordings play at their recorded levels, so loudness differs between the two groups by design. " +
-      "The combined lanes reuse the customer and agent colours: same people, processed.";
+    rows.push(["Timeline", "Every file of the take has the same length and starts on the same instant as the tool-call clock."]);
+    el.specs.replaceChildren(...rows.flatMap(([k, v]) => [text("dt", k), text("dd", v)]));
+    el.laneL.textContent = renoised ? `customer, cabin + ${bed} bed` : "customer, clean";
+    el.laneR.textContent = renoised ? "agent, normalised" : "agent, clean";
   }
   document.addEventListener("keydown", (e) => {
     if (!state.take || e.target.closest("input, textarea, select")) return;
@@ -267,17 +281,24 @@
     const r = el.waveAgent.getBoundingClientRect(), s = el.stage.getBoundingClientRect();
     el.playhead.hidden = false; el.playhead.style.left = `${r.left - s.left + xOf(t)}px`;
   }
-  /* One hairline per tool call through every waveform row, from the first row to the marker strip. */
+  /* One hairline per tool call through the waveform rows of each group: a segment per group, so the
+     lines stop at the gap between Combined and Source and resume below it. */
   function drawCallLines() {
     const s = el.stage.getBoundingClientRect();
-    const first = el.stage.querySelector(".group .row canvas").getBoundingClientRect(), m = el.markers.getBoundingClientRect();
+    const visible = (g) => [...g.querySelectorAll(".row canvas")].filter((c) => !c.closest(".row").hidden).map((c) => c.getBoundingClientRect());
+    const groups = [...el.stage.querySelectorAll(".group")].map(visible).filter((cs) => cs.length);
+    const first = groups[0][0], m = el.markers.getBoundingClientRect();
     Object.assign(el.calllines.style, { left: `${first.left - s.left}px`, width: `${first.width}px`, top: `${first.top - s.top}px`, height: `${m.top - first.top}px` });
+    const segments = groups.map((cs) => [cs[0].top - first.top, cs[cs.length - 1].bottom - first.top]);
     el.calllines.replaceChildren();
     state.events.forEach((ev, i) => {
-      const line = document.createElement("div");
-      line.className = "callline" + (ev.is_error ? " err" : "") + (i === state.current ? " current" : "");
-      line.dataset.idx = i; line.style.left = `${xOf(ev.onset_time)}px`;
-      el.calllines.append(line);
+      for (const [top, bottom] of segments) {
+        const line = document.createElement("div");
+        line.className = "callline" + (ev.is_error ? " err" : "") + (i === state.current ? " current" : "");
+        line.dataset.idx = i;
+        Object.assign(line.style, { left: `${xOf(ev.onset_time)}px`, top: `${top}px`, height: `${bottom - top}px` });
+        el.calllines.append(line);
+      }
     });
   }
   for (const c of WAVES()) {

index.html

@@ -35,8 +35,8 @@
       <span id="clock" class="clock">0:00 / 0:00</span>
       <div class="listen" role="radiogroup" aria-label="Listen to">
         <span class="muted">Listen to</span>
-        <button class="seg on" id="listen-combined" role="radio" aria-checked="true" title="The combined call, one stereo file (C toggles)">Combined</button>
-        <button class="seg" id="listen-sources" role="radio" aria-checked="false" title="The studio tracks, each with its own on/off (C toggles)">Sources</button>
+        <button class="seg on" id="listen-combined" role="radio" aria-checked="true" title="The Combined group: one stereo file (C toggles)">Combined</button>
+        <button class="seg" id="listen-sources" role="radio" aria-checked="false" title="The Source group: the studio tracks, each with its own on/off (C toggles)">Source</button>
       </div>
       <div class="legend" role="group" aria-label="Colours">
         <span class="key static"><span class="swatch s1"></span>Agent</span>
@@ -45,18 +45,18 @@
         <span class="key static"><span class="swatch dot s3"></span>Tool call</span>
         <span class="key static"><span class="swatch dot err">!</span>Error</span>
       </div>
-      <span class="hint muted">space play · ← → 5 s · [ ] tool calls · C combined/sources</span>
+      <span class="hint muted">space play · ← → 5 s · [ ] tool calls · C combined/source</span>
     </div>
     <div class="work">
       <div class="left">
         <div class="stage" id="stage">
           <div class="group" id="group-combined">
-            <div class="group-head"><span class="group-name" id="combined-name">Processed call</span><span class="muted" id="combined-note">what an agent-side system would receive, one stereo file</span><span class="badge listening" id="badge-combined">listening</span></div>
+            <div class="group-head"><span class="group-name" id="combined-name">Combined</span><span class="muted" id="combined-note">single post-processed stereo file</span><span class="badge listening" id="badge-combined">listening</span></div>
             <div class="row"><div class="row-label">Combined L<small id="lane-l-note">customer + bed</small></div><canvas id="wave-combined-l" class="wave lane"></canvas></div>
             <div class="row"><div class="row-label">Combined R<small id="lane-r-note">agent</small></div><canvas id="wave-combined-r" class="wave lane"></canvas></div>
           </div>
           <div class="group" id="group-sources">
-            <div class="group-head"><span class="group-name">Studio recordings</span><span class="muted" id="sources-note">what was captured, three separate tracks; switch each on or off</span><span class="badge listening" id="badge-sources" hidden>listening</span></div>
+            <div class="group-head"><span class="group-name" id="sources-name">Source</span><span class="muted" id="sources-note">studio recordings · 48 kHz / 32-bit speaker-isolated recordings and ambient noise; switch each on or off</span><span class="badge listening" id="badge-sources" hidden>listening</span></div>
             <div class="row"><div class="row-label">Agent<small>clean microphone</small><button class="row-mute" id="mute-agent" aria-pressed="false" title="Switch the agent track off or on">on</button></div><canvas id="wave-agent" class="wave"></canvas></div>
             <div class="row"><div class="row-label">Customer<small>clean microphone</small><button class="row-mute" id="mute-customer" aria-pressed="false" title="Switch the customer track off or on">on</button></div><canvas id="wave-customer" class="wave"></canvas></div>
             <div class="row" id="row-noise"><div class="row-label">Ambient<small>noise bed in headphones</small><button class="row-mute" id="mute-noise" aria-pressed="false" title="Switch the noise bed off or on">on</button></div><canvas id="wave-noise" class="wave"></canvas></div>
@@ -67,7 +67,10 @@
           <div id="playhead" class="playhead" hidden></div>
           <div id="tip" class="tip" role="tooltip" hidden></div>
         </div>
-        <p id="recipe" class="recipe"></p>
+        <section class="specs" aria-label="Recording specs">
+          <div class="panel-head">Recording specs</div>
+          <dl id="specs"></dl>
+        </section>
       </div>
       <div class="right">
         <section class="now" aria-live="polite">
@@ -97,6 +100,7 @@
   </section>
   <section class="empty" id="empty">
     <p class="muted">Select a call on the left.</p>
+    <p id="empty-sibling" class="muted small"></p>
     <p class="muted small">Each call plays as one timeline: the waveforms of every recorded form on the left, the agent's tool calls as markers through them, and on the right the current call's function signature and result, with the full log below it.</p>
     <p id="load-error" class="error" hidden></p>
   </section>

style.css

@@ -10,6 +10,7 @@
   --series-noise: #898781;
   --status-critical: #d03b3b;
   --wash-1: rgba(42,120,214,0.10);
+  --wash-3: rgba(27,175,122,0.14);
 }
 @media (prefers-color-scheme: dark) {
   :root:where(:not([data-theme="light"])) {
@@ -21,6 +22,7 @@
     --series-noise: #898781;
     --status-critical: #d03b3b;
     --wash-1: rgba(57,135,229,0.14);
+    --wash-3: rgba(25,158,112,0.22);
   }
 }
 * { box-sizing: border-box; }
@@ -43,7 +45,8 @@ code { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
 .links { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px 16px; font-size: 13px; color: var(--text-secondary); white-space: nowrap; padding-top: 2px; }
 .links a { text-decoration: none; }
 .links a:hover { text-decoration: underline; }
-.siblings a { padding: 3px 9px; border: 1px solid var(--border); border-radius: 12px; }
+.siblings a.sibling { padding: 4px 12px; border: 1px solid var(--series-1); color: var(--series-1); border-radius: 14px; font-weight: 600; margin-left: 6px; }
+.siblings a.sibling:hover { background: var(--wash-1); text-decoration: none; }
 .set-switch select { font: inherit; font-size: 13px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); }
 
 .layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: calc(100% - 46px); }
@@ -81,7 +84,10 @@ code { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
 .seg { font: inherit; font-size: 13px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); padding: 4px 10px; cursor: pointer; }
 .seg:first-of-type { border-radius: 6px 0 0 6px; } .seg:last-of-type { border-radius: 0 6px 6px 0; margin-left: -1px; }
 .seg.on { background: var(--text-primary); color: var(--surface-1); border-color: var(--text-primary); }
-.recipe { font-size: 12px; color: var(--text-secondary); margin: 8px 4px 0; max-width: 130ch; }
+.specs { margin-top: 12px; background: var(--surface-1); border: 1px solid var(--gridline); border-radius: 8px; padding: 0 0 10px; }
+.specs dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0; padding: 2px 16px 0; font-size: 12px; }
+.specs dt { color: var(--text-primary); font-weight: 600; }
+.specs dd { margin: 0; color: var(--text-secondary); max-width: 130ch; }
 
 /* waveforms left, tool-call panels right when the window is wide enough; stacked otherwise */
 .work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@@ -95,7 +101,7 @@ code { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
 @media (max-width: 1100px) { .right { grid-template-columns: 1fr; } .layout { grid-template-columns: 240px minmax(0, 1fr); } }
 
 .stage { position: relative; background: var(--surface-1); border: 1px solid var(--gridline); border-radius: 8px; padding: 4px 12px 6px 0; }
-.group + .group { border-top: 1px solid var(--gridline); margin-top: 6px; }
+.group + .group { border-top: 3px solid var(--baseline); margin-top: 14px; padding-top: 4px; }
 .group-head { display: flex; align-items: baseline; gap: 10px; padding: 6px 12px 2px; font-size: 12px; }
 .group-head .group-name { text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); font-weight: 600; }
 .group.inactive .row { opacity: .5; }
@@ -124,7 +130,7 @@ code { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
 .markers g:hover .dot, .markers g.current .dot { r: 7; }
 .markers g:hover .tick, .markers g.current .tick { stroke-width: 3; }
 .calllines { position: absolute; pointer-events: none; }
-.callline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--series-3); opacity: .4; }
+.callline { position: absolute; width: 1px; background: var(--series-3); opacity: .4; }
 .callline.err { background: var(--status-critical); }
 .callline.current { opacity: .9; width: 2px; margin-left: -0.5px; }
 .playhead { position: absolute; top: 4px; bottom: 28px; width: 2px; margin-left: -1px; background: var(--text-primary); pointer-events: none; opacity: .9; }
@@ -139,6 +145,9 @@ code { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
 .now-body .when { color: var(--text-secondary); font-variant-numeric: tabular-nums; font-size: 12px; display: block; margin-bottom: 6px; }
 .sig { padding: 8px 10px; border-radius: 6px; background: var(--page); border: 1px solid var(--gridline); font-size: 12.5px; }
 .sig .fn { font-weight: 700; color: var(--text-primary); }
+.now-body .sig { border-left: 3px solid var(--series-3); }
+.now-body .sig .fn { color: var(--series-3); }
+.now-body .when::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--series-3); margin-right: 6px; vertical-align: 0; }
 .now-body .result { margin-top: 8px; padding: 8px; border-radius: 6px; background: var(--page); max-height: 220px; overflow: auto; }
 .now-body .sub { font-size: 12px; color: var(--text-secondary); margin: 8px 0 2px; }
 .now-body.changed { animation: lift .6s ease-out; }
@@ -151,7 +160,9 @@ th { text-align: left; font-weight: 600; color: var(--text-secondary); font-size
 td { padding: 6px 10px; border-bottom: 1px solid var(--gridline); vertical-align: top; }
 tbody tr { cursor: pointer; }
 tbody tr:hover { background: var(--wash-1); }
-tbody tr[aria-current="true"] { background: var(--wash-1); box-shadow: inset 3px 0 0 var(--series-3); }
+tbody tr[aria-current="true"] { background: var(--wash-3); box-shadow: inset 3px 0 0 var(--series-3); }
+tbody tr[aria-current="true"] .fn { color: var(--series-3); }
+tbody tr[aria-current="true"] td.num, tbody tr[aria-current="true"] td.time { color: var(--text-primary); font-weight: 600; }
 td.num, td.time { font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
 td.call { max-width: 0; width: 100%; }
 td.call code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }