fix: a portal a phone can navigate, and a usage panel that says something when the cache is old

**Navigation existed on mobile only as things that were hidden.** Two rails
were resolved below 768px by `display: none` and nothing else. `.adm-side`
carries the machine list, the assistants, all fourteen board sections and the
Leaderboard's own pages — twenty-two rows, gone, with no replacement, so a
phone got a board it could scroll and could not navigate. `.nav__links` did the
same to Board, Privacy, Agents, Compare and Pricing on the marketing page.

Both fold into panels now rather than vanishing. The section rail becomes a
drawer over the content, the pattern `.bv-rail` already uses, opened by the
topbar hamburger — a button that until now toggled the root rail between icons
and labels, a distinction mobile does not have because that rail is always
icons there. lib/mobileNav.js keeps the two meanings apart by breakpoint so
neither leaks into the other, and closes the drawer on a pick, the scrim,
Escape, or a widen back to desktop.

**A grid track nobody was placed into.** `.mkt-page` set `max-width: none` to
opt out of the 1180px reading width, but `.adm-page--wide` declares the same
specificity later in the file and won outright — so the Integrations grid, the
one layout here that genuinely wants the whole window, was capped and
left-aligned with a dead band beside it. Now an explicit `.adm-page--full`,
which Demand takes too. The mobile nav bar had the mirror of that bug: four
tracks for four children, but the absolutely-positioned links panel takes no
part in auto-placement, so the call to action landed in the `1fr` and stretched
into a banner swallowing the bar.

**Usage windows could not tell you whether anything was moving.** The
percentages come from a cache only Claude Code refreshes, so after an hour the
panel is three stale numbers and a caption, with the remedy hidden in a title
attribute no phone can show. The remedy is inline now, and beside it a figure
that cannot go stale: tokens over the trailing seven days, counted here from
transcripts already on disk, moving every cycle whatever the cache is doing.

Integrations was also two things — a root page and a board panel. Keeps the
page, drops the panel.

Author: reddy-sh

site/src/components/BoardView.jsx

@@ -8,7 +8,7 @@ import { AddMachineModal, MachinesPanel, UpgradeModal } from './board/enroll'
 import { ExtensionsCard, governanceBadges, McpCard, PermissionsCard, ToolCallsCard } from './board/governance'
 import Leaderboard from './board/leaderboard'
 import {
-    ActivityCard, Card, DriversCard, EndedFeed, HostsFeed, HoursCard, IntegrationsCard, LiveCard,
+    ActivityCard, Card, DriversCard, EndedFeed, HostsFeed, HoursCard, LiveCard,
     ModelsTable, Offboard, ProjectsFeed, PromptsFeed, RateCard, SessionsTable, SpendCard, Tiles,
     TokensCard, UsageWindows,
 } from './board/panels'
