peptide-repo/prautoblogger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: interactive model picker with searchable popup and pricing

Browse Source 
Replace plain text inputs for analysis/writing/editor model fields
with a rich model picker that fetches the OpenRouter model registry
and displays a searchable popup with model name, provider, input/output
pricing per 1M tokens, and context window. Also extracts source status
and model field renderers into dedicated field classes to keep
class-admin-page.php under the 300-line cap.

New files:
- assets/js/model-picker.js — popup UI with search, filtering, caching
- assets/css/model-picker.css — popup styles matching admin design system
- includes/admin/fields/class-open-router-model-field.php — server render
- includes/admin/fields/class-source-status-field.php — extracted field

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
peptiderepo
2026-04-18 02:53:40 +07:00
parent dcc8b7b183
commit 31f303a831
9 changed files with 670 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
includes/admin/class-admin-page.php
View File

@@ -65,13 +65,16 @@ class PRAutoBlogger_Admin_Page {
}
wp_enqueue_style( 'prautoblogger-admin', PRAUTOBLOGGER_PLUGIN_URL . 'assets/css/admin.css', [], PRAUTOBLOGGER_VERSION );
wp_enqueue_style( 'prautoblogger-model-picker', PRAUTOBLOGGER_PLUGIN_URL . 'assets/css/model-picker.css', [ 'prautoblogger-admin' ], PRAUTOBLOGGER_VERSION );
wp_enqueue_script( 'prautoblogger-admin', PRAUTOBLOGGER_PLUGIN_URL . 'assets/js/admin.js', [ 'jquery' ], PRAUTOBLOGGER_VERSION, true );
wp_enqueue_script( 'prautoblogger-model-picker', PRAUTOBLOGGER_PLUGIN_URL . 'assets/js/model-picker.js', [ 'jquery', 'prautoblogger-admin' ], PRAUTOBLOGGER_VERSION, true );
wp_localize_script( 'prautoblogger-admin', 'prautobloggerAdmin', [
'ajaxUrl' => admin_url( 'admin-ajax.php' ),
'generateNonce' => wp_create_nonce( 'prautoblogger_generate_now' ),
'imageNonce' => wp_create_nonce( 'prautoblogger_generate_image' ),
'testNonce' => wp_create_nonce( 'prautoblogger_test_connection' ),
'modelsNonce' => wp_create_nonce( 'prautoblogger_get_models' ),
'reviewNonce' => wp_create_nonce( 'prautoblogger_review_queue' ),
'generatingText' => __( 'Generating...', 'prautoblogger' ),
'generateText' => __( 'Generate Now', 'prautoblogger' ),
@@ -152,6 +155,10 @@ class PRAutoBlogger_Admin_Page {
}
break;
case 'model_select':
$this->render_model_select_field( $id, (string) $value, $args );
break;
case 'source_status':
$this->render_source_status_field();
break;
@@ -174,58 +181,25 @@ class PRAutoBlogger_Admin_Page {
}
/**
* Render the Reddit source status indicator.
* Delegate source status rendering to the dedicated field class.
*
* Shows Reddit RSS (primary) and .json (fallback) availability
* with live status checks via transient cache and rate limit info.
*
* Side effects: Reads transients for cached availability status.
*
* @return void
* @see admin/fields/class-source-status-field.php
*/
private function render_source_status_field(): void {
$last_collection = get_option( 'prautoblogger_last_collection_time', '' );
$last_source_used = get_option( 'prautoblogger_last_source_used', '' );
PRAutoBlogger_Source_Status_Field::render();
}
echo '<div class="ab-source-status">';
// Reddit RSS — primary source.
printf(
'<div class="ab-source-row">'
. '<span class="ab-source-dot ab-status-ok"></span>'
. '<strong>%s</strong> <span class="ab-source-badge">%s</span>'
. '<span class="ab-source-label">%s</span>'
. '</div>',
esc_html__( 'Reddit RSS', 'prautoblogger' ),
esc_html__( 'Primary', 'prautoblogger' ),
esc_html__( 'Reliable from all IPs', 'prautoblogger' )
);
// Reddit .json — fallback source.
printf(
'<div class="ab-source-row">'
. '<span class="ab-source-dot ab-status-ok"></span>'
. '<strong>%s</strong> <span class="ab-source-badge ab-badge-secondary">%s</span>'
. '<span class="ab-source-label">%s</span>'
. '</div>',
esc_html__( 'Reddit .json', 'prautoblogger' ),
esc_html__( 'Fallback + Comments', 'prautoblogger' ),
esc_html__( 'May be IP-blocked on some hosts', 'prautoblogger' )
);
// Last collection info.
if ( '' !== $last_collection ) {
$time_ago = human_time_diff( (int) $last_collection, time() );
printf(
'<div class="ab-source-meta">%s <strong>%s</strong> %s</div>',
esc_html__( 'Last collection:', 'prautoblogger' ),
/* translators: %s is a human-readable time difference like "2 hours" */
esc_html( sprintf( __( '%s ago', 'prautoblogger' ), $time_ago ) ),
'' !== $last_source_used ? esc_html( sprintf( __( 'via %s', 'prautoblogger' ), $last_source_used ) ) : ''
);
}
echo '</div>';
/**
* Delegate model picker rendering to the dedicated field class.
*
* @param string $id Field HTML id/name.
* @param string $value Current model id.
* @param array<string, mixed> $args Field definition.
*
* @see admin/fields/class-openrouter-model-field.php
*/
private function render_model_select_field( string $id, string $value, array $args ): void {
PRAutoBlogger_OpenRouter_Model_Field::render( $id, $value, $args );
}
/**

9
includes/admin/class-settings-fields.php
View File

@@ -125,27 +125,30 @@ class PRAutoBlogger_Settings_Fields {
[
'id' => 'prautoblogger_analysis_model',
'label' => __( 'Analysis Model', 'prautoblogger' ),
'type' => 'text',
'type' => 'model_select',
'section' => 'prautoblogger_models',
'default' => PRAUTOBLOGGER_DEFAULT_ANALYSIS_MODEL,
'capability' => 'text→text',
'description' => __( 'Used for source analysis. Pick a cheap, fast model.', 'prautoblogger' ),
'badge' => __( 'Low cost', 'prautoblogger' ),
],
[
'id' => 'prautoblogger_writing_model',
'label' => __( 'Writing Model', 'prautoblogger' ),
'type' => 'text',
'type' => 'model_select',
'section' => 'prautoblogger_models',
'default' => PRAUTOBLOGGER_DEFAULT_WRITING_MODEL,
'capability' => 'text→text',
'description' => __( 'Used for article generation. Quality matters here.', 'prautoblogger' ),
'badge' => __( 'Quality', 'prautoblogger' ),
],
[
'id' => 'prautoblogger_editor_model',
'label' => __( 'Editor Model', 'prautoblogger' ),
'type' => 'text',
'type' => 'model_select',
'section' => 'prautoblogger_models',
'default' => PRAUTOBLOGGER_DEFAULT_EDITOR_MODEL,
'capability' => 'text→text',
'description' => __( 'Used for the chief editor review pass.', 'prautoblogger' ),
'badge' => __( 'Quality', 'prautoblogger' ),
],

78
includes/admin/fields/class-open-router-model-field.php Normal file
View File

@@ -0,0 +1,78 @@
<?php
declare(strict_types=1);
/**
* Renders the interactive model-picker field for OpenRouter models.
*
* What: a button showing the current model's name + pricing. Clicking it
* opens a JS-powered popup (model-picker.js) with a searchable list.
* Who calls it: PRAutoBlogger_Admin_Page::render_field() delegates here
* for fields with type 'model_select'.
* Dependencies: PRAutoBlogger_Model_Registry_Interface (cached registry lookup).
*
* @see admin/class-admin-page.php — Calls render() from the main field switch.
* @see assets/js/model-picker.js — JS popup that fetches + displays models.
* @see services/interface-model-registry.php — Registry interface for find_model().
*/
class PRAutoBlogger_OpenRouter_Model_Field {
/**
* Render the model picker trigger button and hidden input.
*
* @param string $id Field HTML id/name attribute.
* @param string $value Current model id (e.g. 'google/gemini-2.5-flash-lite').
* @param array<string, mixed> $args Field definition from settings fields.
*/
public static function render( string $id, string $value, array $args ): void {
$capability = $args['capability'] ?? 'text→text';
$display_name = $value ?: __( '— Select a model —', 'prautoblogger' );
$display_price = '';
// Try to resolve display name + price from the cached registry.
$registry = prautoblogger()->get_executor()->get_model_registry();
$model = $registry->find_model( $value );
if ( null !== $model ) {
$display_name = $model['name'] ?? $value;
$in = (float) ( $model['input_price_per_m'] ?? 0 );
$out = (float) ( $model['output_price_per_m'] ?? 0 );
$display_price = self::format_price( $in ) . ' / ' . self::format_price( $out );
}
// Hidden input carries the actual value for the form submission.
printf(
'<input type="hidden" id="%s" name="%s" value="%s" />',
esc_attr( $id ),
esc_attr( $id ),
esc_attr( $value )
);
// Trigger button — opens the model picker popup via JS.
printf(
'<button type="button" class="ab-mp-trigger" data-field-id="%s" data-capability="%s">'
. '<span class="ab-mp-display-name">%s</span>'
. '<span class="ab-mp-display-price">%s</span>'
. '<span class="ab-mp-display-arrow">&#9662;</span>'
. '</button>',
esc_attr( $id ),
esc_attr( $capability ),
esc_html( $display_name ),
esc_html( $display_price )
);
}
/**
* Format a price-per-million-tokens value for display.
*
* @param float $price Price per 1M tokens.
* @return string Formatted price string like "$0.25" or "Free".
*/
private static function format_price( float $price ): string {
if ( $price <= 0 ) {
return __( 'Free', 'prautoblogger' );
}
if ( $price < 0.01 ) {
return '$' . number_format( $price, 4 );
}
return '$' . number_format( $price, 2 );
}
}

66
includes/admin/fields/class-source-status-field.php Normal file
View File

@@ -0,0 +1,66 @@
<?php
declare(strict_types=1);
/**
* Renders the Reddit source status indicator in the admin settings.
*
* What: shows RSS (primary) and .json (fallback) availability with
* last-collection timestamp.
* Who calls it: PRAutoBlogger_Admin_Page::render_field() delegates here
* for fields with type 'source_status'.
* Dependencies: None — reads wp_options only.
*
* @see admin/class-admin-page.php — Calls render() from the main field switch.
*/
class PRAutoBlogger_Source_Status_Field {
/**
* Render the Reddit source status indicator.
*
* Side effects: reads wp_options for last collection time.
*/
public static function render(): void {
$last_collection = get_option( 'prautoblogger_last_collection_time', '' );
$last_source_used = get_option( 'prautoblogger_last_source_used', '' );
echo '<div class="ab-source-status">';
// Reddit RSS — primary source.
printf(
'<div class="ab-source-row">'
. '<span class="ab-source-dot ab-status-ok"></span>'
. '<strong>%s</strong> <span class="ab-source-badge">%s</span>'
. '<span class="ab-source-label">%s</span>'
. '</div>',
esc_html__( 'Reddit RSS', 'prautoblogger' ),
esc_html__( 'Primary', 'prautoblogger' ),
esc_html__( 'Reliable from all IPs', 'prautoblogger' )
);
// Reddit .json — fallback source.
printf(
'<div class="ab-source-row">'
. '<span class="ab-source-dot ab-status-ok"></span>'
. '<strong>%s</strong> <span class="ab-source-badge ab-badge-secondary">%s</span>'
. '<span class="ab-source-label">%s</span>'
. '</div>',
esc_html__( 'Reddit .json', 'prautoblogger' ),
esc_html__( 'Fallback + Comments', 'prautoblogger' ),
esc_html__( 'May be IP-blocked on some hosts', 'prautoblogger' )
);
// Last collection info.
if ( '' !== $last_collection ) {
$time_ago = human_time_diff( (int) $last_collection, time() );
printf(
'<div class="ab-source-meta">%s <strong>%s</strong> %s</div>',
esc_html__( 'Last collection:', 'prautoblogger' ),
/* translators: %s is a human-readable time difference like "2 hours" */
esc_html( sprintf( __( '%s ago', 'prautoblogger' ), $time_ago ) ),
'' !== $last_source_used ? esc_html( sprintf( __( 'via %s', 'prautoblogger' ), $last_source_used ) ) : ''
);
}
echo '</div>';
}
}

1
includes/class-autoloader.php
View File

@@ -22,6 +22,7 @@ class PRAutoBlogger_Autoloader {
private static array $directories = [
'', // includes/ root
'admin/',
'admin/fields/',
'core/',
'providers/',
'models/',

28
includes/class-executor.php
View File

@@ -152,6 +152,34 @@ class PRAutoBlogger_Executor {
}
}
/**
* AJAX handler: return the model registry for the admin model picker.
*
* Returns the full cached model list. If the registry is empty, triggers
* a refresh first. Called by the model-picker.js popup.
*
* Side effects: may trigger an OpenRouter API call if registry is empty.
*/
public function on_ajax_get_models(): void {
check_ajax_referer( 'prautoblogger_get_models', 'nonce' );
if ( ! current_user_can( 'manage_options' ) ) {
wp_send_json_error( [ 'message' => __( 'Insufficient permissions.', 'prautoblogger' ) ], 403 );
return;
}
$registry = $this->get_model_registry();
$models = $registry->get_models();
// Auto-refresh if the registry has never been populated.
if ( empty( $models ) ) {
$registry->refresh( true );
$models = $registry->get_models();
}
wp_send_json_success( $models );
}
/** AJAX handler: test API connections (OpenRouter, Reddit). */
public function on_ajax_test_connection(): void {
check_ajax_referer( 'prautoblogger_test_connection', 'nonce' );

1
includes/class-prautoblogger.php
View File

@@ -94,6 +94,7 @@ class PRAutoBlogger {
add_action( 'wp_ajax_prautoblogger_generate_now', [ $this->executor, 'on_ajax_generate_now' ] );
add_action( 'wp_ajax_prautoblogger_generate_image', [ $this->executor, 'on_ajax_generate_image' ] );
add_action( 'wp_ajax_prautoblogger_test_connection', [ $this->executor, 'on_ajax_test_connection' ] );
add_action( 'wp_ajax_prautoblogger_get_models', [ $this->executor, 'on_ajax_get_models' ] );
$review_queue = new PRAutoBlogger_Review_Queue();
add_action( 'wp_ajax_prautoblogger_approve_post', [ $review_queue, 'on_ajax_approve_post' ] );