Skip to content

Commit 1a246e6

Browse files
naymurdevnaymurdev
committed
chore: update the design of status page
1 parent c728001 commit 1a246e6

6 files changed

Lines changed: 556 additions & 0 deletions

File tree

‎.commandcode/design/checkup-report.html‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Command Code Status - Checkup Report</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<style>
9+
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
10+
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
11+
.report-section { border: 1px solid #222226; background: #0a0a0b; position: relative; }
12+
.corner-box { position: absolute; width: 20px; height: 20px; border: 1px solid #222226; background: #000; }
13+
</style>
14+
</head>
15+
<body class="bg-black text-[#fafafa]">
16+
<main class="mx-auto w-full max-w-6xl px-5 py-8 md:px-10 md:py-12">
17+
<header class="report-section mb-8 p-6 md:p-8">
18+
<div class="corner-box left-0 top-0 -translate-x-1/2 -translate-y-1/2"></div>
19+
<div class="corner-box right-0 top-0 translate-x-1/2 -translate-y-1/2"></div>
20+
<div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
21+
<div>
22+
<div class="mono mb-2 text-xs tracking-widest text-[#666]">// CHECKUP</div>
23+
<h1 class="text-4xl font-bold tracking-tight md:text-6xl">Command Code Status</h1>
24+
</div>
25+
<div class="mono text-left text-xs text-[#666] md:text-right">
26+
<div>COMMANDCODE REPORT</div>
27+
<div class="text-[#444]">2026-07-16</div>
28+
</div>
29+
</div>
30+
</header>
31+
32+
<section class="report-section mb-8 p-6 md:p-8">
33+
<div class="corner-box left-0 top-0 -translate-x-1/2 -translate-y-1/2"></div>
34+
<div class="corner-box right-0 top-0 translate-x-1/2 -translate-y-1/2"></div>
35+
<div class="grid gap-8 md:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]">
36+
<div>
37+
<div class="mono mb-2 text-xs tracking-widest text-[#666]">// OVERALL</div>
38+
<div class="text-6xl font-bold tracking-tight md:text-7xl">40</div>
39+
<div class="mt-1 text-lg text-[#666]">/ 60</div>
40+
<div class="mt-4 inline-flex border border-[#fbbf24]/30 bg-[#fbbf24]/10 px-3 py-1 text-sm text-[#fbbf24]">PROCEED WITH FIXES</div>
41+
</div>
42+
<div>
43+
<div class="mono mb-3 text-xs tracking-widest text-[#666]">// TL;DR</div>
44+
<p class="text-sm leading-6 text-[#a0a0a0]">Basically healthy and shippable. Two vitals fully healthy (readability, speed). Four carry contained watches: a reflexive violet accent, keyboard-inaccessible time selector, no reduced-motion support, and undersized touch targets.</p>
45+
<p class="mt-4 text-sm leading-6 text-[#fbbf24]">No critical blocker. Fix the accessibility and usability watches before calling it done.</p>
46+
</div>
47+
</div>
48+
</section>
49+
50+
<section class="report-section mb-8 p-6 md:p-8">
51+
<div class="mono mb-6 text-xs tracking-widest text-[#666]">// VITAL SIGNS</div>
52+
<div class="overflow-x-auto">
53+
<table class="w-full min-w-[720px] border-collapse text-sm">
54+
<thead>
55+
<tr class="border-b border-[#222226] text-left mono text-xs text-[#666]">
56+
<th class="py-3 pr-4 font-normal">#</th>
57+
<th class="py-3 pr-4 font-normal">VITAL</th>
58+
<th class="py-3 pr-4 font-normal">STATUS</th>
59+
<th class="py-3 pr-4 font-normal">SCORE</th>
60+
<th class="py-3 font-normal">KEY FINDING</th>
61+
</tr>
62+
</thead>
63+
<tbody>
64+
<tr class="border-b border-[#1a1a1e]"><td class="py-4 pr-4 text-[#555]">1</td><td class="py-4 pr-4 text-[#fafafa]">Intentionality</td><td class="py-4 pr-4 text-[#fbbf24]">Watch</td><td class="py-4 pr-4 text-[#fbbf24]">5/10</td><td class="py-4 text-[#a0a0a0]">Composition authored; identity accent is reflexive violet.</td></tr>
65+
<tr class="border-b border-[#1a1a1e]"><td class="py-4 pr-4 text-[#555]">2</td><td class="py-4 pr-4 text-[#fafafa]">Readability</td><td class="py-4 pr-4 text-[#34d399]">Healthy</td><td class="py-4 pr-4 text-[#34d399]">10/10</td><td class="py-4 text-[#a0a0a0]">Good contrast and sizes in both themes.</td></tr>
66+
<tr class="border-b border-[#1a1a1e]"><td class="py-4 pr-4 text-[#555]">3</td><td class="py-4 pr-4 text-[#fafafa]">Usability</td><td class="py-4 pr-4 text-[#fbbf24]">Watch</td><td class="py-4 pr-4 text-[#fbbf24]">5/10</td><td class="py-4 text-[#a0a0a0]">Time selector radios are display:none — keyboard-inaccessible.</td></tr>
67+
<tr class="border-b border-[#1a1a1e]"><td class="py-4 pr-4 text-[#555]">4</td><td class="py-4 pr-4 text-[#fafafa]">Responsiveness</td><td class="py-4 pr-4 text-[#fbbf24]">Watch</td><td class="py-4 pr-4 text-[#fbbf24]">5/10</td><td class="py-4 text-[#a0a0a0]">Time-selector labels ~36px, below 44px touch minimum.</td></tr>
68+
<tr class="border-b border-[#1a1a1e]"><td class="py-4 pr-4 text-[#555]">5</td><td class="py-4 pr-4 text-[#fafafa]">Speed</td><td class="py-4 pr-4 text-[#34d399]">Healthy</td><td class="py-4 pr-4 text-[#34d399]">10/10</td><td class="py-4 text-[#a0a0a0]">Static site, service-worker cached, fast.</td></tr>
69+
<tr class="border-b border-[#1a1a1e]"><td class="py-4 pr-4 text-[#555]">6</td><td class="py-4 pr-4 text-[#fafafa]">Accessibility</td><td class="py-4 pr-4 text-[#fbbf24]">Watch</td><td class="py-4 pr-4 text-[#fbbf24]">5/10</td><td class="py-4 text-[#a0a0a0]">Unfocusable radios, no reduced-motion, possible color-only status.</td></tr>
70+
</tbody>
71+
</table>
72+
</div>
73+
</section>
74+
75+
<section class="report-section mb-8 p-6 md:p-8">
76+
<div class="mono mb-6 text-xs tracking-widest text-[#666]">// PRESCRIPTIONS</div>
77+
<div class="space-y-5">
78+
<article class="border border-[#2a1d22] bg-[#110b0d] p-5">
79+
<div class="mono mb-2 text-xs text-[#f43f5e]">USABILITY</div>
80+
<h2 class="mb-2 text-lg font-semibold">Keyboard-inaccessible time selector</h2>
81+
<p class="mb-4 text-sm leading-6 text-[#a0a0a0]">Radios use display:none, removing them from the tab order. input:focus-visible styles are defined but can never fire. Intent was keyboard support; implementation blocks it.</p>
82+
<div class="border-l border-[#fbbf24] pl-4 text-sm leading-6 text-[#fbbf24]">FIX: Use visually-hidden (position:absolute; clip) so radios stay focusable. Transfer the focus ring to labels via input:focus-visible + label.</div>
83+
</article>
84+
<article class="border border-[#2a1d22] bg-[#110b0d] p-5">
85+
<div class="mono mb-2 text-xs text-[#f43f5e]">ACCESSIBILITY</div>
86+
<h2 class="mb-2 text-lg font-semibold">No reduced-motion support</h2>
87+
<p class="mb-4 text-sm leading-6 text-[#a0a0a0]">Loading spinner rotates indefinitely via SMIL. No prefers-reduced-motion query. CSS transitions also run unconditionally.</p>
88+
<div class="border-l border-[#fbbf24] pl-4 text-sm leading-6 text-[#fbbf24]">FIX: Add prefers-reduced-motion media query. Shorten transitions to near-zero. Hide the rotating spinner arc, keep the static circle.</div>
89+
</article>
90+
<article class="border border-[#2a1d22] bg-[#110b0d] p-5">
91+
<div class="mono mb-2 text-xs text-[#f43f5e]">RESPONSIVENESS</div>
92+
<h2 class="mb-2 text-lg font-semibold">Undersized touch targets</h2>
93+
<p class="mb-4 text-sm leading-6 text-[#a0a0a0]">Time-selector labels are ~36px tall (12px font + 6px padding), below the 44px minimum.</p>
94+
<div class="border-l border-[#fbbf24] pl-4 text-sm leading-6 text-[#fbbf24]">FIX: Enlarge vertical padding on pointer: coarse devices. Keep desktop compact.</div>
95+
</article>
96+
</div>
97+
</section>
98+
99+
<section class="report-section mb-8 p-6 md:p-8">
100+
<div class="mono mb-6 text-xs tracking-widest text-[#666]">// WHAT'S WORKING</div>
101+
<div class="grid gap-4 md:grid-cols-3">
102+
<article class="border border-[#1f1f24] p-4">
103+
<h2 class="mb-2 text-sm font-semibold">Monitor composition</h2>
104+
<p class="text-sm leading-6 text-[#a0a0a0]">Status list, time-range control, incident feed, dated history — matches the work pattern.</p>
105+
</article>
106+
<article class="border border-[#1f1f24] p-4">
107+
<h2 class="mb-2 text-sm font-semibold">Readable across themes</h2>
108+
<p class="text-sm leading-6 text-[#a0a0a0]">Good contrast in light and dark. Mono labels are small but appropriate.</p>
109+
</article>
110+
<article class="border border-[#1f1f24] p-4">
111+
<h2 class="mb-2 text-sm font-semibold">Fast delivery</h2>
112+
<p class="text-sm leading-6 text-[#a0a0a0]">Static site with service-worker caching. No jank.</p>
113+
</article>
114+
</div>
115+
</section>
116+
117+
<footer class="mono py-8 text-center text-xs tracking-widest text-[#444]">
118+
Generated with CommandCode - 2026-07-16
119+
</footer>
120+
</main>
121+
</body>
122+
</html>

‎.commandcode/design/checkup-report.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# Checkup Report — Command Code Status
2+
3+
**Project:** Command Code Status (status.commandcode.ai)
4+
**Mode:** checkup
5+
**Date:** 2026-07-16
6+
**Surface:** Live status page (dark + light themes), built as a static Sapper/Upptime site. Evidence gathered from `index.html`, `global.css`, four theme files, compiled component CSS, and the rendered page at status.commandcode.ai.
7+
8+
## Score
9+
10+
**40/60 — proceed with targeted fixes**
11+
12+
The surface is basically healthy and shippable. Two vitals are fully healthy; four carry real but contained watch items. No critical blocker prevents shipping, but the accessibility and usability watches should be fixed before calling the surface done.
13+
14+
## Vital Signs
15+
16+
| # | Vital | Status | Score | Key Finding |
17+
|---|---|---|---|---|
18+
| 1 | Intentionality | Watch | 5/10 | Composition is authored (schematic aesthetic), but the identity accent is violet — the one reflexive default. |
19+
| 2 | Readability | Healthy | 10/10 | System sans at 15-16px with 1.6 line-height. Mono labels at 13px are small but appropriate for labels. Contrast passes in both themes (near-white on near-black, near-black on near-white). |
20+
| 3 | Usability | Watch | 5/10 | Primary task (read status) works. Time-range selector is keyboard-inaccessible: radios use `display:none`, removing them from the tab order entirely. |
21+
| 4 | Responsiveness | Watch | 5/10 | Layout adapts at 640px and 400px; nav stacks, graphs reposition. Time-selector labels are ~36px tall, below the 44px touch-target minimum. |
22+
| 5 | Speed | Healthy | 10/10 | Static site with service-worker caching. Loads fast. Client-side hydration shows loading spinners while GitHub data fetches, expected for this architecture. |
23+
| 6 | Accessibility | Watch | 5/10 | Focus-visible styles are defined, but `display:none` radios can never receive focus. No `prefers-reduced-motion` handling — the loading spinner rotates indefinitely. Live status cards may convey state by border color + graph color alone (no text status label). |
24+
25+
## Prescriptions
26+
27+
### Usability — keyboard-inaccessible time selector
28+
29+
**What is broken:** The time-range radios (24h / 7d / 30d / 1y / all) are hidden with `display:none`. This removes them from the keyboard tab order, so keyboard and screen-reader users cannot change the range.
30+
31+
**Why it matters:** The global stylesheet even defines `input:focus-visible` outlines, but those can never trigger because the inputs are unfocusable. The intent was keyboard support; the implementation blocks it.
32+
33+
**Fix:** Replace `display:none` with the visually-hidden pattern (`position:absolute; clip`) so radios stay focusable. Transfer the focus ring to the adjacent label via `input:focus-visible + label`.
34+
35+
### Accessibility — no reduced-motion support
36+
37+
**What is broken:** The loading spinner uses an indefinite SMIL rotation. There is no `prefers-reduced-motion` media query. CSS transitions (nav, cards, buttons, data flash) also run unconditionally.
38+
39+
**Why it matters:** Vestibular-sensitive users get no relief. Reduced-motion is not optional.
40+
41+
**Fix:** Add `@media (prefers-reduced-motion: reduce)` that shortens transitions to near-zero and hides the rotating spinner arc, leaving the static circle as a motionless loading indicator.
42+
43+
### Responsiveness — undersized touch targets
44+
45+
**What is broken:** Time-selector labels are ~36px tall (12px font + 6px vertical padding), below the 44px minimum.
46+
47+
**Fix:** Enlarge vertical padding on `pointer: coarse` devices so touch users get comfortable targets without bloating the desktop layout.
48+
49+
## What's Working
50+
51+
- Composition matches the monitor work pattern: status list, time-range control, incident feed, dated history.
52+
- Readability is solid across both themes with good contrast.
53+
- Static delivery is fast and cached.
54+
- The schematic art direction gives the page a distinctive, authored feel.
55+
56+
## Next Modes
57+
58+
- `/design deslop` — fix the generic tech hue (intentionality) and the accessibility/usability watches.

0 commit comments

Comments
 (0)