splitsmith 0.2.1__tar.gz → 0.3.0__tar.gz

{splitsmith-0.2.1 → splitsmith-0.3.0}/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [0.3.0](https://github.com/mandakan/splitsmith/compare/v0.2.1...v0.3.0) (2026-05-25)
+
+
+### Features
+
+* **beep-review:** single home for beep work; trim audit page ([#399](https://github.com/mandakan/splitsmith/issues/399)) ([9ecf999](https://github.com/mandakan/splitsmith/commit/9ecf9998f94edeb5420e3a982f97ae4edb2114f0))
+* **brand:** hero + og:image, new tagline, audit shortcut hints ([#401](https://github.com/mandakan/splitsmith/issues/401)) ([40aa55a](https://github.com/mandakan/splitsmith/commit/40aa55ac56da0e9c81ae373554b9dc8816f4b2e0))
+
 ## [0.2.1](https://github.com/mandakan/splitsmith/compare/v0.2.0...v0.2.1) (2026-05-24)
 
 

{splitsmith-0.2.1 → splitsmith-0.3.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: splitsmith
-Version: 0.2.1
+Version: 0.3.0
 Summary: Extract IPSC shot splits from head-mounted camera footage
 Author: Mathias Axell
 License: MIT
@@ -36,7 +36,7 @@ Description-Content-Type: text/markdown
 
 Extract per-shot split times from head-mounted camera footage of IPSC matches and generate Final Cut Pro timelines with per-shot markers.
 
-![audit view](https://raw.githubusercontent.com/mandakan/splitsmith/main/docs/screenshots/audit.png)
+![Splitsmith -- Detect. Coach. Cut.](https://raw.githubusercontent.com/mandakan/splitsmith/main/docs/screenshots/hero.png)
 
 Built to do two things from a single stage video: get per-shot splits for analysis and coaching, and prepare frame-marked clips for match-footage review. Your head-mounted cam (Insta360 Go 3S in this case) already captures audio of every shot; the RO's timer only records your total stage time, so the splits live in the video and nowhere else. Splitsmith extracts them and turns them into a CSV plus an FCPXML timeline with per-shot markers you can step through in Final Cut Pro.
 

{splitsmith-0.2.1 → splitsmith-0.3.0}/README.md

@@ -7,7 +7,7 @@
 
 Extract per-shot split times from head-mounted camera footage of IPSC matches and generate Final Cut Pro timelines with per-shot markers.
 
-![audit view](https://raw.githubusercontent.com/mandakan/splitsmith/main/docs/screenshots/audit.png)
+![Splitsmith -- Detect. Coach. Cut.](https://raw.githubusercontent.com/mandakan/splitsmith/main/docs/screenshots/hero.png)
 
 Built to do two things from a single stage video: get per-shot splits for analysis and coaching, and prepare frame-marked clips for match-footage review. Your head-mounted cam (Insta360 Go 3S in this case) already captures audio of every shot; the RO's timer only records your total stage time, so the splits live in the video and nowhere else. Splitsmith extracts them and turns them into a CSV plus an FCPXML timeline with per-shot markers you can step through in Final Cut Pro.
 

{splitsmith-0.2.1 → splitsmith-0.3.0}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "splitsmith"
-version = "0.2.1"
+version = "0.3.0"
 description = "Extract IPSC shot splits from head-mounted camera footage"
 readme = "README.md"
 requires-python = ">=3.11"

{splitsmith-0.2.1 → splitsmith-0.3.0}/src/splitsmith/__init__.py

@@ -1,3 +1,3 @@
 """splitsmith: extract IPSC shot splits from head-mounted camera footage."""
 
-__version__ = "0.2.1"
+__version__ = "0.3.0"

{splitsmith-0.2.1 → splitsmith-0.3.0}/src/splitsmith/ui/server.py

@@ -1059,7 +1059,7 @@ class BeepQueueItem(BaseModel):
     beep_time: float | None
     beep_confidence: float | None
     beep_reviewed: bool
-    status: Literal["missing", "low_confidence", "unreviewed"]
+    status: Literal["missing", "low_confidence", "unreviewed", "confirmed"]
     alt_candidates: list[BeepQueueAltCandidate]
     # Auto-computed cross-align suggestion for secondaries lives on the
     # shooter's other videos; the SPA fetches them lazily if needed.
@@ -7257,16 +7257,21 @@ def create_app(
     # ----------------------------------------------------------------------
 
     @app.get("/api/match/beep-queue", response_model=BeepQueueResponse)
-    def get_beep_queue() -> BeepQueueResponse:
+    def get_beep_queue(include_confirmed: bool = Query(default=False)) -> BeepQueueResponse:
         """Pending beep items across every shooter in the bound match.
 
-        Surfaces three states per primary video:
+        Surfaces three pending states per primary video:
           - ``missing``: detector hasn't run or didn't find a beep
           - ``low_confidence``: detector found one but below the project's
             auto-trust threshold
           - ``unreviewed``: detector found one above threshold but the
             user hasn't yet listened + approved
 
+        When ``include_confirmed`` is true the response also includes
+        items whose beep has been reviewed, with ``status="confirmed"``.
+        The SPA uses this for the "Show confirmed" toggle so the user
+        can revisit a settled beep without having to clear-and-redo it.
+
         Items are grouped by stage; per-stage shot detection is gated on
         every shooter's primary in that stage being ``beep_reviewed``.
         """
@@ -7320,12 +7325,15 @@ def create_app(
                 elif primary.beep_reviewed:
                     grp.confirmed += 1
                     total_confirmed += 1
-                    continue
+                    if not include_confirmed:
+                        continue
+                    status = "confirmed"
                 elif primary.beep_confidence is not None and primary.beep_confidence < threshold:
                     status = "low_confidence"
                 else:
                     status = "unreviewed"
-                total_pending += 1
+                if status != "confirmed":
+                    total_pending += 1
                 alts = [
                     BeepQueueAltCandidate(
                         time=cand.time,

{splitsmith-0.2.1 → splitsmith-0.3.0}/src/splitsmith/ui_static/src/components/AuditControls.tsx

@@ -12,6 +12,7 @@ import { Maximize2, Minus, Plus } from "lucide-react";
 
 import { MarkerGlyph, type MarkerKind } from "@/components/MarkerGlyph";
 import { Button } from "@/components/ui/button";
+import { modKeyLabel } from "@/lib/platform";
 import { cn } from "@/lib/utils";
 
 export interface MarkerFilters {
@@ -152,6 +153,7 @@ export function ZoomControls({ zoom, onZoomChange, className }: ZoomControlsProp
     const next = base / ZOOM_STEP;
     onZoomChange(next <= MIN_ZOOM ? null : next);
   };
+  const mod = modKeyLabel();
 
   return (
     <div className={cn("inline-flex items-center gap-1", className)} role="group" aria-label="Zoom">
@@ -159,8 +161,8 @@ export function ZoomControls({ zoom, onZoomChange, className }: ZoomControlsProp
         size="sm"
         variant="ghost"
         onClick={zoomOut}
-        aria-label="Zoom out (Cmd+3)"
-        title="Zoom out (Cmd+3)"
+        aria-label={`Zoom out (${mod}+3)`}
+        title={`Zoom out (${mod}+3)`}
       >
         <Minus className="size-3" />
       </Button>
@@ -168,8 +170,8 @@ export function ZoomControls({ zoom, onZoomChange, className }: ZoomControlsProp
         size="sm"
         variant="ghost"
         onClick={() => onZoomChange(null)}
-        aria-label="Fit waveform (Cmd+2)"
-        title="Fit waveform (Cmd+2)"
+        aria-label={`Fit waveform (${mod}+2)`}
+        title={`Fit waveform (${mod}+2)`}
         aria-pressed={zoom == null}
       >
         <Maximize2 className="size-3" />
@@ -178,8 +180,8 @@ export function ZoomControls({ zoom, onZoomChange, className }: ZoomControlsProp
         size="sm"
         variant="ghost"
         onClick={zoomIn}
-        aria-label="Zoom in (Cmd+1)"
-        title="Zoom in (Cmd+1)"
+        aria-label={`Zoom in (${mod}+1)`}
+        title={`Zoom in (${mod}+1)`}
       >
         <Plus className="size-3" />
       </Button>

{splitsmith-0.2.1 → splitsmith-0.3.0}/src/splitsmith/ui_static/src/components/BeepSection.tsx

@@ -50,6 +50,8 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Waveform } from "@/components/Waveform";
+import { useSpacePlayPause } from "@/lib/keyboard";
+import { modKeyGlyph } from "@/lib/platform";
 import { cn, useReleaseMediaOnUnmount } from "@/lib/utils";
 import {
   ApiError,
@@ -695,6 +697,8 @@ export function BeepWaveformPicker({
   showFallbackBeepMarker = true,
   instructions,
   ariaLabel,
+  externalMediaRef,
+  fillHeight = false,
 }: {
   slug: string;
   stageNumber: number;
@@ -715,17 +719,56 @@ export function BeepWaveformPicker({
   instructions?: string;
   /** Override the canvas aria-label for screen readers. */
   ariaLabel?: string;
+  /** Optional external media element (audio OR video) for the picker
+   *  to drive. When provided, the picker skips rendering its own
+   *  <audio> element -- the parent owns playback (same pattern as
+   *  the audit page's MultiCamColumn <video>). Space, click-to-scrub,
+   *  zoom, and the initial seek all act on this element. When not
+   *  provided, the picker creates its own internal <audio src=
+   *  videoAudioUrl(...)> as before -- StageTimeSection relies on
+   *  that path. */
+  externalMediaRef?: { current: HTMLAudioElement | HTMLVideoElement | null };
+  /** Grow the waveform vertically (200 px instead of 80 px) so the
+   *  picker box fills the row when paired with a taller sibling like
+   *  BeepReview's <video aspect-video>. */
+  fillHeight?: boolean;
 }) {
   const [peaks, setPeaks] = useState<PeaksResult | null>(null);
   const [loading, setLoading] = useState(true);
   const [unavailable, setUnavailable] = useState(false);
   const [localTime, setLocalTime] = useState<number>(0);
   const [playing, setPlaying] = useState(false);
-  const [pxPerSec, setPxPerSec] = useState<number | null>(null);
+  // Zoom is a multiplier relative to the viewport-fit baseline (null =
+  // fit-to-width). The audit canvas uses the same model -- it
+  // matters because absolute px/s blows up on long clips: a 104 s
+  // primary at 240 px/s renders 25k px wide, so even "first zoom"
+  // shoves the whole clip off-screen.
+  const [zoom, setZoom] = useState<number | null>(null);
+  const [viewportWidth, setViewportWidth] = useState(0);
+  const viewportRef = useRef<HTMLDivElement | null>(null);
+  const wrapperCallbackRef = useCallback((el: HTMLDivElement | null) => {
+    viewportRef.current = el;
+    if (!el) return;
+    setViewportWidth(Math.floor(el.getBoundingClientRect().width));
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const w = Math.floor(entry.contentRect.width);
+        if (w > 0) setViewportWidth(w);
+      }
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
   const [snapping, setSnapping] = useState(false);
   const [proposal, setProposal] = useState<BeepSnapResult | null>(null);
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-  useReleaseMediaOnUnmount(audioRef);
+  // The picker's playback handle. When the parent owns the media
+  // element (BeepReview passes its <video> ref), we just alias the
+  // external ref; otherwise we create our own <audio> below. Either
+  // way, the rest of the picker (togglePlay, scrub, init seek,
+  // Space hook) reads / writes through ``mediaRef``.
+  const internalAudioRef = useRef<HTMLAudioElement | null>(null);
+  const mediaRef = externalMediaRef ?? internalAudioRef;
+  useReleaseMediaOnUnmount(internalAudioRef);
   const rafRef = useRef<number | null>(null);
 
   useEffect(() => {
@@ -737,7 +780,23 @@ export function BeepWaveformPicker({
       .then((p) => {
         if (cancelled) return;
         setPeaks(p);
-        setLocalTime(p.beep_time ?? 0);
+        // Park the playhead at the detected beep so pressing Play
+        // immediately auditions what the detector picked, instead of
+        // making the user scrub from t=0 first. Also seek the
+        // underlying <audio> element when it's already loaded --
+        // otherwise localTime gets out of sync with the audio
+        // element's currentTime, and the first Play snaps the
+        // playhead back to whatever it was last at.
+        const t = p.beep_time ?? 0;
+        setLocalTime(t);
+        const el = mediaRef.current;
+        if (el) {
+          try {
+            el.currentTime = t;
+          } catch {
+            /* metadata not loaded yet -- onLoadedMetadata will retry */
+          }
+        }
       })
       .catch(() => {
         if (!cancelled) setUnavailable(true);
@@ -776,7 +835,7 @@ export function BeepWaveformPicker({
   useEffect(() => {
     if (!playing) return;
     const tick = () => {
-      const el = audioRef.current;
+      const el = mediaRef.current;
       if (el) setLocalTime(el.currentTime);
       rafRef.current = requestAnimationFrame(tick);
     };
@@ -788,7 +847,7 @@ export function BeepWaveformPicker({
   }, [playing]);
 
   const togglePlay = useCallback(() => {
-    const el = audioRef.current;
+    const el = mediaRef.current;
     if (!el) return;
     if (el.paused) {
       el.play().catch(() => {
@@ -797,7 +856,36 @@ export function BeepWaveformPicker({
     } else {
       el.pause();
     }
-  }, []);
+  }, [mediaRef]);
+
+  // Window-level Space → toggle so the user can audition the beep
+  // even when focus is parked on a sidebar link or a queue row
+  // (the common path: click an item, hit Space). Gated by the picker
+  // actually having peaks loaded so Space falls through to the
+  // browser default while the picker is in its empty / loading state.
+  useSpacePlayPause(togglePlay, peaks != null);
+
+  // When the parent owns the media element (BeepReview), the
+  // ``playing`` / ``localTime`` state need a separate event bridge --
+  // the inline ``onPlay``/``onPause`` handlers below only fire on the
+  // internal <audio>. Listen on the external element so the picker's
+  // playhead + Play button label still reflect the truth.
+  useEffect(() => {
+    if (!externalMediaRef) return;
+    const el = externalMediaRef.current;
+    if (!el) return;
+    const onPlay = () => setPlaying(true);
+    const onPause = () => setPlaying(false);
+    const onEnded = () => setPlaying(false);
+    el.addEventListener("play", onPlay);
+    el.addEventListener("pause", onPause);
+    el.addEventListener("ended", onEnded);
+    return () => {
+      el.removeEventListener("play", onPlay);
+      el.removeEventListener("pause", onPause);
+      el.removeEventListener("ended", onEnded);
+    };
+  }, [externalMediaRef, peaks]);
 
   // Click / drag = seek audio AND set the marker. Marker and the
   // numeric input both read from the draft state in the parent, so they
@@ -806,7 +894,7 @@ export function BeepWaveformPicker({
   const handleScrub = useCallback(
     (t: number) => {
       setLocalTime(t);
-      const el = audioRef.current;
+      const el = mediaRef.current;
       if (el) {
         try {
           el.currentTime = t;
@@ -853,19 +941,49 @@ export function BeepWaveformPicker({
 
   const dismissProposal = useCallback(() => setProposal(null), []);
 
+  // Zoom math mirrors the audit canvas: 1.5x per click, capped at
+  // 16x in, 0.25x out (anything below = back to fit).
   const zoomIn = useCallback(() => {
-    setPxPerSec((cur) => {
-      if (cur == null) return 240;
-      return Math.min(2000, cur * 2);
-    });
+    setZoom((z) => Math.min(16, (z ?? 1) * 1.5));
   }, []);
   const zoomOut = useCallback(() => {
-    setPxPerSec((cur) => {
-      if (cur == null) return null;
-      const next = cur / 2;
-      return next < 60 ? null : next;
+    setZoom((z) => {
+      const next = (z ?? 1) / 1.5;
+      return next <= 0.25 ? null : next;
     });
   }, []);
+  const zoomFit = useCallback(() => setZoom(null), []);
+  const pxPerSec = useMemo(() => {
+    if (zoom == null || !peaks) return null;
+    if (peaks.duration <= 0 || viewportWidth <= 0) return null;
+    const fitPps = viewportWidth / peaks.duration;
+    return Math.max(1, fitPps * zoom);
+  }, [zoom, viewportWidth, peaks]);
+
+  // Cmd/Ctrl + 1/2/3 -- same bindings as the audit canvas waveform so
+  // muscle memory carries across surfaces. Cmd+1 = zoom in, Cmd+2 =
+  // fit, Cmd+3 = zoom out. Ignored when typing in an input/textarea so
+  // we don't steal the browser's tab-cycling shortcut from form fields.
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (!(e.metaKey || e.ctrlKey)) return;
+      if (e.key !== "1" && e.key !== "2" && e.key !== "3") return;
+      if (
+        e.target instanceof HTMLElement &&
+        (e.target.tagName === "INPUT" ||
+          e.target.tagName === "TEXTAREA" ||
+          e.target.isContentEditable)
+      ) {
+        return;
+      }
+      e.preventDefault();
+      if (e.key === "1") zoomIn();
+      else if (e.key === "2") zoomFit();
+      else zoomOut();
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [zoomIn, zoomOut, zoomFit]);
 
   if (loading) {
     return (
@@ -898,7 +1016,7 @@ export function BeepWaveformPicker({
             size="icon"
             variant="ghost"
             onClick={zoomOut}
-            disabled={pxPerSec == null}
+            disabled={zoom == null}
             aria-label="Zoom out"
             title="Zoom out"
             className="size-7"
@@ -917,50 +1035,101 @@ export function BeepWaveformPicker({
           </Button>
         </div>
       </div>
-      <Waveform
-        peaks={peaks.peaks}
-        duration={peaks.duration}
-        currentTime={localTime}
-        onScrub={handleScrub}
-        onScrubEnd={handleScrubEnd}
-        beepTime={markerLocal}
-        pixelsPerSecond={pxPerSec}
-        height={80}
-        ariaLabel={ariaLabel ?? `Beep editor waveform for stage ${stageNumber}`}
-      />
-      <audio
-        ref={audioRef}
-        src={api.videoAudioUrl(slug, stageNumber, videoId)}
-        preload="metadata"
-        onPlay={() => setPlaying(true)}
-        onPause={() => setPlaying(false)}
-        onEnded={() => setPlaying(false)}
-        controls
-        className="w-full"
-      />
-      <div className="flex flex-wrap items-center gap-2 pt-1">
-        <Button
-          size="sm"
-          variant="outline"
-          onClick={togglePlay}
-          title="Play / pause the audio"
-        >
-          {playing ? <Pause /> : <Play />}
-          {playing ? "Pause" : "Play"}
-        </Button>
-        {snapEnabled ? (
+      <div ref={wrapperCallbackRef}>
+        <Waveform
+          peaks={peaks.peaks}
+          duration={peaks.duration}
+          currentTime={localTime}
+          onScrub={handleScrub}
+          onScrubEnd={handleScrubEnd}
+          beepTime={markerLocal}
+          pixelsPerSecond={pxPerSec}
+          height={fillHeight ? 200 : 80}
+          ariaLabel={ariaLabel ?? `Beep editor waveform for stage ${stageNumber}`}
+        />
+      </div>
+      {/* Zoom-shortcut chrome -- mirrors the time-ruler footer that
+          lives under the audit canvas waveform. Same bindings
+          (modKey+1/2/3) so muscle memory carries between surfaces.
+          Right-aligned; the eyebrow on the left labels the row so the
+          chord doesn't read as orphan keys. */}
+      <div className="-mx-3 mt-3 flex flex-wrap items-center gap-x-4 gap-y-1.5 border-t border-rule bg-surface-3/60 px-4 py-2 font-mono text-[0.625rem] uppercase tracking-[0.08em] text-subtle">
+        <span className="tracking-[0.14em] text-muted">Zoom</span>
+        <span className="ml-auto inline-flex items-center gap-1.5">
+          <kbd className="rounded border border-rule-strong bg-surface-2 px-1.5 py-px font-mono text-[0.625rem] font-semibold text-ink-2">
+            {modKeyGlyph()}1
+          </kbd>
+          <span>in</span>
+        </span>
+        <span className="inline-flex items-center gap-1.5">
+          <kbd className="rounded border border-rule-strong bg-surface-2 px-1.5 py-px font-mono text-[0.625rem] font-semibold text-ink-2">
+            {modKeyGlyph()}2
+          </kbd>
+          <span>fit</span>
+        </span>
+        <span className="inline-flex items-center gap-1.5">
+          <kbd className="rounded border border-rule-strong bg-surface-2 px-1.5 py-px font-mono text-[0.625rem] font-semibold text-ink-2">
+            {modKeyGlyph()}3
+          </kbd>
+          <span>out</span>
+        </span>
+      </div>
+      {externalMediaRef ? null : (
+        <audio
+          ref={internalAudioRef}
+          src={api.videoAudioUrl(slug, stageNumber, videoId)}
+          preload="metadata"
+          onPlay={() => setPlaying(true)}
+          onPause={() => setPlaying(false)}
+          onEnded={() => setPlaying(false)}
+          onLoadedMetadata={() => {
+            // Retry the initial seek when audio metadata lands
+            // after peaks did. Without this, the picker shows the
+            // beep marker but Play starts at 0.
+            const el = internalAudioRef.current;
+            if (!el) return;
+            if (Math.abs(el.currentTime - localTime) > 0.05) {
+              try {
+                el.currentTime = localTime;
+              } catch {
+                /* unreachable -- metadata loaded by definition */
+              }
+            }
+          }}
+          controls
+          className="w-full"
+        />
+      )}
+      {/* Play / Snap buttons live in this row only when the picker
+          owns its own <audio>. When the parent passes an external
+          media element (e.g. BeepReview's <video controls>), the
+          play affordance + Space toggle already exist on that
+          element -- a redundant button row just eats vertical space. */}
+      {externalMediaRef ? null : (
+        <div className="flex flex-wrap items-center gap-2 pt-1">
           <Button
             size="sm"
-            variant="default"
-            onClick={() => void requestSnap()}
-            disabled={draftSourceTime == null || snapping}
-            title="Snap the marker to the rise-foot of the nearest beep tone (±1.5s)"
+            variant="outline"
+            onClick={togglePlay}
+            title="Play / pause the audio"
           >
-            {snapping ? <Loader2 className="animate-spin" /> : <Crosshair />}
-            Snap to beep
+            {playing ? <Pause /> : <Play />}
+            {playing ? "Pause" : "Play"}
           </Button>
-        ) : null}
-      </div>
+          {snapEnabled ? (
+            <Button
+              size="sm"
+              variant="default"
+              onClick={() => void requestSnap()}
+              disabled={draftSourceTime == null || snapping}
+              title="Snap the marker to the rise-foot of the nearest beep tone (±1.5s)"
+            >
+              {snapping ? <Loader2 className="animate-spin" /> : <Crosshair />}
+              Snap to beep
+            </Button>
+          ) : null}
+        </div>
+      )}
       {proposal != null ? (
         <SnapProposal
           slug={slug}

{splitsmith-0.2.1 → splitsmith-0.3.0}/src/splitsmith/ui_static/src/components/HelpOverlay.tsx

@@ -14,6 +14,7 @@ import { useEffect, useRef } from "react";
 import { X } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
+import { modKeyGlyph } from "@/lib/platform";
 import { cn } from "@/lib/utils";
 
 export type HelpMode = "audit" | "review";
@@ -35,6 +36,7 @@ interface Section {
 }
 
 function sections(mode: HelpMode): Section[] {
+  const mod = modKeyGlyph();
   const playback: ShortcutRow[] = [
     { keys: ["Space"], desc: "Play / pause" },
     { keys: ["←", "→"], desc: "Nudge playhead 250 ms" },
@@ -54,14 +56,14 @@ function sections(mode: HelpMode): Section[] {
   ];
   const view: ShortcutRow[] = [
     { keys: ["L"], desc: "Toggle the marker list drawer" },
-    { keys: ["⌘", "1"], desc: "Zoom in" },
-    { keys: ["⌘", "2"], desc: "Fit waveform to view" },
-    { keys: ["⌘", "3"], desc: "Zoom out" },
+    { keys: [mod, "1"], desc: "Zoom in" },
+    { keys: [mod, "2"], desc: "Fit waveform to view" },
+    { keys: [mod, "3"], desc: "Zoom out" },
   ];
   const edit: ShortcutRow[] = [
-    { keys: ["⌘", "Z"], desc: "Undo last marker change" },
+    { keys: [mod, "Z"], desc: "Undo last marker change" },
     {
-      keys: ["⌘", "S"],
+      keys: [mod, "S"],
       desc:
         mode === "audit"
           ? "Save audit JSON and jump to the next stage"

splitsmith-0.3.0/src/splitsmith/ui_static/src/components/audit/BeepAnomalyBanner.tsx

@@ -0,0 +1,71 @@
+import { ArrowRight, Link2 } from "lucide-react";
+import { Link } from "react-router-dom";
+
+import { useMatchHref } from "@/lib/matchHref";
+
+export interface BeepAnomalyBannerProps {
+  /** The diagnostic produced by Audit's "first shot / overshoot" heuristic
+   *  (Audit.tsx -> beepDiagnostic). Render-gated by the parent so this
+   *  component only mounts when a real diagnostic exists. */
+  reason: string;
+  /** Shooter slug for the deep-link target. */
+  slug: string;
+  /** Stage number for the deep-link target. */
+  stageNumber: number;
+  /** Primary video id for the deep-link target. The /beep-review queue
+   *  keys items by ``slug::stage::video_id``; we pass the same shape via
+   *  ``?focus=...`` so the queue opens with the exact item active. */
+  videoId: string;
+}
+
+/**
+ * Amber "beep looks wrong" banner that lives below the audit toolbar.
+ *
+ * Replaces the old in-page sync-mode entry (the chip's "Re-pick beep"
+ * button). Audit is now read-only with respect to the beep; the banner
+ * names the suspicion and ships the operator to /beep-review where the
+ * waveform picker + video preview live.
+ *
+ * Scoping: the banner fires only on the active shooter's video, never
+ * cross-shooter. Cross-shooter awareness ("3 beeps pending on stage 02")
+ * belongs in the queue, not in a per-stage warning surface here.
+ */
+export function BeepAnomalyBanner({
+  reason,
+  slug,
+  stageNumber,
+  videoId,
+}: BeepAnomalyBannerProps) {
+  const href = useMatchHref();
+  const focusKey = `${slug}::${stageNumber}::${videoId}`;
+  const target = `${href("beep-review")}?focus=${encodeURIComponent(focusKey)}`;
+  return (
+    <div
+      role="status"
+      className="flex flex-wrap items-start gap-3 rounded-2xl border border-live/40 bg-live/[0.08] px-4 py-3.5"
+    >
+      <span
+        aria-hidden
+        className="mt-0.5 inline-flex size-5.5 shrink-0 items-center justify-center rounded-full border border-live/60 bg-live/10 font-mono text-[0.6875rem] font-bold text-live"
+      >
+        !
+      </span>
+      <div className="flex min-w-[14rem] flex-1 flex-col gap-1">
+        <div className="font-display text-[0.75rem] font-bold uppercase tracking-[0.08em] text-live">
+          Looks like the beep is wrong
+        </div>
+        <p className="m-0 text-[0.8125rem] leading-snug text-ink-2">
+          {reason}
+        </p>
+      </div>
+      <Link
+        to={target}
+        className="inline-flex items-center gap-1.5 rounded-md border-0 bg-led-fill px-3.5 py-2 font-display text-[0.6875rem] font-bold uppercase tracking-[0.08em] text-ink shadow-[0_0_0_1px_var(--color-led),0_0_14px_var(--color-led-glow)] hover:bg-led"
+      >
+        <Link2 className="size-3" strokeWidth={2} aria-hidden />
+        Review this beep
+        <ArrowRight className="size-3" aria-hidden />
+      </Link>
+    </div>
+  );
+}