Files
khadhroony-bot3/kb-app-demo-desktop/frontend/demo_execution_spl.html
2026-07-25 23:57:48 +02:00

433 lines
43 KiB
HTML
Raw 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_spl.html -->
<!-- version: 8 -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Exécution SPL Devnet</title>
<link href="sass/main.scss" rel="stylesheet" />
</head>
<body class="app-body">
<header class="app-header bg-dark text-light">
<nav class="container-fluid h-100 d-flex align-items-center justify-content-between px-4">
<div class="d-flex align-items-center gap-3">
<div class="navbar-brand d-flex align-items-center mb-0">
<img alt="Logo" src="imgs/logo.png" class="app-logo" />
<span class="ps-2 fs-4 fw-bold text-primary font-logo">Bot3</span>
</div>
<div>
<h1 class="h4 mb-0">Exécution SPL Devnet</h1>
<small class="text-light-emphasis">Memo, SPL Token classique, Token-2022 et ATA — simulation-first et replay post-exécution</small>
</div>
</div>
<div class="d-flex align-items-center gap-2">
<span class="badge text-bg-success" id="executionStatusBadge">Prêt</span>
<button class="btn btn-sm btn-outline-warning" disabled="" id="cancelExecutionButton" type="button">Annuler</button>
</div>
</nav>
</header>
<main class="app-main">
<div class="osb-scrollable pt-1 pb-4" data-simplebar="">
<div class="container-fluid py-4 px-4">
<div class="alert alert-warning" role="alert">
Cette fenêtre est limitée à Devnet. La clé privée du wallet source reste dans le backend Rust et nest jamais transmise à la WebView.
</div>
<div class="row g-4" id="splExecutionWorkspace">
<div class="col-12 col-xl-5" id="splExecutionControls">
<div class="accordion shadow-sm" id="walletPreparationAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="walletPreparationHeading"><button aria-controls="walletPreparationCollapse" aria-expanded="true" class="accordion-button" data-bs-target="#walletPreparationCollapse" data-bs-toggle="collapse" type="button"><span class="d-flex flex-wrap align-items-center justify-content-between gap-2 w-100 me-2"><span>Préparation commune du wallet Devnet</span><span class="badge text-bg-info">Pré-requis</span></span></button></h2>
<div aria-labelledby="walletPreparationHeading" class="accordion-collapse collapse show" id="walletPreparationCollapse">
<div class="accordion-body">
<div class="mb-3">
<label class="form-label" for="executionProfileSelect">Profil Devnet</label>
<select class="form-select" id="executionProfileSelect"></select>
<div class="form-text" id="executionProfileHelp"></div>
</div>
<div class="mb-3">
<label class="form-label" for="executionRecipientInput">Destinataire</label>
<div class="input-group">
<input autocomplete="off" class="form-control font-monospace" id="executionRecipientInput" type="text" />
<button class="btn btn-outline-secondary" id="generateRecipientButton" type="button">Générer</button>
</div>
<div class="form-text">Une adresse générée ici est jetable : sa clé privée nest ni conservée ni exposée.</div>
</div>
<div class="row g-3">
<div class="col-12 col-md-6">
<label class="form-label" for="executionLamportsInput">Lamports transférés</label>
<input class="form-control" id="executionLamportsInput" min="1" step="1" type="number" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="executionAirdropInput">Airdrop maximal</label>
<input class="form-control" id="executionAirdropInput" min="0" step="1" type="number" value="0" />
</div>
</div>
<hr />
<div class="form-check form-switch mb-2">
<input class="form-check-input" id="executionOperatorConfirmedInput" type="checkbox" />
<label class="form-check-label" for="executionOperatorConfirmedInput">Confirmation opérateur explicite</label>
</div>
<div class="form-check form-switch mb-2">
<input class="form-check-input" id="executionForceReplayInput" type="checkbox" />
<label class="form-check-label" for="executionForceReplayInput">Forcer le replay post-exécution</label>
</div>
<div class="form-check form-switch mb-3">
<input class="form-check-input" id="executionMaterializeInput" type="checkbox" />
<label class="form-check-label" for="executionMaterializeInput">Matérialiser après décodage</label>
</div>
<div class="d-grid gap-2 d-md-flex">
<button class="btn btn-outline-primary flex-fill" id="simulateExecutionButton" type="button">Simuler uniquement</button>
<button class="btn btn-danger flex-fill" id="submitExecutionButton" type="button">Signer et envoyer</button>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex align-items-center justify-content-between mt-4 mb-2">
<h2 class="h5 mb-0">Exécutions par décodeur</h2><small class="text-body-secondary">Ouvrir une seule famille à la fois</small>
</div>
<div class="accordion shadow-sm mt-4" id="decoderExecutionAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="splMemoDecoderHeading"><button aria-controls="splMemoDecoderCollapse" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#splMemoDecoderCollapse" data-bs-toggle="collapse" type="button"><span class="d-flex flex-wrap align-items-center justify-content-between gap-2 w-100 me-2"><span>Décodeur spl_memo — Memo v4</span><span class="badge text-bg-primary">Exécutable</span></span></button></h2>
<div aria-labelledby="splMemoDecoderHeading" class="accordion-collapse collapse" data-bs-parent="#decoderExecutionAccordion" id="splMemoDecoderCollapse">
<div class="accordion-body">
<div class="mb-3">
<label class="form-label" for="memoMessageInput">Annotation UTF-8 exacte</label>
<textarea class="form-control" id="memoMessageInput" maxlength="566" rows="5">khadhroony-bot2 Memo v4 validation</textarea>
<div class="form-text">566 octets UTF-8 maximum. La matérialisation `transaction_annotation` et le second replay didempotence sont obligatoires après envoi.</div>
</div>
<div class="form-check form-switch mb-3">
<input checked="" class="form-check-input" id="memoWalletSignerInput" type="checkbox" />
<label class="form-check-label" for="memoWalletSignerInput">Inclure le wallet comme signer Memo readonly</label>
</div>
<div class="alert alert-secondary py-2 small" role="note">
Ce parcours réutilise le profil, la confirmation opérateur et loption de force replay du panneau System ci-dessus. Aucune clé privée ne traverse la WebView.
</div>
<div class="d-grid gap-2 d-md-flex">
<button class="btn btn-outline-info flex-fill" id="simulateMemoButton" type="button">Simuler Memo</button>
<button class="btn btn-danger flex-fill" id="submitMemoButton" type="button">Signer et envoyer Memo</button>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="splTokenDecoderHeading"><button aria-controls="splTokenDecoderCollapse" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#splTokenDecoderCollapse" data-bs-toggle="collapse" type="button"><span class="d-flex flex-wrap align-items-center justify-content-between gap-2 w-100 me-2"><span>Décodeur spl_token — TransferChecked</span><span class="badge text-bg-primary">Exécutable</span></span></button></h2>
<div aria-labelledby="splTokenDecoderHeading" class="accordion-collapse collapse" data-bs-parent="#decoderExecutionAccordion" id="splTokenDecoderCollapse">
<div class="accordion-body">
<div class="alert alert-secondary py-2 small" role="note">
Le mint et les decimals sont explicites. Le préflight vérifie les deux comptes, le solde et lautorité avant toute simulation. Lenvoi réutilise le profil et la confirmation opérateur communs.
</div>
<div class="mb-3">
<label class="form-label" for="tokenSourceInput">Compte source</label>
<input autocomplete="off" class="form-control font-monospace" id="tokenSourceInput" type="text" />
</div>
<div class="mb-3">
<label class="form-label" for="tokenMintInput">Mint</label>
<input autocomplete="off" class="form-control font-monospace" id="tokenMintInput" type="text" />
</div>
<div class="mb-3">
<label class="form-label" for="tokenDestinationInput">Compte destination</label>
<input autocomplete="off" class="form-control font-monospace" id="tokenDestinationInput" type="text" />
</div>
<div class="mb-3">
<label class="form-label" for="tokenAuthorityInput">Autorité simple</label>
<input autocomplete="off" class="form-control font-monospace" id="tokenAuthorityInput" type="text" />
<div class="form-text">Doit correspondre au wallet persistant du profil pour un envoi.</div>
</div>
<div class="row g-3 mb-3">
<div class="col-12 col-md-7">
<label class="form-label" for="tokenAmountRawInput">Montant brut exact</label>
<input class="form-control font-monospace" id="tokenAmountRawInput" inputmode="numeric" type="text" value="1" />
</div>
<div class="col-12 col-md-5">
<label class="form-label" for="tokenDecimalsInput">Decimals</label>
<input class="form-control" id="tokenDecimalsInput" max="255" min="0" step="1" type="number" value="9" />
</div>
</div>
<div class="d-grid gap-2 d-md-flex">
<button class="btn btn-outline-primary flex-fill" id="simulateTokenButton" type="button">Préflight et simuler</button>
<button class="btn btn-danger flex-fill" id="submitTokenButton" type="button">Signer et envoyer Token</button>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="splAtaDecoderHeading"><button aria-controls="splAtaDecoderCollapse" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#splAtaDecoderCollapse" data-bs-toggle="collapse" type="button"><span class="d-flex flex-wrap align-items-center justify-content-between gap-2 w-100 me-2"><span>Décodeur spl_associated_token_account — Create / CreateIdempotent</span><span class="badge text-bg-primary">Exécutable</span></span></button></h2>
<div aria-labelledby="splAtaDecoderHeading" class="accordion-collapse collapse" data-bs-parent="#decoderExecutionAccordion" id="splAtaDecoderCollapse">
<div class="accordion-body">
<div class="row g-3 mb-3">
<div class="col-12 col-md-6">
<label class="form-label" for="ataTokenProgramSelect">Token Program cible</label>
<select class="form-select" id="ataTokenProgramSelect">
<option value="classic">SPL Token classique</option>
<option value="token_2022">Token-2022</option>
</select>
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="ataModeSelect">Mode</label>
<select class="form-select" id="ataModeSelect">
<option value="create_idempotent">CreateIdempotent</option>
<option value="create">Create</option>
</select>
</div>
</div>
<div class="mb-3">
<label class="form-label" for="ataMintInput">Mint</label>
<input autocomplete="off" class="form-control font-monospace" id="ataMintInput" type="text" />
</div>
<div class="mb-3">
<label class="form-label" for="ataPayerInput">Payer readonly</label>
<input class="form-control font-monospace" id="ataPayerInput" readonly="" type="text" />
</div>
<div class="mb-3">
<label class="form-label" for="ataWalletOwnerInput">Wallet owner readonly</label>
<input class="form-control font-monospace" id="ataWalletOwnerInput" readonly="" type="text" />
</div>
<div class="mb-3">
<label class="form-label" for="ataDerivedInput">ATA dérivé readonly</label>
<input class="form-control font-monospace" id="ataDerivedInput" readonly="" type="text" />
<div class="form-text">Actualisé depuis le backend avec les seeds wallet, Token Program et mint.</div>
</div>
<div class="d-grid gap-2 d-md-flex">
<button class="btn btn-outline-secondary flex-fill" id="deriveAtaButton" type="button">Dériver</button>
<button class="btn btn-outline-primary flex-fill" id="simulateAtaButton" type="button">Préflight et simuler</button>
<button class="btn btn-danger flex-fill" id="submitAtaButton" type="button">Confirmer et envoyer</button>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="splToken2022DecoderHeading"><button aria-controls="splToken2022DecoderCollapse" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#splToken2022DecoderCollapse" data-bs-toggle="collapse" type="button"><span class="d-flex flex-wrap align-items-center justify-content-between gap-2 w-100 me-2"><span>Exécution spl_token_2022 — scénarios publics</span><span class="badge text-bg-success">Exécutable</span></span></button></h2>
<div aria-labelledby="splToken2022DecoderHeading" class="accordion-collapse collapse" data-bs-parent="#decoderExecutionAccordion" id="splToken2022DecoderCollapse">
<div class="accordion-body">
<div class="alert alert-info">Chaque opération est simulée sur le message exact avant toute signature. Les scénarios sont indépendants et réutilisent la fixture chargée dans les deux terminaux.</div>
<div class="d-grid mb-3"><button class="btn btn-outline-secondary" id="loadToken2022FixtureButton" type="button">Charger la fixture Token-2022</button></div>
<div class="form-text mb-3" id="token2022FixtureHelp">Aucune fixture chargée.</div>
<div class="mb-3"><label class="form-label" for="token2022ScenarioSelect">Scénario</label><select class="form-select" id="token2022ScenarioSelect">
<option value="token_2022_mint_to_checked">MintToChecked</option>
<option value="token_2022_transfer_checked">TransferChecked</option>
<option value="token_2022_approve_checked">ApproveChecked</option>
<option value="token_2022_revoke">Revoke</option>
<option value="token_2022_burn_checked">BurnChecked</option>
<option value="token_2022_freeze_account">FreezeAccount</option>
<option value="token_2022_thaw_account">ThawAccount</option>
<option value="token_2022_close_destination">CloseAccount</option>
</select></div>
<div class="mb-3"><label class="form-label" for="token2022SourceInput">Compte source / compte cible</label><input class="form-control font-monospace" id="token2022SourceInput" type="text" /></div>
<div class="mb-3"><label class="form-label" for="token2022MintInput">Mint Token-2022</label><input class="form-control font-monospace" id="token2022MintInput" type="text" /></div>
<div class="mb-3"><label class="form-label" for="token2022DestinationInput">Compte destination / destination lamports</label><input class="form-control font-monospace" id="token2022DestinationInput" type="text" /></div>
<div class="mb-3"><label class="form-label" for="token2022DelegateInput">Delegate</label><input class="form-control font-monospace" id="token2022DelegateInput" type="text" /></div>
<div class="mb-3"><label class="form-label" for="token2022AuthorityInput">Autorité</label><input class="form-control font-monospace" id="token2022AuthorityInput" type="text" /></div>
<div class="mb-3"><label class="form-label" for="token2022FreezeAuthorityInput">Freeze authority</label><input class="form-control font-monospace" id="token2022FreezeAuthorityInput" type="text" /></div>
<div class="row g-3 mb-3">
<div class="col-8"><label class="form-label" for="token2022AmountInput">Montant brut</label><input class="form-control" id="token2022AmountInput" type="text" value="1" /></div>
<div class="col-4"><label class="form-label" for="token2022DecimalsInput">Décimales</label><input class="form-control" id="token2022DecimalsInput" max="255" min="0" type="number" value="9" /></div>
</div>
<div class="d-grid gap-2 d-md-flex">
<button class="btn btn-outline-primary flex-fill" id="simulateToken2022Button" type="button">Préflight et simuler</button>
<button class="btn btn-danger flex-fill" id="submitToken2022Button" type="button">Confirmer et envoyer</button>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="splElgamalRegistryDecoderHeading"><button aria-controls="splElgamalRegistryDecoderCollapse" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#splElgamalRegistryDecoderCollapse" data-bs-toggle="collapse" type="button"><span class="d-flex flex-wrap align-items-center justify-content-between gap-2 w-100 me-2"><span>Décodeur spl_elgamal_registry — ElGamal Registry</span><span class="badge text-bg-primary">Plan exact</span></span></button></h2>
<div aria-labelledby="splElgamalRegistryDecoderHeading" class="accordion-collapse collapse" data-bs-parent="#decoderExecutionAccordion" id="splElgamalRegistryDecoderCollapse">
<div class="accordion-body">
<div class="alert alert-info">Première démo : dériver le Registry PDA et construire le plan exact avec un Proof Context State existant.</div>
<div class="mb-3"><label class="form-label" for="elgamalFeePayerInput">Fee payer</label><input class="form-control font-monospace" id="elgamalFeePayerInput" type="text" /></div>
<div class="mb-3"><label class="form-label" for="elgamalOwnerInput">Owner du registre</label><input class="form-control font-monospace" id="elgamalOwnerInput" type="text" /></div>
<div class="mb-3"><label class="form-label" for="elgamalOperationSelect">Opération</label><select class="form-select" id="elgamalOperationSelect">
<option value="create_registry">CreateRegistry</option>
<option value="update_registry">UpdateRegistry</option>
</select></div>
<div class="mb-3"><label class="form-label" for="elgamalProofContextInput">Proof Context State account</label><input class="form-control font-monospace" id="elgamalProofContextInput" type="text" /></div><button class="btn btn-outline-primary w-100" id="buildElgamalRegistryPlanButton" type="button">Construire le plan Registry</button>
</div>
</div>
</div>
</div>
<div class="alert alert-secondary mt-4 mb-0">
<strong>Scénarios avec preuve.</strong> CreateRegistry, UpdateRegistry et ConfigureAccountWithRegistry restent dans le panneau ElGamal/Confidential et exigent un Proof Context State valide. Ils ne sont pas présentés comme des scénarios publics exécutables.
</div>
</div>
<div class="col-12 col-xl-7" id="splExecutionResults">
<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">Plan, simulation, confirmation et journaux métier</small>
</div>
<div class="accordion mt-4" id="executionDetailsAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" data-bs-target="#executionPlanCollapse" data-bs-toggle="collapse" type="button">Plan exact</button>
</h2>
<div class="accordion-collapse collapse" data-bs-parent="#executionDetailsAccordion" id="executionPlanCollapse">
<div class="accordion-body">
<textarea class="form-control font-monospace" id="executionPlanOutput" readonly="" rows="16">Aucun plan.</textarea>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" data-bs-target="#executionSimulationCollapse" data-bs-toggle="collapse" type="button">Simulation exacte</button>
</h2>
<div class="accordion-collapse collapse" data-bs-parent="#executionDetailsAccordion" id="executionSimulationCollapse">
<div class="accordion-body">
<textarea class="form-control font-monospace" id="executionSimulationOutput" readonly="" rows="16">Aucune simulation.</textarea>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" data-bs-target="#executionDiagnosticsCollapse" data-bs-toggle="collapse" type="button">Confirmation et replay</button>
</h2>
<div class="accordion-collapse collapse" data-bs-parent="#executionDetailsAccordion" id="executionDiagnosticsCollapse">
<div class="accordion-body">
<textarea class="form-control font-monospace" id="executionDiagnosticsOutput" readonly="" rows="16">Aucun diagnostic.</textarea>
</div>
</div>
</div>
</div>
<div class="accordion shadow-sm mt-4" id="splBusinessJournalsAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="splTokenJournalHeading"><button aria-controls="splTokenJournalCollapse" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#splTokenJournalCollapse" data-bs-toggle="collapse" type="button">Journal métier SPL Token</button></h2>
<div aria-labelledby="splTokenJournalHeading" class="accordion-collapse collapse" data-bs-parent="#splBusinessJournalsAccordion" id="splTokenJournalCollapse">
<div class="accordion-body p-0" id="splTokenJournalHost">
<div class="card border-0 rounded-0">
<div class="card-body">
<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
<div>
<h2 class="h5 mb-0">Journal métier SPL Token</h2>
<div class="form-text">Événements commités uniquement, sans solde final reconstruit ni OHLC.</div>
</div>
<button class="btn btn-sm btn-outline-primary" id="refreshTokenJournalButton" type="button">Actualiser</button>
</div>
<div class="row g-2 mb-3">
<div class="col-12 col-lg-6">
<label class="form-label" for="tokenJournalSignatureInput">Signature contient</label>
<input class="form-control font-monospace" id="tokenJournalSignatureInput" type="text" />
</div>
<div class="col-12 col-lg-6">
<label class="form-label" for="tokenJournalMintInput">Mint exact</label>
<input class="form-control font-monospace" id="tokenJournalMintInput" type="text" />
</div>
<div class="col-12 col-lg-6">
<label class="form-label" for="tokenJournalAccountInput">Compte exact</label>
<input class="form-control font-monospace" id="tokenJournalAccountInput" type="text" />
</div>
<div class="col-6 col-lg-3">
<label class="form-label" for="tokenJournalFamilySelect">Famille</label>
<select class="form-select" id="tokenJournalFamilySelect">
<option value="">Toutes</option>
<option value="token_account">token_account</option>
<option value="admin">admin</option>
<option value="risk">risk</option>
</select>
</div>
<div class="col-6 col-lg-3">
<label class="form-label" for="tokenJournalLimitInput">Limite</label>
<input class="form-control" id="tokenJournalLimitInput" max="500" min="1" step="1" type="number" value="100" />
</div>
<div class="col-12">
<label class="form-label" for="tokenJournalOperationInput">Opération exacte</label>
<input class="form-control font-monospace" id="tokenJournalOperationInput" placeholder="transfer_checked" type="text" />
</div>
</div>
<div class="table-responsive">
<table class="table table-sm table-hover align-middle">
<thead>
<tr>
<th>Slot</th>
<th>Opération</th>
<th>Famille</th>
<th>Montant brut</th>
<th>Signature</th>
</tr>
</thead>
<tbody id="tokenJournalRows">
<tr>
<td class="text-body-secondary" colspan="5">Aucune lecture.</td>
</tr>
</tbody>
</table>
</div>
<label class="form-label" for="tokenJournalDetailOutput">Détail JSON de la ligne sélectionnée</label>
<textarea class="form-control font-monospace" id="tokenJournalDetailOutput" readonly="" rows="14">Aucun événement sélectionné.</textarea>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="ataLifecycleJournalHeading"><button aria-controls="ataLifecycleJournalCollapse" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#ataLifecycleJournalCollapse" data-bs-toggle="collapse" type="button">Journal lifecycle ATA</button></h2>
<div aria-labelledby="ataLifecycleJournalHeading" class="accordion-collapse collapse" data-bs-parent="#splBusinessJournalsAccordion" id="ataLifecycleJournalCollapse">
<div class="accordion-body p-0" id="ataLifecycleJournalHost">
<div class="card border-0 rounded-0">
<div class="card-body">
<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
<div>
<h2 class="h5 mb-0">Journal lifecycle ATA</h2>
<div class="form-text">Création, réutilisation idempotente et récupération nested, sans duplication des CPI Token.</div>
</div>
<button class="btn btn-sm btn-outline-primary" id="refreshAtaJournalButton" type="button">Actualiser</button>
</div>
<div class="row g-2 mb-3">
<div class="col-12 col-lg-6">
<label class="form-label" for="ataJournalSignatureInput">Signature contient</label>
<input class="form-control font-monospace" id="ataJournalSignatureInput" type="text" />
</div>
<div class="col-12 col-lg-6">
<label class="form-label" for="ataJournalMintInput">Mint exact</label>
<input class="form-control font-monospace" id="ataJournalMintInput" type="text" />
</div>
<div class="col-12 col-lg-6">
<label class="form-label" for="ataJournalAddressInput">ATA exact</label>
<input class="form-control font-monospace" id="ataJournalAddressInput" type="text" />
</div>
<div class="col-8 col-lg-4">
<label class="form-label" for="ataJournalOperationInput">Opération</label>
<input class="form-control font-monospace" id="ataJournalOperationInput" type="text" />
</div>
<div class="col-4 col-lg-2">
<label class="form-label" for="ataJournalLimitInput">Limite</label>
<input class="form-control" id="ataJournalLimitInput" max="500" min="1" type="number" value="100" />
</div>
</div>
<textarea class="form-control font-monospace" id="ataJournalOutput" readonly="" rows="14">Aucune lecture.</textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card shadow-sm border-0 mt-4">
<div class="card-body">
<h2 class="h5 mb-3">Résumé</h2>
<textarea class="form-control font-monospace" id="executionSummaryOutput" readonly="" rows="14">Aucun résultat.</textarea>
</div>
</div>
<div class="card shadow-sm border-0 mt-4">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-2">
<h2 class="h5 mb-0">Journal</h2>
<button class="btn btn-sm btn-outline-secondary" id="clearExecutionLogButton" type="button">Effacer</button>
</div>
<textarea class="form-control font-monospace" id="executionLogOutput" readonly="" rows="18"></textarea>
</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">© 2026 SASEDEV</div>
</div>
</div>
</footer>
<script defer="" src="ts/demo_execution_spl.ts" type="module"></script>
</body>
</html>