{% import '_window_bar.html' as wb %}
<div class="container my-4" id="analysisSection"
     x-show="$store.citrasense.currentSection === 'analysis'" x-cloak
     x-data="analysisTab()"
     x-effect="if ($store.citrasense.currentSection === 'analysis' && !loaded) loadAll()">

    <h4 class="mb-3">Pipeline Analysis</h4>

    <!-- Summary cards -->
    <div class="row g-3 mb-4" id="analysisCards">
        <div class="col-6 col-md-4 col-xl-2">
            <div class="card analysis-card h-100">
                <div class="card-body p-2 text-center">
                    <div class="analysis-card-value" x-text="stats.task_count ?? '—'"></div>
                    <div class="analysis-card-label">Tasks</div>
                    <small class="text-muted" x-text="stats.tasks_per_hour != null ? stats.tasks_per_hour + '/hr' : ''"></small>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-xl-2">
            <div class="card analysis-card h-100">
                <div class="card-body p-2 text-center">
                    <div class="analysis-card-value" x-text="stats.plate_solve_rate != null ? stats.plate_solve_rate + '%' : '—'"></div>
                    <div class="analysis-card-label">Plate Solve Rate</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-xl-2">
            <div class="card analysis-card h-100">
                <div class="card-body p-2 text-center">
                    <div class="analysis-card-value" x-text="stats.convergence_rate != null ? stats.convergence_rate + '%' : '—'"></div>
                    <div class="analysis-card-label">Convergence</div>
                    <small class="text-muted" x-text="stats.avg_convergence_attempts != null ? 'avg ' + stats.avg_convergence_attempts + ' iter' : ''"></small>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-xl-2">
            <div class="card analysis-card h-100">
                <div class="card-body p-2 text-center">
                    <div class="analysis-card-value" x-text="stats.avg_pointing_error_deg != null ? stats.avg_pointing_error_deg + '°' : '—'"></div>
                    <div class="analysis-card-label">Avg Pointing Error</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-xl-2">
            <div class="card analysis-card h-100">
                <div class="card-body p-2 text-center">
                    <div class="analysis-card-value" x-text="stats.target_match_rate != null ? stats.target_match_rate + '%' : '—'"></div>
                    <div class="analysis-card-label">Target Match</div>
                    <small class="text-muted" x-text="stats.total_incidental_detections ? stats.total_incidental_detections + ' incidental' : ''"></small>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-xl-2">
            <div class="card analysis-card h-100">
                <div class="card-body p-2 text-center">
                    <div class="analysis-card-value" x-text="stats.upload_success_rate != null ? stats.upload_success_rate + '%' : '—'"></div>
                    <div class="analysis-card-label">Upload Success</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-xl-2">
            <div class="card analysis-card h-100">
                <div class="card-body p-2 text-center">
                    <div class="analysis-card-value" x-text="stats.window_compliance_rate != null ? stats.window_compliance_rate + '%' : '—'"></div>
                    <div class="analysis-card-label">On Time</div>
                    <small class="text-muted" x-text="stats.avg_window_start_delay_s != null ? 'avg +' + stats.avg_window_start_delay_s + 's' : ''"></small>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-xl-2">
            <div class="card analysis-card h-100">
                <div class="card-body p-2 text-center">
                    <div class="analysis-card-value" x-text="stats.avg_zero_point != null ? stats.avg_zero_point : '—'"></div>
                    <div class="analysis-card-label">Avg ZP</div>
                    <small class="text-muted" x-text="stats.stddev_zero_point != null ? '± ' + stats.stddev_zero_point : ''"></small>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-xl-2">
            <div class="card analysis-card h-100">
                <div class="card-body p-2 text-center">
                    <div class="analysis-card-value" x-text="stats.avg_total_processing_s != null ? stats.avg_total_processing_s + 's' : '—'"></div>
                    <div class="analysis-card-label">Avg Processing</div>
                    <small class="text-muted" x-text="stats.avg_queue_wait_s != null ? 'queue ' + stats.avg_queue_wait_s + 's' : ''"></small>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-xl-2">
            <div class="card analysis-card h-100">
                <div class="card-body p-2 text-center">
                    <div class="analysis-card-value" x-text="stats.avg_slew_time_s != null ? stats.avg_slew_time_s + 's' : '—'"></div>
                    <div class="analysis-card-label">Avg Slew</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Per-processor timing bar -->
    <template x-if="stats.per_processor_timing && stats.task_count > 0">
        <div class="mb-4">
            <small class="text-muted d-block mb-1">Average per-processor time (seconds)</small>
            <div class="analysis-timing-bar d-flex" style="height: 22px; border-radius: 4px; overflow: hidden;">
                <template x-for="seg in processorSegments" :key="seg.name">
                    <div class="analysis-timing-seg" :style="'width:' + seg.pct + '%; background:' + seg.color"
                         :title="seg.name + ': ' + seg.val + 's'" x-show="seg.pct > 0">
                        <span class="analysis-timing-seg-label" x-text="seg.pct > 8 ? seg.name : ''" x-show="seg.pct > 5"></span>
                    </div>
                </template>
            </div>
        </div>
    </template>

    <!-- Filters -->
    <div class="row g-2 mb-3 align-items-end">
        <div class="col-auto">
            <input type="text" class="form-control form-control-sm" placeholder="Target name..."
                   x-model.debounce.300ms="filterTarget" @input="applyFilter()">
        </div>
        <div class="col-auto">
            <input type="date" class="form-control form-control-sm" x-model="filterDateFrom" @change="applyFilter()"
                   title="From date" style="max-width: 140px;">
        </div>
        <div class="col-auto">
            <input type="date" class="form-control form-control-sm" x-model="filterDateTo" @change="applyFilter()"
                   title="To date" style="max-width: 140px;">
        </div>
        <div class="col-auto">
            <select class="form-select form-select-sm" x-model="filterFilterName" @change="applyFilter()">
                <option value="">Filter: any</option>
                <template x-for="fn in (stats.filter_names || [])" :key="fn">
                    <option :value="fn" x-text="fn"></option>
                </template>
            </select>
        </div>
        <div class="col-auto">
            <select class="form-select form-select-sm" x-model="filterSolved" @change="applyFilter()">
                <option value="">Solve: any</option>
                <option value="true">Solved</option>
                <option value="false">Not solved</option>
            </select>
        </div>
        <div class="col-auto">
            <select class="form-select form-select-sm" x-model="filterMatchDetail" @change="applyFilter()">
                <option value="">Match: any</option>
                <option value="matched">Target matched</option>
                <option value="not_matched">Target not matched</option>
                <option value="has_extras">Has extra detections</option>
                <option value="no_detections">No detections</option>
            </select>
        </div>
        <div class="col-auto">
            <select class="form-select form-select-sm" x-model="filterWindow" @change="applyFilter()">
                <option value="">Window: any</option>
                <option value="true">Missed</option>
                <option value="false">On time</option>
            </select>
        </div>
        <div class="col-auto">
            <select class="form-select form-select-sm" x-model="filterUploadStatus" @change="applyFilter()">
                <option value="">Upload: any</option>
                <option value="uploaded">Uploaded</option>
                <option value="failed">Failed</option>
                <option value="skipped">Skipped</option>
            </select>
        </div>
        <div class="col-auto ms-auto d-flex gap-2">
            <button class="btn btn-sm" :class="autotuneOpen ? 'btn-primary' : 'btn-outline-primary'"
                    @click="autotuneOpen = !autotuneOpen">
                <i class="bi bi-lightning"></i> Auto-Tune
                <span class="badge bg-secondary ms-1" style="font-size: 0.6rem; vertical-align: middle;">BETA</span>
                <span x-show="autotuneRunning" class="badge bg-warning text-dark ms-1"
                      style="font-size: 0.6rem; vertical-align: middle;">running</span>
                <template x-if="selectedCount > 0 && !autotuneRunning">
                    <span class="badge bg-info ms-1"
                          style="font-size: 0.6rem; vertical-align: middle;"
                          x-text="selectedCount"></span>
                </template>
            </button>
            <button class="btn btn-sm btn-outline-secondary" @click="loadAll()" :disabled="loading">
                <i class="bi bi-arrow-clockwise" :class="loading && 'spin'"></i> Refresh
            </button>
        </div>
    </div>

    <!-- Auto-Tune panel (expands below filters) -->
    <div x-show="autotuneOpen" x-transition class="mb-3">
        <div class="card">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h6 class="mb-0"><i class="bi bi-sliders"></i> SExtractor Auto-Tune <span class="badge bg-secondary" style="font-size: 0.6rem; vertical-align: middle;">BETA</span></h6>
                    <div class="btn-group btn-group-sm">
                        <button class="btn btn-primary" @click="doAutotune()" :disabled="autotuneRunning">
                            <span x-show="!autotuneRunning"><i class="bi bi-lightning"></i> Run</span>
                            <span x-show="autotuneRunning">
                                <span class="spinner-border spinner-border-sm"></span>
                                <span x-text="autotuneProgress + '/' + autotuneTotal"></span>
                            </span>
                        </button>
                        <button class="btn btn-outline-danger" x-show="autotuneRunning"
                                @click="cancelAutotune()" title="Cancel auto-tune">
                            <i class="bi bi-x-lg"></i>
                        </button>
                    </div>
                </div>
                <small class="text-muted d-block mb-2">
                    Sweeps parameter combinations across retained debug bundles to find the best
                    extraction settings for your telescope.
                    Requires <strong>Keep Processing Output</strong> enabled in Settings.
                </small>
                <small class="text-muted d-block mb-2">
                    <template x-if="selectedCount > 0">
                        <span>
                            <i class="bi bi-check2-square"></i>
                            Tuning against <strong x-text="selectedCount"></strong> selected tasks.
                            For best results, pick tasks where plate solving succeeded and the target was in the field.
                        </span>
                    </template>
                    <template x-if="selectedCount === 0">
                        <span>
                            Tuning against the most recent plate-solved bundles.
                            Select tasks below to hand-pick specific ones instead.
                        </span>
                    </template>
                </small>

                <template x-if="autotuneRunning">
                    <div class="progress mb-2" style="height: 6px;">
                        <div class="progress-bar" :style="'width:' + (autotuneTotal > 0 ? (autotuneProgress / autotuneTotal * 100) : 0) + '%'"></div>
                    </div>
                </template>

                <template x-if="autotuneResult && autotuneResult.error">
                    <div class="text-danger small" x-text="autotuneResult.error"></div>
                </template>

                <template x-if="autotuneResult && autotuneResult.configs">
                    <div>
                        <small class="text-muted d-block mb-1">
                            Top configurations
                            (<span x-text="autotuneResult.bundles_used"></span>
                            <template x-if="autotuneResult.bundles_requested && autotuneResult.bundles_requested > autotuneResult.bundles_used">
                                <span> of <span x-text="autotuneResult.bundles_requested"></span></span>
                            </template>
                            bundles, <span x-text="autotuneResult.total_evaluated"></span> evaluations)
                        </small>
                        <div class="table-responsive">
                            <table class="table table-sm mb-0" style="font-size: 0.8rem;">
                                <thead>
                                    <tr class="text-muted">
                                        <th class="py-1">#</th>
                                        <th class="py-1">Score</th>
                                        <th class="py-1">Thresh</th>
                                        <th class="py-1">MinArea</th>
                                        <th class="py-1">Filter</th>
                                        <th class="py-1">Sources</th>
                                        <th class="py-1">Sat Det %</th>
                                        <th class="py-1">Cal Stars</th>
                                        <th class="py-1">Purity</th>
                                        <th class="py-1">FP Risk</th>
                                        <th class="py-1"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <template x-for="(cfg, idx) in autotuneResult.configs.slice(0, 10)"
                                              :key="cfg.detect_thresh + '|' + cfg.detect_minarea + '|' + cfg.filter_name">
                                        <tr :class="idx === 0 && 'table-success'">
                                            <td class="py-1" x-text="idx + 1"></td>
                                            <td class="py-1 fw-bold" x-text="cfg.avg_score.toFixed(4)"></td>
                                            <td class="py-1" x-text="cfg.detect_thresh"></td>
                                            <td class="py-1" x-text="cfg.detect_minarea"></td>
                                            <td class="py-1" x-text="cfg.filter_name"></td>
                                            <td class="py-1" x-text="cfg.avg_sources.toFixed(0)"></td>
                                            <td class="py-1" x-text="(cfg.satellite_detection_rate * 100).toFixed(0) + '%'"></td>
                                            <td class="py-1" x-text="cfg.avg_calibration_stars.toFixed(0)"></td>
                                            <td class="py-1" x-text="(cfg.avg_purity * 100).toFixed(0) + '%'"></td>
                                            <td class="py-1" :class="cfg.avg_fp_rate > 0.5 ? 'text-danger' : cfg.avg_fp_rate > 0.2 ? 'text-warning' : 'text-success'"
                                                x-text="(cfg.avg_fp_rate * 100).toFixed(0) + '%'"></td>
                                            <td class="py-1">
                                                <button class="btn btn-outline-success btn-sm py-0 px-1" style="font-size: 0.7rem;"
                                                        @click="applyAutotuneSettings(cfg)"
                                                        x-text="idx === 0 ? 'Apply Best' : 'Apply'"></button>
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>

    <!-- Batch action bar -->
    <div x-show="selectedCount > 0" x-transition
         class="card mb-3 border-warning" style="background: rgba(255,193,7,0.08);">
        <div class="card-body p-2">
            <div class="d-flex flex-wrap gap-2 align-items-end">
                <strong class="me-1" x-text="selectedCount + ' selected'"></strong>
                <button type="button" class="btn btn-link btn-sm p-0 me-2 text-body-secondary"
                        style="font-size: 0.75rem; text-decoration: underline;"
                        @click="clearSelection()" title="Clear all selections">clear</button>
                <div>
                    <label class="form-label mb-0" style="font-size: 0.7rem;">Detect Thresh</label>
                    <input type="number" class="form-control form-control-sm" style="width: 80px;"
                           x-model.number="batchThresh" min="1" max="20" step="0.5">
                </div>
                <div>
                    <label class="form-label mb-0" style="font-size: 0.7rem;">Min Area</label>
                    <input type="number" class="form-control form-control-sm" style="width: 70px;"
                           x-model.number="batchMinarea" min="1" max="50" step="1">
                </div>
                <div>
                    <label class="form-label mb-0" style="font-size: 0.7rem;">Filter</label>
                    <select class="form-select form-select-sm" style="width: 140px;"
                            x-model="batchFilter">
                        <option value="default">default</option>
                        <option value="gauss_2.5_5x5">gauss_2.5_5x5</option>
                        <option value="gauss_3.0_7x7">gauss_3.0_7x7</option>
                        <option value="gauss_4.0_7x7">gauss_4.0_7x7</option>
                        <option value="tophat_3.0_3x3">tophat_3.0_3x3</option>
                    </select>
                </div>
                <button class="btn btn-sm btn-primary" @click="doBatchReprocess()" :disabled="batchJobId">
                    <span x-show="!batchJobId"><i class="bi bi-arrow-repeat"></i> Reprocess Selected</span>
                    <span x-show="batchJobId"><span class="spinner-border spinner-border-sm"></span>
                        <span x-text="batchProgress + '/' + batchTotal"></span></span>
                </button>
            </div>
            <template x-if="batchResult">
                <div class="mt-2 small">
                    <span class="text-success" x-text="batchResult.succeeded + ' succeeded'"></span>,
                    <span class="text-danger" x-text="batchResult.failed + ' failed'"></span>
                </div>
            </template>
        </div>
    </div>

    <!-- Task table -->
    <div class="table-responsive">
        <table class="table table-sm table-hover analysis-table">
            <thead>
                <tr>
                    <th style="width: 30px;">
                        <input type="checkbox" class="form-check-input"
                               @change="toggleSelectAll($event.target.checked)"
                               :checked="tasks.length > 0 && tasks.every(t => selectedTasks[t.task_id])"
                               x-effect="$el.indeterminate = tasks.some(t => selectedTasks[t.task_id])
                                                          && !tasks.every(t => selectedTasks[t.task_id])">
                    </th>
                    <th class="sortable" @click="toggleSort('completed_at')">
                        Time <span x-text="sortIcon('completed_at')"></span>
                    </th>
                    <th class="sortable" @click="toggleSort('target_name')">
                        Target <span x-text="sortIcon('target_name')"></span>
                    </th>
                    <th>Filter</th>
                    <th>Window</th>
                    <th>Converged</th>
                    <th>Solved</th>
                    <th class="sortable" @click="toggleSort('pointing_error_deg')">
                        Pointing <span x-text="sortIcon('pointing_error_deg')"></span>
                    </th>
                    <th>Target Hit</th>
                    <th>Extras</th>
                    <th class="sortable" @click="toggleSort('zero_point')">
                        ZP <span x-text="sortIcon('zero_point')"></span>
                    </th>
                    <th>Upload</th>
                    <th>Utilization</th>
                    <th></th>
                </tr>
            </thead>
            <template x-for="(task, idx) in tasks" :key="task.task_id">
                <tbody>
                    <tr class="analysis-summary-row" :class="expanded === task.task_id && 'analysis-row-expanded'"
                        @click="toggleDetail(task.task_id)" style="cursor: pointer;">
                        <td @click.stop>
                            <input type="checkbox" class="form-check-input"
                                   :checked="!!selectedTasks[task.task_id]"
                                   @click.stop="handleRowCheckboxClick($event, idx)"
                                   title="Shift+click to select a range">
                        </td>
                        <td><small x-text="formatTime(task.completed_at)"></small></td>
                        <td x-text="task.target_name || '—'"></td>
                        <td>
                            <span x-show="task.filter_name" class="badge"
                                  :style="'background-color:' + ($store.citrasense.filterColors[task.filter_name] || '#777') + ';color:white'"
                                  x-text="task.filter_name"></span>
                            <span x-show="!task.filter_name" class="text-muted">—</span>
                        </td>
                        <td>
                            {# Single-pill window status.  Using <template x-if> instead of
                               x-show so the four states (missed / late / on-time / unknown)
                               are structurally exclusive — only one node is ever in the DOM,
                               which sidesteps any reactive edge case where a stale truthy
                               x-show could leave a second pill visible.

                               Lateness signal is baked into the badge text:
                                 ⚑  Late +Xs   → this task added the delay (slip origin)
                                 ↙  Late +Xs   → mostly inherited from the prior task
                                    Late +Xs   → late but neither side dominates
                               Full breakdown ("Late by 48s — inherited 45s from <prev> —
                               self-added 3s") lives in the tooltip and the detail panel. #}
                            <template x-if="task.missed_window === 1">
                                <span class="badge bg-danger" :title="latenessTooltip(task)">Missed</span>
                            </template>
                            <template x-if="task.missed_window === 0 && task.window_start_delay_s != null && task.window_start_delay_s > 30">
                                <span class="badge bg-warning text-dark"
                                      :title="latenessTooltip(task)"
                                      x-text="(task.is_slip_origin ? '⚑ ' : task.inherited_delay_s > 2 ? '↙ ' : '') + 'Late +' + Math.round(task.window_start_delay_s) + 's'"></span>
                            </template>
                            <template x-if="task.missed_window === 0 && (task.window_start_delay_s == null || task.window_start_delay_s <= 30)">
                                <span class="badge bg-success">On time</span>
                            </template>
                            <template x-if="task.missed_window == null">
                                <span class="text-muted">—</span>
                            </template>
                        </td>
                        <td>
                            <span x-show="task.converged === 1" class="text-success">✓</span>
                            <span x-show="task.converged === 0" class="text-danger">✗</span>
                            <span x-show="task.converged == null" class="text-muted">—</span>
                            <small x-show="task.convergence_attempts" class="text-muted" x-text="'×' + task.convergence_attempts"></small>
                        </td>
                        <td>
                            <span x-show="task.plate_solved === 1" class="text-success">✓</span>
                            <span x-show="task.plate_solved === 0" class="text-danger">✗</span>
                            <span x-show="task.plate_solved == null" class="text-muted">—</span>
                        </td>
                        <td>
                            <span x-show="task.pointing_error_deg != null"
                                  :class="pointingClass(task.pointing_error_deg)"
                                  x-text="task.pointing_error_deg?.toFixed(4) + '°'"></span>
                            <span x-show="task.pointing_error_deg == null" class="text-muted">—</span>
                        </td>
                        <td>
                            <span x-show="task.target_matched === 1" class="text-success">✓</span>
                            <span x-show="task.target_matched === 0 && task.target_satellite_id" class="text-danger">✗</span>
                            <span x-show="task.target_satellite_id == null" class="text-muted">—</span>
                        </td>
                        <td>
                            <span x-text="task.incidental_matches || '—'" :class="task.incidental_matches > 0 ? 'text-info' : 'text-muted'"></span>
                        </td>
                        <td>
                            <span x-text="task.zero_point != null ? task.zero_point.toFixed(2) : '—'"
                                  :class="task.zero_point != null ? '' : 'text-muted'"></span>
                        </td>
                        <td>
                            <span x-show="task.upload_success === 1" class="text-success">✓</span>
                            <span x-show="task.upload_success === 0" class="text-danger">✗</span>
                            <span x-show="task.upload_success == null && task.should_upload === 0" class="text-muted">skip</span>
                            <span x-show="task.upload_success == null && task.should_upload !== 0" class="text-warning">…</span>
                        </td>
                        <td>
                            {{ wb.window_bar('task') }}
                        </td>
                        <td>
                            <i class="bi" :class="expanded === task.task_id ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                        </td>
                    </tr>
                    <tr x-show="expanded === task.task_id && detail" class="analysis-detail-row">
                        <td colspan="14" class="p-0 border-0">
                            <div class="analysis-detail-card mx-2 my-2">
                                <div class="row g-0">
                                    <div class="col-md-6 p-3 d-flex flex-column">
                                        <img :src="expanded === task.task_id && detail ? '/api/analysis/tasks/' + task.task_id + '/image?thumb=1' : null" class="img-fluid rounded"
                                             @error="$event.target.style.display='none'"
                                             @click.stop="lightboxSrc = '/api/analysis/tasks/' + task.task_id + '/image'"
                                             style="object-fit: contain; background: #111; cursor: zoom-in; width: 100%;">
                                        <div class="text-muted small mt-1" x-show="detail && !detail.has_annotated_image">No preview available</div>

                                        <!-- Actions + reprocess panel live under the image so the right column
                                             (which is dense with metadata) doesn't push them past the fold and
                                             the empty space beneath the image gets put to work. -->
                                        <template x-if="detail">
                                            <div class="mt-3">
                                                <div class="d-flex gap-2 align-items-center mb-3 flex-wrap">
                                                    <template x-if="detail.artifacts_available">
                                                        <a :href="'/api/analysis/tasks/' + detail.task_id + '/artifacts/report.html'"
                                                           target="_blank" class="btn btn-sm btn-outline-secondary">View full report</a>
                                                    </template>
                                                    <template x-if="detail.artifacts_available">
                                                        <a :href="'/api/analysis/tasks/' + detail.task_id + '/bundle'"
                                                           class="btn btn-sm btn-outline-secondary">
                                                            <i class="bi bi-download"></i> Download bundle
                                                        </a>
                                                    </template>
                                                    <template x-if="!detail.artifacts_available">
                                                        <span class="badge bg-secondary">Artifacts expired</span>
                                                    </template>
                                                </div>

                                                <!-- Reprocess panel -->
                                                <template x-if="detail.artifacts_available">
                                                    <div class="border-top pt-3">
                                                        <small class="text-muted d-block mb-2">Reprocess with different settings</small>
                                                        <div class="d-flex gap-2 flex-wrap align-items-end mb-2">
                                                            <div>
                                                                <label class="form-label mb-0" style="font-size: 0.75rem;">
                                                                    Detect Thresh
                                                                    <span class="text-muted" x-show="origThresh != null"
                                                                          x-text="'(was ' + origThresh + ')'"></span>
                                                                </label>
                                                                <input type="number" class="form-control form-control-sm" style="width: 100px;"
                                                                       x-model.number="reprocessThresh" min="1" max="20" step="0.5"
                                                                       :class="origThresh != null && reprocessThresh != origThresh && 'border-warning'">
                                                            </div>
                                                            <div>
                                                                <label class="form-label mb-0" style="font-size: 0.75rem;">
                                                                    Min Area
                                                                    <span class="text-muted" x-show="origMinarea != null"
                                                                          x-text="'(was ' + origMinarea + ')'"></span>
                                                                </label>
                                                                <input type="number" class="form-control form-control-sm" style="width: 90px;"
                                                                       x-model.number="reprocessMinarea" min="1" max="50" step="1"
                                                                       :class="origMinarea != null && reprocessMinarea != origMinarea && 'border-warning'">
                                                            </div>
                                                            <div>
                                                                <label class="form-label mb-0" style="font-size: 0.75rem;">
                                                                    Filter Kernel
                                                                    <span class="text-muted" x-show="origFilter != null"
                                                                          x-text="'(was ' + origFilter + ')'"></span>
                                                                </label>
                                                                <select class="form-select form-select-sm" style="width: 160px;"
                                                                        x-model="reprocessFilter"
                                                                        :class="origFilter != null && reprocessFilter !== origFilter && 'border-warning'">
                                                                    <option value="default">default</option>
                                                                    <option value="gauss_2.5_5x5">gauss_2.5_5x5</option>
                                                                    <option value="gauss_3.0_7x7">gauss_3.0_7x7</option>
                                                                    <option value="gauss_4.0_7x7">gauss_4.0_7x7</option>
                                                                    <option value="tophat_3.0_3x3">tophat_3.0_3x3</option>
                                                                </select>
                                                            </div>
                                                            <button class="btn btn-sm btn-primary" @click.stop="doReprocess(detail.task_id)"
                                                                    :disabled="reprocessing">
                                                                <span x-show="!reprocessing"><i class="bi bi-arrow-repeat"></i> Reprocess</span>
                                                                <span x-show="reprocessing"><span class="spinner-border spinner-border-sm"></span> Running...</span>
                                                            </button>
                                                        </div>
                                                        <template x-if="reprocessResult">
                                                            <div class="mt-2">
                                                                <!-- Settings diff -->
                                                                <small class="text-muted d-block mb-1">Settings changes</small>
                                                                <div class="d-flex gap-3 flex-wrap mb-2" style="font-size: 0.8rem;">
                                                                    <span :class="reprocessResult._usedThresh != origThresh ? 'text-warning' : 'text-muted'">
                                                                        Thresh: <span x-text="origThresh ?? '—'"></span>
                                                                        → <strong x-text="reprocessResult._usedThresh ?? '—'"></strong>
                                                                    </span>
                                                                    <span :class="reprocessResult._usedMinarea != origMinarea ? 'text-warning' : 'text-muted'">
                                                                        MinArea: <span x-text="origMinarea ?? '—'"></span>
                                                                        → <strong x-text="reprocessResult._usedMinarea ?? '—'"></strong>
                                                                    </span>
                                                                    <span :class="reprocessResult._usedFilter !== origFilter ? 'text-warning' : 'text-muted'">
                                                                        Filter: <span x-text="origFilter ?? '—'"></span>
                                                                        → <strong x-text="reprocessResult._usedFilter ?? '—'"></strong>
                                                                    </span>
                                                                </div>

                                                                <!-- Results diff -->
                                                                <small class="text-muted d-block mb-1">Results comparison</small>
                                                                <div class="d-flex gap-3 flex-wrap" style="font-size: 0.85rem;">
                                                                    <span>Sources:
                                                                        <span class="text-muted" x-text="detail.source_count ?? '—'"></span> →
                                                                        <strong x-text="reprocessResult.extracted_data?.['source_extractor.num_sources'] ?? '—'"></strong>
                                                                    </span>
                                                                    <span>ZP:
                                                                        <span class="text-muted" x-text="detail.zero_point?.toFixed(3) ?? '—'"></span> →
                                                                        <strong x-text="reprocessResult.extracted_data?.['photometry.zero_point']?.toFixed(3) ?? '—'"></strong>
                                                                    </span>
                                                                    <span>Sats:
                                                                        <span class="text-muted" x-text="detail.total_satellites_detected ?? '0'"></span> →
                                                                        <strong x-text="reprocessResult.extracted_data?.['satellite_matcher.num_satellites_detected'] ?? '0'"></strong>
                                                                    </span>
                                                                    <span>Time:
                                                                        <strong x-text="reprocessResult.total_time?.toFixed(2) + 's'"></strong>
                                                                    </span>
                                                                </div>
                                                                <div class="d-flex gap-1 flex-wrap mt-1" style="font-size: 0.8rem;">
                                                                    <template x-for="p in reprocessResult.processors" :key="p.name">
                                                                        <span class="badge" :class="p.ok ? 'bg-success' : 'bg-danger'"
                                                                              x-text="p.name + ' ' + p.time_s + 's'"></span>
                                                                    </template>
                                                                </div>
                                                                <div class="mt-2 d-flex gap-2 align-items-center flex-wrap">
                                                                    <a :href="'/api/analysis/tasks/' + detail.task_id + '/artifacts/reprocessed/report.html'"
                                                                       target="_blank" class="btn btn-sm btn-outline-secondary">
                                                                        View reprocessed report
                                                                    </a>
                                                                    <template x-if="reprocessResult.should_upload && (reprocessResult.extracted_data?.['satellite_matcher.num_satellites_detected'] || 0) > 0">
                                                                        <button class="btn btn-sm btn-success"
                                                                                @click.stop="doUploadReprocessed(detail.task_id)"
                                                                                :disabled="uploadingReprocessed">
                                                                            <span x-show="!uploadingReprocessed">
                                                                                <i class="bi bi-cloud-upload"></i> Upload Observation
                                                                            </span>
                                                                            <span x-show="uploadingReprocessed">
                                                                                <span class="spinner-border spinner-border-sm"></span> Uploading...
                                                                            </span>
                                                                        </button>
                                                                    </template>
                                                                    <span x-show="uploadReprocessedOk" class="text-success small">
                                                                        <i class="bi bi-check-circle"></i> Uploaded
                                                                    </span>
                                                                    <span x-show="uploadReprocessedError" class="text-danger small"
                                                                          x-text="uploadReprocessedError"></span>
                                                                </div>
                                                            </div>
                                                        </template>
                                                        <div x-show="reprocessError" class="text-danger mt-2 small" x-text="reprocessError"></div>
                                                    </div>
                                                </template>
                                            </div>
                                        </template>
                                    </div>
                                    <div class="col-md-6 p-3">
                                        <template x-if="detail">
                                            <div>
                                                <div class="d-flex align-items-baseline gap-2 mb-3">
                                                    <h6 class="mb-0" x-text="detail.target_name || '—'"></h6>
                                                    <code class="text-muted" style="font-size: 0.7rem;" x-text="detail.task_id"></code>
                                                </div>

                                                <template x-if="detail.window_start && detail.window_stop">
                                                    <div class="mb-3">
                                                        <small class="text-muted d-block mb-1">Task window</small>
                                                        <!-- Expanded version of the row mini-bar so the detail view
                                                             tells the same story (delay / slew / imaging / margin)
                                                             instead of a near-invisible imaging-only sliver.  Helpers
                                                             are shared with the table row, so the two stay in sync. -->
                                                        <div class="d-flex align-items-center gap-2">
                                                            <small x-text="formatTime(detail.window_start)"></small>
                                                            {{ wb.window_bar('detail',
                                                                              bar_class='flex-grow-1',
                                                                              bar_style='width:auto; height:14px; border-radius:4px;') }}
                                                            <small x-text="formatTime(detail.window_stop)"></small>
                                                        </div>
                                                        <div class="d-flex flex-wrap gap-3 mt-1" style="font-size: 0.75rem;">
                                                            <span><span class="analysis-legend-dot" style="background:#4a5568"></span> Delay <span class="text-muted" x-text="windowBarSecs(detail, 'delay').toFixed(1) + 's'"></span></span>
                                                            <span><span class="analysis-legend-dot bg-primary"></span> Slew <span class="text-muted" x-text="windowBarSecs(detail, 'slew').toFixed(1) + 's'"></span></span>
                                                            <span><span class="analysis-legend-dot" style="background:#00cec9"></span> Imaging <span class="text-muted" x-text="windowBarSecs(detail, 'imaging').toFixed(1) + 's'"></span></span>
                                                            <span><span class="analysis-legend-dot" style="background:#2d3748"></span> Margin <span class="text-muted" x-text="windowBarSecs(detail, 'margin').toFixed(1) + 's'"></span></span>
                                                            <span x-show="windowBarOverran(detail)" class="text-danger">⚠ overran</span>
                                                        </div>
                                                        <div class="d-flex gap-3 mt-1">
                                                            <small class="text-muted" x-show="detail.window_start_delay_s != null"
                                                                   x-text="'Start delay: ' + detail.window_start_delay_s?.toFixed(1) + 's'"></small>
                                                            <small class="text-muted" x-show="detail.window_time_remaining_s != null"
                                                                   x-text="'Remaining: ' + detail.window_time_remaining_s?.toFixed(1) + 's'"></small>
                                                        </div>

                                                        {# ── Lateness attribution (Tier 1 + 2) ────────────────────
                                                           When the start was late, surface the inherited-vs-self
                                                           split computed in _enrich_with_attribution and, if the
                                                           task is itself a slip origin, the slew estimate-vs-actual
                                                           overrun from _enrich_with_pointing_diag.  Bullets are
                                                           descriptive, not speculative — Tier 3 (named causes like
                                                           cable unwrap) is intentionally out of scope here. #}
                                                        <div x-show="detail.window_start_delay_s > 0 && (detail.inherited_delay_s > 0 || detail.self_delay_s > 0)"
                                                             class="mt-2 p-2 rounded"
                                                             style="background: rgba(255,255,255,0.03); border-left: 3px solid #6c757d;"
                                                             :style="detail.is_slip_origin ? 'background: rgba(255,193,7,0.08); border-left: 3px solid #ffc107;' : ''">
                                                            <div style="font-size: 0.85rem;">
                                                                <span x-text="'Late by ' + Math.round(detail.window_start_delay_s) + 's'"></span>
                                                                <template x-if="detail.inherited_delay_s >= 1">
                                                                    <span>
                                                                        · inherited <span x-text="Math.round(detail.inherited_delay_s)"></span>s
                                                                        <template x-if="detail.prev_task_id">
                                                                            <span>
                                                                                from
                                                                                <a href="#"
                                                                                   class="link-light text-decoration-underline"
                                                                                   @click.prevent="toggleDetail(detail.prev_task_id)"
                                                                                   x-text="detail.prev_target_name || detail.prev_task_id"></a>
                                                                            </span>
                                                                        </template>
                                                                    </span>
                                                                </template>
                                                                <template x-if="detail.self_delay_s >= 1">
                                                                    <span> · self-added <span x-text="Math.round(detail.self_delay_s)"></span>s</span>
                                                                </template>
                                                            </div>

                                                            <template x-if="detail.is_slip_origin">
                                                                <div class="mt-2" style="font-size: 0.8rem;">
                                                                    <div class="text-warning mb-1">
                                                                        <strong>Slip origin</strong> — this task added <span x-text="Math.round(detail.self_delay_s)"></span>s of delay.
                                                                    </div>
                                                                    <ul class="mb-0 ps-3" style="list-style-type: disc;">
                                                                        <li x-show="detail.slew_overrun_s != null && detail.slew_overrun_s > 2">
                                                                            Slew took
                                                                            <span x-text="detail.total_slew_time_s?.toFixed(1)"></span>s actual
                                                                            vs <span x-text="detail.slew_estimate_total_s?.toFixed(1)"></span>s estimated
                                                                            (<span x-text="(detail.slew_overrun_s >= 0 ? '+' : '') + detail.slew_overrun_s?.toFixed(1)"></span>s).
                                                                        </li>
                                                                        <li x-show="detail.convergence_attempts != null && detail.convergence_attempts > 1">
                                                                            <span x-text="detail.convergence_attempts"></span> convergence iterations.
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </template>
                                                        </div>
                                                    </div>
                                                </template>

                                                <!-- Sections below follow operation order:
                                                     slew/convergence loop → final pointing → exposure → plate solve
                                                     → photometry → satellite matching → upload. -->
                                                <template x-if="detail.convergence_attempts != null">
                                                    <div class="mb-3">
                                                        <small class="text-muted d-block mb-1">Convergence</small>
                                                        <div class="d-flex gap-3 flex-wrap">
                                                            <span x-text="(detail.converged ? '✓ Converged' : '✗ Failed') + ' in ' + detail.convergence_attempts + ' iteration(s)'"></span>
                                                            <span x-show="detail.total_slew_time_s" x-text="'Slew: ' + detail.total_slew_time_s?.toFixed(1) + 's'"></span>
                                                            <span x-show="detail.observed_slew_rate_deg_per_s" class="text-muted"
                                                                  x-text="detail.observed_slew_rate_deg_per_s?.toFixed(1) + '°/s'"></span>
                                                            <span x-show="detail.convergence_threshold_deg" class="text-muted"
                                                                  x-text="'threshold: ' + detail.convergence_threshold_deg?.toFixed(4) + '°'"></span>
                                                        </div>
                                                    </div>
                                                </template>

                                                <div class="mb-3">
                                                    <small class="text-muted d-block mb-1">Pointing</small>
                                                    <div class="d-flex flex-column gap-1" style="font-size: 0.85rem;">
                                                        <div class="d-flex gap-4">
                                                            <span><span class="text-muted">Target:</span> <span x-text="formatRA(detail.requested_ra)"></span> / <span x-text="formatDec(detail.requested_dec)"></span></span>
                                                        </div>
                                                        <div class="d-flex gap-4">
                                                            <span><span class="text-muted">Solved:</span> <span x-text="formatRA(detail.solved_ra)"></span> / <span x-text="formatDec(detail.solved_dec)"></span></span>
                                                        </div>
                                                        <div class="d-flex gap-3">
                                                            <span x-show="detail.pointing_error_deg != null"
                                                                  :class="pointingClass(detail.pointing_error_deg)"
                                                                  x-text="'Error: ' + detail.pointing_error_deg?.toFixed(4) + '°'"></span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <template x-if="detail.exposure_seconds != null">
                                                    <div class="mb-3">
                                                        <small class="text-muted d-block mb-1">Imaging</small>
                                                        <div class="d-flex gap-3 flex-wrap align-items-center">
                                                            <span x-text="detail.exposure_seconds.toFixed(3) + 's exposure'"></span>
                                                            <span x-show="detail.num_exposures" x-text="'× ' + detail.num_exposures + ' frames'"></span>
                                                            <span x-show="detail.adaptive_exposure_active" class="badge bg-info">Adaptive</span>
                                                        </div>
                                                    </div>
                                                </template>

                                                <div class="mb-3">
                                                    <small class="text-muted d-block mb-1">Plate solve</small>
                                                    <div class="d-flex gap-3 flex-wrap">
                                                        <span x-text="detail.plate_solved ? '✓ Solved' : '✗ Not solved'"></span>
                                                        <span x-show="detail.source_count" x-text="detail.source_count + ' sources'"></span>
                                                        <span x-show="detail.pixel_scale" x-text="detail.pixel_scale?.toFixed(2) + '″/px'"></span>
                                                        <span x-show="detail.field_width_deg" x-text="(detail.field_width_deg * 60).toFixed(1) + '′ × ' + (detail.field_height_deg * 60).toFixed(1) + '′'"></span>
                                                        <span x-show="detail.calibration_applied" class="badge bg-info">Calibrated</span>
                                                    </div>
                                                    <div class="d-flex gap-3 flex-wrap mt-1" x-show="hfr || solveQuality">
                                                        <span x-show="hfr" x-text="'HFR: ' + hfr + ' px'" class="text-info"></span>
                                                        <template x-if="solveQuality">
                                                            <span class="d-flex gap-2 flex-wrap">
                                                                <span x-text="'log-odds: ' + solveQuality.log_odds?.toFixed(1)"></span>
                                                                <span class="text-muted" x-text="solveQuality.n_match + ' match / ' + solveQuality.n_conflict + ' conflict'"></span>
                                                                <span class="text-muted" x-text="'rotation: ' + solveQuality.field_rotation_deg?.toFixed(3) + '°'"></span>
                                                                <span class="text-muted" x-text="'parity: ' + solveQuality.field_parity"></span>
                                                            </span>
                                                        </template>
                                                    </div>
                                                </div>

                                                <div class="mb-3">
                                                    <small class="text-muted d-block mb-1">Photometry</small>
                                                    <div class="d-flex gap-3">
                                                        <span x-show="detail.zero_point != null" x-text="'ZP ' + detail.zero_point?.toFixed(3)"></span>
                                                        <span x-show="detail.calibration_star_count" x-text="detail.calibration_star_count + ' cal stars'"></span>
                                                        <span x-show="detail.filter_name" class="badge"
                                                              :style="'background-color:' + ($store.citrasense.filterColors[detail.filter_name] || '#777') + ';color:white'"
                                                              x-text="detail.filter_name"></span>
                                                    </div>
                                                </div>

                                                <div class="mb-3">
                                                    <small class="text-muted d-block mb-1">Satellite matching</small>
                                                    <div class="d-flex gap-3 flex-wrap">
                                                        <span x-show="detail.target_satellite_name"
                                                              x-text="'Target: ' + detail.target_satellite_name + (detail.target_matched ? ' ✓' : ' ✗')"></span>
                                                        <span x-show="detail.target_satellite_mag != null" x-text="'mag ' + detail.target_satellite_mag?.toFixed(2)"></span>
                                                        <span x-text="(detail.total_satellites_detected || 0) + ' detected in frame'"></span>
                                                        <span x-show="detail.incidental_matches" class="text-info"
                                                              x-text="detail.incidental_matches + ' incidental'"></span>
                                                    </div>
                                                    <template x-if="predictionsInField.length > 0 || _satObs.length > 0">
                                                        <table class="table table-sm table-borderless mt-2 mb-0" style="font-size: 0.8rem;">
                                                            <thead>
                                                                <tr class="text-muted">
                                                                    <th class="py-0">Name</th>
                                                                    <th class="py-0">NORAD</th>
                                                                    <th class="py-0">Status</th>
                                                                    <th class="py-0">Mag</th>
                                                                    <th class="py-0">RA</th>
                                                                    <th class="py-0">Dec</th>
                                                                    <th class="py-0">Phase</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <template x-for="pred in predictionsInField" :key="pred.satellite_id">
                                                                    <tr>
                                                                        <td class="py-0" :class="detail.target_satellite_id && String(pred.satellite_id) === String(detail.target_satellite_id).replace('sat-','')
                                                                            ? (_satObs.some(s => String(s.norad_id) === String(pred.satellite_id)) ? 'text-success fw-bold' : 'text-warning fw-bold')
                                                                            : ''"
                                                                            x-text="pred.name"></td>
                                                                        <td class="py-0 text-muted" x-text="pred.satellite_id"></td>
                                                                        <td class="py-0">
                                                                            <span x-show="_satObs.some(s => String(s.norad_id) === String(pred.satellite_id))"
                                                                                  class="badge bg-success" style="font-size: 0.7rem;">Matched</span>
                                                                            <span x-show="!_satObs.some(s => String(s.norad_id) === String(pred.satellite_id))"
                                                                                  class="badge bg-secondary" style="font-size: 0.7rem;">Predicted</span>
                                                                        </td>
                                                                        <td class="py-0" x-text="(() => { const m = _satObs.find(s => String(s.norad_id) === String(pred.satellite_id)); return m?.mag?.toFixed(2) || '—'; })()"></td>
                                                                        <td class="py-0" x-text="(pred.predicted_ra_deg || pred.ra)?.toFixed(4) + '°'"></td>
                                                                        <td class="py-0" x-text="(pred.predicted_dec_deg || pred.dec)?.toFixed(4) + '°'"></td>
                                                                        <td class="py-0 text-muted" x-text="pred.phase_angle != null ? pred.phase_angle + '°' : '—'"></td>
                                                                    </tr>
                                                                </template>
                                                            </tbody>
                                                        </table>
                                                    </template>
                                                    <div x-show="predictionsInField.length === 0 && _satObs.length === 0" class="text-muted mt-1" style="font-size: 0.8rem;">
                                                        No satellites predicted in this frame
                                                    </div>
                                                </div>

                                                <div class="mb-3">
                                                    <small class="text-muted d-block mb-1">Upload</small>
                                                    <div class="d-flex gap-3">
                                                        <span x-text="formatUploadType(detail)"></span>
                                                        <span x-show="detail.upload_success === 1" class="text-success">✓ Uploaded</span>
                                                        <span x-show="detail.upload_success === 0" class="text-danger">✗ Failed</span>
                                                        <span x-show="detail.upload_success == null && detail.should_upload" class="text-warning">Pending</span>
                                                        <span x-show="detail.skip_reason" class="text-muted" x-text="detail.skip_reason"></span>
                                                    </div>
                                                </div>

                                                <div class="mb-1" x-show="totalElapsed(detail) > 0">
                                                    <strong x-text="'Total: ' + totalElapsed(detail).toFixed(1) + 's'"></strong>
                                                    <span class="text-muted" style="font-size: 0.8rem">(slew to processing complete)</span>
                                                </div>
                                                <div class="mb-3">
                                                    <small class="text-muted d-block mb-1">Task phases</small>
                                                    <div class="d-flex" style="height: 20px; border-radius: 4px; overflow: hidden;">
                                                        <div :style="'background:#0d6efd; width:' + phasePct(detail, 'slew') + '%'"
                                                             :title="'Slew: ' + (detail.total_slew_time_s || 0).toFixed(1) + 's'"></div>
                                                        <div :style="'background:#00cec9; width:' + phasePct(detail, 'imaging') + '%'"
                                                             :title="'Imaging: ' + imagingDuration(detail).toFixed(1) + 's'"></div>
                                                        <div :style="'background:#6c5ce7; width:' + phasePct(detail, 'queue') + '%'"
                                                             :title="'Queue wait: ' + (detail.processing_queue_wait_s || 0).toFixed(2) + 's'"></div>
                                                        <div :style="'background:#fdcb6e; width:' + phasePct(detail, 'processing') + '%'"
                                                             :title="'Processing: ' + (detail.total_processing_time_s || 0).toFixed(2) + 's'"></div>
                                                    </div>
                                                    <div class="d-flex flex-wrap gap-3 mt-1" style="font-size: 0.75rem;">
                                                        <span><span class="analysis-legend-dot bg-primary"></span> Slew <span class="text-muted" x-text="(detail.total_slew_time_s || 0).toFixed(1) + 's'"></span></span>
                                                        <span><span class="analysis-legend-dot" style="background:#00cec9"></span> Imaging <span class="text-muted" x-text="imagingDuration(detail).toFixed(1) + 's'"></span></span>
                                                        <span><span class="analysis-legend-dot" style="background:#6c5ce7"></span> Queue <span class="text-muted" x-text="(detail.processing_queue_wait_s || 0).toFixed(2) + 's'"></span></span>
                                                        <span><span class="analysis-legend-dot" style="background:#fdcb6e"></span> Processing <span class="text-muted" x-text="(detail.total_processing_time_s || 0).toFixed(2) + 's'"></span></span>
                                                    </div>
                                                </div>

                                                <div class="mb-3">
                                                    <small class="text-muted d-block mb-1">Processing breakdown</small>
                                                    <div class="d-flex" style="height: 20px; border-radius: 4px; overflow: hidden;">
                                                        <div :style="'background:#00b894; width:' + procPct(detail, 'calibration_time_s') + '%'"></div>
                                                        <div :style="'background:#fdcb6e; width:' + procPct(detail, 'plate_solve_time_s') + '%'"></div>
                                                        <div :style="'background:#e17055; width:' + procPct(detail, 'source_extractor_time_s') + '%'"></div>
                                                        <div :style="'background:#74b9ff; width:' + procPct(detail, 'photometry_time_s') + '%'"></div>
                                                        <div :style="'background:#a29bfe; width:' + procPct(detail, 'matcher_time_s') + '%'"></div>
                                                        <div :style="'background:#636e72; width:' + procPct(detail, 'annotated_image_time_s') + '%'"></div>
                                                    </div>
                                                    <div class="d-flex flex-wrap gap-3 mt-1" style="font-size: 0.75rem;">
                                                        <span><span class="analysis-legend-dot" style="background:#00b894"></span> Cal <span class="text-muted" x-text="(detail.calibration_time_s || 0).toFixed(3) + 's'"></span></span>
                                                        <span><span class="analysis-legend-dot" style="background:#fdcb6e"></span> Solve <span class="text-muted" x-text="(detail.plate_solve_time_s || 0).toFixed(2) + 's'"></span></span>
                                                        <span><span class="analysis-legend-dot" style="background:#e17055"></span> SExtract <span class="text-muted" x-text="(detail.source_extractor_time_s || 0).toFixed(3) + 's'"></span></span>
                                                        <span><span class="analysis-legend-dot" style="background:#74b9ff"></span> Phot <span class="text-muted" x-text="(detail.photometry_time_s || 0).toFixed(3) + 's'"></span></span>
                                                        <span><span class="analysis-legend-dot" style="background:#a29bfe"></span> Match <span class="text-muted" x-text="(detail.matcher_time_s || 0).toFixed(3) + 's'"></span></span>
                                                        <span><span class="analysis-legend-dot" style="background:#636e72"></span> Annotate <span class="text-muted" x-text="(detail.annotated_image_time_s || 0).toFixed(3) + 's'"></span></span>
                                                    </div>
                                                </div>

                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </template>
            <tbody x-show="tasks.length === 0 && !loading">
                <tr><td colspan="14" class="text-center text-muted py-4">
                    No completed tasks yet. Results appear here after the processing pipeline runs.
                </td></tr>
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="d-flex justify-content-between align-items-center mb-3" x-show="total > pageSize">
        <small class="text-muted" x-text="'Showing ' + (offset + 1) + '–' + Math.min(offset + pageSize, total) + ' of ' + total"></small>
        <div>
            <button class="btn btn-sm btn-outline-secondary" :disabled="offset === 0" @click="offset = Math.max(0, offset - pageSize); loadTasks()">Prev</button>
            <button class="btn btn-sm btn-outline-secondary" :disabled="offset + pageSize >= total" @click="offset += pageSize; loadTasks()">Next</button>
        </div>
    </div>

    <!-- Image lightbox -->
    <div class="analysis-lightbox" x-show="lightboxSrc" x-transition.opacity @click="lightboxSrc = null"
         @keydown.escape.window="lightboxSrc = null">
        <img :src="lightboxSrc" @click.stop>
    </div>
</div>