agnes-the-ai-analyst/app/web/templates/admin_tables.html

{% extends "base.html" %}

{% block title %}Table Management - {{ config.INSTANCE_NAME }}{% endblock %}

{% block body_attrs %}data-source-type="{{ data_source_type }}"{% 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>
        /* Design tokens come from the global `:root` block in
           style-custom.css. The local override that used to live
           here re-declared `--primary` as `var(--primary)` (a
           circular reference that resolved to empty), which
           collapsed the gradient on the page-header hero. */

        body {
            font-family: var(--font-primary);
            font-size: 14px;
            color: var(--text-primary);
            background: var(--background);
            line-height: 1.5;
        }

        /* ── Header (dashboard-style) ── */
        .header {
            background: var(--surface);
            border-bottom: 1px solid var(--border);
            padding: 0 32px;
            height: 72px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .header-back {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 6px;
            color: var(--text-secondary);
            text-decoration: none;
            transition: all 0.15s ease;
        }

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

        .header-logo-group {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 2px;
        }

        .header-logo svg {
            display: block;
        }

        .header-subtitle {
            font-size: 11px;
            font-weight: 500;
            color: var(--text-secondary);
            letter-spacing: 0.4px;
            text-transform: uppercase;
            margin-top: 2px;
        }

        .header-right {
            font-size: 12px;
            color: var(--text-secondary);
        }

        /* ── Page Title ── */
        .page-title h1 {
            font-size: 24px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 4px;
        }

        .page-title p {
            font-size: 14px;
            color: var(--text-secondary);
        }

        /* ── Content Layout ── */
        .content {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        /* ── Panel (shared card style) ── */
        .panel {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            border-bottom: 1px solid var(--border-light);
        }

        .panel-header-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .panel-header-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            background: var(--primary-light);
        }

        .panel-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .panel-subtitle {
            font-size: 13px;
            color: var(--text-secondary);
            margin-top: 1px;
        }

        .panel-body {
            padding: 20px 24px;
        }

        .panel-body-empty {
            padding: 40px 24px;
            text-align: center;
            color: var(--text-secondary);
            font-size: 13px;
        }

        /* ── Buttons ── */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border: none;
            border-radius: 8px;
            font-family: var(--font-primary);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s ease;
            white-space: nowrap;
        }

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

        .btn-primary:hover {
            background: #005FA8;
        }

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

        .btn-secondary {
            background: var(--border-light);
            color: var(--text-primary);
        }

        .btn-secondary:hover {
            background: var(--border);
        }

        .btn-danger {
            background: var(--error-light);
            color: var(--error);
        }

        .btn-danger:hover {
            background: rgba(234, 88, 12, 0.2);
        }

        .btn-sm {
            padding: 5px 10px;
            font-size: 12px;
            border-radius: 6px;
        }

        .btn-icon {
            width: 28px;
            height: 28px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            background: none;
            border: none;
            cursor: pointer;
            color: var(--text-secondary);
            transition: all 0.15s ease;
        }

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

        .btn-icon.danger:hover {
            background: var(--error-light);
            color: var(--error);
        }

        /* ── Badges ── */
        .badge {
            flex-shrink: 0;
            font-size: 11px;
            font-weight: 500;
            border-radius: 6px;
            padding: 3px 8px;
            white-space: nowrap;
        }

        .badge-registered {
            color: #065F46;
            background: #D1FAE5;
        }

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

        /* ── Spinner ── */
        .spinner {
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 2px solid var(--border);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .spinner-lg {
            width: 32px;
            height: 32px;
            border-width: 3px;
        }

        /* ── Loading state ── */
        .loading-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            padding: 40px 24px;
            color: var(--text-secondary);
            font-size: 13px;
        }

        /* ── Notification toast ── */
        .toast {
            position: fixed;
            top: 84px;
            right: 24px;
            z-index: 200;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            box-shadow: var(--shadow-md);
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            transform: translateX(120%);
            transition: transform 0.3s ease;
            max-width: 360px;
        }

        .toast.visible {
            transform: translateX(0);
        }

        .toast-success {
            border-left: 3px solid var(--success);
        }

        .toast-error {
            border-left: 3px solid var(--error);
        }

        .toast-icon {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }

        /* ── Bucket accordion ── */
        .bucket-group {
            border-top: 1px solid var(--border-light);
        }

        .bucket-group:first-child {
            border-top: none;
        }

        .bucket-trigger {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 24px;
            background: none;
            border: none;
            cursor: pointer;
            font-family: var(--font-primary);
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            text-align: left;
            transition: background 0.1s ease;
        }

        .bucket-trigger:hover {
            background: var(--border-light);
        }

        .bucket-chevron {
            width: 16px;
            height: 16px;
            color: var(--text-secondary);
            transition: transform 0.2s ease;
            flex-shrink: 0;
        }

        .bucket-trigger.expanded .bucket-chevron {
            transform: rotate(90deg);
        }

        .bucket-count {
            font-size: 11px;
            font-weight: 500;
            color: var(--text-secondary);
            background: var(--border-light);
            padding: 1px 7px;
            border-radius: 9999px;
            margin-left: auto;
        }

        .bucket-content {
            display: none;
        }

        .bucket-content.expanded {
            display: block;
        }

        /* ── Table row (discovery results) ── */
        .table-item {
            display: flex;
            align-items: center;
            padding: 10px 24px 10px 50px;
            border-top: 1px solid var(--border-light);
            gap: 12px;
            transition: background 0.1s ease;
        }

        .table-item:hover {
            background: rgba(243, 244, 246, 0.5);
        }

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

        .table-item-name {
            font-weight: 500;
            font-family: var(--font-mono);
            font-size: 13px;
            color: var(--text-primary);
        }

        .table-item-meta {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 1px;
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .table-item-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        /* ── Registry table ── */
        .registry-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }

        .registry-table .col-description {
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow-wrap: anywhere;
            line-height: 1.4;
            color: var(--text-secondary);
        }

        .registry-table th {
            text-align: left;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.4px;
            padding: 10px 16px;
            border-bottom: 1px solid var(--border);
            background: var(--background);
        }

        .registry-table td {
            padding: 12px 16px;
            font-size: 13px;
            border-bottom: 1px solid var(--border-light);
            vertical-align: middle;
        }

        .registry-table tr:last-child td {
            border-bottom: none;
        }

        .registry-table tr:hover td {
            background: rgba(243, 244, 246, 0.5);
        }

        .registry-table .col-id {
            font-family: var(--font-mono);
            font-size: 12px;
            max-width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .registry-table .col-actions {
            width: 120px;
            min-width: 120px;
            white-space: nowrap;
            vertical-align: top;
        }

        /* ── Registry table — wide layout ── */
        .registry-table .col-mode {
            width: 100px;
        }

        .registry-table .col-source {
            width: 200px;
            font-family: var(--font-mono);
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--text-secondary);
        }

        .registry-table .col-pk {
            width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .registry-table .col-schedule {
            width: 100px;
            font-size: 12px;
            color: var(--text-secondary);
        }

        .registry-table .col-folder {
            width: 120px;
        }

        .registry-table .col-registered {
            width: 160px;
            font-size: 11px;
            line-height: 1.4;
            overflow: hidden;
        }

        .registry-table .col-registered .registered-by {
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .registry-table .col-registered .registered-at {
            color: var(--text-secondary);
        }

        .registry-table .col-status {
            width: 40px;
            text-align: center;
        }

        .mode-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
        }

        .mode-badge.mode-local {
            background: var(--success-light);
            color: var(--success);
        }

        .mode-badge.mode-remote {
            background: var(--primary-light);
            color: var(--primary);
        }

        .mode-badge.mode-materialized {
            background: rgba(139, 92, 246, 0.1);
            color: #8B5CF6;
        }

        .mode-badge.mode-internal {
            background: rgba(15, 118, 110, 0.1);
            color: #0F766E;
        }

        .folder-badge {
            display: inline-block;
            padding: 1px 6px;
            border-radius: 3px;
            background: var(--background);
            border: 1px solid var(--border);
            font-size: 11px;
            color: var(--text-secondary);
        }

        /* ── Modal overlay ── */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            padding: 40px 24px;
            overflow-y: auto;
        }

        .modal-overlay.active {
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }

        .modal {
            max-width: 560px;
            width: 100%;
            background: var(--surface);
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            /* BLOCKER fix (UX review #1): cap height at 90vh + scroll
             * the body so Create + Edit Data Package modals don't push
             * the Submit footer off-screen on 720px viewports. Flex
             * layout keeps header + footer pinned and grows the body. */
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .modal .modal-body {
            overflow-y: auto;
            flex: 1 1 auto;
        }
        .modal .modal-header,
        .modal .modal-footer {
            flex: 0 0 auto;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            border-bottom: 1px solid var(--border);
            background: var(--background);
        }

        .modal-header h2 {
            font-size: 18px;
            font-weight: 600;
        }

        .modal-close {
            width: 32px;
            height: 32px;
            border: none;
            background: none;
            cursor: pointer;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            transition: all 0.15s;
        }

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

        .modal-body {
            padding: 24px;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 16px 24px;
            border-top: 1px solid var(--border);
            background: var(--background);
        }

        /* ── Form ── */
        .form-group {
            margin-bottom: 18px;
        }

        .form-group:last-child {
            margin-bottom: 0;
        }

        .form-label {
            display: block;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 6px;
        }

        .form-input,
        .form-select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-family: var(--font-primary);
            font-size: 13px;
            color: var(--text-primary);
            background: var(--surface);
            transition: border-color 0.15s;
        }

        .form-input:focus,
        .form-select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(46, 168, 119, 0.1);
        }

        .form-input[readonly] {
            background: var(--border-light);
            color: var(--text-secondary);
            cursor: not-allowed;
        }

        .form-select {
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 32px;
        }

        .form-hint {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 4px;
        }

        /* ── Footer ── */
        .footer {
            text-align: center;
            padding: 24px;
            color: var(--text-secondary);
            font-size: 12px;
        }

        .footer a {
            color: var(--primary);
            text-decoration: none;
        }

        .footer a:hover {
            text-decoration: underline;
        }

        /* ── Responsive ── */
        @media (max-width: 640px) {
            .header {
                padding: 0 16px;
            }

            .panel-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .table-item {
                padding-left: 24px;
                flex-wrap: wrap;
            }

            .table-item-meta {
                flex-direction: column;
                gap: 4px;
            }

            .registry-table .col-id {
                max-width: 160px;
            }

            .modal {
                margin: 16px;
            }
        }

        /* ── Tab nav (Phase D) ── */
        .tab-nav {
            display: flex;
            gap: 4px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 16px;
        }
        .tab {
            padding: 8px 16px;
            background: transparent;
            border: 0;
            cursor: pointer;
            font-family: inherit;
            font-size: inherit;
            color: var(--text-secondary);
        }
        .tab[aria-selected="true"] {
            border-bottom: 2px solid var(--primary);
            color: var(--text-primary);
            font-weight: 600;
        }
        .tab-content {
            padding: 16px 0;
        }
        .tab-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        .tab-actions {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 16px;
        }
    </style>
{% endblock %}

