<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Security-Policy"
content="default-src 'none'; script-src 'self'; style-src 'self'; connect-src 'self'; base-uri 'none'; form-action 'none'" />
<title>Innate — Knowledge Base</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<header>
<div class="brand">
<span class="brand-mark" aria-hidden="true"><span class="brand-mark-dot"></span></span>
<span class="brand-name">Innate</span>
<span class="muted brand-sub" data-i18n="subtitle">knowledge base</span>
</div>
<nav class="seg tabs" aria-label="view">
<button id="tab-knowledge" class="seg-btn active" data-i18n="tab_knowledge">Knowledge</button>
<button id="tab-traces" class="seg-btn" data-i18n="tab_traces">LLM Traces</button>
</nav>
<button id="health" class="health" aria-expanded="false" aria-controls="overview"></button>
<button id="review-btn" class="review-btn">
<span class="review-dot" aria-hidden="true"></span>
<span data-i18n="health_review">review queue</span> <b id="review-count">0</b>
</button>
<div class="header-toggles">
<button id="lang-toggle" class="toggle-btn toggle-btn-text"></button>
<button id="theme-toggle" class="toggle-btn"></button>
</div>
</header>
<section id="overview" class="overview hidden" aria-hidden="true"></section>
<main id="kb-view" class="two-pane">
<aside class="list-pane">
<div id="queue-banner" class="queue-banner hidden">
<div class="queue-banner-head">
<span class="queue-banner-title"><span aria-hidden="true">⚠</span> <span data-i18n="review_title">Review queue</span></span>
<button id="queue-exit" class="btn-ghost-sm" data-i18n="exit">Exit</button>
</div>
<p class="queue-banner-body" data-i18n="review_banner">Chunks flagged by repeated negative feedback. Filters are disabled — click an item to adjudicate.</p>
</div>
<div id="kb-filters" class="filters">
<label class="field">
<span class="field-label" data-i18n="f_state">state</span>
<select id="f-state" class="select">
<option value="" data-i18n="opt_all">all</option>
<option value="pending">pending</option>
<option value="active">active</option>
<option value="archived">archived</option>
<option value="invalidated">invalidated</option>
</select>
</label>
<label class="field">
<span class="field-label" data-i18n="f_origin">origin</span>
<select id="f-origin" class="select">
<option value="" data-i18n="opt_all">all</option>
<option value="captured">captured</option>
<option value="distilled">distilled</option>
<option value="spark">spark</option>
</select>
</label>
<button id="reload" class="icon-btn" data-i18n-title="reload" title="Reload">⟳</button>
</div>
<ul id="chunks" class="rows scroll"></ul>
<div class="pager">
<button id="prev" class="pager-btn" data-i18n="prev">‹ Prev</button>
<span id="page-info" class="pager-info"></span>
<button id="next" class="pager-btn" data-i18n="next">Next ›</button>
</div>
</aside>
<section class="detail-pane scroll">
<div id="detail" class="detail-empty">
<div class="empty-icon" aria-hidden="true">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4" width="17" height="16" rx="2.5"></rect><line x1="7" y1="9" x2="14" y2="9"></line><line x1="7" y1="13" x2="16" y2="13"></line><line x1="7" y1="16.5" x2="11" y2="16.5"></line></svg>
</div>
<div class="empty-text">
<span class="empty-title" data-i18n="empty_title">No item selected</span>
<span class="empty-hint" data-i18n="detail_placeholder">Select an item to view its detail.</span>
</div>
</div>
</section>
</main>
<main id="trace-view" class="two-pane hidden">
<aside class="list-pane">
<div class="filters">
<label class="field">
<span class="field-label" data-i18n="f_kind">kind</span>
<select id="t-kind" class="select">
<option value="" data-i18n="opt_all">all</option>
<option value="chat">chat</option>
<option value="embedding">embedding</option>
</select>
</label>
<label class="field">
<span class="field-label" data-i18n="f_status">status</span>
<select id="t-status" class="select">
<option value="" data-i18n="opt_all">all</option>
<option value="ok">ok</option>
<option value="http_4xx">http_4xx</option>
<option value="http_5xx">http_5xx</option>
<option value="rate_limited">rate_limited</option>
<option value="transport">transport</option>
<option value="error">error</option>
</select>
</label>
<button id="t-reload" class="icon-btn" data-i18n-title="reload" title="Reload">⟳</button>
</div>
<ul id="traces" class="rows scroll"></ul>
<div class="pager pager-center"><span id="trace-info" class="pager-info"></span></div>
</aside>
<section class="detail-pane scroll">
<div id="trace-detail" class="detail-empty">
<div class="empty-icon" aria-hidden="true">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M4 12h16M4 17h10"></path></svg>
</div>
<div class="empty-text">
<span class="empty-title" data-i18n="empty_title">No item selected</span>
<span class="empty-hint" data-i18n="trace_placeholder">Select a call to view its request & response.</span>
</div>
</div>
</section>
</main>
<div id="dialog-overlay" class="overlay hidden">
<div class="sheet" role="dialog" aria-modal="true" aria-labelledby="dialog-title">
<div class="sheet-body">
<div class="sheet-head">
<span id="dialog-icon" class="sheet-icon" aria-hidden="true"></span>
<h2 id="dialog-title"></h2>
</div>
<p id="dialog-desc" class="sheet-desc"></p>
<label for="dialog-reason" class="sheet-label" data-i18n="reason_label">Reason</label>
<textarea id="dialog-reason" class="sheet-input" rows="3"></textarea>
</div>
<div class="sheet-foot">
<button id="dialog-cancel" class="btn-ghost" data-i18n="cancel">Cancel</button>
<button id="dialog-confirm" class="btn-primary" disabled></button>
</div>
</div>
</div>
<div id="toast-wrap" class="toast-wrap" aria-live="polite"></div>
<script src="/app.js"></script>
</body>
</html>