Carry over rolling preset id to popout tabs and add range controls to standalone Metrics/Dashboards

Popped-out tabs now carry the active TimeRangePresetId (e.g. "5m") via a
`preset` query param instead of only resolved absolute startMs/endMs, so a
rolling preset keeps independently sliding in the new tab on its own polling
cadence rather than freezing to the source tab's window at open time. A
fixed/dragged range is still carried over as absolute bounds. StandaloneRanged
(metrics/dashboards standalone pages) now owns its own preset/range state and
renders LogTimeline for its own preset buttons and drag-to-select UI, instead
of only ever showing a frozen, uncontrollable range. log and params standalone
pages are unchanged.

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

webapp/src/components/Dashboards.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import type { TimeRange } from './LogTimeline'
+import type { TimeRange, TimeRangePresetId } from './LogTimeline'
 import { PanelChart } from './PanelChart'
 import {
   ApiError,
@@ -95,7 +95,7 @@ function AutosaveStatus({ status, error }: { status: SaveStatus; error: string |
   return null
 }
 
-export function Dashboards({ range }: { range: TimeRange | null }) {
+export function Dashboards({ range, activePreset }: { range: TimeRange | null; activePreset?: TimeRangePresetId | null }) {
   const [activeProfile, setActiveProfile] = useState<string | null>(null)
   const [dashboards, setDashboards] = useState<Dashboard[]>([])
   const [selectedId, setSelectedId] = useState<string | null>(null)
@@ -224,7 +224,7 @@ export function Dashboards({ range }: { range: TimeRange | null }) {
           </div>
           <div className="flex items-center gap-1.5">
             <CollapseToggle collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
-            <PopOutButton section="dashboards" range={range} />
+            <PopOutButton section="dashboards" range={range} activePreset={activePreset} />
           </div>
         </div>
         <div className="p-3 text-xs text-text-faint">