From f3ba75f46523f916ea5c6e1de0556a1c8b45ef1e Mon Sep 17 00:00:00 2001
From: muhammadali-imran <imranmuhammadali633@gmail.com>
Date: Sun, 4 Oct 2026 15:37:18 +0500
Subject: [PATCH 1/8] fixed

---
 frontend/src/pages/admin/AdminDemoVideo.jsx |  8 +++++++-
 frontend/src/pages/admin/AdminVideos.jsx    | 14 +++++++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/admin/AdminDemoVideo.jsx b/frontend/src/pages/admin/AdminDemoVideo.jsx
index 699ae0a..597bd0d 100644
--- a/frontend/src/pages/admin/AdminDemoVideo.jsx
+++ b/frontend/src/pages/admin/AdminDemoVideo.jsx
@@ -11,6 +11,7 @@ export default function AdminDemoVideo() {
   const [current, setCurrent] = useState(null)
   const [file, setFile] = useState(null)
   const [previewUrl, setPreviewUrl] = useState('')
+  const [previewFailed, setPreviewFailed] = useState(false)
   const [title, setTitle] = useState('')
   const [durationSec, setDurationSec] = useState(0)
   const [loading, setLoading] = useState(true)
@@ -37,6 +38,7 @@ export default function AdminDemoVideo() {
     if (!selected) {
       setFile(null)
       setPreviewUrl('')
+      setPreviewFailed(false)
       return
     }
     if (!selected.type.startsWith('video/')) {
@@ -46,6 +48,7 @@ export default function AdminDemoVideo() {
       return
     }
     setFile(selected)
+    setPreviewFailed(false)
     setPreviewUrl(URL.createObjectURL(selected))
     setTitle(titleFromFile(selected.name))
     setDurationSec((await inspectVideoFile(selected)).durationSec)
@@ -61,6 +64,7 @@ export default function AdminDemoVideo() {
       setCurrent(saved)
       setFile(null)
       setPreviewUrl('')
+      setPreviewFailed(false)
       setMessage({ tone: 'success', text: 'Demo video uploaded and live on the public demo page.' })
     } catch (error) {
       setMessage({ tone: 'error', text: error.message || 'The demo video could not be uploaded.' })
@@ -102,7 +106,9 @@ export default function AdminDemoVideo() {
     <form className="upload" onSubmit={upload} noValidate>
       <div className="upload-drop">
         {previewUrl
-          ? <video src={previewUrl} controls playsInline className="upload-preview" aria-label="Preview of the selected demo video" />
+          ? previewFailed
+            ? <Alert tone="info">Firefox could not preview this file. You can still upload it; playback depends on its video format and codec.</Alert>
+            : <video src={previewUrl} controls playsInline onError={() => setPreviewFailed(true)} className="upload-preview" aria-label="Preview of the selected demo video" />
           : <label className="upload-pick"><span className="display display-sm">Choose a video</span><span>MP4, WebM or MOV from this device.</span><input type="file" accept="video/*" className="sr-only" onChange={pick} /></label>}
         {file && <p className="upload-file"><b>{file.name}</b> · {formatBytes(file.size)} · {formatTime(durationSec)} <label className="link-accent">Change<input type="file" accept="video/*" className="sr-only" onChange={pick} /></label></p>}
       </div>
diff --git a/frontend/src/pages/admin/AdminVideos.jsx b/frontend/src/pages/admin/AdminVideos.jsx
index c47b9e5..f5addd2 100644
--- a/frontend/src/pages/admin/AdminVideos.jsx
+++ b/frontend/src/pages/admin/AdminVideos.jsx
@@ -76,6 +76,7 @@ function UploadPanel() {
   const { categories, addVideo } = useLibrary()
   const [file, setFile] = useState(null)
   const [previewUrl, setPreviewUrl] = useState('')
+  const [previewFailed, setPreviewFailed] = useState(false)
   const [meta, setMeta] = useState({ durationSec: 0, poster: '' })
   const [form, setForm] = useState({ title: '', categoryId: '', status: 'published' })
   const [busy, setBusy] = useState(false)
@@ -86,13 +87,14 @@ function UploadPanel() {
     const chosen = event.target.files?.[0]
     if (previewUrl) URL.revokeObjectURL(previewUrl)
     setMessage(null)
-    if (!chosen) { setFile(null); setPreviewUrl(''); return }
+    if (!chosen) { setFile(null); setPreviewUrl(''); setPreviewFailed(false); return }
     if (!chosen.type.startsWith('video/')) {
-      setFile(null); setPreviewUrl('')
+      setFile(null); setPreviewUrl(''); setPreviewFailed(false)
       setMessage({ tone: 'error', text: 'Choose a video file (MP4, WebM or MOV).' })
       return
     }
     setFile(chosen)
+    setPreviewFailed(false)
     setPreviewUrl(URL.createObjectURL(chosen))
     setForm((current) => ({ ...current, title: current.title || titleFromFile(chosen.name) }))
     setMeta(await inspectVideoFile(chosen))
@@ -107,7 +109,7 @@ function UploadPanel() {
       await addVideo({ file, ...form, ...meta })
       setMessage({ tone: 'success', text: `“${form.title.trim()}” uploaded${form.status === 'published' && form.categoryId ? ' and live for contributors.' : '. Assign a category and publish it to make it visible.'}` })
       URL.revokeObjectURL(previewUrl)
-      setFile(null); setPreviewUrl(''); setForm({ title: '', categoryId: '', status: 'published' })
+      setFile(null); setPreviewUrl(''); setPreviewFailed(false); setForm({ title: '', categoryId: '', status: 'published' })
     } catch (error) {
       setMessage({ tone: 'error', text: error?.message || 'The upload failed. Check that your browser has storage space and try again.' })
     } finally { setBusy(false) }
@@ -118,7 +120,9 @@ function UploadPanel() {
     <form className="upload" onSubmit={submit} noValidate>
       <div className="upload-drop">
         {previewUrl
-          ? <video src={previewUrl} controls playsInline className="upload-preview" aria-label="Preview of the selected video" />
+          ? previewFailed
+            ? <Alert tone="info">Firefox could not preview this file. You can still upload it; playback depends on its video format and codec.</Alert>
+            : <video src={previewUrl} controls playsInline onError={() => setPreviewFailed(true)} className="upload-preview" aria-label="Preview of the selected video" />
           : <label className="upload-pick"><span className="display display-sm">Choose a video</span><span>MP4, WebM or MOV from this device.</span><input type="file" accept="video/*" className="sr-only" onChange={pick} /></label>}
         {file && <p className="upload-file"><b>{file.name}</b> · {formatBytes(file.size)} · {formatTime(meta.durationSec)} <label className="link-accent">Change<input type="file" accept="video/*" className="sr-only" onChange={pick} /></label></p>}
       </div>
@@ -171,7 +175,7 @@ function VideoRow({ video, videos, categories, selected, onToggleSelect }) {
         <button type="button" className="is-danger" onClick={() => setMode('delete')}>Delete</button>
       </div>
     </div>
-    {mode === 'preview' && (video.videoUrl ? <video src={video.videoUrl} controls playsInline className="video-row-preview" aria-label={`Preview of ${video.title}`} /> : <Alert tone="error">This video's file is missing from this browser.</Alert>)}
+    {mode === 'preview' && (video.videoUrl ? <video src={video.videoUrl} crossOrigin="use-credentials" controls playsInline className="video-row-preview" aria-label={`Preview of ${video.title}`} /> : <Alert tone="error">This video's file is missing from this browser.</Alert>)}
     {mode === 'edit' && <div className="video-row-edit">
       <Field label="Title" name="title" value={draft.title} onChange={change} />
       <Field as="select" label="Category" name="categoryId" value={draft.categoryId} onChange={change}><option value="">Unassigned</option>{categories.map((item) => <option key={item.id} value={item.id}>{item.label}</option>)}</Field>

From 48a45c8351b62a258500c9104093318db80994ab Mon Sep 17 00:00:00 2001
From: muhammadali-imran <imranmuhammadali633@gmail.com>
Date: Sun, 4 Oct 2026 15:53:59 +0500
Subject: [PATCH 2/8] fixed

---
 backend/src/services/storage/googleDriveDriver.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/backend/src/services/storage/googleDriveDriver.js b/backend/src/services/storage/googleDriveDriver.js
index 052a4b1..75faa46 100644
--- a/backend/src/services/storage/googleDriveDriver.js
+++ b/backend/src/services/storage/googleDriveDriver.js
@@ -122,6 +122,7 @@ export function createGoogleDriveDriver({ serviceAccountJson, rootFolderId, driv
 
     const finalResponse = await fetch(uploadUrl, {
       method: 'PUT',
+      duplex: 'half',
       headers: {
         'Content-Type': mimeType,
         'Content-Length': String(fileSize),

From 6a39fa480f5e6ac61d59100844ac474e8acba681 Mon Sep 17 00:00:00 2001
From: muhammadali-imran <imranmuhammadali633@gmail.com>
Date: Sun, 4 Oct 2026 16:57:19 +0500
Subject: [PATCH 3/8] fixed

---
 .../src/services/storage/googleDriveDriver.js  | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/backend/src/services/storage/googleDriveDriver.js b/backend/src/services/storage/googleDriveDriver.js
index 75faa46..76a5a1c 100644
--- a/backend/src/services/storage/googleDriveDriver.js
+++ b/backend/src/services/storage/googleDriveDriver.js
@@ -66,9 +66,13 @@ export function createGoogleDriveDriver({ serviceAccountJson, rootFolderId, driv
   }
 
   async function folderIdFor(folderPath) {
+    if (!folderPath) return rootFolderId
+
     let parentId = rootFolderId
     let cacheKey = ''
-    for (const name of folderPath.split('/').filter(Boolean)) {
+    const segments = String(folderPath).split('/').filter(Boolean)
+
+    for (const name of segments) {
       cacheKey = `${cacheKey}/${name}`
       if (folderIds.has(cacheKey)) {
         parentId = folderIds.get(cacheKey)
@@ -80,6 +84,7 @@ export function createGoogleDriveDriver({ serviceAccountJson, rootFolderId, driv
         pageSize: 1,
         spaces: 'drive',
         supportsAllDrives: true,
+        includeItemsFromAllDrives: true,
       })
       let id = listed.data.files?.[0]?.id
       if (!id) {
@@ -98,15 +103,17 @@ export function createGoogleDriveDriver({ serviceAccountJson, rootFolderId, driv
 
   async function uploadWithResumableSession({ tempPath, parentId, fileName, mimeType, ext }) {
     const fileSize = (await fs.promises.stat(tempPath)).size
+    const safeMime = mimeType || 'video/mp4'
     const suffix = ext ? (ext.startsWith('.') ? ext : `.${ext}`) : ''
-    const metadata = { name: fileName || `${randomUUID()}${suffix}`, parents: [parentId], mimeType }
+    const metadata = { name: fileName || `${randomUUID()}${suffix}`, parents: [parentId], mimeType: safeMime }
     const token = await accessToken()
+
     const session = await fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable&supportsAllDrives=true', {
       method: 'POST',
       headers: {
         Authorization: `Bearer ${token}`,
         'Content-Type': 'application/json; charset=UTF-8',
-        'X-Upload-Content-Type': mimeType,
+        'X-Upload-Content-Type': safeMime,
         'X-Upload-Content-Length': String(fileSize),
       },
       body: JSON.stringify(metadata),
@@ -120,12 +127,15 @@ export function createGoogleDriveDriver({ serviceAccountJson, rootFolderId, driv
     const uploadUrl = session.headers.get('Location')
     if (!uploadUrl) throw new Error('Google Drive upload session is missing the upload URL.')
 
+    const contentRange = fileSize > 0 ? `bytes 0-${fileSize - 1}/${fileSize}` : 'bytes */0'
+
     const finalResponse = await fetch(uploadUrl, {
       method: 'PUT',
       duplex: 'half',
       headers: {
-        'Content-Type': mimeType,
+        'Content-Type': safeMime,
         'Content-Length': String(fileSize),
+        'Content-Range': contentRange,
       },
       body: createReadStream(tempPath),
     })

From f256ee6054fb4f395192737ce42c2183fb7e0cf0 Mon Sep 17 00:00:00 2001
From: muhammadali-imran <imranmuhammadali633@gmail.com>
Date: Sun, 4 Oct 2026 17:13:36 +0500
Subject: [PATCH 4/8] fixed

---
 backend/src/services/storage/googleDriveDriver.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/backend/src/services/storage/googleDriveDriver.js b/backend/src/services/storage/googleDriveDriver.js
index 76a5a1c..cae4f9b 100644
--- a/backend/src/services/storage/googleDriveDriver.js
+++ b/backend/src/services/storage/googleDriveDriver.js
@@ -127,6 +127,7 @@ export function createGoogleDriveDriver({ serviceAccountJson, rootFolderId, driv
     const uploadUrl = session.headers.get('Location')
     if (!uploadUrl) throw new Error('Google Drive upload session is missing the upload URL.')
 
+    // Calculate the exact byte range expected by Google Drive
     const contentRange = fileSize > 0 ? `bytes 0-${fileSize - 1}/${fileSize}` : 'bytes */0'
 
     const finalResponse = await fetch(uploadUrl, {
@@ -135,7 +136,7 @@ export function createGoogleDriveDriver({ serviceAccountJson, rootFolderId, driv
       headers: {
         'Content-Type': safeMime,
         'Content-Length': String(fileSize),
-        'Content-Range': contentRange,
+        'Content-Range': contentRange, 
       },
       body: createReadStream(tempPath),
     })

From 71003a43f5c397dfc1f3351b248b4700ebcdeb16 Mon Sep 17 00:00:00 2001
From: muhammadali-imran <imranmuhammadali633@gmail.com>
Date: Sun, 4 Oct 2026 17:30:26 +0500
Subject: [PATCH 5/8] fix

---
 backend/src/controllers/videoController.js | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/backend/src/controllers/videoController.js b/backend/src/controllers/videoController.js
index f294963..c3a44dd 100644
--- a/backend/src/controllers/videoController.js
+++ b/backend/src/controllers/videoController.js
@@ -6,7 +6,24 @@ import { sendFile } from '../utils/sendFile.js'
 export const videoController = {
   list: asyncHandler(async (req, res) => ok(res, await videoService.list(req.user))),
   get: asyncHandler(async (req, res) => ok(res, await videoService.get(req.params.id, req.user))),
-  create: asyncHandler(async (req, res) => created(res, await videoService.create(req.user, req.body, req.files))),
+
+  create: asyncHandler(async (req, res) => {
+    try {
+      const result = await videoService.create(req.user, req.body, req.files)
+      return created(res, result)
+    } catch (err) {
+      console.error('================ VIDEO CREATE FAILURE ================')
+      console.error('Timestamp:', new Date().toISOString())
+      console.error('Error Name:', err?.name)
+      console.error('Error Message:', err?.message)
+      console.error('Status/Code:', err?.status || err?.statusCode || err?.code)
+      if (err?.cause) console.error('Error Cause:', err.cause)
+      console.error('Stack Trace:', err?.stack)
+      console.error('======================================================')
+      throw err // Re-throws to express global error handler
+    }
+  }),
+
   update: asyncHandler(async (req, res) => ok(res, await videoService.update(req.params.id, req.body))),
   remove: asyncHandler(async (req, res) => { await videoService.remove(req.params.id); noContent(res) }),
   file: asyncHandler(async (req, res) => sendFile(req, res, await videoService.getFile(req.params.id, req.user))),

From b4a2680778165285abdb9af9bb2558bf8bf94e7a Mon Sep 17 00:00:00 2001
From: muhammadali-imran <imranmuhammadali633@gmail.com>
Date: Sun, 4 Oct 2026 17:41:45 +0500
Subject: [PATCH 6/8] Log video upload failures

---
 backend/src/controllers/videoController.js | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/backend/src/controllers/videoController.js b/backend/src/controllers/videoController.js
index c3a44dd..897aa0c 100644
--- a/backend/src/controllers/videoController.js
+++ b/backend/src/controllers/videoController.js
@@ -12,14 +12,7 @@ export const videoController = {
       const result = await videoService.create(req.user, req.body, req.files)
       return created(res, result)
     } catch (err) {
-      console.error('================ VIDEO CREATE FAILURE ================')
-      console.error('Timestamp:', new Date().toISOString())
-      console.error('Error Name:', err?.name)
-      console.error('Error Message:', err?.message)
-      console.error('Status/Code:', err?.status || err?.statusCode || err?.code)
-      if (err?.cause) console.error('Error Cause:', err.cause)
-      console.error('Stack Trace:', err?.stack)
-      console.error('======================================================')
+      console.error('UPLOAD ERROR:', err.message, err.status, err.stack)
       throw err // Re-throws to express global error handler
     }
   }),

From 8f7b3cf23d45fcdf4af24bf484d9812fa0c84293 Mon Sep 17 00:00:00 2001
From: muhammadali-imran <imranmuhammadali633@gmail.com>
Date: Sun, 4 Oct 2026 22:45:27 +0500
Subject: [PATCH 7/8] fix

---
 backend/package.json                          |  2 +-
 backend/src/app.js                            |  3 +-
 .../src/services/storage/googleDriveDriver.js | 82 ++++++++-----------
 backend/src/services/storage/index.js         | 74 +++++++++++------
 4 files changed, 85 insertions(+), 76 deletions(-)

diff --git a/backend/package.json b/backend/package.json
index 47baa67..af1fcfc 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -12,7 +12,7 @@
   "license": "MIT",
   "type": "module",
   "engines": {
-    "node": ">=20"
+    "node": ">=22"
   },
   "dependencies": {
     "@getbrevo/brevo": "^6.0.3",
diff --git a/backend/src/app.js b/backend/src/app.js
index 3e24d80..f8d240e 100644
--- a/backend/src/app.js
+++ b/backend/src/app.js
@@ -32,8 +32,7 @@ app.use(pinoHttp({
   customLogLevel: (req, res, error) => (error || res.statusCode >= 500 ? 'error' : res.statusCode >= 400 ? 'warn' : 'info'),
 }))
 
-// same-site lets the app on localhost:5173 load videos and posters from the API on localhost:5000.
-app.use(helmet({ crossOriginResourcePolicy: { policy: 'same-site' } }))
+app.use(helmet({ crossOriginResourcePolicy: { policy: 'cross-origin' } }))
 app.use(cors({ origin: env.clientOrigins, credentials: true }))
 app.use(compression())
 app.use(express.json({ limit: '100kb' }))
diff --git a/backend/src/services/storage/googleDriveDriver.js b/backend/src/services/storage/googleDriveDriver.js
index cae4f9b..2bdc170 100644
--- a/backend/src/services/storage/googleDriveDriver.js
+++ b/backend/src/services/storage/googleDriveDriver.js
@@ -1,7 +1,7 @@
-import fs from 'node:fs'
 import { createReadStream } from 'node:fs'
 import { google } from 'googleapis'
 import { randomUUID } from 'node:crypto'
+import { logger } from '../../utils/logger.js'
 
 const DRIVE_SCOPE = 'https://www.googleapis.com/auth/drive'
 const FOLDER_MIME = 'application/vnd.google-apps.folder'
@@ -59,12 +59,6 @@ export function createGoogleDriveDriver({ serviceAccountJson, rootFolderId, driv
   const drive = google.drive({ version: 'v3', auth })
   const folderIds = new Map()
 
-  async function accessToken() {
-    const client = await auth.getClient()
-    const token = await client.getAccessToken()
-    return token.token
-  }
-
   async function folderIdFor(folderPath) {
     if (!folderPath) return rootFolderId
 
@@ -102,53 +96,43 @@ export function createGoogleDriveDriver({ serviceAccountJson, rootFolderId, driv
   }
 
   async function uploadWithResumableSession({ tempPath, parentId, fileName, mimeType, ext }) {
-    const fileSize = (await fs.promises.stat(tempPath)).size
     const safeMime = mimeType || 'video/mp4'
     const suffix = ext ? (ext.startsWith('.') ? ext : `.${ext}`) : ''
-    const metadata = { name: fileName || `${randomUUID()}${suffix}`, parents: [parentId], mimeType: safeMime }
-    const token = await accessToken()
-
-    const session = await fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable&supportsAllDrives=true', {
-      method: 'POST',
-      headers: {
-        Authorization: `Bearer ${token}`,
-        'Content-Type': 'application/json; charset=UTF-8',
-        'X-Upload-Content-Type': safeMime,
-        'X-Upload-Content-Length': String(fileSize),
-      },
-      body: JSON.stringify(metadata),
-    })
-
-    if (!session.ok) {
-      const text = await session.text()
-      throw new Error(`Google Drive upload session creation failed (${session.status}): ${text}`)
+    const uploadName = fileName || `${randomUUID()}${suffix}`
+
+    let res
+    try {
+      res = await drive.files.create({
+        requestBody: { name: uploadName, parents: [parentId], mimeType: safeMime },
+        media: { mimeType: safeMime, body: createReadStream(tempPath) },
+        fields: 'id',
+        supportsAllDrives: true,
+      })
+    } catch (err) {
+      const responseText =
+        typeof err?.response?.data === 'string'
+          ? err.response.data
+          : JSON.stringify(err?.response?.data ?? err?.errors ?? err?.message ?? {})
+      logger.error(
+        {
+          err,
+          googleStatus: err?.code ?? err?.response?.status,
+          googleBody: err?.response?.data ?? err?.errors,
+          responseText,
+        },
+        'Google Drive upload session creation failed'
+      )
+      throw new Error(
+        `Google Drive upload session creation failed (${err?.code ?? err?.response?.status ?? 'unknown'}): ${responseText}`
+      )
     }
 
-    const uploadUrl = session.headers.get('Location')
-    if (!uploadUrl) throw new Error('Google Drive upload session is missing the upload URL.')
-
-    // Calculate the exact byte range expected by Google Drive
-    const contentRange = fileSize > 0 ? `bytes 0-${fileSize - 1}/${fileSize}` : 'bytes */0'
-
-    const finalResponse = await fetch(uploadUrl, {
-      method: 'PUT',
-      duplex: 'half',
-      headers: {
-        'Content-Type': safeMime,
-        'Content-Length': String(fileSize),
-        'Content-Range': contentRange, 
-      },
-      body: createReadStream(tempPath),
-    })
-
-    if (!finalResponse.ok) {
-      const text = await finalResponse.text()
-      throw new Error(`Google Drive single-request upload failed (${finalResponse.status}): ${text}`)
+    const key = res.data.id
+    if (!key) {
+      const responseText = 'Google Drive upload succeeded but no file id was returned.'
+      logger.error({ responseText }, 'Google Drive single-request upload failed')
+      throw new Error(`Google Drive single-request upload failed: ${responseText}`)
     }
-
-    const json = await finalResponse.json().catch(() => ({}))
-    const key = json.id || json.fileId
-    if (!key) throw new Error('Google Drive upload succeeded but no file id was returned.')
     return { key }
   }
 
diff --git a/backend/src/services/storage/index.js b/backend/src/services/storage/index.js
index e62ac68..1066d9f 100644
--- a/backend/src/services/storage/index.js
+++ b/backend/src/services/storage/index.js
@@ -2,6 +2,7 @@ import fs from 'node:fs/promises'
 import os from 'node:os'
 import path from 'node:path'
 import { env } from '../../config/env.js'
+import { AppError } from '../../utils/AppError.js'
 import { logger } from '../../utils/logger.js'
 import { createGoogleDriveDriver } from './googleDriveDriver.js'
 import { createLocalDriver } from './localDriver.js'
@@ -61,6 +62,19 @@ const defaultDriver = () => driverFor(env.STORAGE_DRIVER)
 const archiveDriverName = () =>
   env.ARCHIVE_STORAGE_DRIVER === 'gdrive' ? 'gdrive-archive' : env.ARCHIVE_STORAGE_DRIVER
 
+const throwStorageError = (err, action) => {
+  logger.error(
+    {
+      err,
+      action,
+      googleStatus: err?.code ?? err?.response?.status,
+      googleBody: err?.response?.data ?? err?.errors,
+    },
+    'Storage operation failed'
+  )
+  throw new AppError(502, 'STORAGE_ERROR', 'The video could not be stored. Try again later.')
+}
+
 export const storageService = {
   tempDir: localDriver.tempDir,
 
@@ -69,40 +83,52 @@ export const storageService = {
   /** Saves standard upload files to the primary storage driver. */
   async save({ tempPath, originalName = '', mimeType, ext }, { folder }) {
     const driver = defaultDriver()
-    const { key } = await driver.save({ tempPath, ext, folder, mimeType })
-    const { size } = await driver.stat(key)
-    return {
-      driver: driver.name,
-      key,
-      mimeType,
-      size,
-      originalName: originalName.slice(0, 200),
+    try {
+      const { key } = await driver.save({ tempPath, ext, folder, mimeType })
+      const { size } = await driver.stat(key)
+      return {
+        driver: driver.name,
+        key,
+        mimeType,
+        size,
+        originalName: originalName.slice(0, 200),
+      }
+    } catch (err) {
+      throwStorageError(err, 'save')
     }
   },
 
   /** Saves archive recordings to the dedicated archive storage driver. */
   async archive({ tempPath, originalName = '', mimeType, ext, folder, fileName }) {
     const driver = driverFor(archiveDriverName())
-    const { size } = await fs.stat(tempPath)
-    const { key } = await driver.save({ tempPath, ext, folder, fileName, mimeType })
-    return {
-      driver: driver.name,
-      key,
-      mimeType,
-      size,
-      originalName: originalName.slice(0, 200),
-      archivePath: `${folder}/${fileName || key}`,
+    try {
+      const { size } = await fs.stat(tempPath)
+      const { key } = await driver.save({ tempPath, ext, folder, fileName, mimeType })
+      return {
+        driver: driver.name,
+        key,
+        mimeType,
+        size,
+        originalName: originalName.slice(0, 200),
+        archivePath: `${folder}/${fileName || key}`,
+      }
+    } catch (err) {
+      throwStorageError(err, 'save')
     }
   },
 
   /** Returns readable file stream descriptor by looking up stored driver name. */
   async describe(ref) {
     const driver = driverFor(ref.driver)
-    const { size } = await driver.stat(ref.key)
-    return {
-      size,
-      mimeType: ref.mimeType,
-      createReadStream: (range) => driver.createReadStream(ref.key, range),
+    try {
+      const { size } = await driver.stat(ref.key)
+      return {
+        size,
+        mimeType: ref.mimeType,
+        createReadStream: (range) => driver.createReadStream(ref.key, range),
+      }
+    } catch (err) {
+      throwStorageError(err, 'stat')
     }
   },
 
@@ -111,8 +137,8 @@ export const storageService = {
     if (!ref) return
     try {
       await driverFor(ref.driver).remove(ref.key)
-    } catch (error) {
-      logger.error({ err: error, key: ref.key }, 'Could not delete stored file')
+    } catch (err) {
+      throwStorageError(err, 'remove')
     }
   },
 }

From 8066ee7338d74f06391758943b4364a9e140e506 Mon Sep 17 00:00:00 2001
From: muhammadali-imran <imranmuhammadali633@gmail.com>
Date: Tue, 6 Oct 2026 00:18:56 +0500
Subject: [PATCH 8/8] final

---
 .gitignore                                    |   1 +
 backend/.env.example                          |  12 +-
 backend/src/config/env.js                     |  66 ++-
 .../src/services/storage/googleDriveDriver.js |  21 +-
 backend/src/services/storage/index.js         |  27 +-
 backend/src/services/storage/localDriver.js   |  12 +-
 backend/src/services/videoService.js          |  17 +-
 backend/src/utils/files.js                    |   3 +
 backend/src/utils/sendFile.js                 |  28 +-
 backend/tests/videoStorageNames.test.js       | 408 ++++++++++++++++++
 frontend/index.html                           |   2 +-
 frontend/public/favicon.svg                   |   0
 frontend/src/components/Field.jsx             |  24 +-
 frontend/src/components/Header.jsx            |   2 +-
 frontend/src/components/ui.jsx                |   2 +-
 frontend/src/styles/components.css            |   8 +-
 frontend/src/styles/faq.css                   |   2 +-
 17 files changed, 586 insertions(+), 49 deletions(-)
 create mode 100644 backend/tests/videoStorageNames.test.js
 create mode 100644 frontend/public/favicon.svg

diff --git a/.gitignore b/.gitignore
index 72bc7dd..d68fca0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,5 +31,6 @@ react-snap-routes.json
 *.njsproj
 *.sln
 *.sw?
+*.tmp
 
 %SystemDrive%/
diff --git a/backend/.env.example b/backend/.env.example
index 0537b7b..c8eedaa 100644
--- a/backend/.env.example
+++ b/backend/.env.example
@@ -49,17 +49,21 @@ STORAGE_DRIVER=local
 ARCHIVE_STORAGE_DRIVER=local
 UPLOAD_DIR=uploads
 # Required when STORAGE_DRIVER=gdrive. Store the whole service-account JSON as one environment value.
-# GOOGLE_SERVICE_ACCOUNT_JSON={"type":"service_account",...}
+# GOOGLE_OAUTH_CLIENT_ID=<your client id>
+# GOOGLE_OAUTH_CLIENT_SECRET=<your client secret>
+# GOOGLE_OAUTH_REFRESH_TOKEN=<the refresh token>
 # GOOGLE_DRIVE_FOLDER_ID=your-shared-drive-folder-id
 
 # Optional: use a SECOND Google account/folder for archived recordings, kept separate from
 # the base-video account above (different service account and/or different Drive account).
 # When unset, ARCHIVE_STORAGE_DRIVER=gdrive falls back to the shared credentials above.
-# GOOGLE_ARCHIVE_SERVICE_ACCOUNT_JSON={"type":"service_account",...}
+# GOOGLE_ARCHIVE_OAUTH_CLIENT_ID=<your client id>
+# GOOGLE_ARCHIVE_OAUTH_CLIENT_SECRET=<your client secret>
+# GOOGLE_ARCHIVE_OAUTH_REFRESH_TOKEN=
 # GOOGLE_ARCHIVE_DRIVE_FOLDER_ID=the-second-account-folder-id
 
-MAX_VIDEO_UPLOAD_MB=300
-MAX_RECORDING_UPLOAD_MB=100
+MAX_VIDEO_UPLOAD_MB=90
+MAX_RECORDING_UPLOAD_MB=80
 
 RATE_LIMIT_ENABLED=true
 
diff --git a/backend/src/config/env.js b/backend/src/config/env.js
index 18679ad..ee3880d 100644
--- a/backend/src/config/env.js
+++ b/backend/src/config/env.js
@@ -66,11 +66,17 @@ const schema = z.object({
   ARCHIVE_STORAGE_DRIVER: z.enum(['local', 'gdrive']).default('local'),
   UPLOAD_DIR: z.string().default('uploads'),
   GOOGLE_SERVICE_ACCOUNT_JSON: z.string().optional(),
+  GOOGLE_OAUTH_CLIENT_ID: z.string().optional(),
+  GOOGLE_OAUTH_CLIENT_SECRET: z.string().optional(),
+  GOOGLE_OAUTH_REFRESH_TOKEN: z.string().optional(),
   GOOGLE_DRIVE_FOLDER_ID: z.string().optional(),
+  GOOGLE_ARCHIVE_OAUTH_CLIENT_ID: z.string().optional(),
+  GOOGLE_ARCHIVE_OAUTH_CLIENT_SECRET: z.string().optional(),
+  GOOGLE_ARCHIVE_OAUTH_REFRESH_TOKEN: z.string().optional(),
   GOOGLE_ARCHIVE_SERVICE_ACCOUNT_JSON: z.string().optional(),
   GOOGLE_ARCHIVE_DRIVE_FOLDER_ID: z.string().optional(),
-  MAX_VIDEO_UPLOAD_MB: z.coerce.number().positive().default(300),
-  MAX_RECORDING_UPLOAD_MB: z.coerce.number().positive().default(100),
+  MAX_VIDEO_UPLOAD_MB: z.coerce.number().positive().default(90),
+  MAX_RECORDING_UPLOAD_MB: z.coerce.number().positive().default(80),
 
   RATE_LIMIT_ENABLED: bool.default(true),
   SUBMISSION_COOLDOWN_MS: z.coerce.number().int().positive().default(30_000),
@@ -86,15 +92,63 @@ const schema = z.object({
       context.addIssue({ code: 'custom', path: ['WEB3FORMS_ACCESS_KEY'], message: 'Required in production to deliver contact messages.' })
     }
   }
-  const needsGoogle = data.STORAGE_DRIVER === 'gdrive' || data.ARCHIVE_STORAGE_DRIVER === 'gdrive'
-  if (needsGoogle) {
-    if (!data.GOOGLE_SERVICE_ACCOUNT_JSON) {
-      context.addIssue({ code: 'custom', path: ['GOOGLE_SERVICE_ACCOUNT_JSON'], message: 'Required when STORAGE_DRIVER=gdrive.' })
+  const hasOauth = (clientId, clientSecret, refreshToken) =>
+    Boolean(clientId && clientSecret && refreshToken)
+  const baseOauth = hasOauth(
+    data.GOOGLE_OAUTH_CLIENT_ID,
+    data.GOOGLE_OAUTH_CLIENT_SECRET,
+    data.GOOGLE_OAUTH_REFRESH_TOKEN
+  )
+  const archiveOauth = hasOauth(
+    data.GOOGLE_ARCHIVE_OAUTH_CLIENT_ID,
+    data.GOOGLE_ARCHIVE_OAUTH_CLIENT_SECRET,
+    data.GOOGLE_ARCHIVE_OAUTH_REFRESH_TOKEN
+  )
+  const hasAny = (...values) => values.some(Boolean)
+
+  for (const [prefix, values] of [
+    ['GOOGLE_OAUTH', [
+      data.GOOGLE_OAUTH_CLIENT_ID,
+      data.GOOGLE_OAUTH_CLIENT_SECRET,
+      data.GOOGLE_OAUTH_REFRESH_TOKEN,
+    ]],
+    ['GOOGLE_ARCHIVE_OAUTH', [
+      data.GOOGLE_ARCHIVE_OAUTH_CLIENT_ID,
+      data.GOOGLE_ARCHIVE_OAUTH_CLIENT_SECRET,
+      data.GOOGLE_ARCHIVE_OAUTH_REFRESH_TOKEN,
+    ]],
+  ]) {
+    if (hasAny(...values) && !values.every(Boolean)) {
+      context.addIssue({
+        code: 'custom',
+        path: [`${prefix}_CLIENT_ID`],
+        message: 'Set all three OAuth client ID, client secret, and refresh token variables together.',
+      })
+    }
+  }
+
+  if (data.STORAGE_DRIVER === 'gdrive') {
+    if (!baseOauth && !data.GOOGLE_SERVICE_ACCOUNT_JSON) {
+      context.addIssue({ code: 'custom', path: ['GOOGLE_OAUTH_REFRESH_TOKEN'], message: 'Set the Google OAuth variables or a service-account JSON.' })
     }
     if (!data.GOOGLE_DRIVE_FOLDER_ID) {
       context.addIssue({ code: 'custom', path: ['GOOGLE_DRIVE_FOLDER_ID'], message: 'Required when STORAGE_DRIVER=gdrive.' })
     }
   }
+
+  if (data.ARCHIVE_STORAGE_DRIVER === 'gdrive') {
+    const archiveHasCredentials =
+      archiveOauth ||
+      data.GOOGLE_ARCHIVE_SERVICE_ACCOUNT_JSON ||
+      baseOauth ||
+      data.GOOGLE_SERVICE_ACCOUNT_JSON
+    if (!archiveHasCredentials) {
+      context.addIssue({ code: 'custom', path: ['GOOGLE_ARCHIVE_OAUTH_REFRESH_TOKEN'], message: 'Set the archive Google OAuth variables, shared Google credentials, or an archive service-account JSON.' })
+    }
+    if (!data.GOOGLE_ARCHIVE_DRIVE_FOLDER_ID && !data.GOOGLE_DRIVE_FOLDER_ID) {
+      context.addIssue({ code: 'custom', path: ['GOOGLE_ARCHIVE_DRIVE_FOLDER_ID'], message: 'Required when ARCHIVE_STORAGE_DRIVER=gdrive and no shared Drive folder is configured.' })
+    }
+  }
 })
 
 const parsed = schema.safeParse(testSafeEnv)
diff --git a/backend/src/services/storage/googleDriveDriver.js b/backend/src/services/storage/googleDriveDriver.js
index 2bdc170..8bcccd4 100644
--- a/backend/src/services/storage/googleDriveDriver.js
+++ b/backend/src/services/storage/googleDriveDriver.js
@@ -45,17 +45,18 @@ function parseCredentials(raw) {
   return credentials
 }
 
-export function createGoogleDriveDriver({ serviceAccountJson, rootFolderId, driverName = 'gdrive' }) {
-  const credentials = parseCredentials(serviceAccountJson)
-  
-  if (!credentials) {
-    throw new Error(`[${driverName}] Missing valid service account credentials.`)
+export function createGoogleDriveDriver({ serviceAccountJson, oauth, rootFolderId, driverName = 'gdrive' }) {
+  if (!rootFolderId) throw new Error(`[${driverName}] Missing rootFolderId.`)
+
+  let auth
+  if (oauth?.clientId && oauth?.clientSecret && oauth?.refreshToken) {
+    auth = new google.auth.OAuth2(oauth.clientId, oauth.clientSecret)
+    auth.setCredentials({ refresh_token: oauth.refreshToken })
+  } else {
+    const credentials = parseCredentials(serviceAccountJson)
+    if (!credentials) throw new Error(`[${driverName}] Missing Google credentials.`)
+    auth = new google.auth.GoogleAuth({ credentials, scopes: [DRIVE_SCOPE] })
   }
-  if (!rootFolderId) {
-    throw new Error(`[${driverName}] Missing rootFolderId.`)
-  }
-
-  const auth = new google.auth.GoogleAuth({ credentials, scopes: [DRIVE_SCOPE] })
   const drive = google.drive({ version: 'v3', auth })
   const folderIds = new Map()
 
diff --git a/backend/src/services/storage/index.js b/backend/src/services/storage/index.js
index 1066d9f..c7b04f8 100644
--- a/backend/src/services/storage/index.js
+++ b/backend/src/services/storage/index.js
@@ -15,9 +15,24 @@ const localDriver = createLocalDriver(
  * Builds a Google Drive driver instance with a explicit instance name
  * so that primary ('gdrive') and archive ('gdrive-archive') drivers can coexist seamlessly.
  */
-const buildGdrive = (driverName, { serviceAccountJson, rootFolderId }) =>
+const baseOauth = {
+  clientId: env.GOOGLE_OAUTH_CLIENT_ID,
+  clientSecret: env.GOOGLE_OAUTH_CLIENT_SECRET,
+  refreshToken: env.GOOGLE_OAUTH_REFRESH_TOKEN,
+}
+
+const archiveOauth = {
+  clientId: env.GOOGLE_ARCHIVE_OAUTH_CLIENT_ID,
+  clientSecret: env.GOOGLE_ARCHIVE_OAUTH_CLIENT_SECRET,
+  refreshToken: env.GOOGLE_ARCHIVE_OAUTH_REFRESH_TOKEN,
+}
+
+const hasArchiveOauth = Object.values(archiveOauth).every(Boolean)
+
+const buildGdrive = (driverName, { serviceAccountJson, oauth, rootFolderId }) =>
   createGoogleDriveDriver({
     serviceAccountJson,
+    oauth,
     rootFolderId,
     driverName,
   })
@@ -27,6 +42,7 @@ const baseGdrive =
   env.STORAGE_DRIVER === 'gdrive'
     ? buildGdrive('gdrive', {
         serviceAccountJson: env.GOOGLE_SERVICE_ACCOUNT_JSON,
+        oauth: baseOauth,
         rootFolderId: env.GOOGLE_DRIVE_FOLDER_ID,
       })
     : null
@@ -38,6 +54,11 @@ const archiveGdrive =
     ? buildGdrive('gdrive-archive', {
         serviceAccountJson:
           env.GOOGLE_ARCHIVE_SERVICE_ACCOUNT_JSON || env.GOOGLE_SERVICE_ACCOUNT_JSON,
+        oauth: hasArchiveOauth
+          ? archiveOauth
+          : env.GOOGLE_ARCHIVE_SERVICE_ACCOUNT_JSON
+            ? null
+            : baseOauth,
         rootFolderId:
           env.GOOGLE_ARCHIVE_DRIVE_FOLDER_ID || env.GOOGLE_DRIVE_FOLDER_ID,
       })
@@ -81,10 +102,10 @@ export const storageService = {
   init: () => Promise.all(Object.values(drivers).map((driver) => driver.init?.())),
 
   /** Saves standard upload files to the primary storage driver. */
-  async save({ tempPath, originalName = '', mimeType, ext }, { folder }) {
+  async save({ tempPath, originalName = '', mimeType, ext }, { folder, fileName }) {
     const driver = defaultDriver()
     try {
-      const { key } = await driver.save({ tempPath, ext, folder, mimeType })
+      const { key } = await driver.save({ tempPath, ext, folder, fileName, mimeType })
       const { size } = await driver.stat(key)
       return {
         driver: driver.name,
diff --git a/backend/src/services/storage/localDriver.js b/backend/src/services/storage/localDriver.js
index 8a4f29b..869431e 100644
--- a/backend/src/services/storage/localDriver.js
+++ b/backend/src/services/storage/localDriver.js
@@ -7,7 +7,7 @@ import { randomUUID } from 'node:crypto'
  * STORAGE DRIVER CONTRACT
  * Any driver (local disk now, Google Drive later) implements these four methods and nothing else:
  *
- *   save({ tempPath, ext, folder }) -> Promise<{ key }>      move/upload a finished temp file, return an opaque key
+ *   save({ tempPath, ext, folder, fileName }) -> Promise<{ key }>  move/upload a finished temp file, return an opaque key
  *   stat(key)                       -> Promise<{ size }>     throws if the file is gone
  *   createReadStream(key, { start, end }) -> Readable        inclusive byte range, for HTTP Range requests
  *   remove(key)                     -> Promise<void>         idempotent
@@ -35,7 +35,15 @@ export function createLocalDriver(rootDir) {
     },
 
     async save({ tempPath, ext = '', folder, fileName }) {
-      const key = `${folder}/${fileName || `${randomUUID()}${ext}`}`
+      let key = `${folder}/${fileName || `${randomUUID()}${ext}`}`
+      if (fileName) {
+        const dot = fileName.lastIndexOf('.')
+        const stem = dot > 0 ? fileName.slice(0, dot) : fileName
+        const suffix = dot > 0 ? fileName.slice(dot) : ''
+        for (let n = 2; await fs.stat(resolveKey(key)).then(() => true, () => false); n += 1) {
+          key = `${folder}/${stem} (${n})${suffix}`
+        }
+      }
       const destination = resolveKey(key)
       await fs.mkdir(path.dirname(destination), { recursive: true })
       try {
diff --git a/backend/src/services/videoService.js b/backend/src/services/videoService.js
index ec0ce49..59aca85 100644
--- a/backend/src/services/videoService.js
+++ b/backend/src/services/videoService.js
@@ -2,7 +2,7 @@ import { POSTER_MAX_BYTES, ROLES, VIDEO_STATUS } from '../config/constants.js'
 import { categoryRepo } from '../repositories/categoryRepo.js'
 import { videoRepo } from '../repositories/videoRepo.js'
 import { notFound, validationError } from '../utils/AppError.js'
-import { sniffImage, sniffVideo } from '../utils/files.js'
+import { safeName, sniffImage, sniffVideo } from '../utils/files.js'
 import { logger } from '../utils/logger.js'
 import { storageService } from './storage/index.js'
 
@@ -47,15 +47,24 @@ export const videoService = {
       posterKind = await sniffImage(posterUpload.path)
       if (!posterKind) throw validationError({ poster: 'The poster must be a JPEG, PNG or WebP image.' })
     }
-    await assertCategoryExists(input.categoryId)
+    const category = input.categoryId ? await categoryRepo.findById(input.categoryId) : null
+    if (input.categoryId && !category) throw validationError({ categoryId: 'That category does not exist.' })
+    const folder = `videos/${safeName(category?.label, 'Unassigned')}`
+    const base = safeName(input.title)
 
     const stored = []
     try {
-      const videoFile = await storageService.save({ tempPath: upload.path, originalName: upload.originalname, mimeType: videoKind.mimeType, ext: videoKind.ext }, { folder: 'videos' })
+      const videoFile = await storageService.save(
+        { tempPath: upload.path, originalName: upload.originalname, mimeType: videoKind.mimeType, ext: videoKind.ext },
+        { folder, fileName: `${base}${videoKind.ext}` },
+      )
       stored.push(videoFile)
       let posterFile = null
       if (posterUpload) {
-        posterFile = await storageService.save({ tempPath: posterUpload.path, originalName: posterUpload.originalname, mimeType: posterKind.mimeType, ext: posterKind.ext }, { folder: 'posters' })
+        posterFile = await storageService.save(
+          { tempPath: posterUpload.path, originalName: posterUpload.originalname, mimeType: posterKind.mimeType, ext: posterKind.ext },
+          { folder, fileName: `${base} (poster)${posterKind.ext}` },
+        )
         stored.push(posterFile)
       }
       const order = input.categoryId ? (await videoRepo.maxOrder(input.categoryId)) + 1 : 1
diff --git a/backend/src/utils/files.js b/backend/src/utils/files.js
index ae5e6d1..6ca12e6 100644
--- a/backend/src/utils/files.js
+++ b/backend/src/utils/files.js
@@ -3,6 +3,9 @@ import fs from 'node:fs/promises'
 /** Best-effort delete; a missing file is fine. */
 export const removeQuietly = async (path) => { if (path) await fs.unlink(path).catch(() => {}) }
 
+export const safeName = (value, fallback = 'Untitled') =>
+  String(value ?? '').replace(/[\\\/:*?"<>|]+/g, ' ').replace(/\s+/g, ' ').trim().slice(0, 100) || fallback
+
 async function readHead(path, length = 16) {
   const handle = await fs.open(path, 'r')
   try {
diff --git a/backend/src/utils/sendFile.js b/backend/src/utils/sendFile.js
index 43f625e..b1f4038 100644
--- a/backend/src/utils/sendFile.js
+++ b/backend/src/utils/sendFile.js
@@ -2,34 +2,38 @@
  * Streams a stored file with HTTP Range support, which browsers need for seeking inside <video>.
  * `file` is a descriptor from the storage layer: { size, mimeType, createReadStream({ start, end }) }.
  */
-export function sendFile(req, res, file, { cache = 'private, max-age=3600' } = {}) {
+export async function sendFile(req, res, file, { cache = 'private, max-age=3600' } = {}) {
   const { size, mimeType } = file
-  res.setHeader('Accept-Ranges', 'bytes')
-  res.setHeader('Content-Type', mimeType)
-  res.setHeader('Cache-Control', cache)
-  res.setHeader('X-Content-Type-Options', 'nosniff')
-
   let start = 0
   let end = size - 1
+  let partial = false
+
   const header = req.headers.range
   if (header) {
     const match = /^bytes=(\d*)-(\d*)$/.exec(header)
     if (!match || (match[1] === '' && match[2] === '')) return rangeNotSatisfiable(res, size)
-    if (match[1] === '') { // "last N bytes"
+    if (match[1] === '') {
       start = Math.max(size - Number(match[2]), 0)
     } else {
       start = Number(match[1])
       if (match[2] !== '') end = Math.min(Number(match[2]), size - 1)
     }
     if (start > end || start >= size) return rangeNotSatisfiable(res, size)
-    res.status(206)
-    res.setHeader('Content-Range', `bytes ${start}-${end}/${size}`)
+    partial = true
   }
 
-  res.setHeader('Content-Length', end - start + 1)
-  if (req.method === 'HEAD' || size === 0) return res.end()
+  // Open the stream BEFORE touching headers, so a storage failure produces a clean error response.
+  const stream = size === 0 || req.method === 'HEAD' ? null : await file.createReadStream({ start, end })
+
+  res.status(partial ? 206 : 200)
+  res.setHeader('Accept-Ranges', 'bytes')
+  res.setHeader('Content-Type', mimeType)
+  res.setHeader('Cache-Control', cache)
+  res.setHeader('X-Content-Type-Options', 'nosniff')
+  if (partial) res.setHeader('Content-Range', `bytes ${start}-${end}/${size}`)
+  res.setHeader('Content-Length', size === 0 ? 0 : end - start + 1)
+  if (!stream) return res.end()
 
-  const stream = file.createReadStream({ start, end })
   stream.on('error', () => res.destroy())
   res.on('close', () => stream.destroy())
   stream.pipe(res)
diff --git a/backend/tests/videoStorageNames.test.js b/backend/tests/videoStorageNames.test.js
new file mode 100644
index 0000000..b81e22d
--- /dev/null
+++ b/backend/tests/videoStorageNames.test.js
@@ -0,0 +1,408 @@
+import assert from 'node:assert/strict'
+import fs from 'node:fs/promises'
+import os from 'node:os'
+import path from 'node:path'
+import test from 'node:test'
+import { createLocalDriver } from '../src/services/storage/localDriver.js'
+import { safeName } from '../src/utils/files.js'
+
+process.env.NODE_ENV = 'test'
+process.env.STORAGE_DRIVER = 'local'
+process.env.ARCHIVE_STORAGE_DRIVER = 'local'
+process.env.UPLOAD_DIR = path.join(os.tmpdir(), `signpak-storage-test-${process.pid}`)
+process.env.MONGODB_URI = 'mongodb://127.0.0.1/signpak-test'
+process.env.JWT_SECRET = 'test-secret-that-is-longer-than-thirty-two-characters'
+process.env.ADMIN_EMAIL = 'admin@example.com'
+process.env.ADMIN_PASSWORD = 'test-password-123'
+
+const [{ videoService }, { categoryRepo }, { videoRepo }, { storageService }] = await Promise.all([
+  import('../src/services/videoService.js'),
+  import('../src/repositories/categoryRepo.js'),
+  import('../src/repositories/videoRepo.js'),
+  import('../src/services/storage/index.js'),
+])
+
+async function temporaryDirectory(t) {
+  const directory = await fs.mkdtemp(path.join(os.tmpdir(), 'signpak-test-'))
+  t.after(() => fs.rm(directory, { recursive: true, force: true }))
+  return directory
+}
+
+function replace(t, object, property, value) {
+  const original = object[property]
+  object[property] = value
+  t.after(() => { object[property] = original })
+}
+
+async function writeVideo(directory, name = 'upload.mp4', type = 'mp4') {
+  const filePath = path.join(directory, name)
+  const brand = type === 'mov' ? 'qt  ' : 'isom'
+  const header = type === 'webm'
+    ? Buffer.from([0x1a, 0x45, 0xdf, 0xa3])
+    : Buffer.concat([Buffer.from([0, 0, 0, 0]), Buffer.from('ftyp'), Buffer.from(brand)])
+  await fs.writeFile(filePath, header)
+  return { path: filePath, originalname: name, size: header.length }
+}
+
+async function writeImage(directory, name, type = 'jpeg') {
+  const filePath = path.join(directory, name)
+  const image = {
+    jpeg: Buffer.from([0xff, 0xd8, 0xff, 0]),
+    png: Buffer.from([0x89, 0x50, 0x4e, 0x47, 0, 0, 0, 0]),
+    webp: Buffer.from('RIFF0000WEBP'),
+  }[type]
+  await fs.writeFile(filePath, image)
+  return { path: filePath, originalname: name, size: image.length }
+}
+
+test('safeName uses its fallback for nullish and blank values', () => {
+  assert.equal(safeName(null), 'Untitled')
+  assert.equal(safeName(undefined), 'Untitled')
+  assert.equal(safeName(' \t\n '), 'Untitled')
+  assert.equal(safeName('\\/:*?"<>|'), 'Untitled')
+  assert.equal(safeName('', 'Unnamed category'), 'Unnamed category')
+})
+
+test('safeName replaces reserved path characters and collapses whitespace', () => {
+  assert.equal(safeName('  Summer\\Travel: Sea / Sky*? "<>|  '), 'Summer Travel Sea Sky')
+  assert.equal(safeName(0), '0')
+  assert.equal(safeName(false), 'false')
+})
+
+test('safeName caps its output at 100 characters', () => {
+  assert.equal(safeName('x'.repeat(120)), 'x'.repeat(100))
+})
+
+test('local driver stores named files in folders and appends suffixes on collisions', async (t) => {
+  const directory = await temporaryDirectory(t)
+  const root = path.join(directory, 'storage')
+  const driver = createLocalDriver(root)
+  await driver.init()
+
+  const keys = []
+  for (let index = 0; index < 3; index += 1) {
+    const tempPath = path.join(directory, `video-${index}.tmp`)
+    await fs.writeFile(tempPath, `video ${index}`)
+    const { key } = await driver.save({
+      tempPath,
+      folder: 'videos/Travel',
+      fileName: 'My video.mp4',
+      ext: '.mp4',
+    })
+    keys.push(key)
+  }
+
+  assert.deepEqual(keys, [
+    'videos/Travel/My video.mp4',
+    'videos/Travel/My video (2).mp4',
+    'videos/Travel/My video (3).mp4',
+  ])
+  assert.deepEqual(await Promise.all(keys.map(async (key) => {
+    const filePath = path.join(root, ...key.split('/'))
+    return fs.readFile(filePath, 'utf8')
+  })), ['video 0', 'video 1', 'video 2'])
+})
+
+test('local driver handles named files without an extension and dotfiles', async (t) => {
+  const directory = await temporaryDirectory(t)
+  const driver = createLocalDriver(path.join(directory, 'storage'))
+  await driver.init()
+
+  const save = async (fileName, suffix) => {
+    const tempPath = path.join(directory, `${suffix}.tmp`)
+    await fs.writeFile(tempPath, suffix)
+    return (await driver.save({ tempPath, folder: 'videos', fileName })).key
+  }
+
+  assert.equal(await save('Untitled', 'first'), 'videos/Untitled')
+  assert.equal(await save('Untitled', 'second'), 'videos/Untitled (2)')
+  assert.equal(await save('.hidden', 'hidden-first'), 'videos/.hidden')
+  assert.equal(await save('.hidden', 'hidden-second'), 'videos/.hidden (2)')
+})
+
+test('local driver generates unique UUID keys when no file name is supplied', async (t) => {
+  const directory = await temporaryDirectory(t)
+  const driver = createLocalDriver(path.join(directory, 'storage'))
+  await driver.init()
+  const keys = []
+
+  for (const suffix of ['a', 'b']) {
+    const tempPath = path.join(directory, `${suffix}.tmp`)
+    await fs.writeFile(tempPath, suffix)
+    keys.push((await driver.save({ tempPath, folder: 'videos', ext: '.webm' })).key)
+  }
+
+  assert.notEqual(keys[0], keys[1])
+  for (const key of keys) assert.match(key, /^videos\/[0-9a-f-]{36}\.webm$/i)
+})
+
+test('local driver rejects paths escaping the storage root and keeps the source file', async (t) => {
+  const directory = await temporaryDirectory(t)
+  const root = path.join(directory, 'storage')
+  const driver = createLocalDriver(root)
+  await driver.init()
+  const tempPath = path.join(directory, 'upload.tmp')
+  await fs.writeFile(tempPath, 'content')
+
+  await assert.rejects(
+    driver.save({ tempPath, folder: 'videos', fileName: '../outside.mp4' }),
+    /Invalid storage key/,
+  )
+  await assert.rejects(
+    driver.save({ tempPath, folder: '../outside', fileName: 'video.mp4' }),
+    /Invalid storage key/,
+  )
+  assert.equal(await fs.readFile(tempPath, 'utf8'), 'content')
+})
+
+test('local driver stat reports missing files and remove is idempotent', async (t) => {
+  const directory = await temporaryDirectory(t)
+  const driver = createLocalDriver(path.join(directory, 'storage'))
+  await driver.init()
+
+  await assert.rejects(driver.stat('missing.mp4'), { code: 'ENOENT' })
+  await driver.remove('missing.mp4')
+})
+
+test('storageService forwards named folder and file name to the local driver', async (t) => {
+  const directory = await temporaryDirectory(t)
+  const tempPath = path.join(directory, 'upload.tmp')
+  await fs.writeFile(tempPath, 'named upload')
+  t.after(() => fs.rm(process.env.UPLOAD_DIR, { recursive: true, force: true }))
+  await storageService.init()
+
+  const stored = await storageService.save(
+    { tempPath, originalName: 'browser-name.mp4', mimeType: 'video/mp4', ext: '.mp4' },
+    { folder: 'videos/Travel', fileName: 'Named video.mp4' },
+  )
+
+  assert.equal(stored.key, 'videos/Travel/Named video.mp4')
+  assert.equal(stored.originalName, 'browser-name.mp4')
+  assert.equal(stored.size, 'named upload'.length)
+  await storageService.remove(stored)
+})
+
+test('video create names video and poster from title and category safely', async (t) => {
+  const directory = await temporaryDirectory(t)
+  const upload = await writeVideo(directory)
+  const posterUpload = await writeImage(directory, 'poster.jpeg')
+  const saves = []
+  const categoryId = 'category-1'
+  const category = { _id: categoryId, label: '  Travel / Outdoors  ' }
+
+  replace(t, categoryRepo, 'findById', async () => category)
+  replace(t, videoRepo, 'maxOrder', async () => 4)
+  replace(t, videoRepo, 'create', async (data) => data)
+  replace(t, storageService, 'save', async (file, options) => {
+    const ref = { driver: 'local', key: `stored-${saves.length}`, ...file, ...options }
+    saves.push({ file, options, ref })
+    return ref
+  })
+
+  const result = await videoService.create(
+    { _id: 'admin-1' },
+    { title: '  A: Trip / Under the Stars? ', categoryId, status: 'published', durationSec: 30 },
+    { video: [upload], poster: [posterUpload] },
+  )
+
+  assert.deepEqual(saves.map(({ options }) => options), [
+    { folder: 'videos/Travel Outdoors', fileName: 'A Trip Under the Stars.mp4' },
+    { folder: 'videos/Travel Outdoors', fileName: 'A Trip Under the Stars (poster).jpg' },
+  ])
+  assert.equal(result.order, 5)
+  assert.equal(result.videoFile, saves[0].ref)
+  assert.equal(result.posterFile, saves[1].ref)
+})
+
+test('video create uses Unassigned and Untitled fallbacks when optional labels are absent', async (t) => {
+  const directory = await temporaryDirectory(t)
+  const upload = await writeVideo(directory)
+  const saves = []
+
+  replace(t, categoryRepo, 'findById', async () => null)
+  replace(t, videoRepo, 'create', async (data) => data)
+  replace(t, storageService, 'save', async (_file, options) => {
+    saves.push(options)
+    return { key: 'stored-video' }
+  })
+
+  const result = await videoService.create(
+    { _id: 'admin-1' },
+    { title: '   ', status: 'draft', durationSec: 0 },
+    { video: [upload] },
+  )
+
+  assert.deepEqual(saves, [{ folder: 'videos/Unassigned', fileName: 'Untitled.mp4' }])
+  assert.equal(result.order, 1)
+  assert.equal(result.posterFile, null)
+})
+
+test('video create selects detected video and image extensions', async (t) => {
+  const directory = await temporaryDirectory(t)
+  const cases = [
+    { videoType: 'webm', videoExt: '.webm', imageType: 'png', imageExt: '.png' },
+    { videoType: 'mov', videoExt: '.mov', imageType: 'webp', imageExt: '.webp' },
+  ]
+
+  replace(t, categoryRepo, 'findById', async () => null)
+  replace(t, videoRepo, 'create', async (data) => data)
+  let currentSaves
+  replace(t, storageService, 'save', async (_file, options) => {
+    currentSaves.push(options.fileName)
+    return { key: `${currentSaves.length}` }
+  })
+
+  for (const [index, item] of cases.entries()) {
+    const upload = await writeVideo(directory, `video-${index}.bin`, item.videoType)
+    const poster = await writeImage(directory, `poster-${index}.bin`, item.imageType)
+    const saves = []
+    currentSaves = saves
+
+    const result = await videoService.create(
+      { _id: 'admin-1' },
+      { title: `Format ${index}`, status: 'draft', durationSec: 1 },
+      { video: [upload], poster: [poster] },
+    )
+
+    assert.deepEqual(saves, [`Format ${index}${item.videoExt}`, `Format ${index} (poster)${item.imageExt}`])
+    assert.equal(result.posterFile.key, '2')
+  }
+})
+
+test('video create rejects a missing upload, unsupported content, and invalid categories before storage', async (t) => {
+  const directory = await temporaryDirectory(t)
+  const unsupported = path.join(directory, 'not-a-video')
+  await fs.writeFile(unsupported, 'not a video')
+  let saveCount = 0
+
+  replace(t, storageService, 'save', async () => { saveCount += 1 })
+  replace(t, categoryRepo, 'findById', async () => null)
+
+  await assert.rejects(
+    videoService.create({}, {}, {}),
+    (error) => error.code === 'VALIDATION_ERROR' && error.fields.video === 'Choose a video to upload.',
+  )
+  await assert.rejects(
+    videoService.create({}, {}, { video: [{ path: unsupported }] }),
+    (error) => error.code === 'VALIDATION_ERROR' && error.fields.video.includes('does not look like'),
+  )
+  await assert.rejects(
+    videoService.create(
+      {},
+      { title: 'Video', categoryId: 'missing' },
+      { video: [await writeVideo(directory)] },
+    ),
+    (error) => error.code === 'VALIDATION_ERROR' && error.fields.categoryId === 'That category does not exist.',
+  )
+  assert.equal(saveCount, 0)
+})
+
+test('video create rejects oversized or unsupported posters before storage', async (t) => {
+  const directory = await temporaryDirectory(t)
+  let saveCount = 0
+  replace(t, storageService, 'save', async () => { saveCount += 1 })
+  replace(t, categoryRepo, 'findById', async () => null)
+
+  const video = await writeVideo(directory)
+  const image = await writeImage(directory, 'poster.png', 'png')
+  await assert.rejects(
+    videoService.create({}, {}, { video: [video], poster: [{ ...image, size: 2 * 1024 * 1024 + 1 }] }),
+    (error) => error.code === 'VALIDATION_ERROR' && error.fields.poster.includes('under 2 MB'),
+  )
+
+  const invalidPosterPath = path.join(directory, 'invalid-poster')
+  await fs.writeFile(invalidPosterPath, 'not an image')
+  await assert.rejects(
+    videoService.create(
+      {},
+      {},
+      { video: [video], poster: [{ path: invalidPosterPath, size: 8 }] },
+    ),
+    (error) => error.code === 'VALIDATION_ERROR' && error.fields.poster.includes('must be a JPEG'),
+  )
+  assert.equal(saveCount, 0)
+})
+
+test('video create accepts a poster exactly at the size limit', async (t) => {
+  const directory = await temporaryDirectory(t)
+  const video = await writeVideo(directory)
+  const poster = await writeImage(directory, 'poster.jpeg')
+  poster.size = 2 * 1024 * 1024
+
+  replace(t, categoryRepo, 'findById', async () => null)
+  replace(t, videoRepo, 'create', async (data) => data)
+  replace(t, storageService, 'save', async (_file, options) => ({ key: options.fileName }))
+
+  const result = await videoService.create(
+    { _id: 'admin-1' },
+    { title: 'At limit', status: 'draft', durationSec: 1 },
+    { video: [video], poster: [poster] },
+  )
+
+  assert.equal(result.posterFile.key, 'At limit (poster).jpg')
+})
+
+test('video create surfaces filesystem errors instead of reporting invalid video content', async (t) => {
+  let saveCount = 0
+  replace(t, storageService, 'save', async () => { saveCount += 1 })
+  const missingPath = path.join(os.tmpdir(), `missing-${Date.now()}.mp4`)
+
+  await assert.rejects(
+    videoService.create({}, {}, { video: [{ path: missingPath }] }),
+    { code: 'ENOENT' },
+  )
+  assert.equal(saveCount, 0)
+})
+
+test('video create removes already stored files when poster storage fails', async (t) => {
+  const directory = await temporaryDirectory(t)
+  const video = await writeVideo(directory)
+  const poster = await writeImage(directory, 'poster.jpeg')
+  const storedVideo = { driver: 'local', key: 'video-key' }
+  const removed = []
+  let saveCount = 0
+  const failure = new Error('poster upload failed')
+
+  replace(t, categoryRepo, 'findById', async () => null)
+  replace(t, storageService, 'save', async () => {
+    saveCount += 1
+    if (saveCount === 2) throw failure
+    return storedVideo
+  })
+  replace(t, storageService, 'remove', async (ref) => { removed.push(ref) })
+
+  await assert.rejects(
+    videoService.create(
+      { _id: 'admin-1' },
+      { title: 'Video', status: 'draft', durationSec: 1 },
+      { video: [video], poster: [poster] },
+    ),
+    (error) => error === failure,
+  )
+  assert.deepEqual(removed, [storedVideo])
+})
+
+test('video create removes video and poster if the database write fails', async (t) => {
+  const directory = await temporaryDirectory(t)
+  const video = await writeVideo(directory)
+  const poster = await writeImage(directory, 'poster.jpeg')
+  const stored = [{ key: 'video-key' }, { key: 'poster-key' }]
+  const removed = []
+  let saveCount = 0
+  const failure = new Error('database write failed')
+
+  replace(t, categoryRepo, 'findById', async () => null)
+  replace(t, storageService, 'save', async () => stored[saveCount++])
+  replace(t, storageService, 'remove', async (ref) => { removed.push(ref) })
+  replace(t, videoRepo, 'create', async () => { throw failure })
+
+  await assert.rejects(
+    videoService.create(
+      { _id: 'admin-1' },
+      { title: 'Video', status: 'draft', durationSec: 1 },
+      { video: [video], poster: [poster] },
+    ),
+    (error) => error === failure,
+  )
+  assert.deepEqual(removed, stored)
+})
diff --git a/frontend/index.html b/frontend/index.html
index 3f96d0e..d966056 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/public/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="color-scheme" content="light dark" />
     <meta name="theme-color" content="#f3faf6" />
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/components/Field.jsx b/frontend/src/components/Field.jsx
index a4eaef2..78bca57 100644
--- a/frontend/src/components/Field.jsx
+++ b/frontend/src/components/Field.jsx
@@ -1,14 +1,32 @@
-import { useId } from 'react'
+import { useId, useState } from 'react'
 
 /** Label + control + inline error. `as` can be "input" (default), "textarea" or "select". */
-export default function Field({ label, error, hint, id, as: Control = 'input', children, className = '', ...props }) {
+export default function Field({ label, error, hint, id, type, as: Control = 'input', children, className = '', ...props }) {
   const autoId = useId()
   const fieldId = id || autoId
   const errorId = `${fieldId}-error`
   const hintId = `${fieldId}-hint`
+  const [passwordVisible, setPasswordVisible] = useState(false)
+  const isPassword = Control === 'input' && type === 'password'
   return <div className={`field ${className}`}>
     <label htmlFor={fieldId} className="field-label">{label}</label>
-    <Control id={fieldId} className={`field-control field-${Control}`} aria-invalid={error ? true : undefined} aria-describedby={error ? errorId : hint ? hintId : undefined} {...props}>{children}</Control>
+    {isPassword
+      ? <div className="field-password-wrap">
+        <Control id={fieldId} type={passwordVisible ? 'text' : 'password'} className={`field-control field-${Control} field-password-input`} aria-invalid={error ? true : undefined} aria-describedby={error ? errorId : hint ? hintId : undefined} {...props}>{children}</Control>
+        <button
+          type="button"
+          className="password-visibility-toggle"
+          aria-label={passwordVisible ? 'Hide password' : 'Show password'}
+          aria-controls={fieldId}
+          aria-pressed={passwordVisible}
+          onClick={() => setPasswordVisible((visible) => !visible)}
+        >
+          {passwordVisible
+            ? <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 3l18 18" /><path d="M10.6 10.7a2 2 0 002.7 2.7" /><path d="M9.9 5.2A10.8 10.8 0 0112 5c5 0 8.5 4.5 9.5 7a11.5 11.5 0 01-3.1 4.2M6.2 6.2A12 12 0 002.5 12c1 2.5 4.5 7 9.5 7 1.4 0 2.7-.4 3.8-1" /></svg>
+            : <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M2.5 12s3.5-7 9.5-7 9.5 7 9.5 7-3.5 7-9.5 7-9.5-7-9.5-7z" /><circle cx="12" cy="12" r="2.5" /></svg>}
+        </button>
+      </div>
+      : <Control id={fieldId} type={type} className={`field-control field-${Control}`} aria-invalid={error ? true : undefined} aria-describedby={error ? errorId : hint ? hintId : undefined} {...props}>{children}</Control>}
     {error ? <p id={errorId} className="field-error">{error}</p> : hint ? <p id={hintId} className="field-hint">{hint}</p> : null}
   </div>
 }
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index d485cb2..9b1279a 100644
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -25,7 +25,7 @@ export default function Header() {
         <ThemeToggle />
         {user && <NotificationBell />}
         {user
-          ? <><Link to={paths.profile} className="chip-link"><Avatar user={user} size="sm" /></Link></>
+          ? <Link to={paths.profile} className="header-avatar-link" aria-label="Your profile" title="Your profile"><Avatar user={user} size="sm" /></Link>
           : <><ButtonLink variant="ghost" to={paths.login} className="hide-on-mobile">Log in</ButtonLink><ButtonLink to={paths.signup}>Get started <Arrow /></ButtonLink></>}
         <button type="button" className="menu-toggle" aria-expanded={open} aria-controls="mobile-nav" aria-label={open ? 'Close menu' : 'Open menu'} onClick={() => setOpen(!open)}>{open ? '✕' : '☰'}</button>
       </div>
diff --git a/frontend/src/components/ui.jsx b/frontend/src/components/ui.jsx
index 58511be..963dd7d 100644
--- a/frontend/src/components/ui.jsx
+++ b/frontend/src/components/ui.jsx
@@ -42,7 +42,7 @@ export function ProgressBar({ value, label }) {
 }
 
 export function Avatar({ user, size = 'md' }) {
-  return <span className={`avatar avatar-${size}`} aria-hidden="true">{initialsOf(user)}</span>
+  return <span className={`avatar avatar-${size}`} aria-hidden="true"><span className="avatar-initials">{initialsOf(user)}</span></span>
 }
 
 export function Badge({ tone = 'neutral', children }) {
diff --git a/frontend/src/styles/components.css b/frontend/src/styles/components.css
index 58bdcad..84b7060 100644
--- a/frontend/src/styles/components.css
+++ b/frontend/src/styles/components.css
@@ -61,7 +61,8 @@
   /* ---------- Small pieces ---------- */
   .progress { @apply h-2.5 w-full overflow-hidden rounded-full bg-line; }
   .progress-bar { @apply block h-full rounded-full transition-[width] duration-500; background: var(--progress); }
-  .avatar { @apply grid shrink-0 place-items-center rounded-full bg-secondary-soft font-ui font-bold text-heading; }
+  .avatar { @apply grid shrink-0 place-items-center rounded-full p-[2px] font-ui font-bold; background: linear-gradient(135deg, #feda75, #fa7e1e 28%, #d62976 55%, #962fbf 78%, #4f5bd5); }
+  .avatar-initials { @apply grid h-full w-full place-items-center rounded-full bg-surface text-heading; }
   .avatar-sm { @apply h-10 w-10 text-sm; }
   .avatar-md { @apply h-12 w-12 text-base; }
   .avatar-lg { @apply h-24 w-24 text-3xl; }
@@ -69,6 +70,11 @@
   .badge-neutral { @apply bg-panel text-muted; }
   .badge-success { @apply bg-success-soft text-success; }
   .chip-link { @apply flex items-center gap-3 rounded-full border border-line bg-surface py-1.5 pl-1.5 pr-5 text-sm font-semibold transition hover:border-accent-ink hover:shadow-soft; }
+  .field-password-wrap { @apply relative; }
+  .field-password-input { padding-right: 3.25rem; }
+  .password-visibility-toggle { @apply absolute right-3 top-1/2 grid h-9 w-9 -translate-y-1/2 place-items-center rounded-full text-muted transition hover:bg-panel hover:text-heading focus-visible:outline-2 focus-visible:outline-offset-2; }
+  .password-visibility-toggle svg { @apply h-5 w-5; }
+  .header-avatar-link { @apply grid h-11 w-11 shrink-0 place-items-center rounded-full transition hover:scale-105 focus-visible:outline-2 focus-visible:outline-offset-2; }
 
   .panel { @apply rounded-3xl border border-line bg-surface p-6 shadow-soft sm:p-8; }
   .panel-outline { @apply bg-transparent shadow-none; }
diff --git a/frontend/src/styles/faq.css b/frontend/src/styles/faq.css
index f613591..c65a104 100644
--- a/frontend/src/styles/faq.css
+++ b/frontend/src/styles/faq.css
@@ -2,7 +2,7 @@
 @layer components {
   .faq-head { @apply max-w-2xl py-16 sm:py-24; }
   .faq-body { @apply pb-24; }
-  .faq-list { @apply max-w-3xl border-t border-line; }
+  .faq-list { @apply mx-auto max-w-3xl border-t border-line; }
   .faq-item { @apply border-b border-line py-5; }
   .faq-item summary { @apply flex cursor-pointer list-none items-center justify-between gap-6 font-ui text-lg font-bold text-heading marker:content-none; }
   .faq-item summary::-webkit-details-marker { display: none; }