Add collapsible primary UI sections (ticket 035)

Log viewer (FilterBar+LogTimeline+LogPreview), Params, Metrics, and
Dashboards can each be collapsed/expanded via a toggle next to their
existing help icon. Collapsed state persists per-section in
localStorage (ottyl.collapsedSections) and content is hidden with the
`hidden` attribute rather than unmounted, so in-progress form state
(a half-filled Metrics/Params form, in-progress Dashboards panel
edits) survives a collapse/expand cycle.

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

webapp/src/components/Metrics.tsx

@@ -10,6 +10,7 @@ import {
   type MetricDeclaration,
   type MetricParamMatcher,
 } from '../lib/api'
+import { CollapseToggle, useSectionCollapsed } from './CollapsibleSection'
 import { HelpIcon } from './HelpIcon'
 
 const EMPTY_MATCHER: MetricParamMatcher = { param_name: '', capture_group: '', kind: 'string' }
@@ -82,6 +83,7 @@ export function Metrics({ range }: { range: TimeRange | null }) {
   const [matchers, setMatchers] = useState<MetricParamMatcher[]>([{ ...EMPTY_MATCHER }])
   const [submitError, setSubmitError] = useState<string | null>(null)
   const [submitting, setSubmitting] = useState(false)
+  const [collapsed, setCollapsed] = useSectionCollapsed('metrics')
 
   async function loadMetrics() {
     try {
@@ -160,8 +162,9 @@ export function Metrics({ range }: { range: TimeRange | null }) {
       <div className="mb-2 flex items-center gap-1.5 text-xs text-text-subtle">
         Metrics
         <HelpIcon sectionId="metrics" label="Help: Metrics" />
+        <CollapseToggle collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
       </div>
-      <div className="flex gap-4">
+      <div className="flex gap-4" hidden={collapsed}>
         <form onSubmit={handleSubmit} className="w-80 shrink-0 space-y-2">
           <div>
             <label className="mb-1 block text-xs text-text-subtle">Name</label>