{% extends "base.html" %}

{% block title %}Memory Review - Data Analyst Portal{% endblock %}

{% block head_extra %}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
        /* Corporate Memory Admin - Design System Styles */
        .container-memory {
            max-width: var(--width-app);
            margin: 0 auto;
            padding: var(--space-6);
        }

        /* Header */
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: var(--space-5);
            border-bottom: 1px solid var(--border);
            margin-bottom: var(--space-6);
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: var(--space-4);
        }

        .back-link {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            color: var(--text-secondary);
            text-decoration: none;
            font-size: var(--text-sm);
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-md);
            transition: all 0.15s;
        }

        .back-link:hover {
            background: var(--border-light);
            color: var(--text-primary);
        }

        .page-title {
            display: flex;
            align-items: center;
            gap: var(--space-3);
        }

        .page-title h1 {
            font-size: var(--text-xl);
            font-weight: var(--font-semibold);
        }

        .page-icon {
            width: 36px;
            height: 36px;
            background: var(--primary);
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        /* Stats Bar */
        .stats-bar {
            display: flex;
            gap: var(--space-6);
            padding: var(--space-5);
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-sm);
            margin-bottom: var(--space-6);
        }

        .stat-item {
            text-align: center;
        }

        .stat-item .value {
            font-size: var(--text-xl);
            font-weight: var(--font-bold);
            color: var(--text-primary);
        }

        .stat-item .label {
            font-size: var(--text-xs);
            color: var(--text-secondary);
            text-transform: uppercase;
        }

        .stat-item.highlight .value {
            color: var(--warning);
        }

        .stat-item.highlight-blue .value {
            color: var(--primary);
        }

        .stat-item.highlight-green .value {
            color: var(--success);
        }

        .stat-divider {
            width: 1px;
            background: var(--border);
        }

        /* Tab Navigation */
        .tab-nav {
            display: flex;
            gap: var(--space-1);
            margin-bottom: var(--space-5);
            border-bottom: 2px solid var(--border);
            /* v55 L50: MODERATION + CATALOG group labels + separator
               pushed total width past most viewports → buttons wrapped
               text 2× per line. Allow horizontal scroll instead of
               wrapping; tabs stay one line, whole strip slides on
               overflow with a thin scrollbar at the bottom edge. */
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: thin;
        }

        .tab-btn {
            padding: var(--space-3) var(--space-4);
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            font-size: var(--text-base);
            font-weight: var(--font-medium);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            gap: var(--space-2);
            white-space: nowrap;   /* keep "Review Queue" / "Duplicate Candidates" on one line */
            flex-shrink: 0;        /* don't shrink under flex pressure when nowrap is on */
        }
        /* Every direct child of the tab strip (group labels, separators,
           the spacer, action buttons) must also refuse to shrink — without
           this the spacer collapses tabs back onto two lines on narrow
           viewports. Same companion as the .tab-btn rule above. */
        .tab-nav > * { flex-shrink: 0; }
        .tab-group-label, .tab-group-sep { white-space: nowrap; }

        .tab-btn:hover {
            color: var(--text-primary);
        }

        .tab-btn.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }

        .tab-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            border-radius: var(--radius-full);
            background: var(--warning);
            color: white;
            font-size: 10px;
            font-weight: var(--font-bold);
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* Batch Action Bar */
        .batch-bar {
            display: flex;
            align-items: center;
            gap: var(--space-4);
            padding: var(--space-3) var(--space-4);
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            margin-bottom: var(--space-4);
        }

        .batch-bar label {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--text-sm);
            color: var(--text-secondary);
            cursor: pointer;
        }

        .batch-bar input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
            accent-color: var(--primary);
        }

        .batch-actions {
            display: flex;
            gap: var(--space-2);
            margin-left: auto;
        }

        .selected-count {
            font-size: var(--text-sm);
            color: var(--text-secondary);
        }

        /* Action Buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            font-size: var(--text-sm);
            font-weight: var(--font-medium);
            cursor: pointer;
            transition: all 0.15s;
            background: var(--surface);
            color: var(--text-secondary);
        }

        .btn:hover:not(:disabled) {
            border-color: var(--text-secondary);
        }

        .btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .btn-approve {
            color: var(--success);
            border-color: var(--success);
        }

        .btn-approve:hover:not(:disabled) {
            background: rgba(16, 183, 127, 0.1);
            border-color: var(--success);
        }

        .btn-mandate {
            color: white;
            background: var(--primary);
            border-color: var(--primary);
        }

        .btn-mandate:hover:not(:disabled) {
            background: var(--primary-dark);
            border-color: var(--primary-dark);
        }

        .btn-reject {
            color: var(--error);
            border-color: transparent;
        }

        .btn-reject:hover:not(:disabled) {
            background: rgba(234, 88, 12, 0.1);
            border-color: var(--error);
        }

        .btn-revoke {
            color: var(--text-secondary);
            border-color: transparent;
        }

        .btn-revoke:hover:not(:disabled) {
            background: rgba(107, 114, 128, 0.1);
            border-color: var(--text-secondary);
        }

        /* Knowledge Item Cards */
        .knowledge-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-4);
        }

        .knowledge-item {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-sm);
            padding: var(--space-5);
            transition: all 0.15s;
            position: relative;
        }

        .knowledge-item:hover {
            border-color: var(--primary);
            box-shadow: var(--shadow-md);
        }

        .knowledge-item.focused {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px var(--primary-light);
        }

        /* ─── v49 Task 8.6 — Admin moderation visual parity with /memory/d/<slug> ───
           Mirrors the .memory-item layout from memory_domain_detail.html so
           an admin reviewing the queue sees items in the SAME shape an
           analyst sees them, with an extra .memory-item__admin-actions
           row for moderation buttons. The existing .knowledge-item / .knowledge-title
           / .knowledge-content / .item-actions classes still apply (we
           emit both class sets on the same node), so the legacy JS that
           queries `.knowledge-item` for keyboard navigation, bulk-edit
           checkbox state, etc. keeps working unchanged. */
        .memory-item.is-required {
            background: #fffbeb;
            border-color: #f59e0b;
        }
        .memory-item__header {
            display: flex;
            align-items: flex-start;
            gap: var(--space-3);
            margin-bottom: var(--space-2);
        }
        .memory-item__title {
            margin: 0;
            font-size: var(--text-md);
            font-weight: var(--font-semibold);
            color: var(--text-primary);
            flex: 1;
            min-width: 0;
        }
        .memory-item__badges {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            align-items: center;
        }
        .badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            background: rgba(0, 115, 209, 0.12);
            color: #0056A3;
        }
        .badge--category { background: rgba(124, 58, 237, 0.14); color: #6d28d9; }
        .badge--source   { background: rgba(16, 183, 127, 0.14); color: #0e9b6a; }
        .badge--required { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
        .badge--status   { background: rgba(100, 116, 139, 0.18); color: #475569; }

        .memory-item__content {
            font-size: var(--text-base);
            color: var(--text-secondary);
            line-height: 1.7;
            white-space: pre-wrap;
            margin-bottom: var(--space-3);
        }
        .memory-item__footer {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding-top: var(--space-3);
            border-top: 1px solid var(--border-light, #eceff1);
            font-size: var(--text-xs);
            color: var(--text-secondary);
            flex-wrap: wrap;
        }
        .memory-item__votes {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: help;
        }
        .memory-item__votes .vote-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 9px;
            border-radius: 999px;
            background: var(--bg, #f8f9fa);
            color: var(--text-secondary);
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }
        .memory-item__votes .vote-icon {
            width: 13px;
            height: 13px;
            flex-shrink: 0;
        }
        .memory-item__contributors {
            display: inline-flex;
            gap: 4px;
            align-items: center;
        }
        .memory-item__avatar {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: rgba(0, 115, 209, 0.18);
            color: #0056A3;
            font-size: 10px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .memory-item__tags {
            display: inline-flex;
            gap: 4px;
            flex-wrap: wrap;
        }
        .memory-item__tag {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
            background: var(--border-light, #f3f4f6);
            color: var(--text-secondary, #5f6368);
        }
        .memory-item__meta { margin-left: auto; }
        .memory-item__admin-actions {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: var(--space-3);
            padding-top: var(--space-3);
            border-top: 1px dashed var(--border-light, #eceff1);
        }

        .item-row {
            display: flex;
            gap: var(--space-4);
            align-items: flex-start;
        }

        .item-checkbox {
            margin-top: 2px;
            width: 16px;
            height: 16px;
            cursor: pointer;
            accent-color: var(--primary);
            flex-shrink: 0;
        }

        .item-body {
            flex: 1;
            min-width: 0;
        }

        .knowledge-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: var(--space-3);
        }

        .knowledge-title {
            font-size: var(--text-md);
            font-weight: var(--font-semibold);
            color: var(--text-primary);
            margin-bottom: var(--space-1);
        }

        .knowledge-meta {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            font-size: var(--text-xs);
            color: var(--text-secondary);
        }

        .category-badge {
            padding: 2px 8px;
            border-radius: var(--radius-full);
            font-size: var(--text-xs);
            font-weight: var(--font-medium);
        }

        .category-badge.data_analysis { background: rgba(16, 183, 127, 0.1); color: var(--success); }
        .category-badge.api_integration { background: var(--primary-light); color: var(--primary); }
        .category-badge.debugging { background: rgba(234, 88, 12, 0.1); color: var(--error); }
        .category-badge.performance { background: rgba(245, 159, 10, 0.1); color: #b45309; }
        .category-badge.workflow { background: rgba(139, 92, 246, 0.1); color: #7c3aed; }
        .category-badge.infrastructure { background: rgba(107, 114, 128, 0.1); color: var(--text-secondary); }
        .category-badge.business_logic { background: rgba(16, 183, 127, 0.1); color: #0d9668; }

        /* Status Badges */
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
            padding: 2px 8px;
            border-radius: var(--radius-full);
            font-size: var(--text-xs);
            font-weight: var(--font-semibold);
            text-transform: capitalize;
        }

        .status-badge.pending {
            background: rgba(245, 159, 10, 0.15);
            color: #b45309;
        }

        .status-badge.approved {
            background: rgba(16, 183, 127, 0.15);
            color: #0d9668;
        }

        .status-badge.mandatory {
            background: var(--primary-light);
            color: var(--primary);
        }

        .status-badge.rejected {
            background: rgba(234, 88, 12, 0.15);
            color: var(--error);
        }

        .status-badge.revoked {
            background: rgba(107, 114, 128, 0.15);
            color: var(--text-secondary);
        }

        .knowledge-content {
            font-size: var(--text-base);
            color: var(--text-secondary);
            line-height: 1.7;
            margin-bottom: var(--space-4);
            /* Truncate long content */
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .knowledge-content code {
            font-family: var(--font-mono);
            font-size: var(--text-sm);
            background: var(--background);
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            color: var(--text-primary);
        }

        .knowledge-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: var(--space-3);
            border-top: 1px solid var(--border-light);
        }

        .knowledge-tags {
            display: flex;
            gap: var(--space-2);
            flex-wrap: wrap;
        }

        .tag {
            font-size: var(--text-xs);
            color: var(--text-secondary);
            background: var(--background);
            padding: 2px 8px;
            border-radius: var(--radius-sm);
        }

        .contributors {
            font-size: var(--text-xs);
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        .contributor-avatars {
            display: flex;
        }

        .contributor-avatar {
            width: 20px;
            height: 20px;
            border-radius: var(--radius-full);
            background: var(--primary-light);
            border: 2px solid var(--surface);
            margin-left: -6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 8px;
            font-weight: var(--font-semibold);
            color: var(--primary);
        }

        .contributor-avatar:first-child {
            margin-left: 0;
        }

        /* Item Actions */
        .item-actions {
            display: flex;
            gap: var(--space-2);
            margin-top: var(--space-3);
            padding-top: var(--space-3);
            border-top: 1px solid var(--border-light);
        }

        /* Mandate Form (inline) */
        .mandate-form {
            display: none;
            margin-top: var(--space-3);
            padding: var(--space-4);
            background: var(--background);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border);
        }

        .mandate-form.visible {
            display: block;
        }

        .mandate-form label {
            display: block;
            font-size: var(--text-sm);
            font-weight: var(--font-medium);
            color: var(--text-primary);
            margin-bottom: var(--space-2);
        }

        .mandate-form textarea {
            width: 100%;
            padding: var(--space-2) var(--space-3);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            font-size: var(--text-base);
            font-family: var(--font-primary);
            resize: vertical;
            min-height: 60px;
            background: var(--surface);
        }

        .mandate-form textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px var(--primary-light);
        }

        .mandate-form select {
            width: 100%;
            padding: var(--space-2) var(--space-3);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            font-size: var(--text-base);
            background: var(--surface);
            color: var(--text-primary);
            margin-bottom: var(--space-3);
        }

        .mandate-form-actions {
            display: flex;
            gap: var(--space-2);
            margin-top: var(--space-3);
        }

        /* Filter Bar (All Items tab) */
        .filter-bar {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            margin-bottom: var(--space-4);
        }

        .filter-bar label {
            font-size: var(--text-sm);
            color: var(--text-secondary);
        }

        .filter-select {
            padding: var(--space-2) var(--space-3);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            font-size: var(--text-sm);
            background: var(--surface);
            color: var(--text-primary);
            cursor: pointer;
        }

        /* Audit Log Table */





        .action-badge {
            display: inline-flex;
            padding: 2px 8px;
            border-radius: var(--radius-full);
            font-size: var(--text-xs);
            font-weight: var(--font-medium);
        }

        .action-badge.approved {
            background: rgba(16, 183, 127, 0.15);
            color: #0d9668;
        }

        .action-badge.rejected {
            background: rgba(234, 88, 12, 0.15);
            color: var(--error);
        }

        .action-badge.mandated {
            background: var(--primary-light);
            color: var(--primary);
        }

        .action-badge.revoked {
            background: rgba(107, 114, 128, 0.15);
            color: var(--text-secondary);
        }

        .action-badge.edited {
            background: rgba(139, 92, 246, 0.15);
            color: #7c3aed;
        }

        .action-badge.migration_auto_approved {
            background: rgba(245, 159, 10, 0.15);
            color: #b45309;
        }

        .audit-details {
            font-size: var(--text-xs);
            color: var(--text-secondary);
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .audit-row { cursor: pointer; }
        .audit-row:hover { background: var(--bg-secondary, #f9fafb); }
        .audit-row.expanded { background: #eff6ff; }
        .audit-detail-row > td {
            background: #f8fafc;
            border-top: 0;
            padding: var(--space-4) var(--space-5);
        }
        .audit-detail-grid {
            display: grid;
            grid-template-columns: 140px 1fr;
            gap: var(--space-2) var(--space-3);
            font-size: var(--text-sm);
        }
        .audit-detail-grid .k {
            color: var(--text-secondary);
            font-weight: var(--font-medium);
        }
        .audit-detail-grid .v {
            color: var(--text-primary);
            word-break: break-word;
        }
        .audit-detail-grid pre {
            margin: 0;
            padding: var(--space-3);
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            font-size: var(--text-xs);
            white-space: pre-wrap;
            word-break: break-word;
        }
        .audit-disclosure {
            display: inline-block;
            width: 12px;
            color: var(--text-secondary);
            transition: transform 0.15s;
        }
        .audit-row.expanded .audit-disclosure { transform: rotate(90deg); }

        /* Pagination */
        .pagination {
            display: flex;
            justify-content: center;
            gap: var(--space-2);
            margin-top: var(--space-6);
        }

        .page-btn {
            padding: var(--space-2) var(--space-3);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            background: var(--surface);
            font-size: var(--text-sm);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.15s;
        }

        .page-btn:hover:not(:disabled) {
            border-color: var(--primary);
            color: var(--primary);
        }

        .page-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .page-btn.active {
            background: var(--primary);
            border-color: var(--primary);
            color: white;
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: var(--space-8);
            color: var(--text-secondary);
        }

        .empty-state svg {
            width: 48px;
            height: 48px;
            margin-bottom: var(--space-4);
            opacity: 0.5;
        }

        /* Loading indicator */
        .loading {
            text-align: center;
            padding: var(--space-6);
            color: var(--text-secondary);
            font-size: var(--text-sm);
        }

        /* Toast notification */
        .toast {
            position: fixed;
            bottom: var(--space-6);
            right: var(--space-6);
            padding: var(--space-3) var(--space-5);
            border-radius: var(--radius-lg);
            color: white;
            font-size: var(--text-sm);
            font-weight: var(--font-medium);
            box-shadow: var(--shadow-md);
            z-index: 1000;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s;
            pointer-events: none;
        }

        .toast.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .toast.success {
            background: var(--success);
        }

        .toast.error {
            background: var(--error);
        }

        /* Keyboard shortcut hints */
        .shortcut-hint {
            display: none;
            font-size: 9px;
            padding: 1px 4px;
            background: var(--background);
            border: 1px solid var(--border);
            border-radius: 3px;
            color: var(--text-secondary);
            margin-left: var(--space-1);
        }

        .keyboard-active .shortcut-hint {
            display: inline;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .page-header {
                flex-direction: column;
                align-items: flex-start;
                gap: var(--space-3);
            }

            .stats-bar {
                flex-wrap: wrap;
                gap: var(--space-4);
            }

            .tab-nav {
                overflow-x: auto;
            }

            .batch-bar {
                flex-wrap: wrap;
            }

            .knowledge-header {
                flex-direction: column;
                gap: var(--space-3);
            }

            .knowledge-footer {
                flex-direction: column;
                gap: var(--space-3);
                align-items: flex-start;
            }

            .item-actions {
                flex-wrap: wrap;
            }


            .shortcut-hint {
                display: none !important;
            }
        }

        /* ─── Tag-input widget (edit modal) ─── */
        .tag-input-widget {
            display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
            padding: 4px 6px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--bg);
            min-height: 34px;
            cursor: text;
        }
        .tag-input-widget:focus-within {
            border-color: var(--primary, #0073D1);
            box-shadow: 0 0 0 2px rgba(0, 115, 209, 0.15);
        }
        .tag-input-widget .tag-pill {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 2px 4px 2px 10px;
            background: var(--primary, #0073D1);
            color: white;
            border-radius: 999px;
            font-size: 12px; font-weight: 500;
            line-height: 1.4;
            white-space: nowrap;
        }
        .tag-input-widget .tag-pill button {
            background: rgba(255, 255, 255, 0.25);
            color: white; border: none; cursor: pointer;
            width: 16px; height: 16px; padding: 0;
            border-radius: 50%;
            font-size: 13px; line-height: 1;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .tag-input-widget .tag-pill button:hover {
            background: rgba(255, 255, 255, 0.45);
        }
        .tag-input-widget input {
            flex: 1; min-width: 120px;
            border: none; outline: none; background: transparent;
            color: var(--text); font: inherit; padding: 4px 6px;
        }
        /* Typeahead dropdown — popped under the widget when input has focus.
           Filter against EXISTING_TAGS array (server-injected via tojson). */
        .tag-suggestions {
            position: absolute;
            top: 100%; left: 0; right: 0;
            margin-top: 2px;
            background: var(--bg, white);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
            z-index: 2100;
            max-height: 220px;
            overflow-y: auto;
            padding: 4px 0;
        }
        .tag-suggestion {
            display: block; width: 100%; text-align: left;
            padding: 6px 12px;
            background: transparent;
            border: none; cursor: pointer;
            color: var(--text); font: inherit;
            font-size: 13px;
        }
        .tag-suggestion:hover, .tag-suggestion.active {
            background: var(--primary-light, #eef5fb);
            color: var(--primary, #0073D1);
        }
        .tag-suggestion .hint {
            color: var(--text-muted); font-size: 11px; margin-left: 8px;
            font-weight: 500;
        }
        .tag-suggestion.new-tag .hint { color: var(--primary, #0073D1); }
        .tag-suggestions .empty-hint {
            padding: 8px 12px; color: var(--text-muted); font-size: 12px; font-style: italic;
        }
    </style>
{% endblock %}

{% block layout %}
    {% set page_hero_eyebrow = "Agent Experience" %}
    {% set page_hero_title = "Memory Review" %}
    {% set page_hero_subtitle = "Review pending knowledge items from analyst sessions — approve, mandate, or reject — and resolve contradictions and duplicate candidates. Approved items flow to the user-facing <a href=\"/corporate-memory\" style=\"color:inherit;text-decoration:underline;\">Curated Memory</a> page." %}
    {% include "_page_hero.html" %}
<div class="container-memory">
        <!-- Stats Bar -->
        <div class="stats-bar">
            <div class="stat-item highlight">
                <div class="value" id="statPending">{{ stats.pending_count|default(0) }}</div>
                <div class="label">Pending</div>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item highlight-green">
                <div class="value" id="statApproved">{{ stats.approved_count|default(0) }}</div>
                <div class="label">Approved</div>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item highlight-blue">
                <div class="value" id="statMandatory">{{ stats.mandatory_count|default(0) }}</div>
                <div class="label">Required</div>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item">
                <div class="value" id="statTotal">{{ stats.knowledge_count|default(0) }}</div>
                <div class="label">Total</div>
            </div>
        </div>

        <!-- Tab Navigation — v55 grouped under Moderation / Catalog labels
             so the 7-tab strip reads as two intent buckets instead of a
             flat scroll. switchTab() still drives by data-tab; the
             groupings are cosmetic. Domains + "+ New" actions stay on the
             right edge (E2E found admins had no UI to create a domain
             even though the API existed). -->
        <div class="tab-nav" style="display:flex; align-items:center; gap:0;">
            <span class="tab-group-label" style="padding:0 8px; font-size:11px; font-weight:600;
                  text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted);">
                Moderation
            </span>
            <button class="tab-btn active" data-tab="review" onclick="switchTab('review')">
                Review Queue
                <span class="tab-badge" id="pendingBadge" style="{% if not stats.pending_count %}display:none{% endif %}">{{ stats.pending_count|default(0) }}</span>
            </button>
            <button class="tab-btn" data-tab="all" onclick="switchTab('all')">
                All Items
            </button>
            <button class="tab-btn" data-tab="contradictions" onclick="switchTab('contradictions')">
                Contradictions
                <span class="tab-badge" id="contradictionsBadge" style="{% if not stats.contradictions %}display:none{% endif %}">{{ stats.contradictions|default(0) }}</span>
            </button>
            <button class="tab-btn" data-tab="duplicates" onclick="switchTab('duplicates')">
                Duplicate Candidates
                <span class="tab-badge" id="duplicatesBadge" style="{% if not stats.duplicates %}display:none{% endif %}">{{ stats.duplicates|default(0) }}</span>
            </button>
            <button class="tab-btn" data-tab="audit" onclick="switchTab('audit')">
                Audit Log
            </button>
            <span class="tab-group-sep" aria-hidden="true" style="width:1px; height:18px;
                  background:var(--border); margin:0 12px;"></span>
            <span class="tab-group-label" style="padding:0 8px; font-size:11px; font-weight:600;
                  text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted);">
                Catalog
            </span>
            <button class="tab-btn" data-tab="browse" onclick="switchTab('browse')">
                Browse
            </button>
            <button class="tab-btn" data-tab="domains" onclick="switchTab('domains')">
                Domains
                <span class="tab-badge" id="domainsBadge" style="display:none;"></span>
            </button>
            <div style="flex:1;"></div>
            <button class="btn"
                    onclick="openCreateMemoryItemModal()"
                    style="margin-left:auto;">+ New Item</button>
            <button class="btn btn-mandate"
                    onclick="openCreateMemoryDomainModal('', null)"
                    style="margin-left:8px;">+ New Memory Domain</button>
        </div>

        <!-- Review Queue Tab -->
        <div id="tab-review" class="tab-content active">
            <div class="batch-bar">
                <label>
                    <input type="checkbox" id="selectAllReview" onchange="toggleSelectAll('review')">
                    Select all
                </label>
                <span class="selected-count" id="selectedCountReview"></span>
                <div class="batch-actions">
                    <button class="btn btn-approve" id="batchApproveBtn" disabled onclick="batchAction('approve')">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <polyline points="20 6 9 17 4 12"/>
                        </svg>
                        Approve Selected
                    </button>
                    <button class="btn btn-reject" id="batchRejectBtn" disabled onclick="batchAction('reject')">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="18" y1="6" x2="6" y2="18"/>
                            <line x1="6" y1="6" x2="18" y2="18"/>
                        </svg>
                        Reject Selected
                    </button>
                    <!-- Bulk-edit affordances (issue #62) -->
                    <button class="btn" id="batchMoveCategoryBtn" disabled onclick="openBulkEditModal('category')">Move to category…</button>
                    <button class="btn" id="batchMoveDomainBtn" disabled onclick="openBulkEditModal('domain')">Move to domain…</button>
                    <button class="btn" id="batchAddTagBtn" disabled onclick="openBulkEditModal('add_tag')">Add tag…</button>
                    <button class="btn" id="batchRemoveTagBtn" disabled onclick="openBulkEditModal('remove_tag')">Remove tag…</button>
                    <button class="btn" id="batchSetAudienceBtn" disabled onclick="openBulkEditModal('audience')">Set audience…</button>
                </div>
            </div>
            <div id="reviewList" class="knowledge-list">
                <div class="loading">Loading pending items...</div>
            </div>
            <div id="reviewPagination" class="pagination"></div>
        </div>

        <!-- All Items Tab -->
        <div id="tab-all" class="tab-content">
            <!-- Bulk-edit batch bar (issue #129) — mirrors Review tab's bar but
                 scoped to All Items selection state and without the Approve /
                 Reject actions (those stay in Review). The same JS plumbing
                 (`getSelectedIds('all')`, `updateSelectionCount('all')`,
                 `openBulkEditModal(...)` reading `currentTab`) already exists. -->
            <div class="batch-bar">
                <label>
                    <input type="checkbox" id="selectAllAll" onchange="toggleSelectAll('all')">
                    Select all
                </label>
                <span class="selected-count" id="selectedCountAll"></span>
                <div class="batch-actions">
                    <button class="btn" id="batchMoveCategoryBtnAll" disabled onclick="openBulkEditModal('category')">Move to category…</button>
                    <button class="btn" id="batchMoveDomainBtnAll" disabled onclick="openBulkEditModal('domain')">Move to domain…</button>
                    <button class="btn" id="batchAddTagBtnAll" disabled onclick="openBulkEditModal('add_tag')">Add tag…</button>
                    <button class="btn" id="batchRemoveTagBtnAll" disabled onclick="openBulkEditModal('remove_tag')">Remove tag…</button>
                    <button class="btn" id="batchSetAudienceBtnAll" disabled onclick="openBulkEditModal('audience')">Set audience…</button>
                </div>
            </div>
            <div class="filter-bar">
                <label for="statusFilter">Status:</label>
                <select class="filter-select" id="statusFilter" onchange="loadAllItems(1)">
                    <option value="">All</option>
                    <option value="pending">Pending</option>
                    <option value="approved">Approved</option>
                    <option value="__required__">Required</option>
                    <option value="rejected">Rejected</option>
                    <option value="revoked">Revoked</option>
                </select>
                <label for="sourceTypeFilter" style="margin-left: var(--space-4);">Source:</label>
                <select class="filter-select" id="sourceTypeFilter" onchange="loadAllItems(1)">
                    <option value="">All sources</option>
                    <option value="user_verification">Verified facts (from sessions)</option>
                    <option value="claude_local_md">CLAUDE.local.md</option>
                </select>
                {# Domain filter — closes the "domains never visible in admin
                   queue" E2E gap. Options are hydrated by loadDomainsFilterOptions(). #}
                <label for="domainFilter" style="margin-left: var(--space-4);">Domain:</label>
                <select class="filter-select" id="domainFilter" onchange="loadAllItems(1)">
                    <option value="">All domains</option>
                </select>
            </div>
            <div id="allList" class="knowledge-list">
                <div class="loading">Loading items...</div>
            </div>
            <div id="allPagination" class="pagination"></div>
        </div>

        <!-- Contradictions Tab -->
        <div id="tab-contradictions" class="tab-content">
            <div id="contradictionsList" class="knowledge-list">
                {% if contradictions %}
                {% for c in contradictions %}
                <div class="contradiction-card" style="border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-5); margin-bottom: var(--space-4); background: var(--surface);">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3);">
                        <div>
                            <span style="font-weight: var(--font-semibold); color: #dc2626;">Contradiction Detected</span>
                            {% if c.severity == 'hard' %}
                            <span style="display: inline-block; padding: 2px 8px; background: #fee2e2; color: #991b1b; border-radius: 999px; font-size: 11px; margin-left: 8px;">Hard</span>
                            {% elif c.severity == 'soft' %}
                            <span style="display: inline-block; padding: 2px 8px; background: #fef9c3; color: #854d0e; border-radius: 999px; font-size: 11px; margin-left: 8px;">Soft</span>
                            {% endif %}
                        </div>
                        <span style="font-size: var(--text-xs); color: var(--text-secondary);">{{ (c.detected_at|string)[:10] if c.detected_at else '' }}</span>
                    </div>
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4);">
                        <div style="padding: var(--space-4); background: #fef2f2; border-radius: var(--radius-lg); border: 1px solid #fecaca;">
                            <div style="font-weight: var(--font-semibold); margin-bottom: var(--space-2);">Item A</div>
                            <div style="font-weight: var(--font-medium);">{{ c.item_a.title if c.item_a else 'Unknown' }}</div>
                            <div style="font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-1);">{{ c.item_a.content[:200] if c.item_a else '' }}</div>
                            {% if c.item_a and c.item_a.domain %}<div style="margin-top: var(--space-2);"><span style="display: inline-block; padding: 2px 8px; background: #e8f0fe; color: #1a73e8; border-radius: 999px; font-size: 11px;">{{ c.item_a.domain|title }}</span></div>{% endif %}
                        </div>
                        <div style="padding: var(--space-4); background: #eff6ff; border-radius: var(--radius-lg); border: 1px solid #bfdbfe;">
                            <div style="font-weight: var(--font-semibold); margin-bottom: var(--space-2);">Item B</div>
                            <div style="font-weight: var(--font-medium);">{{ c.item_b.title if c.item_b else 'Unknown' }}</div>
                            <div style="font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-1);">{{ c.item_b.content[:200] if c.item_b else '' }}</div>
                            {% if c.item_b and c.item_b.domain %}<div style="margin-top: var(--space-2);"><span style="display: inline-block; padding: 2px 8px; background: #e8f0fe; color: #1a73e8; border-radius: 999px; font-size: 11px;">{{ c.item_b.domain|title }}</span></div>{% endif %}
                        </div>
                    </div>
                    <div style="padding: var(--space-3); background: var(--bg-secondary, #f9fafb); border-radius: var(--radius-md); margin-bottom: var(--space-3); font-size: var(--text-sm);">
                        <strong>Analysis:</strong> {{ c.explanation }}
                    </div>
                    {% if c.suggested_resolution %}
                    <div style="padding: var(--space-3); background: #f0fdf4; border-radius: var(--radius-md); margin-bottom: var(--space-3); font-size: var(--text-sm);">
                        <strong>Suggested:</strong> {{ c.suggested_resolution }}
                    </div>
                    {% endif %}
                    <div style="display: flex; gap: var(--space-2);">
                        <button class="btn btn-approve" onclick="resolveContradiction('{{ c.id }}', 'kept_a')" style="font-size: var(--text-xs);">Keep Item A</button>
                        <button class="btn btn-approve" onclick="resolveContradiction('{{ c.id }}', 'kept_b')" style="font-size: var(--text-xs);">Keep Item B</button>
                        <button class="btn" onclick="resolveContradiction('{{ c.id }}', 'merged')" style="font-size: var(--text-xs); background: var(--border-light); color: var(--text-primary);">Merge</button>
                        <button class="btn" onclick="resolveContradiction('{{ c.id }}', 'both_valid')" style="font-size: var(--text-xs); background: var(--border-light); color: var(--text-primary);">Both Valid</button>
                    </div>
                </div>
                {% endfor %}
                {% else %}
                <div class="empty-state">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width: 48px; height: 48px; margin-bottom: 12px;">
                        <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <p>No contradictions detected.</p>
                    <p style="font-size: var(--text-sm);">Contradictions are flagged when new items conflict with existing knowledge.</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Duplicate Candidates Tab (issue #62) -->
        <div id="tab-duplicates" class="tab-content">
            <div id="duplicatesList" class="knowledge-list">
                <div class="loading">Loading duplicate candidates...</div>
            </div>
        </div>

        <!-- Browse Tab (issue #62) — group items by axis + chip filters. -->
        <div id="tab-browse" class="tab-content">
            <div class="filter-bar" style="flex-wrap: wrap; gap: var(--space-3);">
                <label for="treeAxis">Group by:</label>
                <select class="filter-select" id="treeAxis" onchange="loadBrowseTree()">
                    <option value="domain">Domain</option>
                    <option value="category">Category</option>
                    <option value="tag">Tag</option>
                    <option value="audience">Audience</option>
                </select>
                <label for="treeStatus" style="margin-left: var(--space-3);">Status:</label>
                <select class="filter-select" id="treeStatus" onchange="loadBrowseTree()">
                    <option value="">Any</option>
                    <option value="pending">Pending</option>
                    <option value="approved">Approved</option>
                    <option value="__required__">Required</option>
                    <option value="rejected">Rejected</option>
                    <option value="revoked">Revoked</option>
                </select>
                <label for="treeSourceType" style="margin-left: var(--space-3);">Source:</label>
                <select class="filter-select" id="treeSourceType" onchange="loadBrowseTree()">
                    <option value="">Any</option>
                    <option value="user_verification">Verified</option>
                    <option value="claude_local_md">CLAUDE.local.md</option>
                </select>
                <label style="margin-left: var(--space-3);">
                    <input type="checkbox" id="treeHasDuplicate" onchange="loadBrowseTree()">
                    Has duplicate hint
                </label>
                <label style="margin-left: var(--space-3);">
                    <input type="text" id="treeQuery" placeholder="Search…" oninput="onTreeQueryInput()" style="padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md);">
                </label>
            </div>
            <div id="browseTree">
                <div class="loading">Loading tree…</div>
            </div>
        </div>

        <!-- Bulk-edit modal (issue #62) — shared by Move-to/Set-tag actions. -->
        <div id="bulkEditModal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:2000;">
            <div style="background: var(--surface); max-width: 480px; margin: 80px auto; padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--border);">
                <h3 id="bulkEditTitle" style="margin-bottom: var(--space-3);">Bulk edit</h3>
                <div id="bulkEditBody"></div>
                <div style="display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-4);">
                    <button class="btn" onclick="closeBulkEditModal()">Cancel</button>
                    <button class="btn btn-mandate" onclick="submitBulkEdit()">Apply</button>
                </div>
            </div>
        </div>

        <!-- Single-item edit modal — surfaces PATCH /api/memory/admin/{id}.
             #126 added the endpoint + bulk batch bar but no per-item Edit
             affordance, so admins had no UI path for "fix one item's
             category / domain / audience / tags / title / content" without
             dropping to the CLI. -->
        <div id="editItemModal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:2000;">
            <div style="background: var(--surface); max-width: 640px; margin: 60px auto; padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--border); max-height: 80vh; overflow-y: auto;">
                <h3 style="margin-bottom: var(--space-3);">Edit item</h3>
                <div id="editItemBody" style="display: flex; flex-direction: column; gap: var(--space-3);">
                    <label style="display: flex; flex-direction: column; gap: 4px;">
                        <span style="font-size: 12px; color: var(--text-muted);">Title</span>
                        <input id="editItemTitle" type="text" style="padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text);">
                    </label>
                    <label style="display: flex; flex-direction: column; gap: 4px;">
                        <span style="font-size: 12px; color: var(--text-muted);">Content</span>
                        <textarea id="editItemContent" rows="6" style="padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-family: inherit; resize: vertical;"></textarea>
                    </label>
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);">
                        <label style="display: flex; flex-direction: column; gap: 4px;">
                            <span style="font-size: 12px; color: var(--text-muted);">Category</span>
                            {# A <select> dropdown (clicks reliably across all
                               browsers; <datalist> didn't — Firefox/Safari
                               wouldn't open the suggestion list on the
                               typeahead arrow click). The "+ Add new
                               category…" pseudo-option reveals a sibling
                               input so admins can still introduce a fresh
                               slug without leaving the modal. #}
                            <select id="editItemCategoryPick" onchange="onCategoryPickChange(this.value)" style="padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text);">
                                <option value="">(unset)</option>
                                {% for c in edit_categories %}<option value="{{ c }}">{{ c }}</option>{% endfor %}
                                <option value="__NEW__">+ Add new category…</option>
                            </select>
                            <input id="editItemCategoryNew" type="text" placeholder="new category slug" style="display: none; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text);">
                        </label>
                        <label style="display: flex; flex-direction: column; gap: 4px;">
                            <span style="font-size: 12px; color: var(--text-muted);">Domains</span>
                            {# Multi-select chip-input — items can sit in N
                               memory domains via the knowledge_item_domains
                               junction. The legacy hidden single-domain
                               <select> was removed: chip-input is now the
                               only write path, and the PATCH endpoint
                               accepts ``domain_ids`` (list). #}
                            <div class="chip-input"
                                 data-source-url="/api/memory/domains"
                                 data-allow-create="true"
                                 data-name="domain_ids"
                                 data-placeholder="Type to search or create…"
                                 data-chip-input="memory_domain"></div>
                        </label>
                        <label style="display: flex; flex-direction: column; gap: 4px;">
                            <span style="font-size: 12px; color: var(--text-muted);">Audience</span>
                            {# Audience is a closed enum: `(unset)` / `all` /
                               `group:<name>` per RBAC group. The free-text
                               input let admins typo `gourp:eng` and silently
                               hide an item from everyone; a `<select>` rules
                               that out. Groups come from the same source the
                               mandate-form picker uses. #}
                            <select id="editItemAudience" style="padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text);">
                                <option value="">(unset)</option>
                                <option value="all">all (every authenticated user)</option>
                                {% for g in groups %}<option value="group:{{ g.name }}">group:{{ g.name }} ({{ g.members_count }} member{{ 's' if g.members_count != 1 else '' }})</option>{% endfor %}
                            </select>
                        </label>
                        {# Tag widget with INLINE typeahead — focus the input or
                           start typing and the dropdown right below the pill
                           row lists matching existing tags. Click a match or
                           ↑/↓ + Enter to add as pill; type a new value and
                           Enter to add a brand-new tag. Backspace on empty
                           input removes the last pill. The widget container
                           is position:relative so the suggestion box pops
                           directly under the pill row. #}
                        <label style="display: flex; flex-direction: column; gap: 4px; grid-column: 1 / -1; position: relative;">
                            <span style="font-size: 12px; color: var(--text-muted);">Tags <span style="color: var(--text-muted); font-weight: 400;">— pills below (× to remove). Focus to browse existing, type to filter, Enter to add new.</span></span>
                            <div id="editItemTagsWidget" class="tag-input-widget" onclick="if(event.target===this) document.getElementById('editItemTagsInput').focus()">
                                {# Pills inserted by tagWidgetAdd() at runtime.
                                   The input stays last in DOM order so new
                                   pills land before it. #}
                                <input id="editItemTagsInput" type="text"
                                       placeholder="type to filter existing tags or add new…"
                                       oninput="onTagInputType()"
                                       onfocus="onTagInputType()"
                                       onkeydown="onTagInputKeydown(event)"
                                       onblur="setTimeout(hideTagSuggestions, 150)"
                                       autocomplete="off">
                            </div>
                            <div id="editItemTagSuggestions" class="tag-suggestions" hidden></div>
                        </label>
                    </div>
                </div>
                <div style="display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-4);">
                    <button class="btn" onclick="closeEditItemModal()">Cancel</button>
                    <button class="btn btn-mandate" onclick="submitEditItem()">Save</button>
                </div>
            </div>
        </div>

        <!-- Domains Tab — admin-side CRUD of memory_domains. The user-facing
             /corporate-memory page consumes the same rows; this is where
             they're created/edited/deleted. The "+ New Memory Domain" CTA
             lives in the tab strip header (top right) — not duplicated here. -->
        <div id="tab-domains" class="tab-content">
            <p style="margin:0 0 12px; color:var(--text-secondary); font-size:13px;">
                Memory domains bundle related items (playbooks, runbooks, shared context) so analysts can opt-in to a coherent body of knowledge.
            </p>
            <div id="domainsList">
                <div class="loading">Loading domains…</div>
            </div>
        </div>

        <!-- Audit Log Tab -->
        <div id="tab-audit" class="tab-content">
            <div class="filter-bar">
                <label for="auditActionFilter">Action:</label>
                <select class="filter-select" id="auditActionFilter" onchange="loadAuditLog(1)">
                    <option value="">All Actions</option>
                    <option value="approve">Approved</option>
                    <option value="reject">Rejected</option>
                    <option value="mandate">Mandated</option>
                    <option value="revoke">Revoked</option>
                    <option value="edit">Edited (legacy)</option>
                    <option value="update_item">Updated (PATCH)</option>
                    <option value="bulk_update">Bulk-updated</option>
                    <option value="resolve_duplicate">Duplicate resolved</option>
                </select>
            </div>
            <div id="auditContent">
                <div class="loading">Loading audit log...</div>
            </div>
            <div id="auditPagination" class="pagination"></div>
        </div>
    </div>

    <!-- Toast notification -->
    <div id="toast" class="toast"></div>

    <!-- ═══════════════ Edit Memory Domain modal ═══════════════
         Mirrors the Create modal but PUTs to /api/admin/memory-domains/{id}.
         Slug is shown read-only (it's the stable identifier referenced by
         /memory/d/<slug>, knowledge_item_domains rows, and resource_grants —
         renaming would orphan all of those). -->
    <div id="editMemoryDomainModal"
         style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:2050;">
      <div style="background: var(--surface); max-width: 520px; margin: 80px auto;
                  padding: var(--space-5); border-radius: var(--radius-lg);
                  border: 1px solid var(--border);">
        <h3 style="margin-bottom: var(--space-3);">Edit Memory Domain</h3>
        <input type="hidden" id="emd-id">
        <div style="display:flex; flex-direction:column; gap:var(--space-3);">
          <label style="display:flex; flex-direction:column; gap:4px;">
            <span style="font-size:12px; color:var(--text-muted);">Name</span>
            <input id="emd-name" type="text"
                   style="padding:6px; border:1px solid var(--border);
                          border-radius:var(--radius-sm);
                          background:var(--bg); color:var(--text);">
          </label>
          <label style="display:flex; flex-direction:column; gap:4px;">
            <span style="font-size:12px; color:var(--text-muted);">Slug</span>
            <input id="emd-slug" type="text" disabled
                   style="padding:6px; border:1px solid var(--border);
                          border-radius:var(--radius-sm); opacity:0.6;
                          background:var(--bg); color:var(--text);">
            <span style="font-size:11px; color:var(--text-secondary);">
              Slug is permanent — used in URLs, grants, and item junctions.
            </span>
          </label>
          <label style="display:flex; flex-direction:column; gap:4px;">
            <span style="font-size:12px; color:var(--text-muted);">
              Description <span style="color:var(--text-secondary);">(optional)</span>
            </span>
            <textarea id="emd-desc" rows="2"
                      style="padding:6px; border:1px solid var(--border);
                             border-radius:var(--radius-sm);
                             background:var(--bg); color:var(--text);
                             font-family:inherit; resize:vertical;"></textarea>
          </label>
          <div style="display:flex; gap:var(--space-3);">
            <label style="flex:1; display:flex; flex-direction:column; gap:4px;">
              <span style="font-size:12px; color:var(--text-muted);">Icon</span>
              <input id="emd-icon" type="text" maxlength="4"
                     style="padding:6px; border:1px solid var(--border);
                            border-radius:var(--radius-sm);
                            background:var(--bg); color:var(--text);">
            </label>
            <label style="flex:1; display:flex; flex-direction:column; gap:4px;">
              <span style="font-size:12px; color:var(--text-muted);">Color</span>
              <div class="cf-palette-row" data-target="emd-color"></div>
              <input id="emd-color" type="color"
                     style="padding:2px; border:1px solid var(--border);
                            border-radius:var(--radius-sm);
                            background:var(--bg); height:32px; cursor:pointer;">
            </label>
          </div>
          {# v51 — lifecycle status (no per-domain category; the domain
             itself IS the classification). #}
          <label style="display:flex; flex-direction:column; gap:4px;">
            <span style="font-size:12px; color:var(--text-muted);">Status</span>
            <select id="emd-status"
                    style="padding:6px; border:1px solid var(--border);
                           border-radius:var(--radius-sm);
                           background:var(--bg); color:var(--text); height:38px;">
              <option value="prod">Prod — ready for analyst use</option>
              <option value="poc">POC — try-before-you-buy</option>
              <option value="coming-soon">Coming soon</option>
              <option value="draft">Draft — admin-only</option>
            </select>
          </label>

          {# Inline Group Access matrix — mirror of the Data Package
             Edit modal. Lazy-load on first <details> open; pre-filled
             from existing resource_grants for this domain. Diff on
             save (POST + DELETE /api/admin/grants). #}
          <details id="emd-rbac-details"
                   style="border:1px solid var(--border); border-radius:8px; padding:8px 12px;">
            <summary style="cursor:pointer; font-weight:600; font-size:13px; user-select:none;">
              Group access
              <span style="color:var(--text-secondary); font-weight:normal; font-size:12px;">— mark required / available per group</span>
            </summary>
            <p style="margin:8px 0; color:var(--text-secondary); font-size:12px;">
              <em>required</em> auto-installs the domain into the group's
              stack; <em>available</em> shows it in their Browse;
              <em>(no grant)</em> hides it. Changes apply when you click
              <strong>Save</strong>.
            </p>
            <div id="emd-rbac-rows"
                 style="display:flex; flex-direction:column; gap:6px; max-height:30vh; overflow-y:auto;">
              <div class="loading" style="padding:6px; color:var(--text-secondary); font-size:12px;">
                Click to load groups…
              </div>
            </div>
          </details>
        </div>
        <div style="display:flex; gap:var(--space-2); justify-content:flex-end;
                    margin-top:var(--space-4);">
          <button class="btn" onclick="closeEditMemoryDomainModal()">Cancel</button>
          <button class="btn btn-mandate" id="emd-submit-btn"
                  onclick="submitEditMemoryDomain()">Save</button>
        </div>
      </div>
    </div>

    <!-- ═══════════════ Create Memory Domain modal (Task 8.10b) ═══════════════
         Fired from the chip-input's `chip-create` event in the item-edit
         modal (the Domains field is a chip-input with
         `data-chip-input="memory_domain"`). The handler below opens this
         modal pre-filled with the typed name, POSTs to
         /api/admin/memory-domains, and adds the freshly-created chip back
         into the chip-input host via `.addChip()`.

         Two-step flow per spec Section 7.4: after the entity is created,
         a second mini-modal (Create-Memory-Domain RBAC step) renders a
         per-group requirement matrix so the admin can grant
         available|required tiers without leaving the page. The Skip
         link short-circuits back to the chip-input. -->
    <div id="createMemoryDomainModal"
         style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:2050;">
      <div style="background: var(--surface); max-width: 520px; margin: 80px auto;
                  padding: var(--space-5); border-radius: var(--radius-lg);
                  border: 1px solid var(--border);">
        <h3 style="margin-bottom: var(--space-3);">Create Memory Domain</h3>
        <div style="display:flex; flex-direction:column; gap:var(--space-3);">
          <label style="display:flex; flex-direction:column; gap:4px;">
            <span style="font-size:12px; color:var(--text-muted);">Name</span>
            <input id="cmd-name" type="text" placeholder="Engineering"
                   style="padding:6px; border:1px solid var(--border);
                          border-radius:var(--radius-sm);
                          background:var(--bg); color:var(--text);">
          </label>
          <label style="display:flex; flex-direction:column; gap:4px;">
            <span style="font-size:12px; color:var(--text-muted);">Slug</span>
            <input id="cmd-slug" type="text" placeholder="engineering"
                   style="padding:6px; border:1px solid var(--border);
                          border-radius:var(--radius-sm);
                          background:var(--bg); color:var(--text);">
            <span style="font-size:11px; color:var(--text-secondary);">
              URL-safe identifier; auto-derived from Name.
            </span>
          </label>
          <label style="display:flex; flex-direction:column; gap:4px;">
            <span style="font-size:12px; color:var(--text-muted);">
              Description <span style="color:var(--text-secondary);">(optional)</span>
            </span>
            <textarea id="cmd-desc" rows="2"
                      style="padding:6px; border:1px solid var(--border);
                             border-radius:var(--radius-sm);
                             background:var(--bg); color:var(--text);
                             font-family:inherit; resize:vertical;"></textarea>
          </label>
          <div style="display:flex; gap:var(--space-3);">
            <label style="flex:1; display:flex; flex-direction:column; gap:4px;">
              <span style="font-size:12px; color:var(--text-muted);">Icon</span>
              <input id="cmd-icon" type="text" value="🎯" maxlength="4"
                     style="padding:6px; border:1px solid var(--border);
                            border-radius:var(--radius-sm);
                            background:var(--bg); color:var(--text);">
            </label>
            <label style="flex:1; display:flex; flex-direction:column; gap:4px;">
              <span style="font-size:12px; color:var(--text-muted);">Color</span>
              {# v51 palette swatches + free-form picker fallback. Same
                 vendor-neutral palette as the Data Package modals. #}
              <div class="cf-palette-row" data-target="cmd-color"></div>
              <input id="cmd-color" type="color" value="#e0f2fe"
                     style="padding:2px; border:1px solid var(--border);
                            border-radius:var(--radius-sm);
                            background:var(--bg); height:32px; cursor:pointer;">
            </label>
          </div>
          {# v51 — lifecycle status for memory domains. Same enum as
             data_packages (prod/poc/coming-soon/draft). No category here:
             the domain itself classifies its items. #}
          <label style="display:flex; flex-direction:column; gap:4px;">
            <span style="font-size:12px; color:var(--text-muted);">Status</span>
            <select id="cmd-status"
                    style="padding:6px; border:1px solid var(--border);
                           border-radius:var(--radius-sm);
                           background:var(--bg); color:var(--text); height:38px;">
              <option value="prod" selected>Prod — ready for analyst use</option>
              <option value="poc">POC — try-before-you-buy</option>
              <option value="coming-soon">Coming soon</option>
              <option value="draft">Draft — admin-only</option>
            </select>
          </label>
          {# Cover image upload (v50) — mirrors the Data Package modal.
             When set, the /memory card renders <img> instead of letter
             initials. PNG/JPEG/GIF/WebP, 5 MiB cap server-side. #}
          <label style="display:flex; flex-direction:column; gap:4px;">
            <span style="font-size:12px; color:var(--text-muted);">
              Cover image <span style="color:var(--text-secondary);">(optional)</span>
            </span>
            <div style="display:flex; gap:12px; align-items:center;">
              <div id="cmd-cover-preview"
                   style="width:120px; height:72px; border-radius:8px;
                          border:1px solid var(--border); background:#f1f5f9;
                          display:flex; align-items:center; justify-content:center;
                          font-size:12px; color:var(--text-secondary); overflow:hidden;">
                No image
              </div>
              <div style="flex:1;">
                <input id="cmd-cover-file" type="file"
                       accept="image/png,image/jpeg,image/gif,image/webp"
                       onchange="onCoverFilePickedCmd(this)">
                <input id="cmd-cover-url" type="hidden" value="">
                <div style="font-size:11px; color:var(--text-secondary); margin-top:4px;">
                  PNG / JPEG / GIF / WebP, max 5 MiB. Uploads on Save.
                </div>
              </div>
            </div>
          </label>

          {# Inline RBAC matrix — replaces the modal-on-modal step-2 that
             popped up after Create succeeded. Mirrors the inline Group
             Access section in admin_tables.html's Data Package modal. #}
          <details id="cmd-rbac-details"
                   style="border:1px solid var(--border); border-radius:8px; padding:8px 12px;">
            <summary style="cursor:pointer; font-weight:600; font-size:13px; user-select:none;">
              Group access
              <span style="color:var(--text-secondary); font-weight:normal; font-size:12px;">(optional)</span>
            </summary>
            <p style="margin:8px 0; color:var(--text-secondary); font-size:12px;">
              Grant per-group access tiers — <em>available</em> shows the
              domain in the group's Browse; <em>required</em> auto-installs
              it into the group's stack on next pull. Leave blank to manage
              later from <a href="/admin/access">Resource access</a>.
            </p>
            <div id="cmd-rbac-rows"
                 style="display:flex; flex-direction:column; gap:6px; max-height:30vh; overflow-y:auto;">
              <div class="loading" style="padding:6px; color:var(--text-secondary); font-size:12px;">
                Click to load groups…
              </div>
            </div>
          </details>
        </div>
        <div style="display:flex; gap:var(--space-2); justify-content:flex-end;
                    margin-top:var(--space-4);">
          <button class="btn" onclick="closeCreateMemoryDomainModal()">Cancel</button>
          <button class="btn btn-mandate" id="cmd-submit-btn"
                  onclick="submitCreateMemoryDomain()">Create &amp; assign</button>
        </div>
      </div>
    </div>

    {# (removed) Memory Domain RBAC step-2 modal — merged inline into
       #createMemoryDomainModal as a collapsible Group Access section. #}

    <!-- ═══════════════ Create Memory Item modal (admin-seed) ═══════════════
         Admins land here from the tab-strip "+ New Item" button.
         POSTs to /api/memory (status='pending'), optionally PATCHes
         multi-domain, then POSTs /admin/approve so the item lands
         directly in Approved without a separate review pass. -->
    <div id="createMemoryItemModal"
         style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:2050;">
      <div style="background: var(--surface); max-width: 600px; margin: 60px auto;
                  padding: var(--space-5); border-radius: var(--radius-lg);
                  border: 1px solid var(--border); max-height: 85vh; overflow-y: auto;">
        <h3 style="margin-bottom: var(--space-3);">New Memory Item</h3>
        <p style="margin-bottom: var(--space-3); color: var(--text-secondary); font-size: 13px;">
          Seeded by admin — bypasses the Pending review queue and lands as Approved.
        </p>
        <div style="display:flex; flex-direction:column; gap:var(--space-3);">
          <label style="display:flex; flex-direction:column; gap:4px;">
            <span style="font-size:12px; color:var(--text-muted);">Title</span>
            <input id="cmi-title" type="text" placeholder="Always quote table names in DuckDB"
                   style="padding:6px; border:1px solid var(--border);
                          border-radius:var(--radius-sm);
                          background:var(--bg); color:var(--text);">
          </label>
          <label style="display:flex; flex-direction:column; gap:4px;">
            <span style="font-size:12px; color:var(--text-muted);">Content</span>
            <textarea id="cmi-content" rows="5" placeholder="Body of the rule / playbook / decision…"
                      style="padding:6px; border:1px solid var(--border);
                             border-radius:var(--radius-sm);
                             background:var(--bg); color:var(--text);
                             font-family:inherit; resize:vertical;"></textarea>
          </label>
          <div style="display:flex; gap:var(--space-3);">
            <label style="flex:1; display:flex; flex-direction:column; gap:4px;">
              <span style="font-size:12px; color:var(--text-muted);">Category</span>
              <select id="cmi-category"
                      style="padding:6px; border:1px solid var(--border);
                             border-radius:var(--radius-sm);
                             background:var(--bg); color:var(--text);">
                {% for c in edit_categories %}<option value="{{ c }}">{{ c }}</option>{% endfor %}
              </select>
            </label>
            <label style="flex:1; display:flex; flex-direction:column; gap:4px;">
              <span style="font-size:12px; color:var(--text-muted);">Audience</span>
              <select id="cmi-audience"
                      style="padding:6px; border:1px solid var(--border);
                             border-radius:var(--radius-sm);
                             background:var(--bg); color:var(--text);">
                <option value="">(unset)</option>
                <option value="all">all</option>
                {% for g in groups %}<option value="group:{{ g.name }}">group:{{ g.name }}</option>{% endfor %}
              </select>
            </label>
          </div>
          <label style="display:flex; flex-direction:column; gap:4px;">
            <span style="font-size:12px; color:var(--text-muted);">Domains</span>
            <div class="chip-input"
                 id="cmi-domains-chips"
                 data-source-url="/api/memory/domains"
                 data-allow-create="true"
                 data-name="cmi_domain_ids"
                 data-placeholder="Type to search or create…"
                 data-chip-input="memory_domain"></div>
            <span style="font-size:11px; color:var(--text-secondary);">
              Items can sit in multiple domains. Leave empty to file as
              uncategorised; you can re-assign later.
            </span>
          </label>
          <label style="display:flex; align-items:center; gap:6px;">
            <input id="cmi-required" type="checkbox">
            <span style="font-size:12px;">Mark as Required (auto-installed for granted groups)</span>
          </label>
        </div>
        <div style="display:flex; gap:var(--space-2); justify-content:flex-end;
                    margin-top:var(--space-4);">
          <button class="btn" onclick="closeCreateMemoryItemModal()">Cancel</button>
          <button class="btn btn-mandate" id="cmi-submit-btn"
                  onclick="submitCreateMemoryItem()">Create</button>
        </div>
      </div>
    </div>

    <script>
      // Track which chip-input host triggered the create flow so we can
      // append the new chip back into it on success.
      let _cmdHost = null;
      // Domain id from step 1, carried into step 2 for /api/admin/grants.
      let _cmdNewDomainId = null;
      let _cmdNewDomainName = null;

      // v50: cover image upload. Streamlined single-modal-scoped variant
      // of the helper in admin_tables.html — this template doesn't host
      // an Edit modal yet, so we don't need the prefix-based generic.
      async function onCoverFilePickedCmd(input) {
        const file = input.files && input.files[0];
        if (!file) return;
        const preview = document.getElementById('cmd-cover-preview');
        const urlEl = document.getElementById('cmd-cover-url');
        if (file.size > 5 * 1024 * 1024) {
          alert('Image is too large (max 5 MiB).');
          input.value = '';
          return;
        }
        preview.innerHTML = '<span style="font-size:11px;">Uploading…</span>';
        try {
          const fd = new FormData();
          fd.append('file', file);
          const r = await fetch('/api/admin/uploads/cover-image', {
            method: 'POST', credentials: 'same-origin', body: fd,
          });
          if (!r.ok) {
            const detail = await r.json().catch(function() { return {}; });
            alert('Upload failed: ' + (detail.detail || r.statusText));
            preview.textContent = 'No image';
            input.value = '';
            return;
          }
          const body = await r.json();
          urlEl.value = body.url;
          preview.innerHTML = '';
          var img = document.createElement('img');
          img.src = body.url; img.alt = '';
          img.style.cssText = 'width:100%;height:100%;object-fit:cover;display:block;';
          preview.appendChild(img);
        } catch (e) {
          alert('Network error: ' + e.message);
          preview.textContent = 'No image';
          input.value = '';
        }
      }

      // ── Create Memory Item (admin-seed) ────────────────────────────
      // Three-step chain on submit: POST /api/memory creates pending →
      // optional PATCH writes domain_ids junction → POST /admin/approve
      // promotes to Approved. Failures at any step surface in toast +
      // leave whatever already landed (admin can retry / clean up via
      // the review queue).
      function openCreateMemoryItemModal() {
        document.getElementById('cmi-title').value = '';
        document.getElementById('cmi-content').value = '';
        document.getElementById('cmi-audience').value = '';
        document.getElementById('cmi-required').checked = false;
        // Reset chip-input domain selection between opens.
        const chipHost = document.getElementById('cmi-domains-chips');
        if (chipHost && chipHost.clearChips) chipHost.clearChips();
        document.getElementById('createMemoryItemModal').style.display = 'block';
      }
      function closeCreateMemoryItemModal() {
        document.getElementById('createMemoryItemModal').style.display = 'none';
      }
      async function submitCreateMemoryItem() {
        const btn = document.getElementById('cmi-submit-btn');
        const title = document.getElementById('cmi-title').value.trim();
        const content = document.getElementById('cmi-content').value.trim();
        if (!title || !content) {
          alert('Title and Content are required.');
          return;
        }
        btn.disabled = true;
        try {
          const category = document.getElementById('cmi-category').value;
          const audience = document.getElementById('cmi-audience').value || null;
          const isRequired = document.getElementById('cmi-required').checked;

          // Read selected domain ids from the chip-input hidden field.
          let domainIds = [];
          const domainHidden = document.querySelector('input[name="cmi_domain_ids"]');
          if (domainHidden) {
            try { domainIds = JSON.parse(domainHidden.value || '[]'); }
            catch (_) { domainIds = []; }
          }

          // Step 1 — create item. Pass the first domain slug via the
          // legacy `domain` kwarg so the item lands with at least one
          // junction row even if Step 2 (multi-domain PATCH) is a no-op.
          let firstSlug = null;
          if (domainIds.length) {
            // Resolve id → slug from /api/memory/domains to send `domain`
            // on create. Single round-trip is fine — the dropdown's
            // already in cache from the chip-input.
            const dr = await fetch('/api/memory/domains', { credentials: 'same-origin' });
            if (dr.ok) {
              const ddata = await dr.json();
              const domList = (ddata && ddata.domains) || [];
              const match = domList.find(d => d.id === domainIds[0]);
              if (match) firstSlug = match.slug;
            }
          }
          const createBody = { title, content, category };
          if (firstSlug) createBody.domain_slug = firstSlug;
          const cr = await fetch('/api/memory', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'same-origin',
            body: JSON.stringify(createBody),
          });
          if (!cr.ok) {
            const detail = await cr.json().catch(() => ({}));
            alert('Create failed: ' + (detail.detail || cr.statusText));
            return;
          }
          const created = await cr.json();
          const itemId = created.id;

          // Step 2 — if multi-domain or audience set, PATCH.
          const patchBody = {};
          if (domainIds.length > 1) patchBody.domain_ids = domainIds;
          if (audience) patchBody.audience = audience;
          if (Object.keys(patchBody).length) {
            const pr = await fetch('/api/memory/admin/' + encodeURIComponent(itemId), {
              method: 'PATCH',
              headers: { 'Content-Type': 'application/json' },
              credentials: 'same-origin',
              body: JSON.stringify(patchBody),
            });
            if (!pr.ok) {
              const detail = await pr.json().catch(() => ({}));
              showToast('Item created but metadata patch failed: ' + (detail.detail || pr.statusText), 'error');
            }
          }

          // Step 3 — auto-approve (or mandate if Required checked).
          const finalAction = isRequired ? 'mandate' : 'approve';
          const actionBody = { item_ids: [itemId], action: finalAction };
          const ar = await fetch('/api/memory/admin/batch', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'same-origin',
            body: JSON.stringify(actionBody),
          });
          if (!ar.ok) {
            const detail = await ar.json().catch(() => ({}));
            showToast('Item created but ' + finalAction + ' failed: ' + (detail.detail || ar.statusText), 'error');
          } else {
            showToast('Item "' + title.substring(0, 40) + '" created + ' + finalAction + 'd', 'success');
          }

          closeCreateMemoryItemModal();
          refreshCurrentTab();
        } catch (e) {
          alert('Network error: ' + e.message);
        } finally {
          btn.disabled = false;
        }
      }

      function openCreateMemoryDomainModal(typed, host) {
        _cmdHost = host;
        document.getElementById('cmd-name').value = typed || '';
        document.getElementById('cmd-slug').value =
          (typed || '').toLowerCase()
            .replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
        document.getElementById('cmd-desc').value = '';
        document.getElementById('cmd-icon').value = '🎯';
        document.getElementById('cmd-color').value = '#e0f2fe';
        // Reset cover image state on every open.
        var coverUrl = document.getElementById('cmd-cover-url');
        var coverFile = document.getElementById('cmd-cover-file');
        var preview = document.getElementById('cmd-cover-preview');
        if (coverUrl) coverUrl.value = '';
        if (coverFile) coverFile.value = '';
        if (preview) preview.innerHTML = 'No image';
        document.getElementById('createMemoryDomainModal').style.display = 'block';
      }
      function closeCreateMemoryDomainModal() {
        _cmdHost = null;
        // Re-collapse + invalidate the lazy-loaded RBAC matrix so the
        // next "+ New Memory Domain" starts clean (mirrors the Data
        // Package modal pattern).
        const det = document.getElementById('cmd-rbac-details');
        if (det) det.open = false;
        _cmdRbacLoaded = false;
        document.getElementById('createMemoryDomainModal').style.display = 'none';
      }
      async function submitCreateMemoryDomain() {
        const btn = document.getElementById('cmd-submit-btn');
        btn.disabled = true;
        try {
          // v50: cover_image_url is populated by onCoverFilePickedCmd when
          // the admin selects + uploads a file; send null if unset.
          var cmdCoverUrl = document.getElementById('cmd-cover-url').value;
          const payload = {
            name: document.getElementById('cmd-name').value.trim(),
            slug: document.getElementById('cmd-slug').value.trim(),
            description: document.getElementById('cmd-desc').value.trim() || null,
            icon: document.getElementById('cmd-icon').value.trim() || null,
            color: document.getElementById('cmd-color').value.trim() || null,
            cover_image_url: cmdCoverUrl || null,
            // v51 — lifecycle status (no category for memory domains).
            status: document.getElementById('cmd-status').value || 'prod',
          };
          if (!payload.name || !payload.slug) {
            alert('Name and slug are required.');
            btn.disabled = false;
            return;
          }
          const r = await fetch('/api/admin/memory-domains', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'same-origin',
            body: JSON.stringify(payload),
          });
          if (!r.ok) {
            const detail = await r.json().catch(() => ({}));
            alert('Failed: ' + (detail.detail || r.statusText));
            btn.disabled = false;
            return;
          }
          const body = await r.json();
          const newDomainId = body.id;
          if (_cmdHost && _cmdHost.addChip) {
            _cmdHost.addChip({ id: newDomainId, name: payload.name });
          }

          // Inline grants — same pattern as the Data Package modal.
          const grantFailures = await _submitCmdGrantsInline(newDomainId);

          closeCreateMemoryDomainModal();
          if (typeof loadDomainsTab === 'function') {
            try { loadDomainsTab(); } catch (_) {}
          }
          if (typeof showToast === 'function') {
            const baseMsg = 'Memory Domain "' + payload.name + '" created';
            if (grantFailures > 0) {
              showToast(baseMsg + ' — ' + grantFailures + ' grant(s) failed', 'error');
            } else {
              showToast(baseMsg, 'success');
            }
          }
        } catch (e) {
          alert('Network error: ' + e.message);
          btn.disabled = false;
        } finally {
          btn.disabled = false;
        }
      }

      // Lazy-load groups into the inline RBAC matrix the first time the
      // <details> opens. Mirrors _cdpHydrateRbacMatrix in admin_tables.html.
      let _cmdRbacLoaded = false;
      async function _cmdHydrateRbacMatrix() {
        if (_cmdRbacLoaded) return;
        const rowsEl = document.getElementById('cmd-rbac-rows');
        rowsEl.innerHTML = '<div class="loading" style="padding:6px; color:var(--text-secondary); font-size:12px;">Loading groups…</div>';
        try {
          const r = await fetch('/api/admin/groups', { credentials: 'same-origin' });
          if (!r.ok) throw new Error('HTTP ' + r.status);
          const body = await r.json();
          const groups = Array.isArray(body) ? body : (body.groups || []);
          if (!groups.length) {
            rowsEl.innerHTML = '<div style="padding:8px; color:var(--text-secondary); font-size:12px;">No groups defined yet. Create groups in <a href="/admin/access">Resource access</a> first.</div>';
            return;
          }
          rowsEl.innerHTML = groups.map(g => {
            const gid = String(g.id || g.name || '');
            const gname = String(g.name || gid);
            return (
              '<div data-group-id="' + gid + '" '
              + 'style="display:flex; gap:8px; align-items:center; '
              +        'padding:6px; border:1px solid var(--border); border-radius:6px;">'
              + '<span style="flex:1;">' + gname + '</span>'
              + '<select class="cmd-rbac-req" style="padding:4px; border:1px solid var(--border); border-radius:4px;">'
              + '<option value="">(no grant)</option>'
              + '<option value="available">available</option>'
              + '<option value="required">required</option>'
              + '</select>'
              + '</div>'
            );
          }).join('');
          _cmdRbacLoaded = true;
        } catch (e) {
          rowsEl.innerHTML = '<div style="padding:8px; color:var(--error); font-size:12px;">Failed to load groups: ' + e.message + '</div>';
        }
      }
      document.addEventListener('toggle', (e) => {
        if (e.target && e.target.id === 'cmd-rbac-details' && e.target.open) {
          _cmdHydrateRbacMatrix();
        }
      }, true);

      async function _submitCmdGrantsInline(domainId) {
        const rows = document.querySelectorAll('#cmd-rbac-rows [data-group-id]');
        const calls = [];
        rows.forEach(row => {
          const gid = row.getAttribute('data-group-id');
          const sel = row.querySelector('.cmd-rbac-req');
          const req = sel && sel.value;
          if (!req) return;
          calls.push(fetch('/api/admin/grants', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'same-origin',
            body: JSON.stringify({
              group_id: gid,
              resource_type: 'memory_domain',
              resource_id: domainId,
              requirement: req,
            }),
          }));
        });
        if (!calls.length) return 0;
        const results = await Promise.allSettled(calls);
        return results.filter(
          r => r.status === 'rejected' || (r.value && !r.value.ok)
        ).length;
      }

      // ── (removed) step-2 RBAC modal — stubs kept for callers ──
      // NOTE: `_cmdNewDomainId` / `_cmdNewDomainName` are declared earlier
      // in this file (the live state for the inlined step-1 flow). Re-
      // declaring here with `let` raised SyntaxError on parse → the whole
      // script block failed → `openCreateMemoryDomainModal` etc. never
      // landed in global scope → the "+ New Memory Domain" button + every
      // other inline `onclick=` admin handler defined in this block were
      // silently dead. Removed the duplicate declarations.
      function openCreateMemoryDomainRbacModal() { /* deprecated — inlined */ }
      function skipCreateMemoryDomainRbac() {
        if (typeof loadDomainsTab === 'function') {
          try { loadDomainsTab(); } catch (_) {}
        }
      }
      function submitCreateMemoryDomainRbac() { /* deprecated — inlined */ }

      // Hook: chip-input fires `chip-create` when the user clicks the
      // "+ Create new" tail row in the dropdown. We only react when the
      // host is the Memory Domain chip-input (data-chip-input="memory_domain")
      // so the same listener can coexist with the Data Package one on
      // pages that mount both.
      document.addEventListener('chip-create', (e) => {
        const host = e.detail && e.detail.host;
        if (host && host.dataset.chipInput === 'memory_domain') {
          openCreateMemoryDomainModal(e.detail.typed, host);
        }
      });
    </script>
{% endblock %}

{% block scripts %}
<script>
    // Configuration passed from server
    const GROUPS = {{ groups | tojson }};
    const GOVERNANCE_MODE = {{ governance_mode | tojson }};
    // Tag autocomplete pool — populated from existing knowledge_items.tags
    // (deduplicated, sorted server-side in router::corporate_memory_admin).
    // Consumed by the tag-input widget on the edit modal.
    const EXISTING_TAGS = {{ edit_tags | tojson }};

    // State
    let currentTab = 'review';
    let reviewPage = 1;
    let allPage = 1;
    let auditPage = 1;
    let focusedIndex = -1;
    let keyboardActive = false;

    // ─────────────────────────────────────────────────────────────
    // Helpers
    // ─────────────────────────────────────────────────────────────

    function parseJsonField(val) {
        if (Array.isArray(val)) return val;
        if (typeof val === 'string') {
            try { return JSON.parse(val); } catch { return []; }
        }
        return [];
    }

    // ─────────────────────────────────────────────────────────────
    // Tab management
    // ─────────────────────────────────────────────────────────────

    function switchTab(tab) {
        currentTab = tab;
        focusedIndex = -1;

        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        document.querySelector(`.tab-btn[data-tab="${tab}"]`).classList.add('active');

        document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
        document.getElementById(`tab-${tab}`).classList.add('active');

        // Load data for tab if needed
        if (tab === 'review') loadReviewQueue(reviewPage);
        else if (tab === 'all') loadAllItems(allPage);
        else if (tab === 'audit') loadAuditLog(auditPage);
        else if (tab === 'duplicates') loadDuplicateCandidates();
        else if (tab === 'browse') loadBrowseTree();
        else if (tab === 'domains') loadDomainsTab();
    }

    // ─────────────────────────────────────────────────────────────
    // Domains tab — admin CRUD on memory_domains. The user-facing
    // /corporate-memory page reads from the same /api/admin/memory-domains
    // endpoint; this tab is where admins create, edit, or delete the
    // domain rows. Was the missing piece behind "Manage domains →" link
    // and the "I can't see/edit the domains anywhere" E2E feedback.
    // ─────────────────────────────────────────────────────────────

    async function loadDomainsTab() {
        const wrap = document.getElementById('domainsList');
        if (!wrap) return;
        wrap.innerHTML = '<div class="loading">Loading domains…</div>';
        try {
            const r = await fetch('/api/admin/memory-domains', { credentials: 'same-origin' });
            if (!r.ok) throw new Error('HTTP ' + r.status);
            const rows = await r.json();
            const badge = document.getElementById('domainsBadge');
            if (badge) {
                badge.textContent = String(rows.length);
                badge.style.display = rows.length ? '' : 'none';
            }
            if (!rows.length) {
                wrap.innerHTML = '<div class="empty-state" style="padding:24px; text-align:center;">'
                    + '<p><strong>No memory domains yet.</strong></p>'
                    + '<p style="font-size:13px; color:var(--text-secondary);">Domains bundle related memory items so analysts can opt-in as a group.</p>'
                    + '<button class="btn btn-mandate" onclick="openCreateMemoryDomainModal(\'\', null)">+ New Memory Domain</button>'
                    + '</div>';
                return;
            }
            wrap.innerHTML = rows.map(d => {
                const color = d.color || '#e0f2fe';
                const icon = d.icon || '🎯';
                const name = escapeHtml(d.name || d.slug || '');
                const slug = escapeHtml(d.slug || '');
                const desc = escapeHtml(d.description || '');
                return ''
                    + '<div data-domain-id="' + escapeHtml(d.id) + '" '
                    +      'style="display:flex; gap:12px; align-items:center; padding:12px 16px; '
                    +             'background:var(--surface); border:1px solid var(--border); '
                    +             'border-radius:10px; margin-bottom:8px;">'
                    + '  <span style="display:inline-flex; align-items:center; justify-content:center; '
                    +                'width:36px; height:36px; border-radius:8px; flex-shrink:0; '
                    +                'background:' + escapeHtml(color) + ';">' + escapeHtml(icon) + '</span>'
                    + '  <div style="flex:1; min-width:0;">'
                    + '    <div style="font-weight:600; font-size:14px;">' + name
                    +      ' <code style="font-size:11px; color:var(--text-secondary); margin-left:6px;">' + slug + '</code></div>'
                    + (desc
                        ? '    <div style="font-size:12px; color:var(--text-secondary); margin-top:2px;">' + desc + '</div>'
                        : '')
                    + '  </div>'
                    + '  <a class="btn" href="/memory/d/' + slug + '" target="_blank" style="font-size:12px;">Open →</a>'
                    + '  <button class="btn" onclick="openEditMemoryDomainModal(\'' + esc(d.id) + '\')" style="font-size:12px;">Edit</button>'
                    + '  <button class="btn btn-reject" onclick="deleteMemoryDomain(\'' + esc(d.id) + '\', \'' + name.replace(/\'/g, "\\'") + '\')" style="font-size:12px;">Delete</button>'
                    + '</div>';
            }).join('');
        } catch (e) {
            wrap.innerHTML = '<div class="empty-state" style="color:var(--error);">Failed to load domains: ' + e.message + '</div>';
        }
    }

    async function deleteMemoryDomain(id, name) {
        // v54: soft delete + Undo toast. confirm() removed — the toast's
        // 10s Undo button is the recovery affordance.
        try {
            const r = await fetch('/api/admin/memory-domains/' + encodeURIComponent(id),
                { method: 'DELETE', credentials: 'same-origin' });
            if (!r.ok && r.status !== 204) {
                const detail = await r.json().catch(() => ({}));
                alert('Failed: ' + (detail.detail || r.statusText));
                return;
            }
            loadDomainsTab();
            if (typeof window.showUndoToast === 'function') {
                window.showUndoToast(
                    'Memory domain "' + name + '" deleted.',
                    '/api/admin/memory-domains/' + encodeURIComponent(id) + '/restore',
                    () => loadDomainsTab(),
                );
            }
        } catch (e) {
            alert('Network error: ' + e.message);
        }
    }

    async function openEditMemoryDomainModal(id) {
        // Fetch fresh so concurrent edits don't stomp each other.
        try {
            const r = await fetch('/api/admin/memory-domains/' + encodeURIComponent(id),
                { credentials: 'same-origin' });
            if (!r.ok) throw new Error('HTTP ' + r.status);
            const d = await r.json();
            document.getElementById('emd-id').value = d.id;
            document.getElementById('emd-name').value = d.name || '';
            document.getElementById('emd-slug').value = d.slug || '';
            document.getElementById('emd-desc').value = d.description || '';
            document.getElementById('emd-icon').value = d.icon || '🎯';
            document.getElementById('emd-color').value = d.color || '#e0f2fe';
            // v51 — pre-fill status from loaded domain.
            document.getElementById('emd-status').value = d.status || 'prod';
            document.getElementById('editMemoryDomainModal').style.display = 'block';
        } catch (e) {
            alert('Failed to load domain: ' + e.message);
        }
    }

    function closeEditMemoryDomainModal() {
        // Reset RBAC matrix state alongside the modal close — mirror
        // of admin_tables.html's Edit DP close behavior.
        const det = document.getElementById('emd-rbac-details');
        if (det) det.open = false;
        _emdRbacLoaded = false;
        _emdRbacOriginal = {};
        document.getElementById('editMemoryDomainModal').style.display = 'none';
    }

    // ── Edit Memory Domain RBAC matrix (lazy hydrate + diff on save) ──
    // Mirror of admin_tables.html _edpHydrateRbacMatrix / _edpDiffApplyGrants.
    // resource_type is 'memory_domain' instead of 'data_package'; otherwise
    // the wire shape is identical.
    let _emdRbacLoaded = false;
    let _emdRbacOriginal = {};
    async function _emdHydrateRbacMatrix() {
        if (_emdRbacLoaded) return;
        const domainId = document.getElementById('emd-id').value;
        const rowsEl = document.getElementById('emd-rbac-rows');
        rowsEl.innerHTML = '<div class="loading" style="padding:6px; color:var(--text-secondary); font-size:12px;">Loading groups + grants…</div>';
        try {
            const [gResp, grResp] = await Promise.all([
                fetch('/api/admin/groups', { credentials: 'same-origin' }),
                fetch('/api/admin/grants?resource_type=memory_domain',
                      { credentials: 'same-origin' }),
            ]);
            if (!gResp.ok) throw new Error('groups HTTP ' + gResp.status);
            if (!grResp.ok) throw new Error('grants HTTP ' + grResp.status);
            const gBody = await gResp.json();
            const groups = Array.isArray(gBody) ? gBody : (gBody.groups || []);
            const grants = await grResp.json();
            const current = {};
            (grants || []).forEach(g => {
                if (g.resource_id !== domainId) return;
                current[g.group_id] = g.requirement;
            });
            _emdRbacOriginal = Object.assign({}, current);

            if (!groups.length) {
                rowsEl.innerHTML = '<div style="padding:8px; color:var(--text-secondary); font-size:12px;">No groups defined yet. Create groups in <a href="/admin/access">Resource access</a> first.</div>';
                return;
            }
            rowsEl.innerHTML = groups.map(g => {
                const gid = String(g.id || g.name || '');
                const gname = String(g.name || gid);
                const cur = current[gid] || '';
                const opt = (v, label) =>
                    '<option value="' + v + '"' + (cur === v ? ' selected' : '') + '>' + label + '</option>';
                return (
                    '<div data-group-id="' + gid + '" '
                    + 'style="display:flex; gap:8px; align-items:center; '
                    +        'padding:6px; border:1px solid var(--border); border-radius:6px;">'
                    + '<span style="flex:1;">' + gname + '</span>'
                    + '<select class="emd-rbac-req" style="padding:4px; border:1px solid var(--border); border-radius:4px;">'
                    +   opt('', '(no grant)')
                    +   opt('available', 'available')
                    +   opt('required', 'required')
                    + '</select>'
                    + '</div>'
                );
            }).join('');
            _emdRbacLoaded = true;
        } catch (e) {
            rowsEl.innerHTML = '<div style="padding:8px; color:var(--error); font-size:12px;">Failed to load: ' + e.message + '</div>';
        }
    }
    document.addEventListener('toggle', (e) => {
        if (e.target && e.target.id === 'emd-rbac-details' && e.target.open) {
            _emdHydrateRbacMatrix();
        }
    }, true);

    async function _emdDiffApplyGrants(domainId) {
        if (!_emdRbacLoaded) return 0;
        const rows = document.querySelectorAll('#emd-rbac-rows [data-group-id]');
        const wantDelete = [];
        const wantWrite = [];
        rows.forEach(row => {
            const gid = row.getAttribute('data-group-id');
            const sel = row.querySelector('.emd-rbac-req');
            const cur = (sel && sel.value) || '';
            const orig = _emdRbacOriginal[gid] || '';
            if (cur === orig) return;
            if (!cur) wantDelete.push(gid);
            else {
                if (orig) wantDelete.push(gid);
                wantWrite.push({ group_id: gid, requirement: cur });
            }
        });
        if (!wantDelete.length && !wantWrite.length) return 0;

        let grantIdByGroup = {};
        if (wantDelete.length) {
            const lr = await fetch('/api/admin/grants?resource_type=memory_domain',
                                   { credentials: 'same-origin' });
            if (lr.ok) {
                const arr = await lr.json();
                arr.forEach(g => {
                    if (g.resource_id !== domainId) return;
                    grantIdByGroup[g.group_id] = g.id;
                });
            }
        }
        // Sequential DELETE → POST. ``resource_grants`` has UNIQUE on
        // (group_id, resource_type, resource_id); running both in
        // parallel via ``Promise.allSettled`` raced — POST landing
        // first triggered the unique check and left the stale row in
        // place. Awaiting deletes first keeps the slot empty.
        const deleteResults = await Promise.allSettled(
            wantDelete
                .map(gid => grantIdByGroup[gid])
                .filter(Boolean)
                .map(gid => fetch('/api/admin/grants/' + encodeURIComponent(gid),
                                  { method: 'DELETE', credentials: 'same-origin' }))
        );
        const writeResults = await Promise.allSettled(
            wantWrite.map(w => fetch('/api/admin/grants', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                credentials: 'same-origin',
                body: JSON.stringify({
                    group_id: w.group_id,
                    resource_type: 'memory_domain',
                    resource_id: domainId,
                    requirement: w.requirement,
                }),
            }))
        );
        const results = deleteResults.concat(writeResults);
        return results.filter(
            r => r.status === 'rejected' || (r.value && !r.value.ok)
        ).length;
    }

    async function submitEditMemoryDomain() {
        const btn = document.getElementById('emd-submit-btn');
        btn.disabled = true;
        try {
            const id = document.getElementById('emd-id').value;
            const payload = {
                name: document.getElementById('emd-name').value.trim() || null,
                description: document.getElementById('emd-desc').value.trim() || null,
                icon: document.getElementById('emd-icon').value.trim() || null,
                color: document.getElementById('emd-color').value.trim() || null,
                status: document.getElementById('emd-status').value || 'prod',
            };
            const r = await fetch('/api/admin/memory-domains/' + encodeURIComponent(id), {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                credentials: 'same-origin',
                body: JSON.stringify(payload),
            });
            if (!r.ok) {
                const detail = await r.json().catch(() => ({}));
                let msg = detail.detail || r.statusText;
                // Pydantic validation errors come back as a list of {loc, msg}.
                if (Array.isArray(msg)) msg = msg.map(x => x.msg).join('; ');
                alert('Failed: ' + msg);
                return;
            }
            // Apply any RBAC matrix changes after the metadata PUT.
            const rbacFails = await _emdDiffApplyGrants(id);
            if (rbacFails > 0) {
                showToast(rbacFails + ' group access change(s) failed', 'error');
            }
            closeEditMemoryDomainModal();
            showToast('Domain updated', 'success');
            loadDomainsTab();
        } catch (e) {
            alert('Network error: ' + e.message);
        } finally {
            btn.disabled = false;
        }
    }

    // ─────────────────────────────────────────────────────────────
    // Duplicate Candidates (issue #62)
    // ─────────────────────────────────────────────────────────────

    async function loadDuplicateCandidates() {
        const list = document.getElementById('duplicatesList');
        try {
            const params = new URLSearchParams({ resolved: 'false', _t: Date.now() });
            const resp = await fetch(`/api/memory/admin/duplicate-candidates?${params}`);
            const data = await resp.json();
            renderDuplicateCandidates(data, list);
        } catch (e) {
            console.error('Failed to load duplicate candidates:', e);
            list.innerHTML = '<div class="empty-state"><p>Error loading duplicate candidates.</p></div>';
        }
    }

    function renderDuplicateCandidates(data, list) {
        const relations = data.relations || [];
        if (relations.length === 0) {
            list.innerHTML = `
                <div class="empty-state">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width: 48px; height: 48px;">
                        <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <p>No unresolved duplicate candidates.</p>
                    <p style="font-size: var(--text-sm);">Duplicate hints are recorded automatically when the verification detector finds two same-domain items sharing entities.</p>
                </div>`;
            return;
        }
        list.innerHTML = relations.map((r, idx) => {
            const a = r.item_a || {};
            const b = r.item_b || {};
            const score = r.score != null ? r.score.toFixed(2) : '—';
            const aTitle = a.hidden ? `<em>(hidden — personal)</em>` : escapeHtml(a.title || '?');
            const bTitle = b.hidden ? `<em>(hidden — personal)</em>` : escapeHtml(b.title || '?');
            const aContent = a.hidden ? '' : escapeHtml((a.content || '').substring(0, 200));
            const bContent = b.hidden ? '' : escapeHtml((b.content || '').substring(0, 200));
            return `
                <div class="contradiction-card" data-key="${escapeHtml(r.item_a_id)}::${escapeHtml(r.item_b_id)}" style="border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-5); margin-bottom: var(--space-4); background: var(--surface);">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3);">
                        <div>
                            <span style="font-weight: var(--font-semibold); color: var(--primary);">Likely Duplicate</span>
                            <span style="display: inline-block; padding: 2px 8px; background: var(--primary-light); color: var(--primary); border-radius: 999px; font-size: 11px; margin-left: 8px;">Jaccard ${score}</span>
                        </div>
                        <span style="font-size: var(--text-xs); color: var(--text-secondary);">${escapeHtml((r.created_at || '').toString().substring(0, 10))}</span>
                    </div>
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4);">
                        <div style="padding: var(--space-4); background: var(--background); border-radius: var(--radius-lg); border: 1px solid var(--border);">
                            <div style="font-weight: var(--font-semibold); margin-bottom: var(--space-2);">Item A</div>
                            <div style="font-weight: var(--font-medium);">${aTitle}</div>
                            <div style="font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-1);">${aContent}</div>
                            <div style="font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-2);">id=<code>${escapeHtml(r.item_a_id)}</code></div>
                        </div>
                        <div style="padding: var(--space-4); background: var(--background); border-radius: var(--radius-lg); border: 1px solid var(--border);">
                            <div style="font-weight: var(--font-semibold); margin-bottom: var(--space-2);">Item B</div>
                            <div style="font-weight: var(--font-medium);">${bTitle}</div>
                            <div style="font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-1);">${bContent}</div>
                            <div style="font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-2);">id=<code>${escapeHtml(r.item_b_id)}</code></div>
                        </div>
                    </div>
                    <div style="display: flex; gap: var(--space-2);">
                        <button class="btn btn-mandate" onclick="resolveDuplicate('${esc(r.item_a_id)}', '${esc(r.item_b_id)}', 'duplicate')">Mark as duplicate</button>
                        <button class="btn btn-approve" onclick="resolveDuplicate('${esc(r.item_a_id)}', '${esc(r.item_b_id)}', 'different')">Different</button>
                        <button class="btn btn-revoke" onclick="resolveDuplicate('${esc(r.item_a_id)}', '${esc(r.item_b_id)}', 'dismissed')">Dismiss</button>
                    </div>
                </div>`;
        }).join('');
    }

    async function resolveDuplicate(aId, bId, resolution) {
        try {
            const params = new URLSearchParams({ item_a_id: aId, item_b_id: bId });
            const resp = await fetch(`/api/memory/admin/duplicate-candidates/resolve?${params}`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ resolution }),
            });
            if (resp.ok) {
                showToast(`Pair resolved as '${resolution}'`, 'success');
                // Optimistic UI: fade the row and decrement the badge.
                const sorted = [aId, bId].sort();
                const row = document.querySelector(`.contradiction-card[data-key="${sorted[0]}::${sorted[1]}"]`);
                if (row) {
                    row.style.transition = 'opacity 0.4s';
                    row.style.opacity = '0';
                    setTimeout(() => row.remove(), 400);
                }
                const badge = document.getElementById('duplicatesBadge');
                if (badge) {
                    const cur = parseInt(badge.textContent || '0', 10) || 0;
                    if (cur > 0) badge.textContent = cur - 1;
                    if (cur - 1 <= 0) badge.style.display = 'none';
                }
            } else {
                const data = await resp.json().catch(() => ({}));
                showToast(data.detail || 'Resolve failed', 'error');
            }
        } catch (e) {
            showToast('Network error: resolve failed', 'error');
        }
    }

    // ─────────────────────────────────────────────────────────────
    // Browse Tree (issue #62)
    // ─────────────────────────────────────────────────────────────

    let _treeQueryTimeout = null;
    function onTreeQueryInput() {
        clearTimeout(_treeQueryTimeout);
        _treeQueryTimeout = setTimeout(loadBrowseTree, 300);
    }

    async function loadBrowseTree() {
        const tree = document.getElementById('browseTree');
        const axis = document.getElementById('treeAxis').value;
        const status = document.getElementById('treeStatus').value;
        const sourceType = document.getElementById('treeSourceType').value;
        const hasDup = document.getElementById('treeHasDuplicate').checked;
        const q = (document.getElementById('treeQuery').value || '').trim();
        const params = new URLSearchParams({ axis, _t: Date.now() });
        // v55 design pass: the "Required" status option is a sentinel —
        // status is lifecycle-only post-v49, so the dropdown filter
        // routes the sentinel onto the orthogonal is_required boolean
        // instead of the status column (which never holds 'mandatory').
        if (status === '__required__') {
            params.append('is_required', 'true');
        } else if (status) {
            params.append('status_filter', status);
        }
        if (sourceType) params.append('source_type', sourceType);
        if (hasDup) params.append('has_duplicate', 'true');
        if (q) params.append('q', q);
        try {
            const resp = await fetch(`/api/memory/tree?${params}`);
            const data = await resp.json();
            renderBrowseTree(data, tree);
        } catch (e) {
            console.error('Failed to load browse tree:', e);
            tree.innerHTML = '<div class="empty-state"><p>Error loading tree.</p></div>';
        }
    }

    function renderBrowseTree(data, container) {
        if (!data.groups || data.groups.length === 0) {
            container.innerHTML = '<div class="empty-state"><p>No items match the current filters.</p></div>';
            return;
        }
        const stateKey = `cm_admin_tree_open_${data.axis}`;
        let openSet = new Set();
        try { openSet = new Set(JSON.parse(localStorage.getItem(stateKey) || '[]')); } catch {}
        container.innerHTML = data.groups.map(g => {
            const isOpen = openSet.has(g.key);
            return `
                <details ${isOpen ? 'open' : ''} data-key="${escapeHtml(g.key)}" onToggle="onAdminTreeToggle(this, '${escapeHtml(stateKey)}')" style="margin-bottom: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3);">
                    <summary style="cursor: pointer; font-weight: var(--font-semibold);">
                        ${escapeHtml(g.label)} <span style="color: var(--text-secondary); font-weight: normal;">(${g.count})</span>
                    </summary>
                    <div style="margin-top: var(--space-3);">${(g.items || []).map((it, idx) => renderItemCard(it, idx, 'browse')).join('')}</div>
                </details>`;
        }).join('');
    }

    function onAdminTreeToggle(detailsEl, stateKey) {
        const key = detailsEl.dataset.key;
        let s = new Set();
        try { s = new Set(JSON.parse(localStorage.getItem(stateKey) || '[]')); } catch {}
        if (detailsEl.open) s.add(key); else s.delete(key);
        try { localStorage.setItem(stateKey, JSON.stringify(Array.from(s))); } catch {}
    }

    // ─────────────────────────────────────────────────────────────
    // Bulk-edit modal (issue #62)
    // ─────────────────────────────────────────────────────────────

    let _bulkEditState = { mode: null, ids: [] };

    function openBulkEditModal(mode) {
        const ids = getSelectedIds(currentTab === 'review' ? 'review' : 'all');
        if (ids.length === 0) {
            showToast('Select at least one item first', 'error');
            return;
        }
        _bulkEditState = { mode, ids };
        const titleEl = document.getElementById('bulkEditTitle');
        const bodyEl = document.getElementById('bulkEditBody');
        // Bulk-edit pickers mirror the per-item edit modal — pick from
        // existing values; "+ Add new…" reveals a sibling text input for a
        // fresh slug. remove_tag is closed-set (only existing tags), so no
        // "+ Add new". The select markup is rendered by Jinja at page load
        // from edit_categories / edit_tags / groups (already passed into
        // the template ctx).
        const _selectStyle = 'width: 100%; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md);';
        const _newInputStyle = 'display:none; margin-top: var(--space-2); width: 100%; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md);';
        if (mode === 'category') {
            titleEl.textContent = `Move ${ids.length} item(s) to category…`;
            bodyEl.innerHTML = `
                <select id="bulkEditValue" onchange="onBulkPickChange(this.value)" style="${_selectStyle}">
                    <option value="">(unset)</option>
                    {% for c in edit_categories %}<option value="{{ c }}">{{ c }}</option>{% endfor %}
                    <option value="__NEW__">+ Add new category…</option>
                </select>
                <input id="bulkEditNewValue" type="text" placeholder="new category slug" style="${_newInputStyle}">`;
        } else if (mode === 'domain') {
            titleEl.textContent = `Move ${ids.length} item(s) to domain…`;
            bodyEl.innerHTML = `
                <select id="bulkEditValue" style="${_selectStyle}">
                    <option value="">(unset)</option>
                    <option value="finance">finance</option>
                    <option value="engineering">engineering</option>
                    <option value="product">product</option>
                    <option value="data">data</option>
                    <option value="operations">operations</option>
                    <option value="infrastructure">infrastructure</option>
                </select>`;
        } else if (mode === 'audience') {
            titleEl.textContent = `Set audience for ${ids.length} item(s)…`;
            bodyEl.innerHTML = `
                <select id="bulkEditValue" style="${_selectStyle}">
                    <option value="">(unset)</option>
                    <option value="all">all (every authenticated user)</option>
                    {% for g in groups %}<option value="group:{{ g.name }}">group:{{ g.name }} ({{ g.members_count }} member{{ 's' if g.members_count != 1 else '' }})</option>{% endfor %}
                </select>`;
        } else if (mode === 'add_tag') {
            titleEl.textContent = `Add tag to ${ids.length} item(s)…`;
            bodyEl.innerHTML = `
                <select id="bulkEditValue" onchange="onBulkPickChange(this.value)" style="${_selectStyle}">
                    <option value="">— pick existing or add new —</option>
                    {% for t in edit_tags %}<option value="{{ t }}">{{ t }}</option>{% endfor %}
                    <option value="__NEW__">+ Add new tag…</option>
                </select>
                <input id="bulkEditNewValue" type="text" placeholder="new tag" style="${_newInputStyle}">`;
        } else if (mode === 'remove_tag') {
            titleEl.textContent = `Remove tag from ${ids.length} item(s)…`;
            {% if edit_tags %}
            bodyEl.innerHTML = `
                <select id="bulkEditValue" style="${_selectStyle}">
                    <option value="">— pick tag to remove —</option>
                    {% for t in edit_tags %}<option value="{{ t }}">{{ t }}</option>{% endfor %}
                </select>`;
            {% else %}
            bodyEl.innerHTML = `<p style="color: var(--text-muted); font-size: 13px;">No tags exist yet to remove.</p>`;
            {% endif %}
        }
        document.getElementById('bulkEditModal').style.display = 'block';
    }

    // Shared handler for bulk-edit selects that include "+ Add new…":
    // reveals/hides the sibling text input for a fresh value.
    function onBulkPickChange(value) {
        const newInput = document.getElementById('bulkEditNewValue');
        if (!newInput) return;
        if (value === '__NEW__') {
            newInput.style.display = '';
            newInput.focus();
        } else {
            newInput.style.display = 'none';
            newInput.value = '';
        }
    }

    function closeBulkEditModal() {
        document.getElementById('bulkEditModal').style.display = 'none';
        _bulkEditState = { mode: null, ids: [] };
    }

    async function submitBulkEdit() {
        const { mode, ids } = _bulkEditState;
        if (!mode || ids.length === 0) return closeBulkEditModal();
        const valueEl = document.getElementById('bulkEditValue');
        if (!valueEl) return closeBulkEditModal();  // remove_tag with no tags → "No tags exist" placeholder, no input
        let value = (valueEl.value || '').trim();
        // "+ Add new…" route: read the sibling text input for the fresh slug.
        // Applies to category / add_tag modes (remove_tag and domain are
        // closed-set, audience is closed-set after the picker change).
        if (value === '__NEW__') {
            const newInput = document.getElementById('bulkEditNewValue');
            value = ((newInput && newInput.value) || '').trim();
        }
        // Domain allows the explicit "(unset)" option (empty string clears the field
        // — backend allows empty domain). Other modes still require a non-empty value.
        if (!value && mode !== 'domain') {
            showToast('Please enter a value', 'error');
            return;
        }
        const updates = {};
        if (mode === 'category') updates.category = value;
        else if (mode === 'domain') updates.domain = value;
        else if (mode === 'audience') updates.audience = value;
        else if (mode === 'add_tag') updates.tags_add = [value];
        else if (mode === 'remove_tag') updates.tags_remove = [value];
        try {
            const resp = await fetch('/api/memory/admin/bulk-update', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ item_ids: ids, updates }),
            });
            if (resp.ok) {
                const body = await resp.json();
                const okCount = (body.updated || []).length;
                const errCount = Object.keys(body.errors || {}).length + (body.not_found || []).length;
                showToast(`Updated ${okCount}, errors: ${errCount}`, errCount > 0 ? 'error' : 'success');
                closeBulkEditModal();
                refreshCurrentTab();
            } else {
                const data = await resp.json().catch(() => ({}));
                showToast(data.detail || 'Bulk update failed', 'error');
            }
        } catch (e) {
            showToast('Network error: bulk update failed', 'error');
        }
    }

    // ─────────────────────────────────────────────────────────────
    // Single-item edit (PATCH /api/memory/admin/{id})
    // Surfaces the per-item edit endpoint added in #126; previously the
    // only UI affordance was the bulk batch bar, which made "fix one
    // item" awkward. Pre-fills from `_itemsById` (populated during card
    // render) — no extra GET round-trip.
    // ─────────────────────────────────────────────────────────────

    let _editingItemId = null;

    function openEditItemModal(itemId) {
        const item = _itemsById.get(itemId);
        if (!item) {
            showToast('Item data unavailable — refresh and try again', 'error');
            return;
        }
        _editingItemId = itemId;
        document.getElementById('editItemTitle').value = item.title || '';
        document.getElementById('editItemContent').value = item.content || '';
        // Category: pick the existing option if it matches one in the
        // dropdown; otherwise dynamically add it as a one-off option so the
        // current value is visible (and selected) even if it's a one-off
        // slug that didn't exist when the page rendered.
        const catSel = document.getElementById('editItemCategoryPick');
        const catNewIn = document.getElementById('editItemCategoryNew');
        const curCat = item.category || '';
        const hasOpt = [...catSel.options].some(o => o.value === curCat);
        if (curCat && !hasOpt) {
            // Insert before the "+ Add new…" pseudo-option (always last).
            const newOpt = new Option(curCat, curCat);
            catSel.add(newOpt, catSel.options.length - 1);
        }
        catSel.value = curCat;
        catNewIn.style.display = 'none';
        catNewIn.value = '';
        // (legacy editItemDomain <select> removed — chip-input is the only
        //  domain control now; PATCH accepts domain_ids list.)
        document.getElementById('editItemAudience').value = item.audience || '';
        const tagsArr = parseJsonField(item.tags);
        tagWidgetInit(tagsArr);
        document.getElementById('editItemModal').style.display = 'block';
    }

    // ─── Tag-input widget helpers ───
    // The widget renders applied tags as pills before the typing <input>.
    // We treat the DOM as the source of truth (no separate state array) —
    // submitEditItem reads back via tagWidgetGetTags().
    function tagWidgetInit(tags) {
        const w = document.getElementById('editItemTagsWidget');
        // Wipe old pills (keep the trailing input).
        w.querySelectorAll('.tag-pill').forEach(p => p.remove());
        document.getElementById('editItemTagsInput').value = '';
        (tags || []).forEach(t => tagWidgetAdd(t));
    }
    function tagWidgetGetTags() {
        return Array.from(document.querySelectorAll('#editItemTagsWidget .tag-pill'))
            .map(p => p.dataset.tag);
    }
    function tagWidgetAdd(rawTag) {
        const tag = (rawTag || '').trim();
        if (!tag) return;
        if (tagWidgetGetTags().includes(tag)) return;  // dedupe
        const pill = document.createElement('span');
        pill.className = 'tag-pill';
        pill.dataset.tag = tag;
        pill.appendChild(document.createTextNode(tag + ' '));
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.setAttribute('aria-label', `Remove tag ${tag}`);
        btn.textContent = '×';
        btn.addEventListener('click', (e) => { e.stopPropagation(); pill.remove(); });
        pill.appendChild(btn);
        const input = document.getElementById('editItemTagsInput');
        input.parentNode.insertBefore(pill, input);
        input.value = '';
    }
    function onTagInputKeydown(e) {
        // Enter / ↓ / ↑ / Escape / Backspace handling. The typeahead dropdown
        // (#editItemTagSuggestions) drives selection state via the
        // .active class on a .tag-suggestion. Enter commits the highlighted
        // suggestion when one is active, otherwise commits the typed value
        // as a new pill (existing behavior). Arrows move the highlight.
        const list = document.getElementById('editItemTagSuggestions');
        const visible = list && !list.hidden;
        if (e.key === 'ArrowDown') {
            if (visible) { e.preventDefault(); moveTagSuggestion(1); }
            return;
        }
        if (e.key === 'ArrowUp') {
            if (visible) { e.preventDefault(); moveTagSuggestion(-1); }
            return;
        }
        if (e.key === 'Escape') {
            if (visible) { e.preventDefault(); hideTagSuggestions(); }
            return;
        }
        if (e.key === 'Enter' || e.key === ',') {
            e.preventDefault();
            const active = visible ? list.querySelector('.tag-suggestion.active') : null;
            if (active) {
                selectTagSuggestion(active.dataset.tag);
            } else {
                const v = e.target.value.replace(/,$/, '').trim();
                if (v) { tagWidgetAdd(v); hideTagSuggestions(); }
            }
            return;
        }
        if (e.key === 'Backspace' && !e.target.value) {
            const pills = document.querySelectorAll('#editItemTagsWidget .tag-pill');
            if (pills.length) pills[pills.length - 1].remove();
        }
    }

    // Re-render the typeahead dropdown based on the current input value.
    // Called on every keystroke (oninput) and on focus (so an empty focus
    // lists ALL existing tags — "browse" mode).
    function onTagInputType() {
        const input = document.getElementById('editItemTagsInput');
        const list = document.getElementById('editItemTagSuggestions');
        if (!input || !list) return;
        const q = (input.value || '').trim().toLowerCase();
        const applied = new Set(tagWidgetGetTags());
        // Filter pool: existing tags not yet applied, matching the query
        // (case-insensitive substring; "" matches everything).
        const pool = (typeof EXISTING_TAGS !== 'undefined' ? EXISTING_TAGS : [])
            .filter(t => !applied.has(t))
            .filter(t => !q || t.toLowerCase().includes(q));

        // Build HTML: matching existing tags first; if the typed value is
        // a fresh non-match (and non-empty, and not already a pill), offer
        // it as an explicit "+ Add new" option at the bottom.
        const exactMatch = q && pool.some(t => t.toLowerCase() === q);
        const isFreshNew = q && !exactMatch && !applied.has(q);

        if (pool.length === 0 && !isFreshNew) {
            list.innerHTML = '<div class="empty-hint">No tags match — keep typing and press Enter to add a new tag.</div>';
            list.hidden = false;
            return;
        }

        const parts = pool.map((t, idx) => {
            const safe = escapeHtml(t);
            return `<button type="button" class="tag-suggestion${idx === 0 ? ' active' : ''}" data-tag="${safe}" onmousedown="event.preventDefault(); selectTagSuggestion('${escapeAttr(t)}')">${safe}</button>`;
        });
        if (isFreshNew) {
            const safe = escapeHtml(q);
            parts.push(`<button type="button" class="tag-suggestion new-tag${pool.length === 0 ? ' active' : ''}" data-tag="${safe}" onmousedown="event.preventDefault(); selectTagSuggestion('${escapeAttr(q)}')">+ Add new tag: <strong>${safe}</strong><span class="hint">Enter</span></button>`);
        }
        list.innerHTML = parts.join('');
        list.hidden = false;
    }

    function moveTagSuggestion(delta) {
        const list = document.getElementById('editItemTagSuggestions');
        const items = Array.from(list.querySelectorAll('.tag-suggestion'));
        if (items.length === 0) return;
        let activeIdx = items.findIndex(b => b.classList.contains('active'));
        if (activeIdx < 0) activeIdx = 0;
        items[activeIdx].classList.remove('active');
        const newIdx = (activeIdx + delta + items.length) % items.length;
        items[newIdx].classList.add('active');
        items[newIdx].scrollIntoView({ block: 'nearest' });
    }

    function selectTagSuggestion(tag) {
        tagWidgetAdd(tag);
        const input = document.getElementById('editItemTagsInput');
        input.value = '';
        // Re-render to drop the newly-applied tag from the pool while the
        // input keeps focus — feels like a continuous picker.
        onTagInputType();
        input.focus();
    }

    function hideTagSuggestions() {
        const list = document.getElementById('editItemTagSuggestions');
        if (list) { list.hidden = true; list.innerHTML = ''; }
    }

    // Small helpers (avoids dependency on a single escape util shared
    // across the file). escapeHtml is already defined elsewhere; escapeAttr
    // is for single-quoted JS string contexts in inline onclick handlers.
    function escapeAttr(s) {
        return String(s).replace(/\\/g, '\\\\').replace(/'/g, "\\'");
    }

    // Category picker handler — toggles the "new slug" input when the
    // operator selects the "+ Add new category…" pseudo-option. Restores
    // it on any other selection so a mis-click recovers cleanly.
    function onCategoryPickChange(value) {
        const newInput = document.getElementById('editItemCategoryNew');
        if (value === '__NEW__') {
            newInput.style.display = '';
            newInput.focus();
        } else {
            newInput.style.display = 'none';
            newInput.value = '';
        }
    }

    function closeEditItemModal() {
        document.getElementById('editItemModal').style.display = 'none';
        _editingItemId = null;
    }

    // Click handler for the "+ tag" suggestion chips below the widget.
    // Forwards to the widget's add — keeps a single code path for additions.
    function appendEditTag(tag) {
        tagWidgetAdd(tag);
        document.getElementById('editItemTagsInput').focus();
    }

    async function submitEditItem() {
        if (!_editingItemId) return closeEditItemModal();
        const title = document.getElementById('editItemTitle').value.trim();
        if (!title) {
            showToast('Title is required', 'error');
            return;
        }
        // Convert empty strings to JSON null so the backend writes NULL,
        // not an empty string. The audience filter in
        // src/repositories/knowledge.py uses `audience IS NULL OR audience
        // = 'all' OR audience IN (...)`, so an empty-string audience would
        // silently make the item invisible to non-admin viewers (Devin
        // BUG_0001 on PR #141 5f649a4 review). Same NULL-preservation
        // applies to content / category / domain so unmodified fields
        // round-trip correctly. Title is required so we never send null.
        // Domain dropdown's "(unset)" option also funnels through this
        // empty-string → null path.
        const orNull = (s) => (s && s.trim() ? s.trim() : null);
        const content = document.getElementById('editItemContent').value || null;
        // Category: if "+ Add new" is selected, take the value from the
        // sibling text input; otherwise use the picked dropdown value.
        let categoryRaw = document.getElementById('editItemCategoryPick').value;
        if (categoryRaw === '__NEW__') {
            categoryRaw = document.getElementById('editItemCategoryNew').value;
        }
        const category = orNull(categoryRaw);
        // (legacy single `domain` field removed — chip-input drives
        //  domain_ids exclusively now; PATCH performs the junction replace.)
        const audience = orNull(document.getElementById('editItemAudience').value);
        // Tags read directly from the pill widget DOM. Any uncommitted text
        // still in the input (user typed but didn't press Enter) is salvaged
        // here so a click-Save without Enter doesn't quietly drop it.
        const tags = tagWidgetGetTags();
        const pending = (document.getElementById('editItemTagsInput').value || '').trim();
        if (pending && !tags.includes(pending)) tags.push(pending);

        // M:N domain membership lives in the chip-input — read its hidden
        // JSON input rather than re-querying the chip-input host. Falls
        // back to `null` (don't touch the junction) when the chip-input
        // isn't on the page.
        let domainIds = null;
        const domainHidden = document.querySelector('input[name="domain_ids"]');
        if (domainHidden) {
            try {
                domainIds = JSON.parse(domainHidden.value || '[]');
            } catch (_) {
                domainIds = [];
            }
        }

        const body = { title, content, category, audience, tags };
        if (domainIds !== null) {
            body.domain_ids = domainIds;
        }
        try {
            const resp = await fetch(`/api/memory/admin/${encodeURIComponent(_editingItemId)}`, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(body),
            });
            if (resp.ok) {
                showToast('Item updated', 'success');
                closeEditItemModal();
                refreshCurrentTab();
            } else {
                const data = await resp.json().catch(() => ({}));
                showToast(data.detail || `Update failed (HTTP ${resp.status})`, 'error');
            }
        } catch (e) {
            console.error('Edit failed:', e);
            showToast('Network error: edit failed', 'error');
        }
    }

    // ─────────────────────────────────────────────────────────────
    // Data loading
    // ─────────────────────────────────────────────────────────────

    async function loadReviewQueue(page) {
        reviewPage = page;
        const list = document.getElementById('reviewList');
        const pagination = document.getElementById('reviewPagination');

        try {
            const params = new URLSearchParams({page, _t: Date.now()});
            const resp = await fetch(`/api/memory/admin/pending?${params}`);
            const data = await resp.json();
            renderReviewItems(data, list, pagination);
            updateStats();
        } catch (e) {
            console.error('Failed to load review queue:', e);
            list.innerHTML = '<div class="empty-state"><p>Error loading pending items.</p></div>';
        }
    }

    async function loadAllItems(page) {
        allPage = page;
        const list = document.getElementById('allList');
        const pagination = document.getElementById('allPagination');
        const status = document.getElementById('statusFilter').value;
        const sourceType = document.getElementById('sourceTypeFilter').value;
        const domainEl = document.getElementById('domainFilter');
        const domain = domainEl ? domainEl.value : '';

        // Hydrate domain dropdown on first call.
        if (domainEl && !domainEl.dataset.hydrated) {
            domainEl.dataset.hydrated = '1';
            hydrateDomainFilterOptions();
        }

        try {
            const params = new URLSearchParams({page, _t: Date.now()});
            // v55 design pass: "Required" is a sentinel routed to the
            // orthogonal is_required boolean — see loadBrowseTree for
            // the same translation.
            if (status === '__required__') {
                params.append('is_required', 'true');
            } else if (status) {
                params.append('status_filter', status);
            }
            if (sourceType) {
                params.append('source_type', sourceType);
            }
            if (domain) {
                params.append('domain', domain);
            }
            const url = `/api/memory?${params}`;
            const data = await _apiMemoryCached(url);
            renderAllItems(data, list, pagination);
        } catch (e) {
            console.error('Failed to load all items:', e);
            list.innerHTML = '<div class="empty-state"><p>Error loading items.</p></div>';
        }
    }

    // v54 page-level cache for /api/memory list responses. Tabs in
    // /admin/corporate-memory re-trigger loadAllItems() on every switch;
    // without this, flicking between Review / All / Browse forced a
    // server round-trip each time even when the underlying data hadn't
    // changed. 30 s window — short enough that admin edits land fast
    // (most mutations call refreshCurrentTab via the explicit
    // _apiMemoryInvalidate() hook below).
    const _apiMemoryCache = new Map();   // url → { data, expiresAt }
    const _API_MEMORY_TTL_MS = 30000;
    async function _apiMemoryCached(url) {
        const now = Date.now();
        const hit = _apiMemoryCache.get(url);
        if (hit && hit.expiresAt > now) return hit.data;
        const resp = await fetch(url);
        const data = await resp.json();
        _apiMemoryCache.set(url, { data, expiresAt: now + _API_MEMORY_TTL_MS });
        return data;
    }
    // Called by edit / approve / reject / bulk-update handlers after
    // they mutate items, so the next list-fetch picks up the change
    // instead of serving stale cache.
    function _apiMemoryInvalidate() { _apiMemoryCache.clear(); }
    window._apiMemoryInvalidate = _apiMemoryInvalidate;

    async function hydrateDomainFilterOptions() {
        const sel = document.getElementById('domainFilter');
        if (!sel) return;
        try {
            const r = await fetch('/api/admin/memory-domains', { credentials: 'same-origin' });
            if (!r.ok) return;
            const rows = await r.json();
            const current = sel.value;
            sel.innerHTML = '<option value="">All domains</option>'
                + '<option value="(none)">(no domain)</option>'
                + rows.map(d =>
                    `<option value="${escapeHtml(d.slug)}">${escapeHtml(d.name || d.slug)}</option>`
                  ).join('');
            sel.value = current;
        } catch (_) {
            // Non-fatal — filter just stays with "All domains" only.
        }
    }

    // Map of item_id -> {title, status, source_type, content} for the audit log.
    // Lazily refreshed when the audit tab is opened so the table can show titles
    // instead of bare UUIDs and resolve item context inside expanded rows.
    let auditItemMap = {};

    async function refreshAuditItemMap() {
        try {
            const resp = await fetch(`/api/memory?per_page=500&_t=${Date.now()}`);
            const data = await resp.json();
            const map = {};
            for (const item of (data.items || [])) {
                map[item.id] = {
                    title: item.title || '',
                    status: item.status || '',
                    source_type: item.source_type || '',
                    content: item.content || '',
                };
            }
            auditItemMap = map;
        } catch (e) {
            console.error('Failed to refresh audit item map:', e);
        }
    }

    async function loadAuditLog(page) {
        auditPage = page;
        const content = document.getElementById('auditContent');
        const pagination = document.getElementById('auditPagination');
        const action = document.getElementById('auditActionFilter').value;

        try {
            await refreshAuditItemMap();
            const params = new URLSearchParams({page, per_page: 20, _t: Date.now()});
            if (action) params.append('action', action);
            const resp = await fetch(`/api/memory/admin/audit?${params}`);
            const data = await resp.json();
            renderAuditLog(data, content, pagination);
        } catch (e) {
            console.error('Failed to load audit log:', e);
            content.innerHTML = '<div class="empty-state"><p>Error loading audit log.</p></div>';
        }
    }

    function toggleAuditDetail(idx) {
        const row = document.querySelector(`tr.audit-row[data-idx="${idx}"]`);
        const detail = document.querySelector(`tr.audit-detail-row[data-idx="${idx}"]`);
        if (!row || !detail) return;
        const isOpen = row.classList.toggle('expanded');
        detail.style.display = isOpen ? '' : 'none';
    }

    async function updateStats() {
        try {
            const resp = await fetch(`/api/memory/stats?_t=${Date.now()}`);
            const data = await resp.json();
            const byStatus = data.by_status || {};
            document.getElementById('statPending').textContent = byStatus.pending || 0;
            document.getElementById('statApproved').textContent = byStatus.approved || 0;
            document.getElementById('statMandatory').textContent = byStatus.mandatory || 0;
            document.getElementById('statTotal').textContent = data.total || 0;

            const badge = document.getElementById('pendingBadge');
            const pending = byStatus.pending || 0;
            badge.textContent = pending;
            badge.style.display = pending > 0 ? '' : 'none';
        } catch (e) {
            console.error('Failed to update stats:', e);
        }
    }

    // ─────────────────────────────────────────────────────────────
    // Rendering: Review Queue
    // ─────────────────────────────────────────────────────────────

    function renderReviewItems(data, list, paginationEl) {
        if (!data.items || data.items.length === 0) {
            list.innerHTML = `
                <div class="empty-state">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <polyline points="20 6 9 17 4 12"/>
                    </svg>
                    <p>No pending items to review.</p>
                    <p style="font-size: var(--text-sm);">All knowledge items have been reviewed.</p>
                </div>`;
            paginationEl.innerHTML = '';
            return;
        }

        list.innerHTML = data.items.map((item, idx) => renderItemCard(item, idx, 'review')).join('');
        renderPagination(paginationEl, data, 'loadReviewQueue');
        updateSelectionCount('review');
    }

    // ─────────────────────────────────────────────────────────────
    // Rendering: All Items
    // ─────────────────────────────────────────────────────────────

    function renderAllItems(data, list, paginationEl) {
        if (!data.items || data.items.length === 0) {
            list.innerHTML = `
                <div class="empty-state">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                    </svg>
                    <p>No items found with the selected filter.</p>
                </div>`;
            paginationEl.innerHTML = '';
            return;
        }

        list.innerHTML = data.items.map((item, idx) => renderItemCard(item, idx, 'all')).join('');
        renderPagination(paginationEl, data, 'loadAllItems');
        // Reset the "Select all" header checkbox + button states after every
        // re-render (issue #129); previous selection IDs no longer exist in
        // the DOM after the list refreshes.
        const selAll = document.getElementById('selectAllAll');
        if (selAll) selAll.checked = false;
        updateSelectionCount('all');
    }

    // ─────────────────────────────────────────────────────────────
    // Rendering: Shared Item Card
    // ─────────────────────────────────────────────────────────────

    // Lookup map populated as items render — backs `openEditItemModal(id)`
    // so the modal can pre-fill from the same payload the card was built
    // from, without a fresh GET round-trip.
    const _itemsById = new Map();

    // mode: 'review' | 'all' | 'browse'
    //   - 'review' renders the Approve / Reject / Make-Mandatory action row;
    //     row checkbox drives the Review-tab bulk-edit bar
    //     (updateSelectionCount('review')).
    //   - 'all' renders status-dependent actions (Approve/Reject/Demote/etc.);
    //     row checkbox drives the All-Items-tab bulk-edit bar
    //     (updateSelectionCount('all')).
    //   - 'browse' omits the row checkbox entirely — Browse tab has no batch
    //     bar; rendering a checkbox there would leave it orphaned.
    //
    // v49 (Task 8.6): redesigned to match the user-facing /memory/d/<slug>
    // drill-down card layout (`.memory-item` class set). Visual parity
    // means an admin reviewing the queue sees items in the same shape
    // analysts see them, with Required badge / votes / contributors /
    // tags / status-badge / confidence chips preserved. Admin actions
    // (Approve / Reject / Make-Mandatory / Edit) sit in a dedicated
    // `.memory-item__admin-actions` row so the analyst-side affordances
    // (Dismiss etc.) stay isolated from moderation actions.
    function renderItemCard(item, idx, mode) {
        _itemsById.set(item.id, item);
        const status = item.status || 'pending';
        const categoryDisplay = (item.category || 'general').replace(/_/g, ' ');
        const dateStr = (item.created_at || item.extracted_at || '').substring(0, 10) || 'recently';
        const sourceUser = item.source_user || '';
        const initials = sourceUser.split('@')[0].substring(0, 2).toUpperCase();
        const contributors = [{name: sourceUser, initials: initials}];

        // Determine available admin actions. Review tab keeps explicit
        // Approve / Make-Mandatory / Reject for the moderation flow;
        // All / Browse fall back to the status-aware action set so
        // admins can still demote / re-approve / revoke / etc.
        let adminActionsHtml = '';
        if (mode === 'review') {
            adminActionsHtml = `
                <button class="btn btn-approve" onclick="adminAction('approve', '${esc(item.id)}')">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="20 6 9 17 4 12"/>
                    </svg>
                    Approve <span class="shortcut-hint">A</span>
                </button>
                <button class="btn btn-mandate" onclick="showMandateForm('${esc(item.id)}')">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                    </svg>
                    Mark as Required <span class="shortcut-hint">M</span>
                </button>
                <button class="btn btn-reject" onclick="adminAction('reject', '${esc(item.id)}')">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"/>
                        <line x1="6" y1="6" x2="18" y2="18"/>
                    </svg>
                    Reject <span class="shortcut-hint">R</span>
                </button>
                <button class="btn" onclick="openEditItemModal('${esc(item.id)}')">Edit</button>`;
        } else {
            // Reuse the status-aware button set; strip the wrapping
            // .item-actions div — admin-actions row provides its own
            // flex container now.
            adminActionsHtml = buildStatusActions(item, /* wrapped= */false);
        }

        const mandateFormHtml = `
            <div class="mandate-form" id="mandate-form-${esc(item.id)}">
                <label>Why is this required?</label>
                <textarea id="mandate-reason-${esc(item.id)}" placeholder="Explain why all analysts need this rule..."></textarea>
                <label style="margin-top: var(--space-3);">Target Audience</label>
                <select id="mandate-audience-${esc(item.id)}">
                    <option value="all">All users</option>
                    ${(Array.isArray(GROUPS) ? GROUPS : []).map(g => `<option value="group:${esc(g.name)}">${esc(g.name)} (${g.members_count} members)</option>`).join('')}
                </select>
                <div class="mandate-form-actions">
                    <button class="btn btn-mandate" onclick="submitMandate('${esc(item.id)}')">Confirm</button>
                    <button class="btn" onclick="hideMandateForm('${esc(item.id)}')">Cancel</button>
                </div>
            </div>`;

        const isRequired = !!item.is_required || status === 'mandatory';
        const tags = parseJsonField(item.tags);
        const upvotes = item.upvotes || 0;
        const downvotes = item.downvotes || 0;

        // Row checkbox emitted inline so the regression guard in
        // tests/test_admin_memory_page_all_items_batch_bar.py keeps
        // matching the documented `mode === 'browse' ? ''` branch.
        // Browse-tab cards have no batch bar so the checkbox is
        // suppressed there — the rest of the JS infrastructure
        // (`getSelectedIds`, `updateSelectionCount`) is shared with
        // Review + All tabs.
        return `
            <div class="memory-item ${isRequired ? 'is-required' : ''} knowledge-item" data-id="${esc(item.id)}" data-idx="${idx}">
                <div class="memory-item__header">
                    ${mode === 'browse' ? '' : `<input type="checkbox" class="item-checkbox" data-id="${esc(item.id)}" onchange="updateSelectionCount('${mode}')">`}
                    <h3 class="memory-item__title knowledge-title">${escapeHtml(item.title || 'Untitled')}</h3>
                    <div class="memory-item__badges">
                        ${isRequired ? '<span class="badge badge--required">Required</span>' : ''}
                        ${renderDomainBadges(item)}
                        ${item.category ? `<span class="badge badge--category">${escapeHtml(categoryDisplay)}</span>` : ''}
                        ${item.source_type ? `<span class="badge badge--source">${escapeHtml(item.source_type)}</span>` : ''}
                        ${(status && status !== 'approved') ? `<span class="badge badge--status status-badge ${esc(status)}">${escapeHtml(status)}</span>` : ''}
                        ${item.confidence ? `<span class="badge">${Math.round(item.confidence*100)}% conf</span>` : ''}
                    </div>
                </div>
                <div class="memory-item__content knowledge-content">${escapeHtml(item.content || '')}</div>
                <div class="memory-item__footer">
                    <span class="memory-item__votes"
                          title="Analyst votes — useful items trend up, outdated ones get flagged.">
                        <span class="vote-pill" title="Upvotes">
                            <svg class="vote-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                 stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M7 10v12"/>
                                <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/>
                            </svg>
                            <span class="vote-count">${upvotes}</span>
                        </span>
                        <span class="vote-pill" title="Downvotes">
                            <svg class="vote-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                 stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M17 14V2"/>
                                <path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"/>
                            </svg>
                            <span class="vote-count">${downvotes}</span>
                        </span>
                    </span>
                    ${contributors.length ? `
                        <span class="memory-item__contributors">
                            ${contributors.slice(0, 3).map(u =>
                                `<span class="memory-item__avatar" title="${escapeHtml(u.name)}">${escapeHtml(u.initials)}</span>`
                            ).join('')}
                        </span>` : ''}
                    ${tags.length ? `
                        <span class="memory-item__tags">
                            ${tags.map(t => `<span class="memory-item__tag tag">${escapeHtml(t)}</span>`).join('')}
                        </span>` : ''}
                    <span class="memory-item__meta">Added ${escapeHtml(dateStr)}</span>
                </div>
                <div class="memory-item__admin-actions item-actions">
                    ${adminActionsHtml}
                </div>
                ${mandateFormHtml}
            </div>`;
    }

    function buildStatusActions(item, wrapped) {
        // ``wrapped`` defaults to true for legacy callers (e.g. anywhere
        // else in the codebase that still consumes the wrapped form).
        // The v49 admin redesign in ``renderItemCard`` passes
        // ``wrapped=false`` because the new layout supplies its own
        // ``.memory-item__admin-actions`` flex container so wrapping
        // again would double up the row.
        if (wrapped === undefined) wrapped = true;
        const status = item.status || 'pending';
        let buttons = [];

        // Actions depend on the valid transitions from current status
        if (status === 'pending') {
            buttons.push(`<button class="btn btn-approve" onclick="adminAction('approve', '${esc(item.id)}')">Approve</button>`);
            buttons.push(`<button class="btn btn-mandate" onclick="showMandateForm('${esc(item.id)}')">Mark as Required</button>`);
            buttons.push(`<button class="btn btn-reject" onclick="adminAction('reject', '${esc(item.id)}')">Reject</button>`);
        } else if (status === 'approved') {
            buttons.push(`<button class="btn btn-mandate" onclick="showMandateForm('${esc(item.id)}')">Mark as Required</button>`);
            buttons.push(`<button class="btn btn-reject" onclick="adminAction('reject', '${esc(item.id)}')">Reject</button>`);
        } else if (status === 'mandatory') {
            buttons.push(`<button class="btn btn-approve" onclick="adminAction('approve', '${esc(item.id)}')">Demote to Approved</button>`);
            buttons.push(`<button class="btn btn-revoke" onclick="adminAction('revoke', '${esc(item.id)}')">Revoke</button>`);
        } else if (status === 'rejected') {
            buttons.push(`<button class="btn btn-approve" onclick="adminAction('approve', '${esc(item.id)}')">Re-approve</button>`);
        } else if (status === 'revoked') {
            buttons.push(`<button class="btn btn-approve" onclick="adminAction('approve', '${esc(item.id)}')">Re-approve</button>`);
            buttons.push(`<button class="btn btn-mandate" onclick="showMandateForm('${esc(item.id)}')">Mark as Required</button>`);
        }

        // Edit is always available regardless of status — admins fix
        // category/domain/tags/audience/title/content via PATCH /admin/{id}.
        buttons.push(`<button class="btn" onclick="openEditItemModal('${esc(item.id)}')">Edit</button>`);

        if (buttons.length === 0) return '';
        return wrapped ? `<div class="item-actions">${buttons.join('')}</div>` : buttons.join('');
    }

    // ─────────────────────────────────────────────────────────────
    // Rendering: Audit Log
    // ─────────────────────────────────────────────────────────────

    function renderAuditLog(data, content, paginationEl) {
        if (!data.entries || data.entries.length === 0) {
            content.innerHTML = `
                <div class="empty-state">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <line x1="16" y1="13" x2="8" y2="13"/>
                        <line x1="16" y1="17" x2="8" y2="17"/>
                    </svg>
                    <p>No audit log entries yet.</p>
                </div>`;
            paginationEl.innerHTML = '';
            return;
        }

        let rows = data.entries.map((entry, idx) => {
            const ts = entry.timestamp ? new Date(entry.timestamp).toLocaleString() : 'Unknown';
            const admin = entry.user_id || entry.admin || 'Unknown';
            const action = (entry.action || 'unknown').replace(/^km_/, '');
            const itemId = entry.resource || entry.item_id || '';
            const rawParams = entry.params || entry.details || '{}';
            const details = typeof rawParams === 'string' ? (() => { try { return JSON.parse(rawParams); } catch { return {}; } })() : rawParams;

            let detailStr = '';
            if (details.reason) detailStr = details.reason;
            else if (details.mandatory_reason) detailStr = details.mandatory_reason;
            else if (details.audience) detailStr = `Audience: ${details.audience}`;
            else if (details.previous_status) detailStr = `From: ${details.previous_status}`;
            else if (action === 'edit' && Object.keys(details).length) {
                detailStr = `Edited: ${Object.keys(details).join(', ')}`;
            }
            if (!detailStr) detailStr = '—';

            const item = auditItemMap[itemId] || null;
            const itemLabel = item && item.title
                ? item.title
                : (itemId ? `${itemId.substring(0, 12)}…` : '(unknown)');

            const detailRows = [];
            detailRows.push(`<div class="k">Item ID</div><div class="v"><code>${escapeHtml(itemId || '(none)')}</code></div>`);
            if (item) {
                detailRows.push(`<div class="k">Title</div><div class="v">${escapeHtml(item.title)}</div>`);
                detailRows.push(`<div class="k">Current status</div><div class="v">${escapeHtml(item.status || '(unknown)')}</div>`);
                if (item.source_type) {
                    detailRows.push(`<div class="k">Source</div><div class="v">${escapeHtml(item.source_type)}</div>`);
                }
                if (item.content) {
                    const snippet = item.content.length > 400 ? item.content.substring(0, 400) + '…' : item.content;
                    detailRows.push(`<div class="k">Content</div><div class="v">${escapeHtml(snippet)}</div>`);
                }
            } else if (itemId) {
                detailRows.push(`<div class="k">Item</div><div class="v" style="color: var(--text-secondary); font-style: italic;">No matching item found (it may have been deleted, or this audit row references a contradiction id).</div>`);
            }
            detailRows.push(`<div class="k">Action</div><div class="v">${escapeHtml(action)}</div>`);
            detailRows.push(`<div class="k">Admin</div><div class="v">${escapeHtml(admin)}</div>`);
            detailRows.push(`<div class="k">Timestamp</div><div class="v">${escapeHtml(ts)}</div>`);
            const paramsJson = JSON.stringify(details, null, 2);
            detailRows.push(`<div class="k">Raw params</div><div class="v"><pre>${escapeHtml(paramsJson)}</pre></div>`);

            return `
                <tr class="audit-row" data-idx="${idx}" onclick="toggleAuditDetail(${idx})">
                    <td><span class="audit-disclosure">▶</span> ${escapeHtml(ts)}</td>
                    <td>${escapeHtml(admin)}</td>
                    <td><span class="action-badge ${esc(action)}">${escapeHtml(action)}</span></td>
                    <td title="${escapeHtml(itemId)}">${escapeHtml(itemLabel)}</td>
                    <td class="audit-details" title="${escapeHtml(detailStr)}">${escapeHtml(detailStr)}</td>
                </tr>
                <tr class="audit-detail-row" data-idx="${idx}" style="display: none;">
                    <td colspan="5">
                        <div class="audit-detail-grid">${detailRows.join('')}</div>
                    </td>
                </tr>`;
        }).join('');

        content.innerHTML = `
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Timestamp</th>
                        <th>Admin</th>
                        <th>Action</th>
                        <th>Item</th>
                        <th>Details</th>
                    </tr>
                </thead>
                <tbody>${rows}</tbody>
            </table>`;

        // Pagination for audit (using total and per_page)
        const totalPages = Math.ceil((data.total || 0) / (data.per_page || 20));
        renderPaginationGeneric(paginationEl, data.page || 1, totalPages, 'loadAuditLog');
    }

    // ─────────────────────────────────────────────────────────────
    // Rendering: Pagination
    // ─────────────────────────────────────────────────────────────

    function renderPagination(el, data, fnName) {
        renderPaginationGeneric(el, data.page || 1, data.total_pages || 0, fnName);
    }

    function renderPaginationGeneric(el, page, totalPages, fnName) {
        if (totalPages <= 1) {
            el.innerHTML = '';
            return;
        }

        let html = `<button class="page-btn" onclick="${fnName}(${page - 1})" ${page <= 1 ? 'disabled' : ''}>Prev</button>`;

        // Smart pagination: show max 7 page buttons (1-based)
        const maxVisible = 7;
        let startPage = Math.max(1, page - Math.floor(maxVisible / 2));
        let endPage = Math.min(totalPages, startPage + maxVisible - 1);
        if (endPage - startPage < maxVisible - 1) {
            startPage = Math.max(1, endPage - maxVisible + 1);
        }

        if (startPage > 1) {
            html += `<button class="page-btn" onclick="${fnName}(1)">1</button>`;
            if (startPage > 2) html += `<span style="padding: var(--space-2); color: var(--text-secondary);">...</span>`;
        }

        for (let p = startPage; p <= endPage; p++) {
            html += `<button class="page-btn ${p === page ? 'active' : ''}" onclick="${fnName}(${p})">${p}</button>`;
        }

        if (endPage < totalPages) {
            if (endPage < totalPages - 1) html += `<span style="padding: var(--space-2); color: var(--text-secondary);">...</span>`;
            html += `<button class="page-btn" onclick="${fnName}(${totalPages})">${totalPages}</button>`;
        }

        html += `<button class="page-btn" onclick="${fnName}(${page + 1})" ${page >= totalPages ? 'disabled' : ''}>Next</button>`;
        el.innerHTML = html;
    }

    // ─────────────────────────────────────────────────────────────
    // Admin Actions
    // ─────────────────────────────────────────────────────────────

    async function adminAction(action, itemId) {
        const url = `/api/memory/admin/${action}?item_id=${encodeURIComponent(itemId)}`;

        try {
            const resp = await fetch(url, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({}),
            });

            const result = await resp.json();
            if (resp.ok) {
                showToast(`Item ${action}d successfully`, 'success');
                refreshCurrentTab();
            } else {
                showToast(result.error || `Failed to ${action} item`, 'error');
            }
        } catch (e) {
            console.error(`Failed to ${action} item:`, e);
            showToast(`Network error: ${action} failed`, 'error');
        }
    }

    function showMandateForm(itemId) {
        // Hide all other mandate forms first
        document.querySelectorAll('.mandate-form.visible').forEach(f => f.classList.remove('visible'));
        const form = document.getElementById(`mandate-form-${itemId}`);
        if (form) form.classList.add('visible');
    }

    function hideMandateForm(itemId) {
        const form = document.getElementById(`mandate-form-${itemId}`);
        if (form) form.classList.remove('visible');
    }

    async function submitMandate(itemId) {
        const reason = document.getElementById(`mandate-reason-${itemId}`).value.trim();
        const audience = document.getElementById(`mandate-audience-${itemId}`).value;

        if (!reason) {
            showToast('Please provide a reason for mandating this item', 'error');
            return;
        }

        try {
            const resp = await fetch(`/api/memory/admin/mandate?item_id=${encodeURIComponent(itemId)}`, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    reason: reason,
                    audience: audience,
                }),
            });

            const result = await resp.json();
            if (resp.ok) {
                showToast('Item mandated successfully', 'success');
                refreshCurrentTab();
            } else {
                showToast(result.error || 'Failed to mandate item', 'error');
            }
        } catch (e) {
            console.error('Failed to mandate item:', e);
            showToast('Network error: mandate failed', 'error');
        }
    }

    // ─────────────────────────────────────────────────────────────
    // Batch Actions
    // ─────────────────────────────────────────────────────────────

    function getSelectedIds(tab) {
        const selector = tab === 'review' ? '#reviewList .item-checkbox:checked' : '#allList .item-checkbox:checked';
        return Array.from(document.querySelectorAll(selector)).map(cb => cb.dataset.id);
    }

    function toggleSelectAll(tab) {
        const selectAllEl = document.getElementById(tab === 'review' ? 'selectAllReview' : 'selectAllAll');
        const checkboxes = document.querySelectorAll(
            tab === 'review' ? '#reviewList .item-checkbox' : '#allList .item-checkbox'
        );
        checkboxes.forEach(cb => cb.checked = selectAllEl.checked);
        updateSelectionCount(tab);
    }

    function updateSelectionCount(tab) {
        const ids = getSelectedIds(tab);
        const countEl = document.getElementById(tab === 'review' ? 'selectedCountReview' : 'selectedCountAll');
        // Approve / Reject buttons exist only in the Review tab — All Items
        // batch bar (issue #129) deliberately omits them (status changes belong
        // to per-row buttons or the keyboard workflow in Review).
        const approveBtn = tab === 'review' ? document.getElementById('batchApproveBtn') : null;
        const rejectBtn = tab === 'review' ? document.getElementById('batchRejectBtn') : null;

        if (countEl) countEl.textContent = ids.length > 0 ? `${ids.length} selected` : '';
        if (approveBtn) approveBtn.disabled = ids.length === 0;
        if (rejectBtn) rejectBtn.disabled = ids.length === 0;
        // Bulk-edit buttons (issue #62 + #129) — Review tab uses bare IDs;
        // All Items tab adds the "All" suffix. Each tab toggles its own set.
        const suffix = tab === 'review' ? '' : 'All';
        ['batchMoveCategoryBtn', 'batchMoveDomainBtn', 'batchAddTagBtn', 'batchRemoveTagBtn', 'batchSetAudienceBtn'].forEach(base => {
            const btn = document.getElementById(base + suffix);
            if (btn) btn.disabled = ids.length === 0;
        });
    }

    async function batchAction(action) {
        const ids = getSelectedIds('review');
        if (ids.length === 0) return;

        try {
            const resp = await fetch('/api/memory/admin/batch', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({item_ids: ids, action: action}),
            });

            const result = await resp.json();
            if (resp.ok) {
                const successCount = (result.success || []).length;
                const failCount = (result.failed || []).length;
                let msg = `${successCount} item${successCount !== 1 ? 's' : ''} ${action}d`;
                if (failCount > 0) msg += `, ${failCount} failed`;
                showToast(msg, failCount > 0 ? 'error' : 'success');
                refreshCurrentTab();
            } else {
                showToast(result.error || `Batch ${action} failed`, 'error');
            }
        } catch (e) {
            console.error(`Batch ${action} failed:`, e);
            showToast(`Network error: batch ${action} failed`, 'error');
        }
    }

    // ─────────────────────────────────────────────────────────────
    // Contradiction Resolution
    // ─────────────────────────────────────────────────────────────

    async function resolveContradiction(contradictionId, resolution) {
        try {
            const resp = await fetch(`/api/memory/admin/contradictions/${contradictionId}/resolve`, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({resolution: resolution})
            });
            if (resp.ok) {
                showToast(`Contradiction resolved: ${resolution.replace('_', ' ')}`, 'success');
                setTimeout(() => location.reload(), 1000);
            } else {
                const data = await resp.json();
                showToast(data.detail || 'Failed to resolve', 'error');
            }
        } catch(e) {
            showToast('Error resolving contradiction', 'error');
        }
    }

    // ─────────────────────────────────────────────────────────────
    // Tab Refresh
    // ─────────────────────────────────────────────────────────────

    function refreshCurrentTab() {
        if (currentTab === 'review') loadReviewQueue(reviewPage);
        else if (currentTab === 'all') loadAllItems(allPage);
        else if (currentTab === 'audit') loadAuditLog(auditPage);
        else if (currentTab === 'contradictions') location.reload();
        else if (currentTab === 'duplicates') loadDuplicateCandidates();
        else if (currentTab === 'browse') loadBrowseTree();
    }

    // ─────────────────────────────────────────────────────────────
    // Keyboard Shortcuts
    // ─────────────────────────────────────────────────────────────

    document.addEventListener('keydown', function(e) {
        // Skip if focus is in an input or textarea
        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') return;
        // Only active in review tab
        if (currentTab !== 'review') return;

        const items = document.querySelectorAll('#reviewList .knowledge-item');
        if (items.length === 0) return;

        // Activate keyboard mode
        if (!keyboardActive) {
            keyboardActive = true;
            document.body.classList.add('keyboard-active');
        }

        switch (e.key) {
            case 'j': // Next item
                e.preventDefault();
                focusedIndex = Math.min(focusedIndex + 1, items.length - 1);
                updateFocus(items);
                break;
            case 'k': // Previous item
                e.preventDefault();
                focusedIndex = Math.max(focusedIndex - 1, 0);
                updateFocus(items);
                break;
            case 'a': // Approve focused
                e.preventDefault();
                if (focusedIndex >= 0 && focusedIndex < items.length) {
                    const id = items[focusedIndex].dataset.id;
                    if (id) adminAction('approve', id);
                }
                break;
            case 'r': // Reject focused
                e.preventDefault();
                if (focusedIndex >= 0 && focusedIndex < items.length) {
                    const id = items[focusedIndex].dataset.id;
                    if (id) adminAction('reject', id);
                }
                break;
            case 'm': // Mandate focused
                e.preventDefault();
                if (focusedIndex >= 0 && focusedIndex < items.length) {
                    const id = items[focusedIndex].dataset.id;
                    if (id) showMandateForm(id);
                }
                break;
        }
    });

    function updateFocus(items) {
        items.forEach(item => item.classList.remove('focused'));
        if (focusedIndex >= 0 && focusedIndex < items.length) {
            items[focusedIndex].classList.add('focused');
            items[focusedIndex].scrollIntoView({behavior: 'smooth', block: 'nearest'});
        }
    }

    // ─────────────────────────────────────────────────────────────
    // Utility
    // ─────────────────────────────────────────────────────────────

    function escapeHtml(text) {
        if (text === null || text === undefined) return '';
        const div = document.createElement('div');
        div.textContent = String(text);
        return div.innerHTML;
    }

    function esc(text) {
        // Escape for use in HTML attributes (single quotes in onclick handlers etc.)
        return escapeHtml(String(text || '')).replace(/'/g, '&#39;').replace(/"/g, '&quot;');
    }

    // Render every memory domain the item belongs to as a chip, with a
    // +N overflow chip past 3. Items can sit in multiple domains via the
    // knowledge_item_domains junction; the single-slug item.domain
    // surface stays as a back-compat fallback when item.domains is
    // missing (e.g. older API responses pre-hydration patch).
    function renderDomainBadges(item) {
        let slugs = Array.isArray(item.domains) ? item.domains.slice() : [];
        if (!slugs.length && item.domain) slugs = [item.domain];
        if (!slugs.length) return '';
        const max = 3;
        const visible = slugs.slice(0, max);
        const overflow = slugs.length - visible.length;
        const chip = (slug, title) =>
            `<span class="badge" `
          + `style="background:#e8f0fe; color:#1a73e8; border:1px solid #c7d8f5;" `
          + `title="${escapeHtml(title || slug)}">📂 ${escapeHtml(slug)}</span>`;
        let out = visible.map(s => chip(s)).join('');
        if (overflow > 0) {
            const rest = slugs.slice(max).join(', ');
            out += chip('+' + overflow, '+' + overflow + ' more: ' + rest);
        }
        return out;
    }

    let toastTimeout = null;
    function showToast(message, type) {
        const toast = document.getElementById('toast');
        toast.textContent = message;
        toast.className = `toast ${type} visible`;
        clearTimeout(toastTimeout);
        toastTimeout = setTimeout(() => {
            toast.classList.remove('visible');
        }, 3000);
    }

    // ─────────────────────────────────────────────────────────────
    // Initial load — honor #tab in the URL hash so deep links from
    // /corporate-memory "Manage domains →" land on the right tab,
    // and #item-XXX from /memory/d/<slug>'s Edit link to open the
    // item edit modal directly.
    // ─────────────────────────────────────────────────────────────

    async function _openItemEditByHashId(itemId) {
        // GET /api/memory/admin/{id} bypasses pagination — the previous
        // implementation polled the All-Items render and failed for items
        // beyond page 1. Inject the fetched row into _itemsById so the
        // existing openEditItemModal(id) flow (which reads from that map)
        // just works.
        try {
            const r = await fetch('/api/memory/admin/' + encodeURIComponent(itemId),
                { credentials: 'same-origin' });
            if (r.status === 404) {
                showToast('Item not found — it may have been deleted.', 'error');
                return;
            }
            if (!r.ok) {
                showToast('Could not load item (HTTP ' + r.status + ').', 'error');
                return;
            }
            const item = await r.json();
            _itemsById.set(item.id, item);
            openEditItemModal(item.id);
        } catch (e) {
            showToast('Network error loading item: ' + e.message, 'error');
        }
    }

    (function() {
        const hash = (window.location.hash || '').replace(/^#/, '');
        const validTabs = ['review','all','contradictions','duplicates','browse','domains','audit'];
        const itemMatch = hash.match(/^item-(.+)$/);
        if (itemMatch) {
            // Deep link from /memory/d/<slug> Edit button. Switch to All
            // Items so the user has a sensible tab to land back on after
            // closing the modal, then fetch the row directly via the
            // single-item GET (works regardless of pagination).
            switchTab('all');
            _openItemEditByHashId(itemMatch[1]);
        } else if (hash && validTabs.indexOf(hash) !== -1) {
            switchTab(hash);
        } else {
            loadReviewQueue(1);
        }
    })();
    </script>
{% endblock %}

{# Chip-input component (v55 — was globally loaded in base.html, now
   opt-in per template via this extra_scripts block; only this page
   actually mounts a chip-input today). #}
{% block extra_scripts %}
<script type="module" src="{{ static_url('js/components/chip-input.js') }}"></script>
{% endblock %}