diff --git a/apps/desktop/src-tauri/src/main.rs b/apps/desktop/src-tauri/src/main.rs
index 0224b1d..73011fa 100644
--- a/apps/desktop/src-tauri/src/main.rs
+++ b/apps/desktop/src-tauri/src/main.rs
@@ -1,7 +1,7 @@
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
 use rfd::FileDialog;
-use serde::{Deserialize, Serialize};
+use serde::{Deserialize, Deserializer, Serialize};
 use serde_json::{json, Value};
 use std::{
     collections::HashMap,
@@ -141,6 +141,49 @@ struct RehearsalRolePayload {
     simplification: String,
     setup_note: String,
     manual_overrides: Vec<ManualOverridePayload>,
+    overlap_warnings: Vec<String>,
+}
+
+#[derive(Clone, Debug, Serialize)]
+#[serde(rename_all = "camelCase")]
+struct SectionTimeRangePayload {
+    start: u32,
+    end: u32,
+}
+
+impl<'de> Deserialize<'de> for SectionTimeRangePayload {
+    fn deserialize<D>(deserializer: D) -> Result<Self, D::Error>
+    where
+        D: Deserializer<'de>,
+    {
+        #[derive(Deserialize)]
+        #[serde(rename_all = "camelCase", deny_unknown_fields)]
+        struct RawSectionTimeRangePayload {
+            start: u32,
+            end: u32,
+        }
+
+        let raw = RawSectionTimeRangePayload::deserialize(deserializer)?;
+        if raw.end <= raw.start {
+            return Err(serde::de::Error::custom(
+                "section timeRange end must be greater than start",
+            ));
+        }
+
+        Ok(Self {
+            start: raw.start,
+            end: raw.end,
+        })
+    }
+}
+
+#[derive(Clone, Debug, Deserialize, Serialize)]
+#[serde(deny_unknown_fields)]
+struct PartGraphNodePayload {
+    role_id: String,
+    is_active: bool,
+    handoff_to: Vec<String>,
+    handoff_from: Vec<String>,
 }
 
 #[derive(Clone, Debug, Deserialize, Serialize)]
@@ -149,8 +192,10 @@ struct RehearsalSectionPayload {
     id: String,
     label: String,
     groove: String,
+    time_range: SectionTimeRangePayload,
     confidence: ConfidencePayload,
     roles: Vec<RehearsalRolePayload>,
+    part_graph: Vec<PartGraphNodePayload>,
 }
 
 #[derive(Clone, Debug, Deserialize, Serialize)]
@@ -353,6 +398,74 @@ fn normalize_local_audio_source(path: &Path) -> Result<LocalAudioSourcePayload,
     })
 }
 
