diff --git a/CHANGELOG.md b/CHANGELOG.md
index 44bbcc175..3db16bbf5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,14 @@
   the bottom tab bar. The rail is the first view built with Vue and Pinia,
   which now ship with the app; see docs/VUE-MIGRATION.md (samehkhamis).
 
+- The Data, Authoring, Weather, Recent Imagery, Context, CCTV, Street Level
+  and Radio panels are one component, `UiPanel` (`src/ui/kit/`), with the
+  same markup plus the kit's `ui-panel` classes, their titles translated by
+  `t()` rather than `data-i18n`; `RailPanel` binds it to the panel chrome
+  store. `PanelCollapseButton` drops its `initial` and `initialTitle` props
+  and takes `startCollapsed`, so before startup presents a panel its button
+  already shows that state's glyph, words and `aria-expanded` (samehkhamis).
+
 - The page's panels, dock, cockpit and dialogs are Vue views with the same
   markup as before. Hosts that do not initialize Core's locale pass
   `localePicker: false` to `createApplicationControls` to drop the language
diff --git a/docs/VUE-MIGRATION.md b/docs/VUE-MIGRATION.md
index 402010caa..1cb7fdd52 100644
--- a/docs/VUE-MIGRATION.md
+++ b/docs/VUE-MIGRATION.md
@@ -36,14 +36,20 @@ one-panel rule too. Share links continue to record which panels are open.
 
 ## Component kit
 
-`src/ui/kit/` holds the generic components: `UiRail`, `UiTooltip`, `UiIcon`
-and `UiButton` so far, with more (`UiPanel`, `UiSegmented`, `UiSelect` and
-so on) joining as the controls they serve are converted. Names, props,
+`src/ui/kit/` holds the generic components: `UiRail`, `UiTooltip`, `UiIcon`,
+`UiButton` and `UiPanel` so far, with more (`UiSegmented`, `UiSelect` and
+so on) joining as the controls they serve are converted. One component
+serves every use of a control, with props for the differences (`UiPanel`'s
+`sideways`, `glow`, `scroll`), rather than a copy per panel. Names, props,
 events and class names follow Halfpixel's `ui-vue` kit so the two can merge
 later, but the components are written for this repository and styled by its
 existing stylesheet and custom properties; a kit class such as
 `ui-button--icon` carries no Core style yet, and a converted control keeps
 its own classes beside it. They contain no application state.
+`UiPanel` takes ui-vue's `title`, slots and `v-model:collapsed`, but its
+`collapsed` drives only the button and `ui-panel--collapsed`: the panel's
+owner hides the body by writing the root's `collapsed` class at once, and
+there is no `closable`, since Core's panels collapse rather than close.
 
 Controls share one skin, so every panel reads the same. Every scrolling
 surface carries the kit's `.ui-scroll` (ui-vue's name), which draws the thin
@@ -64,8 +70,10 @@ a feature supplying only its accent.
    when a view needs one, mirroring state an owner already publishes, so
    there is never a second owner of the same state.
 2. **Rail.** `PanelChrome` enforces one panel per side; the panel store
-   mirrors each side's panels and the rail renders from it. Each panel's
-   collapse button (`PanelCollapseButton`), the dock tray toggles and the
+   mirrors each side's panels and the rail renders from it. The rail panels
+   are `RailPanel`s: the kit's `UiPanel` drawing Core's panel markup, bound to the `gev-panel-chrome`
+   store, with their titles rendered by `t()` rather than `data-i18n`. Each panel's
+   collapse button, the dock tray toggles and the
    dock pins render the open and pinned state PanelChrome presents to the
    `gev-panel-chrome` store, and their clicks call it there. Each panel's
    root draws its own state from there too (`v-panel-state`: `collapsed`,
@@ -75,7 +83,8 @@ a feature supplying only its accent.
    watcher, not on Vue's next render, because the rails measure a panel in
    the same task that opens or closes it. Done.
 3. **Panels.** Each template and its wiring become a component, keeping ids,
-   classes, `data-i18n` text and CSS. The page places each view with a
+   classes and CSS; text a template renders with `t()` drops its `data-i18n`
+   marker. The page places each view with a
    `.gev-view` host (`display: contents`), and `mountApplicationViews()`
    (`src/ui/views/index.js`) renders the view into it before the page is
    translated and wired. `createApplication()` calls it too, removing the
diff --git a/docs/panel-surfaces.md b/docs/panel-surfaces.md
index e2fa75728..30f1be88c 100644
--- a/docs/panel-surfaces.md
+++ b/docs/panel-surfaces.md
@@ -25,7 +25,6 @@ surface. Keep the header and any outward popup outside the scrolling body:
         class="panel-surface-control"
         target="example-panel"
         :name="t('Example')"
-        initial="−"
       />
     </header>
     <div data-panel-body data-rail-scroller>
@@ -90,10 +89,15 @@ Do not copy the rail example's `.panel-collapse-btn` class into the dock:
 existing dock rules intentionally hide that class. The generic surface skin
 does not replace the dock's disclosure policy.
 
-`PanelCollapseButton` (`src/ui/rail/`) renders a panel's collapse button
-(`.panel-collapse-btn`) from the open state `PanelChrome` presents to the
-`gev-panel-chrome` store, and its click asks `PanelChrome` to toggle the
-panel through `setPanelCollapsed`. `PanelChrome` collects the buttons'
+A panel with Core's standard header (glow, title, badges, divider, actions
+and collapse button) is a `RailPanel` (`src/ui/rail/`): the kit's `UiPanel`
+bound to the `gev-panel-chrome` store, with its state classes drawn by
+`v-panel-state` and its button's click asking `PanelChrome` to toggle it.
+A panel with its own header uses `PanelCollapseButton`, which renders the
+collapse button (`.panel-collapse-btn`) from the open state `PanelChrome`
+presents to that store; until then, both show their `startCollapsed` state,
+which should match the markup's `collapsed` class.
+Either way, the click reaches `PanelChrome`'s `setPanelCollapsed`. `PanelChrome` collects the buttons'
 targets at initialization and binds each panel's Escape. For additions
 present at startup, keep those hooks and the existing chrome lifecycle. A
 dynamically mounted panel must own its disclosure: its own state, button and
diff --git a/src/contextTabKeyboard.test.mjs b/src/contextTabKeyboard.test.mjs
index 71c1b8aa6..e3b5add68 100644
--- a/src/contextTabKeyboard.test.mjs
+++ b/src/contextTabKeyboard.test.mjs
@@ -97,11 +97,11 @@ test('Context async action buttons remain focused while busy', () => {
 test('Context header holds only its title and collapse control', () => {
   const panel = html.match(/<div id="global-context-panel"[\s\S]*?<div class="cyber-panel-body[ "]/);
   assert.ok(panel, 'Global Context panel is missing');
-  const header = panel[0].match(/<div class="panel-header">([\s\S]*?)<\/div>\s*<div class="cyber-panel-body[ "]/);
+  const header = panel[0].match(/<div class="ui-panel__head panel-header">([\s\S]*?)<\/div>\s*<div class="cyber-panel-body[ "]/);
   assert.ok(header, 'Global Context header is missing');
-  // The kit button's own ui-button and ui-focus classes carry no Core styles.
+  // The kit's own ui-* classes carry no Core styles.
   const tags = [...header[1].matchAll(/<(\w+)\s+(?:type="button"\s+)?class="([^"]+)"/g)].map(([, tag, cls]) =>
-    `${tag}.${cls.split(' ').filter((name) => !/^ui-(button|focus)/.test(name)).join(' ')}`);
+    `${tag}.${cls.split(' ').filter((name) => !/^ui-/.test(name)).join(' ')}`);
   assert.deepEqual(tags, ['span.panel-title', 'span.panel-divider', 'button.panel-collapse-btn']);
 });
 
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index fa56aaf84..3c6d8a2d8 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -746,7 +746,6 @@
   "Search any location...": "Ort suchen...",
   "WEATHER": "WETTER",
   "CONTEXT": "KONTEXT",