{% block content %}
<!-- ═══════════════ PAGE TITLE ═══════════════ -->
    {% set page_hero_eyebrow = "Administration" %}
    {% set page_hero_title = "Tables & Data Packages" %}
    {% set page_hero_subtitle = "Group registered tables into Data Packages so analysts can opt-in to bundles." %}
    {% include "_page_hero.html" %}

    <!-- ═══════════════ CONTENT ═══════════════ -->
    <div class="content">

        {# ─── Top action bar (package-centric, replaces connector-tab nav) ───
           Single row of high-level actions. The "+ Register new table"
           dropdown picks a connector → opens the matching modal (BQ /
           Keboola / Jira) instead of letting the connector drive the
           page layout. #}
        <section id="adminTablesActionBar" class="card" style="margin-bottom: 16px;">
          <div class="card-body" style="display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:12px 16px;">
            <div style="position:relative;">
              <button id="registerNewTableBtn" class="btn btn-primary" type="button"
                      onclick="toggleRegisterNewTableMenu(event)">
                + Register new table ▾
              </button>
              <div id="registerNewTableMenu"
                   style="display:none; position:absolute; top:100%; left:0; margin-top:4px;
                          background:var(--surface); border:1px solid var(--border); border-radius:8px;
                          box-shadow:var(--shadow-md); min-width:220px; z-index:20; padding:6px;">
                <button class="btn btn-secondary" type="button" data-register-source="bigquery"
                        style="display:block; width:100%; text-align:left; margin-bottom:4px;"
                        onclick="closeRegisterNewTableMenu(); openRegisterModal('bigquery')">
                  BigQuery
                </button>
                <button class="btn btn-secondary" type="button" data-register-source="keboola"
                        style="display:block; width:100%; text-align:left; margin-bottom:4px;"
                        onclick="closeRegisterNewTableMenu(); openRegisterModal('keboola')">
                  Keboola
                </button>
                <a class="btn btn-secondary" type="button"
                   href="docs/connectors/jira.md"
                   style="display:block; width:100%; text-align:left; text-decoration:none;"
                   onclick="closeRegisterNewTableMenu()">
                  Jira (webhook-driven — see docs)
                </a>
              </div>
            </div>
            <button class="btn btn-secondary" type="button" onclick="groupTablesByBucket()"
                    title="One-click: create one Data Package per distinct bucket and assign its tables">
              Group tables by bucket
            </button>
            <button class="btn btn-secondary" type="button" onclick="openBulkAssignModal('')">
              Bulk assign tables
            </button>
            <button class="btn btn-secondary" type="button" onclick="openCreateDataPackageModal('', null)">
              + New Data Package
            </button>
            <span style="flex:1;"></span>
            <details id="cacheWarmupCard" style="margin:0;">
              <summary style="cursor:pointer; user-select:none; font-size:13px; color:var(--text-secondary);">
                <span id="cacheWarmupSummary">Cache freshness — loading…</span>
              </summary>
              <div style="margin-top:8px; padding:12px; background:var(--background); border-radius:8px;">
                <div id="cacheWarmupProgress" style="margin-bottom:8px;"></div>
                <progress id="cacheWarmupBar" max="100" value="0" style="width:100%; display:none;"></progress>
                <button class="btn btn-secondary btn-sm" id="cacheWarmupRunBtn" onclick="cacheWarmupRun()"
                        style="margin-top:8px;">
                  Re-warm all
                </button>
                <details id="cacheWarmupDetails" style="margin-top:8px;">
                  <summary style="cursor:pointer; user-select:none; font-size:12px;">Show log</summary>
                  <p id="cacheWarmupHint" style="font-size:11px; color:var(--text-secondary); margin:6px 0 0;">
                    Live log from <em>Re-warm all</em>. Historical runs aren't persisted; check
                    <a href="/admin/activity">/admin/activity</a> for the audit trail.
                  </p>
                  <pre id="cacheWarmupLog" style="background:#0a0a0a; color:#dcdcdc; font-family:ui-monospace, Menlo, monospace; font-size:11px; padding:6px; max-height:200px; overflow-y:auto; margin-top:6px; border-radius:4px;"></pre>
                </details>
              </div>
            </details>
          </div>
        </section>

        {# ─── Package-centric layout (replaces the connector-tab nav) ───
           Hydrated client-side by loadAdminTablesLayout(): pulls both
           /api/admin/data-packages and /api/admin/registry, renders one
           collapsible <details> per package containing its member tables,
           then an "Unpackaged tables" section for everything else.

           "On the side" data-packages was the wrong framing — packages ARE
           the org structure now, so every table appears under either a
           package or the explicit Unpackaged bucket. Bucket / source_type
           survive as inline tags but no longer drive the layout. #}
        <section id="adminTablesLayout" class="card" style="margin-bottom: 16px;">
          <div class="card-body" id="adminTablesLayoutBody" style="padding:16px;">
            {# Search bar — UX parity with /catalog + /memory. Filters the
               package details + the table rows inside them; an unpackaged
               row matches by table name / source_type / bucket. Hides any
               package whose name doesn't match AND has zero matching rows. #}
            <div style="margin-bottom: 12px; display:flex; align-items:center; gap:8px;">
              <input id="adminTablesSearch" type="search"
                     class="form-input"
                     placeholder="Filter packages and tables by name, source, or bucket…"
                     oninput="filterAdminTablesLayout()"
                     style="flex:1; max-width:520px;">
              <span id="adminTablesSearchHint"
                    style="font-size:12px; color:var(--text-secondary);"></span>
            </div>
            <div id="adminTablesLayoutPackages">
              <div style="padding:16px; color:var(--text-secondary); font-size:13px; text-align:center;">
                Loading packages…
              </div>
            </div>
            <div id="adminTablesLayoutUnpackaged" style="margin-top:20px;"></div>
          </div>
        </section>

        {# Register modals (BigQuery / Keboola) live as top-level overlays,
           reachable via the "+ Register new table" dropdown in the action
           bar above. The connector tabs that used to drive the page layout
           were dropped — every table now appears in the package-centric
           layout regardless of source_type. #}

            <!-- ── BigQuery Register Modal ── -->
            <div class="modal-overlay" id="registerBqModal">
                <div class="modal">
                    <div class="modal-header">
                        <h2>Register BigQuery Table</h2>
                        <button class="modal-close" onclick="closeRegisterBqModal()">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="18" y1="6" x2="6" y2="18"/>
                                <line x1="6" y1="6" x2="18" y2="18"/>
                            </svg>
                        </button>
                    </div>
                    <div class="modal-body">
                        {# Two orthogonal questions: (1) live vs synced, (2) when synced,
                           whole table vs custom SQL. Visibility classes:
                             bq-access-live    — only when accessMode='live'
                             bq-access-synced  — only when accessMode='synced'
                             bq-source-table   — only when accessMode='live' OR
                                                 (accessMode='synced' AND syncMode='whole')
                             bq-source-custom  — only when accessMode='synced' AND syncMode='custom'
                           Backend payload: live → query_mode='remote'; synced/whole →
                           query_mode='materialized' with auto-built SELECT *; synced/custom
                           → query_mode='materialized' with admin SQL. Server auto-detects
                           BASE TABLE vs VIEW at register time, so the UI doesn't ask. #}
                        <div class="form-group">
                            <label class="form-label">How should analysts access this data?</label>
                            <div class="bq-access-radio-group" style="display:flex; gap:12px; margin-top:6px;">
                                <label class="sync-option-card" style="flex:1; padding:12px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
                                    <input type="radio" name="bqAccessMode" value="live" checked onchange="onBqAccessModeChange()">
                                    <strong>Live from BigQuery</strong>
                                    <div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
                                        Each analyst query goes straight to BQ. Always current.
                                        Latency ≈ seconds; 0 disk on the analyst machine; cost =
                                        bytes scanned per query. Best for huge tables or when
                                        freshness matters.
                                    </div>
                                </label>
                                <label class="sync-option-card" style="flex:1; padding:12px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
                                    <input type="radio" name="bqAccessMode" value="synced" onchange="onBqAccessModeChange()">
                                    <strong>Synced locally</strong>
                                    <div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
                                        Agnes runs a SELECT on a schedule and ships a parquet
                                        to analysts. Analyst-side latency &lt;100&nbsp;ms; disk =
                                        snapshot size. Best when analysts hit the same data
                                        often and speed beats freshness.
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="form-group bq-access-synced" style="display:none;">
                            <label class="form-label">What to sync?</label>
                            <div class="bq-sync-radio-group" style="display:flex; gap:12px; margin-top:6px;">
                                <label class="sync-option-card" style="flex:1; padding:12px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
                                    <input type="radio" name="bqSyncMode" value="whole" checked onchange="onBqSyncModeChange()">
                                    <strong>Whole table</strong>
                                    <div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
                                        Agnes runs <code>SELECT *</code> automatically. No SQL
                                        required. Disk + sync cost = full table size.
                                    </div>
                                </label>
                                <label class="sync-option-card" style="flex:1; padding:12px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
                                    <input type="radio" name="bqSyncMode" value="custom" onchange="onBqSyncModeChange()">
                                    <strong>Custom query</strong>
                                    <div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
                                        You write the SELECT — filter, project, or aggregate
                                        before the sync. Cuts disk + cost; cap via
                                        <code>max_bytes_per_materialize</code> guardrail.
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="form-group bq-source-table">
                            <label class="form-label" for="bqDataset">
                                Dataset
                                <button type="button" class="btn btn-secondary btn-sm"
                                        onclick="discoverBqDatasets()" style="float:right; margin-top:-3px;">
                                    Discover
                                </button>
                            </label>
                            <input type="text" class="form-input" id="bqDataset" list="bqDatasetList" placeholder="e.g. analytics">
                            <datalist id="bqDatasetList"></datalist>
                            <div class="form-hint">BigQuery dataset name (no project prefix — read from instance.yaml).
                                Click <strong>Discover</strong> to populate the autocomplete from the BQ project's dataset list.</div>
                        </div>
                        <div class="form-group bq-source-table">
                            <label class="form-label" for="bqSourceTable">
                                Source Table / View
                                <button type="button" class="btn btn-secondary btn-sm"
                                        onclick="discoverBqTables()" style="float:right; margin-top:-3px;">
                                    List tables
                                </button>
                            </label>
                            <input type="text" class="form-input" id="bqSourceTable" list="bqTableList" placeholder="e.g. orders">
                            <datalist id="bqTableList"></datalist>
                            <div class="form-hint">Table or view name within the dataset. Click
                                <strong>List tables</strong> after filling Dataset to populate autocomplete.
                                <br><strong>Live access:</strong> BASE TABLEs query via
                                <code>bq."dataset"."table"</code> (Storage Read API; predicate pushdown).
                                VIEWs and MATERIALIZED_VIEWs query via the BQ jobs API (full-scan estimate;
                                cost-guarded by <code>bq_max_scan_bytes</code>).
                                <code>agnes query --remote</code> works for both.
                                <br><strong>Synced access:</strong> handles both table and view transparently
                                — the scheduler runs <code>SELECT *</code> through the jobs API and writes a
                                parquet.</div>
                        </div>
                        <div class="form-group bq-source-custom" style="display:none;">
                            <label class="form-label" for="bqSourceQuery">
                                SQL
                                <button type="button" class="btn btn-secondary btn-sm"
                                        onclick="prefillFromTable()" style="float:right; margin-top:-3px;"
                                        title="Prefill SELECT * FROM `project.dataset.table` so you only edit the WHERE / projection">
                                    Use table as base
                                </button>
                            </label>
                            <textarea class="form-textarea" id="bqSourceQuery" rows="8"
                                placeholder="SELECT date, SUM(revenue) AS revenue&#10;FROM `project.dataset.orders`&#10;WHERE date >= DATE_SUB(CURRENT_DATE(), INTERVAL 90 DAY)&#10;GROUP BY 1"></textarea>
                            <div class="form-hint">
                                SELECT statement, no trailing semicolon. Native BQ identifiers
                                (<code>`project.dataset.table`</code>) recommended — DuckDB three-part
                                names like <code>bq."ds"."t"</code> work for the COPY but disable the
                                cost guardrail's BQ dry-run.
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="bqViewName">View Name</label>
                            <input type="text" class="form-input" id="bqViewName" placeholder="orders_90d">
                            <div class="form-hint">Name analysts use to query the data (e.g.
                                <code>SELECT * FROM orders_90d</code>). Required for Custom query; defaults
                                to the source table for the other modes.</div>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="bqDescription">Description <span class="optional">(optional)</span></label>
                            <textarea class="form-textarea" id="bqDescription" placeholder="Brief description of the table contents..."></textarea>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="bqFolder">Folder <span class="optional">(optional)</span></label>
                            <input type="text" class="form-input" id="bqFolder" placeholder="e.g. crm, finance, marketing">
                            <div class="form-hint">Logical grouping for catalog organization</div>
                        </div>
                        <div class="form-group bq-access-synced" style="display:none;">
                            <label class="form-label" for="bqSyncSchedule">Sync Schedule <span class="optional">(optional, default <code>every 1h</code>)</span></label>
                            <input type="text" class="form-input" id="bqSyncSchedule" placeholder="every 6h">
                            <div class="form-hint">
                                How often Agnes refreshes the local copy. Examples:
                                <code>every 15m</code>, <code>every 6h</code>,
                                <code>daily 03:00</code>, <code>daily 07:00,13:00,18:00</code> (UTC).
                            </div>
                        </div>
                        <div class="form-group" id="bqPrecheckSummary" style="display:none;">
                            <div class="form-label">Source check</div>
                            <div class="form-hint" id="bqPrecheckSummaryText"></div>
                        </div>
                        {# v49 (Task 8.8): Data Packages chip-input field.
                           The submit handler (registerBqTable) is intentionally
                           NOT wired to forward `package_ids` to /api/admin/tables
                           in this pass — backend extension lives in a focused
                           follow-up. For now the chip-input persists chosen
                           packages locally and the admin can attach via
                           `POST /api/admin/data-packages/<id>/tables` from the
                           CLI / package admin UI. #}
                        <div class="form-group">
                            <label class="form-label">Data Packages <span class="optional">(optional)</span></label>
                            <div class="chip-input"
                                 data-source-url="/api/admin/data-packages"
                                 data-allow-create="true"
                                 data-name="bq_package_ids"
                                 data-placeholder="Type to search or create…"
                                 data-chip-input="data_package"></div>
                            <div class="form-hint">Bundle this table into one or more Data Packages so analysts can opt-in to it as a group.</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" onclick="closeRegisterBqModal()">Cancel</button>
                        <button class="btn btn-primary" id="registerBqSubmitBtn" onclick="registerBqTable()">
                            Register Table
                        </button>
                    </div>
                </div>
            </div>

            <!-- ── BigQuery Edit Modal (C2 — physically inside the BQ tab,
                 mirror of #registerBqModal placement) ── -->
            <div class="modal-overlay" id="editBqModal">
                <div class="modal">
                    <div class="modal-header">
                        <h2>Edit BigQuery Table</h2>
                        <button class="modal-close" onclick="closeEditBqModal()">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="18" y1="6" x2="6" y2="18"/>
                                <line x1="6" y1="6" x2="18" y2="18"/>
                            </svg>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="form-label" for="editBqTableId">Table ID</label>
                            <input type="text" class="form-input" id="editBqTableId" readonly>
                            <div class="form-hint">Slugified id, immutable. Source type:
                                <strong id="editBqSourceTypeBadge">bigquery</strong></div>
                        </div>

                        <div class="form-group">
                            <label class="form-label">How should analysts access this data?
                                <a href="docs/admin/query-modes.md" target="_blank" title="When to use which mode" style="margin-left: 6px; text-decoration: none; cursor: help;">?</a>
                            </label>
                            <div style="display:flex; gap:12px; margin-top:6px;">
                                <label class="sync-option-card" style="flex:1; padding:10px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
                                    <input type="radio" name="editBqAccessMode" value="live" onchange="onEditBqAccessModeChange()">
                                    <strong>Live from BigQuery</strong>
                                    <div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
                                        Each query goes to BQ. No local copy.
                                    </div>
                                </label>
                                <label class="sync-option-card" style="flex:1; padding:10px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
                                    <input type="radio" name="editBqAccessMode" value="synced" onchange="onEditBqAccessModeChange()">
                                    <strong>Synced locally</strong>
                                    <div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
                                        Scheduled SELECT → parquet, queried locally.
                                    </div>
                                </label>
                            </div>
                            <div class="form-hint" id="editBqModeWarning" style="display:none;
                                 color:#EA580C;background:rgba(234,88,12,.08);padding:8px;border-radius:6px;margin-top:8px;">
                                <!-- Filled by onEditBqAccessModeChange() when switching
                                     modes on an existing row — warns about parquet
                                     drop / scheduling impact. -->
                            </div>
                        </div>
                        <div class="form-group bq-edit-access-synced" style="display:none;">
                            <label class="form-label">What to sync?</label>
                            <div style="display:flex; gap:12px; margin-top:6px;">
                                <label class="sync-option-card" style="flex:1; padding:10px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
                                    <input type="radio" name="editBqSyncMode" value="whole" onchange="onEditBqSyncModeChange()">
                                    <strong>Whole table</strong>
                                    <div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
                                        <code>SELECT *</code> on a schedule.
                                    </div>
                                </label>
                                <label class="sync-option-card" style="flex:1; padding:10px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
                                    <input type="radio" name="editBqSyncMode" value="custom" onchange="onEditBqSyncModeChange()">
                                    <strong>Custom query</strong>
                                    <div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
                                        Filter / aggregate before sync.
                                    </div>
                                </label>
                            </div>
                        </div>
                        <div class="form-group bq-edit-source-table" style="display:none;">
                            <label class="form-label" for="editBqDataset">
                                Dataset
                                <button type="button" class="btn btn-secondary btn-sm"
                                        onclick="discoverBqDatasets('editBqDatasetList')"
                                        style="float:right; margin-top:-3px;">
                                    Discover
                                </button>
                            </label>
                            <input type="text" class="form-input" id="editBqDataset"
                                   list="editBqDatasetList" placeholder="e.g. analytics">
                            <datalist id="editBqDatasetList"></datalist>
                        </div>
                        <div class="form-group bq-edit-source-table" style="display:none;">
                            <label class="form-label" for="editBqSourceTable">
                                Source Table / View
                                <button type="button" class="btn btn-secondary btn-sm"
                                        onclick="discoverBqTables('editBqDataset', 'editBqTableList')"
                                        style="float:right; margin-top:-3px;">
                                    List tables
                                </button>
                            </label>
                            <input type="text" class="form-input" id="editBqSourceTable"
                                   list="editBqTableList" placeholder="e.g. orders">
                            <datalist id="editBqTableList"></datalist>
                            <div class="form-hint">Table or view name within the dataset.
                                <br><strong>Live access:</strong> BASE TABLEs query via
                                <code>bq."dataset"."table"</code> (Storage Read API; predicate pushdown).
                                VIEWs and MATERIALIZED_VIEWs query via the BQ jobs API (full-scan estimate;
                                cost-guarded by <code>bq_max_scan_bytes</code>).
                                <code>agnes query --remote</code> works for both.
                                <br><strong>Synced access:</strong> handles both transparently — the
                                scheduler runs <code>SELECT *</code> through the jobs API and writes a
                                parquet.</div>
                        </div>
                        <div class="form-group bq-edit-source-custom" style="display:none;">
                            <label class="form-label" for="editBqSourceQuery">
                                SQL
                                <button type="button" class="btn btn-secondary btn-sm"
                                        onclick="prefillFromTable('editBqSourceQuery')"
                                        style="float:right; margin-top:-3px;"
                                        title="Prefill SELECT * FROM `project.dataset.table` so you only edit the WHERE / projection">
                                    Use table as base
                                </button>
                            </label>
                            <textarea class="form-textarea" id="editBqSourceQuery" rows="8"></textarea>
                            <div class="form-hint">SELECT statement, no trailing semicolon. Native BQ
                                identifiers recommended for the cost guardrail to engage.</div>
                        </div>
                        <div class="form-group bq-edit-access-synced" style="display:none;">
                            <label class="form-label" for="editBqSyncSchedule">Sync Schedule
                                <span class="optional">(optional)</span></label>
                            <input type="text" class="form-input" id="editBqSyncSchedule" placeholder="every 6h">
                            <div class="form-hint">How often Agnes refreshes the local copy.
                                <code>every 15m</code>, <code>every 6h</code>,
                                <code>daily 03:00</code> (UTC).</div>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="editBqDescription">Description <span class="optional">(optional)</span></label>
                            <textarea class="form-textarea" id="editBqDescription" placeholder="Brief description of the table contents..."></textarea>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="editBqFolder">Folder <span class="optional">(optional)</span></label>
                            <input type="text" class="form-input" id="editBqFolder" placeholder="e.g. crm, finance, marketing">
                            <div class="form-hint">Logical grouping for catalog organization (does not affect storage).</div>
                        </div>

                        {# Data Packages chip-input — parity with the legacy
                           and Keboola edit modals. Hydrated on open with
                           the table's current memberships; saveBqTabEdit
                           diffs against `_editBqOriginalPackageIds` and
                           emits the minimal POST/DELETE delta. #}
                        <div class="form-group">
                            <label class="form-label">Data Packages <span class="optional">(optional)</span></label>
                            <div class="chip-input"
                                 id="editBqPackagesChips"
                                 data-source-url="/api/admin/data-packages"
                                 data-allow-create="true"
                                 data-name="bq_edit_package_ids"
                                 data-placeholder="Type to search or create…"
                                 data-chip-input="data_package"></div>
                            <div class="form-hint">Bundle this table into one or more Data Packages so analysts can opt-in to it as a group.</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" onclick="closeEditBqModal()">Cancel</button>
                        <button class="btn btn-primary" id="editBqSubmitBtn" onclick="saveBqTabEdit()">
                            Save Changes
                        </button>
                    </div>
                </div>
            </div>

            <!-- ── Keboola Register Modal ── -->
            <div class="modal-overlay" id="registerKeboolaModal">
                <div class="modal">
                    <div class="modal-header">
                        <h2>Register Keboola Table</h2>
                        <button class="modal-close" onclick="closeRegisterKeboolaModal()">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="18" y1="6" x2="6" y2="18"/>
                                <line x1="6" y1="6" x2="18" y2="18"/>
                            </svg>
                        </button>
                    </div>
                    <div class="modal-body">
                        {# Three sync-mode radios:
                           - whole / custom → query_mode='materialized' (DuckDB Keboola
                             extension; whole synthesizes SELECT *, custom uses admin SQL)
                           - direct → query_mode='local' (Storage API SDK, supports
                             v26 sync strategies: incremental/partitioned + where_filters) #}
                        <div class="form-group">
                            <label class="form-label">What to sync?</label>
                            <div class="bq-sync-radio-group" style="display:flex; gap:12px; margin-top:6px; flex-wrap:wrap;">
                                <label class="sync-option-card" style="flex:1; min-width:200px; padding:12px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
                                    <input type="radio" name="kbSyncMode" value="whole" checked onchange="onKbSyncModeChange()">
                                    <strong>Whole table (extension)</strong>
                                    <div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
                                        DuckDB Keboola extension pulls the full table on
                                        each tick. Fastest path; full overwrite each run.
                                    </div>
                                </label>
                                <label class="sync-option-card" style="flex:1; min-width:200px; padding:12px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
                                    <input type="radio" name="kbSyncMode" value="direct" onchange="onKbSyncModeChange()">
                                    <strong>Direct extract (Storage API)</strong>
                                    <div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
                                        Storage API SDK. Supports incremental sync
                                        (changedSince + PK merge), partitioned files,
                                        and server-side <code>where_filters</code>.
                                    </div>
                                </label>
                                <label class="sync-option-card" style="flex:1; min-width:200px; padding:12px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
                                    <input type="radio" name="kbSyncMode" value="custom" onchange="onKbSyncModeChange()">
                                    <strong>Custom SQL</strong>
                                    <div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
                                        Pre-aggregate or filter with your own SELECT
                                        (e.g. last 30 days only, per-day rollup).
                                    </div>
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="kbViewName">View name (analyst-visible)</label>
                            <input type="text" class="form-input" id="kbViewName"
                                   placeholder="e.g. orders_recent">
                        </div>

                        {# Discover/List tables backend currently routes by instance's data_source.type
                           ignoring the `source` query param. Hiding the buttons on non-Keboola instances
                           prevents wrong-shape responses; inputs stay for manual entry. Future fix: make
                           /api/admin/discover-tables accept ?source=keboola and remove this guard. #}
                        <div class="form-group kb-source-table">
                            <label class="form-label" for="kbBucket">
                                Bucket
                                {% if data_source_type == 'keboola' %}
                                <button type="button" class="btn btn-secondary btn-sm"
                                        onclick="discoverKeboolaBuckets('kbBucketList')"
                                        style="float:right; margin-top:-3px;">Discover</button>
                                {% endif %}
                            </label>
                            <input type="text" class="form-input" id="kbBucket"
                                   list="kbBucketList" placeholder="e.g. in.c-sales">
                            <datalist id="kbBucketList"></datalist>
                        </div>
                        <div class="form-group kb-source-table">
                            <label class="form-label" for="kbSourceTable">
                                Source Table
                                {% if data_source_type == 'keboola' %}
                                <button type="button" class="btn btn-secondary btn-sm"
                                        onclick="discoverKeboolaTables('kbBucket', 'kbTableList')"
                                        style="float:right; margin-top:-3px;">List tables</button>
                                {% endif %}
                            </label>
                            <input type="text" class="form-input" id="kbSourceTable"
                                   list="kbTableList" placeholder="e.g. orders">
                            <datalist id="kbTableList"></datalist>
                        </div>
                        <div class="form-group kb-source-custom" style="display:none;">
                            <label class="form-label" for="kbSourceQuery">
                                SQL
                                {% if data_source_type == 'keboola' %}
                                <button type="button" class="btn btn-secondary btn-sm"
                                        onclick="prefillFromKeboolaTable('kbSourceQuery')"
                                        style="float:right; margin-top:-3px;"
                                        title="Prefill SELECT * FROM kbc.bucket.table so you only edit the WHERE / projection">
                                    Use table as base
                                </button>
                                {% endif %}
                            </label>
                            <textarea class="form-textarea" id="kbSourceQuery" rows="8"></textarea>
                            <div class="form-hint">SELECT against <code>kbc."bucket"."table"</code>.
                                Result is materialized to parquet and distributed via
                                <code>agnes pull</code>.</div>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="kbSyncSchedule">Sync Schedule
                                <span class="optional">(optional, default <code>every 1h</code>)</span></label>
                            <input type="text" class="form-input" id="kbSyncSchedule" placeholder="every 6h">
                            <div class="form-hint">
                                How often Agnes refreshes the local copy. Examples:
                                <code>every 15m</code>, <code>every 6h</code>,
                                <code>daily 03:00</code>, <code>daily 07:00,13:00,18:00</code> (UTC).
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="kbDescription">Description
                                <span class="optional">(optional)</span></label>
                            <textarea class="form-textarea" id="kbDescription"
                                      placeholder="Brief description of the table contents..."></textarea>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="kbFolder">Folder
                                <span class="optional">(optional)</span></label>
                            <input type="text" class="form-input" id="kbFolder"
                                   placeholder="e.g. crm, finance, marketing">
                        </div>

                        <details class="form-group">
                            <summary>Advanced (optional)</summary>
                            <div class="form-group" style="margin-top:8px;">
                                <label class="form-label" for="kbPrimaryKey">Primary Key</label>
                                <input type="text" class="form-input" id="kbPrimaryKey"
                                       placeholder="e.g. id">
                                <div class="form-hint">Comma-separated list. Required for
                                    Direct extract → Incremental (used as the dedup key on
                                    delta merge). Auto-filled from the Keboola source when
                                    available.</div>
                            </div>
                        </details>

                        <!-- v26 Direct-extract sync-strategy panel — visible only when
                             "Direct extract (Storage API)" is selected. Field visibility
                             within the panel further branches on the sync_strategy
                             dropdown (incremental / partitioned).  -->
                        <div class="form-group kb-direct-only" style="display:none; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--background);">
                            <h3 style="margin:0 0 12px 0; font-size:14px;">Direct extract — sync strategy</h3>

                            <div class="form-group">
                                <label class="form-label" for="kbStrategy">Sync strategy</label>
                                <select class="form-select" id="kbStrategy" onchange="onKbStrategyChange()">
                                    <option value="full_refresh">Full refresh — pull entire table each tick</option>
                                    <option value="incremental">Incremental — pull rows changed since last sync</option>
                                    <option value="partitioned">Partitioned — per-partition files, per-month/day/year</option>
                                </select>
                            </div>

                            <div class="form-group kb-strategy-incremental kb-strategy-partitioned" style="display:none;">
                                <label class="form-label" for="kbIncrementalWindowDays">Incremental window (days)
                                    <span class="optional">(default 7)</span></label>
                                <input type="number" class="form-input" id="kbIncrementalWindowDays" min="0" placeholder="7">
                                <div class="form-hint">Backtrack window applied to last_sync timestamp on each tick.
                                    Higher = more reliable on late-arriving rows; lower = less data per tick.</div>
                            </div>
                            <div class="form-group kb-strategy-incremental kb-strategy-partitioned" style="display:none;">
                                <label class="form-label" for="kbMaxHistoryDays">Max history (days)
                                    <span class="optional">(first sync only, default unbounded)</span></label>
                                <input type="number" class="form-input" id="kbMaxHistoryDays" min="1" placeholder="365">
                                <div class="form-hint">Cap on how far back the first-ever sync goes. Multi-year tables
                                    without this can OOM at write — set 90/180/365 for safety.</div>
                            </div>

                            <div class="form-group kb-strategy-partitioned" style="display:none;">
                                <label class="form-label" for="kbPartitionBy">Partition by column <strong>(required)</strong></label>
                                <input type="text" class="form-input" id="kbPartitionBy" placeholder="e.g. event_date">
                                <div class="form-hint">Date / timestamp column whose value drives the partition key.
                                    Rows with NULL or unparseable values are dropped (logged warning).</div>
                            </div>
                            <div class="form-group kb-strategy-partitioned" style="display:none;">
                                <label class="form-label" for="kbPartitionGranularity">Granularity</label>
                                <select class="form-select" id="kbPartitionGranularity">
                                    <option value="month">Month — YYYY_MM.parquet (default)</option>
                                    <option value="day">Day — YYYY_MM_DD.parquet</option>
                                    <option value="year">Year — YYYY.parquet</option>
                                </select>
                            </div>
                            <div class="form-group kb-strategy-partitioned" style="display:none;">
                                <label class="form-label" for="kbInitialLoadChunkDays">Initial-load chunk size (days)
                                    <span class="optional">(default 30)</span></label>
                                <input type="number" class="form-input" id="kbInitialLoadChunkDays" min="1" placeholder="30">
                                <div class="form-hint">First-sync chunked load step. Smaller = more API calls, less
                                    memory per chunk. Larger = fewer calls, more memory.</div>
                            </div>

                            <div class="form-group kb-strategy-not-incremental" style="display:none;">
                                <label class="form-label" for="kbWhereFilters">Where filters
                                    <span class="optional">(JSON array, optional)</span></label>
                                <textarea class="form-textarea" id="kbWhereFilters" rows="6"
                                          placeholder='[{"column": "date", "operator": "ge", "values": ["{{last_3_months}}"]}]'></textarea>
                                <div class="form-hint">
                                    Server-side row filter. Operators: <code>eq, ne, gt, ge, lt, le</code>.
                                    Date placeholders resolved at sync time:
                                    <code>{{ '{{today}}' }}</code>,
                                    <code>{{ '{{last_week}}' }}</code>,
                                    <code>{{ '{{last_month}}' }}</code>,
                                    <code>{{ '{{last_2_months}}' }}</code>,
                                    <code>{{ '{{last_3_months}}' }}</code>,
                                    <code>{{ '{{last_6_months}}' }}</code>,
                                    <code>{{ '{{last_year}}' }}</code>,
                                    <code>{{ '{{last_2_years}}' }}</code>,
                                    <code>{{ '{{start_of_3_months_ago}}' }}</code>.
                                    Not compatible with Incremental strategy.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" onclick="closeRegisterKeboolaModal()">Cancel</button>
                        <button class="btn btn-primary" id="registerKeboolaSubmitBtn"
                                onclick="registerKeboolaTable()">Register</button>
                    </div>
                </div>
            </div>

            <!-- ── Keboola Edit Modal (Phase F2) ── -->
            <div class="modal-overlay" id="editKeboolaModal">
                <div class="modal">
                    <div class="modal-header">
                        <h2>Edit Keboola Table</h2>
                        <button class="modal-close" onclick="closeEditKeboolaModal()">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="18" y1="6" x2="6" y2="18"/>
                                <line x1="6" y1="6" x2="18" y2="18"/>
                            </svg>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="form-label" for="editKbTableId">Table ID</label>
                            <input type="text" class="form-input" id="editKbTableId" readonly>
                            <div class="form-hint">Slugified id, immutable.</div>
                        </div>

                        {# Three sync-mode radios (mirror of Register). #}
                        <div class="form-group">
                            <label class="form-label">What to sync?</label>
                            <div class="bq-sync-radio-group" style="display:flex; gap:12px; margin-top:6px; flex-wrap:wrap;">
                                <label class="sync-option-card" style="flex:1; min-width:200px; padding:10px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
                                    <input type="radio" name="editKbSyncMode" value="whole"
                                           onchange="onEditKbSyncModeChange()">
                                    <strong>Whole table (extension)</strong>
                                    <div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
                                        DuckDB Keboola extension; full overwrite each tick.
                                    </div>
                                </label>
                                <label class="sync-option-card" style="flex:1; min-width:200px; padding:10px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
                                    <input type="radio" name="editKbSyncMode" value="direct"
                                           onchange="onEditKbSyncModeChange()">
                                    <strong>Direct extract (Storage API)</strong>
                                    <div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
                                        Storage API SDK. Supports incremental, partitioned,
                                        <code>where_filters</code>.
                                    </div>
                                </label>
                                <label class="sync-option-card" style="flex:1; min-width:200px; padding:10px; border:1px solid var(--border); border-radius:8px; cursor:pointer;">
                                    <input type="radio" name="editKbSyncMode" value="custom"
                                           onchange="onEditKbSyncModeChange()">
                                    <strong>Custom SQL</strong>
                                    <div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
                                        Pre-aggregate or filter with your own SELECT.
                                    </div>
                                </label>
                            </div>
                        </div>

                        {# Discover/List tables backend currently routes by instance's data_source.type
                           ignoring the `source` query param. Hiding the buttons on non-Keboola instances
                           prevents wrong-shape responses; inputs stay for manual entry. Future fix: make
                           /api/admin/discover-tables accept ?source=keboola and remove this guard. #}
                        <div class="form-group editkb-source-table">
                            <label class="form-label" for="editKbBucket">
                                Bucket
                                {% if data_source_type == 'keboola' %}
                                <button type="button" class="btn btn-secondary btn-sm"
                                        onclick="discoverKeboolaBuckets('editKbBucketList')"
                                        style="float:right; margin-top:-3px;">Discover</button>
                                {% endif %}
                            </label>
                            <input type="text" class="form-input" id="editKbBucket"
                                   list="editKbBucketList" placeholder="e.g. in.c-sales">
                            <datalist id="editKbBucketList"></datalist>
                        </div>
                        <div class="form-group editkb-source-table">
                            <label class="form-label" for="editKbSourceTable">
                                Source Table
                                {% if data_source_type == 'keboola' %}
                                <button type="button" class="btn btn-secondary btn-sm"
                                        onclick="discoverKeboolaTables('editKbBucket', 'editKbTableList')"
                                        style="float:right; margin-top:-3px;">List tables</button>
                                {% endif %}
                            </label>
                            <input type="text" class="form-input" id="editKbSourceTable"
                                   list="editKbTableList" placeholder="e.g. orders">
                            <datalist id="editKbTableList"></datalist>
                        </div>
                        <div class="form-group editkb-source-custom" style="display:none;">
                            <label class="form-label" for="editKbSourceQuery">
                                SQL
                                {% if data_source_type == 'keboola' %}
                                <button type="button" class="btn btn-secondary btn-sm"
                                        onclick="prefillFromKeboolaTable('editKbSourceQuery')"
                                        style="float:right; margin-top:-3px;"
                                        title="Prefill SELECT * FROM kbc.bucket.table so you only edit the WHERE / projection">
                                    Use table as base
                                </button>
                                {% endif %}
                            </label>
                            <textarea class="form-textarea" id="editKbSourceQuery" rows="8"></textarea>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="editKbSyncSchedule">Sync Schedule
                                <span class="optional">(optional)</span></label>
                            <input type="text" class="form-input" id="editKbSyncSchedule" placeholder="every 6h">
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="editKbDescription">Description
                                <span class="optional">(optional)</span></label>
                            <textarea class="form-textarea" id="editKbDescription"></textarea>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="editKbFolder">Folder
                                <span class="optional">(optional)</span></label>
                            <input type="text" class="form-input" id="editKbFolder">
                        </div>

                        <details class="form-group">
                            <summary>Advanced (optional)</summary>
                            <div class="form-group" style="margin-top:8px;">
                                <label class="form-label" for="editKbPrimaryKey">Primary Key</label>
                                <input type="text" class="form-input" id="editKbPrimaryKey"
                                       placeholder="e.g. id">
                                <div class="form-hint">Comma-separated list. Required for
                                    Direct extract → Incremental.</div>
                            </div>
                        </details>

                        <!-- v26 Direct-extract sync-strategy panel — mirror of Register. -->
                        <div class="form-group editkb-direct-only" style="display:none; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--background);">
                            <h3 style="margin:0 0 12px 0; font-size:14px;">Direct extract — sync strategy</h3>

                            <div class="form-group">
                                <label class="form-label" for="editKbStrategy">Sync strategy</label>
                                <select class="form-select" id="editKbStrategy" onchange="onEditKbStrategyChange()">
                                    <option value="full_refresh">Full refresh — pull entire table each tick</option>
                                    <option value="incremental">Incremental — pull rows changed since last sync</option>
                                    <option value="partitioned">Partitioned — per-partition files, per-month/day/year</option>
                                </select>
                            </div>

                            <div class="form-group editkb-strategy-incremental editkb-strategy-partitioned" style="display:none;">
                                <label class="form-label" for="editKbIncrementalWindowDays">Incremental window (days)
                                    <span class="optional">(default 7)</span></label>
                                <input type="number" class="form-input" id="editKbIncrementalWindowDays" min="0" placeholder="7">
                            </div>
                            <div class="form-group editkb-strategy-incremental editkb-strategy-partitioned" style="display:none;">
                                <label class="form-label" for="editKbMaxHistoryDays">Max history (days)
                                    <span class="optional">(first sync only)</span></label>
                                <input type="number" class="form-input" id="editKbMaxHistoryDays" min="1" placeholder="365">
                            </div>

                            <div class="form-group editkb-strategy-partitioned" style="display:none;">
                                <label class="form-label" for="editKbPartitionBy">Partition by column <strong>(required)</strong></label>
                                <input type="text" class="form-input" id="editKbPartitionBy" placeholder="e.g. event_date">
                            </div>
                            <div class="form-group editkb-strategy-partitioned" style="display:none;">
                                <label class="form-label" for="editKbPartitionGranularity">Granularity</label>
                                <select class="form-select" id="editKbPartitionGranularity">
                                    <option value="month">Month (default)</option>
                                    <option value="day">Day</option>
                                    <option value="year">Year</option>
                                </select>
                            </div>
                            <div class="form-group editkb-strategy-partitioned" style="display:none;">
                                <label class="form-label" for="editKbInitialLoadChunkDays">Initial-load chunk size (days)
                                    <span class="optional">(default 30)</span></label>
                                <input type="number" class="form-input" id="editKbInitialLoadChunkDays" min="1" placeholder="30">
                            </div>

                            <div class="form-group editkb-strategy-not-incremental" style="display:none;">
                                <label class="form-label" for="editKbWhereFilters">Where filters
                                    <span class="optional">(JSON array, optional)</span></label>
                                <textarea class="form-textarea" id="editKbWhereFilters" rows="6"
                                          placeholder='[{"column": "date", "operator": "ge", "values": ["{{last_3_months}}"]}]'></textarea>
                                <div class="form-hint">
                                    Operators: <code>eq, ne, gt, ge, lt, le</code>. Date placeholders
                                    (<code>{{ '{{today}}' }}</code>, <code>{{ '{{last_3_months}}' }}</code>, etc.) resolved at
                                    sync time. Not compatible with Incremental.
                                </div>
                            </div>
                        </div>

                        {# Data Packages chip-input — parity with the BQ
                           and legacy edit modals. Hydrated on open;
                           saveKeboolaTabEdit diffs vs
                           `_editKbOriginalPackageIds` on save. #}
                        <div class="form-group">
                            <label class="form-label">Data Packages <span class="optional">(optional)</span></label>
                            <div class="chip-input"
                                 id="editKbPackagesChips"
                                 data-source-url="/api/admin/data-packages"
                                 data-allow-create="true"
                                 data-name="kb_edit_package_ids"
                                 data-placeholder="Type to search or create…"
                                 data-chip-input="data_package"></div>
                            <div class="form-hint">Bundle this table into one or more Data Packages so analysts can opt-in to it as a group.</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" onclick="closeEditKeboolaModal()">Cancel</button>
                        <button class="btn btn-primary" id="editKeboolaSubmitBtn"
                                onclick="saveKeboolaTabEdit()">Save Changes</button>
                    </div>
                </div>
            </div>

    </div>

    {# Connector-based listings (Jira read-only hint, internal tables
       section, per-tab Register buttons) lived inside the now-deleted
       tab-content sections. Their content is folded into the
       package-centric layout above: every table — including jira/* and
       internal — appears under a Data Package or in Unpackaged tables.

       Register modals (registerBqModal / registerKeboolaModal) remain in
       DOM as top-level overlays and are opened from the
       "+ Register new table" dropdown in the action bar. The
       data-source-type marker lives on <body> so DATA_SOURCE_TYPE still
       has somewhere to read from. #}

    <!-- ═══════════════ EDIT MODAL (legacy fallback — Keboola-only fields
         remaining; the BQ Edit modal moved into #tab-content-bigquery as
         #editBqModal in C2; the Keboola Edit modal is #editKeboolaModal
         in #tab-content-keboola) ═══════════════ -->
    <div class="modal-overlay" id="editModal">
        <div class="modal">
            <div class="modal-header">
                <h2>Edit Table</h2>
                <button class="modal-close" onclick="closeEditModal()">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="18" y1="6" x2="6" y2="18"/>
                        <line x1="6" y1="6" x2="18" y2="18"/>
                    </svg>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label" for="editTableId">Table ID</label>
                    <input type="text" class="form-input" id="editTableId" readonly>
                    <div class="form-hint">Slugified id, immutable. Source type:
                        <strong id="editSourceTypeBadge">—</strong></div>
                </div>

                <!-- Keboola/Jira fallback fields. The richer Keboola modal
                     lives at #editKeboolaModal; this remains the catch-all
                     for any source_type that's neither bigquery nor keboola
                     (e.g. jira). -->
                <div class="form-group keboola-edit-only">
                    <label class="form-label" for="editStrategy">Sync Strategy</label>
                    <select class="form-select" id="editStrategy">
                        <option value="full_refresh">Full Refresh</option>
                        <option value="incremental">Incremental</option>
                        <option value="partitioned">Partitioned</option>
                    </select>
                </div>
                <div class="form-group keboola-edit-only">
                    <label class="form-label" for="editPrimaryKey">Primary Key</label>
                    <input type="text" class="form-input" id="editPrimaryKey" placeholder="e.g. id">
                </div>

                <div class="form-group">
                    <label class="form-label" for="editDescription">Description <span class="optional">(optional)</span></label>
                    <textarea class="form-textarea" id="editDescription" placeholder="Brief description of the table contents..."></textarea>
                </div>
                <div class="form-group">
                    <label class="form-label" for="editFolder">Folder <span class="optional">(optional)</span></label>
                    <input type="text" class="form-input" id="editFolder" placeholder="e.g. crm, finance, marketing">
                    <div class="form-hint">Logical grouping for catalog organization (does not affect storage).</div>
                </div>

                {# Data Packages chip-input — parity with the BigQuery
                   edit modal. saveTableEdit() diffs the chip selection
                   against the current membership and emits add/remove
                   junction calls so admins can manage package membership
                   without leaving the edit modal. #}
                <div class="form-group">
                    <label class="form-label">Data Packages <span class="optional">(optional)</span></label>
                    <div class="chip-input"
                         id="editGenericPackagesChips"
                         data-source-url="/api/admin/data-packages"
                         data-allow-create="true"
                         data-name="legacy_package_ids"
                         data-placeholder="Type to search or create…"
                         data-chip-input="data_package"></div>
                    <div class="form-hint">Bundle this table into one or more Data Packages so analysts can opt-in to it as a group.</div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeEditModal()">Cancel</button>
                <button class="btn btn-primary" id="editSubmitBtn" onclick="saveTableEdit()">
                    Save Changes
                </button>
            </div>
        </div>
    </div>

    <!-- ═══════════════ TOAST ═══════════════ -->
    <div class="toast" id="toast">
        <div class="toast-icon" id="toastIcon"></div>
        <span id="toastMessage"></span>
    </div>

    <!-- ═══════════════ FOOTER ═══════════════ -->
    <footer class="footer">
        <a href="{{ url_for('dashboard') }}">Back to Dashboard</a>
        </footer>

    <!-- ═══════════════ Create Data Package modal (Task 8.10) ═══════════════
         Fired from a chip-input `chip-create` event — the chip-input emits
         a CustomEvent with the typed name; the handler below opens this
         modal pre-filled, POSTs to /api/admin/data-packages, and adds the
         freshly-created chip back into the chip-input host via .addChip(). -->
    <div class="modal-overlay" id="createDataPackageModal" style="display:none;">
      <div class="modal" style="max-width:520px;">
        <div class="modal-header">
          <h2>Create Data Package</h2>
          <button class="modal-close" onclick="closeCreateDataPackageModal()">×</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label">Name</label>
            <input id="cdp-name" type="text" class="form-input" placeholder="Sales bundle">
          </div>
          <div class="form-group">
            <label class="form-label">Slug</label>
            <input id="cdp-slug" type="text" class="form-input" placeholder="sales-bundle">
            <div class="form-hint">URL-safe identifier; auto-derived from Name.</div>
          </div>
          <div class="form-group">
            <label class="form-label">Description <span class="optional">(optional)</span></label>
            <textarea id="cdp-desc" class="form-textarea" rows="2"></textarea>
          </div>
          {# v51 lifecycle + classification — drive the hero filter
             checkboxes on /catalog and the eyebrow line above the
             card title. Both fields are admin-facing only and have
             safe defaults (status=prod, category=null). #}
          <div class="form-group" style="display:flex; gap:12px;">
            <div style="flex:1;">
              <label class="form-label">Status</label>
              <select id="cdp-status" class="form-input" style="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 — visible but not usable yet</option>
                <option value="draft">Draft — admin-only, hidden from analysts</option>
              </select>
            </div>
            <div style="flex:1;">
              <label class="form-label">Category <span class="optional">(optional)</span></label>
              <input id="cdp-category" type="text" class="form-input"
                     placeholder="e.g. Sessions &amp; Traffic">
              <div class="form-hint">Eyebrow line above the card title. Keep it short and consistent.</div>
            </div>
          </div>
          <div class="form-group" style="display:flex; gap:12px;">
            <div style="flex:1;">
              <label class="form-label">Icon</label>
              <input id="cdp-icon" type="text" class="form-input" value="📦" maxlength="4">
            </div>
            <div style="flex:1;">
              <label class="form-label">Color</label>
              {# v51 palette row — admin clicks a swatch to set #cdp-color.
                 Free-form picker stays below as the escape hatch. Palette
                 is a vendor-neutral design-system set (teal/blue/violet/
                 pink/red/amber/emerald/slate) — no brand colors. #}
              <div class="cf-palette-row" data-target="cdp-color"></div>
              {# type=color forces the native swatch picker so admins can't
                 type/append a malformed hex into the field. #}
              <input id="cdp-color" type="color" class="form-input" value="#e0f2fe"
                     style="height:32px; padding:2px; cursor:pointer;">
            </div>
          </div>
          {# Cover image upload (v50). When set, the /catalog card renders
             <img src=cover_image_url> instead of letter initials — closes
             the visual gap with /marketplace cards. PNG/JPEG/GIF/WebP, 5
             MiB cap server-side. #}
          <div class="form-group">
            <label class="form-label">Cover image <span class="optional">(optional)</span></label>
            <div style="display:flex; gap:12px; align-items:center;">
              <div id="cdp-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="cdp-cover-file" type="file"
                       accept="image/png,image/jpeg,image/gif,image/webp"
                       onchange="onCoverFilePicked(this, 'cdp')">
                <input id="cdp-cover-url" type="hidden" value="">
                <div class="form-hint">PNG / JPEG / GIF / WebP, max 5 MiB. Uploads on Save.</div>
              </div>
            </div>
          </div>

          {# Inline RBAC matrix — replaces the modal-on-modal step-2 that
             popped up after Create succeeded. <details> is collapsed by
             default so the modal stays compact for admins who'll set
             access later via the Resource Access page; opening it loads
             the group list lazily. submitCreateDataPackage() reads any
             chosen requirements and POSTs grants in parallel. #}
          <details class="form-group" id="cdp-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 class="form-hint" style="margin:8px 0;">
              Grant per-group access tiers — <em>available</em> shows the
              package in the group's Browse; <em>required</em>
              auto-installs it into the group's stack on next pull. Leave
              everything blank to manage access later from
              <a href="/admin/access">Resource access</a>.
            </p>
            <div id="cdp-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 class="modal-footer">
          <button class="btn btn-secondary" onclick="closeCreateDataPackageModal()">Cancel</button>
          <button class="btn btn-primary" id="cdp-submit-btn" onclick="submitCreateDataPackage()">
            Create &amp; assign
          </button>
        </div>
      </div>
    </div>

    <script>
      // ── Cover image upload helpers (v50) ─────────────────────────────
      // Shared between Create / Edit Data Package modals. The `prefix`
      // arg is the modal's id prefix (`cdp` or `edp`); same DOM-id
      // convention `<prefix>-cover-file`, `<prefix>-cover-url`,
      // `<prefix>-cover-preview`. Uploads on file pick (not on Save) so
      // the admin gets an immediate preview + failure-feedback loop;
      // the URL stashed in the hidden input rides along on the eventual
      // Save POST/PUT body.
      async function onCoverFilePicked(input, prefix) {
        const file = input.files && input.files[0];
        if (!file) return;
        const previewEl = document.getElementById(prefix + '-cover-preview');
        const urlEl = document.getElementById(prefix + '-cover-url');
        if (file.size > 5 * 1024 * 1024) {
          alert('Image is too large (max 5 MiB).');
          input.value = '';
          return;
        }
        previewEl.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));
            previewEl.textContent = 'No image';
            input.value = '';
            return;
          }
          const body = await r.json();
          urlEl.value = body.url;
          previewEl.innerHTML = '';
          var img = document.createElement('img');
          img.src = body.url;
          img.alt = '';
          img.style.cssText = 'width:100%;height:100%;object-fit:cover;display:block;';
          previewEl.appendChild(img);
        } catch (e) {
          alert('Network error: ' + e.message);
          previewEl.textContent = 'No image';
          input.value = '';
        }
      }
      function clearCoverImage(prefix) {
        // Empty string is the API contract for "remove the existing cover".
        // The Save handler reads the hidden input and ships it as-is.
        document.getElementById(prefix + '-cover-url').value = '';
        document.getElementById(prefix + '-cover-file').value = '';
        var p = document.getElementById(prefix + '-cover-preview');
        p.innerHTML = 'No image';
        p.dataset.cleared = '1';
      }
      function _renderCoverPreview(prefix, url) {
        var p = document.getElementById(prefix + '-cover-preview');
        if (!p) return;
        if (url) {
          p.innerHTML = '';
          var img = document.createElement('img');
          img.src = url;
          img.alt = '';
          img.style.cssText = 'width:100%;height:100%;object-fit:cover;display:block;';
          p.appendChild(img);
        } else {
          p.innerHTML = 'No image';
        }
      }

      // Track which chip-input host triggered the create flow so we can
      // append the new chip back into it on success.
      let _cdpHost = null;

      function openCreateDataPackageModal(typed, host) {
        _cdpHost = host;
        document.getElementById('cdp-name').value = typed || '';
        document.getElementById('cdp-slug').value =
          (typed || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
        document.getElementById('cdp-desc').value = '';
        document.getElementById('cdp-icon').value = '📦';
        document.getElementById('cdp-color').value = '#e0f2fe';
        // Reset cover image inputs on every open so a previous typed-and-
        // cancelled value doesn't leak into the new package.
        var coverUrl = document.getElementById('cdp-cover-url');
        var coverFile = document.getElementById('cdp-cover-file');
        if (coverUrl) coverUrl.value = '';
        if (coverFile) coverFile.value = '';
        _renderCoverPreview('cdp', '');
        document.getElementById('createDataPackageModal').style.display = 'flex';
      }
      function closeCreateDataPackageModal() {
        _cdpHost = null;
        // Re-collapse + invalidate the lazy-loaded RBAC matrix so the
        // next "+ New Data Package" starts with a clean, unloaded state.
        const det = document.getElementById('cdp-rbac-details');
        if (det) det.open = false;
        _cdpRbacLoaded = false;
        document.getElementById('createDataPackageModal').style.display = 'none';
      }

      // ── Edit Data Package modal ──────────────────────────────────────
      // Opened from the Edit button on each /admin/tables package card.
      // Loads pkg metadata + member tables; lets admin rename / change
      // description / icon / color / delete; remove member tables inline.
      async function openEditDataPackageModal(pkgId) {
        document.getElementById('editDataPackageModal').style.display = 'flex';
        document.getElementById('edp-id').value = pkgId;
        document.getElementById('edp-tables-list').innerHTML =
          '<div style="padding:12px; color:#5f6368;">Loading…</div>';
        try {
          const r = await fetch('/api/admin/data-packages/' + encodeURIComponent(pkgId),
                                { credentials: 'same-origin' });
          if (!r.ok) throw new Error('HTTP ' + r.status);
          const pkg = await r.json();
          document.getElementById('edp-name').value = pkg.name || '';
          document.getElementById('edp-slug').value = pkg.slug || '';
          document.getElementById('edp-desc').value = pkg.description || '';
          document.getElementById('edp-icon').value = pkg.icon || '';
          document.getElementById('edp-color').value = pkg.color || '#e0f2fe';
          // v51: pre-fill status + category from the loaded package.
          document.getElementById('edp-status').value = pkg.status || 'prod';
          document.getElementById('edp-category').value = pkg.category || '';
          // v50: hydrate cover image (URL + preview); clear the file
          // input so a previous typed-and-cancelled file doesn't leak.
          var coverUrl = document.getElementById('edp-cover-url');
          var coverFile = document.getElementById('edp-cover-file');
          var coverPreview = document.getElementById('edp-cover-preview');
          if (coverPreview) delete coverPreview.dataset.cleared;
          if (coverFile) coverFile.value = '';
          if (coverUrl) coverUrl.value = pkg.cover_image_url || '';
          _renderCoverPreview('edp', pkg.cover_image_url || '');
          renderEdpTablesList(pkg.tables || []);
          // Reset inline-add panel state (hidden + empty list) so it
          // starts clean each open.
          var addPanel = document.getElementById('edp-inline-add');
          if (addPanel) addPanel.style.display = 'none';
        } catch (e) {
          alert('Failed to load package: ' + e.message);
          closeEditDataPackageModal();
        }
      }
      function closeEditDataPackageModal() {
        // Reset the RBAC matrix the same way Create does — collapse the
        // <details>, invalidate the loaded flag so the next open
        // re-fetches against the (possibly different) package's grants.
        const det = document.getElementById('edp-rbac-details');
        if (det) det.open = false;
        _edpRbacLoaded = false;
        _edpRbacOriginal = {};
        document.getElementById('editDataPackageModal').style.display = 'none';
      }

      // ── Edit DP RBAC matrix — lazy hydrate + diff-on-save ──────────
      // Mirrors the Create flow's _cdpHydrate / _submit helpers but
      // pre-fills the per-group dropdowns from existing grants so the
      // matrix shows reality, not a blank slate. _edpRbacOriginal keeps
      // a {groupId: requirement|""} snapshot taken at load time so the
      // save handler can diff and only emit the minimum POST/DELETE.
      let _edpRbacLoaded = false;
      let _edpRbacOriginal = {};
      async function _edpHydrateRbacMatrix() {
        if (_edpRbacLoaded) return;
        const pkgId = document.getElementById('edp-id').value;
        const rowsEl = document.getElementById('edp-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=data_package',
                  { 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();
          // Build group_id → requirement map for THIS package only.
          // Multiple grants per (group, resource) shouldn't happen (UNIQUE
          // constraint on the table) but be defensive — last write wins.
          const current = {};
          (grants || []).forEach(g => {
            if (g.resource_id !== pkgId) return;
            current[g.group_id] = g.requirement;
          });
          _edpRbacOriginal = 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="edp-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('');
          _edpRbacLoaded = 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 === 'edp-rbac-details' && e.target.open) {
          _edpHydrateRbacMatrix();
        }
      }, true);

      // Diff current dropdown state vs _edpRbacOriginal; emit grant
      // POST / DELETE calls in parallel. Returns failure count so the
      // save handler can surface it in the toast.
      async function _edpDiffApplyGrants(pkgId) {
        // No-op when the admin never opened the <details>; original
        // snapshot is empty and dropdowns aren't in the DOM.
        if (!_edpRbacLoaded) return 0;
        const rows = document.querySelectorAll('#edp-rbac-rows [data-group-id]');
        const calls = [];
        // Track which group_ids the admin touched so deletes target the
        // right grant_id. For DELETE we need to look up the grant by
        // (group_id, resource_id, resource_type) — fetch fresh list to
        // get ids. Cheaper to re-fetch once than store ids client-side.
        const wantDelete = [];   // [group_id]
        const wantWrite = [];    // [{group_id, requirement}]
        rows.forEach(row => {
          const gid = row.getAttribute('data-group-id');
          const sel = row.querySelector('.edp-rbac-req');
          const cur = (sel && sel.value) || '';
          const orig = _edpRbacOriginal[gid] || '';
          if (cur === orig) return;
          if (!cur) {
            // Cleared — DELETE the existing grant.
            wantDelete.push(gid);
          } else {
            // New or changed requirement — DELETE-then-POST (resource_
            // grants UNIQUE constraint forbids two rows on the same
            // (group, resource, type) so we can't just upsert).
            if (orig) wantDelete.push(gid);
            wantWrite.push({ group_id: gid, requirement: cur });
          }
        });

        if (!wantDelete.length && !wantWrite.length) return 0;

        // Resolve grant_ids for deletes via a fresh list. /admin/grants
        // doesn't take resource_id as a query filter so we fetch all
        // data_package grants and filter client-side; the set is small
        // enough for any realistic instance.
        let grantIdByGroup = {};
        if (wantDelete.length) {
          const lr = await fetch('/api/admin/grants?resource_type=data_package',
                                 { credentials: 'same-origin' });
          if (lr.ok) {
            const arr = await lr.json();
            arr.forEach(g => {
              if (g.resource_id !== pkgId) return;
              grantIdByGroup[g.group_id] = g.id;
            });
          }
        }
        // Sequential DELETE → POST. ``resource_grants`` has a UNIQUE
        // constraint on (group_id, resource_type, resource_id); running
        // both in parallel via ``Promise.allSettled`` raced — if the
        // POST landed first, the unique check rejected it and the old
        // ``available`` row stayed. Awaiting all DELETEs before any
        // POST fires keeps the (group, resource) slot empty for the
        // re-insert.
        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: 'data_package',
              resource_id: pkgId,
              requirement: w.requirement,
            }),
          }))
        );
        const results = deleteResults.concat(writeResults);
        return results.filter(
          r => r.status === 'rejected' || (r.value && !r.value.ok)
        ).length;
      }
      function renderEdpTablesList(tables) {
        const el = document.getElementById('edp-tables-list');
        if (!tables.length) {
          el.innerHTML = '<div style="padding:12px; color:#5f6368; font-size:13px;">'
            + 'No tables in this package yet. Click <strong>+ Add tables</strong> above.</div>';
          return;
        }
        el.innerHTML = tables.map(function(t) {
          const id = String(t.id || '');
          const name = String(t.name || id);
          return ''
            + '<div style="display:flex; align-items:center; justify-content:space-between; '
            +           'padding:8px 12px; border-bottom:1px solid var(--border-light, #f0f0f0);">'
            + '  <span style="font-size:13px; color:#202124;">' + escapeHtml(name) + '</span>'
            + '  <button class="btn" type="button" style="padding:3px 10px; font-size:11px; color:#b91c1c;" '
            +          'onclick="removeTableFromPackage(\'' + escapeHtmlAttr(id) + '\')">Remove</button>'
            + '</div>';
        }).join('');
      }
      async function removeTableFromPackage(tableId) {
        const pkgId = document.getElementById('edp-id').value;
        if (!confirm('Remove this table from the package?')) return;
        const r = await fetch('/api/admin/data-packages/' + encodeURIComponent(pkgId)
                              + '/tables/' + encodeURIComponent(tableId),
                              { method: 'DELETE', credentials: 'same-origin' });
        if (!r.ok) { alert('Remove failed: HTTP ' + r.status); return; }
        // Refresh the table list inline.
        const r2 = await fetch('/api/admin/data-packages/' + encodeURIComponent(pkgId),
                               { credentials: 'same-origin' });
        if (r2.ok) renderEdpTablesList((await r2.json()).tables || []);
      }
      async function submitEditDataPackage() {
        const btn = document.getElementById('edp-save-btn');
        btn.disabled = true;
        try {
          const pkgId = document.getElementById('edp-id').value;
          // v50 cover image semantics:
          //  - cleared via Remove button → preview has dataset.cleared, send ""
          //  - new image uploaded         → hidden input has the new URL
          //  - left unchanged             → hidden input still holds the
          //                                 previous URL, send it unchanged
          //                                 (no-op on the server because the
          //                                 value matches)
          var coverPreview = document.getElementById('edp-cover-preview');
          var coverUrl = document.getElementById('edp-cover-url').value;
          var coverField = (coverPreview && coverPreview.dataset.cleared === '1')
            ? '' : (coverUrl || null);
          const payload = {
            name: document.getElementById('edp-name').value.trim(),
            description: document.getElementById('edp-desc').value.trim() || null,
            icon: document.getElementById('edp-icon').value.trim() || null,
            color: document.getElementById('edp-color').value.trim() || null,
            cover_image_url: coverField,
            // v51: pass status + category through. Empty-string category
            // hits the clear_category branch server-side; status uses the
            // dropdown's current value (never blank).
            status: document.getElementById('edp-status').value || 'prod',
            category: document.getElementById('edp-category').value.trim(),
          };
          const r = await fetch('/api/admin/data-packages/' + encodeURIComponent(pkgId), {
            method: 'PUT',
            credentials: 'same-origin',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload),
          });
          if (!r.ok) {
            const detail = await r.json().catch(function() { return {}; });
            alert('Save failed: ' + (detail.detail || r.statusText));
            btn.disabled = false;
            return;
          }
          // Apply any RBAC matrix changes — diff vs snapshot taken at
          // load time, emits only the minimum POST/DELETE pair per
          // changed row. No-op when admin never opened the <details>.
          const rbacFails = await _edpDiffApplyGrants(pkgId);
          if (rbacFails > 0) {
            if (typeof showToast === 'function') {
              showToast(rbacFails + ' group access change(s) failed', 'error');
            } else {
              alert(rbacFails + ' group access change(s) failed.');
            }
          }
          closeEditDataPackageModal();
          if (typeof loadDataPackagesSection === 'function') loadDataPackagesSection();
        } catch (e) {
          alert('Network error: ' + e.message);
          btn.disabled = false;
        }
      }
      // ── Inline +Add-tables picker (v50) ─────────────────────────────
      // User feedback: the legacy "+ Add tables" button closed Edit and
      // opened Bulk Assign, losing the admin's mental context. The
      // picker below stays inline: pulls /api/admin/registry, filters
      // out tables already in this package + internal rows, lets the
      // admin tick what they want, then POSTs each to the package
      // without closing the modal.
      let _edpInlineAddTables = [];
      function toggleEdpInlineAdd() {
        var panel = document.getElementById('edp-inline-add');
        if (!panel) return;
        if (panel.style.display === 'block') {
          panel.style.display = 'none';
          return;
        }
        panel.style.display = 'block';
        loadEdpInlineAddTables();
      }
      async function loadEdpInlineAddTables() {
        var listEl = document.getElementById('edp-inline-add-list');
        var pkgId = document.getElementById('edp-id').value;
        listEl.innerHTML = '<div style="padding:8px; color:var(--text-secondary); font-size:12px;">'
          + 'Loading unassigned tables…</div>';
        try {
          // Pull all tables and the current package member set in parallel.
          var [allResp, pkgResp] = await Promise.all([
            fetch('/api/admin/registry', { credentials: 'same-origin' }),
            fetch('/api/admin/data-packages/' + encodeURIComponent(pkgId),
                  { credentials: 'same-origin' }),
          ]);
          if (!allResp.ok || !pkgResp.ok) {
            listEl.innerHTML = '<div style="padding:8px; color:#b91c1c;">'
              + 'Failed to load tables (' + allResp.status + ' / ' + pkgResp.status + ').</div>';
            return;
          }
          var allBody = await allResp.json();
          var allTables = Array.isArray(allBody)
            ? allBody
            : (Array.isArray(allBody.tables) ? allBody.tables : []);
          var pkg = await pkgResp.json();
          var memberIds = new Set((pkg.tables || []).map(function(t) { return t.id; }));
          // Show only non-internal tables that aren't already in the package.
          _edpInlineAddTables = allTables.filter(function(t) {
            return (t.source_type || '') !== 'internal' && !memberIds.has(t.id);
          });
          renderEdpInlineAddList();
        } catch (e) {
          listEl.innerHTML = '<div style="padding:8px; color:#b91c1c;">'
            + 'Network error: ' + escapeHtml(e.message) + '</div>';
        }
      }
      function renderEdpInlineAddList() {
        var listEl = document.getElementById('edp-inline-add-list');
        if (!_edpInlineAddTables.length) {
          listEl.innerHTML = '<div style="padding:8px; color:var(--text-secondary); font-size:12px;">'
            + 'All non-internal tables are already in this package.</div>';
          return;
        }
        listEl.innerHTML = _edpInlineAddTables.map(function(t) {
          var id = String(t.id || '');
          var name = String(t.name || id);
          var st = String(t.source_type || '');
          var bucket = String(t.bucket || '');
          var meta = [st, bucket].filter(Boolean).join(' · ');
          return ''
            + '<label data-edp-add-id="' + escapeHtmlAttr(id) + '" '
            + '       data-edp-add-name="' + escapeHtmlAttr(name.toLowerCase()) + '" '
            + '       style="display:flex; gap:8px; align-items:center; padding:4px 6px; '
            +              'border-radius:4px; cursor:pointer; font-size:13px;">'
            + '  <input type="checkbox" class="edp-add-cb" value="' + escapeHtmlAttr(id) + '">'
            + '  <span style="flex:1; font-family:var(--font-mono);">' + escapeHtml(name) + '</span>'
            + (meta ? '  <span style="font-size:11px; color:var(--text-secondary);">'
                       + escapeHtml(meta) + '</span>' : '')
            + '</label>';
        }).join('');
      }
      function filterEdpInlineAdd() {
        var q = (document.getElementById('edp-inline-add-search').value || '').toLowerCase();
        document.querySelectorAll('#edp-inline-add-list label[data-edp-add-id]').forEach(function(row) {
          var name = row.getAttribute('data-edp-add-name') || '';
          row.style.display = (!q || name.indexOf(q) !== -1) ? '' : 'none';
        });
      }
      async function submitEdpInlineAdd() {
        var pkgId = document.getElementById('edp-id').value;
        var btn = document.getElementById('edp-inline-add-submit-btn');
        var selected = Array.from(document.querySelectorAll('.edp-add-cb:checked'))
          .map(function(cb) { return cb.value; });
        if (!selected.length) {
          alert('Pick at least one table to add.');
          return;
        }
        btn.disabled = true;
        try {
          // POST each table_id; idempotent on the server so retrying after
          // partial failure is safe. Parallel — the user-visible latency
          // is the slowest individual call, not the sum.
          var calls = selected.map(function(tid) {
            return fetch('/api/admin/data-packages/' + encodeURIComponent(pkgId) + '/tables', {
              method: 'POST',
              credentials: 'same-origin',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ table_id: tid }),
            }).then(function(r) { return { tid: tid, ok: r.ok, status: r.status }; });
          });
          var results = await Promise.all(calls);
          var fails = results.filter(function(r) { return !r.ok; });
          if (fails.length) {
            alert(fails.length + ' of ' + results.length + ' add(s) failed.');
          }
          // Refresh the package's table list inline (no modal close).
          var r2 = await fetch('/api/admin/data-packages/' + encodeURIComponent(pkgId),
                               { credentials: 'same-origin' });
          if (r2.ok) renderEdpTablesList((await r2.json()).tables || []);
          // Reload the inline-add candidate list so the just-added rows
          // disappear (member set has changed).
          await loadEdpInlineAddTables();
          // Background-refresh the top-level Data Packages section so
          // the new table counts show up after the user closes the modal.
          if (typeof loadDataPackagesSection === 'function') loadDataPackagesSection();
        } catch (e) {
          alert('Network error: ' + e.message);
        } finally {
          btn.disabled = false;
        }
      }

      async function deleteEditDataPackage() {
        const pkgId = document.getElementById('edp-id').value;
        const name = document.getElementById('edp-name').value.trim();
        // v54: soft delete with Undo toast. confirm() removed — the
        // 10s Undo on the toast is the recovery affordance; double
        // safety (confirm + undo) is friction without payoff. Junction
        // rows (data_package_tables) + resource_grants survive intact
        // so restore brings the package back whole.
        const r = await fetch('/api/admin/data-packages/' + encodeURIComponent(pkgId),
                              { method: 'DELETE', credentials: 'same-origin' });
        if (!r.ok) { alert('Delete failed: HTTP ' + r.status); return; }
        closeEditDataPackageModal();
        if (typeof loadDataPackagesSection === 'function') loadDataPackagesSection();
        if (typeof window.showUndoToast === 'function') {
          window.showUndoToast(
            'Data Package "' + name + '" deleted.',
            '/api/admin/data-packages/' + encodeURIComponent(pkgId) + '/restore',
            () => {
              if (typeof loadDataPackagesSection === 'function') loadDataPackagesSection();
            },
          );
        }
      }
      // Auto-derive a url-safe slug from a Name string. Mirrors the
      // server-side normalisation used by the seed step in _v48_to_v49.
      function _deriveSlug(name) {
        return (name || '').toLowerCase()
          .replace(/[^a-z0-9]+/g, '-')
          .replace(/^-|-$/g, '');
      }
      async function submitCreateDataPackage() {
        const btn = document.getElementById('cdp-submit-btn');
        btn.disabled = true;
        try {
          const nameVal = document.getElementById('cdp-name').value.trim();
          // Auto-derive slug from name when the slug field is blank —
          // fixes the silent-fail-on-empty-slug bug where the form just
          // stayed open with no error if the user typed Name and clicked
          // Create without focusing-out of the Name input.
          let slugVal = document.getElementById('cdp-slug').value.trim();
          if (!slugVal && nameVal) {
            slugVal = _deriveSlug(nameVal);
            document.getElementById('cdp-slug').value = slugVal;
          }
          // v50: cover_image_url is set by onCoverFilePicked() when the
          // admin selects + uploads a file. If they didn't, it stays
          // empty — send null so the server doesn't see "".
          var cdpCoverUrl = document.getElementById('cdp-cover-url').value;
          const payload = {
            name: nameVal,
            slug: slugVal,
            description: document.getElementById('cdp-desc').value.trim() || null,
            icon: document.getElementById('cdp-icon').value.trim() || null,
            color: document.getElementById('cdp-color').value.trim() || null,
            cover_image_url: cdpCoverUrl || null,
            // v51: lifecycle status + classification category.
            status: document.getElementById('cdp-status').value || 'prod',
            category: document.getElementById('cdp-category').value.trim() || null,
          };
          if (!payload.name || !payload.slug) {
            alert('Name is required (slug auto-derives from it).');
            btn.disabled = false;
            return;
          }
          const r = await fetch('/api/admin/data-packages', {
            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 newPkgId = body.id;
          if (_cdpHost && _cdpHost.addChip) {
            _cdpHost.addChip({ id: newPkgId, name: payload.name });
          }

          // Inline grants — read any per-group requirement the admin set
          // in the collapsible "Group access" section and POST in parallel.
          // Per-grant failures surface in the success toast; they don't
          // roll back the package creation (admin can retry from
          // /admin/access).
          const grantFailures = await _submitCdpGrantsInline(newPkgId);

          closeCreateDataPackageModal();

          if (typeof loadDataPackagesSection === 'function') {
            try { loadDataPackagesSection(); } catch (_) {}
          }
          if (typeof showToast === 'function') {
            const baseMsg = 'Data Package "' + 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> is opened. Subsequent opens are no-ops. Groups are
      // small + admin-only data — cache for the lifetime of the modal.
      let _cdpRbacLoaded = false;
      async function _cdpHydrateRbacMatrix() {
        if (_cdpRbacLoaded) return;
        const rowsEl = document.getElementById('cdp-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="cdp-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('');
          _cdpRbacLoaded = true;
        } catch (e) {
          rowsEl.innerHTML = '<div style="padding:8px; color:var(--error); font-size:12px;">Failed to load groups: ' + e.message + '</div>';
        }
      }
      // Wire the lazy load on first <details> open. Re-fetched if the
      // admin re-opens a fresh modal (closeCreateDataPackageModal resets
      // the flag).
      document.addEventListener('toggle', (e) => {
        if (e.target && e.target.id === 'cdp-rbac-details' && e.target.open) {
          _cdpHydrateRbacMatrix();
        }
      }, true);

      async function _submitCdpGrantsInline(pkgId) {
        const rows = document.querySelectorAll('#cdp-rbac-rows [data-group-id]');
        const calls = [];
        rows.forEach(row => {
          const gid = row.getAttribute('data-group-id');
          const sel = row.querySelector('.cdp-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: 'data_package',
              resource_id: pkgId,
              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-on-modal — folded into the
      // create modal's collapsible "Group access" section. Stubs kept
      // for callers that may still reference these names; they're no-ops
      // now. Safe to delete in a follow-up once the audit confirms no
      // other call sites. ──
      let _cdpNewId = null;
      let _cdpNewName = null;

      function openCreateDataPackageRbacModal() { /* deprecated — inlined */ }
      function skipCreateDataPackageRbac() {
        if (typeof loadDataPackagesSection === 'function') {
          loadDataPackagesSection();
        }
      }
      function submitCreateDataPackageRbac() { /* deprecated — inlined */ }

      // Hook: chip-input on this page fires `chip-create` when the user
      // selects the "+ Create new" tail row in the dropdown.
      document.addEventListener('chip-create', (e) => {
        const host = e.detail && e.detail.host;
        if (host && host.dataset.chipInput === 'data_package') {
          openCreateDataPackageModal(e.detail.typed, host);
        }
      });

      // ── Bulk-assign tables → package ─────────────────────────
      // Single round-trip per table on submit (the existing
      // POST /api/admin/data-packages/{id}/tables endpoint takes one
      // table_id per call) but parallel via Promise.allSettled so the
      // user-visible latency is the slowest individual call rather
      // than the sum. Idempotent on the server, so re-submitting after
      // a partial failure only retries the ones that didn't land.
      let _bulkAssignPackages = [];   // [{id, name, member_table_ids:Set}]
      let _bulkAssignTables = [];     // [{id, name, source_type, bucket}]

      /* One-click factory: read table_registry → group by `bucket` →
         create one Data Package per distinct bucket (skipping any whose
         slug already exists) → bulk-assign its tables. Answers the
         "why do I have to package by hand what's already grouped?"
         friction for admins with many registered tables.

         Sequential rather than parallel because the assign-table POSTs
         depend on the package_id from the create POST. ~100ms per
         bucket which is fine for the handful most instances have. */
      // Bucket plan (loaded once when the preview modal opens; consumed
      // by submitGroupByBucket). { bucket, slug, tables[], slugExists }
      var _gbbPlan = [];

      function closeGroupByBucketModal() {
        document.getElementById('groupByBucketPreviewModal').style.display = 'none';
      }

      function _gbbSlugify(s) {
        return (s || '').toLowerCase()
          .replace(/[^a-z0-9]+/g, '-')
          .replace(/^-|-$/g, '');
      }

      async function groupTablesByBucket() {
        // Build the plan + render the preview modal. Replaces the old
        // confirm() that just said "yes/no to ALL buckets" — admins now
        // see which buckets would become packages, the row count per
        // bucket, the resulting slug, and which ones would be skipped
        // because a package with that slug already exists.
        const rowsEl = document.getElementById('gbb-rows');
        rowsEl.innerHTML = '<div class="loading" style="padding:8px; color:var(--text-secondary); font-size:13px;">Loading buckets…</div>';
        document.getElementById('groupByBucketPreviewModal').style.display = 'flex';

        try {
          const [tableResp, pkgResp] = await Promise.all([
            fetch('/api/admin/registry', { credentials: 'same-origin' }),
            fetch('/api/admin/data-packages', { credentials: 'same-origin' }),
          ]);
          if (!tableResp.ok || !pkgResp.ok) {
            rowsEl.innerHTML = '<div style="padding:8px; color:var(--error); font-size:13px;">Failed to load tables or packages.</div>';
            return;
          }
          const tables = await tableResp.json();
          const existingPackages = await pkgResp.json();
          const tableList = Array.isArray(tables) ? tables : (tables.items || tables.tables || []);
          const existingSlugs = new Set((existingPackages || []).map(p => p.slug));

          const buckets = {};
          for (const t of tableList) {
            const b = (t.bucket || '').trim();
            if (!b || b.startsWith('agnes_')) continue;
            buckets[b] = buckets[b] || [];
            buckets[b].push(t);
          }
          const bucketNames = Object.keys(buckets).sort();
          if (!bucketNames.length) {
            rowsEl.innerHTML = '<div style="padding:8px; color:var(--text-secondary); font-size:13px;">No buckets to group. Register some tables first.</div>';
            return;
          }

          _gbbPlan = bucketNames.map(function (bucket) {
            const slug = _gbbSlugify(bucket);
            return {
              bucket: bucket,
              slug: slug,
              tables: buckets[bucket],
              slugExists: existingSlugs.has(slug),
            };
          });

          rowsEl.innerHTML = _gbbPlan.map(function (p, i) {
            const disabled = p.slugExists;
            const note = disabled
              ? '<span style="color:var(--warning); font-size:11px; margin-left:6px;">(slug exists — will skip)</span>'
              : '';
            return ''
              + '<label style="display:flex; align-items:center; gap:10px; padding:6px 8px; '
              +              'border:1px solid var(--border); border-radius:6px; '
              +              'background:' + (disabled ? 'var(--background)' : 'var(--surface)') + ';">'
              + '  <input type="checkbox" class="gbb-row" data-idx="' + i + '" '
              +         (disabled ? 'disabled' : 'checked') + '>'
              + '  <span style="flex:1; font-weight:600; font-size:13px;">'
              +    escapeHtml(p.bucket)
              + '    <code style="font-weight:normal; font-size:11px; color:var(--text-secondary); margin-left:6px;">' + escapeHtml(p.slug) + '</code>'
              +      note
              + '  </span>'
              + '  <span style="color:var(--text-secondary); font-size:12px;">'
              +    p.tables.length + ' table' + (p.tables.length === 1 ? '' : 's')
              + '  </span>'
              + '</label>';
          }).join('');
        } catch (e) {
          rowsEl.innerHTML = '<div style="padding:8px; color:var(--error); font-size:13px;">Failed: ' + escapeHtml(e.message) + '</div>';
        }
      }

      async function submitGroupByBucket() {
        const btn = document.getElementById('gbb-submit-btn');
        const checks = document.querySelectorAll('#gbb-rows input.gbb-row:checked');
        if (!checks.length) {
          showToast('No buckets selected.', 'error');
          return;
        }
        btn.disabled = true;
        const picks = Array.from(checks).map(function (el) {
          return _gbbPlan[parseInt(el.dataset.idx, 10)];
        }).filter(Boolean);

        const created = [], failed = [];
        for (const p of picks) {
          const cResp = await fetch('/api/admin/data-packages', {
            method: 'POST',
            credentials: 'same-origin',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              name: p.bucket,
              slug: p.slug,
              description: 'Auto-grouped from bucket `' + p.bucket + '` — ' + p.tables.length + ' tables.',
              icon: null,
              color: '#e0f2fe',
            }),
          });
          if (!cResp.ok) { failed.push(p.bucket); continue; }
          const pkg = await cResp.json();
          await Promise.all(p.tables.map(function (t) {
            return fetch('/api/admin/data-packages/' + encodeURIComponent(pkg.id) + '/tables', {
              method: 'POST',
              credentials: 'same-origin',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ table_id: t.id }),
            }).catch(function () { /* swallowed; count via created total */ });
          }));
          created.push(p.bucket);
        }

        btn.disabled = false;
        closeGroupByBucketModal();
        if (failed.length) {
          showToast('Created ' + created.length + ', failed ' + failed.length + ': ' + failed.join(', '), 'error');
        } else {
          showToast('Created ' + created.length + ' package' + (created.length === 1 ? '' : 's'), 'success');
        }
        if (typeof loadDataPackagesSection === 'function') loadDataPackagesSection();
      }

      async function openBulkAssignModal(preselectPkgId) {
        document.getElementById('bulkAssignTablesModal').style.display = 'flex';
        document.getElementById('bulk-assign-search').value = '';
        // Load packages + tables in parallel.
        const [pkgResp, tableResp] = await Promise.all([
          fetch('/api/admin/data-packages', { credentials: 'same-origin' }),
          fetch('/api/admin/registry', { credentials: 'same-origin' }),
        ]);
        const sel = document.getElementById('bulk-assign-package');
        const list = document.getElementById('bulk-assign-list');
        if (!pkgResp.ok) {
          sel.innerHTML = '<option value="">Failed to load packages</option>';
          list.innerHTML = '<div style="padding:12px; color:#b91c1c;">HTTP '
            + pkgResp.status + ' on /api/admin/data-packages</div>';
          return;
        }
        if (!tableResp.ok) {
          sel.innerHTML = '<option value="">Failed to load tables</option>';
          list.innerHTML = '<div style="padding:12px; color:#b91c1c;">HTTP '
            + tableResp.status + ' on /api/admin/registry</div>';
          return;
        }
        const pkgs = await pkgResp.json();
        const tableBody = await tableResp.json();
        // /api/admin/registry returns {tables, count}; defend against shape drift.
        _bulkAssignTables = Array.isArray(tableBody)
          ? tableBody
          : (Array.isArray(tableBody.tables) ? tableBody.tables : []);
        // Drop internal rows — same filter the /catalog empty-state uses.
        _bulkAssignTables = _bulkAssignTables.filter(function(t) {
          return (t.source_type || '') !== 'internal';
        });
        // Fetch each package's member tables in parallel so we can pre-check
        // already-assigned rows (and gray them out — server is idempotent
        // but skipping the no-op call keeps the audit log clean).
        const memberFetches = pkgs.map(function(p) {
          return fetch('/api/admin/data-packages/' + encodeURIComponent(p.id),
                       { credentials: 'same-origin' })
            .then(function(r) { return r.ok ? r.json() : null; })
            .catch(function() { return null; });
        });
        const memberBodies = await Promise.all(memberFetches);
        _bulkAssignPackages = pkgs.map(function(p, i) {
          const det = memberBodies[i] || {};
          const ids = new Set((det.tables || []).map(function(t) { return t.id; }));
          return { id: p.id, name: p.name, member_table_ids: ids };
        });
        // Inline "+ Create new package…" as a sentinel value. The change
        // handler below intercepts __create__ and runs a tiny prompt-based
        // flow (name → POST → re-list → re-select) so the user can spawn
        // a target without leaving the bulk-assign workflow.
        //
        // v55 — also annotate each option with "(N of M tables already in)"
        // so the admin sees the existing distribution before picking a
        // target. M = number of visible/grantable tables in this modal;
        // N = how many of those are already in that package. Surfaces the
        // implicit "this package is half-full of what I'm about to assign"
        // signal the admin previously had to derive by clicking through.
        const totalVisible = _bulkAssignTables.length;
        sel.innerHTML = '<option value="">— Choose a package —</option>'
          + '<option value="__create__" style="font-weight:600;">+ Create new package…</option>'
          + _bulkAssignPackages.map(function(p) {
              let overlap = 0;
              _bulkAssignTables.forEach(function(t) {
                if (p.member_table_ids.has(String(t.id))) overlap++;
              });
              const distHint = overlap > 0
                ? ' (' + overlap + ' of ' + totalVisible + ' already in)'
                : '';
              return '<option value="' + escapeHtmlAttr(p.id) + '">'
                + escapeHtml(p.name) + escapeHtml(distHint) + '</option>';
            }).join('');
        sel.onchange = async function() {
          if (sel.value !== '__create__') { refreshBulkAssignAvailability(); return; }
          const name = prompt('Name for the new Data Package:');
          if (!name || !name.trim()) { sel.value = ''; return; }
          const slug = _deriveSlug(name.trim());
          const r = await fetch('/api/admin/data-packages', {
            method: 'POST',
            credentials: 'same-origin',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              name: name.trim(),
              slug,
              description: null,
              icon: null,
              color: '#e0f2fe',
            }),
          });
          if (!r.ok) {
            const detail = await r.json().catch(function() { return {}; });
            alert('Create failed: ' + (detail.detail || r.statusText));
            sel.value = '';
            return;
          }
          const created = await r.json();
          // Append to the in-memory list + the <select>; preserve any
          // already-checked table rows by NOT re-rendering the list.
          _bulkAssignPackages.push({
            id: created.id, name: name.trim(),
            member_table_ids: new Set(),
          });
          const opt = document.createElement('option');
          opt.value = created.id;
          opt.textContent = name.trim();
          sel.appendChild(opt);
          sel.value = created.id;
          refreshBulkAssignAvailability();
        };
        if (preselectPkgId && _bulkAssignPackages.some(function(p) { return p.id === preselectPkgId; })) {
          sel.value = preselectPkgId;
        }
        renderBulkAssignList();
        refreshBulkAssignAvailability();
      }

      function closeBulkAssignModal() {
        document.getElementById('bulkAssignTablesModal').style.display = 'none';
        // Drop the ?assign_to= query param so a manual refresh doesn't
        // re-open the modal — but only when it was the param that opened
        // us; otherwise leave the URL untouched.
        if (window.location.search.indexOf('assign_to=') !== -1) {
          history.replaceState(null, '', window.location.pathname + window.location.hash);
        }
      }

      function renderBulkAssignList() {
        const list = document.getElementById('bulk-assign-list');
        if (!_bulkAssignTables.length) {
          list.innerHTML = '<div style="padding:12px; color:#5f6368;">'
            + 'No tables registered yet — register some via the connector tabs first.</div>';
          return;
        }
        list.innerHTML = _bulkAssignTables.map(function(t) {
          const id = String(t.id || '');
          const name = String(t.name || id);
          const st = String(t.source_type || '');
          const bucket = String(t.bucket || '');
          const meta = [st, bucket].filter(Boolean).join(' · ');
          return ''
            + '<label data-table-id="' + escapeHtmlAttr(id) + '" '
            + '       data-table-name="' + escapeHtmlAttr(name.toLowerCase()) + '" '
            + '       data-table-source="' + escapeHtmlAttr(st.toLowerCase()) + '" '
            + '       style="display:flex; gap:8px; align-items:center; padding:6px; border-radius:4px; cursor:pointer;">'
            + '  <input type="checkbox" class="bulk-assign-cb" value="' + escapeHtmlAttr(id) + '">'
            + '  <span style="flex:1; font-family:var(--font-mono);">' + escapeHtml(name) + '</span>'
            + (meta ? '  <span style="font-size:12px; color:#5f6368;">' + escapeHtml(meta) + '</span>' : '')
            + '</label>';
        }).join('');
      }

      // Re-render the per-row "already assigned" hints whenever the
      // target package changes — keeps the UI in sync with reality
      // without a re-fetch (member sets were cached at open time).
      function refreshBulkAssignAvailability() {
        const pkgId = document.getElementById('bulk-assign-package').value;
        const pkg = _bulkAssignPackages.find(function(p) { return p.id === pkgId; });
        const members = pkg ? pkg.member_table_ids : new Set();
        document.querySelectorAll('#bulk-assign-list label').forEach(function(row) {
          const tid = row.getAttribute('data-table-id');
          const cb = row.querySelector('.bulk-assign-cb');
          const already = members.has(tid);
          // Wipe any existing badge before re-applying.
          const oldBadge = row.querySelector('.bulk-assign-badge');
          if (oldBadge) oldBadge.remove();
          if (already) {
            cb.checked = true;
            cb.disabled = true;
            row.style.opacity = '0.5';
            const badge = document.createElement('span');
            badge.className = 'bulk-assign-badge';
            badge.textContent = 'already in package';
            badge.style.cssText = 'font-size:11px; color:#10b77f; padding:2px 6px; '
              + 'border:1px solid #10b77f33; border-radius:10px;';
            row.appendChild(badge);
          } else {
            cb.disabled = false;
            row.style.opacity = '';
            // Only auto-uncheck rows that we previously force-checked —
            // don't clobber the user's manual selection on package switch.
          }
        });
      }

      function filterBulkAssignList() {
        const q = (document.getElementById('bulk-assign-search').value || '').toLowerCase();
        document.querySelectorAll('#bulk-assign-list label').forEach(function(row) {
          if (!q) { row.style.display = ''; return; }
          const name = row.getAttribute('data-table-name') || '';
          const src = row.getAttribute('data-table-source') || '';
          row.style.display = (name.includes(q) || src.includes(q)) ? '' : 'none';
        });
      }

      function toggleAllBulkAssign(checked) {
        document.querySelectorAll('#bulk-assign-list label').forEach(function(row) {
          if (row.style.display === 'none') return;
          const cb = row.querySelector('.bulk-assign-cb');
          if (cb && !cb.disabled) cb.checked = checked;
        });
      }

      async function submitBulkAssign() {
        const pkgId = document.getElementById('bulk-assign-package').value;
        if (!pkgId) {
          alert('Pick a target Data Package first.');
          return;
        }
        const pkg = _bulkAssignPackages.find(function(p) { return p.id === pkgId; });
        const alreadyMembers = pkg ? pkg.member_table_ids : new Set();
        const tableIds = Array.from(
          document.querySelectorAll('#bulk-assign-list .bulk-assign-cb:checked')
        )
          .map(function(cb) { return cb.value; })
          // Skip the disabled-already-member rows — the server would no-op,
          // but avoiding the call keeps audit_log noise down.
          .filter(function(id) { return !alreadyMembers.has(id); });
        if (!tableIds.length) {
          alert('Nothing to assign — pick at least one table not already in the package.');
          return;
        }
        const btn = document.getElementById('bulk-assign-submit-btn');
        btn.disabled = true;
        btn.textContent = 'Assigning ' + tableIds.length + '…';
        try {
          const calls = tableIds.map(function(tid) {
            return fetch('/api/admin/data-packages/' + encodeURIComponent(pkgId) + '/tables', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              credentials: 'same-origin',
              body: JSON.stringify({ table_id: tid }),
            }).then(function(r) { return { tid: tid, ok: r.ok, status: r.status }; })
              .catch(function(e) { return { tid: tid, ok: false, status: 0, err: String(e) }; });
          });
          const results = await Promise.all(calls);
          const fails = results.filter(function(r) { return !r.ok; });
          if (fails.length) {
            alert(fails.length + ' of ' + results.length + ' failed. '
              + 'First failure: ' + fails[0].tid + ' (HTTP ' + fails[0].status + ').');
          }
          closeBulkAssignModal();
          // Refresh the top-level grid so newly-bundled package counts update.
          if (typeof loadDataPackagesSection === 'function') {
            loadDataPackagesSection();
          }
        } finally {
          btn.disabled = false;
          btn.textContent = 'Assign selected';
        }
      }

      // ── Auto-open Bulk Assign on ?assign_to=<pkg_id> ────────
      // Lands here from the /catalog "0 tables — assign some →" CTA.
      // Wait one tick so the loadDataPackagesSection hydrator has a
      // chance to populate the package grid first (cosmetic — keeps
      // the page background populated when the modal opens).
      function initBulkAssignFromQuery() {
        try {
          const params = new URLSearchParams(window.location.search);
          const pid = params.get('assign_to');
          if (pid) {
            setTimeout(function() { openBulkAssignModal(pid); }, 50);
          }
        } catch (e) { /* no-op */ }
      }
      document.addEventListener('DOMContentLoaded', initBulkAssignFromQuery);
    </script>

    {# (removed) Create Data Package RBAC step-2 modal — the per-group
       Available|Required matrix is now an inline collapsible section
       inside #createDataPackageModal (#cdp-rbac-details). The modal-on-
       modal pattern was confusing per user feedback. #}

    <!-- ═══════════════ Bulk-assign tables → package ═══════════════
         Replaces the 50-clicks workflow ("edit each table individually
         and add it via the chip-input inside its modal") with one
         dropdown + multi-select submit. Driven by the "Bulk assign
         tables" button on the Data Packages section header AND by the
         /catalog "0 tables — assign some →" CTA which lands here with
         ?assign_to=<pkg_id> (see initBulkAssignFromQuery). -->
    <!-- ═══════════════ Edit Data Package modal ═══════════════
         Opened from the Edit button on each card in the Data Packages
         section. Lets admin rename + change description / icon / color,
         see + remove member tables, and delete the package. -->
    <div class="modal-overlay" id="editDataPackageModal" style="display:none;">
      <div class="modal" style="max-width:680px;">
        <div class="modal-header">
          <h2>Edit Data Package</h2>
          <button class="modal-close" onclick="closeEditDataPackageModal()">×</button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="edp-id">
          <div class="form-group">
            <label class="form-label">Name</label>
            <input id="edp-name" type="text" class="form-input">
          </div>
          <div class="form-group">
            <label class="form-label">Slug</label>
            <input id="edp-slug" type="text" class="form-input" disabled
                   style="opacity:0.6;" title="Slug is permanent — used in URLs and grants">
            <div class="form-hint">Slug is permanent.</div>
          </div>
          <div class="form-group">
            <label class="form-label">Description</label>
            <textarea id="edp-desc" class="form-textarea" rows="2"></textarea>
          </div>
          <div class="form-group" style="display:flex; gap:12px;">
            <div style="flex:1;">
              <label class="form-label">Status</label>
              <select id="edp-status" class="form-input" style="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 — visible but not usable yet</option>
                <option value="draft">Draft — admin-only, hidden from analysts</option>
              </select>
            </div>
            <div style="flex:1;">
              <label class="form-label">Category <span class="optional">(optional)</span></label>
              <input id="edp-category" type="text" class="form-input"
                     placeholder="e.g. Sessions &amp; Traffic">
            </div>
          </div>
          <div class="form-group" style="display:flex; gap:12px;">
            <div style="flex:1;">
              <label class="form-label">Icon</label>
              <input id="edp-icon" type="text" class="form-input" maxlength="4">
            </div>
            <div style="flex:1;">
              <label class="form-label">Color</label>
              <div class="cf-palette-row" data-target="edp-color"></div>
              <input id="edp-color" type="color" class="form-input"
                     style="height:32px; padding:2px; cursor:pointer;">
            </div>
          </div>
          {# Cover image upload (v50). Preview shows the current cover when
             one is set, with an inline Remove button that sends ""
             (empty-string-means-clear contract in the PUT endpoint). #}
          <div class="form-group">
            <label class="form-label">Cover image <span class="optional">(optional)</span></label>
            <div style="display:flex; gap:12px; align-items:center;">
              <div id="edp-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="edp-cover-file" type="file"
                       accept="image/png,image/jpeg,image/gif,image/webp"
                       onchange="onCoverFilePicked(this, 'edp')">
                <input id="edp-cover-url" type="hidden" value="">
                <div class="form-hint">
                  PNG / JPEG / GIF / WebP, max 5 MiB.
                  <button type="button" class="btn btn-secondary btn-sm"
                          style="margin-left:6px; padding:2px 8px; font-size:11px;"
                          onclick="clearCoverImage('edp')">Remove image</button>
                </div>
              </div>
            </div>
          </div>

          {# v50: inline +Add-tables picker. The old "Add tables" button
             closed this Edit modal and opened Bulk Assign, losing the
             admin's mental context. The picker below stays inline: a
             multi-select of unassigned tables + an Add-selected button
             that POSTs without closing the modal. The legacy Bulk Assign
             modal stays available from the section header outside the
             Edit modal. #}
          <div class="form-group" style="border-top:1px solid var(--border); padding-top:14px; margin-top:14px;">
            <label class="form-label" style="display:flex; align-items:center; justify-content:space-between;">
              <span>Tables in this package</span>
              <button class="btn btn-secondary" type="button" style="padding:4px 10px; font-size:12px;"
                      onclick="toggleEdpInlineAdd()">
                + Add tables
              </button>
            </label>
            <div id="edp-inline-add" style="display:none; margin-bottom:8px; padding:8px;
                 border:1px dashed var(--border); border-radius:6px; background:var(--background);">
              <div style="display:flex; gap:6px; margin-bottom:6px;">
                <input id="edp-inline-add-search" type="search" class="form-input"
                       placeholder="Filter unassigned tables…"
                       style="flex:1;" oninput="filterEdpInlineAdd()">
              </div>
              <div id="edp-inline-add-list"
                   style="max-height:180px; overflow-y:auto; padding:4px;
                          background:var(--surface); border:1px solid var(--border-light);
                          border-radius:4px;">
                <div style="padding:8px; color:var(--text-secondary); font-size:12px;">
                  Loading unassigned tables…
                </div>
              </div>
              <div style="display:flex; justify-content:flex-end; gap:6px; margin-top:6px;">
                <button class="btn btn-secondary btn-sm" type="button"
                        onclick="toggleEdpInlineAdd()">Cancel</button>
                <button class="btn btn-primary btn-sm" type="button"
                        id="edp-inline-add-submit-btn"
                        onclick="submitEdpInlineAdd()">Add selected</button>
              </div>
            </div>
            <div id="edp-tables-list" class="card-body" style="padding:0; max-height:240px; overflow-y:auto; border:1px solid var(--border); border-radius:8px;"></div>
          </div>

          {# Inline Group Access matrix — admin can mark this package as
             available / required for each group right from the edit
             modal (mirroring the Create flow). Lazy-loaded on first
             open of the <details>; pre-filled from the package's
             existing resource_grants rows so the dropdowns reflect
             reality. On save, diffs vs the original snapshot and
             emits POST / DELETE /api/admin/grants to bring the server
             in sync. Closes the "Data Package nikde nejde nastavit
             required" user-reported gap. #}
          <details class="form-group" id="edp-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 class="form-hint" style="margin:8px 0;">
              <em>required</em> auto-installs the package into the group's
              stack on next pull; <em>available</em> lets the group see + opt
              in from /catalog; <em>(no grant)</em> hides it. Changes apply
              when you click <strong>Save changes</strong>.
            </p>
            <div id="edp-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 class="modal-footer" style="justify-content:space-between;">
          <button class="btn" type="button" style="color:#b91c1c; border-color:#fca5a5;"
                  onclick="deleteEditDataPackage()">Delete package</button>
          <div style="display:flex; gap:8px;">
            <button class="btn btn-secondary" onclick="closeEditDataPackageModal()">Cancel</button>
            <button class="btn btn-primary" id="edp-save-btn" onclick="submitEditDataPackage()">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    {# Group-by-bucket preview modal — replaces the old confirm(). Lets
       the admin see each distinct bucket, its table count, the resulting
       slug, and whether it would be skipped because a package with that
       slug already exists. Uncheck rows to opt out individually. #}
    <div class="modal-overlay" id="groupByBucketPreviewModal" style="display:none;">
      <div class="modal" style="max-width:640px;">
        <div class="modal-header">
          <h2>Create a Data Package per bucket</h2>
          <button class="modal-close" onclick="closeGroupByBucketModal()">×</button>
        </div>
        <div class="modal-body">
          <p class="form-hint" style="margin-bottom:12px;">
            One package will be created per checked bucket below.
            Existing tables in any package are left in place (the junction
            INSERT is idempotent).
          </p>
          <div id="gbb-rows"
               style="display:flex; flex-direction:column; gap:6px; max-height:50vh; overflow-y:auto;
                      border:1px solid var(--border); border-radius:8px; padding:8px;">
            <div class="loading" style="padding:8px; color:var(--text-secondary); font-size:13px;">
              Loading buckets…
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" onclick="closeGroupByBucketModal()">Cancel</button>
          <button class="btn btn-primary" id="gbb-submit-btn"
                  onclick="submitGroupByBucket()">Create checked</button>
        </div>
      </div>
    </div>

    <div class="modal-overlay" id="bulkAssignTablesModal" style="display:none;">
      <div class="modal" style="max-width:680px;">
        <div class="modal-header">
          <h2>Bulk assign tables to package</h2>
          <button class="modal-close" onclick="closeBulkAssignModal()">×</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label" for="bulk-assign-package">Target Data Package</label>
            <select id="bulk-assign-package" class="form-input"
                    style="width:100%;"
                    onchange="refreshBulkAssignAvailability()">
              <option value="">— Loading packages —</option>
            </select>
            <div class="form-hint">Pick the package the selected tables should be bundled into.</div>
          </div>
          <div class="form-group">
            <label class="form-label">Tables</label>
            <div style="display:flex; gap:8px; align-items:center; margin:6px 0;">
              <input id="bulk-assign-search" type="search" class="form-input"
                     placeholder="Filter tables by name / source…"
                     style="flex:1;" oninput="filterBulkAssignList()">
              <button type="button" class="btn btn-secondary btn-sm"
                      onclick="toggleAllBulkAssign(true)">Select visible</button>
              <button type="button" class="btn btn-secondary btn-sm"
                      onclick="toggleAllBulkAssign(false)">Clear</button>
            </div>
            <div id="bulk-assign-list"
                 style="border:1px solid var(--border); border-radius:6px;
                        max-height:50vh; overflow-y:auto; padding:6px;">
              <div style="padding:12px; color:#5f6368;">Loading tables…</div>
            </div>
            <div class="form-hint" id="bulk-assign-hint">
              Already-assigned tables are checked + disabled so re-submitting
              this modal is a no-op against them.
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" onclick="closeBulkAssignModal()">Cancel</button>
          <button class="btn btn-primary" id="bulk-assign-submit-btn"
                  onclick="submitBulkAssign()">
            Assign selected
          </button>
        </div>
      </div>
    </div>
{% endblock %}

{% block scripts %}
<script>
    /* ═══════════════════════════════════════════════════════════════
       Admin Tables - JavaScript
       ═══════════════════════════════════════════════════════════════ */

    // ── Register-new-table dropdown ─────────────────────────────
    // Replaces the per-connector tab nav. The user picks the connector
    // here only to choose which register modal to open; otherwise the
    // page is package-centric and source_type is just an inline tag.
    function toggleRegisterNewTableMenu(evt) {
        if (evt) evt.stopPropagation();
        var menu = document.getElementById('registerNewTableMenu');
        if (!menu) return;
        menu.style.display = (menu.style.display === 'block') ? 'none' : 'block';
    }
    function closeRegisterNewTableMenu() {
        var menu = document.getElementById('registerNewTableMenu');
        if (menu) menu.style.display = 'none';
    }
    document.addEventListener('click', function(e) {
        var btn = document.getElementById('registerNewTableBtn');
        var menu = document.getElementById('registerNewTableMenu');
        if (!btn || !menu) return;
        if (btn.contains(e.target) || menu.contains(e.target)) return;
        menu.style.display = 'none';
    });

    // State
    let registryData = null;
    let registryVersion = null;
    let currentEditTableId = null;

    // ── Toast notification ──────────────────────────────────────

    function showToast(message, type) {
        var toast = document.getElementById('toast');
        var icon = document.getElementById('toastIcon');
        var msg = document.getElementById('toastMessage');

        toast.className = 'toast toast-' + type;
        msg.textContent = message;

        if (type === 'success') {
            icon.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#10B77F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>';
        } else {
            icon.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#EA580C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>';
        }

        // Show
        requestAnimationFrame(function() {
            toast.classList.add('visible');
        });

        // Hide after 4 seconds
        setTimeout(function() {
            toast.classList.remove('visible');
        }, 4000);
    }

    // ── Format helpers ──────────────────────────────────────────

    function formatNumber(n) {
        if (n == null) return '-';
        if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
        if (n >= 1000) return n.toLocaleString();
        return String(n);
    }

    function formatSize(bytes) {
        if (bytes == null || bytes === 0) return '-';
        if (bytes >= 1073741824) return (bytes / 1073741824).toFixed(1) + ' GB';
        if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + ' MB';
        if (bytes >= 1024) return (bytes / 1024).toFixed(1) + ' KB';
        return bytes + ' B';
    }

    function escapeHtml(str) {
        if (!str) return '';
        var div = document.createElement('div');
        div.textContent = str;
        return div.innerHTML;
    }

    /**
     * Escape a string for safe inclusion inside a single- OR double-quoted
     * HTML attribute. Unlike `escapeHtml` (which goes through textContent →
     * innerHTML and only escapes `<`/`>`/`&`), this also escapes both quote
     * characters so the value can't break out of the attribute. Issue #265.
     */
    function escapeHtmlAttr(str) {
        if (str === null || str === undefined) return '';
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
    }

    // Defensive normalization for descriptions registered via shell-quoting
    // tooling that injected literal backslash escapes (e.g. `Don\'t`, `\n`).
    // Mirrors _unescape_shell_quoting in app/api/admin.py — applied at render
    // time so already-stored corrupt rows still display readably.
    function unescapeShellQuoting(s) {
        if (!s) return s;
        // Order matters: protect real backslashes via NUL sentinel first,
        // unescape the well-known sequences, then restore real backslashes.
        return s
            .replace(/\\\\/g, '')
            .replace(/\\n/g, '\n')
            .replace(/\\r/g, '\r')
            .replace(/\\t/g, '\t')
            .replace(/\\'/g, "'")
            .replace(/\\"/g, '"')
            .replace(//g, '\\');
    }

    // C3: removed dead Discovery panel JS. The global Discovery card +
    // its #discoverBtn / #discoveryResults DOM hooks were removed when
    // the per-tab UI landed; per-tab Discover/List datalist helpers live
    // in the per-source shims further down. The legacy "Register" button
    // rendered per discovery row also went away — operators register
    // through the per-tab Register modals.

    // ── Registration Modal ──────────────────────────────────────

    // Server-rendered marker so the JS knows the instance's data source
    // type. Lives on <body> after C3 (previously on the now-removed
    // #registerModal).
    var DATA_SOURCE_TYPE = document.body.dataset.sourceType || 'keboola';

    function openRegisterModal(arg) {
        // Phase E + F: dispatch by string argument.
        //   'bigquery' → BQ tab Register button → #registerBqModal.
        //   'keboola'  → Keboola tab Register button → #registerKeboolaModal.
        if (arg === 'bigquery') {
            return _openBqRegisterModal({});
        }
        if (arg === 'keboola') {
            return _openKeboolaTabRegisterModal();
        }
        // Fallback when called with no argument — pick by instance type.
        if (DATA_SOURCE_TYPE === 'bigquery') {
            return _openBqRegisterModal({});
        }
        return _openKeboolaTabRegisterModal();
    }

    function _openBqRegisterModal(table) {
        // BQ uses a manual-entry form (no discovery panel for BQ in M1).
        // `table` may be partially populated by a future M2 prefill —
        // tolerate either an empty call or a {bucket, source_table, ...}
        // shape from a hypothetical future prefill.
        table = table || {};
        document.getElementById('bqDataset').value = table.bucket || '';
        document.getElementById('bqSourceTable').value = table.source_table || table.name || '';
        document.getElementById('bqViewName').value = table.name || '';
        document.getElementById('bqDescription').value = '';
        document.getElementById('bqFolder').value = '';
        document.getElementById('bqSyncSchedule').value = '';
        var summary = document.getElementById('bqPrecheckSummary');
        if (summary) summary.style.display = 'none';
        var btn = document.getElementById('registerBqSubmitBtn');
        btn.disabled = false;
        btn.textContent = 'Register Table';
        btn.onclick = registerBqTable;
        document.getElementById('registerBqModal').classList.add('active');
    }

    // C3: removed dead helpers _openKeboolaRegisterModal /
    // closeRegisterModal that drove the now-deleted #registerModal.
    // The Phase F #registerKeboolaModal owns the Keboola flow now.

    function closeRegisterBqModal() {
        document.getElementById('registerBqModal').classList.remove('active');
    }

    // ── Keboola tab register modal (Phase F1) ──────────────────────

    function _openKeboolaTabRegisterModal() {
        // Reset form to defaults each open. Whole mode is the default
        // (Q2='whole'); the kb-source-table fields are visible.
        var modal = document.getElementById('registerKeboolaModal');
        if (!modal) return;
        var radio = modal.querySelector('input[name="kbSyncMode"][value="whole"]');
        if (radio) radio.checked = true;
        ['kbViewName', 'kbBucket', 'kbSourceTable', 'kbSourceQuery',
         'kbSyncSchedule', 'kbDescription', 'kbFolder', 'kbPrimaryKey',
         // v26 Direct-extract fields — reset so a stale value from a prior
         // open doesn't leak into the next registration.
         'kbIncrementalWindowDays', 'kbMaxHistoryDays', 'kbPartitionBy',
         'kbInitialLoadChunkDays', 'kbWhereFilters'].forEach(function(id) {
            var el = document.getElementById(id);
            if (el) el.value = '';
        });
        // Default v26 dropdowns
        var kbStrategyEl = document.getElementById('kbStrategy');
        if (kbStrategyEl) kbStrategyEl.value = 'full_refresh';
        var kbGranEl = document.getElementById('kbPartitionGranularity');
        if (kbGranEl) kbGranEl.value = 'month';
        onKbSyncModeChange();  // apply default visibility
        var btn = document.getElementById('registerKeboolaSubmitBtn');
        btn.disabled = false;
        btn.textContent = 'Register';
        modal.classList.add('active');
    }

    function closeRegisterKeboolaModal() {
        document.getElementById('registerKeboolaModal').classList.remove('active');
    }

    function _getKbSyncMode() {
        var el = document.querySelector('input[name="kbSyncMode"]:checked');
        return el ? el.value : 'whole';
    }

    function onKbSyncModeChange() {
        var mode = _getKbSyncMode();
        // Whole + Direct both need bucket/source_table inputs; only Custom hides them
        document.querySelectorAll('.kb-source-table').forEach(function(el) {
            el.style.display = (mode === 'custom') ? 'none' : '';
        });
        document.querySelectorAll('.kb-source-custom').forEach(function(el) {
            el.style.display = (mode === 'custom') ? '' : 'none';
        });
        // v26 strategy panel — Direct mode only
        document.querySelectorAll('.kb-direct-only').forEach(function(el) {
            el.style.display = (mode === 'direct') ? '' : 'none';
        });
        if (mode === 'direct') onKbStrategyChange();
    }

    function _getKbStrategy() {
        var el = document.getElementById('kbStrategy');
        return el ? el.value : 'full_refresh';
    }

    function _kbStrategyVisibility(el, s) {
        // Single-pass visibility check that handles elements tagged with
        // multiple strategy classes (e.g. window_days has both
        // kb-strategy-incremental + kb-strategy-partitioned because the
        // field is shared). Using two separate forEach loops would race —
        // the second loop hiding what the first showed.
        if (el.classList.contains('kb-strategy-not-incremental')) {
            return s !== 'incremental';
        }
        // Element is visible if its class list mentions the active strategy
        return el.classList.contains('kb-strategy-' + s);
    }

    function onKbStrategyChange() {
        var s = _getKbStrategy();
        document.querySelectorAll(
            '.kb-direct-only .kb-strategy-incremental, ' +
            '.kb-direct-only .kb-strategy-partitioned, ' +
            '.kb-direct-only .kb-strategy-not-incremental'
        ).forEach(function(el) {
            el.style.display = _kbStrategyVisibility(el, s) ? '' : 'none';
        });
    }

    function _intOrNull(id) {
        var raw = (document.getElementById(id).value || '').trim();
        if (!raw) return null;
        var n = parseInt(raw, 10);
        return isNaN(n) ? null : n;
    }

    function _parseFiltersJSONOrThrow(id) {
        var raw = (document.getElementById(id).value || '').trim();
        if (!raw) return null;
        try {
            return JSON.parse(raw);
        } catch (e) {
            throw new Error('where_filters: invalid JSON — ' + e.message);
        }
    }

    function _buildKeboolaPayload() {
        // Three modes:
        //   whole / custom → query_mode='materialized' (DuckDB Keboola extension)
        //   direct         → query_mode='local' + v26 sync_strategy fields
        //                    (Storage API SDK, supports incremental/partitioned/where_filters)
        var mode = _getKbSyncMode();
        var viewName = (document.getElementById('kbViewName').value || '').trim();
        var bucket = (document.getElementById('kbBucket').value || '').trim();
        var sourceTable = (document.getElementById('kbSourceTable').value || '').trim();
        var pk = (document.getElementById('kbPrimaryKey').value || '').trim();
        var primaryKey = pk
            ? pk.split(',').map(function(s) { return s.trim(); }).filter(Boolean)
            : [];

        if (mode === 'direct') {
            var strategy = _getKbStrategy();
            var payload = {
                name: viewName || sourceTable,
                source_type: 'keboola',
                query_mode: 'local',
                bucket: bucket,
                source_table: sourceTable,
                primary_key: primaryKey,
                sync_strategy: strategy,
                sync_schedule: (document.getElementById('kbSyncSchedule').value || '').trim() || null,
                description: (document.getElementById('kbDescription').value || '').trim() || null,
                folder: (document.getElementById('kbFolder').value || '').trim() || null,
            };
            if (strategy === 'incremental' || strategy === 'partitioned') {
                payload.incremental_window_days = _intOrNull('kbIncrementalWindowDays');
                payload.max_history_days = _intOrNull('kbMaxHistoryDays');
            }
            if (strategy === 'partitioned') {
                payload.partition_by = (document.getElementById('kbPartitionBy').value || '').trim() || null;
                payload.partition_granularity = document.getElementById('kbPartitionGranularity').value || null;
                payload.initial_load_chunk_days = _intOrNull('kbInitialLoadChunkDays');
            }
            if (strategy !== 'incremental') {
                payload.where_filters = _parseFiltersJSONOrThrow('kbWhereFilters');
            }
            return payload;
        }

        // Materialized paths (whole / custom)
        var common = {
            name: viewName || sourceTable,
            source_type: 'keboola',
            query_mode: 'materialized',
            primary_key: primaryKey,
            sync_schedule: (document.getElementById('kbSyncSchedule').value || '').trim() || null,
            description: (document.getElementById('kbDescription').value || '').trim() || null,
            folder: (document.getElementById('kbFolder').value || '').trim() || null,
        };

        if (mode === 'custom') {
            return Object.assign({}, common, {
                source_query: (document.getElementById('kbSourceQuery').value || '').trim(),
            });
        }
        // Whole — synthesize SELECT * FROM kbc."bucket"."table".
        return Object.assign({}, common, {
            bucket: bucket,
            source_table: sourceTable,
            source_query: 'SELECT * FROM kbc."' + bucket + '"."' + sourceTable + '"',
        });
    }

    function registerKeboolaTable() {
        var btn = document.getElementById('registerKeboolaSubmitBtn');
        btn.disabled = true;
        btn.textContent = 'Registering...';
        var payload;
        try {
            payload = _buildKeboolaPayload();
        } catch (e) {
            // _parseFiltersJSONOrThrow surfaces malformed JSON before the
            // POST so the operator sees the parse error inline rather than
            // a 422 from the server. Re-enable the submit button.
            showToast('' + e.message, 'error');
            btn.disabled = false;
            btn.textContent = 'Register';
            return;
        }
        fetch('/api/admin/register-table', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload),
        })
            .then(function(r) {
                if (!r.ok) {
                    return r.json().then(function(d) {
                        throw new Error(d.detail || d.error || 'Registration failed');
                    });
                }
                return r.json();
            })
            .then(function() {
                closeRegisterKeboolaModal();
                showToast('Table registered', 'success');
                loadRegistry();
            })
            .catch(function(err) {
                showToast('' + err.message, 'error');
            })
            .finally(function() {
                btn.disabled = false;
                btn.textContent = 'Register';
            });
    }

    // Discovery shims — the existing /api/admin/discover-tables endpoint
    // already routes by the instance's data_source.type (returning Keboola
    // tables when the instance is Keboola-typed); the source=keboola query
    // param is informational. Hidden behind `data_source_type == 'keboola'`
    // because on a BQ-typed instance the endpoint would return BQ-shaped
    // data (wrong shape, confusing); operators fall back to manual entry
    // for cross-source registration. Future work: extend the endpoint to
    // accept an explicit ?source= override so secondary-source registration
    // works in both directions and we can remove this guard.
    {% if data_source_type == 'keboola' %}
    function discoverKeboolaBuckets(datalistId) {
        fetch('/api/admin/discover-tables?source=keboola')
            .then(function(r) {
                if (!r.ok) return r.json().then(function(d) {
                    throw new Error(d.detail || d.error || 'Keboola discovery failed');
                });
                return r.json();
            })
            .then(function(data) {
                var dl = document.getElementById(datalistId);
                if (!dl) return;
                dl.innerHTML = '';
                // Endpoint may return either {buckets:[...]}, {datasets:[...]}
                // or {tables:[...]} depending on routing; project to a flat
                // bucket-id list. Keboola path returns tables → derive uniq
                // bucket_ids.
                var buckets = data.buckets || data.datasets;
                if (!buckets && Array.isArray(data.tables)) {
                    var seen = {};
                    buckets = [];
                    data.tables.forEach(function(t) {
                        var b = t.bucket_id || (t.bucket && t.bucket.id);
                        if (b && !seen[b]) { seen[b] = 1; buckets.push(b); }
                    });
                }
                (buckets || []).forEach(function(b) {
                    var o = document.createElement('option');
                    o.value = (typeof b === 'string') ? b : (b.id || b.bucket_id || '');
                    dl.appendChild(o);
                });
                showToast('Loaded ' + (dl.children.length) + ' buckets', 'success');
            })
            .catch(function(err) {
                showToast('' + err.message, 'error');
            });
    }

    function discoverKeboolaTables(bucketInputId, tablesDatalistId) {
        var bucketEl = document.getElementById(bucketInputId);
        var bucket = bucketEl ? (bucketEl.value || '').trim() : '';
        if (!bucket) {
            showToast('Fill bucket first', 'error');
            return;
        }
        fetch('/api/admin/discover-tables?source=keboola&bucket=' + encodeURIComponent(bucket))
            .then(function(r) {
                if (!r.ok) return r.json().then(function(d) {
                    throw new Error(d.detail || d.error || 'Keboola table discovery failed');
                });
                return r.json();
            })
            .then(function(data) {
                var dl = document.getElementById(tablesDatalistId);
                if (!dl) return;
                dl.innerHTML = '';
                var tables = data.tables || [];
                // Filter to the selected bucket if endpoint didn't.
                tables.filter(function(t) {
                    var b = t.bucket_id || (t.bucket && t.bucket.id);
                    return !bucket || !b || b === bucket;
                }).forEach(function(t) {
                    var o = document.createElement('option');
                    var name = (typeof t === 'string') ? t : (t.name || t.id || '');
                    // Strip bucket prefix if present.
                    if (name.indexOf(bucket + '.') === 0) name = name.substring(bucket.length + 1);
                    o.value = name;
                    dl.appendChild(o);
                });
                showToast('Loaded ' + dl.children.length + ' tables in ' + bucket, 'success');
            })
            .catch(function(err) {
                showToast('' + err.message, 'error');
            });
    }
    {% endif %}{# data_source_type == 'keboola' — discover helpers #}

    // ── Keboola edit-modal sync-mode helpers (always needed — radio buttons
    //    are rendered for all instance types) ───────────────────────────────
    // Pre-rewrite this whole block lived inside the Jinja
    // data_source_type guard above, which was fine when the modal was
    // only reachable from the (then) Keboola tab. With the package-
    // centric layout, Edit on any Keboola row opens this modal
    // regardless of the instance's primary data_source.type, so the
    // lifecycle helpers must be available unconditionally. The
    // discover/prefill helpers (which hit the keboola-typed
    // /api/admin/discover-tables endpoint) stay gated above + below.

    function _getEditKbSyncMode() {
        var el = document.querySelector('input[name="editKbSyncMode"]:checked');
        return el ? el.value : 'whole';
    }

    function onEditKbSyncModeChange() {
        var mode = _getEditKbSyncMode();
        document.querySelectorAll('.editkb-source-table').forEach(function(el) {
            el.style.display = (mode === 'custom') ? 'none' : '';
        });
        document.querySelectorAll('.editkb-source-custom').forEach(function(el) {
            el.style.display = (mode === 'custom') ? '' : 'none';
        });
        document.querySelectorAll('.editkb-direct-only').forEach(function(el) {
            el.style.display = (mode === 'direct') ? '' : 'none';
        });
        if (mode === 'direct') onEditKbStrategyChange();
    }

    function _getEditKbStrategy() {
        var el = document.getElementById('editKbStrategy');
        return el ? el.value : 'full_refresh';
    }

    function _editKbStrategyVisibility(el, s) {
        if (el.classList.contains('editkb-strategy-not-incremental')) {
            return s !== 'incremental';
        }
        return el.classList.contains('editkb-strategy-' + s);
    }

    function onEditKbStrategyChange() {
        var s = _getEditKbStrategy();
        document.querySelectorAll(
            '.editkb-direct-only .editkb-strategy-incremental, ' +
            '.editkb-direct-only .editkb-strategy-partitioned, ' +
            '.editkb-direct-only .editkb-strategy-not-incremental'
        ).forEach(function(el) {
            el.style.display = _editKbStrategyVisibility(el, s) ? '' : 'none';
        });
    }

    function _setEditKbRadio(value) {
        var el = document.querySelector('input[name="editKbSyncMode"][value="' + value + '"]');
        if (el) el.checked = true;
    }

    function openEditKeboolaModal(table) {
        // Populate fields from a registry row. Mode detection:
        //   - query_mode='local' → 'direct' (v26 sync-strategy path)
        //   - query_mode='materialized' + auto SELECT * → 'whole'
        //   - query_mode='materialized' + custom SQL  → 'custom'
        table = table || {};
        document.getElementById('editKbTableId').value = table.id || '';
        var bucket = table.bucket || '';
        var sourceTable = table.source_table || '';
        var sourceQuery = table.source_query || '';
        var queryMode = table.query_mode || 'materialized';
        var isAutoSelectStar = false;
        if (sourceQuery && bucket && sourceTable) {
            var auto = 'SELECT * FROM kbc."' + bucket + '"."' + sourceTable + '"';
            isAutoSelectStar = sourceQuery.replace(/\s+/g, ' ').trim() === auto;
        }
        var mode;
        if (queryMode === 'local') {
            mode = 'direct';
        } else if (sourceQuery && !isAutoSelectStar) {
            mode = 'custom';
        } else {
            mode = 'whole';
        }
        _setEditKbRadio(mode);
        document.getElementById('editKbBucket').value = bucket;
        document.getElementById('editKbSourceTable').value = sourceTable;
        document.getElementById('editKbSourceQuery').value = sourceQuery;
        document.getElementById('editKbSyncSchedule').value = table.sync_schedule || '';
        document.getElementById('editKbDescription').value = table.description || '';
        document.getElementById('editKbFolder').value = table.folder || '';
        document.getElementById('editKbPrimaryKey').value = (table.primary_key || []).join(', ');

        // v26 fields
        document.getElementById('editKbStrategy').value = table.sync_strategy || 'full_refresh';
        document.getElementById('editKbIncrementalWindowDays').value =
            table.incremental_window_days != null ? table.incremental_window_days : '';
        document.getElementById('editKbMaxHistoryDays').value =
            table.max_history_days != null ? table.max_history_days : '';
        document.getElementById('editKbPartitionBy').value = table.partition_by || '';
        document.getElementById('editKbPartitionGranularity').value =
            table.partition_granularity || 'month';
        document.getElementById('editKbInitialLoadChunkDays').value =
            table.initial_load_chunk_days != null ? table.initial_load_chunk_days : '';
        document.getElementById('editKbWhereFilters').value =
            table.where_filters ? JSON.stringify(table.where_filters, null, 2) : '';

        onEditKbSyncModeChange();
        var btn = document.getElementById('editKeboolaSubmitBtn');
        btn.disabled = false;
        btn.textContent = 'Save Changes';

        // Reset + hydrate the Data Packages chip-input (parity with the
        // legacy + BQ edit modals).
        _editKbOriginalPackageIds = new Set();
        var kbChipHost = document.getElementById('editKbPackagesChips');
        if (kbChipHost) {
            if (typeof kbChipHost.clearChips === 'function') kbChipHost.clearChips();
            _hydrateEditPackagesChips(table.id, kbChipHost, _editKbOriginalPackageIds);
        }

        document.getElementById('editKeboolaModal').classList.add('active');
    }

    function closeEditKeboolaModal() {
        _closeEditModalById('editKeboolaModal');
    }

    function _editIntOrNull(id) {
        var raw = (document.getElementById(id).value || '').trim();
        if (!raw) return null;
        var n = parseInt(raw, 10);
        return isNaN(n) ? null : n;
    }

    function _editParseFiltersJSONOrThrow(id) {
        var raw = (document.getElementById(id).value || '').trim();
        if (!raw) return null;
        try {
            return JSON.parse(raw);
        } catch (e) {
            throw new Error('where_filters: invalid JSON — ' + e.message);
        }
    }

    function _buildKeboolaEditPayload() {
        var mode = _getEditKbSyncMode();
        var bucket = (document.getElementById('editKbBucket').value || '').trim();
        var sourceTable = (document.getElementById('editKbSourceTable').value || '').trim();
        var pk = (document.getElementById('editKbPrimaryKey').value || '').trim();
        var primaryKey = pk
            ? pk.split(',').map(function(s) { return s.trim(); }).filter(Boolean)
            : [];

        if (mode === 'direct') {
            var strategy = _getEditKbStrategy();
            var payload = {
                query_mode: 'local',
                bucket: bucket,
                source_table: sourceTable,
                primary_key: primaryKey,
                sync_strategy: strategy,
                sync_schedule: (document.getElementById('editKbSyncSchedule').value || '').trim() || null,
                description: (document.getElementById('editKbDescription').value || '').trim() || null,
                folder: (document.getElementById('editKbFolder').value || '').trim() || null,
                // PUT requires explicit nulls to clear v26 fields when switching
                // away from a strategy that used them — otherwise the merged-dict
                // path keeps the stale value.
                incremental_window_days: null,
                max_history_days: null,
                partition_by: null,
                partition_granularity: null,
                initial_load_chunk_days: null,
                where_filters: null,
            };
            if (strategy === 'incremental' || strategy === 'partitioned') {
                payload.incremental_window_days = _editIntOrNull('editKbIncrementalWindowDays');
                payload.max_history_days = _editIntOrNull('editKbMaxHistoryDays');
            }
            if (strategy === 'partitioned') {
                payload.partition_by = (document.getElementById('editKbPartitionBy').value || '').trim() || null;
                payload.partition_granularity = document.getElementById('editKbPartitionGranularity').value || null;
                payload.initial_load_chunk_days = _editIntOrNull('editKbInitialLoadChunkDays');
            }
            if (strategy !== 'incremental') {
                payload.where_filters = _editParseFiltersJSONOrThrow('editKbWhereFilters');
            }
            return payload;
        }

        var common = {
            query_mode: 'materialized',
            primary_key: primaryKey,
            sync_schedule: (document.getElementById('editKbSyncSchedule').value || '').trim() || null,
            description: (document.getElementById('editKbDescription').value || '').trim() || null,
            folder: (document.getElementById('editKbFolder').value || '').trim() || null,
        };
        if (mode === 'custom') {
            return Object.assign({}, common, {
                source_query: (document.getElementById('editKbSourceQuery').value || '').trim(),
            });
        }
        return Object.assign({}, common, {
            bucket: bucket,
            source_table: sourceTable,
            source_query: 'SELECT * FROM kbc."' + bucket + '"."' + sourceTable + '"',
        });
    }

    function saveKeboolaTabEdit() {
        var btn = document.getElementById('editKeboolaSubmitBtn');
        var tableId = document.getElementById('editKbTableId').value;
        if (!tableId) {
            showToast('Missing table id', 'error');
            return;
        }
        btn.disabled = true;
        btn.textContent = 'Saving...';
        var payload;
        try {
            payload = _buildKeboolaEditPayload();
        } catch (e) {
            showToast('' + e.message, 'error');
            btn.disabled = false;
            btn.textContent = 'Save Changes';
            return;
        }
        (async function () {
            try {
                var r = await fetch('/api/admin/registry/' + encodeURIComponent(tableId), {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload),
                });
                if (!r.ok) {
                    var d = await r.json().catch(function() { return {}; });
                    throw new Error(d.detail || d.error || 'Update failed');
                }
                // Diff Data Package chip selection vs original.
                var kbFails = await _diffApplyPackageMembership(
                    tableId,
                    document.getElementById('editKbPackagesChips'),
                    _editKbOriginalPackageIds
                );
                if (kbFails > 0) {
                    showToast(kbFails + ' package membership change(s) failed', 'error');
                }
                closeEditKeboolaModal();
                showToast('Table updated', 'success');
                loadRegistry();
                if (typeof loadAdminTablesLayout === 'function') loadAdminTablesLayout();
            } catch (err) {
                showToast('' + err.message, 'error');
            } finally {
                btn.disabled = false;
                btn.textContent = 'Save Changes';
            }
        })();
    }

    // prefillFromKeboolaTable is already inside the outer Phase F2
    // guard (the data_source_type keboola Jinja `if` above) — it only
    // fires from a button inside the Keboola Edit modal that itself
    // only renders when data_source_type == 'keboola'. The redundant
    // nested guard was dropped during the rebase onto main; main
    // never had it.
    function prefillFromKeboolaTable(textareaId) {
        // Edit-modal callers may pass an editKbBucket / editKbSourceTable
        // pair instead of the Register modal's kbBucket / kbSourceTable.
        // Detect the modal via the textarea id prefix.
        var prefix = textareaId.indexOf('editKb') === 0 ? 'editKb' : 'kb';
        var bucket = (document.getElementById(prefix + 'Bucket').value || '').trim();
        var sourceTable = (document.getElementById(prefix + 'SourceTable').value || '').trim();
        if (!bucket || !sourceTable) {
            showToast('Fill bucket + source table first', 'error');
            return;
        }
        var ta = document.getElementById(textareaId);
        if (ta.value.trim()) {
            if (!confirm('Replace existing SQL?')) return;
        }
        ta.value = 'SELECT *\nFROM kbc."' + bucket + '"."' + sourceTable + '"\nWHERE -- your filter here';
    }

    // C3: removed dead helper _buildKeboolaLegacyPayload — the Phase F
    // _buildKeboolaPayload (above) replaced it.

    function _getBqAccessMode() {
        // Q1 radio. Default 'live' if nothing's checked yet (model-validator
        // safety net for the initial render).
        var el = document.querySelector('input[name="bqAccessMode"]:checked');
        return el ? el.value : 'live';
    }

    function _getBqSyncMode() {
        // Q2 radio (only meaningful when access mode is 'synced').
        var el = document.querySelector('input[name="bqSyncMode"]:checked');
        return el ? el.value : 'whole';
    }

    function _buildBigQueryPayload() {
        // Two-question form maps to backend `query_mode`:
        //   live          → query_mode='remote'        (server auto-detects
        //                                               BASE TABLE vs VIEW)
        //   synced/whole  → query_mode='materialized'  (auto SELECT *)
        //   synced/custom → query_mode='materialized'  (admin SQL)
        // The UI never asks "Table vs View" — that's a server-side detail.
        var accessMode = _getBqAccessMode();
        var syncMode = _getBqSyncMode();
        var viewName = document.getElementById('bqViewName').value.trim();
        var description = document.getElementById('bqDescription').value.trim() || null;
        var folder = document.getElementById('bqFolder').value.trim() || null;
        var syncSchedule = document.getElementById('bqSyncSchedule').value.trim() || null;

        if (accessMode === 'synced' && syncMode === 'custom') {
            return {
                name: viewName,
                source_type: 'bigquery',
                query_mode: 'materialized',
                source_query: document.getElementById('bqSourceQuery').value.trim(),
                profile_after_sync: false,
                description: description,
                folder: folder,
                sync_schedule: syncSchedule,
            };
        }

        var dataset = document.getElementById('bqDataset').value.trim();
        var sourceTable = document.getElementById('bqSourceTable').value.trim();

        if (accessMode === 'synced' && syncMode === 'whole') {
            // Whole-table sync. We don't ship the project to the browser, so
            // the SQL uses DuckDB three-part syntax against the materialize
            // session's ATTACH alias. Native BQ dry-run can't parse this form
            // (DuckDB identifier quoting), so the cost guardrail falls
            // fail-open with a warning — operator who needs the cap to engage
            // picks Custom query and writes backtick-quoted native BQ
            // identifiers.
            //
            // Issue #266: also persist bucket+source_table on the row so the
            // Edit modal can pre-fill those inputs on a subsequent open. Pre-
            // #266 the register flow only sent source_query, leaving bucket=
            // NULL in the registry; the Edit modal then loaded empty inputs
            // and an admin saving with the visible empty fields would
            // synthesize the broken `SELECT * FROM bq."".""` SQL.
            return {
                name: viewName || sourceTable,
                source_type: 'bigquery',
                query_mode: 'materialized',
                bucket: dataset,
                source_table: sourceTable,
                source_query: 'SELECT * FROM bq."' + dataset + '"."' + sourceTable + '"',
                profile_after_sync: false,
                description: description,
                folder: folder,
                sync_schedule: syncSchedule,
            };
        }

        // Live access — server auto-detects BASE TABLE vs VIEW at register
        // time, so the UI doesn't make the operator pick.
        return {
            name: viewName || sourceTable,
            source_type: 'bigquery',
            bucket: dataset,
            source_table: sourceTable,
            query_mode: 'remote',
            profile_after_sync: false,
            description: description,
            folder: folder,
            sync_schedule: syncSchedule,
        };
    }

    function onBqAccessModeChange() {
        // Q1: toggle live ↔ synced. Q2 (sync mode) is meaningful only when
        // synced; default it to 'whole' on first reveal so the form stays
        // consistent without forcing the operator to click twice.
        var accessMode = _getBqAccessMode();
        var liveFields = document.querySelectorAll('.bq-access-live');
        var syncedFields = document.querySelectorAll('.bq-access-synced');
        liveFields.forEach(function(el) {
            el.style.display = (accessMode === 'live') ? '' : 'none';
        });
        syncedFields.forEach(function(el) {
            el.style.display = (accessMode === 'synced') ? '' : 'none';
        });
        // Q2 is fresh on first reveal; trigger its handler to apply the
        // source-table vs source-custom visibility rules.
        if (accessMode === 'synced') {
            onBqSyncModeChange();
        } else {
            // Live mode: show source-table fields, hide custom-SQL textarea.
            document.querySelectorAll('.bq-source-table').forEach(function(el) {
                el.style.display = '';
            });
            document.querySelectorAll('.bq-source-custom').forEach(function(el) {
                el.style.display = 'none';
            });
        }
    }

    function onBqSyncModeChange() {
        // Q2: toggle whole-table ↔ custom-SQL. Whole reuses the
        // dataset/source-table inputs (server-side SELECT *), Custom shows
        // the SQL textarea. Only fires when access mode is already 'synced'.
        var syncMode = _getBqSyncMode();
        var tableFields = document.querySelectorAll('.bq-source-table');
        var customFields = document.querySelectorAll('.bq-source-custom');
        tableFields.forEach(function(el) {
            el.style.display = (syncMode === 'whole') ? '' : 'none';
        });
        customFields.forEach(function(el) {
            el.style.display = (syncMode === 'custom') ? '' : 'none';
        });
    }

    // The discover / list-tables / prefill helpers are shared between the
    // Register and Edit modals. The default datalist + input ids match the
    // Register modal; Edit-modal callers pass their own ids so the
    // autocomplete populates the right datalist and reads from the right
    // dataset input.

    function discoverBqDatasets(datalistId) {
        // GET /api/admin/discover-tables (no `dataset`) → list datasets in
        // the configured BQ project. Populate the named <datalist> so the
        // dataset input shows them as autocomplete suggestions. Endpoint
        // routes through BqAccess so config / auth errors come back as the
        // standard {error, kind, details} shape.
        var dlId = datalistId || 'bqDatasetList';
        fetch('/api/admin/discover-tables')
            .then(function(r) {
                if (!r.ok) return r.json().then(function(d) {
                    var msg = (d && d.detail && d.detail.error) || (d && d.detail) || 'BQ discovery failed';
                    throw new Error(msg);
                });
                return r.json();
            })
            .then(function(data) {
                var dl = document.getElementById(dlId);
                dl.innerHTML = '';
                (data.datasets || []).forEach(function(ds) {
                    var opt = document.createElement('option');
                    opt.value = ds.dataset_id;
                    opt.label = ds.full_id || ds.dataset_id;
                    dl.appendChild(opt);
                });
                showToast('Loaded ' + (data.count || 0) + ' datasets', 'success');
            })
            .catch(function(err) {
                showToast(err.message || 'Discovery failed', 'error');
            });
    }

    function discoverBqTables(datasetInputId, tablesDatalistId) {
        // GET /api/admin/discover-tables?dataset=NAME → list tables + views
        // in the dataset. Two-step (dataset → tables) avoids paying the
        // per-dataset list_tables() cost up front on big projects.
        var inId = datasetInputId || 'bqDataset';
        var dlId = tablesDatalistId || 'bqTableList';
        var dataset = document.getElementById(inId).value.trim();
        if (!dataset) {
            showToast('Fill Dataset first', 'error');
            return;
        }
        fetch('/api/admin/discover-tables?dataset=' + encodeURIComponent(dataset))
            .then(function(r) {
                if (!r.ok) return r.json().then(function(d) {
                    var msg = (d && d.detail && d.detail.error) || (d && d.detail) || 'BQ table discovery failed';
                    throw new Error(msg);
                });
                return r.json();
            })
            .then(function(data) {
                var dl = document.getElementById(dlId);
                dl.innerHTML = '';
                (data.tables || []).forEach(function(t) {
                    var opt = document.createElement('option');
                    opt.value = t.table_id;
                    // BQ entity types: TABLE, VIEW, MATERIALIZED_VIEW,
                    // EXTERNAL, SNAPSHOT — surface so the operator can
                    // pick the right entity option.
                    opt.label = t.table_id + (t.table_type ? '  (' + t.table_type + ')' : '');
                    dl.appendChild(opt);
                });
                showToast('Loaded ' + (data.count || 0) + ' tables in ' + dataset, 'success');
            })
            .catch(function(err) {
                showToast(err.message || 'Table list failed', 'error');
            });
    }

    function prefillFromTable(textareaId) {
        // Convenience for the Custom SQL path: prompt for project.dataset.table
        // and prefill `SELECT * FROM \`...\`` so the operator only edits the
        // WHERE / projection. We can't know the project from the form (it's
        // server-side config), so the prompt accepts both `dataset.table` and
        // `project.dataset.table`. Empty / cancel → no change.
        var taId = textareaId || 'bqSourceQuery';
        var ta = document.getElementById(taId);
        var existing = ta.value.trim();
        if (existing && !confirm('SQL field is not empty — overwrite with prefill?')) {
            return;
        }
        var ref = window.prompt(
            'Enter the source table as `dataset.table` or `project.dataset.table` '
            + '(it will be wrapped in backticks):',
            ''
        );
        if (!ref) return;
        ref = ref.trim().replace(/^`|`$/g, '');
        var stub =
            'SELECT *\n'
            + 'FROM `' + ref + '`\n'
            + 'WHERE -- TODO: filter or aggregate before the COPY runs (10 GiB cap)\n'
            + 'LIMIT 1000';
        ta.value = stub;
    }

    // C3: removed dead entry points registerTable / _registerKeboolaTable
    // that submitted the now-deleted #registerModal. The Keboola Register
    // flow runs through #registerKeboolaModal → registerKeboolaTable().

    function registerBqTable() {
        // BQ tab modal entry point — runs the same two-step precheck →
        // confirm flow against #registerBqSubmitBtn / #registerBqModal.
        var btn = document.getElementById('registerBqSubmitBtn');
        btn.disabled = true;
        _registerBigQueryTable(btn);
    }

    function _registerBigQueryTable(btn) {
        // Step 1 of two-step flow: precheck only. After precheck succeeds
        // we surface row count / size / column count in the modal AND swap
        // the primary button to "Register" — operator must explicitly
        // click it to fire the actual register call. Pre-fix this chained
        // precheck → register in a single promise, so the operator never
        // got to review the summary before the row was committed (review
        // IMPORTANT 4 in #119).
        btn.textContent = 'Checking source...';
        var payload = _buildBigQueryPayload();
        var summary = document.getElementById('bqPrecheckSummary');
        var summaryText = document.getElementById('bqPrecheckSummaryText');

        fetch('/api/admin/register-table/precheck', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        })
        .then(function(r) {
            if (!r.ok) return r.json().then(function(d) { throw new Error(d.detail || 'Precheck failed'); });
            return r.json();
        })
        .then(function(data) {
            // Surface the source-side metrics so the operator can sanity-
            // check the dataset/table before committing the row.
            var t = data.table || {};
            if (summary && summaryText) {
                summary.style.display = '';
                summaryText.textContent =
                    formatNumber(t.rows) + ' rows, ' +
                    formatSize(t.size_bytes) + ', ' +
                    (t.column_count != null ? t.column_count : (t.columns || []).length) + ' columns';
            }
            // Swap the primary button from "Register Table" (which fired
            // the precheck) to "Register" (which fires the actual register
            // call). Reusing the same modal means the operator can still
            // hit Cancel or close without committing.
            btn.disabled = false;
            btn.textContent = 'Register';
            btn.onclick = function() { _confirmRegisterBigQueryTable(btn, payload); };
        })
        .catch(function(err) {
            showToast('Precheck failed: ' + err.message, 'error');
            btn.disabled = false;
            btn.textContent = 'Register Table';
        });
    }

    function _confirmRegisterBigQueryTable(btn, payload) {
        // Step 2 of the two-step BQ flow: actually POST /register-table.
        // Reached only after the operator has reviewed the precheck
        // summary in the modal and clicked the (relabeled) Register button.
        btn.disabled = true;
        btn.textContent = 'Registering...';
        fetch('/api/admin/register-table', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        })
        .then(function(r) {
            // 200 (synchronous materialize) and 202 (BG materialize) are
            // success; 500 with a `rebuild_failed` body is the new failure
            // mode where the row is in the registry but the view wasn't
            // created. Surface the error verbatim so the operator can fix
            // it (typically a missing project in the overlay or auth
            // missing bigquery.metadata.get).
            return r.json().then(function(d) {
                if (!r.ok) {
                    var msg = d.detail || d.message || 'Registration failed';
                    if (d.errors && d.errors.length) {
                        msg += ' (' + d.errors.length + ' error' + (d.errors.length > 1 ? 's' : '') + ')';
                    }
                    throw new Error(msg);
                }
                closeRegisterBqModal();
                if (r.status === 202) {
                    showToast('Registration accepted, materializing in background', 'success');
                } else {
                    showToast('Queryable as ' + (d.view_name || d.id || payload.name), 'success');
                }
                loadRegistry();
            });
        })
        .catch(function(err) {
            showToast('Registration failed: ' + err.message, 'error');
        })
        .finally(function() {
            // Restore the modal's default button state — the operator may
            // close + reopen the modal, and openRegisterModal also resets
            // onclick back to registerBqTable.
            btn.disabled = false;
            btn.textContent = 'Register Table';
            btn.onclick = registerBqTable;
        });
    }

    // Back-compat entry point — kept for any external wiring that may
    // still call openBigQueryRegisterModal(). Phase E: routes through
    // the new BQ-tab modal.
    function openBigQueryRegisterModal() {
        openRegisterModal('bigquery');
    }

    // ── Edit Modal ──────────────────────────────────────────────

    // Original mode captured at openEditModal-time so the access-mode
    // change handler can detect "operator just switched it" vs "loaded
    // from registry" and only surface the destructive-edit warning on a
    // real change.
    let _editOriginalQueryMode = null;

    function _getEditBqAccessMode() {
        var el = document.querySelector('input[name="editBqAccessMode"]:checked');
        return el ? el.value : 'live';
    }

    function _getEditBqSyncMode() {
        var el = document.querySelector('input[name="editBqSyncMode"]:checked');
        return el ? el.value : 'whole';
    }

    function _setEditBqRadio(name, value) {
        var el = document.querySelector('input[name="' + name + '"][value="' + value + '"]');
        if (el) el.checked = true;
    }

    // ── Edit-modal architecture (v55 review of #L61) ──────────────────
    // We dispatch by ``table.source_type`` to one of three per-source
    // modals because their inner forms genuinely differ:
    //
    //   * BQ:      access-mode radios (live / synced), sync-mode radios
    //              (whole / custom SQL), dataset + source_table inputs.
    //   * Keboola: storage-API bucket + table inputs, sync_strategy enum,
    //              primary_key chip list, sync_schedule cron.
    //   * Generic: description, folder, strategy, primary_key (catch-all
    //              fallback for jira / future connectors).
    //
    // What's *already* shared lives in helpers:
    //   * ``_hydrateEditPackagesChips`` — Data Packages chip-input
    //     fill-in (all three modals).
    //   * ``_diffApplyPackageMembership`` — minimal POST/DELETE delta
    //     against /api/admin/data-packages/{id}/tables (all three save
    //     handlers).
    //   * ``_closeEditModalById`` — uniform close/reset (added v55).
    //
    // A fourth "one modal with conditional sections" design would shave
    // ~40% of the form HTML but multiply state-hydration bugs (stale
    // field state when source_type-switches re-show different inputs).
    // The per-source modals + shared helpers pattern is the explicit
    // architecture; see ``openEditModal`` for the dispatcher.
    function openEditModal(table) {
        var sourceType = (table.source_type || '').toLowerCase();
        if (sourceType === 'bigquery') {
            return _openEditBqModal(table);
        }
        if (sourceType === 'keboola') {
            return openEditKeboolaModal(table);
        }
        return _openEditGenericModal(table);
    }

    // Single close/reset helper used by all three per-source modal
    // wrappers. Resets currentEditTableId + _editOriginalQueryMode so a
    // subsequent open() doesn't inherit stale state from the previous
    // modal-source.
    function _closeEditModalById(modalId) {
        var el = document.getElementById(modalId);
        if (el) el.classList.remove('active');
        currentEditTableId = null;
        _editOriginalQueryMode = null;
    }

    function _openEditBqModal(table) {
        // Populate the BQ-tab Edit modal from a registry row. Mirror of
        // populateEditModal's BQ branch from before C2 — same query_mode →
        // radio mapping, same field bindings, but writes to the new
        // #editBqModal scope.
        currentEditTableId = table.id;
        document.getElementById('editBqTableId').value = table.id || '';
        var badge = document.getElementById('editBqSourceTypeBadge');
        if (badge) badge.textContent = (table.source_type || 'bigquery');

        var qmode = (table.query_mode || 'remote');
        var sq = (table.source_query || '');
        // Issue #266: register-time the whole-table branch omits
        // bucket/source_table from the JSON payload (only source_query is
        // sent), so existing whole-table materialized rows persist with
        // bucket=NULL in the registry. When the Edit modal then reads
        // table.bucket on those rows it gets null → empty input → admin
        // saves a broken `SELECT * FROM bq."".""` SQL. Parse the source_query
        // to recover the dataset+table for the pre-fill. Same regex shape
        // we already use to detect whole-table mode below.
        var SELECT_STAR_RE = /^\s*SELECT\s+\*\s+FROM\s+bq\."([^"]+)"\."([^"]+)"\s*$/i;
        var isAutoSelectStar = SELECT_STAR_RE.test(sq);
        if (qmode === 'materialized') {
            _setEditBqRadio('editBqAccessMode', 'synced');
            _setEditBqRadio('editBqSyncMode', isAutoSelectStar ? 'whole' : 'custom');
        } else {
            _setEditBqRadio('editBqAccessMode', 'live');
            _setEditBqRadio('editBqSyncMode', 'whole');
        }

        // Pre-fill dataset/table inputs. For whole-table materialized rows
        // without persisted bucket/source_table (pre-#266 register state),
        // recover them from the SQL.
        var preDataset = table.bucket || '';
        var preSourceTable = table.source_table || '';
        if (!preDataset && !preSourceTable && isAutoSelectStar) {
            var m = sq.match(SELECT_STAR_RE);
            if (m) { preDataset = m[1]; preSourceTable = m[2]; }
        }
        document.getElementById('editBqDataset').value = preDataset;
        document.getElementById('editBqSourceTable').value = preSourceTable;
        document.getElementById('editBqSourceQuery').value = sq;
        document.getElementById('editBqSyncSchedule').value = table.sync_schedule || '';
        document.getElementById('editBqDescription').value = table.description || '';
        document.getElementById('editBqFolder').value = table.folder || '';
        document.getElementById('editBqModeWarning').style.display = 'none';
        _editOriginalQueryMode = qmode;
        onEditBqAccessModeChange();  // fire to set field visibility

        var btn = document.getElementById('editBqSubmitBtn');
        btn.disabled = false;
        btn.textContent = 'Save Changes';

        // Reset + hydrate the Data Packages chip-input (parity with the
        // legacy edit modal — see _openEditGenericModal for full notes).
        _editBqOriginalPackageIds = new Set();
        var bqChipHost = document.getElementById('editBqPackagesChips');
        if (bqChipHost) {
            if (typeof bqChipHost.clearChips === 'function') bqChipHost.clearChips();
            _hydrateEditPackagesChips(table.id, bqChipHost, _editBqOriginalPackageIds);
        }

        document.getElementById('editBqModal').classList.add('active');
    }

    function closeEditBqModal() {
        _closeEditModalById('editBqModal');
    }

    // Tracks the set of Data Package ids each edit modal was opened
    // with, so each save handler can emit the minimal add/remove deltas
    // against /api/admin/data-packages/{id}/tables instead of replaying
    // every chip. One Set per modal because the BQ + Keboola + legacy
    // modals can coexist in the DOM and need independent origin state.
    var _editGenericOriginalPackageIds = new Set();
    var _editBqOriginalPackageIds = new Set();
    var _editKbOriginalPackageIds = new Set();

    function _openEditGenericModal(table) {
        // Catch-all fallback for source_types that aren't bigquery or keboola
        // (e.g. jira, internal, future connectors). Carries the Strategy +
        // Primary Key + Description + Folder fields and a Data Packages
        // chip-input (parity with BQ). Renamed from _openEditLegacyModal
        // — "Legacy" was misleading; this is the default, not a deprecated
        // path.
        currentEditTableId = table.id;
        document.getElementById('editTableId').value = table.id || '';
        var sourceType = (table.source_type || '').toLowerCase();
        document.getElementById('editSourceTypeBadge').textContent = sourceType || '—';
        document.getElementById('editDescription').value = table.description || '';
        document.getElementById('editFolder').value = table.folder || '';
        document.getElementById('editStrategy').value = table.sync_strategy || 'full_refresh';
        document.getElementById('editPrimaryKey').value = (table.primary_key || []).join(', ');
        _editOriginalQueryMode = null;
        document.getElementById('editSubmitBtn').disabled = false;

        // Hydrate Data Packages chip-input with current memberships.
        // chip-input.js inits idempotently at DOMContentLoaded; we add
        // chips via the public `.addChip()` API after a fresh memberships
        // fetch, after clearing whatever was left from a prior edit.
        _editGenericOriginalPackageIds = new Set();
        var chipHost = document.getElementById('editGenericPackagesChips');
        if (chipHost) {
            // Reset chips between edits — clear hidden + visible state.
            var hidden = chipHost.querySelector('input[type="hidden"]');
            if (hidden) hidden.value = '[]';
            var chipsRow = chipHost.querySelector('div');
            if (chipsRow) chipsRow.innerHTML = '';
            // selected[] is closure-private in chip-input.js — easiest way
            // to clear it is Backspace simulation, but that's brittle.
            // Instead we wire a `clearChips()` helper if exposed; fall
            // back to wiping `dataset.selected` and re-init.
            if (typeof chipHost.clearChips === 'function') {
                chipHost.clearChips();
            }
            _hydrateGenericEditPackagesChips(table.id, chipHost);
        }

        document.getElementById('editModal').classList.add('active');
    }

    async function _hydrateGenericEditPackagesChips(tableId, chipHost) {
        return _hydrateEditPackagesChips(tableId, chipHost, _editGenericOriginalPackageIds);
    }

    // Shared chip-input hydration for any edit modal. Pulls the package
    // list, fetches members in parallel, and pre-fills `chipHost` with
    // every package containing `tableId`. The matched ids are stashed
    // in `originalIdsSet` so the save handler can diff against the
    // current chip selection and emit minimal POST/DELETE calls.
    // ~N small fetches; fine for instances with <50 packages.
    async function _hydrateEditPackagesChips(tableId, chipHost, originalIdsSet) {
        try {
            var r = await fetch('/api/admin/data-packages', { credentials: 'same-origin' });
            if (!r.ok) return;
            var pkgs = await r.json();
            var members = await Promise.all(pkgs.map(function(p) {
                return fetch('/api/admin/data-packages/' + encodeURIComponent(p.id),
                             { credentials: 'same-origin' })
                    .then(function(rr) { return rr.ok ? rr.json() : null; })
                    .catch(function() { return null; });
            }));
            members.forEach(function(det, i) {
                if (!det) return;
                var ids = (det.tables || []).map(function(t) { return t.id; });
                if (ids.indexOf(tableId) === -1) return;
                originalIdsSet.add(pkgs[i].id);
                if (chipHost.addChip) {
                    chipHost.addChip({ id: pkgs[i].id, name: pkgs[i].name });
                }
            });
        } catch (_) {
            // Non-fatal: the field stays empty and admin can re-pick.
        }
    }

    // Shared delta sync — diffs the chip-input's current selection vs
    // the originally-loaded set, emits minimal POST/DELETE against the
    // junction endpoint, and returns the failure count so the calling
    // save handler can surface it in the toast.
    async function _diffApplyPackageMembership(tableId, chipHost, originalIdsSet) {
        if (!chipHost || !chipHost.getSelectedIds) return 0;
        var nowIds = new Set(chipHost.getSelectedIds());
        var calls = [];
        nowIds.forEach(function(id) {
            if (!originalIdsSet.has(id)) {
                calls.push(fetch('/api/admin/data-packages/' + encodeURIComponent(id) + '/tables', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    credentials: 'same-origin',
                    body: JSON.stringify({ table_id: tableId }),
                }));
            }
        });
        originalIdsSet.forEach(function(id) {
            if (!nowIds.has(id)) {
                calls.push(fetch('/api/admin/data-packages/' + encodeURIComponent(id)
                                  + '/tables/' + encodeURIComponent(tableId),
                                  { method: 'DELETE', credentials: 'same-origin' }));
            }
        });
        if (!calls.length) return 0;
        var results = await Promise.allSettled(calls);
        return results.filter(function(x) {
            return x.status === 'rejected' || (x.value && !x.value.ok);
        }).length;
    }

    function onEditBqAccessModeChange() {
        var accessMode = _getEditBqAccessMode();
        document.querySelectorAll('.bq-edit-access-synced').forEach(function(el) {
            el.style.display = (accessMode === 'synced') ? '' : 'none';
        });

        if (accessMode === 'synced') {
            onEditBqSyncModeChange();
        } else {
            // Live: dataset+table inputs visible, SQL textarea hidden.
            document.querySelectorAll('.bq-edit-source-table').forEach(function(el) {
                el.style.display = '';
            });
            document.querySelectorAll('.bq-edit-source-custom').forEach(function(el) {
                el.style.display = 'none';
            });
        }

        // Mode-switch warning: only fire when the operator actually flipped
        // access mode from what was loaded — typo-fix edits stay quiet.
        var newMode = (accessMode === 'synced') ? 'materialized' : 'remote';
        var warn = document.getElementById('editBqModeWarning');
        if (_editOriginalQueryMode && newMode !== _editOriginalQueryMode) {
            var msg;
            if (_editOriginalQueryMode === 'materialized' && newMode === 'remote') {
                msg = '⚠ Switching Synced locally → Live from BigQuery will drop the materialized parquet on the next sync. Analysts who already pulled this table will start getting live BQ queries instead of a local copy; the sync schedule becomes ignored.';
            } else {
                msg = '⚠ Switching Live from BigQuery → Synced locally: the next scheduled sync runs a SELECT and writes a parquet. Analysts will start reading the local copy on their next `agnes pull`. Remember to set a sync schedule.';
            }
            warn.textContent = msg;
            warn.style.display = '';
        } else {
            warn.style.display = 'none';
        }
    }

    function onEditBqSyncModeChange() {
        var syncMode = _getEditBqSyncMode();
        document.querySelectorAll('.bq-edit-source-table').forEach(function(el) {
            el.style.display = (syncMode === 'whole') ? '' : 'none';
        });
        document.querySelectorAll('.bq-edit-source-custom').forEach(function(el) {
            el.style.display = (syncMode === 'custom') ? '' : 'none';
        });
    }

    function closeEditModal() {
        _closeEditModalById('editModal');
    }

    async function saveTableEdit() {
        // Generic / catch-all save handler — runs for source_types that
        // aren't bigquery (handled by saveBqTabEdit) or keboola (handled
        // by saveKeboolaTabEdit). Currently covers jira-style rows.
        if (!currentEditTableId) return;

        var btn = document.getElementById('editSubmitBtn');
        btn.disabled = true;
        btn.textContent = 'Saving...';

        var pk = document.getElementById('editPrimaryKey').value.trim();
        var primaryKey = pk
            ? pk.split(',').map(function(s) { return s.trim(); }).filter(Boolean)
            : [];
        var payload = {
            sync_strategy: document.getElementById('editStrategy').value,
            primary_key: primaryKey,
            description:
                document.getElementById('editDescription').value.trim() || null,
            folder: document.getElementById('editFolder').value.trim() || null,
        };

        try {
            var r = await fetch('/api/admin/registry/' + encodeURIComponent(currentEditTableId), {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
            if (!r.ok) {
                var d = await r.json().catch(function() { return {}; });
                throw new Error(d.detail || d.error || 'Update failed');
            }

            // Diff chip selection vs original — emit minimal POST/DELETE
            // against the junction. Errors surface via toast but don't
            // roll back the table PUT.
            var legacyFails = await _diffApplyPackageMembership(
                currentEditTableId,
                document.getElementById('editGenericPackagesChips'),
                _editGenericOriginalPackageIds
            );
            if (legacyFails > 0) {
                showToast(legacyFails + ' package membership change(s) failed', 'error');
            }

            closeEditModal();
            showToast('Table updated successfully', 'success');
            loadRegistry();
            if (typeof loadAdminTablesLayout === 'function') {
                loadAdminTablesLayout();
            }
        } catch (err) {
            showToast('Update failed: ' + err.message, 'error');
        } finally {
            btn.disabled = false;
            btn.textContent = 'Save Changes';
        }
    }

    function saveBqTabEdit() {
        // Save handler for the relocated BQ Edit modal (#editBqModal).
        // Mirrors the pre-C2 BQ branch of saveTableEdit() but reads from
        // the BQ-modal-scoped fields (editBqDescription / editBqFolder).
        if (!currentEditTableId) return;

        var btn = document.getElementById('editBqSubmitBtn');
        btn.disabled = true;
        btn.textContent = 'Saving...';

        // Two-question state machine — same as Register modal:
        //   live          → query_mode='remote'
        //   synced/whole  → materialized + auto SELECT *
        //   synced/custom → materialized + admin SQL
        var accessMode = _getEditBqAccessMode();
        var syncMode = _getEditBqSyncMode();
        var dataset = document.getElementById('editBqDataset').value.trim();
        var sourceTable = document.getElementById('editBqSourceTable').value.trim();

        var payload = {
            description: document.getElementById('editBqDescription').value.trim() || null,
            folder: document.getElementById('editBqFolder').value.trim() || null,
            source_type: 'bigquery',
            sync_schedule:
                document.getElementById('editBqSyncSchedule').value.trim() || null,
        };

        if (accessMode === 'synced' && syncMode === 'custom') {
            payload.query_mode = 'materialized';
            payload.source_query =
                document.getElementById('editBqSourceQuery').value.trim();
            // Issue #266: only clear bucket/source_table on a genuine mode
            // flip (was non-materialized → now custom-SQL materialized). The
            // original pre-#266 code nulled unconditionally on every save —
            // so an admin editing only the description on an already-
            // materialized custom-SQL row would silently wipe bucket/
            // source_table. Destructive for rows that had them persisted
            // (whole-table-then-switched-to-custom, or curl-set via API).
            // On no-op saves (mode didn't change since modal load), omit
            // the keys entirely so the PUT handler's `exclude_unset=True`
            // preserves the existing values in the registry.
            if (_editOriginalQueryMode !== 'materialized') {
                payload.bucket = null;
                payload.source_table = null;
            }
        } else if (accessMode === 'synced' && syncMode === 'whole') {
            payload.query_mode = 'materialized';
            payload.source_query =
                'SELECT * FROM bq."' + dataset + '"."' + sourceTable + '"';
            payload.bucket = dataset || null;
            payload.source_table = sourceTable || null;
        } else {
            // Live.
            payload.query_mode = 'remote';
            payload.bucket = dataset || null;
            payload.source_table = sourceTable || null;
            payload.source_query = null;
        }

        (async function () {
            try {
                var r = await fetch('/api/admin/registry/' + encodeURIComponent(currentEditTableId), {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload)
                });
                if (!r.ok) {
                    var d = await r.json().catch(function() { return {}; });
                    throw new Error(d.detail || d.error || 'Update failed');
                }
                // Diff Data Package chip selection vs original.
                var bqFails = await _diffApplyPackageMembership(
                    currentEditTableId,
                    document.getElementById('editBqPackagesChips'),
                    _editBqOriginalPackageIds
                );
                if (bqFails > 0) {
                    showToast(bqFails + ' package membership change(s) failed', 'error');
                }
                closeEditBqModal();
                showToast('Table updated successfully', 'success');
                loadRegistry();
                if (typeof loadAdminTablesLayout === 'function') loadAdminTablesLayout();
            } catch (err) {
                showToast('Update failed: ' + err.message, 'error');
            } finally {
                btn.disabled = false;
                btn.textContent = 'Save Changes';
            }
        })();
    }

    // ── Registry (legacy shim) ──────────────────────────────────
    // Pre-rewrite, loadRegistry() filled four per-tab listing divs
    // (bqTableListing, kbTableListing, jiraTableListing, internalTableListing).
    // Those listings were deleted with the connector tabs. Existing register /
    // edit / delete flows still call loadRegistry() to refresh the page after
    // a mutation — delegate to loadAdminTablesLayout() which now renders the
    // unified package-centric view from the same /api/admin/registry payload.
    function loadRegistry() {
        if (typeof loadAdminTablesLayout === 'function') {
            return loadAdminTablesLayout();
        }
    }

    // Per-row Mode badge — tooltip mirrors the explanation in the
    // Register modal so admins can hover instead of opening
    // docs/admin/query-modes.md to remember which mode does what.
    var _MODE_TOOLTIPS = {
        local:        'Synced locally — DuckDB downloads to parquet on a schedule; analysts query the local copy via agnes pull.',
        remote:       'Live from BigQuery — no download; queries go through the DuckDB BQ extension with the 5 GiB scan cap.',
        materialized: 'Materialised SQL — scheduler runs admin SQL through DuckDB and writes the result to a parquet, distributed like a local table.',
        internal:     'Internal agnes_* table backed by system.duckdb; read-only, seeded on app boot.',
    };
    function renderModeBadge(mode) {
        var m = (mode || 'local').toLowerCase();
        var cls = 'mode-badge mode-' + (['local','remote','materialized','internal'].indexOf(m) >= 0 ? m : 'local');
        var tip = _MODE_TOOLTIPS[m] || '';
        return '<span class="' + cls + '" title="' + escapeHtmlAttr(tip) + '">' + escapeHtml(m) + '</span>';
    }

    function renderRegistryListing(target, tables) {
        if (!target) return;
        if (tables.length === 0) {
            target.innerHTML = '<div class="panel-body-empty">No tables registered yet.</div>';
            return;
        }
        var html = '<table class="registry-table">';
        html += '<thead><tr>';
        html += '<th class="col-id">Table ID</th>';
        html += '<th class="col-mode">Mode</th>';
        html += '<th class="col-source">Source</th>';
        html += '<th class="col-pk">Primary Key</th>';
        html += '<th class="col-schedule">Schedule</th>';
        html += '<th class="col-folder">Folder</th>';
        html += '<th>Description</th>';
        html += '<th class="col-registered">Registered</th>';
        html += '<th class="col-status"></th>';
        html += '<th class="col-actions">Actions</th>';
        html += '</tr></thead><tbody>';
        tables.forEach(function(table) {
            html += '<tr>';
            html += '<td class="col-id" title="' + escapeHtml(table.id) + '">' + escapeHtml(table.id) + '</td>';
            html += '<td class="col-mode">' + renderModeBadge(table.query_mode) + '</td>';

            // Source: bucket / source_table; em-dash when both empty (custom-SQL row).
            var bucket = table.bucket || '';
            var srcTable = table.source_table || '';
            var sourceText = '';
            if (bucket && srcTable) {
                sourceText = bucket + ' / ' + srcTable;
            } else if (bucket || srcTable) {
                sourceText = bucket || srcTable;
            }
            var sourceCell = sourceText ? escapeHtml(sourceText) : '—';
            html += '<td class="col-source" title="' + escapeHtml(sourceText) + '">' + sourceCell + '</td>';

            html += '<td class="col-pk">' + escapeHtml((table.primary_key || []).join(', ') || '—') + '</td>';
            html += '<td class="col-schedule">' + escapeHtml(table.sync_schedule || '—') + '</td>';

            // Folder badge — '—' when null/empty.
            if (table.folder) {
                html += '<td class="col-folder"><span class="folder-badge">' + escapeHtml(table.folder) + '</span></td>';
            } else {
                html += '<td class="col-folder">—</td>';
            }

            var desc = unescapeShellQuoting(table.description || '');
            html += '<td class="col-description" title="' + escapeHtml(desc) + '">' + escapeHtml(desc || '—') + '</td>';

            // Registered: stacked email + date (first 10 chars of ISO timestamp).
            var regBy = table.registered_by || '';
            var regByDisplay = regBy;
            if (regBy.length > 24 && regBy.indexOf('@') > 0) {
                regByDisplay = regBy.split('@')[0];
            }
            var regAt = table.registered_at ? String(table.registered_at).slice(0, 10) : '';
            html += '<td class="col-registered">';
            html += '<div class="registered-by" title="' + escapeHtml(regBy) + '">' + (regByDisplay ? escapeHtml(regByDisplay) : '—') + '</div>';
            html += '<div class="registered-at">' + escapeHtml(regAt || '') + '</div>';
            html += '</td>';

            // Status: warning icon when the last sync errored.
            html += '<td class="col-status">';
            if (table.last_sync_error) {
                html += '<span title="' + escapeHtml(table.last_sync_error) + '">';
                html += '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--error);"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>';
                html += '</span>';
            }
            html += '</td>';

            html += '<td class="col-actions"><div style="display:flex; gap:4px; justify-content:flex-end;">';
            // Internal source tables (agnes_*) are seeded on every app
            // boot from connectors/internal/registry.py — Edit/Delete
            // would either no-op or be reverted on next start. Hide both
            // actions; Manage access stays because RBAC is still
            // per-table (internal tables auto-grant; the link still
            // takes the admin to the access page if they want to inspect).
            //
            // Issue #265: HTML attribute values do not recognize backslash
            // escapes the way JavaScript string literals do — use HTML-
            // entity escape (`&#39;` for `'`, plus `"`, `<`, `>`, `&`)
            // via escapeHtmlAttr, the right encoding for an HTML attribute.
            var isInternal = (table.source_type === 'internal');
            if (!isInternal) {
                html += '<button class="btn-icon" title="Edit" onclick=\'openEditModal(' + escapeHtmlAttr(JSON.stringify(table)) + ')\'>';
                html += '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>';
                html += '</button>';
            }
            // Manage access: deep-link to /admin/access pre-filtered to this table.
            html += '<button class="btn-icon" title="Manage access" onclick="manageAccess(&#39;' + escapeHtmlAttr(table.id) + '&#39;)">';
            html += '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>';
            html += '</button>';
            if (!isInternal) {
                html += '<button class="btn-icon danger" title="Delete" onclick="deleteTable(&#39;' + escapeHtmlAttr(table.id) + '&#39;)">';
                html += '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>';
                html += '</button>';
            }
            html += '</div></td></tr>';
        });
        html += '</tbody></table>';
        target.innerHTML = html;
    }

    // Deep-link from a table row to /admin/access scoped to this table_id.
    // The /admin/access page reads window.location.hash on bootstrap and,
    // when it matches `table:<id>`, pre-fills the resource filter so the
    // operator lands on the just-clicked table once they pick a group.
    function manageAccess(tableId) {
        window.location.href = '/admin/access#table:' + encodeURIComponent(tableId);
    }

    function deleteTable(tableId) {
        if (!confirm('Are you sure you want to unregister "' + tableId + '"?\n\nThis will remove it from sync and clean up user subscriptions.')) {
            return;
        }

        // DELETE doesn't need a body — the API has no `version` field.
        fetch('/api/admin/registry/' + encodeURIComponent(tableId), {
            method: 'DELETE',
        })
        .then(function(r) {
            // 204 No Content has an empty body, so don't .json() it.
            if (r.status === 204) return null;
            if (!r.ok) return r.json().then(function(d) { throw new Error(d.detail || d.error || 'Delete failed'); });
            return r.json();
        })
        .then(function() {
            showToast('Table unregistered successfully', 'success');
            loadRegistry();
        })
        .catch(function(err) {
            showToast('Delete failed: ' + err.message, 'error');
        });
    }

    // ── Modal close on overlay click ────────────────────────────

    var _registerBqModalEl = document.getElementById('registerBqModal');
    if (_registerBqModalEl) {
        _registerBqModalEl.addEventListener('click', function(e) {
            if (e.target === this) closeRegisterBqModal();
        });
    }

    var _registerKeboolaModalEl = document.getElementById('registerKeboolaModal');
    if (_registerKeboolaModalEl) {
        _registerKeboolaModalEl.addEventListener('click', function(e) {
            if (e.target === this) closeRegisterKeboolaModal();
        });
    }

    var _editKeboolaModalEl = document.getElementById('editKeboolaModal');
    if (_editKeboolaModalEl) {
        _editKeboolaModalEl.addEventListener('click', function(e) {
            if (e.target === this) closeEditKeboolaModal();
        });
    }

    var _editBqModalEl = document.getElementById('editBqModal');
    if (_editBqModalEl) {
        _editBqModalEl.addEventListener('click', function(e) {
            if (e.target === this) closeEditBqModal();
        });
    }

    document.getElementById('editModal').addEventListener('click', function(e) {
        if (e.target === this) closeEditModal();
    });

    // Close modals on Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeRegisterBqModal();
            if (typeof closeRegisterKeboolaModal === 'function') closeRegisterKeboolaModal();
            if (typeof closeEditKeboolaModal === 'function') closeEditKeboolaModal();
            if (typeof closeEditBqModal === 'function') closeEditBqModal();
            closeEditModal();
        }
    });

    // ── Initialize ──────────────────────────────────────────────

    loadRegistry();

    // ── Cache warmup toolbar (issue #155 / #156) ────────────────
    let cacheWarmupSource = null;

    function _cacheWarmupClearPollFallback() {
        if (window._cacheWarmupPollInterval) {
            clearInterval(window._cacheWarmupPollInterval);
            window._cacheWarmupPollInterval = null;
        }
    }

    function cacheWarmupInit() {
        cacheWarmupRefreshSnapshot();
        cacheWarmupOpenStream();
    }

    function cacheWarmupRefreshSnapshot() {
        fetch('/api/admin/cache-warmup/status')
            .then(function(r) { return r.json(); })
            .then(function(state) { cacheWarmupRender(state); })
            .catch(function() { /* silent */ });
    }

    function cacheWarmupOpenStream() {
        try {
            cacheWarmupSource = new EventSource('/api/admin/cache-warmup/stream');
            cacheWarmupSource.addEventListener('start', cacheWarmupOnStart);
            cacheWarmupSource.addEventListener('row', cacheWarmupOnRow);
            cacheWarmupSource.addEventListener('complete', cacheWarmupOnComplete);
            cacheWarmupSource.addEventListener('snapshot', function(e) {
                _cacheWarmupClearPollFallback();
                cacheWarmupRender(JSON.parse(e.data));
            });
            cacheWarmupSource.onerror = function() {
                if (cacheWarmupSource) {
                    cacheWarmupSource.close();
                    cacheWarmupSource = null;
                }
                // Continuous polling fallback. Try to re-open SSE every 30 s in
                // case the proxy / network heals. Only one polling interval at a
                // time (prevent stacking on repeated errors).
                if (!window._cacheWarmupPollInterval) {
                    window._cacheWarmupPollInterval = setInterval(
                        cacheWarmupRefreshSnapshot, 3000
                    );
                    setTimeout(function tryReconnect() {
                        if (cacheWarmupSource) return;  // already reconnected
                        try {
                            clearInterval(window._cacheWarmupPollInterval);
                            window._cacheWarmupPollInterval = null;
                            cacheWarmupOpenStream();  // recursive — onerror retries again
                        } catch (e) {
                            window._cacheWarmupPollInterval = setInterval(
                                cacheWarmupRefreshSnapshot, 3000
                            );
                            setTimeout(tryReconnect, 30000);
                        }
                    }, 30000);
                }
            };
        } catch (e) {
            setInterval(cacheWarmupRefreshSnapshot, 3000);
        }
    }

    function cacheWarmupRender(state) {
        var summary = document.getElementById('cacheWarmupSummary');
        var bar = document.getElementById('cacheWarmupBar');
        var btn = document.getElementById('cacheWarmupRunBtn');
        if (!summary) return;

        if (!state || state.state === 'never_run') {
            summary.textContent = 'No cache warmup yet — click Re-warm all to start.';
            bar.style.display = 'none';
            btn.disabled = false;
            return;
        }
        var inProgress = state.completed_at === null || state.completed_at === undefined;
        var pct = state.total > 0 ? Math.round((state.completed * 100) / state.total) : 0;
        summary.textContent = inProgress
            ? state.completed + ' / ' + state.total + ' fresh — running…'
            : 'Last run: ' + state.completed + ' ok, ' + state.failed + ' errors';
        bar.style.display = 'block';
        bar.value = pct;
        btn.disabled = inProgress;

        if (state.rows) {
            for (var tid in state.rows) {
                cacheWarmupSetRowBadge(tid, state.rows[tid]);
            }
        }
    }

    function cacheWarmupOnStart(e) {
        _cacheWarmupClearPollFallback();
        var data = JSON.parse(e.data);
        var log = document.getElementById('cacheWarmupLog');
        log.textContent = '';
        // Hide the inline hint paragraph as soon as a real log line lands
        // — the empty <pre>'s placeholder context is no longer useful and
        // the dark log block is what the operator wants to watch.
        var hint = document.getElementById('cacheWarmupHint');
        if (hint) hint.style.display = 'none';
        // Auto-open the details so streamed events are visible immediately,
        // even if the operator clicked Re-warm without expanding first.
        var details = document.getElementById('cacheWarmupDetails');
        if (details) details.open = true;
        cacheWarmupAppendLog(
            '[' + nowHHMMSS() + '] start  trigger=' + data.trigger + ' total=' + data.total
        );
        cacheWarmupRefreshSnapshot();
    }

    function cacheWarmupOnRow(e) {
        _cacheWarmupClearPollFallback();
        var rs = JSON.parse(e.data);
        cacheWarmupAppendLog(
            '[' + nowHHMMSS() + '] ' + rs.status.padEnd(7) + ' ' + rs.table_id +
            (rs.duration_ms ? '  (' + (rs.duration_ms / 1000).toFixed(1) + ' s)' : '') +
            (rs.error ? '  ' + rs.error : '')
        );
        cacheWarmupSetRowBadge(rs.table_id, rs);
        cacheWarmupRefreshSnapshot();
    }

    function cacheWarmupOnComplete(e) {
        _cacheWarmupClearPollFallback();
        var data = JSON.parse(e.data);
        cacheWarmupAppendLog(
            '[' + nowHHMMSS() + '] complete total=' + data.total +
            ' ok=' + data.completed + ' fail=' + data.failed
        );
        cacheWarmupRefreshSnapshot();
    }

    function cacheWarmupAppendLog(line) {
        var log = document.getElementById('cacheWarmupLog');
        if (!log) return;
        log.textContent += line + '\n';
        log.scrollTop = log.scrollHeight;
    }

    function cacheWarmupSetRowBadge(tableId, rs) {
        document.querySelectorAll('tr').forEach(function(tr) {
            var idCell = tr.querySelector('td.col-id');
            if (!idCell || idCell.textContent.trim() !== tableId) return;
            var statusCell = tr.querySelector('td.col-status');
            if (!statusCell) return;
            var color = {fresh: '#10B77F', warming: 'var(--primary)', pending: '#9CA3AF', error: '#EA580C'}[rs.status] || '#9CA3AF';
            var label = rs.status === 'fresh' ? 'fresh' : rs.status;
            // Build via DOM API so rs.error escapes safely into the title
            // attribute (XSS guard — rs.error is server-derived, may contain
            // quotes / angle brackets).
            var span = document.createElement('span');
            span.style.cssText =
                'display:inline-block;padding:2px 6px;border-radius:3px;' +
                'font-size:11px;background:' + color + ';color:white;';
            if (rs.error) span.setAttribute('title', rs.error);
            span.textContent = label;
            statusCell.replaceChildren(span);
        });
    }

    function nowHHMMSS() {
        var d = new Date();
        return d.toTimeString().slice(0, 8);
    }

    function cacheWarmupRun() {
        var btn = document.getElementById('cacheWarmupRunBtn');
        btn.disabled = true;
        // Auto-open the log section so the operator sees streaming output
        // instead of staring at a disabled button while ~24s pass per
        // remote BQ row. The hint paragraph hides as soon as a real log
        // line lands (see cacheWarmupOnStart).
        var details = document.getElementById('cacheWarmupDetails');
        if (details) details.open = true;
        fetch('/api/admin/cache-warmup/run', {method: 'POST'})
            .then(function(r) { return r.json(); })
            .then(function() { /* SSE stream picks up the new run */ })
            .catch(function() { btn.disabled = false; });
    }

    document.addEventListener('DOMContentLoaded', cacheWarmupInit);

    // ── Top-level Data Packages section hydration ───────────────
    // Discovery fix: before this section existed, admins had to open a
    // table's edit modal to even know Data Packages were a thing (the
    // chip-input lives inside the BQ register/edit form). This block
    // surfaces the package list above the connector tabs + adds a
    // "+ New" entry point that opens the existing Create Data Package
    // modal directly. The card grid reuses the .stack-grid + .stack-card
    // classes shared with /catalog + /memory.
    // ── Package-centric layout hydrator ──────────────────────────
    // Replaces the prior loadDataPackagesSection (card grid) + the four
    // per-tab listing renders. Pulls /api/admin/data-packages and
    // /api/admin/registry in parallel, then renders:
    //   1. one collapsible <details> per package containing its member tables
    //   2. an "Unpackaged tables" callout for everything else
    // Source_type appears as an inline tag on each row but no longer
    // drives the layout (the user's "everything must live within some
    // group in data packages" feedback).
    async function loadAdminTablesLayout() {
        var pkgsEl = document.getElementById('adminTablesLayoutPackages');
        var unpkEl = document.getElementById('adminTablesLayoutUnpackaged');
        if (!pkgsEl || !unpkEl) return;
        try {
            // v54: single round-trip for packages + their member ids via
            // ``?include_table_ids=true``. Was N+1 (one GET per package
            // after the list); on instances with 50+ packages the page
            // took multiple seconds before this collapsed fetch.
            var [pkgResp, tableResp] = await Promise.all([
                fetch('/api/admin/data-packages?include_table_ids=true',
                      { credentials: 'same-origin' }),
                fetch('/api/admin/registry', { credentials: 'same-origin' }),
            ]);
            if (!pkgResp.ok) {
                pkgsEl.innerHTML = '<div class="panel-body-empty" style="color:var(--error);">Failed to load Data Packages (HTTP ' + pkgResp.status + ').</div>';
                unpkEl.innerHTML = '';
                return;
            }
            if (!tableResp.ok) {
                pkgsEl.innerHTML = '<div class="panel-body-empty" style="color:var(--error);">Failed to load registry (HTTP ' + tableResp.status + ').</div>';
                unpkEl.innerHTML = '';
                return;
            }
            var pkgs = await pkgResp.json();
            var registryBody = await tableResp.json();
            registryData = registryBody;
            registryVersion = registryBody.version;
            var allTables = Array.isArray(registryBody)
                ? registryBody
                : (registryBody.tables || []);

            var tableById = {};
            allTables.forEach(function(t) { tableById[t.id] = t; });
            var packagedIds = new Set();
            var pkgsWithTables = pkgs.map(function(p) {
                // table_ids comes from the new ?include_table_ids=true
                // server-side join. Empty packages omit the field — default to [].
                var memberIds = p.table_ids || [];
                memberIds.forEach(function(id) { packagedIds.add(id); });
                var memberRows = memberIds
                    .map(function(id) { return tableById[id]; })
                    .filter(Boolean);
                return Object.assign({}, p, { _members: memberRows });
            });

            // ── Render packages ──
            if (!pkgsWithTables.length) {
                pkgsEl.innerHTML = ''
                    + '<div style="padding:24px; text-align:center; color:var(--text-secondary); '
                    +            'background:var(--background); border:1px dashed var(--border); '
                    +            'border-radius:8px;">'
                    + '  <p style="margin:0 0 8px; font-size:14px; color:var(--text-primary);">'
                    + '    <strong>No Data Packages yet</strong>'
                    + '  </p>'
                    + '  <p style="margin:0 0 12px; font-size:13px;">'
                    + '    Bundle related tables so analysts can opt-in to them as a group.'
                    + '  </p>'
                    + '  <button class="btn btn-primary" type="button" '
                    + '          onclick="openCreateDataPackageModal(\'\', null)">+ New Data Package</button>'
                    + '  <button class="btn btn-secondary" type="button" '
                    + '          onclick="groupTablesByBucket()" style="margin-left:8px;">'
                    + '    Group tables by bucket'
                    + '  </button>'
                    + '</div>';
            } else {
                pkgsEl.innerHTML = pkgsWithTables.map(function(p) {
                    var iconRaw = p.icon || '📦';
                    var color = p.color || '#f3f4f6';
                    var name = String(p.name || '');
                    var slug = String(p.slug || '');
                    var desc = String(p.description || '');
                    var tcount = (p._members || []).length;
                    var rowsHtml = (p._members || []).length
                        ? _renderPackageTableRows(p._members, p.id)
                        : '<div class="panel-body-empty" style="padding:16px; font-size:12px;">'
                          + 'No tables in this package yet. Click <strong>+ Add tables</strong> above.</div>';
                    return ''
                      + '<details open data-package-id="' + escapeHtmlAttr(p.id) + '" '
                      +          'style="margin-bottom:12px; border:1px solid var(--border); '
                      +                 'border-radius:10px; background:var(--surface);">'
                      + '  <summary style="display:flex; align-items:center; gap:12px; padding:12px 16px; '
                      +                  'cursor:pointer; user-select:none; list-style:none;">'
                      + '    <span style="display:inline-flex; align-items:center; justify-content:center; '
                      +                  'width:32px; height:32px; border-radius:8px; flex-shrink:0; '
                      +                  'background:' + escapeHtmlAttr(color) + ';">'
                      +        escapeHtml(iconRaw)
                      + '    </span>'
                      + '    <span style="flex:1; min-width:0;">'
                      + '      <strong style="font-size:14px;">' + escapeHtml(name) + '</strong>'
                      +        (desc ? ('<div style="font-size:12px; color:var(--text-secondary); '
                      +                       'margin-top:2px;">' + escapeHtml(desc) + '</div>') : '')
                      + '    </span>'
                      + '    <span style="font-size:12px; color:var(--text-secondary);">'
                      +        tcount + ' table' + (tcount === 1 ? '' : 's') + '</span>'
                      + '    <button class="btn btn-secondary btn-sm" type="button" '
                      +            'onclick="event.preventDefault(); event.stopPropagation(); '
                      +                     'openBulkAssignModal(\'' + escapeHtmlAttr(p.id) + '\')">'
                      + '      + Add tables'
                      + '    </button>'
                      + '    <button class="btn btn-secondary btn-sm" type="button" '
                      +            'onclick="event.preventDefault(); event.stopPropagation(); '
                      +                     'openEditDataPackageModal(\'' + escapeHtmlAttr(p.id) + '\')">'
                      + '      Edit package'
                      + '    </button>'
                      + '    <a class="btn btn-secondary btn-sm" '
                      +       'href="/catalog/p/' + escapeHtmlAttr(slug) + '" '
                      +       'onclick="event.stopPropagation()" '
                      +       'title="See this package as analysts will">'
                      + '      View as analyst'
                      + '    </a>'
                      + '  </summary>'
                      + '  <div style="padding:0 12px 12px;">' + rowsHtml + '</div>'
                      + '</details>';
                }).join('');
            }

            // ── Render Unpackaged tables ──
            // Exclude internal/agnes_* rows from "needs packaging" — they're
            // auto-seeded and shouldn't be auto-bundled. Still listed in a
            // separate read-only group below.
            var unpackagedNeedsAttention = allTables.filter(function(t) {
                return !packagedIds.has(t.id)
                    && (t.source_type || '') !== 'internal';
            });
            var internalUnpackaged = allTables.filter(function(t) {
                return !packagedIds.has(t.id)
                    && (t.source_type || '') === 'internal';
            });

            var unpkParts = [];
            if (unpackagedNeedsAttention.length) {
                unpkParts.push(''
                    + '<section id="adminTablesUnpackaged" style="border:1px solid #FCD34D; '
                    +          'background:rgba(255,247,205,0.4); border-radius:10px;">'
                    + '  <header style="display:flex; align-items:center; gap:12px; '
                    +                 'padding:12px 16px; border-bottom:1px solid #FCD34D;">'
                    + '    <span style="font-size:16px;">⚠️</span>'
                    + '    <strong style="flex:1; font-size:14px;">Unpackaged tables '
                    +      '<span style="color:var(--text-secondary); font-weight:500;">'
                    +      '(' + unpackagedNeedsAttention.length + ' — needs packaging)</span></strong>'
                    + '    <button class="btn btn-secondary btn-sm" type="button" '
                    +            'onclick="groupTablesByBucket()">Group by bucket</button>'
                    + '    <button class="btn btn-primary btn-sm" type="button" '
                    +            'onclick="openBulkAssignModal(\'\')">Bulk assign</button>'
                    + '  </header>'
                    + '  <div style="padding:0 12px 12px;">'
                    +      _renderPackageTableRows(unpackagedNeedsAttention, null)
                    + '  </div>'
                    + '</section>');
            }
            if (internalUnpackaged.length) {
                unpkParts.push(''
                    + '<section style="margin-top:16px; border:1px solid var(--border); '
                    +          'background:var(--background); border-radius:10px;">'
                    + '  <header style="display:flex; align-items:center; gap:12px; '
                    +                 'padding:12px 16px; border-bottom:1px solid var(--border);">'
                    + '    <strong style="flex:1; font-size:13px; color:var(--text-secondary);">'
                    + '      Agnes internal tables '
                    +      '<span style="font-weight:500;">(read-only; seeded on app boot)</span>'
                    + '    </strong>'
                    + '  </header>'
                    + '  <div style="padding:0 12px 12px;">'
                    +      _renderPackageTableRows(internalUnpackaged, null)
                    + '  </div>'
                    + '</section>');
            }
            unpkEl.innerHTML = unpkParts.join('');
        } catch (e) {
            pkgsEl.innerHTML = '<div class="panel-body-empty" style="color:var(--error);">'
                + 'Network error: ' + escapeHtml(e.message) + '</div>';
            unpkEl.innerHTML = '';
        }
    }

    // Render a list of table rows for the package-centric layout. Each row:
    //   [name link → /admin/tables?edit=<id>] [source_type tag] [bucket] [mode]
    //   [Edit] [Remove from package | + Add to package ▾]
    // pkgIdOrNull → when non-null, rows expose a "Remove from package" action;
    //               when null (Unpackaged section), rows expose "+ Add to package".
    function _renderPackageTableRows(tables, pkgIdOrNull) {
        if (!tables || !tables.length) {
            return '<div class="panel-body-empty">No tables here yet.</div>';
        }
        var html = '<table class="registry-table" style="margin-top:8px;">';
        html += '<thead><tr>';
        html += '<th class="col-id">Table</th>';
        html += '<th>Source</th>';
        html += '<th>Bucket</th>';
        html += '<th class="col-mode">Mode</th>';
        html += '<th class="col-actions">Actions</th>';
        html += '</tr></thead><tbody>';
        tables.forEach(function(t) {
            var id = String(t.id || '');
            var name = String(t.name || id);
            var src = String(t.source_type || '');
            var bucket = String(t.bucket || '');
            var editUrl = '/admin/tables?edit=' + encodeURIComponent(id);
            var isInternal = (src === 'internal');
            // data-table-row-{name,source,bucket} attributes power the
            // filterAdminTablesLayout() search; lower-case once at render
            // time so the filter can use plain substring matching.
            html += '<tr data-table-id="' + escapeHtmlAttr(id) + '" '
                  + 'data-table-row-name="' + escapeHtmlAttr(name.toLowerCase()) + '" '
                  + 'data-table-row-source="' + escapeHtmlAttr(src.toLowerCase()) + '" '
                  + 'data-table-row-bucket="' + escapeHtmlAttr(bucket.toLowerCase()) + '">';
            html += '<td class="col-id" title="' + escapeHtml(id) + '">'
                  + '<a href="' + escapeHtmlAttr(editUrl) + '" '
                  +    'style="color:var(--primary); text-decoration:none;">'
                  + escapeHtml(name) + '</a></td>';
            html += '<td><span class="badge badge-available" style="font-size:11px;">'
                  + escapeHtml(src || '—') + '</span></td>';
            html += '<td style="font-family:var(--font-mono); font-size:12px; color:var(--text-secondary);">'
                  + escapeHtml(bucket || '—') + '</td>';
            html += '<td class="col-mode">' + renderModeBadge(t.query_mode) + '</td>';
            html += '<td class="col-actions"><div style="display:flex; gap:4px; justify-content:flex-end;">';
            if (!isInternal) {
                html += '<button class="btn-icon" title="Edit" '
                      + 'onclick=\'openEditModal(' + escapeHtmlAttr(JSON.stringify(t)) + ')\'>'
                      + '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>'
                      + '</button>';
            }
            if (pkgIdOrNull && !isInternal) {
                html += '<button class="btn-icon danger" title="Remove from package" '
                      + 'onclick="removeTableFromPackageById(&#39;' + escapeHtmlAttr(pkgIdOrNull) + '&#39;, &#39;' + escapeHtmlAttr(id) + '&#39;)">'
                      + '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/></svg>'
                      + '</button>';
            } else if (!pkgIdOrNull && !isInternal) {
                // Icon button for visual rhythm with Edit (the wide
                // "+ Add to package" text button used to overflow the
                // 120px col-actions and bleed leftward into the Mode
                // column — user-reported visual bug). Title attr keeps
                // the explicit label discoverable on hover.
                html += '<button class="btn-icon" type="button" '
                      + 'title="Add to a Data Package" '
                      + 'onclick="openBulkAssignFromRow(&#39;' + escapeHtmlAttr(id) + '&#39;)" '
                      + 'style="color:var(--primary);">'
                      + '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
                      +   '<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>'
                      +   '<line x1="12" y1="11" x2="12" y2="17"/>'
                      +   '<line x1="9" y1="14" x2="15" y2="14"/>'
                      + '</svg>'
                      + '</button>';
            }
            html += '</div></td></tr>';
        });
        html += '</tbody></table>';
        return html;
    }

    // Remove a single table from a package, then refresh the layout.
    async function removeTableFromPackageById(pkgId, tableId) {
        if (!confirm('Remove this table from the package? (The table itself is not deleted.)')) return;
        var r = await fetch('/api/admin/data-packages/' + encodeURIComponent(pkgId)
                            + '/tables/' + encodeURIComponent(tableId),
                            { method: 'DELETE', credentials: 'same-origin' });
        if (!r.ok) { alert('Remove failed: HTTP ' + r.status); return; }
        if (typeof loadAdminTablesLayout === 'function') loadAdminTablesLayout();
    }

    // Open bulk-assign modal pre-checking a single table — the "+ Add to
    // package" CTA on each unpackaged row. Defers to the existing modal so
    // the operator can pick the target package without leaving the page.
    function openBulkAssignFromRow(tableId) {
        openBulkAssignModal('');
        // Once the modal's table list has rendered, pre-check the requested
        // row. The modal renders synchronously via renderBulkAssignList after
        // its async fetches resolve, so poll briefly.
        var tries = 0;
        var tick = setInterval(function() {
            tries += 1;
            var cb = document.querySelector(
                '#bulk-assign-list .bulk-assign-cb[value="' + tableId.replace(/"/g, '') + '"]'
            );
            if (cb) {
                cb.checked = true;
                cb.scrollIntoView({ block: 'center' });
                clearInterval(tick);
            } else if (tries > 50) {
                clearInterval(tick);
            }
        }, 50);
    }

    // Backward-compat alias — Edit/Create/Delete-package flows declared
    // before the rewrite still call loadDataPackagesSection() to refresh.
    var loadDataPackagesSection = loadAdminTablesLayout;
    window.loadDataPackagesSection = loadDataPackagesSection;

    // ── Search filter for the /admin/tables layout ───────────────────
    // Mirrors the /catalog + /memory hero-search pattern: one input
    // narrows both packages and table rows in place. A package is
    // visible when its name matches OR any of its member tables match;
    // an unpackaged row is visible when its name / source / bucket
    // matches.
    function filterAdminTablesLayout() {
      var input = document.getElementById('adminTablesSearch');
      var hint = document.getElementById('adminTablesSearchHint');
      var q = (input && input.value || '').toLowerCase().trim();
      var matched = 0;
      var total = 0;
      // Per-package <details> filtering — show the package if its name
      // matches, OR any of the rows inside match.
      document.querySelectorAll(
        '#adminTablesLayoutPackages details[data-package-id]'
      ).forEach(function(d) {
        var pkgName = ((d.querySelector('summary strong')||{}).textContent || '').toLowerCase();
        var rows = d.querySelectorAll('[data-table-row-name]');
        var anyRow = false;
        rows.forEach(function(r) {
          total += 1;
          var rn = (r.getAttribute('data-table-row-name') || '').toLowerCase();
          var rs = (r.getAttribute('data-table-row-source') || '').toLowerCase();
          var rb = (r.getAttribute('data-table-row-bucket') || '').toLowerCase();
          var hit = !q || rn.indexOf(q) !== -1 || rs.indexOf(q) !== -1 || rb.indexOf(q) !== -1;
          r.style.display = hit ? '' : 'none';
          if (hit) { anyRow = true; matched += 1; }
        });
        var pkgHit = !q || pkgName.indexOf(q) !== -1 || anyRow;
        d.style.display = pkgHit ? '' : 'none';
        // When the query hits the package name only, expand it; when the
        // query is empty leave the user's open/closed state alone.
        if (q && pkgHit && (anyRow || pkgName.indexOf(q) !== -1)) {
          d.open = true;
        }
      });
      // Unpackaged rows live outside the per-package <details>.
      document.querySelectorAll(
        '#adminTablesLayoutUnpackaged [data-table-row-name]'
      ).forEach(function(r) {
        total += 1;
        var rn = (r.getAttribute('data-table-row-name') || '').toLowerCase();
        var rs = (r.getAttribute('data-table-row-source') || '').toLowerCase();
        var rb = (r.getAttribute('data-table-row-bucket') || '').toLowerCase();
        var hit = !q || rn.indexOf(q) !== -1 || rs.indexOf(q) !== -1 || rb.indexOf(q) !== -1;
        r.style.display = hit ? '' : 'none';
        if (hit) matched += 1;
      });
      if (hint) {
        hint.textContent = q
          ? matched + ' of ' + total + ' table' + (total === 1 ? '' : 's')
          : '';
      }
    }
    window.filterAdminTablesLayout = filterAdminTablesLayout;

    document.addEventListener('DOMContentLoaded', loadAdminTablesLayout);

    // Auto-open the Create Data Package modal when the page is opened with
    // `?new_package=1` — drives the /catalog right-of-tabs admin action
    // (which redirects here rather than duplicating the modal scaffolding).
    document.addEventListener('DOMContentLoaded', function() {
      var qs = new URLSearchParams(window.location.search);
      if (qs.get('new_package') !== '1') return;
      // Wait a tick so the layout's deferred load completes (the modal
      // doesn't actually depend on it, but the page feels less janky if
      // the layout has rendered first).
      setTimeout(function() {
        if (typeof openCreateDataPackageModal === 'function') {
          openCreateDataPackageModal('', null);
        }
      }, 50);
      // Strip the query param so a manual refresh doesn't re-open the
      // modal (mirrors closeBulkAssignModal's URL hygiene).
      history.replaceState(null, '',
        window.location.pathname + window.location.hash);
    });

    // Auto-open the Edit Data Package modal when the page is opened
    // with `?edit_package=<pkg_id>` — closes the /catalog/p/<slug>
    // drill-down Edit button (which previously linked to `#<pkg.id>`
    // and did nothing past landing on the page).
    document.addEventListener('DOMContentLoaded', function() {
      var qs = new URLSearchParams(window.location.search);
      var pkgId = qs.get('edit_package');
      if (!pkgId) return;
      // Wait for the layout's deferred load to settle so the modal
      // hydrators (member tables, RBAC matrix) have something to hang
      // their fetches on.
      setTimeout(function() {
        if (typeof openEditDataPackageModal === 'function') {
          openEditDataPackageModal(pkgId);
        }
      }, 250);
      // Strip the query param so a manual refresh doesn't re-open.
      history.replaceState(null, '',
        window.location.pathname + window.location.hash);
    });

    // Auto-open the source-typed edit modal when the page is opened with
    // `?edit=<table_id>` — closes the /catalog/p/<slug> drill-down loop
    // where each table name is now an admin-only link landing here.
    // Package-centric rewrite: no more switchTab; the modal opens directly.
    document.addEventListener('DOMContentLoaded', async function() {
      var qs = new URLSearchParams(window.location.search);
      var editId = qs.get('edit');
      if (!editId) return;
      try {
        var r = await fetch('/api/admin/registry', { credentials: 'same-origin' });
        if (!r.ok) return;
        var body = await r.json();
        var tables = Array.isArray(body) ? body : (body.tables || []);
        var t = tables.find(function(x) { return String(x.id) === String(editId); });
        if (!t) {
          alert('Table not found (id=' + editId + '). It may have been deleted.');
          return;
        }
        // Small delay so the layout has time to mount; then open the source-
        // dispatched edit modal directly. No tab nav anymore.
        setTimeout(function() {
          if (typeof openEditModal === 'function') openEditModal(t);
        }, 200);
      } catch (e) {
        console.warn('?edit auto-open failed:', e);
      }
    });

    </script>
{% endblock %}

{# Chip-input component (v55 — was globally loaded in base.html, now
   opt-in per template via this extra_scripts block; admin_tables mounts
   it via the BQ Register modal's `data-name="bq_package_ids"` host). #}
{% block extra_scripts %}
<script type="module" src="{{ static_url('js/components/chip-input.js') }}"></script>
{% endblock %}