14 lines
5.4 KiB
HTML
14 lines
5.4 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Codex Lens</title><link rel="stylesheet" href="style.css"><link rel="stylesheet" href="fancy.css"></head><body>
|
|
<aside><div class="brand"><span class="mark">◉</span><div>CODEX <b>LENS</b></div></div><nav><a class="active">Overview</a><a href="#models">Models</a><a href="#projects">Projects</a><a href="#sessions">Sessions</a></nav><div class="aside-foot"><span class="pulse"></span> Local data only<br><small>Nothing leaves this machine</small></div></aside>
|
|
<main><header><div><p class="eyebrow">LOCAL INTELLIGENCE</p><h1>Your work, in focus.</h1><p id="subtitle">Scanning Codex sessions…</p></div><button id="rescan">↻ Rescan data</button></header>
|
|
<section class="quick-ranges" aria-label="Quick date ranges"><button data-days="0">Today</button><button data-days="7">7 days</button><button data-days="30">30 days</button><button data-days="90">90 days</button><button data-days="all" class="active">All time</button></section>
|
|
<section class="filters"><label>From<input id="from" type="date"></label><label>To<input id="to" type="date"></label><label>Project<select id="project"><option value="">All projects</option></select></label><label>Model<select id="model"><option value="">All models</option></select></label><label>Source<select id="source"><option value="">All sources</option></select></label><button id="clear">Clear</button></section>
|
|
<section class="cards"><article class="hero-card"><span>API-equivalent cost</span><strong id="cost">—</strong><small id="coverage">Based on current standard pricing</small></article><article><span>Total tokens</span><strong id="tokens">—</strong><small id="tokenMix">—</small></article><article><span>Cache hit rate</span><strong id="cache">—</strong><small id="cacheSaved">—</small></article><article><span>Sessions / turns</span><strong id="activity">—</strong><small id="duration">—</small></article></section>
|
|
<section class="mini-cards"><article><span>Uncached input</span><b id="uncached">—</b><small id="uncachedShare">—</small></article><article><span>Reasoning output</span><b id="reasoning">—</b><small id="reasoningShare">—</small></article><article><span>Average session</span><b id="avgSession">—</b><small id="avgCost">—</small></article><article><span>Busiest day</span><b id="peakDay">—</b><small id="peakTokens">—</small></article><article><span>Active days</span><b id="activeDays">—</b><small id="streak">—</small></article><article><span>Models used</span><b id="modelCount">—</b><small id="topModel">—</small></article></section>
|
|
<section class="insight-strip"><article><span>Average model call</span><b id="avgCall">—</b><small id="callsPerDay">—</small></article><article><span>Median active day</span><b id="medianDay">—</b><small id="dailyAverage">—</small></article><article><span>Output intensity</span><b id="outputRate">—</b><small>Output as share of all tokens</small></article><article><span>Estimated cache saving</span><b id="cacheSaving">—</b><small>Versus standard input rates</small></article></section>
|
|
<section class="panel wide"><div class="panel-head"><div><p class="eyebrow">MODEL TIMELINE</p><h2>Which models powered each day</h2></div><div class="chart-actions"><button class="chart-mode active" data-mode="models">Models</button><button class="chart-mode" data-mode="tokens">Token mix</button></div></div><div id="modelLegend" class="model-legend"></div><div id="chart" class="chart"></div><div class="axis-note" id="axisNote">Stacked totals by model · hover any day for details</div></section>
|
|
<div class="grid"><section class="panel" id="models"><div class="panel-head"><div><p class="eyebrow">MODEL MIX</p><h2>Models</h2></div></div><div id="modelBars"></div></section><section class="panel"><div class="panel-head"><div><p class="eyebrow">COMPOSITION</p><h2>Where tokens go</h2></div></div><div class="donut-wrap"><div id="donut" class="donut"><div><b id="donutTotal">—</b><small>tokens</small></div></div><div id="mixLegend"></div></div></section></div>
|
|
<section class="panel wide" id="projects"><div class="panel-head"><div><p class="eyebrow">WORKSPACES</p><h2>Project overview</h2></div><small>Click a bar to drill down</small></div><div id="projectChart" class="project-chart"></div><div class="table-tools"><input id="projectSearch" type="search" placeholder="Search projects…"><select id="projectSort"><option value="tokens">Sort by tokens</option><option value="cost">Sort by cost</option><option value="cache">Sort by cache rate</option><option value="output">Sort by output</option></select></div><div class="table-wrap"><table><thead><tr><th>Project</th><th>Tokens</th><th>Input</th><th>Output</th><th>Cache</th><th>Est. cost</th><th>Turns</th></tr></thead><tbody id="projectsBody"></tbody></table></div></section>
|
|
<section class="panel wide" id="sessions"><div class="panel-head"><div><p class="eyebrow">DEEP DIVE</p><h2>Heaviest sessions</h2></div><small>Top 100 for current filter</small></div><div class="table-wrap"><table><thead><tr><th>Started</th><th>Project</th><th>Model</th><th>Tokens</th><th>Cached</th><th>Output</th><th>Est. cost</th></tr></thead><tbody id="sessionsBody"></tbody></table></div></section>
|
|
<footer>Codex Lens · Estimates are API-equivalent, not actual ChatGPT/Codex charges. Reasoning tokens are included in output token counts.</footer></main><script src="app.js"></script></body></html>
|