From 1aa541e49c34490075288d9def9b5cff9d72e3dd Mon Sep 17 00:00:00 2001 From: AsteroidHunter <65871446+AsteroidHunter@users.noreply.github.com> Date: Wed, 20 May 2026 14:50:14 -0700 Subject: [PATCH 01/10] Bumped header sizes and added stale-fade tiers to idle Stop/Notification tickets MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #7: .brand font-size 14px → 18px, .brand-version 11px → 14px, .conn dot 11px → 14px with its connected-state glow 3px → 4px. Pure CSS, no layout changes. #1: New staleClass(ticket, now) helper alongside typeClass/formatAge returns 'stale-1'..'stale-4' based on age in minutes (>=2, >=4, >=8, >=16). PermissionRequest tickets and working tickets always return '' so red attention and active processing never fade. Wired into the
  • class list. Four new CSS rules between .ticket.pressing and .ticket.working apply filter: saturate(N) at 0.75 / 0.5 / 0.25 / 0 — the whole ticket (bg, border, title text, accents) ages together in step jumps. Placed before .ticket.working so the pastel-green wins on the defensive co-apply case. The existing 5s `now` reactive tick already drives age-label re-renders, so tier rollovers ride that same render pass — zero new timers or allocations. --- src/routes/+page.svelte | 44 +++++++++++++++++++++++++++++++++++------ 1 file changed, 38 insertions(+), 6 deletions(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 2159e49..4a16310 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -191,6 +191,21 @@ return 'STOP'; } + // Idle Stop/Notification tickets desaturate in step jumps as they age, so a + // glanceable signal of "how stale is this thing" is built into the dock. + // PermissionRequest never fades (load-bearing red attention); working state + // owns its own pastel-green visual and skips fading too. + function staleClass(ticket: Ticket, now: number): string { + if (ticket.working) return ''; + if (ticket.event_type === 'PermissionRequest') return ''; + const ageMin = (now - ticket.created_at) / 60_000; + if (ageMin >= 16) return 'stale-4'; + if (ageMin >= 8) return 'stale-3'; + if (ageMin >= 4) return 'stale-2'; + if (ageMin >= 2) return 'stale-1'; + return ''; + } + function formatAge(createdAt: number, now: number): string { const seconds = Math.max(0, Math.floor((now - createdAt) / 1000)); if (seconds < 5) return 'now'; @@ -282,7 +297,7 @@