feat(content): add TV Series content type with TMDB integration

Add complete TV series content surface: extraction from AI responses,
grid/detail views, TMDB TV search endpoint, and panel tab integration.
Includes film_ext-to-TV-series conversion for backward compatibility
and AI prompt instructions for [[tv_ext:...]] tags.

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

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

@@ -30,6 +30,15 @@
         />
       </div>
 
+      <div v-if="inlineTVSeries.length > 0" class="mt-3 space-y-1" @click.stop>
+        <TVSeriesCard
+          v-for="series in inlineTVSeries"
+          :key="series.id"
+          :series="series"
+          @select="handleTVSeriesSelect"
+        />
+      </div>
+
       <div v-if="inlineSongs.length > 0" class="mt-3 space-y-1" @click.stop>
         <SongCard
           v-for="song in inlineSongs"
@@ -83,6 +92,13 @@
         >
           View all {{ inlineBooks.length }} books →
         </button>
+        <button
+          v-else-if="inlineTVSeries.length > 1"
+          class="text-[10px] text-accent/70 hover:text-accent transition-colors"
+          @click.stop="openPanel"
+        >
+          View all {{ inlineTVSeries.length }} series →
+        </button>
         <button
           v-else-if="inlineSongs.length > 1"
           class="text-[10px] text-accent/70 hover:text-accent transition-colors"
@@ -126,12 +142,13 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { Message, WebSearchResult } from '@aiui/core/types/message'
-import type { Film, Song, Podcast, Book } from '@aiui/core/types/content'
+import type { Film, Song, Podcast, Book, TVSeries } 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 TVSeriesCard from '@/components/content/TVSeriesCard.vue'
 import SongCard from '@/components/content/SongCard.vue'
 import PodcastCard from '@/components/content/PodcastCard.vue'
 import NewsCard from '@/components/content/NewsCard.vue'
@@ -146,13 +163,13 @@ const props = withDefaults(
 )
 
 const { isDark } = useTheme()
-const { getContextualInlineContent, stripContentTags, stripMarkdownLinks, updatePanelFromText, openFilmDetail, openBookDetail, openSongDetail, openPodcastDetail, openArticleDetail, closeFilmDetail, closeBookDetail, closeSongDetail, closePodcastDetail } = useContentPanel()
+const { getContextualInlineContent, stripContentTags, stripMarkdownLinks, updatePanelFromText, openFilmDetail, openBookDetail, openTVSeriesDetail, openSongDetail, openPodcastDetail, openArticleDetail, closeFilmDetail, closeBookDetail, closeTVSeriesDetail, closeSongDetail, closePodcastDetail } = useContentPanel()
 const overlayStore = useArticleOverlayStore()
 
 const isUser = computed(() => props.message.role === 'user')
 
 const inlineContent = computed(() => {
-  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[] }
+  if (isUser.value) return { films: [] as Film[], books: [] as Book[], tvSeries: [] as TVSeries[], 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 ?? [])
 })
 
