Phase 7: telemetry and usage (daily rollup + week dashboard)
Build on Phases 1–6. Telemetry already arrived on
restrict/<device>/telemetry; this phase stores it in a daily rollup and
shows it.
- store: migration 003 adds telemetry_daily (device, day, app seconds,
site seconds). InsertTelemetry maintains the affected days in the same
transaction; RebuildRollups backfills and repairs it. UsageRange and
TopUsage serve the week grid and top lists. CapAudit enforces the
size-capped append-only audit log from AGENTS.md §7.
- web: GET /devices/{id}/usage — Monday-to-Sunday totals plus the top 10
apps and top 10 sites, using CSP-safe native <progress> bars.
- theme.js: light/dark from the OS preference, with a nav toggle, loaded
as an external script so the strict CSP still holds.
- cmd/control: `rollup` subcommand; rollup rebuild and audit cap at
start-up and every 15 minutes.
- Version 0.5.0-phase7 (compose, Makefile, docs).
Tests: go test ./... and go vet ./... pass in golang:1.25-alpine.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
@@ -546,6 +546,65 @@ a.button-utility { text-decoration: none; }
|
||||
.list-entry__value { flex: 1 1 auto; word-break: break-all; }
|
||||
.list-entry__remove { margin: 0; }
|
||||
|
||||
/* ---------- Usage (Phase 7) ---------- */
|
||||
|
||||
.usage-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 520px;
|
||||
}
|
||||
.usage-table th,
|
||||
.usage-table td {
|
||||
text-align: left;
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
border-bottom: 1px solid var(--hairline);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.usage-table thead th {
|
||||
font: var(--type-eyebrow);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.usage-table tbody th { font: var(--type-body-md); color: var(--ink); white-space: nowrap; }
|
||||
.usage-table__date { font: var(--type-caption); color: var(--ink-muted); }
|
||||
.usage-table__num { font: var(--type-body-md); color: var(--ink-secondary); white-space: nowrap; }
|
||||
.usage-table__bar { width: 40%; min-width: 120px; }
|
||||
.usage-table__today th { color: var(--primary); }
|
||||
|
||||
/* Native <progress> bars: no inline styles, so the strict
|
||||
Content-Security-Policy (style-src 'self') keeps holding. */
|
||||
.usage-bar {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
border: 0;
|
||||
border-radius: var(--rounded-full);
|
||||
overflow: hidden;
|
||||
background: var(--surface-2);
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.usage-bar::-webkit-progress-bar { background: var(--surface-2); border-radius: var(--rounded-full); }
|
||||
.usage-bar::-webkit-progress-value { background: var(--primary); border-radius: var(--rounded-full); }
|
||||
.usage-bar::-moz-progress-bar { background: var(--primary); border-radius: var(--rounded-full); }
|
||||
.usage-bar--full { margin-top: var(--space-xxs); }
|
||||
|
||||
.usage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
|
||||
.usage-item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: var(--space-xxs) var(--space-sm);
|
||||
align-items: center;
|
||||
padding: var(--space-xs) 0;
|
||||
border-top: 1px solid var(--hairline);
|
||||
}
|
||||
.usage-item:first-child { border-top: 0; }
|
||||
.usage-item--empty { color: var(--ink-muted); font-style: italic; }
|
||||
.usage-item__name { font: var(--type-body-md); color: var(--ink); overflow-wrap: anywhere; }
|
||||
.usage-item__time { font: var(--type-body-sm); color: var(--ink-muted); white-space: nowrap; }
|
||||
.usage-item .usage-bar { grid-column: 1 / -1; }
|
||||
|
||||
/* ---------- Responsive ---------- */
|
||||
|
||||
@media (max-width: 760px) {
|
||||
|
||||
Reference in New Issue
Block a user