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/CollapsibleSection.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import type { TimeRange } from './LogTimeline'
+import type { TimeRange, TimeRangePresetId } from './LogTimeline'
 
 /// Shared look for a primary section's title bar: shaded so it reads as a
 /// distinct band rather than blending into the section body below it.
@@ -64,21 +64,32 @@ export function CollapseToggle({ collapsed, onToggle }: { collapsed: boolean; on
 /// The four primary sections poppable into their own tab; matches the `?section=` query param a standalone page reads.
 export type PopOutSectionId = 'log' | 'params' | 'metrics' | 'dashboards'
 
-function popOutUrl(section: PopOutSectionId, range?: TimeRange | null): string {
+/// A rolling preset (anything but a manually dragged/fixed range) is carried over by id so the popped-out tab can resolve and keep re-resolving its own independent window of the same size, instead of freezing whatever absolute bounds happened to be active at click time. A fixed/dragged range has no such id, so it's carried over as absolute bounds, same as before.
+function popOutUrl(section: PopOutSectionId, options?: { range?: TimeRange | null; presetId?: TimeRangePresetId | null }): string {
   const query = new URLSearchParams({ section })
-  if (range) {
-    query.set('startMs', String(range.startMs))
-    query.set('endMs', String(range.endMs))
+  if (options?.presetId != null) {
+    query.set('preset', options.presetId)
+  } else if (options?.range) {
+    query.set('startMs', String(options.range.startMs))
+    query.set('endMs', String(options.range.endMs))
   }
   return `?${query.toString()}`
 }
 
-/// `range` is only needed for sections without their own LogTimeline — the popped-out page can't pick a range itself, so the current one is carried over via query params.
-export function PopOutButton({ section, range }: { section: PopOutSectionId; range?: TimeRange | null }) {
+/// `range`/`activePreset` are only needed for sections without their own LogTimeline — the popped-out page can't pick a range itself until it mounts, so the current one is carried over via query params.
+export function PopOutButton({
+  section,
+  range,
+  activePreset,
+}: {
+  section: PopOutSectionId
+  range?: TimeRange | null
+  activePreset?: TimeRangePresetId | null
+}) {
   return (
     <button
       type="button"
-      onClick={() => window.open(popOutUrl(section, range), '_blank')}
+      onClick={() => window.open(popOutUrl(section, { range, presetId: activePreset }), '_blank')}
       title="Open in new tab"
       aria-label="Open in new tab"
       className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border-soft bg-surface-2 text-xs leading-none text-text-muted hover:border-border-strong hover:text-text-secondary"