155 lines
14 KiB
HTML
155 lines
14 KiB
HTML
<!-- file: kb-app-demo-desktop/frontend/demo_execution_metadata.html -->
|
||
<!-- version: 9 -->
|
||
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||
<link rel="icon" href="imgs/logo.png">
|
||
<link rel="stylesheet" href="sass/main.scss">
|
||
<title>Khadhroony Bot3 — Exécution Metadata Devnet</title>
|
||
</head>
|
||
|
||
<body>
|
||
<header class="app-header">
|
||
<nav class="navbar h-100 py-0 bg-dark text-light">
|
||
<div class="container-fluid px-4">
|
||
<div class="navbar-brand d-flex align-items-center"><img alt="Logo" src="imgs/logo.png" class="app-logo"><span class="ps-2 fs-4 fw-bold text-primary font-logo">Bot3 — <span class="badge text-bg-primary">Exécution Metadata Devnet</span></span></div>
|
||
<span class="badge text-bg-success" id="metadataStatusBadge">Prêt</span>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
<main class="app-main">
|
||
<div class="osb-scrollable pt-1 pb-4" data-simplebar>
|
||
<div class="container-fluid px-4 py-4">
|
||
<div class="alert alert-info">Cette fenêtre accueille les familles d’exécution metadata. Metaplex Token Metadata est la première famille ; SPL Token Metadata sera ajouté ultérieurement sans changer la frontière de la fenêtre.</div>
|
||
<div class="accordion shadow-sm mb-4" id="metadataGuideAccordion">
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header"><button class="accordion-button collapsed" data-bs-target="#metadataGuideCollapse" data-bs-toggle="collapse" type="button">Guide d’exécution Metaplex Devnet</button></h2>
|
||
<div class="accordion-collapse collapse" id="metadataGuideCollapse" data-bs-parent="#metadataGuideAccordion">
|
||
<div class="accordion-body">
|
||
<ol class="mb-2">
|
||
<li>Choisir un profil Devnet puis préparer sa base PostgreSQL.</li>
|
||
<li>Choisir le parcours Devnet puis son étape. Le parcours actuellement exécutable couvre <code>create</code> puis <code>update</code> sur un NFT classique.</li>
|
||
<li>Cliquer sur <strong>Préparer l’étape courante</strong> : l’intent, les lectures stateful et les postconditions sont générés ensemble.</li>
|
||
<li>Lancer d’abord une simulation. La soumission exige les deux confirmations explicites.</li>
|
||
<li>Contrôler le journal, le plan exact, la simulation RPC, la signature éventuelle et les états avant/après.</li>
|
||
</ol>
|
||
<div class="small text-muted">Les chaînes entre chevrons sont des placeholders non exécutables. Ne jamais les soumettre telles quelles.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row g-4">
|
||
<div class="col-12 col-xl-5">
|
||
<div class="accordion shadow-sm" id="metadataExecutionAccordion">
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header">
|
||
<button class="accordion-button" data-bs-target="#metaplexMetadataCollapse" data-bs-toggle="collapse" type="button">Metaplex Token Metadata</button>
|
||
</h2>
|
||
<div class="accordion-collapse collapse show" id="metaplexMetadataCollapse" data-bs-parent="#metadataExecutionAccordion">
|
||
<div class="accordion-body">
|
||
<div class="accordion" id="metaplexScenarioModeAccordion">
|
||
<div class="accordion-item">
|
||
<h3 class="accordion-header">
|
||
<button class="accordion-button" data-bs-target="#metaplexSyntheticCollapse" data-bs-toggle="collapse" type="button">Scénarios synthétiques</button>
|
||
</h3>
|
||
<div class="accordion-collapse collapse show" id="metaplexSyntheticCollapse" data-bs-parent="#metaplexScenarioModeAccordion">
|
||
<div class="accordion-body"><select class="form-select" id="metadataSyntheticScenarioSelect"></select></div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<h3 class="accordion-header">
|
||
<button class="accordion-button collapsed" data-bs-target="#metaplexDevnetCollapse" data-bs-toggle="collapse" type="button">Scénarios Devnet</button>
|
||
</h3>
|
||
<div class="accordion-collapse collapse" id="metaplexDevnetCollapse" data-bs-parent="#metaplexScenarioModeAccordion">
|
||
<div class="accordion-body">
|
||
<label class="form-label" for="metadataProfileSelect">Profil Devnet</label>
|
||
<select class="form-select" id="metadataProfileSelect"></select>
|
||
<div class="form-text mb-3" id="metadataProfileHelp">Chargement du profil Devnet.</div>
|
||
<label class="form-label" for="metadataDevnetScenarioSelect">Contrat de scénario</label>
|
||
<select class="form-select" id="metadataDevnetScenarioSelect"></select>
|
||
<div class="d-grid mt-3"><button class="btn btn-outline-primary" id="prepareMetadataProfileButton" type="button">Charger le profil et préparer la base</button></div>
|
||
<div class="d-flex justify-content-between align-items-center mt-3"><span class="small text-muted">État du profil</span><span class="badge text-bg-secondary" id="metadataProfileStatusBadge">Non chargé</span></div>
|
||
<div class="mt-3" id="metadataProfileOutput"></div>
|
||
<label class="form-label mt-3" for="metadataStepSelect">Étape du parcours</label>
|
||
<select class="form-select" id="metadataStepSelect"></select>
|
||
<div class="d-flex gap-2 mt-2">
|
||
<button class="btn btn-outline-secondary flex-fill" id="previousMetadataStepButton" type="button">Étape précédente</button>
|
||
<button class="btn btn-outline-secondary flex-fill" id="nextMetadataStepButton" type="button">Étape suivante</button>
|
||
</div>
|
||
<div class="d-grid mt-2"><button class="btn btn-outline-success" id="prepareMetadataScenarioStepButton" type="button">Préparer l’étape courante</button></div>
|
||
<div class="form-text">Le scénario remplit ensemble l’intent, les lectures avant/après et les cibles de matérialisation. Les étapes non encore préparables sont refusées explicitement.</div>
|
||
<label class="form-label mt-3" for="metadataOperationJson">Intent Metaplex typé</label>
|
||
<textarea class="form-control font-monospace" id="metadataOperationJson" rows="12" spellcheck="false"></textarea>
|
||
<label class="form-label mt-3" for="metadataPreflightReadsJson">Lectures stateful avant simulation</label>
|
||
<textarea class="form-control font-monospace" id="metadataPreflightReadsJson" rows="4" spellcheck="false">[]</textarea>
|
||
<label class="form-label mt-3" for="metadataPostconditionReadsJson">Lectures stateful après confirmation</label>
|
||
<textarea class="form-control font-monospace" id="metadataPostconditionReadsJson" rows="4" spellcheck="false">[]</textarea>
|
||
<div class="form-check mt-3">
|
||
<input class="form-check-input" id="metadataMaterializeInput" type="checkbox" checked>
|
||
<label class="form-check-label" for="metadataMaterializeInput">Matérialiser les snapshots Metaplex confirmés</label>
|
||
<div class="form-text">Après confirmation, relit les comptes déclarés, les décode canoniquement et produit les projections d’état. Aucun fetch URI off-chain.</div>
|
||
</div>
|
||
<div class="form-check mt-3">
|
||
<input class="form-check-input" id="metadataOperatorConfirmed" type="checkbox">
|
||
<label class="form-check-label" for="metadataOperatorConfirmed">Je confirme explicitement la soumission</label>
|
||
</div>
|
||
<div class="d-grid gap-2 mt-3">
|
||
<button class="btn btn-outline-primary" id="simulateMetadataButton" type="button">Simuler sur Devnet</button>
|
||
<button class="btn btn-primary" id="submitMetadataButton" type="button">Soumettre sur Devnet</button>
|
||
</div>
|
||
<div class="alert alert-warning mt-3 mb-0">La simulation appelle réellement le RPC Devnet. La soumission reste désactivée tant que l’opérateur ne l’autorise et ne la confirme pas explicitement.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="d-grid mt-3">
|
||
<button class="btn btn-primary" id="refreshMetadataScenariosButton" type="button">Recharger les contrats</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card shadow-sm border-0 mt-4">
|
||
<div class="card-body">
|
||
<h2 class="h5 mb-2">Journal d’exécution</h2>
|
||
<textarea class="form-control font-monospace" id="metadataExecutionLogOutput" readonly rows="12" spellcheck="false"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="card shadow-sm border-0 mt-4">
|
||
<div class="card-body">
|
||
<h2 class="h5">Exigences</h2>
|
||
<dl class="row mb-0" id="metadataRequirements"></dl>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-xl-7">
|
||
<div class="card shadow-sm border-0 mb-4">
|
||
<div class="card-body">
|
||
<h2 class="h5">Préflight et opérations</h2>
|
||
<textarea class="form-control font-monospace" data-json-viewer="true" id="metadataPreflightOutput" readonly rows="14">{"title":"Préflight et opérations","status":"idle","message":"Aucun résultat."}</textarea>
|
||
</div>
|
||
</div>
|
||
<div class="card shadow-sm border-0 mb-4">
|
||
<div class="card-body">
|
||
<h2 class="h5">Simulation et confirmation</h2>
|
||
<textarea class="form-control font-monospace" data-json-viewer="true" id="metadataSimulationOutput" readonly rows="16">{"title":"Simulation et confirmation","status":"idle","message":"Aucune simulation."}</textarea>
|
||
</div>
|
||
</div>
|
||
<div class="card shadow-sm border-0">
|
||
<div class="card-body">
|
||
<h2 class="h5">Postconditions et preuves</h2>
|
||
<textarea class="form-control font-monospace" data-json-viewer="true" id="metadataPostconditionsOutput" readonly rows="16">{"title":"Postconditions et preuves","status":"idle","message":"Aucune preuve."}</textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<script type="module" src="ts/demo_execution_metadata.ts"></script>
|
||
</body>
|
||
|
||
</html> |