diff --git a/packages/app/src/composables/__tests__/useContentPanel.test.ts b/packages/app/src/composables/__tests__/useContentPanel.test.ts
new file mode 100644
index 00000000..5bd4fd5b
--- /dev/null
+++ b/packages/app/src/composables/__tests__/useContentPanel.test.ts
@@ -0,0 +1,87 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { useContentPanel } from '../useContentPanel'
+import type { Film, Song, ImageItem, Place } from '@aiui/core/types/content'
+
+describe('useContentPanel', () => {
+  let panel: ReturnType<typeof useContentPanel>
+
+  beforeEach(() => {
+    panel = useContentPanel()
+    panel.closePanel()
+  })
+
+  it('starts with panel closed', () => {
+    expect(panel.panelOpen.value).toBe(false)
+    expect(panel.availableTabs.value).toHaveLength(0)
+  })
+
+  it('setActiveTab only sets valid tabs', () => {
+    panel.availableTabs.value = ['film', 'song', 'prompt']
+    panel.setActiveTab('film')
+    expect(panel.activeTab.value).toBe('film')
+    panel.setActiveTab('song')
+    expect(panel.activeTab.value).toBe('song')
+    // Invalid tab should not change
+    panel.setActiveTab('podcast')
+    expect(panel.activeTab.value).toBe('song')
+  })
+
+  it('openFilmDetail sets selected film and clears others', () => {
+    const film: Film = { id: 'f1', title: 'Test Film', year: 2025, genres: [], director: 'Dir' }
+    panel.openFilmDetail(film)
+    expect(panel.selectedFilm.value).toEqual(film)
+    expect(panel.selectedSong.value).toBeNull()
+    expect(panel.selectedBook.value).toBeNull()
+  })
+
+  it('closeFilmDetail clears selection', () => {
+    const film: Film = { id: 'f1', title: 'Test Film', year: 2025, genres: [], director: 'Dir' }
+    panel.openFilmDetail(film)
+    panel.closeFilmDetail()
+    expect(panel.selectedFilm.value).toBeNull()
+  })
+
+  it('openSongDetail clears film selection', () => {
+    const film: Film = { id: 'f1', title: 'Test Film', year: 2025, genres: [], director: 'Dir' }
+    const song: Song = { id: 's1', title: 'Test Song', artist: 'Artist', album: 'Album', genres: [] }
+    panel.openFilmDetail(film)
+    panel.openSongDetail(song)
+    expect(panel.selectedSong.value).toEqual(song)
+    expect(panel.selectedFilm.value).toBeNull()
+  })
+
+  it('closePanel resets all state', () => {
+    const film: Film = { id: 'f1', title: 'Test Film', year: 2025, genres: [], director: 'Dir' }
+    panel.openFilmDetail(film)
+    panel.panelOpen.value = true
+    panel.availableTabs.value = ['film', 'prompt']
+    panel.closePanel()
+    expect(panel.panelOpen.value).toBe(false)
+    expect(panel.selectedFilm.value).toBeNull()
+    expect(panel.availableTabs.value).toHaveLength(0)
+  })
+
+  it('enterDesignSystemMode sets up design system tab', () => {
+    panel.enterDesignSystemMode()
+    expect(panel.panelOpen.value).toBe(true)
+    expect(panel.activeTab.value).toBe('design-system')
+    expect(panel.availableTabs.value).toEqual(['design-system'])
+    expect(panel.panelTitle.value).toBe('Design System')
+  })
+
+  it('openImageDetail and closeImageDetail work', () => {
+    const image: ImageItem = { id: 'i1', title: 'Test Image', url: 'https://example.com/img.jpg' }
+    panel.openImageDetail(image)
+    expect(panel.selectedImage.value).toEqual(image)
+    panel.closeImageDetail()
+    expect(panel.selectedImage.value).toBeNull()
+  })
+
+  it('openPlaceDetail and closePlaceDetail work', () => {
+    const place: Place = { id: 'p1', name: 'Test Place', address: '123 St', lat: 0, lng: 0 }
+    panel.openPlaceDetail(place)
+    expect(panel.selectedPlace.value).toEqual(place)
+    panel.closePlaceDetail()
+    expect(panel.selectedPlace.value).toBeNull()
+  })
+})