Sasedev/khadhroony-bobobot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.4.4

Browse Source
This commit is contained in:
SinuS von SifriduS
2026-04-22 19:04:22 +02:00
parent 23dab2df85
commit f073b14e01
18 changed files with 1072 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
kb_app/frontend/demo_http.html Normal file
View File

@@ -0,0 +1,166 @@
<!-- file: kb_app/frontend/demo_http.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo Http</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">
<a class="navbar-brand d-flex align-items-center" href="/">
<img alt="Logo" src="imgs/logo.png" class="app-logo" />
<span class="ps-2 fs-4 fw-bold text-primary font-logo">Khadhroony-BoBoBot</span>
</a>
<div class="ms-auto">
<span id="demoHttpStatusBadge" class="badge text-bg-secondary">Ready</span>
</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="row g-4">
<div class="col-12">
<div class="card shadow-sm border-0">
<div class="card-body">
<h1 class="h4 mb-3">Demo Http</h1>
<p class="text-body-secondary mb-0">
Fenêtre de test manuelle pour les requêtes HTTP Solana via le pool d’endpoints configurés.
</p>
</div>
</div>
</div>
<div class="col-12 col-xxl-4">
<div class="card shadow-sm border-0 h-100">
<div class="card-body">
<h2 class="h5 mb-3">Requête</h2>
<div class="mb-3">
<label for="demoHttpRoleSelect" class="form-label">Role</label>
<select id="demoHttpRoleSelect" class="form-select">
<option value="http_queries">http_queries</option>
<option value="http_transactions">http_transactions</option>
<option value="http_heavy">http_heavy</option>
<option value="http_fallback">http_fallback</option>
</select>
<div class="form-text">
Le rôle détermine quel endpoint HTTP du pool sera sélectionné.
</div>
</div>
<div class="mb-3">
<label for="demoHttpMethodSelect" class="form-label">Méthode</label>
<select id="demoHttpMethodSelect" class="form-select">
<option value="getHealth">getHealth</option>
<option value="getVersion">getVersion</option>
<option value="getSlot">getSlot</option>
<option value="getBlockHeight">getBlockHeight</option>
<option value="getLatestBlockhash">getLatestBlockhash</option>
<option value="getBalance">getBalance</option>
<option value="getAccountInfo">getAccountInfo</option>
<option value="getProgramAccounts">getProgramAccounts</option>
<option value="getSignaturesForAddress">getSignaturesForAddress</option>
<option value="getTransaction">getTransaction</option>
<option value="sendTransaction">sendTransaction</option>
</select>
</div>
<div id="demoHttpFirstArgGroup" class="mb-3">
<label for="demoHttpFirstArgInput" id="demoHttpFirstArgLabel" class="form-label">First arg</label>
<input id="demoHttpFirstArgInput" type="text" class="form-control" spellcheck="false" />
<div id="demoHttpFirstArgHelp" class="form-text">
Adresse, program id, signature ou transaction encodée selon la méthode.
</div>
</div>
<div id="demoHttpConfigGroup" class="mb-3">
<label for="demoHttpConfigTextarea" class="form-label">Config JSON</label>
<textarea id="demoHttpConfigTextarea" class="form-control font-monospace" rows="8" spellcheck="false"></textarea>
<div id="demoHttpConfigHelp" class="form-text">
Configuration JSON optionnelle.
</div>
</div>
<div class="d-flex flex-wrap gap-2 mb-3">
<button id="demoHttpExecuteButton" type="button" class="btn btn-primary">Execute</button>
<button id="demoHttpRefreshPoolButton" type="button" class="btn btn-outline-primary">Refresh pool</button>
<button id="demoHttpCopyResponseButton" type="button" class="btn btn-outline-secondary">Copy response</button>
<button id="demoHttpClearLogButton" type="button" class="btn btn-outline-secondary">Clear log</button>
</div>
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" id="demoHttpPrettyToggle" checked />
<label class="form-check-label" for="demoHttpPrettyToggle">Pretty JSON</label>
</div>
<div class="small text-body-secondary">
<div><strong>Endpoint:</strong> <span id="demoHttpLastEndpointText">-</span></div>
<div><strong>Provider:</strong> <span id="demoHttpLastProviderText">-</span></div>
<div><strong>Method class:</strong> <span id="demoHttpLastMethodClassText">-</span></div>
</div>
</div>
</div>
</div>
<div class="col-12 col-xxl-8">
<div class="card shadow-sm border-0 mb-4">
<div class="card-body">
<h2 class="h5 mb-3">Pool HTTP</h2>
<div class="table-responsive">
<table class="table table-sm align-middle mb-0">
<thead>
<tr>
<th>Endpoint</th>
<th>Status</th>
<th>Paused</th>
<th>Conc.</th>
</tr>
</thead>
<tbody id="demoHttpPoolTableBody"></tbody>
</table>
</div>
</div>
</div>
<div class="card shadow-sm border-0 mb-4">
<div class="card-body">
<h2 class="h5 mb-3">Latest response</h2>
<textarea id="demoHttpResponseTextarea" class="form-control font-monospace" rows="12" readonly spellcheck="false"></textarea>
</div>
</div>
<div class="card shadow-sm border-0">
<div class="card-body">
<h2 class="h5 mb-3">Logs</h2>
<textarea id="demoHttpLogTextarea" class="form-control font-monospace" rows="14" readonly spellcheck="false"></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 col-md-6 text-center text-small my-1 my-md-0">
&copy; 2026 SASEDEV — Demo Http
</div>
</div>
</div>
</footer>
<script type="module" src="ts/demo_http.ts" defer></script>
</body>
</html>

