From 464069b2f2ba96c6653f06bf28ec5118d1c17295 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Mon, 2 Mar 2026 16:48:17 +0000
Subject: [PATCH] feat(chat): enhance film integration and UI improvements

- Updated ChatMessage component to display inline film cards and added functionality for selecting films.
- Improved ChatWindow to handle film-related content and update the panel with selected films.
- Refactored useAI to streamline film recommendation prompts and context.
- Enhanced ChatPage layout for better film library access and user experience.
- Updated service worker revision for PWA improvements.

Made-with: Cursor
---
 packages/app/dev-dist/sw.js                   |   2 +-
 .../app/src/components/chat/ChatInput.vue     |   8 +
 .../app/src/components/chat/ChatMessage.vue   |  46 +++++-
 .../app/src/components/chat/ChatWindow.vue    |   7 +-
 .../src/components/content/ContentPanel.vue   |  94 +++++++++++
 .../app/src/components/content/FilmCard.vue   |  67 ++++++++
 .../app/src/components/content/FilmDetail.vue | 113 +++++++++++++
 .../app/src/components/content/FilmGrid.vue   | 142 ++++++++++++++++
 packages/app/src/composables/useAI.ts         |  24 ++-
 .../app/src/composables/useContentPanel.ts    |  81 ++++++++++
 .../app/src/composables/useImageFallback.ts   |  25 +++
 packages/app/src/pages/ChatPage.vue           | 151 +++++++-----------
 packages/app/src/styles/main.css              |  10 ++
 13 files changed, 658 insertions(+), 112 deletions(-)
 create mode 100644 packages/app/src/components/content/ContentPanel.vue
 create mode 100644 packages/app/src/components/content/FilmCard.vue
 create mode 100644 packages/app/src/components/content/FilmDetail.vue
 create mode 100644 packages/app/src/components/content/FilmGrid.vue
 create mode 100644 packages/app/src/composables/useContentPanel.ts
 create mode 100644 packages/app/src/composables/useImageFallback.ts

diff --git a/packages/app/dev-dist/sw.js b/packages/app/dev-dist/sw.js
index 6b593536..a9e45088 100644
--- a/packages/app/dev-dist/sw.js
+++ b/packages/app/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-cf23aef7'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.htc1d8sapcc"
+    "revision": "0.5aiuhiql2u"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/packages/app/src/components/chat/ChatInput.vue b/packages/app/src/components/chat/ChatInput.vue
index ede8ee6c..2b4c6152 100644
--- a/packages/app/src/components/chat/ChatInput.vue
+++ b/packages/app/src/components/chat/ChatInput.vue
@@ -2,6 +2,11 @@
   <div class="p-3 md:p-4">
     <div
       class="glass rounded-2xl px-4 py-3 flex items-end gap-3 transition-all duration-300"
+      :class="focused
+        ? isDark
+          ? 'border-white/30'
+          : 'border-black/20'
+        : ''"
     >
       <textarea
         ref="textareaRef"
@@ -14,6 +19,8 @@
           : 'text-gray-800 placeholder:text-gray-400'"
         @keydown.enter.exact.prevent="send"
         @input="autoResize"
+        @focus="focused = true"
+        @blur="focused = false"
       />
       <button
         :disabled="!canSend"
@@ -53,6 +60,7 @@ const emit = defineEmits<{
 
 const { isDark } = useTheme()
 const text = ref('')
+const focused = ref(false)
 const textareaRef = ref<HTMLTextAreaElement | null>(null)
 
 const canSend = computed(() => text.value.trim().length > 0 && !props.disabled)
diff --git a/packages/app/src/components/chat/ChatMessage.vue b/packages/app/src/components/chat/ChatMessage.vue
index f3ee1be2..d77482a3 100644
--- a/packages/app/src/components/chat/ChatMessage.vue
+++ b/packages/app/src/components/chat/ChatMessage.vue
@@ -5,14 +5,31 @@
     :style="{ animationDelay: `${index * 30}ms` }"
   >
     <div
-      class="max-w-[85%] md:max-w-[70%] rounded-2xl px-4 py-3 transition-all duration-300"
+      class="max-w-[85%] md:max-w-[75%] rounded-2xl px-4 py-3 transition-all duration-300"
       :class="bubbleClasses"
     >
       <p class="text-sm leading-relaxed whitespace-pre-wrap break-words"
-         :class="isDark ? 'text-white/90' : 'text-gray-800'">{{ message.content }}</p>
+         :class="isDark ? 'text-white/90' : 'text-gray-800'">{{ displayText }}</p>
+
+      <div v-if="inlineFilms.length > 0" class="mt-3 space-y-1">
+        <FilmCard
+          v-for="film in inlineFilms"
+          :key="film.id"
+          :film="film"
+          @select="handleFilmSelect"
+        />
+      </div>
+
       <div class="flex items-center gap-2 mt-1.5">
         <span class="text-[10px] select-none"
               :class="isDark ? 'text-white/30' : 'text-gray-400'">{{ formattedTime }}</span>
+        <button
+          v-if="inlineFilms.length > 1"
+          class="text-[10px] text-accent/70 hover:text-accent transition-colors"
+          @click="openPanel"
+        >
+          View all {{ inlineFilms.length }} films →
+        </button>
       </div>
     </div>
   </div>
@@ -21,7 +38,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { Message } from '@aiui/core/types/message'
+import type { Film } from '@aiui/core/types/content'
 import { useTheme } from '@/composables/useTheme'
+import { useContentPanel } from '@/composables/useContentPanel'
+import FilmCard from '@/components/content/FilmCard.vue'
 
 const props = defineProps<{
   message: Message
@@ -29,6 +49,8 @@ const props = defineProps<{
 }>()
 
 const { isDark } = useTheme()
+const { extractFilmIds, resolveFilms, stripFilmTags, updatePanelFromText, openFilmDetail } = useContentPanel()
+
 const isUser = computed(() => props.message.role === 'user')
 
 const bubbleClasses = computed(() =>
@@ -37,8 +59,28 @@ const bubbleClasses = computed(() =>
     : 'glass-card rounded-bl-md'
 )
 
+const inlineFilms = computed(() => {
+  if (isUser.value) return []
+  const ids = extractFilmIds(props.message.content)
+  return resolveFilms(ids)
+})
+
+const displayText = computed(() => {
+  if (isUser.value) return props.message.content
+  return stripFilmTags(props.message.content)
+})
+
 const formattedTime = computed(() => {
   const d = new Date(props.message.timestamp)
   return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
 })
+
+function handleFilmSelect(film: Film) {
+  updatePanelFromText(props.message.content)
+  openFilmDetail(film)
+}
+
+function openPanel() {
+  updatePanelFromText(props.message.content)
+}
 </script>
diff --git a/packages/app/src/components/chat/ChatWindow.vue b/packages/app/src/components/chat/ChatWindow.vue
index 4895397a..e8d841b7 100644
--- a/packages/app/src/components/chat/ChatWindow.vue
+++ b/packages/app/src/components/chat/ChatWindow.vue
@@ -48,6 +48,7 @@ import { computed, ref, watch, nextTick } from 'vue'
 import { useChatStore } from '@/stores/chat'
 import { useAI } from '@/composables/useAI'
 import { useTheme } from '@/composables/useTheme'
+import { useContentPanel } from '@/composables/useContentPanel'
 import ChatHeader from './ChatHeader.vue'
 import ChatMessage from './ChatMessage.vue'
 import ChatInput from './ChatInput.vue'
@@ -74,6 +75,7 @@ defineEmits<{
 const chatStore = useChatStore()
 const { sendMessage } = useAI()
 const { isDark } = useTheme()
+const { updatePanelFromText } = useContentPanel()
 const messageListRef = ref<HTMLElement | null>(null)
 
 const messages = computed(() => chatStore.messages)
@@ -113,11 +115,14 @@ watch(
 
 watch(
   () => messages.value[messages.value.length - 1]?.content,
-  () => {
+  (content) => {
     nextTick(() => {
       const el = messageListRef.value
       if (el) el.scrollTop = el.scrollHeight
     })
+    if (content && !isStreaming.value) {
+      updatePanelFromText(content)
+    }
   }
 )
 </script>
diff --git a/packages/app/src/components/content/ContentPanel.vue b/packages/app/src/components/content/ContentPanel.vue
new file mode 100644
index 00000000..f4555f73
--- /dev/null
+++ b/packages/app/src/components/content/ContentPanel.vue
@@ -0,0 +1,94 @@
+<template>
+  <Transition name="panel">
+    <aside
+      v-if="panelOpen"
+      class="glass-card overflow-hidden flex flex-col"
+      :class="isMobile
+        ? 'fixed inset-0 z-30'
+        : 'w-80 xl:w-96 shrink-0'"
+    >
+      <div
+        v-if="isMobile"
+        class="p-3 flex items-center justify-between"
+        :style="isDark
+          ? 'border-bottom: 1px solid rgba(255, 255, 255, 0.08)'
+          : 'border-bottom: 1px solid rgba(0, 0, 0, 0.06)'"
+      >
+        <h3 class="text-sm font-bold" :class="isDark ? 'text-white/90' : 'text-gray-900'">
+          {{ panelTitle }}
+        </h3>
+        <button
+          class="p-2 rounded-lg transition-colors"
+          :class="isDark
+            ? 'text-white/70 hover:bg-white/10'
+            : 'text-gray-500 hover:bg-black/5'"
+          @click="closePanel"
+        >
+          <svg class="w-4 h-4" 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>
+      </div>
+
+      <div class="flex-1 min-h-0">
+        <FilmDetail
+          v-if="selectedFilm"
+          :film="selectedFilm"
+          @back="closeFilmDetail"
+        />
+        <FilmGrid
+          v-else
+          :films="panelFilms"
+          :title="panelTitle"
+          @select-film="openFilmDetail"
+        />
+      </div>
+    </aside>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useTheme } from '@/composables/useTheme'
+import { useContentPanel } from '@/composables/useContentPanel'
+import FilmGrid from './FilmGrid.vue'
+import FilmDetail from './FilmDetail.vue'
+
+const { isDark } = useTheme()
+const {
+  panelOpen,
+  panelFilms,
+  panelTitle,
+  selectedFilm,
+  openFilmDetail,
+  closeFilmDetail,
+  closePanel,
+} = useContentPanel()
+
+const windowWidth = ref(window.innerWidth)
+const isMobile = computed(() => windowWidth.value < 1024)
+
+function onResize() {
+  windowWidth.value = window.innerWidth
+}
+
+onMounted(() => window.addEventListener('resize', onResize))
+onUnmounted(() => window.removeEventListener('resize', onResize))
+</script>
+
+<style scoped>
+.panel-enter-active {
+  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.panel-leave-active {
+  transition: all 0.2s ease-in;
+}
+.panel-enter-from {
+  opacity: 0;
+  transform: translateX(20px);
+}
+.panel-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}
+</style>
diff --git a/packages/app/src/components/content/FilmCard.vue b/packages/app/src/components/content/FilmCard.vue
new file mode 100644
index 00000000..3a3a03b1
--- /dev/null
+++ b/packages/app/src/components/content/FilmCard.vue
@@ -0,0 +1,67 @@
+<template>
+  <button
+    class="flex gap-3 p-2 rounded-xl transition-all duration-200 text-left w-full group"
+    :class="isDark
+      ? 'hover:bg-white/5 active:bg-white/10'
+      : 'hover:bg-black/3 active:bg-black/5'"
+    @click="$emit('select', film)"
+  >
+    <img
+      v-if="film.posterUrl"
+      :src="film.posterUrl"
+      :alt="film.title"
+      class="w-12 h-[72px] rounded-lg object-cover shrink-0 shadow-md"
+      loading="lazy"
+      @error="(e) => handleImgError(e, film.title, film.year)"
+    />
+    <div
+      v-else
+      class="w-12 h-[72px] rounded-lg shrink-0 flex items-center justify-center text-lg"
+      :class="isDark ? 'bg-white/10' : 'bg-black/5'"
+    >
+      🎬
+    </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'">{{ film.title }}</p>
+      <p class="text-[11px] mt-0.5"
+         :class="isDark ? 'text-white/40' : 'text-gray-500'">
+        {{ film.year }} · {{ film.director }}
+      </p>
+      <div class="flex items-center gap-1.5 mt-1.5">
+        <span class="text-[10px] font-semibold px-1.5 py-0.5 rounded"
+              :class="ratingClass">
+          ★ {{ film.rating }}
+        </span>
+        <span
+          v-for="src in film.sources.slice(0, 3)"
+          :key="src.type"
+          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'"
+        >
+          {{ src.type }}
+        </span>
+      </div>
+    </div>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Film } from '@aiui/core/types/content'
+import { useTheme } from '@/composables/useTheme'
+import { handleImgError } from '@/composables/useImageFallback'
+
+const props = defineProps<{ film: Film }>()
+defineEmits<{ select: [film: Film] }>()
+
+const { isDark } = useTheme()
+
+const ratingClass = computed(() => {
+  const r = props.film.rating
+  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'
+})
+</script>
diff --git a/packages/app/src/components/content/FilmDetail.vue b/packages/app/src/components/content/FilmDetail.vue
new file mode 100644
index 00000000..5e385049
--- /dev/null
+++ b/packages/app/src/components/content/FilmDetail.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="h-full overflow-y-auto custom-scrollbar">
+    <div class="relative">
+      <img
+        v-if="film.backdropUrl"
+        :src="film.backdropUrl"
+        :alt="film.title"
+        class="w-full aspect-video object-cover"
+        @error="(e) => handleImgError(e, film.title, film.year)"
+      />
+      <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />
+
+      <button
+        class="absolute top-3 left-3 p-2 rounded-lg backdrop-blur-md transition-colors"
+        :class="'bg-black/30 text-white/80 hover:bg-black/50'"
+        @click="$emit('back')"
+      >
+        <svg class="w-4 h-4" 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">{{ film.title }}</h2>
+        <div class="flex items-center gap-2 mt-1 text-xs text-white/60">
+          <span class="text-accent font-bold">★ {{ film.rating }}</span>
+          <span>{{ film.year }}</span>
+          <span>{{ film.runtime }}m</span>
+          <span>{{ film.director }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="p-4 space-y-4">
+      <div class="flex flex-wrap gap-1.5">
+        <span
+          v-for="genre in film.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>
+
+      <p class="text-sm leading-relaxed"
+         :class="isDark ? 'text-white/70' : 'text-gray-600'">
+        {{ film.synopsis }}
+      </p>
+
+      <div>
+        <h4 class="text-xs font-semibold mb-2"
+            :class="isDark ? 'text-white/50' : 'text-gray-500'">Cast</h4>
+        <p class="text-sm" :class="isDark ? 'text-white/70' : 'text-gray-700'">
+          {{ film.cast.join(', ') }}
+        </p>
+      </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 film.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>
+              <div>
+                <p class="text-xs font-medium"
+                   :class="isDark ? 'text-white/80' : 'text-gray-800'">{{ src.name }}</p>
+                <p class="text-[10px]"
+                   :class="isDark ? 'text-white/30' : 'text-gray-400'">{{ src.quality }}</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 type { Film } from '@aiui/core/types/content'
+import { useTheme } from '@/composables/useTheme'
+import { handleImgError } from '@/composables/useImageFallback'
+
+defineProps<{ film: Film }>()
+defineEmits<{ back: [] }>()
+
+const { isDark } = useTheme()
+
+function sourceIcon(type: string): string {
+  const icons: Record<string, string> = {
+    plex: '🟧',
+    nextcloud: '☁️',
+    youtube: '▶️',
+    'free-web': '🌐',
+  }
+  return icons[type] ?? '📺'
+}
+</script>
diff --git a/packages/app/src/components/content/FilmGrid.vue b/packages/app/src/components/content/FilmGrid.vue
new file mode 100644
index 00000000..638b6c66
--- /dev/null
+++ b/packages/app/src/components/content/FilmGrid.vue
@@ -0,0 +1,142 @@
+<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">
+        <h3 class="text-sm font-bold" :class="isDark ? 'text-white/90' : 'text-gray-900'">
+          {{ title }}
+        </h3>
+        <span class="text-[10px] font-mono" :class="isDark ? 'text-white/30' : 'text-gray-400'">
+          {{ filteredFilms.length }} films
+        </span>
+      </div>
+
+      <input
+        v-model="search"
+        type="text"
+        placeholder="Search films..."
+        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 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 p-3">
+      <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
+        <button
+          v-for="film in filteredFilms"
+          :key="film.id"
+          class="group rounded-xl overflow-hidden transition-all duration-200"
+          :class="isDark ? 'hover:ring-1 hover:ring-white/20' : 'hover:ring-1 hover:ring-black/10'"
+          @click="$emit('selectFilm', film)"
+        >
+          <div class="aspect-[2/3] relative">
+            <img
+              :src="film.posterUrl"
+              :alt="film.title"
+              class="w-full h-full object-cover"
+              loading="lazy"
+              @error="(e) => handleImgError(e, film.title, film.year)"
+            />
+            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" />
+
+            <div class="absolute bottom-0 left-0 right-0 p-2">
+              <p class="text-[11px] font-semibold text-white/90 leading-tight truncate">
+                {{ film.title }}
+              </p>
+              <div class="flex items-center gap-1 mt-0.5">
+                <span class="text-[9px] text-accent font-bold">★ {{ film.rating }}</span>
+                <span class="text-[9px] text-white/40">{{ film.year }}</span>
+              </div>
+            </div>
+
+            <div class="absolute top-1.5 right-1.5 flex gap-0.5">
+              <span
+                v-for="src in film.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>
+        </button>
+      </div>
+
+      <div v-if="filteredFilms.length === 0" class="flex items-center justify-center py-12">
+        <p class="text-sm" :class="isDark ? 'text-white/30' : 'text-gray-400'">
+          No films match your search
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { Film } from '@aiui/core/types/content'
+import { useTheme } from '@/composables/useTheme'
+import { handleImgError } from '@/composables/useImageFallback'
+
+const props = withDefaults(defineProps<{
+  films: Film[]
+  title?: string
+}>(), {
+  title: 'Recommended Films',
+})
+
+defineEmits<{ selectFilm: [film: Film] }>()
+
+const { isDark } = useTheme()
+const search = ref('')
+const activeGenre = ref<string | null>(null)
+
+const topGenres = computed(() => {
+  const counts = new Map<string, number>()
+  for (const f of props.films) {
+    for (const g of f.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 filteredFilms = computed(() => {
+  let result = props.films
+  if (search.value) {
+    const q = search.value.toLowerCase()
+    result = result.filter(
+      (f) =>
+        f.title.toLowerCase().includes(q) ||
+        f.director.toLowerCase().includes(q) ||
+        f.cast.some((c) => c.toLowerCase().includes(q))
+    )
+  }
+  if (activeGenre.value) {
+    result = result.filter((f) => f.genres.includes(activeGenre.value!))
+  }
+  return result
+})
+</script>
diff --git a/packages/app/src/composables/useAI.ts b/packages/app/src/composables/useAI.ts
index 31dfd316..f99d2d10 100644
--- a/packages/app/src/composables/useAI.ts
+++ b/packages/app/src/composables/useAI.ts
@@ -6,26 +6,20 @@ type Provider = 'claude' | 'openrouter' | 'mock'
 const CLAUDE_PATH = '/api/claude/v1/messages'
 const OPENROUTER_PATH = '/api/openrouter/api/v1/chat/completions'
 
+import { mockFilms } from '@/mocks/films'
+
+const filmContext = mockFilms.map((f) =>
+  `- [${f.id}] "${f.title}" (${f.year}) dir. ${f.director} | ${f.genres.join(', ')} | ${f.rating}/10 | On: ${f.sources.map(s => s.type).join(', ')}`
+).join('\n')
+
 const SYSTEM_PROMPT = `You are AIUI, a helpful AI assistant with access to the user's media library.
 
-When recommending or discussing films, reference films from the user's library using the tag format [[film:ID]] where ID matches a film in their collection. Always include the tag so the UI can render rich cards. You can recommend multiple films. Write a brief description of why each film is worth watching alongside the tag.
+When recommending or discussing films, reference films from the user's library using the tag format [[film:ID]] where ID is the film's id from their collection. Always include these tags so the UI can render rich film cards. You may recommend multiple films. Write a brief reason why each film is worth watching alongside its tag.
 
 The user's film library:
-${generateFilmContext()}
+${filmContext}
 
-If a user asks about a film NOT in their library, still discuss it but mention it's not currently in their collection.`
-
-function generateFilmContext(): string {
-  const { mockFilms } = await_import_films()
-  return mockFilms.map((f) => 
-    `- [${f.id}] "${f.title}" (${f.year}) dir. ${f.director} | ${f.genres.join(', ')} | ${f.rating}/10 | Available on: ${f.sources.map(s => s.type).join(', ')}`
-  ).join('\n')
-}
-
-function await_import_films() {
-  // Synchronous access — the mock is bundled
-  return require('@/mocks/films') as typeof import('@/mocks/films')
-}
+If a user asks about a film NOT in their library, discuss it normally but note it's not in their collection.`
 
 const openrouterApiKey = import.meta.env.VITE_OPENROUTER_API_KEY ?? ''
 const hasOpenRouter = !!openrouterApiKey
diff --git a/packages/app/src/composables/useContentPanel.ts b/packages/app/src/composables/useContentPanel.ts
new file mode 100644
index 00000000..67a05304
--- /dev/null
+++ b/packages/app/src/composables/useContentPanel.ts
@@ -0,0 +1,81 @@
+import { ref, computed } from 'vue'
+import type { Film } from '@aiui/core/types/content'
+import { mockFilms } from '@/mocks/films'
+
+const panelOpen = ref(false)
+const panelFilms = ref<Film[]>([])
+const selectedFilm = ref<Film | null>(null)
+const panelTitle = ref('Recommended Films')
+
+const FILM_TAG_RE = /\[\[film:(f\d+)\]\]/g
+
+export function useContentPanel() {
+  function extractFilmIds(text: string): string[] {
+    const ids: string[] = []
+    let match: RegExpExecArray | null
+    const re = new RegExp(FILM_TAG_RE.source, 'g')
+    while ((match = re.exec(text)) !== null) {
+      if (!ids.includes(match[1])) ids.push(match[1])
+    }
+    return ids
+  }
+
+  function resolveFilms(ids: string[]): Film[] {
+    return ids
+      .map((id) => mockFilms.find((f) => f.id === id))
+      .filter((f): f is Film => !!f)
+  }
+
+  function updatePanelFromText(text: string) {
+    const ids = extractFilmIds(text)
+    if (ids.length > 0) {
+      const films = resolveFilms(ids)
+      if (films.length > 0) {
+        panelFilms.value = films
+        panelOpen.value = true
+        panelTitle.value = films.length === 1
+          ? films[0].title
+          : `${films.length} Recommended Films`
+      }
+    }
+  }
+
+  function stripFilmTags(text: string): string {
+    return text.replace(FILM_TAG_RE, '').replace(/\n{3,}/g, '\n\n').trim()
+  }
+
+  function openFilmDetail(film: Film) {
+    selectedFilm.value = film
+  }
+
+  function closeFilmDetail() {
+    selectedFilm.value = null
+  }
+
+  function closePanel() {
+    panelOpen.value = false
+    selectedFilm.value = null
+  }
+
+  function showAllFilms() {
+    panelFilms.value = [...mockFilms]
+    panelTitle.value = 'Your Film Library'
+    panelOpen.value = true
+    selectedFilm.value = null
+  }
+
+  return {
+    panelOpen,
+    panelFilms,
+    selectedFilm,
+    panelTitle,
+    extractFilmIds,
+    resolveFilms,
+    updatePanelFromText,
+    stripFilmTags,
+    openFilmDetail,
+    closeFilmDetail,
+    closePanel,
+    showAllFilms,
+  }
+}
diff --git a/packages/app/src/composables/useImageFallback.ts b/packages/app/src/composables/useImageFallback.ts
new file mode 100644
index 00000000..8854ac6f
--- /dev/null
+++ b/packages/app/src/composables/useImageFallback.ts
@@ -0,0 +1,25 @@
+export function generatePosterFallback(title: string, year?: number): string {
+  const hue = [...title].reduce((acc, c) => acc + c.charCodeAt(0), 0) % 360
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 342 513">
+    <rect width="342" height="513" fill="hsl(${hue}, 30%, 15%)"/>
+    <rect x="1" y="1" width="340" height="511" rx="8" fill="none" stroke="hsl(${hue}, 40%, 25%)" stroke-width="2"/>
+    <text x="171" y="230" text-anchor="middle" fill="hsl(${hue}, 50%, 70%)" font-family="system-ui" font-size="20" font-weight="600">
+      ${escapeXml(title.length > 20 ? title.slice(0, 18) + '…' : title)}
+    </text>
+    ${year ? `<text x="171" y="260" text-anchor="middle" fill="hsl(${hue}, 30%, 50%)" font-family="system-ui" font-size="14">${year}</text>` : ''}
+    <text x="171" y="290" text-anchor="middle" fill="hsl(${hue}, 20%, 35%)" font-size="40">🎬</text>
+  </svg>`
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`
+}
+
+function escapeXml(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+}
+
+export function handleImgError(e: Event, title: string, year?: number) {
+  const img = e.target as HTMLImageElement
+  if (!img.dataset.fallback) {
+    img.dataset.fallback = '1'
+    img.src = generatePosterFallback(title, year)
+  }
+}
diff --git a/packages/app/src/pages/ChatPage.vue b/packages/app/src/pages/ChatPage.vue
index d99d2e96..fbcd887d 100644
--- a/packages/app/src/pages/ChatPage.vue
+++ b/packages/app/src/pages/ChatPage.vue
@@ -8,90 +8,57 @@
       <div class="absolute bottom-[-20%] right-[-10%] w-[600px] h-[600px] rounded-full bg-info/5 blur-[120px]" />
     </div>
 
-    <div class="relative z-10 flex-1 flex h-full p-3 md:p-4 gap-3 md:gap-4" :class="layoutClasses">
-      <aside
-        v-if="showSidebar"
-        class="hidden lg:flex w-64 xl:w-72 shrink-0 flex-col glass rounded-2xl overflow-hidden"
+    <div class="relative z-10 flex-1 flex h-full p-3 md:p-4 gap-3 md:gap-4">
+
+      <!-- Content surface (main area) -->
+      <main
+        class="flex-1 min-w-0 glass-card overflow-hidden flex flex-col"
+        :class="panelSide === 'left' ? 'order-last' : 'order-first'"
       >
-        <div class="p-4 flex items-center justify-between"
-             :style="isDark
-               ? 'border-bottom: 1px solid rgba(255, 255, 255, 0.08)'
-               : 'border-bottom: 1px solid rgba(0, 0, 0, 0.06)'"
-        >
-          <h1 class="text-lg font-bold gradient-text">AIUI</h1>
-          <div class="flex items-center gap-1">
-            <button
-              class="p-2 rounded-lg transition-colors"
-              :class="isDark
-                ? 'text-white/70 hover:text-white hover:bg-white/10'
-                : 'text-gray-500 hover:text-gray-900 hover:bg-black/5'"
-              aria-label="Toggle theme"
-              @click="toggleTheme()"
-            >
-              <svg v-if="isDark" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-              </svg>
-              <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-              </svg>
-            </button>
-            <button
-              class="p-2 rounded-lg transition-colors"
-              :class="isDark
-                ? 'text-white/70 hover:text-white hover:bg-white/10'
-                : 'text-gray-500 hover:text-gray-900 hover:bg-black/5'"
-              aria-label="New chat"
-              @click="chatStore.createConversation()"
-            >
-              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-              </svg>
-            </button>
+        <div v-if="panelOpen" class="flex-1 min-h-0">
+          <FilmDetail
+            v-if="selectedFilm"
+            :film="selectedFilm"
+            @back="closeFilmDetail"
+          />
+          <FilmGrid
+            v-else
+            :films="panelFilms"
+            :title="panelTitle"
+            @select-film="openFilmDetail"
+          />
+        </div>
+
+        <div v-else class="flex-1 flex items-center justify-center">
+          <div class="text-center space-y-4 animate-fade-up max-w-sm px-6">
+            <div class="w-20 h-20 rounded-2xl glass flex items-center justify-center mx-auto">
+              <span class="text-3xl">✦</span>
+            </div>
+            <div>
+              <h2 class="text-lg font-bold mb-1"
+                  :class="isDark ? 'text-white/80' : 'text-gray-800'">
+                Content Surface
+              </h2>
+              <p class="text-sm leading-relaxed"
+                 :class="isDark ? 'text-white/30' : 'text-gray-400'">
+                Ask about films in the chat to see rich content here.
+              </p>
+            </div>
           </div>
         </div>
+      </main>
 
-        <div class="flex-1 overflow-y-auto scrollbar-hide px-2 pb-2 space-y-1 pt-2">
-          <button
-            v-for="conv in conversations"
-            :key="conv.id"
-            class="w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all duration-200 truncate"
-            :class="conv.id === chatStore.activeConversationId
-              ? 'nav-tab-active'
-              : isDark
-                ? 'text-white/60 hover:text-white hover:bg-white/10'
-                : 'text-gray-500 hover:text-gray-900 hover:bg-black/5'"
-            @click="chatStore.setActiveConversation(conv.id)"
-          >
-            {{ conv.title }}
-          </button>
-
-          <p
-            v-if="conversations.length === 0"
-            class="text-xs text-center py-8"
-            :class="isDark ? 'text-white/20' : 'text-gray-400'"
-          >
-            No conversations yet
-          </p>
-        </div>
-
-        <div class="p-3" :style="isDark
-          ? 'border-top: 1px solid rgba(255, 255, 255, 0.06)'
-          : 'border-top: 1px solid rgba(0, 0, 0, 0.06)'"
-        >
-          <div class="flex items-center gap-2 px-2 py-1.5 rounded-lg text-[11px]"
-               :class="isDark ? 'text-white/25' : 'text-gray-400'">
-            <span class="w-1.5 h-1.5 rounded-full bg-success animate-pulse" />
-            <span>{{ providerLabel }}</span>
-          </div>
-        </div>
-      </aside>
-
-      <main class="flex-1 min-w-0 flex flex-col glass-card overflow-hidden">
+      <!-- Chat panel -->
+      <aside
+        class="w-80 xl:w-96 shrink-0 flex flex-col glass-card overflow-hidden"
+        :class="panelSide === 'left' ? 'order-first' : 'order-last'"
+      >
         <ChatWindow
           :side="panelSide"
           @switch-side="chatStore.switchSide()"
         />
-      </main>
+      </aside>
+
     </div>
   </div>
 </template>
@@ -101,26 +68,24 @@ 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 ChatWindow from '@/components/chat/ChatWindow.vue'
+import FilmGrid from '@/components/content/FilmGrid.vue'
+import FilmDetail from '@/components/content/FilmDetail.vue'
 
 const chatStore = useChatStore()
-const { isDark, toggleTheme } = useTheme()
-const { activeProvider } = useAI()
+const { isDark } = useTheme()
+
+useAI()
+
+const {
+  panelOpen,
+  panelFilms,
+  panelTitle,
+  selectedFilm,
+  openFilmDetail,
+  closeFilmDetail,
+} = useContentPanel()
 
 const panelSide = computed(() => chatStore.panelSide)
-const conversations = computed(() => chatStore.conversationList)
-const showSidebar = true
-
-const layoutClasses = computed(() =>
-  panelSide.value === 'left' ? 'flex-row-reverse' : 'flex-row'
-)
-
-const providerLabel = computed(() => {
-  const labels: Record<string, string> = {
-    claude: 'Claude Max connected',
-    openrouter: 'OpenRouter connected',
-    mock: 'Echo mode',
-  }
-  return labels[activeProvider.value] ?? 'Connected'
-})
 </script>
diff --git a/packages/app/src/styles/main.css b/packages/app/src/styles/main.css
index 179c1deb..30715779 100644
--- a/packages/app/src/styles/main.css
+++ b/packages/app/src/styles/main.css
@@ -257,10 +257,20 @@ body {
 
 *:focus-visible {
   outline: none;
+}
+
+button:focus-visible,
+a:focus-visible {
   box-shadow: 0 0 16px rgba(120, 180, 255, 0.2), 0 0 32px rgba(100, 160, 255, 0.1);
   transition: box-shadow 0.2s ease;
 }
 
+textarea:focus-visible,
+input:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
 /* ===== GRADIENT TEXT ===== */
 
 .gradient-text {