Files
khadhroony-bot3/kb-app-demo-desktop/frontend/demo_execution_metadata.html
2026-08-09 12:19:06 +02:00

215 lines
22 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!-- file: kb-app-demo-desktop/frontend/demo_execution_metadata.html -->
<!-- version: 13 -->
<!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 sépare les trois familles metadata. Metaplex Token Metadata conserve ses scénarios synthétiques mais exécute sur Devnet les campagnes qualifiées de <code>pre.013</code> ; Token-2022 Token Metadata exécute sa campagne native de cinq opérations ; Solana Program Metadata exécute les neuf opérations stables de <code>ProgM6…</code> via deux parcours Devnet.</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 dexécution Metadata Devnet</button></h2>
<div class="accordion-collapse collapse" id="metadataGuideCollapse" data-bs-parent="#metadataGuideAccordion">
<div class="accordion-body">
<h3 class="h6">Metaplex Token Metadata</h3>
<ol class="mb-3">
<li>Utiliser les scénarios synthétiques uniquement pour inspecter les contrats et exigences.</li>
<li>Pour Devnet, choisir et préparer un profil persistant puis sélectionner une campagne qualifiée de <code>pre.013</code>.</li>
<li>Confirmer explicitement la création des fixtures et les soumissions autorisées du runner spécialisé.</li>
<li>Contrôler la fixture, les exécutions/probes et les postconditions dans les trois JsonViewer communs.</li>
</ol>
<h3 class="h6">Token-2022 Token Metadata</h3>
<ol class="mb-3">
<li>Choisir et préparer un profil Devnet persistant, autorisé à soumettre.</li>
<li>Contrôler les cinq opérations natives : Initialize, UpdateField, Emit, RemoveKey et UpdateAuthority.</li>
<li>Confirmer la création dun mint frais et lexécution complète de la campagne.</li>
<li>Contrôler les simulations, signatures, confirmations, snapshots stateful, return data Emit et matérialisations.</li>
</ol>
<h3 class="h6">Solana Program Metadata</h3>
<ol class="mb-2">
<li>Choisir et préparer un profil Devnet persistant, autorisé à soumettre.</li>
<li>Contrôler les deux parcours et leurs neuf étapes dans linventaire.</li>
<li>Confirmer la campagne complète : deux transferts de préfinancement puis neuf transactions <code>ProgM6…</code>.</li>
<li>Contrôler les simulations, signatures, confirmations, lectures avant/après, postconditions et snapshots matérialisés.</li>
</ol>
<div class="small text-muted">La campagne Solana Program Metadata est indivisible : elle crée des PDA frais et arrête immédiatement le parcours au premier échec ou à la première preuve manquante.</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">Campagnes Devnet qualifiées</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>
<div class="d-grid"><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="metadataMetaplexCampaignSelect">Campagne qualifiée</label>
<select class="form-select" id="metadataMetaplexCampaignSelect"></select>
<div class="mt-3" id="metadataMetaplexCampaignOutput"></div>
<div class="alert alert-warning mt-3">Les campagnes Devnet réutilisent directement les runners qualifiés de <code>pre.013</code>. Les opérations classées <code>unavailable</code> restent confinées aux probes simulation-only de Maintenance ou Use ; elles ne sont jamais exposées comme soumissions isolées.</div>
<div class="form-check mt-3">
<input class="form-check-input" id="metadataMetaplexCampaignOperatorConfirmed" type="checkbox">
<label class="form-check-label" for="metadataMetaplexCampaignOperatorConfirmed">Je confirme la création des fixtures et toutes les soumissions autorisées de la campagne</label>
</div>
<div class="d-grid mt-3"><button class="btn btn-danger" id="executeMetadataMetaplexCampaignButton" type="button">Exécuter la campagne Metaplex</button></div>
<div class="form-text">Le runner arrête la campagne au premier échec et conserve simulation, signature, confirmation, postconditions, matérialisation et idempotence selon son contrat.</div>
</div>
</div>
</div>
</div>
<div class="d-grid mt-3">
<button class="btn btn-primary" id="refreshMetadataScenariosButton" type="button">Recharger les contrats Metaplex</button>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" data-bs-target="#token2022MetadataCollapse" data-bs-toggle="collapse" type="button">Token-2022 Token Metadata</button>
</h2>
<div class="accordion-collapse collapse" id="token2022MetadataCollapse" data-bs-parent="#metadataExecutionAccordion">
<div class="accordion-body">
<label class="form-label" for="token2022MetadataProfileSelect">Profil Devnet</label>
<select class="form-select" id="token2022MetadataProfileSelect"></select>
<div class="form-text mb-3" id="token2022MetadataProfileHelp">Chargement du profil Devnet.</div>
<div class="d-grid"><button class="btn btn-outline-primary" id="prepareToken2022MetadataProfileButton" 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="token2022MetadataProfileStatusBadge">Non chargé</span></div>
<div class="mt-3" id="token2022MetadataProfileOutput"></div>
<div class="mt-3" id="token2022MetadataCampaignOutput"></div>
<div class="alert alert-warning mt-3">Cette campagne crée un mint Token-2022 frais avec Metadata Pointer, puis soumet exactement cinq opérations Token Metadata. Chaque mutation est simulée avant soumission et la campagne sarrête à la première preuve manquante.</div>
<div class="form-check mt-3">
<input class="form-check-input" id="token2022MetadataOperatorConfirmed" type="checkbox">
<label class="form-check-label" for="token2022MetadataOperatorConfirmed">Je confirme la création de la fixture et les cinq mutations Devnet</label>
</div>
<div class="d-grid mt-3"><button class="btn btn-danger" id="executeToken2022MetadataCampaignButton" type="button">Exécuter la campagne Token-2022 Metadata</button></div>
<div class="form-text">Le résultat réutilise les trois JsonViewer communs pour la fixture, les confirmations et les preuves ordonnées.</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" data-bs-target="#solanaProgramMetadataCollapse" data-bs-toggle="collapse" type="button">Solana Program Metadata</button>
</h2>
<div class="accordion-collapse collapse" id="solanaProgramMetadataCollapse" data-bs-parent="#metadataExecutionAccordion">
<div class="accordion-body">
<label class="form-label" for="solanaProgramMetadataProfileSelect">Profil Devnet</label>
<select class="form-select" id="solanaProgramMetadataProfileSelect"></select>
<div class="form-text mb-3" id="solanaProgramMetadataProfileHelp">Chargement du profil Devnet.</div>
<div class="d-grid"><button class="btn btn-outline-primary" id="prepareSolanaProgramMetadataProfileButton" 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="solanaProgramMetadataProfileStatusBadge">Non chargé</span></div>
<div class="mt-3" id="solanaProgramMetadataProfileOutput"></div>
<label class="form-label mt-3" for="solanaProgramMetadataScenarioSelect">Parcours</label>
<select class="form-select" id="solanaProgramMetadataScenarioSelect"></select>
<div class="mt-3" id="solanaProgramMetadataScenarioOutput"></div>
<div class="alert alert-warning mt-3">Cette campagne soumet onze transactions : deux transferts de préfinancement et les neuf opérations stables. Elle utilise des PDA frais et ne peut pas reprendre au milieu dun parcours.</div>
<div class="form-check mt-3">
<input class="form-check-input" id="solanaProgramMetadataOperatorConfirmed" type="checkbox">
<label class="form-check-label" for="solanaProgramMetadataOperatorConfirmed">Je confirme le préfinancement et les neuf mutations Devnet</label>
</div>
<div class="d-grid mt-3"><button class="btn btn-danger" id="executeSolanaProgramMetadataCampaignButton" type="button">Exécuter la campagne complète</button></div>
<div class="form-text">Le runner arrête la campagne dès quune simulation, une confirmation, une postcondition ou une matérialisation requise échoue.</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-xl-7">
<div class="d-flex align-items-center justify-content-between mb-2">
<h2 class="h5 mb-0">Résultats détaillés</h2>
<small class="text-body-secondary">Préflight, simulation, confirmation et preuves</small>
</div>
<div class="accordion shadow-sm mt-4" id="metadataExecutionDetailsAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="metadataPreflightHeading">
<button aria-controls="metadataPreflightCollapse" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#metadataPreflightCollapse" data-bs-toggle="collapse" type="button">Préflight et opérations</button>
</h2>
<div aria-labelledby="metadataPreflightHeading" class="accordion-collapse collapse" data-bs-parent="#metadataExecutionDetailsAccordion" id="metadataPreflightCollapse">
<div class="accordion-body">
<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>
<div class="accordion-item">
<h2 class="accordion-header" id="metadataSimulationHeading">
<button aria-controls="metadataSimulationCollapse" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#metadataSimulationCollapse" data-bs-toggle="collapse" type="button">Simulation et confirmation</button>
</h2>
<div aria-labelledby="metadataSimulationHeading" class="accordion-collapse collapse" data-bs-parent="#metadataExecutionDetailsAccordion" id="metadataSimulationCollapse">
<div class="accordion-body">
<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>
<div class="accordion-item">
<h2 class="accordion-header" id="metadataPostconditionsHeading">
<button aria-controls="metadataPostconditionsCollapse" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#metadataPostconditionsCollapse" data-bs-toggle="collapse" type="button">Postconditions et preuves</button>
</h2>
<div aria-labelledby="metadataPostconditionsHeading" class="accordion-collapse collapse" data-bs-parent="#metadataExecutionDetailsAccordion" id="metadataPostconditionsCollapse">
<div class="accordion-body">
<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 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>
<div class="card shadow-sm border-0 mt-4">
<div class="card-body">
<h2 class="h5 mb-2">Journal dexécution</h2>
<textarea class="form-control font-monospace" id="metadataExecutionLogOutput" readonly rows="12" spellcheck="false"></textarea>
</div>
</div>
</div>
</div>
</main>
<script type="module" src="ts/demo_execution_metadata.ts"></script>
</body>
</html>