+fn youtube_source_from_metadata(
+    metadata: &Value,
+    cache_root: &Path,
+) -> Result<LocalAudioSourcePayload, String> {
+    let filepath = metadata
+        .get("filepath")
+        .and_then(|value| value.as_str())
+        .filter(|value| !value.trim().is_empty())
+        .ok_or_else(|| "Failed to parse YouTube import response.".to_string())?;
+    let title = metadata
+        .get("title")
+        .and_then(|value| value.as_str())
+        .unwrap_or("Unknown YouTube Audio");
+    let path = Path::new(filepath);
+    let link_metadata = std::fs::symlink_metadata(path)
+        .map_err(|_| "Could not read downloaded audio file.".to_string())?;
+    if link_metadata.file_type().is_symlink() {
+        return Err("YouTube import returned an invalid audio path.".to_string());
+    }
+
+    let canonical_cache_root = cache_root
+        .canonicalize()
+        .map_err(|_| "Could not validate YouTube import workspace.".to_string())?;
+    let canonical = path
+        .canonicalize()
+        .map_err(|_| "Could not read downloaded audio file.".to_string())?;
+    if !canonical.starts_with(&canonical_cache_root) {
+        return Err("YouTube import returned an invalid audio path.".to_string());
+    }
+
+    let file_metadata = std::fs::metadata(&canonical)
+        .map_err(|_| "Could not read downloaded audio file.".to_string())?;
+    if !file_metadata.is_file() || file_metadata.len() == 0 {
+        return Err("YouTube import returned an invalid audio file.".to_string());
+    }
+
+    let extension = canonical
+        .extension()
+        .and_then(|value| value.to_str())
+        .map(|value| value.to_ascii_lowercase())
+        .ok_or_else(|| "YouTube import returned an unsupported audio format.".to_string())?;
+    if !AUDIO_EXTENSIONS.contains(&extension.as_str()) {
+        return Err("YouTube import returned an unsupported audio format.".to_string());
+    }
+
+    let safe_title: String = title
+        .chars()
+        .map(|c| match c {
+            '/' | '\\' | ':' | '*' | '?' | '"' | '<' | '>' | '|' | '.' => '_',
+            c if c.is_control() => '_',
+            c => c,
+        })
+        .take(100)
+        .collect();
+    let safe_title = if safe_title.is_empty() {
+        "youtube_audio".to_string()
+    } else {
+        safe_title
+    };
+
+    Ok(LocalAudioSourcePayload {
+        source_path: canonical.to_string_lossy().into_owned(),
+        file_name: format!("{safe_title}.{extension}"),
+        extension,
+        file_size_bytes: file_metadata.len(),
+    })
+}
+
 fn parse_request_payload(payload: Value) -> Result<AnalysisJobRequest, String> {
     let Value::Object(map) = payload else {
         return Err("Invalid analysis job request: invalid field 'root'".into());
@@ -787,44 +900,7 @@ async fn import_youtube_url(
 
     if parsed.get("ok").and_then(|v| v.as_bool()) == Some(true) {
         if let Some(metadata) = parsed.get("metadata") {
-            let filepath = metadata
-                .get("filepath")
-                .and_then(|v| v.as_str())
-                .unwrap_or("");
-            let title = metadata
-                .get("title")
-                .and_then(|v| v.as_str())
-                .unwrap_or("Unknown YouTube Audio");
-            let path = Path::new(filepath);
-            let metadata_fs = std::fs::metadata(path)
-                .map_err(|_| "Could not read downloaded audio file.".to_string())?;
-            let extension = path
-                .extension()
-                .and_then(|v| v.to_str())
-                .unwrap_or("m4a")
-                .to_string();
-
-            let safe_title: String = title
-                .chars()
-                .map(|c| match c {
-                    '/' | '\\' | ':' | '*' | '?' | '"' | '<' | '>' | '|' | '.' => '_',
-                    c if c.is_control() => '_',
-                    c => c,
-                })
-                .take(100)
-                .collect();
-            let safe_title = if safe_title.is_empty() {
-                "youtube_audio".to_string()
-            } else {
-                safe_title
-            };
-
-            let source = LocalAudioSourcePayload {
-                source_path: filepath.to_string(),
-                file_name: format!("{}.{}", safe_title, extension),
-                extension,
-                file_size_bytes: metadata_fs.len(),
-            };
+            let source = youtube_source_from_metadata(metadata, &cache_root)?;
 
             let summary = ProjectBootstrapSummaryPayload {
                 project_id,
@@ -883,6 +959,30 @@ fn is_supported_youtube_url(url: &str) -> bool {
 
     false
 }
+
+fn project_payload_from_content(content: &str) -> Result<RehearsalSongPayload, String> {
+    if let Ok(parsed) = serde_json::from_str::<RehearsalSongPayload>(content) {
+        return Ok(parsed);
+    }
+
+    let payload = serde_json::from_str::<Value>(content)
+        .map_err(|_| "Invalid project file format".to_string())?;
+    if let Some(sections) = payload.get("sections").and_then(Value::as_array) {
+        for (section_index, section) in sections.iter().enumerate() {
+            if section
+                .as_object()
+                .is_some_and(|section_object| !section_object.contains_key("timeRange"))
+            {
+                return Err(format!(
+                    "Invalid project file format: sections[{section_index}].timeRange is required; reanalyze the project to restore section timing."
+                ));
+            }
+        }
+    }
+
+    serde_json::from_value(payload).map_err(|_| "Invalid project file format".to_string())
+}
+
 #[tauri::command]
 fn save_project(payload: Value) -> Result<(), String> {
     let parsed = serde_json::from_value::<RehearsalSongPayload>(payload)
@@ -913,7 +1013,175 @@ fn load_project() -> Result<RehearsalSongPayload, String> {
     }
 
     let content = std::fs::read_to_string(path).map_err(|_| "Failed to read file".to_string())?;
-    serde_json::from_str(&content).map_err(|_| "Invalid project file format".to_string())
+    project_payload_from_content(&content)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use std::time::{SystemTime, UNIX_EPOCH};
+
+    fn unique_test_dir(name: &str) -> PathBuf {
+        let suffix = SystemTime::now()
+            .duration_since(UNIX_EPOCH)
+            .expect("system clock should be after epoch")
+            .as_nanos();
+        std::env::temp_dir().join(format!("bandscope-{name}-{suffix}"))
+    }
+
+    fn shared_contract_payload(time_range: Value) -> Value {
+        json!({
+            "id": "demo-song",
+            "title": "Late Night Set",
+            "sections": [
+                {
+                    "id": "verse-1",
+                    "label": "verse",
+                    "groove": "Straight eighths with a late snare feel",
+                    "timeRange": time_range,
+                    "confidence": {
+                        "level": "medium",
+                        "source": "model",
+                        "notes": "Double-check the pickup into the chorus."
+                    },
+                    "roles": [
+                        {
+                            "id": "bass-guitar",
+                            "name": "Bass Guitar",
+                            "roleType": "instrument",
+                            "harmony": {
+                                "chord": "C#m7",
+                                "functionLabel": "vi pedal anchor",
+                                "source": "model"
+                            },
+                            "cue": {
+                                "kind": "transition",
+                                "value": "Hold through the pickup before the downbeat."
+                            },
+                            "range": {
+                                "lowestNote": "C#2",
+                                "highestNote": "E3"
+                            },
+                            "confidence": {
+                                "level": "medium",
+                                "source": "model",
+                                "notes": "Watch the slide into the turnaround."
+                            },
+                            "rehearsalPriority": "high",
+                            "simplification": "Stay on roots if the chorus entrance gets muddy.",
+                            "setupNote": "Keep the attack short so the verse breathes.",
+                            "manualOverrides": [],
+                            "overlapWarnings": [
+                                "Density warning: competing with Keyboard Left Hand in low register."
+                            ]
+                        }
+                    ],
+                    "partGraph": [
+                        {
+                            "role_id": "bass-guitar",
+                            "is_active": true,
+                            "handoff_to": ["lead-vocal"],
+                            "handoff_from": []
+                        }
+                    ]
+                }
+            ],
+            "exportSummary": {
+                "format": "cue-sheet",
+                "headline": "Start with the verse handoff and low-register overlap.",
+                "focusSections": ["verse-1"]
+            }
+        })
+    }
+
+    #[test]
+    fn rehearsal_song_payload_accepts_shared_section_contract() {
+        let payload = shared_contract_payload(json!({ "start": 10, "end": 30 }));
+
+        let parsed = serde_json::from_value::<RehearsalSongPayload>(payload)
+            .expect("shared rehearsal song contract should deserialize in Tauri");
+
+        assert_eq!(parsed.sections[0].id, "verse-1");
+    }
+
+    #[test]
+    fn rehearsal_song_payload_rejects_reversed_time_range() {
+        let payload = shared_contract_payload(json!({ "start": 30, "end": 10 }));
+
+        assert!(serde_json::from_value::<RehearsalSongPayload>(payload).is_err());
+    }
+
+    #[test]
+    fn project_payload_from_content_rejects_legacy_missing_time_range() {
+        let mut payload = shared_contract_payload(json!({ "start": 10, "end": 30 }));
+        payload["sections"][0]
+            .as_object_mut()
+            .expect("section should be an object")
+            .remove("timeRange");
+        let content = serde_json::to_string(&payload).expect("legacy payload should serialize");
+
+        let error = project_payload_from_content(&content)
+            .expect_err("legacy sections without timing should fail closed");
+
+        assert!(error.contains("timeRange"));
+    }
+
+    #[test]
+    fn youtube_metadata_must_reference_supported_audio_inside_cache_root() {
+        let cache_root = unique_test_dir("youtube-cache");
+        let outside_root = unique_test_dir("youtube-outside");
+        std::fs::create_dir_all(&cache_root).expect("cache root should be created");
+        std::fs::create_dir_all(&outside_root).expect("outside root should be created");
+
+        let inside_file = cache_root.join("downloaded.m4a");
+        let empty_file = cache_root.join("empty.m4a");
+        let unsupported_file = cache_root.join("downloaded.txt");
+        let outside_file = outside_root.join("downloaded.m4a");
+        std::fs::write(&inside_file, b"audio").expect("inside file should be written");
+        std::fs::write(&empty_file, b"").expect("empty file should be written");
+        std::fs::write(&unsupported_file, b"not audio")
+            .expect("unsupported file should be written");
+        std::fs::write(&outside_file, b"audio").expect("outside file should be written");
+
+        let accepted = youtube_source_from_metadata(
+            &json!({ "filepath": inside_file, "title": "Live/Test" }),
+            &cache_root,
+        )
+        .expect("in-cache supported audio should be accepted");
+        assert_eq!(accepted.extension, "m4a");
+        assert_eq!(accepted.file_name, "Live_Test.m4a");
+
+        assert!(youtube_source_from_metadata(
+            &json!({ "filepath": empty_file, "title": "Live" }),
+            &cache_root,
+        )
+        .is_err());
+        assert!(youtube_source_from_metadata(
+            &json!({ "filepath": unsupported_file, "title": "Live" }),
+            &cache_root,
+        )
+        .is_err());
+        assert!(youtube_source_from_metadata(
+            &json!({ "filepath": outside_file, "title": "Live" }),
+            &cache_root,
+        )
+        .is_err());
+
+        #[cfg(unix)]
+        {
+            let symlink_file = cache_root.join("linked.m4a");
+            std::os::unix::fs::symlink(&inside_file, &symlink_file)
+                .expect("symlink should be created");
+            assert!(youtube_source_from_metadata(
+                &json!({ "filepath": symlink_file, "title": "Live" }),
+                &cache_root,
+            )
+            .is_err());
+        }
+
+        let _ = std::fs::remove_dir_all(cache_root);
+        let _ = std::fs::remove_dir_all(outside_root);
+    }
 }
 
 fn main() {
diff --git a/apps/desktop/src/App.test.tsx b/apps/desktop/src/App.test.tsx
index ce12c92..f0819c5 100644
--- a/apps/desktop/src/App.test.tsx
+++ b/apps/desktop/src/App.test.tsx
@@ -6,32 +6,37 @@ const tauriInvoke = vi.fn();
 const mockLoadProject = vi.fn();
 const mockSaveProject = vi.fn();
 
-vi.mock("./lib/analysis", () => ({
-  createDefaultAnalysisRequest: () => ({
-    sourceKind: "demo",
-    sourceLabel: "Late Night Set",
-    roleFocus: ["bass-guitar", "keys-right", "lead-vocal"]
-  }),
-  selectLocalAudioSource: async () => {
-    const response = await tauriInvoke("select_local_audio_source", undefined);
-    if (response?.code) {
-      return { ok: false, error: response };
-    }
+vi.mock("./lib/analysis", async (importActual) => {
+  const actual = await importActual<typeof import("./lib/analysis")>();
 
-    return { ok: true, bootstrap: response };
-  },
-  startAnalysisJob: (request: unknown) => tauriInvoke("start_analysis_job", { request }),
-  getAnalysisJobStatus: (jobId: string) => tauriInvoke("get_analysis_job_status", { jobId }),
-  importYoutubeUrl: async (url: string) => {
-    const response = await tauriInvoke("import_youtube_url", { url });
-    if (response?.code) {
-      return { ok: false, error: response };
-    }
-    return { ok: true, bootstrap: response };
-  },
-  loadProject: () => mockLoadProject(),
-  saveProject: (song: unknown) => mockSaveProject(song)
-}));
+  return {
+    ...actual,
+    createDefaultAnalysisRequest: () => ({
+      sourceKind: "demo",
+      sourceLabel: "Late Night Set",
+      roleFocus: ["bass-guitar", "keys-right", "lead-vocal"]
+    }),
+    selectLocalAudioSource: async () => {
+      const response = await tauriInvoke("select_local_audio_source", undefined);
+      if (response?.code) {
+        return { ok: false, error: response };
+      }
+
+      return { ok: true, bootstrap: response };
+    },
+    startAnalysisJob: (request: unknown) => tauriInvoke("start_analysis_job", { request }),
+    getAnalysisJobStatus: (jobId: string) => tauriInvoke("get_analysis_job_status", { jobId }),
+    importYoutubeUrl: async (url: string) => {
+      const response = await tauriInvoke("import_youtube_url", { url });
+      if (response?.code) {
+        return { ok: false, error: response };
+      }
+      return { ok: true, bootstrap: response };
+    },
+    loadProject: () => mockLoadProject(),
+    saveProject: (song: unknown) => mockSaveProject(song)
+  };
+});
 
 function succeededResult() {
   return {
@@ -46,7 +51,7 @@ function succeededResult() {
       sections: [
         {
           id: "verse-1",
-          label: "Verse 1",
+          label: "verse",
           groove: "Straight eighths with a late snare feel",
           timeRange: { start: 10, end: 30 },
           confidence: {
@@ -112,8 +117,8 @@ function succeededResult() {
       ],
       exportSummary: {
         format: "cue-sheet",
-        headline: "Start with Verse 1 entrances before the chorus lift.",
-        focusSections: ["Verse 1"]
+        headline: "Start with verse entrances before the chorus lift.",
+        focusSections: ["verse"]
       }
     }
   };
@@ -126,6 +131,93 @@ describe("App", () => {
     mockSaveProject.mockReset();
   });
 
+  it("renders the rehearsal cockpit shell before analysis starts", () => {
+    render(<App />);
+
+    expect(screen.getByRole("navigation", { name: /primary rehearsal views/i })).toBeTruthy();
+    expect(screen.getByRole("heading", { name: /Workspace Home/i })).toBeTruthy();
+    expect(screen.getByText(/SYNCED • LOCAL/i)).toBeTruthy();
+    expect(screen.getByText(/Turn a song into a practical rehearsal view\./i)).toBeTruthy();
+    expect(screen.getByRole("button", { name: /^Workspace$/i })).toBeTruthy();
+    expect(screen.getByRole("button", { name: /^Import$/i })).toBeTruthy();
+    expect(screen.getByRole("button", { name: /^Export$/i })).toBeTruthy();
+    expect(screen.getByText(/^Tempo$/i)).toBeTruthy();
+    expect(screen.getByText(/^Key$/i)).toBeTruthy();
+    expect(screen.getByText(/Local-first/i)).toBeTruthy();
+    expect(screen.getByText(/Local project data stays on this device/i)).toBeTruthy();
+    expect(screen.getByText(/YouTube import contacts the source provider/i)).toBeTruthy();
+  });
+
+  it("renders the loaded song as a dark rehearsal command board", async () => {
+    mockLoadProject.mockResolvedValueOnce(succeededResult().result);
+    render(<App />);
+
+    fireEvent.click(screen.getByRole("button", { name: /open project/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/Song Timeline/i)).toBeTruthy();
+    });
+    expect(screen.getByText(/Roles & Harmony/i)).toBeTruthy();
+    expect(screen.getByText(/Stems/i)).toBeTruthy();
+    expect(screen.getByText(/Rehearsal Priorities/i)).toBeTruthy();
+    expect(screen.getByText(/Export Cue Sheet/i)).toBeTruthy();
+  });
+
+  it("renders a rehearsal song structure timeline from real section ranges", async () => {
+    mockLoadProject.mockResolvedValueOnce(succeededResult().result);
+    render(<App />);
+
+    fireEvent.click(screen.getByRole("button", { name: /open project/i }));
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /Song Structure/i })).toBeTruthy();
+    });
+    expect(screen.getByText(/verse · 0:10–0:30/i)).toBeTruthy();
+    expect(screen.getByText(/Rehearsal timeline/i)).toBeTruthy();
+    expect(screen.queryByText(/Mock-board/i)).toBeNull();
+    const timelineRegion = screen.getByRole("region", { name: /scrollable song structure timeline/i });
+    expect(timelineRegion.className).toContain("overflow-x-auto");
+    expect(timelineRegion.getAttribute("tabindex")).toBe("0");
+    expect(screen.queryByLabelText(/decorative waveform overview/i)).toBeNull();
+  });
+
+  it("does not show unavailable analysis metrics as detected facts", async () => {
+    mockLoadProject.mockResolvedValueOnce(succeededResult().result);
+    render(<App />);
+
+    fireEvent.click(screen.getByRole("button", { name: /open project/i }));
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: /Late Night Set/i })).toBeTruthy();
+    });
+
+    expect(screen.queryByText(/128 BPM/i)).toBeNull();
+    expect(screen.queryByText(/E Major/i)).toBeNull();
+    expect(screen.queryByText(/86%/i)).toBeNull();
+    expect(screen.queryByText(/entry, dropout/i)).toBeNull();
+    expect(screen.queryByText(/Preview-ready lanes/i)).toBeNull();
+    expect(screen.getAllByText(/Pending/i).length).toBeGreaterThanOrEqual(2);
+  });
+
+  it("summarizes confidence from the lowest-confidence loaded section", async () => {
+    const loadedProject = succeededResult().result;
+    loadedProject.sections.push({
+      ...loadedProject.sections[0],
+      id: "chorus-1",
+      label: "chorus",
+      confidence: { level: "high", source: "model", notes: "The chorus form is clear." }
+    });
+    mockLoadProject.mockResolvedValueOnce(loadedProject);
+    render(<App />);
+
+    fireEvent.click(screen.getByRole("button", { name: /open project/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/^Medium$/i)).toBeTruthy();
+    });
+    expect(screen.getAllByText(/2 sections/i).length).toBeGreaterThan(0);
+  });
+
   it("selects a local audio source and starts a local-audio analysis job", async () => {
     tauriInvoke
       .mockResolvedValueOnce({
@@ -185,6 +277,7 @@ describe("App", () => {
     await waitFor(() => {
       expect(screen.getByText(/choose a wav, mp3, flac, or m4a file/i)).toBeTruthy();
     });
+    expect(screen.getByRole("alert").textContent).toMatch(/choose a wav, mp3, flac, or m4a file/i);
     expect(screen.queryByText(/analysis failed during execution/i)).toBeNull();
   });
 
@@ -255,6 +348,7 @@ describe("App", () => {
     await waitFor(() => {
       expect(screen.getByText(/queued for analysis/i)).toBeTruthy();
     });
+    expect(screen.getAllByRole("status").some((status) => /queued for analysis/i.test(status.textContent ?? ""))).toBe(true);
     await waitFor(() => {
       expect(screen.getByRole("heading", { name: /Late Night Set/i })).toBeTruthy();
     });
@@ -297,6 +391,7 @@ describe("App", () => {
     await waitFor(() => {
       expect(screen.getByText(/analysis engine is unavailable/i)).toBeTruthy();
     });
+    expect(screen.getByRole("alert").textContent).toMatch(/analysis engine is unavailable/i);
   });
 
   it("falls back to a generic failure message when the engine omits details", async () => {
@@ -548,6 +643,45 @@ describe("App", () => {
     });
   });
 
+  it("rejects non-allowlisted YouTube URL intake before invoking the bridge", async () => {
+    render(<App />);
+    const input = screen.getByPlaceholderText(/YouTube URL.../i);
+    fireEvent.change(input, { target: { value: "https://example.com/watch?v=123" } });
+
+    fireEvent.click(screen.getByRole("button", { name: /Import YouTube/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/Failed to import YouTube URL./i)).toBeTruthy();
+    });
+    expect(tauriInvoke).not.toHaveBeenCalled();
+  });
+
+  it("rejects downgraded YouTube URL intake before invoking the bridge", async () => {
+    render(<App />);
+    const input = screen.getByPlaceholderText(/YouTube URL.../i);
+    fireEvent.change(input, { target: { value: "http://youtube.com/watch?v=123" } });
+
+    fireEvent.click(screen.getByRole("button", { name: /Import YouTube/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/Failed to import YouTube URL./i)).toBeTruthy();
+    });
+    expect(tauriInvoke).not.toHaveBeenCalled();
+  });
+
+  it("rejects duplicate YouTube video parameters even when one is blank", async () => {
+    render(<App />);
+    const input = screen.getByPlaceholderText(/YouTube URL.../i);
+    fireEvent.change(input, { target: { value: "https://youtube.com/watch?v=abc123&v=" } });
+
+    fireEvent.click(screen.getByRole("button", { name: /Import YouTube/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/Failed to import YouTube URL./i)).toBeTruthy();
+    });
+    expect(tauriInvoke).not.toHaveBeenCalled();
+  });
+
 
   it("loads a project and updates the UI", async () => {
     mockLoadProject.mockResolvedValueOnce(succeededResult().result);
diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx
index a51f74d..f783362 100644
--- a/apps/desktop/src/App.tsx
+++ b/apps/desktop/src/App.tsx
@@ -1,30 +1,63 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import {
+  AudioWaveform,
+  CircleHelp,
+  Clock3,
+  CloudOff,
+  FileMusic,
+  FolderOpen,
+  Gauge,
+  Home,
+  KeyRound,
+  ListMusic,
+  Music2,
+  Play,
+  Save,
+  Settings,
+  SlidersHorizontal,
+  Sparkles,
+  Star,
+  Upload,
+  Users,
+  Wand2
+} from "lucide-react";
 import {
   SUPPORTED_AUDIO_FORMATS,
-  type AnalysisJobStatus,
   type AnalysisJobRequest,
+  type AnalysisJobStatus,
   type ProjectBootstrapSummary,
   type RehearsalSong
 } from "@bandscope/shared-types";
 import {
   createDefaultAnalysisRequest,
   getAnalysisJobStatus,
-  selectLocalAudioSource,
   importYoutubeUrl,
-  startAnalysisJob,
+  isSupportedYoutubeUrl,
   loadProject,
-  saveProject
+  saveProject,
+  selectLocalAudioSource,
+  startAnalysisJob
 } from "./lib/analysis";
 import { createTranslator, detectPreferredLocale } from "./i18n";
 import { Workspace } from "./features/workspace/Workspace";
-import { EmptyState, LoadingState, ErrorState } from "./features/workspace/WorkspaceStates";
+import { EmptyState, ErrorState, LoadingState } from "./features/workspace/WorkspaceStates";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Card, CardContent } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
 
 const ANALYSIS_POLL_INTERVAL_MS = 250;
 
+const NAV_ITEMS = [
+  { label: "Workspace", icon: Home, active: true },
+  { label: "Import", icon: Upload, active: false },
+  { label: "Export", icon: Save, active: false },
+  { label: "Sections", icon: ListMusic, active: false },
+  { label: "Roles", icon: Users, active: false },
+  { label: "Stem Lab", icon: AudioWaveform, active: false },
+  { label: "Cues", icon: Sparkles, active: false },
+  { label: "Transpose", icon: SlidersHorizontal, active: false },
+  { label: "Notes", icon: FileMusic, active: false }
+] as const;
+
 /** Documented. */
 function progressMessage(
   t: ReturnType<typeof createTranslator>,
@@ -42,6 +75,71 @@ function progressMessage(
   }
 }
 
+/** Documented. */
+function MetricCard({
+  icon,
+  label,
+  value,
+  detail,
+  accent = "text-cyan-300"
+}: {
+  icon: ReactNode;
+  label: string;
+  value: string;
+  detail: string;
+  accent?: string;
+}) {
+  return (
+    <article className="group relative overflow-hidden rounded-2xl border border-white/10 bg-slate-950/65 p-4 shadow-[0_18px_60px_rgba(0,0,0,0.24)] backdrop-blur-xl transition hover:-translate-y-0.5 hover:border-cyan-300/40">
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(34,211,238,0.16),transparent_35%)] opacity-60 transition group-hover:opacity-100" />
+      <div className="relative flex items-start gap-3">
+        <div className={`rounded-xl bg-white/5 p-2 ${accent}`}>{icon}</div>
+        <div>
+          <p className="text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-slate-400">{label}</p>
+          <p className="mt-1 text-2xl font-semibold tracking-tight text-white">{value}</p>
+          <p className="mt-1 text-sm text-slate-400">{detail}</p>
+        </div>
+      </div>
+    </article>
+  );
+}
+
+/** Documented. */
+function ConfidenceMetric({ song }: { song: RehearsalSong | null }) {
+  const sectionCount = song?.sections.length ?? 0;
+  const confidenceOrder = { high: 3, medium: 2, low: 1 } as const;
+  const lowestConfidence = song?.sections.reduce<RehearsalSong["sections"][number]["confidence"]["level"] | null>(
+    (current, section) => {
+      if (!current || confidenceOrder[section.confidence.level] < confidenceOrder[current]) {
+        return section.confidence.level;
+      }
+      return current;
+    },
+    null
+  );
+  const confidence = lowestConfidence ? `${lowestConfidence[0].toUpperCase()}${lowestConfidence.slice(1)}` : "Ready";
+  const detail = sectionCount > 0 ? `${sectionCount} section${sectionCount === 1 ? "" : "s"}` : "Local analysis";
+
+  return (
+    <MetricCard
+      icon={<Gauge className="size-5" aria-hidden="true" />}
+      label="Confidence"
+      value={confidence}
+      detail={detail}
+      accent="text-emerald-300"
+    />
+  );
+}
+
+/** Documented. */
+function priorityLabel(song: RehearsalSong | null): string {
+  const firstFocus = song?.exportSummary?.focusSections?.[0];
+  if (firstFocus) {
+    return firstFocus;
+  }
+  return song?.sections?.[0]?.label ?? "Pick track";
+}
+
 /** Documented. */
 export function App() {
   const t = useMemo(() => createTranslator(detectPreferredLocale()), []);
@@ -54,7 +152,7 @@ export function App() {
   const [selectionError, setSelectionError] = useState<string | null>(null);
   const [youtubeUrl, setYoutubeUrl] = useState("");
   const [isImporting, setIsImporting] = useState(false);
-  
+
   const analysisInFlight = jobStatus?.state === "queued" || jobStatus?.state === "running";
   const selectedRequest: AnalysisJobRequest = selectedBootstrap
     ? {
@@ -136,14 +234,7 @@ export function App() {
       return;
     }
 
-    let parsedUrl: URL;
-    try {
-      parsedUrl = new URL(normalizedUrl);
-    } catch {
-      setSelectionError(t("youtubeImportFailed"));
-      return;
-    }
-    if (parsedUrl.protocol !== "https:" && parsedUrl.protocol !== "http:") {
+    if (!isSupportedYoutubeUrl(normalizedUrl)) {
       setSelectionError(t("youtubeImportFailed"));
       return;
     }
@@ -214,130 +305,231 @@ export function App() {
   };
 
   return (
-    <div className="min-h-screen bg-zinc-50 text-zinc-950 font-sans selection:bg-zinc-200">
-      <div className="mx-auto max-w-7xl px-6 py-12 lg:px-8">
-        <header className="mb-12 flex flex-col sm:flex-row sm:items-end justify-between gap-6">
-          <div>
-            <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl text-zinc-900 mb-2">{t("appTitle")}</h1>
-            <p className="text-lg text-zinc-500 tracking-tight font-medium max-w-2xl">{t("appSubtitle")}</p>
+    <div className="min-h-screen overflow-x-hidden bg-[#020713] text-slate-100 selection:bg-cyan-300/30">
+      <div className="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_18%_8%,rgba(15,120,255,0.22),transparent_28%),radial-gradient(circle_at_78%_0%,rgba(124,58,237,0.20),transparent_30%),linear-gradient(180deg,#07111f_0%,#020713_55%,#020611_100%)]" />
+      <div className="pointer-events-none fixed inset-0 opacity-[0.06] [background-image:linear-gradient(rgba(255,255,255,.8)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,.8)_1px,transparent_1px)] [background-size:46px_46px]" />
+
+      <div className="relative flex min-h-screen">
+        <aside className="hidden w-64 shrink-0 border-r border-white/10 bg-slate-950/72 px-5 py-5 shadow-[24px_0_80px_rgba(0,0,0,0.28)] backdrop-blur-2xl lg:flex lg:flex-col">
+          <div className="mb-7 flex items-center gap-2" aria-hidden="true">
+            <span className="size-3 rounded-full bg-red-400" />
+            <span className="size-3 rounded-full bg-amber-300" />
+            <span className="size-3 rounded-full bg-emerald-400" />
+          </div>
+
+          <div className="mb-9 flex items-center gap-3">
+            <div className="grid size-11 place-items-center rounded-2xl border border-cyan-300/50 bg-cyan-300/10 shadow-[0_0_28px_rgba(34,211,238,0.35)]">
+              <AudioWaveform className="size-6 text-cyan-300" aria-hidden="true" />
+            </div>
+            <div className="text-2xl font-black tracking-tight">
+              Band<span className="text-cyan-300">Scope</span>
+            </div>
+          </div>
+
+          <nav aria-label="Primary rehearsal views" className="space-y-2">
+            {NAV_ITEMS.map(({ label, icon: Icon, active }) => (
+              <button
+                key={label}
+                type="button"
+                aria-current={active ? "page" : undefined}
+                aria-disabled={active ? undefined : true}
+                disabled={!active}
+                title={active ? undefined : "Coming soon"}
+                className={`flex min-h-11 w-full items-center gap-3 rounded-xl px-3 text-left text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300 ${
+                  active
+                    ? "bg-blue-600/70 text-white shadow-[0_12px_30px_rgba(37,99,235,0.32)]"
+                    : "cursor-not-allowed text-slate-500 opacity-70"
+                }`}
+              >
+                <Icon className="size-5" aria-hidden="true" />
+                {label}
+              </button>
+            ))}
+          </nav>
+
+          <div className="mt-auto space-y-5">
+            <div className="rounded-2xl border border-white/10 bg-white/[0.04] p-4">
+              <div className="flex items-center gap-2 text-sm font-semibold text-slate-200">
+                <CloudOff className="size-4 text-cyan-300" aria-hidden="true" />
+                Local-first
+              </div>
+              <p className="mt-2 text-sm leading-6 text-slate-400">
+                Local project data stays on this device. YouTube import contacts the source provider only when you choose it.
+              </p>
+              <div className="mt-3 h-14 overflow-hidden rounded-xl bg-[linear-gradient(90deg,rgba(34,211,238,.12),rgba(124,58,237,.12))]">
+                <div className="flex h-full items-end gap-0.5 px-2 pb-1" aria-hidden="true">
+                  {Array.from({ length: 34 }).map((_, index) => (
+                    <span
+                      key={index}
+                      className="w-1 rounded-t bg-gradient-to-t from-cyan-400 to-violet-400"
+                      style={{ height: `${14 + ((index * 19) % 38)}px` }}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between text-slate-400">
+              <button type="button" aria-label="Settings coming soon" disabled className="cursor-not-allowed rounded-xl p-2 text-slate-600 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
+                <Settings className="size-5" aria-hidden="true" />
+              </button>
+              <button type="button" aria-label="Help coming soon" disabled className="cursor-not-allowed rounded-xl p-2 text-slate-600 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
+                <CircleHelp className="size-5" aria-hidden="true" />
+              </button>
+            </div>
           </div>
-          <Button 
-            variant="outline" 
-            size="lg"
-            onClick={handleSaveProject} 
-            disabled={!jobResult}
-            className="shadow-sm font-semibold transition-all hover:shadow-md"
-            aria-label="Save Project"
-          >
-            Save Project
-          </Button>
-        </header>
-
-        <Card className="border-zinc-200 shadow-sm mb-12 overflow-hidden bg-white">
-          <CardContent className="p-6 md:p-8">
-            <div className="flex flex-col lg:flex-row gap-8 items-start lg:items-center justify-between">
-              
-              {/* Actions Area */}
-              <div className="flex flex-wrap items-center gap-4 w-full">
-                <Button 
-                  onClick={handleChooseLocalAudio} 
+        </aside>
+
+        <main id="main-content" className="max-h-screen min-w-0 flex-1 overflow-y-auto px-4 py-4 sm:px-6 lg:px-8">
+          <nav aria-label="Compact rehearsal views" className="mb-4 flex gap-2 overflow-x-auto rounded-2xl border border-white/10 bg-slate-950/72 p-2 backdrop-blur-xl lg:hidden">
+            {NAV_ITEMS.map(({ label, icon: Icon, active }) => (
+              <button
+                key={label}
+                type="button"
+                aria-current={active ? "page" : undefined}
+                aria-label={`${label} compact view`}
+                aria-disabled={active ? undefined : true}
+                disabled={!active}
+                title={active ? undefined : "Coming soon"}
+                className={`inline-flex min-h-10 shrink-0 items-center gap-2 rounded-xl px-3 text-sm font-semibold ${
+                  active ? "bg-blue-600/70 text-white" : "cursor-not-allowed text-slate-500 opacity-70"
+                }`}
+              >
+                <Icon className="size-4" aria-hidden="true" />
+                {label}
+              </button>
+            ))}
+          </nav>
+
+          <header className="mb-4 grid gap-3 md:grid-cols-2 xl:grid-cols-5">
+            <MetricCard icon={<Clock3 className="size-5" aria-hidden="true" />} label="Tempo" value="Pending" detail="Awaiting reliable detection" accent="text-sky-300" />
+            <MetricCard icon={<KeyRound className="size-5" aria-hidden="true" />} label="Key" value="Pending" detail="No trusted key yet" accent="text-cyan-300" />
+            <MetricCard icon={<Wand2 className="size-5" aria-hidden="true" />} label="Transpose" value="Pending" detail="Review after key detection" accent="text-blue-300" />
+            <ConfidenceMetric song={jobResult} />
+            <MetricCard icon={<Star className="size-5 fill-amber-300 text-amber-300" aria-hidden="true" />} label="Priority" value={priorityLabel(jobResult)} detail={jobResult?.exportSummary?.headline ?? "Choose or open audio"} accent="text-amber-300" />
+          </header>
+
+          <section aria-label="Source controls" className="mb-4 rounded-3xl border border-white/10 bg-slate-950/72 p-4 shadow-[0_18px_60px_rgba(0,0,0,0.25)] backdrop-blur-xl">
+            <div className="grid gap-4 2xl:grid-cols-[1.4fr_minmax(0,1fr)_auto] 2xl:items-center">
+              <div>
+                <p className="text-xs font-semibold uppercase tracking-[0.26em] text-cyan-300">
+                  {jobResult ? "READY • REHEARSAL" : "SYNCED • LOCAL"}
+                </p>
+                <h1 className="mt-2 text-3xl font-black tracking-tight text-white sm:text-4xl">
+                  {jobResult ? "Rehearsal Console" : "Workspace Home"}
+                </h1>
+                <p className="mt-2 max-w-2xl text-sm leading-6 text-slate-400">
+                  {jobResult?.exportSummary?.headline ?? "Turn a song into a practical rehearsal view."}
+                </p>
+              </div>
+
+              <div className="grid min-w-0 gap-3 sm:grid-cols-[auto_1fr_auto] sm:items-center 2xl:grid-cols-[auto_1fr]">
+                <Button
+                  onClick={handleChooseLocalAudio}
                   disabled={analysisInFlight || isStarting || isImporting}
                   variant="secondary"
-                  className="font-semibold shadow-sm"
+                  className="min-h-11 border border-cyan-300/20 bg-cyan-300/10 font-semibold text-cyan-50 hover:bg-cyan-300/20"
                   aria-label="Choose local audio"
                 >
+                  <Upload className="mr-2 size-4" aria-hidden="true" />
                   {t("chooseLocalAudio")}
                 </Button>
-                
-                <div className="flex flex-1 min-w-[280px] max-w-sm items-center gap-2 relative">
-                  <Input 
-                    type="text" 
-                    placeholder={t("youtubePlaceholder")} 
+
+                <div className="flex min-w-0 items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.04] p-1.5">
+                  <Music2 className="ml-2 size-4 shrink-0 text-rose-300" aria-hidden="true" />
+                  <Input
+                    type="text"
+                    placeholder={t("youtubePlaceholder")}
                     value={youtubeUrl}
                     onChange={(e) => setYoutubeUrl(e.target.value)}
                     disabled={analysisInFlight || isStarting || isImporting}
-                    className="flex-1 bg-zinc-50 focus-visible:ring-zinc-400"
+                    className="h-10 flex-1 border-0 bg-transparent text-slate-100 placeholder:text-slate-500 focus-visible:ring-cyan-300"
                     aria-label="YouTube URL"
                   />
-                  <Button 
-                    onClick={handleImportYoutube} 
+                  <Button
+                    onClick={handleImportYoutube}
                     disabled={!youtubeUrl || analysisInFlight || isStarting || isImporting}
                     variant="outline"
-                    className="font-medium bg-zinc-50 hover:bg-zinc-100"
+                    className="min-h-10 border-white/10 bg-white/5 font-semibold text-slate-100 hover:bg-white/10 hover:text-white"
                     aria-label="Import YouTube"
                   >
                     {isImporting ? t("importingYoutube") : t("importYoutube")}
                   </Button>
                 </div>
+              </div>
 
-                <Separator orientation="vertical" className="hidden lg:block h-10" />
-                
-                <Button 
-                  onClick={handleLoadProject} 
+              <div className="flex flex-wrap justify-start gap-2 2xl:justify-end">
+                <Button
+                  onClick={handleLoadProject}
                   disabled={analysisInFlight || isStarting}
                   variant="outline"
-                  className="font-medium bg-zinc-50 hover:bg-zinc-100"
+                  className="min-h-11 border-white/10 bg-white/5 font-semibold text-slate-100 hover:bg-white/10 hover:text-white"
                   aria-label="Open Project"
                 >
+                  <FolderOpen className="mr-2 size-4" aria-hidden="true" />
                   Open Project
                 </Button>
-
-                <div className="ml-auto">
-                  <Button 
-                    onClick={handleStartAnalysis} 
-                    disabled={analysisInFlight || isStarting || !selectedBootstrap || isImporting}
-                    size="lg"
-                    className="font-bold shadow-md hover:shadow-lg transition-all"
-                    aria-label="Start analysis"
-                  >
-                    {t("startAnalysis")}
-                  </Button>
-                </div>
+                <Button
+                  onClick={jobResult ? handleSaveProject : undefined}
+                  disabled={!jobResult}
+                  variant="outline"
+                  className="min-h-11 border-white/10 bg-white/5 font-semibold text-slate-100 hover:bg-white/10 hover:text-white"
+                  aria-label="Save Project"
+                >
+                  <Save className="mr-2 size-4" aria-hidden="true" />
+                  Save Project
+                </Button>
+                <Button
+                  onClick={handleStartAnalysis}
+                  disabled={analysisInFlight || isStarting || !selectedBootstrap || isImporting}
+                  size="lg"
+                  className="min-h-11 bg-gradient-to-r from-cyan-400 to-violet-500 font-black text-slate-950 shadow-[0_14px_38px_rgba(34,211,238,0.28)] hover:from-cyan-300 hover:to-violet-400"
+                  aria-label="Start analysis"
+                >
+                  <Play className="mr-2 size-4 fill-current" aria-hidden="true" />
+                  {t("startAnalysis")}
+                </Button>
               </div>
             </div>
 
-            {/* Status Information */}
-            <div className="mt-8 pt-6 border-t border-zinc-100 text-sm flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-              <div className="text-zinc-500 font-medium">
-                <span className="text-zinc-400 uppercase tracking-wider text-xs font-bold mr-2">Formats</span>
+            <div className="mt-4 flex flex-col gap-3 border-t border-white/10 pt-4 text-sm text-slate-400 lg:flex-row lg:items-center lg:justify-between">
+              <div>
+                <span className="mr-2 text-xs font-bold uppercase tracking-[0.22em] text-slate-400">Formats</span>
                 {SUPPORTED_AUDIO_FORMATS.join(", ")}
               </div>
-              
-              <div className="flex flex-col sm:flex-row sm:items-center gap-x-6 gap-y-2">
+
+              <div className="flex flex-wrap items-center gap-3">
                 {selectedBootstrap && (
-                  <div className="flex items-center gap-2">
-                    <span className="inline-block w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]"></span>
-                    <span className="font-semibold text-zinc-700 truncate max-w-[200px]" title={selectedBootstrap.source.fileName}>
-                      {selectedBootstrap.source.fileName}
-                    </span>
+                  <div className="rounded-full border border-emerald-300/20 bg-emerald-300/10 px-3 py-1 font-semibold text-emerald-200" title={selectedBootstrap.source.fileName}>
+                    {selectedBootstrap.source.fileName}
                   </div>
                 )}
-                
+
                 {jobStatus && (
-                  <div className="flex items-center text-zinc-900 font-semibold bg-zinc-100 px-3 py-1 rounded-md">
-                    {jobStatus.state === 'running' && (
-                      <span className="inline-block w-4 h-4 border-2 border-zinc-300 border-t-zinc-900 rounded-full animate-spin mr-2"></span>
-                    )}
+                  <div
+                    className="inline-flex items-center rounded-full border border-cyan-300/20 bg-cyan-300/10 px-3 py-1 font-semibold text-cyan-100"
+                    role="status"
+                    aria-live="polite"
+                    aria-atomic="true"
+                  >
+                    {jobStatus.state === "running" && <span className="mr-2 inline-block size-4 animate-spin rounded-full border-2 border-cyan-100/30 border-t-cyan-200" />}
                     {progressMessage(t, jobStatus.state)}
                   </div>
                 )}
-                
+
                 {selectionError && (
-                  <div className="text-rose-600 font-medium bg-rose-50 px-3 py-1 rounded-md border border-rose-100 flex items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-2" viewBox="0 0 20 20" fill="currentColor">
-                      <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
-                    </svg>
+                  <div className="rounded-full border border-rose-300/25 bg-rose-400/10 px-3 py-1 font-semibold text-rose-100" role="alert" aria-live="assertive" aria-atomic="true">
                     {selectionError}
                   </div>
                 )}
               </div>
             </div>
-          </CardContent>
-        </Card>
+          </section>
 
-        <section className="animate-in fade-in duration-500 ease-out fill-mode-both">
-          {renderWorkspaceState()}
-        </section>
+          <section className="animate-in fade-in duration-500 ease-out fill-mode-both">
+            {renderWorkspaceState()}
+          </section>
+        </main>
       </div>
     </div>
   );
diff --git a/apps/desktop/src/features/workspace/RoleSwitcher.tsx b/apps/desktop/src/features/workspace/RoleSwitcher.tsx
index cd29799..30a2189 100644
--- a/apps/desktop/src/features/workspace/RoleSwitcher.tsx
+++ b/apps/desktop/src/features/workspace/RoleSwitcher.tsx
@@ -13,9 +13,9 @@ export function RoleSwitcher({ roles, activeRole, onRoleChange }: RoleSwitcherPr
   const t = createTranslator(detectPreferredLocale());
 
   return (
-    <div className="flex flex-col sm:flex-row sm:items-center gap-4 py-2">
-      <div className="flex items-center text-sm font-semibold text-zinc-700 whitespace-nowrap">
-        <Users className="w-4 h-4 mr-2" />
+    <div className="flex flex-col gap-4 py-2 sm:flex-row sm:items-center">
+      <div className="flex whitespace-nowrap text-sm font-semibold text-slate-200">
+        <Users className="mr-2 size-4 text-cyan-300" />
         {t("roleSwitcherTitle")}
       </div>
       <Tabs 
@@ -23,10 +23,10 @@ export function RoleSwitcher({ roles, activeRole, onRoleChange }: RoleSwitcherPr
         onValueChange={(val) => onRoleChange(val === "all" ? null : val)}
         className="w-full sm:w-auto"
       >
-        <TabsList className="h-10 p-1 flex-wrap h-auto sm:h-10 justify-start w-full sm:w-auto bg-zinc-200/50">
+        <TabsList className="h-auto w-full flex-wrap justify-start border border-white/10 bg-white/[0.05] p-1 sm:h-10 sm:w-auto">
           <TabsTrigger 
             value="all" 
-            className="rounded-md px-4 data-[state=active]:bg-white data-[state=active]:text-zinc-900 data-[state=active]:shadow-sm"
+            className="rounded-md px-4 text-slate-300 data-[state=active]:bg-cyan-300 data-[state=active]:text-slate-950 data-[state=active]:shadow-[0_8px_24px_rgba(34,211,238,0.24)]"
           >
             {t("allRoles")}
           </TabsTrigger>
@@ -34,7 +34,7 @@ export function RoleSwitcher({ roles, activeRole, onRoleChange }: RoleSwitcherPr
             <TabsTrigger
               key={role.id}
               value={role.id}
-              className="rounded-md px-4 data-[state=active]:bg-white data-[state=active]:text-zinc-900 data-[state=active]:shadow-sm"
+              className="rounded-md px-4 text-slate-300 data-[state=active]:bg-cyan-300 data-[state=active]:text-slate-950 data-[state=active]:shadow-[0_8px_24px_rgba(34,211,238,0.24)]"
             >
               {role.name}
             </TabsTrigger>
diff --git a/apps/desktop/src/features/workspace/SectionRoadmap.tsx b/apps/desktop/src/features/workspace/SectionRoadmap.tsx
index 1cd4a25..f454879 100644
--- a/apps/desktop/src/features/workspace/SectionRoadmap.tsx
+++ b/apps/desktop/src/features/workspace/SectionRoadmap.tsx
@@ -46,42 +46,43 @@ export function SectionRoadmap({ song, activeRole, onSongUpdate }: SectionRoadma
 
   /** Documented. */
   const getPriorityColor = (priority: string) => {
-    if (priority === "high") return "border-rose-500 bg-rose-50/50";
-    if (priority === "medium") return "border-amber-500 bg-amber-50/50";
-    return "border-emerald-500 bg-emerald-50/50";
+    if (priority === "high") return "border-rose-400 bg-rose-400/[0.08] shadow-[0_0_30px_rgba(251,113,133,0.10)]";
+    if (priority === "medium") return "border-amber-300 bg-amber-300/[0.08] shadow-[0_0_30px_rgba(252,211,77,0.08)]";
+    return "border-emerald-300 bg-emerald-300/[0.08] shadow-[0_0_30px_rgba(110,231,183,0.08)]";
   };
 
   /** Documented. */
   const getPriorityIcon = (priority: string) => {
-    if (priority === "high") return <AlertCircle className="w-4 h-4 text-rose-500" />;
-    if (priority === "medium") return <Info className="w-4 h-4 text-amber-500" />;
-    return <CheckCircle2 className="w-4 h-4 text-emerald-500" />;
+    if (priority === "high") return <AlertCircle className="size-4 text-rose-300" aria-hidden="true" />;
+    if (priority === "medium") return <Info className="size-4 text-amber-200" aria-hidden="true" />;
+    return <CheckCircle2 className="size-4 text-emerald-200" aria-hidden="true" />;
   };
 
   return (
-    <div className="mt-8 space-y-4">
+    <div className="mt-6 space-y-4">
       <div className="flex items-center justify-between">
-        <h2 className="text-xl font-bold tracking-tight text-zinc-900 flex items-center">
-          <Music2 className="w-5 h-5 mr-2 text-zinc-500" />
+        <h2 className="flex items-center text-xl font-black tracking-tight text-white">
+          <Music2 className="mr-2 size-5 text-cyan-300" aria-hidden="true" />
           {t("sectionRoadmapTitle")}
         </h2>
+        <span className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Scroll for more sections →</span>
       </div>
       
-      <div className="flex overflow-x-auto pb-6 pt-2 gap-6 snap-x snap-mandatory hide-scrollbar">
+      <div className="hide-scrollbar flex snap-x snap-mandatory gap-6 overflow-x-auto pb-6 pt-2">
         {song.sections.map((section) => (
           <Card
             key={section.id}
-            className={`flex-none w-80 shrink-0 snap-start shadow-md hover:shadow-lg transition-shadow duration-300 ${
-              section.confidence.level === "low" ? "border-rose-200 bg-rose-50/20" : "border-zinc-200 bg-white"
+            className={`w-80 flex-none shrink-0 snap-start overflow-hidden shadow-[0_18px_60px_rgba(0,0,0,0.22)] transition duration-300 hover:-translate-y-1 hover:shadow-[0_24px_80px_rgba(0,0,0,0.32)] ${
+              section.confidence.level === "low" ? "border-rose-300/30 bg-rose-950/30" : "border-white/10 bg-slate-950/80"
             }`}
           >
-            <CardHeader className="p-5 pb-4 border-b border-zinc-100 bg-zinc-50/50">
-              <div className="flex justify-between items-center mb-2">
-                <h3 className="font-bold text-lg text-zinc-800 tracking-tight">{section.label}</h3>
+            <CardHeader className="border-b border-white/10 bg-white/[0.04] p-5 pb-4">
+              <div className="mb-2 flex items-center justify-between">
+                <h3 className="text-lg font-black tracking-tight text-white">{section.label}</h3>
                 <ConfidenceBadge level={section.confidence.level} />
               </div>
-              <div className="text-sm font-medium text-zinc-500 flex items-center">
-                <span className="text-zinc-400 mr-2 uppercase text-[0.65rem] tracking-wider font-bold">Groove</span>
+              <div className="flex items-center text-sm font-medium text-slate-300">
+                <span className="mr-2 text-[0.65rem] font-bold uppercase tracking-wider text-slate-400">Groove</span>
                 {section.groove}
               </div>
             </CardHeader>
@@ -92,37 +93,38 @@ export function SectionRoadmap({ song, activeRole, onSongUpdate }: SectionRoadma
                 .map(role => (
                   <div 
                     key={role.id} 
-                    className={`rounded-lg border-l-4 p-4 shadow-sm transition-all hover:translate-x-1 ${getPriorityColor(role.rehearsalPriority)}`}
+                    className={`rounded-xl border-l-4 p-4 transition-all hover:translate-x-1 ${getPriorityColor(role.rehearsalPriority)}`}
                   >
-                    <div className="flex justify-between items-start mb-3">
+                    <div className="mb-3 flex items-start justify-between">
                       <div className="flex flex-col gap-1">
-                        <span className="font-bold text-sm text-zinc-800">
+                        <span className="text-sm font-bold text-slate-100">
                           {role.name}
                         </span>
                         {role.confidence.level === "low" && (
-                          <Badge variant="outline" className="text-[0.65rem] text-rose-600 border-rose-200 bg-rose-50 font-semibold px-1.5 py-0">
+                          <Badge variant="outline" className="border-rose-300/30 bg-rose-400/10 px-1.5 py-0 text-[0.65rem] font-semibold text-rose-100">
                             {t("confidenceLevelLow")}
                           </Badge>
                         )}
                       </div>
-                      <div title={`Priority: ${role.rehearsalPriority}`} className="bg-white rounded-full p-1 shadow-sm">
+                      <div title={`Priority: ${role.rehearsalPriority}`} className="rounded-full border border-white/10 bg-white/10 p-1 shadow-sm">
                         {getPriorityIcon(role.rehearsalPriority)}
                       </div>
                     </div>
-                    
+
                     <div className="space-y-3">
                       <div className="flex items-center gap-2">
-                        <span className="text-[0.7rem] uppercase tracking-wider font-bold text-zinc-400">Chord</span>
+                        <span className="text-[0.7rem] font-bold uppercase tracking-wider text-slate-400">Chord</span>
                         <button
                           type="button"
-                          className={`text-lg font-black tracking-tight rounded px-2 py-0.5 -ml-2 transition-colors ${
-                            onSongUpdate 
-                              ? "hover:bg-zinc-200 cursor-pointer" 
+                          aria-label={`Edit chord for ${role.name} in ${section.label}, current ${role.harmony.chord}`}
+                          className={`-ml-2 rounded px-2 py-0.5 text-lg font-black tracking-tight transition-colors ${
+                            onSongUpdate
+                              ? "cursor-pointer hover:bg-white/10"
                               : "cursor-default"
                           } ${
-                            role.harmony.source === "user" 
-                              ? "text-indigo-600 bg-indigo-50" 
-                              : "text-zinc-800"
+                            role.harmony.source === "user"
+                              ? "bg-indigo-300/15 text-indigo-200"
+                              : "text-cyan-100"
                           }`}
                           onClick={() => handleChordEdit(section.id, role)}
                           onKeyDown={(e) => {
@@ -137,39 +139,39 @@ export function SectionRoadmap({ song, activeRole, onSongUpdate }: SectionRoadma
                           {role.harmony.chord}
                         </button>
                         {role.harmony.source === "user" && (
-                          <Badge variant="secondary" className="text-[0.6rem] h-4 px-1 bg-indigo-100 text-indigo-700 hover:bg-indigo-100">
+                          <Badge variant="secondary" className="h-4 bg-indigo-300/20 px-1 text-[0.6rem] text-indigo-100 hover:bg-indigo-300/20">
                             User
                           </Badge>
                         )}
                       </div>
 
-                      <Separator className="bg-zinc-200/60" />
+                      <Separator className="bg-white/10" />
 
                       <div className="space-y-2">
-                        <div className="text-sm font-medium text-zinc-700 leading-snug">
-                          <span className="text-[0.65rem] uppercase tracking-wider font-bold text-zinc-400 block mb-0.5">Cue</span>
+                        <div className="text-sm font-medium leading-snug text-slate-200">
+                          <span className="mb-0.5 block text-[0.65rem] font-bold uppercase tracking-wider text-slate-400">Cue</span>
                           {role.cue.value}
                         </div>
                         
                         {role.setupNote && (
-                          <div className="text-xs font-medium text-amber-700 bg-amber-50/50 p-2 rounded-md border border-amber-100 flex items-start gap-2">
-                            <Lightbulb className="w-3.5 h-3.5 mt-0.5 shrink-0" />
+                          <div className="flex items-start gap-2 rounded-md border border-amber-300/20 bg-amber-300/[0.08] p-2 text-xs font-medium text-amber-100">
+                            <Lightbulb className="mt-0.5 size-3.5 shrink-0" />
                             <span className="leading-snug">{role.setupNote}</span>
                           </div>
                         )}
                         
                         {role.simplification && (
-                          <div className="text-xs font-medium text-indigo-700 bg-indigo-50/50 p-2 rounded-md border border-indigo-100 flex items-start gap-2">
-                            <Wand2 className="w-3.5 h-3.5 mt-0.5 shrink-0" />
+                          <div className="flex items-start gap-2 rounded-md border border-indigo-300/20 bg-indigo-300/[0.08] p-2 text-xs font-medium text-indigo-100">
+                            <Wand2 className="mt-0.5 size-3.5 shrink-0" />
                             <span className="leading-snug">{role.simplification}</span>
                           </div>
                         )}
                         
                         {role.overlapWarnings.length > 0 && (
-                          <div className="space-y-1.5 mt-2">
+                          <div className="mt-2 space-y-1.5">
                             {role.overlapWarnings.map((warning, wIdx) => (
-                              <div key={wIdx} className="text-xs font-medium text-rose-700 bg-rose-50 p-2 rounded-md border border-rose-100 flex items-start gap-2">
-                                <AlertCircle className="w-3.5 h-3.5 mt-0.5 shrink-0" />
+                              <div key={wIdx} className="flex items-start gap-2 rounded-md border border-rose-300/20 bg-rose-300/[0.08] p-2 text-xs font-medium text-rose-100">
+                                <AlertCircle className="mt-0.5 size-3.5 shrink-0" />
                                 <span className="leading-snug">{warning}</span>
                               </div>
                             ))}
diff --git a/apps/desktop/src/features/workspace/Workspace.tsx b/apps/desktop/src/features/workspace/Workspace.tsx
index 9f4d4e1..93484e3 100644
--- a/apps/desktop/src/features/workspace/Workspace.tsx
+++ b/apps/desktop/src/features/workspace/Workspace.tsx
@@ -12,6 +12,58 @@ interface WorkspaceProps {
   onSongUpdate?: (song: RehearsalSong) => void;
 }
 
+/** Documented. */
+function formatTimelineTime(totalSeconds: number): string {
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = Math.floor(totalSeconds % 60)
+    .toString()
+    .padStart(2, "0");
+  return `${minutes}:${seconds}`;
+}
+
+/** Documented. */
+function SongStructure({ sections }: { sections: RehearsalSong["sections"] }) {
+  return (
+    <section className="rounded-3xl border border-cyan-300/20 bg-slate-950/72 p-4 shadow-[0_20px_80px_rgba(0,0,0,0.24)]">
+      <div className="mb-3 flex items-center justify-between gap-3">
+        <h3 className="text-sm font-black uppercase tracking-[0.24em] text-slate-200">Song Structure</h3>
+        <span className="text-xs font-semibold uppercase tracking-[0.18em] text-cyan-300">Rehearsal timeline</span>
+      </div>
+
+      <div
+        role="region"
+        tabIndex={0}
+        className="overflow-x-auto rounded-2xl border border-white/10 bg-[linear-gradient(180deg,rgba(8,18,35,0.96),rgba(2,6,23,0.98))]"
+        aria-label="Scrollable song structure timeline"
+      >
+        <div className="grid min-w-[720px]" style={{ gridTemplateColumns: `repeat(${sections.length}, minmax(8rem, 1fr))` }}>
+          {sections.map((section) => (
+            <div key={section.id} className="border-r border-white/10 bg-cyan-300/[0.05] px-3 py-3 last:border-r-0">
+              <p className="text-sm font-black text-white">
+                {section.label} · {formatTimelineTime(section.timeRange.start)}–{formatTimelineTime(section.timeRange.end)}
+              </p>
+              <p className="mt-1 text-xs font-medium text-slate-400">{section.groove}</p>
+            </div>
+          ))}
+        </div>
+
+        <div className="relative min-w-[720px] border-t border-white/10 px-3 py-6" aria-hidden="true">
+          <div className="flex h-24 items-center gap-1 overflow-hidden">
+            {Array.from({ length: 84 }).map((_, index) => (
+              <span
+                key={index}
+                className="w-1 flex-none rounded-full bg-gradient-to-t from-cyan-500 via-sky-400 to-violet-400 opacity-85"
+                style={{ height: `${18 + ((index * 23) % 62)}px` }}
+              />
+            ))}
+          </div>
+          <div className="absolute inset-x-3 top-1/2 h-px bg-cyan-200/20" />
+        </div>
+      </div>
+    </section>
+  );
+}
+
 /** Documented. */
 export function Workspace({ song, onSongUpdate }: WorkspaceProps) {
   const [activeRole, setActiveRole] = useState<string | null>(null);
@@ -58,12 +110,14 @@ export function Workspace({ song, onSongUpdate }: WorkspaceProps) {
   };
 
   return (
-    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 ease-out fill-mode-both">
-      <Card className="border-zinc-200 shadow-sm bg-white overflow-hidden">
-        <CardHeader className="bg-zinc-50/50 border-b border-zinc-100 flex flex-col sm:flex-row sm:items-start justify-between gap-4 pb-6">
+    <div className="animate-in space-y-6 fade-in slide-in-from-bottom-4 duration-700 ease-out fill-mode-both">
+      <Card className="overflow-hidden border-white/10 bg-slate-950/78 text-slate-100 shadow-[0_24px_90px_rgba(0,0,0,0.34)] backdrop-blur-2xl">
+        <CardHeader className="border-b border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(34,211,238,0.16),transparent_32%),linear-gradient(135deg,rgba(15,23,42,0.92),rgba(2,6,23,0.96))] p-5 pb-6 md:p-7">
+          <div className="flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
           <div className="space-y-1.5">
-            <h2 className="text-3xl font-bold tracking-tight text-zinc-900">{song.title}</h2>
-            <CardDescription className="text-base font-medium text-zinc-500">
+              <p className="text-xs font-black uppercase tracking-[0.3em] text-cyan-300">Tonight&apos;s rehearsal map</p>
+              <h2 className="text-3xl font-black tracking-tight text-white md:text-4xl">{song.title}</h2>
+              <CardDescription className="text-base font-medium text-slate-300">
               {song.exportSummary?.headline || "Rehearsal Workspace"}
             </CardDescription>
           </div>
@@ -72,35 +126,67 @@ export function Workspace({ song, onSongUpdate }: WorkspaceProps) {
               variant="outline" 
               size="sm"
               onClick={handleExportCueSheet}
-              className="bg-white hover:bg-zinc-50 shadow-sm"
+                className="min-h-10 border-cyan-300/30 bg-cyan-300/10 font-semibold text-cyan-50 shadow-[0_10px_30px_rgba(34,211,238,0.16)] hover:bg-cyan-300/20 hover:text-white"
             >
-              <Download className="w-4 h-4 mr-2 text-zinc-500" />
+                <Download className="mr-2 size-4 text-cyan-200" />
               Export Cue Sheet (CSV)
             </Button>
             <Button 
               variant="outline" 
               size="sm"
               onClick={handleExportChart}
-              className="bg-white hover:bg-zinc-50 shadow-sm"
+                className="min-h-10 border-white/10 bg-white/5 font-semibold text-slate-100 shadow-sm hover:bg-white/10 hover:text-white"
             >
-              <Download className="w-4 h-4 mr-2 text-zinc-500" />
+                <Download className="mr-2 size-4 text-slate-300" />
               Export Chart (JSON)
             </Button>
           </div>
+          </div>
         </CardHeader>
         
-        <CardContent className="p-6 md:p-8 space-y-8 bg-zinc-50/30">
-          <RoleSwitcher 
-            roles={allRoles} 
-            activeRole={activeRole} 
-            onRoleChange={setActiveRole} 
-          />
+        <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">
+          <div className="grid gap-4 lg:grid-cols-4">
+            <section className="rounded-2xl border border-cyan-300/20 bg-cyan-300/[0.06] p-4 lg:col-span-2">
+              <p className="text-xs font-black uppercase tracking-[0.24em] text-cyan-300">Song Timeline</p>
+              <p className="mt-2 text-sm leading-6 text-slate-300">
+                {song.sections.length} section{song.sections.length === 1 ? "" : "s"} mapped with groove, role cues, and chord confidence notes.
+              </p>
+            </section>
+
+            <section className="rounded-2xl border border-violet-300/20 bg-violet-300/[0.06] p-4">
+              <p className="text-xs font-black uppercase tracking-[0.24em] text-violet-200">Stems</p>
+              <p className="mt-2 text-sm leading-6 text-slate-300">Stem lanes will appear when separation results are available.</p>
+            </section>
+
+            <section className="rounded-2xl border border-amber-300/20 bg-amber-300/[0.07] p-4">
+              <p className="text-xs font-black uppercase tracking-[0.24em] text-amber-200">Rehearsal Priorities</p>
+              <p className="mt-2 text-sm leading-6 text-slate-300">
+                Focus: {song.exportSummary?.focusSections?.join(", ") || song.sections[0]?.label || "first pass"}.
+              </p>
+            </section>
+          </div>
+
+          <SongStructure sections={song.sections} />
+
+          <section className="rounded-2xl border border-white/10 bg-white/[0.04] p-4">
+            <div className="mb-4 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+              <div>
+                <p className="text-xs font-black uppercase tracking-[0.24em] text-slate-300">Roles & Harmony</p>
+                <p className="mt-1 text-sm text-slate-400">Filter the board by player or vocal role without losing the full form context.</p>
+              </div>
+              <RoleSwitcher
+                roles={allRoles}
+                activeRole={activeRole}
+                onRoleChange={setActiveRole}
+              />
+            </div>
 
-          <SectionRoadmap 
-            song={song} 
-            activeRole={activeRole} 
+          <SectionRoadmap
+            song={song}
+            activeRole={activeRole}
             onSongUpdate={onSongUpdate}
           />
+          </section>
         </CardContent>
       </Card>
     </div>
diff --git a/apps/desktop/src/features/workspace/WorkspaceStates.tsx b/apps/desktop/src/features/workspace/WorkspaceStates.tsx
index f96375b..4afad24 100644
--- a/apps/desktop/src/features/workspace/WorkspaceStates.tsx
+++ b/apps/desktop/src/features/workspace/WorkspaceStates.tsx
@@ -6,13 +6,13 @@ import { Loader2, Music, AlertCircle } from "lucide-react";
 export function EmptyState() {
   const t = createTranslator(detectPreferredLocale());
   return (
-    <Card className="border-dashed border-2 bg-transparent shadow-none">
+    <Card className="border-2 border-dashed border-cyan-300/20 bg-slate-950/50 shadow-[0_18px_70px_rgba(0,0,0,0.22)] backdrop-blur-xl">
       <CardContent className="flex flex-col items-center justify-center py-24 text-center">
-        <div className="rounded-full bg-zinc-100 p-6 mb-6 text-zinc-400 border border-zinc-200 shadow-sm">
-          <Music className="w-10 h-10" />
+        <div className="mb-6 rounded-full border border-cyan-300/30 bg-cyan-300/10 p-6 text-cyan-200 shadow-[0_0_38px_rgba(34,211,238,0.18)]">
+          <Music className="size-10" aria-hidden="true" />
         </div>
-        <h3 className="text-xl font-semibold text-zinc-900 mb-2">Ready to Analyze</h3>
-        <p className="text-zinc-500 max-w-sm">{t("workspaceEmptyState")}</p>
+        <h3 className="mb-2 text-xl font-black text-white">Ready to Analyze</h3>
+        <p className="max-w-sm text-slate-400">{t("workspaceEmptyState")}</p>
       </CardContent>
     </Card>
   );
@@ -22,11 +22,17 @@ export function EmptyState() {
 export function LoadingState() {
   const t = createTranslator(detectPreferredLocale());
   return (
-    <Card className="border-zinc-200 bg-white">
+    <Card
+      className="border-cyan-300/20 bg-slate-950/75 shadow-[0_18px_70px_rgba(0,0,0,0.25)] backdrop-blur-xl"
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+      aria-busy="true"
+    >
       <CardContent className="flex flex-col items-center justify-center py-24 text-center">
-        <Loader2 className="w-12 h-12 animate-spin text-zinc-400 mb-6" />
-        <h3 className="text-xl font-semibold text-zinc-900 mb-2">Analyzing Audio</h3>
-        <p className="text-zinc-500 max-w-sm animate-pulse">{t("workspaceLoadingState")}</p>
+        <Loader2 className="mb-6 size-12 animate-spin text-cyan-300" aria-hidden="true" />
+        <h3 className="mb-2 text-xl font-black text-white">Analyzing Audio</h3>
+        <p className="max-w-sm animate-pulse text-slate-400">{t("workspaceLoadingState")}</p>
       </CardContent>
     </Card>
   );
@@ -36,13 +42,13 @@ export function LoadingState() {
 export function ErrorState({ error }: { error?: string }) {
   const t = createTranslator(detectPreferredLocale());
   return (
-    <Card className="border-rose-200 bg-rose-50 shadow-sm">
+    <Card className="border-rose-300/30 bg-rose-950/40 shadow-[0_18px_70px_rgba(0,0,0,0.25)] backdrop-blur-xl" role="alert" aria-live="assertive" aria-atomic="true">
       <CardContent className="flex flex-col items-center justify-center py-20 text-center">
-        <div className="rounded-full bg-rose-100 p-4 mb-4 text-rose-600 shadow-sm border border-rose-200">
-          <AlertCircle className="w-8 h-8" />
+        <div className="mb-4 rounded-full border border-rose-300/30 bg-rose-300/10 p-4 text-rose-200 shadow-sm">
+          <AlertCircle className="size-8" aria-hidden="true" />
         </div>
-        <h3 className="text-lg font-semibold text-rose-900 mb-2">{t("workspaceErrorState")}</h3>
-        {error && <p className="text-rose-700 bg-rose-100/50 px-4 py-2 rounded-md font-medium text-sm mt-2">{error}</p>}
+        <h3 className="mb-2 text-lg font-black text-rose-100">{t("workspaceErrorState")}</h3>
+        {error && <p className="mt-2 rounded-md bg-rose-300/10 px-4 py-2 text-sm font-medium text-rose-100">{error}</p>}
       </CardContent>
     </Card>
   );
diff --git a/apps/desktop/src/lib/analysis.test.ts b/apps/desktop/src/lib/analysis.test.ts
index 92849c6..5d5a0b2 100644
--- a/apps/desktop/src/lib/analysis.test.ts
+++ b/apps/desktop/src/lib/analysis.test.ts
@@ -77,4 +77,34 @@ describe("analysis bridge", () => {
     });
     expect(selection.ok).toBe(true);
   });
+
+  it("rejects unsupported YouTube URLs before crossing the Tauri bridge", async () => {
+    tauriWindow.__TAURI_INVOKE__ = vi.fn();
+
+    const selection = await importYoutubeUrl("http://youtube.com/watch?v=4ozX4yFUC34");
+
+    expect(tauriWindow.__TAURI_INVOKE__).not.toHaveBeenCalled();
+    expect(selection).toEqual({
+      ok: false,
+      error: {
+        code: "invalid_request",
+        message: "Only standard YouTube URLs are supported."
+      }
+    });
+  });
+
+  it("rejects duplicate YouTube video identifiers before crossing the Tauri bridge", async () => {
+    tauriWindow.__TAURI_INVOKE__ = vi.fn();
+
+    const selection = await importYoutubeUrl("https://youtube.com/watch?v=4ozX4yFUC34&v=");
+
+    expect(tauriWindow.__TAURI_INVOKE__).not.toHaveBeenCalled();
+    expect(selection).toEqual({
+      ok: false,
+      error: {
+        code: "invalid_request",
+        message: "Only standard YouTube URLs are supported."
+      }
+    });
+  });
 });
diff --git a/apps/desktop/src/lib/analysis.ts b/apps/desktop/src/lib/analysis.ts
index fe55631..8b0b16f 100644
--- a/apps/desktop/src/lib/analysis.ts
+++ b/apps/desktop/src/lib/analysis.ts
@@ -62,7 +62,7 @@ function getInvoke(): TauriInvoke | null {
 }
 
 /** Documented. */
-function isSupportedYoutubeUrl(rawUrl: unknown): rawUrl is string {
+export function isSupportedYoutubeUrl(rawUrl: unknown): rawUrl is string {
   if (typeof rawUrl !== "string") {
     return false;
   }
@@ -85,8 +85,8 @@ function isSupportedYoutubeUrl(rawUrl: unknown): rawUrl is string {
   }
 
   if (host === "youtube.com" || host.endsWith(".youtube.com")) {
-    const videoIds = parsedUrl.searchParams.getAll("v").filter((value) => value.trim().length > 0);
-    return parsedUrl.pathname === "/watch" && videoIds.length === 1;
+    const videoIds = parsedUrl.searchParams.getAll("v");
+    return parsedUrl.pathname === "/watch" && videoIds.length === 1 && videoIds[0]!.trim().length > 0;
   }
 
   return false;
@@ -243,6 +243,16 @@ export async function getAnalysisJobStatus(jobId: string): Promise<AnalysisJobSt
 
 /** Documented. */
 export async function importYoutubeUrl(url: string): Promise<LocalAudioSelectionResult> {
+  if (!isSupportedYoutubeUrl(url)) {
+    return {
+      ok: false,
+      error: {
+        code: "invalid_request",
+        message: "Only standard YouTube URLs are supported."
+      }
+    };
+  }
+
   try {
     const response = await invokeAnalysis("import_youtube_url", { url });
     return {
diff --git a/packages/shared-types/src/index.ts b/packages/shared-types/src/index.ts
index cf5132a..8db31f8 100644
--- a/packages/shared-types/src/index.ts
+++ b/packages/shared-types/src/index.ts
@@ -13,6 +13,8 @@ const SECTION_FORM_LABELS = [
   "stop",
   "handoff"
 ] as const;
+export /** Documented. */
+const MAX_SECTION_TIME_SECONDS = 4_294_967_295;
 
 /** Documented. */
 export type SectionFormLabel = (typeof SECTION_FORM_LABELS)[number];
@@ -94,11 +96,18 @@ export type PartGraphNode = {
   handoff_from: string[];
 };
 
+/** Documented. */
+export type SectionTimeRange = {
+  start: number;
+  end: number;
+};
+
 /** Documented. */
 export type RehearsalSection = {
   id: string;
   label: SectionFormLabel;
   groove: string;
+  timeRange: SectionTimeRange;
   confidence: ConfidenceMarker;
   roles: RehearsalRole[];
   partGraph: PartGraphNode[];
@@ -235,6 +244,10 @@ const demoRehearsalSongSeed: RehearsalSong = {
       id: "verse-1",
       label: "verse",
       groove: "Straight eighths with a late snare feel",
+      timeRange: {
+        start: 10,
+        end: 30
+      },
       confidence: {
         level: "medium",
         source: "model",
@@ -884,12 +897,31 @@ function validatePartGraphNode(value: unknown, path: string): string | null {
   return null;
 }
 
+/** Documented. */
+function validateSectionTimeRange(value: unknown, path: string): string | null {
+  if (!isRecord(value)) {
+    return invalidField(path);
+  }
+  const extraKey = unexpectedKey(value, ["start", "end"], path);
+  if (extraKey) {
+    return extraKey;
+  }
+  if (typeof value.start !== "number" || !Number.isFinite(value.start) || !Number.isInteger(value.start) || value.start < 0 || value.start > MAX_SECTION_TIME_SECONDS) {
+    return invalidField(`${path}.start`);
+  }
+  if (typeof value.end !== "number" || !Number.isFinite(value.end) || !Number.isInteger(value.end) || value.end <= value.start || value.end > MAX_SECTION_TIME_SECONDS) {
+    return invalidField(`${path}.end`);
+  }
+
+  return null;
+}
+
 /** Documented. */
 function validateRehearsalSection(value: unknown, path: string): string | null {
   if (!isRecord(value)) {
     return invalidField(path);
   }
-  const extraKey = unexpectedKey(value, ["id", "label", "groove", "confidence", "roles", "partGraph"], path);
+  const extraKey = unexpectedKey(value, ["id", "label", "groove", "timeRange", "confidence", "roles", "partGraph"], path);
   if (extraKey) {
     return extraKey;
   }
@@ -903,6 +935,11 @@ function validateRehearsalSection(value: unknown, path: string): string | null {
     return invalidField(`${path}.groove`);
   }
 
+  const timeRangeError = validateSectionTimeRange(value.timeRange, `${path}.timeRange`);
+  if (timeRangeError) {
+    return timeRangeError;
+  }
+
   const confidenceError = validateConfidenceMarker(value.confidence, `${path}.confidence`);
   if (confidenceError) {
     return confidenceError;
diff --git a/packages/shared-types/test/index.test.ts b/packages/shared-types/test/index.test.ts
index a4be98e..16a53ab 100644
--- a/packages/shared-types/test/index.test.ts
+++ b/packages/shared-types/test/index.test.ts
@@ -354,6 +354,10 @@ describe("shared type helpers", () => {
         {
           id: "verse-1",
           label: "verse",
+          timeRange: {
+            start: 10,
+            end: 30
+          },
           confidence: {
             level: "medium",
             source: "model"
@@ -631,6 +635,55 @@ describe("shared type helpers", () => {
           (song.sections[0] as RehearsalSong["sections"][number]).groove = 4 as never;
         })
       },
+      {
+        message: "sections[0].timeRange",
+        payload: createInvalidSong((song) => {
+          (song.sections[0] as unknown as Record<string, unknown>).timeRange = null;
+        })
+      },
+      {
+        message: "sections[0].timeRange.extraField",
+        payload: createInvalidSong((song) => {
+          (song.sections[0]!.timeRange as unknown as Record<string, unknown>).extraField = true;
+        })
+      },
+      {
+        message: "sections[0].timeRange.start",
+        payload: createInvalidSong((song) => {
+          song.sections[0]!.timeRange.start = -1;
+        })
+      },
+      {
+        message: "sections[0].timeRange.start",
+        payload: createInvalidSong((song) => {
+          song.sections[0]!.timeRange.start = 10.5;
+        })
+      },
+      {
+        message: "sections[0].timeRange.end",
+        payload: createInvalidSong((song) => {
+          song.sections[0]!.timeRange.end = 10;
+        })
+      },
+      {
+        message: "sections[0].timeRange.end",
+        payload: createInvalidSong((song) => {
+          song.sections[0]!.timeRange.end = 30.5;
+        })
+      },
+      {
+        message: "sections[0].timeRange.start",
+        payload: createInvalidSong((song) => {
+          song.sections[0]!.timeRange.start = 4_294_967_296;
+          song.sections[0]!.timeRange.end = 4_294_967_297;
+        })
+      },
+      {
+        message: "sections[0].timeRange.end",
+        payload: createInvalidSong((song) => {
+          song.sections[0]!.timeRange.end = 4_294_967_296;
+        })
+      },
       {
         message: "sections[0].confidence.level",
         payload: createInvalidSong((song) => {
diff --git a/services/analysis-engine/src/bandscope_analysis/api.py b/services/analysis-engine/src/bandscope_analysis/api.py
index 058d2ce..03f8a29 100644
--- a/services/analysis-engine/src/bandscope_analysis/api.py
+++ b/services/analysis-engine/src/bandscope_analysis/api.py
@@ -8,6 +8,8 @@
 from bandscope_analysis.roles import RoleExtractor
 from bandscope_analysis.sections import extract_sections
 
+MAX_SECTION_TIME_SECONDS = 4_294_967_295
+
 
 class AnalysisJobRequest(TypedDict):
     """Typed orchestration request payload accepted by the analysis engine."""
@@ -99,12 +101,20 @@ class PartGraphNodePayload(TypedDict):
     handoff_from: list[str]
 
 
+class SectionTimeRangePayload(TypedDict):
+    """Typed timing range payload nested inside rehearsal sections."""
+
+    start: int
+    end: int
+
+
 class RehearsalSectionPayload(TypedDict):
     """Typed rehearsal section payload nested inside songs."""
 
     id: str
     label: str
     groove: str
+    timeRange: SectionTimeRangePayload
     confidence: ConfidencePayload
     roles: list[RehearsalRolePayload]
     partGraph: list[PartGraphNodePayload]
@@ -139,6 +149,26 @@ class AnalysisJobStatus(TypedDict):
     error: NotRequired[AnalysisJobError]
 
 
+def build_section_time_range(start: object, end: object) -> SectionTimeRangePayload:
+    """Build a section time range that matches the shared Rust u32 timing contract."""
+    if (
+        not isinstance(start, int)
+        or isinstance(start, bool)
+        or start < 0
+        or start > MAX_SECTION_TIME_SECONDS
+    ):
+        raise ValueError("Invalid section timeRange: invalid field 'start'")
+    if (
+        not isinstance(end, int)
+        or isinstance(end, bool)
+        or end <= start
+        or end > MAX_SECTION_TIME_SECONDS
+    ):
+        raise ValueError("Invalid section timeRange: invalid field 'end'")
+
+    return {"start": start, "end": end}
+
+
 def get_analysis_status() -> HealthReport:
     """Expose a small API-shaped status payload for CI and app wiring."""
     return build_health_report()
@@ -238,6 +268,7 @@ def build_demo_rehearsal_song() -> RehearsalSong:
                 "id": verse_section["id"],
                 "label": verse_section["form_label"],
                 "groove": verse_section["groove"],
+                "timeRange": build_section_time_range(10, 30),
                 "confidence": {
                     "level": "medium",
                     "source": "model",
diff --git a/services/analysis-engine/tests/test_api.py b/services/analysis-engine/tests/test_api.py
index 989b076..cf88e76 100644
--- a/services/analysis-engine/tests/test_api.py
+++ b/services/analysis-engine/tests/test_api.py
@@ -2,6 +2,7 @@
 
 from bandscope_analysis.api import (
     build_demo_rehearsal_song,
+    build_section_time_range,
     get_analysis_status,
     run_analysis_job,
     validate_analysis_job_request,
@@ -205,10 +206,25 @@ def test_build_demo_rehearsal_song_matches_expected_fixture() -> None:
     song = build_demo_rehearsal_song()
 
     assert song["title"] == "Late Night Set"
+    assert song["sections"][0]["timeRange"] == {"start": 10, "end": 30}
     assert song["sections"][0]["roles"][0]["id"] == "bass-guitar"
     assert song["sections"][0]["roles"][4]["manualOverrides"][0]["value"]["source"] == "user"
 
 
+def test_build_section_time_range_matches_desktop_bounds() -> None:
+    """Ensure Python output cannot exceed the shared Rust u32 timing contract."""
+    assert build_section_time_range(10, 30) == {"start": 10, "end": 30}
+
+    cases = [(-1, 30), (10, 10), (10.5, 30), (10, 4_294_967_296)]
+    for start, end in cases:
+        try:
+            build_section_time_range(start, end)  # type: ignore[arg-type]
+        except ValueError as error:
+            assert "timeRange" in str(error)
+        else:
+            raise AssertionError(f"Expected ValueError for {start!r}..{end!r}")
+
+
 def test_run_analysis_job_returns_success_and_failure_envelopes() -> None:
     """Ensure orchestration responses stay typed for both valid and invalid requests."""
     success = run_analysis_job(