feat(web): refine movement review dashboard

web/app.js

@@ -503,6 +503,83 @@ function BriefTile({ eyebrow, title, body, tone = "" }) {
   );
 }
 
+function CoachOverview({ result }) {
+  if (!result) return null;
+  const summary = result.report.coach_summary;
+  const coachArtifacts = result.report.artifacts || {};
+  const coachSource = coachArtifacts.coach_summary_source || "";
+  const coachProvider = coachArtifacts.coach_summary_provider || "n/a";
+  const coachModel = coachArtifacts.coach_summary_model || "n/a";
+  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: "coach-spotlight" },
+    h(
+      "div",
+      { className: "coach-command" },
+      h(
+        "div",
+        { className: "coach-command-copy" },
+        h("span", null, "Coach intelligence"),
+        h("strong", null, cueNow),
+        h("p", null, summary.summary),
+      ),
+      h(
+        "div",
+        { className: "coach-meta-stack" },
+        metaChip(`Provider: ${coachProvider}`, "blue"),
+        metaChip(`Model: ${coachModel}`),
+        metaChip(`Source: ${coachSource || "n/a"}`, isFallback ? "watch" : "strong"),
+      ),
+    ),
+    isFallback || verifierBypassed
+      ? h(
+          "div",
+          { className: "coach-system-row" },
+          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",
+                { className: "system-note warning" },
+                "Verifier bypass is active, so the model summary is shown even though verification did not pass.",
+              )
+            : null,
+        )
+      : null,
+    h(
+      "div",
+      { className: "coach-overview-grid" },
+      h(NoteList, { title: "Fix first", items: summary.top_fixes, className: "coach-note priority" }),
+      h(NoteList, { title: "Next session", items: summary.next_session_plan, className: "coach-note next" }),
+      h(NoteList, { title: "Keep", items: summary.what_looked_good, className: "coach-note" }),
+      h(NoteList, {
+        title: "Variation vs issue",
+        items: summary.valid_variation_vs_issue,
+        className: "coach-note",
+      }),
+      h(NoteList, {
+        title: "Confidence notes",
+        items: summary.confidence_notes,
+        className: "coach-note muted",
+      }),
+    ),
+  );
+}
+
 function RepTimeline({
   report,
   compact = false,
@@ -688,7 +765,7 @@ function SummaryTab({ result }) {
           )
         : h("p", { className: "empty-copy" }, "No movement scores available."),
     ),
-    h(RepTimeline, { report, compact: true }),
+    h(CoachOverview, { result }),
     h(
       "div",
       { className: "note-grid report-notes" },
@@ -811,11 +888,11 @@ function MetricsTab({ result }) {
   );
 }
 
-function RepDetailPanel({ report, rep, result, playbackTime }) {
+function RepDetailPanel({ report, rep, result, playbackTime, compact = false }) {
   if (!rep) {
     return h(
       "aside",
-      { className: "rep-detail-panel" },
+      { className: `rep-detail-panel${compact ? " compact" : ""}` },
       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."),
@@ -862,6 +939,112 @@ function RepDetailPanel({ report, rep, result, playbackTime }) {
   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.";
+  const primaryIssue = repIssues[0] || null;
+
+  if (compact) {
+    return h(
+      "aside",
+      { className: `rep-detail-panel compact ${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 compact" },
+        h(
+          "div",
+          { className: "rep-fact" },
+          h("span", null, "Duration"),
+          h("strong", null, `${duration.toFixed(2)}s`),
+        ),
+        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, "Frames"),
+          h("strong", null, `${rep.start_frame}-${rep.end_frame}`),
+        ),
+        h(
+          "div",
+          { className: "rep-fact" },
+          h("span", null, "Issues"),
+          h("strong", null, repIssues.length ? String(repIssues.length) : "clear"),
+        ),
+      ),
+      h(
+        "div",
+        { className: "rep-progress-card compact" },
+        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`),
+        ),
+      ),
+      primaryIssue
+        ? h(
+            "article",
+            { className: `rep-issue-brief ${severityLevel(primaryIssue)}` },
+            h(
+              "div",
+              { className: "rep-issue-brief-head" },
+              h(
+                "div",
+                null,
+                h("span", null, "Issue detail"),
+                h("strong", null, issueTitle(primaryIssue)),
+              ),
+              h(
+                "span",
+                { className: `severity-chip ${severityLevel(primaryIssue)}` },
+                severityText(primaryIssue),
+              ),
+            ),
+            h("p", null, issueEvidence(primaryIssue)),
+            h(
+              "div",
+              { className: "rep-issue-meta" },
+              h("span", null, issueFocus(primaryIssue)),
+              h("span", null, issueClipText(result, primaryIssue, 0)),
+              h("span", null, `confidence ${percent(primaryIssue.evidence?.confidence)}`),
+              repIssues.length > 1
+                ? h("span", null, `+${repIssues.length - 1} more`)
+                : null,
+            ),
+          )
+        : null,
+    );
+  }
 
   return h(
     "aside",
@@ -1000,7 +1183,7 @@ function RepDetailPanel({ report, rep, result, playbackTime }) {
   );
 }
 
-function RepsTab({ result, videoSrc }) {
+function ReplayReviewPanel({ result, videoSrc, className = "" }) {
   const [playbackTime, setPlaybackTime] = useState(0);
   const [selectedRepId, setSelectedRepId] = useState(null);
   const replayVideoRef = useRef(null);
@@ -1010,16 +1193,8 @@ function RepsTab({ result, videoSrc }) {
     setSelectedRepId(null);
   }, [result?.run_id, videoSrc]);
 
-  if (!result)
-    return h(
-      "section",
-      { className: "summary" },
-      h("h2", null, "Rep review"),
-      h("p", null, "Rep segments appear after analysis."),
-    );
   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;
@@ -1035,17 +1210,11 @@ function RepsTab({ result, videoSrc }) {
   }
 
   return h(
-    "section",
-    { 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.",
-    ),
+    "div",
+    { className: `replay-review${className ? ` ${className}` : ""}` },
     h(
       "div",
-      { className: "replay-layout" },
+      { className: "replay-main" },
       h(
         "div",
         { className: "replay-video-card" },
@@ -1074,14 +1243,48 @@ function RepsTab({ result, videoSrc }) {
               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 }),
+      h(RepDetailPanel, {
+        report,
+        rep: activeRep,
+        result,
+        playbackTime,
+        compact: true,
+      }),
+    ),
+    h(
+      "div",
+      { className: "replay-timeline-card" },
+      h(RepTimeline, {
+        report,
+        activeRepId: activeRep?.rep_id || null,
+        playbackTime,
+        onRepSelect: playFromRep,
+      }),
+    ),
+  );
+}
+
+function RepsTab({ result }) {
+  if (!result)
+    return h(
+      "section",
+      { className: "summary" },
+      h("h2", null, "Rep list"),
+      h("p", null, "Rep segments appear after analysis."),
+    );
+  const report = result.report;
+  const reps = report.reps?.reps || [];
+  const analysisById = repAnalysisById(report);
+
+  return h(
+    "section",
+    { className: "summary reps-panel" },
+    h("h2", null, "All reps"),
+    h(
+      "p",
+      null,
+      "A compact pass over every detected rep, with timing, frames, movement score, and issue markers.",
     ),
     reps.length
       ? h(
@@ -1311,74 +1514,6 @@ function IssuesTab({ result }) {
   );
 }
 
-function CoachTab({ result }) {
-  if (!result)
-    return h(
-      "section",
-      { className: "summary" },
-      h("h2", null, "Coach summary"),
-      h("p", null, "Coach notes appear after analysis."),
-    );
-  const summary = result.report.coach_summary;
-  const coachArtifacts = result.report.artifacts || {};
-  const coachSource = coachArtifacts.coach_summary_source || "";
-  const coachProvider = coachArtifacts.coach_summary_provider || "n/a";
-  const coachModel = coachArtifacts.coach_summary_model || "n/a";
-  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 coach-panel" },
-    h("h2", null, "Coach plan"),
-    h("p", null, summary.summary),
-    h(
-      "div",
-      { className: "coach-meta pill-row" },
-      [
-        ["Provider", coachProvider],
-        ["Model", coachModel],
-        ["Source", coachSource || "n/a"],
-      ].map(([name, value]) => metaChip(`${name}: ${value}`, "", name)),
-    ),
-    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", { className: "system-note warning" }, "Verifier bypass is active, so the model summary is shown even though verification did not pass.")
-      : null,
-    h(
-      "div",
-      { 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: "Confidence notes",
-        items: summary.confidence_notes,
-        className: "coach-note muted",
-      }),
-    ),
-  );
-}
-
 function JsonTab({ result }) {
   return h(
     "pre",
@@ -1422,20 +1557,18 @@ function ArtifactsTab({ result }) {
 
 const reportTabs = [
   ["summary", "Overview"],
-  ["reps", "Timeline"],
+  ["reps", "Reps"],
   ["metrics", "Metrics"],
   ["issues", "Issues"],
-  ["coach", "Coach Plan"],
   ["artifacts", "Artifacts"],
 ];
 
-function ReportPanel({ result, activeTab, onTabChange, videoSrc }) {
+function ReportPanel({ result, activeTab, onTabChange }) {
   const content = {
     summary: h(SummaryTab, { result }),
     metrics: h(MetricsTab, { result }),
-    reps: h(RepsTab, { result, videoSrc }),
+    reps: h(RepsTab, { result }),
     issues: h(IssuesTab, { result }),
-    coach: h(CoachTab, { result }),
     artifacts: h(ArtifactsTab, { result }),
   }[activeTab];
 
@@ -1738,20 +1871,22 @@ function App() {
             ? h("span", { className: "status-pill" }, result.run_id)
             : null,
         ),
-        h(
-          "div",
-          { className: "result-stage" },
-          result?.annotated_video_url
-            ? h("video", {
-                className: "result-video",
-                src: result.annotated_video_url,
-                controls: true,
-              })
-            : h(StageEmpty, null),
-        ),
-        result?.annotated_video_url
-          ? null
-          : h(ProgressPanel, { steps: progressSteps }),
+        result
+          ? h(ReplayReviewPanel, {
+              result,
+              videoSrc: result?.annotated_video_url || previewUrl,
+              className: "review-output-replay",
+            })
+          : h(
+              React.Fragment,
+              null,
+              h(
+                "div",
+                { className: "result-stage" },
+                h(StageEmpty, null),
+              ),
+              h(ProgressPanel, { steps: progressSteps }),
+            ),
         h(ReviewInsights, { result }),
       ),
     ),
@@ -1759,7 +1894,6 @@ function App() {
       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-rep-detail-readout" />
+    <link rel="stylesheet" href="/static/styles.css?v=20260614-compact-rep-card-height" />
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/static/app.js?v=20260614-rep-detail-readout"></script>
+    <script type="module" src="/static/app.js?v=20260614-compact-rep-card-height"></script>
   </body>
 </html>

web/styles.css

@@ -743,6 +743,7 @@ input[type="text"]:focus-visible,
 .overview-panel,
 .metrics-panel,
 .timeline-panel,
+.reps-panel,
 .issue-board,
 .coach-panel {
   position: relative;
@@ -752,6 +753,7 @@ input[type="text"]:focus-visible,
 .overview-panel::before,
 .metrics-panel::before,
 .timeline-panel::before,
+.reps-panel::before,
 .issue-board::before,
 .coach-panel::before {
   content: "";
@@ -767,10 +769,15 @@ input[type="text"]:focus-visible,
 .score-board,
 .rep-timeline,
 .report-notes,
+.coach-spotlight,
 .metrics-panel > h2,
 .metrics-panel > p,
 .timeline-panel > h2,
 .timeline-panel > p,
+.reps-panel > h2,
+.reps-panel > p,
+.reps-panel .rep-grid,
+.reps-panel .table-wrap,
 .issue-board > .timeline-head,
 .coach-panel > h2,
 .coach-panel > p,
@@ -1007,6 +1014,54 @@ input[type="text"]:focus-visible,
   margin-top: 18px;
 }
 
+.replay-review {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  gap: 12px;
+}
+
+.replay-main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
+  gap: 14px;
+  align-items: start;
+}
+
+.review-output-replay .replay-main {
+  margin-top: 0;
+  grid-template-columns: minmax(0, 1.22fr) minmax(260px, 0.52fr);
+}
+
+.review-output-replay .timeline-video,
+.review-output-replay .timeline-video-placeholder {
+  min-height: 280px;
+  max-height: min(52vh, 520px);
+}
+
+.review-output-replay .rep-detail-panel {
+  max-height: min(52vh, 620px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
+.replay-timeline-card {
+  border: 1px solid rgba(245, 242, 232, 0.12);
+  border-radius: var(--radius);
+  padding: 12px;
+  background: rgba(9, 10, 8, 0.64);
+  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
+}
+
+.replay-timeline-card .rep-timeline {
+  margin-top: 0;
+}
+
+.review-output-replay .replay-timeline-card .rep-track.interactive {
+  height: 112px;
+}
+
 .replay-layout {
   position: relative;
   z-index: 1;
@@ -1018,6 +1073,7 @@ input[type="text"]:focus-visible,
 }
 
 .replay-video-card,
+.replay-timeline-card,
 .rep-detail-panel {
   border: 1px solid rgba(245, 242, 232, 0.12);
   border-radius: var(--radius);
@@ -1192,6 +1248,12 @@ input[type="text"]:focus-visible,
   align-self: stretch;
 }
 
+.rep-detail-panel.compact {
+  gap: 10px;
+  padding: 14px;
+  align-self: start;
+}
+
 .rep-detail-panel.strong {
   border-color: rgba(87, 217, 163, 0.26);
 }
@@ -1232,6 +1294,10 @@ input[type="text"]:focus-visible,
   line-height: 1;
 }
 
+.rep-detail-panel.compact .rep-detail-head strong {
+  font-size: 1.45rem;
+}
+
 .rep-detail-head small {
   display: block;
   margin-top: 7px;
@@ -1245,6 +1311,10 @@ input[type="text"]:focus-visible,
   gap: 8px;
 }
 
+.rep-fact-grid.compact {
+  gap: 7px;
+}
+
 .rep-fact,
 .rep-progress-card,
 .rep-readout {
@@ -1260,6 +1330,11 @@ input[type="text"]:focus-visible,
   padding: 11px;
 }
 
+.rep-detail-panel.compact .rep-fact {
+  gap: 5px;
+  padding: 9px;
+}
+
 .rep-fact strong {
   overflow-wrap: anywhere;
   color: var(--paper);
@@ -1267,12 +1342,21 @@ input[type="text"]:focus-visible,
   font-variant-numeric: tabular-nums;
 }
 
+.rep-detail-panel.compact .rep-fact strong {
+  font-size: 0.9rem;
+}
+
 .rep-progress-card {
   display: grid;
   gap: 11px;
   padding: 12px;
 }
 
+.rep-progress-card.compact {
+  gap: 8px;
+  padding: 10px;
+}
+
 .rep-now {
   display: flex;
   justify-content: space-between;
@@ -1319,6 +1403,10 @@ input[type="text"]:focus-visible,
   font-variant-numeric: tabular-nums;
 }
 
+.rep-progress-card.compact .rep-progress-track {
+  height: 8px;
+}
+
 .rep-readout {
   display: grid;
   gap: 7px;
@@ -1339,6 +1427,76 @@ input[type="text"]:focus-visible,
   line-height: 1.38;
 }
 
+.rep-issue-brief {
+  display: grid;
+  gap: 8px;
+  border: 1px solid rgba(255, 129, 87, 0.28);
+  border-radius: var(--radius);
+  padding: 10px;
+  background:
+    linear-gradient(135deg, rgba(255, 129, 87, 0.12), transparent 60%),
+    rgba(245, 242, 232, 0.055);
+}
+
+.rep-issue-brief.high {
+  border-color: rgba(255, 139, 116, 0.42);
+  background:
+    linear-gradient(135deg, rgba(255, 139, 116, 0.16), transparent 60%),
+    rgba(245, 242, 232, 0.055);
+}
+
+.rep-issue-brief.minor {
+  border-color: rgba(95, 183, 255, 0.26);
+  background:
+    linear-gradient(135deg, rgba(95, 183, 255, 0.12), transparent 60%),
+    rgba(245, 242, 232, 0.055);
+}
+
+.rep-issue-brief-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: flex-start;
+}
+
+.rep-issue-brief span,
+.rep-issue-meta span {
+  color: var(--muted);
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.rep-issue-brief strong {
+  display: block;
+  margin-top: 5px;
+  color: var(--paper);
+  font-size: 0.98rem;
+  line-height: 1.2;
+}
+
+.rep-issue-brief p {
+  margin: 0;
+  color: rgba(245, 242, 232, 0.84);
+  font-size: 0.9rem;
+  line-height: 1.36;
+}
+
+.rep-issue-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.rep-issue-meta span {
+  border: 1px solid rgba(245, 242, 232, 0.1);
+  border-radius: 999px;
+  padding: 5px 7px;
+  background: rgba(9, 10, 8, 0.36);
+  text-transform: none;
+}
+
 .rep-mini-metrics {
   display: grid;
   gap: 8px;
@@ -1838,6 +1996,85 @@ td {
   min-height: 100%;
 }
 
+.coach-spotlight {
+  display: grid;
+  gap: 12px;
+  border: 1px solid rgba(212, 255, 91, 0.24);
+  border-radius: var(--radius);
+  margin-top: 16px;
+  padding: 14px;
+  background:
+    linear-gradient(120deg, rgba(212, 255, 91, 0.11), transparent 34%, rgba(95, 183, 255, 0.07)),
+    rgba(9, 10, 8, 0.34);
+}
+
+.coach-command {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr);
+  gap: 14px;
+  align-items: start;
+}
+
+.coach-command-copy {
+  min-width: 0;
+}
+
+.coach-command-copy span {
+  color: var(--volt);
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.coach-command-copy strong {
+  display: block;
+  margin-top: 8px;
+  color: var(--paper);
+  font-size: clamp(1.35rem, 2.4vw, 2rem);
+  line-height: 1.08;
+}
+
+.coach-command-copy p {
+  max-width: 920px;
+  margin-top: 10px;
+  color: rgba(245, 242, 232, 0.82);
+}
+
+.coach-meta-stack {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.coach-meta-stack .meta-chip {
+  overflow-wrap: anywhere;
+}
+
+.coach-system-row {
+  display: grid;
+  gap: 8px;
+}
+
+.coach-overview-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.coach-overview-grid .note {
+  min-height: 100%;
+  background: rgba(9, 10, 8, 0.28);
+}
+
+.coach-overview-grid .note.priority,
+.coach-overview-grid .note.next {
+  grid-column: span 2;
+  border-color: rgba(212, 255, 91, 0.26);
+  background: rgba(212, 255, 91, 0.075);
+}
+
 .coach-note.muted {
   opacity: 0.86;
 }
@@ -1955,6 +2192,7 @@ td {
   .brief-grid,
   .score-board,
   .coach-plan-grid,
+  .coach-overview-grid,
   .rep-score-row,
   .note-grid,
   .stat-grid,
@@ -1966,7 +2204,10 @@ td {
   }
 
   .report-hero,
+  .coach-command,
   .replay-layout,
+  .replay-main,
+  .review-output-replay .replay-main,
   .issue-card-feature {
     grid-template-columns: 1fr;
   }
@@ -2002,6 +2243,7 @@ td {
   .brief-grid,
   .score-board,
   .coach-plan-grid,
+  .coach-overview-grid,
   .rep-score-row,
   .note-grid,
   .stat-grid,
@@ -2016,6 +2258,15 @@ td {
     min-height: 0;
   }
 
+  .coach-meta-stack {
+    justify-content: flex-start;
+  }
+
+  .coach-overview-grid .note.priority,
+  .coach-overview-grid .note.next {
+    grid-column: auto;
+  }
+
   .rep-track {
     height: 118px;
   }
@@ -2033,6 +2284,11 @@ td {
     min-height: 240px;
   }
 
+  .review-output-replay .rep-detail-panel {
+    max-height: min(70vh, 620px);
+    overflow-y: auto;
+  }
+
   .hero-lab {
     display: none;
   }