-  "Expand panel": "Bereich ausklappen",
   "Context mode": "Kontextmodus",
   "CONTACTS": "KONTAKTE",
   "Cycles the nearest contacts of whatever type you select — planes, vessels, installations. Satellites track independently.": "Wechselt zwischen den nächstgelegenen Kontakten des gewählten Typs: Flugzeuge, Schiffe, Anlagen. Satelliten werden unabhängig verfolgt.",
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index ebabfe1b2..3693b127f 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -176,7 +176,6 @@
   "AVAILABLE INPUTS ONLY · NOT AN ALL-CLEAR": "SOLO DATOS DISPONIBLES · NO IMPLICA TODO DESPEJADO",
   "Enable cockpit weather effects": "Activar los efectos climáticos de la cabina",
   "CONTEXT": "CONTEXTO",
-  "Expand panel": "Expandir panel",
   "Context mode": "Modo de contexto",
   "CONTACTS": "CONTACTOS",
   "Cycles the nearest contacts of whatever type you select — planes, vessels, installations. Satellites track independently.": "Recorre los contactos más cercanos del tipo que elijas — aeronaves, buques, instalaciones. Los satélites se rastrean por separado.",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index e768b6a89..a3e967758 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -2791,7 +2791,6 @@
   "RECENT IMAGERY": "IMAGERIE RÉCENTE",
   "Imagery days in the box": "Jours d'imagerie dans la zone",
   "CONTEXT": "CONTEXTE",
-  "Expand panel": "Développer le panneau",
   "Context mode": "Mode de contexte",
   "CONTACTS": "CONTACTS",
   "Cycles the nearest contacts of whatever type you select — planes, vessels, installations. Satellites track independently.": "Parcourt les contacts les plus proches du type sélectionné — avions, navires, installations. Les satellites sont suivis séparément.",
diff --git a/src/i18n/locales/it.json b/src/i18n/locales/it.json
index f1bf08e73..73cfdb2c4 100644
--- a/src/i18n/locales/it.json
+++ b/src/i18n/locales/it.json
@@ -2791,7 +2791,6 @@
   "RECENT IMAGERY": "IMMAGINI RECENTI",
   "Imagery days in the box": "Giorni con immagini nel riquadro",
   "CONTEXT": "CONTESTO",
-  "Expand panel": "Espandi il pannello",
   "Context mode": "Modalità contesto",
   "CONTACTS": "CONTATTI",
   "Cycles the nearest contacts of whatever type you select — planes, vessels, installations. Satellites track independently.": "Scorre i contatti più vicini del tipo selezionato: aerei, navi, installazioni. I satelliti vengono tracciati in modo indipendente.",
diff --git a/src/i18n/locales/ja.json b/src/i18n/locales/ja.json
index 130308457..2968f050f 100644
--- a/src/i18n/locales/ja.json
+++ b/src/i18n/locales/ja.json
@@ -2649,7 +2649,6 @@
   "RECENT IMAGERY": "最近の衛星画像",
   "Imagery days in the box": "範囲内の画像のある日",
   "CONTEXT": "コンテキスト",
-  "Expand panel": "パネルを展開",
   "Context mode": "コンテキストモード",
   "CONTACTS": "コンタクト",
   "Cycles the nearest contacts of whatever type you select — planes, vessels, installations. Satellites track independently.": "選択した種類（航空機、船舶、施設）の最寄りのコンタクトを順に切り替えます。衛星は独立して追跡されます。",
diff --git a/src/i18n/locales/pt.json b/src/i18n/locales/pt.json
index 6ba74601f..82f306093 100644
--- a/src/i18n/locales/pt.json
+++ b/src/i18n/locales/pt.json
@@ -2793,7 +2793,6 @@
   "RECENT IMAGERY": "IMAGENS RECENTES",
   "Imagery days in the box": "Dias com imagens na área",
   "CONTEXT": "CONTEXTO",
-  "Expand panel": "Expandir painel",
   "Context mode": "Modo de contexto",
   "CONTACTS": "CONTATOS",
   "Cycles the nearest contacts of whatever type you select — planes, vessels, installations. Satellites track independently.": "Percorre os contatos mais próximos do tipo que você selecionar — aviões, embarcações, instalações. Os satélites são rastreados de forma independente.",
diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json
index 7cc27b20c..746288a94 100644
--- a/src/i18n/locales/ru.json
+++ b/src/i18n/locales/ru.json
@@ -707,7 +707,6 @@
   "FLIR": "FLIR",
   "Style": "Стиль",
   "STATION SITE": "САЙТ СТАНЦИИ",
-  "Expand panel": "Развернуть панель",
   "CONTACTS": "КОНТАКТЫ",
   "Cycles the nearest contacts of whatever type you select — planes, vessels, installations. Satellites track independently.": "Перебирает ближайшие контакты выбранного типа — самолёты, суда, объекты. Спутники отслеживаются отдельно.",
   "SEARCH NEARBY SITES": "ПОИСК ОБЪЕКТОВ РЯДОМ",
diff --git a/src/i18n/locales/uk.json b/src/i18n/locales/uk.json
index 238c94fef..c27ea6332 100644
--- a/src/i18n/locales/uk.json
+++ b/src/i18n/locales/uk.json
@@ -2861,7 +2861,6 @@
   "RECENT IMAGERY": "СВІЖІ ЗНІМКИ",
   "Imagery days in the box": "Дні зі знімками в області",
   "CONTEXT": "КОНТЕКСТ",
-  "Expand panel": "Розгорнути панель",
   "Context mode": "Режим контексту",
   "CONTACTS": "КОНТАКТИ",
   "Cycles the nearest contacts of whatever type you select — planes, vessels, installations. Satellites track independently.": "Гортає найближчі контакти вибраного вами типу — літаки, судна, обʼєкти. Супутники відстежуються окремо.",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index d6b46cda6..dbffef805 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -2545,7 +2545,6 @@
   "RECENT IMAGERY": "近期影像",
   "Imagery days in the box": "视野内的影像天数",
   "CONTEXT": "态势",
-  "Expand panel": "展开面板",
   "Context mode": "态势模式",
   "CONTACTS": "目标",
   "Cycles the nearest contacts of whatever type you select — planes, vessels, installations. Satellites track independently.": "循环切换你所选类型中最近的目标，包括飞机、船舶、设施。卫星独立跟踪。",
diff --git a/src/i18n/locales/zh-Hant.json b/src/i18n/locales/zh-Hant.json
index caa1f5948..f3f89690e 100644
--- a/src/i18n/locales/zh-Hant.json
+++ b/src/i18n/locales/zh-Hant.json
@@ -2533,7 +2533,6 @@
   "RECENT IMAGERY": "近期影像",
   "Imagery days in the box": "視野內的影像天數",
   "CONTEXT": "態勢",
