feat(report): add annotated issue clips

app.py

@@ -76,6 +76,9 @@ def _artifact_url(run_id: str, path: str | None) -> str | None:
     if not path:
         return None
 
+    if not isinstance(path, str):
+        return None
+
     artifact_path = Path(path).resolve()
     run_root = (RUNS_ROOT / run_id).resolve()
     if run_root not in artifact_path.parents or not artifact_path.is_file():
@@ -83,6 +86,69 @@ def _artifact_url(run_id: str, path: str | None) -> str | None:
     return f"/api/artifacts/{run_id}/{artifact_path.name}"
 
 
+def _artifact_link(run_id: str, name: str, path: str | None) -> dict[str, str] | None:
+    url = _artifact_url(run_id, path)
+    if url is None:
+        return None
+    return {"name": name, "url": url}
+
+
+def _artifact_urls(result: dict[str, Any]) -> list[dict[str, str]]:
+    run_id = result["run_id"]
+    run_dir = Path(str(result["run_dir"]))
+    links: list[dict[str, str]] = []
+    artifact_files = [
+        "final_report.json",
+        "video_manifest.json",
+        "pose_sequence.json",
+        "reps.json",
+        "rep_analysis.json",
+        "variation.json",
+        "issue_markers.json",
+        "coach_summary.json",
+        "verification.json",
+        "manifest.json",
+    ]
+    for filename in artifact_files:
+        link = _artifact_link(run_id, filename, str(run_dir / filename))
+        if link is not None:
+            links.append(link)
+
+    video_link = _artifact_link(
+        run_id,
+        "annotated_video.mp4",
+        result.get("annotated_video_path"),
+    )
+    if video_link is not None:
+        links.append(video_link)
+
+    for thumbnail in result.get("issue_thumbnail_paths", []):
+        if not isinstance(thumbnail, dict):
+            continue
+        path = thumbnail.get("path")
+        issue = thumbnail.get("issue", "issue")
+        rep_id = thumbnail.get("rep_id", "?")
+        if not isinstance(path, str):
+            continue
+        link = _artifact_link(run_id, f"thumbnail_rep_{rep_id}_{issue}.jpg", path)
+        if link is not None:
+            links.append(link)
+
+    for clip in result.get("issue_clip_paths", []):
+        if not isinstance(clip, dict):
+            continue
+        path = clip.get("path")
+        issue = clip.get("issue", "issue")
+        rep_id = clip.get("rep_id", "?")
+        if not isinstance(path, str):
+            continue
+        link = _artifact_link(run_id, f"clip_rep_{rep_id}_{issue}.mp4", path)
+        if link is not None:
+            links.append(link)
+
+    return links
+
+
 @server.post("/api/analyze")
 async def analyze_api(
     video: UploadFile | None = File(default=None),
@@ -130,12 +196,37 @@ async def analyze_api(
         if video_path is not None:
             Path(video_path).unlink(missing_ok=True)
 
+    issue_thumbnail_urls = []
+    for thumbnail in result.get("issue_thumbnail_paths", []):
+        if not isinstance(thumbnail, dict):
+            continue
+        path = thumbnail.get("path")
+        if not isinstance(path, str):
+            continue
+        url = _artifact_url(result["run_id"], path)
+        if url is not None:
+            issue_thumbnail_urls.append({**thumbnail, "url": url})
+
+    issue_clip_urls = []
+    for clip in result.get("issue_clip_paths", []):
+        if not isinstance(clip, dict):
+            continue
+        path = clip.get("path")
+        if not isinstance(path, str):
+            continue
+        url = _artifact_url(result["run_id"], path)
+        if url is not None:
+            issue_clip_urls.append({**clip, "url": url})
+
     return {
         "run_id": result["run_id"],
         "run_dir": result["run_dir"],
         "annotated_video_url": _artifact_url(
             result["run_id"], result["annotated_video_path"]
         ),
+        "issue_thumbnail_urls": issue_thumbnail_urls,
+        "issue_clip_urls": issue_clip_urls,
+        "artifact_urls": _artifact_urls(result),
         "final_report_url": f"/api/artifacts/{result['run_id']}/final_report.json",
         "report": result["final_report"],
     }

src/pozify/contracts.py

@@ -557,6 +557,37 @@ def _validate_final_report(value: Any, path: str) -> None:
     _require_type(artifacts["run_dir"], str, f"{path}.artifacts.run_dir")
     if artifacts["annotated_video_path"] is not None:
         _require_type(artifacts["annotated_video_path"], str, f"{path}.artifacts.annotated_video_path")
+    if "issue_thumbnail_paths" in artifacts:
+        _require_type(artifacts["issue_thumbnail_paths"], list, f"{path}.artifacts.issue_thumbnail_paths")
+        for index, thumbnail_value in enumerate(artifacts["issue_thumbnail_paths"]):
+            thumbnail_path = f"{path}.artifacts.issue_thumbnail_paths[{index}]"
+            thumbnail = _require_mapping(thumbnail_value, thumbnail_path)
+            _require_fields(thumbnail, {"issue", "rep_id", "frame", "path"}, thumbnail_path)
+            _require_type(thumbnail["issue"], str, f"{thumbnail_path}.issue")
+            _require_int(thumbnail["rep_id"], f"{thumbnail_path}.rep_id", minimum=1)
+            _require_int(thumbnail["frame"], f"{thumbnail_path}.frame", minimum=0)
+            _require_type(thumbnail["path"], str, f"{thumbnail_path}.path")
+    if "issue_clip_paths" in artifacts:
+        _require_type(artifacts["issue_clip_paths"], list, f"{path}.artifacts.issue_clip_paths")
+        for index, clip_value in enumerate(artifacts["issue_clip_paths"]):
+            clip_path = f"{path}.artifacts.issue_clip_paths[{index}]"
+            clip = _require_mapping(clip_value, clip_path)
+            _require_fields(
+                clip,
+                {"issue", "rep_id", "start_sec", "end_sec", "clip_start_sec", "clip_end_sec", "path"},
+                clip_path,
+            )
+            _require_type(clip["issue"], str, f"{clip_path}.issue")
+            _require_int(clip["rep_id"], f"{clip_path}.rep_id", minimum=1)
+            _require_number(clip["start_sec"], f"{clip_path}.start_sec", minimum=0)
+            _require_number(clip["end_sec"], f"{clip_path}.end_sec", minimum=0)
+            _require_number(clip["clip_start_sec"], f"{clip_path}.clip_start_sec", minimum=0)
+            _require_number(clip["clip_end_sec"], f"{clip_path}.clip_end_sec", minimum=0)
+            if clip["start_sec"] > clip["end_sec"]:
+                raise ContractValidationError(f"{clip_path} timestamps must be ordered")
+            if clip["clip_start_sec"] > clip["clip_end_sec"]:
+                raise ContractValidationError(f"{clip_path} clip timestamps must be ordered")
+            _require_type(clip["path"], str, f"{clip_path}.path")
 
 
 def _validate_run_manifest(value: Any, path: str) -> None:

src/pozify/exercises/shared/issue_marker.py

@@ -149,6 +149,7 @@ def marker_from_group(
         rule.metric_name: round(peak_score.value, 4),
         "threshold": rule.threshold,
         "confidence": confidence(group, rep_item, variation),
+        "peak_frame": peak_score.frame.frame_index,
         "variation_context": {
             "detected_variation": variation.detected_variation,
             "variation_confidence": variation.variation_confidence,

src/pozify/pipeline.py

@@ -94,7 +94,13 @@ def run_pipeline(
     issues = exercise.mark_issues(reps, analysis, variation)
     write_artifact("issue_markers.json", issues)
 
-    annotated_video_path = annotated_renderer.run(manifest, cleaned_pose_sequence, reps, issues, run_dir)
+    render_artifacts = annotated_renderer.run(
+        manifest,
+        cleaned_pose_sequence,
+        reps,
+        issues,
+        run_dir,
+    )
 
     pose_source = (
         cleaned_pose_sequence.frames[0].pose_quality.get("source")
@@ -127,7 +133,9 @@ def run_pipeline(
         "verification": to_dict(verification),
         "artifacts": {
             "run_dir": str(run_dir),
-            "annotated_video_path": annotated_video_path,
+            "annotated_video_path": render_artifacts.annotated_video_path,
+            "issue_thumbnail_paths": render_artifacts.issue_thumbnail_paths,
+            "issue_clip_paths": render_artifacts.issue_clip_paths,
             "rep_debug_path": str(run_dir / "rep_debug.json"),
             "analysis_mode": analysis_mode,
             "pose_source": pose_source,
@@ -146,7 +154,9 @@ def run_pipeline(
     return {
         "run_id": run_id,
         "run_dir": str(run_dir),
-        "annotated_video_path": annotated_video_path,
+        "annotated_video_path": render_artifacts.annotated_video_path,
+        "issue_thumbnail_paths": render_artifacts.issue_thumbnail_paths,
+        "issue_clip_paths": render_artifacts.issue_clip_paths,
         "manifest_path": str(run_dir / "manifest.json"),
         "final_report": final_report,
     }

src/pozify/steps/annotated_renderer.py

@@ -1,14 +1,16 @@
 from __future__ import annotations
 
+from dataclasses import dataclass
 import json
 from pathlib import Path
+import re
 import shutil
 import subprocess
 from typing import Any
 
 import cv2
 
-from pozify.contracts import IssueMarkers, PoseSequence, Reps, VideoManifest
+from pozify.contracts import IssueMarker, IssueMarkers, PoseSequence, Reps, VideoManifest
 
 
 SKELETON_EDGES = [
@@ -38,6 +40,18 @@ BT709_COLOR_ARGS = (
     "bt709",
 )
 
+NORMAL_EDGE_COLOR = (90, 220, 90)
+NORMAL_JOINT_COLOR = (255, 240, 40)
+ISSUE_EDGE_COLOR = (0, 130, 255)
+ISSUE_JOINT_COLOR = (0, 40, 255)
+
+
+@dataclass(frozen=True)
+class RenderArtifacts:
+    annotated_video_path: str | None
+    issue_thumbnail_paths: list[dict[str, Any]]
+    issue_clip_paths: list[dict[str, Any]]
+
 
 def _tool_path(name: str) -> str | None:
     return shutil.which(name)
@@ -224,16 +238,78 @@ def _frame_landmark_points(
     return points
 
 
-def _draw_pose(frame: Any, points: dict[str, tuple[int, int]]) -> None:
+def _draw_pose(
+    frame: Any,
+    points: dict[str, tuple[int, int]],
+    highlighted_joints: set[str] | None = None,
+) -> None:
+    highlighted_joints = highlighted_joints or set()
     for start_name, end_name in SKELETON_EDGES:
         start = points.get(start_name)
         end = points.get(end_name)
         if start is None or end is None:
             continue
-        cv2.line(frame, start, end, (90, 220, 90), 2)
+        cv2.line(frame, start, end, NORMAL_EDGE_COLOR, 2)
 
     for point in points.values():
-        cv2.circle(frame, point, 3, (255, 240, 40), -1)
+        cv2.circle(frame, point, 3, NORMAL_JOINT_COLOR, -1)
+
+    if not highlighted_joints:
+        return
+
+    for start_name, end_name in SKELETON_EDGES:
+        if start_name not in highlighted_joints and end_name not in highlighted_joints:
+            continue
+        start = points.get(start_name)
+        end = points.get(end_name)
+        if start is None or end is None:
+            continue
+        cv2.line(frame, start, end, ISSUE_EDGE_COLOR, 4)
+
+    for name in highlighted_joints:
+        point = points.get(name)
+        if point is not None:
+            cv2.circle(frame, point, 6, ISSUE_JOINT_COLOR, -1)
+
+
+def _issue_angle_label(issue: IssueMarker) -> str | None:
+    for key, value in issue.evidence.items():
+        if not key.endswith("_deg") or isinstance(value, bool) or not isinstance(value, int | float):
+            continue
+        return f"{key.removesuffix('_deg').replace('_', ' ')} {round(float(value))} deg"
+    return None
+
+
+def _issue_label_anchor(issue: IssueMarker, points: dict[str, tuple[int, int]]) -> tuple[int, int]:
+    anchors = [points[name] for name in issue.affected_joints if name in points]
+    if not anchors:
+        return 16, 132
+    x = round(sum(point[0] for point in anchors) / len(anchors))
+    y = round(sum(point[1] for point in anchors) / len(anchors))
+    return x + 10, max(24, y - 10)
+
+
+def _draw_angle_labels(
+    frame: Any,
+    points: dict[str, tuple[int, int]],
+    active_issues: list[IssueMarker],
+) -> None:
+    for offset, issue in enumerate(active_issues):
+        label = _issue_angle_label(issue)
+        if label is None:
+            continue
+        anchor = _issue_label_anchor(issue, points)
+        text_anchor = (anchor[0], anchor[1] + offset * 28)
+        cv2.putText(
+            frame,
+            label,
+            text_anchor,
+            cv2.FONT_HERSHEY_SIMPLEX,
+            0.72,
+            ISSUE_EDGE_COLOR,
+            2,
+            cv2.LINE_AA,
+        )
 
 
 def _rep_boundaries(reps: Reps) -> dict[int, list[str]]:
@@ -245,12 +321,225 @@ def _rep_boundaries(reps: Reps) -> dict[int, list[str]]:
     return boundaries
 
 
+def _rep_phase(frame_index: int, reps: Reps) -> str | None:
+    for rep in reps.reps:
+        if not rep.start_frame <= frame_index <= rep.end_frame:
+            continue
+        if frame_index == rep.start_frame:
+            phase = "start"
+        elif frame_index == rep.mid_frame:
+            phase = "mid"
+        elif frame_index == rep.end_frame:
+            phase = "end"
+        elif frame_index < rep.mid_frame:
+            phase = "lowering"
+        else:
+            phase = "rising"
+        return f"rep {rep.rep_id} {phase}"
+    return None
+
+
+def _active_issues(frame_index: int, issues: IssueMarkers) -> list[IssueMarker]:
+    return [
+        issue
+        for issue in issues.issues
+        if issue.start_frame <= frame_index <= issue.end_frame
+    ]
+
+
+def _highlighted_joints(active_issues: list[IssueMarker]) -> set[str]:
+    joints: set[str] = set()
+    for issue in active_issues:
+        joints.update(issue.affected_joints)
+    return joints
+
+
+def _primary_issue(active_issues: list[IssueMarker]) -> IssueMarker | None:
+    if not active_issues:
+        return None
+    return max(active_issues, key=lambda issue: issue.severity)
+
+
+def _confidence_warning(active_issues: list[IssueMarker], warnings: list[str]) -> str | None:
+    confidences = [
+        float(issue.evidence["confidence"])
+        for issue in active_issues
+        if isinstance(issue.evidence.get("confidence"), int | float)
+    ]
+    if confidences and min(confidences) < 0.55:
+        return "Low confidence issue evidence"
+    if warnings:
+        return "Camera warning: " + ", ".join(warnings[:2])
+    return None
+
+
+def _thumbnail_frame(issue: IssueMarker) -> int:
+    peak_frame = issue.evidence.get("peak_frame")
+    if isinstance(peak_frame, int) and peak_frame >= 0:
+        return peak_frame
+    return round((issue.start_frame + issue.end_frame) / 2)
+
+
+def _slug(value: str) -> str:
+    slug = re.sub(r"[^a-zA-Z0-9]+", "_", value).strip("_").lower()
+    return slug or "issue"
+
+
+def _thumbnail_targets(issues: IssueMarkers, run_dir: Path) -> dict[int, list[dict[str, Any]]]:
+    targets: dict[int, list[dict[str, Any]]] = {}
+    for index, issue in enumerate(issues.issues, start=1):
+        frame = _thumbnail_frame(issue)
+        filename = f"issue_thumbnail_{index}_{_slug(issue.issue)}.jpg"
+        targets.setdefault(frame, []).append(
+            {
+                "issue": issue.issue,
+                "rep_id": issue.rep_id,
+                "frame": frame,
+                "path": str(run_dir / filename),
+            }
+        )
+    return targets
+
+
+def _clip_metadata(issue: IssueMarker, index: int, run_dir: Path) -> dict[str, Any]:
+    filename = f"issue_clip_{index}_{_slug(issue.issue)}.mp4"
+    clip_start_sec = max(0.0, float(issue.start_sec) - 1.0)
+    clip_end_sec = max(clip_start_sec + 0.1, float(issue.end_sec) + 1.0)
+    return {
+        "issue": issue.issue,
+        "rep_id": issue.rep_id,
+        "start_sec": issue.start_sec,
+        "end_sec": issue.end_sec,
+        "clip_start_sec": round(clip_start_sec, 3),
+        "clip_end_sec": round(clip_end_sec, 3),
+        "path": str(run_dir / filename),
+    }
+
+
+def _issue_clip_paths(
+    source_path: Path,
+    issues: IssueMarkers,
+    run_dir: Path,
+    fps: float,
+    width: int,
+    height: int,
+) -> list[dict[str, Any]]:
+    clips: list[dict[str, Any]] = []
+    for index, issue in enumerate(issues.issues, start=1):
+        clip = _clip_metadata(issue, index, run_dir)
+        output_path = Path(clip["path"])
+        start_sec = float(clip["clip_start_sec"])
+        end_sec = float(clip["clip_end_sec"])
+        written = _write_issue_clip_ffmpeg(source_path, output_path, start_sec, end_sec)
+        if not written:
+            written = _write_issue_clip_cv2(
+                source_path,
+                output_path,
+                start_sec,
+                end_sec,
+                fps,
+                width,
+                height,
+            )
+        if written:
+            clips.append(clip)
+    return clips
+
+
+def _write_issue_clip_ffmpeg(
+    source_path: Path,
+    output_path: Path,
+    start_sec: float,
+    end_sec: float,
+) -> bool:
+    ffmpeg = _tool_path("ffmpeg")
+    if ffmpeg is None:
+        return False
+
+    duration = max(0.1, end_sec - start_sec)
+    command = [
+        ffmpeg,
+        "-y",
+        "-v",
+        "error",
+        "-ss",
+        f"{start_sec:.3f}",
+        "-i",
+        str(source_path),
+        "-t",
+        f"{duration:.3f}",
+        "-an",
+        "-c:v",
+        "libx264",
+        "-preset",
+        "veryfast",
+        "-crf",
+        "22",
+        "-pix_fmt",
+        "yuv420p",
+        *BT709_COLOR_ARGS,
+        str(output_path),
+    ]
+    try:
+        subprocess.run(command, check=True, capture_output=True, timeout=60)
+    except (subprocess.SubprocessError, OSError):
+        return False
+    return output_path.exists() and output_path.stat().st_size > 0
+
+
+def _write_issue_clip_cv2(
+    source_path: Path,
+    output_path: Path,
+    start_sec: float,
+    end_sec: float,
+    fps: float,
+    width: int,
+    height: int,
+) -> bool:
+    capture = cv2.VideoCapture(str(source_path))
+    if not capture.isOpened():
+        capture.release()
+        return False
+
+    source_fps = fps if fps > 0 else capture.get(cv2.CAP_PROP_FPS) or 30.0
+    source_width = width or int(capture.get(cv2.CAP_PROP_FRAME_WIDTH) or 0)
+    source_height = height or int(capture.get(cv2.CAP_PROP_FRAME_HEIGHT) or 0)
+    if source_width <= 0 or source_height <= 0:
+        capture.release()
+        return False
+
+    start_frame = max(0, round(start_sec * source_fps))
+    end_frame = max(start_frame + 1, round(end_sec * source_fps))
+    capture.set(cv2.CAP_PROP_POS_FRAMES, start_frame)
+    writer, _codec = _open_video_writer(output_path, source_fps, source_width, source_height)
+    if writer is None:
+        capture.release()
+        return False
+
+    try:
+        frame_index = start_frame
+        while frame_index <= end_frame:
+            ok, frame = capture.read()
+            if not ok or frame is None:
+                break
+            writer.write(frame)
+            frame_index += 1
+    finally:
+        writer.release()
+        capture.release()
+
+    return output_path.exists() and output_path.stat().st_size > 0
+
+
 def _draw_overlays(
     frame: Any,
     frame_index: int,
     rep_count: int,
     issue_count: int,
     boundary_labels: dict[int, list[str]],
+    phase_label: str | None,
+    active_issues: list[IssueMarker],
+    quality_warnings: list[str],
 ) -> None:
     cv2.putText(
         frame,
@@ -272,15 +561,31 @@ def _draw_overlays(
         2,
         cv2.LINE_AA,
     )
-    labels = boundary_labels.get(frame_index, [])
+    labels = list(boundary_labels.get(frame_index, []))
+    if phase_label:
+        labels.append(phase_label)
+    primary_issue = _primary_issue(active_issues)
+    if primary_issue is not None:
+        labels.append(
+            f"{primary_issue.issue} severity {round(primary_issue.severity * 100)}%"
+        )
+    warning = _confidence_warning(active_issues, quality_warnings)
+    if warning is not None:
+        labels.append(warning)
+
     for offset, label in enumerate(labels):
+        color = (80, 180, 255)
+        if primary_issue is not None and label.startswith(primary_issue.issue):
+            color = ISSUE_EDGE_COLOR
+        elif label.startswith("Low confidence") or label.startswith("Camera warning"):
+            color = (0, 210, 255)
         cv2.putText(
             frame,
             label,
             (16, 96 + offset * 28),
             cv2.FONT_HERSHEY_SIMPLEX,
             0.75,
-            (80, 180, 255),
+            color,
             2,
             cv2.LINE_AA,
         )
@@ -311,10 +616,15 @@ def run(
     reps: Reps,
     issues: IssueMarkers,
     run_dir: Path,
-) -> str | None:
+) -> RenderArtifacts:
     if not manifest.analysis_allowed or not manifest.video_path:
-        return manifest.video_path
+        return RenderArtifacts(
+            annotated_video_path=manifest.video_path,
+            issue_thumbnail_paths=[],
+            issue_clip_paths=[],
+        )
 
+    run_dir.mkdir(parents=True, exist_ok=True)
     source_path = Path(manifest.video_path)
     color_metadata = _video_color_metadata(manifest.video_path)
     render_input_path = source_path
@@ -330,14 +640,22 @@ def run(
         capture.release()
         for temporary_path in temporary_paths:
             temporary_path.unlink(missing_ok=True)
-        return manifest.video_path
+        return RenderArtifacts(
+            annotated_video_path=manifest.video_path,
+            issue_thumbnail_paths=[],
+            issue_clip_paths=[],
+        )
 
     fps = manifest.fps if manifest.fps > 0 else 30.0
     width = manifest.width or int(capture.get(cv2.CAP_PROP_FRAME_WIDTH) or 0)
     height = manifest.height or int(capture.get(cv2.CAP_PROP_FRAME_HEIGHT) or 0)
     if width <= 0 or height <= 0:
         capture.release()
-        return manifest.video_path
+        return RenderArtifacts(
+            annotated_video_path=manifest.video_path,
+            issue_thumbnail_paths=[],
+            issue_clip_paths=[],
+        )
 
     output_path = run_dir / "annotated_video.mp4"
     raw_output_path = run_dir / "annotated_video_raw.mp4" if _tool_path("ffmpeg") else output_path
@@ -346,13 +664,19 @@ def run(
         capture.release()
         for temporary_path in temporary_paths:
             temporary_path.unlink(missing_ok=True)
-        return manifest.video_path
+        return RenderArtifacts(
+            annotated_video_path=manifest.video_path,
+            issue_thumbnail_paths=[],
+            issue_clip_paths=[],
+        )
 
     pose_by_frame = {frame.frame_index: frame for frame in pose_sequence.frames}
     ordered_pose_frames = sorted(pose_sequence.frames, key=lambda frame: frame.frame_index)
     pose_cursor = 0
     last_pose_frame = None
     boundary_labels = _rep_boundaries(reps)
+    thumbnail_targets = _thumbnail_targets(issues, run_dir)
+    issue_thumbnail_paths: list[dict[str, Any]] = []
 
     try:
         frame_index = 0
@@ -373,11 +697,25 @@ def run(
 
             exact_pose = pose_by_frame.get(frame_index)
             active_pose = exact_pose or last_pose_frame
+            active_issues = _active_issues(frame_index, issues)
             if active_pose is not None and active_pose.landmarks:
                 points = _frame_landmark_points(active_pose.landmarks, width, height)
-                _draw_pose(frame, points)
-
-            _draw_overlays(frame, frame_index, len(reps.reps), len(issues.issues), boundary_labels)
+                _draw_pose(frame, points, _highlighted_joints(active_issues))
+                _draw_angle_labels(frame, points, active_issues)
+
+            _draw_overlays(
+                frame,
+                frame_index,
+                len(reps.reps),
+                len(issues.issues),
+                boundary_labels,
+                _rep_phase(frame_index, reps),
+                active_issues,
+                manifest.quality_warnings,
+            )
+            for thumbnail in thumbnail_targets.get(frame_index, []):
+                if cv2.imwrite(thumbnail["path"], frame):
+                    issue_thumbnail_paths.append(thumbnail)
             writer.write(frame)
             frame_index += 1
     finally:
@@ -392,4 +730,15 @@ def run(
             raw_output_path.replace(output_path)
         raw_output_path.unlink(missing_ok=True)
 
-    return str(output_path)
+    return RenderArtifacts(
+        annotated_video_path=str(output_path),
+        issue_thumbnail_paths=issue_thumbnail_paths,
+        issue_clip_paths=_issue_clip_paths(
+            output_path,
+            issues,
+            run_dir,
+            fps,
+            width,
+            height,
+        ),
+    )

tests/test_annotated_renderer.py

@@ -10,7 +10,15 @@ import numpy as np
 
 sys.path.insert(0, str(Path(__file__).resolve().parents[1] / "src"))
 
-from pozify.contracts import IssueMarkers, PoseFrame, PoseSequence, Rep, Reps, VideoManifest
+from pozify.contracts import (
+    IssueMarker,
+    IssueMarkers,
+    PoseFrame,
+    PoseSequence,
+    Rep,
+    Reps,
+    VideoManifest,
+)
 from pozify.steps import annotated_renderer
 
 
@@ -84,7 +92,7 @@ class AnnotatedRendererTests(unittest.TestCase):
             partial_reps=[],
         )
 
-        output_path = annotated_renderer.run(
+        result = annotated_renderer.run(
             manifest,
             pose_sequence,
             reps,
@@ -92,8 +100,116 @@ class AnnotatedRendererTests(unittest.TestCase):
             Path(self.temp_dir.name),
         )
 
-        self.assertIsNotNone(output_path)
-        self.assertTrue(Path(str(output_path)).exists())
+        self.assertIsNotNone(result.annotated_video_path)
+        self.assertTrue(Path(str(result.annotated_video_path)).exists())
+        self.assertEqual(result.issue_thumbnail_paths, [])
+        self.assertEqual(result.issue_clip_paths, [])
+
+    def test_renderer_highlights_active_issue_and_writes_thumbnail(self) -> None:
+        video_path = self._write_video()
+        manifest = VideoManifest(
+            video_path=str(video_path),
+            fps=30.0,
+            duration_sec=0.2,
+            total_frames=6,
+            sampled_frames=6,
+            width=320,
+            height=240,
+            codec="mp4v",
+            container="mp4",
+            brightness_mean=100.0,
+            blur_laplacian_var=100.0,
+            quality_warnings=[],
+            analysis_allowed=True,
+        )
+        pose_sequence = PoseSequence(
+            frames=[_frame(index) for index in range(6)],
+            normalized=True,
+            smoothing_method="exponential_smoothing",
+            pose_valid_ratio=1.0,
+        )
+        reps = Reps(
+            exercise="push_up",
+            reps=[Rep(1, 0, 2, 5, 0.0, 0.067, 0.167)],
+            partial_reps=[],
+        )
+        issues = IssueMarkers(
+            issues=[
+                IssueMarker(
+                    rep_id=1,
+                    issue="hip_sag",
+                    severity=0.82,
+                    start_frame=2,
+                    end_frame=4,
+                    start_sec=0.067,
+                    end_sec=0.133,
+                    affected_joints=["left_hip"],
+                    evidence={
+                        "body_line_score": 0.42,
+                        "threshold": 0.6,
+                        "confidence": 0.54,
+                        "peak_frame": 3,
+                    },
+                )
+            ]
+        )
+
+        result = annotated_renderer.run(
+            manifest,
+            pose_sequence,
+            reps,
+            issues,
+            Path(self.temp_dir.name),
+        )
+
+        self.assertIsNotNone(result.annotated_video_path)
+        self.assertEqual(len(result.issue_thumbnail_paths), 1)
+        self.assertTrue(Path(result.issue_thumbnail_paths[0]["path"]).exists())
+        self.assertEqual(len(result.issue_clip_paths), 1)
+        self.assertTrue(Path(result.issue_clip_paths[0]["path"]).exists())
+        self.assertEqual(result.issue_clip_paths[0]["clip_start_sec"], 0.0)
+        self.assertGreater(result.issue_clip_paths[0]["clip_end_sec"], 1.0)
+
+        capture = cv2.VideoCapture(str(result.annotated_video_path))
+        frames = []
+        for _ in range(4):
+            ok, frame = capture.read()
+            self.assertTrue(ok)
+            frames.append(frame)
+        capture.release()
+
+        left_hip_x, left_hip_y = 134, 132
+        active_roi = frames[3][left_hip_y - 8 : left_hip_y + 9, left_hip_x - 8 : left_hip_x + 9]
+        inactive_roi = frames[0][left_hip_y - 8 : left_hip_y + 9, left_hip_x - 8 : left_hip_x + 9]
+        active_red_pixels = np.count_nonzero(
+            (active_roi[:, :, 2] > 180) & (active_roi[:, :, 1] < 180) & (active_roi[:, :, 0] < 120)
+        )
+        inactive_red_pixels = np.count_nonzero(
+            (inactive_roi[:, :, 2] > 180) & (inactive_roi[:, :, 1] < 180) & (inactive_roi[:, :, 0] < 120)
+        )
+        self.assertGreater(active_red_pixels, inactive_red_pixels * 4)
+
+    def test_angle_label_uses_degree_evidence(self) -> None:
+        issue = IssueMarker(
+            rep_id=1,
+            issue="incomplete_depth",
+            severity=0.7,
+            start_frame=2,
+            end_frame=4,
+            start_sec=0.067,
+            end_sec=0.133,
+            affected_joints=["left_elbow", "right_elbow"],
+            evidence={
+                "elbow_angle_deg": 123.4,
+                "threshold": 115.0,
+                "confidence": 0.74,
+            },
+        )
+
+        self.assertEqual(
+            annotated_renderer._issue_angle_label(issue),
+            "elbow angle 123 deg",
+        )
 
     def test_hdr_metadata_requires_sdr_conversion(self) -> None:
         self.assertTrue(

tests/test_issue_marker.py

@@ -162,6 +162,9 @@ class IssueMarkerTests(unittest.TestCase):
         self.assertGreaterEqual(hip_sag.end_frame - hip_sag.start_frame, 2)
         self.assertLess(hip_sag.evidence["body_line_score"], hip_sag.evidence["threshold"])
         self.assertIn("confidence", hip_sag.evidence)
+        self.assertIn("peak_frame", hip_sag.evidence)
+        self.assertGreaterEqual(hip_sag.evidence["peak_frame"], hip_sag.start_frame)
+        self.assertLessEqual(hip_sag.evidence["peak_frame"], hip_sag.end_frame)
         self.assertEqual(
             hip_sag.evidence["variation_context"]["detected_variation"],
             "wide_grip_push_up",

tests/test_pipeline_contracts.py

@@ -136,6 +136,11 @@ class PipelineContractTests(unittest.TestCase):
             self.assertTrue(artifact_path.exists(), artifact_name)
             payload = json.loads(artifact_path.read_text(encoding="utf-8"))
             self.assertEqual(sorted(payload.keys()), keys, artifact_name)
+            if artifact_name == "final_report.json":
+                self.assertIn("issue_thumbnail_paths", payload["artifacts"])
+                self.assertIsInstance(payload["artifacts"]["issue_thumbnail_paths"], list)
+                self.assertIn("issue_clip_paths", payload["artifacts"])
+                self.assertIsInstance(payload["artifacts"]["issue_clip_paths"], list)
 
         manifest = json.loads(manifest_path.read_text(encoding="utf-8"))
         self.assertTrue(manifest["mock_mode"])

web/app.js

@@ -1,4 +1,8 @@
-import React, { useEffect, useMemo, useState } from "https://esm.sh/react@18.2.0";
+import React, {
+  useEffect,
+  useMemo,
+  useState,
+} from "https://esm.sh/react@18.2.0";
 import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
 
 const h = React.createElement;
@@ -6,7 +10,13 @@ const h = React.createElement;
 const defaults = {
   description:
     "Upload a short workout clip, tune the athlete context, and generate an annotated form-review report with structured artifacts.",
-  goals: ["strength", "hypertrophy", "endurance", "mobility", "beginner_practice"],
+  goals: [
+    "strength",
+    "hypertrophy",
+    "endurance",
+    "mobility",
+    "beginner_practice",
+  ],
   experience_levels: ["beginner", "intermediate"],
   exercises: ["auto"],
   limitations: ["wrist_discomfort", "knee_discomfort", "shoulder_discomfort"],
@@ -33,12 +43,26 @@ function SelectField({ labelText, value, onChange, options }) {
     h(
       "select",
       { value, onChange: (event) => onChange(event.target.value) },
-      options.map((option) => h("option", { key: option, value: option }, label(option))),
+      options.map((option) =>
+        h("option", { key: option, value: option }, label(option)),
+      ),
     ),
   );
 }
 
-function Summary({ result }) {
+function formatValue(value) {
+  if (typeof value === "number")
+    return Number.isInteger(value) ? String(value) : value.toFixed(3);
+  if (Array.isArray(value)) return value.map(formatValue).join(", ");
+  if (value && typeof value === "object") return JSON.stringify(value);
+  return value ?? "n/a";
+}
+
+function percent(value) {
+  return typeof value === "number" ? `${Math.round(value * 100)}%` : "n/a";
+}
+
+function SummaryTab({ result }) {
   if (!result) {
     return h(
       "section",
@@ -54,10 +78,10 @@ function Summary({ result }) {
   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)],
-    ["Mode", report.artifacts.analysis_mode],
   ];
 
   return h(
@@ -69,7 +93,12 @@ function Summary({ result }) {
       "div",
       { className: "stat-grid" },
       stats.map(([name, value]) =>
-        h("div", { className: "stat", key: name }, h("span", null, name), h("strong", null, value)),
+        h(
+          "div",
+          { className: "stat", key: name },
+          h("span", null, name),
+          h("strong", null, value),
+        ),
       ),
     ),
     h(
@@ -79,55 +108,250 @@ function Summary({ result }) {
       h(NoteList, { title: "Top fixes", items: summary.top_fixes }),
       h(NoteList, { title: "Next session", items: summary.next_session_plan }),
     ),
-    h(IssueTimeline, { issues }),
     warnings.length
       ? h(
           "div",
           { className: "quality-list" },
-          warnings.map((warning) => h("span", { key: warning }, label(warning))),
+          warnings.map((warning) =>
+            h("span", { key: warning }, label(warning)),
+          ),
         )
-      : h("div", { className: "quality-list" }, h("span", null, "No quality warnings")),
+      : h(
+          "div",
+          { className: "quality-list" },
+          h("span", null, "No quality warnings"),
+        ),
+  );
+}
+
+function MetricsTab({ result }) {
+  if (!result)
+    return h(
+      "section",
+      { className: "summary" },
+      h("h2", null, "Movement metrics"),
+      h("p", null, "Metrics appear after analysis."),
+    );
+  const report = result.report;
+  const aggregate = Object.entries(
+    report.rep_analysis?.aggregate_metrics || {},
+  );
+  const reps = report.rep_analysis?.items || [];
+  return h(
+    "section",
+    { className: "summary" },
+    h("h2", null, "Movement metrics"),
+    h(
+      "div",
+      { className: "metric-grid" },
+      aggregate.length
+        ? aggregate.map(([name, value]) =>
+            h(
+              "div",
+              { className: "stat", key: name },
+              h("span", null, label(name)),
+              h("strong", null, formatValue(value)),
+            ),
+          )
+        : h("p", null, "No aggregate metrics available."),
+    ),
+    h(
+      "div",
+      { className: "table-wrap" },
+      h(
+        "table",
+        null,
+        h(
+          "thead",
+          null,
+          h(
+            "tr",
+            null,
+            ["Rep", "Duration", "ROM", "Stability", "Symmetry"].map((heading) =>
+              h("th", { key: heading }, heading),
+            ),
+          ),
+        ),
+        h(
+          "tbody",
+          null,
+          reps.map((rep) =>
+            h(
+              "tr",
+              { key: rep.rep_id },
+              h("td", null, rep.rep_id),
+              h("td", null, `${formatValue(rep.duration_sec)}s`),
+              h("td", null, percent(rep.range_of_motion_score)),
+              h("td", null, percent(rep.stability_score)),
+              h("td", null, percent(rep.symmetry_score)),
+            ),
+          ),
+        ),
+      ),
+    ),
+  );
+}
+
+function RepsTab({ result }) {
+  if (!result)
+    return h(
+      "section",
+      { className: "summary" },
+      h("h2", null, "Rep review"),
+      h("p", null, "Rep segments appear after analysis."),
+    );
+  const reps = result.report.reps?.reps || [];
+  return h(
+    "section",
+    { className: "summary" },
+    h("h2", null, "Rep review"),
+    reps.length
+      ? h(
+          "div",
+          { className: "rep-grid" },
+          reps.map((rep) =>
+            h(
+              "article",
+              { className: "rep-card", key: rep.rep_id },
+              h("strong", null, `Rep ${rep.rep_id}`),
+              h(
+                "span",
+                null,
+                `${rep.start_sec.toFixed(2)}s-${rep.end_sec.toFixed(2)}s`,
+              ),
+              h("span", null, `frames ${rep.start_frame}-${rep.end_frame}`),
+              h("span", null, `midpoint ${rep.mid_sec.toFixed(2)}s`),
+            ),
+          ),
+        )
+      : h("p", null, "No complete reps were detected."),
   );
 }
 
 function issueEvidence(issue) {
   const entries = Object.entries(issue.evidence || {}).filter(
     ([key, value]) =>
-      !["threshold", "confidence", "variation_context", "supporting_frames", "fallback"].includes(key) &&
-      typeof value !== "object",
+      ![
+        "threshold",
+        "confidence",
+        "variation_context",
+        "supporting_frames",
+        "fallback",
+      ].includes(key) && typeof value !== "object",
   );
   const [metric, value] = entries[0] || ["metric", "n/a"];
   return `${label(metric)} ${value} vs ${issue.evidence?.threshold ?? "n/a"}`;
 }
 
-function IssueTimeline({ issues }) {
+function thumbnailForIssue(result, issue, index) {
+  const thumbnails = result?.issue_thumbnail_urls || [];
+  return (
+    thumbnails.find(
+      (thumbnail) =>
+        thumbnail.rep_id === issue.rep_id && thumbnail.issue === issue.issue,
+    ) || thumbnails[index]
+  );
+}
+
+function clipForIssue(result, issue, index) {
+  const clips = result?.issue_clip_urls || [];
+  return (
+    clips.find(
+      (clip) => clip.rep_id === issue.rep_id && clip.issue === issue.issue,
+    ) || clips[index]
+  );
+}
+
+function IssueMedia({ result, issue, index }) {
+  const clip = clipForIssue(result, issue, index);
+  if (clip?.url) {
+    return h("video", {
+      className: "issue-clip",
+      src: clip.url,
+      controls: true,
+      muted: true,
+      playsInline: true,
+      preload: "metadata",
+    });
+  }
+
+  const thumbnail = thumbnailForIssue(result, issue, index);
+  if (thumbnail?.url) {
+    return h("img", {
+      className: "issue-thumb",
+      src: thumbnail.url,
+      alt: `${label(issue.issue)} thumbnail`,
+    });
+  }
+
+  return h("div", { className: "issue-thumb empty" }, "No clip");
+}
+
+function issueClipText(result, issue, index) {
+  const clip = clipForIssue(result, issue, index);
+  if (
+    !clip ||
+    typeof clip.clip_start_sec !== "number" ||
+    typeof clip.clip_end_sec !== "number"
+  ) {
+    return `Rep ${issue.rep_id} · ${issue.start_sec.toFixed(2)}s-${issue.end_sec.toFixed(2)}s`;
+  }
+  return `Rep ${issue.rep_id} · clip ${clip.clip_start_sec.toFixed(2)}s-${clip.clip_end_sec.toFixed(2)}s`;
+}
+
+function IssuesTab({ result }) {
+  const issues = result?.report?.issue_markers?.issues || [];
   return h(
     "section",
-    { className: "issue-timeline", "aria-label": "Issue timeline" },
+    { className: "summary", "aria-label": "Issue timeline" },
     h(
       "div",
       { className: "timeline-head" },
       h("h3", null, "Issue timeline"),
-      h("span", null, issues.length ? `${issues.length} interval${issues.length === 1 ? "" : "s"}` : "clear"),
+      h(
+        "span",
+        null,
+        issues.length
+          ? `${issues.length} interval${issues.length === 1 ? "" : "s"}`
+          : "clear",
+      ),
     ),
     issues.length
       ? h(
           "div",
-          { className: "timeline-list" },
+          { className: "issue-card-grid" },
           issues.map((issue, index) =>
             h(
               "article",
-              { className: "timeline-item", key: `${issue.rep_id}-${issue.issue}-${index}` },
+              {
+                className: "issue-card",
+                key: `${issue.rep_id}-${issue.issue}-${index}`,
+              },
+              h(IssueMedia, { result, issue, index }),
               h(
                 "div",
                 { className: "timeline-main" },
                 h("strong", null, label(issue.issue)),
-                h("span", null, `Rep ${issue.rep_id} · ${issue.start_sec.toFixed(2)}s-${issue.end_sec.toFixed(2)}s`),
+                h("span", null, issueClipText(result, issue, index)),
+                h(
+                  "span",
+                  null,
+                  `issue ${issue.start_sec.toFixed(2)}s-${issue.end_sec.toFixed(2)}s`,
+                ),
               ),
               h(
                 "div",
                 { className: "timeline-meta" },
-                h("span", null, `severity ${Math.round(issue.severity * 100)}%`),
+                h(
+                  "span",
+                  null,
+                  `severity ${Math.round(issue.severity * 100)}%`,
+                ),
+                h(
+                  "span",
+                  null,
+                  `confidence ${percent(issue.evidence?.confidence)}`,
+                ),
                 h("span", null, issueEvidence(issue)),
                 h("span", null, issue.affected_joints.map(label).join(", ")),
               ),
@@ -138,12 +362,128 @@ function IssueTimeline({ issues }) {
   );
 }
 
+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;
+  return h(
+    "section",
+    { className: "summary" },
+    h("h2", null, "Coach summary"),
+    h("p", null, summary.summary),
+    h(
+      "div",
+      { className: "note-grid" },
+      h(NoteList, { title: "Main findings", items: summary.main_findings }),
+      h(NoteList, { title: "Top fixes", items: summary.top_fixes }),
+      h(NoteList, {
+        title: "Confidence notes",
+        items: summary.confidence_notes,
+      }),
+    ),
+    h(
+      "article",
+      { className: "note full-note" },
+      h("h3", null, "Variation context"),
+      h("p", null, summary.variation_explanation),
+    ),
+  );
+}
+
+function JsonTab({ result }) {
+  return h(
+    "pre",
+    { className: "json-block" },
+    result ? JSON.stringify(result.report, null, 2) : "{}",
+  );
+}
+
+function ArtifactsTab({ result }) {
+  const links = result?.artifact_urls || [];
+  return h(
+    "section",
+    { className: "artifact-panel" },
+    h(
+      "div",
+      { className: "artifact-links" },
+      links.length
+        ? links.map((artifact) =>
+            h(
+              "a",
+              {
+                className: "artifact-link",
+                key: artifact.url,
+                href: artifact.url,
+                download: artifact.name,
+              },
+              artifact.name,
+              h("span", null, "download"),
+            ),
+          )
+        : h("p", null, "Artifacts appear after analysis."),
+    ),
+  );
+}
+
+const reportTabs = [
+  ["summary", "Summary"],
+  ["metrics", "Metrics"],
+  ["reps", "Reps"],
+  ["issues", "Issues"],
+  ["coach", "Coach"],
+  ["json", "JSON"],
+  ["artifacts", "Artifacts"],
+];
+
+function ReportPanel({ result, activeTab, onTabChange }) {
+  const content = {
+    summary: h(SummaryTab, { result }),
+    metrics: h(MetricsTab, { result }),
+    reps: h(RepsTab, { result }),
+    issues: h(IssuesTab, { result }),
+    coach: h(CoachTab, { result }),
+    json: h(JsonTab, { result }),
+    artifacts: h(ArtifactsTab, { result }),
+  }[activeTab];
+
+  return h(
+    React.Fragment,
+    null,
+    h(
+      "div",
+      { className: "tabs", role: "tablist", "aria-label": "Report sections" },
+      reportTabs.map(([key, name]) =>
+        h(
+          "button",
+          {
+            className: `tab${activeTab === key ? " active" : ""}`,
+            key,
+            onClick: () => onTabChange(key),
+            type: "button",
+          },
+          name,
+        ),
+      ),
+    ),
+    content,
+  );
+}
+
 function NoteList({ title, items }) {
   return h(
     "article",
     { className: "note" },
     h("h3", null, title),
-    h("ul", null, items.map((item) => h("li", { key: item }, item))),
+    h(
+      "ul",
+      null,
+      items.map((item) => h("li", { key: item }, item)),
+    ),
   );
 }
 
@@ -157,11 +497,14 @@ function App() {
   const [equipment, setEquipment] = useState("bodyweight");
   const [limitations, setLimitations] = useState([]);
   const [result, setResult] = useState(null);
-  const [activeTab, setActiveTab] = useState("json");
+  const [activeTab, setActiveTab] = useState("summary");
   const [status, setStatus] = useState("idle");
   const [error, setError] = useState("");
 
-  const previewUrl = useMemo(() => (file ? URL.createObjectURL(file) : ""), [file]);
+  const previewUrl = useMemo(
+    () => (file ? URL.createObjectURL(file) : ""),
+    [file],
+  );
 
   useEffect(() => {
     fetch("/api/config")
@@ -178,7 +521,9 @@ function App() {
 
   function toggleLimitation(value) {
     setLimitations((current) =>
-      current.includes(value) ? current.filter((item) => item !== value) : [...current, value],
+      current.includes(value)
+        ? current.filter((item) => item !== value)
+        : [...current, value],
     );
   }
 
@@ -198,7 +543,10 @@ function App() {
     payload.append("equipment", equipment);
 
     try {
-      const response = await fetch("/api/analyze", { method: "POST", body: payload });
+      const response = await fetch("/api/analyze", {
+        method: "POST",
+        body: payload,
+      });
       const body = await response.json();
       if (!response.ok) throw new Error(body.detail || "Analysis failed.");
       setResult(body);
@@ -218,16 +566,35 @@ function App() {
       h(
         "div",
         { className: "hero-content" },
-        h("p", { className: "eyebrow" }, "Pose intelligence for coached training"),
+        h(
+          "p",
+          { className: "eyebrow" },
+          "Pose intelligence for coached training",
+        ),
         h("h1", null, "Pozify"),
         h("p", null, config.description),
       ),
       h(
         "div",
         { className: "hero-metrics", "aria-label": "Pipeline highlights" },
-        h("div", { className: "metric" }, h("strong", null, "33"), h("span", null, "pose landmarks")),
-        h("div", { className: "metric" }, h("strong", null, "60s"), h("span", null, "clip ceiling")),
-        h("div", { className: "metric" }, h("strong", null, "JSON"), h("span", null, "audit trail")),
+        h(
+          "div",
+          { className: "metric" },
+          h("strong", null, "33"),
+          h("span", null, "pose landmarks"),
+        ),
+        h(
+          "div",
+          { className: "metric" },
+          h("strong", null, "60s"),
+          h("span", null, "clip ceiling"),
+        ),
+        h(
+          "div",
+          { className: "metric" },
+          h("strong", null, "JSON"),
+          h("span", null, "audit trail"),
+        ),
       ),
     ),
     h(
@@ -239,8 +606,17 @@ function App() {
         h(
           "div",
           { className: "panel-head" },
-          h("div", null, h("h2", null, "Session setup"), h("p", null, "Movement context")),
-          h("span", { className: "status-pill" }, status === "running" ? "Analyzing" : "Ready"),
+          h(
+            "div",
+            null,
+            h("h2", null, "Session setup"),
+            h("p", null, "Movement context"),
+          ),
+          h(
+            "span",
+            { className: "status-pill" },
+            status === "running" ? "Analyzing" : "Ready",
+          ),
         ),
         h(
           "label",
@@ -251,7 +627,11 @@ function App() {
             onChange: (event) => setFile(event.target.files?.[0] || null),
           }),
           previewUrl
-            ? h("video", { className: "dropzone-preview", src: previewUrl, controls: true })
+            ? h("video", {
+                className: "dropzone-preview",
+                src: previewUrl,
+                controls: true,
+              })
             : h(
                 "span",
                 { className: "dropzone-empty" },
@@ -263,7 +643,12 @@ function App() {
         h(
           "div",
           { className: "form-grid" },
-          h(SelectField, { labelText: "Goal", value: goal, onChange: setGoal, options: config.goals }),
+          h(SelectField, {
+            labelText: "Goal",
+            value: goal,
+            onChange: setGoal,
+            options: config.goals,
+          }),
           h(SelectField, {
             labelText: "Experience",
             value: experience,
@@ -314,7 +699,11 @@ function App() {
             ),
           ),
         ),
-        h("button", { className: "primary", disabled: status === "running" }, status === "running" ? "Analyzing..." : "Analyze Form"),
+        h(
+          "button",
+          { className: "primary", disabled: status === "running" },
+          status === "running" ? "Analyzing..." : "Analyze Form",
+        ),
         error ? h("div", { className: "error" }, error) : null,
       ),
       h(
@@ -323,14 +712,25 @@ function App() {
         h(
           "div",
           { className: "panel-head" },
-          h("div", null, h("h2", null, "Review output"), h("p", null, "Annotated movement")),
-          result ? h("span", { className: "status-pill" }, result.run_id) : null,
+          h(
+            "div",
+            null,
+            h("h2", null, "Review output"),
+            h("p", null, "Annotated movement"),
+          ),
+          result
+            ? 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("video", {
+                className: "result-video",
+                src: result.annotated_video_url,
+                controls: true,
+              })
             : h(
                 "div",
                 { className: "result-empty" },
@@ -340,41 +740,7 @@ function App() {
         ),
       ),
     ),
-    h(Summary, { result }),
-    h(
-      "div",
-      { className: "tabs", role: "tablist", "aria-label": "Artifacts" },
-      ["json", "artifacts"].map((tab) =>
-        h(
-          "button",
-          {
-            className: `tab${activeTab === tab ? " active" : ""}`,
-            key: tab,
-            onClick: () => setActiveTab(tab),
-            type: "button",
-          },
-          tab === "json" ? "Final report JSON" : "Artifact links",
-        ),
-      ),
-    ),
-    h(
-      "section",
-      { className: "artifact-panel" },
-      activeTab === "json"
-        ? h("pre", { className: "json-block" }, result ? JSON.stringify(result.report, null, 2) : "{}")
-        : h(
-            "div",
-            { className: "artifact-links" },
-            result
-              ? [
-                  h("a", { className: "artifact-link", key: "report", href: result.final_report_url }, "final_report.json", h("span", null, "open")),
-                  result.annotated_video_url
-                    ? h("a", { className: "artifact-link", key: "video", href: result.annotated_video_url }, "annotated_video.mp4", h("span", null, "open"))
-                    : null,
-                ]
-              : h("p", null, "Artifacts appear after analysis."),
-          ),
-    ),
+    h(ReportPanel, { result, activeTab, onTabChange: setActiveTab }),
   );
 }
 

web/styles.css

@@ -378,6 +378,13 @@ input[type="text"]:focus,
   margin: 16px 0;
 }
 
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+  margin: 16px 0;
+}
+
 .stat {
   border: 1px solid rgba(37, 44, 31, 0.12);
   border-radius: 8px;
@@ -425,6 +432,106 @@ input[type="text"]:focus,
   color: #3e4438;
 }
 
+.full-note {
+  margin-top: 12px;
+}
+
+.full-note p {
+  margin: 0;
+}
+
+.table-wrap {
+  overflow: auto;
+  border: 1px solid rgba(37, 44, 31, 0.12);
+  border-radius: 8px;
+  background: rgba(255, 253, 247, 0.68);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 620px;
+}
+
+th,
+td {
+  border-bottom: 1px solid rgba(37, 44, 31, 0.1);
+  padding: 11px 12px;
+  text-align: left;
+}
+
+th {
+  color: var(--forest);
+  font-size: 0.78rem;
+  text-transform: uppercase;
+}
+
+td {
+  color: #3e4438;
+}
+
+.rep-grid,
+.issue-card-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 14px;
+}
+
+.rep-card,
+.issue-card {
+  border: 1px solid rgba(37, 44, 31, 0.12);
+  border-radius: 8px;
+  background: rgba(255, 253, 247, 0.66);
+}
+
+.rep-card {
+  display: grid;
+  gap: 6px;
+  padding: 14px;
+}
+
+.rep-card strong {
+  color: var(--forest-deep);
+}
+
+.rep-card span {
+  color: var(--muted);
+  font-size: 0.88rem;
+}
+
+.issue-card {
+  overflow: hidden;
+}
+
+.issue-card .timeline-main,
+.issue-card .timeline-meta {
+  padding: 10px 12px;
+}
+
+.issue-card .timeline-meta {
+  padding-top: 0;
+}
+
+.issue-thumb,
+.issue-clip {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  object-fit: cover;
+  background: #171815;
+}
+
+.issue-clip {
+  color: var(--paper);
+}
+
+.issue-thumb.empty {
+  display: grid;
+  color: rgba(255, 249, 236, 0.62);
+  place-items: center;
+}
+
 .quality-list {
   display: flex;
   flex-wrap: wrap;
@@ -581,7 +688,10 @@ input[type="text"]:focus,
 @media (max-width: 980px) {
   .workspace,
   .note-grid,
-  .stat-grid {
+  .stat-grid,
+  .metric-grid,
+  .rep-grid,
+  .issue-card-grid {
     grid-template-columns: 1fr;
   }
 }