@@ -164,6 +181,7 @@ const bubbleClasses = computed(() =>
 
 const inlineFilms = computed(() => inlineContent.value.films)
 const inlineBooks = computed(() => inlineContent.value.books ?? [])
+const inlineTVSeries = computed(() => inlineContent.value.tvSeries ?? [])
 const inlineSongs = computed(() => inlineContent.value.songs)
 const inlinePodcasts = computed(() => inlineContent.value.podcasts)
 const inlineNewsLinks = computed(() => inlineContent.value.newsLinks ?? [])
@@ -173,6 +191,7 @@ const inlineMagazineSections = computed(() => inlineContent.value.magazineSectio
 const hasContext = computed(() => !isUser.value && (
   inlineFilms.value.length > 0 ||
   inlineBooks.value.length > 0 ||
+  inlineTVSeries.value.length > 0 ||
   inlineSongs.value.length > 0 ||
   inlinePodcasts.value.length > 0 ||
   inlineNewsLinks.value.length > 0 ||
@@ -206,11 +225,21 @@ function handleFilmSelect(film: Film) {
 function handleBookSelect(book: Book) {
   openPanelWithContext()
   closeFilmDetail()
+  closeTVSeriesDetail()
   closeSongDetail()
   closePodcastDetail()
   openBookDetail(book)
 }
 
+function handleTVSeriesSelect(series: TVSeries) {
+  openPanelWithContext()
+  closeFilmDetail()
+  closeBookDetail()
+  closeSongDetail()
+  closePodcastDetail()
+  openTVSeriesDetail(series)
+}
+
 function handleSongSelect(song: Song) {
   openPanelWithContext()
   closeFilmDetail()
@@ -228,6 +257,8 @@ function handlePodcastSelect(podcast: Podcast) {
 
 function openPanel() {
   closeFilmDetail()
+  closeBookDetail()
+  closeTVSeriesDetail()
   closeSongDetail()
   closePodcastDetail()
   openPanelWithContext()

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

@@ -88,6 +88,7 @@ const promptPairs = computed<PromptPair[]>(() => {
       )
       if (content.films.length > 0) badges.push('Films')
       if ((content.books?.length ?? 0) > 0) badges.push('Books')
+      if ((content.tvSeries?.length ?? 0) > 0) badges.push('TV')
       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/ContentPanel.vue

@@ -64,6 +64,11 @@
           :book="selectedBook"
           @back="closeBookDetail"
         />
+        <TVSeriesDetail
+          v-else-if="selectedTVSeries"
+          :series="selectedTVSeries"
+          @back="closeTVSeriesDetail"
+        />
         <SongDetail
           v-else-if="selectedSong"
           :song="selectedSong"
@@ -93,6 +98,12 @@
           :title="panelTitle"
           @select-book="openBookDetail"
         />
+        <TVSeriesGrid
+          v-else-if="activeTab === 'tvshow'"
+          :series="panelTVSeries"
+          :title="panelTitle"
+          @select-series="openTVSeriesDetail"
+        />
         <SongGrid
           v-else-if="activeTab === 'song'"
           :songs="panelSongs"
@@ -139,6 +150,8 @@ import FilmGrid from './FilmGrid.vue'
 import FilmDetail from './FilmDetail.vue'
 import BookGrid from './BookGrid.vue'
 import BookDetail from './BookDetail.vue'
+import TVSeriesGrid from './TVSeriesGrid.vue'
+import TVSeriesDetail from './TVSeriesDetail.vue'
 import SongGrid from './SongGrid.vue'
 import SongDetail from './SongDetail.vue'
 import PodcastGrid from './PodcastGrid.vue'
@@ -152,6 +165,7 @@ const {
   panelOpen,
   panelFilms,
   panelBooks,
+  panelTVSeries,
   panelSongs,
   panelPodcasts,
   panelWebResults,
@@ -164,6 +178,7 @@ const {
   availableTabs,
   selectedFilm,
   selectedBook,
+  selectedTVSeries,
   selectedSong,
   selectedPodcast,
   selectedArticle,
@@ -172,6 +187,8 @@ const {
   closeFilmDetail,
   openBookDetail,
   closeBookDetail,
+  openTVSeriesDetail,
+  closeTVSeriesDetail,
   openSongDetail,
   closeSongDetail,
   openPodcastDetail,
@@ -181,7 +198,7 @@ const {
 } = useContentPanel()
 
 const hasDetailOpen = computed(() =>
-  !!(selectedFilm.value || selectedBook.value || selectedSong.value || selectedPodcast.value || selectedArticle.value)
+  !!(selectedFilm.value || selectedBook.value || selectedTVSeries.value || selectedSong.value || selectedPodcast.value || selectedArticle.value)
 )
 
 const windowWidth = ref(window.innerWidth)
@@ -194,6 +211,7 @@ function onResize() {
 const TAB_LABELS: Record<ContentTab, string> = {
   film: 'Films',
   book: 'Books',
+  tvshow: 'TV',
   song: 'Music',
   podcast: 'Podcasts',
   news: 'News',

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

@@ -0,0 +1,107 @@
+<template>
+  <button
+    class="flex gap-3 p-2 rounded-xl transition-all duration-200 text-left w-full group overflow-hidden"
+    :class="isDark
+      ? 'hover:bg-white/5 active:bg-white/10'
+      : 'hover:bg-black/[0.03] active:bg-black/5'"
+    @click="$emit('select', series)"
+  >
+    <div class="poster-card-sm shrink-0 w-12 aspect-[2/3] rounded-lg overflow-hidden">
+      <img
+        v-if="posterSrc"
+        :src="posterSrc"
+        :alt="series.title"
+        class="w-full h-full object-cover rounded-[6px] transition-transform duration-300 group-hover:scale-105"
+        loading="lazy"
+        @error="posterFailed = true"
+      />
+      <div
+        v-else
+        class="w-full h-full rounded-[6px] bg-cover bg-center"
+        :style="{ backgroundImage: `url(${fallbackPoster})` }"
+      />
+    </div>
+
+    <div class="min-w-0 flex-1 py-0.5">
+      <p class="text-sm font-semibold truncate"
+         :class="isDark ? 'text-white/90' : 'text-gray-900'">{{ series.title }}</p>
+      <p class="text-[11px] mt-0.5"
+         :class="isDark ? 'text-white/40' : 'text-gray-500'">
+        {{ yearDisplay }}<template v-if="series.network"> · {{ series.network }}</template>
+      </p>
+      <p v-if="series.synopsis"
+         class="text-[10px] mt-0.5 line-clamp-2"
+         :class="isDark ? 'text-white/35' : 'text-gray-400'">
+        {{ series.synopsis }}
+      </p>
+      <div class="flex items-center gap-1.5 mt-1.5">
+        <span v-if="series.rating && series.rating > 0"
+              class="text-[10px] font-semibold px-1.5 py-0.5 rounded"
+              :class="ratingClass">
+          ★ {{ series.rating.toFixed(1) }}
+        </span>
+        <span v-if="series.seasons"
+              class="text-[9px] px-1.5 py-0.5 rounded font-medium"
+              :class="isDark ? 'bg-white/8 text-white/50' : 'bg-black/5 text-gray-500'">
+          {{ series.seasons }}S
+        </span>
+        <span v-if="series.status === 'ongoing'"
+              class="text-[9px] px-1.5 py-0.5 rounded font-medium"
+              :class="isDark ? 'bg-success/15 text-success/70' : 'bg-green-50 text-green-600'">
+          ongoing
+        </span>
+        <span v-else-if="series.status === 'ended'"
+              class="text-[9px] px-1.5 py-0.5 rounded font-medium"
+              :class="isDark ? 'bg-white/8 text-white/40' : 'bg-black/5 text-gray-400'">
+          ended
+        </span>
+      </div>
+    </div>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import type { TVSeries } from '@aiui/core/types/content'
+import { useTheme } from '@/composables/useTheme'
+import { generatePosterFallback, fetchTmdbTVPoster } from '@/composables/useImageFallback'
+
+const props = defineProps<{ series: TVSeries }>()
+defineEmits<{ select: [series: TVSeries] }>()
+
+const { isDark } = useTheme()
+const posterFailed = ref(false)
+const fetchedPoster = ref<string | null>(null)
+
+const posterSrc = computed(() => {
+  if (posterFailed.value) return null
+  return props.series.posterUrl || fetchedPoster.value
+})
+
+const fallbackPoster = computed(() =>
+  generatePosterFallback(props.series.title, props.series.year)
+)
+
+const yearDisplay = computed(() => {
+  if (!props.series.year) return ''
+  if (props.series.endYear && props.series.endYear !== props.series.year) {
+    return `${props.series.year}–${props.series.endYear}`
+  }
+  if (props.series.status === 'ongoing') return `${props.series.year}–`
+  return String(props.series.year)
+})
+
+const ratingClass = computed(() => {
+  const r = props.series.rating ?? 0
+  if (r >= 8.5) return isDark.value ? 'bg-success/20 text-success' : 'bg-success/10 text-green-700'
+  if (r >= 7.5) return isDark.value ? 'bg-accent/20 text-accent' : 'bg-accent/10 text-amber-700'
+  return isDark.value ? 'bg-white/10 text-white/50' : 'bg-black/5 text-gray-500'
+})
+
+onMounted(() => {
+  if (props.series.posterUrl) return
+  fetchTmdbTVPoster(props.series.title, props.series.year).then((result) => {
+    if (result.posterUrl) fetchedPoster.value = result.posterUrl
+  })
+})
+</script>

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

@@ -0,0 +1,190 @@
+<template>
+  <div class="tv-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="series.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">{{ series.title }}</h2>
+        <div class="flex flex-wrap items-center gap-x-2 gap-y-0.5 mt-1 text-xs text-white/60">
+          <span v-if="yearDisplay">{{ yearDisplay }}</span>
+          <span v-if="series.seasons">{{ series.seasons }} seasons</span>
+          <span v-if="series.episodes">{{ series.episodes }} episodes</span>
+          <span v-if="series.network">{{ series.network }}</span>
+          <span v-if="series.rating" class="text-amber-400">★ {{ series.rating.toFixed(1) }}</span>
+          <span v-if="series.status === 'ongoing'" class="text-emerald-400">ongoing</span>
+          <span v-else-if="series.status === 'ended'" class="text-white/40">ended</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="p-4 space-y-4">
+      <p v-if="series.synopsis" class="text-sm leading-relaxed"
+         :class="isDark ? 'text-white/70' : 'text-gray-600'">
+        {{ series.synopsis }}
+      </p>
+
+      <div v-if="series.creator" class="text-xs"
+           :class="isDark ? 'text-white/50' : 'text-gray-500'">
+        Created by <span class="font-medium" :class="isDark ? 'text-white/70' : 'text-gray-700'">{{ series.creator }}</span>
+      </div>
+
+      <div v-if="series.cast?.length" class="text-xs"
+           :class="isDark ? 'text-white/50' : 'text-gray-500'">
+        Starring: {{ series.cast.slice(0, 5).join(', ') }}
+      </div>
+
+      <div v-if="series.genres?.length" class="flex flex-wrap gap-1.5">
+        <span
+          v-for="genre in series.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'">Watch on</h4>
+        <div class="space-y-2">
+          <a
+            v-for="src in (series.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 watchLinks"
+            :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 { TVSeries } from '@aiui/core/types/content'
+import { useTheme } from '@/composables/useTheme'
+import { generatePosterFallback, fetchTmdbTVPoster } from '@/composables/useImageFallback'
+
+const props = defineProps<{ series: TVSeries }>()
+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.series.posterUrl || props.series.backdropUrl || fetchedCover.value
+})
+
+const fallbackCover = computed(() =>
+  generatePosterFallback(props.series.title, props.series.year)
+)
+
+const yearDisplay = computed(() => {
+  if (!props.series.year) return ''
+  if (props.series.endYear && props.series.endYear !== props.series.year) {
+    return `${props.series.year}–${props.series.endYear}`
+  }
+  if (props.series.status === 'ongoing') return `${props.series.year}–`
+  return String(props.series.year)
+})
+
+const q = computed(() =>
+  props.series.title.trim().replace(/\s+/g, '+'),
+)
+
+const watchLinks = computed(() => {
+  if ((props.series.sources ?? []).length > 0) return []
+  return [
+    { name: 'Internet Archive', url: `https://archive.org/search?query=${q.value}`, icon: '🏛️', desc: 'Free, open archive' },
+    { name: 'YouTube', url: `https://youtube.com/results?search_query=${q.value}+full+series`, icon: '▶️', desc: 'Free episodes' },
+    { name: 'Odysee', url: `https://odysee.com/$/search?q=${q.value}`, icon: '🔗', desc: 'Decentralized' },
+    { name: 'Tubi', url: `https://tubitv.com/search/${q.value}`, icon: '📺', desc: 'Free streaming' },
+  ]
+})
+
+function sourceIcon(type: string): string {
+  const icons: Record<string, string> = {
+    plex: '🟠',
+    nextcloud: '☁️',
+    youtube: '▶️',
+    netflix: '🔴',
+    'free-web': '🌐',
+    local: '💾',
+  }
+  return icons[type] ?? '📺'
+}
+
+onMounted(() => {
+  if (props.series.posterUrl || props.series.backdropUrl) return
+  fetchTmdbTVPoster(props.series.title, props.series.year).then((result) => {
+    if (result.backdropUrl) fetchedCover.value = result.backdropUrl
+    else if (result.posterUrl) fetchedCover.value = result.posterUrl
+  })
+})
+</script>

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

@@ -0,0 +1,199 @@
+<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'">
+            {{ filteredSeries.length }} series
+          </span>
+          <slot name="header-actions" />
+        </div>
+      </div>
+
+      <input
+        v-model="search"
+        type="text"
+        placeholder="Search TV series..."
+        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="s in filteredSeries"
+          :key="s.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('selectSeries', s)"
+        >
+          <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(s)"
+                :src="coverSrc(s)!"
+                :alt="s.title"
+                class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+                loading="lazy"
+                @error="onCoverError(s)"
+              />
+              <div
+                v-else
+                class="w-full h-full bg-cover bg-center"
+                :style="{ backgroundImage: `url(${fallbackFor(s)})` }"
+              />
+              <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">
+                  {{ s.title }}
+                </p>
+                <p class="text-[9px] text-white/40 truncate mt-0.5">
+                  {{ yearDisplay(s) }}<template v-if="s.seasons"> · {{ s.seasons }}S</template>
+                </p>
+              </div>
+
+              <div v-if="s.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">
+                  ★ {{ s.rating.toFixed(1) }}
+                </span>
+              </div>
+
+              <div v-if="s.status === 'ongoing'" class="absolute top-1.5 right-1.5">
+                <span class="text-[8px] px-1 py-0.5 rounded bg-emerald-500/80 text-white backdrop-blur-sm">
+                  ongoing
+                </span>
+              </div>
+
+              <div class="absolute top-1.5 right-1.5 flex gap-0.5 flex-wrap justify-end max-w-[60%]">
+                <span
+                  v-for="src in (s.sources ?? []).slice(0, 2)"
+                  :key="src.type"
+                  class="text-[8px] px-1 py-0.5 rounded bg-black/60 text-white/70 backdrop-blur-sm"
+                >
+                  {{ src.type }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </button>
+      </div>
+
+      <div v-if="filteredSeries.length === 0" class="flex items-center justify-center py-12">
+        <p class="text-sm" :class="isDark ? 'text-white/30' : 'text-gray-400'">
+          No TV series match your search
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive, onMounted, watch } from 'vue'
+import type { TVSeries } from '@aiui/core/types/content'
+import { useTheme } from '@/composables/useTheme'
+import { generatePosterFallback, fetchTmdbTVPoster } from '@/composables/useImageFallback'
+
+const props = withDefaults(defineProps<{
+  series: TVSeries[]
+  title?: string
+}>(), {
+  title: 'Recommended TV Series',
+})
+
+defineEmits<{ selectSeries: [series: TVSeries] }>()
+
+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(s: TVSeries): string | null {
+  if (failedCovers.value.has(s.id)) return null
+  return s.posterUrl || fetchedCovers.get(s.id) || null
+}
+
+function fallbackFor(s: TVSeries): string {
+  return generatePosterFallback(s.title, s.year)
+}
+
+function onCoverError(s: TVSeries) {
+  failedCovers.value.add(s.id)
+  failedCovers.value = new Set(failedCovers.value)
+}
+
+function yearDisplay(s: TVSeries): string {
+  if (!s.year) return ''
+  if (s.endYear && s.endYear !== s.year) return `${s.year}–${s.endYear}`
+  if (s.status === 'ongoing') return `${s.year}–`
+  return String(s.year)
+}
+
+function fetchCoversFor(list: TVSeries[]) {
+  for (const s of list) {
+    if (s.posterUrl || fetchedCovers.has(s.id)) continue
+    fetchTmdbTVPoster(s.title, s.year).then((result) => {
+      if (result.posterUrl) fetchedCovers.set(s.id, result.posterUrl)
+    })
+  }
+}
+
+onMounted(() => fetchCoversFor(props.series))
+watch(() => props.series, (list) => fetchCoversFor(list), { immediate: false })
+
+const topGenres = computed(() => {
+  const counts = new Map<string, number>()
+  for (const s of props.series) {
+    for (const g of s.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 filteredSeries = computed(() => {
+  let result = props.series
+  if (search.value) {
+    const q = search.value.toLowerCase()
+    result = result.filter(
+      (s) =>
+        s.title.toLowerCase().includes(q) ||
+        (s.creator ?? '').toLowerCase().includes(q) ||
+        (s.network ?? '').toLowerCase().includes(q) ||
+        (s.genres ?? []).some((g) => g.toLowerCase().includes(q))
+    )
+  }
+  if (activeGenre.value) {
+    result = result.filter((s) => (s.genres ?? []).includes(activeGenre.value!))
+  }
+  return result
+})
+</script>

packages/app/src/composables/useAI.ts

@@ -39,6 +39,10 @@ Never list songs in plain text only—each recommendation must have a tag so the
 - Other podcasts: [[podcast_ext:Title|Host|Year]] (year optional), e.g. [[podcast_ext:What Bitcoin Did|Peter McCormack|2018]].
 Prioritize Podcasting 2.0–friendly platforms: Fountain.fm, Podcast Index, Castopod, Odysee, Rumble, YouTube, Podverse.
 
+**Books:** When recommending or discussing books, use [[book_ext:Title|Author|Year]], e.g. [[book_ext:Neuromancer|William Gibson|1984]]. Write a brief reason why the book is worth reading on the same line.
+
+**TV Series:** When recommending or discussing TV series/shows, use [[tv_ext:Title|Year|Creator]], e.g. [[tv_ext:Breaking Bad|2008|Vince Gilligan]]. Do NOT use [[film_ext:...]] for TV series — use [[tv_ext:...]] instead. Write a brief reason why the show is worth watching on the same line.
+
 **Websites / "Best places to check":** When listing resources, places to check online, or websites for the user to visit, use markdown links: [Name](https://full-url). For simple domains use **Name** (domain.com), e.g. **Bitcoin Mailing List** (gnusha.org).
 
 **Music discovery:** For genre-based requests (e.g. "best math rock"), pick from the user's library when relevant, or use [[song_ext:...]] for others. Prioritize indie-friendly platforms: Wavlake, Bandcamp, Internet Archive, SoundCloud, Odysee, Jamendo.

packages/app/src/composables/useContentPanel.ts

@@ -1,5 +1,5 @@
 import { ref } from 'vue'
-import type { Film, Song, Podcast, Book } from '@aiui/core/types/content'
+import type { Film, Song, Podcast, Book, TVSeries } from '@aiui/core/types/content'
 import type { WebSearchResult } from '@aiui/core/types/message'
 import { mockFilms } from '@/mocks/films'
 import { mockSongs } from '@/mocks/songs'
@@ -7,7 +7,7 @@ import { mockPodcasts } from '@/mocks/podcasts'
 import { generatePosterFallback, generateSongCoverFallback, generateBookCoverFallback } from '@/composables/useImageFallback'
 import { fetchRssFromUrls } from '@/composables/useRssFetch'
 
-export type ContentTab = 'film' | 'song' | 'podcast' | 'book' | 'news' | 'websites' | 'magazine'
+export type ContentTab = 'film' | 'song' | 'podcast' | 'book' | 'tvshow' | 'news' | 'websites' | 'magazine'
 
 export interface MagazineSection {
   title: string
@@ -23,6 +23,7 @@ export interface MagazineSection {
 const panelOpen = ref(false)
 const panelFilms = ref<Film[]>([])
 const panelBooks = ref<Book[]>([])
+const panelTVSeries = ref<TVSeries[]>([])
 const panelWebResults = ref<WebSearchResult[]>([])
 const panelRssArticles = ref<WebSearchResult[]>([])
 const panelWebsites = ref<WebSearchResult[]>([])
@@ -32,6 +33,7 @@ const panelSongs = ref<Song[]>([])
 const panelPodcasts = ref<Podcast[]>([])
 const selectedFilm = ref<Film | null>(null)
 const selectedBook = ref<Book | null>(null)
+const selectedTVSeries = ref<TVSeries | null>(null)
 const selectedSong = ref<Song | null>(null)
 const selectedPodcast = ref<Podcast | null>(null)
 const selectedArticle = ref<WebSearchResult | null>(null)
@@ -257,6 +259,7 @@ function preferredFirstTab(userQuery: string): ContentTab | null {
   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 (/\b(tv show|tv series|series|television|streaming|binge|watch)\b/.test(q)) return 'tvshow'
   if (isNewsQuery(q)) return 'news'
   if (isWebsitesQuery(q)) return 'websites'
   return null
@@ -270,6 +273,7 @@ function filterTabsByContext(
   hasSongs: boolean,
   hasPodcasts: boolean,
   hasBooks: boolean,
+  hasTVSeries: boolean,
   hasNews: boolean,
   hasWebsites: boolean,
   hasMagazine: boolean,
@@ -286,17 +290,18 @@ function filterTabsByContext(
     return tabs
   }
 
-  if (hasMagazine && !hasFilms && !hasSongs && !hasPodcasts && !hasBooks && !hasNews && !hasWebsites) {
+  if (hasMagazine && !hasFilms && !hasSongs && !hasPodcasts && !hasBooks && !hasTVSeries && !hasNews && !hasWebsites) {
     return ['magazine']
   }
 
-  if (hasWebsites && !hasFilms && !hasSongs && !hasPodcasts && !hasBooks && !hasNews && !hasMagazine) {
+  if (hasWebsites && !hasFilms && !hasSongs && !hasPodcasts && !hasBooks && !hasTVSeries && !hasNews && !hasMagazine) {
     return ['websites']
   }
 
   const all: ContentTab[] = []
   if (hasFilms) all.push('film')
   if (hasBooks) all.push('book')
+  if (hasTVSeries) all.push('tvshow')
   if (hasSongs) all.push('song')
   if (hasPodcasts) all.push('podcast')
   if (hasMagazine) all.push('magazine')
@@ -343,6 +348,8 @@ 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
 
+const TV_EXT_RE = /\[\[tv_ext:([^|]+)\|([^|]*)(?:\|(\d{4}))?\]\]/gi
+
 /** Reject obvious non-podcast phrases (documentation, mailing lists, etc.) */
 function looksLikePodcast(title: string, host: string): boolean {
   const t = title.toLowerCase()
@@ -763,12 +770,122 @@ export function useContentPanel() {
     return extractBooksFromPatterns(text)
   }
 
+  function extractExternalTVSeries(text: string): TVSeries[] {
+    const series: TVSeries[] = []
+    const seen = new Set<string>()
+    let match: RegExpExecArray | null
+    const re = new RegExp(TV_EXT_RE.source, 'gi')
+    while ((match = re.exec(text)) !== null) {
+      const title = match[1].trim()
+      const creator = match[2].trim()
+      const year = match[3] ? parseInt(match[3], 10) : undefined
+      const key = title.toLowerCase()
+      if (seen.has(key)) continue
+      seen.add(key)
+      series.push({
+        id: `ext-${key.replace(/\W/g, '-')}`,
+        title,
+        creator: creator || undefined,
+        year,
+        synopsis: extractDescriptionForTag(text, match.index, match[0].length),
+        genres: [],
+        sources: [],
+      })
+    }
+    return series
+  }
+
+  function isTVQuery(q: string): boolean {
+    return /\b(tv show|tv series|series|television|streaming|binge|watch|recommend.*show|best show|season)\b/i.test(q)
+  }
+
+  function isTVLikeResponse(text: string): boolean {
+    return /\b(season|episodes?|showrunner|streaming|renewed|cancelled|premiere|network|HBO|Netflix|AMC|FX|Apple TV|Disney\+)\b/i.test(text) &&
+      (text.match(/\bseason\b/gi)?.length ?? 0) >= 2
+  }
+
+  function extractTVSeriesFromPatterns(text: string): TVSeries[] {
+    const series: { title: string; desc: string; pos: number }[] = []
+    const seen = new Set<string>()
+    const patterns: RegExp[] = [
+      /"([^"]{2,60})"\s*[-–—]\s*(?:a |an )?(?:series|show|tv)/gi,
+      /\*\*([^*]{2,60})\*\*\s*[-–—:]\s*(?:a |an )?(?:\w+ )?(?:series|show|drama|comedy|thriller|animated)/gi,
+      /(?:^|\n)\s*(?:\d+\.\s*|[-•]\s*)\*{0,2}([^*\n]{2,60}?)\*{0,2}\s*\((\d{4})(?:[-–]\d{0,4})?(?:,\s*\d+ seasons?)?\)/gm,
+    ]
+    for (const re of patterns) {
+      let m: RegExpExecArray | null
+      const rx = new RegExp(re.source, re.flags)
+      while ((m = rx.exec(text)) !== null) {
+        const title = m[1].trim().replace(/^\*\*|\*\*$/g, '')
+        if (title.length < 2) continue
+        if (/\[\[(film|song|podcast|book|tv)(_ext)?:/.test(title)) continue
+        const key = title.toLowerCase()
+        if (seen.has(key)) continue
+        seen.add(key)
+        const desc = extractDescriptionForTag(text, m.index, m[0].length)
+        series.push({ title, desc, pos: m.index })
+      }
+    }
+    return series
+      .sort((a, b) => a.pos - b.pos)
+      .map(({ title, desc }) => ({
+        id: `ext-${title.toLowerCase().replace(/\W/g, '-')}`,
+        title,
+        synopsis: desc,
+        genres: [],
+        sources: [],
+      }))
+  }
+
+  function convertFilmExtToTVSeries(text: string): TVSeries[] {
+    const series: TVSeries[] = []
+    const seen = new Set<string>()
+    let match: RegExpExecArray | null
+    const re = new RegExp(FILM_EXT_RE.source, 'gi')
+    while ((match = re.exec(text)) !== null) {
+      const title = match[1].trim()
+      const year = parseInt(match[2], 10)
+      const creator = match[3].trim()
+      const key = title.toLowerCase()
+      if (seen.has(key)) continue
+      seen.add(key)
+      series.push({
+        id: `ext-${key.replace(/\W/g, '-')}`,
+        title,
+        year,
+        synopsis: extractDescriptionForTag(text, match.index, match[0].length),
+        creator,
+        genres: [],
+        sources: [],
+      })
+    }
+    return series
+  }
+
+  function extractAllTVSeries(text: string, userQuery: string): TVSeries[] {
+    const external = extractExternalTVSeries(text)
+    if (external.length > 0) return external
+    if (!isTVQuery(userQuery) && !isTVLikeResponse(text)) return []
+    if (isNewsLikeResponse(text)) return []
+    // When user asked about TV but AI used film_ext tags, convert them
+    if (isTVQuery(userQuery) && /\[\[film_ext:/.test(text)) {
+      return convertFilmExtToTVSeries(text)
+    }
+    if (extractFilmIds(text).length > 0) return []
+    return extractTVSeriesFromPatterns(text)
+  }
+
   function updatePanelFromText(text: string, userQuery = '', webResults: WebSearchResult[] = []) {
     panelQuery.value = userQuery.trim()
     const songs = extractAllSongs(text)
-    const films = extractAllFilms(text)
+    let films = extractAllFilms(text)
     const podcasts = extractAllPodcasts(text)
     const books = extractAllBooks(text, userQuery)
+    const tvSeries = extractAllTVSeries(text, userQuery)
+    // When film_ext tags were converted to TV series, only keep library films
+    if (tvSeries.length > 0 && isTVQuery(userQuery)) {
+      films = films.filter(f => !f.id.startsWith('ext-'))
+    }
     const fromMarkdown = extractMarkdownLinks(text)
     const boldDomains = extractBoldDomainLinks(text)
 
@@ -806,12 +923,13 @@ export function useContentPanel() {
       })
     }
 
-    const tabs = filterTabsByContext(userQuery, films.length > 0, songs.length > 0, podcasts.length > 0, books.length > 0, hasNews, hasWebsites, hasMagazine)
+    const tabs = filterTabsByContext(userQuery, films.length > 0, songs.length > 0, podcasts.length > 0, books.length > 0, tvSeries.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 showTVSeries = tabs.includes('tvshow')
     const showSongs = tabs.includes('song')
     const showPodcasts = tabs.includes('podcast')
     const showNews = tabs.includes('news')
@@ -820,6 +938,7 @@ export function useContentPanel() {
 
     const visibleFilms = showFilms ? films : []
     const visibleBooks = showBooks ? books : []
+    const visibleTVSeries = showTVSeries ? tvSeries : []
     const visibleSongs = showSongs ? songs : []
     const visiblePodcasts = showPodcasts ? podcasts : []
     const visibleNews = showNews ? mergedNews : []
@@ -828,6 +947,7 @@ export function useContentPanel() {
 
     panelFilms.value = visibleFilms
     panelBooks.value = visibleBooks
+    panelTVSeries.value = visibleTVSeries
     panelSongs.value = visibleSongs
     panelPodcasts.value = visiblePodcasts
     panelWebResults.value = visibleNews
@@ -838,20 +958,30 @@ export function useContentPanel() {
       : null
     selectedFilm.value = null
     selectedBook.value = null
+    selectedTVSeries.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 (visibleTVSeries.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'
     else contentType.value = 'film'
 
-    if (visibleFilms.length === 1) panelTitle.value = visibleFilms[0].title
+    // Title follows the primary (first) tab
+    const primary = tabs[0]
+    if (primary === 'tvshow' && visibleTVSeries.length > 0) {
+      panelTitle.value = visibleTVSeries.length === 1 ? visibleTVSeries[0].title : `${visibleTVSeries.length} TV Series`
+    } else if (primary === 'book' && visibleBooks.length > 0) {
+      panelTitle.value = visibleBooks.length === 1 ? visibleBooks[0].title : `${visibleBooks.length} Books`
+    } else 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 (visibleTVSeries.length === 1) panelTitle.value = visibleTVSeries[0].title
+    else if (visibleTVSeries.length > 1) panelTitle.value = `${visibleTVSeries.length} TV Series`
     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
@@ -876,10 +1006,14 @@ export function useContentPanel() {
 
   /** Contextual films/songs/podcasts/news/websites/magazine for inline cards (respects query+response, no presets) */
   function getContextualInlineContent(text: string, userQuery: string, webResults: WebSearchResult[] = []) {
-    const films = extractAllFilms(text)
+    let films = extractAllFilms(text)
     const songs = extractAllSongs(text)
     const podcasts = extractAllPodcasts(text)
     const books = extractAllBooks(text, userQuery)
+    const tvSeries = extractAllTVSeries(text, userQuery)
+    if (tvSeries.length > 0 && isTVQuery(userQuery)) {
+      films = films.filter(f => !f.id.startsWith('ext-'))
+    }
     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)
@@ -890,10 +1024,11 @@ 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, books.length > 0, hasNews, hasWebsites, hasMagazine)
+    const tabs = filterTabsByContext(userQuery, films.length > 0, songs.length > 0, podcasts.length > 0, books.length > 0, tvSeries.length > 0, hasNews, hasWebsites, hasMagazine)
     return {
       films: tabs.includes('film') ? films : [],
       books: tabs.includes('book') ? books : [],
+      tvSeries: tabs.includes('tvshow') ? tvSeries : [],
       songs: tabs.includes('song') ? songs : [],
       podcasts: tabs.includes('podcast') ? podcasts : [],
       newsLinks: tabs.includes('news') ? newsLinks : [],
@@ -934,8 +1069,15 @@ export function useContentPanel() {
       .trim()
   }
 
+  function stripTVTags(text: string): string {
+    return text
+      .replace(TV_EXT_RE, '')
+      .replace(/\n{3,}/g, '\n\n')
+      .trim()
+  }
+
   function stripContentTags(text: string): string {
-    return stripFilmTags(stripSongTags(stripPodcastTags(stripBookTags(text))))
+    return stripFilmTags(stripSongTags(stripPodcastTags(stripBookTags(stripTVTags(text)))))
   }
 
   /** Remove markdown links when surfacing as inline cards to avoid duplication */
@@ -950,6 +1092,7 @@ export function useContentPanel() {
   function openFilmDetail(film: Film) {
     selectedFilm.value = film
     selectedBook.value = null
+    selectedTVSeries.value = null
     selectedSong.value = null
     selectedPodcast.value = null
     selectedArticle.value = null
@@ -962,6 +1105,7 @@ export function useContentPanel() {
   function openBookDetail(book: Book) {
     selectedBook.value = book
     selectedFilm.value = null
+    selectedTVSeries.value = null
     selectedSong.value = null
     selectedPodcast.value = null
     selectedArticle.value = null
@@ -975,6 +1119,7 @@ export function useContentPanel() {
     selectedSong.value = song
     selectedFilm.value = null
     selectedBook.value = null
+    selectedTVSeries.value = null
     selectedPodcast.value = null
     selectedArticle.value = null
   }
@@ -987,6 +1132,7 @@ export function useContentPanel() {
     selectedPodcast.value = podcast
     selectedFilm.value = null
     selectedBook.value = null
+    selectedTVSeries.value = null
     selectedSong.value = null
     selectedArticle.value = null
   }
@@ -999,6 +1145,7 @@ export function useContentPanel() {
     selectedArticle.value = article
     selectedFilm.value = null
     selectedBook.value = null
+    selectedTVSeries.value = null
     selectedSong.value = null
     selectedPodcast.value = null
     panelOpen.value = true
@@ -1008,10 +1155,24 @@ export function useContentPanel() {
     selectedArticle.value = null
   }
 
+  function openTVSeriesDetail(series: TVSeries) {
+    selectedTVSeries.value = series
+    selectedFilm.value = null
+    selectedBook.value = null
+    selectedSong.value = null
+    selectedPodcast.value = null
+    selectedArticle.value = null
+  }
+
+  function closeTVSeriesDetail() {
+    selectedTVSeries.value = null
+  }
+
   function closePanel() {
     panelOpen.value = false
     selectedFilm.value = null
     selectedBook.value = null
+    selectedTVSeries.value = null
     selectedSong.value = null
     selectedPodcast.value = null
     selectedArticle.value = null
@@ -1062,6 +1223,7 @@ export function useContentPanel() {
     panelOpen,
     panelFilms,
     panelBooks,
+    panelTVSeries,
     panelSongs,
     panelPodcasts,
     panelWebResults,
@@ -1070,6 +1232,7 @@ export function useContentPanel() {
     panelMagazineHeroImage,
     selectedFilm,
     selectedBook,
+    selectedTVSeries,
     selectedSong,
     selectedPodcast,
     selectedArticle,
@@ -1083,8 +1246,11 @@ export function useContentPanel() {
     resolveFilms,
     extractAllFilms,
     extractAllBooks,
+    extractAllTVSeries,
     openBookDetail,
     closeBookDetail,
+    openTVSeriesDetail,
+    closeTVSeriesDetail,
     extractSongIds,
     resolveSongs,
     extractAllSongs,

packages/app/src/composables/useImageFallback.ts

@@ -120,11 +120,12 @@ function escapeXml(s: string): string {
   return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
 }
 
-export async function fetchTmdbPoster(
+async function fetchTmdbGeneric(
+  endpoint: string,
   title: string,
   year?: number,
 ): Promise<TmdbResult> {
-  const key = cacheKey(title, year)
+  const key = `${endpoint}:${cacheKey(title, year)}`
   const cached = memoryCache.get(key)
   if (cached) return cached
 
@@ -132,7 +133,7 @@ export async function fetchTmdbPoster(
   try {
     const params = new URLSearchParams({ q: title.trim() })
     if (year && year > 0) params.set('y', String(year))
-    const res = await fetch(`/api/tmdb/search?${params}`)
+    const res = await fetch(`/api/tmdb/${endpoint}?${params}`)
     if (!res.ok) return empty
     const data = (await res.json()) as { posterUrl?: string | null; backdropUrl?: string | null }
     const result: TmdbResult = {
@@ -149,6 +150,13 @@ export async function fetchTmdbPoster(
   }
 }
 
+export async function fetchTmdbPoster(
+  title: string,
+  year?: number,
+): Promise<TmdbResult> {
+  return fetchTmdbGeneric('search', title, year)
+}
+
 export async function handleImgError(
   e: Event,
   title: string,
@@ -185,6 +193,13 @@ export function isUrlFailed(url: string | undefined): boolean {
   return !!url && failedUrls.has(url)
 }
 
+export async function fetchTmdbTVPoster(
+  title: string,
+  year?: number,
+): Promise<TmdbResult> {
+  return fetchTmdbGeneric('search-tv', title, year)
+}
+
 /** Fetch podcast artwork from iTunes Search API (free, no key). Returns hi-res URL (600x600). */
 export async function fetchPodcastCover(
   title: string,

packages/app/src/pages/ChatPage.vue

@@ -17,11 +17,11 @@
         class="flex-1 min-w-0 path-glass-card overflow-hidden flex flex-col relative"
         :class="[
           panelSide === 'left' ? 'order-last' : 'order-first',
-          (selectedFilm || selectedSong || selectedPodcast || selectedArticle) && 'detail-active'
+          (selectedFilm || selectedBook || selectedTVSeries || selectedSong || selectedPodcast || selectedArticle) && 'detail-active'
         ]"
       >
         <button
-          v-if="(selectedFilm || selectedSong || selectedPodcast || selectedArticle) && (panelOpen || chatStore.isStreaming)"
+          v-if="(selectedFilm || selectedBook || selectedTVSeries || selectedSong || selectedPodcast || selectedArticle) && (panelOpen || chatStore.isStreaming)"
           class="absolute top-3 right-3 z-10 p-2 rounded-lg path-glass-icon transition-colors"
           :class="isDark
             ? 'text-white/70 hover:bg-white/10'
@@ -51,6 +51,16 @@
               :podcast="selectedPodcast"
               @back="closePodcastDetail"
             />
+            <BookDetail
+              v-else-if="selectedBook"
+              :book="selectedBook"
+              @back="closeBookDetail"
+            />
+            <TVSeriesDetail
+              v-else-if="selectedTVSeries"
+              :series="selectedTVSeries"
+              @back="closeTVSeriesDetail"
+            />
             <ArticleDetail
               v-else-if="selectedArticle"
               :article="selectedArticle"
@@ -76,7 +86,7 @@
                         : 'text-gray-500 hover:text-gray-800 hover:bg-black/5'"
                     @click="setActiveTab(tab)"
                   >
-                    {{ tab === 'film' ? 'Films' : tab === 'song' ? 'Songs' : tab === 'podcast' ? 'Podcasts' : tab === 'magazine' ? 'Magazine' : tab === 'news' ? 'News' : 'Websites' }}
+                    {{ tabLabel(tab) }}
                   </button>
                 </div>
               </div>
@@ -102,6 +112,50 @@
                 </button>
               </template>
             </FilmGrid>
+            <BookGrid
+              v-else-if="activeTab === 'book'"
+              :books="panelBooks"
+              :title="panelTitle"
+              @select-book="openBookDetail"
+            >
+              <template #header-actions>
+                <button
+                  class="flex items-center justify-center p-2 rounded-lg transition-colors -mr-1"
+                  :class="isDark
+                    ? 'text-white/70 hover:bg-white/10'
+                    : 'text-gray-500 hover:bg-black/5 hover:text-gray-800'"
+                  title="Clear content"
+                  aria-label="Clear content"
+                  @click="closePanel"
+                >
+                  <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </template>
+            </BookGrid>
+            <TVSeriesGrid
+              v-else-if="activeTab === 'tvshow'"
+              :series="panelTVSeries"
+              :title="panelTitle"
+              @select-series="openTVSeriesDetail"
+            >
+              <template #header-actions>
+                <button
+                  class="flex items-center justify-center p-2 rounded-lg transition-colors -mr-1"
+                  :class="isDark
+                    ? 'text-white/70 hover:bg-white/10'
+                    : 'text-gray-500 hover:bg-black/5 hover:text-gray-800'"
+                  title="Clear content"
+                  aria-label="Clear content"
+                  @click="closePanel"
+                >
+                  <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </template>
+            </TVSeriesGrid>
             <SongGrid
               v-else-if="activeTab === 'song'"
               :songs="panelSongs"
@@ -280,11 +334,15 @@ import { computed } from 'vue'
 import { useChatStore } from '@/stores/chat'
 import { useTheme } from '@/composables/useTheme'
 import { useAI } from '@/composables/useAI'
-import { useContentPanel } from '@/composables/useContentPanel'
+import { useContentPanel, type ContentTab } from '@/composables/useContentPanel'
 import ChatWindow from '@/components/chat/ChatWindow.vue'
 import FilmGrid from '@/components/content/FilmGrid.vue'
 import ArticleDetail from '@/components/content/ArticleDetail.vue'
 import FilmDetail from '@/components/content/FilmDetail.vue'
+import BookGrid from '@/components/content/BookGrid.vue'
+import BookDetail from '@/components/content/BookDetail.vue'
+import TVSeriesGrid from '@/components/content/TVSeriesGrid.vue'
+import TVSeriesDetail from '@/components/content/TVSeriesDetail.vue'
 import SongGrid from '@/components/content/SongGrid.vue'
 import SongDetail from '@/components/content/SongDetail.vue'
 import PodcastGrid from '@/components/content/PodcastGrid.vue'
@@ -304,6 +362,8 @@ useAI()
 const {
   panelOpen,
   panelFilms,
+  panelBooks,
+  panelTVSeries,
   panelSongs,
   panelPodcasts,
   panelWebResults,
@@ -317,11 +377,17 @@ const {
   availableTabs,
   setActiveTab,
   selectedFilm,
+  selectedBook,
+  selectedTVSeries,
   selectedSong,
   selectedPodcast,
   selectedArticle,
   openFilmDetail,
   closeFilmDetail,
+  openBookDetail,
+  closeBookDetail,
+  openTVSeriesDetail,
+  closeTVSeriesDetail,
   openSongDetail,
   closeSongDetail,
   openPodcastDetail,
@@ -333,12 +399,29 @@ const {
 
 const panelSide = computed(() => chatStore.panelSide)
 
+const TAB_LABELS: Record<ContentTab, string> = {
+  film: 'Films',
+  book: 'Books',
+  tvshow: 'TV',
+  song: 'Songs',
+  podcast: 'Podcasts',
+  news: 'News',
+  websites: 'Websites',
+  magazine: 'Brief',
+}
+
+function tabLabel(tab: ContentTab): string {
+  return TAB_LABELS[tab] ?? tab
+}
+
 // Infer loader type from last user message when streaming (before tags are parsed)
 const loaderContextType = computed(() => {
   if (panelOpen.value) return contentType.value
   const lastUser = [...chatStore.messages].reverse().find((m) => m.role === 'user')
   const q = (lastUser?.content ?? '').toLowerCase()
   if (/\b(song|music|track|album|band|artist|listen)\b/.test(q)) return 'song'
+  if (/\b(book|novel|read|author|fiction|nonfiction|memoir)\b/.test(q)) return 'book'
+  if (/\b(tv show|tv series|series|television|binge|season)\b/.test(q)) return 'tvshow'
   if (/\b(podcast|episode|show|listen to)\b/.test(q)) return 'podcast'
   if (/\b(news|latest|recent|current|what'?s happening|what are people saying)\b/.test(q)) return 'news'
   if (/\b(bip|protocol|debate|sentiment|bearish|bull case|macro)\b/.test(q)) return 'magazine'

packages/app/vite-tmdb.ts

@@ -5,7 +5,7 @@ import { loadEnv } from 'vite'
 const TMDB_POSTER = 'https://image.tmdb.org/t/p/w342'
 const TMDB_BACKDROP = 'https://image.tmdb.org/t/p/w780'
 
-function createTmdbMiddleware(tmdbKey: string | undefined) {
+function createTmdbSearchMiddleware(tmdbKey: string | undefined, type: 'movie' | 'tv') {
   return async (req: Connect.IncomingMessage, res: any, next: () => void) => {
     if (req.method !== 'GET') return next()
     const url = new URL(req.url ?? '', `http://${req.headers?.host ?? 'localhost'}`)
@@ -22,13 +22,14 @@ function createTmdbMiddleware(tmdbKey: string | undefined) {
       return
     }
     try {
+      const yearParam = type === 'movie' ? 'primary_release_year' : 'first_air_date_year'
       const params = new URLSearchParams({
         api_key: tmdbKey,
         query: q,
-        ...(y ? { primary_release_year: y } : {}),
+        ...(y ? { [yearParam]: y } : {}),
       })
       const tmdbRes = await fetch(
-        `https://api.themoviedb.org/3/search/movie?${params}`
+        `https://api.themoviedb.org/3/search/${type}?${params}`
       )
       const data = (await tmdbRes.json()) as {
         results?: { poster_path?: string; backdrop_path?: string }[]
@@ -58,10 +59,12 @@ export function tmdbPlugin(): Plugin {
       tmdbKey = env.TMDB_API_KEY ?? env.VITE_TMDB_API_KEY
     },
     configureServer(server) {
-      server.middlewares.use('/api/tmdb/search', createTmdbMiddleware(tmdbKey))
+      server.middlewares.use('/api/tmdb/search', createTmdbSearchMiddleware(tmdbKey, 'movie'))
+      server.middlewares.use('/api/tmdb/search-tv', createTmdbSearchMiddleware(tmdbKey, 'tv'))
     },
     configurePreviewServer(server) {
-      server.middlewares.use('/api/tmdb/search', createTmdbMiddleware(tmdbKey))
+      server.middlewares.use('/api/tmdb/search', createTmdbSearchMiddleware(tmdbKey, 'movie'))
+      server.middlewares.use('/api/tmdb/search-tv', createTmdbSearchMiddleware(tmdbKey, 'tv'))
     },
   }
 }

packages/core/src/types/content.ts

@@ -78,6 +78,33 @@ export interface PodcastRendererData {
   totalResults?: number
 }
 
+export interface TVSeries {
+  id: string
+  title: string
+  year?: number
+  endYear?: number
+  posterUrl?: string
+  backdropUrl?: string
+  synopsis?: string
+  genres?: string[]
+  rating?: number
+  seasons?: number
+  episodes?: number
+  status?: 'ongoing' | 'ended' | 'cancelled' | 'upcoming'
+  network?: string
+  creator?: string
+  cast?: string[]
+  sources?: TVSeriesSource[]
+}
+
+export interface TVSeriesSource {
+  type: 'plex' | 'nextcloud' | 'youtube' | 'netflix' | 'free-web' | 'local'
+  name: string
+  url: string
+  quality?: string
+  icon?: string
+}
+
 export interface Book {
   id: string
   title: string