feat: audio upload + AI-assisted tempo map generation

Users can now upload any audio file to generate a CTP tempo map:

BPM detection (lib/analysis/bpm-detect.ts):
- Runs entirely client-side via Web Audio API — audio is never uploaded
- Decodes any browser-supported format (MP3, WAV, AAC, OGG, FLAC, M4A)
- Energy envelope → onset strength → autocorrelation over 55–210 BPM range
- Returns BPM, normalised confidence score, duration, and optional half-time BPM
  for songs where a double-time pulse is detected

AI CTP generation (lib/analysis/ai-ctp.ts):
- Calls Claude (claude-opus-4-6) with adaptive thinking + structured JSON output
- System prompt explains CTP rules and section layout conventions
- Claude uses knowledge of well-known songs to produce accurate section maps;
  falls back to a sensible generic structure for unknown tracks
- Only BPM + duration + optional metadata is sent to the server (no audio data)

API route (app/api/analyze/route.ts):
- POST /api/analyze accepts { bpm, duration, title?, artist?, mbid?, contributed_by? }
- Validates input, calls generateCTPWithAI, runs CTP schema validation
- Returns { ctp, warnings } — warnings are surfaced in the UI rather than 500-ing

UI (components/TempoAnalyzer.tsx, app/(web)/analyze/page.tsx):
- Drag-and-drop or browse file upload
- Shows BPM, confidence, duration after detection
- Half-time toggle when double-time is detected
- Metadata form: title, artist, MusicBrainz ID, contributor name
  (filename parsed into artist/title as a convenience default)
- AI generation with streaming-style progress states
- Sections review via TempoMapEditor
- Download .ctp.json or submit directly to the database

Also: added @anthropic-ai/sdk to package.json, ANTHROPIC_API_KEY to .env.example,
updated next.config.mjs serverComponentsExternalPackages, added Analyze nav link.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/(web)/analyze/page.tsx

@@ -0,0 +1,50 @@
+import type { Metadata } from "next";
+import TempoAnalyzer from "@/components/TempoAnalyzer";
+
+export const metadata: Metadata = {
+  title: "Analyze Audio",
+  description:
+    "Upload an audio file, detect the tempo, and generate a CTP tempo map with AI assistance.",
+};
+
+export default function AnalyzePage() {
+  return (
+    <div>
+      <div className="mb-8">
+        <p className="text-sm text-zinc-500 uppercase tracking-widest mb-2">
+          Tempo Analysis
+        </p>
+        <h1 className="text-3xl font-bold">Generate a Tempo Map</h1>
+        <p className="mt-2 text-zinc-400 max-w-xl">
+          Upload your audio file. The app detects the BPM in your browser, then
+          uses AI to generate a complete{" "}
+          <abbr title="Click Track Protocol">CTP</abbr> tempo map — including
+          sections, time signatures, and any tempo changes.
+        </p>
+      </div>
+
+      <div className="mb-6 rounded-lg border border-zinc-800 bg-zinc-900/40 px-5 py-4 text-sm text-zinc-500 space-y-1">
+        <p>
+          <span className="text-zinc-300 font-medium">How it works:</span>
+        </p>
+        <ol className="list-decimal pl-5 space-y-1">
+          <li>Drop or select any audio file — MP3, WAV, AAC, OGG, FLAC, M4A.</li>
+          <li>
+            BPM is detected locally in your browser using the Web Audio API.
+            Your audio is <strong className="text-zinc-400">never uploaded</strong>.
+          </li>
+          <li>
+            Only the detected BPM, duration, and any metadata you provide are
+            sent to the server for AI generation.
+          </li>
+          <li>
+            Claude analyses the song structure and returns a draft CTP document.
+            Always verify it against the recording.
+          </li>
+        </ol>
+      </div>
+
+      <TempoAnalyzer />
+    </div>
+  );
+}

app/api/analyze/route.ts

@@ -0,0 +1,83 @@
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { generateCTPWithAI } from "@/lib/analysis/ai-ctp";
+import { validateCTP } from "@/lib/ctp/validate";
+
+// ─── Request schema ───────────────────────────────────────────────────────────
+
+const AnalyzeRequestSchema = z.object({
+  bpm: z.number().min(20).max(400),
+  duration: z.number().positive(),
+  title: z.string().min(1).max(256).optional(),
+  artist: z.string().min(1).max(256).optional(),
+  mbid: z.string().uuid().optional().nullable(),
+  contributed_by: z.string().min(1).max(64).optional(),
+});
+
+/**
+ * POST /api/analyze
+ *
+ * Accepts BPM detection results from the browser and uses Claude to generate
+ * a draft CTP document for human review.
+ *
+ * Body (JSON):
+ *   { bpm, duration, title?, artist?, mbid?, contributed_by? }
+ *
+ * Returns:
+ *   { ctp: CTPDocument, warnings: string[] }
+ */
+export async function POST(req: NextRequest) {
+  let body: unknown;
+  try {
+    body = await req.json();
+  } catch {
+    return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 });
+  }
+
+  const parsed = AnalyzeRequestSchema.safeParse(body);
+  if (!parsed.success) {
+    return NextResponse.json(
+      { error: "Invalid request", details: parsed.error.flatten() },
+      { status: 400 }
+    );
+  }
+
+  const { bpm, duration, title, artist, mbid, contributed_by } = parsed.data;
+
+  if (!process.env.ANTHROPIC_API_KEY) {
+    return NextResponse.json(
+      { error: "ANTHROPIC_API_KEY is not configured on this server" },
+      { status: 503 }
+    );
+  }
+
+  let ctpDoc;
+  try {
+    ctpDoc = await generateCTPWithAI({
+      bpm,
+      duration,
+      title,
+      artist,
+      mbid: mbid ?? null,
+      contributedBy: contributed_by ?? "anonymous",
+    });
+  } catch (err) {
+    console.error("[analyze] AI generation failed:", err);
+    return NextResponse.json(
+      { error: "Failed to generate CTP document", detail: String(err) },
+      { status: 500 }
+    );
+  }
+
+  // Validate the AI output against the CTP schema
+  const validation = validateCTP(ctpDoc);
+  const warnings: string[] = [];
+
+  if (!validation.success) {
+    // Rather than 500-ing, return the draft with validation warnings so the user
+    // can still see and manually correct it.
+    warnings.push(...validation.errors.issues.map((i) => `${i.path.join(".")}: ${i.message}`));
+  }
+
+  return NextResponse.json({ ctp: ctpDoc, warnings });
+}

app/layout.tsx

@@ -27,7 +27,10 @@ export default function RootLayout({
               <a href="/" className="hover:text-zinc-100 transition-colors">
                 Search
               </a>
-              <a
+              <a href="/analyze" className="hover:text-zinc-100 transition-colors">
+                Analyze
+              </a>
+              <
                 href="https://github.com/your-org/clicktrack"
                 target="_blank"
                 rel="noopener noreferrer"