swarm-ui: compact refresh-interval picker, moved into the panel header

Per mara's review on this PR: the labelled SelectField-based picker
read as way too heavy for a passive-until-touched setting - a full
label+bordered-control form field row above the table. Replace it with
a compact inline "clock icon - value - chevron" control (a native
<select> still drives the interaction, just stripped of SelectField/
FormField's chrome), quiet until hovered/focused the same way
LinksMenu's header button is.

Also move it out of the panel body entirely: Panel gains an `actions`
slot in its title row (right-aligned via margin-left: auto), so the
picker sits next to the "hives" heading instead of taking its own row
and pushing the table down - per the design guide's own "a control
belongs next to the thing it affects" rule.

Verified with headless chromium screenshots (full page + a tight
close-up crop) against the built bundle: the picker now reads as
"(clock) 30s (chevron)" inline with the panel title, no extra vertical
space taken from the table. Added a Panel "with actions" demo to
ComponentsPage.

frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx

@@ -101,6 +101,14 @@ export function ComponentsPage() {
         <Sample label="without title">
           <Panel>panel body content, no title</Panel>
         </Sample>
+        <Sample label="with actions (e.g. HivesPage's refresh picker)">
+          <Panel
+            title="example title"
+            actions={<RefreshIntervalPicker id="sample-panel-actions" value={30_000} onChange={() => {}} />}
+          >
+            panel body content
+          </Panel>
+        </Sample>
       </Section>
 
       <Section title="StatusChip">