feat: add anime metadata editing and NFO diagnostics

- Add PUT /anime/{key} endpoint for updating anime key, tmdb_id, tvdb_id
- Add NFO diagnostics and repair endpoints (GET/POST /nfo/diagnostics)
- Add edit modal UI with context menu integration
- Add frontend JS modules for context-menu and edit-modal
- Add comprehensive tests for edit, rename, and NFO repair flows

src/server/web/static/css/components/modals.css

@@ -268,3 +268,205 @@
     gap: 4px;
   }
 }
+
+/* ============================================================================
+   Context Menu
+   ============================================================================ */
+
+.context-menu {
+  position: fixed;
+  z-index: 1500;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow-elevated);
+  min-width: 180px;
+  padding: var(--spacing-xs) 0;
+  animation: contextMenuFadeIn 0.12s ease-out;
+}
+
+@keyframes contextMenuFadeIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.context-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
+  cursor: pointer;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-body);
+  transition: background-color 0.1s ease;
+}
+
+.context-menu-item:hover {
+  background-color: var(--color-hover);
+}
+
+.context-menu-item i {
+  width: 16px;
+  text-align: center;
+  color: var(--color-text-secondary);
+}
+
+/* ============================================================================
+   Edit Metadata Modal
+   ============================================================================ */
+
+.edit-modal-content {
+  max-width: 520px;
+}
+
+.edit-section {
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-lg);
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.edit-section:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.edit-section h4 {
+  margin: 0 0 var(--spacing-md) 0;
+  font-size: var(--font-size-body);
+  font-weight: 600;
+  color: var(--color-text-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.edit-section h4 i {
+  color: var(--color-accent);
+}
+
+.form-group {
+  margin-bottom: var(--spacing-md);
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: var(--spacing-xs);
+  font-size: var(--font-size-caption);
+  font-weight: 500;
+  color: var(--color-text-secondary);
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-md);
+}
+
+.field-error {
+  display: block;
+  margin-top: var(--spacing-xs);
+  font-size: var(--font-size-caption);
+  color: var(--color-error, #e74c3c);
+}
+
+.input-error {
+  border-color: var(--color-error, #e74c3c) !important;
+}
+
+.key-warning {
+  background: rgba(255, 193, 7, 0.1);
+  border: 1px solid rgba(255, 193, 7, 0.3);
+  border-radius: var(--border-radius);
+  padding: var(--spacing-sm) var(--spacing-md);
+  margin-top: var(--spacing-sm);
+  font-size: var(--font-size-caption);
+  color: var(--color-warning, #f39c12);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+/* NFO Diagnostics */
+.nfo-diagnostics {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.nfo-status-badge {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: var(--font-size-caption);
+  font-weight: 600;
+  width: fit-content;
+}
+
+.nfo-status-badge.nfo-complete {
+  background: rgba(46, 204, 113, 0.15);
+  color: var(--color-success, #2ecc71);
+}
+
+.nfo-status-badge.nfo-incomplete {
+  background: rgba(243, 156, 18, 0.15);
+  color: var(--color-warning, #f39c12);
+}
+
+.nfo-status-badge.nfo-missing {
+  background: rgba(231, 76, 60, 0.15);
+  color: var(--color-error, #e74c3c);
+}
+
+.missing-tags-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+  margin-top: var(--spacing-xs);
+}
+
+.missing-tag-chip {
+  display: inline-block;
+  padding: 2px 8px;
+  background: var(--color-background-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+}
+
+.nfo-all-good {
+  color: var(--color-success, #2ecc71);
+  font-size: var(--font-size-caption);
+  margin: 0;
+}
+
+.nfo-error {
+  color: var(--color-error, #e74c3c);
+  font-size: var(--font-size-caption);
+  margin: 0;
+}
+
+.repair-hint {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.btn-repair {
+  align-self: flex-start;
+  margin-top: var(--spacing-sm);
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-top: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+

src/server/web/static/js/index/app-init.js

@@ -45,6 +45,7 @@ AniWorld.IndexApp = (function() {
         AniWorld.Search.init();
         AniWorld.ScanManager.init();
         AniWorld.ConfigManager.init();
+        AniWorld.ContextMenu.init();
 
         // Bind global events
         bindGlobalEvents();

src/server/web/static/js/index/context-menu.js

@@ -0,0 +1,123 @@
+/**
+ * AniWorld - Context Menu Component
+ *
+ * Right-click context menu for anime series cards.
+ * Provides quick access to edit metadata.
+ *
+ * Dependencies: ui-utils.js, edit-modal.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.ContextMenu = (function() {
+    'use strict';
+
+    let menuElement = null;
+    let currentSeriesKey = null;
+
+    /**
+     * Initialize the context menu system.
+     * Attaches global dismissal listeners.
+     */
+    function init() {
+        // Dismiss on click outside
+        document.addEventListener('click', function(e) {
+            if (menuElement && !menuElement.contains(e.target)) {
+                hide();
+            }
+        });
+
+        // Dismiss on Escape
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
+                hide();
+            }
+        });
+
+        // Dismiss on scroll or resize
+        window.addEventListener('scroll', hide, true);
+        window.addEventListener('resize', hide);
+
+        // Attach context menu via event delegation on the series grid
+        const grid = document.getElementById('series-grid');
+        if (grid) {
+            grid.addEventListener('contextmenu', function(e) {
+                const card = e.target.closest('.series-card');
+                if (card) {
+                    e.preventDefault();
+                    const key = card.getAttribute('data-key');
+                    if (key) {
+                        show(e, key);
+                    }
+                }
+            });
+        }
+    }
+
+    /**
+     * Show context menu at cursor position.
+     * @param {MouseEvent} event - The contextmenu event
+     * @param {string} seriesKey - The series key to operate on
+     */
+    function show(event, seriesKey) {
+        hide(); // Remove any existing menu first
+
+        currentSeriesKey = seriesKey;
+
+        menuElement = document.createElement('div');
+        menuElement.className = 'context-menu';
+        menuElement.innerHTML = `
+            <div class="context-menu-item" data-action="edit">
+                <i class="fa-solid fa-pen-to-square"></i>
+                <span>Edit Metadata</span>
+            </div>
+        `;
+
+        document.body.appendChild(menuElement);
+
+        // Position within viewport bounds
+        const x = event.clientX;
+        const y = event.clientY;
+        const menuRect = menuElement.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+
+        let posX = x;
+        let posY = y;
+
+        if (x + menuRect.width > viewportWidth) {
+            posX = viewportWidth - menuRect.width - 8;
+        }
+        if (y + menuRect.height > viewportHeight) {
+            posY = viewportHeight - menuRect.height - 8;
+        }
+
+        menuElement.style.left = posX + 'px';
+        menuElement.style.top = posY + 'px';
+
+        // Attach action handlers
+        menuElement.querySelector('[data-action="edit"]').addEventListener('click', function() {
+            hide();
+            if (AniWorld.EditModal) {
+                AniWorld.EditModal.open(currentSeriesKey);
+            }
+        });
+    }
+
+    /**
+     * Hide and remove the context menu from DOM.
+     */
+    function hide() {
+        if (menuElement) {
+            menuElement.remove();
+            menuElement = null;
+            currentSeriesKey = null;
+        }
+    }
+
+    return {
+        init: init,
+        show: show,
+        hide: hide
+    };
+})();

src/server/web/static/js/index/edit-modal.js

@@ -0,0 +1,450 @@
+/**
+ * AniWorld - Edit Modal Component
+ *
+ * Modal dialog for viewing/editing anime metadata (key, tmdb_id, tvdb_id)
+ * and NFO diagnostics with repair functionality.
+ *
+ * Dependencies: api-client.js, ui-utils.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.EditModal = (function() {
+    'use strict';
+
+    let modalElement = null;
+    let originalData = null;
+    let currentKey = null;
+
+    /**
+     * Open the edit modal for a specific anime series.
+     * @param {string} seriesKey - The series key to edit
+     */
+    async function open(seriesKey) {
+        currentKey = seriesKey;
+        modalElement = document.getElementById('edit-metadata-modal');
+        if (!modalElement) return;
+
+        // Show modal
+        modalElement.classList.remove('hidden');
+
+        // Reset form state
+        setLoading(true);
+        clearErrors();
+        hideKeyWarning();
+
+        try {
+            // Find series data from the local series list
+            const seriesData = findSeriesData(seriesKey);
+
+            originalData = {
+                key: seriesKey,
+                tmdb_id: seriesData ? seriesData.tmdb_id : null,
+                tvdb_id: seriesData ? seriesData.tvdb_id : null,
+            };
+
+            // Populate form fields
+            setFieldValue('edit-key', originalData.key);
+            setFieldValue('edit-tmdb-id', originalData.tmdb_id || '');
+            setFieldValue('edit-tvdb-id', originalData.tvdb_id || '');
+
+            // Load NFO diagnostics
+            await loadDiagnostics(seriesKey);
+
+        } catch (err) {
+            AniWorld.UI.showToast('Failed to load series data', 'error');
+            console.error('Edit modal load error:', err);
+        } finally {
+            setLoading(false);
+        }
+
+        // Attach event listeners
+        attachListeners();
+    }
+
+    /**
+     * Close the edit modal and reset state.
+     */
+    function close() {
+        if (modalElement) {
+            modalElement.classList.add('hidden');
+        }
+        originalData = null;
+        currentKey = null;
+        detachListeners();
+    }
+
+    /**
+     * Save changed metadata to the backend.
+     */
+    async function save() {
+        clearErrors();
+
+        const newKey = getFieldValue('edit-key').trim().toLowerCase();
+        const tmdbIdStr = getFieldValue('edit-tmdb-id').trim();
+        const tvdbIdStr = getFieldValue('edit-tvdb-id').trim();
+
+        // Validate key
+        if (!newKey) {
+            showFieldError('edit-key', 'Key cannot be empty');
+            return;
+        }
+        if (!/^[a-z0-9][a-z0-9-]*[a-z0-9]$|^[a-z0-9]$/.test(newKey)) {
+            showFieldError('edit-key', 'Key must contain only lowercase letters, numbers, and hyphens');
+            return;
+        }
+
+        // Validate IDs
+        const tmdbId = tmdbIdStr ? parseInt(tmdbIdStr, 10) : null;
+        const tvdbId = tvdbIdStr ? parseInt(tvdbIdStr, 10) : null;
+
+        if (tmdbIdStr && (isNaN(tmdbId) || tmdbId < 1)) {
+            showFieldError('edit-tmdb-id', 'TMDB ID must be a positive number');
+            return;
+        }
+        if (tvdbIdStr && (isNaN(tvdbId) || tvdbId < 1)) {
+            showFieldError('edit-tvdb-id', 'TVDB ID must be a positive number');
+            return;
+        }
+
+        // Check if key changed — show confirmation
+        if (newKey !== originalData.key) {
+            const confirmed = await AniWorld.UI.showConfirmModal(
+                'Rename Series Key',
+                `Changing the key from "${originalData.key}" to "${newKey}" will update the primary identifier. ` +
+                'This may affect provider linkage. Are you sure?'
+            );
+            if (!confirmed) return;
+        }
+
+        // Build update payload (only changed fields)
+        const payload = {};
+        if (newKey !== originalData.key) payload.key = newKey;
+        if (tmdbId !== originalData.tmdb_id) payload.tmdb_id = tmdbId;
+        if (tvdbId !== originalData.tvdb_id) payload.tvdb_id = tvdbId;
+
+        if (Object.keys(payload).length === 0) {
+            AniWorld.UI.showToast('No changes to save', 'info');
+            return;
+        }
+
+        // Send update
+        setSaveLoading(true);
+        try {
+            const response = await AniWorld.ApiClient.put(
+                '/api/anime/' + encodeURIComponent(currentKey),
+                payload
+            );
+
+            if (!response) return;
+
+            if (response.ok) {
+                const result = await response.json();
+                AniWorld.UI.showToast('Metadata updated successfully', 'success');
+
+                // Update local state
+                const oldKey = currentKey;
+                currentKey = result.key;
+                originalData = {
+                    key: result.key,
+                    tmdb_id: result.tmdb_id,
+                    tvdb_id: result.tvdb_id,
+                };
+
+                // Update the card in the DOM
+                updateCardAfterSave(oldKey, result);
+
+                // Update repair button state
+                updateRepairButtonState();
+
+            } else if (response.status === 409) {
+                showFieldError('edit-key', 'A series with this key already exists');
+            } else if (response.status === 422) {
+                const err = await response.json();
+                AniWorld.UI.showToast('Validation error: ' + (err.detail || 'Invalid input'), 'error');
+            } else {
+                AniWorld.UI.showToast('Failed to update metadata', 'error');
+            }
+        } catch (err) {
+            AniWorld.UI.showToast('Connection error. Check your network.', 'error');
+            console.error('Save error:', err);
+        } finally {
+            setSaveLoading(false);
+        }
+    }
+
+    /**
+     * Trigger NFO repair for the current series.
+     */
+    async function repairNfo() {
+        setRepairLoading(true);
+        try {
+            const response = await AniWorld.ApiClient.post(
+                '/api/nfo/' + encodeURIComponent(currentKey) + '/repair',
+                {}
+            );
+
+            if (!response) return;
+
+            if (response.ok) {
+                const result = await response.json();
+                AniWorld.UI.showToast(result.message, 'success');
+
+                // Refresh diagnostics
+                await loadDiagnostics(currentKey);
+            } else if (response.status === 400) {
+                const err = await response.json();
+                AniWorld.UI.showToast(err.detail || 'Cannot repair NFO', 'error');
+            } else {
+                AniWorld.UI.showToast('Failed to repair NFO', 'error');
+            }
+        } catch (err) {
+            AniWorld.UI.showToast('Connection error during repair', 'error');
+            console.error('Repair error:', err);
+        } finally {
+            setRepairLoading(false);
+        }
+    }
+
+    /**
+     * Load NFO diagnostics for the current series.
+     * @param {string} key - Series key
+     */
+    async function loadDiagnostics(key) {
+        const container = document.getElementById('nfo-diagnostics-container');
+        if (!container) return;
+
+        try {
+            const response = await AniWorld.ApiClient.get(
+                '/api/nfo/' + encodeURIComponent(key) + '/diagnostics'
+            );
+
+            if (!response || !response.ok) {
+                container.innerHTML = '<p class="nfo-error">Failed to load NFO diagnostics</p>';
+                return;
+            }
+
+            const data = await response.json();
+            renderDiagnostics(data);
+            updateRepairButtonState();
+
+        } catch (err) {
+            container.innerHTML = '<p class="nfo-error">Error loading diagnostics</p>';
+            console.error('Diagnostics error:', err);
+        }
+    }
+
+    /**
+     * Render NFO diagnostics data into the modal.
+     * @param {Object} data - NfoDiagnosticsResponse
+     */
+    function renderDiagnostics(data) {
+        const badge = document.getElementById('nfo-status-badge');
+        const tagsList = document.getElementById('nfo-missing-tags');
+
+        if (badge) {
+            if (!data.has_nfo) {
+                badge.className = 'nfo-status-badge nfo-missing';
+                badge.textContent = 'No NFO File';
+            } else if (data.missing_tags.length === 0) {
+                badge.className = 'nfo-status-badge nfo-complete';
+                badge.textContent = 'Complete';
+            } else {
+                badge.className = 'nfo-status-badge nfo-incomplete';
+                badge.textContent = data.missing_tags.length + ' Missing';
+            }
+        }
+
+        if (tagsList) {
+            if (data.missing_tags.length === 0) {
+                tagsList.innerHTML = '<p class="nfo-all-good">All required tags present</p>';
+            } else {
+                tagsList.innerHTML = data.missing_tags.map(function(tag) {
+                    return '<span class="missing-tag-chip">' + escapeHtml(tag) + '</span>';
+                }).join('');
+            }
+        }
+    }
+
+    /**
+     * Update repair button disabled state based on tmdb_id field.
+     */
+    function updateRepairButtonState() {
+        const btn = document.getElementById('btn-repair-nfo');
+        const hint = document.getElementById('repair-hint');
+        const tmdbValue = getFieldValue('edit-tmdb-id').trim();
+
+        if (btn) {
+            // Enable repair even without tmdb_id — the service can search by name
+            btn.disabled = false;
+        }
+        if (hint) {
+            hint.style.display = tmdbValue ? 'none' : 'block';
+        }
+    }
+
+    // ---- Helpers ----
+
+    function findSeriesData(key) {
+        // Access the series data from the series manager if available
+        if (AniWorld.SeriesManager && AniWorld.SeriesManager.getSeriesData) {
+            const allSeries = AniWorld.SeriesManager.getSeriesData();
+            if (allSeries) {
+                return allSeries.find(function(s) { return s.key === key; });
+            }
+        }
+        return null;
+    }
+
+    function updateCardAfterSave(oldKey, result) {
+        const card = document.querySelector('[data-series-id="' + oldKey + '"]');
+        if (card) {
+            card.setAttribute('data-key', result.key);
+            card.setAttribute('data-series-id', result.key);
+            // Update checkbox data-key
+            const checkbox = card.querySelector('.series-checkbox');
+            if (checkbox) {
+                checkbox.setAttribute('data-key', result.key);
+            }
+        }
+
+        // Update local series data array
+        if (AniWorld.SeriesManager && AniWorld.SeriesManager.updateSeriesKey) {
+            AniWorld.SeriesManager.updateSeriesKey(oldKey, result.key);
+        }
+    }
+
+    function setFieldValue(id, value) {
+        const el = document.getElementById(id);
+        if (el) el.value = value !== null && value !== undefined ? value : '';
+    }
+
+    function getFieldValue(id) {
+        const el = document.getElementById(id);
+        return el ? el.value : '';
+    }
+
+    function showFieldError(fieldId, message) {
+        const el = document.getElementById(fieldId);
+        if (el) {
+            const errorEl = el.parentElement.querySelector('.field-error');
+            if (errorEl) {
+                errorEl.textContent = message;
+                errorEl.style.display = 'block';
+            }
+            el.classList.add('input-error');
+        }
+    }
+
+    function clearErrors() {
+        if (!modalElement) return;
+        modalElement.querySelectorAll('.field-error').forEach(function(el) {
+            el.style.display = 'none';
+            el.textContent = '';
+        });
+        modalElement.querySelectorAll('.input-error').forEach(function(el) {
+            el.classList.remove('input-error');
+        });
+    }
+
+    function hideKeyWarning() {
+        const warning = document.getElementById('key-change-warning');
+        if (warning) warning.style.display = 'none';
+    }
+
+    function setLoading(loading) {
+        const form = document.getElementById('edit-metadata-form');
+        if (form) {
+            form.style.opacity = loading ? '0.5' : '1';
+            form.style.pointerEvents = loading ? 'none' : 'auto';
+        }
+    }
+
+    function setSaveLoading(loading) {
+        const btn = document.getElementById('btn-save-metadata');
+        if (btn) {
+            btn.disabled = loading;
+            btn.innerHTML = loading
+                ? '<i class="fa-solid fa-spinner fa-spin"></i> Saving...'
+                : '<i class="fa-solid fa-floppy-disk"></i> Save';
+        }
+    }
+
+    function setRepairLoading(loading) {
+        const btn = document.getElementById('btn-repair-nfo');
+        if (btn) {
+            btn.disabled = loading;
+            btn.innerHTML = loading
+                ? '<i class="fa-solid fa-spinner fa-spin"></i> Repairing...'
+                : '<i class="fa-solid fa-wrench"></i> Repair NFO';
+        }
+    }
+
+    function escapeHtml(str) {
+        var div = document.createElement('div');
+        div.textContent = str;
+        return div.innerHTML;
+    }
+
+    // Event listener management
+    let listeners = [];
+
+    function attachListeners() {
+        detachListeners();
+
+        const saveBtn = document.getElementById('btn-save-metadata');
+        const cancelBtn = document.getElementById('btn-cancel-metadata');
+        const repairBtn = document.getElementById('btn-repair-nfo');
+        const overlay = modalElement ? modalElement.querySelector('.modal-overlay') : null;
+        const keyInput = document.getElementById('edit-key');
+
+        if (saveBtn) {
+            var saveFn = function() { save(); };
+            saveBtn.addEventListener('click', saveFn);
+            listeners.push({ el: saveBtn, event: 'click', fn: saveFn });
+        }
+
+        if (cancelBtn) {
+            var cancelFn = function() { close(); };
+            cancelBtn.addEventListener('click', cancelFn);
+            listeners.push({ el: cancelBtn, event: 'click', fn: cancelFn });
+        }
+
+        if (repairBtn) {
+            var repairFn = function() { repairNfo(); };
+            repairBtn.addEventListener('click', repairFn);
+            listeners.push({ el: repairBtn, event: 'click', fn: repairFn });
+        }
+
+        if (overlay) {
+            var overlayFn = function() { close(); };
+            overlay.addEventListener('click', overlayFn);
+            listeners.push({ el: overlay, event: 'click', fn: overlayFn });
+        }
+
+        if (keyInput) {
+            var keyFn = function() {
+                var warning = document.getElementById('key-change-warning');
+                if (warning) {
+                    warning.style.display = keyInput.value !== originalData.key ? 'block' : 'none';
+                }
+            };
+            keyInput.addEventListener('input', keyFn);
+            listeners.push({ el: keyInput, event: 'input', fn: keyFn });
+        }
+    }
+
+    function detachListeners() {
+        listeners.forEach(function(l) {
+            l.el.removeEventListener(l.event, l.fn);
+        });
+        listeners = [];
+    }
+
+    return {
+        open: open,
+        close: close,
+        save: save,
+        repairNfo: repairNfo
+    };
+})();

src/server/web/static/js/index/series-manager.js

@@ -392,6 +392,22 @@ AniWorld.SeriesManager = (function() {
         return seriesData;
     }
 
+    /**
+     * Update a series key in the local data arrays after rename.
+     * @param {string} oldKey - The previous key
+     * @param {string} newKey - The new key
+     */
+    function updateSeriesKey(oldKey, newKey) {
+        if (seriesData) {
+            var s = seriesData.find(function(item) { return item.key === oldKey; });
+            if (s) s.key = newKey;
+        }
+        if (filteredSeriesData) {
+            var fs = filteredSeriesData.find(function(item) { return item.key === oldKey; });
+            if (fs) fs.key = newKey;
+        }
+    }
+
     /**
      * Get filtered series data
      * @returns {Array} Filtered series data array
@@ -543,6 +559,7 @@ AniWorld.SeriesManager = (function() {
         getFilteredSeriesData: getFilteredSeriesData,
         findByKey: findByKey,
         updateSeriesLoadingStatus: updateSeriesLoadingStatus,
-        updateSingleSeries: updateSingleSeries
+        updateSingleSeries: updateSingleSeries,
+        updateSeriesKey: updateSeriesKey
     };
 })();

src/server/web/templates/index.html

@@ -640,6 +640,80 @@
             </div>
         </div>
 
+        <!-- Edit Metadata Modal -->
+        <div id="edit-metadata-modal" class="modal hidden">
+            <div class="modal-overlay"></div>
+            <div class="modal-content edit-modal-content">
+                <div class="modal-header">
+                    <h3>Edit Metadata</h3>
+                    <button id="btn-cancel-metadata" class="btn btn-icon">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <form id="edit-metadata-form" onsubmit="return false;">
+                        <!-- Identity Section -->
+                        <div class="edit-section">
+                            <h4><i class="fa-solid fa-key"></i> Identity</h4>
+                            <div class="form-group">
+                                <label for="edit-key">Series Key</label>
+                                <input type="text" id="edit-key" class="input-field"
+                                    placeholder="e.g. attack-on-titan"
+                                    pattern="[a-z0-9][a-z0-9-]*[a-z0-9]">
+                                <span class="field-error" style="display:none;"></span>
+                            </div>
+                            <div id="key-change-warning" class="key-warning" style="display:none;">
+                                <i class="fa-solid fa-triangle-exclamation"></i>
+                                Changing the key will update the primary identifier. This may affect provider linkage.
+                            </div>
+                        </div>
+
+                        <!-- External IDs Section -->
+                        <div class="edit-section">
+                            <h4><i class="fa-solid fa-database"></i> External IDs</h4>
+                            <div class="form-row">
+                                <div class="form-group">
+                                    <label for="edit-tmdb-id">TMDB ID</label>
+                                    <input type="number" id="edit-tmdb-id" class="input-field"
+                                        placeholder="e.g. 1429" min="1">
+                                    <span class="field-error" style="display:none;"></span>
+                                </div>
+                                <div class="form-group">
+                                    <label for="edit-tvdb-id">TVDB ID</label>
+                                    <input type="number" id="edit-tvdb-id" class="input-field"
+                                        placeholder="e.g. 267440" min="1">
+                                    <span class="field-error" style="display:none;"></span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- NFO Status Section -->
+                        <div class="edit-section">
+                            <h4><i class="fa-solid fa-file-lines"></i> NFO Status</h4>
+                            <div class="nfo-diagnostics">
+                                <div id="nfo-status-badge" class="nfo-status-badge">Loading...</div>
+                                <div id="nfo-diagnostics-container">
+                                    <div id="nfo-missing-tags" class="missing-tags-list"></div>
+                                </div>
+                                <p id="repair-hint" class="repair-hint" style="display:none;">
+                                    <i class="fa-solid fa-circle-info"></i>
+                                    No TMDB ID set. Repair will search TMDB by series name.
+                                </p>
+                                <button type="button" id="btn-repair-nfo" class="btn btn-secondary btn-repair">
+                                    <i class="fa-solid fa-wrench"></i> Repair NFO
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" id="btn-save-metadata" class="btn btn-primary">
+                        <i class="fa-solid fa-floppy-disk"></i> Save
+                    </button>
+                </div>
+            </div>
+        </div>
+
         <!-- Toast notifications -->
         <div id="toast-container" class="toast-container"></div>
     </div>
@@ -665,6 +739,8 @@
     <script src="/static/js/user_preferences.js?v={{ static_v }}"></script>
 
     <!-- Index Page Modules -->
+    <script src="/static/js/index/context-menu.js?v={{ static_v }}"></script>
+    <script src="/static/js/index/edit-modal.js?v={{ static_v }}"></script>
     <script src="/static/js/index/series-manager.js?v={{ static_v }}"></script>
     <script src="/static/js/index/selection-manager.js?v={{ static_v }}"></script>
     <script src="/static/js/index/search.js?v={{ static_v }}"></script>