Portal look: aligned header and footer, 7-day chart, today's reasons, pass rate

Header, breadcrumb, page and footer share one 1180px column; the header
marks the current page; a footer sits at the bottom of every page.
Dashboard: pass rate on Checked today, a Last 7 days Pass / Fail / Review
chart, today's Fail and Review reasons grouped with counts, and three
equal cards (Claim status, Runs, Find a claim). Motion is movement only
and off under prefers-reduced-motion. Context.md brought up to date.

Snapshot of local 9d5ac63 (tree scanned: no real claim ids, no patient
data).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Context.md

@@ -173,8 +173,9 @@ Get-ChildItem tests\test_*.py | ForEach-Object { "$($_.Name): $((python $_.FullN
   this machine, with ODBC Driver 18 for SQL Server.
 - Tests run offline against fake HTML pages in `tests/fixtures/` and fake DB
   connections; they never touch eCW or SQL Server (`test_cdp_browser.py`
-  starts a local Chromium on a debug port). As of 2026-10-23: 71 test
-  files, **1211 tests**, all passed in the full run (earlier flaky, each
+  starts a local Chromium on a debug port). As of 2026-10-26: 71 test
+  files, **1215 tests** (full run 2026-10-23: 1211/1211; the 4 new Portal
+  tests and every Portal test file passed 2026-10-26) (earlier flaky, each
   failed once and passed on rerun: test_verify_no_live_writes,
   depression_dx_pointer, progress_note_wait — watch them) (about 5 minutes for all of them).
 
@@ -428,6 +429,21 @@ noted in Comments (Pass); Billing Notes unreadable or sliding fee UNKNOWN →
 ### Results database + web page (since 2026-10-08)
 The same Charge Summary rows also go to SQL Server, and a local page shows
 them. Spec: `docs/superpowers/specs/2026-10-08-results-db-and-web-page-design.md`.
+**Portal look since `a436489` (2026-10-26, operator: "konjam attractive,
+content add, grid correct, header footer align"):** header, breadcrumb,
+page and footer share one 1180px column; header has a "CV" mark,
+tab-style links with the current page marked (`aria-current`), a user
+avatar; a footer at the bottom of every page (brand, PHI note, mode).
+Dashboard adds the pass rate on Checked today, a **Last 7 days** Pass /
+Fail / Review chart (a day links to its page), **Today's Fail and Review
+reasons** (comments grouped with counts; the extra `day_results` query
+runs only when today has claims) and three equal cards (Claim status,
+Runs, Find a claim). Motion is movement only, never opacity (a tab the
+browser holds in the background must not stay faded), and off under
+`prefers-reduced-motion`; still no inline `style=` attributes (a test).
+Checked in the Browser pane against a made-up-data preview (port 8765,
+a scratchpad script; no SQL, no real users), desktop and phone width.
+The running Portal shows it after `run_web.bat` is restarted.
 - Server `MECARE331\MECARE331`, database `Charge_Validation`, table
   `dbo.CV_ChargeSummary` (every table of this project starts with **`CV_`**,
   operator 2026-10-12): the format's 24 columns + `run_at`, `run_mode`
@@ -586,7 +602,9 @@ them. Spec: `docs/superpowers/specs/2026-10-08-results-db-and-web-page-design.md
 
 History: `git log --oneline`.
 
-Last code commits: `8fea168` (2026-10-23, "Chrome open" box before the
+Last code commits: `a436489` (2026-10-26, Portal look: aligned header /
+footer, 7-day chart, today's reasons, pass rate — §5), `2d4d4fc`
+(2026-10-23, tracked files de-identified — §7), `8fea168` (2026-10-23, "Chrome open" box before the
 login and the empty first tab closed, in a Chrome the run opened — §2),
 `1c7eb55` (2026-10-23, #25: G0468 → Review when the preventive visit
 history is not checked — the Cigna plans), `ac25f83` (2026-10-23, #25 `medicare_pps_code` — PPS
@@ -671,7 +689,7 @@ Status lives in Jira; the open work is in §6 and §10.
 | EEWA-15 | bh_h_code_modifier (#12 H codes) | Done (closed 2026-10-20) |
 | EEWA-16 | medicare_billing_screening (#14; rulings pending) | Done (closed 2026-10-20) |
 | EEWA-17 | Results database and web page | Done (closed 2026-10-20) |
-| EEWA-18 | Claim-by-claim run stability (clean page, stacked dialogs, ghost form) | In Progress |
+| EEWA-18 | Claim-by-claim run stability (clean page, stacked dialogs, ghost form) | Done (closed 2026-10-26: 50/50 runs 22/10 and 23/10) |
 | EEWA-19 | medicaid_uncheck_cpts (#43 15851/15852, #44 73521; Medicaid only, not RAE — ruled 2026-10-14) | Done (closed 2026-10-20) |
 | EEWA-20 | dental_dummy_codes (#48 DPIMP on Dental payers) | In Progress |
 | EEWA-21 | injection_admin_code (#20 add 96372; only the operator's 41 codes — ruled 2026-10-14) | In Progress |
@@ -684,9 +702,9 @@ Status lives in Jira; the open work is in §6 and §10.
 | EEWA-28 | medicare_vaccine_a6 (#19 G0008/G0009 on Medicare → condition code A6; UB done, HCFA Review — no mapping needed, Medicare = UB) | To Do |
 | EEWA-30 | medicaid_pregnancy_th (#23: TH modifier on a pregnancy visit on Medicaid) | To Do |
 | EEWA-29 | medicare_wellness_history (#27/#28/#29: G0402 / G0438 / G0439 billed too often → Review) | To Do |
-| EEWA-31 | run_events + Runs page (Stage 1) | In Progress (built 2026-10-22, `751a177`; seen on four live runs that day, incl. a full 50-claim Portal run) |
+| EEWA-31 | run_events + Runs page (Stage 1) | Done (closed 2026-10-26; built `751a177`, seen on every live run since 2026-10-22) |
 | EEWA-32 | portal sign-in (Stage 2: Portal Users, Roles, Started By / Stopped By); blocked by EEWA-31 | In Progress (built 2026-10-22, `c230a8e`; live Sign-in and a Portal Start with Started By 2026-10-22; Viewer not yet tried) |
-| EEWA-33 | portal run alerts (Stage 3: Run Error banner, `started_by` column); blocked by EEWA-32 | In Progress (built 2026-10-22, `ecbbf3a`; `started_by` seen on all 50 rows of the 18:47 Portal run; banner not yet seen live) |
+| EEWA-33 | portal run alerts (Stage 3: Run Error banner, `started_by` column); blocked by EEWA-32 | Done (closed 2026-10-26; built `ecbbf3a`; banner seen after the 19:42 run, `started_by` on the Portal runs' rows) |
 | EEWA-34 | medicare_pps_code (#25) — spec | To Do (parent of the work below) |
 | EEWA-35 | #25 PPS Code check — Review when missing | In Progress (built 2026-10-23, `ac25f83`; not run live) |
 | EEWA-36 | #25 add the PPS Code in LIVE-WRITE; blocked by EEWA-35 | In Progress (built 2026-10-23, `ac25f83`; not run live) |

tests/test_web_app.py

@@ -9,6 +9,7 @@ Claim numbers here are made up.
 """
 
 import io
+import re
 import sys
 import json
 import pathlib
@@ -227,6 +228,63 @@ def the_dashboard_tiles_are_todays_counts():
         in html
 
 
+@case
+def the_dashboard_shows_todays_pass_rate():
+    today = date.today()
+    html = _client(FakeRepo(days=[_day(today, 30, 2, 24, 5, 1)]))[0] \
+        .get("/").text
+    assert '<span class="rate">80% pass</span>' in html
+    html = _client(FakeRepo(days=[]))[0].get("/").text
+    assert 'class="rate"' not in html, "no claims today: no rate"
+
+
+@case
+def the_dashboard_shows_the_last_seven_days_oldest_first():
+    today = date.today()
+    days = [_day(today - timedelta(days=i), 10 + i, 1, 8, 2, i % 2)
+            for i in range(9)]                       # newest first, as repo
+    html = _client(FakeRepo(days=days))[0].get("/").text
+    assert 'id="week"' in html
+    shown = re.findall(r'data-day="([\d-]+)"', html)
+    assert shown == [(today - timedelta(days=i)).isoformat()
+                     for i in range(6, -1, -1)], shown
+    assert f'href="/day/{(today - timedelta(days=3)).isoformat()}"' in html
+    assert 'data-n="13"' in html, "a day's claims count"
+
+
+@case
+def the_dashboard_lists_todays_top_fail_and_review_reasons():
+    run = datetime.combine(date.today(), datetime.min.time()) \
+        + timedelta(hours=10)
+    tele = "Telehealth (POS 02, modifier 93 on 99213)"
+    rows = ([_row(f"90000{i}", "Fail", i, run, comments=tele)
+             for i in range(1, 4)]
+            + [_row("9000005", "Fail", 5, run, comments="ICD <pointer>"),
+               _row("9000006", "Review", 6, run, comments="Could not search"),
+               _row("9000007", "Pass", 7, run, comments="Clean claims")])
+    html = _client(FakeRepo(days=[_day(date.today(), 6, 1, 1, 4, 1)],
+                            rows=rows))[0].get("/").text
+    box = html.split('id="reasons"', 1)[1].split("</section>", 1)[0]
+    assert box.index(tele) < box.index("ICD &lt;pointer&gt;") \
+        < box.index("Could not search"), box
+    assert '<b class="Fail">3</b>' in box, "grouped, with its count"
+    assert "Clean claims" not in box, "Pass is not a reason"
+    html = _client(FakeRepo(rows=[]))[0].get("/").text
+    assert "No Fail or Review today" in html
+
+
+@case
+def every_page_has_the_footer_and_marks_where_you_are():
+    client, _ = _client()
+    for path in _PAGES:
+        html = client.get(path).text
+        foot = html.split('<footer class="foot">', 1)[1]
+        assert "Ecare India" in foot and "patient data" in foot, path
+    html = client.get("/days").text
+    assert '<a href="/days" class="on" aria-current="page">Claim status</a>' \
+        in html, "the page you are on is marked in the header"
+
+
 @case
 def an_old_one_run_link_goes_to_that_runs_day():
     client, repo = _client()

web/app.py

@@ -31,7 +31,8 @@ import sys
 import html
 import json
 import pathlib
-from datetime import date, datetime
+from collections import Counter
+from datetime import date, datetime, timedelta
 
 ROOT = pathlib.Path(__file__).resolve().parent.parent
 if str(ROOT / "src") not in sys.path:
@@ -248,6 +249,17 @@ def _counts(rows) -> dict:
     return out
 
 
+def _reasons(rows, top=6) -> list:
+    """A day's Fail and Review comments, grouped: `[{category, comment,
+    count}]`, most frequent first, Fail before Review on a tie."""
+    counted = Counter((r.get("category"), (r.get("comments") or "").strip())
+                      for r in rows if r.get("category") in ("Fail", "Review"))
+    ordered = sorted(counted.items(),
+                     key=lambda kv: (-kv[1], kv[0][0] != "Fail", kv[0][1]))
+    return [{"category": cat, "comment": text or "(no comment)", "count": n}
+            for (cat, text), n in ordered[:top]]
+
+
 def create_app(repo, allowed_hosts=ALLOWED_HOSTS, runner=None,
                allowed_origins=ALLOWED_ORIGINS, logs_dir=None,
                screenshots_root=None, users_store=None,
@@ -385,9 +397,15 @@ def create_app(repo, allowed_hosts=ALLOWED_HOSTS, runner=None,
         today = date.today()
         counts = next((d for d in days if d["day"] == today),
                       {"day": today, "runs": 0, **_counts([])})
+        week = sorted((d for d in days
+                       if today - timedelta(days=6) <= d["day"] <= today),
+                      key=lambda d: d["day"])
+        # Only a day with claims costs the second query.
+        reasons = (_reasons(_db(repo.day_results, today))
+                   if counts["claims"] else [])
         return _page(request, "dashboard.html", [["Dashboard", None]],
                      today=counts, has_runs=bool(days),
-                     alert=_last_run_alert())
+                     alert=_last_run_alert(), week=week, reasons=reasons)
 
     @app.get("/days", response_class=HTMLResponse)
     def days_page(request: Request):

web/templates/base.html

@@ -21,35 +21,76 @@
   }
   * { box-sizing: border-box; }
   body { margin: 0; background: var(--bg); color: var(--text);
-         font: 14px/1.45 "Segoe UI", system-ui, sans-serif; }
+         font: 14px/1.45 "Segoe UI", system-ui, sans-serif;
+         display: flex; flex-direction: column; min-height: 100vh; }
   a { color: var(--accent); text-decoration: none; }
   a:hover { text-decoration: underline; }
-  header.top { background: var(--navy); color: #fff; padding: 12px 24px;
-               display: flex; align-items: center; gap: 14px; }
+  /* Header, breadcrumb, page and footer share one column (1180px), so
+     their edges line up (operator, 2026-10-26). */
+  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; width: 100%; }
+  header.top { background: var(--navy); color: #fff; }
+  header.top .wrap { display: flex; align-items: center; gap: 14px;
+                     min-height: 58px; }
   header.top .brand { color: #fff; font-size: 17px; font-weight: 600;
-                      letter-spacing: .2px; }
+                      letter-spacing: .2px; display: flex; align-items: center; }
   header.top .brand:hover { text-decoration: none; }
+  header.top .mark { display: inline-grid; place-items: center; width: 30px;
+                     height: 30px; border-radius: 8px; background: #fff;
+                     color: var(--navy); font-size: 12px; font-weight: 800;
+                     margin-right: 10px; letter-spacing: .5px; }
   .pill { border-radius: 12px; padding: 2px 10px; font-size: 11px;
           font-weight: 700; letter-spacing: .4px; background: var(--pass);
           color: #fff; }
   .pill.LIVE-WRITE { background: var(--fail); }
-  header.top nav.links { margin-left: auto; display: flex; gap: 18px;
+  header.top nav.links { margin-left: auto; display: flex; gap: 4px;
                          align-items: center; }
-  header.top nav.links a { color: #e3ecf7; font-weight: 600; }
-  header.top .who { color: #b9c6d6; font-size: 13px; }
+  header.top nav.links a { color: #e3ecf7; font-weight: 600; padding: 6px 11px;
+                           border-radius: 6px; transition: background .15s; }
+  header.top nav.links a:hover { background: rgba(255, 255, 255, .08);
+                                 text-decoration: none; }
+  header.top nav.links a.on { background: rgba(255, 255, 255, .16); color: #fff; }
+  header.top .who { color: #b9c6d6; font-size: 13px; display: flex;
+                    align-items: center; gap: 7px; margin-left: 10px; }
   header.top .who b { color: #fff; }
+  header.top .avatar { display: inline-grid; place-items: center; width: 26px;
+                       height: 26px; border-radius: 50%; background: var(--accent);
+                       color: #fff; font-size: 12px; font-weight: 700; }
   header.top form.out { margin: 0; }
   header.top form.out button { background: transparent; border-color: #6f86a3;
                                font-weight: 400; padding: 4px 10px; }
   .msg { border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
   .msg.bad { background: var(--fail-bg); color: var(--fail); }
   .msg.good { background: var(--pass-bg); color: var(--pass); }
-  nav.crumbs { background: var(--navy-2); color: #b9c6d6; padding: 7px 24px;
+  nav.crumbs { background: var(--navy-2); color: #b9c6d6; padding: 7px 0;
                font-size: 13px; }
   nav.crumbs a { color: #e3ecf7; }
   nav.crumbs .sep { margin: 0 8px; color: #7d8ea3; }
   nav.crumbs .here { color: #fff; font-weight: 600; }
-  main { max-width: 1180px; margin: 0 auto; padding: 22px 24px 40px; }
+  main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto;
+         padding: 22px 24px 40px; }
+  footer.foot { background: var(--panel); border-top: 1px solid var(--line);
+                color: var(--muted); font-size: 12px; }
+  footer.foot .wrap { display: flex; gap: 16px; align-items: center;
+                      justify-content: space-between; flex-wrap: wrap;
+                      padding-top: 12px; padding-bottom: 12px; }
+  footer.foot b { color: var(--text); font-weight: 600; }
+  /* Motion: short, never in the way, off when Windows asks for less. */
+  /* Movement only, never opacity: a tab the browser holds in the
+     background must not leave the page faded. */
+  @keyframes rise { from { transform: translateY(8px); }
+                    to { transform: none; } }
+  .card, .tile { animation: rise .35s ease both; }
+  .tiles > :nth-child(2) { animation-delay: .06s; }
+  .tiles > :nth-child(3) { animation-delay: .12s; }
+  .tiles > :nth-child(4) { animation-delay: .18s; }
+  a.tile, a.card { transition: transform .15s, box-shadow .15s,
+                   border-color .15s; }
+  a.tile:hover, a.card:hover { transform: translateY(-2px);
+    box-shadow: 0 6px 18px rgba(18, 53, 91, .12); }
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { animation: none !important;
+                             transition: none !important; }
+  }
   h1 { font-size: 20px; margin: 0 0 4px; }
   .sub { color: var(--muted); margin: 0 0 16px; }
   .card { background: var(--panel); border: 1px solid var(--line);
@@ -91,7 +132,6 @@
            border-radius: 10px; padding: 26px; color: var(--muted);
            text-align: center; }
   .note { color: var(--muted); font-size: 12px; }
-  footer.note { max-width: 1180px; margin: 0 auto; padding: 0 24px 24px; }
   /* Tables: short, no sideways scroll; long text cut on one line. */
   table.list { width: 100%; border-collapse: separate; border-spacing: 0;
                background: var(--panel); border: 1px solid var(--line);
@@ -146,7 +186,9 @@
   @media (max-width: 760px) {
     .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
     main { padding: 16px; }
-    header.top, nav.crumbs { padding-left: 16px; padding-right: 16px; }
+    .wrap { padding-left: 16px; padding-right: 16px; }
+    header.top .wrap { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
+    header.top nav.links { margin-left: 0; flex-wrap: wrap; }
   }
 {% block style %}{% endblock %}
 </style>
@@ -169,24 +211,32 @@
 </script>
 </head>
 <body>
+{% set section = crumbs[1][0] if crumbs | length > 1 else crumbs[0][0] %}
 <header class="top">
-  <a class="brand" href="/">eCW Charge Validation</a>
+  <div class="wrap">
+  <a class="brand" href="/"><span class="mark" aria-hidden="true">CV</span>eCW Charge Validation</a>
   <span class="pill {{ mode }}" title="SAVE_CORRECTIONS mode">{{ mode }}</span>
   {% if user %}<nav class="links">
-    <a href="/days">Claim status</a><a href="/runs">Runs</a>
-    {% if is_admin %}<a href="/admin/users">Users</a><a href="/admin/signins">Sign-ins</a>{% endif %}
-    <a class="who" href="/account/password" title="Change password"><b>{{ user.display_name }}</b> · {{ user.role }}</a>
+    {% for label, link, admin in [("Dashboard", "/", False), ("Claim status", "/days", False), ("Runs", "/runs", False), ("Users", "/admin/users", True), ("Sign-ins", "/admin/signins", True)] %}{% if not admin or is_admin %}{% if label == section %}<a href="{{ link }}" class="on" aria-current="page">{{ label }}</a>{% else %}<a href="{{ link }}">{{ label }}</a>{% endif %}{% endif %}{% endfor %}
+    <a class="who" href="/account/password" title="Change password"><span class="avatar" aria-hidden="true">{{ (user.display_name or "?")[:1] | upper }}</span><b>{{ user.display_name }}</b> · {{ user.role }}</a>
     <form class="out" method="post" action="/signout"><input type="hidden" name="token" value="{{ run_token }}"><button type="submit">Sign out</button></form>
   </nav>{% endif %}
+  </div>
 </header>
 <nav class="crumbs">
-  {% for label, link in crumbs %}{% if not loop.first %}<span class="sep">›</span>{% endif %}{% if link %}<a href="{{ link }}">{{ label }}</a>{% else %}<span class="here">{{ label }}</span>{% endif %}{% endfor %}
+  <div class="wrap">{% for label, link in crumbs %}{% if not loop.first %}<span class="sep">›</span>{% endif %}{% if link %}<a href="{{ link }}">{{ label }}</a>{% else %}<span class="here">{{ label }}</span>{% endif %}{% endfor %}</div>
 </nav>
 <main>
 {% block content %}{% endblock %}
 </main>
-<footer class="note">Local page (127.0.0.1) — contains patient data; do not
-  share screenshots outside the team.</footer>
+<footer class="foot">
+  <div class="wrap">
+    <span><b>eCW Charge Validation</b> · Ecare India</span>
+    <span class="phi">Local page — contains patient data; do not share
+      screenshots outside the team.</span>
+    <span>Mode <b>{{ mode }}</b></span>
+  </div>
+</footer>
 {% block scripts %}{% endblock %}
 </body>
 </html>

web/templates/dashboard.html

@@ -16,12 +16,61 @@
           font-weight: 600; }
   /* `.row { display: flex }` beats the browser's [hidden] rule. */
   .botrun [hidden] { display: none; }
-  .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
-             align-items: stretch; }
-  .actions .card { margin-bottom: 0; }
-  a.big { display: flex; align-items: center; justify-content: center;
-          gap: 10px; font-size: 18px; padding: 22px; border-radius: 10px;
-          height: 100%; }
+  .tile .rate { display: block; margin-top: 4px; font-size: 12px;
+                color: var(--pass); font-weight: 600; }
+  /* Two columns, then three equal cards: every row the same edges. */
+  .split { display: grid; grid-template-columns: 3fr 2fr; gap: 18px;
+           margin-bottom: 18px; }
+  .split .card, .actions .card { margin-bottom: 0; }
+  .card-h { display: flex; justify-content: space-between;
+            align-items: baseline; margin-bottom: 12px; }
+  .card-h h2 { margin: 0; }
+  .week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
+          gap: 10px; align-items: end; height: 170px; }
+  a.wd { display: flex; flex-direction: column; align-items: center;
+         justify-content: flex-end; height: 100%; color: var(--text);
+         text-decoration: none; }
+  a.wd .col { display: flex; flex-direction: column; width: 70%;
+              max-width: 42px; border-radius: 6px 6px 2px 2px;
+              overflow: hidden; background: var(--head); min-height: 4px;
+              height: 0; }
+  a.wd:hover .col { outline: 2px solid var(--accent); outline-offset: 2px; }
+  a.wd .col i { display: block; }
+  a.wd .col i.Pass { background: var(--pass); }
+  a.wd .col i.Fail { background: var(--fail); }
+  a.wd .col i.Review { background: var(--review-bar); }
+  a.wd .cnt { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
+  a.wd .lbl { font-size: 12px; color: var(--muted); margin-top: 6px; }
+  .legend { display: flex; gap: 14px; margin-top: 10px; font-size: 12px;
+            color: var(--muted); }
+  .legend span::before { content: ""; display: inline-block; width: 9px;
+                         height: 9px; border-radius: 2px; margin-right: 5px; }
+  .legend .Pass::before { background: var(--pass); }
+  .legend .Fail::before { background: var(--fail); }
+  .legend .Review::before { background: var(--review-bar); }
+  ol.reasons { list-style: none; margin: 0; padding: 0; }
+  ol.reasons li { display: flex; gap: 10px; align-items: baseline;
+                  padding: 7px 0; border-bottom: 1px solid var(--line); }
+  ol.reasons li:last-child { border-bottom: 0; }
+  ol.reasons b { min-width: 30px; text-align: center; border-radius: 10px;
+                 padding: 1px 8px; font-size: 12px; }
+  ol.reasons b.Fail { background: var(--fail-bg); color: var(--fail); }
+  ol.reasons b.Review { background: var(--review-bg); color: var(--review); }
+  ol.reasons span { overflow: hidden; text-overflow: ellipsis;
+                    white-space: nowrap; }
+  .actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
+             gap: 18px; align-items: stretch; }
+  a.card.go { display: flex; align-items: center; gap: 14px; color: var(--text); }
+  a.card.go:hover { text-decoration: none; border-color: var(--accent); }
+  a.card.go b, form.search > b { display: block; font-size: 15px; }
+  a.card.go .ic { display: grid; place-items: center; width: 40px; height: 40px;
+                  border-radius: 10px; background: var(--hilite);
+                  color: var(--accent); font-size: 20px; flex: none; }
+  a.card.go .arrow { margin-left: auto; color: var(--accent); font-size: 18px; }
+  a.card.go .note { display: block; }
+  form.search.card { display: block; }
+  form.search .find { display: flex; gap: 8px; margin-top: 8px; }
+  form.search .find input { flex: 1; min-width: 0; }
   .today-h { display: flex; justify-content: space-between; align-items: baseline;
              margin: 4px 0 10px; }
   .today-h h2 { font-size: 15px; margin: 0; }
@@ -37,7 +86,9 @@
   #live-list li.st-checking { background: var(--hilite); }
   #live-list li.st-checking .st { color: var(--accent); font-weight: 600; }
   #live-list li.st-idle .st { color: var(--muted); }
-  @media (max-width: 760px) { .actions { grid-template-columns: 1fr; } }
+  @media (max-width: 760px) {
+    .actions, .split { grid-template-columns: 1fr; }
+  }
   /* The last Run ended badly (EEWA-33). */
   .alert { background: var(--fail-bg); color: var(--fail);
            border: 1px solid #f5c2bd; border-left: 5px solid var(--fail);
@@ -82,19 +133,53 @@
   {% if today.claims %}<a href="/day/{{ today.day.isoformat() }}">Open today's claims →</a>{% endif %}
 </div>
 <div class="tiles">
-  <a class="tile" href="/day/{{ today.day.isoformat() }}"><span class="n">{{ today.claims }}</span><span class="l">Checked today</span></a>
+  <a class="tile" href="/day/{{ today.day.isoformat() }}"><span class="n">{{ today.claims }}</span><span class="l">Checked today</span>{% if today.claims %}<span class="rate">{{ (100 * today.pass_count / today.claims) | round | int }}% pass</span>{% endif %}</a>
   <a class="tile Pass" href="/day/{{ today.day.isoformat() }}?category=Pass"><span class="n">{{ today.pass_count }}</span><span class="l">Pass</span></a>
   <a class="tile Fail" href="/day/{{ today.day.isoformat() }}?category=Fail"><span class="n">{{ today.fail_count }}</span><span class="l">Fail</span></a>
   <a class="tile Review" href="/day/{{ today.day.isoformat() }}?category=Review"><span class="n">{{ today.review_count }}</span><span class="l">Review</span></a>
 </div>
 
+<div class="split">
+  <section class="card" id="week">
+    <div class="card-h"><h2>Last 7 days</h2><a href="/days">All days →</a></div>
+    {% if week %}
+    <div class="week">
+      {% for d in week %}
+      <a class="wd" href="/day/{{ d.day.isoformat() }}" data-day="{{ d.day.isoformat() }}" title="{{ d.day | longdate }}: {{ d.pass_count }} Pass, {{ d.fail_count }} Fail, {{ d.review_count }} Review">
+        <span class="cnt">{{ d.claims }}</span>
+        <span class="col" data-n="{{ d.claims }}"><i class="Review" data-n="{{ d.review_count }}"></i><i class="Fail" data-n="{{ d.fail_count }}"></i><i class="Pass" data-n="{{ d.pass_count }}"></i></span>
+        <span class="lbl">{{ d.day.strftime("%a %d") }}</span>
+      </a>
+      {% endfor %}
+    </div>
+    <div class="legend"><span class="Pass">Pass</span><span class="Fail">Fail</span><span class="Review">Review</span></div>
+    {% else %}
+    <p class="note">No claims checked in the last 7 days.</p>
+    {% endif %}
+  </section>
+  <section class="card" id="reasons">
+    <div class="card-h"><h2>Today's Fail and Review reasons</h2>{% if today.claims %}<a href="/day/{{ today.day.isoformat() }}?category=Fail">Open →</a>{% endif %}</div>
+    {% if reasons %}
+    <ol class="reasons">
+      {% for r in reasons %}<li><b class="{{ r.category }}">{{ r.count }}</b><span>{{ r.comment }}</span></li>
+      {% endfor %}
+    </ol>
+    {% else %}
+    <p class="note">No Fail or Review today.</p>
+    {% endif %}
+  </section>
+</div>
+
 <div class="actions">
-  <a class="btn big" href="/days" id="claim-status">Claim status →</a>
+  <a class="card go" href="/days" id="claim-status"><span class="ic" aria-hidden="true">▦</span><span><b>Claim status</b><span class="note">Every day's claims, by result</span></span><span class="arrow">→</span></a>
+  <a class="card go" href="/runs"><span class="ic" aria-hidden="true">◷</span><span><b>Runs</b><span class="note">Logins, timings, errors</span></span><span class="arrow">→</span></a>
   <form class="search card" method="get" action="/claim">
-    <strong>Find a claim</strong>
+    <b>Find a claim</b>
+    <div class="find">
       <input type="search" name="claim_no" placeholder="Claim #"
              inputmode="numeric" aria-label="Claim number">
       <button type="submit">Find</button>
+    </div>
   </form>
 </div>
 {% if not has_runs %}
@@ -113,6 +198,33 @@
 {% endblock %}
 {% block scripts %}
 <script>
+(() => {
+  // Last 7 days: each bar as tall as its day's claims, its parts as its
+  // counts; today's numbers count up once (skipped when motion is off).
+  const calm = matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const cols = [...document.querySelectorAll('.week .col')];
+  const top = Math.max(1, ...cols.map(c => Number(c.dataset.n) || 0));
+  cols.forEach(c => c.querySelectorAll('i').forEach(i => {
+    i.style.flexGrow = Number(i.dataset.n) || 0;
+  }));
+  cols.forEach(c => {
+    // 75% at most: the count above and the day below share the height.
+    c.style.height = Math.max(3, 75 * (Number(c.dataset.n) || 0) / top) + '%';
+  });
+  if (calm) return;
+  document.querySelectorAll('.tile .n').forEach(el => {
+    const to = Number(el.textContent) || 0, t0 = performance.now();
+    if (!to) return;
+    const step = t => {
+      const p = Math.min((t - t0) / 700, 1);
+      el.textContent = Math.round(to * (1 - Math.pow(1 - p, 3)));
+      if (p < 1) requestAnimationFrame(step);
+    };
+    requestAnimationFrame(step);
+  });
+})();
+</script>
+<script>
 (() => {
   const token = document.querySelector('meta[name="run-token"]').content;
   // A Viewer sees the run, but gets no Start / Stop (the server refuses