From d04fe658efc582290479f589242f01674cc9c730 Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Sat, 29 Aug 2026 00:20:43 +0000
Subject: [PATCH 01/20] feat(workspace): name the next instrument check on
 Ranges and Player

Ranges now uses the same playable-span authority as the rehearsal map
and tells the player to check tonight's notes on their instrument.
The Player window names the first map section to loop and does not
claim local-audio playback.
---
 AGENTS.md                                     |   2 +-
 ARCHITECTURE.md                               |   3 +-
 CHANGELOG.md                                  |   1 +
 CLAUDE.md                                     |   2 +-
 .../src/features/player/index.test.tsx        |  83 ++++++++
 apps/desktop/src/features/player/index.tsx    | 108 ++++++----
 .../src/features/ranges/index.test.tsx        | 132 ++++++-------
 apps/desktop/src/features/ranges/index.tsx    | 184 ++++++++++++------
 apps/desktop/src/locales/en/common.json       |  10 +-
 apps/desktop/src/locales/ko/common.json       |  10 +-
 10 files changed, 362 insertions(+), 173 deletions(-)
 create mode 100644 apps/desktop/src/features/player/index.test.tsx

diff --git a/AGENTS.md b/AGENTS.md
index b9a67ce17..f5267aee6 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,7 +1,7 @@
 # AGENTS.md
 
 ## Project overview
-- BandScope is a local-first desktop app for rehearsal prep: a practical song view with likely harmony by section and by instrument or vocal role, form and groove cues, stems, playable ranges, simplification guidance, transposition or setup cues, part-overlap cues, visible confidence, and rehearsal priorities.
+- BandScope is a local-first desktop app for rehearsal prep: a practical song view with likely harmony by section and by instrument or vocal role, form and groove cues, stems, playable ranges, simplification guidance, transposition or setup cues, part-overlap cues, visible confidence, and rehearsal priorities. Ranges names only playable spans and the next instrument check. The Player window names tonight's first map section to loop and does not claim audio playback.
 - Authoritative delivery rules live in `ARCHITECTURE.md`, `docs/plans/`, and the root verification scripts.
 - Brand, tone, UX copy, and prioritization rules live in `docs/brand-story.md` and must be applied to PRDs, TRDs, UI copy, onboarding, empty states, and error messages.
 - App security rules live in `docs/security/app-security.md` and must be applied to file handling, URL intake, subprocesses, IPC, WebView usage, model loading, updates, logging, cache handling, and export behavior.
diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
index ca0df5ac4..df97e7005 100644
--- a/ARCHITECTURE.md
+++ b/ARCHITECTURE.md
@@ -82,7 +82,8 @@ Last updated: 2026-03-11
   - likely harmony by section and by role
   - section roadmap with entries, dropouts, pickups, stops, tags, and handoffs
   - groove and timing cues relevant to locking the band together
-  - playable ranges and density or overlap warnings, with the ready workspace naming tonight's first span and the next instrument check
+  - playable ranges and density or overlap warnings, with the ready workspace and Ranges board naming tonight's first span and the next instrument check
+  - a Player window that names tonight's first map section to loop and does not claim local-audio playback before the rehearsal-player core exists
   - simplification, transposition, capo, tuning, or setup cues where applicable
   - role-specific rehearsal priorities and confidence flags
   - cue-sheet or chart-style exports that summarize the analysis in rehearsal-friendly form
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0b6f7e784..31e29432d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Added
 
+- Name playable spans on the Ranges board and send the player to check those notes on their instrument. The Player window names tonight's first map section to loop and does not claim audio playback.
 - Name tonight's first playable range on the ready rehearsal map and tell the player to check that span on their instrument before the section.
 - Display the analyzed song tempo (BPM) as a badge in the rehearsal workspace.
 - 각 합주 역할(Role)별 개인 연습 진행도를 0~100% 범위로 기록 및 시각화할 수 있는 연습 진척도(`practiceProgress`) 트래커 기능 추가. UI 컨트롤(슬라이더 및 +/- 버튼)과 한/영 다국어 지원 포함.
diff --git a/CLAUDE.md b/CLAUDE.md
index b5a34c1fa..a15843cb2 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -51,7 +51,7 @@ BandScope is a local-first desktop app for rehearsal prep: it turns a song into
 
 Three layers, decoupled through shared contracts:
 
-- `apps/desktop` — Tauri 2 + Vite + React 19 shell (Tailwind 4, Base UI, Storybook). Feature screens live in `src/features/` (home, workspace, chords, ranges, player, settings). The ready workspace names tonight's first playable range and the next instrument check. `src/lib/analysis.ts` and `src/lib/job_runner.ts` call typed Tauri IPC commands, with a browser fallback that serves demo data when not running inside Tauri.
+- `apps/desktop` — Tauri 2 + Vite + React 19 shell (Tailwind 4, Base UI, Storybook). Feature screens live in `src/features/` (home, workspace, chords, ranges, player, settings). The ready workspace names tonight's first playable range and the next instrument check. Ranges uses that same playable-span authority. The Player window names tonight's first map section to loop and does not claim audio playback. `src/lib/analysis.ts` and `src/lib/job_runner.ts` call typed Tauri IPC commands, with a browser fallback that serves demo data when not running inside Tauri.
 - `apps/desktop/src-tauri/src/main.rs` — the Rust orchestration boundary. Tauri commands (`start_analysis_job`, `get_analysis_job_status`, `select_local_audio_source`, `import_youtube_url`) validate untrusted input (project IDs, file paths, URLs) and spawn the Python engine as a subprocess. There is no loopback HTTP listener and no network path for local analysis.
 - `services/analysis-engine` — Python package `bandscope_analysis` (librosa/numpy). Entry point `cli.py` reads a JSON job request on stdin and prints a structured job-status JSON envelope on stdout (`--progress-jsonl` streams progress lines). `api.py` orchestrates the pipeline across the `separation`, `sections`, `roles`, `chords`, `ranges`, `temporal`, `transcription`, and `youtube` modules.
 
diff --git a/apps/desktop/src/features/player/index.test.tsx b/apps/desktop/src/features/player/index.test.tsx
new file mode 100644
index 000000000..9fd270084
--- /dev/null
+++ b/apps/desktop/src/features/player/index.test.tsx
@@ -0,0 +1,83 @@
+import { render, screen } from "@testing-library/react";
+import { createDemoRehearsalSong } from "@bandscope/shared-types";
+import { afterEach, describe, expect, it } from "vitest";
+import { PlayerFeature, firstNamedSection } from "./index";
+
+const originalLanguage = navigator.language;
+
+function setNavigatorLanguage(language: string) {
+  Object.defineProperty(navigator, "language", {
+    configurable: true,
+    value: language
+  });
+}
+
+describe("firstNamedSection", () => {
+  it("returns the first labeled window with a forward time range", () => {
+    expect(firstNamedSection(createDemoRehearsalSong())).toEqual({ id: "verse-1", label: "verse" });
+  });
+
+  it("skips blank labels and inverted windows", () => {
+    const song = createDemoRehearsalSong();
+    const verse = song.sections[0]!;
+    song.sections = [
+      {
+        ...verse,
+        id: " ",
+        label: "none",
+        timeRange: { start: 30, end: 10 }
+      },
+      {
+        ...verse,
+        id: "chorus-1",
+        label: "chorus",
+        timeRange: { start: 30, end: 50 }
+      }
+    ];
+    expect(firstNamedSection(song)).toEqual({ id: "chorus-1", label: "chorus" });
+  });
+
+  it("rejects malformed roots instead of inventing a loop", () => {
+    expect(firstNamedSection(null)).toBeNull();
+    expect(firstNamedSection({ sections: "bad" } as never)).toBeNull();
+  });
+});
+
+describe("PlayerFeature", () => {
+  afterEach(() => {
+    setNavigatorLanguage(originalLanguage);
+  });
+
+  it("names the rehearsal map when no song is loaded", () => {
+    setNavigatorLanguage("en-US");
+    render(<PlayerFeature title="Player" />);
+    expect(
+      screen.getByText(
+        "Open the rehearsal map and choose a song first. This window does not play audio yet."
+      )
+    ).toBeTruthy();
+  });
+
+  it("names tonight's first map section without claiming playback", () => {
+    setNavigatorLanguage("en-US");
+    render(<PlayerFeature title="Player" song={createDemoRehearsalSong()} />);
+
+    const callout = screen.getByTestId("player-next-map-loop");
+    expect(callout).toHaveTextContent("Tonight's first loop");
+    expect(callout).toHaveTextContent(
+      "Tonight's first section is verse. Open that section on the rehearsal map to set tonight's loop."
+    );
+    expect(callout).toHaveTextContent("This window does not play audio yet.");
+    expect(screen.getByTestId("player-song-title")).toHaveTextContent("Late Night Set");
+  });
+
+  it("asks for a named window when no section can be looped", () => {
+    setNavigatorLanguage("en-US");
+    const song = createDemoRehearsalSong();
+    song.sections = [];
+    render(<PlayerFeature title="Player" song={song} />);
+    expect(
+      screen.getByText("Tonight's first section still needs a named window on the rehearsal map.")
+    ).toBeTruthy();
+  });
+});
diff --git a/apps/desktop/src/features/player/index.tsx b/apps/desktop/src/features/player/index.tsx
index 37bc12f71..b740f5f0b 100644
--- a/apps/desktop/src/features/player/index.tsx
+++ b/apps/desktop/src/features/player/index.tsx
@@ -1,56 +1,84 @@
+import { useMemo } from "react";
 import type { RehearsalSong } from "@bandscope/shared-types";
+import { createTranslator, detectPreferredLocale } from "../../i18n";
+import { fillRangeCopy, meaningfulRangeText } from "../workspace/firstRangeSqueeze";
 
-/** Documented. */
+/** Tonight's first named section a player should loop from the rehearsal map. */
+export type FirstNamedSection = {
+  id: string;
+  label: string;
+};
+
+/** Pick the first named section window without treating malformed evidence as a loop. */
+export function firstNamedSection(song: RehearsalSong | null | undefined): FirstNamedSection | null {
+  const runtimeSong: unknown = song;
+  if (typeof runtimeSong !== "object" || runtimeSong === null || Array.isArray(runtimeSong)) {
+    return null;
+  }
+  const sections = (runtimeSong as { sections?: unknown }).sections;
+  if (!Array.isArray(sections)) {
+    return null;
+  }
+  for (const sectionValue of sections) {
+    if (typeof sectionValue !== "object" || sectionValue === null || Array.isArray(sectionValue)) {
+      continue;
+    }
+    const sectionRecord = sectionValue as Record<string, unknown>;
+    const id = meaningfulRangeText(sectionRecord.id);
+    const label = meaningfulRangeText(sectionRecord.label);
+    if (!id || !label) {
+      continue;
+    }
+    const timeRange =
+      typeof sectionRecord.timeRange === "object" && sectionRecord.timeRange !== null && !Array.isArray(sectionRecord.timeRange)
+        ? (sectionRecord.timeRange as Record<string, unknown>)
+        : null;
+    const start = timeRange?.start;
+    const end = timeRange?.end;
+    if (typeof start !== "number" || typeof end !== "number" || !Number.isFinite(start) || !Number.isFinite(end) || end <= start) {
+      continue;
+    }
+    return { id, label };
+  }
+  return null;
+}
+
+/** Name the next map loop when this window cannot play local audio yet. */
 export function PlayerFeature(props: { title: string; song?: RehearsalSong | null }) {
   const { title, song } = props;
+  const t = useMemo(() => createTranslator(detectPreferredLocale()), []);
+  const namedSection = useMemo(() => firstNamedSection(song), [song]);
 
   if (!song) {
     return (
-      <section style={{ padding: "24px" }}>
-        <h2>{title}</h2>
-        <p style={{ color: "#999" }}>No song loaded. Start an analysis to use the player.</p>
+      <section className="space-y-4 rounded-3xl border border-cyan-300/20 bg-slate-950/72 p-5 text-slate-100 shadow-[0_20px_80px_rgba(0,0,0,0.24)]">
+        <h2 className="text-2xl font-black tracking-tight text-white">{title}</h2>
+        <p className="text-sm leading-6 text-slate-300">{t("playerEmptyState")}</p>
       </section>
     );
   }
 
+  const nextAction = namedSection
+    ? fillRangeCopy(t("playerMapLoopNextAction"), { sectionLabel: namedSection.label })
+    : t("playerMissingSection");
+
   return (
-    <section style={{ padding: "24px" }}>
-      <h2>{title}</h2>
-      <div
-        style={{
-          padding: "16px",
-          backgroundColor: "#fafafa",
-          borderRadius: "8px",
-          border: "1px solid #e8e8e8",
-        }}
+    <section className="space-y-4 text-slate-100">
+      <h2 className="text-2xl font-black tracking-tight text-white">{title}</h2>
+      <section
+        className="rounded-2xl border border-amber-300/20 bg-amber-300/[0.07] p-4"
+        data-testid="player-next-map-loop"
+        aria-label={t("playerNextMapLoopTitle")}
       >
-        <div style={{ marginBottom: "12px" }}>
-          <strong>{song.title}</strong>
-          <span style={{ color: "#666", marginLeft: "8px" }}>
-            {song.sections.length} {song.sections.length === 1 ? "section" : "sections"}
-          </span>
-        </div>
-        <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
-          {song.sections.map((section) => (
-            <span
-              key={section.id}
-              style={{
-                padding: "4px 12px",
-                borderRadius: "16px",
-                backgroundColor: "#fff",
-                border: "1px solid #d9d9d9",
-                fontSize: "0.85em",
-                textTransform: "capitalize",
-              }}
-            >
-              {section.label}
-            </span>
-          ))}
-        </div>
-        <div style={{ marginTop: "16px", color: "#999", fontSize: "0.85em" }}>
-          Audio playback requires the desktop app with a local audio source.
-        </div>
-      </div>
+        <p className="text-xs font-black uppercase tracking-[0.24em] text-amber-200">{t("playerNextMapLoopTitle")}</p>
+        <p className="mt-2 text-sm leading-6 text-slate-100">{nextAction}</p>
+        <p className="mt-2 text-sm leading-6 text-slate-300">{t("playerNoAudioYet")}</p>
+      </section>
+      {namedSection ? (
+        <p className="text-sm font-semibold text-slate-200" data-testid="player-song-title">
+          {song.title}
+        </p>
+      ) : null}
     </section>
   );
 }
diff --git a/apps/desktop/src/features/ranges/index.test.tsx b/apps/desktop/src/features/ranges/index.test.tsx
index 585c1f4af..adf36ce1d 100644
--- a/apps/desktop/src/features/ranges/index.test.tsx
+++ b/apps/desktop/src/features/ranges/index.test.tsx
@@ -1,88 +1,74 @@
 import { render, screen } from "@testing-library/react";
-import { describe, it, expect } from "vitest";
+import { createDemoRehearsalSong } from "@bandscope/shared-types";
+import { afterEach, describe, expect, it } from "vitest";
 import { RangesFeature } from "./index";
-import type { RehearsalSong } from "@bandscope/shared-types";
 
-const mockSong: RehearsalSong = {
-  id: "song-1",
-  title: "Test Song",
-  exportSummary: { format: "cue-sheet", headline: "Test Headline", focusSections: [] },
-  sections: [
-    {
-      id: "sec-1",
-      label: "chorus",
-      groove: "test groove",
-      timeRange: { start: 0, end: 10 },
-      confidence: { level: "high", reason: "test" },
-      partGraph: [],
-      roles: [
-        {
-          id: "role-1",
-          name: "Test Role 1",
-          roleType: "instrument",
-          harmony: { chord: "Cmaj7", functionLabel: "Tonic", source: "model" },
-          cue: { value: "test cue", anchor: "count", confidence: { level: "high", reason: "test" } },
-          range: { lowestNote: "C4", highestNote: "C5" },
-          confidence: { level: "high", reason: "test" },
-          rehearsalPriority: "high",
-          simplification: "none",
-          setupNote: "none",
-          manualOverrides: [],
-          overlapWarnings: ["Clashing notes with Role 2"],
-          transcription: [
-            { pitch: "C4", onset: 0, offset: 1, velocity: 100 },
-            { pitch: "E4", onset: 1, offset: 2, velocity: 100 },
-          ],
-        },
-        {
-          id: "role-2",
-          name: "Test Role 2",
-          roleType: "instrument",
-          harmony: { chord: "Cmaj7", functionLabel: "Tonic", source: "model" },
-          cue: { value: "test cue", anchor: "count", confidence: { level: "high", reason: "test" } },
-          range: { lowestNote: "G4", highestNote: "G5" },
-          confidence: { level: "high", reason: "test" },
-          rehearsalPriority: "high",
-          simplification: "none",
-          setupNote: "none",
-          manualOverrides: [],
-          overlapWarnings: [],
-          // No transcription
-        },
-      ],
-    },
-  ],
-};
+const originalLanguage = navigator.language;
+
+function setNavigatorLanguage(language: string) {
+  Object.defineProperty(navigator, "language", {
+    configurable: true,
+    value: language
+  });
+}
 
 describe("RangesFeature", () => {
-  it("renders empty state without a song", () => {
-    render(<RangesFeature title="Ranges" />);
-    expect(screen.getByText("No song loaded. Start an analysis to see range data.")).toBeInTheDocument();
+  afterEach(() => {
+    setNavigatorLanguage(originalLanguage);
   });
 
-  it("renders role names and ranges", () => {
-    render(<RangesFeature title="Ranges" song={mockSong} />);
-    expect(screen.getByText("Test Role 1")).toBeInTheDocument();
-    expect(screen.getByText("🎵 C4 — C5")).toBeInTheDocument();
-    expect(screen.getByText("Test Role 2")).toBeInTheDocument();
-    expect(screen.getByText("🎵 G4 — G5")).toBeInTheDocument();
+  it("names choosing a song first when Ranges has no analysis", () => {
+    setNavigatorLanguage("en-US");
+    render(<RangesFeature title="Ranges" />);
+    expect(
+      screen.getByText("Choose a song on the rehearsal map first. Ranges will name tonight's playable spans after analysis.")
+    ).toBeTruthy();
   });
 
-  it("renders overlap warnings", () => {
-    render(<RangesFeature title="Ranges" song={mockSong} />);
-    expect(screen.getByText("⚠️ Clashing notes with Role 2")).toBeInTheDocument();
+  it("names tonight's first playable span and the next instrument check", () => {
+    setNavigatorLanguage("en-US");
+    render(<RangesFeature title="Ranges" song={createDemoRehearsalSong()} />);
+
+    const callout = screen.getByTestId("ranges-first-span");
+    expect(callout).toHaveTextContent("Tonight's first range");
+    expect(callout).toHaveTextContent(
+      "Bass Guitar sits C#2–E3 in verse. Hear that clash on your instrument before the verse."
+    );
+    expect(screen.getByTestId("range-card-bass-guitar")).toHaveTextContent("C#2 — E3");
+    expect(screen.getByTestId("range-card-bass-guitar")).toHaveTextContent(
+      "Check this span on your instrument before verse."
+    );
+    expect(screen.getByText("Density warning: competing with Keyboard Left Hand in low register.")).toBeTruthy();
   });
 
-  it("renders transcription count when transcription exists", () => {
-    render(<RangesFeature title="Ranges" song={mockSong} />);
-    expect(screen.getByText(/Transcription available:/)).toBeInTheDocument();
-    expect(screen.getByText(/2 notes/)).toBeInTheDocument();
+  it("rejects inverted spans instead of calling them playable", () => {
+    setNavigatorLanguage("en-US");
+    const song = createDemoRehearsalSong();
+    song.sections[0]!.roles[0] = {
+      ...song.sections[0]!.roles[0]!,
+      range: { lowestNote: "E3", highestNote: "C#2" },
+      overlapWarnings: []
+    };
+
+    render(<RangesFeature title="Ranges" song={song} />);
+
+    const card = screen.getByTestId("range-card-bass-guitar");
+    expect(card).toHaveTextContent("Confirm the high and low notes by ear before treating this as a playable span.");
+    expect(card).not.toHaveTextContent("E3 — C#2");
   });
 
-  it("does not render transcription block when transcription is undefined", () => {
-    render(<RangesFeature title="Ranges" song={mockSong} />);
-    // There is exactly one transcription block, from Role 1
-    const elements = screen.getAllByText(/Transcription available:/);
-    expect(elements.length).toBe(1);
+  it("names written notes as an instrument check", () => {
+    setNavigatorLanguage("en-US");
+    const song = createDemoRehearsalSong();
+    song.sections[0]!.roles[0] = {
+      ...song.sections[0]!.roles[0]!,
+      transcription: [
+        { pitch: "C#2", onset: 0, offset: 1, velocity: 90 },
+        { pitch: "E3", onset: 1, offset: 2, velocity: 90 }
+      ]
+    };
+
+    render(<RangesFeature title="Ranges" song={song} />);
+    expect(screen.getByText("Check 2 written notes on your instrument.")).toBeTruthy();
   });
 });
diff --git a/apps/desktop/src/features/ranges/index.tsx b/apps/desktop/src/features/ranges/index.tsx
index 1cbb020b4..40a6ff30a 100644
--- a/apps/desktop/src/features/ranges/index.tsx
+++ b/apps/desktop/src/features/ranges/index.tsx
@@ -1,71 +1,145 @@
+import { useMemo } from "react";
 import type { RehearsalSong } from "@bandscope/shared-types";
+import { createTranslator, detectPreferredLocale } from "../../i18n";
+import {
+  fillRangeCopy,
+  firstRangeSqueeze,
+  meaningfulRangeText,
+  playableRange
+} from "../workspace/firstRangeSqueeze";
 
-/** Documented. */
+/** Return trimmed clash copy from untrusted overlap-warning evidence. */
+function namedOverlapWarnings(warnings: unknown): string[] {
+  if (!Array.isArray(warnings)) {
+    return [];
+  }
+  const named: string[] = [];
+  for (const warning of warnings) {
+    const namedWarning = meaningfulRangeText(warning);
+    if (namedWarning) {
+      named.push(namedWarning);
+    }
+  }
+  return named;
+}
+
+/** Render per-role playable spans and the next instrument check for the loaded song. */
 export function RangesFeature(props: { title: string; song?: RehearsalSong | null }) {
   const { title, song } = props;
+  const t = useMemo(() => createTranslator(detectPreferredLocale()), []);
+  const firstRange = useMemo(() => (song ? firstRangeSqueeze(song) : null), [song]);
+  const firstRangeCopy = firstRange
+    ? fillRangeCopy(
+        t(firstRange.overlapWarning ? "workspaceFirstRangeClash" : "workspaceFirstRangeCheck"),
+        {
+          roleName: firstRange.roleName,
+          lowestNote: firstRange.lowestNote,
+          highestNote: firstRange.highestNote,
+          sectionLabel: firstRange.sectionLabel
+        }
+      )
+    : t("workspaceFirstRangeMissing");
 
   if (!song) {
     return (
-      <section style={{ padding: "24px" }}>
-        <h2>{title}</h2>
-        <p style={{ color: "#999" }}>No song loaded. Start an analysis to see range data.</p>
+      <section className="space-y-4 rounded-3xl border border-cyan-300/20 bg-slate-950/72 p-5 text-slate-100 shadow-[0_20px_80px_rgba(0,0,0,0.24)]">
+        <h2 className="text-2xl font-black tracking-tight text-white">{title}</h2>
+        <p className="text-sm leading-6 text-slate-300">{t("rangesEmptyState")}</p>
       </section>
     );
   }
 
+  const runtimeSong: unknown = song;
+  const sections =
+    typeof runtimeSong === "object" && runtimeSong !== null && !Array.isArray(runtimeSong) && Array.isArray((runtimeSong as { sections?: unknown }).sections)
+      ? (runtimeSong as { sections: unknown[] }).sections
+      : [];
+
   return (
-    <section style={{ padding: "24px" }}>
-      <h2>{title}</h2>
-      {song.sections.map((section) => (
-        <div key={section.id} style={{ marginBottom: "24px" }}>
-          <h3 style={{ textTransform: "capitalize", marginBottom: "8px" }}>{section.label}</h3>
-          <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
-            {section.roles.map((role) => (
-              <div
-                key={role.id}
-                style={{
-                  padding: "12px",
-                  border: "1px solid #e8e8e8",
-                  borderRadius: "8px",
-                  minWidth: "160px",
-                  backgroundColor: "#fff",
-                }}
-              >
-                <div style={{ fontWeight: "bold", fontSize: "0.9em", marginBottom: "4px" }}>
-                  {role.name}
-                </div>
-                <div style={{ fontSize: "0.85em", color: "#333" }}>
-                  🎵 {role.range.lowestNote} — {role.range.highestNote}
-                </div>
-                {role.overlapWarnings.length > 0 && (
-                  <div style={{ marginTop: "8px" }}>
-                    {role.overlapWarnings.map((warning, wIndex) => (
-                      <div
-                        key={wIndex}
-                        style={{
-                          fontSize: "0.8em",
-                          color: "#fa8c16",
-                          marginTop: "4px",
-                          padding: "4px 6px",
-                          backgroundColor: "#fff7e6",
-                          borderRadius: "4px",
-                        }}
-                      >
-                        ⚠️ {warning}
-                      </div>
-                    ))}
-                  </div>
-                )}
-                {role.transcription && role.transcription.length > 0 && (
-                  <div style={{ marginTop: "8px", fontSize: "0.8em", color: "#08979c", backgroundColor: "#e6fffb", padding: "4px 6px", borderRadius: "4px" }}>
-                    <strong>Transcription available:</strong> {role.transcription.length} notes
-                  </div>
-                )}
-              </div>
-            ))}
+    <section className="space-y-5 text-slate-100">
+      <h2 className="text-2xl font-black tracking-tight text-white">{title}</h2>
+      <section
+        className="rounded-2xl border border-fuchsia-300/20 bg-fuchsia-300/[0.07] p-4"
+        data-testid="ranges-first-span"
+        aria-label={t("workspaceFirstRangeTitle")}
+      >
+        <p className="text-xs font-black uppercase tracking-[0.24em] text-fuchsia-200">{t("workspaceFirstRangeTitle")}</p>
+        <p className="mt-2 text-sm leading-6 text-slate-100">{firstRangeCopy}</p>
+      </section>
+      {sections.map((sectionValue, sectionIndex) => {
+        if (typeof sectionValue !== "object" || sectionValue === null || Array.isArray(sectionValue)) {
+          return null;
+        }
+        const sectionRecord = sectionValue as Record<string, unknown>;
+        const sectionLabel = meaningfulRangeText(sectionRecord.label);
+        const sectionId = meaningfulRangeText(sectionRecord.id) ?? `section-${sectionIndex}`;
+        if (!sectionLabel || !Array.isArray(sectionRecord.roles)) {
+          return null;
+        }
+        return (
+          <div key={sectionId} className="space-y-3">
+            <h3 className="text-sm font-black uppercase tracking-[0.18em] text-cyan-200">{sectionLabel}</h3>
+            <div className="flex flex-wrap gap-3">
+              {sectionRecord.roles.map((roleValue, roleIndex) => {
+                if (typeof roleValue !== "object" || roleValue === null || Array.isArray(roleValue)) {
+                  return null;
+                }
+                const roleRecord = roleValue as Record<string, unknown>;
+                const roleName = meaningfulRangeText(roleRecord.name);
+                const roleId = meaningfulRangeText(roleRecord.id) ?? `role-${sectionIndex}-${roleIndex}`;
+                if (!roleName) {
+                  return null;
+                }
+                const rangeRecord =
+                  typeof roleRecord.range === "object" && roleRecord.range !== null && !Array.isArray(roleRecord.range)
+                    ? (roleRecord.range as Record<string, unknown>)
+                    : {};
+                const validatedRange = playableRange(rangeRecord.lowestNote, rangeRecord.highestNote);
+                const overlapWarnings = namedOverlapWarnings(roleRecord.overlapWarnings);
+                const transcriptionCount = Array.isArray(roleRecord.transcription) ? roleRecord.transcription.length : 0;
+                return (
+                  <article
+                    key={roleId}
+                    className="min-w-[16rem] flex-1 rounded-2xl border border-white/10 bg-slate-950/70 p-4"
+                    data-testid={`range-card-${roleId}`}
+                  >
+                    <p className="text-sm font-bold text-white">{roleName}</p>
+                    {validatedRange ? (
+                      <>
+                        <p className="mt-2 text-sm font-semibold text-slate-100">
+                          {validatedRange.lowestNote} — {validatedRange.highestNote}
+                        </p>
+                        <p className="mt-1 text-xs font-medium text-slate-400">
+                          {fillRangeCopy(t("sectionRangeNextAction"), { sectionLabel })}
+                        </p>
+                      </>
+                    ) : (
+                      <p className="mt-2 text-sm leading-6 text-slate-300">{t("rangesUnnamedSpan")}</p>
+                    )}
+                    {overlapWarnings.length > 0 ? (
+                      <ul className="mt-3 space-y-2" aria-label={t("overlapWarning")}>
+                        {overlapWarnings.map((warning) => (
+                          <li
+                            key={warning}
+                            className="rounded-lg border border-rose-300/20 bg-rose-300/[0.08] px-2 py-1 text-xs leading-5 text-rose-100"
+                          >
+                            {warning}
+                          </li>
+                        ))}
+                      </ul>
+                    ) : null}
+                    {transcriptionCount > 0 ? (
+                      <p className="mt-3 text-xs leading-5 text-cyan-100">
+                        {fillRangeCopy(t("rangesNotesToCheck"), { count: String(transcriptionCount) })}
+                      </p>
+                    ) : null}
+                  </article>
+                );
+              })}
+            </div>
           </div>
-        </div>
-      ))}
+        );
+      })}
     </section>
   );
 }
diff --git a/apps/desktop/src/locales/en/common.json b/apps/desktop/src/locales/en/common.json
index d803a765e..fbb2d0347 100644
--- a/apps/desktop/src/locales/en/common.json
+++ b/apps/desktop/src/locales/en/common.json
@@ -154,5 +154,13 @@
   "workspaceFirstRangeClash": "{roleName} sits {lowestNote}–{highestNote} in {sectionLabel}. Hear that clash on your instrument before the {sectionLabel}.",
   "workspaceFirstRangeMissing": "Tonight's first range still needs an ear check. Confirm the high and low notes on the selected part before the first section.",
   "sectionRangeLabel": "Range",
-  "sectionRangeNextAction": "Check this span on your instrument before {sectionLabel}."
+  "sectionRangeNextAction": "Check this span on your instrument before {sectionLabel}.",
+  "rangesEmptyState": "Choose a song on the rehearsal map first. Ranges will name tonight's playable spans after analysis.",
+  "rangesUnnamedSpan": "Confirm the high and low notes by ear before treating this as a playable span.",
+  "rangesNotesToCheck": "Check {count} written notes on your instrument.",
+  "playerEmptyState": "Open the rehearsal map and choose a song first. This window does not play audio yet.",
+  "playerNextMapLoopTitle": "Tonight's first loop",
+  "playerMapLoopNextAction": "Tonight's first section is {sectionLabel}. Open that section on the rehearsal map to set tonight's loop.",
+  "playerNoAudioYet": "This window does not play audio yet.",
+  "playerMissingSection": "Tonight's first section still needs a named window on the rehearsal map."
 }
diff --git a/apps/desktop/src/locales/ko/common.json b/apps/desktop/src/locales/ko/common.json
index 0f6c6c66d..f3ba2e4f8 100644
--- a/apps/desktop/src/locales/ko/common.json
+++ b/apps/desktop/src/locales/ko/common.json
@@ -154,5 +154,13 @@
   "workspaceFirstRangeClash": "{sectionLabel}의 {roleName}은 {lowestNote}–{highestNote}이고 다른 파트와 겹칩니다. {sectionLabel} 들어가기 전에 그 충돌을 악기로 들어 보세요.",
   "workspaceFirstRangeMissing": "오늘 먼저 볼 음역은 아직 귀로 확인이 필요합니다. 선택한 파트의 최저·최고음을 첫 구간 전에 확인해 보세요.",
   "sectionRangeLabel": "음역",
-  "sectionRangeNextAction": "{sectionLabel} 들어가기 전에 이 음역을 악기로 확인해 보세요."
+  "sectionRangeNextAction": "{sectionLabel} 들어가기 전에 이 음역을 악기로 확인해 보세요.",
+  "rangesEmptyState": "먼저 합주 맵에서 곡을 선택하세요. 분석이 끝나면 음역 화면이 오늘 확인할 음역을 알려 줍니다.",
+  "rangesUnnamedSpan": "연주 가능한 음역으로 보기 전에 최저음과 최고음을 귀로 확인해 보세요.",
+  "rangesNotesToCheck": "악기로 기보된 음 {count}개를 확인해 보세요.",
+  "playerEmptyState": "먼저 합주 맵에서 곡을 선택하세요. 이 화면은 아직 오디오를 재생하지 않습니다.",
+  "playerNextMapLoopTitle": "오늘 먼저 감을 루프",
+  "playerMapLoopNextAction": "오늘 첫 구간은 {sectionLabel}입니다. 합주 맵에서 그 구간을 열어 오늘 루프를 정하세요.",
+  "playerNoAudioYet": "이 화면은 아직 오디오를 재생하지 않습니다.",
+  "playerMissingSection": "오늘 첫 구간은 합주 맵에 이름 있는 구간이 생긴 뒤에 정할 수 있습니다."
 }

From 8505e4538d8efd29ad6567dfc5b5ee46ec4f1184 Mon Sep 17 00:00:00 2001
From: seonghobae <me@seonghobae.me>
Date: Sat, 29 Aug 2026 09:32:47 +0900
Subject: [PATCH 02/20] fix(ranges): harden multi-section instrument checks

---
 .../src/features/ranges/index.test.tsx        | 33 +++++++++++++++++--
 apps/desktop/src/features/ranges/index.tsx    | 13 +++++---
 apps/desktop/src/locales/en/common.json       |  1 +
 apps/desktop/src/locales/ko/common.json       |  1 +
 4 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/apps/desktop/src/features/ranges/index.test.tsx b/apps/desktop/src/features/ranges/index.test.tsx
index adf36ce1d..5a6b58ba9 100644
--- a/apps/desktop/src/features/ranges/index.test.tsx
+++ b/apps/desktop/src/features/ranges/index.test.tsx
@@ -34,8 +34,8 @@ describe("RangesFeature", () => {
     expect(callout).toHaveTextContent(
       "Bass Guitar sits C#2–E3 in verse. Hear that clash on your instrument before the verse."
     );
-    expect(screen.getByTestId("range-card-bass-guitar")).toHaveTextContent("C#2 — E3");
-    expect(screen.getByTestId("range-card-bass-guitar")).toHaveTextContent(
+    expect(screen.getByTestId("range-card-0-bass-guitar")).toHaveTextContent("C#2 — E3");
+    expect(screen.getByTestId("range-card-0-bass-guitar")).toHaveTextContent(
       "Check this span on your instrument before verse."
     );
     expect(screen.getByText("Density warning: competing with Keyboard Left Hand in low register.")).toBeTruthy();
@@ -52,7 +52,7 @@ describe("RangesFeature", () => {
 
     render(<RangesFeature title="Ranges" song={song} />);
 
-    const card = screen.getByTestId("range-card-bass-guitar");
+    const card = screen.getByTestId("range-card-0-bass-guitar");
     expect(card).toHaveTextContent("Confirm the high and low notes by ear before treating this as a playable span.");
     expect(card).not.toHaveTextContent("E3 — C#2");
   });
@@ -71,4 +71,31 @@ describe("RangesFeature", () => {
     render(<RangesFeature title="Ranges" song={song} />);
     expect(screen.getByText("Check 2 written notes on your instrument.")).toBeTruthy();
   });
+
+  it("uses singular copy for one written note", () => {
+    setNavigatorLanguage("en-US");
+    const song = createDemoRehearsalSong();
+    song.sections[0]!.roles[0] = {
+      ...song.sections[0]!.roles[0]!,
+      transcription: [{ pitch: "C#2", onset: 0, offset: 1, velocity: 90 }]
+    };
+
+    render(<RangesFeature title="Ranges" song={song} />);
+    expect(screen.getByText("Check 1 written note on your instrument.")).toBeTruthy();
+  });
+
+  it("keeps repeated role cards addressable across sections", () => {
+    setNavigatorLanguage("en-US");
+    const song = createDemoRehearsalSong();
+    const verse = song.sections[0]!;
+    song.sections = [
+      verse,
+      { ...verse, id: "chorus-1", label: "chorus", timeRange: { start: 30, end: 50 } }
+    ];
+
+    render(<RangesFeature title="Ranges" song={song} />);
+
+    expect(screen.getByTestId("range-card-0-bass-guitar")).toBeTruthy();
+    expect(screen.getByTestId("range-card-1-bass-guitar")).toBeTruthy();
+  });
 });
diff --git a/apps/desktop/src/features/ranges/index.tsx b/apps/desktop/src/features/ranges/index.tsx
index 40a6ff30a..5e7ff77e7 100644
--- a/apps/desktop/src/features/ranges/index.tsx
+++ b/apps/desktop/src/features/ranges/index.tsx
@@ -51,7 +51,7 @@ export function RangesFeature(props: { title: string; song?: RehearsalSong | nul
 
   const runtimeSong: unknown = song;
   const sections =
-    typeof runtimeSong === "object" && runtimeSong !== null && !Array.isArray(runtimeSong) && Array.isArray((runtimeSong as { sections?: unknown }).sections)
+    typeof runtimeSong === "object" && !Array.isArray(runtimeSong) && Array.isArray((runtimeSong as { sections?: unknown }).sections)
       ? (runtimeSong as { sections: unknown[] }).sections
       : [];
 
@@ -101,7 +101,7 @@ export function RangesFeature(props: { title: string; song?: RehearsalSong | nul
                   <article
                     key={roleId}
                     className="min-w-[16rem] flex-1 rounded-2xl border border-white/10 bg-slate-950/70 p-4"
-                    data-testid={`range-card-${roleId}`}
+                    data-testid={`range-card-${sectionIndex}-${roleId}`}
                   >
                     <p className="text-sm font-bold text-white">{roleName}</p>
                     {validatedRange ? (
@@ -118,9 +118,9 @@ export function RangesFeature(props: { title: string; song?: RehearsalSong | nul
                     )}
                     {overlapWarnings.length > 0 ? (
                       <ul className="mt-3 space-y-2" aria-label={t("overlapWarning")}>
-                        {overlapWarnings.map((warning) => (
+                        {overlapWarnings.map((warning, warningIndex) => (
                           <li
-                            key={warning}
+                            key={`${warning}-${warningIndex}`}
                             className="rounded-lg border border-rose-300/20 bg-rose-300/[0.08] px-2 py-1 text-xs leading-5 text-rose-100"
                           >
                             {warning}
@@ -130,7 +130,10 @@ export function RangesFeature(props: { title: string; song?: RehearsalSong | nul
                     ) : null}
                     {transcriptionCount > 0 ? (
                       <p className="mt-3 text-xs leading-5 text-cyan-100">
-                        {fillRangeCopy(t("rangesNotesToCheck"), { count: String(transcriptionCount) })}
+                        {fillRangeCopy(
+                          t(transcriptionCount === 1 ? "rangesOneNoteToCheck" : "rangesNotesToCheck"),
+                          { count: String(transcriptionCount) }
+                        )}
                       </p>
                     ) : null}
                   </article>
diff --git a/apps/desktop/src/locales/en/common.json b/apps/desktop/src/locales/en/common.json
index fbb2d0347..3b2ccba62 100644
--- a/apps/desktop/src/locales/en/common.json
+++ b/apps/desktop/src/locales/en/common.json
@@ -157,6 +157,7 @@
   "sectionRangeNextAction": "Check this span on your instrument before {sectionLabel}.",
   "rangesEmptyState": "Choose a song on the rehearsal map first. Ranges will name tonight's playable spans after analysis.",
   "rangesUnnamedSpan": "Confirm the high and low notes by ear before treating this as a playable span.",
+  "rangesOneNoteToCheck": "Check {count} written note on your instrument.",
   "rangesNotesToCheck": "Check {count} written notes on your instrument.",
   "playerEmptyState": "Open the rehearsal map and choose a song first. This window does not play audio yet.",
   "playerNextMapLoopTitle": "Tonight's first loop",
diff --git a/apps/desktop/src/locales/ko/common.json b/apps/desktop/src/locales/ko/common.json
index f3ba2e4f8..a97f5bf93 100644
--- a/apps/desktop/src/locales/ko/common.json
+++ b/apps/desktop/src/locales/ko/common.json
@@ -157,6 +157,7 @@
   "sectionRangeNextAction": "{sectionLabel} 들어가기 전에 이 음역을 악기로 확인해 보세요.",
   "rangesEmptyState": "먼저 합주 맵에서 곡을 선택하세요. 분석이 끝나면 음역 화면이 오늘 확인할 음역을 알려 줍니다.",
   "rangesUnnamedSpan": "연주 가능한 음역으로 보기 전에 최저음과 최고음을 귀로 확인해 보세요.",
+  "rangesOneNoteToCheck": "악기로 기보된 음 {count}개를 확인해 보세요.",
   "rangesNotesToCheck": "악기로 기보된 음 {count}개를 확인해 보세요.",
   "playerEmptyState": "먼저 합주 맵에서 곡을 선택하세요. 이 화면은 아직 오디오를 재생하지 않습니다.",
   "playerNextMapLoopTitle": "오늘 먼저 감을 루프",

From b410842eea977025f501b26d678304ad1371198a Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Fri, 28 Aug 2026 17:38:06 -0700
Subject: [PATCH 03/20] test(ranges): keep id-less role callout aligned

---
 apps/desktop/src/features/ranges/index.test.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/apps/desktop/src/features/ranges/index.test.tsx b/apps/desktop/src/features/ranges/index.test.tsx
index 5a6b58ba9..22ea9f762 100644
--- a/apps/desktop/src/features/ranges/index.test.tsx
+++ b/apps/desktop/src/features/ranges/index.test.tsx
@@ -41,6 +41,22 @@ describe("RangesFeature", () => {
     expect(screen.getByText("Density warning: competing with Keyboard Left Hand in low register.")).toBeTruthy();
   });
 
+  it("keeps an id-less named playable role aligned with the first-range callout", () => {
+    setNavigatorLanguage("en-US");
+    const song = createDemoRehearsalSong();
+    song.sections[0]!.roles[0] = {
+      ...song.sections[0]!.roles[0]!,
+      id: " "
+    };
+
+    render(<RangesFeature title="Ranges" song={song} />);
+
+    expect(screen.getByTestId("range-card-0-role-0-0")).toHaveTextContent("Bass Guitar");
+    expect(screen.getByTestId("ranges-first-span")).toHaveTextContent(
+      "Bass Guitar sits C#2–E3 in verse. Hear that clash on your instrument before the verse."
+    );
+  });
+
   it("rejects inverted spans instead of calling them playable", () => {
     setNavigatorLanguage("en-US");
     const song = createDemoRehearsalSong();

From a61de253913d20dd2f36f517b16b36e42b610930 Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Fri, 28 Aug 2026 17:39:13 -0700
Subject: [PATCH 04/20] test(ranges): reject id-less playable cards

---
 apps/desktop/src/features/ranges/index.test.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/apps/desktop/src/features/ranges/index.test.tsx b/apps/desktop/src/features/ranges/index.test.tsx
index 22ea9f762..387002bad 100644
--- a/apps/desktop/src/features/ranges/index.test.tsx
+++ b/apps/desktop/src/features/ranges/index.test.tsx
@@ -41,7 +41,7 @@ describe("RangesFeature", () => {
     expect(screen.getByText("Density warning: competing with Keyboard Left Hand in low register.")).toBeTruthy();
   });
 
-  it("keeps an id-less named playable role aligned with the first-range callout", () => {
+  it("rejects an id-less role instead of presenting it as a playable card", () => {
     setNavigatorLanguage("en-US");
     const song = createDemoRehearsalSong();
     song.sections[0]!.roles[0] = {
@@ -51,10 +51,8 @@ describe("RangesFeature", () => {
 
     render(<RangesFeature title="Ranges" song={song} />);
 
-    expect(screen.getByTestId("range-card-0-role-0-0")).toHaveTextContent("Bass Guitar");
-    expect(screen.getByTestId("ranges-first-span")).toHaveTextContent(
-      "Bass Guitar sits C#2–E3 in verse. Hear that clash on your instrument before the verse."
-    );
+    expect(screen.queryByTestId("range-card-0-role-0-0")).toBeNull();
+    expect(screen.getByTestId("ranges-first-span")).not.toHaveTextContent("Bass Guitar sits C#2–E3");
   });
 
   it("rejects inverted spans instead of calling them playable", () => {

From 397b7e4a86503c5d649b2bb06c18a8adccfb6b29 Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Fri, 28 Aug 2026 17:40:12 -0700
Subject: [PATCH 05/20] fix(ranges): reject roles without stable ids

---
 apps/desktop/src/features/ranges/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/desktop/src/features/ranges/index.tsx b/apps/desktop/src/features/ranges/index.tsx
index 5e7ff77e7..843d2a241 100644
--- a/apps/desktop/src/features/ranges/index.tsx
+++ b/apps/desktop/src/features/ranges/index.tsx
@@ -80,14 +80,14 @@ export function RangesFeature(props: { title: string; song?: RehearsalSong | nul
           <div key={sectionId} className="space-y-3">
             <h3 className="text-sm font-black uppercase tracking-[0.18em] text-cyan-200">{sectionLabel}</h3>
             <div className="flex flex-wrap gap-3">
-              {sectionRecord.roles.map((roleValue, roleIndex) => {
+              {sectionRecord.roles.map((roleValue) => {
                 if (typeof roleValue !== "object" || roleValue === null || Array.isArray(roleValue)) {
                   return null;
                 }
                 const roleRecord = roleValue as Record<string, unknown>;
                 const roleName = meaningfulRangeText(roleRecord.name);
-                const roleId = meaningfulRangeText(roleRecord.id) ?? `role-${sectionIndex}-${roleIndex}`;
-                if (!roleName) {
+                const roleId = meaningfulRangeText(roleRecord.id);
+                if (!roleId || !roleName) {
                   return null;
                 }
                 const rangeRecord =

From 655f797b15ba931f83367aa57971ec9565f773df Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Fri, 28 Aug 2026 17:48:06 -0700
Subject: [PATCH 06/20] test(workspace): require buyer-visible Ranges and
 Player surfaces

---
 .../Workspace.rehearsalSurfaces.test.tsx      | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 apps/desktop/src/features/workspace/Workspace.rehearsalSurfaces.test.tsx

diff --git a/apps/desktop/src/features/workspace/Workspace.rehearsalSurfaces.test.tsx b/apps/desktop/src/features/workspace/Workspace.rehearsalSurfaces.test.tsx
new file mode 100644
index 000000000..a368a81bf
--- /dev/null
+++ b/apps/desktop/src/features/workspace/Workspace.rehearsalSurfaces.test.tsx
@@ -0,0 +1,31 @@
+import { render, screen } from "@testing-library/react";
+import { createDemoRehearsalSong } from "@bandscope/shared-types";
+import { afterEach, describe, expect, it } from "vitest";
+import { Workspace } from "./Workspace";
+
+const originalLanguage = navigator.language;
+
+function setNavigatorLanguage(language: string) {
+  Object.defineProperty(navigator, "language", {
+    configurable: true,
+    value: language
+  });
+}
+
+describe("Workspace rehearsal surfaces", () => {
+  afterEach(() => {
+    setNavigatorLanguage(originalLanguage);
+  });
+
+  it("makes the Ranges board and Player next-loop window reachable from the loaded workspace", () => {
+    setNavigatorLanguage("en-US");
+
+    render(<Workspace song={createDemoRehearsalSong()} />);
+
+    expect(screen.getByRole("heading", { name: "Ranges" })).toBeTruthy();
+    expect(screen.getByTestId("ranges-first-span")).toHaveTextContent("Bass Guitar sits C#2–E3 in verse");
+    expect(screen.getByRole("heading", { name: "Player" })).toBeTruthy();
+    expect(screen.getByTestId("player-next-map-loop")).toHaveTextContent("Tonight's first section is verse");
+    expect(screen.getByTestId("player-next-map-loop")).toHaveTextContent("does not play audio yet");
+  });
+});

From a64e95b5c335a99b7c7b3654f4bd19ffa392cc84 Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Fri, 28 Aug 2026 17:50:00 -0700
Subject: [PATCH 07/20] fix(workspace): expose Ranges and Player surfaces

---
 apps/desktop/src/features/workspace/Workspace.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/apps/desktop/src/features/workspace/Workspace.tsx b/apps/desktop/src/features/workspace/Workspace.tsx
index d44e20777..6a1ddd025 100644
--- a/apps/desktop/src/features/workspace/Workspace.tsx
+++ b/apps/desktop/src/features/workspace/Workspace.tsx
@@ -5,6 +5,8 @@ import { SectionRoadmap } from "./SectionRoadmap";
 import { GrooveMap } from "./GrooveMap";
 import { PracticeProgress } from "./PracticeProgress";
 import { fillRangeCopy, firstRangeSqueeze } from "./firstRangeSqueeze";
+import { RangesFeature } from "../ranges";
+import { PlayerFeature } from "../player";
 import { createTranslator, detectPreferredLocale } from "../../i18n";
 import { generateCueSheetCsv, generateChartSummaryJson, generateMetadataHandoffJson, sanitizeFilename } from "../../lib/export";
 import { Button } from "@/components/ui/button";
@@ -310,6 +312,11 @@ export function Workspace({ song, sourceBootstrap = null, onSongUpdate }: Worksp
             <p className="mt-2 text-sm leading-6 text-slate-100">{firstRangeCopy}</p>
           </section>
 
+          <div className="grid gap-4 xl:grid-cols-2" data-testid="workspace-rehearsal-surfaces">
+            <RangesFeature title="Ranges" song={song} />
+            <PlayerFeature title="Player" song={song} />
+          </div>
+
           <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
             <section className="rounded-2xl border border-cyan-300/20 bg-cyan-300/[0.06] p-4 md:col-span-2">
               <p className="text-xs font-black uppercase tracking-[0.24em] text-cyan-300">{t("workspaceSongTimelineLabel")}</p>

From 93afdeace5d1a806b8f5c363d5c5bfb0377e4baa Mon Sep 17 00:00:00 2001
From: seonghobae <me@seonghobae.me>
Date: Sat, 29 Aug 2026 09:56:46 +0900
Subject: [PATCH 08/20] fix(ranges): guard nullable runtime song roots

---
 apps/desktop/src/features/ranges/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/desktop/src/features/ranges/index.tsx b/apps/desktop/src/features/ranges/index.tsx
index 843d2a241..958cbf0df 100644
--- a/apps/desktop/src/features/ranges/index.tsx
+++ b/apps/desktop/src/features/ranges/index.tsx
@@ -51,7 +51,7 @@ export function RangesFeature(props: { title: string; song?: RehearsalSong | nul
 
   const runtimeSong: unknown = song;
   const sections =
-    typeof runtimeSong === "object" && !Array.isArray(runtimeSong) && Array.isArray((runtimeSong as { sections?: unknown }).sections)
+    typeof runtimeSong === "object" && runtimeSong !== null && !Array.isArray(runtimeSong) && Array.isArray((runtimeSong as { sections?: unknown }).sections)
       ? (runtimeSong as { sections: unknown[] }).sections
       : [];
 

From ba3fb1f56c56c9c2eadbc4538b2910989e54ec43 Mon Sep 17 00:00:00 2001
From: seonghobae <me@seonghobae.me>
Date: Sat, 29 Aug 2026 09:59:22 +0900
Subject: [PATCH 09/20] fix(workspace): share the canonical range callout

---
 apps/desktop/src/features/ranges/index.tsx    | 17 +++++++++----
 .../src/features/workspace/Workspace.test.tsx |  8 +++----
 .../src/features/workspace/Workspace.tsx      | 24 +------------------
 3 files changed, 17 insertions(+), 32 deletions(-)

diff --git a/apps/desktop/src/features/ranges/index.tsx b/apps/desktop/src/features/ranges/index.tsx
index 958cbf0df..07e6e74ee 100644
--- a/apps/desktop/src/features/ranges/index.tsx
+++ b/apps/desktop/src/features/ranges/index.tsx
@@ -24,10 +24,17 @@ function namedOverlapWarnings(warnings: unknown): string[] {
 }
 
 /** Render per-role playable spans and the next instrument check for the loaded song. */
-export function RangesFeature(props: { title: string; song?: RehearsalSong | null }) {
-  const { title, song } = props;
+export function RangesFeature(props: {
+  title: string;
+  song?: RehearsalSong | null;
+  activeRole?: string | null;
+}) {
+  const { title, song, activeRole = null } = props;
   const t = useMemo(() => createTranslator(detectPreferredLocale()), []);
-  const firstRange = useMemo(() => (song ? firstRangeSqueeze(song) : null), [song]);
+  const firstRange = useMemo(
+    () => (song ? firstRangeSqueeze(song, activeRole) : null),
+    [activeRole, song],
+  );
   const firstRangeCopy = firstRange
     ? fillRangeCopy(
         t(firstRange.overlapWarning ? "workspaceFirstRangeClash" : "workspaceFirstRangeCheck"),
@@ -80,7 +87,7 @@ export function RangesFeature(props: { title: string; song?: RehearsalSong | nul
           <div key={sectionId} className="space-y-3">
             <h3 className="text-sm font-black uppercase tracking-[0.18em] text-cyan-200">{sectionLabel}</h3>
             <div className="flex flex-wrap gap-3">
-              {sectionRecord.roles.map((roleValue) => {
+              {sectionRecord.roles.map((roleValue, roleIndex) => {
                 if (typeof roleValue !== "object" || roleValue === null || Array.isArray(roleValue)) {
                   return null;
                 }
@@ -99,7 +106,7 @@ export function RangesFeature(props: { title: string; song?: RehearsalSong | nul
                 const transcriptionCount = Array.isArray(roleRecord.transcription) ? roleRecord.transcription.length : 0;
                 return (
                   <article
-                    key={roleId}
+                    key={`${sectionIndex}-${roleId}-${roleIndex}`}
                     className="min-w-[16rem] flex-1 rounded-2xl border border-white/10 bg-slate-950/70 p-4"
                     data-testid={`range-card-${sectionIndex}-${roleId}`}
                   >
diff --git a/apps/desktop/src/features/workspace/Workspace.test.tsx b/apps/desktop/src/features/workspace/Workspace.test.tsx
index 7837bf80e..961fbf3a8 100644
--- a/apps/desktop/src/features/workspace/Workspace.test.tsx
+++ b/apps/desktop/src/features/workspace/Workspace.test.tsx
@@ -146,7 +146,7 @@ describe("Workspace", () => {
 
     render(<Workspace song={song} />);
 
-    const callout = screen.getByTestId("first-range-squeeze");
+    const callout = screen.getByTestId("ranges-first-span");
     expect(callout).toHaveTextContent("Tonight's first range");
     expect(callout).toHaveTextContent(
       "Bass Guitar sits C#2–E3 in verse. Hear that clash on your instrument before the verse."
@@ -164,7 +164,7 @@ describe("Workspace", () => {
 
     render(<Workspace song={song} />);
 
-    expect(screen.getByTestId("first-range-squeeze")).toHaveTextContent(
+    expect(screen.getByTestId("ranges-first-span")).toHaveTextContent(
       "Tonight's first range still needs an ear check. Confirm the high and low notes on the selected part before the first section."
     );
   });
@@ -176,7 +176,7 @@ describe("Workspace", () => {
     render(<Workspace song={song} />);
     fireEvent.click(screen.getByRole("tab", { name: "Lead Vocal" }));
 
-    expect(screen.getByTestId("first-range-squeeze")).toHaveTextContent(
+    expect(screen.getByTestId("ranges-first-span")).toHaveTextContent(
       "Lead Vocal sits G#3–C#5 in verse. Hear that clash on your instrument before the verse."
     );
   });
@@ -191,7 +191,7 @@ describe("Workspace", () => {
 
     render(<Workspace song={song} />);
 
-    expect(screen.getByTestId("first-range-squeeze")).toHaveTextContent(
+    expect(screen.getByTestId("ranges-first-span")).toHaveTextContent(
       "Bass Guitar sits C#2–E3 in verse. Check that span on your instrument before the verse."
     );
   });
diff --git a/apps/desktop/src/features/workspace/Workspace.tsx b/apps/desktop/src/features/workspace/Workspace.tsx
index 6a1ddd025..4ffd930e4 100644
--- a/apps/desktop/src/features/workspace/Workspace.tsx
+++ b/apps/desktop/src/features/workspace/Workspace.tsx
@@ -4,7 +4,6 @@ import { RoleSwitcher } from "./RoleSwitcher";
 import { SectionRoadmap } from "./SectionRoadmap";
 import { GrooveMap } from "./GrooveMap";
 import { PracticeProgress } from "./PracticeProgress";
-import { fillRangeCopy, firstRangeSqueeze } from "./firstRangeSqueeze";
 import { RangesFeature } from "../ranges";
 import { PlayerFeature } from "../player";
 import { createTranslator, detectPreferredLocale } from "../../i18n";
@@ -153,18 +152,6 @@ export function Workspace({ song, sourceBootstrap = null, onSongUpdate }: Worksp
     return roleMap.get(activeRole);
   }, [activeRole, roleMap]);
   const canTranscribeBass = activeRoleDetails?.name.toLowerCase().includes("bass") ?? false;
-  const firstRange = useMemo(() => firstRangeSqueeze(song, activeRole), [activeRole, song]);
-  const firstRangeCopy = firstRange
-    ? fillRangeCopy(
-        t(firstRange.overlapWarning ? "workspaceFirstRangeClash" : "workspaceFirstRangeCheck"),
-        {
-          roleName: firstRange.roleName,
-          lowestNote: firstRange.lowestNote,
-          highestNote: firstRange.highestNote,
-          sectionLabel: firstRange.sectionLabel
-        }
-      )
-    : t("workspaceFirstRangeMissing");
 
   /** Handle the practice progress change internally by immutably updating the song state. */
   const handlePracticeProgressChange = (newProgress: number) => {
@@ -303,17 +290,8 @@ export function Workspace({ song, sourceBootstrap = null, onSongUpdate }: Worksp
         </CardHeader>
 
         <CardContent className="space-y-6 bg-[linear-gradient(180deg,rgba(15,23,42,0.72),rgba(2,6,23,0.86))] p-5 md:p-7">
-          <section
-            className="rounded-2xl border border-fuchsia-300/20 bg-fuchsia-300/[0.07] p-4"
-            data-testid="first-range-squeeze"
-            aria-label={t("workspaceFirstRangeTitle")}
-          >
-            <p className="text-xs font-black uppercase tracking-[0.24em] text-fuchsia-200">{t("workspaceFirstRangeTitle")}</p>
-            <p className="mt-2 text-sm leading-6 text-slate-100">{firstRangeCopy}</p>
-          </section>
-
           <div className="grid gap-4 xl:grid-cols-2" data-testid="workspace-rehearsal-surfaces">
-            <RangesFeature title="Ranges" song={song} />
+            <RangesFeature title="Ranges" song={song} activeRole={activeRole} />
             <PlayerFeature title="Player" song={song} />
           </div>
 

From 644c3a0f10e5af184644ed5849882b55c3a26589 Mon Sep 17 00:00:00 2001
From: seonghobae <me@seonghobae.me>
Date: Sat, 29 Aug 2026 10:01:22 +0900
Subject: [PATCH 10/20] fix(ranges): centralize runtime object validation

---
 apps/desktop/src/features/ranges/index.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/apps/desktop/src/features/ranges/index.tsx b/apps/desktop/src/features/ranges/index.tsx
index 07e6e74ee..58894f336 100644
--- a/apps/desktop/src/features/ranges/index.tsx
+++ b/apps/desktop/src/features/ranges/index.tsx
@@ -8,6 +8,11 @@ import {
   playableRange
 } from "../workspace/firstRangeSqueeze";
 
+/** Return whether an untrusted runtime value is a plain object record. */
+function isRuntimeObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
 /** Return trimmed clash copy from untrusted overlap-warning evidence. */
 function namedOverlapWarnings(warnings: unknown): string[] {
   if (!Array.isArray(warnings)) {
@@ -57,10 +62,8 @@ export function RangesFeature(props: {
   }
 
   const runtimeSong: unknown = song;
-  const sections =
-    typeof runtimeSong === "object" && runtimeSong !== null && !Array.isArray(runtimeSong) && Array.isArray((runtimeSong as { sections?: unknown }).sections)
-      ? (runtimeSong as { sections: unknown[] }).sections
-      : [];
+  const songSections = isRuntimeObject(runtimeSong) ? runtimeSong.sections : undefined;
+  const sections = Array.isArray(songSections) ? songSections : [];
 
   return (
     <section className="space-y-5 text-slate-100">
@@ -74,10 +77,10 @@ export function RangesFeature(props: {
         <p className="mt-2 text-sm leading-6 text-slate-100">{firstRangeCopy}</p>
       </section>
       {sections.map((sectionValue, sectionIndex) => {
-        if (typeof sectionValue !== "object" || sectionValue === null || Array.isArray(sectionValue)) {
+        if (!isRuntimeObject(sectionValue)) {
           return null;
         }
-        const sectionRecord = sectionValue as Record<string, unknown>;
+        const sectionRecord = sectionValue;
         const sectionLabel = meaningfulRangeText(sectionRecord.label);
         const sectionId = meaningfulRangeText(sectionRecord.id) ?? `section-${sectionIndex}`;
         if (!sectionLabel || !Array.isArray(sectionRecord.roles)) {
@@ -88,10 +91,10 @@ export function RangesFeature(props: {
             <h3 className="text-sm font-black uppercase tracking-[0.18em] text-cyan-200">{sectionLabel}</h3>
             <div className="flex flex-wrap gap-3">
               {sectionRecord.roles.map((roleValue, roleIndex) => {
-                if (typeof roleValue !== "object" || roleValue === null || Array.isArray(roleValue)) {
+                if (!isRuntimeObject(roleValue)) {
                   return null;
                 }
-                const roleRecord = roleValue as Record<string, unknown>;
+                const roleRecord = roleValue;
                 const roleName = meaningfulRangeText(roleRecord.name);
                 const roleId = meaningfulRangeText(roleRecord.id);
                 if (!roleId || !roleName) {

From 8ecc90ba1be442ef02a943f7f48f0ad1362e0867 Mon Sep 17 00:00:00 2001
From: seonghobae <me@seonghobae.me>
Date: Sat, 29 Aug 2026 10:09:57 +0900
Subject: [PATCH 11/20] test(ranges): keep card selectors unique

---
 apps/desktop/src/features/ranges/index.test.tsx | 10 +++++-----
 apps/desktop/src/features/ranges/index.tsx      |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/desktop/src/features/ranges/index.test.tsx b/apps/desktop/src/features/ranges/index.test.tsx
index 387002bad..7af5b7f39 100644
--- a/apps/desktop/src/features/ranges/index.test.tsx
+++ b/apps/desktop/src/features/ranges/index.test.tsx
@@ -34,8 +34,8 @@ describe("RangesFeature", () => {
     expect(callout).toHaveTextContent(
       "Bass Guitar sits C#2–E3 in verse. Hear that clash on your instrument before the verse."
     );
-    expect(screen.getByTestId("range-card-0-bass-guitar")).toHaveTextContent("C#2 — E3");
-    expect(screen.getByTestId("range-card-0-bass-guitar")).toHaveTextContent(
+    expect(screen.getByTestId("range-card-0-bass-guitar-0")).toHaveTextContent("C#2 — E3");
+    expect(screen.getByTestId("range-card-0-bass-guitar-0")).toHaveTextContent(
       "Check this span on your instrument before verse."
     );
     expect(screen.getByText("Density warning: competing with Keyboard Left Hand in low register.")).toBeTruthy();
@@ -66,7 +66,7 @@ describe("RangesFeature", () => {
 
     render(<RangesFeature title="Ranges" song={song} />);
 
-    const card = screen.getByTestId("range-card-0-bass-guitar");
+    const card = screen.getByTestId("range-card-0-bass-guitar-0");
     expect(card).toHaveTextContent("Confirm the high and low notes by ear before treating this as a playable span.");
     expect(card).not.toHaveTextContent("E3 — C#2");
   });
@@ -109,7 +109,7 @@ describe("RangesFeature", () => {
 
     render(<RangesFeature title="Ranges" song={song} />);
 
-    expect(screen.getByTestId("range-card-0-bass-guitar")).toBeTruthy();
-    expect(screen.getByTestId("range-card-1-bass-guitar")).toBeTruthy();
+    expect(screen.getByTestId("range-card-0-bass-guitar-0")).toBeTruthy();
+    expect(screen.getByTestId("range-card-1-bass-guitar-0")).toBeTruthy();
   });
 });
diff --git a/apps/desktop/src/features/ranges/index.tsx b/apps/desktop/src/features/ranges/index.tsx
index 58894f336..893402fc6 100644
--- a/apps/desktop/src/features/ranges/index.tsx
+++ b/apps/desktop/src/features/ranges/index.tsx
@@ -111,7 +111,7 @@ export function RangesFeature(props: {
                   <article
                     key={`${sectionIndex}-${roleId}-${roleIndex}`}
                     className="min-w-[16rem] flex-1 rounded-2xl border border-white/10 bg-slate-950/70 p-4"
-                    data-testid={`range-card-${sectionIndex}-${roleId}`}
+                    data-testid={`range-card-${sectionIndex}-${roleId}-${roleIndex}`}
                   >
                     <p className="text-sm font-bold text-white">{roleName}</p>
                     {validatedRange ? (

From 0aa2078087b3c45cd7f9963ed49c47b1fceff182 Mon Sep 17 00:00:00 2001
From: seonghobae <me@seonghobae.me>
Date: Sat, 29 Aug 2026 10:14:24 +0900
Subject: [PATCH 12/20] fix(ranges): preserve the first playable span

---
 .../workspace/firstRangeSqueeze.test.ts        | 14 ++++++++++++++
 .../features/workspace/firstRangeSqueeze.ts    | 18 +++++-------------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/apps/desktop/src/features/workspace/firstRangeSqueeze.test.ts b/apps/desktop/src/features/workspace/firstRangeSqueeze.test.ts
index 643935954..23e9ac01e 100644
--- a/apps/desktop/src/features/workspace/firstRangeSqueeze.test.ts
+++ b/apps/desktop/src/features/workspace/firstRangeSqueeze.test.ts
@@ -59,6 +59,20 @@ describe("firstRangeSqueeze", () => {
     });
   });
 
+  it("returns the first playable span when a later span has a clash warning", () => {
+    const song = createDemoRehearsalSong();
+    song.sections[0]!.roles[0] = {
+      ...song.sections[0]!.roles[0]!,
+      overlapWarnings: []
+    };
+
+    expect(firstRangeSqueeze(song)).toMatchObject({
+      sectionLabel: "verse",
+      roleName: "Bass Guitar",
+      overlapWarning: undefined
+    });
+  });
+
   it("falls back to the first named span when clashes are only none sentinels", () => {
     const song = createDemoRehearsalSong();
     song.sections[0]!.roles = song.sections[0]!.roles.map((role, index) => ({
diff --git a/apps/desktop/src/features/workspace/firstRangeSqueeze.ts b/apps/desktop/src/features/workspace/firstRangeSqueeze.ts
index 47270d2a9..9516d7624 100644
--- a/apps/desktop/src/features/workspace/firstRangeSqueeze.ts
+++ b/apps/desktop/src/features/workspace/firstRangeSqueeze.ts
@@ -87,9 +87,9 @@ export function playableRange(
 /**
  * Pick the first playable range a player should check before the next section.
  *
- * Prefers a named span that also carries a clash warning so the board names
- * the squeeze that will waste rehearsal time. Falls back to the first named
- * span when no clash is present. Runtime roots and collection members are
+ * Returns the first named span that passes playable-range validation. Any
+ * warning attached to that span is preserved for copy selection. Runtime
+ * roots and collection members are
  * treated as untrusted; malformed evidence is isolated instead of crashing
  * the buyer-visible workspace or becoming playable-range authority.
  */
@@ -102,8 +102,6 @@ export function firstRangeSqueeze(
     return null;
   }
 
-  let fallback: FirstRangeSqueeze | null = null;
-
   for (const sectionValue of runtimeSong.sections) {
     if (!isRuntimeObject(sectionValue) || !Array.isArray(sectionValue.roles)) {
       continue;
@@ -149,17 +147,11 @@ export function firstRangeSqueeze(
         overlapWarning
       };
 
-      if (overlapWarning) {
-        return candidate;
-      }
-
-      if (!fallback) {
-        fallback = candidate;
-      }
+      return candidate;
     }
   }
 
-  return fallback;
+  return null;
 }
 
 /** Fill trusted `{token}` placeholders once while keeping rehearsal values literal. */

From 1f9a4ef75e563fe318f7761a400094b0d4ebff73 Mon Sep 17 00:00:00 2001
From: seonghobae <me@seonghobae.me>
Date: Sat, 29 Aug 2026 10:17:46 +0900
Subject: [PATCH 13/20] test(ranges): describe first-span warning behavior

---
 apps/desktop/src/features/workspace/firstRangeSqueeze.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/desktop/src/features/workspace/firstRangeSqueeze.test.ts b/apps/desktop/src/features/workspace/firstRangeSqueeze.test.ts
index 23e9ac01e..c854856ac 100644
--- a/apps/desktop/src/features/workspace/firstRangeSqueeze.test.ts
+++ b/apps/desktop/src/features/workspace/firstRangeSqueeze.test.ts
@@ -47,7 +47,7 @@ describe("playableRange", () => {
 });
 
 describe("firstRangeSqueeze", () => {
-  it("prefers the first named span that also carries a clash warning", () => {
+  it("returns the first playable span and preserves its clash warning", () => {
     const squeeze = firstRangeSqueeze(createDemoRehearsalSong());
 
     expect(squeeze).toEqual({

From 2554d900a4f0e958b41b60f9cbe487f2eba85239 Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Fri, 28 Aug 2026 21:04:33 -0700
Subject: [PATCH 14/20] docs(test): explain player locale fixture helper

---
 apps/desktop/src/features/player/index.test.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/desktop/src/features/player/index.test.tsx b/apps/desktop/src/features/player/index.test.tsx
index 9fd270084..f63d0e053 100644
--- a/apps/desktop/src/features/player/index.test.tsx
+++ b/apps/desktop/src/features/player/index.test.tsx
@@ -5,6 +5,7 @@ import { PlayerFeature, firstNamedSection } from "./index";
 
 const originalLanguage = navigator.language;
 
+/** Set the browser language used by locale detection for one test case. */
 function setNavigatorLanguage(language: string) {
   Object.defineProperty(navigator, "language", {
     configurable: true,

From 24f8ed4d20807c5edf8b8d1218693fe961bba56b Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Fri, 28 Aug 2026 21:05:04 -0700
Subject: [PATCH 15/20] docs(test): explain ranges locale fixture helper

---
 apps/desktop/src/features/ranges/index.test.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/desktop/src/features/ranges/index.test.tsx b/apps/desktop/src/features/ranges/index.test.tsx
index 7af5b7f39..bbaa34005 100644
--- a/apps/desktop/src/features/ranges/index.test.tsx
+++ b/apps/desktop/src/features/ranges/index.test.tsx
@@ -5,6 +5,7 @@ import { RangesFeature } from "./index";
 
 const originalLanguage = navigator.language;
 
+/** Set the browser language used by locale detection for one test case. */
 function setNavigatorLanguage(language: string) {
   Object.defineProperty(navigator, "language", {
     configurable: true,

From bb17f4257d92c2eb50797fb50177caa938e7b7e0 Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Fri, 28 Aug 2026 21:06:42 -0700
Subject: [PATCH 16/20] test(player): reject Proxy get section substitution

---
 apps/desktop/src/features/player/index.test.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/apps/desktop/src/features/player/index.test.tsx b/apps/desktop/src/features/player/index.test.tsx
index f63d0e053..f58cdb5c9 100644
--- a/apps/desktop/src/features/player/index.test.tsx
+++ b/apps/desktop/src/features/player/index.test.tsx
@@ -38,6 +38,23 @@ describe("firstNamedSection", () => {
     expect(firstNamedSection(song)).toEqual({ id: "chorus-1", label: "chorus" });
   });
 
+  it("uses owned section data instead of Proxy get substitutions", () => {
+    const song = createDemoRehearsalSong();
+    const verse = song.sections[0]!;
+    song.sections = [
+      new Proxy(verse, {
+        get(target, property, receiver) {
+          if (property === "id") return "spoofed-section";
+          if (property === "label") return "chorus";
+          if (property === "timeRange") return { start: 90, end: 100 };
+          return Reflect.get(target, property, receiver);
+        }
+      })
+    ];
+
+    expect(firstNamedSection(song)).toEqual({ id: "verse-1", label: "verse" });
+  });
+
   it("rejects malformed roots instead of inventing a loop", () => {
     expect(firstNamedSection(null)).toBeNull();
     expect(firstNamedSection({ sections: "bad" } as never)).toBeNull();

From fe467cd2608a697f9a1160fe0bbe8b57f12e77c0 Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Fri, 28 Aug 2026 21:07:49 -0700
Subject: [PATCH 17/20] fix(player): snapshot owned section loop authority

---
 apps/desktop/src/features/player/index.tsx | 38 +++++++++++++++-------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/apps/desktop/src/features/player/index.tsx b/apps/desktop/src/features/player/index.tsx
index b740f5f0b..c0715b261 100644
--- a/apps/desktop/src/features/player/index.tsx
+++ b/apps/desktop/src/features/player/index.tsx
@@ -9,32 +9,46 @@ export type FirstNamedSection = {
   label: string;
 };
 
+/** Return whether an untrusted runtime value is a non-array object record. */
+function isRuntimeObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+/** Read an owned data-property value without invoking an accessor or Proxy get trap. */
+function ownDataProperty(record: Record<string, unknown>, property: string): unknown {
+  try {
+    const descriptor = Object.getOwnPropertyDescriptor(record, property);
+    return descriptor && "value" in descriptor ? descriptor.value : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 /** Pick the first named section window without treating malformed evidence as a loop. */
 export function firstNamedSection(song: RehearsalSong | null | undefined): FirstNamedSection | null {
   const runtimeSong: unknown = song;
-  if (typeof runtimeSong !== "object" || runtimeSong === null || Array.isArray(runtimeSong)) {
+  if (!isRuntimeObject(runtimeSong)) {
     return null;
   }
-  const sections = (runtimeSong as { sections?: unknown }).sections;
+  const sections = ownDataProperty(runtimeSong, "sections");
   if (!Array.isArray(sections)) {
     return null;
   }
   for (const sectionValue of sections) {
-    if (typeof sectionValue !== "object" || sectionValue === null || Array.isArray(sectionValue)) {
+    if (!isRuntimeObject(sectionValue)) {
       continue;
     }
-    const sectionRecord = sectionValue as Record<string, unknown>;
-    const id = meaningfulRangeText(sectionRecord.id);
-    const label = meaningfulRangeText(sectionRecord.label);
+    const id = meaningfulRangeText(ownDataProperty(sectionValue, "id"));
+    const label = meaningfulRangeText(ownDataProperty(sectionValue, "label"));
     if (!id || !label) {
       continue;
     }
-    const timeRange =
-      typeof sectionRecord.timeRange === "object" && sectionRecord.timeRange !== null && !Array.isArray(sectionRecord.timeRange)
-        ? (sectionRecord.timeRange as Record<string, unknown>)
-        : null;
-    const start = timeRange?.start;
-    const end = timeRange?.end;
+    const timeRange = ownDataProperty(sectionValue, "timeRange");
+    if (!isRuntimeObject(timeRange)) {
+      continue;
+    }
+    const start = ownDataProperty(timeRange, "start");
+    const end = ownDataProperty(timeRange, "end");
     if (typeof start !== "number" || typeof end !== "number" || !Number.isFinite(start) || !Number.isFinite(end) || end <= start) {
       continue;
     }

From b737906aba0b95251109e53434dd8860ff6664fd Mon Sep 17 00:00:00 2001
From: seonghobae <me@seonghobae.me>
Date: Sat, 29 Aug 2026 16:05:01 +0900
Subject: [PATCH 18/20] fix(ranges): trust only owned analysis evidence

---
 apps/desktop/src/features/player/index.tsx    | 19 +++------
 .../src/features/ranges/index.test.tsx        | 20 ++++++++++
 apps/desktop/src/features/ranges/index.tsx    | 32 ++++++++-------
 .../workspace/firstRangeSqueeze.test.ts       | 16 ++++++++
 .../features/workspace/firstRangeSqueeze.ts   | 39 +++++++++++++------
 5 files changed, 88 insertions(+), 38 deletions(-)

diff --git a/apps/desktop/src/features/player/index.tsx b/apps/desktop/src/features/player/index.tsx
index c0715b261..1ce351131 100644
--- a/apps/desktop/src/features/player/index.tsx
+++ b/apps/desktop/src/features/player/index.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import type { RehearsalSong } from "@bandscope/shared-types";
 import { createTranslator, detectPreferredLocale } from "../../i18n";
-import { fillRangeCopy, meaningfulRangeText } from "../workspace/firstRangeSqueeze";
+import { fillRangeCopy, meaningfulRangeText, ownDataProperty } from "../workspace/firstRangeSqueeze";
 
 /** Tonight's first named section a player should loop from the rehearsal map. */
 export type FirstNamedSection = {
@@ -14,16 +14,6 @@ function isRuntimeObject(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 
-/** Read an owned data-property value without invoking an accessor or Proxy get trap. */
-function ownDataProperty(record: Record<string, unknown>, property: string): unknown {
-  try {
-    const descriptor = Object.getOwnPropertyDescriptor(record, property);
-    return descriptor && "value" in descriptor ? descriptor.value : undefined;
-  } catch {
-    return undefined;
-  }
-}
-
 /** Pick the first named section window without treating malformed evidence as a loop. */
 export function firstNamedSection(song: RehearsalSong | null | undefined): FirstNamedSection | null {
   const runtimeSong: unknown = song;
@@ -62,6 +52,9 @@ export function PlayerFeature(props: { title: string; song?: RehearsalSong | nul
   const { title, song } = props;
   const t = useMemo(() => createTranslator(detectPreferredLocale()), []);
   const namedSection = useMemo(() => firstNamedSection(song), [song]);
+  const songTitle = meaningfulRangeText(
+    isRuntimeObject(song) ? ownDataProperty(song as unknown as Record<string, unknown>, "title") : undefined
+  );
 
   if (!song) {
     return (
@@ -88,9 +81,9 @@ export function PlayerFeature(props: { title: string; song?: RehearsalSong | nul
         <p className="mt-2 text-sm leading-6 text-slate-100">{nextAction}</p>
         <p className="mt-2 text-sm leading-6 text-slate-300">{t("playerNoAudioYet")}</p>
       </section>
-      {namedSection ? (
+      {namedSection && songTitle ? (
         <p className="text-sm font-semibold text-slate-200" data-testid="player-song-title">
-          {song.title}
+          {songTitle}
         </p>
       ) : null}
     </section>
diff --git a/apps/desktop/src/features/ranges/index.test.tsx b/apps/desktop/src/features/ranges/index.test.tsx
index bbaa34005..def605817 100644
--- a/apps/desktop/src/features/ranges/index.test.tsx
+++ b/apps/desktop/src/features/ranges/index.test.tsx
@@ -113,4 +113,24 @@ describe("RangesFeature", () => {
     expect(screen.getByTestId("range-card-0-bass-guitar-0")).toBeTruthy();
     expect(screen.getByTestId("range-card-1-bass-guitar-0")).toBeTruthy();
   });
+
+  it("uses owned section and role evidence instead of Proxy substitutions", () => {
+    setNavigatorLanguage("en-US");
+    const song = createDemoRehearsalSong();
+    const verse = song.sections[0]!;
+    song.sections = [
+      new Proxy(verse, {
+        get(target, property, receiver) {
+          if (property === "label") return "spoofed-section";
+          if (property === "roles") return [];
+          return Reflect.get(target, property, receiver);
+        }
+      })
+    ];
+
+    render(<RangesFeature title="Ranges" song={song} />);
+
+    expect(screen.getByText("verse")).toBeTruthy();
+    expect(screen.getByTestId("range-card-0-bass-guitar-0")).toBeTruthy();
+  });
 });
diff --git a/apps/desktop/src/features/ranges/index.tsx b/apps/desktop/src/features/ranges/index.tsx
index 893402fc6..8f16f39ec 100644
--- a/apps/desktop/src/features/ranges/index.tsx
+++ b/apps/desktop/src/features/ranges/index.tsx
@@ -5,6 +5,7 @@ import {
   fillRangeCopy,
   firstRangeSqueeze,
   meaningfulRangeText,
+  ownDataProperty,
   playableRange
 } from "../workspace/firstRangeSqueeze";
 
@@ -62,7 +63,7 @@ export function RangesFeature(props: {
   }
 
   const runtimeSong: unknown = song;
-  const songSections = isRuntimeObject(runtimeSong) ? runtimeSong.sections : undefined;
+  const songSections = isRuntimeObject(runtimeSong) ? ownDataProperty(runtimeSong, "sections") : undefined;
   const sections = Array.isArray(songSections) ? songSections : [];
 
   return (
@@ -81,32 +82,35 @@ export function RangesFeature(props: {
           return null;
         }
         const sectionRecord = sectionValue;
-        const sectionLabel = meaningfulRangeText(sectionRecord.label);
-        const sectionId = meaningfulRangeText(sectionRecord.id) ?? `section-${sectionIndex}`;
-        if (!sectionLabel || !Array.isArray(sectionRecord.roles)) {
+        const sectionLabel = meaningfulRangeText(ownDataProperty(sectionRecord, "label"));
+        const sectionId = meaningfulRangeText(ownDataProperty(sectionRecord, "id")) ?? `section-${sectionIndex}`;
+        const roles = ownDataProperty(sectionRecord, "roles");
+        if (!sectionLabel || !Array.isArray(roles)) {
           return null;
         }
         return (
           <div key={sectionId} className="space-y-3">
             <h3 className="text-sm font-black uppercase tracking-[0.18em] text-cyan-200">{sectionLabel}</h3>
             <div className="flex flex-wrap gap-3">
-              {sectionRecord.roles.map((roleValue, roleIndex) => {
+              {roles.map((roleValue, roleIndex) => {
                 if (!isRuntimeObject(roleValue)) {
                   return null;
                 }
                 const roleRecord = roleValue;
-                const roleName = meaningfulRangeText(roleRecord.name);
-                const roleId = meaningfulRangeText(roleRecord.id);
+                const roleName = meaningfulRangeText(ownDataProperty(roleRecord, "name"));
+                const roleId = meaningfulRangeText(ownDataProperty(roleRecord, "id"));
                 if (!roleId || !roleName) {
                   return null;
                 }
-                const rangeRecord =
-                  typeof roleRecord.range === "object" && roleRecord.range !== null && !Array.isArray(roleRecord.range)
-                    ? (roleRecord.range as Record<string, unknown>)
-                    : {};
-                const validatedRange = playableRange(rangeRecord.lowestNote, rangeRecord.highestNote);
-                const overlapWarnings = namedOverlapWarnings(roleRecord.overlapWarnings);
-                const transcriptionCount = Array.isArray(roleRecord.transcription) ? roleRecord.transcription.length : 0;
+                const rangeValue = ownDataProperty(roleRecord, "range");
+                const rangeRecord = isRuntimeObject(rangeValue) ? rangeValue : {};
+                const validatedRange = playableRange(
+                  ownDataProperty(rangeRecord, "lowestNote"),
+                  ownDataProperty(rangeRecord, "highestNote")
+                );
+                const overlapWarnings = namedOverlapWarnings(ownDataProperty(roleRecord, "overlapWarnings"));
+                const transcription = ownDataProperty(roleRecord, "transcription");
+                const transcriptionCount = Array.isArray(transcription) ? transcription.length : 0;
                 return (
                   <article
                     key={`${sectionIndex}-${roleId}-${roleIndex}`}
diff --git a/apps/desktop/src/features/workspace/firstRangeSqueeze.test.ts b/apps/desktop/src/features/workspace/firstRangeSqueeze.test.ts
index c854856ac..fe10328d2 100644
--- a/apps/desktop/src/features/workspace/firstRangeSqueeze.test.ts
+++ b/apps/desktop/src/features/workspace/firstRangeSqueeze.test.ts
@@ -136,6 +136,22 @@ describe("firstRangeSqueeze", () => {
     });
   });
 
+  it("uses owned range evidence instead of Proxy substitutions", () => {
+    const song = createDemoRehearsalSong();
+    const verse = song.sections[0]!;
+    song.sections = [
+      new Proxy(verse, {
+        get(target, property, receiver) {
+          if (property === "label") return "spoofed-section";
+          if (property === "roles") return [];
+          return Reflect.get(target, property, receiver);
+        }
+      })
+    ];
+
+    expect(firstRangeSqueeze(song)).toMatchObject({ sectionLabel: "verse", roleName: "Bass Guitar" });
+  });
+
   it("limits the squeeze to the selected role", () => {
     const squeeze = firstRangeSqueeze(createDemoRehearsalSong(), "lead-vocal");
 
diff --git a/apps/desktop/src/features/workspace/firstRangeSqueeze.ts b/apps/desktop/src/features/workspace/firstRangeSqueeze.ts
index 9516d7624..e772ade49 100644
--- a/apps/desktop/src/features/workspace/firstRangeSqueeze.ts
+++ b/apps/desktop/src/features/workspace/firstRangeSqueeze.ts
@@ -34,6 +34,16 @@ function isRuntimeObject(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 
+/** Read an owned data-property without invoking an accessor or Proxy get trap. */
+export function ownDataProperty(record: Record<string, unknown>, property: string): unknown {
+  try {
+    const descriptor = Object.getOwnPropertyDescriptor(record, property);
+    return descriptor && "value" in descriptor ? descriptor.value : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 /** Return trimmed copy that is not a blank or `none` sentinel. */
 export function meaningfulRangeText(value: unknown): string | undefined {
   if (typeof value !== "string") {
@@ -98,40 +108,47 @@ export function firstRangeSqueeze(
   activeRole: string | null = null
 ): FirstRangeSqueeze | null {
   const runtimeSong: unknown = song;
-  if (!isRuntimeObject(runtimeSong) || !Array.isArray(runtimeSong.sections)) {
+  const sections = isRuntimeObject(runtimeSong) ? ownDataProperty(runtimeSong, "sections") : undefined;
+  if (!Array.isArray(sections)) {
     return null;
   }
 
-  for (const sectionValue of runtimeSong.sections) {
-    if (!isRuntimeObject(sectionValue) || !Array.isArray(sectionValue.roles)) {
+  for (const sectionValue of sections) {
+    const roles = isRuntimeObject(sectionValue) ? ownDataProperty(sectionValue, "roles") : undefined;
+    if (!isRuntimeObject(sectionValue) || !Array.isArray(roles)) {
       continue;
     }
-    const sectionLabel = meaningfulRangeText(sectionValue.label);
+    const sectionLabel = meaningfulRangeText(ownDataProperty(sectionValue, "label"));
     if (!sectionLabel) {
       continue;
     }
 
-    for (const roleValue of sectionValue.roles) {
+    for (const roleValue of roles) {
       if (!isRuntimeObject(roleValue)) {
         continue;
       }
-      const roleId = meaningfulRangeText(roleValue.id);
-      const roleName = meaningfulRangeText(roleValue.name);
+      const roleId = meaningfulRangeText(ownDataProperty(roleValue, "id"));
+      const roleName = meaningfulRangeText(ownDataProperty(roleValue, "name"));
       if (!roleId || !roleName || (activeRole && roleId !== activeRole)) {
         continue;
       }
-      if (!isRuntimeObject(roleValue.range)) {
+      const rangeValue = ownDataProperty(roleValue, "range");
+      if (!isRuntimeObject(rangeValue)) {
         continue;
       }
 
-      const range = playableRange(roleValue.range.lowestNote, roleValue.range.highestNote);
+      const range = playableRange(
+        ownDataProperty(rangeValue, "lowestNote"),
+        ownDataProperty(rangeValue, "highestNote")
+      );
       if (!range) {
         continue;
       }
 
       let overlapWarning: string | undefined;
-      if (Array.isArray(roleValue.overlapWarnings)) {
-        for (const warning of roleValue.overlapWarnings) {
+      const overlapWarnings = ownDataProperty(roleValue, "overlapWarnings");
+      if (Array.isArray(overlapWarnings)) {
+        for (const warning of overlapWarnings) {
           const meaningfulWarning = meaningfulRangeText(warning);
           if (meaningfulWarning) {
             overlapWarning = meaningfulWarning;

From b88ccd1aeef6c986dc2a436d316c3340be6a8511 Mon Sep 17 00:00:00 2001
From: seonghobae <me@seonghobae.me>
Date: Sat, 29 Aug 2026 21:25:14 +0900
Subject: [PATCH 19/20] fix(workspace): reject forged range and loop payloads

---
 .../src/features/player/index.test.tsx        | 23 +++++++++-
 apps/desktop/src/features/player/index.tsx    | 14 ++++--
 .../src/features/ranges/index.test.tsx        |  6 +--
 apps/desktop/src/features/ranges/index.tsx    |  8 ++--
 .../workspace/firstRangeSqueeze.test.ts       | 34 +++++++++++++-
 .../features/workspace/firstRangeSqueeze.ts   | 46 +++++++++++++++++++
 6 files changed, 117 insertions(+), 14 deletions(-)

diff --git a/apps/desktop/src/features/player/index.test.tsx b/apps/desktop/src/features/player/index.test.tsx
index f58cdb5c9..eaa52e4d9 100644
--- a/apps/desktop/src/features/player/index.test.tsx
+++ b/apps/desktop/src/features/player/index.test.tsx
@@ -38,7 +38,7 @@ describe("firstNamedSection", () => {
     expect(firstNamedSection(song)).toEqual({ id: "chorus-1", label: "chorus" });
   });
 
-  it("uses owned section data instead of Proxy get substitutions", () => {
+  it("rejects Proxy section data instead of trusting descriptor reads", () => {
     const song = createDemoRehearsalSong();
     const verse = song.sections[0]!;
     song.sections = [
@@ -52,7 +52,26 @@ describe("firstNamedSection", () => {
       })
     ];
 
-    expect(firstNamedSection(song)).toEqual({ id: "verse-1", label: "verse" });
+    expect(firstNamedSection(song)).toBeNull();
+  });
+
+  it("rejects Proxy descriptor traps before they can forge a loop", () => {
+    const song = createDemoRehearsalSong();
+    const forged = new Proxy(song, {
+      getOwnPropertyDescriptor(target, property) {
+        if (property === "sections") {
+          return {
+            configurable: true,
+            enumerable: true,
+            value: [{ id: "spoofed", label: "spoofed", timeRange: { start: 1, end: 2 } }],
+            writable: true
+          };
+        }
+        return Reflect.getOwnPropertyDescriptor(target, property);
+      }
+    });
+
+    expect(firstNamedSection(forged as RehearsalSong)).toBeNull();
   });
 
   it("rejects malformed roots instead of inventing a loop", () => {
diff --git a/apps/desktop/src/features/player/index.tsx b/apps/desktop/src/features/player/index.tsx
index 1ce351131..ac55c9642 100644
--- a/apps/desktop/src/features/player/index.tsx
+++ b/apps/desktop/src/features/player/index.tsx
@@ -1,7 +1,12 @@
 import { useMemo } from "react";
 import type { RehearsalSong } from "@bandscope/shared-types";
 import { createTranslator, detectPreferredLocale } from "../../i18n";
-import { fillRangeCopy, meaningfulRangeText, ownDataProperty } from "../workspace/firstRangeSqueeze";
+import {
+  fillRangeCopy,
+  isSafeRuntimeValue,
+  meaningfulRangeText,
+  ownDataProperty
+} from "../workspace/firstRangeSqueeze";
 
 /** Tonight's first named section a player should loop from the rehearsal map. */
 export type FirstNamedSection = {
@@ -17,7 +22,7 @@ function isRuntimeObject(value: unknown): value is Record<string, unknown> {
 /** Pick the first named section window without treating malformed evidence as a loop. */
 export function firstNamedSection(song: RehearsalSong | null | undefined): FirstNamedSection | null {
   const runtimeSong: unknown = song;
-  if (!isRuntimeObject(runtimeSong)) {
+  if (!isRuntimeObject(runtimeSong) || !isSafeRuntimeValue(runtimeSong)) {
     return null;
   }
   const sections = ownDataProperty(runtimeSong, "sections");
@@ -51,9 +56,10 @@ export function firstNamedSection(song: RehearsalSong | null | undefined): First
 export function PlayerFeature(props: { title: string; song?: RehearsalSong | null }) {
   const { title, song } = props;
   const t = useMemo(() => createTranslator(detectPreferredLocale()), []);
-  const namedSection = useMemo(() => firstNamedSection(song), [song]);
+  const safeSong = song && isSafeRuntimeValue(song) ? song : null;
+  const namedSection = useMemo(() => firstNamedSection(safeSong), [safeSong]);
   const songTitle = meaningfulRangeText(
-    isRuntimeObject(song) ? ownDataProperty(song as unknown as Record<string, unknown>, "title") : undefined
+    isRuntimeObject(safeSong) ? ownDataProperty(safeSong, "title") : undefined
   );
 
   if (!song) {
diff --git a/apps/desktop/src/features/ranges/index.test.tsx b/apps/desktop/src/features/ranges/index.test.tsx
index def605817..0a2486b2c 100644
--- a/apps/desktop/src/features/ranges/index.test.tsx
+++ b/apps/desktop/src/features/ranges/index.test.tsx
@@ -114,7 +114,7 @@ describe("RangesFeature", () => {
     expect(screen.getByTestId("range-card-1-bass-guitar-0")).toBeTruthy();
   });
 
-  it("uses owned section and role evidence instead of Proxy substitutions", () => {
+  it("rejects Proxy section evidence instead of trusting descriptor reads", () => {
     setNavigatorLanguage("en-US");
     const song = createDemoRehearsalSong();
     const verse = song.sections[0]!;
@@ -130,7 +130,7 @@ describe("RangesFeature", () => {
 
     render(<RangesFeature title="Ranges" song={song} />);
 
-    expect(screen.getByText("verse")).toBeTruthy();
-    expect(screen.getByTestId("range-card-0-bass-guitar-0")).toBeTruthy();
+    expect(screen.queryByText("spoofed-section")).toBeNull();
+    expect(screen.queryByTestId("range-card-0-bass-guitar-0")).toBeNull();
   });
 });
diff --git a/apps/desktop/src/features/ranges/index.tsx b/apps/desktop/src/features/ranges/index.tsx
index 8f16f39ec..dfc0fcab9 100644
--- a/apps/desktop/src/features/ranges/index.tsx
+++ b/apps/desktop/src/features/ranges/index.tsx
@@ -4,6 +4,7 @@ import { createTranslator, detectPreferredLocale } from "../../i18n";
 import {
   fillRangeCopy,
   firstRangeSqueeze,
+  isSafeRuntimeValue,
   meaningfulRangeText,
   ownDataProperty,
   playableRange
@@ -37,9 +38,10 @@ export function RangesFeature(props: {
 }) {
   const { title, song, activeRole = null } = props;
   const t = useMemo(() => createTranslator(detectPreferredLocale()), []);
+  const safeSong = song && isSafeRuntimeValue(song) ? song : null;
   const firstRange = useMemo(
-    () => (song ? firstRangeSqueeze(song, activeRole) : null),
-    [activeRole, song],
+    () => (safeSong ? firstRangeSqueeze(safeSong, activeRole) : null),
+    [activeRole, safeSong],
   );
   const firstRangeCopy = firstRange
     ? fillRangeCopy(
@@ -62,7 +64,7 @@ export function RangesFeature(props: {
     );
   }
 
-  const runtimeSong: unknown = song;
+  const runtimeSong: unknown = safeSong;
   const songSections = isRuntimeObject(runtimeSong) ? ownDataProperty(runtimeSong, "sections") : undefined;
   const sections = Array.isArray(songSections) ? songSections : [];
 
diff --git a/apps/desktop/src/features/workspace/firstRangeSqueeze.test.ts b/apps/desktop/src/features/workspace/firstRangeSqueeze.test.ts
index fe10328d2..857728712 100644
--- a/apps/desktop/src/features/workspace/firstRangeSqueeze.test.ts
+++ b/apps/desktop/src/features/workspace/firstRangeSqueeze.test.ts
@@ -136,7 +136,7 @@ describe("firstRangeSqueeze", () => {
     });
   });
 
-  it("uses owned range evidence instead of Proxy substitutions", () => {
+  it("rejects Proxy range evidence instead of trusting descriptor reads", () => {
     const song = createDemoRehearsalSong();
     const verse = song.sections[0]!;
     song.sections = [
@@ -149,7 +149,37 @@ describe("firstRangeSqueeze", () => {
       })
     ];
 
-    expect(firstRangeSqueeze(song)).toMatchObject({ sectionLabel: "verse", roleName: "Bass Guitar" });
+    expect(firstRangeSqueeze(song)).toBeNull();
+  });
+
+  it("rejects Proxy descriptor traps before they can forge range evidence", () => {
+    const song = createDemoRehearsalSong();
+    const forged = new Proxy(song, {
+      getOwnPropertyDescriptor(target, property) {
+        if (property === "sections") {
+          return { configurable: true, enumerable: true, value: [], writable: true };
+        }
+        return Reflect.getOwnPropertyDescriptor(target, property);
+      }
+    });
+
+    expect(firstRangeSqueeze(forged as RehearsalSong)).toBeNull();
+  });
+
+  it("does not invoke accessor evidence while rejecting it", () => {
+    const song = createDemoRehearsalSong();
+    let invoked = false;
+    Object.defineProperty(song, "sections", {
+      configurable: true,
+      enumerable: true,
+      get() {
+        invoked = true;
+        return [];
+      }
+    });
+
+    expect(firstRangeSqueeze(song)).toBeNull();
+    expect(invoked).toBe(false);
   });
 
   it("limits the squeeze to the selected role", () => {
diff --git a/apps/desktop/src/features/workspace/firstRangeSqueeze.ts b/apps/desktop/src/features/workspace/firstRangeSqueeze.ts
index e772ade49..4e1047cc7 100644
--- a/apps/desktop/src/features/workspace/firstRangeSqueeze.ts
+++ b/apps/desktop/src/features/workspace/firstRangeSqueeze.ts
@@ -34,6 +34,49 @@ function isRuntimeObject(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 
+/** Return whether an object graph contains only cloneable own data properties. */
+function hasDataPropertyGraph(value: unknown, seen = new WeakSet<object>()): boolean {
+  if (typeof value !== "object" || value === null) {
+    return true;
+  }
+  if (seen.has(value)) {
+    return true;
+  }
+  seen.add(value);
+
+  let keys: (string | symbol)[];
+  try {
+    keys = Reflect.ownKeys(value);
+  } catch {
+    return false;
+  }
+  for (const key of keys) {
+    let descriptor: PropertyDescriptor | undefined;
+    try {
+      descriptor = Object.getOwnPropertyDescriptor(value, key);
+    } catch {
+      return false;
+    }
+    if (!descriptor || !("value" in descriptor) || !hasDataPropertyGraph(descriptor.value, seen)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/** Reject accessors and Proxy containers before descriptor reads accept data. */
+export function isSafeRuntimeValue(value: unknown): boolean {
+  if (!hasDataPropertyGraph(value)) {
+    return false;
+  }
+  try {
+    structuredClone(value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 /** Read an owned data-property without invoking an accessor or Proxy get trap. */
 export function ownDataProperty(record: Record<string, unknown>, property: string): unknown {
   try {
@@ -108,6 +151,9 @@ export function firstRangeSqueeze(
   activeRole: string | null = null
 ): FirstRangeSqueeze | null {
   const runtimeSong: unknown = song;
+  if (!isRuntimeObject(runtimeSong) || !isSafeRuntimeValue(runtimeSong)) {
+    return null;
+  }
   const sections = isRuntimeObject(runtimeSong) ? ownDataProperty(runtimeSong, "sections") : undefined;
   if (!Array.isArray(sections)) {
     return null;

From f2dcc58b967c006e29a73074dead62bf4d6b0321 Mon Sep 17 00:00:00 2001
From: seonghobae <me@seonghobae.me>
Date: Sat, 29 Aug 2026 21:32:44 +0900
Subject: [PATCH 20/20] perf(workspace): memoize runtime song validation

---
 apps/desktop/src/features/player/index.tsx | 5 ++++-
 apps/desktop/src/features/ranges/index.tsx | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/desktop/src/features/player/index.tsx b/apps/desktop/src/features/player/index.tsx
index ac55c9642..a017ce01b 100644
--- a/apps/desktop/src/features/player/index.tsx
+++ b/apps/desktop/src/features/player/index.tsx
@@ -56,7 +56,10 @@ export function firstNamedSection(song: RehearsalSong | null | undefined): First
 export function PlayerFeature(props: { title: string; song?: RehearsalSong | null }) {
   const { title, song } = props;
   const t = useMemo(() => createTranslator(detectPreferredLocale()), []);
-  const safeSong = song && isSafeRuntimeValue(song) ? song : null;
+  const safeSong = useMemo(
+    () => (song && isSafeRuntimeValue(song) ? song : null),
+    [song],
+  );
   const namedSection = useMemo(() => firstNamedSection(safeSong), [safeSong]);
   const songTitle = meaningfulRangeText(
     isRuntimeObject(safeSong) ? ownDataProperty(safeSong, "title") : undefined
diff --git a/apps/desktop/src/features/ranges/index.tsx b/apps/desktop/src/features/ranges/index.tsx
index dfc0fcab9..dae56f7e0 100644
--- a/apps/desktop/src/features/ranges/index.tsx
+++ b/apps/desktop/src/features/ranges/index.tsx
@@ -38,7 +38,10 @@ export function RangesFeature(props: {
 }) {
   const { title, song, activeRole = null } = props;
   const t = useMemo(() => createTranslator(detectPreferredLocale()), []);
-  const safeSong = song && isSafeRuntimeValue(song) ? song : null;
+  const safeSong = useMemo(
+    () => (song && isSafeRuntimeValue(song) ? song : null),
+    [song],
+  );
   const firstRange = useMemo(
     () => (safeSong ? firstRangeSqueeze(safeSong, activeRole) : null),
     [activeRole, safeSong],