Files
khadhroony-bot3/kb-app-demo-desktop/frontend/demo_core_extraction.html
2026-07-26 01:55:35 +02:00

161 lines
12 KiB
HTML

<!-- file: kb_app_demo/frontend/demo_core_extraction.html -->
<!-- version: 4 -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Khadhroony Bot2 - Extraction canonical vers core</title>
<link rel="stylesheet" href="sass/main.scss" />
</head>
<body class="bg-body-tertiary">
<header class="app-header">
<nav class="navbar navbar-expand-lg h-100 py-0 bg-light text-dark">
<div class="container my-0">
<div class="navbar-brand d-flex align-items-center" aria-label="Khadhroony Bot3">
<img alt="Logo" src="imgs/logo.png" class="app-logo" />
<span class="ps-2 fs-4 fw-bold text-primary font-logo">Extraction core</span>
</a>
<div class="ms-auto d-flex align-items-center gap-2">
<span id="coreExtractionVersionBadge" class="badge text-bg-info">Version —</span>
<span id="coreExtractionStatusBadge" class="badge text-bg-secondary">Initialisation</span>
<button id="openRawDiagnosticsButton" class="btn btn-sm btn-outline-secondary" type="button">Diagnostic raw</button>
<button id="openCoreDiagnosticsButton" class="btn btn-sm btn-outline-secondary" type="button">Diagnostic core</button>
<button id="openReplayCandidatesButton" class="btn btn-sm btn-outline-primary" type="button">Candidats replay</button>
<button id="cancelCoreExtractionButton" class="btn btn-sm btn-outline-danger" type="button" disabled>Arrêter</button>
</div>
</div>
</nav>
</header>
<main class="app-main">
<div class="osb-scrollable pt-1 pb-4" data-simplebar>
<div class="container py-4">
<div class="card shadow-sm border-0 mb-4">
<div class="card-body">
<h1 class="h3 card-title">Extraction transactionnelle canonical vers core</h1>
<p class="text-body-secondary mb-0">Chaque transaction canonique sélectionnée est validée, normalisée dans les tables core et enregistrée dans le ledger de traitement au sein d'une seule transaction PostgreSQL.</p>
</div>
</div>
<div class="accordion shadow-sm" id="coreExtractionAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="coreExtractionSettingsHeading">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#coreExtractionSettingsCollapse" aria-expanded="true" aria-controls="coreExtractionSettingsCollapse">Paramètres communs</button>
</h2>
<div id="coreExtractionSettingsCollapse" class="accordion-collapse collapse show" aria-labelledby="coreExtractionSettingsHeading" data-bs-parent="#coreExtractionAccordion">
<div class="accordion-body">
<div class="row g-3 align-items-end">
<div class="col-6 col-lg-4">
<label class="form-label" for="coreExtractionLimitInput">Transactions maximales</label>
<input id="coreExtractionLimitInput" class="form-control" type="number" min="1" />
</div>
<div class="col-6 col-lg-4">
<label class="form-label" for="coreExtractionConcurrencyInput">Concurrence</label>
<input id="coreExtractionConcurrencyInput" class="form-control" type="number" min="1" />
</div>
<div class="col-12 col-lg-4">
<div class="form-check form-switch mb-2">
<input id="coreExtractionForceReplayInput" class="form-check-input" type="checkbox" role="switch" />
<label class="form-check-label" for="coreExtractionForceReplayInput">Forcer le remplacement des lignes déjà à jour</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="coreExtractionSignaturesHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#coreExtractionSignaturesCollapse" aria-expanded="false" aria-controls="coreExtractionSignaturesCollapse">Signatures explicites</button>
</h2>
<div id="coreExtractionSignaturesCollapse" class="accordion-collapse collapse" aria-labelledby="coreExtractionSignaturesHeading" data-bs-parent="#coreExtractionAccordion">
<div class="accordion-body">
<label class="form-label" for="coreExtractionSignaturesTextarea">Signatures canoniques déjà stockées, une par ligne</label>
<textarea id="coreExtractionSignaturesTextarea" class="form-control font-monospace mb-3" rows="10" placeholder="5abc...&#10;4def..."></textarea>
<button class="btn btn-primary core-extraction-start-button" type="button" data-core-extraction-mode="signatures">Extraire les signatures</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="coreExtractionPendingHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#coreExtractionPendingCollapse" aria-expanded="false" aria-controls="coreExtractionPendingCollapse">Transactions en attente</button>
</h2>
<div id="coreExtractionPendingCollapse" class="accordion-collapse collapse" aria-labelledby="coreExtractionPendingHeading" data-bs-parent="#coreExtractionAccordion">
<div class="accordion-body">
<p class="text-body-secondary">Sélectionne les transactions canoniques dont l'état de traitement est <code>received</code>, dans l'ordre des slots.</p>
<button class="btn btn-primary core-extraction-start-button" type="button" data-core-extraction-mode="pending">Extraire les transactions en attente</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="coreExtractionSlotsHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#coreExtractionSlotsCollapse" aria-expanded="false" aria-controls="coreExtractionSlotsCollapse">Plage de slots</button>
</h2>
<div id="coreExtractionSlotsCollapse" class="accordion-collapse collapse" aria-labelledby="coreExtractionSlotsHeading" data-bs-parent="#coreExtractionAccordion">
<div class="accordion-body">
<div class="row g-3 mb-3">
<div class="col-12 col-md-6">
<label class="form-label" for="coreExtractionMinSlotInput">Slot minimum inclusif</label>
<input id="coreExtractionMinSlotInput" class="form-control" type="number" min="0" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="coreExtractionMaxSlotInput">Slot maximum inclusif</label>
<input id="coreExtractionMaxSlotInput" class="form-control" type="number" min="0" />
</div>
</div>
<button class="btn btn-primary core-extraction-start-button" type="button" data-core-extraction-mode="slot_range">Extraire la plage de slots</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="coreExtractionProgramHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#coreExtractionProgramCollapse" aria-expanded="false" aria-controls="coreExtractionProgramCollapse">Programme déjà indexé dans core</button>
</h2>
<div id="coreExtractionProgramCollapse" class="accordion-collapse collapse" aria-labelledby="coreExtractionProgramHeading" data-bs-parent="#coreExtractionAccordion">
<div class="accordion-body">
<p class="text-body-secondary">Sélectionne les transactions raw ayant déjà au moins une instruction core résolue pour ce programme. Ce mode sert aux replays après changement de version ou de hash.</p>
<label class="form-label" for="coreExtractionProgramIdInput">Program ID</label>
<input id="coreExtractionProgramIdInput" class="form-control font-monospace mb-3" />
<button class="btn btn-primary core-extraction-start-button" type="button" data-core-extraction-mode="program_id">Extraire par programme</button>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="coreExtractionLogHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#coreExtractionLogCollapse" aria-expanded="false" aria-controls="coreExtractionLogCollapse">Journal et résultat</button>
</h2>
<div id="coreExtractionLogCollapse" class="accordion-collapse collapse" aria-labelledby="coreExtractionLogHeading" data-bs-parent="#coreExtractionAccordion">
<div class="accordion-body">
<div class="d-flex justify-content-between align-items-center mb-2">
<h3 class="h6 mb-0">Journal</h3><button id="clearCoreExtractionLogButton" class="btn btn-sm btn-outline-secondary" type="button">Effacer</button>
</div>
<textarea id="coreExtractionLogOutput" class="form-control font-monospace mb-3" rows="15" readonly>Aucune campagne exécutée.</textarea>
<h3 class="h6">Résumé JSON</h3>
<textarea id="coreExtractionSummaryOutput" class="form-control font-monospace" rows="16" readonly data-json-viewer="true">Aucun résultat.</textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="app-footer bg-dark text-light">
<div class="container h-100 d-flex align-items-center">
<div class="row flex-grow-1 align-items-center">
<div class="col-12 text-center text-small my-1 my-md-0">&copy; 2026 SASEDEV</div>
</div>
</div>
</footer>
<script type="module" src="ts/demo_core_extraction.ts" defer></script>
</body>
</html>