add ChirpPairingFlow component with three-act bird animation and full brief copy

@@ -0,0 +1,102 @@1+// @vitest-environment jsdom2+3+import { afterEach, describe, expect, it, vi } from "vitest";4+import { ChirpPairingFlow } from "./ChirpPairingFlow";5+import type { PairingProgress } from "../../shared/sync-types";6+import { renderView } from "../views/view-test-utils";7+8+function progress(phase: PairingProgress["phase"], extra: Partial<PairingProgress> = {}): PairingProgress {9+  return { phase, ...extra };10+}11+12+describe("ChirpPairingFlow", () => {13+  const cleanups: Array<() => void> = [];14+  afterEach(() => {15+    while (cleanups.length) cleanups.pop()!();16+  });17+18+  function mount(progress: PairingProgress, handlers: { onCancel?: () => void; onRetry?: () => void; onDismiss?: () => void } = {}) {19+    const r = renderView(20+      <ChirpPairingFlow21+        progress={progress}22+        onCancel={handlers.onCancel ?? (() => {})}23+        onRetry={handlers.onRetry ?? (() => {})}24+        onDismiss={handlers.onDismiss ?? (() => {})}25+      />,26+    );27+    cleanups.push(r.dispose);28+    return r;29+  }30+31+  it("renders the listening copy in Act 1", () => {32+    const { container } = mount(progress("listening"));33+    expect(container.textContent).toContain("Hold your phone near your laptop");34+    expect(container.textContent).toContain("Peach will pair automatically");35+  });36+37+  it("renders the handshake copy in Act 2", () => {38+    const { container } = mount(progress("handshake"));39+    expect(container.textContent).toContain("Pairing…");40+  });41+42+  it("renders the paired copy with the peer device name", () => {43+    const { container } = mount(progress("paired", { peerDeviceName: "June's Pixel 9" }));44+    expect(container.textContent).toContain("Paired!");45+    expect(container.textContent).toContain("Connected to June's Pixel 9");46+  });47+48+  it("Cancel button calls onCancel in the listening state", () => {49+    const onCancel = vi.fn();50+    const { container } = mount(progress("listening"), { onCancel });51+    const btn = Array.from(container.querySelectorAll("button")).find(52+      (b) => b.textContent === "Cancel",53+    );54+    expect(btn).toBeTruthy();55+    btn!.click();56+    expect(onCancel).toHaveBeenCalled();57+  });58+59+  it("Try again button calls onRetry on timeout", () => {60+    const onRetry = vi.fn();61+    const { container } = mount(progress("timeout"), { onRetry });62+    expect(container.textContent).toContain("Couldn’t find your phone");63+    const btn = Array.from(container.querySelectorAll("button")).find(64+      (b) => b.textContent === "Try again",65+    );66+    expect(btn).toBeTruthy();67+    btn!.click();68+    expect(onRetry).toHaveBeenCalled();69+  });70+71+  it("shows the microphone-permission help text on mic_denied", () => {72+    const { container } = mount(progress("mic_denied"));73+    expect(container.textContent).toContain("Microphone access needed");74+    expect(container.textContent).toContain("No audio is recorded or stored");75+  });76+77+  it("shows the version-mismatch copy", () => {78+    const { container } = mount(progress("version_mismatch"));79+    expect(container.textContent).toContain("Update Peach on both devices");80+  });81+82+  it("auto-dismisses after 2.5s in the paired state", () => {83+    vi.useFakeTimers();84+    try {85+      const onDismiss = vi.fn();86+      mount(progress("paired", { peerDeviceName: "Pixel" }), { onDismiss });87+      // The createEffect that arms the dismissal runs synchronously on88+      // mount because the phase is already "paired"; advancing the timers89+      // by 2500ms fires the setTimeout callback.90+      vi.advanceTimersByTime(2500);91+      expect(onDismiss).toHaveBeenCalled();92+    } finally {93+      vi.useRealTimers();94+    }95+  });96+97+  it("data-phase attribute mirrors the progress phase", () => {98+    const { container } = mount(progress("chirping"));99+    const root = container.querySelector(".peach-chirp-pair") as HTMLElement;100+    expect(root.dataset.phase).toBe("chirping");101+  });102+});

