ZFS tab: pools, caching tiers and writes full width; write and drain rates measured between real updates

A txg records its bytes only when it syncs and the mover reports every 2 s, so a per-sample delta
read 0 most of the time. Rates are now taken over the gap between syncs (or mover updates) and held
until the next one.

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

web/src/ZFS.tsx

@@ -568,13 +568,13 @@ function ARCSection() {
           <span><b>All reads</b></span><span className="num"><b>{fmtPct(hitPct(L.Hits, L.Misses))}</b></span><span className="num">{fmtN(L.Hits)}</span><span className="num">{fmtN(L.Misses)}</span>
         </div>
       </section>
-      {d.pools.length > 0 && <div className="cards" style={{ marginTop: 8 }}>{d.pools.map((p) => <PoolTiers key={p.pool} p={p} v={v} />)}</div>}
+      {d.pools.length > 0 && <div className="cards full" style={{ marginTop: 8 }}>{d.pools.map((p) => <PoolTiers key={p.pool} p={p} v={v} />)}</div>}
       {v.writes && v.writes.pools.length > 0 && (
         <>
           <div className="dash-bar" style={{ marginTop: 12 }}><h2 className="section">Writes</h2><span className="spacer" />
             <span className="muted small">what is waiting to reach each pool, and how fast it is getting there</span>
           </div>
-          <div className="cards">{v.writes.pools.map((p) => <WritePath key={p.pool} w={v.writes!} p={p} h={whist} />)}</div>
+          <div className="cards full">{v.writes.pools.map((p) => <WritePath key={p.pool} w={v.writes!} p={p} h={whist} />)}</div>
         </>
       )}
     </>
@@ -607,7 +607,7 @@ export default function ZFS() {
     <div className="dash">
       <div className="dash-bar"><h2 className="section">Pools</h2></div>
       {zfs.pools.length === 0 && <div className="notice">ZFS is present but no pools are imported.</div>}
-      <div className="cards">{zfs.pools.map((p) => <PoolCard key={p.name} p={p} onChanged={load} />)}</div>
+      <div className="cards full">{zfs.pools.map((p) => <PoolCard key={p.name} p={p} onChanged={load} />)}</div>
 
       <div className="dash-bar" style={{ marginTop: 12 }}><h2 className="section">Cache</h2><span className="spacer" />
         <span className="muted small">the ARC in RAM, and what each pool has in front of its disks</span>

web/src/styles.css

@@ -99,6 +99,7 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 .dash > * { flex-shrink: 0; }
 .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
 .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }
+.cards.full { grid-template-columns: minmax(0, 1fr); } /* one card per row, the width of the page */
 .tile, .card { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; min-width: 0; }
 .tile .label, .card h2 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
 .tile .value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }