feat: Split Metrics tab into sub-tabs and fix early mode storage (v0.4.3)

- Add sub-tabs: Endpoint, Selection, Runtime, Advanced
- Fix early mode checkbox not saving (was outside form element)
- Add CSS styling for horizontal sub-tab navigation
- Update translations with new sub-tab strings

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

CHANGELOG.md

@@ -5,18 +5,24 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [0.4.2] - 2026-02-02
+## [0.4.3] - 2026-02-02
 
 ### Added
 
-- Option to disable early mode in admin settings (Metrics tab)
+- Sub-tabs navigation within Metrics tab (Endpoint, Selection, Runtime, Advanced)
+- Option to disable early mode in admin settings (Metrics → Advanced)
 - Support for `WP_PROMETHEUS_DISABLE_EARLY_MODE` environment variable
 - Early mode status display in settings
 
+### Fixed
+
+- Early mode setting now saves correctly (moved into form with proper settings group)
+
 ### Changed
 
-- Early mode can now be disabled for users who need the `wp_prometheus_collect_metrics` hook for custom metrics
+- Reorganized Metrics tab into logical sub-sections for better usability
-- Updated translations with new early mode strings (English and German)
+- Early mode can now be disabled for users who need the `wp_prometheus_collect_metrics` hook
+- Updated translations with sub-tab and early mode strings (English and German)
 
 ## [0.4.1] - 2026-02-02
 

CLAUDE.md

@@ -291,6 +291,20 @@ add_action( 'wp_prometheus_collect_metrics', function( $collector ) {
 
 ## Session History
 
+### 2026-02-02 - Sub-tabs & Early Mode Fix (v0.4.3)
+
+- Split Metrics tab into sub-tabs for better organization:
+  - **Endpoint**: Authentication token configuration
+  - **Selection**: Enable/disable individual metrics
+  - **Runtime**: Reset runtime metrics data
+  - **Advanced**: Early mode toggle and status
+- Fixed early mode setting not being saved (was outside form element)
+- Added CSS styling for horizontal sub-tab navigation
+- **Key Learning**: WordPress Settings API form structure
+  - Settings must be inside `<form action="options.php">` with `settings_fields()` call
+  - Each sub-tab needs its own form wrapper for proper saving
+  - Sub-tabs use URL query parameter (`subtab`) within the main tab
+
 ### 2026-02-02 - Early Mode Toggle (v0.4.2)
 
 - Added option to disable early mode for users who need extensibility

assets/css/admin.css

@@ -9,6 +9,61 @@
     margin-top: 20px;
 }
 
+/* Sub-tabs navigation */
+.wp-prometheus-subtabs {
+    margin-top: 15px;
+}
+
+.wp-prometheus-subtab-nav {
+    display: flex;
+    margin: 0 0 20px 0;
+    padding: 0;
+    list-style: none;
+    border-bottom: 1px solid #c3c4c7;
+}
+
+.wp-prometheus-subtab-item {
+    margin: 0;
+    padding: 0;
+}
+
+.wp-prometheus-subtab-item a {
+    display: block;
+    padding: 8px 16px;
+    text-decoration: none;
+    color: #50575e;
+    border: 1px solid transparent;
+    border-bottom: none;
+    margin-bottom: -1px;
+    background: transparent;
+    font-size: 13px;
+    font-weight: 400;
+}
+
+.wp-prometheus-subtab-item a:hover {
+    color: #2271b1;
+    background: #f6f7f7;
+}
+
+.wp-prometheus-subtab-item.active a {
+    color: #1d2327;
+    background: #fff;
+    border-color: #c3c4c7;
+    border-bottom-color: #fff;
+    font-weight: 600;
+}
+
+.wp-prometheus-subtab-content {
+    background: #fff;
+    border: 1px solid #c3c4c7;
+    border-top: none;
+    padding: 20px;
+}
+
+.wp-prometheus-subtab-content h3:first-child {
+    margin-top: 0;
+}
+
 /* License status box */
 .wp-prometheus-license-status {
     margin: 15px 0;

languages/wp-prometheus-de_CH.po

@@ -919,3 +919,31 @@ msgstr "Fruehzeitiger Modus ist aktiviert (aktiv fuer /metrics-Anfragen)"
 #: src/Admin/Settings.php
 msgid "Clear all accumulated runtime metric data (HTTP requests, database queries). This is useful for testing or starting fresh."
 msgstr "Alle gesammelten Laufzeit-Metrikdaten loeschen (HTTP-Anfragen, Datenbank-Abfragen). Dies ist nuetzlich zum Testen oder fuer einen Neuanfang."
+
+#: src/Admin/Settings.php
+msgid "Endpoint"
+msgstr "Endpunkt"
+
+#: src/Admin/Settings.php
+msgid "Selection"
+msgstr "Auswahl"
+
+#: src/Admin/Settings.php
+msgid "Runtime"
+msgstr "Laufzeit"
+
+#: src/Admin/Settings.php
+msgid "Advanced"
+msgstr "Erweitert"
+
+#: src/Admin/Settings.php
+msgid "Runtime Metrics Management"
+msgstr "Laufzeit-Metriken Verwaltung"
+
+#: src/Admin/Settings.php
+msgid "Runtime metrics track HTTP requests and database queries across requests. Use this section to manage accumulated data."
+msgstr "Laufzeit-Metriken erfassen HTTP-Anfragen und Datenbank-Abfragen ueber mehrere Anfragen hinweg. Verwenden Sie diesen Bereich zur Verwaltung der gesammelten Daten."
+
+#: src/Admin/Settings.php
+msgid "Reset Data"
+msgstr "Daten zuruecksetzen"

languages/wp-prometheus.pot

@@ -916,3 +916,31 @@ msgstr ""
 #: src/Admin/Settings.php
 msgid "Clear all accumulated runtime metric data (HTTP requests, database queries). This is useful for testing or starting fresh."
 msgstr ""
+
+#: src/Admin/Settings.php
+msgid "Endpoint"
+msgstr ""
+
+#: src/Admin/Settings.php
+msgid "Selection"
+msgstr ""
+
+#: src/Admin/Settings.php
+msgid "Runtime"
+msgstr ""
+
+#: src/Admin/Settings.php
+msgid "Advanced"
+msgstr ""
+
+#: src/Admin/Settings.php
+msgid "Runtime Metrics Management"
+msgstr ""
+
+#: src/Admin/Settings.php
+msgid "Runtime metrics track HTTP requests and database queries across requests. Use this section to manage accumulated data."
+msgstr ""
+
+#: src/Admin/Settings.php
+msgid "Reset Data"
+msgstr ""

src/Admin/Settings.php

@@ -400,49 +400,179 @@ class Settings {
 		<?php
 	}
 
+	/**
+	 * Get metrics sub-tabs.
+	 *
+	 * @return array
+	 */
+	private function get_metrics_subtabs(): array {
+		return array(
+			'endpoint'  => __( 'Endpoint', 'wp-prometheus' ),
+			'selection' => __( 'Selection', 'wp-prometheus' ),
+			'runtime'   => __( 'Runtime', 'wp-prometheus' ),
+			'advanced'  => __( 'Advanced', 'wp-prometheus' ),
+		);
+	}
+
+	/**
+	 * Get current metrics sub-tab.
+	 *
+	 * @return string
+	 */
+	private function get_current_metrics_subtab(): string {
+		$subtab  = isset( $_GET['subtab'] ) ? sanitize_key( $_GET['subtab'] ) : 'endpoint';
+		$subtabs = $this->get_metrics_subtabs();
+		return array_key_exists( $subtab, $subtabs ) ? $subtab : 'endpoint';
+	}
+
 	/**
 	 * Render metrics tab content.
 	 *
 	 * @return void
 	 */
 	private function render_metrics_tab(): void {
+		$subtabs         = $this->get_metrics_subtabs();
+		$current_subtab  = $this->get_current_metrics_subtab();
 		?>
-		<form method="post" action="options.php">
+		<div class="wp-prometheus-subtabs">
+			<ul class="wp-prometheus-subtab-nav">
+				<?php foreach ( $subtabs as $subtab_id => $subtab_name ) : ?>
 					<?php
-			settings_fields( 'wp_prometheus_metrics_settings' );
+					$subtab_url = add_query_arg(
-			do_settings_sections( 'wp-prometheus-metrics' );
+						array(
-			submit_button();
+							'page'   => 'wp-prometheus',
+							'tab'    => 'metrics',
+							'subtab' => $subtab_id,
+						),
+						admin_url( 'options-general.php' )
+					);
+					$active_class = ( $current_subtab === $subtab_id ) ? ' active' : '';
 					?>
-		</form>
+					<li class="wp-prometheus-subtab-item<?php echo esc_attr( $active_class ); ?>">
+						<a href="<?php echo esc_url( $subtab_url ); ?>"><?php echo esc_html( $subtab_name ); ?></a>
+					</li>
+				<?php endforeach; ?>
+			</ul>
 
-		<hr style="margin: 30px 0;">
+			<div class="wp-prometheus-subtab-content">
-
+				<?php
-		<h3><?php esc_html_e( 'Reset Runtime Metrics', 'wp-prometheus' ); ?></h3>
+				switch ( $current_subtab ) {
-		<p class="description"><?php esc_html_e( 'Clear all accumulated runtime metric data (HTTP requests, database queries). This is useful for testing or starting fresh.', 'wp-prometheus' ); ?></p>
+					case 'endpoint':
-		<p>
+						$this->render_metrics_endpoint_subtab();
-			<button type="button" id="wp-prometheus-reset-runtime" class="button button-secondary">
+						break;
-				<?php esc_html_e( 'Reset Runtime Metrics', 'wp-prometheus' ); ?>
+					case 'selection':
-			</button>
+						$this->render_metrics_selection_subtab();
-			<span id="wp-prometheus-reset-spinner" class="spinner" style="float: none;"></span>
+						break;
-		</p>
+					case 'runtime':
-		<div id="wp-prometheus-reset-message" style="display: none; margin-top: 10px;"></div>
+						$this->render_metrics_runtime_subtab();
-
+						break;
-		<hr style="margin: 30px 0;">
+					case 'advanced':
-
+						$this->render_metrics_advanced_subtab();
-		<?php $this->render_early_mode_section(); ?>
+						break;
+				}
+				?>
+			</div>
+		</div>
 		<?php
 	}
 
 	/**
-	 * Render early mode section.
+	 * Render metrics endpoint sub-tab.
 	 *
 	 * @return void
 	 */
-	private function render_early_mode_section(): void {
+	private function render_metrics_endpoint_subtab(): void {
+		?>
+		<form method="post" action="options.php">
+			<?php settings_fields( 'wp_prometheus_metrics_settings' ); ?>
+
+			<h3><?php esc_html_e( 'Authentication', 'wp-prometheus' ); ?></h3>
+			<p class="description"><?php esc_html_e( 'Configure authentication for the /metrics endpoint.', 'wp-prometheus' ); ?></p>
+
+			<table class="form-table" role="presentation">
+				<tr>
+					<th scope="row">
+						<label for="wp_prometheus_auth_token"><?php esc_html_e( 'Auth Token', 'wp-prometheus' ); ?></label>
+					</th>
+					<td>
+						<?php $this->render_auth_token_field(); ?>
+					</td>
+				</tr>
+			</table>
+
+			<?php submit_button(); ?>
+		</form>
+		<?php
+	}
+
+	/**
+	 * Render metrics selection sub-tab.
+	 *
+	 * @return void
+	 */
+	private function render_metrics_selection_subtab(): void {
+		?>
+		<form method="post" action="options.php">
+			<?php settings_fields( 'wp_prometheus_metrics_settings' ); ?>
+
+			<h3><?php esc_html_e( 'Enabled Metrics', 'wp-prometheus' ); ?></h3>
+			<p class="description"><?php esc_html_e( 'Select which metrics to expose on the /metrics endpoint.', 'wp-prometheus' ); ?></p>
+
+			<table class="form-table" role="presentation">
+				<tr>
+					<th scope="row"><?php esc_html_e( 'Select Metrics', 'wp-prometheus' ); ?></th>
+					<td>
+						<?php $this->render_enabled_metrics_field(); ?>
+					</td>
+				</tr>
+			</table>
+
+			<?php submit_button(); ?>
+		</form>
+		<?php
+	}
+
+	/**
+	 * Render metrics runtime sub-tab.
+	 *
+	 * @return void
+	 */
+	private function render_metrics_runtime_subtab(): void {
+		?>
+		<h3><?php esc_html_e( 'Runtime Metrics Management', 'wp-prometheus' ); ?></h3>
+		<p class="description"><?php esc_html_e( 'Runtime metrics track HTTP requests and database queries across requests. Use this section to manage accumulated data.', 'wp-prometheus' ); ?></p>
+
+		<table class="form-table" role="presentation">
+			<tr>
+				<th scope="row"><?php esc_html_e( 'Reset Data', 'wp-prometheus' ); ?></th>
+				<td>
+					<p class="description" style="margin-bottom: 10px;">
+						<?php esc_html_e( 'Clear all accumulated runtime metric data (HTTP requests, database queries). This is useful for testing or starting fresh.', 'wp-prometheus' ); ?>
+					</p>
+					<button type="button" id="wp-prometheus-reset-runtime" class="button button-secondary">
+						<?php esc_html_e( 'Reset Runtime Metrics', 'wp-prometheus' ); ?>
+					</button>
+					<span id="wp-prometheus-reset-spinner" class="spinner" style="float: none;"></span>
+					<div id="wp-prometheus-reset-message" style="display: none; margin-top: 10px;"></div>
+				</td>
+			</tr>
+		</table>
+		<?php
+	}
+
+	/**
+	 * Render metrics advanced sub-tab.
+	 *
+	 * @return void
+	 */
+	private function render_metrics_advanced_subtab(): void {
 		$disabled     = get_option( 'wp_prometheus_disable_early_mode', false );
 		$env_override = false !== getenv( 'WP_PROMETHEUS_DISABLE_EARLY_MODE' );
 		$early_active = defined( 'WP_PROMETHEUS_EARLY_METRICS' ) && WP_PROMETHEUS_EARLY_METRICS;
 		?>
+		<form method="post" action="options.php">
+			<?php settings_fields( 'wp_prometheus_metrics_settings' ); ?>
+
 			<h3><?php esc_html_e( 'Early Mode', 'wp-prometheus' ); ?></h3>
 			<p class="description">
 				<?php esc_html_e( 'Early mode intercepts /metrics requests before full WordPress initialization. This prevents memory exhaustion issues caused by some plugins (e.g., Twig-based themes/plugins) but disables the wp_prometheus_collect_metrics hook for custom metrics.', 'wp-prometheus' ); ?>
@@ -486,6 +616,9 @@ class Settings {
 					</td>
 				</tr>
 			</table>
+
+			<?php submit_button(); ?>
+		</form>
 		<?php
 	}
 

wp-prometheus.php

@@ -130,7 +130,7 @@ wp_prometheus_early_metrics_check();
  *
  * @var string
  */
-define( 'WP_PROMETHEUS_VERSION', '0.4.2' );
+define( 'WP_PROMETHEUS_VERSION', '0.4.3' );
 
 /**
  * Plugin file path.