55
kb_app/frontend/demo_ws.html
View File

@@ -1,12 +1,14 @@
<!-- file: kb_app/frontend/demo_ws.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo Ws Subscribe</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">
@@ -43,14 +45,14 @@
<h2 class="h5 mb-3">Connexion</h2>
<div class="mb-3">
<label for="demoWsEndpointSelect" class="form-label">Endpoint WS activé</label>
<select id="demoWsEndpointSelect" class="form-select"></select>
<div class="form-text">
Seuls les endpoints définis dans <code>config.solana.ws_endpoints</code> et marqués
<code>enabled: true</code> apparaissent ici. Les endpoints HTTP ne sont pas utilisés
par cette fenêtre.
</div>
</div>
<label for="demoWsEndpointSelect" class="form-label">Endpoint WS activé</label>
<select id="demoWsEndpointSelect" class="form-select"></select>
<div class="form-text">
Seuls les endpoints définis dans <code>config.solana.ws_endpoints</code> et marqués
<code>enabled: true</code> apparaissent ici. Les endpoints HTTP ne sont pas utilisés
par cette fenêtre.
</div>
</div>
<div class="d-flex flex-wrap gap-2 mb-3">
<button id="demoWsConnectButton" type="button" class="btn btn-success">Connect</button>
@@ -61,14 +63,14 @@
<div><strong>State:</strong> <span id="demoWsStateText">Disconnected</span></div>
<div><strong>Endpoint:</strong> <span id="demoWsEndpointText">-</span></div>
</div>
<div class="small text-body-secondary mt-2">
<div><strong>Events:</strong> <span id="demoWsEventCountText">0</span></div>
<div><strong>Notifications:</strong> <span id="demoWsNotificationCountText">0</span></div>
<div><strong>UI logs:</strong> <span id="demoWsUiLogCountText">0</span></div>
<div><strong>Suppressed:</strong> <span id="demoWsSuppressedLogCountText">0</span></div>
<div><strong>Last event:</strong> <span id="demoWsLastEventKindText">-</span></div>
</div>
<div><strong>Events:</strong> <span id="demoWsEventCountText">0</span></div>
<div><strong>Notifications:</strong> <span id="demoWsNotificationCountText">0</span></div>
<div><strong>UI logs:</strong> <span id="demoWsUiLogCountText">0</span></div>
<div><strong>Suppressed:</strong> <span id="demoWsSuppressedLogCountText">0</span></div>
<div><strong>Last event:</strong> <span id="demoWsLastEventKindText">-</span></div>
</div>
<hr />
@@ -104,22 +106,12 @@
<div id="demoWsFilterGroup" class="mb-3">
<label for="demoWsFilterTextarea" class="form-label">Filter JSON</label>
<textarea
id="demoWsFilterTextarea"
class="form-control font-monospace"
rows="5"
spellcheck="false"
></textarea>
<textarea id="demoWsFilterTextarea" class="form-control font-monospace" rows="5" spellcheck="false"></textarea>
</div>
<div id="demoWsConfigGroup" class="mb-3">
<label for="demoWsConfigTextarea" class="form-label">Config JSON</label>
<textarea
id="demoWsConfigTextarea"
class="form-control font-monospace"
rows="6"
spellcheck="false"
></textarea>
<textarea id="demoWsConfigTextarea" class="form-control font-monospace" rows="6" spellcheck="false"></textarea>
</div>
<div class="d-flex flex-wrap gap-2 mb-3">
@@ -140,13 +132,7 @@
<div class="card shadow-sm border-0 h-100">
<div class="card-body">
<h2 class="h5 mb-3">Logs</h2>
<textarea
id="demoWsLogTextarea"
class="form-control font-monospace"
rows="28"
readonly
spellcheck="false"
></textarea>
<textarea id="demoWsLogTextarea" class="form-control font-monospace" rows="28" readonly spellcheck="false"></textarea>
</div>
</div>
</div>
@@ -167,4 +153,5 @@
<script type="module" src="ts/demo_ws.ts" defer></script>
</body>
</html>

15
kb_app/frontend/main.html
View File

@@ -1,12 +1,14 @@
<!-- file: kb_app/frontend/index.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Khadhroony-BoBoBot</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">
@@ -20,6 +22,9 @@
<button id="openDemoWsButton" type="button" class="btn btn-outline-primary">
Demo Ws
</button>
<button id="openDemoHttpButton" class="btn btn-outline-primary">
Demo Http
</button>
</div>
</div>
</nav>
@@ -40,14 +45,23 @@
<h3 class="h5 card-title mb-3">Desktop shell</h3>
<p class="text-body-secondary mb-3">
La fenêtre principale reste volontairement légère.
</p>
<p class="text-body-secondary mb-3">
Les tests WebSocket manuels sont disponibles dans la fenêtre dédiée
<strong>Demo Ws</strong>.
</p>
<p class="text-body-secondary mb-3">
Les tests PRC Http manuels sont disponibles dans la fenêtre dédiée
<strong>Demo Http</strong>.
</p>
<div class="d-flex flex-wrap gap-2">
<button id="openDemoWsButtonSecondary" type="button" class="btn btn-primary">
Ouvrir Demo Ws
</button>
<button id="openDemoHttpButtonSecondary" type="button" class="btn btn-primary">
Ouvrir Demo Http
</button>
</div>
<hr />
@@ -77,4 +91,5 @@
<script type="module" src="ts/main.ts" defer></script>
</body>
</html>

3
kb_app/frontend/splash.html
View File

@@ -1,12 +1,14 @@
<!-- file: kb_app/frontend/splash.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Loading ... Khadhroony Solana BoBot</title>
<link rel="stylesheet" href="sass/splash.scss" />
</head>
<body>
<div id="splash-container">
<img id="splash-image" src="imgs/splash.png" alt="Application Loading" />
@@ -16,4 +18,5 @@
</div>
<script type="module" src="ts/splash.ts" defer></script>
</body>
</html>

437
kb_app/frontend/ts/demo_http.ts Normal file
View File

@@ -0,0 +1,437 @@
import * as bootstrap from "bootstrap";
import "simplebar";
import ResizeObserver from "resize-observer-polyfill";
import { invoke } from "@tauri-apps/api/core";
import { debug, takeoverConsole } from "@fltsci/tauri-plugin-tracing";
(window as Window & typeof globalThis & { bootstrap?: typeof bootstrap }).bootstrap = bootstrap;
(window as Window & typeof globalThis & { ResizeObserver?: typeof ResizeObserver }).ResizeObserver = ResizeObserver;
interface DemoHttpPoolClientSnapshot {
endpointName: string;
provider: string;
endpointUrl: string;
roles: string[];
status: string;
pausedRemainingMs: number | null;
availableConcurrencySlots: number;
}
interface DemoHttpRequest {
role: string;
method: string;
firstArg: string | null;
configJson: string | null;
}
interface DemoHttpExecutionPayload {
endpointName: string;
provider: string;
endpointUrl: string;
role: string;
method: string;
methodClass: string;
responseJson: string;
}
let demoHttpLastResponseRawText = "";
function appendLogLine(textarea: HTMLTextAreaElement, line: string): void {
const now = new Date();
const timestamp = now.toLocaleTimeString("fr-CH", { hour12: false });
const lines = textarea.value === "" ? [] : textarea.value.split("\n");
lines.push(`[${timestamp}] ${line}`);
const maxLines = 400;
textarea.value = lines.slice(-maxLines).join("\n");
textarea.scrollTop = textarea.scrollHeight;
}
function methodNeedsFirstArg(method: string): boolean {
return [
"getBalance",
"getAccountInfo",
"getProgramAccounts",
"getSignaturesForAddress",
"getTransaction",
"sendTransaction",
].includes(method);
}
function firstArgLabelForMethod(method: string): string {
if (method === "getBalance") return "Address";
if (method === "getAccountInfo") return "Address";
if (method === "getProgramAccounts") return "Program id";
if (method === "getSignaturesForAddress") return "Address";
if (method === "getTransaction") return "Signature";
if (method === "sendTransaction") return "Encoded transaction (base64)";
return "First arg";
}
function firstArgHelpForMethod(method: string): string {
if (method === "getBalance") return "Adresse Solana dont on veut lire le solde.";
if (method === "getAccountInfo") return "Adresse Solana du compte à lire.";
if (method === "getProgramAccounts") return "Program id dont on veut lister les comptes.";
if (method === "getSignaturesForAddress") return "Adresse Solana dont on veut lire les signatures récentes.";
if (method === "getTransaction") return "Signature exacte d’une transaction.";
if (method === "sendTransaction") {
return "Transaction signée encodée en base64. Le preset fourni est volontairement invalide et sert seulement à tester la gestion d’erreur.";
}
return "Adresse, program id, signature ou transaction encodée selon la méthode.";
}
function configHelpForMethod(method: string): string {
if (method === "getProgramAccounts") {
return "Preset volontairement filtré pour éviter une réponse trop large.";
}
if (method === "sendTransaction") {
return "Configuration d’envoi. Avec le preset de transaction invalide, la requête doit échouer côté RPC.";
}
return "Configuration JSON optionnelle.";
}
function defaultRoleForMethod(method: string): string {
if (method === "sendTransaction") return "http_transactions";
if (method === "getProgramAccounts") return "http_heavy";
return "http_queries";
}
function defaultFirstArgForMethod(method: string): string {
if (method === "getBalance") return "11111111111111111111111111111111";
if (method === "getAccountInfo") return "11111111111111111111111111111111";
if (method === "getProgramAccounts") return "TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA";
if (method === "getSignaturesForAddress") return "11111111111111111111111111111111";
if (method === "getTransaction") {
return "5h6xBEauJ3PK6SWC7r7J2W8mE1D7aQj4J6Jg8n1SmWnVqSg9H6gq2K7xwJkL2GZ2RZ6n9wYk9cW1b2V3a4d5e6f7";
}
if (method === "sendTransaction") return "AQ==";
return "";
}
function defaultConfigForMethod(method: string): string {
if (method === "getSlot" || method === "getBlockHeight" || method === "getLatestBlockhash") {
return `{"commitment":"confirmed"}`;
}
if (method === "getBalance") {
return `{"commitment":"confirmed"}`;
}
if (method === "getAccountInfo") {
return `{"encoding":"base64","commitment":"confirmed"}`;
}
if (method === "getProgramAccounts") {
return `{
"encoding":"base64",
"commitment":"confirmed",
"dataSlice":{"offset":0,"length":0},
"filters":[
{"dataSize":165},
{"memcmp":{"offset":32,"bytes":"11111111111111111111111111111111"}}
]
}`;
}
if (method === "getSignaturesForAddress") {
return `{"limit":10,"commitment":"confirmed"}`;
}
if (method === "getTransaction") {
return `{"encoding":"json","commitment":"confirmed","maxSupportedTransactionVersion":0}`;
}
if (method === "sendTransaction") {
return `{"encoding":"base64","skipPreflight":true,"maxRetries":0}`;
}
return "";
}
function renderPoolSnapshots(
snapshots: DemoHttpPoolClientSnapshot[],
tableBody: HTMLTableSectionElement,
): void {
tableBody.innerHTML = "";
for (const snapshot of snapshots) {
const row = document.createElement("tr");
const endpointCell = document.createElement("td");
endpointCell.innerHTML = `<div class="fw-semibold">${snapshot.endpointName}</div><div class="small text-body-secondary">${snapshot.endpointUrl}</div>`;
const providerCell = document.createElement("td");
providerCell.textContent = snapshot.provider;
const statusCell = document.createElement("td");
statusCell.textContent = snapshot.status;
const pausedCell = document.createElement("td");
pausedCell.textContent = snapshot.pausedRemainingMs === null ? "-" : String(snapshot.pausedRemainingMs);
const concurrencyCell = document.createElement("td");
concurrencyCell.textContent = String(snapshot.availableConcurrencySlots);
const rolesCell = document.createElement("td");
rolesCell.textContent = snapshot.roles.join(", ");
row.appendChild(endpointCell);
row.appendChild(providerCell);
row.appendChild(statusCell);
row.appendChild(pausedCell);
row.appendChild(concurrencyCell);
row.appendChild(rolesCell);
tableBody.appendChild(row);
}
}
function renderResponse(
responseTextarea: HTMLTextAreaElement,
prettyToggle: HTMLInputElement,
): void {
if (demoHttpLastResponseRawText.trim() === "") {
responseTextarea.value = "";
return;
}
if (!prettyToggle.checked) {
responseTextarea.value = demoHttpLastResponseRawText;
return;
}
try {
const parsed = JSON.parse(demoHttpLastResponseRawText);
responseTextarea.value = JSON.stringify(parsed, null, 2);
} catch {
responseTextarea.value = demoHttpLastResponseRawText;
}
}
async function copyTextToClipboard(text: string): Promise<void> {
if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.writeText) {
await navigator.clipboard.writeText(text);
return;
}
const tempTextarea = document.createElement("textarea");
tempTextarea.value = text;
tempTextarea.style.position = "fixed";
tempTextarea.style.left = "-9999px";
document.body.appendChild(tempTextarea);
tempTextarea.focus();
tempTextarea.select();
document.execCommand("copy");
document.body.removeChild(tempTextarea);
}
function updateMethodForm(
roleSelect: HTMLSelectElement,
methodSelect: HTMLSelectElement,
firstArgGroup: HTMLDivElement,
firstArgLabel: HTMLLabelElement,
firstArgHelp: HTMLDivElement,
firstArgInput: HTMLInputElement,
configTextarea: HTMLTextAreaElement,
configHelp: HTMLDivElement,
): void {
const method = methodSelect.value;
firstArgGroup.style.display = methodNeedsFirstArg(method) ? "" : "none";
firstArgLabel.textContent = firstArgLabelForMethod(method);
firstArgHelp.textContent = firstArgHelpForMethod(method);
firstArgInput.value = defaultFirstArgForMethod(method);
configTextarea.value = defaultConfigForMethod(method);
configHelp.textContent = configHelpForMethod(method);
roleSelect.value = defaultRoleForMethod(method);
}
async function refreshPoolSnapshot(
tableBody: HTMLTableSectionElement,
logTextarea: HTMLTextAreaElement,
shouldLog: boolean,
): Promise<void> {
try {
const snapshots = await invoke<DemoHttpPoolClientSnapshot[]>("demo_http_list_pool_clients");
renderPoolSnapshots(snapshots, tableBody);
if (shouldLog) {
appendLogLine(logTextarea, `[ui] refreshed http pool snapshot (${snapshots.length} endpoint(s))`);
}
} catch (error) {
appendLogLine(logTextarea, `[ui] refresh pool error: ${String(error)}`);
}
}
document.addEventListener("DOMContentLoaded", async () => {
void takeoverConsole();
const sidebarToggle = document.querySelector<HTMLButtonElement>('#sidebarToggle');
if (sidebarToggle) {
// restaurer l’état depuis localStorage
if (localStorage.getItem('sidebar-toggle') === 'true') {
document.body.classList.add('sidenav-toggled');
}
sidebarToggle.addEventListener('click', (event) => {
event.preventDefault();
document.body.classList.toggle('sidenav-toggled');
localStorage.setItem('sidebar-toggle', document.body.classList.contains('sidenav-toggled') ? 'true' : 'false');
});
}
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
Array.from(tooltipTriggerList).map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
const toastElList = document.querySelectorAll('.toast');
Array.from(toastElList).map(toastEl => new bootstrap.Toast(toastEl));
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
Array.from(popoverTriggerList).map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));
const gobackto = location.pathname + location.search;
document.querySelectorAll<HTMLAnchorElement>('a[data-setlang]').forEach((a) => {
const href = a.getAttribute("href");
if (!href) return; // pas de href => on ignore
const url = new URL(href, location.origin);
url.searchParams.set("gobackto", gobackto);
// conserve une URL relative (path + query)
a.setAttribute("href", url.pathname + "?" + url.searchParams.toString());
});
const roleSelect = document.querySelector<HTMLSelectElement>("#demoHttpRoleSelect");
const methodSelect = document.querySelector<HTMLSelectElement>("#demoHttpMethodSelect");
const firstArgGroup = document.querySelector<HTMLDivElement>("#demoHttpFirstArgGroup");
const firstArgLabel = document.querySelector<HTMLLabelElement>("#demoHttpFirstArgLabel");
const firstArgHelp = document.querySelector<HTMLDivElement>("#demoHttpFirstArgHelp");
const firstArgInput = document.querySelector<HTMLInputElement>("#demoHttpFirstArgInput");
const configTextarea = document.querySelector<HTMLTextAreaElement>("#demoHttpConfigTextarea");
const configHelp = document.querySelector<HTMLDivElement>("#demoHttpConfigHelp");
const executeButton = document.querySelector<HTMLButtonElement>("#demoHttpExecuteButton");
const refreshPoolButton = document.querySelector<HTMLButtonElement>("#demoHttpRefreshPoolButton");
const clearLogButton = document.querySelector<HTMLButtonElement>("#demoHttpClearLogButton");
const copyResponseButton = document.querySelector<HTMLButtonElement>("#demoHttpCopyResponseButton");
const prettyToggle = document.querySelector<HTMLInputElement>("#demoHttpPrettyToggle");
const responseTextarea = document.querySelector<HTMLTextAreaElement>("#demoHttpResponseTextarea");
const logTextarea = document.querySelector<HTMLTextAreaElement>("#demoHttpLogTextarea");
const poolTableBody = document.querySelector<HTMLTableSectionElement>("#demoHttpPoolTableBody");
const lastEndpointText = document.querySelector<HTMLSpanElement>("#demoHttpLastEndpointText");
const lastProviderText = document.querySelector<HTMLSpanElement>("#demoHttpLastProviderText");
const lastMethodClassText = document.querySelector<HTMLSpanElement>("#demoHttpLastMethodClassText");
if (
!roleSelect ||
!methodSelect ||
!firstArgGroup ||
!firstArgLabel ||
!firstArgHelp ||
!firstArgInput ||
!configTextarea ||
!configHelp ||
!executeButton ||
!refreshPoolButton ||
!clearLogButton ||
!copyResponseButton ||
!prettyToggle ||
!responseTextarea ||
!logTextarea ||
!poolTableBody ||
!lastEndpointText ||
!lastProviderText ||
!lastMethodClassText
) {
debug("demo_http UI controls not found");
return;
}
updateMethodForm(
roleSelect,
methodSelect,
firstArgGroup,
firstArgLabel,
firstArgHelp,
firstArgInput,
configTextarea,
configHelp,
);
methodSelect.addEventListener("change", () => {
updateMethodForm(
roleSelect,
methodSelect,
firstArgGroup,
firstArgLabel,
firstArgHelp,
firstArgInput,
configTextarea,
configHelp,
);
});
prettyToggle.addEventListener("change", () => {
renderResponse(responseTextarea, prettyToggle);
});
refreshPoolButton.addEventListener("click", async () => {
await refreshPoolSnapshot(poolTableBody, logTextarea, true);
});
clearLogButton.addEventListener("click", () => {
logTextarea.value = "";
});
copyResponseButton.addEventListener("click", async () => {
if (responseTextarea.value.trim() === "") {
appendLogLine(logTextarea, "[ui] copy skipped: no response available");
return;
}
try {
await copyTextToClipboard(responseTextarea.value);
appendLogLine(logTextarea, "[ui] response copied to clipboard");
} catch (error) {
appendLogLine(logTextarea, `[ui] copy response error: ${String(error)}`);
}
});
executeButton.addEventListener("click", async () => {
const request: DemoHttpRequest = {
role: roleSelect.value,
method: methodSelect.value,
firstArg: firstArgInput.value.trim() === "" ? null : firstArgInput.value.trim(),
configJson: configTextarea.value.trim() === "" ? null : configTextarea.value.trim(),
};
try {
const response = await invoke<DemoHttpExecutionPayload>("demo_http_execute_request", { request });
lastEndpointText.textContent = `${response.endpointName} (${response.endpointUrl})`;
lastProviderText.textContent = response.provider;
lastMethodClassText.textContent = response.methodClass;
demoHttpLastResponseRawText = response.responseJson;
renderResponse(responseTextarea, prettyToggle);
appendLogLine(
logTextarea,
`[ui] ${response.method} via ${response.endpointName} / role=${response.role} / class=${response.methodClass}`,
);
await refreshPoolSnapshot(poolTableBody, logTextarea, true);
} catch (error) {
demoHttpLastResponseRawText = String(error);
renderResponse(responseTextarea, prettyToggle);
appendLogLine(logTextarea, `[ui] execute error: ${String(error)}`);
await refreshPoolSnapshot(poolTableBody, logTextarea, true);
}
});
appendLogLine(logTextarea, "[ui] demo_http window loaded");
await refreshPoolSnapshot(poolTableBody, logTextarea, true);
debug("demo_http window loaded");
});

138
kb_app/frontend/ts/demo_ws.ts
View File

@@ -5,7 +5,7 @@ import "simplebar";
import ResizeObserver from "resize-observer-polyfill";
import { invoke } from "@tauri-apps/api/core";
import { listen, type UnlistenFn } from "@tauri-apps/api/event";
import { trace, takeoverConsole } from "@fltsci/tauri-plugin-tracing";
import { debug, takeoverConsole } from "@fltsci/tauri-plugin-tracing";
(window as Window & typeof globalThis & { bootstrap?: typeof bootstrap }).bootstrap = bootstrap;
(window as Window & typeof globalThis & { ResizeObserver?: typeof ResizeObserver }).ResizeObserver = ResizeObserver;
@@ -290,10 +290,10 @@ document.addEventListener("DOMContentLoaded", async () => {
const subscriptionText = document.querySelector<HTMLSpanElement>("#demoWsSubscriptionText");
const requestText = document.querySelector<HTMLSpanElement>("#demoWsRequestText");
const eventCountText = document.querySelector<HTMLSpanElement>("#demoWsEventCountText");
const notificationCountText = document.querySelector<HTMLSpanElement>("#demoWsNotificationCountText");
const uiLogCountText = document.querySelector<HTMLSpanElement>("#demoWsUiLogCountText");
const suppressedLogCountText = document.querySelector<HTMLSpanElement>("#demoWsSuppressedLogCountText");
const lastEventKindText = document.querySelector<HTMLSpanElement>("#demoWsLastEventKindText");
const notificationCountText = document.querySelector<HTMLSpanElement>("#demoWsNotificationCountText");
const uiLogCountText = document.querySelector<HTMLSpanElement>("#demoWsUiLogCountText");
const suppressedLogCountText = document.querySelector<HTMLSpanElement>("#demoWsSuppressedLogCountText");
const lastEventKindText = document.querySelector<HTMLSpanElement>("#demoWsLastEventKindText");
const connectButton = document.querySelector<HTMLButtonElement>("#demoWsConnectButton");
const disconnectButton = document.querySelector<HTMLButtonElement>("#demoWsDisconnectButton");
const subscribeButton = document.querySelector<HTMLButtonElement>("#demoWsSubscribeButton");
@@ -308,7 +308,7 @@ const lastEventKindText = document.querySelector<HTMLSpanElement>("#demoWsLastEv
!stateText || !endpointText || !subscriptionText || !requestText || !connectButton ||
!disconnectButton || !subscribeButton || !unsubscribeButton || !clearLogButton || !logTextarea
) {
trace("demo_ws UI controls not found");
debug("demo_ws UI controls not found");
return;
}
@@ -321,23 +321,23 @@ const lastEventKindText = document.querySelector<HTMLSpanElement>("#demoWsLastEv
});
unlistenStatusEvent = await listen<DemoWsStatusPayload>("demo-ws-status", (event) => {
applyStatusToUi(
event.payload,
statusBadge,
stateText,
endpointText,
subscriptionText,
eventCountText,
notificationCountText,
uiLogCountText,
suppressedLogCountText,
lastEventKindText,
connectButton,
disconnectButton,
subscribeButton,
unsubscribeButton,
);
});
applyStatusToUi(
event.payload,
statusBadge,
stateText,
endpointText,
subscriptionText,
eventCountText,
notificationCountText,
uiLogCountText,
suppressedLogCountText,
lastEventKindText,
connectButton,
disconnectButton,
subscribeButton,
unsubscribeButton,
);
});
} catch (error) {
appendLogLine(logTextarea, `[ui] event listen error: ${String(error)}`);
}
@@ -400,21 +400,21 @@ const lastEventKindText = document.querySelector<HTMLSpanElement>("#demoWsLastEv
try {
const status = await invoke<DemoWsStatusPayload>("demo_ws_get_status");
applyStatusToUi(
status,
statusBadge,
stateText,
endpointText,
subscriptionText,
eventCountText,
notificationCountText,
uiLogCountText,
suppressedLogCountText,
lastEventKindText,
connectButton,
disconnectButton,
subscribeButton,
unsubscribeButton,
);
status,
statusBadge,
stateText,
endpointText,
subscriptionText,
eventCountText,
notificationCountText,
uiLogCountText,
suppressedLogCountText,
lastEventKindText,
connectButton,
disconnectButton,
subscribeButton,
unsubscribeButton,
);
} catch (error) {
appendLogLine(logTextarea, `[ui] initial status error: ${String(error)}`);
}
@@ -428,21 +428,21 @@ const lastEventKindText = document.querySelector<HTMLSpanElement>("#demoWsLastEv
});
applyStatusToUi(
status,
statusBadge,
stateText,
endpointText,
subscriptionText,
eventCountText,
notificationCountText,
uiLogCountText,
suppressedLogCountText,
lastEventKindText,
connectButton,
disconnectButton,
subscribeButton,
unsubscribeButton,
);
status,
statusBadge,
stateText,
endpointText,
subscriptionText,
eventCountText,
notificationCountText,
uiLogCountText,
suppressedLogCountText,
lastEventKindText,
connectButton,
disconnectButton,
subscribeButton,
unsubscribeButton,
);
} catch (error) {
appendLogLine(logTextarea, `[ui] connect error: ${String(error)}`);
}
@@ -453,21 +453,21 @@ const lastEventKindText = document.querySelector<HTMLSpanElement>("#demoWsLastEv
const status = await invoke<DemoWsStatusPayload>("demo_ws_disconnect");
applyStatusToUi(
status,
statusBadge,
stateText,
endpointText,
subscriptionText,
eventCountText,
notificationCountText,
uiLogCountText,
suppressedLogCountText,
lastEventKindText,
connectButton,
disconnectButton,
subscribeButton,
unsubscribeButton,
);
status,
statusBadge,
stateText,
endpointText,
subscriptionText,
eventCountText,
notificationCountText,
uiLogCountText,
suppressedLogCountText,
lastEventKindText,
connectButton,
disconnectButton,
subscribeButton,
unsubscribeButton,
);
} catch (error) {
appendLogLine(logTextarea, `[ui] disconnect error: ${String(error)}`);
}
@@ -515,5 +515,5 @@ const lastEventKindText = document.querySelector<HTMLSpanElement>("#demoWsLastEv
}
});
trace("demo_ws window loaded");
debug("demo_ws window loaded");
});

