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

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 );
}
}