Merge ticket/024-popout-tab-independent-rolling-range-and-controls

Resolves conflicts with tickets 006 (header-click collapse) and 009
(all-dashboards print view) in CollapsibleSection.tsx, Dashboards.tsx,
and Metrics.tsx: dropped a spurious onToggle addition from the
worktree's stale base that duplicated already-merged header-collapse
behavior, keeping only the activePreset plumbing; wired activePreset
through Dashboards' non-empty-state header too, which the source
branch (based on a pre-print-view commit) never had to touch.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o

webapp/src/components/Metrics.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import type { TimeRange } from './LogTimeline'
+import type { TimeRange, TimeRangePresetId } from './LogTimeline'
 import {
   ApiError,
   declareMetric,
@@ -78,7 +78,7 @@ function sparkline(values: BucketValue[], range: TimeRange | null): string {
   return slots.map((count) => SPARK_CHARS[Math.round((count / max) * (SPARK_CHARS.length - 1))]).join('')
 }
 
-export function Metrics({ range }: { range: TimeRange | null }) {
+export function Metrics({ range, activePreset }: { range: TimeRange | null; activePreset?: TimeRangePresetId | null }) {
   const [metrics, setMetrics] = useState<MetricDeclaration[]>([])
   const [selected, setSelected] = useState<string | null>(null)
   const [bucketValues, setBucketValues] = useState<BucketValue[]>([])
@@ -198,7 +198,7 @@ export function Metrics({ range }: { range: TimeRange | null }) {
         </div>
         <div className="flex items-center gap-1.5">
           <CollapseToggle collapsed={collapsed} />
-          <PopOutButton section="metrics" range={range} />
+          <PopOutButton section="metrics" range={range} activePreset={activePreset} />
         </div>
       </div>
       <div className="flex gap-4 p-3" hidden={collapsed}>