26
kb_app/frontend/ts/main.ts
View File

@@ -4,7 +4,7 @@ import * as bootstrap from "bootstrap";
import "simplebar";
import ResizeObserver from "resize-observer-polyfill";
import { invoke } from "@tauri-apps/api/core";
import { trace, takeoverConsole } from "@fltsci/tauri-plugin-tracing";
import { debug, takeoverConsole } from "@fltsci/tauri-plugin-tracing";
(window as Window & typeof globalThis & { bootstrap?: typeof bootstrap }).bootstrap = bootstrap;
(window as Window & typeof globalThis & { ResizeObserver?: typeof ResizeObserver }).ResizeObserver = ResizeObserver;
@@ -16,6 +16,13 @@ async function openDemoWsWindow(): Promise<void> {
console.error("open_demo_ws_window failed:", error);
}
}
async function openDemoHttpWindow(): Promise<void> {
try {
await invoke("open_demo_http_window");
} catch (error) {
console.error("open_demo_http_window failed:", error);
}
}
document.addEventListener("DOMContentLoaded", async () => {
void takeoverConsole();
const sidebarToggle = document.querySelector<HTMLButtonElement>('#sidebarToggle');
@@ -54,6 +61,9 @@ document.addEventListener("DOMContentLoaded", async () => {
const openDemoWsButton = document.querySelector<HTMLButtonElement>("#openDemoWsButton");
const openDemoWsButtonSecondary = document.querySelector<HTMLButtonElement>("#openDemoWsButtonSecondary");
const openDemoHttpButton = document.querySelector<HTMLButtonElement>("#openDemoHttpButton");
const openDemoHttpButtonSecondary = document.querySelector<HTMLButtonElement>("#openDemoHttpButtonSecondary");
if (openDemoWsButton) {
openDemoWsButton.addEventListener("click", () => {
@@ -67,6 +77,18 @@ document.addEventListener("DOMContentLoaded", async () => {
});
}
trace("window loaded");
if (openDemoHttpButton) {
openDemoHttpButton.addEventListener("click", () => {
void openDemoHttpWindow();
});
}
if (openDemoHttpButtonSecondary) {
openDemoHttpButtonSecondary.addEventListener("click", () => {
void openDemoHttpWindow();
});
}
debug("window loaded");
});

88
kb_app/frontend/ts/splash.ts
View File

@@ -6,58 +6,58 @@ import { SplashOrder } from './bindings/SplashOrder.ts';
// Fonction d'animation d'opacité
async function animateOpacity(
element: HTMLElement,
fromOpacity: number,
toOpacity: number,
durationMs: number
element: HTMLElement,
fromOpacity: number,
toOpacity: number,
durationMs: number
): Promise<void> {
console.log(`Animating from ${fromOpacity} to ${toOpacity} over ${durationMs}ms`);
//debug(`Animating from ${fromOpacity} to ${toOpacity} over ${durationMs}ms`);
return new Promise((resolve) => {
const startTime = performance.now();
const startOpacity = fromOpacity;
const changeOpacity = toOpacity - fromOpacity;
function update(currentTime: number) {
const elapsed = currentTime - startTime;
if (elapsed >= durationMs) {
element.style.opacity = toOpacity.toString();
resolve();
return;
}
const progress = elapsed / durationMs;
element.style.opacity = (startOpacity + changeOpacity * progress).toString();
requestAnimationFrame(update);
}
requestAnimationFrame(update);
});
console.log(`Animating from ${fromOpacity} to ${toOpacity} over ${durationMs}ms`);
//debug(`Animating from ${fromOpacity} to ${toOpacity} over ${durationMs}ms`);
return new Promise((resolve) => {
const startTime = performance.now();
const startOpacity = fromOpacity;
const changeOpacity = toOpacity - fromOpacity;
function update(currentTime: number) {
const elapsed = currentTime - startTime;
if (elapsed >= durationMs) {
element.style.opacity = toOpacity.toString();
resolve();
return;
}
const progress = elapsed / durationMs;
element.style.opacity = (startOpacity + changeOpacity * progress).toString();
requestAnimationFrame(update);
}
requestAnimationFrame(update);
});
}
// Journalisation
function addLogMessage(message: string): void {
console.log(`Splash: ${message}`);
const debugInfo = document.getElementById('debug-info');
if (debugInfo) {
const time = new Date().toLocaleTimeString();
let msg = `${time}: ${message}<br>`;
debugInfo.innerHTML += msg;
}
console.log(`Splash: ${message}`);
const debugInfo = document.getElementById('debug-info');
if (debugInfo) {
const time = new Date().toLocaleTimeString();
let msg = `${time}: ${message}<br>`;
debugInfo.innerHTML += msg;
}
}
// Pour ajouter des messages directement (sans événements)
function addMessage(message: string, status: string): void {
const messagesContainer = document.getElementById('messages-container');
if (!messagesContainer) return;
const messageElement = document.createElement('div');
messageElement.className = `splash-message ${status}`;
messageElement.textContent = message;
messagesContainer.appendChild(messageElement);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
const messagesContainer = document.getElementById('messages-container');
if (!messagesContainer) return;
const messageElement = document.createElement('div');
messageElement.className = `splash-message ${status}`;
messageElement.textContent = message;
messagesContainer.appendChild(messageElement);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
listen("splash", (event) => {
const splashorder = event.payload as SplashOrder;
@@ -80,7 +80,7 @@ listen("splash", (event) => {
} else if (splashorder.order == "add_log" && splashorder.msg) {
addLogMessage(splashorder.msg);
} else {
error("unknown order:"+splashorder.order);
error("unknown order:" + splashorder.order);
}
});