+
+
+
+
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 @@
+
+
+ ![]()
+
+
+
+
+
+
+
+
+ {{ film.title }}
+
+ โ
{{ film.rating }}
+ {{ film.year }}
+ {{ film.runtime }}m
+ {{ film.director }}
+
+
+
+
+
+ {{ genre }}
+
+
+
+ + {{ film.synopsis }} +
+ +
+
+
+
+ Cast
++ {{ film.cast.join(', ') }} +
+
+
+
+
+
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
+
+
+
+
+
+
+
+
+ + {{ title }} +
+ + {{ filteredFilms.length }} films + +
+
+
+