feat(content): add Books content type and ContentPanel tab system

Wire up ContentPanel with tab navigation for all existing content types
(films, songs, podcasts, news, websites, magazine). Add complete Books
pipeline: type definition, extraction (tags + pattern matching), cover
fetching from Open Library, BookCard/BookGrid/BookDetail components,
inline chat cards, and prompt index badges.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/app/src/components/chat/ChatMessage.vue

@@ -21,6 +21,15 @@
         />
       </div>
 
+      <div v-if="inlineBooks.length > 0" class="mt-3 space-y-1" @click.stop>
+        <BookCard
+          v-for="book in inlineBooks"
+          :key="book.id"
+          :book="book"
+          @select="handleBookSelect"
+        />
+      </div>
+
       <div v-if="inlineSongs.length > 0" class="mt-3 space-y-1" @click.stop>
         <SongCard
           v-for="song in inlineSongs"
@@ -67,6 +76,13 @@
         >
           View all {{ inlineFilms.length }} films →
         </button>
+        <button
+          v-else-if="inlineBooks.length > 1"
+          class="text-[10px] text-accent/70 hover:text-accent transition-colors"
+          @click.stop="openPanel"
+        >
+          View all {{ inlineBooks.length }} books →
+        </button>
         <button
           v-else-if="inlineSongs.length > 1"
           class="text-[10px] text-accent/70 hover:text-accent transition-colors"
@@ -110,11 +126,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { Message, WebSearchResult } from '@aiui/core/types/message'
-import type { Film, Song, Podcast } from '@aiui/core/types/content'
+import type { Film, Song, Podcast, Book } from '@aiui/core/types/content'
 import { useTheme } from '@/composables/useTheme'
 import { useContentPanel, type MagazineSection } from '@/composables/useContentPanel'
 import { useArticleOverlayStore } from '@/stores/articleOverlay'
 import FilmCard from '@/components/content/FilmCard.vue'
+import BookCard from '@/components/content/BookCard.vue'
 import SongCard from '@/components/content/SongCard.vue'
 import PodcastCard from '@/components/content/PodcastCard.vue'
 import NewsCard from '@/components/content/NewsCard.vue'
@@ -129,13 +146,13 @@ const props = withDefaults(
 )
 
 const { isDark } = useTheme()
-const { getContextualInlineContent, stripContentTags, stripMarkdownLinks, updatePanelFromText, openFilmDetail, openSongDetail, openPodcastDetail, openArticleDetail, closeFilmDetail, closeSongDetail, closePodcastDetail } = useContentPanel()
+const { getContextualInlineContent, stripContentTags, stripMarkdownLinks, updatePanelFromText, openFilmDetail, openBookDetail, openSongDetail, openPodcastDetail, openArticleDetail, closeFilmDetail, closeBookDetail, closeSongDetail, closePodcastDetail } = useContentPanel()
 const overlayStore = useArticleOverlayStore()
 
 const isUser = computed(() => props.message.role === 'user')
 
 const inlineContent = computed(() => {
-  if (isUser.value) return { films: [] as Film[], songs: [] as Song[], podcasts: [] as Podcast[], newsLinks: [] as WebSearchResult[], websitesLinks: [] as WebSearchResult[], magazineSections: [] as MagazineSection[] }
+  if (isUser.value) return { films: [] as Film[], books: [] as Book[], songs: [] as Song[], podcasts: [] as Podcast[], newsLinks: [] as WebSearchResult[], websitesLinks: [] as WebSearchResult[], magazineSections: [] as MagazineSection[] }
   return getContextualInlineContent(props.message.content, props.triggeringQuery, props.message.webResults ?? [])
 })
 
@@ -146,6 +163,7 @@ const bubbleClasses = computed(() =>
 )
 
 const inlineFilms = computed(() => inlineContent.value.films)
+const inlineBooks = computed(() => inlineContent.value.books ?? [])
 const inlineSongs = computed(() => inlineContent.value.songs)
 const inlinePodcasts = computed(() => inlineContent.value.podcasts)
 const inlineNewsLinks = computed(() => inlineContent.value.newsLinks ?? [])
