client: show build version + browser diagnostics for bug triage

Fixes #68.

- Bar switcher and stats page get a low-contrast "wutzcalc <git-sha>"
  footer at the bottom (VersionFooter component, shared).
- Admin panel gets a fuller Diagnose section: version, user agent,
  screen resolution + device pixel ratio, viewport size, browser
  language.

Version is the short git commit sha, baked in at build time via
vite.config.ts define (falls back to "dev" if .git is unavailable at
build time, e.g. a tarball/CI-artifact deploy) - matches how deploys
actually run (pnpm build from a git checkout, per
deploy/wutzcalc.service), but stays defensive rather than failing the
build.

pnpm --filter client typecheck and build both clean.

client/src/admin/Admin.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
 import type { Bar, Drink } from '@wutzcalc/shared';
 import { errText, formatCents, j } from '../api';
+import { diagLines } from '../VersionFooter';
 
 // `Drink`/`Bar` come from @wutzcalc/shared — the tablet code already did
 // this, but Admin.tsx used to re-declare its own near-identical copies,
@@ -86,10 +87,25 @@ function Dashboard({ onLogout }: { onLogout: () => void }) {
       <Exports />
       <Drinks drinks={drinks} reload={reloadDrinks} />
       <Bars drinks={drinks} />
+      <Diagnose />
     </div>
   );
 }
 
+// #68: browser/build metadata for triaging a device-specific bug report
+// (e.g. "scrolling doesn't work on this one kiosk tablet") without having
+// to walk someone through DevTools over the phone.
+function Diagnose() {
+  return (
+    <>
+      <h2>Diagnose</h2>
+      <ul class="diag-list">
+        {diagLines().map(l => <li key={l}>{l}</li>)}
+      </ul>
+    </>
+  );
+}
+
 
 function Exports() {
   return (