@@ -138,7 +138,6 @@ export default function BoardView({
   const toolId = (tool && tool.id) || 'claude-code'
   const gov = m.governance || NO_FACTS
   const codex = m.codex || NO_FACTS
-  const intSummary = m.integrationSummary || NO_FACTS
   const endings = data?.endings || NO_ROWS
   const hosts = data?.hosts || NO_ROWS
   const machines = data?.machines || NO_ROWS
@@ -193,13 +192,6 @@ export default function BoardView({
       { id: 'p-permissions', label: 'Permissions', icon: 'shield', badge: govB.permissions.text },
       { id: 'p-extensions', label: 'Extensions', icon: 'blocks', badge: govB.extensions.text },
       { id: 'p-machines', label: 'Machines', icon: 'machines', badge: up + '/' + hosts.length, tone: hosts.length && up < hosts.length ? 'bad' : null },
-      {
-        id: 'p-integrations',
-        label: 'Integrations',
-        icon: 'plug',
-        badge: (intSummary.reading || 0) + '/' + (intSummary.known || 0),
-        tone: (intSummary.needsSetup || 0) > 0 ? 'warn' : null,
-      },
       ...(toolId === 'claude-code'
         ? [{ id: 'p-prompts', label: 'Prompts', icon: 'prompts', badge: String((m.prompts || []).length) }]
         : []),
@@ -240,7 +232,7 @@ export default function BoardView({
       ...shared,
       { id: 'p-recently-finished', label: 'Recently finished', icon: 'ended', badge: endedHour ? String(endedHour) : null },
     ]
-  }, [cur, offboard, hosts, processes, endings, toolId, gov, codex, usage, intSummary, m.projects, m.prompts, m.limits, claude.daily, claude.models, myRank, profiles.length, embedded])
+  }, [cur, offboard, hosts, processes, endings, toolId, gov, codex, usage, m.projects, m.prompts, m.limits, claude.daily, claude.models, myRank, profiles.length, embedded])
 
   /* ── report state to parent when embedded ──
         Dependencies, not a bare effect: the shell turns this into state, so
@@ -326,9 +318,6 @@ export default function BoardView({
           <MachinesPanel machines={machines} cloud={cloud} onAdd={() => setAddOpen(true)} />
         </div>
       </Section>
-      <Section id="p-integrations">
-        <IntegrationsCard integrations={m.integrations} summary={m.integrationSummary} />
-      </Section>
       {toolId === 'claude-code' && <Section id="p-prompts"><PromptsFeed prompts={m.prompts} /></Section>}
     </>
   )
@@ -361,7 +350,7 @@ export default function BoardView({
           </Section>
           {leaderboardSection}
           <Section id="p-usage-windows" cols={2}>
-            <UsageWindows lim={m.limits} />
+            <UsageWindows lim={m.limits} usage={usage} />
             <HoursCard hours={claude.hours} />
           </Section>
           <Section id="p-activity" cols={2}>

site/src/components/Nav.jsx

@@ -1,7 +1,21 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
+
+const LINKS = [
+  ['#board', 'Board'],
+  ['#boundary', 'Privacy'],
+  ['#integrations', 'Agents'],
+  ['#compare', 'Compare'],
+  ['#pricing', 'Pricing'],
+]
 
 export default function Nav({ cta, onPortal }) {
   const navRef = useRef(null)
+  /* Below 768px the links do not fit beside the brand and the call to action,
+     and the stylesheet used to resolve that by hiding them outright — which
+     left a phone with a header of two buttons and no way to reach Board,
+     Privacy, Agents, Compare or Pricing at all. They fold into a panel under
+     the bar instead. */
+  const [open, setOpen] = useState(false)
 
   useEffect(() => {
     const onScroll = () => {
@@ -12,19 +26,48 @@ export default function Nav({ cta, onPortal }) {
     return () => window.removeEventListener('scroll', onScroll)
   }, [])
 
+  /* Anything that moves the page closes the panel: a link scrolls to a section
+     the panel is covering, Escape is the reflex, and a tap outside is what a
+     panel over content is expected to answer to. */
+  useEffect(() => {
+    if (!open) return
+    const onKey = (e) => { if (e.key === 'Escape') setOpen(false) }
+    const onClick = (e) => { if (!navRef.current?.contains(e.target)) setOpen(false) }
+    document.addEventListener('keydown', onKey)
+    document.addEventListener('click', onClick)
+    return () => {
+      document.removeEventListener('keydown', onKey)
+      document.removeEventListener('click', onClick)
+    }
+  }, [open])
+
   return (
-    <header className="nav" ref={navRef}>
+    <header className={'nav' + (open ? ' nav--open' : '')} ref={navRef}>
       <div className="nav__inner">
+        <button
+          type="button"
+          className="nav__menubtn"
+          aria-label={open ? 'Close menu' : 'Open menu'}
+          aria-expanded={open}
+          aria-controls="nav-links"
+          onClick={() => setOpen(o => !o)}
+        >
+          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+            {open ? (
+              <path d="M4 4l10 10M14 4L4 14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+            ) : (
+              <path d="M2.5 5h13M2.5 9h13M2.5 13h13" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+            )}
+          </svg>
+        </button>
         <a className="nav__brand" href="#top" aria-label="TokenHUD — Token Heads-Up Display">
           <span className="nav__brand-dot" aria-hidden="true" />
           <span>Token<b>HUD</b></span>
         </a>
-        <nav className="nav__links" aria-label="Primary">
-          <a href="#board">Board</a>
-          <a href="#boundary">Privacy</a>
-          <a href="#integrations">Agents</a>
-          <a href="#compare">Compare</a>
-          <a href="#pricing">Pricing</a>
+        <nav className="nav__links" id="nav-links" aria-label="Primary">
+          {LINKS.map(([href, label]) => (
+            <a key={href} href={href} onClick={() => setOpen(false)}>{label}</a>
+          ))}
         </nav>
         <button className="nav__cta" onClick={onPortal}>
           <span>{cta}</span>

site/src/components/Portal.jsx

@@ -13,6 +13,7 @@ import SectionRail from './admin/SectionRail'
 import { useNow } from './board/util'
 import BoardView from './BoardView'
 import AuthCard from './portal/AuthCard'
+import { useMobileNav } from '../lib/mobileNav'
 
 /* The portal: sign in, register machines, watch the board.
  *
@@ -230,6 +231,10 @@ export default function Portal({ onClose, user, onUser, onSelfHost }) {
   const toggleRoot = useCallback(() => {
     setRootMini(c => { save(SK_ROOTNAV, c ? '' : '1'); return !c })
   }, [])
+
+  /* The hamburger means "mini the root rail" on a desktop and "open the
+     section rail" on a phone; see lib/mobileNav.js. */
+  const { navOpen, onHamburger, closeNav } = useMobileNav({ setCollapsed, toggleRoot })
   const goto = useCallback(key => {
     if (key !== 'monitoring') setPendingTool(null)
     setSection(key); save(SK_SECTION, key)
@@ -294,7 +299,7 @@ export default function Portal({ onClose, user, onUser, onSelfHost }) {
   return (
     <div className="dashboard-frame adm">
       <AdminTopbar
-        onCollapse={toggleRoot}
+        onCollapse={onHamburger}
         onClose={onClose}
         onSignOut={handleSignOut}
         streaming={synced}
@@ -308,7 +313,12 @@ export default function Portal({ onClose, user, onUser, onSelfHost }) {
       <div className={'adm-shell'
         + (rootMini ? ' adm-shell--rootmini' : '')
         + (collapsed ? ' adm-shell--submini' : '')
-        + (hasSubNav ? '' : ' adm-shell--nosub')}>
+        + (hasSubNav ? '' : ' adm-shell--nosub')
+        + (navOpen ? ' adm-shell--navopen' : '')}>
+
+        {navOpen && (
+          <button className="adm-scrim" onClick={closeNav} aria-label="Close navigation" />
+        )}
 
         <RootRail
           section={section} onSection={goto}

site/src/components/SelfHost.jsx

@@ -9,6 +9,7 @@ import SectionRail from './admin/SectionRail'
 import Settings from './admin/Settings'
 import { ShareModal } from './board/share'
 import BoardView from './BoardView'
+import { useMobileNav } from '../lib/mobileNav'
 
 /* The self-host admin portal.
  *
@@ -519,6 +520,10 @@ export default function SelfHost({ onClose }) {
   const toggleRoot = useCallback(() => {
     setRootMini(c => { save(SK_ROOTNAV, c ? '' : '1'); return !c })
   }, [])
+
+  /* The hamburger means "mini the root rail" on a desktop and "open the
+     section rail" on a phone; see lib/mobileNav.js. */
+  const { navOpen, onHamburger, closeNav } = useMobileNav({ setCollapsed, toggleRoot })
   const goto = useCallback(key => {
     if (key !== 'monitoring') setPendingTool(null)
     setSection(key); save(SK_SECTION, key)
@@ -604,7 +609,7 @@ export default function SelfHost({ onClose }) {
   return (
     <div className="dashboard-frame adm">
       <AdminTopbar
-        onCollapse={toggleRoot}
+        onCollapse={onHamburger}
         serverUrl={serverUrl.current} serverOk
         onClose={onClose}
         theme={theme} onTheme={toggleTheme}
@@ -616,7 +621,12 @@ export default function SelfHost({ onClose }) {
       <div className={'adm-shell'
         + (rootMini ? ' adm-shell--rootmini' : '')
         + (collapsed ? ' adm-shell--submini' : '')
-        + (hasSubNav ? '' : ' adm-shell--nosub')}>
+        + (hasSubNav ? '' : ' adm-shell--nosub')
+        + (navOpen ? ' adm-shell--navopen' : '')}>
+
+        {navOpen && (
+          <button className="adm-scrim" onClick={closeNav} aria-label="Close navigation" />
+        )}
 
         <RootRail
           section={section} onSection={goto}

site/src/components/admin/IntegrationsPage.jsx

@@ -308,7 +308,7 @@ export default function IntegrationsPage({ snapshots, onNavigate }) {
   if (selected) {
     const fresh = rows.find(r => r.id === selected.id) || selected
     return (
-      <div className="adm-page adm-page--wide mkt-page">
+      <div className="adm-page adm-page--wide adm-page--full mkt-page">
         <DetailView row={fresh} multi={multi} onBack={() => setSelected(null)} />
       </div>
     )
@@ -326,7 +326,7 @@ export default function IntegrationsPage({ snapshots, onNavigate }) {
 
   if (!rows.length) {
     return (
-      <div className="adm-page adm-page--wide mkt-page">
+      <div className="adm-page adm-page--wide adm-page--full mkt-page">
         <div className="mkt-empty">
           <div className="mkt-empty-icon">
             <svg width="48" height="48" viewBox="0 0 48 48" fill="none"><rect x="4" y="8" width="40" height="32" rx="4" stroke="currentColor" strokeWidth="2"/><path d="M4 16h40M16 16v24M32 16v24" stroke="currentColor" strokeWidth="1.5" strokeDasharray="3 3"/><circle cx="24" cy="30" r="4" stroke="currentColor" strokeWidth="1.5"/></svg>
@@ -339,7 +339,7 @@ export default function IntegrationsPage({ snapshots, onNavigate }) {
   }
 
   return (
-    <div className="adm-page adm-page--wide mkt-page">
+    <div className="adm-page adm-page--wide adm-page--full mkt-page">
       {/* header strip */}
       <div className="mkt-header">
         <div className="mkt-header-left">

site/src/components/admin/LeaderboardPage.jsx

@@ -57,7 +57,10 @@ export default function LeaderboardPage({
 
   return (
     <TipProvider>
-      <div className="adm-page adm-page--wide">
+      {/* Demand is charts and stat tiles across the full width; the other three
+          are tables and headline copy, which read better against the 1180px
+          column. So the opt-out is per page rather than on the wrapper. */}
+      <div className={'adm-page adm-page--wide' + (page === 'demand' ? ' adm-page--full' : '')}>
         {page === 'standings' && <Standings board={board} meId={meId} right={shareBtn} />}
         {page === 'live' && <Live board={board} />}
         {page === 'models' && <Models board={board} />}

site/src/components/board/panels.jsx

@@ -95,7 +95,25 @@ function resetCell(row, now) {   /* eslint-disable-line no-unused-vars -- now fo
   return `Resets in ${dur(secs)}`
 }
 
-export function UsageWindows({ lim }) {
+/* Tokens over the trailing seven days, from this board's own transcript index.
+ *
+ * The percentages above it come out of Claude Code's cache and are only as
+ * fresh as the last time Claude Code talked to the usage endpoint. This is
+ * counted here, from files already on disk, so it moves every cycle whatever
+ * the cache is doing — which is the difference between a panel that has gone
+ * quiet and a panel that says nothing at all. */
+function tokensLast7(usage, now) {
+  const rows = (usage && usage.byDay) || []
+  if (!rows.length) return null
+  // `now` comes from the panel's ticking clock rather than Date.now(), so the
+  // window rolls with the same tick that ages the cache above it.
+  const cutoff = new Date(now - 7 * 86400_000).toISOString().slice(0, 10)
+  let total = 0
+  for (const r of rows) if (r && r.date && r.date >= cutoff) total += Number(r.tokens) || 0
+  return total || null
+}
+
+export function UsageWindows({ lim, usage }) {
   const now = useNow(1000)
 
   if (!lim || !lim.available) {
@@ -114,6 +132,7 @@ export function UsageWindows({ lim }) {
 
   const age = lim.ageSeconds
   const stale = age != null && age > (lim.staleAfterSeconds || 3600)
+  const live7 = tokensLast7(usage, now)
   const rows = (lim.windows || []).slice()
   const when = lim.fetchedAt ? clock(lim.fetchedAt) : 'unknown'
   const agoTxt = age == null ? '' : ` · ${dur(age)} ago`
@@ -157,6 +176,29 @@ export function UsageWindows({ lim }) {
           })}
         </tbody>
       </table>
+
+      {/* The figure that cannot go stale, whatever the cache is doing. Kept
+          under the table rather than in it: it answers a different question —
+          not "how much of the plan is gone" but "is anything still moving". */}
+      {live7 != null && (
+        <p className="bv-note" style={{ marginTop: 12 }}>
+          <b className="tnum">{compact(live7)}</b> tokens in the last 7 days —
+          counted here from your own transcripts, current as of this reading.
+        </p>
+      )}
+
+      {/* The remedy belongs where the problem is stated. It used to live only
+          in the stale caption's title attribute, which nobody hovers and a
+          phone cannot show at all. */}
+      {stale && (
+        <div className="bv-warnbar" style={{ marginTop: 12 }}>
+          These percentages are {dur(age)} old. TokenHUD never asks Anthropic for
+          them — it reads the cache Claude Code writes, and Claude Code only
+          refreshes it when it talks to the usage endpoint. Run <b>/usage</b> in
+          Claude Code and the next reading will pick it up. The reset countdowns
+          above are absolute and stay exact meanwhile.
+        </div>
+      )}
     </Card>
   )
 }

site/src/lib/mobileNav.js

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useState } from 'react'
+
+/* The section rail, on a phone.
+ *
+ * The admin shell is three columns — root rail, section rail, content — and
+ * below 768px there is only room for two. The stylesheet used to resolve that
+ * by hiding the section rail outright, which is the one rail that carries the
+ * machine list, the assistants, every board section and the Leaderboard's own
+ * pages. The result was a board a phone could scroll and could not navigate.
+ *
+ * So on mobile it becomes a drawer over the content, the same pattern
+ * `.bv-rail` already uses on the self-host board, opened by the topbar's
+ * hamburger — a button that until now toggled the root rail between icons and
+ * labels, which is a distinction mobile does not have because the root rail is
+ * always icons there. Same button, the meaning it should have had. */
+
+export const MOBILE_NAV = '(max-width: 768px)'
+
+const isMobile = () => window.matchMedia(MOBILE_NAV).matches
+
+export function useMobileNav({ setCollapsed, toggleRoot }) {
+  const [navOpen, setNavOpen] = useState(false)
+  const closeNav = useCallback(() => setNavOpen(false), [])
+
+  const onHamburger = useCallback(() => {
+    if (!isMobile()) return toggleRoot()
+    setNavOpen(open => {
+      // A drawer 300px wide showing nothing but icon stubs is a drawer for
+      // nothing, so opening it also un-minis the rail. Deliberately not saved:
+      // this is a mobile session making itself usable, not a person changing
+      // the preference their desktop reads back.
+      if (!open) setCollapsed(false)
+      return !open
+    })
+  }, [setCollapsed, toggleRoot])
+
+  /* Every row in the rail navigates somewhere, so once one is picked the
+     drawer has done its job. Listened for here rather than threaded through
+     two rail components that have four different callbacks between them. */
+  useEffect(() => {
+    if (!navOpen) return
+    const onClick = (e) => { if (e.target.closest?.('.adm-side .adm-item')) setNavOpen(false) }
+    const onKey = (e) => { if (e.key === 'Escape') setNavOpen(false) }
+    document.addEventListener('click', onClick)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('click', onClick)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [navOpen])
+
+  /* Widening back to desktop leaves the drawer state set but invisible, and
+     the next hamburger press would then appear to do nothing. */
+  useEffect(() => {
+    const mq = window.matchMedia(MOBILE_NAV)
+    const onChange = () => { if (!mq.matches) setNavOpen(false) }
+    mq.addEventListener('change', onChange)
+    return () => mq.removeEventListener('change', onChange)
+  }, [])
+
+  return { navOpen, onHamburger, closeNav }
+}