94 lines
4.1 KiB
HTML
94 lines
4.1 KiB
HTML
{{define "content"}}
|
|
<div class="page-header">
|
|
<h1>Debug Logging</h1>
|
|
<span style="font-size:0.85rem;color:var(--text-muted)">{{.DebugResult.Total}} entries</span>
|
|
</div>
|
|
|
|
<div class="section" style="display:flex;align-items:center;gap:16px;padding:12px 16px;">
|
|
<span style="font-size:0.9rem;font-weight:600;">Debug Mode</span>
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" id="debug-toggle" {{if .DebugEnabled}}checked{{end}}
|
|
hx-post="/api/debug/toggle" hx-swap="none" hx-ext="json-enc"
|
|
hx-vals='js:{enabled: document.getElementById("debug-toggle").checked}'
|
|
hx-trigger="change"
|
|
hx-on::after-request="htmx.ajax('GET', '/debug', {target: '#content', swap: 'innerHTML'})">
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
<span id="debug-status" style="font-size:0.8rem;color:var(--text-muted)">{{if .DebugEnabled}}Enabled — requests are being logged{{else}}Disabled{{end}}</span>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>Time</th>
|
|
<th>Request ID</th>
|
|
<th>Token</th>
|
|
<th>Model</th>
|
|
<th>Provider</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range $i, $entry := .DebugResult.Entries}}
|
|
<tr class="expandable" onclick="toggleDebugExpand('debug-expand-{{$i}}')">
|
|
<td style="width:20px;text-align:center;color:var(--text-muted)">▶</td>
|
|
<td>{{formatTimeDetail $entry.Timestamp}}</td>
|
|
<td><code style="font-size:0.75rem">{{$entry.RequestID}}</code></td>
|
|
<td>{{$entry.TokenName}}</td>
|
|
<td>{{$entry.Model}}</td>
|
|
<td>{{$entry.Provider}}</td>
|
|
<td>
|
|
{{if and (ge $entry.ResponseStatus 200) (lt $entry.ResponseStatus 300)}}<span class="badge badge-success">{{$entry.ResponseStatus}}</span>
|
|
{{else if ge $entry.ResponseStatus 400}}<span class="badge badge-error">{{$entry.ResponseStatus}}</span>
|
|
{{else}}<span class="badge">{{$entry.ResponseStatus}}</span>{{end}}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="7" style="padding:0;">
|
|
<div id="debug-expand-{{$i}}" class="expand-content">
|
|
<div style="margin-bottom:8px"><strong>Request Headers:</strong></div>
|
|
<div class="code-block">{{if $entry.RequestHeaders}}{{$entry.RequestHeaders}}{{else}}(none){{end}}</div>
|
|
<div style="margin:8px 0"><strong>Request Body:</strong></div>
|
|
<div class="code-block">{{if $entry.RequestBody}}{{$entry.RequestBody}}{{else}}(none){{end}}</div>
|
|
<div style="margin:8px 0"><strong>Response Body:</strong></div>
|
|
<div class="code-block">{{if $entry.ResponseBody}}{{$entry.ResponseBody}}{{else}}(none){{end}}</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{{end}}
|
|
{{if not .DebugResult.Entries}}
|
|
<tr><td colspan="7" style="text-align:center;color:var(--text-muted);padding:24px;">No debug log entries</td></tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
|
|
{{if gt .DebugResult.TotalPages 1}}
|
|
<div class="pagination">
|
|
<button {{if le .DebugResult.Page 1}}disabled{{end}} onclick="goToDebugPage(1)">First</button>
|
|
<button {{if le .DebugResult.Page 1}}disabled{{end}} onclick="goToDebugPage({{subInt .DebugResult.Page 1}})">Prev</button>
|
|
{{$page := .DebugResult.Page}}
|
|
{{$total := .DebugResult.TotalPages}}
|
|
{{range seq (paginationStart $page $total) (paginationEnd $page $total)}}
|
|
<button class="{{if eq . $page}}active{{end}}" onclick="goToDebugPage({{.}})">{{.}}</button>
|
|
{{end}}
|
|
<button {{if ge .DebugResult.Page .DebugResult.TotalPages}}disabled{{end}} onclick="goToDebugPage({{addInt .DebugResult.Page 1}})">Next</button>
|
|
<button {{if ge .DebugResult.Page .DebugResult.TotalPages}}disabled{{end}} onclick="goToDebugPage({{.DebugResult.TotalPages}})">Last</button>
|
|
<span class="page-info">Page {{.DebugResult.Page}} of {{.DebugResult.TotalPages}}</span>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
|
|
<script>
|
|
function toggleDebugExpand(id) {
|
|
var el = document.getElementById(id);
|
|
if (el) el.classList.toggle('show');
|
|
}
|
|
function goToDebugPage(page) {
|
|
var url = '/debug' + (page > 1 ? '?page=' + page : '');
|
|
htmx.ajax('GET', url, {target: '#content', swap: 'innerHTML'});
|
|
history.pushState({}, '', url);
|
|
}
|
|
</script>
|
|
{{end}}
|