-  "Expand panel": "展開面板",
   "Context mode": "態勢模式",
   "CONTACTS": "目標",
   "Cycles the nearest contacts of whatever type you select — planes, vessels, installations. Satellites track independently.": "循環切換你所選類型中最近的目標，包括飛機、船舶、設施。衛星獨立跟蹤。",
diff --git a/src/streetLevelMarkup.test.mjs b/src/streetLevelMarkup.test.mjs
index 5cf9ed0a5..7e2e32314 100644
--- a/src/streetLevelMarkup.test.mjs
+++ b/src/streetLevelMarkup.test.mjs
@@ -18,7 +18,7 @@ const layoutController = read('src/ui/panelLayoutController.js');
 test('Street Level is a collapsible right-rail panel that starts collapsed', () => {
   assert.match(
     html,
-    /<div id="street-level-panel" class="panel-collapsible collapsed" data-panel-id="street-level-panel">/,
+    /<div id="street-level-panel" class="ui-panel panel-collapsible collapsed" data-panel-id="street-level-panel">/,
   );
   assert.match(
     html,
@@ -26,7 +26,7 @@ test('Street Level is a collapsible right-rail panel that starts collapsed', ()
   );
   assert.match(
     html,
-    /<span class="panel-title" data-i18n>STREET LEVEL<\/span>/,
+    /<span class="ui-panel__title panel-title">STREET LEVEL<\/span>/,
   );
   // Provider-neutral header: no vendor mark; the inner restores its scroll.
   assert.doesNotMatch(html, /sl-mark|mly-mark/);
@@ -49,7 +49,7 @@ test('the panel is registered with panel chrome, cockpit entry and the right rai
   // A right-rail panel's collapse button opens sideways (◀ / ▶).
   assert.match(
     read('src/ui/views/panels/StreetLevelPanel.vue'),
-    /<PanelCollapseButton[^>]*target="street-level-panel"[^>]*\bsideways\b/,
+    /<RailPanel id="street-level-panel"[^>]*\bsideways\b/,
   );
   assert.match(
     layoutController,
diff --git a/src/tooling/panelStorageDocs.test.mjs b/src/tooling/panelStorageDocs.test.mjs
index d1179a397..5a83f9fb7 100644
--- a/src/tooling/panelStorageDocs.test.mjs
+++ b/src/tooling/panelStorageDocs.test.mjs
@@ -84,7 +84,7 @@ test('the documented outcomes hold: default, stored open, stored shut, and a sha
   );
   assert.match(
     html,
-    /<div id="cctv-panel"[^>]*class="panel-collapsible collapsed"/,
+    /<RailPanel id="cctv-panel"[^>]*\bstart-collapsed\b/,
     'the CCTV panel starts collapsed in the markup',
   );
 
diff --git a/src/ui/contextPanel.test.mjs b/src/ui/contextPanel.test.mjs
index 670c84f70..8de52cbb2 100644
--- a/src/ui/contextPanel.test.mjs
+++ b/src/ui/contextPanel.test.mjs
@@ -53,7 +53,10 @@ function fixture(t) {
 test('before ContextControls renders, the switch shows its initial markup', (t) => {
   const { $ } = fixture(t);
   const panel = $('global-context-panel');
-  assert.equal(panel.className, 'panel-collapsible collapsed');
+  assert.equal(
+    panel.className,
+    'ui-panel panel-collapsible collapsed ui-panel--collapsed',
+  );
   assert.equal(panel.hasAttribute('data-context-mode'), false);
   for (const id of [
     'global-context-flights-btn',
@@ -118,14 +121,21 @@ test('the panel carries the mode beside the classes its chrome writes', async (t
   panel.classList.remove('collapsed');
   controls._contextMode = 'flights';
   await sync();
-  assert.equal(panel.className, 'panel-collapsible context-enabled');
+  // Without an owner the button, and the kit class, keep the start state.
+  assert.equal(
+    panel.className,
+    'ui-panel panel-collapsible ui-panel--collapsed context-enabled',
+  );
   assert.equal(panel.getAttribute('data-context-mode'), 'flights');
   assert.equal($('context-flights-view').hidden, false);
 
   panel.classList.add('collapsed');
   controls._contextMode = null;
   await sync();
-  assert.equal(panel.className, 'panel-collapsible collapsed');
+  assert.equal(
+    panel.className,
+    'ui-panel panel-collapsible ui-panel--collapsed collapsed',
+  );
   assert.equal(panel.getAttribute('data-context-mode'), 'none');
   assert.equal($('context-mode-standby').hidden, false);
   assert.equal($('context-flights-view').hidden, true);
diff --git a/src/ui/cyberTheme.test.mjs b/src/ui/cyberTheme.test.mjs
index 832b81e33..adde0637a 100644
--- a/src/ui/cyberTheme.test.mjs
+++ b/src/ui/cyberTheme.test.mjs
@@ -28,7 +28,9 @@ test('CCTV and Context keep their headers outside Cyber-only scroll bodies', ()
       /class="cyber-panel-body ui-scroll" data-rail-scroller/,
     );
     assert.ok(
-      markup.indexOf('class="panel-header"') <
+      // The header is RailPanel's; the body is its first content.
+      markup.indexOf('<RailPanel ') > -1 &&
+        markup.indexOf('<RailPanel ') <
         markup.indexOf('class="cyber-panel-body ui-scroll"'),
     );
   }
diff --git a/src/ui/kit/UiPanel.vue b/src/ui/kit/UiPanel.vue
new file mode 100644
index 000000000..b092cefc5
--- /dev/null
+++ b/src/ui/kit/UiPanel.vue
@@ -0,0 +1,74 @@
+<script setup>
+import { vClassToggle } from '../rail/classToggle.js';
+import UiPanelToggle from './UiPanelToggle.vue';
+
+// Core's panel, with @halfpixel/ui-vue UiPanel's name, title, slots and
+// v-model:collapsed so the two kits can merge. It draws Core's panel markup
+// (glow, inner, a header with the title, badges, divider, actions and the
+// collapse button, then the body) and keeps Core's classes beside the kit's.
+// Unlike ui-vue's, `collapsed` does not hide the body: the root's classes
+// stay as rendered, and whatever owns the panel's state writes its
+// `collapsed` class at once (PanelChrome, through vPanelState), because the
+// rails measure a panel in the task that opens it. `collapsed` drives the
+// button and the kit's `ui-panel--collapsed`, toggled without a re-render.
+// There is no Close: Core's panels collapse.
+const props = defineProps({
+  /** The root's id, its inner's class (`{id}-inner`) and the button's target. */
+  id: { type: String, required: true },
+  /** The heading, already translated; also the button's "Expand {name}". */
+  title: { type: String, required: true },
+  /** The heading's tip. */
+  hint: { type: String, default: undefined },
+  tag: { type: String, default: 'div' },
+  collapsible: { type: Boolean, default: false },
+  collapsed: { type: Boolean, default: false },
+  /** A right-rail panel opens and closes sideways: ◀ / ▶, not + / −. */
+  sideways: { type: Boolean, default: false },
+  /** Words that replace "Expand/Collapse {title}" on the button. */
+  toggleWords: { type: Object, default: null },
+  glow: { type: Boolean, default: true },
+  /** The inner scrolls with Core's scroll bar. */
+  scroll: { type: Boolean, default: false },
+  /** The inner is a scroller the right rail keeps in view. */
+  railScroller: { type: Boolean, default: false },
+});
+const emit = defineEmits(['update:collapsed']);
+</script>
+
+<template>
+  <component
+    :is="props.tag"
+    :id="props.id"
+    v-class-toggle="{
+      'ui-panel--collapsed': props.collapsible && props.collapsed,
+    }"
+    class="ui-panel panel-collapsible"
+  >
+    <div v-if="props.glow" class="panel-glow"></div>
+    <div
+      :class="[`${props.id}-inner`, { 'ui-scroll': props.scroll }]"
+      :data-rail-scroller="props.railScroller ? '' : undefined"
+    >
+      <div class="ui-panel__head panel-header">
+        <slot name="title">
+          <span class="ui-panel__title panel-title" :title="props.hint">{{
+            props.title
+          }}</span>
+        </slot>
+        <slot name="badge" />
+        <span class="panel-divider"></span>
+        <slot name="actions" />
+        <UiPanelToggle
+          v-if="props.collapsible"
+          :target="props.id"
+          :name="props.title"
+          :collapsed="props.collapsed"
+          :sideways="props.sideways"
+          :words="props.toggleWords"
+          @update:collapsed="emit('update:collapsed', $event)"
+        />
+      </div>
+      <slot />
+    </div>
+  </component>
+</template>
diff --git a/src/ui/kit/UiPanelToggle.vue b/src/ui/kit/UiPanelToggle.vue
new file mode 100644
index 000000000..58636154c
--- /dev/null
+++ b/src/ui/kit/UiPanelToggle.vue
@@ -0,0 +1,54 @@
+<script setup>
+import { computed } from 'vue';
+import { msg, t } from '../../i18n/index.js';
+import UiButton from './UiButton.vue';
+
+// A panel's collapse button, internal to the kit: UiPanel draws it, and so
+// does PanelCollapseButton for the panels not built on UiPanel. Its glyph and
+// words follow `collapsed`; a click asks for the other state.
+const props = defineProps({
+  /** The panel's id, which PanelChrome finds the button by. */
+  target: { type: String, required: true },
+  /** The panel's name in "Expand {name}", already translated. */
+  name: { type: String, default: () => t('panel') },
+  collapsed: { type: Boolean, required: true },
+  /** A right-rail panel opens and closes sideways: ◀ / ▶, not + / −. */
+  sideways: { type: Boolean, default: false },
+  /** Words that replace "Expand/Collapse {name}" (Radio's own wording). */
+  words: { type: Object, default: null },
+});
+const emit = defineEmits(['update:collapsed']);
+
+const glyph = computed(() => {
+  if (props.sideways) return props.collapsed ? '◀' : '▶';
+  return props.collapsed ? '+' : '−';
+});
+const label = computed(() => {
+  if (props.words)
+    return props.collapsed
+      ? props.words.expandLabel
+      : props.words.collapseLabel;
+  const key = props.collapsed ? msg('Expand {name}') : msg('Collapse {name}');
+  return t(key, { name: props.name });
+});
+const title = computed(() => {
+  if (props.words)
+    return props.collapsed
+      ? props.words.expandTitle
+      : props.words.collapseTitle;
+  return label.value;
+});
+</script>
+
+<template>
+  <UiButton
+    variant="icon"
+    class="panel-collapse-btn"
+    :data-collapse-target="target"
+    :label="label"
+    :title="title"
+    :aria-expanded="String(!collapsed)"
+    @click="emit('update:collapsed', !collapsed)"
+    >{{ glyph }}</UiButton
+  >
+</template>
diff --git a/src/ui/panelChromeButtons.test.mjs b/src/ui/panelChromeButtons.test.mjs
index b04ad67a4..543a77730 100644
--- a/src/ui/panelChromeButtons.test.mjs
+++ b/src/ui/panelChromeButtons.test.mjs
@@ -11,6 +11,8 @@ import { PanelChrome } from './panelChrome.js';
 import { followPanelState, vPanelState } from './rail/panelState.js';
 import { bindPanelDisclosure } from './panelDisclosure.js';
 import PanelCollapseButton from './rail/PanelCollapseButton.vue';
+import RailPanel from './rail/RailPanel.vue';
+import UiPanel from './kit/UiPanel.vue';
 import { usePanelChromeStore } from './stores/panelChrome.js';
 import CommandDockView from './views/CommandDockView.vue';
 
@@ -57,38 +59,33 @@ test('the store republishes a panel only when its state changes', () => {
   );
 });
 
-test('a collapse button keeps its markup until presented, then follows the panel', async (t) => {
+test('a collapse button follows its markup until presented, then the panel', async (t) => {
   const store = mount(t, {
     render: () => [
       h(PanelCollapseButton, {
         target: 'data-panel',
         name: 'DATA LAYERS',
-        initial: '+',
+        startCollapsed: true,
       }),
       h(PanelCollapseButton, {
         target: 'cctv-panel',
         name: 'CCTV',
         sideways: true,
-        initial: '+',
+        startCollapsed: true,
       }),
     ],
   });
   const [data, cctv] = document.querySelectorAll('.panel-collapse-btn');
   assert.equal(data.textContent, '+');
-  assert.equal(data.title, 'Collapse panel');
-  assert.equal(data.hasAttribute('aria-expanded'), false);
-  assert.equal(data.hasAttribute('aria-label'), false);
+  assert.equal(data.getAttribute('aria-expanded'), 'false');
+  assert.equal(data.getAttribute('aria-label'), 'Expand DATA LAYERS');
   assert.equal(data.dataset.collapseTarget, 'data-panel');
+  assert.equal(cctv.textContent, '◀');
 
   const toggled = [];
   const token = store.connect({ toggle: (id) => toggled.push(id) });
-  store.publish(token, 'data-panel', { collapsed: true });
   store.publish(token, 'cctv-panel', { collapsed: false });
   await nextTick();
-  assert.equal(data.textContent, '+');
-  assert.equal(data.getAttribute('aria-expanded'), 'false');
-  assert.equal(data.getAttribute('aria-label'), 'Expand DATA LAYERS');
-  assert.equal(data.title, 'Expand DATA LAYERS');
   assert.equal(cctv.textContent, '▶');
   assert.equal(cctv.getAttribute('aria-expanded'), 'true');
   assert.equal(cctv.title, 'Collapse CCTV');
@@ -101,9 +98,144 @@ test('a collapse button keeps its markup until presented, then follows the panel
   assert.deepEqual(toggled, ['data-panel']);
 });
 
+test("UiPanel draws Core's panel markup and asks for the other state", async (t) => {
+  const asked = [];
+  let collapsed = true;
+  mount(t, {
+    render: () =>
+      h(
+        UiPanel,
+        {
+          id: 'demo-panel',
+          title: 'DEMO',
+          hint: 'A demo',
+          collapsible: true,
+          collapsed,
+          scroll: true,
+          railScroller: true,
+          'onUpdate:collapsed': (next) => asked.push(next),
+        },
+        {
+          badge: () => h('span', { id: 'demo-badge' }),
+          actions: () => h('button', { id: 'demo-action' }),
+          default: () => h('div', { id: 'demo-body' }),
+        },
+      ),
+  });
+  const panel = document.getElementById('demo-panel');
+  assert.equal(
+    panel.className,
+    'ui-panel panel-collapsible ui-panel--collapsed',
+  );
+  assert.equal(panel.children[0].className, 'panel-glow');
+  const inner = panel.children[1];
+  assert.equal(inner.className, 'demo-panel-inner ui-scroll');
+  assert.equal(inner.hasAttribute('data-rail-scroller'), true);
+  const [head, body] = inner.children;
+  assert.deepEqual(
+    [...head.children].map(
+      (el) => el.id || el.classList[el.classList.length - 1],
+    ),
+    [
+      'panel-title',
+      'demo-badge',
+      'panel-divider',
+      'demo-action',
+      'panel-collapse-btn',
+    ],
+  );
+  assert.equal(head.querySelector('.panel-title').title, 'A demo');
+  assert.equal(body.id, 'demo-body');
+  const toggle = head.querySelector('.panel-collapse-btn');
+  assert.equal(toggle.getAttribute('aria-label'), 'Expand DEMO');
+  assert.equal(toggle.dataset.collapseTarget, 'demo-panel');
+  toggle.click();
+  assert.deepEqual(asked, [false]);
+});
+
+test('UiPanel without collapsible has no button, and glow is optional', (t) => {
+  mount(t, {
+    render: () =>
+      h(UiPanel, {
+        id: 'plain-panel',
+        title: 'PLAIN',
+        tag: 'section',
+        glow: false,
+      }),
+  });
+  const panel = document.getElementById('plain-panel');
+  assert.equal(panel.tagName, 'SECTION');
+  assert.equal(panel.querySelector('.panel-glow'), null);
+  assert.equal(panel.querySelector('.panel-collapse-btn'), null);
+});
+
+test('RailPanel follows the store, forwards clicks, and never restores a class its owner removed', async (t) => {
+  const store = mount(t, {
+    render: () =>
+      h(
+        RailPanel,
+        {
+          id: 'radio-panel',
+          startCollapsed: true,
+          title: 'RADIO',
+          class: 'extra',
+          hidden: '',
+        },
+        { default: () => h('p', { id: 'radio-body' }) },
+      ),
+  });
+  const panel = document.getElementById('radio-panel');
+  assert.equal(
+    panel.className,
+    'ui-panel panel-collapsible extra collapsed ui-panel--collapsed',
+  );
+  assert.equal(panel.dataset.panelId, 'radio-panel');
+  assert.equal(panel.hidden, true);
+  assert.ok(document.getElementById('radio-body'));
+  const toggle = panel.querySelector('.panel-collapse-btn');
+  assert.equal(toggle.textContent, '+');
+
+  const toggled = [];
+  const token = store.connect({ toggle: (id) => toggled.push(id) });
+  store.publish(token, 'radio-panel', { collapsed: false });
+  assert.equal(panel.classList.contains('collapsed'), false, 'written at once');
+  await nextTick();
+  assert.equal(toggle.textContent, '−');
+  // The re-render above left the class as written; pinning keeps it too.
+  store.publish(token, 'radio-panel', { pinned: true });
+  await nextTick();
+  assert.equal(panel.classList.contains('collapsed'), false);
+  assert.equal(panel.classList.contains('dock-pinned'), true);
+  toggle.click();
+  assert.deepEqual(toggled, ['radio-panel']);
+});
+
+test('a panel whose class binding changes keeps the presented state', async (t) => {
+  const { ref } = await import('vue');
+  const extra = ref('one');
+  const store = mount(t, {
+    render: () =>
+      h(RailPanel, {
+        id: 'cctv-panel',
+        startCollapsed: true,
+        title: 'CCTV',
+        class: extra.value,
+      }),
+  });
+  const panel = document.getElementById('cctv-panel');
+  store.publish(store.connect({}), 'cctv-panel', {
+    collapsed: false,
+    pinned: true,
+  });
+  extra.value = 'two';
+  await nextTick();
+  assert.equal(panel.classList.contains('two'), true);
+  assert.equal(panel.classList.contains('collapsed'), false);
+  assert.equal(panel.classList.contains('dock-pinned'), true);
+});
+
 test("Radio's collapse button keeps its own wording", async (t) => {
   const words = {
-    initialLabel: 'Expand Radio section',
     expandLabel: 'Expand Radio section',
     collapseLabel: 'Collapse Radio section',
     expandTitle: 'Expand Radio',
@@ -111,11 +243,11 @@ test("Radio's collapse button keeps its own wording", async (t) => {
   };
   const store = mount(t, {
     render: () =>
-      h(PanelCollapseButton, {
-        target: 'radio-panel',
-        initial: '+',
-        initialTitle: 'Expand Radio',
-        words,
+      h(RailPanel, {
+        id: 'radio-panel',
+        startCollapsed: true,
+        title: 'RADIO',
+        toggleWords: words,
       }),
   });
   const button = document.querySelector('.panel-collapse-btn');
diff --git a/src/ui/rail/PanelCollapseButton.vue b/src/ui/rail/PanelCollapseButton.vue
index bbd94226d..7d8f3f58d 100644
--- a/src/ui/rail/PanelCollapseButton.vue
+++ b/src/ui/rail/PanelCollapseButton.vue
@@ -1,66 +1,34 @@
 <script setup>
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
-import { msg, t } from '../../i18n/index.js';
-import UiButton from '../kit/UiButton.vue';
+import UiPanelToggle from '../kit/UiPanelToggle.vue';
 import { usePanelChromeStore } from '../stores/panelChrome.js';
 
-// A panel's collapse button: its glyph, aria-expanded and words follow the
-// panel's state in the panel chrome store, and a click asks PanelChrome to
-// toggle it. Until PanelChrome presents the panel it shows its markup's glyph
-// and tip.
+// The collapse button of a panel not built on UiPanel: it follows the panel's
+// state in the panel chrome store, and a click asks PanelChrome to toggle it.
+// Until PanelChrome presents the panel it follows the markup's state.
 const props = defineProps({
   target: { type: String, required: true },
   /** The panel's name in "Expand {name}", already translated. */
-  name: { type: String, default: () => t('panel') },
-  /** A right-rail panel opens and closes sideways: ◀ / ▶, not + / −. */
+  name: { type: String, default: undefined },
   sideways: { type: Boolean, default: false },
-  /** The glyph and tip before the panel is presented. */
-  initial: { type: String, required: true },
-  initialTitle: { type: String, default: () => t('Collapse panel') },
-  /** Words that replace "Expand/Collapse {name}" (Radio's own wording). */
-  words: { type: Object, default: null },
+  /** Whether the panel's markup starts collapsed. */
+  startCollapsed: { type: Boolean, default: false },
 });
 
 const chrome = usePanelChromeStore();
 const { panels } = storeToRefs(chrome);
-const state = computed(() => panels.value[props.target]);
-
-const glyph = computed(() => {
-  if (!state.value) return props.initial;
-  if (props.sideways) return state.value.collapsed ? '◀' : '▶';
-  return state.value.collapsed ? '+' : '−';
-});
-const label = computed(() => {
-  if (!state.value) return props.words?.initialLabel;
-  if (props.words)
-    return state.value.collapsed
-      ? props.words.expandLabel
-      : props.words.collapseLabel;
-  const key = state.value.collapsed
-    ? msg('Expand {name}')
-    : msg('Collapse {name}');
-  return t(key, { name: props.name });
-});
-const title = computed(() => {
-  if (!state.value) return props.initialTitle;
-  if (props.words)
-    return state.value.collapsed
-      ? props.words.expandTitle
-      : props.words.collapseTitle;
-  return label.value;
-});
+const collapsedNow = computed(
+  () => panels.value[props.target]?.collapsed ?? props.startCollapsed,
+);
 </script>
 
 <template>
-  <UiButton
-    variant="icon"
-    class="panel-collapse-btn"
-    :data-collapse-target="target"
-    :label="label"
-    :title="title"
-    :aria-expanded="state ? String(!state.collapsed) : undefined"
-    @click="chrome.act('toggle', target)"
-    >{{ glyph }}</UiButton
-  >
+  <UiPanelToggle
+    :target="target"
+    :name="name"
+    :sideways="sideways"
+    :collapsed="collapsedNow"
+    @update:collapsed="chrome.act('toggle', target)"
+  />
 </template>
diff --git a/src/ui/rail/RailPanel.vue b/src/ui/rail/RailPanel.vue
new file mode 100644
index 000000000..f65159a77
--- /dev/null
+++ b/src/ui/rail/RailPanel.vue
@@ -0,0 +1,41 @@
+<script setup>
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+import UiPanel from '../kit/UiPanel.vue';
+import { usePanelChromeStore } from '../stores/panelChrome.js';
+import { vPanelState } from './panelState.js';
+
+// A panel PanelChrome owns: a collapsible UiPanel whose state classes
+// (vPanelState) and collapse button follow the panel chrome store, with the
+// button's clicks forwarded to PanelChrome. Every other prop, attribute and
+// slot passes through to UiPanel.
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  id: { type: String, required: true },
+  /** Whether the markup starts collapsed, until PanelChrome presents it. */
+  startCollapsed: { type: Boolean, default: false },
+});
+
+const chrome = usePanelChromeStore();
+const { panels } = storeToRefs(chrome);
+const collapsedNow = computed(
+  () => panels.value[props.id]?.collapsed ?? props.startCollapsed,
+);
+</script>
+
+<template>
+  <UiPanel
+    v-panel-state="props.id"
+    v-bind="$attrs"
+    :id="props.id"
+    :class="{ collapsed: props.startCollapsed }"
+    :data-panel-id="props.id"
+    collapsible
+    :collapsed="collapsedNow"
+    @update:collapsed="chrome.act('toggle', props.id)"
+  >
+    <template v-for="(_, name) in $slots" #[name]
+      ><slot :name="name"
+    /></template>
+  </UiPanel>
+</template>
diff --git a/src/ui/rail/panelState.js b/src/ui/rail/panelState.js
index af57a7af5..ffcc904a0 100644
--- a/src/ui/rail/panelState.js
+++ b/src/ui/rail/panelState.js
@@ -42,8 +42,15 @@ export function followPanelState(store, panelId, el) {
 export const vPanelState = {
   mounted(el, binding) {
     const store = usePanelChromeStore(binding.instance.$pinia);
+    el._panelStateStore = store;
     el._stopPanelState = followPanelState(store, binding.value, el);
   },
+  // A re-render that rewrites the root's class (its class binding changed)
+  // would restore the markup's state; draw the presented state again.
+  updated(el, binding) {
+    const state = el._panelStateStore?.panels[binding.value];
+    if (state) applyPanelState(el, state);
+  },
   beforeUnmount(el) {
     el._stopPanelState?.();
   },
diff --git a/src/ui/views/ContextView.vue b/src/ui/views/ContextView.vue
index abc82385e..66bd88079 100644
--- a/src/ui/views/ContextView.vue
+++ b/src/ui/views/ContextView.vue
@@ -2,8 +2,7 @@
 import { computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import { t } from '../../i18n/index.js';
-import { vPanelState } from '../rail/panelState.js';
-import PanelCollapseButton from '../rail/PanelCollapseButton.vue';
+import RailPanel from '../rail/RailPanel.vue';
 import { vClassToggle } from '../rail/classToggle.js';
 import { useCockpitStore } from '../stores/cockpit.js';
 import { useBhoteKoshiPanelStore } from '../stores/bhoteKoshiPanel.js';
@@ -29,38 +28,15 @@ const sceneRuntime = computed(() => scenePanel.value?.runtime ?? '');
 <template>
   <!-- Global Context is deliberately independent from the left layer accordion. -->
   <aside id="right-context-rail" class="ui-scroll" v-class-toggle="{ 'bhote-event-active': !!bhotePanel }">
-    <div id="weather-panel" v-panel-state="'weather-panel'" class="panel-collapsible" data-panel-id="weather-panel" hidden>
-      <div class="panel-glow"></div>
-      <div class="weather-panel-inner" data-rail-scroller>
-        <div class="panel-header">
-          <span class="panel-title" data-i18n>WEATHER</span>
-          <span id="weather-panel-count" aria-label="Active weather products" data-i18n-aria-label>0</span>
-          <span class="panel-divider"></span>
-          <PanelCollapseButton target="weather-panel" :name="t('WEATHER')" sideways initial="▼" />
-        </div>
-        <div id="weather-panel-body" class="ui-scroll" data-rail-scroller></div>
-      </div>
-    </div>
-    <div id="recent-imagery-panel" v-panel-state="'recent-imagery-panel'" class="panel-collapsible" data-panel-id="recent-imagery-panel" hidden>
-      <div class="panel-glow"></div>
-      <div class="recent-imagery-panel-inner" data-rail-scroller>
-        <div class="panel-header">
-          <span class="panel-title" data-i18n>RECENT IMAGERY</span>
-          <span id="recent-imagery-panel-count" aria-label="Imagery days in the box" data-i18n-aria-label></span>
-          <span class="panel-divider"></span>
-          <PanelCollapseButton target="recent-imagery-panel" :name="t('RECENT IMAGERY')" sideways initial="▼" />
-        </div>
-        <div id="recent-imagery-panel-body" class="ui-scroll" data-rail-scroller></div>
-      </div>
-    </div>
-    <div id="global-context-panel" v-panel-state="'global-context-panel'" class="panel-collapsible collapsed" v-class-toggle="{ ...(ctx && { 'context-enabled': ctx.enabled }) }" :data-context-mode="ctx?.mode" data-panel-id="global-context-panel">
-      <div class="panel-glow"></div>
-      <div class="global-context-panel-inner ui-scroll" data-rail-scroller>
-        <div class="panel-header">
-          <span class="panel-title" data-i18n>CONTEXT</span>
-          <span class="panel-divider"></span>
-          <PanelCollapseButton target="global-context-panel" :name="t('CONTEXT')" sideways initial="▶" :initial-title="t('Expand panel')" />
-        </div>
+    <RailPanel id="weather-panel" hidden :title="t('WEATHER')" sideways rail-scroller>
+      <template #badge><span id="weather-panel-count" aria-label="Active weather products" data-i18n-aria-label>0</span></template>
+      <div id="weather-panel-body" class="ui-scroll" data-rail-scroller></div>
+    </RailPanel>
+    <RailPanel id="recent-imagery-panel" hidden :title="t('RECENT IMAGERY')" sideways rail-scroller>
+      <template #badge><span id="recent-imagery-panel-count" aria-label="Imagery days in the box" data-i18n-aria-label></span></template>
+      <div id="recent-imagery-panel-body" class="ui-scroll" data-rail-scroller></div>
+    </RailPanel>
+    <RailPanel id="global-context-panel" start-collapsed v-class-toggle="{ ...(ctx && { 'context-enabled': ctx.enabled }) }" :data-context-mode="ctx?.mode" :title="t('CONTEXT')" sideways scroll rail-scroller>
         <div class="cyber-panel-body ui-scroll" data-rail-scroller>
         <div class="global-context-modes" role="tablist" aria-label="Context mode" data-i18n-aria-label>
           <button id="global-context-flights-btn" class="context-mode-button" v-class-toggle="{ active: ctx?.flightsActive }" type="button" role="tab" tabindex="0" :aria-selected="String(ctx?.flightsActive ?? false)" :aria-disabled="ctx && String(ctx.busy)" :aria-busy="ctx && String(ctx.busy)" aria-controls="context-flights-view" aria-label="CONTACTS" title="Cycles the nearest contacts of whatever type you select — planes, vessels, installations. Satellites track independently." data-i18n-aria-label data-i18n-title>
@@ -95,8 +71,7 @@ const sceneRuntime = computed(() => scenePanel.value?.runtime ?? '');
         </section>
         <RadioPanel />
         </div>
-      </div>
-    </div>
+    </RailPanel>
     <BhoteKoshiPanel />
   </aside>
 
diff --git a/src/ui/views/LayerPanelsView.vue b/src/ui/views/LayerPanelsView.vue
index da95c6c15..6631a1097 100644
--- a/src/ui/views/LayerPanelsView.vue
+++ b/src/ui/views/LayerPanelsView.vue
@@ -1,8 +1,7 @@
 <script setup>
 import { storeToRefs } from 'pinia';
 import { t } from '../../i18n/index.js';
-import { vPanelState } from '../rail/panelState.js';
-import PanelCollapseButton from '../rail/PanelCollapseButton.vue';
+import RailPanel from '../rail/RailPanel.vue';
 import { useSceneSharingStore } from '../stores/sceneSharing.js';
 import { useSceneStore } from '../stores/scenes.js';
 import { vClassToggle } from '../rail/classToggle.js';
@@ -38,17 +37,9 @@ async function importChosen(event) {
 <template>
   <div id="left-panel-stack" class="ui-scroll">
   <!-- Data Layer Toggle Panel -->
-  <div id="data-panel" v-panel-state="'data-panel'" class="panel-collapsible collapsed active" data-panel-id="data-panel">
-    <div class="panel-glow"></div>
-    <div class="data-panel-inner">
-      <div class="panel-header">
-        <span class="panel-title" data-i18n>DATA LAYERS</span>
-        <span class="panel-divider"></span>
-        <PanelCollapseButton target="data-panel" :name="t('DATA LAYERS')" initial="+" />
-      </div>
-      <div id="data-toggles" class="data-toggle-list ui-scroll"></div>
-    </div>
-  </div>
+  <RailPanel id="data-panel" start-collapsed class="active" :title="t('DATA LAYERS')">
+    <div id="data-toggles" class="data-toggle-list ui-scroll"></div>
+  </RailPanel>
 
   <!-- CCTV Coverage Panel -->
   <CctvPanel />
@@ -57,14 +48,7 @@ async function importChosen(event) {
   <StreetLevelPanel />
 
   <!-- Scene Director Panel -->
-  <div id="scene-panel" v-panel-state="'scene-panel'" v-class-toggle="{ running: scene?.running, 'has-shots': scene?.hasShots }" class="panel-collapsible collapsed" data-panel-id="scene-panel">
-    <div class="panel-glow"></div>
-    <div class="scene-panel-inner ui-scroll">
-      <div class="panel-header">
-        <span class="panel-title" title="Create and edit scenes" data-i18n data-i18n-title>AUTHORING</span>
-        <span class="panel-divider"></span>
-        <PanelCollapseButton target="scene-panel" :name="t('AUTHORING')" initial="+" />
-      </div>
+  <RailPanel id="scene-panel" start-collapsed v-class-toggle="{ running: scene?.running, 'has-shots': scene?.hasShots }" :title="t('AUTHORING')" :hint="t('Create and edit scenes')" scroll>
       <p class="scene-step-heading" data-i18n>SCENE</p>
       <div class="scene-controls">
         <select class="gev-field" id="scene-select" aria-label="Scene" data-i18n-aria-label :disabled="off('select')" @change="scenes.act('selectScene', $event.currentTarget.value)"><SceneOptions /></select>
@@ -99,8 +83,7 @@ async function importChosen(event) {
         <div id="scene-progress-fill" :style="scene ? { width: `${scene.progress}%` } : undefined">{{ scene?.progress ?? 0 }}%</div>
       </div>
       <div id="scene-status" role="status" aria-live="polite">{{ scene?.status ?? t('Ready') }}</div>
-    </div>
-  </div>
+  </RailPanel>
 
   </div>
   <Teleport to="body">
diff --git a/src/ui/views/panels/CctvPanel.vue b/src/ui/views/panels/CctvPanel.vue
index c5d75c461..c8bc8db02 100644
--- a/src/ui/views/panels/CctvPanel.vue
+++ b/src/ui/views/panels/CctvPanel.vue
@@ -2,8 +2,7 @@
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import { t } from '../../../i18n/index.js';
-import { vPanelState } from '../../rail/panelState.js';
-import PanelCollapseButton from '../../rail/PanelCollapseButton.vue';
+import RailPanel from '../../rail/RailPanel.vue';
 import CctvCalValue from '../../cctv/CctvCalValue.vue';
 import CctvPicker from '../../cctv/CctvPicker.vue';
 import { useCctvStore } from '../../stores/cctv.js';
@@ -28,14 +27,7 @@ const frameData = computed(() =>
 </script>
 
 <template>
-<div id="cctv-panel" v-panel-state="'cctv-panel'" class="panel-collapsible collapsed" data-panel-id="cctv-panel">
-  <div class="panel-glow"></div>
-  <div class="cctv-panel-inner ui-scroll" data-rail-scroller>
-    <div class="panel-header">
-      <span class="panel-title" data-i18n>CCTV</span>
-      <span class="panel-divider"></span>
-      <PanelCollapseButton target="cctv-panel" :name="t('CCTV')" sideways initial="+" />
-    </div>
+<RailPanel id="cctv-panel" start-collapsed :title="t('CCTV')" sideways scroll rail-scroller>
     <div class="cyber-panel-body ui-scroll" data-rail-scroller>
     <div id="cctv-frame-wrap" :class="['cctv-frame-wrap', { loading: frame?.wrapLoading, 'has-frame': frame?.hasFrame }]">
       <span class="cctv-frame-caption" aria-hidden="true" data-i18n>ACQUIRING FRAME</span>
@@ -84,6 +76,5 @@ const frameData = computed(() =>
     <div class="cctv-summary-label" data-i18n>SCENE SUMMARY</div>
     <div id="cctv-summary">{{ summary ?? t('Enable CCTV to start camera-linked intelligence summaries.') }}</div>
     </div>
-  </div>
-</div>
+</RailPanel>
 </template>
diff --git a/src/ui/views/panels/DisplayPanel.vue b/src/ui/views/panels/DisplayPanel.vue
index 07ba0b001..b7676f746 100644
--- a/src/ui/views/panels/DisplayPanel.vue
+++ b/src/ui/views/panels/DisplayPanel.vue
@@ -48,7 +48,7 @@ const geoListed = computed(() => geoRows.value.length > 0);
   <div class="compact pp-header-row">
     <span data-i18n class="pp-header-label">DISPLAY</span>
     <span class="panel-divider" aria-hidden="true"></span>
-    <PanelCollapseButton class="pp-collapse-btn" target="pp-toggles" :name="t('DISPLAY')" sideways initial="◀" />
+    <PanelCollapseButton class="pp-collapse-btn" target="pp-toggles" :name="t('DISPLAY')" sideways start-collapsed />
   </div>
   <div class="pp-panel-body ui-scroll" data-rail-scroller>
   <div class="pp-toggle-group">
@@ -128,7 +128,7 @@ const geoListed = computed(() => geoRows.value.length > 0);
     <div class="param-panel-header">
       <span class="param-panel-title" data-i18n>PARAMETERS</span>
       <span class="param-panel-divider"></span>
-      <PanelCollapseButton id="param-panel-collapse-btn" target="param-slider-panel" initial="−" />
+      <PanelCollapseButton id="param-panel-collapse-btn" target="param-slider-panel" />
     </div>
     <div id="param-sliders"></div>
   </div>
diff --git a/src/ui/views/panels/RadioPanel.vue b/src/ui/views/panels/RadioPanel.vue
index 57096734f..3f9f32871 100644
--- a/src/ui/views/panels/RadioPanel.vue
+++ b/src/ui/views/panels/RadioPanel.vue
@@ -2,8 +2,7 @@
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 import { t } from '../../../i18n/index.js';
-import { vPanelState } from '../../rail/panelState.js';
-import PanelCollapseButton from '../../rail/PanelCollapseButton.vue';
+import RailPanel from '../../rail/RailPanel.vue';
 import { vClassToggle } from '../../rail/classToggle.js';
 import { vFieldValue } from '../../rail/fieldValue.js';
 import { vRangeValue } from '../../rail/rangeValue.js';
@@ -21,7 +20,6 @@ const { view: radio, sdr } = storeToRefs(useRadioStore());
 const sdrConnected = computed(() => sdr.value?.connectionActive ?? null);
 // The collapse button keeps Radio's own wording, not "Expand RADIO".
 const radioWords = {
-  initialLabel: t('Expand Radio section'),
   expandLabel: t('Expand Radio section'),
   collapseLabel: t('Collapse Radio section'),
   expandTitle: t('Expand Radio'),
@@ -30,14 +28,8 @@ const radioWords = {
 </script>
 
 <template>
-<section id="radio-panel" v-panel-state="'radio-panel'" class="panel-collapsible collapsed" v-class-toggle="{ ...(radio && { 'radio-enabled': radio.enabled, 'lifecycle-uncertain': radio.uncertain }), ...(sdrConnected !== null && { 'sdr-connected': sdrConnected }) }" data-panel-id="radio-panel" aria-label="Internet radio and local SDR" data-i18n-aria-label>
-  <div class="radio-panel-inner ui-scroll">
-    <div class="panel-header">
-      <span class="panel-title" data-i18n>RADIO</span>
-      <span id="radio-layer-state" class="radio-layer-state" :class="{ active: radio?.layerState.active }">{{ radio ? radio.layerState.text : t('OFF') }}</span>
-      <span class="panel-divider"></span>
-      <PanelCollapseButton target="radio-panel" initial="+" :initial-title="t('Expand Radio')" :words="radioWords" />
-    </div>
+<RailPanel id="radio-panel" tag="section" start-collapsed v-class-toggle="{ ...(radio && { 'radio-enabled': radio.enabled, 'lifecycle-uncertain': radio.uncertain }), ...(sdrConnected !== null && { 'sdr-connected': sdrConnected }) }" aria-label="Internet radio and local SDR" data-i18n-aria-label :title="t('RADIO')" :toggle-words="radioWords" :glow="false" scroll>
+  <template #badge><span id="radio-layer-state" class="radio-layer-state" :class="{ active: radio?.layerState.active }">{{ radio ? radio.layerState.text : t('OFF') }}</span></template>
     <div class="radio-directory-row">
       <button id="radio-enable-btn" class="panel-layer-toggle" :class="{ active: radio?.enable.active }" type="button" :aria-pressed="String(radio?.enable.active ?? false)" :aria-label="radio?.enable.label" :aria-disabled="radio ? String(radio.enable.busy) : undefined" :aria-busy="radio ? String(radio.enable.busy) : undefined">{{ radio ? radio.enable.text : t('ENABLE') }}</button>
       <label class="radio-filter-label" for="radio-filter" data-i18n>STATION TAG</label>
@@ -69,6 +61,5 @@ const radioWords = {
     </div>
     <p class="radio-privacy" data-i18n>Audio connects directly to the broadcaster after you press play. Your IP is visible to that broadcaster.</p>
     <SdrCard />
-  </div>
-</section>
+</RailPanel>
 </template>
diff --git a/src/ui/views/panels/StreetLevelPanel.vue b/src/ui/views/panels/StreetLevelPanel.vue
index 713887253..84b407065 100644
--- a/src/ui/views/panels/StreetLevelPanel.vue
+++ b/src/ui/views/panels/StreetLevelPanel.vue
@@ -2,8 +2,7 @@
 import { storeToRefs } from 'pinia';
 import { computed, shallowRef, watch } from 'vue';
 import { t } from '../../../i18n/index.js';
-import { vPanelState } from '../../rail/panelState.js';
-import PanelCollapseButton from '../../rail/PanelCollapseButton.vue';
+import RailPanel from '../../rail/RailPanel.vue';
 import RailChips from '../../rail/RailChips.vue';
 import { useStreetLevelStore } from '../../stores/streetLevel.js';
 
@@ -102,15 +101,8 @@ const vThumb = { mounted: placeThumb, updated: placeThumb };
 </script>
 
 <template>
-<div id="street-level-panel" v-panel-state="'street-level-panel'" class="panel-collapsible collapsed" data-panel-id="street-level-panel" :data-sl-enabled="view ? String(view.enabled) : undefined">
-  <div class="panel-glow"></div>
-  <div class="street-level-panel-inner ui-scroll" data-rail-scroller>
-    <div class="panel-header">
-      <span class="panel-title" data-i18n>STREET LEVEL</span>
-      <span class="panel-divider"></span>
-      <button id="sl-status" :class="`sl-status${status.tone ? ` is-${status.tone}` : ''}`" type="button" :aria-pressed="String(status.pressed)" :title="status.title">{{ status.text }}</button>
-      <PanelCollapseButton target="street-level-panel" :name="t('STREET LEVEL')" sideways initial="◀" :initial-title="t('Expand panel')" />
-    </div>
+<RailPanel id="street-level-panel" start-collapsed :data-sl-enabled="view ? String(view.enabled) : undefined" :title="t('STREET LEVEL')" sideways scroll rail-scroller>
+  <template #actions><button id="sl-status" :class="`sl-status${status.tone ? ` is-${status.tone}` : ''}`" type="button" :aria-pressed="String(status.pressed)" :title="status.title">{{ status.text }}</button></template>
     <div id="sl-body" class="sl-body">
       <div id="sl-viewer-wrap" class="sl-viewer-wrap" :hidden="!viewer.open">
         <div class="sl-viewer-bar">
@@ -168,6 +160,5 @@ const vThumb = { mounted: placeThumb, updated: placeThumb };
         <button id="sl-nearest-btn" class="scene-btn sl-nearest-btn" type="button" :hidden="!view?.nearest.visible" :title="nearest.title || undefined" :disabled="nearest.disabled" data-i18n-runtime>{{ nearest.label }}</button>
       </div>
     </div>
-  </div>
-</div>
+</RailPanel>
 </template>