Meik/PostTracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add end-to-end AI timing traces and AI debug view

Browse Source
This commit is contained in:
Meik
2026-02-20 14:10:06 +01:00
parent 4c187dab3c
commit af3b07b80f
6 changed files with 1705 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
web/index.html
View File

@@ -22,6 +22,7 @@
{ href: 'style.css' },
{ href: 'dashboard.css' },
{ href: 'settings.css' },
{ href: 'ai-debug.css' },
{ href: 'automation.css' },
{ href: 'daily-bookmarks.css', id: 'dailyBookmarksCss', disabled: true }
];
@@ -29,6 +30,7 @@
'app.js',
'dashboard.js',
'settings.js',
'ai-debug.js',
'vendor/list.min.js',
'automation.js',
'daily-bookmarks.js'
@@ -1098,6 +1100,9 @@
<button type="button" class="btn btn-secondary" id="testBtn">
🧪 Kommentar testen
</button>
<a class="btn btn-secondary" id="openAiDebugViewBtn" data-view-target="ai-debug" href="index.html?view=ai-debug">
🧭 AI-Debug öffnen
</a>
</div>
</form>
</section>
@@ -1392,6 +1397,68 @@
</div>
</div>
</section>
<section id="view-ai-debug" class="app-view ai-debug-view" data-view="ai-debug">
<div class="container">
<div class="ai-debug-shell">
<header class="ai-debug-header">
<div>
<h2>🧭 AI-Debug</h2>
<p class="ai-debug-subtitle">Zeitliche Ablaufanalyse für AI-Kommentar-Generierung (Backend + Extension).</p>
</div>
<div class="ai-debug-toolbar">
<label class="ai-debug-toolbar__item" for="aiDebugStatusFilter">
<span>Status</span>
<select id="aiDebugStatusFilter">
<option value="">Alle</option>
<option value="success">Erfolg</option>
<option value="clipboard_fallback">Clipboard Fallback</option>
<option value="cancelled">Abgebrochen</option>
<option value="error">Fehler</option>
<option value="backend_error">Backend-Fehler</option>
<option value="backend_rejected">Backend-Rejected</option>
</select>
</label>
<label class="ai-debug-toolbar__item" for="aiDebugLimitFilter">
<span>Einträge</span>
<select id="aiDebugLimitFilter">
<option value="25">25</option>
<option value="50" selected>50</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
</label>
<button type="button" class="btn btn-secondary" id="aiDebugRefreshBtn">Aktualisieren</button>
</div>
</header>
<div id="aiDebugStatus" class="ai-debug-status" role="status" aria-live="polite"></div>
<div class="ai-debug-layout">
<section class="ai-debug-list-panel">
<table class="ai-debug-table">
<thead>
<tr>
<th>Zeit</th>
<th>Status</th>
<th>Total (ms)</th>
<th>Backend (ms)</th>
<th>AI-Request (ms)</th>
<th>Flow/Trace</th>
</tr>
</thead>
<tbody id="aiDebugTableBody"></tbody>
</table>
</section>
<section class="ai-debug-detail-panel">
<h3>Ablaufdetails</h3>
<div id="aiDebugDetailMeta" class="ai-debug-detail-meta">Bitte einen Eintrag auswählen.</div>
<pre id="aiDebugDetailJson" class="ai-debug-json"></pre>
</section>
</div>
</div>
</div>
</section>
<section id="view-bookmarks" class="app-view" data-view="bookmarks">
<div class="container">
<main class="bookmark-page">
@@ -1468,6 +1535,7 @@
posts: 'Beiträge',
dashboard: 'Dashboard',
settings: 'Einstellungen',
'ai-debug': 'AI-Debug',
bookmarks: 'Bookmarks',
automation: 'Automationen',
'daily-bookmarks': 'Daily Bookmarks'
@@ -1549,6 +1617,7 @@
(function() {
const AUTOMATION_VIEW = 'automation';
const DAILY_VIEW = 'daily-bookmarks';
const AI_DEBUG_VIEW = 'ai-debug';
function handleViewChange(event) {
const view = event?.detail?.view;
if (view === AUTOMATION_VIEW) {
@@ -1561,6 +1630,11 @@
} else {
window.DailyBookmarksPage?.deactivate?.();
}
if (view === AI_DEBUG_VIEW) {
window.AIDebugPage?.activate?.();
} else {
window.AIDebugPage?.deactivate?.();
}
}
window.addEventListener('app:view-change', handleViewChange);
@@ -1573,6 +1647,10 @@
if (dailySection && dailySection.classList.contains('app-view--active')) {
window.DailyBookmarksPage?.activate?.();
}
const aiDebugSection = document.querySelector('[data-view="ai-debug"]');
if (aiDebugSection && aiDebugSection.classList.contains('app-view--active')) {
window.AIDebugPage?.activate?.();
}
})();
</script>
</body>