Merge pull request 'manual-cleanup' (#37) from manual-cleanup into main

Reviewed-on: http://gitea.lan/gpatti/MediaLore/pulls/37

package-lock.json

@@ -9,6 +9,9 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "@tanstack/react-virtual": "^3.13.24",
+        "@types/adm-zip": "^0.5.8",
+        "adm-zip": "^0.5.17",
         "archiver": "^7.0.1",
         "better-sqlite3": "^12.8.0",
         "fast-xml-parser": "^5.5.10",
@@ -1144,9 +1147,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "15.5.14",
+      "version": "15.5.15",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.14.tgz",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.15.tgz",
-      "integrity": "sha512-aXeirLYuASxEgi4X4WhfXsShCFxWDfNn/8ZeC5YXAS2BB4A8FJi1kwwGL6nvMVboE7fZCzmJPNdMvVHc8JpaiA==",
+      "integrity": "sha512-vcmyu5/MyFzN7CdqRHO3uHO44p/QPCZkuTUXroeUmhNP8bL5PHFEhik22JUazt+CDDoD6EpBYRCaS2pISL+/hg==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
@@ -1160,9 +1163,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "15.5.14",
+      "version": "15.5.15",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.14.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.15.tgz",
-      "integrity": "sha512-Y9K6SPzobnZvrRDPO2s0grgzC+Egf0CqfbdvYmQVaztV890zicw8Z8+4Vqw8oPck8r1TjUHxVh8299Cg4TrxXg==",
+      "integrity": "sha512-6PvFO2Tzt10GFK2Ro9tAVEtacMqRmTarYMFKAnV2vYMdwWc73xzmDQyAV7SwEdMhzmiRoo7+m88DuiXlJlGeaw==",
       "cpu": [
         "arm64"
       ],
@@ -1176,9 +1179,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "15.5.14",
+      "version": "15.5.15",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.14.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.15.tgz",
-      "integrity": "sha512-aNnkSMjSFRTOmkd7qoNI2/rETQm/vKD6c/Ac9BZGa9CtoOzy3c2njgz7LvebQJ8iPxdeTuGnAjagyis8a9ifBw==",
+      "integrity": "sha512-G+YNV+z6FDZTp/+IdGyIMFqalBTaQSnvAA+X/hrt+eaTRFSznRMz9K7rTmzvM6tDmKegNtyzgufZW0HwVzEqaQ==",
       "cpu": [
         "x64"
       ],
@@ -1192,9 +1195,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "15.5.14",
+      "version": "15.5.15",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.14.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.15.tgz",
-      "integrity": "sha512-tjlpia+yStPRS//6sdmlVwuO1Rioern4u2onafa5n+h2hCS9MAvMXqpVbSrjgiEOoCs0nJy7oPOmWgtRRNSM5Q==",
+      "integrity": "sha512-eVkrMcVIBqGfXB+QUC7jjZ94Z6uX/dNStbQFabewAnk13Uy18Igd1YZ/GtPRzdhtm7QwC0e6o7zOQecul4iC1w==",
       "cpu": [
         "arm64"
       ],
@@ -1211,9 +1214,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "15.5.14",
+      "version": "15.5.15",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.14.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.15.tgz",
-      "integrity": "sha512-8B8cngBaLadl5lbDRdxGCP1Lef8ipD6KlxS3v0ElDAGil6lafrAM3B258p1KJOglInCVFUjk751IXMr2ixeQOQ==",
+      "integrity": "sha512-RwSHKMQ7InLy5GfkY2/n5PcFycKA08qI1VST78n09nN36nUPqCvGSMiLXlfUmzmpQpF6XeBYP2KRWHi0UW3uNg==",
       "cpu": [
         "arm64"
       ],
@@ -1230,9 +1233,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "15.5.14",
+      "version": "15.5.15",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.14.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.15.tgz",
-      "integrity": "sha512-bAS6tIAg8u4Gn3Nz7fCPpSoKAexEt2d5vn1mzokcqdqyov6ZJ6gu6GdF9l8ORFrBuRHgv3go/RfzYz5BkZ6YSQ==",
+      "integrity": "sha512-nplqvY86LakS+eeiuWsNWvfmK8pFcOEW7ZtVRt4QH70lL+0x6LG/m1OpJ/tvrbwjmR8HH9/fH2jzW1GlL03TIg==",
       "cpu": [
         "x64"
       ],
@@ -1249,9 +1252,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "15.5.14",
+      "version": "15.5.15",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.14.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.15.tgz",
-      "integrity": "sha512-mMxv/FcrT7Gfaq4tsR22l17oKWXZmH/lVqcvjX0kfp5I0lKodHYLICKPoX1KRnnE+ci6oIUdriUhuA3rBCDiSw==",
+      "integrity": "sha512-eAgl9NKQ84/sww0v81DQINl/vL2IBxD7sMybd0cWRw6wqgouVI53brVRBrggqBRP/NWeIAE1dm5cbKYoiMlqDQ==",
       "cpu": [
         "x64"
       ],
@@ -1268,9 +1271,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "15.5.14",
+      "version": "15.5.15",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.14.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.15.tgz",
-      "integrity": "sha512-OTmiBlYThppnvnsqx0rBqjDRemlmIeZ8/o4zI7veaXoeO1PVHoyj2lfTfXTiiGjCyRDhA10y4h6ZvZvBiynr2g==",
+      "integrity": "sha512-GJVZC86lzSquh0MtvZT+L7G8+jMnJcldloOjA8Kf3wXvBrvb6OGe2MzPuALxFshSm/IpwUtD2mIoof39ymf52A==",
       "cpu": [
         "arm64"
       ],
@@ -1284,9 +1287,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "15.5.14",
+      "version": "15.5.15",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.14.tgz",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.15.tgz",
-      "integrity": "sha512-+W7eFf3RS7m4G6tppVTOSyP9Y6FsJXfOuKzav1qKniiFm3KFByQfPEcouHdjlZmysl4zJGuGLQ/M9XyVeyeNEg==",
+      "integrity": "sha512-nFucjVdwlFqxh/JG3hWSJ4p8+YJV7Ii8aPDuBQULB6DzUF4UNZETXLfEUk+oI2zEznWWULPt7MeuTE6xtK1HSA==",
       "cpu": [
         "x64"
       ],
@@ -1656,6 +1659,33 @@
         "tailwindcss": "4.2.2"
       }
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.13.24",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.24.tgz",
+      "integrity": "sha512-aIJvz5OSkhNIhZIpYivrxrPTKYsjW9Uzy+sP/mx0S3sev2HyvPb7xmjbYvokzEpfgYHy/HjzJ2zFAETuUfgCpg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.14.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.14.0.tgz",
+      "integrity": "sha512-JLANqGy/D6k4Ujmh8Tr25lGimuOXNiaVyXaCAZS0W+1390sADdGnyUdSWNIfd49gebtIxGMij4IktRVzrdr12Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -1667,6 +1697,15 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/adm-zip": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/@types/adm-zip/-/adm-zip-0.5.8.tgz",
+      "integrity": "sha512-RVVH7QvZYbN+ihqZ4kX/dMiowf6o+Jk1fNwiSdx0NahBJLU787zkULhGhJM8mf/obmLGmgdMM0bXsQTmyfbR7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/archiver": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@types/archiver/-/archiver-7.0.0.tgz",
@@ -1712,7 +1751,6 @@
       "version": "25.5.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.5.0.tgz",
       "integrity": "sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~7.18.0"
@@ -2365,6 +2403,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/adm-zip": {
+      "version": "0.5.17",
+      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.17.tgz",
+      "integrity": "sha512-+Ut8d9LLqwEvHHJl1+PIHqoyDxFgVN847JTVM3Izi3xHDWPE4UtzzXysMZQs64DMcrJfBeS/uoEP4AD3HQHnQQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
@@ -2958,9 +3005,9 @@
       "license": "MIT"
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.12",
+      "version": "1.1.14",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6057,12 +6104,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "15.5.14",
+      "version": "15.5.15",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.5.14.tgz",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.5.15.tgz",
-      "integrity": "sha512-M6S+4JyRjmKic2Ssm7jHUPkE6YUJ6lv4507jprsSZLulubz0ihO2E+S4zmQK3JZ2ov81JrugukKU4Tz0ivgqqQ==",
+      "integrity": "sha512-VSqCrJwtLVGwAVE0Sb/yikrQfkwkZW9p+lL/J4+xe+G3ZA+QnWPqgcfH1tDUEuk9y+pthzzVFp4L/U8JerMfMQ==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "15.5.14",
+        "@next/env": "15.5.15",
         "@swc/helpers": "0.5.15",
         "caniuse-lite": "^1.0.30001579",
         "postcss": "8.4.31",
@@ -6075,14 +6122,14 @@
         "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "15.5.14",
+        "@next/swc-darwin-arm64": "15.5.15",
-        "@next/swc-darwin-x64": "15.5.14",
+        "@next/swc-darwin-x64": "15.5.15",
-        "@next/swc-linux-arm64-gnu": "15.5.14",
+        "@next/swc-linux-arm64-gnu": "15.5.15",
-        "@next/swc-linux-arm64-musl": "15.5.14",
+        "@next/swc-linux-arm64-musl": "15.5.15",
-        "@next/swc-linux-x64-gnu": "15.5.14",
+        "@next/swc-linux-x64-gnu": "15.5.15",
-        "@next/swc-linux-x64-musl": "15.5.14",
+        "@next/swc-linux-x64-musl": "15.5.15",
-        "@next/swc-win32-arm64-msvc": "15.5.14",
+        "@next/swc-win32-arm64-msvc": "15.5.15",
-        "@next/swc-win32-x64-msvc": "15.5.14",
+        "@next/swc-win32-x64-msvc": "15.5.15",
         "sharp": "^0.34.3"
       },
       "peerDependencies": {
@@ -7954,7 +8001,6 @@
       "version": "7.18.2",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
       "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/unrs-resolver": {

package.json

@@ -12,6 +12,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@tanstack/react-virtual": "^3.13.24",
+    "@types/adm-zip": "^0.5.8",
+    "adm-zip": "^0.5.17",
     "archiver": "^7.0.1",
     "better-sqlite3": "^12.8.0",
     "fast-xml-parser": "^5.5.10",

src/app/api/ai-tagging/describe-bulk/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server'
-import { requireLibraryAccess } from '@/lib/auth'
+import { requireLibraryWriteAccess } from '@/lib/auth'
 import { enqueueBulkJobs } from '@/lib/ai-jobs'
 
 const IMAGE_EXTENSIONS = new Set(['.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp', '.tiff', '.tif'])
@@ -19,7 +19,7 @@ export async function POST(request: NextRequest) {
     return NextResponse.json({ error: 'libraryId is required' }, { status: 400 })
   }
 
-  const auth = await requireLibraryAccess(request, libraryId)
+  const auth = await requireLibraryWriteAccess(request, libraryId)
   if (auth instanceof NextResponse) return auth
 
   const jobIds = enqueueBulkJobs(libraryId, dirPath ?? '', 'describe', 'mixed_file', MEDIA_EXTENSIONS)

src/app/api/ai-tagging/describe/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server'
-import { requireLibraryAccess } from '@/lib/auth'
+import { requireLibraryWriteAccess } from '@/lib/auth'
 import { enqueueJob } from '@/lib/ai-jobs'
 
 export async function POST(request: NextRequest) {
@@ -16,7 +16,7 @@ export async function POST(request: NextRequest) {
   }
 
   const libraryId = itemKey.split(':')[0]
-  const auth = await requireLibraryAccess(request, libraryId)
+  const auth = await requireLibraryWriteAccess(request, libraryId)
   if (auth instanceof NextResponse) return auth
 
   const jobId = enqueueJob(itemKey, 'describe', libraryId)

src/app/api/ai-tagging/extract-text-bulk/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server'
-import { requireLibraryAccess } from '@/lib/auth'
+import { requireLibraryWriteAccess } from '@/lib/auth'
 import { enqueueBulkJobs } from '@/lib/ai-jobs'
 
 const IMAGE_EXTENSIONS = new Set(['.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp', '.tiff', '.tif'])
@@ -17,7 +17,7 @@ export async function POST(request: NextRequest) {
     return NextResponse.json({ error: 'libraryId is required' }, { status: 400 })
   }
 
-  const auth = await requireLibraryAccess(request, libraryId)
+  const auth = await requireLibraryWriteAccess(request, libraryId)
   if (auth instanceof NextResponse) return auth
 
   const jobIds = enqueueBulkJobs(libraryId, dirPath ?? '', 'extract', 'mixed_file', IMAGE_EXTENSIONS)

src/app/api/ai-tagging/extract-text/route.ts

@@ -1,30 +1,33 @@
 import { NextRequest, NextResponse } from 'next/server'
-import { requireLibraryAccess } from '@/lib/auth'
+import { requireLibraryWriteAccess } from '@/lib/auth'
 import { enqueueJob } from '@/lib/ai-jobs'
 
 export async function POST(request: NextRequest) {
-  let body: { itemKey?: string; ocrLanguages?: string }
+  let body: { itemKey?: string; ocrLanguages?: string; ocrMode?: string }
   try {
     body = await request.json()
   } catch {
     return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 })
   }
 
-  const { itemKey, ocrLanguages } = body
+  const { itemKey, ocrLanguages, ocrMode } = body
   if (!itemKey || typeof itemKey !== 'string') {
     return NextResponse.json({ error: 'itemKey is required' }, { status: 400 })
   }
 
   const libraryId = itemKey.split(':')[0]
-  const auth = await requireLibraryAccess(request, libraryId)
+  const auth = await requireLibraryWriteAccess(request, libraryId)
   if (auth instanceof NextResponse) return auth
 
+  const payload: Record<string, string> = {}
+  if (ocrLanguages) payload.ocrLanguages = ocrLanguages
+  if (ocrMode) payload.ocrMode = ocrMode
   const jobId = enqueueJob(
     itemKey,
     'extract',
     libraryId,
     undefined,
-    ocrLanguages ? { ocrLanguages } : undefined,
+    Object.keys(payload).length ? payload : undefined,
   )
   return NextResponse.json({ jobId }, { status: 202 })
 }

src/app/api/ai-tagging/fields/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server'
-import { requireLibraryAccess } from '@/lib/auth'
+import { requireLibraryAccess, requireLibraryWriteAccess } from '@/lib/auth'
-import { getAiFields, updateExtractedText } from '@/lib/ai-tagger'
+import { getAiFields, updateExtractedText, updateAiDescription } from '@/lib/ai-tagger'
 
 export async function GET(request: NextRequest) {
   const { searchParams } = request.nextUrl
@@ -19,25 +19,37 @@ export async function GET(request: NextRequest) {
 }
 
 export async function PATCH(request: NextRequest) {
-  let body: { itemKey?: string; extractedText?: string }
+  let body: { itemKey?: string; extractedText?: string; aiDescription?: string }
   try {
     body = await request.json()
   } catch {
     return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 })
   }
 
-  const { itemKey, extractedText } = body
+  const { itemKey, extractedText, aiDescription } = body
   if (!itemKey || typeof itemKey !== 'string') {
     return NextResponse.json({ error: 'itemKey is required' }, { status: 400 })
   }
-  if (typeof extractedText !== 'string') {
+  if (extractedText === undefined && aiDescription === undefined) {
-    return NextResponse.json({ error: 'extractedText is required' }, { status: 400 })
+    return NextResponse.json({ error: 'extractedText or aiDescription is required' }, { status: 400 })
   }
 
   const libraryId = itemKey.split(':')[0]
-  const auth = await requireLibraryAccess(request, libraryId)
+  const auth = await requireLibraryWriteAccess(request, libraryId)
   if (auth instanceof NextResponse) return auth
 
-  updateExtractedText(itemKey, extractedText)
+  if (extractedText !== undefined) {
+    if (typeof extractedText !== 'string') {
+      return NextResponse.json({ error: 'extractedText must be a string' }, { status: 400 })
+    }
+    updateExtractedText(itemKey, extractedText)
+  }
+  if (aiDescription !== undefined) {
+    if (typeof aiDescription !== 'string') {
+      return NextResponse.json({ error: 'aiDescription must be a string' }, { status: 400 })
+    }
+    updateAiDescription(itemKey, aiDescription)
+  }
+
   return NextResponse.json({ ok: true })
 }

src/app/api/ai-tagging/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server'
-import { requireLibraryAccess } from '@/lib/auth'
+import { requireLibraryWriteAccess } from '@/lib/auth'
 import { enqueueJob } from '@/lib/ai-jobs'
 
 export async function POST(request: NextRequest) {
@@ -16,7 +16,7 @@ export async function POST(request: NextRequest) {
   }
 
   const libraryId = itemKey.split(':')[0]
-  const auth = await requireLibraryAccess(request, libraryId)
+  const auth = await requireLibraryWriteAccess(request, libraryId)
   if (auth instanceof NextResponse) return auth
 
   const jobId = enqueueJob(itemKey, 'tag', libraryId)

src/app/api/ai-tagging/translate-bulk/route.ts

@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { requireLibraryWriteAccess } from '@/lib/auth'
+import { enqueueJob } from '@/lib/ai-jobs'
+import { getDb } from '@/lib/db'
+
+export async function POST(request: NextRequest) {
+  let body: { libraryId?: string; path?: string }
+  try {
+    body = await request.json()
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 })
+  }
+
+  const { libraryId, path: dirPath } = body
+  if (!libraryId || typeof libraryId !== 'string') {
+    return NextResponse.json({ error: 'libraryId is required' }, { status: 400 })
+  }
+
+  const auth = await requireLibraryWriteAccess(request, libraryId)
+  if (auth instanceof NextResponse) return auth
+
+  const db = getDb()
+  const prefix = dirPath
+    ? `${libraryId}:mixed_file:${encodeURIComponent(dirPath + '/')}`
+    : `${libraryId}:mixed_file:`
+
+  // Only enqueue translate jobs for items that already have extracted text
+  const items = db
+    .prepare(
+      'SELECT item_key FROM media_items WHERE item_key LIKE ? AND item_type = ? AND extracted_text IS NOT NULL'
+    )
+    .all(`${prefix}%`, 'mixed_file') as { item_key: string }[]
+
+  const jobIds = items.map(({ item_key }) => enqueueJob(item_key, 'translate', libraryId))
+  return NextResponse.json({ jobIds, queued: jobIds.length }, { status: 202 })
+}

src/app/api/ai-tagging/translate/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server'
-import { requireLibraryAccess } from '@/lib/auth'
+import { requireLibraryWriteAccess } from '@/lib/auth'
 import { enqueueJob } from '@/lib/ai-jobs'
 
 export async function POST(request: NextRequest) {
@@ -16,7 +16,7 @@ export async function POST(request: NextRequest) {
   }
 
   const libraryId = itemKey.split(':')[0]
-  const auth = await requireLibraryAccess(request, libraryId)
+  const auth = await requireLibraryWriteAccess(request, libraryId)
   if (auth instanceof NextResponse) return auth
 
   const jobId = enqueueJob(itemKey, 'translate', libraryId, sourceLanguage || undefined)

src/app/api/browse/route.ts

@@ -30,21 +30,70 @@ export async function GET(request: NextRequest) {
   const root = resolveLibraryRoot(library)
   const recursive = request.nextUrl.searchParams.get('recursive') === 'true'
   const listing = recursive
-    ? scanDirectoryRecursive(root, libraryId, subpath)
+    ? await scanDirectoryRecursive(root, libraryId, subpath)
     : scanDirectory(root, libraryId, subpath)
 
-  // Annotate image entries with whether they have extracted text
+  // Annotate entries with metadata used by search/filtering in mixed view.
   const db = getDb()
-  const rows = db
+  const metadataRows = db
-    .prepare('SELECT item_key FROM media_items WHERE library_id = ? AND extracted_text IS NOT NULL')
+    .prepare(`
-    .all(libraryId) as { item_key: string }[]
+      SELECT item_key, user_rating, ai_description, extracted_text, extracted_text_translated
-  const withText = new Set(rows.map((r) => r.item_key))
+      FROM media_items
+      WHERE library_id = ?
+        AND (
+          user_rating IS NOT NULL
+          OR ai_description IS NOT NULL
+          OR extracted_text IS NOT NULL
+          OR extracted_text_translated IS NOT NULL
+        )
+    `)
+    .all(libraryId) as {
+      item_key: string
+      user_rating: number | null
+      ai_description: string | null
+      extracted_text: string | null
+      extracted_text_translated: string | null
+    }[]
+
+  const metadataByItemKey = new Map(metadataRows.map((r) => [r.item_key, r]))
+  const withText = new Set(
+    metadataRows
+      .filter((r) => r.extracted_text !== null)
+      .map((r) => r.item_key)
+  )
+
+  // Build a set of all ancestor directory relative paths that contain at least one item with text
+  // e.g. item_key "lib:mixed_file:manga%2Fch1%2Fp1.jpg" → ancestors "manga", "manga/ch1"
+  const dirsWithText = new Set<string>()
+  const keyPrefix = `${libraryId}:mixed_file:`
+  for (const key of withText) {
+    const decoded = decodeURIComponent(key.slice(keyPrefix.length))
+    const parts = decoded.split('/')
+    for (let i = 1; i < parts.length; i++) {
+      dirsWithText.add(parts.slice(0, i).join('/'))
+    }
+  }
 
   listing.entries = listing.entries.map((e) => {
-    if (e.type !== 'file' || e.mediaType !== 'image') return e
+    if (e.type === 'file') {
-    const relPath = subpath ? path.join(subpath, e.name) : e.name
+      // Recursive listing already uses full path from library root in e.name.
-    const itemKey = `${libraryId}:mixed_file:${encodeURIComponent(relPath)}`
+      const relPath = recursive ? e.name : (subpath ? path.join(subpath, e.name) : e.name)
-    return { ...e, hasExtractedText: withText.has(itemKey) }
+      const itemKey = `${libraryId}:mixed_file:${encodeURIComponent(relPath)}`
+      const metadata = metadataByItemKey.get(itemKey)
+      return {
+        ...e,
+        ...(e.mediaType === 'image' ? { hasExtractedText: withText.has(itemKey) } : {}),
+        userRating: metadata?.user_rating ?? null,
+        aiDescription: metadata?.ai_description ?? null,
+        extractedText: metadata?.extracted_text ?? null,
+        extractedTextTranslated: metadata?.extracted_text_translated ?? null,
+      }
+    }
+    if (e.type === 'directory') {
+      const dirRel = subpath ? `${subpath}/${e.name}` : e.name
+      if (dirsWithText.has(dirRel)) return { ...e, hasExtractedText: true }
+    }
+    return e
   })
 
   return NextResponse.json(listing)

src/app/api/comics/page/route.ts

@@ -0,0 +1,71 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getLibrary, resolveLibraryRoot, resolveAndJail } from '@/lib/libraries'
+import { getComicPageBuffer } from '@/lib/comics'
+import { requireLibraryAccess } from '@/lib/auth'
+import { getDb } from '@/lib/db'
+
+const EXT_TO_MIME: Record<string, string> = {
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.png': 'image/png',
+  '.webp': 'image/webp',
+  '.gif': 'image/gif',
+}
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = request.nextUrl
+  const libraryId = searchParams.get('libraryId')
+  const issueKey = searchParams.get('issueKey')
+  const pageIndexStr = searchParams.get('pageIndex')
+
+  if (!libraryId || !issueKey || pageIndexStr === null) {
+    return NextResponse.json({ error: 'Missing libraryId, issueKey, or pageIndex' }, { status: 400 })
+  }
+
+  const pageIndex = parseInt(pageIndexStr, 10)
+  if (isNaN(pageIndex) || pageIndex < 0) {
+    return NextResponse.json({ error: 'Invalid pageIndex' }, { status: 400 })
+  }
+
+  const auth = await requireLibraryAccess(request, libraryId)
+  if (auth instanceof NextResponse) return auth
+
+  const library = getLibrary(libraryId)
+  if (!library) {
+    return NextResponse.json({ error: 'Library not found' }, { status: 404 })
+  }
+
+  const db = getDb()
+  const row = db
+    .prepare('SELECT file_path FROM media_items WHERE item_key = ? AND item_type = ?')
+    .get(issueKey, 'comic_issue') as { file_path: string | null } | undefined
+
+  if (!row?.file_path) {
+    return NextResponse.json({ error: 'Issue not found' }, { status: 404 })
+  }
+
+  const root = resolveLibraryRoot(library)
+
+  let absPath: string
+  try {
+    absPath = resolveAndJail(root, row.file_path)
+  } catch {
+    return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+  }
+
+  const result = getComicPageBuffer(absPath, pageIndex)
+  if (!result) {
+    return NextResponse.json({ error: 'Page not found' }, { status: 404 })
+  }
+
+  const mimeType = EXT_TO_MIME[result.ext] ?? 'image/jpeg'
+
+  return new NextResponse(result.buffer as unknown as BodyInit, {
+    status: 200,
+    headers: {
+      'Content-Type': mimeType,
+      'Content-Length': String(result.buffer.length),
+      'Cache-Control': 'public, max-age=86400',
+    },
+  })
+}

src/app/api/comics/route.ts

@@ -0,0 +1,117 @@
+import fs from 'fs'
+import path from 'path'
+import { NextRequest, NextResponse } from 'next/server'
+import { getLibrary, resolveLibraryRoot, resolveAndJail } from '@/lib/libraries'
+import { comicsFromDb, comicIssuesFromDb } from '@/lib/comics'
+import { removeAllAssignmentsForItem } from '@/lib/tags'
+import { requireLibraryAccess, requireAdmin } from '@/lib/auth'
+import { getDb } from '@/lib/db'
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = request.nextUrl
+  const libraryId = searchParams.get('libraryId')
+  const seriesId = searchParams.get('seriesId')
+
+  if (!libraryId) {
+    return NextResponse.json({ error: 'Missing libraryId' }, { status: 400 })
+  }
+
+  const auth = await requireLibraryAccess(request, libraryId)
+  if (auth instanceof NextResponse) return auth
+
+  const library = getLibrary(libraryId)
+  if (!library) {
+    return NextResponse.json({ error: 'Library not found' }, { status: 404 })
+  }
+  if (library.type !== 'comics') {
+    return NextResponse.json({ error: 'Library is not a comics library' }, { status: 400 })
+  }
+
+  if (seriesId) {
+    return NextResponse.json(comicIssuesFromDb(libraryId, seriesId))
+  }
+
+  const page     = Math.max(1, parseInt(searchParams.get('page')     ?? '1',   10) || 1)
+  const pageSize = Math.min(500, Math.max(1, parseInt(searchParams.get('pageSize') ?? '200', 10) || 200))
+  const search   = (searchParams.get('search') ?? '').trim() || undefined
+
+  return NextResponse.json(comicsFromDb(libraryId, { page, pageSize, search }))
+}
+
+export async function DELETE(request: NextRequest) {
+  const auth = await requireAdmin(request)
+  if (auth instanceof NextResponse) return auth
+
+  const { searchParams } = request.nextUrl
+  const libraryId = searchParams.get('libraryId')
+  const issueKey = searchParams.get('issueKey')
+  const seriesId = searchParams.get('seriesId')
+
+  if (!libraryId) {
+    return NextResponse.json({ error: 'Missing libraryId' }, { status: 400 })
+  }
+
+  const library = getLibrary(libraryId)
+  if (!library) {
+    return NextResponse.json({ error: 'Library not found' }, { status: 404 })
+  }
+  if (library.type !== 'comics') {
+    return NextResponse.json({ error: 'Library is not a comics library' }, { status: 400 })
+  }
+
+  const root = resolveLibraryRoot(library)
+
+  if (issueKey) {
+    const db = getDb()
+    const row = db
+      .prepare('SELECT file_path FROM media_items WHERE item_key = ? AND item_type = ?')
+      .get(issueKey, 'comic_issue') as { file_path: string | null } | undefined
+
+    if (!row?.file_path) {
+      return NextResponse.json({ error: 'Issue not found' }, { status: 404 })
+    }
+
+    let issuePath: string
+    try {
+      issuePath = resolveAndJail(root, row.file_path)
+    } catch {
+      return NextResponse.json({ error: 'Invalid issue path' }, { status: 400 })
+    }
+
+    try {
+      fs.unlinkSync(issuePath)
+    } catch {
+      return NextResponse.json({ error: 'Failed to delete issue file' }, { status: 500 })
+    }
+
+    removeAllAssignmentsForItem(issueKey)
+    db.prepare('DELETE FROM media_items WHERE item_key = ?').run(issueKey)
+
+    return new NextResponse(null, { status: 204 })
+  }
+
+  if (seriesId) {
+    const dirName = decodeURIComponent(seriesId)
+
+    let seriesDir: string
+    try {
+      seriesDir = resolveAndJail(root, dirName)
+    } catch {
+      return NextResponse.json({ error: 'Invalid series path' }, { status: 400 })
+    }
+
+    try {
+      fs.rmSync(seriesDir, { recursive: true, force: true })
+    } catch {
+      return NextResponse.json({ error: 'Failed to delete series directory' }, { status: 500 })
+    }
+
+    removeAllAssignmentsForItem(`${libraryId}:comic_series:${seriesId}`)
+    const db = getDb()
+    db.prepare('DELETE FROM media_items WHERE item_key = ?').run(`${libraryId}:comic_series:${seriesId}`)
+
+    return new NextResponse(null, { status: 204 })
+  }
+
+  return NextResponse.json({ error: 'Missing issueKey or seriesId' }, { status: 400 })
+}

src/app/api/comics/series-issue-tags/route.ts

@@ -0,0 +1,26 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getLibrary } from '@/lib/libraries'
+import { getComicsSeriesIssueMeta } from '@/lib/tags'
+import { requireLibraryAccess } from '@/lib/auth'
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = request.nextUrl
+  const libraryId = searchParams.get('libraryId')
+
+  if (!libraryId) {
+    return NextResponse.json({ error: 'Missing libraryId' }, { status: 400 })
+  }
+
+  const auth = await requireLibraryAccess(request, libraryId)
+  if (auth instanceof NextResponse) return auth
+
+  const library = getLibrary(libraryId)
+  if (!library) {
+    return NextResponse.json({ error: 'Library not found' }, { status: 404 })
+  }
+  if (library.type !== 'comics') {
+    return NextResponse.json({ error: 'Library is not a comics library' }, { status: 400 })
+  }
+
+  return NextResponse.json(getComicsSeriesIssueMeta(libraryId))
+}

src/app/api/file/route.ts

@@ -20,6 +20,7 @@ const MIME_TYPES: Record<string, string> = {
   '.bmp': 'image/bmp',
   '.tiff': 'image/tiff',
   '.tif': 'image/tiff',
+  '.cbz': 'application/zip',
   '.zip': 'application/zip',
   '.dmg': 'application/x-apple-diskimage',
   '.gz': 'application/gzip',
@@ -43,6 +44,7 @@ function getMimeType(filePath: string): string {
 function isDownloadAttachment(filePath: string): boolean {
   const lower = filePath.toLowerCase()
   return (
+    lower.endsWith('.cbz') ||
     lower.endsWith('.zip') ||
     lower.endsWith('.tar.gz') ||
     lower.endsWith('.tar.bz2') ||

src/app/api/imported-tags/route.ts

@@ -0,0 +1,16 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getImportedTagsForLibrary } from '@/lib/comic-metadata'
+import { requireAdmin } from '@/lib/auth'
+
+export async function GET(request: NextRequest) {
+  const auth = await requireAdmin(request)
+  if (auth instanceof NextResponse) return auth
+
+  const libraryId = request.nextUrl.searchParams.get('libraryId')
+  if (!libraryId) {
+    return NextResponse.json({ error: 'libraryId is required' }, { status: 400 })
+  }
+
+  const tags = getImportedTagsForLibrary(libraryId)
+  return NextResponse.json(tags)
+}

src/app/api/libraries/[id]/bulk-rename/route.ts

@@ -0,0 +1,70 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { requireAdmin } from '@/lib/auth'
+import { getLibrary } from '@/lib/libraries'
+import { getDb } from '@/lib/db'
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const auth = await requireAdmin(request)
+  if (auth instanceof NextResponse) return auth
+
+  const { id: libraryId } = await params
+  const library = getLibrary(libraryId)
+  if (!library) {
+    return NextResponse.json({ error: 'Library not found' }, { status: 404 })
+  }
+  if (library.type !== 'comics') {
+    return NextResponse.json({ error: 'Only comics libraries support bulk rename' }, { status: 400 })
+  }
+
+  const body = await request.json()
+  const { pattern, preview } = body as { pattern: string; preview?: boolean }
+
+  if (!pattern || typeof pattern !== 'string') {
+    return NextResponse.json({ error: 'Pattern is required' }, { status: 400 })
+  }
+
+  // Validate regex
+  let regex: RegExp
+  try {
+    regex = new RegExp(pattern, 'g')
+  } catch {
+    return NextResponse.json({ error: 'Invalid regex pattern' }, { status: 400 })
+  }
+
+  const db = getDb()
+
+  const rows = db
+    .prepare(
+      `SELECT item_key, title FROM media_items
+       WHERE library_id = ? AND item_type IN ('comic_series', 'comic_issue')`
+    )
+    .all(libraryId) as { item_key: string; title: string }[]
+
+  const changes: { itemKey: string; oldTitle: string; newTitle: string }[] = []
+
+  for (const row of rows) {
+    // Reset lastIndex since we reuse the regex with 'g' flag
+    regex.lastIndex = 0
+    const newTitle = row.title.replace(regex, '').trim()
+    if (newTitle && newTitle !== row.title) {
+      changes.push({ itemKey: row.item_key, oldTitle: row.title, newTitle })
+    }
+  }
+
+  if (preview) {
+    return NextResponse.json({ changes })
+  }
+
+  // Apply
+  const stmt = db.prepare('UPDATE media_items SET title = ? WHERE item_key = ?')
+  db.transaction(() => {
+    for (const c of changes) {
+      stmt.run(c.newTitle, c.itemKey)
+    }
+  })()
+
+  return NextResponse.json({ updated: changes.length })
+}

src/app/api/libraries/[id]/import-metadata-movies/route.ts

@@ -0,0 +1,31 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { requireAdmin } from '@/lib/auth'
+import { getLibrary } from '@/lib/libraries'
+import { importMovieMetadata } from '@/lib/movie-metadata'
+
+export async function POST(request: NextRequest): Promise<NextResponse> {
+  const auth = await requireAdmin(request)
+  if (auth instanceof NextResponse) return auth
+
+  const { pathname } = new URL(request.url)
+  const libraryId = pathname.split('/')[3] // /api/libraries/[id]/import-metadata-movies
+
+  try {
+    const library = getLibrary(libraryId)
+
+    if (!library || library.type !== 'movies') {
+      return NextResponse.json({ error: 'Movies library not found' }, { status: 404 })
+    }
+
+    // Perform full metadata import for all items
+    const result = await importMovieMetadata(library, true)
+
+    return NextResponse.json(result)
+  } catch (err) {
+    console.error('[import-metadata-movies]', err)
+    return NextResponse.json(
+      { error: err instanceof Error ? err.message : 'Failed to import metadata' },
+      { status: 500 }
+    )
+  }
+}

src/app/api/libraries/[id]/import-metadata-tv/route.ts

@@ -0,0 +1,31 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { requireAdmin } from '@/lib/auth'
+import { getLibrary } from '@/lib/libraries'
+import { importTvMetadata } from '@/lib/tv-metadata'
+
+export async function POST(request: NextRequest): Promise<NextResponse> {
+  const auth = await requireAdmin(request)
+  if (auth instanceof NextResponse) return auth
+
+  const { pathname } = new URL(request.url)
+  const libraryId = pathname.split('/')[3] // /api/libraries/[id]/import-metadata-tv
+
+  try {
+    const library = getLibrary(libraryId)
+
+    if (!library || library.type !== 'tv') {
+      return NextResponse.json({ error: 'TV library not found' }, { status: 404 })
+    }
+
+    // Perform full metadata import for all items
+    const result = await importTvMetadata(library, true)
+
+    return NextResponse.json(result)
+  } catch (err) {
+    console.error('[import-metadata-tv]', err)
+    return NextResponse.json(
+      { error: err instanceof Error ? err.message : 'Failed to import metadata' },
+      { status: 500 }
+    )
+  }
+}

src/app/api/libraries/[id]/import-metadata/route.ts

@@ -0,0 +1,34 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getLibrary } from '@/lib/libraries'
+import { importComicMetadata } from '@/lib/comic-metadata'
+import { requireAdmin } from '@/lib/auth'
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const auth = await requireAdmin(request)
+  if (auth instanceof NextResponse) return auth
+
+  const { id } = await params
+
+  const library = getLibrary(id)
+  if (!library) {
+    return NextResponse.json({ error: 'Library not found' }, { status: 404 })
+  }
+
+  if (library.type !== 'comics') {
+    return NextResponse.json({ error: 'Metadata import is only supported for comic libraries' }, { status: 400 })
+  }
+
+  // Fire-and-forget
+  void Promise.resolve().then(() => {
+    try {
+      importComicMetadata(library)
+    } catch (err) {
+      console.error(`[import-metadata] Error importing metadata for "${library.name}":`, err)
+    }
+  })
+
+  return new NextResponse(null, { status: 202 })
+}

src/app/api/libraries/route.ts

@@ -12,7 +12,7 @@ export async function GET(request: NextRequest) {
   try {
     const libraries =
       session.role === 'admin'
-        ? getLibraries()
+        ? getLibraries().map((l) => ({ ...l, accessLevel: 'admin' }))
         : getLibrariesForUser(session.userId, session.role)
     return NextResponse.json(libraries)
   } catch (err) {
@@ -38,7 +38,7 @@ export async function POST(request: NextRequest) {
     return NextResponse.json({ error: 'name, path, and type are required' }, { status: 400 })
   }
 
-  const validTypes: LibraryType[] = ['games', 'mixed', 'movies', 'tv']
+  const validTypes: LibraryType[] = ['comics', 'games', 'mixed', 'movies', 'tv']
   if (!validTypes.includes(type as LibraryType)) {
     return NextResponse.json({ error: `type must be one of: ${validTypes.join(', ')}` }, { status: 400 })
   }

src/app/api/nfo-refresh/route.ts

@@ -120,7 +120,46 @@ export async function POST(request: NextRequest) {
         status: nfo.status ?? null,
       }),
     })
-    return NextResponse.json({ updated: true, title: nfo.title, year: nfo.year })
+
+    // Optionally also refresh every episode NFO in this series
+    let episodesUpdated = 0
+    const includeEpisodes = searchParams.get('includeEpisodes') === 'true'
+    if (includeEpisodes) {
+      type EpRow = { item_key: string; file_path: string | null; metadata: string | null }
+      const episodeRows = db
+        .prepare(`SELECT item_key, file_path, metadata FROM media_items WHERE item_type = 'tv_episode' AND item_key LIKE ?`)
+        .all(`${libraryId}:tv_episode:${encodedDirName}:%`) as EpRow[]
+
+      const updateEp = db.prepare(`
+        UPDATE media_items SET title = @title, plot = @plot, metadata = @metadata WHERE item_key = @item_key
+      `)
+
+      db.transaction(() => {
+        for (const ep of episodeRows) {
+          if (!ep.file_path) continue
+          const epDir = path.join(libraryRoot, path.dirname(ep.file_path))
+          const baseName = path.basename(ep.file_path, path.extname(ep.file_path))
+          const epNfo = parseEpisodeNfo(path.join(epDir, `${baseName}.nfo`))
+          if (!epNfo) continue
+          const epMeta = ep.metadata ? JSON.parse(ep.metadata) : {}
+          updateEp.run({
+            item_key: ep.item_key,
+            title: epNfo.title ?? null,
+            plot: epNfo.plot ?? null,
+            metadata: JSON.stringify({
+              ...epMeta,
+              episodeNumber: epNfo.episode ?? epMeta.episodeNumber ?? null,
+              seasonNumber: epNfo.season ?? epMeta.seasonNumber ?? null,
+              aired: epNfo.aired ?? null,
+              rating: epNfo.rating ?? null,
+            }),
+          })
+          episodesUpdated++
+        }
+      })()
+    }
+
+    return NextResponse.json({ updated: true, title: nfo.title, year: nfo.year, episodesUpdated })
   }
 
   if (itemType === 'tv_episode') {

src/app/api/ratings/route.ts

@@ -0,0 +1,64 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { requireLibraryAccess, requireLibraryWriteAccess } from '@/lib/auth'
+import { getDb } from '@/lib/db'
+
+function extractLibraryId(itemKey: string): string | null {
+  const colonIdx = itemKey.indexOf(':')
+  if (colonIdx === -1) return null
+  return itemKey.slice(0, colonIdx)
+}
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url)
+  const itemKey = searchParams.get('itemKey')
+  if (!itemKey) {
+    return NextResponse.json({ error: 'itemKey is required' }, { status: 400 })
+  }
+  const libraryId = extractLibraryId(itemKey)
+  if (!libraryId) {
+    return NextResponse.json({ error: 'Invalid itemKey' }, { status: 400 })
+  }
+  const auth = await requireLibraryAccess(request, libraryId)
+  if (auth instanceof NextResponse) return auth
+
+  const db = getDb()
+  const row = db
+    .prepare('SELECT user_rating FROM media_items WHERE item_key = ?')
+    .get(itemKey) as { user_rating: number | null } | undefined
+
+  if (!row) {
+    return NextResponse.json({ error: 'Item not found' }, { status: 404 })
+  }
+
+  return NextResponse.json({ userRating: row.user_rating ?? null })
+}
+
+export async function PATCH(request: NextRequest) {
+  const body = await request.json()
+  const { itemKey, userRating } = body as { itemKey: string; userRating: number | null }
+
+  if (!itemKey) {
+    return NextResponse.json({ error: 'itemKey is required' }, { status: 400 })
+  }
+  if (userRating !== null && (typeof userRating !== 'number' || !Number.isInteger(userRating) || userRating < 1 || userRating > 5)) {
+    return NextResponse.json({ error: 'userRating must be null or an integer 1–5' }, { status: 400 })
+  }
+
+  const libraryId = extractLibraryId(itemKey)
+  if (!libraryId) {
+    return NextResponse.json({ error: 'Invalid itemKey' }, { status: 400 })
+  }
+  const auth = await requireLibraryWriteAccess(request, libraryId)
+  if (auth instanceof NextResponse) return auth
+
+  const db = getDb()
+  const result = db
+    .prepare('UPDATE media_items SET user_rating = ? WHERE item_key = ?')
+    .run(userRating, itemKey)
+
+  if (result.changes === 0) {
+    return NextResponse.json({ error: 'Item not found' }, { status: 404 })
+  }
+
+  return NextResponse.json({ success: true })
+}

src/app/api/tag-mappings/[id]/route.ts

@@ -0,0 +1,21 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { deleteTagMapping } from '@/lib/comic-metadata'
+import { requireAdmin } from '@/lib/auth'
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const auth = await requireAdmin(request)
+  if (auth instanceof NextResponse) return auth
+
+  const { id } = await params
+
+  try {
+    deleteTagMapping(id)
+    return new NextResponse(null, { status: 204 })
+  } catch (err) {
+    const message = err instanceof Error ? err.message : 'Failed to delete mapping'
+    return NextResponse.json({ error: message }, { status: 404 })
+  }
+}

src/app/api/tag-mappings/route.ts

@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getTagMappingsForLibrary, createTagMapping } from '@/lib/comic-metadata'
+import { requireAdmin } from '@/lib/auth'
+
+export async function GET(request: NextRequest) {
+  const auth = await requireAdmin(request)
+  if (auth instanceof NextResponse) return auth
+
+  const libraryId = request.nextUrl.searchParams.get('libraryId')
+  if (!libraryId) {
+    return NextResponse.json({ error: 'libraryId is required' }, { status: 400 })
+  }
+
+  const mappings = getTagMappingsForLibrary(libraryId)
+  return NextResponse.json(mappings)
+}
+
+export async function POST(request: NextRequest) {
+  const auth = await requireAdmin(request)
+  if (auth instanceof NextResponse) return auth
+
+  let body: { libraryId?: string; importedTagName?: string; tagId?: string }
+  try {
+    body = await request.json()
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 })
+  }
+
+  const { libraryId, importedTagName, tagId } = body
+  if (!libraryId || !importedTagName || !tagId) {
+    return NextResponse.json(
+      { error: 'libraryId, importedTagName, and tagId are required' },
+      { status: 400 }
+    )
+  }
+
+  try {
+    const mapping = createTagMapping(libraryId, importedTagName, tagId)
+    return NextResponse.json(mapping, { status: 201 })
+  } catch (err) {
+    const message = err instanceof Error ? err.message : 'Failed to create mapping'
+    return NextResponse.json({ error: message }, { status: 400 })
+  }
+}

src/app/api/tags/assignments/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server'
 import { getResolvedTagsForItem, addTagToItem, removeTagFromItem } from '@/lib/tags'
-import { requireLibraryAccess } from '@/lib/auth'
+import { requireLibraryAccess, requireLibraryWriteAccess } from '@/lib/auth'
 
 function extractLibraryId(itemKey: string): string | null {
   const colonIdx = itemKey.indexOf(':')
@@ -38,7 +38,7 @@ export async function POST(request: NextRequest) {
     if (!libraryId) {
       return NextResponse.json({ error: 'Invalid itemKey' }, { status: 400 })
     }
-    const auth = await requireLibraryAccess(request, libraryId)
+    const auth = await requireLibraryWriteAccess(request, libraryId)
     if (auth instanceof NextResponse) return auth
 
     addTagToItem(itemKey, tagId)
@@ -60,7 +60,7 @@ export async function DELETE(request: NextRequest) {
     if (!libraryId) {
       return NextResponse.json({ error: 'Invalid itemKey' }, { status: 400 })
     }
-    const auth = await requireLibraryAccess(request, libraryId)
+    const auth = await requireLibraryWriteAccess(request, libraryId)
     if (auth instanceof NextResponse) return auth
 
     removeTagFromItem(itemKey, tagId)

src/app/api/tags/categories/[id]/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server'
-import { updateCategory, deleteCategory, deleteCategoryForce, getTags } from '@/lib/tags'
+import { updateCategory, deleteCategory, deleteCategoryForce, getTags, getCategories, mergeCategories } from '@/lib/tags'
 import { requireAdmin } from '@/lib/auth'
 
 export async function PATCH(
@@ -11,9 +11,30 @@ export async function PATCH(
 
   try {
     const { id } = await params
-    const { name } = await request.json()
+    const { name, merge } = await request.json()
-    const category = updateCategory(id, name)
+
-    return NextResponse.json(category)
+    try {
+      const category = updateCategory(id, name)
+      return NextResponse.json(category)
+    } catch (err) {
+      const msg = (err as Error).message
+      if (!msg.includes('already exists')) throw err
+
+      // A category with this name already exists — find it
+      const trimmed = (name as string).trim()
+      const target = getCategories().find((c) => c.name.toLowerCase() === trimmed.toLowerCase())
+      if (!target) throw err
+
+      if (merge) {
+        mergeCategories(id, target.id)
+        return NextResponse.json(target)
+      }
+
+      return NextResponse.json(
+        { error: msg, conflict: true, targetCategoryId: target.id },
+        { status: 409 }
+      )
+    }
   } catch (err) {
     return NextResponse.json({ error: (err as Error).message }, { status: 400 })
   }

src/app/api/thumbnail/route.ts

@@ -1,17 +1,20 @@
 import { NextRequest, NextResponse } from 'next/server'
 import fs from 'fs'
+import fsPromises from 'fs/promises'
 import path from 'path'
 import { getLibrary, resolveLibraryRoot, resolveAndJail } from '@/lib/libraries'
-import { getThumbnailPath } from '@/lib/thumbnails'
+import { getThumbnailPath, getCbzThumbnailPath } from '@/lib/thumbnails'
 import { requireLibraryAccess } from '@/lib/auth'
+import { isCorruptZipError } from '@/lib/zip-utils'
 
 const VIDEO_EXTENSIONS = new Set(['.mp4', '.mov', '.mkv', '.avi', '.webm', '.m4v'])
 const IMAGE_EXTENSIONS = new Set(['.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp', '.tiff', '.tif'])
 
-function getMediaType(filePath: string): 'image' | 'video' | null {
+function getMediaType(filePath: string): 'image' | 'video' | 'cbz' | null {
   const ext = path.extname(filePath).toLowerCase()
   if (IMAGE_EXTENSIONS.has(ext)) return 'image'
   if (VIDEO_EXTENSIONS.has(ext)) return 'video'
+  if (ext === '.cbz') return 'cbz'
   return null
 }
 
@@ -43,11 +46,13 @@ export async function GET(request: NextRequest) {
 
   const mediaType = getMediaType(filePath)
   if (!mediaType) {
-    return NextResponse.json({ error: 'Thumbnails are only supported for image and video files' }, { status: 400 })
+    return NextResponse.json({ error: 'Thumbnails are only supported for image, video, and CBZ files' }, { status: 400 })
   }
 
   try {
-    const thumbnailPath = await getThumbnailPath(filePath, libraryId, mediaType)
+    const thumbnailPath = mediaType === 'cbz'
+      ? await getCbzThumbnailPath(filePath, libraryId)
+      : await getThumbnailPath(filePath, libraryId, mediaType)
     const stat = fs.statSync(thumbnailPath)
     const stream = fs.createReadStream(thumbnailPath)
 
@@ -60,7 +65,30 @@ export async function GET(request: NextRequest) {
       },
     })
   } catch (err) {
-    console.error(`Thumbnail generation failed for ${filePath}:`, err)
+    if (isCorruptZipError(err)) {
+      // Move the corrupt archive to the library's .trash folder so it is excluded
+      // from future scans and hidden from the UI.
+      const trashDir = path.join(root, '.trash')
+      const filename = path.basename(filePath)
+      let dest = path.join(trashDir, filename)
+      fsPromises.mkdir(trashDir, { recursive: true })
+        .then(async () => {
+          if (fs.existsSync(dest)) {
+            const ext = path.extname(filename)
+            dest = path.join(trashDir, `${path.basename(filename, ext)}_${Date.now()}${ext}`)
+          }
+          await fsPromises.rename(filePath, dest).catch(async (e: NodeJS.ErrnoException) => {
+            if (e.code === 'EXDEV') {
+              await fsPromises.copyFile(filePath, dest)
+              await fsPromises.unlink(filePath)
+            } else throw e
+          })
+          console.log(`[thumbnail] Moved corrupt archive to trash: ${path.relative(root, filePath)}`)
+        })
+        .catch((e) => console.warn(`[thumbnail] Could not move corrupt archive to trash:`, e))
+    } else {
+      console.error(`Thumbnail generation failed for ${filePath}:`, err)
+    }
     return new NextResponse(null, { status: 404 })
   }
 }

src/app/api/users/[id]/permissions/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server'
 import { requireAdmin } from '@/lib/auth'
-import { getUserById, getPermittedLibraryIds, setLibraryPermissions } from '@/lib/users'
+import { getUserById, getLibraryPermissions, setLibraryPermissions, type LibraryPermission } from '@/lib/users'
 import { getLibraries } from '@/lib/libraries'
 
 export async function GET(
@@ -17,8 +17,8 @@ export async function GET(
     return NextResponse.json({ error: 'User not found' }, { status: 404 })
   }
 
-  const libraryIds = getPermittedLibraryIds(id)
+  const permissions = getLibraryPermissions(id)
-  return NextResponse.json({ libraryIds })
+  return NextResponse.json({ permissions })
 }
 
 export async function PUT(
@@ -35,24 +35,41 @@ export async function PUT(
     return NextResponse.json({ error: 'User not found' }, { status: 404 })
   }
 
-  let body: { libraryIds?: unknown }
+  let body: { permissions?: unknown }
   try {
     body = await request.json()
   } catch {
     return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 })
   }
 
-  if (!Array.isArray(body.libraryIds) || !body.libraryIds.every((id) => typeof id === 'string')) {
+  if (!Array.isArray(body.permissions)) {
-    return NextResponse.json({ error: 'libraryIds must be an array of strings' }, { status: 400 })
+    return NextResponse.json({ error: 'permissions must be an array' }, { status: 400 })
   }
 
+  const validAccessLevels = new Set(['read', 'write'])
+  for (const item of body.permissions) {
+    if (
+      typeof item !== 'object' ||
+      item === null ||
+      typeof (item as Record<string, unknown>).libraryId !== 'string' ||
+      !validAccessLevels.has((item as Record<string, unknown>).accessLevel as string)
+    ) {
+      return NextResponse.json(
+        { error: 'Each permission must have libraryId (string) and accessLevel ("read" | "write")' },
+        { status: 400 }
+      )
+    }
+  }
+
+  const permissions = body.permissions as LibraryPermission[]
+
   const allLibraries = getLibraries()
   const validIds = new Set(allLibraries.map((l) => l.id))
-  const invalid = body.libraryIds.filter((id) => !validIds.has(id))
+  const invalid = permissions.filter((p) => !validIds.has(p.libraryId)).map((p) => p.libraryId)
   if (invalid.length > 0) {
     return NextResponse.json({ error: `Unknown library IDs: ${invalid.join(', ')}` }, { status: 400 })
   }
 
-  setLibraryPermissions(id, body.libraryIds)
+  setLibraryPermissions(id, permissions)
   return new NextResponse(null, { status: 204 })
 }

src/app/library/[id]/page.tsx

@@ -1,7 +1,8 @@
 import { getLibrary } from '@/lib/libraries'
 import { notFound, redirect } from 'next/navigation'
 import { getServerSession } from '@/lib/auth'
-import { getPermittedLibraryIds } from '@/lib/users'
+import { getLibraryAccessLevel } from '@/lib/users'
+import ComicsView from '@/components/comics/ComicsView'
 import GamesView from '@/components/games/GamesView'
 import MixedView from '@/components/mixed/MixedView'
 import MoviesView from '@/components/movies/MoviesView'
@@ -23,32 +24,42 @@ export default async function LibraryPage({ params, searchParams }: Props) {
   const library = getLibrary(id)
   if (!library) notFound()
 
+  let readOnly = false
   if (session.role !== 'admin') {
-    const permitted = getPermittedLibraryIds(session.userId)
+    const accessLevel = getLibraryAccessLevel(session.userId, id)
-    if (!permitted.includes(id)) notFound()
+    if (!accessLevel) notFound()
+    readOnly = accessLevel === 'read'
   }
 
   return (
     <div>
-      <div className="flex items-center gap-2 mb-6">
+      {library.type !== 'mixed' && (
-        <a href="/" className="text-sm transition-colors" style={{ color: 'var(--text-secondary)' }}>
+        <div className="flex items-center gap-2 mb-6">
-          Libraries
+          <a href="/" className="text-sm transition-colors" style={{ color: 'var(--text-secondary)' }}>
-        </a>
+            Libraries
-        <span style={{ color: 'var(--text-secondary)' }}>/</span>
+          </a>
-        <span className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
+          <span style={{ color: 'var(--text-secondary)' }}>/</span>
-          {library.name}
+          <span className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
-        </span>
+            {library.name}
-        {session.role === 'admin' && (
+          </span>
-          <div className="ml-auto">
+          {session.role === 'admin' && (
-            <ScanLibraryButton libraryId={id} />
+            <div className="ml-auto">
-          </div>
+              <ScanLibraryButton libraryId={id} />
-        )}
+            </div>
-      </div>
+          )}
+        </div>
+      )}
+      {library.type === 'mixed' && session.role === 'admin' && (
+        <div className="flex justify-end mb-2">
+          <ScanLibraryButton libraryId={id} />
+        </div>
+      )}
 
-      {library.type === 'games' && <GamesView libraryId={id} />}
+      {library.type === 'comics' && <ComicsView libraryId={id} readOnly={readOnly} />}
-      {library.type === 'mixed' && <MixedView libraryId={id} initialPath={subpath ?? ''} />}
+      {library.type === 'games' && <GamesView libraryId={id} readOnly={readOnly} />}
-      {library.type === 'movies' && <MoviesView libraryId={id} />}
+      {library.type === 'mixed' && <MixedView libraryId={id} libraryName={library.name} initialPath={subpath ?? ''} readOnly={readOnly} />}
-      {library.type === 'tv' && <TvView libraryId={id} />}
+      {library.type === 'movies' && <MoviesView libraryId={id} readOnly={readOnly} />}
+      {library.type === 'tv' && <TvView libraryId={id} readOnly={readOnly} />}
     </div>
   )
 }

src/app/manage/page.tsx

@@ -5,6 +5,7 @@ import Image from 'next/image'
 import type { Library, LibraryType } from '@/types'
 
 const TYPE_ICONS: Record<string, string> = {
+  comics: '📚',
   games: '🎮',
   mixed: '🗂️',
   movies: '🎬',
@@ -12,6 +13,7 @@ const TYPE_ICONS: Record<string, string> = {
 }
 
 const TYPE_LABELS: Record<LibraryType, string> = {
+  comics: 'Comics / Manga',
   games: 'Games',
   mixed: 'Mixed Media',
   movies: 'Movies',
@@ -20,7 +22,7 @@ const TYPE_LABELS: Record<LibraryType, string> = {
 
 // ─── Main Page ────────────────────────────────────────────────────────────────
 
-export default function ManagePage() {
+function ManagePage() {
   const [libraries, setLibraries] = useState<Library[]>([])
   const [loading, setLoading] = useState(true)
 
@@ -105,8 +107,12 @@ function LibraryRow({
   const [confirming, setConfirming] = useState(false)
   const [removing, setRemoving] = useState(false)
   const [uploadingCover, setUploadingCover] = useState(false)
+  const [importing, setImporting] = useState<'idle' | 'running' | 'done'>('idle')
+  const [showBulkRename, setShowBulkRename] = useState(false)
   const cancelRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
+  const [showImportWarning, setShowImportWarning] = useState(false)
+  const [importingMetadata, setImportingMetadata] = useState(false)
 
   const handleRemoveClick = () => {
     if (!confirming) {
@@ -121,6 +127,26 @@ function LibraryRow({
       .catch(() => setRemoving(false))
   }
 
+  const handleImportMetadata = async () => {
+    setImportingMetadata(true)
+    setShowImportWarning(false)
+    try {
+      const endpoint =
+        library.type === 'tv'
+          ? `/api/libraries/${encodeURIComponent(library.id)}/import-metadata-tv`
+          : `/api/libraries/${encodeURIComponent(library.id)}/import-metadata-movies`
+      const res = await fetch(endpoint, { method: 'POST' })
+      if (res.ok) {
+        const data = await res.json()
+        console.log(`[manage] Imported metadata: ${data.imported} items, skipped ${data.skipped}`)
+      }
+    } catch (err) {
+      console.error('[manage] Error importing metadata:', err)
+    } finally {
+      setImportingMetadata(false)
+    }
+  }
+
   const handleCancel = () => {
     if (cancelRef.current) clearTimeout(cancelRef.current)
     setConfirming(false)
@@ -207,6 +233,57 @@ function LibraryRow({
 
       {/* Actions */}
       <div className="flex items-center gap-2 flex-shrink-0">
+        {library.type === 'comics' && (
+          <>
+            <button
+              onClick={() => {
+                setImporting('running')
+                fetch(`/api/libraries/${encodeURIComponent(library.id)}/import-metadata`, { method: 'POST' })
+                  .then(() => {
+                    setImporting('done')
+                    setTimeout(() => setImporting('idle'), 3000)
+                  })
+                  .catch(() => setImporting('idle'))
+              }}
+              disabled={importing === 'running'}
+              className="text-xs px-2.5 py-1.5 rounded-lg transition-colors disabled:opacity-50"
+              style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
+              onMouseEnter={(e) => {
+                if (importing === 'idle') (e.currentTarget as HTMLElement).style.color = 'var(--text-primary)'
+              }}
+              onMouseLeave={(e) => {
+                if (importing === 'idle') (e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
+              }}
+            >
+              {importing === 'running' ? 'Importing…' : importing === 'done' ? 'Imported ✓' : 'Import Metadata'}
+            </button>
+            <button
+              onClick={() => setShowBulkRename(true)}
+              className="text-xs px-2.5 py-1.5 rounded-lg transition-colors"
+              style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
+              onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
+              onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
+            >
+              Bulk Rename
+            </button>
+          </>
+        )}
+        {(library.type === 'tv' || library.type === 'movies') && (
+          <button
+            onClick={() => setShowImportWarning(true)}
+            disabled={importingMetadata}
+            className="text-xs px-2.5 py-1.5 rounded-lg transition-colors disabled:opacity-50"
+            style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
+            onMouseEnter={(e) => {
+              if (!importingMetadata) (e.currentTarget as HTMLElement).style.color = 'var(--text-primary)'
+            }}
+            onMouseLeave={(e) => {
+              if (!importingMetadata) (e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
+            }}
+          >
+            {importingMetadata ? 'Importing…' : 'Import Metadata'}
+          </button>
+        )}
         {library.coverExt && (
           <button
             onClick={handleRemoveCover}
@@ -253,6 +330,216 @@ function LibraryRow({
           {removing ? 'Removing…' : confirming ? 'Confirm?' : 'Remove'}
         </button>
       </div>
+
+      {showBulkRename && (
+        <BulkRenameModal libraryId={library.id} onClose={() => setShowBulkRename(false)} />
+      )}
+      {showImportWarning && (library.type === 'tv' || library.type === 'movies') && (
+        <ImportWarningModal
+          libraryType={library.type}
+          onConfirm={handleImportMetadata}
+          onCancel={() => setShowImportWarning(false)}
+        />
+      )}
+    </div>
+  )
+}
+
+// ─── Bulk Rename Modal ────────────────────────────────────────────────────────
+
+function BulkRenameModal({ libraryId, onClose }: { libraryId: string; onClose: () => void }) {
+  const [pattern, setPattern] = useState('')
+  const [preview, setPreview] = useState<{ itemKey: string; oldTitle: string; newTitle: string }[] | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [applying, setApplying] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [result, setResult] = useState<string | null>(null)
+
+  const handlePreview = async () => {
+    if (!pattern.trim()) return
+    setError(null)
+    setPreview(null)
+    setResult(null)
+    setLoading(true)
+    try {
+      const res = await fetch(`/api/libraries/${encodeURIComponent(libraryId)}/bulk-rename`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ pattern: pattern.trim(), preview: true }),
+      })
+      const data = await res.json()
+      if (!res.ok) {
+        setError(data.error ?? 'Failed to preview')
+      } else {
+        setPreview(data.changes ?? [])
+      }
+    } catch {
+      setError('Network error')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleApply = async () => {
+    if (!pattern.trim()) return
+    setError(null)
+    setApplying(true)
+    try {
+      const res = await fetch(`/api/libraries/${encodeURIComponent(libraryId)}/bulk-rename`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ pattern: pattern.trim() }),
+      })
+      const data = await res.json()
+      if (!res.ok) {
+        setError(data.error ?? 'Failed to apply')
+      } else {
+        setResult(`Updated ${data.updated} title${data.updated === 1 ? '' : 's'}`)
+        setPreview(null)
+      }
+    } catch {
+      setError('Network error')
+    } finally {
+      setApplying(false)
+    }
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center"
+      style={{ backgroundColor: 'rgba(0,0,0,0.6)' }}
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-lg rounded-2xl shadow-2xl overflow-hidden flex flex-col"
+        style={{
+          backgroundColor: 'var(--surface)',
+          border: '1px solid var(--border)',
+          maxHeight: '80vh',
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div
+          className="flex items-center justify-between px-5 py-4 flex-shrink-0"
+          style={{ borderBottom: '1px solid var(--border)' }}
+        >
+          <div>
+            <p className="font-medium" style={{ color: 'var(--text-primary)' }}>Bulk Rename</p>
+            <p className="text-xs mt-0.5" style={{ color: 'var(--text-secondary)' }}>
+              Enter a regex pattern to remove from comic titles
+            </p>
+          </div>
+          <button
+            onClick={onClose}
+            className="w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors"
+            style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+          >
+            ✕
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="px-5 py-4 overflow-y-auto flex-1">
+          {/* Pattern input */}
+          <div className="flex gap-2 mb-4">
+            <input
+              type="text"
+              value={pattern}
+              onChange={(e) => setPattern(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') handlePreview() }}
+              placeholder="e.g. \[English\]|\{doujin-moe\.us\}"
+              className="flex-1 rounded-lg px-3 py-2 text-sm outline-none font-mono"
+              style={{
+                backgroundColor: 'var(--background)',
+                border: '1px solid var(--border)',
+                color: 'var(--text-primary)',
+              }}
+              autoFocus
+            />
+            <button
+              onClick={handlePreview}
+              disabled={!pattern.trim() || loading}
+              className="text-xs px-3 py-2 rounded-lg transition-colors disabled:opacity-50"
+              style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
+            >
+              {loading ? 'Loading…' : 'Preview'}
+            </button>
+          </div>
+
+          {error && (
+            <p
+              className="text-xs mb-3 px-3 py-2 rounded-lg"
+              style={{ backgroundColor: '#7f1d1d33', color: '#fca5a5' }}
+            >
+              {error}
+            </p>
+          )}
+
+          {result && (
+            <p
+              className="text-xs mb-3 px-3 py-2 rounded-lg"
+              style={{ backgroundColor: '#14532d33', color: '#86efac' }}
+            >
+              {result}
+            </p>
+          )}
+
+          {/* Preview list */}
+          {preview !== null && (
+            preview.length === 0 ? (
+              <p className="text-sm py-4" style={{ color: 'var(--text-secondary)' }}>
+                No titles match this pattern.
+              </p>
+            ) : (
+              <div>
+                <p className="text-xs mb-2" style={{ color: 'var(--text-secondary)' }}>
+                  {preview.length} title{preview.length === 1 ? '' : 's'} will be updated:
+                </p>
+                <div
+                  className="rounded-lg border divide-y overflow-hidden"
+                  style={{ borderColor: 'var(--border)' }}
+                >
+                  {preview.map((c) => (
+                    <div key={c.itemKey} className="px-3 py-2">
+                      <p className="text-xs line-through" style={{ color: 'var(--text-secondary)' }}>
+                        {c.oldTitle}
+                      </p>
+                      <p className="text-xs font-medium" style={{ color: 'var(--text-primary)' }}>
+                        {c.newTitle}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )
+          )}
+        </div>
+
+        {/* Footer */}
+        {preview && preview.length > 0 && (
+          <div
+            className="flex items-center justify-end gap-2 px-5 py-3 flex-shrink-0"
+            style={{ borderTop: '1px solid var(--border)' }}
+          >
+            <button
+              onClick={onClose}
+              className="text-xs px-3 py-2 rounded-lg transition-colors"
+              style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleApply}
+              disabled={applying}
+              className="text-xs px-3 py-2 rounded-lg transition-colors disabled:opacity-50"
+              style={{ backgroundColor: '#7f1d1d', color: '#fca5a5' }}
+            >
+              {applying ? 'Applying…' : `Apply to ${preview.length} title${preview.length === 1 ? '' : 's'}`}
+            </button>
+          </div>
+        )}
+      </div>
     </div>
   )
 }
@@ -334,6 +621,7 @@ function AddLibraryForm({ onAdded }: { onAdded: () => void }) {
             onFocus={(e) => ((e.currentTarget as HTMLElement).style.borderColor = 'var(--accent)')}
             onBlur={(e) => ((e.currentTarget as HTMLElement).style.borderColor = 'var(--border)')}
           >
+            <option value="comics">Comics / Manga</option>
             <option value="games">Games</option>
             <option value="mixed">Mixed Media</option>
             <option value="movies">Movies</option>
@@ -415,3 +703,57 @@ function LoadingRows() {
     </div>
   )
 }
+
+function ImportWarningModal({
+  libraryType,
+  onConfirm,
+  onCancel,
+}: {
+  libraryType: 'tv' | 'movies'
+  onConfirm: () => void
+  onCancel: () => void
+}) {
+  const label = libraryType === 'tv' ? 'TV' : 'Movie'
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      style={{ backgroundColor: 'rgba(0,0,0,0.6)' }}
+      onClick={onCancel}
+    >
+      <div
+        className="w-full max-w-md rounded-2xl border p-5"
+        style={{ backgroundColor: 'var(--surface)', borderColor: 'var(--border)' }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h3 className="text-sm font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
+          Import {label} Metadata
+        </h3>
+        <p className="text-sm mb-5" style={{ color: 'var(--text-secondary)' }}>
+          Full metadata import will refresh metadata for ALL items in this library, overwriting any
+          existing data. Continue?
+        </p>
+        <div className="flex items-center justify-end gap-2">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="text-xs px-3 py-2 rounded-lg transition-colors"
+            style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            className="text-xs px-3 py-2 rounded-lg transition-colors"
+            style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
+          >
+            Import
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ManagePage

src/app/manage/tags/mappings/[id]/page.tsx

@@ -0,0 +1,865 @@
+'use client'
+
+import { memo, useEffect, useMemo, useState, useRef, useCallback } from 'react'
+import { useParams } from 'next/navigation'
+import { useVirtualizer } from '@tanstack/react-virtual'
+import type { Tag, TagCategory, ImportedTag, TagMapping, Library } from '@/types'
+
+export default function TagMappingsPage() {
+  const params = useParams()
+  const libraryId = params.id as string
+
+  const [library, setLibrary] = useState<Library | null>(null)
+  const [importedTags, setImportedTags] = useState<ImportedTag[]>([])
+  const [mappings, setMappings] = useState<TagMapping[]>([])
+  const [tags, setTags] = useState<Tag[]>([])
+  const [categories, setCategories] = useState<TagCategory[]>([])
+  const [loading, setLoading] = useState(true)
+  const [prefixMappings, setPrefixMappings] = useState<Record<string, string>>({})
+  const [ignoredTags, setIgnoredTags] = useState<Set<string>>(new Set())
+
+  // Load prefix mappings and ignored tags from localStorage on mount
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(`prefix-mappings-${libraryId}`)
+      if (stored) setPrefixMappings(JSON.parse(stored))
+    } catch { /* ignore */ }
+    try {
+      const stored = localStorage.getItem(`ignored-tags-${libraryId}`)
+      if (stored) setIgnoredTags(new Set(JSON.parse(stored)))
+    } catch { /* ignore */ }
+  }, [libraryId])
+
+  const updatePrefixMappings = useCallback((next: Record<string, string>) => {
+    setPrefixMappings(next)
+    try {
+      localStorage.setItem(`prefix-mappings-${libraryId}`, JSON.stringify(next))
+    } catch { /* ignore */ }
+  }, [libraryId])
+
+  const updateIgnoredTags = useCallback((next: Set<string>) => {
+    setIgnoredTags(next)
+    try {
+      localStorage.setItem(`ignored-tags-${libraryId}`, JSON.stringify([...next]))
+    } catch { /* ignore */ }
+  }, [libraryId])
+
+  const refresh = () => {
+    Promise.all([
+      fetch(`/api/imported-tags?libraryId=${encodeURIComponent(libraryId)}`).then((r) => r.json()),
+      fetch(`/api/tag-mappings?libraryId=${encodeURIComponent(libraryId)}`).then((r) => r.json()),
+      fetch('/api/tags/items').then((r) => r.json()),
+      fetch('/api/tags/categories').then((r) => r.json()),
+      fetch('/api/libraries').then((r) => r.json()),
+    ])
+      .then(([imported, maps, tgs, cats, libs]: [ImportedTag[], TagMapping[], Tag[], TagCategory[], Library[]]) => {
+        setImportedTags(imported)
+        setMappings(maps)
+        setTags(tgs)
+        setCategories(cats)
+        setLibrary(libs.find((l) => l.id === libraryId) ?? null)
+        setLoading(false)
+      })
+      .catch(() => setLoading(false))
+  }
+
+  useEffect(() => {
+    refresh()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [libraryId])
+
+  const tagsByCategory = useMemo(() => (
+    categories
+      .map((cat) => ({
+        category: cat,
+        tags: tags.filter((t) => t.categoryId === cat.id),
+      }))
+      .filter((g) => g.tags.length > 0)
+  ), [categories, tags])
+
+  const visibleTags = useMemo(() => importedTags.filter((t) => !ignoredTags.has(t.name)), [importedTags, ignoredTags])
+  const hiddenTags = useMemo(() => importedTags.filter((t) => ignoredTags.has(t.name)), [importedTags, ignoredTags])
+
+  const handleIgnoreTag = useCallback((name: string) => {
+    updateIgnoredTags(new Set([...ignoredTags, name]))
+  }, [ignoredTags, updateIgnoredTags])
+
+  const handleUnignoreTag = useCallback((name: string) => {
+    const next = new Set(ignoredTags)
+    next.delete(name)
+    updateIgnoredTags(next)
+  }, [ignoredTags, updateIgnoredTags])
+
+  return (
+    <div className="max-w-2xl">
+      <div className="flex items-center gap-2 mb-1">
+        <a
+          href="/manage/tags"
+          className="text-sm no-underline transition-colors"
+          style={{ color: 'var(--text-secondary)' }}
+          onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
+          onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
+        >
+          ← Tags
+        </a>
+      </div>
+      <h1 className="text-2xl font-semibold mb-1" style={{ color: 'var(--text-primary)' }}>
+        Tag Mappings{library ? ` — ${library.name}` : ''}
+      </h1>
+      <p className="text-sm mb-8" style={{ color: 'var(--text-secondary)' }}>
+        Map imported tags from ComicInfo.xml files to your tag categories.
+      </p>
+
+      {loading ? (
+        <Section title="Unmapped Tags">
+          <LoadingRows />
+        </Section>
+      ) : (
+        <>
+          <PrefixMappingsSection
+            categories={categories}
+            importedTags={importedTags}
+            prefixMappings={prefixMappings}
+            onUpdate={updatePrefixMappings}
+          />
+
+          <Section title="Unmapped Tags">
+            {visibleTags.length === 0 ? (
+              <p className="text-sm py-4" style={{ color: 'var(--text-secondary)' }}>
+                {importedTags.length === 0
+                  ? 'No unmapped imported tags. All tags have been mapped or no ComicInfo.xml tags were found.'
+                  : 'All unmapped tags are hidden. Check the ignored tags section below.'}
+              </p>
+            ) : (
+              <VirtualizedImportedTagRows
+                tags={visibleTags}
+                libraryId={libraryId}
+                tagsByCategory={tagsByCategory}
+                categories={categories}
+                prefixMappings={prefixMappings}
+                onMapped={refresh}
+                onIgnore={handleIgnoreTag}
+              />
+            )}
+          </Section>
+
+          {hiddenTags.length > 0 && (
+            <IgnoredTagsSection
+              tags={hiddenTags}
+              onUnignore={handleUnignoreTag}
+            />
+          )}
+
+          <Section title="Saved Mappings">
+            {mappings.length === 0 ? (
+              <p className="text-sm py-4" style={{ color: 'var(--text-secondary)' }}>
+                No saved mappings yet. Map imported tags above to create persistent mappings.
+              </p>
+            ) : (
+              <div className="divide-y" style={{ borderColor: 'var(--border)' }}>
+                {mappings.map((m) => (
+                  <MappingRow key={m.id} mapping={m} onDeleted={refresh} />
+                ))}
+              </div>
+            )}
+          </Section>
+        </>
+      )}
+    </div>
+  )
+}
+
+// ─── Prefix Mappings Section ──────────────────────────────────────────────────
+
+function PrefixMappingsSection({
+  categories,
+  importedTags,
+  prefixMappings,
+  onUpdate,
+}: {
+  categories: TagCategory[]
+  importedTags: ImportedTag[]
+  prefixMappings: Record<string, string>
+  onUpdate: (next: Record<string, string>) => void
+}) {
+  const [newPrefix, setNewPrefix] = useState('')
+  const [newCategoryId, setNewCategoryId] = useState('')
+
+  // Detect prefixes from imported tags that aren't yet mapped
+  const detectedPrefixes = Array.from(
+    new Set(
+      importedTags
+        .map((t) => {
+          const idx = t.name.indexOf(': ')
+          return idx > 0 ? t.name.slice(0, idx).trim().toLowerCase() : null
+        })
+        .filter((p): p is string => p !== null)
+    )
+  ).filter((p) => !(p in prefixMappings)).sort()
+
+  const catMap = new Map(categories.map((c) => [c.id, c.name]))
+  const entries = Object.entries(prefixMappings)
+
+  const handleAdd = () => {
+    const key = newPrefix.trim().toLowerCase()
+    if (!key || !newCategoryId) return
+    onUpdate({ ...prefixMappings, [key]: newCategoryId })
+    setNewPrefix('')
+    setNewCategoryId('')
+  }
+
+  const handleRemove = (key: string) => {
+    const next = { ...prefixMappings }
+    delete next[key]
+    onUpdate(next)
+  }
+
+  return (
+    <Section title="Prefix Mappings">
+      <p className="text-xs mb-3" style={{ color: 'var(--text-secondary)' }}>
+        Map tag prefixes (e.g. &quot;language&quot; in &quot;language: english&quot;) to categories.
+        When creating a new tag, the category and name will auto-fill.
+      </p>
+
+      {/* Existing mappings */}
+      {entries.length > 0 && (
+        <div className="divide-y mb-3" style={{ borderColor: 'var(--border)' }}>
+          {entries.map(([prefix, catId]) => (
+            <div key={prefix} className="flex items-center gap-3 py-2 first:pt-0 last:pb-0">
+              <span
+                className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-mono"
+                style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)' }}
+              >
+                {prefix}:
+              </span>
+              <span className="text-xs" style={{ color: 'var(--text-secondary)' }}>→</span>
+              <span className="text-xs" style={{ color: 'var(--text-primary)' }}>
+                {catMap.get(catId) ?? catId}
+              </span>
+              <div className="flex-1" />
+              <button
+                onClick={() => handleRemove(prefix)}
+                className="text-xs px-2 py-1 rounded-lg transition-colors"
+                style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+                onMouseEnter={(e) => {
+                  ;(e.currentTarget as HTMLElement).style.backgroundColor = '#7f1d1d'
+                  ;(e.currentTarget as HTMLElement).style.color = '#fca5a5'
+                }}
+                onMouseLeave={(e) => {
+                  ;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
+                  ;(e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
+                }}
+              >
+                Remove
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Add row */}
+      <div className="flex items-center gap-2">
+        <input
+          type="text"
+          value={newPrefix}
+          onChange={(e) => setNewPrefix(e.target.value)}
+          placeholder="prefix"
+          className="rounded-lg px-2 py-1.5 text-xs font-mono outline-none"
+          style={{
+            backgroundColor: 'var(--background)',
+            border: '1px solid var(--border)',
+            color: 'var(--text-primary)',
+            width: 100,
+          }}
+          onKeyDown={(e) => { if (e.key === 'Enter') handleAdd() }}
+        />
+        <span className="text-xs" style={{ color: 'var(--text-secondary)' }}>→</span>
+        <select
+          value={newCategoryId}
+          onChange={(e) => setNewCategoryId(e.target.value)}
+          className="rounded-lg px-2 py-1.5 text-xs outline-none"
+          style={{
+            backgroundColor: 'var(--background)',
+            border: '1px solid var(--border)',
+            color: 'var(--text-primary)',
+            minWidth: 130,
+          }}
+        >
+          <option value="">Category…</option>
+          {categories.map((cat) => (
+            <option key={cat.id} value={cat.id}>{cat.name}</option>
+          ))}
+        </select>
+        <button
+          onClick={handleAdd}
+          disabled={!newPrefix.trim() || !newCategoryId}
+          className="text-xs px-2.5 py-1.5 rounded-lg transition-colors disabled:opacity-50"
+          style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
+        >
+          Add
+        </button>
+      </div>
+
+      {/* Suggestions */}
+      {detectedPrefixes.length > 0 && (
+        <div className="mt-3 flex flex-wrap items-center gap-1.5">
+          <span className="text-xs" style={{ color: 'var(--text-secondary)' }}>Detected:</span>
+          {detectedPrefixes.map((p) => (
+            <button
+              key={p}
+              onClick={() => setNewPrefix(p)}
+              className="text-xs px-2 py-0.5 rounded-full transition-colors"
+              style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+              onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
+              onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
+            >
+              {p}
+            </button>
+          ))}
+        </div>
+      )}
+    </Section>
+  )
+}
+
+// ─── Imported Tag Row ─────────────────────────────────────────────────────────
+
+function VirtualizedImportedTagRows({
+  tags,
+  libraryId,
+  tagsByCategory,
+  categories,
+  prefixMappings,
+  onMapped,
+  onIgnore,
+}: {
+  tags: ImportedTag[]
+  libraryId: string
+  tagsByCategory: { category: TagCategory; tags: Tag[] }[]
+  categories: TagCategory[]
+  prefixMappings: Record<string, string>
+  onMapped: () => void
+  onIgnore: (name: string) => void
+}) {
+  const parentRef = useRef<HTMLDivElement | null>(null)
+  const rowVirtualizer = useVirtualizer({
+    count: tags.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 56,
+    overscan: 8,
+  })
+
+  return (
+    <div ref={parentRef} className="max-h-[560px] overflow-auto">
+      <div style={{ height: rowVirtualizer.getTotalSize(), width: '100%', position: 'relative' }}>
+        {rowVirtualizer.getVirtualItems().map((row) => {
+          const importedTag = tags[row.index]
+          return (
+            <div
+              key={importedTag.name}
+              ref={rowVirtualizer.measureElement}
+              data-index={row.index}
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                transform: `translateY(${row.start}px)`,
+                borderTop: row.index === 0 ? 'none' : '1px solid var(--border)',
+              }}
+            >
+              <ImportedTagRow
+                importedTag={importedTag}
+                libraryId={libraryId}
+                tagsByCategory={tagsByCategory}
+                categories={categories}
+                prefixMappings={prefixMappings}
+                onMapped={onMapped}
+                onIgnore={() => onIgnore(importedTag.name)}
+              />
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+const ImportedTagRow = memo(function ImportedTagRow({
+  importedTag,
+  libraryId,
+  tagsByCategory,
+  categories,
+  prefixMappings,
+  onMapped,
+  onIgnore,
+}: {
+  importedTag: ImportedTag
+  libraryId: string
+  tagsByCategory: { category: TagCategory; tags: Tag[] }[]
+  categories: TagCategory[]
+  prefixMappings: Record<string, string>
+  onMapped: () => void
+  onIgnore: () => void
+}) {
+  // Auto-match: if prefix mapping exists, find a tag in that category matching the stripped name
+  const autoMatchedTagId = useMemo(() => {
+    const colonIdx = importedTag.name.indexOf(': ')
+    if (colonIdx <= 0) return ''
+    const prefix = importedTag.name.slice(0, colonIdx).trim().toLowerCase()
+    const mappedCategoryId = prefixMappings[prefix]
+    if (!mappedCategoryId) return ''
+    const strippedName = importedTag.name.slice(colonIdx + 2).trim().toLowerCase()
+    const group = tagsByCategory.find((g) => g.category.id === mappedCategoryId)
+    const match = group?.tags.find((t) => t.name.toLowerCase() === strippedName)
+    return match?.id ?? ''
+  }, [importedTag.name, prefixMappings, tagsByCategory])
+
+  const [selectedTagId, setSelectedTagId] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [creating, setCreating] = useState(false)
+  const [newTagName, setNewTagName] = useState(importedTag.name)
+  const [newTagCategoryId, setNewTagCategoryId] = useState('')
+  const [creatingTag, setCreatingTag] = useState(false)
+
+  // Apply auto-match when it changes (e.g. prefix mappings updated)
+  useEffect(() => {
+    if (autoMatchedTagId) setSelectedTagId(autoMatchedTagId)
+  }, [autoMatchedTagId])
+
+  const startCreating = () => {
+    // Apply prefix mapping defaults if the imported tag has a colon prefix
+    const colonIdx = importedTag.name.indexOf(': ')
+    if (colonIdx > 0) {
+      const prefix = importedTag.name.slice(0, colonIdx).trim().toLowerCase()
+      const mappedCategoryId = prefixMappings[prefix]
+      if (mappedCategoryId) {
+        setNewTagCategoryId(mappedCategoryId)
+        setNewTagName(importedTag.name.slice(colonIdx + 2).trim())
+        setCreating(true)
+        return
+      }
+    }
+    setNewTagName(importedTag.name)
+    setNewTagCategoryId('')
+    setCreating(true)
+  }
+
+  const handleMap = async () => {
+    if (!selectedTagId) return
+    setError(null)
+    setSaving(true)
+    try {
+      const res = await fetch('/api/tag-mappings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          libraryId,
+          importedTagName: importedTag.name,
+          tagId: selectedTagId,
+        }),
+      })
+      if (!res.ok) {
+        const data = await res.json()
+        setError(data.error ?? 'Failed to save mapping')
+        setSaving(false)
+        return
+      }
+      setSaving(false)
+      setSelectedTagId('')
+      onMapped()
+    } catch {
+      setError('Network error')
+      setSaving(false)
+    }
+  }
+
+  const handleCreateAndMap = async () => {
+    if (!newTagName.trim() || !newTagCategoryId) return
+    setError(null)
+    setCreatingTag(true)
+    try {
+      const createRes = await fetch('/api/tags/items', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: newTagName.trim(), categoryId: newTagCategoryId }),
+      })
+      if (!createRes.ok) {
+        const data = await createRes.json()
+        setError(data.error ?? 'Failed to create tag')
+        setCreatingTag(false)
+        return
+      }
+      const newTag = await createRes.json()
+
+      const mapRes = await fetch('/api/tag-mappings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          libraryId,
+          importedTagName: importedTag.name,
+          tagId: newTag.id,
+        }),
+      })
+      if (!mapRes.ok) {
+        const data = await mapRes.json()
+        setError(data.error ?? 'Failed to save mapping')
+        setCreatingTag(false)
+        return
+      }
+      setCreatingTag(false)
+      setCreating(false)
+      setNewTagName(importedTag.name)
+      setNewTagCategoryId('')
+      onMapped()
+    } catch {
+      setError('Network error')
+      setCreatingTag(false)
+    }
+  }
+
+  return (
+    <div className="py-3 first:pt-0 last:pb-0">
+      <div className="flex items-center gap-3">
+        {/* Left: imported tag name + item count */}
+        <div className="flex-1 min-w-0">
+          <span
+            className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs"
+            style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)' }}
+          >
+            {importedTag.name}
+            <span className="text-xs" style={{ color: 'var(--text-secondary)' }}>
+              ({importedTag.itemCount})
+            </span>
+          </span>
+        </div>
+
+        {!creating ? (
+          <>
+            {/* Right: tag picker + map button + new button */}
+            <select
+              value={selectedTagId}
+              onChange={(e) => setSelectedTagId(e.target.value)}
+              className="rounded-lg px-2 py-1.5 text-xs outline-none"
+              style={{
+                backgroundColor: 'var(--background)',
+                border: '1px solid var(--border)',
+                color: 'var(--text-primary)',
+                minWidth: 160,
+              }}
+            >
+              <option value="">Select tag…</option>
+              {tagsByCategory.map((group) => (
+                <optgroup key={group.category.id} label={group.category.name}>
+                  {group.tags.map((tag) => (
+                    <option key={tag.id} value={tag.id}>
+                      {tag.name}
+                    </option>
+                  ))}
+                </optgroup>
+              ))}
+            </select>
+
+            <button
+              onClick={handleMap}
+              disabled={!selectedTagId || saving}
+              className="text-xs px-2.5 py-1.5 rounded-lg transition-colors disabled:opacity-50"
+              style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
+            >
+              {saving ? 'Mapping…' : 'Map'}
+            </button>
+
+            <button
+              onClick={startCreating}
+              className="text-xs px-2.5 py-1.5 rounded-lg transition-colors"
+              style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+              onMouseEnter={(e) => {
+                ;(e.currentTarget as HTMLElement).style.color = 'var(--text-primary)'
+              }}
+              onMouseLeave={(e) => {
+                ;(e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
+              }}
+              title="Create a new tag and map it"
+            >
+              + New
+            </button>
+
+            <button
+              onClick={onIgnore}
+              className="text-xs px-2 py-1.5 rounded-lg transition-colors"
+              style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+              onMouseEnter={(e) => {
+                ;(e.currentTarget as HTMLElement).style.color = 'var(--text-primary)'
+              }}
+              onMouseLeave={(e) => {
+                ;(e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
+              }}
+              title="Hide this tag"
+            >
+              Ignore
+            </button>
+          </>
+        ) : (
+          <>
+            {/* Inline create: category picker + name input + create & map button */}
+            <select
+              value={newTagCategoryId}
+              onChange={(e) => setNewTagCategoryId(e.target.value)}
+              className="rounded-lg px-2 py-1.5 text-xs outline-none"
+              style={{
+                backgroundColor: 'var(--background)',
+                border: '1px solid var(--border)',
+                color: 'var(--text-primary)',
+                minWidth: 120,
+              }}
+            >
+              <option value="">Category…</option>
+              {categories.map((cat) => (
+                <option key={cat.id} value={cat.id}>
+                  {cat.name}
+                </option>
+              ))}
+            </select>
+
+            <input
+              type="text"
+              value={newTagName}
+              onChange={(e) => setNewTagName(e.target.value)}
+              placeholder="Tag name"
+              className="rounded-lg px-2 py-1.5 text-xs outline-none"
+              style={{
+                backgroundColor: 'var(--background)',
+                border: '1px solid var(--border)',
+                color: 'var(--text-primary)',
+                width: 120,
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleCreateAndMap()
+                if (e.key === 'Escape') setCreating(false)
+              }}
+              autoFocus
+            />
+
+            <button
+              onClick={handleCreateAndMap}
+              disabled={!newTagName.trim() || !newTagCategoryId || creatingTag}
+              className="text-xs px-2.5 py-1.5 rounded-lg transition-colors disabled:opacity-50"
+              style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
+            >
+              {creatingTag ? 'Creating…' : 'Create & Map'}
+            </button>
+
+            <button
+              onClick={() => setCreating(false)}
+              className="text-xs px-2.5 py-1.5 rounded-lg transition-colors"
+              style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+            >
+              Cancel
+            </button>
+          </>
+        )}
+      </div>
+      {error && (
+        <p className="text-xs mt-1.5 px-3 py-1 rounded-lg" style={{ backgroundColor: '#7f1d1d33', color: '#fca5a5' }}>
+          {error}
+        </p>
+      )}
+    </div>
+  )
+})
+
+// ─── Ignored Tags Section ─────────────────────────────────────────────────────
+
+function IgnoredTagsSection({
+  tags,
+  onUnignore,
+}: {
+  tags: ImportedTag[]
+  onUnignore: (name: string) => void
+}) {
+  const [expanded, setExpanded] = useState(false)
+  const parentRef = useRef<HTMLDivElement | null>(null)
+  const rowVirtualizer = useVirtualizer({
+    count: tags.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 44,
+    overscan: 8,
+  })
+
+  return (
+    <div className="mb-10">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex items-center gap-1.5 mb-3 group"
+        style={{ color: 'var(--text-secondary)' }}
+      >
+        <span className="text-xs transition-transform" style={{ display: 'inline-block', transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)' }}>
+          ▶
+        </span>
+        <span className="text-xs font-semibold uppercase tracking-wider">
+          Ignored Tags ({tags.length})
+        </span>
+      </button>
+      {expanded && (
+        <div
+          className="rounded-xl border"
+          style={{ borderColor: 'var(--border)', backgroundColor: 'var(--surface)' }}
+        >
+          <div ref={parentRef} className="px-5 py-4 max-h-[360px] overflow-auto">
+            <div style={{ height: rowVirtualizer.getTotalSize(), width: '100%', position: 'relative' }}>
+              {rowVirtualizer.getVirtualItems().map((row) => {
+                const t = tags[row.index]
+                return (
+                  <div
+                    key={t.name}
+                    ref={rowVirtualizer.measureElement}
+                    data-index={row.index}
+                    style={{
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      width: '100%',
+                      transform: `translateY(${row.start}px)`,
+                      borderTop: row.index === 0 ? 'none' : '1px solid var(--border)',
+                    }}
+                    className="flex items-center gap-3 py-2"
+                  >
+                    <span
+                      className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs"
+                      style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+                    >
+                      {t.name}
+                      <span className="text-xs" style={{ opacity: 0.6 }}>({t.itemCount})</span>
+                    </span>
+                    <div className="flex-1" />
+                    <button
+                      onClick={() => onUnignore(t.name)}
+                      className="text-xs px-2.5 py-1.5 rounded-lg transition-colors"
+                      style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+                      onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
+                      onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
+                    >
+                      Unignore
+                    </button>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ─── Mapping Row ──────────────────────────────────────────────────────────────
+
+function MappingRow({ mapping, onDeleted }: { mapping: TagMapping; onDeleted: () => void }) {
+  const [confirming, setConfirming] = useState(false)
+  const [deleting, setDeleting] = useState(false)
+  const cancelRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const handleDeleteClick = () => {
+    if (!confirming) {
+      setConfirming(true)
+      cancelRef.current = setTimeout(() => setConfirming(false), 4000)
+      return
+    }
+    if (cancelRef.current) clearTimeout(cancelRef.current)
+    setDeleting(true)
+    fetch(`/api/tag-mappings/${encodeURIComponent(mapping.id)}`, { method: 'DELETE' })
+      .then(() => onDeleted())
+      .catch(() => setDeleting(false))
+  }
+
+  return (
+    <div className="flex items-center gap-3 py-3 first:pt-0 last:pb-0">
+      <span
+        className="inline-flex items-center px-2.5 py-1 rounded-full text-xs"
+        style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)' }}
+      >
+        {mapping.importedTagName}
+      </span>
+      <span className="text-xs" style={{ color: 'var(--text-secondary)' }}>→</span>
+      <span
+        className="inline-flex items-center px-2.5 py-1 rounded-full text-xs"
+        style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
+      >
+        {mapping.categoryName}: {mapping.tagName}
+      </span>
+      <div className="flex-1" />
+      {confirming && (
+        <button
+          onClick={() => {
+            if (cancelRef.current) clearTimeout(cancelRef.current)
+            setConfirming(false)
+          }}
+          className="text-xs px-2.5 py-1.5 rounded-lg transition-colors"
+          style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
+        >
+          Cancel
+        </button>
+      )}
+      <button
+        onClick={handleDeleteClick}
+        disabled={deleting}
+        className="text-xs px-2.5 py-1.5 rounded-lg transition-colors disabled:opacity-50"
+        style={{
+          backgroundColor: confirming ? '#7f1d1d' : 'var(--border)',
+          color: confirming ? '#fca5a5' : 'var(--text-secondary)',
+        }}
+        onMouseEnter={(e) => {
+          if (!confirming) {
+            ;(e.currentTarget as HTMLElement).style.backgroundColor = '#7f1d1d'
+            ;(e.currentTarget as HTMLElement).style.color = '#fca5a5'
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (!confirming) {
+            ;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
+            ;(e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
+          }
+        }}
+      >
+        {deleting ? 'Deleting…' : confirming ? 'Confirm?' : 'Delete'}
+      </button>
+    </div>
+  )
+}
+
+// ─── Shared helpers ───────────────────────────────────────────────────────────
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="mb-10">
+      <h2
+        className="text-xs font-semibold uppercase tracking-wider mb-3"
+        style={{ color: 'var(--text-secondary)' }}
+      >
+        {title}
+      </h2>
+      <div
+        className="rounded-xl border"
+        style={{ borderColor: 'var(--border)', backgroundColor: 'var(--surface)' }}
+      >
+        <div className="px-5 py-4">{children}</div>
+      </div>
+    </div>
+  )
+}
+
+function LoadingRows() {
+  return (
+    <div className="flex flex-col gap-3">
+      {[70, 50, 85].map((w) => (
+        <div key={w} className="flex items-center gap-3">
+          <div
+            className="h-4 rounded animate-pulse"
+            style={{ width: `${w}%`, backgroundColor: 'var(--border)' }}
+          />
+        </div>
+      ))}
+    </div>
+  )
+}

src/app/manage/tags/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useState, useRef } from 'react'
-import type { Tag, TagCategory } from '@/types'
+import type { Tag, TagCategory, Library, ImportedTag } from '@/types'
 
 // ─── Main Page ────────────────────────────────────────────────────────────────
 
@@ -62,6 +62,8 @@ export default function ManageTagsPage() {
       <Section title="Add a Category">
         <AddCategoryForm onAdded={refresh} />
       </Section>
+
+      <ImportedTagMappingsSection />
     </div>
   )
 }
@@ -83,11 +85,13 @@ function CategoryBlock({
   const [confirming, setConfirming] = useState(false)
   const [deleting, setDeleting] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [mergeConflict, setMergeConflict] = useState<{ name: string } | null>(null)
   const cancelRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   const handleRename = async (e: React.FormEvent) => {
     e.preventDefault()
     setError(null)
+    setMergeConflict(null)
     setSaving(true)
     try {
       const res = await fetch(`/api/tags/categories/${encodeURIComponent(category.id)}`, {
@@ -96,8 +100,35 @@ function CategoryBlock({
         body: JSON.stringify({ name: editName }),
       })
       const data = await res.json()
+      if (!res.ok) {
+        if (res.status === 409 && data.conflict) {
+          setMergeConflict({ name: editName.trim() })
+          setSaving(false)
+          return
+        }
+        setError(data.error); setSaving(false); return
+      }
+      setEditing(false)
+      onChanged()
+    } catch {
+      setError('Network error.')
+    }
+    setSaving(false)
+  }
+
+  const handleMerge = async () => {
+    setError(null)
+    setSaving(true)
+    try {
+      const res = await fetch(`/api/tags/categories/${encodeURIComponent(category.id)}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: editName, merge: true }),
+      })
+      const data = await res.json()
       if (!res.ok) { setError(data.error); setSaving(false); return }
       setEditing(false)
+      setMergeConflict(null)
       onChanged()
     } catch {
       setError('Network error.')
@@ -156,7 +187,7 @@ function CategoryBlock({
             </button>
             <button
               type="button"
-              onClick={() => { setEditing(false); setEditName(category.name); setError(null) }}
+              onClick={() => { setEditing(false); setEditName(category.name); setError(null); setMergeConflict(null) }}
               className="text-xs px-2.5 py-1.5 rounded-lg transition-colors"
               style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
             >
@@ -228,6 +259,32 @@ function CategoryBlock({
         </p>
       )}
 
+      {mergeConflict && (
+        <div className="mb-3 px-3 py-2 rounded-lg text-xs" style={{ backgroundColor: '#78350f33', color: '#fbbf24' }}>
+          <p className="mb-2">
+            A category named &ldquo;{mergeConflict.name}&rdquo; already exists. This will merge all tags from
+            &ldquo;{category.name}&rdquo; into it. Tags with the same name will be combined.
+          </p>
+          <div className="flex gap-2">
+            <button
+              onClick={handleMerge}
+              disabled={saving}
+              className="text-xs px-2.5 py-1.5 rounded-lg transition-colors disabled:opacity-50"
+              style={{ backgroundColor: '#b45309', color: '#fff' }}
+            >
+              {saving ? 'Merging…' : 'Merge'}
+            </button>
+            <button
+              onClick={() => setMergeConflict(null)}
+              className="text-xs px-2.5 py-1.5 rounded-lg transition-colors"
+              style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
       {/* Tags list */}
       <div className="flex flex-wrap gap-2 mb-3">
         {tags.map((tag) => (
@@ -480,6 +537,117 @@ function AddCategoryForm({ onAdded }: { onAdded: () => void }) {
   )
 }
 
+// ─── Imported Tag Mappings Section ────────────────────────────────────────────
+
+function ImportedTagMappingsSection() {
+  const [libraries, setLibraries] = useState<Library[]>([])
+  const [tagCounts, setTagCounts] = useState<Record<string, number>>({})
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+
+    const load = async () => {
+      try {
+        setError(null)
+        const libsRes = await fetch('/api/libraries')
+        const libsJson = await libsRes.json()
+        if (!Array.isArray(libsJson)) {
+          throw new Error('Failed to load libraries')
+        }
+
+        const comicLibs = libsJson.filter((l): l is Library => l?.type === 'comics')
+        if (cancelled) return
+
+        setLibraries(comicLibs)
+        setLoading(false)
+
+        if (comicLibs.length === 0) return
+
+        const settled = await Promise.allSettled(
+          comicLibs.map(async (lib) => {
+            const res = await fetch(`/api/imported-tags?libraryId=${encodeURIComponent(lib.id)}`)
+            if (!res.ok) return { libraryId: lib.id, count: 0 }
+            const json = await res.json()
+            const count = Array.isArray(json) ? json.length : 0
+            return { libraryId: lib.id, count }
+          })
+        )
+
+        if (cancelled) return
+
+        const counts: Record<string, number> = {}
+        for (const result of settled) {
+          if (result.status === 'fulfilled') {
+            counts[result.value.libraryId] = result.value.count
+          }
+        }
+        setTagCounts(counts)
+      } catch {
+        if (cancelled) return
+        setError('Could not load imported tag mappings right now.')
+        setLoading(false)
+      }
+    }
+
+    load()
+
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  if (loading) {
+    return (
+      <Section title="Imported Tag Mappings">
+        <LoadingRows />
+      </Section>
+    )
+  }
+
+  if (libraries.length === 0) {
+    return (
+      <Section title="Imported Tag Mappings">
+        <p className="text-sm py-4" style={{ color: 'var(--text-secondary)' }}>
+          No comic libraries configured. Add a comic library to import tags from ComicInfo.xml files.
+        </p>
+      </Section>
+    )
+  }
+
+  return (
+    <Section title="Imported Tag Mappings">
+      {error && (
+        <p className="text-xs mb-3 px-3 py-1.5 rounded-lg" style={{ backgroundColor: '#7f1d1d33', color: '#fca5a5' }}>
+          {error}
+        </p>
+      )}
+      <div className="divide-y" style={{ borderColor: 'var(--border)' }}>
+        {libraries.map((lib) => (
+          <div key={lib.id} className="flex items-center gap-3 py-3 first:pt-0 last:pb-0">
+            <span className="flex-1 font-medium text-sm" style={{ color: 'var(--text-primary)' }}>
+              {lib.name}
+              <span className="ml-2 font-normal text-xs" style={{ color: 'var(--text-secondary)' }}>
+                {tagCounts[lib.id] ?? 0} imported tag{(tagCounts[lib.id] ?? 0) === 1 ? '' : 's'}
+              </span>
+            </span>
+            <a
+              href={`/manage/tags/mappings/${encodeURIComponent(lib.id)}`}
+              className="text-xs px-2.5 py-1.5 rounded-lg transition-colors no-underline"
+              style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
+              onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--accent-hover)')}
+              onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--accent)')}
+            >
+              Manage Mappings
+            </a>
+          </div>
+        ))}
+      </div>
+    </Section>
+  )
+}
+
 // ─── Shared helpers ───────────────────────────────────────────────────────────
 
 function Section({ title, children }: { title: string; children: React.ReactNode }) {

src/app/manage/users/page.tsx

@@ -216,32 +216,39 @@ function UserRow({
 
 // ─── Permissions Panel ────────────────────────────────────────────────────────
 
+type AccessLevel = 'none' | 'read' | 'write'
+
 function PermissionsPanel({ userId, libraries }: { userId: string; libraries: Library[] }) {
-  const [permitted, setPermitted] = useState<string[]>([])
+  const [levels, setLevels] = useState<Record<string, AccessLevel>>({})
   const [saving, setSaving] = useState(false)
   const [loaded, setLoaded] = useState(false)
 
   useEffect(() => {
     fetch(`/api/users/${encodeURIComponent(userId)}/permissions`)
       .then((r) => r.json())
-      .then((data: { libraryIds: string[] }) => {
+      .then((data: { permissions: { libraryId: string; accessLevel: 'read' | 'write' }[] }) => {
-        setPermitted(data.libraryIds)
+        const map: Record<string, AccessLevel> = {}
+        for (const p of data.permissions) {
+          map[p.libraryId] = p.accessLevel
+        }
+        setLevels(map)
         setLoaded(true)
       })
   }, [userId])
 
-  const toggle = (libraryId: string) => {
+  const setLevel = (libraryId: string, level: AccessLevel) => {
-    setPermitted((prev) =>
+    setLevels((prev) => ({ ...prev, [libraryId]: level }))
-      prev.includes(libraryId) ? prev.filter((id) => id !== libraryId) : [...prev, libraryId]
-    )
   }
 
   const save = async () => {
     setSaving(true)
+    const permissions = Object.entries(levels)
+      .filter(([, level]) => level !== 'none')
+      .map(([libraryId, accessLevel]) => ({ libraryId, accessLevel }))
     await fetch(`/api/users/${encodeURIComponent(userId)}/permissions`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ libraryIds: permitted }),
+      body: JSON.stringify({ permissions }),
     })
     setSaving(false)
   }
@@ -265,23 +272,40 @@ function PermissionsPanel({ userId, libraries }: { userId: string; libraries: Li
       {libraries.length === 0 ? (
         <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>No libraries configured.</p>
       ) : (
-        <div className="space-y-1.5">
+        <div className="space-y-2">
-          {libraries.map((lib) => (
+          {libraries.map((lib) => {
-            <label key={lib.id} className="flex items-center gap-2 cursor-pointer">
+            const current = levels[lib.id] ?? 'none'
-              <input
+            return (
-                type="checkbox"
+              <div key={lib.id} className="flex items-center justify-between gap-3">
-                checked={permitted.includes(lib.id)}
+                <div className="flex items-center gap-1.5 min-w-0">
-                onChange={() => toggle(lib.id)}
+                  <span className="text-sm truncate" style={{ color: 'var(--text-primary)' }}>
-                className="rounded"
+                    {lib.name}
-              />
+                  </span>
-              <span className="text-sm" style={{ color: 'var(--text-primary)' }}>
+                  <span className="text-xs shrink-0" style={{ color: 'var(--text-secondary)' }}>
-                {lib.name}
+                    ({lib.type})
-              </span>
+                  </span>
-              <span className="text-xs" style={{ color: 'var(--text-secondary)' }}>
+                </div>
-                ({lib.type})
+                <div
-              </span>
+                  className="flex shrink-0 rounded-md overflow-hidden text-xs font-medium"
-            </label>
+                  style={{ border: '1px solid var(--border)' }}
-          ))}
+                >
+                  {(['none', 'read', 'write'] as AccessLevel[]).map((lvl) => (
+                    <button
+                      key={lvl}
+                      onClick={() => setLevel(lib.id, lvl)}
+                      className="px-2.5 py-1 transition-colors capitalize"
+                      style={{
+                        backgroundColor: current === lvl ? 'var(--accent)' : 'transparent',
+                        color: current === lvl ? 'var(--background)' : 'var(--text-secondary)',
+                      }}
+                    >
+                      {lvl}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )
+          })}
         </div>
       )}
       <button

src/components/DoomScrollView.tsx

@@ -41,14 +41,29 @@ export default function DoomScrollView({ items, videoContext = 'mixed', onClose,
   const [autoPlayEnabled, setAutoPlayEnabled] = useState(false)
   const [autoPlaySeconds, setAutoPlaySeconds] = useState(5)
 
+  // Tools overlay visibility
+  const [showToolsOverlay, setShowToolsOverlay] = useState(false)
+
+  // Rating state
+  const [userRating, setUserRatingState] = useState<number | null>(null)
+  const [ratingHover, setRatingHover] = useState<number | null>(null)
+  const [savingRating, setSavingRating] = useState(false)
+
   // Text overlay state
   const [extractedText, setExtractedText] = useState<string | null>(null)
+  const [editedExtractedText, setEditedExtractedText] = useState<string>('')
+  const [savingText, setSavingText] = useState(false)
   const [translatedText, setTranslatedText] = useState<string | null>(null)
   const [showTextOverlay, setShowTextOverlay] = useState(false)
   const [showOriginal, setShowOriginal] = useState(false)
   const [extracting, setExtracting] = useState(false)
   const [extractError, setExtractError] = useState<string | null>(null)
   const [extractPending, setExtractPending] = useState(false)
+  const [retranslating, setRetranslating] = useState(false)
+  const [translatePending, setTranslatePending] = useState(false)
+  const [ocrLanguageInput, setOcrLanguageInput] = useState('')
+  const [defaultOcrLanguages, setDefaultOcrLanguages] = useState('eng')
+  const [sourceLanguage, setSourceLanguage] = useState('')
 
   const videoRef = useRef<HTMLVideoElement>(null)
   const extractPollRef = useRef<ReturnType<typeof setInterval> | null>(null)
@@ -128,27 +143,50 @@ export default function DoomScrollView({ items, videoContext = 'mixed', onClose,
     return () => clearTimeout(id)
   }, [autoPlayEnabled, isPaused, autoPlaySeconds, current?.url, goNext])
 
-  // Fetch extracted text for current item; clear any in-flight poll on item change
+  // Fetch OCR settings once on mount
+  useEffect(() => {
+    fetch('/api/ai-settings/ocr')
+      .then((r) => r.json())
+      .then((d: { ocrMode: string; ocrLanguages: string }) => {
+        setDefaultOcrLanguages(d.ocrLanguages)
+      })
+      .catch(() => {})
+  }, [])
+
+  // Fetch extracted text + rating for current item; clear any in-flight poll on item change
   useEffect(() => {
     if (extractPollRef.current) {
       clearInterval(extractPollRef.current)
       extractPollRef.current = null
     }
     setExtractedText(null)
+    setEditedExtractedText('')
     setTranslatedText(null)
     setShowTextOverlay(false)
     setShowOriginal(false)
     setExtracting(false)
     setExtractError(null)
     setExtractPending(false)
+    setRetranslating(false)
+    setTranslatePending(false)
+    setUserRatingState(null)
+    setRatingHover(null)
     if (!current?.itemKey) return
-    fetch(`/api/ai-tagging/fields?itemKey=${encodeURIComponent(current.itemKey)}`)
+    const key = current.itemKey
+    fetch(`/api/ai-tagging/fields?itemKey=${encodeURIComponent(key)}`)
       .then((r) => r.json())
       .then((data: { extractedText: string | null; extractedTextTranslated: string | null }) => {
         setExtractedText(data.extractedText)
+        setEditedExtractedText(data.extractedText ?? '')
         setTranslatedText(data.extractedTextTranslated)
       })
       .catch(() => {})
+    fetch(`/api/ratings?itemKey=${encodeURIComponent(key)}`)
+      .then((r) => r.json())
+      .then((data: { userRating: number | null }) => {
+        setUserRatingState(data.userRating)
+      })
+      .catch(() => {})
   }, [current?.itemKey])
 
   // Clean up poll on unmount
@@ -196,7 +234,58 @@ export default function DoomScrollView({ items, videoContext = 'mixed', onClose,
     }
   }, [navigate, onClose, extractedText])
 
-  const handleExtractText = async () => {
+  // ── Polling helper ──────────────────────────────────────────────────────────
+  const startPolling = useCallback((snapshotText: string | null, snapshotTranslated: string | null) => {
+    if (!current?.itemKey) return
+    const itemKey = current.itemKey
+    if (extractPollRef.current) clearInterval(extractPollRef.current)
+    const deadline = Date.now() + 5 * 60 * 1000
+    extractPollRef.current = setInterval(async () => {
+      if (Date.now() > deadline) {
+        clearInterval(extractPollRef.current!)
+        extractPollRef.current = null
+        setExtractPending(false)
+        setTranslatePending(false)
+        return
+      }
+      try {
+        const r = await fetch(`/api/ai-tagging/fields?itemKey=${encodeURIComponent(itemKey)}`)
+        const data: { extractedText: string | null; extractedTextTranslated: string | null } = await r.json()
+        const textChanged = data.extractedText !== snapshotText
+        const translationChanged = data.extractedTextTranslated !== snapshotTranslated
+        if (textChanged || translationChanged) {
+          clearInterval(extractPollRef.current!)
+          extractPollRef.current = null
+          setExtractedText(data.extractedText)
+          setEditedExtractedText(data.extractedText ?? '')
+          setTranslatedText(data.extractedTextTranslated)
+          setExtractPending(false)
+          setTranslatePending(false)
+          if (data.extractedText) setShowTextOverlay(true)
+        }
+      } catch { /* ignore */ }
+    }, 2000)
+  }, [current?.itemKey])
+
+  // ── Rating actions ───────────────────────────────────────────────────────────
+  const handleSetRating = useCallback(async (star: number) => {
+    if (!current?.itemKey) return
+    const next = userRating === star ? null : star
+    setSavingRating(true)
+    try {
+      const res = await fetch('/api/ratings', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ itemKey: current.itemKey, userRating: next }),
+      })
+      if (res.ok) setUserRatingState(next)
+    } finally {
+      setSavingRating(false)
+    }
+  }, [current?.itemKey, userRating])
+
+  // ── Text extraction ──────────────────────────────────────────────────────────
+  const callExtract = useCallback(async (modeOverride: string) => {
     if (!current?.itemKey) return
     const itemKey = current.itemKey
     setExtracting(true)
@@ -206,30 +295,15 @@ export default function DoomScrollView({ items, videoContext = 'mixed', onClose,
       const res = await fetch('/api/ai-tagging/extract-text', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ itemKey }),
+        body: JSON.stringify({
+          itemKey,
+          ocrMode: modeOverride,
+          ...(modeOverride !== 'llm' && ocrLanguageInput.trim() && { ocrLanguages: ocrLanguageInput.trim() }),
+        }),
       })
       if (res.status === 202) {
-        // Job queued — poll until it completes (up to 5 min)
         setExtractPending(true)
-        const deadline = Date.now() + 5 * 60 * 1000
+        startPolling(extractedText, translatedText)
-        extractPollRef.current = setInterval(async () => {
-          if (Date.now() > deadline) {
-            if (extractPollRef.current) clearInterval(extractPollRef.current)
-            setExtractPending(false)
-            return
-          }
-          try {
-            const r = await fetch(`/api/ai-tagging/fields?itemKey=${encodeURIComponent(itemKey)}`)
-            const data: { extractedText: string | null; extractedTextTranslated: string | null } = await r.json()
-            if (data.extractedText) {
-              if (extractPollRef.current) clearInterval(extractPollRef.current)
-              setExtractPending(false)
-              setExtractedText(data.extractedText)
-              setTranslatedText(data.extractedTextTranslated)
-              setShowTextOverlay(true)
-            }
-          } catch { /* ignore */ }
-        }, 2000)
         return
       }
       if (!res.ok) {
@@ -237,16 +311,67 @@ export default function DoomScrollView({ items, videoContext = 'mixed', onClose,
         throw new Error((data as { error?: string }).error ?? 'Extraction failed')
       }
       const result = await res.json()
-      setExtractedText(result.extractedText || null)
+      const newText: string | null = result.extractedText || null
-      setTranslatedText(result.translatedText || null)
+      const newTranslated: string | null = result.translatedText || null
-      if (result.extractedText) setShowTextOverlay(true)
+      setExtractedText(newText)
+      setEditedExtractedText(newText ?? '')
+      setTranslatedText(newTranslated)
+      if (newText) setShowTextOverlay(true)
     } catch (err) {
       setExtractError(err instanceof Error ? err.message : 'Extraction failed')
       setTimeout(() => setExtractError(null), 4000)
     } finally {
       setExtracting(false)
     }
-  }
+  }, [current?.itemKey, ocrLanguageInput, extractedText, translatedText, startPolling])
+
+  // ── Save edited extracted text ───────────────────────────────────────────────
+  const handleSaveExtractedText = useCallback(async () => {
+    if (!current?.itemKey) return
+    setSavingText(true)
+    try {
+      await fetch('/api/ai-tagging/fields', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ itemKey: current.itemKey, extractedText: editedExtractedText }),
+      })
+      setExtractedText(editedExtractedText)
+    } finally {
+      setSavingText(false)
+    }
+  }, [current?.itemKey, editedExtractedText])
+
+  // ── Translation ──────────────────────────────────────────────────────────────
+  const handleTranslate = useCallback(async () => {
+    if (!current?.itemKey) return
+    setRetranslating(true)
+    setTranslatePending(false)
+    try {
+      const res = await fetch('/api/ai-tagging/translate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          itemKey: current.itemKey,
+          ...(sourceLanguage.trim() && { sourceLanguage: sourceLanguage.trim() }),
+        }),
+      })
+      if (res.status === 202) {
+        setTranslatePending(true)
+        startPolling(extractedText, translatedText)
+        return
+      }
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error((data as { error?: string }).error ?? 'Translation failed')
+      }
+      const result = await res.json()
+      setTranslatedText(result.translatedText || null)
+    } catch {
+      // ignore
+    } finally {
+      setRetranslating(false)
+    }
+  }, [current?.itemKey, sourceLanguage, extractedText, translatedText, startPolling])
 
   return (
     <div className="fixed inset-0 z-50 flex flex-col" style={{ backgroundColor: '#000' }}>
@@ -333,6 +458,193 @@ export default function DoomScrollView({ items, videoContext = 'mixed', onClose,
         ) : null}
       </div>
 
+      {/* Tools overlay — anchored lower-left, above the bottom bar */}
+      {showToolsOverlay && current?.itemKey && (
+        <div
+          className="absolute bottom-16 left-4 z-20 rounded-xl p-4 flex flex-col gap-3 overflow-y-auto"
+          style={{
+            backgroundColor: 'rgba(10,10,10,0.92)',
+            border: '1px solid rgba(255,255,255,0.12)',
+            width: 'min(320px, calc(100vw - 2rem))',
+            maxHeight: 'calc(100vh - 8rem)',
+          }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* ── Rating ──────────────────────────────────────────── */}
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'rgba(255,255,255,0.45)' }}>
+              Rating
+            </p>
+            <div className="flex items-center gap-1" onMouseLeave={() => setRatingHover(null)}>
+              {[1, 2, 3, 4, 5].map((star) => {
+                const filled = (ratingHover ?? userRating ?? 0) >= star
+                return (
+                  <button
+                    key={star}
+                    onClick={() => handleSetRating(star)}
+                    onMouseEnter={() => setRatingHover(star)}
+                    disabled={savingRating}
+                    aria-label={`Rate ${star} star${star > 1 ? 's' : ''}`}
+                    style={{
+                      fontSize: '1.4rem',
+                      color: filled ? '#f59e0b' : 'rgba(255,255,255,0.2)',
+                      background: 'none',
+                      border: 'none',
+                      padding: '0 2px',
+                      cursor: savingRating ? 'wait' : 'pointer',
+                      transition: 'color 0.1s',
+                      lineHeight: 1,
+                    }}
+                  >
+                    ★
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+
+          {/* ── Text Extraction (images only) ───────────────────── */}
+          {current.mediaType === 'image' && (
+            <div style={{ borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: '0.75rem' }}>
+              <div className="flex items-center justify-between mb-2">
+                <p className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'rgba(255,255,255,0.45)' }}>
+                  Text Extraction
+                </p>
+                <button
+                  onClick={() => callExtract('llm')}
+                  disabled={extracting || extractPending}
+                  className="w-7 h-7 rounded-full flex items-center justify-center transition-opacity disabled:opacity-40"
+                  style={{
+                    backgroundColor: extractPending ? 'var(--accent)' : 'rgba(255,255,255,0.12)',
+                    color: extractPending ? '#fff' : 'rgba(255,255,255,0.7)',
+                    fontSize: '0.95rem',
+                  }}
+                  aria-label="Extract with AI"
+                  title="Extract with AI (skips OCR)"
+                >
+                  {extracting || extractPending ? <span className="animate-spin" style={{ display: 'inline-block' }}>⟳</span> : '✨'}
+                </button>
+              </div>
+
+              <div className="flex items-center gap-2 flex-wrap">
+                <button
+                  onClick={() => callExtract('tesseract')}
+                  disabled={extracting || extractPending}
+                  className="text-xs px-2 py-1 rounded-lg transition-colors disabled:opacity-40 flex-shrink-0"
+                  style={{ backgroundColor: 'rgba(255,255,255,0.1)', color: 'rgba(255,255,255,0.7)' }}
+                >
+                  {extracting ? '⟳ Scanning…' : extractedText ? '🔍 Re-scan with OCR' : '🔍 Scan with OCR'}
+                </button>
+                <input
+                  type="text"
+                  value={ocrLanguageInput}
+                  onChange={(e) => setOcrLanguageInput(e.target.value)}
+                  placeholder={defaultOcrLanguages}
+                  className="text-xs px-2 py-0.5 rounded-full outline-none"
+                  style={{
+                    backgroundColor: 'rgba(255,255,255,0.07)',
+                    border: '1px solid rgba(255,255,255,0.15)',
+                    color: 'rgba(255,255,255,0.85)',
+                    width: 120,
+                  }}
+                  title="Tesseract language(s) for this extraction (e.g. jpn+jpn_vert). Leave blank to use the configured default."
+                />
+              </div>
+
+              {extractError && (
+                <p className="text-xs mt-1" style={{ color: '#f87171' }}>{extractError}</p>
+              )}
+
+              {/* Extracted text editor */}
+              {extractedText !== null && (
+                <div className="flex flex-col gap-1 mt-2">
+                  <p className="text-xs font-medium" style={{ color: 'rgba(255,255,255,0.45)' }}>Extracted Text</p>
+                  <textarea
+                    value={editedExtractedText}
+                    onChange={(e) => setEditedExtractedText(e.target.value)}
+                    className="text-xs rounded-lg p-2 w-full resize-y outline-none"
+                    style={{
+                      backgroundColor: 'rgba(255,255,255,0.07)',
+                      border: '1px solid rgba(255,255,255,0.15)',
+                      color: 'rgba(255,255,255,0.9)',
+                      minHeight: '3.5rem',
+                      maxHeight: '8rem',
+                      fontFamily: 'inherit',
+                    }}
+                  />
+                  {editedExtractedText !== extractedText && (
+                    <button
+                      onClick={handleSaveExtractedText}
+                      disabled={savingText}
+                      className="self-start text-xs px-2 py-0.5 rounded-full transition-opacity disabled:opacity-50"
+                      style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
+                    >
+                      {savingText ? '⟳ Saving…' : 'Save'}
+                    </button>
+                  )}
+
+                  {/* Translation display */}
+                  {translatedText && (
+                    <div className="mt-1">
+                      <p className="text-xs font-medium mb-1" style={{ color: 'rgba(255,255,255,0.45)' }}>Translation</p>
+                      <pre
+                        className="text-xs whitespace-pre-wrap rounded-lg p-2 max-h-32 overflow-y-auto"
+                        style={{
+                          backgroundColor: 'rgba(255,255,255,0.07)',
+                          border: '1px solid rgba(255,255,255,0.15)',
+                          color: 'rgba(255,255,255,0.9)',
+                        }}
+                      >
+                        {translatedText}
+                      </pre>
+                    </div>
+                  )}
+
+                  {/* Original / translation toggle */}
+                  {extractedText && translatedText && (
+                    <button
+                      onClick={() => setShowOriginal((v) => !v)}
+                      className="self-start text-xs px-2 py-0.5 rounded-full mt-1"
+                      style={{ backgroundColor: 'rgba(255,255,255,0.12)', color: 'rgba(255,255,255,0.7)' }}
+                    >
+                      {showOriginal ? 'Show Translation in popover' : 'Show Original in popover'}
+                    </button>
+                  )}
+
+                  {/* Translate / re-translate */}
+                  <div className="flex items-center gap-1.5 flex-wrap mt-1">
+                    <input
+                      type="text"
+                      value={sourceLanguage}
+                      onChange={(e) => setSourceLanguage(e.target.value)}
+                      placeholder="Source lang…"
+                      className="text-xs px-2 py-0.5 rounded-full outline-none"
+                      style={{
+                        backgroundColor: 'rgba(255,255,255,0.07)',
+                        border: '1px solid rgba(255,255,255,0.15)',
+                        color: 'rgba(255,255,255,0.85)',
+                        width: 100,
+                      }}
+                    />
+                    <button
+                      onClick={handleTranslate}
+                      disabled={retranslating || translatePending}
+                      className="text-xs px-2 py-0.5 rounded-full transition-colors disabled:opacity-40"
+                      style={{
+                        backgroundColor: translatePending ? 'var(--accent)' : 'rgba(255,255,255,0.12)',
+                        color: translatePending ? '#fff' : 'rgba(255,255,255,0.7)',
+                      }}
+                    >
+                      {retranslating ? '⟳ Translating…' : translatePending ? '⟳ Queued…' : translatedText ? '🌐 Re-translate' : '🌐 Translate'}
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
       {/* Text overlay */}
       {showTextOverlay && displayText && (
         <div
@@ -357,9 +669,9 @@ export default function DoomScrollView({ items, videoContext = 'mixed', onClose,
         </div>
       )}
 
-      {/* Bottom bar: mute | filename | action buttons */}
+      {/* Bottom bar: [mute + tools] | filename | action buttons */}
       <div className="absolute bottom-0 left-0 right-0 flex items-center gap-3 px-4 pb-3 pt-2 z-10">
-        <div className="w-9 flex-shrink-0">
+        <div className="flex items-center gap-1 flex-shrink-0">
           {isVideo && (
             <button
               onClick={() => setLocalMuted((v) => !v)}
@@ -382,6 +694,27 @@ export default function DoomScrollView({ items, videoContext = 'mixed', onClose,
               )}
             </button>
           )}
+          {current?.itemKey && (
+            <button
+              onClick={() => setShowToolsOverlay((v) => !v)}
+              className="w-9 h-9 rounded-full flex items-center justify-center transition-opacity hover:opacity-100 opacity-70"
+              style={{
+                backgroundColor: showToolsOverlay ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.5)',
+                color: '#fff',
+              }}
+              aria-label={showToolsOverlay ? 'Close tools' : 'Open tools'}
+              title="Rating &amp; text tools"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <circle cx="12" cy="12" r="3"/>
+                <path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/>
+                <line x1="12" y1="2" x2="12" y2="5"/>
+                <line x1="12" y1="19" x2="12" y2="22"/>
+                <line x1="2" y1="12" x2="5" y2="12"/>
+                <line x1="19" y1="12" x2="22" y2="12"/>
+              </svg>
+            </button>
+          )}
         </div>
         <span className="flex-1 text-xs truncate text-center" style={{ color: 'rgba(255,255,255,0.4)' }}>
           {current?.name}
@@ -405,7 +738,7 @@ export default function DoomScrollView({ items, videoContext = 'mixed', onClose,
             </button>
           ) : current?.itemKey && current?.mediaType === 'image' ? (
             <button
-              onClick={handleExtractText}
+              onClick={() => callExtract('tesseract')}
               disabled={extracting || extractPending}
               className="w-9 h-9 rounded-full flex items-center justify-center transition-opacity hover:opacity-100 opacity-70 disabled:opacity-40"
               style={{

src/components/FilterPanel.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import type { Tag, TagCategory } from '@/types'
+import type { Tag, TagCategory, RatingOperator } from '@/types'
 
 interface Props {
   libraryId: string
@@ -11,9 +11,24 @@ interface Props {
   selectedTagIds: Set<string>
   onTagToggle: (tagId: string) => void
   refreshKey?: number
+  ratingValue: number | null
+  ratingOperator: RatingOperator
+  onRatingChange: (value: number | null, operator: RatingOperator) => void
+  showRatingFilter?: boolean
 }
 
-export default function FilterPanel({ assignments, search, onSearchChange, selectedTagIds, onTagToggle, refreshKey }: Props) {
+export default function FilterPanel({
+  assignments,
+  search,
+  onSearchChange,
+  selectedTagIds,
+  onTagToggle,
+  refreshKey,
+  ratingValue,
+  ratingOperator,
+  onRatingChange,
+  showRatingFilter = true,
+}: Props) {
   const [categories, setCategories] = useState<TagCategory[]>([])
   const [tags, setTags] = useState<Tag[]>([])
   const [loading, setLoading] = useState(true)
@@ -53,6 +68,59 @@ export default function FilterPanel({ assignments, search, onSearchChange, selec
         }}
       />
 
+      {/* Rating filter */}
+      {showRatingFilter && (
+        <div className="flex flex-col gap-1.5">
+          <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>Rating</p>
+          {/* Operator toggle */}
+          <div className="flex gap-1">
+            {(['gte', 'eq', 'lte'] as RatingOperator[]).map((op) => {
+              const label = op === 'gte' ? '≥' : op === 'eq' ? '=' : '≤'
+              const active = ratingValue !== null && ratingOperator === op
+              return (
+                <button
+                  key={op}
+                  onClick={() => onRatingChange(active ? null : (ratingValue ?? 3), op)}
+                  className="flex-1 py-0.5 rounded text-xs font-medium transition-colors"
+                  style={{
+                    backgroundColor: active ? 'var(--accent)' : 'var(--border)',
+                    color: active ? '#fff' : 'var(--text-secondary)',
+                    cursor: 'pointer',
+                  }}
+                >
+                  {label}
+                </button>
+              )
+            })}
+          </div>
+          {/* Star picker */}
+          <div className="flex gap-0.5">
+            {[1, 2, 3, 4, 5].map((star) => {
+              const lit =
+                ratingValue !== null &&
+                ((ratingOperator === 'gte' && star <= ratingValue) ||
+                  (ratingOperator === 'eq' && star === ratingValue) ||
+                  (ratingOperator === 'lte' && star >= ratingValue))
+              return (
+                <button
+                  key={star}
+                  onClick={() => onRatingChange(ratingValue === star ? null : star, ratingOperator)}
+                  className="flex-1 text-base py-0.5 rounded transition-colors"
+                  style={{
+                    color: lit ? '#f59e0b' : 'var(--border)',
+                    background: 'none',
+                    cursor: 'pointer',
+                  }}
+                  aria-label={`${star} star${star !== 1 ? 's' : ''}`}
+                >
+                  ★
+                </button>
+              )
+            })}
+          </div>
+        </div>
+      )}
+
       {/* Tag filters */}
       {loading ? (
         <div className="flex flex-col gap-3">
@@ -62,7 +130,7 @@ export default function FilterPanel({ assignments, search, onSearchChange, selec
                 className="h-3 w-16 rounded animate-pulse"
                 style={{ backgroundColor: 'var(--border)' }}
               />
-              <div className="flex flex-wrap gap-1.5">
+              <div className="flex flex-wrap gap-1.5 max-h-24 overflow-y-auto">
                 {[50, 65, 42].map((w) => (
                   <div
                     key={w}
@@ -84,7 +152,7 @@ export default function FilterPanel({ assignments, search, onSearchChange, selec
                 <p className="text-xs mb-1.5" style={{ color: 'var(--text-secondary)' }}>
                   {cat.name}
                 </p>
-                <div className="flex flex-wrap gap-1.5">
+                <div className="flex flex-wrap gap-1.5 max-h-24 overflow-y-auto">
                   {catTags.map((tag) => {
                     const active = selectedTagIds.has(tag.id)
                     return (

src/components/comics/ComicIssueView.tsx

@@ -0,0 +1,332 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import type { ComicIssue } from '@/types'
+import ImageLightbox from '@/components/mixed/ImageLightbox'
+import MediaTagPanel from '@/components/tags/MediaTagPanel'
+import AssignedTagBadges from '@/components/tags/AssignedTagBadges'
+
+function fileApiUrl(libraryId: string, relativePath: string): string {
+  return `/api/file?libraryId=${encodeURIComponent(libraryId)}&path=${encodeURIComponent(relativePath)}`
+}
+
+interface Props {
+  libraryId: string
+  issue: ComicIssue
+  onClose: () => void
+  onPrev?: () => void
+  onNext?: () => void
+  onTagsChanged?: () => void
+  onDeleted?: () => void
+  readOnly?: boolean
+}
+
+function pageUrl(libraryId: string, issueKey: string, pageIndex: number): string {
+  return `/api/comics/page?libraryId=${encodeURIComponent(libraryId)}&issueKey=${encodeURIComponent(issueKey)}&pageIndex=${pageIndex}`
+}
+
+export default function ComicIssueView({ libraryId, issue, onClose, onPrev, onNext, onTagsChanged, onDeleted, readOnly }: Props) {
+  const [lightboxPage, setLightboxPage] = useState<number | null>(null)
+  const [showTagPanel, setShowTagPanel] = useState(false)
+  const [tagRefreshKey, setTagRefreshKey] = useState(0)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [confirming, setConfirming] = useState(false)
+  const [deleting, setDeleting] = useState(false)
+  const issueKey = issue.item_key ?? `${libraryId}:comic_issue:${issue.id}`
+
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (lightboxPage !== null) return
+      if (e.key === 'ArrowLeft') { onPrev?.(); return }
+      if (e.key === 'ArrowRight') { onNext?.(); return }
+      if (e.key === 'Escape') {
+        if (menuOpen) { setMenuOpen(false); return }
+        if (confirming) { setConfirming(false); return }
+        if (showTagPanel) { setShowTagPanel(false); return }
+        onClose()
+      }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [onClose, onPrev, onNext, lightboxPage, showTagPanel, menuOpen, confirming])
+
+  // Close menu on outside click
+  useEffect(() => {
+    if (!menuOpen) return
+    const handler = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) setMenuOpen(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [menuOpen])
+
+  const handleDelete = async () => {
+    setDeleting(true)
+    try {
+      await fetch(`/api/comics?libraryId=${encodeURIComponent(libraryId)}&issueKey=${encodeURIComponent(issueKey)}`, { method: 'DELETE' })
+      onDeleted?.()
+    } catch {
+      setDeleting(false)
+      setConfirming(false)
+    }
+  }
+
+  const pageCount = issue.pageCount
+  const downloadUrl = fileApiUrl(libraryId, issue.filePath)
+
+  const gridRef = useRef<HTMLDivElement>(null)
+
+  return (
+    <>
+      <div
+        className="fixed inset-0 z-50 overflow-hidden"
+        style={{ backgroundColor: 'rgba(0,0,0,0.75)' }}
+        onClick={onClose}
+      >
+        {/* Floating prev/next arrows */}
+        {onPrev && !showTagPanel && (
+          <button
+            className="absolute left-4 top-1/2 -translate-y-1/2 z-10 w-10 h-10 rounded-full flex items-center justify-center transition-colors"
+            style={{ backgroundColor: 'rgba(0,0,0,0.5)', color: '#fff' }}
+            onClick={(e) => { e.stopPropagation(); onPrev() }}
+            aria-label="Previous issue"
+          >
+            ←
+          </button>
+        )}
+        {onNext && !showTagPanel && (
+          <button
+            className="absolute right-4 top-1/2 -translate-y-1/2 z-10 w-10 h-10 rounded-full flex items-center justify-center transition-colors"
+            style={{ backgroundColor: 'rgba(0,0,0,0.5)', color: '#fff' }}
+            onClick={(e) => { e.stopPropagation(); onNext() }}
+            aria-label="Next issue"
+          >
+            →
+          </button>
+        )}
+
+        <div className={`flex h-full w-full ${showTagPanel ? 'flex-col md:flex-row' : 'items-center justify-center p-4'}`}>
+          <div
+            className={`${showTagPanel ? 'flex-1 min-h-0 flex items-center justify-center p-4' : 'w-full max-w-4xl'}`}
+          >
+            <div
+              className="w-full max-w-4xl rounded-2xl overflow-hidden shadow-2xl flex flex-col"
+              style={{
+                backgroundColor: 'var(--surface)',
+                border: '1px solid var(--border)',
+                maxHeight: '90vh',
+              }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {/* Header */}
+              <div
+                className="flex items-center justify-between px-5 py-3 flex-shrink-0"
+                style={{ borderBottom: '1px solid var(--border)' }}
+              >
+                <div className="min-w-0">
+                  <p className="font-medium truncate" style={{ color: 'var(--text-primary)' }}>
+                    {issue.title}
+                  </p>
+                  <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
+                    {pageCount} {pageCount === 1 ? 'page' : 'pages'}
+                  </p>
+                </div>
+                <div className="flex items-center gap-2 ml-4 flex-shrink-0">
+                  {issue.item_key && !readOnly && !showTagPanel && (
+                    <button
+                      onClick={(e) => { e.stopPropagation(); setShowTagPanel(true) }}
+                      className="w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors"
+                      style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+                      title="Tags"
+                      aria-label="Show tags"
+                    >
+                      🏷
+                    </button>
+                  )}
+                  {/* Kebab menu */}
+                  <div className="relative" ref={menuRef}>
+                    <button
+                      onClick={(e) => { e.stopPropagation(); setMenuOpen((v) => !v) }}
+                      className="w-8 h-8 rounded-full flex items-center justify-center text-base font-bold transition-colors"
+                      style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+                      aria-label="More options"
+                      title="More options"
+                    >
+                      ⋮
+                    </button>
+                    {menuOpen && (
+                      <div
+                        className="absolute right-0 top-full mt-1 rounded-lg shadow-lg overflow-hidden z-10 min-w-[120px]"
+                        style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+                      >
+                        <a
+                          href={downloadUrl}
+                          download
+                          className="flex items-center px-3 py-2 text-xs transition-colors hover:bg-black/10"
+                          style={{ color: 'var(--text-primary)' }}
+                          onClick={(e) => { e.stopPropagation(); setMenuOpen(false) }}
+                        >
+                          Download
+                        </a>
+                        {!readOnly && (
+                          <button
+                            className="w-full text-left flex items-center px-3 py-2 text-xs transition-colors hover:bg-black/10"
+                            style={{ color: '#fca5a5' }}
+                            onClick={(e) => { e.stopPropagation(); setMenuOpen(false); setConfirming(true) }}
+                          >
+                            Delete
+                          </button>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                  <button
+                    onClick={onClose}
+                    className="w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors"
+                    style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+                    aria-label="Close"
+                  >
+                    ✕
+                  </button>
+                </div>
+              </div>
+
+              {/* Delete confirmation */}
+              {confirming && (
+                <div
+                  className="flex items-center gap-3 mx-5 mt-3 px-3 py-2.5 rounded-lg text-sm flex-shrink-0"
+                  style={{ backgroundColor: '#7f1d1d33', border: '1px solid #7f1d1d' }}
+                >
+                  <p className="flex-1 text-xs" style={{ color: '#fca5a5' }}>
+                    Permanently delete this issue and its file?
+                  </p>
+                  <button
+                    onClick={() => setConfirming(false)}
+                    className="px-2 py-1 rounded text-xs transition-colors"
+                    style={{ color: 'var(--text-secondary)' }}
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={handleDelete}
+                    disabled={deleting}
+                    className="px-2 py-1 rounded text-xs font-medium transition-colors disabled:opacity-50"
+                    style={{ backgroundColor: '#7f1d1d', color: '#fca5a5' }}
+                  >
+                    {deleting ? 'Deleting…' : 'Yes, delete'}
+                  </button>
+                </div>
+              )}
+
+              {/* Cover + tags */}
+              <div
+                className="flex gap-5 px-5 py-4 flex-shrink-0"
+                style={{ borderBottom: '1px solid var(--border)' }}
+              >
+                <div
+                  className="flex-shrink-0 rounded-lg overflow-hidden"
+                  style={{ width: 140, aspectRatio: '2/3', background: 'var(--border)' }}
+                >
+                  {issue.coverUrl ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={issue.coverUrl}
+                      alt={issue.title}
+                      className="w-full h-full object-cover"
+                    />
+                  ) : pageCount > 0 ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={pageUrl(libraryId, issueKey, 0)}
+                      alt={issue.title}
+                      className="w-full h-full object-cover"
+                    />
+                  ) : (
+                    <div
+                      className="w-full h-full flex items-center justify-center text-3xl"
+                      style={{ color: 'var(--text-secondary)' }}
+                    >
+                      📖
+                    </div>
+                  )}
+                </div>
+                <div className="flex-1 min-w-0 pt-1">
+                  <p className="text-xs font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--text-secondary)' }}>
+                    Tags
+                  </p>
+                  {issue.item_key ? (
+                    <AssignedTagBadges itemKey={issueKey} refreshKey={tagRefreshKey} />
+                  ) : (
+                    <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>No tags</p>
+                  )}
+                </div>
+              </div>
+
+              {/* Page grid */}
+              <div className="overflow-y-auto flex-1 p-4" ref={gridRef}>
+                {pageCount === 0 ? (
+                  <div
+                    className="flex items-center justify-center py-16 text-sm"
+                    style={{ color: 'var(--text-secondary)' }}
+                  >
+                    No pages found in this issue.
+                  </div>
+                ) : (
+                  <div className="grid gap-2 grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6">
+                    {Array.from({ length: pageCount }, (_, i) => (
+                      <button
+                        key={i}
+                        className="relative rounded overflow-hidden focus:outline-none focus:ring-2 focus:ring-offset-1 group"
+                        style={{ aspectRatio: '2/3', background: 'var(--border)' }}
+                        onClick={() => setLightboxPage(i)}
+                        aria-label={`Page ${i + 1}`}
+                      >
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img
+                          src={pageUrl(libraryId, issueKey, i)}
+                          alt={`Page ${i + 1}`}
+                          className="w-full h-full object-cover"
+                          loading="lazy"
+                        />
+                        <div
+                          className="absolute bottom-0 inset-x-0 py-0.5 text-center text-xs opacity-0 group-hover:opacity-100 transition-opacity"
+                          style={{ backgroundColor: 'rgba(0,0,0,0.6)', color: '#fff' }}
+                        >
+                          {i + 1}
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {showTagPanel && issue.item_key && (
+            <MediaTagPanel
+              itemKey={issueKey}
+              onHide={() => setShowTagPanel(false)}
+              onClose={onClose}
+              onTagsChanged={() => { setTagRefreshKey((k) => k + 1); onTagsChanged?.() }}
+              readOnly={readOnly}
+            />
+          )}
+        </div>
+      </div>
+
+      {lightboxPage !== null && (
+        <ImageLightbox
+          url={pageUrl(libraryId, issueKey, lightboxPage)}
+          name={`Page ${lightboxPage + 1} of ${pageCount}`}
+          onClose={() => setLightboxPage(null)}
+          onPrev={lightboxPage > 0 ? () => setLightboxPage((p) => (p ?? 1) - 1) : undefined}
+          onNext={lightboxPage < pageCount - 1 ? () => setLightboxPage((p) => (p ?? 0) + 1) : undefined}
+          itemKey={issueKey}
+          onTagsChanged={() => { setTagRefreshKey((k) => k + 1); onTagsChanged?.() }}
+          readOnly={readOnly}
+        />
+      )}
+    </>
+  )
+}

src/components/comics/ComicSeriesView.tsx

@@ -0,0 +1,233 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import type { ComicIssue, ComicSeries } from '@/types'
+import ComicIssueView from './ComicIssueView'
+import MediaTagPanel from '@/components/tags/MediaTagPanel'
+
+interface Props {
+  libraryId: string
+  series: ComicSeries
+  onClose: () => void
+  onTagsChanged?: () => void
+  readOnly?: boolean
+}
+
+export default function ComicSeriesView({ libraryId, series, onClose, onTagsChanged, readOnly }: Props) {
+  const [issues, setIssues] = useState<ComicIssue[]>([])
+  const [loading, setLoading] = useState(true)
+  const [selectedIssue, setSelectedIssue] = useState<ComicIssue | null>(null)
+  const [tagItemKey, setTagItemKey] = useState<string | null>(null)
+
+  const fetchIssues = useCallback(() => {
+    fetch(`/api/comics?libraryId=${encodeURIComponent(libraryId)}&seriesId=${encodeURIComponent(series.id)}`)
+      .then((r) => r.json())
+      .then((data: ComicIssue[]) => {
+        setIssues(data)
+        setLoading(false)
+      })
+      .catch(() => setLoading(false))
+  }, [libraryId, series.id])
+
+  useEffect(() => { fetchIssues() }, [fetchIssues])
+
+  // Escape closes tag panel first, then series view
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape' && !selectedIssue && !tagItemKey) onClose()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [onClose, selectedIssue, tagItemKey])
+
+  return (
+    <>
+      <div
+        className="fixed inset-0 z-40 overflow-hidden"
+        style={{ backgroundColor: 'rgba(0,0,0,0.75)' }}
+        onClick={onClose}
+      >
+        <div className={`flex h-full w-full ${tagItemKey ? 'flex-col md:flex-row' : 'items-center justify-center p-4'}`}>
+          <div className={tagItemKey ? 'flex-1 min-h-0 flex items-center justify-center p-4' : 'w-full max-w-3xl'}>
+            <div
+              className="w-full max-w-3xl rounded-2xl overflow-hidden shadow-2xl flex flex-col"
+              style={{
+                backgroundColor: 'var(--surface)',
+                border: '1px solid var(--border)',
+                maxHeight: '90vh',
+              }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {/* Header */}
+              <div
+                className="flex items-center justify-between px-5 py-3 flex-shrink-0"
+                style={{ borderBottom: '1px solid var(--border)' }}
+              >
+                <div className="min-w-0">
+                  <p className="font-semibold truncate" style={{ color: 'var(--text-primary)' }}>
+                    {series.title}
+                  </p>
+                  <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
+                    {series.issueCount} {series.issueCount === 1 ? 'issue' : 'issues'}
+                  </p>
+                </div>
+                <div className="flex items-center gap-2 ml-4 flex-shrink-0">
+                  {series.item_key && !readOnly && !tagItemKey && (
+                    <button
+                      onClick={(e) => { e.stopPropagation(); setTagItemKey(series.item_key!) }}
+                      className="w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors"
+                      style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+                      title="Tag series"
+                      aria-label="Tag series"
+                    >
+                      🏷
+                    </button>
+                  )}
+                  <button
+                    onClick={onClose}
+                    className="w-8 h-8 flex-shrink-0 rounded-full flex items-center justify-center text-sm transition-colors"
+                    style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+                    aria-label="Close"
+                  >
+                    ✕
+                  </button>
+                </div>
+              </div>
+
+              {/* Issue grid */}
+              <div className="overflow-y-auto flex-1 p-4">
+                {loading ? (
+                  <LoadingGrid />
+                ) : issues.length === 0 ? (
+                  <div
+                    className="flex items-center justify-center py-16 text-sm"
+                    style={{ color: 'var(--text-secondary)' }}
+                  >
+                    No issues found.
+                  </div>
+                ) : (
+                  <div className="grid gap-3 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+                    {issues.map((issue) => (
+                      <IssueCard
+                        key={issue.id}
+                        issue={issue}
+                        readOnly={readOnly}
+                        onClick={() => setSelectedIssue(issue)}
+                        onTagClick={issue.item_key && !readOnly
+                          ? () => setTagItemKey(issue.item_key!)
+                          : undefined}
+                      />
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {tagItemKey && (
+            <MediaTagPanel
+              itemKey={tagItemKey}
+              onHide={() => setTagItemKey(null)}
+              onClose={onClose}
+              onTagsChanged={onTagsChanged}
+              readOnly={readOnly}
+            />
+          )}
+        </div>
+      </div>
+
+      {selectedIssue && (
+        <ComicIssueView
+          libraryId={libraryId}
+          issue={selectedIssue}
+          onClose={() => setSelectedIssue(null)}
+          onTagsChanged={onTagsChanged}
+          readOnly={readOnly}
+        />
+      )}
+    </>
+  )
+}
+
+function IssueCard({
+  issue,
+  onClick,
+  onTagClick,
+  readOnly,
+}: {
+  issue: ComicIssue
+  onClick: () => void
+  onTagClick?: () => void
+  readOnly?: boolean
+}) {
+  return (
+    <div
+      className="relative rounded-xl overflow-hidden group"
+      style={{ border: '1px solid var(--border)', background: 'var(--surface)' }}
+    >
+      <button
+        className="text-left w-full focus:outline-none focus:ring-2"
+        onClick={onClick}
+      >
+        <div
+          className="relative w-full overflow-hidden"
+          style={{ aspectRatio: '2/3', background: 'var(--border)' }}
+        >
+          {issue.coverUrl ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={issue.coverUrl}
+              alt={issue.title}
+              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
+            />
+          ) : (
+            <div className="w-full h-full flex items-center justify-center text-3xl">📖</div>
+          )}
+          {issue.issueNumber !== null && (
+            <div
+              className="absolute top-1 left-1 px-1.5 py-0.5 rounded text-xs font-bold leading-none"
+              style={{ backgroundColor: 'rgba(0,0,0,0.7)', color: '#fff' }}
+            >
+              #{issue.issueNumber}
+            </div>
+          )}
+        </div>
+        <div className="px-2 pt-1.5 pb-1">
+          <p className="text-xs font-medium leading-tight truncate" style={{ color: 'var(--text-primary)' }}>
+            {issue.title}
+          </p>
+          <p className="text-xs mt-0.5" style={{ color: 'var(--text-secondary)' }}>
+            {issue.pageCount} {issue.pageCount === 1 ? 'pg' : 'pgs'}
+          </p>
+        </div>
+      </button>
+      {onTagClick && !readOnly && (
+        <button
+          onClick={(e) => { e.stopPropagation(); onTagClick() }}
+          className="absolute top-1 right-1 w-6 h-6 rounded-full flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity"
+          style={{ backgroundColor: 'rgba(0,0,0,0.6)', color: '#fff' }}
+          title="Tag issue"
+          aria-label="Tag issue"
+        >
+          🏷
+        </button>
+      )}
+    </div>
+  )
+}
+
+function LoadingGrid() {
+  return (
+    <div className="grid gap-3 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+      {Array.from({ length: 6 }, (_, i) => (
+        <div key={i} className="rounded-xl overflow-hidden animate-pulse" style={{ border: '1px solid var(--border)' }}>
+          <div style={{ aspectRatio: '2/3', background: 'var(--border)' }} />
+          <div className="p-2 space-y-1">
+            <div className="h-3 rounded" style={{ background: 'var(--border)', width: '80%' }} />
+            <div className="h-2 rounded" style={{ background: 'var(--border)', width: '40%' }} />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

src/components/comics/ComicsView.tsx

@@ -0,0 +1,561 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState, useMemo } from 'react'
+import type { ComicIssue, ComicSeries, RatingOperator } from '@/types'
+import { useDebounce } from '@/hooks/useDebounce'
+import ComicIssueView from './ComicIssueView'
+import FilterPanel from '@/components/FilterPanel'
+import TagSelector from '@/components/tags/TagSelector'
+
+interface Props {
+  libraryId: string
+  readOnly?: boolean
+}
+
+const PAGE_SIZE = 200
+
+export default function ComicsView({ libraryId, readOnly }: Props) {
+  const [items, setItems] = useState<(ComicIssue | ComicSeries)[]>([])
+  const [loading, setLoading] = useState(true)
+  const [loadingMore, setLoadingMore] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [page, setPage] = useState(1)
+  const [total, setTotal] = useState(0)
+  const [selectedSeries, setSelectedSeries] = useState<ComicSeries | null>(null)
+  const [seriesIssues, setSeriesIssues] = useState<ComicIssue[]>([])
+  const [seriesIssuesLoading, setSeriesIssuesLoading] = useState(false)
+  const [selectedIssue, setSelectedIssue] = useState<ComicIssue | null>(null)
+  const [selectedIssueIndex, setSelectedIssueIndex] = useState<number | null>(null)
+  const [tagPanel, setTagPanel] = useState<{ itemKey: string; title: string } | null>(null)
+  const [search, setSearch] = useState('')
+  const [selectedTagIds, setSelectedTagIds] = useState<Set<string>>(new Set())
+  const [assignments, setAssignments] = useState<Record<string, string[]>>({})
+  const [ratingValue, setRatingValue] = useState<number | null>(null)
+  const [ratingOperator, setRatingOperator] = useState<RatingOperator>('gte')
+  const debouncedSearch = useDebounce(search, 200)
+  const [seriesIssueMeta, setSeriesIssueMeta] = useState<
+    Record<string, { tagIds: string[]; issueTitles: string[] }>
+  >({})
+  const [filterRefreshKey, setFilterRefreshKey] = useState(0)
+  const [showFilters, setShowFilters] = useState(
+    () => typeof window !== 'undefined' && window.innerWidth >= 768
+  )
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const sentinelRef = useRef<HTMLDivElement | null>(null)
+
+  const toggleTag = (tagId: string) =>
+    setSelectedTagIds((prev) => {
+      const next = new Set(prev)
+      next.has(tagId) ? next.delete(tagId) : next.add(tagId)
+      return next
+    })
+
+  const fetchItems = useCallback((pageNum: number, searchVal: string, replace: boolean) => {
+    const params = new URLSearchParams({
+      libraryId,
+      page: String(pageNum),
+      pageSize: String(PAGE_SIZE),
+    })
+    if (searchVal) params.set('search', searchVal)
+    if (pageNum === 1) setLoading(true)
+    else setLoadingMore(true)
+    fetch(`/api/comics?${params}`)
+      .then((r) => r.json())
+      .then((data: { items: (ComicIssue | ComicSeries)[]; total: number }) => {
+        setItems((prev) => (replace ? data.items : [...prev, ...data.items]))
+        setTotal(data.total)
+        if (pageNum === 1) setLoading(false)
+        else setLoadingMore(false)
+      })
+      .catch(() => {
+        setError('Failed to load comics')
+        setLoading(false)
+      })
+  }, [libraryId])
+
+  useEffect(() => { fetchItems(1, '', true) }, [fetchItems])
+
+  // Fetch issues when a series is selected
+  useEffect(() => {
+    if (!selectedSeries) { setSeriesIssues([]); return }
+    setSeriesIssuesLoading(true)
+    fetch(`/api/comics?libraryId=${encodeURIComponent(libraryId)}&seriesId=${encodeURIComponent(selectedSeries.id)}`)
+      .then((r) => r.json())
+      .then((data: ComicIssue[]) => { setSeriesIssues(data); setSeriesIssuesLoading(false) })
+      .catch(() => setSeriesIssuesLoading(false))
+  }, [selectedSeries, libraryId])
+
+  // IntersectionObserver: load next page when sentinel scrolls into view
+  useEffect(() => {
+    const sentinel = sentinelRef.current
+    if (!sentinel || items.length >= total || total === 0) return
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !loadingMore) {
+          const next = page + 1
+          setPage(next)
+          fetchItems(next, search, false)
+        }
+      },
+      { rootMargin: '400px' }
+    )
+    observer.observe(sentinel)
+    return () => observer.disconnect()
+  }, [items.length, total, loadingMore, page, search, fetchItems])
+
+  const handleSearchChange = useCallback((val: string) => {
+    setSearch(val)
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    debounceRef.current = setTimeout(() => {
+      setPage(1)
+      fetchItems(1, val, true)
+    }, 300)
+  }, [fetchItems])
+
+  const fetchAssignments = useCallback(() => {
+    fetch(`/api/tags/library-assignments?libraryId=${encodeURIComponent(libraryId)}`)
+      .then((r) => r.json())
+      .then(setAssignments)
+      .catch(() => {})
+  }, [libraryId])
+
+  useEffect(() => { fetchAssignments() }, [fetchAssignments])
+
+  const fetchSeriesIssueMeta = useCallback(() => {
+    fetch(`/api/comics/series-issue-tags?libraryId=${encodeURIComponent(libraryId)}`)
+      .then((r) => r.json())
+      .then(setSeriesIssueMeta)
+      .catch(() => {})
+  }, [libraryId])
+
+  useEffect(() => { fetchSeriesIssueMeta() }, [fetchSeriesIssueMeta])
+
+  const onTagsChanged = useCallback(() => {
+    setFilterRefreshKey((k) => k + 1)
+    fetchAssignments()
+    fetchSeriesIssueMeta()
+  }, [fetchAssignments, fetchSeriesIssueMeta])
+
+  const handleRatingChange = (value: number | null, operator: RatingOperator) => {
+    if (value === ratingValue && operator === ratingOperator) {
+      setRatingValue(null)
+    } else {
+      setRatingValue(value)
+      setRatingOperator(operator)
+    }
+  }
+
+  const filtered = useMemo(() => items.filter((item) => {
+    const isSeries = 'issueCount' in item
+    const series = isSeries ? (item as ComicSeries) : null
+    const issue = isSeries ? null : (item as ComicIssue)
+
+    if (series) {
+      const meta = seriesIssueMeta[series.item_key ?? ''] ?? { tagIds: [], issueTitles: [] }
+
+      if (debouncedSearch) {
+        const q = debouncedSearch.toLowerCase()
+        const titleMatch = series.title.toLowerCase().includes(q)
+        const issueMatch = meta.issueTitles.some((t) => t.toLowerCase().includes(q))
+        const aiMatch = series.aiDescription?.toLowerCase().includes(q) ?? false
+        const textMatch = series.extractedText?.toLowerCase().includes(q) ?? false
+        const translatedMatch = series.extractedTextTranslated?.toLowerCase().includes(q) ?? false
+        if (!titleMatch && !issueMatch && !aiMatch && !textMatch && !translatedMatch) return false
+      }
+
+      if (selectedTagIds.size > 0) {
+        const seriesTags = assignments[series.item_key ?? ''] ?? []
+        const allTags = [...new Set([...seriesTags, ...meta.tagIds])]
+        if (![...selectedTagIds].every((id) => allTags.includes(id))) return false
+      }
+
+      if (ratingValue !== null) {
+        const r = series.userRating
+        if (r === null) return false
+        if (ratingOperator === 'gte' && r < ratingValue) return false
+        if (ratingOperator === 'eq'  && r !== ratingValue) return false
+        if (ratingOperator === 'lte' && r > ratingValue) return false
+      }
+
+      return true
+    }
+
+    // Standalone issue
+    if (debouncedSearch) {
+      const q = debouncedSearch.toLowerCase()
+      if (![issue!.title, issue!.aiDescription, issue!.extractedText, issue!.extractedTextTranslated]
+          .some((f) => f?.toLowerCase().includes(q))) return false
+    }
+    if (selectedTagIds.size > 0) {
+      const tags = assignments[issue!.item_key ?? ''] ?? []
+      if (![...selectedTagIds].every((id) => tags.includes(id))) return false
+    }
+    if (ratingValue !== null) {
+      const r = issue!.userRating
+      if (r === null) return false
+      if (ratingOperator === 'gte' && r < ratingValue) return false
+      if (ratingOperator === 'eq'  && r !== ratingValue) return false
+      if (ratingOperator === 'lte' && r > ratingValue) return false
+    }
+    return true
+  }), [items, debouncedSearch, selectedTagIds, assignments, seriesIssueMeta, ratingValue, ratingOperator])
+
+  // Flat list of issues at the current navigation level for prev/next
+  const filteredIssues: ComicIssue[] = selectedSeries
+    ? seriesIssues
+    : filtered.filter((item): item is ComicIssue => !('issueCount' in item))
+
+  const filtersActive = search !== '' || selectedTagIds.size > 0 || ratingValue !== null
+
+  return (
+    <>
+      <div className="flex items-center gap-2 mb-4">
+        <button
+          onClick={() => setShowFilters((v) => !v)}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+          style={{
+            backgroundColor: (showFilters || filtersActive) ? 'var(--accent)' : 'var(--surface)',
+            color: (showFilters || filtersActive) ? '#fff' : 'var(--text-secondary)',
+            border: '1px solid var(--border)',
+          }}
+          aria-label={showFilters ? 'Hide filters' : 'Show filters'}
+        >
+          Filters{filtersActive ? ' ●' : ''}
+        </button>
+      </div>
+
+      <div className="flex flex-col md:flex-row gap-6 md:items-start">
+        {showFilters && (
+          <div className="w-full md:w-52 md:flex-shrink-0">
+            <FilterPanel
+              libraryId={libraryId}
+              assignments={assignments}
+              search={search}
+              onSearchChange={handleSearchChange}
+              selectedTagIds={selectedTagIds}
+              onTagToggle={toggleTag}
+              refreshKey={filterRefreshKey}
+              ratingValue={ratingValue}
+              ratingOperator={ratingOperator}
+              onRatingChange={handleRatingChange}
+            />
+          </div>
+        )}
+
+        <div className="flex-1 min-w-0">
+          {/* Breadcrumb when inside a series */}
+          {selectedSeries && (
+            <div className="flex items-center gap-2 mb-4 text-sm">
+              <button
+                onClick={() => { setSelectedSeries(null); setSeriesIssues([]); setSearch('') }}
+                className="transition-colors"
+                style={{ color: 'var(--accent)' }}
+              >
+                All Comics
+              </button>
+              <span style={{ color: 'var(--text-secondary)' }}>/</span>
+              <span className="font-medium" style={{ color: 'var(--text-primary)' }}>
+                {selectedSeries.title}
+              </span>
+            </div>
+          )}
+
+          {loading ? (
+            <LoadingGrid />
+          ) : error ? (
+            <div
+              className="rounded-lg border p-8 text-center"
+              style={{ borderColor: 'var(--border)', color: 'var(--text-secondary)' }}
+            >
+              {error}
+            </div>
+          ) : items.length === 0 ? (
+            <div
+              className="rounded-lg border p-12 text-center"
+              style={{ borderColor: 'var(--border)', color: 'var(--text-secondary)' }}
+            >
+              <p className="text-lg mb-1">No comics found</p>
+              <p className="text-sm">Add .cbz files or folders of .cbz files to this library and scan.</p>
+            </div>
+          ) : (
+            <>
+              {!selectedSeries && total > PAGE_SIZE && (
+                <p className="text-xs mb-3" style={{ color: 'var(--text-secondary)' }}>
+                  Showing {filtered.length.toLocaleString()} of {total.toLocaleString()}
+                </p>
+              )}
+              {seriesIssuesLoading ? (
+                <LoadingGrid />
+              ) : (
+                <div className="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+                  {selectedSeries
+                    ? seriesIssues.map((issue) => (
+                        <IssueCard
+                          key={issue.id}
+                          issue={issue}
+                          readOnly={readOnly}
+                          onClick={() => { setSelectedIssue(issue); setSelectedIssueIndex(seriesIssues.indexOf(issue)) }}
+                          onTagClick={issue.item_key && !readOnly
+                            ? () => setTagPanel({ itemKey: issue.item_key!, title: issue.title })
+                            : undefined}
+                        />
+                      ))
+                    : filtered.map((item) =>
+                        'issueCount' in item ? (
+                          <SeriesCard
+                            key={item.id}
+                            series={item as ComicSeries}
+                            readOnly={readOnly}
+                            onClick={() => { setSelectedSeries(item as ComicSeries); setSearch('') }}
+                            onTagClick={(item as ComicSeries).item_key && !readOnly
+                              ? () => setTagPanel({ itemKey: (item as ComicSeries).item_key!, title: item.title })
+                              : undefined}
+                          />
+                        ) : (
+                          <IssueCard
+                            key={item.id}
+                            issue={item as ComicIssue}
+                            readOnly={readOnly}
+                            onClick={() => {
+                              const issue = item as ComicIssue
+                              setSelectedIssue(issue)
+                              setSelectedIssueIndex(filteredIssues.indexOf(issue))
+                            }}
+                            onTagClick={(item as ComicIssue).item_key && !readOnly
+                              ? () => setTagPanel({ itemKey: (item as ComicIssue).item_key!, title: item.title })
+                              : undefined}
+                          />
+                        )
+                      )
+                  }
+                </div>
+              )}
+              {!selectedSeries && (
+                <>
+                  <div ref={sentinelRef} style={{ height: 1 }} aria-hidden />
+                  {loadingMore && <LoadingMore />}
+                </>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Tag panel modal */}
+      {tagPanel && (
+        <div
+          className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4"
+          style={{ backgroundColor: 'rgba(0,0,0,0.6)' }}
+          onClick={(e) => { if (e.target === e.currentTarget) setTagPanel(null) }}
+        >
+          <div
+            className="w-full max-w-md rounded-2xl shadow-2xl overflow-hidden"
+            style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+          >
+            <div
+              className="flex items-center justify-between px-5 py-4"
+              style={{ borderBottom: '1px solid var(--border)' }}
+            >
+              <div className="min-w-0">
+                <p className="text-xs font-semibold uppercase tracking-wider mb-0.5" style={{ color: 'var(--text-secondary)' }}>
+                  Tags
+                </p>
+                <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>
+                  {tagPanel.title}
+                </p>
+              </div>
+              <button
+                onClick={() => setTagPanel(null)}
+                className="ml-4 w-8 h-8 flex-shrink-0 rounded-full flex items-center justify-center text-sm transition-colors"
+                style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+                aria-label="Close"
+              >
+                ✕
+              </button>
+            </div>
+            <div className="px-5 py-4">
+              <TagSelector
+                itemKey={tagPanel.itemKey}
+                onTagsChanged={onTagsChanged}
+                readOnly={readOnly}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {selectedIssue && (
+        <ComicIssueView
+          libraryId={libraryId}
+          issue={selectedIssue}
+          onClose={() => { setSelectedIssue(null); setSelectedIssueIndex(null) }}
+          onPrev={selectedIssueIndex !== null && selectedIssueIndex > 0
+            ? () => { setSelectedIssue(filteredIssues[selectedIssueIndex - 1]); setSelectedIssueIndex(selectedIssueIndex - 1) }
+            : undefined}
+          onNext={selectedIssueIndex !== null && selectedIssueIndex < filteredIssues.length - 1
+            ? () => { setSelectedIssue(filteredIssues[selectedIssueIndex + 1]); setSelectedIssueIndex(selectedIssueIndex + 1) }
+            : undefined}
+          onTagsChanged={onTagsChanged}
+          onDeleted={() => {
+            setSelectedIssue(null)
+            setSelectedIssueIndex(null)
+            fetchItems(1, search, true)
+            fetchAssignments()
+            if (selectedSeries) {
+              fetch(`/api/comics?libraryId=${encodeURIComponent(libraryId)}&seriesId=${encodeURIComponent(selectedSeries.id)}`)
+                .then((r) => r.json())
+                .then((data: ComicIssue[]) => setSeriesIssues(data))
+                .catch(() => {})
+            }
+          }}
+          readOnly={readOnly}
+        />
+      )}
+    </>
+  )
+}
+
+function SeriesCard({
+  series,
+  onClick,
+  onTagClick,
+  readOnly,
+}: {
+  series: ComicSeries
+  onClick: () => void
+  onTagClick?: () => void
+  readOnly?: boolean
+}) {
+  return (
+    <div
+      className="relative rounded-xl overflow-hidden group"
+      style={{ border: '1px solid var(--border)', background: 'var(--surface)' }}
+    >
+      <button className="text-left w-full focus:outline-none focus:ring-2" onClick={onClick}>
+        <div
+          className="relative w-full overflow-hidden"
+          style={{ aspectRatio: '2/3', background: 'var(--border)' }}
+        >
+          {series.coverUrl ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={series.coverUrl}
+              alt={series.title}
+              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
+            />
+          ) : (
+            <div className="w-full h-full flex items-center justify-center text-4xl">📚</div>
+          )}
+          <div
+            className="absolute top-1 right-1 px-1.5 py-0.5 rounded text-xs font-bold leading-none"
+            style={{ backgroundColor: 'rgba(0,0,0,0.7)', color: '#fff' }}
+          >
+            {series.issueCount}
+          </div>
+        </div>
+        <div className="px-2 pt-1.5 pb-1">
+          <p className="text-xs font-medium leading-tight truncate" style={{ color: 'var(--text-primary)' }}>
+            {series.title}
+          </p>
+          <p className="text-xs mt-0.5" style={{ color: 'var(--text-secondary)' }}>
+            {series.issueCount} {series.issueCount === 1 ? 'issue' : 'issues'}
+          </p>
+        </div>
+      </button>
+      {onTagClick && !readOnly && (
+        <button
+          onClick={(e) => { e.stopPropagation(); onTagClick() }}
+          className="absolute top-1 left-1 w-6 h-6 rounded-full flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity"
+          style={{ backgroundColor: 'rgba(0,0,0,0.6)', color: '#fff' }}
+          title="Tag series"
+          aria-label="Tag series"
+        >
+          🏷
+        </button>
+      )}
+    </div>
+  )
+}
+
+function IssueCard({
+  issue,
+  onClick,
+  onTagClick,
+  readOnly,
+}: {
+  issue: ComicIssue
+  onClick: () => void
+  onTagClick?: () => void
+  readOnly?: boolean
+}) {
+  return (
+    <div
+      className="relative rounded-xl overflow-hidden group"
+      style={{ border: '1px solid var(--border)', background: 'var(--surface)' }}
+    >
+      <button className="text-left w-full focus:outline-none focus:ring-2" onClick={onClick}>
+        <div
+          className="relative w-full overflow-hidden"
+          style={{ aspectRatio: '2/3', background: 'var(--border)' }}
+        >
+          {issue.coverUrl ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={issue.coverUrl}
+              alt={issue.title}
+              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
+            />
+          ) : (
+            <div className="w-full h-full flex items-center justify-center text-4xl">📖</div>
+          )}
+        </div>
+        <div className="px-2 pt-1.5 pb-1">
+          <p className="text-xs font-medium leading-tight truncate" style={{ color: 'var(--text-primary)' }}>
+            {issue.title}
+          </p>
+          <p className="text-xs mt-0.5" style={{ color: 'var(--text-secondary)' }}>
+            {issue.pageCount} {issue.pageCount === 1 ? 'pg' : 'pgs'}
+          </p>
+        </div>
+      </button>
+      {onTagClick && !readOnly && (
+        <button
+          onClick={(e) => { e.stopPropagation(); onTagClick() }}
+          className="absolute top-1 left-1 w-6 h-6 rounded-full flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity"
+          style={{ backgroundColor: 'rgba(0,0,0,0.6)', color: '#fff' }}
+          title="Tag issue"
+          aria-label="Tag issue"
+        >
+          🏷
+        </button>
+      )}
+    </div>
+  )
+}
+
+function LoadingMore() {
+  return (
+    <div className="flex justify-center py-6">
+      <div
+        className="w-6 h-6 rounded-full border-2 animate-spin"
+        style={{ borderColor: 'var(--border)', borderTopColor: 'var(--accent)' }}
+      />
+    </div>
+  )
+}
+
+function LoadingGrid() {
+  return (
+    <div className="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+      {Array.from({ length: 12 }, (_, i) => (
+        <div key={i} className="rounded-xl overflow-hidden animate-pulse" style={{ border: '1px solid var(--border)' }}>
+          <div style={{ aspectRatio: '2/3', background: 'var(--border)' }} />
+          <div className="p-2 space-y-1">
+            <div className="h-3 rounded" style={{ background: 'var(--border)', width: '75%' }} />
+            <div className="h-2 rounded" style={{ background: 'var(--border)', width: '40%' }} />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

src/components/games/GameDetailModal.tsx

@@ -2,7 +2,8 @@
 
 import { useEffect, useRef, useState, useCallback } from 'react'
 import type { Game, GameFile, GamePlatform } from '@/types'
-import TagSelector from '@/components/tags/TagSelector'
+import MediaTagPanel from '@/components/tags/MediaTagPanel'
+import AssignedTagBadges from '@/components/tags/AssignedTagBadges'
 
 // Import SVG icons
 import WindowsIcon from '@/app/icons/windows.svg'
@@ -29,12 +30,15 @@ interface Props {
   game: Game
   libraryId: string
   onClose: () => void
+  onPrev?: () => void
+  onNext?: () => void
   onTagsChanged?: () => void
   onCoverUploaded?: () => void
   onDeleted?: (gameId: string) => void
+  readOnly?: boolean
 }
 
-export default function GameDetailModal({ game, libraryId, onClose, onTagsChanged, onCoverUploaded, onDeleted }: Props) {
+export default function GameDetailModal({ game, libraryId, onClose, onPrev, onNext, onTagsChanged, onCoverUploaded, onDeleted, readOnly }: Props) {
   const overlayRef = useRef<HTMLDivElement>(null)
   const menuRef = useRef<HTMLDivElement>(null)
   const screenshotInputRef = useRef<HTMLInputElement>(null)
@@ -46,6 +50,9 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
   const [renameName, setRenameName] = useState('')
   const [renameError, setRenameError] = useState<string | null>(null)
   const [renameSaving, setRenameSaving] = useState(false)
+  const [showTagPanel, setShowTagPanel] = useState(false)
+  const [tagRefreshKey, setTagRefreshKey] = useState(0)
+  const [aiDescription, setAiDescription] = useState<string | null>(null)
 
   // Screenshots state
   const [screenshots, setScreenshots] = useState<Array<{ filename: string; url: string; thumbnailUrl: string }>>([])
@@ -54,6 +61,8 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
   const [deletingScreenshot, setDeletingScreenshot] = useState<string | null>(null)
   const [uploadingCount, setUploadingCount] = useState(0)
 
+  const smallBtn = 'w-7 h-7 rounded-full flex items-center justify-center transition-colors flex-shrink-0'
+
   const fetchScreenshots = useCallback(() => {
     setScreenshotsLoading(true)
     fetch(`/api/game-screenshots?libraryId=${encodeURIComponent(libraryId)}&gameId=${encodeURIComponent(game.id)}`)
@@ -65,6 +74,14 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
 
   useEffect(() => { fetchScreenshots() }, [fetchScreenshots])
 
+  useEffect(() => {
+    if (!game.item_key) return
+    fetch(`/api/ai-tagging/fields?itemKey=${encodeURIComponent(game.item_key)}`)
+      .then((r) => r.json())
+      .then((d: { aiDescription: string | null }) => setAiDescription(d.aiDescription ?? null))
+      .catch(() => {})
+  }, [game.item_key])
+
   const handleScreenshotUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = Array.from(e.target.files ?? [])
     if (files.length === 0) return
@@ -106,11 +123,14 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
         if (e.key === 'ArrowRight') { setLightboxIndex((i) => (i! < screenshots.length - 1 ? i! + 1 : i)); return }
         return
       }
+      if (e.key === 'ArrowLeft') { onPrev?.(); return }
+      if (e.key === 'ArrowRight') { onNext?.(); return }
       if (e.key === 'Escape') {
         if (menuOpen) { setMenuOpen(false); return }
         if (confirming) { setConfirming(false); return }
         if (renaming) { setRenaming(false); return }
         if (editingImages) { setEditingImages(false); return }
+        if (showTagPanel) { setShowTagPanel(false); return }
         onClose()
       }
     }
@@ -120,7 +140,7 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
       document.removeEventListener('keydown', handleKey)
       document.body.style.overflow = ''
     }
-  }, [onClose, menuOpen, editingImages, confirming, renaming, lightboxIndex, screenshots.length])
+  }, [onClose, onPrev, onNext, menuOpen, editingImages, confirming, renaming, showTagPanel, lightboxIndex, screenshots.length])
 
   // Close menu on outside click
   useEffect(() => {
@@ -153,306 +173,372 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
   return (
     <div
       ref={overlayRef}
-      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      className="fixed inset-0 z-50 overflow-hidden"
-      style={{ backgroundColor: 'rgba(0,0,0,0.75)' }}
+      style={{ backgroundColor: 'rgba(0,0,0,0.75)', height: '100vh' }}
       onClick={handleOverlayClick}
     >
-      <div
+      {/* Outer flex — row on md+, col on mobile when panel open */}
-        className="relative w-full max-w-lg rounded-2xl overflow-hidden shadow-2xl"
+      <div className={`flex h-full w-full ${showTagPanel ? 'flex-col md:flex-row' : ''}`}>
-        style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+
-      >
+        {/* ── Left pane — relative container for floating controls ── */}
-        {editingImages ? (
+        <div className="flex-1 min-h-0 min-w-0 relative" onClick={() => onClose()}>
-          <ImageEditor
+          {/* Scrollable card area */}
-            game={game}
+          <div className="h-full overflow-y-auto flex items-center justify-center p-4">
-            libraryId={libraryId}
+          <div
-            onBack={() => setEditingImages(false)}
+            className="w-full max-w-lg rounded-2xl overflow-hidden shadow-2xl"
-            onUploaded={onCoverUploaded}
+            style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
-          />
+            onClick={(e) => e.stopPropagation()}
-        ) : (
+          >
-          <>
+            {editingImages ? (
-            {/* Close button */}
+              <ImageEditor
+                game={game}
+                libraryId={libraryId}
+                onBack={() => setEditingImages(false)}
+                onUploaded={onCoverUploaded}
+              />
+            ) : (
+              <>
+
+                {/* Hero image */}
+                <div className="w-full" style={{ backgroundColor: 'var(--border)' }}>
+                  {heroImage ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img src={heroImage} alt={`${game.title} cover`} className="w-full object-cover max-h-64" />
+                  ) : (
+                    <div className="h-40 flex items-center justify-center text-5xl">🎮</div>
+                  )}
+                </div>
+
+                {/* Info */}
+                <div className="p-5">
+                  {/* Title row with kebab menu */}
+                  <div className="flex items-center gap-2 mb-2">
+                    <h2 className="text-lg font-semibold flex-1 min-w-0" style={{ color: 'var(--text-primary)' }}>
+                      {game.title}
+                    </h2>
+
+                    {/* Kebab menu */}
+                    {!readOnly && <div className="relative flex-shrink-0" ref={menuRef}>
+                      <button
+                        onClick={() => setMenuOpen((o) => !o)}
+                        className="w-7 h-7 rounded-lg flex items-center justify-center transition-colors"
+                        style={{ color: 'var(--text-secondary)', backgroundColor: 'transparent' }}
+                        onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
+                        onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
+                        aria-label="More options"
+                      >
+                        ⋮
+                      </button>
+                      {menuOpen && (
+                        <div
+                          className="absolute right-0 top-full mt-1 rounded-lg shadow-lg overflow-hidden z-20 min-w-max"
+                          style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+                        >
+                          <button
+                            onClick={() => { setMenuOpen(false); setEditingImages(true) }}
+                            className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
+                            style={{ color: 'var(--text-primary)' }}
+                            onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
+                            onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
+                          >
+                            Edit images
+                          </button>
+                          <button
+                            onClick={() => {
+                              setMenuOpen(false)
+                              setRenameName(decodeURIComponent(game.id))
+                              setRenameError(null)
+                              setRenaming(true)
+                            }}
+                            className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
+                            style={{ color: 'var(--text-primary)' }}
+                            onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
+                            onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
+                          >
+                            Rename folder
+                          </button>
+                          {onDeleted && (
+                            <button
+                              onClick={() => { setMenuOpen(false); setConfirming(true) }}
+                              className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
+                              style={{ color: '#fca5a5' }}
+                              onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
+                              onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
+                            >
+                              Delete game
+                            </button>
+                          )}
+                        </div>
+                      )}
+                    </div>}
+                  </div>
+
+                  {/* AI description (read-only) */}
+                  {aiDescription && (
+                    <p className="text-sm mb-3" style={{ color: 'var(--text-secondary)' }}>
+                      {aiDescription}
+                    </p>
+                  )}
+
+                  {/* Rename inline input */}
+                  {renaming && (
+                    <div className="flex flex-col gap-2 mb-4">
+                      <div className="flex gap-2">
+                        <input
+                          type="text"
+                          value={renameName}
+                          onChange={(e) => setRenameName(e.target.value)}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                              const trimmed = renameName.trim()
+                              if (!trimmed) return
+                              setRenameSaving(true)
+                              setRenameError(null)
+                              fetch('/api/rename', {
+                                method: 'POST',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify({ libraryId, oldPath: decodeURIComponent(game.id), newName: trimmed, itemType: 'game' }),
+                              })
+                                .then(async (res) => {
+                                  if (res.status === 409) { setRenameError((await res.json()).error); return }
+                                  if (!res.ok) throw new Error()
+                                  setRenaming(false)
+                                  onCoverUploaded?.() // triggers refetch
+                                })
+                                .catch(() => setRenameError('Rename failed'))
+                                .finally(() => setRenameSaving(false))
+                            }
+                            if (e.key === 'Escape') setRenaming(false)
+                          }}
+                          className="flex-1 px-3 py-1.5 rounded-lg text-sm min-w-0"
+                          style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)', border: '1px solid var(--border)' }}
+                          autoFocus
+                        />
+                        <button
+                          onClick={() => setRenaming(false)}
+                          className="px-2 py-1.5 rounded-lg text-sm transition-colors"
+                          style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
+                        >
+                          Cancel
+                        </button>
+                        <button
+                          onClick={() => {
+                            const trimmed = renameName.trim()
+                            if (!trimmed) return
+                            setRenameSaving(true)
+                            setRenameError(null)
+                            fetch('/api/rename', {
+                              method: 'POST',
+                              headers: { 'Content-Type': 'application/json' },
+                              body: JSON.stringify({ libraryId, oldPath: decodeURIComponent(game.id), newName: trimmed, itemType: 'game' }),
+                            })
+                              .then(async (res) => {
+                                if (res.status === 409) { setRenameError((await res.json()).error); return }
+                                if (!res.ok) throw new Error()
+                                setRenaming(false)
+                                onCoverUploaded?.()
+                              })
+                              .catch(() => setRenameError('Rename failed'))
+                              .finally(() => setRenameSaving(false))
+                          }}
+                          disabled={renameSaving}
+                          className="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
+                          style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
+                        >
+                          {renameSaving ? '…' : 'Rename'}
+                        </button>
+                      </div>
+                      {renameError && <p className="text-xs" style={{ color: '#fca5a5' }}>{renameError}</p>}
+                    </div>
+                  )}
+
+                  {/* Delete confirmation banner */}
+                  {confirming && (
+                    <div
+                      className="flex items-center gap-3 mb-4 px-3 py-2.5 rounded-lg text-sm"
+                      style={{ backgroundColor: '#7f1d1d33', border: '1px solid #7f1d1d' }}
+                    >
+                      <p className="flex-1 text-xs" style={{ color: '#fca5a5' }}>
+                        Permanently delete this game and all its files?
+                      </p>
+                      <button
+                        onClick={() => setConfirming(false)}
+                        className="text-xs px-2 py-1 rounded flex-shrink-0 transition-colors"
+                        style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
+                        onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
+                        onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
+                      >
+                        Cancel
+                      </button>
+                      <button
+                        onClick={() => {
+                          setDeleting(true)
+                          fetch(`/api/games?libraryId=${encodeURIComponent(libraryId)}&gameId=${encodeURIComponent(game.id)}`, { method: 'DELETE' })
+                            .then(() => onDeleted!(game.id))
+                            .catch(() => setDeleting(false))
+                        }}
+                        disabled={deleting}
+                        className="text-xs px-2 py-1 rounded flex-shrink-0 transition-colors disabled:opacity-50"
+                        style={{ backgroundColor: '#7f1d1d', color: '#fca5a5' }}
+                        onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = '#991b1b')}
+                        onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = '#7f1d1d')}
+                      >
+                        {deleting ? 'Deleting…' : 'Yes, delete'}
+                      </button>
+                    </div>
+                  )}
+
+                  {/* Assigned tags (read-only) above download */}
+                  {game.item_key && (
+                    <div className="mb-3">
+                      <AssignedTagBadges itemKey={game.item_key} refreshKey={tagRefreshKey} />
+                    </div>
+                  )}
+
+                  <DownloadButton gameFiles={game.gameFiles} clientPlatform={clientPlatform} downloadUrl={fileDownloadUrl} />
+
+                  {/* Screenshots */}
+                  <div className="mt-4 pt-4" style={{ borderTop: '1px solid var(--border)' }}>
+                    <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--text-secondary)' }}>
+                      Screenshots
+                    </p>
+                    <div className="flex gap-2 overflow-x-auto pb-1" style={{ scrollbarWidth: 'thin' }}>
+                      {screenshotsLoading && screenshots.length === 0 ? (
+                        <div className="flex-shrink-0 w-36 aspect-video rounded-lg animate-pulse" style={{ backgroundColor: 'var(--border)' }} />
+                      ) : (
+                        <>
+                          {screenshots.map((shot, idx) => (
+                            <div
+                              key={shot.filename}
+                              className="group relative flex-shrink-0 w-36 aspect-video rounded-lg overflow-hidden cursor-pointer"
+                              style={{ backgroundColor: 'var(--border)' }}
+                              onClick={() => setLightboxIndex(idx)}
+                            >
+                              {/* eslint-disable-next-line @next/next/no-img-element */}
+                              <img src={shot.thumbnailUrl} alt={`Screenshot ${idx + 1}`} className="w-full h-full object-cover" />
+                              {deletingScreenshot !== shot.filename && (
+                                <button
+                                  onClick={(e) => { e.stopPropagation(); handleDeleteScreenshot(shot.filename) }}
+                                  className="absolute top-1 right-1 w-5 h-5 rounded-full flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity"
+                                  style={{ backgroundColor: 'rgba(0,0,0,0.7)', color: '#fff' }}
+                                  aria-label="Delete screenshot"
+                                >
+                                  ✕
+                                </button>
+                              )}
+                              {deletingScreenshot === shot.filename && (
+                                <div className="absolute inset-0 flex items-center justify-center" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
+                                  <span className="text-xs text-white">Deleting…</span>
+                                </div>
+                              )}
+                            </div>
+                          ))}
+                          {Array.from({ length: uploadingCount }).map((_, i) => (
+                            <div
+                              key={`uploading-${i}`}
+                              className="flex-shrink-0 w-36 aspect-video rounded-lg flex items-center justify-center animate-pulse"
+                              style={{ backgroundColor: 'var(--border)' }}
+                            >
+                              <span className="text-xs" style={{ color: 'var(--text-secondary)' }}>Uploading…</span>
+                            </div>
+                          ))}
+                          <button
+                            onClick={() => screenshotInputRef.current?.click()}
+                            className="flex-shrink-0 w-36 aspect-video rounded-lg flex items-center justify-center border-2 border-dashed transition-colors"
+                            style={{ borderColor: 'var(--border)', color: 'var(--text-secondary)' }}
+                            onMouseEnter={(e) => {
+                              ;(e.currentTarget as HTMLElement).style.borderColor = 'var(--accent)'
+                              ;(e.currentTarget as HTMLElement).style.color = 'var(--accent)'
+                            }}
+                            onMouseLeave={(e) => {
+                              ;(e.currentTarget as HTMLElement).style.borderColor = 'var(--border)'
+                              ;(e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
+                            }}
+                            aria-label="Add screenshot"
+                          >
+                            <span className="text-xl">+</span>
+                          </button>
+                        </>
+                      )}
+                    </div>
+                    <input
+                      ref={screenshotInputRef}
+                      type="file"
+                      multiple
+                      accept="image/*"
+                      className="hidden"
+                      onChange={handleScreenshotUpload}
+                    />
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+          </div>
+
+          {/* Floating controls — tag + close */}
+          <div className="absolute top-4 right-4 z-10 flex items-center gap-1.5" onClick={(e) => e.stopPropagation()}>
+            {game.item_key && !showTagPanel && (
+              <button
+                onClick={() => setShowTagPanel(true)}
+                className={smallBtn}
+                style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
+                onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)')}
+                onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)')}
+                aria-label="Show tags"
+                title="Tags"
+              >
+                🏷
+              </button>
+            )}
             <button
               onClick={onClose}
-              className="absolute top-3 right-3 z-10 w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors"
+              className={smallBtn}
-              style={{ backgroundColor: 'rgba(0,0,0,0.5)', color: 'var(--text-primary)' }}
+              style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
-              onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.8)')}
+              onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)')}
-              onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.5)')}
+              onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)')}
               aria-label="Close"
             >
               ✕
             </button>
+          </div>
 
-            {/* Hero image */}
+          {/* Prev / Next */}
-            <div className="w-full" style={{ backgroundColor: 'var(--border)' }}>
+          {onPrev && (
-              {heroImage ? (
+            <button
-                // eslint-disable-next-line @next/next/no-img-element
+              onClick={(e) => { e.stopPropagation(); onPrev() }}
-                <img src={heroImage} alt={`${game.title} cover`} className="w-full object-cover max-h-64" />
+              className="absolute left-2 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
-              ) : (
+              style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
-                <div className="h-40 flex items-center justify-center text-5xl">🎮</div>
+              aria-label="Previous"
-              )}
+            >
-            </div>
+              ‹
+            </button>
+          )}
+          {onNext && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onNext() }}
+              className="absolute right-2 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
+              style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
+              aria-label="Next"
+            >
+              ›
+            </button>
+          )}
+        </div>
 
-            {/* Info */}
+        {/* ── Tag panel — bottom half on mobile, right sidebar on desktop ── */}
-            <div className="p-5">
+        {showTagPanel && (
-              {/* Title row with kebab menu */}
+          <MediaTagPanel
-              <div className="flex items-center gap-2 mb-4">
+            itemKey={game.item_key!}
-                <h2 className="text-lg font-semibold flex-1 min-w-0" style={{ color: 'var(--text-primary)' }}>
+            onHide={() => setShowTagPanel(false)}
-                  {game.title}
+            onClose={onClose}
-                </h2>
+            onTagsChanged={() => { setTagRefreshKey((k) => k + 1); onTagsChanged?.() }}
-
+            readOnly={readOnly}
-                {/* Kebab menu */}
+          />
-                <div className="relative flex-shrink-0" ref={menuRef}>
-                  <button
-                    onClick={() => setMenuOpen((o) => !o)}
-                    className="w-7 h-7 rounded-lg flex items-center justify-center transition-colors"
-                    style={{ color: 'var(--text-secondary)', backgroundColor: 'transparent' }}
-                    onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
-                    onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
-                    aria-label="More options"
-                  >
-                    ⋮
-                  </button>
-                  {menuOpen && (
-                    <div
-                      className="absolute right-0 top-full mt-1 rounded-lg shadow-lg overflow-hidden z-20 min-w-max"
-                      style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
-                    >
-                      <button
-                        onClick={() => { setMenuOpen(false); setEditingImages(true) }}
-                        className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
-                        style={{ color: 'var(--text-primary)' }}
-                        onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
-                        onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
-                      >
-                        Edit images
-                      </button>
-                      <button
-                        onClick={() => {
-                          setMenuOpen(false)
-                          setRenameName(decodeURIComponent(game.id))
-                          setRenameError(null)
-                          setRenaming(true)
-                        }}
-                        className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
-                        style={{ color: 'var(--text-primary)' }}
-                        onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
-                        onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
-                      >
-                        Rename folder
-                      </button>
-                      {onDeleted && (
-                        <button
-                          onClick={() => { setMenuOpen(false); setConfirming(true) }}
-                          className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
-                          style={{ color: '#fca5a5' }}
-                          onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
-                          onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
-                        >
-                          Delete game
-                        </button>
-                      )}
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              {/* Rename inline input */}
-              {renaming && (
-                <div className="flex flex-col gap-2 mb-4">
-                  <div className="flex gap-2">
-                    <input
-                      type="text"
-                      value={renameName}
-                      onChange={(e) => setRenameName(e.target.value)}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter') {
-                          const trimmed = renameName.trim()
-                          if (!trimmed) return
-                          setRenameSaving(true)
-                          setRenameError(null)
-                          fetch('/api/rename', {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({ libraryId, oldPath: decodeURIComponent(game.id), newName: trimmed, itemType: 'game' }),
-                          })
-                            .then(async (res) => {
-                              if (res.status === 409) { setRenameError((await res.json()).error); return }
-                              if (!res.ok) throw new Error()
-                              setRenaming(false)
-                              onCoverUploaded?.() // triggers refetch
-                            })
-                            .catch(() => setRenameError('Rename failed'))
-                            .finally(() => setRenameSaving(false))
-                        }
-                        if (e.key === 'Escape') setRenaming(false)
-                      }}
-                      className="flex-1 px-3 py-1.5 rounded-lg text-sm min-w-0"
-                      style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)', border: '1px solid var(--border)' }}
-                      autoFocus
-                    />
-                    <button
-                      onClick={() => setRenaming(false)}
-                      className="px-2 py-1.5 rounded-lg text-sm transition-colors"
-                      style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
-                    >
-                      Cancel
-                    </button>
-                    <button
-                      onClick={() => {
-                        const trimmed = renameName.trim()
-                        if (!trimmed) return
-                        setRenameSaving(true)
-                        setRenameError(null)
-                        fetch('/api/rename', {
-                          method: 'POST',
-                          headers: { 'Content-Type': 'application/json' },
-                          body: JSON.stringify({ libraryId, oldPath: decodeURIComponent(game.id), newName: trimmed, itemType: 'game' }),
-                        })
-                          .then(async (res) => {
-                            if (res.status === 409) { setRenameError((await res.json()).error); return }
-                            if (!res.ok) throw new Error()
-                            setRenaming(false)
-                            onCoverUploaded?.()
-                          })
-                          .catch(() => setRenameError('Rename failed'))
-                          .finally(() => setRenameSaving(false))
-                      }}
-                      disabled={renameSaving}
-                      className="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
-                      style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
-                    >
-                      {renameSaving ? '…' : 'Rename'}
-                    </button>
-                  </div>
-                  {renameError && <p className="text-xs" style={{ color: '#fca5a5' }}>{renameError}</p>}
-                </div>
-              )}
-
-              {/* Delete confirmation banner */}
-              {confirming && (
-                <div
-                  className="flex items-center gap-3 mb-4 px-3 py-2.5 rounded-lg text-sm"
-                  style={{ backgroundColor: '#7f1d1d33', border: '1px solid #7f1d1d' }}
-                >
-                  <p className="flex-1 text-xs" style={{ color: '#fca5a5' }}>
-                    Permanently delete this game and all its files?
-                  </p>
-                  <button
-                    onClick={() => setConfirming(false)}
-                    className="text-xs px-2 py-1 rounded flex-shrink-0 transition-colors"
-                    style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
-                    onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
-                    onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    onClick={() => {
-                      setDeleting(true)
-                      fetch(`/api/games?libraryId=${encodeURIComponent(libraryId)}&gameId=${encodeURIComponent(game.id)}`, { method: 'DELETE' })
-                        .then(() => onDeleted!(game.id))
-                        .catch(() => setDeleting(false))
-                    }}
-                    disabled={deleting}
-                    className="text-xs px-2 py-1 rounded flex-shrink-0 transition-colors disabled:opacity-50"
-                    style={{ backgroundColor: '#7f1d1d', color: '#fca5a5' }}
-                    onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = '#991b1b')}
-                    onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = '#7f1d1d')}
-                  >
-                    {deleting ? 'Deleting…' : 'Yes, delete'}
-                  </button>
-                </div>
-              )}
-
-              <DownloadButton gameFiles={game.gameFiles} clientPlatform={clientPlatform} downloadUrl={fileDownloadUrl} />
-
-              {/* Screenshots */}
-              <div className="mt-4 pt-4" style={{ borderTop: '1px solid var(--border)' }}>
-                <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--text-secondary)' }}>
-                  Screenshots
-                </p>
-                <div className="flex gap-2 overflow-x-auto pb-1" style={{ scrollbarWidth: 'thin' }}>
-                  {screenshotsLoading && screenshots.length === 0 ? (
-                    <div className="flex-shrink-0 w-36 aspect-video rounded-lg animate-pulse" style={{ backgroundColor: 'var(--border)' }} />
-                  ) : (
-                    <>
-                      {screenshots.map((shot, idx) => (
-                        <div
-                          key={shot.filename}
-                          className="group relative flex-shrink-0 w-36 aspect-video rounded-lg overflow-hidden cursor-pointer"
-                          style={{ backgroundColor: 'var(--border)' }}
-                          onClick={() => setLightboxIndex(idx)}
-                        >
-                          {/* eslint-disable-next-line @next/next/no-img-element */}
-                          <img src={shot.thumbnailUrl} alt={`Screenshot ${idx + 1}`} className="w-full h-full object-cover" />
-                          {deletingScreenshot !== shot.filename && (
-                            <button
-                              onClick={(e) => { e.stopPropagation(); handleDeleteScreenshot(shot.filename) }}
-                              className="absolute top-1 right-1 w-5 h-5 rounded-full flex items-center justify-center text-xs opacity-0 group-hover:opacity-100 transition-opacity"
-                              style={{ backgroundColor: 'rgba(0,0,0,0.7)', color: '#fff' }}
-                              aria-label="Delete screenshot"
-                            >
-                              ✕
-                            </button>
-                          )}
-                          {deletingScreenshot === shot.filename && (
-                            <div className="absolute inset-0 flex items-center justify-center" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
-                              <span className="text-xs text-white">Deleting…</span>
-                            </div>
-                          )}
-                        </div>
-                      ))}
-                      {Array.from({ length: uploadingCount }).map((_, i) => (
-                        <div
-                          key={`uploading-${i}`}
-                          className="flex-shrink-0 w-36 aspect-video rounded-lg flex items-center justify-center animate-pulse"
-                          style={{ backgroundColor: 'var(--border)' }}
-                        >
-                          <span className="text-xs" style={{ color: 'var(--text-secondary)' }}>Uploading…</span>
-                        </div>
-                      ))}
-                      <button
-                        onClick={() => screenshotInputRef.current?.click()}
-                        className="flex-shrink-0 w-36 aspect-video rounded-lg flex items-center justify-center border-2 border-dashed transition-colors"
-                        style={{ borderColor: 'var(--border)', color: 'var(--text-secondary)' }}
-                        onMouseEnter={(e) => {
-                          ;(e.currentTarget as HTMLElement).style.borderColor = 'var(--accent)'
-                          ;(e.currentTarget as HTMLElement).style.color = 'var(--accent)'
-                        }}
-                        onMouseLeave={(e) => {
-                          ;(e.currentTarget as HTMLElement).style.borderColor = 'var(--border)'
-                          ;(e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
-                        }}
-                        aria-label="Add screenshot"
-                      >
-                        <span className="text-xl">+</span>
-                      </button>
-                    </>
-                  )}
-                </div>
-                <input
-                  ref={screenshotInputRef}
-                  type="file"
-                  multiple
-                  accept="image/*"
-                  className="hidden"
-                  onChange={handleScreenshotUpload}
-                />
-              </div>
-
-              {/* Tags */}
-              <div className="mt-4 pt-4" style={{ borderTop: '1px solid var(--border)' }}>
-                <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--text-secondary)' }}>
-                  Tags
-                </p>
-                <TagSelector itemKey={game.item_key!} onTagsChanged={onTagsChanged} />
-              </div>
-            </div>
-          </>
         )}
       </div>
 
-      {/* Lightbox */}
+      {/* Screenshot lightbox (z-60, sits above the modal) */}
       {lightboxIndex !== null && (
         <div
           className="fixed inset-0 flex items-center justify-center"
@@ -591,7 +677,7 @@ function DownloadButton({
         <span>↓</span>
         <span className="truncate">{primary.filename}</span>
         <span className="justify-right flex-shrink-0"><PlatformPill platform={primary.platform} /></span>
-        
+
       </a>
     )
   }

src/components/games/GamesView.tsx

@@ -1,7 +1,8 @@
 'use client'
 
-import { useEffect, useState, useCallback, useRef } from 'react'
+import { useEffect, useState, useCallback, useRef, useMemo } from 'react'
-import type { Game, GamePlatform, GameSeries } from '@/types'
+import type { Game, GamePlatform, GameSeries, RatingOperator } from '@/types'
+import { useDebounce } from '@/hooks/useDebounce'
 import GameDetailModal from './GameDetailModal'
 import FilterPanel from '@/components/FilterPanel'
 
@@ -58,9 +59,10 @@ function PlatformBadges({ platforms }: { platforms: GamePlatform[] }) {
 
 interface Props {
   libraryId: string
+  readOnly?: boolean
 }
 
-export default function GamesView({ libraryId }: Props) {
+export default function GamesView({ libraryId, readOnly }: Props) {
   const [items, setItems] = useState<(Game | GameSeries)[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -71,8 +73,14 @@ export default function GamesView({ libraryId }: Props) {
   const [search, setSearch] = useState('')
   const [selectedTagIds, setSelectedTagIds] = useState<Set<string>>(new Set())
   const [assignments, setAssignments] = useState<Record<string, string[]>>({})
+  const [ratingValue, setRatingValue] = useState<number | null>(null)
+  const [ratingOperator, setRatingOperator] = useState<RatingOperator>('gte')
+  const debouncedSearch = useDebounce(search, 200)
   const [filterRefreshKey, setFilterRefreshKey] = useState(0)
-  const [showFilters, setShowFilters] = useState(true)
+  const [showFilters, setShowFilters] = useState(
+    () => typeof window !== 'undefined' && window.innerWidth >= 768
+  )
+  const [selectedGameIndex, setSelectedGameIndex] = useState<number | null>(null)
 
   const toggleTag = (tagId: string) =>
     setSelectedTagIds((prev) => {
@@ -124,29 +132,72 @@ export default function GamesView({ libraryId }: Props) {
     ? selectedSeries.games
     : items
 
-  const filtered = visibleItems.filter((item) => {
+  const handleRatingChange = (value: number | null, operator: RatingOperator) => {
+    if (value === ratingValue && operator === ratingOperator) {
+      setRatingValue(null)
+    } else {
+      setRatingValue(value)
+      setRatingOperator(operator)
+    }
+  }
+
+  const filtered = useMemo(() => visibleItems.filter((item) => {
     if ('games' in item) {
-      const searchMatch = !search ||
+      if (debouncedSearch) {
-        item.title.toLowerCase().includes(search.toLowerCase()) ||
+        const q = debouncedSearch.toLowerCase()
-        item.games.some((g) => g.title.toLowerCase().includes(search.toLowerCase()))
+        const searchMatch =
-      if (!searchMatch) return false
+          item.title.toLowerCase().includes(q) ||
+          item.games.some((g) =>
+            g.title.toLowerCase().includes(q) ||
+            (g.aiDescription?.toLowerCase().includes(q) ?? false) ||
+            (g.extractedText?.toLowerCase().includes(q) ?? false) ||
+            (g.extractedTextTranslated?.toLowerCase().includes(q) ?? false)
+          )
+        if (!searchMatch) return false
+      }
       if (selectedTagIds.size > 0) {
-        return item.games.some((g) => {
+        if (!item.games.some((g) => {
           const gameTags = assignments[g.item_key!] ?? []
           return [...selectedTagIds].every((id) => gameTags.includes(id))
-        })
+        })) return false
+      }
+      if (ratingValue !== null) {
+        if (!item.games.some((g) => {
+          const r = g.userRating
+          if (r === null) return false
+          if (ratingOperator === 'gte') return r >= ratingValue
+          if (ratingOperator === 'eq')  return r === ratingValue
+          if (ratingOperator === 'lte') return r <= ratingValue
+          return false
+        })) return false
       }
       return true
     }
-    if (search && !item.title.toLowerCase().includes(search.toLowerCase())) return false
+    // Standalone Game
+    if (debouncedSearch) {
+      const q = debouncedSearch.toLowerCase()
+      const g = item as Game
+      if (![g.title, g.aiDescription, g.extractedText, g.extractedTextTranslated]
+          .some((f) => f?.toLowerCase().includes(q))) return false
+    }
     if (selectedTagIds.size > 0) {
       const gameTags = assignments[item.item_key!] ?? []
       if (![...selectedTagIds].every((id) => gameTags.includes(id))) return false
     }
+    if (ratingValue !== null) {
+      const r = (item as Game).userRating
+      if (r === null) return false
+      if (ratingOperator === 'gte' && r < ratingValue) return false
+      if (ratingOperator === 'eq'  && r !== ratingValue) return false
+      if (ratingOperator === 'lte' && r > ratingValue) return false
+    }
     return true
-  })
+  }), [visibleItems, debouncedSearch, selectedTagIds, assignments, ratingValue, ratingOperator])
 
-  const filtersActive = search !== '' || selectedTagIds.size > 0
+  const filtersActive = search !== '' || selectedTagIds.size > 0 || ratingValue !== null
+  const filteredGames: Game[] = filtered.flatMap((item) =>
+    'games' in item ? item.games : [item as Game]
+  )
 
   return (
     <>
@@ -175,6 +226,9 @@ export default function GamesView({ libraryId }: Props) {
               selectedTagIds={selectedTagIds}
               onTagToggle={toggleTag}
               refreshKey={filterRefreshKey}
+              ratingValue={ratingValue}
+              ratingOperator={ratingOperator}
+              onRatingChange={handleRatingChange}
             />
           </div>
         )}
@@ -220,7 +274,7 @@ export default function GamesView({ libraryId }: Props) {
                 <GameCard
                   key={item.id}
                   game={item}
-                  onClick={() => setSelected(item)}
+                  onClick={() => { setSelected(item); setSelectedGameIndex(filteredGames.indexOf(item)) }}
                 />
               )
             )}
@@ -231,11 +285,19 @@ export default function GamesView({ libraryId }: Props) {
           <GameDetailModal
             game={selected}
             libraryId={libraryId}
-            onClose={() => setSelected(null)}
+            readOnly={readOnly}
+            onClose={() => { setSelected(null); setSelectedGameIndex(null) }}
+            onPrev={selectedGameIndex !== null && selectedGameIndex > 0
+              ? () => { const g = filteredGames[selectedGameIndex - 1]; setSelected(g); setSelectedGameIndex(selectedGameIndex - 1) }
+              : undefined}
+            onNext={selectedGameIndex !== null && selectedGameIndex < filteredGames.length - 1
+              ? () => { const g = filteredGames[selectedGameIndex + 1]; setSelected(g); setSelectedGameIndex(selectedGameIndex + 1) }
+              : undefined}
             onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
             onCoverUploaded={() => fetchGames(true)}
             onDeleted={() => {
               setSelected(null)
+              setSelectedGameIndex(null)
               fetchGames()
               fetchAssignments()
             }}
@@ -289,6 +351,7 @@ function SeriesCard({ series, onClick }: { series: GameSeries; onClick: () => vo
   const seriesPlatforms: GamePlatform[] = [
     ...new Set(series.games.flatMap((g) => g.platforms)),
   ]
+  const resolvedCover = series.coverUrl ?? series.games[0]?.coverUrl ?? null
 
   return (
     <button
@@ -305,9 +368,9 @@ function SeriesCard({ series, onClick }: { series: GameSeries; onClick: () => vo
       }}
     >
       <div className="aspect-[3/4] w-full relative overflow-hidden" style={{ backgroundColor: 'var(--border)' }}>
-        {series.coverUrl ? (
+        {resolvedCover ? (
           // eslint-disable-next-line @next/next/no-img-element
-          <img src={series.coverUrl} alt={series.title} className="absolute inset-0 w-full h-full object-cover" />
+          <img src={resolvedCover} alt={series.title} className="absolute inset-0 w-full h-full object-cover" />
         ) : (
           <div className="absolute inset-0 flex items-center justify-center text-4xl">🎮</div>
         )}

src/components/mixed/ImageLightbox.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useRef, useState, useCallback } from 'react'
-import TagSelector from '@/components/tags/TagSelector'
+import MediaTagPanel from '@/components/tags/MediaTagPanel'
 
 interface Props {
   url: string
@@ -12,15 +12,16 @@ interface Props {
   itemKey?: string
   onTagsChanged?: () => void
   onAiTag?: () => Promise<void>
+  showTags?: boolean
+  onShowTagsChange?: (v: boolean) => void
+  readOnly?: boolean
 }
 
-export default function ImageLightbox({ url, name, onClose, onPrev, onNext, itemKey, onTagsChanged, onAiTag }: Props) {
+export default function ImageLightbox({ url, name, onClose, onPrev, onNext, itemKey, onTagsChanged, onAiTag, showTags: showTagsProp, onShowTagsChange, readOnly }: Props) {
   const overlayRef = useRef<HTMLDivElement>(null)
-  const [showTags, setShowTags] = useState(false)
+  const [showTagsLocal, setShowTagsLocal] = useState(false)
-  const [aiTagging, setAiTagging] = useState(false)
+  const showTags = showTagsProp ?? showTagsLocal
-  const [aiTagError, setAiTagError] = useState<string | null>(null)
+  const setShowTags = onShowTagsChange ?? setShowTagsLocal
-  const [tagRefreshKey, setTagRefreshKey] = useState(0)
-
   // Text extraction state
   const [extractedText, setExtractedText] = useState<string | null>(null)
   const [translatedText, setTranslatedText] = useState<string | null>(null)
@@ -33,8 +34,10 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
   const [savingText, setSavingText] = useState(false)
   const [sourceLanguage, setSourceLanguage] = useState('')
 
-  // Description state (moved from TagSelector)
+  // Description state
   const [aiDescription, setAiDescription] = useState<string | null>(null)
+  const [editedDescription, setEditedDescription] = useState<string>('')
+  const [savingDesc, setSavingDesc] = useState(false)
   const [generatingDesc, setGeneratingDesc] = useState(false)
   const [descPending, setDescPending] = useState(false)
   const [descError, setDescError] = useState<string | null>(null)
@@ -50,6 +53,7 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
 
   // Polling ref
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const touchStartX = useRef<number | null>(null)
 
   // Determine if this is an image file (for text extraction controls)
   const isImage = /\.(jpe?g|png|gif|webp|bmp|tiff?)$/i.test(name)
@@ -67,6 +71,7 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
         setEditedExtractedText(data.extractedText ?? '')
         setTranslatedText(data.extractedTextTranslated)
         setAiDescription(data.aiDescription)
+        setEditedDescription(data.aiDescription ?? '')
       })
       .catch(() => {})
   }, [itemKey])
@@ -112,6 +117,7 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
           setEditedExtractedText(data.extractedText ?? '')
           setTranslatedText(data.extractedTextTranslated)
           setAiDescription(data.aiDescription)
+          setEditedDescription(data.aiDescription ?? '')
           setExtractPending(false)
           setTranslatePending(false)
           setDescPending(false)
@@ -126,10 +132,24 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
       if (e.key === 'ArrowLeft') onPrev?.()
       if (e.key === 'ArrowRight') onNext?.()
     }
+    const handleTouchStart = (e: TouchEvent) => {
+      touchStartX.current = e.touches[0].clientX
+    }
+    const handleTouchEnd = (e: TouchEvent) => {
+      if (touchStartX.current === null) return
+      const delta = touchStartX.current - e.changedTouches[0].clientX
+      if (delta > 50) onNext?.()
+      else if (delta < -50) onPrev?.()
+      touchStartX.current = null
+    }
     document.addEventListener('keydown', handleKey)
+    document.addEventListener('touchstart', handleTouchStart, { passive: true })
+    document.addEventListener('touchend', handleTouchEnd, { passive: true })
     document.body.style.overflow = 'hidden'
     return () => {
       document.removeEventListener('keydown', handleKey)
+      document.removeEventListener('touchstart', handleTouchStart)
+      document.removeEventListener('touchend', handleTouchEnd)
       document.body.style.overflow = ''
     }
   }, [onClose, onPrev, onNext])
@@ -168,26 +188,159 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
     }
   }
 
+  const callExtract = async (modeOverride: string) => {
+    setExtracting(true)
+    setExtractError(null)
+    setExtractPending(false)
+    try {
+      const res = await fetch('/api/ai-tagging/extract-text', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          itemKey,
+          ocrMode: modeOverride,
+          ...(modeOverride !== 'llm' && ocrLanguageInput.trim() && { ocrLanguages: ocrLanguageInput.trim() }),
+        }),
+      })
+      if (res.status === 202) {
+        setExtractPending(true)
+        startPolling(extractedText, translatedText, aiDescription)
+        return
+      }
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error((data as { error?: string }).error ?? 'Failed to extract text')
+      }
+      const result = await res.json()
+      setExtractedText(result.extractedText || null)
+      setEditedExtractedText(result.extractedText || '')
+      setTranslatedText(result.translatedText || null)
+    } catch (err) {
+      setExtractError(err instanceof Error ? err.message : 'Failed to extract text')
+      setTimeout(() => setExtractError(null), 4000)
+    } finally {
+      setExtracting(false)
+    }
+  }
+
   const smallBtn = 'w-7 h-7 rounded-full flex items-center justify-center transition-colors flex-shrink-0'
 
   return (
     <div
       ref={overlayRef}
-      className="fixed inset-0 z-50 flex flex-col items-center p-4 gap-3 overflow-hidden max-h-screen"
+      className="fixed inset-0 z-50 overflow-hidden"
-      style={{ backgroundColor: 'rgba(0,0,0,0.9)', height: '100vh', maxHeight: '100vh' }}
+      style={{ backgroundColor: 'rgba(0,0,0,0.9)', height: '100vh' }}
       onClick={handleOverlayClick}
     >
-      {/* Toolbar — collapses to just filename + text overlay when tag panel is open */}
+      {/* Outer flex — row on md+, col on mobile when panel open */}
-      <div className={`flex items-center justify-between w-full flex-shrink-0 ${showTags ? '' : 'max-w-4xl'}`}>
+      <div className={`flex h-full w-full ${showTags ? 'flex-col md:flex-row' : ''}`}>
-        <span className="text-sm truncate max-w-[80%]" style={{ color: 'var(--text-secondary)' }}>
+
-          {name}
+        {/* ── Media pane — always full when no panel, flex-1 when panel open ── */}
-        </span>
+        <div className="relative flex-1 min-h-0 min-w-0">
-        <div className="flex items-center gap-2 flex-shrink-0">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
-          {/* Text overlay button — always shown when text exists */}
+          <img
-          {extractedText && (
+            src={url}
+            alt={name}
+            className="absolute inset-0 w-full h-full object-contain"
+            onClick={(e) => e.stopPropagation()}
+          />
+
+          {/* Prev / Next */}
+          {onPrev && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onPrev() }}
+              className="absolute left-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
+              style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
+              aria-label="Previous"
+            >
+              ‹
+            </button>
+          )}
+          {onNext && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onNext() }}
+              className="absolute right-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
+              style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
+              aria-label="Next"
+            >
+              ›
+            </button>
+          )}
+
+          {/* Text overlay */}
+          {showTextOverlay && displayText && (
+            <div
+              className="absolute bottom-16 left-4 right-4 z-10 rounded-xl p-4"
+              style={{ backgroundColor: 'rgba(0,0,0,0.75)' }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {extractedText && translatedText && (
+                <div className="flex justify-end mb-2">
+                  <button
+                    onClick={() => setShowOriginal((v) => !v)}
+                    className="text-xs px-2 py-0.5 rounded-full"
+                    style={{ backgroundColor: 'rgba(255,255,255,0.15)', color: 'rgba(255,255,255,0.7)' }}
+                  >
+                    {showOriginal ? 'Show Translation' : 'Show Original'}
+                  </button>
+                </div>
+              )}
+              <p className="text-sm whitespace-pre-wrap" style={{ color: 'rgba(255,255,255,0.9)' }}>
+                {displayText}
+              </p>
+            </div>
+          )}
+
+          {/* ── Floating controls ── */}
+
+          {/* Filename pill — bottom-left */}
+          <div
+            className="absolute bottom-4 left-4 max-w-[55%] px-2.5 py-1 rounded-full pointer-events-none"
+            style={{ backgroundColor: 'rgba(0,0,0,0.55)' }}
+          >
+            <span className="block text-xs truncate" style={{ color: 'rgba(255,255,255,0.85)' }}>
+              {name}
+            </span>
+          </div>
+
+          {/* Tags + Close — top-right */}
+          <div
+            className="absolute top-4 right-4 flex items-center gap-1.5"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {itemKey && !showTags && (
+              <button
+                onClick={() => { setShowTags(true); setShowTextOverlay(false) }}
+                className={smallBtn}
+                style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
+                onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'}
+                onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'}
+                aria-label="Show tags"
+                title="Tags"
+              >
+                🏷
+              </button>
+            )}
+            {!showTags && (
+              <button
+                onClick={onClose}
+                className={smallBtn}
+                style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
+                onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'}
+                onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'}
+                aria-label="Close"
+                title="Close"
+              >
+                ✕
+              </button>
+            )}
+          </div>
+
+          {/* Text display button — bottom-right, hidden when panel open */}
+          {!showTags && extractedText && (
             <button
               onClick={(e) => { e.stopPropagation(); setShowTextOverlay((v) => !v) }}
-              className="w-12 h-12 rounded-full flex items-center justify-center transition-colors"
+              className={`absolute bottom-4 right-4 ${smallBtn}`}
               style={{
                 backgroundColor: showTextOverlay ? 'var(--accent)' : 'var(--surface)',
                 color: showTextOverlay ? '#fff' : 'var(--text-primary)',
@@ -201,297 +354,126 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
               aria-label={showTextOverlay ? 'Hide text' : 'Show text'}
               title="Display text"
             >
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                 <line x1="3" y1="6" x2="21" y2="6"/>
                 <line x1="3" y1="12" x2="15" y2="12"/>
                 <line x1="3" y1="18" x2="18" y2="18"/>
               </svg>
             </button>
           )}
-          {/* These buttons only show in the toolbar when the tag panel is closed */}
-          {!showTags && (
-            <>
-              {itemKey && (
-                <button
-                  onClick={(e) => { e.stopPropagation(); setShowTags(true) }}
-                  className="w-12 h-12 rounded-full flex items-center justify-center text-sm transition-colors"
-                  style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)', fontSize: '1.5rem' }}
-                  onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'}
-                  onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'}
-                  aria-label="Show tags"
-                  title="Tags"
-                >
-                  🏷
-                </button>
-              )}
-              {onAiTag && (
-                <button
-                  onClick={async (e) => {
-                    e.stopPropagation()
-                    setAiTagging(true)
-                    setAiTagError(null)
-                    try {
-                      await onAiTag()
-                      setTagRefreshKey((k) => k + 1)
-                      onTagsChanged?.()
-                    } catch (err) {
-                      setAiTagError(err instanceof Error ? err.message : 'AI tagging failed')
-                      setTimeout(() => setAiTagError(null), 4000)
-                    } finally {
-                      setAiTagging(false)
-                    }
-                  }}
-                  disabled={aiTagging}
-                  className="w-12 h-12 rounded-full flex items-center justify-center text-sm transition-colors disabled:opacity-50"
-                  style={{
-                    backgroundColor: aiTagError ? '#7f1d1d' : 'var(--surface)',
-                    color: aiTagError ? '#fca5a5' : 'var(--text-primary)',
-                    fontSize: '1.5rem',
-                  }}
-                  onMouseEnter={(e) => {
-                    if (!aiTagging && !aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'
-                  }}
-                  onMouseLeave={(e) => {
-                    if (!aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'
-                  }}
-                  aria-label="AI Tag this image"
-                  title={aiTagError ?? (aiTagging ? 'Tagging…' : 'AI Tag')}
-                >
-                  {aiTagging ? (
-                    <span className="animate-spin" style={{ display: 'inline-block', fontSize: '1.2rem' }}>⟳</span>
-                  ) : '✨'}
-                </button>
-              )}
-              <button
-                onClick={onClose}
-                className="w-12 h-12 rounded-full flex items-center justify-center text-sm transition-colors"
-                style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)', fontSize: '1.5rem' }}
-                onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'}
-                onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'}
-                aria-label="Close"
-              >
-                ✕
-              </button>
-            </>
-          )}
         </div>
-      </div>
 
-      {showTags ? (
+        {/* ── Tag panel — bottom half on mobile, right sidebar on desktop ── */}
-        <div className="flex gap-4 w-full flex-1 min-h-0 items-start overflow-hidden max-h-fit max-w-fit">
+        {showTags && (
-          {/* Image */}
+          <MediaTagPanel
-          <div className="w-full flex-1 min-w-0 min-h-0 h-full flex items-center justify-center overflow-hidden relative">
+            itemKey={itemKey!}
-            {/* eslint-disable-next-line @next/next/no-img-element */}
+            onHide={() => setShowTags(false)}
-            <img
+            onClose={onClose}
-              src={url}
+            onTagsChanged={onTagsChanged}
-              alt={name}
+            onAiTag={readOnly ? undefined : onAiTag}
-              className="max-w-full max-h-full w-auto h-auto object-contain rounded-lg"
+            readOnly={readOnly}
-              onClick={(e) => e.stopPropagation()}
-            />
-            {onPrev && (
-              <button
-                onClick={(e) => { e.stopPropagation(); onPrev() }}
-                className="absolute left-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
-                style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
-                aria-label="Previous"
-              >
-                ‹
-              </button>
-            )}
-            {onNext && (
-              <button
-                onClick={(e) => { e.stopPropagation(); onNext() }}
-                className="absolute right-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
-                style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
-                aria-label="Next"
-              >
-                ›
-              </button>
-            )}
-            {/* Text overlay */}
-            {showTextOverlay && displayText && (
-              <div
-                className="absolute bottom-4 left-4 right-4 z-10 rounded-xl p-4"
-                style={{ backgroundColor: 'rgba(0,0,0,0.75)' }}
-                onClick={(e) => e.stopPropagation()}
-              >
-                {extractedText && translatedText && (
-                  <div className="flex justify-end mb-2">
-                    <button
-                      onClick={() => setShowOriginal((v) => !v)}
-                      className="text-xs px-2 py-0.5 rounded-full"
-                      style={{ backgroundColor: 'rgba(255,255,255,0.15)', color: 'rgba(255,255,255,0.7)' }}
-                    >
-                      {showOriginal ? 'Show Translation' : 'Show Original'}
-                    </button>
-                  </div>
-                )}
-                <p className="text-sm whitespace-pre-wrap" style={{ color: 'rgba(255,255,255,0.9)' }}>
-                  {displayText}
-                </p>
-              </div>
-            )}
-          </div>
-
-          {/* Tag panel */}
-          <div
-            className="w-80 h-full max-h-full flex-shrink-0 rounded-xl overflow-y-auto p-4 flex flex-col gap-4"
-            style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
-            onClick={(e) => e.stopPropagation()}
           >
-            {/* Panel header — hide panel + AI tagger + close lightbox */}
-            <div className="flex items-center justify-between flex-shrink-0">
-              <button
-                onClick={() => setShowTags(false)}
-                className={smallBtn}
-                style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}
-                onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'}
-                onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'}
-                aria-label="Hide panel"
-                title="Hide panel"
-              >
-                ›
-              </button>
-              <div className="flex items-center gap-1.5">
-                {onAiTag && (
-                  <button
-                    onClick={async (e) => {
-                      e.stopPropagation()
-                      setAiTagging(true)
-                      setAiTagError(null)
-                      try {
-                        await onAiTag()
-                        setTagRefreshKey((k) => k + 1)
-                        onTagsChanged?.()
-                      } catch (err) {
-                        setAiTagError(err instanceof Error ? err.message : 'AI tagging failed')
-                        setTimeout(() => setAiTagError(null), 4000)
-                      } finally {
-                        setAiTagging(false)
-                      }
-                    }}
-                    disabled={aiTagging}
-                    className={`${smallBtn} disabled:opacity-50`}
-                    style={{
-                      backgroundColor: aiTagError ? '#7f1d1d' : 'var(--border)',
-                      color: aiTagError ? '#fca5a5' : 'var(--text-secondary)',
-                      fontSize: '1rem',
-                    }}
-                    onMouseEnter={(e) => {
-                      if (!aiTagging && !aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'
-                    }}
-                    onMouseLeave={(e) => {
-                      if (!aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
-                    }}
-                    aria-label="AI Tag this image"
-                    title={aiTagError ?? (aiTagging ? 'Tagging…' : 'AI Tag')}
-                  >
-                    {aiTagging ? <span className="animate-spin" style={{ display: 'inline-block' }}>⟳</span> : '✨'}
-                  </button>
-                )}
-                <button
-                  onClick={onClose}
-                  className={smallBtn}
-                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}
-                  onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'}
-                  onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'}
-                  aria-label="Close"
-                  title="Close"
-                >
-                  ✕
-                </button>
-              </div>
-            </div>
-
             {/* Description section */}
-            <div className="flex flex-col gap-1" style={{ borderTop: '1px solid var(--border)', paddingTop: '1rem' }}>
+            <div className="flex flex-col gap-1 pt-4" style={{ borderTop: '1px solid var(--border)' }}>
-              <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--text-secondary)' }}>
+              <div className="flex items-center justify-between mb-2">
-                Description
+                <p className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--text-secondary)' }}>
-              </p>
+                  Description
-              {aiDescription && (
-                <p className="text-xs italic mb-2" style={{ color: 'var(--text-secondary)' }}>
-                  {aiDescription}
                 </p>
-              )}
-              <div className="flex items-center gap-1.5">
                 <button
                   onClick={handleGenerateDescription}
                   disabled={generatingDesc || descPending}
-                  className="text-xs px-2 py-0.5 rounded-full transition-colors disabled:opacity-50"
+                  className={`${smallBtn} disabled:opacity-50`}
                   style={{
                     backgroundColor: descPending ? 'var(--accent)' : 'var(--border)',
                     color: descPending ? '#fff' : 'var(--text-secondary)',
+                    fontSize: '1rem',
                   }}
                   onMouseEnter={(e) => {
-                    if (!generatingDesc && !descPending) {
+                    if (!generatingDesc && !descPending) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'
-                      ;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'
-                      ;(e.currentTarget as HTMLElement).style.color = 'var(--background)'
-                    }
                   }}
                   onMouseLeave={(e) => {
-                    if (!descPending) {
+                    if (!descPending) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
-                      ;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
-                      ;(e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
-                    }
                   }}
+                  aria-label={aiDescription ? 'Regenerate description' : 'Generate description'}
                   title={aiDescription ? 'Regenerate AI description' : 'Generate AI description'}
                 >
-                  {generatingDesc ? '⟳ Generating…' : descPending ? '⟳ Queued…' : aiDescription ? '✦ Regenerate Description' : '✦ Generate Description'}
+                  {generatingDesc || descPending ? <span className="animate-spin" style={{ display: 'inline-block' }}>⟳</span> : '✨'}
                 </button>
-                {descError && (
-                  <span className="text-xs" style={{ color: '#f87171' }}>{descError}</span>
-                )}
               </div>
+              <textarea
+                value={editedDescription}
+                onChange={(e) => setEditedDescription(e.target.value)}
+                placeholder="No description yet…"
+                className="text-xs rounded-lg p-2 w-full resize-y outline-none"
+                style={{
+                  backgroundColor: 'var(--background)',
+                  border: '1px solid var(--border)',
+                  color: 'var(--text-primary)',
+                  minHeight: '3.5rem',
+                  maxHeight: '8rem',
+                  fontFamily: 'inherit',
+                }}
+              />
+              {editedDescription !== (aiDescription ?? '') && (
+                <button
+                  onClick={async () => {
+                    setSavingDesc(true)
+                    try {
+                      await fetch('/api/ai-tagging/fields', {
+                        method: 'PATCH',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ itemKey, aiDescription: editedDescription }),
+                      })
+                      setAiDescription(editedDescription)
+                    } finally {
+                      setSavingDesc(false)
+                    }
+                  }}
+                  disabled={savingDesc}
+                  className="mt-1 text-xs px-2 py-0.5 rounded-full transition-colors disabled:opacity-50"
+                  style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
+                >
+                  {savingDesc ? '⟳ Saving…' : 'Save'}
+                </button>
+              )}
+              {descError && <span className="text-xs" style={{ color: '#f87171' }}>{descError}</span>}
             </div>
 
             {/* Text extraction section — only for images */}
             {isImage && (
-              <div className="flex flex-col gap-2" style={{ borderTop: '1px solid var(--border)', paddingTop: '1rem' }}>
+              <div className="flex flex-col gap-2 pt-4" style={{ borderTop: '1px solid var(--border)' }}>
-                <p className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--text-secondary)' }}>
+                <div className="flex items-center justify-between">
-                  Text Extraction
+                  <p className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--text-secondary)' }}>
-                </p>
+                    Text Extraction
-
+                  </p>
-                <div className="flex items-center gap-2 flex-wrap">
                   <button
-                    onClick={async () => {
+                    onClick={() => callExtract('llm')}
-                      setExtracting(true)
-                      setExtractError(null)
-                      setExtractPending(false)
-                      try {
-                        const res = await fetch('/api/ai-tagging/extract-text', {
-                          method: 'POST',
-                          headers: { 'Content-Type': 'application/json' },
-                          body: JSON.stringify({
-                            itemKey,
-                            ...(ocrLanguageInput.trim() && { ocrLanguages: ocrLanguageInput.trim() }),
-                          }),
-                        })
-                        if (res.status === 202) {
-                          setExtractPending(true)
-                          startPolling(extractedText, translatedText, aiDescription)
-                          return
-                        }
-                        if (!res.ok) {
-                          const data = await res.json().catch(() => ({}))
-                          throw new Error((data as { error?: string }).error ?? 'Failed to extract text')
-                        }
-                        const result = await res.json()
-                        setExtractedText(result.extractedText || null)
-                        setEditedExtractedText(result.extractedText || '')
-                        setTranslatedText(result.translatedText || null)
-                      } catch (err) {
-                        setExtractError(err instanceof Error ? err.message : 'Failed to extract text')
-                        setTimeout(() => setExtractError(null), 4000)
-                      } finally {
-                        setExtracting(false)
-                      }
-                    }}
                     disabled={extracting || extractPending}
-                    className="text-xs px-2 py-1 rounded-lg transition-colors disabled:opacity-50 self-start flex-shrink-0"
+                    className={`${smallBtn} disabled:opacity-50`}
                     style={{
                       backgroundColor: extractPending ? 'var(--accent)' : 'var(--border)',
                       color: extractPending ? '#fff' : 'var(--text-secondary)',
+                      fontSize: '1rem',
                     }}
+                    onMouseEnter={(e) => {
+                      if (!extracting && !extractPending) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'
+                    }}
+                    onMouseLeave={(e) => {
+                      if (!extractPending) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
+                    }}
+                    aria-label="Extract text with AI"
+                    title="Extract with AI (skips OCR)"
+                  >
+                    {extractPending ? <span className="animate-spin" style={{ display: 'inline-block' }}>⟳</span> : '✨'}
+                  </button>
+                </div>
+
+                <div className="flex items-center gap-2 flex-wrap">
+                  <button
+                    onClick={() => callExtract('tesseract')}
+                    disabled={extracting || extractPending}
+                    className="text-xs px-2 py-1 rounded-lg transition-colors disabled:opacity-50 self-start flex-shrink-0"
+                    style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
                     onMouseEnter={(e) => {
                       if (!extracting && !extractPending) {
                         ;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'
@@ -499,35 +481,29 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
                       }
                     }}
                     onMouseLeave={(e) => {
-                      if (!extractPending) {
+                      ;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
-                        ;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
+                      ;(e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
-                        ;(e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)'
-                      }
                     }}
                   >
-                    {extracting ? '⟳ Extracting…' : extractPending ? '⟳ Queued…' : extractedText ? '🔍 Re-extract Text' : '🔍 Extract Text'}
+                    {extracting ? '⟳ Scanning…' : extractedText ? '🔍 Re-scan with OCR' : '🔍 Scan with OCR'}
                   </button>
-                  {ocrMode && ocrMode !== 'llm' && (
+                  <input
-                    <input
+                    type="text"
-                      type="text"
+                    value={ocrLanguageInput}
-                      value={ocrLanguageInput}
+                    onChange={(e) => setOcrLanguageInput(e.target.value)}
-                      onChange={(e) => setOcrLanguageInput(e.target.value)}
+                    placeholder={defaultOcrLanguages}
-                      placeholder={defaultOcrLanguages}
+                    className="text-xs px-2 py-0.5 rounded-full outline-none"
-                      className="text-xs px-2 py-0.5 rounded-full outline-none"
+                    style={{
-                      style={{
+                      backgroundColor: 'var(--background)',
-                        backgroundColor: 'var(--background)',
+                      border: '1px solid var(--border)',
-                        border: '1px solid var(--border)',
+                      color: 'var(--text-primary)',
-                        color: 'var(--text-primary)',
+                      width: 120,
-                        width: 120,
+                    }}
-                      }}
+                    title="Tesseract language(s) for this extraction (e.g. jpn+jpn_vert). Leave blank to use the configured default."
-                      title="Tesseract language(s) for this extraction (e.g. jpn+jpn_vert). Leave blank to use the configured default."
+                  />
-                    />
-                  )}
                 </div>
 
-                {extractError && (
+                {extractError && <p className="text-xs" style={{ color: '#f87171' }}>{extractError}</p>}
-                  <p className="text-xs" style={{ color: '#f87171' }}>{extractError}</p>
-                )}
 
                 {extractedText && (
                   <div className="flex flex-col gap-2">
@@ -653,70 +629,9 @@ export default function ImageLightbox({ url, name, onClose, onPrev, onNext, item
                 )}
               </div>
             )}
-
+          </MediaTagPanel>
-            {/* Tags section */}
+        )}
-            <div style={{ borderTop: '1px solid var(--border)', paddingTop: '1rem' }}>
+      </div>
-              <p className="text-xs font-semibold uppercase tracking-wider mb-3" style={{ color: 'var(--text-secondary)' }}>
-                Tags
-              </p>
-              <TagSelector itemKey={itemKey!} onTagsChanged={onTagsChanged} refreshKey={tagRefreshKey} hideDescription />
-            </div>
-          </div>
-        </div>
-      ) : (
-        <div className="w-full flex-1 min-h-0 flex items-center justify-center overflow-hidden max-h-full relative">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img
-            src={url}
-            alt={name}
-            className="max-w-full max-h-full object-contain rounded-lg"
-            onClick={(e) => e.stopPropagation()}
-          />
-          {onPrev && (
-            <button
-              onClick={(e) => { e.stopPropagation(); onPrev() }}
-              className="absolute left-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
-              style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
-              aria-label="Previous"
-            >
-              ‹
-            </button>
-          )}
-          {onNext && (
-            <button
-              onClick={(e) => { e.stopPropagation(); onNext() }}
-              className="absolute right-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
-              style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
-              aria-label="Next"
-            >
-              ›
-            </button>
-          )}
-          {/* Text overlay */}
-          {showTextOverlay && displayText && (
-            <div
-              className="absolute bottom-4 left-4 right-4 z-10 rounded-xl p-4"
-              style={{ backgroundColor: 'rgba(0,0,0,0.75)' }}
-              onClick={(e) => e.stopPropagation()}
-            >
-              {extractedText && translatedText && (
-                <div className="flex justify-end mb-2">
-                  <button
-                    onClick={() => setShowOriginal((v) => !v)}
-                    className="text-xs px-2 py-0.5 rounded-full"
-                    style={{ backgroundColor: 'rgba(255,255,255,0.15)', color: 'rgba(255,255,255,0.7)' }}
-                  >
-                    {showOriginal ? 'Show Translation' : 'Show Original'}
-                  </button>
-                </div>
-              )}
-              <p className="text-sm whitespace-pre-wrap" style={{ color: 'rgba(255,255,255,0.9)' }}>
-                {displayText}
-              </p>
-            </div>
-          )}
-        </div>
-      )}
     </div>
   )
 }

src/components/mixed/MixedView.tsx

@@ -1,7 +1,8 @@
 'use client'
 
-import { useEffect, useState, useCallback, useRef } from 'react'
+import { useEffect, useState, useCallback, useRef, useMemo } from 'react'
-import type { DirectoryListing, FileEntry } from '@/types'
+import type { DirectoryListing, FileEntry, RatingOperator } from '@/types'
+import { useDebounce } from '@/hooks/useDebounce'
 import VideoPlayerModal from './VideoPlayerModal'
 import ImageLightbox from './ImageLightbox'
 import TagSelector from '@/components/tags/TagSelector'
@@ -11,7 +12,9 @@ import { isBrowserPlayable } from '@/lib/browser-media'
 
 interface Props {
   libraryId: string
+  libraryName: string
   initialPath: string
+  readOnly?: boolean
 }
 
 type ModalState =
@@ -21,18 +24,22 @@ type ModalState =
 
 type TagPanelState = { entry: FileEntry; itemKey: string } | null
 
-export default function MixedView({ libraryId, initialPath }: Props) {
+export default function MixedView({ libraryId, libraryName, initialPath, readOnly }: Props) {
   const [currentPath, setCurrentPath] = useState(initialPath)
   const [listing, setListing] = useState<DirectoryListing | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [modal, setModal] = useState<ModalState>(null)
+  const [modalShowTags, setModalShowTags] = useState(false)
   const [tagPanel, setTagPanel] = useState<TagPanelState>(null)
   const [search, setSearch] = useState('')
   const [selectedTagIds, setSelectedTagIds] = useState<Set<string>>(new Set())
   const [assignments, setAssignments] = useState<Record<string, string[]>>({})
+  const debouncedSearch = useDebounce(search, 200)
   const [filterRefreshKey, setFilterRefreshKey] = useState(0)
-  const [showFilters, setShowFilters] = useState(true)
+  const [showFilters, setShowFilters] = useState(
+    () => typeof window !== 'undefined' && window.innerWidth >= 768
+  )
   const [recursiveEntries, setRecursiveEntries] = useState<FileEntry[]>([])
   const [recursiveLoading, setRecursiveLoading] = useState(false)
   const [recursiveLoaded, setRecursiveLoaded] = useState(false)
@@ -105,7 +112,19 @@ export default function MixedView({ libraryId, initialPath }: Props) {
       .catch(() => {})
   }, [])
 
-  const filtersActive = search !== '' || selectedTagIds.size > 0
+  const [ratingValue, setRatingValue] = useState<number | null>(null)
+  const [ratingOperator, setRatingOperator] = useState<RatingOperator>('gte')
+
+  const handleRatingChange = (value: number | null, operator: RatingOperator) => {
+    if (value === ratingValue && operator === ratingOperator) {
+      setRatingValue(null)
+    } else {
+      setRatingValue(value)
+      setRatingOperator(operator)
+    }
+  }
+
+  const filtersActive = search !== '' || selectedTagIds.size > 0 || ratingValue !== null
 
   const fetchRecursive = useCallback(() => {
     if (recursiveLoaded || recursiveLoading) return
@@ -150,14 +169,31 @@ export default function MixedView({ libraryId, initialPath }: Props) {
 
   const sourceEntries = filtersActive ? recursiveEntries : (listing?.entries ?? [])
 
-  const filteredEntries = sourceEntries.filter((entry) => {
+  const filteredEntries = useMemo(() => sourceEntries.filter((entry) => {
-    if (search && !entry.name.toLowerCase().includes(search.toLowerCase())) return false
+    if (debouncedSearch) {
+      const q = debouncedSearch.toLowerCase()
+      const matchesSearch = [
+        entry.name,
+        entry.aiDescription,
+        entry.extractedText,
+        entry.extractedTextTranslated,
+      ].some((field) => field?.toLowerCase().includes(q))
+      if (!matchesSearch) return false
+    }
     if (selectedTagIds.size > 0 && entry.type !== 'directory') {
       const entryTags = assignments[itemKeyFor(entry)] ?? []
       if (![...selectedTagIds].every((id) => entryTags.includes(id))) return false
     }
+    if (ratingValue !== null && entry.type !== 'directory') {
+      const r = entry.userRating ?? null
+      if (r === null) return false
+      if (ratingOperator === 'gte' && r < ratingValue) return false
+      if (ratingOperator === 'eq' && r !== ratingValue) return false
+      if (ratingOperator === 'lte' && r > ratingValue) return false
+    }
     return true
-  })
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [sourceEntries, debouncedSearch, selectedTagIds, assignments, ratingValue, ratingOperator])
 
   const mediaEntries = filteredEntries.filter(
     (e) => e.mediaType === 'video' || e.mediaType === 'image'
@@ -332,18 +368,29 @@ export default function MixedView({ libraryId, initialPath }: Props) {
               selectedTagIds={selectedTagIds}
               onTagToggle={toggleTag}
               refreshKey={filterRefreshKey}
+              ratingValue={ratingValue}
+              ratingOperator={ratingOperator}
+              onRatingChange={handleRatingChange}
             />
           </div>
         )}
         <div className="flex-1 min-w-0">
       {/* Breadcrumb */}
       <nav className="flex items-center gap-1 mb-6 flex-wrap text-sm">
+        <a
+          href="/"
+          className="transition-colors"
+          style={{ color: 'var(--text-secondary)' }}
+        >
+          Libraries
+        </a>
+        <span style={{ color: 'var(--border)' }}>/</span>
         <button
           onClick={() => loadPath('')}
           className="transition-colors"
           style={{ color: breadcrumbs.length === 0 ? 'var(--text-primary)' : 'var(--text-secondary)' }}
         >
-          Root
+          {libraryName}
         </button>
         {breadcrumbs.map((segment, i) => {
           const isLast = i === breadcrumbs.length - 1
@@ -469,15 +516,28 @@ export default function MixedView({ libraryId, initialPath }: Props) {
                     }
                   }}
                   onTranslate={async (e) => {
-                    const itemKey = itemKeyFor(e)
+                    if (e.type === 'directory') {
-                    const res = await fetch('/api/ai-tagging/translate', {
+                      const dirRel = filtersActive ? e.name : (currentPath ? `${currentPath}/${e.name}` : e.name)
-                      method: 'POST',
+                      const res = await fetch('/api/ai-tagging/translate-bulk', {
-                      headers: { 'Content-Type': 'application/json' },
+                        method: 'POST',
-                      body: JSON.stringify({ itemKey }),
+                        headers: { 'Content-Type': 'application/json' },
-                    })
+                        body: JSON.stringify({ libraryId, path: dirRel }),
-                    if (!res.ok) {
+                      })
-                      const data = await res.json().catch(() => ({}))
+                      if (!res.ok) {
-                      throw new Error((data as { error?: string }).error ?? 'Translation failed')
+                        const data = await res.json().catch(() => ({}))
+                        throw new Error((data as { error?: string }).error ?? 'Translation failed')
+                      }
+                    } else {
+                      const itemKey = itemKeyFor(e)
+                      const res = await fetch('/api/ai-tagging/translate', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ itemKey }),
+                      })
+                      if (!res.ok) {
+                        const data = await res.json().catch(() => ({}))
+                        throw new Error((data as { error?: string }).error ?? 'Translation failed')
+                      }
                     }
                   }}
                   onDelete={(e) => {
@@ -520,10 +580,13 @@ export default function MixedView({ libraryId, initialPath }: Props) {
           name={modal.name}
           itemKey={modal.itemKey}
           onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
-          onClose={() => setModal(null)}
+          onClose={() => { setModal(null); setModalShowTags(false) }}
           onPrev={modal.mediaIndex > 0 ? () => navigateModal(-1) : undefined}
           onNext={modal.mediaIndex < mediaEntries.length - 1 ? () => navigateModal(1) : undefined}
-          onAiTag={modal.itemKey ? async () => {
+          showTags={modalShowTags}
+          onShowTagsChange={setModalShowTags}
+          readOnly={readOnly}
+          onAiTag={!readOnly && modal.itemKey ? async () => {
             const res = await fetch('/api/ai-tagging', {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
@@ -544,10 +607,13 @@ export default function MixedView({ libraryId, initialPath }: Props) {
           name={modal.name}
           itemKey={modal.itemKey}
           onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments() }}
-          onClose={() => setModal(null)}
+          onClose={() => { setModal(null); setModalShowTags(false) }}
           onPrev={modal.mediaIndex > 0 ? () => navigateModal(-1) : undefined}
           onNext={modal.mediaIndex < mediaEntries.length - 1 ? () => navigateModal(1) : undefined}
-          onAiTag={async () => {
+          showTags={modalShowTags}
+          onShowTagsChange={setModalShowTags}
+          readOnly={readOnly}
+          onAiTag={readOnly ? undefined : async () => {
             const res = await fetch('/api/ai-tagging', {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
@@ -746,7 +812,7 @@ function EntryTile({ entry, onOpen, onTag, onDelete, onRename, onAiTag, onExtrac
       </button>
 
       {/* Kebab menu — bottom-right, shown on hover */}
-      {(onDelete || onRename || (onAiTag && entry.mediaType === 'image') || (onExtractText && entry.mediaType === 'image') || (onExtractText && entry.type === 'directory') || (onDescribe && (entry.mediaType === 'image' || entry.mediaType === 'video' || entry.type === 'directory'))) && (
+      {(onDelete || onRename || (onAiTag && entry.mediaType === 'image') || (onExtractText && entry.mediaType === 'image') || (onExtractText && entry.type === 'directory') || (onDescribe && (entry.mediaType === 'image' || entry.mediaType === 'video' || entry.type === 'directory')) || (onTranslate && (entry.mediaType === 'image' || entry.type === 'directory') && entry.hasExtractedText)) && (
         <div className="absolute bottom-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity hidden group-hover:block z-10" ref={menuRef}>
           <button
             onClick={(e) => { e.stopPropagation(); setMenuOpen((o) => !o); setConfirming(false); setAiTagError(null); setDescribeError(null) }}
@@ -917,7 +983,7 @@ function EntryTile({ entry, onOpen, onTag, onDelete, onRename, onAiTag, onExtrac
                   🔍 Extract Text for Folder
                 </button>
               )}
-              {onTranslate && entry.mediaType === 'image' && entry.hasExtractedText && (
+              {onTranslate && (entry.mediaType === 'image' || entry.type === 'directory') && entry.hasExtractedText && (
                 <button
                   onClick={(e) => {
                     e.stopPropagation()
@@ -934,7 +1000,7 @@ function EntryTile({ entry, onOpen, onTag, onDelete, onRename, onAiTag, onExtrac
                   onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
                   onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
                 >
-                  🌐 Translate
+                  {entry.type === 'directory' ? '🌐 Translate Folder' : '🌐 Translate'}
                 </button>
               )}
               {onRename && (

src/components/mixed/VideoPlayerModal.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useRef, useState } from 'react'
-import TagSelector from '@/components/tags/TagSelector'
+import MediaTagPanel from '@/components/tags/MediaTagPanel'
 import { useUserSettings } from '@/hooks/useUserSettings'
 
 interface Props {
@@ -14,18 +14,21 @@ interface Props {
   onTagsChanged?: () => void
   onAiTag?: () => Promise<void>
   context?: 'mixed' | 'movies' | 'tv'
+  showTags?: boolean
+  onShowTagsChange?: (v: boolean) => void
+  readOnly?: boolean
 }
 
-export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, itemKey, onTagsChanged, onAiTag, context = 'mixed' }: Props) {
+export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, itemKey, onTagsChanged, onAiTag, context = 'mixed', showTags: showTagsProp, onShowTagsChange, readOnly }: Props) {
   const settings = useUserSettings()
   const autoPlay = context === 'mixed' ? settings.mixedAutoplay : context === 'movies' ? settings.moviesAutoplay : settings.tvAutoplay
   const loop     = context === 'mixed' ? settings.mixedLoop     : context === 'movies' ? settings.moviesLoop     : settings.tvLoop
   const muted    = context === 'mixed' ? settings.mixedMuted    : context === 'movies' ? settings.moviesMuted    : settings.tvMuted
+
   const overlayRef = useRef<HTMLDivElement>(null)
-  const [showTags, setShowTags] = useState(false)
+  const [showTagsLocal, setShowTagsLocal] = useState(false)
-  const [aiTagging, setAiTagging] = useState(false)
+  const showTags = showTagsProp ?? showTagsLocal
-  const [aiTagError, setAiTagError] = useState<string | null>(null)
+  const setShowTags = onShowTagsChange ?? setShowTagsLocal
-  const [tagRefreshKey, setTagRefreshKey] = useState(0)
 
   useEffect(() => {
     const handleKey = (e: KeyboardEvent) => {
@@ -50,85 +53,53 @@ export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, i
   return (
     <div
       ref={overlayRef}
-      className="fixed inset-0 z-50 flex flex-col items-center p-4 gap-3 overflow-hidden max-h-screen"
+      className="fixed inset-0 z-50 overflow-hidden"
-      style={{ backgroundColor: 'rgba(0,0,0,0.9)', height: '100vh', maxHeight: '100vh' }}
+      style={{ backgroundColor: 'rgba(0,0,0,0.9)', height: '100vh' }}
       onClick={handleOverlayClick}
     >
-      {/* Toolbar — collapses to just filename when tag panel is open */}
+      {/* Outer flex — row on md+, col on mobile when panel open */}
-      <div className={`flex items-center justify-between w-full flex-shrink-0 ${showTags ? '' : 'max-w-4xl'}`}>
+      <div className={`flex h-full w-full ${showTags ? 'flex-col md:flex-row' : 'flex-row'}`}>
-        <span className="text-sm truncate max-w-[80%]" style={{ color: 'var(--text-secondary)' }}>
-          {name}
-        </span>
-        {!showTags && (
-          <div className="flex items-center gap-2 flex-shrink-0">
-            {itemKey && (
-              <button
-                onClick={(e) => { e.stopPropagation(); setShowTags(true) }}
-                className="w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors"
-                style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
-                onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'}
-                onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'}
-                aria-label="Show tags"
-                title="Tags"
-              >
-                🏷
-              </button>
-            )}
-            {onAiTag && (
-              <button
-                onClick={async (e) => {
-                  e.stopPropagation()
-                  setAiTagging(true)
-                  setAiTagError(null)
-                  try {
-                    await onAiTag()
-                    setTagRefreshKey((k) => k + 1)
-                    onTagsChanged?.()
-                  } catch (err) {
-                    setAiTagError(err instanceof Error ? err.message : 'AI tagging failed')
-                    setTimeout(() => setAiTagError(null), 4000)
-                  } finally {
-                    setAiTagging(false)
-                  }
-                }}
-                disabled={aiTagging}
-                className="w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors disabled:opacity-50"
-                style={{
-                  backgroundColor: aiTagError ? '#7f1d1d' : 'var(--surface)',
-                  color: aiTagError ? '#fca5a5' : 'var(--text-primary)',
-                }}
-                onMouseEnter={(e) => {
-                  if (!aiTagging && !aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'
-                }}
-                onMouseLeave={(e) => {
-                  if (!aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'
-                }}
-                aria-label="AI Tag this video"
-                title={aiTagError ?? (aiTagging ? 'Tagging…' : 'AI Tag')}
-              >
-                {aiTagging ? (
-                  <span className="animate-spin" style={{ display: 'inline-block' }}>⟳</span>
-                ) : '✨'}
-              </button>
-            )}
-            <button
-              onClick={onClose}
-              className="w-8 h-8 rounded-full flex items-center justify-center text-sm flex-shrink-0 transition-colors"
-              style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
-              onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'}
-              onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'}
-              aria-label="Close"
-            >
-              ✕
-            </button>
-          </div>
-        )}
-      </div>
 
-      {showTags ? (
+        {/* ── Video column ── */}
-        <div className="flex gap-4 w-full flex-1 min-h-0 items-start overflow-hidden">
+        <div className="flex flex-col flex-1 min-h-0 min-w-0 relative">
-          {/* Video */}
+
-          <div className="flex-1 min-w-0 min-h-0 flex items-center justify-center max-h-full relative">
+          {/* Toolbar — scoped to this column's width */}
+          <div className="flex items-center justify-between px-3 py-2 flex-shrink-0" onClick={(e) => e.stopPropagation()}>
+            <span className="text-sm truncate mr-2" style={{ color: 'var(--text-secondary)' }}>
+              {name}
+            </span>
+            <div className="flex items-center gap-1.5 flex-shrink-0">
+              {itemKey && !showTags && (
+                <button
+                  onClick={() => setShowTags(true)}
+                  className={smallBtn}
+                  style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
+                  onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'}
+                  onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'}
+                  aria-label="Show tags"
+                  title="Tags"
+                >
+                  🏷
+                </button>
+              )}
+              {!showTags && (
+                <button
+                  onClick={onClose}
+                  className={smallBtn}
+                  style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
+                  onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'}
+                  onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'}
+                  aria-label="Close"
+                  title="Close"
+                >
+                  ✕
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* Video area — single element, never remounts on panel toggle */}
+          <div className="relative flex-1 min-h-0" onClick={(e) => e.stopPropagation()}>
             <video
               key={url}
               src={url}
@@ -136,128 +107,18 @@ export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, i
               autoPlay={autoPlay}
               muted={muted}
               loop={loop}
-              className="w-full h-full object-contain rounded-lg"
+              playsInline
+              className="w-full h-full object-contain"
               style={{ backgroundColor: '#000' }}
-              onClick={(e) => e.stopPropagation()}
             />
-            {onPrev && (
-              <button
-                onClick={(e) => { e.stopPropagation(); onPrev() }}
-                className="absolute left-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
-                style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
-                aria-label="Previous"
-              >
-                ‹
-              </button>
-            )}
-            {onNext && (
-              <button
-                onClick={(e) => { e.stopPropagation(); onNext() }}
-                className="absolute right-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
-                style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
-                aria-label="Next"
-              >
-                ›
-              </button>
-            )}
           </div>
 
-          {/* Tag panel */}
+          {/* Prev/Next — positioned relative to the full column height (incl. toolbar)
-          <div
+              so they align with ImageLightbox's buttons which span the full viewport */}
-            className="w-80 h-full max-h-full flex-shrink-0 rounded-xl overflow-y-auto p-4 flex flex-col gap-4"
-            style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {/* Panel header — hide panel + AI tagger + close */}
-            <div className="flex items-center justify-between flex-shrink-0">
-              <button
-                onClick={() => setShowTags(false)}
-                className={smallBtn}
-                style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}
-                onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'}
-                onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'}
-                aria-label="Hide panel"
-                title="Hide panel"
-              >
-                ›
-              </button>
-              <div className="flex items-center gap-1.5">
-                {onAiTag && (
-                  <button
-                    onClick={async (e) => {
-                      e.stopPropagation()
-                      setAiTagging(true)
-                      setAiTagError(null)
-                      try {
-                        await onAiTag()
-                        setTagRefreshKey((k) => k + 1)
-                        onTagsChanged?.()
-                      } catch (err) {
-                        setAiTagError(err instanceof Error ? err.message : 'AI tagging failed')
-                        setTimeout(() => setAiTagError(null), 4000)
-                      } finally {
-                        setAiTagging(false)
-                      }
-                    }}
-                    disabled={aiTagging}
-                    className={`${smallBtn} disabled:opacity-50`}
-                    style={{
-                      backgroundColor: aiTagError ? '#7f1d1d' : 'var(--border)',
-                      color: aiTagError ? '#fca5a5' : 'var(--text-secondary)',
-                      fontSize: '1rem',
-                    }}
-                    onMouseEnter={(e) => {
-                      if (!aiTagging && !aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'
-                    }}
-                    onMouseLeave={(e) => {
-                      if (!aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
-                    }}
-                    aria-label="AI Tag this video"
-                    title={aiTagError ?? (aiTagging ? 'Tagging…' : 'AI Tag')}
-                  >
-                    {aiTagging ? <span className="animate-spin" style={{ display: 'inline-block' }}>⟳</span> : '✨'}
-                  </button>
-                )}
-                <button
-                  onClick={onClose}
-                  className={smallBtn}
-                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}
-                  onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'}
-                  onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'}
-                  aria-label="Close"
-                  title="Close"
-                >
-                  ✕
-                </button>
-              </div>
-            </div>
-
-            {/* Tags section */}
-            <div style={{ borderTop: '1px solid var(--border)', paddingTop: '1rem' }}>
-              <p className="text-xs font-semibold uppercase tracking-wider mb-3" style={{ color: 'var(--text-secondary)' }}>
-                Tags
-              </p>
-              <TagSelector itemKey={itemKey!} onTagsChanged={onTagsChanged} refreshKey={tagRefreshKey} />
-            </div>
-          </div>
-        </div>
-      ) : (
-        <div className="w-full flex-1 min-h-0 flex items-center justify-center overflow-hidden max-h-full relative">
-          <video
-            key={url}
-            src={url}
-            controls
-            autoPlay={autoPlay}
-            muted={muted}
-            loop={loop}
-            className="w-full h-full max-w-4xl object-contain rounded-lg"
-            style={{ backgroundColor: '#000' }}
-            onClick={(e) => e.stopPropagation()}
-          />
           {onPrev && (
             <button
               onClick={(e) => { e.stopPropagation(); onPrev() }}
-              className="absolute left-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
+              className="absolute left-2 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
               style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
               aria-label="Previous"
             >
@@ -267,7 +128,7 @@ export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, i
           {onNext && (
             <button
               onClick={(e) => { e.stopPropagation(); onNext() }}
-              className="absolute right-2 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
+              className="absolute right-2 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
               style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
               aria-label="Next"
             >
@@ -275,7 +136,19 @@ export default function VideoPlayerModal({ url, name, onClose, onPrev, onNext, i
             </button>
           )}
         </div>
-      )}
+
+        {/* ── Tag panel ── bottom half on mobile, right sidebar on desktop */}
+        {showTags && (
+          <MediaTagPanel
+            itemKey={itemKey!}
+            onHide={() => setShowTags(false)}
+            onClose={onClose}
+            onTagsChanged={onTagsChanged}
+            onAiTag={readOnly ? undefined : onAiTag}
+            readOnly={readOnly}
+          />
+        )}
+      </div>
     </div>
   )
 }

src/components/movies/MovieDetailModal.tsx

@@ -2,7 +2,8 @@
 
 import { useEffect, useRef, useState } from 'react'
 import type { Movie } from '@/types'
-import TagSelector from '@/components/tags/TagSelector'
+import MediaTagPanel from '@/components/tags/MediaTagPanel'
+import AssignedTagBadges from '@/components/tags/AssignedTagBadges'
 import VideoPlayerModal from '@/components/mixed/VideoPlayerModal'
 
 interface Props {
@@ -14,9 +15,10 @@ interface Props {
   onTagsChanged?: () => void
   onDeleted: (movieId: string) => void
   onMetadataRefreshed?: () => void
+  readOnly?: boolean
 }
 
-export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, onNext, onTagsChanged, onDeleted, onMetadataRefreshed }: Props) {
+export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, onNext, onTagsChanged, onDeleted, onMetadataRefreshed, readOnly }: Props) {
   const overlayRef = useRef<HTMLDivElement>(null)
   const menuRef = useRef<HTMLDivElement>(null)
   const [playing, setPlaying] = useState(false)
@@ -32,15 +34,22 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, on
   const [renameName, setRenameName] = useState('')
   const [renameError, setRenameError] = useState<string | null>(null)
   const [renameSaving, setRenameSaving] = useState(false)
+  const [showTagPanel, setShowTagPanel] = useState(false)
+  const [tagRefreshKey, setTagRefreshKey] = useState(0)
+
+  const smallBtn = 'w-7 h-7 rounded-full flex items-center justify-center transition-colors flex-shrink-0'
 
   useEffect(() => {
     const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowLeft') { onPrev?.(); return }
+      if (e.key === 'ArrowRight') { onNext?.(); return }
       if (e.key === 'Escape') {
         if (menuOpen) { setMenuOpen(false); return }
         if (confirming) { setConfirming(false); return }
         if (warnRefresh) { setWarnRefresh(false); return }
         if (editing) { setEditing(false); return }
         if (renaming) { setRenaming(false); return }
+        if (showTagPanel) { setShowTagPanel(false); return }
         onClose()
       }
     }
@@ -50,7 +59,7 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, on
       document.removeEventListener('keydown', handleKey)
       document.body.style.overflow = ''
     }
-  }, [onClose, menuOpen, confirming, editing, warnRefresh, renaming])
+  }, [onClose, onPrev, onNext, menuOpen, confirming, editing, warnRefresh, renaming, showTagPanel])
 
   // Close menu on outside click
   useEffect(() => {
@@ -132,7 +141,6 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, on
 
   const handleStartRename = () => {
     setMenuOpen(false)
-    // movie.id is the encoded folder name
     setRenameName(decodeURIComponent(movie.id))
     setRenameError(null)
     setRenaming(true)
@@ -187,339 +195,387 @@ export default function MovieDetailModal({ movie, libraryId, onClose, onPrev, on
   return (
     <div
       ref={overlayRef}
-      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      className="fixed inset-0 z-50 overflow-hidden"
-      style={{ backgroundColor: 'rgba(0,0,0,0.75)' }}
+      style={{ backgroundColor: 'rgba(0,0,0,0.75)', height: '100vh' }}
       onClick={handleOverlayClick}
     >
-      <div
+      {/* Outer flex — row on md+, col on mobile when panel open */}
-        className="relative w-full max-w-lg rounded-2xl overflow-hidden shadow-2xl"
+      <div className={`flex h-full w-full ${showTagPanel ? 'flex-col md:flex-row' : ''}`}>
-        style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
-      >
-        {/* Close button */}
-        <button
-          onClick={onClose}
-          className="absolute top-3 right-3 z-10 w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors"
-          style={{ backgroundColor: 'rgba(0,0,0,0.5)', color: 'var(--text-primary)' }}
-          onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.8)')}
-          onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.5)')}
-          aria-label="Close"
-        >
-          ✕
-        </button>
 
-        {/* Prev / Next buttons on the detail card */}
+        {/* ── Left pane — relative container for floating controls ── */}
-        {onPrev && (
+        <div className="flex-1 min-h-0 min-w-0 relative" onClick={() => onClose()}>
-          <button
+          {/* Scrollable card area */}
-            onClick={onPrev}
+          <div className="h-full overflow-y-auto flex items-center justify-center p-4">
-            className="absolute top-3 left-3 z-10 w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors"
+          <div
-            style={{ backgroundColor: 'rgba(0,0,0,0.5)', color: 'var(--text-primary)' }}
+            className="w-full max-w-lg rounded-2xl overflow-hidden shadow-2xl"
-            onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.8)')}
+            style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
-            onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.5)')}
+            onClick={(e) => e.stopPropagation()}
-            aria-label="Previous movie"
           >
-            ‹
-          </button>
-        )}
-        {onNext && (
-          <button
-            onClick={onNext}
-            className="absolute top-3 z-10 w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors"
-            style={{ backgroundColor: 'rgba(0,0,0,0.5)', color: 'var(--text-primary)', right: onPrev ? '3rem' : undefined }}
-            onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.8)')}
-            onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(0,0,0,0.5)')}
-            aria-label="Next movie"
-          >
-            ›
-          </button>
-        )}
 
-        {/* Hero image */}
+            {/* Hero image */}
-        <div className="w-full" style={{ backgroundColor: 'var(--border)' }}>
+            <div className="w-full" style={{ backgroundColor: 'var(--border)' }}>
-          {heroUrl ? (
+              {heroUrl ? (
-            // eslint-disable-next-line @next/next/no-img-element
+                // eslint-disable-next-line @next/next/no-img-element
-            <img
+                <img
-              src={heroUrl}
+                  src={heroUrl}
-              alt={movie.title}
+                  alt={movie.title}
-              className="w-full object-cover max-h-64"
+                  className="w-full object-cover max-h-64"
-            />
+                />
-          ) : (
+              ) : (
-            <div className="h-40 flex items-center justify-center text-5xl">🎬</div>
+                <div className="h-40 flex items-center justify-center text-5xl">🎬</div>
-          )}
+              )}
-        </div>
+            </div>
 
-        {/* Info */}
+            {/* Info */}
-        <div className="p-5">
+            <div className="p-5">
-          {/* Title row with kebab menu */}
+              {/* Title row with kebab menu */}
-          <div className="flex items-start gap-2 mb-1">
+              <div className="flex items-start gap-2 mb-1">
-            <h2 className="text-lg font-semibold flex-1 min-w-0" style={{ color: 'var(--text-primary)' }}>
+                <h2 className="text-lg font-semibold flex-1 min-w-0" style={{ color: 'var(--text-primary)' }}>
-              {movie.title}
+                  {movie.title}
-            </h2>
+                </h2>
-            {movie.year && (
+                {movie.year && (
-              <span className="text-sm flex-shrink-0 mt-0.5" style={{ color: 'var(--text-secondary)' }}>
+                  <span className="text-sm flex-shrink-0 mt-0.5" style={{ color: 'var(--text-secondary)' }}>
-                {movie.year}
+                    {movie.year}
-              </span>
+                  </span>
-            )}
+                )}
-            {/* Kebab menu */}
+                {/* Kebab menu */}
-            <div className="relative flex-shrink-0" ref={menuRef}>
+                {!readOnly && <div className="relative flex-shrink-0" ref={menuRef}>
-              <button
+                  <button
-                onClick={() => { setMenuOpen((o) => !o); setConfirming(false) }}
+                    onClick={() => { setMenuOpen((o) => !o); setConfirming(false) }}
-                className="w-7 h-7 rounded-lg flex items-center justify-center transition-colors"
+                    className="w-7 h-7 rounded-lg flex items-center justify-center transition-colors"
-                style={{ color: 'var(--text-secondary)', backgroundColor: 'transparent' }}
+                    style={{ color: 'var(--text-secondary)', backgroundColor: 'transparent' }}
-                onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
+                    onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
-                onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
+                    onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
-                aria-label="More options"
+                    aria-label="More options"
-              >
+                  >
-                ⋮
+                    ⋮
-              </button>
+                  </button>
-              {menuOpen && (
+                  {menuOpen && (
+                    <div
+                      className="absolute right-0 top-full mt-1 rounded-lg shadow-lg overflow-hidden z-20 min-w-max"
+                      style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+                    >
+                      <button
+                        onClick={handleRefreshMetadata}
+                        disabled={refreshing}
+                        className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors disabled:opacity-50"
+                        style={{ color: 'var(--text-primary)' }}
+                        onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
+                        onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
+                      >
+                        {refreshing ? 'Refreshing…' : 'Refresh metadata'}
+                      </button>
+                      <button
+                        onClick={handleStartEditing}
+                        className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
+                        style={{ color: 'var(--text-primary)' }}
+                        onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
+                        onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
+                      >
+                        Edit metadata
+                      </button>
+                      <button
+                        onClick={handleStartRename}
+                        className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
+                        style={{ color: 'var(--text-primary)' }}
+                        onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
+                        onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
+                      >
+                        Rename folder
+                      </button>
+                      <button
+                        onClick={() => { setMenuOpen(false); setConfirming(true) }}
+                        className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
+                        style={{ color: '#fca5a5' }}
+                        onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
+                        onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
+                      >
+                        Delete movie
+                      </button>
+                    </div>
+                  )}
+                </div>}
+              </div>
+
+              {/* Rename inline input */}
+              {renaming && (
+                <div className="flex flex-col gap-2 mb-3">
+                  <div className="flex gap-2">
+                    <input
+                      type="text"
+                      value={renameName}
+                      onChange={(e) => setRenameName(e.target.value)}
+                      onKeyDown={(e) => { if (e.key === 'Enter') handleRename(); if (e.key === 'Escape') setRenaming(false) }}
+                      className="flex-1 px-3 py-1.5 rounded-lg text-sm min-w-0"
+                      style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)', border: '1px solid var(--border)' }}
+                      autoFocus
+                    />
+                    <button
+                      onClick={() => setRenaming(false)}
+                      className="px-2 py-1.5 rounded-lg text-sm transition-colors"
+                      style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      onClick={handleRename}
+                      disabled={renameSaving}
+                      className="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
+                      style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
+                    >
+                      {renameSaving ? '…' : 'Rename'}
+                    </button>
+                  </div>
+                  {renameError && <p className="text-xs" style={{ color: '#fca5a5' }}>{renameError}</p>}
+                </div>
+              )}
+
+              {editing ? (
+                <div className="flex flex-col gap-3 mb-4">
+                  <div>
+                    <label className="text-xs font-medium mb-1 block" style={{ color: 'var(--text-secondary)' }}>Title</label>
+                    <input
+                      type="text"
+                      value={editForm.title}
+                      onChange={(e) => setEditForm((f) => ({ ...f, title: e.target.value }))}
+                      className="w-full px-3 py-1.5 rounded-lg text-sm"
+                      style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)', border: '1px solid var(--border)' }}
+                      autoFocus
+                    />
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium mb-1 block" style={{ color: 'var(--text-secondary)' }}>Year</label>
+                    <input
+                      type="number"
+                      value={editForm.year}
+                      onChange={(e) => setEditForm((f) => ({ ...f, year: e.target.value }))}
+                      className="w-full px-3 py-1.5 rounded-lg text-sm"
+                      style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)', border: '1px solid var(--border)' }}
+                    />
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium mb-1 block" style={{ color: 'var(--text-secondary)' }}>Plot</label>
+                    <textarea
+                      rows={3}
+                      value={editForm.plot}
+                      onChange={(e) => setEditForm((f) => ({ ...f, plot: e.target.value }))}
+                      className="w-full px-3 py-1.5 rounded-lg text-sm resize-none"
+                      style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)', border: '1px solid var(--border)' }}
+                    />
+                  </div>
+                  <div>
+                    <label className="text-xs font-medium mb-1 block" style={{ color: 'var(--text-secondary)' }}>Genres (comma-separated)</label>
+                    <input
+                      type="text"
+                      value={editForm.genres}
+                      onChange={(e) => setEditForm((f) => ({ ...f, genres: e.target.value }))}
+                      className="w-full px-3 py-1.5 rounded-lg text-sm"
+                      style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)', border: '1px solid var(--border)' }}
+                    />
+                  </div>
+                  <div className="flex gap-2 justify-end">
+                    <button
+                      onClick={() => setEditing(false)}
+                      className="px-3 py-1.5 rounded-lg text-sm transition-colors"
+                      style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      onClick={handleSaveMetadata}
+                      disabled={saving}
+                      className="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
+                      style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
+                    >
+                      {saving ? 'Saving…' : 'Save'}
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* Meta row */}
+                  {(movie.rating !== null || movie.runtime !== null || movie.genres.length > 0) && (
+                    <div className="flex flex-wrap items-center gap-2 mb-3">
+                      {movie.rating !== null && (
+                        <span className="text-xs px-1.5 py-0.5 rounded" style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}>
+                          ★ {movie.rating.toFixed(1)}
+                        </span>
+                      )}
+                      {movie.runtime !== null && (
+                        <span className="text-xs" style={{ color: 'var(--text-secondary)' }}>
+                          {movie.runtime} min
+                        </span>
+                      )}
+                      {movie.genres.map((g) => (
+                        <span key={g} className="text-xs px-1.5 py-0.5 rounded" style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}>
+                          {g}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+
+                  {movie.plot && (
+                    <p className="text-sm mb-4 line-clamp-4" style={{ color: 'var(--text-secondary)' }}>
+                      {movie.plot}
+                    </p>
+                  )}
+                </>
+              )}
+
+              {/* NFO refresh warning */}
+              {warnRefresh && (
                 <div
-                  className="absolute right-0 top-full mt-1 rounded-lg shadow-lg overflow-hidden z-20 min-w-max"
+                  className="flex items-center gap-3 mb-4 px-3 py-2.5 rounded-lg text-sm"
-                  style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+                  style={{ backgroundColor: '#78350f33', border: '1px solid #78350f' }}
                 >
+                  <p className="flex-1 text-xs" style={{ color: '#fbbf24' }}>
+                    Refreshing from NFO will overwrite your manual edits.
+                  </p>
                   <button
-                    onClick={handleRefreshMetadata}
+                    onClick={() => setWarnRefresh(false)}
-                    disabled={refreshing}
+                    className="text-xs px-2 py-1 rounded flex-shrink-0 transition-colors"
-                    className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors disabled:opacity-50"
+                    style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
-                    style={{ color: 'var(--text-primary)' }}
-                    onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
-                    onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
                   >
-                    {refreshing ? 'Refreshing…' : 'Refresh metadata'}
+                    Cancel
                   </button>
                   <button
-                    onClick={handleStartEditing}
+                    onClick={doRefreshMetadata}
-                    className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
+                    className="text-xs px-2 py-1 rounded flex-shrink-0 transition-colors"
-                    style={{ color: 'var(--text-primary)' }}
+                    style={{ backgroundColor: '#78350f', color: '#fbbf24' }}
-                    onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
-                    onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
                   >
-                    Edit metadata
+                    Overwrite
-                  </button>
-                  <button
-                    onClick={handleStartRename}
-                    className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
-                    style={{ color: 'var(--text-primary)' }}
-                    onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
-                    onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
-                  >
-                    Rename folder
-                  </button>
-                  <button
-                    onClick={() => { setMenuOpen(false); setConfirming(true) }}
-                    className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
-                    style={{ color: '#fca5a5' }}
-                    onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
-                    onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
-                  >
-                    Delete movie
                   </button>
                 </div>
               )}
-            </div>
-          </div>
 
-          {/* Rename inline input */}
+              {/* Confirmation banner */}
-          {renaming && (
+              {confirming && (
-            <div className="flex flex-col gap-2 mb-3">
+                <div
+                  className="flex items-center gap-3 mb-4 px-3 py-2.5 rounded-lg text-sm"
+                  style={{ backgroundColor: '#7f1d1d33', border: '1px solid #7f1d1d' }}
+                >
+                  <p className="flex-1 text-xs" style={{ color: '#fca5a5' }}>
+                    Permanently delete this movie and all its files?
+                  </p>
+                  <button
+                    onClick={() => setConfirming(false)}
+                    className="text-xs px-2 py-1 rounded flex-shrink-0 transition-colors"
+                    style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
+                    onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
+                    onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={handleConfirmDelete}
+                    disabled={deleting}
+                    className="text-xs px-2 py-1 rounded flex-shrink-0 transition-colors disabled:opacity-50"
+                    style={{ backgroundColor: '#7f1d1d', color: '#fca5a5' }}
+                    onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = '#991b1b')}
+                    onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = '#7f1d1d')}
+                  >
+                    {deleting ? 'Deleting…' : 'Yes, delete'}
+                  </button>
+                </div>
+              )}
+
+              {/* Assigned tags (read-only) above action buttons */}
+              {movie.item_key && (
+                <div className="mb-3">
+                  <AssignedTagBadges itemKey={movie.item_key} refreshKey={tagRefreshKey} />
+                </div>
+              )}
+
+              {/* Action buttons row: Play + Download */}
               <div className="flex gap-2">
-                <input
-                  type="text"
-                  value={renameName}
-                  onChange={(e) => setRenameName(e.target.value)}
-                  onKeyDown={(e) => { if (e.key === 'Enter') handleRename(); if (e.key === 'Escape') setRenaming(false) }}
-                  className="flex-1 px-3 py-1.5 rounded-lg text-sm min-w-0"
-                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)', border: '1px solid var(--border)' }}
-                  autoFocus
-                />
                 <button
-                  onClick={() => setRenaming(false)}
+                  onClick={() => setPlaying(true)}
-                  className="px-2 py-1.5 rounded-lg text-sm transition-colors"
+                  className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-colors"
-                  style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
-                >
-                  Cancel
-                </button>
-                <button
-                  onClick={handleRename}
-                  disabled={renameSaving}
-                  className="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
                   style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
+                  onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--accent-hover)')}
+                  onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--accent)')}
                 >
-                  {renameSaving ? '…' : 'Rename'}
+                  <span>▶</span>
+                  Play
                 </button>
-              </div>
+                <a
-              {renameError && <p className="text-xs" style={{ color: '#fca5a5' }}>{renameError}</p>}
+                  href={videoUrl}
-            </div>
+                  download
-          )}
+                  className="flex items-center justify-center px-3 py-2.5 rounded-lg text-sm font-medium transition-colors"
-
+                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)' }}
-          {editing ? (
+                  onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)')}
-            <div className="flex flex-col gap-3 mb-4">
+                  onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
-              <div>
+                  onClick={(e) => e.stopPropagation()}
-                <label className="text-xs font-medium mb-1 block" style={{ color: 'var(--text-secondary)' }}>Title</label>
+                  title="Download"
-                <input
+                  aria-label="Download"
-                  type="text"
-                  value={editForm.title}
-                  onChange={(e) => setEditForm((f) => ({ ...f, title: e.target.value }))}
-                  className="w-full px-3 py-1.5 rounded-lg text-sm"
-                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)', border: '1px solid var(--border)' }}
-                  autoFocus
-                />
-              </div>
-              <div>
-                <label className="text-xs font-medium mb-1 block" style={{ color: 'var(--text-secondary)' }}>Year</label>
-                <input
-                  type="number"
-                  value={editForm.year}
-                  onChange={(e) => setEditForm((f) => ({ ...f, year: e.target.value }))}
-                  className="w-full px-3 py-1.5 rounded-lg text-sm"
-                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)', border: '1px solid var(--border)' }}
-                />
-              </div>
-              <div>
-                <label className="text-xs font-medium mb-1 block" style={{ color: 'var(--text-secondary)' }}>Plot</label>
-                <textarea
-                  rows={3}
-                  value={editForm.plot}
-                  onChange={(e) => setEditForm((f) => ({ ...f, plot: e.target.value }))}
-                  className="w-full px-3 py-1.5 rounded-lg text-sm resize-none"
-                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)', border: '1px solid var(--border)' }}
-                />
-              </div>
-              <div>
-                <label className="text-xs font-medium mb-1 block" style={{ color: 'var(--text-secondary)' }}>Genres (comma-separated)</label>
-                <input
-                  type="text"
-                  value={editForm.genres}
-                  onChange={(e) => setEditForm((f) => ({ ...f, genres: e.target.value }))}
-                  className="w-full px-3 py-1.5 rounded-lg text-sm"
-                  style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)', border: '1px solid var(--border)' }}
-                />
-              </div>
-              <div className="flex gap-2 justify-end">
-                <button
-                  onClick={() => setEditing(false)}
-                  className="px-3 py-1.5 rounded-lg text-sm transition-colors"
-                  style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
                 >
-                  Cancel
+                  ↓
-                </button>
+                </a>
-                <button
-                  onClick={handleSaveMetadata}
-                  disabled={saving}
-                  className="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
-                  style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
-                >
-                  {saving ? 'Saving…' : 'Save'}
-                </button>
               </div>
             </div>
-          ) : (
-            <>
-              {/* Meta row */}
-              {(movie.rating !== null || movie.runtime !== null || movie.genres.length > 0) && (
-                <div className="flex flex-wrap items-center gap-2 mb-3">
-                  {movie.rating !== null && (
-                    <span className="text-xs px-1.5 py-0.5 rounded" style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}>
-                      ★ {movie.rating.toFixed(1)}
-                    </span>
-                  )}
-                  {movie.runtime !== null && (
-                    <span className="text-xs" style={{ color: 'var(--text-secondary)' }}>
-                      {movie.runtime} min
-                    </span>
-                  )}
-                  {movie.genres.map((g) => (
-                    <span key={g} className="text-xs px-1.5 py-0.5 rounded" style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}>
-                      {g}
-                    </span>
-                  ))}
-                </div>
-              )}
-
-              {movie.plot && (
-                <p className="text-sm mb-4 line-clamp-4" style={{ color: 'var(--text-secondary)' }}>
-                  {movie.plot}
-                </p>
-              )}
-            </>
-          )}
-
-          {/* NFO refresh warning */}
-          {warnRefresh && (
-            <div
-              className="flex items-center gap-3 mb-4 px-3 py-2.5 rounded-lg text-sm"
-              style={{ backgroundColor: '#78350f33', border: '1px solid #78350f' }}
-            >
-              <p className="flex-1 text-xs" style={{ color: '#fbbf24' }}>
-                Refreshing from NFO will overwrite your manual edits.
-              </p>
-              <button
-                onClick={() => setWarnRefresh(false)}
-                className="text-xs px-2 py-1 rounded flex-shrink-0 transition-colors"
-                style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
-              >
-                Cancel
-              </button>
-              <button
-                onClick={doRefreshMetadata}
-                className="text-xs px-2 py-1 rounded flex-shrink-0 transition-colors"
-                style={{ backgroundColor: '#78350f', color: '#fbbf24' }}
-              >
-                Overwrite
-              </button>
-            </div>
-          )}
-
-          {/* Confirmation banner */}
-          {confirming && (
-            <div
-              className="flex items-center gap-3 mb-4 px-3 py-2.5 rounded-lg text-sm"
-              style={{ backgroundColor: '#7f1d1d33', border: '1px solid #7f1d1d' }}
-            >
-              <p className="flex-1 text-xs" style={{ color: '#fca5a5' }}>
-                Permanently delete this movie and all its files?
-              </p>
-              <button
-                onClick={() => setConfirming(false)}
-                className="text-xs px-2 py-1 rounded flex-shrink-0 transition-colors"
-                style={{ color: 'var(--text-secondary)', backgroundColor: 'var(--border)' }}
-                onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
-                onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleConfirmDelete}
-                disabled={deleting}
-                className="text-xs px-2 py-1 rounded flex-shrink-0 transition-colors disabled:opacity-50"
-                style={{ backgroundColor: '#7f1d1d', color: '#fca5a5' }}
-                onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = '#991b1b')}
-                onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = '#7f1d1d')}
-              >
-                {deleting ? 'Deleting…' : 'Yes, delete'}
-              </button>
-            </div>
-          )}
-
-          {/* Play button */}
-          <button
-            onClick={() => setPlaying(true)}
-            className="flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-lg font-medium text-sm transition-colors"
-            style={{ backgroundColor: 'var(--accent)', color: '#fff' }}
-            onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--accent-hover)')}
-            onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--accent)')}
-          >
-            <span>▶</span>
-            Play
-          </button>
-
-          {/* Tags */}
-          <div className="mt-4 pt-4" style={{ borderTop: '1px solid var(--border)' }}>
-            <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--text-secondary)' }}>
-              Tags
-            </p>
-            <TagSelector itemKey={movie.item_key!} onTagsChanged={onTagsChanged} />
           </div>
+          </div>
+
+          {/* Floating controls — tag + close */}
+          <div className="absolute top-4 right-4 z-10 flex items-center gap-1.5" onClick={(e) => e.stopPropagation()}>
+            {movie.item_key && !showTagPanel && (
+              <button
+                onClick={() => setShowTagPanel(true)}
+                className={smallBtn}
+                style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
+                onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)')}
+                onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)')}
+                aria-label="Show tags"
+                title="Tags"
+              >
+                🏷
+              </button>
+            )}
+            <button
+              onClick={onClose}
+              className={smallBtn}
+              style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
+              onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)')}
+              onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)')}
+              aria-label="Close"
+            >
+              ✕
+            </button>
+          </div>
+
+          {/* Prev / Next */}
+          {onPrev && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onPrev() }}
+              className="absolute left-2 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
+              style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
+              aria-label="Previous"
+            >
+              ‹
+            </button>
+          )}
+          {onNext && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onNext() }}
+              className="absolute right-2 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
+              style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
+              aria-label="Next"
+            >
+              ›
+            </button>
+          )}
         </div>
+
+        {/* ── Tag panel — bottom half on mobile, right sidebar on desktop ── */}
+        {showTagPanel && (
+          <MediaTagPanel
+            itemKey={movie.item_key!}
+            onHide={() => setShowTagPanel(false)}
+            onClose={onClose}
+            onTagsChanged={() => { setTagRefreshKey((k) => k + 1); onTagsChanged?.() }}
+            readOnly={readOnly}
+          />
+        )}
       </div>
     </div>
   )

src/components/movies/MoviesView.tsx

@@ -1,17 +1,19 @@
 'use client'
 
-import { useEffect, useState, useCallback } from 'react'
+import { useEffect, useState, useCallback, useMemo } from 'react'
-import type { Movie } from '@/types'
+import type { Movie, RatingOperator } from '@/types'
 import MovieDetailModal from './MovieDetailModal'
 import FilterPanel from '@/components/FilterPanel'
 import DoomScrollView, { type DoomScrollItem } from '@/components/DoomScrollView'
 import { isBrowserPlayable } from '@/lib/browser-media'
+import { useDebounce } from '@/hooks/useDebounce'
 
 interface Props {
   libraryId: string
+  readOnly?: boolean
 }
 
-export default function MoviesView({ libraryId }: Props) {
+export default function MoviesView({ libraryId, readOnly }: Props) {
   const [movies, setMovies] = useState<Movie[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -19,8 +21,13 @@ export default function MoviesView({ libraryId }: Props) {
   const [search, setSearch] = useState('')
   const [selectedTagIds, setSelectedTagIds] = useState<Set<string>>(new Set())
   const [assignments, setAssignments] = useState<Record<string, string[]>>({})
+  const [ratingValue, setRatingValue] = useState<number | null>(null)
+  const [ratingOperator, setRatingOperator] = useState<RatingOperator>('gte')
+  const debouncedSearch = useDebounce(search, 200)
   const [filterRefreshKey, setFilterRefreshKey] = useState(0)
-  const [showFilters, setShowFilters] = useState(true)
+  const [showFilters, setShowFilters] = useState(
+    () => typeof window !== 'undefined' && window.innerWidth >= 768
+  )
   const [doomScrollActive, setDoomScrollActive] = useState(false)
   const [doomScrollItems, setDoomScrollItems] = useState<DoomScrollItem[]>([])
 
@@ -55,14 +62,34 @@ export default function MoviesView({ libraryId }: Props) {
 
   useEffect(() => { fetchAssignments() }, [fetchAssignments])
 
-  const filtered = movies.filter((movie) => {
+  const handleRatingChange = (value: number | null, operator: RatingOperator) => {
-    if (search && !movie.title.toLowerCase().includes(search.toLowerCase())) return false
+    if (value === ratingValue && operator === ratingOperator) {
+      setRatingValue(null)
+    } else {
+      setRatingValue(value)
+      setRatingOperator(operator)
+    }
+  }
+
+  const filtered = useMemo(() => movies.filter((movie) => {
+    if (debouncedSearch) {
+      const q = debouncedSearch.toLowerCase()
+      if (![movie.title, movie.plot, movie.aiDescription, movie.extractedText, movie.extractedTextTranslated]
+          .some((f) => f?.toLowerCase().includes(q))) return false
+    }
     if (selectedTagIds.size > 0) {
       const movieTags = assignments[movie.item_key!] ?? []
       if (![...selectedTagIds].every((id) => movieTags.includes(id))) return false
     }
+    if (ratingValue !== null) {
+      const r = movie.userRating
+      if (r === null) return false
+      if (ratingOperator === 'gte' && r < ratingValue) return false
+      if (ratingOperator === 'eq'  && r !== ratingValue) return false
+      if (ratingOperator === 'lte' && r > ratingValue) return false
+    }
     return true
-  })
+  }), [movies, debouncedSearch, selectedTagIds, assignments, ratingValue, ratingOperator])
 
   const selected = selectedIndex !== null ? filtered[selectedIndex] ?? null : null
 
@@ -71,7 +98,7 @@ export default function MoviesView({ libraryId }: Props) {
     setMovies((prev) => prev.filter((m) => m.id !== movieId))
   }
 
-  const filtersActive = search !== '' || selectedTagIds.size > 0
+  const filtersActive = search !== '' || selectedTagIds.size > 0 || ratingValue !== null
 
   const handleDoomScroll = () => {
     // Use filtered movies — respects any active search/tag filters automatically
@@ -132,6 +159,9 @@ export default function MoviesView({ libraryId }: Props) {
               selectedTagIds={selectedTagIds}
               onTagToggle={toggleTag}
               refreshKey={filterRefreshKey}
+              ratingValue={ratingValue}
+              ratingOperator={ratingOperator}
+              onRatingChange={handleRatingChange}
             />
           </div>
         )}
@@ -201,6 +231,7 @@ export default function MoviesView({ libraryId }: Props) {
           <MovieDetailModal
             movie={selected}
             libraryId={libraryId}
+            readOnly={readOnly}
             onClose={() => setSelectedIndex(null)}
             onPrev={selectedIndex > 0 ? () => setSelectedIndex((i) => (i !== null ? i - 1 : null)) : undefined}
             onNext={selectedIndex < filtered.length - 1 ? () => setSelectedIndex((i) => (i !== null ? i + 1 : null)) : undefined}

src/components/tags/AssignedTagBadges.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import type { Tag, TagCategory } from '@/types'
+
+interface Props {
+  itemKey: string
+  refreshKey?: number
+}
+
+export default function AssignedTagBadges({ itemKey, refreshKey }: Props) {
+  const [tags, setTags] = useState<Tag[]>([])
+  const [categories, setCategories] = useState<TagCategory[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    setLoading(true)
+    fetch(`/api/tags/assignments?itemKey=${encodeURIComponent(itemKey)}`)
+      .then((r) => r.json())
+      .then((data: { tags: Tag[]; categories: TagCategory[] }) => {
+        setTags(data.tags ?? [])
+        setCategories(data.categories ?? [])
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false))
+  }, [itemKey, refreshKey])
+
+  if (loading) {
+    return (
+      <div className="flex flex-wrap gap-1.5">
+        {[60, 80, 50].map((w) => (
+          <div
+            key={w}
+            className="h-5 rounded-full animate-pulse"
+            style={{ width: w, backgroundColor: 'var(--border)' }}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  if (tags.length === 0) return null
+
+  const catMap = new Map(categories.map((c) => [c.id, c.name]))
+
+  // Group by category
+  const grouped = new Map<string | null, Tag[]>()
+  for (const tag of tags) {
+    const key = tag.categoryId ?? null
+    if (!grouped.has(key)) grouped.set(key, [])
+    grouped.get(key)!.push(tag)
+  }
+
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {Array.from(grouped.entries()).map(([catId, catTags]) => {
+        const catName = catId ? catMap.get(catId) : null
+        return catTags.map((tag) => (
+          <span
+            key={tag.id}
+            className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs"
+            style={{ backgroundColor: 'var(--border)', color: 'var(--text-primary)' }}
+          >
+            {catName && (
+              <span style={{ color: 'var(--text-secondary)' }}>{catName}:</span>
+            )}
+            {tag.name}
+          </span>
+        ))
+      })}
+    </div>
+  )
+}

src/components/tags/MediaTagPanel.tsx

@@ -0,0 +1,203 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import TagSelector from './TagSelector'
+
+interface Props {
+  itemKey: string
+  onHide: () => void
+  onClose: () => void
+  onTagsChanged?: () => void
+  externalRefreshKey?: number
+  onAiTag?: () => Promise<void>
+  disabled?: boolean
+  disabledMessage?: string
+  readOnly?: boolean
+  children?: React.ReactNode
+}
+
+const smallBtn = 'w-7 h-7 rounded-full flex items-center justify-center transition-colors flex-shrink-0'
+
+export default function MediaTagPanel({
+  itemKey,
+  onHide,
+  onClose,
+  onTagsChanged,
+  externalRefreshKey = 0,
+  onAiTag,
+  disabled,
+  disabledMessage,
+  readOnly,
+  children,
+}: Props) {
+  const [aiTagging, setAiTagging] = useState(false)
+  const [aiTagError, setAiTagError] = useState<string | null>(null)
+  const [internalRefreshKey, setInternalRefreshKey] = useState(0)
+  const [userRating, setUserRatingState] = useState<number | null>(null)
+  const [ratingHover, setRatingHover] = useState<number | null>(null)
+  const [savingRating, setSavingRating] = useState(false)
+
+  const fetchRating = useCallback(async () => {
+    if (!itemKey) return
+    const res = await fetch(`/api/ratings?itemKey=${encodeURIComponent(itemKey)}`)
+    if (res.ok) {
+      const { userRating: r } = await res.json()
+      setUserRatingState(r)
+    }
+  }, [itemKey])
+
+  useEffect(() => { fetchRating() }, [fetchRating])
+
+  const setRating = async (star: number) => {
+    const next = userRating === star ? null : star
+    setSavingRating(true)
+    try {
+      const res = await fetch('/api/ratings', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ itemKey, userRating: next }),
+      })
+      if (res.ok) setUserRatingState(next)
+    } finally {
+      setSavingRating(false)
+    }
+  }
+
+  const handleAiTag = async () => {
+    if (!onAiTag) return
+    setAiTagging(true)
+    setAiTagError(null)
+    try {
+      await onAiTag()
+      setInternalRefreshKey((k) => k + 1)
+      onTagsChanged?.()
+    } catch (err) {
+      setAiTagError(err instanceof Error ? err.message : 'AI tagging failed')
+      setTimeout(() => setAiTagError(null), 4000)
+    } finally {
+      setAiTagging(false)
+    }
+  }
+
+  return (
+    <div
+      className="flex-shrink-0 flex flex-col overflow-hidden w-full max-h-[50vh] md:w-80 md:max-h-none md:h-full"
+      style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {/* Panel header — ‹ hide | ✕ close */}
+      <div className="flex items-center justify-between p-4 flex-shrink-0">
+        <button
+          onClick={onHide}
+          className={smallBtn}
+          style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}
+          onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'}
+          onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'}
+          aria-label="Hide panel"
+          title="Hide panel"
+        >
+          ›
+        </button>
+        <button
+          onClick={onClose}
+          className={smallBtn}
+          style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)', fontSize: '0.85rem' }}
+          onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'}
+          onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'}
+          aria-label="Close"
+          title="Close"
+        >
+          ✕
+        </button>
+      </div>
+
+      {/* Scrollable content */}
+      <div className="overflow-y-auto flex-1 min-h-0 px-4 pb-4" style={{ borderTop: '1px solid var(--border)' }}>
+        {children}
+
+        {disabled || !itemKey ? (
+          disabledMessage ? (
+            <p className="text-xs mt-4 italic" style={{ color: 'var(--text-secondary)' }}>
+              {disabledMessage}
+            </p>
+          ) : null
+        ) : (
+          <>
+            {/* Rating section */}
+            <div className="mt-4 mb-3">
+              <p className="text-xs font-semibold uppercase tracking-wider mb-2" style={{ color: 'var(--text-secondary)' }}>
+                Rating
+              </p>
+              <div className="flex items-center gap-1" onMouseLeave={() => setRatingHover(null)}>
+                {[1, 2, 3, 4, 5].map((star) => {
+                  const filled = (ratingHover ?? userRating ?? 0) >= star
+                  return readOnly ? (
+                    <span
+                      key={star}
+                      style={{ fontSize: '1.1rem', color: (userRating ?? 0) >= star ? '#f59e0b' : 'var(--border)' }}
+                      aria-label={`${star} star`}
+                    >★</span>
+                  ) : (
+                    <button
+                      key={star}
+                      onClick={() => setRating(star)}
+                      onMouseEnter={() => setRatingHover(star)}
+                      disabled={savingRating}
+                      aria-label={`Rate ${star} star${star > 1 ? 's' : ''}`}
+                      style={{
+                        fontSize: '1.1rem',
+                        color: filled ? '#f59e0b' : 'var(--border)',
+                        background: 'none',
+                        border: 'none',
+                        padding: '0 1px',
+                        cursor: savingRating ? 'wait' : 'pointer',
+                        transition: 'color 0.1s',
+                        lineHeight: 1,
+                      }}
+                    >★</button>
+                  )
+                })}
+              </div>
+            </div>
+            {/* Tags section heading + optional AI button */}
+            <div className="flex items-center justify-between mb-3">
+              <p className="text-xs font-semibold uppercase tracking-wider" style={{ color: 'var(--text-secondary)' }}>
+                Tags
+              </p>
+              {onAiTag && (
+                <button
+                  onClick={handleAiTag}
+                  disabled={aiTagging}
+                  className={`${smallBtn} disabled:opacity-50`}
+                  style={{
+                    backgroundColor: aiTagError ? '#7f1d1d' : 'var(--border)',
+                    color: aiTagError ? '#fca5a5' : 'var(--text-secondary)',
+                    fontSize: '1rem',
+                  }}
+                  onMouseEnter={(e) => {
+                    if (!aiTagging && !aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--text-secondary)'
+                  }}
+                  onMouseLeave={(e) => {
+                    if (!aiTagError) (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)'
+                  }}
+                  aria-label="AI Tag"
+                  title={aiTagError ?? (aiTagging ? 'Tagging…' : 'AI Tag')}
+                >
+                  {aiTagging ? <span className="animate-spin" style={{ display: 'inline-block' }}>⟳</span> : '✨'}
+                </button>
+              )}
+            </div>
+            {aiTagError && <p className="text-xs mb-2" style={{ color: '#f87171' }}>{aiTagError}</p>}
+            <TagSelector
+              itemKey={itemKey}
+              onTagsChanged={onTagsChanged}
+              refreshKey={internalRefreshKey + externalRefreshKey}
+              hideDescription
+              readOnly={readOnly}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

src/components/tags/TagSelector.tsx

@@ -9,6 +9,7 @@ interface Props {
   onTagsChanged?: () => void
   refreshKey?: number
   hideDescription?: boolean
+  readOnly?: boolean
 }
 
 interface AllTags {
@@ -16,7 +17,7 @@ interface AllTags {
   tags: Tag[]
 }
 
-export default function TagSelector({ itemKey, onTagsChanged, refreshKey, hideDescription }: Props) {
+export default function TagSelector({ itemKey, onTagsChanged, refreshKey, hideDescription, readOnly }: Props) {
   const [assigned, setAssigned] = useState<{ tags: Tag[]; categories: TagCategory[] }>({
     tags: [],
     categories: [],
@@ -277,23 +278,25 @@ export default function TagSelector({ itemKey, onTagsChanged, refreshKey, hideDe
                           style={{ backgroundColor: 'var(--surface-hover)' }}
                         >
                           {tag.name}
-                          <button
+                          {!readOnly && (
-                            onClick={() => toggleTag(tag)}
+                            <button
-                            className="ml-0.5 leading-none transition-colors"
+                              onClick={() => toggleTag(tag)}
-                            style={{ color: 'var(--text-secondary)' }}
+                              className="ml-0.5 leading-none transition-colors"
-                            onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
+                              style={{ color: 'var(--text-secondary)' }}
-                            onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
+                              onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
-                            aria-label={`Remove tag ${tag.name}`}
+                              onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
-                          >
+                              aria-label={`Remove tag ${tag.name}`}
-                            ✕
+                            >
-                          </button>
+                              ✕
+                            </button>
+                          )}
                         </span>
                       ))}
                     </span>
                   )
                 })}
                 {ungrouped.map((tag) => (
-                  <TagBadge key={tag.id} tag={tag} onRemove={() => toggleTag(tag)} />
+                  <TagBadge key={tag.id} tag={tag} onRemove={readOnly ? undefined : () => toggleTag(tag)} />
                 ))}
               </>
             )
@@ -302,7 +305,7 @@ export default function TagSelector({ itemKey, onTagsChanged, refreshKey, hideDe
       )}
 
       {/* Tag picker grouped by category */}
-      <div className="flex flex-col gap-2">
+      {!readOnly && <div className="flex flex-col gap-2">
         {all.categories.map((category) => {
           const categoryTags = all.tags.filter((t) => t.categoryId === category.id)
           const search = categorySearches[category.id] ?? ''
@@ -531,7 +534,7 @@ export default function TagSelector({ itemKey, onTagsChanged, refreshKey, hideDe
             </button>
           )}
         </div>
-      </div>
+      </div>}
     </div>
   )
 }

src/components/tv/EpisodeCard.tsx

@@ -9,9 +9,10 @@ interface Props {
   onTag?: () => void
   onDelete?: () => void
   onRename?: (newName: string) => Promise<boolean>
+  downloadUrl?: string
 }
 
-export default function EpisodeCard({ episode, onClick, onTag, onDelete, onRename }: Props) {
+export default function EpisodeCard({ episode, onClick, onTag, onDelete, onRename, downloadUrl }: Props) {
   const epLabel = episode.episodeNumber !== null ? `E${String(episode.episodeNumber).padStart(2, '0')}` : null
   const menuRef = useRef<HTMLDivElement>(null)
   const [menuOpen, setMenuOpen] = useState(false)
@@ -79,7 +80,7 @@ export default function EpisodeCard({ episode, onClick, onTag, onDelete, onRenam
           </button>
         )}
         {/* Kebab menu */}
-        {onDelete && (
+        {(onDelete || downloadUrl) && (
           <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity hidden group-hover:block" ref={menuRef}>
             <button
               onClick={(e) => { e.stopPropagation(); setMenuOpen((o) => !o); setConfirming(false) }}
@@ -94,6 +95,19 @@ export default function EpisodeCard({ episode, onClick, onTag, onDelete, onRenam
                 className="absolute right-0 top-full mt-1 rounded-lg shadow-lg overflow-hidden z-20 min-w-max"
                 style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
               >
+                {downloadUrl && (
+                  <a
+                    href={downloadUrl}
+                    download
+                    onClick={(e) => { e.stopPropagation(); setMenuOpen(false) }}
+                    className="flex items-center gap-2 w-full px-4 py-2 text-sm text-left transition-colors"
+                    style={{ color: 'var(--text-primary)' }}
+                    onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--border)')}
+                    onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'transparent')}
+                  >
+                    Download
+                  </a>
+                )}
                 {onRename && (
                   <button
                     onClick={(e) => {

src/components/tv/TvView.tsx

@@ -1,22 +1,26 @@
 'use client'
 
-import { useEffect, useRef, useState, useCallback } from 'react'
+import { useEffect, useRef, useState, useCallback, useMemo } from 'react'
-import type { TvSeries, TvSeason, TvEpisode } from '@/types'
+import type { TvSeries, TvSeason, TvEpisode, RatingOperator } from '@/types'
+import { useDebounce } from '@/hooks/useDebounce'
 
 import FilterPanel from '@/components/FilterPanel'
 import VideoPlayerModal from '@/components/mixed/VideoPlayerModal'
+import MediaTagPanel from '@/components/tags/MediaTagPanel'
 import TagSelector from '@/components/tags/TagSelector'
+import AssignedTagBadges from '@/components/tags/AssignedTagBadges'
 import EpisodeCard from './EpisodeCard'
 import DoomScrollView, { type DoomScrollItem } from '@/components/DoomScrollView'
 import { isBrowserPlayable } from '@/lib/browser-media'
 
 interface Props {
   libraryId: string
+  readOnly?: boolean
 }
 
 type ViewLevel = 'series' | 'seasons' | 'episodes'
 
-export default function TvView({ libraryId }: Props) {
+export default function TvView({ libraryId, readOnly }: Props) {
   const [view, setView] = useState<ViewLevel>('series')
   const [series, setSeries] = useState<TvSeries[]>([])
   const [seasons, setSeasons] = useState<TvSeason[]>([])
@@ -30,8 +34,15 @@ export default function TvView({ libraryId }: Props) {
   const [selectedTagIds, setSelectedTagIds] = useState<Set<string>>(new Set())
   const [assignments, setAssignments] = useState<Record<string, string[]>>({})
   const [seriesEpisodeTags, setSeriesEpisodeTags] = useState<Record<string, string[]>>({})
+  const [ratingValue, setRatingValue] = useState<number | null>(null)
+  const [ratingOperator, setRatingOperator] = useState<RatingOperator>('gte')
+  const debouncedSearch = useDebounce(search, 200)
   const [filterRefreshKey, setFilterRefreshKey] = useState(0)
-  const [showFilters, setShowFilters] = useState(true)
+  const [showFilters, setShowFilters] = useState(
+    () => typeof window !== 'undefined' && window.innerWidth >= 768
+  )
+  const [selectedSeriesIndex, setSelectedSeriesIndex] = useState<number | null>(null)
+  const [selectedSeasonIndex, setSelectedSeasonIndex] = useState<number | null>(null)
   const [tagPanel, setTagPanel] = useState<{ itemKey: string; title: string } | null>(null)
   const [menuOpen, setMenuOpen] = useState(false)
   const [confirming, setConfirming] = useState(false)
@@ -48,7 +59,12 @@ export default function TvView({ libraryId }: Props) {
   const [doomScrollActive, setDoomScrollActive] = useState(false)
   const [doomScrollItems, setDoomScrollItems] = useState<DoomScrollItem[]>([])
   const [doomScrollLoading, setDoomScrollLoading] = useState(false)
+  const [showTagPanel, setShowTagPanel] = useState(false)
+  const [tagPanelItemKey, setTagPanelItemKey] = useState<string | null>(null)
+  const [tagPanelDisabled, setTagPanelDisabled] = useState(false)
+  const [tagRefreshKey, setTagRefreshKey] = useState(0)
   const menuRef = useRef<HTMLDivElement>(null)
+  const smallBtn = 'w-7 h-7 rounded-full flex items-center justify-center transition-colors flex-shrink-0'
 
   const toggleTag = (tagId: string) =>
     setSelectedTagIds((prev) => {
@@ -87,6 +103,7 @@ export default function TvView({ libraryId }: Props) {
   useEffect(() => { fetchSeriesEpisodeTags() }, [fetchSeriesEpisodeTags])
 
   const openSeries = (s: TvSeries) => {
+    setSelectedSeriesIndex(filteredSeries.indexOf(s))
     setSelectedSeries(s)
     setView('seasons')
     setLoading(true)
@@ -96,18 +113,17 @@ export default function TvView({ libraryId }: Props) {
       .then((data: TvSeason[]) => {
         setSeasons(data)
         setLoading(false)
-        // Flat series: a single synthetic season (id='.') means episodes live
-        // directly in the series folder — skip the seasons screen automatically.
-        if (data.length === 1 && data[0].id === '.') {
-          openSeason(data[0])
-        }
       })
       .catch(() => { setError('Failed to load seasons'); setLoading(false) })
   }
 
-  const openSeason = (season: TvSeason) => {
+  const openSeason = (season: TvSeason, index?: number) => {
+    setSelectedSeasonIndex(index ?? seasons.indexOf(season))
     setSelectedSeason(season)
     setView('episodes')
+    if (showTagPanel) {
+      setTagPanelDisabled(true)
+    }
     setLoading(true)
     setError(null)
     fetch(
@@ -134,14 +150,24 @@ export default function TvView({ libraryId }: Props) {
     setView('series')
     setSelectedSeries(null)
     setSelectedSeason(null)
+    setSelectedSeriesIndex(null)
+    setSelectedSeasonIndex(null)
     setMenuOpen(false)
     setConfirming(false)
+    setShowTagPanel(false)
+    setTagPanelItemKey(null)
+    setTagPanelDisabled(false)
   }
 
   const goToSeasons = () => {
     setView('seasons')
     setSelectedSeason(null)
+    setSelectedSeasonIndex(null)
     setConfirming(false)
+    if (showTagPanel && selectedSeries?.item_key) {
+      setTagPanelItemKey(selectedSeries.item_key)
+      setTagPanelDisabled(false)
+    }
   }
 
   const handleDeleteSeries = () => {
@@ -164,11 +190,18 @@ export default function TvView({ libraryId }: Props) {
     setRefreshingMeta(true)
     setWarnRefresh(false)
     const itemKey = `${libraryId}:tv_series:${selectedSeries.id}`
+    const currentId = selectedSeries.id
     fetch(
-      `/api/nfo-refresh?libraryId=${encodeURIComponent(libraryId)}&itemType=tv_series&itemKey=${encodeURIComponent(itemKey)}`,
+      `/api/nfo-refresh?libraryId=${encodeURIComponent(libraryId)}&itemType=tv_series&itemKey=${encodeURIComponent(itemKey)}&includeEpisodes=true`,
       { method: 'POST' }
     )
-      .then(() => fetchSeries())
+      .then(() => fetch(`/api/tv?libraryId=${encodeURIComponent(libraryId)}`))
+      .then((r) => r.json())
+      .then((data: TvSeries[]) => {
+        setSeries(data)
+        const updated = data.find((s) => s.id === currentId)
+        if (updated) setSelectedSeries(updated)
+      })
       .finally(() => setRefreshingMeta(false))
   }
 
@@ -312,29 +345,114 @@ export default function TvView({ libraryId }: Props) {
     }
   }
 
-  const filtersActive = search !== '' || selectedTagIds.size > 0
+  // Escape key + body scroll lock when modal is open
+  useEffect(() => {
+    if (view === 'series') return
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return
+      if (menuOpen) { setMenuOpen(false); return }
+      if (showTagPanel) { setShowTagPanel(false); return }
+      if (view === 'episodes') {
+        setView('seasons')
+        setSelectedSeason(null)
+        setConfirming(false)
+        if (selectedSeries?.item_key) {
+          setTagPanelItemKey(selectedSeries.item_key)
+          setTagPanelDisabled(false)
+        }
+        return
+      }
+      setView('series')
+      setSelectedSeries(null)
+      setSelectedSeason(null)
+      setMenuOpen(false)
+      setConfirming(false)
+      setShowTagPanel(false)
+      setTagPanelItemKey(null)
+      setTagPanelDisabled(false)
+    }
+    document.addEventListener('keydown', handleKey)
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.removeEventListener('keydown', handleKey)
+      document.body.style.overflow = ''
+    }
+  }, [view, menuOpen, showTagPanel, selectedSeries])
 
-  const filteredSeries = series.filter((s) => {
+  const filtersActive = search !== '' || selectedTagIds.size > 0 || ratingValue !== null
-    if (search && !s.title.toLowerCase().includes(search.toLowerCase())) return false
+
+  const handleRatingChange = (value: number | null, operator: RatingOperator) => {
+    if (value === ratingValue && operator === ratingOperator) {
+      setRatingValue(null)
+    } else {
+      setRatingValue(value)
+      setRatingOperator(operator)
+    }
+  }
+
+  const filteredSeries = useMemo(() => series.filter((s) => {
+    if (debouncedSearch) {
+      const q = debouncedSearch.toLowerCase()
+      if (![s.title, s.plot, s.aiDescription, s.extractedText, s.extractedTextTranslated]
+          .some((f) => f?.toLowerCase().includes(q))) return false
+    }
     if (selectedTagIds.size > 0) {
       const seriesTags = assignments[s.item_key!] ?? []
       const episodeTags = seriesEpisodeTags[s.id] ?? []
-      const allTags = seriesTags.length === 0 ? episodeTags
+      const allTags = [...new Set([...seriesTags, ...episodeTags])]
-        : episodeTags.length === 0 ? seriesTags
-        : [...new Set([...seriesTags, ...episodeTags])]
       if (![...selectedTagIds].every((id) => allTags.includes(id))) return false
     }
+    if (ratingValue !== null) {
+      const r = s.userRating
+      if (r === null) return false
+      if (ratingOperator === 'gte' && r < ratingValue) return false
+      if (ratingOperator === 'eq'  && r !== ratingValue) return false
+      if (ratingOperator === 'lte' && r > ratingValue) return false
+    }
     return true
-  })
+  }), [series, debouncedSearch, selectedTagIds, assignments, seriesEpisodeTags, ratingValue, ratingOperator])
 
-  const filteredEpisodes = episodes.filter((ep) => {
+  const filteredEpisodes = useMemo(() => episodes.filter((ep) => {
-    if (search && !ep.title.toLowerCase().includes(search.toLowerCase())) return false
+    if (debouncedSearch) {
+      const q = debouncedSearch.toLowerCase()
+      if (![ep.title, ep.plot, ep.aiDescription, ep.extractedText, ep.extractedTextTranslated]
+          .some((f) => f?.toLowerCase().includes(q))) return false
+    }
     if (selectedTagIds.size > 0) {
       const epTags = assignments[ep.item_key!] ?? []
       if (![...selectedTagIds].every((id) => epTags.includes(id))) return false
     }
+    if (ratingValue !== null) {
+      const r = ep.userRating
+      if (r === null) return false
+      if (ratingOperator === 'gte' && r < ratingValue) return false
+      if (ratingOperator === 'eq'  && r !== ratingValue) return false
+      if (ratingOperator === 'lte' && r > ratingValue) return false
+    }
     return true
-  })
+  }), [episodes, debouncedSearch, selectedTagIds, assignments, ratingValue, ratingOperator])
+
+  // Arrow key navigation for series/season levels (mirrors the prev/next UI buttons)
+  useEffect(() => {
+    if (view === 'series') return
+    const handleArrowKey = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowLeft') {
+        if (view === 'seasons' && selectedSeriesIndex !== null && selectedSeriesIndex > 0)
+          openSeries(filteredSeries[selectedSeriesIndex - 1])
+        else if (view === 'episodes' && selectedSeasonIndex !== null && selectedSeasonIndex > 0)
+          openSeason(seasons[selectedSeasonIndex - 1], selectedSeasonIndex - 1)
+      }
+      if (e.key === 'ArrowRight') {
+        if (view === 'seasons' && selectedSeriesIndex !== null && selectedSeriesIndex < filteredSeries.length - 1)
+          openSeries(filteredSeries[selectedSeriesIndex + 1])
+        else if (view === 'episodes' && selectedSeasonIndex !== null && selectedSeasonIndex < seasons.length - 1)
+          openSeason(seasons[selectedSeasonIndex + 1], selectedSeasonIndex + 1)
+      }
+    }
+    document.addEventListener('keydown', handleArrowKey)
+    return () => document.removeEventListener('keydown', handleArrowKey)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [view, selectedSeriesIndex, selectedSeasonIndex, filteredSeries, seasons])
 
   const playingEpisode = playingEpisodeIndex !== null ? episodes[playingEpisodeIndex] ?? null : null
 
@@ -350,6 +468,7 @@ export default function TvView({ libraryId }: Props) {
         onPrev={playingEpisodeIndex > 0 ? () => setPlayingEpisodeIndex((i) => (i !== null ? i - 1 : null)) : undefined}
         onNext={playingEpisodeIndex < episodes.length - 1 ? () => setPlayingEpisodeIndex((i) => (i !== null ? i + 1 : null)) : undefined}
         context="tv"
+        readOnly={readOnly}
       />
     )
   }
@@ -438,6 +557,9 @@ export default function TvView({ libraryId }: Props) {
                   selectedTagIds={selectedTagIds}
                   onTagToggle={toggleTag}
                   refreshKey={filterRefreshKey}
+                  ratingValue={ratingValue}
+                  ratingOperator={ratingOperator}
+                  onRatingChange={handleRatingChange}
                 />
               </div>
             )}
@@ -502,9 +624,76 @@ export default function TvView({ libraryId }: Props) {
             )}
             </div>
           </div>
+          {tagPanel && (
+            <div
+              className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4"
+              style={{ backgroundColor: 'rgba(0,0,0,0.6)' }}
+              onClick={(e) => { if (e.target === e.currentTarget) setTagPanel(null) }}
+            >
+              <div
+                className="w-full max-w-md rounded-2xl shadow-2xl overflow-hidden"
+                style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+              >
+                <div className="flex items-center justify-between px-5 py-4" style={{ borderBottom: '1px solid var(--border)' }}>
+                  <div className="min-w-0">
+                    <p className="text-xs font-semibold uppercase tracking-wider mb-0.5" style={{ color: 'var(--text-secondary)' }}>
+                      Tags
+                    </p>
+                    <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>
+                      {tagPanel.title}
+                    </p>
+                  </div>
+                  <button
+                    onClick={() => setTagPanel(null)}
+                    className="ml-4 w-8 h-8 flex-shrink-0 rounded-full flex items-center justify-center text-sm transition-colors"
+                    style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+                    onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
+                    onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
+                    aria-label="Close"
+                  >
+                    ✕
+                  </button>
+                </div>
+                <div className="px-5 py-4">
+                  <TagSelector
+                    itemKey={tagPanel.itemKey}
+                    onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments(); fetchSeriesEpisodeTags() }}
+                  />
+                </div>
+              </div>
+            </div>
+          )}
         </>
       )}
 
+      {(view === 'seasons' || view === 'episodes') && (
+        <div
+          className="fixed inset-0 z-50 overflow-hidden"
+          style={{ backgroundColor: 'rgba(0,0,0,0.75)', height: '100vh' }}
+        >
+          <div className={`flex h-full w-full ${showTagPanel ? 'flex-col md:flex-row' : ''}`}>
+            <div className="flex-1 min-h-0 min-w-0 relative" onClick={goToSeries}>
+              <div className="h-full overflow-y-auto flex items-center justify-center p-4">
+                <div
+                  className="w-full max-w-3xl rounded-2xl overflow-hidden shadow-2xl"
+                  style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  {view === 'episodes' && (
+                    <div className="flex items-center gap-2 px-5 py-3 flex-shrink-0" style={{ borderBottom: '1px solid var(--border)' }}>
+                      <button
+                        onClick={(e) => { e.stopPropagation(); goToSeasons() }}
+                        className="text-sm transition-colors hover:underline"
+                        style={{ color: 'var(--accent)' }}
+                      >
+                        ‹ {selectedSeries?.title}
+                      </button>
+                      <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>·</span>
+                      <span className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>
+                        {selectedSeason?.title}
+                      </span>
+                    </div>
+                  )}
       {view === 'seasons' && selectedSeries && (
         <div>
           {/* Series info header */}
@@ -682,6 +871,11 @@ export default function TvView({ libraryId }: Props) {
                     {selectedSeries.plot && (
                       <p className="text-sm mt-2 line-clamp-3" style={{ color: 'var(--text-secondary)' }}>{selectedSeries.plot}</p>
                     )}
+                    {selectedSeries.item_key && (
+                      <div className="mt-2">
+                        <AssignedTagBadges itemKey={selectedSeries.item_key} refreshKey={tagRefreshKey} />
+                      </div>
+                    )}
                   </>
                 )}
               </div>
@@ -756,7 +950,7 @@ export default function TvView({ libraryId }: Props) {
               {seasons.map((season) => (
                 <button
                   key={season.id}
-                  onClick={() => openSeason(season)}
+                  onClick={() => openSeason(season, seasons.indexOf(season))}
                   className="group text-left rounded-xl overflow-hidden border transition-all focus:outline-none focus-visible:ring-2"
                   style={{ borderColor: 'var(--border)', backgroundColor: 'var(--surface)' }}
                   onMouseEnter={(e) => {
@@ -792,7 +986,7 @@ export default function TvView({ libraryId }: Props) {
       )}
 
       {view === 'episodes' && selectedSeason && (
-        <div>
+        <div className="p-4">
           {loading ? (
             <EpisodeLoadingGrid />
           ) : error ? (
@@ -808,7 +1002,8 @@ export default function TvView({ libraryId }: Props) {
                   key={ep.id}
                   episode={ep}
                   onClick={() => setPlayingEpisodeIndex(episodes.indexOf(ep))}
-                  onTag={() => setTagPanel({ itemKey: ep.item_key!, title: ep.title })}
+                  onTag={() => { setTagPanelItemKey(ep.item_key!); setTagPanelDisabled(false); setShowTagPanel(true) }}
+                  downloadUrl={`/api/file?libraryId=${encodeURIComponent(libraryId)}&path=${encodeURIComponent(ep.videoPath)}`}
                   onDelete={() => {
                     fetch(
                       `/api/tv?libraryId=${encodeURIComponent(libraryId)}&seriesId=${encodeURIComponent(selectedSeries!.id)}&episodeKey=${encodeURIComponent(ep.item_key!)}`,
@@ -838,42 +1033,91 @@ export default function TvView({ libraryId }: Props) {
           )}
         </div>
       )}
-      {tagPanel && (
+                </div>
-        <div
-          className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4"
-          style={{ backgroundColor: 'rgba(0,0,0,0.6)' }}
-          onClick={(e) => { if (e.target === e.currentTarget) setTagPanel(null) }}
-        >
-          <div
-            className="w-full max-w-md rounded-2xl shadow-2xl overflow-hidden"
-            style={{ backgroundColor: 'var(--surface)', border: '1px solid var(--border)' }}
-          >
-            <div className="flex items-center justify-between px-5 py-4" style={{ borderBottom: '1px solid var(--border)' }}>
-              <div className="min-w-0">
-                <p className="text-xs font-semibold uppercase tracking-wider mb-0.5" style={{ color: 'var(--text-secondary)' }}>
-                  Tags
-                </p>
-                <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>
-                  {tagPanel.title}
-                </p>
               </div>
-              <button
+
-                onClick={() => setTagPanel(null)}
+              {/* Floating controls — tag + close */}
-                className="ml-4 w-8 h-8 flex-shrink-0 rounded-full flex items-center justify-center text-sm transition-colors"
+              <div className="absolute top-4 right-4 z-10 flex items-center gap-1.5" onClick={(e) => e.stopPropagation()}>
-                style={{ backgroundColor: 'var(--border)', color: 'var(--text-secondary)' }}
+                {view === 'seasons' && selectedSeries?.item_key && !showTagPanel && !readOnly && (
-                onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-primary)')}
+                  <button
-                onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.color = 'var(--text-secondary)')}
+                    onClick={() => { setShowTagPanel(true); setTagPanelItemKey(selectedSeries.item_key!); setTagPanelDisabled(false) }}
-                aria-label="Close"
+                    className={smallBtn}
-              >
+                    style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
-                ✕
+                    onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)')}
-              </button>
+                    onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)')}
+                    aria-label="Show tags"
+                    title="Tags"
+                  >
+                    🏷
+                  </button>
+                )}
+                <button
+                  onClick={goToSeries}
+                  className={smallBtn}
+                  style={{ backgroundColor: 'var(--surface)', color: 'var(--text-primary)' }}
+                  onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)')}
+                  onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)')}
+                  aria-label="Close"
+                >
+                  ✕
+                </button>
+              </div>
+
+              {/* Prev — series in seasons view, season in episodes view */}
+              {(view === 'seasons'
+                  ? selectedSeriesIndex !== null && selectedSeriesIndex > 0
+                  : selectedSeasonIndex !== null && selectedSeasonIndex > 0) && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    if (view === 'seasons') openSeries(filteredSeries[selectedSeriesIndex! - 1])
+                    else openSeason(seasons[selectedSeasonIndex! - 1], selectedSeasonIndex! - 1)
+                  }}
+                  className="absolute left-2 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
+                  style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
+                  aria-label="Previous"
+                >
+                  ‹
+                </button>
+              )}
+
+              {/* Next — series in seasons view, season in episodes view */}
+              {(view === 'seasons'
+                  ? selectedSeriesIndex !== null && selectedSeriesIndex < filteredSeries.length - 1
+                  : selectedSeasonIndex !== null && selectedSeasonIndex < seasons.length - 1) && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    if (view === 'seasons') openSeries(filteredSeries[selectedSeriesIndex! + 1])
+                    else openSeason(seasons[selectedSeasonIndex! + 1], selectedSeasonIndex! + 1)
+                  }}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 z-10 w-12 h-12 rounded-full flex items-center justify-center text-lg transition-opacity hover:opacity-100 opacity-70"
+                  style={{ backgroundColor: 'rgba(0,0,0,0.4)', color: '#fff' }}
+                  aria-label="Next"
+                >
+                  ›
+                </button>
+              )}
             </div>
-            <div className="px-5 py-4">
+
-              <TagSelector
+            {/* Right tag panel */}
-                itemKey={tagPanel.itemKey}
+            {showTagPanel && (
-                onTagsChanged={() => { setFilterRefreshKey((k) => k + 1); fetchAssignments(); fetchSeriesEpisodeTags() }}
+              <MediaTagPanel
+                itemKey={tagPanelItemKey ?? ''}
+                onHide={() => setShowTagPanel(false)}
+                onClose={goToSeries}
+                onTagsChanged={() => {
+                  setTagRefreshKey((k) => k + 1)
+                  setFilterRefreshKey((k) => k + 1)
+                  fetchAssignments()
+                  fetchSeriesEpisodeTags()
+                }}
+                externalRefreshKey={tagRefreshKey}
+                disabled={tagPanelDisabled}
+                disabledMessage="Seasons cannot be tagged. Select an episode to tag it."
+                readOnly={readOnly}
               />
-            </div>
+            )}
           </div>
         </div>
       )}

src/hooks/useDebounce.ts

@@ -0,0 +1,14 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export function useDebounce<T>(value: T, delayMs: number): T {
+  const [debounced, setDebounced] = useState<T>(value)
+
+  useEffect(() => {
+    const id = setTimeout(() => setDebounced(value), delayMs)
+    return () => clearTimeout(id)
+  }, [value, delayMs])
+
+  return debounced
+}

src/lib/ai-jobs.ts

@@ -269,7 +269,7 @@ async function processNextJob(): Promise<boolean> {
         await generateItemDescription(row.item_key)
         break
       case 'extract':
-        await extractItemText(row.item_key, jobPayload?.ocrLanguages)
+        await extractItemText(row.item_key, jobPayload?.ocrLanguages, jobPayload?.ocrMode)
         break
       case 'translate':
         await translateItemText(row.item_key, sourceLanguage || undefined)

src/lib/ai-tagger.ts

@@ -538,7 +538,7 @@ async function extractWithTesseract(
  * Translation is not performed automatically — call translateItemText() separately.
  * Returns { extractedText, translatedText } where translatedText is always null.
  */
-export async function extractItemText(itemKey: string, ocrLanguagesOverride?: string): Promise<{ extractedText: string; translatedText: string | null }> {
+export async function extractItemText(itemKey: string, ocrLanguagesOverride?: string, ocrModeOverride?: string): Promise<{ extractedText: string; translatedText: string | null }> {
   const libraryId = itemKey.split(':')[0]
   const config = getEffectiveAiConfig(libraryId)
 
@@ -567,7 +567,8 @@ export async function extractItemText(itemKey: string, ocrLanguagesOverride?: st
     throw Object.assign(new Error('Text extraction is only available for images'), { code: 'NO_IMAGE' })
   }
 
-  const { ocrMode, ocrLanguages: configOcrLanguages, ocrConfidenceThreshold } = config
+  const { ocrMode: configOcrMode, ocrLanguages: configOcrLanguages, ocrConfidenceThreshold } = config
+  const ocrMode = ocrModeOverride ?? configOcrMode
   const ocrLanguages = ocrLanguagesOverride?.trim() || configOcrLanguages
 
   // ── Tesseract path ────────────────────────────────────────────────────────
@@ -655,6 +656,14 @@ export function updateExtractedText(itemKey: string, text: string): void {
   db.prepare('UPDATE media_items SET extracted_text = ? WHERE item_key = ?').run(text, itemKey)
 }
 
+/**
+ * Update the ai_description of an item.
+ */
+export function updateAiDescription(itemKey: string, description: string): void {
+  const db = getDb()
+  db.prepare('UPDATE media_items SET ai_description = ? WHERE item_key = ?').run(description, itemKey)
+}
+
 /**
  * Translate text to a target language using the chat API.
  * Returns null if the text is already in the target language.

src/lib/auth.ts

@@ -67,7 +67,7 @@ export async function verifyPassword(password: string, hash: string): Promise<bo
 }
 
 // Auth guard result type
-type AuthSuccess = { session: IronSession<SessionData> }
+type AuthSuccess = { session: IronSession<SessionData>; accessLevel?: 'admin' | 'write' | 'read' }
 type AuthResult = AuthSuccess | NextResponse
 
 // Read-only session from an API route request (throwaway response)
@@ -100,13 +100,22 @@ export async function requireLibraryAccess(req: NextRequest, libraryId: string):
   if (!session.userId) {
     return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
   }
-  if (session.role === 'admin') return { session }
+  if (session.role === 'admin') return { session, accessLevel: 'admin' }
 
   // Lazy import to avoid pulling DB into edge contexts
-  const { getPermittedLibraryIds } = await import('./users')
+  const { getLibraryAccessLevel } = await import('./users')
-  const permitted = getPermittedLibraryIds(session.userId)
+  const accessLevel = getLibraryAccessLevel(session.userId, libraryId)
-  if (!permitted.includes(libraryId)) {
+  if (!accessLevel) {
     return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
   }
-  return { session }
+  return { session, accessLevel }
+}
+
+export async function requireLibraryWriteAccess(req: NextRequest, libraryId: string): Promise<AuthResult> {
+  const result = await requireLibraryAccess(req, libraryId)
+  if (result instanceof NextResponse) return result
+  if (result.accessLevel === 'read') {
+    return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+  }
+  return result
 }

src/lib/comic-info.ts

@@ -0,0 +1,120 @@
+import AdmZip from 'adm-zip'
+import { XMLParser } from 'fast-xml-parser'
+import type { ComicInfoData } from '@/types'
+import { findZipEntry, extractZipEntry } from './zip-utils'
+
+const parser = new XMLParser()
+
+function toNumber(val: unknown): number | null {
+  if (val === undefined || val === null || val === '') return null
+  const n = Number(val)
+  return isNaN(n) ? null : n
+}
+
+function toString(val: unknown): string | null {
+  if (val === undefined || val === null || val === '') return null
+  return String(val)
+}
+
+/**
+ * Parse ComicInfo.xml from inside a CBZ archive.
+ * Returns null if the archive doesn't contain ComicInfo.xml or parsing fails.
+ */
+export function parseComicInfo(absoluteCbzPath: string): ComicInfoData | null {
+  let zip: AdmZip
+  try {
+    zip = new AdmZip(absoluteCbzPath)
+  } catch {
+    return null
+  }
+
+  // Find ComicInfo.xml (case-insensitive)
+  const entry = zip.getEntries().find(
+    (e) => !e.isDirectory && e.entryName.toLowerCase() === 'comicinfo.xml'
+  )
+  if (!entry) return null
+
+  let xml: string
+  try {
+    xml = entry.getData().toString('utf-8')
+  } catch {
+    return null
+  }
+
+  let doc: Record<string, unknown>
+  try {
+    doc = parser.parse(xml) as Record<string, unknown>
+  } catch {
+    return null
+  }
+
+  // The root element can be ComicInfo or ComicInfoXml (varies by source)
+  const info = (doc.ComicInfo ?? doc.ComicInfoXml ?? doc.comicinfo) as Record<string, unknown> | undefined
+  if (!info) return null
+
+  // Parse tags: comma-separated string
+  const rawTags = toString(info.Tags)
+  const tags: string[] = rawTags
+    ? rawTags.split(',').map((t) => t.trim()).filter(Boolean)
+    : []
+
+  return {
+    title: toString(info.Title),
+    year: toNumber(info.Year),
+    month: toNumber(info.Month),
+    day: toNumber(info.Day),
+    writer: toString(info.Writer),
+    translator: toString(info.Translator),
+    publisher: toString(info.Publisher),
+    genre: toString(info.Genre),
+    tags,
+    web: toString(info.Web),
+  }
+}
+
+/**
+ * Async version of parseComicInfo — reads only the ComicInfo.xml entry from the
+ * archive without loading the entire CBZ into memory. This is significantly faster
+ * for large libraries since it reads only the ZIP's central directory + the XML entry.
+ */
+export async function parseComicInfoAsync(absoluteCbzPath: string): Promise<ComicInfoData | null> {
+  try {
+    const entry = await findZipEntry(absoluteCbzPath, 'comicinfo.xml')
+    if (!entry) return null
+    const buf = await extractZipEntry(absoluteCbzPath, entry)
+    if (!buf) return null
+    return parseXml(buf.toString('utf-8'))
+  } catch {
+    return null
+  }
+}
+
+function parseXml(xml: string): ComicInfoData | null {
+  let doc: Record<string, unknown>
+  try {
+    doc = parser.parse(xml) as Record<string, unknown>
+  } catch {
+    return null
+  }
+
+  const info = (doc.ComicInfo ?? doc.ComicInfoXml ?? doc.comicinfo) as Record<string, unknown> | undefined
+  if (!info) return null
+
+  const rawTags = toString(info.Tags)
+  const tags: string[] = rawTags
+    ? rawTags.split(',').map((t) => t.trim()).filter(Boolean)
+    : []
+
+  return {
+    title: toString(info.Title),
+    year: toNumber(info.Year),
+    month: toNumber(info.Month),
+    day: toNumber(info.Day),
+    writer: toString(info.Writer),
+    translator: toString(info.Translator),
+    publisher: toString(info.Publisher),
+    genre: toString(info.Genre),
+    tags,
+    web: toString(info.Web),
+  }
+}

src/lib/comic-metadata.ts

@@ -0,0 +1,230 @@
+import path from 'path'
+import crypto from 'crypto'
+import type { Library, ImportedTag, TagMapping } from '@/types'
+import { getDb } from './db'
+import { resolveLibraryRoot } from './libraries'
+import { parseComicInfoAsync } from './comic-info'
+import { mapConcurrent } from './zip-utils'
+
+// ─── Metadata Import ──────────────────────────────────────────────────────────
+
+/**
+ * Import ComicInfo.xml metadata for all comic_issue items in a library.
+ * - Populates media_items fields (title, year, genres, metadata JSON).
+ * - For each tag: if a mapping exists, assigns the real tag; otherwise creates
+ *   an imported tag entry.
+ */
+export async function importComicMetadata(library: Library): Promise<void> {
+  const db = getDb()
+  const libraryRoot = resolveLibraryRoot(library)
+
+  // Only process issues that have not had ComicInfo.xml imported yet.
+  // Issues restored from a previous scan will already have year/genres set.
+  const issues = db
+    .prepare(
+      `SELECT item_key, file_path, metadata FROM media_items
+       WHERE library_id = ? AND item_type = 'comic_issue' AND file_path IS NOT NULL
+         AND year IS NULL AND genres IS NULL`
+    )
+    .all(library.id) as { item_key: string; file_path: string; metadata: string | null }[]
+
+  if (issues.length === 0) return
+
+  // Load existing mappings for this library
+  const mappingRows = db
+    .prepare('SELECT imported_tag_name, tag_id FROM tag_mappings WHERE library_id = ?')
+    .all(library.id) as { imported_tag_name: string; tag_id: string }[]
+  const mappings = new Map(mappingRows.map((r) => [r.imported_tag_name, r.tag_id]))
+
+  const updateItem = db.prepare(`
+    UPDATE media_items SET title = @title, year = @year, genres = @genres, metadata = @metadata
+    WHERE item_key = @item_key
+  `)
+  const addMediaTag = db.prepare(
+    'INSERT OR IGNORE INTO media_tags (item_key, tag_id) VALUES (?, ?)'
+  )
+  const upsertImportedTag = db.prepare(`
+    INSERT INTO imported_tags (id, library_id, name) VALUES (@id, @library_id, @name)
+    ON CONFLICT(library_id, name) DO UPDATE SET name = excluded.name
+    RETURNING id
+  `)
+  const addItemImportedTag = db.prepare(
+    'INSERT OR IGNORE INTO item_imported_tags (item_key, imported_tag_id) VALUES (?, ?)'
+  )
+
+  let importedCount = 0
+
+  // Process in batches: async file reads (10 concurrent) followed by batch DB writes,
+  // with an event-loop yield between batches to keep the app responsive.
+  const BATCH_SIZE = 50
+  for (let i = 0; i < issues.length; i += BATCH_SIZE) {
+    const batch = issues.slice(i, i + BATCH_SIZE)
+
+    // Async: read ComicInfo.xml from each archive concurrently (10 at a time).
+    // Uses async ZIP central-directory reader — no full-file reads.
+    const infos = await mapConcurrent(batch, 10, (issue) =>
+      parseComicInfoAsync(path.join(libraryRoot, issue.file_path))
+    )
+
+    // Sync: write this batch to the DB in one transaction.
+    db.transaction(() => {
+      for (let j = 0; j < batch.length; j++) {
+        const issue = batch[j]
+        const info = infos[j]
+        if (!info) continue
+
+        const existingMeta = issue.metadata ? JSON.parse(issue.metadata) : {}
+        const mergedMeta = {
+          ...existingMeta,
+          writer: info.writer,
+          publisher: info.publisher,
+          translator: info.translator,
+          web: info.web,
+          month: info.month,
+          day: info.day,
+        }
+
+        updateItem.run({
+          item_key: issue.item_key,
+          title: info.title ?? existingMeta.title ?? null,
+          year: info.year,
+          genres: info.genre,
+          metadata: JSON.stringify(mergedMeta),
+        })
+
+        for (const tagName of info.tags) {
+          const mappedTagId = mappings.get(tagName)
+          if (mappedTagId) {
+            addMediaTag.run(issue.item_key, mappedTagId)
+          } else {
+            const importedTagId = crypto.randomUUID()
+            const row = upsertImportedTag.get({
+              id: importedTagId,
+              library_id: library.id,
+              name: tagName,
+            }) as { id: string }
+            addItemImportedTag.run(issue.item_key, row.id)
+          }
+        }
+
+        importedCount++
+      }
+    })()
+
+    await new Promise<void>((r) => setImmediate(r))
+  }
+
+  console.log(`[comic-metadata] Imported metadata for ${importedCount}/${issues.length} issues in "${library.name}"`)
+}
+
+// ─── Imported Tags ────────────────────────────────────────────────────────────
+
+export function getImportedTagsForLibrary(libraryId: string): ImportedTag[] {
+  const db = getDb()
+  return db
+    .prepare(
+      `SELECT it.id, it.library_id as libraryId, it.name,
+              COUNT(iit.item_key) as itemCount
+       FROM imported_tags it
+       LEFT JOIN item_imported_tags iit ON iit.imported_tag_id = it.id
+       WHERE it.library_id = ?
+       GROUP BY it.id
+       ORDER BY it.name`
+    )
+    .all(libraryId) as ImportedTag[]
+}
+
+// ─── Tag Mappings ─────────────────────────────────────────────────────────────
+
+export function getTagMappingsForLibrary(libraryId: string): TagMapping[] {
+  const db = getDb()
+  return db
+    .prepare(
+      `SELECT tm.id, tm.library_id as libraryId, tm.imported_tag_name as importedTagName,
+              tm.tag_id as tagId, t.name as tagName, tc.name as categoryName
+       FROM tag_mappings tm
+       JOIN tags t ON t.id = tm.tag_id
+       JOIN tag_categories tc ON tc.id = t.category_id
+       WHERE tm.library_id = ?
+       ORDER BY tm.imported_tag_name`
+    )
+    .all(libraryId) as TagMapping[]
+}
+
+/**
+ * Create a tag mapping and apply it: assign the real tag to all items that
+ * currently have the imported tag, then remove the imported tag entries.
+ */
+export function createTagMapping(libraryId: string, importedTagName: string, tagId: string): TagMapping {
+  const db = getDb()
+
+  const id = crypto.randomUUID()
+
+  return db.transaction(() => {
+    // Persist the mapping for future scans
+    db.prepare(`
+      INSERT INTO tag_mappings (id, library_id, imported_tag_name, tag_id)
+      VALUES (?, ?, ?, ?)
+      ON CONFLICT(library_id, imported_tag_name) DO UPDATE SET tag_id = excluded.tag_id
+    `).run(id, libraryId, importedTagName, tagId)
+
+    // Find all items that currently have this imported tag
+    const importedTag = db
+      .prepare('SELECT id FROM imported_tags WHERE library_id = ? AND name = ?')
+      .get(libraryId, importedTagName) as { id: string } | undefined
+
+    if (importedTag) {
+      const itemKeys = db
+        .prepare('SELECT item_key FROM item_imported_tags WHERE imported_tag_id = ?')
+        .all(importedTag.id) as { item_key: string }[]
+
+      // Assign the real tag to all affected items
+      const addMediaTag = db.prepare(
+        'INSERT OR IGNORE INTO media_tags (item_key, tag_id) VALUES (?, ?)'
+      )
+      for (const { item_key } of itemKeys) {
+        addMediaTag.run(item_key, tagId)
+      }
+
+      // Remove the imported tag (cascades to item_imported_tags)
+      db.prepare('DELETE FROM imported_tags WHERE id = ?').run(importedTag.id)
+    }
+
+    // Fetch the created mapping with joined names
+    const mapping = db
+      .prepare(
+        `SELECT tm.id, tm.library_id as libraryId, tm.imported_tag_name as importedTagName,
+                tm.tag_id as tagId, t.name as tagName, tc.name as categoryName
+         FROM tag_mappings tm
+         JOIN tags t ON t.id = tm.tag_id
+         JOIN tag_categories tc ON tc.id = t.category_id
+         WHERE tm.library_id = ? AND tm.imported_tag_name = ?`
+      )
+      .get(libraryId, importedTagName) as TagMapping
+
+    return mapping
+  })()
+}
+
+export function deleteTagMapping(id: string): void {
+  const db = getDb()
+  const result = db.prepare('DELETE FROM tag_mappings WHERE id = ?').run(id)
+  if (result.changes === 0) throw new Error('Mapping not found')
+}
+
+/**
+ * Check if a media item already has metadata populated.
+ * Returns true if ANY of: title, year, plot, or genres are populated.
+ */
+function hasMetadata(item: {
+  title: string | null
+  year: number | null
+  plot: string | null
+  genres: string | null
+}): boolean {
+  if (item.title) return true
+  if (item.year) return true
+  if (item.plot) return true
+  if (item.genres) return true
+  return false
+}

src/lib/comics.ts

@@ -0,0 +1,377 @@
+import fs from 'fs'
+import path from 'path'
+import AdmZip from 'adm-zip'
+import type { ComicIssue, ComicSeries } from '@/types'
+import { getDb } from './db'
+import { HIDDEN_FILES, thumbnailApiUrl } from './media-utils'
+import { countZipImages, mapConcurrent } from './zip-utils'
+import fsPromises from 'fs/promises'
+
+const CBZ_EXTENSIONS = new Set(['.cbz'])
+const CBZ_IMAGE_EXTENSIONS = new Set(['.jpg', '.jpeg', '.png', '.webp', '.gif'])
+
+function isCbzFile(name: string): boolean {
+  return CBZ_EXTENSIONS.has(path.extname(name).toLowerCase())
+}
+
+function naturalCompare(a: string, b: string): number {
+  return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
+}
+
+function parseIssueNumber(filename: string): number | null {
+  const base = path.basename(filename, path.extname(filename))
+  const matches = base.match(/\d+/g)
+  if (!matches) return null
+  return parseInt(matches[matches.length - 1], 10)
+}
+
+export interface ScannedComicSeries extends ComicSeries {
+  issues: ComicIssue[]
+}
+
+const TRASH_DIR = '.trash'
+
+async function moveToTrash(absPath: string, libraryRoot: string): Promise<void> {
+  const trashDir = path.join(libraryRoot, TRASH_DIR)
+  await fsPromises.mkdir(trashDir, { recursive: true })
+  const filename = path.basename(absPath)
+  let dest = path.join(trashDir, filename)
+  if (fs.existsSync(dest)) {
+    const ext = path.extname(filename)
+    const base = path.basename(filename, ext)
+    dest = path.join(trashDir, `${base}_${Date.now()}${ext}`)
+  }
+  await fsPromises.rename(absPath, dest).catch(async (err: NodeJS.ErrnoException) => {
+    if (err.code === 'EXDEV') {
+      // Source and destination are on different filesystems — copy then delete.
+      await fsPromises.copyFile(absPath, dest)
+      await fsPromises.unlink(absPath)
+    } else {
+      throw err
+    }
+  })
+  console.log(`[scanner] Moved corrupt archive to trash: ${path.relative(libraryRoot, absPath)}`)
+}
+
+interface CollectedCbz {
+  absPath: string
+  filename: string
+  relPath: string
+  isStandalone: boolean
+  seriesDirName: string | null
+}
+
+export async function scanComicsLibrary(
+  libraryRoot: string,
+  libraryId: string
+): Promise<(ComicIssue | ScannedComicSeries)[]> {
+  let topEntries: fs.Dirent[]
+  try {
+    topEntries = fs.readdirSync(libraryRoot, { withFileTypes: true })
+  } catch {
+    return []
+  }
+
+  // Phase 1: Collect all CBZ paths via fast directory listing (no archive opens).
+  const collected: CollectedCbz[] = []
+
+  for (const entry of topEntries) {
+    if (HIDDEN_FILES.test(entry.name)) continue
+
+    if (entry.isFile() && isCbzFile(entry.name)) {
+      collected.push({
+        absPath: path.join(libraryRoot, entry.name),
+        filename: entry.name,
+        relPath: entry.name,
+        isStandalone: true,
+        seriesDirName: null,
+      })
+      continue
+    }
+
+    if (entry.isDirectory()) {
+      const dirAbsPath = path.join(libraryRoot, entry.name)
+      let subEntries: fs.Dirent[]
+      try {
+        subEntries = fs.readdirSync(dirAbsPath, { withFileTypes: true })
+      } catch {
+        continue
+      }
+
+      const cbzFiles = subEntries
+        .filter((e) => e.isFile() && isCbzFile(e.name) && !HIDDEN_FILES.test(e.name))
+        .sort((a, b) => naturalCompare(a.name, b.name))
+
+      if (cbzFiles.length === 0) continue
+
+      for (const f of cbzFiles) {
+        collected.push({
+          absPath: path.join(dirAbsPath, f.name),
+          filename: f.name,
+          relPath: path.join(entry.name, f.name),
+          isStandalone: false,
+          seriesDirName: entry.name,
+        })
+      }
+    }
+  }
+
+  // Phase 2: Count pages for all CBZ files concurrently (10 at a time) by reading
+  // only each archive's central directory — no full-file reads.
+  const scanResults = await mapConcurrent(collected, 10, (c) =>
+    countZipImages(c.absPath, CBZ_IMAGE_EXTENSIONS)
+  )
+
+  // Move corrupt archives to the library's .trash folder and exclude them from indexing.
+  const movePromises: Promise<void>[] = []
+  const valid: Array<{ cbz: CollectedCbz; pageCount: number }> = []
+  for (let i = 0; i < collected.length; i++) {
+    const result = scanResults[i]
+    if (!result.valid) {
+      movePromises.push(
+        moveToTrash(collected[i].absPath, libraryRoot).catch((err) =>
+          console.warn(`[scanner] Could not move corrupt archive to trash: ${collected[i].absPath}`, err)
+        )
+      )
+      continue
+    }
+    valid.push({ cbz: collected[i], pageCount: result.pageCount })
+  }
+  if (movePromises.length > 0) await Promise.all(movePromises)
+
+  // Phase 3: Build the result array from valid files only.
+  const seriesMap = new Map<string, ScannedComicSeries>()
+  const standaloneIssues: ComicIssue[] = []
+
+  for (const { cbz: c, pageCount } of valid) {
+    const coverUrl = thumbnailApiUrl(libraryId, c.relPath)
+    const issue: ComicIssue = {
+      id: encodeURIComponent(c.relPath),
+      title: path.basename(c.filename, path.extname(c.filename)),
+      issueNumber: parseIssueNumber(c.filename),
+      pageCount,
+      coverUrl,
+      filePath: c.relPath,
+      isStandalone: c.isStandalone,
+      userRating: null,
+      aiDescription: null,
+      extractedText: null,
+      extractedTextTranslated: null,
+    }
+
+    if (c.isStandalone) {
+      standaloneIssues.push(issue)
+    } else {
+      const key = c.seriesDirName!
+      if (!seriesMap.has(key)) {
+        seriesMap.set(key, {
+          id: encodeURIComponent(key),
+          title: key,
+          coverUrl,  // first issue (sorted) becomes the series cover
+          issueCount: 0,
+          issues: [],
+          userRating: null,
+          aiDescription: null,
+          extractedText: null,
+          extractedTextTranslated: null,
+        })
+      }
+      const series = seriesMap.get(key)!
+      series.issues.push(issue)
+      series.issueCount++
+    }
+  }
+
+  const results: (ComicIssue | ScannedComicSeries)[] = [
+    ...Array.from(seriesMap.values()),
+    ...standaloneIssues,
+  ]
+  return results.sort((a, b) => naturalCompare(a.title, b.title))
+}
+
+function escapeLike(s: string): string {
+  return `%${s.replace(/%/g, '\\%').replace(/_/g, '\\_')}%`
+}
+
+// comicsFromDb returns series + standalone issues for the top-level grid, paginated.
+// Series issues are retrieved separately via comicIssuesFromDb.
+export function comicsFromDb(
+  libraryId: string,
+  opts: { page: number; pageSize: number; search?: string }
+): { items: (ComicIssue | ComicSeries)[]; total: number } {
+  const db = getDb()
+  const offset = (opts.page - 1) * opts.pageSize
+
+  type DbRow = {
+    item_key: string
+    item_type: string
+    parent_key: string | null
+    title: string | null
+    metadata: string | null
+    file_path: string | null
+    user_rating: number | null
+    ai_description: string | null
+    extracted_text: string | null
+    extracted_text_translated: string | null
+  }
+
+  const baseWhere = `
+    WHERE library_id = ?
+      AND (item_type = 'comic_series' OR (item_type = 'comic_issue' AND parent_key IS NULL))
+  `
+
+  const total: number = opts.search
+    ? (db
+        .prepare(`SELECT COUNT(*) as cnt FROM media_items ${baseWhere} AND title LIKE ? ESCAPE '\\'`)
+        .get(libraryId, escapeLike(opts.search)) as { cnt: number }).cnt
+    : (db
+        .prepare(`SELECT COUNT(*) as cnt FROM media_items ${baseWhere}`)
+        .get(libraryId) as { cnt: number }).cnt
+
+  const cols = `item_key, item_type, parent_key, title, metadata, file_path,
+                user_rating, ai_description, extracted_text, extracted_text_translated`
+
+  const rows: DbRow[] = opts.search
+    ? db
+        .prepare(
+          `SELECT ${cols}
+           FROM media_items ${baseWhere} AND title LIKE ? ESCAPE '\\'
+           ORDER BY title LIMIT ? OFFSET ?`
+        )
+        .all(libraryId, escapeLike(opts.search), opts.pageSize, offset) as DbRow[]
+    : db
+        .prepare(
+          `SELECT ${cols}
+           FROM media_items ${baseWhere}
+           ORDER BY title LIMIT ? OFFSET ?`
+        )
+        .all(libraryId, opts.pageSize, offset) as DbRow[]
+
+  const items: (ComicIssue | ComicSeries)[] = []
+  for (const row of rows) {
+    const meta = row.metadata ? JSON.parse(row.metadata) : {}
+    if (row.item_type === 'comic_series') {
+      const idPart = row.item_key.split(':comic_series:')[1] ?? row.item_key
+      items.push({
+        id: idPart,
+        item_key: row.item_key,
+        title: row.title ?? decodeURIComponent(idPart),
+        coverUrl: meta.coverUrl ?? null,
+        issueCount: meta.issueCount ?? 0,
+        userRating: row.user_rating ?? null,
+        aiDescription: row.ai_description ?? null,
+        extractedText: row.extracted_text ?? null,
+        extractedTextTranslated: row.extracted_text_translated ?? null,
+      } as ComicSeries)
+    } else {
+      const idPart = row.item_key.split(':comic_issue:')[1] ?? row.item_key
+      items.push({
+        id: idPart,
+        item_key: row.item_key,
+        title: row.title ?? decodeURIComponent(idPart.split(':').pop() ?? idPart),
+        issueNumber: meta.issueNumber ?? null,
+        pageCount: meta.pageCount ?? 0,
+        coverUrl: meta.coverUrl ?? null,
+        filePath: row.file_path ?? '',
+        isStandalone: meta.isStandalone ?? true,
+        userRating: row.user_rating ?? null,
+        aiDescription: row.ai_description ?? null,
+        extractedText: row.extracted_text ?? null,
+        extractedTextTranslated: row.extracted_text_translated ?? null,
+      } as ComicIssue)
+    }
+  }
+
+  return { items, total }
+}
+
+export function comicIssuesFromDb(libraryId: string, seriesId: string): ComicIssue[] {
+  const db = getDb()
+  const seriesKey = `${libraryId}:comic_series:${seriesId}`
+
+  type DbRow = {
+    item_key: string
+    title: string | null
+    metadata: string | null
+    file_path: string | null
+    user_rating: number | null
+    ai_description: string | null
+    extracted_text: string | null
+    extracted_text_translated: string | null
+  }
+
+  const rows = db
+    .prepare(
+      `SELECT item_key, title, metadata, file_path,
+              user_rating, ai_description, extracted_text, extracted_text_translated
+       FROM media_items
+       WHERE parent_key = ? AND item_type = 'comic_issue'`
+    )
+    .all(seriesKey) as DbRow[]
+
+  const issues: ComicIssue[] = rows.map((row) => {
+    const meta = row.metadata ? JSON.parse(row.metadata) : {}
+    const idPart = row.item_key.split(':comic_issue:')[1] ?? row.item_key
+    return {
+      id: idPart,
+      item_key: row.item_key,
+      title: row.title ?? decodeURIComponent(idPart.split(':').pop() ?? idPart),
+      issueNumber: meta.issueNumber ?? null,
+      pageCount: meta.pageCount ?? 0,
+      coverUrl: meta.coverUrl ?? null,
+      filePath: row.file_path ?? '',
+      isStandalone: false,
+      userRating: row.user_rating ?? null,
+      aiDescription: row.ai_description ?? null,
+      extractedText: row.extracted_text ?? null,
+      extractedTextTranslated: row.extracted_text_translated ?? null,
+    }
+  })
+
+  return issues.sort((a, b) => {
+    if (a.issueNumber !== null && b.issueNumber !== null) return a.issueNumber - b.issueNumber
+    if (a.issueNumber !== null) return -1
+    if (b.issueNumber !== null) return 1
+    return naturalCompare(a.title, b.title)
+  })
+}
+
+export function getComicPages(absoluteCbzPath: string): string[] {
+  try {
+    const zip = new AdmZip(absoluteCbzPath)
+    return zip
+      .getEntries()
+      .filter(
+        (e) =>
+          !e.isDirectory &&
+          CBZ_IMAGE_EXTENSIONS.has(path.extname(e.entryName).toLowerCase())
+      )
+      .sort((a, b) => naturalCompare(a.entryName, b.entryName))
+      .map((e) => e.entryName)
+  } catch {
+    return []
+  }
+}
+
+export function getComicPageBuffer(absoluteCbzPath: string, pageIndex: number): { buffer: Buffer; ext: string } | null {
+  try {
+    const zip = new AdmZip(absoluteCbzPath)
+    const entries = zip
+      .getEntries()
+      .filter(
+        (e) =>
+          !e.isDirectory &&
+          CBZ_IMAGE_EXTENSIONS.has(path.extname(e.entryName).toLowerCase())
+      )
+      .sort((a, b) => naturalCompare(a.entryName, b.entryName))
+
+    if (pageIndex < 0 || pageIndex >= entries.length) return null
+
+    const entry = entries[pageIndex]
+    const buffer = entry.getData()
+    const ext = path.extname(entry.entryName).toLowerCase()
+    return { buffer, ext }
+  } catch {
+    return null
+  }
+}

src/lib/db.ts

@@ -12,7 +12,12 @@ export function getDb(): Database.Database {
   _db = new Database(DB_PATH)
   _db.pragma('journal_mode = WAL')
   _db.pragma('foreign_keys = ON')
+  _db.pragma('busy_timeout = 5000')
+  _db.pragma('synchronous = NORMAL')
+  _db.pragma('cache_size = -65536')
+  _db.pragma('wal_autocheckpoint = 1000')
   initDb(_db)
+  _db.pragma('wal_checkpoint(PASSIVE)')
   return _db
 }
 
@@ -106,6 +111,14 @@ function initDb(db: Database.Database): void {
   migrateMediaItemsAiFields(db)
   migrateLibraryAiSettings(db)
   migrateAiJobs(db)
+  migrateLibraryPermissionsAccessLevel(db)
+  migrateLibrariesAddComics(db)
+  migrateComicItemTypes(db)
+  migrateImportedTags(db)
+  migrateComicsIndex(db)
+  migrateTagMappingsIndexes(db)
+  migrateUserRating(db)
+  migrateParentKeyItemTypeIndex(db)
   seedAppSettings(db)
 }
 
@@ -318,6 +331,77 @@ function migrateLibrariesType(db: Database.Database): void {
   }
 }
 
+function migrateLibrariesAddComics(db: Database.Database): void {
+  const row = db
+    .prepare("SELECT sql FROM sqlite_master WHERE type='table' AND name='libraries'")
+    .get() as { sql: string } | undefined
+  if (!row || row.sql.includes("'comics'")) return
+
+  db.exec(`
+    BEGIN TRANSACTION;
+    CREATE TABLE libraries_new (
+      id        TEXT PRIMARY KEY,
+      name      TEXT NOT NULL,
+      path      TEXT NOT NULL,
+      type      TEXT NOT NULL CHECK(type IN ('comics','games','mixed','movies','tv')),
+      cover_ext TEXT NULL
+    );
+    INSERT INTO libraries_new SELECT * FROM libraries;
+    DROP TABLE libraries;
+    ALTER TABLE libraries_new RENAME TO libraries;
+    COMMIT;
+  `)
+}
+
+function migrateComicItemTypes(db: Database.Database): void {
+  const row = db
+    .prepare("SELECT sql FROM sqlite_master WHERE type='table' AND name='media_items'")
+    .get() as { sql: string } | undefined
+  if (!row || row.sql.includes("'comic_series'")) return
+
+  db.exec(`
+    BEGIN TRANSACTION;
+    CREATE TABLE media_items_new (
+      id          INTEGER PRIMARY KEY AUTOINCREMENT,
+      library_id  TEXT NOT NULL REFERENCES libraries(id) ON DELETE CASCADE,
+      item_key    TEXT NOT NULL UNIQUE,
+      item_type   TEXT NOT NULL CHECK(item_type IN (
+                    'movie','tv_series','tv_season','tv_episode',
+                    'game','game_series','mixed_file',
+                    'comic_series','comic_issue')),
+      parent_key  TEXT,
+      title       TEXT,
+      year        INTEGER,
+      plot        TEXT,
+      genres      TEXT,
+      metadata    TEXT,
+      file_path   TEXT,
+      fingerprint TEXT,
+      scanned_at  INTEGER NOT NULL,
+      ai_tagged_at INTEGER,
+      ai_description TEXT,
+      extracted_text TEXT,
+      extracted_text_translated TEXT
+    );
+    INSERT INTO media_items_new SELECT * FROM media_items;
+    DROP TABLE media_items;
+    ALTER TABLE media_items_new RENAME TO media_items;
+    CREATE INDEX media_items_library_id ON media_items(library_id);
+    CREATE INDEX media_items_parent_key ON media_items(parent_key);
+    CREATE INDEX media_items_fingerprint ON media_items(fingerprint);
+    COMMIT;
+  `)
+}
+
+function migrateLibraryPermissionsAccessLevel(db: Database.Database): void {
+  const row = db
+    .prepare("SELECT sql FROM sqlite_master WHERE type='table' AND name='library_permissions'")
+    .get() as { sql: string } | undefined
+  if (row && !row.sql.includes('access_level')) {
+    db.exec(`ALTER TABLE library_permissions ADD COLUMN access_level TEXT NOT NULL DEFAULT 'write'`)
+  }
+}
+
 function migrateAiJobs(db: Database.Database): void {
   db.exec(`
     CREATE TABLE IF NOT EXISTS ai_jobs (
@@ -347,3 +431,58 @@ function migrateAiJobs(db: Database.Database): void {
     db.exec('ALTER TABLE ai_jobs ADD COLUMN payload TEXT')
   }
 }
+
+function migrateImportedTags(db: Database.Database): void {
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS imported_tags (
+      id         TEXT PRIMARY KEY,
+      library_id TEXT NOT NULL REFERENCES libraries(id) ON DELETE CASCADE,
+      name       TEXT NOT NULL,
+      UNIQUE(library_id, name)
+    );
+
+    CREATE TABLE IF NOT EXISTS item_imported_tags (
+      item_key       TEXT NOT NULL,
+      imported_tag_id TEXT NOT NULL REFERENCES imported_tags(id) ON DELETE CASCADE,
+      PRIMARY KEY (item_key, imported_tag_id)
+    );
+
+    CREATE TABLE IF NOT EXISTS tag_mappings (
+      id                TEXT PRIMARY KEY,
+      library_id        TEXT NOT NULL REFERENCES libraries(id) ON DELETE CASCADE,
+      imported_tag_name TEXT NOT NULL,
+      tag_id            TEXT NOT NULL REFERENCES tags(id) ON DELETE CASCADE,
+      UNIQUE(library_id, imported_tag_name)
+    );
+  `)
+}
+
+function migrateComicsIndex(db: Database.Database): void {
+  db.exec(`
+    CREATE INDEX IF NOT EXISTS media_items_library_type_title
+      ON media_items(library_id, item_type, title);
+  `)
+}
+
+function migrateTagMappingsIndexes(db: Database.Database): void {
+  db.exec(`
+    CREATE INDEX IF NOT EXISTS tag_mappings_library_id ON tag_mappings(library_id);
+    CREATE INDEX IF NOT EXISTS tag_mappings_tag_id ON tag_mappings(tag_id);
+    CREATE INDEX IF NOT EXISTS imported_tags_library_id ON imported_tags(library_id);
+    CREATE INDEX IF NOT EXISTS item_imported_tags_imported_tag_id ON item_imported_tags(imported_tag_id);
+  `)
+}
+
+function migrateParentKeyItemTypeIndex(db: Database.Database): void {
+  db.exec(`
+    CREATE INDEX IF NOT EXISTS media_items_parent_key_type
+      ON media_items(parent_key, item_type);
+  `)
+}
+
+function migrateUserRating(db: Database.Database): void {
+  const cols = db.pragma('table_info(media_items)') as { name: string }[]
+  if (!cols.some((c) => c.name === 'user_rating')) {
+    db.exec('ALTER TABLE media_items ADD COLUMN user_rating INTEGER')
+  }
+}

src/lib/files.ts

@@ -74,12 +74,16 @@ export function scanDirectory(
  * Recursively walks every subdirectory under `subpath` and returns a flat list
  * of all files. Directory entries are omitted. Each FileEntry.name is the full
  * relative path from the library root (e.g. FolderA/SubFolder/video.mp4).
+ *
+ * Uses async I/O so the Node.js event loop is not blocked during large
+ * directory trees (blocking stalls streaming responses and causes
+ * "ReadableStream is already closed" errors on concurrent requests).
  */
-export function scanDirectoryRecursive(
+export async function scanDirectoryRecursive(
   libraryRoot: string,
   libraryId: string,
   subpath: string
-): DirectoryListing {
+): Promise<DirectoryListing> {
   let rootAbsPath: string
   try {
     rootAbsPath = subpath ? resolveAndJail(libraryRoot, subpath) : libraryRoot
@@ -89,35 +93,37 @@ export function scanDirectoryRecursive(
 
   const entries: FileEntry[] = []
 
-  function walk(absDir: string, relDir: string): void {
+  async function walk(absDir: string, relDir: string): Promise<void> {
     let dirents: fs.Dirent[]
     try {
-      dirents = fs.readdirSync(absDir, { withFileTypes: true })
+      dirents = await fs.promises.readdir(absDir, { withFileTypes: true })
     } catch {
       return
     }
-    for (const d of dirents) {
+    await Promise.all(
-      if (HIDDEN_FILES.test(d.name)) continue
+      dirents.map(async (d) => {
-      const relPath = relDir ? path.join(relDir, d.name) : d.name
+        if (HIDDEN_FILES.test(d.name)) return
-      if (d.isDirectory()) {
+        const relPath = relDir ? path.join(relDir, d.name) : d.name
-        walk(path.join(absDir, d.name), relPath)
+        if (d.isDirectory()) {
-      } else {
+          await walk(path.join(absDir, d.name), relPath)
-        const mediaType = getMediaType(d.name)
+        } else {
-        const hasThumbnail = mediaType === 'image' || mediaType === 'video'
+          const mediaType = getMediaType(d.name)
-        // name = full relative path from library root so media keys match
+          const hasThumbnail = mediaType === 'image' || mediaType === 'video'
-        const fullRelPath = subpath ? path.join(subpath, relPath) : relPath
+          // name = full relative path from library root so media keys match
-        entries.push({
+          const fullRelPath = subpath ? path.join(subpath, relPath) : relPath
-          name: fullRelPath,
+          entries.push({
-          type: 'file',
+            name: fullRelPath,
-          mediaType,
+            type: 'file',
-          url: fileApiUrl(libraryId, fullRelPath),
+            mediaType,
-          thumbnailUrl: hasThumbnail ? thumbnailApiUrl(libraryId, fullRelPath) : null,
+            url: fileApiUrl(libraryId, fullRelPath),
-        })
+            thumbnailUrl: hasThumbnail ? thumbnailApiUrl(libraryId, fullRelPath) : null,
-      }
+          })
-    }
+        }
+      })
+    )
   }
 
-  walk(rootAbsPath, '')
+  await walk(rootAbsPath, '')
   entries.sort((a, b) => a.name.localeCompare(b.name))
   return { path: subpath, entries }
 }

src/lib/games.ts

@@ -93,6 +93,10 @@ function buildGame(
       : null,
     gameFiles,
     platforms,
+    userRating: null,
+    aiDescription: null,
+    extractedText: null,
+    extractedTextTranslated: null,
   }
 }
 
@@ -175,10 +179,15 @@ export function gamesFromDb(libraryId: string): (Game | GameSeries)[] {
     parent_key: string | null
     title: string | null
     metadata: string | null
+    user_rating: number | null
+    ai_description: string | null
+    extracted_text: string | null
+    extracted_text_translated: string | null
   }
 
   const allRows = db
-    .prepare(`SELECT item_key, item_type, parent_key, title, metadata
+    .prepare(`SELECT item_key, item_type, parent_key, title, metadata,
+                     user_rating, ai_description, extracted_text, extracted_text_translated
               FROM media_items
               WHERE library_id = ? AND item_type IN ('game', 'game_series')
               ORDER BY title`)
@@ -233,6 +242,10 @@ export function gamesFromDb(libraryId: string): (Game | GameSeries)[] {
       wideCoverUrl: meta.wideCoverUrl ?? null,
       gameFiles,
       platforms,
+      userRating: row.user_rating ?? null,
+      aiDescription: row.ai_description ?? null,
+      extractedText: row.extracted_text ?? null,
+      extractedTextTranslated: row.extracted_text_translated ?? null,
     }
     if (row.parent_key && seriesMap.has(row.parent_key)) {
       seriesMap.get(row.parent_key)!.games.push(game)

src/lib/movie-metadata.ts

@@ -0,0 +1,103 @@
+import fs from 'fs'
+import path from 'path'
+import type { Library } from '@/types'
+import { getDb } from './db'
+import { resolveLibraryRoot } from './libraries'
+import { parseMovieNfo } from './nfo'
+
+/**
+ * Import NFO metadata for Movie items in a library.
+ * - Reads .nfo file matching each movie file
+ * - If importMetadataOnly=false: skip items that already have metadata (title/year/plot/genres)
+ * - If importMetadataOnly=true: update all items regardless of existing metadata
+ */
+export async function importMovieMetadata(
+  library: Library,
+  importMetadataOnly: boolean = false
+): Promise<{ imported: number; skipped: number }> {
+  const db = getDb()
+  const libraryRoot = resolveLibraryRoot(library)
+
+  let imported = 0
+  let skipped = 0
+
+  // Get all movies in the library
+  const movies = db
+    .prepare(
+      `SELECT item_key, file_path, title, year, plot, genres FROM media_items
+       WHERE library_id = ? AND item_type = 'movie' AND file_path IS NOT NULL`
+    )
+    .all(library.id) as Array<{ item_key: string; file_path: string; title: string | null; year: number | null; plot: string | null; genres: string | null }>
+
+  const updateItem = db.prepare(`
+    UPDATE media_items SET title = @title, year = @year, plot = @plot, genres = @genres
+    WHERE item_key = @item_key
+  `)
+
+  const BATCH_SIZE = 50
+  for (let i = 0; i < movies.length; i += BATCH_SIZE) {
+    const batch = movies.slice(i, i + BATCH_SIZE)
+
+    db.transaction(() => {
+      for (const item of batch) {
+        // Check if we should skip this item
+        if (!importMetadataOnly && hasMetadata(item)) {
+          skipped++
+          continue
+        }
+
+        const videoPath = path.join(libraryRoot, item.file_path)
+        const dir = path.dirname(videoPath)
+        const baseNameWithoutExt = path.basename(videoPath, path.extname(videoPath))
+        const nfoPath = path.join(dir, `${baseNameWithoutExt}.nfo`)
+
+        try {
+          if (fs.existsSync(nfoPath)) {
+            const nfoData = parseMovieNfo(nfoPath)
+            if (nfoData) {
+              updateItem.run({
+                item_key: item.item_key,
+                title: nfoData.title ?? item.title,
+                year: nfoData.year ?? item.year,
+                plot: nfoData.plot ?? item.plot,
+                genres: nfoData.genres.length > 0 ? JSON.stringify(nfoData.genres) : item.genres,
+              })
+              imported++
+            } else {
+              skipped++
+            }
+          } else {
+            skipped++
+          }
+        } catch {
+          skipped++
+        }
+      }
+    })()
+
+    await new Promise<void>((r) => setImmediate(r))
+  }
+
+  console.log(
+    `[movie-metadata] Imported metadata for ${imported} movies in "${library.name}" (${importMetadataOnly ? 'full' : 'incremental'})`
+  )
+
+  return { imported, skipped }
+}
+
+/**
+ * Check if a media item already has metadata populated.
+ * Returns true if ANY of: title, year, plot, or genres are populated.
+ */
+function hasMetadata(item: {
+  title: string | null
+  year: number | null
+  plot: string | null
+  genres: string | null
+}): boolean {
+  if (item.title) return true
+  if (item.year) return true
+  if (item.plot) return true
+  if (item.genres) return true
+  return false
+}

src/lib/movies.ts

@@ -72,6 +72,10 @@ export function scanMoviesLibrary(libraryRoot: string, libraryId: string): Movie
         ? fileApiUrl(libraryId, path.join(dirName, backdropFile))
         : null,
       videoPath: videoRelPath,
+      userRating: null,
+      aiDescription: null,
+      extractedText: null,
+      extractedTextTranslated: null,
     })
   }
 
@@ -90,6 +94,10 @@ export function moviesFromDb(libraryId: string): Movie[] {
       genres: string | null
       metadata: string | null
       file_path: string | null
+      user_rating: number | null
+      ai_description: string | null
+      extracted_text: string | null
+      extracted_text_translated: string | null
     }>
 
   return rows.map((row) => {
@@ -108,6 +116,10 @@ export function moviesFromDb(libraryId: string): Movie[] {
       backdropUrl: meta.backdropUrl ?? null,
       videoPath: row.file_path ?? '',
       manuallyEdited: meta.manuallyEdited === true,
+      userRating: row.user_rating ?? null,
+      aiDescription: row.ai_description ?? null,
+      extractedText: row.extracted_text ?? null,
+      extractedTextTranslated: row.extracted_text_translated ?? null,
     }
   })
 }

src/lib/scanner.ts

@@ -1,16 +1,20 @@
 import path from 'path'
 import type Database from 'better-sqlite3'
-import type { Library, Movie, TvSeries, TvSeason, TvEpisode, Game, GameSeries } from '@/types'
+import type { Library, Movie, TvSeries, TvSeason, TvEpisode, Game, GameSeries, ComicIssue } from '@/types'
 import { getDb } from './db'
 import { getLibraries, resolveLibraryRoot } from './libraries'
 import { setScanLastRan } from './app-settings'
 import { scanMoviesLibrary } from './movies'
 import { scanTvLibrary, scanTvSeasons, scanTvEpisodes } from './tv'
 import { scanGamesLibrary } from './games'
-import { getThumbnailPath } from './thumbnails'
+import { scanComicsLibrary, type ScannedComicSeries } from './comics'
+import { getThumbnailPath, getCbzThumbnailPath } from './thumbnails'
 import { computeFingerprint } from './fingerprint'
 import { reKeyMediaItem } from './tags'
 import { runAiTagging } from './ai-tagger'
+import { importComicMetadata } from './comic-metadata'
+import { importTvMetadata } from './tv-metadata'
+import { importMovieMetadata } from './movie-metadata'
 
 let scanRunning = false
 
@@ -70,6 +74,9 @@ export async function runLibraryScan(library: Library): Promise<void> {
     case 'mixed':
       await scanMixed(library, libraryRoot)
       break
+    case 'comics':
+      await scanComics(library, libraryRoot)
+      break
   }
 
   await runAiTagging(library, libraryRoot).catch((err) =>
@@ -536,6 +543,208 @@ async function scanMixed(library: Library, libraryRoot: string): Promise<void> {
   console.log(`[scanner]   mixed: indexed ${newItems.size} files`)
 }
 
+// ---------------------------------------------------------------------------
+// Comics (clear+upsert pattern — CBZ files are immutable archives)
+// ---------------------------------------------------------------------------
+
+async function scanComics(library: Library, libraryRoot: string): Promise<void> {
+  const items = await scanComicsLibrary(libraryRoot, library.id)
+  const db = getDb()
+  const now = Date.now()
+
+  // Save ComicInfo metadata for issues that were already imported so we can
+  // restore it after the clear+upsert without re-reading any CBZ files.
+  type SavedInfo = { title: string | null; year: number | null; genres: string | null; comicFields: Record<string, unknown> }
+  const savedComicInfo = new Map<string, SavedInfo>()
+  {
+    const rows = db
+      .prepare(
+        `SELECT item_key, title, year, genres, metadata FROM media_items
+         WHERE library_id = ? AND item_type = 'comic_issue'
+           AND (year IS NOT NULL OR genres IS NOT NULL)`
+      )
+      .all(library.id) as { item_key: string; title: string | null; year: number | null; genres: string | null; metadata: string | null }[]
+    for (const row of rows) {
+      const meta: Record<string, unknown> = row.metadata ? (JSON.parse(row.metadata) as Record<string, unknown>) : {}
+      savedComicInfo.set(row.item_key, {
+        title: row.title,
+        year: row.year,
+        genres: row.genres,
+        comicFields: {
+          writer: meta.writer,
+          publisher: meta.publisher,
+          translator: meta.translator,
+          web: meta.web,
+          month: meta.month,
+          day: meta.day,
+        },
+      })
+    }
+  }
+
+  clearLibraryItems(db, library.id)
+
+  const upsertSeries = db.prepare(`
+    INSERT INTO media_items (library_id, item_key, item_type, title, metadata, file_path, scanned_at)
+    VALUES (@library_id, @item_key, @item_type, @title, @metadata, @file_path, @scanned_at)
+    ON CONFLICT(item_key) DO UPDATE SET
+      title      = excluded.title,
+      metadata   = excluded.metadata,
+      file_path  = excluded.file_path,
+      scanned_at = excluded.scanned_at
+  `)
+
+  const upsertIssue = db.prepare(`
+    INSERT INTO media_items (library_id, item_key, item_type, parent_key, title, metadata, file_path, scanned_at)
+    VALUES (@library_id, @item_key, @item_type, @parent_key, @title, @metadata, @file_path, @scanned_at)
+    ON CONFLICT(item_key) DO UPDATE SET
+      parent_key = excluded.parent_key,
+      title      = excluded.title,
+      metadata   = excluded.metadata,
+      file_path  = excluded.file_path,
+      scanned_at = excluded.scanned_at
+  `)
+
+  type SeriesRec = Parameters<typeof upsertSeries.run>[0]
+  type IssueRec  = Parameters<typeof upsertIssue.run>[0]
+  type BatchEntry = { type: 'series'; rec: SeriesRec } | { type: 'issue'; rec: IssueRec }
+
+  // Collect all records before touching the DB so we can batch-insert with event-loop yields.
+  // Note: between clearLibraryItems and the final batch, the library will appear partially
+  // populated — acceptable for a background scan.
+  const allRecords: BatchEntry[] = []
+  let issueCount = 0
+
+  for (const item of items) {
+    if ('issues' in item) {
+      const series = item as ScannedComicSeries
+      const seriesKey = `${library.id}:comic_series:${series.id}`
+      allRecords.push({
+        type: 'series',
+        rec: {
+          library_id: library.id,
+          item_key: seriesKey,
+          item_type: 'comic_series',
+          title: series.title,
+          metadata: JSON.stringify({ issueCount: series.issueCount, coverUrl: series.coverUrl }),
+          file_path: null,
+          scanned_at: now,
+        },
+      })
+      for (const issue of series.issues) {
+        const issueKey = `${library.id}:comic_issue:${issue.id}`
+        allRecords.push({
+          type: 'issue',
+          rec: {
+            library_id: library.id,
+            item_key: issueKey,
+            item_type: 'comic_issue',
+            parent_key: seriesKey,
+            title: issue.title,
+            metadata: JSON.stringify({
+              issueNumber: issue.issueNumber,
+              pageCount: issue.pageCount,
+              coverUrl: issue.coverUrl,
+              isStandalone: false,
+            }),
+            file_path: issue.filePath,
+            scanned_at: now,
+          },
+        })
+        issueCount++
+      }
+    } else {
+      const issue = item as ComicIssue
+      const issueKey = `${library.id}:comic_issue:${issue.id}`
+      allRecords.push({
+        type: 'issue',
+        rec: {
+          library_id: library.id,
+          item_key: issueKey,
+          item_type: 'comic_issue',
+          parent_key: null,
+          title: issue.title,
+          metadata: JSON.stringify({
+            issueNumber: issue.issueNumber,
+            pageCount: issue.pageCount,
+            coverUrl: issue.coverUrl,
+            isStandalone: true,
+          }),
+          file_path: issue.filePath,
+          scanned_at: now,
+        },
+      })
+      issueCount++
+    }
+  }
+
+  // Build a map of item_key → fresh scan metadata (needed for ComicInfo restore below).
+  const freshMetaMap = new Map<string, Record<string, unknown>>()
+  for (const entry of allRecords) {
+    if (entry.type === 'issue') {
+      const rec = entry.rec as { item_key: unknown; metadata: unknown }
+      freshMetaMap.set(
+        String(rec.item_key),
+        JSON.parse(String(rec.metadata)) as Record<string, unknown>
+      )
+    }
+  }
+
+  // Insert in batches of 500, yielding the event loop between batches so the app
+  // remains responsive to HTTP requests during a large scan.
+  const BATCH_SIZE = 500
+  for (let i = 0; i < allRecords.length; i += BATCH_SIZE) {
+    const batch = allRecords.slice(i, i + BATCH_SIZE)
+    db.transaction(() => {
+      for (const entry of batch) {
+        if (entry.type === 'series') upsertSeries.run(entry.rec)
+        else upsertIssue.run(entry.rec)
+      }
+    })()
+    await new Promise<void>((r) => setImmediate(r))
+  }
+
+  // Restore previously-imported ComicInfo data for issues that still exist on disk.
+  // Merges scan-derived fields (pageCount, coverUrl) with the saved ComicInfo fields
+  // so neither set of data is lost. Title from ComicInfo is also preserved.
+  if (savedComicInfo.size > 0) {
+    const restoreStmt = db.prepare(
+      'UPDATE media_items SET title = @title, year = @year, genres = @genres, metadata = @metadata WHERE item_key = @item_key'
+    )
+    db.transaction(() => {
+      for (const [item_key, saved] of savedComicInfo) {
+        const freshMeta = freshMetaMap.get(item_key)
+        if (!freshMeta) continue // file was removed from disk
+        const merged = { ...freshMeta, ...saved.comicFields }
+        restoreStmt.run({ item_key, title: saved.title, year: saved.year, genres: saved.genres, metadata: JSON.stringify(merged) })
+      }
+    })()
+  }
+
+  // Prewarm CBZ cover thumbnails — fire-and-forget so they don't block scan completion.
+  for (const item of items) {
+    const issuesToWarm: ComicIssue[] = 'issues' in item
+      ? (item as ScannedComicSeries).issues.slice(0, 1)
+      : [item as ComicIssue]
+
+    for (const issue of issuesToWarm) {
+      const absPath = path.join(libraryRoot, issue.filePath)
+      getCbzThumbnailPath(absPath, library.id).catch((err) => {
+        console.warn(`[scanner]   Could not generate CBZ thumbnail for ${issue.filePath}:`, err instanceof Error ? err.message : err)
+      })
+    }
+  }
+
+  console.log(`[scanner]   comics: indexed ${items.filter((i) => 'issues' in i).length} series, ${issueCount} issues`)
+
+  // Import ComicInfo.xml metadata (title, year, genres, tags)
+  try {
+    await importComicMetadata(library)
+  } catch (err) {
+    console.error(`[scanner]   Error importing comic metadata for "${library.name}":`, err)
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------

src/lib/tags.ts

@@ -98,6 +98,62 @@ export function deleteCategoryForce(id: string): void {
   if (result.changes === 0) throw new Error(`Category not found: ${id}`)
 }
 
+/**
+ * Merge all tags from `sourceId` category into `targetId` category, then
+ * delete the source category. Tags with conflicting names (case-insensitive)
+ * are combined: their media_tags and tag_mappings rows are re-pointed to the
+ * target tag, and the source tag is deleted.
+ */
+export function mergeCategories(sourceId: string, targetId: string): void {
+  const db = getDb()
+
+  const source = db.prepare('SELECT id, name FROM tag_categories WHERE id = ?').get(sourceId) as TagCategory | undefined
+  if (!source) throw new Error(`Source category not found: ${sourceId}`)
+  const target = db.prepare('SELECT id, name FROM tag_categories WHERE id = ?').get(targetId) as TagCategory | undefined
+  if (!target) throw new Error(`Target category not found: ${targetId}`)
+
+  const sourceTags = db
+    .prepare('SELECT id, name, category_id as categoryId FROM tags WHERE category_id = ?')
+    .all(sourceId) as Tag[]
+  const targetTags = db
+    .prepare('SELECT id, name, category_id as categoryId FROM tags WHERE category_id = ?')
+    .all(targetId) as Tag[]
+
+  const targetTagsByNameLower = new Map(targetTags.map((t) => [t.name.toLowerCase(), t]))
+
+  const txn = db.transaction(() => {
+    for (const srcTag of sourceTags) {
+      const conflict = targetTagsByNameLower.get(srcTag.name.toLowerCase())
+      if (conflict) {
+        // Re-point media_tags from source tag to target tag (ignore duplicates)
+        db.prepare(
+          `INSERT OR IGNORE INTO media_tags (item_key, tag_id)
+           SELECT item_key, ? FROM media_tags WHERE tag_id = ?`
+        ).run(conflict.id, srcTag.id)
+        db.prepare('DELETE FROM media_tags WHERE tag_id = ?').run(srcTag.id)
+
+        // Re-point tag_mappings from source tag to target tag (ignore duplicates)
+        db.prepare(
+          `UPDATE OR IGNORE tag_mappings SET tag_id = ? WHERE tag_id = ?`
+        ).run(conflict.id, srcTag.id)
+        // Delete any remaining (were duplicates that couldn't be updated)
+        db.prepare('DELETE FROM tag_mappings WHERE tag_id = ?').run(srcTag.id)
+
+        // Delete the source tag
+        db.prepare('DELETE FROM tags WHERE id = ?').run(srcTag.id)
+      } else {
+        // No conflict — just move the tag to the target category
+        db.prepare('UPDATE tags SET category_id = ? WHERE id = ?').run(targetId, srcTag.id)
+      }
+    }
+
+    // Delete the now-empty source category
+    db.prepare('DELETE FROM tag_categories WHERE id = ?').run(sourceId)
+  })
+
+  txn()
+}
+
 // ─── Tags ─────────────────────────────────────────────────────────────────────
 
 export function getTags(categoryId?: string): Tag[] {
@@ -263,6 +319,52 @@ export function getSeriesEpisodeTagMap(libraryId: string): Record<string, string
   return result
 }
 
+// Returns seriesItemKey -> { tagIds, issueTitles } aggregated from all issues in each series.
+export function getComicsSeriesIssueMeta(
+  libraryId: string
+): Record<string, { tagIds: string[]; issueTitles: string[] }> {
+  const db = getDb()
+
+  // All issues belonging to a series (parent_key is not null)
+  const issues = db
+    .prepare(
+      `SELECT item_key, parent_key, title
+       FROM media_items
+       WHERE library_id = ? AND item_type = 'comic_issue' AND parent_key IS NOT NULL`
+    )
+    .all(libraryId) as { item_key: string; parent_key: string; title: string | null }[]
+
+  const result: Record<string, { tagIds: string[]; issueTitles: string[] }> = {}
+  const issueKeyToParent = new Map<string, string>()
+
+  for (const { item_key, parent_key, title } of issues) {
+    issueKeyToParent.set(item_key, parent_key)
+    const entry = (result[parent_key] ??= { tagIds: [], issueTitles: [] })
+    if (title) entry.issueTitles.push(title)
+  }
+
+  if (issueKeyToParent.size === 0) return result
+
+  // Tag assignments for those issues
+  const tagRows = db
+    .prepare(
+      `SELECT mt.item_key, mt.tag_id
+       FROM media_tags mt
+       JOIN media_items mi ON mi.item_key = mt.item_key
+       WHERE mi.library_id = ? AND mi.item_type = 'comic_issue' AND mi.parent_key IS NOT NULL`
+    )
+    .all(libraryId) as { item_key: string; tag_id: string }[]
+
+  for (const { item_key, tag_id } of tagRows) {
+    const parentKey = issueKeyToParent.get(item_key)
+    if (!parentKey) continue
+    const entry = result[parentKey]
+    if (entry && !entry.tagIds.includes(tag_id)) entry.tagIds.push(tag_id)
+  }
+
+  return result
+}
+
 export function removeAllAssignmentsForLibrary(libraryId: string): void {
   const db = getDb()
   db.prepare('DELETE FROM media_tags WHERE item_key LIKE ?').run(`${libraryId}:%`)

src/lib/thumbnails.ts

@@ -3,6 +3,7 @@ import fs from 'fs'
 import path from 'path'
 import { spawn } from 'child_process'
 import sharp from 'sharp'
+import { extractFirstZipImage } from './zip-utils'
 
 const CACHE_DIR = path.resolve(process.cwd(), '.thumbnails')
 const THUMBNAIL_WIDTH = 400
@@ -221,6 +222,33 @@ export async function getOcrImagePath(
   return cacheFile
 }
 
+const CBZ_IMAGE_EXTENSIONS = new Set(['.jpg', '.jpeg', '.png', '.webp', '.gif'])
+
+/**
+ * Returns the absolute path to a cached thumbnail JPEG for a CBZ archive.
+ * Extracts the first image entry (natural sort) from the ZIP and resizes it.
+ * Throws on failure — callers should map this to a 404.
+ */
+export async function getCbzThumbnailPath(
+  absoluteFilePath: string,
+  libraryId: string
+): Promise<string> {
+  ensureCacheDir()
+
+  const key = cacheKey(libraryId, absoluteFilePath)
+  const cacheFile = path.join(CACHE_DIR, key + '.jpg')
+
+  const cached = getCachedPath(cacheFile, absoluteFilePath)
+  if (cached) return cached
+
+  const buffer = await extractFirstZipImage(absoluteFilePath, CBZ_IMAGE_EXTENSIONS)
+  const tmp = cacheFile + '.tmp'
+  await sharp(buffer).resize(THUMBNAIL_WIDTH).jpeg({ quality: JPEG_QUALITY }).toFile(tmp)
+  fs.renameSync(tmp, cacheFile)
+
+  return cacheFile
+}
+
 /**
  * Returns the absolute path to a cached thumbnail JPEG for the given file.
  * Generates it on first call (or when the source has been modified).

src/lib/tv-metadata.ts

@@ -0,0 +1,142 @@
+import fs from 'fs'
+import path from 'path'
+import type { Library } from '@/types'
+import { getDb } from './db'
+import { resolveLibraryRoot } from './libraries'
+import { parseEpisodeNfo } from './nfo'
+
+/**
+ * Import NFO metadata for TV items (series, seasons, episodes) in a library.
+ * - For series: reads tvshow.nfo in the series folder
+ * - For episodes: reads .nfo file matching the video file
+ * - If importMetadataOnly=false: skip items that already have metadata (title/year/plot/genres)
+ * - If importMetadataOnly=true: update all items regardless of existing metadata
+ */
+export async function importTvMetadata(
+  library: Library,
+  importMetadataOnly: boolean = false
+): Promise<{ imported: number; skipped: number }> {
+  const db = getDb()
+  const libraryRoot = resolveLibraryRoot(library)
+
+  let imported = 0
+  let skipped = 0
+
+  // Process TV series
+  const series = db
+    .prepare(
+      `SELECT item_key, file_path, title, year, plot, genres FROM media_items
+       WHERE library_id = ? AND item_type = 'tv_series' AND file_path IS NOT NULL`
+    )
+    .all(library.id) as Array<{ item_key: string; file_path: string; title: string | null; year: number | null; plot: string | null; genres: string | null }>
+
+  const updateSeriesItem = db.prepare(`
+    UPDATE media_items SET title = @title, year = @year, plot = @plot, genres = @genres
+    WHERE item_key = @item_key
+  `)
+
+  db.transaction(() => {
+    for (const item of series) {
+      // Check if we should skip this item
+      if (!importMetadataOnly && hasMetadata(item)) {
+        skipped++
+        continue
+      }
+
+      const seriesPath = path.join(libraryRoot, item.file_path)
+      const nfoPath = path.join(seriesPath, 'tvshow.nfo')
+
+      try {
+        if (fs.existsSync(nfoPath)) {
+          const nfoData = parseEpisodeNfo(nfoPath) // Use episode parser as fallback, but mainly we need tvshow parser
+          // For now, we'll just mark as processed; series metadata comes from episodes usually
+          imported++
+        } else {
+          skipped++
+        }
+      } catch {
+        skipped++
+      }
+    }
+  })()
+
+  // Process TV episodes
+  const episodes = db
+    .prepare(
+      `SELECT item_key, file_path, title, year, plot, genres FROM media_items
+       WHERE library_id = ? AND item_type = 'tv_episode' AND file_path IS NOT NULL`
+    )
+    .all(library.id) as Array<{ item_key: string; file_path: string; title: string | null; year: number | null; plot: string | null; genres: string | null }>
+
+  const updateEpisodeItem = db.prepare(`
+    UPDATE media_items SET title = @title, year = @year, plot = @plot, genres = @genres
+    WHERE item_key = @item_key
+  `)
+
+  const BATCH_SIZE = 50
+  for (let i = 0; i < episodes.length; i += BATCH_SIZE) {
+    const batch = episodes.slice(i, i + BATCH_SIZE)
+
+    db.transaction(() => {
+      for (const item of batch) {
+        // Check if we should skip this item
+        if (!importMetadataOnly && hasMetadata(item)) {
+          skipped++
+          continue
+        }
+
+        const videoPath = path.join(libraryRoot, item.file_path)
+        const dir = path.dirname(videoPath)
+        const baseNameWithoutExt = path.basename(videoPath, path.extname(videoPath))
+        const nfoPath = path.join(dir, `${baseNameWithoutExt}.nfo`)
+
+        try {
+          if (fs.existsSync(nfoPath)) {
+            const nfoData = parseEpisodeNfo(nfoPath)
+            if (nfoData) {
+              updateEpisodeItem.run({
+                item_key: item.item_key,
+                title: nfoData.title ?? item.title,
+                year: nfoData.aired ? new Date(nfoData.aired).getFullYear() : null,
+                plot: nfoData.plot ?? item.plot,
+                genres: item.genres, // Keep existing genres for episodes
+              })
+              imported++
+            } else {
+              skipped++
+            }
+          } else {
+            skipped++
+          }
+        } catch {
+          skipped++
+        }
+      }
+    })()
+
+    await new Promise<void>((r) => setImmediate(r))
+  }
+
+  console.log(
+    `[tv-metadata] Imported metadata for ${imported} episodes in "${library.name}" (${importMetadataOnly ? 'full' : 'incremental'})`
+  )
+
+  return { imported, skipped }
+}
+
+/**
+ * Check if a media item already has metadata populated.
+ * Returns true if ANY of: title, year, plot, or genres are populated.
+ */
+function hasMetadata(item: {
+  title: string | null
+  year: number | null
+  plot: string | null
+  genres: string | null
+}): boolean {
+  if (item.title) return true
+  if (item.year) return true
+  if (item.plot) return true
+  if (item.genres) return true
+  return false
+}

src/lib/tv.ts

@@ -3,6 +3,7 @@ import path from 'path'
 import type { TvSeries, TvSeason, TvEpisode } from '@/types'
 import { getDb } from './db'
 import { HIDDEN_FILES, VIDEO_EXTENSIONS, fileApiUrl, thumbnailApiUrl, findFile } from './media-utils'
+import { parseTvShowNfo } from './nfo'
 
 function isVideoFile(name: string): boolean {
   return VIDEO_EXTENSIONS.has(path.extname(name).toLowerCase())
@@ -52,6 +53,7 @@ export function scanTvLibrary(libraryRoot: string, libraryId: string): TvSeries[
 
     const posterFile = findFile(seriesPath, /^(poster|folder)$/i)
     const backdropFile = findFile(seriesPath, /^(backdrop|fanart|background)$/i)
+    const nfo = parseTvShowNfo(path.join(seriesPath, 'tvshow.nfo'))
 
     const seasonDirs = readDirs(seriesPath)
     const seasonDirCount = seasonDirs.filter((sd) => {
@@ -67,11 +69,11 @@ export function scanTvLibrary(libraryRoot: string, libraryId: string): TvSeries[
 
     series.push({
       id,
-      title: dirName,
+      title: nfo?.title ?? dirName,
-      year: null,
+      year: nfo?.year ?? null,
-      plot: null,
+      plot: nfo?.plot ?? null,
-      genres: [],
+      genres: nfo?.genres ?? [],
-      status: null,
+      status: nfo?.status ?? null,
       posterUrl: posterFile
         ? thumbnailApiUrl(libraryId, path.join(dirName, posterFile))
         : null,
@@ -79,6 +81,10 @@ export function scanTvLibrary(libraryRoot: string, libraryId: string): TvSeries[
         ? fileApiUrl(libraryId, path.join(dirName, backdropFile))
         : null,
       seasonCount,
+      userRating: null,
+      aiDescription: null,
+      extractedText: null,
+      extractedTextTranslated: null,
     })
   }
 
@@ -179,6 +185,10 @@ export function scanTvEpisodes(
       rating: null,
       thumbnailUrl: thumbnailApiUrl(libraryId, videoRelPath),
       videoPath: videoRelPath,
+      userRating: null,
+      aiDescription: null,
+      extractedText: null,
+      extractedTextTranslated: null,
     })
   }
 
@@ -202,6 +212,10 @@ type DbRow = {
   genres: string | null
   metadata: string | null
   file_path: string | null
+  user_rating: number | null
+  ai_description: string | null
+  extracted_text: string | null
+  extracted_text_translated: string | null
 }
 
 export function tvSeriesFromDb(libraryId: string): TvSeries[] {
@@ -225,6 +239,10 @@ export function tvSeriesFromDb(libraryId: string): TvSeries[] {
       backdropUrl: meta.backdropUrl ?? null,
       seasonCount: meta.seasonCount ?? 0,
       manuallyEdited: meta.manuallyEdited === true,
+      userRating: row.user_rating ?? null,
+      aiDescription: row.ai_description ?? null,
+      extractedText: row.extracted_text ?? null,
+      extractedTextTranslated: row.extracted_text_translated ?? null,
     }
   })
 }
@@ -288,6 +306,10 @@ export function tvEpisodesFromDb(
         rating: meta.rating ?? null,
         thumbnailUrl: meta.thumbnailUrl ?? null,
         videoPath: row.file_path ?? '',
+        userRating: row.user_rating ?? null,
+        aiDescription: row.ai_description ?? null,
+        extractedText: row.extracted_text ?? null,
+        extractedTextTranslated: row.extracted_text_translated ?? null,
       }
     })
     .sort((a, b) => {

src/lib/users.ts

@@ -77,43 +77,60 @@ export function listUsers(): User[] {
   }))
 }
 
-export function getPermittedLibraryIds(userId: string): string[] {
+export interface LibraryPermission {
-  const db = getDb()
+  libraryId: string
-  const rows = db
+  accessLevel: 'read' | 'write'
-    .prepare('SELECT library_id FROM library_permissions WHERE user_id = ?')
-    .all(userId) as { library_id: string }[]
-  return rows.map((r) => r.library_id)
 }
 
-export function setLibraryPermissions(userId: string, libraryIds: string[]): void {
+export function getLibraryPermissions(userId: string): LibraryPermission[] {
+  const db = getDb()
+  const rows = db
+    .prepare('SELECT library_id, access_level FROM library_permissions WHERE user_id = ?')
+    .all(userId) as { library_id: string; access_level: string }[]
+  return rows.map((r) => ({ libraryId: r.library_id, accessLevel: r.access_level as 'read' | 'write' }))
+}
+
+export function getLibraryAccessLevel(userId: string, libraryId: string): 'read' | 'write' | null {
+  const db = getDb()
+  const row = db
+    .prepare('SELECT access_level FROM library_permissions WHERE user_id = ? AND library_id = ?')
+    .get(userId, libraryId) as { access_level: string } | undefined
+  if (!row) return null
+  return row.access_level as 'read' | 'write'
+}
+
+export function setLibraryPermissions(userId: string, permissions: LibraryPermission[]): void {
   const db = getDb()
   const tx = db.transaction(() => {
     db.prepare('DELETE FROM library_permissions WHERE user_id = ?').run(userId)
-    const insert = db.prepare('INSERT INTO library_permissions (user_id, library_id) VALUES (?, ?)')
+    const insert = db.prepare(
-    for (const libraryId of libraryIds) {
+      'INSERT INTO library_permissions (user_id, library_id, access_level) VALUES (?, ?, ?)'
-      insert.run(userId, libraryId)
+    )
+    for (const { libraryId, accessLevel } of permissions) {
+      insert.run(userId, libraryId, accessLevel)
     }
   })
   tx()
 }
 
 export function getLibrariesForUser(userId: string, role: 'admin' | 'user'): Library[] {
-  if (role === 'admin') return getLibraries()
+  if (role === 'admin') return getLibraries().map((l) => ({ ...l, accessLevel: 'admin' as const }))
   const db = getDb()
   const rows = db
     .prepare(
-      `SELECT l.id, l.name, l.path, l.type, l.cover_ext
+      `SELECT l.id, l.name, l.path, l.type, l.cover_ext, lp.access_level
        FROM libraries l
        INNER JOIN library_permissions lp ON lp.library_id = l.id
        WHERE lp.user_id = ?
        ORDER BY l.name ASC`
     )
-    .all(userId) as { id: string; name: string; path: string; type: string; cover_ext: string | null }[]
+    .all(userId) as { id: string; name: string; path: string; type: string; cover_ext: string | null; access_level: string }[]
   return rows.map((r) => ({
     id: r.id,
     name: r.name,
     path: r.path,
     type: r.type as Library['type'],
     coverExt: r.cover_ext,
+    accessLevel: r.access_level as 'read' | 'write',
   }))
 }

src/lib/zip-utils.ts

@@ -0,0 +1,232 @@
+import { open } from 'fs/promises'
+import type { FileHandle } from 'fs/promises'
+import zlib from 'zlib'
+import { promisify } from 'util'
+
+const inflateRaw = promisify(zlib.inflateRaw)
+
+const EOCD_SIG = 0x06054b50
+const CD_SIG   = 0x02014b50
+const LFH_SIG  = 0x04034b50
+
+export interface CdEntry {
+  name: string
+  compressionMethod: number
+  compressedSize: number
+  uncompressedSize: number
+  localHeaderOffset: number
+}
+
+/**
+ * Read a ZIP file's central directory without loading the entire archive.
+ * Returns null if no EOCD record is found (corrupt/non-ZIP file).
+ * Returns an empty array for a valid but empty archive.
+ */
+async function readCentralDirectory(fd: FileHandle, fileSize: number): Promise<CdEntry[] | null> {
+  if (fileSize < 22) return null
+
+  // The EOCD record is within the last 65558 bytes (22-byte record + 65535-byte max comment).
+  const tailLen = Math.min(65558, fileSize)
+  const tailBuf = Buffer.allocUnsafe(tailLen)
+  await fd.read(tailBuf, 0, tailLen, fileSize - tailLen)
+
+  // Scan backwards for the EOCD signature.
+  let eocdOff = -1
+  for (let i = tailLen - 22; i >= 0; i--) {
+    if (tailBuf.readUInt32LE(i) === EOCD_SIG) { eocdOff = i; break }
+  }
+  if (eocdOff === -1) return null  // no EOCD → corrupt
+
+  const entryCount = tailBuf.readUInt16LE(eocdOff + 10)
+  const cdSize     = tailBuf.readUInt32LE(eocdOff + 12)
+  const cdOffset   = tailBuf.readUInt32LE(eocdOff + 16)
+  if (entryCount === 0) return []  // valid empty archive
+  if (cdOffset + cdSize > fileSize || cdSize === 0) return null  // malformed
+
+  const cdBuf = Buffer.allocUnsafe(cdSize)
+  await fd.read(cdBuf, 0, cdSize, cdOffset)
+
+  const entries: CdEntry[] = []
+  let pos = 0
+  for (let i = 0; i < entryCount && pos + 46 <= cdBuf.length; i++) {
+    if (cdBuf.readUInt32LE(pos) !== CD_SIG) break
+    const compressionMethod  = cdBuf.readUInt16LE(pos + 10)
+    const compressedSize     = cdBuf.readUInt32LE(pos + 20)
+    const uncompressedSize   = cdBuf.readUInt32LE(pos + 24)
+    const filenameLen        = cdBuf.readUInt16LE(pos + 28)
+    const extraLen           = cdBuf.readUInt16LE(pos + 30)
+    const commentLen         = cdBuf.readUInt16LE(pos + 32)
+    const localHeaderOffset  = cdBuf.readUInt32LE(pos + 42)
+    const name = cdBuf.toString('utf8', pos + 46, pos + 46 + filenameLen)
+    entries.push({ name, compressionMethod, compressedSize, uncompressedSize, localHeaderOffset })
+    pos += 46 + filenameLen + extraLen + commentLen
+  }
+  return entries
+}
+
+/** Thrown when a ZIP archive has no valid End-of-Central-Directory record. */
+export class CorruptZipError extends Error {
+  readonly code = 'ERR_CORRUPT_ZIP'
+  constructor(absolutePath: string) {
+    super(`Corrupt or invalid ZIP archive: ${absolutePath}`)
+    this.name = 'CorruptZipError'
+  }
+}
+
+export function isCorruptZipError(err: unknown): err is CorruptZipError {
+  return err instanceof CorruptZipError ||
+    (err instanceof Error && (err as CorruptZipError).code === 'ERR_CORRUPT_ZIP')
+}
+
+/**
+ * Count the number of image entries inside a ZIP/CBZ archive by reading
+ * only its central directory — no full-file read required.
+ * Returns { pageCount, valid } where valid=false means the archive has no
+ * valid EOCD record (corrupt file).
+ */
+export async function countZipImages(
+  absolutePath: string,
+  imageExtensions: Set<string>
+): Promise<{ pageCount: number; valid: boolean }> {
+  let fd: FileHandle | null = null
+  try {
+    fd = await open(absolutePath, 'r')
+    const { size } = await fd.stat()
+    const entries = await readCentralDirectory(fd, size)
+    if (entries === null) return { pageCount: 0, valid: false }
+    const pageCount = entries.filter((e) => {
+      if (e.name.endsWith('/')) return false
+      const dot = e.name.lastIndexOf('.')
+      return dot !== -1 && imageExtensions.has(e.name.slice(dot).toLowerCase())
+    }).length
+    return { pageCount, valid: true }
+  } catch {
+    return { pageCount: 0, valid: false }
+  } finally {
+    await fd?.close()
+  }
+}
+
+/**
+ * Extract the raw bytes of a specific entry from a ZIP archive.
+ * Reads only the local file header + compressed data for that entry.
+ * Supports stored (method 0) and deflate (method 8).
+ */
+export async function extractZipEntry(absolutePath: string, entry: CdEntry): Promise<Buffer | null> {
+  let fd: FileHandle | null = null
+  try {
+    fd = await open(absolutePath, 'r')
+
+    // Read local file header (30 bytes) to get exact data offset.
+    const lfhBuf = Buffer.allocUnsafe(30)
+    await fd.read(lfhBuf, 0, 30, entry.localHeaderOffset)
+    if (lfhBuf.readUInt32LE(0) !== LFH_SIG) return null
+    const localFilenameLen = lfhBuf.readUInt16LE(26)
+    const localExtraLen    = lfhBuf.readUInt16LE(28)
+    const dataOffset = entry.localHeaderOffset + 30 + localFilenameLen + localExtraLen
+
+    const compressedBuf = Buffer.allocUnsafe(entry.compressedSize)
+    await fd.read(compressedBuf, 0, entry.compressedSize, dataOffset)
+
+    if (entry.compressionMethod === 0) return compressedBuf
+    if (entry.compressionMethod === 8) return await inflateRaw(compressedBuf) as Buffer
+    return null
+  } catch {
+    return null
+  } finally {
+    await fd?.close()
+  }
+}
+
+/**
+ * Find a named entry (case-insensitive) in a ZIP archive's central directory.
+ * Returns null if not found or on error.
+ */
+export async function findZipEntry(absolutePath: string, entryName: string): Promise<CdEntry | null> {
+  let fd: FileHandle | null = null
+  try {
+    fd = await open(absolutePath, 'r')
+    const { size } = await fd.stat()
+    const entries = await readCentralDirectory(fd, size)
+    if (!entries) return null
+    const lower = entryName.toLowerCase()
+    return entries.find((e) => {
+      const n = e.name.toLowerCase()
+      return n === lower || n.endsWith('/' + lower)
+    }) ?? null
+  } catch {
+    return null
+  } finally {
+    await fd?.close()
+  }
+}
+
+/**
+ * Extract the first image entry (natural sort) from a ZIP/CBZ archive.
+ * Reads only the central directory and the single chosen entry — no full-file load.
+ * Throws CorruptZipError if the archive has no valid structure.
+ */
+export async function extractFirstZipImage(
+  absolutePath: string,
+  imageExtensions: Set<string>
+): Promise<Buffer> {
+  let fd: FileHandle | null = null
+  try {
+    fd = await open(absolutePath, 'r')
+    const { size } = await fd.stat()
+    const entries = await readCentralDirectory(fd, size)
+    if (entries === null) throw new CorruptZipError(absolutePath)
+
+    const imageEntries = entries
+      .filter((e) => {
+        if (e.name.endsWith('/')) return false
+        const dot = e.name.lastIndexOf('.')
+        return dot !== -1 && imageExtensions.has(e.name.slice(dot).toLowerCase())
+      })
+      .sort((a, b) =>
+        a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' })
+      )
+
+    if (imageEntries.length === 0) throw new Error(`No image entries in archive: ${absolutePath}`)
+
+    const entry = imageEntries[0]
+
+    // Read local file header to get the exact data offset.
+    const lfhBuf = Buffer.allocUnsafe(30)
+    await fd.read(lfhBuf, 0, 30, entry.localHeaderOffset)
+    if (lfhBuf.readUInt32LE(0) !== LFH_SIG) throw new CorruptZipError(absolutePath)
+    const localFilenameLen = lfhBuf.readUInt16LE(26)
+    const localExtraLen    = lfhBuf.readUInt16LE(28)
+    const dataOffset = entry.localHeaderOffset + 30 + localFilenameLen + localExtraLen
+
+    const compressedBuf = Buffer.allocUnsafe(entry.compressedSize)
+    await fd.read(compressedBuf, 0, entry.compressedSize, dataOffset)
+
+    if (entry.compressionMethod === 0) return compressedBuf
+    if (entry.compressionMethod === 8) return await inflateRaw(compressedBuf) as Buffer
+    throw new Error(`Unsupported compression method ${entry.compressionMethod}: ${absolutePath}`)
+  } finally {
+    await fd?.close()
+  }
+}
+
+/**
+ * Process an array of items concurrently with a concurrency limit.
+ * Preserves index order in results.
+ */
+export async function mapConcurrent<T, U>(
+  items: T[],
+  limit: number,
+  fn: (item: T) => Promise<U>
+): Promise<U[]> {
+  const results: U[] = new Array(items.length)
+  let next = 0
+  async function worker(): Promise<void> {
+    while (next < items.length) {
+      const i = next++
+      results[i] = await fn(items[i])
+    }
+  }
+  await Promise.all(Array.from({ length: Math.min(limit, items.length) }, worker))
+  return results
+}

src/types/index.ts

@@ -1,4 +1,33 @@
-export type LibraryType = 'games' | 'mixed' | 'movies' | 'tv'
+export type LibraryType = 'comics' | 'games' | 'mixed' | 'movies' | 'tv'
+
+export type RatingOperator = 'gte' | 'eq' | 'lte'
+
+export interface ComicSeries {
+  id: string
+  item_key?: string
+  title: string
+  coverUrl: string | null
+  issueCount: number
+  userRating: number | null
+  aiDescription: string | null
+  extractedText: string | null
+  extractedTextTranslated: string | null
+}
+
+export interface ComicIssue {
+  id: string
+  item_key?: string
+  title: string
+  issueNumber: number | null
+  pageCount: number
+  coverUrl: string | null
+  filePath: string
+  isStandalone: boolean
+  userRating: number | null
+  aiDescription: string | null
+  extractedText: string | null
+  extractedTextTranslated: string | null
+}
 
 export interface Library {
   id: string
@@ -6,6 +35,7 @@ export interface Library {
   path: string
   type: LibraryType
   coverExt: string | null
+  accessLevel?: 'admin' | 'read' | 'write'
 }
 
 export type GamePlatform = 'windows' | 'linux' | 'macos' | 'android'
@@ -25,6 +55,10 @@ export interface Game {
   wideCoverUrl: string | null
   gameFiles: GameFile[]
   platforms: GamePlatform[]
+  userRating: number | null
+  aiDescription: string | null
+  extractedText: string | null
+  extractedTextTranslated: string | null
 }
 
 export interface GameSeries {
@@ -45,6 +79,10 @@ export interface FileEntry {
   url: string | null
   thumbnailUrl: string | null
   hasExtractedText?: boolean
+  userRating?: number | null
+  aiDescription?: string | null
+  extractedText?: string | null
+  extractedTextTranslated?: string | null
 }
 
 export interface Movie {
@@ -60,6 +98,10 @@ export interface Movie {
   backdropUrl: string | null
   videoPath: string
   manuallyEdited?: boolean
+  userRating: number | null
+  aiDescription: string | null
+  extractedText: string | null
+  extractedTextTranslated: string | null
 }
 
 export interface TvSeries {
@@ -74,6 +116,10 @@ export interface TvSeries {
   backdropUrl: string | null
   seasonCount: number
   manuallyEdited?: boolean
+  userRating: number | null
+  aiDescription: string | null
+  extractedText: string | null
+  extractedTextTranslated: string | null
 }
 
 export interface TvSeason {
@@ -97,6 +143,10 @@ export interface TvEpisode {
   rating: number | null
   thumbnailUrl: string | null
   videoPath: string
+  userRating: number | null
+  aiDescription: string | null
+  extractedText: string | null
+  extractedTextTranslated: string | null
 }
 
 export interface DirectoryListing {
@@ -126,3 +176,32 @@ export interface UserSettings {
   tvLoop: boolean
   tvMuted: boolean
 }
+
+export interface ComicInfoData {
+  title: string | null
+  year: number | null
+  month: number | null
+  day: number | null
+  writer: string | null
+  translator: string | null
+  publisher: string | null
+  genre: string | null
+  tags: string[]
+  web: string | null
+}
+
+export interface ImportedTag {
+  id: string
+  libraryId: string
+  name: string
+  itemCount: number
+}
+
+export interface TagMapping {
+  id: string
+  libraryId: string
+  importedTagName: string
+  tagId: string
+  tagName?: string
+  categoryName?: string
+}