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

@@ -14,6 +14,7 @@ import {
   type Panel,
   type PromqlSeries,
 } from '../lib/api'
+import { CollapseToggle, useSectionCollapsed } from './CollapsibleSection'
 import { HelpIcon } from './HelpIcon'
 
 const CHART_TYPES: ChartType[] = ['line', 'bar', 'pie']
@@ -113,6 +114,7 @@ export function Dashboards({ range }: { range: TimeRange | null }) {
   // nothing actually changed (e.g. re-selecting the same dashboard, or the
   // re-render that follows a successful save itself).
   const lastSavedRef = useRef<string | null>(null)
+  const [collapsed, setCollapsed] = useSectionCollapsed('dashboards')
 
   async function loadDashboards(profileName: string, selectAfterLoad?: string) {
     try {
@@ -231,6 +233,7 @@ export function Dashboards({ range }: { range: TimeRange | null }) {
     return (
       <div className="flex items-center gap-1.5 border-b border-border p-3 text-xs text-text-faint">
         <HelpIcon sectionId="dashboards" label="Help: Dashboards" />
+        <CollapseToggle collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
         Dashboards — activate a profile (see the settings menu) to create and save dashboards.
       </div>
     )
@@ -240,12 +243,13 @@ export function Dashboards({ range }: { range: TimeRange | null }) {
     <div className="border-b border-border p-3 text-sm">
       <div className="mb-2 flex items-center gap-1.5 text-xs text-text-subtle">
         <HelpIcon sectionId="dashboards" label="Help: Dashboards" />
+        <CollapseToggle collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
         Dashboards — profile "{activeProfile}"
       </div>
-      {error && (
+      {error && !collapsed && (
         <div className="mb-2 rounded border border-danger-border bg-danger-bg/50 px-2 py-1 text-xs text-danger-text">{error}</div>
       )}
-      <div className="flex gap-4">
+      <div className="flex gap-4" hidden={collapsed}>
         <div className="w-56 shrink-0 space-y-3">
           <form onSubmit={handleCreateDashboard} className="flex gap-1">
             <input