@@ -154,6 +172,7 @@ const inlineMagazineSections = computed(() => inlineContent.value.magazineSectio
 
 const hasContext = computed(() => !isUser.value && (
   inlineFilms.value.length > 0 ||
+  inlineBooks.value.length > 0 ||
   inlineSongs.value.length > 0 ||
   inlinePodcasts.value.length > 0 ||
   inlineNewsLinks.value.length > 0 ||
@@ -184,9 +203,18 @@ function handleFilmSelect(film: Film) {
   openFilmDetail(film)
 }
 
+function handleBookSelect(book: Book) {
+  openPanelWithContext()
+  closeFilmDetail()
+  closeSongDetail()
+  closePodcastDetail()
+  openBookDetail(book)
+}
+
 function handleSongSelect(song: Song) {
   openPanelWithContext()
   closeFilmDetail()
+  closeBookDetail()
   closePodcastDetail()
   openSongDetail(song)
 }

packages/app/src/components/chat/PromptIndex.vue

@@ -87,6 +87,7 @@ const promptPairs = computed<PromptPair[]>(() => {
         assistantMsg.webResults ?? [],
       )
       if (content.films.length > 0) badges.push('Films')
+      if ((content.books?.length ?? 0) > 0) badges.push('Books')
       if (content.songs.length > 0) badges.push('Music')
       if (content.podcasts.length > 0) badges.push('Podcasts')
       if (content.magazineSections.length > 0) badges.push('Magazine')

packages/app/src/components/content/BookCard.vue

@@ -0,0 +1,71 @@
+<template>
+  <button
+    class="flex items-start gap-3 w-full text-left p-2.5 rounded-xl transition-all duration-150"
+    :class="isDark
+      ? 'hover:bg-white/5'
+      : 'hover:bg-black/3'"
+    @click="$emit('select', book)"
+  >
+    <div class="w-12 h-auto shrink-0 rounded-md overflow-hidden shadow-md">
+      <div class="aspect-[2/3] relative">
+        <img
+          v-if="coverSrc"
+          :src="coverSrc"
+          :alt="book.title"
+          class="w-full h-full object-cover"
+          loading="lazy"
+          @error="coverFailed = true"
+        />
+        <div
+          v-else
+          class="w-full h-full bg-cover bg-center"
+          :style="{ backgroundImage: `url(${fallbackCover})` }"
+        />
+      </div>
+    </div>
+    <div class="flex-1 min-w-0 py-0.5">
+      <p class="text-sm font-medium leading-snug line-clamp-2"
+         :class="isDark ? 'text-white/90' : 'text-gray-900'">
+        {{ book.title }}
+      </p>
+      <p class="text-xs mt-0.5 truncate"
+         :class="isDark ? 'text-white/50' : 'text-gray-500'">
+        {{ book.author }}<span v-if="book.year"> · {{ book.year }}</span>
+      </p>
+      <p v-if="book.description" class="text-[11px] mt-1 line-clamp-2 leading-relaxed"
+         :class="isDark ? 'text-white/40' : 'text-gray-400'">
+        {{ book.description }}
+      </p>
+    </div>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import type { Book } from '@aiui/core/types/content'
+import { useTheme } from '@/composables/useTheme'
+import { generateBookCoverFallback, fetchBookCover } from '@/composables/useImageFallback'
+
+const props = defineProps<{ book: Book }>()
+defineEmits<{ select: [book: Book] }>()
+
+const { isDark } = useTheme()
+const coverFailed = ref(false)
+const fetchedCover = ref<string | null>(null)
+
+const coverSrc = computed(() => {
+  if (coverFailed.value) return null
+  return props.book.coverUrl || fetchedCover.value
+})
+
+const fallbackCover = computed(() =>
+  generateBookCoverFallback(props.book.title, props.book.author)
+)
+
+onMounted(() => {
+  if (props.book.coverUrl) return
+  fetchBookCover(props.book.title, props.book.author).then((url) => {
+    if (url) fetchedCover.value = url
+  })
+})
+</script>

packages/app/src/components/content/BookDetail.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="book-detail h-full overflow-y-auto overflow-x-hidden scrollbar-hide">
+    <div class="relative w-full overflow-hidden">
+      <div class="w-full aspect-[16/7] flex items-center justify-center overflow-hidden bg-black/20">
+        <img
+          v-if="coverSrc"
+          :src="coverSrc"
+          :alt="book.title"
+          class="w-full h-full object-cover object-center block"
+          @error="coverFailed = true"
+        />
+        <div
+          v-else
+          class="w-full h-full bg-cover bg-center"
+          :style="{ backgroundImage: `url(${fallbackCover})` }"
+        />
+      </div>
+      <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none" />
+
+      <button
+        class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
+        @click="$emit('back')"
+      >
+        <svg class="w-4 h-4 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+        </svg>
+      </button>
+
+      <div class="absolute bottom-0 left-0 right-0 p-4">
+        <h2 class="text-lg font-bold text-white">{{ book.title }}</h2>
+        <div class="flex flex-wrap items-center gap-x-2 gap-y-0.5 mt-1 text-xs text-white/60">
+          <span>{{ book.author }}</span>
+          <span v-if="book.year">{{ book.year }}</span>
+          <span v-if="book.pages">{{ book.pages }} pages</span>
+          <span v-if="book.rating" class="text-amber-400">★ {{ book.rating.toFixed(1) }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="p-4 space-y-4">
+      <p v-if="book.description" class="text-sm leading-relaxed"
+         :class="isDark ? 'text-white/70' : 'text-gray-600'">
+        {{ book.description }}
+      </p>
+
+      <div v-if="book.genres?.length" class="flex flex-wrap gap-1.5">
+        <span
+          v-for="genre in book.genres"
+          :key="genre"
+          class="text-[10px] px-2 py-1 rounded-md font-medium"
+          :class="isDark ? 'bg-white/10 text-white/60' : 'bg-black/5 text-gray-600'"
+        >
+          {{ genre }}
+        </span>
+      </div>
+
+      <div>
+        <h4 class="text-xs font-semibold mb-2"
+            :class="isDark ? 'text-white/50' : 'text-gray-500'">Read on</h4>
+        <div class="space-y-2">
+          <a
+            v-for="src in (book.sources ?? [])"
+            :key="src.url"
+            :href="src.url"
+            target="_blank"
+            rel="noopener"
+            class="flex items-center justify-between p-3 rounded-xl transition-colors"
+            :class="isDark
+              ? 'bg-white/5 hover:bg-white/10'
+              : 'bg-black/3 hover:bg-black/5'"
+          >
+            <div class="flex items-center gap-2.5">
+              <span class="text-sm">{{ sourceIcon(src.type) }}</span>
+              <p class="text-xs font-medium"
+                 :class="isDark ? 'text-white/80' : 'text-gray-800'">{{ src.name }}</p>
+            </div>
+            <svg class="w-4 h-4" :class="isDark ? 'text-white/30' : 'text-gray-400'"
+                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+            </svg>
+          </a>
+          <a
+            v-for="link in readLinks"
+            :key="link.url"
+            :href="link.url"
+            target="_blank"
+            rel="noopener"
+            class="flex items-center justify-between p-3 rounded-xl transition-colors"
+            :class="isDark
+              ? 'bg-white/5 hover:bg-white/10'
+              : 'bg-black/3 hover:bg-black/5'"
+          >
+            <div class="flex items-center gap-2.5">
+              <span class="text-sm">{{ link.icon }}</span>
+              <div>
+                <p class="text-xs font-medium"
+                   :class="isDark ? 'text-white/80' : 'text-gray-800'">{{ link.name }}</p>
+                <p v-if="link.desc" class="text-[10px]"
+                   :class="isDark ? 'text-white/30' : 'text-gray-400'">{{ link.desc }}</p>
+              </div>
+            </div>
+            <svg class="w-4 h-4" :class="isDark ? 'text-white/30' : 'text-gray-400'"
+                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import type { Book } from '@aiui/core/types/content'
+import { useTheme } from '@/composables/useTheme'
+import { generateBookCoverFallback, fetchBookCover } from '@/composables/useImageFallback'
+
+const props = defineProps<{ book: Book }>()
+defineEmits<{ back: [] }>()
+
+const { isDark } = useTheme()
+const coverFailed = ref(false)
+const fetchedCover = ref<string | null>(null)
+
+const coverSrc = computed(() => {
+  if (coverFailed.value) return null
+  return props.book.coverUrl || fetchedCover.value
+})
+
+const fallbackCover = computed(() =>
+  generateBookCoverFallback(props.book.title, props.book.author)
+)
+
+const q = computed(() =>
+  `${props.book.title} ${props.book.author}`.trim().replace(/\s+/g, '+'),
+)
+
+const readLinks = computed(() => [
+  { name: 'Open Library', url: `https://openlibrary.org/search?q=${q.value}`, icon: '📖', desc: 'Free, open catalog' },
+  { name: 'Internet Archive', url: `https://archive.org/search?query=${q.value}`, icon: '🏛️', desc: 'Borrow & read free' },
+  { name: 'Project Gutenberg', url: `https://www.gutenberg.org/ebooks/search/?query=${q.value}`, icon: '📜', desc: 'Public domain' },
+  { name: 'Standard Ebooks', url: `https://standardebooks.org/ebooks?query=${q.value}`, icon: '📕', desc: 'Beautifully formatted' },
+])
+
+function sourceIcon(type: string): string {
+  const icons: Record<string, string> = {
+    openlibrary: '📖',
+    gutenberg: '📜',
+    archive: '🏛️',
+    goodreads: '📚',
+    libgen: '🔓',
+    local: '💾',
+  }
+  return icons[type] ?? '📚'
+}
+
+onMounted(() => {
+  if (props.book.coverUrl) return
+  fetchBookCover(props.book.title, props.book.author).then((url) => {
+    if (url) fetchedCover.value = url
+  })
+})
+</script>

packages/app/src/components/content/BookGrid.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="h-full flex flex-col">
+    <div class="p-4 space-y-3" :style="isDark
+      ? 'border-bottom: 1px solid rgba(255, 255, 255, 0.08)'
+      : 'border-bottom: 1px solid rgba(0, 0, 0, 0.06)'"
+    >
+      <div class="flex items-center justify-between gap-2">
+        <h3 class="text-sm font-bold" :class="isDark ? 'text-white/90' : 'text-gray-900'">
+          {{ title }}
+        </h3>
+        <div class="flex items-center gap-2 shrink-0">
+          <span class="text-[10px] font-mono" :class="isDark ? 'text-white/30' : 'text-gray-400'">
+            {{ filteredBooks.length }} books
+          </span>
+          <slot name="header-actions" />
+        </div>
+      </div>
+
+      <input
+        v-model="search"
+        type="text"
+        placeholder="Search books..."
+        class="w-full px-3 py-2 rounded-lg text-xs outline-none transition-colors"
+        :class="isDark
+          ? 'bg-white/5 text-white/80 placeholder:text-white/25 focus:bg-white/10'
+          : 'bg-black/3 text-gray-800 placeholder:text-gray-400 focus:bg-black/5'"
+      />
+
+      <div v-if="topGenres.length > 0" class="flex flex-wrap gap-1.5">
+        <button
+          v-for="genre in topGenres"
+          :key="genre"
+          class="text-[10px] px-2 py-1 rounded-md transition-all duration-150"
+          :class="activeGenre === genre
+            ? 'nav-tab-active'
+            : isDark
+              ? 'text-white/40 hover:text-white/70 hover:bg-white/5'
+              : 'text-gray-500 hover:text-gray-800 hover:bg-black/5'"
+          @click="activeGenre = activeGenre === genre ? null : genre"
+        >
+          {{ genre }}
+        </button>
+      </div>
+    </div>
+
+    <div class="flex-1 overflow-y-auto custom-scrollbar px-4 pt-4 pb-16">
+      <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
+        <button
+          v-for="book in filteredBooks"
+          :key="book.id"
+          class="group flex flex-col items-stretch text-left w-full path-glass-bubble rounded-2xl overflow-hidden transition-all duration-200 hover:brightness-105"
+          @click="$emit('selectBook', book)"
+        >
+          <div class="cover-card flex-1 min-h-0 relative">
+            <div class="aspect-[2/3] relative w-full overflow-hidden rounded-[10px]">
+              <img
+                v-if="coverSrc(book)"
+                :src="coverSrc(book)!"
+                :alt="book.title"
+                class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+                loading="lazy"
+                @error="onCoverError(book)"
+              />
+              <div
+                v-else
+                class="w-full h-full bg-cover bg-center"
+                :style="{ backgroundImage: `url(${fallbackFor(book)})` }"
+              />
+              <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
+
+              <div class="absolute bottom-0 left-0 right-0 p-2">
+                <p class="text-[11px] font-semibold text-white/90 leading-tight truncate">
+                  {{ book.title }}
+                </p>
+                <p class="text-[9px] text-white/40 truncate mt-0.5">{{ book.author }}</p>
+              </div>
+
+              <div v-if="book.rating" class="absolute top-1.5 left-1.5">
+                <span class="text-[9px] px-1.5 py-0.5 rounded bg-black/60 text-amber-400 backdrop-blur-sm font-medium">
+                  ★ {{ book.rating.toFixed(1) }}
+                </span>
+              </div>
+
+              <div v-if="book.year" class="absolute top-1.5 right-1.5">
+                <span class="text-[8px] px-1 py-0.5 rounded bg-black/60 text-white/70 backdrop-blur-sm">
+                  {{ book.year }}
+                </span>
+              </div>
+            </div>
+          </div>
+          <p class="text-xs font-semibold mt-2 truncate px-0.5"
+             :class="isDark ? 'text-white/90' : 'text-gray-900'">
+            {{ book.title }}
+          </p>
+        </button>
+      </div>
+
+      <div v-if="filteredBooks.length === 0" class="flex items-center justify-center py-12">
+        <p class="text-sm" :class="isDark ? 'text-white/30' : 'text-gray-400'">
+          No books match your search
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive, onMounted, watch } from 'vue'
+import type { Book } from '@aiui/core/types/content'
+import { useTheme } from '@/composables/useTheme'
+import { generateBookCoverFallback, fetchBookCover } from '@/composables/useImageFallback'
+
+const props = withDefaults(defineProps<{
+  books: Book[]
+  title?: string
+}>(), {
+  title: 'Recommended Books',
+})
+
+defineEmits<{ selectBook: [book: Book] }>()
+
+const { isDark } = useTheme()
+const search = ref('')
+const activeGenre = ref<string | null>(null)
+const failedCovers = ref<Set<string>>(new Set())
+const fetchedCovers = reactive<Map<string, string>>(new Map())
+
+function coverSrc(book: Book): string | null {
+  if (failedCovers.value.has(book.id)) return null
+  return book.coverUrl || fetchedCovers.get(book.id) || null
+}
+
+function fallbackFor(book: Book): string {
+  return generateBookCoverFallback(book.title, book.author)
+}
+
+function onCoverError(book: Book) {
+  failedCovers.value.add(book.id)
+  failedCovers.value = new Set(failedCovers.value)
+}
+
+function fetchCoversFor(books: Book[]) {
+  for (const book of books) {
+    if (book.coverUrl || fetchedCovers.has(book.id)) continue
+    fetchBookCover(book.title, book.author).then((url) => {
+      if (url) fetchedCovers.set(book.id, url)
+    })
+  }
+}
+
+onMounted(() => fetchCoversFor(props.books))
+watch(() => props.books, (books) => fetchCoversFor(books), { immediate: false })
+
+const topGenres = computed(() => {
+  const counts = new Map<string, number>()
+  for (const b of props.books) {
+    for (const g of b.genres ?? []) {
+      counts.set(g, (counts.get(g) ?? 0) + 1)
+    }
+  }
+  return [...counts.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 8)
+    .map(([g]) => g)
+})
+
+const filteredBooks = computed(() => {
+  let result = props.books
+  if (search.value) {
+    const q = search.value.toLowerCase()
+    result = result.filter(
+      (b) =>
+        b.title.toLowerCase().includes(q) ||
+        b.author.toLowerCase().includes(q) ||
+        (b.genres ?? []).some((g) => g.toLowerCase().includes(q))
+    )
+  }
+  if (activeGenre.value) {
+    result = result.filter((b) => (b.genres ?? []).includes(activeGenre.value!))
+  }
+  return result
+})
+</script>

packages/app/src/components/content/ContentPanel.vue

@@ -7,9 +7,10 @@
         ? 'fixed inset-0 z-30'
         : 'w-80 xl:w-96 shrink-0'"
     >
+      <!-- Mobile header -->
       <div
         v-if="isMobile"
-        class="p-3 flex items-center justify-between"
+        class="p-3 flex items-center justify-between shrink-0"
         :style="isDark
           ? 'border-bottom: 1px solid rgba(255, 255, 255, 0.08)'
           : 'border-bottom: 1px solid rgba(0, 0, 0, 0.06)'"
@@ -30,18 +31,101 @@
         </button>
       </div>
 
+      <!-- Tab bar (when multiple tabs available) -->
+      <div
+        v-if="availableTabs.length > 1 && !hasDetailOpen"
+        class="flex items-center gap-1 px-3 pt-3 pb-1 shrink-0 overflow-x-auto scrollbar-hide"
+      >
+        <button
+          v-for="tab in availableTabs"
+          :key="tab"
+          class="text-[10px] px-2.5 py-1.5 rounded-lg font-medium whitespace-nowrap transition-all duration-150"
+          :class="activeTab === tab
+            ? 'nav-tab-active'
+            : isDark
+              ? 'text-white/40 hover:text-white/70 hover:bg-white/5'
+              : 'text-gray-500 hover:text-gray-800 hover:bg-black/5'"
+          @click="setActiveTab(tab)"
+        >
+          {{ tabLabel(tab) }}
+        </button>
+      </div>
+
+      <!-- Content area -->
       <div class="flex-1 min-h-0">
+        <!-- Detail views (override tab content) -->
         <FilmDetail
           v-if="selectedFilm"
           :film="selectedFilm"
           @back="closeFilmDetail"
         />
+        <BookDetail
+          v-else-if="selectedBook"
+          :book="selectedBook"
+          @back="closeBookDetail"
+        />
+        <SongDetail
+          v-else-if="selectedSong"
+          :song="selectedSong"
+          @back="closeSongDetail"
+        />
+        <PodcastDetail
+          v-else-if="selectedPodcast"
+          :podcast="selectedPodcast"
+          @back="closePodcastDetail"
+        />
+        <ArticleDetail
+          v-else-if="selectedArticle"
+          :article="selectedArticle"
+          @back="closeArticleDetail"
+        />
+
+        <!-- Grid views by active tab -->
         <FilmGrid
-          v-else
+          v-else-if="activeTab === 'film'"
           :films="panelFilms"
           :title="panelTitle"
           @select-film="openFilmDetail"
         />
+        <BookGrid
+          v-else-if="activeTab === 'book'"
+          :books="panelBooks"
+          :title="panelTitle"
+          @select-book="openBookDetail"
+        />
+        <SongGrid
+          v-else-if="activeTab === 'song'"
+          :songs="panelSongs"
+          :title="panelTitle"
+          @select-song="openSongDetail"
+        />
+        <PodcastGrid
+          v-else-if="activeTab === 'podcast'"
+          :podcasts="panelPodcasts"
+          :title="panelTitle"
+          @select-podcast="openPodcastDetail"
+        />
+        <NewsGrid
+          v-else-if="activeTab === 'news'"
+          :articles="panelWebResults"
+          :title="panelTitle"
+          :query="panelQuery"
+          variant="news"
+        />
+        <NewsGrid
+          v-else-if="activeTab === 'websites'"
+          :articles="panelWebsites"
+          :title="panelTitle"
+          :query="panelQuery"
+          variant="websites"
+        />
+        <MagazineGrid
+          v-else-if="activeTab === 'magazine'"
+          :sections="panelMagazineSections"
+          :title="panelTitle"
+          :query="panelQuery"
+          :hero-image="panelMagazineHeroImage ?? undefined"
+        />
       </div>
     </aside>
   </Transition>
@@ -50,21 +134,56 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useTheme } from '@/composables/useTheme'
-import { useContentPanel } from '@/composables/useContentPanel'
+import { useContentPanel, type ContentTab } from '@/composables/useContentPanel'
 import FilmGrid from './FilmGrid.vue'
 import FilmDetail from './FilmDetail.vue'
+import BookGrid from './BookGrid.vue'
+import BookDetail from './BookDetail.vue'
+import SongGrid from './SongGrid.vue'
+import SongDetail from './SongDetail.vue'
+import PodcastGrid from './PodcastGrid.vue'
+import PodcastDetail from './PodcastDetail.vue'
+import NewsGrid from './NewsGrid.vue'
+import ArticleDetail from './ArticleDetail.vue'
+import MagazineGrid from './MagazineGrid.vue'
 
 const { isDark } = useTheme()
 const {
   panelOpen,
   panelFilms,
+  panelBooks,
+  panelSongs,
+  panelPodcasts,
+  panelWebResults,
+  panelWebsites,
+  panelMagazineSections,
+  panelMagazineHeroImage,
   panelTitle,
+  panelQuery,
+  activeTab,
+  availableTabs,
   selectedFilm,
+  selectedBook,
+  selectedSong,
+  selectedPodcast,
+  selectedArticle,
+  setActiveTab,
   openFilmDetail,
   closeFilmDetail,
+  openBookDetail,
+  closeBookDetail,
+  openSongDetail,
+  closeSongDetail,
+  openPodcastDetail,
+  closePodcastDetail,
+  closeArticleDetail,
   closePanel,
 } = useContentPanel()
 
+const hasDetailOpen = computed(() =>
+  !!(selectedFilm.value || selectedBook.value || selectedSong.value || selectedPodcast.value || selectedArticle.value)
+)
+
 const windowWidth = ref(window.innerWidth)
 const isMobile = computed(() => windowWidth.value < 1024)
 
@@ -72,6 +191,20 @@ function onResize() {
   windowWidth.value = window.innerWidth
 }
 
+const TAB_LABELS: Record<ContentTab, string> = {
+  film: 'Films',
+  book: 'Books',
+  song: 'Music',
+  podcast: 'Podcasts',
+  news: 'News',
+  websites: 'Web',
+  magazine: 'Brief',
+}
+
+function tabLabel(tab: ContentTab): string {
+  return TAB_LABELS[tab] ?? tab
+}
+
 onMounted(() => window.addEventListener('resize', onResize))
 onUnmounted(() => window.removeEventListener('resize', onResize))
 </script>

packages/app/src/composables/useContentPanel.ts

@@ -1,13 +1,13 @@
 import { ref } from 'vue'
-import type { Film, Song, Podcast } from '@aiui/core/types/content'
+import type { Film, Song, Podcast, Book } from '@aiui/core/types/content'
 import type { WebSearchResult } from '@aiui/core/types/message'
 import { mockFilms } from '@/mocks/films'
 import { mockSongs } from '@/mocks/songs'
 import { mockPodcasts } from '@/mocks/podcasts'
-import { generatePosterFallback, generateSongCoverFallback } from '@/composables/useImageFallback'
+import { generatePosterFallback, generateSongCoverFallback, generateBookCoverFallback } from '@/composables/useImageFallback'
 import { fetchRssFromUrls } from '@/composables/useRssFetch'
 
-export type ContentTab = 'film' | 'song' | 'podcast' | 'news' | 'websites' | 'magazine'
+export type ContentTab = 'film' | 'song' | 'podcast' | 'book' | 'news' | 'websites' | 'magazine'
 
 export interface MagazineSection {
   title: string
@@ -22,6 +22,7 @@ export interface MagazineSection {
 
 const panelOpen = ref(false)
 const panelFilms = ref<Film[]>([])
+const panelBooks = ref<Book[]>([])
 const panelWebResults = ref<WebSearchResult[]>([])
 const panelRssArticles = ref<WebSearchResult[]>([])
 const panelWebsites = ref<WebSearchResult[]>([])
@@ -30,6 +31,7 @@ const panelMagazineHeroImage = ref<string | null>(null)
 const panelSongs = ref<Song[]>([])
 const panelPodcasts = ref<Podcast[]>([])
 const selectedFilm = ref<Film | null>(null)
+const selectedBook = ref<Book | null>(null)
 const selectedSong = ref<Song | null>(null)
 const selectedPodcast = ref<Podcast | null>(null)
 const selectedArticle = ref<WebSearchResult | null>(null)
@@ -254,6 +256,7 @@ function preferredFirstTab(userQuery: string): ContentTab | null {
   if (/\b(film|movie|movies)\b/.test(q)) return 'film'
   if (/\b(song|music|track|album|band|artist|listen)\b/.test(q)) return 'song'
   if (/\b(podcast|episode|show|listen to)\b/.test(q)) return 'podcast'
+  if (/\b(book|books|read|reading|novel|author|nonfiction|non-fiction)\b/.test(q)) return 'book'
   if (isNewsQuery(q)) return 'news'
   if (isWebsitesQuery(q)) return 'websites'
   return null
@@ -266,6 +269,7 @@ function filterTabsByContext(
   hasFilms: boolean,
   hasSongs: boolean,
   hasPodcasts: boolean,
+  hasBooks: boolean,
   hasNews: boolean,
   hasWebsites: boolean,
   hasMagazine: boolean,
@@ -282,16 +286,17 @@ function filterTabsByContext(
     return tabs
   }
 
-  if (hasMagazine && !hasFilms && !hasSongs && !hasPodcasts && !hasNews && !hasWebsites) {
+  if (hasMagazine && !hasFilms && !hasSongs && !hasPodcasts && !hasBooks && !hasNews && !hasWebsites) {
     return ['magazine']
   }
 
-  if (hasWebsites && !hasFilms && !hasSongs && !hasPodcasts && !hasNews && !hasMagazine) {
+  if (hasWebsites && !hasFilms && !hasSongs && !hasPodcasts && !hasBooks && !hasNews && !hasMagazine) {
     return ['websites']
   }
 
   const all: ContentTab[] = []
   if (hasFilms) all.push('film')
+  if (hasBooks) all.push('book')
   if (hasSongs) all.push('song')
   if (hasPodcasts) all.push('podcast')
   if (hasMagazine) all.push('magazine')
@@ -335,6 +340,9 @@ function looksLikeSong(title: string, artist: string): boolean {
 const PODCAST_TAG_RE = /\[\[podcast:(p?\d+)\]\]/gi
 const PODCAST_EXT_RE = /\[\[podcast_ext:([^|]+)\|([^|]+)(?:\|(\d{4}))?\]\]/gi
 
+const BOOK_TAG_RE = /\[\[book:(b?\d+)\]\]/gi
+const BOOK_EXT_RE = /\[\[book_ext:([^|]+)\|([^|]+)(?:\|(\d{4}))?\]\]/gi
+
 /** Reject obvious non-podcast phrases (documentation, mailing lists, etc.) */
 function looksLikePodcast(title: string, host: string): boolean {
   const t = title.toLowerCase()
@@ -658,11 +666,109 @@ export function useContentPanel() {
     return [...libraryPodcasts, ...externalPodcasts]
   }
 
+  function extractExternalBooks(text: string): Book[] {
+    const books: Book[] = []
+    const seen = new Set<string>()
+    let match: RegExpExecArray | null
+    const re = new RegExp(BOOK_EXT_RE.source, 'gi')
+    while ((match = re.exec(text)) !== null) {
+      const title = match[1].trim()
+      const author = match[2].trim()
+      const year = match[3] ? parseInt(match[3], 10) : undefined
+      const key = `${title.toLowerCase()}|${author.toLowerCase()}`
+      if (seen.has(key)) continue
+      seen.add(key)
+      books.push({
+        id: `ext-${key.replace(/\W/g, '-')}`,
+        title,
+        author,
+        year,
+        coverUrl: undefined,
+        description: extractDescriptionForTag(text, match.index, match[0].length),
+        genres: [],
+        sources: [],
+      })
+    }
+    return books
+  }
+
+  /** Extract book-like patterns from AI response text:
+   * - "Title" by Author (quoted)
+   * - **Title** by Author (bold markdown)
+   * - Title — Author (list format)
+   * Only matches when context suggests books (book query or book-like response) */
+  function extractBooksFromPatterns(text: string): Book[] {
+    const books: { title: string; author: string; year?: number; desc: string; pos: number }[] = []
+    const seen = new Set<string>()
+
+    const patterns: { re: RegExp; titleIdx: number; authorIdx: number }[] = [
+      // "Title" by Author
+      { re: /["""]([^"""]{2,80})["""]\s+by\s+([A-Z][^,\n\.]{1,50}?)(?:\s*[,()\n\.]|$)/gi, titleIdx: 1, authorIdx: 2 },
+      // **Title** by Author
+      { re: /\*\*([^*]{2,80})\*\*\s+by\s+([A-Z][^,\n\.]{1,50}?)(?:\s*[,()\n\.]|$)/g, titleIdx: 1, authorIdx: 2 },
+      // - Title — Author or Title by Author (in list)
+      { re: /(?:^|\n)\s*(?:\d+\.\s*|[-•]\s*)\*{0,2}([^*\n\-–—]{2,80}?)\*{0,2}\s+(?:by|—|–)\s+([A-Z][^,\n]{1,50}?)(?:\s*[\n(,.]|$)/gm, titleIdx: 1, authorIdx: 2 },
+    ]
+
+    for (const { re, titleIdx, authorIdx } of patterns) {
+      let m: RegExpExecArray | null
+      const rx = new RegExp(re.source, re.flags)
+      while ((m = rx.exec(text)) !== null) {
+        const title = m[titleIdx].trim().replace(/^\*\*|\*\*$/g, '')
+        const author = m[authorIdx].trim().replace(/^\*\*|\*\*$/g, '')
+        if (title.length < 2 || author.length < 2) continue
+        // Skip if it looks like a film/song/podcast tag
+        if (/\[\[(film|song|podcast|book)(_ext)?:/.test(title)) continue
+        // Skip numbers-only
+        if (/^\d{4}$/.test(title) || /^\d{4}$/.test(author)) continue
+        const key = `${title.toLowerCase()}|${author.toLowerCase()}`
+        if (seen.has(key)) continue
+        seen.add(key)
+        const desc = extractDescriptionForTag(text, m.index, m[0].length)
+        books.push({ title, author, desc, pos: m.index })
+      }
+    }
+
+    return books
+      .sort((a, b) => a.pos - b.pos)
+      .map(({ title, author, desc }) => ({
+        id: `ext-${`${title}|${author}`.toLowerCase().replace(/\W/g, '-')}`,
+        title,
+        author,
+        description: desc,
+        coverUrl: undefined,
+        genres: [],
+        sources: [],
+      }))
+  }
+
+  function isBookQuery(q: string): boolean {
+    return /\b(book|books|read|reading|novel|novels|author|nonfiction|non-fiction|recommend.*read|must.read|literature)\b/i.test(q)
+  }
+
+  function isBookLikeResponse(text: string): boolean {
+    return /\b(novel|author|pages?|ISBN|published|bestsell|literary|fiction|nonfiction|book)\b/i.test(text) &&
+      (text.match(/\bby\s+[A-Z]/g)?.length ?? 0) >= 2
+  }
+
+  function extractAllBooks(text: string, userQuery: string): Book[] {
+    const externalBooks = extractExternalBooks(text)
+    if (externalBooks.length > 0) return externalBooks
+    // Only do fallback pattern matching if the query or response looks book-related
+    if (!isBookQuery(userQuery) && !isBookLikeResponse(text)) return []
+    // Skip if other content types are already tagged
+    if (extractFilmIds(text).length > 0 || /\[\[film_ext:/.test(text)) return []
+    if (extractSongIds(text).length > 0 || /\[\[song_ext:/.test(text)) return []
+    if (isNewsLikeResponse(text)) return []
+    return extractBooksFromPatterns(text)
+  }
+
   function updatePanelFromText(text: string, userQuery = '', webResults: WebSearchResult[] = []) {
     panelQuery.value = userQuery.trim()
     const songs = extractAllSongs(text)
     const films = extractAllFilms(text)
     const podcasts = extractAllPodcasts(text)
+    const books = extractAllBooks(text, userQuery)
     const fromMarkdown = extractMarkdownLinks(text)
     const boldDomains = extractBoldDomainLinks(text)
 
@@ -700,11 +806,12 @@ export function useContentPanel() {
       })
     }
 
-    const tabs = filterTabsByContext(userQuery, films.length > 0, songs.length > 0, podcasts.length > 0, hasNews, hasWebsites, hasMagazine)
+    const tabs = filterTabsByContext(userQuery, films.length > 0, songs.length > 0, podcasts.length > 0, books.length > 0, hasNews, hasWebsites, hasMagazine)
     availableTabs.value = tabs.length > 0 ? tabs : ['film']
     activeTab.value = tabs[0] ?? 'film'
 
     const showFilms = tabs.includes('film')
+    const showBooks = tabs.includes('book')
     const showSongs = tabs.includes('song')
     const showPodcasts = tabs.includes('podcast')
     const showNews = tabs.includes('news')
@@ -712,6 +819,7 @@ export function useContentPanel() {
     const showMagazine = tabs.includes('magazine')
 
     const visibleFilms = showFilms ? films : []
+    const visibleBooks = showBooks ? books : []
     const visibleSongs = showSongs ? songs : []
     const visiblePodcasts = showPodcasts ? podcasts : []
     const visibleNews = showNews ? mergedNews : []
@@ -719,6 +827,7 @@ export function useContentPanel() {
     const visibleMagazineSections = showMagazine ? magazineSections : []
 
     panelFilms.value = visibleFilms
+    panelBooks.value = visibleBooks
     panelSongs.value = visibleSongs
     panelPodcasts.value = visiblePodcasts
     panelWebResults.value = visibleNews
@@ -728,10 +837,12 @@ export function useContentPanel() {
       ? (extractMagazineHeroImage(text) ?? webResults[0]?.imgSrc ?? null)
       : null
     selectedFilm.value = null
+    selectedBook.value = null
     selectedSong.value = null
     selectedPodcast.value = null
 
     if (visibleFilms.length > 0) contentType.value = 'film'
+    else if (visibleBooks.length > 0) contentType.value = 'film'
     else if (visibleSongs.length > 0) contentType.value = 'song'
     else if (visiblePodcasts.length > 0) contentType.value = 'podcast'
     else if (visibleNews.length > 0) contentType.value = 'film'
@@ -739,6 +850,8 @@ export function useContentPanel() {
 
     if (visibleFilms.length === 1) panelTitle.value = visibleFilms[0].title
     else if (visibleFilms.length > 1) panelTitle.value = `${visibleFilms.length} Films`
+    else if (visibleBooks.length === 1) panelTitle.value = visibleBooks[0].title
+    else if (visibleBooks.length > 1) panelTitle.value = `${visibleBooks.length} Books`
     else if (visibleSongs.length === 1) panelTitle.value = visibleSongs[0].title
     else if (visibleSongs.length > 1) panelTitle.value = `${visibleSongs.length} Songs`
     else if (visiblePodcasts.length === 1) panelTitle.value = visiblePodcasts[0].title
@@ -766,6 +879,7 @@ export function useContentPanel() {
     const films = extractAllFilms(text)
     const songs = extractAllSongs(text)
     const podcasts = extractAllPodcasts(text)
+    const books = extractAllBooks(text, userQuery)
     const magazineSections = extractMagazineSections(text)
     const hasMagazine = magazineSections.length >= 1 && (isNewsQuery(userQuery) || isNewsLikeResponse(text) || /sentiment|bearish|bull case|macro|%|BTC|bitcoin|BIP|protocol|debate|what'?s happening/i.test(text))
     const fromMarkdown = extractMarkdownLinks(text)
@@ -776,9 +890,10 @@ export function useContentPanel() {
     const websitesFromMd = hasLinkableContent ? fromMarkdown : []
     const websitesLinks = mergeNewsResults(websitesFromMd, boldDomains)
     const hasWebsites = websitesLinks.length > 0
-    const tabs = filterTabsByContext(userQuery, films.length > 0, songs.length > 0, podcasts.length > 0, hasNews, hasWebsites, hasMagazine)
+    const tabs = filterTabsByContext(userQuery, films.length > 0, songs.length > 0, podcasts.length > 0, books.length > 0, hasNews, hasWebsites, hasMagazine)
     return {
       films: tabs.includes('film') ? films : [],
+      books: tabs.includes('book') ? books : [],
       songs: tabs.includes('song') ? songs : [],
       podcasts: tabs.includes('podcast') ? podcasts : [],
       newsLinks: tabs.includes('news') ? newsLinks : [],
@@ -811,8 +926,16 @@ export function useContentPanel() {
       .trim()
   }
 
+  function stripBookTags(text: string): string {
+    return text
+      .replace(BOOK_TAG_RE, '')
+      .replace(BOOK_EXT_RE, '')
+      .replace(/\n{3,}/g, '\n\n')
+      .trim()
+  }
+
   function stripContentTags(text: string): string {
-    return stripFilmTags(stripSongTags(stripPodcastTags(text)))
+    return stripFilmTags(stripSongTags(stripPodcastTags(stripBookTags(text))))
   }
 
   /** Remove markdown links when surfacing as inline cards to avoid duplication */
@@ -826,6 +949,7 @@ export function useContentPanel() {
 
   function openFilmDetail(film: Film) {
     selectedFilm.value = film
+    selectedBook.value = null
     selectedSong.value = null
     selectedPodcast.value = null
     selectedArticle.value = null
@@ -835,9 +959,22 @@ export function useContentPanel() {
     selectedFilm.value = null
   }
 
+  function openBookDetail(book: Book) {
+    selectedBook.value = book
+    selectedFilm.value = null
+    selectedSong.value = null
+    selectedPodcast.value = null
+    selectedArticle.value = null
+  }
+
+  function closeBookDetail() {
+    selectedBook.value = null
+  }
+
   function openSongDetail(song: Song) {
     selectedSong.value = song
     selectedFilm.value = null
+    selectedBook.value = null
     selectedPodcast.value = null
     selectedArticle.value = null
   }
@@ -849,6 +986,7 @@ export function useContentPanel() {
   function openPodcastDetail(podcast: Podcast) {
     selectedPodcast.value = podcast
     selectedFilm.value = null
+    selectedBook.value = null
     selectedSong.value = null
     selectedArticle.value = null
   }
@@ -860,6 +998,7 @@ export function useContentPanel() {
   function openArticleDetail(article: WebSearchResult) {
     selectedArticle.value = article
     selectedFilm.value = null
+    selectedBook.value = null
     selectedSong.value = null
     selectedPodcast.value = null
     panelOpen.value = true
@@ -872,6 +1011,7 @@ export function useContentPanel() {
   function closePanel() {
     panelOpen.value = false
     selectedFilm.value = null
+    selectedBook.value = null
     selectedSong.value = null
     selectedPodcast.value = null
     selectedArticle.value = null
@@ -921,6 +1061,7 @@ export function useContentPanel() {
   return {
     panelOpen,
     panelFilms,
+    panelBooks,
     panelSongs,
     panelPodcasts,
     panelWebResults,
@@ -928,6 +1069,7 @@ export function useContentPanel() {
     panelMagazineSections,
     panelMagazineHeroImage,
     selectedFilm,
+    selectedBook,
     selectedSong,
     selectedPodcast,
     selectedArticle,
@@ -940,6 +1082,9 @@ export function useContentPanel() {
     extractFilmIds,
     resolveFilms,
     extractAllFilms,
+    extractAllBooks,
+    openBookDetail,
+    closeBookDetail,
     extractSongIds,
     resolveSongs,
     extractAllSongs,

packages/app/src/composables/useImageFallback.ts

@@ -214,6 +214,74 @@ export async function fetchPodcastCover(
 }
 
 /** Fetch album artwork from iTunes Search API (free, no key). Returns hi-res URL (600x600). */
+const bookCoverCache = new Map<string, string>()
+const SESSION_BOOK_KEY = 'aiui-book-cover-cache'
+
+function bookCacheKey(title: string, author: string): string {
+  return `${title.toLowerCase().trim()}|${author.toLowerCase().trim()}`
+}
+
+function loadBookCache(): void {
+  try {
+    const raw = sessionStorage.getItem(SESSION_BOOK_KEY)
+    if (raw) {
+      const parsed = JSON.parse(raw) as Record<string, string>
+      Object.entries(parsed).forEach(([k, v]) => bookCoverCache.set(k, v))
+    }
+  } catch { /* ignore */ }
+}
+
+function saveBookCache(): void {
+  try {
+    const entries = [...bookCoverCache.entries()].slice(-200)
+    sessionStorage.setItem(SESSION_BOOK_KEY, JSON.stringify(Object.fromEntries(entries)))
+  } catch { /* ignore */ }
+}
+
+loadBookCache()
+
+export function generateBookCoverFallback(title: string, author?: string): string {
+  const hue = [...(title + (author ?? ''))].reduce((acc, c) => acc + c.charCodeAt(0), 0) % 360
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 420">
+    <rect width="280" height="420" fill="hsl(${hue}, 25%, 12%)"/>
+    <rect x="2" y="2" width="276" height="416" rx="4" fill="none" stroke="hsl(${hue}, 35%, 22%)" stroke-width="2"/>
+    <rect x="12" y="12" width="256" height="396" rx="2" fill="none" stroke="hsl(${hue}, 30%, 18%)" stroke-width="1"/>
+    <line x1="28" y1="12" x2="28" y2="408" stroke="hsl(${hue}, 30%, 20%)" stroke-width="2"/>
+    <text x="154" y="190" text-anchor="middle" fill="hsl(${hue}, 50%, 70%)" font-family="Georgia,serif" font-size="18" font-weight="700">
+      ${escapeXml(title.length > 22 ? title.slice(0, 20) + '…' : title)}
+    </text>
+    ${author ? `<text x="154" y="220" text-anchor="middle" fill="hsl(${hue}, 30%, 50%)" font-family="system-ui" font-size="12">${escapeXml(author.length > 26 ? author.slice(0, 24) + '…' : author)}</text>` : ''}
+  </svg>`
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`
+}
+
+/** Fetch book cover from Open Library Covers API (free, no key). */
+export async function fetchBookCover(
+  title: string,
+  author: string,
+): Promise<string | null> {
+  const key = bookCacheKey(title, author)
+  const cached = bookCoverCache.get(key)
+  if (cached) return cached
+
+  try {
+    const q = `${title} ${author}`.trim()
+    const res = await fetch(
+      `https://openlibrary.org/search.json?q=${encodeURIComponent(q)}&limit=1&fields=cover_i`,
+    )
+    if (!res.ok) return null
+    const data = (await res.json()) as { docs?: { cover_i?: number }[] }
+    const coverId = data.docs?.[0]?.cover_i
+    if (!coverId) return null
+    const url = `https://covers.openlibrary.org/b/id/${coverId}-L.jpg`
+    bookCoverCache.set(key, url)
+    saveBookCache()
+    return url
+  } catch {
+    return null
+  }
+}
+
 export async function fetchMusicCover(
   title: string,
   artist: string,

packages/core/src/types/content.ts

@@ -77,3 +77,24 @@ export interface PodcastRendererData {
   query?: string
   totalResults?: number
 }
+
+export interface Book {
+  id: string
+  title: string
+  author: string
+  year?: number
+  coverUrl?: string
+  description?: string
+  genres?: string[]
+  pages?: number
+  isbn?: string
+  rating?: number
+  sources?: BookSource[]
+}
+
+export interface BookSource {
+  type: 'openlibrary' | 'gutenberg' | 'archive' | 'goodreads' | 'libgen' | 'local'
+  name: string
+  url: string
+  icon?: string
+}