37ad39c8a3
* feat(home): status frame on /home — last sync, sessions, prompts, tokens, projects
Adds the homepage status frame: a 5-card row above the install-hero /
offboard-strip on /home showing the calling user's Last sync (their
last `agnes pull`), Sessions, Prompts, Tokens used, and Projects worked
on, with a 24h/7d pill toggle.
Backed by `GET /api/me/home-stats?window=` (one DuckDB CTE joining
`users` + `usage_session_summary` + `usage_events`) and SSR'd from the
same `compute_home_stats` helper on initial paint so there's no
spinner. The window toggle is the only JS-driven path.
Side surfaces:
- `GET /api/sync/manifest` now stamps `users.last_pull_at` so
`agnes pull` (and the Claude Code SessionStart hook that wraps it)
imprints the analyst's last sync time for the new card.
- `usage_session_summary` gains four BIGINT token counters
(input_tokens, output_tokens, cache_read_tokens, cache_creation_tokens)
summed from JSONL `message.usage.*` per assistant turn.
- `USAGE_PROCESSOR_VERSION` bumps 1 → 2 so the session-pipeline
reprocess loop invalidates stale summaries and backfills tokens
on the next tick.
Schema migration v43 → v44 is idempotent ALTERs (last_pull_at +
4 token columns) — fresh installs receive them from `_SYSTEM_SCHEMA`,
upgrade path runs `_v43_to_v44`. Defaults (NULL / 0) backfill
existing rows cleanly.
9 new tests in tests/test_home_stats.py cover the migration,
endpoint shapes (24h/7d/unknown/empty/missing-user), and the
manifest-side last_pull_at bump.
* docs(CHANGELOG): homepage status frame entries under [Unreleased]
The post-rebase release-cut now belongs to whichever PR lands next
after main rolled to 0.54.9. This PR logs its bullets under
[Unreleased] (Added: homepage status frame, per-user pull tracking,
token counters; Changed: schema v43 → v44 migration) so they ride
out with the next release-cut.
* fix(tests): bump test_schema_v42_migration asserts to v44
CI failed because tests/test_schema_v42_migration.py hardcoded
`assert SCHEMA_VERSION == 43` and `assert v == 43` after init.
v44 (homepage stats frame backing columns) was introduced in the
preceding feat commit; this aligns the existing v42-era migration
tests with the new schema version.
* feat(home): gate status frame on operator flag + user.onboarded
Two gates on the homepage status frame:
1. **Operator master switch** — `get_home_status_frame_visibility()` in
app/instance_config.py mirrors the existing `get_home_automode_visibility()`
shape: env var `AGNES_HOME_SHOW_STATUS_FRAME` > yaml
`instance.home.show_status_frame` > default `True`. Cautious-rollout
instances can disable the frame without forking; the yaml example
documents both knobs.
2. **Onboarded gate** — the template only renders the frame when the
caller's `users.onboarded` is true. First-day users see a clean
install-hero before all-zero stat cards; the frame appears
automatically on the next render after `agnes init` POSTs
`/api/me/onboarded`.
Router skips the `compute_home_stats` DB read entirely when either
gate is closed; `home_stats` arrives at the template as None in that
branch and the `{% if %}` shortcuts the include.
Why both gates: PostHog feature flags evaluated and rejected — this
codebase uses PostHog for analytics capture only, not feature gating;
adding a per-user feature_enabled() call on the /home critical path
would couple the homepage render to a remote eval and still require
an admin master switch. The onboarded gate is a UX coherence rule
layered on top of the operator switch, not an A/B test signal.
3 new tests in test_home_stats.py cover the env-var resolution
(falsey values + default-true). The yaml example gets a `home:`
block documenting both `show_automode` (pre-existing flag, was
undocumented in the example) and `show_status_frame`.
205 lines
6.9 KiB
HTML
205 lines
6.9 KiB
HTML
{# Homepage status frame — five counters with a 24h/7d window toggle.
|
|
|
|
Initial paint is server-rendered from `home_stats` in ctx (no
|
|
spinner, no FOUC). The toggle JS calls GET /api/me/home-stats?window=
|
|
and rewrites the card values in place. #}
|
|
|
|
<style>
|
|
.hp-stats {
|
|
margin: 0 0 24px 0;
|
|
padding: 16px 20px;
|
|
border: 1px solid var(--hp-border-light, rgba(0,0,0,0.08));
|
|
border-radius: 12px;
|
|
background: var(--hp-card-bg, #fff);
|
|
}
|
|
.hp-stats-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
.hp-stats-title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--hp-text-muted, #555);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.hp-stats-toggle {
|
|
display: inline-flex;
|
|
border: 1px solid var(--hp-border-light, rgba(0,0,0,0.12));
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
}
|
|
.hp-stats-toggle button {
|
|
border: 0;
|
|
padding: 4px 12px;
|
|
font: inherit;
|
|
font-size: 12px;
|
|
background: transparent;
|
|
color: var(--hp-text-muted, #555);
|
|
cursor: pointer;
|
|
}
|
|
.hp-stats-toggle button.is-active {
|
|
background: var(--hp-accent, #2563eb);
|
|
color: #fff;
|
|
}
|
|
.hp-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 12px;
|
|
}
|
|
@media (max-width: 720px) {
|
|
.hp-stats-grid { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
.hp-stat {
|
|
padding: 10px 12px;
|
|
border-radius: 8px;
|
|
background: var(--hp-stat-bg, rgba(0,0,0,0.025));
|
|
}
|
|
.hp-stat .lbl {
|
|
font-size: 11px;
|
|
color: var(--hp-text-muted, #6b7280);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
margin-bottom: 4px;
|
|
}
|
|
.hp-stat .val {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color: var(--hp-text, #111);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.hp-stat .sub {
|
|
font-size: 11px;
|
|
color: var(--hp-text-muted, #6b7280);
|
|
margin-top: 2px;
|
|
}
|
|
</style>
|
|
|
|
<section class="hp-stats" id="hpStats"
|
|
data-initial-window="{{ home_stats.window }}">
|
|
<div class="hp-stats-head">
|
|
<div class="hp-stats-title">Status</div>
|
|
<div class="hp-stats-toggle" role="tablist" aria-label="Time window">
|
|
<button type="button" role="tab"
|
|
class="hp-stats-window {% if home_stats.window == '24h' %}is-active{% endif %}"
|
|
data-window="24h"
|
|
aria-selected="{{ 'true' if home_stats.window == '24h' else 'false' }}">24h</button>
|
|
<button type="button" role="tab"
|
|
class="hp-stats-window {% if home_stats.window == '7d' %}is-active{% endif %}"
|
|
data-window="7d"
|
|
aria-selected="{{ 'true' if home_stats.window == '7d' else 'false' }}">7d</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hp-stats-grid">
|
|
<div class="hp-stat">
|
|
<div class="lbl">Last sync</div>
|
|
<div class="val" data-stat="last_pull"
|
|
data-iso="{{ home_stats.last_pull_at or '' }}">
|
|
{% if home_stats.last_pull_at %}—{% else %}never{% endif %}
|
|
</div>
|
|
<div class="sub">your last <code>agnes pull</code></div>
|
|
</div>
|
|
<div class="hp-stat">
|
|
<div class="lbl">Sessions</div>
|
|
<div class="val" data-stat="sessions">{{ home_stats.sessions }}</div>
|
|
<div class="sub" data-stat="sessions-sub">
|
|
last {{ home_stats.window }}
|
|
</div>
|
|
</div>
|
|
<div class="hp-stat">
|
|
<div class="lbl">Prompts</div>
|
|
<div class="val" data-stat="prompts">{{ home_stats.prompts }}</div>
|
|
<div class="sub">user messages</div>
|
|
</div>
|
|
<div class="hp-stat">
|
|
<div class="lbl">Tokens</div>
|
|
<div class="val" data-stat="tokens">{{ home_stats.tokens.total }}</div>
|
|
<div class="sub" data-stat="tokens-sub">in + out + cache</div>
|
|
</div>
|
|
<div class="hp-stat">
|
|
<div class="lbl">Projects</div>
|
|
<div class="val" data-stat="projects">{{ home_stats.projects }}</div>
|
|
<div class="sub">distinct cwd</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
(function () {
|
|
const root = document.getElementById('hpStats');
|
|
if (!root) return;
|
|
|
|
function formatNumber(n) {
|
|
if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
|
|
if (n >= 10_000) return (n / 1_000).toFixed(0) + 'k';
|
|
if (n >= 1_000) return (n / 1_000).toFixed(1) + 'k';
|
|
return String(n);
|
|
}
|
|
|
|
function formatRelative(iso) {
|
|
if (!iso) return 'never';
|
|
const then = new Date(iso);
|
|
const sec = Math.max(0, (Date.now() - then.getTime()) / 1000);
|
|
if (sec < 60) return Math.floor(sec) + 's ago';
|
|
if (sec < 3600) return Math.floor(sec / 60) + 'm ago';
|
|
if (sec < 86400) return Math.floor(sec / 3600) + 'h ago';
|
|
return Math.floor(sec / 86400) + 'd ago';
|
|
}
|
|
|
|
function renderLastPull() {
|
|
const el = root.querySelector('[data-stat="last_pull"]');
|
|
const iso = el.getAttribute('data-iso') || '';
|
|
el.textContent = formatRelative(iso);
|
|
}
|
|
|
|
function apply(stats) {
|
|
root.querySelector('[data-stat="last_pull"]')
|
|
.setAttribute('data-iso', stats.last_pull_at || '');
|
|
renderLastPull();
|
|
root.querySelector('[data-stat="sessions"]').textContent =
|
|
formatNumber(stats.sessions);
|
|
root.querySelector('[data-stat="prompts"]').textContent =
|
|
formatNumber(stats.prompts);
|
|
root.querySelector('[data-stat="tokens"]').textContent =
|
|
formatNumber(stats.tokens.total);
|
|
root.querySelector('[data-stat="projects"]').textContent =
|
|
formatNumber(stats.projects);
|
|
root.querySelector('[data-stat="sessions-sub"]').textContent =
|
|
'last ' + stats.window;
|
|
}
|
|
|
|
async function fetchAndApply(win) {
|
|
try {
|
|
const r = await fetch('/api/me/home-stats?window=' + encodeURIComponent(win), {
|
|
credentials: 'same-origin',
|
|
});
|
|
if (!r.ok) return;
|
|
apply(await r.json());
|
|
} catch (e) {
|
|
// Silent — leave the SSR values up rather than flashing a
|
|
// half-broken state at the user.
|
|
}
|
|
}
|
|
|
|
root.querySelectorAll('.hp-stats-window').forEach((btn) => {
|
|
btn.addEventListener('click', () => {
|
|
const win = btn.getAttribute('data-window');
|
|
root.querySelectorAll('.hp-stats-window').forEach((b) => {
|
|
const on = b === btn;
|
|
b.classList.toggle('is-active', on);
|
|
b.setAttribute('aria-selected', on ? 'true' : 'false');
|
|
});
|
|
fetchAndApply(win);
|
|
});
|
|
});
|
|
|
|
// Convert the SSR ISO timestamp to a relative-time string on load,
|
|
// then keep it ticking once a minute so the card doesn't stale-out
|
|
// on long-lived tabs.
|
|
renderLastPull();
|
|
setInterval(renderLastPull, 60_000);
|
|
})();
|
|
</script>
|