feat(web): improve movement report review UI

web/app.js

@@ -1,6 +1,7 @@
 import React, {
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from "https://esm.sh/react@18.2.0";
 import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
@@ -339,6 +340,247 @@ function ReviewInsights({ result }) {
   );
 }
 
+function metricScore(value) {
+  return typeof value === "number" && Number.isFinite(value)
+    ? Math.max(0, Math.min(1, value))
+    : null;
+}
+
+function metricScoreRows(report) {
+  const aggregate = report.rep_analysis?.aggregate_metrics || {};
+  return [
+    ["ROM", aggregate.avg_rom_score],
+    ["Stability", aggregate.avg_stability_score],
+    ["Symmetry", aggregate.avg_symmetry_score],
+    ["Pose coverage", aggregate.pose_valid_ratio],
+  ]
+    .map(([name, value]) => ({ name, value: metricScore(value) }))
+    .filter((item) => item.value !== null);
+}
+
+function scoreTone(score) {
+  if (score === null) return "neutral";
+  if (score >= 0.8) return "strong";
+  if (score >= 0.62) return "watch";
+  return "risk";
+}
+
+function repScore(item) {
+  if (!item) return null;
+  const values = [
+    item.range_of_motion_score,
+    item.stability_score,
+    item.symmetry_score,
+  ]
+    .map(metricScore)
+    .filter((value) => value !== null);
+  if (!values.length) return null;
+  return values.reduce((total, value) => total + value, 0) / values.length;
+}
+
+function repAnalysisById(report) {
+  return new Map(
+    (report.rep_analysis?.items || []).map((item) => [item.rep_id, item]),
+  );
+}
+
+function issueList(report) {
+  return report.issue_markers?.issues || [];
+}
+
+function issuesForRep(report, repId) {
+  return issueList(report).filter((issue) => issue.rep_id === repId);
+}
+
+function topIssue(report) {
+  return [...issueList(report)].sort((a, b) => b.severity - a.severity)[0] || null;
+}
+
+function bestRep(report) {
+  const analysisById = repAnalysisById(report);
+  return (report.reps?.reps || [])
+    .map((rep) => {
+      const score = repScore(analysisById.get(rep.rep_id));
+      return { rep, score };
+    })
+    .filter((entry) => entry.score !== null)
+    .sort((a, b) => b.score - a.score)[0] || null;
+}
+
+function reportDuration(report) {
+  const manifestDuration = report.video_manifest?.duration_sec;
+  const repEnd = Math.max(
+    0,
+    ...(report.reps?.reps || []).map((rep) => rep.end_sec || 0),
+    ...issueList(report).map((issue) => issue.end_sec || 0),
+  );
+  return Math.max(manifestDuration || 0, repEnd, 1);
+}
+
+function repAtTime(report, playbackTime) {
+  return (
+    (report.reps?.reps || []).find(
+      (rep) => playbackTime >= rep.start_sec && playbackTime <= rep.end_sec,
+    ) || null
+  );
+}
+
+function qualityVerdict(report) {
+  const scores = metricScoreRows(report)
+    .filter((row) => row.name !== "Pose coverage")
+    .map((row) => row.value);
+  const average = scores.length
+    ? scores.reduce((total, score) => total + score, 0) / scores.length
+    : null;
+  const issue = topIssue(report);
+  if (average === null) {
+    return {
+      title: "Report ready",
+      detail: "Coach notes are grounded in the scan.",
+      score: null,
+    };
+  }
+  const adjusted = Math.max(0, average - (issue?.severity || 0) * 0.08);
+  if (adjusted >= 0.82) {
+    return {
+      title: issue ? "Strong set, one watchpoint" : "Clean training set",
+      detail: issue ? `${issueTitle(issue)} is the main limiter.` : "No clear form issue dominated the set.",
+      score: adjusted,
+    };
+  }
+  if (adjusted >= 0.66) {
+    return {
+      title: "Usable reps, focused fix",
+      detail: issue ? `${issueTitle(issue)} should be fixed first.` : "Quality is workable, but keep reps controlled.",
+      score: adjusted,
+    };
+  }
+  return {
+    title: "Needs cleaner reps",
+    detail: issue ? `${issueTitle(issue)} is limiting this set.` : "Repeat with slower reps before progressing.",
+    score: adjusted,
+  };
+}
+
+function timeRange(start, end) {
+  return `${Number(start || 0).toFixed(2)}s-${Number(end || 0).toFixed(2)}s`;
+}
+
+function metaChip(text, tone = "", key = undefined) {
+  const props = { className: `meta-chip${tone ? ` ${tone}` : ""}` };
+  if (key !== undefined) props.key = key;
+  return h("span", props, text);
+}
+
+function ScoreBar({ labelText, value, detail }) {
+  const score = metricScore(value);
+  const width = score === null ? "0%" : `${Math.round(score * 100)}%`;
+  return h(
+    "div",
+    { className: `score-card ${scoreTone(score)}` },
+    h(
+      "div",
+      { className: "score-card-head" },
+      h("span", null, labelText),
+      h("strong", null, score === null ? "n/a" : percent(score)),
+    ),
+    h(
+      "span",
+      { className: "score-track", "aria-hidden": "true" },
+      h("span", { className: "score-fill", style: { width } }),
+    ),
+    detail ? h("small", null, detail) : null,
+  );
+}
+
+function BriefTile({ eyebrow, title, body, tone = "" }) {
+  return h(
+    "article",
+    { className: `brief-tile${tone ? ` ${tone}` : ""}` },
+    h("span", null, eyebrow),
+    h("strong", null, title),
+    h("p", null, body),
+  );
+}
+
+function RepTimeline({
+  report,
+  compact = false,
+  activeRepId = null,
+  playbackTime = 0,
+  onRepSelect = null,
+}) {
+  const reps = report.reps?.reps || [];
+  const duration = reportDuration(report);
+  const analysisById = repAnalysisById(report);
+  const isPlayback = typeof onRepSelect === "function";
+  const playheadLeft = `${Math.max(0, Math.min(100, (playbackTime / duration) * 100))}%`;
+  if (!reps.length) {
+    return h("p", { className: "empty-copy" }, "No complete reps were detected.");
+  }
+
+  return h(
+    "div",
+    {
+      className: `rep-timeline${compact ? " compact" : ""}${isPlayback ? " playback" : ""}`,
+    },
+    h(
+      "div",
+      { className: "timeline-ruler", "aria-hidden": "true" },
+      h("span", null, "0s"),
+      h("span", null, `${duration.toFixed(1)}s`),
+    ),
+    h(
+      "div",
+      {
+        className: `rep-track${isPlayback ? " interactive" : ""}`,
+        "aria-label": isPlayback ? "Interactive rep timeline" : "Rep timeline",
+      },
+      isPlayback
+        ? h("span", {
+            className: "timeline-playhead",
+            style: { left: playheadLeft },
+            "aria-hidden": "true",
+          })
+        : null,
+      reps.map((rep) => {
+        const left = `${Math.max(0, Math.min(98, (rep.start_sec / duration) * 100))}%`;
+        const width = `${Math.max(6, Math.min(100, ((rep.end_sec - rep.start_sec) / duration) * 100))}%`;
+        const score = repScore(analysisById.get(rep.rep_id));
+        const repIssues = issuesForRep(report, rep.rep_id);
+        const tagName = isPlayback ? "button" : "div";
+        const segmentProps = {
+          className: `rep-segment ${scoreTone(score)}${repIssues.length ? " has-issue" : ""}${activeRepId === rep.rep_id ? " active" : ""}`,
+          key: rep.rep_id,
+          style: { left, width },
+          title: `Rep ${rep.rep_id} ${timeRange(rep.start_sec, rep.end_sec)}`,
+        };
+        if (isPlayback) {
+          segmentProps.type = "button";
+          segmentProps.onClick = () => onRepSelect(rep);
+          segmentProps["aria-label"] = `Play from rep ${rep.rep_id}, ${timeRange(rep.start_sec, rep.end_sec)}`;
+          segmentProps["aria-pressed"] = activeRepId === rep.rep_id;
+        }
+        return h(
+          tagName,
+          segmentProps,
+          h("strong", null, `R${rep.rep_id}`),
+          repIssues.map((issue, index) =>
+            h("span", {
+              className: `issue-pin ${severityLevel(issue)}`,
+              key: `${issue.issue}-${index}`,
+              style: {
+                left: `${Math.max(8, Math.min(92, ((issue.start_sec - rep.start_sec) / Math.max(0.01, rep.end_sec - rep.start_sec)) * 100))}%`,
+              },
+              title: issueTitle(issue),
+            }),
+          ),
+        );
+      }),
+    ),
+  );
+}
+
 function SummaryTab({ result }) {
   if (!result) {
     return h(
@@ -352,43 +594,107 @@ function SummaryTab({ result }) {
   const report = result.report;
   const summary = report.coach_summary;
   const warnings = report.video_manifest.quality_warnings || [];
-  const issues = report.issue_markers?.issues || [];
-  const stats = [
-    ["Exercise", report.exercise.exercise],
-    ["Confidence", percent(report.exercise.confidence)],
-    ["Variation", report.variation.detected_variation],
-    ["Reps", String(report.reps.reps.length)],
-    ["Issues", String(issues.length)],
-  ];
+  const issues = issueList(report);
+  const issue = topIssue(report);
+  const best = bestRep(report);
+  const verdict = qualityVerdict(report);
+  const scores = metricScoreRows(report);
+  const provider = report.artifacts?.coach_summary_provider || "n/a";
+  const model = report.artifacts?.coach_summary_model || "n/a";
+  const repCount = report.reps?.reps?.length || 0;
+  const cueNow =
+    summary.top_fixes?.[0] ||
+    (issue
+      ? issueEvidence(issue)
+      : "Repeat the next set with the same controlled tempo.");
+  const nextSession = summary.next_session_plan?.[0] || "Repeat the set with controlled reps.";
 
   return h(
     "section",
-    { className: "summary" },
-    h("h2", null, "Scan summary"),
-    h("p", null, summary.summary),
+    { className: "summary overview-panel" },
     h(
       "div",
-      { className: "stat-grid" },
-      stats.map(([name, value]) =>
+      { className: "report-hero" },
+      h(
+        "div",
+        { className: "report-copy" },
+        h("p", { className: "eyebrow" }, "Movement report"),
+        h("h2", null, `${label(report.exercise.exercise)} review`),
+        h("p", { className: "report-lede" }, summary.summary),
         h(
           "div",
-          { className: "stat", key: name },
-          h("span", null, name),
-          h("strong", null, value),
+          { className: "pill-row" },
+          metaChip(`confidence ${percent(report.exercise.confidence)}`, "blue"),
+          metaChip(`${repCount} rep${repCount === 1 ? "" : "s"}`),
+          metaChip(
+            issues.length
+              ? `${issues.length} coaching moment${issues.length === 1 ? "" : "s"}`
+              : "no clear issue",
+            issues.length ? severityLevel(issue) : "strong",
+          ),
+          metaChip(provider === "local_transformers" ? "local coach" : provider),
         ),
       ),
+      h(
+        "aside",
+        { className: `verdict-card ${scoreTone(verdict.score)}` },
+        h("span", null, "Set verdict"),
+        h("strong", null, verdict.title),
+        h("p", null, verdict.detail),
+        h("small", null, model),
+      ),
+    ),
+    h(
+      "div",
+      { className: "brief-grid" },
+      h(BriefTile, {
+        eyebrow: "Best rep",
+        title: best ? `Rep ${best.rep.rep_id}` : "Not enough data",
+        body: best
+          ? `Most consistent rep at ${timeRange(best.rep.start_sec, best.rep.end_sec)} with ${percent(best.score)} quality.`
+          : "Complete reps are needed before the app can pick a best rep.",
+        tone: "mint",
+      }),
+      h(BriefTile, {
+        eyebrow: "Main limiter",
+        title: issue ? issueTitle(issue) : "Nothing major",
+        body: issue
+          ? `${issueClipText(result, issue, 0)}. ${issueEvidence(issue)}.`
+          : "No sustained threshold violations were found in this set.",
+        tone: issue ? severityLevel(issue) : "mint",
+      }),
+      h(BriefTile, {
+        eyebrow: "Cue now",
+        title: "Try this first",
+        body: cueNow,
+        tone: "volt",
+      }),
+      h(BriefTile, {
+        eyebrow: "Next session",
+        title: "Keep it simple",
+        body: nextSession,
+      }),
     ),
     h(
       "div",
-      { className: "note-grid" },
+      { className: "score-board" },
+      scores.length
+        ? scores.map((row) =>
+            h(ScoreBar, {
+              key: row.name,
+              labelText: row.name,
+              value: row.value,
+            }),
+          )
+        : h("p", { className: "empty-copy" }, "No movement scores available."),
+    ),
+    h(RepTimeline, { report, compact: true }),
+    h(
+      "div",
+      { className: "note-grid report-notes" },
       h(NoteList, { title: "What you did", items: summary.what_you_did }),
       h(NoteList, { title: "What looked good", items: summary.what_looked_good }),
-      h(NoteList, {
-        title: "What changed across reps",
-        items: summary.what_changed_across_reps,
-      }),
-      h(NoteList, { title: "Top fixes", items: summary.top_fixes }),
-      h(NoteList, { title: "Next session", items: summary.next_session_plan }),
+      h(NoteList, { title: "What changed", items: summary.what_changed_across_reps }),
     ),
     warnings.length
       ? h(
@@ -419,23 +725,54 @@ function MetricsTab({ result }) {
     report.rep_analysis?.aggregate_metrics || {},
   );
   const reps = report.rep_analysis?.items || [];
+  const scoreRows = metricScoreRows(report);
   return h(
     "section",
-    { className: "summary" },
+    { className: "summary metrics-panel" },
     h("h2", null, "Movement metrics"),
+    h("p", null, "Score bars show the movement qualities that most directly shape the coach note."),
     h(
       "div",
-      { className: "metric-grid" },
-      aggregate.length
-        ? aggregate.map(([name, value]) =>
+      { className: "score-board metric-score-board" },
+      scoreRows.length
+        ? scoreRows.map((row) =>
+            h(ScoreBar, {
+              key: row.name,
+              labelText: row.name,
+              value: row.value,
+            }),
+          )
+        : h("p", { className: "empty-copy" }, "No aggregate scores available."),
+    ),
+    h(
+      "div",
+      { className: "rep-score-list" },
+      reps.length
+        ? reps.map((rep) =>
             h(
-              "div",
-              { className: "stat", key: name },
-              h("span", null, label(name)),
-              h("strong", null, formatValue(value)),
+              "article",
+              { className: `rep-score-row ${scoreTone(repScore(rep))}`, key: rep.rep_id },
+              h(
+                "div",
+                { className: "rep-score-title" },
+                h("strong", null, `Rep ${rep.rep_id}`),
+                h("span", null, `${formatValue(rep.duration_sec)}s`),
+              ),
+              h(ScoreBar, {
+                labelText: "ROM",
+                value: rep.range_of_motion_score,
+              }),
+              h(ScoreBar, {
+                labelText: "Stability",
+                value: rep.stability_score,
+              }),
+              h(ScoreBar, {
+                labelText: "Symmetry",
+                value: rep.symmetry_score,
+              }),
             ),
           )
-        : h("p", null, "No aggregate metrics available."),
+        : h("p", { className: "empty-copy" }, "No per-rep metrics available."),
     ),
     h(
       "div",
@@ -474,7 +811,205 @@ function MetricsTab({ result }) {
   );
 }
 
-function RepsTab({ result }) {
+function RepDetailPanel({ report, rep, result, playbackTime }) {
+  if (!rep) {
+    return h(
+      "aside",
+      { className: "rep-detail-panel" },
+      h("span", { className: "rep-detail-kicker" }, "Current rep"),
+      h("strong", null, "No rep selected"),
+      h("p", null, "Play the video or click a rep segment to inspect its metrics."),
+    );
+  }
+
+  const analysis = repAnalysisById(report).get(rep.rep_id);
+  const repIssues = issuesForRep(report, rep.rep_id);
+  const score = repScore(analysis);
+  const duration = Math.max(0, (rep.end_sec || 0) - (rep.start_sec || 0));
+  const firstHalfDuration = Math.max(0, (rep.mid_sec || 0) - (rep.start_sec || 0));
+  const secondHalfDuration = Math.max(0, (rep.end_sec || 0) - (rep.mid_sec || 0));
+  const metricRows = [
+    { name: "ROM", value: metricScore(analysis?.range_of_motion_score) },
+    { name: "Stability", value: metricScore(analysis?.stability_score) },
+    { name: "Symmetry", value: metricScore(analysis?.symmetry_score) },
+  ].filter((item) => item.value !== null);
+  const weakestMetric = metricRows.length
+    ? [...metricRows].sort((a, b) => a.value - b.value)[0]
+    : null;
+  const repProgress =
+    duration > 0
+      ? Math.max(0, Math.min(1, (playbackTime - rep.start_sec) / duration))
+      : 0;
+  const phase =
+    playbackTime < rep.start_sec
+      ? "setup"
+      : playbackTime > rep.end_sec
+        ? "review"
+        : playbackTime <= rep.mid_sec
+          ? "half 1"
+          : "half 2";
+  const focusText = weakestMetric
+    ? `${weakestMetric.name} is the main review cue at ${percent(weakestMetric.value)}.`
+    : "Metric detail is not available for this rep.";
+  const scoreText =
+    score === null
+      ? "Metric data is limited for this rep."
+      : score >= 0.8
+        ? "This rep is one of the steadier parts of the set."
+        : score >= 0.62
+          ? "This rep is usable, but one metric deserves attention."
+          : "This rep is the kind to slow down and review before progressing.";
+  const issueText = repIssues.length
+    ? `${repIssues.length} issue marker${repIssues.length === 1 ? "" : "s"} attached to this rep.`
+    : "No issue marker is attached, so use the lowest metric as the review cue.";
+
+  return h(
+    "aside",
+    { className: `rep-detail-panel ${scoreTone(score)}` },
+    h(
+      "div",
+      { className: "rep-detail-head" },
+      h(
+        "div",
+        null,
+        h("span", { className: "rep-detail-kicker" }, "Current rep"),
+        h("strong", null, `Rep ${rep.rep_id}`),
+        h("small", null, timeRange(rep.start_sec, rep.end_sec)),
+      ),
+      metaChip(score === null ? "no score" : percent(score), scoreTone(score)),
+    ),
+    h(
+      "div",
+      { className: "rep-fact-grid" },
+      h(
+        "div",
+        { className: "rep-fact" },
+        h("span", null, "Duration"),
+        h("strong", null, `${duration.toFixed(2)}s`),
+      ),
+      h(
+        "div",
+        { className: "rep-fact" },
+        h("span", null, "Frames"),
+        h("strong", null, `${rep.start_frame}-${rep.end_frame}`),
+      ),
+      h(
+        "div",
+        { className: "rep-fact" },
+        h("span", null, "Tempo split"),
+        h("strong", null, `${firstHalfDuration.toFixed(2)}/${secondHalfDuration.toFixed(2)}s`),
+      ),
+      h(
+        "div",
+        { className: "rep-fact" },
+        h("span", null, "Phase"),
+        h("strong", null, phase),
+      ),
+      h(
+        "div",
+        { className: "rep-fact" },
+        h("span", null, "Focus"),
+        h("strong", null, weakestMetric ? `${weakestMetric.name} ${percent(weakestMetric.value)}` : "n/a"),
+      ),
+      h(
+        "div",
+        { className: "rep-fact" },
+        h("span", null, "Issues"),
+        h("strong", null, repIssues.length ? String(repIssues.length) : "clear"),
+      ),
+    ),
+    h(
+      "div",
+      { className: "rep-progress-card" },
+      h(
+        "div",
+        { className: "rep-now" },
+        h("span", null, "playhead"),
+        h("strong", null, `${playbackTime.toFixed(2)}s`),
+      ),
+      h(
+        "div",
+        { className: "rep-progress-track", "aria-hidden": "true" },
+        h("span", {
+          className: "rep-progress-fill",
+          style: { width: `${Math.round(repProgress * 100)}%` },
+        }),
+        h("span", { className: "rep-progress-mid" }),
+      ),
+      h(
+        "div",
+        { className: "rep-progress-labels" },
+        h("span", null, `${rep.start_sec.toFixed(2)}s`),
+        h("span", null, `${rep.mid_sec.toFixed(2)}s mid`),
+        h("span", null, `${rep.end_sec.toFixed(2)}s`),
+      ),
+    ),
+    h(
+      "article",
+      { className: "rep-readout" },
+      h("span", null, "Movement read"),
+      h("strong", null, scoreText),
+      h("p", null, `${focusText} ${issueText}`),
+    ),
+    h(
+      "div",
+      { className: "rep-mini-metrics" },
+      h(ScoreBar, {
+        labelText: "ROM",
+        value: analysis?.range_of_motion_score,
+      }),
+      h(ScoreBar, {
+        labelText: "Stability",
+        value: analysis?.stability_score,
+      }),
+      h(ScoreBar, {
+        labelText: "Symmetry",
+        value: analysis?.symmetry_score,
+      }),
+    ),
+    h(
+      "div",
+      { className: "issue-mini-list" },
+      h("h3", null, repIssues.length ? "Issue in this rep" : "Issue check"),
+      repIssues.length
+        ? repIssues.map((issue, index) =>
+            h(
+              "article",
+              { className: `issue-mini ${severityLevel(issue)}`, key: `${issue.issue}-${index}` },
+              h(
+                "div",
+                { className: "issue-mini-head" },
+                h("strong", null, issueTitle(issue)),
+                h(
+                  "span",
+                  { className: `severity-chip ${severityLevel(issue)}` },
+                  severityText(issue),
+                ),
+              ),
+              h("p", null, issueEvidence(issue)),
+              h(
+                "div",
+                { className: "timeline-meta" },
+                h("span", null, issueClipText(result, issue, index)),
+                h("span", null, `evidence ${percent(issue.evidence?.confidence)}`),
+              ),
+            ),
+          )
+        : h("p", null, "No issue marker is attached to this rep."),
+    ),
+  );
+}
+
+function RepsTab({ result, videoSrc }) {
+  const [playbackTime, setPlaybackTime] = useState(0);
+  const [selectedRepId, setSelectedRepId] = useState(null);
+  const replayVideoRef = useRef(null);
+
+  useEffect(() => {
+    setPlaybackTime(0);
+    setSelectedRepId(null);
+  }, [result?.run_id, videoSrc]);
+
   if (!result)
     return h(
       "section",
@@ -482,29 +1017,103 @@ function RepsTab({ result }) {
       h("h2", null, "Rep review"),
       h("p", null, "Rep segments appear after analysis."),
     );
-  const reps = result.report.reps?.reps || [];
+  const report = result.report;
+  const reps = report.reps?.reps || [];
+  const analysisById = repAnalysisById(report);
+  const timedRep = repAtTime(report, playbackTime);
+  const selectedRep = reps.find((rep) => rep.rep_id === selectedRepId) || null;
+  const activeRep = timedRep || selectedRep || reps[0] || null;
+
+  function playFromRep(rep) {
+    const startTime = Math.max(0, (rep.start_sec || 0) - 0.04);
+    setSelectedRepId(rep.rep_id);
+    setPlaybackTime(startTime);
+    if (!replayVideoRef.current) return;
+    replayVideoRef.current.currentTime = startTime;
+    const playPromise = replayVideoRef.current.play();
+    if (playPromise?.catch) playPromise.catch(() => undefined);
+  }
+
   return h(
     "section",
-    { className: "summary" },
-    h("h2", null, "Rep review"),
+    { className: "summary timeline-panel" },
+    h("h2", null, "Rep replay timeline"),
+    h(
+      "p",
+      null,
+      "Play the set to follow each rep live, or click a rep segment to jump the video to that moment.",
+    ),
+    h(
+      "div",
+      { className: "replay-layout" },
+      h(
+        "div",
+        { className: "replay-video-card" },
+        videoSrc
+          ? h("video", {
+              className: "timeline-video",
+              controls: true,
+              muted: true,
+              playsInline: true,
+              preload: "metadata",
+              ref: replayVideoRef,
+              src: videoSrc,
+              onLoadedMetadata: (event) => {
+                setPlaybackTime(event.currentTarget.currentTime || 0);
+              },
+              onTimeUpdate: (event) => {
+                setPlaybackTime(event.currentTarget.currentTime || 0);
+              },
+              onSeeked: (event) => {
+                setPlaybackTime(event.currentTarget.currentTime || 0);
+              },
+            })
+          : h(
+              "div",
+              { className: "timeline-video-placeholder" },
+              h("strong", null, "No replay video available"),
+              h("span", null, "Upload a clip or use a run with an annotated video to sync the timeline."),
+            ),
+        h(RepTimeline, {
+          report,
+          activeRepId: activeRep?.rep_id || null,
+          playbackTime,
+          onRepSelect: playFromRep,
+        }),
+      ),
+      h(RepDetailPanel, { report, rep: activeRep, result, playbackTime }),
+    ),
     reps.length
       ? h(
           "div",
           { className: "rep-grid" },
-          reps.map((rep) =>
-            h(
+          reps.map((rep) => {
+            const analysis = analysisById.get(rep.rep_id);
+            const repIssues = issuesForRep(report, rep.rep_id);
+            const score = repScore(analysis);
+            return h(
               "article",
-              { className: "rep-card", key: rep.rep_id },
-              h("strong", null, `Rep ${rep.rep_id}`),
+              { className: `rep-card ${scoreTone(score)}`, key: rep.rep_id },
               h(
-                "span",
-                null,
-                `${rep.start_sec.toFixed(2)}s-${rep.end_sec.toFixed(2)}s`,
+                "div",
+                { className: "rep-card-head" },
+                h("strong", null, `Rep ${rep.rep_id}`),
+                metaChip(score === null ? "no score" : percent(score), scoreTone(score)),
               ),
+              h("span", null, timeRange(rep.start_sec, rep.end_sec)),
               h("span", null, `frames ${rep.start_frame}-${rep.end_frame}`),
               h("span", null, `midpoint ${rep.mid_sec.toFixed(2)}s`),
-            ),
-          ),
+              h(
+                "div",
+                { className: "pill-row compact" },
+                repIssues.length
+                  ? repIssues.map((issue, index) =>
+                      metaChip(issueTitle(issue), `${severityLevel(issue)}`, `${issue.issue}-${index}`),
+                    )
+                  : metaChip("no issue marker", "strong"),
+              ),
+            );
+          }),
         )
       : h("p", null, "No complete reps were detected."),
   );
@@ -632,11 +1241,11 @@ function IssuesTab({ result }) {
   const issues = result?.report?.issue_markers?.issues || [];
   return h(
     "section",
-    { className: "summary", "aria-label": "Issue timeline" },
+    { className: "summary issue-board", "aria-label": "Issue timeline" },
     h(
       "div",
       { className: "timeline-head" },
-      h("h3", null, "Issue timeline"),
+      h("h3", null, "Coaching moments"),
       h(
         "span",
         null,
@@ -653,36 +1262,47 @@ function IssuesTab({ result }) {
             h(
               "article",
               {
-                className: "issue-card",
+                className: `issue-card issue-card-feature ${severityLevel(issue)}`,
                 key: `${issue.rep_id}-${issue.issue}-${index}`,
               },
               h(IssueMedia, { result, issue, index }),
               h(
                 "div",
-                { className: "timeline-main" },
-                h("strong", null, issueTitle(issue)),
-                h("span", null, issueClipText(result, issue, index)),
+                { className: "issue-body" },
                 h(
-                  "span",
-                  null,
-                  `issue ${issue.start_sec.toFixed(2)}s-${issue.end_sec.toFixed(2)}s`,
-                ),
-              ),
-              h(
-                "div",
-                { className: "timeline-meta" },
-                h(
-                  "span",
-                  { className: `severity-chip ${severityLevel(issue)}` },
-                  severityText(issue),
+                  "div",
+                  { className: "issue-card-head" },
+                  h(
+                    "span",
+                    { className: `severity-chip ${severityLevel(issue)}` },
+                    severityText(issue),
+                  ),
+                  h("strong", null, issueTitle(issue)),
+                  h("small", null, issueClipText(result, issue, index)),
                 ),
+                h("p", null, issueEvidence(issue)),
                 h(
-                  "span",
-                  null,
-                  `evidence confidence ${percent(issue.evidence?.confidence)}`,
+                  "div",
+                  { className: "timeline-meta" },
+                  h(
+                    "span",
+                    null,
+                    `issue ${timeRange(issue.start_sec, issue.end_sec)}`,
+                  ),
+                  h(
+                    "span",
+                    null,
+                    `evidence ${percent(issue.evidence?.confidence)}`,
+                  ),
+                  h("span", null, issueFocus(issue)),
+                  issue.affected_joints.length
+                    ? h(
+                        "span",
+                        null,
+                        `joints ${issue.affected_joints.map(label).join(", ")}`,
+                      )
+                    : null,
                 ),
-                h("span", null, issueEvidence(issue)),
-                h("span", null, issueFocus(issue)),
               ),
             ),
           ),
@@ -707,51 +1327,55 @@ function CoachTab({ result }) {
   const verifierBypassed = Boolean(
     coachArtifacts.coach_summary_verifier_bypassed,
   );
+  const isFallback = coachSource.startsWith("fallback");
+  const cueNow = summary.top_fixes?.[0] || summary.next_session_plan?.[0] || summary.summary;
   return h(
     "section",
-    { className: "summary" },
-    h("h2", null, "Coach summary"),
+    { className: "summary coach-panel" },
+    h("h2", null, "Coach plan"),
+    h("p", null, summary.summary),
     h(
       "div",
-      { className: "stat-grid" },
+      { className: "coach-meta pill-row" },
       [
         ["Provider", coachProvider],
         ["Model", coachModel],
         ["Source", coachSource || "n/a"],
-      ].map(([name, value]) =>
-        h(
-          "div",
-          { className: "stat", key: name },
-          h("span", null, name),
-          h("strong", null, value),
-        ),
-      ),
+      ].map(([name, value]) => metaChip(`${name}: ${value}`, "", name)),
     ),
-    coachSource.startsWith("fallback")
-      ? h("p", null, "A conservative fallback summary was used because the generated summary was unavailable or did not pass verification.")
+    isFallback
+      ? h("p", { className: "system-note" }, "A conservative fallback summary was used because the generated summary was unavailable or did not pass verification.")
       : null,
     verifierBypassed
-      ? h("p", null, "Verifier bypass is active, so the model summary is shown even though verification did not pass.")
+      ? h("p", { className: "system-note warning" }, "Verifier bypass is active, so the model summary is shown even though verification did not pass.")
       : null,
-    h("p", null, summary.summary),
     h(
       "div",
-      { className: "note-grid" },
-      h(NoteList, { title: "What you did", items: summary.what_you_did }),
+      { className: "coach-plan-grid" },
+      h(BriefTile, {
+        eyebrow: "Cue now",
+        title: "First rep of the next set",
+        body: cueNow,
+        tone: "volt",
+      }),
+      h(NoteList, { title: "Keep", items: summary.what_looked_good, className: "coach-note" }),
+      h(NoteList, { title: "Fix first", items: summary.top_fixes, className: "coach-note" }),
       h(NoteList, {
         title: "Variation vs issue",
         items: summary.valid_variation_vs_issue,
+        className: "coach-note",
+      }),
+      h(NoteList, {
+        title: "Next session",
+        items: summary.next_session_plan,
+        className: "coach-note",
       }),
-      h(NoteList, { title: "Top fixes", items: summary.top_fixes }),
       h(NoteList, {
         title: "Confidence notes",
         items: summary.confidence_notes,
+        className: "coach-note muted",
       }),
     ),
-    h(NoteList, {
-      title: "Next session plan",
-      items: summary.next_session_plan,
-    }),
   );
 }
 
@@ -787,27 +1411,31 @@ function ArtifactsTab({ result }) {
           )
         : h("p", null, "Artifacts appear after analysis."),
     ),
+    h(
+      "details",
+      { className: "json-details" },
+      h("summary", null, "Raw report JSON"),
+      h(JsonTab, { result }),
+    ),
   );
 }
 
 const reportTabs = [
-  ["summary", "Summary"],
+  ["summary", "Overview"],
+  ["reps", "Timeline"],
   ["metrics", "Metrics"],
-  ["reps", "Reps"],
   ["issues", "Issues"],
-  ["coach", "Coach"],
-  ["json", "JSON"],
+  ["coach", "Coach Plan"],
   ["artifacts", "Artifacts"],
 ];
 
-function ReportPanel({ result, activeTab, onTabChange }) {
+function ReportPanel({ result, activeTab, onTabChange, videoSrc }) {
   const content = {
     summary: h(SummaryTab, { result }),
     metrics: h(MetricsTab, { result }),
-    reps: h(RepsTab, { result }),
+    reps: h(RepsTab, { result, videoSrc }),
     issues: h(IssuesTab, { result }),
     coach: h(CoachTab, { result }),
-    json: h(JsonTab, { result }),
     artifacts: h(ArtifactsTab, { result }),
   }[activeTab];
 
@@ -836,10 +1464,10 @@ function ReportPanel({ result, activeTab, onTabChange }) {
   );
 }
 
-function NoteList({ title, items }) {
+function NoteList({ title, items, className = "" }) {
   return h(
     "article",
-    { className: "note" },
+    { className: `note${className ? ` ${className}` : ""}` },
     h("h3", null, title),
     h(
       "ul",
@@ -1127,7 +1755,12 @@ function App() {
         h(ReviewInsights, { result }),
       ),
     ),
-    h(ReportPanel, { result, activeTab, onTabChange: setActiveTab }),
+    h(ReportPanel, {
+      result,
+      activeTab,
+      onTabChange: setActiveTab,
+      videoSrc: result?.annotated_video_url || previewUrl,
+    }),
   );
 }
 

web/index.html

@@ -11,10 +11,10 @@
       href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" href="/static/styles.css?v=20260614-video-maxheight" />
+    <link rel="stylesheet" href="/static/styles.css?v=20260614-rep-detail-readout" />
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/static/app.js?v=20260614-video-maxheight"></script>
+    <script type="module" src="/static/app.js?v=20260614-rep-detail-readout"></script>
   </body>
 </html>

web/styles.css

@@ -25,11 +25,14 @@
 }
 
 html {
+  min-height: 100%;
   background: var(--page);
+  overflow-y: auto;
 }
 
 body {
   min-width: 320px;
+  min-height: 100vh;
   margin: 0;
   color: var(--ink);
   background:
@@ -39,9 +42,16 @@ body {
   background-position: center;
   background-size: cover;
   overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior-y: auto;
+  touch-action: pan-y;
   -webkit-tap-highlight-color: rgba(212, 255, 91, 0.18);
 }
 
+#root {
+  min-height: 100%;
+}
+
 body::before {
   content: "";
   position: fixed;
@@ -730,6 +740,649 @@ input[type="text"]:focus-visible,
   padding: clamp(16px, 2vw, 24px);
 }
 
+.overview-panel,
+.metrics-panel,
+.timeline-panel,
+.issue-board,
+.coach-panel {
+  position: relative;
+  overflow: hidden;
+}
+
+.overview-panel::before,
+.metrics-panel::before,
+.timeline-panel::before,
+.issue-board::before,
+.coach-panel::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-top: 2px solid rgba(212, 255, 91, 0.2);
+  background: linear-gradient(120deg, rgba(212, 255, 91, 0.06), transparent 36%, rgba(95, 183, 255, 0.05));
+  pointer-events: none;
+}
+
+.report-hero,
+.brief-grid,
+.score-board,
+.rep-timeline,
+.report-notes,
+.metrics-panel > h2,
+.metrics-panel > p,
+.timeline-panel > h2,
+.timeline-panel > p,
+.issue-board > .timeline-head,
+.coach-panel > h2,
+.coach-panel > p,
+.coach-meta,
+.coach-plan-grid,
+.system-note {
+  position: relative;
+  z-index: 1;
+}
+
+.report-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
+  gap: 16px;
+  align-items: stretch;
+}
+
+.report-copy {
+  min-width: 0;
+}
+
+.report-copy .eyebrow {
+  margin-bottom: 10px;
+}
+
+.report-lede {
+  max-width: 780px;
+  color: rgba(255, 247, 223, 0.88);
+  font-size: 1.08rem;
+}
+
+.pill-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 14px;
+}
+
+.pill-row.compact {
+  margin-top: 8px;
+}
+
+.meta-chip,
+.severity-chip {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  border: 1px solid rgba(245, 242, 232, 0.13);
+  border-radius: 999px;
+  padding: 7px 9px;
+  color: var(--paper);
+  background: rgba(245, 242, 232, 0.08);
+  font-size: 0.78rem;
+  line-height: 1.1;
+}
+
+.meta-chip.strong,
+.meta-chip.mint,
+.meta-chip.volt {
+  border-color: rgba(87, 217, 163, 0.28);
+  color: #c8f7df;
+  background: rgba(87, 217, 163, 0.12);
+}
+
+.meta-chip.watch,
+.meta-chip.moderate {
+  border-color: rgba(255, 129, 87, 0.32);
+  color: #ffd0bf;
+  background: rgba(255, 129, 87, 0.14);
+}
+
+.meta-chip.risk,
+.meta-chip.high {
+  border-color: rgba(255, 139, 116, 0.42);
+  color: #ffd0c7;
+  background: rgba(255, 139, 116, 0.18);
+}
+
+.meta-chip.minor,
+.meta-chip.blue {
+  border-color: rgba(95, 183, 255, 0.26);
+  color: #c6e5ff;
+  background: rgba(95, 183, 255, 0.12);
+}
+
+.verdict-card {
+  display: grid;
+  align-content: space-between;
+  min-height: 180px;
+  border: 1px solid rgba(212, 255, 91, 0.22);
+  border-radius: var(--radius);
+  padding: 18px;
+  background:
+    linear-gradient(150deg, rgba(212, 255, 91, 0.12), transparent 44%),
+    rgba(245, 242, 232, 0.07);
+}
+
+.verdict-card span,
+.brief-tile span,
+.score-card span,
+.rep-score-title span,
+.issue-card-head small {
+  color: var(--muted);
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: 0.76rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.verdict-card strong {
+  color: var(--paper);
+  font-size: 1.45rem;
+  line-height: 1.05;
+}
+
+.verdict-card p,
+.brief-tile p,
+.issue-body p {
+  margin: 8px 0 0;
+  color: rgba(245, 242, 232, 0.82);
+}
+
+.verdict-card small {
+  overflow-wrap: anywhere;
+  color: var(--dim);
+  font-size: 0.74rem;
+}
+
+.brief-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.brief-tile {
+  min-width: 0;
+  border: 1px solid rgba(245, 242, 232, 0.12);
+  border-radius: var(--radius);
+  padding: 15px;
+  background: rgba(245, 242, 232, 0.065);
+}
+
+.brief-tile strong {
+  display: block;
+  margin-top: 8px;
+  color: var(--paper);
+  font-size: 1.05rem;
+}
+
+.brief-tile.mint {
+  border-color: rgba(87, 217, 163, 0.24);
+  background: rgba(87, 217, 163, 0.08);
+}
+
+.brief-tile.volt {
+  border-color: rgba(212, 255, 91, 0.28);
+  background: rgba(212, 255, 91, 0.08);
+}
+
+.brief-tile.high,
+.brief-tile.risk {
+  border-color: rgba(255, 139, 116, 0.38);
+  background: rgba(255, 139, 116, 0.1);
+}
+
+.brief-tile.moderate,
+.brief-tile.watch {
+  border-color: rgba(255, 129, 87, 0.32);
+  background: rgba(255, 129, 87, 0.09);
+}
+
+.score-board {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: 16px;
+}
+
+.score-card {
+  display: grid;
+  gap: 9px;
+  min-width: 0;
+  border: 1px solid rgba(245, 242, 232, 0.12);
+  border-radius: var(--radius);
+  padding: 13px;
+  background: rgba(245, 242, 232, 0.065);
+}
+
+.score-card-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: center;
+}
+
+.score-card strong {
+  color: var(--paper);
+  font-variant-numeric: tabular-nums;
+}
+
+.score-track {
+  display: block;
+  height: 8px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(245, 242, 232, 0.1);
+}
+
+.score-fill {
+  display: block;
+  width: 0%;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--volt), var(--mint));
+}
+
+.score-card.watch .score-fill {
+  background: linear-gradient(90deg, var(--ember), var(--volt));
+}
+
+.score-card.risk .score-fill {
+  background: linear-gradient(90deg, var(--danger), var(--ember));
+}
+
+.score-card small,
+.empty-copy {
+  color: var(--muted);
+}
+
+.rep-timeline {
+  display: grid;
+  gap: 8px;
+  margin-top: 18px;
+}
+
+.replay-layout {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr);
+  gap: 14px;
+  align-items: start;
+  margin-top: 16px;
+}
+
+.replay-video-card,
+.rep-detail-panel {
+  border: 1px solid rgba(245, 242, 232, 0.12);
+  border-radius: var(--radius);
+  background: rgba(9, 10, 8, 0.64);
+  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
+}
+
+.replay-video-card {
+  display: grid;
+  gap: 12px;
+  padding: 12px;
+}
+
+.timeline-video,
+.timeline-video-placeholder {
+  display: block;
+  width: 100%;
+  min-height: 320px;
+  max-height: min(58vh, 560px);
+  border: 1px solid rgba(245, 242, 232, 0.1);
+  border-radius: var(--radius);
+  background: #090a08;
+}
+
+.timeline-video {
+  object-fit: contain;
+}
+
+.timeline-video-placeholder {
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 8px;
+  padding: 24px;
+  color: var(--muted);
+  text-align: center;
+}
+
+.timeline-video-placeholder strong {
+  color: var(--paper);
+}
+
+.timeline-ruler {
+  display: flex;
+  justify-content: space-between;
+  color: var(--dim);
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: 0.74rem;
+}
+
+.rep-track {
+  position: relative;
+  height: 96px;
+  overflow: hidden;
+  border: 1px solid rgba(245, 242, 232, 0.12);
+  border-radius: var(--radius);
+  background:
+    linear-gradient(90deg, rgba(245, 242, 232, 0.08) 1px, transparent 1px),
+    rgba(9, 10, 8, 0.72);
+  background-size: 10% 100%;
+}
+
+.rep-track.interactive {
+  height: 104px;
+  background:
+    linear-gradient(90deg, rgba(245, 242, 232, 0.1) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(245, 242, 232, 0.06), rgba(245, 242, 232, 0.02)),
+    #0b0c0a;
+  background-size: 10% 100%, auto, auto;
+}
+
+.rep-timeline.compact .rep-track {
+  height: 76px;
+}
+
+.timeline-playhead {
+  position: absolute;
+  top: 8px;
+  bottom: 8px;
+  z-index: 5;
+  width: 2px;
+  border-radius: 999px;
+  background: var(--paper);
+  box-shadow: 0 0 0 4px rgba(255, 247, 223, 0.1), 0 0 22px rgba(255, 247, 223, 0.44);
+  transform: translateX(-1px);
+  pointer-events: none;
+}
+
+.rep-segment {
+  position: absolute;
+  top: 22px;
+  display: grid;
+  place-items: center;
+  min-width: 54px;
+  height: 42px;
+  border: 1px solid rgba(87, 217, 163, 0.34);
+  border-radius: var(--radius);
+  color: #11120e;
+  background: linear-gradient(90deg, var(--volt), var(--mint));
+  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
+}
+
+.rep-timeline.playback .rep-segment {
+  top: 32px;
+  height: 46px;
+  appearance: none;
+  border-color: rgba(255, 129, 87, 0.42);
+  background: linear-gradient(90deg, #ff7e66, #ff6f52);
+  cursor: pointer;
+  font: inherit;
+  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
+}
+
+.rep-timeline.playback .rep-segment:hover {
+  border-color: rgba(255, 247, 223, 0.44);
+  box-shadow: 0 18px 42px rgba(255, 129, 87, 0.22);
+}
+
+.rep-timeline.playback .rep-segment.active {
+  border-color: rgba(212, 255, 91, 0.7);
+  background: linear-gradient(90deg, var(--volt), var(--mint));
+  box-shadow: 0 20px 52px rgba(212, 255, 91, 0.26);
+  transform: translateY(-7px);
+}
+
+.rep-segment.watch {
+  border-color: rgba(255, 129, 87, 0.44);
+  background: linear-gradient(90deg, var(--ember), var(--volt));
+}
+
+.rep-segment.risk {
+  border-color: rgba(255, 139, 116, 0.48);
+  background: linear-gradient(90deg, var(--danger), var(--ember));
+}
+
+.rep-segment strong {
+  position: relative;
+  z-index: 2;
+  font-size: 0.86rem;
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+}
+
+.issue-pin {
+  position: absolute;
+  top: -11px;
+  width: 14px;
+  height: 14px;
+  border: 2px solid #090a08;
+  border-radius: 999px;
+  background: var(--blue);
+  box-shadow: 0 0 0 4px rgba(95, 183, 255, 0.18);
+  pointer-events: none;
+}
+
+.issue-pin.moderate {
+  background: var(--ember);
+  box-shadow: 0 0 0 4px rgba(255, 129, 87, 0.2);
+}
+
+.issue-pin.high {
+  background: var(--danger);
+  box-shadow: 0 0 0 4px rgba(255, 139, 116, 0.22);
+}
+
+.rep-detail-panel {
+  display: grid;
+  grid-auto-rows: max-content;
+  gap: 14px;
+  align-content: start;
+  padding: 16px;
+  align-self: stretch;
+}
+
+.rep-detail-panel.strong {
+  border-color: rgba(87, 217, 163, 0.26);
+}
+
+.rep-detail-panel.watch {
+  border-color: rgba(255, 129, 87, 0.34);
+}
+
+.rep-detail-panel.risk {
+  border-color: rgba(255, 139, 116, 0.42);
+}
+
+.rep-detail-head,
+.issue-mini-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: flex-start;
+}
+
+.rep-detail-kicker,
+.rep-now span,
+.rep-fact span,
+.rep-readout span,
+.issue-mini-list h3 {
+  color: var(--muted);
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: 0.74rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.rep-detail-head strong {
+  display: block;
+  margin-top: 5px;
+  color: var(--paper);
+  font-size: 1.7rem;
+  line-height: 1;
+}
+
+.rep-detail-head small {
+  display: block;
+  margin-top: 7px;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.rep-fact-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.rep-fact,
+.rep-progress-card,
+.rep-readout {
+  border: 1px solid rgba(245, 242, 232, 0.1);
+  border-radius: var(--radius);
+  background: rgba(245, 242, 232, 0.06);
+}
+
+.rep-fact {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+  padding: 11px;
+}
+
+.rep-fact strong {
+  overflow-wrap: anywhere;
+  color: var(--paper);
+  font-size: 0.98rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.rep-progress-card {
+  display: grid;
+  gap: 11px;
+  padding: 12px;
+}
+
+.rep-now {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: center;
+}
+
+.rep-now strong {
+  color: var(--volt);
+  font-variant-numeric: tabular-nums;
+}
+
+.rep-progress-track {
+  position: relative;
+  height: 10px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(245, 242, 232, 0.13);
+}
+
+.rep-progress-fill {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--ember), var(--volt));
+}
+
+.rep-progress-mid {
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  left: 50%;
+  width: 2px;
+  background: rgba(255, 247, 223, 0.62);
+}
+
+.rep-progress-labels {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  color: var(--dim);
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: 0.72rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.rep-readout {
+  display: grid;
+  gap: 7px;
+  padding: 12px;
+  background:
+    linear-gradient(135deg, rgba(212, 255, 91, 0.08), transparent 56%),
+    rgba(245, 242, 232, 0.06);
+}
+
+.rep-readout strong {
+  color: var(--paper);
+  line-height: 1.25;
+}
+
+.rep-readout p {
+  margin: 0;
+  color: var(--muted);
+  line-height: 1.38;
+}
+
+.rep-mini-metrics {
+  display: grid;
+  gap: 8px;
+}
+
+.rep-mini-metrics .score-card {
+  padding: 10px;
+}
+
+.issue-mini-list {
+  display: grid;
+  gap: 9px;
+}
+
+.issue-mini-list h3 {
+  margin: 0;
+}
+
+.issue-mini {
+  border: 1px solid rgba(245, 242, 232, 0.11);
+  border-radius: var(--radius);
+  padding: 11px;
+  background: rgba(245, 242, 232, 0.06);
+}
+
+.issue-mini.high {
+  border-color: rgba(255, 139, 116, 0.36);
+  background: rgba(255, 139, 116, 0.09);
+}
+
+.issue-mini.moderate {
+  border-color: rgba(255, 129, 87, 0.3);
+  background: rgba(255, 129, 87, 0.08);
+}
+
+.issue-mini strong {
+  color: var(--paper);
+}
+
+.issue-mini p {
+  margin: 8px 0;
+  color: rgba(245, 242, 232, 0.82);
+}
+
 .stat-grid {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
@@ -842,6 +1495,10 @@ td {
   margin-top: 14px;
 }
 
+.issue-board .issue-card-grid {
+  grid-template-columns: 1fr;
+}
+
 .rep-card,
 .issue-card {
   min-width: 0;
@@ -856,6 +1513,30 @@ td {
   padding: 14px;
 }
 
+.rep-card.strong,
+.rep-score-row.strong {
+  border-color: rgba(87, 217, 163, 0.24);
+}
+
+.rep-card.watch,
+.rep-score-row.watch {
+  border-color: rgba(255, 129, 87, 0.32);
+}
+
+.rep-card.risk,
+.rep-score-row.risk {
+  border-color: rgba(255, 139, 116, 0.38);
+}
+
+.rep-card-head,
+.rep-score-title,
+.issue-card-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: flex-start;
+}
+
 .rep-card strong {
   color: var(--paper);
 }
@@ -870,6 +1551,37 @@ td {
   overflow: hidden;
 }
 
+.rep-score-list {
+  display: grid;
+  gap: 10px;
+  margin: 16px 0;
+}
+
+.rep-score-row {
+  display: grid;
+  grid-template-columns: minmax(90px, 0.4fr) repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  align-items: stretch;
+  border: 1px solid rgba(245, 242, 232, 0.12);
+  border-radius: var(--radius);
+  padding: 10px;
+  background: rgba(245, 242, 232, 0.055);
+}
+
+.rep-score-row .score-card {
+  padding: 10px;
+  background: rgba(9, 10, 8, 0.24);
+}
+
+.rep-score-title {
+  display: grid;
+  align-content: center;
+}
+
+.rep-score-title strong {
+  color: var(--paper);
+}
+
 .issue-card .timeline-main,
 .issue-card .timeline-meta {
   padding: 10px 12px;
@@ -879,10 +1591,50 @@ td {
   padding-top: 0;
 }
 
+.issue-card-feature {
+  display: grid;
+  grid-template-columns: minmax(260px, 0.46fr) minmax(0, 0.54fr);
+}
+
+.issue-card-feature.high {
+  border-color: rgba(255, 139, 116, 0.36);
+}
+
+.issue-card-feature.moderate {
+  border-color: rgba(255, 129, 87, 0.3);
+}
+
+.issue-card-feature.minor {
+  border-color: rgba(95, 183, 255, 0.24);
+}
+
+.issue-body {
+  display: grid;
+  gap: 12px;
+  align-content: start;
+  padding: 14px;
+}
+
+.issue-card-head {
+  display: grid;
+  gap: 6px;
+}
+
+.issue-card-head strong {
+  color: var(--paper);
+  font-size: 1.05rem;
+}
+
+.issue-card-head small {
+  text-transform: none;
+}
+
 .issue-thumb,
 .issue-clip {
   display: block;
   width: 100%;
+  height: 100%;
+  min-height: 220px;
   aspect-ratio: 16 / 10;
   object-fit: contain;
   background: #090a08;
@@ -995,6 +1747,24 @@ td {
   background: rgba(255, 139, 116, 0.18);
 }
 
+.severity-chip.minor {
+  border-color: rgba(95, 183, 255, 0.26);
+  color: #c6e5ff;
+  background: rgba(95, 183, 255, 0.12);
+}
+
+.severity-chip.moderate {
+  border-color: rgba(255, 129, 87, 0.32);
+  color: #ffd0bf;
+  background: rgba(255, 129, 87, 0.14);
+}
+
+.severity-chip.high {
+  border-color: rgba(255, 139, 116, 0.42);
+  color: #ffd0c7;
+  background: rgba(255, 139, 116, 0.18);
+}
+
 .quality-list span {
   border-radius: 999px;
   padding: 7px 10px;
@@ -1008,6 +1778,7 @@ td {
   gap: 8px;
   margin-top: 18px;
   overflow-x: auto;
+  overscroll-behavior-x: contain;
   scrollbar-width: thin;
 }
 
@@ -1039,10 +1810,42 @@ td {
   overflow: hidden;
 }
 
+.coach-meta {
+  margin-bottom: 14px;
+}
+
+.system-note {
+  border: 1px solid rgba(95, 183, 255, 0.22);
+  border-radius: var(--radius);
+  padding: 11px 12px;
+  background: rgba(95, 183, 255, 0.09);
+}
+
+.system-note.warning {
+  border-color: rgba(255, 129, 87, 0.3);
+  background: rgba(255, 129, 87, 0.1);
+}
+
+.coach-plan-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.coach-plan-grid .brief-tile {
+  grid-row: span 2;
+  min-height: 100%;
+}
+
+.coach-note.muted {
+  opacity: 0.86;
+}
+
 .json-block {
   min-height: 360px;
   max-height: 620px;
-  margin: 18px 0 0;
+  margin: 0;
   overflow: auto;
   padding: 18px;
   color: var(--paper);
@@ -1081,6 +1884,17 @@ td {
   font-size: 0.78rem;
 }
 
+.json-details {
+  border-top: 1px solid rgba(245, 242, 232, 0.12);
+}
+
+.json-details summary {
+  cursor: pointer;
+  padding: 16px 18px;
+  color: var(--volt);
+  font-weight: 700;
+}
+
 .error {
   border: 1px solid rgba(255, 139, 116, 0.38);
   border-radius: var(--radius);
@@ -1138,6 +1952,10 @@ td {
 }
 
 @media (max-width: 980px) {
+  .brief-grid,
+  .score-board,
+  .coach-plan-grid,
+  .rep-score-row,
   .note-grid,
   .stat-grid,
   .metric-grid,
@@ -1146,6 +1964,12 @@ td {
   .issue-card-grid {
     grid-template-columns: 1fr 1fr;
   }
+
+  .report-hero,
+  .replay-layout,
+  .issue-card-feature {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (max-width: 720px) {
@@ -1175,6 +1999,10 @@ td {
   .hero-lab,
   .hero-metrics,
   .form-grid,
+  .brief-grid,
+  .score-board,
+  .coach-plan-grid,
+  .rep-score-row,
   .note-grid,
   .stat-grid,
   .metric-grid,
@@ -1184,6 +2012,27 @@ td {
     grid-template-columns: 1fr;
   }
 
+  .verdict-card {
+    min-height: 0;
+  }
+
+  .rep-track {
+    height: 118px;
+  }
+
+  .rep-track.interactive {
+    height: 126px;
+  }
+
+  .rep-segment {
+    min-width: 46px;
+  }
+
+  .timeline-video,
+  .timeline-video-placeholder {
+    min-height: 240px;
+  }
+
   .hero-lab {
     display: none;
   }