@@ -0,0 +1,185 @@1+// ChirpPairingFlow — the audio pairing screen.2+//3+// Implements the three-act bird animation specified in the brief §6.2:4+//   Act 1 (Waiting) — desktop bird idles, soft pulsing chirp ring5+//   Act 2 (Contact)  — mobile bird hops in, sound-wave arcs in both6+//                       directions, head-tilt reaction7+//   Act 3 (Paired)   — sound waves resolve into a glowing connection dot,8+//                       both birds wing-flutter, copy switches to "Paired!"9+//10+// The acts are bound to the `PairingPhase` enum from sync-types; the11+// background coordinator drives the phase forward as the audio + Noise12+// rounds make progress. The component stays a pure renderer: it does not13+// touch the microphone or the WebSocket itself.14+15+import { Component, Show, createEffect, createSignal } from "solid-js";16+import type { PairingProgress } from "../../shared/sync-types";17+18+export interface ChirpPairingFlowProps {19+  progress: PairingProgress;20+  /** Called when the user taps Retry on a terminal-error state. */21+  onRetry: () => void;22+  /** Called when the user taps Cancel/back on the idle/listening state. */23+  onCancel: () => void;24+  /** Called once the paired-state dismissal animation completes. */25+  onDismiss: () => void;26+}27+28+const PAIRED_DISMISS_MS = 2500;29+30+export const ChirpPairingFlow: Component<ChirpPairingFlowProps> = (props) => {31+  const [dismissArmed, setDismissArmed] = createSignal(false);32+33+  createEffect(() => {34+    if (props.progress.phase === "paired" && !dismissArmed()) {35+      setDismissArmed(true);36+      const t = setTimeout(() => props.onDismiss(), PAIRED_DISMISS_MS);37+      // No need to clean up on unmount — onDismiss is a no-op if parent unmounted.38+      void t;39+    }40+  });41+42+  return (43+    <div class="peach-chirp-pair" data-phase={props.progress.phase}44+         onClick={() => props.progress.phase === "paired" && props.onDismiss()}>45+      <div class="peach-chirp-stage">46+        <DesktopBird phase={props.progress.phase} />47+        <SoundWaves phase={props.progress.phase} />48+        <MobileBird phase={props.progress.phase} />49+        <ConnectionDot phase={props.progress.phase} />50+      </div>51+52+      <PairingCopy progress={props.progress} />53+54+      <Show when={canCancel(props.progress.phase)}>55+        <button class="peach-btn peach-btn-ghost peach-chirp-cancel" onClick={() => props.onCancel()}>56+          Cancel57+        </button>58+      </Show>59+      <Show when={isTerminalError(props.progress.phase)}>60+        <button class="peach-btn peach-btn-primary peach-chirp-retry" onClick={() => props.onRetry()}>61+          Try again62+        </button>63+      </Show>64+      <Show when={props.progress.phase === "mic_denied"}>65+        <p class="peach-chirp-mic-help">66+          Update your browser's site settings to allow Peach to access the microphone, then try again.67+        </p>68+      </Show>69+    </div>70+  );71+};72+73+function canCancel(phase: PairingProgress["phase"]): boolean {74+  return phase === "listening" || phase === "chirping" || phase === "handshake";75+}76+77+function isTerminalError(phase: PairingProgress["phase"]): boolean {78+  return (79+    phase === "timeout" ||80+    phase === "handshake_failed" ||81+    phase === "version_mismatch" ||82+    phase === "mic_denied"83+  );84+}85+86+const PairingCopy: Component<{ progress: PairingProgress }> = (props) => {87+  return (88+    <div class="peach-chirp-copy">89+      <h2 class="peach-chirp-headline">{headline(props.progress)}</h2>90+      <p class="peach-chirp-sub">{subtext(props.progress)}</p>91+    </div>92+  );93+};94+95+function headline(p: PairingProgress): string {96+  switch (p.phase) {97+    case "idle":98+    case "listening":99+    case "chirping":100+      return "Hold your phone near your laptop";101+    case "handshake":102+      return "Pairing…";103+    case "paired":104+      return "Paired!";105+    case "timeout":106+      return "Couldn’t find your phone";107+    case "mic_denied":108+      return "Microphone access needed";109+    case "version_mismatch":110+      return "Update Peach on both devices";111+    case "handshake_failed":112+      return "Something went wrong";113+  }114+}115+116+function subtext(p: PairingProgress): string {117+  switch (p.phase) {118+    case "idle":119+    case "listening":120+    case "chirping":121+      return "Peach will pair automatically when your phone is close";122+    case "handshake":123+      return "Hold still — exchanging keys";124+    case "paired":125+      return p.peerDeviceName ? `Connected to ${p.peerDeviceName}` : "Connected";126+    case "timeout":127+      return "Make sure Peach is open on your phone and try again";128+    case "mic_denied":129+      return "Peach uses your microphone to pair. No audio is recorded or stored.";130+    case "version_mismatch":131+      return "The other device is running a different protocol version";132+    case "handshake_failed":133+      return p.errorMessage ?? "Please try again";134+  }135+}136+137+// ---------------------------------------------------------------------------138+// Inline SVG birds — kept deliberately schematic so the focus stays on the139+// motion. A future polish pass can swap these for the production140+// illustrations without changing the component shape.141+// ---------------------------------------------------------------------------142+143+const DesktopBird: Component<{ phase: PairingProgress["phase"] }> = (props) => {144+  return (145+    <svg class="peach-chirp-bird peach-chirp-bird-desktop"146+         width="92" height="92" viewBox="0 0 92 92" data-phase={props.phase}>147+      <ellipse cx="46" cy="58" rx="28" ry="22" class="peach-chirp-bird-body" />148+      <circle cx="58" cy="42" r="14" class="peach-chirp-bird-head" />149+      <circle cx="62" cy="40" r="2.2" class="peach-chirp-bird-eye" />150+      <path d="M 70 42 L 78 42 L 72 47 Z" class="peach-chirp-bird-beak" />151+      <path d="M 30 48 Q 22 56 30 64" class="peach-chirp-bird-wing" fill="none" />152+    </svg>153+  );154+};155+156+const MobileBird: Component<{ phase: PairingProgress["phase"] }> = (props) => {157+  return (158+    <svg class="peach-chirp-bird peach-chirp-bird-mobile"159+         width="74" height="74" viewBox="0 0 74 74" data-phase={props.phase}>160+      <ellipse cx="36" cy="48" rx="22" ry="18" class="peach-chirp-bird-body" />161+      <circle cx="26" cy="34" r="11" class="peach-chirp-bird-head" />162+      <circle cx="22" cy="32" r="1.8" class="peach-chirp-bird-eye" />163+      <path d="M 14 34 L 7 34 L 12 38 Z" class="peach-chirp-bird-beak" />164+      <path d="M 50 40 Q 58 48 50 56" class="peach-chirp-bird-wing" fill="none" />165+    </svg>166+  );167+};168+169+const SoundWaves: Component<{ phase: PairingProgress["phase"] }> = (props) => {170+  return (171+    <svg class="peach-chirp-waves" width="320" height="120" viewBox="0 0 320 120" data-phase={props.phase}>172+      <path class="peach-chirp-wave peach-chirp-wave-out" d="M 80 60 Q 160 20 240 60" fill="none" />173+      <path class="peach-chirp-wave peach-chirp-wave-in" d="M 240 60 Q 160 100 80 60" fill="none" />174+    </svg>175+  );176+};177+178+const ConnectionDot: Component<{ phase: PairingProgress["phase"] }> = (props) => {179+  return (180+    <div class="peach-chirp-dot" data-phase={props.phase}>181+      <span class="peach-chirp-dot-core" />182+      <span class="peach-chirp-dot-halo" />183+    </div>184+  );185+};