<template>
  <div class="view">
    <div class="view-label">Export Console</div>
    <div class="view-header">
      <h1>Matrixify handoff readiness</h1>
      <p class="subtitle">Preview blockers before generating CSVs. Nothing imports direct to Shopify; output files are for Lewis/Euan review and staging import.</p>
    </div>

    <div v-if="loading" class="loading">Loading...</div>
    <template v-else-if="status">
      <div class="summary">
        <div><strong>{{ status.productCount }}</strong><span>product records</span></div>
        <div><strong>{{ manifestCount('variantRows') }}</strong><span>product/variant rows</span></div>
        <div><strong>{{ manifestCount('metaobjectRows') }}</strong><span>metaobject rows</span></div>
        <div :class="status.ready ? 'ok' : 'bad'"><strong>{{ status.ready ? 'Ready' : status.blockers.length }}</strong><span>{{ status.ready ? 'no blockers' : 'blockers' }}</span></div>
      </div>

      <div class="handoff-card" :class="status.handoffManifest?.readyForLewis ? 'ready' : 'blocked'">
        <div>
          <h2>Lewis/Euan handoff pack</h2>
          <p>Latest dashboard manifest: <strong>{{ status.handoffManifest?.generatedAt ? formatDate(status.handoffManifest.generatedAt) : 'not generated yet' }}</strong></p>
          <p v-if="status.handoffManifest">Ready for handoff: <strong>{{ status.handoffManifest.readyForLewis ? 'YES' : 'NO' }}</strong></p>
        </div>
        <ul v-if="status.handoffManifest?.nextActions?.length">
          <li v-for="action in status.handoffManifest.nextActions" :key="action">{{ action }}</li>
        </ul>
      </div>

      <div class="blocker-grid">
        <div v-for="item in blockerCards" :key="item.type" class="blocker-card" :class="item.count ? 'bad' : 'ok'">
          <strong>{{ item.count }}</strong>
          <span>{{ item.label }}</span>
        </div>
      </div>

      <div class="readiness-grid">
        <section class="readiness-card" :class="status.readinessAudit?.ready ? 'ready' : 'blocked'">
          <h2>Full readiness audit</h2>
          <p v-if="status.readinessAudit?.summary">
            <strong>{{ status.readinessAudit.summary.passing }}/{{ status.readinessAudit.summary.totalGates }}</strong>
            gates passing. Export blockers: <strong>{{ status.readinessAudit.summary.exportBlockers }}</strong>.
          </p>
          <ul>
            <li v-for="gate in blockedGates" :key="gate.name">{{ gate.name }} - {{ gate.blocker }}</li>
            <li v-if="!blockedGates.length">All audit gates are passing.</li>
          </ul>
        </section>
        <section class="readiness-card" :class="status.intelligenceWorkqueue?.ready ? 'ready' : 'blocked'">
          <h2>Intelligence generation queue</h2>
          <p v-if="status.intelligenceWorkqueue">
            <strong>{{ status.intelligenceWorkqueue.missingTasks }}</strong>
            missing tasks across
            <strong>{{ status.intelligenceWorkqueue.affectedSkus }}</strong>
            SKUs.
          </p>
          <table v-if="status.intelligenceWorkqueue?.gateSummary?.length" class="mini-table">
            <thead><tr><th>View</th><th>Present</th><th>Missing</th></tr></thead>
            <tbody>
              <tr v-for="row in status.intelligenceWorkqueue.gateSummary" :key="row.View">
                <td>{{ row.View }}</td>
                <td>{{ row.Present }}/{{ row.Total }}</td>
                <td>{{ row.Missing }}</td>
              </tr>
            </tbody>
          </table>
          <p class="table-note">Full task queue: intelligence_generation_workqueue.csv</p>
        </section>
      </div>

      <div class="action-plan" :class="status.handoffActionPlan?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Handoff action plan</h2>
          <p v-if="status.handoffActionPlan?.counts">
            <strong>{{ status.handoffActionPlan.counts.actions }}</strong>
            owner-facing actions:
            <strong>{{ status.handoffActionPlan.counts.p0 }}</strong> P0,
            <strong>{{ status.handoffActionPlan.counts.p1 }}</strong> P1,
            <strong>{{ status.handoffActionPlan.counts.p2 }}</strong> P2.
          </p>
          <p class="table-note">Full plan: handoff_action_plan.md / .csv / .json</p>
        </div>
        <ol>
          <li v-for="action in actionPlanItems" :key="`${action.Priority}-${action.Lane}`">
            <strong>{{ action.Priority }} · {{ action.Lane }}</strong>
            <span>{{ action.Action }}</span>
            <em>{{ action.Owner }}</em>
          </li>
          <li v-if="!actionPlanItems.length">No action plan generated yet. Run <code>bun run handoff:actions</code>.</li>
        </ol>
      </div>

      <div class="staging-checklist" :class="status.handoffPacketRefresh?.refreshReady ? 'ready' : 'blocked'">
        <div>
          <h2>Packet refresh control run</h2>
          <p v-if="status.handoffPacketRefresh?.counts">
            Packet refresh: <strong>{{ status.handoffPacketRefresh.refreshReady ? 'YES' : 'NO' }}</strong>.
            Final handoff: <strong>{{ status.handoffPacketRefresh.handoffReady ? 'YES' : 'NO' }}</strong>.
          </p>
          <p v-if="status.handoffPacketRefresh?.counts" class="table-note">
            Steps passing: {{ status.handoffPacketRefresh.counts.passing }}/{{ status.handoffPacketRefresh.counts.steps }},
            expected blockers: {{ status.handoffPacketRefresh.counts.blockedExpected }},
            refresh failures: {{ status.handoffPacketRefresh.counts.refreshFailed }}.
          </p>
        </div>
        <table v-if="packetRefreshRows.length" class="mini-table">
          <thead><tr><th>Step</th><th>Status</th><th>Required</th><th>Command</th></tr></thead>
          <tbody>
            <tr v-for="row in packetRefreshRows" :key="row.Name">
              <td>{{ row.Name }}</td>
              <td>{{ row.Status }}</td>
              <td>{{ row.RequiredToRefresh }}</td>
              <td>{{ row.Command }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="staging-checklist" :class="status.handoffArtifactFreshness?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Artifact freshness</h2>
          <p>{{ status.handoffArtifactFreshness?.note || 'Run bun run handoff:freshness.' }}</p>
          <p v-if="status.handoffArtifactFreshness?.counts" class="table-note">
            Fresh: {{ status.handoffArtifactFreshness.counts.fresh }},
            static allowed: {{ status.handoffArtifactFreshness.counts.staticAllowed }},
            stale: {{ status.handoffArtifactFreshness.counts.stale }},
            missing: {{ status.handoffArtifactFreshness.counts.missing }}.
          </p>
        </div>
        <table v-if="artifactFreshnessRows.length" class="mini-table">
          <thead><tr><th>File</th><th>Status</th><th>Reason</th></tr></thead>
          <tbody>
            <tr v-for="row in artifactFreshnessRows" :key="`${row.Group}-${row.File}`">
              <td>{{ row.File }}</td>
              <td>{{ row.Status }}</td>
              <td>{{ row.Reason }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="staging-checklist" :class="status.executiveDecisionBrief?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Executive decision brief</h2>
          <p>{{ status.executiveDecisionBrief?.statusLine || 'Run bun run handoff:decision-brief.' }}</p>
          <p v-if="status.executiveDecisionBrief?.counts" class="table-note">
            Decisions: {{ status.executiveDecisionBrief.counts.decisions }},
            export blockers: {{ status.executiveDecisionBrief.counts.exportBlockers }},
            delivery: {{ status.executiveDecisionBrief.counts.deliveryPresent }}/{{ status.executiveDecisionBrief.counts.deliveryFiles }}.
          </p>
        </div>
        <table v-if="executiveDecisionRows.length" class="mini-table">
          <thead><tr><th>Priority</th><th>Owner</th><th>Decision</th><th>Current state</th></tr></thead>
          <tbody>
            <tr v-for="decision in executiveDecisionRows" :key="decision.Priority">
              <td>{{ decision.Priority }}</td>
              <td>{{ decision.Owner }}</td>
              <td>{{ decision.Decision }}</td>
              <td>{{ decision.CurrentState }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="staging-checklist" :class="status.blockerBurndown?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Blocker burn-down</h2>
          <p>{{ status.blockerBurndown?.headline || 'Run bun run handoff:burndown.' }}</p>
          <p v-if="status.blockerBurndown?.counts" class="table-note">
            Remaining: {{ status.blockerBurndown.counts.totalRemaining }},
            done: {{ status.blockerBurndown.counts.totalDone }}/{{ status.blockerBurndown.counts.totalStart }},
            verifier: {{ status.blockerBurndown.counts.verifierPassing }}/{{ status.blockerBurndown.counts.verifierChecks }}.
          </p>
        </div>
        <table v-if="blockerBurndownRows.length" class="mini-table">
          <thead><tr><th>Lane</th><th>Owner</th><th>Done</th><th>Remaining</th></tr></thead>
          <tbody>
            <tr v-for="lane in blockerBurndownRows" :key="lane.Lane">
              <td>{{ lane.Lane }}</td>
              <td>{{ lane.Owner }}</td>
              <td>{{ lane.DoneCount }}</td>
              <td>{{ lane.RemainingCount }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="staging-checklist" :class="status.dailyStatus?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Daily handoff status</h2>
          <p>{{ status.dailyStatus?.headline || 'Run bun run handoff:daily-status.' }}</p>
          <p v-if="status.dailyStatus?.date" class="table-note">
            Snapshot date: {{ status.dailyStatus.date }}. This is a progress snapshot, not final readiness proof.
          </p>
        </div>
        <table v-if="dailyStatusRows.length" class="mini-table">
          <thead><tr><th>Area</th><th>Status</th><th>Evidence</th><th>Next action</th></tr></thead>
          <tbody>
            <tr v-for="row in dailyStatusRows" :key="row.Area">
              <td>{{ row.Area }}</td>
              <td>{{ row.Status }}</td>
              <td>{{ row.Evidence }}</td>
              <td>{{ row.NextAction }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="staging-checklist" :class="status.handoffEvidenceDossier?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Completion evidence dossier</h2>
          <p>{{ status.handoffEvidenceDossier?.headline || 'Run bun run handoff:evidence-dossier.' }}</p>
          <p v-if="status.handoffEvidenceDossier?.counts" class="table-note">
            Proven: {{ status.handoffEvidenceDossier.counts.proven }}/{{ status.handoffEvidenceDossier.counts.requirements }},
            export blockers: {{ status.handoffEvidenceDossier.counts.exportBlockers }},
            burndown remaining: {{ status.handoffEvidenceDossier.counts.burndownRemaining }}.
          </p>
        </div>
        <table v-if="handoffEvidenceRows.length" class="mini-table">
          <thead><tr><th>Requirement</th><th>Status</th><th>Proof</th><th>Remaining</th></tr></thead>
          <tbody>
            <tr v-for="row in handoffEvidenceRows" :key="row.Requirement">
              <td>{{ row.Requirement }}</td>
              <td>{{ row.Status }}</td>
              <td>{{ row.Proof }}</td>
              <td>{{ row.RemainingWork }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="staging-checklist" :class="status.reviewerDecisionWorkbook?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Reviewer decision workbook</h2>
          <p>{{ status.reviewerDecisionWorkbook?.currentStatus || 'Run bun run handoff:reviewer-workbook.' }}</p>
          <p v-if="status.reviewerDecisionWorkbook?.counts" class="table-note">
            Open lanes: {{ status.reviewerDecisionWorkbook.counts.openLanes }}/{{ status.reviewerDecisionWorkbook.counts.lanes }},
            tracked remaining: {{ status.reviewerDecisionWorkbook.counts.totalRemaining }}.
          </p>
        </div>
        <table v-if="reviewerWorkbookRows.length" class="mini-table">
          <thead><tr><th>Owner</th><th>Lane</th><th>Remaining</th><th>Editable file</th></tr></thead>
          <tbody>
            <tr v-for="row in reviewerWorkbookRows" :key="row.Lane">
              <td>{{ row.Owner }}</td>
              <td>{{ row.Lane }}</td>
              <td>{{ row.RemainingCount }}</td>
              <td>{{ row.EditableFile }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="staging-checklist" :class="status.reviewerInputPreflight?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Reviewer input preflight</h2>
          <p>{{ status.reviewerInputPreflight?.purpose || 'Run bun run handoff:reviewer-preflight.' }}</p>
          <p v-if="status.reviewerInputPreflight?.counts" class="table-note">
            Checks passing: {{ status.reviewerInputPreflight.counts.passing }}/{{ status.reviewerInputPreflight.counts.checks }},
            blocked: {{ status.reviewerInputPreflight.counts.blocked }},
            missing: {{ status.reviewerInputPreflight.counts.missing }}.
          </p>
        </div>
        <table v-if="reviewerInputPreflightRows.length" class="mini-table">
          <thead><tr><th>Area</th><th>Status</th><th>Evidence</th><th>Next action</th></tr></thead>
          <tbody>
            <tr v-for="row in reviewerInputPreflightRows" :key="row.Area">
              <td>{{ row.Area }}</td>
              <td>{{ row.Status }}</td>
              <td>{{ row.Evidence }}</td>
              <td>{{ row.NextAction }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="staging-checklist" :class="status.ownerHandoffMessages?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Owner handoff messages</h2>
          <p>{{ status.ownerHandoffMessages?.purpose || 'Run bun run handoff:owner-messages.' }}</p>
          <p v-if="status.ownerHandoffMessages?.counts" class="table-note">
            Messages: {{ status.ownerHandoffMessages.counts.messages }},
            tracked remaining: {{ status.ownerHandoffMessages.counts.totalRemaining }},
            verifier: {{ status.ownerHandoffMessages.counts.verifierPassing }}/{{ status.ownerHandoffMessages.counts.verifierChecks }}.
          </p>
        </div>
        <table v-if="ownerHandoffMessageRows.length" class="mini-table">
          <thead><tr><th>Audience</th><th>Lane</th><th>Remaining</th><th>Subject</th></tr></thead>
          <tbody>
            <tr v-for="row in ownerHandoffMessageRows" :key="row.Lane">
              <td>{{ row.Audience }}</td>
              <td>{{ row.Lane }}</td>
              <td>{{ row.RemainingCount }}</td>
              <td>{{ row.Subject }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="staging-checklist" :class="status.ownerResponseIntake?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Owner response intake</h2>
          <p>{{ status.ownerResponseIntake?.purpose || 'Run bun run handoff:owner-responses.' }}</p>
          <p v-if="status.ownerResponseIntake?.counts" class="table-note">
            Ready for gate rerun: {{ status.ownerResponseIntake.counts.readyForGateRerun }}/{{ status.ownerResponseIntake.counts.lanes }},
            awaiting response/evidence: {{ status.ownerResponseIntake.counts.awaitingResponseOrEvidence }},
            not sent: {{ status.ownerResponseIntake.counts.notSent }}.
          </p>
        </div>
        <table v-if="ownerResponseRows.length" class="mini-table">
          <thead><tr><th>Lane</th><th>Status</th><th>Sent</th><th>Evidence</th><th>Next action</th></tr></thead>
          <tbody>
            <tr v-for="row in ownerResponseRows" :key="row.Lane">
              <td>{{ row.Lane }}</td>
              <td>{{ row.Status }}</td>
              <td>{{ row.MessageSent }}</td>
              <td>{{ row.EvidenceUpdated }}</td>
              <td>{{ row.NextAction }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="staging-checklist" :class="status.handoffGateDependencyMap?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Handoff gate dependency map</h2>
          <p>{{ status.handoffGateDependencyMap?.purpose || 'Run bun run handoff:gate-map.' }}</p>
          <p v-if="status.handoffGateDependencyMap?.counts" class="table-note">
            Gates passing: {{ status.handoffGateDependencyMap.counts.passing }}/{{ status.handoffGateDependencyMap.counts.gates }},
            blocked: {{ status.handoffGateDependencyMap.counts.blocked }},
            owners: {{ status.handoffGateDependencyMap.counts.ownersWithBlockedGates }}.
          </p>
        </div>
        <table v-if="handoffGateDependencyRows.length" class="mini-table">
          <thead><tr><th>Gate</th><th>Owner</th><th>Evidence</th><th>Unblock instruction</th></tr></thead>
          <tbody>
            <tr v-for="row in handoffGateDependencyRows" :key="row.Gate">
              <td>{{ row.Gate }}</td>
              <td>{{ row.Owner }}</td>
              <td>{{ row.BlockerEvidence }}</td>
              <td>{{ row.UnblockInstruction }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="staging-checklist" :class="status.postOwnerResponseRerunPlan?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Post-owner response rerun plan</h2>
          <p>{{ status.postOwnerResponseRerunPlan?.purpose || 'Run bun run handoff:post-response-rerun.' }}</p>
          <p v-if="status.postOwnerResponseRerunPlan?.counts" class="table-note">
            Ready lanes: {{ status.postOwnerResponseRerunPlan.counts.readyForRerun }}/{{ status.postOwnerResponseRerunPlan.counts.lanes }},
            held: {{ status.postOwnerResponseRerunPlan.counts.held }}.
          </p>
        </div>
        <table v-if="postOwnerResponseRerunRows.length" class="mini-table">
          <thead><tr><th>Lane</th><th>Ready</th><th>Status</th><th>Next action</th></tr></thead>
          <tbody>
            <tr v-for="row in postOwnerResponseRerunRows" :key="row.Lane">
              <td>{{ row.Lane }}</td>
              <td>{{ row.ReadyForRerun }}</td>
              <td>{{ row.OwnerResponseStatus }}</td>
              <td>{{ row.NextAction }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="staging-checklist" :class="status.ownerEvidenceAcceptanceGuide?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Owner evidence acceptance guide</h2>
          <p>{{ status.ownerEvidenceAcceptanceGuide?.purpose || 'Run bun run handoff:evidence-guide.' }}</p>
          <p v-if="status.ownerEvidenceAcceptanceGuide?.counts" class="table-note">
            Lanes: {{ status.ownerEvidenceAcceptanceGuide.counts.lanes }},
            currently blocked: {{ status.ownerEvidenceAcceptanceGuide.counts.currentlyBlocked }}.
          </p>
        </div>
        <table v-if="ownerEvidenceGuideRows.length" class="mini-table">
          <thead><tr><th>Lane</th><th>File</th><th>Current evidence</th><th>Validator</th></tr></thead>
          <tbody>
            <tr v-for="row in ownerEvidenceGuideRows" :key="row.Lane">
              <td>{{ row.Lane }}</td>
              <td>{{ row.EditableFile }}</td>
              <td>{{ row.CurrentEvidence }}</td>
              <td>{{ row.ValidatorCommand }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="readiness-grid">
        <section class="readiness-card" :class="status.unmatchedClaimsReview?.ready ? 'ready' : 'blocked'">
          <h2>Unmatched clinical-claim review</h2>
          <p v-if="status.unmatchedClaimsReview?.counts">
            <strong>{{ status.unmatchedClaimsReview.counts.unmatchedProducts }}</strong>
            products still have blank <code>clinically_shown_to</code> refs from
            <strong>{{ status.unmatchedClaimsReview.counts.totalProducts }}</strong>
            catalogue records.
          </p>
          <p class="table-note">Packet: unmatched_claims_review_packet.md / .csv / .json. It is a compliance queue, not a claim generator.</p>
          <table v-if="unmatchedClaimsRows.length" class="mini-table">
            <thead><tr><th>SKU</th><th>Product</th><th>Gate</th><th>Safe default</th></tr></thead>
            <tbody>
              <tr v-for="row in unmatchedClaimsRows" :key="row.SKU">
                <td class="sku">{{ row.SKU }}</td>
                <td>{{ row.ProductName }}</td>
                <td>{{ row.EvidenceGate }}</td>
                <td>{{ row.SafeDefault }}</td>
              </tr>
            </tbody>
          </table>
        </section>

        <section class="readiness-card" :class="status.clinicalBlankDecisionTemplate?.ready ? 'ready' : 'blocked'">
          <h2>Clinical blank-decision gate</h2>
          <p v-if="status.clinicalBlankDecisionTemplate?.counts">
            <strong>{{ status.clinicalBlankDecisionTemplate.counts.validBlankApprovals }}</strong>
            valid approved blank decisions,
            <strong>{{ status.clinicalBlankDecisionTemplate.counts.pending }}</strong>
            pending.
          </p>
          <p class="table-note">{{ status.clinicalBlankDecisionTemplate?.guardrail || 'Run bun run compliance:blank-decisions.' }}</p>
          <table v-if="clinicalBlankDecisionRows.length" class="mini-table">
            <thead><tr><th>SKU</th><th>Decision</th><th>Valid</th><th>Approved by</th></tr></thead>
            <tbody>
              <tr v-for="row in clinicalBlankDecisionRows" :key="row.SKU">
                <td class="sku">{{ row.SKU }}</td>
                <td>{{ row.Decision }}</td>
                <td>{{ row.ValidBlankApproval }}</td>
                <td>{{ row.ApprovedBy || '—' }}</td>
              </tr>
            </tbody>
          </table>
        </section>

        <section class="readiness-card" :class="status.productApprovalReview?.ready ? 'ready' : 'blocked'">
          <h2>Product approval review</h2>
          <p v-if="status.productApprovalReview?.counts">
            <strong>{{ status.productApprovalReview.counts.blockedProducts }}</strong>
            blocked products;
            <strong>{{ status.productApprovalReview.counts.readyForExportApproval }}</strong>
            ready for export approval.
          </p>
          <p class="table-note">Packet: product_approval_review_packet.md / .csv / .json. Human approval is still required.</p>
          <table v-if="productApprovalRows.length" class="mini-table">
            <thead><tr><th>SKU</th><th>Content</th><th>Compliance</th><th>Images</th><th>Export</th></tr></thead>
            <tbody>
              <tr v-for="row in productApprovalRows" :key="row.SKU">
                <td class="sku">{{ row.SKU }}</td>
                <td>{{ row.ContentApproval }}</td>
                <td>{{ row.ComplianceApproval }}</td>
                <td>{{ row.ImageApproval }}</td>
                <td>{{ row.ExportApproval }}</td>
              </tr>
            </tbody>
          </table>
        </section>

        <section class="readiness-card" :class="status.productApprovalDecisionGate?.ready ? 'ready' : 'blocked'">
          <h2>Product approval decision gate</h2>
          <p v-if="status.productApprovalDecisionGate?.counts">
            <strong>{{ status.productApprovalDecisionGate.counts.validApprovals }}</strong>
            valid approvals,
            <strong>{{ status.productApprovalDecisionGate.counts.pending }}</strong>
            pending,
            <strong>{{ status.productApprovalDecisionGate.counts.applied }}</strong>
            applied this run.
          </p>
          <p class="table-note">{{ status.productApprovalDecisionGate?.guardrail || 'Run bun run approval:decisions.' }}</p>
          <table v-if="productApprovalDecisionRows.length" class="mini-table">
            <thead><tr><th>SKU</th><th>Decision</th><th>Valid</th><th>Applied</th></tr></thead>
            <tbody>
              <tr v-for="row in productApprovalDecisionRows" :key="row.SKU">
                <td class="sku">{{ row.SKU }}</td>
                <td>{{ row.Decision }}</td>
                <td>{{ row.ValidApproval }}</td>
                <td>{{ row.Applied }}</td>
              </tr>
            </tbody>
          </table>
        </section>
      </div>

      <div class="staging-checklist" :class="status.stagingChecklist?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Staging import checklist</h2>
          <p v-if="status.stagingChecklist?.counts">
            <strong>{{ status.stagingChecklist.counts.checks }}</strong>
            checks,
            <strong>{{ status.stagingChecklist.counts.blocking }}</strong>
            currently blocking.
          </p>
          <p class="table-note">Full checklist: staging_import_checklist.md / .csv / .json</p>
        </div>
        <table v-if="checklistItems.length" class="mini-table">
          <thead><tr><th>Stage</th><th>Check</th><th>Status</th><th>Blocking</th></tr></thead>
          <tbody>
            <tr v-for="check in checklistItems" :key="`${check.Stage}-${check.Check}`">
              <td>{{ check.Stage }}</td>
              <td>{{ check.Check }}</td>
              <td>{{ check.CurrentStatus }}</td>
              <td>{{ check.Blocking }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No checklist generated yet. Run <code>bun run staging:checklist</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.stagingHandoffPacket?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Lewis/Euan staging handoff packet</h2>
          <p v-if="status.stagingHandoffPacket?.counts">
            <strong>{{ status.stagingHandoffPacket.counts.presentImportFiles }}/{{ status.stagingHandoffPacket.counts.importFiles }}</strong>
            import/reference files present,
            <strong>{{ status.stagingHandoffPacket.counts.pdpSpotCheckQueue }}</strong>
            PDP checks queued.
          </p>
          <p class="table-note">Packet: staging_handoff_packet.md / .json, staging_handoff_import_files.csv, staging_pdp_spot_check_queue.csv. Queue is not completed staging evidence.</p>
        </div>
        <table v-if="stagingHandoffActions.length" class="mini-table">
          <thead><tr><th>#</th><th>Owner</th><th>Action</th><th>Current evidence</th></tr></thead>
          <tbody>
            <tr v-for="action in stagingHandoffActions" :key="action.Sequence">
              <td>{{ action.Sequence }}</td>
              <td>{{ action.Owner }}</td>
              <td>{{ action.Action }}</td>
              <td>{{ action.CurrentEvidence }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="staging-checklist" :class="status.stagingEvidence?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Staging evidence validation</h2>
          <p v-if="status.stagingEvidence?.counts">
            <strong>{{ status.stagingEvidence.counts.importLogs }}</strong>
            import logs,
            <strong>{{ status.stagingEvidence.counts.pdpChecks }}</strong>
            PDP checks,
            <strong>{{ status.stagingEvidence.counts.blocking }}</strong>
            blocking evidence gates.
          </p>
          <p class="table-note">Templates: data/staging/_templates/. Validation: staging_evidence_validation.md / .csv / .json</p>
        </div>
        <table v-if="stagingEvidenceGates.length" class="mini-table">
          <thead><tr><th>Gate</th><th>Status</th><th>Blocking</th></tr></thead>
          <tbody>
            <tr v-for="gate in stagingEvidenceGates" :key="gate.Gate">
              <td>{{ gate.Gate }}</td>
              <td>{{ gate.CurrentStatus }}</td>
              <td>{{ gate.Blocking }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No staging evidence validation generated yet. Run <code>bun run staging:evidence</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.stagingEvidenceIntake?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Staging evidence intake</h2>
          <p>{{ status.stagingEvidenceIntake?.purpose || 'Run bun run staging:intake.' }}</p>
          <p v-if="status.stagingEvidenceIntake?.counts" class="table-note">
            Intake items: {{ status.stagingEvidenceIntake.counts.intakeItems }},
            fake evidence created: {{ status.stagingEvidenceIntake.counts.fakeEvidenceCreated }}.
          </p>
        </div>
        <table v-if="stagingEvidenceIntakeRows.length" class="mini-table">
          <thead><tr><th>Item</th><th>Status</th><th>Path</th><th>Next action</th></tr></thead>
          <tbody>
            <tr v-for="row in stagingEvidenceIntakeRows" :key="row.Item">
              <td>{{ row.Item }}</td>
              <td>{{ row.Status }}</td>
              <td>{{ row.Path }}</td>
              <td>{{ row.NextAction }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="staging-checklist" :class="status.handoffVerification?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Master handoff verification</h2>
          <p v-if="status.handoffVerification?.counts">
            <strong>{{ status.handoffVerification.counts.passing }}/{{ status.handoffVerification.counts.checks }}</strong>
            checks passing,
            <strong>{{ status.handoffVerification.counts.blocked }}</strong>
            blocked.
          </p>
          <p class="table-note">Run <code>bun run verify:handoff</code>. Output: handoff_verification_run.md / .csv / .json</p>
        </div>
        <table v-if="handoffVerificationChecks.length" class="mini-table">
          <thead><tr><th>Check</th><th>Status</th><th>Exit</th></tr></thead>
          <tbody>
            <tr v-for="check in handoffVerificationChecks" :key="check.Name">
              <td>{{ check.Name }}</td>
              <td>{{ check.Status }}</td>
              <td>{{ check.ExitCode }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No master verification run generated yet.</p>
      </div>

      <div class="staging-checklist" :class="status.deliveryIndex?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Delivery packet index</h2>
          <p v-if="status.deliveryIndex?.counts">
            <strong>{{ status.deliveryIndex.counts.present }}/{{ status.deliveryIndex.counts.files }}</strong>
            packet files present.
          </p>
          <p class="table-note">Packet map: delivery_index.md / .csv / .json. Presence is not final readiness.</p>
        </div>
        <table v-if="deliveryGroups.length" class="mini-table">
          <thead><tr><th>Group</th><th>Present</th></tr></thead>
          <tbody>
            <tr v-for="group in deliveryGroups" :key="group.group">
              <td>{{ group.group }}</td>
              <td>{{ group.present }}/{{ group.files }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No delivery index generated yet. Run <code>bun run delivery:index</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.sourceAcquisitionPlan ? 'ready' : 'blocked'">
        <div>
          <h2>Staged source acquisition</h2>
          <p v-if="status.sourceAcquisitionPlan?.counts">
            DataForSEO pilot targets:
            <strong>{{ status.sourceAcquisitionPlan.counts.stageOneTargets }}</strong>,
            Apify gap-fill targets:
            <strong>{{ status.sourceAcquisitionPlan.counts.apifyTargets }}</strong>.
          </p>
          <p class="table-note">{{ status.sourceAcquisitionPlan?.recommendation || 'Run bun run source:acquisition.' }}</p>
        </div>
        <table v-if="sourceAcquisitionStages.length" class="mini-table">
          <thead><tr><th>Stage</th><th>Provider</th><th>Hard cap</th></tr></thead>
          <tbody>
            <tr v-for="stage in sourceAcquisitionStages" :key="stage.Stage">
              <td>{{ stage.Stage }}</td>
              <td>{{ stage.Provider }}</td>
              <td>{{ stage.HardCap }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No source acquisition plan generated yet.</p>
      </div>

      <div class="staging-checklist" :class="status.dataforseoPilot ? 'ready' : 'blocked'">
        <div>
          <h2>DataForSEO Stage 1 pilot</h2>
          <p v-if="status.dataforseoPilot?.counts">
            <strong>{{ status.dataforseoPilot.counts.readyTasks }}</strong>
            ready task payload rows,
            <strong>{{ status.dataforseoPilot.counts.missingAsins }}</strong>
            ASINs still needed from
            <strong>{{ status.dataforseoPilot.counts.stageOneTargets }}</strong>
            capped targets.
          </p>
          <p class="table-note">
            Depth cap: {{ status.dataforseoPilot?.guardrails?.recommendedDepth || 10 }} reviews per ASIN.
            Fill {{ status.dataforseoPilot?.files?.asinMap || 'data/sources/dataforseo/asin-map.csv' }} before any paid call.
          </p>
        </div>
        <table v-if="dataforseoTargets.length" class="mini-table">
          <thead><tr><th>SKU</th><th>Priority</th><th>Status</th><th>Depth</th></tr></thead>
          <tbody>
            <tr v-for="target in dataforseoTargets" :key="target.SKU">
              <td class="sku">{{ target.SKU }}</td>
              <td>{{ target.Priority }}</td>
              <td>{{ target.Status }}</td>
              <td>{{ target.Depth }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No DataForSEO pilot generated yet. Run <code>bun run dataforseo:pilot</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.dataforseoLiveConnection?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>DataForSEO live connection</h2>
          <p v-if="status.dataforseoLiveConnection?.counts">
            <strong>{{ status.dataforseoLiveConnection.counts.exactAsinsConfirmed }}/{{ status.dataforseoLiveConnection.counts.targets }}</strong>
            exact ASINs confirmed from live product results,
            <strong>{{ status.dataforseoLiveConnection.counts.taskPayloadRows }}</strong>
            review payload rows ready.
          </p>
          <p class="table-note">
            Account: {{ status.dataforseoLiveConnection?.accountConnection?.status_code || 'n/a' }}
            {{ status.dataforseoLiveConnection?.accountConnection?.status || '' }}.
            {{ status.dataforseoLiveConnection?.blocker || 'Run bun run dataforseo:live-asin-evidence.' }}
          </p>
          <p class="table-note" v-if="status.dataforseoProductsLiveRun">
            Fresh products search:
            {{ status.dataforseoProductsLiveRun.ready ? 'ready' : status.dataforseoProductsLiveRun.blocked ? 'blocked by explicit spend flag' : 'not ready' }}.
            Tasks: {{ status.dataforseoProductsLiveRun.counts?.tasksPosted || 0 }},
            results: {{ status.dataforseoProductsLiveRun.counts?.resultItems || 0 }}.
          </p>
        </div>
        <table v-if="dataforseoLiveRows.length" class="mini-table">
          <thead><tr><th>SKU</th><th>ASIN</th><th>Status</th></tr></thead>
          <tbody>
            <tr v-for="row in dataforseoLiveRows" :key="row.SKU">
              <td class="sku">{{ row.SKU }}</td>
              <td>{{ row.ASIN || '—' }}</td>
              <td>{{ row.Status }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No live DataForSEO connection report generated yet.</p>
      </div>

      <div class="staging-checklist" :class="status.dataforseoAsinLookup?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>DataForSEO ASIN lookup queue</h2>
          <p v-if="status.dataforseoAsinLookup?.counts">
            <strong>{{ status.dataforseoAsinLookup.counts.asinPresent }}</strong>
            ASINs present,
            <strong>{{ status.dataforseoAsinLookup.counts.missingAsins }}</strong>
            missing across
            <strong>{{ status.dataforseoAsinLookup.counts.targets }}</strong>
            no-spend lookup targets.
          </p>
          <p class="table-note">
            Queue: {{ status.dataforseoAsinLookup?.files?.lookupQueueCsv || 'content_population_exports/dataforseo_asin_lookup_queue.csv' }}.
            Confirm exact Just Vitamins product matches before paid task creation.
          </p>
        </div>
        <table v-if="dataforseoAsinQueue.length" class="mini-table">
          <thead><tr><th>SKU</th><th>Priority</th><th>Status</th><th>Action</th></tr></thead>
          <tbody>
            <tr v-for="target in dataforseoAsinQueue" :key="target.SKU">
              <td class="sku">{{ target.SKU }}</td>
              <td>{{ target.Priority }}</td>
              <td>{{ target.Status }}</td>
              <td>{{ target.CurrentASIN ? 'verify' : 'lookup' }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No ASIN lookup queue generated yet. Run <code>bun run dataforseo:asin-lookup</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.dataforseoAsinCandidates?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>DataForSEO ASIN candidates</h2>
          <p v-if="status.dataforseoAsinCandidates?.counts">
            <strong>{{ status.dataforseoAsinCandidates.counts.candidates }}</strong>
            candidates logged,
            <strong>{{ status.dataforseoAsinCandidates.counts.highConfidenceConfirmed }}</strong>
            Amazon-confirmed,
            <strong>{{ status.dataforseoAsinCandidates.counts.needsAmazonConfirmation }}</strong>
            still needing confirmation.
          </p>
          <p class="table-note">
            Candidates are lookup aids only; they do not unlock paid DataForSEO tasks until copied into asin-map.csv after Amazon-page confirmation.
          </p>
        </div>
        <table v-if="dataforseoAsinCandidates.length" class="mini-table">
          <thead><tr><th>SKU</th><th>ASIN</th><th>Confidence</th><th>Blockers</th></tr></thead>
          <tbody>
            <tr v-for="candidate in dataforseoAsinCandidates" :key="`${candidate.SKU}-${candidate.CandidateASIN}`">
              <td class="sku">{{ candidate.SKU }}</td>
              <td>{{ candidate.CandidateASIN }}</td>
              <td>{{ candidate.Confidence }}</td>
              <td>{{ candidate.Blockers }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No ASIN candidate report generated yet. Run <code>bun run dataforseo:asin-candidates</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.dataforseoAsinWebEvidence?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>DataForSEO ASIN web evidence</h2>
          <p v-if="status.dataforseoAsinWebEvidence?.counts">
            <strong>{{ status.dataforseoAsinWebEvidence.counts.thirdPartyLookupAids }}</strong>
            lookup aids,
            <strong>{{ status.dataforseoAsinWebEvidence.counts.amazonConfirmedExact }}</strong>
            Amazon-confirmed exact matches,
            <strong>{{ status.dataforseoAsinWebEvidence.counts.rejectedNotTarget }}</strong>
            rejected leads.
          </p>
          <p class="table-note">
            No-spend public web evidence only. Third-party ASIN hints stay blocked until Amazon-page title/brand/product/pack evidence is recorded.
          </p>
        </div>
        <table v-if="dataforseoAsinWebEvidence.length" class="mini-table">
          <thead><tr><th>SKU</th><th>Source</th><th>ASIN</th><th>Use</th><th>Blockers</th></tr></thead>
          <tbody>
            <tr v-for="evidence in dataforseoAsinWebEvidence" :key="`${evidence.SKU}-${evidence.EvidenceSource}-${evidence.CandidateASIN}`">
              <td class="sku">{{ evidence.SKU }}</td>
              <td>{{ evidence.EvidenceSource }}</td>
              <td>{{ evidence.CandidateASIN || '—' }}</td>
              <td>{{ evidence.UsableForPromotion === 'yes' ? 'promote' : evidence.LookupAid === 'yes' ? 'lookup aid' : 'blocked' }}</td>
              <td>{{ evidence.Blockers }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No ASIN web evidence report generated yet. Run <code>bun run dataforseo:asin-web-evidence</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.dataforseoUnresolvedAsinEvidence?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>DataForSEO unresolved ASIN evidence</h2>
          <p v-if="status.dataforseoUnresolvedAsinEvidence?.counts">
            <strong>{{ status.dataforseoUnresolvedAsinEvidence.counts.unresolvedTargets }}</strong>
            unresolved targets inspected,
            <strong>{{ status.dataforseoUnresolvedAsinEvidence.counts.candidateRows }}</strong>
            DataForSEO candidate rows,
            <strong>{{ status.dataforseoUnresolvedAsinEvidence.counts.keepOutOfPaidPayload }}</strong>
            kept out of paid payload.
          </p>
          <p class="table-note">
            {{ status.dataforseoUnresolvedAsinEvidence?.recommendation || 'Run bun run dataforseo:unresolved-asins.' }}
          </p>
        </div>
        <table v-if="dataforseoUnresolvedAsins.length" class="mini-table">
          <thead><tr><th>SKU</th><th>Top ASIN</th><th>Decision</th><th>Evidence</th></tr></thead>
          <tbody>
            <tr v-for="target in dataforseoUnresolvedAsins" :key="target.SKU">
              <td class="sku">{{ target.SKU }}</td>
              <td>{{ target.TopCandidateASIN || '—' }}</td>
              <td>{{ target.Decision }}</td>
              <td>{{ target.Evidence }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No unresolved ASIN evidence generated yet. Run <code>bun run dataforseo:unresolved-asins</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.dataforseoAsinConfirmations?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>DataForSEO ASIN confirmations</h2>
          <p v-if="status.dataforseoAsinConfirmations?.counts">
            <strong>{{ status.dataforseoAsinConfirmations.counts.readyForPromotion }}</strong>
            ready for promotion,
            <strong>{{ status.dataforseoAsinConfirmations.counts.pending }}</strong>
            pending,
            <strong>{{ status.dataforseoAsinConfirmations.counts.blocked }}</strong>
            blocked.
          </p>
          <p class="table-note">
            Fill data/sources/dataforseo/asin-confirmations.csv after opening the Amazon UK product page and recording visible title/brand/product/pack evidence.
          </p>
        </div>
        <table v-if="dataforseoAsinConfirmations.length" class="mini-table">
          <thead><tr><th>SKU</th><th>ASIN</th><th>Status</th><th>Blockers</th></tr></thead>
          <tbody>
            <tr v-for="confirmation in dataforseoAsinConfirmations" :key="`${confirmation.SKU}-${confirmation.CandidateASIN}`">
              <td class="sku">{{ confirmation.SKU }}</td>
              <td>{{ confirmation.CandidateASIN }}</td>
              <td>{{ confirmation.Status }}</td>
              <td>{{ confirmation.Blockers }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No ASIN confirmation report generated yet. Run <code>bun run dataforseo:asin-confirmations</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.dataforseoAsinPromotion?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>DataForSEO ASIN promotion</h2>
          <p v-if="status.dataforseoAsinPromotion?.counts">
            <strong>{{ status.dataforseoAsinPromotion.counts.promotable }}</strong>
            promoted,
            <strong>{{ status.dataforseoAsinPromotion.counts.asinMapReadyAfterPromotion }}</strong>
            ASIN map rows ready,
            <strong>{{ status.dataforseoAsinPromotion.counts.asinMapMissingAfterPromotion }}</strong>
            still missing.
          </p>
          <p class="table-note">
            Promotion copies only Amazon-confirmed, high-confidence candidates; existing ASIN map values are never overwritten.
          </p>
        </div>
        <table v-if="dataforseoAsinPromotions.length" class="mini-table">
          <thead><tr><th>SKU</th><th>Candidate</th><th>Promote</th><th>Blockers</th></tr></thead>
          <tbody>
            <tr v-for="promotion in dataforseoAsinPromotions" :key="`${promotion.SKU}-${promotion.CandidateASIN}`">
              <td class="sku">{{ promotion.SKU }}</td>
              <td>{{ promotion.CandidateASIN }}</td>
              <td>{{ promotion.Promote }}</td>
              <td>{{ promotion.Blockers }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No ASIN promotion report generated yet. Run <code>bun run dataforseo:promote-asins</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.dataforseoIngest?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>DataForSEO result ingest</h2>
          <p v-if="status.dataforseoIngest?.counts">
            <strong>{{ status.dataforseoIngest.counts.rawFiles }}</strong>
            raw result files,
            <strong>{{ status.dataforseoIngest.counts.convertedFiles }}</strong>
            Amazon source files,
            <strong>{{ status.dataforseoIngest.counts.convertedReviews }}</strong>
            reviews converted.
          </p>
          <p class="table-note">
            Save DataForSEO advanced task_get JSON in {{ status.dataforseoIngest?.rawInputDir || 'data/sources/dataforseo/raw' }},
            run <code>bun run dataforseo:ingest</code>, then <code>bun run validate:sources</code>.
          </p>
        </div>
        <table v-if="dataforseoIngestOutputs.length" class="mini-table">
          <thead><tr><th>SKU</th><th>Reviews</th><th>Status</th></tr></thead>
          <tbody>
            <tr v-for="output in dataforseoIngestOutputs" :key="`${output.RawFile}-${output.SKU}`">
              <td class="sku">{{ output.SKU || '?' }}</td>
              <td>{{ output.Reviews }}</td>
              <td>{{ output.Status }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No DataForSEO ingest validation generated yet.</p>
      </div>

      <div class="staging-checklist" :class="status.dataforseoReviewsLivePilot?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>DataForSEO reviews live pilot</h2>
          <p v-if="status.dataforseoReviewsLivePilot?.counts">
            <strong>{{ status.dataforseoReviewsLivePilot.counts.payloadRows }}</strong>
            payload rows,
            <strong>{{ status.dataforseoReviewsLivePilot.counts.tasksPosted }}</strong>
            tasks posted,
            <strong>{{ status.dataforseoReviewsLivePilot.counts.reviewsReturned }}</strong>
            reviews returned.
          </p>
          <p class="table-note">
            {{ status.dataforseoReviewsLivePilot?.blocker || 'Run bun run dataforseo:reviews-live after preflight and approval gates pass.' }}
          </p>
          <p v-if="status.dataforseoReviewsLivePilot?.latestArchivedReviewPost" class="table-note">
            Latest provider failure:
            {{ status.dataforseoReviewsLivePilot.latestArchivedReviewPost.status_code }}
            {{ status.dataforseoReviewsLivePilot.latestArchivedReviewPost.status_message }}
          </p>
        </div>
        <table v-if="dataforseoReviewPilotTasks.length" class="mini-table">
          <thead><tr><th>Task</th><th>Status</th><th>Reviews</th></tr></thead>
          <tbody>
            <tr v-for="task in dataforseoReviewPilotTasks" :key="task.id || task.tag">
              <td class="sku">{{ task.tag || task.id }}</td>
              <td>{{ task.status_code }} {{ task.status_message }}</td>
              <td>{{ task.resultCount || 0 }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="staging-checklist" :class="status.dataforseoReviewsDocsStatus?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>DataForSEO Reviews official docs status</h2>
          <p v-if="status.dataforseoReviewsDocsStatus?.counts">
            <strong>{{ status.dataforseoReviewsDocsStatus.counts.passing }}/{{ status.dataforseoReviewsDocsStatus.counts.checks }}</strong>
            docs checks passing,
            unavailable note:
            <strong>{{ status.dataforseoReviewsDocsStatus.endpointTemporarilyUnavailable ? 'yes' : 'no' }}</strong>.
          </p>
          <p class="table-note">
            {{ status.dataforseoReviewsDocsStatus?.recommendation || 'Run bun run dataforseo:reviews-docs-status.' }}
          </p>
        </div>
        <table v-if="dataforseoReviewsDocsChecks.length" class="mini-table">
          <thead><tr><th>Check</th><th>Status</th><th>Evidence</th></tr></thead>
          <tbody>
            <tr v-for="check in dataforseoReviewsDocsChecks" :key="check.Check">
              <td>{{ check.Check }}</td>
              <td>{{ check.Status }}</td>
              <td>{{ check.Evidence }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="staging-checklist" :class="status.dataforseoSupportEscalation?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>DataForSEO support escalation</h2>
          <p v-if="status.dataforseoSupportEscalation?.counts">
            <strong>{{ status.dataforseoSupportEscalation.counts.payloadRows }}</strong>
            payload rows,
            <strong>{{ status.dataforseoSupportEscalation.counts.liveConfirmedAsins }}</strong>
            confirmed ASINs,
            issue: <strong>{{ status.dataforseoSupportEscalation.issue }}</strong>.
          </p>
          <p class="table-note">
            Send-ready packet:
            {{ status.dataforseoSupportEscalation?.files?.supportMd || 'content_population_exports/dataforseo_support_escalation.md' }}.
            Credentials included: {{ status.dataforseoSupportEscalation?.credentialPrinted ? 'yes' : 'no' }}.
          </p>
        </div>
        <table v-if="dataforseoSupportRows.length" class="mini-table">
          <thead><tr><th>Item</th><th>Evidence</th><th>Action</th></tr></thead>
          <tbody>
            <tr v-for="row in dataforseoSupportRows" :key="row.Item">
              <td>{{ row.Item }}</td>
              <td>{{ row.Evidence }}</td>
              <td>{{ row.ActionNeeded }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="staging-checklist" :class="status.dataforseoSupportResponseGate?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>DataForSEO support response gate</h2>
          <p v-if="status.dataforseoSupportResponseGate?.counts">
            <strong>{{ status.dataforseoSupportResponseGate.counts.passing }}/{{ status.dataforseoSupportResponseGate.counts.checks }}</strong>
            response checks passing.
          </p>
          <p class="table-note">
            {{ status.dataforseoSupportResponseGate?.recommendation || 'Run bun run dataforseo:support-response.' }}
          </p>
        </div>
        <table v-if="dataforseoSupportResponseChecks.length" class="mini-table">
          <thead><tr><th>Check</th><th>Status</th><th>Evidence</th></tr></thead>
          <tbody>
            <tr v-for="check in dataforseoSupportResponseChecks" :key="check.Check">
              <td>{{ check.Check }}</td>
              <td>{{ check.Status }}</td>
              <td>{{ check.Evidence }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No support response gate generated yet. Run <code>bun run dataforseo:support-response</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.dataforseoTaskPreflight?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>DataForSEO paid-task preflight</h2>
          <p v-if="status.dataforseoTaskPreflight?.counts">
            <strong>{{ status.dataforseoTaskPreflight.counts.passing }}/{{ status.dataforseoTaskPreflight.counts.checks }}</strong>
            checks passing,
            <strong>{{ status.dataforseoTaskPreflight.counts.taskRows }}</strong>
            task rows.
          </p>
          <p class="table-note">
            Final guard before paid task creation. It requires support-response clearance, spend gate, budget gate, payload rows, env credentials, and JV_SOURCE_ALLOW_PAID=dataforseo-stage1.
          </p>
        </div>
        <table v-if="dataforseoTaskPreflightChecks.length" class="mini-table">
          <thead><tr><th>Check</th><th>Status</th><th>Evidence</th></tr></thead>
          <tbody>
            <tr v-for="check in dataforseoTaskPreflightChecks" :key="check.Check">
              <td>{{ check.Check }}</td>
              <td>{{ check.Status }}</td>
              <td>{{ check.Evidence }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No DataForSEO task preflight generated yet. Run <code>bun run dataforseo:task-preflight</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.dataforseoApprovalRequest?.approvalAlreadyValid ? 'ready' : 'blocked'">
        <div>
          <h2>DataForSEO approval request</h2>
          <p v-if="status.dataforseoApprovalRequest?.counts">
            <strong>{{ status.dataforseoApprovalRequest.counts.readyChecks }}/{{ status.dataforseoApprovalRequest.counts.checks }}</strong>
            approval-prep checks ready,
            <strong>{{ status.dataforseoApprovalRequest.counts.payloadRows }}</strong>
            payload rows,
            <strong>{{ status.dataforseoApprovalRequest.counts.keepOutOfPaidPayload }}</strong>
            unresolved ASINs kept out.
          </p>
          <p class="table-note">
            {{ status.dataforseoApprovalRequest?.recommendation || 'Run bun run dataforseo:approval-request.' }}
          </p>
        </div>
        <table v-if="dataforseoApprovalRequestChecks.length" class="mini-table">
          <thead><tr><th>Check</th><th>Status</th><th>Evidence</th></tr></thead>
          <tbody>
            <tr v-for="check in dataforseoApprovalRequestChecks" :key="check.Check">
              <td>{{ check.Check }}</td>
              <td>{{ check.Status }}</td>
              <td>{{ check.Evidence }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No approval request generated yet. Run <code>bun run dataforseo:approval-request</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.manualAmazonReviewCapture?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Manual Amazon review capture fallback</h2>
          <p v-if="status.manualAmazonReviewCapture?.counts">
            <strong>{{ status.manualAmazonReviewCapture.counts.targets }}</strong>
            capture targets,
            <strong>{{ status.manualAmazonReviewCapture.counts.payloadRowsRepresented }}</strong>
            payload rows represented.
          </p>
          <p class="table-note">
            {{ status.manualAmazonReviewCapture?.recommendation || 'Run bun run amazon:manual-capture.' }}
          </p>
        </div>
        <table v-if="manualAmazonReviewCaptureRows.length" class="mini-table">
          <thead><tr><th>SKU</th><th>ASIN</th><th>Depth</th><th>Save path</th></tr></thead>
          <tbody>
            <tr v-for="row in manualAmazonReviewCaptureRows" :key="row.SKU">
              <td class="sku">{{ row.SKU }}</td>
              <td>{{ row.ASIN }}</td>
              <td>{{ row.DepthTarget }}</td>
              <td>{{ row.SourceDropPath }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No manual capture queue generated yet. Run <code>bun run amazon:manual-capture</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.manualAmazonReviewCaptureValidation?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Manual Amazon capture validation</h2>
          <p v-if="status.manualAmazonReviewCaptureValidation?.counts">
            <strong>{{ status.manualAmazonReviewCaptureValidation.counts.filesValid }}/{{ status.manualAmazonReviewCaptureValidation.counts.targets }}</strong>
            source drops valid,
            <strong>{{ status.manualAmazonReviewCaptureValidation.counts.reviewsCaptured }}</strong>
            reviews captured.
          </p>
          <p class="table-note">
            {{ status.manualAmazonReviewCaptureValidation?.recommendation || 'Run bun run amazon:manual-capture-validate.' }}
          </p>
        </div>
        <table v-if="manualAmazonReviewCaptureValidationRows.length" class="mini-table">
          <thead><tr><th>SKU</th><th>Status</th><th>Present</th><th>Reviews</th><th>Issues</th></tr></thead>
          <tbody>
            <tr v-for="row in manualAmazonReviewCaptureValidationRows" :key="row.SKU">
              <td class="sku">{{ row.SKU }}</td>
              <td>{{ row.Status }}</td>
              <td>{{ row.FilePresent }}</td>
              <td>{{ row.ReviewsCaptured }}</td>
              <td>{{ Array.isArray(row.Issues) ? row.Issues.join('; ') : row.Issues }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No manual capture validation generated yet. Run <code>bun run amazon:manual-capture-validate</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.apifyGapfill ? 'ready' : 'blocked'">
        <div>
          <h2>Apify selective gap-fill</h2>
          <p v-if="status.apifyGapfill?.counts">
            <strong>{{ status.apifyGapfill.counts.firstBatchTargets }}</strong>
            first-batch targets,
            <strong>{{ status.apifyGapfill.counts.holdTargets }}</strong>
            held targets,
            <strong>{{ status.apifyGapfill.counts.existingPdpProbes }}</strong>
            existing PDP probes.
          </p>
          <p class="table-note">{{ status.apifyGapfill?.recommendation || 'Run bun run apify:gapfill.' }}</p>
        </div>
        <table v-if="apifyTargets.length" class="mini-table">
          <thead><tr><th>Brand</th><th>Run</th><th>Cap</th><th>Probe</th></tr></thead>
          <tbody>
            <tr v-for="target in apifyTargets" :key="target.Brand">
              <td>{{ target.Brand }}</td>
              <td>{{ target.RunNow }}</td>
              <td>{{ target.MaxRequestsPerBrand }} req / depth {{ target.MaxDepth }}</td>
              <td>{{ target.ExistingPdpProbe }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No Apify gap-fill packet generated yet.</p>
      </div>

      <div class="staging-checklist" :class="status.apifyTaskPreflight?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Apify paid-actor preflight</h2>
          <p v-if="status.apifyTaskPreflight?.counts">
            <strong>{{ status.apifyTaskPreflight.counts.passing }}/{{ status.apifyTaskPreflight.counts.checks }}</strong>
            checks passing,
            <strong>{{ status.apifyTaskPreflight.counts.firstBatchTargets }}</strong>
            first-batch targets.
          </p>
          <p class="table-note">
            Final guard before any Apify actor run. It requires DataForSEO pilot review to name an Apify gap, budget/spend approval, APIFY_TOKEN, and JV_SOURCE_ALLOW_PAID=apify-stage2.
          </p>
        </div>
        <table v-if="apifyTaskPreflightChecks.length" class="mini-table">
          <thead><tr><th>Check</th><th>Status</th><th>Evidence</th></tr></thead>
          <tbody>
            <tr v-for="check in apifyTaskPreflightChecks" :key="check.Check">
              <td>{{ check.Check }}</td>
              <td>{{ check.Status }}</td>
              <td>{{ check.Evidence }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No Apify task preflight generated yet. Run <code>bun run apify:task-preflight</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.sourcePricingReferences?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Provider pricing references</h2>
          <p v-if="status.sourcePricingReferences?.counts">
            <strong>{{ status.sourcePricingReferences.counts.references }}</strong>
            references across
            <strong>{{ status.sourcePricingReferences.counts.providers }}</strong>
            providers.
          </p>
          <p class="table-note">
            Official pricing references for filling the cost plan. They do not unlock spend by themselves.
          </p>
        </div>
        <table v-if="sourcePricingReferenceRows.length" class="mini-table">
          <thead><tr><th>Provider</th><th>Item</th><th>Price</th><th>Caveat</th></tr></thead>
          <tbody>
            <tr v-for="ref in sourcePricingReferenceRows" :key="`${ref.Provider}-${ref.PricingItem}`">
              <td>{{ ref.Provider }}</td>
              <td>{{ ref.PricingItem }}</td>
              <td>{{ ref.Price }}</td>
              <td>{{ ref.Caveat }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No pricing references generated yet. Run <code>bun run source:pricing-refs</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.sourceCostScenarios?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Provider cost scenarios</h2>
          <p v-if="status.sourceCostScenarios?.counts">
            <strong>{{ status.sourceCostScenarios.counts.scenarios }}</strong>
            scenarios,
            <strong>{{ status.sourceCostScenarios.counts.stageOneTasks }}</strong>
            DataForSEO tasks at depth
            <strong>{{ status.sourceCostScenarios.counts.reviewDepth }}</strong>.
          </p>
          <p class="table-note">
            No-spend estimates for choosing a tiny local cap. These scenarios do not unlock provider spend.
          </p>
        </div>
        <table v-if="sourceCostScenarioRows.length" class="mini-table">
          <thead><tr><th>Provider</th><th>Scenario</th><th>Estimate</th><th>Status</th></tr></thead>
          <tbody>
            <tr v-for="scenario in sourceCostScenarioRows" :key="`${scenario.Provider}-${scenario.Scenario}`">
              <td>{{ scenario.Provider }}</td>
              <td>{{ scenario.Scenario }}</td>
              <td>${{ scenario.EstimatedUsd }} / cap ref ${{ scenario.SuggestedCapUsd }}</td>
              <td>{{ scenario.SpendStatus }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No cost scenarios generated yet. Run <code>bun run source:cost-scenarios</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.sourceBudgetGate?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Provider budget gate</h2>
          <p v-if="status.sourceBudgetGate?.counts">
            <strong>{{ status.sourceBudgetGate.counts.passing }}/{{ status.sourceBudgetGate.counts.checks }}</strong>
            budget checks passing. DataForSEO budget:
            <strong>{{ status.sourceBudgetGate.budgetAllowed?.dataforseoStage1 ? 'capped' : 'blocked' }}</strong>,
            Apify budget:
            <strong>{{ status.sourceBudgetGate.budgetAllowed?.apifyStage2 ? 'capped' : 'blocked' }}</strong>.
          </p>
          <p class="table-note">Budget file: {{ status.sourceBudgetGate?.budgetFile || 'data/sources/budgets/source-acquisition-budget.json' }}. No credentials here.</p>
        </div>
        <table v-if="sourceBudgetGateChecks.length" class="mini-table">
          <thead><tr><th>Provider</th><th>Check</th><th>Status</th><th>Evidence</th></tr></thead>
          <tbody>
            <tr v-for="check in sourceBudgetGateChecks" :key="`${check.Provider}-${check.Check}`">
              <td>{{ check.Provider }}</td>
              <td>{{ check.Check }}</td>
              <td>{{ check.Status }}</td>
              <td>{{ check.Evidence }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No budget gate generated yet. Run <code>bun run source:budget</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.sourceCostPlan?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Provider cost plan</h2>
          <p v-if="status.sourceCostPlan?.counts">
            <strong>{{ status.sourceCostPlan.counts.passing }}/{{ status.sourceCostPlan.counts.checks }}</strong>
            cost checks passing. DataForSEO estimate:
            <strong>{{ status.sourceCostPlan.currency }} {{ status.sourceCostPlan.estimates?.dataforseoStage1?.estimatedTotal || 0 }}</strong>,
            Apify estimate:
            <strong>{{ status.sourceCostPlan.currency }} {{ status.sourceCostPlan.estimates?.apifyStage2?.estimatedTotal || 0 }}</strong>.
          </p>
          <p class="table-note">
            Fill current provider pricing and capped first-run estimates before enabling budgets or approvals. No credentials here.
          </p>
        </div>
        <table v-if="sourceCostPlanChecks.length" class="mini-table">
          <thead><tr><th>Provider</th><th>Check</th><th>Status</th><th>Evidence</th></tr></thead>
          <tbody>
            <tr v-for="check in sourceCostPlanChecks" :key="`${check.Provider}-${check.Check}`">
              <td>{{ check.Provider }}</td>
              <td>{{ check.Check }}</td>
              <td>{{ check.Status }}</td>
              <td>{{ check.Evidence }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No cost plan generated yet. Run <code>bun run source:cost-plan</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.sourceApprovalGate?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Provider approval gate</h2>
          <p v-if="status.sourceApprovalGate?.counts">
            <strong>{{ status.sourceApprovalGate.counts.passing }}/{{ status.sourceApprovalGate.counts.checks }}</strong>
            approval checks passing,
            <strong>{{ status.sourceApprovalGate.counts.approvalsValid }}/{{ status.sourceApprovalGate.counts.providers }}</strong>
            approvals valid.
          </p>
          <p class="table-note">
            Approval must match budget caps, target/run limits, hard-stop acknowledgement, and no-credential-storage acknowledgement before spend can unlock.
          </p>
        </div>
        <table v-if="sourceApprovalGateChecks.length" class="mini-table">
          <thead><tr><th>Provider</th><th>Check</th><th>Status</th><th>Evidence</th></tr></thead>
          <tbody>
            <tr v-for="check in sourceApprovalGateChecks" :key="`${check.Provider}-${check.Check}`">
              <td>{{ check.Provider }}</td>
              <td>{{ check.Check }}</td>
              <td>{{ check.Status }}</td>
              <td>{{ check.Evidence }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No approval gate generated yet. Run <code>bun run source:approvals</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.sourceSpendGate?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Provider spend gate</h2>
          <p v-if="status.sourceSpendGate?.counts">
            <strong>{{ status.sourceSpendGate.counts.passing }}/{{ status.sourceSpendGate.counts.checks }}</strong>
            checks passing. DataForSEO spend:
            <strong>{{ status.sourceSpendGate.spendAllowed?.dataforseoStage1 ? 'allowed' : 'blocked' }}</strong>,
            Apify spend:
            <strong>{{ status.sourceSpendGate.spendAllowed?.apifyStage2 ? 'allowed' : 'blocked' }}</strong>.
          </p>
          <p class="table-note">Run <code>bun run source:spend-gate</code>. Approval files live under data/sources/approvals/.</p>
        </div>
        <table v-if="sourceSpendGateChecks.length" class="mini-table">
          <thead><tr><th>Provider</th><th>Check</th><th>Status</th><th>Evidence</th></tr></thead>
          <tbody>
            <tr v-for="check in sourceSpendGateChecks" :key="`${check.Provider}-${check.Check}`">
              <td>{{ check.Provider }}</td>
              <td>{{ check.Check }}</td>
              <td>{{ check.Status }}</td>
              <td>{{ check.Evidence }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No spend gate generated yet.</p>
      </div>

      <div class="staging-checklist" :class="status.dataforseoPilotReview?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>DataForSEO pilot review</h2>
          <p v-if="status.dataforseoPilotReview?.counts">
            <strong>{{ status.dataforseoPilotReview.counts.passing }}/{{ status.dataforseoPilotReview.counts.checks }}</strong>
            review checks passing. Decision:
            <strong>{{ status.dataforseoPilotReview.decision }}</strong>.
          </p>
          <p class="table-note">Review file: {{ status.dataforseoPilotReview?.reviewFile || 'data/sources/reviews/dataforseo-stage1-review.json' }}</p>
        </div>
        <table v-if="dataforseoPilotReviewChecks.length" class="mini-table">
          <thead><tr><th>Check</th><th>Status</th><th>Evidence</th></tr></thead>
          <tbody>
            <tr v-for="check in dataforseoPilotReviewChecks" :key="check.Check">
              <td>{{ check.Check }}</td>
              <td>{{ check.Status }}</td>
              <td>{{ check.Evidence }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No DataForSEO pilot review generated yet. Run <code>bun run dataforseo:review</code>.</p>
      </div>

      <div class="staging-checklist" :class="status.sourceAcquisitionControlRun?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Source acquisition control run</h2>
          <p v-if="status.sourceAcquisitionControlRun?.counts">
            <strong>{{ status.sourceAcquisitionControlRun.counts.passing }}/{{ status.sourceAcquisitionControlRun.counts.steps }}</strong>
            steps passing,
            <strong>{{ status.sourceAcquisitionControlRun.counts.requiredPassing }}/{{ status.sourceAcquisitionControlRun.counts.required }}</strong>
            required packet steps passing.
          </p>
          <p class="table-note">Run <code>bun run source:refresh-packet</code>. {{ status.sourceAcquisitionControlRun?.note || '' }}</p>
        </div>
        <table v-if="sourceControlBlockedSteps.length" class="mini-table">
          <thead><tr><th>Step</th><th>Status</th><th>Exit</th></tr></thead>
          <tbody>
            <tr v-for="step in sourceControlBlockedSteps" :key="step.Name">
              <td>{{ step.Name }}</td>
              <td>{{ step.Status }}</td>
              <td>{{ step.ExitCode }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No source acquisition control run generated yet.</p>
      </div>

      <div class="staging-checklist" :class="status.sourceSubscriptionDecision?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Source subscription decision</h2>
          <p v-if="status.sourceSubscriptionDecision?.counts">
            <strong>{{ status.sourceSubscriptionDecision.currentDecision?.dataforseo }}</strong>
            for DataForSEO,
            <strong>{{ status.sourceSubscriptionDecision.currentDecision?.apify }}</strong>
            for Apify.
          </p>
          <p class="table-note">{{ status.sourceSubscriptionDecision?.headline || 'Run bun run source:subscription-decision.' }}</p>
        </div>
        <table v-if="sourceSubscriptionDecisionRows.length" class="mini-table">
          <thead><tr><th>Decision</th><th>Recommendation</th><th>Reason</th></tr></thead>
          <tbody>
            <tr v-for="row in sourceSubscriptionDecisionRows" :key="row.Decision">
              <td>{{ row.Decision }}</td>
              <td>{{ row.Recommendation }}</td>
              <td>{{ row.Reason }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No subscription decision packet generated yet.</p>
      </div>

      <div class="staging-checklist" :class="status.sourceAcquisitionNextActions?.ready ? 'ready' : 'blocked'">
        <div>
          <h2>Source acquisition next actions</h2>
          <p v-if="status.sourceAcquisitionNextActions?.counts">
            <strong>{{ status.sourceAcquisitionNextActions.counts.immediate }}</strong>
            immediate actions,
            <strong>{{ status.sourceAcquisitionNextActions.counts.missingAsins }}</strong>
            ASINs missing,
            <strong>{{ status.sourceAcquisitionNextActions.counts.blockedPaidActions }}</strong>
            paid/spend actions blocked.
          </p>
          <p class="table-note">{{ status.sourceAcquisitionNextActions?.currentInstruction || 'Run bun run source:next-actions.' }}</p>
        </div>
        <table v-if="sourceNextActions.length" class="mini-table">
          <thead><tr><th>#</th><th>Provider</th><th>Action</th><th>Status</th><th>Evidence</th></tr></thead>
          <tbody>
            <tr v-for="action in sourceNextActions" :key="action.Sequence">
              <td>{{ action.Sequence }}</td>
              <td>{{ action.Provider }}</td>
              <td>{{ action.Action }}</td>
              <td>{{ action.Status }}</td>
              <td>{{ action.Evidence }}</td>
            </tr>
          </tbody>
        </table>
        <p v-else class="table-note">No source acquisition next-action packet generated yet.</p>
      </div>

      <div class="command-grid">
        <div class="command-card">
          <h2>Dashboard quick export</h2>
          <code>bun run export:content</code>
          <p>Writes preview CSVs plus <strong>handoff_manifest.json</strong> and <strong>handoff_summary.md</strong> to <strong>jv-dashboard/content_population_exports/</strong>.</p>
        </div>
        <div class="command-card">
          <h2>Lewis/Euan Matrixify emitters</h2>
          <code>py build_metaobjects_csv.py</code>
          <code>py build_products_csv_v5.py</code>
          <code>py build_smart_collections_csv.py</code>
          <code>py validate_assets_manifest.py</code>
          <p>Run from <strong>JV Migration to shopify</strong>. Writes reviewed handoff files to <strong>content_population_exports/</strong>.</p>
        </div>
      </div>

      <div class="outputs">
        <section>
          <h2>Dashboard outputs</h2>
          <ul><li v-for="file in status.outputFiles?.dashboard" :key="file.path">{{ file.name }}</li><li v-if="!status.outputFiles?.dashboard?.length">No files yet.</li></ul>
        </section>
        <section>
          <h2>Migration outputs</h2>
          <ul><li v-for="file in status.outputFiles?.migration" :key="file.path">{{ file.name }}</li><li v-if="!status.outputFiles?.migration?.length">No files yet.</li></ul>
        </section>
      </div>

      <div class="table-wrap">
        <table class="data-table">
          <thead><tr><th>SKU</th><th>Type</th><th>Blocker</th></tr></thead>
          <tbody>
            <tr v-for="(b, i) in visibleBlockers" :key="i"><td class="sku">{{ b.sku }}</td><td>{{ b.type }}</td><td>{{ b.message }}</td></tr>
            <tr v-if="!status.blockers.length"><td colspan="3" class="empty-row">No blockers.</td></tr>
          </tbody>
        </table>
      </div>
      <p v-if="status.blockers.length > visibleBlockers.length" class="table-note">Showing first {{ visibleBlockers.length }} of {{ status.blockers.length }} blockers. Full list is in export_blockers.csv.</p>
    </template>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
const status = ref(null)
const loading = ref(false)
const blockerCards = computed(() => {
  const summary = status.value?.blockerSummary || {}
  return [
    { type: 'compliance', label: 'clinical claim blockers', count: summary.compliance || 0 },
    { type: 'asset', label: 'asset blockers', count: (summary.asset || 0) + (summary.asset_reference || 0) + (summary.asset_upload || 0) },
    { type: 'approval', label: 'approval blockers', count: summary.approval || 0 }
  ]
})
const visibleBlockers = computed(() => (status.value?.blockers || []).slice(0, 120))
const blockedGates = computed(() => (status.value?.readinessAudit?.gates || []).filter(gate => !gate.ready))
const actionPlanItems = computed(() => (status.value?.handoffActionPlan?.actions || []).slice(0, 6))
const packetRefreshRows = computed(() => (status.value?.handoffPacketRefresh?.steps || []).filter(row => row.Status !== 'pass').slice(0, 10))
const artifactFreshnessRows = computed(() => (status.value?.handoffArtifactFreshness?.rows || []).filter(row => !['fresh', 'static_allowed', 'self_report_current'].includes(row.Status)).slice(0, 10))
const executiveDecisionRows = computed(() => (status.value?.executiveDecisionBrief?.decisions || []).slice(0, 8))
const blockerBurndownRows = computed(() => (status.value?.blockerBurndown?.lanes || []).slice(0, 8))
const dailyStatusRows = computed(() => (status.value?.dailyStatus?.rows || []).slice(0, 9))
const handoffEvidenceRows = computed(() => (status.value?.handoffEvidenceDossier?.requirements || []).filter(row => row.Status !== 'proven').slice(0, 10))
const reviewerWorkbookRows = computed(() => (status.value?.reviewerDecisionWorkbook?.ownerRows || []).filter(row => Number(row.RemainingCount || 0) > 0).slice(0, 8))
const reviewerInputPreflightRows = computed(() => (status.value?.reviewerInputPreflight?.blockingRows || []).slice(0, 8))
const ownerHandoffMessageRows = computed(() => (status.value?.ownerHandoffMessages?.messages || []).slice(0, 8))
const ownerResponseRows = computed(() => (status.value?.ownerResponseIntake?.rows || []).slice(0, 8))
const handoffGateDependencyRows = computed(() => (status.value?.handoffGateDependencyMap?.blockedRows || []).slice(0, 8))
const postOwnerResponseRerunRows = computed(() => (status.value?.postOwnerResponseRerunPlan?.rows || []).slice(0, 8))
const ownerEvidenceGuideRows = computed(() => (status.value?.ownerEvidenceAcceptanceGuide?.rows || []).slice(0, 8))
const unmatchedClaimsRows = computed(() => (status.value?.unmatchedClaimsReview?.rows || []).slice(0, 8))
const clinicalBlankDecisionRows = computed(() => (status.value?.clinicalBlankDecisionTemplate?.rows || []).filter(row => row.ValidBlankApproval !== 'yes').slice(0, 8))
const productApprovalRows = computed(() => (status.value?.productApprovalReview?.rows || []).filter(row => row.ReadyForExportApproval !== 'yes').slice(0, 8))
const productApprovalDecisionRows = computed(() => (status.value?.productApprovalDecisionGate?.rows || []).filter(row => row.ValidApproval !== 'yes').slice(0, 8))
const checklistItems = computed(() => (status.value?.stagingChecklist?.checks || []).filter(check => check.Blocking === 'yes').slice(0, 8))
const stagingHandoffActions = computed(() => (status.value?.stagingHandoffPacket?.actionRows || []).slice(0, 8))
const stagingEvidenceGates = computed(() => (status.value?.stagingEvidence?.gates || []).filter(gate => gate.Blocking === 'yes').slice(0, 8))
const stagingEvidenceIntakeRows = computed(() => (status.value?.stagingEvidenceIntake?.rows || []).slice(0, 8))
const handoffVerificationChecks = computed(() => (status.value?.handoffVerification?.checks || []).filter(check => check.Status !== 'pass').slice(0, 10))
const deliveryGroups = computed(() => (status.value?.deliveryIndex?.groups || []))
const sourceAcquisitionStages = computed(() => (status.value?.sourceAcquisitionPlan?.stages || []))
const dataforseoTargets = computed(() => (status.value?.dataforseoPilot?.targets || []))
const dataforseoLiveRows = computed(() => (status.value?.dataforseoLiveConnection?.confirmedRows || []))
const dataforseoAsinQueue = computed(() => (status.value?.dataforseoAsinLookup?.queue || []))
const dataforseoAsinCandidates = computed(() => (status.value?.dataforseoAsinCandidates?.candidates || []).slice(0, 8))
const dataforseoAsinWebEvidence = computed(() => (status.value?.dataforseoAsinWebEvidence?.evidence || []).slice(0, 8))
const dataforseoUnresolvedAsins = computed(() => (status.value?.dataforseoUnresolvedAsinEvidence?.unresolvedTargets || []).slice(0, 8))
const dataforseoAsinConfirmations = computed(() => (status.value?.dataforseoAsinConfirmations?.confirmations || []).filter(row => row.ReadyForPromotion !== 'yes').slice(0, 8))
const dataforseoAsinPromotions = computed(() => (status.value?.dataforseoAsinPromotion?.promotions || []).filter(row => row.Promote !== 'yes').slice(0, 8))
const dataforseoIngestOutputs = computed(() => (status.value?.dataforseoIngest?.outputs || []))
const dataforseoReviewPilotTasks = computed(() => (status.value?.dataforseoReviewsLivePilot?.taskSummary || []))
const dataforseoReviewsDocsChecks = computed(() => (status.value?.dataforseoReviewsDocsStatus?.checks || []))
const dataforseoSupportRows = computed(() => (status.value?.dataforseoSupportEscalation?.issueRows || []))
const dataforseoSupportResponseChecks = computed(() => (status.value?.dataforseoSupportResponseGate?.checks || []).filter(check => check.Status !== 'pass').slice(0, 8))
const dataforseoTaskPreflightChecks = computed(() => (status.value?.dataforseoTaskPreflight?.checks || []).filter(check => check.Status !== 'pass').slice(0, 8))
const dataforseoApprovalRequestChecks = computed(() => (status.value?.dataforseoApprovalRequest?.checks || []).filter(check => check.Status !== 'ready').slice(0, 8))
const manualAmazonReviewCaptureRows = computed(() => (status.value?.manualAmazonReviewCapture?.queue || []).slice(0, 8))
const manualAmazonReviewCaptureValidationRows = computed(() => (status.value?.manualAmazonReviewCaptureValidation?.rows || []).filter(row => row.Status !== 'valid').slice(0, 8))
const apifyTargets = computed(() => (status.value?.apifyGapfill?.targets || []))
const apifyTaskPreflightChecks = computed(() => (status.value?.apifyTaskPreflight?.checks || []).filter(check => check.Status !== 'pass').slice(0, 8))
const sourcePricingReferenceRows = computed(() => (status.value?.sourcePricingReferences?.references || []))
const sourceCostScenarioRows = computed(() => (status.value?.sourceCostScenarios?.scenarios || []))
const sourceBudgetGateChecks = computed(() => (status.value?.sourceBudgetGate?.checks || []).filter(check => check.Status !== 'pass'))
const sourceCostPlanChecks = computed(() => (status.value?.sourceCostPlan?.checks || []).filter(check => check.Status !== 'pass').slice(0, 10))
const sourceApprovalGateChecks = computed(() => (status.value?.sourceApprovalGate?.checks || []).filter(check => check.Status !== 'pass').slice(0, 10))
const sourceSpendGateChecks = computed(() => (status.value?.sourceSpendGate?.checks || []).filter(check => check.Status !== 'pass'))
const dataforseoPilotReviewChecks = computed(() => (status.value?.dataforseoPilotReview?.checks || []).filter(check => check.Status !== 'pass'))
const sourceControlBlockedSteps = computed(() => (status.value?.sourceAcquisitionControlRun?.steps || []).filter(step => step.Status !== 'pass'))
const sourceSubscriptionDecisionRows = computed(() => (status.value?.sourceSubscriptionDecision?.rows || []))
const sourceNextActions = computed(() => (status.value?.sourceAcquisitionNextActions?.actions || []).filter(action => action.Status !== 'done').slice(0, 8))
function manifestCount(key) { return status.value?.handoffManifest?.counts?.[key] ?? '—' }
function formatDate(value) { return value ? new Date(value).toLocaleString() : '' }
onMounted(async () => {
  loading.value = true
  try {
    const res = await fetch('/api/export/status')
    status.value = res.ok ? await res.json() : null
  } finally {
    loading.value = false
  }
})
</script>

<style scoped src="../views/view.css" />
<style scoped>
.summary, .blocker-grid { display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:12px; margin-bottom:16px; }
.summary>div, .command-card, .outputs section, .handoff-card, .blocker-card, .readiness-card, .action-plan, .staging-checklist { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; }
.summary strong, .blocker-card strong { display:block; font-size:24px; }
.summary span, .blocker-card span { font-size:12px; color:var(--text-muted); }
.summary .ok strong, .blocker-card.ok strong { color:var(--positive); }
.summary .bad strong, .blocker-card.bad strong { color:var(--negative); }
.handoff-card { display:grid; grid-template-columns:minmax(0, .8fr) 1.2fr; gap:18px; margin-bottom:16px; }
.handoff-card.ready { border-color:var(--positive); }
.handoff-card.blocked { border-color:#fecaca; }
.handoff-card h2, .readiness-card h2, .action-plan h2, .staging-checklist h2 { margin:0 0 6px; font-size:16px; }
.handoff-card p { margin:5px 0; color:var(--text-secondary); font-size:12px; }
.handoff-card ul { margin:0; padding-left:18px; color:var(--text-secondary); font-size:12px; line-height:1.55; }
.readiness-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.readiness-card.ready { border-color:var(--positive); }
.readiness-card.blocked { border-color:#fecaca; }
.readiness-card p, .readiness-card ul { color:var(--text-secondary); font-size:12px; line-height:1.55; }
.readiness-card ul { margin:10px 0 0; padding-left:18px; }
.mini-table { width:100%; border-collapse:collapse; font-size:12px; margin-top:10px; }
.mini-table th, .mini-table td { border-bottom:1px solid var(--border); padding:6px 4px; text-align:left; }
.action-plan { display:grid; grid-template-columns:minmax(0,.45fr) minmax(0,1fr); gap:18px; margin-bottom:16px; }
.action-plan.ready { border-color:var(--positive); }
.action-plan.blocked { border-color:#fecaca; }
.action-plan p { color:var(--text-secondary); font-size:12px; line-height:1.55; }
.action-plan ol { margin:0; padding-left:20px; color:var(--text-secondary); font-size:12px; line-height:1.55; }
.action-plan li { margin-bottom:8px; }
.action-plan li span, .action-plan li em { display:block; }
.action-plan li em { color:var(--text-muted); font-style:normal; }
.staging-checklist { margin-bottom:16px; }
.staging-checklist.ready { border-color:var(--positive); }
.staging-checklist.blocked { border-color:#fecaca; }
.staging-checklist p { color:var(--text-secondary); font-size:12px; line-height:1.55; }
.command-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.command-card h2, .outputs h2 { font-size:16px; margin:0 0 8px; }
.command-card code { display:block; width:max-content; max-width:100%; background:#111827; color:#fff; border-radius:6px; padding:8px 10px; margin:6px 0; overflow:auto; }
.command-card p { color:var(--text-secondary); font-size:12px; line-height:1.5; margin:10px 0 0; }
.outputs { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.outputs ul { margin:0; padding-left:18px; font-size:12px; color:var(--text-secondary); line-height:1.7; }
.sku { font-family:monospace; font-size:12px; }
.empty-row { text-align:center; color:var(--text-muted); padding:28px!important; }
.table-note { font-size:12px; color:var(--text-muted); margin:10px 2px 0; }
@media (max-width: 900px) { .summary, .command-grid, .outputs, .handoff-card, .blocker-grid, .readiness-grid, .action-plan { grid-template-columns:1fr; } }
</style>
