diff --git a/.codex-plugin/plugin.json b/.codex-plugin/plugin.json
index e1ae63d1..10d62c22 100644
--- a/.codex-plugin/plugin.json
+++ b/.codex-plugin/plugin.json
@@ -1,6 +1,6 @@
 {
   "name": "cut-as-code-editor",
-  "version": "0.1.0+codex.20260823221007",
+  "version": "0.1.0+codex.20260924000100",
   "description": "Local Cut as Code video project review and editing runtime.",
   "author": {
     "name": "WhiteTowerAI",
diff --git a/runtime/protocol_service.py b/runtime/protocol_service.py
index df9a4245..17dce016 100644
--- a/runtime/protocol_service.py
+++ b/runtime/protocol_service.py
@@ -769,6 +769,7 @@ def audio_index(clip_id):
             source = video(command["clip_id"])
             if source.get("audio_mode", "embedded") == "detached":
                 raise ValueError("audio is already detached")
+            muted = source.get("audio_mode") == "muted"
             source["audio_mode"] = "detached"
             audio_clips.append({
                 "id": f"{source['id']}:audio",
@@ -777,7 +778,7 @@ def audio_index(clip_id):
                 "speed": source.get("speed", 1.0),
                 "source_video_clip_id": source["id"],
                 "linked": True,
-                "muted": False,
+                "muted": muted,
                 **({"source_asset_id": source["source_asset_id"]} if source.get("source_asset_id") else {}),
             })
         elif command_type == "attach-audio":
@@ -786,7 +787,7 @@ def audio_index(clip_id):
             if source.get("audio_mode") != "detached" or len(matches) != 1 or not matches[0].get("linked"):
                 raise ValueError("only linked detached audio can be attached")
             audio_clips.remove(matches[0])
-            source["audio_mode"] = "embedded"
+            source["audio_mode"] = "muted" if matches[0].get("muted") else "embedded"
         elif command_type == "mute-video-audio":
             source = video(command["clip_id"])
             if source.get("audio_mode") == "detached" or not isinstance(command["muted"], bool):
diff --git a/runtime/tests/test_protocol_service.py b/runtime/tests/test_protocol_service.py
index c0426b96..b7c58e42 100644
--- a/runtime/tests/test_protocol_service.py
+++ b/runtime/tests/test_protocol_service.py
@@ -644,6 +644,32 @@ def test_timeline_edit_deletes_and_restores_the_final_clip(self):
         self.assertEqual(["clip-1"], [clip["id"] for clip in timeline["clips"]])
         self.assertEqual({"start_s": 0.0, "end_s": 1.0}, timeline["clips"][0]["program_range"])
 
+    def test_audio_mute_survives_detach_attach_and_reload(self):
+        self._configure_cut_project()
+        opened = self.service.handle_request({"verb": "open_project", "project_root": str(self.root)})
+        snapshot = opened["snapshot"]
+        for command, mode, muted in [
+            ({"type": "mute-video-audio", "clip_id": "clip-1", "muted": True}, "muted", None),
+            ({"type": "detach-audio", "clip_id": "clip-1"}, "detached", True),
+            ({"type": "attach-audio", "clip_id": "clip-1"}, "muted", None),
+            ({"type": "mute-video-audio", "clip_id": "clip-1", "muted": False}, "embedded", None),
+            ({"type": "detach-audio", "clip_id": "clip-1"}, "detached", False),
+        ]:
+            with self.subTest(command=command):
+                result = self.service.handle_request({
+                    "verb": "timeline.edit", "project_id": opened["project_id"],
+                    "read_set": self._timeline_read_set(snapshot), "command": command,
+                })
+                self.assertTrue(result["ok"], result)
+                reloaded = self.service.handle_request({"verb": "open_project", "project_root": str(self.root)})
+                snapshot = reloaded["snapshot"]
+                timeline = json.loads(self.timeline.read_text(encoding="utf-8"))
+                self.assertEqual(mode, timeline["clips"][0]["audio_mode"])
+                if muted is not None:
+                    self.assertEqual(muted, timeline["audio_clips"][0]["muted"])
+                else:
+                    self.assertEqual([], timeline.get("audio_clips", []))
+
     def test_detached_audio_commands_are_atomic_and_linked_edits_sync(self):
         self._configure_cut_project()
         timeline = json.loads(self.timeline.read_text(encoding="utf-8"))
diff --git a/skills/video-understand/scripts/render_project.py b/skills/video-understand/scripts/render_project.py
index f254938d..ab654b4b 100644
--- a/skills/video-understand/scripts/render_project.py
+++ b/skills/video-understand/scripts/render_project.py
@@ -222,8 +222,8 @@ def _build(plan, project_root, plan_dir):
             audio_chain = "" if abs(speed - 1.0) < 1e-9 else atempo_chain(speed) + ","
             label = f"timeline-audio-{segment_index}"
             graph.append(
-                f"[{next_input}:a:0]{audio_chain}aresample=48000,asetpts=PTS-STARTPTS+"
-                f"{float(segment['program_range']['start_s']):.9f}/TB[{label}]"
+                f"[{next_input}:a:0]{audio_chain}aresample=48000,asetpts=PTS-STARTPTS,"
+                f"adelay={round(float(segment['program_range']['start_s']) * 48000)}S:all=1[{label}]"
             )
             segment_labels.append(label)
             next_input += 1
diff --git a/skills/video-understand/tests/test_render_project.py b/skills/video-understand/tests/test_render_project.py
index 40b931ad..a7b1c7ce 100644
--- a/skills/video-understand/tests/test_render_project.py
+++ b/skills/video-understand/tests/test_render_project.py
@@ -138,6 +138,25 @@ def test_detached_audio_renders_once_without_embedded_audio_doubling(self):
             self.assertTrue(output.is_file())
             self.assertLess(abs(_mean_volume(output) - _mean_volume(source)), 1.5)
 
+            audio = timeline["audio_clips"][0]
+            audio.update({"linked": False, "source_range": {"start_s": 0, "end_s": 0.25},
+                          "program_range": {"start_s": 0.5, "end_s": 0.75}})
+            (root / "work" / "timeline.json").write_text(json.dumps(timeline), encoding="utf-8")
+            render_project.render(plan, root)
+            self.assertLess(max(map(abs, _audio_samples(output, 0.05, 0.2))), 10)
+            self.assertGreater(max(map(abs, _audio_samples(output, 0.55, 0.15))), 1000)
+
+            audio["muted"] = True
+            (root / "work" / "timeline.json").write_text(json.dumps(timeline), encoding="utf-8")
+            render_project.render(plan, root)
+            self.assertLess(max(map(abs, _audio_samples(output, 0.55, 0.15))), 10)
+
+            timeline["audio_clips"] = []
+            timeline["clips"][0]["audio_mode"] = "muted"
+            (root / "work" / "timeline.json").write_text(json.dumps(timeline), encoding="utf-8")
+            render_project.render(plan, root)
+            self.assertLess(max(map(abs, _audio_samples(output, 0.1))), 10)
+
     def test_overlay_editor_transform_scales_and_positions_from_normalized_center(self):
         with tempfile.TemporaryDirectory() as temporary:
             root = Path(temporary)
diff --git a/ui/src/editor/EditorShell.tsx b/ui/src/editor/EditorShell.tsx
index 24d5a98a..94aea31a 100644
--- a/ui/src/editor/EditorShell.tsx
+++ b/ui/src/editor/EditorShell.tsx
@@ -686,7 +686,7 @@ export function projectFromSnapshot(base: EditorProjectView | null, snapshot: Ru
     muted: clip.muted,
     implicit: false,
   })) ?? []
