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>

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>
-    <input type="search" name="claim_no" placeholder="Claim #"
-           inputmode="numeric" aria-label="Claim number">
-    <button type="submit">Find</button>
+    <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