-  const implicitAudioClips = hasAudio ? videoClips.filter((clip) => !detachedAudioIds.has(clip.id)).map((clip) => ({
+  const implicitAudioClips = hasAudio ? videoClips.filter((clip) => clip.audioMode !== 'detached' && !detachedAudioIds.has(clip.id)).map((clip) => ({
     ...clip,
     id: `${clip.id}:embedded-audio`,
     trackId: 'track-audio',
diff --git a/ui/src/editor/TimelinePanel.tsx b/ui/src/editor/TimelinePanel.tsx
index 97850eb4..1329efad 100644
--- a/ui/src/editor/TimelinePanel.tsx
+++ b/ui/src/editor/TimelinePanel.tsx
@@ -51,6 +51,7 @@ import {
   trimAudioSourceAtProgramDelta,
   trimSourceAtProgramDelta,
   moveAudioStartAtProgramDelta,
+  type TimelineEditCommand,
   type TimelineTrimEdge,
 } from './timeline-edit'
 
@@ -244,6 +245,7 @@ function Clip({
   trimming,
   onTrimStart,
   onAudioMoveStart,
+  onMute,
   onContextMenu,
 }: {
   track: TrackView
@@ -261,6 +263,7 @@ function Clip({
   trimming: TimelineTrimEdge | null
   onTrimStart: (event: PointerEvent<HTMLButtonElement>, clip: ClipView, edge: TimelineTrimEdge, kind?: 'video' | 'audio') => void
   onAudioMoveStart: (event: PointerEvent<HTMLButtonElement>, clip: ClipView) => void
+  onMute: (clip: ClipView) => void
   onContextMenu: (event: ReactMouseEvent<HTMLButtonElement>, track: TrackView, clip: ClipView) => void
 }) {
   const kind = track.kind
@@ -298,9 +301,11 @@ function Clip({
         className={`timeline-clip timeline-clip--${kind}`}
         data-timeline-clip={id}
         {...(kind === 'audio' && !clip.implicit ? { 'data-linked': String(Boolean(clip.linked)) } : {})}
+        data-muted={kind === 'audio' ? Boolean(clip.muted) : undefined}
         aria-label={`${track.name} ${kind === 'video' || kind === 'audio' ? 'clip' : 'cue'}`}
         aria-pressed={selected}
         onPointerDown={() => select({ kind, id })}
+        onClick={() => select({ kind, id })}
         onPointerDownCapture={(event) => {
           if (kind === 'audio' && !clip.implicit && !clip.linked && event.button === 0) onAudioMoveStart(event, clip)
         }}
@@ -392,11 +397,17 @@ function Clip({
           ><span aria-hidden /></button>
         </>
       )}
-      {kind === 'audio' && !clip.implicit && (
-        <span className="timeline-audio-state" aria-hidden>
-          {clip.linked ? <Link size={12} /> : <Link2Off size={12} />}
-          {clip.muted ? <VolumeX size={12} /> : null}
-        </span>
+      {kind === 'audio' && clip.implicit !== undefined && (
+        <div className="timeline-audio-state">
+          <span title={clip.implicit ? 'Original video audio' : clip.linked ? 'Linked to video' : 'Independent audio'}>
+            {clip.linked ? <Link aria-hidden size={12} /> : <Link2Off aria-hidden size={12} />}
+          </span>
+          <button type="button" className="timeline-audio-mute" aria-label={clip.muted ? 'Unmute audio' : 'Mute audio'}
+            title={clip.muted ? 'Unmute audio' : 'Mute audio'} aria-pressed={Boolean(clip.muted)} disabled={!editable}
+            onPointerDown={(event) => event.stopPropagation()} onClick={() => onMute(clip)}>
+            {clip.muted ? <VolumeX aria-hidden size={13} /> : <Volume2 aria-hidden size={13} />}
+          </button>
+        </div>
       )}
       {kind === 'video' && trimming && (
         <output className={`timeline-trim-readout timeline-trim-readout--${trimming}`} aria-live="polite">
@@ -505,13 +516,27 @@ export function TimelinePanel({ store }: TimelinePanelProps) {
   const selectedVideo = selection?.kind === 'video'
     ? project?.tracks.find((track) => track.kind === 'video')?.clips?.find((clip) => clip.id === selection.id)
     : undefined
+  const selectedAudio = selection?.kind === 'audio'
+    ? project?.tracks.find((track) => track.kind === 'audio')?.clips?.find((clip) => clip.id === selection.id)
+    : undefined
+  const deleteCommand: TimelineEditCommand | undefined = selectedVideo
+    ? { type: 'delete', clipId: selectedVideo.id }
+    : selectedAudio && !selectedAudio.implicit && !selectedAudio.linked
+      ? { type: 'delete-audio', audioClipId: selectedAudio.id } : undefined
   const splitEnabled = Boolean(
     timelineEditable && selectedVideo && canSplitClip(project!, selectedVideo.id, currentTimeS) && !timelinePending,
   )
   const deleteEnabled = Boolean(
-    timelineEditable && selectedVideo && !timelinePending,
+    timelineEditable && deleteCommand && !timelinePending,
   )
 
+  function toggleAudioMute(clip: ClipView) {
+    select({ kind: 'audio', id: clip.id })
+    if (clip.implicit && clip.linkedClipId) {
+      void editTimeline({ type: 'mute-video-audio', clipId: clip.linkedClipId, muted: !clip.muted })
+    } else void editTimeline({ type: 'mute-audio', audioClipId: clip.id, muted: !clip.muted })
+  }
+
   useEffect(() => {
     if (!deleteNotice) return
     const timeout = window.setTimeout(() => setDeleteNotice(null), 5000)
@@ -536,7 +561,8 @@ export function TimelinePanel({ store }: TimelinePanelProps) {
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       const target = event.target as HTMLElement | null
-      if (target?.matches('input, textarea, [contenteditable="true"]')) return
+      if (event.defaultPrevented || event.isComposing || event.altKey
+        || target?.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="menu"], [role="dialog"]')) return
       const modifier = event.ctrlKey || event.metaKey
       if (modifier && event.key.toLowerCase() === 'z') {
         event.preventDefault()
@@ -544,14 +570,14 @@ export function TimelinePanel({ store }: TimelinePanelProps) {
         else void undoTimeline()
         return
       }
-      if ((event.key === 'Delete' || event.key === 'Backspace') && deleteEnabled && selectedVideo) {
+      if ((event.key === 'Delete' || event.key === 'Backspace') && !modifier && !event.repeat && deleteEnabled && deleteCommand) {
         event.preventDefault()
-        void editTimeline({ type: 'delete', clipId: selectedVideo.id })
+        void editTimeline(deleteCommand)
       }
     }
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [deleteEnabled, editTimeline, redoTimeline, selectedVideo, undoTimeline])
+  }, [deleteEnabled, editTimeline, redoTimeline, selectedVideo, selectedAudio, undoTimeline])
 
   useEffect(() => {
     if (!trimDrag || !project) return
@@ -1188,10 +1214,7 @@ export function TimelinePanel({ store }: TimelinePanelProps) {
           label: clip.muted ? 'Unmute audio' : 'Mute audio',
           icon: clip.muted ? Volume2 : VolumeX,
           disabled: !editable,
-          onSelect: () => {
-            if (clip.implicit && video) void editTimeline({ type: 'mute-video-audio', clipId: video.id, muted: !clip.muted })
-            else void editTimeline({ type: 'mute-audio', audioClipId: clip.id, muted: !clip.muted })
-          },
+          onSelect: () => toggleAudioMute(clip),
         },
         {
           id: 'copy-audio-range',
@@ -1354,7 +1377,7 @@ export function TimelinePanel({ store }: TimelinePanelProps) {
     <section className={`timeline-panel${hasMedia ? '' : ' timeline-panel--empty'}`} role="region" aria-label="Timeline">
       <header className="timeline-toolbar" aria-label="Timeline tools">
         {!runtime && <button type="button" aria-label="Add track" disabled={!hasMedia}><Plus aria-hidden size={18} /></button>}
-        <button className={snapEnabled ? '' : 'is-active'} type="button" aria-label="Select tool" title="Select and position timeline items" aria-pressed={!snapEnabled} onClick={() => setSnapEnabled(false)}><MousePointer2 aria-hidden size={18} /></button>
+        <button className="is-active" type="button" aria-label="Select tool" title="Select and position timeline items" aria-pressed={true}><MousePointer2 aria-hidden size={18} /></button>
         <button className={snapEnabled ? 'is-active' : ''} type="button" aria-label="Toggle snap" title={snapEnabled ? 'Magnetic snapping on' : 'Magnetic snapping off'} aria-pressed={snapEnabled} onClick={() => setSnapEnabled(!snapEnabled)}><Magnet aria-hidden size={18} /></button>
         {(hasMedia || timelinePast.length > 0 || timelineFuture.length > 0) && (
           <>
@@ -1368,14 +1391,19 @@ export function TimelinePanel({ store }: TimelinePanelProps) {
             {!runtime && <DisabledTimelineCommand name="Duplicate" descriptionId="timeline-duplicate-description"><Copy aria-hidden size={18} /></DisabledTimelineCommand>}
             {!runtime && <DisabledTimelineCommand name="Copy" descriptionId="timeline-copy-description"><Copy aria-hidden size={18} /></DisabledTimelineCommand>}
             {!runtime && <DisabledTimelineCommand name="Reorder tracks" descriptionId="timeline-reorder-description"><ArrowUpDown aria-hidden size={18} /></DisabledTimelineCommand>}
-            <button type="button" aria-label="Delete clip" title={timelineEditable ? 'Delete selected clip (Delete)' : 'This project has no editable cut operation'} disabled={!deleteEnabled} onClick={() => selectedVideo && void editTimeline({ type: 'delete', clipId: selectedVideo.id })}><Trash2 aria-hidden size={18} /></button>
+            <button type="button" aria-label="Delete clip" title={timelineEditable ? selectedAudio ? 'Ripple delete audio (Delete)' : 'Delete selected clip (Delete)' : 'This project has no editable cut operation'} disabled={!deleteEnabled} onClick={() => deleteCommand && void editTimeline(deleteCommand)}><Trash2 aria-hidden size={18} /></button>
           </>
         )}
         {timelinePending && <span className="timeline-edit-status" role="status">Saving timeline…</span>}
         {!timelinePending && timelineError && <span className="timeline-edit-status timeline-edit-status--error" role="alert" title={timelineError}>{timelineError}</span>}
         <span className="timeline-toolbar-spacer" />
-        <button type="button" aria-label="Fit timeline" title="Fit timeline to available width" onClick={() => setTimelineZoom(1)}><Ruler aria-hidden size={20} /></button>
+        <button type="button" aria-label="Fit timeline" title="Fit timeline to available width" onClick={() => {
+          setTimelineZoom(1)
+          if (surfaceRef.current) surfaceRef.current.scrollLeft = 0
+          if (rulerScrollRef.current) rulerScrollRef.current.scrollLeft = 0
+        }}><Ruler aria-hidden size={20} /></button>
         <button type="button" aria-label="Zoom out timeline" title="Zoom out timeline" disabled={timelineZoom <= MIN_ZOOM} onClick={() => setTimelineZoom(timelineZoom - ZOOM_STEP)}><ZoomOut aria-hidden size={20} /></button>
+        <output className="timeline-zoom-level" aria-label="Timeline zoom">{Math.round(timelineZoom * 100)}%</output>
         <button type="button" aria-label="Zoom in timeline" title="Zoom in timeline" disabled={timelineZoom >= MAX_ZOOM} onClick={() => setTimelineZoom(timelineZoom + ZOOM_STEP)}><ZoomIn aria-hidden size={20} /></button>
       </header>
       <div className="timeline-body">
@@ -1498,13 +1526,14 @@ export function TimelinePanel({ store }: TimelinePanelProps) {
                       presentationInsetPx={presentationInsetPx}
                       selection={selection}
                       select={select}
-                      editable={timelineEditable && (
+                      editable={timelineEditable && !timelinePending && (
                         track.kind === 'video'
-                        || (track.kind === 'audio' && !clip.implicit && !clip.linked)
+                        || track.kind === 'audio'
                       )}
                       trimming={trimDrag?.clipId === clip.id ? trimDrag.edge : null}
                       onTrimStart={startTrim}
                       onAudioMoveStart={startAudioMove}
+                      onMute={toggleAudioMute}
                       onContextMenu={openClipContextMenu}
                     />
                   ))}
diff --git a/ui/src/editor/ViewerPanel.tsx b/ui/src/editor/ViewerPanel.tsx
index fc6c3c64..299bc3f7 100644
--- a/ui/src/editor/ViewerPanel.tsx
+++ b/ui/src/editor/ViewerPanel.tsx
@@ -227,7 +227,8 @@ function supportsNativePlaybackRate(playbackRate: number) {
   }
 }
 
-function applyClipPlaybackRate(video: HTMLVideoElement, clip: ClipView) {
+function applyClipPlaybackSettings(video: HTMLVideoElement, clip: ClipView) {
+  video.muted = clip.audioMode === 'muted' || clip.audioMode === 'detached'
   const playbackRate = playbackRateForClip(clip)
   if (playbackRate !== null && Math.abs(video.playbackRate - playbackRate) > 0.001) {
     try {
@@ -445,6 +446,41 @@ const aspectOptions = [
 
 type ViewerAspect = 'Original' | '16:9' | '9:16' | '1:1' | '4:5' | '4:3'
 
+function TimelineAudio({ clip, url, timeS, playing }: {
+  clip: ClipView; url?: string; timeS: number; playing: boolean
+}) {
+  const mediaRef = useRef<HTMLAudioElement>(null)
+  const [ready, setReady] = useState(false)
+  const [error, setError] = useState(false)
+  const active = timeS >= clip.programRange.startS && timeS < clip.programRange.endS
+  useEffect(() => {
+    const audio = mediaRef.current
+    if (!audio) return
+    if (!ready || error) { audio.pause(); return }
+    if (!active || clip.muted) { audio.pause(); return }
+    const rate = playbackRateForClip(clip)
+    if (rate === null) return
+    try { audio.playbackRate = rate } catch { audio.pause(); setError(true); return }
+    const sourceS = clip.sourceRange.startS + (timeS - clip.programRange.startS) * rate
+    // ponytail: native clocks resync above 80 ms; use Web Audio for sample-accurate preview.
+    if (audio.paused || !playing || Math.abs(audio.currentTime - sourceS) > 0.08 * rate) audio.currentTime = sourceS
+    if (!playing) { audio.pause(); return }
+    if (audio.paused) void audio.play().catch((reason: unknown) => {
+      if (!(reason instanceof DOMException && reason.name === 'AbortError')) setError(true)
+    })
+  }, [active, clip, error, playing, ready, timeS])
+  useEffect(() => {
+    const audio = mediaRef.current
+    return () => { audio?.pause() }
+  }, [])
+  return <>
+    <audio ref={mediaRef} src={url} preload="auto" muted={Boolean(clip.muted)} data-timeline-audio={clip.id}
+      onLoadedMetadata={() => setReady(true)} onError={() => setError(true)} />
+    {active && !clip.muted && (error || !url)
+      ? <span role="alert" className="viewer-audio-error">Audio preview unavailable: {clip.displayName || 'Audio'}</span> : null}
+  </>
+}
+
 function AspectRatioMenu({ selectedRatio, onSelect }: { selectedRatio: ViewerAspect; onSelect: (ratio: ViewerAspect) => void }) {
   return (
     <div className="viewer-menu viewer-aspect-menu" role="menu" aria-label="Aspect ratio">
@@ -501,7 +537,10 @@ export function ViewerPanel({ store }: ViewerPanelProps) {
     ? project.assets.find((asset) => asset.id === project.sourceAssetId && asset.kind === 'video' && asset.mediaType?.startsWith('video/') && asset.url)
     : undefined
   const videoClips = project?.tracks.find((track) => track.kind === 'video')?.clips ?? []
+  const detachedAudio = project?.tracks.filter((track) => track.kind === 'audio')
+    .flatMap((track) => track.clips ?? []).filter((clip) => clip.implicit === false) ?? []
   const projectVideoRef = useRef<HTMLVideoElement>(null)
+  const playButtonRef = useRef<HTMLButtonElement>(null)
   const stageRef = useRef<HTMLDivElement>(null)
   const [fitSize, setFitSize] = useState<Readonly<{ width: number; height: number }>>()
   const [viewerZoom, setViewerZoom] = useState(1)
@@ -512,7 +551,7 @@ export function ViewerPanel({ store }: ViewerPanelProps) {
   const holdingBoundaryRef = useRef(false)
   const cancelBoundaryHoldRef = useRef<(() => boolean) | null>(null)
   const layerPointerRef = useRef<LayerPointerState | null>(null)
-  const unsupportedPlaybackRate = videoClips
+  const unsupportedPlaybackRate = [...videoClips, ...detachedAudio.filter((clip) => !clip.muted)]
     .map(playbackRateForClip)
     .find((playbackRate) => playbackRate !== null && !supportsNativePlaybackRate(playbackRate))
   const canPlay = Boolean(projectVideo && videoClips.length && unsupportedPlaybackRate === undefined)
@@ -592,7 +631,7 @@ export function ViewerPanel({ store }: ViewerPanelProps) {
       const finalSourceTimeS = lastPresentedSourceTime(finalClip, sourceFrameDurationS)
       activeClipRef.current = finalClip
       finalFrameStateRef.current = { sourceTimeS: finalSourceTimeS }
-      applyClipPlaybackRate(video, finalClip)
+      applyClipPlaybackSettings(video, finalClip)
       if (Math.abs(video.currentTime - finalSourceTimeS) >= 0.0001) {
         createPlaybackController(video).seek(finalSourceTimeS)
       }
@@ -603,7 +642,7 @@ export function ViewerPanel({ store }: ViewerPanelProps) {
     const sourceTimeS = programTimeToSourceTime(programTimeS, videoClips)
     if (!video || !clip || sourceTimeS === null) return
     activeClipRef.current = clip
-    applyClipPlaybackRate(video, clip)
+    applyClipPlaybackSettings(video, clip)
     if (Math.abs(video.currentTime - sourceTimeS) < 0.01) return
     createPlaybackController(video).seek(sourceTimeS)
   }
@@ -650,7 +689,7 @@ export function ViewerPanel({ store }: ViewerPanelProps) {
     }
     const activeClip = activeClipRef.current ?? sourceClipAtTime(video.currentTime, videoClips)
     if (!activeClip || video.currentTime < activeClip.sourceRange.startS || video.currentTime >= activeClip.sourceRange.endS) return
-    applyClipPlaybackRate(video, activeClip)
+    applyClipPlaybackSettings(video, activeClip)
     const programTimeS = sourceTimeToProgramTimeInClip(video.currentTime, activeClip)
     if (programTimeS !== null) publishNativeProgramTime(programTimeS)
   }
@@ -658,7 +697,7 @@ export function ViewerPanel({ store }: ViewerPanelProps) {
   function transitionToNextClip(video: HTMLVideoElement, nextClip: ClipView) {
     finalFrameStateRef.current = null
     activeClipRef.current = nextClip
-    applyClipPlaybackRate(video, nextClip)
+    applyClipPlaybackSettings(video, nextClip)
     createPlaybackController(video).seek(nextClip.sourceRange.startS)
     publishNativeProgramTime(nextClip.programRange.startS)
   }
@@ -689,7 +728,7 @@ export function ViewerPanel({ store }: ViewerPanelProps) {
       else finishPlayingClip(video, activeClip)
       return true
     }
-    applyClipPlaybackRate(video, activeClip)
+    applyClipPlaybackSettings(video, activeClip)
     const programTimeS = sourceTimeToProgramTimeInClip(presentedSourceTimeS, activeClip)
     if (programTimeS !== null) publishNativeProgramTime(programTimeS)
     return presentedSourceTimeS >= lastPresentedSourceTime(activeClip, sourceFrameDurationS) - sourceFrameDurationS / 100
@@ -860,11 +899,18 @@ export function ViewerPanel({ store }: ViewerPanelProps) {
   }
 
   useEffect(() => {
-    const closeOnEscape = (event: KeyboardEvent) => {
+    const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Escape') setOpenMenu(null)
+      if (event.key !== ' ' || event.defaultPrevented || event.repeat || event.isComposing
+        || event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return
+      const target = event.target as HTMLElement | null
+      if (target?.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="menu"], [role="dialog"], a, button:not([data-timeline-clip]), [role="tab"], video, audio')) return
+      if (!playButtonRef.current || playButtonRef.current.disabled) return
+      event.preventDefault()
+      playButtonRef.current.click()
     }
-    window.addEventListener('keydown', closeOnEscape)
-    return () => window.removeEventListener('keydown', closeOnEscape)
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
   }, [setOpenMenu])
 
   function beginLayerPointer(
@@ -995,6 +1041,10 @@ export function ViewerPanel({ store }: ViewerPanelProps) {
   return (
     <section className="viewer-panel" role="region" aria-label="Viewer">
       <header className="viewer-titlebar">Viewer</header>
+      {detachedAudio.map((clip) => {
+        const url = project?.assets.find((asset) => asset.id === (clip.sourceAssetId ?? project.sourceAssetId))?.url
+        return <TimelineAudio key={`${clip.id}:${url}`} clip={clip} url={url} timeS={currentTimeS} playing={isPlaying && canPlay} />
+      })}
       {contentCardsOperation?.preview ? (
         <output aria-label="Preview artifact metadata" style={{ display: 'block', padding: '4px 12px', color: '#a9adb9', background: '#17191e', fontSize: 11 }}>
           Existing preview artifact: {contentCardsOperation.preview.status} (revision {contentCardsOperation.preview.revision})
@@ -1015,6 +1065,7 @@ export function ViewerPanel({ store }: ViewerPanelProps) {
                   ref={projectVideoRef}
                   data-project-media
                   src={projectVideo.url}
+                  muted={['muted', 'detached'].includes(programClipAtTime(currentTimeS, videoClips)?.audioMode ?? '')}
                   aria-label={projectVideo.name}
                   onLoadedMetadata={(event) => seekProjectVideo(currentTimeS)}
                   onTimeUpdate={(event) => syncProgramTime(event.currentTarget)}
@@ -1147,11 +1198,13 @@ export function ViewerPanel({ store }: ViewerPanelProps) {
         </div>
         <button
           className="viewer-play-button"
+          ref={playButtonRef}
           type="button"
           aria-label={isPlaying ? 'Pause' : 'Play'}
+          aria-keyshortcuts="Space"
           disabled={!canPlay}
           title={unsupportedPlaybackRate === undefined
-            ? (isPlaying ? 'Pause playback' : 'Play preview')
+            ? (isPlaying ? 'Pause playback (Space)' : 'Play preview (Space)')
             : `Playback rate ${unsupportedPlaybackRate} cannot be represented by this browser. Use timeline seeking for manual review.`}
           onClick={togglePlayback}
         >
diff --git a/ui/src/editor/timeline-edit.ts b/ui/src/editor/timeline-edit.ts
index 1384723f..1a860c03 100644
--- a/ui/src/editor/timeline-edit.ts
+++ b/ui/src/editor/timeline-edit.ts
@@ -227,7 +227,7 @@ function updateTracks(project: EditorProjectView, clips: readonly ClipView[], ri
         linkedClipId: video.id,
         linked: true,
         implicit,
-        muted: implicit && video.audioMode === 'muted' ? true : existing?.muted ?? false,
+        muted: implicit ? video.audioMode === 'muted' : existing?.muted ?? false,
       }]
     })
     return {
@@ -402,13 +402,13 @@ export function applyTimelineEdit(project: EditorProjectView, command: TimelineE
       id: `${video.id}:embedded-audio`,
       linked: true,
       implicit: true,
-      muted: false,
+      muted: Boolean(detached.muted),
     }
     return {
       project: updateAudioTrack(
         project,
         currentAudio.map((candidate) => candidate.id === detached.id ? implicit : candidate),
-        clips.map((candidate) => candidate.id === video.id ? { ...candidate, audioMode: 'embedded' as const } : candidate),
+        clips.map((candidate) => candidate.id === video.id ? { ...candidate, audioMode: detached.muted ? 'muted' as const : 'embedded' as const } : candidate),
       ),
       inverse: { type: 'set-audio-state', clipId: video.id, audioMode: 'detached', audioClip: detached },
       selection: { kind: 'video', id: video.id },
@@ -562,7 +562,7 @@ export function applyTimelineEdit(project: EditorProjectView, command: TimelineE
     ))
     return {
       project: updateAudioTrack(project, next),
-      inverse: { type: 'insert-audio', index, clip: audio },
+      inverse: { type: 'insert-audio', index: currentAudio.slice(0, index).filter((clip) => !clip.implicit).length, clip: audio },
       selection: null,
     }
   }
@@ -576,9 +576,10 @@ export function applyTimelineEdit(project: EditorProjectView, command: TimelineE
         ? { ...candidate, programRange: { startS: rounded(candidate.programRange.startS + durationS), endS: rounded(candidate.programRange.endS + durationS) } }
         : candidate
     ))
-    shifted.splice(Math.min(Math.max(command.index, 0), shifted.length), 0, command.clip)
+    const detached = shifted.filter((clip) => !clip.implicit)
+    detached.splice(Math.min(Math.max(command.index, 0), detached.length), 0, command.clip)
     return {
-      project: updateAudioTrack(project, shifted),
+      project: updateAudioTrack(project, [...shifted.filter((clip) => clip.implicit), ...detached]),
       inverse: { type: 'delete-audio', audioClipId: command.clip.id },
       selection: audioSelection(command.clip.id),
     }
diff --git a/ui/src/styles.css b/ui/src/styles.css
index ccea4d99..a2b20306 100644
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -1481,11 +1481,24 @@ button {
   cursor: pointer;
 }
 
-.timeline-toolbar button:hover:not(:disabled),
-.timeline-toolbar button.is-active {
+.timeline-toolbar button:hover:not(:disabled) {
   background: #424248;
 }
 
+.timeline-toolbar button.is-active {
+  color: #bce5db;
+  background: var(--color-selection);
+  box-shadow: inset 0 0 0 1px var(--color-accent);
+}
+
+.timeline-zoom-level {
+  min-width: 40px;
+  color: #c5c9d0;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+
 .timeline-toolbar button:disabled,
 .timeline-disabled-command button:disabled {
   color: #737781;
@@ -2096,12 +2109,19 @@ button {
 .timeline-clip--video[aria-pressed='true'] .timeline-clip-label { background: #1e3034; }
 .timeline-clip-speed { float: right; }
 
-.timeline-clip--audio .timeline-clip-label { top: 4px; right: 32px; bottom: auto; left: 9px; color: #d6efe9; background: transparent; }
+.timeline-clip--audio .timeline-clip-label { top: 4px; right: 52px; bottom: auto; left: 9px; color: #d6efe9; background: transparent; }
+.timeline-clip--audio[data-muted='true'] .timeline-waveform { opacity: 0.2; }
+.timeline-clip--audio[data-muted='true'] .timeline-clip-label { color: #a3b4b0; }
+.timeline-audio-mute { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; color: #b8ded5; background: #203b35; cursor: pointer; }
+.timeline-audio-mute:hover:not(:disabled), .timeline-audio-mute[aria-pressed='true'] { color: #fff; background: #52615d; }
+.timeline-audio-mute:disabled { opacity: 0.5; cursor: not-allowed; }
+.viewer-audio-error { position: absolute; z-index: 5; bottom: 52px; left: 12px; padding: 6px 10px; color: #ffb6b6; background: #25272c; font-size: 12px; }
 .timeline-audio-state {
   position: absolute;
-  top: 7px;
+  top: 4px;
   right: 8px;
   display: inline-flex;
+  align-items: center;
   gap: 4px;
   color: #b8ded5;
 }
diff --git a/ui/tests/runtime-readonly.spec.ts b/ui/tests/runtime-readonly.spec.ts
index c7af30ed..301bbc7c 100644
--- a/ui/tests/runtime-readonly.spec.ts
+++ b/ui/tests/runtime-readonly.spec.ts
@@ -542,6 +542,113 @@ test('browser displays current Agent review image, video, and sandboxed HTML fro
   }
 })
 
+test('audio edits persist and drive native preview mute, independent playback, and deletion', async ({ page }) => {
+  const root = await createProjectFixture()
+  let isolated: StartedSidecar | undefined
+  try {
+    await execFileAsync('ffmpeg', ['-y', '-v', 'error', '-f', 'lavfi', '-i', 'testsrc2=size=160x90:rate=30',
+      '-f', 'lavfi', '-i', 'sine=frequency=440:sample_rate=48000', '-t', '6',
+      '-c:v', 'libx264', '-pix_fmt', 'yuv420p', '-c:a', 'aac', path.join(root, 'input', 'source.mp4')])
+    const projectPath = path.join(root, 'work', 'project.json')
+    const project = JSON.parse(await readFile(projectPath, 'utf8'))
+    const mediaStat = await stat(path.join(root, 'input', 'source.mp4'), { bigint: true })
+    project.source.fingerprint = { size: Number(mediaStat.size), modified_ns: '__SOURCE_MTIME__', duration_s: 6 }
+    project.sequences.main.operations = ['cut']
+    project.operations = [{ id: 'cut', revision: 1, status: 'verified', depends_on: [], based_on: {},
+      target: { sequence: 'main', scope: 'full' }, outputs: [],
+      effects: { changes_timeline: true, changes_geometry: false, changes_video_pixels: true, changes_audio: true } }]
+    await writeFile(projectPath, JSON.stringify(project).replace('"__SOURCE_MTIME__"', mediaStat.mtimeNs.toString()))
+    await writeFile(path.join(root, 'work', 'timeline.json'), JSON.stringify({
+      schema_version: 1, source_duration_s: 6, program_duration_s: 6, fps: { num: 30, den: 1 },
+      clips: [0, 3].map((start, i) => ({ id: `clip-${i + 1}`, speed: 1,
+        source_range: { start_s: start, end_s: start + 3 }, program_range: { start_s: start, end_s: start + 3 } })),
+    }))
+    isolated = await startSidecar(root)
+    await page.setViewportSize({ width: 1440, height: 900 })
+    await page.goto(await armLaunch(isolated))
+    const opened = await page.request.get(`${isolatedURL(isolated.ready)}/v1/projects/${isolated.ready.projectId}/snapshot`)
+    const snapshot = (await opened.json()).snapshot
+    expect(snapshot.read_only, JSON.stringify(snapshot.errors)).toBe(false)
+    const source = page.locator('video[data-project-media]')
+    await expect.poll(() => source.evaluate(video => video.readyState)).toBeGreaterThanOrEqual(2)
+    const originalAudio = page.locator('[data-timeline-clip="clip-1:embedded-audio"]')
+    await originalAudio.locator('..').getByRole('button', { name: 'Mute audio', exact: true }).click()
+    await expect.poll(() => source.evaluate(video => video.muted)).toBe(true)
+    await originalAudio.click({ button: 'right', position: { x: 8, y: 30 } })
+    await page.getByRole('menuitem', { name: 'Detach audio', exact: true }).click()
+    const audio = page.locator('audio[data-timeline-audio="clip-1:audio"]')
+    const audioClip = page.locator('[data-timeline-clip="clip-1:audio"]')
+    await expect(audioClip).toHaveAttribute('data-muted', 'true')
+    await expect.poll(() => audio.evaluate(media => media.muted)).toBe(true)
+    await audio.evaluate(async (media) => {
+      const context = new AudioContext()
+      const analyser = context.createAnalyser()
+      context.createMediaElementSource(media).connect(analyser)
+      analyser.connect(context.destination)
+      await context.resume()
+      Object.assign(window, { audioLevel: () => {
+        const samples = new Float32Array(analyser.fftSize)
+        analyser.getFloatTimeDomainData(samples)
+        return Math.max(...samples.map(Math.abs))
+      } })
+    })
+    const level = () => page.evaluate(() => (window as unknown as { audioLevel: () => number }).audioLevel())
+    await page.getByRole('button', { name: 'Play', exact: true }).click()
+    await expect.poll(() => source.evaluate(media => media.currentTime)).toBeGreaterThan(0.15)
+    await expect.poll(level).toBeLessThan(0.001)
+    await audioClip.locator('..').getByRole('button', { name: 'Unmute audio', exact: true }).click()
+    await expect.poll(() => audio.evaluate(media => media.muted)).toBe(false)
+    await expect.poll(() => source.evaluate(video => video.muted)).toBe(true)
+    await expect.poll(() => audio.evaluate(media => media.paused)).toBe(false)
+    await expect.poll(() => audio.evaluate(media => media.currentTime)).toBeGreaterThan(0.15)
+    await expect.poll(level).toBeGreaterThan(0.01)
+    await page.getByRole('button', { name: 'Pause', exact: true }).click()
+    await expect.poll(() => audio.evaluate(media => media.paused)).toBe(true)
+    await audioClip.click({ button: 'right', position: { x: 8, y: 30 } })
+    await page.getByRole('menuitem', { name: 'Unlink audio and video', exact: true }).click()
+    await expect(audioClip).toHaveAttribute('data-linked', 'false')
+    const box = (await audioClip.boundingBox())!
+    await audioClip.click({ button: 'right', position: { x: box.width / 3, y: 30 } })
+    await page.getByRole('menuitem', { name: 'Trim audio out point to here', exact: true }).click()
+    await expect.poll(async () => (await audioClip.boundingBox())!.width).toBeLessThan(box.width / 2)
+    const trimmed = (await audioClip.boundingBox())!
+    await page.mouse.move(trimmed.x + trimmed.width / 2, trimmed.y + trimmed.height / 2)
+    await page.mouse.down()
+    await page.mouse.move(trimmed.x + trimmed.width / 2 + 150, trimmed.y + trimmed.height / 2)
+    await page.mouse.up()
+    await expect.poll(async () => JSON.parse(await readFile(path.join(root, 'work', 'timeline.json'), 'utf8'))
+      .audio_clips[0].program_range.start_s).toBeGreaterThan(0)
+    const canvas = page.locator('[data-timeline-surface]')
+    await canvas.click({ position: { x: 1, y: 180 } })
+    await page.getByRole('button', { name: 'Play', exact: true }).click()
+    await expect.poll(() => audio.evaluate(media => media.paused)).toBe(true)
+    await expect.poll(() => audio.evaluate(media => media.paused)).toBe(false)
+    await expect.poll(() => audio.evaluate(media => media.paused), { timeout: 5000 }).toBe(true)
+    await page.getByRole('button', { name: 'Pause', exact: true }).click()
+    await audioClip.locator('..').getByRole('button', { name: 'Mute audio', exact: true }).click()
+    await expect(audioClip).toHaveAttribute('data-muted', 'true')
+    await page.screenshot({ path: test.info().outputPath('audio-muted.png') })
+    await page.getByRole('region', { name: 'Timeline', exact: true }).screenshot({ path: test.info().outputPath('audio-timeline.png') })
+    await page.reload()
+    await expect(audioClip).toHaveAttribute('data-muted', 'true')
+    await audioClip.focus()
+    await page.keyboard.press('Enter')
+    await page.keyboard.press('Delete')
+    await expect(audioClip).toHaveCount(0)
+    await expect(originalAudio).toHaveCount(0)
+    await expect(page.locator('[data-timeline-clip="clip-1"]')).toBeVisible()
+    await expect(audio).toHaveCount(0)
+    await expect(page.getByRole('button', { name: 'Undo', exact: true })).toBeEnabled()
+    await page.keyboard.press('Control+z')
+    await expect.poll(async () => ({ count: await audioClip.count(), error: await page.locator('.timeline-edit-status--error').allTextContents() }))
+      .toEqual({ count: 1, error: [] })
+    await expect(audioClip).toHaveAttribute('data-muted', 'true')
+  } finally {
+    if (isolated) await stopSidecar(isolated.process)
+    await rm(root, { recursive: true, force: true })
+  }
+})
+
 test('browser projects opaque project media into a playable Viewer and shared timeline', async ({ page }) => {
   const isolated = await startSidecar(projectRoot)
   try {
diff --git a/ui/tests/timeline-panel.spec.ts b/ui/tests/timeline-panel.spec.ts
index 8fcbcf71..46f08ad6 100644
--- a/ui/tests/timeline-panel.spec.ts
+++ b/ui/tests/timeline-panel.spec.ts
@@ -48,8 +48,32 @@ test('detached audio supports unlink, trim, move, mute, relink, and attach', ()
   expect(audio.programRange).toEqual({ startS: 0, endS: 8 })
   expect(audio.sourceRange).toEqual({ startS: 0, endS: 8 })
   const attached = applyTimelineEdit(relinked.project, { type: 'attach-audio', clipId: 'edit-video-1' })
-  expect(attached.project.tracks.find((track) => track.kind === 'video')!.clips![0].audioMode).toBe('embedded')
+  expect(attached.project.tracks.find((track) => track.kind === 'video')!.clips![0].audioMode).toBe('muted')
   expect(attached.project.tracks.find((track) => track.kind === 'audio')!.clips![0].implicit).toBe(true)
+  expect(attached.project.tracks.find((track) => track.kind === 'audio')!.clips![0].muted).toBe(true)
+  const restored = applyTimelineEdit(attached.project, attached.inverse)
+  expect(restored.project.tracks.find((track) => track.kind === 'audio')!.clips![0].muted).toBe(true)
+})
+
+test('audio mute, delete, and undo work from the clip controls and keyboard', async ({ page }) => {
+  await page.goto('/?scenario=audio-context-actions')
+  const audio = page.locator('[data-timeline-clip="edit-video-1:embedded-audio"]')
+  await audio.locator('..').getByRole('button', { name: 'Mute audio', exact: true }).click()
+  await expect(audio).toHaveAttribute('data-muted', 'true')
+  await expect(audio.locator('.timeline-waveform')).toHaveCSS('opacity', '0.2')
+  await page.keyboard.press('Control+z')
+  await expect(audio).toHaveAttribute('data-muted', 'false')
+  await audio.click({ button: 'right' })
+  await page.getByRole('menuitem', { name: 'Detach audio', exact: true }).click()
+  const detached = page.locator('[data-timeline-clip="edit-video-1:audio"]')
+  await detached.click({ button: 'right' })
+  await page.getByRole('menuitem', { name: 'Unlink audio and video', exact: true }).click()
+  await detached.focus()
+  await page.keyboard.press('Delete')
+  await expect(detached).toHaveCount(0)
+  await expect(page.locator('[data-timeline-clip="edit-video-1"]')).toBeVisible()
+  await page.keyboard.press('Control+z')
+  await expect(detached).toBeVisible()
 })
 
 test('linked detached audio follows video edits and survives delete undo', () => {
@@ -384,7 +408,7 @@ test('timeline selection and click seek update one store playhead', async ({ pag
   await expect(clip).toHaveAttribute('aria-pressed', 'true')
 })
 
-test('cursor and magnet tools are mutually exclusive and magnet snaps the playhead to a clip edge', async ({ page }) => {
+test('selection keeps snapping independent and magnet snaps the playhead to a clip edge', async ({ page }) => {
   await page.setViewportSize({ width: 1008, height: 444 })
   await page.goto('/?scenario=1-324')
 
@@ -395,7 +419,7 @@ test('cursor and magnet tools are mutually exclusive and magnet snaps the playhe
   await expect(cursor).toHaveAttribute('title', 'Select and position timeline items')
   await expect(magnet).toHaveAttribute('title', 'Magnetic snapping off')
   await magnet.click()
-  await expect(cursor).toHaveAttribute('aria-pressed', 'false')
+  await expect(cursor).toHaveAttribute('aria-pressed', 'true')
   await expect(magnet).toHaveAttribute('aria-pressed', 'true')
   await expect(magnet).toHaveAttribute('title', 'Magnetic snapping on')
 
@@ -408,9 +432,29 @@ test('cursor and magnet tools are mutually exclusive and magnet snaps the playhe
 
   await cursor.click()
   await expect(cursor).toHaveAttribute('aria-pressed', 'true')
+  await expect(magnet).toHaveAttribute('aria-pressed', 'true')
+  await magnet.click()
   await expect(magnet).toHaveAttribute('aria-pressed', 'false')
 })
 
+test('keyboard activation selects clips and fit resets zoom and horizontal scroll', async ({ page }) => {
+  await page.setViewportSize({ width: 1008, height: 444 })
+  await page.goto('/?scenario=1-324')
+  const clip = page.locator('[data-timeline-clip="video-2"]')
+  await clip.focus()
+  await page.keyboard.press('Enter')
+  await expect(clip).toHaveAttribute('aria-pressed', 'true')
+  await page.getByRole('button', { name: 'Zoom in timeline' }).click()
+  await expect(page.getByLabel('Timeline zoom', { exact: true })).toHaveText('125%')
+  const surface = page.locator('[data-timeline-surface]')
+  await surface.evaluate((element) => { element.scrollLeft = 150 })
+  await expect.poll(() => surface.evaluate((element) => element.scrollLeft)).toBe(150)
+  await page.getByRole('button', { name: 'Fit timeline' }).click()
+  await expect(page.getByLabel('Timeline zoom', { exact: true })).toHaveText('100%')
+  await expect.poll(() => surface.evaluate((element) => element.scrollLeft)).toBe(0)
+  await expect.poll(() => page.locator('.timeline-ruler-scroll').evaluate((element) => element.scrollLeft)).toBe(0)
+})
+
 test('timeline context menu keeps the playhead stable and supports keyboard navigation', async ({ page }) => {
   await page.setViewportSize({ width: 1008, height: 444 })
   await page.goto('/?scenario=timeline-editing')
diff --git a/ui/tests/viewer-panel.spec.ts b/ui/tests/viewer-panel.spec.ts
index c763ea31..7009e101 100644
--- a/ui/tests/viewer-panel.spec.ts
+++ b/ui/tests/viewer-panel.spec.ts
@@ -43,6 +43,47 @@ const runtimeSnapshot = (overrides: Record<string, unknown> = {}) => ({
   ...overrides,
 })
 
+test('Space uses the preview play control and respects inputs, menus, and disabled playback', async ({ page }) => {
+  await page.route('**/v1/projects/project_keyboard/snapshot', (route) => route.fulfill({
+    contentType: 'application/json', body: JSON.stringify({ ok: true, snapshot: runtimeSnapshot() }),
+  }))
+  await page.goto('/?project=project_keyboard')
+  const play = page.getByRole('button', { name: 'Play', exact: true })
+  await expect(play).toBeEnabled()
+  await expect(play).toHaveAttribute('aria-keyshortcuts', 'Space')
+  // Observe the shared control; media decoding is covered by playback checks.
+  await play.evaluate((element) => {
+    element.addEventListener('click', (event) => {
+      event.stopImmediatePropagation()
+      element.setAttribute('data-clicks', String(Number(element.getAttribute('data-clicks') ?? 0) + 1))
+    })
+  })
+  await page.locator('[data-timeline-surface]').focus()
+  await page.keyboard.press('Space')
+  await expect(play).toHaveAttribute('data-clicks', '1')
+  await page.locator('[data-timeline-clip="clip-1"]').focus()
+  await page.keyboard.press('Space')
+  await expect(play).toHaveAttribute('data-clicks', '2')
+  await page.keyboard.down('Space')
+  await page.keyboard.down('Space')
+  await page.keyboard.up('Space')
+  await expect(play).toHaveAttribute('data-clicks', '3')
+  const search = page.getByRole('textbox').first()
+  await search.fill('clip')
+  await search.press('Space')
+  await expect(search).toHaveValue('clip ')
+  await expect(play).toHaveAttribute('data-clicks', '3')
+  await page.getByRole('button', { name: 'Aspect ratio', exact: true }).click()
+  await page.getByRole('menuitemradio').first().focus()
+  await page.keyboard.press('Space')
+  await expect(play).toHaveAttribute('data-clicks', '3')
+  await page.goto('/?scenario=1-60')
+  await expect(play).toBeDisabled()
+  await page.locator('[data-timeline-surface]').focus()
+  await page.keyboard.press('Space')
+  await expect(play).toBeDisabled()
+})
+
 test('production runtime shows explicit loading and error surfaces without fixture fallback', async ({ page }) => {
   let releaseSnapshot: (() => void) | undefined
   await page.route('**/v1/projects/project_loading/snapshot', async (route) => {